/* ==========================================================================
   Lounge+ — 公開サイト
   コンセプト: 時間の記録
     10:00 に開けて、翌1:00 に閉める。ページ全体がその15時間の軸で、
     上は朝の光、下は深夜の藍。左（狭い画面では上）に時刻の軸が立つ。

   時刻を飾りに使わない。
     軸の目盛りは実在する営業時間だけ。セクションに架空の時刻は振らない。
     軸の上を動く金色の点は「訪問者の実際の現在時刻」で、main.js が
     JSTの時計から置いている。だから同じURLでも、昼に来た人と深夜に
     来た人では地の色と表示が違う。これがこのページの Signature。

   色相はアプリ (frontend/liff-app/src/index.css) と同一にしてある。
   変えたのは色ではなく、地の暗さと光の量。サイトとアプリが
   別サービスに見えないようにするための制約。

   地は上から下まで暗いままにする。「朝＝明るい背景」にすると縦グラデーションの
   途中で文字色を切り替える必要が出て、位置ごとにWCAG判定が崩れる。
   朝夜の差は「地の明度」ではなく「色相（蜂蜜→藍）と光の量」で出す。

   外部フォント / CDN / 画像は使わない（回線の細い場所からでも即座に開くため）。
   ========================================================================== */

:root {
  /* ── 光（アプリと同一の色相）───────────────────────────── */
  --lamp:       #C9A227;   /* ランプそのもの。アプリの --gold */
  --lamp-lit:   #E8D5A3;   /* 照らされた面。アプリの --gold-light */
  --lamp-fall:  #8B7355;   /* 光の落ち際。装飾のみ */
  /* ボタン上の濃い文字が 4.5:1 を満たす終端（--lamp-fall では 3.66:1 で不足） */
  --lamp-edge:  #B08A2A;

  /* ── 時間の軸（地の色）─────────────────────────────────
     10:00 側は蜂蜜の残る暖かい闇、翌1:00 側は藍。
     どちらも十分に暗く、--paper 系の文字はページ内のどこでも AA を満たす。

     ここの5色は html[data-phase] が時間帯ごとに丸ごと差し替える（下の方に
     ある）。この既定値は JS が動かなかったときに残る色で、どの時間帯でも
     成立するよう中庸に置いてある。 */
  --t-open:     #1A1409;   /* 10:00 */
  --t-noon:     #14110C;   /* 昼 */
  --t-dusk:     #0D0C0E;   /* 日暮れ。暖色から寒色へ渡る点 */
  --t-night:    #090B14;   /* 夜 */
  --t-close:    #05070E;   /* 翌1:00 */

  /* 面。地の上に起きる要素（写真の下地、メニュー、追従CTA） */
  --ink:        #0B0A09;
  --ink-raised: #14120F;
  --ink-deep:   #05070E;

  /* 影は黒ではなく、地の色相を持たせる */
  --shade:      rgba(6, 6, 12, .72);

  /* 訪問時刻で入れ替わる光。html[data-phase] が上書きする（main.js が付ける）。
     既定値は JS が動かなかったときの見え方＝夕方。 */
  --phase-light:
    radial-gradient(ellipse 88% 58% at 86% 10%, rgba(216, 168, 96, .085), transparent 66%);

  /* ── 紙（アプリと同一）──────────────────────────────── */
  --paper:      #F5F0E8;
  --paper-2:    rgba(245, 240, 232, 0.70);
  /* 0.56: 12〜14px の小さな文字で WCAG AA (4.5:1) を満たす下限。
     地が暗くなったぶん、旧 0.52 から下げても成立する。実測して決めた値。 */
  --paper-3:    rgba(245, 240, 232, 0.56);

  --rule:       rgba(245, 240, 232, 0.09);
  --rule-lamp:  rgba(201, 162, 39, 0.22);

  /* ── 間 ────────────────────────────────────────────── */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   28px;
  --space-lg:   clamp(44px, 6vw, 72px);
  --space-xl:   clamp(84px, 13vw, 152px);

  --radius:     10px;
  --radius-sm:  6px;

  --wrap:       1000px;
  --header-h:   68px;
  /* 時刻軸の帯。狭い画面ではヘッダー直下に寝かせる */
  --axis-h:     34px;

  /* 動きの基準カーブ。ease / linear は使わない（機械的に見えるため） */
  --ease: cubic-bezier(.32, .72, 0, 1);
  /* 針が一周する動き専用。--ease は「所定位置に収まる」ための前のめりな曲線で、
     一定速度で進むべきものに使うと 200ms で半周してから残りを這う。
     文字盤を回る動きは速度がおおむね一定であることに意味があるので分ける。 */
  --ease-sweep: cubic-bezier(.55, .08, .25, 1);
  --dur-fast:   180ms;
  --dur-normal: 320ms;
  --dur-slow:   900ms;

  /* 見出しは明朝。日本語で「静けさ」を担えるのはゴシックではなく明朝。
     Georgia を先頭に置くと欧文は Georgia、和文は明朝へ落ちる。 */
  --display: Georgia, 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho,
             'Noto Serif JP', serif;
  /* 本文は小サイズでの可読性を優先してゴシックのまま */
  --body: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', -apple-system,
          BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* 時刻は等幅。桁が動いても位置がずれないことと、
     見出しの明朝・本文のゴシックと明確に別の役として見えることが理由。
     全部OS内蔵で、Webフォントは読まない。 */
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
          'Roboto Mono', 'Courier New', monospace;
}

/* ══ 訪問時刻で地の色が入れ替わる ═══════════════════════
   各時間帯は2つで組む。
     --t-*         … 地そのもの。これが雰囲気の主役。
     --phase-light … 光源の向き。どちらから射しているかを添える。

   最初は光の層（--phase-light）だけで作ったが、実際に4つを並べても
   区別がつかなかった。暗い地の上に半透明の光を薄く重ねても、色は動かない。
   地そのものを差し替えるほうが、見た目は大きく変わって、しかも安全だった。

   ⚠️ 明度は上げないこと。文字は --paper 系で固定されており、地が明るく
   なったぶんだけコントラストが落ちる。とくに --paper-3（小さい文字）は
   AA 4.5:1 の下限で運用しているため、真っ先に割る。
   差は「色相」で作る。色相を回すだけなら明度は動かないので、いくら大きく
   振ってもコントラストは減らない。青は輝度への寄与が小さい（0.0722）ので
   とくに安く振れる。逆に黄・橙は高くつく。

   値を変えたら必ず実測し直すこと。最悪条件は「その時間帯でいちばん明るい
   --t-* を見ていて、光の層が全部重なった点」。そこで --paper-3 が 4.5:1 を
   満たすか。余裕を見て 4.6 を下回ったら下げる。

   縦のグラデーション（上=10:00、下=翌1:00）という構造は全時間帯で保つ。
   あれは「ページのどこにいるか＝一日のどこか」を表しており、
   時間帯で入れ替えるのは色であって構造ではない。 */

/* 朝 10:00〜13:00。低い斜光。蜂蜜が濃く、一日でいちばん暖かい。 */
html[data-phase="morning"] {
  --sky-o: .92;
  --t-open:  #33200A;
  --t-noon:  #291B08;
  --t-dusk:  #1E1509;
  --t-night: #14110E;
  --t-close: #0C0C10;
  --phase-light:
    radial-gradient(ellipse 92% 62% at 14% -6%, rgba(255, 212, 138, .07), transparent 66%);
}
/* 昼 13:00〜17:00。真上からの白い光。影が出ず、いちばん中庸で平坦。 */
html[data-phase="day"] {
  --sky-o: .88;
  --t-open:  #1A2229;
  --t-noon:  #171D23;
  --t-dusk:  #14181D;
  --t-night: #111417;
  --t-close: #0D1013;
  --phase-light:
    radial-gradient(ellipse 130% 40% at 50% -14%, rgba(255, 244, 216, .055), transparent 60%);
}
/* 夕 17:00〜21:00。西日。橙から始まり、底は紫へ落ちる。 */
html[data-phase="dusk"] {
  --sky-o: .96;
  --t-open:  #3A1405;
  --t-noon:  #2D1108;
  --t-dusk:  #200E14;
  --t-night: #160C20;
  --t-close: #0D0819;
  --phase-light:
    radial-gradient(ellipse 86% 60% at 90% 14%, rgba(255, 166, 84, .085), transparent 64%);
}
/* 夜 21:00〜翌1:00。外は藍に沈み、光源が店内の灯りへ移る。
   底（翌1:00）だけ暖色に戻しているのは、外が暗くなるほど
   店の灯りだけが残るから。閉店へ向かって暖かくなる唯一の時間帯。 */
html[data-phase="night"] {
  --sky-o: .92;
  --t-open:  #0D1440;
  --t-noon:  #0B1133;
  --t-dusk:  #0A0E26;
  --t-night: #0C0C18;
  --t-close: #1A0F08;
  --phase-light:
    radial-gradient(ellipse 130% 46% at 50% -8%, rgba(126, 158, 255, .085), transparent 62%),
    radial-gradient(ellipse 64% 36% at 10% 106%, rgba(255, 186, 88, .05), transparent 68%);
}
/* 閉店中 翌1:00〜10:00。灯りが落ち、冷たい藍だけが残る。 */
html[data-phase="closed"] {
  --sky-o: .6;
  --t-open:  #06070E;
  --t-noon:  #050609;
  --t-dusk:  #040507;
  --t-night: #030406;
  --t-close: #020304;
  --phase-light:
    radial-gradient(ellipse 110% 40% at 50% -10%, rgba(112, 140, 225, .05), transparent 58%);
}

/* ── ページの移り変わり ───────────────────────────────────
   規約・プライバシー・特商法へ移るとき、白い一瞬を挟まずに繋ぐ。
   このサイトは地が暗いので、既定の遷移では移動のたびに白が差し込んで
   まぶしい。行き先も同じ style.css を読むため、この指定だけで両側が揃う。

   下から浮かび上がって、去るほうは沈む。ページを積み重ねている感じにする。

   対応していないブラウザ（Firefox など）では、この指定ごと無視されて
   従来どおりの遷移になる。壊れない。 */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: pageOut .26s var(--ease) both;
}
::view-transition-new(root) {
  animation: pageIn .42s var(--ease) both;
}
@keyframes pageOut { to   { opacity: 0; transform: translateY(-10px); } }
@keyframes pageIn  { from { opacity: 0; transform: translateY(14px); } }

/* 動きを止めたい人には、遷移そのものを切る。既定の交差フェードも消える。 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--axis-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

/* 地はページ全体を貫く1本のグラデーション。上が 10:00、下が 翌1:00。
   各セクションに背景を持たせず、帯の交互配置もしない。
   日暮れ（--t-dusk）を 52% に置いているのは、そこから下が
   「夜の部」＝この店の差別化が効く時間帯だと見せるため。 */
body {
  font-family: var(--body);
  background-color: var(--t-night);
  background-image:
    linear-gradient(180deg,
      var(--t-open)  0%,
      var(--t-noon)  26%,
      var(--t-dusk)  52%,
      var(--t-night) 78%,
      var(--t-close) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: scroll;
  color: var(--paper);
  line-height: 1.95;
  letter-spacing: .015em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color var(--dur-slow) var(--ease);
}

/* 光源の向き。position:fixed なので、ページのどこを読んでいても同じ方角から
   射している。以前は body の背景の1層目に置いており、上から86vhぶんしか
   掛からなかった。つまりスクロールした先では朝も夜も同じ見た目だった。

   雰囲気の主役は地の色（--t-*）のほうで、この層は「どちらから射しているか」
   を添えるだけ。z-index:-1 で本文の下、地の上。
   background-image は補間できないため時間帯の切り替わりは瞬間的だが、
   1日に4回、しかも切り替わる瞬間を見ている人はいない。 */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background-image: var(--phase-light);
  background-repeat: no-repeat;
}

/* ── 空（日と月）─────────────────────────────────────────
   時計の盤面の上に置いた、文字を入れない帯。日か月がこの上を渡る。

   帯の下端が地平線。overflow:hidden で切れるので、昇りぎわと沈みぎわは
   半分だけ顔を出す。日の出・日の入りを描くための仕掛けで、切れるのは
   はみ出しではなく意図。

   位置・大きさ（--sky-x / --sky-drop / --sky-size）は main.js が実時刻から
   連続的に置く。地平線に近いほど大きい。明るさ（--sky-o）だけが時間帯ごとの
   固定値で、その時刻の空の明るさを表す。

   既定では出さない（JSが動かなければ data-sky が付かない。時刻が
   読めていないのに日が出ていると嘘になる）。

   ⚠️ 帯の中に文字を置かないこと。最初は画面固定で本文の背後を横切らせたが、
   日輪の芯の上に文字が乗るとコントラストが 1.74 まで落ちた（基準4.5）。
   読める明るさまで落とすと不透明度 0.02 になり、今度は何も見えない。
   明るい天体と本文は同じ場所に置けない、というのが実測の結論。 */
.sky {
  position: relative;
  height: var(--sky-band, 96px);
  margin-bottom: 4px;
  pointer-events: none;
  overflow: hidden;
}
.sky-body {
  position: absolute;
  left: var(--sky-x, 50%); top: var(--sky-drop, 50px);
  width: var(--sky-size, 80px); height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
}
/* どちらを出すかは時間帯ではなく、実際の日の出・日の入り（main.js）。
   夕方の橙い空に月が低く出る、といった本当にある景色が作れる。 */
html[data-sky="sun"]  .sky-sun,
html[data-sky="moon"] .sky-moon { opacity: var(--sky-o, .9); }

/* 運行。main.js は30秒ごとにしか位置を書き換えないので、そのままだと
   30秒に一度カクッと跳ぶ。間をつないで、止まらず流れているように見せる。
   30秒かけて次の位置へ渡るので、常に動いている状態になる。 */
html[data-motion] .sky-body {
  transition: left 30s linear, top 30s linear, width 30s linear;
}

/* 日輪の光条がゆっくり回る。天球の運行は1日かけて進むため肉眼では
   止まって見える。光そのものに動きを持たせて「照っている」ことを示す。
   2分で一周＝毎秒3度。速いと落ち着かず、遅いと止まって見える境目。 */
html[data-motion] .sky-sun .sun-rays {
  transform-box: view-box; transform-origin: 60px 60px;
  animation: sunSpin 120s linear infinite;
}
@keyframes sunSpin { to { transform: rotate(360deg); } }

/* 月は回さない。回る月は嘘になる。かわりに暈がゆっくり息をする。
   明滅（opacity）だけでは「動いている」と読めなかったので、大きさも変える。
   暈は外へ向かって透明に抜けるグラデーションなので、広がると光が滲む。
   大気のゆらぎに見えるぶんには嘘にならない。

   transform-box は view-box（SVG要素の既定）。原点を図形の中心 60,60 に
   置かないと、拡大するたびに暈が左上へずれる。 */
html[data-motion] .sky-moon .moon-halo {
  transform-box: view-box; transform-origin: 60px 60px;
  animation: moonShimmer 7.5s var(--ease) infinite;
}
@keyframes moonShimmer {
  0%, 100% { opacity: .8;  transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.16); }
}

/* フィルムグレイン。暗い面が広いと平坦に見えるので、粒子で奥行きを出す。
   固定 + pointer-events:none。スクロール要素に付けると再描画が走るため。
   SVGのdata URIで完結させている（外部画像を持たない方針のため）。 */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

img, svg { max-width: 100%; }
ul, ol { list-style: none; }

a { color: var(--lamp-lit); text-decoration-color: rgba(232, 213, 163, .3); text-underline-offset: 4px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid rgba(201, 162, 39, .85);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  padding: 10px 16px; border-radius: var(--radius);
  background: var(--lamp); color: #241F0E; font-weight: 700; text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 8px; }

.wrap { width: min(100% - 44px, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 44px, 700px); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ── ヘッダー ───────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(9, 10, 16, .66);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease);
}
@supports (backdrop-filter: blur(12px)) {
  .site-header { backdrop-filter: blur(16px); }
}
.site-header.is-scrolled {
  background: rgba(5, 7, 14, .92);
  border-bottom-color: var(--rule);
}

.header-inner { display: flex; align-items: center; gap: 28px; height: 100%; }

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  min-height: 44px;
  color: var(--paper); text-decoration: none; font-weight: 700;
  letter-spacing: .04em; flex-shrink: 0;
}
.logo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.brand-mark {
  width: 30px; height: 30px; flex-shrink: 0;
  filter: drop-shadow(0 2px 14px rgba(201, 162, 39, .3));
  transition: filter .35s var(--ease);
}

.brand-text {
  font-family: var(--display);
  font-size: 1.2rem; font-weight: 400; letter-spacing: .06em;
  color: var(--lamp-lit);
  transition: color .35s var(--ease);
}

/* ── 開いた瞬間の導入 ───────────────────────────────────
   中央にロゴを置き、輪が一周してから引く。1.35秒で終わる。

   安全側の作り:
     ・既定は opacity:0。アニメーションが「出して消す」向きに書いてある。
       逆向きだと、アニメーションが走らない環境で全画面の膜が残り、
       サイトが一切使えなくなる。
     ・pointer-events は常に none。膜が残っても操作は妨げない。
     ・JSに依存しない。prefers-reduced-motion では下の低減ブロックが
       時間を潰すので、一瞬で終わって実質出ない。 */

.intro {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-content: center; justify-items: center; gap: 20px;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  animation: introFade 1.35s var(--ease) both;
}
@keyframes introFade {
  0%, 62% { opacity: 1; }
  100%    { opacity: 0; visibility: hidden; }
}

.intro-mark {
  width: 84px; height: 84px;
  filter: drop-shadow(0 4px 30px rgba(201, 162, 39, .35));
  /* 輪はヘッダーのロゴと同じ keyframes を使う。同じ動きが入口と
     ヘッダーで繰り返されることで、あれが同じ印だと分かる。 */
  animation: introMark .8s var(--ease) both,
             brandRing 1s var(--ease-sweep) both;
}
@keyframes introMark {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: none; }
}

.intro-word {
  font-family: var(--display);
  font-size: 1.05rem; letter-spacing: .2em;
  color: var(--lamp-lit);
  animation: introWord .7s var(--ease) .3s both;
}
@keyframes introWord {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── ヘッダーのロゴ ─────────────────────────────────────
   ロゴは同心円が2本あり、文字盤に見える。時間を主題にしたページの入口として
   ここだけ「一日が始まる」動きを持たせる。1回だけ、header の1つだけ。

   JSに依存しない（CSSアニメーションは読み込み時に必ず走る）ので、
   JSが死んでもロゴが消えたままになる事故は起きない。
   prefers-reduced-motion では下のブロックが時間を潰して即座に完成形になる。 */

/* 輪が12時から一周描かれる。stroke-dashoffset は継承されるので、
   ここに当てると <use> の影の中の円まで届く。 */
@keyframes brandRing {
  from { stroke-dashoffset: 175.93; }
  to   { stroke-dashoffset: 0; }
}
/* 盤面そのものは、わずかに小さい状態から落ち着く。 */
@keyframes brandMark {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: none; }
}
/* 文字は左から現れる。輪が描き終わる少し前に始めて、動きを繋げる。
   -2% は、右端の「+」が縁で切れて見えないようにするための逃げ。 */
@keyframes brandWord {
  from { clip-path: inset(0 100% 0 0); opacity: .2; }
  to   { clip-path: inset(0 -2% 0 0);  opacity: 1; }
}

.site-header .brand-mark {
  animation: brandMark .7s var(--ease) both,
             brandRing 1.15s var(--ease-sweep) both;
}
.site-header .brand-text {
  /* .brand が inline-flex なので実際は flex item として block 化され、
     この指定は現状では効いていない。レイアウトを変えたときに
     clip-path の基準ボックスが崩れないよう残してある。 */
  display: inline-block;
  animation: brandWord .85s var(--ease) .3s both;
}

/* 押せることを返す。ロゴはトップへ戻るリンクなので、反応は要る。 */
.brand:hover .brand-mark { filter: drop-shadow(0 2px 20px rgba(201, 162, 39, .6)); }
.brand:hover .brand-text { color: var(--paper); }

.nav { margin-left: auto; }
.nav-list { display: flex; gap: 2px; }
.nav-list a {
  display: block; padding: 10px 13px; border-radius: var(--radius-sm);
  color: var(--paper-2); font-size: .875rem; text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.nav-list a:hover { color: var(--paper); }
.nav-list a[aria-current="true"] { color: var(--lamp-lit); }

.header-cta { flex-shrink: 0; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px; margin-left: auto;
  background: none; border: 1px solid var(--rule); border-radius: 8px;
  cursor: pointer; padding: 0;
}
.nav-toggle span {
  display: block; width: 17px; height: 1px; margin: 5px auto;
  background: var(--paper); border-radius: 2px;
  transition: transform .24s var(--ease), opacity .24s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ══ 時刻の軸（Signature Element）═══════════════════════════
   この店の一日（10:00〜翌1:00）を1本の線にしたもの。

   ・track   … 一日そのもの。上端が 10:00、下端が 翌1:00
   ・read    … 読み進めた量。ページの縦位置をそのまま映すだけで、
               時刻の主張はしない（セクションに時刻を振らないため）
   ・now     … 訪問者の実際の現在時刻。main.js が JST の時計から置く。
               営業時間外は消える（軸の外にいるので、置く場所が無い）

   広い画面では左に立て、狭い画面ではヘッダー直下に寝かせる。
   飾りなので aria-hidden。同じ情報はヒーローの .now-panel に文章で出す。 */

.axis {
  position: fixed; z-index: 80;
  pointer-events: none;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.axis-cap {
  display: block;
  font-size: .62rem; letter-spacing: .14em;
  color: var(--paper-3);
  white-space: nowrap;
}

.axis-track {
  position: relative;
  background: linear-gradient(180deg,
    rgba(232, 213, 163, .22), rgba(126, 145, 205, .20));
}

/* 読んだところまでが灯る。scroll イベントは使わず、
   セクションの交差（IntersectionObserver）で段階的に伸ばす。 */
.axis-read {
  position: absolute; left: 0; top: 0; width: 100%;
  height: var(--read, 0%);
  background: linear-gradient(180deg, var(--lamp-lit), var(--lamp));
  transition: height .7s var(--ease);
}

/* 現在時刻。JSが時計を読めるまでは出さない。 */
.axis-now {
  position: absolute; left: 50%; top: var(--now, 50%);
  opacity: 0;
  transition: top 1.2s var(--ease), opacity .5s var(--ease);
}
.axis[data-ready] .axis-now { opacity: 1; }
.axis-now::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--lamp-lit);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .18), 0 0 16px rgba(232, 213, 163, .55);
}
/* 現在位置から輪が広がり続ける。軸は position:fixed なので、ページのどこを
   読んでいても視界の端で動いている。営業時間外は点そのものが出ない
   （data-ready が外れる）ので、閉店中は静止する。これは意図した対比。
   点の本体（::before）は触らない。動きが止まっても位置は読める。 */
html[data-motion] .axis[data-ready] .axis-now::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  border: 1px solid var(--lamp-lit);
  animation: nowPulse 3.6s var(--ease) infinite;
}
@keyframes nowPulse {
  0%   { transform: scale(1);   opacity: .65; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}
.axis-time {
  position: absolute;
  font-size: .68rem; letter-spacing: .08em;
  color: var(--lamp-lit);
  white-space: nowrap;
}

/* 分の針。時刻ラベルの下に引いた細い線が60秒で満ち、0秒で戻る。
   盤面は分単位でしか変わらないので、この線が無いと時計は最大60秒間
   完全に静止して見える。

   ヒーローの盤面ではなくここに置いているのは、軸が position:fixed だから。
   盤面に置いていたときはスクロールで流れて見えなくなっていた。

   軸の一日（10:00〜翌1:00）を表す .axis-track の上には置かないこと。
   1分で一周する線をあの軸に乗せると、時間の位置を示す軸の意味と衝突する。 */
html[data-motion] .axis[data-ready] .axis-time::before,
html[data-motion] .axis[data-ready] .axis-time::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px;
}
html[data-motion] .axis[data-ready] .axis-time::before { background: var(--rule); }
html[data-motion] .axis[data-ready] .axis-time::after {
  transform: scaleX(0); transform-origin: left center;
  background: var(--lamp-lit);
  animation: minuteSweep 60s linear infinite;
}

/* 広い画面: 左に立てる。
   切り替え幅は「軸の幅 + 時刻ラベルの張り出し + 逃げ」が --wrap(1000px) の
   外側に収まる下限。1180px で試すと時刻ラベルの右端が本文に 9px 食い込んだので、
   1280px まで上げ、軸の左位置も本文から 104px 引いた位置に置いている
   （この2つの値はセットで、片方だけ動かすと本文に重なる）。 */
@media (min-width: 1280px) {
  /* 軸が縦に立つ幅では、軸は縦方向の場所を取らない。
     0 にしておかないと scroll-padding-top とヘッダー直下の余白が
     34px ぶん多く空き、アンカー移動のたびに見出しが沈む。 */
  :root { --axis-h: 0px; }

  .axis {
    left: max(24px, calc((100vw - var(--wrap)) / 2 - 104px));
    top: 50%; transform: translateY(-50%);
    display: grid; justify-items: center; gap: 12px;
  }
  .axis-track { width: 1px; height: min(46vh, 400px); }
  .axis-time { left: 14px; top: -.6em; }
}

/* 狭い画面: ヘッダー直下に寝かせた細い帯にする（コンセプトの Mobile 指定）。
   縦の軸をそのまま縮めると、本文と重なるか、細すぎて意味が読めなくなる。 */
@media (max-width: 1279px) {
  .axis {
    left: 0; right: 0; top: var(--header-h);
    height: var(--axis-h);
    display: flex; align-items: center; gap: 10px;
    padding: 0 22px;
    background: rgba(5, 7, 14, .82);
    border-bottom: 1px solid var(--rule);
  }
  @supports (backdrop-filter: blur(12px)) {
    .axis { backdrop-filter: blur(14px); }
  }
  .axis-track { flex: 1; height: 1px; }
  .axis-read {
    width: var(--read, 0%); height: 100%;
    background: linear-gradient(90deg, var(--lamp-lit), var(--lamp));
    transition: width .7s var(--ease);
  }
  .axis-now { left: var(--now, 50%); top: 50%; transition: left 1.2s var(--ease), opacity .5s var(--ease); }
  .axis-time { left: -1.05em; top: -2.05em; font-size: .62rem; }
  /* 横倒しでは軸の向きが変わるので、グラデーションも横向きに差し替える */
  .axis-track { background: linear-gradient(90deg, rgba(232, 213, 163, .22), rgba(126, 145, 205, .20)); }
}

/* ── ボタン ────────────────────────────────────────────── */

.btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 50px; padding: 13px 30px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.4;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform var(--dur-fast) var(--ease), box-shadow .25s var(--ease),
              border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

/* 唯一の強い光源。ページ内でここだけが明るい。 */
.btn-primary {
  background: linear-gradient(148deg, var(--lamp-lit) 0%, var(--lamp) 58%, var(--lamp-edge) 100%);
  color: #241F0E;
  box-shadow: 0 0 40px rgba(201, 162, 39, .2), 0 2px 22px var(--shade);
}
.btn-primary:hover { box-shadow: 0 0 56px rgba(201, 162, 39, .32), 0 2px 22px var(--shade); }

.btn-ghost {
  background: none;
  border-color: var(--rule);
  color: var(--paper-2);
}
.btn-ghost:hover { border-color: var(--rule-lamp); color: var(--paper); }

.btn-sm { min-height: 44px; padding: 10px 18px; font-size: .8125rem; }
.btn-lg { min-height: 58px; padding: 15px 44px; font-size: 1.0625rem; }
.btn-sub { display: block; font-size: .7rem; font-weight: 500; opacity: .76; letter-spacing: 0; }

/* ── 共通見出し ─────────────────────────────────────────── */

.eyebrow {
  color: var(--paper-3);
  font-size: .72rem; font-weight: 500; letter-spacing: .24em;
  margin-bottom: 22px;
}

.section-title {
  font-family: var(--display);
  font-size: clamp(1.7rem, 4.8vw, 2.6rem);
  font-weight: 400; line-height: 1.62; letter-spacing: .05em;
  text-wrap: balance;
  margin-bottom: 22px;
}

.section-lead {
  color: var(--paper-2);
  max-width: 40ch;
  font-size: 1rem;
  margin-bottom: clamp(52px, 8vw, 84px);
}

/* 間を大きく取る。帯の交互配置はやめ、細い罫線だけで区切る。 */
.section { padding: var(--space-xl) 0; }
.section + .section > .wrap { position: relative; }
.section + .section > .wrap::before {
  content: ""; position: absolute;
  top: calc(-1 * var(--space-xl)); left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule) 22%, var(--rule) 78%, transparent);
}
/* 旧デザインの帯。地が1本のグラデーションになったので背景は持たせない。 */
.section-alt { background: none; border: 0; }

.note {
  margin-top: 44px; padding-left: 18px;
  border-left: 1px solid var(--rule-lamp);
  color: var(--paper-3); font-size: .84rem; line-height: 1.9;
  max-width: 52ch;
}

/* ── ヒーロー ───────────────────────────────────────────── */
/* 非対称。左に文章、右に「いまの時刻」の盤面。写真は置かない。
   このページで最初に見せるべきものは店内の様子ではなく
   「いま開いているのか」で、それは撮影を待たずに今日から成立する。 */

.hero { padding: clamp(44px, 8vw, 88px) 0 clamp(64px, 10vw, 112px); }
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(40px, 7vw, 84px); align-items: start;
}

.hero-title {
  font-family: var(--display);
  font-size: clamp(2.1rem, 7.4vw, 3.7rem);
  font-weight: 400; line-height: 1.5; letter-spacing: .045em;
  text-wrap: balance;
  margin-bottom: 30px;
}
.hero-title em {
  font-style: normal;
  color: var(--lamp-lit);
}
/* 見出しの中の時刻だけ等幅にすると、数字が本文から浮いて「情報」に見える */
.hero-title .t { font-family: var(--mono); font-size: .82em; letter-spacing: .01em; }

.hero-lead {
  color: var(--paper-2);
  font-size: clamp(.95rem, 2vw, 1.03rem);
  max-width: 38ch;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* いまの時刻の盤面。JSが動かない場合は「営業時間 10:00〜翌1:00 / 年中無休」
   という静的な表示のまま残る（意味が通る初期値をHTMLに書いてある）。 */
.now-panel {
  padding: 30px 0 26px;
  border-top: 1px solid var(--rule-lamp);
  border-bottom: 1px solid var(--rule);
}
.now-label {
  color: var(--paper-3);
  font-size: .68rem; letter-spacing: .2em;
  margin-bottom: 14px;
}
.now-clock {
  font-family: var(--mono);
  font-size: clamp(2.4rem, 6.5vw, 3.2rem);
  font-weight: 400; line-height: 1.1; letter-spacing: .01em;
  color: var(--lamp-lit);
  font-variant-numeric: tabular-nums;
}
/* JSが時計を読む前は「10:00〜翌1:00」という長い文字列が入る。
   そのままだと桁あふれするので、初期状態だけ小さくする。 */
.now-clock[data-static] { font-size: clamp(1.4rem, 3.6vw, 1.9rem); }

@keyframes minuteSweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.now-state {
  margin-top: 16px;
  color: var(--paper-2); font-size: .86rem; line-height: 1.8;
}
.now-state b {
  color: var(--paper); font-weight: 500;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
/* 営業中かどうかは色だけで伝えない。点の有無ではなく必ず文字が付く。 */
.now-state::before {
  content: ""; display: inline-block; vertical-align: .05em;
  width: 6px; height: 6px; margin-right: 9px;
  border-radius: 50%;
  background: var(--paper-3);
}
.now-panel[data-open="true"] .now-state::before {
  background: var(--lamp);
  box-shadow: 0 0 12px rgba(201, 162, 39, .7);
}

.hero-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 24px;
  margin-top: clamp(44px, 7vw, 72px);
  padding-top: 34px; border-top: 1px solid var(--rule);
}
.hero-facts dt {
  color: var(--paper-3); font-size: .68rem; letter-spacing: .16em;
  margin-bottom: 8px;
}
.hero-facts dd {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.5vw, 1.32rem);
  line-height: 1.5; color: var(--lamp-lit);
  font-variant-numeric: tabular-nums;
}
.hero-facts dd span {
  display: block; font-family: var(--body); font-size: .7rem;
  color: var(--paper-3); letter-spacing: 0; margin-top: 5px;
}

/* ── 同じ席の、15時間 ───────────────────────────────────
   同一アングルの4枚を時間帯順に並べる。左に実際の撮影時刻（等幅）、
   右に写真。幅と寄せを1枚ずつ変えて、均等グリッドにしない。 */

.hours-seq { display: grid; gap: clamp(52px, 8vw, 96px); }

.hours-item {
  position: relative;
  display: grid; grid-template-columns: 84px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px); align-items: start;
}

/* 写真の後ろに、その時間帯の光をにじませる。
   4枚は同じ場所を同じ画角で撮ったものなので、変わるのは光だけ。
   ページの地は上から下へ一日ぶんの推移を持っているが、この節では
   1枚ごとに「その時刻の光」を置いて、時間が進むことを近い距離で見せる。

   地そのものを明るくはしない。明度を上げると、この節だけ文字の
   コントラストが変わってしまう。あくまで写真の周りに滲む光として置き、
   透過は最大でも .10 に留めてある（実測でAAを維持できる範囲）。 */
.hours-item::before {
  content: ""; position: absolute; z-index: 0;
  /* 左右は % ではなく px。.wrap の左右余白は狭い画面では 22px しか無く、
     % 指定だと光がその外へ出て 20px の横あふれを作る（body の
     overflow-x:hidden で見た目には出ないが、端末によっては横に動く）。 */
  inset: -16% -20px -8% -20px;
  /* 写真の周りに寄せ、下の説明文には届かせない。
     文字の背後を明るくすると、この節だけコントラストが落ちるため、
     光は写真の高さで減衰しきる大きさ（縦55%）に留めてある。 */
  background: radial-gradient(ellipse 72% 55% at 50% 34%, var(--hour-light), transparent 72%);
  filter: blur(18px);
  pointer-events: none;
}
.hours-when, .hours-body { position: relative; z-index: 1; }

/* 朝: 蜂蜜色が残る斜光 */
.hours-item:nth-child(1) { width: min(100%, 700px); margin-right: auto;
  --hour-light: rgba(232, 213, 163, .17); }
/* 昼: 一日でいちばん光の量が多い。色は最も中立に近い */
.hours-item:nth-child(2) { width: min(100%, 600px); margin-left: auto;
  --hour-light: rgba(245, 240, 232, .15); }
/* 夜: 外光が落ち、室内のランプだけになる */
.hours-item:nth-child(3) { width: min(100%, 650px); margin-right: auto;
  --hour-light: rgba(201, 162, 39, .14); }
/* 深夜: 藍。ページ末尾の地と同じ側の色に寄せる */
.hours-item:nth-child(4) { width: min(100%, 780px); margin-left: auto;
  --hour-light: rgba(126, 145, 205, .16); }

.hours-when { padding-top: 4px; }
.hours-time {
  display: block;
  font-family: var(--mono); font-size: 1.05rem; letter-spacing: .04em;
  color: var(--lamp-lit);
  font-variant-numeric: tabular-nums;
}
.hours-name {
  display: block; margin-top: 8px;
  color: var(--paper-3); font-size: .72rem; letter-spacing: .16em;
}
.hours-body { display: grid; gap: 16px; }
.hours-body p { color: var(--paper-2); font-size: .875rem; line-height: 1.9; }

/* ── 使い方 ────────────────────────────────────────────── */
/* 箱をやめ、罫線と余白で区切る。手順は本当に順番があるので番号は残す。 */

/* 手順は時間順に起きるものなので、横一列ではなく階段状に下げる。
   ページ全体が時間軸だという主題とも合う。

   均等な3カラムをやめた理由:
   このページは「使い方」「料金」「席・設備」と3セクション続けて同じ3カラムの
   拍になっていた。1つ1つは正しくても、同じ律動が続くとどのAI生成サイトとも
   同じ表情になる（redesign-existing-projects が「最も定型的なAIレイアウト」に
   挙げている形）。段差をつけて拍を崩す。

   ずらすのは横に3列並ぶ幅のときだけ。縦に積んだあとに段差を残すと、
   ただ間隔が不揃いなだけに見える。 */
.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}
.step { padding-top: 26px; border-top: 1px solid var(--rule); }

@media (min-width: 820px) {
  .step:nth-child(2) { margin-top: clamp(22px, 3.2vw, 48px); }
  .step:nth-child(3) { margin-top: clamp(44px, 6.4vw, 96px); }
}
.step-num {
  display: block; margin-bottom: 20px;
  font-family: var(--mono); font-size: .95rem; font-weight: 400;
  color: var(--lamp); letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.step h3 {
  font-family: var(--display);
  font-size: 1.1rem; font-weight: 400; letter-spacing: .04em; line-height: 1.6;
  margin-bottom: 14px;
}
.step p { color: var(--paper-2); font-size: .9rem; line-height: 1.9; }

/* ── 料金 ─────────────────────────────────────────────── */

.price-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(30px, 5vw, 52px);
}
.price-card {
  position: relative;
  padding-top: 28px; border-top: 1px solid var(--rule);
  background: none;
}
/* 「3つの塔」をやめる。1日上限は申し込み不要で自動的に適用される＝実質の主役なので、
   罫線の色だけでなく、面の明るさと価格の大きさでも主役だと分かるようにする。
   狭い画面では縦に積むので、ずらしも光も掛けない（積んだ順がそのまま強弱になる）。 */
.price-card.is-feature { border-top-color: var(--rule-lamp); }
.price-card > * { position: relative; z-index: 1; }

@media (min-width: 820px) {
  /* 3枚で行を共有する（subgrid）。主役の価格だけ文字を大きくすると、
     そのぶん下の説明文が押し下げられて揃わなくなる。数値で相殺すると
     画面幅ごとにclampの値が変わって破綻するので、行そのものを共有させる。
     subgrid 非対応の環境では従来どおり各カード独立になるだけで、崩れない。 */
  .price-grid { align-items: start; grid-template-rows: auto auto auto; }
  .price-card {
    display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
  }
  /* 位置はずらさない。3枚の価格は同じ高さに揃える。
     半端にずらすと「主役だから上げた」ではなく「揃っていない」に見える。
     主役であることは、面の明るさと価格の大きさだけで示す。 */
  .price-card.is-feature .price { font-size: clamp(2.4rem, 5.4vw, 3.05rem); }
  .price-card.is-feature::before {
    content: ""; position: absolute; z-index: 0;
    /* 左右は px。% だと .wrap の余白を超えて横あふれを作る（実際に一度作った） */
    inset: -14px -20px -18px -20px;
    background: radial-gradient(ellipse 78% 68% at 50% 24%,
                rgba(201, 162, 39, .11), transparent 72%);
    filter: blur(16px);
    pointer-events: none;
  }
}

/* バッジは流し込みから外し、上の罫線の上に載せる。
   以前は流し込みの中にあったため、このカードだけ見出しと価格が40px下がり、
   3枚の価格の高さが揃っていなかった（実測: 他2枚 67px / このカード 108px）。
   横に並ぶ要素で共通の行が揃っていないと、意図した強調ではなく崩れて見える。 */
.badge {
  position: absolute; left: 0; top: 0;
  transform: translateY(calc(-100% - 9px));
  color: var(--lamp); font-size: .68rem; font-weight: 500; letter-spacing: .18em;
  white-space: nowrap;
}
.price-card h3 {
  color: var(--paper-3); font-size: .78rem; font-weight: 500; letter-spacing: .16em;
  margin-bottom: 14px;
}
.price {
  font-family: var(--display); font-size: clamp(2.1rem, 5vw, 2.7rem);
  font-weight: 400; line-height: 1.25; letter-spacing: .01em;
  color: var(--lamp-lit); margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.price .yen { font-size: 1.15rem; margin-right: 3px; }
.price .unit {
  display: block; margin-top: 8px;
  font-family: var(--body); font-size: .72rem; color: var(--paper-3); letter-spacing: .06em;
}
.price-desc { color: var(--paper-2); font-size: .84rem; line-height: 1.9; }

/* 「いま入るといくら」。時計と料金を繋ぐ一文。
   料金表とシミュレーターの間に置き、抽象の数字から
   「読んでいる人自身の金額」へ渡す役をさせる。 */
.now-fare {
  margin-top: clamp(44px, 6vw, 68px);
  padding-left: 18px;
  border-left: 1px solid var(--rule-lamp);
  color: var(--paper-2);
  font-size: clamp(.95rem, 2vw, 1.05rem);
  line-height: 1.9;
  max-width: 44ch;
}
.now-fare b {
  color: var(--lamp-lit); font-weight: 500;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* 料金シミュレーター */
.calc {
  margin-top: clamp(56px, 8vw, 88px); padding-top: 40px;
  border-top: 1px solid var(--rule);
}
.calc-title {
  font-family: var(--display); font-size: 1.05rem; font-weight: 400;
  letter-spacing: .05em; margin-bottom: 30px;
}
.calc-label {
  display: block; color: var(--paper-3); font-size: .7rem;
  letter-spacing: .16em; margin-bottom: 14px;
}

.calc-range {
  -webkit-appearance: none; appearance: none;
  /* 44px: つまみは20pxだが、指で掴む領域は要件どおり44pxを確保する。
     トラック自体は1pxで描くので、増えたぶんは上下の当たり判定になる。 */
  width: 100%; max-width: 520px; height: 44px; background: transparent; cursor: pointer;
  display: block;
}
.calc-range::-webkit-slider-runnable-track {
  height: 1px;
  background: linear-gradient(90deg, var(--lamp) 0%, var(--lamp) var(--fill, 20%), rgba(245,240,232,.12) var(--fill, 20%));
}
.calc-range::-moz-range-track { height: 1px; background: rgba(245,240,232,.12); }
.calc-range::-moz-range-progress { height: 1px; background: var(--lamp); }
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -9.5px;
  border: none; border-radius: 50%;
  background: var(--lamp-lit);
  box-shadow: 0 0 18px rgba(201, 162, 39, .5);
}
.calc-range::-moz-range-thumb {
  width: 20px; height: 20px; border: none; border-radius: 50%;
  background: var(--lamp-lit);
  box-shadow: 0 0 18px rgba(201, 162, 39, .5);
}

.calc-scale {
  display: flex; justify-content: space-between; max-width: 520px;
  color: var(--paper-3); font-size: .68rem; letter-spacing: .06em;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.calc-result {
  margin-top: 34px;
  color: var(--paper-2); font-size: .9rem;
}
.calc-hours { color: var(--paper); font-family: var(--mono); }
.calc-amount {
  display: inline-block; margin-left: 8px;
  font-family: var(--display); font-size: clamp(1.7rem, 4vw, 2.1rem); font-weight: 400;
  color: var(--lamp-lit); vertical-align: -.14em;
  font-variant-numeric: tabular-nums;
}
.calc-note { display: block; margin-top: 10px; color: var(--paper-3); font-size: .78rem; }

/* ── 席・設備 ──────────────────────────────────────────── */

.space-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(36px, 6vw, 68px); align-items: start;
}

.floorplan { padding: 0; background: none; border: 0; }
.floorplan svg { display: block; width: 100%; height: auto; }
.floorplan figcaption { margin-top: 16px; }
.floorplan figcaption p {
  margin-top: 12px; color: var(--paper-3); font-size: .72rem; letter-spacing: .06em;
}

/* 凡例。図の中の C / T / B が何を指すかの対応表 */
.fp-legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding-top: 14px; border-top: 1px solid var(--rule);
}
.fp-legend li {
  display: flex; align-items: center; gap: 8px;
  color: var(--paper-2); font-size: .76rem; letter-spacing: .04em;
}
.fp-legend em {
  color: var(--paper-3); font-size: .68rem; font-style: normal; letter-spacing: .06em;
}
.fp-legend em::before { content: '／'; margin-right: 3px; }
/* 図の中の席の見た目をそのまま縮めたもの。同じ塗り・同じ書体でないと対応が読めない */
.fp-key {
  display: grid; place-items: center; width: 21px; height: 21px; border-radius: 4px;
  background: rgba(245, 240, 232, .07); color: var(--paper-2);
  font-family: var(--body); font-size: .68rem; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.fp-key--booth {
  background: rgba(201, 162, 39, .17); box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .4);
  color: var(--lamp-lit);
}

.floorplan svg text {
  font-family: var(--body);
  text-anchor: middle; dominant-baseline: middle;
}

.fp-room { fill: none; stroke: var(--rule); stroke-width: 1; }

.fp-fixture rect { fill: none; stroke: var(--rule); stroke-dasharray: 2 4; }
.fp-fixture text { font-size: 9.5px; fill: var(--paper-3); }

/* 設備・入口の記号。stroke は <use> の影の木へ継承される。
   線幅1.4は縮小率ぶん細くなるので、壁（1）より前に出ない */
/* 大きさは width/height 属性で決めている。CSS の transform: scale() は使わないこと。
   <use> では transform-box: fill-box が効かず、原点が SVG 全体の左上のままになるため、
   拡大すると記号が x に比例して外へ飛ぶ（入口の記号が viewBox 420 に対し x=492 になった）。 */
.fp-ico {
  fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.fp-fixture .fp-ico { stroke: var(--paper-3); color: var(--paper-3); }
.fp-door .fp-ico { stroke: var(--lamp-lit); color: var(--lamp-lit); }

.fp-surface rect { fill: rgba(245, 240, 232, .045); stroke: none; }
.fp-booth-wall rect { fill: none; stroke: var(--rule-lamp); }

.fp-seat rect { fill: rgba(245, 240, 232, .07); stroke: none; }
.fp-seat text { font-size: 10px; fill: var(--paper-2); }
/* 予約できる席（個室ブース）だけ光らせる */
.fp-seat.fp-booth rect { fill: rgba(201, 162, 39, .17); stroke: rgba(201, 162, 39, .4); }
.fp-seat.fp-booth text { fill: var(--lamp-lit); }

.fp-door rect { fill: rgba(201, 162, 39, .14); stroke: var(--lamp); stroke-dasharray: 3 3; }
.fp-door text { font-size: 10px; fill: var(--lamp-lit); }

.zone-list { display: grid; gap: 30px; }
.zone-list li { padding-top: 22px; border-top: 1px solid var(--rule); }
.zone-list h3 {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--display); font-size: 1.05rem; font-weight: 400;
  letter-spacing: .04em; margin-bottom: 10px;
}
.zone-list .seats {
  color: var(--lamp); font-size: .72rem; font-weight: 500; letter-spacing: .1em;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.zone-list p { color: var(--paper-2); font-size: .875rem; line-height: 1.9; }

.amenities {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 2px; margin-top: clamp(52px, 8vw, 80px);
  border-top: 1px solid var(--rule);
}
/* align-items は baseline から flex-start へ。絵文字は文字だったので
   ベースラインで揃ったが、線画には合わせるベースラインが無い。 */
.amenities li {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--rule);
  font-size: .875rem;
}
/* 金は使うが、主張はさせない。文字が先に読まれる濃さに落としてある。 */
.amenities .amenity-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  margin-top: .06em;               /* 1行目の文字と光学的に揃える */
  color: var(--lamp);
  opacity: .72;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.amenities em {
  display: block; font-style: normal; color: var(--paper-3);
  font-size: .72rem; margin-top: 4px;
}

/* ── アクセス ──────────────────────────────────────────── */

/* 左に営業時間・所在地、右に外観写真とハウスルールを積む。
   左列を2行ぶち抜きにして、右列の2要素と横並びにする。 */
.access-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(36px, 6vw, 68px) clamp(36px, 6vw, 68px); align-items: start;
}
.access-main { grid-column: 1; grid-row: 1 / span 2; }
.access-shot { grid-column: 2; grid-row: 1; }
.access-grid .rules { grid-column: 2; grid-row: 2; }

.info-list { display: grid; }
.info-list > div {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
.info-list > div:first-child { padding-top: 0; }
.info-list dt {
  color: var(--paper-3); font-size: .72rem; letter-spacing: .16em; padding-top: 5px;
}
.info-list dd strong {
  display: block; font-family: var(--display); font-size: 1.05rem; font-weight: 400;
  letter-spacing: .03em; line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.info-list dd strong a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: inherit; text-decoration: none;
}
.info-list dd span {
  display: block; color: var(--paper-2); font-size: .84rem; margin-top: 8px; line-height: 1.9;
}
/* 営業時間の数字だけ等幅にして、軸・ヒーローの時計と同じ字面に揃える */
.info-list .t { font-family: var(--mono); letter-spacing: .02em; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; font-size: .84rem; text-decoration: none; letter-spacing: .06em;
}
.link-arrow::after { content: "→"; transition: transform var(--dur-fast) var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

.rules { padding: 0; background: none; border: 0; }
.rules h3 {
  font-family: var(--display); font-size: 1rem; font-weight: 400;
  letter-spacing: .05em; margin-bottom: 22px;
  padding-bottom: 18px; border-bottom: 1px solid var(--rule);
}
.rules ul { display: grid; gap: 16px; }
.rules li {
  position: relative; padding-left: 20px;
  color: var(--paper-2); font-size: .84rem; line-height: 1.9;
}
.rules li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: 9px; height: 1px; background: var(--lamp-fall);
}

/* ── FAQ ──────────────────────────────────────────────── */
/* 箱を外し、罫線だけの一覧にする */

.faq-list { display: grid; border-top: 1px solid var(--rule); }
.faq-list details { border-bottom: 1px solid var(--rule); background: none; }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 68px; padding: 18px 4px;
  font-family: var(--display); font-size: .98rem; font-weight: 400; letter-spacing: .03em;
  cursor: pointer; list-style: none;
  transition: color var(--dur-fast) var(--ease);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; flex-shrink: 0;
  width: 9px; height: 1px; position: relative;
  background: var(--lamp);
  transition: transform .25s var(--ease);
}
.faq-list summary::before {
  content: ""; order: 1; flex-shrink: 0;
  width: 1px; height: 9px; margin-right: -9px; position: relative; left: 4px;
  background: var(--lamp);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.faq-list details[open] summary::before { opacity: 0; }
.faq-list summary:hover { color: var(--lamp-lit); }
.faq-body {
  padding: 0 4px 26px; color: var(--paper-2); font-size: .875rem;
  line-height: 2; max-width: 62ch;
}
.faq-body strong { color: var(--paper); font-weight: 500; }

/* ── 末尾CTA ───────────────────────────────────────────── */
/* ページの一番暗いところ＝軸の下端＝翌1:00。ボタンだけが光っている。 */

.cta {
  padding: clamp(92px, 14vw, 168px) 0 clamp(84px, 12vw, 144px);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.cta h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.55rem, 4.4vw, 2.2rem); letter-spacing: .05em; line-height: 1.6;
  text-wrap: balance;
  margin-bottom: 20px;
}
.cta p { color: var(--paper-2); font-size: .92rem; margin-bottom: 44px; }
.cta .t { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── フッター ──────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--rule); padding-top: 56px; }
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 40px 56px; justify-content: space-between;
  padding-bottom: 48px;
}
.footer-brand { display: flex; align-items: flex-start; gap: 14px; }
.footer-brand .brand-mark { width: 34px; height: 34px; }
.footer-brand p { font-size: .875rem; line-height: 1.8; }
.footer-brand span { color: var(--paper-3); font-size: .76rem; }

.footer-nav { display: flex; flex-wrap: wrap; gap: 20px 60px; }
.footer-nav ul { display: grid; align-content: start; }
.footer-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--paper-2); font-size: .84rem; text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.footer-nav a:hover { color: var(--lamp-lit); }

.footer-bottom {
  padding: 20px 0 32px;
  border-top: 1px solid var(--rule);
  color: var(--paper-3); font-size: .74rem; letter-spacing: .06em;
}

/* ── モバイル追従CTA ────────────────────────────────────── */

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  padding: 13px 22px calc(13px + env(safe-area-inset-bottom));
  background: rgba(5, 7, 14, .9);
  border-top: 1px solid var(--rule);
  transform: translateY(100%);
  transition: transform var(--dur-normal) var(--ease);
}
@supports (backdrop-filter: blur(12px)) {
  .sticky-cta { backdrop-filter: blur(16px); }
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn { width: 100%; }

/* ── レスポンシブ ──────────────────────────────────────── */

/* 軸が横倒しになる幅では、その帯のぶんだけ本文を下げる。
   （ナビの位置は 820px 以下の .nav { inset: ... } 側で軸の高さを見ている） */
@media (max-width: 1279px) {
  .hero { padding-top: calc(var(--axis-h) + clamp(32px, 6vw, 64px)); }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* スマホでは「いま開いているか」を先に出す。文章より先に判断できる。 */
  .hero-time { order: -1; }
  .hours-item { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hours-item, .hours-item:nth-child(n) { width: 100%; margin: 0; }
  .hours-when { display: flex; align-items: baseline; gap: 14px; padding-top: 0; }
  .hours-name { margin-top: 0; }
  .space-layout, .access-grid { grid-template-columns: minmax(0, 1fr); }
  /* 1列になったら、ぶち抜き指定を解除して素直に縦に積む */
  .access-main, .access-shot, .access-grid .rules {
    grid-column: 1; grid-row: auto;
  }
}

/* 820px: ヘッダーの「ロゴ＋5項目＋CTA」が横に収まる下限に余裕を持たせた値。 */
@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .header-cta { display: none; }

  /* 追従CTAはこの幅から出す。ヘッダーのCTAが隠れる幅と同じにしてあり、
     画面上のどこかに必ず入口が1つ残る。

     止めたくなったら、この1行を消す（基底の .sticky-cta が display:none を
     持っているので、上書きを外すだけでよい）。transform で画面外へ逃がす
     だけでは不十分で、position:fixed のまま display は block なので、
     見えないリンクにキーボードのフォーカスが入る。
     消すときは main.js 側の STICKY_ENABLED も false にすること。 */
  .sticky-cta { display: block; }

  .nav {
    position: fixed; inset: calc(var(--header-h) + var(--axis-h)) 0 auto 0;
    margin: 0; padding: 10px 22px 22px;
    background: rgba(5, 7, 14, .98);
    border-bottom: 1px solid var(--rule);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list a {
    padding: 15px 4px; font-size: .98rem;
    border-bottom: 1px solid var(--rule);
  }

  .hero-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-facts > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
    padding: 16px 0; border-bottom: 1px solid var(--rule);
  }
  .hero-facts dt { margin-bottom: 0; }
  .hero-facts dd { text-align: right; }

  .info-list > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .info-list dt { padding-top: 0; }
  .footer-nav { gap: 16px 40px; }
}

/* フロアマップは幅に比例して文字も縮む。狭い画面では読めなくなるため拡大する。 */
@media (max-width: 560px) {
  .fp-seat text { font-size: 15px; }
  .fp-fixture text { font-size: 13px; }
  .fp-door text { font-size: 14px; }
}

/* ── 写真 ────────────────────────────────────────────────
   暗いページの中で、写真は「光の差す窓」として扱う。
   周囲を切り立たせず、地に馴染ませてから縁だけを起こす。

   撮影前は .shot-slot が入っている。撮れたら同じ figure の中で
   <img> に置き換えるだけで成立するよう、寸法は figure 側が持つ。 */

.shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-raised);
  /* 縁は影ではなく1本の線で起こす。夜の面に厚みを足さないため。 */
  box-shadow: 0 0 0 1px var(--rule), 0 24px 60px var(--shade);
}

.shot img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  /* 写真がページより明るいと夜が破れる。わずかに沈めて色温度を合わせる。 */
  filter: brightness(.86) saturate(.92);
}

/* 上辺にランプの反射を1本入れて、面が起きていることを示す */
.shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(232, 213, 163, .07), transparent 22%);
}

.shot--wide  { aspect-ratio: 3 / 2; }
.shot--zone  { aspect-ratio: 4 / 3; margin-bottom: 18px; }
/* 9:20 は実際に置いた door.png（1080×2400）の比率。枠と一致させて
   object-fit: cover による切り落としを起こさせない。端末を変えて
   撮り直したときは、ここも実物の比率に合わせること。 */
.shot--phone { aspect-ratio: 9 / 20; max-width: 260px; border-radius: 22px; }

/* 画面写真は「暗い部屋の写真」ではないので、地に沈める補正を掛けない。
   掛けると金のボタンが濁り、実物より目立たなくなる。 */
.shot--phone img { filter: none; }
.shot--phone:hover img { filter: none; transform: none; }

/* 撮影前の枠。空白ではなく「何をここに入れるか」を明示した設計図として見せる。
   実写が入れば消える。 */
.shot-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; height: 100%; padding: 24px; text-align: center;
  background-image:
    repeating-linear-gradient(-45deg,
      rgba(245, 240, 232, .022) 0 10px, transparent 10px 20px);
}
.shot-label {
  font-family: var(--display); font-size: 1rem; letter-spacing: .06em;
  color: var(--paper-2);
}
.shot-spec {
  font-size: .68rem; letter-spacing: .14em; color: var(--paper-3);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.shot-hint {
  font-size: .72rem; line-height: 1.8; color: var(--paper-3);
  max-width: 22ch; margin-top: 6px;
}

/* 使い方セクションの実機スクリーンショット */
.flow-shot {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  margin-top: clamp(56px, 8vw, 88px);
  padding-top: clamp(48px, 7vw, 72px);
  border-top: 1px solid var(--rule);
}
.flow-shot-cap {
  color: var(--paper-3); font-size: .8rem; letter-spacing: .04em; text-align: center;
}

/* アクセスの外観写真 */
.access-shot { display: grid; gap: 16px; }
.access-shot-cap { color: var(--paper-3); font-size: .78rem; letter-spacing: .04em; }

/* ══ 動き ═══════════════════════════════════════════════
   このページの動きは全部で13。それぞれに理由がある（理由を1文で
   言えないものは入れない、というのが design-taste-frontend の要求）。
   足すときは必ずこの一覧に1行足すこと。数えられなくなった時点で
   「動きのためのの動き」が混ざり始めている。

   ── 一度だけ動くもの（1〜11）
     1. ロゴの導入            … 文字盤を一周描く。時間が主題だと入口で示す（物語）
     2. 読み込み時の段階表示  … 扉が開くように上から順に灯る（物語）
     3. 時刻の軸が満ちる      … いまページのどこ＝一日のどこにいるか（ナビゲーション）
     4. 見出しのマスク        … 主役の見出しを「組まれた文字」に見せる（階層）
     5. 写真のカーテン        … 写真が主役なので他より大きく遅く現れる（階層）
     6. 本文のせり上がり      … 読む順に視線を導く（階層）
     7. 個室ブースの明滅      … 予約できるのはこの3席だと色以外でも示す（階層）
     8. ホバーの反応          … 押せる/見られることを返す（フィードバック）
     9. 料金の切り替わり      … 数字が入れ替わったことを返す（フィードバック）
    10. フロアマップの作図    … 間取りが引かれる。図の中身と動きの意味が一致（物語）
    11. 設備アイコンの作図    … 図の続きとして設備が線で起こされる（物語）

   ── 止まらないもの（12〜14）
   終わらない動きは、読んでいる最中ずっと視界の端で主張し続ける。1つ増える
   ごとに本文を読む妨げになるので、数を増やさないこと。3つとも主題
   （いまの時刻）に直結しているから許容している。装飾のために足さない。

    12. 分の針              … 時計は分単位でしか変わらず止まって見える。
                              60秒で満ちて戻ることで、時計が生きていると示す（物語）
    13. 現在位置の呼吸      … 軸の点から輪が広がる（物語）
    14. 天体の運行          … 日と月が実時刻の位置を渡る。30秒ごとに次の位置へ
                              置き直し、その間をトランジションで繋ぐので途切れない。
                              運行は実物と同じ速さ（月で0.414px/分）で肉眼では
                              止まって見えるため、光のほうに動きを持たせる。
                              日輪は光条が2分で一周、月は暈が7.5秒で息をする（物語）

   ── ページの移り変わり（15）
    15. 遷移                … 規約などへ移るとき、白を挟まずに沈んで浮かぶ

   14 と 15 は前の版で「2つで打ち止め」と書いたあとに足したもの。理由は
   どちらも主題に紐づくため。それでも次に足すときは、この一覧が15行あることを
   見てから決めること。

   12・13はどちらも時刻の軸（position:fixed）の上に置いてある。ヒーローの
   盤面に置くとスクロールで流れて見えなくなるため。逆に、軸に乗せた以上は
   営業時間内（data-ready）しか出ない。閉店中は軸の点そのものが消えるので、
   1:00〜10:00 はページ上で何も動かない。

   実装方針: CSS の animation-timeline: view() / scroll() は対応ブラウザが限られ、
   iPhone の Safari では動かない。LINE から来る客の大半が iPhone なので、
   それでは「動きのあるUI」にならない。IntersectionObserver でクラスを
   付ける方式に統一する。

   JSが動かないときに opacity:0 のまま読めなくなる事故を防ぐため、
   隠す指定は html[data-motion] が付いているときだけ有効にする。
   この属性は main.js が最初に付ける。JSが死ねば全部最初から見えている。 */

/* 隠す条件は html[data-motion] の1つだけにする。
   prefers-reduced-motion の判定は main.js 側で行い、reduce なら属性を付けない。
   CSS と JS の両方で条件を持つと、片方だけ成立する状態（要素は隠れているのに
   誰も見せに来ない）が生まれる。実際にそれで一度詰まらせた。 */
/* 出方は3段に分ける。見出し > 写真 > 本文の順で目を引く。
   全部を同じ fade にすると、どれが主役か分からなくなる
   （design-taste-frontend が「単純なfade-inのみ」を Anti-Generic に挙げている）。 */

/* ① 本文・その他。いちばん控えめ。短く、動く距離も小さく。 */
html[data-motion] .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: var(--in, 0s);
}
html[data-motion] .reveal.is-in { opacity: 1; transform: none; }

/* ② 見出しはマスクの下から立ち上がる。明朝の大見出しは、この一手で
      「組まれた文字」に見える。フェードだと紙面に貼っただけに見える。

      .rise の span は main.js が実行時に包む。演出用の入れ物をHTMLに
      持たせないため（JSが動かなければ包まれず、素の見出しがそのまま出る）。 */
html[data-motion] .reveal.has-rise {
  /* 親のフェードは止め、動きをマスク1つに絞る。2つ重ねると濁る。 */
  opacity: 1; transform: none;
  overflow: hidden;
}
html[data-motion] .has-rise .rise {
  display: block;
  /* 105%: 行間ぶんの余りを見込んで、完全に隠れる位置まで下げる */
  transform: translateY(105%);
  transition: transform 1.05s var(--ease);
  transition-delay: var(--in, 0s);
}
html[data-motion] .has-rise.is-in .rise { transform: none; }

/* ③ 写真は枠を動かさず、中身だけが下から現れる。
      枠ごと動かすと縁と影が一緒に揺れて、額縁が浮いて見えていた。
      コンセプトの「暗→明」は brightness で出す（opacity だと地が透けて濁る）。
      わずかな寄りから引くことで、止まった瞬間に画が締まる。 */
html[data-motion] .shot.reveal { opacity: 1; transform: none; }
html[data-motion] .shot.reveal > * {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.05);
  filter: brightness(.4);
  transition: clip-path 1.25s var(--ease), transform 1.5s var(--ease),
              filter 1.5s var(--ease);
  transition-delay: var(--in, 0s);
}
html[data-motion] .shot.reveal.is-in > * {
  clip-path: inset(0); transform: none; filter: none;
}

/* 写真に光が差す。見られる対象であることを返す。
   出現が終わると main.js が .reveal を外す。外さないと上の 1.5s が
   ホバーにも効いて、指を置いてから明るくなるまで鈍くなる。 */
.shot img { transition: filter .6s var(--ease), transform 1.2s var(--ease); }
.shot:hover img { filter: brightness(.97) saturate(.97); transform: scale(1.03); }

/* 5. 予約できる個室ブースだけ、ごく浅く明滅させる。
      色（金）だけで伝えると色覚特性によっては区別できないため、動きでも示す。 */
/* 10. フロアマップが図面のように引かれる。
       この図はページで唯一まったく静止していた要素だった（個室ブースが
       明滅するだけ）。間取り図が引かれていく動きは、図の中身そのものと
       意味が合っている。ロゴの輪と同じ stroke-dashoffset の手法。

       部屋の輪郭だけを実際に「描き」、中の設備・席・文字は順に灯す。
       全部を描こうとすると、形ごとに周長が違うので同じ速度で描けず、
       小さい図形だけ最後に唐突に現れる（pathLength を全図形に付ければ
       揃うが、そのためにSVGの全要素を書き換えることになる）。

       起点は .space-layout の .is-in。既存の IntersectionObserver が
       付けるクラスをそのまま使い、監視対象を増やしていない。 */
/* ⚠️ 隠す状態を「既定」に置かないこと。
      最初は opacity:0 / dashoffset:1290 を既定にして animation で見せていたが、
      アニメーションが走らない環境（拡張機能等で無効化した場合）では
      見せる側が動かないので、**図が完全に消えたまま**になる。実測で確認した。

      そこで隠す指定はキーフレームの from 側だけに置き、fill-mode は
      backwards にしてある。アニメーションが走らなければ fill も掛からず、
      要素は素の状態＝表示のまま残る。このページの原則
      「『動かない』より『読めない』ほうが致命的」に合わせた作り。

      1290 = この矩形のおおよその周長（400×250、角丸10）。dashoffset が 0 の
      ときは1本の破線が全周を覆うので、静止時の見た目は変わらない。
      矩形の寸法を変えたらここも直すこと。 */
html[data-motion] .space-layout .fp-room { stroke-dasharray: 1290; }
html[data-motion] .space-layout.is-in .fp-room {
  animation: fpDraw 1.5s var(--ease-sweep) .1s backwards;
}
@keyframes fpDraw { from { stroke-dashoffset: 1290; } to { stroke-dashoffset: 0; } }

/* 中身は描かずに灯す。部屋が引かれ終わる頃から順に現れる。 */
html[data-motion] .space-layout.is-in .fp-fixture   { animation: fpFade .7s var(--ease) .75s backwards; }
html[data-motion] .space-layout.is-in .fp-surface   { animation: fpFade .7s var(--ease) .95s backwards; }
html[data-motion] .space-layout.is-in .fp-seat      { animation: fpFade .7s var(--ease) 1.1s backwards; }
/* 予約できる個室ブースは最後。ここだけ遅らせると視線が残る */
html[data-motion] .space-layout.is-in .fp-seat.fp-booth { animation-delay: 1.3s; }
html[data-motion] .space-layout.is-in .fp-door      { animation: fpFade .7s var(--ease) 1.45s backwards; }
html[data-motion] .space-layout.is-in .floorplan figcaption { animation: fpFade .7s var(--ease) 1.6s backwards; }
@keyframes fpFade { from { opacity: 0; } to { opacity: 1; } }

/* 設備アイコンも同じ手で描き起こす。フロアマップと同じ節にあるので、
   図が引かれた続きにアイコンが描かれ、ひとつながりの所作として読める。

   pathLength="1" を各図形に付けてあるので、線の実長に関係なく
   dasharray:1 / dashoffset:1→0 で同じ速さで描ける。これが無いと、
   短い線だけ最後に唐突に現れる（フロアマップで輪郭しか描かなかった理由）。

   ここも隠す指定は from 側だけ。fill-mode は backwards なので、
   アニメーションが走らない環境ではアイコンが素のまま表示される。 */
html[data-motion] .amenities .amenity-icon [pathLength] { stroke-dasharray: 1; }
html[data-motion] .amenities.is-in .amenity-icon [pathLength] {
  animation: iconDraw .85s var(--ease-sweep) backwards;
}
@keyframes iconDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* 塗りの図形（Wi-Fiの点・空席の1マスなど）は描けないので、線が引けた頃に灯す */
html[data-motion] .amenities.is-in .amenity-icon [stroke="none"] {
  animation: fpFade .5s var(--ease) .45s backwards;
}

/* 上から順に。6項目を一気に描くと、どれを見ればいいか分からなくなる */
html[data-motion] .amenities.is-in li:nth-child(1) .amenity-icon * { animation-delay: .05s; }
html[data-motion] .amenities.is-in li:nth-child(2) .amenity-icon * { animation-delay: .13s; }
html[data-motion] .amenities.is-in li:nth-child(3) .amenity-icon * { animation-delay: .21s; }
html[data-motion] .amenities.is-in li:nth-child(4) .amenity-icon * { animation-delay: .29s; }
html[data-motion] .amenities.is-in li:nth-child(5) .amenity-icon * { animation-delay: .37s; }
html[data-motion] .amenities.is-in li:nth-child(6) .amenity-icon * { animation-delay: .45s; }

@media (prefers-reduced-motion: no-preference) {
  .fp-seat.fp-booth rect { animation: boothBreathe 6s var(--ease) infinite; }
  .fp-seat.fp-booth rect:nth-of-type(2) { animation-delay: .6s; }
  .fp-seat.fp-booth rect:nth-of-type(3) { animation-delay: 1.2s; }
}
@keyframes boothBreathe {
  0%, 100% { fill: rgba(201, 162, 39, .17); }
  50%      { fill: rgba(201, 162, 39, .30); }
}

/* 料金が切り替わった瞬間だけ、ごく短く沈めて戻す（変わったことを返す） */
.calc-amount { transition: opacity var(--dur-fast) var(--ease); }
.calc-amount.is-changing { opacity: .35; }

/* ── モーション低減 ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    /* 遅延も潰す。時間だけ潰して遅延を残すと、ロゴの文字が 0.3 秒
       消えたままになるなど「一瞬欠けてから出る」状態が残る。 */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
  }
}

/* ───────── バーチャル店舗への入口（席・設備の末尾） ─────────
   実店舗とは別のオンライン空間なので、説明と注記（.note）を必ずセットで出す。
   見出しは .step h3 / .zone-list h3 と同じ書体、境界は .amenities と同じ罫線。 */
.virtual-entry {
  margin-top: clamp(52px, 8vw, 80px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--rule);
  max-width: 52ch;
}
.virtual-entry h3 {
  font-family: var(--display); font-size: 1.05rem; font-weight: 400;
  letter-spacing: .04em; line-height: 1.6; margin-bottom: 14px;
}
.virtual-entry p:not(.note) { color: var(--paper-2); font-size: 1rem; line-height: 1.9; }
.virtual-entry .note { margin-top: 18px; }
.virtual-entry .btn { margin-top: 28px; }