@charset "utf-8";

/* 色の変数　　color: var(--blue); */
:root {
    --white: #fff;
    --white02: rgba(255, 255, 255, 0.5);
    --black: #000;
    --red01: #e42129;
    --blue01: #065196;
    --blue02: #11215f;
    --yellow01: #f3981c;
    --brown01: #d3b073;
    --brown02: #8e804d;
    --brown03: rgba(212, 205, 188, 0.2);
    --brown04: #f6f4ee;
    --gray: #e9e9e9;


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

    /* 書式 */
    --zenMaru: "Zen Maru Gothic", sans-serif;
    --notoSans: "Noto Sans JP", sans-serif;
    --josefin: "Josefin Sans", sans-serif;

    /* 文字サイズ */
    --font19: 1.9rem;
    --font20: 2rem;
    --font21: 2.1rem;
    --font29: 2.9rem;
    --font30: 3.0rem;
    --font32: 3.2rem;
    --font45: 4.5rem;

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

    /* 行間 */
    --lineHight168: 1.68;
    --lineHight175: 1.75;
    --lineHight20: 2.0;

    /* 文字間 */
    --fontSpace050: 0.05em;
    --fontSpace120: 0.12em;
    --fontSpace250: 0.25em;

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

    /* 角丸の変数　 */
    --borderRadius01: 500px;
    --borderRadius10: 10px;
    --borderRadius19: 19px;
    --borderRadius20: 20px;
    --borderRadius30: 30px;
    --borderRadiusCircle: 50%;

    --opacity07: .7;

}




@media screen and (max-width: 1024px) {
    :root {
        --font19: 1.7rem;
        --font20: 1.8rem;
        --font21: 1.9rem;
        --font29: 2.5rem;
        --font30: 2.7rem;
        --font32: 2.8rem;
        --font45: 4rem;
    }
}


@media screen and (max-width: 768px) {
    :root {
        --font19: 1.6rem;
        --font20: 1.7rem;
        --font21: 1.8rem;
        --font29: 2.3rem;
        --font30: 2.4rem;
        --font32: 2.5rem;
        --font45: 3.5rem;



        --opacity07: 1;
    }


}

@media screen and (max-width: 480px) {
    :root {
        --font19: 1.5rem;
        --font20: 1.6rem;
        --font21: 1.7rem;
        --font29: 2rem;
        --font30: 2.1rem;
        --font32: 2.2rem;
        --font45: 3rem;


        --borderRadius19: 9px;
        --borderRadius20: 10px;
        --borderRadius30: 15px;
    }
}



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

body {
    color: var(--black);
    font-family: var(--zenMaru);
    font-weight: var(--weight500);
    font-size: var(--font19);
}

p {
    text-align: justify;
    font-size: var(--font19);
    line-height: var(--lineHight175);
}

.section {
    position: relative;
}

.section__inner {
    position: relative;
    width: min(100%, 1200px);
    margin: 0 auto;
    padding: clamp(40px, 5.5%, 85px) 0 clamp(85px, 22.5%, 355px);
}

.section__ttl {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 42px;

    .en {
        font-size: 3.38em;
        font-family: var(--josefin);
        font-weight: 300;
        line-height: 1;
    }

    .ja {
        line-height: 1.42;
        letter-spacing: var(--fontSpace250);
        margin-top: -20px;
    }
}

.section__topBgBox {
    position: relative;
    width: 100%;
    height: 355px;
    padding: clamp(40px, 7%, 110px) 0 0;

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/search/bg-ttl.png);
        background-repeat: repeat-y;
        background-size: 100%;
        background-position: top;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 100%;
    }
}

.marker {
    background: linear-gradient(transparent 90%, var(--yellow01) 90%);
    padding-bottom: 5px;
}

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

.block768,
.block1024 {
    display: none !important;
}

.push {
    display: inline-block;
}

.lineBox {
    position: absolute;
    left: 50%;
    bottom: -1.2%;
    width: min(126%, 1991px);
    transform: translateX(-51.9%);
    z-index: 1;
}

.railBox {
    position: relative;
}

.train {
    position: absolute;
    bottom: 9%;
    right: 1%;
    width: 35.661%;
}

.arrowBox {
    position: absolute;
    bottom: 0;
    right: 20px;
    transform: translateY(50%);
    width: clamp(25px, 17.03%, 62px);
    aspect-ratio: 1;

    .arrow {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--white);
        border: 1px solid var(--black);
        border-radius: var(--borderRadiusCircle);

        &::before {
            position: absolute;
            content: "";
            background-image: url(../img/common/arrow-red.svg);
            background-repeat: no-repeat;
            background-size: contain;
            width: 41.94%;
            aspect-ratio: 26/31;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
        }
    }
}

.arrowBox-yellow {
    .arrow {
        &::before {
            background-image: url(../img/common/arrow-yellow.svg);
        }
    }
}

.arrowBox-blue {
    .arrow {
        &::before {
            background-image: url(../img/common/arrow-blue.svg);
        }
    }
}

.color-red {
    color: var(--red01);
}

.color-blue {
    color: var(--blue01);
}

.color-yellow {
    color: var(--yellow01);
}


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

    .section__inner,
    .section__topBgBox {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .section__topBgBox {
        height: 300px;
    }

    .section__ttl {
        font-size: 35px;

    }
}


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

    .block1024 {
        display: block;
    }

    .none1024 {
        display: none;
    }


    .section__topBgBox {
        height: 250px;
    }

    .section__ttl {
        font-size: 30px;

        .ja {
            margin-top: -10px;
        }

    }

}

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

    .none768 {
        display: none;
    }

    .block768 {
        display: block;
    }

    .lineBox {
        left: auto;
        right: 0;
        bottom: -2.5%;
        width: 230%;
        transform: translateX(21.5%)
    }

    .section__topBgBox {
        aspect-ratio: 375/119.5;
        height: auto;
        padding: 10% 0 0;

        &::before {
            background-repeat: repeat;
            background-size: 133%;
        }
    }

    .section__ttl {
        font-size: 3.46vw;
    }
}

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

    .none480 {
        display: none;
    }

    .section__ttl {
        /* font-size: 13px; */

        .en {
            font-size: 3.846em;
            margin-bottom: 2px;
        }
    }
}

/* 1920以上 */
@media screen and (min-width:1920px) {
    .lineBox {
        width: 100%;
        transform: translateX(-50%);
    }
}



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

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

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

        .arrow-line {
            span {
                width: 60%;

                &::before,
                &::after {
                    opacity: 1;
                }

                &::before {
                    transform: translateY(-50%) rotate(45deg);
                    transform-origin: bottom right;
                }

                &::after {
                    transform: translateY(-50%) rotate(-45deg);
                    transform-origin: top right;
                }
            }
        }
    }
}

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

.btn-yellow {
    background-color: var(--yellow01);
}

.btn-blue {
    background-color: var(--blue01);
}

.arrow-line {
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    width: min(7.84%, 32px);
    height: 1px;
    transform: translateY(-50%);


    span {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--white);
        transition: var(--transitionBase02);


        &::before,
        &::after {
            position: absolute;
            content: "";
            top: 50%;
            right: 0;
            background-color: var(--white);
            width: 70%;
            height: 1px;
            transition: var(--transitionBase02);
            transform: translateY(-50%);
            opacity: 0;
        }

    }
}




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

    .btn {
        &:hover {
            .arrow-line {
                span {
                    width: 100%;
                }
            }
        }
    }

    .arrow-line {
        span {

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



/*******************************************
entryBtnBox
*******************************************/
.entryBtnBox-fixed {
    position: fixed;
    bottom: 50%;
    transform: translateY(50%);
    right: 0;
    z-index: 10;
    width: min(100%, 70px);
}

.entryBtn01 {
    width: 100%;
    aspect-ratio: 70/220;
    margin-bottom: 15px;

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

    a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        writing-mode: vertical-rl;
        width: 100%;
        height: 100%;
        font-size: var(--font21);
        color: var(--white);
        letter-spacing: var(--fontSpace050);
        transition: var(--transitionBase01);
        font-weight: var(--weight700);

        &::before {
            position: absolute;
            content: "";
            background-image: url(../img/common/frame01.png);
            background-size: contain;
            background-repeat: no-repeat;
            width: 100%;
            aspect-ratio: 70/220;
            z-index: -1;
        }

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


}

@media screen and (max-width:1024px) {
    .entryBtnBox-fixed {
        width: min(100%, 50px);
    }

    .entryBtn01 {
        a {
            font-size: 15px;
        }
    }
}

@media screen and (max-width:768px) {
    .entryBtnBox-fixed {
        width: min(100%, 500px);
        bottom: 0;
        right: 50%;
        transform: translateX(50%);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 10px;
        opacity: 0;
        visibility: hidden;
        transition: var(--transitionBase01);

        &.show {
            opacity: 1;
            visibility: visible;
        }
    }

    .entryBtn01 {
        height: 50px;
        aspect-ratio: inherit;
        margin: 0;
        width: calc((100% - 10px)/2);

        a {
            writing-mode: initial;
            background-color: var(--black);

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


@media screen and (max-width:374px) {
    .entryBtnBox-fixed {
        gap: 5px;
    }

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



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

.topReturn {
    position: fixed;
    bottom: 2%;
    right: 2%;
    width: clamp(40px, 4.732%, 100px);
    opacity: 0;
    visibility: hidden;
    z-index: 90;
    transition: var(--transitionBase01);

    &.show {
        opacity: 1;
        visibility: visible;
    }


    a {
        display: inline-block;
        width: 100%;
        height: 100%;
        transition: var(--transitionBase01);

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

}

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

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



/*******************************************
header
*******************************************/
.hamburger {
    display: none;
}

.header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 95;
    transition: var(--transitionBase02);
}

/* ヘッダーを隠すクラス */
.fade-header--hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
}

.header__inner {
    position: relative;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: clamp(700px, 63%, 987px);
    margin: 0 auto;
    padding: max(2.21%, 20px) 10px max(1.4%, 18px);
    border-radius: 0 0 var(--borderRadius20) var(--borderRadius20);
    transition: var(--transitionBase01);
}

.logo__list {
    width: min(100%, 710px);
    display: grid;
    gap: 10.1%;
    grid-template-columns: 205fr 193fr 168fr;

    & a {
        transition: var(--transitionBase01);

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

.headerNav {
    margin: max(2.06%, 10px) 0 0;
}

.headerNav__list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
}

.headerNav__item {
    a {
        font-size: var(--font21);
        transition: var(--transitionBase01);
        font-weight: var(--weight600);
        font-family: var(--notoSans);

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

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



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

    .header.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }


    .header__inner {
        width: min(98.6%, 500px);
        padding: clamp(5px, 3.5%, 20px) clamp(5px, 5.5%, 30px);
    }

    .logo__list {
        gap: 5.8%;
    }

    .headerNav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: var(--white02);
        margin: 0;
        opacity: 0;
        visibility: hidden;
        transition: var(--transitionBase01);
    }

    .headerNav__list {
        width: clamp(241px, 64.4%, 300px);
        height: 100%;
        margin-left: auto;
        background-color: var(--white);
        flex-direction: column;
        /* color: var(--red01); */
        font-size: 16.7px;
        letter-spacing: var(--fontSpace120);
        align-items: flex-start;
        justify-content: flex-start;
        padding: clamp(20px, 23vh, 120px) 0 0 clamp(15px, 11%, 40px);
        gap: 0;
    }

    .headerNav__item {
        margin-bottom: clamp(10px, 4vh, 20px);

        &:nth-child(n+5) {
            margin-bottom: 0;
        }

        a {
            position: relative;
            font-weight: var(--weight500);
            font-family: var(--zenMaru);
        }
    }

    .headerNav__item:not(.headerNav__item--entry) {
        a {
            padding-left: 1.3em;


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

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

    .headerNav__item--entry {
        display: block !important;
        width: 100%;
        margin-top: clamp(15px, 8vh, 40px);

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

    .header-btn {
        width: min(100%, 155px);
        height: 41.8px;
        margin-bottom: clamp(5px, 3vh, 15px);

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

        .btn {
            font-size: 12.536px;
            letter-spacing: var(--fontSpace050);
            border-radius: 0;
            font-weight: var(--weight900);

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




    .hamburger {
        /* opacity: 0; */
        display: block;
        position: fixed;
        right: min(5.333333333333334vw, 20px);
        top: min(5.333333333333334vw, 20px);
        width: 45px;
        aspect-ratio: 1;
        border-radius: var(--borderRadiusCircle);
        cursor: pointer;
        z-index: 100;
        transition: all 0.65s ease-in-out;
        background-color: var(--black);

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

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

            &:nth-of-type(2) {
                top: 50%;
            }

            &:nth-of-type(3) {
                top: 65%;
            }
        }

        &.fade-header--active {
            transform: translateY(70%);
        }
    }




    .active {

        .line {

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

            &:nth-of-type(2) {
                opacity: 0;
            }

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

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

}

@media screen and (max-width: 374px) {
    .hamburger {
        &.fade-header--active {
            transform: translateY(55%);
        }
    }
}


/*******************************************
mv
*******************************************/
.mv {
    position: relative;
}

.mv__txt {
    position: absolute;
    width: 72.178%;
    bottom: 17.7%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

/* 画面幅が広くなった時に上へずらしたい場合 */
/* @media screen and (min-width: 1601px) {
    .mv__txt {
        bottom: calc(17.7% + (100vw - 1600px) * 1);
    }
} */





@media screen and (max-width:768px) {
    .mv__txt {
        width: 94.444%;
        bottom: 8.5%;
    }
}






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

.search {

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


.searchBox {
    margin-bottom: max(7.5%, 45px);

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

.searchBox__ttl {
    position: relative;
    width: fit-content;
    margin: 0 auto max(3.3%, 25px);
    font-size: var(--font32);
    font-weight: var(--weight700);

    &::before {
        position: absolute;
        content: "";
        top: 50%;
        left: 0;
        width: 0.6em;
        aspect-ratio: 1;
        background-image: url(../img/search/icon01.svg);
        transform: translate(-130%, -40%);
    }
}

.searchBox__ttl02::before {
    width: 1.2em;
    aspect-ratio: 38.5/21.5;
    background-image: url(../img/search/icon02.svg);
}

.searchBoxBtn__list {
    display: flex;
    justify-content: space-between;
    width: min(100%, 899px);
    margin: 0 auto;

    .btn-outer {
        width: calc((100% - 45px)/2);
        height: 90px;

        .btn {
            position: relative;
            font-size: var(--font30);
            color: var(--black);

            .txt {
                display: inline-block;
                padding-left: 1em;
            }

            &::before {
                position: absolute;
                content: "";
                top: 50%;
                left: 8%;
                width: 2.13em;
                aspect-ratio: 64/58;
                background-image: url(../img/search/food01.png);
                background-size: contain;
                background-repeat: no-repeat;
                transform: translateY(-50%);
                z-index: 1;
            }

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

                    &::before,
                    &::after {
                        background-color: var(--black);
                    }
                }
            }
        }


        &:nth-child(2) {

            .btn::before {
                background-image: url(../img/search/food02.png);
            }

        }
    }
}

.searchImg__list {
    display: flex;
    justify-content: space-between;
}

.searchImg__item {
    width: calc((100% - 100px)/3);

    &:nth-child(2) {
        .searchImg__detail {
            dd {
                .img {
                    width: 77.21%;
                }
            }
        }
    }

    &:nth-child(3) {
        .searchImg__detail {
            dd {
                .img {
                    width: 66.92%;
                }
            }
        }
    }
}

.searchImg__link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    border: 1px solid var(--black);
    border-radius: var(--borderRadius20);
    transition: var(--transitionBase01);

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

.searchImg__detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;

    dt {
        img {
            border-radius: var(--borderRadius19) var(--borderRadius19) 0 0;
        }
    }


    dd {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 25px 20px 40px;
        height: 100%;

        .txt {
            font-size: var(--font20);
            text-align: center;
            line-height: 1.35;
            letter-spacing: -0.05em;
            margin-bottom: 1em;
            flex-grow: 1;
            display: flex;
            align-items: center;
        }

        .img {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 91.8%;
            flex-grow: 1;
        }
    }
}

.lineBox-search {
    bottom: -2%;

    .train {
        right: auto;
        left: 1.5%;
        width: 38.23%;
        bottom: 7.5%;
    }
}

@media screen and (max-width: 1024px) {
    .searchImg__item {
        width: calc((100% - 50px)/3);
    }
}

@media screen and (max-width: 768px) {
    .searchBoxBtn__list {
        flex-direction: column;
        width: max(58.13%, 186px);
        min-width: 300px;
        gap: 10px;

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

    .searchImg__list {
        width: min(100%, 500px);
        margin: 0 auto;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px 13px;
    }

    .searchImg__item {
        width: calc((100% - 13px)/2);

        .arrowBox {
            right: 11px;
        }
    }

    .searchImg__detail {
        dd {
            padding: 13px 11px max(16%, 20px);
        }
    }
}


@media screen and (max-width: 480px) {
    .searchBox__ttl {
        font-size: 13px;
    }

    .searchBoxBtn__list {
        min-width: initial;

        .btn-outer {
            height: 40px;

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


    .searchImg__detail {
        dd {
            .txt {
                font-size: max(2.1vw, 8px);
                margin-bottom: 10px;
            }

            .img {
                width: 81.6%;
            }
        }
    }

    .lineBox-search {
        width: 175%;
    }
}



/*******************************************
introduction
*******************************************/
.introduction {
    .section__topBgBox {
        &::before {
            background-image: url(../img/Introduction/bg-ttl.png);
        }
    }

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

    .section__inner {
        padding-bottom: clamp(100px, 19%, 300px);
    }
}

.introduction-bg {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: max(100%, 1100px);
}

.introduction__list {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: min(100%, 1020px);
    margin: 0 auto;
}

.introduction__item {
    position: relative;
    margin-bottom: max(18.14%, 50px);
    z-index: 1;

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

.introduction__imgBox {
    margin-bottom: max(3.5%, 20px);
    display: flex;
    flex-direction: column;
    align-items: center;

    .topImg {
        transform: translateX(-3%);
    }

    .mainImg {
        width: 67.1%;
    }
}

.introduction__txtBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: max(3.92%, 15px);

    .ttl {
        font-size: var(--font45);
        line-height: 1.26;
        margin-bottom: max(0.777em, 15px);
        font-weight: var(--weight500);
        text-align: center;
    }

    .txt {
        text-align: center;
        line-height: var(--lineHight168);
    }
}



.btn-outer-introduction {
    width: min(100%, 408px);
    margin: 0 auto;
}


.introduction__parts-a01 {
    position: absolute;
    width: min(15.44vw, 247px);
    top: 18%;
    left: -19%;
}

.introduction__parts-a02 {
    position: absolute;
    width: min(12vw, 190px);
    bottom: -2%;
    right: -16%;
}

.introduction__parts-b01 {
    position: absolute;
    width: min(15vw, 230px);
    top: 26%;
    left: -19%;
}

.introduction__parts-b02 {
    position: absolute;
    width: min(16.8vw, 268px);
    bottom: 7%;
    right: -18%;
}

.introduction__parts-c01 {
    position: absolute;
    width: min(12.1vw, 193px);
    top: 25%;
    left: -13%;
}

.introduction__parts-c02 {
    position: absolute;
    width: min(19.1vw, 305px);
    bottom: -11.5%;
    right: -15%;
}

.introduction__parts-c03 {
    position: absolute;
    width: min(22vw, 341px);
    bottom: 0.4%;
    left: 6%;
}

@media screen and (max-width: 1300px) {
    .introduction__parts-left {
        left: 0;
        transform: translateX(-50%);
    }

    .introduction__parts-right {
        right: 0;
        bottom: -10%;
        transform: translateX(30%);
    }
}

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

    .introduction__parts-left {
        transform: translateX(-110%);
    }

    .introduction__parts-right {
        right: 0;
        bottom: -10%;
        transform: translateX(100%);
    }
}

@media screen and (max-width: 768px) {
    .introduction__list {
        width: min(96.4%, 500px);
    }

    .introduction__item {
        padding-bottom: 43.5%;
    }

    .introduction__imgBox {
        .topImg {
            transform: none;
        }

        .mainImg {
            width: 93.76%;
        }
    }

    .introduction__parts-left {
        top: auto;
        left: 0;
        bottom: 0;
        transform: none;
    }

    .introduction__parts-right {
        right: 0;
        bottom: 0;
        transform: none;
    }

    .introduction__parts-a01 {
        width: 33%;
    }

    .introduction__parts-a02 {
        width: 26%;
    }

    .introduction__parts-b01 {
        width: 34%;
    }

    .introduction__parts-b02 {
        width: 47%;
    }

    .introduction__parts-c01 {
        width: 28.5%;
    }

    .introduction__parts-c02 {
        width: 42.4%;
        bottom: -6%;
        right: -7%;
    }

    .introduction__parts-c03 {
        display: none;
    }

    .btn-outer-introduction {
        width: clamp(180px, 68.4%, 408px);
        margin: 0 auto;
    }
}

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

    .introduction {
        .section__inner {
            padding-bottom: 19%;
        }
    }

    .introduction__txtBox {
        .ttl {
            font-size: 23px;
        }


    }

    .btn-outer-introduction {
        .btn {
            padding: 0 7.84%;
            text-align: center;
        }
    }

    .introduction-bg {
        width: 100%;
        z-index: 1;
    }
}



@media screen and (max-width: 375px) {
    .introduction__txtBox {
        .ttl {
            font-size: 19px;
        }

        .txt {
            font-size: 12px;
        }
    }

    .btn-outer-introduction {
        .btn {
            font-size: 12px;
        }
    }
}


/*******************************************
merit
*******************************************/
.merit {
    background-color: var(--brown03);

    .section__inner {
        width: min(100%, 1225px);
        padding-bottom: clamp(40px, 7%, 100px);
    }

    .section__topBgBox {
        &::before {
            background-image: url(../img/merit/bg-ttl.png);
        }
    }

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

.merit-barBox {
    position: relative;

    &:last-child {
        margin-top: 40px;
    }
}

.merit-bar {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    line-height: 0;
}

.meritSwiperBox {
    position: relative;
}

.meritSwiper {
    width: min(95%, 1061px);

}

.meritSwiper__list {

    .swiper-slide {
        height: auto;
        display: flex;
        flex-direction: column;
    }
}

.noren-list {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.noren-box {
    width: calc((100% - 20px)/3);

    color: var(--white);
    position: relative;
    padding-top: 35px;

    &::before,
    &::after {
        position: absolute;
        content: "";
        top: 0;
        background-color: var(--blue02);
        width: 22px;
        height: 40px;
    }

    &::before {
        left: 0;
    }

    &::after {
        right: 0;
    }
}

.meritSwiper__detail {
    padding: 65px 22px 90px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--blue02);
    border-radius: 0 0 var(--borderRadius30) 0;


    dt {
        font-size: var(--font29);
        letter-spacing: 0.08em;
        margin-bottom: 25px;
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 1.517;
        max-height: 3em;
        text-align: center;
        font-weight: 500;
    }

    dd {
        font-size: var(--font19);
        line-height: var(--lineHight168);

    }
}

.nextBtn-merit,
.prevBtn-merit {
    display: none;
}



@media screen and (max-width: 1265px) {
    .merit {

        .section__inner {
            padding-left: 20px !important;
            padding-right: 20px !important;
        }

    }
}

@media screen and (max-width: 1024px) {
    .merit-bar {
        width: 115%;
    }

    .meritSwiper {
        overflow: visible;
        width: min(74.3%, 350px);

    }

    .meritSwiper__list {
        gap: 0;
        justify-content: initial;

        .swiper-slide {
            display: flex !important;
            width: auto;
            padding-top: 16px;
        }
    }


    .meritSwiper__detail {
        padding: min(14%, 35px) max(10px, 7%, 18px) min(26%, 65px);

        dt {
            margin-bottom: clamp(5px, 10%, 20px);
        }
    }

    .noren-box {

        &::before,
        &::after {
            width: 16px;
            height: 25px;
        }
    }


    .nextBtn-merit,
    .prevBtn-merit {
        display: block;
        position: absolute;
        top: 50%;
        bottom: auto;
        right: auto;
        z-index: 3;
        cursor: pointer;
        width: 14.5%;
    }

    .prevBtn-merit {
        left: 0;
        transform: translate(-75%, -50%) rotate(180deg);
    }

    .nextBtn-merit {
        right: 0;
        transform: translate(75%, -50%);
    }
}


@media screen and (max-width: 375px) {
    .meritSwiper__detail {

        dd {
            font-size: 13px;
        }
    }
}


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

    .meritSwiper {
        width: 90%;
    }


    .meritSwiper__detail {

        dd {
            font-size: 13px;
        }
    }
}





/*******************************************
access
*******************************************/
.access {
    .section__inner {
        padding: clamp(50px, 10%, 155px) 0 clamp(100px, 24%, 380px);
    }
}

.access-bg {
    position: absolute;
    bottom: 0;
    left: 0;
}

.accessBox {
    background-color: var(--brown04);
    display: flex;
    align-items: center;
    padding: 15px 5px 15px 0;

    .img {
        width: min(57%, 649px);
    }
}

.access__detail {
    font-size: 33px;
    margin: 0 0 0 25px;
    padding-top: 0.5em;

    dt {
        position: relative;
        margin-bottom: 15px;
        padding-left: 1em;


        &::before {
            position: absolute;
            content: "";
            background-image: url(../img/access/icon.svg);
            aspect-ratio: 27/36;
            background-repeat: no-repeat;
            background-size: contain;
            width: 0.836em;
            left: 0;
            bottom: 0ï;
        }
    }

    dd {
        font-size: 0.736em;
        line-height: var(--lineHight168);
    }
}

.btn-outer-access {
    width: min(100%, 480px);
    height: 118px;
    margin: clamp(40px, 12%, 140px) auto 0;

    .arrow-line {


        span {
            background-color: var(--black);

            &::before,
            &::after {
                background-color: var(--black);
            }
        }
    }

    .txt {
        display: flex;
        align-items: center;
        flex-direction: column;
        font-size: 49px;
    }

    .ja {
        color: var(--black);
        font-size: max(0.46em, 11px);
    }
}

@media screen and (max-width: 768px) {
    .access {
        .section__inner {
            padding-bottom: 68%;
        }
    }

    .accessBox {
        flex-direction: column;
        padding: 0 0 30px;

        .img {
            width: max(60%, 200px);
        }
    }

    .access__detail {
        padding: 0;
        margin: 0;
        font-size: 25px;
    }

    .btn-outer-access {
        width: clamp(200px, 59%, 480px);
        height: auto;
        aspect-ratio: 200 / 49;

        .txt {
            font-size: max(5vw, 20px);
        }
    }
}

@media screen and (max-width: 480px) {
    .access__detail {
        font-size: 20px;
    }
}

@media screen and (max-width: 374px) {
    .access__detail {
        font-size: 17px;

        dt {
            margin-bottom: 5px;
        }
    }
}



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

.footer {
    background-color: var(--red01);
    padding: 50px 0;
    position: relative;
    font-size: var(--font19);
    color: var(--white);
    font-weight: var(--weight500);
    overflow: hidden;
    letter-spacing: var(--fontSpace050);


    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/common/footer-bg-pc.png);
        background-repeat: repeat;
        background-size: min(100%, 1600px);
        width: 100%;
        height: 100%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }
}

.footer-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

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

    a {
        position: relative;
        z-index: 1;

        &: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 {
    position: relative;
    text-align: center;
    z-index: 1;
}

@media screen and (max-width:768px) {
    .footer {
        padding-top: 20px;
        padding-bottom: 80px;

        &::before {
            background-image: url(../img/common/footer-bg-sp.png);
        }
    }
}


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

    .footer {

        .inner {
            padding: 0 15px;
        }
    }

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


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

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

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

    .footer,
    .copyright {
        font-size: 10px;
    }
}