/* 文字の見え方の正本（css/site.css から切り出し・2026-08-02）
   ⚠️ **お客様のページと管理画面の両方がこれを読む。**片方だけに置かないこと。
   ⚠️ 読み込みは site.css のあと。 */

/* ------------- 書体の正本（2026-08-09・PM 決定）-------------

   ⛔ **書体の指定はこの2行だけ。**以前は明朝19か所・ゴシック13か所に書き写されていた
      （＝書体を変えるのに32か所の修正が要った）。

   ⭐ **書体は読み込まない。端末に入っているものを使う**（PM 決定「Windows は游明朝でいく」）。
      実測（圧縮後・6ページぶんの文字で必要な区画を数えた）:
        いま（固定5ウェイト）… CSS 561KB ＋ 書体の実体 6,021KB
        可変（Sans＋Serif）  … CSS 225KB ＋ 実体 2,477KB
        ⭐ 読み込まない       … **0**
      ＝ 描画をせき止める CSS も、あとから落ちてくる書体も、まるごと無くなる。

   ⛔ **太さは 400 / 600 / 700 の3段で組む。500 と 800 は使わない。**
      理由＝ CSS の丸めの決まりで、その太さを持たない端末では
        500 → **400 へ落ちる**（本文と見分けがつかなくなる）
        600 → **700 へ上がる**（今と同じ＝悪くはならない）
      実測：ヒラギノ角ゴは 400/500/600/700 が**すべて別の字面**（インク量 100/114.4/129.1/147.6）。
            ヒラギノ明朝は **2段だけ**（400=500／600=700）。
      ⚠️ Windows・Android の実機は未確認。⭐ ただし 600 なら**今より重くなることは無い**。

   ⚠️ 並びは Apple → Windows → Android → 最後の逃げ道 の順。
      Windows は英語名と日本語名の両方を書く（環境によって引ける名前が違う）。
   ⚠️ `Noto Sans CJK JP` / `Noto Serif CJK JP` は **Android の端末に入っているもの**
      ＝ 読み込みではない（Android はいままでと同じ見え方になる）。 */
:root {
  --font-sans:
    'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
    'BIZ UDPGothic', 'Yu Gothic UI', 'Yu Gothic', YuGothic, '游ゴシック', Meiryo,
    'Noto Sans CJK JP', system-ui, sans-serif;
  --font-serif:
    'Hiragino Mincho ProN', 'Hiragino Mincho Pro',
    'Yu Mincho', YuMincho, '游明朝', '游明朝体', 'MS PMincho',
    'Noto Serif CJK JP', serif;
}

/* ------------- 管理画面で決めた文字の大きさ -------------

   ⭐ **式はここ1回だけ。場所ごとに書くのは「元の大きさ」だけ。**
      以前は場所ごとに calc() を書き写す形だったため、33欄のうち**24欄で書き漏れ**があり、
      管理画面のつまみを動かしても何も起きない状態になっていた（2026-08-01 是正）。

   --tf-fs-base … その場所の元の大きさ（下でそれぞれ宣言する）
   --tf-scale   … 管理画面で決めた倍率（js/text-format.js が要素に付ける・既定は1）

   ⚠️ **印を1つ増やしたら、必ず --tf-fs-base も1行足すこと。**
      書き漏れると 1rem 扱いになり、その場所の大きさが勝手に変わる。
      漏れは機械的に測れる（引継書の確認コマンド）。
   ⚠️ 狭い画面で元の大きさが変わる場所は、@media 側で **--tf-fs-base だけ**上書きする
      （式を二度書かない）。
   ⚠️ !important は、HTML にインラインで font-size が書いてある場所
      （写真の上の文章・ヘッダー・フッター）に勝つために必要。
      式が1つなので、まとめて付けても場所ごとの差は --tf-fs-base 側で吸収できる。 */

[data-site-text],
[data-site-text="about-body"] p,
.store-description,
.sd-description,
.section-title .jp,
.section-title .en,
.sd-info .info-label,
.sd-info .info-val,
.news-block-title,
.news-block-lead,
.qn-headline,
.qn-message,
.qn-store-name,
.qn-store-name small,
.qn-badge,
.qn-store-hours,
.qn-store-note,
.cal-title,
.cal-message,
/* ⚠️ フッターのロゴ（`.footer-logo .logo-type`）は**ここに入れない。**
      画像（マスクした SVG）なので `font-size` では大きさが変わらない（★55）。
      大きさは `css/site.css` の `height: calc(1.55rem * var(--tf-scale, 1))` に掛かる。
      💥 2026-08-07、いちどここにも足してしまった（無害だが、意味の無い指定）。 */
/* ---- カレンダーの表の中（2026-08-02 追加） ----
   ⚠️ **ここは「式」だけに足すこと。**下の「パソコン用／スマホ用の振り分け」には足さない。
      足すと、囲み（.cal-table）から受け継いだ --tf-scale を各要素が 1 に打ち消してしまい、
      **つまみを動かしても何も起きない**（いちばん分かりにくい壊れ方）。 */
.cal-range,
.cal-dow,
.cal-date,
.cal-cell,
.cal-legend,
.cal-li-date,
.cal-li-date small,
.cal-li-body,
.cal-li-body .cal-item small {
  font-size: calc(var(--tf-fs-base, 1rem) * var(--tf-scale, 1)) !important;

  /* ⭐ **折り返しを、サイト全体で綺麗にする**（PM ご要望 2026-08-11）。
        ⛔ **この一覧に相乗りする**＝ 文章の当て先を二箇所に書かないため（教訓165）。
           ＝ お知らせだけでなく、店舗紹介・英語版・店舗ページなど**全ページの文章**に効く。
     ⭐ `text-wrap: balance` … 2〜数行になるとき、行の長さを均す。
        実測（お知らせの補足・375px）＝ 最終行の幅 26px →「ます。」だけ残るのが消えた。
        ⚠️ ブラウザは行数が多い段落（おおむね6行超）では**無視する**＝長い本文は変わらない。
     ⭐ `word-break: auto-phrase` … **文節で折り返す**（日本語だけの仕組み）。
        「閉店時間を早／める」のような語の途中の割れを、「状況により／閉店時間を…」にする。
        ⚠️ いまのところ Chrome / Edge / Android（119+）だけ。Safari・Firefox では**無視される**
           （`balance` の結果がそのまま残る）。⚠️ 英語のページでは何も起きない（害も無い）。
     💥 **入れると折り返しが変わる＝見え方が動く。**実測（375 と 1440 の2幅・3303要素）＝
        `balance` だけで 88件 ／ `auto-phrase` だけで 82件 ／ **両方で 416件**が動いた
        （2つは打ち消し合わず、重なると効き方が大きくなる）。⛔ 触るときは必ず前後を突き合わせる。
     🔗 お知らせの補足（`.qn-store-note`）は `css/quake-notice.css` にも同じ2行がある
        ＝あちらが先に入っていた分。**片方を変えたらもう片方も見る。** */
  text-wrap: balance;
  word-break: auto-phrase;
}

/* ⛔⛔ **両端揃え（`text-align: justify`）の段落では、両方とも打ち消す**（2026-08-11・実測して発覚）。
      💥 両端揃えは「行の幅を枠いっぱいに伸ばす」作り。そこへ
         `balance`（行を短く均す）や `auto-phrase`（文節でしか切らない＝行が短くなる）を足すと、
         **足りない幅を字間で埋めるので、文字がバラバラに間延びする。**
         実測（/stores 375px）＝「ESQUINA と は 、 ポ ル ト ガ ル 語 で」のような見え方になった。
      ⭐ ここに並べるのは **`text-align: justify` を持つ段落だけ**。一覧:
         `.about-text p`（私たちについて）／`.store-description`（店舗一覧のカード）／
         `.sd-description`（店舗ページの紹介文）。
      ⛔ **両端揃えを新しく足したら、ここにも足すこと**
         （探し方＝ `grep -rn "text-align: *justify" css/*.css`）。 */
.about-text p,
.store-description,
.sd-description {
  text-wrap: wrap;
  word-break: normal;
}

/* ⛔⛔ **英語のページでは、両端揃えをやめる**（PM ご指摘 2026-08-11）。
      > 1行に入る単語が少ない場合の間が広がるのは仕方ないのでしょうか？
      ⛔ **仕方なくない。**両端揃えは「足りない幅を空きで埋める」作り。
         日本語は文字の幅が一定なので綺麗に埋まるが、**英語は単語の長さがバラバラ**なので
         空きが**単語と単語の間に集中**し、行によって差が出る（いわゆる「川」ができる）。
      ⭐ 実測（本番 `/en/stores`・PM の窓 2174px・単語間のすき間）:

         | | 最大 | 平均 |
         |---|---|---|
         | 両端揃えのまま | **28.4px** | 14.7px |
         | ハイフネーション（`hyphens: auto`）を足す | 23.5px | 14.6px |
         | **左揃えにする** | **8px（一定）** | 8px |

         ⭐ 左揃えなら**すき間が常に1つぶん**でムラが消える。**行数も高さも変わらない**
            （9行・412px のまま）＝ 下の並びに影響しない。
         ⚠️ ハイフネーションは効果が小さいうえ、語の途中で割れる（`cham-pagne`）ので採らなかった。
      ⚠️ 右端がギザギザになる（ragged right）＝ **英文では標準の組み方。**
      ⭐ **文字の位置のつまみは死なない**＝ `.tf-left/.tf-center/.tf-right` は `!important`（`css/text-format.css`）。
      🔗 「英語では役割・組み方が変わるので、元の値を言語で分けてよい」＝ 教訓174 と同じ考え方。
      ⛔ **両端揃えを新しく足したら、ここにも足す**（上の除外の一覧と同じ3つ）。 */
html:not([lang="ja"]) .about-text p,
html:not([lang="ja"]) .store-description,
html:not([lang="ja"]) .sd-description {
  text-align: left;
}

/* ------- パソコン用とスマホ用を、別々の値として持つ -------

   ⭐ 管理画面は `--tf-scale-pc` と `--tf-scale-sp` を要素に付ける。
      **どちらを使うかは、この2つの決まりだけで解決する**（表示側の JS は幅を見ない）。
   ⚠️ **スマホ用とパソコン用は完全に別**（2026-08-02 変更）。既定はどちらも 100%／0px。
      引き継がせていた頃は「100%に決めた」と「決めていない」が区別できなかった。
   ⚠️ 境目 640px は「文字の位置（スマホのとき）」と同じ値。**変えるときは横断で探すこと。** */

[data-site-text],
[data-site-text="about-body"] p,
/* ⭐ フッターのロゴ（PM 要望 2026-08-07）。⚠️ ★55：画像なので大きさは高さに掛かる。
      💥 **この読み替えの一覧に入れ忘れると、つまみは出るのに何も起きない**（教訓141）。 */
.footer-logo .logo-type,
.store-description,
.sd-description,
.section-title .jp,
.section-title .en,
.sd-info .info-label,
.sd-info .info-val,
.news-block-title,
.news-block-lead,
.qn-headline,
.qn-message,
.qn-store-name,
.qn-store-name small,
.qn-badge,
.qn-store-hours,
.qn-store-note,
.cal-title,
.cal-message,
/* カレンダーの表は**囲みだけ**を振り分けの対象にする（中の文字はここから受け継ぐ） */
.cal-table,
.cal-range,
/* ⚠️ 曜日と日にちは**自分のつまみを持つ**ので、ここに入れる。
      ＝ 表の倍率は受け継がない（受け継ぎと自分の値は両立しない）。 */
.cal-dow,
.cal-date,
/* 狭い画面の曜日・日にち（一覧側）。同じつまみで動かすため、こちらも自分の値を読む */
.cal-li-date,
.cal-li-date small,
/* ⭐ 地域の切り替え・お知らせの切り替え。⛔ 中のボタンは入れない（受け継ぎが切れる・★26） */
.store-tabs,
.news-tabs {
  --tf-scale: var(--tf-scale-pc, 1);
  --tf-lh: var(--tf-lh-pc, 1);
  --tf-mt: var(--tf-mt-pc);
  --tf-mb: var(--tf-mb-pc);
}

/* 💥 **CSS の変数は「継承」する。**
      表（`.cal-table`）に付けた `--tf-scale-pc` などは、中の曜日・日にちにも降りてくる。
      そのため「自分のつまみを持つ」はずの子が、**表のつまみで一緒に動いていた**
      （実測 2026-08-02：表を115%にすると曜日 13.12→15.09px・日にち 14.08→16.19px。
       表の「下の余白」+16px が、全マスの日にちの下余白 5→21px にも化けていた）。
      さらに「既定と同じ値は保存しない」規則と重なり、**100%を明示しても戻せなかった**。
   ⭐ **受け皿の変数に既定を書いて、継承を断つ。**
      管理画面が付けるのは要素のインライン指定なので、こちらより強い＝自分のつまみは従来どおり効く。
   ⚠️ **受け継いで拡げたい子（`.cal-cell` `.cal-legend` `.cal-li-body` など）は、ここに入れないこと。**
      入れると表のつまみが効かなくなる。 */
/* ⛔ **お知らせの読み仮名も同じ**（2026-08-11）。
      💥 店名（`.qn-store-name`）と読み仮名（その中の `small`）は**親子**なので、
         店名のつまみを動かすと読み仮名まで一緒に動いていた
         （実測＝ `node tools/check-inherit.js` が「上の内側 0px→37px」で鳴った）。
      ⭐ 読み仮名は**自分のつまみを持つ**ので、親のぶんは受け継がない（★36・教訓201）。 */
.qn-store-name small,
.cal-dow,
.cal-date,
.cal-li-date,
.cal-li-date small {
  --tf-scale-pc: 1;
  --tf-scale-sp: 1;
  --tf-lh-pc: 1;
  --tf-lh-sp: 1;
  /* ⛔⛔ **断つときは `initial`。`0px` と書いてはいけない**（2026-08-09・段3で実測して発覚）。
        💥 `0px` は「値がある」状態なので、当て込み側の `var(--tf-mt, var(--tf-mt-base, «元»))` が
           **元の値まで届かず 0 になる**（＝ その欄の元の余白が丸ごと消える）。
           実測＝ 8256要素のうち **3677要素**が動いた。⭐ `initial` なら「無い」と同じ扱いになる。
        🔗 教訓201 が示していた正しい形はこちら（下の 755 行の並びが元からこの形だった）。 */
  --tf-mt-pc: initial;
  --tf-mt-sp: initial;
  --tf-mb-pc: initial;
  --tf-mb-sp: initial;
}

@media (max-width: 640px) {

[data-site-text],
[data-site-text="about-body"] p,
/* ⭐ フッターのロゴ（PM 要望 2026-08-07）。⚠️ ★55：画像なので大きさは高さに掛かる。
      💥 **この読み替えの一覧に入れ忘れると、つまみは出るのに何も起きない**（教訓141）。 */
.footer-logo .logo-type,
.store-description,
.sd-description,
.section-title .jp,
.section-title .en,
.sd-info .info-label,
.sd-info .info-val,
.news-block-title,
.news-block-lead,
.qn-headline,
.qn-message,
.qn-store-name,
.qn-store-name small,
.qn-badge,
.qn-store-hours,
.qn-store-note,
.cal-title,
.cal-message,
.cal-table,
.cal-range,
.cal-dow,
.cal-date,
.cal-li-date,
.cal-li-date small,
.store-tabs,
.news-tabs {
    /* 💥 **スマホ用はパソコン用を引き継がない**（2026-08-02 変更）。
          以前は `var(--tf-scale-sp, var(--tf-scale-pc, 1))` と引き継がせていたが、
          そのせいで **「スマホは100%」と決めた指定と「決めていない」が区別できなかった**
          （どちらも値を持たないため。パソコン140%のとき、スマホを100%にしても
           24.6px のままだった・PM 実機で発覚）。
       ⭐ いまは **スマホとパソコンは完全に別**。既定はどちらも 100%／0px。
          スマホでも大きくしたいときは、スマホ幅に切り替えて別に決める。
       ⚠️ 文字の位置だけは引き継ぎのまま（「パソコンと同じ」という選択肢が画面にあるため）。 */
    --tf-scale: var(--tf-scale-sp, 1);
    --tf-lh: var(--tf-lh-sp, 1);
    --tf-mt: var(--tf-mt-sp);
    --tf-mb: var(--tf-mb-sp);
  }
}

/* ---- 場所ごとの「元の大きさ」（33欄＋店舗の紹介文） ---- */

/* トップ：写真まわり */
/* 写真の上の大きな文字（ESQUINA）。⚠️ **元の大きさが画面幅で変わる**唯一の場所。
   calc の中に clamp を入れても正しく効く（実測で確認 2026-08-03）。 */
/* 💥 上下の余白のつまみは出ているのに、**当て込みの一覧に入っておらず死んでいた**
      （2026-08-03 に欄を作ってから 2026-08-06 に実測で発覚）。
   ⭐ 元の行間 1.1（`css/site.css` の `.hero-title`）と、元の余白 0 をここに置き、
      下の「行間と前後の余白」の一覧にも入れた。 */
[data-site-text="hero-title"] {
  --tf-fs-base: clamp(2.2rem, 5.2vw, 4.5rem);
  --tf-lh-base: 1.1;
  --tf-mt-base: 0px;
  --tf-mb-base: 0px;
}
[data-site-text="hero-sub"] { --tf-fs-base: 1.1rem; }
[data-site-text="hero-tagline"] { --tf-fs-base: 1rem; }

/* ページ見出し（日本語）＝ .section-title .jp（1.1rem） */
[data-site-text="welcome-jp"],
[data-site-text="about-jp"],
[data-site-text="stores-jp"],
[data-site-text="news-jp"] { --tf-fs-base: 1.1rem; }

/* ページ見出しの英字 ＝ .section-title .en（3.2rem） */
[data-site-text="about-en"],
[data-site-text="stores-en"],
[data-site-text="news-en"] { --tf-fs-base: 3.2rem; }

/* 導入文・案内文・本文（いずれも body と同じ 1rem） */
[data-site-text="stores-lead"],
[data-site-text="news-lead"],
[data-site-text="about-body"] p { --tf-fs-base: 1rem; }

/* 入口カード：見出し ＝ .entrance-title（1.3rem）／英字 ＝ .entrance-title .en（0.68rem）

   ⚠️ 見出しを **display:block** にしているのは、文字揃え（左寄せ・中央・右寄せ）を
      効かせるため。文字揃えは「箱の中でどちらに寄せるか」の指定なので、
      箱が文字に張り付いた inline のままでは**押しても何も起きない**。
      すぐ下の英字（.entrance-title .en）は元から block なので、見た目の並びは変わらない
      （実測：カードの高さ・文字の位置とも変化なし）。 */
[data-site-text="card-about-jp"],
[data-site-text="card-stores-jp"],
[data-site-text="card-contact-jp"] { --tf-fs-base: 1.3rem; display: block; }

[data-site-text="card-about-en"],
[data-site-text="card-stores-en"],
[data-site-text="card-contact-en"] { --tf-fs-base: 0.68rem; }

/* ⛔ **日本語以外のページでは、この英字が見出しそのもの**（PM 指摘 2026-08-07・`css/site.css` 参照）。
      ⭐ **元の値だけを言語ごとに持つ。つまみ（倍率）は日英共通のまま**
         ＝ PM のご方針「見え方は言語で分けない」（2026-08-06）を壊さずに、
           「英数字は同じ pt だと 1〜2pt 小さく見える」ぶんを吸収できる。
      ⚠️ 日本語の見出しは 1.3rem（20.8px）。ここは **1.4rem（22.4px）＝ +1.6px（およそ +1.2pt）**。
         実測（375px / 1440px）：About・Stores・Contact とも 1行に収まる（1.6rem まで折り返さない）。
      ⛔ 印を並べず、構造（.entrance-title の中の .en）で決める＝欄を足しても直らない。 */
/* 💥 **上の余白も 0 に戻すこと。**添え字のときは「見出しとの間 3px」だったが、
      英語版では**それ自体が見出し**なので 0。
      ⛔ `--tf-mt-base` を直さないと、上の共通の決まり（`!important`）が 3px を書き戻す
         ＝ `css/site.css` の `margin-top: 0` が負ける（2026-08-07・つまみを足したときに気づいた）。 */
html:not([lang="ja"]) .entrance-title .en { --tf-fs-base: 1.4rem; --tf-mt-base: 0px; }

/* 入口カードの説明文 ＝ .entrance-text（0.9rem） */
.entrance-text[data-site-text] { --tf-fs-base: 0.9rem; }

/* ヘッダーの項目（HTML にインラインで 0.9rem / 0.65rem と書いてある） */
/* 💥 **新しい項目を足したら、必ずここにも足すこと**（★12）。
      書き漏らすと 1rem 扱いになり、その項目だけ勝手に大きくなる
      （2026-08-02「お知らせ／NEWS」を足したとき、実際にここだけ大きく出た）。 */
[data-site-text="nav-news-jp"],
[data-site-text="nav-about-jp"],
[data-site-text="nav-stores-jp"],
[data-site-text="nav-contact-jp"] { --tf-fs-base: 0.9rem; }

[data-site-text="nav-news-en"],
[data-site-text="nav-about-en"],
[data-site-text="nav-stores-en"],
[data-site-text="nav-contact-en"] { --tf-fs-base: 0.65rem; }

/* ⭐⭐ **英語ページでは、この英字が「主役」になる**（PM 指摘 2026-08-09・教訓174 と同じ形）。
      日本語ページは「日本語（0.9rem）＋ 添え字の英字（0.65rem）」の2段組みだが、
      英語ページでは**日本語の行が落ちる**ので、**添え字のままの 10.4px だけが残っていた**。
      ＝ 入口カード3枚で 2026-08-07 に直したのと**まったく同じ壊れ方**が、ヘッダーに残っていた。

   ⭐ 大きさの決め方＝ **入口カードの先例に合わせた**（日本語の役割 ＋1.6px）:
        入口カード  日本語 20.8px → 英語 22.4px（＋1.6px）
        ヘッダー    日本語 14.4px → 英語 **16.0px（＝1rem・＋1.6px）**
      ＝ PM のご指示「英数字は同じ pt だと1〜2pt 小さく見えるので 1〜2pt 大きく」に沿う。
   ⛔ **つまみ（倍率）は共通のまま**＝ 元の値だけ言語で分ける（PM 決定 2026-08-06「見え方は言語で分けない」を壊さない）。

   ⛔ **実測して安全を確かめてある**（2026-08-09・英語トップ）:
        901 / 1024 / 1440px の3幅で ヘッダー高 66px のまま・はみ出し無し・折り返し無し
        （メニューの高さ 18.7px → 28.8px。66px の枠に十分収まる）
   ⚠️ 日本語ページには当てない（`html:not([lang="ja"])`）＝ あちらは2段組みのままが正しい。
   🔗 同型の一覧は「日本語の欄が落ちて英字が残る」11組。うち入口カード3枚は対応済み、
      ページ見出し4つは**英字が元から主役**なので触らない（教訓174）。 */
html:not([lang="ja"]) [data-site-text="nav-news-en"],
html:not([lang="ja"]) [data-site-text="nav-about-en"],
html:not([lang="ja"]) [data-site-text="nav-stores-en"],
html:not([lang="ja"]) [data-site-text="nav-contact-en"] { --tf-fs-base: 1rem; }

/* ⭐ **引き出し（ハンバーガー）の中は、店舗名と同じくらいに**（PM ご指示 2026-08-09）。
      ⛔ 900px 以下はメニューが**横並びから引き出しに変わる**＝ 見え方の前提が別物になる。
         横並び（🖥）は「4項目が1行に並ぶ帯」なので 16px でちょうどよいが、
         引き出しは**縦に積んだ一覧**で、すぐ下に店舗名（13.6px）が並ぶ。
         16px のままだと**店舗名より大きく**なり、親子の関係が逆に見える。
      ⭐ 実測（プレビュー・375 / 390px）＝ 店舗名 **13.6px**（＝0.85rem）／地域見出し 10.4px。
         ＝ ここを **0.85rem** にして店舗名とそろえる。
      ⚠️ 日本語ページは触らない（引き出しの日本語 14.4px が既に店舗名とほぼ同じ）。
      ⛔ 幅は **900px**（引き出しが出る境目・`css/style.css` と `css/site.css` と同じ）。
         つまみの切り替え（640px）とは別物なので、そろえないこと。 */
/* ⭐ **そこから 2pt 上げる**（PM ご指示 2026-08-09・実物をご覧になっての2回目の調整）。
      店舗名とちょうど同じ（13.6px）にすると、**親（メニュー）と子（店舗名）が同じ重さ**に見える。
      ⭐ 1pt ＝ 1.333px なので **13.6px ＋ 2pt ＝ 16.27px ＝ 1.02rem**。
      ＝ 店舗名 13.6px に対して 1.2倍。親子の段差がはっきりする。
   ⚠️ 0.85rem（店舗名と同じ）は 2026-08-09 のひとつ前の版。戻すならこの値へ。 */
@media (max-width: 900px) {
  html:not([lang="ja"]) [data-site-text="nav-news-en"],
  html:not([lang="ja"]) [data-site-text="nav-about-en"],
  html:not([lang="ja"]) [data-site-text="nav-stores-en"],
  html:not([lang="ja"]) [data-site-text="nav-contact-en"] { --tf-fs-base: 1.02rem; }
}

/* フッターの項目（HTML にインラインで 0.9rem） */
[data-site-text="foot-about"],
[data-site-text="foot-stores"],
[data-site-text="foot-news"],
[data-site-text="foot-contact"] { --tf-fs-base: 0.9rem; }

/* お問い合わせの導入文（元は HTML のインライン指定だった・2026-08-06）。
   💥 `line-height: 2` などがインラインで書いてあると、**つまみを動かしても何も起きない**
      （PM 指摘：「行間が変わりません」）。⭐ 元の値はここに置き、HTML からは外す。 */
.contact-lead {
  --tf-fs-base: 1rem;
  --tf-lh-base: 2;
  --tf-mt-base: 0px;
  --tf-mb-base: 26px;
  color: #ccc;
}

/* ⭐ **営業のご案内へのお断り**（PM ご要望 2026-08-29）。導入文のすぐ下に置く但し書き。
      ⚠️ 元の値はここが唯一の置き場所（`.contact-lead` と同じ扱い＝この部品は text-look.css が持つ）。
      ⚠️ 上の余白は 0＝ 導入文の下の余白（26px）と重なって決まる（隣り合う margin は大きい方が残る）。
         つまみで広げるぶんは padding で足されるので、0 でも上下とも効く（実測 `check-knobs`）。 */
.contact-caution {
  --tf-fs-base: 0.8rem;
  --tf-lh-base: 1.9;
  --tf-mt-base: 0px;
  --tf-mb-base: 26px;
  color: #999;
}

/* フォームの中の文言（元の値は css/contact-form.css。ここには「元の値」だけを写す） */
.cf-note { --tf-fs-base: 0.78rem; --tf-lh-base: 1.7; --tf-mt-base: 5px; --tf-mb-base: 0px; }
.cf-privacy { --tf-fs-base: 0.76rem; --tf-lh-base: 1.9; --tf-mt-base: 18px; --tf-mb-base: 0px; }
.cf-fallback-text { --tf-fs-base: 0.86rem; --tf-lh-base: 1.9; --tf-mt-base: 0px; --tf-mb-base: 16px; }

/* ⭐ **項目名は囲み（フォーム）から受け継いでまとめて動く**（★26）。
      ⚠️ 受け継ぐ側（.cf-label）を「パソコン用／スマホ用の振り分け」に入れないこと。
         入れると、受け継いだ値を 1 に打ち消して**何も起きなくなる**。 */
.cf-form .cf-label {
  /* ⚠️ 元の値はこの2行（焼き込みはここを書き換える・2026-08-08）。 */
  --tf-fs-base: 0.88rem;
  --tf-lh-base: 1.4;
  font-size: calc(var(--tf-fs-base, 1rem) * var(--tf-scale, 1)) !important;
  line-height: calc(var(--tf-lh-base, 1.8) * var(--tf-lh, 1)) !important;
}

/* 店舗の紹介文（一覧 0.95rem／店舗ページ 1rem） */
.store-description { --tf-fs-base: 0.95rem; }
.sd-description { --tf-fs-base: 1rem; }

/* ---- 店舗ページの書式（6店共通・_worker.js の STORE_PAGE_PARTS と揃える） ----
   ⚠️ 部品を足したら、**ここに「元の値」も足す**こと（書き漏れると 1rem 扱いになる）。
   実測値（2026-08-01・375px と 1100px の両方で同じ）:
     店名のふりがな 17.6px / 行間1.8 / 下の余白5px
     店名          51.2px / 行間1.1
     情報の項目名・中身 14.08px / 行間1.7 */
/* 見出しは、サイトのページも店舗ページも同じ作り（.section-title）なので1つにまとめる。
   ⚠️ トップの「ようこそ」なども同じ指定を使う（＝役割ごとにまとめて変えられる）。 */
.section-title .jp { --tf-fs-base: 1.1rem; --tf-lh-base: 1.8; --tf-mt-base: 0px; --tf-mb-base: 5px; }
.section-title .en { --tf-fs-base: 3.2rem; --tf-lh-base: 1.1; --tf-mt-base: 0px; --tf-mb-base: 0px; }
.sd-info .info-label,
.sd-info .info-val { --tf-fs-base: 0.88rem; --tf-lh-base: 1.7; --tf-mt-base: 0px; --tf-mb-base: 0px; }

/* ---- お知らせの見え方（_worker.js の NOTICE_PARTS と揃える） ----

   ⭐ 営業状況・営業カレンダーも、2026-08-01 から**同じ式に乗せた**。
      それまではこの4か所だけ、各CSSに `calc(◯rem * var(--tf-scale,1))` を書く形で、
      行間・上下の余白・パソコン／スマホ別が使えなかった。

   ⚠️ 元の値は css/news.css・css/quake-notice.css・css/calendar.css から**こちらへ移した**。
      あちらに font-size を書き戻さないこと（式が二重になる）。
   実測（2026-08-01・1759px）:
     お知らせページ 見出し 22.4px/行間1.8/下14px（＋下線までの余白12px）
                    本文   16px  /行間2.0/下22px
     全画面のお知らせ 見出し 23.2px/行間1.55/下18px ／ 本文 15.2px/行間2.0/下34px
     カレンダー      見出し 21.6px/行間1.8/下10px（お知らせページの中では17.6px/下6px）
                    説明文 14.4px/行間1.9/下6px */
.news-block-title { --tf-fs-base: 1.4rem; --tf-lh-base: 1.8; --tf-mt-base: 0px; --tf-mb-base: 14px; }
.news-block-lead { --tf-fs-base: 1rem; --tf-lh-base: 2; --tf-mt-base: 0px; --tf-mb-base: 22px; }
.qn-headline { --tf-fs-base: 1.45rem; --tf-lh-base: 1.55; --tf-mt-base: 0px; --tf-mb-base: 18px; }
/* ⭐ **営業状況カードの中身**（2026-08-11 に足した5部品）。
      ⚠️ 元の値は `css/quake-notice.css` から**ここへ移した**（元の値を二箇所に持たない・教訓183）。
      ⚠️ 375 / 620 / 880 / 1440px の4幅で実測し、**どれも同じ値**だったので @media の上書きは要らない。 */
.qn-store-name { --tf-fs-base: 1.15rem; --tf-lh-base: 1.8; --tf-mt-base: 0px; --tf-mb-base: 0px; }
.qn-store-name small { --tf-fs-base: 0.7rem; --tf-lh-base: 1.8; --tf-mt-base: 0px; --tf-mb-base: 0px; }
.qn-badge { --tf-fs-base: 0.85rem; --tf-mt-base: 0px; --tf-mb-base: 0px; }
.qn-store-hours { --tf-fs-base: 0.9rem; --tf-lh-base: 1.8; --tf-mt-base: 10px; --tf-mb-base: 0px; }
.qn-store-note { --tf-fs-base: 0.85rem; --tf-lh-base: 1.7; --tf-mt-base: 10px; --tf-mb-base: 0px; }
.qn-message { --tf-fs-base: 0.95rem; --tf-lh-base: 2; --tf-mt-base: 0px; --tf-mb-base: 34px; }
.cal-title { --tf-fs-base: 1.35rem; --tf-lh-base: 1.8; --tf-mt-base: 0px; --tf-mb-base: 10px; }
.cal-message { --tf-fs-base: 0.9rem; --tf-lh-base: 1.9; --tf-mt-base: 0px; --tf-mb-base: 6px; }

/* お知らせページの中のカレンダーは、元から一回り小さい（css/calendar.css の .sd-calendar） */
.sd-calendar .cal-title { --tf-fs-base: 1.1rem; --tf-mb-base: 6px; }


/* ------------- 行間と前後の余白（本文まわりだけ） -------------

   ⭐ 大きさと同じ形。**式は1回・場所ごとは元の値だけ。**
      --tf-lh-base … 元の行間（単位なしの数値）  × --tf-lh（倍率・既定1）
      --tf-mt-base … 元の上の余白               ＋ --tf-mt（px の足し引き・既定0）

   ⚠️ 余白は**置き換えではなく足し引き**。負の値を持つ場所があるので、
      置き換えるとデザインが飛ぶ（教訓90：負の余白は「隣に何があるか」への依存）。
   ⚠️ `margin` の一括指定ではなく **margin-top / margin-bottom** を個別に書くこと。
      一括で書くと、左右の `auto`（中央寄せ）が消える（.page-lead など）。
   ⚠️ 対象は本文まわりだけ（_worker.js の LOOK_FIELDS の roles と揃える）。
      見出し・ヘッダー・フッターは、行間を詰めると重なり、余白は並びと噛み合わない。 */

/* 💥 **ここは手書きの一覧。つまみを足したら必ず足すこと。**
      入れ忘れると、管理画面には行間・余白のつまみが出るのに**何も起きない**
      （2026-08-06・`contact-lead` で実際に起きた。PM 指摘「行間が変わりません」）。
   ⭐ 測り方＝`node tools/check-knobs.js`（サーバーが出すと言っている項目だけを、実際に動かして確かめる）。 */
[data-site-text="hero-title"],
[data-site-text="hero-sub"],
[data-site-text="hero-tagline"],
[data-site-text="stores-lead"],
[data-site-text="news-lead"],
[data-site-text="contact-lead"],
[data-site-text="contact-caution"],
[data-site-text="contact-note"],
[data-site-text="contact-privacy"],
[data-site-text="contact-fallback"],
[data-site-text="about-body"] p,
/* ⭐ フッターの項目（PM 要望 2026-08-07「フッターの行間の調整が出来ない」）。
      💥 **ここに足し忘れると、つまみは出るのに何も起きない**（教訓141）。
         足したら必ず `node tools/check-knobs.js` で実物を測ること。 */
[data-site-text="foot-about"],
[data-site-text="foot-stores"],
[data-site-text="foot-news"],
[data-site-text="foot-contact"],
/* ⭐ **入口カードの見出しと英字**（PM 指示 2026-08-07「全部統一してほしい」）。
      💥 それまで大きさと位置しか出ておらず、**すぐ下の説明文には行間も余白もあるのに
         見出しには無い**状態だった（役割ごと丸ごと欠けていたので、役割の中を見る検査では鳴らない）。
      ⚠️ 元の値は実測（375/880/1440px とも同じ）＝ 行間 1.35 ／ 上下の余白 0（英字だけ上 3px）。 */
[data-site-text="card-about-jp"],
[data-site-text="card-stores-jp"],
[data-site-text="card-contact-jp"],
[data-site-text="card-about-en"],
[data-site-text="card-stores-en"],
[data-site-text="card-contact-en"],
/* ⭐ **ヘッダーの項目**（日本語・英字の2段）。
      ⚠️ 上下の余白は**ヘッダーの高さ（66px）で頭打ち**＝範囲を狭めてある（`_worker.js` の maxByRole）。 */
[data-site-text^="nav-"],
.entrance-text[data-site-text],
.store-description,
.sd-description,
.section-title .jp,
.section-title .en,
.sd-info .info-label,
.sd-info .info-val,
.news-block-title,
.news-block-lead,
.qn-headline,
.qn-message,
.qn-store-name,
.qn-store-name small,
.qn-store-hours,
.qn-store-note,
.cal-title,
.cal-message {
  line-height: calc(var(--tf-lh-base, 1.8) * var(--tf-lh, 1)) !important;

  /* 💥 **余白を広げるときは padding、詰めるときは margin。**
        margin だけで足すと、囲みの**最後の要素では外へ抜けてしまい効かない**
        （写真の上の1行がこれで、いくら広げても動かなかった・PM 実機で発覚 2026-08-01）。
        padding は抜けないので、広げる側は必ず効く。詰める側は padding に負の値が無いので margin で。
     ⚠️ 対象の要素に背景・枠線が無いことを確認してから使うこと（あると塗りが広がる）。
        いまの9か所＋店舗の紹介文は、いずれも背景も枠線も無い（実測済み）。 */
  padding-top: max(0px, calc(var(--tf-mt, var(--tf-mt-base, 0px)) - var(--tf-mt-base, 0px))) !important;
  padding-bottom: max(0px, calc(var(--tf-mb, var(--tf-mb-base, 0px)) - var(--tf-mb-base, 0px))) !important;
  margin-top: calc(var(--tf-mt-base, 0px) + min(0px, calc(var(--tf-mt, var(--tf-mt-base, 0px)) - var(--tf-mt-base, 0px)))) !important;
  margin-bottom: calc(var(--tf-mb-base, 0px) + min(0px, calc(var(--tf-mb, var(--tf-mb-base, 0px)) - var(--tf-mb-base, 0px)))) !important;
}

/* ⭐ **上下の余白だけ**を出す場所（行間は出していない）。
      ⚠️ 上の共通の決まりに入れると `line-height` まで書き換わり、**いまの見え方が変わる**。
         `.cf-open` は `line-height: normal` の1行ボタンなので、行間は出していない
         （理由は `_worker.js` の `contact-open` の `lookExcept`）。 */
/* 💥 **★15：枠線・背景のある要素に padding は使えない。**
      `.cf-open` は**枠線のあるボタン**で、上下 17px の padding が**ボタンの形そのもの**。
      共通の決まり（広げる側は padding）をそのまま当てたら、その 17px を 0 に潰した
      （2026-08-07・12ページ×3幅の突き合わせで気づいた。⭐ 測っていなければ出ていた）。
   ⭐ ここは**両方向とも margin で足し引きする**（`.news-block-title` と同じ扱い）。
      ⚠️ `display: inline-block` なので上下の margin が効く（インラインでは効かない）。 */
[data-site-text="contact-open"] {
  margin-top: calc(var(--tf-mt, var(--tf-mt-base, 0px))) !important;
  margin-bottom: calc(var(--tf-mb, var(--tf-mb-base, 0px))) !important;
}

/* 💥 **状況の札（`.qn-badge`）も同じ扱い**（2026-08-11）。
      ⛔ **枠線と背景のある丸い札**で、上下 6px の padding が**札の形そのもの**。
         共通の決まり（広げる側は padding）に入れると、その 6px を 0 に潰す
         （`.cf-open` で 2026-08-07 に踏んだのとまったく同じ罠・★15）。
      ⭐ ここは**両方向とも margin で足し引き**する。
      ⚠️ 行間は出していない（1行の札）＝ 理由は `_worker.js` の `store-badge` の `lookExcept`。 */
.qn-badge {
  margin-top: calc(var(--tf-mt, var(--tf-mt-base, 0px))) !important;
  margin-bottom: calc(var(--tf-mb, var(--tf-mb-base, 0px))) !important;
}

/* ---- 場所ごとの「元の行間・元の余白」（実測してから書いた値） ---- */

/* 入口カードの見出し・英字／ヘッダーの項目（2026-08-07 に実測して足した）。
   ⚠️ 3つの幅（375 / 880 / 1440px）で同じ値だったので、@media の上書きは要らない。 */
[data-site-text="card-about-jp"],
[data-site-text="card-stores-jp"],
[data-site-text="card-contact-jp"] { --tf-lh-base: 1.35; --tf-mt-base: 0px; --tf-mb-base: 0px; }

/* ⚠️ 上の余白の元の値を **3px → 0px** にした（2026-08-10）。
      3px は「日本語の1行下に置く」ためのものだったが、**横並びにしたので意味を失った**
      （`css/site.css` の `.entrance-title` を flex にした）。つまみ自体は残る。 */
[data-site-text="card-about-en"],
[data-site-text="card-stores-en"],
[data-site-text="card-contact-en"] { --tf-lh-base: 1.35; --tf-mt-base: 0px; --tf-mb-base: 0px; }

[data-site-text^="nav-"] { --tf-lh-base: 1.8; --tf-mt-base: 0px; --tf-mb-base: 0px; }

/* 💥 **ヘッダーの英字は、2つの部品が同じ要素に当たる**（2026-08-07・実測で発覚）:
      ① 文章の欄「ヘッダー：その英字」の**上の余白**（`--tf-mt`）
      ② 余白の表「ヘッダーのメニュー：日本語と英字のあいだ」（`--tf-pad-t`・`css/site.css`)
      ⛔ 上の共通の決まりが `margin-top` を `!important` で書くので、**②が黙って死ぬ**（★25）。
         実測：`check-knobs.js` が 12件「動かない」と鳴った。
   ⭐ **両方を足す**（どちらのつまみも生かす）。⚠️ ここは後ろに書くこと（同じ強さなら後ろが勝つ）。 */
.nav-menu a span:last-child[data-site-text] {
  margin-top: calc(var(--tf-mt-base, 0px) + min(0px, calc(var(--tf-mt, var(--tf-mt-base, 0px)) - var(--tf-mt-base, 0px))) + var(--tf-pad-t, var(--tf-pad-t-base, 0px))) !important;
}

[data-site-text="hero-sub"] { --tf-lh-base: 2.2; --tf-mt-base: 25px; --tf-mb-base: 25px; }
[data-site-text="hero-tagline"] { --tf-lh-base: 1.8; --tf-mt-base: 0px; --tf-mb-base: 0px; }
[data-site-text="stores-lead"],
[data-site-text="news-lead"] { --tf-lh-base: 2; --tf-mt-base: 0px; --tf-mb-base: 0px; }
[data-site-text="about-body"] p { --tf-lh-base: 2.2; --tf-mt-base: 0px; --tf-mb-base: 20px; }
/* ⚠️ 行間 1.9 は空きすぎ（PM 指摘 2026-08-02）→ 1.7／上の余白 14→10px */
.entrance-text[data-site-text] { --tf-lh-base: 1.7; --tf-mt-base: 10px; --tf-mb-base: 0px; }
.store-description { --tf-lh-base: 1.9; --tf-mt-base: 20px; --tf-mb-base: 25px; }
.sd-description { --tf-lh-base: 2.1; --tf-mt-base: 34px; --tf-mb-base: 0px; }

/* 💥 **お知らせページの見出しには下線（border-bottom）がある。**
      下の余白を padding で広げると、**下線が文字から離れるだけ**で「下の余白」にならない。
      ここだけ margin で足し引きする（文字と下線の間隔 12px はそのまま残す）。
   ⚠️ 上の共通の決まりの**あとに書くこと**（同じ強さなので、後ろが勝つ）。
   ⚠️ 囲みの最後の要素ではないので、margin が外へ抜ける心配はない（実測済み）。 */
.news-block-title {
  padding-bottom: 12px !important;
  /* ⚠️ 元の値 14px は上の一覧（`--tf-mb-base`）に既にある＝**ここには書かない**（二箇所に持たない）。 */
  margin-bottom: calc(var(--tf-mb, var(--tf-mb-base, 0px))) !important;
}

/* ---- 狭い画面で元の値が変わる場所（元の値だけを上書きする） ---- */
@media (max-width: 900px) {
  [data-site-text="hero-sub"] { --tf-fs-base: 0.95rem; --tf-mt-base: 15px; --tf-mb-base: 15px; }
  [data-site-text="about-body"] p { --tf-fs-base: 0.95rem; --tf-lh-base: 2; }
  .sd-description { --tf-fs-base: 0.95rem; --tf-lh-base: 2; }
  /* お知らせページの見出し（css/news.css の 900px の指定を、元の値として移したもの） */
  .news-block-title { --tf-fs-base: 1.2rem; }
}

/* ⚠️ 全画面のお知らせだけ、境目が **600px**（css/quake-notice.css から移した値）。
      切り替え幅は複数のCSSが別々に持っている＝**変えるときは横断で探すこと。** */
@media (max-width: 600px) {
  .qn-headline { --tf-fs-base: 1.2rem; }
}

/* カレンダー（css/calendar.css の 640px の指定を、元の値として移したもの）。
   ⚠️ お知らせページの中（.sd-calendar .cal-title）は指定が強いので 1.1rem のまま
      ＝ 移す前と同じ見え方（実測で確認）。 */
@media (max-width: 640px) {
  .cal-title { --tf-fs-base: 1.25rem; }
  .cal-message { --tf-fs-base: 1.02rem; }
}

/* ------------- カレンダーの表（マス目）と期間の表示（2026-08-02 追加） -------------

   ⭐ **元の値は、ここに1か所だけ持つ**（css/calendar.css からこちらへ移した）。
      あちらに font-size / min-height を書き戻さないこと（式が二重になる）。
   ⚠️ 倍率は囲み（.cal-table）に付き、中の曜日・日付・マス・凡例が**受け継いで**拡がる。
      中の要素を「パソコン用／スマホ用の振り分け」に足すと受け継ぎが切れる（上の注意書き）。
   実測（2026-08-02・1400px）：「19:00〜25:00」は 1.15倍で 98px（入る幅 109px）で収まり、
   1.30倍で 111px となりはみ出す＝**上限は 1.15**。 */

.cal-range { --tf-fs-base: 0.82rem; --tf-mt-base: 0px; --tf-mb-base: 22px; }
.cal-table { --tf-mt-base: 0px; --tf-mb-base: 0px; }
.cal-dow { --tf-fs-base: 0.82rem; }
.cal-date { --tf-fs-base: 0.88rem; --tf-mb-base: 5px; }
.cal-cell { --tf-fs-base: 0.84rem; }
.cal-legend { --tf-fs-base: 0.78rem; }
.cal-li-date { --tf-fs-base: 0.85rem; }
.cal-li-date small { --tf-fs-base: 0.72rem; }
.cal-li-body { --tf-fs-base: 0.85rem; }
.cal-li-body .cal-item small { --tf-fs-base: 0.76rem; }

/* 期間の表示の前後の余白（式は上の共通のものを使う） */
.cal-range {
  padding-top: max(0px, calc(var(--tf-mt, var(--tf-mt-base, 0px)) - var(--tf-mt-base, 0px)));
  padding-bottom: max(0px, calc(var(--tf-mb, var(--tf-mb-base, 0px)) - var(--tf-mb-base, 0px)));
  margin-top: calc(var(--tf-mt-base, 0px) + min(0px, calc(var(--tf-mt, var(--tf-mt-base, 0px)) - var(--tf-mt-base, 0px))));
  margin-bottom: calc(var(--tf-mb-base, 0px) + min(0px, calc(var(--tf-mb, var(--tf-mb-base, 0px)) - var(--tf-mb-base, 0px))));
}

/* 表の前後の余白 */
.cal-table {
  padding-top: max(0px, calc(var(--tf-mt, var(--tf-mt-base, 0px)) - var(--tf-mt-base, 0px)));
  padding-bottom: max(0px, calc(var(--tf-mb, var(--tf-mb-base, 0px)) - var(--tf-mb-base, 0px)));
  margin-top: calc(var(--tf-mt-base, 0px) + min(0px, calc(var(--tf-mt, var(--tf-mt-base, 0px)) - var(--tf-mt-base, 0px))));
  margin-bottom: calc(var(--tf-mb-base, 0px) + min(0px, calc(var(--tf-mb, var(--tf-mb-base, 0px)) - var(--tf-mb-base, 0px))));
}

/* 💥 **マスの高さは「元の高さ ＋ 足し引き」。**置き換えにすると、
      狭い画面（62px）と広い画面（132px）の作り分けが消える。
   ⚠️ --tf-cell-h は**幅で分けない**ので、640px の振り分けを通さず直接読む。
   ⚠️ 狭い画面は「日付ごとの一覧」に変わるので、そちらの行にも同じ値を効かせる
      （どちらの幅でも死んだつまみにならないように・★9）。 */
.cal-cell {
  min-height: calc(var(--tf-cell-h-base, 132px) + var(--tf-cell-h, 0px));
}

/* 💥 **囲みの中のカレンダーは、元の高さが違う（120px）。**
      `.sd-calendar .cal-cell` は詳細度がこちらより高いので、
      あちらに min-height を残すと**つまみが黙って効かなくなる**。
      元の値だけをここで上書きする（式は上の1つのまま）。 */
.sd-calendar .cal-cell { --tf-cell-h-base: 120px; }

/* 同じ理由で、囲みの中の「期間の表示」は下の余白が元から狭い（16px）。 */
.sd-calendar .cal-range { --tf-mb-base: 16px; }

/* 💥 **一覧の行に min-height を掛けても効かない。**
      元の高さを持たせていなかった（0px 扱い）ため、`min-height` は足し引き分だけになり、
      中身の自然な高さ（実測 60px）を超えられなかった＝**スマホ幅で死んだつまみ**だった
      （実測 2026-08-02：+60px にしても 60px のまま。fable 監査で発覚）。
   ⭐ 一覧では**上下の余白**で効かせる（元は 11px。−20px でも 1px 残る）。
   ⚠️ 左右の 13px は変えない（`css/calendar.css` の `padding: 11px 13px`）。 */
.cal-li {
  /* ⚠️ 元の値はこの1行（焼き込みはここを書き換える・2026-08-08）。
        ⚠️ マス目（`.cal-cell`）の `--tf-cell-h-base` とは**別の場所**（親子ではない）。 */
  --tf-cell-h-base: 11px;
  padding-top: calc(var(--tf-cell-h-base, 0px) + var(--tf-cell-h, 0px) / 2);
  padding-bottom: calc(var(--tf-cell-h-base, 0px) + var(--tf-cell-h, 0px) / 2);
}

@media (max-width: 900px) {
  .cal-cell { --tf-fs-base: 0.66rem; --tf-cell-h-base: 62px; }
}

/* 狭い画面での元の大きさ（css/calendar.css の 640px の指定を移したもの） */
@media (max-width: 640px) {
  .cal-range { --tf-fs-base: 0.95rem; }
  .cal-li-date { --tf-fs-base: 1rem; }
  .cal-li-date small { --tf-fs-base: 0.85rem; }
  .cal-li-body { --tf-fs-base: 1rem; }
  .cal-li-body .cal-item small { --tf-fs-base: 0.88rem; }
  .cal-legend { --tf-fs-base: 0.9rem; }
}

/* ------------- 枠線の太さ・店舗の行の間隔・日にちの余白（2026-08-02 追加） -------------

   ⚠️ どれも「元の値 ＋ 足し引き」。置き換えにすると、狭い画面用の作り分けが消える。
   ⚠️ 枠線の太さだけは **0 も意味のある値**（枠線を消す）ので、`--tf-border-w` は
      js/text-format.js 側でも 0 を捨てないようにしてある。 */

.cal-cell,
/* 曜日の枠も同じ太さで動かす（PM 要望 2026-08-02）。
   ⚠️ 曜日は自分の倍率を持つが、**枠の太さは表のつまみ**（`.cal-table` から受け継ぐ）。 */
.cal-dow,
/* 💥 **狭い画面はマス目が消えて「日付ごとの一覧」になる。**
      マス目にだけ当てていたため、**スマホ幅では枠線のつまみが何も動かさない**
      状態だった（PM 実機で発覚 2026-08-02・★9「効かないつまみを出さない」）。
   ⚠️ 「休業・時間変更のある日」の左の帯（3px）は `.cal-li.has-change` が持っており、
      詳細度が高いので**そちらは変わらない**（目印としての太さを保つ）。 */
.cal-li {
  border-width: var(--tf-border-w, var(--tf-border-w-base, 1px));
}

/* 店舗ごとの行の間隔（元は 4px）。最後の1行は下に余白を付けない。 */
.cal-item {
  margin-bottom: calc(var(--tf-row-gap, var(--tf-row-gap-base, 4px)));
}

.cal-item:last-child {
  margin-bottom: 0;
}

/* 日にちの下の余白（元は 5px）。日にちだけは前後の余白のうち「下」を出している。 */
.cal-date {
  /* ⚠️ 元の値 5px は上の `--tf-mb-base` に置いた（二箇所に持たない・2026-08-08）。 */
  margin-bottom: calc(var(--tf-mb, var(--tf-mb-base, 0px)));
}

/* 背の低い画面（13型ノート・SE2）は、導入文の下も詰める（css/site.css の max-height:700px と対）。
   ⚠️ 片方だけ変えると、入口カードが画面から落ちる。
   ⛔ **2026-08-10 から 900px 以下だけ。**パソコン幅は「設計幅 1440px で丸ごと拡大縮小」に
      変えたので、**窓の高さで見え方が変わる決まりが1つでも残ると、そこだけ比率が崩れる。**
      💥 実際、これを外し忘れていたために **1366×656 の窓だけ導入文の高さが 109.7 → 94.8px**
         になり（行数は同じ5行のまま・行間だけ変わっていた）、下のフッターまで 47px ずれた
         （2026-08-10 の実測で発覚）。⛔ 高さで切り替える決まりは**全ファイルを grep して揃える**。
   🔗 対＝`css/site.css` の 2か所も同じ条件にしてある。 */
@media (max-height: 700px) and (max-width: 900px) {
  /* 写真の上のコピーも詰める（縦が無い画面では、この上下の余白が効いてくる） */
  [data-site-text="hero-sub"] { --tf-mt-base: 10px; --tf-mb-base: 10px; --tf-lh-base: 1.9; }
}

/* ---- お知らせ枠の位置（2026-08-03・PM 要望）----

   ⚠️ **2種類ある。**1枚目は「下寄せ」なので、ふつうの上の余白を足すと
      **上の文章の方が押し上げられる**（枠は動かない）。PM 実機で指摘された。
   ⭐ 枠だけ動かす … `position: relative` の `top`（並びに影響しない＝上の文章はそのまま）
   ⭐ 文章ごと動かす … 枠の**下の余白を逆向きに**足す。下寄せなので、
      下の余白を減らすと（負にすると）**塊ごと下へ**動く。
   ⚠️ どちらも **プラスで下へ**。CSS の向きと逆なので、式で符号を反転させている。
   💥 この枠には背景と枠線があるので、共通の式（広げるときは padding）は使えない（★15）。 */
[data-site-text="home-news"] {
  --tf-box-y: var(--tf-box-y-pc);
  --tf-block-y: var(--tf-block-y-pc);
  position: relative;
  top: calc(var(--tf-box-y, var(--tf-box-y-base, 0px)));
  /* 💥 **ここを負の値にしない。**
        もとは -10px だった（お知らせ枠の上に「導入文」があった頃の名残で、
        あちらの下余白 55px を少し詰めるための値）。
        導入文を廃止して**キャッチのすぐ下**に来た結果、`position: relative` で
        上に描かれるため **キャッチの文字に 10px かぶった**（本番で発覚 2026-08-03）。
     ⚠️ プレビューでは PM が「枠だけ +16px」などを入れていたため、かぶって見えなかった。
        ＝ **保存値でごまかされて、既定の欠陥が隠れていた。** */
  margin-top: 0 !important;
  /* ⛔ **余白では動かさない**（2026-08-06・PM 指摘で全面的に作り替え）。
        余白で動かすと**塊の高さが変わり、ページ全体が伸び縮みして下がせり上がる**
        ＝ つまみを触るたびに見ていた場所がずれ、毎回スクロールし直すことになる。
     ⭐ **枠だけ＝`top`／文章ごと＝囲みの `transform`**。どちらも並びに影響しない。
     （下の古い説明は、なぜこうなったかの記録として残す） */
  /* 💥💥 **ここに boxY を混ぜてはいけない**（2026-08-06・PM 指摘で是正）。
        1枚目は**下寄せ**なので、下の余白を増やすと**塊ごと押し上げられる**。
        「枠だけ下げる」ぶんの場所を下の余白で確保していたため、実測でこうなっていた：
          📱 「枠だけ +40」→ **枠は 0（動かない）／ロゴとキャッチが −40**（＝名前と真逆）
          🖥 「枠だけ −40」→ 枠 0 ／ ロゴ・キャッチ +40
        ＝ 場所を確保するつもりの式が、**そのまま「上の文章を動かす」動作**になっていた。
     ⭐ **枠だけ＝`top` ただ1つ**（並びに影響しない）。
        **文章ごと＝下の余白を逆向きに**（下寄せなので、減らすと塊が下がる・★53）。
     ⚠️ `top` は箱の高さを増やさないので、下げすぎると下の区画に重なる。
        **それは式ではなく「範囲」で担保する**（`_worker.js` の `lookRanges`。端の値で実測済み）。 */
  /* ⛔ 余白は 0 のまま（動かすのは `top` と、下の囲みの `transform` だけ）。 */
  margin-bottom: 0 !important;
}

/* ⭐ **「上の文章ごと」＝印を付けた囲みを、そのまま動かす。**
      印は HTML の `data-tf-block="<欄のid>"`（トップの `.hero-content`）。
   ⚠️ `transform` は並びに影響しない＝**下の内容は1pxも動かない**。
   ⚠️ 値は `js/text-format.js` が、この囲みにも渡している。 */
[data-tf-block] {
  --tf-block-y: var(--tf-block-y-pc);
  transform: translateY(calc(var(--tf-block-y, var(--tf-block-y-base, 0px))));
}

@media (max-width: 640px) {
  [data-site-text="home-news"] {
    --tf-box-y: var(--tf-box-y-sp);
    --tf-block-y: var(--tf-block-y-sp);
  }

  [data-tf-block] {
    --tf-block-y: var(--tf-block-y-sp);
  }
}

/* ============ 画像の見せ方：パソコン用とスマホ用（宿題E・2026-08-05）============

   ⭐ **写真の「どこを見せるか」を、パソコンとスマホで別々に決められる**（PM 要望）。
      画面の縦横比が変わると見せたい場所が変わるため、文字より効きが大きい。
   ⭐ **どちらを使うかは、この決まりだけで解決する**（表示側の JS は幅を見ない）。
      ＝ 画面の回転や幅の変更に、そのまま追従する。
   ⛔ **スマホ用が無いときは、パソコン用にそのまま落ちる**（`var(…-sp, var(…-pc))`）
      ＝ **「パソコンと同じ」**。★35 の罠を避けるため、管理画面では
      「スマホだけ別に決める／パソコンと同じに戻す」を**選択肢として出している**。
      ⚠️ 文字の大きさは逆に「引き継がない」形（あちらは既定値 100% を選べる必要があるため）。
         写真には「既定の位置」という概念が無いので、引き継ぐ方が正しい。
   ⚠️ 印は `.if-resp`（`js/image-focus.js` が付ける）。**当て先の一覧をここに持たない**
      ＝ 写真を足しても、この並びを直さなくてよい。
   ⚠️ 境目 640px は、文字の大きさ・余白と同じ値。**変えるときは横断で探すこと。** */
.if-resp {
  object-fit: cover;
  object-position: var(--if-pos, 50% 50%);
}

/* 💥 **回転・拡大は「決めてある写真」にだけ当てる**（印 `.if-tr` が付いているとき）。
      決めていない写真にまで `transform` を書くと、
      **カードに乗せたときの拡大演出（`.entrance:hover .entrance-img` の scale(1.05) など）を殺す。**
   ⚠️ `!important` は、その演出に勝つために要る。
      以前は「決めたときだけインラインで書く」作りで、インラインが `:hover` に勝っていた
      ＝ **決めてある写真の見え方は、これまでと同じ**（2026-08-05 に実測で確認）。
   ⚠️ パソコンでは何も決めず、スマホだけ決めた写真は、パソコン幅でも印が付く
      ＝ その1枚だけ、パソコンでの拡大演出が出なくなる（実害は小さいので、そのままにしてある）。 */
.if-resp.if-tr {
  transform: var(--if-tr, none) !important;
  transform-origin: var(--if-org, 50% 50%) !important;
}

.if-resp {
  --if-pos: var(--if-pos-pc, 50% 50%);
  --if-tr: var(--if-tr-pc, none);
  --if-org: var(--if-org-pc, 50% 50%);
}

@media (max-width: 640px) {
  .if-resp {
    --if-pos: var(--if-pos-sp, var(--if-pos-pc, 50% 50%));
    --if-tr: var(--if-tr-sp, var(--if-tr-pc, none));
    --if-org: var(--if-org-sp, var(--if-org-pc, 50% 50%));
  }
}

/* ==================== 余白と大きさ（宿題D・2026-08-05）====================

   ⭐ **元の値（150px・80px …）は css/site.css。ここは「どちらの幅の値を使うか」だけ。**
      文字の大きさ・行間とまったく同じ振り分け方（640px でパソコン用／スマホ用を切り替える）。
   🔗 場所の正本は `_worker.js` の LAYOUT_PARTS（当てる相手＝sel）。
      ⚠️ ここに並べる印は、あちらの sel と**必ずそろえること**。
         片方だけだと「つまみは出るのに動かない」（★9）。
   ⭐ トップ1枚目の高さ（--tf-hero-h）も**幅で分ける**ようにした（2026-08-07 ⑪）。
      パソコンは `min-height: clamp(280px, 58vh, 860px)`、スマホは 88svh と**別の式**なので、
      **両方に同じ足し引き**を入れてある（`css/site.css`）。 */

.page-head,
.page-head .section-title,
.section.news-section,
.section.sd-section,
.section.about,
.section.stores,
.section.contact,
.footer,
.footer-logo,
.footer-nav,
.footer-staff,
.entrance-section,
.entrance-section .section-title,
.nav-menu,
.nav-menu a span:last-child,
/* ⭐ 地域の切り替え（店舗紹介）／お知らせの切り替えタブ。PM 指摘 2026-08-08 */
.store-tabs,
.news-tabs {
  --tf-pad-t: var(--tf-pad-t-pc);
  --tf-pad-b: var(--tf-pad-b-pc);
  --tf-menu-w: var(--tf-menu-w-pc);
  --tf-gap: var(--tf-gap-pc);
  /* ⭐ フッターの**外側**の上のすき間（PM 指摘 2026-08-07「フッターはフッターで直せるべき」） */
  --tf-out-t: var(--tf-out-t-pc);
}

/* ⛔⛔ **親のつまみを受け継がない**（2026-08-08・教訓201）
      💥 上の並びは `--tf-pad-t: var(--tf-pad-t-pc)` と**打ち消しているつもり**だったが、
         **`--tf-pad-t-pc` そのものが継承する**ので、親（区画）の値がそのまま降りてきていた。
         ＝ 区画の余白を動かすと、中のタブまで一緒に動く。焼き込みでこれが実害になった。
      ⭐ `initial` は「その変数は無い」と同じ意味になり、`var(…, 0px)` が既定に落ちる。
      ⭐ **自分のつまみ（applyLook が付けるインライン）はインラインなので、こちらより強い**
         ＝ このタブ自身の調整は従来どおり効く。
      ⚠️ **大きさ（`--tf-scale`）は入れないこと**＝ 囲みから受け継いで拡がる作り（★26）。 */
.news-tabs,
.store-tabs {
  --tf-pad-t-pc: initial; --tf-pad-t-sp: initial;
  --tf-pad-b-pc: initial; --tf-pad-b-sp: initial;
  --tf-gap-pc: initial;   --tf-gap-sp: initial;
}

/* トップ1枚目の高さ。⚠️ 当て先は `.hero` ひとつだけなので、上の並びとは別に書く。 */
.hero { --tf-hero-h: var(--tf-hero-h-pc); }

/* ⭐ **本文の左右の余白**（2026-08-07 ⑩）。
      ⛔ 当て先は本文の入れ物だけ。ヘッダーとフッターの `.container` は入れないこと
         （同じクラスを使っているので、入れると header/footer も一緒に動く）。
      🔗 元の値 20px は `css/style.css` の `.container`。ここは足し引き。 */
/* 💥 **教訓134：`padding: 0 20px` は HTML のインラインに残っていた。**
      インラインは CSS より強いので、つまみを作っても**黙って動かなかった**
      （2026-08-07・実測で発覚。お問い合わせの区画のときとまったく同じ形）。
      ⭐ 先に**インラインを外して、元の値をここへ移した**（14か所）。
      ⚠️ 印は `.container-body`（本文の入れ物だけに付けた印）。
         ヘッダーとフッターの `.container` には付けていない＝あちらは動かない。 */
.container-body {
  --tf-pad-l: var(--tf-pad-l-pc);
  --tf-pad-r: var(--tf-pad-r-pc);
  padding-left: calc(var(--tf-pad-l, var(--tf-pad-l-base, 20px)));
  padding-right: calc(var(--tf-pad-r, var(--tf-pad-r-base, 20px)));
}

@media (max-width: 640px) {
  .hero { --tf-hero-h: var(--tf-hero-h-sp); }

  .container-body {
    --tf-pad-l: var(--tf-pad-l-sp);
    --tf-pad-r: var(--tf-pad-r-sp);
  }
}

@media (max-width: 640px) {

.page-head,
.page-head .section-title,
.section.news-section,
.section.sd-section,
.section.about,
.section.stores,
.section.contact,
.footer,
.footer-logo,
.footer-nav,
.footer-staff,
.entrance-section,
.entrance-section .section-title,
.nav-menu,
.nav-menu a span:last-child,
.store-tabs,
.news-tabs {
    --tf-pad-t: var(--tf-pad-t-sp);
    --tf-pad-b: var(--tf-pad-b-sp);
    --tf-menu-w: var(--tf-menu-w-sp);
    --tf-gap: var(--tf-gap-sp);
    --tf-out-t: var(--tf-out-t-sp);
  }
}

/* ⭐⭐ **中の帯（601〜640px）**（段3・2026-08-09）
      ⛔ **なぜ要るか**：つまみは「🖥／📱」の2つだが、CSS の切り替え幅は 600 と 640 が混在する。
         地域の切り替え（`.store-tabs`）は **600px** で並びが変わるのに、
         つまみの振り分けは **640px** ＝ **601〜640px だけ、元の値が別**（≤600 は −46px／601〜640 は −36px）。
         足し引きの時代はどちらにも同じだけ足したので気づかなかったが、
         **絶対値では 1つの数しか持てず、この帯が潰れる**（実測＝10px ずれる）。
      ⭐ そこで**この帯だけの項目**（`padBMid`・`optIn`）を用意し、その値をここで受ける。
      ⚠️ **控えを書かない**＝ 触っていなければ `--tf-pad-b` は「無い」状態になり、
         当て込み側の `var(--tf-pad-b, var(--tf-pad-b-base, −36px))` が**この帯の元の値**に落ちる。
         ＝ ★35（「既定と同じ値は保存しない」と「未設定なら引き継ぐ」の同居）を踏まない。
      ⛔ **`(max-width: 640px)` の並びより後に置くこと**（同じ強さなので後が勝つ）。
      🔗 どの場所にこの帯が要るかは `node tools/check-absband.js --prod` が実測で鳴らす。 */
@media (min-width: 601px) and (max-width: 640px) {
  .store-tabs {
    --tf-pad-b: var(--tf-pad-b-mid);
  }
}

/* 💥 **★36 CSS の変数は継承する。**
      フッターの中にはロゴ・メニュー・スタッフ用が入っているので、
      `.footer` に付けた `--tf-pad-t-pc` が**そのまま子にも降りてくる**。
      放っておくと「フッター全体の上を +20px」で**ロゴの下・スタッフ用の上も +20px 動く**
      （＝表のつまみで曜日まで動いていたのと同じ壊れ方・2026-08-02）。
      見出しも同じ（`.page-head` の中に `.section-title` がある）。
   ⭐ **受け皿の変数に既定を書いて、継承を断つ。**
      管理画面・表示側が付けるのは要素のインライン指定なので、こちらより強い
      ＝ 自分のつまみは従来どおり効く。
   ⚠️ **親から受け継いで一緒に動かしたい子は、ここに入れないこと。** */
.page-head .section-title,
.footer-logo,
.footer-nav,
.footer-staff,
/* 💥 ★36 「Welcome」の見出しは `.entrance-section` の中にある。
      区画の上の余白を動かしたときに、見出しの下の余白まで一緒に動かないよう継承を断つ。 */
.entrance-section .section-title,
/* ⚠️ ヘッダーのメニューの英字は `.nav-menu` の中にある。
      いま `.nav-menu` は上下の余白のつまみを持っていないが、**将来足したときに巻き添えにしない**
      よう、はじめから断っておく（この行を消すと、そのとき静かに壊れる）。 */
.nav-menu a span:last-child {
  /* ⛔⛔ **断つときは `initial`。`0px` と書いてはいけない**（2026-08-09・段3で実測して発覚）。
        💥 `0px` は「値がある」状態なので、絶対値の当て込み
           `var(--tf-pad-b, var(--tf-pad-b-base, 18px))` が**元の値まで届かず 0 になる**。
           実測＝ フッターのメニューの下の余白 18px が消え、下の並びが 20px せり上がっていた。 */
  --tf-pad-t-pc: initial;
  --tf-pad-t-sp: initial;
  --tf-pad-b-pc: initial;
  --tf-pad-b-sp: initial;
}


/* ============================================================================
   ⭐ **焼き込み：文章の欄**（2026-08-08・段2-2）
   ⛔ **このシートが最後に読まれる**＝同じ強さなら勝つ。だから末尾に置く。
   ⭐ 数値を計算せず**元の式ごと包んである**（`calc((clamp(...)) * 1.05)`）＝ clamp・rem・vw でも正確。
   ⛔ **2欄以上に当たる元の値は、印を3回重ねて詳細度を上げてある**（教訓189）。
      同じ要素を3回指しているだけで、当たる相手は変わらない。
   ⛔ **1つの要素・1つの項目・1つの帯につき規則は1本だけ。**
      💥 複数出すと後の方が勝って別の値に化ける（ロゴで実際に起きかけた）。
   ⚠️ 焼いたぶんは KV の site_texts.looks を 0 に戻すこと（両方あると二重に効く）。
   ============================================================================ */

@media (min-width: 641px) {
    /* home-news / boxY  元 0px ＋58  [欄の要素] */
    [data-site-text="home-news"][data-site-text="home-news"][data-site-text="home-news"] { --tf-box-y-base: calc((0px) + 58px); }
    /* hero-sub / scale  元 1.1rem ×1.05  [欄の要素] */
    [data-site-text="hero-sub"][data-site-text="hero-sub"][data-site-text="hero-sub"] { --tf-fs-base: calc((1.1rem) * 1.05); }
    /* hero-sub / lh  元 2.2 ×0.9  [欄の要素] */
    [data-site-text="hero-sub"][data-site-text="hero-sub"][data-site-text="hero-sub"] { --tf-lh-base: calc((2.2) * 0.9); }
    /* hero-sub / mb  元 25px ＋-12  [欄の要素] */
    [data-site-text="hero-sub"][data-site-text="hero-sub"][data-site-text="hero-sub"] { --tf-mb-base: calc((25px) + -12px); }
    /* welcome-jp / lh  元 1.8 ×0.85  [欄の要素] */
    [data-site-text="welcome-jp"][data-site-text="welcome-jp"][data-site-text="welcome-jp"] { --tf-lh-base: calc((1.8) * 0.85); }
    /* welcome-jp / mt  元 0px ＋-12  [欄の要素] */
    [data-site-text="welcome-jp"][data-site-text="welcome-jp"][data-site-text="welcome-jp"] { --tf-mt-base: calc((0px) + -12px); }
    /* welcome-jp / mb  元 5px ＋-12  [欄の要素] */
    [data-site-text="welcome-jp"][data-site-text="welcome-jp"][data-site-text="welcome-jp"] { --tf-mb-base: calc((5px) + -12px); }
    /* about-body / lh  元 1.8 ×1.2  [[data-site-text="hero-title"]] */
    [data-site-text="about-body"] p { --tf-lh-base: calc((1.8) * 1.2); }
    /* about-body / lh  元 2.2 ×1.2  [[data-site-text="about-body"] p] */
    [data-site-text="about-body"] p { --tf-lh-base: calc((2.2) * 1.2); }
}

@media (max-width: 640px) {
    /* home-news / boxY  元 0px ＋52  [欄の要素] */
    [data-site-text="home-news"][data-site-text="home-news"][data-site-text="home-news"] { --tf-box-y-base: calc((0px) + 52px); }
    /* hero-sub / scale  元 1.1rem ×0.9  [欄の要素] */
    [data-site-text="hero-sub"][data-site-text="hero-sub"][data-site-text="hero-sub"] { --tf-fs-base: calc((1.1rem) * 0.9); }
    /* hero-sub / lh  元 2.2 ×0.8  [欄の要素] */
    [data-site-text="hero-sub"][data-site-text="hero-sub"][data-site-text="hero-sub"] { --tf-lh-base: calc((2.2) * 0.8); }
    /* hero-sub / mt  元 25px ＋-6  [欄の要素] */
    [data-site-text="hero-sub"][data-site-text="hero-sub"][data-site-text="hero-sub"] { --tf-mt-base: calc((25px) + -6px); }
    /* welcome-jp / scale  元 1.1rem ×0.7  [欄の要素] */
    [data-site-text="welcome-jp"][data-site-text="welcome-jp"][data-site-text="welcome-jp"] { --tf-fs-base: calc((1.1rem) * 0.7); }
    /* welcome-jp / mt  元 0px ＋-8  [欄の要素] */
    [data-site-text="welcome-jp"][data-site-text="welcome-jp"][data-site-text="welcome-jp"] { --tf-mt-base: calc((0px) + -8px); }
    /* card-about-jp / scale  元 1.3rem ×0.9  [欄の要素] */
    [data-site-text="card-about-jp"][data-site-text="card-about-jp"][data-site-text="card-about-jp"] { --tf-fs-base: calc((1.3rem) * 0.9); }
    /* card-about / scale  元 0.9rem ×0.9  [欄の要素] */
    [data-site-text="card-about"][data-site-text="card-about"][data-site-text="card-about"] { --tf-fs-base: calc((0.9rem) * 0.9); }
    /* card-stores-jp / scale  元 1.3rem ×0.9  [欄の要素] */
    [data-site-text="card-stores-jp"][data-site-text="card-stores-jp"][data-site-text="card-stores-jp"] { --tf-fs-base: calc((1.3rem) * 0.9); }
    /* card-stores / scale  元 0.9rem ×0.9  [欄の要素] */
    [data-site-text="card-stores"][data-site-text="card-stores"][data-site-text="card-stores"] { --tf-fs-base: calc((0.9rem) * 0.9); }
    /* card-contact-jp / scale  元 1.3rem ×0.9  [欄の要素] */
    [data-site-text="card-contact-jp"][data-site-text="card-contact-jp"][data-site-text="card-contact-jp"] { --tf-fs-base: calc((1.3rem) * 0.9); }
    /* card-contact / scale  元 0.9rem ×0.9  [欄の要素] */
    [data-site-text="card-contact"][data-site-text="card-contact"][data-site-text="card-contact"] { --tf-fs-base: calc((0.9rem) * 0.9); }
    /* foot-about / scale  元 0.9rem ×0.85  [欄の要素] */
    [data-site-text="foot-about"][data-site-text="foot-about"][data-site-text="foot-about"] { --tf-fs-base: calc((0.9rem) * 0.85); }
    /* foot-about / lh  元 1.8 ×0.9  [欄の要素] */
    [data-site-text="foot-about"][data-site-text="foot-about"][data-site-text="foot-about"] { --tf-lh-base: calc((1.8) * 0.9); }
    /* foot-stores / scale  元 0.9rem ×0.85  [欄の要素] */
    [data-site-text="foot-stores"][data-site-text="foot-stores"][data-site-text="foot-stores"] { --tf-fs-base: calc((0.9rem) * 0.85); }
    /* foot-stores / lh  元 1.8 ×0.9  [欄の要素] */
    [data-site-text="foot-stores"][data-site-text="foot-stores"][data-site-text="foot-stores"] { --tf-lh-base: calc((1.8) * 0.9); }
    /* foot-news / scale  元 0.9rem ×0.85  [欄の要素] */
    [data-site-text="foot-news"][data-site-text="foot-news"][data-site-text="foot-news"] { --tf-fs-base: calc((0.9rem) * 0.85); }
    /* foot-news / lh  元 1.8 ×0.9  [欄の要素] */
    [data-site-text="foot-news"][data-site-text="foot-news"][data-site-text="foot-news"] { --tf-lh-base: calc((1.8) * 0.9); }
    /* foot-contact / scale  元 0.9rem ×0.85  [欄の要素] */
    [data-site-text="foot-contact"][data-site-text="foot-contact"][data-site-text="foot-contact"] { --tf-fs-base: calc((0.9rem) * 0.85); }
    /* foot-contact / lh  元 1.8 ×0.9  [欄の要素] */
    [data-site-text="foot-contact"][data-site-text="foot-contact"][data-site-text="foot-contact"] { --tf-lh-base: calc((1.8) * 0.9); }
    /* about-jp / scale  元 1.1rem ×0.85  [欄の要素] */
    [data-site-text="about-jp"][data-site-text="about-jp"][data-site-text="about-jp"] { --tf-fs-base: calc((1.1rem) * 0.85); }
    /* about-en / scale  元 3.2rem ×0.65  [欄の要素] */
    [data-site-text="about-en"][data-site-text="about-en"][data-site-text="about-en"] { --tf-fs-base: calc((3.2rem) * 0.65); }
    /* about-en / lh  元 1.1 ×0.9  [欄の要素] */
    [data-site-text="about-en"][data-site-text="about-en"][data-site-text="about-en"] { --tf-lh-base: calc((1.1) * 0.9); }
    /* about-body / scale  元 1rem ×0.95  [欄の要素] */
    [data-site-text="about-body"][data-site-text="about-body"][data-site-text="about-body"] { --tf-fs-base: calc((1rem) * 0.95); }
    /* about-body / scale  元 1rem ×0.95  [[data-site-text="stores-lead"]] */
    [data-site-text="about-body"] p { --tf-fs-base: calc((1rem) * 0.95); }
    /* about-body / mb  元 0px ＋-6  [[data-site-text="hero-title"]] */
    [data-site-text="about-body"] p { --tf-mb-base: calc((0px) + -6px); }
    /* about-body / mb  元 20px ＋-6  [[data-site-text="about-body"] p] */
    [data-site-text="about-body"] p { --tf-mb-base: calc((20px) + -6px); }
    /* stores-jp / scale  元 1.1rem ×0.85  [欄の要素] */
    [data-site-text="stores-jp"][data-site-text="stores-jp"][data-site-text="stores-jp"] { --tf-fs-base: calc((1.1rem) * 0.85); }
    /* stores-en / scale  元 3.2rem ×0.65  [欄の要素] */
    [data-site-text="stores-en"][data-site-text="stores-en"][data-site-text="stores-en"] { --tf-fs-base: calc((3.2rem) * 0.65); }
    /* stores-en / lh  元 1.1 ×0.9  [欄の要素] */
    [data-site-text="stores-en"][data-site-text="stores-en"][data-site-text="stores-en"] { --tf-lh-base: calc((1.1) * 0.9); }
    /* news-jp / scale  元 1.1rem ×0.85  [欄の要素] */
    [data-site-text="news-jp"][data-site-text="news-jp"][data-site-text="news-jp"] { --tf-fs-base: calc((1.1rem) * 0.85); }
    /* news-en / scale  元 3.2rem ×0.65  [欄の要素] */
    [data-site-text="news-en"][data-site-text="news-en"][data-site-text="news-en"] { --tf-fs-base: calc((3.2rem) * 0.65); }
    /* news-en / lh  元 1.1 ×0.9  [欄の要素] */
    [data-site-text="news-en"][data-site-text="news-en"][data-site-text="news-en"] { --tf-lh-base: calc((1.1) * 0.9); }
    /* contact-jp / scale  元 1.1rem ×0.85  [欄の要素] */
    [data-site-text="contact-jp"][data-site-text="contact-jp"][data-site-text="contact-jp"] { --tf-fs-base: calc((1.1rem) * 0.85); }
    /* contact-en / scale  元 3.2rem ×0.65  [欄の要素] */
    [data-site-text="contact-en"][data-site-text="contact-en"][data-site-text="contact-en"] { --tf-fs-base: calc((3.2rem) * 0.65); }
    /* contact-en / lh  元 1.1 ×0.9  [欄の要素] */
    [data-site-text="contact-en"][data-site-text="contact-en"][data-site-text="contact-en"] { --tf-lh-base: calc((1.1) * 0.9); }
}

@media (max-width: 900px) and (min-width: 641px) {
    /* hero-sub / scale  元 0.95rem ×1.05  [欄の要素] */
    [data-site-text="hero-sub"][data-site-text="hero-sub"][data-site-text="hero-sub"] { --tf-fs-base: calc((0.95rem) * 1.05); }
    /* hero-sub / mb  元 15px ＋-12  [欄の要素] */
    [data-site-text="hero-sub"][data-site-text="hero-sub"][data-site-text="hero-sub"] { --tf-mb-base: calc((15px) + -12px); }
    /* about-body / lh  元 2 ×1.2  [[data-site-text="about-body"] p] */
    [data-site-text="about-body"] p { --tf-lh-base: calc((2) * 1.2); }
}

@media (max-width: 900px) and (max-width: 640px) {
    /* hero-sub / scale  元 0.95rem ×0.9  [欄の要素] */
    [data-site-text="hero-sub"][data-site-text="hero-sub"][data-site-text="hero-sub"] { --tf-fs-base: calc((0.95rem) * 0.9); }
    /* hero-sub / mt  元 15px ＋-6  [欄の要素] */
    [data-site-text="hero-sub"][data-site-text="hero-sub"][data-site-text="hero-sub"] { --tf-mt-base: calc((15px) + -6px); }
    /* about-body / scale  元 0.95rem ×0.95  [[data-site-text="about-body"] p] */
    [data-site-text="about-body"] p { --tf-fs-base: calc((0.95rem) * 0.95); }
}

/* ⛔ **`and (max-width: 900px)` を足した（2026-08-10）。**焼き込み済みの規則だが、条件だけ狭めている
      （値は1文字も変えていない）。理由＝パソコン幅は窓の高さで見え方を変えない作りにしたため。
      🔗 上の「背の低い画面」の節と同じ理由。 */
@media (max-height: 700px) and (min-width: 641px) and (max-width: 900px) {
    /* hero-sub / lh  元 1.9 ×0.9  [欄の要素] */
    [data-site-text="hero-sub"][data-site-text="hero-sub"][data-site-text="hero-sub"] { --tf-lh-base: calc((1.9) * 0.9); }
    /* hero-sub / mb  元 10px ＋-12  [欄の要素] */
    [data-site-text="hero-sub"][data-site-text="hero-sub"][data-site-text="hero-sub"] { --tf-mb-base: calc((10px) + -12px); }
}

@media (max-height: 700px) and (max-width: 640px) {
    /* hero-sub / lh  元 1.9 ×0.8  [欄の要素] */
    [data-site-text="hero-sub"][data-site-text="hero-sub"][data-site-text="hero-sub"] { --tf-lh-base: calc((1.9) * 0.8); }
    /* hero-sub / mt  元 10px ＋-6  [欄の要素] */
    [data-site-text="hero-sub"][data-site-text="hero-sub"][data-site-text="hero-sub"] { --tf-mt-base: calc((10px) + -6px); }
}

  /* about-en / mt  元 0px ＋-6  [欄の要素] */
  [data-site-text="about-en"][data-site-text="about-en"][data-site-text="about-en"] { --tf-mt-base: calc((0px) + -6px); }
  /* stores-en / mt  元 0px ＋-6  [欄の要素] */
  [data-site-text="stores-en"][data-site-text="stores-en"][data-site-text="stores-en"] { --tf-mt-base: calc((0px) + -6px); }
  /* news-en / mt  元 0px ＋-6  [欄の要素] */
  [data-site-text="news-en"][data-site-text="news-en"][data-site-text="news-en"] { --tf-mt-base: calc((0px) + -6px); }
  /* contact-en / mt  元 0px ＋-6  [欄の要素] */
  [data-site-text="contact-en"][data-site-text="contact-en"][data-site-text="contact-en"] { --tf-mt-base: calc((0px) + -6px); }