:root {
    /* Opening */
    --op-fade-in-ms: 250ms;
    --op-logo-stagger-ms: 260ms;
    --op-logo-in-ms: 1000ms;
    --op-logo-visible-ms: 2500ms;
    --op-logo-pop-ms: 800ms;
    --op-after-pop-delay-ms: 500ms;
    --op-slide-up-ms: 800ms;
    /* FV */
    --fv-leaf-in-ms: 700ms;
    --fv-stagger-tr-ms: 0ms;
    --fv-stagger-bl-ms: 60ms;
    --fv-stagger-br-ms: 120ms;
    --fv-fade-in-ms: 600ms;
    --fv-blur-max-px: 0;
    /* JSで上書きされる前提の初期値 */
    /* 💡 ぼかし効果を無効化 */
    /* Curtain */
    --curtain-extra-drop: 40;
    --curtain-scroll-units: 3;
    /* PC knobs */
    --pc-tl-top: 5%;
    --pc-tl-left: 6%;
    --pc-tl-width: min(15vw, 180px);
    --pc-bl-width: min(25vw, 340px);
    --pc-br-width: min(34vw, 540px);
    /* SP knobs */
    --sp-tl-top: 5%;
    --sp-tl-left: 7%;
    --sp-tl-width: min(26vw, 180px);
    --sp-bird-top: 16%;
    --sp-bird-left: 45%;
    --sp-bird-width: min(11vw, 120px);
    --sp-cup-bottom: 6%;
    --sp-cup-left: 50%;
    /* base */
    --vh0: 0;
    --curtainHpx: 0px;
    --hero-height: 100svh;
    --curtain-image: none;
    /* JSで上書き */
    --curtain-top-color: #E9DFD4;
    /* Sun */
    --sun-rot-ms: 20s;
}

html {
    scrollbar-gutter: stable both-edges;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    overflow-x: hidden;
    background: #f7fafc;
}


/* ===== Opening ===== */

#opening {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f2;
    z-index: 1000;
    opacity: 0;
    transform: translateY(0);
    pointer-events: none;
    transition: opacity var(--op-fade-in-ms, 250ms) cubic-bezier(.4, 0, .2, 1), transform var(--op-slide-up-ms, 800ms) cubic-bezier(.22, 1, .36, 1);
}

#opening.ready {
    opacity: 1;
    pointer-events: auto;
}

#opening.slideUp {
    transform: translateY(-100%);
}

#opening.hidden {
    display: none;
}

#opening .matrix {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#opening .bg-wrap {
    display: block;
    overflow: hidden;
    opacity: 0;
}

#opening .bg-wrap.no-clip {
    overflow: visible;
}

#opening .inn {
    display: inline-block;
    opacity: 0;
    transform-origin: center;
    transform: matrix(1, 0, 0, 1, 0, 100);
    transition: var(--op-logo-in-ms, 1000ms) cubic-bezier(.89, .01, .13, .99);
    will-change: transform, opacity;
}

#opening .matrix.is-animated .bg-wrap {
    opacity: 1;
}

#opening .matrix.is-animated .inn {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
}

#opening .inn img {
    width: clamp(180px, 40vw, 250px);
    height: auto;
    display: block;
}

@keyframes logo-pop-out {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    35% {
        opacity: 1;
        transform: translateY(0) scale(1.15);
    }
    100% {
        opacity: 0;
        transform: translateY(0) scale(.10);
    }
}

#opening.popLogo .inn {
    animation: logo-pop-out var(--op-logo-pop-ms, 800ms) cubic-bezier(.89, .01, .13, .99) forwards;
}


/* ===== 背面固定背景 ===== */

#hero-fixed {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    height: calc(var(--vh0) * 1px);
    display: none;
    overflow: hidden;
}

#hero-fixed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
    will-change: transform;
}


/* ===== FV本体 ===== */

#fv {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: #f8e6d3;
    /* filter: blur(var(--fv-blur, 0px)); ← 削除（重さ対策） */
    transition: filter 120ms linear;
    visibility: visible;
    pointer-events: auto;
    will-change: transform;
}


/* 初期レイアウト */

.leaf {
    position: absolute;
    opacity: 0;
}

.leaf>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.tl {
    top: 8%;
    left: 18%;
    width: min(20vw, 180px);
    transform: translate(-55%, -55%) rotate(-10deg) scale(.9);
}

.tr {
    top: 5%;
    right: 10px;
    width: min(28vw, 240px);
    transform: translate(55%, -18%) rotate(-6deg) scale(.9);
}

.bl {
    bottom: 2%;
    left: -55px;
    width: min(40vw, 450px);
    transform: translate(-55%, 55%) rotate(8deg) scale(.9);
}

.br {
    bottom: 0;
    right: 0;
    width: min(40vw, 540px);
    transform: translate(55%, 55%) rotate(-6deg) scale(.9);
}

@keyframes leafIn {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0) scale(1);
    }
}


/* 木を常に家より上（出現中も） */

#house {
    position: relative;
    z-index: 10;
}

#fv .leaf.tr,
#fv .leaf.bl,
#fv .leaf.br {
    z-index: 20;
}

#fv .leaf.tl.sun {
    z-index: 18;
}

#house {
    opacity: 0;
    transition: opacity var(--fv-fade-in-ms, 600ms) ease;
}

#house img {
    width: clamp(280px, 100vw, 1000px);
    max-width: 100%;
    height: auto !important;
    display: block;
}

.bird,
.cup {
    position: absolute;
    opacity: 0;
    transition: opacity var(--fv-fade-in-ms, 600ms) ease;
}

.bird {
    top: 15%;
    left: 50%;
    width: min(15vw, 120px);
    transform: translate(-50%, 0) scale(1);
}

.cup {
    bottom: 12%;
    left: 50%;
    width: min(20vw, 160px);
    transform: translate(-50%, 0) scale(1);
}


/* ===== Curtain ===== */

#curtain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: var(--curtainHpx);
    background: var(--curtain-image), linear-gradient(to bottom, var(--curtain-top-color) 0%, var(--curtain-top-color) 50%, transparent 50%, transparent 100%) center top / 100% 100% no-repeat;
    z-index: 1001;
    transform: translateY(calc(-1 * var(--curtainHpx)));
    will-change: transform;
}

.no-transition {
    transition: none !important;
}


/* 下層 */

#below {
    position: relative;
    z-index: 1;
    background: #f7fafc;
    will-change: transform;
}

.vh-lock {
    height: calc(var(--vh0) * 1px) !important;
    min-height: calc(var(--vh0) * 1px) !important;
}


/* Opening中は隠す */

html.pre-op #fv,
html.pre-op #curtain,
html.pre-op #hero-fixed {
    visibility: hidden !important;
}


/* Opening中はヘッダー、フッターなどメインコンテンツを隠す */

html.pre-op #header,
html.pre-op .header,

/* 💡 ヘッダーのdiv（チラ見え対策） */

html.pre-op #footer,
html.pre-op #main,

/* main content area */

html.pre-op #wpadminbar,

/* WordPress admin bar */


/* 💡 ハンバーガーメニューが単独要素の場合を考慮して追記（チラ見え対策） */

html.pre-op #gnavi,
html.pre-op #nav-toggle,
html.pre-op .menu-toggle,
html.pre-op .hamburger,
html.pre-op #header .menu-icon,
html.pre-op .Menu_Icon,

/* 💡 Storeアイコン（チラ見え対策） */

html.pre-op .hamburger-morph
/* 💡 ハンバーガーボタン（チラ見え対策） */

{
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* “ぬるり” */

.matrix .bg-wrap,
.matrix .bg-wrap .inn {
    display: block;
}

.matrix .bg-wrap {
    overflow: hidden;
    opacity: 0;
}

.matrix .bg-wrap+.bg-wrap {
    margin-top: 10px;
}

.matrix .bg-wrap .inn.large {
    font-size: 36px;
    font-weight: bold;
    color: #4a5568;
    margin-bottom: 6px;
}

.matrix .bg-wrap .inn.small {
    font-size: 15px;
    color: #718096;
    max-width: 42rem;
}

.matrix .bg-wrap .inn {
    opacity: 0;
    transform: matrix(1, 0, 0, 1, 0, 100);
    transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.matrix.is-animated .bg-wrap {
    opacity: 1;
}

.matrix.is-animated .bg-wrap .inn {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
}


/* ===== 太陽：光だけ回転（肝） ===== */

.leaf.tl.sun {
    aspect-ratio: 1/1;
}

@supports not (aspect-ratio:1/1) {
    .leaf.tl.sun::before {
        content: "";
        display: block;
        padding-top: 100%;
    }
}

.leaf.tl.sun>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.leaf.tl.sun .sun-core {
    z-index: 2;
}

.leaf.tl.sun .sun-rays {
    z-index: 1;
    will-change: transform;
    transform-origin: 50% 50%;
    animation: sun-rotate var(--sun-rot-ms, 20s) linear infinite;
}

@keyframes sun-rotate {
    to {
        transform: rotate(360deg);
    }
}


/* Reduce Motion なら停止。ただし html.motion-on が付いたら強制回転 */

@media (prefers-reduced-motion: reduce) {
    .leaf.tl.sun .sun-rays {
        animation-duration: 0.001ms;
        animation-iteration-count: 1;
    }
    html.motion-on .leaf.tl.sun .sun-rays {
        animation: sun-rotate var(--sun-rot-ms, 20s) linear infinite !important;
    }
}


/* ===== PC ===== */

@media (min-width:768px) {
    .vh-lock {
        height: var(--hero-height) !important;
        min-height: var(--hero-height) !important;
    }
    #hero-fixed {
        position: fixed;
        inset: 0;
        height: 100vh;
        /* ← これで 0 潰れを確実に防ぐ */
        min-height: 100vh;
        overflow: hidden;
    }
    #hero-fixed img {
        position: absolute;
        top: 50%;
        left: 50%;
        /* 画像の中央を起点にする */
        transform: translate(-50%, -50%) scale(1);
        transform-origin: center center;
        /* 画面を必ず埋める（比率維持） */
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        object-fit: cover;
        /* 念のため */
    }
    /* PC時の家サイズ */
    #house img {
        width: 75vw;
    }
    .bird,
    .cup {
        display: none;
    }
    #fv .tl {
        top: var(--pc-tl-top);
        left: var(--pc-tl-left);
        width: var(--pc-tl-width);
    }
    #fv .bl {
        width: var(--pc-bl-width);
    }
    #fv .br {
        width: var(--pc-br-width);
    }
}


/* ===== SP ===== */

@media (max-width:767px) {
    #fv .tl {
        top: var(--sp-tl-top);
        left: var(--sp-tl-left);
        width: var(--sp-tl-width);
    }
    /* 鳥の指定（要望値） */
    #fv .bird {
        top: 16%;
        left: 38%;
        width: var(--sp-bird-width);
        transform: translate(0, 0) scale(1);
    }
    #fv .cup {
        bottom: var(--sp-cup-bottom);
        left: var(--sp-cup-left);
        transform: translate(-50%, 0) scale(1);
    }
    /* 右上の木 .tr（SP調整） */
    #fv .tr {
        top: -2%;
        right: 2px;
        width: min(35vw, 240px);
    }
    /* 左下 .bl（SP調整） */
    #fv .bl {
        bottom: 0;
        left: -5px;
        width: min(36vw, 450px);
    }
    #hero-fixed {
        position: relative;
        display: block;
        height: 70vh;
        min-height: 70vh;
        pointer-events: auto;
        overflow: hidden;
    }
    #hero-fixed img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: translate(-50%, -50%);
        transform-origin: center center;
    }
}


/* ================================
   A案：太陽の回転を transform 競合から分離
   → 個別プロパティ `rotate` で回す（本命）
   → 旧環境向けの transform 版も併記（フォールバック）
   ================================ */


/* 1) フォールバック用（transform 版） */

@keyframes sun-rotate-xform {
    to {
        transform: rotate(360deg);
    }
}


/* 既存指定より弱ければこの記述は無視される。@supports で本命を上書き */

.leaf.tl.sun .sun-rays {
    transform-origin: 50% 50%;
    will-change: transform;
    animation: sun-rotate-xform var(--sun-rot-ms, 20s) linear infinite;
}


/* 2) 本命：個別プロパティ rotate を使う（他の transform と非競合） */

@supports (rotate: 1deg) {
    @keyframes sun-rotate-rotate {
        to {
            rotate: 360deg;
        }
    }
    .leaf.tl.sun .sun-rays {
        animation: sun-rotate-rotate var(--sun-rot-ms, 20s) linear infinite !important;
        animation-play-state: running !important;
        /* 万が一の pause 上書き */
    }
}


/* 3) Reduce Motion への配慮（html.motion-on があれば強制で回す） */

@media (prefers-reduced-motion: reduce) {
    .leaf.tl.sun .sun-rays {
        animation-duration: 0.001ms;
        animation-iteration-count: 1;
    }
    html.motion-on .leaf.tl.sun .sun-rays {
        animation: sun-rotate-rotate var(--sun-rot-ms, 20s) linear infinite !important;
    }
}


/* スマートフォン表示 (768px以下) にのみ適用 */

@media screen and (max-width: 768px) {
    /* 1. 【最重要】最小高さを自動（コンテンツサイズ）にリセット */
    /* これにより、コンテンツが短い場合でも、不要な余白を確保しなくなります。 */
    #below-content {
        min-height: auto !important;
    }
    /* 2. 背景色の開始位置を強制的に親要素の最上部に設定（以前の修正） */
    /* 念のため、背景の途切れを防ぎます。 */
    #below-content::before {
        top: 0 !important;
    }
}