/* MARK: ============ */




/* MARK: アニメーション */




/* MARK: ============ */



/* MARK: 1280〜1920px */

/* ローディングアイコンのバウンスアニメーション */
@keyframes loader_bounce {

    0%,
    100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }

    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

/* 写真のスライドアニメーション */
@keyframes loop_scroll_left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* マップピンの登場アニメーション */
@keyframes pin_birth {
    0% {
        transform: translateY(100%) scale(1.0, 0.0);
        opacity: 0.0;
    }

    30% {
        transform: translateY(-50%) scale(1.0, 1.0);
        opacity: 1.0;
    }

    100% {
        transform: translateY(0%) scale(1.0, 1.0);
        opacity: 1.0;
    }
}

/* 「来場はこちら」の音符アニメーション */
@keyframes visit_ring {
    0% {
        transform: translateX(0px);
    }

    20% {
        transform: translateX(.4rem);
    }

    40% {
        transform: translateX(-.4rem);
    }

    60% {
        transform: translateX(.4rem);
    }

    80% {
        transform: translateX(-.4rem);
    }

    100% {
        transform: translateX(0px);
    }
}

/* ピンの浮遊アニメーション */
@keyframes pin_floating {
    0% {
        transform: translateY(-.5rem);
    }

    50% {
        transform: translateY(0);

    }

    100% {
        transform: translateY(-.5rem);
    }
}

/* メニューボタンの変化アニメーション */
@keyframes menu_button_upper_forward {
    0% {
        transform: translateY(0.0rem) rotate(0deg) scale(1.0);
        background-color: var(--grayA9);
    }

    25% {
        transform: translateY(1.05rem) rotate(0deg) scale(1.0);
        background-color: var(--grayA9);
    }

    50% {
        transform: translateY(1.05rem) rotate(45deg) scale(1.0);
        background-color: var(--grayA9);
    }

    100% {
        transform: translateY(1.05rem) rotate(45deg) scale(0.55);
        background-color: var(--white);
    }
}

@keyframes menu_button_middle_forward {
    0% {
        opacity: 1.0;
        border-radius: 0;
        top: 1.5rem;
        width: 3.6rem;
        height: .4rem;
        transform: translateY(0) rotate(0deg) scale(1.0);
        background-color: var(--grayA9);
    }

    25% {
        opacity: 1.0;
        border-radius: 0;
        top: 1.5rem;
        width: 3.6rem;
        height: .4rem;
        transform: translateY(0) rotate(0deg) scale(1.0);
        background-color: var(--grayA9);
    }

    25.1% {
        opacity: 0.0;
        border-radius: 50%;
        top: 0.0rem;
        width: 3.3rem;
        height: 3.3rem;
        transform: translateY(0) rotate(0deg) scale(0.0);
        background-color: var(--grayA9);
    }

    50% {
        opacity: 1.0;
        border-radius: 50%;
        top: 0.0rem;
        width: 3.3rem;
        height: 3.3rem;
        transform: translateY(0) rotate(0deg) scale(0.0);
        background-color: var(--grayA9);
    }

    100% {
        opacity: 1.0;
        border-radius: 50%;
        top: 0.0rem;
        width: 3.3rem;
        height: 3.3rem;
        transform: translateY(0) rotate(0deg) scale(1.0);
        background-color: var(--grayA9);
    }
}

@keyframes menu_button_lower_forward {
    0% {
        transform: translateY(0.0rem) rotate(0deg) scale(1.0);
        background-color: var(--grayA9);
    }

    25% {
        transform: translateY(-1.05rem) rotate(0deg) scale(1.0);
        background-color: var(--grayA9);
    }

    50% {
        transform: translateY(-1.05rem) rotate(-45deg) scale(1.0);
        background-color: var(--grayA9);
    }

    100% {
        transform: translateY(-1.05rem) rotate(-45deg) scale(0.55);
        background-color: var(--white);
    }
}

@keyframes menu_button_upper_reverse {
    0% {
        transform: translateY(1.05rem) rotate(45deg) scale(0.55);
        background-color: var(--white);
    }

    50% {
        transform: translateY(1.05rem) rotate(45deg) scale(1.0);
        background-color: var(--grayA9);
    }

    75% {
        transform: translateY(1.05rem) rotate(0deg) scale(1.0);
        background-color: var(--grayA9);
    }

    100% {
        transform: translateY(0.0rem) rotate(0deg) scale(1.0);
        background-color: var(--grayA9);
    }
}

@keyframes menu_button_middle_reverse {
    0% {
        opacity: 1.0;
        border-radius: 50%;
        top: 0.0rem;
        width: 3.3rem;
        height: 3.3rem;
        transform: translateY(0) rotate(0deg) scale(1.0);
        background-color: var(--grayA9);
    }

    50% {
        opacity: 1.0;
        border-radius: 50%;
        top: 0.0rem;
        width: 3.3rem;
        height: 3.3rem;
        transform: translateY(0) rotate(0deg) scale(0.0);
        background-color: var(--grayA9);
    }

    75% {
        opacity: 0.0;
        border-radius: 50%;
        top: 0.0rem;
        width: 3.3rem;
        height: 3.3rem;
        transform: translateY(0) rotate(0deg) scale(0.0);
        background-color: var(--grayA9);
    }

    75.1% {
        opacity: 0.0;
        border-radius: 0;
        top: 1.5rem;
        width: 3.6rem;
        height: .4rem;
        transform: translateY(0) rotate(0deg) scale(1.0);
        background-color: var(--grayA9);
    }

    100% {
        opacity: 1.0;
        border-radius: 0;
        top: 1.5rem;
        width: 3.6rem;
        height: .4rem;
        transform: translateY(0) rotate(0deg) scale(1.0);
        background-color: var(--grayA9);
    }
}

@keyframes menu_button_lower_reverse {
    0% {
        transform: translateY(-1.05rem) rotate(-45deg) scale(0.55);
        background-color: var(--white);
    }

    50% {
        transform: translateY(-1.05rem) rotate(-45deg) scale(1.0);
        background-color: var(--grayA9);
    }

    75% {
        transform: translateY(-1.05rem) rotate(0deg) scale(1.0);
        background-color: var(--grayA9);
    }

    100% {
        transform: translateY(0.0rem) rotate(0deg) scale(1.0);
        background-color: var(--grayA9);
    }
}

/* 過去開催の写真切り替えアニメーション */
@keyframes past_photos_animation_a {
    0% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    90% {
        opacity: 0
    }

    100% {
        opacity: 1;
    }
}

@keyframes past_photos_animation_b {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes past_photos_animation_c {
    0% {
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    70% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* 落下してバウンド */
@keyframes fall_and_bound {
    0% {
        transform: translateY(-100%) scale(1.0, 1.0);
        opacity: 0.0;
    }

    30% {
        transform: translateY(10%) scale(1.1, 0.9);
        opacity: 1.0;
    }

    85% {
        transform: translateY(-30%) scale(0.9, 1.1);
        opacity: 1.0;
    }

    100% {
        transform: translateY(0%) scale(1.0, 1.0);
        opacity: 1.0;
    }
}

/* MARK: 768〜1280px */
@media only screen and (max-width: 1279px) {

    /* メニューボタンの変化アニメーション */
    @keyframes menu_button_upper_forward {
        0% {
            transform: translateY(0.0rem) rotate(0deg) scale(1.0);
            background-color: var(--grayA9);
        }

        25% {
            transform: translateY(2.4rem) rotate(0deg) scale(1.0);
            background-color: var(--grayA9);
        }

        50% {
            transform: translateY(2.4rem) rotate(45deg) scale(1.0);
            background-color: var(--grayA9);
        }

        100% {
            transform: translateY(2.4rem) rotate(45deg) scale(0.55);
            background-color: var(--white);
        }
    }

    @keyframes menu_button_middle_forward {
        0% {
            opacity: 1.0;
            border-radius: 0;
            top: 3.5rem;
            width: 8.3rem;
            height: .9rem;
            transform: translateY(0) rotate(0deg) scale(1.0);
            background-color: var(--grayA9);
        }

        25% {
            opacity: 1.0;
            border-radius: 0;
            top: 3.5rem;
            width: 8.3rem;
            height: .9rem;
            transform: translateY(0) rotate(0deg) scale(1.0);
            background-color: var(--grayA9);
        }

        25.1% {
            opacity: 0.0;
            border-radius: 50%;
            top: 0.0rem;
            width: 7.6rem;
            height: 7.6rem;
            transform: translateY(0) rotate(0deg) scale(0.0);
            background-color: var(--grayA9);
        }

        50% {
            opacity: 1.0;
            border-radius: 50%;
            top: 0.0rem;
            width: 7.6rem;
            height: 7.6rem;
            transform: translateY(0) rotate(0deg) scale(0.0);
            background-color: var(--grayA9);
        }

        100% {
            opacity: 1.0;
            border-radius: 50%;
            top: 0.0rem;
            width: 7.6rem;
            height: 7.6rem;
            transform: translateY(0) rotate(0deg) scale(1.0);
            background-color: var(--grayA9);
        }
    }

    @keyframes menu_button_lower_forward {
        0% {
            transform: translateY(0.0rem) rotate(0deg) scale(1.0);
            background-color: var(--grayA9);
        }

        25% {
            transform: translateY(-2.4rem) rotate(0deg) scale(1.0);
            background-color: var(--grayA9);
        }

        50% {
            transform: translateY(-2.4rem) rotate(-45deg) scale(1.0);
            background-color: var(--grayA9);
        }

        100% {
            transform: translateY(-2.4rem) rotate(-45deg) scale(0.55);
            background-color: var(--white);
        }
    }

    @keyframes menu_button_upper_reverse {
        0% {
            transform: translateY(2.4rem) rotate(45deg) scale(0.55);
            background-color: var(--white);
        }

        50% {
            transform: translateY(2.4rem) rotate(45deg) scale(1.0);
            background-color: var(--grayA9);
        }

        75% {
            transform: translateY(2.4rem) rotate(0deg) scale(1.0);
            background-color: var(--grayA9);
        }

        100% {
            transform: translateY(0.0rem) rotate(0deg) scale(1.0);
            background-color: var(--grayA9);
        }
    }

    @keyframes menu_button_middle_reverse {
        0% {
            opacity: 1.0;
            border-radius: 50%;
            top: 0.0rem;
            width: 7.6rem;
            height: 7.6rem;
            transform: translateY(0) rotate(0deg) scale(1.0);
            background-color: var(--grayA9);
        }

        50% {
            opacity: 1.0;
            border-radius: 50%;
            top: 0.0rem;
            width: 7.6rem;
            height: 7.6rem;
            transform: translateY(0) rotate(0deg) scale(0.0);
            background-color: var(--grayA9);
        }

        75% {
            opacity: 0.0;
            border-radius: 50%;
            top: 0.0rem;
            width: 7.6rem;
            height: 7.6rem;
            transform: translateY(0) rotate(0deg) scale(0.0);
            background-color: var(--grayA9);
        }

        75.1% {
            opacity: 0.0;
            border-radius: 0;
            top: 3.5rem;
            width: 8.3rem;
            height: .9rem;
            transform: translateY(0) rotate(0deg) scale(1.0);
            background-color: var(--grayA9);
        }

        100% {
            opacity: 1.0;
            border-radius: 0;
            top: 3.5rem;
            width: 8.3rem;
            height: .9rem;
            transform: translateY(0) rotate(0deg) scale(1.0);
            background-color: var(--grayA9);
        }
    }

    @keyframes menu_button_lower_reverse {
        0% {
            transform: translateY(-2.4rem) rotate(-45deg) scale(0.55);
            background-color: var(--white);
        }

        50% {
            transform: translateY(-2.4rem) rotate(-45deg) scale(1.0);
            background-color: var(--grayA9);
        }

        75% {
            transform: translateY(-2.4rem) rotate(0deg) scale(1.0);
            background-color: var(--grayA9);
        }

        100% {
            transform: translateY(0.0rem) rotate(0deg) scale(1.0);
            background-color: var(--grayA9);
        }
    }

    /* MARK: 〜767px */
    @media only screen and (max-width: 767px) {

        /* マップピンの登場アニメーション */
        @keyframes pin_birth {
            0% {
                transform: translateY(100%) scale(0.5, 0.0);
                opacity: 0.0;
            }

            30% {
                transform: translateY(-50%) scale(0.5, 0.5);
                opacity: 1.0;
            }

            100% {
                transform: translateY(0%) scale(0.5, 0.5);
                opacity: 1.0;
            }
        }

        /* メニューボタンの変化アニメーション */
        @keyframes menu_button_upper_forward {
            0% {
                transform: translateY(0.0rem) rotate(0deg) scale(1.0);
                background-color: var(--grayA9);
            }

            25% {
                transform: translateY(2.1rem) rotate(0deg) scale(1.0);
                background-color: var(--grayA9);
            }

            50% {
                transform: translateY(2.1rem) rotate(45deg) scale(1.0);
                background-color: var(--grayA9);
            }

            100% {
                transform: translateY(2.1rem) rotate(45deg) scale(0.55);
                background-color: var(--white);
            }
        }

        @keyframes menu_button_middle_forward {
            0% {
                opacity: 1.0;
                border-radius: 0;
                top: 3.0rem;
                width: 7.2rem;
                height: .8rem;
                transform: translateY(0) rotate(0deg) scale(1.0);
                background-color: var(--grayA9);
            }

            25% {
                opacity: 1.0;
                border-radius: 0;
                top: 3.0rem;
                width: 7.2rem;
                height: .8rem;
                transform: translateY(0) rotate(0deg) scale(1.0);
                background-color: var(--grayA9);
            }

            25.1% {
                opacity: 0.0;
                border-radius: 50%;
                top: 0.0rem;
                width: 6.6rem;
                height: 6.6rem;
                transform: translateY(0) rotate(0deg) scale(0.0);
                background-color: var(--grayA9);
            }

            50% {
                opacity: 1.0;
                border-radius: 50%;
                top: 0.0rem;
                width: 6.6rem;
                height: 6.6rem;
                transform: translateY(0) rotate(0deg) scale(0.0);
                background-color: var(--grayA9);
            }

            100% {
                opacity: 1.0;
                border-radius: 50%;
                top: 0.0rem;
                width: 6.6rem;
                height: 6.6rem;
                transform: translateY(0) rotate(0deg) scale(1.0);
                background-color: var(--grayA9);
            }
        }

        @keyframes menu_button_lower_forward {
            0% {
                transform: translateY(0.0rem) rotate(0deg) scale(1.0);
                background-color: var(--grayA9);
            }

            25% {
                transform: translateY(-2.1rem) rotate(0deg) scale(1.0);
                background-color: var(--grayA9);
            }

            50% {
                transform: translateY(-2.1rem) rotate(-45deg) scale(1.0);
                background-color: var(--grayA9);
            }

            100% {
                transform: translateY(-2.1rem) rotate(-45deg) scale(0.55);
                background-color: var(--white);
            }
        }

        @keyframes menu_button_upper_reverse {
            0% {
                transform: translateY(2.1rem) rotate(45deg) scale(0.55);
                background-color: var(--white);
            }

            50% {
                transform: translateY(2.1rem) rotate(45deg) scale(1.0);
                background-color: var(--grayA9);
            }

            75% {
                transform: translateY(2.1rem) rotate(0deg) scale(1.0);
                background-color: var(--grayA9);
            }

            100% {
                transform: translateY(0.0rem) rotate(0deg) scale(1.0);
                background-color: var(--grayA9);
            }
        }

        @keyframes menu_button_middle_reverse {
            0% {
                opacity: 1.0;
                border-radius: 50%;
                top: 0.0rem;
                width: 6.6rem;
                height: 6.6rem;
                transform: translateY(0) rotate(0deg) scale(1.0);
                background-color: var(--grayA9);
            }

            50% {
                opacity: 1.0;
                border-radius: 50%;
                top: 0.0rem;
                width: 6.6rem;
                height: 6.6rem;
                transform: translateY(0) rotate(0deg) scale(0.0);
                background-color: var(--grayA9);
            }

            75% {
                opacity: 0.0;
                border-radius: 50%;
                top: 0.0rem;
                width: 0.0rem;
                height: 0.0rem;
                transform: translateY(0) rotate(0deg) scale(0.0);
                background-color: var(--grayA9);
            }

            75.1% {
                opacity: 0.0;
                border-radius: 0;
                top: 3.0rem;
                width: 7.2rem;
                height: .8rem;
                transform: translateY(0) rotate(0deg) scale(0.0);
                background-color: var(--grayA9);
            }

            75.2% {
                opacity: 0.0;
                border-radius: 0;
                top: 3.0rem;
                width: 7.2rem;
                height: .8rem;
                transform: translateY(0) rotate(0deg) scale(1.0);
                background-color: var(--grayA9);
            }

            100% {
                opacity: 1.0;
                border-radius: 0;
                top: 3.0rem;
                width: 7.2rem;
                height: .8rem;
                transform: translateY(0) rotate(0deg) scale(1.0);
                background-color: var(--grayA9);
            }
        }

        @keyframes menu_button_lower_reverse {
            0% {
                transform: translateY(-2.1rem) rotate(-45deg) scale(0.55);
                background-color: var(--white);
            }

            50% {
                transform: translateY(-2.1rem) rotate(-45deg) scale(1.0);
                background-color: var(--grayA9);
            }

            75% {
                transform: translateY(-2.1rem) rotate(0deg) scale(1.0);
                background-color: var(--grayA9);
            }

            100% {
                transform: translateY(0.0rem) rotate(0deg) scale(1.0);
                background-color: var(--grayA9);
            }
        }
    }
}


/* MARK: ============ */




/* MARK: コモン  */




/* MARK: ============ */

/* 変数 */
:root {
    --gray33: #333333;
    --gray88: #888888;
    --gray99: #999999;
    --grayA9: #A9A9A9;
    --grayB0: #B0BEC3;
    --grayBF: #BFBFBF;
    --grayC7: #C7C7C7;
    --grayCC: #CCCCCC;
    --grayEB: #EBF1F1;
    --grayF6: #F6F6F6;
    --white: #FFFFFF;
    --black30: #0000004d;
    --black40: #00000066;
    --black50: #00000080;
    --black70: #000000b3;

    --main_navy: #004ECD;
    --acnt_orange: #F9A109;
    --acnt_yellow: #FFF100;
    --acnt_yellow2: #FDEB27;
    --acnt_yellow_dark: #BDAE07;
    --acnt_sky: #11ABE3;
    --acnt_cream: #FFF3AB;
    --acnt_red: #FF4901;
    --acnt_red2: #F04641;
    --acnt_red3: #e34c70;
    --acnt_red_dark: #AA2F4C;
    --acnt_light_blue: #ECF1FF;
    --acnt_blue_gray: #7A939B;

    --corporate_green: #00A040;
    --corporate_blue: #0B318F;

    --tran_bezier1: cubic-bezier(0.215, 0.61, 0.355, 1);
    --tran_bezier2: cubic-bezier(.19, 1, .22, 1);
}

/* 幅比基準フォントサイズ */
html:has(body#thanks_giving),
body#thanks_giving {
    margin: 0;
    padding: 0;
    overflow-x: hidden;

    /* MARK: 1280〜1920px */
    font-size: 0.694444444vw;



    /* MARK: 768〜1280px */
    @media only screen and (max-width: 1279px) {
        font-size: 0.781860829vw;


        /* MARK: 〜767px */
        @media only screen and (max-width: 767px) {
            font-size: 1.30378096vw;
        }
    }
}

/* ローディング中はスクロール禁止 */
html:has(body.loading),
body.loading {
    overflow: hidden;
}

#thanks_giving {

    color: var(--gray33);
    font-family: Noto Sans JP;
    font-style: normal;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: .2rem;

    &.fixed {
        overflow: hidden;
        position: fixed;
    }

    img {
        width: 100%;
    }

    .pc_only {
        display: block;
    }

    .sp_only {
        display: none;
    }


    &.loading {
        cursor: none;

        #loader7 {
            opacity: 1.0;
            background-color: var(--main_navy);
        }
    }

    #loader7 {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        transition: all 800ms var(--tran_bezier2) 0ms;
        opacity: 0.0;
        position: fixed;
        pointer-events: none;
        z-index: 1001;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--white);

        &::after {
            position: absolute;
            content: '';
            width: 100%;
            font-size: 0.8rem;
            font-weight: 300;
            letter-spacing: 0;
            color: var(--white);
            text-align: center;
            animation: blink 1.6s infinite linear;
        }

        .bouncers {
            width: 4.8rem;
            height: 4.8rem;
            position: relative;

            .bouncer1,
            .bouncer2 {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: var(--white);
                opacity: 0.6;
                position: absolute;
                top: 0;
                left: 0;
                animation: loader_bounce 1.5s infinite ease-in-out;
            }

            .bouncer2 {
                animation-delay: -0.75s;
            }
        }
    }

    .rounded_box {
        background-color: var(--acnt_cream);
        border-radius: 2.0rem;
    }

    .button {
        position: relative;

        &::before,
        a {
            width: 38.5rem;
            height: 5.8rem;
            border-radius: 100vh;
        }

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: .6rem;
            background-color: var(--acnt_yellow_dark);
        }

        a {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--gray33);
            background-color: var(--acnt_yellow2);
            font-size: 2.0rem;
            font-weight: 700;
            text-decoration: none;
            transition: transform 400ms var(--tran_bezier2);

            &::after {
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                right: 1.0rem;
                margin: auto 0;
                width: 3.0rem;
                height: 2.8rem;
                mask-image: url('../img/button_angle.svg');
                background-color: var(--gray33);
                transform: translateX(-.5rem);
                transition: transform 400ms var(--tran_bezier2);
            }

            &:hover {
                transform: translateY(.4rem);

                &::after {
                    transform: translateX(0);
                }
            }
        }
    }

    .icon {

        &.eco {
            background-image: url('../img/icon_eco.png');
        }

        &.water {
            background-image: url('../img/icon_water.png');
        }

        &.gas {
            background-image: url('../img/icon_gas.png');
        }

        &.house {
            background-image: url('../img/icon_house.png');
        }

        &.reform {
            background-image: url('../img/icon_reform.png');
        }

        &.fun {
            background-image: url('../img/icon_fun.png');
        }

        &.seminar {
            background-image: url('../img/icon_seminar.png');
        }

        &.food {
            background-image: url('../img/icon_food.png');
        }
    }

    /* MARK: 768〜1280px */
    @media only screen and (max-width: 1279px) {
        .pc_only {
            display: none;
        }

        .sp_only {
            display: block;
        }

        #loader7 {

            &::after {
                font-size: 2.4rem;
            }

            .bouncers {
                width: 19.2rem;
                height: 19.2rem;
            }
        }

        .rounded_box {
            border-radius: 6.0rem;
        }

        .button {

            &::before,
            a {
                width: 108.0rem;
                height: 16.4rem;
            }

            &::before {
                top: 1.8rem;
            }

            a {
                font-size: 6.0rem;

                &::after {
                    right: 3.0rem;
                    width: 9.0rem;
                    height: 8.4rem;
                    transform: translateX(-1.5rem);
                }

                &:hover {
                    transform: translateY(1.2rem);
                }

            }
        }

        .scroll-hint-icon-wrap {
            z-index: 999;

            .scroll-hint-icon {
                width: 28.0rem;
                height: 19.0rem;
                padding: 5.0rem 1.0rem 1.0rem 1.0rem;
                border-radius: 2.0rem;
                background: #00000080;

                &::before {
                    width: 8.0rem;
                    height: 8.0rem;
                }

                &::after {
                    top: 2.5rem;
                    width: 6.8rem;
                    height: 2.8rem;
                    background-size: contain;
                    margin-left: -4.0rem;
                }

                .scroll-hint-text {
                    font-size: 2.4rem;
                }
            }
        }

        /* MARK: 〜767px */
        @media only screen and (max-width: 767px) {

            #loader7 {

                &::after {
                    font-size: 1.6rem;
                }

                .bouncers {
                    width: 12.8rem;
                    height: 12.8rem;
                }
            }

            .rounded_box {
                border-radius: 4.0rem;
            }

            .button {

                &::before,
                a {
                    width: 72.0rem;
                    height: 10.9rem;
                }

                &::before {
                    top: 1.2rem;
                }

                a {
                    font-size: 4.0rem;

                    &::after {
                        right: 2.0rem;
                        width: 6.0rem;
                        height: 5.6rem;
                        transform: translateX(-1.0rem);
                    }

                    &:hover {
                        transform: translateY(.8rem);
                    }
                }
            }
        }
    }





    /* MARK: ============ */




    /* MARK: FV  */




    /* MARK: ============ */



    /* MARK: 1280〜1920px */
    &.loading {
        .fv {
            #scroller {
                #virtual_map {
                    .piece {
                        opacity: 0.0;

                        &.food {
                            transform: translate(100%, -100%);
                        }

                        &.seminar {
                            transform: translate(100%, -100%);
                        }

                        &.house {
                            transform: translate(-100%, -100%);
                        }

                        &.reform {
                            transform: translate(-100%, 100%);
                        }

                        &.other1 {
                            transform: translate(100%, -100%);
                        }

                        &.water {
                            transform: translate(100%, 100%);
                        }

                        &.fun {
                            transform: translate(100%, 100%);
                        }

                        &.gas {
                            transform: translate(-100%, 100%);
                        }

                        &.eco {
                            transform: translate(-100%, 100%);
                        }

                        &.other2 {
                            transform: translate(-100%, 100%);
                        }

                        &.other3 {
                            transform: translate(100%, 100%);
                        }
                    }

                    .pin {
                        opacity: 0.0;
                    }
                }

                #title {
                    opacity: 0.0;
                    transform: translateY(-150%);
                }

                #visit {
                    opacity: 0.0;
                    transform: translateX(100%);
                }

                #up_coming_wrapper {
                    opacity: 0.0;
                    transform: scale(0.0);
                    transition:
                        opacity 300ms var(--tran_bezier2),
                        transform 300ms var(--tran_bezier2);
                }

                #menu_button {
                    display: block;

                    &+label {
                        opacity: 0.0;
                        transform: translateX(100%);
                    }
                }
            }
        }
    }

    &.preparing {
        .fv {
            #scroller {
                #virtual_map {
                    .piece {
                        transition-property: opacity, transform;
                        transition-duration: 1200ms, 1200ms;
                        animation-timing-function: var(--tran_bezier2), var(--tran_bezier2);
                        transition-delay: 400ms, 400ms;
                        opacity: 1.0;
                        transform: translate(0%, 0%);

                        &.food {
                            transition-delay: 1000ms, 1000ms;
                        }

                        &.seminar {
                            transition-delay: 400ms, 400ms;
                        }

                        &.house {
                            transition-delay: 400ms, 400ms;
                        }

                        &.reform {
                            transition-delay: 400ms, 400ms;
                        }

                        &.other1 {
                            transition-delay: 600ms, 600ms;
                        }

                        &.water {
                            transition-delay: 600ms, 600ms;
                        }

                        &.fun {
                            transition-delay: 800ms, 800ms;
                        }

                        &.gas {
                            transition-delay: 600ms, 600ms;
                        }

                        &.eco {
                            transition-delay: 800ms, 800ms;
                        }

                        &.other2 {
                            transition-delay: 1000ms, 1000ms;
                        }

                        &.other3 {
                            transition-delay: 1000ms, 1000ms;
                        }
                    }

                    .pin {
                        animation: pin_birth 800ms var(--tran_bezier2) 400ms both;
                        transform-origin: bottom center;

                        &.food {
                            animation-delay: 1700ms;
                        }

                        &.seminar {
                            animation-delay: 1600ms;
                        }

                        &.house {
                            animation-delay: 1500ms;
                        }

                        &.reform {
                            animation-delay: 1400ms;
                        }

                        &.water {
                            animation-delay: 2100ms;
                        }

                        &.fun {
                            animation-delay: 1800ms;
                        }

                        &.gas {
                            animation-delay: 2000ms;
                        }

                        &.eco {
                            animation-delay: 1900ms;
                        }
                    }
                }
            }
        }
    }

    /* MARK: fv */
    .fv {
        position: relative;
        width: 144.0rem;
        height: 80.0rem;
        background-color: var(--white);
        overflow: hidden;
        z-index: 3;

        #scroller {
            position: relative;
            width: 100vw;
            height: 100vh;

            #virtual_map {
                position: absolute;
                top: 0;
                left: 0;
                width: 144.0rem;
                height: 80.0rem;
                z-index: 1;

                /* MARK: piece */
                .piece {
                    position: absolute;
                    transition: all 400ms var(--tran_bezier2);
                    z-index: 1;
                    opacity: 1.0;
                    transform: translate(0%, 0%);

                    &::before {
                        position: absolute;
                        content: '';
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background-size: cover;
                        transition: all 800ms var(--tran_bezier2);
                    }

                    &.hover,
                    &.selected {
                        pointer-events: none;

                        &::before {
                            transform: translateY(-5.0rem);
                            transition: all 200ms var(--tran_bezier2);
                        }
                    }

                    &.hover,
                    &.selected {
                        z-index: 3;
                    }

                    &.unselected,
                    &.unhover {
                        opacity: 0.3;
                        filter: grayscale(100%);
                        z-index: -1;
                    }

                    &.food {
                        top: 7.4rem;
                        right: 31.3rem;
                        width: 29.0rem;
                        height: 19.0rem;

                        &::before {
                            background-image: url('../img/fv_bg_food.png');
                        }
                    }

                    &.seminar {
                        top: 8.5rem;
                        left: 50.3rem;
                        width: 25.4rem;
                        height: 25.5rem;

                        &::before {
                            background-image: url('../img/fv_bg_seminar.png');
                        }
                    }

                    &.house {
                        top: 17.4rem;
                        left: 34.9rem;
                        width: 25.4rem;
                        height: 25.6rem;

                        &::before {
                            background-image: url('../img/fv_bg_house.png');
                        }
                    }

                    &.reform {
                        top: 29.3rem;
                        left: 17.7rem;
                        width: 27.1rem;
                        height: 22.7rem;

                        &::before {
                            background-image: url('../img/fv_bg_reform.png');
                        }
                    }

                    &.other1 {
                        top: 12.8rem;
                        right: 19.7rem;
                        width: 46.6rem;
                        height: 27.7rem;

                        &::before {
                            background-image: url('../img/fv_bg_other1.png');
                        }
                    }

                    &.water {
                        top: 18.9rem;
                        right: 42.5rem;
                        width: 38.3rem;
                        height: 30.2rem;

                        &::before {
                            background-image: url('../img/fv_bg_water.png');
                        }
                    }

                    &.fun {
                        top: 23.9rem;
                        right: 16.7rem;
                        width: 33.5rem;
                        height: 35.3rem;

                        &::before {
                            background-image: url('../img/fv_bg_fun.png');
                        }
                    }

                    &.gas {
                        left: 32.6rem;
                        bottom: 13.2rem;
                        width: 53.7rem;
                        height: 41.9rem;

                        &::before {
                            background-image: url('../img/fv_bg_gas.png');
                        }
                    }

                    &.eco {
                        right: 39.6rem;
                        bottom: 17.5rem;
                        width: 25.4rem;
                        height: 25.2rem;

                        &::before {
                            background-image: url('../img/fv_bg_eco.png');
                        }
                    }

                    &.other2 {
                        left: 18.6rem;
                        bottom: 7.5rem;
                        width: 38.0rem;
                        height: 27.9rem;

                        &::before {
                            background-image: url('../img/fv_bg_other2.png');
                        }
                    }

                    &.other3 {
                        right: 20.3rem;
                        bottom: 6.9rem;
                        width: 29.2rem;
                        height: 20.3rem;

                        &::before {
                            background-image: url('../img/fv_bg_other3.png');
                        }
                    }
                }

                /* MARK: pin */
                .pin {
                    position: absolute;
                    padding: .5rem 0 2.0rem;
                    cursor: pointer;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    z-index: 2;
                    transition: all 400ms var(--tran_bezier2);

                    &.unselected,
                    &.unhover {
                        opacity: 0.3;
                        filter: grayscale(100%);

                        .pin_filler {
                            animation-play-state: paused;
                        }
                    }

                    &.hover,
                    &.selected {
                        .pin_filler {
                            animation-play-state: paused;
                        }
                    }

                    &.hover,
                    &.selected {
                        z-index: 4;
                    }

                    &.food {
                        top: 6.0rem;
                        right: 45.0rem;

                        .pin_filler {
                            top: 0;
                            animation-delay: -200ms;
                        }
                    }

                    &.seminar {
                        top: 7.0rem;
                        left: 52.0rem;

                        .pin_filler {
                            top: 0;
                            animation-delay: -400ms;
                        }
                    }

                    &.house {
                        top: 17.0rem;
                        left: 27.0rem;

                        .pin_filler {
                            top: 0;
                            animation-delay: -600ms;
                        }
                    }

                    &.reform {
                        top: 23.0rem;
                        left: 11.0rem;

                        .pin_filler {
                            top: 0;
                            animation-delay: -800ms;
                        }
                    }

                    &.water {
                        top: 29.0rem;
                        left: 71.0rem;

                        .pin_filler {
                            bottom: 0;
                            animation-delay: -1000ms;
                        }
                    }

                    &.fun {
                        top: 23.0rem;
                        right: 17.0rem;

                        .pin_filler {
                            top: 0;
                            animation-delay: -1200ms;
                        }
                    }

                    &.gas {
                        left: 44.0rem;
                        bottom: 31.0rem;

                        .pin_filler {
                            bottom: 0;
                            animation-delay: -1400ms;
                        }
                    }

                    &.eco {
                        top: 41.0rem;
                        right: 48.0rem;

                        .pin_filler {
                            bottom: 0;
                            animation-delay: -1600ms;
                        }
                    }

                    .pin_filler {
                        position: relative;
                        display: block;
                        border-width: .3rem;
                        border-style: solid;
                        border-color: var(--corporate_green);
                        border-radius: 100vh;
                        background-color: var(--white);
                        padding: 0.4rem 1.2rem;
                        opacity: 1.0;
                        animation-name: pin_floating;
                        animation-duration: 2.0s;
                        animation-iteration-count: infinite;
                        animation-timing-function: ease-in-out;
                        animation-fill-mode: both;

                        &::before,
                        &::after {
                            position: absolute;
                            content: '';
                            left: 0;
                            right: 0;
                            margin: 0 auto;
                        }

                        &::before {
                            bottom: -2.0rem;
                            background-color: var(--corporate_green);
                            width: 1.8rem;
                            height: 2.0rem;
                            clip-path: polygon(50% 100%, 0 0, 100% 0);
                        }

                        &::after {
                            bottom: -1.2rem;
                            background-color: var(--white);
                            width: 1.0rem;
                            height: 1.4rem;
                            clip-path: polygon(50% 100%, 0 0, 100% 0);
                        }

                        .title {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            gap: 1.0rem;

                            .icon {
                                width: 2.7rem;
                                height: 2.7rem;
                                background-size: cover;
                            }

                            .name {
                                font-size: 2.0rem;
                                font-weight: 600;
                                line-height: 1.2;
                                color: var(--gray33);
                                white-space: nowrap;
                            }
                        }
                    }
                }

                &:has(.selected) {
                    z-index: 14;
                    pointer-events: none;
                }
            }

            /* MARK: title */
            #title {
                position: absolute;
                top: 2.5rem;
                left: 0;
                width: 45.0rem;
                height: 7.0rem;
                font-size: 4.0rem;
                font-weight: 600;
                color: var(--acnt_yellow);
                background-color: var(--main_navy);
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 1.6rem;
                opacity: 1.0;
                transition: all 800ms var(--tran_bezier2) 2.0s;
                z-index: 2;

                .mini_title {
                    font-size: 2.4rem;
                }
            }

            /* MARK: visit */
            #visit {
                position: fixed;
                top: 23.0rem;
                right: 0;
                z-index: 4;
                opacity: 1.0;
                transform: translateX(0%);
                transition: all 800ms var(--tran_bezier2) 2.0s;
                filter: drop-shadow(0 0 0.5rem #FFFFFF80);

                &.hidden {
                    display: none;
                }

                a {
                    position: relative;
                    width: 7.0rem;
                    height: 30.0rem;
                    background-color: var(--acnt_yellow);
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 1.2rem;
                    border-radius: 2.0rem 0 0 2.0rem;
                    transition: all 400ms var(--tran_bezier2);

                    .visit_icon {
                        position: relative;
                        width: 4.3rem;
                        height: 3.3rem;

                        &::before,
                        &::after {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 4.3rem;
                            height: 3.3rem;
                            background-size: 2.3rem 3.3rem;
                            background-position: center;
                            transition: all 400ms var(--tran_bezier2);
                        }

                        &::before {
                            background-image: url('../img/fv_visit_note.png');
                        }

                        &::after {
                            background-image: url('../img/fv_visit_note_hover.png');
                            opacity: 0.0;
                        }
                    }

                    .visit_text {
                        position: relative;
                        overflow: hidden;
                        width: 4.3rem;
                        height: 20.8rem;
                        font-size: 2.4rem;
                        font-weight: 700;
                        writing-mode: vertical-rl;

                        &::before,
                        &::after {
                            content: '来場予約はこちら';
                            position: absolute;
                            top: 0;
                            left: 0;
                            transition: all 400ms var(--tran_bezier2);
                        }

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

                        &::after {
                            color: var(--acnt_yellow);
                            opacity: 0.0;
                        }
                    }

                    &:hover {
                        background-color: var(--main_navy);

                        .visit_text {
                            &::after {
                                opacity: 1.0;
                            }
                        }

                        .visit_icon {
                            &::after {
                                opacity: 1.0;
                                animation: visit_ring 300ms var(--tran_bezier2) forwards;
                            }
                        }
                    }
                }
            }

            /* MARK: up_coming */
            #up_coming {
                position: absolute;
                right: 10.0rem;
                bottom: 5.0rem;
                transform: scale(1.0);
                transition: transform 800ms var(--tran_bezier2);
                z-index: 3;

                &:hover {
                    transform: scale(1.17);
                    text-decoration: underline;
                }

                &.hidden {
                    display: none;
                }

                &.close {
                    visibility: hidden;
                }

                #up_coming_wrapper {
                    transition: all 800ms var(--tran_bezier2) 2.0s;

                    &.fade_out {
                        opacity: 0.0;
                        transform: scale(0.8);
                        transition:
                            opacity 400ms var(--tran_bezier2),
                            transform 400ms var(--tran_bezier2);
                    }

                    a {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        gap: 1.6rem;
                        padding: 1.0rem;
                        background-color: var(--white);
                        border-width: .3rem;
                        border-style: solid;
                        border-color: var(--grayA9);
                        text-decoration: none;
                        color: var(--gray33);

                        .up_coming_photo {
                            img {
                                width: 8.0rem;
                                height: 8.0rem;
                            }
                        }

                        .up_coming_text {
                            width: 16.0rem;
                            font-size: 1.6rem;
                            font-weight: 600;
                            line-height: 1.6;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            line-clamp: 3;
                            -webkit-line-clamp: 3;
                            overflow: hidden;
                        }
                    }

                    #up_coming_close {
                        position: absolute;
                        top: -1.0rem;
                        right: -1.0rem;
                        width: 3.3rem;
                        height: 3.3rem;
                        background-color: var(--grayA9);
                        border-radius: 50%;
                        border: .2rem solid var(--grayA9);
                        cursor: pointer;
                        transition: all 400ms var(--tran_bezier2);

                        &::before,
                        &::after {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            margin: auto;
                            width: 2.0rem;
                            height: .2rem;
                            background-color: var(--white);
                            transition: all 400ms var(--tran_bezier2);
                        }

                        &::before {
                            transform: rotate(45deg);
                        }

                        &::after {
                            transform: rotate(-45deg);
                        }

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

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

                            &::before {
                                transform: rotate(45deg) scaleX(0.8);
                            }

                            &::after {
                                transform: rotate(-45deg) scaleX(0.8);
                            }
                        }
                    }
                }
            }

            /* MARK: menu */
            #menu_bg {
                visibility: hidden;
                position: fixed;
                top: 0;
                right: 0;
                width: 100vw;
                height: 100vh;
                background-color: var(--black30);
                opacity: 0.0;
                z-index: 5;
                transition: opacity 800ms var(--tran_bezier2);

                &.show {
                    visibility: visible;
                    opacity: 1.0;
                    z-index: 10;
                }
            }

            #menu_button {
                display: none;

                &+label {
                    position: fixed;
                    top: 3.0rem;
                    right: 2.0rem;
                    width: 4.2rem;
                    height: 4.8rem;
                    cursor: pointer;
                    z-index: 7;
                    filter: drop-shadow(0 0 2.0rem var(--white));
                    transition:
                        opacity 800ms var(--tran_bezier2) 2.0s,
                        transform 800ms var(--tran_bezier2) 2.0s;

                    .bar {
                        position: absolute;
                        left: 0;
                        right: 0;
                        margin: 0 auto;
                        width: 3.6rem;
                        height: .4rem;
                        background-color: var(--grayA9);
                        opacity: 1.0;
                        transform: scale(1.0);
                        transition: all 400ms var(--tran_bezier2);

                        &:nth-of-type(1) {
                            top: 0.45rem;
                            animation: menu_button_upper_reverse 800ms var(--tran_bezier2) forwards;
                            z-index: 2;
                        }

                        &:nth-of-type(2) {
                            top: 1.5rem;
                            animation: menu_button_middle_reverse 800ms var(--tran_bezier2) forwards;
                            z-index: 1;
                        }

                        &:nth-of-type(3) {
                            top: 2.55rem;
                            animation: menu_button_lower_reverse 800ms var(--tran_bezier2) forwards;
                            z-index: 2;
                        }
                    }

                    .text {
                        position: absolute;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        margin: 0 auto;
                        width: 100%;
                        height: 1.2rem;
                        z-index: 2;

                        &::before,
                        &::after {
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            margin: 0 auto;
                            font-size: 1.2rem;
                            font-weight: 600;
                            line-height: 1.0;
                            letter-spacing: .05rem;
                            text-align: center;
                            transition: all 400ms var(--tran_bezier2);
                        }

                        &::before {
                            content: 'MENU';
                        }

                        &::after {
                            content: 'CLOSE';
                            opacity: 0.0;
                            transform: translateX(-100%);
                            pointer-events: none;
                        }
                    }
                }

                &:checked {

                    &+label {
                        z-index: 12;

                        .bar {
                            &:nth-of-type(1) {
                                animation: menu_button_upper_forward 800ms var(--tran_bezier2) forwards;
                            }

                            &:nth-of-type(2) {
                                animation: menu_button_middle_forward 800ms var(--tran_bezier2) forwards;
                            }

                            &:nth-of-type(3) {
                                animation: menu_button_lower_forward 800ms var(--tran_bezier2) forwards;
                            }
                        }

                        .text {
                            &::before {
                                opacity: 0.0;
                                transform: translateX(100%);
                            }

                            &::after {
                                opacity: 1.0;
                                transform: translateX(0%);
                            }
                        }

                        &+#menu {
                            visibility: visible;
                            transform: translateX(0%) scale(1.0);
                            opacity: 1.0;
                            z-index: 11;
                        }
                    }
                }
            }

            #menu {
                visibility: hidden;
                margin: 0;
                padding: 0;
                list-style: none;
                position: fixed;
                top: 0;
                right: 0;
                width: 50.0rem;
                height: 100vh;
                background-color: var(--white);
                z-index: 6;
                transition: all 800ms var(--tran_bezier2);
                transform-origin: center left;
                transform: translateX(100%) scale(1.0);
                opacity: 0.0;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                padding: 12.0rem 5.0rem 0;

                li {
                    width: 100%;

                    &.menu_anchor {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 2.4rem;
                        font-weight: 600;
                        color: var(--gray33);
                        text-decoration: none;
                        text-align: center;
                        border-bottom: .24rem solid var(--main_navy);
                        height: 8.0rem;
                        background-color: var(--white);
                        transition: all 400ms var(--tran_bezier2);
                        cursor: pointer;

                        &:hover {
                            letter-spacing: .4rem;
                            text-decoration: underline;
                            text-underline-offset: .4rem;
                        }
                    }

                    a {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 2.4rem;
                        font-weight: 600;
                        color: var(--gray33);
                        text-decoration: none;
                        text-align: center;
                        border-bottom: .24rem solid var(--main_navy);
                        height: 8.0rem;
                        background-color: var(--white);
                        transition: all 400ms var(--tran_bezier2);
                        gap: 0.8rem;

                        &:hover {
                            letter-spacing: .4rem;
                            text-decoration: underline;
                            text-underline-offset: .4rem;
                        }

                        img {
                            width: 2.8rem;
                            height: auto;
                        }
                    }

                    &:nth-of-type(1) {
                        border-top: .24rem solid var(--main_navy);
                    }

                    &.hidden {
                        display: none;
                    }
                }
            }

            /* MARK: modal */
            #modal_bg {
                visibility: hidden;
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background-color: var(--black30);
                opacity: 0.0;
                z-index: 8;
                transition: opacity 400ms var(--tran_bezier2);

                &.show {
                    visibility: visible;
                    opacity: 1.0;
                    z-index: 13;
                }
            }

            #modal {
                position: fixed;
                top: 0;
                left: 0;
                width: 54.0rem;
                height: 100vh;
                background-color: var(--white);
                filter: drop-shadow(0 0 .5rem #000000);
                transition: transform 400ms var(--tran_bezier2);
                transform: translateY(101%);
                z-index: 9;

                &.open {
                    z-index: 15;
                    transform: translateY(0%);
                }

                .modal_close {
                    position: absolute;
                    top: 3.0rem;
                    right: 2.0rem;
                    width: 3.3rem;
                    height: 3.3rem;
                    background-color: var(--grayA9);
                    border-radius: 50%;
                    border: .2rem solid var(--grayA9);
                    transition: all 400ms var(--tran_bezier2);
                    cursor: pointer;
                    z-index: 2;

                    &::before,
                    &::after {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        margin: auto;
                        width: 2.0rem;
                        height: .2rem;
                        background-color: var(--white);
                        transition: all 400ms var(--tran_bezier2);
                    }

                    &::before {
                        transform: rotate(45deg);
                    }

                    &::after {
                        transform: rotate(-45deg);
                    }

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

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

                        &::before {
                            transform: rotate(45deg) scaleX(0.8);
                        }

                        &::after {
                            transform: rotate(-45deg) scaleX(0.8);
                        }
                    }
                }

                .modal_content {
                    width: 100%;
                    height: 100%;
                    overflow: scroll;
                    display: none;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: center;
                    gap: 2.0rem;
                    padding: 10.0rem 7.0rem;

                    &.show {
                        display: flex;
                    }

                    .whole_title {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap: 2.0rem;
                        width: 100%;
                        padding: 1.3rem 0;
                        border-width: .3rem 0 .3rem 0;
                        border-style: solid;
                        border-color: var(--grayA9);

                        .icon {
                            width: 3.5rem;
                            height: 3.5rem;
                            background-size: cover;
                        }

                        .name {
                            font-size: 3.2rem;
                            font-weight: 600;
                            line-height: 1.2;
                            color: var(--gray33);
                            white-space: nowrap;
                        }
                    }

                    .anchors,
                    .articles {
                        margin: 0;
                        padding: 0;
                        list-style: none;
                    }

                    .anchors {
                        width: 100%;
                        display: flex;
                        flex-flow: row wrap;
                        gap: 1.5rem;
                        margin-bottom: 2.0rem;

                        li {
                            position: relative;
                            width: 48%;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            height: 5.0rem;
                            background-color: var(--white);
                            border-bottom: .1rem solid var(--grayA9);
                            font-size: 1.8rem;
                            font-weight: 600;
                            line-height: 1.2;
                            padding: 0 4.2rem 0 1.0rem;
                            color: var(--main_navy);
                            text-decoration: none;
                            transition: background-color 400ms var(--tran_bezier2);
                            cursor: pointer;

                            &::before {
                                content: '';
                                position: absolute;
                                right: 1.0rem;
                                background-color: var(--grayA9);
                                border-radius: 50%;
                                width: 2.2rem;
                                height: 2.2rem;
                            }

                            &::after {
                                content: '';
                                position: absolute;
                                right: 1.0rem;
                                background-color: var(--white);
                                width: 2.2rem;
                                height: 2.2rem;
                                mask-image: url('../img/modal_anchor.svg');
                            }

                            &:hover {
                                color: var(--main_navy);
                                background-color: var(--acnt_light_blue);
                            }
                        }
                    }

                    .articles {
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-start;
                        align-items: center;
                        gap: 8.0rem;

                        li {
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            align-items: flex-start;
                            gap: 2.0rem;

                            .title {
                                font-size: 2.8rem;
                                font-weight: 600;
                                color: var(--main_navy);
                                line-height: 1.5;
                            }

                            .photo {
                                width: 100%;

                                img {
                                    width: 100%;
                                    height: auto;
                                }
                            }

                            .body {
                                font-size: 1.8rem;
                                font-weight: 400;
                                color: var(--gray33);

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

                .modal_footer {
                    position: relative;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    .modal_top_back {
                        position: absolute;
                        bottom: -4.0rem;
                        right: -4.7rem;
                        width: 3.3rem;
                        height: 3.3rem;
                        background-color: var(--grayA9);
                        border-radius: 50%;
                        border: .2rem solid var(--grayA9);
                        transition: all 400ms var(--tran_bezier2);
                        cursor: pointer;

                        &::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            margin: auto;
                            background-color: var(--white);
                            transition: all 400ms var(--tran_bezier2);
                            width: 100%;
                            height: 100%;
                            mask-image: url('../img/modal_top_back.svg');
                        }

                        &::after {
                            content: 'TOP';
                            position: absolute;
                            bottom: -2.0rem;
                            left: 0;
                            right: 0;
                            margin: 0 auto;
                            font-size: 1.2rem;
                            font-weight: 600;
                            line-height: 1.0;
                            letter-spacing: 0.05rem;
                            text-align: center;
                            white-space: nowrap;
                            transition: all 400ms var(--tran_bezier2);
                        }

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

                            &::before {
                                background-color: var(--grayA9);
                                transform: translateY(-.2rem);
                            }

                            &::after {
                                letter-spacing: 0.2rem;
                            }
                        }
                    }
                }
            }
        }
    }

    /* MARK: 768〜1280px */
    @media only screen and (max-width: 1279px) {

        &.loading,
        &.preparing {
            .fv {
                #scroller {
                    #virtual_map {
                        transform: scale(0.5);

                        .pin {
                            padding: 1.4rem 0 5.1rem;

                            .pin_filler {
                                border-width: .8rem;
                                padding: 1.1rem 3.0rem;

                                &::before {
                                    bottom: -5.1rem;
                                    width: 4.7rem;
                                    height: 5.1rem;
                                }

                                &::after {
                                    bottom: -3.0rem;
                                    width: 2.6rem;
                                    height: 3.4rem;
                                }

                                .title {
                                    gap: 2.6rem;

                                    .icon {
                                        width: 6.9rem;
                                        height: 6.9rem;
                                    }

                                    .name {
                                        font-size: 5.1rem;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .fv {
            height: 184.2rem;

            #scroller {
                width: 100vw;
                height: 184.2rem;
                overflow-x: scroll;
                overflow-y: hidden;
                scroll-snap-type: x mandatory;
                scroll-behavior: smooth;

                .scroll-hint-icon-wrap {
                    left: 102.0rem;

                    .scroll-hint-icon {
                        top: calc(50% - 9.5rem);
                        left: calc(50% - 14.0rem);
                    }
                }

                #virtual_map {
                    top: 0;
                    margin: 0;
                    width: 331.6em;
                    height: 184.2rem;
                    position: relative;
                    transition: all 800ms var(--tran_bezier2);

                    /* MARK: piece */
                    .piece {
                        &.food {
                            top: 17.0rem;
                            right: 72.0rem;
                            width: 66.7rem;
                            height: 43.7rem;
                        }

                        &.seminar {
                            top: 19.6rem;
                            left: 115.7rem;
                            width: 58.4rem;
                            height: 58.7rem;
                        }

                        &.house {
                            top: 40.0rem;
                            left: 80.3rem;
                            width: 58.4rem;
                            height: 58.9rem;
                        }

                        &.reform {
                            top: 67.4rem;
                            left: 40.7rem;
                            width: 62.3rem;
                            height: 52.2rem;
                        }

                        &.other1 {
                            top: 29.4rem;
                            right: 45.3rem;
                            width: 107.2rem;
                            height: 63.7rem;
                        }

                        &.water {
                            top: 43.5rem;
                            right: 97.8rem;
                            width: 88.1rem;
                            height: 69.5rem;
                        }

                        &.fun {
                            top: 55.0rem;
                            right: 38.4rem;
                            width: 77.1rem;
                            height: 81.2rem;
                        }

                        &.gas {
                            left: 75.0rem;
                            bottom: 30.4rem;
                            width: 123.5rem;
                            height: 96.4rem;
                        }

                        &.eco {
                            right: 91.1rem;
                            bottom: 40.3rem;
                            width: 58.4rem;
                            height: 58.0rem;
                        }

                        &.other2 {
                            left: 42.8rem;
                            bottom: 17.3rem;
                            width: 87.4rem;
                            height: 64.2rem;
                        }

                        &.other3 {
                            right: 46.7rem;
                            bottom: 15.9rem;
                            width: 67.2rem;
                            height: 46.7rem;
                        }
                    }

                    /* MARK: pin */
                    .pin {
                        padding: .9rem 0 3.4rem;

                        &.food {
                            top: 13.8rem;
                            right: 103.5rem;
                        }

                        &.seminar {
                            top: 16.1rem;
                            left: 119.6rem;
                        }

                        &.house {
                            top: 39.1rem;
                            left: 62.1rem;
                        }

                        &.reform {
                            top: 52.9rem;
                            left: 25.3rem;
                        }

                        &.water {
                            top: 66.7rem;
                            left: 163.3rem;
                        }

                        &.fun {
                            top: 52.9rem;
                            right: 39.1rem;
                        }

                        &.gas {
                            left: 101.2rem;
                            bottom: 71.3rem;
                        }

                        &.eco {
                            top: 94.3rem;
                            right: 110.4rem;
                        }

                        .pin_filler {
                            border-width: .5rem;
                            padding: .7rem 2.0rem;

                            &::before {
                                bottom: -3.4rem;
                                width: 3.1rem;
                                height: 3.4rem;
                            }

                            &::after {
                                bottom: -2.0rem;
                                width: 1.7rem;
                                height: 2.26rem;
                            }

                            .title {
                                gap: 1.7rem;

                                .icon {
                                    width: 4.6rem;
                                    height: 4.6rem;
                                }

                                .name {
                                    font-size: 3.4rem;
                                }
                            }
                        }
                    }
                }

                /* MARK: title */
                #title {
                    position: sticky;
                    top: 3.0rem;
                    transition: all 800ms var(--tran_bezier2) 3.0s;
                }

                /* MARK: visit */
                #visit {
                    top: 55.0rem;
                    width: 8.0rem;
                    transition: all 800ms var(--tran_bezier2) 3.0s;

                    a {
                        width: 8.0rem;
                        height: 38.0rem;

                        .visit_icon {
                            width: 5.0rem;
                            height: 4.3rem;

                            &::before,
                            &::after {
                                width: 5.6rem;
                                height: 4.3rem;
                                background-size: 3.0rem 4.3rem;
                            }
                        }

                        .visit_text {
                            width: 5.4rem;
                            height: 28.0rem;
                            font-size: 3.2rem;
                        }
                    }
                }

                /* MARK: up_coming */
                #up_coming {
                    position: sticky;
                    width: 72.0rem;
                    bottom: 0;
                    left: 30.0rem;

                    &:hover {
                        transform: scale(1.0);
                    }

                    #up_coming_wrapper {
                        transition: all 800ms var(--tran_bezier2) 3.0s;

                        a {
                            gap: 3.2rem;
                            padding: 2.0rem;
                            border-width: .6rem;

                            .up_coming_photo {
                                img {
                                    width: 12.0rem;
                                    height: 12.0rem;
                                }
                            }

                            .up_coming_text {
                                width: 52.0rem;
                                font-size: 3.2rem;
                                line-height: 1.5;
                            }
                        }

                        #up_coming_close {
                            top: -2.0rem;
                            right: -2.0rem;
                            width: 6.6rem;
                            height: 6.6rem;
                            border: .4rem solid var(--grayA9);

                            &::before,
                            &::after {
                                width: 4.0rem;
                                height: .4rem;
                            }

                        }
                    }
                }

                /* MARK: menu */
                #menu_button {
                    &+label {
                        right: 1.0rem;
                        width: 9.7rem;
                        height: 11.0rem;
                        transition:
                            opacity 800ms var(--tran_bezier2) 3.0s,
                            transform 800ms var(--tran_bezier2) 3.0s;

                        .bar {
                            width: 8.3rem;
                            height: .9rem;

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

                            &:nth-of-type(2) {
                                top: 3.5rem;
                            }

                            &:nth-of-type(3) {
                                top: 5.9rem;
                            }
                        }

                        .text {
                            height: 2.8rem;

                            &::before,
                            &::after {
                                font-size: 2.8rem;
                                letter-spacing: .1rem;
                            }
                        }
                    }
                }

                #menu {
                    width: 100vw;
                    height: 100vh;
                    padding: 30.0rem 7.5rem 0;

                    li {

                        &.menu_anchor,
                        a {
                            font-size: 4.8rem;
                            height: 18.0rem;
                            gap: 1.6rem;
                            border-bottom: .72rem solid var(--main_navy);

                            img {
                                width: 5.6rem;
                            }
                        }

                        &:nth-of-type(1) {
                            border-top: .72rem solid var(--main_navy);
                        }
                    }
                }

                /* MARK: modal */
                #modal {
                    width: 100vw;
                    height: 100%;

                    .modal_close {
                        top: 4.5rem;
                        right: 4.5rem;
                        width: 9.9rem;
                        height: 9.9rem;
                        border: .6rem solid var(--grayA9);

                        &::before,
                        &::after {
                            width: 6.0rem;
                            height: .6rem;
                        }
                    }

                    .modal_content {
                        gap: 6.0rem;
                        padding: 21.0rem 10.5rem;

                        .whole_title {
                            gap: 6.0rem;
                            padding: 3.9rem 0;
                            border-width: .9rem 0 .9rem 0;

                            .icon {
                                width: 10.5rem;
                                height: 10.5rem;
                            }

                            .name {
                                font-size: 7.7rem;
                            }
                        }

                        .anchors {
                            gap: 4.5rem;
                            margin-bottom: 6.0rem;

                            li {
                                width: 47%;
                                height: 15.0rem;
                                border-bottom: .3rem solid var(--grayA9);
                                font-size: 4.5rem;
                                padding: 0 9.0rem 0 1.8rem;

                                &::before {
                                    right: 2.0rem;
                                    width: 5.0rem;
                                    height: 5.0rem;
                                }

                                &::after {
                                    right: 2.0rem;
                                    width: 5.0rem;
                                    height: 5.0rem;
                                }
                            }
                        }

                        .articles {
                            gap: 24.0rem;

                            li {
                                gap: 6.0rem;

                                .title {
                                    font-size: 6.8rem;
                                }

                                .body {
                                    font-size: 4.4rem;
                                }
                            }
                        }
                    }

                    .modal_footer {
                        .modal_top_back {
                            bottom: -12.0rem;
                            right: -6.0rem;
                            width: 9.9rem;
                            height: 9.9rem;
                            border: .6rem solid var(--grayA9);

                            &::after {
                                bottom: -6.0rem;
                                font-size: 3.6rem;
                                letter-spacing: 0.1rem;
                            }
                        }
                    }
                }
            }
        }

        /* MARK: 〜767px */
        @media only screen and (max-width: 767px) {

            &.loading,
            &.preparing {
                .fv {
                    #scroller {
                        #virtual_map {
                            transform: scale(0.5);

                            .pin {
                                padding: 1.8rem 0 6.8rem;

                                .pin_filler {
                                    border-width: 1.0rem;
                                    padding: 1.4rem 4.0rem;

                                    &::before {
                                        bottom: -6.8rem;
                                        width: 6.2rem;
                                        height: 6.8rem;
                                    }

                                    &::after {
                                        bottom: -4.0rem;
                                        width: 3.4rem;
                                        height: 4.52rem;
                                    }

                                    .title {
                                        gap: 3.4rem;

                                        .icon {
                                            width: 9.2rem;
                                            height: 9.2rem;
                                        }

                                        .name {
                                            font-size: 6.8rem;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .fv {
                height: 136.0rem;

                #scroller {
                    height: 136.0rem;

                    .scroll-hint-icon-wrap {
                        left: 84.0rem;
                    }

                    #virtual_map {
                        width: 244.8em;
                        height: 136.0rem;

                        /* MARK: piece */
                        .piece {
                            &.food {
                                top: 12.6rem;
                                right: 53.2rem;
                                width: 49.3rem;
                                height: 32.3rem;
                            }

                            &.seminar {
                                top: 14.5rem;
                                left: 85.5rem;
                                width: 43.2rem;
                                height: 43.4rem;
                            }

                            &.house {
                                top: 29.6rem;
                                left: 59.3rem;
                                width: 43.2rem;
                                height: 43.5rem;
                            }

                            &.reform {
                                top: 49.8rem;
                                left: 30.1rem;
                                width: 46.1rem;
                                height: 38.6rem;
                            }

                            &.other1 {
                                top: 21.8rem;
                                right: 33.5rem;
                                width: 79.2rem;
                                height: 47.1rem;
                            }

                            &.water {
                                top: 32.1rem;
                                right: 72.3rem;
                                width: 65.1rem;
                                height: 51.3rem;
                            }

                            &.fun {
                                top: 40.6rem;
                                right: 28.4rem;
                                width: 57.0rem;
                                height: 60.0rem;
                            }

                            &.gas {
                                left: 55.4rem;
                                bottom: 22.4rem;
                                width: 91.3rem;
                                height: 71.2rem;
                            }

                            &.eco {
                                right: 67.3rem;
                                bottom: 29.8rem;
                                width: 43.2rem;
                                height: 42.8rem;
                            }

                            &.other2 {
                                left: 31.6rem;
                                bottom: 12.8rem;
                                width: 64.6rem;
                                height: 47.4rem;
                            }

                            &.other3 {
                                right: 34.5rem;
                                bottom: 11.7rem;
                                width: 49.6rem;
                                height: 34.5rem;
                            }
                        }

                        /* MARK: pin */
                        .pin {
                            padding: .9rem 0 3.4rem;

                            &.food {
                                top: 10.2rem;
                                right: 76.5rem;
                            }

                            &.seminar {
                                top: 11.9rem;
                                left: 88.4rem;
                            }

                            &.house {
                                top: 28.9rem;
                                left: 45.9rem;
                            }

                            &.reform {
                                top: 39.1rem;
                                left: 18.7rem;
                            }

                            &.water {
                                top: 49.3rem;
                                left: 120.7rem;
                            }

                            &.fun {
                                top: 39.1rem;
                                right: 28.9rem;
                            }

                            &.gas {
                                left: 74.8rem;
                                bottom: 52.7rem;
                            }

                            &.eco {
                                top: 69.7rem;
                                right: 81.6rem;
                            }

                            .pin_filler {
                                border-width: .5rem;
                                padding: .7rem 2.0rem;

                                &::before {
                                    bottom: -3.4rem;
                                    width: 3.1rem;
                                    height: 3.4rem;
                                }

                                &::after {
                                    bottom: -2.0rem;
                                    width: 1.7rem;
                                    height: 2.26rem;
                                }

                                .title {
                                    gap: 1.7rem;

                                    .icon {
                                        width: 4.6rem;
                                        height: 4.6rem;
                                    }

                                    .name {
                                        font-size: 3.4rem;
                                    }
                                }
                            }
                        }
                    }

                    /* MARK: visit */




                    /* MARK: up_coming */
                    #up_coming {
                        left: 2.0rem;

                        #up_coming_wrapper {
                            a {
                                gap: 3.2rem;
                                padding: 2.0rem;
                                border-width: .6rem;

                                .up_coming_photo {
                                    img {
                                        width: 12.0rem;
                                        height: 12.0rem;
                                    }
                                }

                                .up_coming_text {
                                    width: 52.0rem;
                                    font-size: 3.2rem;
                                    line-height: 1.5;
                                }
                            }

                            #up_coming_close {
                                top: -2.0rem;
                                right: -2.0rem;
                                width: 6.6rem;
                                height: 6.6rem;
                                border: .4rem solid var(--grayA9);

                                &::before,
                                &::after {
                                    width: 4.0rem;
                                    height: .4rem;
                                }

                            }
                        }
                    }

                    /* MARK: menu */
                    #menu_button {
                        &+label {
                            width: 8.4rem;

                            .bar {
                                width: 7.2rem;
                                height: .8rem;

                                &:nth-of-type(1) {
                                    top: .9rem;
                                }

                                &:nth-of-type(2) {
                                    top: 3.0rem;
                                }

                                &:nth-of-type(3) {
                                    top: 5.1rem;
                                }
                            }

                            .text {
                                top: 7.0rem;
                                height: 2.4rem;

                                &::before,
                                &::after {
                                    font-size: 2.4rem;
                                    letter-spacing: .1rem;
                                }
                            }
                        }
                    }

                    #menu {
                        padding: 20.0rem 5.0rem 0;

                        li {

                            &.menu_anchor,
                            a {
                                font-size: 3.6rem;
                                height: 12.0rem;
                                gap: 1.2rem;
                                border-bottom: .48rem solid var(--main_navy);

                                img {
                                    width: 4.2rem;
                                }
                            }

                            &:nth-of-type(1) {
                                border-top: .48rem solid var(--main_navy);
                            }
                        }
                    }

                    /* MARK: modal */
                    #modal {
                        .modal_close {
                            top: 3.0rem;
                            right: 3.0rem;
                            width: 6.6rem;
                            height: 6.6rem;
                            border: .4rem solid var(--grayA9);

                            &::before,
                            &::after {
                                width: 4.0rem;
                                height: .4rem;
                            }
                        }

                        .modal_content {
                            gap: 4.0rem;
                            padding: 14.0rem 7.0rem;

                            .whole_title {
                                gap: 4.0rem;
                                padding: 2.6rem 0;
                                border-width: .6rem 0 .6rem 0;

                                .icon {
                                    width: 7.0rem;
                                    height: 7.0rem;
                                }

                                .name {
                                    font-size: 5.1rem;
                                }
                            }

                            .anchors {
                                gap: 3.0rem;
                                margin-bottom: 4.0rem;

                                li {
                                    width: 47%;
                                    height: 10.0rem;
                                    border-bottom: .2rem solid var(--grayA9);
                                    font-size: 3.0rem;
                                    padding: 0 5.3rem 0 1.0rem;

                                    &::before {
                                        right: 1.0rem;
                                        width: 3.3rem;
                                        height: 3.3rem;
                                    }

                                    &::after {
                                        right: 1.0rem;
                                        width: 3.3rem;
                                        height: 3.3rem;
                                    }
                                }
                            }

                            .articles {
                                gap: 16.0rem;

                                li {
                                    gap: 4.0rem;

                                    .title {
                                        font-size: 4.5rem;
                                    }

                                    .body {
                                        font-size: 2.9rem;
                                    }
                                }
                            }
                        }

                        .modal_footer {

                            .modal_top_back {
                                bottom: -8.0rem;
                                right: -4.0rem;
                                width: 6.6rem;
                                height: 6.6rem;
                                border: .4rem solid var(--grayA9);

                                &::after {
                                    bottom: -4.0rem;
                                    font-size: 2.4rem;
                                    letter-spacing: 0.1rem;
                                }
                            }
                        }
                    }
                }
            }
        }
    }


    /* MARK: ============ */




    /* MARK: スライドショー  */




    /* MARK: ============ */




    /* MARK: 1280〜1920px */

    .photo_conveyor {
        width: 100vw;
        display: flex;
        margin-top: 3.0rem;
        gap: 2.0rem;
        overflow-x: hidden;

        .photo_list {
            margin: 0;
            padding: .5rem 0;
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 2.0rem;
            animation: loop_scroll_left 50s infinite linear 0.5s both;

            li {
                filter: drop-shadow(.2rem .2rem .2rem var(--gray99));

                img {
                    width: 37.0rem;
                    height: 22.0rem;
                    object-fit: cover;
                    border-radius: 0.2rem;
                }
            }
        }
    }

    /* MARK: 768〜1280px */
    @media only screen and (max-width: 1279px) {

        .photo_conveyor {
            margin-top: 9.0rem;
            gap: 6.0rem;

            .photo_list {
                padding: 1.5rem 0;
                gap: 6.0rem;

                li {
                    filter: drop-shadow(.6rem .6rem .6rem var(--gray99));

                    img {
                        width: 111.0rem;
                        height: 66.0rem;
                        border-radius: 0.3rem;
                    }
                }
            }
        }

        /* MARK: 〜767px */
        @media only screen and (max-width: 767px) {
            .photo_conveyor {
                margin-top: 6.0rem;
                gap: 4.0rem;

                .photo_list {
                    padding: 1.0rem 0;
                    gap: 4.0rem;

                    li {
                        filter: drop-shadow(.4rem .4rem .4rem var(--gray99));

                        img {
                            width: 74.0rem;
                            height: 44.0rem;
                            border-radius: 0.2rem;
                        }
                    }
                }
            }
        }
    }

    /* MARK: ============ */




    /* MARK: 導入  */




    /* MARK: ============ */




    /* MARK: 1280〜1920px */

    .intro {
        position: relative;
        background-color: var(--white);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 7.0rem 0;
        gap: 12.0rem;

        .guidance {
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;

            .title {
                margin-bottom: 2.0rem;

                .pre {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 2.0rem;

                    .middle {
                        font-size: 2.0rem;
                        font-weight: 800;
                        line-height: 1.5;
                        color: var(--gray33);
                        text-align: center;
                    }

                    .left,
                    .right {
                        width: 3.3rem;
                        height: 4.5rem;
                        background-size: cover;
                    }

                    .left {
                        background-image: url('../img/intro_guidance_title_left.png');
                    }

                    .right {
                        background-image: url('../img/intro_guidance_title_right.png');
                    }
                }

                .main {
                    width: 59.6rem;
                    font-size: 4.2rem;
                    font-weight: 800;
                    letter-spacing: .4rem;
                    line-height: 1.5;
                    color: var(--main_navy);
                    text-align: center;
                }
            }

            .body {
                width: 70.0rem;
                font-size: 2.0rem;
                font-weight: 400;
                line-height: 1.8;
                color: var(--gray33);
                text-align: center;
                margin-bottom: 4.0rem;
            }

            .button {

                .ticket {
                    position: absolute;
                    top: -2.2rem;
                    left: -1.8rem;
                    transform: rotate(-6deg);
                    z-index: 2;

                    &::before {
                        content: '当日来場OK!';
                        display: block;
                        width: 100%;
                        height: 100%;
                        padding: .2rem 1.2rem;
                        border: .1rem solid var(--acnt_yellow_dark);
                        background-color: var(--white);
                        font-size: 1.6rem;
                        font-weight: 700;
                        letter-spacing: 0.1rem;
                        color: var(--gray33);
                        text-align: center;
                        opacity: 0.0;
                        transform: translate(0, -100%) scale(2.0);
                    }

                    &.animate {
                        &::before {
                            opacity: 1.0;
                            transform: translate(0, 0) scale(1.0);
                            transition: all 1200ms var(--tran_bezier2);
                        }
                    }
                }

                .menu_anchor {
                    cursor: pointer;
                }
            }

            .supplement {
                font-size: 1.4rem;
                font-weight: 700;
                letter-spacing: 0.1rem;
                line-height: 1.5;
                color: var(--gray33);
                text-align: center;
                margin-top: 1.5rem;
            }

            .people_left,
            .people_right {
                position: absolute;
                background-size: cover;

                &::before {
                    content: '';
                    display: block;
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    opacity: 0.0;
                }

                &.animate {
                    &::before {
                        opacity: 1.0;
                        transform: translate(0, 0);
                        transition: all 1200ms var(--tran_bezier2);
                    }
                }
            }

            .people_left {
                top: .0rem;
                left: 28.0rem;
                width: 11.7rem;
                height: 21.3rem;

                &::before {
                    transform: translate(0, 100%);
                    background-image: url('../img/intro_guidance_bg_left.png');
                }
            }

            .people_right {
                top: 22.0rem;
                right: 24.4rem;
                width: 9.2rem;
                height: 15.1rem;

                &::before {
                    transform: translate(0, -100%);
                    background-image: url('../img/intro_guidance_bg_right.png');
                }
            }
        }

        .privelege {
            position: relative;
            width: 101.5rem;
            padding: 5.0rem 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            gap: 3.0rem;

            .gift {
                position: absolute;
                top: -4.0rem;
                left: 0;
                right: 0;
                margin: 0 auto;
                width: 10.0rem;
                height: 10.0rem;
                background-color: var(--acnt_cream);
                border-radius: 50%;

                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    width: 4.8rem;
                    height: 4.8rem;
                    background-image: url('../img/intro_privelege_gift.png');
                    background-size: cover;
                }
            }

            .title {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 1.0rem;

                .main {
                    font-size: 3.2rem;
                    font-weight: 800;
                    line-height: 1.5;
                    color: var(--main_navy);
                    text-align: center;
                }

                .left,
                .right {
                    width: 2.5rem;
                    height: 2.7rem;
                    background-size: cover;
                }

                .left {
                    background-image: url('../img/intro_privelege_title_left.png');
                }

                .right {
                    background-image: url('../img/intro_privelege_title_right.png');
                }
            }

            .box_list {
                margin: 0;
                padding: 0;
                list-style: none;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 5.0rem;

                >li {
                    position: relative;
                    width: 25.6rem;
                    height: 25.6rem;

                    .box_content {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        border-radius: 2.0rem;
                        background-color: var(--main_navy);
                        opacity: 0.0;
                        transform: translate(0, 100%);

                        .image {
                            position: absolute;
                            left: 0;
                            right: 0;
                            margin: 0 auto;
                            background-size: cover;
                        }

                        .text {
                            position: absolute;
                            bottom: 3.0rem;
                            width: 100%;
                            font-size: 2.4rem;
                            font-weight: 600;
                            color: var(--acnt_yellow);
                            text-align: center;
                            transition: color 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
                        }
                    }

                    &:nth-of-type(1) {
                        .box_content {
                            .image {
                                top: 4.3rem;
                                width: 14.7rem;
                                height: 12.6rem;
                                background-image: url('../img/intro_privelege_box1.png');
                            }
                        }
                    }

                    &:nth-of-type(2) {
                        .box_content {
                            transition-delay: 200ms;

                            .image {
                                top: 4.3rem;
                                width: 16.1rem;
                                height: 12.2rem;
                                background-image: url('../img/intro_privelege_box2.png');
                            }
                        }
                    }

                    &:nth-of-type(3) {
                        .box_content {
                            transition-delay: 400ms;

                            .image {
                                top: 1.6rem;
                                width: 12.9rem;
                                height: 16.6rem;
                                background-image: url('../img/intro_privelege_box3.png');
                            }
                        }
                    }

                    &.animate {
                        .box_content {
                            opacity: 1.0;
                            transform: translate(0, 0);
                            transition-property: all;
                            transition-duration: 1200ms;
                            transition-timing-function: var(--tran_bezier2);
                        }
                    }
                }
            }
        }
    }

    /* MARK: 768〜1280px */
    @media only screen and (max-width: 1279px) {

        .intro {
            padding: 21.0rem 0 18.0rem;
            gap: 24.0rem;

            .guidance {

                .title {
                    margin-bottom: 6.0rem;

                    .pre {
                        gap: 6.0rem;

                        .middle {
                            font-size: 6.0rem;
                        }

                        .left,
                        .right {
                            width: 9.9rem;
                            height: 13.5rem;
                        }
                    }

                    .main {
                        width: 108.0rem;
                        font-size: 9.6rem;
                        letter-spacing: .0rem;
                    }
                }

                .body {
                    width: 108.0rem;
                    font-size: 4.8rem;
                    margin-bottom: 19.5rem;
                    text-align: left;
                }

                .button {
                    position: relative;
                    z-index: 1;

                    .ticket {
                        top: -5.25rem;
                        left: 5.25rem;

                        &::before {
                            padding: .0rem 1.8rem;
                            border: .3rem solid var(--acnt_yellow_dark);
                            font-size: 4.8rem;
                            letter-spacing: 0.1rem;
                            line-height: 1.5;
                        }
                    }
                }

                .supplement {
                    font-size: 4.2rem;
                    letter-spacing: 0.1rem;
                    margin-top: 4.5rem;
                }

                .people_left {
                    visibility: hidden;
                    top: -67.5rem;
                    left: 3.6rem;
                    width: 35.1rem;
                    height: 63.5rem;
                }

                .people_right {
                    top: 105.0rem;
                    right: 9.5rem;
                    width: 16.5rem;
                    height: 27.0rem;
                }
            }

            .privelege {
                width: 120.0rem;
                padding: 12.0rem 0 7.5rem;
                gap: 4.8rem;

                .gift {
                    position: absolute;
                    top: -12.0rem;
                    width: 30.0rem;
                    height: 30.0rem;

                    &::before {
                        width: 14.4rem;
                        height: 14.4rem;
                    }
                }

                .title {
                    align-items: flex-end;
                    gap: 3.0rem;

                    .main {
                        font-size: 6.0rem;
                    }

                    .left,
                    .right {
                        width: 7.5rem;
                        height: 8.1rem;
                    }
                }

                .box_list {
                    flex-flow: row wrap;
                    gap: 1.5rem;

                    >li {
                        width: 37.0rem;
                        height: 37.0rem;

                        .box_content {
                            border-radius: 4.5rem;

                            .text {
                                bottom: 2.0rem;
                                width: 32.0rem;
                                height: 10.8rem;
                                font-size: 4.5rem;
                                line-height: 1.2;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                left: 0;
                                right: 0;
                                margin: 0 auto;
                            }
                        }

                        &:nth-of-type(1) {
                            .box_content {
                                .image {
                                    top: 5.4rem;
                                    width: 20.4rem;
                                    height: 17.5rem;
                                }
                            }
                        }

                        &:nth-of-type(2) {
                            .box_content {
                                .image {
                                    top: 6.5rem;
                                    width: 20.4rem;
                                    height: 15.5rem;
                                }
                            }
                        }

                        &:nth-of-type(3) {
                            .box_content {
                                .image {
                                    top: 2.6rem;
                                    width: 15.8rem;
                                    height: 20.4rem;
                                }
                            }
                        }
                    }
                }
            }
        }

        /* MARK: 〜767px */
        @media only screen and (max-width: 767px) {

            .intro {
                padding: 14.0rem 0 12.0rem;
                gap: 16.0rem;

                .guidance {

                    .title {
                        margin-bottom: 4.0rem;

                        .pre {
                            gap: 4.0rem;

                            .middle {
                                font-size: 4.0rem;
                            }

                            .left,
                            .right {
                                width: 6.6rem;
                                height: 9.0rem;
                            }
                        }

                        .main {
                            width: 72.0rem;
                            font-size: 6.4rem;
                            letter-spacing: .0rem;
                        }
                    }

                    .body {
                        width: 72.0rem;
                        font-size: 3.2rem;
                        margin-bottom: 13.0rem;
                    }

                    .button {

                        .ticket {
                            top: -3.5rem;
                            left: 3.5rem;

                            &::before {
                                padding: .0rem 1.2rem;
                                border: .2rem solid var(--acnt_yellow_dark);
                                font-size: 3.2rem;
                                letter-spacing: 0.1rem;
                            }
                        }
                    }

                    .supplement {
                        font-size: 2.8rem;
                        letter-spacing: 0.1rem;
                        margin-top: 3.0rem;
                    }

                    .people_left {
                        top: -45.0rem;
                        left: 2.4rem;
                        width: 23.4rem;
                        height: 42.3rem;
                    }

                    .people_right {
                        top: 69.5rem;
                        right: 2.4rem;
                        width: 11.0rem;
                        height: 18.0rem;
                    }
                }

                .privelege {
                    width: 72.0rem;
                    padding: 8.0rem 0 5.0rem;
                    gap: 3.2rem;

                    .gift {
                        position: absolute;
                        top: -8.0rem;
                        width: 20.0rem;
                        height: 20.0rem;

                        &::before {
                            width: 9.6rem;
                            height: 9.6rem;
                        }
                    }

                    .title {
                        align-items: flex-end;
                        gap: 2.0rem;

                        .main {
                            font-size: 4.0rem;
                        }

                        .left,
                        .right {
                            width: 5.0rem;
                            height: 5.4rem;
                        }
                    }

                    .box_list {
                        flex-flow: row wrap;
                        gap: 1.0rem;

                        >li {
                            width: 22.0rem;
                            height: 22.0rem;

                            .box_content {
                                border-radius: 3.0rem;

                                .text {
                                    bottom: 1.2rem;
                                    width: 22.0rem;
                                    height: 7.2rem;
                                    font-size: 3.0rem;
                                }
                            }

                            &:nth-of-type(1) {
                                .box_content {
                                    .image {
                                        top: 3.2rem;
                                        width: 12.0rem;
                                        height: 10.3rem;
                                    }
                                }
                            }

                            &:nth-of-type(2) {
                                .box_content {
                                    .image {
                                        top: 3.8rem;
                                        width: 12.0rem;
                                        height: 9.1rem;
                                    }
                                }
                            }

                            &:nth-of-type(3) {
                                .box_content {
                                    .image {
                                        top: 1.5rem;
                                        width: 9.3rem;
                                        height: 12.0rem;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    /* MARK: ============ */




    /* MARK: セミナー  */




    /* MARK: ============ */




    /* MARK: 1280〜1920px */

    .about_seminar {
        background-color: var(--main_navy);
        padding: 9.0rem 0;
        display: flex;
        justify-content: center;
        align-items: flex-start;

        .seminar_wrapper {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;

            >.title {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                margin-bottom: 2.5rem;

                .pre {
                    font-size: 2.0rem;
                    font-weight: 800;
                    color: var(--acnt_yellow);
                    text-align: center;
                }

                .main {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 1.0rem;

                    .middle {
                        font-size: 4.8rem;
                        font-weight: 700;
                        line-height: 1.0;
                        color: var(--acnt_yellow);
                        text-align: center;
                    }

                    .left,
                    .right {
                        width: 2.5rem;
                        height: 2.7rem;
                        background-size: cover;
                    }

                    .left {
                        background-image: url('../img/seminar_title_left.png');
                    }

                    .right {
                        background-image: url('../img/seminar_title_right.png');
                    }
                }
            }

            .lead_sentence {
                width: 70.0rem;
                font-size: 1.8rem;
                font-weight: 500;
                color: var(--white);
                text-align: center;
                margin-bottom: 4.0rem;
            }

            .content_list {
                margin: 0 0 5.0rem;
                padding: 0;
                list-style: none;
                width: 90.0rem;
                display: flex;
                flex-flow: row wrap;
                justify-content: center;
                align-items: stretch;
                gap: 3.0rem;

                >li {
                    position: relative;
                    width: 28.0rem;
                    height: 39.0rem;

                    .box_content {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        border-radius: 2.0rem;
                        padding: 3.0rem 1.8rem;
                        background-color: var(--white);
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-start;
                        align-items: center;
                        gap: 2.0rem;
                        opacity: 0.0;
                        transform: translate(0, 50%);

                        .limited {
                            position: absolute;
                            top: -1.0rem;

                            .content {
                                font-size: 1.6rem;
                                font-weight: 700;
                                color: var(--white);
                                text-align: center;
                                letter-spacing: 0.0rem;
                                background-color: var(--acnt_red2);
                                width: 22.0rem;
                                height: 3.0rem;
                                border-radius: 1.0rem;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                transform: scale(0.0, 1.0);
                            }

                            &.animate {
                                .content {
                                    transform: scale(1.0, 1.0);
                                    transition: all 800ms var(--tran_bezier2) 400ms;
                                }
                            }
                        }

                        .title {
                            width: 100%;
                            font-size: 2.4rem;
                            font-weight: 800;
                            color: var(--main_navy);
                            text-align: center;
                            letter-spacing: 0.0rem;
                            line-height: 1.5;
                        }

                        .icon {
                            width: 100%;
                            height: 8.0rem;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }

                        .target {
                            width: 100%;
                            height: 3.6rem;
                            border-radius: 100vh;
                            background-color: var(--main_navy);
                            font-size: 1.4rem;
                            font-weight: 600;
                            color: var(--white);
                            text-align: left;
                            line-height: 1.2;
                            letter-spacing: 0;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }

                        .small {
                            font-size: 1.4rem;
                            font-weight: 700;
                            line-height: 1.5;
                            color: var(--gray33);
                            letter-spacing: 0.0rem;
                            margin-top: -2.0rem;
                        }

                        .text {
                            font-size: 1.6rem;
                            font-weight: 700;
                            line-height: 1.5;
                            color: var(--gray33);
                            letter-spacing: 0.0rem;
                        }
                    }

                    &:nth-of-type(1) {
                        .box_content {
                            transition-delay: 0ms;

                            .icon {
                                img {
                                    width: 5.9rem;
                                    height: 6.9rem;
                                }
                            }
                        }
                    }

                    &:nth-of-type(2) {
                        .box_content {
                            transition-delay: 200ms;

                            .icon {
                                img {
                                    width: 8.9rem;
                                    height: 6.4rem;
                                }
                            }
                        }
                    }

                    &:nth-of-type(3) {
                        .box_content {
                            transition-delay: 400ms;

                            .icon {
                                img {
                                    width: 6.1rem;
                                    height: 5.9rem;
                                }
                            }
                        }
                    }

                    &:nth-of-type(4) {
                        .box_content {
                            transition-delay: 600ms;

                            .icon {
                                img {
                                    width: 7.7rem;
                                    height: 6.9rem;
                                }
                            }
                        }
                    }

                    &:nth-of-type(5) {
                        .box_content {
                            transition-delay: 700ms;

                            .icon {
                                img {
                                    width: 8.2rem;
                                    height: 7.3rem;
                                }
                            }
                        }
                    }

                    &:nth-of-type(6) {
                        .box_content {
                            transition-delay: 800ms;

                            .icon {
                                img {
                                    width: 8.9rem;
                                    height: 8.0rem;
                                }
                            }
                        }
                    }

                    &:nth-of-type(4),
                    &:nth-of-type(5) {
                        .target {
                            .value {
                                font-size: 1.2rem;
                            }
                        }
                    }

                    &.animate {
                        .box_content {
                            opacity: 1.0;
                            transform: translate(0, 0);
                            transition-property: all;
                            transition-duration: 1200ms;
                            transition-timing-function: var(--tran_bezier2);
                        }
                    }
                }

            }

            .direction {
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                width: 100%;

                &.hidden {
                    display: none;
                }

                .people_left,
                .people_right {
                    position: absolute;
                    background-size: cover;

                    &::before {
                        content: '';
                        display: block;
                        width: 100%;
                        height: 100%;
                        background-size: cover;
                        opacity: 0.0;
                    }

                    &.animate {
                        &::before {
                            opacity: 1.0;
                            transform: translate(0, 0);
                            transition: all 1200ms var(--tran_bezier2) 200ms;
                        }
                    }
                }

                .people_left {
                    top: 5.3rem;
                    left: 4.5rem;
                    width: 6.5rem;
                    height: 14.0rem;

                    &::before {
                        transform: translate(-200%, 0%);
                        background-image: url('../img/seminar_content_bg_left.png');
                    }
                }

                .people_right {
                    top: 12.4rem;
                    right: 2.8rem;
                    width: 7.6rem;
                    height: 17.8rem;

                    &::before {
                        transform: translate(200%, 0%);
                        background-image: url('../img/seminar_content_bg_right.png');
                    }
                }

                .lead_title {
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 1.0rem;
                    margin-bottom: 2.0rem;

                    .middle {
                        overflow: hidden;

                        .content {
                            font-size: 2.4rem;
                            font-weight: 700;
                            color: var(--white);
                            text-align: center;
                            transform: translate(0%, 100%);

                            .yellow,
                            .huge {
                                font-size: 3.2rem;
                            }

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

                        &.animate {

                            .content {
                                transform: translate(0%, 0%);
                                transition: all 800ms var(--tran_bezier2) 400ms;
                            }
                        }
                    }

                    .left,
                    .right {
                        width: 2.5rem;
                        height: 2.7rem;
                        background-size: cover;
                    }

                    .left {
                        background-image: url('../img/seminar_title_left.png');
                    }

                    .right {
                        background-image: url('../img/seminar_title_right.png');
                    }
                }

                .supplement {
                    font-size: 1.4rem;
                    font-weight: 700;
                    letter-spacing: 0.1rem;
                    color: var(--white);
                    text-align: center;
                    margin-top: 2.5rem;
                }
            }
        }
    }

    /* MARK: 768〜1280px */
    @media only screen and (max-width: 1279px) {

        .about_seminar {
            padding: 18.0rem 0 30.0rem;

            .seminar_wrapper {

                >.title {
                    margin-bottom: 5.7rem;

                    .pre {
                        font-size: 5.1rem;
                    }

                    .main {
                        width: 108.0rem;
                        gap: 3.0rem;
                        align-items: flex-end;

                        .middle {
                            font-size: 10.8rem;
                            line-height: 1.2;
                        }

                        .left,
                        .right {
                            width: 7.5rem;
                            height: 8.1rem;
                        }
                    }
                }

                .lead_sentence {
                    width: 108.0rem;
                    font-size: 4.8rem;
                    margin-bottom: 9.0rem;
                    text-align: left;
                }

                .content_list {
                    margin: 0 0 11.3rem;
                    width: 108.0rem;
                    gap: 9.0rem;

                    >li {
                        width: 102.0rem;
                        height: 117.0rem;

                        .box_content {
                            border-radius: 6.0rem;
                            padding: 9.0rem;
                            gap: 6.0rem;

                            .limited {
                                top: -4.5rem;

                                .content {
                                    font-size: 4.8rem;
                                    width: 78.0rem;
                                    height: 12.0rem;
                                    border-radius: 3.0rem;
                                }
                            }

                            .title {
                                font-size: 7.2rem;
                            }

                            .icon {
                                height: 24.0rem;
                            }

                            .target {
                                height: 10.8rem;
                                font-size: 4.2rem;
                            }

                            .small {
                                font-size: 4.2rem;
                                margin-top: -6.0rem;
                            }

                            .text {
                                font-size: 4.8rem;
                            }
                        }

                        &:nth-of-type(1) {
                            height: 111.0rem;

                            .box_content {
                                .icon {
                                    img {
                                        width: 17.7rem;
                                        height: 20.7rem;
                                    }
                                }
                            }
                        }

                        &:nth-of-type(2) {
                            height: 103.5rem;

                            .box_content {
                                .icon {
                                    img {
                                        width: 26.7rem;
                                        height: 19.2rem;
                                    }
                                }
                            }
                        }

                        &:nth-of-type(3) {
                            .box_content {
                                .icon {
                                    img {
                                        width: 18.3rem;
                                        height: 17.7rem;
                                    }
                                }
                            }
                        }

                        &:nth-of-type(4) {
                            height: 111.0rem;

                            .box_content {
                                .icon {
                                    img {
                                        width: 23.1rem;
                                        height: 20.7rem;
                                    }
                                }
                            }
                        }

                        &:nth-of-type(5) {
                            height: 106.5rem;

                            .box_content {
                                .icon {
                                    img {
                                        width: 24.6rem;
                                        height: 21.9rem;
                                    }
                                }
                            }
                        }

                        &:nth-of-type(6) {
                            .box_content {
                                .icon {
                                    img {
                                        width: 26.7rem;
                                        height: 24.0rem;
                                    }
                                }
                            }
                        }

                        &:nth-of-type(4),
                        &:nth-of-type(5) {
                            .target {
                                .value {
                                    font-size: 3.6rem;
                                }
                            }
                        }
                    }
                }

                .direction {

                    .people_left {
                        top: 30.0rem;
                        left: .0rem;
                        width: 12.6rem;
                        height: 27.0rem;
                    }

                    .people_right {
                        top: 94.5rem;
                        right: .0rem;
                        width: 12.0rem;
                        height: 28.1rem;
                    }

                    .lead_sentence {
                        width: 108.0rem;
                        margin-bottom: 22.5rem;
                    }

                    .lead_title {
                        width: 108.0rem;
                        gap: 1.5rem;
                        margin-bottom: 6.0rem;
                        align-items: flex-end;

                        .middle {
                            .content {
                                font-size: 6.0rem;

                                .yellow,
                                .huge {
                                    font-size: 9.6rem;
                                }
                            }
                        }

                        .left,
                        .right {
                            width: 7.5rem;
                            height: 8.1rem;
                        }
                    }

                    .supplement {
                        font-size: 4.2rem;
                        letter-spacing: 0.3rem;
                        margin-top: 7.5rem;
                    }
                }
            }
        }

        /* MARK: 〜767px */
        @media only screen and (max-width: 767px) {

            .about_seminar {
                padding: 12.0rem 0 20.0rem;

                .seminar_wrapper {

                    >.title {
                        margin-bottom: 3.8rem;

                        .pre {
                            font-size: 3.4rem;
                        }

                        .main {
                            width: 72.0rem;
                            gap: 3.0rem;

                            .middle {
                                font-size: 7.2rem;
                            }

                            .left,
                            .right {
                                width: 5.0rem;
                                height: 5.4rem;
                            }
                        }
                    }

                    .lead_sentence {
                        width: 72.0rem;
                        font-size: 3.2rem;
                        margin-bottom: 6.0rem;
                    }

                    .content_list {
                        margin: 0 0 7.5rem;
                        width: 72.0rem;
                        gap: 6.0rem;

                        >li {
                            width: 68.0rem;
                            height: 78.0rem;

                            .box_content {
                                border-radius: 4.0rem;
                                padding: 6.0rem;
                                gap: 4.0rem;

                                .limited {
                                    top: -3.0rem;

                                    .content {
                                        font-size: 3.2rem;
                                        width: 52.0rem;
                                        height: 8.0rem;
                                        border-radius: 2.0rem;
                                    }
                                }

                                .title {
                                    font-size: 4.8rem;
                                }

                                .icon {
                                    height: 16.0rem;
                                }

                                .target {
                                    height: 7.2rem;
                                    font-size: 2.8rem;
                                }

                                .small {
                                    font-size: 2.8rem;
                                    margin-top: -4.0rem;
                                }

                                .text {
                                    font-size: 3.2rem;
                                }
                            }

                            &:nth-of-type(1) {
                                height: 74.0rem;

                                .box_content {
                                    .icon {
                                        img {
                                            width: 11.8rem;
                                            height: 13.8rem;
                                        }
                                    }
                                }
                            }

                            &:nth-of-type(2) {
                                height: 69.0rem;

                                .box_content {
                                    .icon {
                                        img {
                                            width: 17.8rem;
                                            height: 12.8rem;
                                        }
                                    }
                                }
                            }

                            &:nth-of-type(3) {
                                .box_content {
                                    .icon {
                                        img {
                                            width: 12.2rem;
                                            height: 11.8rem;
                                        }
                                    }
                                }
                            }

                            &:nth-of-type(4) {
                                height: 74.0rem;

                                .box_content {
                                    .icon {
                                        img {
                                            width: 15.4rem;
                                            height: 13.8rem;
                                        }
                                    }
                                }
                            }

                            &:nth-of-type(5) {
                                height: 71.0rem;

                                .box_content {
                                    .icon {
                                        img {
                                            width: 16.4rem;
                                            height: 14.6rem;
                                        }
                                    }
                                }
                            }

                            &:nth-of-type(6) {
                                .box_content {
                                    .icon {
                                        img {
                                            width: 17.8rem;
                                            height: 16.0rem;
                                        }
                                    }
                                }
                            }

                            &:nth-of-type(4),
                            &:nth-of-type(5) {
                                .target {
                                    .value {
                                        font-size: 2.4rem;
                                    }
                                }
                            }
                        }
                    }

                    .direction {

                        .people_left {
                            top: 20.0rem;
                            left: .0rem;
                            width: 8.4rem;
                            height: 18.0rem;
                        }

                        .people_right {
                            top: 63.0rem;
                            right: .0rem;
                            width: 8.0rem;
                            height: 18.7rem;
                        }

                        .lead_sentence {
                            width: 72.0rem;
                            margin-bottom: 15.0rem;
                        }

                        .lead_title {
                            width: 72.0rem;
                            gap: 1.0rem;
                            margin-bottom: 4.0rem;

                            .middle {
                                .content {
                                    font-size: 4.0rem;

                                    .yellow,
                                    .huge {
                                        font-size: 6.4rem;
                                    }
                                }
                            }

                            .left,
                            .right {
                                width: 5.0rem;
                                height: 5.4rem;
                            }
                        }

                        .supplement {
                            font-size: 2.8rem;
                            letter-spacing: 0.2rem;
                            margin-top: 5.0rem;
                        }
                    }
                }
            }
        }
    }

    /* MARK: ============ */




    /* MARK: 開催中のイベント  */




    /* MARK: ============ */




    /* MARK: 1280〜1920px */

    .in_session {
        position: relative;
        background-color: var(--white);
        padding: 10.0rem 0 5.0rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        &.hidden {
            display: none;
        }

        &::before,
        &::after {
            content: '';
            position: absolute;
            background-size: cover;
            z-index: 2;
        }

        &::before {
            top: 0.0rem;
            left: 21.4rem;
            width: 21.4rem;
            height: 11.7rem;
            background-image: url('../img/in_session_bg_left.png');
        }

        &::after {
            top: 0.0rem;
            right: 19.7rem;
            width: 20.0rem;
            height: 11.7rem;
            background-image: url('../img/in_session_bg_right.png');
        }

        .title {
            position: relative;
            width: 86.0rem;
            font-size: 4.2rem;
            font-weight: 700;
            text-align: center;
            color: var(--main_navy);
            line-height: 1.5;
            letter-spacing: .2rem;
            margin-bottom: 5.0rem;

            .underline {
                text-decoration: underline;
                text-decoration-color: var(--acnt_yellow);
                text-decoration-thickness: 1.2rem;
                text-underline-offset: -0.3rem;
            }
        }

        .appliance_left,
        .appliance_right {
            position: absolute;
            background-size: cover;
            transform-origin: center bottom;
            overflow-y: hidden;

            &::before {
                content: '';
                display: block;
                width: 100%;
                height: 100%;
                background-size: cover;
                opacity: 0.0;
            }

            &.animate {
                &::before {
                    opacity: 1.0;
                    transform: translate(0, 0);
                    transition: all 1200ms var(--tran_bezier2) 200ms;
                }
            }
        }

        .appliance_left {
            top: 12.2rem;
            left: 35.9rem;
            width: 6.9rem;
            height: 8.2rem;

            &::before {
                background-image: url('../img/in_session_appliance_left.png');
                transform: translate(0%, 100%);
            }
        }

        .appliance_right {
            top: 11.2rem;
            right: 31.6rem;
            width: 10.3rem;
            height: 10.3rem;

            &::before {
                background-image: url('../img/in_session_appliance_right.png');
                transform: translate(0%, 100%);
            }
        }

        .thumbnail {
            width: 86.0rem;
            border-radius: .4rem;
            filter: drop-shadow(.2rem .2rem .2rem var(--gray99));
            overflow: hidden;
            margin-bottom: 5.0rem;

            img {
                width: 100%;
                height: auto;
                opacity: 0.0;
                transform: scale(1.2);
            }

            &.animate {
                img {
                    opacity: 1.0;
                    transform: scale(1.0);
                    transition: all 1200ms var(--tran_bezier2);
                }
            }
        }

        .button {
            &.hidden {
                display: none;
            }
        }
    }

    /* MARK: 768〜1280px */
    @media only screen and (max-width: 1279px) {

        .in_session {
            padding: 22.5rem 0 15.0rem;

            &::before {
                top: 0.0rem;
                left: -24.0rem;
                width: 64.2rem;
                height: 35.1rem;
            }

            &::after {
                top: 0.0rem;
                right: -21.0rem;
                width: 60.0rem;
                height: 35.1rem;
            }

            .title {
                width: 108.0rem;
                font-size: 9.3rem;
                letter-spacing: .3rem;
                line-height: 1.5;

                .underline {
                    text-decoration-thickness: 3.6rem;
                    text-underline-offset: -0.9rem;
                }
            }

            .appliance_left {
                display: none;
                top: 34.5rem;
                left: 3.0rem;
                width: 20.7rem;
                height: 24.6rem;
            }

            .appliance_right {
                display: none;
                top: 31.5rem;
                right: -3.0rem;
                width: 30.9rem;
                height: 30.9rem;
            }

            .thumbnail {
                width: 108.0rem;
                margin-bottom: 15.0rem;
            }
        }



        /* MARK: 〜767px */
        @media only screen and (max-width: 767px) {

            .in_session {
                padding: 15.0rem 0 10.0rem;

                &::before {
                    top: 0.0rem;
                    left: -16.0rem;
                    width: 42.8rem;
                    height: 23.4rem;
                }

                &::after {
                    top: 0.0rem;
                    right: -14.0rem;
                    width: 40.0rem;
                    height: 23.4rem;
                }

                .title {
                    width: 72.0rem;
                    font-size: 6.2rem;
                    letter-spacing: .2rem;
                    line-height: 1.5;

                    .underline {
                        text-decoration-thickness: 2.4rem;
                        text-underline-offset: -0.6rem;
                    }
                }

                .appliance_left {
                    top: 23.0rem;
                    left: 2.0rem;
                    width: 13.8rem;
                    height: 16.4rem;
                }

                .appliance_right {
                    top: 21.0rem;
                    right: -2.0rem;
                    width: 20.6rem;
                    height: 20.6rem;
                }

                .thumbnail {
                    width: 72.0rem;
                    margin-bottom: 10.0rem;
                }
            }
        }
    }


    /* MARK: ============ */




    /* MARK: 開催スケジュール  */




    /* MARK: ============ */

    .schedule {
        background-color: var(--acnt_light_blue);
        padding: 10.0rem 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 4.0rem;

        &.hidden {
            display: none;
        }

        .title {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            width: 101.5rem;

            &::before,
            &::after {
                position: absolute;
                content: '';
                background-size: cover;
                transform-origin: center bottom;
                opacity: 0.0;
                transform: translate(0%, -100%);
            }

            &::before {
                top: 0;
                bottom: 0;
                margin: auto 0;
                left: 5.2rem;
                width: 12.7rem;
                height: 13.2rem;
                background-image: url('../img/schedule_title_bg_left.png');
            }

            &::after {
                top: 0;
                bottom: 0;
                margin: auto 0;
                right: 7.0rem;
                width: 11.3rem;
                height: 12.9rem;
                background-image: url('../img/schedule_title_bg_right.png');
            }

            &.animate {

                &::before,
                &::after {
                    animation: fall_and_bound 800ms ease-in-out forwards;
                }
            }

            .main {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 2.0rem;

                .middle {
                    font-size: 4.2rem;
                    font-weight: 800;
                    color: var(--main_navy);
                    letter-spacing: .3rem;
                }

                .left,
                .right {
                    width: 5.3rem;
                    height: 7.4rem;
                    background-size: cover;
                }

                .left {
                    background-image: url('../img/intro_guidance_title_left.png');
                }

                .right {
                    background-image: url('../img/intro_guidance_title_right.png');
                }
            }

            .sub {
                font-size: 2.0rem;
                font-weight: 600;
                color: var(--main_navy);
            }
        }

        .table_wrapper {

            .side_roller {

                table {
                    width: 104.5rem;
                    background-color: var(--white);
                    border-collapse: collapse;

                    thead {
                        background-color: var(--main_navy);

                        th {
                            font-size: 2.0rem;
                            font-weight: 600;
                            color: var(--white);
                            padding: 1.2rem;
                        }
                    }

                    tbody {
                        tr {
                            &.ended {
                                td {
                                    position: relative;

                                    &::after {
                                        content: '';
                                        position: absolute;
                                        top: 0;
                                        left: 0;
                                        width: 100%;
                                        height: 11.0rem;
                                        background-color: #d9d9d9b3;
                                    }
                                }
                            }

                            th,
                            td {
                                height: 11.0rem;
                                padding: 0 1.2rem;
                                border-bottom-width: .2rem;
                                border-bottom-style: solid;
                                border-bottom-color: var(--grayBF);
                            }

                            td {

                                .date_wrapper {
                                    display: flex;
                                    align-items: center;
                                    gap: 4.0rem;
                                }

                                .times {
                                    width: 6.0rem;
                                    height: 6.0rem;
                                    font-size: 1.5rem;
                                    font-weight: 700;
                                    color: var(--white);
                                    background-color: var(--main_navy);
                                    border-radius: 50%;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    white-space: nowrap;
                                }

                                .date {

                                    .year,
                                    .day {
                                        font-weight: 700;
                                        color: var(--main_navy);
                                        letter-spacing: 0;
                                        line-height: 1.5;
                                        white-space: nowrap
                                    }

                                    .year {
                                        font-size: 1.4rem;
                                    }

                                    .day {
                                        font-size: 2.0rem;
                                    }
                                }

                                .place {

                                    .venue,
                                    .address a {
                                        color: var(--gray33);
                                        font-weight: 500;
                                        white-space: nowrap
                                    }

                                    .venue {
                                        font-size: 1.8rem;
                                    }

                                    .address {
                                        display: flex;
                                        gap: 1.0rem;

                                        a {
                                            position: relative;
                                            font-size: 1.4rem;
                                            text-decoration: none;
                                            border-bottom-width: .1rem;
                                            border-bottom-style: solid;
                                            border-bottom-color: var(--grayA9);
                                            display: flex;
                                            justify-content: flex-start;
                                            align-items: center;
                                            gap: 0.5rem;
                                            padding: 0 0.5rem;
                                            transition: all 400ms var(--tran_bezier2);

                                            &::before {
                                                content: '';
                                                display: block;
                                                width: 1.3rem;
                                                height: 1.5rem;
                                                background-image: url('../img/schedule_address_icon.png');
                                                background-size: cover;
                                                background-position: center;
                                            }

                                            &:hover {
                                                border-bottom-color: var(--gray33);
                                            }
                                        }

                                        .showroom {
                                            font-size: 1.2rem;
                                            color: var(--acnt_red2);
                                            letter-spacing: 0.1rem;
                                            border: .1rem solid var(--acnt_red2);
                                            border-radius: .4rem;
                                            padding: 0 0.8rem;
                                        }
                                    }
                                }

                                .period {
                                    font-size: 1.5rem;
                                    font-weight: 400;
                                    color: var(--gray33);
                                    text-align: center;
                                    line-height: 1.5;

                                    &.accepting {
                                        position: relative;

                                        &::before,
                                        a {
                                            width: 14.0rem;
                                            height: 3.6rem;
                                            border-radius: 100vh;
                                        }

                                        &::before {
                                            content: '';
                                            position: absolute;
                                            left: 0;
                                            top: .4rem;
                                            background-color: var(--acnt_red_dark);
                                        }

                                        a {
                                            position: relative;
                                            background-color: var(--acnt_red3);
                                            font-size: 2.0rem;
                                            font-weight: 700;
                                            line-height: 1.0;
                                            letter-spacing: 0;
                                            color: var(--white);
                                            text-decoration: none;
                                            display: flex;
                                            justify-content: flex-start;
                                            align-items: center;
                                            padding: 0 1.5rem;
                                            transition: transform 400ms var(--tran_bezier2);

                                            &::after {
                                                content: '';
                                                position: absolute;
                                                top: 0;
                                                bottom: 0;
                                                right: 0.2rem;
                                                margin: auto 0;
                                                width: 2.1rem;
                                                height: 2.1rem;
                                                mask-image: url('../img/button_angle.svg');
                                                background-color: var(--white);
                                                transform: translateX(-.3rem);
                                                transition: transform 400ms var(--tran_bezier2);
                                            }

                                            &:hover {
                                                transform: translateY(.3rem);

                                                &::after {
                                                    transform: translateX(0);
                                                }
                                            }
                                        }
                                    }
                                }

                                .contents {
                                    width: 16.5rem;
                                    margin: 0;
                                    padding: 0;
                                    list-style: none;
                                    display: flex;
                                    flex-flow: row wrap;
                                    justify-content: flex-start;
                                    align-items: center;
                                    gap: .6rem;

                                    >li {
                                        display: none;
                                        position: relative;
                                        width: 3.6rem;
                                        height: 3.6rem;
                                        background-size: cover;

                                        &.visible {
                                            display: block;
                                        }

                                        &::before {
                                            content: '';
                                            opacity: 0;
                                            visibility: hidden;
                                            position: absolute;
                                            top: 2.9rem;
                                            left: 50%;
                                            margin-left: -.7rem;
                                            border: .6rem solid transparent;
                                            border-bottom: .6rem solid var(--gray99);
                                            transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
                                            z-index: 2;
                                        }

                                        &::after {
                                            opacity: 0;
                                            visibility: hidden;
                                            position: absolute;
                                            left: 50%;
                                            transform: translateX(-50%);
                                            bottom: -3.0rem;
                                            display: inline-block;
                                            padding: .5rem .8rem;
                                            white-space: nowrap;
                                            font-size: 1.2rem;
                                            line-height: 1.3;
                                            color: var(--white);
                                            background-color: var(--black40);
                                            border-radius: .3rem;
                                            transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
                                            z-index: 2;
                                        }

                                        &.water::after {
                                            content: '水まわり';
                                        }

                                        &.eco::after {
                                            content: 'エコ';
                                        }

                                        &.seminar::after {
                                            content: 'セミナー';
                                        }

                                        &.house::after {
                                            content: 'お部屋・お庭周り';
                                        }

                                        &.gas::after {
                                            content: 'ガス';
                                        }

                                        &.reform::after {
                                            content: 'フルリフォーム';
                                        }

                                        &.fun::after {
                                            content: 'お楽しみ';
                                        }

                                        &.food::after {
                                            content: '飲食';
                                        }

                                        &:hover::before,
                                        &:hover::after {
                                            opacity: 1.0;
                                            visibility: visible;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .caption {
                caption-side: bottom;
                font-size: 1.5rem;
                font-weight: 700;
                color: var(--gray33);
                text-align: left;
                padding: 2.0rem 0;
            }
        }
    }

    /* MARK: ヒント */
    .hint {
        display: flex;
        justify-content: center;

        .rounded_box {
            position: relative;
            width: 104.5rem;
            background-color: var(--white);
            padding: 5.0rem 5.0rem;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;

            &::before {
                content: '';
                position: absolute;
                top: -3.0rem;
                right: 9.0rem;
                width: 5.1rem;
                height: 4.3rem;
                background-image: url('../img/schedule_hint_tail.png');
                background-size: cover;
            }

            .hint_list {
                position: relative;
                margin: 0;
                padding: 0;
                list-style: none;
                width: 100%;
                height: 35.0rem;
                row-gap: 1.0rem;
                column-gap: 1.6rem;
                display: flex;
                flex-flow: column wrap;
                justify-content: flex-start;
                align-items: center;

                >li {
                    width: 49%;
                    height: 8.0rem;
                    background-color: var(--grayF6);
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding: 0 1.2rem;

                    .item {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        gap: 1.0rem;

                        .icon {
                            position: relative;
                            width: 3.6rem;
                            height: 3.6rem;
                            background-size: cover;
                        }

                        .name {
                            width: 14.0rem;
                            font-size: 2.0rem;
                            font-weight: 700;
                            line-height: 1.5;
                            letter-spacing: .1rem;
                            white-space: nowrap;
                        }
                    }

                    .tag {
                        font-size: 1.6rem;
                        font-weight: 700;
                        line-height: 1.5;
                        letter-spacing: .0rem;
                    }
                }
            }
        }
    }

    /* MARK: 768〜1280px */
    @media only screen and (max-width: 1279px) {

        .schedule {
            padding: 54.0rem 0 22.5rem;

            .title {
                width: 108.0rem;

                &::before {
                    top: -79.5rem;
                    left: 3.0rem;
                    width: 38.1rem;
                    height: 39.6rem;
                }

                &::after {
                    top: -75.0rem;
                    right: 3.0rem;
                    width: 33.9rem;
                    height: 38.7rem;
                }

                .main {
                    gap: 1.5rem;

                    .middle {
                        font-size: 9.6rem;
                        letter-spacing: .0rem;
                    }

                    .left,
                    .right {
                        width: 12.0rem;
                        height: 16.7rem;
                    }
                }

                .sub {
                    font-size: 5.1rem;
                }

            }

            .table_wrapper {
                width: 100%;
                padding-left: 10.0rem;

                .side_roller {
                    position: relative;
                    overflow-x: scroll;
                    overflow-y: hidden;
                    width: 100%;

                    table {
                        .fixity {
                            position: sticky;
                            top: 0;
                            left: 0;
                            z-index: 2;

                            &::before {
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: calc(100% + .4rem);
                                z-index: 2;
                            }
                        }

                        thead {
                            th {
                                font-size: 4.8rem;
                                padding: 3.6rem;
                                background-color: var(--main_navy);
                            }
                        }

                        tbody {
                            tr {

                                &.ended {
                                    td {
                                        &.fixity {
                                            position: sticky;
                                        }

                                        &::after {
                                            height: 30.0rem;
                                        }
                                    }
                                }

                                th,
                                td {
                                    height: 30.0rem;
                                    padding: 0 3.6rem;
                                    border-bottom-width: .6rem;
                                    background-color: var(--white);
                                    white-space: nowrap;
                                }

                                td {
                                    .date_wrapper {
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                        gap: 1.5rem;
                                        width: 30.0rem;

                                        .times {
                                            width: 24.0rem;
                                            height: initial;
                                            border-radius: 100vh;
                                            font-size: 4.5rem;
                                            line-height: 1.5;
                                        }

                                        .date {
                                            display: flex;
                                            flex-direction: column;
                                            justify-content: center;
                                            align-items: center;

                                            .year {
                                                font-size: 3.6rem;
                                                line-height: 1.2;
                                            }

                                            .day {
                                                width: 24.0rem;
                                                font-size: 4.5rem;
                                                line-height: 1.2;
                                                white-space: wrap;
                                            }
                                        }
                                    }

                                    .place {
                                        .venue {
                                            font-size: 4.5rem;
                                        }

                                        .address {
                                            gap: 2.0rem;

                                            a {
                                                font-size: 3.6rem;
                                                border-bottom-width: .3rem;
                                                gap: 1.5rem;
                                                padding: 0 1.5rem;

                                                &::before {
                                                    width: 3.9rem;
                                                    height: 4.5rem;
                                                }
                                            }

                                            .showroom {
                                                font-size: 3.0rem;
                                                border: .3rem solid var(--acnt_red2);
                                                border-radius: 1.2rem;
                                                padding: 0.5rem 1.0rem;
                                            }
                                        }
                                    }

                                    .period {
                                        font-size: 4.5rem;

                                        &.accepting {

                                            &::before,
                                            a {
                                                width: 36.0rem;
                                                height: 10.8rem;
                                            }

                                            &::before {
                                                top: 1.2rem;
                                            }

                                            a {
                                                font-size: 4.8rem;
                                                padding: 0 4.5rem;

                                                &::after {
                                                    right: 0.6rem;
                                                    width: 6.3rem;
                                                    height: 6.3rem;
                                                    transform: translateX(-.9rem);
                                                }

                                                &:hover {
                                                    transform: translateY(.9rem);
                                                }
                                            }
                                        }
                                    }

                                    .contents {
                                        width: 49.5rem;
                                        gap: 1.8rem;

                                        >li {
                                            width: 10.8rem;
                                            height: 10.8rem;

                                            &::before {
                                                top: 8.7rem;
                                                margin-left: -2.1rem;
                                                border: 1.8rem solid transparent;
                                                border-bottom: 1.8rem solid var(--gray99);
                                            }

                                            &::after {
                                                bottom: -9.0rem;
                                                padding: 1.5rem 2.4rem;
                                                font-size: 3.6rem;
                                                border-radius: .9rem;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .scroll-hint-icon-wrap {

                        .scroll-hint-icon {
                            top: 34.0rem;
                            left: calc(50% - 14.0rem);
                        }
                    }
                }

                .caption {
                    font-size: 4.5rem;
                    padding: 6.0rem 0;
                }
            }
        }

        /* MARK: ヒント */
        .hint {
            .rounded_box {
                width: 108.0rem;
                padding: 7.5rem 3.0rem;

                &::before {
                    top: -4.5rem;
                    right: 13.5rem;
                    width: 15.3rem;
                    height: 12.9rem;
                }

                .hint_list {
                    height: initial;
                    row-gap: 3.0rem;
                    column-gap: 4.8rem;

                    >li {
                        width: 100%;
                        height: 24.0rem;
                        padding: 0 3.6rem;

                        .item {
                            gap: 3.0rem;

                            .icon {
                                width: 10.8rem;
                                height: 10.8rem;
                            }

                            .name {
                                width: 33.0rem;
                                font-size: 4.8rem;
                                letter-spacing: .3rem;
                            }
                        }

                        .tag {
                            font-size: 4.2rem;
                        }
                    }
                }
            }
        }



        /* MARK: 〜767px */
        @media only screen and (max-width: 767px) {

            .schedule {
                padding: 36.0rem 0 15.0rem;

                .title {
                    width: 72.0rem;

                    &::before {
                        top: -53.0rem;
                        left: 2.0rem;
                        width: 25.4rem;
                        height: 26.4rem;
                    }

                    &::after {
                        top: -50.0rem;
                        right: 2.0rem;
                        width: 22.6rem;
                        height: 25.8rem;
                    }

                    .main {
                        gap: 1.0rem;

                        .middle {
                            font-size: 6.4rem;
                            letter-spacing: .0rem;
                        }

                        .left,
                        .right {
                            width: 8.0rem;
                            height: 11.1rem;
                        }
                    }

                    .sub {
                        font-size: 3.4rem;
                    }
                }

                .table_wrapper {
                    padding-left: 4.8rem;

                    .side_roller {
                        table {

                            thead {
                                th {
                                    font-size: 3.2rem;
                                    padding: 2.4rem;
                                }
                            }

                            tbody {
                                tr {
                                    &.ended {
                                        td {
                                            &::after {
                                                height: 20.0rem;
                                            }
                                        }
                                    }

                                    th,
                                    td {
                                        height: 20.0rem;
                                        padding: 0 2.4rem;
                                        border-bottom-width: .4rem;
                                    }

                                    td {
                                        .date_wrapper {
                                            gap: 1.0rem;
                                            width: 20.0rem;

                                            .times {
                                                width: 16.0rem;
                                                font-size: 3.0rem;
                                            }

                                            .date {
                                                .year {
                                                    font-size: 2.4rem;
                                                }

                                                .day {
                                                    width: 16.0rem;
                                                    font-size: 3.0rem;
                                                }
                                            }
                                        }

                                        .place {

                                            .venue {
                                                font-size: 3.0rem;
                                            }

                                            .address {
                                                gap: 1.5rem;

                                                a {
                                                    font-size: 2.4rem;
                                                    border-bottom-width: .2rem;
                                                    gap: 1.0rem;
                                                    padding: 0 1.0rem;

                                                    &::before {
                                                        width: 2.6rem;
                                                        height: 3.0rem;
                                                    }
                                                }

                                                .showroom {
                                                    font-size: 2.0rem;
                                                    border: .2rem solid var(--acnt_red2);
                                                    border-radius: .8rem;
                                                    padding: 0.5rem;
                                                }
                                            }
                                        }

                                        .period {
                                            font-size: 3.0rem;

                                            &.accepting {

                                                &::before,
                                                a {
                                                    width: 24.0rem;
                                                    height: 7.2rem;
                                                }

                                                &::before {
                                                    top: .8rem;
                                                }

                                                a {
                                                    font-size: 3.2rem;
                                                    padding: 0 3.0rem;

                                                    &::after {
                                                        right: 0.4rem;
                                                        width: 4.2rem;
                                                        height: 4.2rem;
                                                        transform: translateX(-.6rem);
                                                    }

                                                    &:hover {
                                                        transform: translateY(.6rem);
                                                    }
                                                }
                                            }
                                        }


                                        .contents {
                                            width: 33.0rem;
                                            gap: 1.2rem;

                                            >li {
                                                width: 7.2rem;
                                                height: 7.2rem;

                                                &::before {
                                                    top: 5.8rem;
                                                    margin-left: -1.4rem;
                                                    border: 1.2rem solid transparent;
                                                    border-bottom: 1.2rem solid var(--gray99);
                                                }

                                                &::after {
                                                    bottom: -6.0rem;
                                                    padding: 1.0rem 1.6rem;
                                                    font-size: 2.4rem;
                                                    border-radius: .6rem;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .caption {
                        font-size: 3.0rem;
                        padding: 4.0rem 0;
                    }
                }
            }

            /* MARK: ヒント */
            .hint {
                .rounded_box {
                    width: 72.0rem;
                    padding: 5.0rem 2.0rem;

                    &::before {
                        top: -3.0rem;
                        right: 9.0rem;
                        width: 10.2rem;
                        height: 8.6rem;
                    }

                    .hint_list {
                        height: initial;
                        row-gap: 2.0rem;
                        column-gap: 3.2rem;

                        >li {
                            width: 100%;
                            height: 16.0rem;
                            padding: 0 2.4rem;

                            .item {
                                gap: 2.0rem;

                                .icon {
                                    width: 7.2rem;
                                    height: 7.2rem;
                                }

                                .name {
                                    width: 22.0rem;
                                    font-size: 3.6rem;
                                    letter-spacing: .2rem;
                                }
                            }

                            .tag {
                                font-size: 2.8rem;
                            }
                        }
                    }
                }
            }
        }
    }

    /* MARK: ============ */




    /* MARK: 過去開催の様子  */




    /* MARK: ============ */




    /* MARK: 1280〜1920px */

    .past_event {
        background-color: var(--white);
        position: relative;
        padding: 8.0rem 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 12.0rem;

        .body {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2.0rem;

            .photos {
                position: relative;
                width: 64.0rem;
                height: 40.0rem;

                .photo {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-size: cover;

                    &:nth-of-type(1) {
                        background-image: url('../img/past_photo1.png');
                        animation: past_photos_animation_a 20s linear infinite;
                    }

                    &:nth-of-type(2) {
                        background-image: url('../img/past_photo2.png');
                        animation: past_photos_animation_b 20s linear infinite;
                    }

                    &:nth-of-type(3) {
                        background-image: url('../img/past_photo3.png');
                        animation: past_photos_animation_c 20s linear infinite;
                    }
                }
            }

            .balloon {
                .content {
                    position: relative;
                    width: 34.6rem;
                    height: 34.6rem;
                    background-color: var(--main_navy);
                    border-radius: 50%;
                    font-size: 3.2rem;
                    font-weight: 600;
                    color: var(--acnt_yellow);
                    text-align: center;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 5.0rem;
                    transform-origin: left center;
                    transform: scale(0.0);
                    transition: all 1200ms var(--tran_bezier2);

                    &::before {
                        content: '';
                        position: absolute;
                        margin: auto 0;
                        top: 0;
                        bottom: 0;
                        left: -5.0rem;
                        width: 6.8rem;
                        height: 7.2rem;
                        background-image: url('../img/past_event_balloon_tail.png');
                        background-size: cover;
                    }
                }

                &.animate {
                    .content {
                        transform: scale(1.0);
                    }
                }
            }

            .note1,
            .note2,
            .people1,
            .people2 {
                position: absolute;
                background-size: cover;

                &::before {
                    content: '';
                    display: flex;
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    transition: all 1200ms var(--tran_bezier2);
                }
            }

            .note1 {
                top: -4.6rem;
                right: 32.4rem;
                width: 3.7rem;
                height: 8.6rem;
                transform-origin: right bottom;

                &::before {
                    background-image: url('../img/past_event_note1.png');
                    transform: scale(0.0);
                }

                &.animate {
                    &::before {
                        transform: scale(1.0);
                    }
                }
            }

            .note2 {
                right: 1.6rem;
                bottom: -1.6rem;
                width: 5.9rem;
                height: 5.4rem;
                transform-origin: left top;

                &::before {
                    background-image: url('../img/past_event_note2.png');
                    transform: scale(0.0);
                }

                &.animate {
                    &::before {
                        transform: scale(1.0);
                    }
                }
            }

            .people1 {
                top: -.3rem;
                right: -4.4rem;
                width: 8.1rem;
                height: 16.0rem;

                &::before {
                    background-image: url('../img/past_event_people1.png');
                    transform: translate(100%, 0);
                    opacity: 0.0;
                }

                &.animate {
                    &::before {
                        transform: translate(0%, 0%);
                        opacity: 1.0;
                    }
                }
            }

            .people2 {
                left: -10.8rem;
                bottom: -10.4rem;
                width: 7.8rem;
                height: 15.2rem;

                &::before {
                    background-image: url('../img/past_event_people2.png');
                    transform: translate(-100%, 0);
                    opacity: 0.0;
                }

                &.animate {
                    &::before {
                        transform: translate(0%, 0%);
                        opacity: 1.0;
                    }
                }
            }
        }
    }

    /* MARK: 768〜1280px */
    @media only screen and (max-width: 1279px) {

        .past_event {
            padding: 30.0rem 0 15.0rem;

            .body {
                flex-direction: column-reverse;
                gap: 12.0rem;

                .photos {
                    width: 128.0rem;
                    height: 80.0rem;
                }

                .balloon {
                    .content {
                        width: 72.0rem;
                        height: 72.0rem;
                        font-size: 7.2rem;
                        margin-left: 0.0rem;
                        transform-origin: center bottom;

                        &::before {
                            top: 72.0rem;
                            left: 30.0rem;
                            width: 10.2rem;
                            height: 10.8rem;
                            transform: rotate(20deg);
                        }
                    }
                }

                .note1 {
                    top: -15.0rem;
                    right: 90.0rem;
                    width: 6.9rem;
                    height: 16.2rem;
                }

                .note2 {
                    top: 60.0rem;
                    right: 15.0rem;
                    bottom: initial;
                    width: 13.4rem;
                    height: 12.2rem;
                }

                .people1 {
                    top: -13.5rem;
                    right: 13.5rem;
                    width: 18.3rem;
                    height: 36.0rem;
                }

                .people2 {
                    top: 45.0rem;
                    left: 6.0rem;
                    bottom: initial;
                    width: 17.6rem;
                    height: 34.2rem;
                }
            }
        }

        /* MARK: 〜767px */
        @media only screen and (max-width: 767px) {
            .past_event {
                padding: 20.0rem 0 10.0rem;

                .body {
                    flex-direction: column-reverse;
                    gap: 8.0rem;

                    .photos {
                        width: 76.8rem;
                        height: 48.0rem;
                    }

                    .balloon {
                        .content {
                            width: 48.0rem;
                            height: 48.0rem;
                            font-size: 4.8rem;

                            &::before {
                                top: 48.0rem;
                                left: 20.0rem;
                                width: 6.8rem;
                                height: 7.2rem;
                            }
                        }
                    }

                    .note1 {
                        top: -10.0rem;
                        right: 60.0rem;
                        width: 4.6rem;
                        height: 10.8rem;
                    }

                    .note2 {
                        top: 40.0rem;
                        right: 10.0rem;
                        width: 8.9rem;
                        height: 8.1rem;
                    }

                    .people1 {
                        top: -9.0rem;
                        right: 9.0rem;
                        width: 12.2rem;
                        height: 24.0rem;
                    }

                    .people2 {
                        top: 30.0rem;
                        left: 4.0rem;
                        bottom: initial;
                        width: 11.7rem;
                        height: 22.8rem;
                    }
                }
            }
        }
    }

    /* MARK: ============ */




    /* MARK: きずな広場へ戻る  */




    /* MARK: ============ */




    /* MARK: 1280〜1920px */

    .back_to {
        background-color: var(--main_navy);
        height: 16.0rem;
        display: flex;
        justify-content: center;
        align-items: center;

        .button {

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

            a {
                background-color: var(--white);
                gap: 0.8rem;
            }

            img {
                width: 2.4rem;
                height: auto;
            }
        }
    }

    /* MARK: 768〜1280px */
    @media only screen and (max-width: 1279px) {

        .back_to {
            height: 48.0rem;

            .button {
                a {
                    gap: 2.4rem;
                }

                img {
                    width: 7.2rem;
                }
            }
        }


        /* MARK: 〜767px */
        @media only screen and (max-width: 767px) {

            .back_to {
                height: 32.0rem;

                .button {
                    a {
                        gap: 1.6rem;
                    }

                    img {
                        width: 4.8rem;
                    }
                }
            }
        }
    }

    /* MARK: ============ */




    /* MARK: フッター  */




    /* MARK: ============ */




    /* MARK: 1280〜1920px */
    footer {
        background-color: var(--white);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 16.0rem;

        .logo {
            width: 17.0rem;
            height: auto;
        }
    }

    /* MARK: 768〜1280px */
    @media only screen and (max-width: 1279px) {

        footer {
            height: 48.0rem;

            .logo {
                width: 51.0rem;
            }
        }

        /* MARK: 〜767px */
        @media only screen and (max-width: 767px) {

            footer {
                height: 32.0rem;

                .logo {
                    width: 34.0rem;
                }
            }
        }
    }
}