@charset "utf-8";

/* 共通 */
.About {
    font-family: Montserrat;
    font-size: 12.5rem;
    font-weight: 800;
    line-height: 0.9;
}

.About_meintxt {
    color: #559658;
    font-family: Montserrat;
    font-size: 6rem;
    font-weight: 800;
    margin-bottom: 70px;
}

/* トップビュー */

#top_view {
    padding: 200px 50% 0 10%;
    margin-bottom: 270px;
}

.sub_txt {
    color: #000;
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.25;
    letter-spacing: 2px;
}

/* トップビュー スマホサイズ */

@media screen and (max-width:768px) {

    .About {
        font-size: 6rem;
    }

    #top_view {
        width: 100%;
        height: 70vh;
        padding: 0 10%;
        margin-top: 200px ;
        margin-bottom: 0 
    }
}

/* 自己紹介 */

#Profile {
    padding: 150px 11%;
    display: flex;
    align-items: flex-end;
}

.Profile_pcimg {
    max-width: 100%;
    height: auto;
    margin-left: 50px;
}

.Profile_spimg {
    display: none;
}

.Profile_meintxt {
    color: #609F48;
    font-size: 7rem;
    font-weight: 700;
    letter-spacing: 10.5px;
}

.Profile_subtxt {
    font-size: 2.5rem;
    font-weight: 500;
    letter-spacing: 1.25px;
    margin-top: 50px;
} 

.Profile_txt {
    font-size: 2.5rem;
    font-weight: 500;
    letter-spacing: 1.25px;
    margin-top: 10px;
}

@media screen and (max-width:1024px) {

    #Profile {
        display: block;
        padding: 0px 10%;
    }

    .Profile_pcimg {
        display: none;
    }
    
    .Profile_spimg {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .Profile_meintxt {
        font-size: 5rem;
        margin-top: 20px;
    }

    .Profile_subtxt {
        font-size: 2rem;
        font-weight: 400;
    } 

    .Profile_txt {
        font-size: 2rem;
        font-weight: 400;
        letter-spacing: 2px;
    }
    
}


/* 見出し */

#title {
    width: 40%;
    text-align: center;
    margin: 150px auto 100px ;
}

.title_meintxt {
    color: #609F48;
    font-size: 10rem;
    font-weight: 700;
    letter-spacing: 8.4px;
    border-bottom: #559658 5px solid;
}

.title_subtxt {
    color: #609F48;
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-top: 20px;
}

@media screen and (max-width:768px) {

    #title {
        width: 100%;
        margin: 50px auto 50px ;
    }

    .title_meintxt {
        font-size: 5rem;
        border-bottom: #559658 2px solid;
        display: inline-block;
    }
    
}

/* スキル一覧（深掘り） */

#Skills {
    padding: 100px 11%;
}

.Skille_pcimg {
    max-width: 100%;
    height: auto;
}

.Skille_spimg {
    display: none;
}

.Skille_area {
    padding: 0 5%;
}

.Skills_meintxt {
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
}

.Skills_subtxt {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.75;
    margin-top: 30px;
}

.Skille_box {
    display: flex;
    align-items: center;
    margin-top: 50px;
}

/* スマホサイズ */
@media screen and (max-width:768px) {

    #Skills {
        padding: 0 10%;
    }

    .About_meintxt {
        font-size: 5rem;
        margin-bottom: 40px;
    }

    .Skille_pcimg {
        display: none;
    }
    
    .Skille_spimg {
        display: block;
        margin: 0 auto;
        margin-bottom: 40px;
        max-width: 30%;
    }

    .Skille_area {
        display: block;
        justify-content: center;
        padding: 0 ;
    }

    .Skills_meintxt {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 30px;
    }

    .Skills_subtxt {
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 2;
        margin : 0;
    }
    
}

@media screen and (max-width:425px) {
    .Skille_spimg {
        max-width: 50%;
    }
}

/* 要素右・左移動用 */

.left {
    margin-left: 30px;
}

.right {
    margin-right: 30px;
}

@media screen and (max-width:768px) {

    .left {
        margin: 0 0 40px 0
    }

    .right {
        margin: 0 0 40px 0
    }
    
}

/* これまで経験したこと */

#History {
    padding-bottom: 200px;
}

.History_area {
    max-width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 100px;
    position: relative;
}

.border {
    position: absolute;
    left: 12%;
    top: 20px;
    background: #609F48;
    width: 10px;
    height: 70%;
}

.History_area img {
    max-width: 100%;
    height: auto;
}

.History_pcimg {
    width: 20%;
}

.History_spimg {
    display: none;
}

.History_txtarea {
    width: 40%;
    margin-right: 100px;
}

.time_txt {
    color: #8A8A8A;
    font-size: 3rem;
    font-weight: 500;
}

.History_meintxt {
    font-size: 2rem;
    font-weight: 500;
    line-height: 150%;
    margin-top: 15px; 
} 

@media screen and (max-width:768px) {

    .History_pcimg {
        display: none;
    }

    .History_spimg {
        display: block;
        margin: 0 auto 20px;
    }

    #History {
        padding: 0 10%;
    }

    .History_area {
        display: block;
        border-left: none;
        margin-top: 0;
        margin-bottom: 60px;
        
    }

    .History_txtarea {
        width: 50%;
        margin : 0 auto;
    }
    
    .time_txt {
        color: #8A8A8A;
        font-size: 1.5rem;
    }
    
    .History_meintxt {
        font-size: 1.5rem;
        font-weight: 400;
        margin-top: 5px; 
    } 

    .border {
        display: none;
    }

    .History_spimg {
        width: 50%;
    }

    
}

@media screen and (max-width:500px) {
    .History_txtarea {
        width: 100%;
    }

    .border {
        display: none;
    }

    .History_spimg {
        width: 100%;
    }

}