@charset "UTF-8";

/* =================
main
==================== */
.article__header{
    position: relative;
    overflow: hidden;
}

.header__nav{
    width: 30px;
    position: fixed;
    top: 42px;
    right: 35px;
    z-index: 101;
}

.fv__about{
    min-width: 576px;
    width: 100%;
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
}

.fv__about--sp{
    display: block;
}

.fv__about--pc{
    display: none;
}

.fv__imgpc{
    display: none;
}

.fv__imgsp{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.separator--FV{
    width: 100%;
    position: absolute;
    bottom: 0;
    max-height: 50px;
}

.fv__list{
    display: none;
}

/* main pc */
@media screen and (min-width:650px) {
    .fv__imgpc{
        width: 100%;
        height: 100vh;
        object-fit: cover;
        display: block;
        margin: 0 auto;
    }

    .fv__imgsp{
        display: none;
    }
}
/* pc 650px */

@media screen and (min-width:1025px) {
    .fv__about{
        position: absolute;
        transform: none;
        left: 90px;
        bottom: 0;
    }

    .fv__about--sp{
        display: none;
    }

    .fv__about--pc{
        display: block;
        width: auto;
        height: 100vh;
    }

    .fv__list{
        display: block;
        position: absolute;
        top: 71px;
        right: 90px;
        z-index: 101;
    }

    .fv__item{
        color: #7C672D;
        text-align: left;
        font-family: "optima";
        font-size: 2rem;
        font-weight: 700;
        margin-top: 15px;
        display: flex;
        align-items: center;
    }

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

    .fv__item::before{
        content: "";
        display: inline-block;
        width: 30px;
        height: 2px;
        background-color: #7C672D;
        margin-right: 20px;
    }
}

@media screen and (min-width:1025px) {
    .article__header{
        animation-name: blur;
        animation-duration: 1.3s;
        animation-fill-mode:forwards;
        animation-iteration-count: 1;
    }

    @keyframes blur{
        from {
            filter: blur(7px);
        }

        to {
            filter: blur(0);
        }
    }
}

@media screen and (min-width:1160px) {
    .fv__about{
        top: 0;
    }

    .fv__about--pc{
        display: block;
        width: auto;
        height: 75vw;
        max-height: 1025px;
    }

    .fv__imgpc{
        width: 100%;
        height: 800px;
        object-fit: cover;
        display: block;
        margin: 0 auto;
    }

    .fv__imgsp{
        display: none;
    }

    .separator--FV{
        max-height: 110px;
    }
}
/* pc 1160px */

/* =================
career
==================== */
.section--career{
    background-color: var(--backgroundB,#fff2ba);
    padding: 75px 9.8%;
}

.selfimg__group{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.1vw;
}

.selfimg__group img{
    aspect-ratio: 7 / 5;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 3px 3px 3px 0 #A09564;
    flex: 1;
}

.selfimg__main{
    width: 100%;
    object-fit: cover;
    margin: 2.1vw auto 0;
    border-radius: 4px;
    box-shadow: 3px 3px 3px 0 #A09564;
}

.selftopic{
    color: var(--green,#228966);
    font-family: "optima";
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
}

.furigana{
    font-size: 1.2rem;
    text-align: center;
}

.selfname{
    margin-top: 20px;
}

.sec__title{
    color: var(--green,#228966);
    text-align: center;
    font-family: "optima";
}

.sec__title--career{
    /* transform: rotate(1.2deg); */
    margin-top: 45px;
    font-size: 5.4rem;
    line-height: 0.9; /* 72px */
}

.career__list{
    margin-top: 25px;
}

.career__item{
    margin-top: 10px;
}

.career__firstitem{
    margin-top: 25px;
}

.career__item::before{
    content: "";
    display: block;
    width: 2px;
    height: 30px;
    background-color: var(--green,#228966);
    margin: 0 auto 10px;
}

.career__item:first-of-type{
    margin: 0;
}

.career__flower{
    width: 75px;
    display: block;
    margin: 0 auto;
}

.career__topic{
    font-size: 1.8rem;
    margin-top: 20px;
    text-align: center;
}

.txt__career--F{
    text-align: center;
}

.txt__career{
    margin-top: 10px;
}

.career__txtcont{
    max-width: 80vw;
}

.br__sp--career2{
    display: block;
}

/* career pc */
@media screen and (min-width:500px) {
    .selfimg{
        max-width: 70vw;
        margin: 0 auto;
    }
}

@media screen and (min-width: 600px) {
    .section--career{
        padding: 70px 9.7%;
    }

    .furigana{
        margin-top: 3px;
    }

    .selfname{
        margin-top: 15px;
    }

    .sec__title--career{
        margin-top: 0px;
    }

    .career__list{
        margin: 66px auto 0;
        max-width: 1160px;
        padding: 0 4.8vw;
    }

    .career__item,
    .career__firstitem{
        margin-top: 45px;
        display: flex;
        justify-content: left;
        align-items: center;
        max-width: 1001px;
        position: relative;
    }

    .career__item::before{
        margin: 0;
        position: absolute;
        left: 35px;
        right: 0;
        bottom: 0;
        top: -38px;
        height: 30px;
        width: 3px;
    }

    .career__flower{
        margin: 0;
        min-width: 75px;
    }

    .career__topic{
        margin-top: 0;
        text-align: left;
    }

    .career__txtcont{
        margin-left: 36px;
        max-width: 865px;
    }

    .career__firstcont{
        margin: 45px auto 0;
        max-width: 1160px;
        padding: 0 4.8vw;
    }

    .sec__title--career{
        line-height: 1;
    }

    .txt__career--F{
        text-align: left;
    }
}
/* pc 600px */

@media screen and (min-width:768px) {
    .br__sp--career6{
        display: block;
    }
}

@media screen and (min-width:800px) {
    .selfimg__group{
        display: block;
    }

    .selfimg__main{
        width: 42vw;
        max-width: 600px;
        margin: 0 20px 0 0;
        height: 400px;
    }

    .selfimg__group img{
        margin-top: 20px;
        display: block;
        width: 15.5vw;
        max-width: 270px;
        height: 190px;
    }

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

    .selfimg{
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: center;
        max-width: 1160px;
        margin: 0 auto;
    }

    .br__sp--career2{
        display: none;
    }
}
/* pc 800px */

@media screen and (min-width:1025px) {
    .sec__title--career{
        font-size: 6.4rem;
    }

    .career__topic{
        font-size: 1.8rem;
    }

    .selftopic{
        font-size: 2.8rem;
    }

    .furigana{
        font-size: 1.3rem;
    }

    .career__firstcont{
        margin: 65px auto 0;
    }

    .career__item,
    .career__firstitem{
        margin-top: 65px;
    }

    .section--career{
        padding: 100px 9.7%;
    }

    .sec__title--career{
        font-size: 7rem;
    }
}

@media screen and (min-width: 1231px) {
    .career__firstcont{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row-reverse;
    }

    .career__firstitem{
        margin-top: 0;
    }

    .br__sp--career6{
        display: none;
    }

}
/* pc 1231px */

/* =================
skill
==================== */
.section--skill{
    background-color: var(--backgroundY,#FFF2BA);
    position: relative;
    padding: 50px 9.8% 65px;
}

.separator--skill{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 50px;
}

.sec__title--skill{
    /* transform: rotate(-1.8deg); */
    font-size: 5.4rem;
    line-height: 1;
}

.skill__list{
    margin-top: 30px;
}

.skill__item{
    padding: 35px 5.6%;
    border-radius: 12px;
    background-color: rgba(253, 253, 253, 0.30);
    margin-top: 30px;
}

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

.skill__topic{
    color: var(--pink,#F7845E);
    font-family: "optima";
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
}

.abimg__skill{
    margin: 0 auto ;
    display: block;
}

.txt__skill{
    margin-top: 10px;
    padding: 0 7px;
}

.button-container--pc{
    display: none;
}

.br__sp--skill{
    display: block;
}

/* skill pc */
@media screen and (min-width:345px) {
    .br__sp--skill{
        display: none;
    }
}

@media screen and (min-width:600px) {
    .section--skill{
        padding: 50px 9.7% 65px;
    }
}
/* pc 600px */

@media screen and (min-width:700px){
    .abimg__skill{
        max-width: 500px;
    }
}

@media screen and (min-width:768px) {
    .sec__title--skill{
        margin-top: 15px;
    }
}

@media screen and (min-width:1025px) {
    .abimg__skill{
        max-width: 400px;
    }

    .sec__title--skill{
        margin-top: 35px;
        font-size: 6.4rem;
    }
}

@media screen and (min-width:1160px) {
    .skill__list{
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 0 70px;
        background-color: rgba(253, 253, 253, 0.30);
        border-radius: 12px;
        padding: 35px 2.7% 0px ;
        max-width: 1160px;
        margin: 30px auto 0;
    }

    .skill__item{
        margin-top: 0;
        background-color: transparent;
        padding: 0;
        border-radius: 0;
    }

    .abimg__skill{
        width: 34.7vw;
    }

    .txt__skill{
        padding: 0 10px;
        width: 31vw;
        margin: 0 auto;
        max-width: 480px;
    }
    
    .separator--skill{
        max-height: 110px;
    }
}
/* pc 1160px */

/* =================
popup__skill
==================== */
.button-container{
    margin-top: 40px;
}

.button-sample1,
.button-sample2,
.button-sample3,
.button-sample4,
.button-sample5,
.button-sample6{
    font-weight: 500;
    font-size: 1.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.button-sample1 img,
.button-sample2 img,
.button-sample3 img,
.button-sample4 img,
.button-sample5 img,
.button-sample6 img{
    width: 36px;
}

.popup-background{
    /*position size*/
    position: fixed;
    z-index : 100;
    top : 0;
    left : 0;
    height : 100vh;
    width : 100vw;

    /*design*/
    background-color: gray;
    opacity : 0.25
}

.popup{
    /*position size*/
    --height : 80vh;
    --width : 80vw;
    z-index : 101;
    position: fixed;
    top : calc(50vh - calc(var(--height) / 2));
    left : calc(50vw - calc(var(--width) / 2));
    height : var(--height);
    width : var(--width);

    /*design*/
    overflow-y: scroll;
    background-color: #FFF6CF;
    border-radius: 12px;
    box-shadow: 0px 0px 3px 1px gray;
}

.close-button{
    /*position size*/
    --size : 30px;
    position:absolute;
    top : calc(var(--size)/4);
    left : calc(var(--width) - var(--size) * 5/4);/*css variables are available in children*/
    height : var(--size);
    width : var(--size);

    /*design*/
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color : gray;
    font-size: var(--size);
    border-radius: calc(var(--size)/5);
}

.content{
    padding: 8% 8%;
    text-align: left;
}

.skpopup__list{
    margin-top: 30px;
}

.skpopup__item{
    position: relative;
    padding: 35px 0;
}

.skpopup__item:first-of-type{
    padding: 0 0 35px;
}

.skpopup__item:last-of-type{
    padding: 35px 0 0;
}

.skpopup__item::before{
    content: "";
    background-image: linear-gradient(to right, #228966, #228966 4px, transparent 4px, transparent 8px);
    background-size: 8px 2px;
    background-repeat: repeat-x;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.skpopup__item:first-of-type:before{
    display: none;
}

.skpopup__topic{
    color: var(--green,#228966);
    font-family: "optima";
    font-size: 2.6rem;
    font-weight: 700;
}

.txt__skill--popup{
    margin-top: 10px;
}

.skpopup__topic--C{
    font-size: 2.3rem;
}

/*hide popup*/
.popup-flag{
    display:none;
}
.popup-flag:not(:checked) + .popup-background{
    display:none;
}
.popup-flag:not(:checked) + * + .popup{
    display:none;
}

/* popup__skill pc */
@media screen and (min-width: 600px) {
    .skpopup__topic{
        font-size: 2.8rem;
    }

    .skpopup__topic--C{
        font-size: 2.5rem;
    }
}

@media screen and (min-width:1025px) {
    .button-sample1,
    .button-sample2,
    .button-sample3,
    .button-sample4,
    .button-sample5,
    .button-sample6{
        font-size: 1.8rem;
    }
}

@media screen and (min-width: 1160px) {
    .popup{
        top: 50%;
        transform: translateY(-50%);
    }

    .popup--skpc{
        max-height: 750px;
    }

    .button-container{
        display: none;
        margin: 0 auto 0;
    }

    .button-container--pc{
        display: block;
        padding: 40px 0 40px;
        background-color: rgba(253, 253, 253, 0.30);
        max-width: 1160px;
    }

    .popup__pccont{
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 60px 9.8% 50px;
        gap: 0 110px;
        margin: 0 auto 30px;
        max-width: 1440px;
    }

    .popup__pcitem{
        max-width: 487px;
        width: 33.8vw;
    }

    .popup__pcitemD{
        position: relative;
    }

    .popup__pcitemD::after{
        content: "";
        background-image: linear-gradient(to bottom, #228966, #228966 4px, transparent 4px, transparent 8px);
        background-size: 3px 8px;
        background-position: right top;
        background-repeat: repeat-y;
        position: absolute;
        top: 15px;
        bottom: 0;
        left: 0;
        right: -55px;
    }

    .skpopup__item::before{
        display: none;
    }

    .skpopup__item{
        padding: 0;
        margin-top: 55px;
    }

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

    .skpopup__item:last-of-type{
        padding: 0;
    }
}
/* pc 1160px */

/* =================
strengths
==================== */
.section--strengths{
    background-color: var(--backgroundB,#FFFAE4);
    position: relative;
    padding: 70px 9.3% 55px;
}

.separator--strengths{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 50px;
}

.sec__title--strengths{
    font-size: 5.3rem;
    line-height: 0.9; /* 63px */
    /* transform: rotate(3.6deg); */
    position: relative;
    padding-bottom: 30px;
    width: fit-content;
    margin: 0 auto;
}

.sec__title--strengths::after{
    content: "";
    display: inline-block;
    background-image: linear-gradient(to right, #228966, #228966 18px, transparent 18px, transparent 36px);
    background-size: 36px 2px;
    background-repeat: repeat-x;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 2px;
    width: 100%;
}

.strengths__list{
    margin-top: 70px;
}

.num{
    color: var(--green,#228966);
    text-align: center;
    font-family: "optima";
    font-size: 4rem;
    line-height: 1; /* 48px */
}

.abimg__strengths{
    display: block;
    margin: 5px auto 0;
    width: 65vw;
    max-width: 300px;
}

.strengths__cont{
    margin: 5px auto 0; 
    max-width: 650px;
}

.st__subtopic{
    font-size: 1.4rem;
    text-align: center;
    font-weight: 500;
}

.st__topic{
    color: var(--green,#228966);
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    margin-top: 5px;
}

.txt__strengths{
    margin-top: 12px;
}

.strengths__item{
    margin-top: 70px;
    padding-bottom: 55px;
    position: relative;
}

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

.strengths__item:last-of-type{
    padding-bottom: 0px;
}

.strengths__item::after{
    content: "";
    display: inline-block;
    background-image: linear-gradient(to right, #228966, #228966 18px, transparent 18px, transparent 36px);
    background-size: 36px 2px;
    background-repeat: repeat-x;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 2px;
    width: 100%;
}

.strengths__item:last-of-type::after{
    display: none;
}

.st__flowerG,
.st__flowerB{
    display: none;
}

.br__sp--fun{
    display: block;
}

.br__sp--hearing{
    display: block;
}

/* strengths pc */
@media screen and (min-width:345px) {
    .br__sp--fun{
        display: none;
    }
}

@media screen and (min-width:357px) {
    .br__sp--hearing{
        display: none;
    }
}

@media screen and (min-width: 600px) {
    .section--strengths{
        padding: 50px 9.7% 65px;
    }

    .sec__title--strengths{
        margin-top: 15px;
    }

    .num{
        font-size: 4rem;
    }
}

@media screen and (min-width:950px) {
    .stitem__cont{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
    }

    .strengths__cont{
        max-width: 473px;
        width: 32.8vw;
    }

    .num{
        margin-left: 25px;
    }

    .st__topic{
        text-align: left;
    }

    .st__topic--stpopup{
        text-align: center;
    }

    .st__subtopic{
        text-align: left;
    }

    .strengths__list{
        margin-top: 40px;
    }
}

@media screen and (min-width: 1025px) {
    .sec__title--strengths{
        font-size: 6rem;
    }

    .strengths__list{
        margin: 70px auto 0;
        max-width: 1160px;
    }

    .strengths__item{
        margin-top: 70px;
        padding-bottom: 70px;
    }

    .st__subtopic{
        font-size: 1.6rem;
    }

    .num{
        margin-right: 4.5vw;
    }

    .button-container--strengths{
        display: block;
    }

    .st__topic{
        font-size: 3rem;
        margin-top: 10px;
    }

    .sec__title--strengths{
        font-size: 6.5rem;
        padding-bottom: 45px;
        margin-top: 35px;
    }

    .txt__strengths{
        margin-top: 12px;
    }
}

@media screen and (min-width: 1160px) {
    .popup{
        top: 50%;
        transform: translateY(-50%);
    }

    .popup--hearing{
        max-height: 630px;
    }

    .popup--key{
        max-height: 570px;
    }

    .popup--fun{
        max-height: 645px;
    }

    .separator--strengths{
        max-height: 110px;
    }

    .st__flowerG,
    .st__flowerB{
        display: block;
    }

    .st__flowerG{
        width: 9vw;
        max-width: 90px;
    }

    .st__flowerB{
        width: 9.5vw;
        max-width: 95px;
    }

    .strengths__title{
        display: flex;
        justify-content: center;
        align-items: end;
        gap: 0 8.3vw;
        max-width: 1160px;
        margin: 0 auto;
    }

    .sec__title--strengths{
        margin: 35px 0 0;
    }
}
/* pc 1160px */

@media screen and (min-width:1440px) {
    .br__pc--hearing,
    .br__pc--key,
    .br__pc--fun{
        display: block;
    }
}

@media screen and (min-width: 1527px) {
    .br__pc--hearing,
    .br__pc--key{
        display: none;
    }
}

@media screen and (min-width: 1531px){
    .br__pc--fun{
        display: none;
    }
}

/* =================
popup__strengths
==================== */
.button-container--strengths{
    margin-top: 50px;
}

.abimg__stpopup{
    display: block;
    margin: 0 auto;
    width: 65vw;
    max-width: 515px;
}

.st__topic--stpopup{
    margin-top: 35px;
}

.txt__strengths--popup{
    margin-top: 25px;
}

/* popup__strengths pc */
@media screen and (min-width: 1025px) {
    .st__topic--stpopup{
        text-align: center;
    }
}

@media screen and (min-width: 1440px) {
    .content{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0 4.8vw;
        padding: 5% 8%;
        max-width: 1440px;
        margin: 0 auto;
    }

    .sttxt__cont{
        max-width: 550px;
        width: 38.1vw;
    }

    .st__topic--stpopup{
        margin-top: 0;
    }
}

/* =================
footer
==================== */
.footer__flowerR{
    display: none;
}

.footer__flowerO{
    width: 100px;
    display: block;
    margin: 0 auto;
}

/* footer pc */
@media screen and (min-width: 1025px) {
    .footer__flowerR{
        display: block;
        width: 8.3vw;
        max-width: 95px;
    }

    .footer__flowerO{
        width: 9.5vw;
        max-width: 100px;
        margin: 0;
    }
}
/* pc 1025px */

/* =================
btn
==================== */
@media screen and (min-width:1025px) {
    .button-hover:hover{
        transform: scale(0.9);
        transition: 0.3s all ease;
    }
}