@charset "utf-8";

/* 色の変数　　color: var(--blue); */
:root {
    --white: #fff;
    --white02: rgba(255, 255, 255, 0.5);
    --black: #0a0d0d;
    --black02: rgba(0, 0, 0, 0.5);
    --blue01: #b2e2ff;
    --blue02: #0a9be6;
    --blue03: #def1ff;
    --blue04: rgba(10, 155, 230, 0.5);
    --blue05: rgba(10, 155, 230, 0.8);
    --blue06: #cbeaff;
    --orange01: #ffa717;
    --yellow01: #ffda72;
    --beige01: #ffe6bd;
    --beige02: #fff0de;



    /* ぼかし */
    --blur: blur(10px);

    /* 書式 */
    --notoSerif: "Noto Serif JP", serif;
    --zenKaku: "Zen Kaku Gothic Antique", sans-serif;

    /* 文字サイズ */
    --font15: clamp(10px, calc(8.54px + 0.657vw), 15px);
    --font18: clamp(10px, calc(8.54px + 0.657vw), 18px);
    --font19: clamp(10px, calc(6.83px + 0.851vw), 19px);
    --font20: clamp(12.48px, calc(10.06px + 0.756vw), 20px);
    --font21: clamp(12.48px, calc(10.06px + 0.756vw), 21px);
    --font24: clamp(8.23px, calc(3.72px + 1.408vw), 24px);
    --font27: clamp(12px, calc(6.72px + 1.409vw), 27px);
    --font31: clamp(22.61px, calc(20.34px + 0.710vw), 31px);
    --font32: clamp(14.1px, calc(9.01px + 1.596vw), 32px);
    --font45: clamp(19.76px, calc(12.55px + 2.254vw), 45px);
    --font65: clamp(30px, calc(23.08px + 2.911vw), 65px);


    /* ウェイト */
    --weight500: 500;
    --weight700: 700;
    --weight900: 900;

    /* 行間 */
    --lineHight120: 1.2;
    --lineHight150: 1.5;
    --lineHight157: 1.57;
    --lineHight175: 1.75;
    --lineHight200: 2.0;

    /* 文字間 */
    --fontSpace050: 0.05em;
    --fontSpace070: 0.07em;
    --fontSpace140: 0.14em;


    /* トランジションの変数　 */
    --transitionBase01: all 0.3s ease-in-out;
    --transitionBase02: all 0.5s ease-in-out;

    /* 角丸の変数　 */
    --borderRadius01: 500px;
    --borderRadius05: 5px;
    --borderRadius10: 10px;
    --borderRadius20: 20px;
    --borderRadiusCircle: 50%;

    --opacity07: .7;

}


@media screen and (max-width: 768px) {
    :root {
        --opacity07: 1;
    }


}

@media screen and (max-width: 480px) {
    :root {
        --borderRadius20: 10px;
        --borderRadius30: 15px;
    }
}



/*******************************************
common
*******************************************/

body {
    color: var(--black);
    font-family: var(--notoSerif);
    font-weight: var(--weight500);
    font-size: var(--font18);
    line-height: var(--lineHight120);

    a {
        transition: var(--transitionBase01);

        &:hover {
            opacity: var(--opacity07);
        }
    }
}

p {
    font-family: var(--zenKaku);
    text-align: justify;
}

.section {
    position: relative;
}



.section__inner {
    position: relative;
    width: min(100%, 1200px);
    margin: 0 auto;
    padding: clamp(50px, 8%, 115px) 0 clamp(40px, 8.5%, 120px);
}

.section__ttl,
.headerNav__item:not(:last-child) a {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    font-size: 15px;
    font-weight: var(--weight900);


    .ja {
        letter-spacing: var(--fontSpace070);
    }

    .small {
        font-size: 0.6em;
    }
}

.section__ttl {
    position: relative;
    font-size: var(--font32);
    align-items: center;
    text-align: center;

    .en {
        position: relative;
        font-size: 3.281em;
        color: var(--blue01);
        -webkit-text-stroke: 2px var(--white);
        paint-order: stroke;
    }

    .ja {
        margin-top: 0.5em;
        letter-spacing: var(--fontSpace070);
    }
}



.benefits,
.company {
    .section__ttl {
        .en {
            -webkit-text-stroke: 2px var(--blue02);
            color: var(--white);
        }
    }
}

.section__subTxt {
    text-align: center;
    font-size: var(--font21);
    letter-spacing: var(--fontSpace050);
    line-height: 1.714;
    margin-top: max(4%, 15px);
    font-weight: var(--weight700);
}

.section-container {
    position: relative;
    margin: max(6%, 35px) auto 0;
}

.parts01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 10%;
}

.parts02 {
    position: absolute;
    top: 0;
    right: 0;
    width: 10%;
}



.under-line01 {
    text-decoration: underline;
    text-decoration-thickness: 4px;
    text-underline-offset: 0.4em;
    text-decoration-color: var(--yellow01);
}

.thin {
    letter-spacing: -0.5em;
}

.push {
    display: inline-block;
}

.block365,
.block480,
.block768 {
    display: none;
}

.show {
    opacity: 1 !important;
    visibility: visible !important;
}

.list {
    li {
        position: relative;
        font-size: var(--font18);
        line-height: 1.83;
        letter-spacing: var(--fontSpace050);
        padding-left: 1em;

        &::before {
            position: absolute;
            content: "・";
            top: 0;
            left: 0;
            font-size: 1em;
        }
    }

}


@media screen and (max-width:1230px) {
    .section__inner {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}


@media screen and (max-width:1024px) {
    .push1024 {
        display: inline-block;
    }

    .none1024 {
        display: none;
    }

}

@media screen and (max-width:768px) {
    .push768 {
        display: inline-block;
    }

    .none768 {
        display: none;
    }

    .block768 {
        display: block;
    }
}

@media screen and (max-width:480px) {
    .push480 {
        display: inline-block;
    }

    .none480 {
        display: none;
    }

    .block480 {
        display: block;
    }

    .section__ttl {
        .en {
            font-size: 2.76em;
        }

        .ja {
            line-height: 1.4;
        }
    }
}



/*******************************************
btn
*******************************************/
.btn-outer {
    width: min(100%, 300px);
    height: 50px;
    margin: 0 auto;
}

.btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--black);
    letter-spacing: var(--fontSpace050);
    background-color: var(--white);
    font-size: var(--font15);
    width: 100%;
    height: 100%;
    border-radius: var(--borderRadius05);
    transition: var(--transitionBase01);
    cursor: pointer;
    text-align: center;
    padding: 0 2em;
    line-height: 1.3;

    &:hover {
        opacity: var(--opacity07);
    }

}


.btn-black {
    background-color: var(--black);
    color: var(--white);

    &::before {
        background-color: var(--white);
    }
}

.arrow {
    &::before {
        position: absolute;
        content: "";
        mask-image: url(../img/common/arrow.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        background-color: var(--black);
        width: min(1em, 15px);
        height: auto;
        aspect-ratio: 15/15.5;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
        z-index: 1;
    }
}








@media screen and (max-width:768px) {
    .btn-outer {
        height: 60px;
    }
}


@media screen and (max-width:480px) {
    .btn-outer {
        height: 50px;
    }
}


/*******************************************
追従ボタン
*******************************************/
.main__inner {
    position: relative;
}

.topReturn {
    position: fixed;
    bottom: 2%;
    right: 2%;
    width: 55px;
    aspect-ratio: 1;
    opacity: 0;
    visibility: hidden;
    z-index: 90;
    transition: var(--transitionBase01);


    a {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        border-radius: var(--borderRadiusCircle);
        background-color: var(--blue02);
        border: 2px solid var(--white);
        transition: var(--transitionBase01);

        &::before,
        &:after {
            position: absolute;
            content: "";
            top: 50%;
            left: 50%;
            width: 30%;
            height: 2px;
            background-color: var(--white);
            transition: var(--transitionBase01);
        }

        &::before {
            transform: translate(-83%, -50%) rotate(-45deg);
        }

        &::after {
            transform: translate(-17%, -50%) rotate(45deg);
        }

        &:hover {
            opacity: var(--opacity07);
        }
    }

}

@media screen and (max-width:1024px) {
    .topReturn {
        width: 40px;
    }
}


@media screen and (max-width:600px) {
    .topReturn {
        bottom: calc(70px + 2%);
    }
}

@media screen and (max-width:480px) {
    .topReturn {
        width: 30px;


        a {
            border: 1px solid var(--white);

            &::before,
            &::after {
                height: 1px;
            }
        }
    }
}








/*******************************************
header
*******************************************/
.header {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    aspect-ratio: 1440/95;
    transition: var(--transitionBase01);
    padding: 0 min(0.6944444444444444vw, 10px) 0 min(2.7777777777777777vw, 40px);
    z-index: 50;
    background-color: transparent;

}

.bg-white {
    background-color: var(--blue04);
    backdrop-filter: var(--blur);
}


.header__logo {
    width: min(10.625vw, 153px);
}

.headerNav {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 99;
    transition: var(--transitionBase02);
    background-color: var(--black02);
}

.headerNav__list {
    width: min(50%, 600px);
    height: 100%;
    background-color: var(--white);
    margin-left: auto;
    display: flex;
    flex-direction: column;
    padding: clamp(10px, 10vh, 200px) 20px 0;
    padding: clamp(10px, 10vh, 200px) clamp(50px, 10vh, 70px) 0;
    transition: var(--transitionBase01);
}

.headerNav__item {

    &:not(:last-child) {
        margin-bottom: clamp(20px, 4vh, 80px);

        &:nth-last-child(2) {
            margin-bottom: 0;
        }

        a {
            font-size: min(1.0416666666666665vw, 15px);

            .en {
                font-size: 2em;
                margin-bottom: 10px;
                transition: var(--transitionBase01);
            }

            &:hover {
                color: var(--blue02);
            }

            .small {
                font-size: 0.8em;
            }
        }

    }

    &:last-child {
        margin: clamp(20px, 6vh, 100px) 0 0 0;
    }
}

.btn-outer-nav {
    width: min(100%, 300px);
    margin: 0;

    .btn {
        font-size: var(--font27);
    }
}

.entryBtn-fixed {
    width: min(14.583333333333334vw, 210px);
    aspect-ratio: 210/50;
    margin-left: auto;


    .btn-outer {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .btn {
        font-size: min(1.46vw, 30px);
        font-weight: var(--weight900);
    }
}

.hamburger {
    position: relative;
    width: min(7.5vw, 108px);
    aspect-ratio: 108/60;
    background-color: var(--black);
    border-radius: 3px;
    cursor: pointer;
    transition: var(--transitionBase01);
    z-index: 100;
    margin-left: min(2.0833333333333vw, 30px);

    &:hover {
        opacity: var(--opacity07);
    }
}

.line {
    position: absolute;
    width: 50%;
    height: 2px;
    background-color: var(--white);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transitionBase01);

    &:nth-child(1) {
        top: 42%;
    }

    &:nth-child(2) {
        top: 58%;
    }
}

/* ハンバーガー開いた後 */
.header.active {
    .headerNav {
        opacity: 1;
        visibility: visible;
    }

    .headerNav__list {
        transform: translateX(0);
    }

    .line {
        &:nth-of-type(1) {
            top: 50%;
            transform: translate(-50%, -50%) rotate(30deg);
        }

        &:nth-of-type(2) {
            top: 50%;
            transform: translate(-50%, -50%) rotate(-30deg);
        }
    }


}



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

    .header {
        position: absolute;
        height: min(13.3vw, 66px);
        padding: 0 0 0 max(2.6vw, 13px);
    }

    .bg-white {
        background-color: transparent;
        backdrop-filter: initial;
    }


    .header__logo {
        width: min(22.9vw, 114.5px);
    }

    .hamburger {
        position: fixed;
        top: calc((min(13.3vw, 66px))/2);
        right: min(2.6vw, 10px);
        transform: translateY(-50%);
        width: min(13.3vw, 66.5px);
    }

    .entryBtn-fixed {
        position: fixed;
        width: 100%;
        bottom: 2%;
        left: 50%;
        transform: translateX(-50%);
        width: min(90.6vw, 455px);
        aspect-ratio: 340/47;
        min-height: 50px;
        max-height: 60px;
        opacity: 0;
        visibility: hidden;
        transition: var(--transitionBase01);

        .btn {
            font-size: min(4.8vw, 24px);
            border-radius: min(2.6vw, 10px);
        }
    }




    .headerNav__item {
        &:not(:last-child) {
            a {
                font-size: clamp(10px, 2.5vw, 15px);

                .en {
                    margin-bottom: 0.1em;
                    font-size: 1.5em;
                }

                &:hover {
                    color: var(--black);
                }
            }
        }
    }

    .btn-outer-nav {
        width: min(100%, 250px);
    }

}


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

    .headerNav__list {
        width: 80%;
        padding: clamp(10px, 5vh, 100px) clamp(10px, 5vh, 100px) 0;
    }

    .btn-outer-nav {
        width: min(100%, 200px);
        height: 40px;
    }

    .entryBtn-fixed {
        max-width: 300px;
    }

}




/*******************************************
member
*******************************************/

.member {
    .parts01 {
        width: 22.8%;
        transform: translate(-11%, 50%);
    }

    .parts02 {
        width: 15%;
        transform: translate(0%, 6%);
    }

    .section__inner {
        padding: clamp(40px, 8%, 90px) 0 clamp(40px, 8.5%, 120px);
    }
}

.memberSwiper-tab {
    width: 31em;
    margin: 0 auto;
    overflow: visible;
    font-size: var(--font24);
}

.memberSwiper-tab__list {

    .swiper-slide {
        position: relative;
        background-color: var(--blue02);
        font-size: var(--font24);
        height: 100%;
        cursor: pointer;
        transition: var(--transitionBase01);
        border-radius: var(--borderRadius10);
        padding: 0.8em 1em 1.041em;


        &:hover {
            opacity: var(--opacity07);
        }

        &::before {
            position: absolute;
            content: "";
            display: inline-block;
            width: 1.25em;
            aspect-ratio: 1;
            background: var(--blue02);
            clip-path: polygon(0 0, 100% 0%, 50% 100%);
            top: 100%;
            left: 50%;
            transform: translate(-50%, -5%);
            opacity: 0;
            transition: var(--transitionBase01);
        }
    }

    .swiper-slide-thumb-active {
        &::before {
            opacity: 1;
        }
    }



    .swiper-slide02 {
        background-color: var(--beige01);

        &::before {
            background-color: var(--beige01);
        }

        .memberSwiper-tab__item {

            .number,
            .small {
                color: var(--blue02);
            }

            .txtBox {
                &::before {
                    background-color: var(--black);
                }
            }


            .txt {
                color: var(--black);
            }
        }
    }
}

.memberSwiper-tab__item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    font-size: var(--font24);

    .number,
    .small {
        color: var(--orange01);
    }

    .number {
        font-size: 2.25em;
        line-height: 1;
        font-weight: var(--weight900);
        margin-right: 0.24em;
    }

    .txtBox {
        position: relative;
        flex: 1;
        padding-left: 0.833em;

        &::before {
            position: absolute;
            content: "";
            bottom: 0;
            left: 0;
            width: 1px;
            height: min(100%, 47px);
            background-color: var(--white);
        }
    }

    .small {
        font-size: 0.7em;
        font-weight: var(--weight900);
    }

    .txt {
        color: var(--white);
        font-weight: var(--weight700);
    }
}

.memberSwiper-cont {
    width: min(100%, 1049px);
    margin: 0 auto 0;
    padding-top: min(13%, 105px);
}

.memberSwiper-cont__list {
    .swiper-slide {
        position: relative;
        background-color: var(--blue03);
        border-top: 5px solid var(--blue02);
    }
}

.memberSwiper-cont__item {
    position: relative;
    width: 100%;
    height: 100%;
    padding: clamp(30px, 10%, 75px) clamp(10px, 7.3%, 45px);

    .number {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: min(4.5vw, 53px);
        width: 2.264em;
        aspect-ratio: 1;
        background-color: var(--blue02);
        color: var(--orange01);
        border-radius: var(--borderRadiusCircle);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;

        span {
            display: block;
            font-weight: var(--weight900);
            line-height: 1.2;
        }

        .small {
            font-size: 0.35em;
        }

        .txt {
            margin-top: -0.15em;
        }
    }
}

.memberSwiper__ttl {
    text-align: center;
    font-size: var(--font45);
    font-weight: var(--weight900);

    .ja {
        display: block;
        letter-spacing: var(--fontSpace070);
        margin-bottom: 0.25em;
    }

    .en {
        display: block;
        font-size: 0.51em;
        color: var(--blue02);
        letter-spacing: var(--fontSpace140);
    }
}

.memberSwiper__top {
    display: flex;
    justify-content: flex-start;
    margin: clamp(20px, 8.5%, 45px) auto;

    .img {
        width: min(45.31%, 435px);
    }
}

.memberDetail {
    flex: 1;
    margin-left: 50px;
    padding-top: 15px;
    font-family: var(--zenKaku);

    dt {
        position: relative;
        font-size: var(--font24);
        border-bottom: 3px solid var(--blue02);
        padding: 0 0 0.5em 1.25em;
        margin-bottom: 0.83em;

        &::before {
            background-color: var(--blue02);
            width: 0.833em;
            top: 0;
            right: auto;
            left: 0;
            transform: translateY(0.2em);
        }
    }

    dd {
        font-size: var(--font21);
    }
}

.memberDetail__list {
    li {
        position: relative;
        line-height: 1.714;
        padding-left: 1.428em;
        padding-right: 0.47em;

        &::before {
            position: absolute;
            content: "";
            mask-image: url(../img/common/icon01.svg);
            mask-repeat: no-repeat;
            mask-size: contain;
            background-color: var(--blue02);
            width: 1.095em;
            height: auto;
            aspect-ratio: 23/16.5;
            top: 0;
            left: 0;
            transform: translateY(0.5em);
            z-index: 1;
        }
    }
}

.memberSwiper__bottom {
    display: flex;
    justify-content: space-between;

}

.memberSwiperBox {
    width: calc((100% - 40px)/2);
    display: flex;
    flex-direction: column;

    .ttl {
        position: relative;
        font-size: var(--font20);
        width: 17.75em;
        padding: 0.3em 0.75em;
        background-color: var(--blue02);
        color: var(--white);
        font-weight: var(--weight700);
        border-radius: var(--borderRadius10) var(--borderRadius10) 0 0;
    }
}

.memberSwiperBox__main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: var(--white);
    padding: 20px 15px;
    border-top: 2px solid var(--blue02);

    .img {
        width: min(100%, 430px);
    }

    .txt {
        font-size: var(--font18);
        line-height: 1.83;
        letter-spacing: var(--fontSpace050);
    }
}

.memberSwiper-cont__list {
    .memberSwiper-cont-slide02 {
        border-top: 5px solid var(--orange01);
        background-color: var(--beige02);

        .memberSwiper-cont__item {
            .number {
                background-color: var(--orange01);
                color: var(--black);
            }

            .small {
                color: var(--white);
            }
        }

        .memberSwiper__ttl {
            .en {
                color: var(--orange01);
            }
        }

        .memberDetail {
            dt {
                border-bottom: 3px solid var(--orange01);

                &::before {
                    background-color: var(--orange01);
                }
            }
        }

        .memberDetail__list {
            li {
                &::before {
                    background-color: var(--orange01);
                }
            }
        }

        .memberSwiperBox {
            .ttl {
                background-color: var(--orange01);
            }
        }

        .memberSwiperBox__main {
            border-top: 2px solid var(--orange01);
        }
    }
}




@media screen and (max-width:768px) {
    /* .member {

        .section__inner {
            padding-bottom: 100px;
        }
    } */

    .memberSwiper-cont {
        width: min(100%, 600px);
    }

    .memberSwiper__ttl {
        .ja {
            font-size: 0.94em;
        }
    }

    .memberSwiper__top {
        display: flex;
        justify-content: flex-start;
        margin: clamp(20px, 8.5%, 30px) 0;
        flex-direction: column;
        align-items: center;

        .img {
            width: min(96.5%, 300px);
        }
    }

    .memberDetail {
        margin: clamp(15px, 7%, 30px) 0 0;
        padding-top: 0;

        dt {
            font-size: 15px;
            border-bottom: 1.25px solid var(--blue02);
            margin-bottom: 0.5em;
        }
    }

    .memberSwiper__bottom {
        width: min(100%, 400px);
        margin: 0 auto;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .memberSwiperBox {
        width: 100%;

        .ttl {
            border-radius: 5px 5px 0 0;
        }
    }

    .memberSwiperBox__main {
        padding: 15px 7px;
    }


}


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

    .member {
        .parts01 {
            width: 21%;
            transform: translate(-18%, 15%);
        }

        .parts02 {
            width: 13%;
            transform: translate(-1%, 63%);
        }
    }

    .memberSwiper-tab {
        width: 100%;
    }

    .memberSwiper-tab__list {
        justify-content: initial;

        .swiper-slide {
            width: auto;
            border-radius: 5px;
            padding: 0.7em 0.8em 0.8em;
        }
    }

    .memberSwiper-tab__item {
        font-size: 3.4vw;

        .number {
            font-size: 2.1em;
        }

        .txtBox {
            &::before {
                height: 90%;
            }
        }

        .small {
            font-size: 0.7em;
            font-weight: var(--weight900);
        }

    }

}

@media screen and (max-width:374px) {
    .member {

        .parts02 {
            width: 13%;
            transform: translate(4%, 109%);
        }
    }

    .memberSwiperBox {
        .ttl {
            width: 15em;
        }
    }
}

@media screen and (max-width:340px) {
    .memberSwiper-tab__item {

        .number {
            font-size: 1.8em;
        }

    }
}

/*******************************************
benefits
*******************************************/
.benefits {
    background-color: var(--blue03);

    .section__inner {
        padding-bottom: 0;
    }

    .section-container {
        width: min(100%, 1183px);
    }

    .parts01 {
        width: min(16.8%, 202px);
        transform: translate(10%, 26%);
    }

    .parts02 {
        width: min(16%, 150px);
        transform: translate(-21%, -103%);
        z-index: 1;
    }
}

.benefits__list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 15px;
}

.benefits__item {
    width: calc((100% - 45px)/4);
    display: flex;
    align-items: center;
    flex-direction: column;

    .arrow {
        position: relative;
        width: fit-content;
        font-weight: var(--weight700);
        text-align: center;
        font-size: var(--font21);
        letter-spacing: var(--fontSpace050);
        font-family: var(--zenKaku);
        margin-top: 0.4em;

        &::before {
            right: 0;
            transform: translate(110%, -50%);
        }
    }
}

.benefits-parts01 {
    width: min(82.32%, 725px);
    margin: max(3.8%, 30px) auto 0px;
}

@media screen and (max-width:1024px) {
    .benefits {
        .parts02 {
            transform: translate(-2%, -70%);
        }
    }
}



@media screen and (max-width:768px) {
    .benefits {
        .parts01 {
            transform: translate(-17%, -27%);
        }

        /* .parts02 {
            width: min(27.2%, 100px);
            transform: translate(-2%, -70%);
        } */
    }

    .benefits__list {
        gap: 20px;
        width: min(82.32%, 500px);
        margin: 0 auto;
    }

    .benefits__item {
        width: calc((100% - 20px)/2);

        .arrow {
            font-size: var(--font19);
        }
    }

}

@media screen and (max-width:480px) {
    .benefits {
        .parts02 {
            transform: translate(-2%, 90%);
        }
    }


}



/*******************************************
modal
*******************************************/
/* 共通
ーーーーーーーーーーーーーーーーーーー */
.no-scroll {
    overflow: hidden;

    body {
        overflow: scroll;
    }
}

.modalOpen,
.modalClose {
    cursor: pointer;
    transition: var(--transitionBase01);

    &:hover {
        opacity: var(--opacity07);
    }
}

.modal {
    /* 背景 */
    opacity: 0;
    visibility: hidden;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: auto;
    z-index: -100;
    overflow: auto;
    transition: var(--transitionBase01);
    background-color: transparent;

    &::before {
        position: fixed;
        content: "";
        inset: 0;
        width: 100%;
        height: 100dvh;
        background-color: var(--blue02);
        opacity: .8;
    }
}

.modalBox-outer {
    /* 最大幅*/
    position: absolute;
    height: auto;
    top: 0;
    left: 50%;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 0);
    transition: var(--transitionBase01);
    /* padding: clamp(40px, 10%, 140px) 0; */
    padding: 0;
    display: flex !important;
    justify-content: center;
    align-items: center;
    z-index: -100;

    height: 100dvh;
}

.modalBox {
    position: relative;
    width: min(100%, 620px);
    margin: 0 auto;
    background-color: var(--blue03);
    height: auto;
    border-radius: 25px;


    /* display: none; */
}

.active {
    opacity: 1;
    visibility: visible;
    z-index: 1000;

    .show.modalBox-outer {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        z-index: 1001;
    }
}

.modal__inner {
    /* モーダル中身のインナー */
    width: 100%;
    margin: 0 auto;

}



.btn-cross {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    width: clamp(40px, 10%, 60px);
    aspect-ratio: 1;
    background-color: var(--black);
    border-radius: var(--borderRadiusCircle);

    span {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;

        &::before,
        &::after {
            position: absolute;
            content: "";
            width: 50%;
            height: 1.5px;
            top: 50%;
            left: 50%;
            background-color: var(--white);
            transform: translate(-50%, -50%) rotate(45deg);
        }

        &::after {
            transform: translate(-50%, -50%) rotate(-45deg);
        }
    }
}


/*******************************************
modal(benefits )
*******************************************/


.modal-benefits {
    .modalBox {
        background-color: var(--yellow01);
        border: 1px solid var(--white);
        border-radius: 75px;
        aspect-ratio: 620/618;
    }

    &:nth-child(even) {
        .modalBox {
            background-color: var(--blue01);
        }
    }

    .modal__inner {
        height: 100%;
    }
}

.modal-benefitsBox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 5px 10px;

    .img {
        width: min(70%, 201px);
    }
}

.modal-benefits__detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--zenKaku);
    letter-spacing: var(--fontSpace050);
    font-size: var(--font19);
    font-weight: var(--weight700);
    text-align: center;

    dt {
        font-size: 1.368em;
        width: 12.3em;
        background-color: var(--white);
        border-radius: var(--borderRadius01);
        border: 1px solid var(--black);
        padding: 0.32em;
        margin: 15px 0 20px;
    }

    dd {
        line-height: 1.63;
    }
}

@media screen and (max-width:768px) {
    .modal-benefits {
        .modalBox {
            width: min(100%, 400px);
            border-radius: 45px;
        }
    }

    .modal-benefitsBox {

        .img {
            width: max(30%, 95px);
        }
    }

    .modal-benefits__detail {
        dt {
            margin: 5px 0 5px;
        }
    }
}

/*******************************************
career
*******************************************/
.career {
    .section-container {
        width: min(100%, 1170px);
    }

    .parts01 {
        width: min(20%, 246px);
        transform: translate(7%, 43%);
    }

    .parts02 {
        width: min(14%, 175px);
        transform: translate(-45%, 25%);
    }
}

.careerBox {
    position: relative;
    margin-bottom: max(10%, 40px);
    padding: clamp(50px, 9%, 100px) 0 0 0;

    &:last-child {
        margin-bottom: 0;
    }
}

.career__ttl {
    position: absolute;
    top: 0;
    left: 0;
    width: 64%;
}

.careerdetail {
    position: relative;
    width: min(100%, 1070px);
    margin: 0 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;

    height: clamp(220px, 38vw, 443px);
}

.careerdetail__item {
    width: calc((100% - 60px)/4);
    display: flex;
    flex-direction: column;
    border-radius: var(--borderRadius10);
    overflow: hidden;
    border: 2px solid var(--blue02);

    dt {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #e2f5ff;
        font-size: var(--font27);
        letter-spacing: var(--fontSpace070);
        height: 5.851em;
        border-bottom: 2px solid var(--blue02);
        font-weight: var(--weight900);
    }

    dd {
        background-color: white;
        font-size: var(--font19);
        letter-spacing: var(--fontSpace050);
        line-height: var(--lineHight157);
        padding: max(1.05em, 10px);
        flex: 1;
    }

    &:nth-child(1) {
        height: calc(100% - 150px);
    }

    &:nth-child(2) {
        height: calc(100% - 100px);

        dt {
            background-color: #b5e0f5;
        }
    }

    &:nth-child(3) {
        height: calc(100% - 50px);

        dt {
            background-color: #85cef2;
        }
    }

    &:nth-child(4) {
        height: 100%;

        dt {
            background-color: #65ccff;
        }
    }
}

.careerdetail02 {
    height: clamp(264px, 43vw, 505px);

    .careerdetail__item {
        border: 2px solid var(--yellow01);

        dt {
            border-bottom: 2px solid var(--yellow01);
        }


        &:nth-child(1) {
            dt {
                background-color: #fff6e2;
            }
        }

        &:nth-child(2) {

            dt {
                background-color: #f5deb5;
            }
        }

        &:nth-child(3) {

            dt {
                background-color: #f2c685;
            }
        }

        &:nth-child(4) {

            dt {
                background-color: #ffd665;
            }
        }
    }

}

@media screen and (max-width:1024px) {
    .career {
        .section-container {
            width: 100vw;
            margin-left: calc(50% - 50vw);
            margin-right: calc(50% - 50vw);
        }
    }


    .career__ttl {
        width: 92%;
        width: min(84.6%, 600px);
        left: 7.2%;
    }

    .careerBox__inner {
        overflow-x: scroll;
    }

    .careerdetail {
        width: clamp(440px, 100%, 900px);
        margin-left: 20%;
        gap: 10px;


    }

    .careerdetail__item {
        width: calc((100% - 30px)/4);

        &:nth-child(1) {
            height: calc(100% - 60px);
        }

        &:nth-child(2) {
            height: calc(100% - 40px);
        }

        &:nth-child(3) {
            height: calc(100% - 20px);
        }

        dt {
            height: 5.41em;
        }
    }
}


@media screen and (max-width:480px) {
    .career {

        .parts01 {
            transform: translate(-1%, 3%);
        }

        .parts02 {
            transform: translate(0%, 85%);
        }
    }


    .careerdetail__item {

        dd {
            padding: max(1.05em, 10px) max(0.9em, 5px);
            font-size: max(2.2vw, 9px);
        }
    }

}

/*******************************************
company
*******************************************/

.company {
    background-color: var(--blue03);

    .section__inner {
        padding-bottom: 0;
    }
}




/*******************************************
question
*******************************************/
.question {
    .parts01 {
        width: min(29.6%, 345px);
        transform: translate(-14%, 55%);
    }

    .parts02 {
        width: min(20%, 258px);
        transform: translate(-15%, 15%);
    }

    .section-container {
        width: min(100%, 1050px);
        margin: max(8%, 45px) auto 0;
    }

    .section__ttl {
        .en {
            color: var(--blue06);
        }
    }
}

.questionList {
    display: flex;
    flex-wrap: wrap;
    gap: 80px 40px;
}

.questionList__item {
    width: calc((100% - 40px)/2);
    max-width: 410px;
    border-radius: var(--borderRadius10);
    display: flex;
    flex-direction: column;

    &:nth-child(3) {
        margin-left: auto;
    }

    &:nth-child(even) {
        background-color: var(--beige01);

        .q-icon {
            border: 2px solid var(--orange01);

            &::before {
                color: var(--orange01);
            }
        }

        .a-icon {
            background-image: url(../img/question/a-icon02.svg);
        }
    }
}

.questionBox {
    position: relative;
    background-color: var(--blue03);
    font-size: var(--font32);
    padding: 0px 15px 50px;

    .q-icon {
        display: inline-block;
        position: relative;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 2.1875em;
        aspect-ratio: 1;
        margin-top: calc(-2.1875em / 2);
        background-color: var(--white);
        border: 2px solid var(--blue02);
        border-radius: var(--borderRadiusCircle);

        &::before {
            position: absolute;
            content: "Q";
            top: 50%;
            left: 50%;
            transform: translate(-50%, -60%);
            font-size: 1.343em;
            color: var(--blue02);
            font-weight: var(--weight900);
        }
    }
}

.question__detail {
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
    padding-top: 20px;

    dt {
        font-size: var(--font32);
        text-align: center;
        line-height: 1.4375;
        letter-spacing: var(--fontSpace070);
        font-weight: var(--weight900);
    }

    dd {
        display: flex;
        align-items: flex-start;
        font-size: var(--font19);
        margin: 0.9em auto 0;
        width: min(100%, 355px);

        .a-icon {
            position: relative;
            display: block;
            aspect-ratio: 25/24;
            width: 1.368em;
            background-image: url(../img/question/a-icon01.svg);
            background-repeat: no-repeat;
            background-size: contain;
        }

        p {
            position: relative;
            letter-spacing: var(--fontSpace050);
            line-height: var(--lineHight157);
            padding-left: 0.5em;
            flex: 1;
        }

    }
}

.btn-outer-question {
    margin: auto auto 0;
}

@media screen and (max-width:768px) {
    .question {
        .parts01 {
            transform: translate(-4%, 8%);
        }

        .parts02 {
            transform: ttranslate(-5%, 60%);
        }
    }

    .questionList {
        gap: 30px 15px;
        width: min(100%, 500px);
        margin: 0 auto;
    }

    .questionList__item {
        width: calc((100% - 15px)/2);

        &:nth-child(even) {

            .q-icon {
                border: 0.8px solid var(--orange01);

            }
        }
    }

    .questionBox {
        padding: 0 10px 10px;

        .q-icon {
            width: 1.84em;
            border: 0.8px solid var(--blue02);

            &::before {
                font-size: 1em;
            }
        }
    }

    .question__detail {
        padding-top: 10px;
        margin-bottom: 10px;

        dt {
            font-size: min(3.57vw, 20px);

            .small {
                font-size: 0.7em;
            }
        }
    }

    .btn-outer-question {
        height: max(2.37em, 36px);
    }
}

@media screen and (max-width:480px) {
    .btn-outer-question {
        .btn {
            font-size: min(2.5vw, 11px);
            padding: 0 1.7em;

            &::before {
                right: 2%;
            }
        }
    }
}

/*******************************************
question(モーダル)
*******************************************/




.modal-question-close {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-120%);
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 18px;
    letter-spacing: var(--fontSpace050);
    font-family: var(--zenKaku);
    font-weight: var(--weight700);

    .btn-cross {
        position: initial;
        transform: initial;
        width: 1.44em;
    }
}

.questionBox-modal {
    position: relative;
    border-radius: 25px;
    padding: 0 15px max(36.29%, 80px);


    .question__detail {
        margin-bottom: 15px;
        padding-top: 10px;

        dt {
            font-size: max(var(--font32), 15px);
        }

        dd {
            width: min(100%, 450px);
        }
    }
}

.modal-question01 {
    .questionBox-modal {
        padding-bottom: max(32.26%, 80px);
    }
}


.questionBox-modal__img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 27%);
    width: 97.8%;
    margin: 0 auto;
}


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

    .modal-question {
        .modalBox {
            width: min(100%, 450px);
        }
    }



    .questionBox-modal__img {
        width: min(97.8%, 450px);
    }

}

@media screen and (max-width:480px) {
    .modal-question {
        .modalBox {
            width: min(100%, 375px);
        }
    }

    .modal-question-close {
        font-size: 15px;
    }
}

@media screen and (max-width:375px) {
    .modal-question-close {
        font-size: 13px;
    }
}


/*******************************************
search
*******************************************/

.aco-container {
    transition: var(--transitionBase02);
    overflow: hidden;
}

.aco-click {
    position: relative;
    cursor: pointer;
    transition: var(--transitionBase02);
}

.aco-box {
    max-height: 0;
    transition: var(--transitionBase02);
}

.aco-container.open {
    .btn {
        &::before {
            transform: translateY(-40%) rotate(-90deg);
        }
    }
}

.search {
    background-color: var(--blue05);
    background-color: #0a9be6;

    .section__inner {
        padding: 17.9% 0 8.78%;
    }

    .section__ttl {
        font-size: var(--font65);
        color: var(--white);
        line-height: 1.4538;
        color: var(--white);
        letter-spacing: var(--fontSpace070);
    }
}

.search__bgTxt {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 1;
}

.search__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    /* img {
        object-fit: cover;
        object-position: top;
        height: 100%;
    } */
}

.search__list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin: 6.7% auto 0;
    width: min(100%, 790px);
}

.search__item {
    width: calc((100% - 40px)/2);

    .btn-outer {
        width: 100%;
        height: 110px;
    }

    .btn {
        font-size: var(--font31);
        padding: 0 1em;
        font-weight: var(--weight700);
        border-radius: 0;

        &::before {
            transition: var(--transitionBase01);
            width: min(0.8em, 25px);
            transform: translateY(-40%) rotate(90deg);
        }
    }
}

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

.searchLink__item {
    width: 100%;
    height: 70px;

    &:last-child {
        a {
            &::before {
                display: none;
            }
        }
    }

    a {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-size: max(var(--font19), 12px);

        &::before {
            position: absolute;
            content: "";
            width: 88.47%;
            height: 2px;
            background-color: var(--blue03);
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
    }
}

.btn-outer-search01 {
    .btn {
        border: 4px solid var(--blue02);
    }
}

.btn-outer-search02 {
    .btn {
        border: 4px solid var(--white);
        color: var(--white);
        background-color: var(--blue02);

        &::before {
            background-color: var(--white);
        }
    }
}

.btn-outer-search03 {
    .btn {
        border: 4px solid var(--beige01);
        background-color: var(--beige01);
    }
}



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

    .search {
        .section__inner {
            padding: 52% 0 min(102%, 400px);
        }
    }

    .search__bg {


        img {
            object-fit: cover;
            object-position: bottom;
            height: 100%;
        }
    }

    .search__list {
        flex-direction: column;
        align-items: center;
        gap: 25px;
        width: min(84%, 400px);
        margin-top: 11.6%;
    }

    .search__item {
        width: 100%;

        .btn-outer {
            height: 80px;
        }

        .btn {
            font-size: 21px;
        }
    }

    .searchLink__item {
        width: 100%;
        height: 50px;
    }

    .btn-outer-search01 {
        .btn {
            border: 2px solid var(--blue02);
        }
    }

    .btn-outer-search02 {
        .btn {
            border: 2px solid var(--white);
        }
    }

    .btn-outer-search03 {
        .btn {
            border: 2px solid var(--beige01);
        }
    }
}

@media screen and (max-width:480px) {
    .search__item {
        .btn {
            font-size: 17px;
        }
    }
}


/*******************************************
footer
*******************************************/

.footer {
    background-color: var(--blue02);
    padding: 70px 0 60px;
    position: relative;
    font-size: var(--font19);
    color: var(--white);
    font-weight: var(--weight500);
}

.footer-nav {
    margin: 0 auto 15px;
    display: flex;
    justify-content: center;
    gap: 30px;

    a {
        position: relative;

        &:hover {
            opacity: var(--opacity07);
        }
    }

    a:not(:first-child):before {
        position: absolute;
        content: "";
        width: 1px;
        height: 100%;
        background-color: var(--white);
        top: 50%;
        left: -14px;
        transform: translate(50%, -50%);
    }
}


.copyright {
    text-align: center;
    font-size: var(--font19);
}



@media screen and (max-width:768px) {
    .footer {
        padding: 50px 0 100px;
    }
}


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

    .footer {
        .inner {
            padding: 0 15px;
        }
    }

    .footer-nav {
        flex-wrap: wrap;
        column-gap: 30px;
        row-gap: 10px;
        margin-bottom: 20px;


        & a:last-child::before {
            display: none;
        }

        & a:not(:first-child):before {
            left: -14px;
        }
    }
}