/* 土台：初期化・ヘッダー・舞台 */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ground);color:var(--ink);font-family:var(--jp);-webkit-font-smoothing:antialiased}
html{overscroll-behavior-y:none}
body{overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ヘッダー */
.hd{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;height:var(--header-h);padding:0 var(--side);transition:opacity 1s ease}
.pre .hd{opacity:0}
.logo{display:flex;align-items:center}
/* ロゴ：シンボル（WA-10 の形・サイトの金）＋英字（仮ロゴと同じ Barlow Condensed 500・.22em）。js/logo.js が描く。2026-10-06 */
.wa-logo{display:inline-flex;align-items:center;gap:12px;color:var(--ink);line-height:1}
.wa-sym{display:block;height:22px;width:auto;aspect-ratio:976/499;flex:0 0 auto}
.wa-sym-fill{fill:var(--gold)}
html[data-logoc="grad"] .wa-sym-fill{fill:var(--grad)}
.wa-en{font-family:var(--disp);font-weight:500;font-size:17px;letter-spacing:.22em;white-space:nowrap;transform:translateY(.04em)}
.wa-jp{font-family:var(--jp);font-weight:400;font-size:11px;letter-spacing:.2em;white-space:nowrap}
.wa-stack{flex-direction:column;gap:10px}
.wa-stack .wa-en{transform:none}
.menu{height:40px;padding:0 20px;border-radius:999px;background:#fff;border:1px solid #EEE;display:flex;align-items:center;font-family:var(--disp);font-weight:500;font-size:13px;letter-spacing:.2em;box-shadow:0 2px 18px rgba(0,0,0,.06)}
.logo:focus-visible,.menu:focus-visible,.scroll:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* 舞台：FV（1画面）＋MESSAGE（1画面）。FVの枠は画面に固定され、送りの量で中身が切り替わる */
.stage{position:relative;height:200vh;height:200svh}
.fv{position:sticky;top:0;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--ground)}
@media (max-height:559px){.fv{min-height:0}}   /* 横向きのスマホ：FV を画面の高さに合わせる（言葉の部屋と SCROLL が画面の外に出ないように。監査 2026-10-08 #6） */

/* 送りの案内 */
.scroll{position:absolute;z-index:6;right:var(--side);bottom:0;height:74px;display:flex;gap:10px;font-family:var(--disp);font-weight:500;font-size:12px;letter-spacing:.2em;color:#fff;mix-blend-mode:difference;transition:opacity 1s ease .4s}
.scroll::after{content:"";width:1px;height:74px;background:linear-gradient(180deg,currentColor 0 50%,transparent 50% 100%);background-size:100% 200%;animation:drip 2.6s var(--ease-io) infinite}
@keyframes drip{0%{background-position:0 100%}60%,100%{background-position:0 -100%}}
.pre .scroll,.gone .scroll{opacity:0;pointer-events:none}

@media (max-width:767px){
  .wa-sym{height:18px}.wa-en{font-size:13px}.wa-logo{gap:9px}
  .menu{height:34px;padding:0 16px;font-size:12px}
  .scroll{height:56px;font-size:11px}.scroll::after{height:56px}   /* スマホでも出す（2026-10-04 本人確定） */
}
@media (prefers-reduced-motion:reduce){.scroll::after{animation:none}}