/* サイト共通のスタイル。

   もとは index.html の <style> に直接書かれていたもの。ページ分割にあたって
   全ページで同じものを使うため、このファイルへ切り出した。

   ※ 読み込みは必ず**いちばん最後**にすること。
      もとの <style> が外部CSSより後ろにあったため、順序を変えると
      打ち消し合いの結果が変わってしまう。 */

/* ========================================================================
   パソコン幅：**設計幅 1440px で組み、窓の幅に合わせてページごと拡大縮小する**
   （2026-08-10・PM ご要望）
   ========================================================================

   ⛔ **なぜ要るか**（PM 談 2026-08-10）
      > 実際 iMac の画面で決めた後に、14インチの MacBook で見たら決めた位置よりも
      > 文字とお知らせ枠が上の方に配置されていて、設定の仕方が悪かったのかと思って、
      > やり直す羽目になります。……パソコンで見る分には画面サイズに関係なく
      > 同じバランスのレイアウトで表示されるように

      それまでの作り＝ **窓が広がると「枠だけ」が広がり、中身は同じ大きさのまま。**
      文字は幅 1390px で頭打ち（ロゴ `clamp(136px, 20vw, 278px)` など）になるのに、
      写真と1枚目の高さは伸び続けるので、**画面が大きいほど文字が写真の下の方に小さく浮く。**
      実測（2026-08-10・本番）＝ ESQUINA ロゴの位置は 1枚目の枠の
      **11.7%（13型 1366×656）〜 44.9%（27型 2560×1328）＝ 33.2ポイント**も動いていた。
      ＝ **どの画面で調整値を決めればよいのか決まらない**（PM の困りごとの本体）。

   ⭐ **答え＝設計幅 1440px の1枚の絵として組み、窓に合わせて丸ごと拡大縮小する。**
      ＝ PM の保存値（px）は「設計上の px」になり、**どの画面でも同じ比率**で出る。
      実測（2026-08-10・5ページ・6つの窓幅・2994要素）＝
        位置・大きさ・文字の食い違いの最大値 **303.8% → 1.7%**（窓幅に対する割合）
        ESQUINA ロゴの位置のばらつき **33.2ポイント → 0.9ポイント**

   ⛔ **スマホ（640px 以下）は1pxも変えない。**この決まりは 901px 以上だけ。
      💥 実測で SE2（375×622）の数値が変更前と完全一致することを確認済み。

   💥 **`100vw` ではなく `100cqw` を使う。**
      `100vw` は**縦スクロールバーの幅（15px）を含む**ので、その分だけ横にはみ出す。
      `100cqw`（`html` を container にしたときの内側の幅）はスクロールバーを含まない
      ＝ 実測で**横のはみ出し 0**（1440 / 1728 / 2560 の3幅で確認・2026-08-10）。
      ⚠️ `--tf-zoom` は `body` に置く（`:root` に置くと、自分自身の container を参照できない）。

   ⛔ **窓の「高さ」に依存した指定は、この中では使えない。**
      使うと、拡大率のぶんだけ縦だけが伸びて比率が崩れる。
      ⭐ 代わりに **設計上の画布の高さ `--tf-canvas-h`（788px）** を基準にする
         ＝ 1440×788（13型 MacBook Air・Chrome 最大化）＝ **いまの見え方をそのまま正とした値**。
      ⚠️ どうしても本物の画面の高さが要る所（スクロールに追従する矢印など）は
         **`calc(<n>svh / var(--tf-zoom, 1))`** と書く（拡大率で割り戻す）。

   ⛔ **管理画面（/admin）そのものには効かない**＝ admin.html は site.css を読み込んでいない。
      ⭐ プレビューの `<iframe>` はお客様のページを読むので、そちらには効く（＝見たままが正）。

   🔗 正本＝`docs/` の 2026-08-10 の記録。守るのは `tools/check-layout-uniform.js`。 */
:root {
  /* 設計幅。⛔ ここを変えると全パソコン画面の見え方が変わる（PM 決定 2026-08-10＝1440px） */
  --tf-design-w: 1440px;
  /* 設計上の画布の高さ。⚠️ 「窓の高さ」ではない＝1440px のときの基準の高さ */
  --tf-canvas-h: 788px;
}

/* 💥 **`html` にも背景色を置く**（2026-08-10・PM 指摘「フッターの下が白い」）。
      ⛔ **`container-type` を付けると、`body` の背景色がページ全体（キャンバス）へ
         伝わらなくなる。**CSS の既定では `html` が透明なら `body` の背景が画面全体を塗るが、
         `html` を container にするとその伝播が止まり、**body の箱の外が白いまま**になる。
      💥 実測（最小の再現・1440×1209）＝ `container-type` あり: 画面の下端 **rgb(255,255,255)**
         ／無し: rgb(10,14,26)。⭐ `html` に色を置くと直る。
      ⚠️ 見えるのは「本文が画面より短いページ」「行き過ぎスクロール（ラバーバンド）」
         「ページ全体のスクリーンショット」＝ **窓によって出たり出なかったりする**ので気づきにくい。
      ⛔ 色は `--bg-dark`（`css/style.css` の正本）から取る＝二箇所に持たない。
      🔗 正本＝`docs/MANUAL_設計幅1440の仕組み_2026-08-10.md` 2章。 */
html {
  background-color: var(--bg-dark, #0a0e1a);
}

@media (min-width: 901px) {
  html {
    /* 💥 これが無いと `100cqw` が使えない（スクロールバー分だけ横にはみ出す） */
    container-type: inline-size;
  }

  body {
    /* 下限 0.85＝1224px より狭い窓ではこれ以上小さくしない（文字が読めなくなるため）
       上限 1.8 ＝2592px より広い窓ではこれ以上大きくしない */
    --tf-zoom: clamp(0.85, calc(100cqw / var(--tf-design-w)), 1.8);
    zoom: var(--tf-zoom);
  }
}

/* --------------------- もとから index.html にあった指定 --------------------- */

.section-title {
  text-align: center;
  margin-bottom: 60px;
}

.section-title .jp {
  display: block;
  font-size: 1.1rem;
  color: #F5A623;
  margin-bottom: 5px;
  letter-spacing: 0.2em;
  font-weight: 600;
}

.section-title .en {
  display: block;
  font-size: 3.2rem;
  font-family: var(--font-serif);
  color: #fff;
  line-height: 1.1;
}

.hero-content h1,
.hero-content p {
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.8);
}

.about-content {
  display: flex;
  gap: 50px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.about-image-wrapper {
  flex: 1;
}

.about-image-wrapper img {
  width: 100%;
  border-radius: 10px;
}

/* ⭐ **色は囲みに置く**（2026-08-07・段3）。
      💥 `.about-text p` に `color` を書いていたため、**文字の色のつまみが効かなかった**
         （つまみは囲み `[data-site-text="about-body"]` にクラスを付けるので、
           中の `<p>` が自分の色を持っていると**受け継ぎが負ける**）。実測で発覚。
      ⚠️ 見え方は変わらない（`<p>` は囲みから #ccc を受け継ぐ）。 */
.about-text {
  flex: 1;
  color: #ccc;
}

.about-text p {
  margin-bottom: 20px;
  line-height: 2.2;
  text-align: justify;
}

.stores-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-bottom: 80px;
}

.store-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(245, 166, 35, 0.1);
}

/* 管理画面で写真を拡大して見せる設定にすると、img が枠より大きくなる。
   はみ出した分は必ずここで切る（付けないと、下の店名の上に写真が乗る） */
.store-img-box {
  overflow: hidden;
}

.store-img-box img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.store-card:hover .store-img-box img {
  transform: scale(1.05);
}

.store-body {
  padding: 30px;
  flex-grow: 1;
}

.store-name {
  font-size: 1.6rem;
  color: #F5A623;
  margin-bottom: 15px;
  font-family: var(--font-serif);
  border-bottom: 1px solid rgba(245, 166, 35, 0.2);
  padding-bottom: 10px;
}

.store-name small {
  display: block;
  font-size: 0.8rem;
  color: #888;
  margin-top: 5px;
}

.store-description {
  font-size: 0.95rem;
  line-height: 1.9;
  color: #ccc;
  margin-bottom: 25px;
  text-align: justify;
}

.store-info {
  font-size: 0.88rem;
  line-height: 1.7;
}

.info-row {
  display: flex;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 5px;
}

.info-label {
  color: #F5A623;
  width: 110px;
  flex-shrink: 0;
  font-weight: 600;
}

/* ⛔ **色の !important は、欄そのものからは外す**（2026-08-08・fable 監査で発覚）。
      💥 店舗ページは text-format.css → **site.css の順**に読むので、
         同じ詳細度の !important どうしでは**こちらが必ず勝ち**、
         「情報の中身」（sd-value）の文字色のつまみが**出るのに何も起きなかった**（★9）。
      ⭐ 直し方は 2026-08-07 の text-align と同じ＝ **!important を外すだけ**
         （:where() で包むのはやり過ぎ＝既定そのものが消える）。
      ⚠️ リンク（.info-val a）は既定のリンク色に戻らないよう !important のまま。
         [MAP] と電話番号は、そのうえで各自がアンバーを当てている（下の .map-link）。 */
.info-val {
  color: #eee;
  text-decoration: none !important;
}

.info-val a {
  color: #eee !important;
  text-decoration: none !important;
}

/* 電話番号の下に出す補足（例：寿やの「地震で繋がりません」）。
   ⚠️ 中身が空のときは、行ごと出ないようにする。管理画面で「この補足を消す」を
      選んだときや、補足を置いていない店で、余計な余白が出ないため。 */
.info-note {
  display: block;
}

.info-note:empty {
  display: none;
}

.map-link {
  color: #F5A623 !important;
  text-decoration: underline !important;
  margin-left: 8px;
  font-weight: 600;
}

/* 住所の [MAP] は、上の指定だけでは `.info-val a`（白）に負けて白いままだった。
   詳細度が同じでも「要素をひとつ多く指す」ほうが強いため、こう書いて効かせる。
   （!important どうしの勝負は、詳細度で決まる） */
.info-val a.map-link {
  color: #F5A623 !important;
}

.menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
  padding: 10px;
  margin-left: auto;
}

.menu-btn span {
  display: block;
  width: 28px;
  height: 2px;
  background-color: #F5A623;
  margin: 6px 0;
  transition: 0.3s;
}

/* ------------------------- ページ分割で足した指定 ------------------------- */

/* いま開いているページを、ヘッダーとフッターで示す */
.nav-menu a[aria-current="page"] span:first-child,
.footer-nav a[aria-current="page"] {
  color: #F5A623 !important;
}

/* ヘッダーのメニューは「日本語」と「英字」の2段組み。そのあいだの空き（宿題D・2026-08-05）。
   ⚠️ 元は 0px（2つの span が縦に並んでいるだけ）。足し引きは --tf-pad-t。
   💥 **`.nav-menu .en` では当たらない。**HTML の span には class が無く、
      `display:block; font-size:0.65rem` などが**インラインで**書いてある
      （`css/style.css` の `.nav-menu .en` は、いまどこにも当たっていない）。
      ⭐ 当てる相手は「2つ目の span」＝ `a span:last-child`。
   🔗 場所の正本は `_worker.js` の LAYOUT_PARTS（nav-line）。 */
.nav-menu a span:last-child {
  margin-top: calc(var(--tf-pad-t, var(--tf-pad-t-base, 0px)));
}

/* トップ以外のページの見出し部分。
   ヘッダーが固定（高さ70px）で重なるため、その分を空ける。
   🔗 **上下の余白は管理画面から動かせる**（宿題D・2026-08-05）。
      元の値はここ。足し引きは --tf-pad-t / --tf-pad-b（正本＝_worker.js の LAYOUT_PARTS）。
   💥 **★25 下の @media (max-width: 900px) が padding をまるごと書き直している。**
      あちらにも同じ式が入っている。**片方だけ直さないこと**（900px 以下でつまみが黙って効かなくなる）。 */
.page-head {
  padding: calc(var(--tf-pad-t, var(--tf-pad-t-base, 100px))) 0 0;
  text-align: center;
}

.page-head .section-title {
  margin-bottom: calc(var(--tf-pad-b, var(--tf-pad-b-base, -10px)));
}

.page-head .page-lead {
  max-width: 760px;
  margin: 0 auto;
  line-height: 2;
  color: #ccc;
}

/* 店舗カードから、その店のページへの入口 */
.store-more {
  display: inline-block;
  margin-top: 20px;
  padding: 11px 22px;
  border: 1px solid rgba(245, 166, 35, 0.55);
  border-radius: 6px;
  color: #F5A623;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}

.store-more:hover {
  background: rgba(245, 166, 35, 0.12);
}

/* 画面が広いときだけ効かせる改行（狭い画面では自然に折り返させる） */
@media (max-width: 900px) {
  br.pc-only {
    display: none;
  }
}

/* --- トップページ：各ページへの入口 --- */

/* 🔗 下の余白は管理画面から動かせる（宿題E）。足し引きは --tf-pad-b。
   ⚠️ 上の余白（padding-top）は、このあと下の方で clamp に差し替えている（★25）。 */
.entrance-section {
  padding: 100px 0 calc(var(--tf-pad-b, var(--tf-pad-b-base, 40px)));
  background: #0a0e1a;
}

/* ⚠️ `.entrance-lead`（トップの導入文）は 2026-08-03 のトップ刷新で**無くなった**。
      欄も HTML の印も無いのに CSS だけが 7 か所に残っていたので、2026-08-07 に消した
      （残っていると「一覧に載っているのに存在しない」＝統一の作業で必ず混乱の元になる）。
      💥 消す前に、配信するすべての HTML と js に `entrance-lead` が1つも無いことを確認済み。 */

.entrances {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.entrance {
  display: block;
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid rgba(245, 166, 35, 0.15);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
  color: inherit;
}

.entrance-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.entrance:hover .entrance-img {
  transform: scale(1.05);
}

/* ⚠️ 中の余白は「上・左右・下」。上は PM 指示で 1/3 ほど減らした（16→11px） */
.entrance-body {
  padding: 11px 22px 16px;
}

/* ⭐ **日本語と英字を横並びにした**（PM ご要望 2026-08-10）。
      > サムネールの英文字をお知らせ枠と同じように横並びにして下の部分を詰めて
      ＝ お知らせ枠の見出し（「お知らせ NEWS」）と同じ形。2行が1行になるぶん、カードの下が締まる。
   ⛔ **`flex` で並べる**（`inline` にしない）＝ 上下の余白のつまみ（mt / mb）を生かすため。
      inline の要素には上下の余白が効かない（＝つまみが黙って死ぬ・★9）。 */
.entrance-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  /* ⚠️ 本文の行間（1.8）を継ぐと見出し1行で 37px も使う。見出しは詰める */
  line-height: 1.35;
  color: #F5A623;
  margin: 0;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 10px;                 /* お知らせ枠の英字と同じ 10px */
  flex-wrap: wrap;           /* 万一入り切らないときは折り返す（切らない） */
}

/* ⛔ **文字の位置のつまみは「2つまとめて」動かす**（2026-08-10）。
      💥 横並びにすると、日本語も英字も**中身の幅ぴったりの箱**になるので、
         各自に `text-align` を当てても**何も起きない**（＝つまみが黙って死ぬ・★9）。
      ⭐ 並べる側（この `flex`）が寄せ方を引き受ける。本番の保存は 📱 が `center`。
   ⚠️ **クラス名（`.tf-*` / `.tf-sp-*`）をここに写している**＝ 本来は二箇所に持ちたくない。
      正本は `js/text-format.js` の `LOOK_APPLY`（`cls: 'tf-'` / `clsSp: 'tf-sp-'`）と
      `css/text-format.css`。⛔ **あちらを変えたらここも直す**（`grep tf-sp-center` で全件出る）。 */
.entrance-title:has(> .tf-left) { justify-content: flex-start; }
.entrance-title:has(> .tf-center) { justify-content: center; }
.entrance-title:has(> .tf-right) { justify-content: flex-end; }

@media (max-width: 640px) {
  .entrance-title:has(> .tf-sp-left) { justify-content: flex-start; }
  .entrance-title:has(> .tf-sp-center) { justify-content: center; }
  .entrance-title:has(> .tf-sp-right) { justify-content: flex-end; }
}

/* ⚠️ `display: block` と `margin-top: 3px` は外した（2026-08-10・横並びにしたため）。
      🔗 上の余白の元の値（`--tf-mt-base`）も 3px → 0px にそろえてある（`css/text-look.css`）。 */
.entrance-title .en {
  font-size: 0.68rem;
  color: #888;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-weight: 400;
}

/* ⛔ **日本語以外のページでは、この英字が「見出しそのもの」になる**（PM 指摘 2026-08-07）。
      💥 日本語版は「私たちについて（アンバー 20.8px）＋ ABOUT（グレー 10.88px の添え字）」だが、
         英語版は**日本語の見出しが取り除かれ、添え字だけが残る**。
         そのため **ABOUT が 10.88px のグレーのまま**＝ 見出しに見えない状態だった（実測）。
      ⭐ 役割が変わるので、見た目も見出しの役割に合わせる（色・書体・字間・大文字化を戻す）。
      ⚠️ ページ見出し（`.section-title`）と店名は、**英字が元から主役**なので直さない
         （日本語版と英語版の見出しを機械で突き合わせて、壊れているのはこの3枚だけと確認した）。
      🔗 大きさ（元の値）は `css/text-look.css` 側。⛔ **つまみは言語で分けない**
         （PM 指示 2026-08-06）＝ここで変えるのは「元の値」だけ。
      ⭐ `:not([lang="ja"])` にしてあるので、韓国語・中国語を足しても同じように直る。 */
html:not([lang="ja"]) .entrance-title .en {
  color: #F5A623;
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-top: 0;
  /* ⚠️ 英語ページは**日本語の見出しが取り除かれ、これ1つだけ**になる（実測 2026-08-10）。
        横並びの隙間（gap）が残ると**見出しが 10px 右へずれる**ので、ここで消す。 */
  margin-left: 0;
}

.entrance-text {
  font-size: 0.9rem;
  line-height: 1.9;
  color: #ccc;
  margin: 14px 0 0;
}

.entrance-more {
  display: inline-block;
  margin-top: 9px;
  font-size: 0.85rem;
  color: #F5A623;
  font-weight: 600;
}

/* --------------------------- スマートフォン --------------------------- */

@media (max-width: 900px) {

  /* スマホ：文字の位置を50%から60%に下げました */
  .hero-content {
    top: 60% !important;
  }

  .hero-title {
    font-size: 2.8rem !important;
  }

  .hero-subtitle {
    font-size: 0.95rem !important;
    margin: 15px 0 !important;
  }

  .about-content {
    display: block !important;
    padding: 0 15px;
  }

  .about-image-wrapper {
    width: 100% !important;
    margin-bottom: 30px;
  }

  .about-text {
    width: 100% !important;
    padding: 0 !important;
  }

  .about-text p {
    /* 💥 **ここに `!important` を付けない**（2026-08-06 是正・★25）。
          `css/text-format.css` の `.tf-sp-left / .tf-sp-center / .tf-sp-right` と
          **詳細度が同じ**なので、`!important` を付けるとあちらに必ず勝ってしまい、
          管理画面の「文字の位置」がスマートフォンで**黙って効かなくなる**
          （`node tools/check-knobs.js` に文字の位置の検査を足して発覚）。
       ⭐ 付けなければ：上の `.about-text p { text-align: justify }` には**あとに書いてある分**で勝ち、
          つまみ（`!important` 付き）には負ける＝**狙いどおりの順番**になる。
       ⛔ 詳細度を下げる（`:where()`）のもやり過ぎ。それだと justify に負けて左寄せが消える（実測）。 */
    text-align: left;
    font-size: 0.95rem;
    line-height: 2;
  }

  .stores-grid {
    grid-template-columns: 1fr;
    padding: 0 15px;
  }

  .menu-btn {
    display: block;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    /* 🔗 引き出しの幅は管理画面から動かせる（宿題D）。元の値はここ。足し引きは --tf-menu-w。
       ⚠️ 効くのはこの @media の中（900px 以下）だけ＝それより広い画面では横並びのまま。 */
    width: calc(var(--tf-menu-w, var(--tf-menu-w-base, 80%)));
    height: 100vh;
    background: rgba(10, 14, 26, 0.98);
    flex-direction: column;
    /* 中央寄せは下の auto マージンで行う。
       justify-content:center のままだと、店舗の一覧を入れて背が高くなったとき
       画面の小さい端末で上端が切れ、スクロールしても出せなくなる。 */
    justify-content: flex-start;
    align-items: center;
    /* 店舗の一覧が入って縦に伸びたぶん、項目の間隔を詰めた（もと50px）
       🔗 項目どうしの間隔は管理画面から動かせる（宿題D）。元の値はここ。足し引きは --tf-gap。
       💥 **`!important` を外さないこと。**`<ul class="nav-menu">` の HTML に
          `gap:25px` がインラインで書いてあり、インラインは CSS より強い。
          ⚠️ だから**この @media の中（900px 以下）でしか効かない**＝管理画面でもそう断っている。 */
    gap: calc(var(--tf-gap, var(--tf-gap-base, 30px))) !important;
    padding: 24px 0;
    box-sizing: border-box;
    overflow-y: auto;
    transition: 0.4s ease-in-out;
    z-index: 1000;
  }

  /* 入りきるときは中央、入りきらないときは上から並べてスクロールさせる */
  .nav-menu > li:first-child {
    margin-top: auto;
  }

  .nav-menu > li:last-child {
    margin-bottom: auto;
  }

  .nav-menu.active {
    right: 0;
  }

  .menu-btn.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-btn.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-btn.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* ページ分割で足したぶん */

  /* 🔗 ★25 上の `.page-head` と**同じ式**にしてあること（元の値だけが違う）。 */
  .page-head {
    padding: calc(var(--tf-pad-t, var(--tf-pad-t-base, 70px))) 0 0;
  }

  /* 🔗 ★25 上の `.entrance-section` と**同じ式**（元の値だけが違う）。 */
  .entrance-section {
    padding: 70px 0 calc(var(--tf-pad-b, var(--tf-pad-b-base, 10px)));
  }

  .entrances {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 15px;
  }
}

/* スタッフ用（管理画面）への入口。
   お客様の邪魔にならないよう、著作権表示の下に小さく置く。
   ※ URL を隠すことは防御にならない（誰でも /admin は開ける）。
      守っているのは ID・パスワードと、ログインの試行制限・ボット確認。 */
.footer-staff {
  margin-top: calc(var(--tf-pad-t, var(--tf-pad-t-base, 12px)));
}

.footer-staff a {
  color: #4d4d4d;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.footer-staff a:hover {
  color: #F5A623;
}

/* --------------------------- フッターの行き先 ---------------------------

   4項目を横一列に並べると、狭い画面では項目の途中で折り返してしまう
   （「私たちにつ／いて」のように割れる）。スマートフォンでは
   2項目ずつの2段に組み替える。

   ※ ul には HTML に直接 display:flex 等が書かれている（もとの作りのまま）。
      インラインの指定は CSS より強いため、ここは !important で上書きする。 */

@media (max-width: 640px) {
  .footer-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    max-width: 340px;
    margin-left: auto !important;
    margin-right: auto !important;
    /* ⭐ **項目どうしのすき間**（PM 指摘 2026-08-07）。元は 縦18px・横10px。
          💥 ここは `!important` かつ**あとに書いてある**ので、上の `.footer-nav` の式に必ず勝つ。
             ＝ **ここを足し引きにしないと、狭い画面ではつまみが黙って効かない**（★25）。
          ⚠️ 縦だけを動かす（横 10px は2列の幅に効くので触らない）。 */
    /* ⭐ **マイナスも効かせる**（PM ご要望 2026-09-19・端に張り付いていた）。
          `gap` はマイナスを取れない（0 で止まる）ので、**0 未満は 2行目以降の上の余白（負）で詰める**。
          つまみは1つ（--tf-gap）のまま＝ 0 以上は gap、0 未満は margin-top が受け持つ。 */
    gap: max(0px, calc(var(--tf-gap, var(--tf-gap-base, 4px)))) 10px !important;
  }

  .footer-nav li {
    text-align: center;
  }

  /* 2列の格子の「2行目以降」だけ＝ 行と行のすき間を負にできる（1行目と最終行の外側には効かない） */
  .footer-nav li:nth-child(n+3) {
    margin-top: min(0px, calc(var(--tf-gap, var(--tf-gap-base, 4px))));
  }

  /* 項目の途中では折り返さない */
  .footer-nav a {
    display: inline-block;
    white-space: nowrap;
  }
}

/* ------------------- ヘッダーの店舗メニュー ------------------- */
/* ヘッダーに6店舗を並べると窮屈になるため、「店舗紹介」の中にしまっている。
   PC   … マウスを載せる（キーボードなら選ぶ）と下に開く
   スマホ … ハンバーガーの中で「店舗紹介」の下にそのまま並べる
   ⚠️ 切り替えは 900px（ハンバーガーの出る幅と同じ）。640px ではない。 */

.nav-has-sub {
  position: relative;
}

.nav-sub-list a[aria-current="page"] {
  color: #F5A623 !important;
}

/* ---- PC（901px 以上） ---- */
@media (min-width: 901px) {

  /* 「店舗紹介」に、開くことが分かる印を付ける */
  .nav-has-sub > a > span:first-child::after {
    content: "▾";
    margin-left: 5px;
    font-size: 0.7em;
    color: #F5A623;
    vertical-align: middle;
  }

  .nav-sub {
    position: absolute;
    top: 100%;
    left: 50%;
    /* 上の余白は「橋」。ここが無いと、下へ動かす途中でマウスが外れて閉じてしまう */
    padding-top: 16px;
    transform: translateX(-50%) translateY(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  .nav-has-sub:hover .nav-sub,
  .nav-has-sub:focus-within .nav-sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .nav-sub-list {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    min-width: 200px;
    background: rgba(10, 14, 26, 0.98);
    border: 1px solid rgba(245, 166, 35, 0.35);
    border-radius: 4px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  }

  /* ⚠️ text-align は必ず指定する。指定しないと style.css の
     `.nav-menu a { text-align: center }` を継いで中央寄せになり、
     一覧として読みにくくなる（実際に中央寄せで出た） */
  .nav-sub-list a {
    display: block;
    padding: 7px 20px;
    color: #fff;
    font-size: 0.88rem;
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .nav-sub-list a:hover {
    background: rgba(245, 166, 35, 0.14);
    color: #F5A623;
  }

  .nav-sub-head {
    padding: 4px 20px 6px;
    font-size: 0.68rem;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-align: left;
    color: rgba(245, 166, 35, 0.75);
  }

  /* 地域の間に細い区切りを入れる（1つ目の見出しには付けない） */
  .nav-sub-list > .nav-sub-head:not(:first-child) {
    margin-top: 6px;
    border-top: 1px solid rgba(245, 166, 35, 0.18);
    padding-top: 10px;
  }
}

/* ---- スマホ・タブレット（900px 以下＝ハンバーガーの中） ---- */
@media (max-width: 900px) {
  .nav-sub {
    padding: 0;
  }

  .nav-sub-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0 0 0 14px;
    border-left: 1px solid rgba(245, 166, 35, 0.3);
    text-align: left;
  }

  .nav-sub-list li + li {
    margin-top: 10px;
  }

  /* ⚠️ PC側と同じ理由で text-align は必ず指定する
     （style.css の `.nav-menu a { text-align: center }` を継いでしまう） */
  .nav-sub-list a {
    display: block;
    color: #fff;
    font-size: 0.85rem;
    text-align: left;
    text-decoration: none;
  }

  .nav-sub-head {
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-align: left;
    color: rgba(245, 166, 35, 0.75);
  }

  .nav-sub-list > .nav-sub-head:not(:first-child) {
    margin-top: 14px;
  }
}

/* ------------- 文字の見え方（大きさ・行間・余白・マスの高さ） -------------

   ⭐ **この節は css/text-look.css へ切り出した**（2026-08-02）。
      理由：管理画面（admin.html）は site.css を読み込んでいないため、
      ここに置いたままだと**全画面プレビューだけ元の大きさを失う**（実測で確認）。
      お客様のページと管理画面の**両方から同じ1つのファイルを読む**形にした。
   ⚠️ 読み込む順番は **site.css のあと**（打ち消し合いは順番と詳細度で決まる）。 */

/* ==================== トップページの1枚目（2026-08-02・PM 要望） ====================

   ⭐ PM 指示：「熊本城の写真の下にスクロールすると出てくる welcome までを、
      トップページとしてまとめるべき」。
   ⭐ 直した中身は1つ＝**写真が画面まるごと1枚（100vh）を使い切っていた**こと。
      そのため Welcome は **構造上、必ず画面の外**にあった（実測：どの端末でも例外なく外）。

   ⚠️ **縦はいちばん足りない資源。**幅ではなく高さで決めること。
      実測した「実際に使える高さ」＝ 24型 955px ／ MacBook14 850px ／
      13型ノート **640px** ／ iPhone 14 844px ／ iPhone SE2 **667px**。
      いちばん厳しいのは **13型ノートの 640px**（iPhone SE2 より狭い）。
   ⚠️ 数値は **vh と上限・下限の組み合わせ**で書く。固定 px にすると、
      背の低いノートで写真だけで画面が終わる（元の 100vh がまさにそれ）。
   💥 **index.html 側に height / font-size を書き戻さないこと。**
      インライン指定は CSS より強いので、ここの調整が黙って効かなくなる。 */

/* 💥 **写真の高さを決め打ちにしない。**
      以前は写真だけを 100vh にし、文章をその上に絶対配置で浮かせていた。
      写真を縮めたところ、**文章の方が背が高くなって溢れ**、
      背の低いノート（1366×640）では ESQUINA がヘッダーの裏に隠れ、
      最後の1行が写真の外の黒地に落ちた（実測で発覚 2026-08-02）。
   ⭐ **写真は敷くだけ（absolute）。文章は普通に流す。**
      高さは「最低これだけ」（min-height）で指示し、中身が増えれば写真も一緒に伸びる。 */
.hero {
  position: relative;
  display: flex;
  /* ⭐ **下寄せ**（2026-08-02・PM 指摘「グラスの上に文字が重なりすぎ」）。
        中央だと、写真が高くなるほど文章がグラスの真ん中に来てしまう。
        下寄せなら、写真が高くなるほど**文章は下（グラスの脚のあたり）へ逃げる**。
     ⚠️ 中身が入り切らないときは箱の方が伸びる（min-height は下限）＝上で切れることはない。 */
  align-items: flex-end;
  justify-content: center;
  /* 下限280px＝写真として成立する最小。上限820px＝背の高い画面でも間延びさせない上限
     ⚠️ もとは 44vh・上限520px だったが、**27インチの縦長画面（縦1300px 前後）で
        上限に頭打ちになり、写真が画面の4割ほどしか占めなかった**（PM 実機で発覚 2026-08-02）。
        54vh へ引き上げ、上限も 820px にした。
     ⚠️ **背の低い画面では効かない**（中身の高さの方が大きいため）＝下の max-height:700px が担当。
     💥 **ヘッダー（70px・position:fixed）はページの上に覆いかぶさっている。**
        その分を上の余白で避けないと、写真を縮めたときに
        **ESQUINA の文字がヘッダーの裏に潜る**（実測で発覚 2026-08-02）。
        以前は写真が 100vh もあったので、中央に置くだけで自然に避けられていた。 */
  /* ⭐ **パソコン幅でも「1枚目の高さ」を動かせる**（PM 指示 2026-08-07 ⑪）。
        元の 58vh に足し引きする。⚠️ 280〜860px の clamp があるので端では頭打ちになる。
        🔗 スマホ側（88svh）は下の 640px の決まり。**両方に同じ足し引きを入れること。** */
  /* ⭐ **焼き込み済み（2026-08-08・段2）＋単位を揃えた**（PM 指摘）。
        💥 元は `58vh` で、足し引きの単位は `svh` ＝ **混ざっていた**。
           `vh`＝バーが引っ込んだときの高さ／`svh`＝バーが出ているときの高さ で、
           **上下にバーが出る端末（タブレット・横向きスマホ）では別の値になる**。
           ＝ 足し算が成り立たず、焼き込みができない状態だった。
        ⭐ `svh` に揃えた（スマホ側の 88svh も、つまみも、もともと svh）。
           パソコンでは `vh` と `svh` は同じ値（実測 58vh＝58svh＝472px）＝ 見え方は変わらない。
        ⭐ そのうえで PM の調整 +5 を焼き込んで **63svh**（＝ 58 + 5）。 */
  /* ⚠️ **つまみの単位が svh から「割合（単位なし）」に変わった**（2026-08-10・`_worker.js` の `heroH`）。
        ここで `1svh` を掛けているので、**この行の意味は変更前と1つも変わっていない**（＝ 63svh）。
        ⭐ パソコン幅（901px 以上）だけ、下の「設計幅」の節で**設計上の画布に対する割合**へ差し替える。
        ⛔ ここを差し替えないこと＝ 641〜900px（タブレット・小さい窓）は拡大縮小しないので、
           あちらまで巻き込むと**1枚目だけが 70px 縮む**（2026-08-10 に実測で発覚し、戻した）。
        🔗 スマホ側（88svh）は下の 640px の決まり。 */
  /* ⛔ **clamp（280〜860px）は外した**（2026-08-10）。
        💥 つまみの範囲を広げた（23〜120）とき、**860px の上限が先に効いて 96 から先が動かなくなった**
           （`node tools/check-knob-range.js` が「途中で止まる 1件」で捕まえた・教訓216）。
        ⭐ 大きさの上下はもう**つまみの範囲**（`_worker.js` の `heroH`）が決めている＝ここで二重に縛らない。 */
  min-height: calc(var(--header-h, 66px) + var(--tf-hero-h, var(--tf-hero-h-base, 63)) * 1svh);
  /* ⚠️ 上下で振り分けが違う＝写真の中で文章を下寄せにするため（PM 指示 2026-08-02）。
        上は「ヘッダー70px ＋ 下げる分」。下を減らした分だけ、中身が下に寄る。 */
  /* 上はヘッダーを避ける分だけ（余った高さは下寄せなので自動で上に付く）。
     下は写真の下端との間隔。 */
  padding: calc(var(--header-h, 66px) + 24px) 20px clamp(22px, 3.4vh, 60px);
  /* 💥 **ここで切り取らない。**
        お知らせ枠は、管理画面のつまみ（枠だけ boxY／文章ごと blockY）で**下へ動かせる**。
        どちらも「箱の高さを増やさずに下へずらす」作りなので、切り取ると
        **動かしたぶんが黙って消える**（2026-08-04・PM 実機で発覚。スマホで
        boxYSp=34 ＋ blockYSp=24 ＝ 58px ぶんが写真の下に潜り、お知らせが読めなくなっていた）。
     ⭐ 写真そのものは `.hero-background`（inset:0 ＋ overflow:hidden）が切り取るので、
        ここで切り取らなくても、はみ出さない。
     ⚠️ 下は `.entrance-section` の余白（スマホ 70px・パソコン 100px）が受け止める。
        つまみの上限（60px）と合わせて、ぶつからないことを実測で確かめてある。 */
}

.hero-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  text-align: center;
}

.hero-title {
  /* ⚠️ **大きさはここに書かない。**管理画面から直せる欄になったので、
        元の大きさは css/text-look.css の `--tf-fs-base` が正本（2026-08-03）。
        ここに font-size を書き戻すと、つまみが黙って効かなくなる（★25）。 */
  line-height: 1.1;
}

/* Welcome から下を、写真のすぐ後ろに引き上げる。
   ⚠️ 対象はトップページだけ（`.entrance-section` はここにしか無い）。
      ほかのページの `.section` は触っていない。 */
/* 🔗 **上の余白は管理画面から動かせる**（宿題E・2026-08-05）。足し引きは --tf-pad-t。
   💥 **★25 `.entrance-section` の padding は上の方に2か所ある**
      （基本 100px 0 ／ 900px 以下 70px 0）。**そのどちらもここで padding-top を上書きしている**
      ＝ 上の余白の式を書くのは**ここ1か所だけ**。前の2つに書いても効かない（下の余白は別）。
   ⚠️ calc の中に clamp を入れても正しく効く（実測済み・2026-08-03 の写真の上の文字と同じ形）。 */
.entrance-section {
  padding-top: calc(var(--tf-pad-t-base, clamp(28px, 4vh, 100px)) + var(--tf-pad-t, 0px));
}

.entrance-section .section-title {
  margin-bottom: calc(var(--tf-pad-b-base, clamp(18px, 2.6vh, 60px)) + var(--tf-pad-b, 0px));
}

/* トップのお知らせ枠。⚠️ 左右の auto（中央寄せ）を消さないよう、個別に書く */
.home-news {
  margin-top: -10px;
  margin-bottom: clamp(18px, 2.6vh, 55px);
}

/* 背の低い画面（13型ノート 640px・iPhone SE2 667px）だけ、さらに詰める。

   ⭐ **幅ではなく高さで分ける。**13型ノート（1366×640）は、幅は広いのに
      **iPhone SE2 より縦が狭い**。幅の切り替え（640px/900px）では捕まえられない。
   ⚠️ ここを足したことで、切り替えの条件が「幅」と「高さ」の2種類になった。
      トップページの1枚目を触るときは、**両方**を見ること。
   ⛔ **2026-08-10 から、この決まりは 900px 以下（スマホ・タブレット）だけ。**
      💥 パソコン幅は「設計幅 1440px で組んで丸ごと拡大縮小」に変えた（上の ==== の節）ので、
         窓の高さで見え方が変わる決まりが残っていると、**それだけが比率を崩す**。
      ⚠️ 13型ノート（1366×640）はこの決まりから外れ、ほかのパソコンと同じ比率で出る。
      ⭐ ここに書いてある「1枚目の文字を抑える」指定（`.hero-title` の font-size）は、
         ロゴが文字から SVG に変わった時点で**すでに効いていなかった**（実測 2026-08-10：
         指定どおりなら 51.2px のところ 74.6px）。大きさの正本は `css/text-look.css`（★25）。 */
@media (max-height: 700px) and (max-width: 900px) {
  .hero {
    min-height: calc(var(--header-h, 66px) + clamp(160px, 24vh, 260px));
    padding: calc(var(--header-h, 66px) + 10px) 20px 12px;
  }

  /* 縦が無い画面では「Welcome」も抑える（3.2rem=51.2px は大きすぎる） */
  .entrance-section .section-title .en {
    font-size: 2.3rem;
  }

  .hero-title {
    /* 幅が広くても縦が無いので、文字も抑える（13型ノートで 71px は大きすぎた） */
    font-size: clamp(2rem, 4vw, 3.2rem);
  }

  /* 🔗 ★25 これも「1枚目のすぐ下の区画」の上の余白。**同じ式を入れておくこと**
     （入れないと、背の低い画面のときだけ、つまみが黙って効かなくなる）。 */
  .entrance-section {
    padding-top: calc(var(--tf-pad-t, var(--tf-pad-t-base, 20px)));
  }

  /* ⚠️ **この指定は、いまどの要素にも当たっていない。**
     「エスキーナへようこそ」は写真の中（.hero の中の .section-title.hero-welcome）にあり、
     .entrance-section の中には見出しが無い（2026-08-05 に DOM を実測して確認）。
     ⛔ 見出しをこちらへ戻す作りに変えたときのために残してあるだけ。**当てにしないこと。** */
  .entrance-section .section-title {
    margin-bottom: 14px;
  }

  .home-news {
    margin-bottom: 14px;
    padding: 14px 18px 12px;
  }
}

/* ---- 1枚目の中の「エスキーナへようこそ／Welcome」とお知らせ枠（2026-08-02・PM 指示） ----

   ⭐ PM 指示：
      ・Welcome の下にあった導入文2行は、写真の上のコピーと内容が重なるため**廃止**
      ・「エスキーナへようこそ／Welcome」は**写真の中・コピーの上**へ
      ・お知らせ欄も**写真の上**へ
   ⚠️ 写真の上に文字を置くので、**読めることが最優先**。
      下地（暗幕）と影で明暗差を確保している。写真を差し替えたら読めるか必ず見ること。 */

/* ⚠️ 「Welcome」の英字は外した（2026-08-02・PM 指示）。残るのは日本語1行だけ。
      多言語化（英語・韓国語・中国語）を入れるときに、装飾としての英字をどこまで
      残すかを全体で決める方針のため、ここだけ先に外してある。 */
.hero-welcome {
  /* .section-title の 60px の下余白は、ここでは邪魔になる */
  margin: clamp(8px, 1.6vh, 18px) 0 clamp(4px, 1vh, 12px);
}

/* 英字が無くなったぶん、日本語1行だけでも見出しとして立つ大きさにする */
.hero-welcome .jp {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}

/* 写真の上のお知らせ枠。⚠️ 中身が無い／読み込み中は目立たせない */
.hero .home-news {
  max-width: 720px;
  margin: clamp(12px, 2vh, 22px) auto 0;
  text-align: left;
  /* 写真の上でも読めるように、暗幕を敷く */
  background: rgba(8, 11, 20, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-color: rgba(245, 166, 35, 0.45);
  padding: 12px 18px 10px;
}

/* ⛔ ここも 900px 以下だけ（上と同じ理由・2026-08-10） */
@media (max-height: 700px) and (max-width: 900px) {
  .hero .home-news {
    padding: 8px 14px 6px;
    margin-top: 10px;
  }
}

/* 入口カードだけになった段。⚠️ 写真とカードの間の黒い帯は**半分**にした（PM 指示 2026-08-02）。
   もとは clamp(24px, 3.5vh, 70px)。 */
/* 🔗 ★25 ここが**いちばん後ろ**＝背の低い画面（SE2 など）で実際に効くのはこの1行。
   💥 .entrance-section の上の余白は**ぜんぶで3か所**ある。1つでも式を入れ忘れると、
      その画面の高さのときだけ、つまみが黙って効かなくなる（2026-08-05 に実測で発覚）。 */
.entrance-section {
  padding-top: calc(var(--tf-pad-t-base, clamp(12px, 1.8vh, 35px)) + var(--tf-pad-t, 0px));
}

/* ---- パソコン幅：窓の高さ（vh）に頼っている余白を、設計上の画布に置き換える ----
   （2026-08-10・上の「設計幅 1440px」の節の続き）

   ⛔ **なぜ分けて書くか**：この3つはスマホでも使われている。
      スマホ（640px 以下）は拡大縮小しないので、**あちらは vh のままが正しい**。
      ここで上書きするのは 901px 以上だけ＝ **スマホは1pxも変わらない**。
   ⭐ 数字は「窓の高さ」を「設計上の画布の高さ（788px）」に読み替えただけ
      ＝ 1440×788 の窓では**変更前とまったく同じ値**になる（12.6 / 7.9 / 15.8 / 14.2px）。
   ⛔ ここに新しい `vh` / `svh` を書かないこと（比率が崩れる）。
      どうしても本物の画面の高さが要るときは `calc(<n>svh / var(--tf-zoom, 1))`。 */
@media (min-width: 901px) {
  /* ⭐⭐ **1枚目の高さ：窓の高さ追従（63svh）→ 設計上の画布に対する割合**（PM 承認 2026-08-10）。
        💥 svh のままだと `zoom` で**縦だけが拡大率のぶん余分に伸びる**＝比率が崩れる。
        ⭐ 63 という数字は変えていない。1440×788 のとき 63% ＝ 496px ＝ **変更前と同じ高さ**。
        ⛔ clamp（280〜860px）は要らない＝もう窓の高さで動かないので、頭打ちを作る意味が無い。 */
  .hero {
    min-height: calc(var(--header-h, 66px) + var(--tf-hero-h, var(--tf-hero-h-base, 68)) * var(--tf-canvas-h) / 100);
    /* 下の余白も窓の高さ（3.4vh）から設計上の画布へ。3.4% × 788px ＝ 26.8px
       ＝ 1440×788 のときと同じ値（その窓では見え方を変えていない）。 */
    padding-bottom: calc(3.4 * var(--tf-canvas-h) / 100);
  }

  .hero-welcome {
    margin: clamp(8px, calc(1.6 * var(--tf-canvas-h) / 100), 18px) 0
            clamp(4px, calc(1 * var(--tf-canvas-h) / 100), 12px);
  }

  .hero .home-news {
    margin-top: clamp(12px, calc(2 * var(--tf-canvas-h) / 100), 22px);
  }

  /* ⚠️ ここは**つまみの元の値**（`--tf-pad-t-base`）。⛔ clamp のまま置き換える
        ＝ 数値1つに潰すと「触っていない元の値」が絶対値として読まれ、
           保存値の意味が変わってしまう（段3・`absNum` は clamp を数に落とさない）。
     💥 `.entrance-section` の上の余白は**ぜんぶで3か所**ある（教訓126）。
        ここは「いちばん後ろに置いて勝たせる」ぶん。 */
  /* ⛔ **1行で書くこと。**折り返すと、行ごとに見る検査（`check-basevars` / `check-absform`）が
        「元の値が -base から読まれていない」と誤って鳴る（2026-08-10 に実際に踏んだ）。 */
  .entrance-section {
    padding-top: calc(var(--tf-pad-t-base, clamp(12px, calc(1.8 * var(--tf-canvas-h) / 100), 35px)) + var(--tf-pad-t, 0px));
  }
}

/* ---- 写真の上の文字を、必ず読めるようにする（2026-08-02） ----

   💥 **`.hero-content h1, .hero-content p` の影は h2 に当たっていなかった。**
      「エスキーナへようこそ／Welcome」を写真の中へ移した結果、
      明るい熊本城の上で**橙色の文字が沈んだ**（実測の絵で発覚）。
   ⭐ 写真の上に文字を置くときの決まりは2つ＝**影**と**薄い暗幕**。
      暗幕は写真の印象を壊さない濃さ（上下やや濃く、中央は薄く）にしてある。
   ⚠️ 写真を差し替えたら、必ずこの1枚目を見て読めるか確かめること。 */
.hero-content h2,
.hero-content h2 .jp,
.hero-content h2 .en {
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.8);
}

.hero-background::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(8, 11, 20, 0.55) 0%,
      rgba(8, 11, 20, 0.28) 38%,
      rgba(8, 11, 20, 0.45) 100%);
}

/* 狭い画面では、キャッチの字間を詰める。
   ⚠️ index.html にインラインで letter-spacing:0.3em が書いてあるため !important が要る
      （インラインは CSS より強い）。0.3em のままだと SE2 で「6つの個／性」と割れる。 */
@media (max-width: 480px) {
  [data-site-text="hero-tagline"] {
    letter-spacing: 0.1em !important;
  }
}

/* ---- スマホの1枚目は、画面をほぼ埋める（2026-08-04・PM 指摘）----

   PM 談：「トップページの画面が縦に狭くて小さく、私たちについてがかなりせり上がってきています。
            少し見えて下に続いているのが分かるくらいで良いのに」
   💥 実測（iPhone SE2 の Safari＝375×553）：写真は 392px しかなく、
      **次の区画が1枚目の 28% を占めていた。**
   ⭐ 1枚目の 88% を写真に使い、次の区画は「続きがある」と分かる程度だけのぞかせる。

   💥 **`vh` ではなく `svh` を使う。**iOS Safari の `vh` は
      **ツールバーを隠したときの高さ**（大きい方）を指すので、`vh` で組むと
      実際に見えている画面より大きくなり、**次の区画が1枚も見えなくなる。**
      `svh` は「ツールバーが出ているときの高さ」＝いま見えている方。
   ⚠️ 古い端末（svh を知らない）むけに、直前の行で `vh` を書いておく（読めない行は無視される）。
   ⛔ 幅で絞る（640px 以下＝スマホ）。**13型ノート（1366×640）を巻き込まないこと**（★48）。
   🔗 **この 88% は管理画面から動かせる**（宿題D・2026-08-05）。元の値はここ。足し引きは --tf-hero-h。
      ⚠️ 足し引きの単位も svh。**`vh` の行（古い端末むけ）には足さない**＝
         svh を知らない端末では calc ごと無視されて 88vh に落ちる＝いままでと同じ動き。
      ⛔ 幅では分けない（効くのはこの 640px 以下だけ＝パソコン用のつまみは動かない・★9）。 */
@media (max-width: 640px) {
  .hero {
    min-height: 88vh;
    /* ⚠️ **スマホはいままでどおり「本物の画面の高さ」に対する割合**（2026-08-10）。
          つまみの単位が消えたので、ここで `1svh` を掛ける（🖥 は設計上の画布を掛けている）。
          ⭐ 88 という数字も、意味（画面の 88%）も変わっていない。 */
    min-height: calc(var(--tf-hero-h, var(--tf-hero-h-base, 88)) * 1svh);
  }
}

/* ---- スマホのヘッダーを薄くする（2026-08-02・PM 指摘「縦の厚みが大きすぎる」）----

   ⭐ 高さの正本は `--header-h` ただ1つ。ここを変えるだけで、
      トップの1枚目・カレンダーの帯など、参照している全部が追従する。
   💥 **ハンバーガー自体が 62px あった**（線3本×2px ＋ 間隔6px×6 ＋ 内側の余白10px×2）。
      ヘッダーだけ縮めても、これが押し戻して薄くならない。**一緒に詰めること。**
   ⚠️ 押せる範囲は 46px を保つ（44px 未満にしない）。 */
@media (max-width: 900px) {
  :root {
    --header-h: 54px;
    /* ⚠️ もとは `.logo img { height:30px !important }` と別に書いてあった。
          高さの持ち場が2つあると必ず食い違うので、ここ1か所に寄せた（2026-08-02） */
    --logo-h: 30px;
    --logo-type: 1.15rem;
  }

  /* ⚠️ 押せる範囲は 44px を切らないこと。
        線3本(2px)＋間隔(4px×2・隣どうしは重なる)＝22px なので、内側の余白は 11px。
        （8px にしたら 38px になり、指の目安を割った・実測 2026-08-02） */
  .menu-btn {
    padding: 11px;
  }

  .menu-btn span {
    margin: 4px 0;
  }
}

/* ==================== ロゴタイプ（ESQUINA の文字）====================

   ⭐ 原本の .ai から書き出した SVG（images/logo-type.svg）を、**マスクとして**使う。
      ⚠️ `<img>` で置くと **CSS から色を変えられない**（ヘッダーはアンバー・写真の上は白、
         と場所ごとに変えたいので、それでは足りない）。
      ⭐ マスクなら「形だけ」を借りて、色は `background-color` で自由に決められる。
   ⚠️ マスクは中身の大きさを持たないので、**幅か高さのどちらかを必ず指定する**。
      縦横比は SVG と同じ 298.87 : 54.2（約 5.51 : 1）を書いておく。
   ⚠️ 読み上げのために `role="img"` と `aria-label="ESQUINA"` を付けること（文字ではないため）。 */
.logo-type {
  display: inline-block;
  aspect-ratio: 298.87 / 54.2;
  background-color: currentColor;
  -webkit-mask: url(/images/logo-type.svg) no-repeat center / contain;
  mask: url(/images/logo-type.svg) no-repeat center / contain;
  vertical-align: middle;
}

/* ヘッダー：原本の横組みロックアップを1枚で使う（マークとロゴタイプの間隔も原本のまま）。
   ⚠️ 高さは --logo-h（スマホでは 30px）。縦横比は SVG が持っているので幅は auto。 */
.logo-lockup {
  display: block;
  height: var(--logo-h, 35px);
  width: auto;
}

/* トップの1枚目：写真の上なので白。⚠️ 大きさは管理画面のつまみ（--tf-scale）で動く。

   ⚠️ **前の文字（clamp(2.2rem, 5.2vw, 4.5rem)）と同じ見た目の大きさに合わせてある。**
      文字の「高さ」は字面の高さ（全角の約0.70）なので、
      ロゴの幅 ＝ 字面の高さ × 縦横比5.51。5.2vw × 0.70 × 5.51 ≒ 20vw。
      下限 136px（2.2rem 相当）／上限 278px（4.5rem 相当）。
      💥 これを 30vw にしていたら**明らかに大きすぎた**（PM 指摘 2026-08-03）。 */
.hero-title .logo-type {
  /* 💥 **ここで宣言することに意味がある**（焼き込みの前提・2026-08-08）。
        親の `[data-site-text="hero-title"]` が `--tf-fs-base: clamp(2.2rem, 5.2vw, 4.5rem)`
        を持っており、**CSS 変数は継承する**（★36）＝ここで自分の値を宣言しないと、
        親の文字サイズが**ロゴの幅として降りてくる**。 */
  --tf-fs-base: clamp(136px, 20vw, 278px);
  width: calc(var(--tf-fs-base, 1rem) * var(--tf-scale, 1));
  height: auto;
  color: #fff;
}

/* 💥 **影は「囲みの側」に掛ける。**
      マスクを掛けた要素に filter を付けると、**影ごとマスクで切り取られて消える**
      （CSS は filter → mask の順に処理するため）。PM に「ベタッとしている」と指摘された原因。
   ⭐ 親（h1）に掛ければ、マスクで形が決まったあとの絵に影が落ちる。 */
.hero-title {
  filter: drop-shadow(0 2px 15px rgba(0, 0, 0, 0.8));
}

/* フッター：もとの 2rem の文字と同じくらい */
.footer-logo .logo-type {
  /* ⚠️ ★55：**画像（SVG）は `font-size` では変わらない。**大きさのつまみは
        高さ（ここ）に掛ける。トップのロゴ（`.hero-title .logo-type`）は幅に掛けている
        ＝ どちらも「その要素の大きさを決めている指定」に掛けるのが決まり。
     💥 つまみを足したら `node tools/check-knobs.js` で実物を測ること（教訓141）。 */
  /* ⚠️ 元の値はこの1行（焼き込みはここを書き換える・2026-08-08）。 */
  --tf-fs-base: 1.55rem;
  height: calc(var(--tf-fs-base, 1rem) * var(--tf-scale, 1));
  color: #F5A623;
}

/* ==================== 言語の切り替え（JP / EN）====================

   ⛔ **自動で飛ばさない**（★43「頼まれていない移動手段を足さない」）。
      ブラウザの言語は「英語版もありますよ」と**気づかせる**までにしか使わない。
      移動するのは、押した人だけ。決めるのはお客様。
   ⭐ 見え方の決まりはここ1か所。HTML 側にインラインで書き戻さないこと。
   🔗 ヘッダーの中身の並びは **order** で決める（DOM の順番は変えない）。
      ロゴ / 言語 / ハンバーガー / メニュー。 */

.logo {
  order: 1;
}

.lang-switch {
  order: 2;
  /* ⚠️ ハンバーガーの引き出し（.nav-menu・z-index 1000）に隠されないよう、
        ハンバーガー（1001）と同じ高さに置く。メニューを開いても切り替えは見える。 */
  z-index: 1001;
  /* ⚠️ スマホでは、これが右端の並びを作る唯一の自動余白。
        `.menu-btn` にも margin-left:auto があると**空きが山分けされて真ん中に寄る**ので、
        下の @media で打ち消してある。 */
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  line-height: 1;
  font-weight: 600;
}

.menu-btn {
  order: 3;
}

.header nav {
  order: 4;
}

.lang-switch .lang-cur,
.lang-switch .lang-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  /* ⚠️ 押せる範囲は 44px を切らない（教訓96） */
  min-width: 30px;
  min-height: 44px;
  padding: 0 3px;
  text-decoration: none;
}

/* いま見ている言語＝押せない（アンバー）／もう一方＝押せる（白） */
.lang-switch .lang-cur {
  color: #F5A623;
}

.lang-switch .lang-alt {
  color: rgba(255, 255, 255, 0.75);
}

.lang-switch .lang-alt:hover,
.lang-switch .lang-alt:focus-visible {
  color: #fff;
}

.lang-switch .lang-sep {
  color: rgba(255, 255, 255, 0.28);
}

@media (min-width: 901px) {
  /* パソコンでは、メニューの右隣に置く */
  .header nav {
    order: 3;
    margin-left: auto;
  }

  .lang-switch {
    order: 4;
    margin-left: 20px;
  }
}

@media (max-width: 900px) {
  /* ⚠️ 自動余白は言語の側だけ（上のコメント参照） */
  .menu-btn {
    margin-left: 2px;
  }

  /* 💥 **ハンバーガーの引き出しより、ロゴを下に置く。**
        `.logo` は z-index 1100（css/style.css）で、引き出し（1000）より上にあった。
        そのためメニューを開くと**ロゴが引き出しの上に重なって見えていた**
        （2026-08-04・PM 指摘）。
     ⭐ 重なりの順は「ロゴ ＜ 引き出し ＜ ハンバーガーと言語切替」。
        押せるもの（ハンバーガー・JP/EN）だけが引き出しの上に残る。
     ⚠️ パソコンでは引き出しが出ないので、ここ（スマホ幅）だけで下げる。 */
  .logo {
    z-index: 1;
  }
}

/* ---- 「英語版があります」の帯（中身は js/lang.js が作る）----

   ⛔ 押さなければ何も起きない。閉じたら二度と出さない（選択を覚える）。
   ⚠️ 画面の**下**に出す。上はヘッダーと営業カレンダーの帯（#cal-bar）で埋まっている。
   ⚠️ z-index 1200 ＝ ヘッダー(1000)より上、全画面のお知らせ(5000)・
      カレンダー(6500)・写真と地図の拡大(7000)より**下**。覆いの上には出さない。
   ⭐ 出るときの変化は**濃さだけ**（位置は動かさない）＝★46 のとおり、
      「動きを減らす」設定でも消さなくてよいもの。 */
.lang-tip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  /* ⚠️ 右は「閉じる」の分だけ空ける（下の position:absolute と対にすること）。
        空けないと、狭い画面で文章が × の下へ潜る。 */
  padding: 8px 52px 8px 12px;
  /* 画面下端のホームバーにかからないように */
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 14, 26, 0.97);
  border-top: 1px solid rgba(245, 166, 35, 0.35);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
  font-size: 0.85rem;
  line-height: 1.5;
  color: #fff;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.lang-tip.is-on {
  opacity: 1;
}

.lang-tip-text {
  margin: 0;
}

.lang-tip-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #F5A623;
  border-radius: 2px;
  color: #F5A623;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.lang-tip-go:hover,
.lang-tip-go:focus-visible {
  background: #F5A623;
  color: #0a0e1a;
}

.lang-tip-close {
  /* 「閉じる」は右端に固定する（文章とボタンの並びに混ぜない）。
     🔗 帯の右の余白（52px）と対。片方だけ変えないこと。 */
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  /* ⚠️ 押せる範囲 44px（教訓96） */
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.lang-tip-close:hover,
.lang-tip-close:focus-visible {
  color: #fff;
}

/* ==================== フッターと見出し下の余白 ====================

   💥 **もとは HTML の style="" に直接書いてあった**（2026-08-04 にここへ移した）。
      インラインは CSS より強いので、あちらに残っていると
      **管理画面のつまみから動かしても効かない**（宿題D の前提整備）。
   ⛔ **値は1つも変えていない。**移す前後で6ページ×3幅を実測し、
      すべての要素の位置・高さが同じであることを確認済み。
   🔗 ⛔ **ここが余白の正本。HTML 側に style を書き戻さないこと。** */

/* 🔗 **ここから下の余白は、管理画面から動かせる**（宿題D・2026-08-05）。
      元の値はここ。足し引きは --tf-pad-t / --tf-pad-b。
      場所と範囲の正本は `_worker.js` の LAYOUT_PARTS。
   💥 **★36 `.footer` に付けた指定は中のロゴ・メニューにも継承する。**
      継承を断つ受け皿は `css/text-look.css` の末尾にある（片方だけ消さないこと）。 */
.footer {
  background: #000;
  padding: calc(var(--tf-pad-t, var(--tf-pad-t-base, 30px))) 0 calc(var(--tf-pad-b, var(--tf-pad-b-base, 38px)));
  border-top: 1px solid rgba(245, 166, 35, 0.3);
  /* ⭐ **フッターの外側の上のすき間**（PM 指摘 2026-08-07）。
        既定 0 ＝ いままでと同じ（本文との空きは、各ページの区画の下の余白で決まっている）。
        ⚠️ ここは足し引き。マイナスにすると本文に近づく（−120 で本文の下端に接する・実測）。
     ⛔ ページ側の「区画の下の余白」とは**別のつまみ**。あちらはページごと、こちらは全ページ。 */
  margin-top: calc(var(--tf-out-t, var(--tf-out-t-base, 0px)));
}

/* ⭐ 上のすき間も足した（2026-08-07・トップのロゴと同じ操作にそろえるため）。
      ⚠️ 元は 0px（フッターの上の余白がそのまま効いていた）。ここは足し引き。 */
.footer-logo {
  margin-top: calc(var(--tf-pad-t, var(--tf-pad-t-base, 0px)));
  margin-bottom: calc(var(--tf-pad-b, var(--tf-pad-b-base, 20px)));
}

/* ⚠️ スマホ（900px 以下）では上の方に `display: grid !important` の指定があり、
      そちらが勝つ（!important はインラインでない限り必ず勝つ）＝**移す前と同じ**。 */
.footer-nav {
  display: flex;
  justify-content: center;
  list-style: none;
  /* ⭐ **項目どうしのすき間**（PM 指摘 2026-08-07）。元は 30px。
        ⚠️ 狭い画面では2行に折り返す＝ 縦のすき間にも同じ値が効く（下の @media も見ること）。 */
  /* ⚠️ パソコンは横並び＝ マイナスは意味を持たないので 0 で止める（狭い画面の負の値は上の @media が受け持つ） */
  gap: max(0px, calc(var(--tf-gap, var(--tf-gap-base, 22px))));
  margin-bottom: calc(var(--tf-pad-b, var(--tf-pad-b-base, 18px)));
  padding: 0;
}

.footer-copyright {
  color: #666;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

/* 見出しのすぐ下の区画。⚠️ ページごとに値が違う（もとは HTML の style="")。
   ⚠️ `.section`（style.css で 100px 0）より強くするため、クラスを2つ重ねている。 */
.section.news-section {
  padding: calc(var(--tf-pad-t, var(--tf-pad-t-base, 30px))) 0 calc(var(--tf-pad-b, var(--tf-pad-b-base, 60px)));
  background: #0a0e1a;
}

.section.sd-section {
  padding: calc(var(--tf-pad-t, var(--tf-pad-t-base, 40px))) 0 calc(var(--tf-pad-b, var(--tf-pad-b-base, 90px)));
}

/* 💥 **この3ページは 2026-08-05 の宿題C で取りこぼしていた**（PM 指摘 2026-08-06
      「お問い合わせのページの調整をする箇所が無い」）。
      余白が HTML の `style=""` に残っており、**インラインは CSS より強い**ので、
      つまみを作っても効かない状態だった（お問い合わせだけでなく3ページとも）。
   ⚠️ 元の値は1つも変えていない（`about` 40/100 ／ `stores` 40/100 ／ `contact` 20/80）。
   ⚠️ HTML に残した `background` と `text-align` はそのまま（余白だけを移した）。 */
.section.about {
  padding: calc(var(--tf-pad-t, var(--tf-pad-t-base, 40px))) 0 calc(var(--tf-pad-b, var(--tf-pad-b-base, 100px)));
}

.section.stores {
  padding: calc(var(--tf-pad-t, var(--tf-pad-t-base, 40px))) 0 calc(var(--tf-pad-b, var(--tf-pad-b-base, 100px)));
}

.section.contact {
  padding: calc(var(--tf-pad-t, var(--tf-pad-t-base, 20px))) 0 calc(var(--tf-pad-b, var(--tf-pad-b-base, 80px)));
}


/* ============================================================================
   ⭐ **焼き込み：スマホ用に割ったぶん**（2026-08-08・段2）
   ⛔ **なぜここ（ファイル末尾）か**：区画の規則（.section.about ほか）は
      すぐ上にある。同じ強さなら**後に書いた方が勝つ**ので、ここより前に置くと効かない。
   ⛔ **なぜ割るのか**：PM の調整がパソコン用とスマホ用で**値が違う**場所は、
      元の値を1つにできない（設計3-2）。値が同じ場所は上で書き換えるだけで済んでいる。
   ⚠️ **短縮形（padding）ではなく個別（padding-bottom）で書く**＝反対側を巻き込まない。
   🔗 焼いた値の出どころ＝ 本番の layout_looks（2026-08-08 実測）。
      焼いたぶんは KV を 0 に戻すこと（両方あると二重に効く）。
   ============================================================================ */
@media (max-width: 640px) {
  /* 元 120px ＋ スマホ用 -46 */
  .page-head {
    padding-top: calc(var(--tf-pad-t, var(--tf-pad-t-base, 74px)));
  }
  /* 元 70px ＋ スマホ用 0（＝パソコン用の -60 を打ち消す） */
  .entrance-section {
    padding-bottom: calc(var(--tf-pad-b, var(--tf-pad-b-base, 70px)));
  }
  /* 元 40/100px ＋ スマホ用 0（＝パソコン用の -10/-40 を打ち消す） */
  .section.news-section {
    padding-top: calc(var(--tf-pad-t, var(--tf-pad-t-base, 40px)));
    padding-bottom: calc(var(--tf-pad-b, var(--tf-pad-b-base, 100px)));
  }
  /* 元 10px ＋ スマホ用 0 ／ 元 90px ＋ スマホ用 -62 */
  .section.sd-section {
    padding-top: calc(var(--tf-pad-t, var(--tf-pad-t-base, 10px)));
    padding-bottom: calc(var(--tf-pad-b, var(--tf-pad-b-base, 28px)));
  }
  /* 元 100px ＋ スマホ用 -70 */
  .section.about {
    padding-bottom: calc(var(--tf-pad-b, var(--tf-pad-b-base, 30px)));
  }
  /* 元 100px ＋ スマホ用 -80 */
  .section.stores {
    padding-bottom: calc(var(--tf-pad-b, var(--tf-pad-b-base, 20px)));
  }
  /* 元 80px ＋ スマホ用 -50 */
  .section.contact {
    padding-bottom: calc(var(--tf-pad-b, var(--tf-pad-b-base, 30px)));
  }
  /* 元 80/80px ＋ スマホ用 -60/-60 */
  .footer {
    padding-top: calc(var(--tf-pad-t, var(--tf-pad-t-base, 20px)));
    padding-bottom: calc(var(--tf-pad-b, var(--tf-pad-b-base, 20px)));
  }
  /* 元 40px ＋ スマホ用 -28 */
  .footer-logo {
    margin-bottom: calc(var(--tf-pad-b, var(--tf-pad-b-base, 12px)));
  }
  /* ⭐ ロゴの大きさ。元 1.55rem × スマホ用 0.75倍 ＝ 1.1625rem。
        💥 **1回目の焼き込みで、ここだけ漏らした**（前後の突き合わせが 6件で鳴って気づいた）。
           大きさは**倍率**なので足し算ではなく掛け算（`way: num`）。
        ⚠️ ★55：画像（SVG）なので `font-size` ではなく高さに掛かる（上の宣言と同じ形）。 */
  .footer-logo .logo-type {
    --tf-fs-base: 1.1625rem;
  }
  /* 元 40px ＋ スマホ用 -28。⚠️ すき間（gap）は上の 640px ブロックに !important で
     別に書いてあるので、そちらで焼く（ここに書くと二重になる） */
  .footer-nav {
    margin-bottom: calc(var(--tf-pad-b, var(--tf-pad-b-base, 12px)));
  }
  /* 元 20px ＋ スマホ用 -12 */
  .footer-staff {
    margin-top: calc(var(--tf-pad-t, var(--tf-pad-t-base, 8px)));
  }
  /* 元 80% ＋ スマホ用 -20 */
  .nav-menu {
    width: calc(var(--tf-menu-w, var(--tf-menu-w-base, 60%)));
  }
}