@charset "utf-8";

/* 色の変数　　color: var(--blue); */
:root {
    --white: #fff;
    --white02: rgba(255, 255, 255, 0.5);
    --black: #000;
    --gray01: #b6b6b6;
    --gray02: #ebebeb;
    --gray03: #d4cfcf;
    --gray04: #d3cece;
    --gray05: #eaeaea;
    --gray06: #f4f4f4;
    --gray07: #d8d3d3;
    --brown01: #3c2121;
    --brown02: rgba(60, 33, 33, 0.5);
    --brown03: rgba(60, 33, 33, 0.6);
    --brown04: rgba(60, 33, 33, 0.1);
    --red01: #db281d;
    --red02: rgba(219, 40, 29, 0.2);
    --red03: #d6281d;
    --red04: #c21e1d;
    --red05: #da281d;
    --red06: #cc0000;
    --red07: #df281d;
    --beige01: #ffe4c4;
    --beige02: #f8f7eb;
    --beige03: #ffecd8;
    --beige04: #f7f6ea;
    --beige05: #fcf1d9;
    --beige06: #fff4e5;
    --beige07: #ffdeb0;
    --beige08: #ffe8c8;
    --yellow01: #fff0b3;
    --yellow02: #ffc900;
    --orange01: #ff602d;
    --green01: #008a3f;
    --green02: #00893f;
    --green03: #008e3f;
    --pink01: #faf4f4;
    --pink02: #fce7e9;

    --gra01: linear-gradient(90deg, #e9d7d8, #ffeded);

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

    /* 書式 */
    --zenKaku: "Zen Kaku Gothic New", sans-serif;
    --poppins: "Poppins", sans-serif;

    /* 文字 */
    --font12: clamp(10px, 2.66vw, 12px);
    --font13: clamp(10px, 2.66vw, 13px);
    --font15: clamp(11px, 0.37037vw + 9.81481px, 15px);
    --font17: clamp(13px, 0.37037vw + 11.81481px, 17px);
    --font19: clamp(14px, 0.46296vw + 12.51852px, 19px);
    --font21: clamp(15px, 0.55556vw + 13.22222px, 21px);
    --font22: clamp(15px, 0.64815vw + 12.92593px, 22px);
    --font23: clamp(16px, 0.69444vw + 13.88889px, 23px);
    --font25: clamp(17px, 0.74074vw + 14.62963px, 25px);
    --font26: clamp(18px, 0.83333vw + 15.16667px, 26px);
    --font28: clamp(18px, 0.92593vw + 15.03704px, 28px);
    --font30: clamp(19px, 1.01852vw + 15.74074px, 30px);
    --font32: clamp(20px, 1.20370vw + 14.66667px, 32px);
    --font34: clamp(21px, 1.29630vw + 16.85185px, 34px);
    --font36: clamp(21px, 1.38889vw + 16.55556px, 36px);
    --font37: clamp(22px, 1.48148vw + 16.33333px, 37px);
    --font41: clamp(23px, 1.66667vw + 17px, 41px);
    --font43: clamp(24px, 1.75926vw + 18.07407px, 43px);
    --font58: clamp(30px, 2.59259vw + 21.70370px, 58px);

    /* サイズ */
    --size40: min(5.2vw, 40px);
    --size45: min(3.125vw, 45px);
    --size50: min(3.47vw, 50px);
    --size55: min(3.8194vw, 55px);
    --size60: min(4.16vw, 60px);
    --size65: min(4.51vw, 65px);
    --size70: min(4.86vw, 70px);
    --size80: min(5.5vw, 80px);
    --size85: min(5.9vw, 85px);
    --size90: min(6.25vw, 90px);
    --size95: min(6.59vw, 85px);
    --size110: min(7.6vw, 110px);


    /* ウェイト */
    --weight400: 400;
    --weight500: 500;
    --weight600: 600;
    --weight700: 700;

    /* 行間 */
    --lineHight120: 1.2;
    --lineHight140: 1.4;
    --lineHight150: 1.5;
    --lineHight164: 1.64;
    --lineHight168: 1.68;
    --lineHight175: 1.75;
    --lineHight188: 1.88;
    --lineHight200: 2.0;
    --lineHight211: 2.11;

    /* 文字間 */
    --fontSpace040: 0.04em;
    --fontSpace050: 0.05em;
    --fontSpace080: 0.08em;
    --fontSpace100: 0.1em;
    --fontSpace150: 0.15em;
    --fontSpace250: 0.25em;

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

    /* 角丸の変数　 */
    --radius01: 999px;
    --radius10: clamp(5px, 1.3vw, 10px);
    --radius15: clamp(8px, 2.66vw, 15px);
    --radius20: clamp(10px, 2.66vw, 20px);
    --radius30: clamp(15px, 4vw, 30px);
    --radius50: clamp(15px, 3.9vw, 50px);
    --radiusCircle: 50%;

    --opacity07: .7;

    --responsivePadding: clamp(20px, 6.25vw, 80px);

    --arrow25: 1.315em;

}


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


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

body {
    color: var(--brown01);
    font-family: var(--zenKaku);
    font-weight: var(--weight700);
    font-size: var(--font17);
    line-height: var(--lineHight120);
    letter-spacing: var(--fontSpace080);

    a,
    .hamburger,
    .btn,
    .pagiBtn,
    .aco-click {
        transition: var(--transition01);

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

p {
    text-align: justify;
    font-size: var(--font17);
    line-height: var(--lineHight164);
    font-weight: var(--weight500);
}

.section {
    position: relative;
}

.section__inner {
    position: relative;
    width: min(100%, 1200px);
    margin: 0 auto;
    padding: max(var(--size110), 50px) 0;

    @media screen and (max-width:1300px) {
        padding-left: var(--responsivePadding) !important;
        padding-right: var(--responsivePadding) !important;
    }

}

.section__ttl {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: var(--font36);

    .en {
        font-size: var(--font21);
        font-family: var(--poppins);
        font-weight: var(--weight400);
        color: var(--red01);
    }

    .ja {
        font-size: 1em;
        line-height: 1.52;
        margin-top: 0.3em;
    }
}

.push {
    display: inline-block;
}

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

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

.part-time-only {
    display: none !important;
}


.block768,
.block1024 {
    display: none;
}

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

    .none1024 {
        display: none;
    }
}

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

    .none768 {
        display: none;
    }
}

/* パンくず */
.breadcrumb {
    width: min(100%, 1330px);
    margin: 0 auto;

    .section__inner {
        width: min(100%, 1330px);
        padding-top: 10px;
        padding-bottom: 0;
        padding-right: 0 !important;
    }
}

.breadcrumb__list {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 1.92em;
    font-size: var(--font13);
    font-weight: var(--weight500);

    li {
        position: relative;

        &::before {
            position: absolute;
            content: "／";
            font-size: 1em;
            top: 0;
            right: -1.92em;
            transform: translateX(-35%);
        }

        &:last-child {
            pointer-events: none;

            &::before {
                display: none;
            }
        }
    }
}




/*******************************************
文字色
*******************************************/
.red01 {
    color: var(--red01);
}

.red02 {
    color: var(--red05);
}

.red03 {
    color: var(--red07);
}

.green01 {
    color: var(--green01);
}


/*******************************************
パーツ
*******************************************/
.mark-circle01 {
    position: relative;
    padding-left: 1em;

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

.mark-circle02 {
    position: relative;
    padding-left: 1em;

    &::before {
        position: absolute;
        content: "●";
        color: var(--red05);
        font-size: 0.7em;
        top: 0.5em;
        left: 0;
    }
}

.mark-check01 {
    position: relative;
    padding-left: 1.58em;

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/common/icon-check.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: 1.2em;
        aspect-ratio: 1;
        top: 0;
        left: 0;
        transform: translateY(0.25em);
    }
}

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

.plus {
    position: relative;

    &::before,
    &::after {
        position: absolute;
        content: "";
        top: 50%;
        right: 2%;
        width: 1em;
        height: 2px;
        background-color: var(--red01);
        transform: translateY(-50%);
        transition: var(--transition01);
    }

    &::after {
        transform: translateY(-50%) rotate(90deg);
    }

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

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

    }
}

.change-page {
    &::first-letter {
        color: var(--red01);
    }
}

.bg-ttl {
    position: relative;
    font-size: var(--font17);
    text-align: left;
    line-height: var(--lineHight120);

    &>span {
        display: block;
        width: fit-content;
        font-size: 1em;
        color: var(--white);
        background-color: var(--brown01);
        padding: 0.7em;
        border-radius: 5px;
        margin-bottom: 5px;

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


.icon-q {
    position: relative;
    font-size: var(--font26);
    padding-left: 1.538em;
    line-height: 1.34;
    font-weight: var(--weight700);
    text-align: left;

    &::before {
        position: absolute;
        content: "Q";
        top: 0;
        left: 0;
        font-weight: var(--weight600);
        font-family: var(--poppins);
        color: var(--red01);
        font-size: 1.23em;
        transform: translateY(-10%);
    }
}

.fukidashi__flex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: calc((100% - 20px)/2);
    gap: 25px;

    .icon {
        position: relative;
        width: 80px;
        border-radius: var(--radiusCircle);

        img {
            border-radius: var(--radiusCircle);
        }

        .txt {
            position: absolute;
            top: 105%;
            left: 50%;
            transform: translateX(-50%);
            font-size: var(--font12);
            text-align: center;
            color: var(--red05);
            width: 100%;
        }
    }

    .fukidashiBox {
        flex: 1;
        background-color: var(--beige06);

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

        p {
            font-size: 14px;
            padding: 1.4142em;
            letter-spacing: var(--fontSpace040);
        }
    }

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

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

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

        align-items: flex-start;


        .fukidashiBox {

            &::before,
            &::after {
                top: 0;
                transform: translate(-90%, 100%);
            }

            &::after {
                transform: translate(-88%, 81%);
                width: 23px;
            }
        }








        /* flex-direction: column-reverse;

        .fukidashiBox {
            flex: none;

            &::before,
            &::after {
                top: auto;
                bottom: 0;
                left: 50%;
                transform: translate(-50%, 90%);
                clip-path: polygon(0 0, 100% 0%, 50% 100%);

            }

            p {
                font-size: 12px;
            }
        } */

    }

    @media screen and (max-width: 400px) {
        .icon {
            width: 50px;
        }

        .fukidashiBox {
            &::before {
                transform: translate(-90%, 80%);
            }

            &::after {
                transform: translate(-87%, 63.5%);
            }
        }
    }
}

.fukidashiBox {
    position: relative;
    border-radius: var(--radius20);

    &::before {
        position: absolute;
        content: "";
        display: inline-block;
        width: 20px;
        aspect-ratio: 1;
        background: var(--beige05);
        clip-path: polygon(100% 0, 0 50%, 100% 100%);
        top: 50%;
        left: 0;
        transform: translate(-90%, -50%);
    }

    &::after {
        position: absolute;
        content: "";
        width: 22px;
        aspect-ratio: 1;
        background: var(--red05);
        clip-path: polygon(100% 0, 0 50%, 100% 100%);
        top: 50%;
        left: 0;
        transform: translate(-90%, -50%);
        z-index: -1;
        display: none;
    }
}

.fukidashiBox-right {
    &::before {
        left: auto;
        right: 0;
        transform: translate(90%, -50%);
        clip-path: polygon(0 0, 0 100%, 100% 50%);
    }
}



.bg-dotted {
    background-image: radial-gradient(circle, #ffffff33 clamp(1.458px, 0.243vw, 3.5px), transparent clamp(1.458px, 0.243vw, 3.5px));
    background-position: clamp(8.333px, 1.389vw, 20px) clamp(2.083px, 0.347vw, 5px);
    background-size: clamp(18.333px, 3.056vw, 44px) clamp(18.333px, 3.056vw, 44px);
}



.box01 {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius30);
    overflow: hidden;
}

.box01-brown01 {
    .box01__ttl {
        background-color: var(--brown01);

        p {
            &::before {
                background-image: url(../img/real/reason/icon-ttl.svg);
            }
        }
    }
}

.box01__ttl {
    position: relative;
    font-size: var(--font21);
    background-color: var(--red07);
    padding: 1.19em 1.42em;

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/real/ttl-bg.png);
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: .2;
    }

    p {
        position: relative;
        font-size: 1em;
        text-align: left;
        color: var(--white);
        padding-left: 3.09em;

        &::before {
            position: absolute;
            content: "";
            background-image: url(../img/real/gap/icon-ttl.svg);
            background-size: cover;
            background-repeat: no-repeat;
            aspect-ratio: 37.7/34.5;
            width: 1.795em;
            top: 0;
            left: 0;
        }
    }

    @media screen and (max-width: 768px) {
        padding: 1.19em 1em;

        p {
            padding-left: 2.5em;
        }
    }
}

.box01__main {
    background-color: var(--white);
    padding: max(var(--size40), 25px) max(var(--size60), 15px) max(var(--size70), 30px);
}



/*******************************************
ページネーション
*******************************************/
.paginationFlex {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: clamp(40px, 6.42vw, 90px);
    gap: 15px;
}



.pagiBtn {
    width: 30px;
    aspect-ratio: 1;

}

.prevBtn {
    transform: rotate(180deg);
}




.my-carousel-progress {
    width: 100%;
    height: 4px;
    background: #ddd;
    overflow: hidden;
}

.my-carousel-progress-bar {
    width: 0;
    height: 100%;
    background: var(--red01);
    transition: var(--transition01);

}

/* progressとpaginationのセット */
.progress-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: min(100%, 400px);
    margin: 0 auto;

    .my-carousel-progress {
        flex: 1;
    }

    .paginationFlex {
        gap: 5px;
        margin: 0;
    }

    @media screen and (max-width: 480px) {
        width: min(100%, 250px);
        margin-left: 0;
    }
}



/*******************************************
snsボタン
*******************************************/
.snsList {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 2.08vw, 20px);
    width: min(100%, 95px);
    margin-left: auto;

    li {
        width: calc((100% - clamp(10px, 2.08vw, 20px))/2);
    }

    @media screen and (max-width:480px) {
        width: min(100%, 70px);
    }
}

.snsList-menu {
    margin-top: max(var(--size50), 25px);
}


/*******************************************
アコーディオン
*******************************************/

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

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

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

.aco-container.open {
    .plus {
        &::before {
            transform: translateY(-50%) rotate(180deg);
        }

        &::after {
            transform: translateY(-50%) rotate(360deg);
        }
    }
}

/*******************************************
btn
*******************************************/
.btn-outer {
    width: min(100%, 390px);
    height: 70px;

    @media screen and (max-width: 1024px) {
        width: min(100%, 350px);
        height: 65px;
    }

    @media screen and (max-width: 768px) {
        width: min(100%, 300px);
        height: 60px;
    }

    @media screen and (max-width:480px) {
        width: min(100%, 250px);
        height: 50px;
    }
}

.btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: var(--white);
    background-color: var(--brown01);
    font-size: var(--font17);
    width: 100%;
    height: 100%;
    border-radius: var(--radius01);
    transition: var(--transition01);
    cursor: pointer;

    .arrow {
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        right: 5%;
    }
}

.arrow {
    position: relative;
    width: clamp(15px, 1.76em, 30px);
    aspect-ratio: 1;
    border-radius: var(--radiusCircle);
    background-color: var(--white);
    transition: var(--transition01);

    &::before {
        position: absolute;
        content: "";
        mask-image: url(../img/common/arrow01.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        top: 50%;
        left: 50%;
        width: 46.67%;
        aspect-ratio: 1;
        transform: translate(-50%, -50%);
        transition: var(--transition01);
        background-color: var(--brown01);
    }
}

.arrow-bottom {
    &::before {
        transform: translate(-50%, -50%) rotate(90deg);
    }
}

.btn-external {
    .arrow {
        width: max(1.47em, 15px);

        &::before {
            mask-image: url(../img/common/arrow03.svg);
            width: 34%;
        }
    }
}

.btn-white01 {
    background-color: var(--white);
    color: var(--brown01);
    border: 1px solid var(--gray01);

    .arrow {
        background-color: var(--black);

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

.btn-white02 {
    background-color: var(--white);
    color: var(--brown01);
    border: 1px solid var(--brown01);

    .arrow {
        background-color: var(--red01);

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

.btn-white03 {
    background-color: var(--white);
    color: var(--brown01);
    border: none;

    .arrow {
        background-color: var(--beige06);

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

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

    .arrow {
        background-color: var(--white);

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

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

    .arrow {
        background-color: var(--white);

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

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

    .arrow {
        background-color: var(--white);

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

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

    .arrow {
        background-color: var(--white);

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

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

    .arrow {
        background-color: var(--white);

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

.btn-yellow01 {
    background-color: var(--yellow02);
    color: var(--brown01);

    .arrow {
        background-color: var(--white);

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

.btn-sns {
    border: 2px solid var(--red01);

    &::before {
        position: absolute;
        content: "";
        top: 50%;
        left: 12%;
        transform: translateY(-50%);
        width: 1.5263em;
        aspect-ratio: 1;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(../img/common/icon-youtube-nomal.svg);
    }
}

.btn-sns-insta {
    &::before {
        background-image: url(../img/common/icon-insta-nomal.svg);
    }
}





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

.topReturn {
    position: fixed;
    bottom: 2%;
    right: 2%;
    width: max(var(--size95), 40px);
    aspect-ratio: 1;
    opacity: 0;
    visibility: hidden;
    z-index: 9;
    transition: var(--transition01);

    &.topReturn-sp {
        display: none;
    }

    @media screen and (max-width: 768px) {
        width: auto;
        bottom: calc(2% + 60px);

        &.topReturn-pc {
            display: none;
        }

        &.topReturn-sp {
            display: block;
            position: relative;
            inset: 0;
            opacity: 1;
            visibility: visible;
        }
    }
}

/*******************************************
entryBtnBox-fixed
*******************************************/
.fixedBox {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 10;
    width: clamp(85px, 8.05vw, 116px);
    transform: translate(110%, -50%);
    font-size: clamp(10px, 1.04vw, 15px);
    transition: var(--transition01);
    opacity: 0;

    &.show {
        transform: translate(0, -50%);
    }

    @media screen and (max-width: 1024px) {
        width: 100%;
        height: 80px;
        top: auto;
        right: 50%;
        bottom: 2%;
        transform: translate(50%, 0);
        width: min(95%, 600px);
        font-size: 15px;

        &.show {
            transform: translate(50%, 0);
        }
    }
}

.entryBtnBox-fixed__outer {
    background-color: var(--white);
    border-radius: max(0.66em, 5px);
    padding: 1em max(0.66em, 5px);
    border: 1px solid var(--gray03);
    margin-bottom: max(0.66em, 5px);

    @media screen and (max-width: 1024px) {
        margin: 0;
        padding: 1em;
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }
}

.entryBtnBox-fixed__txt {
    width: 100%;
    margin-bottom: max(0.66em, 5px);

    @media screen and (max-width: 1024px) {
        display: none;
    }
}

.entryBtnBox-fixed {
    display: flex;
    flex-direction: column;
    gap: 0.53em;

    .btn {
        border-radius: 5px;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 1em;
        line-height: 1.2;
        justify-content: flex-start;


        .arrow {
            top: auto;
            right: 50%;
            bottom: 10%;
            transform: translateX(50%);
            width: 1.73em;
        }

        &:first-child {
            height: 6.6em;
            letter-spacing: var(--fontSpace150);
            line-height: 1.333;
        }

        &:last-child {
            height: 7.73em;
            letter-spacing: 0;
            white-space: nowrap;
            letter-spacing: -0.05em;
        }
    }

    @media screen and (max-width: 1024px) {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 100%;

        .btn {
            border-radius: 10px;
            justify-content: center;
            padding-top: 0;

            .arrow {
                top: 50%;
                right: 5%;
                bottom: auto;
                transform: translateY(-50%);
                width: 1.5em;
            }

            &:first-child,
            &:last-child {
                height: 100%;
                line-height: 1.3;
                letter-spacing: var(--fontSpace050);
            }
        }
    }
}

.snsList-fixed {
    width: 52%;
    margin: 0 auto;
    flex-direction: column;
    gap: max(0.66em, 5px);

    li {
        width: 100%;
        background-color: var(--white);
        border-radius: var(--radiusCircle);

        a {
            display: block;
            width: 100%;
            height: 100%;
            border: max(0.16em, 1px) solid var(--white);
            border-radius: var(--radiusCircle);
        }
    }

    @media screen and (max-width: 1024px) {
        position: absolute;
        top: 0;
        right: 0;
        width: min(100%, 90px);
        flex-direction: row;
        transform: translateY(-110%);
        gap: 10px;
        justify-content: center;

        li {
            a {
                border: none;
            }
        }
    }

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

        li {
            width: 40px;
        }
    }
}


/*******************************************
3分 バナー
*******************************************/
.dataBnner {
    position: relative;
    width: 100vw;
    max-height: 850px;
    background-color: var(--red01);
    aspect-ratio: 1440/579;
    font-size: clamp(15px, 2.5vw, 36px);
    /* overflow: hidden; */

    .section__ttl {
        font-size: 1em;
    }

    @media screen and (max-width: 1024px) {
        aspect-ratio: 375/612.5;
        aspect-ratio: initial;
        padding-bottom: 1.935em;
        font-size: min(8.26vw, 40px);

        .section__ttl {
            .en {
                font-size: 0.54em;

            }

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

.dataBnner__inner {
    width: min(97.22%, 1400px);
    height: 100%;
    margin: 0 auto;

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

.dataBnner__flex {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2.22em;

    @media screen and (max-width: 1024px) {
        gap: 0;
        display: block;
    }
}

.dataBnner__left {
    position: relative;
    font-size: 1em;
    padding-top: 0.833em;
    width: 17.8em;

    @media screen and (max-width: 1024px) {
        padding-top: 2.677em;
        width: 100%;
    }
}

.dataBnner__frame {
    position: relative;
    width: 100%;
    padding: 2.638em 0 0 4.44em;

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/three-min/data/frame.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        aspect-ratio: 644/584;
        top: 0;
        left: 0;
    }

    @media screen and (max-width: 1024px) {
        padding: 2.096em 0 0 1.064em;
        width: 12.096em;
        margin: 0 auto;

        &::before {
            width: 12.83em;
            left: auto;
            right: 2px;
            aspect-ratio: 398/361;
        }
    }
}

.dataBnner__txtBox {
    position: relative;
    width: 10.33em;

    @media screen and (max-width: 1024px) {
        width: 10em;
    }
}

.dataBnner__txt {
    font-size: 0.47em;
    line-height: var(--lineHight211);
    margin: 1.47em 0;

    @media screen and (max-width: 1024px) {
        line-height: 2.09;
        font-size: 0.45em;
        margin: 0.714em 0 1em;
    }
}

.btn-outer-dataBnner {
    font-size: 0.47em;
    width: 12.94em;
    margin-left: auto;

    .btn {
        font-size: 1em;

        .arrow {
            width: 1.47em;
            right: 11%;
        }
    }

    @media screen and (max-width: 1024px) {
        width: 11em;
        margin: 0 auto;

        .btn {
            .arrow {
                width: 1em;
            }
        }
    }
}

.dataBnner__parts01 {
    position: absolute;
    left: 1.7em;
    bottom: -4.3em;
    width: 6.4em;
    z-index: 1;

    @media screen and (max-width: 1200px) {
        left: 2em;
        bottom: -3em;
        width: 5em;
    }

    @media screen and (max-width: 1050px) {
        bottom: -1.5em;
    }

    @media screen and (max-width: 1024px) {
        width: 3.45em;
        bottom: auto;
        left: auto;
        top: 2.8em;
        right: 0.5em;
        transform: rotate(5deg);
    }
}

.dataBnner__right {
    position: relative;
    flex: 1;
    max-width: 17.08em;

    @media screen and (max-width: 1024px) {
        display: none;
    }
}

.dataCard {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.555em;
    overflow: hidden;
}

.dataCard__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.555em;
    flex: 1;
}

.dataCard__item {
    width: 100%;
    aspect-ratio: 190/232;
    background-color: var(--white);
    border: 1px solid var(--brown01);
    box-shadow: 2.77px 2.77px 0 var(--brown01);
    border-radius: 10px;

    .img {
        width: 100%;
    }

}


.dataCard__list01 {
    margin-top: 4.69em;
}

.dataCard__list02 {
    margin-top: 0.2777em;
}

.dataCard__list03 {
    margin-top: -2.36em;
}


.dataCard-animation {
    animation: flipY 7s ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes flipY {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

    5% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    10% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }

    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}




:root {
    --loopTxt-w: clamp(1000px, 173.61vw, 2500px);
}

@media screen and (max-width: 1024px) {
    :root {
        --loopTxt-w: clamp(100px, 253.33vw, 950px);
    }
}

.loop-txt {
    display: flex;
    width: max-content;
    position: absolute;
    left: 0;
    width: 100%;

    .img {
        flex-shrink: 0;
        width: var(--loopTxt-w);

        img {
            display: block;
            width: 100%;
        }
    }

    @media screen and (max-width: 1024px) {
        /* opacity: 0; */
    }
}

@keyframes searchLoop {
    from {
        transform: translateX(calc(-1 * var(--loopTxt-w)));
    }

    to {
        transform: translateX(0);
    }
}

@keyframes searchLoop02 {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-1 * var(--loopTxt-w)));
    }
}

.loop-txt-dataBnnerTop {
    top: 1.8em;
    animation: searchLoop 60s linear infinite;

}

.loop-txt-dataBnnerBottom {
    bottom: 0;
    animation: searchLoop02 60s linear infinite;

    @media screen and (max-width: 1024px) {
        bottom: 0.8em;
    }
}




.dataLoop {
    display: none;

    @media screen and (max-width: 1024px) {
        display: block;
        margin: 1em auto 0;
    }
}

.dataLoopSwiper {
    overflow: visible;
    width: 3.225em;
    margin: 0 auto;
}

.dataLoopSwiper__list {
    transition-timing-function: linear;
    /* gap: 0.48em; */

    .swiper-slide02 {
        padding-top: 0.9em;
    }
}


/*******************************************
header(pc)
*******************************************/
:root {
    --headerHeight: clamp(50px, 7.291vw, 105px);
}

@media screen and (max-width:768px) {
    :root {
        --headerHeight: clamp(40px, 13.33vw, 70px);
    }
}


.header {
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 clamp(10px, 1.73vw, 25px) 0 clamp(10px, 2.08vw, 30px);
    height: var(--headerHeight);
    z-index: 95;
    transition: var(--transition01);
    font-size: clamp(12px, 1.04vw, 15px);
    background-color: transparent;


    @media screen and (max-width:1024px) {
        position: absolute;
        padding: 0 clamp(5px, 2.5vw, 20px);
    }
}

.bg-white {
    background-color: var(--white);

    @media screen and (max-width:1024px) {
        backdrop-filter: initial;
        background-color: transparent;
    }
}

.header__logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: clamp(200px, 27.44%, 380px);


    a {
        display: inline-block;
        width: 78.95%;
        transition: var(--transition01);
    }

    .txt {
        display: block;
        flex: 1;
        line-height: 1.69;
        color: var(--red01);
        font-size: 0.86em;
        margin-left: 0.69em;
        white-space: nowrap;
    }

    @media screen and (max-width:1024px) {
        .txt {
            font-size: clamp(10px, 2.5vw, 15px);
            line-height: 1.3;
        }
    }

    @media screen and (max-width:768px) {
        width: 47%;
    }
}


.headerNav {
    flex: 1;

    @media screen and (max-width:1024px) {
        display: none;
    }
}

.headerNav__list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(15px, 2.08vw, 30px);
}



.hamburger {
    position: relative;
    width: clamp(25px, 6.25vw, 40px);
    aspect-ratio: 40/17.5;
    cursor: pointer;
    z-index: 100;
    transition: var(--transition01);
    margin-left: 30px;


    .line {
        position: absolute;
        width: 100%;
        height: 3px;
        left: 0;
        transition: var(--transition01);
        background-color: var(--red01);

        &:nth-of-type(1) {
            top: 0;
        }

        &:nth-of-type(2) {
            top: 100%;
            transform: translateY(-100%);
        }

    }

    @media screen and (max-width:1024px) {
        display: block;
        position: fixed;
        right: 2%;
        top: calc(var(--headerHeight)/2);
        transform: translateY(-50%);

    }

    @media screen and (max-width:480px) {
        right: 5%;

        .line {
            height: 2px;
        }
    }
}


/*******************************************
header(menu)
*******************************************/
.headerMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background-color: var(--brown02);
    transition: var(--transition01);
    opacity: 0;
    visibility: hidden;
    z-index: 50;

    @media screen and (max-width:480px) {
        background-color: var(--beige02);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    @media screen and (max-width: 480px) and (max-height: 700px) {
        align-items: flex-start;
    }
}

.headerMenu__container {
    position: relative;
    height: 100%;
    width: clamp(300px, 38.19%, 550px);
    margin-left: auto;
    background-color: var(--beige02);
    overflow: auto;
    padding: 40px clamp(25px, 3.47%, 50px);
    transform: translateX(105%);
    transition: var(--transition01);

    @media screen and (max-width:480px) {
        width: min(90%, 300px);
        margin: 0;
        padding: 0;
        height: auto;
    }

    @media screen and (max-width: 480px) and (max-height: 700px) {
        padding: 50px 0;
        height: 100%;
    }

}

.headerMenu__logo {
    width: 68%;

    a {
        display: block;
        width: 100%;
        height: 100%;
    }
}

.headerMenu__list {
    margin-top: max(var(--size65), 20px);
}

.headerMenu__item {
    font-size: clamp(15px, 1.6666vw, 24px);

    border-bottom: 1px solid var(--red02);

    a {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }

    &>a {
        padding: 1em 0;
    }

    &.dropdown-menu {
        padding-bottom: 1em;
    }

    .dropdown__click {
        padding-top: 1em;
    }

    .txt {
        position: relative;
        display: block;

        &::before {
            position: absolute;
            content: "";
            mask-image: url(../img/common/arrow02.svg);
            mask-repeat: no-repeat;
            mask-size: contain;
            aspect-ratio: 10/14;
            width: 0.416em;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            background-color: var(--red01);
        }
    }
}


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


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

    .headerMenu {
        opacity: 1;
        visibility: visible;
    }

    .headerMenu__container {
        transform: translateX(0);
    }

}


.entryBtnBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: max(var(--size65), 30px);
    padding-bottom: max(var(--size70), 30px);
    border-bottom: 2px solid var(--red01);
    gap: clamp(10px, 2.08vw, 25px);

    .btn-outer {
        width: min(80%, 360px);
    }

    .btn {
        font-size: var(--font19);
        padding: 0 2em;
    }
}

.entryBtnBox-menu {
    .btn {
        .arrow {
            width: 1.2em;
        }
    }
}

.headerMenu__txt {
    font-size: var(--font19);
    margin-top: max(var(--size50), 25px);
}




/*******************************************
dropdown
*******************************************/
.dropdown {
    position: relative;

    .plus {

        &::before,
        &::after {
            right: auto;
            left: 102%;
            width: 0.7em;
        }
    }

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

        &:hover {
            .plus {
                &::before {
                    transform: translateY(-50%) rotate(180deg);
                }

                &::after {
                    transform: translateY(-50%) rotate(360deg);
                }
            }
        }
    }

}

.dropdown__click {
    position: relative;
    cursor: pointer;
    display: block;
}

.dropdown__list {
    font-size: 0.875em;

    background-color: var(--beige02);
    border-radius: var(--radius10);
}

.dropdown__item {
    font-weight: var(--weight500);
    margin-bottom: 1em;

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

    a {
        position: relative;
        display: block;
        width: 100%;
        padding-left: 1em;

        &::before {
            position: absolute;
            content: "-";
            font-size: 1em;
            top: 0;
            left: 0;
            color: var(--red01);
        }
    }
}

.dropdown-menu {
    .dropdown__list {
        padding-top: 1.5em;
    }
}


.dropdown-pc {

    .dropdown__main {
        position: absolute;
        left: 50%;
        top: 150%;
        width: 180%;
        transform: translateX(-50%);
        transition: var(--transition01);
        opacity: 0;
        visibility: hidden;
    }

    .dropdown__list {
        padding: 2em 1em;
        font-size: 1em;
        /* border: 1px solid var(--brown01); */
    }

    .dropdown__item {
        margin-bottom: 2em;

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

    &:hover {
        .dropdown__main {
            opacity: 1;
            visibility: visible;
        }
    }
}





/*******************************************
ページネーション
*******************************************/
.paginationFlex {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.pagiDot {
    width: fit-content !important;

    .swiper-pagination-bullet {
        opacity: 1;
        background-color: var(--white);
        border: 1px solid var(--red01);
        transition: var(--transition01);
    }

    .swiper-pagination-bullet-active {
        background-color: var(--red01);
        opacity: 1;
    }
}

.pagiBtn {
    cursor: pointer;

    &.arrow {
        background-color: var(--red01);
        width: 50px;


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

    @media screen and (max-width: 768px) {
        &.arrow {
            width: 40px;
        }
    }

}

.prevBtn {
    transform: rotate(180deg);
}








/*******************************************
modal(common)
*******************************************/

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

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


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

/* 背景 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 1000;
    transition: var(--transition01);
    overflow: auto;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;

    &::before {
        position: fixed;
        content: "";
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        opacity: .7;
        background-color: var(--beige01);
        z-index: 0;
    }
}

/* 開く時 */
.modal.active {
    opacity: 1;
    pointer-events: all;
    visibility: visible;

    .modal__inner,
    .modalItem-outer {
        opacity: 1;
        pointer-events: all;
        visibility: visible;
    }
}

/* モーダル箱の最大幅 */
.modal__inner {
    position: relative;
    width: min(100%, 1100px);
    margin: 0 auto;
    padding: clamp(70px, 10.4vw, 150px) 0;

    @media screen and (max-width:1260px) {
        padding-left: var(--responsivePadding) !important;
        padding-right: var(--responsivePadding) !important;
    }
}


/* 非表示の時触れないように */
.modal__inner,
.modalItem-outer {
    position: relative;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: var(--transition01);
}

.modalItem-outer {
    background-color: var(--white);
    padding: max(var(--size90), 40px) 0 clamp(50px, 9.375vw, 135px);
    border-radius: var(--radius30);
}

.modalItem {
    width: 100%;
}

/* モーダルのコンテンツの最大幅 */
.modalItem__inner {
    width: min(90%, 950px);
    margin: 0 auto;
}


.modalClose-top {
    position: absolute;
    width: 60px;
    aspect-ratio: 1;
    top: 0;
    right: 0;
    border-radius: var(--radiusCircle);
    background-color: var(--brown01);
    z-index: 1;
    transform: translate(0, -130%);


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

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

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

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

.btn-outer-modal {
    margin: clamp(40px, 7.29vw, 105px) auto 0;

}

.modalClose-bottom {
    margin: clamp(30px, 4.51vw, 65px) auto 0;
    width: fit-content;
    font-family: var(--poppins);
    font-weight: var(--weight500);
    border-bottom: 1px solid var(--brown01);
}





/*******************************************
entry
*******************************************/
.entry {
    .section__inner {
        width: min(100%, 1320px);
        padding-top: 55px;
        padding-bottom: 0;
    }

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

        .section__inner {
            padding-left: var(--responsivePadding) !important;
            padding-right: var(--responsivePadding) !important;
        }

    }
}

.entryBox {
    position: relative;
    background-color: var(--red03);
    border-radius: var(--radius30);
    padding: max(var(--size60), 30px) max(var(--size65), 20px) max(var(--size60), 40px);
    overflow: hidden;

    &::before,
    &::after {
        position: absolute;
        content: "";
        background-image: url(../img/common/circle01-white.png);
        background-size: contain;
        background-repeat: no-repeat;
        opacity: .2;
        aspect-ratio: 1;

    }

    &::before {
        top: 0;
        right: 0;
        width: clamp(344px, 59.72vw, 860px);
        transform: translate(19%, -53%);
    }

    &::after {
        bottom: 0;
        left: 0;
        width: clamp(344px, 40.69vw, 586px);
        transform: translate(-20%, 52%);
    }
}

.entry__ttl {
    position: relative;
    font-size: var(--font58);
    font-family: var(--poppins);
    font-weight: var(--weight400);
    text-align: center;
    color: var(--white);
}

.entry__txt {
    position: relative;
    line-height: var(--lineHight168);
    font-size: var(--font19);
    text-align: center;
    color: var(--white);
    margin: 10px 0 40px;
}

.entryList-outer {
    position: relative;
    background-color: var(--white);
    padding: max(var(--size60), 30px) 30px;
    border-radius: var(--radius20);
    width: min(100%, 1160px);
    margin: 0 auto;
    z-index: 1;

    @media screen and (max-width: 1024px) {
        width: min(100%, 600px);
    }
}

.entryList {
    position: relative;
    display: flex;
    justify-content: center;

    gap: clamp(10px, 2.430vw, 35px);
    width: min(100%, 1000px);
    margin: 0 auto;

    .btn-outer {
        flex: 1;
        width: 100%;

        .arrow {
            width: max(1.17em, 15px);
        }
    }


    @media screen and (max-width: 1024px) {
        flex-direction: column;
        align-items: center;
        width: min(100%, 300px);

        .btn-outer {
            flex: initial;
        }
    }


    @media screen and (max-width:360px) {
        .btn {
            padding: 0 2em;
        }
    }
}

.entry__parts01,
.entry__parts02,
.entry__parts03 {
    position: absolute;
    width: clamp(93px, 16.18vw, 233px);
}

.entry__parts01 {
    top: 0;
    right: 0;
    transform: translate(-57%, 0%);

    @media screen and (max-width:480px) {
        transform: translate(-20%, 0%);
    }
}

.entry__parts02 {
    top: 0;
    right: 0;
    transform: translate(18%, -53%)
}

.entry__parts03 {
    left: 0;
    bottom: 0;
    transform: translate(-37%, 37%);
}

.entry__chara01 {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(93px, 16.18vw, 233px);
    transform: translate(43%, 2%);

    @media screen and (max-width: 1024px) {
        transform: translate(10%, 10%);
    }

    @media screen and (max-width: 768px) {
        width: clamp(55px, 17%, 85px);
    }

    @media screen and (max-width: 480px) {
        width: clamp(55px, 17%, 85px);
        transform: translate(20%, 10%);
    }

    @media screen and (max-width:375px) {
        width: clamp(55px, 17%, 85px);
        transform: translate(20%, 30%);
    }
}


/*******************************************
section-q
*******************************************/
.section-q {
    background-color: var(--beige05);
    background-image: radial-gradient(circle, var(--beige07) clamp(1.458px, 0.243vw, 3.5px), transparent clamp(1.458px, 0.243vw, 3.5px));

    .section__ttl {
        position: relative;
        aspect-ratio: 139/337;
        width: 3.86em;
        margin: 0;
        font-size: min(var(--font37), 36px);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: column;
        line-height: var(--lineHight140);
        gap: 0.27em;

        &::before {
            position: absolute;
            content: "";
            background-image: url(/-/top/img/common/question-ttlParts-pc.png);
            background-size: contain;
            background-repeat: no-repeat;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
        }

        .ja,
        .en {
            writing-mode: vertical-rl;
            transform: none;
        }

        .ja {
            position: relative;
            transform: translateY(-0.5em);
            margin: 0;
        }

        .en {
            position: absolute;
            top: 0;
            left: 0;
            font-size: var(--font21);
            transform: translate(70%, 95%);
        }
    }

    .sectionTtl-parts01 {
        position: absolute;
        bottom: 0;
        left: 0;
        width: clamp(100px, 19.79vw, 285px);
        transform: translate(-99%, 52%);
    }


    @media screen and (max-width: 1300px) {
        .sectionTtl-parts01 {
            width: clamp(100px, 19.79vw, 285px);
            transform: translate(-50%, 105%);
        }
    }

    @media screen and (max-width: 1024px) {
        .sectionTtl-parts01 {
            width: clamp(100px, 19.79vw, 285px);
            transform: translate(-25%, 105%);
        }
    }

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

        .section__inner {
            padding-top: clamp(60px, 16vw, 100px);
        }



        .section__ttl {
            margin: 0 auto;
            aspect-ratio: initial;
            width: 100%;
            gap: 0px;

            &::before {
                background-image: url(../img/common/question-ttlParts-sp.png);
                transform: translate(-52%, -53%);
                aspect-ratio: 337/138;
                width: max(50%, 250px);
                height: auto;
                background-position: center;
            }

            .ja,
            .en {
                writing-mode: initial;
            }

            .ja {
                transform: initial;
            }

            .en {
                position: relative;
                inset: 0;
                transform: initial;
            }
        }

        .sectionTtl-parts01 {
            width: max(13vw, 55px);
            transform: translate(20%, 60%);
        }
    }

    @media screen and (max-width: 400px) {
        .sectionTtl-parts01 {
            transform: translate(-20%, 60%);
        }
    }

    @media screen and (max-width: 370px) {
        .sectionTtl-parts01 {
            transform: translate(-34%, 69%);
        }
    }

}

.section-q__flex {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: min(100%, 992px);
    margin-left: auto;
    gap: max(var(--size90), 20px);

    @media screen and (max-width: 900px) {
        flex-direction: column;
        gap: clamp(45px, 12vw, 80px);
    }
}

.q-detail {
    position: relative;
    flex: 1;

    @media screen and (max-width: 900px) {
        flex: none;
    }
}

.q-detail__item {
    background-color: var(--white);
    padding: 35px 30px 35px 45px;
    margin-bottom: 20px;
    border-radius: var(--radius20);
    font-size: var(--font23);


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

    dt {
        font-size: 1em;
    }

    .plus {

        &::before,
        &::after {
            position: absolute;
            content: "";
            top: 50%;
            right: 0%;
            width: 1.086em;
            height: 3px;
            background-color: var(--red06);

        }
    }

    .icon-q {
        line-height: 1.521;
        text-align: left;
        font-size: 1em;
        max-width: 26em;

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

    dd {
        opacity: 0;
        transition: var(--transition01);
    }

    .dd-inner {
        padding-top: 10px;
        padding-left: 1.538em;

        p {
            font-size: 14px;
        }
    }

    &.open {
        dd {
            opacity: 1;
        }

    }


    @media screen and (max-width: 900px) {
        padding: 30px 30px 30px 20px;
    }

    @media screen and (max-width: 480px) {
        padding: 20px 15px;

        .plus {

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

        .icon-q {
            line-height: 1.4;
            max-width: initial;
            width: 92%;
        }

        .dd-inner {
            padding-left: 0;
        }
    }
}





/*******************************************
footer
*******************************************/
.footer {
    font-size: var(--font15);

    .section__inner {
        padding: clamp(60px, 13.02vw, 100px) 0 calc(clamp(40px, 6.597vw, 95px) + 30px);
        width: min(100%, 1300px);
    }

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

    @media screen and (max-width:1024px) {
        .section__inner {
            padding-bottom: 150px;
        }
    }
}

.footerFlex {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: min(7.29vw, 105px);

    @media screen and (max-width:1380px) {
        gap: max(5vw, 20px);
    }

    @media screen and (max-width:1100px) {
        flex-direction: column;
        gap: clamp(40px, 10.6vw, 40px);
    }
}

.footerLeft {
    width: clamp(200px, 20.83vw, 300px);

    @media screen and (max-width:1100px) {
        width: min(100%, 600px);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        gap: 30px;

    }

    @media screen and (max-width:768px) {
        width: min(100%, 300px);
        flex-direction: column;
    }

    @media screen and (max-width:480px) {
        width: min(100%, 200px);
    }
}

.footer__logo {
    margin-bottom: max(var(--size65), 30px);

    @media screen and (max-width:1100px) {
        margin: 0;
        flex-basis: 55%;
    }

    @media screen and (max-width:768px) {
        flex-basis: initial;
    }
}

.btn-outer-footer {
    width: min(96.67%, 290px);

    @media screen and (max-width:1100px) {
        width: 100%;
        flex-basis: 45%;
    }

    @media screen and (max-width:768px) {
        flex-basis: initial;
    }
}


.footerRight {
    flex: 1;
}

.footerRight__box {
    border-bottom: 1px solid var(--brown04);

    &:last-child {
        border: none;
    }

    @media screen and (max-width:1100px) {
        margin: 0 auto;
    }
}

.footerNav {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: max(var(--size50), 15px);

    .mark-circle01 {
        &::before {
            color: var(--red04);
        }
    }

    @media screen and (max-width:1380px) {
        gap: max(2.17vw, 15px);
    }


    @media screen and (max-width:700px) {
        flex-wrap: wrap;
    }
}

.footerNav-sub {
    font-size: var(--font12);
    margin-top: 5px;

    li {
        margin-bottom: 5px;
        color: var(--brown03);

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

.change-page-footer {
    margin-top: 30px;
    padding-bottom: 20px;


    &::first-letter {
        font-size: 0.8em;
        line-height: 1;
    }
}

.footer__lastFlex {
    margin: max(var(--size40), 20px) 0 max(var(--size70), 40px);
    display: flex;
    justify-content: space-between;
    align-items: center;

    @media screen and (max-width:600px) {
        flex-direction: column;
        gap: 30px;
    }
}

.privacy-policy {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    font-weight: var(--weight500);

    a {
        position: relative;
        display: block;

        &::before {
            position: absolute;
            content: "/";
            right: -10px;
            top: 0;
            transform: translateX(50%);
        }

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

    @media screen and (max-width:480px) {
        flex-wrap: wrap;
        justify-content: center;
    }

    @media screen and (max-width:420px) {
        width: min(100%, 300px);
        gap: 10px;

        a {
            &::before {
                display: none;
            }
        }
    }

}


.snsList-footer {
    width: min(100%, 90px);

    @media screen and (max-width:600px) {
        margin: 0 auto;
    }
}





.copyright {
    font-size: var(--font13);
    text-align: right;

    @media screen and (max-width:600px) {
        text-align: center;
    }
}


/*******************************************
固定ページ（welfare,career）
*******************************************/
.welfare,
.career {
    main {
        background-color: var(--beige06);
    }

    .breadcrumb {
        .section__inner {
            width: min(87.5%, 1260px);
        }
    }
}

.page-mv {
    position: relative;
}

.page-mv__parts01 {
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(100px, 50.0347vw, 800px);

    @media screen and (max-width:768px) {
        width: 70vw;
    }
}


.page-mv__inner {
    position: relative;
    width: min(87.5%, 1260px);
    margin: 0 auto;
    padding-top: calc((var(--headerHeight)) + var(--size90));
    padding-bottom: var(--size80);
    border-bottom: 5px solid var(--brown01);

    @media screen and (max-width:768px) {
        border-bottom: 3px solid var(--brown01);
        padding-bottom: 0;
    }
}

.page-mv__ttl {
    font-size: min(2.916vw, 42px);

    .en {
        font-size: 0.5714em;
    }

    .ja {
        margin-top: 0.5em;
    }

    @media screen and (max-width:768px) {
        font-size: 8vw;
        margin-bottom: 1em;
    }
}

.page-mv__chara01 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(26.076vw, 375.5px);

    @media screen and (max-width:768px) {
        position: relative;
        inset: 0;
        width: 40vw;
        margin-left: auto;
    }
}

.page-btn {
    .section__inner {
        padding: max(var(--size60), 30px) 0 0;
    }
}

.page-btn__list {
    --page-btn-width: calc((100% - (var(--page-btn-gap)*4))/5);
    --page-btn-gap: 20px;

    display: flex;
    justify-content: center;
    gap: var(--page-btn-gap);

    li {
        height: 76px;
        width: var(--page-btn-width);

        .btn {
            font-size: var(--font19);
            letter-spacing: 0;
            line-height: 1.315;
            padding: 0 1.5em;
        }

        .arrow {
            width: 1.05em;
        }
    }

    @media screen and (max-width:1100px) {
        --page-btn-width: calc((100% - (var(--page-btn-gap)*2))/3);

        flex-wrap: wrap;
    }

    @media screen and (max-width:768px) {
        --page-btn-gap: 10px;

        li {
            height: 60px;
        }
    }

    @media screen and (max-width:600px) {
        --page-btn-width: calc((100% - var(--page-btn-gap))/2);
    }

    @media screen and (max-width:400px) {
        --page-btn-width: 100%;

        width: min(100%, 250px);
        margin: 0 auto;
    }
}