@charset "utf-8";
/* ===================================================================
   株式会社ALLY 会社トップ 別案C「ふたつの光がめぐり、社名が灯る」
   works/ally/lights/index.html 専用。2026-09-08 第2版
   -------------------------------------------------------------------
   ■ 本番（corp.css）・別案A（night.css）・別案B（noir.css）とは独立。
     どれも読み込まない／上書きしない。

   ■ 第2版の振付（CEO指示「二つの光がぐるぐる回って、最後にBucksとRoadの欄を
     照らして、じわっと株式会社ALLYが表示されるイメージ」）
       0ms      夜の地・2枚のパネル・ヘッダーは**最初のフレームから完成**している
       0–1000   ふたつの光が楕円軌道を 1.5周（540°）。左右対称の鏡像なので
                **上下で2回すれ違う**。角度スケジュールに ease-out を焼き込んで
                あるので、急に止まらず吸い込まれるように減速して着地する
       800–1400 着地した光がパネルを照らす（.pan-wash の不透明度）
       950–1550 店の色の細罫が中央側から引かれる（.pan-rule）
       700–1500 「株式会社ALLY」ほかコピーが **じわっと** 浮かぶ（不透明度のみ）
       1050–1600 2店をつなぐ光の筋が伸びる（.seam）
       1800–     層1 ambient（呼吸）へ引き継ぎ。以後は静止しない
     イントロの総尺 1600ms（指示の上限 1800ms 以内）。
     ※ 本番の実測で LCP 中央値が 2,201ms（目標2.0秒）を超えたため、
       1750ms から 150ms 詰めた。合わせて Google Fonts の CSS に
       rel="preload" as="style" を足して優先度を戻した（index.html 側）。

   ■ 周回の作り方（transform だけで作る）
     θ(p) = 540° × easeOut(p) を **キーフレームに焼き込み**、
     animation-timing-function は linear。25キーフレームで楕円をサンプリングしている
     （光は輪郭のないグラデーションなので、この分割で軌道の折れは見えない）。
       位置 = ( ±Rx(p)·cosθ , Cy(p) + Ry(p)·sinθ )
       Rx: 8% → 32%（着地点の x）／Ry: 14% → 30%／Cy: 0 → 62%（パネルの頭上へ沈む）
       ※ 820px以上は Rx 9%→48% / Cy 0→26%（横に広いので離れ方を大きく取る）
       BUCKS と Road は x の符号だけが逆（鏡像）。y は常に同じなので、
       cosθ=0 になる位置＝楕円の上下で必ず交差する。
     **100% のキーフレームは基底の transform / opacity と 1px・0.001 も違わない。**
     したがってアニメーションが1本も走らなくても着地後の絵になる。

   ■ 設計の根っこ ── 「基底の値が常に最終状態」
     @keyframes は 0%〜99% に**途中経過だけ**を書き、100% は必ず基底と同じ値にする。
       - prefers-reduced-motion: reduce → animation:none で即・最終状態
       - 古いブラウザ／CSSアニメーション不可 → 最初から最終状態
     **fill-mode は both ではなく backwards。** both だと再生後も 100% の値が
     「アニメーション由来の値」として貼り付き、:hover / :active の transform を
     上書きしてしまう（層3が効かなくなる）。100% と基底が同値なので見た目は変わらない。

   ■ LCP について（第2版で方針が変わった点）
     第1版は「h1 の opacity を触らない」ことで LCP=FCP を作っていた。
     第2版は CEO指示の「じわっと表示」＝不透明度のフェードが必須なので、
     **h1 を含むコピーは 700ms から 800ms かけてフェードインする**。
     そのかわり
       ・イントロの総尺を 1600ms に抑えた
       ・光の着地（800ms〜）とコピーのフェード（700ms〜）を重ねた
       ・Google Fonts の CSS を非ブロッキングにした（index.html 側）
     ロゴ <img> は**最初のフレームから不透明**（opacity を一度も触っていない）。
     光の演出は全て CSS グラデーションで、LCP の候補にならない。

   ■ 第2版のスマホ対応（実測に基づく是正）
     第1版は 375×667 でヒーローが 1031px（1.55画面分）あり、Road のパネルが
     完全に画面外だった。「2店やっている」が1画面で伝わらない＝依頼の中心が未達。
     → **スマホでも2カラム**（デスクトップと同じ左右分割）に変更。
       ヒーローのコピー・余白・パネル内の寸法を狭い画面用に詰め、
       説明文は短い版（.pan-desc--s）に差し替える。
       320×568 でも 社名／キャッチ／2店のロゴ／2店の店名 が同時に見える。

   ■ 動きの3層
     層1 ambient … .lz-seed::before / .lz-orb::before / .seam::after。
                    周期 8.5s / 7.2s / 6.4s / 6.8s と長さを揃えていないので位相が揃わない。
                    **opacity の倍率は最大 1.00（＝静止時より明るくならない）。**
     層2 scroll  … [data-rv] のフェードアップ、[data-thread] の光の筋、
                    animation-timeline: scroll() による視差（@supports で囲ってある）。
     層3 press   … .pan-lamp。hover / :active / :focus-visible / .is-press。

   ■ 配色
     地色     #0b1a26  … corp.css の --dark:#0d1c29 を起点に、夜側へわずかに深くした色。
     BUCKS    #c4763a  … bucks.css --accent と同値
     Road     #c8a35c  … road.css  --accent と同値
     灯りの芯 #ffe2b8

   ■ 角丸は 1px も使っていない（サイト全体の角丸ゼロ方針に合わせる）
   =================================================================== */

:root{
  --night:#0b1a26;
  --night-deep:#040d14;
  --panel:#12242f;
  --panel-b:#0a1721;
  --text:#eef4f9;
  --muted:#b9cad7;
  --line:rgba(255,255,255,.14);
  --bucks:#c4763a;
  --road:#c8a35c;
  --warm:#ffe2b8;
  --wrap:1120px;
  --hd-h:56px;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic Medium","Yu Gothic",Meiryo,system-ui,-apple-system,sans-serif;
  --serif:"Marcellus","Hiragino Mincho ProN","Yu Mincho",Georgia,"Times New Roman",serif;
  --ease-out:cubic-bezier(.16,.84,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
/* scroll-padding-top … 固定ヘッダーがページ内リンクの着地点を隠さないようにする。
   #main（スキップリンク）で飛んだときに見出しがヘッダーの下へ潜らない。
   ★ html には overflow を**書かない**。書くと body の overflow が伝播しなくなり、
     .hd の position:sticky が黙って壊れる（body の解説を参照） */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hd-h) + 12px)}
body{
  margin:0;
  background:var(--night);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.8;
  letter-spacing:.01em;
  overflow-wrap:anywhere;
  /* ★ 第7版で overflow-x:hidden を**外した**。
     ヘッダーを position:sticky にするための必須条件。

     実測（375px・Chrome）:
       body{overflow-x:hidden} だけ（html は無指定）→ ルートの overflow が visible
         なので body の値がビューポートへ伝播し、body 自身の used value は visible。
         この状態なら sticky は効く（scrollY=900 で .hd の top=0 を実測）。
       しかし **ハンバーガーを開くと `.nav-open,.nav-open body{overflow:hidden}` で
         html にも overflow が付き、伝播が止まって body が本物のスクロールコンテナ**
         になる。body の scrollTop は 0 のままなので、sticky はドキュメント先頭へ戻り
         **ヘッダーが画面外へ飛ぶ**（実測: hdTop=-900・ナビのパネルも -844）。
         ＝ メニューを開いた瞬間に閉じるボタンごと消える。
     そこで「隠して誤魔化す」のをやめ、はみ出しの原因側だけで閉じる方針にした。
     ヒーローの光は .hero{overflow:hidden}、下層の灯りは .head-lz / .sec-lz /
     .sv-lz が自分で切っている。4ページ×9幅の実測で横スクロールは 0px。 */
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--warm);outline-offset:3px}

/* 狭い画面は左右の余白を 20px まで詰める（＝パネル2枚ぶんの幅を稼ぐ）*/
.wrap{width:min(100% - 20px,var(--wrap));margin-inline:auto}
@media (min-width:400px){ .wrap{width:min(100% - 32px,var(--wrap))} }

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--warm);color:#12202e;padding:12px 18px;font-weight:700;
}
.skip:focus{left:12px;top:12px}

/* ---------- ヘッダー ---------- */
/* 第7版（CEO指示「ヘッダーは固定にして」）
   ★ position:fixed ではなく **sticky** にした。
     fixed だとヘッダーの高さ（実測 57px）がフローから抜けるので、
       ・.hero{min-height:calc(100svh - var(--hd-h))} の引き算が二重になる
       ・320×568 の「1画面に収まっているか」の判定（0.8961）が即座に割れる
     sticky なら要素はフローに残るため、**レイアウトは1pxも動かない**
     （実測: 第6版 508.96px → 第7版 508.96px で一致）。
   ★ 背景の不透明度を .55 → .94 に上げた。固定にすると社名・白い本文・
     灯りがヘッダーの裏を通過するため、.55 のままではナビ文字（16px・#eef4f9）の
     コントラストが割れる。実測は下の「掃引」コメントを参照。
   ★ backdrop-filter は使っていない（実機のGPU負荷を増やしたくないため）。
     不透明度だけで足りている。 */
/* 第8版（CEO指示「ヘッダーもオシャレにして」）
   ★ **高さは 1px も増やしていない（57px のまま）。** sticky はフローに残るので、
     ヘッダーが高くなるとヒーローが下へ押し出され、320×568 の1画面判定（0.8961）が
     即座に基準0.90を割る。罫を ::after で引くと 57→56px に縮んでしまうため、
     **border-bottom は 1px 残したまま、その上に ::after を重ねている**。
   ★ 下端の罫を「白1本」から**中央だけ金がにじむ光の筋**にした。
     フッター上端（.ft::before）と同じ語彙で、ページの上下が同じ言葉で閉じる。 */
/* ★ 光の筋の罫は **.hd 自身の背景の2枚目**として引いている（::after を作っていない）。
     理由は CLS。この作りにする前は ::after で 1px の線を重ねていたが、
     **Marcellus が読み込まれた瞬間に .hd-logo が組み直されてヘッダーが揺れる
     既存のシフト**（第6版から存在する。下の「既知の課題」を参照）に、
     この ::after が「動いた要素」として1つ余分に乗り、スコアがわずかに増えていた
     （実測 0.0382 → 0.0383〜0.0398）。背景なら要素が増えないので上乗せが消える。
   ★ background-position:0 100% ＋ background-size:100% 1px は
     **border-box の最下段1px＝ border-bottom にちょうど重なる**。
     border を消して線に置き換えるとヘッダーが 57→56px に縮むので、
     border は 1px 残したまま、その上に線を描いている（高さは 57px のまま）。 */
.hd{
  position:sticky;top:0;z-index:20;
  min-height:var(--hd-h);
  border-bottom:1px solid rgba(255,255,255,.07);
  background-color:rgba(4,13,20,.94);
  background-image:linear-gradient(90deg,
    rgba(255,255,255,.05) 0%, rgba(255,226,184,.5) 30%,
    rgba(200,163,92,.45) 62%, rgba(255,255,255,.05) 100%);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 1px;
}
/* 第3版: 右上ハンバーガー（768px未満）。
   第2版は「会社概要／店舗一覧／お問い合わせ」がロゴの下へ回り込んで**2段**になり、
   スマホでヘッダーが厚くなっていた（CEOのスクショで確認）。
   別案Bの本採用ページ（noir.css / noir.js）と**同じ挙動**にそろえる。
     ・768px 未満だけ畳む。それ以上は横1行のナビ
     ・**CSSの既定は「ナビは見える／ボタンは display:none」**。
       lights.js が <html> に .js-burger を付けたときだけ畳む。
       JSが落ちてもナビに到達できなくならない（<button hidden> と二重に守る）
     ・ハンバーガーは演出ではなく**機能**なので prefers-reduced-motion でも動く
       （lights.js の reduce 判定より前に置いてある）。ここで止まるのは
       3本線が×に変わる 0.22s のトランジションだけで、開閉そのものは効く */
.hd-in{
  min-height:var(--hd-h);
  display:flex;align-items:center;gap:0 10px;flex-wrap:wrap;
  padding:0;
}
/* 第5版: ヘッダーの社名を1つにした（CEO指示「ヘッダーの会社名がダブっている」）。
   第4版までは <b>ALLY</b> と <span>株式会社ALLY</span> の**2行**で、同じ社名が
   2回出ていた。<b>株式会社ALLY</b> の1行だけにしてある。
   ★ 2行（実測 約53px）→ 1行（約20px）に縮むので、**.hd-logo 自身が44pxを割る**。
     min-height:44px を明示してタップ領域を保つ。
     .hd / .hd-in は min-height:var(--hd-h)=56px なので、**ヘッダー全体の高さは
     56pxのまま変わらない**（＝ヒーローの min-height 計算にも影響しない）。
   ★ 書体を serif（Marcellus）から sans に変えた。Marcellus は欧文フォントなので、
     「株式会社」の4文字だけが Hiragino Mincho ProN に落ちて ALLY と書体が食い違う。
     第4版は <b> の中身が欧文の "ALLY" だけだったのでこの問題が出ていなかった。 */
/* 第5版（④）: CEO指示「ヘッダーの文字フォントがダサい。かっこいい感じに仕上げてほしい」。
   ★ **フォントは1本も足していない。** 既に読んでいる2書体だけで組んである
     （Google Fonts の追加は第2版でLCPの律速だったことが実測で分かっているため）。
       「株式会社」… Zen Kaku Gothic New 500（var(--sans)）／16px／字送り .26em
       「ALLY」   … Marcellus（var(--serif)）／24px／字送り .20em ← サイトの表示書体
   ★ 和文と欧文を1書体で通そうとすると必ず破綻する。Marcellus は欧文専用なので
     「株式会社」だけが Hiragino Mincho に落ちて書体が食い違い、
     逆に Zen Kaku で "ALLY" を組むと本文と同じ顔になって表示に見えない。
     **和文＝ゴシック／欧文＝Marcellus と役割で分けるのが、いま持っている札での最善手。**
   ★ 出るのは「株式会社ALLY」の**1語だけ**（第4版の "ALLY" + "株式会社ALLY" の重複は解消済み）。
     読み上げにも "株式会社ALLY" と1回だけ渡る（span は装飾の区切りで、
     aria-hidden も role も付けていない）。
   ★ 字送りの右余りは flex の gap で吸収する。text-indent はブロック用なので
     インラインの span には効かない（.eyebrow は <p> なので使えている）。
   ★ タップ領域: 中身は 24px 程度にしかならないので min-height:44px を明示する。
     .hd / .hd-in は min-height:56px なので**ヘッダー全体の高さは変わらない**。 */
.hd-logo{display:flex;align-items:center;min-height:44px;margin-right:auto}
.hd-logo b{display:flex;align-items:baseline;gap:.28em;font-weight:400;line-height:1}
.hd-ka{
  font-family:var(--sans);
  font-size:1rem;font-weight:500;line-height:1;
  letter-spacing:.26em;
  /* --warm から一段落とした砂色。ALLY より一歩引かせる（同じ金だと2語が競う） */
  color:#d8c2a1;
}
.hd-en{
  font-family:var(--serif);
  font-size:1.5rem;font-weight:400;line-height:1;
  letter-spacing:.20em;
  color:var(--warm);
}
/* 第8版: ナビをロゴと同じ設計思想で組み直した。
   第7版までは **700 のベタ置きの白**（--text #eef4f9）で、ロゴの繊細さと釣り合っていなかった。
   ロゴの作りは「主役の ALLY（Marcellus・--warm）／一歩引いた 株式会社（ゴシック500・#d8c2a1）」。
   **ナビはその“一歩引いた側”と同じ役回り**なので、同じ手つきで組む:
       ウェイト  700 → **500**（.hd-ka と同値）
       字送り    既定 → **.12em**（820px以上で .16em。ロゴの .26em/.20em に対し一段控えめ）
       色        --text(#eef4f9) → **--muted(#b9cad7)**（ロゴに主役を譲る）
   ★ font-size は 16px のまま下げていない（本文16px未満0件の基準を守るため）。
     「和文を小さくして Marcellus の英字を添える」案は**採らなかった**。
     COMPANY / SHOPS / CONTACT を添えると英字ラベルが 10〜11px になり
     16px未満が3件生まれるうえ、768〜820px でナビが2段に折れてヘッダーが 57px を超える。 */
.nav{display:flex;gap:0;margin-inline:-6px}
.nav a{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 6px;
  font-size:1rem;font-weight:500;color:var(--muted);
  /* ★ 字送りを開くのは **768px 以上（＝横1行のナビが実際に出る幅）だけ**。
     768px 未満でも広げると、**JSが .js-burger を付ける前の一瞬**に
     ナビが横並びのまま描かれてヘッダーが2段（57→88px）に折れ、
     直後に畳まれて `<main>` が12px跳ね上がる＝ CLS 0.278 の巨大なシフトになる。
     実測: 375px の会社概要で 4回中3回発生（第7版は4回中1回）。
     畳んだあとのパネル（.nav.is-open）は position:absolute でヘッダーの高さに
     影響しないので、**そちらには下で字送りを入れてある**。 */
  /* 現在地と反応を示す金の細い罫。**背景画像で引いている**のがポイントで、
     background-origin:content-box にすると罫の幅が padding を除いた
     「文字の幅」にぴったり合う。padding はブレークポイントごとに 6/8/10px と
     変わるので、::after の left/right で合わせると3か所を追わねばならない */
  background-image:linear-gradient(90deg,
    rgba(200,163,92,0) 0%, #c8a35c 20%, #efdcb4 50%, #c8a35c 80%, rgba(200,163,92,0) 100%);
  background-repeat:no-repeat;
  background-origin:content-box;
  background-position:50% calc(100% - 9px);
  background-size:0% 1px;
}
@media (min-width:768px){
  .nav{margin-inline:0 -8px}
  .nav a{padding:0 8px;letter-spacing:.12em}
}
@media (min-width:820px){
  .hd-ka{font-size:1.0625rem;letter-spacing:.30em}
  .hd-en{font-size:1.75rem;letter-spacing:.24em}
  .nav{margin-inline:0 -10px;gap:2px}
  .nav a{padding:0 10px;letter-spacing:.16em}
}
/* 現在地と、触れたときの反応。
   ★ **hover に依存していない。** 同じ見え方（金の文字＋金の細い罫）を出す条件は3つあり、
     hover はそのうちの1つでしかない:
       [aria-current="page"] … 今いるページ。**状態なので、指もキーボードも要らない**
       :focus-visible        … キーボード操作
       :hover                … マウス
     スマホには hover が無いが、現在地は aria-current で必ず出る。
   ★ :active（押している最中）は白へ振って、押した手応えを返す。
   ★ 動くのは色と罫の伸縮だけで、**レイアウトは動かさない**（CLSを増やさない）。 */
.nav a{transition:color .2s ease,background-size .26s ease}
.nav a:hover,
.nav a:focus-visible,
.nav a[aria-current="page"]{color:var(--warm);background-size:100% 1px}
.nav a:active{color:#fff}

/* ハンバーガーのボタン。48×48（タップ領域の下限44pxを満たす） */
/* 第8版: 枠の白1pxを**金の細い罫**に変え、3本線のうち**真ん中だけ短く**した。
   3本が同じ長さのベタ置きだと汎用のUIアイコンに見える。長さを変えると、
   サイトの「1pxの罫を組み合わせて絵にする」語彙と同じ顔になる。
   ★ 寸法は 48×48 のまま（タップ領域の下限44pxを満たす）。
   ★ 短いのは真ん中の線だけ。開いたときに×を作るのは1本目と3本目で、
     真ん中は opacity:0 で消えるので、×の形は第7版と1pxも変わらない。 */
.burger{
  display:none;
  width:48px;height:48px;padding:0;margin:0;
  background:transparent;border:1px solid rgba(200,163,92,.42);color:var(--warm);
  cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.burger:hover,.burger:focus-visible{border-color:rgba(200,163,92,.9)}
.burger .bar{display:block;width:22px;height:14px;margin:0 auto;position:relative}
.burger .bar i{
  position:absolute;left:0;right:0;height:1px;background:currentColor;
  transition:transform .22s ease,opacity .16s ease;
}
.burger .bar i:nth-child(1){top:0}
.burger .bar i:nth-child(2){top:6px;right:6px}   /* 真ん中だけ短い */
.burger .bar i:nth-child(3){top:12px}

/* JSが動いたときだけ畳む（768px 未満） */
@media (max-width:767.98px){
  .js-burger .burger{display:block}
  .js-burger .nav{display:none}
  .js-burger .nav.is-open{
    display:block;
    position:absolute;left:0;right:0;top:100%;
    background:var(--night-deep);
    border-bottom:1px solid rgba(255,255,255,.14);
    padding:6px 10px 18px;
    margin-inline:0;
  }
  .js-burger .nav.is-open a{
    display:flex;align-items:center;justify-content:flex-start;
    min-height:52px;
    font-size:1.0625rem;border-top:1px solid rgba(255,255,255,.12);
    /* 第8版: 開いたパネルでは**下の罫を使わない**。行が画面幅いっぱいなので、
       文字の下に幅いっぱいの罫が出ると「区切り線」に見えて現在地の印にならない。
       代わりに**行の左端に金の縦罫**を立てる（同じ金・同じ1px系の語彙）。
       ★ 現在地でない行にも同じ幅の透明な縦罫を置く。こうしないと現在地の行だけ
         文字が右へずれる（開くたびに 2px 動いて見える）。
       ★ aria-current はHTMLに書いてある静的な状態なので、最初の描画から出ている
         ＝ レイアウトシフトにならない。 */
    background-size:0 1px;
    border-left:2px solid transparent;
    padding:0 6px 0 12px;
    /* パネルは position:absolute なのでヘッダーの高さに影響しない。
       字送りはここで開く（ヘッダー本体の .nav a では 768px 未満は開かない） */
    letter-spacing:.14em;
  }
  .js-burger .nav.is-open a:first-child{border-top:0}
  .js-burger .nav.is-open a[aria-current="page"]{border-left-color:#c8a35c}
}
@media (min-width:400px){
  .js-burger .nav.is-open{padding-inline:16px}
}
.nav-open .burger .bar i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-open .burger .bar i:nth-child(2){opacity:0}
.nav-open .burger .bar i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* 背面スクロールのロック。開いているあいだだけ overflow:hidden にする（閉じれば元に戻る）。
   ★ 第7版で **body への指定をやめ、<html> だけ**にした。
     body にも overflow が付くと body が本物のスクロールコンテナになり、
     .hd の position:sticky がドキュメント先頭に戻って**ヘッダーごと画面外へ飛ぶ**
     （実測: 第6版の指定のままだと scrollY=900 で hdTop=-900、ナビのパネルも -844。
      ＝ メニューを開いた瞬間に閉じるボタンが消える）。
     <html> だけならルートの overflow がビューポートへ伝播し、
     body の used value は visible のまま＝ sticky が生きる。
     実測: 開いた状態でも hdTop=0／背面のスクロールは 0px 動かない。 */
.nav-open{overflow:hidden}

/* ---------- 第8版: 固定になったことを活かした状態変化 ----------
   スクロールすると**地がわずかに濃くなり、下端の光の筋が強まる**。
   「今ページの途中にいる」ことが、文字を1つも足さずに分かる。

   ★ 実装は scroll イベントではなく `animation-timeline: scroll(root)`。
     このサイトが視差で既に使っている語彙で、非対応ブラウザは @supports ごと
     丸ごと無視する（＝ 基底の .94 のまま。内容は1つも変わらない）。
   ★ **動かすのは background-color と opacity だけ。高さ・余白・transform は
     1つも動かさない。** ヘッダーの高さが変わるとレイアウトシフトになるうえ、
     sticky はフローに残るのでヒーローが押し出されて 320×568 の1画面判定が割れる。
     実測: CLS は 4ページ×375/1280 で最大 0.00038（第7版と同値）、高さは 57px 固定。
   ★ **不透明度は下げる方向へは決して動かさない**（.94 → .985）。
     ヘッダーの下をコンテンツが通過するときのコントラストは .94 の状態で
     最悪 10.06 と実測済みなので、常にそれ以上に濃い＝安全側にしか振れない。
   ★ prefers-reduced-motion:reduce では丸ごと止める。ここを外すと
     scroll-timeline のアニメーションが document.getAnimations() に
     running として残り、「reduce で走行アニメーション0本」の基準を割る。 */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hd{
      animation:hd-settle linear both;
      animation-timeline:scroll(root);
      animation-range:0 96px;
    }
  }
}
/* background-color だけを動かす。background-image（罫）は動かさないので、
   要素も増えず、補間できないプロパティも触らない */
@keyframes hd-settle{
  from{background-color:rgba(4,13,20,.94)}
  to  {background-color:rgba(2,9,15,.985)}
}

/* ===================================================================
   ヒーロー
   =================================================================== */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;                       /* 光レイヤーのはみ出しを閉じる */
  background:var(--night);
  padding:clamp(20px,4.2vh,84px) 0 clamp(24px,5vh,96px);
  min-height:calc(100vh - var(--hd-h));
  display:flex;align-items:center;
}
/* svh はアドレスバーが出ている「小さい方」の高さ。伸縮しても増えないので
   スクロールでガタつかない。min-height なので中身が増えれば素直に伸びる */
@supports (height:100svh){
  .hero{min-height:calc(100svh - var(--hd-h))}
}
@media (min-width:820px){
  .hero{padding:clamp(40px,9vh,84px) 0 clamp(48px,10vh,96px)}
}

/* ---------- 光レイヤー（全て装飾・pointer-events:none） ----------
   (A) .lz     … 夜の地とフィルム粒子。ヒーロー全面・静止。
   (B) .lights … めぐる2つの光と、社名の背後に灯る芯。
       **コピーの中心を原点にした点光源**。ヒーロー高さの％で置くと、
       スマホでは中身が縦に伸びて芯がパネルの裏に隠れて見えなくなる（第1版で実測済み）。
       コピー基準なら画面高・行数に関係なく社名の周りで灯る。
   ■ 呼吸（層1）は **::before に持たせている**。導入アニメーションが親の
     transform / opacity を使うので、同じプロパティを2つのアニメーションで
     奪い合わないように階層を分けた。 */
.lz{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.lz>*{position:absolute;inset:0}

.lights{position:absolute;left:50%;top:50%;width:0;height:0;z-index:-1;pointer-events:none}
/* translate プロパティは transform とは別枠で先に適用されるので、
   「中心合わせ」と「アニメーションの transform」が食い合わない */
.lights>*{display:block;position:absolute;left:0;top:0;translate:-50% -50%}
.lights>*::before{content:"";position:absolute;inset:0;display:block}

/* 深い夜の地。静止（アニメーションしない）＝ 初回フレームから背景が完成している */
.lz-base{
  background:
    radial-gradient(96% 66% at 50% 0%, #24506a 0%, #132c40 30%, #091622 64%, var(--night-deep) 100%);
}

/* ④ 社名の背後に灯る芯。**コピーと同じタイミングで じわっと 現れる**。
   第1版では「最初にひとつ灯る」役だったが、第2版の振付では
   「最後に社名が灯る」ための光になった。
   基底 opacity は .30。**この値を超える瞬間はもう無い**（第1版は 26% で .38 まで
   上げていて、その瞬間だけ .sub のコントラストが割れる余地があった）*/
.lz-seed{
  width:min(148vw,1180px);
  height:min(60vh,440px);
  opacity:.30;
  transform:none;
  animation:seed-in 800ms 700ms var(--ease-out) backwards;
}
.lz-seed::before{
  background:radial-gradient(closest-side,
    rgba(255,226,184,.92) 0%, rgba(255,200,132,.44) 40%, rgba(255,172,92,.13) 66%, transparent 82%);
  /* 層1: 呼吸。周期 8.5s。**opacity は最大 1.00 倍**なので、静止時より明るくならない */
  animation:breathe-a 8.5s 1800ms ease-in-out infinite;
}
@keyframes seed-in{
  0%  {opacity:0;   transform:scale(.55)}
  100%{opacity:.30; transform:scale(1)}
}

/* ①②③ ふたつの光が回り、パネルへ着地する（0 → 1000ms）
   基底＝着地後。キーフレームは gen-orbit.js が生成した楕円のサンプル。
   timing-function は linear（減速は角度スケジュールに焼き込んである）*/
.lz-orb{
  width:min(88vw,620px);
  height:min(38vh,330px);
  opacity:.38;
}
.lz-orb--b{
  transform:translate(-32%,62%) scale(1);
  animation:swirl-b 1000ms linear backwards;
}
.lz-orb--r{
  transform:translate(32%,62%) scale(1);
  animation:swirl-r 1000ms linear backwards;
}
.lz-orb--b::before{
  background:radial-gradient(closest-side,
    rgba(233,150,74,.95) 0%, rgba(196,118,58,.46) 40%, rgba(196,118,58,.11) 66%, transparent 82%);
  animation:breathe-b 7.2s 1800ms ease-in-out infinite;
}
.lz-orb--r::before{
  background:radial-gradient(closest-side,
    rgba(232,196,120,.95) 0%, rgba(200,163,92,.46) 40%, rgba(200,163,92,.11) 66%, transparent 82%);
  animation:breathe-b 6.4s 1800ms ease-in-out infinite;
}

/* ---- 周回の軌道（狭い画面 / 基底）: 着地 (∓40%,86%) ---- */
@keyframes swirl-b{
  0%{opacity:0.000;transform:translate(8.00%,0.00%) scale(0.280)}
  4.17%{opacity:0.153;transform:translate(4.52%,13.32%) scale(0.280)}
  8.33%{opacity:0.306;transform:translate(-6.84%,12.96%) scale(0.281)}
  12.5%{opacity:0.458;transform:translate(-13.59%,1.13%) scale(0.283)}
  16.67%{opacity:0.550;transform:translate(-10.03%,-11.08%) scale(0.287)}
  20.83%{opacity:0.550;transform:translate(0.58%,-15.36%) scale(0.292)}
  25%{opacity:0.550;transform:translate(11.48%,-10.40%) scale(0.300)}
  29.17%{opacity:0.550;transform:translate(17.74%,0.27%) scale(0.309)}
  33.33%{opacity:0.550;transform:translate(17.97%,12.14%) scale(0.321)}
  37.5%{opacity:0.550;transform:translate(13.39%,22.07%) scale(0.336)}
  41.67%{opacity:0.550;transform:translate(6.21%,28.78%) scale(0.354)}
  45.83%{opacity:0.550;transform:translate(-1.60%,32.42%) scale(0.375)}
  50%{opacity:0.550;transform:translate(-8.72%,33.82%) scale(0.399)}
  54.17%{opacity:0.550;transform:translate(-14.55%,33.95%) scale(0.426)}
  58.33%{opacity:0.550;transform:translate(-18.99%,33.65%) scale(0.457)}
  62.5%{opacity:0.550;transform:translate(-22.21%,33.49%) scale(0.492)}
  66.67%{opacity:0.550;transform:translate(-24.50%,33.85%) scale(0.531)}
  70.83%{opacity:0.545;transform:translate(-26.12%,34.90%) scale(0.574)}
  75%{opacity:0.522;transform:translate(-27.32%,36.74%) scale(0.621)}
  79.17%{opacity:0.498;transform:translate(-28.28%,39.35%) scale(0.672)}
  83.33%{opacity:0.474;transform:translate(-29.10%,42.71%) scale(0.728)}
  87.5%{opacity:0.451;transform:translate(-29.85%,46.73%) scale(0.789)}
  91.67%{opacity:0.427;transform:translate(-30.58%,51.35%) scale(0.854)}
  95.83%{opacity:0.404;transform:translate(-31.30%,56.48%) scale(0.925)}
  100%{opacity:0.380;transform:translate(-32.00%,62.00%) scale(1.000)}
}
@keyframes swirl-r{
  0%{opacity:0.000;transform:translate(-8.00%,0.00%) scale(0.280)}
  4.17%{opacity:0.153;transform:translate(-4.52%,13.32%) scale(0.280)}
  8.33%{opacity:0.306;transform:translate(6.84%,12.96%) scale(0.281)}
  12.5%{opacity:0.458;transform:translate(13.59%,1.13%) scale(0.283)}
  16.67%{opacity:0.550;transform:translate(10.03%,-11.08%) scale(0.287)}
  20.83%{opacity:0.550;transform:translate(-0.58%,-15.36%) scale(0.292)}
  25%{opacity:0.550;transform:translate(-11.48%,-10.40%) scale(0.300)}
  29.17%{opacity:0.550;transform:translate(-17.74%,0.27%) scale(0.309)}
  33.33%{opacity:0.550;transform:translate(-17.97%,12.14%) scale(0.321)}
  37.5%{opacity:0.550;transform:translate(-13.39%,22.07%) scale(0.336)}
  41.67%{opacity:0.550;transform:translate(-6.21%,28.78%) scale(0.354)}
  45.83%{opacity:0.550;transform:translate(1.60%,32.42%) scale(0.375)}
  50%{opacity:0.550;transform:translate(8.72%,33.82%) scale(0.399)}
  54.17%{opacity:0.550;transform:translate(14.55%,33.95%) scale(0.426)}
  58.33%{opacity:0.550;transform:translate(18.99%,33.65%) scale(0.457)}
  62.5%{opacity:0.550;transform:translate(22.21%,33.49%) scale(0.492)}
  66.67%{opacity:0.550;transform:translate(24.50%,33.85%) scale(0.531)}
  70.83%{opacity:0.545;transform:translate(26.12%,34.90%) scale(0.574)}
  75%{opacity:0.522;transform:translate(27.32%,36.74%) scale(0.621)}
  79.17%{opacity:0.498;transform:translate(28.28%,39.35%) scale(0.672)}
  83.33%{opacity:0.474;transform:translate(29.10%,42.71%) scale(0.728)}
  87.5%{opacity:0.451;transform:translate(29.85%,46.73%) scale(0.789)}
  91.67%{opacity:0.427;transform:translate(30.58%,51.35%) scale(0.854)}
  95.83%{opacity:0.404;transform:translate(31.30%,56.48%) scale(0.925)}
  100%{opacity:0.380;transform:translate(32.00%,62.00%) scale(1.000)}
}

/* 層1: 呼吸。**0% と 100%（＝いちばん明るい瞬間）で opacity:1・scale:1**、
   つまり静止時とまったく同じ状態。ふくらむ 50% の側は必ず暗くなる。
   したがって「常時アニメーションのピーク」は静止時の値を超えない */
@keyframes breathe-a{
  0%,100%{opacity:1;transform:scale(1)}
  50%    {opacity:.88;transform:scale(1.05)}
}
@keyframes breathe-b{
  0%,100%{opacity:1;transform:scale(1)}
  50%    {opacity:.86;transform:scale(1.04)}
}

/* きめ（フィルム粒子）。1枚の画像も読まずに SVG のノイズで質感だけ足す。
   静止レイヤー。輝度のばらつき（標準偏差）を稼ぐ役目も持つ */
.lz-grain{
  opacity:.24;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
  background-size:160px 160px;
}

/* ---------- 中央のコピー ---------- */
.hero-in{position:relative;z-index:1;width:min(100% - 20px,var(--wrap))}
@media (min-width:400px){ .hero-in{width:min(100% - 32px,var(--wrap))} }

.hero-copy{
  position:relative;      /* .lights（灯り）の原点になる */
  text-align:center;
  margin:0 auto clamp(16px,3vh,58px);
  /* ch は CJK フォントだと 0.5em 相当しかなく、44ch＝374px にしかならない。
     px で持つ（375px幅では 100% が勝つので溢れない） */
  max-width:min(100%,700px);
}
/* ④「じわっと」＝**不透明度だけ**のフェード。硬いスライドインにしない。
   基底は opacity:1 なので、animation が走らない環境では最初から読める。
   .lights は .hero-copy の直下（この要素の外）にあるので、光は一緒に薄まらない */
.hero-txt{
  display:block;
  opacity:1;
  animation:glow-in 800ms 700ms ease-out backwards;
}
@keyframes glow-in{0%{opacity:0}100%{opacity:1}}

.eyebrow{
  margin:0 0 4px;
  font-family:var(--serif);
  font-size:1rem;line-height:1.4;
  letter-spacing:.26em;
  /* --warm(#ffe2b8) だと灯りの上で 4.82:1（4.5 必要）と余裕が薄い。
     ひと段明るい暖色にして 5.2 まで持ち上げてある */
  color:#ffeccd;
  text-indent:.26em;      /* letter-spacing の右余りを打ち消して中央に見せる */
}
h1{
  margin:0;
  font-size:clamp(2rem,8.6vw,4.75rem);
  line-height:1.12;
  font-weight:700;
  letter-spacing:.05em;
  text-indent:.05em;
  color:#fff;
  text-shadow:0 0 34px rgba(255,206,150,.30);
}
/* 第6版: ヒーローの社名も「和文＝ゴシック／欧文＝Marcellus」で組み分ける。
   CEO指示「ここのフォントも修正して」（ヒーローの 株式会社ALLY を指したスクショ）。
   ★ **セレクタを .hero h1 に閉じてある。** 素の h1{} は触っていないので、
     下層3ページ（/company/ /shops/ /contact/）の .page-head h1 には1文字も届かない。
   ★ **フォントは1本も足していない。** Marcellus は .eyebrow とヘッダーで既に読んでいる。
   ★ ヘッダーの値をそのまま持ってこないこと。ヘッダーは 16px/24px、ここは 76px。
     Marcellus は 400 しか無いので、76px でゴシック700の「株式会社」と並べると
     ALLY が痩せて見える。**主従を入れ替えて解いてある**：
       「株式会社」… 従。ゴシック 500（700から落とす）／ALLY の約半分の級数／
                      白の 82%（明度を一段落として ALLY より引く）／字送り .22em
       「ALLY」   … 主。Marcellus 400／h1 と同じ級数（＝いちばん大きい）／純白／字送り .09em
     大きさ・明度・字送りの3つで ALLY を前に出しているので、
     ウェイトが 400 しか無くても痩せて見えない。
   ★ 級数は em ではなく独立した clamp。em 比で持つと 320px（h1＝32px）で
     「株式会社」が 16px まで落ちて .sub(16px) と並んでしまい、主従が消える。
     clamp の下限 1.5rem で 320px でも 24px を保つ（実測）。24px は WCAG の
     「大きな文字」の下限そのものでもあるので、白82%でもコントラストの基準が 3:1 になる。
     20.8px（下限 1.3rem）も並べて描き比べたが、375px で「株式会社」が痩せて見えた。
   ★ letter-spacing の右余りは text-indent で打ち消す（.eyebrow と同じ手当て）。
     打ち消す量は**最後に来る ALLY の .09em**。h1 の em（76px）基準なので .09em でよい。
   ★ white-space:nowrap … 和文と欧文の境目は改行可能点なので、放っておくと
     「株式会社 / ALLY」の2行に割れてヒーローが縦に伸び、320×568 の1画面判定が落ちる。
     320px の実測で 196.7px ／ 使える幅 300px。webfont が落ちて fallback
     （Hiragino Kaku Gothic ProN ＋ Hiragino Mincho ProN）になっても 211.0px で
     1行のまま・横スクロール 0px なので、nowrap で固定して安全（実測で確認）。
   ★ フェードは .hero-txt に掛かったまま（span を足しても1枚で効く）。 */
.hero h1{
  font-weight:400;
  letter-spacing:0;
  text-indent:.09em;
  white-space:nowrap;
}
.h1-ka{
  font-family:var(--sans);
  font-size:clamp(1.5rem,4.7vw,2.6rem);
  font-weight:500;
  letter-spacing:.18em;
  color:rgba(255,255,255,.82);
}
.h1-en{
  font-family:var(--serif);
  font-size:1em;
  font-weight:400;
  letter-spacing:.09em;
  /* 「株式会社」の字送りの右余り（.18em×41.6px＝7.5px）だけでは、
     76px の ALLY に対して 0.09em 相当しか空かず「社A」が詰まって見える
     （ヘッダーは ALLY 24px に対して 0.36em 相当空いている）。
     ここで 0.14em（10.6px）足して、合計 18.1px＝ALLY の 0.24em 相当にしてある。
     4案を 1280px で描き比べて選んだ値（.12em は詰まる／.13em との差は微差） */
  margin-left:.14em;
  /* ★ ここを省くとヒーローが 7px 高くなる（実測 85.12px → 92.12px）。
     行ボックスの高さは、並んだインラインボックスの**和集合**で決まる。
     Marcellus は Zen Kaku よりディセンダが深く（76px時 asc74/desc21 対 asc88/desc22）、
     line-height:1.12 のままだと ALLY の箱だけがベースラインの 6.5px 下へはみ出す。
     7px 伸びると 320×568 の1画面判定が 0.8961 → 0.9084 になり**基準を割る**。
     line-height はインラインボックスの「高さ」だけを変え、**ベースラインは動かさない**ので、
     ここを詰めても見た目の文字位置は 1px も変わらない（実測で確認）。
     .8 は fallback（Hiragino Mincho ProN 等）に落ちても足りるだけの余裕を取った値。 */
  line-height:.8;
  color:#fff;
}
.lead{
  margin:clamp(8px,1.6vh,24px) 0 0;
  font-size:clamp(1.0625rem,4.3vw,1.5rem);
  font-weight:500;
  line-height:1.5;
  color:var(--text);
}
.sub{
  margin:4px 0 0;
  font-size:1rem;line-height:1.5;
  /* --muted(#b9cad7) だと灯りの上で 4.5:1 を割る（第1版の実測 3.06）。
     光がいちばん強い瞬間でも 4.5 を超える明るさに引き上げてある */
  color:#eaf1f7;
  letter-spacing:.04em;
}
@media (min-width:560px){
  .eyebrow{margin-bottom:10px}
  .lead{line-height:1.7}
  .sub{margin-top:8px;line-height:1.8}
}
@media (min-width:820px){
  .hero-copy{margin-bottom:clamp(34px,6vh,58px)}
}

/* ---------- ③ 2枚のパネル ＋ あいだの筋 ----------
   第2版: **どの画面幅でも左右2カラム**。
   第1版はスマホで縦積みだったため、375×667 で Road が画面外へ出ていた。
   光が左右へ分かれて着地するという振付の上でも、左右分割の方が
   スマホとデスクトップで同じ意味を持つ。
   ■ パネル自体は**最初のフレームから完成している**（スライドインしない）。
     光が着地して「照らす」のが振付なので、照らされる対象は先に居る必要がある。
     ロゴ <img> の opacity を触っていないのもここ。 */
/* 第16版: **2行のグリッド**にした。1行目＝枠（.pan＝カードのリンク）、
   2行目＝枠の外（.pan-ft＝案内文 ＋ SNS／電話）。
   ★ 筋（.seam）は 1行目だけに置く。2行目まで伸ばすと枠の外まで線が下りて
     「2枚のパネルをつなぐ」意味が崩れるため（第2版からの振付）。
   align-items:stretch は 1行目に効くので、**2枚のカードの高さは今までどおり一致する。** */
.shops{
  display:grid;
  grid-template-areas:"b  s r"
                      "bf .  rf";
  grid-template-columns:1fr 1px 1fr;
  column-gap:clamp(10px,3.2vw,54px);
  align-items:stretch;
}
.pan--bucks{grid-area:b}
.seam{grid-area:s}
.pan--road{grid-area:r}
.pan-ft--bucks{grid-area:bf}
.pan-ft--road{grid-area:rf}

/* 筋 ＝ 2店をつなぐ ALLY。基底＝伸びきった状態。0% で長さ0（中央から伸びる）*/
.seam{
  position:relative;
  display:block;
  width:1px;height:auto;align-self:stretch;
  justify-self:center;
  background:linear-gradient(180deg,transparent 0%,rgba(255,226,184,.85) 26%,rgba(255,226,184,.85) 74%,transparent 100%);
  box-shadow:0 0 14px rgba(255,206,150,.45);
  transform:scaleY(1);
  animation:seam-y 550ms 1050ms var(--ease-out) backwards;
}
@keyframes seam-y{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
/* 層1: 筋の中を光の粒がゆっくり往復する。周期 6.8s。
   基底は「粒が上端にいる」状態なので、animation が走らなくても破綻しない */
.seam::after{
  content:"";position:absolute;left:-1px;top:0;
  width:3px;height:24%;
  background:linear-gradient(180deg,transparent 0%,rgba(255,226,184,.9) 50%,transparent 100%);
  animation:seam-run 6800ms 2000ms ease-in-out infinite;
}
@keyframes seam-run{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(317%)}
}

/* ===== 第16版: **枠そのものがリンク**（CEO指示・実機確認）=====
   「タップして見る」ボタンは廃止。枠の中はどこを押しても店舗ページへ飛ぶ。
   ★ ここに <a> を入れ子にしないこと（第13版でパーサに外側を閉じられた）。
     案内文と SNS は枠の外（.pan-ft）にあるので、当たり判定は**見た目の枠と一致**する。
   .shops は align-items:stretch のグリッドなので2枚のカードは必ず同じ高さになる。 */
.pan{
  position:relative;
  display:flex;flex-direction:column;
  overflow:hidden;
  padding:16px 12px;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel-b) 100%);
  border:1px solid var(--line);
  color:var(--text);
  /* 層3: 押した感触。導入アニメーションを持たないので transform を奪われない */
  transition:border-color .25s ease, transform .18s ease;
}
@media (min-width:560px){ .pan{padding:22px 16px} }
@media (min-width:820px){ .pan{padding:clamp(26px,5vw,38px) clamp(20px,4.4vw,34px) clamp(24px,4.6vw,34px)} }

/* ③ 着地した光がパネルを照らす（800 → 1400ms）。基底＝照らされた後 */
.pan-wash{
  position:absolute;inset:0;pointer-events:none;
  opacity:1;
  animation:wash 600ms 800ms var(--ease-out) backwards;
}
@keyframes wash{0%{opacity:0}100%{opacity:1}}
.pan--bucks .pan-wash{
  background:radial-gradient(118% 70% at 50% -4%, rgba(214,132,64,.42) 0%, rgba(196,118,58,.15) 44%, rgba(196,118,58,.03) 68%, transparent 84%);
}
.pan--road .pan-wash{
  background:radial-gradient(118% 70% at 50% -4%, rgba(214,176,102,.40) 0%, rgba(200,163,92,.14) 44%, rgba(200,163,92,.03) 68%, transparent 84%);
}

/* 層3: 触った／ホバーした／フォーカスしたときに、その店の灯りがふわっと強まる。
   **hover には依存していない。** スマホには hover が無いので :active と
   .is-press（pointerdown/touchstart で JS が付ける）でも同じように点く。
   .pan-wash とは別の要素にしてあるのは、.pan-wash の opacity を
   導入アニメーションが使っているため（同じプロパティを取り合わない）*/
.pan-lamp{
  position:absolute;inset:0;pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
}
.pan--bucks .pan-lamp{
  background:radial-gradient(128% 82% at 50% 0%, rgba(233,150,74,.24) 0%, rgba(196,118,58,.09) 46%, transparent 76%);
}
.pan--road .pan-lamp{
  background:radial-gradient(128% 82% at 50% 0%, rgba(232,196,120,.22) 0%, rgba(200,163,92,.08) 46%, transparent 76%);
}
/* 第16版: .pan は再び <a> なので :focus-visible が発火する。
   :focus-within も残してあるが、いま枠の中にリンクは .pan 自身しか無い */
.pan:active .pan-lamp,
.pan:focus-visible .pan-lamp,
.pan:focus-within .pan-lamp,
.pan.is-press .pan-lamp{opacity:1}
@media (hover:hover){
  .pan:hover .pan-lamp{opacity:1}
}

/* 店の色の細罫。中央側から外へ引かれる（950 → 1550ms）*/
.pan-rule{
  position:absolute;left:0;top:0;height:2px;width:100%;pointer-events:none;
  transform:scaleX(1);
  animation:rule 600ms 950ms var(--ease-out) backwards;
}
@keyframes rule{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.pan--bucks .pan-rule{background:linear-gradient(90deg,rgba(196,118,58,0),var(--bucks) 50%,rgba(196,118,58,0));transform-origin:100% 50%}
.pan--road  .pan-rule{background:linear-gradient(90deg,rgba(200,163,92,0),var(--road) 50%,rgba(200,163,92,0));transform-origin:0% 50%}

/* .pan（＝<a>）のフロー内の子。**ただの器**（<span>）で、リンクではない。
   flex:1 で枠いっぱいに伸ばす＝枠の中に非対話の隙間を作らない。 */
.pan-in{position:relative;z-index:1;display:flex;flex-direction:column;flex:1 1 auto;min-height:0}

/* ===== 第20版: 看板に灯が入る（CEO指示）=====
   「TOPは灯が灯るまで店舗名なども見えないようにしませんか？
     店舗に光が灯ってから文字がライトに当たって見えるような感じ。看板みたいに」

   ■ 何をしているか
     .pan-in の中身（ロゴ／店名／営業時間／案内文）を、対応する光が着地するまで
     伏せておき、着地した瞬間に**上（＝光源の側）から順に**点灯させる。
     .lz-orb--b → .pan--bucks、.lz-orb--r → .pan--road と1対1に対応していて、
     2枚は同時には点かない（lights.js が swirl-b / swirl-r の animationend で
     それぞれの .pan に .is-lit を付ける）。

   ■ ★ CSSの既定は「見える」側（opacity を一切書かない素の状態）★
     隠すのは **.js-sign が <html> に付いたときだけ**。このクラスは lights.js が
     「reduce でない・rAF がある・店舗カードが実在する」を確認してから初めて付ける。
     したがって JS無効／読み込み失敗／例外／reduce のいずれでも
     **店名も営業時間もロゴも最初から見えている**。
     逆（CSSで隠してJSで見せる）にすると、JSが落ちた瞬間に店舗情報が
     永久に読めなくなる。ここは絶対に反転させないこと。
     ★ display:none / visibility:hidden は使わない（読み上げから消える）。
       opacity だけなので、伏せているあいだもDOMにも読み上げにも残っている。

   ■ 見え方は「単なるフェード」ではなく**点灯**にしてある
     (1) 上の子から 55ms ずつ遅らせる ＝ 光源（.pan-wash の radial-gradient は
         `at 50% -4%` ＝ 枠の上）に近い側から明るくなる
     (2) 出た瞬間だけ brightness で白く飛ばし、暖色の drop-shadow を張ってから
         素の状態へ落ちる ＝ 蛍光管／ネオンに電源が入る瞬間の飛び
     グロー色は店の色（.pan-rule と同じ2系統）に合わせてある。

   ■ レイアウトは1pxも動かさない（opacity と filter だけ。CLS 0）
   ■ 総時間: 着地 +0ms 〜 +685ms（最後の子 = 遅延165ms + 520ms）
     ＝ **着地から1秒以内に4行すべてが読める**。 */
.js-sign .pan-in > *{opacity:0}
.js-sign .pan.is-lit .pan-in > *{
  animation:sign-on 520ms var(--ease-out) forwards;
}
/* 遅延は backwards を付けない＝遅延中は上の opacity:0 のまま伏せられている。
   forwards で終端（opacity:1・filter なし）に留まる＝基底と同じ状態に着地する */
.js-sign .pan.is-lit .pan-in > *:nth-child(2){animation-delay:55ms}
.js-sign .pan.is-lit .pan-in > *:nth-child(3){animation-delay:110ms}
.js-sign .pan.is-lit .pan-in > *:nth-child(4){animation-delay:165ms}
.pan--bucks{--sign-glow:rgba(255,186,112,.55)}
.pan--road {--sign-glow:rgba(255,214,140,.50)}
/* 100% は基底と同じ（filter なし・不透明）。ここを守らないと
   アニメーション終了の瞬間に見た目が跳ねる */
@keyframes sign-on{
  0%  {opacity:0;filter:brightness(2.6) saturate(.45) drop-shadow(0 0 16px var(--sign-glow))}
  24% {opacity:1;filter:brightness(1.9)  saturate(.7)  drop-shadow(0 0 18px var(--sign-glow))}
  58% {opacity:1;filter:brightness(1.14) saturate(.94) drop-shadow(0 0 8px var(--sign-glow))}
  100%{opacity:1;filter:none}
}

/* ロゴ ── 縦横比の違う2枚（672×420 / 401×205）を**高さで揃える**。
   width:auto なので潰れも引き伸ばしも起きない。原寸（420px / 205px 高）より
   はるかに小さいので拡大にもならない。色・影は一切足していない */
.pan-logo{
  display:flex;align-items:center;
  min-height:44px;
  margin-bottom:10px;
}
.pan-logo > img{
  width:auto;
  max-width:100%;
  flex:0 0 auto;
  object-fit:contain;
  object-position:left center;
}
/* BUCKS は2段組みのロックアップ（672×420）、Road は1段（401×205）。
   同じ「高さ」で揃えると2段の BUCKS だけ文字が小さく見えるので、
   BUCKS 側の**全体倍率**を約1.18上げて光学的に釣り合わせる。
   縦横比は一切変えていない（width:auto の等比拡縮のみ）。
   原寸は 420px / 205px 高なので、どちらも拡大にはならない */
.pan--bucks .pan-logo > img{height:40px}
.pan--road  .pan-logo > img{height:34px}
@media (min-width:560px){
  .pan-logo{min-height:clamp(52px,10vw,84px);margin-bottom:clamp(12px,2.6vw,20px)}
  .pan--bucks .pan-logo > img{height:clamp(46px,9vw,80px)}
  .pan--road  .pan-logo > img{height:clamp(39px,7.6vw,68px)}
}

.pan-name{
  display:block;
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.28;
  letter-spacing:.02em;
  color:#fff;
}
@media (min-width:560px){ .pan-name{font-size:clamp(1.25rem,4.4vw,1.7rem);line-height:1.3;letter-spacing:.04em} }
/* 2026-09-25（CEO指示）: 営業時間の縦位置を2店でそろえる。
   スマホ幅では「Cafe & BAR BUCKS」が2行、「BAR Road」が1行になり、
   Road の .pan-hours だけ1行ぶん（実測 21.75px）上にずれていた。
   .pan-name に .pan-in（縦フレックス）の余りを吸わせる＝店名の箱の下端が
   2枚で同じ位置になり、その下の .pan-hours / .pan-tap も同じ高さにそろう。
   ★ 店名の文字は箱の上に寄ったまま。2枚とも1行のとき（PC幅）は余りが0なので何も変わらない。
   ★ .pan-tap の margin-top:auto は余りが0になるだけで、枠の下端に付いたまま。 */
.pan-name{flex-grow:1}

/* 第9版: 説明文（.pan-desc / .pan-desc--s / .pan-desc--l）を**営業時間**に置き換えた。
   CEO指示「大名のバー〜〜などは書かなくて、料金や営業時間などを記載してもいい」。
   料金をここに置かない理由は lights/index.html のパネルのコメントを参照
   （99文字の打消し表示が隣接必須で、320×568 の1画面判定が壊れるため）。
   実測（320×568）: 説明文2行 → 営業時間1行で .shops の高さが 229.11 → 204.31px。
   最下端 508.96 → 496.56px、1画面判定 0.8961 → **0.8742**（基準0.90以下）。 */
.pan-hours{
  display:block;
  margin-top:6px;
  /* 枠の下端との最低限のすき間 */
  padding-bottom:6px;
  font-size:1rem;
  line-height:1.55;
  letter-spacing:.02em;
  color:var(--muted);
}
/* 「営業時間」のラベルは 720px 以上でだけ出す。狭い画面で出すと2行になり、
   説明文を落として稼いだぶんを食い潰す（＝1画面判定が第8版に戻る）。
   **display で切り替えるので支援技術にも二重には読まれない** */
.pan-hours-l{display:none}
@media (min-width:560px){ .pan-hours{padding-bottom:12px} }
@media (min-width:720px){
  .pan-hours{margin-top:10px;font-size:1.0625rem;line-height:1.8}
  .pan-hours-l{display:inline;color:var(--warm)}
}

/* 第11版: 第9版で足したロゴ右の小さい実店舗写真（.pan-shot）は削除した
   （CEO指示「TOPに写真いらないね」＝ロゴの右に後付けで貼りついて見える）。
   .pan-logo（min-height:44px の flex 行）はロゴ1枚だけになったので、
   このCSSはもう不要。パネルの高さ・.pan-logo の寸法は変えていない */

/* ===== 第18版: 案内文は**枠の中**（CEO指示・実機確認）=====
   「タップで詳細へは枠の中に入れましょうか／文字色変えて動きも加えましょう」。
   第16版でいったん枠の外に出したが、CEOの実機確認で枠の中へ戻した。
   往復の記録は .secretary/projects/homepage-projects.md「別案C 第18版」。
   ★ **リンクではない**（HTML側は <span>）。.pan（＝<a>）の中に置いても
     <a> の入れ子にならないのはこのため。同じ行き先の当たり判定も増えない。
   ★ aria-hidden。行き先は .pan の aria-label が伝えている。
   ★ margin-top:auto で**枠の下端に寄せる**。.pan-in は flex:1 の縦フレックスなので、
     2枚のカードで案内文の縦位置が必ずそろう（.shops は align-items:stretch）。
   ★ 「本文」ではないので 12px のまま。 */
.pan-tap{
  display:flex;align-items:center;gap:5px;
  margin:auto 0 0;
  padding-top:7px;
  font-size:.75rem;font-weight:700;line-height:1.25;letter-spacing:.04em;
}
/* 色: 第16版までの --warm(#ffe2b8) から**店ごとの色の明るい版**へ。
   CEO指示「文字色変えて」。#c4763a / #c8a35c をそのまま置くと暗いパネル地で
   沈むので、色相はそのままに明度だけ上げてある（.pan-rule と同じ2色の系統）。
   実測コントラスト（パネル下端の実描画画素に対して）は報告に記載。 */
.pan--bucks .pan-tap{color:#f0a05a}
.pan--road  .pan-tap{color:#f0c46e}

/* 矢印。**CSSのborderで描いた山形**なので字形（Webフォント／フォールバック）に
   依存しない＝初回表示で幅が変わってレイアウトが動くことがない。
   回転は ::before に、動き（translateX）は .pan-tap-ar 本体に分けてある
   （同じ要素で transform を取り合わせない）。 */
.pan-tap-ar{
  position:relative;display:block;flex:0 0 auto;
  width:9px;height:11px;
}
.pan-tap-ar::before{
  content:"";position:absolute;left:0;top:50%;
  width:6px;height:6px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
/* 動き。**transform と opacity だけ**（filter / box-shadow は使わない）。
   ★ レイアウトは1pxも動かない（矢印の箱は 9×11px 固定で translateX するだけ）。
   ★ 振幅 3px・周期 2600ms・1周期のうち 65% は静止。読むときに邪魔しない大きさ。
   ★ 画面の外では動かさない: lights.js が .shops に .is-live を付け外しする
     （IntersectionObserver。スマホの電池とCPUのため）。
     JSが落ちた場合は .is-live が付かない＝**動かないが矢印は出たまま**。
   ★ prefers-reduced-motion:reduce は
     ファイル末尾の一括 animation:none !important で完全に停止する（実測済み）。 */
@media (prefers-reduced-motion:no-preference){
  .shops.is-live .pan-tap-ar{
    animation:tap-ar 2600ms ease-in-out infinite;
  }
}
@keyframes tap-ar{
  0%,65%,100%{transform:translateX(0);opacity:.72}
  30%        {transform:translateX(3px);opacity:1}
}
@media (min-width:560px){
  .pan-tap{padding-top:10px;font-size:.8125rem;gap:6px}
  .pan-tap-ar{width:10px;height:12px}
}
@media (min-width:820px){
  .pan-tap{padding-top:14px;font-size:.875rem}
}

/* ===== 第16版: 枠の外の帯（SNS／電話）=====
   CEO指示（実機確認）:「ここ（枠）をどこでもタップすればLPに飛ぶようにしてほしい／
   サービスアイコンも枠の外に置きたい」。
   第15版のボタン（.pan-cta / .pan-cta-ar）は**廃止した**。復活させないこと。
   ★ 第18版で案内文（.pan-tap）は枠の中へ移したので、この帯に残るのは
     SNS／電話だけになった。
   ★ この帯は .shops グリッドの**2行目**なので、.pan（カードのリンク）の
     ボックスの外にある。当たり判定が枠と1pxも重ならないのはこの構造による
     （第15版のように擬似要素の上下幅を調整して隙間を作る必要が無くなった）。 */
.pan-ft{
  display:flex;flex-direction:column;align-items:flex-start;
  min-width:0;
}

/* 層3: 押した感触。**hover に依存しない**（スマホには hover が無い）。
   .is-press は lights.js が pointerdown/touchstart で付ける（iOS Safari 対策）*/
@media (hover:hover){
  .pan:hover{border-color:rgba(255,255,255,.30)}
  .pan--bucks:hover{border-color:rgba(196,118,58,.62)}
  .pan--road:hover{border-color:rgba(200,163,92,.62)}
}
.pan:active,
.pan.is-press{transform:translateY(1px)}
.pan--bucks:active,.pan--bucks.is-press{border-color:rgba(196,118,58,.72)}
.pan--road:active, .pan--road.is-press{border-color:rgba(200,163,92,.72)}
.pan:focus-visible{outline:2px solid rgba(255,226,184,.9);outline-offset:2px;border-color:rgba(255,226,184,.7)}

/* ===== 店舗パネルの SNS ／ 電話（第13版・CEO指示。第16版で枠の外へ出した）=====
   詳細は .secretary/projects/homepage-projects.md「別案C 第13版／第16版」。
   壊しやすい3点だけ:
   (1) 高さ: 320×568 の1画面判定は 0.90 が上限。だから見えるチップは 28px 高にして、
       **当たり判定だけ ::before で上下に広げて 44px 以上**にしてある
       （擬似要素はレイアウト高を1pxも増やさない）。高さを増やさないこと。
   (2) 幅: 第16版で .pan-ft（枠の外）へ移したので、カラム幅がそのまま使える。
       320px の実測でカラムは 137.27px あり、44px の箱が3つ（132px）入る。
       **第15版まで必要だった横方向の負のマージンは不要になった。**
       いま残している margin-left:-10px は幅稼ぎではなく**見た目の左端そろえ**
       （チップ 44px の中で 24px のグリフが中央にあるぶん＝(44-24)/2）。
   (3) 色: .sns-ig は Instagram公式グリフ。**形状・比率・色を改変しない**
       （Metaのガイドライン）ので filter も色の重ねも掛けていない。
       .sns--tt は TikTok の**文字**（マークは許諾制なので図形を持たせない）。 */
.pan-sns{
  position:relative;z-index:2;
  display:flex;align-items:center;
  /* ★★ 第19版: 押しミス対策（CEO指示・実機確認「サービスアイコンが近い」）★★
     ■ 物理的な制約（実測）
       320px でカラムは **139.27px**。当たり判定 44px の箱を3つ並べると 132px なので、
       **見えるチップを 44px のままにすると すき間は合計 7.27px＝1つ 3.6px が上限**。
       どう詰めても指1本ぶんの余裕は作れない。
     ■ 解き方: **見えるチップだけ小さくし、当たり判定は ::before で 44px に保つ**。
       第19版は Instagram・電話を 34px にし、TikTok だけ文字が入る 44px で残していた。
       **第20版（2026-09-11）で TikTok もアイコンになったので3つとも 34px** になった。
       34×3 ＝ 102px。**すき間に 37.27px 使える**（第19版は 27.27px）。
     ■ gap の値: 第19版の下限 12px を **16px** に上げた（幅が 10px 浮いたぶんを
       すき間に回す）。320px では 34×3 + 16×2 ＝ **134px**（カラム 139.27px に対し
       残り 5.27px）。それ以上広い画面では vw に比例させて 20px まで開く。
       4.8vw が 16px を超えるのは 333.4px からなので、**320px では必ず下限の 16px**
       に張り付く（＝はみ出さないことが式で保証される）。
     ■ 当たり判定どうしのすき間は 16 − 5 − 5（両隣の ::before の張り出し）＝ **6px**。
       第19版は 7px だった（TikTok だけ --grow:0 だったため）。重ならない。
       実測値は .secretary/projects/homepage-projects.md「別案C 第20版」。
     ■ 縦（.pan-sns の margin-top）は 14px のまま**動かしていない**。320×568 の
       1画面判定は 0.8795 で、0.90 までの余裕が 11.64px しかない。横で解けたので
       ここは使わない（次に触る人へ: ここを増やすと 1画面判定が直接悪化する）。 */
  gap:clamp(16px,4.8vw,20px);
  /* 第18版: 左の -10px を 0 にした。あれは「グリフの左端を案内文にそろえる」ための
     光学調整だったが、案内文が枠の中へ移り、チップに**見える枠**が付いたので、
     いまは**チップの箱の左端をカードの左端にそろえる**方が正しい。
     上: カードとの間。ここを詰めすぎると当たり判定の隙間が無くなる（下の ::before 参照）。 */
  margin:14px 0 0 0;
  padding:0;
  list-style:none;
}
/* ★ 縮ませない。第19版までは、TikTok の文字が想定より広くなると
   **隣の電話アイコンが潰れて当たり判定が 44px を割る**事故があった。
   本番で実測: Webフォント未適用（display=swap の初回表示＝Hiraginoにフォール
   バック）だと「TikTok」が 12px で 43.61px 幅になり、電話の当たり判定が
   44→39px になっていた。ローカルは Zen Kaku が当たって 35.30px だったので
   気づけなかった。
   ★ 第20版で TikTok がアイコン（SVG）になり、**この行から可視の文字が消えた**ので
     この不具合は構造的に起きなくなった。3つとも width 固定の .sns なので、
     どの書体が当たってもチップ幅は1pxも動かない。flex:0 0 auto は据え置く。 */
.pan-sns > li{display:flex;flex:0 0 auto}

/* 第18版: CEO指示「サービスアイコンがボタンだとわかりづらい」。
   **枠（金の細線）＋ごく薄い地色＋角丸**を付けてボタンに見せた。
   ★ box-sizing:border-box なので、枠を足しても 44px の当たり判定も
     28px の見た目の高さも**1pxも変わらない**（＝1画面判定に効かない）。
   ★ 3つ（BUCKS）／2つ（Road）が**同じ寸法**で並ぶ。TikTok だけ中身が文字だが、
     チップの寸法は他と同一（マークは描かない＝許諾制。上のコメント参照）。
   ★ 枠の色は非テキストの 3:1 を満たす濃さにしてある（実測値は報告に記載）。
     カードの枠線 var(--line)（1.38:1）より意図的に濃い。カードは「面」で
     押せることを示し、チップは小さいので「線」で示す必要があるため。 */
.sns{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;
  /* ★ --chip（見えるチップの幅）と --grow（当たり判定を左右へ広げる量）は
     **必ずセットで動かす**。--chip + --grow×2 が 44 を下回った瞬間に
     横の当たり判定が 44px を割る。
     ★ width は**固定**。min-width だけだと中身（TikTokの文字）の幅でチップが伸び、
     隣との間隔が中身まかせになる。文字側を width に合わせる。 */
  --chip:34px;
  /* ★★ --grow は **6** で 44px ちょうど。5 ではない ★★
     絶対配置の left/right は**パディングボックス基準**なので、border:1px のぶん
     ::before の外へのはみ出しは (--grow − 1px) にしかならない。
     34 + (6−1)×2 ＝ **44.00px**（elementFromPoint の実測で確認済み）。
     --grow:5px にすると 42px で **44px を割る**（第19版の実装中に実測で発見）。 */
  --grow:6px;
  width:var(--chip);
  min-width:var(--chip);
  height:28px;             /* 見た目の高さ。縦は ::before で 44px にする */
  padding:0 2px;
  border:1px solid rgba(255,226,184,.46);
  border-radius:999px;
  background:rgba(255,226,184,.055);
  color:var(--warm);
  text-decoration:none;
  transition:color .2s ease, background-color .2s ease, border-color .2s ease;
}
/* ★ 当たり判定を 44px 角へ広げる擬似要素。height:28px ＋ 上6px ＋ 下12px ＝ 46px。
   **レイアウトの高さは増えない。** 隣の .sns とは（実寸の箱が横 44px あるので）
   重ならない。
   ★ 第16版: .pan（カードのリンク）とは .pan-tap（案内文）1行ぶん離れており、
     **構造上まったく重ならない**（.pan-ft はグリッドの別の行＝枠の外）。
     上へ 6px しか広げないのは、案内文のテキスト行に被せないため。
   ★ .pan の overflow:hidden の外に出たので、下へ広げても切られない。 */
.sns::before{
  content:"";position:absolute;
  left:calc(-1 * var(--grow));right:calc(-1 * var(--grow));
  top:-6px;bottom:-12px;
}
.sns-ig{display:block;width:24px;height:24px;flex:0 0 auto}
.sns-ph{display:block;flex:0 0 auto}
/* TikTok の音符マーク（第20版・2026-09-11・CEO判断）。Instagram の公式グリフと
   同じ 24×24 の箱で置く。fill は **currentColor**＝.sns の color:var(--warm) で、
   電話の自作SVG（stroke:currentColor）と同じ色になり、:hover / :active /
   :focus-visible の color 変化にも一緒に追従する。
   ★ 旧 .sns--tt（--chip:44px / --grow:0 / font-family / font-size:.75rem）は削除した。
     中身が文字でなくなったので、チップは .sns の既定（--chip:34px / --grow:6px＝
     当たり判定 44px）を Instagram・電話とそのまま共有する。
     HTML側の sns--tt クラスは「TikTokのチップ」の目印として残してある。
   ★ 法的な経緯（許諾制・CEO判断・TikTok Brand Hub での書面申請）は
     lights/index.html のSNS節のコメントと assets/CREDITS.md にある。 */
.sns-tt{display:block;flex:0 0 auto}

/* 反応は hover に依存しない。スマホには hover が無いので
   :active と :focus-visible でも同じように点く */
.sns:active{color:#ffe2b8;background:rgba(255,226,184,.18);border-color:rgba(255,226,184,.82)}
.sns:focus-visible{outline:2px solid rgba(255,226,184,.9);outline-offset:1px;color:#ffe2b8;border-color:rgba(255,226,184,.82)}
@media (hover:hover){
  .sns:hover{color:#ffe2b8;background:rgba(255,226,184,.16);border-color:rgba(255,226,184,.75)}
}
/* Instagram は公式の多色グリフなので色を変えられない。
   押した／触れたことは**枠と背景の明るさ**だけで返す */
.sns:has(.sns-ig):active,
.sns:has(.sns-ig):focus-visible{background:rgba(255,226,184,.20)}

/* ★ 広い画面ではチップも大きくするが、**width は必ず固定**で3つそろえる。
   第20版で TikTok もアイコンになったので、3つとも中身が 23〜24px のグリフになり、
   チップ側の寸法だけを見ればよくなった（書体の実測値に依存しない）。 */
/* 560px 以上はカラムが 250px 超あるので、3つとも実寸 48px にそろえたうえで
   すき間を素直に広げられる（48×3 ＋ 14×2 ＝ 172px）。--grow は 0（実寸で 44px 以上）*/
@media (min-width:560px){
  .pan-sns{gap:14px;margin:14px 0 0 0}
  .sns{--chip:48px;--grow:0px;height:38px;padding:0 2px}
  .sns::before{top:-4px;bottom:-4px}
}
@media (min-width:820px){
  .pan-sns{gap:18px;margin:16px 0 0 0}
  .sns{--chip:52px;--grow:0px;height:44px}
  .sns::before{content:none}   /* 実寸で 44px あるので擬似要素は不要 */
}

/* ---------- 原資: 上の .pan-sns 1行（実測 +28px）を 320×568 の
     1画面判定に収めるために、パネル内の**純粋な余白だけ**を詰めた。
     文字サイズ・ロゴの寸法・行間は1pxも変えていない。**560px 未満だけ**に効く
     （どの値も min-width:560px 側で上書き済みのため、タブレット以上は無変更）。 */
@media (max-width:559.98px){
  /* 第11版で消えた .pan-shot（写真）のための下限だった。
     いま中に居るロゴの最大高は 40px（BUCKS）なので 4px は誰も使っていない */
  .pan-logo{min-height:40px;margin-bottom:6px}
  .pan-hours{margin-top:2px;padding-bottom:0}
  .pan{padding-bottom:12px}
}

/* ---------- 820px以上：軌道と着地点を大きく取る ---------- */
@media (min-width:820px){
  .shops{column-gap:clamp(28px,4vw,54px)}

  /* 光も左右に大きく分かれ、それぞれのパネルの頭上に落ちる */
  .lz-orb{width:min(94vw,620px);height:min(42vh,330px);opacity:.55}
  .lz-orb--b{transform:translate(-48%,26%) scale(1);animation-name:swirl-bx}
  .lz-orb--r{transform:translate(48%,26%) scale(1);animation-name:swirl-rx}
}
/* ---- 周回の軌道（820px以上）: 着地 (∓48%,26%) ---- */
@keyframes swirl-bx{
  0%{opacity:0.000;transform:translate(9.00%,0.00%) scale(0.200)}
  4.17%{opacity:0.172;transform:translate(5.64%,14.87%) scale(0.200)}
  8.33%{opacity:0.344;transform:translate(-8.88%,14.06%) scale(0.201)}
  12.5%{opacity:0.517;transform:translate(-18.09%,0.80%) scale(0.204)}
  16.67%{opacity:0.620;transform:translate(-13.60%,-12.52%) scale(0.208)}
  20.83%{opacity:0.620;transform:translate(0.80%,-17.25%) scale(0.214)}
  25%{opacity:0.620;transform:translate(15.97%,-12.48%) scale(0.222)}
  29.17%{opacity:0.620;transform:translate(24.91%,-2.18%) scale(0.232)}
  33.33%{opacity:0.620;transform:translate(25.44%,8.93%) scale(0.246)}
  37.5%{opacity:0.620;transform:translate(19.10%,17.72%) scale(0.262)}
  41.67%{opacity:0.620;transform:translate(8.90%,23.05%) scale(0.282)}
  45.83%{opacity:0.620;transform:translate(-2.30%,25.20%) scale(0.305)}
  50%{opacity:0.620;transform:translate(-12.63%,25.06%) scale(0.332)}
  54.17%{opacity:0.620;transform:translate(-21.18%,23.62%) scale(0.362)}
  58.33%{opacity:0.620;transform:translate(-27.75%,21.70%) scale(0.397)}
  62.5%{opacity:0.620;transform:translate(-32.58%,19.85%) scale(0.436)}
  66.67%{opacity:0.620;transform:translate(-36.05%,18.41%) scale(0.479)}
  70.83%{opacity:0.618;transform:translate(-38.56%,17.52%) scale(0.526)}
  75%{opacity:0.608;transform:translate(-40.44%,17.26%) scale(0.579)}
  79.17%{opacity:0.599;transform:translate(-41.96%,17.59%) scale(0.636)}
  83.33%{opacity:0.589;transform:translate(-43.29%,18.47%) scale(0.698)}
  87.5%{opacity:0.579;transform:translate(-44.51%,19.84%) scale(0.765)}
  91.67%{opacity:0.569;transform:translate(-45.69%,21.61%) scale(0.838)}
  95.83%{opacity:0.560;transform:translate(-46.86%,23.69%) scale(0.916)}
  100%{opacity:0.550;transform:translate(-48.00%,26.00%) scale(1.000)}
}
@keyframes swirl-rx{
  0%{opacity:0.000;transform:translate(-9.00%,0.00%) scale(0.200)}
  4.17%{opacity:0.172;transform:translate(-5.64%,14.87%) scale(0.200)}
  8.33%{opacity:0.344;transform:translate(8.88%,14.06%) scale(0.201)}
  12.5%{opacity:0.517;transform:translate(18.09%,0.80%) scale(0.204)}
  16.67%{opacity:0.620;transform:translate(13.60%,-12.52%) scale(0.208)}
  20.83%{opacity:0.620;transform:translate(-0.80%,-17.25%) scale(0.214)}
  25%{opacity:0.620;transform:translate(-15.97%,-12.48%) scale(0.222)}
  29.17%{opacity:0.620;transform:translate(-24.91%,-2.18%) scale(0.232)}
  33.33%{opacity:0.620;transform:translate(-25.44%,8.93%) scale(0.246)}
  37.5%{opacity:0.620;transform:translate(-19.10%,17.72%) scale(0.262)}
  41.67%{opacity:0.620;transform:translate(-8.90%,23.05%) scale(0.282)}
  45.83%{opacity:0.620;transform:translate(2.30%,25.20%) scale(0.305)}
  50%{opacity:0.620;transform:translate(12.63%,25.06%) scale(0.332)}
  54.17%{opacity:0.620;transform:translate(21.18%,23.62%) scale(0.362)}
  58.33%{opacity:0.620;transform:translate(27.75%,21.70%) scale(0.397)}
  62.5%{opacity:0.620;transform:translate(32.58%,19.85%) scale(0.436)}
  66.67%{opacity:0.620;transform:translate(36.05%,18.41%) scale(0.479)}
  70.83%{opacity:0.618;transform:translate(38.56%,17.52%) scale(0.526)}
  75%{opacity:0.608;transform:translate(40.44%,17.26%) scale(0.579)}
  79.17%{opacity:0.599;transform:translate(41.96%,17.59%) scale(0.636)}
  83.33%{opacity:0.589;transform:translate(43.29%,18.47%) scale(0.698)}
  87.5%{opacity:0.579;transform:translate(44.51%,19.84%) scale(0.765)}
  91.67%{opacity:0.569;transform:translate(45.69%,21.61%) scale(0.838)}
  95.83%{opacity:0.560;transform:translate(46.86%,23.69%) scale(0.916)}
  100%{opacity:0.550;transform:translate(48.00%,26.00%) scale(1.000)}
}

@media (min-width:1080px){
  .hero-copy{margin-bottom:clamp(44px,7vh,72px)}
}

/* ===================================================================
   層2: 視差（スクロール連動）
   -------------------------------------------------------------------
   scroll イベントを毎フレーム拾う実装にはしていない。CSS の
   animation-timeline: scroll() に任せ、**非対応ブラウザでは @supports ごと
   丸ごと無視される**（基底＝視差なしの正しい表示。内容は1つも消えない）。
   動かすのは transform だけ、振幅は最大 30px。
   ※ .lights ではなく .lights-par（親）に掛けている。.lights の子は導入の
     周回アニメーションで transform を使っているため。
   =================================================================== */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .lights{
      animation:par-light linear both;
      animation-timeline:scroll(root);
      animation-range:0 100vh;
    }
    .shops{
      animation:par-shops linear both;
      animation-timeline:scroll(root);
      animation-range:0 100vh;
    }
  }
}
@keyframes par-light{from{transform:translateY(0)}to{transform:translateY(30px)}}
@keyframes par-shops{from{transform:translateY(0)}to{transform:translateY(-14px)}}

/* ===================================================================
   下部セクション（事業内容 / 会社概要 / お問い合わせ）
   =================================================================== */
.sec{
  position:relative;
  padding:clamp(56px,9vw,96px) 0;
  background:linear-gradient(180deg,var(--night-deep) 0%,#08161f 100%);
  border-top:1px solid rgba(255,255,255,.07);
}
.sec--biz{background:linear-gradient(180deg,#061219 0%,var(--night-deep) 100%)}

/* 層2: 中央の光の筋が、セクションの頭から下へ伸びてつながる。
   基底＝伸びきった状態なので、JS が無い／IO が無い環境でも欠けない。
   .js-rv が付いたときだけ長さ0から始めて、視界に入ったら伸ばす */
.sec[data-thread]::before{
  content:"";position:absolute;left:50%;top:0;
  width:1px;height:clamp(40px,7vw,72px);
  margin-left:-.5px;
  background:linear-gradient(180deg,rgba(255,226,184,.9) 0%,rgba(255,226,184,0) 100%);
  box-shadow:0 0 12px rgba(255,206,150,.4);
  transform-origin:50% 0;
  transform:scaleY(1);
  pointer-events:none;
}
.js-rv .sec[data-thread]::before{transform:scaleY(0);transition:transform 1s var(--ease-out)}
.js-rv .sec[data-thread].is-in::before{transform:scaleY(1)}

.sec-h{
  margin:0 0 8px;
  font-family:var(--serif);
  font-size:clamp(1.6rem,6vw,2.4rem);
  font-weight:400;letter-spacing:.08em;color:#fff;
}
.sec-h::after{
  content:"";display:block;width:60px;height:1px;background:var(--warm);
  margin:14px 0 0;opacity:.8;
}
.sec-lead{margin:22px 0 30px;max-width:62ch;color:var(--muted);font-size:1.0625rem}

/* ---------- 下層ページの見出し（第3版・./company/ 用） ----------
   トップにヒーローがあるのに対して、下層は静かな見出し帯だけにする。
   夜の地色・書体・金の細罫はトップと共有（新しい色は足していない）。
   **アニメーションは1本も無い**（下層で読ませたいのは内容だけ） */
.page-head{
  position:relative;
  background:linear-gradient(180deg,var(--night) 0%,var(--night-deep) 100%);
  padding:clamp(36px,7vw,64px) 0 clamp(28px,5vw,48px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.page-head h1{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.9rem,7.4vw,2.8rem);
  font-weight:400;letter-spacing:.08em;line-height:1.25;color:#fff;
}
.page-head .eyebrow{margin-bottom:8px}
/* 見出し直下の灯りの細罫。.sec-h::after と同じ全ページ共通のモチーフ */
.page-head h1::after{
  content:"";display:block;width:60px;height:1px;background:var(--warm);
  margin:16px 0 0;opacity:.8;
}
.page-head + .sec{padding-top:clamp(40px,7vw,72px)}

/* ===================================================================
   ---------- 事業内容（第3版・球体） ----------
   CEO指示「事業内容は /works/ally/ と同じようなアニメーションで表示」。
   本番トップ（corp.css 第16〜19版 / reveal.js）の **CSS 3Dの球体＋円周配置** を
   別案Cの夜の配色に移植したもの。文言は1文字も変えていない。

   ■ 構造（本番と同じ）
       .sec--biz(position:relative)
         └ .orb            … perspective を持つ3Dの器（セクションの背景・装飾）
             └ .orb-3d     … transform-style:preserve-3d の中身。JSが rotateX を書く
                 ├ .orb-ring.lat ×5  緯線
                 ├ .orb-ring.mer ×3  経線
                 └ .orb-dot      ×5  交点の光（事業5項目と1対1）
         └ .wrap > .biz > .biz-item(perspective)
                            └ .biz-orbit(preserve-3d)  … 親。円弧の上を動く
                                └ [data-biz]           … 子。親の回転をちょうど打ち消す

   ■ ★★ 移植でいちばん危険な点（8通り総当たりで実測した。推測ではない）★★
     preserve-3d が死ぬ条件を、Chrome 1280px で「[data-biz] の実効 縦倍率÷横倍率」
     （親子の逆回転が完全に相殺されていれば 1.00）と「.orb-dot 5個の実寸が
     すべて異なるか」で測り分けた結果:

       置いた場所                     縦倍率/横倍率   .orb-dot の別々の幅
       ------------------------------ ------------- -------------------
       （何も足さない＝現行）              1.0031        5個
       .biz-orbit{opacity:.99}            0.2391 ★     5個
       .biz-orbit{overflow:hidden}        0.2391 ★     5個
       .biz-item{opacity:.99}             1.0031        5個
       .biz-item{overflow:hidden}         1.0031        5個
       .orb-3d{opacity:.99}               1.0031        4個 ★（球が潰れ始める）
       .orb{overflow:hidden}              1.0031        5個
       .sec--biz{overflow:hidden}         1.0031        5個

     → **効くのは「preserve-3d を持っている要素そのもの」に置いたときだけ**
       （.biz-orbit と .orb-3d）。perspective の器（.biz-item）や祖先（.orb /
       .sec--biz）に置いても3Dは壊れなかった。0.2391 は文字が縦24%に潰れた状態で、
       目で見ても完全に破綻している。
     → なお **getComputedStyle の transform-style は潰れても "preserve-3d" のまま**
       返る（上の表は全ケースで preserve-3d）。**判定には必ず実寸（幾何）を使うこと。**

     ■ 上を踏まえた別案Cでの決着
       ・**.biz-orbit と .orb-3d には opacity / overflow / filter を絶対に置かない。**
       ・[data-rv]（別案Cのスクロール入場）は 3D を壊さないが、**3Dの経路には付けない**。
         理由は3Dではなく二重掛け: 球の駆動が [data-biz] に opacity を直接書くので、
         [data-rv] の opacity と積になって事業項目が二重に薄くなる。
         事業項目の入場は球の駆動（scale + opacity）が兼ねる。
         3Dの外にある兄弟の .sec-lead は data-rv のままでよい。
       ・円弧の横あふれは overflow ではなく `.biz{padding-right}` の余白で受ける
         （.sec--biz の overflow は3Dを壊さなかったが、切ると弧が見切れるので使わない）。

   ■ 配色は別案Cのもの（corp.css の紺・金は持ってきていない）
     緯線・経線 = --muted #b9cad7 ／ 赤道と交点の光 = --warm #ffe2b8。
     どちらも別案Cが既に使っている色で、BUCKS #c4763a / Road #c8a35c とは
     色相が離れている（店の色はヒーローのパネルだけで使う）。
   =================================================================== */
.sec--biz{position:relative}
/* 本文は必ず球より前面。z-index を持たせるだけで overflow は触らない */
.sec--biz > .wrap{position:relative;z-index:1}

.orb{
  /* 直径。**右端がビューポートを超えないこと**が上限を決める（左のはみ出しは
     LTRでは scrollWidth を増やさないが、右のはみ出しは横スクロールになる）。
     3Dの投影と rotateZ/rotateY の傾きで実際に塗られる幅は箱より約16%広い。
     320px 実測: 箱 332.8px / left 30% = 96px → 塗りの右端 289px < 320px */
  --orb:min(104vw,400px);
  --orb-r:calc(var(--orb) * .49);
  --lat-o:.30;--mer-o:.42;          /* lights.js が上書きする */
  /* 減光。**.orb-3d に opacity を掛けてはいけない**（preserve-3d が死ぬ）ので
     線の stroke-opacity / 点の fill-opacity 側に掛ける。
     値は実測で決めた。本文を -webkit-text-fill-color:transparent にして
     「球だけの地」を撮り、**文字が乗っている行だけ**を Range.getClientRects() で
     採って、地の全画素と文字色とのコントラスト比の最小値を出している
     （読んでいる項目＝実効不透明度 0.95 以上のものだけを対象にした）。
     最悪ケースは緯線・経線が重なる箇所と交点の光（.orb-dot）の上。
     **Retina で判定が変わる**（1px罫のアンチエイリアスが減って線が濃く出るため
     dpr1 で測ると甘い）ので dpr3 で決めた。実測（375 / 1280、9スクロール位置）:
       .60 → 3.11 / 3.39 …本文17pxに必要な 4.5:1 に届かない（第3版の初稿はこれで失敗）
       .40 → 4.10 / 4.68 …375 がまだ届かない
       **.34 → 4.90 / 5.40 …採用**
       .28 → 5.87 / 6.27 …余裕はあるが球が見えなくなってくる
     4.5:1 を満たす最大値として .34 を採った */
  --orb-fade:.34;
  position:absolute;z-index:0;pointer-events:none;
  left:30%;top:50%;
  margin:calc(var(--orb) / -2) 0 0 calc(var(--orb) / -2);
  width:var(--orb);height:var(--orb);
  perspective:calc(var(--orb) * 2.2414);
}
.orb-3d{
  position:absolute;inset:0;transform-style:preserve-3d;
  /* JSが動かなかったときの姿＝静止した球（これが基底） */
  transform:rotateZ(-8deg) rotateY(-16deg);
}
.orb-ring{position:absolute;inset:0}
.orb-ring svg{display:block;width:100%;height:100%;overflow:visible}
.orb-ring circle{fill:none;stroke:var(--muted);stroke-width:1;vector-effect:non-scaling-stroke}
.orb-ring.lat{transform:translateY(calc(49% * var(--y))) rotateX(90deg) scale(var(--s))}
.orb-ring.lat circle{stroke-opacity:calc(var(--lat-o) * var(--orb-fade,1))}
.orb-ring.mer{transform:rotateY(calc(var(--m) * 1deg))}
.orb-ring.mer circle{stroke-opacity:calc(var(--mer-o) * var(--orb-fade,1))}
/* 赤道だけ灯りの色。別案Cの共通モチーフ（.sec-h::after / .seam）と同じ --warm */
.orb-ring.eq circle{stroke:var(--warm);stroke-opacity:calc((var(--lat-o) + .22) * var(--orb-fade,1))}
.orb-dot{
  position:absolute;left:calc(50% - 7px);top:calc(50% - 7px);width:14px;height:14px;
  opacity:.30;transform:rotateX(calc(var(--a) * 1deg)) translateZ(var(--orb-r));
}
.orb-dot svg{display:block;width:100%;height:100%}
.orb-dot circle{fill:var(--warm);fill-opacity:var(--orb-fade,1)}

/* --biz-arc = 円弧の横の振れ幅。lights.js がこの値を読んで
   x = --biz-arc * (cosθ - cosθmax)/(1 - cosθmax) を .biz-orbit に掛ける。
   **同じ値ぶんの padding-right をここで静的に確保しておく**（+6px は保険）。
   768px未満は 0 ＝ 横に振らない素直な縦積み（横に振る余地が無いため） */
.biz{list-style:none;margin:0;padding:0;display:grid;gap:0;--biz-arc:0px}
.biz-item{
  position:relative;
  padding:20px 0 20px 22px;
  border-top:1px solid rgba(255,255,255,.10);
  /* 3Dの器。消失点を左端に置き、奥へ退いても文字の左端が動かないようにする */
  perspective:1500px;perspective-origin:0% 50%;
}
.biz-item:focus{outline:none}
.biz-item:focus-visible{outline:3px solid var(--warm);outline-offset:4px}
.biz-item:last-child{border-bottom:1px solid rgba(255,255,255,.10)}
/* 灯りの粒。事業内容の1項目ごとに小さく灯る（装飾）。
   **<li> 側に置いたまま動かさない**＝罫と粒はスクロールで動かず、中身だけが動く */
.biz-item::before{
  content:"";position:absolute;left:0;top:30px;
  width:6px;height:6px;
  background:var(--warm);
  box-shadow:0 0 10px rgba(255,206,150,.75);
}
/* 親：円弧の上を動く。**opacity も overflow も絶対に付けない**（preserve-3d が死ぬ） */
.biz-orbit{display:block;transform:none;transform-origin:left center;transform-style:preserve-3d}
/* 子：親の回転をちょうど打ち消す＝文字は常に画面と正対する。
   基底は等倍・不透明＝JSが落ちても reduced-motion でも5項目すべて読める */
[data-biz]{display:block;opacity:1;transform:none;transform-origin:left center}
.js-orb [data-biz]{will-change:transform,opacity}
.biz-item h3{
  margin:0;
  font-size:1.125rem;line-height:1.5;font-weight:700;letter-spacing:.03em;
  color:#fff;
}
.biz-item p{margin:6px 0 0;font-size:1.0625rem;color:var(--muted)}
@media (min-width:768px){
  /* ここから円弧を効かせる。振れ幅ぶんの余白を右に確保してから振る */
  .biz{--biz-arc:56px;padding-right:calc(var(--biz-arc) + 6px)}
  .biz-item{padding:34px 0 34px 26px}
  /* 灯りの粒は 768px 未満だけ。**ここから上は円弧で本文が最大36px 縦にずれる**
     （ycomp 0.78 で2割ぶん残す本番と同じ挙動）ので、<li> に固定した粒だけが
     取り残されて行がずれて見える。実測して確認したうえで、広い画面では消す。
     罫（border-top）は動かない側なので残す */
  .biz-item::before{display:none}
}
@media (min-width:820px){
  /* 2カラム（見出し｜説明）は <li> ではなく **3Dの葉である [data-biz]** に掛ける。
     <li> をグリッドにすると .biz-orbit がグリッドアイテムになって弧が効かない */
  [data-biz]{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:0 32px;align-items:baseline}
  .biz-item h3{font-size:1.1875rem}
  .biz-item p{margin:0}
}
@media (min-width:1024px){
  .biz{--biz-arc:88px}
}
/* 広い画面では球を大きくして、セクションの背景として敷く */
@media (min-width:768px){
  .orb{--orb:min(96vh,900px);left:24%}
}

/* ---------- 会社概要の表 ---------- */
.tbl{margin:0;border-top:1px solid rgba(255,255,255,.12)}
.tbl .row{
  display:grid;grid-template-columns:1fr;gap:2px;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12);
}
.tbl dt{font-size:1rem;font-weight:700;letter-spacing:.06em;color:var(--warm)}
.tbl dd{margin:0;font-size:1.0625rem;color:var(--text)}
@media (min-width:720px){
  .tbl .row{grid-template-columns:190px 1fr;gap:0 24px;align-items:baseline}
}

.btns{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 26px;
  background:var(--warm);color:#12202e;
  font-size:1rem;font-weight:700;letter-spacing:.04em;
  border:1px solid var(--warm);
  transition:background .2s ease,color .2s ease,transform .18s ease;
}
.btn:hover{background:#fff;border-color:#fff}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--text);border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}

/* 層2: 下部セクションのフェードアップ。**基底は「見える」**ので、
   JSが落ちても lights.js を読まなくても内容は普通に表示される。
   .js-rv が付いたときだけ隠して、視界に入った要素から戻す */
[data-rv]{opacity:1;transform:none}
.js-rv [data-rv]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s var(--ease-out)}
.js-rv [data-rv].is-in{opacity:1;transform:none}

/* ===================================================================
   フッター（第7版で作り直し）
   -------------------------------------------------------------------
   CEO指示「フッターがダサい」。第6版は <p> を4本積んだだけで、
   サイトの語彙（和文＝ゴシック／欧文＝Marcellus・金と細い罫・灯り）が
   1つも使われていなかった。

   ★ 新しい事実は1つも足していない。載っているのは全て既出の確定情報:
       会社名・所在地・電話番号（第6版のまま）
       サイト内ナビ（会社概要 / 店舗一覧 / お問い合わせ）
       2店舗のリンクと営業時間（lights/shops/ に書いてある値と一字一句同じ。
         BUCKS 21:00〜05:00 ／ Road 21:00〜LAST）
   ★ 写真は1枚も使っていない（画像はロゴ2枚だけという方針を維持）。
     欄の見出しは Marcellus の欧文＋金の細い罫だけで作る。
   ★ 料金は載せていない（トップ0件を維持）。
   ★ 新しい keyframes も新しいJSも足していない。灯りは .head-lz / .sec-lz と
     同じ breathe-a / breathe-b を使い回している。
   =================================================================== */
.ft{
  position:relative;
  isolation:isolate;
  overflow:hidden;                 /* 灯りのはみ出しはここで閉じる（body には頼らない） */
  background:linear-gradient(180deg,#061219 0%,var(--night-deep) 62%,#02080d 100%);
  /* 第12版（2026-09-13）── PCのフッターもコンパクトにする（下の第12版の節を読むこと）。
     clamp(40,7vw,64) / 26 → clamp(26,3.2vw,36) / 18 */
  padding:clamp(26px,3.2vw,36px) 0 18px;
  color:var(--muted);
  font-size:1rem;
}
/* 上端の細い罫。白1本ではなく、中央だけ金がにじむ1px（＝サイトの「光の筋」の語彙） */
.ft::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,
    rgba(255,255,255,.07) 0%, rgba(255,226,184,.55) 32%,
    rgba(200,163,92,.45) 62%, rgba(255,255,255,.07) 100%);
  pointer-events:none;
}
/* 層1: フッターの奥でも灯りが呼吸する。**.sec-lz よりさらに薄い**（.14/.11）。
   フッターは文字しか無い面なので、ここを濃くすると小さな文字のコントラストが割れる。
   呼吸のピーク（0%,100%）は opacity:1 ＝ 静止時と同値なので、
   演出のどの瞬間も静止時を下回らない（breathe-a/b の定義どおり） */
.ft-lz{position:absolute;inset:0;z-index:0;pointer-events:none;display:block;overflow:hidden}
.ft-lz::before,.ft-lz::after{content:"";position:absolute;display:block}
.ft-lz::before{
  left:16%;top:-52%;width:min(108vw,700px);height:min(66vh,400px);translate:-50% 0;
  background:radial-gradient(closest-side,
    rgba(255,226,184,.14) 0%, rgba(255,200,132,.06) 44%, transparent 76%);
  animation:breathe-a 9.4s 500ms ease-in-out infinite;
}
.ft-lz::after{
  right:4%;bottom:-46%;width:min(84vw,500px);height:min(56vh,330px);translate:50% 0;
  background:radial-gradient(closest-side,
    rgba(232,196,120,.11) 0%, rgba(196,118,58,.05) 46%, transparent 76%);
  animation:breathe-b 7.8s 1100ms ease-in-out infinite;
}
.ft > .wrap{position:relative;z-index:1}

/* ---------- 3欄のグリッド ----------
   767.98px 以下は1列（下の @media で指定）。**768px から3列**。

   【第12版・2026-09-13 で 900px → 768px に下げた】
   第11版までは 600〜899px が「2列＋社名欄が上段いっぱい」の3段組みで、
   768px の実測フッターが **589.69px** と最も高かった（1280px の 390.38px より高い）。
   3列に倒すと社名欄が横に並ぶぶん1段ぶん消えるので、768px は 589.69 → 下の実測値へ落ちる。
   ★ 600〜767.98px にあった2列の指定（.ft-in{repeat(2,…)} / .ft-brand{grid-column:1/-1}）は
     **第10版の @media (max-width:767.98px) が同じ詳細度で後から1列に上書きしていて
     もともと1pxも効いていなかった**ので、第12版で削除した（死んだCSSを残さない）。 */
.ft-in{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:30px 40px;
}
@media (min-width:768px){
  .ft-in{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.2fr);gap:0 40px}
  .ft-brand{grid-column:auto}
}

/* ---------- 社名（ヘッダーと同じ和欧の作り分け） ----------
   和文「株式会社」＝ Zen Kaku Gothic New／欧文「ALLY」＝ Marcellus。
   Marcellus は欧文専用なので、和文をここで組むと「株式会社」だけ明朝に落ちる。
   フォントは1本も足していない（読み込み済みの2書体だけ）。 */
/* 第12版（2026-09-13）── margin 18→9px。
   ★ white-space:nowrap は「株式会社」と「ALLY」を**絶対に2行に割らせない**ため。
     flex なので既定でも折り返さないが、欄が狭まったときの保険として明示する
     （店舗ページの .ft .nw と同じ考え方）。 */
.ft-name{
  margin:0 0 9px;
  display:flex;align-items:baseline;gap:.3em;flex-wrap:nowrap;white-space:nowrap;
  line-height:1;
}
.ft-ka{
  font-family:var(--sans);
  font-size:1rem;font-weight:500;line-height:1;
  letter-spacing:.26em;color:#d8c2a1;
}
.ft-en{
  font-family:var(--serif);
  font-size:1.625rem;font-weight:400;line-height:1;
  letter-spacing:.20em;color:var(--warm);
}
.ft-addr{margin:0;color:var(--muted);line-height:1.7;font-size:1rem}
/* 電話リンクは指で押す。行の高さ(24px)のままだとタップ領域が 44px を満たさないので
   inline-flex にして min-height を持たせる。
   ★ 768px 以上では下の第12版の節で **::after のオーバーレイに置き換えている**
     （min-height は行ボックスごと 44px に押し広げてフッターを縦に伸ばすため）。
     767.98px 以下は全幅の金枠ボタンなので min-height のままでよい。 */
.ft-tel{margin:9px 0 0}
.ft-tel a{
  display:inline-flex;align-items:baseline;gap:.55em;
  min-height:44px;padding-right:4px;
  color:var(--warm);
  font-family:var(--serif);font-size:1.25rem;letter-spacing:.08em;
}
.ft-tel a:hover{color:#fff}
.ft-tel-l{
  font-family:var(--sans);font-size:1rem;font-weight:500;
  letter-spacing:.22em;color:#d8c2a1;
}

/* ---------- 欄の見出し（Marcellus の欧文＋金の細い罫） ---------- */
/* 第12版（2026-09-13）── 見出しラベル（Site map / Shops）が食う縦幅を畳む。
   **ラベルそのものは消さない**（欄が何の一覧かを伝えている）。
   下余白 10→5px・金の罫の上余白 9→5px で 9px 詰める。文字サイズは 16px のまま。 */
.ft-cap{
  margin:0 0 5px;
  font-family:var(--serif);
  font-size:1rem;font-weight:400;line-height:1.3;
  letter-spacing:.24em;color:#c8a35c;
  text-transform:uppercase;
}
.ft-cap::after{
  content:"";display:block;width:32px;height:1px;
  background:rgba(200,163,92,.6);margin:5px 0 0;
}

/* ---------- 一覧（サイト内ナビ / 2店舗） ---------- */
.ft-list{list-style:none;margin:0;padding:0}
.ft-list a{
  display:flex;align-items:center;
  min-height:44px;
  color:var(--muted);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.ft-list li:last-child a{border-bottom:0}
.ft-list a:hover{color:var(--warm)}
/* 店舗は2行（店名＋営業時間）。行が増えるぶんタップ領域は自然に 44px を超える */
.ft-shops a{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:2px;padding:9px 0;
}
/* 第12版（2026-09-13）── line-height を明示。body の 1.8 を継いでいたため
   1枠が 80.4px あり、**フッターでいちばん高い欄**になっていた（→約63px）。
   文字サイズ（17px / 16px）は変えていない。 */
.ft-shop-n{
  font-family:var(--serif);font-size:1.0625rem;line-height:1.3;letter-spacing:.05em;color:#eef4f9;
}
.ft-shops a:hover .ft-shop-n{color:var(--warm)}
.ft-shop-h{font-size:1rem;line-height:1.3;letter-spacing:.04em;color:var(--muted)}

/* ---------- 最下段（著作権表示とクレジット） ---------- */
.ft-btm{
  position:relative;z-index:1;
  /* 第12版（2026-09-13）── clamp(30,5vw,44)/18 → clamp(14,2vw,18)/11 */
  margin-top:clamp(14px,2vw,18px);
  padding-top:11px;
  border-top:1px solid rgba(255,255,255,.09);
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px 20px;
  line-height:1.6;   /* 第12版: body の 1.8 を継いで 30.4px あった1行を 25.6px に */
}
/* ★ margin は .ft-copy / .ft-credit 側に直接書く。
   `.ft-btm p{margin:0}`（詳細度 0,0,1,1）を先に置くと、後から書いた
   `.ft-credit{margin-left:auto}`（0,0,1,0）が**負けて右寄せが効かない**
   （第7版の1回目の実測で 1280px のクレジットが左に張り付いていた）。 */
.ft-copy{margin:0;font-size:1rem;letter-spacing:.04em;color:var(--muted)}
.ft-credit{margin:0 0 0 auto;font-size:1rem;color:#8fa5b5;letter-spacing:.04em}

/* 住所は <br> ではなく <span class="nw"> で組む。

   【第12版・2026-09-13 で PC も inline に倒した】
   第11版まで既定は display:block（＝PCは必ず3行）で、スマホだけ inline にしていた。
   CEO指示「フッターについてもコンパクトにしてほしい」により、
   **PCでも「意味のまとまり」の単位で流し込む**方式に統一した。
     ・折り返してよいのは **まとまりの区切り（span と span の間の半角スペース）だけ**。
     ・まとまりの内部（〒810-0041 ／ 福岡県福岡市中央区大名1-12-6 ／ NEO大名Iビル 2F）は
       nowrap なので「大名1-」のような醜い分割が起きない。
     ・区切りの空白は **HTMLの実体の半角スペース**（span と span の間）。
       ::before{content:" "} で作ると読み上げとコピペで詰まって
       「〒810-0041福岡県…」になるので、そちらに変えないこと。
   ★ nowrap を使うので 320px の横スクロールが最も壊れやすい。実測で0pxを確認している
     （いちばん長いまとまり「福岡県福岡市中央区大名1-12-6」は約224px、.wrap は 288px）。
   店舗ページ（noir.css の `.ft .nw`）と同じ考え方・同じクラス名にそろえてある。 */
.ft-addr .nw{display:inline;white-space:nowrap}

/* ===================================================================
   第12版（2026-09-13）── **PC（768px以上）のフッターもコンパクトにする**
   -------------------------------------------------------------------
   CEO指示「フッターについてもコンパクトにしてほしい」。
   第10版・第11版はスマホだけを詰めており、PCは「1行も変えていない」状態だった。

   ■ 修正前の実測（このworktreeのローカル・4ページとも同値）
       375px  298.98px ／ 768px  589.69px ／ 1280px  390.38px
     店舗ページ（BUCKS/Road）は 375px 246〜250px・1280px 278〜300px なので、
     **PCで 90〜300px ぶん重い**。

   ■ 情報は1つも消していない。行の使い方を詰めただけ
     会社名・所在地・電話番号・Site map 3本・店舗2枚と営業時間・©・SouWorks
     クレジットは全部そのまま出ている。

   ■ 詰めたもの（上のそれぞれの宣言に第12版と註記してある）
     ① .ft の上下パディング  clamp(40,7vw,64)/26 → clamp(26,3.2vw,36)/18
     ② 3列に倒す境目 900px → 768px（768pxの3段組みを解消。いちばん効く）
     ③ 住所を block 3行 → nowrap の inline（PCで2行ぶん減る）
     ④ .ft-name の下余白 18 → 9px・.ft-addr の行間 1.9 → 1.7
     ⑤ .ft-cap（欄見出し）の下余白と金の罫  10/9 → 5/5
     ⑥ .ft-btm の上余白と内余白  clamp(30,5vw,44)/18 → clamp(14,2vw,18)/11
     ⑦ 電話リンクの 44px 確保を min-height → ::after のオーバーレイに置き換え（下記）

   ■ 触っていないもの
     文字サイズ（住所16px・電話20px・店名17px・© 16px・クレジット16px）。
     **16px未満の文字を新しく1つも作っていない。**
     タップ領域も 44×44px 以上を維持（.ft-list a の min-height:44px はそのまま）。
   =================================================================== */
@media (min-width:768px){
  /* ⑦ min-height:44px は**行ボックスごと 44px に押し広げる**ので、電話1行のために
     フッターが約20px 縦に伸びていた。レイアウト高さを増やさずに当たり判定だけ
     44px を確保する（elementFromPoint は ::after のホストである <a> を返すので、
     実際に反応する範囲も 44px ある）。店舗ページ noir.css 第33版と同じ手。
     ★ 上下に重なるのは住所（非リンクの本文）だけなので誤爆しない。 */
  .ft-tel a{min-height:0;position:relative}
  .ft-tel a::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px;
  }
}

/* ===================================================================
   第10版（2026-09-09）── **スマホのフッターだけ**を圧縮する
   -------------------------------------------------------------------
   CEO指示「スマホで見たフッターが広すぎる。全てを見せなくてもいいのでは？
   PCで見る時はいいです。スマホで見る時がおかしい。スマートにして。」
   実測（375×667・ローカル）: フッター 778px ＝ 1.17画面分。PCは横3欄なので問題なし。
   縦に3欄が積み上がるスマホだけが長い。

   ■ ここは max-width:767.98px でしか効かない。768px 以上（＝PC）は1行も変えていない。
     768 / 1024 / 1280px のフッターは画素単位で第9版と同一（比較で確認済み）。

   ■ スマホで省いたもの と その理由
     ① Site map（会社概要 / 店舗一覧 / お問い合わせ）
        **右上のハンバーガーに、まったく同じ3本が同じ順で入っている**（.nav#gnav）。
        重複なので display:none で省く。
        ★ display:none は支援技術からも消えるが、**同じ3本が到達可能**なことを2通りで確認した:
          ・JSが動く: .js-burger でハンバーガーが出て #gnav に3本
          ・JSが無い: .js-burger が付かないので #gnav は**横並びのまま最初から見えている**
        （lights.css:328 の .js-burger 前提の畳み方がそのまま保険になっている）
     ② 各店の営業時間（21:00〜05:00 / 21:00〜LAST）… 店名だけ残す。
        営業時間は lights/shops/ に一字一句同じものがあり、そこへの導線は
        ハンバーガーの「店舗一覧」。**店舗2枚のリンク自体は削っていない**
        （会社サイトと店舗サイトをつなぐ唯一の常設導線なので、むしろ枠を付けて押しやすくした）
     ③ 住所の3行 → 2行（320pxでは3行）。字は 16px のまま小さくしていない。

   ■ 逆に強くしたもの
     ・電話番号を全幅の金枠ボタンにした（22px）。
       スマホでは tel: を押して発信できることが最大の価値なので、そこだけ大きくする。
     ・店舗2枚を横並びの枠にして、指で押す面を 44px 以上で確保した。

   ■ 残したもの（絶対に消さない）
     © 株式会社ALLY ／ SouWorks クレジット ／ 電話（tel:）／ 会社名・所在地 ／ 店舗2枚のリンク
   =================================================================== */
@media (max-width:767.98px){
  /* 上下の余白を少しだけ詰める（40/26 → 34/20） */
  .ft{padding:34px 0 20px}

  /* 600〜767px の2列も1列に統一する。Site map を消すと2列目が空くため */
  .ft-in{grid-template-columns:minmax(0,1fr);gap:24px 0}
  .ft-brand{grid-column:auto}

  /* ① Site map はハンバーガーと重複するので省く */
  .ft-nav{display:none}

  /* ② 社名・住所を詰める。**font-size は 1rem のまま**（16px未満を作らない） */
  .ft-name{margin-bottom:8px}
  .ft-addr{line-height:1.7}
  /* 【第12版・2026-09-13】住所の inline / nowrap は**PCと共通の既定**になったので
     ここからは外した（上の `.ft-addr .nw` の節を読むこと）。スマホ固有の指定ではない。 */

  /* ③ 電話は全幅の金枠ボタン。指で押す面を高さ50px超で確保する */
  .ft-tel{margin-top:14px}
  .ft-tel a{
    display:flex;justify-content:center;
    width:100%;padding:14px 16px;
    line-height:1.2;
    border:1px solid rgba(200,163,92,.55);
    background:rgba(200,163,92,.08);
    font-size:1.375rem;
  }
  .ft-tel a:active{background:rgba(200,163,92,.16)}

  /* ④ 店舗は「店名だけ」の横2枠に。営業時間は省く */
  .ft-shop-h{display:none}
  .ft-cap{margin-bottom:8px}
  .ft-cap::after{margin-top:7px}
  .ft-shops{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  /* ★ 詳細度の注意: 素の `.ft-shops a` だと `.ft-list li:last-child a`（0,2,2）に
     border-bottom だけ負けて、右の枠の下辺が消える。同じ (0,2,2) にして後ろに置く */
  /* height:100% は 320px 対策。「Cafe & BAR BUCKS」だけ2行に折れると、
     li はグリッドの stretch で揃うのに中の <a> の枠だけ低くなって段差が出る */
  .ft-list.ft-shops li a{
    align-items:center;justify-content:center;text-align:center;
    min-height:52px;height:100%;padding:8px 6px;
    border:1px solid rgba(255,255,255,.16);
  }
  .ft-list.ft-shops li a:active{border-color:rgba(200,163,92,.7)}
  .ft-shop-n{font-size:1rem;line-height:1.35}

  /* ⑤ 最下段 */
  .ft-btm{margin-top:22px;padding-top:14px;gap:4px 14px}
}

/* ===================================================================
   第11版（2026-09-09）── フッターをさらに小さく（スマホ・全体）
   -------------------------------------------------------------------
   CEO指示「もう少し小さくしてもいいかも。フッターを全体的に。」
   （第10版で 813→399px まで縮めたが、まだ大きいと感じるとのこと）
   実測（375×667）: 399.38 → 目標300以下。（320×568）: 468.56 → 目標350以下。

   ■ 「全体的に」の解釈: 高さだけでなく、要素の大きさそのものを一段落とす。
     ★ PCは変えない（CEO「PCで見る時はいいです」）。767.98px以下だけに適用。

   ■ 本文とラベルの区別（16px未満にしてよいのはラベル・注記・クレジットのみ）
     本文として16px以上を維持: 住所（.ft-addr）／電話番号の数字（.ft-tel a）／
       店名（.ft-shop-n）
     ラベル・注記・クレジットとして縮小: 社名ロックアップの和文表記（.ft-ka。
       「株式会社」という接頭語で、本文ではなくブランド表記）／欄見出し（.ft-cap
       「Shops」）／著作権表示（.ft-copy）／SouWorksクレジット（.ft-credit）
     ★ 欧文ロゴ「ALLY」（.ft-en）は文章ではなく社名のロゴ表記なので、
       本文16px規定の対象外として縮小する。

   ■ タップ領域は44×44px以上を維持（縮めたのは文字と余白のみ）
     ・.ft-tel a … min-height を明示して 44px を保証（padding/font を縮めた分）
     ・.ft-list.ft-shops li a … min-height 52→44px（44ちょうどを維持）

   ■ 詰めた箇所
     ・.ft の上下パディング、.ft-in の行間、.ft-name の余白
     ・社名ロックアップ（.ft-ka / .ft-en）
     ・電話ボタンの余白・文字サイズ（数字は16px以上を維持）
     ・.ft-cap（欄見出し）の文字・余白
     ・店舗2枠の高さ・余白
     ・.ft-btm の余白と .ft-copy / .ft-credit の文字サイズ
   =================================================================== */
@media (max-width:767.98px){
  .ft{padding:22px 0 16px}
  .ft-in{gap:16px 0}

  .ft-name{margin-bottom:5px}
  .ft-ka{font-size:.75rem}
  .ft-en{font-size:1.25rem}

  .ft-addr{line-height:1.5}

  .ft-tel{margin-top:10px}
  .ft-tel a{
    min-height:44px;
    padding:8px 16px;
    font-size:1.125rem;
  }

  .ft-cap{
    margin-bottom:6px;
    font-size:.6875rem;
    line-height:1.4;
  }
  .ft-cap::after{margin-top:5px}

  .ft-list.ft-shops li a{min-height:44px;padding:6px 6px}
  .ft-shop-n{line-height:1.25}

  .ft-btm{margin-top:14px;padding-top:10px;gap:4px 12px}
  .ft-copy,.ft-credit{font-size:.75rem}
}

/* ===================================================================
   第12版（2026-09-13）── スマホのフッターを店舗ページの水準まで詰める
   -------------------------------------------------------------------
   CEO指示「フッターについてもコンパクトにしてほしい」。
   第11版までで 375px は 298.98px。店舗ページ（BUCKS 249.52 / Road 246.78）に
   そろえるため、**余白だけ**をもう一段詰める。

   ■ 情報は1つも消していない。文字サイズも第11版から1pxも変えていない
     （住所16px・電話番号18px・店名16px は本文として16px以上を維持）。
   ■ タップ領域も変えていない
     （.ft-tel a と .ft-list.ft-shops li a の min-height:44px はそのまま）。
   ■ 詰めたのは次の6か所の余白だけ
   =================================================================== */
@media (max-width:767.98px){
  .ft{padding:12px 0 8px}       /* 22/16 → 12/8 */
  .ft-in{gap:10px 0}            /* 16 → 10 */
  .ft-name{margin-bottom:3px}   /* 5 → 3 */
  .ft-addr{line-height:1.45}    /* 1.5 → 1.45（font-size は 1rem のまま） */
  .ft-tel{margin-top:8px}       /* 10 → 8 */
  .ft-cap{margin-bottom:4px}    /* 6 → 4 */
  .ft-cap::after{margin-top:4px}/* 5 → 4 */
  .ft-btm{margin-top:8px;padding-top:7px;line-height:1.4}  /* 14/10 → 8/7 */
}

/* ===================================================================
   第4版（2026-09-08）── 下層3ページ（会社概要 / 店舗一覧 / お問い合わせ）にも
   トップと同じ「動きの3層」を通す
   -------------------------------------------------------------------
   CEO指示「全体的にアニメーションを追加して欲しい。あと店舗一覧とお問い合わせ
   ページもデザインを合わせて欲しい」。
   第3版までの下層は .page-head に「アニメーションは1本も無い」と書いてあり、
   実際 [data-rv] のフェードだけだった。ここで層1・層2・層3を下層にも展開する。

     層1 常時の気配 … .head-lz（見出し帯の奥で灯りが呼吸する。8.5s と 6.9s の
                      2灯で、位相は delay 300ms / 900ms でずらす）
     層2 スクロール … [data-rise]（英字見出しの1文字せり上がり）
                      [data-stagger]（表の行・連絡先が上から順に現れる）
                      [data-thread]（光の筋が下へ伸びてセクションをつなぐ・既存）
                      [data-rv]（フェードアップ・既存）
     層3 触った反応 … .btn / .tbl a / .nav a の :active・:focus-visible・.is-press

   ■ 守っていること（第3版までと同じ）
     ・動かすのは transform と opacity だけ。filter / box-shadow は動かさない
     ・scroll イベントで毎フレーム再計算しない（IntersectionObserver ＋ CSS）
     ・**基底の値が常に最終状態**。.js-rv が付いたときだけ隠す。
       JS無効 / IO非対応 / reduce のいずれでも全内容が即座に読める
     ・呼吸のピーク（keyframes の 0%,100%）は opacity:1 ＝ 静止時より明るくならない。
       つまり**演出のピークでもコントラストは静止時を下回らない**
   =================================================================== */

/* ---------- 層1: 見出し帯の奥で灯りが呼吸する ----------
   .page-head に2灯だけ置く。トップのヒーローほど強くしない（下層で読ませたいのは内容）。
   overflow:hidden は .page-head 自身に掛ける。**このページに preserve-3d は無い**
   （球体はトップの #business だけ）ので3Dを潰す心配は無い */
.page-head{overflow:hidden;isolation:isolate}
.page-head > .wrap{position:relative;z-index:1}
.head-lz{position:absolute;inset:0;z-index:0;pointer-events:none;display:block;overflow:hidden}
.head-lz::before,.head-lz::after{content:"";position:absolute;display:block}
.head-lz::before{
  left:22%;top:-34%;width:min(124vw,780px);height:min(84vh,470px);translate:-50% 0;
  background:radial-gradient(closest-side,
    rgba(255,226,184,.42) 0%, rgba(255,200,132,.19) 44%, transparent 78%);
  animation:breathe-a 8.5s 300ms ease-in-out infinite;
}
.head-lz::after{
  right:6%;top:-16%;width:min(92vw,540px);height:min(64vh,350px);translate:50% 0;
  background:radial-gradient(closest-side,
    rgba(232,196,120,.36) 0%, rgba(196,118,58,.15) 46%, transparent 78%);
  animation:breathe-b 6.9s 900ms ease-in-out infinite;
}
/* 層2: 見出し帯の灯りだけ、スクロールでゆっくり沈む。
   トップと同じく animation-timeline に任せる（scroll イベントは使わない）。
   非対応ブラウザでは @supports ごと無視される＝視差なしの正しい表示 */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .head-lz{animation:par-head linear both;animation-timeline:scroll(root);animation-range:0 90vh}
  }
}
@keyframes par-head{from{transform:translateY(0)}to{transform:translateY(26px)}}

/* ---------- 層2: 英字見出しの1文字せり上がり（[data-rise]） ----------
   本番 reveal.js の .rise と同じ考え方。**英字にだけ使う**
   （日本語を1文字ずつ <span> に割ると読み上げと行送りが壊れるため、
     h1 の日本語見出しには使わない）。
   支援技術には role="img" + aria-label で1語として渡す（本番と同じ）。
   基底は transform:none ＝ .js-rv が無ければ最初から読める */
.rise{display:inline-block;vertical-align:bottom}
.rise .mask{display:inline-block;overflow:hidden;vertical-align:bottom}
.rise .char{display:inline-block;transform:none}
.js-rv .rise .char{
  transform:translateY(112%);
  transition:transform .58s var(--ease-out);
  transition-delay:calc(var(--i,0) * 52ms);
}
/* ★ .is-in が付くのは IntersectionObserver が観測している **[data-rise] 要素そのもの**
   （＝ここでは <p class="eyebrow">）であって、内側の .rise ではない。
   `.rise.is-in` と書くと一致せず、文字がマスクの外に隠れたまま**永久に出てこない**
   （実測: charTransform が matrix(1,0,0,1,0,25.08) のまま固定され、
     見出しの英字が消えていた）。セレクタは [data-rise].is-in を起点にする */
.js-rv [data-rise].is-in .char{transform:none}

/* ---------- 層2: 段送り（[data-stagger]） ----------
   表の行・連絡先の項目が上から順に現れる。本番の [data-stagger] と同じ考え方。
   **遅延は「行そのもの」にしか置かない。** 行の中身（価格・注記）に個別の
   opacity / animation / transition-delay を置くことは禁止（景表法。下の注記を参照）。
   基底は opacity:1 / transform:none ＝ .js-rv が無ければ最初から全部見える */
.js-rv [data-stagger] > *{
  opacity:0;transform:translateY(12px);
  transition:opacity .55s ease, transform .55s var(--ease-out);
}
.js-rv [data-stagger].is-in > *{opacity:1;transform:none}
.js-rv [data-stagger].is-in > *:nth-child(1){transition-delay:0ms}
.js-rv [data-stagger].is-in > *:nth-child(2){transition-delay:55ms}
.js-rv [data-stagger].is-in > *:nth-child(3){transition-delay:110ms}
.js-rv [data-stagger].is-in > *:nth-child(4){transition-delay:165ms}
.js-rv [data-stagger].is-in > *:nth-child(5){transition-delay:220ms}
.js-rv [data-stagger].is-in > *:nth-child(6){transition-delay:275ms}
.js-rv [data-stagger].is-in > *:nth-child(7){transition-delay:330ms}
.js-rv [data-stagger].is-in > *:nth-child(n+8){transition-delay:385ms}

/* ★★ 景表法（不当景品類及び不当表示防止法）── 打消し表示は価格と一体で動かす ★★
   店舗一覧には飲み放題の価格と、その条件を打ち消す注記（※で始まる文）がある。
   **価格と注記は同じ .row（＝同じ段送りの単位）に入れてある**ので、
   フェードのどの瞬間でも両者の実効不透明度は**必ず等しい**。
   「価格だけ先に出て注記が後から出る」瞬間は原理的に発生しない。
   ここに例外を作らないために、次を禁止する:
     ・.tbl small / .price-note に opacity・animation・transition-delay を置く
     ・注記だけを別の [data-rv] / [data-stagger] の単位に切り出す
     ・注記を別セクションへ集約する・リンク化する・短縮する
   注記は <small> だが、**打ち消す相手（価格）とまったく同じ 1.0625rem（17px）**にしてある。
   <small> の既定は 0.8em（＝13.6px）で、放置すると価格より小さい打消し表示になる。
   .tbl dd と同値にすることで「価格より小さい字で条件を書いた」形を作らない */
.tbl small,
.price-note{
  display:block;
  margin-top:6px;
  font-size:1.0625rem;
  line-height:1.7;
  color:#d3e0ea;          /* var(--muted) より明るい。夜の地の上で 4.5:1 を確保する */
  letter-spacing:.01em;
}

/* ---------- 層3: 触ったときの反応（hover に依存しない） ----------
   :active / :focus-visible / .is-press（lights.js が pointerdown で付ける）の
   3つを同じ見た目にしてある。hover はあれば嬉しいだけ */
.btn:active,
.btn.is-press{transform:translateY(1px)}
.btn:focus-visible{background:#fff;border-color:#fff}
.btn-ghost:focus-visible{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
/* 表・連絡先の中のリンク。下線の位置で「触れている」ことを返す */
.tbl a{
  color:var(--warm);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .2s ease, text-underline-offset .2s ease;
}
.tbl a:active,
.tbl a:focus-visible{color:#fff;text-underline-offset:5px}
@media (hover:hover){ .tbl a:hover{color:#fff;text-underline-offset:5px} }
/* 電話・SNSは指で押す。行の高さのままだとタップ領域が 44px を満たさない */
.tbl dd > a,
.tbl dd .lk{display:inline-flex;align-items:center;min-height:44px}
/* ★ 第8版: ここは**ヘッダーの .nav a より後ろにある**ので、こちらが勝つ。
   第7版まではこの2行が `transition:color .2s ease` と `:active{color:var(--warm)}` で、
   ヘッダー側に書いた金の罫（background-size）のトランジションと :active の白を
   **黙って打ち消していた**。ヘッダー側と同じ内容にそろえてある。 */
.nav a{transition:color .2s ease,background-size .26s ease}
.nav a:active{color:#fff}

/* ===================================================================
   店舗一覧 / お問い合わせ（第4版で新設）
   -------------------------------------------------------------------
   **新しい型は作っていない。** 会社概要ページ（./company/）とまったく同じ
   .page-head → .sec → .sec-h → .sec-lead → .tbl → .btns の並びを繰り返すだけ。
   足したのは次の2つだけで、どちらもトップで既に使っている表現の延長:
     .split / .shop-visual … 店舗一覧の左右分割（第5版・下のブロック）
     .tag       … 本番の店舗一覧にある「営業中」。文字は本番のまま
   =================================================================== */

/* ===================================================================
   第5版（⑤）── 店舗一覧を「左右分割」に組み替えた
   -------------------------------------------------------------------
   CEO指示「店舗一覧は https://homepages-591.pages.dev/works/ally/shops/
   この配置が好きです」。
   **借りたのは配置だけ。** 本番 corp.css の .split（`grid-template-columns:1.02fr .98fr`／
   768px 未満は1カラム／2店目は `.rev` で `order:2`）と同じ骨格を、別案Cの夜の地色・
   金の細罫・角丸ゼロで組み直した。**白基調にはしていない。**

   ★ 写真は1枚も使っていない。本番の .shop-visual は「写真の代わりのロゴパネル」なので、
     別案Cでも同じ役割のまま **ロゴ＋光** で作った。イメージ素材を持ち込んでいないので
     「※写真はイメージです」は0件のまま（イメージ素材と注記の 1:1 を保つ）。
   ★ 第4版の .shop-mark（ロゴを本文の上に横並びで置くだけの型）は
     .shop-visual に置き換わったので削除した。他に使っている場所は無い。
   ★★ 景表法 ★★ 組み替えで動かしたのは **.tbl より外側だけ**。
     価格と注記が入っている <dl class="tbl" data-stagger> と <div class="row"> の
     入れ子は1文字も触っていない。段送りの単位は今も「行そのもの」なので、
     価格と注記の実効不透明度は常に等しい。
   =================================================================== */
.split{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:768px){
  /* 本番 corp.css:790 と同じ比率・同じ入れ替え方 */
  /* ★ 本番は align-items:center だが、別案Cの .split-body は本番より縦に長い
     （本番の <dl> に対して、こちらは .tbl の行が罫線付きで並ぶ）。center にすると
     ビジュアルが行の真ん中に浮いて左上に大きな空白ができたため **start にしている**。
     借りたのは配置（2カラム・1.02fr .98fr・2店目で左右入れ替え）で、
     揃え方だけこのページの中身に合わせた */
  .split{grid-template-columns:1.02fr .98fr;gap:clamp(32px,4vw,48px);align-items:start}
  .split.rev .split-media{order:2}
}
/* 縦積みのときは DOM 順（ビジュアル → テキスト）のまま。
   order を使うのは 768px 以上だけなので、読み上げ順とタブ順は常に DOM 順と一致する */
.split-body > :first-child{margin-top:0}

/* 店舗のビジュアル。本番と同じ「写真の代わりに置くロゴのパネル」。
   中身は 別案Cの語彙（夜の地 → 金の内枠 → 呼吸する灯り → ロゴ）だけで作ってある。
   ★ overflow:hidden はこのパネル自身に掛かる。このページに preserve-3d は無い
     （球体はトップの #business だけ）ので3Dを潰す心配は無い */
.shop-visual{
  position:relative;display:grid;place-items:center;
  aspect-ratio:16/10;overflow:hidden;
  padding:26px 26px 44px;
  background:
    radial-gradient(130% 110% at 50% 4%,rgba(255,206,150,.13) 0%,transparent 58%),
    linear-gradient(165deg,var(--panel) 0%,#0b1a25 62%,var(--panel-b) 100%);
  border:1px solid rgba(255,255,255,.14);
}
/* 金の内枠。本番 .shop-visual::before と同じモチーフ（色だけ別案Cの金にした） */
.shop-visual::before{
  content:"";position:absolute;inset:12px;
  border:1px solid rgba(255,226,184,.26);pointer-events:none;z-index:1;
}
/* 層1: パネルの奥で灯りが呼吸する。keyframes は .head-lz / .sec-lz と共用（新規追加なし）。
   ロゴの真後ろを避けて上寄りに置き、ロゴのコントラストを落とさない */
.sv-lz{position:absolute;inset:0;z-index:0;pointer-events:none;display:block;overflow:hidden}
.sv-lz::before{
  content:"";position:absolute;display:block;
  left:50%;top:-52%;width:min(120%,460px);height:min(96%,300px);translate:-50% 0;
  background:radial-gradient(closest-side,
    rgba(255,226,184,.24) 0%, rgba(255,200,132,.10) 46%, transparent 78%);
  animation:breathe-a 8.2s 400ms ease-in-out infinite;
}
/* ロゴ。トップの .pan-logo と同じ「高さを揃えて width:auto」。
   672×420 と 401×205 の縦横比・原寸は一切変えていない（原寸より小さいので拡大でもない） */
.shop-visual img{position:relative;z-index:2;width:auto;max-width:100%;object-fit:contain}
.shop-visual--bucks img{height:clamp(64px,17vw,110px)}
.shop-visual--road  img{height:clamp(54px,14.4vw,93px)}
/* パネル下端のキャプション。文字列は本番 shops/index.html の .shop-visual .cap と同じ。
   本番は .78rem(12.5px) だが、**別案Cは16px未満の文字を1つも置かない方針**なので 1rem にした */
.sv-cap{
  position:absolute;left:0;right:0;bottom:15px;z-index:2;text-align:center;
  font-family:var(--serif);font-size:1rem;line-height:1.4;
  letter-spacing:.22em;text-indent:.22em;color:#cbb695;
}
.tag{
  display:inline-flex;align-items:center;
  min-height:28px;padding:0 12px;
  margin:0 0 10px;
  border:1px solid rgba(255,226,184,.55);
  color:var(--warm);
  font-size:1rem;font-weight:700;letter-spacing:.08em;
}
/* 連絡先の説明文（本番 .contact-list .n と同じ役割）。
   価格を含まないので段送りの単位に制約は無いが、行ごと（<div class="row">）で動かす */
.tbl .note{
  display:block;margin-top:2px;
  font-size:1rem;line-height:1.7;color:var(--muted);
}

/* ===================================================================
   第5版（2026-09-08）── トップを会社のメインHPとして作り込む
   -------------------------------------------------------------------
   CEO指示「これをメインのHPにしようと思う。全体的にアニメーションを使用させるのと
   かっこよくして欲しい。デザインは今のままでいいです。」
   **配色・書体・角丸ゼロ・写真ゼロの方針は1つも変えていない。**
   足したのは (a) 下部セクションの層1（灯りが呼吸する）、(b) 数字のタイル。
   ※ (b) の数字のタイルは第9版で削除した（下の第9版ブロックを参照）。
   =================================================================== */

/* ---------- 層1: 下部セクションの奥で灯りが呼吸する（.sec-lz） ----------
   .page-head の .head-lz と**同じ2灯・同じ keyframes**（breathe-a 9s / breathe-b 7.4s、
   位相は delay でずらす）。新しい色も新しい動きも足していない。
   ★ .head-lz は見出しだけの帯に敷くので濃くてよいが、.sec-lz の後ろには**本文がある**。
     アルファを .42/.36 → .20/.17 まで落とし、灯りの芯を本文の外（左上・右下）へ逃がした。
   ★ overflow:hidden は **.sec-lz 自身**に掛ける。#business（球体）を含む .sec に
     overflow を掛けると preserve-3d が無効化されて球が平面に潰れるため、
     親には絶対に書かない。はみ出しはこの1枚が自分で切る（横スクロールも出ない）。
   ★ 呼吸のピーク（0%,100%）は opacity:1 ＝ 静止時と同値。
     **演出のどの瞬間もコントラストは静止時を下回らない**（breathe-a/b の定義を参照）。 */
.sec-lz{position:absolute;inset:0;z-index:0;pointer-events:none;display:block;overflow:hidden}
.sec-lz::before,.sec-lz::after{content:"";position:absolute;display:block}
.sec-lz::before{
  left:14%;top:-44%;width:min(110vw,720px);height:min(70vh,420px);translate:-50% 0;
  background:radial-gradient(closest-side,
    rgba(255,226,184,.20) 0%, rgba(255,200,132,.09) 44%, transparent 76%);
  animation:breathe-a 9s 200ms ease-in-out infinite;
}
.sec-lz::after{
  right:2%;bottom:-38%;width:min(88vw,520px);height:min(58vh,340px);translate:50% 0;
  background:radial-gradient(closest-side,
    rgba(232,196,120,.17) 0%, rgba(196,118,58,.07) 46%, transparent 76%);
  animation:breathe-b 7.4s 800ms ease-in-out infinite;
}
/* 隣り合うセクションで灯りが同じ側に並ばないように、左右を入れ替えた版 */
.sec-lz--r::before{left:auto;right:12%;translate:50% 0}
.sec-lz--r::after{right:auto;left:6%;translate:-50% 0}
/* 本文は必ず灯りの上。.sec--biz > .wrap には既に同じ指定があるが、
   .sec 全体に効かせる（重複しても害は無い） */
.sec > .wrap{position:relative;z-index:1}
/* 光の筋（[data-thread]）も灯りの上に出す。z-index:auto のままだと DOM 順で
   .sec-lz の下に潜って薄く見える */
.sec[data-thread]::before{z-index:1}

/* ===================================================================
   第9版（2026-09-09）── トップの主役を「会社の紹介」から「店舗の紹介」へ
   -------------------------------------------------------------------
   CEO指示:「/works/ally/lights/ は店舗の紹介がメイン。TOP（ヒーロー）は
   とてもいいので変えない。この下から店舗の紹介を入れていく。
   開いて最初は料金とか店内写真とか、店を売り出して欲しい（クライアント要望）」
   → #numbers（数字で見るALLY）は削除したので、そのCSS（.sec--num / .nums /
     .numc*）もここから消した。#business の球体（.orb / .biz）は
     会社概要ページへ移設しただけなのでCSSはそのまま残してある。
   足したのは **店内写真のグリッド（.shots / .shot）だけ**。
   .split / .shop-visual / .tag / .tbl は lights/shops/ の型をそのまま使う。
   =================================================================== */

/* ---------- 店内写真のグリッド（トップの #bucks / #road） ----------
   主写真（4:3）を上に1枚、正方形のサムネイルを下に2枚。
   角丸ゼロ・細い罫線というサイトの語彙のまま。新しい色は足していない。

   ★★ max-width の理由（原寸を超える拡大の禁止）★★
     【第14版までの理由】Road の実店舗写真は原寸が小さかった
     （road-interior-2=638×480 / road-interior-1=447×447 / road-counter=225×225）。
     .split-media は 1280px 幅で約547pxあり、素直に敷くとサムネイルの
     描画幅が (547-10)/2 = 268px となって road-counter（225px）を**拡大**していた。
     【第20版・2026-09-10】Road も 1360×1020 の実店舗写真に差し替わったので、
     この 440px は「原寸を割り込ませないための下限」ではなく
     **レイアウト上の幅**として残している（1360px ≫ 440px なので拡大は起きない）。
     値を広げるときは 2店とも原寸を超えないことを実測してから決めること。
   ★ 2店で写真の扱いを不揃いにしないため、BUCKS 側も同じ枠・同じ枚数にしている
     （原寸は BUCKS の方が大きいが、描画サイズは同じ）。 */
.shots{
  max-width:440px;
  margin-inline:auto;
}

/* ★★ 横スクロールを起こしてよいのは **この要素の中だけ** ★★
   ・html / body に overflow-x:hidden を足していない。body に付けると
     .hd の position:sticky が黙って死ぬ（実際に起きた事故）。
   ・overscroll-behavior-x:contain … 端まで送ったスワイプがページ側に
     伝わって「戻る」ジェスチャや横揺れになるのを止める。
   ・scroll-snap-type:x mandatory … 指を離すと必ず1枚にそろう。
     JSは位置合わせに scrollTo({behavior:'smooth'}) を使うだけで、
     **scroll イベントで毎フレーム計算する作りにしていない**。 */
.shots-track{
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;            /* Firefox */
  -ms-overflow-style:none;
}
.shots-track::-webkit-scrollbar{display:none}   /* Safari / Chrome */
/* キーボードでも送れるように tabindex="0" を付けてある。
   フォーカスが見えないと使えないので、外周のリング（:focus-visible）は
   グローバル指定（--warm の3px）がそのまま乗る。offset を内側にして
   スライドの縁と重ならないようにするだけ */
.shots-track:focus-visible{outline-offset:2px}

/* マウスでドラッグしている間だけスナップを外す。
   mandatory のままだと scrollLeft の代入とスナップが取り合いになる */
.shots-track.is-drag{scroll-snap-type:none;cursor:grabbing}

/* ★★ 1枚 ＝ 枠いっぱい。**枠は 4:3 で固定**（＝高さが写真の読み込みで
   動かないので CLS 0）。写真は枠に合わせて縮むだけで、**拡大はしない** ★★
     枠は 1280px 幅でも 440px、767px以下では 300px。
     第20版（2026-09-10）以降は2店とも原寸 1360px 級なので、
     どの写真も枠まで縮んで**余白なしで収まる**（4:3 の枠と原寸の比率が同じ）。
     原寸の小さい写真を戻した場合は縮まずに中央へ置かれ左右に余白が出る
     （object-fit:contain は拡大してしまうので使わない。
     max-width/max-height ＋ width/height:auto で「縮むだけ」にしている）。 */
.shots-slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:4/3;
  border:1px solid rgba(255,255,255,.14);
  background:var(--panel-b);
}
.shot{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  -webkit-user-drag:none;
  user-select:none;
}

/* ---------- 現在地のドット ----------
   ・中身は lights.js が入れる。**高さはここで先に確保**してあるので、
     ドットが後から入ってもレイアウトは動かない（CLS 0）。
   ・当たり判定は 44×44px（見える丸は8pxだが、ボタン自体が44×44）。
   ・止まっている色 rgba(255,255,255,.42) は背景 #0b1a26 に対して 4.0:1、
     現在地の var(--warm) は 14:1 で、どちらも非テキストの 3:1 を満たす。 */
.shots-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:44px;
}
.shots-dot{
  -webkit-appearance:none;appearance:none;
  width:44px;height:44px;
  padding:0;margin:0;border:0;background:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:inherit;
}
.shots-dot::before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.42);
  transition:background .3s var(--ease-out),transform .3s var(--ease-out);
}
.shots-dot[aria-current="true"]::before{
  background:var(--warm);
  transform:scale(1.4);
}

/* ★★ 景表法 ── 打消し表示を価格より弱く見せない ★★
   .tbl small の既定色は #d3e0ea で、価格（.tbl dd ＝ #eef4f9）より暗い。
   実描画のコントラストが 価格 > 注記 になってしまうため、**トップの店舗紹介では
   注記を価格と同じ色にする**（font-size は既に 1.0625rem で価格と同寸）。
   ★ lights/shops/ 側は今回の依頼の対象外なので触っていない（同じ課題が残っている。
     次に触るときに .tbl small ごと #eef4f9 へ上げるのが筋） */
.sec--shop .tbl small{color:var(--text)}

/* ===================================================================
   第12版（2026-09-09）── #bucks / #road をスマホで読めるようにする
   -------------------------------------------------------------------
   CEO指示「スマホでのこの画面は見づらいですね。文字も多いです」。
   触ったのは #bucks / #road（.sec--shop）の中だけ。ヒーロー・ヘッダー・
   フッター・他セクション・下層ページには1行も効かない。

   (1) リード文を1行に圧縮した（HTML側）。上下の余白もこの2セクションだけ詰める。
   (2) 料金を .plan（曜日 → 男女 → 金額）に組み替えた。↓の景表法の注を読むこと。
   (3) 写真は 767px 以下でだけ幅と間隔を詰めた（デスクトップは第9版のまま）。

   ★★ 景表法（不当景品類及び不当表示防止法 5条2号）★★
     ・第9版までは「時間無制限 3,300円」を大きく出し、その後ろの99文字の注記で
       打ち消していた。**第12版はこの「先に有利な表示 → 後から打消し」という
       構造自体をやめ**、曜日区分を先に出して条件と金額を同じ行に置いた。
     ・**それでも打消し表示（<small> 99文字）は一字一句そのまま残している。**
       構造を変えても打消し表示の義務は消えないため。短縮・要約・削除・
       別セクションへの集約・リンク化はしていない。
     ・.plan の中の要素（.plan-c / .plan-d / .plan-r / .plan-w / .plan-v）と
       .tbl small に **opacity / animation / transition-delay を1つも置いていない。**
       段送り（[data-stagger]）の遅延は <dl class="tbl"> の直下の子（＝.row）に
       しか当たらず、料金も注記も同じ .row の中にあるので、フェードのどの瞬間でも
       両者の実効不透明度は必ず等しい。「料金だけ先に出る」瞬間は原理的に無い。
     ・注記は 0.9375rem（15px）で料金（1.0625rem＝17px）より小さいが、
       **色は料金とまったく同じ var(--text)** なので実描画のコントラストは同値。
       表を視覚的な主役にするための差であって、読めなくする差ではない。
     ・.plan は <table> ではなく <ul> で組んでいる（本採用 bucks/menu/ の .plan-card
       と同じ考え方）。320px でも横スクロールしない。 */

/* リード文まわり。値そのものは .sec-lead（22px/30px）から詰めただけ */
.sec--shop .sec-lead{margin:14px 0 20px}
/* 表の行間。他ページの .tbl（16px）はそのまま */
.sec--shop .tbl .row{padding:13px 0}
.sec--shop .btns{margin-top:24px}

/* ---------- 料金（飲み放題）---------- */
.plan{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.plan-c{
  padding:11px 13px 12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
}
/* 曜日区分。**条件がいちばん先に目に入る**位置に置くための見出し */
.plan-d{
  margin:0 0 7px;
  font-size:1rem;font-weight:700;letter-spacing:.06em;line-height:1.4;
  color:var(--warm);
}
.plan-r{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;
  margin:0;line-height:1.55;
  font-size:1.0625rem;color:var(--text);
}
.plan-r + .plan-r{
  margin-top:6px;padding-top:6px;
  border-top:1px solid rgba(255,255,255,.10);
}
.plan-w{flex:0 0 auto;min-width:2.6em;color:var(--muted)}
.plan-v{flex:1 1 auto}

/* 打消し表示。料金より小さいが14px以上・色は料金と同じ（上の景表法の注を参照） */
.sec--shop .tbl small{font-size:.9375rem;line-height:1.65;margin-top:10px}

/* ---------- 写真（767px以下だけ詰める）----------
   第9版は 375px 幅で 主写真 335×251 ＋ サムネイル 162×162 が縦に積まれ、
   写真だけで 423px あった。幅を 300px に抑え、サムネイルを 4:3 にして
   間隔を 10px → 8px にすると 225 + 8 + 110 = 343px になる。
   ★ 拡大の禁止は 767px 以下でも守れている（サムネイル描画幅 146px ＜
     いちばん小さい原寸 road-counter 225px）。 */
@media (max-width:767px){
  /* 第14版: 横スライドなので「主写真＋サムネイル2枚」の積み上げは無くなった。
     枠は 300px 四方（4:3 なので 300×225）＋ドット44px ＝ 269px。
     第12版の 343px より縦に短い。拡大の禁止もここで守れている
     （枠300px ＜ 原寸 1360px。第20版以降は2店とも 1360px 級）。 */
  .shots{max-width:300px}
  /* ★ .split は lights/shops/ でも使っている共有クラスなので、
     必ず .sec--shop（＝トップの #bucks / #road）に限定して詰める */
  .sec--shop .split{gap:16px}
}

/* ===================================================================
   prefers-reduced-motion: reduce
   すべての animation / transition を止める。基底＝最終状態なので、
   **内容は1つも欠けず、動きだけが無くなる**（即座に完成形が出る）。
   社名は最初から見えている（フェードを待たされない）。
   層1（呼吸）・層2（視差・光の筋）・層3（押した反応）も全部止まる。
   =================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  .hero-txt{opacity:1 !important}
  .js-rv [data-rv]{opacity:1 !important;transform:none !important}
  /* 第20版: 看板の点灯。lights.js は reduce のとき .js-sign を付けないので
     ここは二重の保険。**光を待たずに店名・営業時間・案内文が最初から全部読める** */
  .js-sign .pan-in > *{opacity:1 !important;filter:none !important}
  .js-rv .sec[data-thread]::before{transform:scaleY(1) !important}
  /* 球体（第3版）。lights.js は reduce のとき .js-orb を付けず
     インラインstyleを一切書かないので、ここは二重の保険。
     **球は回らないが消えない／事業5項目は等倍・不透明で全部読める** */
  .orb-3d{transform:rotateZ(-8deg) rotateY(-16deg) !important}
  .orb-dot{opacity:.30 !important}
  .biz-orbit{transform:none !important}
  [data-biz],.js-orb [data-biz]{opacity:1 !important;transform:none !important}
  /* 第4版で足した下層の演出。lights.js は reduce のとき .js-rv を付けないので
     ここは二重の保険。**段送りも1文字せり上がりも、隠れたまま止まらない** */
  .js-rv [data-stagger] > *{opacity:1 !important;transform:none !important}
  .js-rv .rise .char{transform:none !important}
  /* 第9版: 数字のカウントアップ（[data-count]）は #numbers ごと削除した。
     第14版: 店内写真は横スライドになった（.shots-track）。
     **reduce のときは自動送りを完全に止める**（lights.js の shotsSlider が
     matchMedia('(prefers-reduced-motion: reduce)') を見てタイマーを1本も
     張らない）。手で送る操作（スワイプ・ドット・左右キー）は残る。
     上の * 一括指定で scroll-behavior:auto / transition:none も効くので、
     ドットの色替えも滑らかな慣性も無くなり、**瞬時に切り替わる**。
     ★ scroll-snap-type は**あえて残す**。スナップは動きではなく位置合わせで、
       scroll-behavior:auto と組めば「瞬時に1枚へそろう」挙動になる。
       外すと手で送ったとき写真が半端な位置で止まり、かえって読みにくい。 */
}

/* ===================================================================
   第19版: SNS／電話の確認ダイアログ（CEO指示・実機確認）
   -------------------------------------------------------------------
   「サービスアイコンが近いので押しミスが発生しそう。確認用のポップアップを
    表示しましょう。これはサービスアイコンだけです。」
   ★ 壊しやすい5点:
   (1) **既定は hidden。** `.cfm{display:flex}` は作者スタイルなので UA の
       `[hidden]{display:none}` を打ち消してしまう。**`.cfm[hidden]{display:none}` を
       必ず併記すること**（消すとJS無効の環境でダイアログが出っぱなしになる）。
   (2) **position:fixed。** レイアウトを1pxも動かさない＝CLS に効かない。
       ここを static/absolute にしないこと。
   (3) **背面ロックは `<html>`（.cfm-open）だけ。** body に overflow を付けると
       body が本物のスクロールコンテナになり `.hd` の position:sticky が死ぬ
       （実測の経緯は上の .nav-open のコメント参照）。
   (4) 動きは `@media (prefers-reduced-motion:no-preference)` の中だけ。
       基底が**最終状態＝見えている**ので、reduce でも
       （ファイル末尾の `*{animation:none !important}` でも）**ダイアログは必ず出る**。
       確認は演出ではなく**機能**なので、reduce で消してはいけない。
   (5) 本文は 16px 以上（.cfm-d＝17px）。ここはアイコンのラベルではなく**本文**。
   =================================================================== */
.cfm{
  position:fixed;inset:0;z-index:200;   /* .hd の z-index:20 より前面 */
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.cfm[hidden]{display:none}              /* ★(1) 消さないこと */
.cfm-bd{position:absolute;inset:0;background:rgba(4,13,20,.80)}
.cfm-box{
  position:relative;
  width:min(100%,380px);
  max-height:calc(100% - 8px);
  overflow:auto;
  padding:22px 20px 18px;
  text-align:left;
  background:linear-gradient(180deg,#12242f 0%,#0a1721 100%);
  /* ★ 枠は .46 ではなく **.60**。.46 だと暗幕（rgba(4,13,20,.80)）越しの
     ヒーローの明るい部分に対して 2.66:1 で、非テキストの 3:1 を割る（実測）。
     .60 で 4.23:1（暗幕側）／3.9:1（ダイアログの地側）になる。薄くしないこと。 */
  border:1px solid rgba(255,226,184,.60);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.cfm-t{margin:0 0 8px;font-size:1.125rem;font-weight:700;line-height:1.5;color:var(--warm)}
/* ★ 本文。16px 未満にしないこと */
.cfm-d{margin:0 0 18px;font-size:1.0625rem;line-height:1.7;color:var(--text)}
.cfm-ac{display:flex;flex-direction:column;gap:10px}
.cfm-b{
  display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;
  width:100%;min-height:48px;padding:0 18px;
  font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:.02em;line-height:1.4;
  border:1px solid transparent;
  -webkit-appearance:none;appearance:none;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.cfm-b--go{background:var(--warm);color:#0b1a26;border-color:var(--warm)}
.cfm-b--no{background:transparent;color:var(--text);border-color:rgba(255,226,184,.62)}
.cfm-b--go:active{background:#ffd79c;border-color:#ffd79c}
.cfm-b--no:active{background:rgba(255,226,184,.14);border-color:rgba(255,226,184,.85)}
@media (hover:hover){
  .cfm-b--go:hover{background:#ffd79c;border-color:#ffd79c}
  .cfm-b--no:hover{background:rgba(255,226,184,.12);border-color:rgba(255,226,184,.85)}
}
/* ★(3) 背面スクロールのロックは <html> だけ。body には付けない */
.cfm-open{overflow:hidden}
/* ★(4) 動きは no-preference のときだけ。基底は「見えている」状態 */
@media (prefers-reduced-motion:no-preference){
  .cfm-bd{animation:cfm-fade 170ms ease both}
  .cfm-box{animation:cfm-rise 210ms var(--ease-out) both}
}
@keyframes cfm-fade{from{opacity:0}to{opacity:1}}
@keyframes cfm-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ===================================================================
   第22版（2026-09-11・CEO指示②）── 会社概要ページのリード文の幅
   -------------------------------------------------------------------
   CEO指示「/lights/company/ のリード文が画面の半分で折り返している。
   すぐ下の会社情報の表は画面いっぱいなので、下の表と同じ幅にそろえて」。

   ■ 実測（修正前・1280px）
       .sec-lead   531px（.sec-lead{max-width:62ch} が効いていた）
       .tbl        1120px（= .wrap の幅）
       → 47.4%。右側に589pxの空白ができていた。
   ■ 採った値: **max-width を外す（none）= .wrap と同じ 1120px。**
       62ch → 72ch のような中間値も試したが（616px）、右にまだ504pxの
       空きが残って「表とそろっていない」状態が変わらない。
       CEOの指示は「下の表と同じ幅」なので、表と1pxも違わない none にした。
       修正後の実測: リード文 1120px（表と同値）・2行。
   ■ 波及範囲を **この会社概要ページだけ** に閉じてある。
       #company / #business の2つの id は works/ally/lights/ 配下では
       lights/company/index.html にしか無い（実測で確認）。
       トップ（.sec--shop の店舗紹介）・店舗一覧・お問い合わせの .sec-lead は
       62ch のまま＝**見え方は1pxも変わっていない**。
       .sec-lead の基底（lights.css:1303）は触っていない。
   ■ 767px 以下では .wrap 自体が画面幅なので、この指定があってもなくても
       描画幅は同じ（実測で確認済み）。
   =================================================================== */
#company .sec-lead,
#business .sec-lead{max-width:none}

/* ===================================================================
   第24版（2026-09-12・CEO指示）── 店舗一覧の地図を1枚に統合（.shops-map）
   -------------------------------------------------------------------
   CEO指示「マップは2店舗まとめて表示したいです」。
   第23版の **店舗カードごとに1枚（計2枚）** をやめ、2店のカードの後ろに
   共通の地図を1枚だけ置く型にした（HTML側 #shops-map）。
   .shop-map は第23版の2枚専用クラスで、他から参照されていないことを
   確認したうえで削除した（grep: works/ally 配下の .html / .css で 0 件）。

   ■ 方式の選定理由は HTML 側の #shops-map のコメントに書いてある
     （検索モード＝ピン1本／中点モード＝ピン1本／経路モード＝2ピン＋店名ラベル）。

   ■ 高さ … aspect-ratio をやめて **breakpoint ごとの固定 px** にした
     旧 .shop-map は aspect-ratio（16/9・560px未満は 4/3）で高さを作っていた。
     経路モードでは使えないことが実測で分かったので、固定 px に変えている。

     ① なぜ比率ではだめか ── 経路パネルは「枠の高さ」だけで2状態に切り替わる
       375px で 4/3・3/2・16/9・2/1 を実描画して比べた結果:
         ・枠 ≤ 約215px … パネルが「拡大地図を表示」の小さなチップに畳まれる。
           地図の面がほぼ丸ごと残り、**BUCKS / Road 両方の店名ラベルと
           赤いピンが出る**（実測: 16/9＝枠200px・2/1＝枠178px。どちらも可）。
         ・枠 約225〜265px … パネルが開いたまま**2店のピンに重なる**。
           3/2（枠237px）と高さ225px固定では Road の赤いピンがパネルの裏に隠れた。
           **この帯が一番読みにくい。ここには入れないこと。**
         ・枠 ≥ 約270px … ピンがパネルの下端より下に来てまた両方見える
           （実測: 4/3＝枠266px でぎりぎり）。
       しきい値が「px」なのに比率は幅で伸び縮みするので、1つの比率では
       全幅をどちらかの安全帯に収められない（例: 16/9 は 375px では枠200px＝安全だが、
       430px では枠224px＝危険帯に入る）。だから固定 px にした。

     ② ★ aspect-ratio に min-height / max-height を足して押さえるのは **不可**
       Chrome は「比率 × 確定した高さ」から**幅のほうを逆算する**。実測:
         ・560px 幅で aspect-ratio:21/9 ＋ min-height:300px
           → 枠が 528px ではなく **700px** になり、documentElement.scrollWidth が
             716px（clientWidth 560）＝ **横スクロール 156px** が出た。
         ・430px 幅で aspect-ratio:16/9 ＋ max-height:212px
           → 枠幅が .wrap の 398px ではなく **377px** に縮み、本文の列から内側にずれた。
       どちらも見た目には静かに壊れる。**この2つを併記しないこと。**

     ③ 採った値（すべて危険帯 225〜265px の外）
         ・  〜559.98px … 200px（チップ側。320px 幅で 300×200、559px 幅で 527×200）
         ・560〜767.98px … 300px（開いたパネル側。270px の壁の上）
         ・768〜1023.98px … 380px
         ・1024px〜       … 480px（.wrap の上限 1120px で 1120×480 ＝ 約2.33:1）
       旧2枚は .split-body（≥768px では段組みの片側）の中で 16/9 だったので
       実効の枠は横長寄りだった。1枚に統合して全幅になったぶん、
       **同じ 16/9 だと 1280px で枠が 630px** になり地図だけで1画面を食う。
       480px はその 630px より低く、かつ 270px の壁より十分高い値。
     ★ 固定 px なので枠の高さは iframe の読み込み前に確定する（読み込みで行は動かない）。

   ■ 夜の地色への馴染ませ方 … filter は使わない（第23版から据え置き）
     地図に filter を掛けて暗くするのは Google マップ/Earth の追加規約
     （Content is not modified の項）に触れうるため **一切掛けていない**。
     経路パネルをオーバーレイで隠すのも同じ理由で **やらない**。
     代わりに (1) 外周の細い罫（--line）、(2) .shop-visual::before と同じ
     金の内枠、(3) 10px の暗い余白 の3つで縁取り、白い面が地色に直接
     ぶつからないようにしている。地図そのものの見え方は素のまま。
   =================================================================== */
.shops-map{
  position:relative;margin:26px 0 0;
  height:480px;
  background:linear-gradient(165deg,var(--panel) 0%,var(--panel-b) 100%);
  border:1px solid var(--line);
}
/* 金の内枠。.shop-visual::before と同じモチーフ・同じ色。
   pointer-events:none なので地図の操作は妨げない */
.shops-map::before{
  content:"";position:absolute;inset:5px;
  border:1px solid rgba(255,226,184,.26);pointer-events:none;z-index:1;
}
/* iframe は幅を持つ要素なので max-width:100% を必ず当てる（横スクロール対策）。
   絶対配置にして高さを親の aspect-ratio から確定させている */
.shops-map iframe{
  position:absolute;inset:10px;
  width:calc(100% - 20px);max-width:100%;height:calc(100% - 20px);
  border:0;display:block;background:var(--panel-b);
}
@media (max-width:1023.98px){.shops-map{height:380px}}
@media (max-width:767.98px){ .shops-map{height:300px}}
@media (max-width:559.98px){ .shops-map{height:200px}}

/* ---------- 所在地の行の「マップで見る」（2026-09-12・CEO指示） ----------
   .tbl dd > a（min-height:44px / inline-flex）に乗る。ここでは
   文字とマークの間隔と、下線の掛かり先だけを決めている。
   ★ 下線は文字（.map-lk-t）にだけ掛ける。a に掛けると SVG のマークまで
     下線が突き抜ける。下線の動き方は .tbl a と同じ（触れると 3px→5px）。
   ★ マークは装飾（aria-hidden）。リンク名は「マップで見る」と aria-label が担う */
.map-lk{gap:7px;text-decoration:none}
.map-lk-i{flex:none;opacity:.8}
.map-lk-t{
  text-decoration:underline;text-underline-offset:3px;
  transition:text-underline-offset .2s ease;
}
.map-lk:active .map-lk-t,
.map-lk:focus-visible .map-lk-t{text-underline-offset:5px}
@media (hover:hover){ .map-lk:hover .map-lk-t{text-underline-offset:5px} }

/* ===================================================================
   CEO指示（2026-09-13）── ロゴ枠を写真スライドに取り込み、1本の自動スライドにする
   -------------------------------------------------------------------
   CEO指示「（ロゴ枠を指して）ここに写真も加えて　自動スライドにしてほしい」。

   ■ 2026-09-11 の設計判断が**覆った**
     前回は「.shop-visual（ロゴのパネル）は1店目・2店目を見分ける唯一の目印だから
     常時表示のまま残す」と判断し、`.shop-visual + .shots` で**上下2段**に置いていた
     （.shop-visual 16:10 ＋ .shots 4:3 ＋ ドット）。
     今回のCEO指示でロゴのパネルは**スライドの1枚目**になり、枠は1本になった。
     旧ルール `.split-media .shop-visual + .shots{max-width:none;margin-top:12px}` は
     隣接セレクタが成立しなくなったので**削除した**（.shops--panel に置き換え）。
     ★ 旧注記の「ロゴは常時見えているから目印になる」は**実態と食い違う**。書き戻さないこと。

   ■ ★★ 縦横比は 4:3（写真側）に統一した ★★
     【何が食い違っていたか】ロゴのパネルは aspect-ratio:16/10（1.60）、
     写真の枠 .shots-slide は aspect-ratio:4/3（1.33）。1本のスライドにすると
     1枚目だけ背が低くなり、送るたびに枠の高さが変わる（＝レイアウトが動く）。

     【採った方: 4:3 に統一】.shots-slide{aspect-ratio:4/3} を全スライドで共有し、
     ロゴのパネル側を `aspect-ratio:auto` + `align-self:stretch` で枠に合わせて伸ばす。
       ・写真は**1枚も切れない**。原寸 1360×1020（＝4:3）が枠とぴったり同じ比率なので、
         上下左右に余白も出ない（375px / 1280px の実描画で確認）。
       ・伸びるのはロゴのパネルだけ。1280px で 547×342 → 547×410（+68px）、
         375px で 355×222 → 355×266（+44px）。ロゴ画像そのものは
         height:clamp(64px,17vw,110px) のままなので**拡大していない**。
         余った高さは地色と金の内枠に回るだけで、パネルは間延びして見えない。
       ・枠が1本になったぶん .split-media 全体はむしろ**縮む**
         （1280px: 808px → 454px、375px: 544px → 310px）。

     【採らなかった方: 16:10（ロゴ側）に統一】375px / 1280px で実際に描いて捨てた。
       ・.shot は「縮むだけ（max-width/max-height）」なので、4:3 の写真を 16:10 の枠に
         入れると**左右に暗い帯**が出る（1280px で片側 45px ずつ、写真の幅が枠の 83%）。
         枠の中で写真が浮いて、上下2段だった頃より安っぽく見えた。
       ・帯を消すには object-fit:cover が要るが、それだと写真の**上下が 16.7% 切られる**。
         店内写真は天井の照明と床（＝店の広さが伝わる情報）が上下の端にあり、
         レンガの壁・ソファの脚が落ちる。ALLY支給の写真を切る判断は取らない。
       ・得られるのは「カードが 68px 低くなる」だけで、上の損失に見合わない。

   ■ 変えていないこと
     ・JS は lights.js の shotsSlider をそのまま共有（このページ用のスクリプトは無い）。
       枚数は `.shots-slide` を数えているので 3→4 でも何も直さなくていい。
     ・外部ライブラリなし（CSS scroll-snap ＋ scrollTo({behavior:'smooth'}) だけ）。
     ・html / body に overflow-x:hidden は足していない（.hd の position:sticky が死ぬ）。
     ・枠の高さは aspect-ratio で先に確定するので、写真が遅れて届いても行は動かない（CLS 0）。
     ・トップ（lights/index.html）の .shots は .shots--panel を持たないので 1px も変わらない。
   =================================================================== */

/* パネルを取り込んだスライド。枠は .split-media の幅いっぱい
   （440px / 300px の既定に戻すと、隣の見出しに対して枠だけ細くなる）。
   .shots{max-width:300px} の @media より後ろに置くこと */
.shots--panel{max-width:none}

/* 1枚目（ロゴのパネル）。.shots-slide の 4:3 の枠を丸ごと使う。
   ★ border は .shots-slide が既に1本描いているので、パネル側は border:0。
     残すと同じ色の罫が2重になる（実描画で確認した） */
.shots--panel .shots-slide--panel{padding:0}
.shots--panel .shop-visual{
  flex:1 1 100%;
  align-self:stretch;      /* .shots-slide の align-items:center を打ち消して縦いっぱいに */
  min-width:0;
  aspect-ratio:auto;       /* 高さは枠（4:3）が決める。16/10 はここで捨てている */
  border:0;
}

/* ==========================================================================
   店内喫煙のご案内（.smk-band / .smk-row）── 事実のみ／法的地位は名乗らない
   ==========================================================================
   ★★ 2026-09-17 現在、.smk-band 系は**どのHTMLからも使われていない（未使用）** ★★
      喫煙の帯はCEO指示で11ページすべてから削除した。
      現時点で表示義務は無い（健康増進法上の広告・宣伝の表示義務は「喫煙可能室設置施設」の
      管理権原者等に課されるもので、BUCKS がその地位に当たるかは未確認）。
      ・未使用なのは .smk-band / .smk-h / .smk-t とそのリビール保険だけ。
        **.smk-row / .smk-dd（店舗情報の表の「喫煙」の行）は現役**なので消さない。
      ・.smk-band 側も**戻すとき用に意図的に残してある。** 未使用だからと削除しないこと。
        HTMLの帯を戻せばそのまま効く。戻す条件は下の「戻す条件」と各HTMLの削除コメントを参照。

   根拠・確認経緯・禁止事項は本採用の noir.css 10節と同一。要点だけ再掲する。

   【2026-09-17 時点の事実。ここを読んだだけで文言を戻さないこと】
   表示は**観察できる事実だけ**にしてある。
     「Cafe & BAR BUCKS は店内で喫煙できます。20歳未満の方はご入店いただけません。」
   健康増進法上の**法的地位（喫煙可能室設置施設）は未確定**で、名乗っていない。
   理由: 株式会社ALLYの設立は 2022-04-05 で、改正法の施行日 2020-04-01 時点の
         営業主体ではない。承継の同一性（事業の継続性・経営主体の同一性・
         店舗の同一性）が未確認。標識掲示・福岡市への届出も未確認。
   戻す条件: 福岡市保健所への照会で既存特定飲食提供施設に該当すると確認でき、
             標識掲示と届出（健康増進法施行規則 附則2条6項・附則様式第一号）を
             済ませたとき。そのとき初めて「当該施設が喫煙可能室設置施設である旨」
             を明示する（改正法 附則2条4項 ＋ 施行規則 附則2条5項 ＋
             健発0222第1号 第3の3(6)）。
   ★ この条件を満たすまで、**勝手に文言を「喫煙可能店」「喫煙可能室」へ戻さない。**

   ★★ 絶対に守ること ★★
     ・display:none / visibility:hidden を書かない
     ・**[data-rv] / [data-stagger] の中に入れない。**
       （.js-rv [data-rv]{opacity:0} / .js-rv [data-stagger]>*{opacity:0} に食われる。
        opacity は祖先と積になるので、子孫側の !important では救えない）
       入店前に必ず目に入る必要があるので、JS無効でも reduce でも最初から見えていること
     ・16px 未満にしない
     ・「分煙」「喫煙席」「禁煙」と書かない
     ・法的区分の名称（喫煙可能店／喫煙可能室／喫煙可能室設置施設）と根拠法
       （健康増進法）は、上の「戻す条件」を満たすまで書かない
   ★ このサイトは会社サイトなので、**どの店の話かが分かるよう必ず
     「Cafe & BAR BUCKS」と店名を書く。** Road には帯を置いていない。

   ★ 景表法の近接を壊さないこと。BUCKS の <dl class="tbl"> の中では
     「飲み放題」の行（価格と <small> の打消し表示が同じ dd に入っている）の
     **内側にも、価格と注記のあいだにも割り込ませない。**
     設備の行の直後に独立した .row として足してある。
   ========================================================================== */
/* ↓ ここから .smk-band / .smk-h / .smk-t は未使用（2026-09-17〜）。戻すとき用に残してある */
.smk-band{
  margin:26px 0 0;
  background:var(--panel-b);
  border:1px solid var(--line);
  border-left:3px solid var(--bucks);
  padding:18px 20px 16px;
}
.smk-h{
  margin:0;font-size:1.0625rem;font-weight:700;line-height:1.7;
  letter-spacing:.04em;color:var(--warm);
}
.smk-t{
  margin:8px 0 0;font-size:1rem;line-height:1.85;letter-spacing:.02em;
  color:var(--text);max-width:62ch;
}
.smk-t b{font-weight:700;color:#fff}
/* リビールの保険（入れ子にしないことが本体の対策） */
.js-rv .smk-band,
.js-rv .smk-band *{opacity:1 !important;transform:none !important}
/* 表の中の「喫煙」の行。既定の .tbl .row / dt / dd に乗るだけ */
.tbl .smk-row dd{color:var(--text)}