@charset "utf-8";


/* ============================================================
common
 ========================================================= */
.container {
    overflow: visible;
}

/* header nav btn */
/* footer nav btn*/
.navItem:nth-of-type(3) .btn::after,
.footerNavItem:nth-of-type(3)::after{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--primary-white2);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
.navItem:nth-of-type(3) .active::after {
    height: 6px;
}


.main {
    background-color: var(--primary-white);
}


.aboutTop::after {
    display: none;
}

/* ============================================================
about
 ========================================================= */
.aboutTop {
    padding: 20.8vw 6.9vw 10.4vw;
    background: var(--primary-black-gradation);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    z-index: 100;
}
.sectionTitleAbout {
    margin-left: 0;
}
.otherTitle {
    font-family: "Anton";
    font-size: 13.9vw;
    display: flex;
    gap: 0;
    color: var(--primary-white);
    letter-spacing: -4px;
}
.otherTitle span:nth-of-type(2),
.otherTitle span:nth-of-type(3) {
    letter-spacing: 0;
}
.otherTitle span:nth-of-type(4),
.otherTitle span:nth-of-type(5) {
    letter-spacing: 4px;
}
.otherTitle span:nth-of-type(6),
.otherTitle span:nth-of-type(7) {
    letter-spacing: -2px;
}

.sectionTitleAbout p {
    letter-spacing: -1.28px;
}


.otherTitle span {
    transform: translateY(30%);
    opacity: 0;
    transition: 1s;
}

.otherTitle span.active {
    transform: translateY(0);
    opacity: 1;
}

.topImg {
    width: 86.1vw;
    margin: 0 auto;
    display: block;
    margin-top: 6.9vw;
}
.topImgSp {
    display: none;
}


/* =========================================================
 about explanation  
 ===========================================================*/
.explanation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 11.8vw;
    padding-right: 6.9vw;
    column-gap: 6.9vw;
    flex-direction: row-reverse;
}

.explanation img {
    width: 41.7vw;
}

.explanationTXT {
    padding: 2.1vw 0;
}

.nameEn {
    font-size: 1.1vw;
}

.nameJp {
    font-size: 2.5vw;
    margin-top: 4px;
}

.explanationMain {
    padding: 1.4vw 0;
    border-top: 1px solid var(--primary-black);
    border-bottom: 1px solid var(--primary-black);
    margin-top: 1.4vw;
    font-size: 1.3vw;
    line-height: 1.5;
    letter-spacing: 1.8px;
}


/* =============================================================
sectionContents 
==============================================================*/

/* career */
.sectionContents {
    padding-left: 6.7vw;
    padding-top: 0;
    border-top: 1px solid var(--primary-black);
}

.contentsItem {
    position: relative;
    overflow: visible;
    display: flex;
    justify-content: space-between;
    margin-top: 6.9vw;
}

.careerTitle,
.strengthsTitle,
.interestsTitle {
    padding-top: 1.4vw;
    position: sticky;
    top: 20px;
    left: 0;
    height: fit-content;
}

.careerTitle img {
    width: 15.4vw;
}

.careerList,
.strengthsList,
.interestsList {
    padding-top: 6.9vw;
    width: 50.3vw;
    margin-right: 13.9vw;
}

.careerItem {
    padding: 2.8vw 0;
    border-bottom: 1px solid var(--primary-black);
}

.careerTime {
    font-size: max(1.3vw, 12px);
}

.careerTxt {
    font-size: max(1.3vw, 13px);
    letter-spacing: 0.64px;
    margin-top: 2.2vw;
    line-height: 1.5;
}


/* strengths */
.Strengths {
    margin-top: 6.9vw;
}

.strengthsTitle img {
    width: 22.8vw;
}

.strengthsItem {
    padding: 4.2vw 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--primary-black);
    align-items: flex-start;
}

.strengthsItemTitle {
    display: flex;
    column-gap: 2.8vw;
    align-items: center;
}

.strengthsItemTitle p:first-of-type {
    font-size: max(1.4vw, 10px);
    line-height: 1.8;
}

.strengthsItemTitle p:last-of-type {
    font-size: max(1.4vw, 12px);
    width: fit-content;
    line-height: 1.8;
}
.strengthsTxt {
    width: 33.3vw;
    font-size: max(1.3vw, 13px);
    line-height: 1.8;
    letter-spacing: 0.64px;
}

/* interests */
.interests {
    margin-top: 6.9vw;
    display: flex;
    justify-content: space-between;
}

.interestsTitle img {
    width: 20.6vw;
}

.interestsList {
    width: 50.3vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* row-gap: 3.5vw; */
}

.interestsList img {
    width: 23.4vw;
}

.imgWrap {
    position: relative;
    overflow: hidden;
    margin: 4.2vw 0;
    box-shadow: 0px 0px 40px rgba(24, 24, 24, 0.4);
}

.interestsTxt {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(24, 24, 24, 0.9);
    /* background-color: rgba(248, 247, 247, 0.8); */
    /* transform: translateX(-100%); */
    transition: 1s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 8.3%;
    opacity: 0;
    gap: 1.4vw;
}
.interestsTxt p:first-of-type{
    color: var(--primary-white);
    width: 100%;
    font-size: clamp(12px, 3.5vw, 28px);
}

.interestsTxt p:last-of-type {
    color: var(--primary-white);
    font-size: clamp(8px, 2.6vw, 18px);
    line-height: 1.5;
    letter-spacing: 0.88px;
    margin-top: 6px;
}

.interestsTxt.slide {
    opacity: 1;
    transition: 1s;
}



/* スマホの値 */
/* ===============================================================
767px以下
================================================================ */

@media screen and (max-width:767px) {
    .aboutTop {
        background-position: 64% 52%;
        padding: 40vw 0 16vw;
    }

    .otherTitle {
        letter-spacing: -1.12px;
    }
    .otherTitle span:nth-of-type(4),
    .otherTitle span:nth-of-type(5) {
        letter-spacing: 1.68px;
    }
    .otherTitle span:nth-of-type(6),
    .otherTitle span:nth-of-type(7) {
        letter-spacing: -0.56px;
    }
    
    .sectionTitleAbout img {
        width: 44vw;
    }
        
    .topImg {
        display: none;
    }
    .topImgSp {
        display: block;
        width: 100vw;
        margin-top: 10.7vw;
    }


/* =========================================================
 about explanation  
 ===========================================================*/
    .explanation {
        flex-direction: column;
        row-gap: 10.7vw;
        padding-left: 8.5vw;
        padding-right: 8.5vw;
    }
    .explanation img {
        width: 100%;
    }
    .explanationTXT {
        padding: 0;
    }
    .nameEn {
        font-size: 2.9vw;
    }
    .nameJp {
        font-size: 5.9vw;
        margin-top: 0.5vw;
    }
    .explanationMain {
        margin-top: 4.3vw;
        padding: 4.3vw 0;
        font-size: 3.5vw;
    }

    .sectionContents {
        padding-left: 8.5vw;
        padding-right: 8.5vw;
    }
    .contentsItem {
        flex-direction: column;
        margin-top: 5.3vw;
    }
    .careerTitle img {
        width: 22.7vw;
    }
    .careerList {
        padding-top: 0;
        margin-right: 0;
        width: 100%;
    }
    .careerItem {
        padding: 10.7vw 0;
    }
    .careerTime {
        font-size: 3.5vw;
    }
    .careerTxt {
        font-size: 3.5vw;
        margin-top: 6.4vw;
    }
    .careerTitle,
    .strengthsTitle,
    .interestsTitle {
    position: static;
    }
    .contentsItem:nth-of-type(2),
    .contentsItem:nth-of-type(3) {
        margin-top: 16vw;
    }
    .strengthsTitle img{
        width: 33.3vw;
    }
    .strengthsList {
        padding-top: 0;
        margin-right: 0;
        width: 100%;
    }
    .strengthsItem {
        flex-direction: column;
        padding: 10.7vw 0;
        row-gap: 6.4vw;
    }
    .strengthsItemTitle p:first-of-type,
    .strengthsItemTitle p:last-of-type {
        font-size: min(4.3vw, 24px);
    }
    .strengthsTxt {
        width: 100%;
        font-size: min(3.5vw, 20px);
        line-height: 1.5;
    }

    /* =========================================================
 about interests  
 ===========================================================*/
    .interestsTitle img {
        width: 31.7vw;
    }
    .interestsList {
        width: 100%;
        margin-right: 0;
        padding-top: 10.7vw;
    }
    .interestsList img {
        width: 38.4vw;
    }
    .imgWrap {
        box-shadow: 0px 0px 20px rgba(24, 24, 24, 0.3nん);
    }
}