@charset "utf-8";

:root {
    --primary-white: #FFFFFF;
    --primary-green: #8faca5;
    --primary-black: #000000;
    --primary-gray: #C0C0C0;
    --primary-white: #FFFFFF;
    --contentWidth: 89.3%;
    --contentPadding: 76px 5.3%;
}

/*====================
member
=====================*/

.section--member {
    padding: 0 5.3% 0;
}

.section__box--member {
    padding: 62px 5% 20px;
}

.member__mainTxt {
    text-align: right;
    line-height: 1.2;
    margin-top: 40px;
}

.member__mainTxt p {
    margin-top: 14px;
}

.txt__prof {
    display: none;
}

.member__mainTxt :last-of-type {
    text-decoration-line: none;
}

.member__mainTxt .btn__more--member {
    display: none;
}

.member__nav {
    margin-top: 11px;
    display: flex;
    gap: 0 10px;
    justify-content: center;
}

.member__nav a {
    transition: transform 0.3s ease;
}

.member__nav a:hover {
    transform: scale(1.1);
}

.member__logo {
    width: 52px;
    height: auto;
}

.member__logo--yo {
    border-radius: 150px;
    border: 1px solid #000;
}

.introduction__content {
    margin-top: 60px;
}

.introductionBox {
    padding: 0 0.5%;
    margin: 48px auto 48px auto;
}

.introduction__header {
    width: 100%;
    height: auto;
    text-align: center;
}

.introduction__header h3 {
    font-family: "Zen Kaku Gothic Antique";
    font-size: 2rem;
    font-weight: 900;
    line-height: normal;
}

.introduction__header .nago {
    font-size: 2.6rem;
    letter-spacing: 1px;
}

.introduction__header .hana {
    font-size: 2.3rem;
    letter-spacing: 2px;
}

.yo {
    font-size: 2.7rem;
}

.introduction__header p {
    display: inline-block;
    color: #5D5D5D;
    font-size: 1.2rem;
    line-height: 1.6;
    letter-spacing: -0.36px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: 10%;
    /* 3px */
    text-underline-position: from-font;
    margin: 3px;
}

.introduction__contentBox {
    width: 100%;
    height: auto;
    display: flex;
    gap: 0 7px;
    margin: 8px auto 0;
    align-items: center;
}

.introduction__logo {
    width: 135px;
    height: auto;
}

.imgAiconBox div {
    width: 100%;
    height: 20px;
}

.snsIconBox {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 5px;
}

.snsIconBox img {
    width: 20px;
    height: auto;
    vertical-align: middle;
}

.snsIcon--mail img {
    width: 23px;
}

.snsIcon--x img {
    width: 14px;
}

.snsIcon--line {
    width: 30px;
    height: auto;
}

.snsIcon--line img {
    width: 100%;
    height: auto;
}

.introduction__contentBox p {
    /* display: flex; */
    width: fit-content;
    height: fit-content;
    text-align: center;
    vertical-align: middle;
    font-size: 1.3rem;
    line-height: 20px;
    margin-top: 15px;
}

.pcBio {
    display: none;
}

.question__box {
    margin-top: 13px;
    padding: 10px 15px 16px;
    border-radius: 10px;
    border: 1px dashed var(--member_flame_dash, #C0C0C0);
}

.q__content {
    margin-top: 15px;
}

.q__content:first-of-type {
    margin-top: 0px;
}

.q__title {
    text-align: center;
    font-family: "Zen Kaku Gothic Antique";
    font-size: 1.6rem;
}

.q__answer {
    /* width: 246px; */
    margin-top: 8.5px;
    font-size: 1.4rem;
}

.introduction__logo--ff {
    width: 120px;
    height: auto;
}

.pcBr {
    display: none;
}


.introduction__logo--87 {
    width: 120px;
    height: auto;
}

.introduction__logo--yo {
    border-radius: 150px;
    border: 1px solid #000;
    width: 120px;
    height: auto;
}

/* animation */

.snsIcon {
    transition: transform 0.3s ease;
}

.snsIcon:hover {
    color: #C0C0C0;
    transform: scale(1.1);
}

@media screen and (min-width:769px) {

    :root {
        --contentPadding: 0px 10%;
    }

    .nav__list {
        display: flex;
        height: 100px;
        gap: 56px;
        padding: 32px 10%;
        margin: 0;
        align-items: center;
    }

    .section--member {
        padding: var(--contentPadding)
    }

    .section__box--member {
        padding: 120px 7.5% 153px;
    }

    .member__nav {
        display: none;
    }

    .member__mainTxt p:first-of-type {
        display: none;
    }

    .member__mainTxt .txt__prof {
        display: block;
        width: 55%;
        margin: 0 0 0 auto ;
        text-align: right;
        font-family: "Noto Serif JP";
        font-size: 3.5rem;
        font-weight: 300;
        line-height: 1;
        letter-spacing: -8px;
        border-bottom: #000 solid 1.8px;

    }

    .member__logo {
        width: 250px;
        height: 250px;
    }

    .member__logo--ff {
        position: absolute;
        width: 220px;
        height: auto;
        top: 80px;
        left: 15px;
    }

    .member__logo--yo {
        position: absolute;
        width: 215px;
        height: auto;
        border-radius: 150px;
        border: 1px solid #000;
        top: -10px;
        left: 300px;
    }

    .member__logo--87 {
        position: absolute;
        width: 240px;
        height: auto;
        top: 160px;
        left: -290px;
    }

    .member__logo--nago {
        position: absolute;
        width: 240px;
        height: auto;
        top: 270px;
        left: 230px;
    }

    .member__logo--ai {
        position: absolute;
        top: 380px;
        left: -80px;
    }

    .member__mainTxt {
        margin-top: 150px;
    }

    .member__mainTxt p {
        margin-top: 39px;
        font-size: 2.8rem;
        line-height: 1.5;
    }

    .member__mainTxt :nth-of-type(2) {
        margin-top: 0;
    }

    .btn__more--member {
        height: 50px;
        width: auto;
        margin: 0;
        position: absolute;
        top: -203px;
        right: 0;
    }

    .introduction__box {
        margin-top: 81px;
    }

    .introduction__content {
        margin-top: 90px;
    }

    .introduction__content:first-of-type {
        margin-top: 0;
    }

    .introduction__header h3 {
        font-size: 4.2rem;
        font-weight: 500;
    }

    .introduction__header .nago {
        font-size: 4.9rem;
        letter-spacing: 2px;
    }

    .introduction__header .hana {
        font-size: 4.6rem;
        letter-spacing: 4px;
    }

    .yo {
        font-size: 5rem;
    }

    .introductionBox .spBio {
        display: none;
    }

    .introduction__txts .pcBio {
        display: block;
        font-size: 2.2rem;
        /* margin: 0 0 0 auto; */
        /* color: #5D5D5D; */
        line-height: 1.3;
        letter-spacing: none;
        text-decoration-line: underline;
        text-decoration-color: #5D5D5D;
        text-decoration-style: solid;
        text-decoration-skip-ink: auto;
        text-decoration-thickness: auto;
        text-underline-offset: 10%;
        margin-top: 0;
    }

    .introduction__contentBox {
        display: flex;
        gap: 0 38px ;
        margin : 40px auto 0 auto ;
        justify-content: center;
        align-items: center;
    }

    .introduction__contentBox--ff {
        margin-top: 15px;
    }

    /* .introduction__contentBox--ff .introduction__txts p {
        margin-top: 65px;
    } */

    .pcBr {
        display: block;
    }
 
    .introduction__logo {
        width: 280px;
    }

    /*  icon  */
    .snsIcon--mail img{
       width: 50px;
    }
    .snsIcon img{
        width: 43px;
    }
    .snsIcon--x img{
       width: 30px;
    }
    .snsIcon--line img{
       width: 60px;
    }

    .snsIconBox {
        margin-top: 20px;
    }
    
    .introduction__contentBox p {
        font-size: 2rem;
        width: fit-content;
        text-align: left;
        line-height: 1.5;
        margin-top: 20px;
    }

    .introduction__txts {
        width: 50%;
        height: auto;
    }

    .question__box {
        margin-top : 30px;
        padding: 10px 60px 20px 60px ;
    }

    .q__content {
        margin-top: 25px;
    }

    .q__title {
        font-size: 2.4rem;
    }

    .q__answer {
        /* width: 246px; */
        text-align: center;
        margin-top: 12px;
        font-size: 1.8rem;
    }


}

/* pc 769px */