:root {
            color-scheme: dark;
            --museum-bg: #101012;
            --museum-text: #ffedc7;
        }

        * {
            box-sizing: border-box;
        }

        html {
            background: var(--museum-bg);
        }

        body {
            margin: 0;
            background: var(--museum-bg);
            color: var(--museum-text);
            font-family:
                "Yu Mincho",
                "Hiragino Mincho ProN",
                "Noto Serif JP",
                serif;
        }

        /* スクロール演出全体の長さ */
        .museum-sequence {
            position: relative;
            height: 540vh;
            height: 540svh;
        }

        /* 演出中は画面を固定 */
        .museum-stage {
            position: relative;
            top: 0;
            height: 100vh;
            height: 100svh;
            overflow: hidden;
            isolation: isolate;
            background: var(--museum-bg);
        }

        .museum-fv__titles,
        .museum-fv h1,
        .museum-fv__titles p,
        .museum-heritage,
        .museum-heritage h2,
        .museum-heritage__body {
            color: var(--museum-text);
        }

        .museum-fv,
        .museum-heritage,
        .blackout {
            position: absolute;
            inset: 0;
        }

        /*
         * 重なり順
         * 1：FV背景
         * 2：背景を暗くするフィルター
         * 3：FVの文字
         * 4：建物と本文
         */
        .museum-fv__background {
            position: absolute;
            inset: 0;
            z-index: 1;
            background:
                url("/wp-content/uploads/heritage-thumb-2.webp")
                center / cover no-repeat;
            will-change: transform;
        }

        .blackout {
            z-index: 2;
            background: var(--museum-bg);
            opacity: 0.2;
            pointer-events: none;
            will-change: opacity;
        }

        /* FVの文字は消さず、その上に建物を重ねる */
        .museum-fv__titles {
            position: absolute;
            inset: 0;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1% 6% 0;
            will-change: opacity, transform;
        }

        .museum-fv h1 {
            margin: 0;
            margin-right: -35%;
            font-family: var(--font-family02);
            font-size: clamp(64px, 6.9vw, 120px);
            font-weight: 400;
            line-height: 1;
            letter-spacing: -0.045em;
            transform: scaleX(0.64);
            transform-origin: left center;
        }

        .museum-fv__titles p {
            margin: 0;
        }

        .museum-fv__titles > div > p {
            margin-top: 2px;
            font-size: var(--font-size28);
            letter-spacing: 0.13em;
        }

        .museum-fv__catch {
            font-family: var(--font-family02);
            font-size: clamp(34px, 3.7vw, 70px);
            font-weight: 400;
            line-height: 1.13;
            letter-spacing: -0.025em;
            transform: scaleX(0.79);
            transform-origin: right center;
        }

        /* 建物・本文セクション */
        .museum-heritage {
            z-index: 4;
            overflow: hidden;
            background: transparent;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        /* 終端で下側から黒をせり上げ、螺旋展示の黒背景へつなぐ。 */
        .museum-exit-fade {
            position: absolute;
            z-index: 10;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(
                0deg,
                #050505 0%,
                rgba(5, 5, 5, 0.98) 48%,
                rgba(5, 5, 5, 0) 100%
            );
            transform: translate3d(0, 100%, 0);
            will-change: transform;
        }

        .architecture {
            position: absolute;
            inset: 0;
            will-change: transform;
        }

        .architecture__back,
        .architecture__front {
            position: absolute;
            will-change: transform;
        }

        .architecture img {
            display: block;
        }

        /* 奥の建物 */
        .architecture__back {
            inset: 24% 0 -30%;
        }

        .architecture__back img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: auto;
        }

        /* 手前の建物 */
        .architecture__front {
            inset: 0 0 -20%;
        }

        .architecture__front img {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            max-width: none;
        }

        /* 建物の出現後に表示するテキスト */
        .museum-heritage__copy {
            position: absolute;
            inset: 0;
            padding: 6.3vh 16px 30px;
            text-align: center;
            opacity: 0;
            will-change: transform, opacity;
        }

        .museum-heritage h2 {
            margin: 0;
            font-size: clamp(25px, min(3.1vw, 4.2vh), 52px);
            font-weight: 400;
            line-height: 1.5;
            letter-spacing: 0.15em;
        }

        .museum-heritage__ornament {
            margin: 3.2vh auto 4vh;
            font-size: 13px;
            line-height: 1;
        }

        .museum-heritage__body {
            font-size: clamp(13px, min(1.2vw, 1.53vh), 20px);
            line-height: 1.65;
            letter-spacing: 0.05em;
        }

        .museum-heritage__body p {
            margin: 0 0 2.6vh;
            font-size: var(--font-size22);
            color: var(--color-font-light);
        }

        @media (min-aspect-ratio: 17/10) {
            .museum-heritage__copy {
                padding-top: 5vh;
            }

            .museum-heritage__ornament {
                margin: 2.5vh auto 3vh;
            }

            .museum-heritage__body p {
                margin-bottom: 2.2vh;
            }
        }

        @media (max-width: 600px) {
            .museum-fv__titles {
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                gap: 36px;
                padding: 0 7%;
            }

            .museum-fv h1 {
                font-size: 76px;
            }

            /* .museum-fv__catch {
                font-size: 35px;
                transform-origin: left center;
            } */

            .museum-fv__background {
                background-position: 42% center;
            }

            .architecture__back {
                inset: 35% -55% -25% 0;
            }

            .architecture__front {
                inset: 15% -10% -20% 0;
            }

            .museum-heritage__copy {
                padding-top: 8vh;
            }

            .museum-heritage h2 {
                font-size: clamp(19px, 4.6vw, 28px);
                line-height: 1.9;
                letter-spacing: 0.07em;
            }

            .museum-heritage__ornament {
                margin: 22px auto 26px;
            }

            .museum-heritage__body {
                font-size: 12px;
                line-height: 1.9;
                letter-spacing: 0.01em;
            }

            .museum-heritage__body p {
                margin-bottom: 24px;
                font-size: var(--font-size18);
            }

            .museum-heritage__body p:nth-child(4) {
                max-width: 28em;
                margin-right: auto;
                margin-left: auto;
            }
            .museum-fv__titles p {
                margin: 0;
                align-self: flex-end;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .architecture,
            .architecture__back,
            .architecture__front,
            .museum-fv__background,
            .museum-heritage__copy {
                will-change: auto;
            }
        }