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

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

   ⭐ **式はここ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,
.cal-title,
.cal-message,
/* ---- カレンダーの表の中（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;
}

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

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

[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,
.cal-title,
.cal-message,
/* カレンダーの表は**囲みだけ**を振り分けの対象にする（中の文字はここから受け継ぐ） */
.cal-table,
.cal-range,
/* ⚠️ 曜日と日にちは**自分のつまみを持つ**ので、ここに入れる。
      ＝ 表の倍率は受け継がない（受け継ぎと自分の値は両立しない）。 */
.cal-dow,
.cal-date,
/* 狭い画面の曜日・日にち（一覧側）。同じつまみで動かすため、こちらも自分の値を読む */
.cal-li-date,
.cal-li-date small {
  --tf-scale: var(--tf-scale-pc, 1);
  --tf-lh: var(--tf-lh-pc, 1);
  --tf-mt: var(--tf-mt-pc, 0px);
  --tf-mb: var(--tf-mb-pc, 0px);
}

/* 💥 **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` など）は、ここに入れないこと。**
      入れると表のつまみが効かなくなる。 */
.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;
  --tf-mt-pc: 0px;
  --tf-mt-sp: 0px;
  --tf-mb-pc: 0px;
  --tf-mb-sp: 0px;
}

@media (max-width: 640px) {

[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,
.cal-title,
.cal-message,
.cal-table,
.cal-range,
.cal-dow,
.cal-date,
.cal-li-date,
.cal-li-date small {
    /* 💥 **スマホ用はパソコン用を引き継がない**（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, 0px);
    --tf-mb: var(--tf-mb-sp, 0px);
  }
}

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

/* トップ：写真まわり */
[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="welcome-en"],
[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="entrance-lead"],
[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; }

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

/* ヘッダーの項目（HTML にインラインで 0.9rem / 0.65rem と書いてある） */
[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-about-en"],
[data-site-text="nav-stores-en"],
[data-site-text="nav-contact-en"] { --tf-fs-base: 0.65rem; }

/* フッターの項目（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; }

/* 店舗の紹介文（一覧 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; }
.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）

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

[data-site-text="hero-sub"],
[data-site-text="hero-tagline"],
[data-site-text="entrance-lead"],
[data-site-text="stores-lead"],
[data-site-text="news-lead"],
[data-site-text="about-body"] p,
.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,
.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, var(--tf-mt, 0px)) !important;
  padding-bottom: max(0px, var(--tf-mb, 0px)) !important;
  margin-top: calc(var(--tf-mt-base, 0px) + min(0px, var(--tf-mt, 0px))) !important;
  margin-bottom: calc(var(--tf-mb-base, 0px) + min(0px, var(--tf-mb, 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="entrance-lead"] { --tf-lh-base: 2.2; --tf-mt-base: -20px; --tf-mb-base: 55px; }
[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; }
.entrance-text[data-site-text] { --tf-lh-base: 1.9; --tf-mt-base: 14px; --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;
  margin-bottom: calc(14px + var(--tf-mb, 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; }
.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, var(--tf-mt, 0px));
  padding-bottom: max(0px, var(--tf-mb, 0px));
  margin-top: calc(var(--tf-mt-base, 0px) + min(0px, var(--tf-mt, 0px)));
  margin-bottom: calc(var(--tf-mb-base, 0px) + min(0px, var(--tf-mb, 0px)));
}

/* 表の前後の余白 */
.cal-table {
  padding-top: max(0px, var(--tf-mt, 0px));
  padding-bottom: max(0px, var(--tf-mb, 0px));
  margin-top: calc(var(--tf-mt-base, 0px) + min(0px, var(--tf-mt, 0px)));
  margin-bottom: calc(var(--tf-mb-base, 0px) + min(0px, var(--tf-mb, 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 {
  padding-top: calc(11px + var(--tf-cell-h, 0px) / 2);
  padding-bottom: calc(11px + 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, 1px);
}

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

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

/* 日にちの下の余白（元は 5px）。日にちだけは前後の余白のうち「下」を出している。 */
.cal-date {
  margin-bottom: calc(5px + var(--tf-mb, 0px));
}