@charset "utf-8";

/* ========================================================
   LP用リセットCSS
   ======================================================== */

.l-main {
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    ol, ul {
        list-style: none;
    }
    
    blockquote, q {
        quotes: none;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    /* 4. リンクと画像の基本 */
    a {
        text-decoration: none;
    }
    
    img {
        max-width: 100%;
        height: auto;
        vertical-align: bottom; /* 画像下の隙間を消す */
        border-style: none;
    }
    
    /* 5. 【重要】フォーム・ボタンのリセット（今回追加・修正） */
    button,
    input,
    select,
    textarea {
        font-family: inherit; /* 親要素のフォントを引き継ぐ */
        font-size: 100%;
        margin: 0;
        border-radius: 0; /* スマホでの角丸解除 */
        -webkit-appearance: none; /* ブラウザ標準スタイル削除 */
        appearance: none;
        background-color: transparent; /* 背景透明化 */
        border: none; /* 枠線削除 */
    }
    
    /* ボタン系はカーソルを指マークに */
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        cursor: pointer;
    }
    
    /* テキストエリアのサイズ変更を縦のみ許可 */
    textarea {
        resize: vertical;
    }
    
    /* 全称セレクタでのbox-sizing（念のためここでも明記） */
    *, *::before, *::after {
      box-sizing: border-box;
    }
}




/* ========================================================
   1. Variables (CSS変数定義)
   サイト全体の共通設定です。ここを変更すれば全体に反映されます。
   ======================================================== */
:root {
    /* --- Typography: Font Family (ft_) --- */
    --ft_base: "Noto Sans", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

    /* 英語フォント */
    --ft_pop: "Poppins", sans-serif;
    --ft_osw: "Oswald", sans-serif;
    --ft_man: "Manrope", sans-serif;

    /* --- Colors (cl_) --- */
    --cl_text: #333333;
    --cl_link: var(--cl_main);
    --cl_main: #0d75d0;
    --cl_accent: #ffff00;

    /* --- Layout: Sizes (wd_) --- */
    --wd_pc: 1200px;
}

/* ========================================================
   2. Base Style (基本設定)
   ======================================================== */
html {
    font-size: 62.5%;
    /* 1rem = 10px */
}

body {
    font-family: var(--ft_base);
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--cl_text);
    background-color: #fff;
    text-align: justify;

    /* 文字詰め・レンダリング最適化 */
    font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-size-adjust: 100%;
}

/* リンク設定 */
a {
    color: var(--cl_link);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

/* 画像のレスポンシブ対応 */
img {
    max-width: 100%;
    width: 100%;
    height: auto;
    vertical-align: bottom;
    display: block;
}

/* ========================================================
   3. Layout (レイアウト共通)
   ======================================================== */

/* コンテンツ幅制限用ラッパー */
.l-inner {
    width: 83%;
    max-width: var(--wd_pc);
    margin: 0 auto;
}

/* ========================================================
   4. Utility (汎用クラス)
   ======================================================== */

/* --- Display Switching (PC/SP切り替え) --- */
@media screen and (min-width: 751px) {
    .u-pc-only {
        display: block;
    }

    .u-sp-only {
        display: none;
    }
}


/* --- Font Helpers (英語フォント指定) --- */
.u-font-en-poppins {
    font-family: var(--ft_pop);
}

.u-font-en-oswald {
    font-family: var(--ft_osw);
}

.u-font-en-manrope {
    font-family: var(--ft_man);
}

/* --- Text Alignment --- */
.u-text-center {
    text-align: center;
}

.u-text-left {
    text-align: left;
}

.u-text-right {
    text-align: right;
}

/* --- Flex Helpers (横並び)  --- */
.u-flex {
    display: flex;
}

.u-flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.u-flex_col1 {
    width: calc(100%/1);
}

.u-flex_col2 {
    width: calc(100%/2);
}

.u-flex_col3 {
    width: calc(100%/3);
}

.u-flex_col4 {
    width: calc(100%/4);
}

/* ========================================================
   5. Media Queries（1.~4.の基本code）
   ======================================================== */
@media screen and (max-width: 750px) {
    html {
        font-size: 1.333vw;
    }

    .l-inner {
        width: 90%;
    }

    .u-pc-only {
        display: none;
    }

    .u-sp-only {
        display: block
    }

    .u-flex_col2,
    .u-flex_col3,
    .u-flex_col4 {
        width: calc(100%/1);
    }

}

@media screen and (min-width: 751px) and (max-width: 1440px) {
    html {
        font-size: 0.694444vw;
    }
}


/* ========================================================
   6. Component (コンポーネントの基底)
   ======================================================== */

/* ボタンのベーススタイル */
.c-btn {
    display: block;
    position: relative;
    --cl-btn: #fff;
    background-color: #fe5f4c;
    color: var(--cl-btn);
    font-size: 2.6rem;
    font-weight: 700;
    padding: 3.5rem 9rem;
    border-radius: 10rem;
    border: 0.5rem solid;
    box-shadow: 0.6rem 0.6rem 0px var(--cl-btn);
    transition: transform 0.2s, box-shadow 0.2s;
    max-width: 54rem;
    margin: 7rem auto 0;
    letter-spacing: 0.2rem;
    
    &::after {
        content: '';
        display: block;
        width: 1.8rem;
        height: 3rem;
        position: absolute;
        right: 5rem;
        top: 50%;
        transform: translateY(-50%);
        background: var(--cl-btn);
        mask: url(../img/icon-arrow_btn.webp) no-repeat center/ contain;
    }

    &:hover {
        transform: translate(2px, 2px);
        box-shadow: 0.4rem 0.4rem 0px var(--cl-btn);
    }

        @media screen and (max-width: 750px) {
            font-size: 3.6rem;border-width: 0.4rem;max-width: 90%;box-shadow: 1rem 1.2rem 0px var(--cl-btn);

             &::after {
                width: 2.8rem;
                height: 4.4rem;
            }
        }
}

.c-note-list {
    list-style-type: none;
    padding: 0;

    & li {
        padding-left: 1.3em;
        position: relative;
        margin-bottom: 0.3em;

        &::before {
            content: attr(data-type);
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            min-width: 1em;
        }

    }
}

.c-title {
    width: 66rem;
    margin: 8rem auto 0;
    position: relative;

    &.is-ice:before {
        content: '';
        display: block;

        --ice-w: 20rem;

        width: var(--ice-w);
        height: 23rem;
        background: no-repeat center/contain;
        position: absolute;
        z-index: -1;

    }

    &.p-attraction_title:before {
        left: calc(-1 * var(--ice-w) - 2.3rem);
        background-image: url(../img/ice-dec_attraction_title.webp);
        top: 50%;
        transform: translateY(-50%);
    }

    &.p-projects_title:before {
        right: calc(-1 * var(--ice-w) - 2.3rem);
        background-image: url(../img/ice-dec_projects_title.webp);
        top: 30%;
        transform: translateY(-50%);
    }

    &.p-other__title:before {
        left: calc(-1 * var(--ice-w) - 7rem);
        background-image: url(../img/ice-dec_other_title.webp);
        top: 50%;
    }



    @media screen and (max-width: 750px) {
        width: 100vw;
        margin: 0 calc(50% - 50vw);

        &.is-ice:before {
            --ice-w: 24rem;
            height: 27.6rem;
        }

        &.p-attraction_title:before {
            left: auto;
            right: -7.2rem;
            background-image: url(../img/ice-dec_attraction_title_sp.webp);
            top: auto;
            transform: translateY(0%);
            bottom: 2rem;
        }

        &.p-projects_title:before {
            right: -1.6rem;
            top: auto;
            transform: translateY(0%);
            bottom: -1.8rem;
        }

        &.p-other__title:before {
            left: -5rem;
            top: auto;
            bottom: -16rem;
        }
    }
}


.c-slider-wrap {
    margin: 10rem auto 0;
    width: 93vw;
    margin-right: calc(50% - 50vw);

    & .swiper-wrapper {
        will-change: transform;
        transform: translateZ(0);
        backface-visibility: hidden;

        /* transition-timing-function: linear !important; */
        /* -webkit-transition-timing-function: linear !important; */
    }

    & .swiper-slide {
        background-color: #fff;
        border-radius: 2rem;
        box-sizing: border-box;
        height: auto;
        display: flex;
        flex-direction: column;
        
        &:hover .slide__thumbnail img {
            transform: scale(1.05);
        }
    }

    & .slide__title {
        font-size: 2.2rem;
        font-weight: 600;
        text-align: center;
        padding: 0rem 2.5rem;
        background: var(--cl_accent);
        color: var(--cl_main);
        width: fit-content;
        border-radius: 0.8rem;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: -1.7rem;
        transform: rotate(-10deg) translateZ(1px);
        z-index: 2;
        min-width: 7em;
    }

    & .slide__thumbnail {
        border-radius: 2rem 2rem 0 0;
        overflow: hidden;

        & img {
            transition: 0.8s transform;
            width: 100%;
            height: 100%;
            object-fit: cover;
            backface-visibility: hidden;
            transform: translateZ(0);
            will-change: transform;
        }
    }

    & .slide__text {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding: 3rem;
        font-weight: 700;
        color: var(--cl_main);
        border-radius: 0 0 2rem 2rem;

        & .arrow-left {
            position: relative;
            font-size: 1.8rem;
            padding-right: 6rem;
            flex-grow: 1;
            line-height: 1.5;

            &::after {
                content: '';
                display: block;
                width: 3rem;
                height: 3rem;
                background: url(../img/icon-arrow_slide.webp) no-repeat center/contain;
                position: absolute;
                right: 0;
                top: 1.5rem;
            }
        }

        & .date {
            font-size: 2.2rem;
            position: relative;
            margin-top: 1rem;
            display: flex;
            gap: 1rem;
            align-items: self-start;

            & .note {
                font-size: 1.8rem;
            }

            &::before {
                content: attr(data-type);
                display: block;
                letter-spacing: 0.2rem;
                padding: 0.4rem 1rem;
                border: 1px solid;
                width: fit-content;
                text-align: center;
                line-height: 1.2;
                border-radius: 0.6rem;
                font-size: 1.8rem;
                margin: 0.4rem 0 0;
                min-width: 6.3rem;
            }
        }
    }

    & .slide__link {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .slide__nav {
        position: relative;
        margin: 4rem auto 0;
        padding: 5rem 0;
        width: 83%;

        & .swiper-pagination {
            width: calc(100% - 20rem);
            margin: 0 auto;
            top: 50%;
            left: 0;
            right: 0;
            transform: translateY(-50%);
            bottom: auto;
        }

        & .swiper-pagination-bullet {
            width: 1.6rem;
            height: 1.6rem;
            opacity: 1;
            margin: 0 1.6rem !important;
            background: #92c1ea;
            transition: 0.8s background;

            &.swiper-pagination-bullet-active {
                background: var(--cl_accent);
            }
        }

        & [class^="swiper-button"] {
            --swiper-navigation-size: 8rem;
            width: 8rem;
            height: 8rem;
            background: url(../img/icon-arrow_slide-nav.webp) no-repeat center/contain;

            & .swiper-navigation-icon {
                display: none !important;
            }
        }

        & .swiper-button-prev {
            transform: scale(-1);
        }
    }



    @media (max-width: 750px) {
        width: 100vw !important;
        margin: 0 auto -15rem !important;

        .swiper {
            width: 90%;
            margin: 0;
            overflow: visible;
        }

        & .slide__title {
            font-size: 3.6rem;
            border-radius: 1.4rem;
        }

        & .slide__text {
            padding: 3rem 4rem 5rem;
            line-height: 1.5;

            & .arrow-left {
                font-size: 3.2rem;
                padding-right: 9rem;
                padding-bottom: 2rem;
                
                &::after {
                    width: 5.6rem;
                    height: 5.6rem;
                }
            }

            & .date {
                font-size: 3.2rem;
                gap: 2rem;

                & .note {
                    font-size: 2.4rem;
                }

                &::before {
                    padding: 0.4rem 1rem 0.8rem;
                    font-size: 2.4rem;
                }
            }
        }
    }
}


.c-wave-bg {
    position: relative;
    z-index: 0;
    padding: 16rem 0;
    margin-bottom: -13rem;
    filter: drop-shadow(0.5rem -0.5rem 0.5rem rgba(0, 0, 0, 0.2));
    overflow: hidden;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;

        --bg_size: 484.2rem;
        --wave-w: 161.4rem;
        --wave-h: 16rem;

        background: repeat center top/var(--bg_size);
        mask-image: url('../img/wave-mask.svg'), linear-gradient(black, black);
        mask-size: var(--wave-w) var(--wave-h), 100% calc(100% - (var(--wave-h) - 1px));
        mask-position: top center, bottom center;
        mask-repeat: repeat-x, no-repeat;

    }

    &.is-reverse::before {
        transform: scaleX(-1);
    }

    &[data-color="light-blue"]::before {
        background-image: url('../img/bg_light-blue.webp');
    }

    &[data-color="blue"]::before {
        background-image: url('../img/bg_blue.webp');
        background-size: calc(var(--bg_size) * 1.1);
        background-position: 50% 14%;
    }

    &[data-color="yellow"]::before {
        background-image: url('../img/bg_yellow.webp');
        background-size: calc(var(--bg_size) * 0.9);
    }


    @media (max-width: 750px) {

        &::before {
            --wave-w: 133.6rem;
            --wave-h: 13.24rem;
        }
    }
}

.c-ice-dec {
    position: relative;
    padding-bottom: 21.6vw;

    &:after {
        content: '';
        display: block;
        width: 100%;
        height: 21.6vw;
        min-height: 35rem;
        background: no-repeat center/ cover;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
    }

    &.p-fv:after {
        background-image: url(../img/ice-dec_fv.webp?set2);
    }

    &.p-about:after {
        background-image: url(../img/ice-dec_about.webp)
    }

    &.p-attraction:after {
        background-image: url(../img/ice-dec_attraction.webp)
    }

    &.p-event:after {
        background-image: url(../img/ice-dec_event.webp)
    }

    &.p-projects:after {
        background-image: url(../img/ice-dec_projects.webp)
    }

    &.p-other:after {
        background-image: url(../img/ice-dec_other.webp)
    }

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


        padding-bottom: calc(22.8rem + 16rem);

        &:after {
            height: 22.8rem;
            min-height: auto;
        }

        &.p-fv:after {
            background-image: url(../img/ice-dec_fv_sp.webp?set2)
        }

        &.p-about:after {
            background-image: url(../img/ice-dec_about_sp.webp)
        }

        &.p-attraction:after {
            background-image: url(../img/ice-dec_attraction_sp.webp)
        }

        &.p-event:after {
            background-image: url(../img/ice-dec_event_sp.webp)
        }

        &.p-projects:after {
            background-image: url(../img/ice-dec_projects_sp.webp)
        }

        &.p-other:after {
            background-image: url(../img/ice-dec_other_sp.webp)
        }
    }
}








.p-fv {
    margin-bottom: -12.3rem;
    padding-bottom: 0;
    
    & h1 {
        position: relative;
        z-index: -1;
    }

        @media screen and (max-width: 750px) {
            padding-bottom: 11.5rem;

            &::before {
                content: '';
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                background: #0d75d0;
                z-index: -1;
            }
        }
}

.p-about {

    .l-inner {
        position: relative;
        min-height: 58rem;
        margin: 4em auto -11.6vw;
    }

    .p-about_title {
        width: 37rem;
        margin: 0 auto;
    }

    [class^="p-about_item"] {
        position: absolute;

        &:before {
            content: '';
            display: block;
            aspect-ratio: 1/1;
            background: url(../img/about_item-bg.webp) no-repeat center/contain;
            position: absolute;
            z-index: -1;
            mix-blend-mode: color-burn;
            opacity: 0.4;
        }
    }

    .p-about_item01 {
        top: 0;
        left: 0;
        width: 34rem;

        &:before {
            width: 17.4rem;
            top: -0.6rem;
            right: -7.2rem;
        }
    }

    .p-about_item02 {
        bottom: 4rem;
        left: 32rem;
        width: 27.8rem;

        &:before {
            width: 23.2rem;
            top: -0.6rem;
            left: -10.2rem;
        }
    }

    .p-about_item03 {
        bottom: 0;
        right: 26rem;
        width: 28.8rem;

        &:before {
            width: 18.4rem;
            top: 4rem;
            right: -5rem;
        }
    }

    .p-about_item04 {
        top: 0.6rem;
        right: 7.5rem;
        width: 27.8rem;

        &:before {
            width: 20rem;
            top: -5.2rem;
            left: 4rem;
        }
    }

    @media screen and (max-width: 750px) {
        .l-inner {
            width: 100%;
            min-height: auto;
            overflow: hidden;
            margin: -8rem auto -20.8rem;
        }

        .p-about_title {
            width: 100%;
        }

        [class^="p-about_item"] {
            position: relative;

            &:before {

                --ice-w_about: 19.2rem;
                width: var(--ice-w_about);
                height: 32.8rem;
                aspect-ratio: auto;
                mix-blend-mode: normal;
                opacity: 1;
            }
        }

        .p-about_item01 {
            width: 59.2rem;
            margin: -1rem 3.6rem 0 auto;
            z-index: -1;

            &:before {
                display: none;
            }
        }

        .p-about_item02 {
            width: 48.6rem;
            margin: -1rem auto 0 -3.2rem;
            bottom: 0;
            left: 0;

            &:before {
                top: -0.8rem;
                left: auto;
                right: calc(-1 * var(--ice-w_about) - 5.2rem);
                background-image: url(../img/ice-dec_about_item-bg01_sp.webp);
            }
        }

        .p-about_item03 {
            width: 50.2rem;
            margin: -8rem -3.6rem 0 auto;
            right: 0;

            &:before {
                top: 15rem;
                right: auto;
                left: calc(-1 * var(--ice-w_about) - 5.2rem);
                background-image: url(../img/ice-dec_about_item-bg02_sp.webp);
            }
        }

        .p-about_item04 {
            width: 48.4rem;
            margin: -3rem auto 0 8rem;
            right: 0;
            top: 0;

            &:before {
                top: 6rem;
                left: auto;
                right: calc(-1 * var(--ice-w_about) + 1rem);
                background-image: url(../img/ice-dec_about_item-bg03_sp.webp);
            }
        }
    }
}


.p-attraction {

    & .swiper-wrapper {
        padding-top: 4rem;
    }

    & [class^="swiper-button"] {
        filter: contrast(0) brightness(200%);
    }

}

.p-event {
    & .c-slider-wrap {
        margin: 5rem auto -6rem;
        width: 104vw;
    }

    & .swiper-wrapper {
        padding-top: 16rem;
    }

    & .swiper-pagination-bullet-active {
        background: var(--cl_main) !important;
    }

    & .swiper-slide {
        background: var(--cl_main);
    }

    & .slide__title {
        background: transparent;
        transform: rotate(0);
        padding: 0;
        max-width: 47.8rem;
        width: 100%;
        top: -16rem;
    }

    & .slide__text {
        color: #fff;
    }

    & .arrow-left {
        font-size: 2.4rem !important;
        color: var(--cl_accent);

        &::after {
            filter: contrast(0) brightness(200%);
            top: 1rem !important;
        }
    }

    @media (max-width: 750px) {
        & .swiper-wrapper {
            padding-top: 22.8rem;
        }

        & .slide__title {
            max-width: 100%;
            top: -22.8rem;

            & img {
                width: 67.6rem;
                max-width: 67.6rem;
                margin-left: -2rem;
            }
        }

        & .arrow-left {
            font-size: 3.6rem !important;

            &::after {
                top: 0.5rem !important;
            }
        }
    }
}

.p-projects {

    padding-bottom: 21.6vw;

    & .p-projects__pickup {
        background-color: var(--cl_main);
        border-radius: 2rem;
        overflow: hidden;
        margin: 6rem auto 4.5rem;

    }
    
    & .p-projects__pickup-thumbnail {
        margin: 0;
        line-height: 0;
        width: 100%;
        max-width: 68.8rem;

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    & .p-projects__pickup-text {
        color: #fff;
        width: calc(100% - 69rem);
        padding: 4rem 4.5rem;
        flex-direction: column;
        justify-content: space-between;
    }

    & .p-projects__title {
        color: var(--cl_accent);
        font-size: 2.4rem;
        font-weight: 700;
        margin-bottom: 2rem;
    }

    & .p-projects__period {
        align-items: baseline;
        border-bottom: 1px solid;
        border-top: 1px solid;
        padding: 1.5rem 1rem;
        font-weight: 700;
        gap: 1.2rem;
        margin-bottom: 2rem;

        & .label {
            font-size: 1.8rem;
            min-width: 4rem;
        }

        & .date {
            font-size: 2rem;
            line-height: 1.5;
        }
    }

    & .p-projects__desc {
        font-size: 1.6rem;
        line-height: 2.1;
        font-weight: 500;
    }


    & .p-projects__details {
        position: relative;
        background-color: #fff;
        border-radius: 2rem;
        gap: 10rem;
        padding: 4rem 6rem;
        z-index: 1;
    }

    
    .p-projects__col {
        flex: 1;
    }
    & .p-projects__col-title {
        color: var(--cl_main);
        font-size: 2.4rem;
        font-weight: 700;
        padding-bottom: 1.5rem;
        margin-bottom: 2.4rem;
        border-bottom: 1px solid;
    }

    & .p-projects__list {
        margin-bottom: 2rem;

        & li {
            font-size: 2.2rem;
            line-height: 1.4;
            font-weight: 500;
        }
    }

    & .p-projects__date {
        color: var(--cl_main);
        font-size: 2.4rem;
        font-weight: 700;
    }

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

        padding-bottom: calc(22.8rem + 10rem);
        
        & .p-projects__pickup {
            border-radius: 3.2rem;
            flex-wrap: wrap;
        }

        & .p-projects__pickup-text {
            width: 100%;
            padding: 6rem 5rem;
        }
       & .p-projects__title {
            font-size: 4.4rem;
            margin-bottom: 3rem;
        }

        & .p-projects__period {padding: 3rem 1.5rem;margin-bottom: 3rem;
                
            & .label {
                font-size: 2.8rem;
                min-width: 6rem;
            }
    
            & .date {
                font-size: 3.2rem;
            }
        }

       & .p-projects__desc {
            font-size: 3.2rem;
        }

          & .p-projects__details {
            border-radius: 3.2rem;
            gap: 5rem;
            flex-direction: column;
            padding: 4.5rem 5rem;
        }

         & .p-projects__col-title {
            font-size: 4.1rem;
            padding-bottom: 2.5rem;
            margin-bottom: 4.4rem;
        }
    
        & .p-projects__list {
            
            & li {
                font-size: 3.6rem;

                & .u-sp-small {
                    font-size: 3.2rem;
                }
            }
        }
          & .p-projects__date {
            font-size: 3.4rem;
        }
    }
}


.p-other {

    padding-bottom: 17em;

    & .l-inner {
        position: relative;

        &::before {
            content: '';
            display: block;
            width: 20rem;
            height: 33rem;
            background: url(../img/other-dec.webp) no-repeat center/contain;
            position: absolute;
            right: 0;
            bottom: -30%;
        }
    }

    & .p-other__lead {
        color: #fff;
        font-size: 2.4rem;
        font-weight: 500;
        text-align: center;
        margin-top: 2rem;
        margin-bottom: 5rem;
        letter-spacing: 0.5rem;
    }

    & .p-other__btn-area {
        text-align: center;
    }

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

                padding-bottom: 20em;
            
             & .p-other__lead {
                font-size: 4.4rem;
            }

             & .l-inner {
                &::before {
                    width: 14rem;
                    height: 22.8rem;
                    background-image: url(../img/other-dec_sp.webp);
                    right: 0;
                    bottom: auto;
                    top: 15rem;
                }
            }
        }
}


.l-footer {
    position: relative;

    --fuji-h: 15.8rem;

    padding-top: var(--fuji-h);
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--fuji-h) + 2px);

    &::before {
        content: '';
        display: block;
        width: 100%;
        height: var(--fuji-h);
        background: url(../img/mt_fuji.webp)no-repeat center top/141rem;
        position: absolute;
        top: 0;
    }

    & .l-inner {
        position: relative;
        padding-bottom: 3rem;
        
        &::before {
            content: '';
            display: block;
            width: 144rem;
            height: 49rem;
            background: url(../img/footer_bg.webp) no-repeat center/100%;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: -1;
        }
    }

    & .l-footer__title {
        width: 44rem;
        margin: 0 auto;
    }

    & .l-footer__btn-area {
        margin: 10rem auto;
        text-align: center;
    }

    & .copy {
        text-align: center;
        color: var(--cl_main);
        font-size: 1.4rem;
        font-weight: 500;
        margin: 3rem;
        letter-spacing: 0.05rem;
    }

    .c-btn {
        --cl-btn: var(--cl_main);
        background: var(--cl_accent)
    }

            @media screen and (max-width: 750px) {
                --fuji-h: 19.2rem;

                 &::before {
                    background-size: 190.8rem;
                }

                & .l-inner {
                        z-index: 1;
                        
                        &::before {
                            width: 75rem;
                            height: 76rem;
                            background-image: url(../img/footer_bg_sp.webp);
                            top: -6.5rem;
                        }
                    }
                 & .l-footer__title {
                    width: 57.6rem;
                    padding-top: 12rem;
                }
                    & .l-footer__btn-area {
                        margin: 4rem auto 25rem;
                        
                        & .c-btn {
                            margin: 0 auto;
                        }
                    }
                
                    & .copy {
                        font-size: 1.8rem;
                        width: 100vw;
                        margin: 3rem calc(50% - 50vw);
                    }
            }
}


.p-float {
    position: fixed;
    display: block;
    z-index: 999;
    width: auto;
    bottom: 2%;
    right: 3rem;
    
    & .c-btn {
        --cl-btn: var(--cl_main);
        background: var(--cl_accent);
        margin: 0 auto;
        padding: 0;
        width: 17.2rem;
        box-shadow: 0.6rem 0.3rem 0px var(--cl-btn);
        
        &::after {
            display: none;
        }
        
        &:hover {
            transform: translate(2px, 2px);
            box-shadow: 0.2rem 0.2rem 0px var(--cl-btn);
        }
    }

    @media screen and (max-width: 750px) {
        right: 1rem;
        bottom: 6rem;
    }
}