/* ========================================================================== noir.css — 株式会社ALLY 店舗ページ（BUCKS / Road）**本採用**のスタイルシート -------------------------------------------------------------------------- 【重要】このファイルは本採用サイトの土台である。外すとページが崩れる。 読み込んでいるのは次の8枚（2026-09-12 実測。ほかに参照元は無い）。 /works/ally/bucks/ /works/ally/bucks/menu/ /works/ally/bucks/space/ /works/ally/bucks/access/ /works/ally/road/ /works/ally/road/menu/ /works/ally/road/space/ /works/ally/road/access/ この8枚は noir.css が**唯一の**スタイルシートで、JSは noir.js を読む。 【経緯】もとは「別案B」として作ったデザインで、当時は /works/ally/noir/ 配下に 置いていた。その案がそのまま採用されたため /bucks/ /road/ へ昇格し、 それまでの本採用（bucks.css / road.css で動いていた版）は /works/ally/_old-design/ へ退避した。/works/ally/noir/ はもう存在しない。 **「別案B専用」「本採用は bucks.css / road.css」と書かれた古い記述は誤りである。** 【いま生きているCSSの対応表（2026-09-12 実測）】 noir.css … 本採用の店舗ページ8枚（このファイル） corp.css … ALLYコーポレート /works/ally/ index・company・contact・shops night.css … 別案A /works/ally/night/ 4枚 lights.css … 別案C /works/ally/lights/ 4枚 bucks.css / road.css … /works/ally/_old-design/ の旧本採用 8枚のみ ほかのCSSをこの8枚に読ませないこと。逆も同じ。 【設計の出どころ】 参考サイト https://www.diningbar-h-bobo.com/ を実機計測した設計語彙に寄せている。 地色 #000000 ／ 大見出し 70px・italic・Times系・#FFEBBE ／ アクセント #C78D0F ／ 本文 #FFFFFF・明朝 ／ 全幅写真のヒーロー（スライダー）＋ 黒地に巨大見出し1行と大量の余白 ／ スクロールでのフェードイン **先方のCSS・JS・HTML・画像・文章は1行も持ってきていない。** jQuery / slick / WOW.js も使っていない（スライダーはCSSアニメーション、 スクロールインは noir.js の IntersectionObserver で自前に組んである）。 【和文をイタリックにしない理由】 日本語フォントにイタリック字形は無く、ブラウザが機械的に斜めに倒した 「偽斜体（synthetic oblique）」になる。読みにくいうえ字面が汚れるので、 **欧文（.en）だけ font-style:italic、和文（.ja）は normal** で分けている。 この分離を崩さないこと。 【キャッチを画像にしない理由】 参考サイトはヒーローのコピーを画像で置いているが、こちらは 「大名 BAR」等での検索到達が目的なので、コピーは実テキスト（h1）で組み、 見た目だけCSSで作る。画像化すると本文として読まれない。 【景表法】このCSSが載る2ページには**金額を1つも書かない**。 料金は本採用の /bucks/menu/ /road/menu/ へのリンクで見せる。 将来ここに価格を足すなら、打消し表示を価格の直後に隣接して置くこと （フェードインで価格だけが先に出る事故を防ぐため、価格と注記は 必ず**同じ [data-reveal] の中**に入れる）。 ========================================================================== */ /* -------------------------------------------------------------------------- 共通トークン（**色ではないもの**） -------------------------------------------------------------------------- 書体・ラップ幅・パディングは2店で共通。**ここを店ごとに分けないこと。** 分けた瞬間にレイアウトが2本になり、片方だけ直す事故が起きる。 -------------------------------------------------------------------------- */ :root{ /* 欧文の見出し。参考サイトと同じ Times 系。ネットワークに依存させない （本番だけ Google Fonts の取得に失敗して字面が変わる事故を避ける） */ --serif:"Times New Roman",Times,"Liberation Serif","Nimbus Roman",serif; /* 和文。明朝で受ける */ --mincho:"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP","MS PMincho",serif; --wrap:1120px; --pad:20px; } /* ========================================================================== 0. 配色（**このファイルで店ごとに分かれるのは、ここだけ**） -------------------------------------------------------------------------- 【第3版・2026-09-07 で分割した。1本に戻さないこと】 ■ なぜ分けたか 第2版まで BUCKS と Road は同じ `--gold:#c78d0f` / `--cream:#ffebbe` を共有していて、 **2枚を並べて見ても店の区別がつかなかった。** ■ 色の出どころ（**ここで新しい色を発明しない**） 両店とも本採用サイトで既にブランドカラーを持っているので、そこから引いている。 別案Bが本採用になったときに本番サイトと地続きになり、店の印象がぶれないため。 BUCKS … `works/ally/assets/bucks.css` の --accent:#c4763a（テラコッタ／銅色） Road … `works/ally/assets/road.css` の --accent:#c8a35c ／ --accent-ink:#e3c98a ／ --bg:#0e0c0a（ゴールド） ■ 使い方 ページの `` に `class="theme-bucks"` / `class="theme-road"` を付ける。 noir.js は `classList.add()` でしかクラスを触らないので共存する。 **`:root` の既定は BUCKS と同じ**にしてあるので、クラスを書き忘れても 色が未定義になって字が消えることはない（値を2度書いてもいない）。 ■ 触るときの約束 - **変えてよいのは色系の変数だけ。** `--wrap` `--pad` `--serif` `--mincho` は 上の `:root` に置いてあり、店ごとに上書きしない - 地色は**どちらも黒系の範囲を出ない**（参考サイト BOBO の骨格が黒地のため） - **色を変えたらコントラストを全部測り直す。** 前の色で通っていた数値は 何の保証にもならない。とくに BUCKS のテラコッタは旧ゴールドより暗い （地色に対して 5.7:1 ／ 旧 #c78d0f は黒地に 7.2:1） ========================================================================== */ :root, .theme-bucks{ /* Cafe & BAR BUCKS … 暖かいテラコッタ／銅色。地色はわずかに赤みのある黒 */ --bg:#0d0705; /* 地色 */ --panel:#17100c; /* 写真枠・カード写真の下地（読み込み前に見える面） */ --ink:#fdf6f0; /* 本文 */ --cream:#ffe6d0; /* 大見出し・写真の上のラベル */ --gold:#c4763a; /* アクセント（bucks.css --accent） */ --gold-hi:#dc8f4d; /* ボタンのホバー */ --on-gold:#150a04; /* --gold のボタン地の上に置く文字 */ --muted:#d6bda8; /* 副次テキスト */ --line:rgba(255,214,182,.26); } .theme-road{ /* BAR Road … ゴールド。地色は road.css と同じ深い黒 */ --bg:#0e0c0a; /* road.css --bg */ --panel:#171310; /* road.css --surface */ --ink:#f4efe6; /* road.css --ink */ --cream:#f3e3ba; /* 大見出し・見出しのクリーム */ --gold:#c8a35c; /* road.css --accent */ --gold-hi:#e3c98a; /* road.css --accent-ink */ --on-gold:#12100d; /* road.css --on-accent */ --muted:#a99c8a; /* road.css --muted */ --line:rgba(227,201,138,.24); } *,*::before,*::after{box-sizing:border-box} /* -------------------------------------------------------------------------- ★★★ overflow-x は **html にだけ** 書く。body に足さないこと ★★★ -------------------------------------------------------------------------- 【第6版・2026-09-07 で body 側の overflow-x:hidden を削除した。戻さないこと】 ■ 何が起きていたか 第5版まで html と body の**両方**に overflow-x:hidden が入っていた。 1行ずつ見れば「横スクロールを止める」だけの無害な指定に見えるが、 **2つ揃うとヘッダーの position:sticky が完全に無効になる。** 実測（375×667・scrollY=600 / 別案B 全5枚）: .nh の getBoundingClientRect().top = **-600px**（＝画面外に流れ去る） 本採用 /bucks/menu/ は同条件で top=0 メニューページは 375px で縦 7,600px あるため、**スマホでページ途中から ハンバーガーに手が届かなかった。** ■ なぜ両方に書くと壊れるのか（1つだけなら壊れない理由） (1) CSS の overflow は、片方の軸だけ visible 以外にすると、 **もう片方の visible は auto に計算される**。つまり `overflow-x:hidden` は実質 `overflow-x:hidden; overflow-y:auto` になる (2) ``（ルート要素）の overflow は**ビューポートに伝播する**という 特別扱いがあり、伝播したあとルート自身の used value は visible に戻る。 だから html だけなら、クリップはビューポートが行い、 html は sticky の含有ブロックとして普通に振る舞う (3) ところが body にも書くと、この伝播の対象外である body が **自前のスクロールコンテナ（overflow-y:auto）になる**。 sticky 要素は「いちばん近いスクロールポート祖先」に貼り付く仕様なので、 .nh は body のスクロールポートに貼り付こうとする。 しかし実際にスクロールしているのはビューポート（html）側で、 body 自身は 1px もスクロールしない（実測 body.scrollTop=0）。 **動かない箱に貼り付くので、sticky は何もしない＝ただ流れていく。** ■ 横スクロールの防御は落ちていない クリップは (2) のとおりビューポート側で効いたままなので、 body から外しても横スクロールは復活しない（全5枚 × 9幅で実測・0px）。 唯一 100vw を使っている .hero-in::before（本ファイル「局所的な下敷き」節）は **`.hero{overflow:hidden}` の内側にあるので、そちらで clip される。** スクロールバーぶん 100vw > clientWidth になる環境でも同じ（構造上の保証）。 ■ 次に触る人へ 横スクロールが出たら、**body に overflow-x:hidden を足して隠さないこと。** それは sticky を殺すのと引き換えに症状を覆うだけで、はみ出しの原因は残る。 はみ出している要素を特定して、その要素の幅のほうを直すこと。 -------------------------------------------------------------------------- */ html{ -webkit-text-size-adjust:100%; /* 320px でも横スクロールを出さない。ページ側で幅を持つ要素は すべて max-width:100% か overflow-x:auto を持たせてある。 ルート要素なのでこの指定はビューポートに伝播する（上の★を読むこと） */ overflow-x:hidden; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--mincho); font-size:16px; line-height:1.95; letter-spacing:.04em; /* ★ここに overflow-x を書かない。書くと .nh の sticky が死ぬ（上の★） */ } img{max-width:100%;height:auto;display:block;border:0} a{color:var(--cream)} a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)} .sr-only{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ========================================================================== 1. ヘッダー（右上ハンバーガー） -------------------------------------------------------------------------- 別案A（night）と同じ振る舞いにそろえてある。 ・768px 未満だけハンバーガーに畳む（それ以上は横1行のナビ） ・**CSSの既定は「ナビは見える／ボタンは display:none」**。 noir.js が に .js-burger を付けたときだけ畳まれる。 JSが落ちてもナビに到達できなくならない（ボタン側の hidden 属性も JSが外すので二重に守っている） ========================================================================== */ .nh{ position:sticky;top:0;z-index:20; background:var(--bg); border-bottom:1px solid var(--line); } .nh-in{display:flex;align-items:center;gap:10px 18px;min-height:64px;padding-top:8px;padding-bottom:8px} .nh-logo{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none;min-height:48px} .nh-logo img{width:auto;height:34px} .nh-logo .tag{ font-family:var(--serif);font-style:italic;font-size:.78rem; letter-spacing:.14em;color:var(--gold);white-space:nowrap; } .nh-nav{display:flex;flex-wrap:wrap;gap:0 2px} .nh-nav a{ display:inline-flex;align-items:center;min-height:48px;padding:0 10px; font-size:.86rem;letter-spacing:.08em;text-decoration:none;color:var(--muted); } .nh-nav a:hover,.nh-nav a[aria-current="page"]{color:var(--cream)} .nh-burger{ display:none; width:48px;height:48px;padding:0;margin:0; background:transparent;border:1px solid var(--line);color:var(--cream); cursor:pointer; } .nh-burger .bar{display:block;width:20px;height:14px;margin:0 auto;position:relative} .nh-burger .bar i{ position:absolute;left:0;right:0;height:1px;background:currentColor; transition:transform .22s ease,opacity .16s ease; } .nh-burger .bar i:nth-child(1){top:0} .nh-burger .bar i:nth-child(2){top:6px} .nh-burger .bar i:nth-child(3){top:12px} /* JSが動いたときだけ畳む（768px 未満） */ @media (max-width:767.98px){ .js-burger .nh-burger{display:block} .js-burger .nh-nav{display:none} .js-burger .nh-nav.is-open{ display:block; position:absolute;left:0;right:0;top:100%; background:var(--bg);border-bottom:1px solid var(--line); padding:6px var(--pad) 18px; } .js-burger .nh-nav.is-open a{ display:flex;align-items:center;min-height:52px;padding:0 4px; font-size:1rem;border-top:1px solid var(--line);color:var(--ink); } .js-burger .nh-nav.is-open a:first-child{border-top:0} } .nav-open .nh-burger .bar i:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav-open .nh-burger .bar i:nth-child(2){opacity:0} .nav-open .nh-burger .bar i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .nav-open,.nav-open body{overflow:hidden} /* ========================================================================== 2. 見出しの型（参考サイトの語彙） -------------------------------------------------------------------------- 欧文は 70px・italic・Times系・#FFEBBE。携帯で溢れるので clamp で可変にする。 4.375rem = 70px。下限は 320px でも収まる値にしてある。 ========================================================================== */ .en{ font-family:var(--serif); font-style:italic; /* 欧文だけ。和文には掛けない */ font-weight:400; color:var(--cream); letter-spacing:.02em; line-height:1.12; margin:0; } .en.xl{font-size:clamp(2.4rem,10.4vw,4.375rem)} /* 70px まで */ .en.lg{font-size:clamp(2rem,8vw,3.25rem)} .en.md{font-size:clamp(1.5rem,5.4vw,2.25rem)} .en.sm{ font-size:.82rem;letter-spacing:.22em;color:var(--gold); line-height:1.6; } /* 和文の見出し。**イタリックにしない** */ .ja{ font-family:var(--mincho);font-style:normal;font-weight:500; color:var(--ink);line-height:1.55;letter-spacing:.06em;margin:0; } .ja.xl{font-size:clamp(1.6rem,6.6vw,2.6rem)} .ja.lg{font-size:clamp(1.35rem,5.2vw,2rem)} .lead{margin:0;max-width:34em;color:var(--muted);font-size:1rem;line-height:2.05} .rule{width:64px;height:1px;background:var(--gold);border:0;margin:26px 0} /* 金の細いボタン。**料金は書かない**ので、行き先はメニューページ側 */ .btn{ display:inline-flex;align-items:center;justify-content:center; min-height:52px;padding:0 26px; background:var(--gold);color:var(--on-gold); /* 実測 BUCKS 5.6:1 ／ Road 8.0:1 */ font-family:var(--mincho);font-size:.95rem;font-weight:700;letter-spacing:.1em; text-decoration:none;border:1px solid var(--gold); } .btn:hover{background:var(--gold-hi);border-color:var(--gold-hi)} .btn.ghost{background:transparent;color:var(--cream);border-color:var(--line)} .btn.ghost:hover{background:transparent;border-color:var(--gold);color:var(--gold)} .btns{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0} /* ========================================================================== 3. ヒーロー -------------------------------------------------------------------------- **BUCKS と Road で同じ1種類だけ。** 全幅写真2枚のクロスフェード＋ コピーのフェードイン。店ごとに違う型を作らないこと。 【第4版・2026-09-07 で黒地型（.hero.plain）を廃止した】 第3版までは Road だけ「写真を使わない黒地型」で、その理由を 「Road の実店舗写真は最大 638×480 しかなく全幅に耐えない」と書いていた。 これは筋が通っていない。**BUCKS のヒーローも実店舗写真ではなく イメージ素材（band-pour / band-bottles）**だからで、実店舗写真の解像度は どちらの店でもヒーローの型を決める条件になっていなかった。 同じ基準を両店に当てていなかったので、Road も写真ヒーローにそろえた。 `.hero.plain` と `.heromark` は参照が無くなったので削除した。 ヒーローに使う写真の選び方（明暗プロファイルの組み合わせ）は 各ページのヒーロー直前のコメントに実測値つきで書いてある。 ========================================================================== */ .hero{position:relative;min-height:min(86svh,780px);display:flex;align-items:flex-end;overflow:hidden} .hero-media{position:absolute;inset:0;z-index:0;background:var(--bg)} .hero-media img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0; } /* 1枚目はJS・アニメーションが動かなくても必ず見える */ .hero-media img:first-child{opacity:1} /* 2枚のクロスフェード。負の delay で位相を半周ずらすので、 フェードアウトとフェードインが必ず重なる（真っ黒になる瞬間が無い）。 14s のうち 42%→50% で1枚目が抜け、同じ区間で2枚目（位相 92%→100%）が入る。 */ @keyframes noirSlide{ 0%{opacity:1} 42%{opacity:1} 50%{opacity:0} 92%{opacity:0} 100%{opacity:1} } .hero-media img{animation:noirSlide 14s linear infinite} .hero-media img:nth-child(1){animation-delay:0s} .hero-media img:nth-child(2){animation-delay:-7s} /* -------------------------------------------------------------------------- 写真の上に文字を置くための下敷き（scrim） -------------------------------------------------------------------------- 【第2版・2026-09-07 で作り直した。前の版のやり方に戻さないこと】 ■ 何が起きたか 初版の .hero-scrim は linear-gradient を2本（縦＋横）重ねていた。 縦 rgba(0,0,0,.72)…、横 rgba(0,0,0,.72)… と、**1本ずつ見れば妥当な値**だった。 ところが重ねた2枚のアルファは**加算ではなく乗算**になる。左上では 透過率 = (1 - .72) × (1 - .72) = 0.078 となり、写真の光が **7.8% しか通らない**。コピーは左側にあるので、 いちばん見せたい領域がいちばん暗くなり、ヒーローが黒く潰れていた。 ■ 直し方 (1) **横方向のスクリムを廃止した。** 縦と掛け算になるのが事故の本体だった (2) 縦のスクリムを大幅に弱めた（下記。最大でも .34） (3) 可読性は「全面を暗くする」のではなく、**コピー群の背後だけに効く 局所的な下敷き**（.hero-in::before）で稼ぐ ■ 次に濃さを触る人へ（必ず守ること） - **層ごとに妥当かどうかで判断しない。合成後の実描画ピクセルで測る。** 重ねた層のアルファは積になるので、個別に穏当な値でも合わせると潰れる - **コントラスト比だけを見て通してはいけない。** 背景が真っ黒なほど クリーム #FFEBBE の文字は 18:1 に近づき、写真が消えているほど高得点になる。 初版はコントラスト検証（1280/375px・30計測）を **NG 0件** で通過している - 合わせて次の2つを測ること（文字を color:transparent にしたヒーロー全体の矩形）: 最大輝度 ≥ 60 ／ 輝度の標準偏差 ≥ 12 （標準偏差は「のっぺり黒一色でない」ことの検査。平均や最大だけでは ハイライト1点で通ってしまう） -------------------------------------------------------------------------- */ .hero-scrim{ position:absolute;inset:0;z-index:1; /* **1本だけ。** ここに2本目を足さないこと（足すなら透過率が積になることを 前提に、合成後のピクセルを測り直してから決める） */ background:linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.06) 30%, rgba(0,0,0,.10) 66%, rgba(0,0,0,.34) 100%); } .hero-in{position:relative;z-index:2;width:100%;padding-top:96px;padding-bottom:72px} /* -------------------------------------------------------------------------- コピー群の背後だけに効く局所的な下敷き（第2版で新設） -------------------------------------------------------------------------- 全面を暗くする代わりに、**文字が乗っているところだけ**を落とす。 これで写真は生きたまま、コントラストは実測で満たせる。 ■ 仕掛けの根拠（値を触る前に読むこと） - .hero-in は z-index:2 で**スタッキングコンテキストを作っている**ので、 z-index:-1 の ::before は「コピーの下・スクリムと写真の上」に正しく入る - left/right の calc(50% - 50vw) で幅を**ビューポート幅ちょうど**に広げている。 ラップ（max-width 1120px）幅のままだと、グラデーションが途中の濃さで 縁に達し、広い画面で縦の継ぎ目が見える - top を -40% にしているのは**上辺の継ぎ目を消すため**。 実測で「コピーの中心＝この箱の高さの約67%」になる（1280px / 375px とも）。 楕円の縦半径を 64%（＜67%）にしてあるので、**箱の上辺に届く前に アルファが0になる**。半径を67%より大きくすると横一文字の継ぎ目が出る - .hero-in>* のフェードイン（noirFadeUp）は**要素の子**にだけ掛かる。 ::before は擬似要素なので nth-child の数にも入らない ■ 幅で形を変えている理由 コピーの横幅（h1 は 70px 固定なので約 612px）はビューポートが狭いほど 相対的に大きくなる。1100px 未満では画面の横幅いっぱいに文字が乗るので、 横方向に絞る意味がなく、**縦だけの帯**にする（横半径 150%）。 1100px 以上では余白ができるので**左寄りの楕円**にし、 band-pour でいちばん明るい右下のグラスを暗くせずに残す。 -------------------------------------------------------------------------- */ .hero .hero-in::before{ content:""; position:absolute;z-index:-1;pointer-events:none; left:calc(50% - 50vw);right:calc(50% - 50vw); top:-40%;bottom:0; background:radial-gradient(150% 64% at 44% 67%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.70) 44%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.30) 80%, rgba(0,0,0,0) 100%); } @media (min-width:1100px){ .hero .hero-in::before{ background:radial-gradient(66% 64% at 34% 67%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.70) 44%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.30) 80%, rgba(0,0,0,0) 100%); } } /* -------------------------------------------------------------------------- ★ 第30版・2026-09-10: 店舗トップ（.hero に .compact が付かない2枚だけ）の top を **-40% → -20%** にした。理由と実測値を必ず読むこと。 -------------------------------------------------------------------------- ■ なぜ必要になったか ヒーローに .hero-sns（SNS・電話）を1行足したので .hero-in が **+72px** 高くなった。 この ::before は `top:-40%; bottom:0` ＝ **高さが .hero-in に比例して伸びる**箱で、 さらにグラデーションの中心・半径も箱の高さの % なので、 **72px 増えると暗い楕円は 101px ぶん上へ広がる**。 結果、写真のいちばん明るい上部（照明）まで下敷きが届いてしまった。 実測（375px・前景を visibility:hidden にしたヒーロー矩形）: BUCKS 最大輝度 147.9 → **95.5** ／ 標準偏差 17.25 → **12.45**（基準12ぎりぎり） Road 最大輝度 143.7 → **116.8** ／ 標準偏差 21.68 → 15.25 **下敷きを濃くしていないのに写真が潰れた**（濃さではなく箱の寸法が原因）。 ■ なぜ -20% で直るか。壊していない不変条件 この節の元コメントにあるとおり、継ぎ目が出ないための条件は **「縦半径 64% ＜ 中心 67%」**（＝箱の上辺に届く前にアルファが0になる）。 -20% でも 64%/67% は動かしていないので、この条件はそのまま成り立つ。 変えたのは**箱の高さ**だけで、グラデーションの形は1つも触っていない。 ■ -40% / -30% / -20% / calc(-40% + 28.8px) を実測して選んだ（375px） top BUCKS 最大/標準偏差 最悪コントラスト（必要4.5） -40% 95.5 / 12.45 7.98 -30% 123.3 / 14.69 7.13 calc(-40% + 28.8px) 108.4 / 13.46 7.59 **-20%** 154.7 / **18.06** **6.30** -20% は SNS行を足す**前**の到達点（147.9 / 17.25）を上回る。 Road も 144.5 / 21.55 で追加前（143.7 / 21.68）と同等。 コントラストは最悪 6.30（必要4.5）で 1.4倍の余裕がある。 ■ .compact（menu / space / access の下層6枚）は**対象外**。 あちらは .hero-sns を持たず .hero-in が伸びていないので、 元の -40% のまま1pxも変えていない。だから `:not(.compact)` で絞ってある。 -------------------------------------------------------------------------- */ .hero:not(.compact) .hero-in::before{top:-20%} .hero .en.sm{margin-bottom:18px} /* **写真の上のラベルだけアクセント色をやめてクリームにする。** 13px の小さい文字なので 4.5:1 が要る。写真＋下敷きの実描画で測ると アクセント色ではその線を割る。下敷きを濃くする案は写真がほぼ見えなく なるので採らず、色のほうを変えてある。 第4版（2026-09-07）で Road も写真ヒーローになったので、この規則は **両店に効く**（Road だけ黒地でアクセント色のままにする分岐は無くなった）。 第3版（2026-09-07）で BUCKS をテラコッタ #c4763a に変えたので**測り直した**。 テラコッタは旧ゴールドより暗いぶん、事情は悪化している。 アクセントに戻した場合の実測（最も明るい画素に対して・必要 4.5:1）: 1280×900 pour **3.87:1** ／ bottles 5.00:1 375×780 pour **2.65:1** ／ bottles **3.65:1** いま採っているクリーム #ffe6d0 は同条件で 7.72／10.63／11.28／14.58:1。 **アクセント色に戻さないこと。** 第4版で写真ヒーローになった Road の `.en.sm`（クリーム #f3e3ba）の実測: 1280×900 lights-city 11.16:1 ／ mic-gold 15.65:1 375×780 lights-city 10.76:1 ／ mic-gold 8.63:1 （いずれも実描画の**最も明るい画素**に対して。必要 4.5:1） Road のヒーロー全32計測の最悪値は 7.78:1（1280×900 lights-city の h1 欧文・必要 3.0）。 */ .hero .en.sm{color:var(--cream)} .hero h1{margin:0} .hero h1 .en{display:block;margin-bottom:10px} .hero h1 .ja{display:block} .hero .sub{margin:22px 0 0;font-size:1.02rem;color:var(--ink);letter-spacing:.06em} .hero .facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0} .hero .facts li{ font-size:.8rem;letter-spacing:.08em;color:var(--cream); border:1px solid var(--line);padding:6px 13px;line-height:1.7; } /* -------------------------------------------------------------------------- ヒーローの SNS ／ 電話（.hero-sns）— 第30版・2026-09-10 -------------------------------------------------------------------------- CEO指示「TOP画面にインスタやティックトックのサービスロゴを載せてほしい。 電話のマークも。TOPはオシャレにしたいです。」 ■ 置き場所: .hero-in の **.facts の直下（コピー群のいちばん下）**。 - .hero は align-items:flex-end なのでコピーは画面下に溜まる。SNSと電話は 「読んだあとに押すもの」なので、読み順の最後に置くのが素直。 - **.hero-in の中に入れると局所的な下敷き（.hero-in::before）が効く。** 写真の上にじかに置くと、明るい画素の上に細線が乗って非テキスト3:1を 割る危険がある。下敷きの内側に入れておけば同じ条件で守れる。 - 右上・右端の縦並び（いわゆるソーシャルレール）は採らなかった。 下敷きの外に出てしまい、ヘッダー（sticky）とも重なる。 ■ 見た目: **角丸を付けない。** noir の語彙は .facts / .btn とも角が立っている。 別案C（lights.css の .sns）は丸ピルだが、あちらはカードの中の小さな チップで、こちらはヒーローの余白に置く大きめの箱なので**別の解**を採った。 区別のため .facts より枠を明るく（.26 → .58）し、ごく薄い地色を敷いてある。 ■ 寸法: **46×46px を実寸で確保する。** 別案Cのように擬似要素で当たり判定を 広げる必要はない。あちらは 320px のカラム幅 139.27px に3つ詰める制約が あったが、ヒーローは .wrap の内寸が 320px でも 288px（--pad 16px）あり、 第31版で TikTok も 46px の正方形になったので 46×3 + gap 10×2 ＝ **158px**。 → **当たり判定＝見た目の箱**なので、::before の張り出し（--grow）計算で 44px を割る事故（別案C 第19版）の余地がそもそも無い。 ■ TikTok は第31版（2026-09-11・CEO判断）で**アイコン（音符のSVG）**にした。 TikTok Design Guidelines: "You may not use TikTok logos, icons, symbols, or designs, without our prior written permission." https://developers.tiktok.com/doc/getting-started-design-guidelines logos だけでなく icons / symbols / designs まで許諾制で、自分で描き起こしても 対象に入る。第11〜30版はこの理由で文字リンクだった。**CEOがこのリスクを 認識したうえでアイコン化を指示した**ため実装しており、リスクは掲載主 （株式会社ALLY）に帰属する。正規のルートは TikTok Brand Hub （https://www.tiktokbrandhub.com/）での書面申請で、許諾が下りれば公式素材に 差し替えられる。**勝手に文字へ戻さないこと。** 経緯は CREDITS.md にある。 ★ 副産物: 可視の文字が消えたので、「TikTok」の字幅がフォールバック書体で 広がって隣の当たり判定を削る事故（別案C 第13版で本番発生）は**構造的に 起きなくなった**。書体に依存する記述がこの行から消えている。 ★ 16px未満の可視文字が1件減った（旧 .hsns--tt の 13px）。 ■ Instagram は公式グリフPNG（sns-instagram.png）をそのまま置く。 **形状・比率・色を改変しない**（Metaのガイドライン）ので filter を掛けない。 ■ 電話は自作SVG。特定企業のマークではないので描いてよい。金の細線1本。 -------------------------------------------------------------------------- */ .hero .hero-sns{ list-style:none;display:flex;flex-wrap:wrap;align-items:center; gap:10px;margin:26px 0 0;padding:0; } .hero .hero-sns>li{display:flex;flex:0 0 auto} .hsns{ display:inline-flex;align-items:center;justify-content:center; box-sizing:border-box; /* ★ 実寸。44px を下回らせないこと（elementFromPoint の実測で 46×46） */ width:46px;height:46px; padding:0; border:1px solid rgba(255,235,214,.58); /* 非テキスト3:1を満たす濃さ。実測値は報告に記載 */ background:rgba(255,235,214,.06); color:var(--cream); text-decoration:none; transition:color .2s ease,background-color .2s ease,border-color .2s ease; } .hsns-ig{display:block;width:24px;height:24px;flex:0 0 auto} .hsns-ph{display:block;flex:0 0 auto} /* TikTok の音符マーク（第31版）。Instagram の公式グリフと同じ 24×24 の箱で置く。 fill は **currentColor**＝親 .hsns の color:var(--cream)。電話の自作SVG（stroke: currentColor）と同じ色になり、:hover / :active / :focus-visible の color 変化にも 一緒に追従する（Instagram はPNGなので追従しない＝あちらだけ枠と地色で返している）。 ★ 旧 .hsns--tt（width:auto / min-width:76px / font-family / font-size）は削除した。 中身が文字でなくなったので、チップは .hsns の 46×46 をそのまま使う。 HTML側の hsns--tt クラスは「TikTokのチップ」の目印として残してある。 */ .hsns-tt{display:block;flex:0 0 auto} /* 反応は hover に依存しない。スマホには hover が無いので :active と :focus-visible でも同じように点く */ .hsns:active{color:var(--gold-hi);background:rgba(255,235,214,.18);border-color:rgba(255,235,214,.92)} .hsns:focus-visible{color:var(--gold-hi);background:rgba(255,235,214,.18);border-color:rgba(255,235,214,.92)} @media (hover:hover){ .hsns:hover{color:var(--gold-hi);background:rgba(255,235,214,.16);border-color:rgba(255,235,214,.85)} } /* Instagram は公式の多色グリフなので色を変えられない。 押した／触れたことは**枠と地色の明るさ**だけで返す */ .hsns:has(.hsns-ig):active, .hsns:has(.hsns-ig):focus-visible{background:rgba(255,235,214,.22)} @media (min-width:560px){ .hero .hero-sns{gap:12px} } /* コピーのフェードイン（1s）。参考サイトと同じ入り方。 **JSに依存させない**ので、animation が効かない環境でも定位置・不透明 */ @keyframes noirFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .hero-in>*{animation:noirFadeUp 1s ease both} .hero-in>*:nth-child(2){animation-delay:.16s} .hero-in>*:nth-child(3){animation-delay:.32s} .hero-in>*:nth-child(4){animation-delay:.48s} /* 第30版で .hero-sns（5つ目の子）が増えた。**ここを足さないと** 遅延0で .facts より先に出てしまう（.hero-in>* に animation は当たるため） */ .hero-in>*:nth-child(5){animation-delay:.64s} /* 第4版（2026-09-07）で `.hero.plain` と `.heromark` を削除した。 経緯は本節の冒頭コメントを読むこと。**黒地型を復活させないこと。** */ /* ========================================================================== 4. セクション ========================================================================== */ .sec{padding:96px 0} .sec.tight{padding:64px 0} /* 黒地に巨大見出し1行＋大量の余白（参考サイトの型そのもの） */ .slab{padding:132px 0 128px;text-align:center} .slab .en{margin:0 auto} .slab .ja{margin:26px auto 0;max-width:22em} .slab .lead{margin:26px auto 0;text-align:left} .slab .btns{justify-content:center} .sechead{margin:0 0 42px} .sechead .en.sm{display:block;margin-bottom:12px} /* セクション見出しの本体は**和文なので .ja（italic ではない）。** 見出しとして立たせたいので色だけクリームにそろえる */ .sechead .ja{display:block;color:var(--cream);font-weight:400} /* 写真の枠。--nw に**原寸の横幅**を入れて、それ以上に引き伸ばさない。 Road の写真は 638px / 447px / 225px しかないので、この上限が効く */ .ph{position:relative;margin:0;background:var(--panel);overflow:hidden} .ph img{width:100%;max-width:var(--nw,none);height:auto;margin:0 auto} .ph figcaption{ margin:12px 2px 0;font-size:.86rem;letter-spacing:.08em;color:var(--muted); } /* 未着の枠。**写真が入る枠より目立たせない。** Road の実店舗写真は原寸が小さく（最大 638px）表示も小さいので、 空枠だけが半分幅で巨大に見えるのを防いで幅をそろえる */ .ph .pending{ display:flex;align-items:center;justify-content:center; width:min(100%,340px);aspect-ratio:4/3; border:1px solid var(--line);color:var(--muted); font-size:.88rem;letter-spacing:.12em; } .phgrid{display:grid;gap:34px;grid-template-columns:1fr} @media (min-width:760px){ .phgrid.two{grid-template-columns:repeat(2,1fr)} .phgrid.three{grid-template-columns:repeat(3,1fr)} /* 第34版（2026-09-13）── 項目が1つしかない「できること」用（Road のカラオケ）。 素の .phgrid（1fr）だと本文が 1200px 幅まで伸びて1行が長くなりすぎ、 .phgrid.three だと **3列のうち左1枠だけ**が埋まって列が空いて見える。 ここでは **BUCKS のカード1枚とまったく同じ幅**（3列から gap 34px×2 を引いた 残りの1/3）を1枠だけ作る。gap の値（34px）を変えたらこの式も直すこと。 */ .phgrid.one{grid-template-columns:calc((100% - 68px)/3)} } /* Road のように原寸が小さい写真は、枠のほうを写真に合わせる（伸ばさない） */ .phgrid.small{ grid-template-columns:1fr; justify-items:start; } @media (min-width:760px){ .phgrid.small{grid-template-columns:repeat(3,auto);justify-content:start;align-items:start} } /* 大きめの1枚（写真の上に見出しを置く型）。原寸 1360px を超えて拡大しない */ .feature{position:relative;max-width:1360px;margin:0 auto;overflow:hidden} .feature img{width:100%;height:auto} .feature .cap{ position:absolute;left:0;right:0;bottom:0;z-index:2; padding:120px 26px 30px; /* 文字が乗る帯を実測で 0.05 以下の輝度に落とす下敷き */ background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.74) 46%,rgba(0,0,0,.93) 100%); } .feature .cap .en{margin:0 0 8px} .feature .cap .ja{margin:0} /* 【景表法】イメージ素材（Unsplash）に添える注記。 **写真に隣接して置く。小さくしない・消さない・sr-only にしない。** 実店舗写真には付けない（事実と食い違うため） */ .imgnote{ position:absolute;right:10px;bottom:10px;z-index:3;margin:0; font-size:.82rem;line-height:1.5;letter-spacing:.02em; color:#fff;background:rgba(0,0,0,.72);padding:5px 10px; } @supports (backdrop-filter:blur(4px)){.imgnote{backdrop-filter:blur(4px)}} /* 遊びのカード（BUCKS の Darts / Karaoke / Shisha） */ .card{margin:0} .card .shot{position:relative;overflow:hidden;background:var(--panel)} .card .shot img{width:100%;height:auto} .card h3{margin:20px 0 8px} .card h3 .en{display:block;font-size:1.5rem} .card h3 .ja{display:block;font-size:1.05rem;margin-top:4px} /* **子セレクタにしてあることに意味がある。** `.card p` にすると .card .shot の中の .imgnote（＝写真の上に乗る p）まで巻き込み、 詳細度で .imgnote{color:#fff} に勝ってしまう。実測で 「※写真はイメージです」が --muted に落ち、写真の上で 4.5:1 を割った */ .card>p{margin:0;color:var(--muted);font-size:.96rem} /* 断り書き（Road の「まだ掲載していない項目があります」） */ .notice{border:1px solid var(--line);padding:26px 24px} .notice h2{margin:0 0 12px;font-size:1.06rem;font-weight:700;letter-spacing:.06em;color:var(--cream)} .notice p{margin:0;color:var(--muted);font-size:.96rem} .notice strong{color:var(--ink);font-weight:700} /* 店舗情報。狭い画面では横スクロールさせず、行を積む */ .info{width:100%;border-collapse:collapse;font-size:.96rem} .info th,.info td{text-align:left;vertical-align:top;padding:16px 0;border-bottom:1px solid var(--line)} .info th{width:9.5em;font-weight:400;letter-spacing:.1em;color:var(--gold);white-space:nowrap} .info td{color:var(--ink)} .info .tbd{color:var(--muted)} /* 表の中のリンク（電話番号・Instagram）は**指で押す対象**なので 44px を確保する。 第6版・2026-09-07 の実測では 107.6×16 / 119.8×15.5 しかなく、 スマホで隣の行を誤爆する大きさだった。**文字を大きくするのではなく、 当たり判定（行の高さ）だけを広げる**（表の字面は変えない）。 幅は電話番号も @road_fukuoka_ も 100px 以上あるので高さだけでよい。 */ .info td a{display:inline-flex;align-items:center;min-height:44px} @media (max-width:559.98px){ .info th,.info td{display:block;width:auto;border-bottom:0;padding:0} .info th{padding-top:18px} .info td{padding:4px 0 18px;border-bottom:1px solid var(--line)} } .linklist{list-style:none;margin:0;padding:0;display:grid;gap:14px} .linklist a{ display:inline-flex;align-items:center;min-height:48px; color:var(--cream);text-decoration:none;letter-spacing:.08em; border-bottom:1px solid var(--line); } .linklist a:hover{color:var(--gold);border-color:var(--gold)} /* ========================================================================== 5. フッター ========================================================================== */ /* 第35版（2026-09-13）── 「コンパクト」ではなく「整理」する -------------------------------------------------------------------------- 第34版は「390px で 180px 以下」という**高さの数値目標**を立てて詰めた。 172px まで縮んだが、CEO の評価は 「コンパクトにするというより整理して。窮屈になっただけですね、これでは」。 数値目標を置いたせいで、行数を減らす手段（区切り文字での連結・ 性質の違うものの同居）ばかりを選んでいた。**高さは目的ではない。** ■ 第34版で作ってしまった読みにくさ（本番 v4.13.0 の実測） ① 店名（identity）と SNS（導線）を同じ行に同居させた。 320px では折り返して「Instagram ／ 店名 ／ TikTok」の順に並び、 **店名が SNS に挟まれて読めなくなっていた**（実測3行） ② 電話と営業時間を「／」で連結した ③ © と社名と SouWorks クレジットを「/」「／」で1行に畳み、 390px で入り切らず**区切り文字だけが行末に取り残された** ④ 6行が等間隔でべったり並び、情報のまとまりが読み取れない ■ 第35版の整理の原則（★高さの下限は課さない） ① 性質の違うものを同じ行に並べない（店名／連絡先／導線／権利表記） ② 区切り文字で数珠つなぎにしない。別の情報は別の行にする ③ 折り返すなら意味のまとまりの区切りで折り返す（.nw の nowrap）。 区切り文字が行末に取り残される状態を作らない ④ **まとまりの中は行間を詰め（1.55〜1.6）、まとまり同士は余白で離す（14〜24px）** ⑤ 文字サイズは第34版から1pxも変えない（住所 15.04px ／ .ft-meta 12.8px）。 小さくして詰め込むことはしない ■ 第36版（2026-09-13）── まとまり間の余白**だけ**を詰める（構造は第35版のまま） 第35版はまとまり同士を離しすぎ、まとまり間が 20.6 / 29.6 / 31.7 / 25.5px （実測・390px）になっていた。CEO「今度は余白が大きすぎます。Instagram と 系列店 が単独行で、その上下に 40px 級の余白が入っている」。 ★ 犯人は margin ではなく **SNS リンクの箱（46px）の中の死に余白**。 文字の高さは約 20px なので上下に 13px ずつ余白が入り、margin に上乗せされる。 スマホは箱を 28px に下げ、当たり判定は ::after（48px）で確保する。 第34版は箱を 24px まで潰して窮屈になったが、第36版は **まとまり間を 18〜20px 確保したうえで**箱だけ下げるので窮屈にならない。 ★ 系列店は「SNS と権利表記の間に詰めて置く」。© とは別の要素のままだが、 上下を大きな余白で挟まない（下側は見た目で約 12px）。 ★ 構造・行の分け方・文字サイズ・行間（1.55/1.6）は第35版から1つも変えない。 ■ まとまりの構成（スマホ・PC 共通） [店名] → [〒＋住所／建物名／TEL／営業時間] → [SNS] →（Roadのみ [系列店]）→ [© 社名／SouWorks クレジット] ★ Road の「系列店：Cafe & BAR BUCKS」は営業上の関係であって権利表記ではない。 © と同じまとまりに混ぜると権利者の範囲が読めなくなるので .ft-affil に分ける。 -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 第37版（2026-09-13）── PCは2段組で右側を使う／スマホは「省略」する -------------------------------------------------------------------------- CEO指示（3件） ① Road のフッターと店舗情報のボタンを BUCKS にそろえる（HTML側） TEL ラベル／21:00〜LAST（定休日なし）／「電話する」／「店内をもっと見る」 ② 「あと右側も使用してください　これはPCで見るときです」 1280px で中身の幅が 1120px あるのに全要素を左に縦積みしていて 右半分が空白だった。→ 左＝店舗情報・右＝導線の2段組にする。 ③ 「スマホで見る時はもう少し省略していいです」 「**コンパクトではなく省略です**」 ★ 第34版の失敗（文字と余白を詰めて窮屈にした）を繰り返さない。 詰めるのではなく **項目そのものを出さない**。余白は詰めない。 ■ 省略するもの（390px 以下だけ。391px 以上では1文字も減らさない） ・郵便番号 〒810-0041（市区町村から書けば郵便は届く） ・都道府県 福岡県（第34版から継続） ・Road の「系列店：Cafe & BAR BUCKS」（PC・タブレットには残す） ■ 省略しないもの 店名／番地・建物名・階／電話番号／営業時間（定休日なし）／SNS／©／ SouWorks クレジット ★ サイト内リンク4項目は第33版から右上のハンバーガーとの重複で省いている。 ■ 2段組の骨格（768px 以上） ┌ .ft-info ─────────────┬ .ft-links ────────┐ │ 店名 / 住所 / TEL / 営業時間 │ トップ … アクセス │ │（Road は系列店） │ Instagram / TikTok │ └───────────────────────┴──────────────────┘ .ft-meta（© 左 ／ SouWorks クレジット 右）＝ 横幅いっぱい ★ 切り替えを 768px にしたのは実測による。768px の内寸 728px で 左 387px ／ 余白 48px ／ 右 293px に割れ、横スクロールは 0px。 左の住所は「〒＋町名」と「建物名」の**まとまりの境目**で2行に折り返す （まとまりの内部では切れない）。1024px 以上では1行に収まる。 1024px を境にすると 768〜1023px が縦積みのまま残り、そこだけ 導線と SNS が縦に並んで**まとまり間が 31px**になる（下の★参照）ので、 同じ見え方をタブレット横でも作るために 768px にそろえた。 ★ 導線を CEO案の2×2で積まないのは、リンクの箱が 44px（タップ基準）なので 縦に積むと**まとまりの中の行間が 32px 級になり、まとまり同士の余白 （18〜20px）より広くなる**ため。1行に並べれば導線の中は 6px。 導線と SNS の間が 31px あるのも同じ理由（縦に積んだリンク同士は 中心間 45px 未満にできない＝ink 間は 31px 以上になる）。 ■ 第35〜36版から引き継ぐ整理の原則（変えない） ① 性質の違うものを同じ行に並べない ② 区切り文字で数珠つなぎにしない ③ 意味のまとまりの内部で折り返さない（.nw） ④ まとまりの中は詰め、 まとまり同士は 18〜20px 離す ⑤ 文字サイズは第34版から1pxも変えない （住所 15.04px ／ .ft-meta 12.8px ／ 導線 14.08px） -------------------------------------------------------------------------- */ .ft{border-top:1px solid var(--line);padding:30px 0 20px} /* 既定は縦積み（767.98px 以下）。2段組は 768px 以上の @media でだけ効かせる */ .ft-cols{display:block} /* 店名は .en.md（clamp 24〜36px）の欧文ロックアップ。本文ではないので フッターだけ 21.6〜28px に落とす（.en.md と同じ詳細度で、後に書くので勝つ）。 margin-bottom は「店名」と「連絡先」のまとまりを離すための余白 */ .ft .en{font-size:clamp(1.35rem,2.6vw,1.75rem);margin:0 0 14px} /* 連絡先はひとつのまとまり。**中の行間は詰める**（まとまり同士は余白で離す） */ .ft address{font-style:normal;color:var(--muted);font-size:.94rem;line-height:1.6;margin:0} /* 意味のまとまりの内部では折り返さない。 〒＋住所 ／ 建物名＋部屋番号 ／ TEL＋番号 ／ 営業時間＋定休日 を それぞれ nowrap で括り、**まとまりの区切りだけ**が折り返し位置になる。 ★ nowrap を使うので 320px の横スクロールが最も壊れやすい。実測で0pxを確認している */ .ft .nw{white-space:nowrap} /* 住所の中の電話リンクの当たり判定 47px。::after のオーバーレイなので 行ボックス（＝フッターの高さ）を押し広げない。上下に 23.5px ずつはみ出すが、 重なるのは住所の他の行＝リンクではないので、誰のタップも奪わない。 最も近いリンク（SNS）とは中心間で 58px 離れており、SNS の 48px の オーバーレイとも重ならない（47/2 + 48/2 = 47.5px < 58px） */ .ft address a{position:relative;display:inline-block;min-width:44px} .ft address a::after{ content:"";position:absolute;left:0;right:0;top:50%; transform:translateY(-50%);height:47px; /* 44px ちょうどだと 1px 走査の 丸めで 44/45 が揺れる。3px 足して**どの幅でも必ず 46px 以上**にする （第37版でフッターの縦位置が変わり、46px だと 46/47 で揺れたため +1px） */ } /* 導線（サイト内リンク）と SNS は**別のまとまり**。第36版までは1つの .ft-nav に 混ぜていたが、PCの右カラムで「ページ」と「SNS」を分けて置くために分割した。 箱の作り・文字サイズ・当たり判定は第36版と同一。 ★ padding-right は第34版以前からの 10px に 1px 足して 11px にしてある。 2段組にすると右カラムの左端が小数位置に載り、1px 走査で実効幅が 80→79px に揺れたため。**削らない**（削ると当たり判定がそのまま縮む）。 */ .ft-nav,.ft-sns{display:flex;flex-wrap:wrap;gap:6px;margin:1px 0 0;position:relative;z-index:1} .ft-nav a{ /* 45px ＝ 44px の基準に 1px の余裕。第36版までは grid ではなく flex の stretch で箱が整数位置に載り実効 45px だったので、2段組にしても **実効値が 45px を下回らない**ようにここで 1px 積んでおく */ display:inline-flex;align-items:center;min-height:45px;padding:0 11px 0 0; font-size:.88rem;color:var(--muted);text-decoration:none;letter-spacing:.06em; /* 「店内」は2文字しかなく実測 39.9px で 44px を割っていた。 **min-width で箱だけ広げる**（padding を左右対称にすると フッターナビの左端がラップから内側にずれて見た目が動くため） */ min-width:44px; } .ft-nav a:hover{color:var(--cream)} /* -------------------------------------------------------------------------- 第38版（2026-09-13）── フッターの SNS をサービスアイコンにする -------------------------------------------------------------------------- CEO指示「Instagram / TikTok はサービスアイコンを使用して下さい」。 ★ ヒーローの `.hsns`（46×46・1px の囲み枠・地色 6%）と**同じ寸法・同じ色**にした。 ヒーローに border-radius は無い（実測 0px）ので、こちらにも付けない。 「ヒーローと同じ見た目にそろえる」がCEO指示なので、**丸めない**。 ■ 文字リンク（`.ft-nav a`）とは別の箱にした理由 文字リンクは「高さ 45px・padding-right 11px・min-width 44px」で当たり判定を 作っていたが、中身が 24px のアイコンになると横幅が文字幅に依存しなくなる。 46×46 の**箱そのもの**をタップ領域にするので、::after のオーバーレイが要らない。 ★ オーバーレイを使わない＝**隣のリンクと当たり判定を食い合う事故が構造的に起きない** （第19版・第13版で実際に起きている）。gap 10px は見た目の隙間であって、 当たり判定は箱の内側で完結する。 ■ Instagram は公式グリフPNG。**形状・比率・色を改変しない**（Metaのガイドライン） ので filter / transform / border-radius / mask を一切掛けない。 したがって :hover / :active の色変化にも追従しない。 押したことは**枠と地色の明るさ**だけで返す（ヒーローと同じ扱い）。 ■ TikTok の SVG は fill:currentColor。親 `.fsns` の color に追従する。 -------------------------------------------------------------------------- */ .ft-sns{gap:10px} .fsns{ display:inline-flex;align-items:center;justify-content:center; box-sizing:border-box; /* ★ 実寸。44px を下回らせないこと（elementFromPoint の実測で 46×46） */ width:46px;height:46px; padding:0; border:1px solid rgba(255,235,214,.58); /* 非テキスト3:1を満たす濃さ。ヒーローと同値 */ background:rgba(255,235,214,.06); color:var(--cream); text-decoration:none; transition:color .2s ease,background-color .2s ease,border-color .2s ease; } .fsns-ig{display:block;width:24px;height:24px;flex:0 0 auto} .fsns-tt{display:block;flex:0 0 auto} /* 反応は hover に依存しない。スマホには hover が無いので :active / :focus-visible でも点く */ .fsns:active{color:var(--gold-hi);background:rgba(255,235,214,.18);border-color:rgba(255,235,214,.92)} .fsns:focus-visible{color:var(--gold-hi);background:rgba(255,235,214,.18);border-color:rgba(255,235,214,.92)} @media (hover:hover){ .fsns:hover{color:var(--gold-hi);background:rgba(255,235,214,.16);border-color:rgba(255,235,214,.85)} } .fsns:has(.fsns-ig):active, .fsns:has(.fsns-ig):focus-visible{background:rgba(255,235,214,.22)} /* Road の「系列店：Cafe & BAR BUCKS」。© とは別の情報なので独立したまとまり。 第37版で .ft-info（店舗情報）の中へ移した。系列関係は店舗の属性であって 導線でも権利表記でもないため、住所の直後が読み上げ順としても自然 */ .ft-affil{margin:8px 0 0;font-size:.8rem;color:var(--muted);letter-spacing:.06em;line-height:1.6} /* 権利表記のまとまり。© 行と SouWorks クレジットは**必ず別の要素**。 区切り文字で連結すると、入り切らないときに区切りだけが行末に残る。 既定は縦（column）。PC では下の @media で横に開き、© を左・クレジットを右に振る */ .ft-meta{ display:flex;flex-direction:column;align-items:flex-start;gap:0; margin:14px 0 0;font-size:.8rem;color:var(--muted);letter-spacing:.06em;line-height:1.6; } .ft-meta .cred{color:var(--gold)} /* -------------------------------------------------------------------------- PC・タブレット横（768px 以上）── 左＝店舗情報／右＝導線の2段組。最下段に権利表記 -------------------------------------------------------------------------- ★ .ft-links を justify-self:end で右端に寄せる。リンクの箱には padding-right:11px（当たり判定）が入っているので、margin-right:-11px で **文字の右端**を .wrap の内側の右端にそろえる。負のマージンは .wrap の 20px の padding の中に収まるので横スクロールは発生しない（実測0px）。 ★ SNS の margin-top を 0 にしているのは、導線のリンクの箱（45px）の中に 上下 13px ずつの余白が既にあるため（実測のまとまり間 31px）。 margin だけを見て「詰まっている」と判断しない。 -------------------------------------------------------------------------- */ @media (min-width:768px){ .ft-cols{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto); column-gap:48px;align-items:start; } .ft-links{justify-self:end;margin-right:-11px} /* 第37版は margin-top:0（導線リンクの箱 45px の中に上下 13px ずつ死に余白があり、 それだけでまとまり間 31px になっていた）。第38版はアイコンの箱に**枠線が見える**ので、 死に余白は「まとまりの内側」であって、まとまり間には見えない。 導線の**文字の下端**からチップの**枠線の上端**までを、まとまり間 18〜20px の 原則に合わせる。導線の箱の下端から 3px 離すと、箱の中の死に余白 16.2px と合わせて **実測 19.2px**（第37版は margin-top:0 で 31.0px だった）。 ★ .ft-links の margin-right:-11px は導線の文字の右端を .wrap の内側にそろえるためのもの。 SNS のチップは列の**左端**に並ぶ（第37版の文字リンクと同じ位置）ので、 -11px を打ち消す必要はない（実測: 1280px でチップ右端 989px ／ .wrap 内側の右端 1180px）。 */ .ft-sns{margin-top:3px} .ft-meta{ flex-direction:row;justify-content:space-between;align-items:baseline; gap:16px;width:100%;margin-top:16px; } } /* -------------------------------------------------------------------------- スマホ（767.98px 以下）── まとまりの分け方は PC と同じ。余白だけ少し詰める -------------------------------------------------------------------------- ★ サイト内ナビ4項目（トップ／メニュー・料金／店内／アクセス）はここでは出さない。 右上のハンバーガー（.nh-nav）に**まったく同じ4項目**があり重複のため。 第37版で導線と SNS を別の