@charset "UTF-8";
/*
 * base.css — サイト全体の構造CSS（単一の真実源）
 * 色・書体・角丸・影はすべてトークン経由で参照し、デザイン軸に追従させる。
 *
 * ★★2026-07-29：キットCSS（kit-*.css）を全廃した。
 *   キットCSSは base.css のフォークになっており（soft は宣言の80%が base と完全一致）、
 *   base.css より後に読まれるため**構造を1行でも置くと必ず後勝ちする**。
 *   その結果「base.css を直したのに soft では効かない」が4回再発した。
 *   置き場所そのものを無くすのが唯一の恒久対策＝**構造はここ、差はトークン**。
 */

/* ━━ 役割トークン：角丸・影・罫線 ＝「形」軸（body.shape-*）の実体 ━━
   ★サイズ名（sm/md/lg/pill）ではなく**用途**でトークンを切る。
     旧構造は末端が `var(--wp--custom--border-radius--pill, 999px)` のようにサイズを直書き
     していたため、「ボタンだけ角ばらせたい」ができず、キットが全コンポーネントを
     再宣言する羽目になっていた（kit-trust.css 586行の主因＝`border-radius:0` が26箇所）。
     用途で切れば、形の切替は下の4ブロックの値だけで完結する。
   --r-btn   ボタン・リンクボタン        --r-chip  バッジ・タグ・錠剤
   --r-card  カード・パネル・表          --r-media 写真・地図・アイコンの箱
   --r-field 注記・小さい箱・ナビのホバー地
   ★--sh-card はプライマリ色を混ぜる＝**影の色みがカラー軸に追従する**
     （旧 soft は rgba(93,140,108,…) を直書きしており、これがキットCSSに構造ごと
       コピーされる口実になっていた）。
   ★--rule は色パレットに `rule` スロットが無くても成立するよう text-main からの
     color-mix で作る（旧 styles/soft.json だけ `rule` が欠けており、そのため base.css が
     罫線色トークンを使えず primary-light で代用 → trust が毎回上書き、という構図だった）。 */
body,
body.shape-soft {                       /* やわらか（既定） */
  --r-btn:   999px;
  --r-chip:  999px;
  --r-card:  24px;
  --r-media: 24px;
  --r-field: 10px;
  --sh-card: 0 4px 20px color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
  --rule:    var(--wp--preset--color--primary-light);
  /* ★--rule-strong＝「影が無いときに面の輪郭を担う」濃い罫線。影のある形では --rule と同じ
     （＝影が輪郭を担うので濃くする必要がない）。かっちりだけが値を持つ。下の shape-sharp 参照。 */
  --rule-strong: var(--rule);
}
body.shape-standard {                   /* 標準（角丸ひかえめ） */
  --r-btn:   999px;
  --r-chip:  999px;
  --r-card:  12px;
  --r-media: 12px;
  --r-field: 8px;
  --sh-card: 0 2px 12px color-mix(in srgb, var(--wp--preset--color--text-main) 8%, transparent);
}
body.shape-sharp {                      /* かっちり（直線・影なし・罫線で面を作る） */
  --r-btn:   4px;
  --r-chip:  0px;
  --r-card:  0px;
  --r-media: 0px;
  --r-field: 0px;
  --sh-card: none;
  /* 罫線が主役になる形なので、色みを持つ primary-light ではなく中立の細線にする */
  --rule:    color-mix(in srgb, var(--wp--preset--color--text-main) 14%, transparent);
  /* ★★面を「1枚のカード」として読ませる輪郭は 14% では足りない（地との差 約1.3:1）。
     影が無いぶんを罫線が肩代わりする形なので、輪郭を担う用途だけ 28%（約1.7:1）に上げる。
     ★色（面）を濃くする案は取らなかった：全パレットが bg-soft を「白に近い淡さ」として
     定義しているため、面の色をどう選んでも帯との差は最大 1.22:1 にしかならず（7パレット実測）、
     **罫線のほうが効く**。区切り線の --rule は据え置き＝細い罫線が濃くなる副作用を出さない。 */
  --rule-strong: color-mix(in srgb, var(--wp--preset--color--text-main) 28%, transparent);
}
body.shape-pop {                        /* ポップ（大きな角丸・強めの影） */
  --r-btn:   999px;
  --r-chip:  999px;
  --r-card:  28px;
  --r-media: 28px;
  --r-field: 14px;
  --sh-card: 0 6px 22px color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
}

/* ━━ 役割トークン：文字の太さ ＝「強調の強さ」軸（body.fw-*）の実体 ━━
   ★★2026-08-01：軸を足す前に前提工事として導入した。実測でわかったのは
     **宣言が5段階あるのに、描かれているのは2段階しかなかった**こと——
     サブセット（assets/fonts/manifest.json）が載せるのは 400 / 500 / 700 の3枚だけで、
     CSSのフォントマッチングは 600→700・800→700 に解決される。同一テキストの実測幅（48px）＝
     400:435.38 / 500:440.08 / 600:446.41 / 700:446.41 / 800:446.41 px。
     つまり base.css にあった **800（15箇所）と 600（9箇所）は1pxも効いていなかった**。
     トークンへ畳むこの工事は、そのぶん見た目を1pxも動かさずに済む。

   --w-head  見出し・表示文字（h1〜h4・ヒーローのキャッチ・院名・大数字・透かし・記事タイトル）
   --w-ui    インターフェイス（ボタン・ナビ・アイブロウ/ラベル・チップ・「詳しく見る」系リンク・電話番号）

   ★**「意味を担う太字」はトークン化しない**（700 のリテラルで据え置き）＝
     診療時間表と各表の th／セルの記号。理由は実測で、**500 は 400 との幅差が +1.1% しかない**
     （700 は +2.5%）ため、太さだけで意味を区別している箇所を軽くすると意味そのものが消える。
     装飾の強調は軸に反応させ、意味の強調は反応させない（08-01「情報を色だけに置き換えない」と同型）。
     `<strong>` も宣言を持たない＝ブラウザ既定の bold のままで、同じ理由から軸の外に居る。

   ★末端は必ず `var(--w-head, 700)` のようにフォールバック付きで参照する
     （トークンが届かない文脈でも従来の見た目に落ちる）。

   ★★**3段階目は「重さの数値」ではなく「軽くする範囲」で作る**（2026-08-01）。
     3書体に共通して存在する重さは 400 / 500 / 700 だけで、とくに **Zen Maru Gothic には 600 が無い**
     （Google Fonts が 400 を返す・可変フォント版も無い）。600 を中間に据えると
     **丸ゴシックのプリセット4種では中間が「しっかり」と同じ見た目**になる＝選んでも変わらない値が生まれる。
     範囲で作れば全書体で一貫して効き、フォントの追加ビルドも要らない。
     中間で先に軽くするのは**見出し**＝一番大きく一番うるさいので、印象の変化が最も大きく、
     失う機能（押せる場所の目立ちやすさ）が最も小さい。 */
body,
body.fw-standard {                      /* しっかり（既定＝従来どおり） */
  --w-head: 700;
  --w-ui:   700;
}
body.fw-medium {                        /* 見出しをすっきり（見出しだけ中太・UIは太字のまま） */
  --w-head: 500;
  --w-ui:   700;
}
body.fw-light {                         /* すっきり（見出しもUIも中太に） */
  --w-head: 500;
  --w-ui:   500;
}

/* ━━ 役割トークン：可読の下限 ＝ 情報を運ぶ文字の最小サイズ（2026-08-02） ━━
   ★★同じ判断を**3回別々に**下していた（診療時間の表 10.7px → 2026-08-01／
     フッターの注記 0.72rem は「11.5px で下限を割る」→ 2026-08-01／今回のスマホ点検）。
     3回とも結論は同じ 12px なのに、値はその都度ベタ書きされ、隣り合う要素どうしで食い違っていた
     （フッターでは注記 0.78rem＝12.5px の真上に、表の時間 0.66rem＝10.6px が乗っていた）。
     ＝**規律の問題ではなく、下限を書く場所が無かった**。トークンにすれば判断は1回で済む。
   ★対象＝**情報を運ぶ文字**（時間・受付時間・分類チップ・ボタンの文言・注記）。
   ★対象外＝**装飾の英字アイブロウ**（CONTACT / HOURS / 院名の英字表記など）。
     直下に同じ意味の日本語見出しがあり、読めなくても情報は失われない＝意匠として小さくてよい。
     「小さくてよい文字」と「小さくしてはいけない文字」の線引きはここに書いてある。
   ★rem で持つ＝ブラウザの文字サイズ設定に追従する（px 固定にすると拡大しても下限が動かない）。
   ★倍率で寸法を持っている箇所（ヘッダーCTA）は `max()` で床を敷く＝**倍率の設計を壊さずに**
     下限だけを保証する（大きいサイズ軸では倍率がそのまま効き、床は噛まない）。 */
body { --fs-min: 0.75rem; }             /* 12px */

/* ━━ 役割トークン：タップの最小寸法 ＝ 指で押せる当たりの下限（2026-08-02） ━━
   基準は 44px（Apple HIG／WCAG 2.5.5 AAA）。WCAG 2.2 の AA（2.5.8）は 24px だが、これは
   「隣のターゲットと 24px 以上離れていれば免除」という**条件つきの最低線**なので、下限は 44 で持つ。
   ★★**広げ方は2つあり、選ぶ基準は「幅を払えるか」**：
     ① **実寸で広げる**（padding / min-height）＝周りのレイアウトも動く。縦に余地がある場所向け
        （フッターの一覧など）。行どうしが**隙間なく連なる**ので押し外しも消える。
     ② **当たりだけ広げる**（`::after` を負の位置に敷く）＝レイアウトは1pxも動かない。
        ヘッダーのように 375px を取り合っている場所向け（2026-07-25 に横スクロールを潰した経緯があり、
        ここで実寸を足すとロゴがさらに縮む＝別の情報を削ることになる）。
        **条件＝隣の当たりと重ならないこと**。重なれば押し間違いになり、広げたのに悪化する。
   ※テキストリンクの高さは line-height が決めるので、②を使わない場合は padding で稼ぐ
     （font-size を上げて稼ぐのは別の軸を壊す＝可読の下限 --fs-min と役割が違う）。 */
body { --tap-min: 44px; }

/* ━━ 役割トークン：ページの左右余白（ガター）＝文字が画面の端に触れない距離（2026-08-02）━━
   値は**サイト内で既に16箇所に直書きされていたものと同一**（ヘッダー/フッター/ヒーロー/下層/CTA）。
   ここで宣言するのは値を変えるためではなく、**担当者を1か所に決める**ため。
   ★★実測で分かったこと：`theme.json` に**ルートの左右パディングが無い**（`styles.spacing.padding` 未設定）ので、
     WPの constrained レイアウトは**幅の上限だけ**を与えて余白は与えない。PCは画面が contentSize より広いので
     気づかないが、**モバイルでは内容カラム＝画面幅**になる。＝ガターは各パーツが自前で書いて成立しており、
     **書き忘れた場所が 0 になる**（実測375px：診療時間＆お知らせ・院長挨拶・フリー(面なし)が 0＝文字が画面の端に接触）。
   ★★**左右と上下を分けて持つこと**：今回の不具合の原因は、両方を1つの `padding` ショートハンドで
     持っていたこと——「面（カード）の内側の余白」として書いたので、**面が無い型では余白ごと消えた**。
     **左右＝ページの余白（面の有無に関係なく要る）／上下＝面の内側の余白（面があるときだけ要る）**。
   ※ 全幅要素（alignfull の地図・フォトバンド・波の区切り）は従来どおり外へ出る＝ガターは器の側に掛ける。 */
body { --gutter: clamp(1rem, 4vw, 2.5rem); }

/* ━━ 役割トークン：WordPress 管理バーの逃げ量（2026-08-31 実射FB）━━━━━━━━━━━━━━
   ログイン中は `#wpadminbar` が **z-index 99999 の固定バー**として画面最上部を占有する。
   ヘッダーは追従のために `sticky`/`fixed` で `top` を持つので、そこにバーの高さを足さないと
   **スクロールした瞬間にヘッダーがバーの下へ潜り込む**
   （実測 977px：ヘッダー 92.4px のうち**上 32px が欠け**、ロゴの上端とメニュー行が隠れていた）。
   ★★**訪問者には起こらない不具合だが、直す優先度は高い**：このテーマの改善は
     「管理画面に模型を置かず、実サイトを見て判断する」（§管理画面のプレビューを削除した）ので、
     **ログイン中の姿が嘘をつくと、ヘッダー周りの判断がまるごと誤った絵に対して行われる**。
     見る側の道具が狂っている不具合は、見た目の不具合より先に直す。
   ★★★**バーが場所を取るのは 601px 以上だけ**。WP コアが狭幅ではバーを流している：
     `wp-includes/css/admin-bar.css` → `@media (max-width:600px){ #wpadminbar{ position:absolute } }`
     ＝ページと一緒にスクロールして流れ去るので、そこで逃げ量を残すと今度は
     **ヘッダーの上に 46px の空白が居座る**（潜り込みのちょうど裏返し）。
     → このトークンが持つのは「バーの高さ」ではなく「**バーが固定で占有している量**」。
   ★**ログイン判定はテーマ側では要らない**：`--wp-admin--admin-bar--height` を宣言する
     admin-bar.css は**バーを出すときしか読み込まれない**ので、訪問者では未定義＝フォールバックの 0px。
   ★★**600px の分岐はここ1か所だけに書く**：ヘッダーの追従は形状ごとに `sticky`/`fixed` が
     6か所へ分かれているので、分岐を各所に書くと必ずどこかが取り残される
     （§スマホで追従しない形状が2つあった＝「自前指定を持たないものが黙って取り残される」と同じ型）。
     消費者は全員このトークンだけを読む。
   ★★★≤600px の「0」は**流れに置いたヘッダー（sticky）にしか正しくない**（2026-09-26 実射FB）。
     sticky は html の margin-top（コアがバーのぶん空ける 46px）の下から始まるので 0 で合うが、
     **fixed で重ねる形状（写真ヒーローの浮きバー等）は top: 0 に貼り付く**ので、ページ先頭では
     流れ去る前のバー（46px）の**下に潜る**。→ 狭幅では「バーがまだ画面に残っている量」
     （＝バーの高さ − スクロール量、0 で止まる）を `main.js`（initAdminBarFlow）が `--admin-bar-flow` に書く。
     sticky にとってもこの値は「流れの位置」と一致するので、形状で分けずに全員がそのまま読める。
     JS が来ないとき・訪問者（バーが無い）では第2引数の 0 が効く＝従来どおり。 */
body { --admin-bar-h: var(--wp-admin--admin-bar--height, 0px); }
@media screen and (max-width: 600px) {
  body { --admin-bar-h: var(--admin-bar-flow, 0px); }
}

/* ★★電話リンクの当たりは `href` で一括して確保する（2026-08-02）。
   **場所ごとに書き分けない**：ヘッダー・フッター・アクセス・CTA の4か所にあるが役割は1つ
   （「電話をかける」）で、置き場所が増えるたびに書き足す形にすると必ずどこかが取り残される
   ——実際、狭幅のヘッダーは「番号を隠して**アイコンだけのタップ領域**に落とす」という設計なのに、
   その領域は実測 **22×22px** しかなく、クリニックのサイトで一番押される導線が一番小さかった。
   ★ここは手②（当たりだけ広げる）：ヘッダーは 375px を取り合っており、実寸を足すとロゴがさらに縮む
     （2026-07-25 に「ロゴは切り詰めず小さくする」で削り切っている）＝**別の情報を削ることになる**。
     4か所とも隣のターゲットまで中心間 66px 以上あるので、44px の当たりどうしは重ならない。
   ★幅は `max(100%, --tap-min)`＝番号が見えている場所では要素の幅をそのまま使い、
     アイコンだけの場所でだけ 44px まで広げる。 */
a[href^="tel:"] { position: relative; }
a[href^="tel:"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, var(--tap-min));
  height: var(--tap-min);
  transform: translate(-50%, -50%);
}

/* ★「形」軸で唯一の構造的な差＝**影を消すと面が消えるので罫線が要る**。
   トークンでは表現できないのでここだけルールとして持つ。

   ★★対象は「他に輪郭を持たないカード」だけに絞る（2026-07-30 実射FBで修正）。
     当初は9要素に一括で `border` を足したが、実際には——
     ・**診療案内カードは自前の「枠・影」軸**（`departments__grid--frame-shadow/-outline/-flat`）を持っており、
       ここで枠を足すと**詳細度 (0,2,1) > (0,2,0) で軸に勝ってしまい、顧客が「枠・影なし」を選んでも枠が出た**。
       かっちりでは frame の3値が全部同じ見た目になり、**セクションの設定が事実上死んでいた**。
     ・recruit-card / dept-children__item / firstvisit__rcard / hours表 は
       **既に `border: 1px solid var(--rule)` を常時持っている**＝完全に冗長だった。
       `--rule` は shape-sharp で中立色へ切り替わるので、**トークン経由で既に形の軸へ追従している**。
     → 残したのは features / blog / facility の3つだけ（影も枠も持たず、かっちりでは白地に白カードで消えるため）。
   ★★教訓：**「影を消したら罫線が要る」を一般論で一括適用しない。**
     各コンポーネントが既に輪郭を持っているか、**自前で枠を決める軸を持っていないか**を先に確認する。
     持っているものに上位レイヤーから足すと、詳細度で勝って**下位の設定を黙って無効化する**——
     キット廃止で潰したのと同じ「上のレイヤーが下を握り潰す」構図を、別の形で作ってしまう。
   ※ features の「地なし（transparent）」は意図的に箱を作らない指定なので除外する。 */
body.shape-sharp :is(.blog-card, .facility__card-inner),
body.shape-sharp .features__cards:not(.features__cards--bg-transparent) .features__card-inner {
  border: 1px solid var(--rule);
}

/* ━━ フッターの配色＝用途トークン1か所（2026-07-30）━━━━━━━━━━━━━━━━━━━
   ★★工事の理由：地・文字・区切り線が `parts/footer.html` に**インラインで直書き**されていた
     （`style="background-color:…;color:#ffffff"` と `border-top:1px solid rgba(255,255,255,.15)`）。
     インラインは**詳細度の外側**なのでCSSからは `!important` でしか勝てず、
     「フッターの配色を薄いトーンにする」ようなオプションを**構造的に足せない**状態だった。
     さらに配色は base.css 側にも #fff / rgba(255,255,255,…) が13箇所に散っており、
     トーンを1つ足すたびに同じ数の上書きを書く羽目になる（＝キットCSSと同じ「束ごとの構造」）。
   → 地・文字・罫線をCSSへ移し、**用途でトークン化**して1か所に集約する。
   ★★このコミットでは**値は現行のまま＝見た目を1pxも変えない**。
     トーン軸（dark / soft / white）を足すときは、このトークンの値を差し替えるだけで済む。
   ※フッターは「面」なので、上に乗る部品（診療時間表など）の色もこの面が決める
     （§面：暗い地（フッター）の診療時間表 と同じ考え方）。 */
.site-footer {
  --footer-bg:        var(--wp--preset--color--text-main);
  --footer-ink:       #fff;                    /* 見出し・強調・既定の継承色 */
  --footer-ink-body:  rgba(255,255,255,0.85);  /* 本文・リンク */
  --footer-ink-info:  rgba(255,255,255,0.72);  /* クリニック情報ブロックの本文 */
  --footer-ink-sub:   rgba(255,255,255,0.65);  /* 注記（補足・休診） */
  --footer-ink-faint: rgba(255,255,255,0.5);   /* コピーライト */
  --footer-rule:      rgba(255,255,255,0.15);  /* 区切り線 */
  /* 記号・差し色（診療時間表の ● ★ など）。★暗地は accent（金茶）で 6.1:1 だが、
     **明るい地では accent は 2〜3:1 しか出ない**（accent は全パレット明るい金茶系）。
     トーンごとに担い手を替える必要があるので、色そのものではなく「役割」で持つ。 */
  --footer-mark:      var(--wp--preset--color--accent);
  background-color: var(--footer-bg);
  color: var(--footer-ink);
}
.site-footer__copyright { border-top: 1px solid var(--footer-rule); }
/* ━━ コピーライト帯のリンク（掲載先が「フッターのみ」の項目）━━━━━━━━━━━━━━━
   施設基準・加算の掲示やプライバシーポリシーなど、**回遊させるものではないが
   到達できる必要がある**ページの置き場所（2026-08-31 実射FB）。
   ★★2026-10-18 実射FB で主な置き場所をメニュー列へ移した（当院の理念のような本文ページまで
     ここに回っていたため）。いまこの帯が出るのは**メニュー列を出さない院だけ**
     （施設基準の掲示を消さない受け皿・clinic_footer_legal_links）。見た目の規則はそのまま。
   ★★**色は --footer-ink-body**＝コピーライトの --footer-ink-faint より1段濃い。
     掲示は「探せば必ずある」ことが要件なので、© と同じ薄さまで落とさない。
     それでも本文（--footer-ink）よりは引いているので、主要リンクと競合しない。
   ★区切り線は足さない＝`.site-footer__copyright` の border-top が既に
     「ここから下はサイト全体の事務的な情報」という切れ目を作っている（帯を増やすと段が3つになる）。
   ★★当たりは **--tap-min を直接床にする**（§--tap-min の①実寸で広げる）。
     padding だけで稼ぐと**文字を小さくした瞬間に床を割る**——実測 0.5em では 37px で
     44px に届いていなかった。min-height なら font-size を変えても床が動かない。
     横方向は column-gap 1.4rem あるので、隣の当たりと重ならない。
   ★大きさは --fs-min（可読の下限）を下回らせない＝情報を運ぶ文字。 */
.site-footer__legal {
  list-style: none; margin: 0 0 0.4rem; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: 1.4rem;
}
.site-footer__legal a {
  display: flex; align-items: center; min-height: var(--tap-min);
  color: var(--footer-ink-body);
  font-size: max(0.82rem, var(--fs-min));
}
.site-footer__legal a:hover { color: var(--footer-ink); }

/* ── 配色トーン軸（footer_tone）＝**値の差し替えだけ**（2026-07-30）──────────
   既定 dark は上のブロックが持つ。soft / white は同じ7トークンを明るい地むけに入れ替える。
   ★構造（セレクタ・レイアウト）は一切増やさない＝サイドバー配色（sb-*）が
     トーンごとに18宣言の上書きブロックを持っているのとは逆の作り。キット廃止の教訓どおり。
   ★墨は `text-main`（パレット追従の黒系）。白地に純黒は硬いので本文以下は透明度で階調を作る。
   ★リンクの hover 等で色を強めたいときは --footer-ink を使う（トーンによらず「最も濃い墨」）。 */
body.ftone-soft .site-footer {
  --footer-bg:        var(--wp--preset--color--bg-soft);
  --footer-ink:       var(--wp--preset--color--text-main);
  --footer-ink-body:  color-mix(in srgb, var(--wp--preset--color--text-main) 85%, transparent);
  --footer-ink-info:  color-mix(in srgb, var(--wp--preset--color--text-main) 78%, transparent);
  --footer-ink-sub:   color-mix(in srgb, var(--wp--preset--color--text-main) 66%, transparent);
  --footer-ink-faint: color-mix(in srgb, var(--wp--preset--color--text-main) 55%, transparent);
  --footer-rule:      color-mix(in srgb, var(--wp--preset--color--text-main) 16%, transparent);
  --footer-mark:      var(--wp--preset--color--primary);
}
body.ftone-white .site-footer {
  --footer-bg:        #fff;
  --footer-ink:       var(--wp--preset--color--text-main);
  --footer-ink-body:  color-mix(in srgb, var(--wp--preset--color--text-main) 85%, transparent);
  --footer-ink-info:  color-mix(in srgb, var(--wp--preset--color--text-main) 78%, transparent);
  --footer-ink-sub:   color-mix(in srgb, var(--wp--preset--color--text-main) 66%, transparent);
  --footer-ink-faint: color-mix(in srgb, var(--wp--preset--color--text-main) 55%, transparent);
  --footer-rule:      color-mix(in srgb, var(--wp--preset--color--text-main) 14%, transparent);
  --footer-mark:      var(--wp--preset--color--primary);
}
/* ★白は本文と地が同色なので、上の境界が消えてフッターが「ページの続き」に見える。
   → 上端に罫線を1本置く（`shape: sharp` の「影を消したら罫線が要る」と同型の補い）。
   淡色トーンは地の差で境界が出るので不要。 */
body.ftone-white .site-footer { border-top: 1px solid var(--footer-rule); }

/* ━━ フッター3カラム（フッターの設定） ━━ */
.site-footer__inner { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: flex-start; }
.site-footer__col { flex: 1 1 220px; min-width: 200px; font-size: 0.85rem; }
/* ★★診療時間の列だけは「中身の幅」を下限にする（2026-07-30）。
   表は幅が中身で決まる（`width:auto`）ので**列が縮んでも表は縮まず、はみ出して隣の列に重なる**。
   実測（幅835px）：表 295.1px に対し列 224.4px ＝ **70.7px が隣のメニュー列に重なっていた**。
   `min-width: min-content` にすれば列が中身より狭くならず、`.site-footer__inner` は
   `flex-wrap: wrap` なので**入らないときは重なるのではなく次の行へ折り返す**（安全側に倒れる）。
   ★下限を px で書かないこと：表の必要幅は書体・曜日ラベル・時間表記の長さで変わるため、
     固定値はいずれ外れる（1段ヘッダーの max-width で学んだのと同じ）。 */
.site-footer__col--hours { min-width: min-content; }
/* ★★詳細度で勝たせること（2026-07-30）：院名・見出し・注記は、要素セレクタを含む
   `.site-footer__col p`(0,1,1) / `.site-footer__info p`(0,1,1) に**負けていて効いていなかった**
   （院名と注記が .72、見出しが .85＝**強弱が設計どおりに出ていない**）。
   暗い地では差が小さく目立たなかったが、**薄いトーンでは強弱がそのまま読みやすさになる**ので、
   トーン軸の追加と同時に直した。
   ★★`p.` を付けて (0,1,1) に「そろえる」だけでは**不十分**（実測で確認）。競合する2つの規則も
     同じ (0,1,1) で、しかも `.site-footer__info p` は base.css の**ずっと後ろ**にあるため、
     同着なら後勝ちで依然として負ける。→ `.site-footer` を前置して **(0,2,1) で勝たせる**。
     こうすると**宣言順に依存しない**（片方をファイル末尾へ動かしても壊れない）。
   ★教訓：強弱を作る宣言は「同着に持ち込む」のではなく**確実に勝つ詳細度**で書く。
     同着は宣言順という壊れやすい条件に賭けることになる（!important は使わない）。 */
.site-footer p.site-footer__col-title { font-weight: var(--w-head, 700); color: var(--footer-ink); margin: 0 0 0.7em; font-size: 0.9rem; }
.site-footer__col p { margin: 0 0 0.4em; color: var(--footer-ink-body); }
.site-footer p.site-footer__name { font-weight: var(--w-head, 700); font-size: 1.05rem; color: var(--footer-ink); }
.site-footer p.site-footer__note { color: var(--footer-ink-sub); }
.site-footer__col a { color: var(--footer-ink-body); text-decoration: none; }
.site-footer__col a:hover { color: var(--footer-ink); text-decoration: underline; }

/* 診療時間（コンパクト表）＝★寸法だけを持つ（色は「面」が決める・2026-07-30）
   ★★旧実装はここで `color: rgba(255,255,255,.9)` と `border: 1px solid rgba(255,255,255,.25)` を
     宣言していた＝**暗いフッターを前提にしたスキン**。ところが --compact は
       ① フッター（暗い面）        inc/footer-settings.php
       ② ヒーロー埋め込みカード（白い面） patterns/hero.php
     の**両方**で使われるうえ、表には同時に表示スタイル（--simple / 標準）のクラスも付く。
     `.hours__table--compact th`(0,2,0) と `.hours__table--simple thead th`(0,2,0) は**同じ詳細度**で、
     --simple のほうが後に書かれているため**後読みが勝って**白文字が消え、
     明るい面用の primary が暗いフッターに乗っていた＝実測コントラスト **1.79:1**（AA=4.5:1）。
     逆に白い枠線のほうは --simple が上書きしないので残り、白いカードの上では「見えない格子」、
     フッターでは「表計算ソフト風の全周グリッド」になっていた。
   → **寸法（字送り・余白・幅）だけに限定**し、色と罫線は面のスキンへ渡す。
     置き場所が無くなるので、スキン同士が勝ち負けを争う状態が構造的に起きない。 */
.hours__table--compact { margin: 0; }
.hours__table--compact table { border-collapse: collapse; width: auto; }
/* ★★この宣言は**効いていなかった**（2026-08-02 発覚）。すぐ下の font-size と同じ罠で、
     セル側（§6 の `.hours__table thead th` / `tbody th` / `tbody td`）が**同じ詳細度 (0,1,2) で後に**
     書かれているため後読みが勝つ。実測：小さい版の td の padding は `11.76px 6.72px`＝
     **大きい版と1pxも変わらなかった**（0.25em / 0.55em はどこにも描かれていない）。
     → クラス数で勝たせる（(0,2,2) ＞ (0,1,2)）＝宣言順に依存しない。
   ★ただし**横だけ**を復活させる：横 0.3em は、可読の下限（--fs-min）で行見出しが太ったぶんを
     曜日の列から返すために必要（実測 375px フッター：受付「受付 14：45〜18：00」が2行→**1行**、
     表の高さ 190→169px、行見出し 124→116px、横スクロールなし）。
     縦（0.25em）まで戻すと表の高さが 190→136px と大きく変わる＝**今回の目的（可読性）とは別の
     見た目の変更**なので、意図的に持ち越す。小さい版が詰めてよいのは余白であって字ではない。 */
.hours__table--compact.hours__table :is(thead th, tbody th, tbody td) { padding-inline: 0.3em; }
.hours__table--compact th small { display: block; font-weight: 400; opacity: 0.85; }
/* ★字の大きさは §6 の用途トークン（--hours-fs-*）で差し替える。
   ここに `font-size: 0.72rem` を置いていたが**効いていなかった**：セル側（thead th / tbody th / td）が
   より高い詳細度で自分の font-size を宣言しているため、table への指定は継承されない。
   ＝「小さい版」なのに文字は大きい版と同寸のまま（実測：フッターも 13.6/12.8/16.8px で同一）だった。 */
/* ★(0,2,1) で勝たせる（上の見出し・院名と同じ理由。`.site-footer__info p` に負けていた） */
.site-footer p.site-footer__closed { font-size: 0.78rem; color: var(--footer-ink-sub); margin-top: 0.5em !important; }

/* ページ一覧 */
.site-footer__links { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
/* ★★行の間隔を li の margin から a の padding へ移す（2026-08-02・タップ領域）。
   実測（375px）：リンクの当たりは **20px 高**しかなく、行の間隔（中心間 31px）の 1/3 が
   **どこを押しても反応しない帯**だった。指の腹は 8〜10mm＝40px 前後あるので、
   2列レイアウトでは隣の項目を踏む。
   ★margin を padding に付け替えると、**当たりが隙間なく連なる**（実測：当たり 20→44px・
   行の中心間 31→44px＝押し外しの帯が消え、下限 --tap-min にも届く）。
   ★間隔（margin）を広げて解決してはいけない：**間隔は当たりを増やさない**——
   広がるのは「押しても反応しない帯」のほうで、フッターが間延びするだけで押しやすさは変わらない。
   実測：一覧の高さは 124→176px（4行）。 */
.site-footer__links li { margin-bottom: 0; break-inside: avoid; }
.site-footer__links a { display: block; padding-block: 0.72em; }

@media (max-width: 640px) {
  .site-footer__inner { flex-direction: column; gap: 1.8rem; }
  /* ★★同じ罠がここにもあった（上の §アクセスの情報行 と同じ 2026-08-22）。
     `.site-footer__col` の `flex: 1 1 220px` の 220px は列の最小**幅**なので、
     主軸を縦へ倒すとそのまま**最小の高さ**になる。
     実測（幅 546px）：中身 175.5px の情報列が高さ 220px ＝ **44.5px の空白**。
     中身が背の高い列（診療時間の表・メニュー）では埋まって見えないが、
     **短い列を持つ院で必ず出る**＝内容次第で現れる潜在的な不具合だった。
   ★ここは**倒すのが仕様**なので、アクセスとは逆に**基準のほうを解く**：
     診療時間の列は `min-width: min-content`（表の必要幅 約295px）を要求するため、
     折り返しに任せると狭い画面で2列が成立せず、列の取り分と表の幅が食い違う。
     ＝「軸を倒さない」で解けるのはアクセス側だけ。**倒すなら、倒した先の意味で基準を書き直す。** */
  .site-footer__col { flex: 0 1 auto; }
  /* ★★縦に倒したら診療時間の列の下限（min-content）も解く（2026-09-26）。
     下限は「横並びで隣の列に重ならない」ための安全策で、縦並びには隣の列が無い。
     残したままだと、表の必要幅が器より広いとき**列ごと画面の外へ出てページが横に揺れる**
     （実測 320px：表 311px ＞ 器 288px → ページ幅 327px）。解けば表の器（overflow-x: auto）の
     中でスクロールに逃げる＝メインの表と同じ安全側に揃う。 */
  .site-footer__col--hours { min-width: 0; }
}

/* ━━ アイコンのトーン（1つの図形 × CSS）━━━━━━━━━━━━━━━━━━━━
   ★★2026-08-15：トーンごとにアセットを持つのをやめた（旧＝simple:SVG47枚 / rich:PNG165枚）。
   実体は assets/icons/base/{id}.svg の1セットだけで、差はこのブロックだけが持つ。
   デザインキット廃止（2026-07-29）と同じ形＝「束ではなく直交する軸＋トークン」。

   SVG 側の役割クラス：
     （無印）… 常に線     .ic-f … 面     .ic-d … 面の内側のディテール     .ic-a … 差し色

   ★ 塗り色は currentColor から作る（パレット固定色にしない）。アイコンは白地のカード・
     淡色タイル・primary地のボタンなど**背景が不定の場所**に出るため、固定色にすると
     どこかで必ず沈む。currentColor 由来なら文脈にそのまま追従する。差し色だけは
     「色が付いた感」を出す主役なのでパレットの accent を使う。
   ★★2026-08-27：**このブロックは管理画面にも同じものが要る**（アイコンピッカー・
     科目の一覧・特徴の一覧＝顧客が選んだ絵を見せる場所）。ところが wp-admin には
     base.css を読ませられないので、旧実装では**管理画面にこの宣言が1つも無かった**：
       ・`.ic-art { fill: currentColor }` が無い → SVGの既定＝**真っ黒**（文字色に追従しない）
       ・`.ic-a` のティントも無い → 差し色まで黒く塗られ、2026-08-15 に潰したはずの
         「黒い塊」がそのまま管理画面に出ていた
       ・底上げ（`--sm`）も無い → 小さい絵はアンチエイリアスの灰色だけ
     ＝実射FB「白黒で分かりづらい」の実体。
     → **宣言を書き写さない**。下のマーカーで囲った範囲を `clinic_icon_art_css()` が
       そのまま切り出して管理画面へ inline で配る（同じ文字列＝ズレようがない）。
       色は `--wp--preset--color--accent` をPHPが**パレットJSONから**注入するので、
       管理CSSにブランド色を書き写す必要も無い（ヒーロー模型の失敗の再発防止）。
     ★ マーカーの中に「フロント専用の前提」を書かないこと（管理画面にも出る範囲）。

   ━━ @clinic-icon-art:start ━━ */
.clinic-ic { display: inline-block; flex-shrink: 0; vertical-align: middle; }

/* アイコンは**塗りのパス**でできている（線を stroke で描いていない）。輪郭の内側は
   サブパスの巻き方向で穴として抜けているので、背景がそのまま透ける。 */
.clinic-ic .ic-art { fill: currentColor; stroke: none; }
/* ① シンプル＝差し色を**文字色の淡いティント**で出す（`--ic-a` 未定義のときの既定）。
   ★差し色を主線と同色にすると、面の大きいアイコンが黒い塊になって他と揃わない。
     実測：入れ歯・歯周病・マウスピース・親知らずは差し色の面積が 25〜33%（他は 2〜11%）で、
     「一般歯科・歯周病・入れ歯」を並べると軽い線画と黒い塊が混在していた（2026-08-15）。
   ★ティントは currentColor から作る＝白地・淡色タイル・濃色地のどこでも文脈に追従する
     （パレットの固定色にすると必ずどこかで沈む）。元絵は塗り面に必ず主線の輪郭が付いて
     いるので、中を淡くしても形は保たれる。 */
.clinic-ic .ic-art .ic-a { fill: var(--ic-a, color-mix(in srgb, currentColor 22%, transparent)); }

/* ② 色付き＝差し色だけがパレットのアクセント色になる */
body.icon-color .clinic-ic { --ic-a: var(--wp--preset--color--accent); }

/* ━━ ★★★小さく使うときの主線の底上げ（2026-08-22 実射FB「アイコンが弱い」）━━━━━━
   実測：この絵は viewBox 24 での線の厚みが **0.55〜1.36 単位**しかない。18px で表示すると
   実効線幅は **0.41〜1.02px** ＝ ほぼ全部が1物理ピクセルに届かず、**アンチエイリアスの灰色**
   だけで描かれる。不透明に描かれたピクセルの割合を測ると web-reservation / clock /
   shield-check は **32px まで拡大しても 0〜13%**（＝実線として立たない）。
   ★これは「どのモチーフを選ぶか」以前の問題で、モチーフを替えても直らない
     （最も太い calendar でも 18px で 0.69px）。

   → **塗りパスに輪郭を1本足して下限を作る**。`vector-effect: non-scaling-stroke` で
     stroke-width は**表示サイズに依らず一定px**になるため、小さいほど相対的に効き、
     大きいほど相対的に薄まる＝**太らせすぎが構造的に起きない**（サイズ別の分岐が要らない）。
   ★`paint-order: stroke fill` が必須：既定（fill→stroke）だと差し色 `.ic-a` の上に
     currentColor の輪郭が**全幅で**乗って、淡いティントが縁取りで潰れる。
     先に線・後から面なら、内側半分は面が塗り直すので**外へ 1/2 だけ太る**。
   ★値は 0.75px（実測で決定・18px 表示）：
     | stroke | web-reservation | clock | phone | calendar |
     | 0（現状） | 0% solid | 0% | 23% | 28% |
     | 0.5px | 3% | 5% | 41% | 45% |
     | 0.6px | 22% | 13% | 48% | 48% |
     | **0.75px** | **71%** | **44%** | **66%** | **63%** |
     0.6px では web-reservation と clock が立たず、1px 超は calendar のインクが 63% に達して
     「黒い塊」（2026-08-15 の失敗）に近づく。0.75px が両側の崖の間。
   ★適用は **24px 以下のときだけ**（`clinic-ic--sm`＝`clinic_icon_from_library()` が
     渡されたサイズから付ける）。診療案内のアイコンは 40〜100px でここには入らない＝
     2026-08-15 に詰めた見た目は1pxも動かない。
   ★★2026-10-15 アイコン v2（docs/icon-v2-plan.md）：絵を作り直し、線は全部 **0.7 単位に揃えた**
     （上の 0.55〜1.36 のばらつきは旧セットの話）。0.75px のままだと 24px で顔が塊になるので
     0.6／0.7／0.75 を見比べて **0.7px** に下げた＝24px での線が約1.4px（0.7＋0.7）。
     旧を残した13個（口腔内カメラ・歯科用CT・注射 等）にも同じ値が掛かるが、差は 0.05px で見分けがつかない。 */
.clinic-ic--sm .ic-art path {
  stroke: currentColor;
  stroke-width: var(--ic-hairline, 0.7px);
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
/* ━━ @clinic-icon-art:end ━━ */

/* ━━ サイトヘッダー（骨格・全キット共通） ━━ */
/* 電話ブロック（.site-topbar 系）と予約ボタンの見た目は §15「ヘッダーCTA」に一本化。
   ここにあった旧・濃色トップバー（primary地×白文字）の指定は、インライン表示へ移行した
   時点で全て上書きされる死んだ宣言になっていたため削除（2026-07-25）。 */

/* ━━ ★★スティッキーを実際に効かせるための1行（2026-07-30・「浮きバーの白線」調査中に発覚）━━
   `.site-header` は WP のテンプレートパーツ `<header class="wp-block-template-part">` の
   **ただ1つの子**で、**sticky の可動域＝親（containing block）の content box**。
   その content box はヘッダー自身の高さと完全に一致する＝**動ける余地が 0** なので、
   `position: sticky` を宣言していても実際には追従せず、ページと一緒に流れ去っていた。
   実測（スクロール 600px 時の `.site-header` の top）：

     帯分離 −600 ／ 統合 −600 ／ 上部中央 −600 ／ 浮きバー −600 ＝ **6形状すべて追従せず**

   `.site-header.is-scrolled` を付ける main.js も、「スクロールで白化する」透過スキン
   （`.hov-on … .is-scrolled .site-header__bar { background:#fff }`）も、事実上死んでいた。
   → ラッパーの**箱を消して**可動域を `.wp-site-blocks`＝ページ全体に広げる。
   ★**`position: sticky` をラッパー側へ移す案は不可**：ラッパーが「配置済み祖先」になるため、
     絶対配置／固定でヒーローに重ねている変種（2段×透過・浮きバー）の**基準がページからラッパーへ移り**、
     重ね方が変わってしまう。`display: contents` は配置済み祖先を作らないので無干渉。
   ※`<header>` は入れ子（外＝テンプレートパーツ／内＝`.site-header`）なので、
     外側の箱を消してもヘッダーの意味づけは内側の `<header>` が持つ。
   ★教訓：**`position: sticky` は「宣言したのに動かない」を無言でやる。** 効いているかは
     必ずスクロールさせて実測すること（親が中身と同じ高さなら、それは sticky ではなく static と同じ）。 */
header.wp-block-template-part { display: contents; }
.site-header { position: sticky; top: var(--admin-bar-h); z-index: 100; }
.site-header__inner { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); padding-block: 0.85rem; gap: 1rem; }
.site-header__brand { display: flex; gap: 0.6rem; align-items: center; flex-shrink: 0; text-decoration: none; }
/* ━━ シンボルマーク（テキストロゴの左のブランドマーク）━━━━━━━━━━━━━━━━━━━━━
   ★★**大きさはロゴの設定に追従する**（2026-08-23）。旧実装は 44px の直書きで、
     クリニック名は 20〜42px まで動くのに**シンボルだけ取り残されて**いた
     （「同じ役割の実装が形状ごとに分かれていると、自前指定を持たないほうが黙って取り残される」の型）。
     係数 1.6 は旧来の比（44 ÷ 27.2px）とほぼ同じ＝既定での見え方が大きく動かない。
   ★★★**この行の「狭幅は `--logo-fs` の clamp が効いて自動で縮む」は誤りだった**（2026-08-31 実射FB）。
     clamp が掛かっていたのは `.site-header__name` の `font-size` であって **`--logo-fs` ではない**
     ので、シンボルは狭幅でも縮まず、**名前だけが半分になってシンボルだけが取り残されていた**
     （実測 375px：シンボル/名前＝PC 1.60 に対し **3.19**）。しかも幅は零和なので、
     大きいままのシンボルが**名前の取り分を食っていた**。
     → 実効サイズのトークン `--logo-fs-eff` を1本立て、**名前もシンボルもそれを読む**（下の §狭幅）。
     ＝「同じ値の消費者が2人いて、片方にだけ上限が掛かっている」を無くす。床（30px）はそのまま。
   ★★**プリセットは3つの役割**（主色＝primary／`.ic-s`＝主色の半透明／差し色＝accent・2026-09-27）。`icon_tone` 軸は通さない——
     あの軸は「科目アイコンがグリッドに並んだときの情報量」の話で、単体のブランドマークには
     当てはまらない。だから `.clinic-ic` ではなく専用クラス `.clinic-sym` を使う。 */
/* ★比 1.6 はトークンで持つ（2026-09-22）＝サイドバーのパネル幅の式（§左サイドバー）も同じ比を読む。 */
body { --logo-sym-ratio: 1.6; --logo-sym: max(30px, calc(var(--logo-fs-eff) * var(--logo-sym-ratio))); }
.site-header__symbol { display: inline-flex; flex-shrink: 0; }
.site-header__symbol img { display: block; width: var(--logo-sym); height: var(--logo-sym); object-fit: cover; }
.clinic-sym {
  display: block;
  width: var(--logo-sym);
  height: var(--logo-sym);
  color: var(--wp--preset--color--primary);
}
.clinic-sym .ic-art { fill: currentColor; stroke: none; }
.clinic-sym .ic-art .ic-a { fill: var(--wp--preset--color--accent); }
/* ★淡い主色（2026-09-27 刷新）＝主色の半透明。色を別に持たないので、パレットにも暗い地（白の半透明）にも追従する。
   0.45 は生成した絵の淡色を濃色から逆算した値（3シートの実測 0.36〜0.56 の中ほど）。
   ★同じ値を管理画面（header-admin.css）とブラウザのアイコン（site-icon.php）も持つ＝テストで一致を見る。 */
.clinic-sym .ic-art .ic-s { fill-opacity: .45; }
/* ★★★暗い縦パネルでも**単色に落とさない**——主色の役割だけを白へ差し替え、差し色は実色のまま。
   単色（差し色を淡いティントにする）にすると、差し色が「独立した要素」のマーク
   （手のひらとハート・双葉・寄り添う二人・重なるアーチ・丸い樹の幹）で**要素ごと消えて意味が壊れる**
   ——12個中5個が該当（2026-08-23 実射FB「単色では成立していない・手のハートが見えない」）。
   ★これは「インクが何%残るか」では測れない（面積ではなく**差し色が独立要素かどうか**の問題）。 */
.header-sidebar.sb-dark .clinic-sym { color: #fff; }
.site-header__brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.site-header__catch { font-size: 0.7rem; font-weight: var(--w-ui, 700); color: var(--wp--preset--color--primary); }
/* ★★テキストロゴの大きさは**トークン1本**（2026-08-17 実射FB「テキストロゴが少し小さい」）。
   旧実装は 1.5rem（基準）／1.25rem（1段＝統合・透過・フローティング）／1.55rem（透過）／
   clamp(...,1.5rem)（狭幅）の**4か所に散っていた**ため、基準だけ直しても形状ごとに取り残される。
   → `--logo-fs` を body に置き、形状の違いは**トークンの差し替え**、狭幅は**トークンを上限にした clamp**。
   ★基準は 1.5→**1.7rem**（実測 1280px：24→27.2px）。クリニック名は屋号＝ブランドの軸なので、
     2段ヘッダー（帯分離・上部中央）やサイドバーでは存在感を優先する。 */
/* ★テキストロゴも同じ「ロゴの大きさ」で動く。
   ※ かつてここに「1段（統合・透過・フローティング）は 0.74倍に控えめ」があったが、
     **2026-08-31 に撤去**（下の §1段ヘッダーの控えめ を撤去した の項）。高さは買えておらず、
     幅は退避階段（`hdr-logo-base`）が実測で担当するため。大きさは6形状とも院の設定どおり。 */
/* ━━ ロゴの大きさ＝無単位スケール（0〜1）× 形状ごとの端点（2026-08-23）━━━━━━━━━━━━━━
   ★★**写像の式はここ1本だけ**。形状は端点（`--logo-h-min`/`--logo-h-max`）を差し替えるだけで、
     どこにも px の分岐を書かない——「形状ごとに事情が違うことは、値ではなくトークンで表す」
     （`--logo-fs` で確立した型）を、レンジそのものに広げたもの。
   ★端点とスケールは **PHP が `:root` へ注入**する（`clinic_logo_height_range()` が単一の真実源で、
     `sizes` の算出と管理画面のプレビューも同じ表を読む）。ここの `var()` 第2引数は
     **注入が届かない文脈（エディタcanvas 等）でも壊れないための保険**で、値はPHP側と対。
     ★★保険が無いと calc ごと無効になり `max-height` が消える＝ロゴが原寸で出る事故になる。
   ★★`--logo-scale` を**自分自身から作らない**（`--logo-fs` で踏んだ循環参照）。院が決めた値は
     `--logo-scale-base` に置き、退避（`hdr-logo-base`）はそこから作る。 */
body {
  --logo-scale: var(--logo-scale-base, 0.5);
  --logo-h-range: calc(var(--logo-h-max, 96px) - var(--logo-h-min, 36px));
}
/* ★★1段で幅が足りないときはロゴを控えめへ戻す（`main.js` の退避階段の1段目）。
   ロゴは縮んでも**情報が失われない**（消えない）ので、住所より後・メニューより先に諦める。
   ★上限を被せるだけ＝もともと控えめな院は 1px も動かない。
   ★★★上限は**入る最大の大きさ**（`--logo-scale-fit`＝`main.js` が実測で探して body に書く）。
     旧実装は固定の 0.25 まで一気に落としていたため、**スライダーを上げると逆に小さくなる**
     逆転が起きていた（2026-09-25 実射FB・実測 1920px テキストロゴ：60＝33.6px なのに 70〜100＝25.8px）。
     60 で入る幅に 70 を入れると、1段上の住所短縮では足りず 0.25 へ落ちる＝**50〜60 より小さい**。
     → 落とす先を「入るところまで」にすると、上げても**頭打ちになるだけで下がらない**（単調）。
     0.25 は第2引数＝探索の床（JS が来る前・探索しても入らないとき）。 */
body.hdr-logo-base { --logo-scale: min(var(--logo-scale-base, 0.5), var(--logo-scale-fit, 0.25)); }

body {
  --logo-fs-range: calc(var(--logo-fs-max, 2.65rem) - var(--logo-fs-min, 1.27rem));
  --logo-fs-base: calc(var(--logo-fs-min, 1.27rem) + var(--logo-fs-range) * var(--logo-scale));
  --logo-fs: var(--logo-fs-base);
  /* ★★**実効サイズ**＝実際に描かれる大きさ。名前とシンボルの**両方**がこれを読む。
     広い画面では `--logo-fs`（＝院の設定）そのもの。狭幅だけ上限が被さる（下の §狭幅）。
     形状ごとの上書き（`--logo-fs`）は body 上で解決されるので、宣言の順序に依存しない。 */
  --logo-fs-eff: var(--logo-fs);
}
/* ★★ロゴの太さは**ロゴ専用トークン → 強調の強さ軸**の2段フォールバック（2026-08-23 実射FB
     「ロゴはサイトの印象を決める重要パートなので太さも調整したい」）。
   ★`auto`（既定）のあいだ PHP は `--logo-fw` を注入しないので、`var()` の第2引数が効いて
     **従来どおり `--w-head`（強調の強さ軸）に従う**＝既存サイトの見た目は 1px も動かない。
   ★★**スライダーにしていない**理由：太さは連続量ではなく、サブセットが載せているのは
     400 / 500 / 700 の3枚だけ（CSSは 600→700・300→400 に解決する）。
     詳細と丸めの規則は `inc/header-settings.php` の `CLINIC_LOGO_WEIGHTS` を参照。 */
/* ★大きさは**実効サイズ**を読む（`--logo-fs` を直接読まない）＝狭幅の上限がシンボルにも同時に効く。 */
.site-header__name { font-size: var(--logo-fs-eff); font-weight: var(--logo-fw, var(--w-head, 700)); color: var(--wp--preset--color--text-main); }

.site-header__en { font-size: 0.62rem; letter-spacing: 0.12em; color: var(--wp--preset--color--text-muted); }
/* ★★画像ロゴは**箱をはみ出さない**（2026-08-02・実射FB「電話アイコンがロゴに重なる」）。
   旧実装は `max-height` と `width: auto` だけで **`max-width` を持たず**、flex が
   `.site-header__brand` を縮めても**画像だけが縮まずに乗り出して**いた（実測 375px：箱 131px に対し
   画像 172px ＝ 41px はみ出し、電話アイコンと 17px 重なる）。
   2026-07-25 の「狭幅ではロゴを小さくする」は `font-size: clamp()` ＝**文字ロゴにしか効かない**手で、
   画像ロゴには縮む手段が1つも無かった。
   ★`height: auto` が要る：`max-width` だけ足すと、`max-height: 38px` が**そのまま高さとして残り**
     縦横比が壊れる（実測 4.52:1 → 3.45:1 ＝顧客のロゴが横に潰れる）。
     ★★はみ出しを止めるつもりの1行が、**黙ってロゴを変形させる**——replaced element に
       max-width / max-height を両掛けするときは、必ず片方を auto にして比率の担当を決める。 */
/* ★★画像ロゴの高さも**トークン1本**（2026-08-19。テキストロゴの `--logo-fs` と対）。
   ★1段（統合・フローティング）は 40px に落とす＝**テキストロゴを 1.7→1.25rem に落としているのと同じ理屈**。
     旧実装は文字ロゴだけ形状で控えめにし、**画像ロゴは 48px 固定**という不揃いだった。
   ★★ここが効くのは透過1段：バーは `min-height: var(--header-h)`＝84px を前提に、
     ヒーローを `margin-top: calc(-1 * var(--header-h))` で引き上げている。バーが 84px を超えると
     **引き上げ量が足りずヒーローの上に地色の帯が出る**。キャッチを積むと
     48+14+2.4+27.2＝**91.6px** で超えるが、40px なら 83.6px で収まる（超えない）。
   ※ 狭幅の 38px も同じトークンで持つ（値が散らないようにする＝`--logo-fs` で学んだ型）。 */
/* ★★大きさは**設定（ロゴの大きさ）で決まる1本**にした（2026-08-19 実射FB「ロゴが小さい」）。
   ┌ 旧：48px（既定）／40px（1段）／38px（狭幅）と**形状ごとに散っていた**。
   │ 1段が小さかったのは高さの制約が理由だが、それは `--header-h` を導出にして解いた（下）。
   └ ★★そもそも `max-height` では大きくできない場面がある——サイドバーは**幅で頭打ち**になる。
     実測（4.55:1 のロゴ・パネル264px）：48px→218px幅、**50pxで幅の上限に当たり 56/64/72px は全て 50px**。
     つまり「ロゴを大きく」の実体は**器を広げること**で、高さの数値を上げることではない。
     → 1段はバーの上限を、サイドバーはパネル幅を広げた（下の該当箇所）。
   ★★見た目の存在感は**縦横比**で決まる（同じ48pxでも 4.55:1＝幅218px／1:1＝幅48px）ので、
     テーマ側の単一の値では正解にならない。院が選べるようにしてある。
   ★★2026-08-23：3段（44/56/68px）を**連続値へ**。実測で「クリニック名が画像高に占める割合」が
     ロゴの構図で 41.7% / 21.5% と 1.94倍 違い、**必要な帯（44〜72px と 72〜110px）が重ならない**
     ことが分かったため——3段では、どのロゴでも選択肢の半分が使えない状態だった。 */
body {
  --logo-img-h: calc(var(--logo-h-min, 36px) + var(--logo-h-range) * var(--logo-scale));
  /* ★★★**実際に描かれる高さ**＝要求と元画像の実寸の小さいほう（2026-08-23 実射FB
       「スライダー100だと縮小されないのに50だと結構縮む」）。
     `max-height` は**拡大しない**ので、要求が実寸を超えた領域では通常時が実寸で頭打ちになる。
     そこへ縮小（×0.78）を**要求のほう**に掛けていたため、縮小後の値も実寸を上回ると
     **縮小量が 0 になる**——実測（実寸72pxのロゴ）：スライダー60で 15.9px 縮むのに、
     70で11.2px、90で1.8px、**94以上で 0**。つまり上げるほど縮小が弱くなり最後は消えていた。
     ★★掛ける相手を「実際に描かれる高さ」にすると全域で 22% 縮む。
       **通常時の見た目は 1px も変わらない**（min は `max-height` が既にやっている頭打ちと同じ）。
     ★元画像の実寸 `--logo-nat-h` は PHP が注入する（CSSは画像の実寸を知り得ない）。
       未注入＝テキストロゴや取得不能時は上限なしに落ちる（従来どおり）。 */
  --logo-img-h-eff: min(var(--logo-img-h), var(--logo-nat-h, 100000px));
}
.site-header__brand--image .site-header__logo-img {
  display: block;
  max-height: var(--logo-img-h-eff);
  max-width: 100%;
  width: auto;
  height: auto;
}
/* ★★画像ロゴでもキャッチコピーを出す（2026-08-19 実射FB「ロゴだけだと少し殺風景」）。
   ロゴ＝屋号（**誰か**）／キャッチ＝**何科で・どこにあるか**＝別の情報。訪問者がファーストビューで
   最初に確かめるのは後者なので、画像ロゴにした瞬間にヘッダーから消えるのは装飾の不足ではなく
   **情報の欠落**だった（英語表記とシンボルはロゴ画像に含まれることが多いので、こちらは出さない）。

   ★★置き場所は**ロゴの上**＝テキストロゴと同じ（2026-08-19 実射FB 第2弾で横→上に変更）。
   ┌ 初版は「1段ヘッダーは高さが厳しいから横」としたが、**逆だった**：
   │ 1段で足りないのは高さではなく**幅**で、ロゴとメニューは同じ段で幅を取り合う
   │ （§1段ヘッダーの収まり＝3層構成）。横に置くとブランドが 218→340px に太り、
   │ `initHeaderFit()` の判定（メニュー必要幅 > バー幅 − ロゴ − CTA − gap）を越えて
   │ **hdr-compact＝メニューがハンバーガーへ退避**した（実射FBの「メニューが消えた」）。
   └ 上に積めばブランド幅は **max(ロゴ, キャッチ) ＝ ロゴのまま**＝幅は1pxも増えない。
   ★★**「高さが厳しい」は寸法の話、「幅を取り合う」は構造の話**。構造のほうが先に破れる——
     縦に積んで足りなくなるのは自分の高さだけだが、横に伸ばすと**隣の部品の取り分**を奪う。
   ※ 形状ごとの出し分けも同時に消えた（旧：横型＝横／上部中央・サイドバー・狭幅＝下）。
     どこでも上なので**宣言は1本**で済む＝形状が増えても足す場所が無い。
   ※ 色・大きさ・透過ヘッダーでの扱いは `.site-header__catch` の既存宣言をそのまま使う
     （テキストロゴと同じ見え方＝新しいトークンを作らない）。 */
.site-header__brand--image {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}
.site-header__brand--image .site-header__catch { line-height: 1.25; }
.header-center .site-header__brand--image { align-items: center; }
.site-header__drawer { display: flex; align-items: center; gap: 1.2rem; }
/* ★★ハンバーガー＋「MENU」（2026-08-12）。三本線だけでは「メニュー」だと伝わらないので文字を添える。
   ★★**当たりが 40×40 で `--tap-min: 44px` を割っていた**——2026-08-02 のタップ領域の見直しで
     ヘッダーの電話・フッター・お知らせは直したのに、**ここだけ見逃していた**（サイトで
     ハンバーガーは最も押される導線のひとつ）。文字を足すと縦に伸びるので、
     **「分かりやすさ」と「当たりの下限」が同時に解ける**。
   ★★**幅を払えるようになったのは `mobile_cta: bar` のおかげ**：電話・予約をヘッダーから
     下ろした結果、375px のヘッダーは ロゴ 172.7 ＋ ハンバーガー 40 で**余り 116.3px**。
     2026-07-25／08-02 に幅の取り合いで却下していた案が、置き場所を変えたことで通るようになった。
   ★3本線は `__bars` に入れ子にする：ボタン直下に文字を置くと、開閉アニメーションが使っている
     `:nth-child` の番号がずれる（1本目が MENU になる）。 */
.site-nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: var(--tap-min, 44px); min-height: var(--tap-min, 44px); background: none; border: none; cursor: pointer; padding: 4px 6px; }
.site-nav-toggle__bars { display: flex; flex-direction: column; gap: 5px; width: 24px; }
.site-nav-toggle__bar { display: block; height: 2px; width: 100%; background: var(--wp--preset--color--text-main); border-radius: 2px; transition: transform .25s, opacity .25s; }
/* ★文字は情報を運ぶので可読の下限を割らない（装飾の英字アイブロウとは扱いが違う）。
   数字ではないが、ラテン体を確実に当てるため数字用スタックを流用せず既定の本文書体に任せる。 */
.site-nav-toggle__label { font-size: max(var(--fs-min), 0.62rem); font-weight: var(--w-ui, 700); letter-spacing: 0.08em; line-height: 1; color: var(--wp--preset--color--text-main); }
.site-header__nav .primary-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.site-header__nav .primary-menu .sub-menu { display: none; }
.site-header__nav a { color: var(--wp--preset--color--text-main); font-weight: var(--w-ui, 700); font-size: 0.9rem; text-decoration: none; padding: 0.4em 0.7em; transition: color .2s, background .2s, border-color .2s; display: inline-block; }

/* ━━ 共通ボタン（骨格・全キット共通。ヘッダー内の寸法・質感は §15 で上書き） ━━ */
.cta-btn { font-weight: var(--w-ui, 700); font-size: 0.85rem; padding: 0.6em 1.3em; border-radius: var(--r-btn); text-decoration: none; white-space: nowrap; }
.cta-btn--accent { background: var(--cta-btn-bg, var(--wp--preset--color--accent)); color: var(--cta-btn-fg, #fff); }
.cta-btn--outline { background: transparent !important; border: 2px solid var(--wp--preset--color--primary); color: var(--wp--preset--color--primary) !important; }
.cta-btn--outline:hover { background: var(--wp--preset--color--primary-light) !important; }
/* LINE（2026-10-17）＝LINE の緑で固定。色・ロゴは LINE の決まりで変えない＝カラーの軸・文字色の軸（cta_btn_fg）に従わない。
   ★`.wp-block-button__link` を前に付けて WP 本体のボタンの地（#32373c）より強くする（塗りボタンはインラインの style で勝っている）。
   ★★押しても地の色を変えない：公式アイコンの地も同じ緑で、角丸の四角は地に溶けている＝地を変えると四角が浮き出る
     （assets/brand/line/README.md）。手応えはほかのボタンと同じく浮き上がりと影で出す。 */
.wp-block-button__link.cta-btn--line,
.wp-block-button__link.cta-btn--line:is(:hover, :focus, :active) { background: #06C755; color: #fff; }
/* 公式アイコン（<img>）：大きさはほかのアイコンと同じ1本（--cta-ico）。★20px より小さくしない（LINE の最小サイズ） */
.clinic-line-mark { display: block; width: max(20px, var(--cta-ico, 22px)); height: max(20px, var(--cta-ico, 22px)); }

/* ━━ セクション共通（骨格・全キット共通） ━━ */
.section-head { gap: 0.55rem; margin-bottom: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); }
.section-head__label { display: inline-block; text-transform: uppercase; margin: 0; }
.section-head h2 { position: relative; margin: 0; }
.section-head + * { margin-top: var(--wp--preset--spacing--40); }

/* ━━ ウェーブ区切り（構造。trust は kit 側で非表示） ━━ */
/* 高さは --wave-h に一本化（svg高さ＝ヒーロー重ねの負マージンを必ず一致させ破綻防止）。
   スタイル別の値は body.wave-* で上書き（kit-switch のウェーブ軸）。 */
.wave-divider { display: block; width: 100%; overflow: hidden; line-height: 0; margin-top: -2px; }
.wave-divider svg { display: block; width: 100%; height: var(--wave-h, 56px); }
/* 写真ヒーロー下端に重ねる透過ウェーブ（波を写真へ食い込ませる） */
.wave-divider--hero-overlay {
  margin-top: calc(-1 * var(--wave-h, 56px));
  margin-bottom: -1px; /* 直後のピンクセクションを1px重ね、波下端の継ぎ目を封じる */
  position: relative;
  z-index: 3;
  background: transparent;
  pointer-events: none;
}
/* ウェーブの大きさ（スタイル軸）。none はウェーブ自体を出力しないため変数不要。
   ★★★**高さは vw で持つ**（2026-08-24 実射FB「直線以外すべて微妙」）。
     SVGは `preserveAspectRatio="none"`＝縦横比を解除しているので、見た目の急峻さは
     **（縦の倍率）÷（横の倍率）**＝`(H_px / H_viewBox) ÷ (W_px / 1440)` で決まる。
     旧実装は H_px を **px 固定**していたため、幅が変わると横倍率だけが動いて形が別物になった。
     実測の急峻さ係数（1.00＝設計どおり）＝ soft: @1920 0.75 / @1440 1.00 / **@375 3.84**（5.1倍の幅）。
     「ゆるやか」として描いた波がスマホでは**3.8倍の急斜面**になっていた。
   ★H_px を幅の定数倍（＝vw）にすると W_px が約分されて消え、**係数が幅に依存しなくなる**。
     値は `viewBox高さ ÷ 1440 × 100` vw ＝ viewBox の比率そのもの。
   ★clamp の下限・上限を出た範囲だけは比例が崩れるが、下限16pxでも**1.62倍**まで（旧 3.84倍）。
     下限が要るのは、純粋な比例だと 375px 幅で約10px になり控えめすぎるため。 */
body.wave-soft   { --wave-h: clamp(16px, 2.64vw, 56px); }  /* viewBox 1440x38 */
body.wave-bold   { --wave-h: clamp(22px, 3.75vw, 80px); }  /* viewBox 1440x54 */
body.wave-wavy   { --wave-h: clamp(16px, 2.64vw, 56px); }  /* viewBox 1440x38 */
body.wave-arch   { --wave-h: clamp(24px, 5.28vw, 110px); } /* viewBox 1440x76（2026-10-23・左右対称の弧） */
/* ★`corner`（アール）は区切りSVGを出さない＝`--wave-h` を持たない（2026-08-24）。
   あの値は「角の丸みを特大にする」もので、区切りの形ではない。全幅バンドには左右の端が無く、
   丸めるべき角が存在しないため、角丸として描いても意味を持たなかった。実際の角は
   `band: panel` のときに `--panel-r` が丸める（そこでは区切りSVGは元から display:none）。
   ★反転クラス（.wave-divider--flip）も**撤去**：使っていたのは arc と corner だけで、
   どちらも無くなった＝出し手のいないCSSを残さない。 */
/* ★モバイル専用の高さ上書きは**撤去**した：あれは「幅が狭いと波が急になる」ことへの
   後追いの補正で、上の vw 化で原因ごと消えている（同じ条件を2か所に書かない）。 */

/* ━━ 背景バンド（表示位置で交互） ━━ */
.front-band { position: relative; }
.front-band--soft  { background: var(--wp--preset--color--bg-soft); }
.front-band--white { background: #ffffff; }
/* ── セクションの背景の濃さ（軸 band_tint・2026-10-23） ──
   「しっかり」のとき、淡い帯を濃い地の色（--band-deep＝clinic_design_token_css() がカラーごとの値を出す）で塗る。
   帯のクラスはトップのセクション・パネル・下層ページのタイトル帯で共通＝ここ1か所で全部に効く。
   ★お知らせの分類ラベルは「白に分類の色を混ぜた淡い色」なので、濃い地の上では地より淡い穴に見える
     → 濃い地の上だけ白い面にする（文字の色は分類ごとのまま）。
   ★撤去するときはこの節ごと消す（区切りの色は PHP の clinic_band_soft_color() が持つ）。 */
body.bandtint-deep .front-band--soft { background: var(--band-deep, var(--wp--preset--color--bg-soft)); }
body.bandtint-deep .front-band--soft .news__cat { background: var(--wp--preset--color--white); }
.front-band > .section-features,
.front-band > .section-hours-news,
.front-band > .section-departments,
.front-band > .section-access,
.front-band > .section-free,
.front-band > .section-facility { background: transparent !important; }

/* ━━ features / departments / hours / news（骨格・全キット共通／色はトークン追従） ━━ */
/* 4. 当院の特徴 */
.section-features {
  position: relative;
  /* ウェーブは wave-divider ブロックで前後に挿入 */
  /* 見出し色（features_heading_color）＝プライマリ（既定）／黒系。
     カスタムプロパティは継承するのでセクションに1つ置けば全レイアウトの見出しに効く。
     ink は「中立な黒系」＝キットのトーンを乗せない固定値（text-main はキット別に色味が付くため使わない）。 */
  --feat-head-ink: #474747;
  --feat-head: var(--wp--preset--color--primary);
  /* テキスト背景＝薄いプライマリ の地色。primary-light をさらに白で薄める
     （primary-light 直用は濃すぎるとのFB・2026-07-21）。
     3レイアウト（縦並び/横並び四角/横並び丸）で濃さを揃えるため1トークンに集約＝調整はここだけ。 */
  --feat-tint: color-mix(in srgb, var(--wp--preset--color--primary-light) 55%, #fff);
}
.section-features.features-head-ink { --feat-head: var(--feat-head-ink); }

/* ── 見出しの飾り（features-deco-*。診療案内の科目名の飾り tdeco-* と同じ4種。色はセカンダリ＝アクセント追従） ──
   既定は none＝飾りなし（従来の見た目を変えない）。飾りは4種とも見出しテキストを包む
   .features__title-inner に効かせる（departments と同型）。
   ★線系（bar/dotted/wave）は「文字幅」に合わせる（2026-07-21 実射FB）：
     固定幅（28/46/48px）だと左揃えレイアウト（縦並び型・数字リスト）で長い見出しの下に
     短い線が左寄せで残り不格好になる。→ inner を inline-block にして ::after を width:100%＝文字幅に。
     inline-block は text-align に自動追従するので、中央寄せレイアウト（横並び型）では
     中央に出る＝左右位置の分岐が不要になる（マーカーと同じ挙動に揃う）。 */
.section-features:is(.features-deco-bar, .features-deco-dotted, .features-deco-wave) .features__title-inner {
  display: inline-block;
}
.section-features:is(.features-deco-bar, .features-deco-dotted, .features-deco-wave) .features__title-inner::after {
  content: "";
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  background: var(--wp--preset--color--accent);
}
/* 短い下線 */
.section-features.features-deco-bar .features__title-inner::after {
  height: 3px;
  border-radius: 2px;
}
/* 点線＝丸ドットの繰り返し（radial-gradient。dotted border より丸が綺麗に出る）。
   ★★2026-08-22 実射FB「点線がキリの悪いところで途中で切れる」：
     11px のタイルを repeat-x していたので、器の幅が 11 の倍数でないと**最後の1個が欠ける**
     （文字幅に合わせる特徴の見出しは幅が任意／固定 46px のほうも 46÷11＝4.18 個で端が切れていた）。
   → `round`＝**タイルを整数個に収まるよう間隔だけ伸縮**させる。丸の大きさは closest-side＝
     タイルの高さ(6px)で決まるので**ドットの径は変わらず、間隔だけがわずかに動く**。
   ★幅を 11 の倍数に丸める案は採らない：特徴の下線は**文字幅に追従する**のが仕様なので、
     幅のほうを触ると別の要件を壊す。**器はそのまま、中身の敷き方で解く。** */
.section-features.features-deco-dotted .features__title-inner::after {
  height: 6px;
  background: radial-gradient(circle closest-side, var(--wp--preset--color--accent) 92%, transparent) 0 0 / 11px 6px round no-repeat;
}
/* 波線＝SVGマスク＋背景色（mask なら色はトークン追従のまま）。
   幅が可変になったので stretch（100% 100%）ではなく 44px 単位で repeat-x＝どの長さでも波形が一定。
   パスは (0,4) 始点・(44,4) 終点なのでタイルの継ぎ目がなめらかに繋がる。 */
.section-features.features-deco-wave .features__title-inner::after {
  height: 8px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 8' preserveAspectRatio='none'><path d='M0 4 Q 5.5 0 11 4 T 22 4 T 33 4 T 44 4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/></svg>") 0 0 / 44px 8px repeat-x;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 8' preserveAspectRatio='none'><path d='M0 4 Q 5.5 0 11 4 T 22 4 T 33 4 T 44 4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/></svg>") 0 0 / 44px 8px repeat-x;
}
/* マーカー＝文字の下半分を淡いセカンダリで塗る（span＝文字幅だけ） */
.section-features.features-deco-marker .features__title-inner {
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--wp--preset--color--accent) 38%, #fff) 62%);
  padding: 0 0.12em;
}

/* ── 横並びカードの列数＝件数から導く（2026-08-17）──────────────────
   旧実装は「1行3枚」を式に直書きしていたため、4件＝3+1 で最後の1枚が左下に取り残されていた。
   件数を知っているのはPHPなので、列数は `clinic_features_cols()` が決めて --feat-cols-n で渡す
   （4件→2列＝2+2／5件→3列＝3+2／7件→3列＝3+3+1）。CSSは数を持たず式だけを持つ。
   ★端数の行は justify-content:center が中央へ寄せる＝満杯の行は1pxも動かない（実測：3列時の
     左端 93/462/831 が改修前と一致）。どの件数でも「左下に1枚だけ残る」が構造的に起きない。
   ★狭い画面は上限を被せる（--feat-cols-max）。min() なので件数より増えることはない。
   WordPressブロックCSSは PC(≥782px)で .wp-block-columns を flex-wrap:nowrap にするため、
   コンテナを明示的に wrap にして折り返しを有効化する（これが無いと右へあふれる）。 */
.features__cards {
  flex-wrap: wrap !important;
  justify-content: center;
  --feat-cols: min(var(--feat-cols-n, 3), var(--feat-cols-max, 3));
}
.features__cards .features__card {
  flex: 0 0 calc((100% - (var(--feat-cols) - 1) * var(--wp--preset--spacing--60, 1.5rem)) / var(--feat-cols)) !important;
  max-width: calc((100% - (var(--feat-cols) - 1) * var(--wp--preset--spacing--60, 1.5rem)) / var(--feat-cols));
  min-width: 0;
}
@media (max-width: 900px) { .features__cards { --feat-cols-max: 2; } }
@media (max-width: 768px) { .features__cards { --feat-cols-max: 1; } }

/* ── 診療案内も件数から列数を導く（2026-09-04）─────────────────────
   ★**上の特徴とまったく同じ問題が診療案内にも在った**（実射検証で発覚）。
     WordPressブロックCSSが PC(≥782px) で `.wp-block-columns { flex-wrap: nowrap !important }` を
     当てるため、パターンがインラインで書いた `flex-wrap: wrap` は効かない
     （**インラインでも、スタイルシート側の !important には勝てない**）。
     実測（9件・器1080px）＝**カード幅102px・高さ710px**。1行に全件が押し込まれていた。
     2026-08-17 に特徴だけ直したときに診療案内が取り残されている
     → 列数の式は `clinic_grid_cols()`（inc/front-sections.php）**1か所**が持ち、両方がそれを呼ぶ。
   ★**折り返すだけでは足りない**：カードはインラインで `flex: 1 1 280px`（grow=1）を持つので、
     端数の行が伸びる（実測＝4件で最後の1枚が1080px幅／5件で2枚が530px幅）。
     列数を決めて grow を止めて初めて幅が揃う。
   ※ 診療案内**一覧ページ**（`--list`）は除外：そちらは `wp-block-columns` を持たないので
     コアの nowrap が当たらず、自前の3列で成立している（意図的に別の型）。
   ※ 幅の上書きは **PCだけ（≥769px）**。狭い画面の 2列/1列/タイルは既存の
     `.departments__grid .wp-block-column { flex-basis: … !important }` が担当のまま。 */
.departments__grid:not(.departments__grid--list) {
  flex-wrap: wrap !important;
  justify-content: center;
  --dept-cols: min(var(--dept-cols-n, 3), var(--dept-cols-max, 3));
}
@media (min-width: 769px) {
  .departments__grid:not(.departments__grid--list) > .departments__card {
    flex: 0 0 calc((100% - (var(--dept-cols) - 1) * var(--wp--preset--spacing--50, 1.5rem)) / var(--dept-cols)) !important;
    max-width: calc((100% - (var(--dept-cols) - 1) * var(--wp--preset--spacing--50, 1.5rem)) / var(--dept-cols));
    min-width: 0;
  }
}
@media (min-width: 769px) and (max-width: 900px) {
  .departments__grid:not(.departments__grid--list) { --dept-cols-max: 2; }
}

/* カード共通
   ★ホバーの浮き上がりは持たない（2026-08-17 実射FB）。特徴のカードはリンクを持たない
     （見出し・本文・写真/アイコンだけで、詳細ページが無い）ため、浮き上がり＝押せる合図だけを
     出して押せない状態になっていた。診療案内が `--linked` で、院内紹介・ブログ・採用が
     セレクタ側で `a` を要求して既に守っているルールに、特徴だけが従っていなかった。
     → 反応させるのはリンクのある要素だけ（テストで固定：§特徴カードのホバー）。 */
.features__card-inner {
  position: relative; /* 番号の位置＝写真の左上（features__num--on-photo）の基準 */
  height: 100%;
  box-sizing: border-box; /* height:100% にパディング/ボーダーを含める（二重計上防止） */
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* アイコン版
   ★★2026-08-28：表示スタイル「なし」（記号を出さない）も**同じ器**を使う。
     「なし」は新しいレイアウトではなく**アイコン版から絵を抜いただけ**なので、
     専用の宣言を作らずセレクタを1つ足す（作ると必ず片方が取り残される）。 */
.features__card-inner--icon,
.features__card-inner--illust,
.features__card-inner--none {
  align-items: center;
  text-align: center;
  padding: var(--wp--preset--spacing--70, 3rem) var(--wp--preset--spacing--60, 2rem);
}
/* 特徴アイコンも装飾なしの線アイコン単体（中央配置・少し大きめ） */
.features__icon {
  flex-shrink: 0;
  color: var(--wp--preset--color--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
}
.features__icon svg { display: block; }

/* ★特徴イラスト（表示スタイル＝イラスト）＝**器はアイコン版と共有**し、絵の寸法だけ上書きする。
   イラストは1個の記号ではなく「場面」なので、アイコンと同じ 44px では要素が潰れて読めない
   （実測：40px 以下で線が判別できない＝assets/feature-illustrations/README.md「確認済みの性質」）。
   ★塗りは `.clinic-ic` の役割クラスCSS（.ic-art / .ic-a）がそのまま効く＝トーン軸に追従する。
   ★★横並びカードだけ **% を使えない**（2026-09-07 実機で発見）：`.features__icon` は
     `flex-shrink:0` の**内容に合わせて縮む箱**なので、中の svg に `34%` を与えると
     自分自身の幅を参照する循環になり、clamp の下限（88px）に落ちる。実測 iconBoxW=132 / svgW=88。
     → 横並びは vw 基準にする。縦並び・丸のコンテナは寸法が外から決まる（3:2 / inset:0）ので % でよい。
   ★★2026-10-13：絵の viewBox を**絵の外形に合わせた**（tools/icon-sheet.py fit・横長の絵は高さが 11〜20 単位）。
     正方形の時代の値をそのまま使うと絵ごとに大きさが変わるので、**箱の比率を CSS が決めて絵を収める**
     （preserveAspectRatio の既定＝中央に収める）。数値は旧正方形のときの見た目の大きさに合わせてある：
     ・横並び：6:5 の箱。旧 156px 正方形は横長の絵の上下が空き、見出しの位置が絵ごとに揃っていたぶん
       空白も大きかった。箱の比率で揃えるので見出しは揃ったまま（実測 旧136px幅 → 横長144・縦長128）。
     ・丸：絵の幅＝直径の約62%（旧 72% 正方形×21/24 と同じ）。
     ・ずらし重ね：幅46%＝旧「高さ78%の正方形」と同じ縮尺（板は 2026-10-17 に 3:2→16:9・縦長の絵は高さ80%で頭打ち）。 */
.features__icon--illust svg { width: min(150px, 38vw); height: auto; aspect-ratio: 6 / 5; }
.features__row-media--illust svg { width: 46%; height: auto; }
.features__rows--circle .features__row-media--illust svg { width: 70%; height: 70%; }
.features__circ-media--illust svg { width: 64%; height: 64%; }
/* ★イラストの線の色（features_illust_line・2026-10-20）＝メインカラー（既定＝器の color を継ぐ）／黒＝文字の色を 85% に淡めた色。
   器（.features__icon・.features__row-media--illust・.features__circ-media--illust）はアイコンと共有で primary を持つので、
   絵の <svg> 自身に当てる＝アイコン表示・番号のチップは動かない。
   ★★85%＝比較画像からユーザーが選んだ（2026-10-21）。文字の色そのまま（100%）は線が硬く見出しより前に出た／72% は灰色に読めた。
     85% で線の重さがメインカラーの線とほぼそろう。
   ★白と混ぜて**不透明のまま**淡くする：透明度で淡くすると、絵の中で重なったパスの所だけ濃く出る。
   差し色（.ic-a）は1色（線だけ）なら currentColor の淡いティント＝線と一緒に付いていく／2色はアクセントカラーのまま。 */
.section-features.features-illust-ink .clinic-feat-illust { color: color-mix(in srgb, var(--wp--preset--color--text-main) 85%, #fff); }

/* 写真版 */
.features__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;        /* 縦横比を固定 */
  background: var(--wp--preset--color--primary-light);
  overflow: hidden;
}
.features__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* センタートリミング */
  object-position: center;
  display: block;
}
.features__photo-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--primary);
  opacity: 0.5;
}
.features__photo-body {
  padding: var(--wp--preset--spacing--60, 2rem) var(--wp--preset--spacing--60, 2rem) var(--wp--preset--spacing--70, 3rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ━━ 番号（全レイアウト共通の1要素） ━━
   見た目＝番号スタイル（POINT/大きい数字＝--big）、置き場所＝番号の位置（見出しの上／写真の左上＝--on-photo）。
   この2つは直交。数字リストだけは独自の大数字カラム（features__line-num）を使う。 */
.features__num {
  display: block;
  color: var(--wp--preset--color--accent);
  font-weight: var(--w-ui, 700);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.1em;
  margin: 0 0 0.5rem;
}
/* 番号スタイル＝大きい薄色数字（POINTなし） */
/* 番号スタイル＝大きい数字。★サイズは約半分に抑える（2026-07-21 実射FB「大きすぎて場所を占有しすぎ」）。
   旧 clamp(2.6rem,6vw,4.5rem)＝デスクトップ72px＋余白で約86pxを消費し、パネル上部に死に空間ができていた。
   → 約38px＋余白で約51px（-40%）。
   ★「透かしとして背面に敷く」案は不採用：①テーマには既にセクション見出しの透かし（軸D
     heading_fx）があり、両方ONで透かしが二重になり競合する。②番号の親要素は
     レイアウトごとに4種（row-text／photo-body／card-inner／circ）あり、絶対配置の基準が
     バラバラで背景パネルからはみ出す事故が起きやすい。数字は「読める指標」として残すほうが安全。
   小さくしたぶん埋もれないよう、淡さは 22%→32% にわずかに濃く。 */
.features__num--big {
  color: color-mix(in srgb, var(--wp--preset--color--primary) 32%, #fff);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: var(--w-head, 700);
  line-height: 1;
  letter-spacing: 0;
  margin: 0 0 0.35em;
}
/* 番号の位置＝写真の左上に重ねる。★白チップにして下地を問わず可読にする
   （写真＝暗い/明るいが不定、アイコン地＝primary-light の淡色。どちらでも成立させるため） */
.features__num--on-photo {
  position: absolute;
  /* 下限は 12px＝カードの角丸（lg は最大24px）でチップの角が削られないための余裕 */
  top: clamp(12px, 1.4vw, 16px);
  left: clamp(12px, 1.4vw, 16px);
  z-index: 2;
  margin: 0;
  display: inline-block;
  background: #fff;
  padding: 0.35em 0.8em;
  border-radius: var(--r-chip);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent);
}
/* 大きい数字×写真の左上＝チップが巨大化しないよう縮め、淡色ではなくプライマリ実色で載せる */
.features__num--on-photo.features__num--big {
  color: var(--wp--preset--color--primary);
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  padding: 0.2em 0.55em;
}
/* 丸写真は外接ボックスの角が円の外側になるため、少し内側へ寄せて円の縁に掛ける */
.features__circ-visual .features__num--on-photo { top: 6%; left: 6%; }
.features__heading {
  font-size: var(--wp--preset--font-size--lg);
  color: var(--feat-head, var(--wp--preset--color--primary));
  margin: 0 0 0.5rem;
}
.features__text {
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--sm);
  margin: 0;
}
/* ★本文だけは左揃え（2026-08-17 実射FB）。番号・見出し・飾りは中央のまま＝「箱は中央・文字は左」。
   長い日本語の段落を中央揃えにすると行末が毎行ばらつき、最後の1行だけが浮いて落ち着かない。
   院長挨拶の中央レイアウトで既に決着している判断と同じもの（`.greeting__message` の text-align:left）で、
   横並び型のカードだけが従っていなかった。丸（circles）も同じ本文なので一緒に揃える。
   ※ 4件＝2列（カード幅 526px）で行が長くなり顕在化した＝幅が広いほど中央揃えの破綻は大きい。 */
.features__text,
.features__circ .features__row-body { text-align: left; }

/* ── カードが広いときだけ中身を一回り大きく（2026-10-17 実射FB「横並び型だと全体的に小さく見える」）──
   中身の寸法（絵 150px・見出し 20px・本文 14px・余白 28px）は**3列のカード（341px）**に合わせたもの。
   4件＝2列でカードが 526px に広がっても中身は同じ大きさのままで、空きだけが増えて小さく見えていた。
   ★器（1080px）を広げる案は不採用：他のセクションはすべて 1080px で特徴だけ揃わなくなるうえ、
     カードがさらに広がるだけで中身は同じ＝余計に小さく見え、本文の1行も長くなる。
   ★判定は**カード自身の幅**（コンテナクエリ）。件数・画面幅で分岐を書かない＝列数の決定は
     clinic_features_cols() と --feat-cols-max の1か所のまま。2列（1・2・4件）とタブレットの1列
     （〜768px でカードが広い）に効き、3列のカード（341px）とスマホ（〜390px）は1pxも変わらない。
   ★寸法は固定値で持つ（横並びカードの絵に % を使えない理由は上の絵の節）。
   ★余白はトークンで差し替える：カード共通の余白（「カード系セクションの仕上げ」）は WP ブロックCSS
     対策の !important を持つので、規則を足しても上書きできない（診療案内の --dept-card-pad-* と同じ作り）。
   ★大きい数字（--big）は自前の大きさを持つので触らない。 */
.features__cards > .features__card { container: feat-card / inline-size; }
@container feat-card (min-width: 460px) {
  .features__card-inner { --feat-card-pad-block: 2.5rem; --feat-card-pad-inline: 2.75rem; }
  .features__icon { margin-bottom: 1.1rem; }
  .features__icon--illust svg { width: 200px; }
  .features__icon--icon svg { width: 56px; height: 56px; }
  .features__num:not(.features__num--big) { font-size: 0.8125rem; }
  .features__heading { font-size: 1.375rem; margin-bottom: 0.75rem; }
  .features__text { font-size: 0.9375rem; }
}

/* 縦並び（左右交互）レイアウト＝zigzag。写真・アイコンどちらでも可 */
.features__rows {
  display: flex;
  flex-direction: column;
  /* 特徴どうしの間隔（2026-07-21 実射FBで調整）。
     ①基準を約77px→約58pxへ縮小：旧値はセクション自身の上下padding（spacing 90＝約64px）を
       上回っており、項目が「ひとつのリスト」でなく「別々のブロック」に読めていた。
       グループ内の間隔はセクションの余白より内側に収める。
     ②余白スケール軸（body.spacing-*）に追従：--space-scale を掛けて
       ひかえめ 0.72／標準 1／ゆったり 1.4 で自動伸縮する（専用オプションは設けない）。 */
  gap: calc(clamp(2rem, 4.5vw, 3.75rem) * var(--space-scale, 1));
  margin-top: var(--wp--preset--spacing--70, 3rem);
  /* 行の中の列の間隔。ずらし重ねでカードに隠れる幅（--feat-st-lap）もここから導くのでトークンで持つ */
  --feat-row-gap: clamp(1.5rem, 4vw, 3.5rem);
}
.features__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--feat-row-gap);
  align-items: center;
}
/* ★★2026-08-28：表示スタイル「なし」＝メディアの列そのものが無い。
   2列のままだと文章が**半分の幅で止まり右半分が空く**ので1列にする。
   位置（交互/右/左）・形・大きさ・重ね方はメディアの話なので、
   パターン側がクラスごと出さない＝ここに打ち消しの宣言は要らない。 */
.features__rows--none .features__row { grid-template-columns: 1fr; }
/* 既定＝テキスト左・メディア右 */
.features__row-text  { order: 1; }
.features__row-media { order: 2; }
/* 左右交互（alt）＝偶数行で入替 */
.features__rows--alt .features__row:nth-child(even) .features__row-text  { order: 2; }
.features__rows--alt .features__row:nth-child(even) .features__row-media { order: 1; }
/* 写真左固定 */
.features__rows--left .features__row-media { order: 1; }
.features__rows--left .features__row-text  { order: 2; }
/* 写真右固定 */
.features__rows--right .features__row-media { order: 2; }
.features__rows--right .features__row-text  { order: 1; }

.features__row-heading {
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  color: var(--feat-head, var(--wp--preset--color--primary));
  margin: 0 0 0.8rem;
}
.features__row-body {
  color: var(--wp--preset--color--text-main);
  line-height: 1.9;
  margin: 0;
}
.features__row-media--photo {
  position: relative; /* 写真未設定時の .features__photo-empty(absolute) の基準にする */
  aspect-ratio: 3 / 2;
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--wp--preset--color--primary-light);
}
.features__row-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.features__row-media--icon,
.features__row-media--illust {
  position: relative; /* 番号の位置＝写真の左上（features__num--on-photo）の基準 */
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background: var(--wp--preset--color--primary-light);
  border-radius: var(--r-media);
  color: var(--wp--preset--color--primary);
}
.features__row-media--icon svg,
.features__row-media--illust svg { display: block; }

/* ★★縦並び型 × イラスト × 四角 × 離す＝**色の板を敷かない**（2026-10-13 実射FB）。
   ①淡色の板は**写真が未設定のときの空き枠（features__photo-empty）と同じ色・同じ形**で、
     線画を載せると「写真がまだ入っていない」に読めた。器をアイコンと共有した名残で、
     64px の記号1個なら板が要るが、場面を描いたイラストは絵そのものが面を持つ。
   ②板を外しても 3:2 の高さが残ると、余白が**行と行の間に積もる**（板があれば板が埋めていた）。
     → 箱の高さを絵に合わせる。絵の viewBox は外形に詰めてあるので（tools/icon-sheet.py fit）、
       ここで決めるのは「何px の箱に収めるか」だけ。高さの上限は縦長の絵だけを縮める
       （横長の絵は幅で決まる＝縮尺は全件同じ）。
   ★丸は板を残す：丸は板が形そのもの。ずらし重ねも 2026-10-17 に板を外した（箱の形が違うので下の節）。
   ★スマホ（1列）は絵が上・文字が下で、大きさの大小は効かない（どちらも全幅のトラック）。
     320px のままだと画面幅の8割を絵が占めて1件が 430〜520px になるので、一回り小さくする。 */
.features__rows { --feat-illust-w: 320px; --feat-illust-h: 240px; }
.features__rows--small { --feat-illust-w: 240px; --feat-illust-h: 180px; }
@media (max-width: 768px) {
  .features__rows.features__rows { --feat-illust-w: 260px; --feat-illust-h: 190px; }
}
.features__rows--illust:not(.features__rows--circle):not(.features__rows--stack) .features__row-media--illust {
  width: min(100%, var(--feat-illust-w));
  margin-inline: auto;
  aspect-ratio: auto;
  background: none;
  border-radius: 0;
  flex-direction: column;
  align-items: flex-start;
}
.features__rows--illust:not(.features__rows--circle):not(.features__rows--stack) .features__row-media--illust svg {
  width: 100%;
  height: auto;
  max-height: var(--feat-illust-h);
}
/* 番号の位置＝写真の左上：板が無いので「角」も無い。重ねると白いチップが**絵の線を隠す**
   （実測：屋根・人の頭に掛かった）→ 絵に重ねず、絵の上に置く。 */
.features__rows--illust:not(.features__rows--circle):not(.features__rows--stack) .features__row-media--illust .features__num--on-photo {
  position: static;
  margin: 0 0 0.75rem;
}

/* ★★ずらし重ね × イラスト × 四角＝板なし（透過）・箱は 16:9・PC は特徴どうしの間隔 0（2026-10-17 実射FB）。
   「離す」で板を外したとき（上の節）ずらし重ねだけ淡色の 3:2 の板が残り、同じ2点が直っていなかった。
   ①色：いったん白い板（帯の反対の面）にしたが、ユーザーが実機で白・透過・間隔を比べて
     **「透過＋特徴どうしの間隔なし」が一番よく見えた**（同日）。板が無くても、絵とずらしたカードの組で構図は読める。
   ②高さ：3:2 は絵（幅46%・横長〜ほぼ正方形）の上下に 69〜114px の空き（幅602pxの箱で実測）。
     → 16:9 にして縦長の絵だけ高さ 80% で頭打ち。★2:1 は縦長の絵が窮屈で、長いカードが箱の下へはみ出す。
   ③間隔：透過の箱は絵の上下に 10% 以上の空きを持つので、行の間隔（約60px）を足すと二重になる。
     → PC は 0＝箱の空きだけが特徴どうしの間隔になる。器1080px でカードの下端→次の絵 116〜148→56〜88px・
     セクション 1593→1413px（取り分を1段小さくした後の値）。
     ★スマホは間隔を残す：縦積みで 0 にすると、絵が上のカード（24〜45px）と自分のカード（13px）の中間に浮いて
     組が読みにくい（残すと 56〜77px／13px）。★PC は余白スケール軸（--space-scale）が効かなくなる（箱の空きが間隔のため）。
   ★丸は板が形そのものなので対象外（淡色の円のまま）。 */
.features__rows--stack.features__rows--illust:not(.features__rows--circle) .features__row-media--illust {
  aspect-ratio: 16 / 9;
  background: none;
  flex-direction: column; /* 番号（写真の左上）を絵の上に積む＝下の規則 */
}
.features__rows--stack.features__rows--illust:not(.features__rows--circle) .features__row-media--illust svg { max-height: 80%; }
/* 番号の位置＝写真の左上：板が無いので「角」も無い。箱の角に置くと何も無いところに浮き、
   写真右の行ではカードの角の真横に来た → 「離す」と同じく絵の上に置く（左右は下の③で絵と同じだけ動かす）。 */
.features__rows--stack.features__rows--illust:not(.features__rows--circle) .features__row-media--illust .features__num--on-photo {
  position: static;
  margin-block: 0 0.75rem;
}
/* スマホはカードを上へ 2rem 重ねる（下の節）。番号のぶん絵が下がると、カードが絵の下端を 5〜8px 隠した
   （番号が無ければ 13px 空く）。板が無い＝重ねる相手も無いので、このときだけ重ねない。 */
@media (max-width: 768px) {
  .features__rows--stack.features__rows--illust:not(.features__rows--circle) .features__row:has(.features__num--on-photo) .features__row-text {
    margin-top: 0;
  }
}
@media (min-width: 769px) {
  .features__rows--stack.features__rows--illust:not(.features__rows--circle) { gap: 0; }
}
/* カードの輪郭は影が持つ（白い帯の上の白いカードが溶けないように）。ずらし重ねの影は PC の節にしか無く、
   スマホ（縦積み・カードを上へ重ねる）では付いていなかった。かっちり（影なし）は罫線で持たせる（形の軸の約束どおり）。 */
.features__rows--stack.features__rows--illust:not(.features__rows--circle) .features__row-text { box-shadow: var(--sh-card); }
body.shape-sharp .features__rows--stack.features__rows--illust:not(.features__rows--circle) .features__row-text {
  border: 1px solid var(--rule-strong);
}
/* ③絵は**カードに隠れていない部分の中央**に置く（2026-10-17）。箱の中央のままだと、箱の端にカードが
   重なるぶん絵がカード側に寄って見えた（t03・1376px で絵の両側の空き 169px／55px）。
   → カードの側に「隠れる幅」の外側の余白を持たせる。中央寄せ（align-items:center）は余白ごと中央に置くので、
     絵の中心が隠れる幅の半分だけ外へ動く。★padding にしないのは、絵の幅（46%）が狭まった中身の幅を基準にして
     絵まで縮むため。margin の % は箱の幅が基準なので、絵の大きさは変わらない。番号も同じだけ動かす＝絵の真上。
   ★スマホは縦積みで横に重ならないので PC だけ。写真右・交互の偶数行はカードが左＝余白も左。 */
@media (min-width: 769px) {
  .features__rows--stack.features__rows--illust:not(.features__rows--circle) .features__row-media--illust :is(svg, .features__num--on-photo) {
    margin-inline: 0 var(--feat-st-lap);
  }
  .features__rows--stack.features__rows--illust.features__rows--right:not(.features__rows--circle) .features__row-media--illust :is(svg, .features__num--on-photo),
  .features__rows--stack.features__rows--illust.features__rows--alt:not(.features__rows--circle) .features__row:nth-child(even) .features__row-media--illust :is(svg, .features__num--on-photo) {
    margin-inline: var(--feat-st-lap) 0;
  }
}

@media (max-width: 768px) {
  .features__rows .features__row { grid-template-columns: 1fr; }
  /* スマホは全パターンとも常にメディアを上・テキストを下に積む（交互/左右固定を解除）。
     alt の :nth-child セレクタと同等以上の詳細度で確実に上書き */
  .features__rows .features__row .features__row-media,
  .features__rows--alt .features__row:nth-child(even) .features__row-media { order: 1; }
  .features__rows .features__row .features__row-text,
  .features__rows--alt .features__row:nth-child(even) .features__row-text  { order: 2; }
}

/* ━━ 特徴レイアウトの3大別（横並び型 cards / 縦並び型 rows / 数字リスト lines・2026-07-20 再編） ━━
   テキストは rows のクラス（features__row-heading / -body）＋共通の番号（features__num）を再利用してタイポを共有。
   色・角丸・影はトークン追従＝全キット共通（バリアント予算の原則）。
   縦並び型は 形(circle)・大きさ(small)・重ね方(stack)・背景(bg-*) を直交クラスで合成。 */

/* 共通：メディアを覆うカバー写真（横並び型×丸 で使用） */
.features__cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── 縦並び型：写真トラックの比率トークン ──
   四角＝大 1:1／小 1:2（約1/3幅）。
   ★丸は「円の直径＝トラック幅」になり同じ比率でも大きく見えるため、スケールを1段階小さい側へシフト
   （丸の大＝四角の小と同じ 1:2／丸の小＝さらに細い 1:3.5）。2026-07-21 実射FB「丸が大きすぎる」。 */
.features__rows { --feat-media-fr: 1fr; --feat-text-fr: 1fr; }
.features__rows--small  { --feat-text-fr: 2fr; }
.features__rows--circle { --feat-text-fr: 2fr;   --feat-row-circ: 380px; }
.features__rows--circle.features__rows--small { --feat-text-fr: 3.5fr; --feat-row-circ: 260px; }

/* 写真の形＝丸（行の写真を円形に）。★直径に上限を設けトラック内で中央寄せ＝
   スマホ1列・ずらし重ね（12カラム）でも円が肥大しない */
.features__rows--circle :is(.features__row-media--photo, .features__row-media--icon, .features__row-media--illust) {
  aspect-ratio: 1;
  border-radius: 50%;
  max-width: min(100%, var(--feat-row-circ, 380px));
  margin-inline: auto;
  /* ★overflow:hidden を外し、円形クリップは画像側へ移す（下の features__row-img）。
     番号の位置＝写真の左上 のチップは「円の外接ボックスの角」に出るため、
     コンテナで切ると番号が欠ける／消える（2026-07-21 実射FB）。
     背景（アイコン地・写真未設定時の淡色）は border-radius が効くので円のまま。 */
  overflow: visible;
}
.features__rows--circle .features__row-img { border-radius: 50%; }
/* 丸は角が円の外側になるので、番号チップを内側へ寄せて円の縁に掛ける（横並び×丸と同じ扱い） */
.features__rows--circle .features__num--on-photo { top: 6%; left: 6%; }

/* 写真の大きさ＝比率トークンをトラックへ適用。位置に応じ狭いトラックを写真側へ。ずらし重ね時は無効 */
@media (min-width: 769px) {
  .features__rows:not(.features__rows--stack).features__rows--left  .features__row { grid-template-columns: var(--feat-media-fr) var(--feat-text-fr); }
  .features__rows:not(.features__rows--stack).features__rows--right .features__row { grid-template-columns: var(--feat-text-fr) var(--feat-media-fr); }
  .features__rows:not(.features__rows--stack).features__rows--alt .features__row:nth-child(odd)  { grid-template-columns: var(--feat-text-fr) var(--feat-media-fr); } /* 奇数＝写真右 */
  .features__rows:not(.features__rows--stack).features__rows--alt .features__row:nth-child(even) { grid-template-columns: var(--feat-media-fr) var(--feat-text-fr); } /* 偶数＝写真左 */
}

/* ── 縦並び型・横並び型：テキスト背景（白／薄プライマリ）＝地を敷きカード化。透過は class なし ── */
.features__rows--bg-white .features__row-text,
.features__rows--bg-tint  .features__row-text {
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--r-card);
}
.features__rows--bg-white .features__row-text { background: #fff; }
.features__rows--bg-tint  .features__row-text { background: var(--feat-tint); }

/* 横並び型（四角カード）の背景：白＝既定#fff／薄プライマリ／透過＝箱なし */
.features__cards--bg-tint .features__card-inner { background: var(--feat-tint); }
.features__cards--bg-transparent .features__card-inner { background: transparent; box-shadow: none; }

/* ── 縦並び型：重ね方＝ずらし重ね（写真とテキストカードを重ねる雑誌風） ──
   12カラムの取り分をトークン化し、写真の大きさ（大/小）で切り替える。
   ★元は列を直書きしていたため「ずらし重ね×四角では大きさが効かない」一方、
     丸は直径上限（--feat-row-circ）が別経路で効いてしまい、同じレイアウト内で
     形によって挙動が違う状態だった（2026-07-21 実射FB）→ 列配分で効かせて統一。
   重なりは大小とも2カラムで一定＝重ね方のデザインは崩さず、取り分だけ入れ替える。 */
.features__rows--stack {
  --feat-st-media: 1 / 9;         /* 大＝写真8カラム */
  --feat-st-text: 7 / 13;         /* 　　カード6カラム（重なり2） */
  --feat-st-media-mirror: 5 / 13; /* 写真右のときのミラー */
  --feat-st-text-mirror: 1 / 7;
  /* 写真の箱のうちカードに隠れる幅（% は写真の箱の幅）。列の幅を c・間隔を g とすると
     箱＝8c+7g・隠れる幅＝2c+g なので、隠れる幅＝箱/4 − 3g/4（画面幅によらず箱と g だけで決まる）。
     ★丸の取り分（下の節：箱4・重なり1／箱3・重なり1）でも同じ式になる＝丸では上書きしない。 */
  --feat-st-lap: calc(25% - var(--feat-row-gap) * 0.75);
}
.features__rows--stack.features__rows--small,
.features__rows--stack.features__rows--illust:not(.features__rows--circle) { /* イラストの大もこの取り分（下の節） */
  --feat-st-media: 1 / 7;         /* 小＝写真6カラム */
  --feat-st-text: 5 / 13;         /* 　　カード8カラム（重なり2） */
  --feat-st-media-mirror: 7 / 13;
  --feat-st-text-mirror: 1 / 9;
  --feat-st-lap: calc(100% / 3 - var(--feat-row-gap) * 2 / 3); /* 箱＝6c+5g・隠れる幅＝2c+g */
}
/* ★丸×ずらし重ねは別の取り分にする（2026-07-21 実射FB）。
   丸は直径上限（--feat-row-circ 大380/小260px）があり、8カラム（約720px）のトラックの中で
   margin-inline:auto によって中央に泳ぐ→カードから離れ、大では重なりが約10px＝実質「並んでいるだけ」
   になっていた（四角はトラック全体を埋めるので発生しない・丸だけの症状）。
   → 写真トラックを円の直径に近い幅まで狭め、カード側を広げて重なりを作る。
   コンテナ1080px換算：大＝重なり約90px（円の25%）／小＝約85px（33%）。ミラー側も対称。 */
.features__rows--stack.features__rows--circle {
  --feat-st-media: 1 / 5;          /* 大＝写真4カラム（円 約360px にほぼ一致） */
  --feat-st-text: 4 / 13;          /* 　　カード9カラム */
  --feat-st-media-mirror: 9 / 13;
  --feat-st-text-mirror: 1 / 10;
}
.features__rows--stack.features__rows--circle.features__rows--small {
  --feat-st-media: 1 / 4;          /* 小＝写真3カラム（円 260px） */
  --feat-st-text: 3 / 13;          /* 　　カード10カラム */
  --feat-st-media-mirror: 10 / 13;
  --feat-st-text-mirror: 1 / 11;
}
/* ★★イラスト×ずらし重ねは大きさを1段小さく読み替える（2026-10-17 実射FB「写真ならこれで良いが、イラストがデカすぎる」）。
   写真は板いっぱいに写るので大きな板が見せ場になるが、イラストは板の中に線画が1つ置かれるだけで、
   8カラムの板（器1080pxで 701×394px・絵 323px）は白い面ばかりが大きく、絵も大きく見えた。
   丸を1段小さくした（上の --feat-row-circ）のと同じ考え方＝**素材が変わったらサイズ軸を読み替える**。
   - 大＝写真の小と同じ取り分（写真6/カード8）＝上の --small の規則に相乗り。板 512×288px・絵 236px。
     セクション 2019→1593px。カードの1行は約28→40字。
   - 小＝写真5/カード7を**12カラムの中央**（2〜11列）に置く。比べた3案（器1080px）：
     写真5/カード9 はカード（796px・1行約46字）が板を圧倒し、写真5/カード8 を片側に寄せると左右の端がそろわない。
     中央の 5/7 は板と文字の釣り合いが大と同じで、1行約34字。左右の端は器から1列ずつ内側になる＝小さく見せる型として読める。
   ★隠れる幅は箱5・重なり2（2c+g）→ 箱/5×2 − g×3/5（上の --feat-st-lap の式と同じ導き方）。 */
.features__rows--stack.features__rows--illust.features__rows--small:not(.features__rows--circle) {
  --feat-st-media: 2 / 7;          /* 小＝写真5カラム（中央寄せの左端＝2列目から） */
  --feat-st-text: 5 / 12;          /* 　　カード7カラム（重なり2・右端は11列目まで） */
  --feat-st-media-mirror: 7 / 12;
  --feat-st-text-mirror: 2 / 9;
  --feat-st-lap: calc(40% - var(--feat-row-gap) * 0.6);
}
@media (min-width: 769px) {
  .features__rows--stack .features__row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
  }
  /* 既定＝写真左・カード右（下へずらす）。位置に応じてミラー */
  .features__rows--stack .features__row-media { grid-row: 1; grid-column: var(--feat-st-media); }
  .features__rows--stack .features__row-text  {
    grid-row: 1; grid-column: var(--feat-st-text); z-index: 1;
    /* カードを下へずらす量。★この margin は「行の内側」に加算されるため、行間 gap（約58px）の上に
       積み上がってカード同士の間隔になる。旧 clamp(3rem,8vw,5rem)＝80px では 58+80=138px となり、
       先に「項目間は58pxが妥当」と決めた調整がずらし重ねだけ実質2.4倍に膨らんでいた
       （2026-07-21 実射FB・丸×小で特に目立つが四角でも同じ）。→ 44px にして 58+44=102px。
       この構図の主役は横方向の重なり（丸で85〜90px）で、縦オフセットはアクセントなので44pxで足りる。
       ※ transform:translateY にすれば行高は増えないが、カードが行外へはみ出て次行と衝突するため不採用。 */
    margin-top: clamp(1.75rem, 4vw, 2.75rem);
    box-shadow: var(--sh-card);
  }
  /* 右固定＝写真右・カード左 */
  .features__rows--stack.features__rows--right .features__row-media { grid-column: var(--feat-st-media-mirror); }
  .features__rows--stack.features__rows--right .features__row-text  { grid-column: var(--feat-st-text-mirror); }
  /* 交互＝偶数行を写真右・カード左に */
  .features__rows--stack.features__rows--alt .features__row:nth-child(even) .features__row-media { grid-column: var(--feat-st-media-mirror); }
  .features__rows--stack.features__rows--alt .features__row:nth-child(even) .features__row-text  { grid-column: var(--feat-st-text-mirror); }
}
@media (max-width: 768px) {
  /* スマホは縦積み＋カードを少し上へ重ねて雑誌感を残す（地色があるので写真の縁に読める） */
  .features__rows--stack .features__row-text { position: relative; z-index: 1; margin: -2rem 1rem 0; }
}

/* ── 横並び型：写真の形＝丸（丸写真＋番号バッジ／透過なら点線でつなぐ） ── */
.features__circles {
  --feat-circ: clamp(150px, 18vw, 220px); /* 丸の直径（点線の高さ計算と共有） */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: var(--wp--preset--spacing--70, 3rem);
  position: relative;
  text-align: center;
}
/* 点線コネクタ＝丸の中心の高さ。4件以上（2段組）では非表示 */
.features__circles::before {
  content: "";
  position: absolute;
  top: calc(var(--feat-circ) / 2);
  left: 12%;
  right: 12%;
  border-top: 2px dashed color-mix(in srgb, var(--wp--preset--color--primary) 38%, #fff);
}
.features__circles:has(> :nth-child(4))::before { display: none; }
.features__circ-visual {
  position: relative;
  width: var(--feat-circ);
  aspect-ratio: 1;
  margin: 0 auto clamp(0.9rem, 2vw, 1.3rem);
}
.features__circ-media {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--wp--preset--color--primary-light);
}
.features__circ-media--icon,
.features__circ-media--illust {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--primary);
}
.features__circ .features__row-heading { font-size: clamp(1.1rem, 2vw, 1.35rem); margin-bottom: 0.5rem; }
.features__circ .features__row-body { font-size: var(--wp--preset--font-size--sm); }
/* テキスト背景＝白/薄プライマリ のときは各アイテムをカード化し、点線コネクタは消す */
.features__circles--bg-white .features__circ,
.features__circles--bg-tint  .features__circ {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2.5vw, 1.5rem);
  border-radius: var(--r-card);
}
.features__circles--bg-white .features__circ {
  background: #fff;
  box-shadow: var(--sh-card);
}
.features__circles--bg-tint .features__circ { background: var(--feat-tint); }
.features__circles--bg-white::before,
.features__circles--bg-tint::before { display: none; }
@media (max-width: 768px) {
  .features__circles { grid-template-columns: 1fr; gap: 2rem; }
  .features__circles::before { display: none; }
}

/* ── lines：写真なしの数字リスト（罫線エディトリアル） ── */
.features__lines {
  max-width: min(860px, 100%);
  margin: var(--wp--preset--spacing--70, 3rem) auto 0;
}
.features__line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3.5vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.5rem, 4vw, 2.25rem);
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent);
}
.features__line:first-child { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent); }
.features__line-num {
  min-width: 2.2em;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: var(--w-head, 700);
  line-height: 1;
  color: color-mix(in srgb, var(--wp--preset--color--primary) 26%, #fff);
}
.features__line .features__row-heading { font-size: clamp(1.2rem, 2.4vw, 1.5rem); margin-bottom: 0.5rem; }

/* 5. 診療案内 */
.departments__card-inner {
  height: 100%;
  /* height:100% を内容領域でなく境界ボックスに適用。
     content-box だとパディング+ボーダーが二重計上され
     カラムより約47px はみ出して下に余白が出る */
  box-sizing: border-box;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  box-shadow: var(--sh-card);
}
/* ホバーは「詳しいページのあるカード」だけ（浮き上がり＝クリックできる合図。
   リンクの無いカードは動かさない＝押せると誤解させない） */
.departments__card--linked .departments__card-inner:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
}

/* アイコン＋見出しを横並び（左寄せの一覧型。特徴の中央寄せと差別化） */
.departments__card-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.7rem;
}
.departments__card-head h3 {
  margin: 0 !important;
  line-height: 1.3;
  font-size: var(--dept-title-fs);
}
/* ★★★2026-09-10 実射FB「**診療内容が4つのとき2列になって、ホワイトニング等の文字が小さすぎる**」。
   ★★問題は文字の設定ではなく、**基準が器の幅を見ていなかった**こと。基準は画面幅に連動する `lg` だけで
     決まっていたので、同じ画面幅なら**カードが 346px でも 530px でも同じ 20px**になる。
     4件＝2列でカード幅が倍近くになると、錠剤の**幅の77%が空いたまま**文字だけが取り残される
     （実測 1400px：錠剤 494px に対し「ホワイトニング」の文字幅 112px）。
   → 基準に**器の幅（`cqi`＝カード幅の1%）を足す**。器が広いほど科目名も大きくなる。
   ★★**下限は従来の式をそのまま残す**（`max()` の中に並べる）＝この変更で**文字が小さくなることは無い**。
     2026-08-17 に入れた「スマホで本文より小さくならない」保証（下限18px）はそのまま効く。
   ★係数 4.0cqi と上限 1.625rem（26px）の根拠：カード 500px で従来の 20px を追い越し、
     530px（4件＝2列・幅1400px）で約 21px、650px 以上は 26px で頭打ち。
     3列（カード 346px）とスマホでは `max()` の他の項が勝つので**従来と1pxも変わらない**。
   ★★係数は**実機の目視で決めた**：最初 4.5cqi（530px で約 24px）で入れたが「**少し大きすぎる**」（実射FB）。
     ここは比率やコントラストのように計算で決まる値ではないので、**画面を見て決めたほうが正しい**
     （docs/variant-catalog.md §数値より実機の目視）。 */
.departments__card { container-type: inline-size; }
/* ★★科目名の基準＝流体の `lg` に**下限**を掛ける（2026-08-17 実射FB「スマホで科目名が小さい」）。
   `lg` は fluid typography で 375px では **14.36px** まで縮む。説明文（`sm`）は同じ幅で **14px** なので、
   **見出しが本文とほぼ同じ**になり、段階縮小が乗ると **12px＜14px＝見出しのほうが小さい**という
   階層の逆転まで起きていた（実測）。
   → 下限 1.125rem（18px）。PCでは `lg`（20px）が勝つので**PCの見え方は変わらない**。
   ★下限は「本文より確実に大きい」を担保する値＝説明文14pxに対し18px（1.29倍）。 */
.departments__card-head {
  --dept-title-fs: min(max(1.125rem, var(--wp--preset--font-size--lg), 4.0cqi), 1.625rem);
}
/* ★★科目名の段階縮小＝**基準からの比率**で持つ（2026-08-17 実射FB
     「スマホだと文字数の少ない皮膚科などが小さく見える」）。
   旧実装は pattern が 1.1rem / 1rem / 0.9rem を**固定値でインライン出力**していた。基準の lg は
   **流体（clamp）**で 375px では 14.36px まで縮むため、固定remの段階のほうが大きくなり
   **短い名前ほど小さいという逆転**が起きていた（実測 375px：ホワイトニング(7文字)16px ＞ 皮膚科(3文字)14.36px）。
   → 比率（0.88 / 0.8 / 0.72 ＝ 1.1÷1.25 / 1÷1.25 / 0.9÷1.25）で書くと、
     **PCの見え方は1pxも変わらず**（lg=20px のとき 17.6 / 16 / 14.4）、どの画面幅でも順序が保たれる。
   ★下限は可読の下限（--fs-min）で止める＝縮小は「読めなくなる手前」まで。
   ★教訓：**流体（clamp）の基準に固定値の段階を混ぜない。** 段階は基準と同じ単位系＝比率で持つ。 */
/* ★★★2026-09-10：段階縮小は**器が実際に狭いときだけ**効かせる。
   ★★この段階は「カプセルは `white-space: nowrap` なので長い名前を1行に収める」ための**幅不足の代償**
     であって、名前が長いこと自体への調整ではない。ところが**トリガーが文字数だけ**だったので、
     4件＝2列で幅が倍になり不足が消えたあとも効き続け、**いちばん長い名前だけが一段小さい**
     （実測 1400px：ホワイトニング 16px ／ 皮膚科 20px）という逆の見え方を作っていた。
   ★★★文字数は幅の**代理変数**にすぎない。列数が変わった瞬間に代理として成立しなくなるので、
     条件を**器の幅そのもの**に張り替える（`--dept-cols` を条件にするのは不可＝2列でもタブレット幅なら
     カードは狭い。見るべきは列数ではなくカード幅）。
   ★閾値 380px の根拠＝段階が守るべき最悪ケース「9文字」が1行に収まる下限。
     文字が使える幅 ≒ カード幅 − 予備幅（アイコン＋余白。`--dept-icon-size` が最大 100px のとき実測約196px）で、
     9文字 × 20px = 180px を収めるには 376px 要る。10文字以上は `--tlong` が折り返しを許すので対象外。
     ＝**380px 未満では従来どおり効き、それ以上では効かない**（実測でも 2列 530px・3列 346px の両方で
     20px なら9文字まで1行に収まる）。 */
@container (max-width: 380px) {
  .departments__card--tstep1 .departments__card-head h3 { font-size: max(var(--fs-min), calc(var(--dept-title-fs) * 0.88)); }
  .departments__card--tstep2 .departments__card-head h3 { font-size: max(var(--fs-min), calc(var(--dept-title-fs) * 0.8)); }
  .departments__card--tstep3 .departments__card-head h3 { font-size: max(var(--fs-min), calc(var(--dept-title-fs) * 0.72)); }
}
/* 科目名の下にアクセント色の短い下線で装飾（文字の中央に配置・2行でも崩れない） */
.departments__card-head h3 { text-align: center; }
.departments__card-head h3::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin: 0.4rem auto 0; /* 左右 auto で文字ブロックの中央へ */
  border-radius: 2px;
  background: var(--wp--preset--color--accent);
}
/* アイコンはコンテナ装飾なしの「線アイコン単体」。
   カード側が角丸＋影＋余白で装飾を担うため、二重装飾を避ける。
   白カードの上の単色グリフなので背景バンドが白/緑どちらでも崩れない。 */
.departments__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--primary);
}
/* ※アイコン色のホバー変化は廃止（2026-07-19）：線の色が設定制になったため固定色への
   上書きは意図とズレる。ホバーの合図はカードの浮き上がり＋「詳しく見る」下線が担う */

/* ★「詳しく見る」の太さは p 自身にも置く：リンクを持たない構成（patterns/departments.php）では
   テキストが p 直下にあるため、a だけに宣言するとそちらに太さが届かない。 */
/* ★★色と大きさもここが持つ（2026-08-22）。トップのパターンと診療案内LPが
   **同じ2値を inline で書き写して**いた（`color:primary` / `font-size:sm`）＝定数の二重持ち。
   すぐ上のコメントが「太さはインラインに書かない」と言っているのに、色と大きさは書いていた。 */
.departments__more { font-weight: var(--w-ui, 700); color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--sm); }
.departments__more a {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  text-decoration: none;
  font-weight: var(--w-ui, 700);
  transition: gap 0.2s;
}
.departments__more a:hover { gap: 0.5em; }

/* ── カードスタイル・プリセット（セクション単位。横並びは維持） ──
   「アイコンと科目名の位置（pos-side/top/bottom）」×「アイコンの見せ方（ico-plain/circle/square）」の直交2軸 */
/* 位置：アイコン上／下＝カード内容を中央寄せ＋見出しブロックを縦に */
.departments__grid--pos-top .departments__card-inner,
.departments__grid--pos-bottom .departments__card-inner {
  text-align: center;
  align-items: center;
}
/* ★短い説明だけは左揃え＝「箱は中央・文字は左」（2026-08-17 実射FB）。
   アイコン・科目名・「詳しく見る」は短いラベルなので中央のままでよいが、
   **折り返す日本語の段落を中央揃えにすると行末が毎行ばらつき、最後の1行だけが浮く**。
   院長挨拶の中央レイアウト（`.greeting__message`）・当院の特徴の本文と**同じ判断**で、
   中央寄せの型を持つ3つ（アイコン上／下／旧listカード）すべてに掛ける
   ＝「同じ役割の実装が形状ごとに分かれていると、自前指定を持たないほうが取り残される」を避ける。
   ※ `.departments__more`（詳しく見る）は除外＝リンクの短いラベルなので中央のまま。
   ★1行に収まる説明は箱が縮んで中央に置かれる（1行なら中央・2行からは左）。面が見えない1列では
     「詳しく見る」を説明の左端に付けるので、768px の節が `--dept-desc-self: stretch` で箱を伸ばしてそろえる。 */
:is(.departments__grid--pos-top, .departments__grid--pos-bottom, .departments__grid--list) .departments__card-inner > p:not(.departments__more) {
  text-align: left;
  align-self: var(--dept-desc-self, auto);
}
.departments__grid--pos-top .departments__card-head,
.departments__grid--pos-bottom .departments__card-head {
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
/* アイコン下＝縦積みの順序だけ反転（科目名の下にアイコン） */
.departments__grid--pos-bottom .departments__card-head {
  flex-direction: column-reverse;
}
/* アイコンの大きさはCSSで固定せず、pattern が「アイコンの大きさ」設定（40〜100px）を
   描画時に渡す（SVG属性／PNGマスクinline styleの両形態に一律で効かせるため）。 */
/* 見せ方＝直交4項目（2026-07-19 再編）：
   地の形式（ico-none/fill/ring）× 地の形（icoshape-circle/square）× 地の色/線の色。
   色は pattern が役割→トークンCSSに解決し --dept-ico-bg / --dept-ico-line で注入する
   （組合せをクラスで列挙しない。NG組合せの補正はPHP側 clinic_departments_icon_design()）。
   地の大きさはアイコンサイズ設定（--dept-icon-size）の1.5倍で連動 */
:is(.departments__grid--ico-fill, .departments__grid--ico-ring) .departments__icon {
  width: calc(var(--dept-icon-size, 40px) * 1.5);
  height: calc(var(--dept-icon-size, 40px) * 1.5);
}
/* 丸は真円、四角はサイズ比例の角丸（40px時 約12px）＝拡大しても印象が保たれる */
.departments__grid--icoshape-circle .departments__icon { border-radius: 50%; }
.departments__grid--icoshape-square .departments__icon { border-radius: calc(var(--dept-icon-size, 40px) * 0.3); }
/* ── 横並びの囲い（カプセル）：アイコン＋科目名の行を錠剤型に。位置=横並びのみ ──
   内容にフィットさせ（カード幅に伸ばさない）、左端にアイコンの地がはまる構図。
   アイコンの地が「なし」のときはグリフが枠に寄りすぎるため左に余白を足す */
.departments__grid--pos-side:is(.departments__grid--cap-outline, .departments__grid--cap-soft, .departments__grid--cap-white) .departments__card-head {
  align-self: stretch; /* カード内幅いっぱいに統一（科目名の長短で錠剤の幅が揃わないのを防ぐ） */
  border-radius: var(--r-chip);
  padding: 0 0.6em 0 0; /* 左＝アイコンの地と完全に同化（余白なし）。右は科目名の中央寄せ化に伴い詰める */
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  /* カードの左右余白（1.5rem）へ0.5remずつ食い込ませてカプセルの実効幅を拡張。
     説明文のテキスト幅は従来のまま＝カプセルだけ一回り広い「帯」になる */
  margin-inline: -0.5rem;
}
/* 幅Max統一に伴い、科目名はアイコン右の残り空間の中央へ（長い名前の使える幅も最大化） */
.departments__grid--pos-side:is(.departments__grid--cap-outline, .departments__grid--cap-soft, .departments__grid--cap-white) .departments__card-head h3 {
  flex: 1;
  min-width: 0;
}
/* 地の形＝四角のときはカプセルも同じ角丸四角に追従（角丸半径をアイコンの地と共有＝
   四角い地に丸い錠剤キャップが混在する不揃いを防ぐ） */
.departments__grid--pos-side.departments__grid--icoshape-square:is(.departments__grid--cap-outline, .departments__grid--cap-soft, .departments__grid--cap-white) .departments__card-head {
  border-radius: calc(var(--dept-icon-size, 40px) * 0.3);
}
/* 枠線カプセルでは、アイコンの地を枠線の太さぶん食い込ませて左キャップを完全一体化
   （地あり＝fill/ring のときだけ。枠線の上に不透明な地が重なり輪郭が繋がって見える） */
.departments__grid--pos-side.departments__grid--cap-outline:is(.departments__grid--ico-fill, .departments__grid--ico-ring) .departments__card-head .departments__icon {
  margin: -1.5px 0 -1.5px -1.5px;
}
.departments__grid--pos-side.departments__grid--cap-outline .departments__card-head {
  background: #fff; /* 透過カード・色付きバンドでもカプセルが白い錠剤として立つ */
  border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--primary) 32%, #fff);
}
.departments__grid--pos-side.departments__grid--cap-soft .departments__card-head {
  background: color-mix(in srgb, var(--wp--preset--color--primary-light) 40%, #fff);
}
/* 白カプセル＝枠なしの白い錠剤（色付きバンド・透過カードで映える） */
.departments__grid--pos-side.departments__grid--cap-white .departments__card-head {
  background: #fff;
}
.departments__grid--pos-side.departments__grid--ico-none:is(.departments__grid--cap-outline, .departments__grid--cap-soft, .departments__grid--cap-white) .departments__card-head {
  padding-left: 0.9em;
}
/* カプセル内の科目名は1行維持（改行した錠剤は形が崩れる）。
   長い名前は pattern 側の段階縮小（5〜6/7〜8/9文字〜）とセットで収める */
.departments__grid--pos-side:is(.departments__grid--cap-outline, .departments__grid--cap-soft, .departments__grid--cap-white) .departments__card-head {
  max-width: 100%;
}
.departments__grid--pos-side:is(.departments__grid--cap-outline, .departments__grid--cap-soft, .departments__grid--cap-white) .departments__card-head h3 {
  white-space: nowrap;
}
/* 安全弁：10文字以上（例：小児矯正・ホワイトニング科 等の複合名）は縮小しても収まらない
   可能性があるため折返しを許容（はみ出しよりは2行の錠剤のほうがマシ） */
.departments__grid--pos-side .departments__card--tlong .departments__card-head h3 {
  white-space: normal;
}

/* ── 科目名の飾り（tdeco-*。既定 bar＝基底の短い下線のまま。色はセカンダリ追従） ── */
.departments__grid--tdeco-none .departments__card-head h3::after { display: none; }
/* 点線＝丸ドットの繰り返し（radial-gradient。dotted border より丸が綺麗に出る）。
   ★★2026-08-22 実射FB「点線がキリの悪いところで途中で切れる」：
     11px のタイルを repeat-x していたので、器の幅が 11 の倍数でないと**最後の1個が欠ける**
     （文字幅に合わせる特徴の見出しは幅が任意／固定 46px のほうも 46÷11＝4.18 個で端が切れていた）。
   → `round`＝**タイルを整数個に収まるよう間隔だけ伸縮**させる。丸の大きさは closest-side＝
     タイルの高さ(6px)で決まるので**ドットの径は変わらず、間隔だけがわずかに動く**。
   ★幅を 11 の倍数に丸める案は採らない：特徴の下線は**文字幅に追従する**のが仕様なので、
     幅のほうを触ると別の要件を壊す。**器はそのまま、中身の敷き方で解く。** */
.departments__grid--tdeco-dotted .departments__card-head h3::after {
  width: 46px;
  height: 6px;
  border-radius: 0;
  background: radial-gradient(circle closest-side, var(--wp--preset--color--accent) 92%, transparent) 0 0 / 11px 6px round no-repeat;
}
/* 波線＝SVGマスク＋背景色（mask なら色はトークン追従のまま） */
.departments__grid--tdeco-wave .departments__card-head h3::after {
  width: 48px;
  height: 8px;
  border-radius: 0;
  background: var(--wp--preset--color--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 8' preserveAspectRatio='none'><path d='M0 4 Q 5.5 0 11 4 T 22 4 T 33 4 T 44 4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/></svg>") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 8' preserveAspectRatio='none'><path d='M0 4 Q 5.5 0 11 4 T 22 4 T 33 4 T 44 4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/></svg>") center / 100% 100% no-repeat;
}
/* マーカー＝文字の下半分を淡いセカンダリで塗る（span＝文字幅だけ。下線バーは消す） */
.departments__grid--tdeco-marker .departments__card-head h3::after { display: none; }
.departments__grid--tdeco-marker .departments__card-head h3 .departments__title-inner {
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--wp--preset--color--accent) 38%, #fff) 62%);
  padding: 0 0.12em;
}

/* なし＝線の色だけ適用（既定はプライマリ＝従来の standard と同じ） */
.departments__grid--ico-none .departments__icon {
  color: var(--dept-ico-line, var(--wp--preset--color--primary));
}
/* 背景色＝塗り地＋線 */
.departments__grid--ico-fill .departments__icon {
  background: var(--dept-ico-bg);
  color: var(--dept-ico-line);
}
/* 輪郭リング＝白地＋枠線（地の色）＋線 */
.departments__grid--ico-ring .departments__icon {
  background: #fff;
  border: 1.5px solid var(--dept-ico-bg);
  color: var(--dept-ico-line);
}
/* ── 枠・影（レイアウト3種と直交の第2軸） ── */
/* frame-shadow（影つき・既定）＝基底スタイルのまま（上書きなし） */
/* 枠線（影をやめ細い枠線でフラット） */
.departments__grid--frame-outline .departments__card-inner {
  box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 18%, #fff);
}
.departments__grid--frame-outline .departments__card--linked .departments__card-inner:hover {
  box-shadow: 0 6px 20px color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
}
/* 枠・影なし（フラット。hover でも影を出さない＝浮き上がりのみ） */
.departments__grid--frame-flat .departments__card-inner,
.departments__grid--frame-flat .departments__card-inner:hover {
  box-shadow: none;
  border: none;
}
/* 透過カード：影は hover 含め常に無効（透過背景越しに影の矩形が透けて見えるため。
   影つき→枠・影なしへの選択補正はPHP側だが、枠線スタイルの hover 影もここで抑止） */
.departments__grid--cardbg-transparent .departments__card-inner,
.departments__grid--cardbg-transparent .departments__card-inner:hover {
  box-shadow: none;
}

/* ── カード全体リンク（詳細ページがあるカードは inner 自体が <a>） ── */
a.departments__card-inner {
  color: inherit;              /* テーマのリンク色・下線を打ち消し、カードの見た目を維持 */
  text-decoration: none;
}
/* ★★★「詳しく見る」は**カードの軸**にそろえる（2026-10-14 実射FB「左に寄っていると違和感がある」）。
   軸＝アイコンと科目名の並び。カード全体がリンクなので、「詳しく見る」は説明の続きではなく
   **「このカードは押せる」の札**＝札はカードの軸に乗せる。
   ・中央の軸を持つ型（アイコン上／下・下層の一覧）→ **中央・カードの下端**。下端に置くのは、説明の行数が
     ばらばらでも同じ段のリンクの高さがそろうため（最小の間隔は padding-top が持つ＝margin は auto に使う）。
   ・アイコン横（見出しが左に立つ型）→ **左**。
   ・面が見えないカードが1列に並ぶとき（〜768px）だけ、説明の続きとして左（2026-08-17 実射FB
     「詳しく見るが上の科目のものか下の科目のものか分かりづらい」）。面も列の区切りも無いと、帰属を示すのは
     **寄せと近さ**しかない。面なしの判定は1か所＝下の 768px の節が `--dept-more-align` を left にする。
   旧実装（8/17）は「説明の直後なら左」を**全部の型・全部の幅**に掛けていた。PC の面のあるカードでは
   ① 枠そのものが帰属を示すので、左に寄せる理由が無い。
   ② 説明が1行だと説明の箱は縮んで中央に置かれる（`align-items: center`）のに、リンクだけ内側の左端まで伸びていた
      ＝**説明より46px左＝何にも揃っていない**（実測 1280px：説明の左端 163px／リンク 117px）。 */
:is(.departments__grid--pos-top, .departments__grid--pos-bottom, .departments__grid--list) .departments__more {
  align-self: stretch;
  text-align: center;
  margin-top: auto;
  padding-top: 0.7rem;
}
/* 説明の直後にあるときだけ寄せを差し替えられる（説明を出さない設定では中央のまま＝科目名にそろう） */
:is(.departments__grid--pos-top, .departments__grid--pos-bottom, .departments__grid--list) .departments__card-inner > p:not(.departments__more) + .departments__more { text-align: var(--dept-more-align, center); }
.departments__grid--pos-side .departments__more { text-align: left; }
.departments__card--linked .departments__card-inner:hover .departments__more {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* フリーセクション（お知らせ・バナー）。本文はテーマ・タイポで整形＝崩れ防止 */
.section-free .free__inner {
  max-width: 760px;
  margin: var(--wp--preset--spacing--60, 2rem) auto 0;
  text-align: center;
  /* ★★左右はページの余白＝**面（カード）の有無に関わらず全型が持つ**（2026-08-02）。
     旧実装は下の「面を持つ6種」だけに `padding` ショートハンドを書いていたため、
     **面のない `normal` では余白ごと消え、文字が画面の端に接していた**（実測375px：左0/右1）。
     面のある型は下のブロックのショートハンドが左右も上書きするので従来の 26px のまま＝見た目は不変。
     ※この宣言は面の型のブロックより**前**に置くこと（同詳細度で後読みが勝つため）。 */
  padding-inline: var(--gutter);
}
.section-free .free__body {
  color: var(--wp--preset--color--text-main);
  line-height: 1.9;
  font-size: var(--wp--preset--font-size--md);
  /* 本文（長文）は左揃えで読みやすく（見出し・アイブロウは section-head 側で中央のまま） */
  text-align: left;
}
.section-free .free__body > :first-child { margin-top: 0; }
.section-free .free__body > :last-child { margin-bottom: 0; }
.section-free .free__body p { margin: 0 0 1em; }
/* 画像・ボタンだけの段落は中央に（単独ビジュアルとして見せる） */
.section-free .free__body p:has(> a.cms-btn:only-child),
.section-free .free__body p:has(> img:only-child) { text-align: center; }
.section-free .free__body a { color: var(--wp--preset--color--primary); text-decoration: underline; }
.section-free .free__body strong { color: var(--wp--preset--color--primary-dark); }
.section-free .free__body ul,
.section-free .free__body ol { display: inline-block; text-align: left; margin: 0.4em 0; padding-left: 1.4em; }
/* 本文エディタで挿入した画像（メディアを追加）。単独写真として整える */
.section-free .free__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-media);
  display: block;
  margin: 1.6rem auto;
}
/* 本文エディタで挿入したボタン（部品を挿入 ＞ ボタンリンク）の上下間隔 */
.section-free .free__body a.cms-btn { margin-top: 0.6rem; }

/* フリーセクションのカード・バリエーション（style 軸）。すべてトークン追従＝キット/パレット自動追従。
   共通のパネル余白（normal 以外）。個別の地・枠だけ各 modifier で上書きする。 */
.section-free--plain .free__inner,
.section-free--emphasis .free__inner,
.section-free--card .free__inner,
.section-free--outline .free__inner,
.section-free--outline-accent .free__inner,
.section-free--filled .free__inner {
  /* 上下＝面の内側の余白（面があるときだけ要る） */
  padding-block: clamp(1.6rem, 4vw, 2.6rem);
  /* 左右＝面があるぶんページの余白より広く取るが、**下限はガター**。
     `max()` で床を敷いておくと、面の余白を小さくしたい型を足しても文字が端に寄らない
     （実測：どの幅でも面の値のほうが大きいので、現在の見た目は1pxも変わらない）。 */
  padding-inline: max(var(--gutter), clamp(1.6rem, 4vw, 2.6rem));
  border-radius: var(--r-card);
}

/* 白パネル：白地のみ（枠線・影なし）のいちばんシンプルな面。淡色バンド上で軽く抜ける */
.section-free--plain .free__inner {
  background: #fff;
}

/* 白カード：白地＋やわらかい影＋極薄枠で清潔・浮きすぎない */
.section-free--card .free__inner {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--text-main) 8%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,0.07);
}

/* 枠線のみ：地は透過、ブランド色の枠で軽やか（塗りが重い時の対案） */
.section-free--outline .free__inner {
  background: transparent;
  border: 2px solid color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
}

/* 枠線（セカンダリ色）：outline と同型・枠色だけ accent（差し色）に */
.section-free--outline-accent .free__inner {
  background: transparent;
  border: 2px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
}

/* ブランド塗り：枠・影なしの淡色フラット面（にぎやか過ぎない一体感） */
.section-free--filled .free__inner {
  background: color-mix(in srgb, var(--wp--preset--color--primary-light) 55%, #fff);
}

/* 強調パネル：白地＋左 accent バーで「大きく目立つ」告知に（移転案内など） */
.section-free--emphasis .free__inner {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent);
  border-left: 5px solid var(--wp--preset--color--accent);
  box-shadow: var(--sh-card);
}

/* 6. 診療時間・お知らせ */

/* ★★状態の色は「役割トークン」で持つ（2026-08-01）。
   状態色を各コンポーネントへ直書きすると、**記号の色 × 記号の形 × マスの塗り × 面（白カード/フッター）
   × 置き場所（表/凡例）** の掛け算ぶん同じ色を書く羽目になる。
   トークンで持てば、記号の色は1行差し替えるだけで**セルの図形・塗り・凡例のすべてが追従**する。
   ＝お知らせで確立した「色は役割・部品は寸法だけ」と同じ持ち方（2026-07-31）。
   ★★2026-10-20：要確認（★）は**記号と同じ色**（区別は形が担う）。旧「表の形」では標準・シンプルが差し色、
     ミニマルが主色とまちまちだった＝「記号の色」を1つの項目にしたので、★もそれに従う。 */
.hours__table,
.hours__legend {
  --hours-on:   var(--wp--preset--color--primary);
  --hours-off:  var(--wp--preset--color--text-muted);
  --hours-star: var(--hours-on);
}

/* ★★文字の大きさも用途トークンで持つ（2026-08-01）。
   実測で**階層が逆転**していた：補助情報である凡例（14px）のほうが、主情報の
   午前/午後（12.8px）より大きく、来院前に一番読まれる**時間が 10.7px**＝可読の下限（12px）割れ。
   （時間は `small` の**ブラウザ既定**で決まっており、CSSがサイズを一度も指定していなかった。）
   ★「小さい版」はトークンの値を差し替えるだけ＝規則を増やさずフッター／ヒーロー埋め込みは従来寸法を保つ。
     この2ブロックは**必ず隣り合わせに置く**（どちらも (0,1,0) の同着なので、後に書いたほうが勝つ）。 */
.hours__table {
  --hours-fs-day:  0.95rem;  /* 曜日（列見出し） */
  --hours-fs-sess: 0.95rem;  /* 午前・午後（行見出し） */
  --hours-fs-time: 1rem;     /* 時間（9:00〜12:30）＝★行見出しで一番大きい。来院前に一番読まれる数値 */
  --hours-fs-recep: 0.8rem;  /* 受付時間（任意・診療時間の補足） */
}
.hours__table--compact {
  --hours-fs-day:  0.85rem;
  --hours-fs-sess: 0.8rem;
  /* ★★小さい版でも**可読の下限は同じ**（2026-08-02）。0.66rem＝10.6px は、大きい版で
     「来院前に一番読まれる数値が下限割れ」として直したのと同じ状態が、小さい版に残っていたもの。
     しかもフッターでは、下限を理由に 0.78rem へ上げた注記（§凡例）の真上に乗っていた＝
     隣り合う要素で判断が食い違っていた。**小さい版が縮めてよいのは階層であって、可読性ではない。**
     実測（375px）：表の必要幅 288 → 296px（+8px）でフッター列（335px）にも収まり、
     デスクトップのフッターは3列 360px 固定なので変化なし。 */
  /* ★★★小さい版でも**階層は保つ**（2026-08-29 実射FB「時間の字が小さすぎる」）。
     2026-08-02 に 0.66rem → `--fs-min`（12px）へ上げて「下限割れ」は直したが、
     **下限に置いたことで今度は行見出しの中で一番小さくなっていた**（曜日 13.6 > 午前午後 12.8 > 時間 12）。
     大きい版は 時間 1rem > 曜日 0.95 ＝**時間が一番大きい**なので、小さい版だけ順序が逆だった。
     ＝「縮めてよいのは階層であって可読性ではない」と書きながら、**階層のほうを壊していた**。
     → 0.9rem（14.4px）にして大きい版と同じ順序に戻す。
     実測（375px / 871px・本体とフッターの両方）：**はみ出し 0・行見出しの幅も不変**
     （時間の桁数は変わらず、列幅は曜日の列が決めているため）。 */
  --hours-fs-time: 0.9rem;
  /* ★受付は「無駄足を防ぐ」情報なので、小さい版でも時間と同じ大きさにする（沈めるのは opacity の役目）。
     0.6rem（9.6px）では読み飛ばされ、置いた意味が無くなる。
     ★2026-08-29：時間を 0.9rem へ上げたので**受付も一緒に上げる**＝この判断（同じ大きさ・差は opacity）
       を保つ。片方だけ上げると「時間と受付の関係」が変わってしまい、見え方の変更が2つになる。
       実測（375px）：行見出し 131 → 145px、はみ出し 0（本体・フッターとも）。 */
  --hours-fs-recep: 0.9rem;
}

/* ★★文字と線の色（hours_ink・2026-10-20）＝時間の列の文字・帯のないときの曜日の文字・横線の色。
   旧「表の形」のシンプル（メインカラー）とミニマル（黒）の違いはここだけだった＝項目として独立させた。
   ★トークンで持つ＝見出しの形（色の帯/淡い帯/線だけ）・時間の列（淡い色/色なし）のどれと組んでも同じ規則で効く。
   ★フッターは面のスキンが規則ごと上書きする（.site-footer .hours__table … はクラス数で勝つ）。 */
.hours__table--ink-dark {
  --hours-ink:       var(--wp--preset--color--text-main);
  --hours-row-rule:  var(--rule);
  --hours-head-rule: 1px solid var(--rule);
}
.hours__table--ink-color {
  --hours-ink:       var(--wp--preset--color--primary);
  --hours-row-rule:  color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent);
  --hours-head-rule: 2px solid color-mix(in srgb, var(--wp--preset--color--primary) 32%, transparent);
}

.hours__table table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-card);
}
.hours__table thead th {
  background: var(--wp--preset--color--primary);
  color: #fff;
  font-weight: 700;
  font-size: var(--hours-fs-day);
  padding: 0.6em 0.4em;
  text-align: center;
  /* ★曜日は折り返さない（2026-08-02）。日本語は文字単位で折れるので、列が細ると
     「日祝」が縦に2行へ割れて**曜日ではなく記号の並びに見える**（実測：フッターで発生）。
     2文字なので nowrap の代償は小さい（大きい版の必要幅 321→333px＝375px 端末には収まる）。 */
  white-space: nowrap;
}
.hours__table tbody th {
  background: var(--wp--preset--color--primary-light);
  color: var(--hours-ink, var(--wp--preset--color--text-main));
  font-weight: 700;
  font-size: var(--hours-fs-sess);
  padding: 0.7em 0.8em;
  text-align: left;
  white-space: nowrap;
}
/* 行見出しの中身＝ラベル（午前/午後）と時間の2要素。
   ★`<br>` ではなく要素で改行する＝ラベルを隠したときに空の1行目が残らない。
   ★時間は CSSでサイズを持つ（旧実装は small のブラウザ既定任せで 10.7px だった）。 */
.hours__table tbody th .hours__sess { display: block; }
.hours__table tbody th small { display: block; font-size: var(--hours-fs-time); }

/* 行見出し：時間だけ（午前・午後を出さないパターン）。
   ★★**消すのではなく視覚的にだけ隠す**（`display:none` にしない）＝読み上げでは
     「午前 9:00〜12:30」のまま残る。時間だけの表は見た目には十分でも、
     音声では2つの行を区別する手がかりが時間しか無くなるため。 */
.hours__table--rowhead-time tbody th .hours__sess {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* 受付時間の行（データがあるときだけ出る＝表示軸は増やしていない）。
   ★**色を宣言しない**：面（白カード／暗いフッター）が決めた色を継承し、`opacity` で沈める。
     色で沈めると明るい面と暗い面のどちらかで必ず間違う（--compact の教訓）。opacity はどちらでも正しい。
   ★行見出しが「時間だけ」でも太字化の対象にしない（`small` ではなく `span` にしてある）。 */
.hours__table tbody th .hours__reception {
  display: block;
  font-size: var(--hours-fs-recep);
  font-weight: 400;
  opacity: 0.78;
  margin-top: 0.15em;
  /* ★★受付の行だけ折り返しを許す（行見出しの `white-space: nowrap` を打ち消す）。
     nowrap のままだと**長い文字列が列幅をそのまま押し広げる**：実測「受付 8:45〜12:00（初診は11:30まで）」で
     行見出し 158→251px・曜日の列 56→30px に潰れ・表がコンテナを 10px はみ出した。
     折り返せば伸びるのは**高さだけ**＝崩れずに済む（フッター列の `min-width: min-content` と同じ
     「入らないときは重なるのではなく折り返す」＝安全側に倒す考え方）。
     時間（9:00〜12:30）は途中で折り返すと読めなくなるので nowrap のまま。 */
  white-space: normal;
}
/* ★★受付の**時刻そのもの**は割らない（2026-08-17 実射FB）。折り返してよいのは「受付」との間だけ。
   `〜` と全角コロンは既定で改行機会になるので `word-break: keep-all` では防げない
   （実測・幅320px：keep-all を足しても「受付 14：45〜 ／ 18：00」のまま割れた）。
   → 時刻を1つの塊（.hours__reception-time）にして nowrap にするのが唯一効く。
   列幅を押し広げる量も「受付 」を含まないぶん小さい（文字列全体を nowrap にする案は
   上のコメントのとおり 158→251px で表が崩れる）。 */
.hours__table tbody th .hours__reception-time { white-space: nowrap; }
/* ★★小さい版（フッター／ヒーロー埋め込み）でも**表の中に出す**（2026-08-01・実射FBで方針転換）。
   当初は「背が高くなるうえ受付は補足情報」として隠し、表の下に1行で出していた。しかし
   **受付時間の価値は診療時間の真横にあること自体**にある——「12:30まで診療」だけを見て 12:10 に来た人が
   受付終了で帰される、という実害を防ぐ情報なので、休診日の行を挟んだ下に置くと役目を果たさない。
   ＝「抜粋で落としてよいのは詳しさであって意味ではない」の**隣接も意味のうち**という続き。
   幅の増加は実測でわずか（下の §フッター 参照）で、入りきらないときは列ごと折り返す（安全側）。 */

/* ★時間が**行見出しそのもの**になるので、補助扱い（薄い・細い）をやめて見出しの強さに戻す。
   薄い・細いのは「午前/午後より下位だから」であって、下位でなくなれば理由も消える。
   構えごとの上書き（`--simple` / `--grid` の small）はこの後に書かれているので、
   **クラス数で確実に勝たせる**（(0,2,3) ＞ (0,1,3)＝宣言順に依存しない）。 */
.hours__table--rowhead-time.hours__table tbody th small {
  color: inherit;
  font-weight: 700;
}
.hours__table tbody td {
  text-align: center;
  padding: 0.7em 0.4em;
  font-weight: 700;
  border-bottom: 1px solid var(--hours-row-rule, var(--rule));
  font-size: 1.05rem;
}
.hours__table tbody tr:last-child td,
.hours__table tbody tr:last-child th {
  border-bottom: none;
}
/* 本日ハイライト（JSで付与） */
.hours__table td.is-today,
.hours__table th.is-today {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent) !important;
  font-weight: 700;
  position: relative;
}
/* thead の本日列ヘッダー */
.hours__table thead th.is-today {
  background: var(--wp--preset--color--accent) !important;
  color: #fff;
}

/* 診療状態の色分け（data-status は PHP がサーバー側で出す＝JS非依存） */
.hours__table td[data-status="on"]   { color: var(--hours-on); }
.hours__table td[data-status="off"]  { color: var(--hours-off); }
.hours__table td[data-status="star"] { color: var(--hours-star); }

/* ── 記号の部品（●／―／★）＝表のセルと凡例で共用 ─────────────────────
   ★**部品は寸法だけを持ち、色は currentColor**（セル・凡例が決めた色）から取る。
     「コンパクト」に色を入れて2つの面のどちらでも間違っていた 2026-07-30 の再発防止。
     currentColor にしておくと、構えの上書き（シンプルの金）も面の上書き（フッター）も自動で効く。 */
/* ★2026-10-20：記号はいつも図形（下の §記号の形）。寸法は旧「文字（●）」の見た目に合わせた
   （1.05rem の ● は字面がおよそ 15px。図形は少し締める）。小さい版・凡例は1段小さく。 */
.hours__mark { --mark-size: 14px; --mark-stroke: 2px; }
.hours__table--compact .hours__mark { --mark-size: 12px; }
.hours__legend .hours__mark { --mark-size: 11px; --mark-stroke: 1.5px; }
/* 項目の区切りは PHP 側の全角スペース。ここは「記号と語が離れて折り返さない」ためだけ */
.hours__legend-item { white-space: nowrap; }

/* 小さい面（フッター）の注記＝受付時間・★の説明だけを畳んだ版。
   ★★**インラインの色を持たない**（通常版の凡例は `style="color:text-muted"` を持つが、
     それだと暗いフッターで 1.8:1 になり読めない＝2026-07-30 に踏んだのと同じ罠）。
     ここはクラスで色を宣言し、**面が上書きできる**状態にしておく。 */
.hours__legend--compact {
  margin-top: 0.5em;
  /* ★隣の「休診：…」（.site-footer__closed = 0.78rem）と**同じ役割・同じ大きさ**に揃える。
     0.72rem は 11.5px で可読の下限を割る（表の文字を大きくしたときと同じ判断）。 */
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--wp--preset--color--text-muted);
}
.site-footer .hours__legend--compact { color: var(--footer-ink-sub); }
/* ★臨時のお知らせカードも面のスキンに含める＝見出しをフッターの本文色にする。
   他のフッター見出し（メニュー・診療時間）と同じインクになるので、面の中で浮かない。
   3トーン（暗/淡/白）すべてに追従する（`--footer-ink-body` がトーンごとに定義済み）。 */
.site-footer .hours__temp-notice { --tn-ink: var(--footer-ink-body); }
.hours__temp-notice--compact {
  margin-top: 0.6em;
  padding: 0.5em 0.7em;
  /* ★真上の注記（0.78rem）と同じ理由で下限に揃える＝臨時休診は「知らないと来てしまう」情報。 */
  font-size: var(--fs-min);
}
.hours__temp-notice--compact ul { margin: 0.2em 0 0; }

/* ── 記号の形（hours_shape・2026-10-20）＝**いつも図形で描く** ─────────────────────
   ★旧「記号の見せ方」の文字（●）とドット（図形）は、どちらも ● で、違いは描き方だけだった。
     文字の ● は書体と OS で大きさが変わる（Windows の既定書体では字面がほぼ全角）ので、図形に一本化した。
   ★グリフは HTML に残す（font-size:0 で隠す）＝CSS が無いとき・コピーしたときは ● ― ★ のまま読める。
     行ボックスの支柱は td の文字サイズで残るので、記号を変えても行の高さは動かない。
   ★色は currentColor＝セル・凡例が決めた状態色（--hours-on 等）から取る。 */
.hours__mark {
  display: inline-block;
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
}
.hours__mark::before {
  content: '';
  display: block;
  box-sizing: border-box;
  width: var(--mark-size);
  height: var(--mark-size);
  border-radius: 50%;
  background: currentColor;
}
/* ○（白抜きの丸） */
.hours__table--shape-ring .hours__mark[data-status="on"]::before,
.hours__legend--shape-ring .hours__mark[data-status="on"]::before {
  background: transparent;
  border: var(--mark-stroke) solid currentColor;
}
/* 休診＝短い横棒 */
.hours__mark[data-status="off"]::before {
  height: 2px;
  border-radius: 1px;
}
/* ★要確認は**いつも★の文字**＝表の下の「★ 説明」と同じ記号（どのセルの話かを指す相互参照）。
   旧ドット表示は中抜きの丸にしており、表は○・説明は★と食い違っていた。○を診療に使えるようにしたので★に固定する。 */
.hours__mark[data-status="star"] {
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
}
.hours__mark[data-status="star"]::before { content: none; }

/* 記号の色（hours_mcolor）：アクセントカラー＝トークン1行の差し替え（★・セル塗り・凡例の見本も同時に追従）。
   ★★暖色のメインカラーのパレットでは差し色も暖色なので、丸が控えめになる＝意図して受け入れたトレードオフ
     （差し色は WEB予約ボタンの地など**面**にも使うため、なじむほうを優先した。docs §差し色は「面」か「記号」か）。
   ★丸が主色に近くても、休診の横棒（--hours-off ＝薄い文字色）とは形で見分けられる。 */
.hours__table--mcolor-accent,
.hours__legend--mcolor-accent { --hours-on: var(--wp--preset--color--accent); }

/* マスを塗る（hours_mark:fill）＝**記号はそのまま残し、診療のセルに淡い色面を敷く**。
   ★★記号を消す案（塗りだけ）は実射で却下（2026-08-01）。表は border-collapse: collapse ＝
     セルの間に隙間が無いため、**隣り合う塗りセルが繋がって1本の帯になり**、
     「曜日ごとの判定表」ではなく**ガントチャート**に見える（＝日本の診療時間表として見慣れない）。
     記号を残すと「1マス＝1日の判定」という読み方が戻り、色面は**強調**として働く。
   ★塗りは currentColor から作る＝記号の色に自動追従し、色を二重に持たない。
   ★要確認（★）は薄めに塗る＝「条件つきで診療」が濃さで伝わる。 */
.hours__table--mark-fill tbody td[data-status="on"] {
  background: color-mix(in srgb, currentColor 16%, transparent);
}
.hours__table--mark-fill tbody td[data-status="star"] {
  background: color-mix(in srgb, currentColor 12%, transparent);
}
/* 凡例も表と同じ見え方に：記号を淡い色面にのせる（休診は塗らない＝表と同じ）。
   ★記号は font-size:0 の図形なので、余白は em ではなく px で持つ（em だと 0 になる）。 */
.hours__legend--mark-fill .hours__mark[data-status="on"],
.hours__legend--mark-fill .hours__mark[data-status="star"] {
  padding: 3px 6px;
  border-radius: 3px;
  background: color-mix(in srgb, currentColor 16%, transparent);
}
.hours__legend--mark-fill .hours__mark[data-status="star"] {
  background: color-mix(in srgb, currentColor 12%, transparent);
}
/* 凡例の見本も状態色で描く（表と同じトークン＝凡例を見れば表の読み方がそのまま分かる） */
.hours__legend .hours__mark[data-status="on"]   { color: var(--hours-on); }
.hours__legend .hours__mark[data-status="off"]  { color: var(--hours-off); }
.hours__legend .hours__mark[data-status="star"] { color: var(--hours-star); }

/* ── 土日の色分け（土・日祝の列をわずかに沈める） ─────────────────────
   ★中立色（本文色の混色）で沈めるだけ＝カラー軸に依存しない。
     カレンダー的な「土=青・日=赤」は固定色でカラー軸の直交性を壊すため採らない。
   ★詳細度は (0,2,1)＝**面のスキン (0,2,2) に必ず負ける**ので、暗いフッターでは自動的に無効になる。
     thead を対象にしないのは、標準の構えの帯ヘッダー (0,1,2) を上書きして帯を割ってしまうため。 */
.hours__table--weekend-tint td[data-day="sat"],
.hours__table--weekend-tint td[data-day="sun"] {
  background: color-mix(in srgb, var(--wp--preset--color--text-main) 5%, transparent);
}

/* ── 表の枠・曜日の見出し・時間の列（2026-10-20 に旧「表の形」から分けた） ─────────────
   ★既定（カード・色の帯・時間の列は淡い色）は §6 の基本の規則そのもの。ここは**既定でない値だけ**を書く。
   ★どれも基本の規則と同じ詳細度で、基本の規則より**後に**置く（同着は後勝ち）。
   ★色は「文字と線の色」のトークン（--hours-ink / --hours-row-rule / --hours-head-rule）から引く
     ＝見出しの形ごとに色を書かない（旧「表の形」は形ごとに色を持っていたので、形を足すたびに色も足していた）。
   ★旧グリッド（すべてに罫線）は廃止した（どのテンプレも使っておらず、見た目も弱い）。保存値は淡い帯・フラットへ読み替わる。 */

/* 表の枠：フラット＝カードの角丸と影を外す（旧シンプル・ミニマルの外形） */
.hours__table--frame-flat table {
  box-shadow: none;
  border-radius: 0;
}

/* 曜日の見出し：淡い帯＝メインカラーの淡い地に、文字と線の色の文字（新設） */
.hours__table--head-light thead th {
  background: var(--wp--preset--color--primary-light);
  color: var(--hours-ink);
}
/* 曜日の見出し：線だけ＝地を塗らず、文字と線の色の文字＋下線（旧シンプル・ミニマルの見出し） */
.hours__table--head-line thead th {
  background: transparent;
  color: var(--hours-ink);
  border-bottom: var(--hours-head-rule);
}

/* 時間の列：色なし＝淡い地を外し、行の横線を時間の列まで通す
   （地が無いのに線が曜日の列だけで切れると、時間が表の外に置かれたように見える） */
.hours__table--col-none tbody th {
  background: transparent;
  border-bottom: 1px solid var(--hours-row-rule);
}

/* 文字と線の色がメインカラーで「午前・午後と時間」のとき、時間は控えめに（旧シンプルと同じ）。
   ★「時間だけ」では時間が見出しそのものになるので、§6 の rowhead-time の規則（0,2,3）が強さを戻す。 */
.hours__table--ink-color tbody th small {
  color: var(--wp--preset--color--text-muted);
  font-weight: 400;
}

/* 本日の強調：帯の無い見出しでは見出しのマスも淡く（濃い差し色の帯を1マスだけ立てない）／
   フラットな表ではマスも控えめに（旧シンプルと同じ濃さ） */
.hours__table--head-light thead th.is-today,
.hours__table--head-line thead th.is-today {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent) !important;
  color: var(--hours-ink);
}
.hours__table--frame-flat td.is-today,
.hours__table--frame-flat tbody th.is-today {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent) !important;
}

/* ── 面：暗い地（フッター）の診療時間表 ─────────────────────────────
   ★**色を決めるのは「表の見た目の項目」ではなく「乗っている面」**。表の項目（色の帯・淡い色の列・
     メインカラーの文字・カードの影）は白地を前提にしているので、暗いフッターでは**どれも読めない**。
     ここで面のスキンとして上書きし、**項目の値に関わらずフラットな見え方に正規化**する
     （帯・淡色地・影は「白いカード」の道具なので、平らな暗い面には持ち込まない）。
   ★詳細度：`.site-footer .hours__table thead th`(0,2,1) > `.hours__table--head-line thead th`(0,1,2)
     ＝クラス数で勝つので、項目の宣言順に依存せず必ず面が勝つ。
   ★2026-07-30：面のトークン（--footer-*）から引く＝配色トーン（暗/淡/白）を増やしても表の側は何も足さない。
   ★★2026-08-29〜10-20：この骨格は旧「ミニマル」構えと規則を共有していたが、ミニマルは
     「フラット・線だけ・色なし・黒」の組合せに分かれた（上の §表の枠…）。フッターの規則はフッターだけに戻した。
   ★記号の**形**（●／○）は本体にそろう（形はどの面でも成り立つ）。色と塗りは面が決める。 */
.site-footer .hours__table {
  --hours-ink:  var(--footer-ink-body);  /* 曜日・午前/午後などの本文 */
  --hours-sub:  var(--footer-ink-sub);   /* 時間（small）・休みの「―」 */
  --hours-rule: var(--footer-rule);      /* 横罫 */
  --hours-on:   var(--footer-mark);      /* ● */
  --hours-star: var(--footer-mark);      /* ★ */
}
.site-footer .hours__table table { box-shadow: none; border-radius: 0; }
/* 文字色と罫の解除は3種すべてに当てる */
.site-footer .hours__table thead th,
.site-footer .hours__table tbody th,
.site-footer .hours__table tbody td {
  color: var(--hours-ink);
  border: none;
}
/* ★★地を消すのは**帯（thead th）と行ラベル（tbody th）だけ**。`tbody td` の地はセル塗り専用で、
   フッターではそれを下の**別の明示規則**で消す（「セル塗りは白いカードの道具」という宣言された判断）。 */
.site-footer .hours__table thead th,
.site-footer .hours__table tbody th {
  background: transparent;
}
/* 罫線は横だけ */
.site-footer .hours__table thead th { border-bottom: 1px solid var(--hours-rule); }
.site-footer .hours__table tbody td,
.site-footer .hours__table tbody th { border-bottom: 1px solid var(--hours-rule); }
.site-footer .hours__table tbody tr:last-child :is(td, th) { border-bottom: none; }
/* ★★★`tbody th small` ＝ `.hours__time`（**9:00〜12:30 そのもの**）。**フッターだけ**沈める。
   明るい面でこれをやると主情報（時間）が補足（受付）より薄くなる（2026-08-29 実射FB）。
   暗く密なフッターでは主/補を色で分けるのが正しい＝**同じ宣言でも、面が変われば正しさが変わる**例。 */
.site-footer .hours__table tbody th small { color: var(--hours-sub); }
/* 記号：●と★は面の差し色（暗地=accent で 6.1:1／明地=primary）／休みの「―」は沈める。
   ★上の規則が `tbody td` に `--hours-ink` を当てている（0,2,2）ので、記号の色は詳細度で言い直す（0,3,1）。 */
.site-footer .hours__table td[data-status="on"]   { color: var(--hours-on); }
.site-footer .hours__table td[data-status="star"] { color: var(--hours-star); }
.site-footer .hours__table td[data-status="off"]  { color: var(--hours-sub); }
/* 本日：accent の混色は暗地でくすんだ塊になるので、墨の淡いティントにする。
   ★`--footer-ink` の混色にすることでトーンに追従する（暗地＝白7%＝従来と同値／明地＝墨7%）。 */
.site-footer .hours__table :is(td, th).is-today {
  background: color-mix(in srgb, var(--footer-ink) 7%, transparent) !important;
}
.site-footer .hours__table thead th.is-today {
  background: color-mix(in srgb, var(--footer-ink) 7%, transparent) !important;
  color: var(--footer-mark);
}
/* ★セル塗りは面が打ち消す（詳細度 (0,3,2) > (0,2,2) ＝宣言順に依存しない）。
   ★★2026-10-20：記号を「文字（● ― ★）」に戻す正規化はやめた。記号はいつも図形になり、
     ●／○ の形は暗い面でも成り立つ（色は currentColor＝面の差し色）。本体が○ならフッターも○。 */
.site-footer .hours__table--mark-fill tbody td[data-status] { background: transparent; }

/* 臨時休診のお知らせ */
.hours__temp-notice {
  margin-top: 0.8rem;
  background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
  border-left: 4px solid var(--wp--preset--color--accent);
  border-radius: var(--r-field);
  padding: 0.7em 1em;
  font-size: 0.82rem;
}
/* ★★見出しの色は**用途トークン**で持つ（2026-08-29 実射FB）。
   旧実装は `color: var(--wp--preset--color--primary-dark)` の直書きで、**面に関わらず濃い墨**だった。
   暗いフッターでは地 `#33403a` に対して**コントラスト 1.38＝ほぼ見えない**（実測）。
   ★診療時間表は 2026-07-30 に「色を決めるのは表示スタイルではなく**乗っている面**」として
     面のスキンを入れたが、**その下に置かれるこのカードは対象から漏れていた**。
   ★★教訓：面のスキンを作ったら、**その面に置かれるものを数え上げる**。
     「表」だけを見ていると、表と一緒に出る注記・カードが取り残される。
   ※ 地（accent 12%）と左の帯（accent）は明地・暗地のどちらでも見えているので触らない
     ——差し替えが要るのは**文字色だけ**。使わないトークンを宣言しない。 */
.hours__temp-notice strong {
  color: var(--tn-ink, var(--wp--preset--color--primary-dark));
  display: block;
  margin-bottom: 0.3em;
}
.hours__temp-notice ul { margin: 0; padding-left: 1.1em; }
.hours__temp-notice li { margin-bottom: 0.2em; }

/* ━━ お知らせ一覧（基底）━━
   ★この1組がトップのセクション／ヒーロー埋め込み／一覧ページの**すべて**を担う。
   `--compact`（埋め込み）と `--archive`（一覧ページ）は**寸法だけ**の版で、
   色・面・レイアウトは持たない（2026-07-30 の教訓＝寸法の名前を持つクラスに色を入れない。
   兼ねさせた瞬間に「片方の面では必ず間違っている」状態になる）。
   見せ方の切替は軸 `news_layout`（body.newslay-*）が担当する。 */
.news__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
.news__list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  /* ★折り返しの逃げ道を基底に持たせる。日付＋バッジ＋タイトルは幅を要求するので、
     狭い面（埋め込みカード・モバイル・2カラムの片側）では溢れる。下の
     `.news__link` の基底幅（em）を下回った時点でタイトルが次行へ落ちる＝
     ブレークポイントも px の下限も書かない（必要幅は書体・日付表記で変わるため）。 */
  flex-wrap: wrap;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
  line-height: 1.6;
}
.news__list li:last-child { border-bottom: none; }
.news__date {
  color: var(--wp--preset--color--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.8rem;
  padding-top: 0.1em;
}
/* カテゴリのバッジ＝色は「役割」で持つ（パレット追従）。
   ★2026-07-31：以前は clinic_news_categories() の hex を style="" で直に出していたため、
   詳細度の外側＝カラー軸を切り替えても永久に追従しなかった（フッターのインライン色と同型）。
   地＝役割色を白で薄めたティント／文字＝text-main 寄りの濃色ミックスで、色相だけをカテゴリが持つ。
   既定は中立＝未知のカテゴリ（顧客が足した term）もここに落ちて必ず読める。 */
.news__cat {
  --news-cat-role: var(--wp--preset--color--text-main);
  --news-cat-tint: 10%;
  flex-shrink: 0;
  font-size: var(--fs-min);
  font-weight: var(--w-ui, 700);
  padding: 0.15em 0.7em;
  border-radius: var(--r-chip);
  white-space: nowrap;
  background: color-mix(in srgb, var(--news-cat-role) var(--news-cat-tint), var(--wp--preset--color--white));
  color: color-mix(in srgb, var(--news-cat-role) 35%, var(--wp--preset--color--text-main));
}
.news__cat--kyushin  { --news-cat-role: var(--wp--preset--color--accent); --news-cat-tint: 26%; } /* 休診＝注意。accent は全パレットで金茶系 */
.news__cat--annai    { --news-cat-role: var(--wp--preset--color--primary); --news-cat-tint: 14%; }
/* .news__cat--oshirase は既定（中立）のまま＝最頻カテゴリを静かに見せる */
.news__list a,
.news__link {
  color: var(--wp--preset--color--text-main);
  text-decoration: none;
  transition: color 0.2s;
  /* 基底幅を font 相対で持たせる＝残り幅がこれを下回ると li の flex-wrap で次行へ落ちる */
  flex: 1 1 12em;
  min-width: 0;
}
.news__list a:hover { color: var(--wp--preset--color--primary); }
/* ★★行ぜんぶを当たりにする（2026-08-02・手②）。実測でリンクの当たりは **375×22px**＝
   行の高さ 75px のうち **53px が押しても反応しない帯**だった（日付とカテゴリはリンクではないため、
   「行を押したのに開かない」が起きる。指はテキストの帯を正確には狙えない）。
   ★padding で実寸を足す手①は取らない：一覧の高さが 299→368px と伸び、**お知らせの見せ方3種
     （list / stack / card）すべての寸法が動く**。行は元から「1件＝1行」の単位なので、
     当たりを行に合わせるほうが構造にも合う（カード表示では自然に「カード全体が押せる」になる）。
   ★li にリンクは1つだけ（日付・分類は span）＝当たりが重なる相手が居ないので敷ける。 */
.news__list li { position: relative; }
.news__list .news__link::after { content: ""; position: absolute; inset: 0; }
.news__more { font-size: var(--wp--preset--font-size--sm); }
/* ★「一覧を見る」は行の中で1つだけのリンク＝実寸を足しても隣と競合しない（手①）。
   実測 20px 高＝指で押すには薄すぎたので、上下の padding で当たりを稼ぐ（下限 --tap-min）。 */
.news__more a { color: var(--wp--preset--color--primary); font-weight: var(--w-ui, 700); display: inline-block; padding-block: 0.62em; }

/* ★2カラム（診療時間 & お知らせ）で下端をそろえる＝**余りを吸収する側**で扱う。
   お知らせのほうが短いとき（既定の行リストでは常にそう）「一覧を見る」が列の下端へ寄り、
   両列の下端がそろう。長いときは余りが無いので何も起きない＝副作用なし。
   ★件数で高さを合わせにいかない理由：揃う件数がレイアウトごとに違い（実測＝行リストと
   カードには存在しない）、記事の増減・診療時間側の行数・余白軸でも動くため、
   固定値で合わせると**記事を1本足した日に崩れる**（front-sections.php の clinic_news_count 参照）。
   ※見出しは各列の内側にあるので「中身を上下中央」は採らない（表とリストの開始位置がずれる）。 */
.news__col { display: flex; flex-direction: column; }
.news__col .news__more { margin-top: auto; margin-bottom: 0; }

/* ━━ 軸：お知らせの見せ方 `news_layout`（body.newslay-*・2026-07-31）━━━━━━━━
   list（既定）＝上の基底そのまま＝追加CSSなし。
   stack / card は**基底の上の差分だけ**を持つ（面の色・影・角丸は形の軸のトークン追従）。
   3つの面（トップのセクション／ヒーロー埋め込み／一覧ページ）すべてに同じ規則が効く。 */
body.newslay-stack .news__list li { gap: 0.3rem 0.75rem; }
body.newslay-stack .news__list .news__link { flex: 1 1 100%; font-weight: var(--w-head, 700); }
/* ★★タイトルが1行を占める2段・カードでは、タイトルを本文の大きさに（2026-10-20・t08 の実画面の指摘）。
   基底のままだと **タイトル 14px／日付 12.8px＝差が 1.1 倍**しかなく、先に読まれる日付と分類の行に埋もれていた。
   隣の列の診療時間（時間帯 15.2px 太字）にも、お知らせ一覧ページ（`--archive` の 15.2px）にも負けていた。
   ★太さでは差をつけない：太さは「強調の強さ」軸（--w-head）が決める＝すっきりの院だけ太字にすると軸とぶつかる。
   ★1行表示（list）は日付と同じ行に並ぶので据え置き。ヒーロー埋め込み（`--compact`）は狭い面なので外す。
   一覧ページは同じ規則で 16px＝トップより小さくならない。 */
body:is(.newslay-stack, .newslay-card) .news__list:not(.news__list--compact) .news__link { font-size: 1rem; }

/* ★★カードの「面の色」は乗っている帯が決める＝トーン反転（2026-07-31）。
   白い帯の上では淡色／淡色帯の上では白。既存の `bg_deco_color: auto`（背景色あり:白／
   白背景:淡色）と同じ考え方で、**面を持つ側（帯）がトークンを宣言する**。
   ★これは「浮かせるため」ではなく「同色で消えないため」の措置：全パレットが bg-soft を
   白に近い淡さで定義しているので、どちらに倒しても差は 1.07〜1.13:1 にしかならない。
   カードを1枚として読ませているのは面の色ではなく**輪郭（--rule-strong）と影（--sh-card）**で、
   どちらも形の軸が決める。 */
.front-band--soft { --news-card-face: var(--wp--preset--color--white); }

body.newslay-card .news__list { display: grid; gap: 0.6rem; }
body.newslay-card .news__list li {
  gap: 0.3rem 0.75rem;
  padding: 0.85rem 1.05rem;
  background: var(--news-card-face, var(--wp--preset--color--bg-soft));
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}
body.newslay-card .news__list .news__link { flex: 1 1 100%; font-weight: var(--w-head, 700); }
/* ★★ヒーロー埋め込みでは card の「面」を外す＝カードの中にカードを作らない
   （.hero__embed-card が既に白地・影・角丸を持っている）。面を持つ側が、中の部品に
   面を持たせないことを宣言する形。詳細度は (0,3,1) で `.hero__embed .news__list li`(0,2,1)
   に**確実に勝たせる**——同着にすると宣言順に賭けることになる（2026-07-30 の教訓）。
   ※ 行の積み方（stack と同じ2段）はそのまま活かす＝狭い面では読みやすい側に倒れる。 */
body.newslay-card .hero__embed .news__list { display: block; }
body.newslay-card .hero__embed .news__list li {
  padding: 0.75rem 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
}
body.newslay-card .hero__embed .news__list li:last-child { border-bottom: none; }

/* ━━ 院長挨拶 / アクセス（骨格・色はトークン追従） ━━ */
/* 7. 院長挨拶 */
.greeting__photo-wrap {
  overflow: hidden;
}
.greeting__photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.greeting__profile {
  gap: 0.75rem;
  align-items: baseline;
  flex-wrap: wrap;
}

/* 本文の測度（読みやすい幅）。横並びでは文章列の幅の上限も兼ねる（下の「中央寄せ」を参照）。
   ★2026-10-17 に 520px → 640px（18px で1行 約29字 → 約35字）。520px のときは写真＋本文の塊が
     器 1080px のうち 824px しか使わず、周りのセクションより一回り細く見えていた（実射FB「幅が狭い」）。
     640px で塊 944px・本文 9行 → 8行＝写真の高さとも釣り合う。中央縦積みの本文（660px）とも近い。 */
.section-greeting { --greet-measure: 640px; }

/* ★詳細リンクは左右中央寄せ＝本文（測度）の中央にボタンを置く（2026-07-23 実射FB）。
   右寄せも試したが「バランスが悪い」との判断。中央にすると挨拶文の塊の真下に
   ボタンが収まり、上下中央揃えのレイアウトと呼応する。
   ※ ボタン箱を測度で頭打ちにしてから中央寄せする＝列いっぱいではなく「本文の幅の中央」。
     これが無いとボタン箱が列全幅に広がり、中央＝列の中央（本文より右）になってズレる。
   ※ 2026-10-17 から横並び（782px〜）は文章列そのものが測度で頭打ち（下の「中央寄せ」）。
     この頭打ちが効くのは1列に積まれる幅（〜781px）で、列が測度より広くなるとき。 */
.section-greeting:is(.greeting--layout-side, .greeting--layout-overlap) .wp-block-buttons {
  justify-content: center;
}
.section-greeting.greeting--layout-side .wp-block-buttons {
  max-width: var(--greet-measure);
}
.greeting__message {
  max-width: var(--greet-measure, 640px);
}
/* 署名は本文と同じ幅に収め、右端を本文に揃える */
.greeting__sign {
  max-width: var(--greet-measure, 640px);
  text-align: right;
}
/* 署名の氏名＝表示文字。太さはインライン（patterns/greeting.php）から移設した（軸が届くように）。
   ★大きさも同じ理由でここに置く（2026-08-28）：インラインの実値だとバリアント側のCSSが必ず負け、
     「写真なしのときだけ署名を主役にする」ができない。既定 lg＝従来の見た目。 */
.greeting__sign-name {
  font-weight: var(--w-head, 700);
  font-size: var(--greet-sign-fs, var(--wp--preset--font-size--lg, 1.25rem));
}

/* ━━ 院長挨拶の写真サブ軸（比率 / 位置 / 大きさ・2026-07-22） ━━
   3つは直交。トップページ設定側（ACF）の値でセクションにクラスが付く。
   取り分はトークン（--greet-media-fr / --greet-text-fr）に集約し、
   列のインライン flex-basis がこれを参照する（patterns/greeting.php）。
   ★ここで列に flex-basis を書いてもコア（0,3,0）に負けるので、値はトークンだけを定義する。
     モバイルの1列化はコアの flex-basis:100% !important（<782px）がインラインにも勝つので無干渉。 */
.section-greeting {
  /* ★写真の比率による大きさの補正係数（2026-08-14 実射FB「縦長のとき写真がワンサイズ大きい」）。
     大きさ軸は**幅の取り分**しか動かさないので、同じ「標準」でも縦長は背が高い分だけ大きく見える
     （実測・ずらし重ね標準＝縦長 351k / 正方形 263k / 横長 210k px²）。
     面積を揃えるには幅を √(縦横比) に比例させる（面積 = 幅² ÷ 縦横比）。基準は 4:3＝係数1。
     ★係数は PHP（clinic_greeting_ratio_scale）がインラインで注入する＝値の持ち場は1か所だけ。
       `free`（元画像のまま）の縦横比はCSSからは知りようがないため、CSSに比率ごとの係数は書かない。
       ここの 1 は**注入が無いときの既定＝従来の見た目**（フォールバック）。 */
  --greet-ratio-k: 1;
  /* 取り分は「基準値 × 係数」で導く。文章側は残りなので合計から引く（合計は型で変わる：
     横並び 100% ／ ずらし重ねは重なり分だけ多い 107%）。★k=1 のとき従来の値と完全に一致する。 */
  --greet-media-base: 35%;   /* 標準＝従来の 35 : 65 */
  --greet-sum: 100%;
  --greet-media-fr: calc(var(--greet-media-base) * var(--greet-ratio-k));
  --greet-text-fr: calc(var(--greet-sum) - var(--greet-media-fr));
  /* ★大きさ軸は「型ごとに別の量」を動かすが、**どの型でも小→大がはっきり分かる幅**を持たせること
     （2026-07-22 実射FB「中央縦積み・ずらし重ねで大中小が効かない」）。原因はレンジが狭く帯域も
     ずれていたこと：中央縦積みは大(340px)が横並びの標準(368px)より小さく、ずらし重ねは小(484px)が
     横並びの大(473px)より大きい＝ラベルと体感が一致しない。→ 中央縦積み 200/300/420px（2.1倍）、
     ずらし重ね 38/52/66%（1.7倍）に広げ、各型の中で三段階が読み取れるようにした。
     **教訓：同じ軸を型ごとに別の量へ写像するときは、写像先でも「三段階が体感できる幅」を確認する。
     技術的に効いていても、レンジが狭ければ利用者には「効いていない」と映る。** */
  /* 中央縦積みの写真幅＝本文より明確に小さい「ポートレート」として扱う。
     本文の測度（660px）に近づけると、①写真が高くなってセクションが更に伸びる
     ②写真と本文の左右端が中途半端にズレて「崩れた1列」に見える、の両方が起きる
     （2026-07-22 実射FB）。はっきり小さくすると「肖像→メッセージ」の意図的な階層に読める。 */
  --greet-center-base: 300px;
  --greet-center-w: calc(var(--greet-center-base) * var(--greet-ratio-k));
  --greet-ovl-base: 52%;   /* ずらし重ねの取り分（媒体 + 文章 − 重なり = 100%） */
  /* ★食い込み量は「写真の幅に対する割合」で持つ（2026-08-14 実射FB「縦のとき写真の幅が狭い」）。
     旧実装は 7%＝**コンテナ基準の固定値**（実測 74px）で、写真の大きさに一切連動していなかった。
     そのため写真が細いほど食われる割合が増える：実測で 11.4%（横長・大）〜26.4%（縦長・小）と2.3倍の開き。
     比率補正（--greet-ratio-k）で縦長の写真が細くなった分、この歪みが表に出た。
     → 写真の幅に比例させれば、どの大きさ・どの比率でも食い込みの見え方が揃う。
     ★係数は**取り分（列の flex-basis）に対する比**なので、写真の実寸に対する比とは少しズレる
       （列と写真で box-sizing の差がある）。0.135 で写真の 14.5%＝「横長×標準」の現状（74px）と一致し、
       基準の組合せの見た目は変わらない。値は実測で合わせること（計算だけで決めない）。 */
  --greet-ovl-lap-k: 0.135;
  --greet-ovl-lap: calc(var(--greet-media-fr) * var(--greet-ovl-lap-k));
}
/* 大きさ軸＝**基準値だけ**を動かす（実効値は上の calc が導く＝補正の掛け忘れが起きない） */
.section-greeting.greeting--size-small {
  --greet-media-base: 27%;
  --greet-center-base: 200px;
  --greet-ovl-base: 38%;
}
.section-greeting.greeting--size-large {
  --greet-media-base: 45%;
  --greet-center-base: 420px;
  --greet-ovl-base: 66%;
}

/* 写真の位置。積み上げが始まる幅より上でだけ左右を入れ替える */
@media (min-width: 782px) {
  .section-greeting.greeting--photo-right .wp-block-columns { flex-direction: row-reverse; }

  /* 縦位置はコアの verticalAlignment:center に任せる（上下中央寄せ・2026-07-23 実射FB）。
     以前は上端揃えにしていたが、ボタンのぶんだけ写真が下がって見える件より、
     中央のほうが自然という判断（写真と挨拶文の塊が上下中央で釣り合う）。 */

  /* ★★横並びは「写真＋本文」の塊を器の中央に置く（2026-10-17 実射FB「セクションの幅が狭い」）。
     本文は測度（--greet-measure）で頭打ちになるので、文章列が測度より広いぶんは「列の余り」になる。
     旧実装はその余りが器の片側に残り、塊が写真の側へ寄っていた。
     実測（器1080px・縦長・標準）＝右に 256px の空き・塊の中心が見出しより 128px 左。
     大きさ・比率・位置の18通りすべてで 29〜159px ずれていた（写真が右なら逆向きに同じ）。
     → 文章列の幅そのものを測度で頭打ちにし（余りを列の中に作らない）、空いた幅は列の並びごと中央へ。
     写真の幅（取り分×比率の係数）は変わらない＝大きさ軸の三段階はそのまま。
     ★幅はインラインの flex-basis が参照するトークンで渡す（コアCSSに負けない・上の §写真サブ軸 参照）。
     ★旧・写真が右のときの右寄せ（本文に margin-inline-start:auto）は撤去した：列に余りが無くなり、
       効く場面が無くなったため（2026-07-22 の「写真を小さくするほど離れる」もこの規則で同時に解消）。 */
  .section-greeting.greeting--layout-side {
    --greet-text-fr: min(calc(var(--greet-sum) - var(--greet-media-fr)), var(--greet-measure));
  }
  .section-greeting.greeting--layout-side .wp-block-columns { justify-content: center; }
}

/* 比率。正方形は clinic-square（1:1クロップ）を要求済みなので object-fit は cover のまま */
.section-greeting.greeting--ratio-square .greeting__photo-wrap { aspect-ratio: 1 / 1; }
/* 元画像のまま＝枠の高さを写真に決めさせる。図を絶対配置から在来フローへ戻す */
.section-greeting.greeting--ratio-free .greeting__photo-wrap {
  aspect-ratio: auto;
}
.section-greeting.greeting--ratio-free .greeting__photo-wrap figure,
.section-greeting.greeting--ratio-free .greeting__photo-wrap .wp-block-image {
  position: static;
}
.section-greeting.greeting--ratio-free .greeting__photo-wrap figure img {
  height: auto;
}

/* ── レイアウトの3大別（横並び side / 中央縦積み center / ずらし重ね overlap・2026-07-22） ──
   side は上の既定そのもの＝差分CSSなし。center / overlap だけが差分を持つ。
   ★列の幅はインラインの flex-basis がトークンを参照している（コアCSS対策・上のコメント参照）ため、
     レイアウトごとの取り分は「トークンを差し替える」ことで表現する。
   ★サイズ軸のトークン定義（.section-greeting.greeting--size-*）と同詳細度(0,2,0)なので、
     このブロックは必ずサイズ軸より後に置くこと（後勝ちで上書きする）。 */

/* 中央縦積み：列を縦に積み、写真は中央で幅を持たせる。左右の概念がないので位置クラスは出力されない */
.section-greeting.greeting--layout-center {
  /* 列は縦積み＝flex-basis は「高さ」になってしまうので auto に戻す */
  --greet-media-fr: auto;
  --greet-text-fr: auto;
  /* 本文の測度。横並びの測度（当時 520px）のままだと1080pxの器の中で細長い1本の列になり、
     行数が増えてセクションが間延びする（2026-07-22 実射FB「縦長で違和感」）。 */
  --greet-center-text: min(660px, 100%);
}
.section-greeting.greeting--layout-center .wp-block-columns {
  flex-direction: column;
  align-items: center;
  /* 縦積みでは blockGap（3rem）が写真と本文の縦の間隔になる。横方向の間隔ほどは要らない */
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.section-greeting.greeting--layout-center .greeting__photo-col { width: 100%; }
.section-greeting.greeting--layout-center .greeting__photo-wrap {
  max-width: var(--greet-center-w);
  margin-inline: auto;
}
.section-greeting.greeting--layout-center .greeting__text-col { width: 100%; }
.section-greeting.greeting--layout-center :is(.greeting__message, .greeting__sign) {
  max-width: var(--greet-center-text);
  margin-inline: auto;
}
/* ★本文は「ブロックを中央に、文字は左揃え」。長い日本語の段落を中央揃えにすると
   行末が毎行ばらついて落ち着かず、読みづらい（同FB）。中央に置くのは署名とボタンだけ。 */
.section-greeting.greeting--layout-center .greeting__message { text-align: left; }
.section-greeting.greeting--layout-center .greeting__sign { text-align: center; }
.section-greeting.greeting--layout-center .wp-block-buttons { justify-content: center; }

/* ずらし重ね：文章を白カード化して写真に食い込ませる。PC幅のみ（モバイルは1列に積まれる） */
/* ★取り分の基準と合計だけを差し替える（実効値は .section-greeting の calc が導く）。
   ★大きさ軸の宣言（.section-greeting.greeting--size-*）と同詳細度(0,2,0)なので、
     この宣言は**必ずそれより後**に置くこと（後勝ちで基準を上書きする）。 */
.section-greeting.greeting--layout-overlap {
  --greet-media-base: var(--greet-ovl-base);
  --greet-sum: calc(100% + var(--greet-ovl-lap));   /* 媒体 + 文章 − 重なり = 100% */
}
@media (min-width: 782px) {
  /* 重なりは負マージンで作るので、ブロック間のギャップは消す（gap は .wp-container-* の 0,1,0） */
  .section-greeting.greeting--layout-overlap .wp-block-columns { gap: 0; }
  .section-greeting.greeting--layout-overlap .greeting__text-col {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: var(--r-card);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: var(--sh-card);
    /* 縦のずらし。★特徴の「ずらし重ね」では行間 gap に加算される罠があったが、
       院長挨拶は1行だけなので行間の二重計上は起きない。それでも控えめに保つ。 */
    margin-block-start: clamp(1rem, 2.5vw, 2rem);
  }
  /* 重なる向き＝写真の反対側。row-reverse では論理 start が視覚的に逆になるため end 側に寄せる */
  .section-greeting.greeting--layout-overlap.greeting--photo-left .greeting__text-col {
    margin-inline-start: calc(var(--greet-ovl-lap) * -1);
  }
  .section-greeting.greeting--layout-overlap.greeting--photo-right .greeting__text-col {
    margin-inline-end: calc(var(--greet-ovl-lap) * -1);
  }
  /* カード内では本文の幅制限を解く（カード自身が幅を決める） */
  .section-greeting.greeting--layout-overlap :is(.greeting__message, .greeting__sign) { max-width: none; }
}

/* ── 写真なし＝署名を主役にした「文字だけの構え」（2026-08-28） ──────────────
   ★写真の器は**出さない**（patterns/greeting.php）。以前は空の器（淡色・3:4）が残り、
     標準・器1080pxで約284×379pxの色の付いた空箱が出ていた。空箱は「まだ入れていない」への
     催促としては正しいが、**写真を出さないと決めた院には永久に直らない穴**になる。
     催促は管理画面（写真ピッカーの「写真未設定」）が担当する＝フロントは畳んでよい。
   ★骨格は中央縦積み（`greeting--layout-center`）に合流させる＝写真なし専用の骨格を作らない。
     1列・測度で中央・署名とボタンだけ中央、という必要な性質をそのまま満たしている。
     クラスも `greeting--nophoto` の1つだけ（比率・位置・大きさは指す対象が無いので出力されない）。
   ★寂しさは「写真の代わりを置く」のではなく**残った要素の階層を組み直して**埋める。
     写真が視覚の錨だった位置に**署名**を置く＝手紙の構え（見出し → 本文 → 署名 → 詳細リンク）。
     新しい飾りは足さない（`heading_deco` / `illust` と喧嘩するため。飾りは既存の軸の担当）。
   ★詳細度は `.section-greeting.greeting--layout-center`（0,2,0）と同じなので**この後**に置くこと。 */
.section-greeting.greeting--nophoto .greeting__sign {
  /* 署名を主役に：氏名を1段大きく（既定 lg → xl）。値は .greeting__sign-name が読む */
  --greet-sign-fs: var(--wp--preset--font-size--xl, 1.5rem);
  /* 本文と署名の間を開ける。実値ではなくトークン＝インラインの margin-top が参照している */
  --greet-sign-mt: var(--wp--preset--spacing--70, 2.25rem);
}

/* 8. アクセス */
.access__map-wrap {
  border-radius: var(--r-media);
  background: var(--wp--preset--color--primary-light);
  min-height: 380px;
  overflow: hidden;
}
.access__map-wrap iframe {
  width: 100%;
  height: 100%;
  min-height: inherit; /* 枠（レイアウト別）の min-height を継承＝高さは1箇所で管理 */
  border: none;
  display: block;
}
.access__map-empty {
  display: block;
  text-align: center;
  color: var(--wp--preset--color--text-muted);
  padding: 2rem;
}

/* 情報ブロックのタイポ（旧インラインstyleから移設＝レイアウト別に上書き可能に） */
.access__block-title {
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
  padding-left: 0.6em;
  border-left: 3px solid var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
}
.access__address { font-size: var(--wp--preset--font-size--md); }
/* ★★住所の「割ってはいけない塊」＝数字の連なり（2026-08-19 実射FB）。
   日本語はどの文字間でも折り返せるので、狭い列では番地が「…細江６５」「０−１」と割れ、
   **番地が2つの数字に見える**（体裁ではなく読み違いの問題）。
   ★禁止するのは数字の中だけ——市区町村のあいだは折り返してよい（そこも禁止すると狭い列で溢れる）。
   組み立ては `clinic_address_html()` の1か所（ヘッダー／アクセス／LP／固定ページが共通で通る）。 */
.addr__num, .addr__zip { white-space: nowrap; }
/* ★★郵便番号は**自分の行を持つ**（2026-08-19 実射FB「〒で改行したほうが見栄えが良い」）。
   数字の塊を守っても、折り返しは残りの文章の途中（「兵庫県姫路市飾磨」／「区細江…」）で起きる。
   ★**〒の後ろは意味のある区切り**なので、そこへ移せば「郵便番号／住所」の2行になる。
     日本語の住所表記の慣習とも一致する。
   ※ CSS の自動折り返しでは改善できなかった（実測）：`text-wrap: balance` は姫路市を割って悪化、
     `pretty` は変化なし、`word-break: auto-phrase` は行数が増える。**意味の区切りは人が指定するしかない**。 */
.addr__zip { display: block; }
/* ★例外＝横型ヘッダーの1行。ここは高さが最優先なので、1行に収まる限り分けない
   （収まらないときは退避の①`hdr-addr-short` が〒ごと伏せるので、そもそも出ない）。 */
.site-topbar__address .addr__zip { display: inline; }
/* サイドバーは縦に積める＝慣習どおり分ける */
.header-sidebar .site-topbar__address .addr__zip { display: block; }
.access__meta { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--text-muted); }
.access__tel { font-size: var(--wp--preset--font-size--xl); font-weight: var(--w-ui, 700); }
.access__tel a { color: var(--wp--preset--color--text-main); text-decoration: none; }

.access__list {
  list-style: none !important;
  padding: 0 !important;
  font-size: var(--wp--preset--font-size--sm);
}
.access__list li {
  padding: 0.4em 0;
  border-bottom: 1px dashed var(--rule);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.access__list li:last-child { border-bottom: none; }
.access__route-icon {
  color: var(--wp--preset--color--primary);
  flex-shrink: 0;
}

/* ━━ ★★左右の余白＝「余白が要る器」と「端まで出す絵」を型で分けて掛ける（2026-08-22 実射FB）━━━━
   実射FB「スマホ表示で文字の左に全くスペースがない」。実測（375px）：
   住所の左端 **0px**／アクセス方法のリストの右端 **375px** ＝ **文字が両端に接触**。
   ★2026-08-02 のガター工事でアクセスを一括対象から外したのは **地図を端まで届かせるため**だった
     （当時の実測「地図が 0/375 → 16/343 になってしまう」）。しかしそれは
     **overlay（`alignfull` の没入型）の事情**であって、「文字も端に着けてよい」という判断ではなかった。
     ＝**除外の理由が、除外した範囲より狭かった。**
   ★★`alignfull` は**セクション自身の padding までは越えない**（実測：セクションに掛けると
     overlay の地図も 0..375 → 16..359 に入る）。だから「セクションに掛けると地図が入る」のは正しい。
     → 掛ける対象を**型で分ける**：
       ・`overlay` … 地図が主役の没入型＝**掛けない**（情報カードは自前の margin を持つ＝文字左 35px で接触なし）
       ・`full` … 地図を端まで出す帯＝**掛けない**。そのぶん**下の情報行に同じガターを掛ける**
         （＝地図だけが端まで出て、読む部分は内側に入る。2026-09-09 追加）
       ・`stack` / `split` … 地図は在来フローの**角丸メディア**（`--r-media`）＝**掛ける**
         （角丸の器が画面の端に密着していること自体がそもそも不自然だった）
   ★デスクトップは1pxも動かない：内側は constrained レイアウトで contentSize(1080px) が先に効くため、
     セクションの padding が噛むのは**中身が画面幅になる狭い幅だけ**（2026-08-02 と同じ理屈）。
   実測（375px）：stack の地図 0..375 → **16..359**・文字左 0 → **16**／split も同様／overlay は不変。 */
.acc-layout-stack,
.acc-layout-split { padding-inline: var(--gutter); }

/* ━━ ★★上下＝宣言した間隔がそのまま出るようにする（2026-08-22 実射FB）━━━━━━━━━━━━
   実射FB「上下のスペースが少し大きすぎる」。**値が大きかったのではなく、上乗せされていた。**
   ブロックの**先頭・末尾の子が自前の margin を持つ**ので、器が宣言した間隔に
   「要素の種類ごとに違う量」が足される（実測：先頭 h3 が 12.8px／末尾は p 14.24px・ul 14px）。
   実測（375px・stack）：地図→見出しは `margin-top: 36px` の宣言に対し **49px**、
   ブロック間は `row-gap: 28px` の宣言に対し **55px** 出ていた。
   ★★しかも**型によって出方が違った**：`stack` はブロックが**フレックス項目＝BFCを作る**ので
     子の margin が外へ出られず**加算**され 55px、`split` は在来フローなので**相殺**されて 28px。
     ＝同じ見た目のつもりの2つの型で、間隔がほぼ倍違っていた。値をいくら調整しても揃わない類のズレ。
   ★**間隔は器（`gap` / `margin-top`）だけが決める。中身は自分の外側に余白を持たない。**
   実測（修正後）：地図→見出し **36px**（宣言どおり）／ブロック間 **28px**（宣言どおり）。3型とも一致。 */
.access__block > :first-child { margin-top: 0; }
.access__block > :last-child { margin-bottom: 0; }

/* ── アクセスの見せ方3大別（split / overlay / stack）×配置サブ軸 ────────── */
/* 情報ブロックの縦間隔（split / overlay は縦積み。stack は行なので付けない） */
.access__info-col .access__block + .access__block {
  margin-top: var(--wp--preset--spacing--60);
}

/* split（既定）：地図と情報を左右に。地図の位置サブ軸で左右入替 */
.access__split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--70);
  align-items: flex-start;
  margin-top: var(--wp--preset--spacing--70);
}
.access__split .access__map-col  { flex: 1 1 54%; min-width: min(320px, 100%); }
.access__split .access__info-col { flex: 1 1 40%; min-width: min(260px, 100%); }
.acc-layout-split.acc-map-right .access__split { flex-direction: row-reverse; }
@media (max-width: 781px) {
  /* ★★★主軸を倒すと `align-items` の意味も変わる（2026-08-22）。
     横並びのときの `align-items: flex-start` は「地図と情報の**上端**を揃える」指定（交差軸＝縦）。
     ところが縦に倒すと交差軸が**横**になり、「左に寄せて**中身なりの幅**にする」に化ける。
     実測（375px・器 343px）：地図列 **320px**／情報列 **260px** で幅いっぱいにならず、
     右に 23px・83px の空きが出ていた（`min-width: min(320px,100%)` が下限として残るだけ）。
     ★★下の §主軸を倒すと「列の最小幅」が「最小の高さ」に化ける と**同じ family**——
       **軸で意味が変わる指定は、軸を倒す指定と同じ場所で書き直す。**
       `flex-basis`（主軸の寸法）と `align-items`（交差軸の揃え）は、どちらも
       「どっちが主軸か」を前提に書かれているので、倒したら必ず読み直すこと。
     ★`stretch` で幅いっぱい（実測 343/343・横あふれ 0）。器がさらに狭くても
       `min-width` の `100%` 側が効くのであふれない。 */
  .access__split,
  .acc-layout-split.acc-map-right .access__split { flex-direction: column; align-items: stretch; }
}

/* overlay：地図をバンド全幅に敷き、情報を白カードで隅に重ねる（額装ヒーロー埋め込みと同語彙） */
.access__overlay { position: relative; margin-top: var(--wp--preset--spacing--70); }
.acc-layout-overlay .access__map-wrap {
  border-radius: 0;
  /* Google マップは横長。地図は低め（横長）に保ちつつ、2列カードが下寄せで余裕をもって収まる高さ。
     ★2026-08-19：郵便番号を独立行にしたぶんカードが 313→345px になり、上の余裕が 47→15px に減った。
       住所の長さは院ごとに違い、もう1行増える院もあり得る（＝カードが地図の上端を越える）ので、
       下限を 400→440px に上げて元の余裕（約50px）へ戻す。★**前提が変わったら、その前提で決めた値も見直す。** */
  min-height: clamp(440px, 44vh, 500px);
}
.access__info-float {
  position: absolute;
  bottom: clamp(20px, 4vw, 40px);
  width: min(520px, calc(100% - clamp(40px, 12vw, 128px)));
  background: #fff;
  border-radius: var(--r-field);
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.25rem, 2.4vw, 2rem);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.16);
  /* 左＝住所、右＝アクセス方法。縦積み1列だと背が高く地図を縦長化する／
     横に広げるとカードが幅を取りすぎて横長マップとバランスが悪いため、2列で持つ。
     ※ 電話番号は 2026-08-22 に外した（下部CTAと重複）。下の §情報ブロックは2つ 参照。 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.85rem, 1.8vw, 1.3rem) clamp(1.1rem, 2.4vw, 1.9rem);
  align-items: start;
}
.access__info-float .access__block { min-width: 0; }
/* ━━ ★★情報ブロックは2つ（住所｜アクセス方法）＝位置指定が要らなくなった（2026-08-22）━━
   電話番号を外すまでは3ブロックを `nth-child(1/2/3)` で 1fr 1fr に**折り込んで**いた
   （左列＝住所＋電話を縦に／右列＝アクセス方法が `grid-row: 1 / span 2` で2行ぶんまたぐ）。
   2つになった今は**グリッドの自動配置がそのまま左右に並べる**ので、位置指定そのものを削除した。
   ★★インデックス（`nth-child`）で位置を書かない＝**ブロックの数が変わっても崩れない**。
     旧実装のまま3つ目が消えると、残った2つが「左列に縦積み・右列は空」という
     **誰も設計していない形**になる（位置が「何番目か」に結び付いていたため）。
   ★区切りの縦線は「2つ目」に付ける＝順序で書く（`+`）。数を数えない。 */
.access__info-float .access__block + .access__block {
  padding-left: clamp(1rem, 2vw, 1.7rem);
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
/* ★経路（アクセス方法）が未入力ならブロックは1つ。2列のまま左半分だけ埋まると
   カードが「欠けている」ように見えるので、1つのときは両列にまたがらせる（2026-08-23）。
   ★数を数えず `:only-child` で表す＝**中身の有無に自動で追従する**（PHP側にクラスを増やさない）。 */
.access__info-float .access__block:only-child { grid-column: 1 / -1; }
/* 縦マージン規則（.access__info-col …）は overlay では gap に任せて解除 */
.acc-layout-overlay .access__info-float .access__block + .access__block { margin-top: 0; }
/* overlay は情報カードを右固定（Google マップは左に固定UI＝上=店舗情報カード／下=航空写真ボタン
   があり、左にカードを置くと必ず被る。2026-07-24 実射FB）。map_pos サブ軸は split 専用。 */
.acc-layout-overlay .access__info-float { right: clamp(20px, 5vw, 56px); left: auto; }

/* ━━ ★★★重ねるのは「ピンが隠れない幅」のときだけ（2026-08-22 実射FB）━━━━━━━━━━━
   実射FB「画面幅が狭いと地図が覆われて所在地のピンが見えない」。
   ★Google 埋め込みは**所在地を中心に置く**ので、判定は「カードが地図の中心を覆うか」になる。
     カードは右下固定なので、条件は **カードの左端 > 地図の中心X**。
     カードの外形は最大 584px（内容 520px＋左右パディング）、右余白は最大 56px なので
       幅 − 56 − 584 > 幅 ÷ 2  →  **幅 > 2 ×(584 + 56) = 1280px**
     ＝1280px を下回ると、設定に関係なく必ず中心が隠れる。
     実測：985px＝カード左端 354／中心 485（**隠れる**）、1400px＝745／693（見える）。
   ★★この閾値は**カード自身の最大幅から導かれる**ので、内容の長さでは動かない
     （住所が1行増えても縦に伸びるだけで、横の条件は変わらない）。
     ＝§矢印・§フロストの裾のような「環境で動く量を px で書く」型ではない。
     ただし**カードの最大幅を変えたらこの値も変わる**ので、両方をこの節にまとめて書いておく。
   ★下限を 781px（WPのモバイル境界）から 1279px へ引き上げただけで、
     **落ちる先は既にある「地図の下に積む」経路**（2026-08-02 に作り込み済み）。新しい構えは作らない。 */
@media (max-width: 1279px) {
  .acc-layout-overlay .access__map-wrap { min-height: clamp(280px, 56vw, 380px); }
  /* ★★カードを `static` にしてはいけない（2026-08-02・実射FB「地図下のカードが切れていて不格好」）。
     `<iframe>` は**置換要素＝インラインレベル**なので、CSSの描画順では
     「在来フローのブロックの背景」**より後**に描かれる。static のままだと、重ねたはずのカードが
     **地図の下に潜り**、上端（角丸＋影）が隠れて「カードが切れている」ように見える。
     実測：重なり帯（y=483）で `elementFromPoint` が返すのは IFRAME だった＝カードは背面。
     → `relative` ＋ `z-index: 1` で、在来フローのまま**重ね順だけ**取り戻す。
   ★`inset: auto` が要る：PC用の `bottom` / `right`（絶対配置のための位置指定）が relative では
     **相対オフセットとして生き返る**（実測：カードが上へ20px・左へ20px ずれ、左端が -5px と画面外へ）。
     打ち消しは `.acc-layout-overlay .access__info-float`（0,2,0）で宣言すること——
     素の `.access__info-float`（0,1,0）では PC 側の `right`（0,2,0）に負ける。
   ★★**地図には重ねない**（旧 `margin-top: -1.75rem` を撤去）：モバイルのカードはほぼ全幅なので、
     下端に重ねると **Google のロゴと帰属表示（Map data ©／Terms）を必ず覆う**。
     PC版がカードを `bottom: clamp(20px,4vw,40px)` で地図の下端から離しているのと同じ配慮を、
     モバイルでは「重ねない」で満たす。＝**重なりの演出より、覆ってはいけないものを覆わないことを優先する。**
   ★上の隙間は**左右と同じ量**にする（2026-08-02 実射FB「少し隙間があった方が良い」）。
     密着させると地図の帰属表示のすぐ下にカードの縁が来て窮屈に見える。同じ値を使えば
     **カードが3辺とも同じ量だけ内側に入る**＝新しい寸法を1つも増やさずに間が取れる。 */
  .acc-layout-overlay .access__info-float {
    position: relative;
    z-index: 1;
    inset: auto;
    width: auto;
    margin: clamp(12px, 4vw, 24px) clamp(12px, 4vw, 24px) 0;
    /* モバイルは2列だと窮屈＝1列に縦積みへ戻す（grid配置は無効化） */
    display: block;
  }
  .access__info-float .access__block + .access__block { padding-left: 0; border-left: none; }
  .acc-layout-overlay .access__info-float .access__block + .access__block { margin-top: var(--wp--preset--spacing--60); }
}

/* stack / full：地図を大きく上に、情報を下に横並び3列。
   ★2者の違いは**地図の幅だけ**（stack＝ガターの内側の角丸メディア／full＝画面の端まで出す帯）。
     形の部品（`.access__map-col--stack` / `.access__info-row`）は**そのまま共有する**＝
     片方だけ育って食い違う、をなくす。差分は下の §full だけに書く。 */
.access__map-col--stack { margin-top: var(--wp--preset--spacing--70); }
.acc-layout-stack .access__map-wrap,
.acc-layout-full .access__map-wrap { min-height: clamp(340px, 42vw, 500px); }
.access__info-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
  margin-top: var(--wp--preset--spacing--70);
}
/* ━━ ★★主軸を倒すと「列の最小幅」が「最小の高さ」に化ける（2026-08-22 実射FB）━━━━
   実射FB「幅を縮めて縦積みになると異常に余白が大きい」。
   ★`220px` は**列の最小幅**＝横の量のつもりで書いてある。しかし `flex-basis` は
     **主軸**の寸法なので、`flex-direction: column` で主軸を縦へ倒した瞬間、
     同じ 220px が**最小の高さ**として効く（`flex-grow: 1` があるので縮みもしない）。
     実測（器 546px）：中身が 88.1 / 68.9 / 144.3px しかないブロックが**全て高さ 220px**になり、
     1つあたり 75.7〜151.1px の空白＝**行の高さ 716px（中身の合計は 301px）**。
   ★★**直し方は「倒さない」**。`flex-wrap: wrap` が既に同じ結果を出す——
     2列ぶん（220×2＋列gap 36 ＝ 476px）が入らなくなった時点で自動的に1列になる。
     打ち消し（縦並びのときだけ basis を解く）を足すのではなく、**倒す指定のほうを消す**。
   ★おまけに閾値 600px が要らなくなる：「入るか」はブラウザが実際に計算するので、
     当て推量の px を持たずに済む（§上部中央ヘッダーのグリッド化と同型＝
     **しきい値を持たずに「入るときだけ横並び」**）。
   実測（器の幅 → 形／行の高さ／横あふれ）：
     732px↑ ＝ 3列 ／196px、476〜731px ＝ 2+1（住所|電話 → アクセス方法が全幅）／315px、
     476px↓ ＝ 1列 ／**442px**（旧 716px）。いずれも横あふれ 0。 */
.access__info-row .access__block { flex: 1 1 220px; min-width: 0; }

/* ━━ full：地図を全幅の帯に、情報はその下（2026-09-09 追加）━━━━━━━━━━━━━━━━
   ★**stack との差分だけ**をここに書く（形は上の stack の規則をそのまま使う）。差分は2つ：
     ① 地図を画面の端まで出す … マークアップの `alignfull`（WP標準の全幅ブレイクアウト。
        overlay と同じ手で、100vw 負マージンは使わない＝横スクロール事故を作らない）。
        ★`alignfull` は**セクション自身の padding を越えない**ので、`full` は上の §左右の余白 の
          型分けで `padding-inline` を**掛けない側**に置いてある。ここを掛ける側へ移すと、
          地図がガターぶん内側に入って **full が stack と同じ見た目になる**。
     ② 角を落とす … 端まで届く帯に角丸が残ると画面の隅だけ地色が三角に覗く（overlay と同じ理由）。
   ★セクションに padding を掛けないぶん、**情報行には同じガターを掛ける**。
     掛けないと住所とアクセス方法が画面の端に接触する（2026-08-22 実射FB と同じ事故）。
     見出しは `.section-head` が自前でガターを持っているので、ここでは触らない。
   ★★**`box-sizing` まで込みでガターを掛ける**（実測で踏んだ）。このテーマは `*` に border-box を
     掛けていないので、`.access__info-row`（素の div）は **content-box**。padding だけ足すと
     器が `max-width: 1080px`（本文幅）の**外側へ 80px 膨らむ**——実測（1280px）：
     情報行 53..1213（w1160）に対し見出しは 93..1173（w1080）で、
     **本文幅を越えて、見出しより広い**という誰も設計していない形になっていた。
     `.section-head` は WP のブロック要素なので border-box＝同じ書き方でも膨らまない。
     ＝**同じ宣言でも、box-sizing が違うと結果が違う。**
     実測（修正後・1280px）：情報行 93..1173 ＝ stack と同じ器の幅／中の文字は 133 から始まり、
     見出しの文字（133）と**左端が揃う**。 */
.acc-layout-full .access__map-wrap { border-radius: 0; }
.acc-layout-full .access__info-row { box-sizing: border-box; padding-inline: var(--gutter); }
/* features / departments のSVGアイコン共通 */
.features__icon svg,
.departments__icon svg {
  display: block;
}

/* キャッチコピー内の強調（管理画面で **…** で囲んだ部分）＝ブランドカラー。
   色はトークン追従（カラー軸で自動追従）。
   ★★★2026-08-31：色を**用途トークン1本**（--catch-accent）に集約し、軸 catch_accent を足した。
     旧実装は「明るい地＝メイン／写真の上＝セカンダリ」を**2つの規則に直接書いて**いたので、
     どちらか一方を選ぶ手段が無かった（実射FB「セカンダリ一択なので、メインも選べるように」）。
   ★★**混色比は色ごとに違う**＝ここが単純な置き換えにならない理由。写真の上では
     セカンダリ 62% 白混ぜで対比 1.85〜2.18 だが、**メインに同じ 62% を当てると 1.10〜1.48**
     （navy が最悪 1.10）で、2026-07-26 に直した状態より悪くなる。
     → メインは **35%**＝最小 1.92 で、出荷中のセカンダリの最悪値（beige 1.85）を下回らない
       最大の濃さ。**「色の濃さ」と「読みやすさ」は直接のトレードオフ**なので、
       もっと濃くしたいならこの 35 を上げる（45% で 1.58〜1.92）。 */
body { --catch-accent: var(--wp--preset--color--primary); }
.hero__catch .hero__accent { color: var(--catch-accent); }

/* 写真ヒーローは背景の明るさが不定なので、見出し全体にダークなハロー（影）を付けて
   写真から浮かせる（白の本文も色つき部分も読める。キット非依存）。
   色つき部分は淡いブランド色だと沈むため、accent に白を少し混ぜて輝度を確保（elegantの金茶対策）。 */
/* ━━ 写真ヒーローの文字を読ませる仕組み＝ハロー（text-shadow）━━
   ★★「面の暗部（リード背後のぼかした楕円）」を試して**撤回した**（2026-07-26 実射FB）。経緯を残す：
     ねらい＝ハローだけで支えると強くせざるを得ず（`0 0 8px/0.55`）、**強いハローは全方向に光って
     「輪郭線」に見える**。そこで支えを「面」に移し、ハローを弱める構成にした。
     数値上は成功していた（白いキャッチ 1.63 → 5.44／色つき強調 1.09 → 2.18／
     文字から離れた写真への影響はわずか 0.017）。
   ★★**しかし実写で「丸い影の形がくっきり見える」＝不採用**。原因は**写真の性質**：
     ・検証に使った写真が「情報量の多い室内」だったため、柔らかいシェーディングが**柄に紛れて**見えなかった。
     ・実際のトップ写真は**大きな青空＝なめらかな階調の面**で、そこでは
       **どんなに滑らかなグラデも輪郭として知覚される**（人の目は平坦な面の上の低周波の濃淡に非常に敏感）。
     ・`closest-side` で矩形の切り口は消せたが、**楕円そのものの存在は消せない**。形を持つ以上、
       なめらかな背景では必ず「形」に見える。
   ★★**教訓その1：背景に敷く装飾は「写真の絵柄」に成否が依存する。1枚の写真で検証して
     採否を決めない——最低でも「情報量の多い写真」と「空・白壁のようななめらかな写真」の
     両方で見ること。** 数値（コントラスト比）は改善していても、**見た目は破綻し得る**。
   ★★**教訓その2：可読性の支えを「面」で作る手は、背景が不定なヒーローには向かない。**
     面で支えたいなら**輪郭を持ってよい形にする**（＝すりガラスのパネルのように「意図した箱」に見せる）
     か、**背景全体を覆う**（＝暗幕）しかない。中間の「ぼかした形」は、なめらかな背景で必ず露見する。
   → **ハロー1本の構成に戻した**（値も元に戻す）。glyph のまわりだけを暗くするので、
     **背景の絵柄に一切依存しない**——これがハローの本質的な強み。
   3層構成（**値は 2026-07-26 の実射で指定**・「このくらいがバランスが良い」）：
     ①②**0.5px の極細を2枚重ね**（0.20＋0.40）＝**縁だけを締める**。ぼかし半径が字画より小さいので
       「光っている」ようには見えず、輪郭がわずかに立つだけ＝**洗練された見え方の核**。
     ③**10px の広いにじみ（0.20）**＝明るい面の上で文字の塊をうっすら浮かせる。
   ★旧値（`0 1px 2px/.60` ＋ `0 0 8px/.55` ＋ `0 0 22px/.35`）から**大幅に薄くした**。
     旧値は白飛びした背景でも読ませる強さがあったが、**大きな見出しでは全方向のグローとして
     知覚される**（＝「洗練されていない」の正体）。
   ※ **可読性は暗幕（`.hero__overlay`）とこの薄いハローの合計で決まる。**
   ★★2026-09-23：**「運用では文字側に明るい面が来ない写真を選ぶ」という前提を撤去した。**
      写真を選ぶのは顧客で、上げてくるのは受付・外観・青空である。規律で埋める穴ではないし、
      院の写真は差し替えも効かない（その院の受付は1つしかない）。
      → **暗幕の濃さを写真の明るさに追従させる**（inc/hero-scrim.php）。キャッチが載る側の
      明るさを測り、白飛びしている写真のときだけ 0.30 → 最大 0.50 まで濃くする。
      **暗い写真では 0.30 のまま＝見え方は変わらない。**
      ★ここで触るのは**濃さの1点だけ**：形（linear 1枚・平坦部なし・radial 不使用）は
      2026-07-26 の実射で決まったものをそのまま使う（輪・塊に見えた失敗を繰り返さない）。
      ★上限 0.50＝かつて「濃すぎる」と判定された 0.62 より確実に薄い側で止める。
   ※ WCAG はハローを計算に入れないため、コントラスト比の数値上は暗幕だけが評価対象になる。
   ※ さらに可読性を上げたい場合の残る手は「すりガラスのパネル」＝デザイン語彙が変わる（未採用）。 */
.hero--photo .hero__catch,
.hero--photo .hero__sub {
  text-shadow:
    0 0 0.5px rgba(0,0,0,0.20),
    0 0 0.5px rgba(0,0,0,0.40),
    0 0 10px  rgba(0,0,0,0.20);
}

/* ★★キャッチ内の強調（`**…**`）は写真ヒーローでも**色を残す**（2026-07-26 実射FBで白化を撤回）。
   一度は「白＋大きさ」にしたが、**「キャッチの色を部分的に変えられる」機能そのものが
   死ぬ**ため差し戻した。**機能を殺して数値を取るのは解決ではない。**
   ★色つき文字は**原理的に白より不利**（輝度が低いぶんコントラストが下がる）。明るい写真の上で
     1.09:1 まで落ちていたのが元の症状で、対処は**色をいじることではなく、面の暗部（上）を足して
     背景側の輝度を下げること**だった。**値は元のまま（accent 62%）で 1.09 → 2.18 に改善**。
   ★実測の階段（暗部あり・soft・最悪の1ピクセル）＝色を薄めるほど読みやすくなるが色は消える：
       accent 100% 1.59 ／ **accent 62%（＝この実装・従来と同じ色）2.18** ／ accent 50% 2.39 ／
       accent 38% 2.63 ／ accent 25% 2.90 ／ 白 3.49
     **「色の濃さ」と「読みやすさ」は直接のトレードオフ**なので、より読みやすさを取るなら
     この行の 62% を下げるだけで段階的に調整できる（見た目は薄くなる）。
   ★**大きさの強調（1.1em）は残す**：強調が色だけに依存しないようにするため（色覚特性・
     モノクロ印刷・コントラスト不足のいずれでも「そこが強調されている」と分かる）。
   ※ 色つきヒーロー・他バリアントでは従来どおりブランドカラー実色（上の `.hero__catch .hero__accent`）。
   ※ **3:1 には届かない**（白ですら最悪 3.5・色つきは 2.18）。さらに上げるには暗部を濃くする＝
     写真が暗くなるか、すりガラスのパネルにする＝デザイン語彙が変わる、のどちらかになる。 */
.hero--photo { --catch-accent: color-mix(in srgb, var(--wp--preset--color--accent) 62%, #fff); }
/* ★軸 catch_accent = メインカラー。**写真の上だけ比率が変わる**（明るい地は auto と同じ実色）＝
   選んでも見た目が変わるのは写真ヒーローのとき。混色比の根拠は上の §--catch-accent。 */
body.catchcolor-primary .hero--photo {
  --catch-accent: color-mix(in srgb, var(--wp--preset--color--primary) 35%, #fff);
}
.hero--photo .hero__catch .hero__accent {
  font-size: 1.1em;
}

/* ━━ ヒーロー埋め込み（診療時間／お知らせ）＝8方向スロット（slideshow / framed 共通） ━━
   各カードが「位置」（tl/tc/tr・ml/mr・bl/bc/br）を持ち、同じ位置は1スロットに縦積み／別の位置は散らし。
   見せ方は位置と直交：embed-float＝端から余白をとって浮かせる（影つき白カード）／
                     embed-dock ＝端にピタリ接地し継ぎ目を凹フィレットで丸めて一体化（carved-in）。
   絶対配置の基準は framed=.hero__frame（余白なし）／slideshow=.section-hero。そのため
   .hero__inner を position:static にして基準から外す＝スロットがヒーローの端まで届く。
   PC幅のみ。モバイル（<901px）はキャッチの下に通常の白カードを縦積みでフォールバック。 */
.has-hero-embed .hero__lead { min-width: 0; }

/* ━━ 安全域（--embed-safe-top / --embed-safe-bottom）＝スロットが置ける縦の帯（2026-07-28）━━
   ★★従来はスロットが「片側アンカー（top だけ／bottom だけ）」で、しかも透過オーバーレイの
     逃げ（--hero-header-inset）をまったく受け取っていなかった。そのため
     ①上段（tl/tc/tr）はヘッダーの内側から始まり、②下段（bl/bc/br）は中身が高いと
     **反対側＝上へ青天井に伸びて**ヘッダーの下へ潜った（実測 1280×720 で上端 −137.9px＝画面外）。
     キャッチだけは .hero__inner の padding-top で逃げていたが、スロットは .hero__inner の
     外（絶対配置）なので逃げが一切届いていなかった。
   → 帯を2トークンで定義し、8方向すべてが同じ帯の中に収まるようにする。
     上＝ヘッダー占有 ＋ 端からの寄せ／下＝端からの寄せ ＋ 区切り波の逃げ。
   ★区切り波の逃げは「全幅バンドで波が出るときだけ」＝パネル構え・額装では 0（従来の
     下段だけの個別指定をトークンに畳んだもの。条件はそのまま移設）。 */
@media (min-width: 901px) {
  .has-hero-embed .hero__inner { position: static; display: block; }
  /* 端からの寄せ幅。float＝余白ぶん浮かせる／dock＝0（接地） */
  /* ★★カードの基準幅は**トークン1つ**で持つ（2026-08-30 実射FB「カードの幅が狭く窮屈」）。
     旧実装は `min(400px, 42%)` を**3か所**（散らし・縦積み・上下2枚組）に書いていたので、
     片方だけ直すと構成ごとに幅が違うサイトになる。
     ★400 → 460px に広げた根拠＝**実測**：診療時間の表の自然幅は 365px なのに、
       本文に渡っていたのは 311px（＝54px 不足）で、「受付 8:45〜12：00」が2行に折り返し、
       行の高さが 41px → 99px に膨らんでいた。窮屈の正体は余白ではなく**表が入りきっていない**こと。
     ★縦書き見出し（`embed_head: side`）は見出し帯＋間隔で**実測 59px**を横に食うので、
       その分だけ上限を別に持つ（`--embed-w-side`）。 */
  .has-hero-embed {
    --embed-inset: clamp(16px, 2.4vw, 40px); --embed-wave-esc: 0px;
    --embed-w: min(460px, 46%);
    --embed-w-side: min(560px, 54%);
  }
  .has-hero-embed.embed-dock { --embed-inset: 0px; }
  /* ★アーチ（wave-arch）は写真に重ねない＝ヒーローの下端は直線なので、逃げも要らない */
  body:not(.band-panel):not(.band-panel-alt):not(.wave-arch) .section-hero:not(.hero--framed).has-hero-embed {
    --embed-wave-esc: var(--wave-h, 0px);
  }
  .has-hero-embed {
    /* ★★上端はヘッダーの**箱**（--hero-header-inset）だけでなく、**フロストの裾**
       （--hdr-frost-h＝透過オーバーレイのときだけ 0 以外）も足す。裾は箱の外へ出る装飾なので、
       これが無いとカードの上端がフロストの内側に入り、周囲が白く濁って**縁が消える**
       （2026-08-22 実射FB。詳細は §フロストの裾）。 */
    /* ★`--embed-gap-*` は「選んでいない辺に作る逃げ」（既定 0＝従来と1pxも変わらない）。
       式をここ1か所に保つための口＝縦積みの節は**値だけ**を差し込む（同じ計算を2か所に書かない）。 */
    --embed-safe-top: calc(var(--hero-header-inset, 0px) + var(--hdr-frost-h, 0px) + var(--embed-inset) + var(--embed-gap-top, 0px));
    --embed-safe-bottom: calc(var(--embed-inset) + var(--embed-wave-esc) + var(--embed-gap-bottom, 0px));
  }

  /* ━━ 縦積み＝「選んでいない辺」に逃げを作る（2026-08-25 実射FB）━━
     実射FB「右下に重ねたとき、上のヘッダーにぴったり接地するのは見た目としてOKか」。
     ★★実測：中身（745px）が帯（745px）を**埋め切っており、空きは 0px**。寄せ（`justify-content`）に
       働く余地が無いので、**上・中・下のどれを選んでも同じ絵**になっていた＝位置の設定が死ぬ。
     ★ドックの「接地」は**選んだ辺で起きてこそ意図に見える**（右上を選んで上に接地するのは意匠、
       右下を選んで上に接地するのは事故）。→ 反対側には必ず隙間を残す。
     ★★逃げは **`--embed-safe-*` に足す**こと。別のパディングで足すと、継ぎ目の接地判定
       （`--dock-cap-*` は「安全域が 0 か」で見る）が「まだ接地している」と誤認し、
       **壁が無いのに角が直角のまま**残る（§フィレットは接地でしか成立しない と同じ罠の裏返し）。
       トークン経由なら、逃げを入れた辺の角が自動で丸まる。 */
  .has-hero-embed.embed-stacked { --embed-stack-gap: clamp(24px, 4vw, 64px); }
  .has-hero-embed.embed-stacked:has(:is(.embed-slot-bl, .embed-slot-bc, .embed-slot-br)) {
    --embed-gap-top: var(--embed-stack-gap);
  }
  .has-hero-embed.embed-stacked:has(:is(.embed-slot-tl, .embed-slot-tc, .embed-slot-tr)) {
    --embed-gap-bottom: var(--embed-stack-gap);
  }
  .has-hero-embed.embed-stacked:has(:is(.embed-slot-ml, .embed-slot-mr)) {
    --embed-gap-top: var(--embed-stack-gap);
    --embed-gap-bottom: var(--embed-stack-gap);
  }

  .has-hero-embed .hero__embed--slot {
    position: absolute; z-index: 3; margin: 0;
    width: var(--embed-w);
    display: flex; flex-direction: column; gap: 0.9rem;
  }

  /* ── 横位置（8方向で共通の3系統）── */
  .embed-slot-tl, .embed-slot-ml, .embed-slot-bl { left: var(--embed-inset); }
  .embed-slot-tr, .embed-slot-mr, .embed-slot-br { right: var(--embed-inset); }
  .embed-slot-tc, .embed-slot-bc { left: 50%; transform: translateX(-50%); }

  /* ── 縦位置：float＝帯いっぱいに伸ばして justify-content で寄せる ──
     ★★`safe` キーワードが要（溢れたときだけ整列を start 扱いに落とす）＝
       **はみ出しは必ず下へ向かい、上（ヘッダー側）へは構造的に出られない**。
       非対応ブラウザは宣言ごと無効になり既定の flex-start＝やはり下へ逃げる（安全側）。
     ★カードは flex: 0 0 auto で潰さない（既定の flex-shrink:1 のままだと帯が足りないとき
       カードが縮み、「お知らせ3件・診療時間の注記を残す」という要件が壊れる）。
     ★float ではスロット自身は不可視（地色・影はカードが持つ）なので、伸ばしても見た目に出ない。 */
  .embed-float .hero__embed--slot {
    top: var(--embed-safe-top);
    bottom: var(--embed-safe-bottom);
  }
  .embed-float :is(.embed-slot-tl, .embed-slot-tc, .embed-slot-tr) { justify-content: safe flex-start; }
  .embed-float :is(.embed-slot-ml, .embed-slot-mr)                { justify-content: safe center; }
  .embed-float :is(.embed-slot-bl, .embed-slot-bc, .embed-slot-br){ justify-content: safe flex-end; }
  .embed-float .hero__embed-card { flex: 0 0 auto; }

  /* ── 縦位置：dock＝スロット自身が「面」（--dock-face）なので伸ばせない ──
     ★content 高のまま、帯の上端／中央／下端に置く。中央は「ヒーローの中央」ではなく
       **帯の中央**（安全域を除いた残りの中央）＝ヘッダーの下から測る。
     ★dock は上向きのはみ出しを構造では止められない（面を伸ばせないため）。
       溢れる条件＝縦の低い画面は下の max-height フォールバックが受け止める。 */
  .embed-dock :is(.embed-slot-tl, .embed-slot-tc, .embed-slot-tr) { top: var(--embed-safe-top); }
  .embed-dock :is(.embed-slot-ml, .embed-slot-mr) {
    top: calc(var(--embed-safe-top) + (100% - var(--embed-safe-top) - var(--embed-safe-bottom)) / 2);
    transform: translateY(-50%);
  }
  .embed-dock :is(.embed-slot-bl, .embed-slot-bc, .embed-slot-br) { bottom: var(--embed-safe-bottom); }
}

/* モバイル：絶対配置をやめ、キャッチの下に通常の白カードを縦積み（ドックの装飾も効かせない）
   ★写真ヒーローでは、この上にさらに「写真の領域とカードの領域を分ける」指定が乗る
     （§スマホのヒーロー・ファイル後半。写真の高さ・キャッチの負マージン・全幅の帯）。
     ここは色背景・額装も含めた**共通の落とし方**だけを持つ。 */
@media (max-width: 900px) {
  .has-hero-embed .hero__inner { display: flex; flex-direction: column; gap: 1.5rem; }
  .has-hero-embed .hero__embed--slot {
    position: static; width: auto; transform: none;
    display: flex; flex-direction: column; gap: 14px;
  }
  /* ★上下2枚組の器（PC で列にまとめたもの）は、スマホでは**ただの縦並び**に戻す。
     器を挟んだぶん、2枚のあいだの間隔が `.hero__inner` の gap から外れる＝
     器が同じ値を持ち直す（挟む前と1pxも変えない）。 */
  .has-hero-embed .hero__embed-col { display: flex; flex-direction: column; gap: 1.5rem; }
}

/* ━━ 縦積み（同じ位置に2枚）＝絶対配置をやめてレイアウトに参加させる（2026-08-25 実射FB）━━
   実射FB「縦積みにするとうまくドックされない・高さが足りず切れる」。

   ★★旧実装は「縦の低い画面（`max-height: 799px`）」でだけ在来フローへ落としていた。
     あれは**コンテンツの量を画面の高さで代用した近似**で、閾値はカード2枚の実測
     （当時 574.3px）から逆算した定数だった。＝**中身が育つと閾値が実態から外れる。**
     実測（2026-08-25）：カード2枚は **740px**（幅400px）〜**783px**（幅340px）まで伸びていた
     （診療時間の注記3行＋臨時のお知らせ／お知らせ3件）。
   ★★★しかも使える帯は**どの解像度でも足りない**——ヒーロー高は `clamp(…,760px)` で頭打ちだから：
     1920×1080 で 760 − 波の逃げ51 = **709px（31px不足）**／1440×900 で **646px（94px不足）**／
     1366×768 で **548px（192px不足）**。浮かせ（float）なら上下の寄せ幅40pxぶんさらに不足。
     ＝「入るかどうか」は画面サイズから判定できる問題ではなかった（JSで実測しても常に「入らない」）。

   → **判定そのものをやめる。** スロットをフレックスの1列にして、ヒーローの高さを
     `max(キャッチ, カード)` が決める形にする。軽い院ではヒーローは従来どおり（min-height が効く）、
     重い院では必要なぶんだけ伸びる＝**閾値も JS も要らず、上にも下にも構造的に切れない。**
   ★ドック（端に接地）は維持する：器の左右パディングを 0 にして端まで使い、
     キャッチ側だけページの器に合わせて内側へ寄せる（この節は位置の与え方だけを変え、
     ドックの造形には触れない）。
     ※★★当初ここは「器＝`.hero__inner` ／ スロットは `align-items: stretch` で帯いっぱいに伸びる」
       と書いていたが、**そのどちらも成り立っていなかった**（`.hero__inner` は帯になれず、
       伸ばすと面が余る）。2026-08-30 に器をヒーロー自身へ移して訂正——下のブロックの冒頭を見ること。
   ★教訓：**代理指標（画面高）で条件を近似せず、条件そのもの（入るか）をレイアウトに表現させる。** */
@media (min-width: 901px) {
  /* ★★★2026-08-30 実射FB「ドックの下側に間が空いて表示が乱れる。臨時のお知らせが出ていた頃は
       起きていなかった」＝**帯（--embed-safe-*）を持てる器が居なかった**。
       旧実装は帯を `.hero__inner` の `padding-block` で表現していたが、この箱は2つの理由で帯になれない。

     ① **上端は既に別の規則が書いている。** ヘッダー形状ごとの「キャッチをヘッダーの下へ逃がす」指定が
        `.hero__inner` の padding-top を **(0,5,0)** で持っており、こちらの **(0,3,0)** は**黙って負ける**。
        ＝「選んでいない辺に作る逃げ」（--embed-gap-top）がレイアウトに届かず、
        **右下を選んでいるのに上へ接地し、下に隙間が残る**（位置の設定が反対に出る）。
        ※上寄せ（t*）だけ正しく見えていたのは、逃げが**負けない辺（下）**だったから＝偶然。
     ② **下端はヒーローに届かない。** `.hero__inner` は中身の高さ・ヒーローの高さは min-height なので、
        中身が min-height に足りないぶん器はヒーローの下端の手前で終わる。
        実測（1920×1000・右下ドック）：中身 712px／帯 760px → パネルの下端がヒーローの下端の **48px 上**。
        ★臨時のお知らせが出ていた頃は中身がちょうど 760px に届いていた＝**中身の量だけが隠していた**。

     ★★危ないのは隙間そのものより**宣言が嘘になること**：`--dock-cap-*` は「安全域が 0 か」で接地を判定する。
       安全域は 0（＝接地しているはず）なのに実際は 48px 浮くので、CSS は角を直角のまま描き、
       壁の無いところに凹フィレットを浮かせる（§フィレットは接地でしか成立しない と同じ絵）。

     → **器をヒーロー自身（額装は額）にする。** `.hero__inner` は `display: contents` で箱を透過させ、
       ヘッダー形状ごとの padding-top は**当たる箱ごと消える**＝打ち消さない
       （§飛び出しメニュー「打ち消しが必要な状態は、条件の書き場所が間違っているサイン」＝
        詳細度で殴り返さず、置き場所を移す）。モバイルの写真ヒーローが**同じ理由で既に採っている形**
       （§スマホのヒーロー・`display: contents` ＋ 逃げはキャッチの内側へ一本化）。
     ★`box-sizing: border-box` を明示する（このテーマは content-box が既定）。無いと min-height に
       帯のパディングが上乗せされ、ヒーローが帯のぶん背高になる（実測 916px → 1104px）。 */
  .has-hero-embed.embed-inflow:not(.hero--framed),
  .hero--framed.has-hero-embed.embed-inflow .hero__frame {
    box-sizing: border-box;
    /* ドックの接地を保つため左右は 0 で端まで使う（寄せはキャッチ側が持つ） */
    padding-inline: 0;
    padding-block: var(--embed-safe-top) var(--embed-safe-bottom);
    gap: clamp(24px, 4vw, 64px);
  }
  .has-hero-embed.embed-inflow .hero__inner { display: contents; }
  /* キャッチは「器の外側の辺」だけページのコンテナに合わせる（ヘッダー・本文と端が揃う）。
     内側は gap が担当するので寄せない＝広い画面で無駄な空白を作らない。
     ★重ね順は**キャッチ自身が持つ**：器を透過させたので旧 `.hero__inner` の
       `position: relative; z-index: 2` が消える。無いと暗幕（`.hero__overlay`＝絶対配置）が
       キャッチより後に描かれて文字が沈む（`display: contents` に必ず付いてくる引き継ぎ）。 */
  .has-hero-embed.embed-inflow .hero__lead {
    position: relative; z-index: 2;
    flex: 1 1 auto; min-width: 0; align-self: center;
    padding-inline-start: max(var(--gutter), (100% - var(--wp--style--global--wide-size, 1200px)) / 2);
  }
  .has-hero-embed.embed-inflow:has(:is(.embed-slot-tl, .embed-slot-ml, .embed-slot-bl)) .hero__lead {
    padding-inline: 0 max(var(--gutter), (100% - var(--wp--style--global--wide-size, 1200px)) / 2);
  }
  .has-hero-embed.embed-stacked .hero__embed--slot {
    /* ★フィレット（::before/::after）は絶対配置なので、基準になる要素が要る。
       絶対配置をやめた以上ここで positioned にしないと、疑似要素の基準がヒーローまで飛ぶ。 */
    position: relative;
    inset: auto; transform: none;
    flex: 0 0 var(--embed-w); width: auto;
  }
  /* ★★スロットを縦に伸ばすかは**見せ方で違う**＝絶対配置のときと同じ規則をここでも使う。
     浮かせ（float）＝スロットは不可視なので帯いっぱいに伸ばし、中のカードを justify-content で寄せる。
     ドック＝**スロット自身が「面」なので伸ばせない**（§縦位置：dock と同じ理由）。中身の高さのまま、
     **選んだ辺**へ寄せる。伸ばすと、中身が帯より低いときに面だけが余って**白い空白の帯**になる。 */
  .embed-float.embed-stacked .hero__embed--slot { align-self: stretch; }
  .embed-dock.embed-stacked :is(.embed-slot-tl, .embed-slot-tr) { align-self: flex-start; }
  .embed-dock.embed-stacked :is(.embed-slot-ml, .embed-slot-mr) { align-self: center; }
  .embed-dock.embed-stacked :is(.embed-slot-bl, .embed-slot-br) { align-self: flex-end; }
  /* 中上／中下は列（下の flex-direction: column）なので、寄せは交差軸ではなく**主軸**の話になる。
     中下だけ余りを上へ送る＝auto マージンで下端へ着ける（中上は先頭なので既定のままで接地する）。 */
  .embed-dock.embed-stacked .embed-slot-bc { margin-block-start: auto; }
  /* ★★全幅レイアウト（bleed:full）を縦積みでも効かせる（2026-08-25 実射FB「選んでも何も変わらない」）。
     縦積みでは**器そのものは常に全幅**（ドックを端に接地させるため）なので、
     この節を入れた時点で bleed の効き先がヒーローから消えていた＝**直前の修正が持ち込んだ回帰**。
     → 縦積みでの bleed の効き先は「器の幅」ではなく**キャッチの寄せ**になる。
     ★1枚の埋め込み・埋め込み無しは従来どおり `.hero__inner` の max-width が効く（実測 1320→1905px）。 */
  body.bleed-full .has-hero-embed.embed-inflow .hero__lead {
    padding-inline-start: var(--gutter);
  }
  body.bleed-full .has-hero-embed.embed-inflow:has(:is(.embed-slot-tl, .embed-slot-ml, .embed-slot-bl)) .hero__lead {
    padding-inline: 0 var(--gutter);
  }
  /* 左側の位置＝キャッチより前に置く（DOM順は lead → slot で固定なので order で入れ替える） */
  .has-hero-embed.embed-stacked :is(.embed-slot-tl, .embed-slot-ml, .embed-slot-bl) { order: -1; }
  /* 中央（中上／中下）は横に並べられないので、キャッチの上／下に積む */
  .has-hero-embed.embed-stacked:not(.hero--framed):has(:is(.embed-slot-tc, .embed-slot-bc)),
  .hero--framed.has-hero-embed.embed-stacked:has(:is(.embed-slot-tc, .embed-slot-bc)) .hero__frame {
    flex-direction: column; align-items: center;
  }
  .has-hero-embed.embed-stacked:has(:is(.embed-slot-tc, .embed-slot-bc)) .hero__lead {
    padding-inline: var(--gutter); align-self: stretch;
  }
  .has-hero-embed.embed-stacked .embed-slot-tc { order: -1; }
  /* カードの寄せ（上／中央／下）＝伸びたスロットの中での位置。float と同じ規則を使う。
     ★`safe` は溢れたときだけ start 扱いに落とす＝はみ出しは必ず下向き（もっとも、
       この節ではヒーロー側が伸びるので溢れること自体が起きない）。
     ★ドックではスロットが中身の高さなので、この寄せは**空きが無く不発**＝面が余らない（上の align-self）。 */
  .has-hero-embed.embed-stacked :is(.embed-slot-tl, .embed-slot-tc, .embed-slot-tr) { justify-content: safe flex-start; }
  .has-hero-embed.embed-stacked :is(.embed-slot-ml, .embed-slot-mr)                 { justify-content: safe center; }
  .has-hero-embed.embed-stacked :is(.embed-slot-bl, .embed-slot-bc, .embed-slot-br) { justify-content: safe flex-end; }
  .has-hero-embed.embed-stacked .hero__embed-card { flex: 0 0 auto; }

  /* ━━ 上下2枚組（同じ列の別々の位置に1枚ずつ）＝列ごと1つの器にまとめる（2026-08-30 実射FB）━━
     実射FB「右上と右下に分けて配置するとカードが被る」。

     ★原因は**縦積みのときと同じ**＝絶対配置のスロットは互いの存在を知らない。
       右上と右下は**どちらも帯の全高を主張**し（`top: safe-top; bottom: safe-bottom`）、
       `justify-content` で反対の端へ寄るだけなので、カードの高さの合計が帯を超えたぶん
       **そのまま重なる**。実測（1400×820・浮かせ）：帯 519.1px に対しカード 357.1 + 267.2 = 624.3px
       → 不足 **105.2px**＝実測の重なり 105.2px と一致。ドック（接地）でも同じく 34.0px 重なっていた。
     ★2026-08-25 の教訓（§縦積み）がそのまま当てはまる——
       **代理指標で「入るか」を判定せず、条件そのものをレイアウトに表現させる。**
       あのときは「同じ位置に2枚」だけを在来フローへ落としたが、**同じ列に分けた2枚も同じ問題**だった。
     ★スロットを1つに**まとめない**（＝カード2枚を1スロットに寄せない）：ドックではスロット自身が「面」なので、
       まとめると上下2つの面が1つになり、「上の隅と下の隅に接地」という構成が消える。
       器を1枚かぶせるだけなら、面もフィレットもスロット側のまま無傷で残る。
     ★寄せは `space-between`＝**入るときは従来と同じ絵**（上端と下端）、入らないときはヒーローが伸びる。 */
  .has-hero-embed.embed-paired .hero__embed-col {
    position: relative; z-index: 3;
    flex: 0 0 var(--embed-w); min-width: 0;
    align-self: stretch;
    display: flex; flex-direction: column; justify-content: space-between;
    gap: clamp(24px, 4vw, 64px);
  }
  /* 器の中のスロットは絶対配置をやめる（位置は器が決める）。
     ★`position: relative` は残す＝ドックのフィレット（::before/::after）の基準。 */
  .has-hero-embed.embed-paired .hero__embed-col > .hero__embed--slot {
    position: relative; inset: auto; transform: none; width: auto;
  }
  .has-hero-embed.embed-paired .hero__embed-col > .hero__embed--slot > .hero__embed-card { flex: 0 0 auto; }
  /* 左の列はキャッチより前に置く（DOM順は lead → 器で固定なので order で入れ替える） */
  .has-hero-embed.embed-paired .embed-col-l { order: -1; }

  /* ★★在来フローへ落とすと**横の逃げだけが消える**（2026-08-30 実測）。
     縦の逃げは `--embed-safe-*` 経由で器の `padding-block` に残るが、横の逃げは
     絶対配置の `left / right: var(--embed-inset)` に載っていたので、`inset: auto` で一緒に消える。
     器の `padding-inline` は 0 でなければならない（ドックの接地）ので、**浮かせのときだけ**
     外側の辺にマージンで戻す＝絶対配置のときと同じ値・同じ見え方。
     ※ドックは `--embed-inset: 0` なので、この宣言は書いても効かない（値のほうが条件を持つ）。 */
  .embed-float.embed-inflow .embed-col-r,
  .embed-float.embed-stacked :is(.embed-slot-tr, .embed-slot-mr, .embed-slot-br) {
    margin-inline-end: var(--embed-inset);
  }
  .embed-float.embed-inflow .embed-col-l,
  .embed-float.embed-stacked :is(.embed-slot-tl, .embed-slot-ml, .embed-slot-bl) {
    margin-inline-start: var(--embed-inset);
  }
}

.hero__embed-card {
  background: #fff; color: var(--wp--preset--color--text-main);
  border-radius: var(--r-card);
  /* A：影をやわらげ＋極薄の白枠で「持ち上がり」感を抑え、写真になじませる */
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.5);
  padding: clamp(0.9rem, 2vw, 1.2rem) clamp(1rem, 2.2vw, 1.3rem);
}
/* C（オプション）：すりガラス。半透明白＋背景ぼかしで写真と一体化させる */
.embed-style-glass .hero__embed-card {
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,0.6);
}
/* ★★見出しの組み方＝2列3行のグリッド（2026-08-30 実射FB②）。
     ┌──────┬──────────┐
     │      │ 英字      │ 行1
     │ 絵   │ 名前      │ 行2 ← アイコンはこの行に置く＝**名前の文字と上下中央がそろう**
     │      │ 下線      │ 行3
     └──────┴──────────┘
   ★なぜ flex をやめたか：flex の1行だと `align-items: center` は
     **「英字＋名前＋下線」の塊の中央**にアイコンを合わせてしまい、名前の行から上へずれる。
     「どの行に合わせるか」を指定できる並べ方＝グリッドにすれば、条件を計算せずに置ける
     （高さから margin を逆算する手は、英字の有無・飾りの種類で毎回ずれる）。
   ★英字と下線は `justify-self: center`＝**名前の列の中央**にそろう。
     列の幅は「英字と名前の広いほう」なので、英字が長い院でも名前が中央に来る（両方に指定する）。
   ★列の間隔は `column-gap` ではなく**アイコンの margin** で持つ：アイコンが無いとき
     （イラスト装飾オフ）に gap だけが残って**見出し全体が右へずれる**のを防ぐ。 */
.hero__embed-title {
  margin: 0 0 0.5em; font-weight: var(--w-head, 700); font-size: 0.95rem;
  color: var(--wp--preset--color--primary); letter-spacing: 0.04em;
  display: grid; grid-template-columns: auto auto;
  justify-content: start; align-items: center;
}
/* ★★見出しの中身＝アイブロウ（英字）＋名前（2026-08-30 実射FB「一体化すると下線・英字が出ず殺風景」）。
   ★飾りは**名前だけ**に掛ける（アイコンを含む行全体に掛けない）＝左揃えなので、
     行に掛けると線がアイコンの下まで伸び、マーカーはアイコンの背面まで塗ってしまう。
   ★寸法はカードの大きさに合わせて**トークン1組**で持つ（--edeco-w / --edeco-h）。
     セクション見出し（44×3px）をそのまま持ち込むと、0.95rem の見出しに対して線が重くなる
     （「診療時間」の実測幅 ≈63px に対し 44px ＝ 70%。セクションでは 41%）。 */
.hero__embed-eyebrow {
  grid-area: 1 / 2; justify-self: center;
  font-size: 0.62rem; letter-spacing: 0.14em; line-height: 1.2;
  font-weight: var(--w-ui, 700); text-transform: uppercase;
  color: color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent);
}
.hero__embed-name { grid-area: 2 / 2; justify-self: center; }
/* 既定（軸 `heading_deco: auto`）＝短い下線。セクション見出しの `::after` と同じ役割・同じ色トークン。
   ★下線は**見出し自身の疑似要素**にする＝グリッドの項目になれるので行3に置ける。
     名前の `::after` にすると名前の箱の中に入り、アイコンの上下中央が「名前＋下線」に対して取られる。 */
.hero__embed-title { --edeco-w: 30px; --edeco-h: 2px; }
.hero__embed-title::after {
  content: ""; grid-area: 3 / 2; justify-self: center;
  width: var(--edeco-w); height: var(--edeco-h);
  background: var(--wp--preset--color--accent); border-radius: 999px;
  margin-top: 0.3em;
}
/* 見出しモチーフ（イラスト有効時のみ出力される）。小さく控えめ・トークン追従 */
/* ★アイコンは**名前の行**（行2）に置く＝見出し文字と上下中央がそろう。
   ★列の間隔はここが持つ（`column-gap` にしない）：アイコンが無い院では宣言ごと現れないので、
     見出しが gap のぶんだけ右へずれることが**構造的に起きない**。 */
.hero__embed-motif { grid-area: 2 / 1; margin-inline-end: 0.4em; display: inline-flex; flex: 0 0 auto; width: clamp(20px, 2vw, 26px); opacity: 0.85; }
.hero__embed-motif-svg { display: block; width: 100%; height: auto; }
/* お知らせの寸法は `--compact` 自身が持つ（面に依存しない＝どこに置いても同じ小さい版になる）。
   面（＝この埋め込みカード）が決めるのは余白の詰めだけ。 */
/* ★寸法の版は基底と**同じ要素**に付くので、`.news__list.news__list--compact`（0,2,0）で
   確実に勝たせる。単クラスだと基底と同着＝ファイル内の宣言順に賭けることになる。 */
.news__list.news__list--compact { margin: 0; }
.news__list.news__list--compact li { font-size: 0.82rem; }
.hero__embed .news__more { margin: 0.5em 0 0; }
.hero__embed .hours-table, .hero__embed table { font-size: 0.82rem; }
.hero__embed .hours__legend { margin: 0.6em 0 0; font-size: var(--fs-min); line-height: 1.55; }
.hero__embed .hours__temp-notice { margin-top: 0.6em; font-size: 0.75rem; }

/* ━━ 見せ方＝ドック（端に接地・一体化 / carved-in） ━━
   スロットを白パネルにし、子カードの個別の白地・影・角丸を消して1つの面に融合。
   露出する内側の角＝凸角丸／ヒーローの壁と接する継ぎ目＝凹フィレット（inverted radius）。
   半径 --dock-r：額縁は額の角丸（--frame-r）と統一、スライドショーは既定値。
   ※ コメント内に「*」と「/」を並べて書かない（コメントが早期終了し直後のルールが壊れる）。 */
@media (min-width: 901px) {
  /* 半径は「境界の丸み」＝wave 軸に追従（§--hero-edge-r）。額（--frame-r）と同じ値を読むので、
     額装では額とドックの半径が常に一致し、スライドショーでも同じ軸で動く（構成で追従先を分けない）。 */
  .has-hero-embed.embed-dock { --dock-r: var(--hero-edge-r); }

  /* ドックではスロットが1枚の「面」になるので、質感（白カード／すりガラス）は面＝スロット側に効かせる。
     すりガラスの backdrop-filter はスロットの border-radius でクリップされるため、角からはみ出さない。 */
  .embed-dock { --dock-face: #fff; }
  .embed-dock.embed-style-glass { --dock-face: rgba(255, 255, 255, 0.86); }
  .embed-dock .hero__embed--slot { background: var(--dock-face); }
  .embed-dock.embed-style-glass .hero__embed--slot {
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  /* 子カードは面に融合。地色・ぼかしはスロットが持つので、カード側は必ず解除する。
     ★ backdrop-filter を解除しないと、スロットの角丸からはみ出したカードの「四角い角」が
       背後の写真をぼかし、角に半透明のにじみが出る（実際に発生したバグ）。 */
  .embed-dock .hero__embed-card {
    background: transparent; box-shadow: none; border: none; border-radius: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* ── 継ぎ目（つなぎ目）スタイル：dock-joint-fillet / -straight / -round ──
     この軸が決めるのは**継ぎ目＝壁との接し方だけ**：
       fillet＝ヒーロー写真側が凹角丸／straight＝継ぎ目に丸みなし／round＝カード側が凸角丸で壁に寄り添う。
     ★★露出する角（どの壁にも接していない角）は継ぎ目ではないので、この軸では変えない（2026-08-17 実射FB）。
       旧実装は straight を `border-radius: 0` で作っており、**継ぎ目でない角まで直角**になっていた。
       壁が1つしかない位置（右中・左中／上段×透過のように上辺が占有される場合）では、
       写真の中に**未処理の四角い箱**が浮いて見える。角の丸めは下の「露出する角」の共通ルールが持つ。 */
  .embed-dock.dock-joint-round .hero__embed--slot { border-radius: var(--dock-r); }

  /* fillet（既定）＝ヒーロー写真側が凹角丸。継ぎ目を凹フィレット（inverted radius）で丸め、露出する角は凸角丸。
     フィレットは面と同色（--dock-face）＋mask の凹弧で切る＝すりガラスの backdrop-filter も同形にクリップ（にじみ防止）。

     ★★フィレットは「その辺がヒーローの端に接地している」ことでしか成立しない（2026-08-17）。
       上端はヘッダー（--hero-header-inset）、下端は写真へ食い込む区切り波（--embed-wave-esc）が
       占有していて、スロットは安全域ぶん端から離される。離れているのにフィレットを描くと
       **壁の無いところに凹弧が浮く**（実測：37px の「羽根」が写真の中に出たまま、その辺の角は直角で残る）。
     → 判定は占有量そのものから導出する＝同じ条件を2か所に書かない。
       安全域 0（＝接地）ならフィレット --dock-r ・角は直角（従来と1pxも変わらない）。
       安全域 0 超（＝浮いている）ならフィレット 0 ・その辺の両端を --dock-r で丸める
       （下の「接地していない辺」ブロック）。
     ★左右の辺は dock では --embed-inset が 0 なので常に接地＝ml/mr は無条件で従来どおり。
     ★フィレットの大きさは --f1-size / --f2-size で持つ（0 なら 0x0 ＝描かれない）。
       位置ごとに「どちらの疑似要素がどの壁の担当か」が違うので、消すのは辺ではなく担当のほう。 */
  .embed-dock:is(.dock-joint-fillet, .dock-joint-straight) .hero__embed--slot {
    --dock-cap-top: clamp(0px, var(--embed-safe-top, 0px) * 200, var(--dock-r));
    --dock-cap-bottom: clamp(0px, var(--embed-safe-bottom, 0px) * 200, var(--dock-r));
  }
  .embed-dock.dock-joint-fillet .hero__embed--slot {
    --f1-size: var(--dock-r);
    --f2-size: var(--dock-r);
  }
  .embed-dock.dock-joint-fillet .hero__embed--slot::before,
  .embed-dock.dock-joint-fillet .hero__embed--slot::after {
    content: ""; position: absolute;
    background: var(--dock-face);
  }
  .embed-dock.dock-joint-fillet .hero__embed--slot::before { width: var(--f1-size); height: var(--f1-size); }
  .embed-dock.dock-joint-fillet .hero__embed--slot::after  { width: var(--f2-size); height: var(--f2-size); }
  .embed-dock.dock-joint-fillet.embed-style-glass .hero__embed--slot::before,
  .embed-dock.dock-joint-fillet.embed-style-glass .hero__embed--slot::after {
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .embed-dock.dock-joint-fillet .hero__embed--slot::before {
    -webkit-mask: radial-gradient(circle var(--f1-size) at var(--f1-at), transparent var(--f1-size), #000 calc(var(--f1-size) + 0.5px));
            mask: radial-gradient(circle var(--f1-size) at var(--f1-at), transparent var(--f1-size), #000 calc(var(--f1-size) + 0.5px));
  }
  .embed-dock.dock-joint-fillet .hero__embed--slot::after {
    -webkit-mask: radial-gradient(circle var(--f2-size) at var(--f2-at), transparent var(--f2-size), #000 calc(var(--f2-size) + 0.5px));
            mask: radial-gradient(circle var(--f2-size) at var(--f2-at), transparent var(--f2-size), #000 calc(var(--f2-size) + 0.5px));
  }
  /* ── 露出する角の丸め＝「どの辺が壁か」で決まる（＝位置の性質。継ぎ目スタイルの担当ではない）──
     壁に接する角は直角（きっちり接地）／どの壁にも接していない角は --dock-r。
     fillet と straight で共有する（両者の差は継ぎ目のフィレットの有無だけ）。round だけが全周を丸める。 */
  .embed-dock:is(.dock-joint-fillet, .dock-joint-straight) .embed-slot-tl { border-bottom-right-radius: var(--dock-r); }
  .embed-dock:is(.dock-joint-fillet, .dock-joint-straight) .embed-slot-tr { border-bottom-left-radius: var(--dock-r); }
  .embed-dock:is(.dock-joint-fillet, .dock-joint-straight) .embed-slot-bl { border-top-right-radius: var(--dock-r); }
  .embed-dock:is(.dock-joint-fillet, .dock-joint-straight) .embed-slot-br { border-top-left-radius: var(--dock-r); }
  .embed-dock:is(.dock-joint-fillet, .dock-joint-straight) .embed-slot-tc { border-bottom-left-radius: var(--dock-r); border-bottom-right-radius: var(--dock-r); }
  .embed-dock:is(.dock-joint-fillet, .dock-joint-straight) .embed-slot-bc { border-top-left-radius: var(--dock-r); border-top-right-radius: var(--dock-r); }
  .embed-dock:is(.dock-joint-fillet, .dock-joint-straight) .embed-slot-ml { border-top-right-radius: var(--dock-r); border-bottom-right-radius: var(--dock-r); }
  .embed-dock:is(.dock-joint-fillet, .dock-joint-straight) .embed-slot-mr { border-top-left-radius: var(--dock-r); border-bottom-left-radius: var(--dock-r); }
  /* ── 接地していない辺：新たに露出した角だけを丸める（2026-08-17）──
     上辺＝ヘッダーが占有（透過オーバーレイの統合/2段、浮きバーは透過に関わらず常時）／
     下辺＝区切り波が写真へ食い込むぶん（--wave-h）占有。額装と不透明ヘッダーは占有 0＝この節は不発。
     ★★丸めてよいのは**接する2辺のどちらも壁でない角**だけ。隅（tl/tr/bl/br）は側辺が壁として残るので、
       占有された辺の2つの角のうち**壁側は直角のまま**にする（2026-08-17 実射FB「右上配置で上の角が
       カード側の角丸になる」＝壁側まで丸めると、カードが端から浮いて隅に写真の細い隙間が覗く）。
       中上/中下は側辺に壁が無いので両方が露出＝2つとも丸める。
     ★結果、隅は占有されると**対応する辺の中央（ml/mr）と同じ角の形**になる（位置だけが上下に寄る）。 */
  .embed-dock:is(.dock-joint-fillet, .dock-joint-straight) .embed-slot-tl { border-top-right-radius: var(--dock-cap-top); }
  .embed-dock:is(.dock-joint-fillet, .dock-joint-straight) .embed-slot-tr { border-top-left-radius: var(--dock-cap-top); }
  .embed-dock:is(.dock-joint-fillet, .dock-joint-straight) .embed-slot-tc {
    border-top-left-radius: var(--dock-cap-top);
    border-top-right-radius: var(--dock-cap-top);
  }
  .embed-dock:is(.dock-joint-fillet, .dock-joint-straight) .embed-slot-bl { border-bottom-right-radius: var(--dock-cap-bottom); }
  .embed-dock:is(.dock-joint-fillet, .dock-joint-straight) .embed-slot-br { border-bottom-left-radius: var(--dock-cap-bottom); }
  .embed-dock:is(.dock-joint-fillet, .dock-joint-straight) .embed-slot-bc {
    border-bottom-left-radius: var(--dock-cap-bottom);
    border-bottom-right-radius: var(--dock-cap-bottom);
  }

  /* ── フィレット本体（fillet のみ）＝壁との継ぎ目を凹弧で繋ぐ ──
     ★ ::before＝縦の壁（左/右）担当、::after＝横の壁（上/下）担当。オフセットは自分の大きさに揃える
       （担当の壁が接地していないと大きさが 0 になるので、オフセットも 0 に畳まれる）。
     ★ tc/bc だけは ::before/::after とも横の壁（上/下）担当＝その壁が離れると両方消える。 */
  .embed-dock.dock-joint-fillet .embed-slot-tl { --f1-at: right bottom; --f2-at: right bottom; }
  .embed-dock.dock-joint-fillet .embed-slot-tl::before { left: 0; bottom: calc(-1 * var(--f1-size)); }
  .embed-dock.dock-joint-fillet .embed-slot-tl::after  { right: calc(-1 * var(--f2-size)); top: 0; }
  .embed-dock.dock-joint-fillet .embed-slot-tr { --f1-at: left bottom; --f2-at: left bottom; }
  .embed-dock.dock-joint-fillet .embed-slot-tr::before { right: 0; bottom: calc(-1 * var(--f1-size)); }
  .embed-dock.dock-joint-fillet .embed-slot-tr::after  { left: calc(-1 * var(--f2-size)); top: 0; }
  .embed-dock.dock-joint-fillet .embed-slot-bl { --f1-at: right top; --f2-at: right top; }
  .embed-dock.dock-joint-fillet .embed-slot-bl::before { left: 0; top: calc(-1 * var(--f1-size)); }
  .embed-dock.dock-joint-fillet .embed-slot-bl::after  { right: calc(-1 * var(--f2-size)); bottom: 0; }
  .embed-dock.dock-joint-fillet .embed-slot-br { --f1-at: left top; --f2-at: left top; }
  .embed-dock.dock-joint-fillet .embed-slot-br::before { right: 0; top: calc(-1 * var(--f1-size)); }
  .embed-dock.dock-joint-fillet .embed-slot-br::after  { left: calc(-1 * var(--f2-size)); bottom: 0; }
  .embed-dock.dock-joint-fillet .embed-slot-tc { --f1-at: left bottom; --f2-at: right bottom; }
  .embed-dock.dock-joint-fillet .embed-slot-tc::before { left: calc(-1 * var(--f1-size)); top: 0; }
  .embed-dock.dock-joint-fillet .embed-slot-tc::after  { right: calc(-1 * var(--f2-size)); top: 0; }
  .embed-dock.dock-joint-fillet .embed-slot-bc { --f1-at: left top; --f2-at: right top; }
  .embed-dock.dock-joint-fillet .embed-slot-bc::before { left: calc(-1 * var(--f1-size)); bottom: 0; }
  .embed-dock.dock-joint-fillet .embed-slot-bc::after  { right: calc(-1 * var(--f2-size)); bottom: 0; }
  .embed-dock.dock-joint-fillet .embed-slot-ml { --f1-at: right top; --f2-at: right bottom; }
  .embed-dock.dock-joint-fillet .embed-slot-ml::before { left: 0; top: calc(-1 * var(--f1-size)); }
  .embed-dock.dock-joint-fillet .embed-slot-ml::after  { left: 0; bottom: calc(-1 * var(--f2-size)); }
  .embed-dock.dock-joint-fillet .embed-slot-mr { --f1-at: left top; --f2-at: left bottom; }
  .embed-dock.dock-joint-fillet .embed-slot-mr::before { right: 0; top: calc(-1 * var(--f1-size)); }
  .embed-dock.dock-joint-fillet .embed-slot-mr::after  { right: 0; bottom: calc(-1 * var(--f2-size)); }
  /* 接地していない辺のフィレットは消す（大きさ 0 ＝描かれない）。角丸は上の共通ルールが付ける。 */
  .embed-dock.dock-joint-fillet :is(.embed-slot-tl, .embed-slot-tc, .embed-slot-tr) { --f2-size: calc(var(--dock-r) - var(--dock-cap-top)); }
  .embed-dock.dock-joint-fillet .embed-slot-tc { --f1-size: calc(var(--dock-r) - var(--dock-cap-top)); }
  .embed-dock.dock-joint-fillet :is(.embed-slot-bl, .embed-slot-bc, .embed-slot-br) { --f2-size: calc(var(--dock-r) - var(--dock-cap-bottom)); }
  .embed-dock.dock-joint-fillet .embed-slot-bc { --f1-size: calc(var(--dock-r) - var(--dock-cap-bottom)); }

  /* ━━ 額装×ドック：額の overflow クリップからカードを外す（クリップ縁のにじみ対策） ━━
     frame の overflow:hidden で白カードを額の角丸にクリップすると、クリップ縁のアンチエイリアス画素に
     カードの下へ敷かれた写真＋暗幕（hero__bg/hero__overlay は inset:0 で隅まで届く）が混ざり、
     カードの端に灰色の弧（枠線/影のような線）が出る（左下スロットで実際に発生。box-shadow を消しても残る）。
     → ドック時は frame を overflow:visible にし、写真・暗幕は自分自身の border-radius でクリップ。
       カードが接地する外側の隅はスロット自身の角丸（--frame-r）でシルエットを維持＝白1層の単一AAでにじみ無し。 */
  .section-hero.hero--framed.embed-dock .hero__frame { overflow: visible; }
  .section-hero.hero--framed.embed-dock .hero__frame :is(.hero__bg, .hero__overlay) {
    border-radius: var(--frame-r);
    overflow: hidden;
  }
  /* ★ カードが接地した隅では、写真・暗幕の角丸をスロットの角丸より大きくし、写真の縁の弧を
     カードの不透明部の下へ完全に隠す。同半径のままだと写真の縁のAAとカードの縁のAAが同座標で重なり、
     カードの端に灰色の弧が透ける（影撤去・クリップ移譲後も残った本当の原因）。
     その隅の写真はカードに覆われて見えないため、半径を大きくしても見た目は変わらない。
     :has() 非対応の古いブラウザでは同半径のまま＝ごく薄い弧が出るだけで機能は損なわれない。 */
  .section-hero.hero--framed.embed-dock:has(.embed-slot-tl) .hero__frame :is(.hero__bg, .hero__overlay) { border-top-left-radius: calc(var(--frame-r) + 16px); }
  .section-hero.hero--framed.embed-dock:has(.embed-slot-tr) .hero__frame :is(.hero__bg, .hero__overlay) { border-top-right-radius: calc(var(--frame-r) + 16px); }
  .section-hero.hero--framed.embed-dock:has(.embed-slot-bl) .hero__frame :is(.hero__bg, .hero__overlay) { border-bottom-left-radius: calc(var(--frame-r) + 16px); }
  .section-hero.hero--framed.embed-dock:has(.embed-slot-br) .hero__frame :is(.hero__bg, .hero__overlay) { border-bottom-right-radius: calc(var(--frame-r) + 16px); }
  /* 外側シルエット：隅スロットの露出外角を額の角丸に合わせる（継ぎ目スタイルに関わらず。
     4クラスで dock-joint-straight/round の border-radius 指定より高詳細度＝外角だけ常に額に追従） */
  .section-hero.hero--framed.embed-dock .embed-slot-tl { border-top-left-radius: var(--frame-r); }
  .section-hero.hero--framed.embed-dock .embed-slot-tr { border-top-right-radius: var(--frame-r); }
  .section-hero.hero--framed.embed-dock .embed-slot-bl { border-bottom-left-radius: var(--frame-r); }
  .section-hero.hero--framed.embed-dock .embed-slot-br { border-bottom-right-radius: var(--frame-r); }
}

/* 見出しの向き＝左・縦書き（head=side）：カードを「縦書き見出し｜横長本文」の横並びに。
   位置・見せ方に関わらず適用。縦書きはPC幅のみ（モバイルは上部・横書きにフォールバック）。 */
@media (min-width: 901px) {
  .embed-head-side .hero__embed-card {
    display: flex; flex-direction: row; align-items: stretch;
    gap: clamp(0.8rem, 1.6vw, 1.2rem);
  }
  /* ★★★縦書きでも**グリッドのまま**にする（2026-08-30 実射FB②「縦書きのときは英字を文字の上ではなく右に」）。
     旧実装は `display: flex` に切り替えていたので、英字・名前が**行内の流れ（縦）**に並び、
     英字が名前の**上**に出ていた。
     ★グリッドの行・列は**書字方向に従う論理軸**なので、`writing-mode: vertical-rl` にすると
       「行＝右→左」「列＝上→下」へ**自動で写像される**：
         行1（英字）＝いちばん右 ／ 行2（名前）＝その左 ／ 列1（絵）＝上、列2＝下
       ＝横書きで「名前の上」に置いた英字が、縦書きでは**名前の右**に来る。同じ1つの宣言で両方が成立する。
     ★＝**書字方向ごとに並べ方を書き分けない**。分けると、片方を直したときにもう片方が置き去りになる
       （§同じ条件を2か所に書くと必ずズレる）。 */
  .embed-head-side .hero__embed-card .hero__embed-title {
    writing-mode: vertical-rl; margin: 0; padding-right: 0.7rem;
    border-right: 1px solid var(--rule);
    align-items: center; letter-spacing: 0.18em;
  }
  .embed-head-side .hero__embed-card .hero__embed-body { min-width: 0; }
  /* 縦書き見出しは横幅を食うのでスロットを内容幅にフィット（狭すぎ・広すぎの両方を回避）。上限で暴走を防ぐ */
  .embed-head-side .hero__embed--slot { width: fit-content; max-width: var(--embed-w-side); }
  /* ★★在来フロー（縦積み・上下2枚組）では `flex-basis` が `width` に優先するので、
     上の `fit-content` が**効かなくなっていた**＝見出し帯の 59px がまるごと本文（表）の
     取り分から引かれ、表が折り返す。基準幅を捨てて内容幅で決めさせる（上限は max-width が持つ）。
     ＝「縦書きは横幅を食うので内容幅に合わせる」という元の意図を、在来フローでも成立させる。 */
  .embed-head-side.embed-inflow .hero__embed--slot,
  .embed-head-side.embed-inflow .hero__embed-col { flex-basis: auto; }
}

/* ━━ ヒーロー（全幅・骨格／色はキットで上書き） ━━ */
/* 高さ（2026-07-26 引き上げ）：min(clamp(460px, 76vh, 760px), 88svh)。
   旧 clamp(380px,56vh,560px) は上限 560px で頭打ちになるため、画面が広いほど横長化し
   1920px 幅では 3.4:1 の「帯」になっていた（1440×900 の実測でも 2.83:1）。
   全幅写真は5変種の中で最も高さが要るのに、collage(460/68vh/720) や framed(520/90vh/800) より
   低いという逆転が起きていた ＝ 上限・vh とも引き上げて collage と framed の間に収める。
   ★min-height はここが単一の真実源（キットCSSに二重に持たない）。
     旧実装は normal/trust/elegant/pop の4キットが同一値を宣言しており、キットは base.css の
     後読み・同詳細度で勝つため「base.css を直しても soft 以外は動かない」状態だった
     （ヘッダーCTA・軸D-1 で踏んだのと同型。キットには色・書体・装飾だけを置く）。
   ★モバイル専用の上書き（旧・各キットの `@media (max-width:640px){ min-height:70vh }`）も撤去：
     76vh は 70vh より常に大きいので、残すと狭幅でだけ高さが下がる逆補正になる。
     縦の短い画面は下限 460px（collage と同値）が受け止める。
   ★★上限 88svh ＝「ヒーローは画面を超えない」ガード（2026-07-26 追加）：
     下限 460px は縦の短い画面（横向きスマホ・vh<605）で効くが、そこでは 460px が
     ビューポート（375px 等）を上回り、ファーストビューがヒーローだけで埋まる。
     min() で 88svh を掛けると、下限が効く領域だけ「画面の 88%」に抑えられ、
     残り 12% に次セクションの頭が覗く＝スクロールできることが伝わる。
     ・噛むのは 88svh < 460px すなわち vh < 523px のときだけ（通常の画面では clamp が勝つ）。
     ・単位は vh ではなく svh（small viewport＝ブラウザのURLバーが出ている状態の高さ）。
       ガードは「最も狭いときでも超えない」ことが目的なので保守的な svh が正しく、かつ
       svh はスクロール中に変化しない（dvh はURLバーの出入りで値が動きヒーローの高さが揺れる）。
     ・★2行に分けて書くこと＝svh 非対応ブラウザでは min() ごと無効値になり、
       1行だけだと min-height が丸ごと消えて高さゼロのヒーローになる。
       先に素の clamp を宣言しておけば、非対応環境は 1行目のまま（従来の挙動）で残る。 */
/* ━━ --hero-header-inset ＝「透過オーバーレイでヘッダーがヒーローから食う高さ」（2026-07-28）━━
   ★★透過オーバーレイでは、ヘッダーがヒーローの上に乗るぶんヒーローの実効的な高さが減る。
     ところが min-height は不透明のときと同じ値のままだった＝**透過にすると写真が縦に狭くなる**。
     実測（1440×900・統合）＝ヒーロー 684px は両者同じだが、透過では margin-top:-84px で
     ヘッダーの下に潜るため、写真として見える高さは 684 → 600px に減っていた。
   ★これは埋め込みカードが上へはみ出す原因でもある（下の §埋め込みの安全域 参照）＝
     「ヒーローが縦に狭い」と「カードがヘッダーに被る」は同じ1つの欠陥。
   ★値の宣言は透過オーバーレイ・スキンの側（§ヘッダー：透過オーバーレイ／§透過×形状）に置く
     ＝「奪う側」と「返す側」を隣に並べる。ここは既定 0（不透明ヘッダー＝ヒーローはヘッダーの下から始まる）。
   ★額装（framed）は has-hero-photo/light が付かず引き上げも起きないので常に 0＝無影響。 */
.section-hero { --hero-header-inset: 0px; }

.section-hero.hero--photo,
.section-hero.hero--color {
  position: relative; overflow: hidden;
  /* 「写真として見える高さ」＋「ヘッダーが乗るぶん」＝透過でも不透明と同じ見え高さになる。
     ★2行に分ける理由は上記（svh 非対応環境のフォールバック）。calc() の中で維持する。 */
  min-height: calc(clamp(460px, 76vh, 760px) + var(--hero-header-inset, 0px));
  min-height: calc(min(clamp(460px, 76vh, 760px), 88svh) + var(--hero-header-inset, 0px));
  display: flex; align-items: center;
  background: none;
}

/* ━━ 軸：ヒーロー写真の動き（hero_motion・body.heromotion-*／2026-07-26） ━━
   参照サイトに多い「写真が徐々にアップされる」演出（ケンバーンズ）。
   対象は写真スライド `.hero__slide` を持つ構成＝slideshow / framed / **card**
   （★2026-08-31 に card を追加。カードが共通のスライド組み立てを通るようになったので、
     **このCSSは1行も変えずに効くようになった**——役割（`.hero__img`）で書いてあったため。
     構成名で分岐していたら、ここへ足しに来る必要があった）。
   collage は独自の `.hero__collage-photo`、illust は写真なしなので、このCSSが不発になる
   ＝軸のゲートは要らない（hero_deco が `.hero--framed` 限定で不発になるのと同じ方式）。
   ★到達点（scale の終値）を「静止時の base」に置くこと：スライドショーでは JS が
     `is-active` を外した瞬間にアニメーションが消えるため、base が scale(1) だと
     フェードアウト中の写真が一気に縮む「戻り」が見える。base＝終値なら差分ゼロで繋がる。
   ★持ち時間（--hero-motion-dur）は main.js `initHeroSlideshow()` の切替間隔と一致させる：
     一致していれば「終端に達した瞬間に切り替わる」ので、上の戻りが原理的に発生しない。
     ズレると露出時間の途中で寄りが止まって死んだ絵に見える／終端前に切り替わって戻りが出る。
     ＝tests/test-presets.php が JS の 5000ms と この 5s の一致を検査している。
   ★写真1枚（スライドショーOFF）は `.is-active` の付け外しが起きないので、
     `.hero__slide` 全体にゆっくり1回（24s）掛ける（複数枚を積んで最後の1枚が見えている
     ケースでも、8% 拡大のまま静止＝黙って切り抜かれる状態にならない）。

   ━━ ★★かくつき・上下の揺れの対策（2026-07-26 実射FB「かくついて上下に揺れながら寄る」）━━
   症状＝寄っている最中に写真が1pxずつ上下に飛び、動きが階段状になる。
   原因は「アニメーションが GPU の合成レイヤーに乗らず、毎フレーム CPU で再描画されている」こと。
   `background: center/cover` の要素を scale すると、再描画のたびに背景の描画位置が
   整数ピクセルへ丸められるため、拡大につれて丸め先が行き来して上下の揺れになる。
   対策は3つとも「合成レイヤーに乗せる」ための指定：
     ① ★★keyframes の中で `var()` を使わない＝合成の可否を分ける最大の要因。
        keyframes の値に custom property が入るとブラウザはフレームごとに
        メインスレッドで値を解決する必要があり、コンポジタへ渡せない（＝CPU描画に落ちる）。
        → 拡大率は keyframes と base の両方に**リテラルで直書き**する。
        2箇所に分かれるので、tests/test-presets.php が **両者の一致**を検査している
        （JSの切替間隔とCSSの持ち時間を突き合わせているのと同じ方式）。
        ※ `animation-duration` の `var()` は1回しか解決されないので合成を妨げない＝トークンのまま。
     ② ★`will-change: transform` … **これが昇格の本命**。ラスタライズを1回で済ませ、
        以降の拡大を GPU に任せる（＝整数丸めによる揺れが起きない）。
     ③ `translateZ(0)` を transform に含める … 古い Safari 向けの保険。
        ※ z=0 なので computed 値は 2D の `matrix()` に平坦化される（実測）＝これ自体で
          3D レイヤーが保証されるわけではない。昇格の根拠は②であり、③は上乗せ。
        ★base と keyframes で **transform の関数リストを完全に一致**させること（順序も）。
        違うリストどうしは補間の解釈が変わり、また「終端＝base」が崩れて戻りが出る。
     ④ `backface-visibility: hidden` … Safari で合成レイヤーのちらつきを抑える保険。 */
body.heromotion-zoom-in {
  --hero-motion-dur: 5s;         /* ★ main.js initHeroSlideshow() の 5000ms と一致させる */
  --hero-motion-dur-single: 24s; /* 写真1枚のときのゆっくり1回 */
}
/* ★★寄りの対象は `.hero__slide`（枠）ではなく **`.hero__img`（写真そのもの）**（2026-07-26 の <img> 化）。
   `<img>` の transform は Firefox でも合成レイヤーに乗りやすく、上の①〜④と合わせて揺れ対策になる。
   枠側（.hero__slide）は `overflow: hidden` で拡大した写真をクリップする役に回る。
   静止時の base＝アニメーションの終値（戻り防止）。★keyframes の to と完全一致させること。 */
body.heromotion-zoom-in .hero__img {
  transform: scale(1.08) translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
body.heromotion-zoom-in .section-hero[data-slideshow] .hero__slide.is-active .hero__img {
  animation: clinic-hero-zoom var(--hero-motion-dur) linear forwards;
}
body.heromotion-zoom-in .section-hero:not([data-slideshow]) .hero__img {
  animation: clinic-hero-zoom var(--hero-motion-dur-single) linear forwards;
}
/* ★var() を使わない（①）／★base と同じ関数リスト（③） */
@keyframes clinic-hero-zoom {
  from { transform: scale(1) translateZ(0); }
  to   { transform: scale(1.08) translateZ(0); }
}
/* ★動きを減らす設定では静止させる（transform も戻す＝8%拡大のまま固定にしない）。
   合成レイヤーを維持する意味も無くなるので will-change も解除する。
   フォトバンド・見出しの流れる透かしと同じ扱い。 */
@media (prefers-reduced-motion: reduce) {
  body.heromotion-zoom-in .hero__img,
  body.heromotion-zoom-in .section-hero[data-slideshow] .hero__slide.is-active .hero__img,
  body.heromotion-zoom-in .section-hero:not([data-slideshow]) .hero__img {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

/* ━━ ヒーローの写真レイヤー（.hero__bg / .hero__slide / .hero__img）━━
   ★★構造は base.css が単一の真実源（2026-07-26）。旧実装は `.hero__bg` / `.hero__slide` の
     宣言が**5キットに同一値で散っていた**（キットは base.css の後読み・同詳細度で勝つため
     base.css を直しても効かない＝ヒーロー高さ・ヘッダーCTA・軸D-1・暗幕 と同型でこれが5回目）。
   ★`background-image` → `<img srcset>` へ変更（`patterns/hero.php` の `clinic_hero_slides_html()`）。
     理由は①解像度の出し分け ②Firefox のケンバーンズ揺れ ③LCP の優先取得（詳細は同関数のコメント）。
   ★**役割分担**：`.hero__slide` ＝クロスフェードの単位（main.js が is-active を付け替える）／
     `.hero__img` ＝写真そのもの（`object-fit: cover` で枠を満たし、**寄りの transform はこちら**）。 */
.hero__bg { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1s ease;
  overflow: hidden;   /* 寄りで拡大した img をスライドの矩形でクリップする */
}
.hero__slide.is-active { opacity: 1; }
/* ★切替OFF のときは積んだ全枚を出したままにする（最後の1枚が見えている状態）。
   ★★2026-08-31：`.hero--photo` の限定を外した——カードも共通のスライドを持つようになったため。
     変種名を条件に書くと、構成が1つ増えるたびにここへ足しに来ることになる
     （寄りの CSS が `.hero__img` だけを見ているのと同じ方針＝**役割で書く**）。
     collage は独自の `.hero__collage-photo`／色ヒーローは写真が無いので、この宣言は不発になる。 */
.section-hero:not([data-slideshow]) .hero__slide { opacity: 1; }
/* ★<picture> は「スマホ用の写真」があるときだけ挟まる（patterns/hero.php）。
   display:contents で**箱を増やさない**＝img は今までどおり .hero__slide の直接の子として
   100%×100% で敷かれ、ケンバーンズ（.hero__img の transform）もそのまま効く。 */
.hero__pic { display: contents; }
.hero__img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  /* ★注目点（写真ごと・9分割）＝切り取りで何を残すか。既定は中央で従来と同じ。
     スマホは枠が縦長で横長写真の4〜5割しか映らないため（PC 97%）、
     入口や人物が端に寄っている写真は「スマホでだけ主題が切れる」。値は
     patterns/hero.php が `--hero-focal` で渡す（CSSは選択肢を持たない）。 */
  object-position: var(--hero-focal, center);
}

/* ━━ ヒーローの暗幕 `.hero__overlay`＝キャッチ位置に追従する方向グラデ（2026-07-26） ━━
   写真の上の白文字を読ませるための暗幕。軸ではなく全キット共通の質の底上げ。

   ★★実射FB①「ヒーロー画像がくすんで見栄えが悪い」→ 旧実装は**5キットがそれぞれ全面ベタ覆いの
   グラデを宣言**（elegant `rgba(48,40,26,.44→.34)`／normal `.46→.38`／trust `.5→.42`／
   pop `.42→.32`。**soft だけが 100deg の方向グラデで左だけ濃く**していた）。

   ★★実射FB②「暗幕が濃すぎかつ輪っかのようになってすごく汚く見える」＝**間に入れた
   radial（楕円）＋ plateau（同じ濃さの平坦部）の失敗**。plateau は「濃度の変化率が 0 の領域」
   なので、その終端で変化率が急に立ち上がり、**楕円の境界がマッハバンドとして『輪』に見える**。
   alpha 0.70 という濃さも重なって、写真の上に茶色の塊が浮く状態になった。
     ★★**教訓：コントラスト比の数値に最適化すると見た目を壊す。暗幕は「面として認識されない」
       ことが第一要件で、可読性はその制約の下で最大化するもの。**
     ★★**教訓：グラデーションに「平坦部」を作らない**——人の目は濃度そのものより
       **濃度の変化率の不連続**に敏感で、平坦部→降下の切り替わりは必ず線として見える。

   → **soft が元々持っていた方向グラデのプロファイル（100deg・.62/.34/.06）を全キットに一般化する**。
   これは「実際に見て問題なかった実績のある形」で、直線の帯なので輪・塊にならない。
   ★**linear は垂直方向に減衰しない**ので、catch_v（上/中/下）で文字が上下に動いても濃さが変わらない
     ＝radial で苦労した「ブロックの遠い端（サブ本文）が中心から外れる」問題が**構造的に消える**
     （位置トークンも x/y の2つから向き1つに減った）。
   ★**中央寄せだけは縦方向のグラデに切り替える**：左右のいずれにも寄っていないので水平方向では
     濃い側を決められない。上寄せ/中央＝上が濃い（180deg）、下寄せ＝下が濃い（0deg）。
   ★**構造（形・濃度・向き）も色も base.css の1か所が持つ**＝色の口は `--hero-scrim` の RGB 3値だけ。
     ※旧実装はここだけキットCSSに開けていた：キットは base.css の後読み・同詳細度で勝つため
     **base.css を直しても効かない**が4回再発した（ヒーロー高さ・ヘッダーCTA・軸D-1 と同型）。
     ＝**キット廃止（2026-07-29）の直接の理由**なので、色を別ファイルに開け直さないこと。
   ★**可読性の二段目は文字側のハロー（text-shadow）に持たせる**（下の .hero--photo .hero__catch 参照）。
     ハローは**glyph のまわりだけを暗くする**ので、写真全体の発色を一切犠牲にしない。
     広い面で稼ぐよりもこちらで稼ぐほうが、見た目のコストが圧倒的に安い。 */
/* ★濃度の現行値（2026-07-26・依頼により決定）＝**写真の見え方を優先した軽い暗幕**。
   soft の旧プロファイル（.62/.34/.06）でも「濃すぎる」との判断で、この段階の着地として
   .30/.20/.06 を採用。文字の可読性は暗幕ではなく**文字側のハロー（text-shadow 3層）**が担う。
   ※ コントラストの数値は下がる（下の「可読性の担保」参照）。濃度を軸として選べるようにするかは別途検討。 */
.section-hero {
  --scrim-a: 0.3;        /* 文字側の端 */
  --scrim-mid: 0.2;      /* 45% 地点。a→mid→floor をなだらかに下げて不連続を作らない */
  --scrim-floor: 0.06;   /* 文字から遠い側＝ほぼ素通しにして写真の発色を残す */
  --scrim-angle: 100deg; /* 既定は catch-h-left 相当（hero.php が常にクラスを出すので保険） */
}
/* キャッチ位置 → 暗幕の向き（同じ要素なので後勝ちで上書きされる）。
   ★linear は**垂直方向に減衰しない**ので、catch_v（上/中/下）で文字が上下に動いても濃さが変わらない
     ＝radial で苦労した「ブロックの遠い端（サブ本文）が中心から外れる」問題が構造的に消える
     （位置トークンも x/y の2つから向き1つに減った）。 */
.section-hero.catch-h-left  { --scrim-angle: 100deg; }  /* 左が濃い */
.section-hero.catch-h-right { --scrim-angle: 260deg; }  /* 右が濃い（ミラー） */
/* ★中央寄せは左右で向きを決められないので縦方向にする */
.section-hero.catch-h-center { --scrim-angle: 180deg; }              /* 上が濃い */
.section-hero.catch-h-center.catch-v-bottom { --scrim-angle: 0deg; } /* 下寄せは下が濃い */
.hero__overlay {
  position: absolute; inset: 0;
  --hero-scrim: 0 0 0;   /* 暗幕の色。★キット廃止（2026-07-29）以降は**誰も上書きしていない**＝実質ハードコードの黒。
                            ★トーンを可変にする（例：パレット追従）ときは、この宣言を**親側（body）へ移してから**にすること——
                            消費する要素に置いたままだと自身の宣言が継承に勝ち、body のクラスが効かない（上の罠と同型）。 */
  /* ★平坦部（plateau）を作らない＝1本のなだらかな傾斜だけにする（上の教訓）。
     var() の第2引数は .section-hero の宣言値と揃えること（テストで一致を縛っている）。 */
  background:
    linear-gradient(var(--scrim-angle, 100deg),
      rgb(var(--hero-scrim) / var(--scrim-a, 0.3))      0%,
      rgb(var(--hero-scrim) / var(--scrim-mid, 0.2))    45%,
      rgb(var(--hero-scrim) / var(--scrim-floor, 0.06)) 100%);
}
/* ★★2026-10-18 再検証：PC・タブレット（768px 以上）の左右寄せは**文字の範囲で濃さを保ち、その先で早めに抜く**。
   実測（写真12枚×写真ヒーローの全テンプレ×1280〜1920px）：キャッチは画面の左から**約40%まで**に収まるのに、
   上の3ストップは画面の右端まで一定の傾きで暗くしていた（文字の無い右半分にも 0.06〜0.2）。
   → 端の濃さ（--scrim-a）は同じまま、濃さを a·exp(-(t/0.55)³) の形に配り直す。
     文字の下の明暗比（下位10%）は **+5〜15%**、写真全体の暗さ（暗幕の平均）は **−18%**（0.263→0.216）＝両得。
     比較画像から依頼で採用。
   ★形の約束は守る：linear 1枚・radial なし・**平坦部なし**（濃さは全ストップで単調に下がり、傾きも
     なめらかに変わる＝ストップは関数の16等分の標本。手で丸めた値を足さないこと）。
   ★**スマホ（〜767px）には当てない**：文字が横幅の8割に広がるので、右側を早く抜くと文字の右半分が沈む
     （実測 2.25→1.77）。スマホと中央寄せの弱さは、同じ暗さで配り直しても上がらず、効く案は写真全体を
     暗くする＝「全体を暗くしない」の方針で据え置き（docs/variant-catalog.md §暗幕の再検証）。
   ★中央寄せも当てない：文字が中ほどにあり、上から早く抜くとサブコピーが沈む。
   ★`@supports`：rgb() の濃さに calc() を書けないブラウザでは、var() の置換後に宣言ごと無効になり
     **暗幕が消える**。そこでは上の3ストップのまま残す。 */
@supports (color: rgb(0 0 0 / calc(0.5 * 0.5))) {
  @media (min-width: 768px) {
    .section-hero:is(.catch-h-left, .catch-h-right) .hero__overlay {
      background:
        linear-gradient(var(--scrim-angle, 100deg),
          rgb(var(--hero-scrim) / var(--scrim-a, 0.3))                    0%,
          rgb(var(--hero-scrim) / calc(var(--scrim-a, 0.3) * 0.9985))     6.25%,
          rgb(var(--hero-scrim) / calc(var(--scrim-a, 0.3) * 0.9883))    12.5%,
          rgb(var(--hero-scrim) / calc(var(--scrim-a, 0.3) * 0.9612))    18.75%,
          rgb(var(--hero-scrim) / calc(var(--scrim-a, 0.3) * 0.9104))    25%,
          rgb(var(--hero-scrim) / calc(var(--scrim-a, 0.3) * 0.8324))    31.25%,
          rgb(var(--hero-scrim) / calc(var(--scrim-a, 0.3) * 0.7284))    37.5%,
          rgb(var(--hero-scrim) / calc(var(--scrim-a, 0.3) * 0.6045))    43.75%,
          rgb(var(--hero-scrim) / calc(var(--scrim-a, 0.3) * 0.4717))    50%,
          rgb(var(--hero-scrim) / calc(var(--scrim-a, 0.3) * 0.3431))    56.25%,
          rgb(var(--hero-scrim) / calc(var(--scrim-a, 0.3) * 0.2305))    62.5%,
          rgb(var(--hero-scrim) / calc(var(--scrim-a, 0.3) * 0.1418))    68.75%,
          rgb(var(--hero-scrim) / calc(var(--scrim-a, 0.3) * 0.0792))    75%,
          rgb(var(--hero-scrim) / calc(var(--scrim-a, 0.3) * 0.0398))    81.25%,
          rgb(var(--hero-scrim) / calc(var(--scrim-a, 0.3) * 0.0178))    87.5%,
          rgb(var(--hero-scrim) / calc(var(--scrim-a, 0.3) * 0.0071))    93.75%,
          rgb(var(--hero-scrim) / calc(var(--scrim-a, 0.3) * 0.0025))   100%);
    }
  }
}

/* framed（額装／インセット）：全幅の「マット地」の上に、コンテンツ幅の角丸カード（.hero__frame）を1枚だけ浮かせる。
   ・マット＝ページの soft バンドと同じ地色（bg-soft）→ 白地に浮かず、上下のセクションと地続きに馴染む。
   ・カード（.hero__frame）＝ max-width で内側に収め、落ち影で額のように持ち上げる（写真/色どちらも同じ骨格）。
   ・ヘッダー形状に依存しない：body.hero-framed で透過/フローティングの「重ね上げ（負マージン）」を無効化し、
     どの形状でもソリッド帯として額の上に載る（inc/kit-switch.php で has-hero-photo/light を付けない）。
   compound セレクタ（.hero--framed.hero--photo/.hero--color）でキットの .hero--color / mobile min-height に確実に勝つ。 */
/* 額縁のマット色トークン（軸 frame_mat・body.framemat-*）：額の外側マット＋統一フィールドの
   ヘッダー地が参照する。既定は soft バンドと同じ淡色。white で外側もヘッダーも白に抜ける。
   body に置くことで framed セクション（下）とヘッダー（統一フィールド）の両方が同じ色を参照する。 */
body { --frame-mat: var(--wp--preset--color--bg-soft); }
body.framemat-white { --frame-mat: #fff; }
/* 額の最大幅トークン：額（.hero__frame）と、額の列に揃えるヘッダー（下の §額の列）が同じ値を読む。
   横のマットはページのガター（--gutter）そのもの＝ヘッダーバーの左右余白と同じ値なので、
   「額の最大幅 ＋ ガター×2」がヘッダーの上限になる（2026-10-17）。 */
body { --frame-max: 1650px; }
.section-hero.hero--framed,
.section-hero.hero--framed.hero--photo,
.section-hero.hero--framed.hero--color {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--frame-mat);
  margin: 0;
  /* 上＝ヘッダーとの間（約14px・ビューポート追従）。左右＝額の横マット、下＝次セクションへの間。
     ※ ヘッダーとの実際の隙間は「ヘッダーバーの下padding ＋ ここの上padding」の合計。空きすぎないよう両方を詰めてある。 */
  padding: clamp(8px, 1vw, 14px) var(--gutter) clamp(1.5rem, 4.5vw, 4rem);
  min-height: 0;          /* マット自体は高さを持たず、中のカードが高さを決める（上の clamp を無効化） */
  border-radius: 0;
  overflow: visible;      /* 額の落ち影を見せる */
}
/* ━━ ヒーローの「境界の丸み」--hero-edge-r（2026-08-17）━━
   丸みの担当は2層ある：**部品＝形の軸（--r-card / --r-btn …）／境界＝wave 軸（区切り・角の形）**。
   ヒーローの端の造形（額 --frame-r ／ ドック --dock-r）は後者で、パネル(--panel-r)と同じ思想。
   ★★以前はこのトークンが `.hero--framed` に閉じており、**額装のドックだけが wave に追従し、
     スライドショーのドックは `clamp(20px,2.6vw,40px)`（＝下の既定値のベタ書き）で固定**されていた。
     同じ「ドック」なのにヒーロー構成で追従先が違う＝2026-08-12 の「同じ役割の実装が形状ごとに分かれていると、
     自前指定を持たないほうが黙って取り残される」と同型。→ `.section-hero` へ出して両方が同じ値を読む。
   ★★形の軸（--r-card）に追従させてはいけない：`shape: sharp` は 0px なので --dock-r が 0 になり、
     フィレットが 0x0 ＝**継ぎ目の軸（ヒーロー側が角丸／ストレート／カード側が角丸）の3値が全部同じ見た目**になる。
     wave: none なら 6〜12px と小さいながら残るので、どの値でも軸が生きる。
   ※ 額は巨大要素・ドックは小さめなので、パネルほど極端(corner=160px)にはせず額に合う中庸スケール。 */
/* ★★★2026-08-24：追従先を `wave`（区切りの軸）から **`shape`（形の軸）** へ移した。
   丸みの担当は形の軸に一本化する——パネル(--panel-r)と同じ理由（上の §--panel-r 参照）。
   ★**`--r-card` をそのまま読むのではなく、専用の段を持つ**のは下の理由がそのまま生きるため：
     `--r-card` は `shape: sharp` で 0px になり、--dock-r が 0 ＝フィレットが 0x0 になって
     **継ぎ目の軸（ヒーロー側が角丸／ストレート／カード側が角丸）が死ぬ**。
     ここでは sharp でも 6〜12px を残すので、どの値でも継ぎ目の軸が生きる。 */
.section-hero { --hero-edge-r: clamp(20px, 2.6vw, 40px); }                    /* 既定＝やわらか相当 */
body.shape-sharp    .section-hero { --hero-edge-r: clamp(6px, 1vw, 12px); }   /* かっちり＝控えめ（0にはしない） */
body.shape-standard .section-hero { --hero-edge-r: clamp(14px, 2vw, 26px); }  /* 標準 */
body.shape-soft     .section-hero { --hero-edge-r: clamp(20px, 2.6vw, 40px); }/* やわらか */
body.shape-pop      .section-hero { --hero-edge-r: clamp(44px, 5vw, 80px); }  /* ポップ＝特大 */
/* 額縁の角丸トークン --frame-r：額（.hero__frame）とドック（--dock-r）が同じ境界の丸みを読む＝常に一致する。 */
.section-hero.hero--framed { --frame-r: var(--hero-edge-r); }
.section-hero.hero--framed .hero__frame {
  position: relative;
  width: 100%;
  max-width: min(var(--frame-max), 100%);
  /* 大きめの額（デスクトップで約 800px）。短い画面では 90vh まで縮み、極端に低い画面は 520px 下限。
     この縦の高さがドック（クスノセ風＝キャッチ上／診療時間カード左下）の2段レイアウトの余地になる。 */
  min-height: clamp(520px, 90vh, 800px);
  display: flex;
  align-items: center;
  border-radius: var(--frame-r);
  overflow: hidden;       /* 写真・オーバーレイを角丸にクリップ */
  /* ★ 額に落ち影は付けない（マット色に関わらず）。理由は2つ：
     ・白マットでは、細いマット（横約40/下約64px）の上で影が灰色のにじみになり、
       影のない埋め込みカード(#fff)と比べて白がくすんで見える。
     ・ドック時はカードが額の縁にピタリ接地するため、額の「外側」に描かれる影が
       そのまま『カードの端の黒い枠線＋影』として露出する（左下スロットで実際に発生）。
     額は写真の角丸だけで成立させる。影を戻すならドック接地時の見え方を必ず確認すること。 */
  isolation: isolate;
}
/* 色ヒーロー（写真なし）のカード地：マット（bg-soft）と差がつくよう淡いブランド地に。トークン追従。 */
.section-hero.hero--framed.hero--color .hero__frame {
  background: linear-gradient(135deg, var(--wp--preset--color--primary-light) 0%, #fff 78%);
}
/* frame 内の bg/overlay/inner は通常ヒーローと同じ役割（hero__bg/overlay は inset:0 で frame を満たす）。 */
.section-hero.hero--framed .hero__inner { max-width: none; }

/* ━━ 額装 × 透過オーバーレイ ＝「統一フィールド」（body.hero-framed-field） ━━
   ヘッダー・帯・額の外側マットを同一のマット色（--frame-mat＝軸 frame_mat・既定 bg-soft／白も可）にし、上部全体を1枚の色フィールドにする
   （参照：クスノセ／はぐむ系）。framed はマットを負マージンで重ねないので、ヘッダー(bg-soft)と
   マット(bg-soft)が隣接して継ぎ目なく続き、額縁カードだけが余白付きで浮く。
   横型ヘッダー（帯分離・上部中央・統合・フローティング）が対象。サイドバー系は縦型のため除外
   （:not(.header-sidebar)。sidebar-right も header-sidebar を併せ持つので同時に除外される）。
   セレクタ先頭に body（要素）を付け、キットの :is(.header-integrated,…) .site-header 等より高詳細度で勝つ。 */
body.hero-framed-field:not(.header-sidebar) .site-header,
body.hero-framed-field:not(.header-sidebar) .site-header__top,
body.hero-framed-field:not(.header-sidebar) .site-header__bar {
  background: var(--frame-mat);
  box-shadow: none;
}
/* 帯分離／上部中央の緑ナビ帯 → 透明（マット地を透かす）＋濃色リンク（白抜きをやめる）。
   ★2026-08-30：透過（hov-on）と同じく**トークンの差し替え**へ。統一フィールドも
     「ナビ帯のトーンの一種」なので、配色軸の値が漏れず、点線も自動で濃色側へ移る。 */
body.hero-framed-field:not(.header-sidebar) .site-header__nav-row {
  --navband-bg:        transparent;
  --navband-ink:       var(--wp--preset--color--text-main);
  --navband-ink-hover: var(--wp--preset--color--primary);
  --navband-hover-bg:  color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
  /* ★透過と同じく4つ全部を宣言しきる（書き漏らすと区切りだけ配色軸の値が透ける）。 */
  --navband-sep:       color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent);
}
/* スクロール後もフィールド地を維持（白フラッシュ防止）。分離のため薄い影だけ足す。 */
body.hero-framed-field:not(.header-sidebar) .site-header.is-scrolled {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
}

/* ━━ 額装ヒーロー時：ヘッダーを額の「列（レール）」に合わせる（body.hero-framed） ━━
   額(.hero__frame)は max-width 1650・左右にマット余白 clamp(1rem,4vw,2.5rem)（≈40px）から始まるのに、
   通常の横型ヘッダーは max-width 1360 で内側に寄るため、ロゴ左端が額の左端よりズレ、メニューも詰まって見える。
   framed のときだけヘッダーの外側レール（最大幅・左右パディング・上余白）を額と揃える＝統一フィールドの仕上げ。
   ・★★★**揃えるのは「見えている端」どうし**（2026-10-17 に統合を改めた。下の注記）。
     統合（透過を含む）＝バーに面が無い→見えている端は**中身（ロゴ左・CTA右）**＝額の端に揃える。
     フローティング＝白いピルが見えている→**ピルの外形**＝額の端に揃える（従来どおり）。
   ・★★★**上下の余白は触らない**（＝ここは「横の列」だけの規則）。理由は下の注記。
   ・メニューの間隔は足さない（2026-08-31 に撤去。下の注記）。
   対象は横型ヘッダー（統合／オーバーレイ／フローティング）。サイドバー系（縦型）と帯分離／上部中央（2段）は対象外。
   ※ 2段（separated/center）を額装で使う場合の同種調整は必要になったら __top/__nav-row にも展開する。 */
body.hero-framed:is(.header-integrated, .header-overlay, .header-floating) .site-header__bar {
  /* ★額装では「額の列に揃える」ことが目的なので、可変幅（width:fit-content）を打ち消して
     max-width まで伸ばしきる。fit-content のままだと中身の必要幅（約1374px）で止まり、
     ロゴ左端が額の左端に届かない。 */
  width: auto;
  min-width: 0;
  max-width: min(var(--frame-max), 100%);
}
/* ━━ ★★★統合：中身の端を額の端に揃える＝上限は「額 ＋ ガター×2」（2026-10-17 実射FB
     「額縁にするとメニューの文字が小さい」）━━
   旧：上の `min(1650px, 100%)` を統合にもそのまま使っていた＝**バーの外形**を額に揃えていた。
   統合のバーには面が無いので見えるのは中身で、中身はバーの左右余白（--gutter）ぶん内側に入る。
   ・〜1730px … バー＝画面幅なので、ロゴ左＝額左（どちらも画面端から --gutter）＝揃っていた。
   ・1730px〜 … バーが 1650px で止まり、**ロゴが額より 40px 内側**・CTA も 40px 内側＝計 80px を失う。
   ★★いちばん多いデスクトップ幅の **1920px がちょうど後者**。実測（テンプレ05・メニュー9項目・住所つき情報ブロック）：
     メニューの必要幅 745px に対し空き 718px ＝ 27px 足りず、退避の⓪（字間詰め）で **13.6px → 12.48px**。
     ＝**額装を選ぶと、どの広い画面でも他の1段ヘッダーより文字が小さい**（2026-08-31 の間隔と同じ「払わせ先」の形）。
   → 上限を「額 ＋ ガター×2」に＝**どの幅でも中身の端＝額の端**（額の横マットも --gutter なので式が一致する）。
     1920px で空き 798px ＝詰めずに入る（他の1段ヘッダーと同じ 13.6px）。〜1730px は1pxも変わらない。
   ★「ロゴを額より外へ出す（画面端に寄せる）」はやらない：1730px を境に端が揃ったり外れたりする
     （1800px で 35px だけずれる＝揃え損ねに見える）。揃える端は1つに決める。 */
body.hero-framed.header-integrated .site-header__bar {
  max-width: min(calc(var(--frame-max) + 2 * var(--gutter)), 100%);
}
/* ★CTAタイル（hcta-panel）はバーの右余白を 0 にして右端へ接地する（§15）。上限を広げたぶん、
   広い画面ではタイルが額より --gutter だけ外へはみ出して宙に浮く＝右余白を戻して**タイルの右＝額の右**に。
   〜1730px（バー＝画面幅）は 0 のまま画面端へ接地＝従来どおり。clamp で 0 → --gutter へ連続的に移る。
   ※ 100% はバーの包含ブロック（.site-header＝余白なし）の幅。 */
@media (min-width: 901px) {
  body.hero-framed.header-integrated.hcta-panel .site-header__bar {
    padding-inline-end: clamp(0px, 100% - var(--frame-max) - 2 * var(--gutter), var(--gutter));
  }
}
/* ━━ ★★★額装はヘッダーの上下余白を一切変えない（2026-08-31 実射FB・上書きを撤去）━━
   旧実装は `padding-block: clamp(1rem, 2.2vw, 1.6rem) 0.55rem`（実測 1440px＝上25.6 / 下8.8）を
   額装のときだけ足していた。理屈は「下padding は額の上padding(14px) と**足して**読まれるので、
   上をその合計(22.8)に合わせる」——**数値の上では釣り合っているが、実物では釣り合わない**。
   ★**上は開いた縁（ビューポート端）・下は額の硬い縁**。同じ数値でも、境界に接した余白より
     開いた側の余白のほうが広く見える。だから「上を下に合わせる」と必ず上が勝つ。
   ★もう1つの決め手＝**透過（`header_overlay`）は「地の出し方」の軸であって「高さ」の軸ではない**。
     旧実装では透過を切り替えるだけでヘッダー高が **92.4 ⇄ 104.4（12px）**変わっていた＝軸の守備範囲外の副作用。
   → 撤去。額装でもヘッダーの上下は既定の `0.7rem` 対称（＝サイト中どのヘッダーとも同じ）。
     額との隙間は 11.2 + 額の上pad 14 = 25.2px で、旧 22.8px とほぼ同じ（詰める必要も無かった）。
   ※ 2026-08-30 に「非フィールドだけ撤去し、統一フィールドには残す」を一度試したが、
     透過ONでも「上が広い」は消えなかった（実射FB 第2報）。**地が続いているかは関係が無かった**。 */
/* ━━ ★★★額装のときメニューの間隔を広げるのをやめた（2026-08-31 実射FB
     「額縁にすると他のパターンに比べてヘッダーのクリニック名の文字が小さくなる」）━━
   旧：`… .primary-menu { gap: 0.7rem; }`（既定 0.12rem の**約6倍**）。
   理由は上の「幅が広がる分メニューの窮屈さは自然に解消。gap を少しだけ足して余裕を出す」だったが、
   ★★**数えたら、足した余裕より使った幅のほうが多かった**（実測・幅1900px・メニュー9項目）：

   | | 額装でない | 額装 |
   |---|---|---|
   | バーの幅 | 1617px | 1650px（**+33px**） |
   | メニューの必要幅 | 772px | 878px（**+73px**＝8つの隙間 ×9.28px） |

   ＝ **差し引き −40px** で1行に収まらなくなり、退避階段（§1段ヘッダーの収まり）が作動して
   `hdr-addr-short` → `hdr-logo-base` まで進む。`hdr-logo-base` は `--logo-scale` を 0.25 で頭打ちにするので、
   **クリニック名が 31.36px → 25.84px（17%減）**になる。これが実射FBの症状。

   ★★★**払わせ先が別の軸だったのが問題**：飾りのために増やした間隔の代金を、
     **院が決めた「ロゴの大きさ」**（顧客設定）が黙って払っていた。しかも比較しないと気づけない
     ——2026-08-31 に撤去した「1段は 0.74倍」と**まったく同じ形**（そのときも、払った先で何も買えていなかった）。
   ★**幅を変えても直らない**：バーは 1650px で頭打ちなので、実測 2400px でも退避したまま
     ＝ この構成を選ぶと**どの画面幅でも設定どおりの大きさにならない**（閾値の問題ではない）。
   ★退避階段は「入らないとき」の受け皿であって、**飾りの選択を吸収させる場所ではない**。
   → 撤去。額装でもメニューの間隔は他の1段ヘッダーと同じ（`0.12rem`）。
     額の列に揃える幅の規則（上のブロック）は**そのまま**＝額装の目的はそちらが担う。 */

/* 埋め込みがあるときのキャッチ幅：カードと場所を分けるため細めに（slideshow / framed 共通）。
   位置・見せ方は上の共通スロット（8方向 ／ embed-float・embed-dock）が担う。 */
@media (min-width: 901px) {
  .section-hero.has-hero-embed .hero__lead { max-width: min(48%, 560px); }
}

/* ━━ ヒーローのキャッチ位置（slideshow / framed 共通・catch-h-* / catch-v-* / catch-vertical） ━━
   縦＝flex コンテナの align-items（slideshow=section 自身／framed=.hero__frame）。横＝.hero__lead の寄せ。
   auto は hero.php 側で left/middle（framed ドック時は空き側）へ解決済み。 */
.section-hero:is(.hero--photo, .hero--color).catch-v-top    { align-items: flex-start; }
.section-hero:is(.hero--photo, .hero--color).catch-v-middle { align-items: center; }
.section-hero:is(.hero--photo, .hero--color).catch-v-bottom { align-items: flex-end; }
.section-hero.hero--framed.catch-v-top    .hero__frame { align-items: flex-start; }
.section-hero.hero--framed.catch-v-middle .hero__frame { align-items: center; }
.section-hero.hero--framed.catch-v-bottom .hero__frame { align-items: flex-end; }
/* 横位置：lead に max-width を与え margin で寄せ、テキスト・ボタンの揃えも合わせる */
.section-hero:is(.catch-h-left, .catch-h-center, .catch-h-right) .hero__lead { max-width: min(620px, 100%); }
.section-hero.catch-h-left   .hero__lead { margin-inline: 0 auto; }
.section-hero.catch-h-center .hero__lead { margin-inline: auto; text-align: center; }
.section-hero.catch-h-right  .hero__lead { margin-inline: auto 0; text-align: right; }
.section-hero.catch-h-center .hero__buttons { justify-content: center; }
.section-hero.catch-h-right  .hero__buttons { justify-content: flex-end; }
/* 縦書き：見出し（＋サブ）だけを縦組みにし、lead 自体は横書きのまま（＝catch-h の margin-inline が
   物理左右として効き、横位置がずれない）。見出し＝主役の縦列、その左にサブの縦列（vertical-rl は右→左）。
   ラベルは上・ボタンは下に横書きの島。lead は縦列の幅に縮め（fit-content）、横位置指定で寄せる。
   ★2026-10-18 からスマホも縦書き（下の §スマホの縦書き）。それまでは 768px 以上だけで、狭い幅は横書きに戻していた。
   ★★2026-10-18 組み直し（実射「縦書きにした場合のレイアウトがすごく微妙」・比較画像から案Dをユーザーが選択）。
     直す前は3つ崩れていた：
     ①**下揃え**：catch-h-right の `text-align: right` は縦書きでは「行末＝下」に効く＝キャッチもサブも下端でそろい、
       天（上端）がガタガタだった。縦組みは天でそろえる → 縦の2つは `text-align: start`。
     ②**ラベル・ボタンがサブの列に閉じ込められていた**：列を宣言していないグリッドの `grid-column: 1 / -1` は
       1列分にしかならない（-1 は明示グリッドの端＝1本目）。ラベルはキャッチではなくサブの上、ボタンはサブの右端に
       寄って、どの線にもそろわなかった → 領域名で置き、ラベルもボタンも**右端＝縦書きの読み始め**にそろえる。
     ③**低い画面でラベルがヘッダーに潜る**（1280×720 で上端 106px／ヘッダー 136px）：列の高さが画面の高さだけで決まり、
       ラベルとボタンのぶんを見ていなかった → 列は「ヒーローの見え高さ − ラベル・ボタン・余白」から決める。
     あわせて字組みを縦書き用に：字間 0.12em・行送り 1.6（横書き用の詰めた組みのままだった）、サブは1字ぶん下げて始める（主従）。 */
.section-hero.catch-vertical .hero__lead {
  display: grid; justify-content: start; align-items: start;
  grid-template-columns: auto auto;
  grid-template-areas: "label label" "sub catch" "btn btn";
  width: fit-content; max-width: 100%;
}
/* ★列の高さ（--catch-col）＝ヒーローの見え高さ（`.section-hero` の min-height と同じ式）から 260px を引く。
   260px＝ラベル・ボタンとそのあいだ（約130px）＋上下の余白。余白がいちばん大きいのは透過のヘッダー
   （上＝ヘッダー＋4rem・下＝4rem → 中身の高さ＝見え高さ − 約112px）で、そこでも 20px 余る。 */
.section-hero.catch-vertical .hero__catch,
.section-hero.catch-vertical .hero__sub {
  --catch-col: clamp(260px, min(clamp(460px, 76vh, 760px), 88svh) - 260px, 500px);
  writing-mode: vertical-rl; text-orientation: mixed; text-align: start;
  margin: 0; max-height: var(--catch-col);
}
/* ★主役＝右列。列の高さに、院が改行した行が入る大きさへ縮める（2026-10-16・コラージュの縦書きと同じ式）。
   ★字間は見出しの字間ではなく自前の 0.12em＝行の長さ（`--catch-em`）も PHP がこの字間で見積もる
     （`CLINIC_HERO_VERTICAL_LETTER`。字間を変えたら PHP の定数も変える＝テストで一致を固定）。
   ★下限は 1.6rem（横書きの 2rem のままだと、低い画面で列に入らず最後の1字だけが次の列へ落ちる）。 */
.section-hero.catch-vertical .hero__catch {
  --catch-fs-min: 1.6rem;
  grid-area: catch; letter-spacing: 0.12em; line-height: 1.6;
  font-size: max(var(--catch-fs-min), min(var(--catch-fs), calc((var(--catch-col) - 2px) / var(--catch-em, 0.01))));
}
/* サブは1字ぶん（3em≒キャッチの1字）下げて始め、そのぶん列を短くする＝塊の高さはキャッチの列のまま。
   キャッチとの間は列の間隔ではなくサブ自身の右の余白で取る（サブが無いときに空きが残らない）。 */
.section-hero.catch-vertical .hero__sub {
  grid-area: sub; font-size: var(--wp--preset--font-size--md, 1.05rem);
  margin: 3em 1.75rem 0 0; max-height: calc(var(--catch-col) - 3em);
  line-height: 2; letter-spacing: 0.08em;
}
.section-hero.catch-vertical .hero__label   { grid-area: label; justify-self: end; margin-bottom: 1.25rem; }
.section-hero.catch-vertical .hero__buttons { grid-area: btn; justify-self: end; margin-top: 2rem; }
/* ━━ スマホの縦書き（〜767px）━━
   ★2026-10-18：スマホも PC と同じ組み（比較画像から「全部縦」をユーザーが選択。「キャッチだけ縦・サブは横書き」は
     縦と横が混ざってまとまらず、iPhone SE で最後の1字が次の列へ落ちたので退けた）。
   ★縦長の画面は列を長く取れる＝横書きの上限（375px で 32px）より大きくしてよい（375×812 で約35px）。
   ★列の高さは写真の枠（`--hero-mob-photo`・§スマホのヒーロー）から 210px＝ラベル・ボタンのぶん＋上下の余白を引く。
     PC の式（画面の高さの 76%）のままだと、枠が 560px で頭打ちのスマホでは塊が写真からはみ出す。
   ★768〜900px も写真の枠は `--hero-mob-photo` だが、列は PC の式のまま（タブレットは横幅が足りるので大きく組む・塊が
     枠を超えたぶんは写真が伸びる＝実測 820×1000 で崩れない）。
   ★下限 1.375rem（22px）＝列がいちばん短い 240px（カード併用の低い画面＝360×640・375×667）でも、
     既定のキャッチの9字の行（9 × 1.12em）が入る大きさ。24px だと最後の「て」だけが次の列へ落ちた（実測）。 */
@media (max-width: 767px) {
  .section-hero.catch-vertical :is(.hero__catch, .hero__sub) { --catch-col: clamp(240px, var(--hero-mob-photo, 560px) - 210px, 420px); }
  .section-hero.catch-vertical .hero__catch { --catch-fs-min: 1.375rem; --catch-fs: 2.5rem; }
  .section-hero.catch-vertical .hero__sub { margin-right: 1.25rem; }
  .section-hero.catch-vertical .hero__label   { margin-bottom: 1rem; }
  .section-hero.catch-vertical .hero__buttons { margin-top: 1.5rem; }
}
/* ★〜900px でカードがあるときは、キャッチの枠が縦フレックスになる（§モバイル：写真とキャッチを同じセルに・(0,4,0)）。
   そのままだとサブがキャッチの**下**へ積まれていた（2026-10-18 に実測・組み直す前から）＝縦書きの組み（グリッド）を保つ。
   上下の中央寄せはフレックスの justify-content の代わりに align-content で。
   ★縦書きの塊は写真の枠より高くなりうる（カード併用は枠が 62vh と短い）＝中央寄せが効かず上端から積まれ、
     ラベルがヘッダーの下端（透過）や写真の上端（不透明）に貼り付いていた（実測 360×640・375×667）→ 上に 1.5rem 足す。 */
@media (max-width: 900px) {
  .section-hero.has-hero-embed.hero--photo.catch-vertical .hero__lead {
    display: grid; align-content: center;
    padding-top: calc(var(--hero-header-inset, 0px) + 1.5rem);
  }
}

/* ━━ ご予約・お問い合わせ CTA（骨格／色はキットで上書き） ━━ */
.section-cta { background: var(--wp--preset--color--primary); color: #fff; text-align: center; padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2.5rem); }
.section-cta__inner { max-width: 720px; margin: 0 auto; }
.section-cta__label { display: inline-block; font-size: 0.72rem; letter-spacing: 0.14em; font-weight: var(--w-ui, 700); opacity: 0.8; }
.section-cta__heading { color: #fff; font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0.3em 0; }
.section-cta__lead { color: rgba(255,255,255,0.9); margin: 0 0 1em; }
/* ★記号（アイコン／「Tel.」）と番号を横並びにする。間隔はヘッダーと同じ 0.26em。
   ★★大きさは**番号に対する比**で、ヘッダーとまったく同じトークンを使う
     （`--cta-tel-ico-r` / `--cta-tel-mark-r`）＝置き場所が変わっても比が変わらない。
     `em` 基準なので、ここの 35.2px にも自動で追従する（px を書き足さない）。 */
.section-cta__tel a { color: #fff; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: var(--w-head, 700); text-decoration: none; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 0.26em; }
.section-cta__tel svg { width: calc(1em * var(--cta-tel-ico-r)); height: calc(1em * var(--cta-tel-ico-r)); flex-shrink: 0; }
/* ★★押せる合図（2026-08-22 実射FB「CTAもヘッダーに合わせた方が良い？」）。
   番号は `<a href="tel:">` なのに下線も面も無く、**完全に表示テキストに見えていた**。
   隣の「WEB予約」は塗りボタンなので、**同じ行動なのに片方だけ押せるように見えない**状態。
   ★ヘッダーと同じ流儀（hover で下線・オフセット 0.2em）に揃える。
   ★下線は**番号だけ**に引く（記号まで下線が伸びると「Tel.」に線が乗って読みにくい）。 */
.section-cta__tel a:hover .section-cta__tel-num { text-decoration: underline; text-underline-offset: 0.2em; }
.section-cta__buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
/* ★★★下部CTAのボタンの寸法（2026-08-22 実射FB「CTAはアイコンも出ないしボタンも小さく、ヘッダーとアンバランス」）。
   ★**同じ不具合がヘッダーだけ直されていた**：2026-07-25 に「ヘッダーのボタンだけ寸法を上げる
     （ページ下部CTA・ヒーローの .cta-btn は据え置き）」としたとき、その理由は
     「13.6px / 91x41px で、隣の電話より小さく**主従が逆転**していた」だった。
     **その 13.6px / 91×41px が下部CTAにそのまま残っていた**（実測 92×41px＝ヘッダーの面積比 42%）。
   ★★しかも下部CTAは番号が 35.2px と大きいので、**ブロックの中でも主従が逆転**していた
     ——「予約してもらうための節」で、予約ボタンがページで一番小さいボタンになっていた。
   ★寸法は `--cta-btn-fs`（軸 cta_size）を通す＝ヘッダーと**同じつまみ**で動く。
     ヘッダーより気持ち大きいのは、こちらが**行き先としてのCTA**（常設の導線ではない）だから。
   ★透明の枠を敷くのはヘッダーと同じ理由＝枠線ボタン（お問い合わせ）だけ背が高くなるのを防ぐ。 */
.section-cta .cta-btn {
  font-size: calc(var(--cta-btn-fs) * 1.06);
  padding: 0.85em 1.9em;
  border: 2px solid transparent;
}
.section-cta .cta-btn--outline { border-color: #fff !important; color: #fff !important; }
.section-cta .cta-btn--outline:hover { background: rgba(255,255,255,0.15) !important; }

/* ★★軸 `cta_tel` = boxed を**下部CTAでも効かせる**（2026-08-22）。
   ヘッダーの「電話の見せ方（テキスト／枠付き＝ボタンと対にする）」と同じ問いが、ここでも成立する
   ——むしろ**スマホでは hover が存在しない**ので、面にすることだけが押せる合図になる。
   ★**新しい軸は作らない**。同じ問い（電話をボタンと対にするか）に2つの答えを持たせない。
   ★**大きさは変えない**：番号はこのブロックの主役なので、枠を足すだけで主従を動かさない
     （小さいチップにすると「WEB予約 ＞ 電話」という優先順位が固定されてしまう）。
   ★色はヘッダーの primary 系ではなく**白**にする。下地が primary の帯なので、
     ヘッダーの枠付き（primary 30% の枠＋ほぼ白の地）をそのまま持ち込むと沈む。
     すぐ下の枠線ボタンが既に白で描かれているので、そこに合わせるのが素直。 */
body.ctatel-boxed .section-cta__tel { margin-bottom: 0; }
body.ctatel-boxed .section-cta__tel a {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.85em;
  border: 2px solid rgba(255,255,255,0.55);
  border-radius: var(--cta-r, var(--r-btn));
  transition: background-color .18s ease, border-color .18s ease;
}
body.ctatel-boxed .section-cta__tel a:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
}
/* ★面が出る＝下線は二重の合図になるので外す。
   ★★下線は**子（番号）に引いている**ので、打ち消しも子に当てること
     ——親の `text-decoration: none` は子が自分で引いた線を消さない。 */
body.ctatel-boxed .section-cta__tel a:hover .section-cta__tel-num { text-decoration: none; }

/* ━━ 本文エディタの「挿入部品」（cms-*）＝フロント＆エディタ共通の体裁。トークン＝パレット追従。
   接頭辞 cms- でグローバルに当て、本文ラッパ（content-page__body / free__body / dept-detail）を問わず効かせる ━━ */
/* ステップ（番号付きカード） */
ol.cms-steps { list-style: none; counter-reset: cms-step; margin: 1.6em 0; padding: 0; }
ol.cms-steps > li {
  counter-increment: cms-step;
  position: relative;
  margin: 0 0 0.7em;
  padding: 0.9em 1.1em 0.9em 3.4em;
  background: var(--wp--preset--color--primary-light);
  border-radius: var(--r-card);
  line-height: 1.7;
}
ol.cms-steps > li::before {
  content: counter(cms-step);
  position: absolute; left: 0.9em; top: 0.85em;
  width: 1.7em; height: 1.7em;
  display: flex; align-items: center; justify-content: center;
  background: var(--wp--preset--color--primary); color: #fff;
  border-radius: 50%; font-weight: var(--w-ui, 700); font-size: 0.82em;
}
/* 箇条書きリスト / 番号リスト（部品。標準のリストボタンの代替） */
ul.cms-list { list-style: disc; margin: 1.2em 0; padding-left: 1.6em; }
ol.cms-olist { list-style: decimal; margin: 1.2em 0; padding-left: 1.7em; }
ul.cms-list > li, ol.cms-olist > li { margin-bottom: 0.4em; line-height: 1.8; }
ul.cms-list > li::marker { color: var(--wp--preset--color--primary); }
ol.cms-olist > li::marker { color: var(--wp--preset--color--primary); font-weight: var(--w-ui, 700); }

/* Q&A */
dl.cms-qa { margin: 1.6em 0; }
dl.cms-qa dt {
  position: relative; padding: 0.6em 0 0.6em 1.9em;
  font-weight: var(--w-head, 700); color: var(--wp--preset--color--primary-dark);
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent);
}
dl.cms-qa dt::before { content: "Q"; position: absolute; left: 0; top: 0.55em; color: var(--wp--preset--color--accent); font-weight: var(--w-ui, 700); }
dl.cms-qa dd {
  position: relative; margin: 0 0 0.6em 1.9em; padding: 0.2em 0 0.7em;
  line-height: 1.8; color: var(--wp--preset--color--text-main);
}
dl.cms-qa dd::before { content: "A"; position: absolute; left: -1.9em; top: 0.2em; color: var(--wp--preset--color--primary); font-weight: var(--w-ui, 700); }
/* ボタンリンク */
a.cms-btn {
  display: inline-block; text-decoration: none; font-weight: var(--w-ui, 700);
  background: var(--wp--preset--color--accent); color: #fff;
  padding: 0.7em 1.9em; border-radius: var(--r-btn);
}
a.cms-btn:hover { filter: brightness(0.95); }
/* 注意ボックス */
.cms-note {
  margin: 1.6em 0; padding: 1em 1.2em;
  background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
  border-left: 4px solid var(--wp--preset--color--accent);
  border-radius: 0 var(--r-field) var(--r-field) 0;
  line-height: 1.8;
}
/* リード文 */
.cms-lead {
  font-size: var(--wp--preset--font-size--md, 1.05rem);
  line-height: 1.9; font-weight: 500;
  color: var(--wp--preset--color--text-main);
  margin: 0 0 1.2em;
}
/* 本文中の表（cms-table ＝部品挿入 ／ content-page__body 等 ／ エディタ body に共通） */
table.cms-table,
.content-page__body table,
.dept-detail table,
.free__body table,
.mce-content-body table {
  width: 100%; border-collapse: collapse; margin: 1.6em 0;
}
table.cms-table th, table.cms-table td,
.content-page__body th, .content-page__body td,
.dept-detail th, .dept-detail td,
.free__body th, .free__body td,
.mce-content-body th, .mce-content-body td {
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--text-main) 14%, transparent);
  padding: 0.6em 0.8em; text-align: left; line-height: 1.6;
}
table.cms-table th,
.content-page__body th, .dept-detail th, .free__body th, .mce-content-body th {
  background: var(--wp--preset--color--primary-light); font-weight: 700;
}
/* 表（display:table）は直後の要素とマージンが相殺されず詰まりやすい→上スペースを確保 */
table.cms-table + *,
.content-page__body table + *,
.dept-detail table + *,
.free__body table + * { margin-top: 1.6em; }

@media (max-width: 600px) {
  table.cms-table, .content-page__body table, .dept-detail table, .free__body table { font-size: 0.9em; }
  ol.cms-steps > li { padding-left: 3em; }
}

/* エディタ内のみ（.mce-content-body）：部品ホバーで枠を出し、操作バーの対象を明示。
   フロントには .mce-content-body が無いので影響しない（base.css は editor-style でもある） */
.mce-content-body .cms-steps,
.mce-content-body .cms-list,
.mce-content-body .cms-olist,
.mce-content-body .cms-qa,
.mce-content-body .cms-note,
.mce-content-body .cms-lead,
.mce-content-body table.cms-table,
.mce-content-body .cms-btn {
  outline: 1px solid transparent;
  outline-offset: 4px;
  border-radius: 4px;
  transition: outline-color .12s ease;
}
.mce-content-body .cms-steps:hover,
.mce-content-body .cms-list:hover,
.mce-content-body .cms-olist:hover,
.mce-content-body .cms-qa:hover,
.mce-content-body .cms-note:hover,
.mce-content-body .cms-lead:hover,
.mce-content-body table.cms-table:hover,
.mce-content-body .cms-btn:hover {
  outline-color: color-mix(in srgb, #2271b1 55%, transparent);
}
/* 選択中（カーソルがある）部品は実線の青枠ではっきり囲う（Q&A 等のロック選択枠と統一感） */
.mce-content-body .cms-active,
.mce-content-body .cms-active:hover {
  outline: 2px solid #2271b1 !important;
  outline-offset: 4px;
  border-radius: 4px;
}

/* ━━ 仕上げ：本文の読みやすい幅・院長写真の充填 ━━ */
/* 長文（診療科目詳細）は読みやすい幅に制限 */
/* ★★★2026-08-31：`.content-page__body` をここから外した。このクラスは**2つの役割**を
   持っていた——①テンプレの器（templates/page-content.html）②本文の体裁（.dept-detail と
   並べて内側に付く：お知らせ・ブログ・採用の詳細）。①として max-width だけを宣言し、
   margin-inline も左右の余白も持っていなかったので、**本文が画面の左端に貼り付いていた**。
   → 器の役割は下層の既定 `.dept-body` に渡し、このクラスは**体裁だけ**にする
     （②では既に `.dept-body` の内側なので、max-width は元から一度も効いていなかった）。
   ★1つのクラスが2つの役割を持つと、**片方の都合で書いた宣言がもう片方で意味を失う**
     （§差し色は「面」か「記号」か と同じ型）。 */
.dept-detail { max-width: 760px; }
/* 院長写真：枠いっぱいに表示（上寄り防止）。比率は greeting--ratio-* が上書き。
   ★min-height は置かない：高さの下限は aspect-ratio と競合し、比率が「1:1」や
     「幅の狭い3:4」のときに高さが下限に張り付き、aspect-ratio が今度は幅をその高さから
     逆算するため、枠が列からはみ出す（2026-07-22 実射で発覚：側面型×正方形が 368px の列に
     400x400 で描かれていた）。写真未設定でもクラスを portrait に固定しているので
     必ず aspect-ratio が効き、下限が無くても枠は潰れない。 */
.greeting__photo-wrap { position: relative; aspect-ratio: 3 / 4; }
.greeting__photo-wrap figure,
.greeting__photo-wrap .wp-block-image { position: absolute; inset: 0; margin: 0; }
.greeting__photo-wrap figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ━━ ルート直下＆ヘッダー内部の余白を詰める（各自で余白管理） ━━ */
.wp-site-blocks > * + * { margin-block-start: 0; }
.site-header > * + * { margin-block-start: 0; }
.site-header { --wp--style--block-gap: 0; }

/* ★ここにあった「ヘッダー上段の電話を !important で強制横並びにする」ブロックは削除（2026-07-25）。
   kit-soft/kit-trust に base.css と同じ宣言が重複しており、後読みの kit CSS が勝って
   崩れるのを力技で押さえ込んでいたもの。重複を消して §15 に一本化したので不要になり、
   むしろ display/align-items の !important が「情報ブロック（縦積み）」型を潰すため取り除いた。 */

/* ━━ カード系セクションの仕上げ（等高のまま空きを目立たせない＋見出し中央） ━━ */
/* 診療案内カード：縦フレックス＋余白を詰め、「詳しく見る」を下端へ */
/* ★内側の余白は**トークン経由**で持つ（2026-08-17）。`!important` は WP ブロックCSS対策で外せないが、
   値を直書きしたままだと**より詳細なセレクタでも上書きできない**（タイル・1列で実際に効かなかった）。
   トークンなら `!important` の外側から差し替えられる＝場面ごとの寸法をここに集めなくて済む。 */
.departments__card-inner { display: flex; flex-direction: column; padding: var(--dept-card-pad-block, 1.4rem) var(--dept-card-pad-inline, 1.5rem) !important; }
.departments__card-inner > h3 { margin: 0.55rem 0 0.3rem !important; }
.departments__card-inner > p { margin: 0; line-height: 1.7; }
.departments__more { margin-top: 0.7rem; }
/* 当院の特徴（アイコン版・記号なし版）：内容を上下中央に寄せて空きを上下へ分散＋余白圧縮 */
.features__card-inner--icon,
.features__card-inner--illust,
.features__card-inner--none { justify-content: flex-start; padding: var(--feat-card-pad-block, var(--wp--preset--spacing--60, 1.75rem)) var(--feat-card-pad-inline, var(--wp--preset--spacing--60, 1.75rem)) !important; }
/* 見出しを中央寄せ（診療案内・当院の特徴・院内紹介） */
.section-features .section-head,
.section-departments .section-head,
.section-facility .section-head { align-items: center; text-align: center; }
.section-features .section-head h2::after,
.section-departments .section-head h2::after,
.section-facility .section-head h2::after { margin-inline: auto; }

/* ━━ ページの左右余白（ガター）を持っていなかったセクション（2026-08-02）━━
   実測（375px）で**文字が画面の端に接していた**2つ。診療時間＆お知らせ＝凡例・お知らせの各行が左0、
   院長挨拶＝本文が左0・署名が右0。原因は共通で「ガターの担当者が居ない」（トークン --gutter の項参照）。
   ★**セクション自身に掛ける**のが正しい場所：内側は WP の constrained レイアウトなので、
     デスクトップでは中身が既に contentSize(1080px) で頭打ち＝**広い画面では1pxも変わらない**
     （実測1265px：表・列・写真・本文の位置と幅が完全一致）。効くのは中身が画面幅いっぱいになる狭幅だけ。
   ★★**全セクションに一括では掛けない**：アクセスの地図（alignfull で全幅に出す設計）・
     フォトバンド・院内紹介のモザイクは**端まで届くことが意図**なので、`.front-band` に一括で掛けると
     その意図を壊す（実測：地図が 0/375 → 16/343 になってしまう）。
     ＝**「余白が要る器」と「端まで出す絵」を一緒に扱わない。** */
/* ★★★2026-08-31 追加：診療案内・当院の特徴（実射FB「カードの左右に余白がない」）。
   2026-08-02 の工事でここが漏れたのは、**判定に使った物差しが「文字の左端」だった**から——
   診療案内 24px／特徴 20px と、どちらも文字は端に触れていなかったので「済んでいる」ように見えた。
   だが余白を出していたのは**カードの内側の padding** で、**面（カード）そのものは画面幅いっぱい**だった。
   ＝この節の教訓（「面の内側の余白」と「ページの左右余白」は別物）に、まさに該当する2件が残っていた。
   ★★見分けがついた決め手＝**カードは `border-radius: 12px` と影を宣言したまま端に接していた**。
     このテーマで意図的に全幅にしている要素（院内紹介のモザイク・アクセスの全幅地図・フォトバンド）は
     **どれも角丸0・影なし**。丸みと影は「面が浮いている」ための造形なので、端に貼り付いた面では
     成立しない（左右の影は画面外、角丸は端で小さな欠けに見えるだけ）。
   ★★同じ部品の**タイル表示では 2026-08-17 に既にこの結論が出ていた**——
     「外側はページのガター（他のセクションと同じ）／隣のセクションとの縦のラインもそろう」。
     リスト表示と特徴だけが取り残されていた（＝片方だけ直った状態）。
   ★スマホだけの話ではない：実測 1000px で**見出しは 40px 入っているのにカードは 0px**だった
     （中身が contentSize 1080px で頭打ちになる ~1160px 未満で起きる）。
   ※ 器はセクションに掛ける（グリッドではない）＝広い画面では中身が contentSize で中央寄せのままなので
     **1pxも動かない**（左右対称の padding の中で中央寄せすると位置が変わらない）。 */
.section-hours-news,
.section-greeting { padding-inline: var(--gutter); }
/* ★同じ宣言でも**別のルールに分ける**：上は「誰も余白を持っていなかった」、下は
   「カードの内側の padding が代わりをしていた」で**根拠が違う**（同じ結論でも根拠が違うものを束ねない）。 */
.section-departments,
.section-features { padding-inline: var(--gutter); }

/* ━━ 空段落（wpautop由来）の余白を除去 ━━ */
.section-departments p:empty,
.section-features p:empty,
.section-facility p:empty,
.section-hours-news p:empty,
.departments__card-inner p:empty,
.features__card-inner p:empty { display: none !important; margin: 0 !important; }
.departments__card-inner > *:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   共通レイアウト（全キット共通・色/フォント/影はトークン追従）
   ── 旧 kit-soft.css から昇格。trust / normal / 今後のキットも同じ
      「配置（arrangement）」を継承し、各キットは色・書体・装飾のみ上書きする。
═══════════════════════════════════════════════════════════════ */

/* ── セクション見出し：中央寄せ＋サイズ＋アクセント下線 ── */
/* ★見出しの器にもガターを持たせる（2026-08-02）。短い見出しは中央寄せなので**1pxも動かない**が、
   折り返す長い見出し（実測「新型コロナウイルス感染症対策について」）は端まで届いていた（左右8px）。
   ＝**中央寄せは余白を持っているように見えるだけ**で、行が伸びれば端に触れる。
   実測：短い見出し7つは前後で完全一致（144/144・140/140…）、長い見出しだけ 8→20px。 */
.section-head { align-items: center; text-align: center; padding-inline: var(--gutter); }
/* ★ただし**セクション自身が左右の余白を持つ所では重ねない**（2026-10-17）。上の器の余白（08-02）のあとで、
   この4つのセクションにも余白が付いた（08-02 / 08-31）ので、スマホでは見出しだけ**余白が二重**＝幅が 343px でなく 311px だった。
   中央寄せでは見えないが、長い見出しが早く折り返し、左寄せの型（headstyle-left）ではカードの左端とずれる。 */
:is(.section-hours-news, .section-greeting, .section-departments, .section-features) .section-head { padding-inline: 0; }

/* ★★★見出しの文字組みの土台（2026-10-17・全テンプレ共通。型は下の「見出しの型」節）。
   2026-10-16 に参考サイトと比べて「量産テンプレに見える」最大の理由が見出しだった：
   h2 は本文の約1.7倍（30px）・字間なし・英字ラベル 14px で、どのテンプレも同じ大きさ。参考は約2.3倍・字間 0.04em。
   - 大きさ＝ 375px で 25px → 654px 以上で 32px。**スマホでは12字が1行に入る**ことを上限にした
     （★PC は当初 40px にしたが、実機の目視で「大きすぎる」→ 32px に（2026-10-17）。字間と小さい英字で、変える前の 30px より上品に見える）
     （inc/front-sections.php の CLINIC_SECTION_TITLE_LINE_EM と同じ前提）。いちばん狭い器は片寄せパネルの帯（band: panel-alt）で、
     画面幅より 47px 狭い（375px で 328px）。12字（字間込み 12.84em）がそこに入る大きさ＝ 7.8vw − 0.25rem を min() で上限にする
     （360〜430px で成立。320px の端末だけは下限 22px でも入らず、そのときは文節の途中で折り返す）。
   - 字間＝ 0.07em ＋見出しの字間の軸の半分（標準 0.07／やや広め 0.09／広め 0.11em）。軸は効いたまま、標準でも詰まらない。
   - 英字ラベル＝小さく・字間を広く（12〜13px・0.24em）。字間は最後の字の後ろにも付くので、同じ量を右から引いて中央をそろえる。
   - 長い見出しは**文節の切れ目でだけ**折り返す（PHP が <wbr> を入れたときだけ keep-all。切れ目の無い語はふつうの折り返し）。 */
.section-head__label {
  font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  letter-spacing: 0.24em;
  margin-inline-end: -0.24em;
  font-weight: var(--w-ui, 700);
  color: var(--wp--preset--color--primary);
}
.section-head h2 {
  font-size: clamp(1.375rem, min(7.8vw - 0.25rem, 1.1rem + 2.2vw), 2rem);
  letter-spacing: calc(0.07em + var(--head-letter-n, 0) * 0.5em);
  line-height: 1.4;
  text-wrap: balance;
  padding-bottom: 0.4em;
}
.section-head h2:has(wbr) { word-break: keep-all; overflow-wrap: anywhere; }
.section-hours-news .section-head h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.75rem); }
.section-head h2::after {
  content: ""; display: block; width: 36px; height: 2px;
  background: var(--wp--preset--color--accent); border-radius: 999px;
  margin: 0.5em auto 0;
}
@media (min-width: 782px) {
  .section-hours-news .wp-block-columns { gap: clamp(2.5rem, 5vw, 5rem) !important; align-items: flex-start; }
  .section-hours-news .wp-block-columns > .wp-block-column { flex-basis: 0 !important; flex-grow: 1 !important; }
}

/* ── ヘッダー2段（上：ロゴ/電話/予約 ・ 下：メニュー帯）── */
.site-header__top { background: #fff; }
.site-header__top-inner { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); padding-block: var(--hdr-top-pad, 0.45rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* ━━ ★★★2段ヘッダーはスクロール中に上段だけ詰める（2026-08-22 実射FB「2段でもスティッキーは妥当か」）━━
   ★**スティッキー自体は妥当**：2段は上段に電話・WEB予約を持つので、固定したままのほうが導線が生きる。
     引っかかるのは「最も背が高い形状なのに、他と同じ全高のまま固定される」こと。
   ★★**縮めるのはロゴだけ**＝スクロール中に価値が落ちるのはロゴとキャッチ（一度見れば足りる）で、
     価値が続くのはメニューとCTA。いちばん場所を取っている部分が、いちばん価値の低い部分だった。
   ★★★**1段（統合・フローティング）には掛けない**。1段はロゴとメニューが**同じ段で幅を取り合う**ので、
     スクロール中にロゴが縮むと `hdr-compact`（メニューをドロワーへ落とす判定）の計算が動き、
     **スクロールしただけでメニューがドロワーに落ちたり戻ったりしうる**。
     2段は上段と帯が独立しているのでこの副作用が無い＝**形状ごとに事情が違うことを、適用範囲で表す**。
     ※ MENU ボタンになる幅（1100px 以下）はメニューが常にドロワー＝この副作用が無いので、1段も余白だけ詰める（下の §狭幅の余白）。
     ※★2026-10-12：PC の1段にも掛けた（下の §PC のスクロール中）。収まりの判定を**詰める前の姿で**行う（main.js の atFullSize）ことで、
       この副作用を構造的に無くしたため。
   ★サイドバーは縦なので対象外（上段という概念が無い）。

   ★★★**目印は `is-scrolled` ではなく `is-shrunk`**（2026-08-22 実射FB「境目で震える」）。
     当初は色を変える `is-scrolled`（しきい値 8px の1本）に相乗りさせていたが、
     **高さを変えるクラスを1本のしきい値で切り替えると発振する**：
       付く → 縮む → ブラウザがスクロール位置を補正する → 同じしきい値をまたぐ → 外れる → 伸びる → …
     実測：スクロールを止めているのに **1.5 秒で 36 回**反転（scrollY が 2 ↔ 10 を往復）。
     → `is-shrunk` を**別のしきい値（80 で付き／40 で外れる）**で切り替える（main.js）。
     間隔 40px は**高さの変化 20px より大きい**ので、補正で往復してもしきい値へ戻らない。
     ★色だけ変える `is-scrolled` は高さを動かさない＝帰還が無いので 8px のままでよい。 */
/* ★縮小率は body に置く：下の文字ロゴの縮小が body で解決されるため（ヘッダーの中へは継承で届く） */
body:is(.header-separated, .header-center) { --hdr-sc-shrink: 0.78; }
:is(.header-separated, .header-center) .site-header__top-inner,
:is(.header-separated, .header-center) .site-header__name,
:is(.header-separated, .header-center) .site-header__logo-img,
:is(.header-separated, .header-center) .clinic-sym,
:is(.header-separated, .header-center) .site-header__symbol img {
  transition: padding-block .2s ease, font-size .2s ease, max-height .2s ease, width .2s ease, height .2s ease;
}
/* ★★★文字ロゴの縮小は **body で** `--logo-fs` を上書きする（2026-10-12 に見つけた・2026-08-31 から効いていなかった）。
   名前とシンボルが読むのは実効サイズ `--logo-fs-eff`（とそれから作る `--logo-sym`）で、どちらも **body で解決済みの値**が
   継承で届く。旧実装はヘッダー（`.site-header.is-shrunk`）で `--logo-fs` を上書きしていたが、body で解決済みの
   `--logo-fs-eff` には届かず、スクロールしても**余白 8px が詰まるだけ**だった（実測 1280px：院名 27.8px のまま）。
   ★`:has()` で body から「ヘッダーが詰めた状態か」を読む＝JS は従来どおりヘッダーに印を付けるだけ。
   ★基準トークンから縮める（`--logo-fs` を自分自身から作ると循環参照になる）。
   ★スマホは実効サイズに狭幅の上限（5.3vw・1行に収まる大きさ）が先に効くので、文字ロゴはほぼ縮まない（余白だけ詰まる）。 */
body:is(.header-separated, .header-center):has(.site-header.is-shrunk) {
  --logo-fs: calc(var(--logo-fs-base) * var(--hdr-sc-shrink));
}
/* ★★縮小は**実際に描かれる高さ**に掛ける（2026-08-23）。要求のほうに掛けると、
   要求が元画像の実寸を超えた領域で縮小分が頭打ちに吸われ、**上げるほど縮まなくなる**。 */
:is(.header-separated, .header-center) .site-header.is-shrunk .site-header__logo-img {
  max-height: calc(var(--logo-img-h-eff) * var(--hdr-sc-shrink));
}
/* ★上下の余白は**トークン**で持つ（2026-08-22）：タイル接地（hcta-panel × 上部中央）が
   この値を負のマージンで打ち消して帯いっぱいに伸びるので、**同じ値を2か所に書かない**。 */
:is(.header-separated, .header-center) .site-header.is-shrunk { --hdr-top-pad: 0.2rem; }
/* ★動きを減らす設定では詰めない（高さが動くこと自体が「動き」なので、装飾と同じ扱いにする） */
@media (prefers-reduced-motion: reduce) {
  body:is(.header-separated, .header-center) { --hdr-sc-shrink: 1; }
  :is(.header-separated, .header-center) .site-header.is-shrunk { --hdr-top-pad: 0.45rem; }
  :is(.header-separated, .header-center) :is(.site-header__top-inner, .site-header__name, .site-header__logo-img, .clinic-sym, .site-header__symbol img) { transition: none; }
}
/* ━━ ★★★MENU ボタンになる幅（1100px 以下）は、1段・浮き・サイドバーの上下の余白も2段にそろえ、スクロール中は詰める
   （2026-10-12 ユーザー決定「そもそもヘッダーが高い」）━━
   ★実測 375px・院名だけの院：2段 58px（スクロール中 50px）に対し、統合 67・サイドバー 66・浮き 81px で、
     どれもスクロールしても縮まなかった。高さの大半は MENU ボタン（44px）＋上下の余白＝余白が 2段 0.45rem／他 0.7rem の差。
   ★上の「1段には掛けない」理由（ロゴが縮むとメニューの収まり判定が動く）は、メニューが常にドロワーに入るこの幅では当たらない。
     縮めるのは**余白だけ**（ロゴの大きさは変えない）＝高さの変化は 8px で、ヒステリシスの間隔 40px に収まる。
   ★値は2段と同じトークン `--hdr-top-pad`（0.45rem → 詰めて 0.2rem）。`body` を付けて形状ごとの既定の余白（同じ詳細度）に勝たせる。
   ★透過1段のバーは `min-height: var(--header-h)`（main.js が測った**詰める前**の実高）を持つので、詰めている間は外す
     （外さないと最小の高さに止められて縮まない）。
   ★浮きバーは外側の余白（浮かせるすき間）も 9.6px → 0.4rem に詰める（81 → 71px）。こちらはスクロールでは変えない（浮いた見た目を保つ）。 */
@media (max-width: 1100px) {
  body:is(.header-integrated, .header-overlay, .header-floating) .site-header__bar,
  body.header-sidebar .site-header__sidebar-head {
    padding-block: var(--hdr-top-pad, 0.45rem);
    transition: padding-block .2s ease;
  }
  body.header-floating .site-header { padding-block: 0.4rem; }
  body:is(.header-integrated, .header-overlay, .header-floating, .header-sidebar) .site-header.is-shrunk { --hdr-top-pad: 0.2rem; }
  body.header-overlay .site-header.is-shrunk .site-header__bar { min-height: 0; }
}
@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  body:is(.header-integrated, .header-overlay, .header-floating, .header-sidebar) .site-header.is-shrunk { --hdr-top-pad: 0.45rem; }
  body:is(.header-integrated, .header-overlay, .header-floating) .site-header__bar,
  body.header-sidebar .site-header__sidebar-head { transition: none; }
}
/* ━━ ★★★PC（情報ブロックがヘッダーに出る 901px 以上）はスクロール中、電話番号だけ残して住所・受付時間を隠し、ロゴと余白も詰める
   （2026-10-12 ユーザー決定。横型の全形状＝2段・統合・透過・浮き）━━
   ★★2段の「ロゴだけ縮める」は高さを減らせていなかった：上段の高さを決めていたのは右の情報ブロック
     （住所・電話・受付時間の3行＝70px）で、ロゴ（59px）を縮めても 128px のまま（実測 1280px）。
     → 情報ブロックを電話番号だけ（29px）にすると、ロゴの縮小も高さに効く。
   ★実測（ローカル・メニュー9項目）：1366px で 統合 134→99・2段 128→109・浮き 161→131px／1440px 以上の統合 92→58px。
     ノートPC の幅ではメニューが2行目に落ちて 134px（画面の17%）を取ったまま追従していた。
   ★★1段にもロゴの縮小を掛ける。上の「1段には掛けない」理由（スクロール中にロゴが縮むと収まりの判定が動く）は、
     判定と実高の測りを**詰める前の姿で**行う（main.js の atFullSize）ことで解いた。スクロールでは判定し直さない
     （判定は画面の幅が変わったときだけ）ので、詰めた姿の幅がメニューの収まりに戻ってくることは無い。
   ★サイドバーは対象外（縦の列で、スクロールしても大きさが変わらない＝情報を隠す理由が無い）。
   ★高さの変化は最大で約80px（住所が2行＋受付時間＝約60px と、1段の余白 16px）＝ヒステリシスの間隔（main.js）を 100px にした。
   ★幅の下端は 901px＝情報ブロックがヘッダーに出る幅（900px 以下は電話番号だけ＝§15 のモバイル）。901〜1100px の1段はメニューが
     ドロワーに入っていて（MENU ボタン）、情報ブロックが高さを決めていた（実測 1000px：統合 84px のうち情報ブロック 70px）。
     余白は §狭幅の余白 と同じトークンなので、重なる幅でも値は食い違わない。
   ★動きを減らす設定では詰めない・隠さない（2段と同じく「高さが動くこと」を動きとして扱う）。 */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  body:is(.header-integrated, .header-overlay, .header-floating) { --hdr-sc-shrink: 0.78; }
  body:is(.header-integrated, .header-overlay, .header-floating):has(.site-header.is-shrunk) {
    --logo-fs: calc(var(--logo-fs-base) * var(--hdr-sc-shrink));
  }
  body:is(.header-integrated, .header-overlay, .header-floating) .site-header.is-shrunk { --hdr-top-pad: 0.2rem; }
  body:is(.header-integrated, .header-overlay, .header-floating) .site-header.is-shrunk .site-header__logo-img {
    max-height: calc(var(--logo-img-h-eff) * var(--hdr-sc-shrink));
  }
  /* 余白：1段のバーは通常 0.7rem。タイル接地（hcta-panel）はバーの余白が 0 でブランドが持つので除く（下の §15 がトークンで詰める） */
  body:is(.header-integrated, .header-overlay, .header-floating):not(.hcta-panel) .site-header.is-shrunk .site-header__bar { padding-block: var(--hdr-top-pad); }
  body.header-overlay .site-header.is-shrunk .site-header__bar { min-height: 0; }
  /* ★color は透過の「透過↔白」の動き（§透過オーバーレイ）を消さないために残す（この宣言のほうが詳細度が高い） */
  body:is(.header-integrated, .header-overlay, .header-floating) :is(.site-header__bar, .site-header__name, .site-header__logo-img, .clinic-sym, .site-header__symbol img) {
    transition: padding-block .2s ease, font-size .2s ease, max-height .2s ease, width .2s ease, height .2s ease, color .25s ease;
  }
  /* 情報ブロック：電話番号だけ残す（WEB予約などのボタンはそのまま） */
  body:not(.header-sidebar) .site-header.is-shrunk :is(.site-topbar__address, .site-topbar__hours) { display: none; }
}
/* ★判定と測りの間（main.js の atFullSize・initBandFit）は動きを止める：外した直後に測ると、動き始めの値（詰めた姿）が返る／ドロワーの開閉の動きが走る */
html.hdr-measuring :is(.site-header, .site-header *) { transition: none !important; }
/* 上段右＝電話ブロック＋ボタン。中身の見せ方は §15（ヘッダーCTA）が持つ。 */
.site-header__top-right { display: flex; align-items: center; gap: var(--cta-gap, 1.2rem); }

/* ── ナビ帯の配色＝用途トークン6つ（2026-08-30）───────────────────────────────
   ★前提工事：ここに直書きされていた白（`#fff` 3・`rgba(255,255,255,…)` 6）を全部トークンへ畳んだ。
     **このコミットでは値は現行のまま＝見た目を1pxも変えない**（フッター配色トーンと同じ手順）。
   ★薄い面・線は「墨から作る」＝`--navband-ink` を color-mix で薄めて派生させる。
     地の側に白を直書きすると、明るいトーンにした瞬間に全部書き直す羽目になる
     （＝キットCSSがコンポーネントを再宣言していたのと同じ形）。派生なので、
     ink を1つ差し替えれば hover の面もドロワーの罫線も自動で追従する。
   ★`--navband-sep`（項目間の点線）だけは**担い手が変わりうる**ので独立させる：
     濃い地では「墨を薄めた線」でよいが、白い帯では汚れに見えるためブランド色の線が要る。
     色ではなく役割で持つ＝フッターの `--footer-mark`（暗地は accent／明地は primary）と同じ判断。 */
.site-header__nav-row {
  --navband-bg:        var(--wp--preset--color--primary);
  --navband-ink:       #fff;  /* 項目の文字＝薄い面・線の素にもなる */
  --navband-ink-hover: #fff;
  --navband-hover-bg:  color-mix(in srgb, var(--navband-ink) 15%, transparent);
  --navband-sep:       color-mix(in srgb, var(--navband-ink) 50%, transparent); /* 項目間の点線（PC） */
  --navband-rule:      color-mix(in srgb, var(--navband-ink) 25%, transparent); /* 段・ドロワーの境界 */
  background: var(--navband-bg);
}
.site-header__nav-inner { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); padding-block: 0; }
.site-header__nav-row .site-header__nav { width: 100%; }
.site-header__nav-row .primary-menu { justify-content: center; gap: 0.6rem; }
.site-header__nav-row .site-header__nav a { display: inline-block; padding: 0.85em 1.1em; color: var(--navband-ink); font-weight: var(--w-ui, 700); border-radius: 0; }
.site-header__nav-row .site-header__nav a:hover { color: var(--navband-ink-hover); background: var(--navband-hover-bg); }

/* ── 配色トーン軸（header_band_tone）＝**値の差し替えだけ**（2026-08-30）──────────
   既定 primary は上のブロックが持つ。soft / white は同じトークンを明るい地むけに入れ替える。
   ★構造（セレクタ・レイアウト）は一切増やさない＝フッター配色トーン（ftone-*）と同じ作り。
   ★2段（帯分離・上部中央）のときだけ意味を持つが、**CSS側でヘッダー形状を見る必要はない**——
     `.site-header__nav-row` は2段のマークアップにしか存在しないため（inc/header-settings.php）。
     条件を2か所に書かない。
   ★墨は `text-main`（パレット追従の黒系）。hover は「明るい地の上の薄いブランド面」で、
     透過オーバーレイが既に使っていた作り方（primary 10%）をそのまま既定へ昇格させた。 */
body:is(.navtone-soft, .navtone-white) .site-header__nav-row {
  --navband-ink:       var(--wp--preset--color--text-main);
  --navband-ink-hover: var(--wp--preset--color--primary-dark);
  --navband-hover-bg:  color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
  /* ★ここだけ墨から派生させない：白い帯に「墨を薄めた点線」を引くと、ブランドではなく汚れに見える。
     色数を増やさずに帯が院のものだと分かるよう、区切りにだけメインカラーを担わせる。 */
  --navband-sep:       color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent);
  /* ★★罫線も同じ理由でメインカラーにする（2026-08-30 実射FB）。
     ①**重さ**：既定値は `墨25%` だが、これは**濃い帯むけに作った値**（彩度の高い地に白25%＝十分細い）を
       明るいトーンへそのまま持ち込んだもの。同じ「白地に引く罫線」であるフッターの白トーンは **14%** で、
       25% はその倍近く＝書類の罫線に見えていた。
     ②**色**：この帯では項目の区切りを既にメインカラーにした。そこへ墨のグレー線を足すと、
       **同じ面の上に線の言語が2つ**できる。線はブランド色1本に揃えるほうが理由が1本で済む。
     ※ ドロワーの上端（`body.nav-open`）も同じトークンを読むので、明るいトーンでは両方が細いブランド線になる。 */
  --navband-rule:      color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
}
body.navtone-soft  .site-header__nav-row { --navband-bg: var(--wp--preset--color--primary-light); }
body.navtone-white .site-header__nav-row { --navband-bg: #fff; }
/* ★白は上段（`.site-header__top` も #fff）と同色なので、**2段であること自体が見えなくなる**。
   → 段の境目に罫線を1本置く（`ftone-white` がフッター上端に足したのと同型の補い。
   淡色は地の差で境界が出るので不要）。
   ★PC幅だけ：狭幅では帯はドロワー本体で、そもそも「2段の境目」が存在しない。
   　理由の無いところに宣言を置かない。 */
@media (min-width: 901px) {
  body.navtone-white .site-header__nav-row { border-top: 1px solid var(--navband-rule); }
}
/* ★下端（ヘッダーとヒーローの境）には**足さない**：`.site-header` が既に
   `box-shadow: 0 2px 12px primary/8%` を持っており、白い帯でも明るいヒーローと分離できている。
   ここに 1px の罫線を足すと担当者が2人になり、しかも柔らかい影より硬い線が勝って
   他のトーンと質感が揃わなくなる（実測して撤去）。**要るのは段の境目だけ**。 */
/* ドロップダウン（PC=hover/focus で飛び出す、SP=ドロワー内で常時展開）
   ★★★2026-08-22 実射FB「幅を狭めると診療案内の下層にカーソルを合わせるとリンク文字が左へ飛ぶ」：
     飛び出し用の位置指定（`position: absolute` / `translateX(-50%)`）を**全幅で**書いていて、
     狭幅側で `transform: none` に戻していた。しかし**打ち消しのほうが詳細度で負ける**——
       戻す側：`.site-header__nav-row .primary-menu .sub-menu`            … (0,3,0)
       PC側  ：`.site-header__nav-row .menu-item-has-children:hover > .sub-menu` … **(0,4,0)**（`:hover` が1つぶん）
     ＝**触っていないときは戻っているのに、ホバーした瞬間だけ PC 用の −50% が復活**して左へ飛ぶ。
   ★★詳細度で殴り返す（打ち消し側にも `:hover` を足す）のは採らない——**同じ条件を2か所に書く**ことになり、
     片方を直したときにまたズレる。**飛び出しに必要な指定を、最初から PC 幅の中だけに置く。**
     ＝下の `@media (min-width: 901px)` へ移設。狭幅では**そもそも当たらない**ので打ち消しが要らない。 */
.site-header__nav-row .primary-menu > li.menu-item-has-children { position: relative; }
.site-header__nav-row .menu-item-has-children > a::after { content: "▾"; margin-left: 0.35em; font-size: 0.8em; line-height: 1; }
/* 一覧としての素の体裁だけは全幅で共通（飛び出しの位置・見た目は PC 幅の中で足す） */
.site-header__nav-row .primary-menu .sub-menu { list-style: none; margin: 0; padding: 0.4rem; display: block; }
.site-header__nav-row .sub-menu a { display: block; color: var(--wp--preset--color--text-main) !important; font-weight: var(--w-ui, 700); padding: 0.55em 0.9em !important; border-radius: var(--r-field); text-align: left; }
.site-header__nav-row .sub-menu a:hover { color: var(--wp--preset--color--primary-dark) !important; background: var(--wp--preset--color--primary-light) !important; }
/* ★★帯のときだけ（2026-10-12）：PC 幅でも1行に収まらなければ MENU（ドロワー）に切り替える（下の §2段のドロワー）。
   ドロワーのときは区切りの点線も飛び出しも要らない＝`:where(body:not(.hdr-compact))` で外す。
   ★`:where()` は詳細度 0＝ここを読む他の宣言（透過・配色トーン）との勝ち負けを1つも変えない。 */
@media (min-width: 901px) {
  :where(body:not(.hdr-compact)) .site-header__nav-row .primary-menu > li { position: relative; }
  :where(body:not(.hdr-compact)) .site-header__nav-row .primary-menu > li + li::before { content: ""; position: absolute; left: -0.3rem; top: 50%; transform: translateY(-50%); height: 1.1em; border-left: 2px dotted var(--navband-sep); }
  /* ★飛び出し（フライアウト）＝**PC幅だけ**。狭幅はドロワー内で常時展開なので、
     位置指定そのものを持たせない（＝打ち消しが要らない・上の §ドロップダウン 参照）。 */
  :where(body:not(.hdr-compact)) .site-header__nav-row .primary-menu .sub-menu {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
    min-width: 180px; background: #fff; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.16);
    z-index: 60; opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease;
  }
  :where(body:not(.hdr-compact)) .site-header__nav-row .menu-item-has-children:hover > .sub-menu,
  :where(body:not(.hdr-compact)) .site-header__nav-row .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
  /* ホバーが途切れないよう、項目と飛び出しの間に見えない橋を渡す */
  :where(body:not(.hdr-compact)) .site-header__nav-row .primary-menu .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  /* ★折り返さないのは飛び出しのときだけ（ドロワーでは幅が限られるので折り返させる） */
  :where(body:not(.hdr-compact)) .site-header__nav-row .sub-menu a { white-space: nowrap; }
}
@media (max-width: 900px) {
  .site-nav-toggle { display: flex; }
  .site-header__nav-row { max-height: 0; overflow: hidden; opacity: 0; border-top: none; transition: max-height .3s ease, opacity .2s; }
  body.nav-open .site-header__nav-row { max-height: 80vh; opacity: 1; border-top: 1px solid var(--navband-rule); }
  .site-header__nav-row .primary-menu { flex-direction: column; align-items: stretch; gap: 0; }
  /* ★★2026-08-30 に削除：`border-bottom: 1px solid rgba(255,255,255,0.18)` が**元から死んでいた**。
     後段の汎用ドロワー（`.site-header__nav .primary-menu > li { border-bottom: 1px solid var(--rule) }`）が
     **同じ詳細度 (0,3,0) で後に来る**ため常に後勝ちで、この行の色は一度も描かれていない。
     ★トークン化のときに見つかった：置き換えると「ドロワーの区切りは帯の墨に追従する」と
     **嘘をつく行**になる（実際は形の軸の `--rule` が担当）。値を直すのではなく宣言ごと消す。 */
  .site-header__nav-row .site-header__nav a { display: block; padding: 0.9em 0.4em; }
  /* ★打ち消しは要らなくなった（2026-08-22）：飛び出しの指定は PC 幅の中にしか無いので、
     ここでは**インデントだけ**与える。打ち消しを残すと「PC側を消したのに打ち消しが残る」
     という読みにくい状態になり、いつか詳細度で負けて同じ不具合に戻る。 */
  .site-header__nav-row .primary-menu .sub-menu { padding: 0 0 0.4rem 1.2rem; }
  .site-header__nav-row .sub-menu a { color: color-mix(in srgb, var(--navband-ink) 92%, transparent) !important; background: transparent !important; padding: 0.6em 0.4em !important; font-weight: var(--w-ui, 700); }
  .site-header__nav-row .sub-menu a:hover { color: var(--navband-ink-hover) !important; background: color-mix(in srgb, var(--navband-ink) 12%, transparent) !important; }
}
/* ━━ ★★★2段のドロワー：PC 幅でもメニューが1行に収まらなければ MENU に切り替える（2026-10-12 ユーザー決定）━━
   ★それまで 901〜1099px（iPad の横向き・小さいノートPC）ではメニュー帯が2行に折り返し、
     最後の1項目だけが2行目に落ちて先頭に区切りの点線が付き、ヘッダーが 196px になっていた（実測 1000px・メニュー9項目）。
   ★body.hdr-compact は assets/js/main.js の initBandFit() が実測で付ける（1行に収まるかは院の項目数・ラベルの長さで決まる＝
     px の閾値では外れる。1段の §第3層 と同じ考え方で、クラス名も同じ＝「メニューを MENU へ退避した」）。
   ★★宣言は上の @media (max-width: 900px) と同一。片方だけ直すと「JS で畳んだときだけ崩れる」ので、変えるときは両方そろえる。
     ≤900px の床は JS が動かない環境のために残す（1段の @media (max-width: 1100px) と同じ役割）。 */
body.hdr-compact:is(.header-separated, .header-center) .site-nav-toggle { display: flex; }
body.hdr-compact:is(.header-separated, .header-center) .site-header__nav-row { max-height: 0; overflow: hidden; opacity: 0; border-top: none; transition: max-height .3s ease, opacity .2s; }
body.hdr-compact.nav-open:is(.header-separated, .header-center) .site-header__nav-row { max-height: 80vh; opacity: 1; border-top: 1px solid var(--navband-rule); }
body.hdr-compact:is(.header-separated, .header-center) .site-header__nav-row .primary-menu { flex-direction: column; align-items: stretch; gap: 0; }
body.hdr-compact:is(.header-separated, .header-center) .site-header__nav .primary-menu > li { border-bottom: 1px solid var(--rule); }
body.hdr-compact:is(.header-separated, .header-center) .site-header__nav-row .site-header__nav a { display: block; padding: 0.9em 0.4em; }
body.hdr-compact:is(.header-separated, .header-center) .site-header__nav-row .primary-menu .sub-menu { padding: 0 0 0.4rem 1.2rem; }
body.hdr-compact:is(.header-separated, .header-center) .site-header__nav-row .sub-menu a { color: color-mix(in srgb, var(--navband-ink) 92%, transparent) !important; background: transparent !important; padding: 0.6em 0.4em !important; font-weight: var(--w-ui, 700); }
body.hdr-compact:is(.header-separated, .header-center) .site-header__nav-row .sub-menu a:hover { color: var(--navband-ink-hover) !important; background: color-mix(in srgb, var(--navband-ink) 12%, transparent) !important; }
/* ★開いたときの「×」（3本線の変形）も、ドロワーになっている間はどの幅でも同じに（≤900px の §ハンバーガー変形 と同一）。
   1段が 901〜1100px でドロワーになっているときも、これまでは × に変わらなかった */
body.hdr-compact.nav-open .site-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.hdr-compact.nav-open .site-nav-toggle__bar:nth-child(2) { opacity: 0; }
body.hdr-compact.nav-open .site-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 院内紹介：トップのスライダー＋アーカイブのグリッド ── */
.facility__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--wp--preset--spacing--60, 1.5rem); margin-top: var(--wp--preset--spacing--70, 2rem); align-items: start; }
/* ★★`box-sizing: border-box` が要る（2026-09-09）：このテーマは `*` に border-box を掛けていないので、
   `width: 100%`（＝親のコンテンツ幅）に**自分の罫線 2px が外へ足される**。
   かっちり（`shape-sharp`）で罫線が付くと、カードが器から右へ 2px はみ出す。
   ★これまで見えなかったのは、外側 `.facility__card` の `overflow: hidden` が切っていたから
   ＝**隠れていただけで、ずれてはいた**。器の指定を一覧ページへ寄せた（下の §カードの器と見た目）
   ことではみ出しが表に出たので、原因のほうを直す。 */
.facility__card-inner { box-sizing: border-box; display: block; background: #fff; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-card); text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
a.facility__card-inner:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent);
}
/* ★写真枠はトップ・一覧ページ共通の1組（2026-08-01 に一覧ページ側の重複宣言を畳んだ。
   以前は同じクラスを2か所で宣言しており、後勝ちで地色だけ入れ替わっていた＝どちらが効くか
   読めない状態だった）。写真が無いとき（未選択／メディアから削除）は
   .facility__photo-empty（病院アイコン）を**両方の面で**出す。 */
.facility__photo { position: relative; aspect-ratio: 4 / 3; background: var(--wp--preset--color--primary-light); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.facility__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facility__photo-empty { color: var(--wp--preset--color--primary); opacity: 0.4; display: flex; }
/* ★キャプションの寄せは「レイアウト」ではなく**キャプションの性質**（2026-08-14 実射FB）。
   旧実装は中央寄せがスライダー限定のCSS（.facility__track .facility__body）にあり、
   トップをグリッドやモザイクに切り替えると左寄せに戻っていた＝同じ設定なのに寄せが変わる。
   下層ギャラリー（.facility__caption）とも食い違っていたので、部品側に一本化する。 */
.facility__body { padding: 1rem 1.1rem 1.2rem; text-align: center; }
.facility__title { font-size: 1.05rem; margin: 0 0 0.4em; }
.facility__desc { font-size: 0.9rem; color: var(--wp--preset--color--text-muted); line-height: 1.7; margin: 0; }
.facility__more { display: inline-block; margin-top: 0.7em; color: var(--wp--preset--color--primary); font-weight: var(--w-ui, 700); font-size: 0.85rem; }
.facility__slider { position: relative; margin-top: var(--wp--preset--spacing--70, 2rem); }
.facility__track { display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 0.5rem 0.25rem 1.2rem; scrollbar-width: none; }
.facility__track::-webkit-scrollbar { display: none; }
.facility__track > .facility__card { flex: 0 0 calc((100% - 2 * 1.4rem) / 3); scroll-snap-align: start; display: flex; flex-direction: column; }
.facility__track .facility__card-inner { flex: 1; display: flex; flex-direction: column; width: 100%; }
.facility__track .facility__photo { flex: 0 0 auto; }
/* スライダーはカードの高さが揃うので、余った縦の空きに対して中身を縦中央に置く。
   ★横の寄せ（text-align / align-items）はここでは持たない＝部品側（.facility__body）に一本化した。 */
.facility__track .facility__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.facility__nav { position: absolute; top: 38%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: #fff; color: var(--wp--preset--color--primary); box-shadow: 0 4px 14px rgba(0,0,0,0.14); font-size: 1.6rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s, opacity .2s; }
.facility__nav:hover { background: var(--wp--preset--color--primary); color: #fff; }
/* ★★★矢印は器の**内側**に置く＝はみ出させない（2026-08-19。2026-08-17 の対処を作り直した）。
   ┌ 経緯：元は `left/right: -10px` で器の外へ出していた。器が画面端まで届く幅では
   │ その10pxがページごと横に広がり、**ヒーローもヘッダーも一律に右へずれて見える**
   │ （原因が画面の外にある横あふれ。診療案内タイルと同型）。
   │ 2026-08-17 は `@media (max-width: 900px)` で「狭い画面だけ内側」にして塞いだつもりだった。
   └ ★**塞げていなかった**：実測 1100px でも `.facility__nav--next` が 8px はみ出す。
   ★★**条件が px で書けない**——実際の条件は「幅が900px以下か」ではなく
     **「器（最大1080px）の外に10px以上の余白が残っているか」**で、これは
     コンテナ幅・ガター・スクロールバーの有無で動く。だから閾値は必ずどこかで外れる。
     §1段ヘッダーの収まり で学んだのと同じ形（「px固定のブレークポイントでは必ずどこかで外れる」）。
   → **条件そのものを無くす**。矢印は常に器の内側（0）に置く。
     見た目の差は10pxで、矢印(44px)は元から器に34px重なっていたので実質変わらない。
     ≤900px は既にこの値だったので、そこは1pxも動かない。
   ※ 560px以下は矢印を出していない（スワイプで操作する）。 */
.facility__nav--prev { left: 0; }
.facility__nav--next { right: 0; }
.facility__nav:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.facility__dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.7rem; }
.facility__dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent); transition: background .2s, transform .2s; }
.facility__dot.is-active { background: var(--wp--preset--color--accent); transform: scale(1.25); }
.facility__more-wrap { text-align: center; margin-top: 1.6rem; }
.facility__more-btn { display: inline-block; padding: 0.7em 1.8em; border-radius: var(--r-btn); border: 1.5px solid var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); font-weight: var(--w-ui, 700); text-decoration: none; transition: background .2s, color .2s; }
.facility__more-btn:hover { background: var(--wp--preset--color--primary); color: #fff; }
@media (max-width: 900px) { .facility__track > .facility__card { flex-basis: calc((100% - 1.4rem) / 2); } .facility__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .facility__track > .facility__card { flex-basis: 82%; } .facility__nav { display: none; } .facility__grid { grid-template-columns: 1fr; } }

/* ── 院内紹介：トップの見せ方（3大別＋直交サブ軸）───────────────
   .section-facility にスコープ＝個別ギャラリーページ（.facility）には無干渉。
   ・写真の比率＝--fac-ratio（section のインラインstyleで注入・既定 4/3）
   ・grid＝静的タイル／mosaic＝ベント型グリッド（大タイル織り交ぜ・下端は行で揃う）
   ・overlay＝キャプションを写真の上にグラデで重ねる（mosaic は常に overlay） */
/* ★★下層ギャラリーも同じ比率トークンを読む（2026-08-22・棚卸しの優先2）。
   旧実装はギャラリーが `.section-facility` の外なので上の汎用規則（4/3 固定）に落ちており、
   **院が選んだ写真の縦横比（標準/正方形/横長）が下層に届いていなかった**（実測 1.33 固定）。
   ★注入は `clinic_facility_ratio_style( true )`＝トップの構えのゲートを外した版
     （ギャラリーは構えに関係なく常にグリッドなので、モザイクを選んでも比率は要る）。 */
.section-facility .facility__photo,
.facility__gallery .facility__photo { aspect-ratio: var(--fac-ratio, 4 / 3); }

/* グリッド（全カードを一度に並べる静的タイル） */
.facility__grid-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--wp--preset--spacing--60, 1.5rem); margin-top: var(--wp--preset--spacing--70, 2rem); align-items: start; }

/* モザイク（写真主役・ベント型＝固定行グリッドに大タイルを織り交ぜる。
   純マソンリーは似た比率の写真だと単調＆下端がラグるため、大小のリズムで“雑誌帯”感を出しつつ行で下端を揃える）。
   タイルは cover で埋める（--fac-ratio は使わずグリッドのセル高に従う）。 */
.facility__mosaic { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(120px, 26vw, 160px); grid-auto-flow: dense; gap: 1rem; margin-top: var(--wp--preset--spacing--70, 2rem); }
.facility__mosaic > .facility__card { grid-column: span 1; grid-row: span 1; margin: 0; min-width: 0; }
.section-facility.fac-layout-mosaic .facility__card,
.section-facility.fac-layout-mosaic .facility__card-inner,
.section-facility.fac-layout-mosaic .facility__photo { height: 100%; aspect-ratio: auto; }
.section-facility.fac-layout-mosaic .facility__photo img { height: 100%; object-fit: cover; }
/* デスクトップ/タブレット＝3列。大タイルは左右交互（6n+1=左／6n+4=右）。3枚以上のときだけ発動＝少枚数で穴が空かない */
@media (min-width: 561px) {
  .facility__mosaic { grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(135px, 14vw, 185px); gap: 1.2rem; }
  .facility__mosaic:has(> .facility__card:nth-child(3)) > .facility__card:nth-child(6n+1) { grid-column: 1 / span 2; grid-row: span 2; }
  .facility__mosaic:has(> .facility__card:nth-child(4)) > .facility__card:nth-child(6n+4) { grid-column: 2 / span 2; grid-row: span 2; }
}

/* ━━ キャプションが写真の下（below）のときは「カード」を作らない（2026-09-09 実射FB）━━━━
   実射FB「キャプションを写真の下にした場合に**カードの枠線**が出る。ボーダーはなしに」。
   ★**枠に見えていたものの正体は border ではない**（`.facility__card-inner` に border は無い）。
     淡い地（bg-soft）の上に載る**白い面 ＋ 影**（`--sh-card`）が、線を1本も引かずに
     矩形の輪郭として読めていた。＝直し方は「border を消す」ではなく**面と影をやめる**こと。
   ★★**角丸は写真自身へ移す**：角丸と `overflow:hidden` はこれまでカード側が持っていたので、
     面をやめると**写真の上の角だけ丸く、下の角は四角**という誰も設計していない形になる
     （カードの下半分＝キャプション面が消えるため）。`.facility__photo` は元から
     `overflow:hidden` を持っているので、そこに角丸を宣言するだけで済む。
     トークンは `--r-media`（単体で置かれる写真＝メディア。値は `--r-card` と同じだが意味が違う）。
   ★キャプションの**左右**パディングも外す＝写真の端と文字の端が揃う（カードが無くなった以上、
     内側へ寄せる理由も無い）。上下は写真との間隔なので残す。
   ★★かっちり（`shape-sharp`）の 1px 罫線も**この型では外す**。あちらは
     「影を消すと白地に白カードが消える」ための線なので、**カードを作らない型には前提が無い**。
     除外を書き忘れると、かっちりのときだけ本物の border が出て実射FBに逆戻りする。
   ★★★**箱は入れ子で2つある**（2026-09-09・最初の修正で外側を見落とした）：
     `.facility__card`（外）＞ `.facility__card-inner`（内）。外側は**下層ギャラリー用に書かれた
     宣言**（§院内紹介の一覧ページ・`background:#fff` ＋ **`border:1px solid var(--rule)`** ＋ 角丸）で、
     クラス名が同じでスコープが無いため**トップにも素通しで掛かっている**。
     ＝内側だけ透明にしても**白い面と本物の 1px 罫線は外側に残る**。しかも内側で写真に角丸を付けたので、
     **角丸の写真を角丸のカードが囲う**という二重の輪郭になっていた（実射FBそのもの）。
     ★教訓：**「枠を消す」ときは、その要素の親も見る。**同名クラスが別の画面のために
     スコープ無しで宣言されていると、消したつもりの面が一段外に残る。
   ※ overlay（重ね）は写真の上に文字を載せる型＝カードの面が写真そのものなので、この節の対象外。
   ★★2026-09-09（2回目のFB「これはこれでOKだが**従来のカード形式もよかった**ので選択肢に」）：
     枠なしを**既定にしたうえで軸にした**（`facility_frame`＝`plain` / `card`）。
     ＝ここから下は `fac-frame-plain` 専用。`card` は**打ち消しを1つも書かない**——
     素の `.facility__card` / `.facility__card-inner`（＋ `shape-sharp` の罫線）が
     そのまま従来のカードなので、**何も足さないことが「従来どおり」になる**。
     ★打ち消しで戻す書き方にすると、素の宣言を触ったときに `card` だけ黙って壊れる。 */
.section-facility.fac-cap-below.fac-frame-plain .facility__card,
.section-facility.fac-cap-below.fac-frame-plain .facility__card-inner {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
body.shape-sharp .section-facility.fac-cap-below.fac-frame-plain .facility__card,
body.shape-sharp .section-facility.fac-cap-below.fac-frame-plain .facility__card-inner { border: none; }
/* ★角丸は**枠なしのときだけ**写真へ移す。カードのときは従来どおりカードの `overflow:hidden` が
   写真の上の角を落とす＝**丸い箱は常にひとつ**（写真とカードが二重に丸くならない）。 */
.section-facility.fac-cap-below.fac-frame-plain .facility__photo { border-radius: var(--r-media); }
.section-facility.fac-cap-below.fac-frame-plain .facility__body { padding-inline: 0; }
/* ホバーは持ち上げだけ残す。面が無いので影を出すと**影だけが矩形に浮いて**また枠に見える。 */
.section-facility.fac-cap-below.fac-frame-plain a.facility__card-inner:hover { box-shadow: none; }

/* キャプション位置＝写真の上に重ねる（overlay。mosaic も同クラスで発動） */
.section-facility.fac-cap-overlay .facility__card-inner { position: relative; }
.section-facility.fac-cap-overlay .facility__photo { height: 100%; }
/* ★横の寄せはここでは持たない（2026-08-14）。旧実装の `text-align: left; align-items: flex-start` は
   スライダー限定CSSの中央寄せを打ち消すために置かれたもので、中央寄せを部品側へ移した今は
   「重ねだけ左寄せ」という食い違いを生むだけになる。ここが担うのは**下端に置くこと**だけ。 */
.section-facility.fac-cap-overlay .facility__body {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: 1.5rem 1.1rem 1rem; justify-content: flex-end;
  background: linear-gradient(to top, rgba(0,0,0,0.74), rgba(0,0,0,0.34) 46%, rgba(0,0,0,0) 88%);
}
.section-facility.fac-cap-overlay .facility__title { color: #fff; }
.section-facility.fac-cap-overlay .facility__desc { color: rgba(255,255,255,0.92); }
.section-facility.fac-cap-overlay .facility__more { color: #fff; }

@media (max-width: 900px) { .facility__grid-top { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .facility__grid-top { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   ヘッダーレイアウト軸（統合 / 透過オーバーレイ / サイドバー）
   ── ヘッダー形状は clinic_get_active_header() のグローバル設定でキット非依存。
      旧 kit-soft.css から昇格し、trust / normal / 今後のキットも同じ配置を継承。
      色・影・角丸はトークン追従。
═══════════════════════════════════════════════════════════════ */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ヘッダー：1段レイアウト（構造）軸 body.header-integrated / body.header-overlay
   ロゴ左・メニュー中央寄り・右にアクション（電話＋WEB予約）
   ※構造（flex配置・メニュー・ドロップダウン・ドロワー）は両者で共有。
     透過オーバーレイ固有の見た目（透過・白文字・スクロール不透明化）は後段のスキンで定義。
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ★★★1段ヘッダーの罫線も**スクロールしてから**（2026-08-31 実射FB
     「スクロールしていない状態なら box-shadow はないほうが良い。下スクロールした場合はあって良い」）。
   ┌ 2026-08-30 に2段ヘッダーを「スクロール後だけ影」にしたとき、**1段だけ据え置いた**——
   │ ここが `box-shadow` を直接宣言していて、トークンの器（`.site-header`）より高詳細度で勝つため
   │ （`:is(…)` は引数の最大＝(0,1,0)、足して **(0,2,0)** 対 (0,1,0)）。
   │ ＝「触らない」という判断であって、**最上部に罫線が要るという判断ではなかった**。
   └ → **宣言をやめて器に合流させる**。器は `box-shadow: var(--hdr-shadow, none)` なので、
     最上部は自動的に `none`。スクロール後の値だけ下でこの形状用に差し込む。
   ★同じ規則が全形状に揃う＝2026-08-30 の「自分で影を宣言している形状には触れない」という
     **例外が1つ減る**（＝次に影を触る人が場合分けを1つ減らせる）。 */
:is(.header-integrated, .header-overlay, .header-floating) .site-header { background: #fff; }
/* ★スクロール後は**従来どおりの1pxの罫線**（ぼかしの影に替えない＝見た目を変えるのは最上部だけ）。
   詳細度 (0,3,0) で素の `.site-header.is-scrolled`（(0,2,0)・ぼかし）に勝つので、値は漏れない。 */
:is(.header-integrated, .header-overlay, .header-floating) .site-header.is-scrolled { --hdr-shadow: 0 1px 0 rgba(0,0,0,0.06); }
/* ★バー幅は「中身が必要なぶんだけ広がる」可変式（2026-07-25）。
   固定 max-width を広げると（例 1500px）、余った幅を .site-header__nav-wrap（flex:1 1 auto）が
   吸ってしまい、**ロゴとCTAが左右に引き離される**（実測：max-width:1500px でロゴ右端とCTA左端の
   間隔が 986px＝真ん中が巨大な空白）。width:fit-content なら中身の必要幅で止まるので、
   「広い画面では広げる」と「離さない」を同時に満たせる（同条件の実測でバー幅 1374px で自動停止）。
   下限＝従来の 1360px（狭くなりすぎない）／上限＝1500px（メニューが長いクリニックの収容力を +140px）。 */
:is(.header-integrated, .header-overlay, .header-floating) .site-header__bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  /* ★box-sizing を明示すること：このテーマは content-box が既定なので、指定しないと
     min-width:100% の内容幅に左右 padding が上乗せされ、**バーがビューポートより広くなり
     横スクロールが出る**（実測：幅1265px の画面でバー1305px＝padding 40px ぶんはみ出した）。 */
  box-sizing: border-box;
  width: fit-content;
  min-width: min(1360px, 100%);
  /* ★★上限 1500→1620px（2026-08-19。ロゴを大きくしたぶんブランド枠が 182→255px に広がるため）。
     `width: fit-content` なので**必要なときだけ広がる**＝広い画面でロゴとCTAが引き離されることはない
     （2026-07-25 に確立した性質）。上限は「常用する幅」ではなく「ブレを吸収する余裕代」。
     ★★上限 1620→1800px（2026-09-25 実射FB「1段でハンバーガーになるのを避けたい」）。
     2026-08-19 に「1800px 画面でも既に上限に張り付く＝大多数の画面で1pxも増えない」として
     見送った案だが、**いちばん多いデスクトップ幅の 1920px では効く**：画像ロゴ＋住所つきCTA＋
     メニュー9項目の実測で、必要なバー幅 1735px に対し上限 1620px＝ロゴを控えめにしても 13px 足りず
     ハンバーガーになっていた。上限を上げても広がるのは必要なときだけ（fit-content）。 */
  max-width: min(1800px, 100%);
  margin-inline: auto;
  padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
}
/* ★★★1段ヘッダーの「控えめ（×0.74）」を撤去した（2026-08-31 実射FB
     「透過が通常（不透明）の場合には、クリニック名が小さくなっているように見える」）。
   ┌ 旧実装は2行が対になっていた：ここで 1段（統合・透過・フローティング）を 0.74倍に落とし、
   │ 透過だけ下の `body.header-overlay { --logo-fs: var(--logo-fs-base); }` で戻していた。
   │ ＝**同じ形状のまま、透過を切り替えただけでクリニック名が 31.4px ↔ 23.2px（26%）変わる**。
   ├ ★★理由が2つとも成立していなかった：
   │   ①高さ … バーの高さは「ブランド／CTA列／トグル」の**いちばん高い列**で決まる。
   │     実測：ブランド列 62.97px に対し CTA列 70.03px ＝ **ロゴを 0.74倍にしてもバーは 92.41px のまま**
   │     （1px も縮まない）。高さのために払っていたのに、高さは1px も買えていなかった。
   │   ②幅 … 「メニューが切れる」は 2026-08-19 の**退避階段**（`hdr-logo-base`＝ロゴを控えめへ戻す）が
   │     実測で担当する。閾値を CSS に二重に持つ必要はない。
   └ ★画像ロゴの1段縮小（旧 40px）は 2026-08-19 に**同じ理由で撤去済み**だった。
     文字ロゴだけ取り残されていた＝「大きさ」の設定が形状によって黙って効かない状態
     （このテーマが繰り返し踏んでいる型）。→ 6形状すべてで院の設定どおりに描く。 */
:is(.header-integrated, .header-overlay, .header-floating) .site-header__nav-wrap { flex: 1 1 auto; min-width: 0; }
:is(.header-integrated, .header-overlay, .header-floating) .site-header__actions { display: flex; align-items: center; gap: var(--cta-gap, 0.9rem); margin-left: auto; flex-shrink: 0; flex-wrap: nowrap; }
/* ★電話の中身（縦積み/横並び・字送り・色）は §15 が3大別で決める。
   ここにあった !important の強制横並びは「情報ブロック」型を潰すため削除（2026-07-25）。 */

:is(.header-integrated, .header-overlay, .header-floating) .site-header__nav .primary-menu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.12rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
:is(.header-integrated, .header-overlay, .header-floating) .site-header__nav a {
  display: inline-block;
  color: var(--wp--preset--color--text-main);
  font-weight: var(--w-ui, 700);
  font-size: 0.85rem;
  padding: 0.5em 0.72em;
  border-radius: var(--r-field);
  text-decoration: none;
  white-space: nowrap;
}
:is(.header-integrated, .header-overlay, .header-floating) .site-header__nav a:hover {
  color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--primary-light);
}

/* ★第2層：幅に応じてメニューを連続的に詰める（2026-07-25）。
   1段ヘッダーは「ロゴ＋メニュー＋電話/予約」を1行に収める必要があり、画面が狭いほど余裕がない。
   ブレークポイントで段階的に切り替えるとクリニックごとの項目数・ラベル長でズレるため、
   1101px（ドロワーに切り替わる幅）〜1500px（バーの上限）で線形に詰める。
   端点＝1500px で 0.85rem/0.72em/0.12rem（ゆったり）／1265px で 0.78rem/0.45em/0.02rem（詰め切り）。
   実測（メニュー9項目・幅1265px）＝必要幅 717px → 663px となり、与えられる 663px にちょうど収まる。
   ※これでも足りない項目数はある（第3層のハンバーガー退避が受け止める）。 */
@media (min-width: 1101px) {
  :is(.header-integrated, .header-overlay, .header-floating) .site-header__nav a {
    font-size: clamp(0.78rem, calc(6.45px + 0.477vw), 0.85rem);
    padding-inline: clamp(5.6px, calc(1.774vw - 16.82px), 9.8px);
  }
  :is(.header-integrated, .header-overlay, .header-floating) .site-header__nav .primary-menu {
    gap: clamp(0.32px, calc(0.681vw - 8.3px), 1.92px);
  }
  /* ★★退避⓪：詰め切りを画面幅と切り離して使う（2026-09-25）。
     上の clamp は 1500px 未満でしか詰めないので、広い画面では余白を残したままドロワーへ落ちていた
     （実測 1920px：あと 13px 足りずにハンバーガー）。値は clamp の下端＝1265px 以下で常用している見た目。
     `main.js` の initHeaderFit が、1行に入らないときの最初の一手として付ける（実測 774→637px）。 */
  body.hdr-nav-tight:is(.header-integrated, .header-overlay, .header-floating) .site-header__nav a {
    font-size: 0.78rem;
    padding-inline: 5.6px;
  }
  body.hdr-nav-tight:is(.header-integrated, .header-overlay, .header-floating) .site-header__nav .primary-menu {
    gap: 0.32px;
  }

  /* ★★退避④：メニューを2行目へ降ろす（2026-09-25 実射FB「1段でハンバーガーになるのを避けたい」）。
     ロゴ・住所を諦めても1行に入らないとき、ドロワーより先にこちらを試す。
     ヘッダーは1行ぶん高くなるが、**メニューは見えたまま**（案内の本体を最後まで守る）。
     ・メニューが行を離れるので住所・ロゴは入力どおりに戻す（ドロワーと同じ扱い）。
     ・バーは可変幅をやめて上限いっぱいに広げる＝1行目はロゴ左・CTA右、2行目はメニューを中央。
     ・高さは `main.js` が実測して `--header-h` に渡すので、透過ヒーローとの重なりも追従する。
     ・ドロワーの床（1100px 以下）では付かない（JS がメディアクエリで守る）。
     ・2行目の上下余白はバーの padding に頼らない：CTAタイル（hcta-panel）はバーの上下 padding を
       0 にするので、頼ると2行目が帯の下端に貼り付く。 */
  body.hdr-2row:is(.header-integrated, .header-overlay, .header-floating) .site-header__bar {
    flex-wrap: wrap;
    row-gap: 0;
    width: auto;
  }
  body.hdr-2row:is(.header-integrated, .header-overlay, .header-floating) .site-header__nav-wrap {
    order: 3;
    flex: 1 0 100%;
    padding-block: 0.15rem 0.1rem;
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
  }

  /* ★★1行のメニューを**バーの中心ではなくロゴ本体（画像／院名）の中心**にそろえる
     （2026-09-25 実射FB「メニューが上に寄りすぎ」）。
     ブランド列は「キャッチ＋ロゴ本体＋英語表記」で中央に置かれるので、ロゴ本体は上下に付くものの差の
     半分だけずれる（実測 1920px：画像ロゴ＋キャッチ＝+8.2px／テキストロゴ＋キャッチ＋英語表記＝+0.8px）。
     ★★量は `main.js` が実測して `--nav-shift` に渡す。初版は `calc(var(--hdr-catch-h) / 2)` と
       決め打ちしたが、英語表記が下に付くテキストロゴでは上下が相殺していて **8px 下げすぎた**
       （実射FB 第2報）。何が上下に付くか・行の高さ・画像の縦横比で変わる＝式では当てられない。
     ★JSが来る前は 0（＝バーの中心。従来どおり）。
     ★`translate` で動かす：レイアウトに入らないので、バーの高さ（`--header-h`）も収まりの判定も変わらない。
     ★ドロワー（ナビ列を絶対配置で吊る）と2行目（メニューは自分の行を持つ）では動かさない。
     ※ CTA列（住所・電話・受付時間）は自分の塊の中心で置くほうが据わるので動かさない。 */
  body:not(.hdr-compact):not(.hdr-2row):is(.header-integrated, .header-overlay, .header-floating) .site-header__nav-wrap {
    translate: 0 var(--nav-shift, 0px);
  }
}

/* 診療案内ドロップダウン（統合版・白ヘッダー） */
:is(.header-integrated, .header-overlay, .header-floating) .site-header__nav .menu-item-has-children { position: relative; }
:is(.header-integrated, .header-overlay, .header-floating) .site-header__nav .menu-item-has-children > a::after { content: "▾"; margin-left: 0.3em; font-size: 0.8em; }
/* ★★1段も 2段とまったく同じ穴を持っていた（2026-08-22。実射FBは 2段で出たが原因は共通）：
   飛び出しを**開く**指定は `:hover` が入るぶん詳細度が1つ高いので、
   「ドロワーでは静的に戻す」打ち消しに**ホバーのときだけ勝ち**、静的なサブメニューへ
   `translateX(-50%)` が掛かって**文字が左へ飛ぶ**。
   ※ ドロワー時は `body.hdr-compact …`（要素1つぶん詳細度が上）で**偶然**守られていた。
     偶然に頼っている状態は、打ち消し側のセレクタを少し変えた瞬間に壊れる。
   → 2段と同じ扱いにする：**素の一覧の体裁だけを全幅で持ち、飛び出しは横並びの幅の中だけ**に置く。
     1段がドロワーへ落ちる境目は 1100px（下の `@media (max-width: 1100px)`）。 */
:is(.header-integrated, .header-overlay, .header-floating) .site-header__nav .primary-menu .sub-menu {
  display: block;
  list-style: none; margin: 0; padding: 0.4rem;
}
:is(.header-integrated, .header-overlay, .header-floating) .site-header__nav .sub-menu a {
  display: block; color: var(--wp--preset--color--text-main) !important;
  font-weight: var(--w-ui, 700); padding: 0.55em 0.9em !important; border-radius: var(--r-field); text-align: left;
}
@media (min-width: 1101px) {
  :is(.header-integrated, .header-overlay, .header-floating) .site-header__nav .primary-menu .sub-menu {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 180px; background: #fff;
    border-radius: var(--r-field); box-shadow: 0 12px 30px rgba(0,0,0,0.16);
    z-index: 60; opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease;
  }
  :is(.header-integrated, .header-overlay, .header-floating) .site-header__nav .menu-item-has-children:hover > .sub-menu,
  :is(.header-integrated, .header-overlay, .header-floating) .site-header__nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  }
  /* ホバーが途切れないよう、項目と飛び出しの間に見えない橋を渡す */
  :is(.header-integrated, .header-overlay, .header-floating) .site-header__nav .primary-menu .sub-menu::before {
    content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
  }
  /* ★折り返さないのは飛び出しのときだけ（ドロワーでは幅が限られるので折り返させる） */
  :is(.header-integrated, .header-overlay, .header-floating) .site-header__nav .sub-menu a { white-space: nowrap; }
}
:is(.header-integrated, .header-overlay, .header-floating) .site-header__nav .sub-menu a:hover {
  color: var(--wp--preset--color--primary-dark) !important;
  background: var(--wp--preset--color--primary-light) !important;
}

/* ★第3層：詰めても収まらないときの安全網（2026-07-25）。
   body.hdr-compact は assets/js/main.js の initHeaderFit() が実測で付ける
   （「メニューの必要幅 > ロゴとCTAを引いた残り幅」なら付与）。閾値を px で固定しないのは、
   必要幅がクリニックごとに変わるため（ロゴ幅・項目数・日本語ラベル長・CTAに受付時間や住所を出すか）。
   ★下の @media(max-width:1100px) は残すこと——JSが動かない環境でも狭幅でドロワーになる床。
   ★宣言は下のメディアクエリと同一。片方だけ直すと「JSで畳んだときだけ崩れる」ことになるので、
     変更するときは必ず両方そろえること。 */
body.hdr-compact:is(.header-integrated, .header-overlay, .header-floating) .site-nav-toggle { display: flex; }
body.hdr-compact:is(.header-integrated, .header-overlay, .header-floating) .site-header__nav-wrap {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
  transition: max-height .3s ease, opacity .2s;
  z-index: 50;
}
body.hdr-compact:is(.header-integrated, .header-overlay, .header-floating).nav-open .site-header__nav-wrap {
  max-height: 80vh; opacity: 1; pointer-events: auto;
}
body.hdr-compact:is(.header-integrated, .header-overlay, .header-floating) .site-header__nav .primary-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 0.6rem clamp(1rem,4vw,2.5rem) 1rem; }
body.hdr-compact:is(.header-integrated, .header-overlay, .header-floating) .site-header__nav .primary-menu > li { border-bottom: 1px solid var(--rule); }
body.hdr-compact:is(.header-integrated, .header-overlay, .header-floating) .site-header__nav a { display: block; padding: 0.9em 0.4em; }
body.hdr-compact:is(.header-integrated, .header-overlay, .header-floating) .site-header__nav .primary-menu .sub-menu {
  position: static; transform: none; opacity: 1; visibility: visible;
  box-shadow: none; border-radius: 0; min-width: 0; padding: 0 0 0.4rem 1.2rem;
}
/* 畳んだときはメニューが行から消えるので、バーは可変幅をやめて通常の中央寄せに戻す
   （fit-content のままだとロゴとCTAだけの幅に縮み、左右に寄って見える）。 */
body.hdr-compact:is(.header-integrated, .header-overlay, .header-floating) .site-header__bar { width: auto; }

/* 統合版：狭い画面は早めにハンバーガー（ロゴ＋トグル → ドロワー）
   ＝JSが動かない環境でも成立させるための床。上の hdr-compact と宣言をそろえること。 */
@media (max-width: 1100px) {
  :is(.header-integrated, .header-overlay, .header-floating) .site-nav-toggle { display: flex; }
  :is(.header-integrated, .header-overlay, .header-floating) .site-header__nav-wrap {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height .3s ease, opacity .2s;
    z-index: 50;
  }
  body:is(.header-integrated, .header-overlay, .header-floating).nav-open .site-header__nav-wrap {
    max-height: 80vh; opacity: 1; pointer-events: auto;
  }
  :is(.header-integrated, .header-overlay, .header-floating) .site-header__nav .primary-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 0.6rem clamp(1rem,4vw,2.5rem) 1rem; }
  :is(.header-integrated, .header-overlay, .header-floating) .site-header__nav .primary-menu > li { border-bottom: 1px solid var(--rule); }
  :is(.header-integrated, .header-overlay, .header-floating) .site-header__nav a { display: block; padding: 0.9em 0.4em; }
  /* ドロワー内：サブメニューは静的に展開 */
  :is(.header-integrated, .header-overlay, .header-floating) .site-header__nav .primary-menu .sub-menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    box-shadow: none; border-radius: 0; min-width: 0; padding: 0 0 0.4rem 1.2rem;
  }
}

/* ━━ ヘッダー：上部中央（header-center）＝帯分離の2段markupを流用しロゴ行を中央寄せ ━━
   ナビ帯は帯分離と同じく既に中央寄せ（.site-header__nav-row .primary-menu{justify-content:center}）。
   センタリングはPC幅のみ（モバイルは帯分離のバー＋ドロワー）。

   ★★★2026-08-22（実射FB「狭いデスクトップ幅でロゴと電話が重なる」）：
     旧実装は**電話＋予約を絶対配置**していた。絶対配置は流れから外れる＝**他の要素と重なれる**ので、
     幅が足りるかどうかに関係なくロゴの上に乗る（実測 985px で **115px** 重なり／
     重なりが解消するのは約 1200px 以上＝「狭いデスクトップ」の全域で壊れていた）。
   ★★**しきい値を上げる直し方は採らない**：必要な幅は
     ロゴの幅＋住所の有無（`cta_address`）＋CTAの大きさ（`cta_size`）で動くので、
     px の閾値では必ずどこかで外れる（§院内紹介スライダーの矢印・§フロストの裾 と同じ型）。
   → **3カラムのグリッドにして、重なりを構造的に不可能にする。**
     `1fr auto 1fr` の中央にロゴを置くと、左右の 1fr が等しいあいだ＝**ロゴは真ん中**。
     右の中身が取り分より広くなると右カラムだけが伸び、**ロゴは連続的に左へ寄る**
     （＝いちばん狭いところでは帯分離と同じ「左ロゴ・右CTA」に自然に着地する）。
     **閾値を持たずに「入るときだけ中央」を実現できる**のが要点。 */
@media (min-width: 768px) {
  .header-center .site-header__top-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    position: relative;
  }
  .header-center .site-header__brand { grid-column: 2; text-align: center; }
  /* ★右端へ寄せるのは justify-self＝**流れの中**で右寄せする（絶対配置に戻さない）。 */
  .header-center .site-header__top-right { grid-column: 3; justify-self: end; }
}

/* ━━ ヘッダー：フローティング（header-floating）＝統合バーmarkupを流用し角丸の浮きバーに ━━
   コンテナは透明にして上下左右に余白を作り、中の .site-header__bar を白の角丸パネル＋影で浮かせる。
   ※写真ヒーローのフロントでは下の規則で絶対配置にしてヒーローへ重ねる（それ以外は通常の流れ）。 */
.header-floating .site-header {
  background: transparent; box-shadow: none;
  /* コンテナは透明なので、キット既定のヘッダーぼかし（例 kit-soft の blur(8px)）は不要＝無効化。
     ぼかしは透過ON時に中のピル（.site-header__bar）側だけで掛ける。 */
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: clamp(0.6rem, 1.4vw, 1rem) clamp(0.8rem, 3vw, 1.6rem);
}
.header-floating .site-header__bar {
  /* 幅を広げ・内側余白と間隔を詰めて、ロゴ｜メニュー｜電話+予約が重ならず収まるように。
     ★浮きバーは左右に余白を持つぶん統合より控えめな下限にする。
     min-width と max-width は必ずセットで上書きすること——片方だけ変えると
     min-width(1360) > max-width(1300) になり、CSS では min-width が勝つため上限が効かなくなる。
     ★★上限は統合と同じ 1500px に揃えた（2026-07-28）。旧 1440px は**フォントが変わると
       外れる**：Webフォント適用時のバーが 1425px＝上限まで **15px** しか余裕がなく、
       システムフォント表示（`display=optional` の初回訪問）では中身が 1462px 必要になって
       頭打ち→ドロワーへ落ちていた。**上限を上げてもWebフォント時のバー幅は 1425px のまま
       1px も動かない**——`width: fit-content` は中身の必要幅で止まるため（2026-07-25 に
       確立した性質。「広い画面では広げる」と「ロゴとCTAを離さない」の両立）。
       ★上限は「常用する幅」ではなく「**フォント・項目数のブレを吸収する余裕代**」と考えること。 */
  min-width: min(1240px, 100%);
  max-width: min(1800px, 100%);
  gap: clamp(1rem, 1.8vw, 1.6rem);
  padding: 0.55rem clamp(1.1rem, 2vw, 1.8rem);
  background: #fff;
  /* 角丸はトークン化：ヘッダーCTAの「タイル接地」（§15）が、右端タイルの外角を
     この半径に合わせる必要があるため（値を二重に書くとズレる）。 */
  --float-r: clamp(22px, 3vw, 34px);
  border-radius: var(--float-r);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* ★★スマホでは外側（浮かせる余白）と内側（ピルの左右）を詰める（2026-09-26 実射FB「浮きバーだと2行になる」）。
   上の clamp の下限（外 0.8rem＋内 1.1rem＝片側 30.4px）は、帯の形状（片側 15px）より院名の取り分が約30px狭い。
   実測 375px・16字の院名：必要 208px に対し 207px ＝**1px 足りずに2行**（名前は既に下限 13px まで縮んでいる）。
   → 外 0.5rem＋内 0.75rem（片側 20px）にして約 21px を院名へ返す＝浮いて見える余白は残したまま1行に入る。
   ★角丸（狭幅で 22px）に中身が触れないのは、ピルが 74px と高く、曲がり始めが上下 22px の帯に収まるため。 */
@media (max-width: 600px) {
  .header-floating .site-header { padding-inline: 0.5rem; }
  .header-floating .site-header__bar { padding-inline: 0.75rem; }
}
/* 浮きバーはヒーローに重ねて上の白隙間をなくす（透過ON/OFF問わず・写真ヒーローのフロントのみ）。
   ★★2026-07-30：**絶対配置でヒーローに重ねる**方式に変更（実射FB「ページ最上部に白い線が出る」）。
     旧実装は「流れに置いたまま、ヒーローを --float-h(=100px) だけ引き上げて重ねる」だったが、
     浮きバーの実高＝コンテナの上下padding（clamp 9.6〜16px×2）＋ピルの高さ（中身で決まる）は
     **ビューポート幅・CTAの構え・大きさ軸・ロゴ画像の高さで変わる**。実測（幅1920px）：

       hcta-panel/small 94.4px ／ hcta-stack/small 102.3px ／ hcta-inline/standard 108px

     引き上げ量は 100px 固定なので、**実高が 100px を超えた差ぶんだけヒーローが下がり、
     そこに body の白地が「ページ最上部の白い線」として出る**（stack/small で 2.3px・
     inline/standard で 8px）。100px はどの値に直しても、ロゴ画像の高さが違うクリニックで再発する。
   → **流れから外して重ねる**方式に変更（2段ヘッダーの透過と同じ考え方）。
     「引き上げ量」という載せ物そのものが無くなるので、バーが何px になっても隙間は構造的に出ない。
   ★**`absolute` ではなく `fixed`**：浮きバーは「スクロールしても浮いたまま追従する」designで、
     透過スキンにも `.is-scrolled` でピルを白ソリッド化する規則がある（§透過オーバーレイ×形状）。
     `absolute` だとヒーローと一緒に流れ去ってその規則が死ぬ。`fixed` なら
     **流れを占有しない（＝白線が出ない）** と **追従する** を同時に満たす。
     ※2段（帯分離・上部中央）×透過は `absolute` のまま＝あちらは「ヒーローに固定的に重なる」設計。
   ※ドロワー（.site-header__nav-wrap）は元から `position:absolute; top:100%` で流れを押さないため、
     ヘッダーを流れから外しても開閉の挙動は変わらない。 */
.header-floating.has-hero-photo .site-header {
  position: fixed; top: var(--admin-bar-h); left: 0; right: 0; z-index: 100;
}
/* --float-h は「バーがヒーローから食う高さ」＝逃げ量だけを担う（隙間の有無には関与しない）。
   ここは padding／安全域なので実高と数px ずれても見た目に出ない。 */
.header-floating.has-hero-photo { --float-h: 100px; }
.header-floating.has-hero-photo .section-hero .hero__inner {
  padding-top: calc(var(--float-h) + var(--wp--preset--spacing--60, 1.5rem));
}
/* ★奪ったぶんを返す（2026-07-28・§--hero-header-inset 参照）。フローティングは透過ON/OFF に
   関わらず常にヒーローへ重なるので、ここも hov の条件を付けない（重ねる条件とそろえる）。
   ※2026-07-30 に引き上げ（margin-top）は廃したが、**バーがヒーローの上端を覆う点は変わらない**
     ＝食う高さは残るので、返す側（min-height の補正・埋め込みの安全域）はそのまま必要。
     2段（絶対配置）も同じく margin-top を持たずに inset だけを宣言している。
   ※companion クラスは排他（統合だけが header-overlay を得る）なので、値の取り合いは起きない。 */
.header-floating.has-hero-photo .section-hero { --hero-header-inset: var(--float-h); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ヘッダー：透過オーバーレイ・スキン（body.header-overlay）
   構造は上の1段レイアウトを共有。ここでは「透過↔ソリッド」の見た目だけを定義。
   フロント＋写真ヒーロー（body.has-hero-photo）のときのみ透過。
   それ以外（内部ページ・色/イラストヒーロー）はソリッド白で安全フォールバック。
   スクロールは既存JS（.site-header.is-scrolled）を流用＝JS改修なし。
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ★★★ヘッダーの高さは**ロゴから導出**する（2026-08-19。旧＝84px のベタ書き）。
   ┌ この値はバーの `min-height` と、ヒーローの引き上げ量 `margin-top: calc(-1 * --header-h)` の
   │ **両方**に使われる。実際の高さと食い違うと、引き上げが足りずヒーロー写真の上に地色の帯が出る。
   ├ 84px は**「ロゴ48px・キャッチ無し」の前提で決めた定数**だった。前提が変わるたびに破れる：
   │   実際、キャッチを足した日に 91.6px となり、1段のロゴを 48→40px に落として辻褄を合わせていた
   │   （＝ロゴという主役を、定数を守るために小さくしていた。順序が逆）。
   └ → **ロゴが高さを決め、ヘッダーがそれに従う**形に反転させる。
   内訳＝ロゴ + キャッチ1行(14px)+間隔(2.4px) + 上下padding(0.85rem×2＝27.2px)。余裕を 4px 見て切り上げ。
   ★84px は下限として残す（小さいロゴでヘッダーが痩せすぎないように）。
   ★テキストロゴのときは行の積み上げで決まるので導出しない（`logo-image` の companion が付いたときだけ）。

   ★★★2026-08-31：**ここの宣言は「JSが来る前の下敷き」になった**（実射FB「最上部に白い帯」）。
     導出はブランド列しか見ていないが、バーの高さは**いちばん高い列**で決まる——
     実測（`hcta-stack` + 住所ON）：ブランド列 62.97px に対し **CTA列 70.03px** ＝ 92.41px。
     文字ロゴだから 84px のままで、8.41px の白帯が出ていた。
     ★★列の中身（住所の有無・構え・受付時間の折り返し）で決まる以上、**式では当てられない**。
       → 実高は `main.js` の `initHeaderFit`（収まりの確定後）が測って上書きする。
       ここは**値が無い瞬間を作らない**ための初期値として残す（`--logo-h-max` の第2引数と同じ役割）。 */
body.header-overlay { --header-h: 84px; }
/* ★★狭幅（MENU ボタンの幅＝ドロワー）の下敷きは**バーの高さの下限**＝MENU ボタン＋上下の余白（2026-10-12）。
   84px のままだと、JS が実高（実測 375px：院名だけ 59px／キャッチと英字つき 63px）を書いたときに
   **描いたあとでヘッダーが縮み、ヒーローの文字が跳ね上がる**（main.js は defer）。
   下限なら多く見積もることが無い＝跳ねない。少なく見積もったぶん（〜4px・タブレット幅は〜15px）は、JS が来るまで
   ヒーローの上端が下がるだけ（ヒーローの文字の位置は `--header-h` を足し引きして変わらない）。
   ★余白は §狭幅の余白 と同じトークン（詰める前の値）。body では詰めた値（ヘッダーの上の上書き）は見えない＝常に詰める前。 */
@media (max-width: 1100px) {
  body.header-overlay { --header-h: calc(var(--tap-min, 44px) + 2 * var(--hdr-top-pad, 0.45rem)); }
}
body { --hdr-catch-h: 0px; }
body.hdr-catch { --hdr-catch-h: 17px; }
body.header-overlay.logo-image { --header-h: max(84px, calc(var(--logo-img-h) + var(--hdr-catch-h) + 32px)); }

/* 透過↔ソリッドを滑らかに */
.header-overlay .site-header,
.header-overlay .site-header__name,
.header-overlay .site-header__catch,
.header-overlay .site-header__en,
.header-overlay .site-header__nav a,
.header-overlay .site-header__actions .site-topbar__tel,
.header-overlay .site-nav-toggle__bar {
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

/* ── 透過状態（最上部・写真ヒーロー上）＝フロスト白＋ブランド文字 ── */
body.header-overlay.has-hero-photo .site-header:not(.is-scrolled) {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none; /* blur は ::before のフロスト層が担当 */
  -webkit-backdrop-filter: none;
}
/* フロスト白ベール：上部に白の半透明＋ぼかしを敷き、下端は mask で写真へフェード。
   ━━ 裾を 200px → 64px に短縮（2026-07-28）━━
   ★★ベールは `backdrop-filter: blur(7px)` を持つので、**下に何かが居ると必ずぼかす**。
     旧・裾200px＝ベール全高 284px は、ヒーロー埋め込みカードの上部（実測 218px ぶん）を
     覆って白ボケ＋ぼかしを掛けていた（実射FB「上側のすりガラス風に被る」の主因）。
     ★白の実効αを下げても blur は消えないので、**濃度ではなく「届く距離」で解く**必要がある。
   ★ベールの役割＝ヘッダーの文字を写真の上で読ませること。それにはバー（--header-h=84px）と
     その少し下までで足り、200px の裾は過剰だった。全高 148px にすると y=148 で終わり、
     カード上端（実測 118〜150px）にほぼ掛からない。
   ★★全高だけ縮めてはいけない＝濃い区間まで一緒に縮み、**ヘッダー文字の下地が薄くなる**。
     グラデの中間ストップ（45%→65%）と mask の不透明区間（25%→45%）も一緒に動かして、
     「濃い部分はバーの高さに合わせ、消えるのを早める」形にする。実効α（背景×mask）の実測：

       y=       30px    45px    60px   ← ヘッダー文字が乗る帯
       旧       0.810   0.755   0.699
       新       0.773   0.700   0.627   （−5〜10%）

       y=      118px          ← 埋め込みカードの上端（実測 118〜150px）
       旧       0.379          ぼかしも掛かる＝実射FB「すりガラス風に被る」
       新       0.096          ほぼ無害（mask が blur も同じ形で減衰させる）

   ★傾きの隣接比の最大は 1.78（旧 1.45）＝**平坦部は無く、傾きは連続的に変わる**ので
     継ぎ目が線に見える条件（暗幕で学んだ失敗）には該当しない。
   ★さらにヘッダー文字の下地を厚くしたい場合は裾（--hdr-frost-h）を増やす。
     ※ 明暗の強い写真での実射確認が要る箇所。
   ━━ ★★★2026-08-31 実射FB「PCで見やすいので 64→90px に上げたい」→ 上げた ━━
     ★★グラデと mask のストップは**全高に対する%**なので、全高を上げると
       **濃い区間も一緒に伸びる**——2026-07-28 の「全高だけ縮めてはいけない」の裏返しで、
       ここが「文字が読みやすくなった」の実体。実効α（背景×mask）の計算値：

         y=       30px    45px    60px   ← ヘッダー文字が乗る帯
         64px裾   0.773   0.700   0.627
         90px裾   0.795   0.733   0.671   （+2.8 / +4.7 / +7.0%）

     ★★**カードへの被りは増えない**（値に依らず構造的に）：
       フロストの下端＝`--header-h + --hdr-frost-h`／カードの上端＝`--hero-header-inset(=--header-h)
       + --hdr-frost-h + --embed-inset` なので、**差は常に `--embed-inset`**——
       裾の値が式から消える。浮かせ（float）は 24〜64px の隙間、ドック（dock）は
       `--embed-inset: 0`＝**ちょうど接する**が、フロスト下端の実効αは 0 なので被らない。
       ★つまり**裾をいくつにしてもカードはフロストの外に居る**＝トークンを共有した設計の配当。
       実測（1440px・右下ドック）：カード上端−フロスト下端＝**66px（64px裾でも90px裾でも同じ）**。
     ★代わりに増えるのは**ヒーローの高さ**：安全域はキャッチの位置も決めるので、
       裾 +26px ぶん本文が下がる（実測 1440×900：ヒーロー 843.5→869.5px）。
       ＝「下地を厚くする」の対価は**カードへの被り**ではなく**ヒーローが伸びること**だった。
     ★スマホ（≤900px）は安全域の計算が効かない（カードは写真の下へ降りる）ので
       **レイアウトは1pxも動かず**、ベールが写真を覆う量だけ増える（実測 375px：29.4%→34.6%）。 */
body.header-overlay.has-hero-photo .site-header:not(.is-scrolled)::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  /* ★★裾の長さはトークン（2026-08-22）。この裾は**ヘッダーの箱の外**に出る量なので、
     埋め込みカードの安全域が同じ値を読めないと、カードの上端がフロストの中に入る
     （下の §フロストの裾 参照）。値を2か所に書かないためのトークン。 */
  height: calc(var(--header-h) + var(--hdr-frost-h, 0px));
  background: linear-gradient(to bottom, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.45) 65%, rgba(255,255,255,0) 100%);
  backdrop-filter: blur(7px) saturate(1.04);
  -webkit-backdrop-filter: blur(7px) saturate(1.04);
  -webkit-mask: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask: linear-gradient(to bottom, #000 45%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
/* バーの中身はフロスト層より前面で鮮明に */
body.header-overlay.has-hero-photo .site-header:not(.is-scrolled) .site-header__bar {
  position: relative; z-index: 1;
}
/* ロゴ名をブランド色（キャッチ=primary/英字=muted は base のまま、メニュー・電話・トグルは
   統合/base の濃色がそのまま効く＝白指定を入れないことで濃色化） */
/* ロゴ名：ブランドの軸として存在感UP（黒のまま・両状態で一貫） */
/* ★★★透過だけの大きさ・字送りの上書きを撤去した（2026-08-31 実射FB）。
   旧：`--logo-fs: var(--logo-fs-base)`（1段の 0.74倍を打ち消す）＋ `letter-spacing: 0.01em`。
   打ち消される側（0.74倍）を上の §1段ヘッダーの控えめ で消したので、**打ち消しも要らない**。
   ★字送りも一緒に外す：透過を切り替えただけでロゴの幅が変わると、
     `initHeaderFit` の判定（＝ブランド幅）が状態によってブレる。
     「透過↔ソリッドで**ブランドの見え方は変わらない**」を1つの規則にする。 */
/* 透過状態のみ：黒文字＋薄い影でフロスト白／写真から浮かせる */
body.header-overlay.has-hero-photo .site-header:not(.is-scrolled) .site-header__name {
  color: var(--wp--preset--color--text-main);
  text-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
/* 電話アイコンだけ accent 差し色（番号は統合の primary。svg は stroke=currentColor のため color で着色） */
body.header-overlay.has-hero-photo .site-header:not(.is-scrolled) .site-header__actions .site-topbar__tel svg { color: var(--wp--preset--color--accent); }
/* WEB予約：accent 塗りのまま、白ベール上に軽い影 */
body.header-overlay.has-hero-photo .site-header:not(.is-scrolled) .site-header__cta :is(.cta-btn--accent, .cta-btn--line) { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }

/* ── ヒーロー引き上げ（写真フロントのみ）：ヘッダーを画像に重ねる ──
   バーの高さを --header-h に固定（border-box）し、ヒーローを同量だけ引き上げて隙間ゼロで重ねる */
body.header-overlay.has-hero-photo .site-header__bar { box-sizing: border-box; min-height: var(--header-h); }
body.header-overlay.has-hero-photo .section-hero { margin-top: calc(-1 * var(--header-h)); }
body.header-overlay.has-hero-photo .section-hero .hero__inner {
  padding-top: calc(var(--header-h) + var(--wp--preset--spacing--80, 4rem));
}
/* ★★奪ったぶんを返す（2026-07-28）：上の margin-top で潜らせた量をそのまま
   --hero-header-inset として宣言し、ヒーローの min-height と埋め込みの安全域が同じ値を読む。
   これが無いと「透過にすると写真が縦に狭くなる」「カードがヘッダーに潜る」の両方が起きる。 */
body.header-overlay.has-hero-photo .section-hero,
body.header-overlay.has-hero-light .section-hero { --hero-header-inset: var(--header-h); }

/* ━━ ★★★フロストの裾 --hdr-frost-h（2026-08-22 実射FB「1段ヘッダーで診療時間ドックを上にすると
   カードが若干ぼやける」）━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ★カードは**既に前面**だった（スロット z-index 3 対 ヘッダー 1）。前面/背面の問題ではない。
   ★★原因は**ヘッダーの「箱」と「視覚的な占有範囲」がずれていた**こと：
     フロスト層（`::before`）は `backdrop-filter: blur(7px)` を持ったまま
     **ヘッダーの下端よりさらに 64px 下**まで伸びて写真へ溶ける。
     一方カードの安全域は `--hero-header-inset`＝**ヘッダーの箱の高さ**だけを見ていたので、
     カードの上端 64px ぶんが**フロストの内側**に入っていた（実測：カード上端 105px／フロスト下端 169px）。
     → その帯ではカードの周囲が白いベールで覆われるため、**白いカードの上端が背景と溶けて
       輪郭を失う**（＝「ぼやけて見える」）。ぼかしがカードに掛かるのではなく、
       **比較対象のほうが白く濁る**ので縁が消える。
   ★★教訓：**安全域は「箱の高さ」ではなく「視覚的にその要素が占めている範囲」で決める。**
     影・ぼかし・グラデの裾のように**箱からはみ出す装飾**を持つ要素の隣に何かを置くときは、
     はみ出し量もトークンにして共有すること（＝ここで 64px を2か所に書かない理由）。 */
/* ★2026-08-31：64→90px（実射FB。上の §フロストの裾 の計算表と影響範囲を参照）。
   ★値を変えても「カードがフロストに入らない」は**構造的に保たれる**（差＝--embed-inset）。 */
body.header-overlay.has-hero-photo { --hdr-frost-h: 90px; }

/* ヒーローのラベル（内科・小児科）を白透過 pill → ブランド色 pill に（差し色） */
body.header-overlay.has-hero-photo .hero__label {
  background: color-mix(in srgb, var(--wp--preset--color--primary) 80%, transparent);
  color: #fff;
}

/* ── モバイル：白ドロワー内のリンクは暗色へ戻す（白文字だと白背景で見えないため） ── */
@media (max-width: 1100px) {
  body.header-overlay.has-hero-photo .site-header:not(.is-scrolled) .site-header__nav a {
    color: var(--wp--preset--color--text-main);
  }
}

/* ── 透過状態（明るいヒーロー：collage/card/illust の bg-soft 地の上） ──
   写真ヒーローの白フロストは不要＝素通し透過＋濃色文字のまま重ねる。
   スクロールで白ヘッダーに戻る挙動・引き上げ量は has-hero-photo と同一。 */
body.header-overlay.has-hero-light .site-header:not(.is-scrolled) {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.header-overlay.has-hero-light .site-header__bar { box-sizing: border-box; min-height: var(--header-h); }
body.header-overlay.has-hero-light .section-hero { margin-top: calc(-1 * var(--header-h)); }
body.header-overlay.has-hero-light .section-hero .hero__inner {
  padding-top: calc(var(--header-h) + var(--wp--preset--spacing--80, 4rem) * var(--space-scale, 1));
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ヘッダー：左サイドバー（縦固定ナビ）軸 body.header-sidebar
   白ベース＋ブランド差し色。サブメニューは右フライアウト。
   デスクトップ＝左固定カラム＋本文オフセット。モバイル＝上バー＋ドロワー（既存JS流用）。
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ★★264→296px（2026-08-19 実射FB「ロゴが小さい」）。
   サイドバーのロゴは**高さではなく幅で頭打ち**になる（実測：4.55:1 のロゴは 50px で 228px＝枠いっぱい、
   それ以上は `--logo-img-h` を上げても1pxも変わらない）。**器を広げないと大きくできない**。
   ★★**パネル幅も「ロゴの大きさ」に追従させる**：追従させないと、サイドバーだけ「大きめを選んでも
   変わらない」（＝設定が黙って効かない）になる。ここが幅で決まる形状である以上、器を動かすしかない。
   ★★2026-08-23：3段の直書き（272/296/328）を**ロゴからの導出**へ。大きさが連続値になったので、
     器だけ3段のままだと「スライダーを動かしてもパネルが階段状にしか動かない」＝途中が死ぬ。
     縦横比 `--logo-ar` は PHP が注入する（CSSはロゴの形を知り得ない＝正当な計算値の注入）。
   ★下限 264px＝メニューが読める最小幅。上限 380px＝本文をこれ以上圧迫しない線。
     **横長のロゴはこの上限で頭打ちになる**（4.25:1 なら約75px、5.97:1 なら約57px）が、
     これは幾何の制約なので隠さず、管理画面のプレビューが実効サイズを見せる。
   ★テキストロゴのときは追従させない（`logo-image` で限定）＝文字は幅で頭打ちにならないため。
     ★★★**この理由は誤りだった**（2026-09-22）＝下の §テキストロゴの名称をパネルに収める。 */
body.header-sidebar { --sidebar-w: 296px; }
/* ★パネル幅も**実際に描かれる高さ**から導く（2026-08-23）。要求のほうを使うと、
   元画像が小さいロゴでパネルだけ「出ない大きさ」ぶん広がる（本文をむだに削る）。 */
body.header-sidebar.logo-image {
  --sidebar-w: clamp(264px, calc(var(--logo-img-h-eff) * var(--logo-ar, 4) + 40px), 380px);
}
/* ━━ ★★★テキストロゴの名称をパネルに収める＝1行か、2行に割るか（2026-09-22・テンプレ 03 の実射
     「パソコンの 1280px でロゴが『水田クリニッ／ク』と途中で折り返す」）━━
   上の「文字は幅で頭打ちにならない」は**誤り**だった。文字は縮まない代わりに**行を割って**収まる。
   実測（1280px・t03・ロゴの大きさは既定＝31.36px）：
     パネル 296 − 余白 35.2 − シンボル 50.2 − 間隔 11.2 ＝ 名称に使える幅 **199.5px**
     「水田クリニック」7文字 ＝ **219.5px** → 最後の1文字だけが次の行へ落ちる。
   ★★**画面幅の問題ではなかった**：パネルも字も画面幅に関係なく決まるので、1101〜1920px の**どこでも**同じ
     （1280px は見つかった幅にすぎない）。既定の大きさでは、シンボルありなら**7文字以上**、
     なしでも**9文字以上**の院名がすべて折り返していた。
   ★★★**パネルは広げない**（296px のまま）。同じ日の最初の版（テーマ 09b35c4）は画像ロゴにそろえて
     「パネルを名称に合わせて 296〜380px で広げ、それでも入らなければ縮める」にしたが、staging の実データ
     （院名16字「みどりの丘内科・小児科クリニック」）で、1280px のパネルが上限 380px になり、院名は下限 20.3px、
     本文とキャッチの枠まで狭まった（キャッチは3行どまり）。**縦長のパネルは高さには余裕がある**ので、
     長い院名は**2行に割って大きさを保つ**ほうが素直（運営者の判断）。
   → 決め方（判定は PHP `clinic_sidebar_name_layout()`・大きさの計算はここ）：
     ① 院の設定の大きさで1行に入れば、そのまま
     ② 2割までの縮小で1行に入れば、縮めて1行（7字前後の院名）
     ③ それより長ければ**2行に割る**（割る位置は PHP の `clinic_text_split2()`＝区切り記号・法人格・呼び名・字種の変わり目）。
        大きさは**長いほうの行**が入る大きさ（院の設定が上限）＝ `--logo-name-em2`
     ④ それでも入らない長さだけ、さらに折り返す（下限＝ロゴの大きさの下端より小さくはしない）
   ★縮めるのは実効サイズ `--logo-fs-eff`＝名前とシンボルが同時に縮む（§狭幅と同じ型）。
   ★名称の幅（em）は PHP が注入する（`--logo-name-em`＝`clinic_text_em()`。CSS は文字数を知り得ない＝`--logo-ar` と同じ型）。
     シンボルの有無は companion クラス `logo-sym`（無ければ比も間隔も数えない）、2行は `logo-name-2line`。
   ★余白・間隔・比・遊びはトークンで持ち、実際の padding / gap もこれを読む＝式と実物を別々に書かない。
     PHP の判定も同じ値を定数で持つ（`CLINIC_SB_*`）＝テストで一致を固定してある。
   ★+2px は小数の丸めで最後の1文字が落ちないための遊び（字の送り幅は 219.52px のような端数になる）。 */
body.header-sidebar {
  --sb-pad-x: 1.1rem;
  --sb-brand-gap: 0.7rem;
  --sb-name-em: var(--logo-name-em, 0);
  --sb-row-em: var(--sb-name-em);
  --sb-row-fix: calc(var(--sb-pad-x) * 2 + 2px);
}
body.header-sidebar.logo-name-2line { --sb-name-em: var(--logo-name-em2, var(--logo-name-em, 0)); }
body.header-sidebar.logo-sym {
  --sb-row-em: calc(var(--sb-name-em) + var(--logo-sym-ratio));
  --sb-row-fix: calc(var(--sb-pad-x) * 2 + var(--sb-brand-gap) + 2px);
}
@media (min-width: 1101px) {
  body.header-sidebar:not(.logo-image) {
    --logo-fs-eff: clamp(var(--logo-fs-min, 1.27rem), calc((var(--sidebar-w) - var(--sb-row-fix)) / max(var(--sb-row-em), 1)), var(--logo-fs));
  }
  /* ③の2行＝PHP が割った2つの span を行にする（スマホの横帯ではインラインのまま＝1行） */
  .header-sidebar.logo-name-2line .site-header__name-part { display: block; }
  /* ★④の「それでも入らない長さ」は**文節で割り、行の長さをそろえる**。
     実測（1280px・16文字・下限 20.32px で2行・PHP で割る前の版）：通常「医療法人社団水田会水田クリニ／ック」／
     auto-phrase だけ「…水田ク／リニック」（悪化）／balance だけ「医療法人社団水田／会水田クリニック」／
     **両方「医療法人社団水田会／水田クリニック」**。
     ★収まる院名には何も起きない（割らない行に割り方の指定は効かない）。
     ★auto-phrase は Chrome / Edge だけ。ほかは無視して balance だけが効く＝行の長さはそろう。
     ★PC のサイドバーに限る：縦のパネルは行が増えても困らないが、横帯（スマホ）は行数がヘッダーの高さになる。 */
  .header-sidebar .site-header__name { word-break: auto-phrase; text-wrap: balance; }
}
.header-sidebar .site-header__sidebar { display: flex; flex-direction: column; }
/* ★この間隔（--sb-brand-gap）は「シンボル｜名称」の**横並び**の間隔。画像ロゴは縦積み（キャッチの上乗せ）なので
   同じ値を当てると 11px 空いて分離して見える＝対象から外す（2026-08-19）。 */
.header-sidebar .site-header__brand:not(.site-header__brand--image) { gap: var(--sb-brand-gap); }

/* ── デスクトップ：左固定サイドバー＋本文オフセット ── */
@media (min-width: 1101px) {
  body.header-sidebar { padding-left: var(--sidebar-w); }
  body.header-sidebar .site-header {
    position: fixed;
    top: var(--admin-bar-h);
    left: 0;
    width: var(--sidebar-w);
    height: calc(100vh - var(--admin-bar-h));
    background: #fff;
    /* ★★★2026-08-31 実射FB「ボーダーが無いほうが見栄えが良い」＝境界の線を撤去した。
       旧：`border-right: 1px solid color-mix(in srgb, var(--wp--preset--color--text-main) 10%, transparent)`
       ★左右で同じ判断なので、右サイドバーの `border-left`（鏡）と、
         トーン別の境界色（`sb-dark` / `sb-soft` の `border-*-color`）も**対で撤去**した。
         片方だけ残すと「左は線なし・右は線あり」になり、左右差の担当（位置・フライアウト向き）に
         **色の話が混ざる**（§右サイドバー＝左の差分だけ持つ）。
       ★★残る条件：`sb-light`（白いパネル）は**白いバンドの横では境界が色で出ない**
         （実測：本文側は淡色 `#EEF5F9` と白 `#FFFFFF` が交互）。パネルの中身（ロゴ・メニュー・CTA）と
         本文のガターで領域は読めるが、線が担っていた分は失う——実射で見て良しとした判断。
         `sb-dark` / `sb-soft` は地の色そのものが境界になるので影響しない。 */
    box-shadow: none;
    z-index: 100;
  }
  .header-sidebar .site-header__sidebar { min-height: 100%; padding: 1.6rem var(--sb-pad-x); }
  .header-sidebar .site-header__sidebar-head { margin-bottom: 1.3rem; }
  .header-sidebar .site-header__sidebar-body { display: flex; flex-direction: column; flex: 1 1 auto; }

  /* 縦メニュー */
  .header-sidebar .site-header__nav .primary-menu {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0.15rem; list-style: none; margin: 0; padding: 0;
  }
  .header-sidebar .site-header__nav a {
    display: block; padding: 0.7em 0.8em;
    color: var(--wp--preset--color--text-main); font-weight: var(--w-ui, 700);
    border-radius: var(--r-field); text-decoration: none;
  }
  .header-sidebar .site-header__nav a:hover {
    color: var(--wp--preset--color--primary);
    background: var(--wp--preset--color--primary-light);
  }
  .header-sidebar .site-header__nav a[aria-current="page"] {
    color: var(--wp--preset--color--primary);
    background: transparent;
    box-shadow: inset 3px 0 0 var(--wp--preset--color--accent); /* 左の縦ラインのみ（囲いなし・直線） */
    border-radius: 0;
  }

  /* 診療案内：右フライアウト */
  .header-sidebar .site-header__nav .menu-item-has-children { position: relative; }
  .header-sidebar .site-header__nav .menu-item-has-children > a::after {
    content: "\25B8"; float: right; font-size: 0.85em; opacity: 0.7;
  }
  .header-sidebar .site-header__nav .primary-menu .sub-menu {
    display: block; /* base の .sub-menu{display:none} を上書き（これが無いとフライアウトが出ない） */
    position: absolute; left: calc(100% + 8px); top: 0;
    min-width: 200px; list-style: none; margin: 0; padding: 0.4rem;
    background: #fff; border-radius: var(--r-field); box-shadow: 0 12px 30px rgba(0,0,0,0.16);
    opacity: 0; visibility: hidden; transform: translateX(-6px);
    transition: opacity .2s ease, transform .2s ease; z-index: 60;
  }
  .header-sidebar .site-header__nav .menu-item-has-children:hover > .sub-menu,
  .header-sidebar .site-header__nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: translateX(0);
  }
  .header-sidebar .site-header__nav .primary-menu .sub-menu::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -8px; width: 8px;
  }
  .header-sidebar .site-header__nav .sub-menu a { padding: 0.5em 0.8em; font-weight: var(--w-ui, 700); white-space: nowrap; }

  /* アクション（電話＋WEB予約）はメニューのすぐ下に（最下部ピン留めしない＝見切れ防止） */
  .header-sidebar .site-header__actions {
    margin-top: 1.5rem; display: flex; flex-direction: column; align-items: stretch;
    gap: 0.7rem; padding-top: 1.2rem;
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--text-main) 9%, transparent);
  }
  .header-sidebar .site-header__actions .site-topbar { display: flex; justify-content: center; }
  .header-sidebar .site-header__actions .site-topbar__tel {
    display: inline-flex; align-items: center; gap: 0.45em;
    color: var(--wp--preset--color--primary); font-weight: var(--w-ui, 700); text-decoration: none;
  }
  /* アイコンは番号と同じメインカラー（currentColor 継承）。
     ★寸法の上書きは撤去（2026-08-22）：`1.1em` は**本文16px基準**で 17.6px を作るための
       値だったが、大きさの基準が `.site-topbar__tel-num`（＝番号と同寸）に移ったので、
       同じ宣言が 25.5px になってしまう。番号に対する比は横型と共通で良い
       ＝**例外の理由が消えたら例外をやめる**。 */
  .header-sidebar .site-header__actions .site-topbar__tel svg { flex-shrink: 0; }
  .header-sidebar .site-header__actions .site-header__cta,
  .header-sidebar .site-header__actions .site-header__cta .wp-block-button { display: block; }
  /* ★★★ボタン**自身**は `block` にしない（2026-08-31 実射FB「WEB予約のアイコンの位置がおかしい」）。
     ┌ やりたかったのは「縦パネルなので**横幅いっぱい**にする」こと。`display: block` はそれを満たすが、
     │ 素の `.cta-btn` は `inline-flex` ＋ `align-items: center` ＋ `gap: 0.45em` で
     │ **アイコンと文字を並べている**——`block` にすると**フレックスコンテナでなくなる**ので、
     │ その3つが**まとめて無効**になる（宣言は残るのに効かない＝一番わかりにくい壊れ方）。
     ├ 実測（サイドバー・幅1440px）：アイコン右端 118.06 / 文字左端 118.06 ＝ **隙間 0px**
     │ （本来 0.45em＝8.64px）。さらに行内配置はベースライン揃えなので**縦に 3px ずれる**。
     └ → **`flex`**（ブロックレベルのフレックスコンテナ）。幅いっぱいという目的はそのまま満たしつつ、
       `align-items` / `gap` / `justify-content` が生き返る＝**横型ヘッダーと同じ見え方**になる。
     ★`text-align: center` は撤去：`justify-content: center` が中身を中央に置くうえ、
       `.cta-btn` は `white-space: nowrap` で折り返さないので、文字寄せの出番が無い（死んだ宣言）。 */
  .header-sidebar .site-header__actions .cta-btn { display: flex; }
}

/* ── モバイル（≤1100）：上バー＋ドロワー（既存 body.nav-open / #site-nav を流用） ── */
@media (max-width: 1100px) {
  body.header-sidebar { padding-left: 0; }
  body.header-sidebar .site-header {
    position: sticky; top: var(--admin-bar-h); left: auto; width: auto; height: auto;
    /* ★`border-right: none` は 2026-08-31 に撤去（デスクトップ側の線が無くなり、打ち消す相手が居ない）。 */
    background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.06); z-index: 100;
  }
  .header-sidebar .site-header__sidebar-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
  }
  .header-sidebar .site-nav-toggle { display: flex; }

  /* ドロワー本体（メニュー＋アクションを内包） */
  .header-sidebar .site-header__sidebar-body {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height .3s ease, opacity .2s; z-index: 50;
  }
  body.header-sidebar.nav-open .site-header__sidebar-body {
    max-height: 85vh; overflow-y: auto; opacity: 1; pointer-events: auto;
  }
  .header-sidebar .site-header__nav .primary-menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    list-style: none; margin: 0; padding: 0.4rem clamp(1rem,4vw,2.5rem) 0.6rem;
  }
  .header-sidebar .site-header__nav .primary-menu > li { border-bottom: 1px solid var(--rule); }
  .header-sidebar .site-header__nav a { display: block; padding: 0.9em 0.4em; color: var(--wp--preset--color--text-main); font-weight: var(--w-ui, 700); text-decoration: none; }
  /* ドロワー内：サブメニューはインライン展開（フライアウト解除） */
  .header-sidebar .site-header__nav .primary-menu .sub-menu {
    display: block; position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border-radius: 0; min-width: 0; margin: 0;
    list-style: none; padding: 0 0 0.4rem 1.2rem; background: transparent;
  }
  .header-sidebar .site-header__nav .menu-item-has-children > a::after { content: ""; }
  /* アクション（電話＋予約）をドロワー下部に */
  .header-sidebar .site-header__actions {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 0.8rem clamp(1rem,4vw,2.5rem) 1rem;
  }
  .header-sidebar .site-header__actions .site-topbar__tel {
    display: inline-flex; align-items: center; gap: 0.45em;
    color: var(--wp--preset--color--primary); font-weight: var(--w-ui, 700); text-decoration: none;
  }
  /* ★寸法の上書きは撤去（2026-08-22・上のデスクトップ側と同じ理由） */
}

/* ── サイドバー配色トーン（body.sb-light 既定＝上の白ベース。dark / soft を上書き） ── */

/* dark：ブランド濃色パネル（背景・ロゴ・トグルは両ブレークポイント共通＝トップバーも濃色） */
.header-sidebar.sb-dark .site-header { background: var(--wp--preset--color--primary-dark); }
.header-sidebar.sb-dark .site-header__name { color: #fff; }
.header-sidebar.sb-dark .site-header__catch { color: rgba(255,255,255,0.82); }
.header-sidebar.sb-dark .site-header__en { color: rgba(255,255,255,0.6); }
.header-sidebar.sb-dark .site-nav-toggle__bar { background: #fff; }
/* ★文字は線と同じ色に追従させる（片方だけ白いと、暗い縦パネルで MENU だけ沈む） */
.header-sidebar.sb-dark .site-nav-toggle__label { color: #fff; }
@media (min-width: 1101px) {
  .header-sidebar.sb-dark .site-header__nav a { color: rgba(255,255,255,0.86); }
  .header-sidebar.sb-dark .site-header__nav a:hover { color: #fff; background: rgba(255,255,255,0.12); }
  .header-sidebar.sb-dark .site-header__nav a[aria-current="page"] { color: #fff; background: transparent; box-shadow: inset 3px 0 0 var(--wp--preset--color--accent); border-radius: 0; }
  .header-sidebar.sb-dark .site-header__actions { border-top-color: rgba(255,255,255,0.14); }
  .header-sidebar.sb-dark .site-header__actions .site-topbar__tel { color: #fff; }
  /* 右フライアウトは白パネルのまま → リンクは暗色に */
  .header-sidebar.sb-dark .site-header__nav .sub-menu a { color: var(--wp--preset--color--text-main); }
  .header-sidebar.sb-dark .site-header__nav .sub-menu a:hover { color: var(--wp--preset--color--primary-dark); background: var(--wp--preset--color--primary-light); }
}

/* soft：淡いブランドトーン（bg-soft 面・メニューは濃色のまま） */
.header-sidebar.sb-soft .site-header { background: var(--wp--preset--color--bg-soft); }
@media (min-width: 1101px) {
  /* 淡背景でも hover が分かるよう少し強めの差し色（現在地は左ラインのみ＝base 継承） */
  .header-sidebar.sb-soft .site-header__nav a:hover { background: color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); }
}

/* ── サイドバー透過オーバーレイ（body.sb-ovl-on）───────────────────────────
   写真ヒーロー（has-hero-photo）のフロントでのみ発動。サイドバーをフロストガラスで
   ヒーローに重ね、ヒーローだけをサイドバー下へ食い込ませる。配色トーンに関わらず
   「明るいフロスト面＋濃色/ブランド文字」に固定（tone=dark の白文字などを上書き）。
   写真でないヒーロー・下層ページでは has-hero-photo が付かず自動で通常サイドバーに戻る。 */
/* ★`border-right: none` は 2026-08-31 に撤去（線そのものが無くなったので打ち消す相手が居ない）。 */
body.header-sidebar.sb-ovl-on.has-hero-photo .site-header { background: transparent; box-shadow: none; }
/* フロスト層：白ヴェール＋ぼかし。塗りは「板」でなく端へ向かって連続的に薄れるグラデ、
   さらに mask でぼかしも一緒にフェードさせ、写真へ自然に溶け込ませる（向きは各ブレークポイント）。
   境界線は引かない（上部オーバーレイの白ベールと同思想）。 */
body.header-sidebar.sb-ovl-on.has-hero-photo .site-header::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(12px) saturate(1.04);
  backdrop-filter: blur(12px) saturate(1.04);
}
/* 中身（ロゴ・ナビ）はフロスト層より前面 */
body.header-sidebar.sb-ovl-on.has-hero-photo .site-header__sidebar { position: relative; z-index: 1; }
body.header-sidebar.sb-ovl-on.has-hero-photo .site-header__name  { color: var(--wp--preset--color--text-main); }
body.header-sidebar.sb-ovl-on.has-hero-photo .site-header__catch { color: var(--wp--preset--color--primary); }
body.header-sidebar.sb-ovl-on.has-hero-photo .site-header__en    { color: var(--wp--preset--color--text-muted); }
body.header-sidebar.sb-ovl-on.has-hero-photo .site-nav-toggle__bar { background: var(--wp--preset--color--text-main); }
body.header-sidebar.sb-ovl-on.has-hero-photo .site-nav-toggle__label { color: var(--wp--preset--color--text-main); }

/* ── デスクトップ：フロストの縦パネル＋ヒーローのブレイクアウト ── */
@media (min-width: 1101px) {
  /* デスクトップ：白ヴェールは左端 不透明 → 右へ 0.35 まで薄まる単純グラデ。
     （mask フェードは使わない＝軽いぼかしと白の減衰だけでヒーローになじませる方針に確定） */
  body.header-sidebar.sb-ovl-on.has-hero-photo .site-header::before {
    background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0.35) 100%);
    -webkit-mask: none;
    mask: none;
  }
  body.header-sidebar.sb-ovl-on.has-hero-photo .site-header__nav a { color: var(--wp--preset--color--text-main); }
  body.header-sidebar.sb-ovl-on.has-hero-photo .site-header__nav a:hover {
    color: var(--wp--preset--color--primary-dark); background: rgba(255,255,255,0.4);
  }
  body.header-sidebar.sb-ovl-on.has-hero-photo .site-header__nav a[aria-current="page"] {
    color: var(--wp--preset--color--primary-dark); background: transparent;
    box-shadow: inset 3px 0 0 var(--wp--preset--color--accent); border-radius: 0;
  }
  body.header-sidebar.sb-ovl-on.has-hero-photo .site-header__actions .site-topbar__tel { color: var(--wp--preset--color--primary-dark); }

  /* ヒーローだけを全幅（サイドバー下）へ。本文は body の padding-left オフセットを維持。
     width は 100vw ではなく calc(100% + サイドバー幅) で縦スクロールバー分の横あふれを回避。
     ブレイクアウトは左サイドバー方向のみ（右サイドバーは companion class 経由で誤発火しないよう除外）。 */
  body.header-sidebar:not(.header-sidebar-right).sb-ovl-on.has-hero-photo .section-hero {
    margin-left: calc(-1 * var(--sidebar-w));
    width: calc(100% + var(--sidebar-w));
  }
  /* キャッチはサイドバー幅ぶん左に余白を取り重ならせない（全幅ヒーロー=bleed:full 前提。中央寄せ時も内側が右に寄る） */
  body.header-sidebar:not(.header-sidebar-right).sb-ovl-on.has-hero-photo .section-hero .hero__inner {
    padding-left: calc(var(--sidebar-w) + clamp(1.5rem, 4vw, 3rem));
  }
  /* ヒーロー下端の波（区切り）もヒーローと同じく全幅へブレイクアウト。
     これをしないとサイドバー下だけ写真が直線で終わり、右側の波と食い違う（乖離）。
     波は main 内でサイドバー幅ぶん右にオフセットされているため、ヒーローと同量だけ左へ広げて全幅化。 */
  body.header-sidebar:not(.header-sidebar-right).sb-ovl-on.has-hero-photo .wave-divider--hero-overlay {
    margin-left: calc(-1 * var(--sidebar-w));
    width: calc(100% + var(--sidebar-w));
  }
}

/* ── モバイル（≤1100）：上バーをフロストでヒーローに重ねる（sticky のまま引き上げ） ── */
@media (max-width: 1100px) {
  body.header-sidebar.sb-ovl-on.has-hero-photo { --sb-bar-h: 64px; }
  /* モバイル：デスクトップと同方針。上端 不透明 → 下へ 0.35 まで薄まる単純グラデ（マスクフェードなし） */
  body.header-sidebar.sb-ovl-on.has-hero-photo .site-header::before {
    background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0.35) 100%);
    -webkit-mask: none;
    mask: none;
  }
  body.header-sidebar.sb-ovl-on.has-hero-photo .site-header__sidebar-head {
    box-sizing: border-box; min-height: var(--sb-bar-h);
  }
  body.header-sidebar.sb-ovl-on.has-hero-photo .section-hero { margin-top: calc(-1 * var(--sb-bar-h)); }
  body.header-sidebar.sb-ovl-on.has-hero-photo .section-hero .hero__inner {
    padding-top: calc(var(--sb-bar-h) + var(--wp--preset--spacing--80, 4rem));
  }
  /* ドロワー本体は白ソリッド（メニューの可読性優先。フロストはバーのみ） */
  body.header-sidebar.sb-ovl-on.has-hero-photo .site-header__sidebar-body {
    background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ── ヘッダー：右サイドバー（header-sidebar-right）＝左サイドバーCSS（companion class header-sidebar）を流用し左右反転。
   位置・境界・サブメニューのフライアウト向き・現在地バーの側だけ上書き。モバイル（上バー）は左右共通。 ── */
@media (min-width: 1101px) {
  body.header-sidebar-right { padding-left: 0; padding-right: var(--sidebar-w); }
  /* ★2026-08-31：境界の線は左右とも撤去したので、ここは**位置だけ**の規則になった
     （旧：`border-right: none` ＋ `border-left: 1px solid …` の付け替え）。
     左右差の担当は「位置・フライアウトの向き・現在地バーの側」だけ＝色の話が混ざらない。 */
  body.header-sidebar-right .site-header { left: auto; right: 0; }
  /* サブメニューは内側（左）へフライアウト */
  .header-sidebar-right .site-header__nav .primary-menu .sub-menu {
    left: auto; right: calc(100% + 8px); transform: translateX(6px);
  }
  .header-sidebar-right .site-header__nav .menu-item-has-children:hover > .sub-menu,
  .header-sidebar-right .site-header__nav .menu-item-has-children:focus-within > .sub-menu {
    transform: translateX(0);
  }
  .header-sidebar-right .site-header__nav .primary-menu .sub-menu::before { left: auto; right: -8px; }
  /* 現在地の差し色バーは項目の右側に */
  .header-sidebar-right .site-header__nav a[aria-current="page"] {
    box-shadow: inset -3px 0 0 var(--wp--preset--color--accent);
  }
  /* トーン濃色/淡色の境界色は左辺へ */
}

/* ═══ 透過オーバーレイ × 形状（header_overlay=on・写真ヒーロー上のみ）═══════════════
   統合＝既存 .header-overlay スキンを companion で流用。以下は他形状の追加/上書き。 */

/* ── フローティング×透過：全幅ベールは浮きバーに合わないので消し、ピル自体をフロスト化。
   ヒーロー引き上げ・スクロールで白ソリッド化は .header-overlay スキン（companion）を流用。 ── */
.header-floating.hov-on.has-hero-photo .site-header::before { display: none; }
.header-floating.hov-on.has-hero-photo .site-header__bar {
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05);
}
.header-floating.hov-on.has-hero-photo .site-header.is-scrolled .site-header__bar {
  background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ── 上部中央・帯分離（2段）×透過：ヘッダーを流れから外してヒーローに重ね、「すりガラス地」を敷く。
   半透明白＋ぼかしの明るい下地なので、ロゴ・文字は濃色のまま可読（画像ロゴ/シンボルでも埋もれない）。
   流れから外しているので2段の実高さに依存せず必ずヒーローに乗り、白地の隙間も出ない。
   ★★2026-07-30：`absolute` → `fixed`（追従を全形状でそろえる）。
     旧実装は絶対配置＝スクロールで流れ去っていたが、これは
     「`position:sticky` が全形状で効いていなかった」時代に**他形状も流れ去っていたので
     差が見えなかった**だけ。sticky を直した結果、2段の透過だけが追従しない状態になったため
     `fixed` にそろえた（浮きバーと同じ「流れを占有しない＋追従する」）。 ── */
:is(.header-center, .header-separated).hov-on.has-hero-photo .site-header {
  position: fixed; top: var(--admin-bar-h); left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,0.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.05); backdrop-filter: blur(12px) saturate(1.05);
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
/* ★★追従させるなら「スクロールで白ソリッド化」もセットで要る（統合・浮きバーと同じ挙動）。
   すりガラスが成立するのは**下地がヒーロー写真のときだけ**で、ヒーローを抜けると
   任意のコンテンツ（特徴セクションの写真など）の上に載り続ける。半透明のままだと
   下地次第で濃色のロゴ・メニューのコントラストが落ちるため、`.is-scrolled` で不透明に切り替える。
   ※これを入れずに fixed だけにすると「追従はするが読めない場所がある」状態になる。 */
:is(.header-center, .header-separated).hov-on.has-hero-photo .site-header.is-scrolled {
  background: #fff;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* 両バンドは透過にしてヘッダーのフロスト地を通す（濃色/ブランド文字はそのまま＝上書きしない） */
:is(.header-center, .header-separated).hov-on.has-hero-photo .site-header__top { background: transparent; }
/* ナビは primary 地の白文字をやめ、フロスト地に合わせて濃色に。
   ★★2026-08-30：個別プロパティの上書きではなく**トークンの差し替え**にした＝透過は
     「ナビ帯のトーンの一種」になる。これで帯の配色軸（header_band_tone）の値が透過側へ漏れる経路が
     構造的に消え、「透過は現状どおり」を詳細度の勝ち負けではなく**同じ入口**で保証できる。
   ★これで直った積み残しが1つ：旧実装は文字色と hover は上書きしたのに**項目間の点線だけ
     `rgba(255,255,255,0.5)` のまま**で、明るいフロスト地に白い点線＝ほぼ見えなかった。
     `--navband-sep` は ink から派生するので、ここで ink を替えるだけで自動的に濃色側へ移る。 */
:is(.header-center, .header-separated).hov-on.has-hero-photo .site-header__nav-row {
  --navband-bg:        transparent;
  --navband-ink:       var(--wp--preset--color--text-main);
  --navband-ink-hover: var(--wp--preset--color--primary-dark);
  --navband-hover-bg:  color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
  /* ★★4つ全部を宣言しきること：`--navband-sep` を書かないと、派生の宣言（既定ブロック・0,1,0）より
     配色軸の宣言（0,2,1）のほうが強いので、**区切りの色だけ軸の値が透けて出る**（実測で発生）。
     トーンのブロックは「全トークンを自分で決める」＝フッター配色トーンと同じ規律。
     明るい地なので白い帯と同じ扱い（区切りはブランド色）。 */
  --navband-sep:       color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent);
}
:is(.header-center, .header-separated).hov-on.has-hero-photo .site-header__nav-row .site-header__nav a[aria-current="page"] { color: var(--wp--preset--color--primary-dark); }
/* ヒーロー本文はヘッダー分だけ下げて重ならせない。
   ★逃げ量は --hero-header-inset に一元化（2026-07-28）＝キャッチの padding も埋め込みの
     安全域も同じ値を読む。2段は絶対配置なので引き上げ（margin-top）は無いが、
     「ヘッダーがヒーローの上に乗って高さを食う」点は統合・フローティングと同じ。
   ★★2026-10-18：逃げ量＝**ヘッダーの実高**（main.js が測って body に書く `--hdr2-h`）。
     旧実装の `clamp(104px, 14vh, 150px)` は画面の高さで見積もっていたが、ヘッダーの高さは画面の高さでは決まらない
     （実測：PC 幅はどの高さでも 136px＝ロゴの段 84＋メニュー帯 51＋線 1／MENU に畳むと 73〜105px／スマホ 63px）。
     高さ 971px 未満では足りず、上寄せのキャッチのラベルがナビの裏へ潜っていた（1280×720 で 32px・横書きでも）。
     下の 136px / 64px は **JS が来る前の下敷き**（PC は帯が1行のときの実測値・スマホはロゴの段だけ）。
   ★中身の上の余白は「ヘッダーの高さ＋4rem」＝統合の透過（§透過オーバーレイ）と同じ。
     ヘッダーの下に見えている写真の中では、不透明ヘッダーのとき（上下 4rem）と同じ位置に中身が来る。
     旧実装は逃げ量だけ（余白 0）で、ヘッダーの下端にラベルが貼り付くか潜るかのどちらかだった。 */
:is(.header-center, .header-separated).hov-on.has-hero-photo .section-hero {
  --hero-header-inset: var(--hdr2-h, 136px);
}
@media (max-width: 900px) {
  :is(.header-center, .header-separated).hov-on.has-hero-photo .section-hero { --hero-header-inset: var(--hdr2-h, 64px); }
}
:is(.header-center, .header-separated).hov-on.has-hero-photo .section-hero .hero__inner {
  padding-top: calc(var(--hero-header-inset) + var(--wp--preset--spacing--80, 4rem));
}

/* ── 右サイドバー×透過：左サイドバーのフロスト/文字色は sb-ovl-on スキン（companion）を流用。
   ブレイクアウトとフロストのフェード向きだけ右基準に反転（左は :not(.header-sidebar-right) で既に除外済み）。 ── */
@media (min-width: 1101px) {
  body.header-sidebar-right.sb-ovl-on.has-hero-photo .section-hero {
    margin-right: calc(-1 * var(--sidebar-w));
    width: calc(100% + var(--sidebar-w));
  }
  body.header-sidebar-right.sb-ovl-on.has-hero-photo .section-hero .hero__inner {
    padding-right: calc(var(--sidebar-w) + clamp(1.5rem, 4vw, 3rem));
  }
  body.header-sidebar-right.sb-ovl-on.has-hero-photo .wave-divider--hero-overlay {
    margin-right: calc(-1 * var(--sidebar-w));
    width: calc(100% + var(--sidebar-w));
  }
  /* フロストのヴェールは右辺（＝内側/ヒーロー側）へ薄まる向きに */
  body.header-sidebar-right.sb-ovl-on.has-hero-photo .site-header::before {
    background: linear-gradient(to left, #fff 0%, rgba(255,255,255,0.35) 100%);
  }
}

/* ═══════════════════════════════════════════════════════════════
   個別ページ共通レイアウト（診療科目/ブログ/初めての方へ/院長紹介/採用/院内紹介ギャラリー）
   ── 旧 kit-soft.css から昇格・全キット共通。配置(構造)を担い、
      色・影・角丸はトークン追従、各キットは装飾のみ上書きする。
═══════════════════════════════════════════════════════════════ */
/* 11. 診療科目 個別ページ */
/* パンくず */
.dept-breadcrumb {
  font-size: 0.8rem;
  color: var(--wp--preset--color--text-muted);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3em;
}
.dept-breadcrumb a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}
.dept-breadcrumb a:hover { text-decoration: underline; }

/* ヒーローバー */
.dept-hero__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.dept-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--r-media);
  background: #fff;
  color: var(--wp--preset--color--primary);
  box-shadow: var(--sh-card);
  flex-shrink: 0;
}
.dept-hero__icon svg { display: block; }
.dept-hero__title {
  font-size: var(--wp--preset--font-size--3xl, 2.25rem); /* 他ページのヒーローh1と統一（フォールバック付き） */
  font-weight: var(--w-head, 700);
  line-height: 1.25;
  margin: 0;
}
.dept-hero__lead {
  font-size: var(--wp--preset--font-size--md);
  color: var(--wp--preset--color--text-muted);
  line-height: 1.8;
  margin: 0;
  max-width: 640px;
}

/* ── 下層ページ共通のタイトル帯（.page-hero＝inc/page-hero.php が生成）──
   帯自体に front-band--soft/p0/s0 が付く＝トップのバンドと同じ装飾機構
   （band の構え・bg_deco の弧・bg_pattern の柄・wave の区切りSVG）がそのまま追従する。
   ここでは配置（余白・内側の幅・縦のリズム）だけを持つ。背景色は front-band--soft が担う。 */
.page-hero {
  /* タイトル帯はコンパクトに（spacing 80/70 では余白過多＝2026-07-20 実射FB。上下とも 40=1rem） */
  padding-block: calc(var(--wp--preset--spacing--40, 1rem) * var(--space-scale, 1));
}
/* 幅の軸（page_hero_width）：content＝本文と同じコンテナ幅（contentSize）に絞って中央寄せ。
   帯には alignfull が付くが、この指定の方が高詳細度（body.class 付き）で勝つ。
   区切りSVG（直後の .wave-divider）も同幅に揃える。full（既定）は指定なし＝全幅。 */
body.phw-content .page-hero,
body.phw-content .page-hero + .wave-divider {
  max-width: min(var(--wp--style--global--content-size, 1080px), 100%);
  margin-inline: auto;
}
.page-hero__inner {
  max-width: var(--ph-w, 760px);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  /* ★★縦は「積む」のではなく、パンくず＋見出しを**1つの塊**として帯の中央に置く（2026-08-14）。
     旧実装はパンくず（高さ23px＋下マージン1.2rem＝計42px）が縦リズムに参加していたため、
     見出しブロックの中心が帯の中心から常にパンくず塊の半分＝21px 下へずれ、
     実測で全ページ「見出しの上58px / 下16px＝3.6:1」になっていた。
     リードがある面では下端に触れるのが muted な小文字なので許容されるが、リードが無い面
     （院長紹介・アクセス・お知らせ・ブログ・記事＝8面中5面）では下端に触れるのが h1（36px）
     になり、ページ最強の要素が帯の縁に貼り付いて見える。
     ＝「必要な余白量は下端に来る要素の強さで変わるのに、担当が固定の padding しか居ない」問題。

     ★中間解（見出しブロックだけを margin:auto で中央に置く）は却下した：パンくずが塊から
     取り残されて上へ浮き（パンくず→ラベル 39px ＞ ラベル→タイトル 18px）、
     「3つ等間隔に並んだ要素」に見えたうえ、その分だけ下も広がった（2026-08-14 実射FB）。
     パンくずを見出しへ寄せて1つの塊にすれば、上下は padding だけで決まるので**常に等しい**。
     リード有無で分岐（:has）せずに両方が正しくなり、パンくずの折り返し・アイコン/メタ付き・
     パンくず無しの変種にもそのまま追従する。 */
  display: flex;
  flex-direction: column;
  justify-content: center;           /* 塊ごと中央＝上下の余白は padding のみが決める＝常に対称 */
  gap: 0.5rem;                       /* パンくず→見出し。ラベル→タイトルの 18px より明確に狭く＝
                                        「等間隔の3要素」ではなく「見出しに添えた道しるべ」に見せる */
  /* 下限は --space-scale を掛けない：これは「セクション間のリズム」ではなく
     「タイトルが呼吸するための最低寸法」＝--fs-min / --tap-min と同じ性格の下限。
     掛けると compact（0.72）で下限が中身を下回り、この問題がそのまま再発する。
     帯の伸縮は padding-block（軸追従）とリードの行数が担当する。 */
  min-height: var(--ph-min, 144px);  /* 帯 176px 相当（＋padding上下16px） */
}
/* 間隔は gap に一本化（margin が残ると塊の中央がずれる） */
.page-hero__inner .dept-breadcrumb { margin-bottom: 0; }
/* ラベル→メタ→タイトル→リードの縦リズムを一元化（旧インラインstyleのmargin代替）。
   ★間隔は「近いものほど狭い」の入れ子で決める（2026-08-14 実射FB）：
     見出しブロックの内部（ラベル→タイトル 0.1em×36px＝3.6px）
       ＜ パンくず→見出し（gap 0.5rem＝8px）
         ＜ 帯の上下（padding 1rem＝16px 以上）
   旧 0.5em はタイトル基準で18px あり、パンくず→見出しと同程度＝要素が等間隔に並んで見えた。
   ※ em は各要素自身の font-size 基準なので、タイトル（36px）では広く・リード（16.8px）では
     狭く効く＝「大きい文字ほど広く空ける」が1行で成立する。行間（line-height）の
     ハーフレディングが加わるため、実際の字面の間隔はタイトル前後とも約13px で揃う。 */
.page-hero__head > * { margin-block: 0; }
.page-hero__head > * + * { margin-top: 0.1em; }
/* ★リードだけは「見出しの一部」ではなく**別の文**なので、役割で切って離す（2026-08-14 実射FB）。
   0.1em（=1.7px）では字面の間隔がアイブロウ→タイトルと同じ約13pxになり、
   説明文がタイトルに貼り付いて見えていた。0.75em（=12.6px）で字面 約24px。
   ★上限は帯の上下（16px）＝塊の外側より広げない（外に出たように見えてしまう）。 */
.page-hero__head > .dept-hero__lead { margin-top: 0.75em; }
.page-hero__label {
  color: var(--wp--preset--color--primary);
  font-weight: var(--w-ui, 700);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.page-hero--center { text-align: center; }
.page-hero--center .dept-hero__lead { margin-inline: auto; }
/* ★見出しブロックの中の**flex の行**は text-align では動かない（2026-08-14 実射FB）。
   アイコン＋タイトル（診療科）と日付メタ（お知らせ・ブログ）は flex コンテナなので、
   中央寄せの帯ではタイトルだけ中央・その行は左、というちぐはぐが起きる。
   ※ パンくず（.dept-breadcrumb）も flex だが**あえて左のまま**にする：
     道しるべは見出しとは別のレイヤーで、左上に固定されているほうが位置として読みやすい。 */
.page-hero--center :is(.dept-hero__inner, .news-single__meta) { justify-content: center; }
/* ★折り返したときに行の長さを揃える（2026-08-14 実射FB「リードが折り返すと中央寄せが違和感」）。
   中央寄せは最終行だけ極端に短いと「中央に寄せていること」自体が目立って落ち着かない
   （院内紹介 幅1420px：630px / 90px）。左寄せの帯でも2文字だけの孤立行が出ていた
   （予防接種 幅375px：313 / 327 / 28px、ホワイトニングのタイトル：216 / 36px）。
   ★寄せ方（center/left）を切り替えるのではなく**行の長さを揃える**のが解：
     - 1行に収まるときは何も変えない＝「1行なら中央が良い」はそのまま成立する
     - center/left で分岐しない（どちらでも孤立行は等しく悪い）＝ここでも第3の状態を作らない
   実測：630/90 → 360/360、313/327/28 → 228/213/228、216/36 → 144/108。
   ※ text-wrap:pretty は欧文の単語孤児向けで日本語には効かない（実測で不変）。
   ※ 非対応ブラウザは宣言を無視するだけ＝現状の見た目に戻るので安全。 */
.page-hero :is(.dept-hero__title, .dept-hero__lead) { text-wrap: balance; }
/* 隅の弧（bg_deco）は下層タイトル帯ではひかえめに：
   トップの弧はバンド高600px超を基準に直径 clamp(400px,48vw,840px) だが、タイトル帯は高さ250px程度
   しかなく、同径だと平たい“やまなみ”状に主張しすぎる（2026-07-20 実射FB）。
   直径を約半分＋沈みを少し深くして「隅のひかえめな弧」に。波断片（+ .wave-divider::before）も
   同じトークンを読むため幾何は自動で一致し、形の差分（blobs/rings 等）にもそのまま効く。 */
body.deco-on :is(.page-hero, .page-hero + .wave-divider) {
  --bcirc-w-soft: clamp(220px, 24vw, 420px);
  --bcirc-sink: 62%;
}
/* 見出し演出（軸D）＝英字ラベルを透かし化。トップの section-head__label と同じ思想の page-hero 版。
   text-align は帯の変種（左寄せ/中央）に追従する。
   ★下層タイトル帯では `section`（セクション下端に沈める型）は成立しないので behind にフォールバックする：
     帯は高さ約250px しかなく、その下端は次セクションとの境界そのもの＝大きな英字を沈める余地がない。
     隅の弧を下層で縮小したのと同じ「下層は縮める／諦める」方針。 */
body:is(.headfx-behind, .headfx-section, .headfx-marquee) .page-hero__head { position: relative; }
body:is(.headfx-behind, .headfx-section, .headfx-marquee) .page-hero .page-hero__label {
  position: absolute;
  inset-inline: 0;
  top: -0.45em;
  z-index: 0;
  margin: 0;
  font-size: clamp(2.8rem, 8vw, 5.6rem);
  font-weight: var(--w-head, 700);
  letter-spacing: 0.04em;
  line-height: 1;
  color: color-mix(in srgb, var(--wp--preset--color--primary) 9%, transparent);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
body:is(.headfx-behind, .headfx-section, .headfx-marquee) .page-hero .page-hero__label + * { margin-top: 0; }
body:is(.headfx-behind, .headfx-section, .headfx-marquee) .page-hero :is(.dept-hero__title, .dept-hero__inner, .news-single__meta) {
  position: relative;
  z-index: 1;
}

/* 本文 */
.dept-detail {
  line-height: 1.9;
  max-width: 720px;
}
.dept-detail h2 {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--w-head, 700);
  margin: 2em 0 0.6em;
  padding-bottom: 0.4em;
  border-bottom: 2px solid var(--rule);
}
.dept-detail h3 {
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--w-head, 700);
  margin: 1.6em 0 0.5em;
}
.dept-detail p { margin: 0 0 1em; }
.dept-detail ul, .dept-detail ol { margin: 0 0 1em; padding-left: 1.5em; }
.dept-detail li { margin-bottom: 0.4em; }

/* 配下の詳しいページ一覧 */
.dept-children {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.dept-children__label {
  font-size: 0.8rem;
  font-weight: var(--w-ui, 700);
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--primary);
  margin: 0 0 0.8rem;
}
.dept-children__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.dept-children__item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9em 1.1em;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.dept-children__item:hover {
  border-color: var(--wp--preset--color--primary);
  box-shadow: var(--sh-card);
}
/* ★.dept-children__icon は廃止（2026-08-14）＝子ページはアイコンを持たなくなったため。
   アイコンは「科目（分類）」の記号で、その下の症状（腹痛・風邪…）には合う記号が無く、
   全行が既定の聴診器に落ちて同じ記号が並んでいた。行頭はテキストから始まる。 */
.dept-children__text { flex: 1; display: flex; flex-direction: column; }
.dept-children__text strong { color: var(--wp--preset--color--text-main); font-size: 1rem; }
.dept-children__desc { color: var(--wp--preset--color--text-muted); font-size: 0.82rem; margin-top: 0.15em; }
.dept-children__arrow { color: var(--wp--preset--color--primary); flex-shrink: 0; }

/* 戻るリンク */
.dept-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--wp--preset--color--primary);
  font-weight: var(--w-ui, 700);
  font-size: var(--wp--preset--font-size--sm);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-btn);
  padding: 0.5em 1.2em;
  transition: background 0.2s;
}
.dept-back-link:hover { background: var(--wp--preset--color--primary-light); }
.dept-back-link svg { display: block; }

/* ブログ：カテゴリーバッジ（個別・一覧共通） */
.blog-cat {
  display: inline-block;
  padding: 0.1em 0.7em;
  border-radius: var(--r-chip);
  font-size: var(--fs-min);
  font-weight: var(--w-ui, 700);
  background: var(--wp--preset--color--primary-light);
  color: var(--wp--preset--color--primary-dark);
}
/* ブログ個別：アイキャッチ */
.blog-single__thumb {
  margin: 0 0 2rem;
  border-radius: var(--r-media);
  overflow: hidden;
}
.blog-single__thumb img { width: 100%; height: auto; display: block; }

/* ブログ一覧：カードグリッド */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--60, 1.75rem);
  margin-top: var(--wp--preset--spacing--70, 2rem);
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--r-media);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sh-card);
  transition: transform .2s, box-shadow .2s;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent); }
.blog-card__thumb {
  aspect-ratio: 16 / 10;
  background: var(--wp--preset--color--bg-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 画像なし：タイポグラフィ・カバー（グラデ地＋タイトル） */
.blog-card__thumb--text {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--wp--preset--color--primary) 16%, #fff),
    var(--wp--preset--color--bg-soft));
  padding: 1.1rem 1.2rem;
  text-align: center;
}
.blog-card__cover-title {
  font-weight: var(--w-head, 700);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--wp--preset--color--primary-dark);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.blog-card__meta { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.blog-card__meta .news__date { color: var(--wp--preset--color--text-muted); font-size: 0.8rem; }
.blog-card__title { font-size: 1.05rem; margin: 0; line-height: 1.5; }
.blog-card__excerpt { font-size: 0.85rem; color: var(--wp--preset--color--text-muted); line-height: 1.7; margin: 0; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } }

/* その他の科目 */
.dept-others__label {
  font-size: 0.78rem;
  font-weight: var(--w-ui, 700);
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--primary);
  text-transform: uppercase;
  margin: 0 0 0.8rem;
}
.dept-others__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.dept-others__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-btn);
  padding: 0.45em 1em;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--w-ui, 700);
  color: var(--wp--preset--color--text-main);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.dept-others__item:hover {
  border-color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--primary-light);
}
.dept-others__icon {
  display: inline-flex;
  color: var(--wp--preset--color--primary);
}
.dept-others__icon svg { display: block; }

/* 11-b. 初めての方へ */
.firstvisit__breadcrumb {
  font-size: 0.8rem;
  color: var(--wp--preset--color--text-muted);
}
.firstvisit__breadcrumb a { color: var(--wp--preset--color--primary); text-decoration: none; }
.firstvisit__breadcrumb a:hover { text-decoration: underline; }

.firstvisit__section { margin-bottom: var(--wp--preset--spacing--80, 4rem); }
/* ★★下層ページのセクション見出しは**1つの流儀**（2026-08-22・第2段）。
   `.lp-section-title`（アクセスLPの「診療時間」等）は**まったく同じ見た目を inline style で書いていた**——
   しかも `font-weight` を書き忘れていたので、**強調の強さの軸（`body.fw-*`）が届いていなかった**
   （同じファイルに「★太さはインラインに置かない＝軸が届かない」と自分で注記してあったのに再発）。
   ★同じ見た目を2か所で宣言せず、**セレクタを1つ足して共有する**。 */
.firstvisit__title,
.lp-section-title {
  font-size: var(--wp--preset--font-size--xl, 1.5rem);
  font-weight: var(--w-head, 700);
  padding-left: 0.6em;
  border-left: 5px solid var(--wp--preset--color--primary);
  margin: 0 0 1.2rem;
}

/* お持ちいただくもの */
.firstvisit__belongings {
  background: var(--wp--preset--color--bg-soft);
  border-radius: var(--r-card);
  padding: 1.4rem 1.6rem;
}
.firstvisit__belongings ul { list-style: none; margin: 0; padding: 0; }
.firstvisit__belongings li {
  display: flex; gap: 0.8rem; align-items: flex-start;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}
.firstvisit__belongings li:last-child { border-bottom: none; }
.firstvisit__check { color: var(--wp--preset--color--primary); flex-shrink: 0; display: inline-flex; }
.firstvisit__belongings strong { display: block; font-size: 1rem; }
.firstvisit__item-desc { display: block; color: var(--wp--preset--color--text-muted); font-size: 0.875rem; margin-top: 0.2em; }
.firstvisit__note {
  display: flex; gap: 0.5em;
  background: rgba(224,163,94, 0.16);
  border: 1px solid rgba(224,163,94, 0.5);
  border-radius: var(--r-field);
  padding: 0.9em 1.1em;
  font-size: 0.875rem;
  margin: 1.2rem 0 0;
}

/* ご予約について */
.firstvisit__reserve { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.firstvisit__rcard {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: 1.6rem;
}
.firstvisit__ricon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--r-media);
  background: var(--wp--preset--color--primary-light); color: var(--wp--preset--color--primary);
  margin-bottom: 0.8rem;
}
.firstvisit__rcard h3 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.firstvisit__rcard p { color: var(--wp--preset--color--text-muted); font-size: 0.9rem; margin: 0 0 1.2rem; }
.firstvisit__rbtn {
  display: inline-block;
  background: var(--wp--preset--color--primary); color: #fff;
  font-weight: var(--w-ui, 700); text-decoration: none;
  padding: 0.7em 1.6em; border-radius: var(--r-btn);
}
.firstvisit__rbtn--tel { background: var(--wp--preset--color--accent); }

/* 診察の流れ（タイムライン） */
.firstvisit__flow { list-style: none; margin: 0; padding: 0; }
.firstvisit__step { display: flex; gap: 1rem; position: relative; padding-bottom: 1.6rem; }
.firstvisit__step:not(:last-child)::before {
  content: ""; position: absolute; left: 24px; top: 48px; bottom: 0;
  width: 2px; background: var(--wp--preset--color--primary-light);
}
.firstvisit__step-no {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  background: var(--wp--preset--color--primary); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  z-index: 1;
}
.firstvisit__step-no small { font-size: 0.5rem; letter-spacing: 0.05em; }
.firstvisit__step-no b { font-size: 1.1rem; }
.firstvisit__step-body { padding-top: 0.3rem; }
.firstvisit__step-body h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }
.firstvisit__step-body p { color: var(--wp--preset--color--text-muted); font-size: 0.9rem; margin: 0; }

.firstvisit__cta-btn:hover { opacity: 0.92; }

@media (max-width: 640px) {
  .firstvisit__reserve { grid-template-columns: 1fr; }
}

/* 11-e. お知らせ / 採用情報（一覧・個別） */
/* お知らせ一覧（一覧ページ）＝基底 .news__list の**寸法だけ**の版。
   ★2026-07-31：以前は display/gap/padding/罫線/チップ/リンクを再宣言する独立スキンで、
   同じ部品を2か所で持っていた（キットCSSと同型の二重持ち）。基底が育っても一覧ページだけ
   追従しない＝見せ方の軸も効かないため、差分（1行を大きく・ゆったり）だけに畳んだ。
   色・面・レイアウトは基底と軸（body.newslay-*）が決める。 */
.news__list.news__list--archive { margin: 0; }
.news__list.news__list--archive li { padding: 1rem 0; gap: 0.9rem; font-size: 0.95rem; }
.news__list--archive .news__date { font-size: 0.85rem; }
/* ★一覧ページは余白だけ広げる。大きさは下限（--fs-min）に統一したので上書きしない
   （0.72rem＝一覧だけ 0.02rem 大きい、という意味を持たない差だった）。 */
.news__list--archive .news__cat { padding: 0.2em 0.8em; }
.news__list--archive .news__link { font-weight: var(--w-head, 700); }
.news-single__meta { display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap; }

.lp-pagination ul { list-style: none; display: flex; gap: 0.4rem; justify-content: center; padding: 0; margin: 2rem 0 0; }
.lp-pagination a, .lp-pagination span { display: inline-block; padding: 0.4em 0.8em; border-radius: var(--r-field); text-decoration: none; color: var(--wp--preset--color--primary); }
.lp-pagination .current { background: var(--wp--preset--color--primary); color: #fff; }

/* 採用カード一覧 */
.recruit-card {
  display: block; background: #fff; border: 1px solid var(--rule);
  border-radius: var(--r-card); padding: 1.4rem 1.6rem; margin-bottom: 1rem;
  text-decoration: none; transition: border-color .2s, box-shadow .2s;
}
.recruit-card:hover { border-color: var(--wp--preset--color--primary); box-shadow: var(--sh-card); }
.recruit-card__head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.3rem; flex-wrap: wrap; }
.recruit-card__emp { background: var(--wp--preset--color--primary-light); color: var(--wp--preset--color--primary); font-size: 0.75rem; font-weight: var(--w-ui, 700); padding: 0.25em 0.8em; border-radius: var(--r-chip); }
.recruit-card__job { color: var(--wp--preset--color--text-muted); font-size: 0.85rem; }
.recruit-card__title { font-size: 1.15rem; margin: 0.2rem 0; color: var(--wp--preset--color--text-main); }
.recruit-card__salary { color: var(--wp--preset--color--text-muted); font-size: 0.9rem; margin: 0.3rem 0; }
.recruit-card__more { color: var(--wp--preset--color--primary); font-weight: var(--w-ui, 700); font-size: 0.85rem; }

/* 採用 個別 */
.recruit-single__table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
.recruit-single__table th {
  text-align: left; white-space: nowrap; vertical-align: top; width: 8em;
  background: var(--wp--preset--color--bg-soft); color: var(--wp--preset--color--primary);
  font-weight: 700; padding: 0.8em 1em; border: 1px solid var(--rule); font-size: 0.9rem;
}
.recruit-single__table td { padding: 0.8em 1em; border: 1px solid var(--rule); }
.recruit-single__sec { margin-bottom: 1.8rem; }
.recruit-single__h {
  font-size: var(--wp--preset--font-size--lg, 1.25rem); font-weight: var(--w-head, 700);
  border-left: 5px solid var(--wp--preset--color--primary); padding-left: 0.6em; margin: 0 0 0.8em;
}

/* 11-d. ランディング（診療案内/院長紹介/アクセス） */
/* ━━ ★★下層LPの本文の器（2026-08-22・第3段）━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3つのLP（診療案内・院長紹介・アクセス）が**同じ値を inline style で書き写して**おり、
   違うのは幅だけだった（1000 / 840 / 1000px）。→ **幅だけをトークン**にして宣言を1つにする。
   ★左右は `--gutter`。旧実装は `clinic_lp_pad()` が返す `clamp(1rem,4vw,2.5rem)` を使っていたが、
     これは `--gutter` と**まったく同じ式**＝ページの左右余白の担当者が2人いた状態だった
     （2026-08-02 に「担当者を1か所に決める」ためトークン化したのに、ここだけ別経路が残っていた）。
     → 関数ごと撤去し、`--gutter` に合流。
   ★★幅を contentSize(1080px) に揃えないのは**意図**：LPは読ませるページなので少し狭くしてある。
     タイトル帯（`clinic_lp_hero()` の $width）と**対で**同じ値にしてあり、実測（1280px）でも
     H1・パンくず・本文の中身がすべて 133..1133 で一致する。
     ＝**片方だけ変えると見出しと本文の左端がズレる**ので、変えるときは必ず両方セットで。
   ★院長紹介だけ 840px＝本文（挨拶文）が長いので行長を短くする。 */
/* ★★★`box-sizing: content-box` を明示する（2026-08-31）。
   器の幅（--lp-w）は「**本文が使える横幅**」の意味で、左右のガターはその外側に付く。
   ところが**このクラスが載る要素によって解釈が変わっていた**——素の `<div>` なら
   content-box（総幅 = --lp-w + ガター×2）だが、ブロックテンプレートの
   `.wp-block-group` はコアが `box-sizing: border-box` を当てるため、
   **総幅が --lp-w に縮み、本文がガターぶん内側へ寄る**。
   実測（1280px・本文ページ）：見出しの左端 253px に対し本文が 293px＝**40px ずれていた**。
   ★★教訓：**共有する器は、載る要素に幅の解釈を委ねない。** ここで固定すれば、
     素の div でもブロックのグループでも同じ寸法になる（既存ページの見え方は変わらない）。 */
.lp-body,
.facility__gallery,
.firstvisit__body {
  --lp-w: 1000px;
  max-width: var(--lp-w);
  box-sizing: content-box;
  margin-inline: auto;
  padding: var(--wp--preset--spacing--60, 2rem) var(--gutter) var(--wp--preset--spacing--90, 5rem);
}
/* 詳細ページの本文＝読み物なので上下が広く、幅は狭い（型はこの2つだけ）。
   ★本文ページ（templates/page-content.html）もこの型（2026-08-31）＝
     テンプレ側で幅・余白を書き写さない。 */
.dept-body {
  --lp-w: 760px;
  max-width: var(--lp-w);
  box-sizing: content-box;   /* ★上のブロックと同じ理由（.wp-block-group に載っても縮まない） */
  margin-inline: auto;
  padding: var(--wp--preset--spacing--80, 4rem) var(--gutter) var(--wp--preset--spacing--90, 6rem);
}
/* ━━ 「見つからなかったとき」の逃げ道（`[clinic_index_notfound]`・2026-08-31）━━
   404 と「0件の検索結果」で出る。器（幅・左右のガター）は `.dept-body` が持つので**ここは体裁だけ**
   （§下層の器とガターを畳んだ＝担当者を1人に戻す と同じ分担）。
   ★リンクは面（チップ）にする：スマホではヘッダーのメニューがドロワーの中＝**画面に出ている導線が
     1つも無い**ので、ここが唯一の行き先になる。押せることが見えている必要がある
     （§下部CTAの電話＝「押せることが見えていなかった」と同じ判断）。
   ★角丸・罫線・面はすべて役割トークン追従＝形の軸に従う（値を直書きしない）。 */
.index-help { text-align: center; }
.index-help__msg { color: var(--wp--preset--color--text-muted); }
.index-help__label {
  margin: 2rem 0 0.9rem;
  font-size: max(0.82rem, var(--fs-min));
  font-weight: var(--w-ui, 700);
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--text-muted);
}
.index-help__links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
}
.index-help__links a {
  display: flex; align-items: center;
  /* ★当たりは --tap-min を床にする（padding だけだと文字を小さくした瞬間に割れる） */
  min-height: var(--tap-min);
  padding: 0 1.2rem;
  border: 1px solid var(--rule, color-mix(in srgb, var(--wp--preset--color--text-main) 14%, transparent));
  border-radius: var(--r-btn);
  background: #fff;
  color: var(--wp--preset--color--text-main);
  font-size: max(0.92rem, var(--fs-min));
  text-decoration: none;
}
.index-help__links a:hover {
  color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--primary-light);
  border-color: transparent;
}

/* ページごとの幅（既定 1000px 以外だけ書く）。
   ★幅は**タイトル帯（`clinic_lp_hero` / `clinic_cpt_hero` の $width）と対**＝
     片方だけ変えると見出しと本文の左端がズレる（テストで両方を固定）。 */
.lp-body.doctor-page { --lp-w: 840px; }  /* 院長紹介＝挨拶文が長いので行長を短く */
.lp-body--news       { --lp-w: 800px; }  /* お知らせ一覧 */
.lp-body--recruit    { --lp-w: 840px; }  /* 採用情報一覧 */
.firstvisit__body    { --lp-w: 880px; }
.facility__gallery   { --lp-w: 1100px; } /* 写真のグリッドなので広く取る */
/* 帯の中の器（その他の診療科目）＝上下は帯が持つので左右だけ */
.dept-others__inner { max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); }
/* 中身が1件も無いときの一言（診療案内） */
.lp-empty { text-align: center; color: var(--wp--preset--color--text-muted); }
/* LP内のセクション区切り（アクセスLPの「診療時間」など） */
.lp-section { margin-top: var(--wp--preset--spacing--80, 4rem); }

.lp-breadcrumb { font-size: 0.8rem; color: var(--wp--preset--color--text-muted); }
.lp-breadcrumb a { color: var(--wp--preset--color--primary); text-decoration: none; }
.lp-breadcrumb a:hover { text-decoration: underline; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. プリセット用の軸バリアント（docs/variant-catalog.md 参照）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 軸A：余白スケール（body.spacing-compact / -standard / -airy）
   --space-scale 係数1つで、セクション縦paddingに使うスペーシングプリセット
   （90=セクション / 100=特大）を一括伸縮する。standard は上書きなし＝現行どおり。
   ※ calc 内の clamp は theme.json settings.spacing.spacingSizes の 90/100 と同期させること */
body { --space-scale: 1; }
body.spacing-compact { --space-scale: 0.72; }
body.spacing-airy    { --space-scale: 1.4; }
body.spacing-compact,
body.spacing-airy {
  --wp--preset--spacing--90:  calc(clamp(2.75rem, 5vw, 4.25rem) * var(--space-scale));
  --wp--preset--spacing--100: calc(clamp(3.5rem, 6vw, 5.5rem)  * var(--space-scale));
}

/* 全幅レイアウト（body.bleed-full）：ヘッダーとヒーロー内側の最大幅を解除。
   本文セクション（front-band 内の constrained レイアウト）は変えない。
   ヘッダーは形状ごとに内側コンテナが異なる：
     帯分離＝__inner/__top-inner/__nav-inner、統合・オーバーレイ＝__bar。両方を対象にする。 */
body.bleed-full .site-header__inner,
body.bleed-full .site-header__top-inner,
body.bleed-full .site-header__nav-inner,
body.bleed-full .site-header__bar,
body.bleed-full .hero__inner {
  max-width: none;
}

/* 軸C：ヒーロー構成 .hero--collage（明るい地＋写真散らし＋縦書きキャッチ）
   バリアントはこの1クラスのみ。色・角丸・影はトークン追従（キット別の分岐なし）。
   写真の角は形の軸（--r-media）に追従する。
   縦書き（writing-mode: vertical-rl）はPC幅のみ。狭い幅は横書きフォールバック。 */
.section-hero.hero--collage {
  position: relative; overflow: hidden;
  background: var(--wp--preset--color--bg-soft);
  min-height: calc(clamp(460px, 68vh, 720px) + var(--hero-header-inset, 0px));
  display: flex; align-items: center;
}
/* 装飾シェイプ：角1つが大きく丸い抽象ブロックを低コントラストで背面に敷く（しま系）。
   色はトークン追従（bg-soft より一段だけ深いトーン）。本文（.hero__inner=z2）より背面 */
.section-hero.hero--collage::before,
.section-hero.hero--collage::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  background: color-mix(in srgb, var(--wp--preset--color--primary-light) 80%, var(--wp--preset--color--bg-soft));
}
.section-hero.hero--collage::before {
  width: clamp(240px, 34vw, 500px); aspect-ratio: 1 / 1;
  top: clamp(-80px, -6vw, -24px); right: clamp(4%, 10vw, 14%);
  border-radius: 0 0 0 clamp(90px, 16vw, 240px);
}
.section-hero.hero--collage::after {
  width: clamp(200px, 26vw, 380px); aspect-ratio: 1 / 1;
  bottom: clamp(-70px, -5vw, -20px); left: clamp(2%, 6vw, 9%);
  border-radius: 0 clamp(80px, 14vw, 200px) 0 0;
}
/* 幾何（max-width / width / margin / padding / position）は `.hero__inner` が持つ。
   ここは**差分だけ**（§器はこの1つだけ 参照）。 */
.hero__inner--collage {
  display: flex; align-items: center; justify-content: space-between;
  /* 写真の列と文字の柱のあいだ。コラージュの飾りの白い板もこの幅までしか中央へ出さない（§コラージュの飾り） */
  --collage-gap: clamp(1.5rem, 4vw, 3.5rem);
  gap: var(--collage-gap);
}
.hero__collage-text {
  flex: 0 1 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero--collage .hero__catch { letter-spacing: 0.1em; line-height: 1.7; }
/* 写真は左右の列に散らす。★左右**同じ幅**の2列 × 各列「大1枚＋小2枚（横並び）」＝スロット6つ。
   右列は大が上／左列は大が下の **180°点対称**（上下にも左右にも釣り合い、大きな余白ができない）。
   割り当ての単一の真実源＝clinic_hero_collage_slots()（inc/toppage-settings.php）。
   写真の順は右→左→右→左…と交互なので、偶数枚のときは必ず左右対称になる。 */
.hero__collage-photos { display: grid; gap: clamp(1rem, 2.2vw, 1.8rem); grid-template-columns: 1fr; align-items: start; }
/* ★左右は同じ basis＝同じ幅（旧構成は 28% / 38% で右が1.4倍あり、左上に大きな空白ができていた） */
.hero__collage-photos--right,
.hero__collage-photos--left {
  /* ★1列2枚（大＋小）で高さを確保するため、列を広めに取る。
     実測：この basis で 1440×900 のヒーローが 890px 前後＝改修前（892px）と同等になる。 */
  flex: 1 1 52%;
  /* 段の間は gap ではなく重なり（負マージン）で決めるので行方向の隙間は 0 にする */
  row-gap: 0;
}
.hero__collage-photo {
  position: relative;
  margin: 0; overflow: hidden; width: 100%;
  border-radius: var(--r-media);
  background: var(--wp--preset--color--primary-light);
  box-shadow: var(--sh-card);
}
.hero__collage-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ★写真の切り替え（トップ画像＆メッセージの「複数枚を自動で切り替える」がON かつ 5枚以上）。
   持ち札が2枚以上あるスロットだけ `--multi` になり、中の <img> を重ねてクロスフェードする。
   枠は aspect-ratio ＋ object-fit なので**差し替えてもレイアウトは1pxも動かない**。
   切替の順番（1回に1スロットだけ）は main.js の initCollageRotate()。 */
.hero__collage-photo--multi .hero__collage-img {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity var(--collage-fade, 1.2s) ease;
}
.hero__collage-photo--multi .hero__collage-img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  /* JS 側でも回さないが、状態が変わっても瞬時に切り替わるだけにする（フェードの動きを出さない） */
  .hero__collage-photo--multi .hero__collage-img { transition: none; }
}
/* 各列は縦2段＝**縦長大 ＋ 横長小**。右列は 大(上)→小(下)、左列は 小(上)→大(下) の **180°点対称**
   （大どうし・小どうしが対角に並ぶ）。
   ★正方形は使わない（実射FB「正方形はすごく違和感がある」）＝形は 3:4（縦長）と 3:2（横長）の2つだけ。
   ★小は大に浅く重ね、列の外側へはみ出させる（重なり・はみ出しとも量はトークン1つ＝対を必ず揃える）。 */
.hero__collage-photo--s1 { grid-row: 1; }
.hero__collage-photo--s2 { grid-row: 2; }
.hero__collage-photo--s3 { grid-row: 2; margin-top: calc(-1 * var(--collage-lap)); }
.hero__collage-photo--s4 { grid-row: 1; margin-bottom: calc(-1 * var(--collage-lap)); }
.hero__collage-photo--s1,
.hero__collage-photo--s2 { aspect-ratio: 3 / 4; }
/* ★重なりの深さ／外へのはみ出し量は**トークン**＝左右・上下で必ず同じ量になる（対称を注意力で守らない）。
   実測 1440×900 で 重なり 22.5px（小の高さの約1割＝浅め）／はみ出し 20px。
   はみ出しには広い画面の上乗せ（`--collage-poke-x`・下の「外へ散らす」）が足される。1500px までは 0。 */
.hero--collage { --collage-lap: clamp(1rem, 2.5vh, 1.75rem); --collage-poke: calc(clamp(10px, 1.4vw, 20px) + var(--collage-poke-x, 0px)); }
/* ★★★広い画面では写真を外へ散らす（2026-10-17 実射FB「両端の余白が広く寂しい／真ん中の文字が少し狭い」）。
   器は本文の幅（1240px）のままなのに 1段ヘッダーは最大 1800px まで広がる＝1920px で写真の外端が
   ロゴの左端・予約ボタンの右端より 174px 内側にあった。写真を大きくすると縦長（3:4）の列が縦にも伸びる
   （器だけ広げた試作：1920×950 でヒーロー 1027→1386px）ので、**大きさは変えずに外へ散らす**。
   - 広がり（片側）＝`--collage-spread`。1500px までは 0、そこから画面幅の半分の傾きで増えて 170px で頭打ち
     （1500〜1840px は器の外の余白が一定のまま広がる）。★下限 0 の clamp なので**1500px の境目で段がつかない**。
   - 広がった分は「小のはみ出し」に7割・「大の移動」に3割を配る＝大が外へ動いたぶん中央の文字の柱が広がる。
   - 列は `--collage-col-max` で頭打ち（下の 960px 以上の節）＝写真とヒーローの高さは広い画面でも変わらない。
   上下散らし（band）は帯の中で幅を配る別の構成なので対象外。 */
.hero--collage.collage-sides {
  --collage-spread: clamp(0px, (100vw - 1500px) / 2, 170px);
  --collage-poke-x: calc(var(--collage-spread) * 0.7);
  /* 器（.hero__inner）の max-width が読む。器の幾何は .hero__inner の1か所のまま */
  --hero-spread: var(--collage-spread);
  /* 列（大の幅）の上限＝器 1240px で列が取る幅（実測 462px・列の高さ約 840px）。sizes の申告と対 */
  --collage-col-max: 462px;
  /* ★★★列の幅を画面の高さからも決める（2026-10-17・ユーザー決定「案1＝下限 300px」）。
     列の幅は画面の横幅だけで決まっていたので、ヒーローはどの画面でも約 1070px＝画面の高さを超え、
     写真の下と「WEB予約」が最初の画面に入っていなかった（実測：1536×730 で写真が 298px はみ出す／1440×900 でも 122px）。
     - 列の高さ＝大（幅×4/3）＋小（幅×0.8×2/3）−重なり＝**幅×28/15 − 重なり**。
       ここに「画面の高さ − ヘッダー − 上下の余白」を入れて解いた幅が `--collage-col-fit`。
     - ヘッダーは `--header-h`（1段ヘッダーなら JS が透過のあり・なしとも実高を書く）。
       値が無いとき（2段・サイドバー・JS の前）は 84px＝透過の下敷きと同じ値で見積もる。
     - 下限 `--collage-col-min: 300px`＝それより低い画面（1366×650 など）は写真を小さくしすぎず、少しはみ出すほうを取る。
       ★大きさを削りすぎない（2026-08 の実射FB「縦に短くなったのもあまりよくない」）。縮めるのは画面の高さに収めるところまで
         ＝この式が効いている画面では、ヒーローはちょうど画面の高さになる（画面より低くはしない）。
     実測（t06）：1440×900 でヒーロー 1070→900px・1536×730 で 1076→774px（写真も予約ボタンも収まる）。 */
  --collage-vh: 100vh;
  --collage-col-fit: calc((var(--collage-vh) - var(--header-h, 84px) - 2 * var(--wp--preset--spacing--80, 4rem) + var(--collage-lap)) * 15 / 28);
  --collage-col-min: 300px;
}
/* ★画面の高さは URL バーが出ている状態（svh）で測る＝タブレットでも「最も狭いとき」に収まる。
   カスタムプロパティに svh を直接書くと非対応のブラウザで max-width ごと無効（unset）になるので、
   対応を確かめてから差し替える（§スマホのヒーローと同じ理由。ここでは @supports で安全に使える）。 */
@supports (height: 100svh) {
  .hero--collage.collage-sides { --collage-vh: 100svh; }
}
/* 小＝横長・列幅の 80%。幅で8割・高さで4割なので、大との主従は保ったまま重なりの見せ場を作れる。
   ★`min-width` で下限を持たせる＝列が狭い画面では割合のままだと痩せすぎるので、
     そこでは自動的に列いっぱいまで広がる（ブレークポイントを足さずに連続的に効かせる）。 */
.hero__collage-photo--s3,
.hero__collage-photo--s4 { aspect-ratio: 3 / 2; width: 80%; min-width: min(100%, 190px); position: relative; z-index: 1; }
/* 小は列の**外側**へ寄せ、さらに列の外へはみ出させる（右列は右・左列は左）＝左右で鏡像。
   中央のキャッチ側は空けたまま、外へ逃がすことで散らし感を出す。 */
.hero__collage-photos--right .hero__collage-photo--s3 { justify-self: end; margin-right: calc(-1 * var(--collage-poke)); }
.hero__collage-photos--left .hero__collage-photo--s4 { justify-self: start; margin-left: calc(-1 * var(--collage-poke)); }

@media (min-width: 960px) {
  /* 縦書きキャッチ（PC幅のみ・既定）。改行が「行→列（右から左）」になる。
     ★横書きを選んだとき（.collage-catch-h）は当てない＝**同じ散らしのまま向きだけ差し替える**。
     編集場所＝トップページ設定 ＞ セクション構成 ＞「コラージュのキャッチ」 */
  /* ★★列の高さに入る大きさへ縮める（2026-10-16・公開デモ t06 の実射「地域の皆さまの健康／を／いちばん近くで支え／たい」）。
     実測 1440×900：列 414px に 34.56px ×（1＋字間 0.22）× 11字＝464px → 1〜2字だけの列が2本できていた。
     列の高さは画面の高さだけで決まる（`--catch-col`）＝コンテナは要らない。行の長さ（em）は PHP が字間 0.22 で見積もって渡す
     （`CLINIC_HERO_COLLAGE_V_LETTER`。字間を変えたら PHP の定数も変える＝テストで一致を固定）。
     縮めるだけで大きくはしない・下限は従来どおり 1.7rem（それでも入らない長い行は文節の切れ目で割れる）。 */
  .hero--collage.collage-catch-v .hero__catch {
    --catch-col: clamp(320px, 46vh, 500px);
    --catch-fs-min: 1.7rem; --catch-fs: clamp(var(--catch-fs-min), 2.4vw, 2.4rem);
    writing-mode: vertical-rl;
    font-size: max(var(--catch-fs-min), min(var(--catch-fs), calc((var(--catch-col) - 2px) / var(--catch-em, 0.01))));
    letter-spacing: 0.22em;
    line-height: 2.0;
    max-height: var(--catch-col);
    margin: 0.6em 0;
  }
  /* 横書きキャッチ：縦書きは1行が「列」になるので字間を広く取れるが、横書きで同じ字間だと
     1行が長くなりすぎて折り返しが増える。字間を詰め、そのぶん行間で息を持たせる。 */
  .hero--collage.collage-catch-h .hero__catch {
    font-size: clamp(1.6rem, 2.2vw, 2.2rem);
    letter-spacing: 0.06em;
    line-height: 1.9;
  }
  /* ★列の取り分は変えない。実測すると横書きでもキャッチ列を広げる必要が無く
     （改行はキャッチの改行位置が決めるので、幅を足しても行数は変わらない＝302×120 のまま）、
     広げると写真が細くなってヒーローが 893→844px と低くなるだけだった。
     結果、**向きを変えても写真の大きさとヒーローの高さは1pxも変わらない**。 */

  /* ── 外へ散らす（左右散らし・上の `--collage-spread` の続き）──────────────
     ★列は上限で止める＝器が広がっても写真は大きくならない。余りは flex が文字の柱へ回す
       （文字は min-content から伸びられる＝サブの折り返しが減る）。
     ★列の外側の余白＝`--collage-poke-x`。小は同じ量だけ余計にはみ出すので、**小の外端は器の端に付いたまま**
       器と一緒に外へ動き、大は「広がり − 余白」＝3割だけ外へ動く。左右とも同じトークン＝鏡像。
     ★上限は 960px 以上だけ（それ未満は列を縦に積む＝上限を掛けると右列が痩せる）。
     ★上限は「462px」と「画面の高さに収まる幅（下限 300px）」の小さいほう（上の `--collage-col-fit`）。
       列が細くなっても小の外端は器の端に付いたまま＝ヘッダーの端とそろう性質は変わらない。 */
  .hero--collage.collage-sides .hero__collage-photos { max-width: min(var(--collage-col-max), max(var(--collage-col-min), var(--collage-col-fit))); }
  .hero--collage.collage-sides .hero__collage-photos--left  { margin-left:  var(--collage-poke-x); }
  .hero--collage.collage-sides .hero__collage-photos--right { margin-right: var(--collage-poke-x); }
  /* ★写真が1枚（左列が無い＝右列だけ）のときは文字と写真を中央にまとめる。
     列を上限で止めたので、両端に振り分ける（space-between）ままだと文字が左端に寄り、
     真ん中が 700px 空く（実測 1920px）。上限が無かった頃は右列が 898px まで太り、ヒーローが 1428px まで伸びていた（1440px）。
     列の外側の余白も 0 にする（残すと、まとまりがその分だけ左へずれる）。 */
  .hero--collage.collage-sides .hero__inner--collage:not(:has(.hero__collage-photos--left)) { justify-content: center; --collage-poke-x: 0px; }

  /* ── 上下散らし（collage-band）：キャッチの上下に横長写真の帯を置く ──────────────
     ★**同じ4スロットを並べ替えるだけ**（PHPは配置を知らない。枠の寸法と縦横比だけが配置で変わる）。
     内側を縦積みにして DOM の 右列→キャッチ→左列 の順に並べる（order で右列を先頭へ）。
     上帯＝大(左)＋小(右)／下帯＝小(左)＋大(右)＝**大どうし・小どうしが対角**（左右散らしと同じ点対称）。 */
  .hero--collage.collage-band .hero__inner--collage {
    flex-direction: column; align-items: stretch;
    gap: clamp(0.75rem, 1.6vw, 1.25rem);
  }
  .hero--collage.collage-band .hero__collage-photos--right { order: -1; } /* 右列＝上の帯 */
  .hero--collage.collage-band .hero__collage-photos--left  { order: 1; }  /* 左列＝下の帯 */
  .hero--collage.collage-band .hero__collage-photos {
    flex: 0 0 auto; width: 100%;
    display: flex; justify-content: space-between; align-items: center;
  }
  /* 下帯だけ大小を入れ替える（対角にするため） */
  .hero--collage.collage-band .hero__collage-photos--left .hero__collage-photo--s2 { order: 1; }
  /* 形はすべて横長。大＝12:5（2.4:1・素材の 2.3:1 とほぼ同じ＝切り落としが少ない）／小＝3:2 */
  .hero--collage.collage-band .hero__collage-photo--s1,
  .hero--collage.collage-band .hero__collage-photo--s2 { aspect-ratio: 12 / 5; width: 39%; }
  .hero--collage.collage-band .hero__collage-photo--s3,
  .hero--collage.collage-band .hero__collage-photo--s4 { aspect-ratio: 3 / 2; width: 20%; }
  /* 左右散らし用の重なり・はみ出し・下限はすべて解除（帯では意味が変わる） */
  .hero--collage.collage-band .hero__collage-photo {
    margin: 0; min-width: 0;
  }
  /* ★散らし感は「高さの差＋端そろえ」で作る（負マージンで下げると帯自体が高くなる）。
     小は大より 36px 低いので、上帯では下端・下帯では上端にそろえると段差が生まれ、**帯の高さは増えない**。
     上帯＝大が上・小が下／下帯＝小が上・大が下 で 180°点対称。 */
  .hero--collage.collage-band .hero__collage-photos--right .hero__collage-photo--s1 { align-self: flex-start; }
  .hero--collage.collage-band .hero__collage-photos--right .hero__collage-photo--s3 { align-self: flex-end; }
  .hero--collage.collage-band .hero__collage-photos--left  .hero__collage-photo--s4 { align-self: flex-start; }
  .hero--collage.collage-band .hero__collage-photos--left  .hero__collage-photo--s2 { align-self: flex-end; }
}
@media (max-width: 959px) {
  .hero__inner--collage { flex-direction: column; align-items: stretch; }
  .hero__collage-text { order: -1; }
  .hero__collage-photos--right { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .hero__collage-photos--right .hero__collage-photo--s1 { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; }
  .hero__collage-photos--right .hero__collage-photo--s3 { grid-column: 2; grid-row: 1; aspect-ratio: 4 / 3; width: 100%; margin: clamp(1.2rem, 4vw, 2rem) 0 0; }
  /* モバイルは枚数を絞って大きく見せる（左列と下段の小は出さない）。1列なので対称の話は生じない。
     ★隠したスロットも画像の取得自体は起きるので、sizes 側で「隠れる幅＝1px」と申告して
       最小候補だけを取らせている（clinic_hero_collage_slots()。ブレークポイントはそちらと対）。 */
  .hero__collage-photos--left,
  .hero__collage-photo--s5 { display: none; }
}

/* ━ コラージュの飾り（軸 collage_deco＝white・2026-10-19）━━━━━━━━━━━━━━━━━━━━
   実射FB（マイデザイン6）「しま歯科医院のような白の装飾で明るく見せたい」。比較画像からユーザーが選んだ形。
   - 板は4枚：白（半透明・大きい写真の上／小さい写真の下）2枚＋ベージュ（写真の後ろ）2枚。
     **白・ベージュとも対角に1枚ずつ**（白＝左上・右下／ベージュ＝右上・左下）＝写真の 180°点対称とそろう。
     白を2枚とも下に置いた試作は「板が下に集まり左上が空く」でユーザーが上へ移した。
   - ★形は1種類＝**角を1つだけ大きく丸めた四角**（残りの角は写真と同じ --r-media）。
     半円のアーチを試したが「急に丸型が出てきて唐突」で外した。
   - ★★**大きく丸めた角は写真に隠れない側に向ける**。beige の2枚はヒーロー全体の端から置くので、
     丸めた角が写真の裏に入り、PC ではただの四角・スマホでは片方だけ丸く見えていた（実射FB）。
     ここでは**写真の列に対して**置く＝画面の幅が変わっても写真との重なり方が変わらない。
     白は中央側の角（左右で向かい合う）、ベージュは外側の角を丸めて写真の裏からのぞかせる。
   - 左上の白は**ヘッダーの下で止める**（上端まで伸ばすと板の端がメニューの文字をまたぐ）。上の端は右上のベージュとそろう。
   - 重ね順：列の ::before は写真より前の兄弟＝写真の後ろ、::after は後ろの兄弟＝大きい写真（z auto）の上、
     小さい写真（z-index 1）の下。どちらも z-index を持たないので、この順だけで決まる。
   - 左右散らしだけ（上下散らしは帯の中で幅を配る別の構成＝ヒーロー全体の2枚のまま。画面では inert で理由を出す）。 */
body.collagedeco-white .hero--collage.collage-sides {
  --cdeco-r: clamp(56px, 7vw, 120px);
  --cdeco-s: var(--r-media);
  /* 板の外へのはみ出しを「ヒーローの幅」から測るためのコンテナ（下の --cdeco-out）。
     画面幅（vw）で測ると、右サイドバーのヘッダーではヒーローが画面より狭く、板が端で切れる */
  container: cdeco / inline-size;
}
body.collagedeco-white .hero--collage.collage-sides .hero__collage-photos {
  position: relative;
  /* ★★はみ出し量の上限（1024px の実測で、外側のベージュは画面の外へ出て丸めた角が切れ、
       中央側の白は文字の柱へ食い込んで「診療案内」のボタンに掛かった）。
     - 中央側（白）＝列と文字の柱のあいだ（--collage-gap）より 0.5rem 手前まで
     - 外側（ベージュ）＝列の外端からヒーローの端まで（器の外の余白＋ガター＋外へ散らす量）より 1rem 手前まで。
       器の幾何は .hero__inner の式と同じ（中身＝min(幅 − ガター×2, 本文の幅 + 広がり×2)）。
     ★列の上で定義する＝--hero-gutter（.hero__inner）がここで読める。% は使う側（left/right）で列の幅に対して解かれる */
  --cdeco-in: min(16%, var(--collage-gap) - 0.5rem);
  --cdeco-out: min(20%, (100cqw - min(100cqw - 2 * var(--hero-gutter), var(--wp--style--global--wide-size, 1200px) + 2 * var(--hero-spread, 0px))) / 2 + var(--collage-poke-x, 0px) - 1rem);
}
body.collagedeco-white .hero--collage.collage-sides .hero__collage-photos::before,
body.collagedeco-white .hero--collage.collage-sides .hero__collage-photos::after {
  content: ""; position: absolute; pointer-events: none;
}
/* ベージュは beige と同じ色（bg-soft より一段だけ深いトーン）／白は 7割＝重なった写真がうっすら透ける */
body.collagedeco-white .hero--collage.collage-sides .hero__collage-photos::before {
  background: color-mix(in srgb, var(--wp--preset--color--primary-light) 80%, var(--wp--preset--color--bg-soft));
}
body.collagedeco-white .hero--collage.collage-sides .hero__collage-photos::after { background: rgb(255 255 255 / 0.7); }
@media (min-width: 960px) {
  /* ヒーロー全体に敷く2枚は使わない（写真の列に対して置き直す） */
  body.collagedeco-white .section-hero.hero--collage.collage-sides::before,
  body.collagedeco-white .section-hero.hero--collage.collage-sides::after { display: none; }
  /* 右列：ベージュは大きい写真の右上からのぞく／白は左下に重ね、下から立ち上がる（ヒーローの下端で切れる） */
  body.collagedeco-white .hero--collage.collage-sides .hero__collage-photos--right::before {
    top: -6%; right: calc(-1 * var(--cdeco-out)); width: 58%; height: 50%;
    border-radius: var(--cdeco-s) var(--cdeco-r) var(--cdeco-s) var(--cdeco-s);
  }
  body.collagedeco-white .hero--collage.collage-sides .hero__collage-photos--right::after {
    left: calc(-1 * var(--cdeco-in)); top: 60%; width: 58%; height: 60%;
    border-radius: var(--cdeco-r) var(--cdeco-s) var(--cdeco-s) var(--cdeco-s);
  }
  /* 左列：ベージュは大きい写真の左下からのぞく／白は右上に重ね、ヘッダーの下で止める（上の端は右上のベージュとそろう） */
  body.collagedeco-white .hero--collage.collage-sides .hero__collage-photos--left::before {
    bottom: -5%; left: calc(-1 * var(--cdeco-out)); width: 58%; height: 50%;
    border-radius: var(--cdeco-s) var(--cdeco-s) var(--cdeco-s) var(--cdeco-r);
  }
  body.collagedeco-white .hero--collage.collage-sides .hero__collage-photos--left::after {
    top: -6%; right: calc(-1 * var(--cdeco-in)); width: 58%; height: 46%;
    border-radius: var(--cdeco-s) var(--cdeco-s) var(--cdeco-r) var(--cdeco-s);
  }
}
@media (max-width: 959px) {
  /* 文字の後ろの右上の板（ヒーローの ::before）はそのまま使う＝丸めた角（左下）が見えている。角の形だけそろえる。
     左下の板（::after）は写真の裏に角が入るので使わず、写真の列に置き直す */
  body.collagedeco-white .section-hero.hero--collage.collage-sides::before {
    border-radius: var(--cdeco-s) var(--cdeco-s) var(--cdeco-s) var(--cdeco-r);
  }
  body.collagedeco-white .section-hero.hero--collage.collage-sides::after { display: none; }
  /* スマホは右列だけ（大＋小を横に並べる）。ベージュは大きい写真の左下からのぞく／
     白は大きい写真の右下に重ねて小さい写真の下へもぐり、右と下の端で切れる（写真の無い場所に置くと空のカードに見える） */
  body.collagedeco-white .hero--collage.collage-sides .hero__collage-photos--right::before {
    left: -6%; top: 30%; width: 55%; height: 85%;
    border-radius: var(--cdeco-s) var(--cdeco-s) var(--cdeco-s) var(--cdeco-r);
  }
  body.collagedeco-white .hero--collage.collage-sides .hero__collage-photos--right::after {
    left: 35%; top: 55%; width: 72%; height: 90%;
    border-radius: var(--cdeco-r) var(--cdeco-s) var(--cdeco-s) var(--cdeco-s);
  }
}

/* 軸C：ヒーロー構成 .hero--card（明るい地＋大角丸の写真カード1枚＋浮きラベル）
   写真の角丸は形の軸（--r-media）に追従する（未定義時のみ 28px）。 */
.section-hero.hero--card {
  position: relative; overflow: hidden;
  background: var(--wp--preset--color--bg-soft);
  min-height: calc(clamp(420px, 58vh, 620px) + var(--hero-header-inset, 0px));
  display: flex; align-items: center;
}
/* 幾何は `.hero__inner`（§器はこの1つだけ）。ここは差分だけ。 */
.hero__inner--card {
  display: flex; align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}
.hero__card-text { flex: 0 1 44%; }
.hero__card-media { position: relative; flex: 1 1 56%; }
.hero__card-photo {
  margin: 0; overflow: hidden;
  /* ★★スライドは `position: absolute; inset: 0`（共通の写真レイヤー）なので、
     figure が基準になる＝slideshow / framed の `.hero__bg` の役を、ここでは figure が兼ねる。
     箱を1つ増やさずに済む（比率・角丸・クリップの担当が既にこの1つに揃っているため）。 */
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-media, 28px); /* ★軸 mask 撤去（2026-08-24）＝写真の角丸は形の軸に一本化 */
  box-shadow: var(--sh-card);
  background: var(--wp--preset--color--primary-light);
}
/* ★写真そのものの寸法・切り取り・注目点は共通の `.hero__img` が持つ（2026-08-31）。
   旧 `.hero__card-photo img` は同じ3宣言をカードだけに書き写したもので、
   カードが共通のスライド組み立てを通るようになった時点で**二重持ち**になったので撤去した。 */
/* 浮きラベル（チップ）：写真の左上に少しはみ出して重ねる */
.hero__card-chip {
  position: absolute; top: -0.9em; left: clamp(0.8rem, 2vw, 1.6rem);
  padding: 0.45em 1.3em;
  background: var(--wp--preset--color--accent); color: #fff;
  font-size: 0.82rem; font-weight: var(--w-ui, 700); letter-spacing: 0.08em;
  border-radius: var(--r-chip);
  box-shadow: var(--sh-card);
}
@media (max-width: 959px) {
  .hero__inner--card { flex-direction: column-reverse; align-items: stretch; }
  .hero__card-text { flex-basis: auto; }
}

/* ━━ ★★ヒーローのイラスト＝軸 hero_scene（2026-10-21）：カードの足もとに木・草・鳥を並べる ━━
   置き場所の枠・絵柄・部品の届け方は inc/hero-scene.php の冒頭。素材と色の契約は assets/hero-illustrations/README.md。
   ★地面＝ヒーローの下端。`.hero__inner` を高さいっぱいに伸ばし（中身は中で上下中央のまま）、
     その中に本文の幅と同じ幅の層を敷く＝横の位置を「本文の幅に対する%」で写真・文字の列にそろえられる
     （ヒーロー全体の%にすると、画面の幅で写真との位置関係がずれる）。
   ★文字の列の下に置くのは低い部品だけ＝`.hero__inner` の下の余白（足もとの帯）に収まる。
     帯は下の余白を最低限の高さにしておくことで作る（余白の軸で詰めても、部品が文字に掛からない）。
   ★★写真にも文字にも重ねない（2026-10-21 実射FB「写真とがっつり被るイラストの配置は微妙」）：
     写真の下は低いものだけ、背の高い木は文字と写真のあいだと左右の余白だけ（枠は inc/hero-scene.php・テストが幅ごとに測る）。
     層は z-index 0、文字と写真は 1（念のための順＝重ならない配置が前提）。
   ★PC の鳥は文字の列のすぐ上（`.hero-scene-sky`＝`.hero__card-text` の中）。スマホは写真の上の余白（`.is-sky`）。 */
.section-hero.hero--card.has-scene { align-items: stretch; }
.section-hero.hero--card.has-scene .hero__inner--card {
  padding-bottom: max(var(--wp--preset--spacing--80, 4rem), 3.75rem);
}
.has-scene .hero__card-text,
.has-scene .hero__card-media { position: relative; z-index: 1; }
.hero-scene,
.hero-scene-sky,
.hero-band,
.hero-edge {
  /* ★固定の色＝ここ1か所（木と草はどのカラーでも同じ＝葉を院の色にすると紺・藤で青や紫の木になった）。
     院の色は鳥（メイン）と花・実（アクセント）だけ。部品は style="fill:var(--hi-*, 既定)" でこれを読む。 */
  --hi-leaf: #A9D39E;
  --hi-deep: #4E8C55;
  --hi-trunk: #8A6244;
  --hi-main: var(--wp--preset--color--primary);
  --hi-accent: var(--wp--preset--color--accent);
  --hi-cloud: #FFFFFF;   /* 雲は白（淡い地との差はどのカラーでも同じくらい＝比 1.07〜1.13） */
  --hi-wall: #EBD3A3;    /* 街並みの壁（砂色）。屋根＝メインカラー・窓と街灯の明かり＝アクセントカラー */
  /* 群れの足もとの丘＝葉の緑を白に混ぜた淡い緑（どのカラーでも同じ）。地の色と混ぜると桜で灰色がかった */
  --hi-mound: color-mix(in srgb, var(--hi-leaf) 40%, #FFFFFF);
  --hi-ground: #CDE6B5;  /* 帯の地面（固定の淡い緑） */
  --hi-roof: #E06B5B;    /* 描き直しの街並みの屋根の既定（帯では家ごとに .hb-1〜6 が変える） */
}
.hero-scene {
  position: absolute; top: 0; bottom: 0;
  left: var(--hero-gutter); right: var(--hero-gutter);   /* ＝`.hero__inner` の中身の幅（ガターは .hero__inner が持つ1か所） */
  z-index: 0; pointer-events: none;
  container-type: inline-size;                            /* 部品の高さ＝本文の幅に対する cqw */
}
.hero-scene__p {
  position: absolute; bottom: 0;
  left: calc(var(--x) * 1%);
  height: calc(var(--h) * 1cqw); width: auto; aspect-ratio: var(--ar);
  transform: translateX(-50%);
  overflow: visible;
}
.hero-scene__p.is-sky { bottom: auto; top: calc(var(--hero-header-inset, 0px) + var(--top)); }
.hero-scene__p.is-sp { display: none; }
/* 群れの足もとの丘（半楕円）。高さは足もとの帯の中（inc/hero-scene.php の clinic_hero_scene_mounds()） */
.hero-scene__mound {
  position: absolute; bottom: 0;
  left: calc(var(--x) * 1%); width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1cqw);
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: var(--hi-mound);
}
.hero-scene__mound.is-sp { display: none; }
/* PC の鳥：文字の列の上端に高さ0の帯を置き、そこから上へ浮かべる（文字の量が変わっても文字には掛からない）。
   高さは文字の列に対する cqw（`.hero__card-text` はコンテナ）。上端まで 48px 以内＝上の余白が狭いときも切れない。 */
.hero-scene-sky { position: absolute; left: 0; right: 0; bottom: 100%; height: 0; pointer-events: none; }
.hero-scene-sky__p {
  position: absolute; bottom: var(--b);
  left: calc(var(--x) * 1%);
  height: calc(var(--h) * 1cqw); width: auto; aspect-ratio: var(--ar);
  transform: translateX(-50%);
  overflow: visible;
}
@media (max-width: 959px) {
  /* 縦積み（写真が上・文字が下）＝伸ばした `.hero__inner` の中で上下中央に */
  .section-hero.hero--card.has-scene .hero__inner--card {
    justify-content: center;
    /* 足もとの帯＝いちばん背の高い部品（本文の幅の 23%・上限あり）＋すき間 */
    padding-bottom: calc(min((100vw - 2 * var(--hero-gutter)) * 0.23, 23 * 4.6px) + 0.75rem);
  }
  .hero-scene__p.is-pc,
  .hero-scene__mound.is-pc,
  .hero-scene-sky { display: none; }
  .hero-scene__mound.is-sp { display: block; height: min(calc(var(--h) * 1cqw), calc(var(--h) * 4.6px)); }
  .hero-scene__p.is-sp { display: block; height: min(calc(var(--h) * 1cqw), calc(var(--h) * 4.6px)); }
}

/* ━━ ★★並べ方「帯」＝軸 hero_scene_layout（2026-10-22 ユーザー「参考サイトの端から端まで続く街並みに近づけたい」）━━
   ヒーローの下に専用の帯（高さ --hb-h）を設け、文字と写真はその上に置く（`.hero__inner` の下の余白＝帯の高さ）＝重ならない。
   並びは PHP が3回くり返し、中央寄せで端から端まで埋める（両端は切れる）。部品の高さ＝帯の高さ × --k、間隔 --gap（負は重ねる）。
   ★建物の色＝家ごとに .hb-1〜6（固定の色の1か所）。屋根を青の目印で描いた建物は .is-roofmain で屋根の色に読み替える。
     お店のひさし・描き直しの部品の旗などは院の色（--hi-main）のまま。 */
.section-hero.hero--card.scene-band { --hb-h: clamp(120px, 9vw, 180px); }
.section-hero.hero--card.has-scene.scene-band .hero__inner--card { padding-bottom: calc(var(--hb-h) + 1rem); }
.hero-band {   /* 色の変数は上の .hero-scene と共通の1か所 */
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--hb-h);
  z-index: 1; pointer-events: none; overflow: hidden;
  display: flex; justify-content: center; align-items: flex-end;
}
.hero-band::before {   /* 緑の地面（部品の足もとが少し重なる） */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--hb-h) * 0.12); background: var(--hi-ground);
}
.hero-band__row { position: relative; display: flex; align-items: flex-end; flex: none; padding-bottom: calc(var(--hb-h) * 0.09); }
.hero-band__p {
  flex: none; height: calc(var(--hb-h) * var(--k)); width: auto; aspect-ratio: var(--ar);
  margin-right: calc(var(--hb-h) * var(--gap)); overflow: visible;
}
:is(.hero-band__p, .hero-edge__p).hb-1 { --hi-wall: #F6E6C2; --hi-roof: #E06B5B; --hi-accent: #7FB0E3; }
:is(.hero-band__p, .hero-edge__p).hb-2 { --hi-wall: #CFE2F3; --hi-roof: #F0A33E; --hi-accent: #FFF4D6; }
:is(.hero-band__p, .hero-edge__p).hb-3 { --hi-wall: #F7D9D3; --hi-roof: #5A8ED6; --hi-accent: #7FB0E3; }
:is(.hero-band__p, .hero-edge__p).hb-4 { --hi-wall: #F8EAB4; --hi-roof: #5FAE97; --hi-accent: #FFF4D6; }
:is(.hero-band__p, .hero-edge__p).hb-5 { --hi-wall: #E9D6C3; --hi-roof: #D9779A; --hi-accent: #7FB0E3; }
:is(.hero-band__p, .hero-edge__p).hb-6 { --hi-wall: #DCEBD2; --hi-roof: var(--hi-trunk); --hi-accent: #FFF4D6; }
:is(.hero-band__p, .hero-edge__p).is-roofmain { --hi-main: var(--hi-roof); }
@media (max-width: 959px) {
  .section-hero.hero--card.scene-band { --hb-h: clamp(84px, 24vw, 112px); }
  .section-hero.hero--card.has-scene.scene-band .hero__inner--card { padding-bottom: calc(var(--hb-h) + 0.75rem); }
}

/* ━━ ★★ページの下にも続ける＝軸 hero_scene_extend（2026-10-22 ユーザー「下のセクションでも世界観を・情報が埋もれないこと」）━━
   ヒーローの絵柄を下のセクションにも置く。★置くのは中身の無い場所だけ（inc/front-sections.php が差し込む）。
   ① .hero-close＝ページの最後（お問い合わせの上）に帯をもう一度。高さ・地面・家ごとの色はヒーローの帯と同じ。
   ② .hero-edge＝セクションの境目（区切りの波の直後に高さ 0 の層＝そこから上へ測る）。左右の端に小さな群れ。
      ★波の前に挟まない＝背景の隅の飾り（bg_deco）は「セクション＋波」の隣り合わせ（+ .wave-divider::before）で波の上に続きを描く。
      足もと＝区切りの波の線のいちばん低いところ（PHP が波の形から計算＝--he-foot-pc/sp・波の箱の高さに対する割合）＝宙に浮かない。
      ★高さ＝セクションの下の余白（spacing--90）の 8 割＋波の中に沈むぶん＝上のセクションに入り込むのは下の余白の 8 割まで
        ＝文字・写真・ボタンに届かない（全セクションの下の余白は spacing--90＝テストが見る）。
      ★高さの上限 --he-cap＝群れの幅が、足もとを計算した横の範囲（clinic_hero_scene_edge_spans()）に収まる大きさ。 */
.hero-close { position: relative; height: var(--hb-h); --hb-h: clamp(120px, 9vw, 180px); }
.hero-edge {
  position: relative; z-index: 2; height: 0;
  --he-f: var(--he-foot-pc); --he-cap: 6.8vw; --he-m: max(6px, 3.5vw);
  --he-u: min(calc(var(--wp--preset--spacing--90) * 0.8 + var(--wave-h, 0px) * var(--he-f)), var(--he-cap));
}
.hero-edge__row {
  position: absolute; bottom: calc(var(--wave-h, 0px) * (1 - var(--he-f)) - 2px);
  display: flex; align-items: flex-end; pointer-events: none;
}
.hero-edge--l .hero-edge__row { left: var(--he-m); }
.hero-edge--r .hero-edge__row { right: var(--he-m); }
.hero-edge__p {
  flex: none; height: calc(var(--he-u) * var(--k)); width: auto; aspect-ratio: var(--ar);
  margin-right: calc(var(--he-u) * var(--gap)); overflow: visible;
}
.hero-edge__p:last-child { margin-right: 0; }
@media (max-width: 959px) {
  .hero-close { --hb-h: clamp(84px, 24vw, 112px); }
  .hero-edge { --he-f: var(--he-foot-sp); --he-cap: 14.5vw; }
}

/* ═══ 軸D：見出し演出＝英字ウォーターマークを「どこに出すか」（body.headfx-*）═══
   アイブロウ（英字ラベル）を巨大な透かし文字にする。値＝出す場所（none / behind / section）。
   ラベルはパターン側でインラインstyle付与のため !important で上書きする。
   ★透かしは1軸の中の排他値＝二重に出ない（特徴の番号を透かしにしなかった判断と同じ理由）。 */

/* ── behind：見出しの背面に敷く（従来の en-watermark） ── */
/* ★「英字が主役」の型（headstyle-english）では敷かない＝英字そのものが大きい（設定画面にも「効かない」と出す） */
body.headfx-behind:not(.headstyle-english) .section-head { position: relative; }
body.headfx-behind:not(.headstyle-english) .section-head__label {
  position: absolute;
  inset-inline: 0;
  top: -0.32em;
  z-index: 0;
  font-size: clamp(3rem, 8.5vw, 6.2rem) !important;
  font-weight: var(--w-head, 700) !important;
  letter-spacing: 0.04em !important;
  line-height: 1;
  color: color-mix(in srgb, var(--wp--preset--color--primary) 9%, transparent) !important;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
body.headfx-behind:not(.headstyle-english) .section-head h2 { position: relative; z-index: 1; }

/* ── section / marquee：セクションの下端に大きな英字を敷く（はましげ皮フ科系・2026-07-25）──
   behind との違いは「スケールと基準」：behind＝見出しブロックの背面／section・marquee＝バンドの地。
   section＝隅に据え置き／marquee＝全幅をゆっくり流れる（下の marquee ブロック参照）。
   ★★対象は専用要素 `.section-head__wm`（front-sections.php が section/marquee のときだけ出す
     アイブロウの複製）。**アイブロウ `.section-head__label` は動かさない**——透かしが見出しから
     離れる型なので、ラベルごと持って行くと見出しから英字が消えたように見える（参照サイトも
     小さなアイブロウと大きな透かしの両方を持つ）。behind はラベル自身を巨大化して差し替える型。
   ★基準は `.section-*`（バンド直下の <section>。既に position:relative）。そのため
     behind と違って `.section-head` に position を付けない——付けると見出しブロックが
     基準になり、下端どころか見出しのすぐ下に出てしまう。
   ★左右は「バンドの通し偶奇 p0/p1」で自動交互＝向きの軸を足さない（wave:arc・bg_deco の弧と同じ方針）。
   ★★ただし bg_deco の弧と場所を取り合う：弧は p0＝左下／p1＝右下 に出るので、透かしは
     その**反対側**へ（p0→右下／p1→左下）。同じ隅に重ねると両方とも読めない塊になる。
     bg_deco が none でも交互であることに変わりはないので、条件分岐は要らない。
   ★色は淡色バンド＝白／白バンド＝澄んだパステルのトーン反転。**境界に接しない装飾だけが持てる規則**で、
     bg_deco の dot-fade・全体パターンのドットも淡色バンドでは同じ白（2026-09-11）。
     ※ bg_deco の弧・リングは境界に接するので反転しない（2026-08-25）＝**同じ規則ではない**。
     ここで primary を直接数%混ぜないこと（彩度が落ちて灰緑の「にじみ」に見える＝bg_deco の教訓）。
     ※ behind は白地の見出し背面という別条件なので従来どおり primary 9% のままでよい。
   ★z-index:-1＝本文の背面。`.front-band { isolation: isolate }` があるのでバンドの地より前・
     本文より後ろに収まる（0 だと絶対配置が在来フローの本文より前に出て文字に被る）。
   ★バンドに overflow:clip を付ける：既定の clip は body.deco-on のときだけなので、
     透かしがはみ出して横スクロールが出るのを防ぐため headfx-section でも自前で付ける。 */
body:is(.headfx-section, .headfx-marquee) .front-band { overflow: clip; }
body:is(.headfx-section, .headfx-marquee) .front-band--soft  { --wm-c: #fff; }
body:is(.headfx-section, .headfx-marquee) .front-band--white { --wm-c: color-mix(in srgb, var(--wp--preset--color--primary-light) 45%, #fff); }
.section-head__wm {
  position: absolute;
  bottom: clamp(6px, 1.2vw, 20px);
  z-index: -1;
  margin: 0 !important;
  font-size: clamp(3rem, 7.5vw, 6.5rem);
  font-weight: var(--w-head, 700);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--wm-c, color-mix(in srgb, var(--wp--preset--color--primary) 9%, transparent));
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
/* 据え置き型（section）だけ隅に寄せる：弧（p0=左下）の反対側＝右下／弧（p1=右下）の反対側＝左下。
   ★`:not(--flow)` で流れる型を除外すること——マーキーは全幅に伸ばすので、
     ここで片側インセットが当たると幅が足りずループに隙間が出る。 */
.front-band--p0 .section-head__wm:not(.section-head__wm--flow) { right: clamp(12px, 3vw, 56px); left: auto; text-align: right; }
.front-band--p1 .section-head__wm:not(.section-head__wm--flow) { left: clamp(12px, 3vw, 56px); right: auto; text-align: left; }

/* ── marquee：同じ場所を「流れる」型（2026-07-25）──
   本文は front-sections.php が「語＋区切り」を **セット×2** 繰り返した1本の文字列にしている。
   前半と後半が完全に同一なので、要素幅 = 2 × 1セット幅 が厳密に成立し、
   `translateX(-50%)` がちょうど1セット分＝継ぎ目のない無限ループになる。
   ★★区切りは各コピーの末尾に必ず付いていること（PHP 側）。語の「間」にだけ入れると
     セット幅に末尾の区切りが含まれず、1周ごとに区切り1つぶんズレる
     （フォトバンドで実測した flex gap の罠と同じ構造。あちらは margin-inline-end で解決した）。
   ★子要素（トラック用の span）を作らない：wp:paragraph の中に span を入れると
     エディタのブロック検証に触れる。1テキストノードのまま要素自身をアニメーションさせ、
     クリップは `.front-band` の overflow:clip（上で付与）に任せる。
   ★左端起点＋shrink-to-fit：`left:0; right:auto` の絶対配置＋nowrap で要素幅＝全文の幅になる。
   ★★秒数は定数（135s）：PHP が「語＋隙間＝1コピー」の幅を約11em・コピー数を定数に揃えているので、
     セット幅が語に依らずほぼ一定（実測 9325〜10437px＝速度 74〜83px/s）。
     フォトバンドは速度トークンをインラインstyleで注入したが、こちらは wp:paragraph ブロックなので
     インラインstyleを足すとブロック検証に触れる＝**注入できない**。だから「セット幅を揃える」ことが
     速度を揃える唯一の手段になり、正規化を文字数ではなく幅で行う必要があった（実測：文字数正規化では
     4331〜5398px＝速度差25%）。90em は最大フォント(104px)で約9400px＝ウルトラワイドまで覆える。
   ★向きは p0/p1 で自動交互＝向きの軸を足さない（据え置き型の左右交互と同じ方針）。 */
.section-head__wm--flow {
  left: 0;
  right: auto;
  text-align: left;
  animation: clinic-wm-flow 135s linear infinite;
  will-change: transform;
}
.front-band--p1 .section-head__wm--flow { animation-direction: reverse; }
@keyframes clinic-wm-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* ★★ホバーでは止めない（2026-07-26 FBで撤回。フォトバンドとは扱いを分ける）。
   一度は `.front-band:hover` で一時停止を入れたが、**判定領域が「文字」ではなく「帯まるごと」**
   （実測 1265×502px）になるため、セクションを読んでいる間ずっと止まる＝
   ①一定に流れ続ける動きは背景に沈むのに、止まる/動くを繰り返すとその変化が視線を引き**逆効果**、
   ②判定領域が不可視で巨大なので因果が分からず「勝手に止まる＝バグ」に見える、
   ③この透かしは装飾（aria-hidden・z-index:-1・本文の背面）で、止めてもできることが増えない。
   ★フォトバンドがホバー停止を持つのは**写真そのものがコンテンツ**で「じっくり見たい」＝止める意味があり、
     かつホバー対象＝写真の帯そのもので因果が明快だから。同じ「自動で動くもの」でも役割が違えば扱いを変える。
   ★停止手段は `prefers-reduced-motion` に一本化する：WCAG 2.2.2 の対象は「情報」の動きで、
     装飾のみ・支援技術からは aria-hidden で隠れている本要素は本来の射程外。
     OS設定に従う方が挙動が一貫し予測もできる。
   ★代案「判定を透かし自身に絞る」は不採用＝`pointer-events:none` かつ本文の背面なので狙って当てられず、
     停止手段として機能しない。 */
@media (prefers-reduced-motion: reduce) {
  .section-head__wm--flow { animation: none; }
}

/* ★1バンド1透かし（弧の「1バンド1弧が上限」と同じ）：診療時間＋お知らせのように
   1つのバンドに見出しが2つあるセクションでは、2つ目以降の透かしが同じ隅に重なって潰れる。
   → 2列目以降の列の透かしは出さない（＝先頭の見出しの英字だけがバンドの透かしになる）。 */
.wp-block-column + .wp-block-column .section-head__wm { display: none; }
/* モバイルは巨大英字が本文を圧迫するので出さない（透かしは余白の演出）。
   流れる型は狭幅で特に主張が強くなるので同様に出さない。 */
@media (max-width: 768px) {
  .section-head__wm { display: none; }
}

/* 軸D-1：見出しの飾り（body.headdeco-*）＝セクション見出し h2 の下の飾り。
   値は診療案内の科目名（tdeco-*）／特徴の見出し（features-deco-*）と同じ4種＋なし＋kit。
   ★既定 `kit` は規則を1つも出さない＝base の下線バー（「共通レイアウト」節）も
     kit-elegant の「バーなし」も無傷。軸を足しても既存サイトの見た目が動かない（cta_shape と同型）。
   ★セレクタは body（要素）から書いて (0,2,3) にすること：kit CSS は base.css の“後”に
     読み込まれるため、kit-elegant の `.section-head h2::after { display: none }` (0,1,2) に
     詳細度で勝てないと「elegant だけ軸が効かない」という一番わかりにくい状態になる。
   ★飾りは h2 自身に効かせる（包む span を足さない）：.section-head は縦flex＋align-items:center
     ＝h2 の幅は既に fit-content（実測 1080px の器に対し h2 120px。見出しアイコンは絶対配置で
     幅に加算されない）。マーカーの塗りも文字幅で止まる。wp:heading の中に span を入れると
     エディタのブロック検証に触れるため、CSSだけで完結させる。
   ★線の幅は固定px（departments と同型）：セクション見出しは中央寄せが前提で、`bar` は現行の
     44px バーをそのまま再現する必要がある（kit → bar に変えても見た目が動かないこと）。
     「線を文字幅に合わせる」のは左揃えの型を持つ特徴セクション側の事情（features-deco-*）。 */
body.headdeco-none .section-head h2 { padding-bottom: 0; }
body.headdeco-none .section-head h2::after { display: none; }

/* 線系3種の共通の下地（色はセカンダリ＝アクセント追従） */
body:is(.headdeco-bar, .headdeco-dotted, .headdeco-wave) .section-head h2 { padding-bottom: 0.4em; }
body:is(.headdeco-bar, .headdeco-dotted, .headdeco-wave) .section-head h2::after {
  content: "";
  display: block;
  background: var(--wp--preset--color--accent);
  margin: 0.5em auto 0;
}
/* 短い下線＝土台（auto）と同じ見た目（2026-10-17 に見出しを大きくしたのに合わせ 44×3 → 36×2px に細く） */
body.headdeco-bar .section-head h2::after { width: 36px; height: 2px; border-radius: 999px; }
/* 点線＝丸ドットの繰り返し（radial-gradient。dotted border より丸が綺麗に出る）。
   ★★2026-08-22 実射FB「点線がキリの悪いところで途中で切れる」：
     11px のタイルを repeat-x していたので、器の幅が 11 の倍数でないと**最後の1個が欠ける**
     （文字幅に合わせる特徴の見出しは幅が任意／固定 46px のほうも 46÷11＝4.18 個で端が切れていた）。
   → `round`＝**タイルを整数個に収まるよう間隔だけ伸縮**させる。丸の大きさは closest-side＝
     タイルの高さ(6px)で決まるので**ドットの径は変わらず、間隔だけがわずかに動く**。
   ★幅を 11 の倍数に丸める案は採らない：特徴の下線は**文字幅に追従する**のが仕様なので、
     幅のほうを触ると別の要件を壊す。**器はそのまま、中身の敷き方で解く。** */
body.headdeco-dotted .section-head h2::after {
  width: 46px; height: 6px; border-radius: 0;
  background: radial-gradient(circle closest-side, var(--wp--preset--color--accent) 92%, transparent) 0 0 / 11px 6px round no-repeat;
}
/* 波線＝SVGマスク＋背景色（mask なら色はトークン追従のまま）。幅が固定なので伸縮方式（departments と同じ） */
body.headdeco-wave .section-head h2::after {
  width: 48px; height: 8px; border-radius: 0;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 8' preserveAspectRatio='none'><path d='M0 4 Q 5.5 0 11 4 T 22 4 T 33 4 T 44 4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/></svg>") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 8' preserveAspectRatio='none'><path d='M0 4 Q 5.5 0 11 4 T 22 4 T 33 4 T 44 4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/></svg>") center / 100% 100% no-repeat;
}
/* マーカー＝文字の下半分を淡いセカンダリで塗る。h2 が fit-content なので文字幅で止まる。
   下線バー用の padding-bottom を残すと塗りの帯が文字から下へ伸びるので 0 に戻す。 */
body.headdeco-marker .section-head h2 {
  padding: 0 0.12em;
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--wp--preset--color--accent) 38%, #fff) 62%);
}
body.headdeco-marker .section-head h2::after { display: none; }

/* 軸D-2：見出しの型（body.headstyle-*・2026-10-17）＝セクション見出しの**組み方**。
   ★★なぜ軸にしたか：8テンプレが**どれも同じ型**（小さい英字 → アイコン → 和文 → 短い下線・中央）で、
     色と書体を変えても「同じテンプレの色違い」に見えた（2026-10-16 参考サイト・公開デモの比較）。
     大きさ・字間の底上げは土台（「共通レイアウト」節）で全テンプレに効かせ、**型だけ**をテンプレごとに振り分ける。
   ★center は規則を出さない＝土台そのまま（heading_deco の auto と同じ考え方）。
   ★和文の h2 はどの型でも残る＝検索・読み上げは変わらない。
   ★この節は軸D-1（飾り）より後ろに置くこと：同じ詳細度で飾りの規則を打ち消すため（後勝ち）。 */

/* ── english：英字を大きく主役にし、和文は小さく添える ──
   ★英字の大文字・小文字は PHP が決める（clinic_section_label_text：OUR COMMITMENT → Our Commitment・FAQ はそのまま）。
     CSS の text-transform では「FAQ」まで「Faq」になる。
   ★**英字ラベルを空にした見出し**（section-head--nolabel）は主役が居ないので、和文を土台の大きさのまま出す
     ＝和文を小さくする規則は :not(.section-head--nolabel) にだけ掛ける。
   ★飾り（下線・マーカー）は付けない＝英字が目印になる。設定画面にも「効かない」と出す（inert）。
   ★長い英字（MEDICAL DEPARTMENTS 等）は2行に折り返す。1語でも入らなければ端で割る（はみ出さない）。 */
body.headstyle-english .section-head { gap: 0.5rem; }
body.headstyle-english .section-head__label {
  font-family: var(--font-head);
  font-size: clamp(2.25rem, 1.55rem + 2.6vw, 2.75rem);   /* 36px → PC 44px */
  font-weight: var(--w-head, 700);
  letter-spacing: 0.03em;
  line-height: 1.1;
  margin: 0;
  margin-inline-end: -0.03em;   /* 字間は最後の字の後ろにも付く＝同じ量を右から引いて中央をそろえる（和文も同じ） */
  text-transform: none;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
body.headstyle-english .section-hours-news .section-head__label { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.25rem); }
/* ★★和文は**アイコンと1つのまとまり**にして英字の真下の中央に置く（2026-10-17 実機FB・3往復して決定）。
   ①アイコンを字の外（左）に下げる →「和文が若干左に寄っている」（英字が主役では和文が小さく、アイコン＝和文の約1.5倍が外に出て目立つ）
   ②アイコン＋和文をまとまりで中央 →「字が右に寄って見える」→ ③字だけ中央に戻す → 「やっぱり②がよい」＝**②で確定**。
   ★迷ったら②のまま：①③はアイコンが外に下がるぶん、まとまりとしては英字より 12〜18px 左に見える。
   アイコンは h2 の最後の子なので、横並びの flex を逆順にして左に置く。字間 0.16em の後ろの余りも右から引く。
   ★スマホの長い見出しでも横並びのまま（和文の側が折り返すので画面の外に出ない）＝アイコンを上に回す規則より詳細度が高い。 */
body.headstyle-english .section-head:not(.section-head--nolabel) h2 {
  font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);
  letter-spacing: 0.16em;
  line-height: 1.6;
  color: var(--wp--preset--color--text-main);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  margin-inline-end: -0.16em;
}
body.headstyle-english .section-head h2 { padding: 0; background: none; }
body.headstyle-english .section-head h2::after { display: none; }
/* アイコン（見出しの左）は小さい和文に合わせて小さく・絶対配置をやめて並びに入れる */
body.headstyle-english .section-head:not(.section-head--nolabel) .section-head__icon--left { position: static; flex: none; margin: 0; transform: none; }
body.headstyle-english .section-head:not(.section-head--nolabel) .section-head__icon--left .section-head__icon-svg { height: 1.5em; }

/* ── left：英字の前に短い罫線・和文は大きく左揃え ──
   ★見出しの左端＝下の中身の左端。上の「余白を重ねない」規則があるので、カードの左端とそろう。
   ★アイコン（illust_icon_pos: left）は**英字の行の頭**に置く（PHP：section-head__icon--label）＝罫線の代わり。
     和文の左に置くと画面の外へ出るか、和文の行幅を食ってスマホで12字が入らなくなる。
   ★下線系の飾りは付けない（中央に寄る短い線は左揃えと噛み合わない）。マーカーは文字に付くので残す。 */
body.headstyle-left .section-head { align-items: flex-start; text-align: left; }
body.headstyle-left .section-head__label { display: flex; align-items: center; gap: 0.8em; margin-inline-end: 0; }
body.headstyle-left .section-head__label::before { content: ""; flex: none; width: 28px; height: 1px; background: currentColor; }
body.headstyle-left .section-head__label:has(.section-head__icon--label)::before { display: none; }
body.headstyle-left .section-head__icon--label { display: inline-flex; }
body.headstyle-left .section-head__icon--label .section-head__icon-svg { height: clamp(22px, 1.25rem + 0.4vw, 28px); }
body.headstyle-left .section-head h2 { text-align: left; padding-bottom: 0; }
body.headstyle-left .section-head h2::after { display: none; }

/* ★★ヒーロー埋め込みの見出しも**同じ軸**に従う（2026-08-30）。
   飾りを足すなら軸に従わせること——従わせないと「飾りなしを選んだのにヒーローだけ線が出る」
   ＝2026-08-22 の「透過のときだけ下線が生える」（装飾の理由が軸と結びついていない）の再演になる。
   ★寸法は `--edeco-*` トークンだけを差し替える＝形の宣言はカード側に1回だけ持つ。 */
body.headdeco-none .hero__embed-title::after { display: none; }
body.headdeco-bar .hero__embed-title { --edeco-w: 30px; --edeco-h: 2px; }
body.headdeco-dotted .hero__embed-title::after {
  --edeco-w: 32px; --edeco-h: 5px; border-radius: 0;
  background: radial-gradient(circle closest-side, var(--wp--preset--color--accent) 92%, transparent) 0 0 / 8px 5px round no-repeat;
}
body.headdeco-wave .hero__embed-title::after {
  --edeco-w: 34px; --edeco-h: 6px; border-radius: 0;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 8' preserveAspectRatio='none'><path d='M0 4 Q 5.5 0 11 4 T 22 4 T 33 4 T 44 4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/></svg>") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 8' preserveAspectRatio='none'><path d='M0 4 Q 5.5 0 11 4 T 22 4 T 33 4 T 44 4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/></svg>") center / 100% 100% no-repeat;
}
/* マーカー＝文字の背面を塗る。名前だけを包む span に掛かるので、アイコンの背面は塗らない。 */
body.headdeco-marker .hero__embed-name {
  padding: 0 0.12em;
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--wp--preset--color--accent) 38%, #fff) 62%);
}
body.headdeco-marker .hero__embed-title::after { display: none; }

/* ★縦書きの見出し（`embed_head: side`）では線を出さない：縦書きの `::after` は
   **文字列の下端に横棒**として出るので「見出しの下線」に読めず、しかもこの型は
   既に `border-right` の縦罫で見出しと本文を分けている＝飾りの担当が既に居る。
   ★アイブロウ（英字）は縦の流れにそのまま乗るので出したまま。 */
@media (min-width: 901px) {
  .embed-head-side .hero__embed-title::after { display: none; }
  
}

/* ── セクションの構え（軸「band」）× 区切り・角の形（軸「wave」）──
   band＝セクションの構え：flat=全幅ストライプ、panel=浮きパネル、panel-alt=片寄せパネル。
   wave＝区切り・角の形：全幅のときはセクション間の区切りSVG、パネルのときは角丸の大きさに読み替える。
   ＝アール(wave:corner)や弧(wave:arc)を、全幅でも浮き/片寄せパネルでも一貫して効かせる。 */

/* パネルの角丸(--panel-r)は「区切り・角の形」(wave 軸) に追従する。
   全幅では区切りSVGの形、パネルでは角丸の大きさ、という読み替え。 */
/* ★★★パネルの角丸は **形の軸（shape）** に従う（2026-08-24 実射FB「アールで保存しても直線のまま」）。
   旧実装は `wave`（区切りの軸）が握っていたが、それが**逆転**を生んでいた——実測：
   #4 上質・和モダンは `shape:soft`（やわらか）なのにパネルは**特大 160px**、
   #7 あたたか絵本は `shape:pop`（**特大角丸**）なのにパネルは**標準 64px**。
   ＝サイト全体の角丸（ボタン・カード）と、パネルの角丸が**別々の軸から来ていた**ため、
   「かっちり」を選んでも特大アールのパネルが出せる、という矛盾した組合せまで作れた。
   ★角丸は `shape` の担当（`--r-btn` / `--r-card` … と同じ場所）。区切りの軸は区切りだけを持つ。 */
body.band-panel,
body.band-panel-alt                     { --panel-r: clamp(28px, 5vw, 64px); }   /* 既定＝やわらか相当 */
body:is(.band-panel, .band-panel-alt).shape-sharp    { --panel-r: clamp(4px, 0.8vw, 10px); }   /* かっちり＝ほぼ角 */
body:is(.band-panel, .band-panel-alt).shape-standard { --panel-r: clamp(14px, 2.6vw, 32px); }  /* 標準 */
body:is(.band-panel, .band-panel-alt).shape-soft     { --panel-r: clamp(28px, 5vw, 64px); }    /* やわらか */
body:is(.band-panel, .band-panel-alt).shape-pop      { --panel-r: clamp(56px, 11vw, 160px); }  /* ポップ＝特大アール */

/* 浮きパネル：淡色バンドを大角丸の浮きコンテナに（しま歯科系の上質レイアウト）。
   ページ地は白のまま、コンテンツ側が浮く＝図と地の反転。角丸が境界を担うため区切りSVGは非表示。 */
body.band-panel .front-band--soft {
  max-width: min(1280px, calc(100% - 2 * clamp(14px, 3.5vw, 44px)));
  margin-inline: auto;
  margin-block: clamp(20px, 4vw, 56px);
  border-radius: var(--panel-r, clamp(28px, 5vw, 64px));
  overflow: hidden; /* 散らし装飾をパネル内にクリップ */
}
body.band-panel .wave-divider { display: none; }

/* 片寄せパネル：片側は画面端まで／反対側だけ角丸で浮かせる非対称パネル。
   寄せる向きは淡色バンドごとに左右交互（front-sections.php が front-band--s0/s1 を付与）。
   角丸(--panel-r)は wave 軸に追従（上のブロックで body 側に定義）。 */
body.band-panel-alt .front-band--soft {
  --panel-gap: clamp(14px, 4vw, 72px);
  margin-block: clamp(20px, 4vw, 56px);
  overflow: hidden;
}
/* s0：左は画面端まで、右だけ浮かせる（右側に余白＋右角丸） */
body.band-panel-alt .front-band--soft.front-band--s0 {
  margin-right: var(--panel-gap);
  margin-left: 0;
  border-radius: 0 var(--panel-r) var(--panel-r) 0;
}
/* s1：右は画面端まで、左だけ浮かせる（左側に余白＋左角丸） */
body.band-panel-alt .front-band--soft.front-band--s1 {
  margin-left: var(--panel-gap);
  margin-right: 0;
  border-radius: var(--panel-r) 0 0 var(--panel-r);
}
body.band-panel-alt .wave-divider { display: none; }
@media (max-width: 600px) {
  /* 狭い画面は寄せ量を控えめに（片側の余白だけ） */
  body.band-panel-alt .front-band--soft { --panel-gap: clamp(10px, 4vw, 20px); }
}

/* ── 背景装飾シェイプ（軸「bg_deco」）──
   circles＝淡い色の大きな円をセクション背景に重ねる（淡色レイヤーの重なり演出）。
   色はトークンの color-mix ＝キット/パレット自動追従。band（構え）と直交
   （gradient と重ねると水彩の重なりに、panel では角丸パネル内にクリップされて馴染む）。
   z-index:-1 ＋ .front-band の isolation で本文の背面・イラスト散らし(§13)と同層。
   淡色バンドは s0/s1（front-sections.php の交互クラス）で円の寄せを左右交互＝単調さ回避。 */
/* フラグメント（円の半分）がバンド外へ描かれないよう両軸クリップ
   （下の境界2トーン円は「隣のバンドが自分の側の半分を描く」方式のため、はみ出し描画は禁止） */
body.deco-on .front-band { overflow: clip; }
/* 隅の装飾は ::before のみ使用（::after は「セクション全体の装飾」bg_pattern 用に空けてある＝2軸共存の要） */
body.deco-on .front-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  aspect-ratio: 1;
  pointer-events: none;
  background: var(--bcirc-accent);   /* ★全バンド共通（下の §色は全バンド共通 参照） */
}
/* ━ 特大の弧（単色・バンドごと）━
   円は画面に収まらない特大（丸ごと見えると虫眼鏡/レンズに見える・実射フィードバック）を
   画面端アンカー＋translateX で4割前後画面外へ＝「半円より小さい大きな弧」だけを見せる。
   色は**全バンド共通のセカンダリ淡色**（下の §色は全バンド共通）・すべて不透明。
   ★弧は境界に接するのでトーン反転しない（淡色バンドで白にすると隣の白帯と同色で隆起する・2026-08-25）。
   ★ primary を直接数%混ぜるのはNG（彩度が落ちて灰緑のにじみに見える・実射確認済）。
   ★ 境界2トーン合成（境界線で白⇄淡色が反転する1つの円）も試したが違和感で不採用（2026-07-18）。 */
body:is(.deco-on, .bgpat-on, .hero-framed) {
  /* 色トークンは隅の装飾（deco-on）・全体パターン（bgpat-on）・額縁の装飾（hero-framed）で共有 */
  --bcirc-pale:    color-mix(in srgb, var(--wp--preset--color--primary-light) 45%, #fff);
  --bcirc-accent:  color-mix(in srgb, var(--wp--preset--color--accent) 12%, #fff);
  /* 濃いめ2段（背景色ありのバンド・ヒーロー額縁用。淡色だと弱く沈む場所向け） */
  --bcirc-pale-strong:   color-mix(in srgb, var(--wp--preset--color--primary-light) 62%, #fff);
  --bcirc-accent-strong: color-mix(in srgb, var(--wp--preset--color--accent) 22%, #fff);
  --bcirc-w-soft:  clamp(400px, 48vw, 840px);  /* 淡色バンドの弧の直径 */
  --bcirc-w-white: clamp(360px, 44vw, 760px);  /* 白バンドの弧の直径 */
  /* 円の沈み量（直径に対する境界線下への押し下げ%）。大きいほど控えめ＝見える弧が薄くなる。
     42%（≒6割見える）は主張が強かったため 58%（≒4割見える）に（2026-07-18 実射FB）。
     バンド側 translateY と divider 断片側 translateY(calc(…-100%)) が共有＝つなぎ目は常に一致。 */
  --bcirc-sink: 58%;
}
/* 弧は各バンド1つまで・下側の角から1/4円。
   左右は「バンドの並び順」＝通し偶奇クラス p0/p1（front-sections.php 付与）で交互：
   p0（先頭・偶数番目）＝左下／p1（奇数番目）＝右下。
   ★ 色クラス（soft/white）に左右を紐づけるのはNG——背景反転＝白始まりのとき先頭が右になる
   （2026-07-18 実射FBで発覚）。先頭は必ず左（ヒーロー額縁の弧が右下から出ているため交互で繋がる）。
   色は全バンド共通（上の §色は全バンド共通。バンド種別ごとの色分けは 2026-08-25 に撤去）。 */
body.deco-on .front-band--p0::before {
  bottom: 0;
  left: 0;
  transform: translate(-45%, var(--bcirc-sink));
}
body.deco-on .front-band--p1::before {
  bottom: 0;
  right: 0;
  transform: translate(45%, var(--bcirc-sink));
}
/* ★★★色は**全バンド共通のセカンダリ淡色**（2026-08-25 実射FB）。
   旧実装は「トーン反転」＝淡色バンドには白／白バンドには淡色を置いていたが、
   バンドは白⇄淡色が**交互に並ぶ**ので、「自分の地の逆」は必然的に**隣の地の色そのもの**になる。
   しかも弧は**下隅に置いて境界の下へ沈む**ので、隣と同色の面が境界で接する＝
   目が2つを1つの領域として統合し、「下のセクションが食い込んできた」ように見えていた。
   実測（teal）：淡色バンドの白い弧 vs 下の白バンド＝**差 0/255（完全に同一）**／
   白バンドの淡い弧 vs 下の淡色バンド＝**差 1/255**。＝印象ではなく色が同じだった。
   ★★調整では直らない：2色しかない世界で反転する限り必ず隣と一致する＝**構造的**。
     隣と被らせないには「自分の地の逆」をやめて**第3の色**にするしかなく、それが accent。
   ★同型の失敗は一度潰していた——2026-07-18「バンドごとに濃淡を変えたら、バンドの並びと
     連動して『右下だけ濃い』に見えた→全バンド同一へ」。今回はその一般形が残っていたもの。
   ※ 直径だけはバンドの種類で変える（淡色バンドは少し大きい）＝色とは別の理由。 */
body.deco-on .front-band--soft::before  { width: var(--bcirc-w-soft); }
body.deco-on .front-band--white::before { width: var(--bcirc-w-white); }
/* ★ wave 有効時のつなぎ目（2026-07-18・実射FB）：弧はバンド矩形の下端で直線カットされるため、
   波の境界とぶつかると不自然だった。対策＝区切りSVG（.wave-divider）自身に「同じ円の続き」を描く。
   divider の構造＝「上バンド色の下地 ＋ 下バンド色の波パスSVG」なので、円の断片を
   下地の上・波パスの下（isolation ＋ z-index:-1。svg は in-flow content で負z の上に描画される）に挟むと、
   弧は波ゾーンまで連続し、波の曲線でちょうど切られて「波に沈む」見た目になる。
   幾何の一致：バンド側の円は bottom:0＋translateY(--bcirc-sink)。divider は margin-top:-2px で
   バンドに2px食い込むため、断片は top:2px を基準に translateY(calc(--bcirc-sink - 100%)) で同一座標になる。
   沈み量はトークン --bcirc-sink 1つで両者連動＝調整してもつなぎ目はズレない。
   ※ 円を小さくして波を避ける案は不採用（弧の存在感が消える・実射FB）。 */
body.deco-on .wave-divider { position: relative; isolation: isolate; }
body.deco-on :is(.front-band--soft, .front-band--white) + .wave-divider::before {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  aspect-ratio: 1;
  pointer-events: none;
  top: 2px;
  background: var(--bcirc-accent);   /* ★バンド側の弧と同じ色＝つなぎ目で色が変わらない */
}
/* 左右＝直前バンドの通し偶奇（p0=左/p1=右）、色・直径＝直前バンドの種類（バンド側の弧と同じ規則） */
body.deco-on .front-band--p0 + .wave-divider::before {
  left: 0;
  transform: translate(-45%, calc(var(--bcirc-sink) - 100%));
}
body.deco-on .front-band--p1 + .wave-divider::before {
  right: 0;
  transform: translate(45%, calc(var(--bcirc-sink) - 100%));
}
body.deco-on .front-band--soft + .wave-divider::before  { width: var(--bcirc-w-soft); }
body.deco-on .front-band--white + .wave-divider::before { width: var(--bcirc-w-white); }

/* ━ 形バリエーション（bg_deco: blobs / rings / dots / arches・2026-07-18）━
   共通機構（deco-on＝p0/p1配置・共通の装飾色・沈み・波断片）はそのまま、形の差分だけ上書きする。
   バンド側と divider 断片側の両方に同じ形を当てる＝波に沈む連続性を維持（dots のみ断片不要）。 */

/* ブロブ：円を4値 border-radius で崩した有機形。p0/p1 で radius・傾きとも互い違い。
   ★ radius は左右で別の値にする（2026-07-18 実射FB「右だけブロブに見えない」）：
   画面外へ押し出すため実際に見えるのは p0（左）＝ボックスの右上角／p1（右）＝左上角だけ。
   1組の radius だと片側の見える角がほぼ真円（58%/52%≒50/50）になり丸と区別がつかない。
   → 見える角が強く崩れるよう、p1 にはミラー＋強調版を与える。
   ★ 傾きは rotate プロパティではなく transform 内で translate の後ろに書く（2026-07-18 実射FB・波で乱れ）：
   rotate プロパティは transform と独立に合成され回転中心が「移動前のボックス中心」になる。
   バンド側（バンド下端基準）と波断片側（区切り上端基準）は移動前の位置が違う＝別々の点を中心に
   回転してシルエットがズレる。transform: translate(...) rotate(...) なら移動後の自分の中心で回る
   ＝両者が同一点を中心に回転し、波をまたいでも形が一致する。 */
body.deco-blobs .front-band--p0::before,
body.deco-blobs .front-band--p0 + .wave-divider::before {
  border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%; /* 見える右上角＝42%/60%（不均等） */
}
body.deco-blobs .front-band--p0::before {
  transform: translate(-45%, var(--bcirc-sink)) rotate(-10deg);
}
body.deco-blobs .front-band--p0 + .wave-divider::before {
  transform: translate(-45%, calc(var(--bcirc-sink) - 100%)) rotate(-10deg);
}
body.deco-blobs .front-band--p1::before,
body.deco-blobs .front-band--p1 + .wave-divider::before {
  border-radius: 40% 60% 44% 56% / 62% 50% 50% 38%; /* 見える左上角＝40%/62%（不均等） */
}
body.deco-blobs .front-band--p1::before {
  transform: translate(45%, var(--bcirc-sink)) rotate(12deg);
}
body.deco-blobs .front-band--p1 + .wave-divider::before {
  transform: translate(45%, calc(var(--bcirc-sink) - 100%)) rotate(12deg);
}

/* リング：同心の多重リング＝虹（2026-07-18「単調なのでセカンダリを重ねて虹に」FB）。
   border ではなく radial-gradient のリング縞で描く＝1プロパティで完結し、波断片にも同じ背景を
   与えるだけで連続性が保てる（closest-side＝正方形ボックスの半分＝半径基準の%指定）。
   リング間の隙間はバンド地が透ける＝軽やかさ維持。色（外→中→内）は --bring-c1/c2/c3 で
   **全バンド共通の accent 濃淡2段**（12%/22%）。弧と同じく境界に接するのでトーン反転しない。 */
body.deco-rings :is(.front-band--soft, .front-band--white)::before,
body.deco-rings :is(.front-band--soft, .front-band--white) + .wave-divider::before {
  background: radial-gradient(circle closest-side,
    transparent 0 50%,
    var(--bring-c3) 50% 62%, transparent 62% 66%,
    var(--bring-c2) 66% 78%, transparent 78% 82%,
    var(--bring-c1) 82% 94%, transparent 94%);
}
/* ★リングも全バンド共通＝accent の濃淡2段だけで構成（上の §色は全バンド共通 と同じ理由）。
   旧実装はバンドごとに白／淡色を混ぜており、外側のリングが隣のバンドと同色になっていた。 */
body.deco-rings .front-band::before,
body.deco-rings .front-band + .wave-divider::before {
  --bring-c1: var(--bcirc-accent);
  --bring-c2: var(--bcirc-accent-strong);
  --bring-c3: var(--bcirc-accent);
}

/* ━ 隅の装飾：dot-fade＝隅に向かってドットが「大きく」なるハーフトーン階調（2026-07-18）━
   ★ 極小グリッド＋mask フェードは「グラデーションにしか見えない」FBで廃止。
   ドットを1粒ずつ明示配置：5×5 の斜めグリッドで、隅（下）からの距離 d=列+行 に応じて
   半径 24→19→15→11→8→6px と段階縮小＝1粒1粒がはっきり丸に見えるサイズ勾配。
   グリッド間隔20%（最小ボックス300pxで60px）＞最大直径48px＝ドット同士は重ならない。
   p0=左下基準／p1 は scaleX(-1) の左右反転（::before は装飾のみなので反転可）。波断片は不要。 */
body.deco-dot-fade :is(.front-band--soft, .front-band--white)::before {
  width: clamp(300px, 38vw, 520px);
  border-radius: 0;
  background:
    radial-gradient(circle 24px at 8% 92%, var(--bdot-c, var(--bcirc-accent)) 23px, transparent 24px),
    radial-gradient(circle 19px at 28% 92%, var(--bdot-c, var(--bcirc-accent)) 18px, transparent 19px),
    radial-gradient(circle 19px at 8% 72%, var(--bdot-c, var(--bcirc-accent)) 18px, transparent 19px),
    radial-gradient(circle 15px at 48% 92%, var(--bdot-c, var(--bcirc-accent)) 14px, transparent 15px),
    radial-gradient(circle 15px at 28% 72%, var(--bdot-c, var(--bcirc-accent)) 14px, transparent 15px),
    radial-gradient(circle 15px at 8% 52%, var(--bdot-c, var(--bcirc-accent)) 14px, transparent 15px),
    radial-gradient(circle 11px at 68% 92%, var(--bdot-c, var(--bcirc-accent)) 10px, transparent 11px),
    radial-gradient(circle 11px at 48% 72%, var(--bdot-c, var(--bcirc-accent)) 10px, transparent 11px),
    radial-gradient(circle 11px at 28% 52%, var(--bdot-c, var(--bcirc-accent)) 10px, transparent 11px),
    radial-gradient(circle 11px at 8% 32%, var(--bdot-c, var(--bcirc-accent)) 10px, transparent 11px),
    radial-gradient(circle 8px at 88% 92%, var(--bdot-c, var(--bcirc-accent)) 7px, transparent 8px),
    radial-gradient(circle 8px at 68% 72%, var(--bdot-c, var(--bcirc-accent)) 7px, transparent 8px),
    radial-gradient(circle 8px at 48% 52%, var(--bdot-c, var(--bcirc-accent)) 7px, transparent 8px),
    radial-gradient(circle 8px at 28% 32%, var(--bdot-c, var(--bcirc-accent)) 7px, transparent 8px),
    radial-gradient(circle 8px at 8% 12%, var(--bdot-c, var(--bcirc-accent)) 7px, transparent 8px),
    radial-gradient(circle 6px at 88% 72%, var(--bdot-c, var(--bcirc-accent)) 5px, transparent 6px),
    radial-gradient(circle 6px at 68% 52%, var(--bdot-c, var(--bcirc-accent)) 5px, transparent 6px),
    radial-gradient(circle 6px at 48% 32%, var(--bdot-c, var(--bcirc-accent)) 5px, transparent 6px),
    radial-gradient(circle 6px at 28% 12%, var(--bdot-c, var(--bcirc-accent)) 5px, transparent 6px);
}
/* ★★★淡色バンドのドットは白＝トーン反転（2026-09-11 実射FB「背景隅の装飾が白背景でしか出ない。
   カラーの帯では実質見えない」）。全バンド共通の accent 12% は、淡色地とほぼ同じ色に着地していた
   （白と淡色地は ΔE 3.0〜7.7 しか離れておらず、その間に置いた色はパレット次第で淡色地に重なる。terracotta 1.8）。
   ★★反転してよいのは**境界をまたがないから**：dot-fade は波断片を出さない（下の content:none）。
     2026-08-25 に反転をやめた理由＝「弧が境界に接し、白い弧＋隣の白帯が地続きになって隆起して見える」は
     弧の話で、ここには当たらない。＝英字透かし（--wm-c）・額縁マットのドット（--hdot-c）と同じ規則。
   ★白バンドは既定（var(--bdot-c, var(--bcirc-accent))）のまま＝見た目を変えない。 */
body.deco-dot-fade .front-band--soft::before { --bdot-c: #fff; }
body.deco-dot-fade .front-band--p0::before {
  bottom: 0;
  left: 0;
  transform: none;
}
body.deco-dot-fade .front-band--p1::before {
  bottom: 0;
  right: 0;
  transform: scaleX(-1);
}
body.deco-dot-fade :is(.front-band--soft, .front-band--white) + .wave-divider::before { content: none; }

/* ━ セクション全体の装飾（軸 bg_pattern・2026-07-18 に隅の装飾から分離）━
   ::after を「バンド全面のパターンレイヤー」として使う（隅の装飾＝::before と独立＝共存可）。
   色は `--bdot-c` で**淡色バンドだけ白**（トーン反転・2026-09-11）。白バンドは既定の --bcirc-accent。
   境界は跨がない（波断片なし）。dots-fine / halftone は見た目不評で廃止（2026-07-18）。 */
body.bgpat-on :is(.front-band--soft, .front-band--white)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* ★淡色バンドでは白（dot-fade と同じ理由・同じ規則。全体パターンも inset:0 で境界を跨がない）。 */
body.bgpat-on .front-band--soft::after { --bdot-c: #fff; }
/* dots＝ランダム大中小ミックス（モック01）：固定の擬似ランダム座標に10個。
   サイズは px 固定（%だとバンドの縦横比で楕円になる）・重ねない・端で切らない。
   ★ 配置は左右のサイド帯のみ（2026-07-18 FB「中央に水玉が来ると騒がしい」）：
   コンテンツの可読ゾーン（中央）に柄を入れない＝大きい粒ほど端（x 0〜16% / 84〜100%）、
   小粒だけ少し内側（x 〜20% / 80%〜）まで許容。中央は静かに・装飾は余白に、が原則。 */
body.bgpat-dots :is(.front-band--soft, .front-band--white)::after {
  background:
    radial-gradient(circle 36px at 4% 18%, var(--bdot-c, var(--bcirc-accent)) 35px, transparent 36px),
    radial-gradient(circle 14px at 12% 46%, var(--bdot-c, var(--bcirc-accent)) 13px, transparent 14px),
    radial-gradient(circle 24px at 5% 78%, var(--bdot-c, var(--bcirc-accent)) 23px, transparent 24px),
    radial-gradient(circle 9px at 18% 64%, var(--bdot-c, var(--bcirc-accent)) 8px, transparent 9px),
    radial-gradient(circle 11px at 15% 92%, var(--bdot-c, var(--bcirc-accent)) 10px, transparent 11px),
    radial-gradient(circle 30px at 96% 12%, var(--bdot-c, var(--bcirc-accent)) 29px, transparent 30px),
    radial-gradient(circle 10px at 87% 36%, var(--bdot-c, var(--bcirc-accent)) 9px, transparent 10px),
    radial-gradient(circle 18px at 93% 58%, var(--bdot-c, var(--bcirc-accent)) 17px, transparent 18px),
    radial-gradient(circle 8px at 82% 76%, var(--bdot-c, var(--bcirc-accent)) 7px, transparent 8px),
    radial-gradient(circle 22px at 95% 90%, var(--bdot-c, var(--bcirc-accent)) 21px, transparent 22px);
}
/* dots-mix＝アウトライン×ソリッドの混在（モック06）：輪郭リングは
   radial-gradient(transparent 内径, 色 内径〜外径, transparent) の3ストップで描く。
   配置は dots と同じくサイド帯のみ（中央は静かに）。 */
body.bgpat-dots-mix :is(.front-band--soft, .front-band--white)::after {
  background:
    radial-gradient(circle at 8% 22%, var(--bdot-c, var(--bcirc-accent)) 20px, transparent 21px),
    radial-gradient(circle at 16% 56%, transparent 15px, var(--bdot-c, var(--bcirc-accent)) 16px 19px, transparent 20px),
    radial-gradient(circle at 5% 86%, transparent 12px, var(--bdot-c, var(--bcirc-accent)) 13px 15px, transparent 16px),
    radial-gradient(circle at 92% 16%, var(--bdot-c, var(--bcirc-accent)) 24px, transparent 25px),
    radial-gradient(circle at 84% 46%, transparent 10px, var(--bdot-c, var(--bcirc-accent)) 11px 13px, transparent 14px),
    radial-gradient(circle at 95% 72%, transparent 20px, var(--bdot-c, var(--bcirc-accent)) 21px 24px, transparent 25px),
    radial-gradient(circle at 88% 92%, var(--bdot-c, var(--bcirc-accent)) 11px, transparent 12px);
}

/* 山なみ：かまぼこ形（上だけ丸いアーチ）。高さ＝幅の半分（aspect-ratio 2/1）。
   下から出す現行設計と最も相性が良い形。沈み・波断片は共通機構がそのまま効く。 */
body.deco-arches .front-band::before,
body.deco-arches :is(.front-band--soft, .front-band--white) + .wave-divider::before {
  aspect-ratio: 2 / 1;
  border-radius: 999px 999px 0 0;
}
/* ━ 額縁の装飾（軸 hero_deco・2026-07-18 に bg_deco から独立）━
   額縁ヒーローのマット地の装飾を専用軸で選ぶ（hero_variant=framed のときのみ意味を持つ。
   herodeco-* クラスは常に出るが、CSS が .hero--framed / .hero-framed-field 限定なので他ヒーローでは不発）。
   duo/primary＝特大円の弧を「対角線」に走らせる2トーン（松尾系）。
   実装は疑似要素ではなく background の radial-gradient：
   ・本文・埋め込みカードより常に背面＝診療時間/お知らせカードが必ず円より優先される
   ・要素からはみ出さない＝overflow/横スクロール/ドロップダウンのクリップ問題が起きない
   ・統一フィールド時はヘッダーにも同じ円の続きを描ける（下の専用ルール）
   円の幾何（半径・中心）はトークンで一元管理＝パターン調整はこの変数だけ触ればよい。 */
body.hero-framed {
  --dcirc-r: clamp(300px, 33vw, 640px);         /* 左上円：半径 */
  --dcirc-cx: calc(var(--dcirc-r) * -0.16);     /* 中心（ヒーロー上端左端基準・少し画面外） */
  --dcirc-cy: calc(var(--dcirc-r) * -0.10);     /*   ＝弧が左端〜上端を対角線に横切る */
  /* ★円の色（2026-07-18「額縁の装飾色が弱い」FBで濃いめ2段に確定）：
     左上＝濃いめプライマリ（primary-light 62%×白）／右下＝濃いめセカンダリ（accent 22%×白）。
     マット色（soft/white）によらず同じ＝白マットでも淡色マットでもしっかり見える。不透明（透過で薄めない）。
     primary を直接混ぜるのはNG（彩度が落ちて灰緑のにじみ・実射確認済）＝primary-light 経由で濃くする。
     ※ ヒーロー額縁の弧は左上＝プライマリ／右下＝セカンダリで固定（バンドの装飾色とは別系統）。 */
  --dcirc-c1: var(--bcirc-pale-strong);
  --dcirc2-r: clamp(230px, 25vw, 480px);        /* 右下円：半径（少し小さめ） */
  --dcirc-c2: var(--bcirc-accent-strong);
}
body:is(.herodeco-duo, .herodeco-primary) .section-hero.hero--framed {
  background-image:
    radial-gradient(circle var(--dcirc-r) at var(--dcirc-cx) var(--dcirc-cy),
      var(--dcirc-c1) calc(var(--dcirc-r) - 1px), transparent var(--dcirc-r)),
    radial-gradient(circle var(--dcirc2-r)
      at calc(100% - var(--dcirc2-r) * 0.2) calc(100% - var(--dcirc2-r) * 0.04),
      var(--dcirc-c2) calc(var(--dcirc2-r) - 1px), transparent var(--dcirc2-r));
}
/* 統一フィールド時：ヘッダーにも左上円の続きを描く＝左のロゴが円の上に載って強調される。
   ヒーロー上端＝ヘッダー下端なので、同じ中心を calc(100% + cy) でヘッダー下端基準に読み替えると
   弧が継ぎ目なくつながる。ヘッダー内の帯・バーは透明化（本体が地色＋円を担う。同色なので見た目不変）。 */
body:is(.herodeco-duo, .herodeco-primary).hero-framed-field:not(.header-sidebar) .site-header {
  background-color: var(--frame-mat);
  background-image: radial-gradient(circle var(--dcirc-r)
      at var(--dcirc-cx) calc(100% + var(--dcirc-cy)),
      var(--dcirc-c1) calc(var(--dcirc-r) - 1px), transparent var(--dcirc-r));
}
body:is(.herodeco-duo, .herodeco-primary).hero-framed-field:not(.header-sidebar) :is(.site-header__top, .site-header__bar) {
  background: transparent;
}
/* スクロール後：sticky ヘッダーが弧の断片を持ち去って浮くため、円は消して地色だけ維持 */
body:is(.herodeco-duo, .herodeco-primary).hero-framed-field:not(.header-sidebar) .site-header.is-scrolled {
  background-image: none;
}

/* ── 額縁の装飾：バリエーション（duo 以外） ── */
/* primary＝右下の円もプライマリに（左上と同色） */
body.herodeco-primary.hero-framed { --dcirc-c2: var(--bcirc-pale-strong); }
/* split＝上半分が白・下半分がプライマリの2トーン。
   統一フィールド時はヘッダー＝上半分の白と地続きにする（弧は描かない）。 */
body.herodeco-split .section-hero.hero--framed {
  background-image: linear-gradient(180deg, #fff 0 50%, var(--bcirc-pale-strong) 50%);
}
body.herodeco-split.hero-framed-field:not(.header-sidebar) .site-header {
  background-color: #fff;
  background-image: none;
}
body.herodeco-split.hero-framed-field:not(.header-sidebar) :is(.site-header__top, .site-header__bar) {
  background: transparent;
}
/* dot-fade＝集まるドット（左上と右下の対角・プライマリ）。隅ほど大粒 20→15→11→7px の階調。
   位置は px 固定（左上＝左上基準／右下＝calc(100% - Xpx/Ypx) の両軸ミラー）。
   右下のドットは額（写真カード）の背面に一部潜る＝松尾サイトの「写真が円を切る」構図と同じで意図どおり。
   ★ 統一フィールド時はヘッダーにも最上段の行（ひと回り大きい 24→18→13→8px）を描き、
   「ヘッダーから始まって額のマットへ流れ落ちる」カスケードにする（2026-07-18 FB）。 */
body.herodeco-dot-fade .section-hero.hero--framed {
  background-image:
    radial-gradient(circle 20px at 40px 32px, var(--bcirc-pale-strong) 19px, transparent 20px),
    radial-gradient(circle 15px at 96px 32px, var(--bcirc-pale-strong) 14px, transparent 15px),
    radial-gradient(circle 11px at 152px 32px, var(--bcirc-pale-strong) 10px, transparent 11px),
    radial-gradient(circle 7px at 208px 32px, var(--bcirc-pale-strong) 6px, transparent 7px),
    radial-gradient(circle 15px at 40px 88px, var(--bcirc-pale-strong) 14px, transparent 15px),
    radial-gradient(circle 11px at 96px 88px, var(--bcirc-pale-strong) 10px, transparent 11px),
    radial-gradient(circle 7px at 152px 88px, var(--bcirc-pale-strong) 6px, transparent 7px),
    radial-gradient(circle 11px at 40px 144px, var(--bcirc-pale-strong) 10px, transparent 11px),
    radial-gradient(circle 7px at 96px 144px, var(--bcirc-pale-strong) 6px, transparent 7px),
    radial-gradient(circle 7px at 40px 200px, var(--bcirc-pale-strong) 6px, transparent 7px),
    radial-gradient(circle 20px at calc(100% - 40px) calc(100% - 36px), var(--bcirc-pale-strong) 19px, transparent 20px),
    radial-gradient(circle 15px at calc(100% - 96px) calc(100% - 36px), var(--bcirc-pale-strong) 14px, transparent 15px),
    radial-gradient(circle 11px at calc(100% - 152px) calc(100% - 36px), var(--bcirc-pale-strong) 10px, transparent 11px),
    radial-gradient(circle 7px at calc(100% - 208px) calc(100% - 36px), var(--bcirc-pale-strong) 6px, transparent 7px),
    radial-gradient(circle 15px at calc(100% - 40px) calc(100% - 92px), var(--bcirc-pale-strong) 14px, transparent 15px),
    radial-gradient(circle 11px at calc(100% - 96px) calc(100% - 92px), var(--bcirc-pale-strong) 10px, transparent 11px),
    radial-gradient(circle 7px at calc(100% - 152px) calc(100% - 92px), var(--bcirc-pale-strong) 6px, transparent 7px),
    radial-gradient(circle 11px at calc(100% - 40px) calc(100% - 148px), var(--bcirc-pale-strong) 10px, transparent 11px),
    radial-gradient(circle 7px at calc(100% - 96px) calc(100% - 148px), var(--bcirc-pale-strong) 6px, transparent 7px),
    radial-gradient(circle 7px at calc(100% - 40px) calc(100% - 204px), var(--bcirc-pale-strong) 6px, transparent 7px);
}
/* 統一フィールド時：ヘッダーに最上段の行＝カスケードの起点（弧のヘッダー続きと同じ構造）。
   1行だけなのでヘッダー高さの個体差でも切れない（y48±24px はどのヘッダー高でも収まる）。 */
body.herodeco-dot-fade.hero-framed-field:not(.header-sidebar) .site-header {
  background-color: var(--frame-mat);
  background-image:
    radial-gradient(circle 24px at 40px 48px, var(--bcirc-pale-strong) 23px, transparent 24px),
    radial-gradient(circle 18px at 100px 48px, var(--bcirc-pale-strong) 17px, transparent 18px),
    radial-gradient(circle 13px at 152px 48px, var(--bcirc-pale-strong) 12px, transparent 13px),
    radial-gradient(circle 8px at 196px 48px, var(--bcirc-pale-strong) 7px, transparent 8px);
}
body.herodeco-dot-fade.hero-framed-field:not(.header-sidebar) :is(.site-header__top, .site-header__bar) {
  background: transparent;
}
body.herodeco-dot-fade.hero-framed-field:not(.header-sidebar) .site-header.is-scrolled {
  background-image: none;
}
/* dots / dots-mix＝全体の装飾と同じ柄をマットに。色はマット色でトーン反転
   （soft マット=白／白マット=淡プライマリ）。
   ★ 額縁のサイド帯はバンドより幅が細い（広画面で 130〜170px・内側は額の背面）ため、
   バンド用の座標（x 12〜18% 等）を流用すると額に隠れて片側2個しか見えない（2026-07-18 FB「寂しい」）。
   → x はごく端（1〜6%／94〜99%）に寄せ、縦に多め（7個/側・y 6〜92%）に並べる。 */
body.hero-framed { --hdot-c: #fff; }
body.hero-framed.framemat-white { --hdot-c: var(--bcirc-pale); }
body.herodeco-dots .section-hero.hero--framed {
  background-image:
    radial-gradient(circle 30px at 3% 8%, var(--hdot-c) 29px, transparent 30px),
    radial-gradient(circle 12px at 6% 21%, var(--hdot-c) 11px, transparent 12px),
    radial-gradient(circle 20px at 2% 34%, var(--hdot-c) 19px, transparent 20px),
    radial-gradient(circle 9px at 5% 48%, var(--hdot-c) 8px, transparent 9px),
    radial-gradient(circle 24px at 3% 62%, var(--hdot-c) 23px, transparent 24px),
    radial-gradient(circle 10px at 6% 76%, var(--hdot-c) 9px, transparent 10px),
    radial-gradient(circle 16px at 2% 90%, var(--hdot-c) 15px, transparent 16px),
    radial-gradient(circle 26px at 97% 6%, var(--hdot-c) 25px, transparent 26px),
    radial-gradient(circle 10px at 94% 19%, var(--hdot-c) 9px, transparent 10px),
    radial-gradient(circle 18px at 98% 32%, var(--hdot-c) 17px, transparent 18px),
    radial-gradient(circle 8px at 95% 46%, var(--hdot-c) 7px, transparent 8px),
    radial-gradient(circle 28px at 97% 60%, var(--hdot-c) 27px, transparent 28px),
    radial-gradient(circle 12px at 94% 74%, var(--hdot-c) 11px, transparent 12px),
    radial-gradient(circle 20px at 98% 88%, var(--hdot-c) 19px, transparent 20px);
}
body.herodeco-dots-mix .section-hero.hero--framed {
  background-image:
    radial-gradient(circle at 3% 10%, var(--hdot-c) 20px, transparent 21px),
    radial-gradient(circle at 5% 26%, transparent 14px, var(--hdot-c) 15px 18px, transparent 19px),
    radial-gradient(circle at 2% 42%, var(--hdot-c) 10px, transparent 11px),
    radial-gradient(circle at 4% 60%, transparent 19px, var(--hdot-c) 20px 23px, transparent 24px),
    radial-gradient(circle at 2% 76%, var(--hdot-c) 14px, transparent 15px),
    radial-gradient(circle at 5% 90%, transparent 10px, var(--hdot-c) 11px 13px, transparent 14px),
    radial-gradient(circle at 96% 8%, transparent 19px, var(--hdot-c) 20px 23px, transparent 24px),
    radial-gradient(circle at 94% 24%, var(--hdot-c) 12px, transparent 13px),
    radial-gradient(circle at 98% 38%, transparent 9px, var(--hdot-c) 10px 12px, transparent 13px),
    radial-gradient(circle at 96% 56%, var(--hdot-c) 22px, transparent 23px),
    radial-gradient(circle at 94% 72%, transparent 13px, var(--hdot-c) 14px 16px, transparent 17px),
    radial-gradient(circle at 97% 88%, var(--hdot-c) 9px, transparent 10px);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13. イラスト装飾レイヤー（旧 kit-soft.css から移設。illust対応キット共通の構造）
   色はSVG内に実色注入済み＝パレット追従。isolation+z-index:-1 で本文の背面に。
   ページが長い＝バンドが多い＝装飾も増える＝常に万遍なく分布。CTA/フッターには付かない。
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.front-band { isolation: isolate; } /* 本文の z-index を触らず装飾だけ背面化 */
/* 位置・回転・サイズ・反転・不透明度は PHP がインライン style で1つずつ付与（有機的な散らし） */
.front-band__decor {
  position: absolute; z-index: -1; pointer-events: none;
  width: clamp(46px, 5.5vw, 82px); transform-origin: center;
}
.front-band__decor-svg { display: block; width: 100%; height: auto; }

/* 見出し（.section-head の h2）の真横に添えるモチーフ。小さく控えめ・常に左側 */
.section-head__decor {
  position: absolute; top: 35%;
  width: clamp(20px, 2.4vw, 25px);
  pointer-events: none; opacity: 0.7;
}
.section-head__decor--right { left: 100%;  margin-left: 0.5rem;  transform: translateY(-50%); }
.section-head__decor--left  { right: 100%; margin-right: 0.5rem; transform: translateY(-50%) scaleX(-1); }
.section-head__decor-svg { display: block; width: 100%; height: auto; }

/* 見出しのセクション別アイコン（意味アイコン。装飾と違い反転なし・不透明度100%・少し大きめ。高さ基準で見た目を揃える） */
.section-head__icon { display: inline-flex; }
.section-head__icon-svg { display: block; height: clamp(38px, 4.2vw, 50px); width: auto; }
.section-head__icon--above { margin-bottom: 6px; } /* .section-head は縦flex＝左/中央寄せに自動追従 */
.section-head__icon--left  { position: absolute; top: 50%; right: 100%; margin-right: 0.6rem; transform: translateY(calc(-50% - 0.35em)); } /* h2中央でなく見出し全体（アイブロウ＋h2）の中心に寄せて上げる（h2 の大きさに比例＝0.35em） */
.section-head__icon--left .section-head__icon-svg { height: clamp(26px, 1.6rem + 0.6vw, 36px); }
/* ★★スマホで長い見出し（PHP が section-head__title--long を付ける）は、アイコンを左でなく**文字の上**に（2026-10-17）。
   左に置くと、2行になって幅いっぱいに広がった見出しでは画面の外へ出る（いまのサイトでも半分はみ出していた）。
   アイコンは h2 の中の最後の子なので、h2 を縦の flex にして逆順に並べる。下線（::after）は order で一番下に保つ。 */
@media (max-width: 768px) {
  .section-head h2.section-head__title--long:has(.section-head__icon--left) { display: flex; flex-direction: column-reverse; align-items: center; }
  .section-head h2.section-head__title--long:has(.section-head__icon--left)::after { order: -1; }
  .section-head h2.section-head__title--long .section-head__icon--left { position: static; transform: none; margin: 0 0 0.25em; }
}

@media (max-width: 768px) {
  .front-band__decor { display: none; } /* モバイルは装飾オフで可読性優先 */
  .section-head__decor { display: none; }
  /* .section-head__icon は意味アイコンのためモバイルでも表示 */
}

/* 院長紹介ページ */
/* ★写真・名前・挨拶文を「1つの塊」にする（2026-08-14 実射FB「写真と名前のバランスが悪い」）。
   旧構造＝写真＋名前の flex 行（align-items:center）と、その下に全幅の挨拶文。
   実測（幅1420px）：行 840×293px のうち写真 220×293、名前の列は 588×109px なのに
   中の文字は氏名120px・ふりがな90px・肩書32px しかなく、**列の面積の 7.6% しか埋まっていなかった**。
   さらに 109px の文字が 293px の中で中央に置かれ、上下に92pxずつの空白ができていた。
   トップの「院長ご挨拶」は同じ横並びでも右列に挨拶文が入るので埋まる＝構えは同じで中身の入れ方だけが違った。
   → 写真を float し、名前と挨拶文をその横へ回し込む。空白が**ページ内に既にあるコンテンツ**で埋まり、
     長さに関わらず成立する（短ければ横に収まり、長ければ写真の下へ続く）。縦長写真のままで良い。 */
.doctor-page__intro {
  display: flow-root;      /* float を内側で閉じる＝続く「経歴」以降が回り込まない */
  margin-bottom: 2.5rem;
}
.doctor-page__photo {
  float: left;
  width: var(--doctor-photo-w, 240px);
  margin: 0.35rem 2rem 1.25rem 0;   /* 上の 0.35rem＝ふりがなの行の頭と写真の上端を光学的に揃える */
  aspect-ratio: var(--doctor-photo-ar, 3 / 4);
  overflow: hidden;
  border-radius: var(--r-media); background: var(--wp--preset--color--primary-light);
}
.doctor-page__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 比率＝トップの「写真の見せ方」を継承（inc/doctor-admin.php の clinic_greeting_effective_ratio）。
   ★幅は比率ごとに変える＝**見た目の大きさ（面積）を揃える**ため。
     幅を固定すると、縦長 240×320 に対し横長は 240×180 にしかならず、
     同じ設定・同じ写真なのに下層だけ小さく弱く見える（2026-08-14 実測）。
     縦長 240×320／正方形 280×280／元画像のまま(4:3) 320×240 ＝ 面積 7.7万px² でほぼ一致する。
   square は clinic-square（1:1クロップ済み）を要求しているので object-fit は cover のまま。 */
.doctor-page--ratio-square .doctor-page__photo { --doctor-photo-ar: 1 / 1; --doctor-photo-w: 280px; }
/* 元画像のまま＝枠の高さを写真に決めさせる（トップの greeting--ratio-free と同じ考え方） */
.doctor-page--ratio-free .doctor-page__photo { --doctor-photo-ar: auto; --doctor-photo-w: 320px; }
.doctor-page--ratio-free .doctor-page__photo img { height: auto; }
.doctor-page__meta { margin-bottom: 1.25rem; }
/* 挨拶文はページの他の要素（経歴の表・資格の一覧）と同じ幅まで使う＝右端が揃う
   （.dept-detail の 720px は本文単体向けの上限で、ここでは塊の幅が優先） */
.doctor-page__intro .doctor-page__greeting { max-width: none; margin-bottom: 0; }
/* 狭い幅では回り込みをやめて縦に積む：写真240px＋余白32px の横に本文が並ぶには
   最低でも約300pxが要る＝640px を下回ると本文が細切れになる */
@media (max-width: 640px) {
  .doctor-page__photo { float: none; margin: 0 0 1.25rem; }
}
/* ★肩書は氏名の「前」にさりげなく添える＝トップの署名（.greeting__sign）と同じ扱い
   （2026-08-14 実射FB「肩書が名前の下にくるのが違和感」）。旧実装は氏名の**下**にプライマリ色の
   太字で置いており、「院長」という属性が氏名より強く出ていた。
   ★2列グリッドで組む理由＝**ふりがなは氏名の真上に置きたい**から。肩書と氏名を同じ行に
   単純に流すと、ふりがなが肩書の上に乗って「誰の読みか」がずれる。
   1列目＝肩書 / 2列目＝ふりがな・氏名 に分け、行2の2つを baseline で揃える。
   ★列間は column-gap ではなく肩書の margin で作る：肩書が無いとき（任意項目）に
   gap だけが残って氏名が中途半端に字下げされるのを防ぐ（無い＝1列目の幅0＝ズレなし）。 */
.doctor-page__identity {
  display: grid;
  grid-template-columns: auto 1fr;
}
.doctor-page__kana {
  grid-column: 2; grid-row: 1;
  font-size: 0.8rem; color: var(--wp--preset--color--text-muted); margin: 0 0 0.2em;
}
.doctor-page__title {
  grid-column: 1; grid-row: 2;
  align-self: baseline;
  margin: 0 0.6em 0 0;
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--sm, 0.9rem);
  font-weight: var(--w-ui, 700);
}
.doctor-page__name {
  grid-column: 2; grid-row: 2;
  align-self: baseline;
  font-size: var(--wp--preset--font-size--2xl, 1.875rem); font-weight: var(--w-head, 700); margin: 0;
}
.doctor-page__specialty { color: var(--wp--preset--color--text-muted); font-size: 0.9rem; margin: 0; }
.doctor-page__greeting { line-height: 1.9; margin-bottom: 2.5rem; }
.doctor-page__section { margin-bottom: 2rem; }
.doctor-page__h {
  font-size: var(--wp--preset--font-size--lg, 1.25rem); font-weight: var(--w-head, 700);
  border-left: 5px solid var(--wp--preset--color--primary); padding-left: 0.6em; margin: 0 0 0.8em;
}
.doctor-page__career { width: 100%; border-collapse: collapse; }
.doctor-page__career th {
  text-align: left; white-space: nowrap; vertical-align: top; padding: 0.5em 1.2em 0.5em 0;
  color: var(--wp--preset--color--primary); font-weight: 700; width: 1%;
}
.doctor-page__career td { padding: 0.5em 0; border-bottom: 1px solid var(--rule); }
.doctor-page__career tr:last-child td { border-bottom: none; }
.doctor-page__list { list-style: none; margin: 0; padding: 0; }
.doctor-page__list li { padding: 0.5em 0 0.5em 1.4em; position: relative; border-bottom: 1px dashed var(--rule); }
.doctor-page__list li::before { content: "・"; position: absolute; left: 0.3em; color: var(--wp--preset--color--primary); }
.doctor-page__list li:last-child { border-bottom: none; }

/* 11-c. 院内紹介ギャラリー */
.facility__breadcrumb { font-size: 0.8rem; color: var(--wp--preset--color--text-muted); }
.facility__breadcrumb a { color: var(--wp--preset--color--primary); text-decoration: none; }
.facility__breadcrumb a:hover { text-decoration: underline; }

.facility__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 1.4rem;
}

/* ━━ ★★★カードの「器」と「見た目」を分ける（2026-09-09 実射FB「枠線の太さがおかしい。
   右側だけ細く、それ以外が太い」）━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ★**原因は 1px の罫線が2本、隣り合って引かれていたこと**（＝2px に見える）：
     ① この宣言（一覧ページ用）が `.facility__card` に `border: 1px`。スコープが無いので
        **トップにも掛かっていた**。
     ② `body.shape-sharp` が `.facility__card-inner` に `border: 1px`（§形＝かっちり）。
     トップだけ `.facility__card > .facility__card-inner` と**入れ子**なので、外側の罫線の
     すぐ内側に内側の罫線が並ぶ。実測（1280px）：外 92.5..436.891／内 93.5..437.891。
   ★**右だけ細かった理由**：外側の `overflow: hidden` が内側を padding box（…435.891）で切るので、
     **内側の右の罫線だけが切り落とされる**。左・上・下は2本ぶん残る＝右1px／他2px。
     ＝「太い」のではなく**片側だけ正しかった**。
   ★★直し方＝**器（レイアウト）と見た目（面・罫線・角丸）を分ける**。
     トップで**視覚上のカードは内側**（`<a>` で、地・角丸・影・ホバーを持つ）。外側は
     並べるための器でしかない。一覧ページは逆で、外側そのものがカード（内側が無い）。
     → 見た目は `.facility__gallery` にスコープし、器の指定だけ共通に残す。
     ★打ち消し（トップ側で border を none に戻す）にしない：どちらが視覚上のカードかは
       画面ごとに違うので、**持つ側だけが持つ**のが読める形。
   ★この形は §形（かっちり）の教訓「**各コンポーネントが既に輪郭を持っているか先に確認する**」
     が指していた事故そのもの——facility は外側で既に輪郭を持っていたのに、
     かっちりが内側へもう1本足していた。 */
.facility__card {
  display: flex;
  flex-direction: column;
}
.facility__gallery .facility__card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  overflow: hidden;
}
/* ★先頭の大カード（.facility__card--large）は廃止（2026-08-14 実射FB「1枚目だけ大きくなる必要は？」）。
   旧実装は先頭1枚だけ 大きさ・比率(16:7)・キャプションの出し方(写真に重ね)・文字色(白) の**4点**が違った。
   「先頭」は管理画面の並び順で決まるだけで意味的な主役ではないので、例外4点は重すぎる。
   トップには大小を付ける正式な軸（モザイク）があり、下層でハードコードの例外を持つ理由も無い。 */

/* ※ .facility__photo の宣言は上（院内紹介の共通ブロック）に一本化した。
   .facility__img--empty（一覧ページだけタイトルを文字で出す版）は廃止＝
   タイトルは直下の caption に必ず出るので二重だった。 */
.facility__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facility__more-badge {
  position: absolute; top: 0.8rem; right: 0.8rem;
  background: var(--wp--preset--color--primary); color: #fff;
  font-size: 0.75rem; font-weight: var(--w-ui, 700); padding: 0.3em 0.9em;
  border-radius: var(--r-btn); text-decoration: none;
}
.facility__caption { padding: 1.1rem 1.2rem 1.3rem; text-align: center; }
.facility__name { font-size: 1.05rem; margin: 0 0 0.4rem; }
.facility__desc { color: var(--wp--preset--color--text-muted); font-size: 0.875rem; margin: 0; line-height: 1.7; }
.facility__more { margin: 0.8rem 0 0; }
.facility__more a { color: var(--wp--preset--color--primary); font-weight: var(--w-ui, 700); font-size: 0.85rem; text-decoration: none; }

.facility-single__photo { margin: 0 0 1.6rem; border-radius: var(--r-media); overflow: hidden; }
.facility-single__photo img { width: 100%; height: auto; display: block; }

@media (max-width: 900px) { .facility__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .facility__grid { grid-template-columns: 1fr; } }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14. フォトバンド（全幅・自動スクロールする写真帯・2026-07-25）
   セクション間の「転換帯」。純粋な装飾＝キャプション・リンクなし（情報は院内紹介の担当）。
   front-band で包まない＝隅の装飾／全体パターンは写真の裏に隠れて無意味なため。
   区切りSVG（wave）も前後に出さない（帯自身が境界になる）＝ front-sections.php 側で制御。
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.section-photoband {
  --pb-h: clamp(160px, 22vw, 260px);  /* 写真の高さ（軸：低め/標準/高め） */
  --pb-gap: 0px;                      /* 写真の隙間（軸：なし/あり） */
  --pb-r: 0px;                        /* 角丸（隙間ありのときだけキットトークンに追従） */
  --pb-dur: 30s;                      /* 1周の秒数＝PHP がインラインで枚数に比例して注入 */
  overflow: hidden;                   /* 全幅の帯：はみ出しを切る（横スクロール事故の防止） */
}

/* 高さ（サブ軸） */
.section-photoband.pb-h-sm { --pb-h: clamp(120px, 16vw, 180px); }
.section-photoband.pb-h-md { --pb-h: clamp(160px, 22vw, 260px); }
.section-photoband.pb-h-lg { --pb-h: clamp(200px, 30vw, 360px); }

/* 隙間（サブ軸）：離すときだけ角を丸める＝キットの角丸トークンに追従（専用の角軸は作らない） */
.section-photoband.pb-gap-none { --pb-gap: 0px; --pb-r: 0px; }
.section-photoband.pb-gap-gap  {
  --pb-gap: clamp(8px, 1.2vw, 16px);
  --pb-r: var(--r-media);
  padding-block: clamp(8px, 1.2vw, 16px);
}

.photoband__viewport { overflow: hidden; }

/* トラック＝写真セット×2。translateX(-50%) で2セット目が1セット目の位置に来る＝継ぎ目のないループ */
.photoband__track {
  display: flex;
  width: max-content;
  animation: photoband-scroll var(--pb-dur) linear infinite;
}
.photoband__set { display: flex; }

/* ★★ 隙間は flex の gap ではなく「各写真の右マージン」で作ること（2026-07-25 実測で発覚）。
   gap だとセット内の隙間は (n-1) 個ぶんしか入らず、セット幅に「末尾の隙間」が含まれない。
   すると 1セット幅 ≠ 移動量 になり、translateX(-50%) は gap/2 だけ足りず、
   1周ごとに帯が gap/2 ぶんガクッと飛ぶ（実測 gap:16px で 8px のズレ）。
   右マージンなら 1セット幅 = Σ(写真幅 + 隙間) に末尾の隙間まで含まれ、
   trackW = 2×setW ＝ 移動量が正確に1セットぶんになって継ぎ目が完全に消える。 */
.photoband__img {
  display: block;
  height: var(--pb-h);
  width: auto;              /* 写真ごとの縦横比のまま並べる＝リズムが出る */
  max-width: none;          /* テーマ既定の max-width:100% を打ち消す（縮むと高さが揃わない） */
  margin-inline-end: var(--pb-gap);
  border-radius: var(--pb-r);
  object-fit: cover;
  flex: 0 0 auto;
}

@keyframes photoband-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 向き（サブ軸）：右へ流す＝同じキーフレームを逆再生 */
.section-photoband.pb-dir-right .photoband__track { animation-direction: reverse; }

/* ★★hover での一時停止は**置かない**（2026-08-01 に撤去）。停止手段は下の
   `prefers-reduced-motion` に一本化する＝英字ウォーターマーク（marquee）と同じ方針（§軸D 参照）。
   理由：
   ・帯の写真は装飾専用（alt="" ・リンクなし）で、止めて**できるようになる操作が無い**。
   ・帯は全幅なので、ページを下にスクロールしているだけでポインタが通過する＝
     狙っていないのに停止・再開が起き、操作ではなく**不具合に見える**（実測 954px 幅／高さ213px）。
   ・マウス専用なのでスマホには最初から効かない＝停止手段として数えられない。
     OS設定（prefers-reduced-motion）なら全デバイスで一貫して効く。
   ※ 将来この写真をクリック可能（ライトボックス／リンク）にするなら装飾ではなくなるので、
     そのときは狙ってクリックするための hover 停止を**セットで**入れ直すこと。 */

/* ★ 枚数不足（CLINIC_PB_MIN_LOOP 未満）＝静的な列にフォールバック。
   複製セットも出していないので、残った1セットを均等割りして「意図した横一列」に見せる。 */
.section-photoband.pb-static .photoband__track { width: 100%; animation: none; }
.section-photoband.pb-static .photoband__set { width: 100%; }
.section-photoband.pb-static .photoband__img { flex: 1 1 0; min-width: 0; width: 100%; }
/* 静的時だけ末尾の右マージンを落とす（ループしないので継ぎ目用の余白が不要＝右端が揃う）。
   アニメーション時に落とすと継ぎ目の隙間が消えてしまうので、必ず pb-static に閉じること。 */
.section-photoband.pb-static .photoband__img:last-child { margin-inline-end: 0; }

/* ★ 動きを減らす設定の利用者には自動スクロールを止める（WCAG 2.2.2）。
   医療系サイトなので安全側に倒す。止めた状態でも1セット目が帯として成立する。
   ★★これが**唯一の停止手段**（hover 停止は上のとおり撤去）。OS設定に従うので
   マウス・タッチ・キーボードのどれで見ていても同じように効く。 */
@media (prefers-reduced-motion: reduce) {
  .photoband__track { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   15. ヘッダーCTA（電話＋予約ボタン）＝3大別 × 直交サブ軸（2026-07-25）

   docs/variant-catalog.md「ヘッダーCTA」節を参照。
   ★ここが唯一の真実源。kit-*.css には同じ宣言を書かないこと——kit CSS は base.css に
     依存指定で「後から」読み込まれるため、同詳細度なら kit が勝ち、base.css を直しても
     一部キットだけ変わらないという最も分かりにくい状態になる（2026-07-25 に実際に発生し整理）。

   3大別は body.hcta-inline / .hcta-stack / .hcta-panel。マークアップは全型共通で、
   小見出し・受付時間の出し入れと並べ方だけをCSSで切り替える。
═══════════════════════════════════════════════════════════════ */

/* ── 共通トークン ───────────────────────────────────────────── */
body {
  /* 塗りボタン。★文字色は白ではなく「accent を深く落とした同系色」。
     本テーマの accent は全キット・全パレットが明るい金茶/オレンジ系で、白文字だと
     コントラストが 2.1〜3.0:1 しか出ず WCAG AA（4.5:1）を大きく下回る（森 #e0a35e で 2.19:1）。
     18% の混色なら soft 6.3 / trust 5.8 / sakura 5.6 / elegant 4.8:1 と全条件で AA を満たし、
     かつ accent と同じ色相なので「明るい地に深い同系色の文字」＝上質な見え方になる。
     将来 accent が濃色のキットを足したら、そのキットCSSで --cta-btn-fg: #fff を宣言する。 */
  --cta-btn-bg: var(--wp--preset--color--accent);
  /* 濃色（軸 cta_btn_fg=dark 用）。白より読みやすいが、既定は依頼により白。 */
  --cta-btn-fg-dark: #2b2118;
  --cta-btn-fg-dark: color-mix(in srgb, var(--wp--preset--color--accent) 18%, #16100A);
  /* ★★**明るい地に載せる accent**（`--cta-btn-fg-dark` とは用途が違う）。
     `--cta-btn-fg-dark` は「**accent の塗りの上**に載せる文字」＝accent 18%＋ほぼ黒で、
     白地に置くと 13.6〜14.6:1 の**ほぼ黒**になり「accent でも文字色でもない濁り」に見える。
     accent そのものは白地で 2.1〜3.0 しか出ないので置けない——**明るい地専用の濃い accent**が要る。
     ★★★**黒へ混ぜるだけでは濁る**：黒混ぜは全チャンネルを一様に下げるので**彩度も一緒に落ち**、
       どの比率でも「渋い茶」にしかならない（実測 42%＝`#825834`／白地 5.7〜7.3 だが見た目が沈む）。
       → **明度を下げるぶん彩度を上げる**（相対カラー構文）＝`h` はそのまま・`s` を 1.3 倍・`L` を 31%。
       実測（白地）：青緑 `#E0985A → #954a09` 6.44／若草 `#F59E2D → #ac5b0e` 4.91。
       **全9パレットの最小 4.91＝AA を満たしたまま鮮やかになる。**
       ※ 桜の緑アクセント（`#7fae8e → #386647` 6.64）の例もここにあった。2026-08-29 に暖色へ替えたので
         現存しない。**この式は色相を保つので暖色でなくても成立する**（緑でも 6.64 だった）＝
         差し色の色相は自由で、効いている条件は「彩度を上げて明度を落とす」ほうにある。
     ★フォールバックは黒混ぜ版（相対カラー構文の非対応ブラウザ）。★★**カスタムプロパティは
       「無効な値」でも代入時まで生き残る**ので、対応の有無は `@supports` で分けること
       ——単に2行並べても非対応ブラウザで色が消える（＝継承色になる）。 */
  --accent-ink: #6b4a2c;
  --accent-ink: color-mix(in srgb, var(--wp--preset--color--accent), black 42%);
  --cta-btn-fg: #fff;
  /* ── 大きさトークン（軸 cta_size）──
     standard＝ヘッダーで主張させる寸法。small＝2026-07-25 までの控えめな寸法。
     ★番号は型ごとに少しだけ差をつける（stack＝情報ブロックが主役なので最大、
       inline＝1行に収める必要があるので控えめ）。倍率で持つのでサイズ軸1つで両方が動く。 */
  --cta-tel-fs: 1.7rem;
  --cta-btn-fs: 1.2rem;
  /* ★★CTAのアイコン寸法は**トークン1本**（2026-08-22）。旧実装は
     ヘッダー電話 13.6px（CSSの 0.85em）／WEB予約 18px（PHPのハードコード）／
     スマホCTAバー 20px（PHPとCSSで二重指定）と **3か所に散っていた**。
     `--logo-fs`・`--gutter` と同じ型＝**値ではなくトークンにする**（片方だけ直して
     もう片方が取り残される事故を構造的に無くす）。
     18→22px：この絵は 18px だと線が 1px に届かない（上の §主線の底上げ 参照）。
     22px は底上げと併せて全アイコンが実線化する最小の寸法。
     ★電話アイコンは px ではなく**番号に対する比**で持つ（`--cta-tel-ico-r`）。
       番号は型ごとに倍率が違う（inline 0.84 / stack 1 / panel 0.88 / ≤900px 0.62）ので、
       px で置くと型を変えるたびに主従が崩れる。0.75em＝ほぼ数字のキャップハイトに揃う。 */
  --cta-ico: 22px;
  --cta-tel-ico-r: 0.75;
  /* 「Tel.」の文字（軸 cta_icon_tel = text）。絵より小さくする＝同じ寸法だと文字のほうが重い */
  --cta-tel-mark-r: 0.6;
  /* ★番号は primary ではなく primary-dark：白いヘッダー地に対し、キットによっては primary の
     コントラストが足りない（kit-pop の #3D9B4F で 3.5:1）。デスクトップは 23.2px 太字＝WCAG の
     「大きい文字」扱い（3:1）で通るが、**モバイル（601〜900px）では 16.8px＝通常文字扱いになり
     4.5:1 が必要で落ちる**。primary-dark なら pop 5.88 / soft 5.6 / trust 8.2 と全キットで通り、
     色相は同じなのでキットのトーンも保てる。枠付き電話（ctatel-boxed）も既にこの色。 */
  --cta-tel-c:  var(--wp--preset--color--primary-dark, var(--wp--preset--color--primary));
  --cta-gap:    clamp(0.75rem, 1.4vw, 1.15rem);
  /* ★★数字専用のフォントスタック（2026-07-28）＝**CJK フォントへ落とさない**ことが目的。
     電話番号は ASCII の数字とハイフンだけなので、キットの本文スタック（例 soft＝
     'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif）を
     そのまま継承すると、**Webフォントが適用されない状態で Meiryo の tabular 数字**が使われる。
     CJK 体の等幅数字は全角寄りなので、実測で 079-235-1010 が **135px → 184.3px（+36%）** に太り、
     CTAブロックが +55px 育って1段ヘッダーが上限で頭打ち→ドロワーへ落ちていた（下の §可変幅 参照）。
     ※ フォント読込は `display=optional`（functions.php）＝**キャッシュに無い初回訪問は
        そのページビューの間ずっとシステムフォントのまま**（swap期間ゼロ）。つまりこの状態は
        一過性のちらつきではなく「初回訪問者が見る確定した表示」なので、レイアウトが成立する
        必要がある。
     ★スタックの並びは「キットのWebフォント → ラテン体 → 総称」。CJK 体を1つも挟まないので、
       Webフォント未適用時は必ずラテン体（Arial 等）の細い数字になり、**幅がWebフォント時と
       ほぼ一致する**（実測 135.0px で完全一致）。
     ★キットごとに書き分けなくてよい理由＝**読み込まれていないファミリーは飛ばされる**：
       soft/pop は Zen Maru Gothic が載るのでそれが当たり、normal/elegant/trust は載らないので
       Noto Sans JP（全キット必須）が当たる＝**どのキットでも現状の見た目のまま**。
     ※ 将来「数字だけ別の書体にしたいキット」が出たら、そのキットCSSでこのトークンを上書きする。
     ★角丸ゴシック（2026-09-11）は Google に同名の実体が無いのでサブセット名だけを並べる。
       並べないと、本文を角丸ゴシックにしたとき番号だけ Arial になる（ほかの書体が読み込まれないため）。 */
  --clinic-num-font: 'Zen Maru Gothic Subset', 'Zen Maru Gothic', 'Clinic Gothic Soft Subset', 'Noto Sans JP Subset', 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
}
/* 相対カラー構文が使えるときは「彩度を上げて明度を下げた accent」に差し替える（上のコメント参照） */
@supports (color: hsl(from red h s l)) {
  body { --accent-ink: hsl(from var(--wp--preset--color--accent) h calc(s * 1.3) 31%); }
}
body.ctasize-small { --cta-tel-fs: 1.45rem; --cta-btn-fs: 0.94rem; }
/* ★1段ヘッダー（統合・フローティング）は同じ行にメニューも並ぶため、大きめでも少し抑える。
   実測（幅1265px・メニュー11項目）＝CTAクラスタが 407px(小) → 438px(大) に育ち、
   メニューの必要幅 626px に対し与えられる幅が 512px → 481px へ減る。
   ※メニューが溢れること自体は小さめでも起きる既存の症状（11項目は1段には多い）。
     ここでの縮小は「大きめにしたぶんだけ悪化させない」ための緩和で、根治ではない。
   詳細度 (0,3,0) で ctasize-small (0,2,0) にも勝つが、値は standard 限定なので小さめは影響を受けない。 */
body.ctasize-standard:is(.header-integrated, .header-floating) { --cta-tel-fs: 1.4rem; --cta-btn-fs: 1.05rem; }
/* ボタンの文字色（軸 cta_btn_fg）。既定は白（body の --cta-btn-fg）。 */
body.ctafg-dark { --cta-btn-fg: var(--cta-btn-fg-dark); }

/* ── 電話ブロック（マークアップ共通・見せ方は型で切替） ─────────── */
.site-topbar { display: inline-flex; align-items: center; gap: 0.8rem; background: transparent; color: var(--wp--preset--color--text-main); padding: 0; }
.site-topbar__tel { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0.1em; color: var(--cta-tel-c); text-decoration: none; line-height: 1.25; }
.site-topbar__tel-label { font-size: 0.68rem; letter-spacing: 0.12em; font-weight: var(--w-ui, 700); color: var(--wp--preset--color--text-muted); }
/* ★★番号の大きさは**この行**が持つ（2026-08-22）。旧実装は `-digits` が font-size を持ち、
   アイコンは `0.85em`＝**親（本文16px）基準**だったので、番号 23.2px に対してアイコンは
   13.6px＝**0.59倍**にしかならず、型ごとの倍率にも追従していなかった。
   ★アイコンと数字の**共通の親**にサイズを置けば、両方が `em` で自動追従する
     ＝型ごとの倍率を**1か所だけ**書けばよくなる（同じ条件を2か所に書かない）。 */
.site-topbar__tel-num { display: inline-flex; align-items: center; gap: 0.26em; font-weight: var(--w-ui, 700); font-size: var(--cta-tel-fs); }
/* ★番号は tabular-nums ＋ わずかな字送りで「揃った数字」にする。
   日本語ゴシックの既定字形は数字の幅がまちまちで、ヘッダーで最も読ませたい情報が
   本文と同じ密度に見えてしまう（改善前は 16.8px＝本文16pxとほぼ同寸だった）。 */
.site-topbar__tel-digits { font-family: var(--clinic-num-font); font-size: 1em; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; }
.site-topbar__tel-num svg { width: calc(1em * var(--cta-tel-ico-r)); height: calc(1em * var(--cta-tel-ico-r)); display: block; flex-shrink: 0; }
/* ★★「Tel.」の文字（軸 cta_icon_tel = text・2026-08-22）。
   ★**数字と同じフォントスタック**を使う。指定しないと本文の日本語フォントで描かれ、
     隣の番号（`--clinic-num-font`）と字形の質感がズレる——数字を CJK フォントへ落とさない
     という 2026-07-28 の指定と同じ理由。
   ★大きさはアイコンとは別のトークン（`--cta-tel-mark-r`）。同じ 17px でも
     「絵の17px」と「文字の17px」では見た目の重さが違うので、1本にまとめない。
   ★アイコンと同じく `em`＝番号に追従するので、型ごとの倍率にそのまま乗る。 */
.clinic-tel-mark {
  font-family: var(--clinic-num-font);
  font-size: calc(1em * var(--cta-tel-mark-r));
  letter-spacing: 0.02em;
  font-weight: var(--w-ui, 700);
  line-height: 1;
  flex-shrink: 0;
}
.site-topbar__hours { font-size: 0.72rem; color: var(--wp--preset--color--text-muted); white-space: nowrap; }
/* 住所（軸 cta_address）：番号の上に置く supporting text。
   ★nowrap にしない——住所は長さの個体差が大きく（〒＋都道府県＋番地）、
   nowrap だと長い住所でヘッダーを押し広げて他の要素を追い出す。折り返して縦に伸びるほうが安全。 */
.site-topbar__address { font-size: 0.78rem; color: var(--wp--preset--color--text-main); line-height: 1.5; }
.site-topbar__tel:hover .site-topbar__tel-digits { text-decoration: underline; text-underline-offset: 0.2em; }

/* ── ボタン ─────────────────────────────────────────────────── */
/* ボタン同士の間隔：2つ並ぶ（WEB予約＋お問い合わせ）と 0.5rem=8px では「ほぼ接している」
   ように見えるため 0.7rem=11px に。1つだけのときは見た目に影響しない。 */
.site-header__cta { display: flex; gap: 0.7rem; align-items: center; flex-shrink: 0; }
.site-header__cta .wp-block-button { margin: 0; }
.cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; font-weight: var(--w-ui, 700); text-decoration: none; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.cta-btn__icon { display: inline-flex; align-items: center; flex-shrink: 0; }
.cta-btn__icon svg, .cta-btn__icon span { display: block; }
/* ★寸法はトークンが持つ（2026-08-22）。PHP の第2引数は**属性の初期値**として残すが、
   実際の大きさはここで決める＝電話・ボタン・スマホバーが同じ1本を見る。 */
.cta-btn__icon svg { width: var(--cta-ico); height: var(--cta-ico); }
/* ヘッダーのボタンだけ寸法を上げる（ページ下部CTA・ヒーローの .cta-btn は据え置き）。
   改善前は 13.6px / 91x41px で、隣の電話（幅120px）より小さく主従が逆転していた。 */
/* ★透明の枠線を全ボタンに敷いて箱を揃える：枠線ボタン（お問い合わせ）だけ border 2px を持つと
   その分だけ背が高くなり、塗りボタン（WEB予約）と**高さが 49px / 53px でずれる**（2026-07-25 実測）。
   枠線の有無は「色」の違いであって「大きさ」の違いにしない。 */
.site-header__cta .cta-btn { font-size: var(--cta-btn-fs); padding: 0.72em 1.5em; border: 2px solid transparent; border-radius: var(--cta-r, var(--r-btn)); }
.site-header__cta .cta-btn--accent { box-shadow: 0 2px 10px color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent); }
.site-header__cta .cta-btn--accent:hover { transform: translateY(-1px); box-shadow: 0 5px 16px color-mix(in srgb, var(--wp--preset--color--accent) 48%, transparent); }
.site-header__cta .cta-btn--line { box-shadow: 0 2px 10px rgb(6 199 85 / 0.35); }
.site-header__cta .cta-btn--line:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgb(6 199 85 / 0.42); }
/* 枠線ボタンは色だけ差し替える（幅は上の共通ルールで確保済み＝箱の大きさは変わらない） */
.site-header__cta .cta-btn--outline { border-color: var(--wp--preset--color--primary); }
.site-header__cta .cta-btn--outline:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .site-header__cta .cta-btn { transition: none; }
  .site-header__cta .cta-btn:hover { transform: none; }
}

/* ── サブ軸：ボタンの形（kit＝キットCSSの角丸に任せる＝何も宣言しない） ── */
body.ctashape-pill    { --cta-r: 999px; }
body.ctashape-rounded { --cta-r: 10px; }
body.ctashape-square  { --cta-r: 0; }
/* キットCSSの .cta-btn{border-radius}（trust の 4px 等）より高い詳細度で勝たせる。
   kit のときは --cta-r 自体が未定義なのでこの規則も出ず、キット指定を壊さない。 */
body:is(.ctashape-pill, .ctashape-rounded, .ctashape-square) .cta-btn { border-radius: var(--cta-r); }

/* ── サブ軸：電話の見せ方（boxed＝ボタンと対の枠付きチップにする） ── */
body.ctatel-boxed .site-topbar { --cta-tel-c: var(--wp--preset--color--primary-dark, var(--wp--preset--color--primary)); }
body.ctatel-boxed .site-topbar__tel {
  padding: 0.6em 1.15em;
  border: 2px solid color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
  border-radius: var(--cta-r, var(--r-btn));
  background: color-mix(in srgb, var(--wp--preset--color--primary) 5%, #fff);
}
body.ctatel-boxed .site-topbar__tel:hover { background: var(--wp--preset--color--primary-light, #fff); }
body.ctatel-boxed .site-topbar__tel:hover .site-topbar__tel-digits { text-decoration: none; }

/* ═══ 3大別 ═══════════════════════════════════════════════════ */

/* 住所を出すときは電話ブロックを縦に積む（住所→番号→受付時間）。
   幅は住所に合わせて頭打ちにする＝長い住所でヘッダーを押し広げず、2行で折り返させる。 */
body.ctaaddr-on .site-topbar { flex-direction: column; align-items: flex-end; gap: 0.15rem; }
body.ctaaddr-on .site-topbar__address { max-width: 22em; text-align: right; }
/* ★住所を出しているあいだ小見出しは伏せる（4行にしない）。**消さずに残す**ので、
   下の hdr-noaddr で住所を降ろした瞬間に小見出しが戻る＝跡が空行にならない。 */
body.ctaaddr-on .site-topbar__tel-label { display: none; }

/* ★★1段ヘッダーで幅が足りないときの退避＝**住所が先に降りる**（2026-08-19 実射FB）。
   `main.js` の initHeaderFit（§1段ヘッダーの収まり 第3層）が実測して付ける。
   ┌ 旧実装は「1段では住所を出さない」という一律の禁止で、「幅が足りないことがある」を
   │ 「常に出さない」で代用していた。実測では住所の増分は **+18px**（住所は小見出しと
   │ 入れ替わるので行は増えない）で、バーの `width: fit-content` が 17px 吸収する。
   └ つまり足りないのは 9〜18px の細い帯だけ＝禁止ではなく**順番**で解ける。
   ★★住所は補助情報・メニューは案内の本体なので、**先に降りるのは住所**。
     これで「住所をONにしたらメニューが消えた」は構造的に起こり得ない。
   ※ ドロワーへ退避したあと（hdr-compact）はバーに幅が空くので、JS が住所を戻す
     （＝この2つのクラスは同時には付かない）。 */
/* ① 住所を短くする＝〒と都道府県を伏せる（ヘッダーの中だけ・実測 194→157px）。
   ★★**捨てる順番は「失うものが小さい順」**。都道府県は市区町村から復元できる情報なので、
     住所ごと消すより先に落として良い。逆に**広い画面では入力どおり全部出す**ので、
     同名の市（府中市＝東京都/広島県、太子町＝兵庫県/大阪府）の取り違えも起きない
     ——短縮は「常にそうする」ではなく「狭いときだけ」。
   ※ アクセス・LP・固定ページには掛けない（`.site-topbar__address` の中だけ）。 */
body.hdr-addr-short .site-topbar__address :is(.addr__zip, .addr__pref) { display: none; }
/* ①' 〒だけ伏せる（2026-10-18・main.js の fitAddrLine）。住所が2行に折り返すときだけ付く＝1行に入れるための段。
   上部中央は右の列が「(内側の幅 − ロゴ) ÷ 2」で頭打ちになり、住所つきの塊が 24px 足りずに「…細江／６５０−１」と割れていた。
   次は上の①（〒＋都道府県）。伏せても行が減らない長い住所には付かない＝入力どおり2行で出る。 */
body.hdr-addr-nozip .site-topbar__address .addr__zip { display: none; }

/* ② それでも入らない＝住所ごと降ろす（小見出しが戻る） */
body.hdr-noaddr .site-topbar__address { display: none; }
body.hdr-noaddr.ctaaddr-on .site-topbar__tel-label { display: block; }

/* ③ 受付時間を降ろす（2026-10-18・1行目の階段＝main.js の TOP_RETREAT）。
   ★メニューを2行目・MENU へ降ろしたあとも1行目（ロゴ＋電話＋ボタン＋MENU）が入らないときだけ。
     住所（①②）の次＝受付時間はトップの診療時間の表にもある。住所を降ろしても受付時間の行が同じくらい長いので
     （実測 1024px：住所 262px・受付時間 249px）、住所だけでは 13px しか空かず、受付時間まで降ろして 84px 空く。
   ★続きの段（④ロゴ ⑤ボタンの縦組み ⑥アイコンだけ）は §ヘッダーCTA の後ろ（タイル接地の指定より後に置く）。 */
body.hdr-nohours .site-topbar__hours { display: none; }

/* 1) inline（既定）＝番号だけの1行。小見出し・受付時間・住所はマークアップに残したまま隠す
      （型を戻せば保存済みテキストがそのまま復活する）。
      ※住所は clinic_header_cta_address_normalize() が inline では off に丸めるので
        そもそも出力されないが、念のためCSS側でも伏せておく（保険）。 */
body.hcta-inline .site-topbar__tel-label,
body.hcta-inline .site-topbar__address,
body.hcta-inline .site-topbar__hours { display: none; }
body.hcta-inline .site-topbar__tel { flex-direction: row; align-items: center; }
body.hcta-inline .site-topbar__tel-num { font-size: calc(var(--cta-tel-fs) * 0.84); }

/* 2) stack＝小見出し／番号／受付時間の縦ブロック ｜ 細い縦罫 ｜ ボタン */
body.hcta-stack .site-topbar { flex-direction: column; align-items: flex-end; gap: 0.05rem; }
body.hcta-stack .site-topbar__tel-num { font-size: var(--cta-tel-fs); }
@media (min-width: 901px) {
  /* 縦罫は電話ブロックとボタンの「間」に1本だけ。両方が出ているときだけ引く
     （隣接セレクタなので、電話OFF・ボタンOFF どちらでも自動的に消える）。 */
  body.hcta-stack .site-header__cta { position: relative; padding-inline-start: var(--cta-gap); }
  body.hcta-stack .site-topbar + .site-header__cta::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 2.6em; background: color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
  }
}

/* 3) panel＝帯の天地いっぱいのタイルを右端へ接地（横型ヘッダーのみ。サイドバー系は
      clinic_header_cta_normalize() が stack へ丸めるのでこのクラス自体が出ない）。 */
@media (min-width: 901px) {
  /* ★タイルを「天地いっぱい」に接地させるには、右パディングだけでなく上下パディングも外す。
     残したままだと align-self:stretch でも帯の内側（padding box）までしか伸びず、
     上下に 7px ずつ地が残って「浮いた四角」に見える（実測 帯77px に対しタイル62px）。
     外したぶんはロゴ側へ移し、帯の高さはロゴが決める形にする。 */
  /* ★形状クラス（header-integrated 等）は body に付くので、hcta-panel との間に空白を入れない。
     `body.hcta-panel :is(.header-integrated,…)` と書くと「body の子孫にある .header-integrated」
     を探してしまい 1件も当たらない（＝統合ヘッダーでタイルが右端に届かず40px手前で止まる。
     2026-07-25 実測で発覚：ボタン右端 1225px / ビューポート 1265px）。 */
  body.hcta-panel .site-header__top-inner,
  body.hcta-panel:is(.header-integrated, .header-overlay, .header-floating) .site-header__bar { padding-inline-end: 0; padding-block: 0; }
  body.hcta-panel .site-header__brand { padding-block: var(--hdr-top-pad, 0.45rem); }
  body.hcta-panel :is(.site-header__top-right, .site-header__actions) { align-self: stretch; align-items: stretch; gap: 0; }
  body.hcta-panel .site-topbar {
    flex-direction: column; justify-content: center; align-items: center; gap: 0.05rem;
    padding-inline: clamp(1rem, 1.8vw, 1.5rem);
    background: color-mix(in srgb, var(--wp--preset--color--primary) 7%, #fff);
  }
  body.hcta-panel .site-topbar__tel { align-items: center; }
  body.hcta-panel .site-topbar__tel-num { font-size: calc(var(--cta-tel-fs) * 0.88); }
  /* タイルの中ではボタンも「面」になる＝角丸・影・浮き上がりを解除し、形の軸も無効化する
     （接地しているものが丸いと、そこだけ地が覗いて破綻するため）。 */
  body.hcta-panel .site-header__cta { align-items: stretch; }
  body.hcta-panel .site-header__cta .wp-block-button { display: flex; }
  body.hcta-panel .site-header__cta .cta-btn {
    flex-direction: column; gap: 0.15em; justify-content: center;
    border-radius: 0 !important; box-shadow: none !important;
    padding: 0.5em clamp(1.1rem, 2vw, 1.7rem); font-size: calc(var(--cta-btn-fs) * 0.9);
  }
  body.hcta-panel .site-header__cta .cta-btn:hover { transform: none; }
  /* ★20px の上書きは撤去（2026-08-22）：基準が 18px だった頃に「タイルでは少し大きく」と
     足した例外で、基準が 22px になった今は**逆に小さくする**指定になっていた。 */
  /* ★フローティング（角丸の浮きバー）だけは、右端タイルの外角をバーの半径に合わせる。
     バーは overflow:visible（ドロップダウンを外に出すため）なので、角丸でクリップされない＝
     直角のタイルがバーの丸い角からはみ出す（2026-07-25 実測で発覚）。overflow:hidden にすると
     メニューのドロップダウンが切れるため、タイル側の角を合わせて解決する。 */
  body.hcta-panel.header-floating .site-header__cta .cta-btn {
    border-start-end-radius: var(--float-r, 34px) !important;
    border-end-end-radius: var(--float-r, 34px) !important;
  }
  /* ★上部中央（センターロゴ）のタイル接地＝帯の右端・上下いっぱいまで届かせる。
     ★★2026-08-22：右ブロックの**絶対配置をやめた**（狭いデスクトップ幅でロゴと重なるため。
       §ヘッダー：上部中央 参照）ので、ここも**グリッドでの等価**に置き換える：
         `right:0; top:0; bottom:0`（絶対配置） → `align-self: stretch`（上下いっぱい）
                                                 ＋ 負のマージン（帯の右パディングを打ち消して端まで）
       ※ 旧実装の `right: 0` は**パディングボックスの外端**に合わせる指定だったので、
         同じ見た目にするには padding ぶんだけ外へ出す必要がある。
     ★★帯の右パディングは**戻す**（この行を消すと壊れる・2026-08-22 実測）：
       タイル接地は帯の右パディングを 0 にするので、そのままだと
         ①グリッドの内容ボックスが左右非対称になり**ロゴが 20px 右へずれる**
         ②負のマージンの起点が 40px 右へ動き、**タイルが帯から 40px はみ出す**（横あふれ 38px）
       が同時に起きる。パディングを戻したうえで、タイルだけを負のマージンで外へ出す。 */
  body.hcta-panel.header-center .site-header__top-inner { padding-inline-end: clamp(1rem, 4vw, 2.5rem); }
  body.hcta-panel.header-center .site-header__top-right {
    align-self: stretch;
    margin-inline-end: calc(-1 * clamp(1rem, 4vw, 2.5rem));
    /* ★上下も帯いっぱいまで（旧 `top:0; bottom:0` の等価）。余白はトークンなので、
       スクロールで詰まったときも**同じ値**で打ち消される＝ズレが生まれない。 */
    margin-block: calc(-1 * var(--hdr-top-pad, 0.45rem));
  }
  /* 枠付き電話（サブ軸）はタイルでは意味を持たない＝タイル自身が面なので枠を解除 */
  body.hcta-panel.ctatel-boxed .site-topbar__tel { border: 0; background: transparent; padding: 0; }
}

/* ── ★★1行目の階段の⑤⑥＝ボタンを詰める（2026-10-18・ユーザー決定＝案A「情報から降ろす」）─────────
   main.js の TOP_RETREAT が、住所・受付時間を降ろしてロゴを下げても1行目が入らないときに付ける。
   ★ボタンは予約の入口なので、触るのは情報を降ろしたあと（実測 1024px・3ボタン：縦組みで 178px 空く）。
   ★タイル接地（hcta-panel）の指定より**後ろ**に置く＝同じ詳細度で、詰める指定が勝つ（前に置くとタイルでは何も起きない）。
   ★角丸は縦組みのときだけ控えめに：丸いボタン（pill）を縦組みにすると楕円になって窮屈（タイル接地の 0 は !important で残る）。 */
/* ⑤ 縦組み（アイコンの下に文字）＝タイル接地・スマホの下部バーと同じ組み方 */
body.hdr-cta-stack .site-header__cta .cta-btn {
  flex-direction: column; gap: 0.15em; padding: 0.45em 0.95em;
  font-size: max(var(--fs-min), calc(var(--cta-btn-fs) * 0.86));
  border-radius: min(var(--cta-r, var(--r-btn)), 12px);
}
/* ⑥ 最後の手段＝アイコンだけ（ボタン3つで 901px 付近だけ・PC 幅だけ＝≤900px では main.js が階段を使わない）。
   ★文字は**読み上げに残す**（見た目だけ伏せる）＝ボタンの名前は「WEB予約」のまま。
   ★アイコンの無いボタン（WEB予約のアイコン「なし」）は文字のまま＝:has で外す（空の四角を作らない）。
   ★押せる大きさの下限（--tap-min）を割らない。 */
body.hdr-cta-icon .site-header__cta .cta-btn:has(.cta-btn__icon) {
  gap: 0; padding: 0;
  width: max(var(--tap-min, 44px), 3.1em); height: max(var(--tap-min, 44px), 3.1em);
}
body.hdr-cta-icon .site-header__cta .cta-btn:has(.cta-btn__icon) .cta-btn__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── モバイル（900px以下）＝どの型でも共通＝1段目はロゴと MENU ───────────────
   ★型ごとのモバイル分岐は作らない：狭幅では並べ方の選択肢がそもそも成立せず、
     受付時間・小見出しはハンバーガーの隣で読まれない。番号とボタンだけ残す。
   ★★電話・ボタンは1段目に置かない（2026-10-18）＝下部バーを出す院はバーへ、出さない院はヘッダーの2段目へ
     （下の §スマホで下部バーを出さない院＝連絡手段をヘッダーの2段目へ）。 */
@media (max-width: 900px) {
  body :is(.site-topbar__tel-label, .site-topbar__hours, .site-topbar__address) { display: none; }
  /* ★★倍率はそのまま、床だけ敷く（2026-08-02）。ボタンの文言は「タップ先を決める文字」なので
     下限（--fs-min）を割らせない。実測：小さめ（--cta-btn-fs 0.94rem）× 0.72＝**10.8px** で
     下限割れしていた——**サイズ軸 × モバイル倍率という掛け算の底**でだけ起きる崩れで、
     「文字サイズが可変なら一番小さくなるサイズで判定する」（2026-07-25 の番号のコントラストと同型）。
     標準（1.2rem × 0.72＝13.8px）では床は噛まないので、大きい側の設計は1pxも動かない。
     ★2段目の電話もこの大きさで描く（ボタンと並ぶ1つの面＝字の大きさをそろえる）。 */
  body { --hdr-row-fs: max(var(--fs-min), calc(var(--cta-btn-fs) * 0.72)); }
  .site-header__cta .cta-btn { font-size: var(--hdr-row-fs); }

  /* ★★ヘッダー1行が狭幅で収まらず横スクロールが出ていた問題への対処（2026-07-25 実測で発覚）。
     ロゴ(.site-header__brand)・電話・ボタンがすべて flex-shrink:0 で、375px 幅では
     ロゴ218px＋連絡ブロック＋ハンバーガー＝合計約480px となり body が横に伸びていた
     （このCTA改修の前から出ていた症状。改修で連絡ブロックが 230→189px に縮み 496→439px に
     改善したが、まだ 375px には収まらない）。
     縮められるのはロゴだけなので、狭幅ではロゴを縮小可能にし、名称の字面も画面幅に追従させる。
     ★ロゴは「切り詰める」のではなく「小さくする」こと——クリニック名の省略は情報の欠落になる。 */
  .site-header__brand { flex-shrink: 1; min-width: 0; }
  .site-header__brand-text { min-width: 0; }
  /* ━━ ★★★狭幅の上限は**実効サイズ**に掛ける（2026-08-31 実射FB「医療機関名が少し小さすぎ」）━━
     旧実装は `.site-header__name { font-size: clamp(0.95rem, 4.2vw, var(--logo-fs)); }`＝
     **名前の font-size にだけ**上限を掛けていた。結果：
     ① 院が選んだ大きさが**スマホに届かない**（4.2vw が常に勝つので全院が同じ 15.75px＠375px）。
     ② **3行のうち名前だけが幅に追従**するので階層が潰れる（名前/キャッチ＝PC 2.80 に対し **1.41**）。
        キャッチ 0.7rem・英字 0.62rem は可読の下限に近く、これ以上は縮められない。
     ③ **シンボルは上限の外**（`--logo-fs` を直読み）なので縮まず、名前の取り分を食っていた
        （シンボル/名前＝PC 1.60 に対し **3.19**）。
     ★4.2vw を入れた 2026-07-25 の理由（ロゴ＋電話＋予約ボタン＋ハンバーガーで約480px 必要）は、
       その後スマホCTAが画面下のバーへ移って**消えている**。実測 375px：ブランドに使える幅 268px に対し
       実測 183px＝**85px 余っていた**。
     ★★上限 **5.3vw** は「11文字の医院名でも1行に収まる最大」＝実測で決めた値（下表・375px）。
       | 上限 | 名前 | 7文字 | 11文字 |
       |---|---|---|---|
       | 4.2vw（旧） | 15.75px | 162.8px | 214.6px |
       | **5.3vw** | **19.9px** | 181.9px | **262.2px（余り5.8px）** |
       | 6.4vw | 24px | 217.7px | 267.8px＝**折り返す** |
     ★シンボルも同じ上限を読むので、**ブランドの箱の幅は 183→182px とほぼ不変**——
       大きすぎたシンボルが食っていた幅が、そのまま名前に移る。 */
  body { --logo-fs-eff: min(var(--logo-fs), 5.3vw); }
  /* ━━ ★★★テキストロゴは**1行に収める**（2026-09-26 運営者の判断・実射「みどりの丘内科・小児科クリ／ニック」）━━
     5.3vw は「11字まで1行」の上限なので、それより長い院名は**言葉の途中で折り返し**、ヘッダーも 94px に伸びていた。
     → 上限に「1行に入る大きさ」を足す（実測 375px・16字・シンボルあり：19.9px 2行 → 14.3px 1行、ヘッダー 94→68px）。
     ★使える幅は**ブランドの箱の実幅**（コンテナ単位 `cqi`）：形状や右側に並ぶもの（MENU・電話アイコン）で変わるので
       px で決め打ちしない。ブランドを残りの幅いっぱいに広げて（flex: 1）、その幅をコンテナとして測る。
       ★`--logo-fs-eff` は body に置いたままでよい：カスタムプロパティの中の `cqi` は**使う側（名前・シンボル）**で解決される。
     ★院名の幅（em）は PHP の注入（`--logo-name-em`＝字間込み）＝描いたあとに縮んで跳ねない（JS で測らない理由）。
     ★シンボルは `max(30px, 1.6 × 字の大きさ)`＝**2つの条件の両方**で入る大きさ（30px の床と比の側）の小さいほう。
       ＋2px は小数の丸め・最後の字の字間の打ち消しの誤差の余裕。
     ★下限 13px（360px でも16字が 13.3px で入る）。下限でも入らない長い院名は2行＝**文節で割る**（下の name）。
     ★短い院名は変わらない＝従来の上限（5.3vw）のほうが小さいあいだは、そちらが効く。
     ※ 画像ロゴは対象外（画像は `max-width: 100%` で箱に収まる）。 */
  body:not(.logo-image) .site-header__brand { flex: 1 1 0; container-type: inline-size; }
  /* ★上部中央は 768px 以上だとグリッドの `auto` 列にブランドを置く（§上部中央）。`auto` 列は中身の幅で決まるが、
     inline-size のコンテナは中身の幅を外へ伝えない＝**列が 0 に潰れる**。ここはコンテナにしない
     （`cqi` はコンテナが無いとビューポート幅に落ちる＝従来の上限 5.3vw がそのまま効く）。
     ★グリッドのままなのは下部バーを出す院だけ（`mcta-on`）。出さない院は2段目を作るため横並びに戻す（下の §スマホで下部バーを出さない院）
     ＝ロゴは上の flex: 1 1 0 のコンテナのまま。 */
  @media (min-width: 768px) {
    body.header-center.mcta-on:not(.logo-image) .site-header__brand { flex: none; container-type: normal; }
  }
  body:not(.logo-image) {
    --logo-fit-em: max(var(--logo-name-em, 1), 1);
    --logo-fs-eff: max(13px, min(var(--logo-fs), 5.3vw, calc((100cqi - 2px) / var(--logo-fit-em))));
  }
  body.logo-sym:not(.logo-image) {
    --logo-fs-eff: max(13px, min(var(--logo-fs), 5.3vw,
      calc((100cqi - 0.6rem - 30px - 2px) / var(--logo-fit-em)),
      calc((100cqi - 0.6rem - 2px) / (var(--logo-fit-em) + var(--logo-sym-ratio)))));
  }
  .site-header__name { word-break: auto-phrase; text-wrap: balance; }
  /* ★狭幅の直書きは撤去（--logo-sym が clamp 経由で自動追従する＝式を1本に保つ）*/
  /* ★★狭幅は**端点を差し替える**（2026-08-23。旧＝専用トークン `--logo-img-h-sp` を別に持っていた）。
     写像の式は1本のままなので、末端（`max-height: var(--logo-img-h)`）に手を入れる必要が無い
     ＝トークンが1つ減り、「スマホだけ古い式が残る」が起こり得なくなる。
     ★★ここは `:root`（PHPの注入）ではなく **`body` に書く**：カスタムプロパティは継承するので、
       body の宣言が html から継承した値に勝つ。形状セレクタを並べる必要も無い
       ——狭幅では6形状すべてが横帯になる（2026-08-12）ので、形状ごとの端点は意味を失う。 */
  body { --logo-h-min: 30px; --logo-h-max: 54px; }
}

/* ━━ ★★スマホで下部バーを出さない院＝連絡手段をヘッダーの2段目へ（2026-10-18・ユーザー決定＝案C）━━━━━━━━
   軸 mobile_cta = off（「ヘッダーに置く」）の院は、それまで ≤900px でもロゴ・電話・ボタン・MENU を1行に並べていた。
   並びきらず、ロゴ（flex-shrink:1）だけが押しつぶされて院名が1〜2字ずつ縦に折り返していた
   （実測 375px・t01：ボタン1つでも院名 13px の3行、2つで 11行＝ヘッダー 331px・MENU が画面の外へ 26px）。
   PC 幅の1行目の階段（main.js の TOP_RETREAT）は、詰めても院名がつぶれるだけで解けない。
   → 3案（A ボタンだけ2段目／B ボタンはメニューの中／C 電話も2段目）の比較画像から **C** に決まった。
     **1段目はロゴと MENU だけ**、電話・WEB予約・LINE・お問い合わせを2段目に等分＝下部バーを上に置いた形。
   ★院名がいちばん大きく残る（375px・t01：A・B 18.2px／C 19.9px、320px：13.3px／16.7px）。
     フローティング（t08）の 320px では A・B だと院名が2行、C は1行。
   ★電話はアイコンだけにせず**番号つきの面**にする（ボタンと同じ大きさの1つの面）。
   ★高さは 375px で 113〜132px（ボタン1〜3つ）＝下部バーを出す院の「ヘッダー＋バー」（約122px）と同じくらい。
   ★`mcta-on`（下部バーが実際に描かれる）でないときだけ＝下部バーを出す院の形は1pxも変えない。
     バーを出す院は電話・ボタンを `display: none` にしている（§スマホ固定CTAバー）。 */
@media (max-width: 900px) {
  /* 2段目への改行：電話・ボタンを包む箱（actions / top-right）を外し、行の直下に並べてから ::after で折る。
     ★並び順＝ロゴ（0）→ MENU（10）→ 改行（50）→ 電話（60）→ ボタン（61）。マークアップの順（電話・ボタン・MENU）は変えない。
     ★行の間隔は2段目の margin-top が持つ（row-gap にすると、改行だけの空の行にも間隔が付く）。 */
  body:not(.mcta-on) :is(.site-header__bar, .site-header__top-inner) { flex-wrap: wrap; row-gap: 0; column-gap: 0.5rem; }
  body:not(.mcta-on) :is(.site-header__bar > .site-header__actions, .site-header__top-inner > .site-header__top-right) { display: contents; }
  body:not(.mcta-on) :is(.site-header__bar, .site-header__top-inner)::after { content: ""; order: 50; flex-basis: 100%; }
  body:not(.mcta-on) :is(.site-header__bar, .site-header__top-inner) > :is(.site-header__actions, .site-header__top-right) > .site-nav-toggle {
    order: 10; margin-inline-start: auto; /* 画像ロゴ（flex:1 にしない）でも右端へ */
  }
  body:not(.mcta-on) .site-header .site-topbar { order: 60; margin-top: 0.55rem; }
  body:not(.mcta-on) .site-header .site-header__cta { order: 61; margin-top: 0.55rem; }
  /* ★面の高さをそろえる：行も電話の箱も align-items: center なので、お問い合わせが2行になって伸びると電話の面だけ低く残った（320px・4つ）。
     「Tel.」の文字（アイコンより背が低い）の電話も同じ（5px 低かった）。電話の箱の中も stretch（下の .site-topbar）。 */
  body:not(.mcta-on) .site-header :is(.site-topbar, .site-header__cta) { align-self: stretch; }

  /* 2段目の面を等分：電話＝1、ボタンの箱＝ボタンの数（:has で数える）。箱の中もボタン1つずつ等分。
     ★箱の基準の幅に「箱の中の間隔ぶん」（0.5rem × (数−1)）を持たせる＝電話の面とボタンの面がぴったり同じ幅になる。
       0 にすると箱の中の間隔のぶんだけボタンが細くなり（3つで 5px）、しきい値の境目で電話だけ横・ボタンは縦組みと食い違った。 */
  /* ★電話の箱は情報ブロック型（hcta-stack）だと縦並び（column）＝中の面が縦に伸びない。2段目では横並びにして面を箱いっぱいに */
  body:not(.mcta-on) .site-header .site-topbar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: row; align-items: stretch; gap: 0; }
  body:not(.mcta-on) .site-header .site-header__cta { flex: 1 1 0; min-width: 0; gap: 0.5rem; align-items: stretch; padding: 0; }
  body:not(.mcta-on) .site-header .site-header__cta:has(> :nth-child(2)) { flex: 2 1 0.5rem; }
  body:not(.mcta-on) .site-header .site-header__cta:has(> :nth-child(3)) { flex: 3 1 1rem; }
  body:not(.mcta-on) .site-header .site-header__cta::before { content: none; }
  /* ★面ごとに「コンテナ」にする＝幅で組み方（横／アイコンの上に文字）と電話の番号を切り替える（下の @container）。
     inline-size のコンテナは中身の幅を外へ伝えないが、flex-basis: 0 で等分しているので幅は崩れない。
     ★大きさの基準（em）はボタンの字の大きさ（--hdr-row-fs）＝サイズ軸を変えても判定が字と一緒に動く。 */
  body:not(.mcta-on) .site-header :is(.site-topbar, .site-header__cta > .wp-block-button) {
    container: hdr-tile / inline-size; font-size: var(--hdr-row-fs);
  }
  body:not(.mcta-on) .site-header .site-header__cta > .wp-block-button { flex: 1 1 0; min-width: 0; display: flex; }
  body:not(.mcta-on) .site-header :is(.site-header__cta .cta-btn, .site-topbar__tel) {
    width: 100%; box-sizing: border-box; min-height: var(--tap-min, 44px);
    flex-direction: row; justify-content: center; align-items: center; gap: 0.4em;
    padding: 0.35em 0.4em; font-size: 1em; line-height: 1.2;
  }
  /* 電話の面＝お問い合わせ（枠線ボタン）と同じ組み立て。枠付き電話（ctatel-boxed）・タイル接地の指定より強く書く */
  body:not(.mcta-on) .site-header .site-topbar .site-topbar__tel {
    border: 2px solid var(--wp--preset--color--primary); border-radius: var(--cta-r, var(--r-btn));
    background: var(--wp--preset--color--white, #fff); color: var(--wp--preset--color--primary);
    font-weight: var(--w-ui, 700);
  }
  body:not(.mcta-on) .site-header .site-topbar .site-topbar__tel:hover { background: var(--wp--preset--color--primary-light, #fff); }
  body:not(.mcta-on) .site-header .site-topbar__tel-num { font-size: 1em; gap: 0.4em; }
  body:not(.mcta-on) .site-header .site-topbar__tel-num svg { width: var(--cta-ico); height: var(--cta-ico); }
  body:not(.mcta-on) .site-header .site-topbar__tel:hover .site-topbar__tel-digits { text-decoration: none; }

  /* 面が狭いとき：アイコンの上に文字（下部バーの4つと同じ組み方）。
     ★しきい値は「横に並べて、いちばん長い字（番号・お問い合わせ）が入る幅」。面は等分なので全部の面が同時に切り替わる。
     ★★実測（2026-10-18・8テンプレ・字の大きさは床の 12px＝em で見ていちばん厳しい）：横に並べるのに要る幅は
       番号（12字）9.72em・お問い合わせ 9.06em・WEB予約／LINE予約 7.2em 以下。アイコンの上に置いて番号が入るのは 7.55em
       （数字の書体はテンプレで違う＝12字で 70〜83px）。→ 横は 10em、番号は 7.8em から。
     ★13字以上の番号（携帯の 090-1234-5678 など）は body.tel-long で1段広げる（14字まで入る幅＝11em・8.8em）。 */
  @container hdr-tile (width < 10em) {
    body:not(.mcta-on) .site-header :is(.site-header__cta .cta-btn, .site-topbar__tel, .site-topbar__tel-num) { flex-direction: column; gap: 0.12em; }
    body:not(.mcta-on) .site-header :is(.site-header__cta .cta-btn, .site-topbar .site-topbar__tel) {
      padding: 0.3em 0.15em; font-size: max(var(--fs-min), 0.88em); border-radius: min(var(--cta-r, var(--r-btn)), 12px);
    }
    /* ★お問い合わせは 320px・4つ（66px）で1行に入らない＝文節の切れ目で2行（下部バーの 320px と同じ判断） */
    body:not(.mcta-on) .site-header .site-header__cta .cta-btn__label { white-space: normal; text-wrap: balance; text-align: center; }
  }
  @container hdr-tile (10em <= width < 11em) {
    body.tel-long:not(.mcta-on) .site-header :is(.site-header__cta .cta-btn, .site-topbar__tel, .site-topbar__tel-num) { flex-direction: column; gap: 0.12em; }
    body.tel-long:not(.mcta-on) .site-header :is(.site-header__cta .cta-btn, .site-topbar .site-topbar__tel) {
      padding: 0.3em 0.15em; font-size: max(var(--fs-min), 0.88em); border-radius: min(var(--cta-r, var(--r-btn)), 12px);
    }
  }
  /* 番号が入らないほど狭いときは「電話」の字にする（番号は省略すると読み違える＝途中で切らない・折り返さない） */
  @container hdr-tile (width < 7.8em) {
    body:not(.mcta-on) .site-header .site-topbar__tel-digits { display: none; }
    body:not(.mcta-on) .site-header .site-topbar__tel-word { display: inline; }
  }
  @container hdr-tile (7.8em <= width < 8.8em) {
    body.tel-long:not(.mcta-on) .site-header .site-topbar__tel-digits { display: none; }
    body.tel-long:not(.mcta-on) .site-header .site-topbar__tel-word { display: inline; }
  }
}
@media (min-width: 768px) and (max-width: 900px) {
  /* ── 上部中央（768〜900px はグリッド）：2段目を作るために横並びへ。ロゴは MENU と同じ幅の空きを左に置いて中央に
     （767px 以下は上部中央も左寄せ＝下部バーを出す院と同じ） ── */
  body.header-center:not(.mcta-on) .site-header__top-inner { display: flex; }
  body.header-center:not(.mcta-on) .site-header__brand { justify-content: center; }
  body.header-center:not(.mcta-on) .site-header__top-inner::before { content: ""; order: 0; flex: 0 0 var(--tap-min, 44px); }
}
@media (max-width: 900px) {

  /* ── サイドバー（左右）：電話・ボタンはドロワーの中（.site-header__sidebar-body）にある。
     ドロワーの箱は開いたままにして、メニュー（nav-wrap）だけを畳む＝電話・ボタンは2段目に見えたまま ── */
  body.header-sidebar:not(.mcta-on) .site-header__sidebar-head { padding-bottom: 0; }
  body.header-sidebar:not(.mcta-on) .site-header__sidebar-body {
    position: static; max-height: none; overflow: visible; opacity: 1; pointer-events: auto;
    background: transparent; box-shadow: none; transition: none;
  }
  body.header-sidebar:not(.mcta-on) .site-header__sidebar-body > .site-header__nav-wrap {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--wp--preset--color--white, #fff); box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height .3s ease, opacity .2s; z-index: 50;
  }
  body.header-sidebar.nav-open:not(.mcta-on) .site-header__sidebar-body > .site-header__nav-wrap {
    max-height: 85vh; overflow-y: auto; opacity: 1; pointer-events: auto;
  }
  body.header-sidebar:not(.mcta-on) .site-header__actions {
    flex-wrap: nowrap; gap: 0.5rem; align-items: stretch; border-top: 0;
    padding: 0 clamp(1rem, 4vw, 2.5rem) 0.7rem;
  }
}
/* 「電話」の字は上の @container のときだけ（番号が入らない狭い面）。それ以外は番号 */
.site-topbar__tel-word { display: none; }

/* ━━ スマホ固定CTAバー（軸 mobile_cta = bar・2026-08-02）━━━━━━━━━━━━
   ★★**ヘッダーの幅争いを「置き場所を変えて」終わらせる**ための軸。375px のヘッダーで使えるのは
     343px しかないのに、ロゴ＋電話＋予約＋ハンバーガーの4要素がそこを取り合っていた
     （実測：4要素で 193px を使い、ロゴに残るのは 131px＝原寸の76%）。
     この取り合いは 2026-07-25（横スクロール）→ 2026-08-02（ロゴに電話アイコンが重なる）と
     **2回症状を出しており、要素を減らさない限り3回目が来る**——キットCSSを廃止したときと同じ
     「置き場所そのものを変えるまで再発は終わらない」構図。
   ★発動は ≤900px（ハンバーガーが出る床と同じ）。PCはヘッダーCTAのまま＝
     「モバイルは型ごとの分岐を作らない」の続きで、置き場所も1つに畳む。
   ★`mcta-on` は**実際に項目が描かれるときだけ**付く companion（電話も予約も無いクリニックで
     空のバーぶんの余白だけが残らないように）。 */

/* ★★寸法は**1か所**で持つ（2026-08-12 の前提工事・見た目は 0px 変わらない）。
   高さ 56px が「項目の当たり」と「本文の逃げ余白」の**2箇所にベタ書き**されており、
   見せ方の選択肢（項目の積み方・浮きバー）を足すと必ずズレる組み合わせだった
   （＝お知らせの色をインラインとCSSの2か所に持って永久にズレた 2026-07-31 と同型）。
   ★セーフエリア（iOSのホームバー）の持ち方は**構えで変わる**ので、接地と浮きで別トークンにする：
     接地＝バーがセーフエリアまで伸びるので**内側の padding**、浮き＝バーの下にセーフエリアが
     残るので**下端のオフセット**。1つのトークンで兼ねると必ずどちらかが二重に効く。 */
body {
  --mcta-h:     56px;                             /* 項目の当たり＝逃げ余白の基準 */
  --mcta-inset: 0px;                              /* バーの左右の浮き代（接地は 0） */
  --mcta-lift:  0px;                              /* バーの下端オフセット（接地は 0） */
  --mcta-safe:  env(safe-area-inset-bottom, 0px); /* バー内側のセーフエリア */
  --mcta-r:     0px;                              /* バーの角丸（接地は 0） */
  --mcta-gap:   0px;                              /* 項目どうしの間隔（面を分ける構えだけ > 0） */
  --mcta-bg:    var(--wp--preset--color--white, #fff); /* バーの地色（一枚地の構えだけ意味を持つ） */
  /* 罫線＝バーの上端と項目の区切り。--rule（#E4EFF1＝白地に 1.15:1）では
     「バーがどこから始まるか」が出ないので、カラー軸に追従する専用の濃さで持つ。 */
  --mcta-rule:  color-mix(in srgb, var(--wp--preset--color--primary) 30%, #fff);
}
.mobile-cta { display: none; }
/* 番号はマークアップには常に出し、軸で出し分ける（＝出す/出さないの真実源をCSSの1か所に置く）。
   ★`display: none` にする（視覚的に隠すだけ、にはしない）：項目そのものがリンクなので、
   隠した番号がリンクの読み上げ名に混ざると「電話する 079…」と二重に読まれる。
   ★数字の体裁は値によらず共通＝CJK 体へ落とさない（`--clinic-num-font`）／等幅数字。 */
.mobile-cta__num {
  display: none;
  font-family: var(--clinic-num-font);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1.2;
  white-space: nowrap;
}

/* ── 構え（軸 mobile_cta_style）＝面の持ち方の3大別 ──────────────
   split（既定）＝全幅接地・等分。トークンは上の body 既定のまま＝1宣言も要らない。
   ★★float の角丸と浮きを**別々のサブ軸にしない**：「接地しているものは角を丸めない・
     浮かせない」（hcta-panel のタイルと同じ判断）を守るには、丸めることと浮かせることが
     セットでしか成立しない。値を分けると「接地しているのに丸い」破綻した組合せが選べてしまう。
   ★角丸は**役割トークン `--r-card`（形の軸）**に従う＝浮いたバーは「1枚のカード」だから。
     wave 軸の `--panel-r` は band-panel のときしか宣言されないトークンなので使わない。 */
/* buttons＝浮くのは同じだが、**面を手段ごとに分ける**（電話＝今すぐ話す／予約＝あとで枠を取る）。
   ★「離す」も浮きとセットでしか成立しない：接地したまま離すと隙間から本文が透け、
     plain は面が無いので離しても何も起きない。＝これも独立サブ軸にはしない。 */
body:is(.mbar-float, .mbar-buttons) {
  --mcta-inset: var(--gutter);
  --mcta-lift:  calc(0.6rem + env(safe-area-inset-bottom, 0px));
  --mcta-safe:  0px;
  --mcta-r:     var(--r-card, 16px);
  /* ★ボタン同士の間隔＝ガターの半分。外側（ガター）と gap を同じ量にすると中央が空きすぎる
     ——両側のボタンの中身が中央寄せなので、**gap の左右にその余りが足される**
     （診療案内のタイルで実測した「見えている空きどうしの比で決める」と同じ）。 */
  --mcta-gap:   calc(var(--gutter) / 2);
}

/* ── 一枚地の地色（軸 mobile_cta_tone）と区切り線（軸 mobile_cta_rule）─────────
   ★★**`plain` と連結して宣言する**（`body.mbar-plain.mbartone-*`）＝他の3つの構えでは
     トークンが存在すらしない＝**inert**。`split`/`float` は項目の塗りがバーを覆い、
     `buttons` は器が透明なので、地色を持たせても「見えないのに保存されている」状態になる。
     ゲートで無効化するのではなく、**効く場所にだけ宣言する**（`normalize` が要らない）。
   ★★**地はブランド色そのまま（`primary` / `accent`）＋白文字＝依頼により採用（2026-08-12）**。
     当初は `primary-dark` ＋（accentでは）濃色文字にしていたが、「濃すぎる」「白文字にしたい」の指示。
     **白文字のコントラストは一部のパレットで AA（4.5:1）を下回る**（バーの文字は 14.4px＝
     WCAG の「通常の文字」なので基準は 3:1 ではなく 4.5:1）。実測（7パレット）：
       primary ＋白 ＝ navy 8.20 / beige 5.22 / teal 4.75 ○ ／ forest 3.87・sky 3.62・fresh 3.50・sakura 3.05 ✗
       accent  ＋白 ＝ beige 3.01 / sakura 2.52 / navy 2.41 / teal 2.38 / forest 2.19 / sky 2.18 / fresh 2.14 **全て ✗**
     ＝軸 `cta_btn_fg` の既定を白にしたとき（2026-07-25・依頼により採用）と**同じ形の判断**。
     **管理UIに実測値つきの注意書きを出して選ぶ側に判断材料を渡す**方針も同じ。
     ※ 参考：`primary-dark` なら全7パレットで 4.53〜11.65、accent＋濃色文字なら 4.84〜6.36 で AA を満たす。
        読みやすさを最優先する運用に変える場合はこの2つに戻すこと（値はこのブロックの2行だけ）。 */
body.mbar-plain.mbartone-primary {
  --mcta-bg:   var(--wp--preset--color--primary);
  --mcta-fg:   var(--wp--preset--color--white, #fff);
  --mcta-rule: color-mix(in srgb, #fff 45%, transparent);
}
body.mbar-plain.mbartone-accent {
  --mcta-bg:   var(--cta-btn-bg, var(--wp--preset--color--accent));
  --mcta-fg:   var(--wp--preset--color--white, #fff);
  --mcta-rule: color-mix(in srgb, #fff 50%, transparent);
}
/* ★★すりガラス：バーは**本文の上に浮いている**ので、下地が透けるのは構造と一致する
   （ヘッダー透過の「すりガラス地」と同じ考え方・同じぼかし量にそろえた）。
   ★★★**非対応ブラウザでは不透明の白に落とす**：`backdrop-filter` が効かないまま半透明だけ残ると、
     ぼかされていない本文が素通しになり**文字が読めなくなる**。透明度のほうを `@supports` で
     囲み、ぼかしの宣言は無条件に置く（非対応なら無視されるだけ）＝**透ける条件とぼかす条件を一致させる。**
   ★★★**透過とコントラストは直接のトレードオフで、両立はできない**。真っ黒の写真が背後に来た
     最悪ケースの実測（**9パレットの最小**・電話／予約。★電話の列は 2026-08-29 の底上げ後の値）：

       | 不透明度 | 電話 | 予約 |
       |---|---|---|
       | 0.85 | 4.94 | 3.45 |
       | **0.72（採用）** | 3.51 | 2.45 |
       | 0.65 | 2.86 | 2.00 |

     **どの濃さでも最悪ケースは AA（4.5）に届かない**——0.85 まで上げても 3.45 止まり。
     ★2026-08-29 の底上げで**電話の列だけ上がった**（2.27 → 3.51）＝桜の `primary-dark` が
       `#b05c76`（白地 4.53 の中間トーン）から `#8F3F56`（白地 6.97）になったため。
       いま効いているのは**予約の列＝若草の濃い accent `#ac5b0e`**（accent は底上げの対象外）。
     ＝**濃さの調整で解ける問題ではない**ので、「ガラスに見えること」を優先して 0.72 を採り、
     管理UIに実測値つきの注意書きを出す（`primary`/`accent` の地と同じ扱い）。
     ※ 明るい地（このテーマの通常の背景＝白／`bg-soft`）の上では白地と同じ 4.9〜11.7 が出る。
       落ちるのは**暗い写真の上に重なっている間だけ**。
   ★**「ガラスらしさ」は不透明度だけでは出ない**：`saturate` を上げると下地の色がにじんで出るので、
     同じ濃さでも透けて見える。ぼかしも強めて輪郭を溶かす（14→18px・彩度 1.05→1.4）。
   ※ 経緯：初版で「最悪でも 4.84」と書いたのは**teal 1パレットだけを測っていた**誤り。
     パレットが軸である以上、**色の判定は必ず全パレットの最小値で行う**。 */
body.mbar-plain.mbartone-frost {
  --mcta-bg:   var(--wp--preset--color--white, #fff);
  --mcta-rule: color-mix(in srgb, var(--wp--preset--color--primary) 30%, #fff);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  body.mbar-plain.mbartone-frost { --mcta-bg: rgba(255, 255, 255, 0.72); }
}

/* ★★区切り線は **border ではなく背景**で引く（2026-08-12）：`border-style: dashed` は
   **破線の刻みと間隔を指定できない**。1px 幅ではブラウザ既定の刻みが細かすぎて
   「実線が少し欠けている」ようにしか見えず、破線だと分からなかった。
   背景のグラデーションなら刻みと間隔を数値で持てる（実線＝ベタ塗り／破線＝5px 描いて 7px 空ける）。
   ※ `::before` / `::after` は使わない——電話リンクの当たり拡張（`a[href^="tel:"]::after`）と
     ぶつかるため。背景なら疑似要素を1つも消費しない。 */
body { --mcta-rule-img: linear-gradient(to bottom, var(--mcta-rule), var(--mcta-rule)); }
body.mbarrule-dashed { --mcta-rule-img: repeating-linear-gradient(to bottom, var(--mcta-rule) 0 5px, transparent 5px 12px); }

@media (max-width: 900px) {
  .mobile-cta {
    display: flex;
    position: fixed;
    inset: auto var(--mcta-inset) var(--mcta-lift) var(--mcta-inset);
    /* ★ヘッダー(100)より下に置く：ドロワーはヘッダーの中で開くので、バーが上に来ると
       メニューの最後の項目を覆ってしまう。 */
    z-index: 90;
    background: var(--mcta-bg);
    border-radius: var(--mcta-r);
    /* 角丸のときに項目の面を丸で切る（項目側に角丸を持たせない＝接地の判断を1か所に保つ） */
    overflow: hidden;
    box-shadow: 0 -2px 12px color-mix(in srgb, var(--wp--preset--color--text-main) 10%, transparent);
    /* ★iOS のホームバー（セーフエリア）ぶんを内側に足す＝バーの中身が指の届かない帯に入らない */
    padding-bottom: var(--mcta-safe);
  }
  /* ★★**枠線は持たない**（2026-08-12 実射FB「ボーダーはないほうが見た目が良い」）。
     境界は**影が担う**——これは buttons を作ったときに「枠線を足すと項目が --mcta-h + 2px に
     なり逃げ余白の式と 2px ずれる」で外したのと同じ判断で、**4つの構えすべてで揃った**。
     副産物として逃げ余白が全構えで占有と完全一致する（枠線ぶんの 1〜2px のズレが消えた）。
     ※ 面を持たない `plain` だけは項目の区切りに罫線が要る（下のブロック）。 */
  /* 浮きバーは四辺とも地から離れるので、影を全周に回して少し強くする */
  body.mbar-float .mobile-cta {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--wp--preset--color--text-main) 14%, transparent);
  }
  /* ── buttons＝面を項目へ移す（バー自身は「並べる器」に徹する）─────────
     ★★面・角丸・影を**器と項目で二重に持たない**：器に背景を残したまま項目を丸めると、
       ボタンの外側に器の白が四角く残る（＝丸めたつもりが四角い下敷きが付く）。
       器から全部外し、項目だけが面を持つ形に**移し替える**こと。 */
  body.mbar-buttons .mobile-cta {
    background: transparent;
    box-shadow: none;
    overflow: visible;          /* 項目の影を器で切らない */
    gap: var(--mcta-gap);
  }
  body.mbar-buttons .mobile-cta__item {
    border-radius: var(--mcta-r);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--wp--preset--color--text-main) 14%, transparent);
  }
  .mobile-cta__item {
    flex: 1 1 0;
    min-width: 0;
    /* ★★**不変条件**：逃げ余白の式は `--mcta-h` を「項目の総高」として使う。
       今は padding も枠も無いので**この1行では見た目が 1px も変わらない**が、内側に余白や枠を
       足した瞬間に実高が `--mcta-h` を超えて逃げ余白がズレる——一度そこで踏んだので歯止めとして置く。 */
    box-sizing: border-box;
    /* ★★番号（mbarnum-under）の絶対配置の基準＝**項目自身に持たせる**。以前は全体の
       `a[href^="tel:"]` の position: relative に黙って乗っていたので、デモで href が `#` に
       書き換わると基準がバー全体に移り、番号が2項目の境目（バーの中央）へずれた（2026-09-26）。 */
    position: relative;
    /* ★当たりの高さは --mcta-h（既定 56px＝--tap-min 44px を上回る）×画面の等分＝
       ヘッダーでは取れない大きさ。これがこの軸の主目的のひとつ。 */
    min-height: var(--mcta-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    text-decoration: none;
    font-weight: var(--w-ui, 700);
    font-size: max(var(--fs-min), 0.9rem);
    line-height: 1.2;
    /* ★★既定では項目は角を丸めない（丸めるのはバー側だけ）。接地では「画面の端に接する面が
       丸いとそこだけ下地が覗いて破綻する」ため、1枚ものの浮きバーでは overflow で切るため。
       ★例外は buttons だけ＝面を項目へ移す構えなので、角丸・影も項目側へ移る（下のブロック）。 */
    border-radius: 0;
    box-shadow: none;
  }
  .mobile-cta__icon { display: flex; flex-shrink: 0; }
  .mobile-cta__icon svg { width: var(--cta-ico); height: var(--cta-ico); }
  /* 電話＝淡い面に濃色（ヘッダーの番号と同じ --cta-tel-c＝どのカラーでも AA を満たす濃さ）。
     ★混色は 6%→12%：6% は白地との差が **1.06:1** しかなく「バーの地がそのまま見えている」
     状態で、隣が accent の塗りなので**押せる面が1つしか無いように見えていた**（実測）。 */
  .mobile-cta__item--tel { background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, #fff); color: var(--cta-tel-c); }
  /* 予約＝ヘッダーの塗りボタンと同じトークン（カラー軸・文字色軸にそのまま追従） */
  .mobile-cta__item--web { background: var(--cta-btn-bg, var(--wp--preset--color--accent)); color: var(--cta-btn-fg, #fff); }
  /* LINE（2026-10-17）＝LINE の緑で固定（予約と同じく塗りの面・ボタンと同じ理由で色は変えない） */
  .mobile-cta__item--line { background: #06C755; color: #fff; }
  .mobile-cta__item--form { background: #fff; color: var(--wp--preset--color--primary-dark, var(--wp--preset--color--primary)); }
  /* 地図（2026-10-13）＝お問い合わせと同じ白の面。主役の電話・予約より一段控えめにする（連絡手段ではないため）。 */
  .mobile-cta__item--map  { background: #fff; color: var(--wp--preset--color--primary-dark, var(--wp--preset--color--primary)); }
  /* ★★淡い面どうしが隣り合う境目にだけ線を引く（2026-10-13）。地図が加わって「必ず予約の塗りが隣にある」が崩れた
     （問い合わせ→地図は白どうし／予約を使わない院は電話→地図）。予約・LINE（どちらも塗りの面）の両隣は塗りの境目が
     区切りになっているので引かない（色が変わる場所に線を重ねると「はぐれた縦線」に見える）。buttons は面が離れている／plain は下のブロック。 */
  body:is(.mbar-split, .mbar-float) .mobile-cta__item:not(.mobile-cta__item--web, .mobile-cta__item--line) + .mobile-cta__item:not(.mobile-cta__item--web, .mobile-cta__item--line) {
    background-image: var(--mcta-rule-img);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 1px 100%;
  }

  /* ── plain＝一枚地。項目ごとに塗り分けず、文字と区切り線だけ ──────────
     ★主張を最小にする構え（和モダン・エディトリアル系）。**主従はあえて付けない**——
       塗り分けをやめた時点で「押せる面」ではなく「並んだ行き先」になるので、片方だけ強調すると
       中途半端になる。予約を目立たせたいなら split / float を選ぶ（管理UIにもそう書く）。 */
  body.mbar-plain .mobile-cta__item { background: transparent; }
  /* すりガラスのぼかしは**無条件に置く**（非対応ブラウザは無視するだけ／上の @supports で
     そのとき地は不透明の白に戻る）。
     ★彩度を強めに上げるのは**「ガラスらしさ」は不透明度だけでは出ない**から——
       下地の色がにじんで出ることで透けて見える（ヘッダー透過の 1.05 より強くしている）。 */
  body.mbar-plain.mbartone-frost .mobile-cta {
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
  }
  /* ★★全部の境目に罫線を持つのは plain だけ。他の3つは**塗りの境目が区切りになっている**
     （予約の accent の塗りが隣にある境目）。面がある構えに線を足すと、色が変わる場所に線が重なって
     「はぐれた縦線」に見える。★淡い面どうしが接する境目（地図が加わってできた）だけは上のブロックで引く。 */
  body.mbar-plain .mobile-cta__item + .mobile-cta__item {
    background-image: var(--mcta-rule-img);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 1px 100%;
  }
  /* ★★文字色は「地色が決まっていればそれ・決まっていなければ項目ごとの色」＝
     **フォールバック1つで2通りを兼ねる**（白地では従来どおり電話と予約で色が違い、
     色地では全項目が同じ読める色になる）。地色ごとに3行ずつ書き足さない。 */
  body.mbar-plain .mobile-cta__item--tel  { color: var(--mcta-fg, var(--cta-tel-c)); }
  body.mbar-plain .mobile-cta__item--web  { color: var(--mcta-fg, var(--accent-ink)); }
  body.mbar-plain .mobile-cta__item--form { color: var(--mcta-fg, var(--cta-tel-c)); }
  body.mbar-plain .mobile-cta__item--line { color: var(--mcta-fg, var(--cta-tel-c)); }
  body.mbar-plain .mobile-cta__item--map  { color: var(--mcta-fg, var(--cta-tel-c)); }

  /* ── サブ軸：項目の組み方（mobile_cta_item）──────────────────
     ★必要な理由は美観ではなく**項目が3つのとき**（電話＋予約＋お問い合わせ）。
       375px では 125px/項目しか無く、アイコン横並びだと文言が詰まる。
     ★項目が4つ（＋地図）のときは選んだ値によらず stack・番号なしで描く＝ここに条件は書かない
       （bodyクラスを PHP が丸める＝clinic_mobile_cta_crowded()。同じ条件を CSS と PHP の2か所に持たない）。
     ★高さが 56→64px に変わるので、逃げ余白は必ず --mcta-h 経由で追従させること
       （このためだけに前提工事をした）。 */
  body.mbaritem-stack { --mcta-h: 64px; }
  body.mbaritem-stack .mobile-cta__item { flex-direction: column; gap: 0.2em; }
  body.mbaritem-stack .mobile-cta__label { font-size: max(var(--fs-min), 0.78rem); }

  /* ── サブ軸：電話番号を出す（mobile_cta_number）──────────────────
     ★★★**バーの高さは1pxも増やさない**（2026-08-12 実射FBで是正）。項目 56px に対し
       中身は 20px しかなく**36px の余りが既にある**ので、番号（14.6px）はそのまま入る。
       初版は 68px へ広げていたが、それは「余りを数えずに段を足した」だけだった。
       ＝**寸法を足す前に、今そこに何pxの余りがあるかを測る。**

     ★★`under` と `main` は**同じ問題への別の答え**。「電話する」のラベルを「WEB予約」と
       揃えるかぎり、番号の段は**必ず WEB予約のラベルの下**に来る＝WEB予約は下が重くなる。
       これは調整では消せない（消せるのは量だけ）ので、**構造から降りる選択肢**を並べる。
       実測（375px・独立ボタン）：

       | | 項目高 | ラベルのズレ | WEB予約 上/下 |
       |---|---|---|---|
       | under（下に添える） | 56 | 0 | 12.2 / 26.6 |
       | main（番号を主にする） | 56 | 1.3 | 19.4 / 19.4 |

     ── under＝ラベルの下に添える ───────────────────────────
     ★★★**段を空けるのをやめ、文字は上下中央のまま番号だけを下に置く**（2026-08-12 実射FBで再是正）。
       初版は「下の段を全項目に空ける」ことで文字の高さを揃えていたが、**空けた段のぶん
       WEB予約のラベルまで上へ持ち上がる**ので、結局そこが「上に寄って見える」原因だった。
       ★**揃えたいなら、動かすのではなく動かさないほうが早い**——両方を中央に置けば
       それだけで揃う（ズレ 0）うえ、WEB予約の上下は対称のまま（実測 19.4 / 19.4px）。
       番号は**絶対配置なのでレイアウトに参加しない**＝中央配置を1pxも崩さずに下へ置ける。
     ★★**下端の余白は 0.25rem**：ラベルと番号の**箱が重ならない最大値**（実測・375px）。
       | 下端 | ラベル下端 36.6 に対する番号上端 | |
       |---|---|---|
       | 0.6rem | 31.8 | **4.8px 重なる**（文字どうしが接触） |
       | 0.4rem | 35.0 | 1.6px 重なる（箱が触れる） |
       | **0.25rem** | **37.4** | **0.8px 空く（採用）** |
       | 0.12rem | 39.5 | 2.9px 空くが底に 1.9px まで寄る |
     ★★**縦積みと併用するときだけ器を1行ぶん広げる**：縦積みは icon＋label で既に2行あり、
       64px では番号がラベルに **5.5px 食い込む**（実測）。ここだけ 76px にすると
       中央配置のまま番号が収まり（余り 0.3px）、**WEB予約の上下も対称のまま**（18.9 / 18.9px）。
       ★どちらも `body` に付く同詳細度 (0,1,1) なので、組合せは**明示して**書く。 */
  body.mbaritem-stack.mbarnum-under { --mcta-h: 76px; }
  body.mbarnum-under .mobile-cta__num {
    display: block;
    position: absolute;
    inset: auto 0 0.25rem 0;
    text-align: center;
    /* ★情報を運ぶ文字なので可読の下限を割らない（装飾の英字アイブロウとは扱いが違う） */
    font-size: max(var(--fs-min), 0.76rem);
    font-weight: 400;
    opacity: 0.85;
  }

  /* ── main＝「電話する」の代わりに番号を出す（1行のまま）─────────────
     ★★アイコンが既に「電話」を伝えているので、「電話する」の文字は情報としてほぼ重複する。
       そこを番号に置き換えると**同じ面積で情報量が増え**、行数が変わらないので
       上下の余白は左右対称のまま・高さも 56px のまま。読み上げは `tel:` リンク＋番号で通る。
     ★番号はラベルの位置に入るので**太字のまま**（項目の `--w-ui` を継承）。
     ★サイズは 0.82rem＝13.1px：ラベルと同じ 14.4px にすると 12桁で 82px になり、
       いちばん狭い組合せ（独立ボタン × 3項目 ＝ 109px）でアイコンと合わせて折り返す。 */
  body.mbarnum-main .mobile-cta__item--tel .mobile-cta__label { display: none; }
  body.mbarnum-main .mobile-cta__num { display: block; font-size: max(var(--fs-min), 0.82rem); }

  /* ★本文の末尾がバーに隠れないよう、バーが占める高さぶんを逃がす（フッターの最終行・
     「ページ上部へ」等が押せなくなるのを防ぐ）。**描かれるときだけ**なので companion で掛ける。
     ★占有＝当たり＋下端オフセット＋内側セーフエリア。構えが変わっても式は1つのまま。 */
  body.mcta-on { padding-bottom: calc(var(--mcta-h) + var(--mcta-lift) + var(--mcta-safe)); }

  /* ★ヘッダーからは電話・予約を下ろす＝**同じCTAを2か所に出さない**。
     2か所に出すと、狭幅の取り合いは元のままで、バーは「増えただけ」になる。 */
  body.mcta-on .site-topbar,
  body.mcta-on .site-header__cta { display: none; }
}

/* 印刷にはバーを出さない（画面に固定する部品＝紙の上では意味を持たない） */
@media print { .mobile-cta { display: none !important; } }

/* ━━ スマホのヘッダー追従（軸 header_scroll = hide・2026-08-12）━━━━━━━━━━
   ★★上下を固定要素で挟んでいる（実測 375px：ヘッダー 66.4 ＋ CTAバー 56 ＝ **122px**＝
     812px 端末の 15.0%／iPhone SE 667px では **18.3%**）。読んでいる間だけ上を畳んで画面を返す。
   ★★★**形状で除外しない**（2026-08-12 実射FB「効いていない」で是正）。初版は
     「縦型（サイドバー）は横帯ではないので畳めない」として `:not(.header-sidebar)` で外していたが、
     **この節はまるごと ≤900px の中にあり、そこでは6形状すべてが横帯になる**
     （実測 375px・サイドバー形状＝375×66.4px・`position: sticky`・`flex-direction: row`）。
     ＝除外は**デスクトップの姿を見て書いた条件**で、狭幅では一度も必要にならないどころか、
     サイドバーを選んでいるサイトで**軸そのものが無反応になる**原因だった。
     ★★教訓：**メディアクエリの中で「形状ごとの例外」を書くときは、その幅での姿を実測してから。**
       形状名はデスクトップの見た目に由来するので、狭幅では意味が変わっていることがある。
   ★★**ドロワーを開いている間は隠さない**（`:not(.nav-open)`）＝メニューごと画面外へ出てしまう。
   ★戻すのは上スクロールで即座（JS 側）。畳んでいる間もヘッダーは DOM に残るので、
     読み上げ・タブ順は変わらない。 */
@media (max-width: 900px) {
  body.hscroll-hide .site-header {
    transition: transform .25s ease;
  }
  body.hscroll-hide.hdr-hidden:not(.nav-open) .site-header {
    transform: translateY(-100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.hscroll-hide .site-header { transition: none !important; }
}

/* ━━ 「トップへ戻る」（軸 mobile_totop = on・2026-08-12／★2026-08-22 PCへ拡張）━━━━━
   ★★★**縦位置は「本文の逃げ余白」と同じ式で決める**：右下は固定CTAバーと同じ場所なので、
     素直に置くと重なる。`--mcta-h` + `--mcta-lift` + `--mcta-safe` を再利用すれば、
     構え（等分/浮き/独立ボタン）・番号の有無・縦積みでバーの高さが変わっても**自動で追従**し、
     バーが描かれないとき（companion `mcta-on` が付かない）は通常位置に落ちる。
     ＝**同じ寸法を2か所で計算しない**（寸法をトークンに集約した前提工事がここで効く）。
   ★★**常時は出さない**：常時表示だと右下が永久に塞がる。1画面ぶんスクロールしてから
     `is-visible` を付ける（main.js）。**JSが動かない環境では出ない**＝先頭にいるのに
     ボタンだけ浮いている状態を作らない（安全側）。
   ★当たりは `--tap-min`。★接地しないので角丸・影は持たせてよい（浮いている部品）。

   ★★2026-08-22（実射FB「PCの場合もTOPへ戻るボタンを実装してほしい」）：
     見た目一式を `@media (max-width: 900px)` の外へ出し、**全幅で出す**ようにした。
     JS（main.js の initToTop）は元から幅で分岐していないので**変更なし**——
     「出るかどうか」はCSSだけが決めていた。
   ★★★**バーのぶん持ち上げる規則だけは ≤900px に残す**：companion `mcta-on` は
     「項目が描かれるか」で付くので **PCでも body に付いている**（実測 985px で mcta-on）。
     固定CTAバー自体は ≤900px にしか無いので、幅で括らずに持ち上げると
     **PCで存在しないバーのぶん（56px）だけ浮く**。
     ＝**companion は「その部品が出る条件」であって「その部品が見えている条件」ではない。**
   ★隅からの距離は右も下も `--gutter`（同じ角の内側なので同じ値）。旧実装の下 0.9rem は
     右（PCで 40px）と揃わず、角の内側が斜めに見えていた。 */
.to-top { display: none; }

body.mtop-on .to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: var(--gutter);
  /* バーが出ていないときの位置（セーフエリアぶんだけ上げる） */
  bottom: calc(var(--mcta-safe) + var(--gutter));
  /* ★バー(90)より下・ヘッダー(100)より下。バーの上に乗ることはないが、
     ドロワーが開いたときに最後の項目を覆わないよう低く保つ。 */
  z-index: 80;
  width: var(--tap-min, 44px);
  height: var(--tap-min, 44px);
  box-sizing: border-box;
  padding: 0;
  /* ★枠線は持たない＝**境界は影が担う**（CTAバーで枠線を全廃したのと同じ判断）。
     浮いている部品なので、線を足すと輪郭が二重になる。 */
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--white, #fff);
  color: var(--cta-tel-c);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--wp--preset--color--text-main) 16%, transparent);
  cursor: pointer;
  /* 出ていない状態＝押せない・見えない（display は切り替えない＝出入りをなめらかに） */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
body.mtop-on .to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
/* 矢印は CSS だけで描く（アイコンを1つ増やさない）＝上向きの山形 */
body.mtop-on .to-top__icon {
  display: block;
  width: 10px; height: 10px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg) translate(1px, 1px);
}
/* ★マウスがある環境だけホバーの手応えを出す（タッチでは hover が張り付く） */
@media (hover: hover) {
  body.mtop-on .to-top:hover {
    background: var(--wp--preset--color--primary, #fff);
    color: #fff;
  }
}
/* ★バーが実際に描かれているときだけバーのぶん持ち上げる（バーは ≤900px にしか無い） */
@media (max-width: 900px) {
  body.mtop-on.mcta-on .to-top {
    bottom: calc(var(--mcta-h) + var(--mcta-lift) + var(--mcta-safe) + var(--gutter));
  }
}
/* 動きを減らす設定では出入りのアニメーションをしない（装飾なので停止手段はOS設定に一本化） */
@media (prefers-reduced-motion: reduce) { .to-top { transition: none !important; } }
@media print { .to-top { display: none !important; } }

/* ── サイドバー（縦型ヘッダー）の寄せ ──────────────
   右寄せ（align-items:flex-end）は「横型ヘッダーの右端に置く」都合なので、縦パネルには持ち込まない。
   詳細度 0,3,0 で stack の 0,2,1 に勝たせる。
   ※ panel は clinic_header_cta_normalize() が stack へ丸めるのでここには来ない。

   ★★`align-items` を1つの宣言にまとめないこと（2026-08-19）：
   `.site-topbar` は**縦積み**＝align-items は**横方向**、`.site-topbar__tel` は**横並び**＝**縦方向**
   （アイコンと数字の高さ合わせ）。**同じプロパティ名で意味が違う**ので、`:is()` でまとめると
   片方を直したときにもう片方が壊れる（左寄せにしたつもりで電話アイコンが数字に対して上下へずれる）。 */
.header-sidebar .site-header__actions .site-topbar__tel { align-items: center; } /* 縦＝アイコンと数字の高さ合わせ */
.header-sidebar .site-header__actions .site-topbar { flex-direction: column; align-items: center; }
.header-sidebar .site-header__actions .site-topbar__address { text-align: center; max-width: none; }

/* ★★固定サイドバーでは**パネル自身の軸（左）**に揃える（2026-08-19 実射FB
   「郵便番号等が中央寄せなのは妥当か」）。
   ロゴ・キャッチ・メニューは左揃えなのに区切り線から下だけ中央で、**264pxの列に揃えの軸が2本**あった。
   ★短い〒行が長い住所行の上に中央で乗ると、せっかく〒で作った「意味の区切り」が**飾りに見える**。
     住所は読むものではなく参照するものなので、頭を揃えて上から下へ追えるほうが速い。
   ★★旧実装の経緯＝「右寄せ（横型の都合）をやめる」→中央、で**第3の選択肢＝左が検討されていなかった**。
     消去法で決まった値は、選ばなかった選択肢がそもそも挙がっていないことがある。
   ※ ドロワー（≤1100）は横並びの別レイアウトなので対象外（上の中央寄せのまま）。
   ※ ボタンは全幅（display:block）なので揃えの影響を受けない。ラベルの中央寄せはそのまま。 */
@media (min-width: 1101px) {
  .header-sidebar .site-header__actions .site-topbar { align-items: flex-start; }
  .header-sidebar .site-header__actions .site-topbar__address { text-align: left; }

  /* ★★縦罫と、その相方の左パディングを外す（2026-08-19 実射FB「ボタンの左の縦線は不要」）。
     どちらも `hcta-stack` の**横並び**（電話ブロック｜罫｜ボタン）のための宣言で、
     固定サイドバーは電話とボタンが**縦に積む**ので意味を持たない：
       ・縦罫 … 区切るべき「隣」が居ない。ボタンの左に線だけが残る
       ・padding-inline-start … 罫のための逃げ幅なので、全幅ボタンだけが右へずれて左端の軸から外れる
     ★★**「型」の宣言が、形状を変えても付いてきてしまう**例。`panel` は
       clinic_header_cta_normalize() が stack へ丸めるので、サイドバーは必ずこの型に来る。
     ※ ドロワー（≤1100）では電話とボタンが横に並ぶので、縦罫はそのまま有効。
     ★★打ち消しは **`body.` を付けて**同じ詳細度に揃えること：打ち消す相手が
       `body.hcta-stack …`（0,2,1／::before は 0,3,2）なので、`.header-sidebar …`（0,2,0／0,3,1）では
       **後に書いても負ける**（要素セレクタ `body` の1点ぶん足りない）。実測で気づいた。 */
  body.header-sidebar .site-header__cta { padding-inline-start: 0; }
  body.header-sidebar .site-topbar + .site-header__cta::before { content: none; }
}
/* ★受付時間の表示可否は型（inline は非表示）に委ねる＝ここで display を触らないこと。
   触ると 0,3,0 が body.hcta-inline（0,2,0）に勝ち、横並び型でも受付時間が出てしまう。 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   キットCSSから移設した共通構造（2026-07-29・キット全廃）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ★ここにある指定は kit-soft.css（一部 kit-trust.css）にしか存在せず、
     normal / pop / elegant を選ぶと**素のまま出ていた**箇所。
     つまりキット間の見た目の差の一部は「デザインの違い」ではなく
     **単に実装されていなかった**だけだった。全キット共通としてここへ集約する。
   ★特に .hero__catch / .hero__sub は base.css に本体の指定が無く（変種別のみ）、
     soft 以外ではキャッチコピーがブラウザ既定サイズで出ていた。 */

/* ── サイトヘッダーの質感（半透明白＋ぼかし） ── */
/* ★★★影は**スクロールしてから**出す（2026-08-30 実射FB）。
   実射FB「上にドックしたカードの上でボックスシャドウがくすんで見える。スクロールしていないときは
   影が無いほうが良い。一方スクロールすると白背景ページとの境界が分かりづらいので影があったほうが良い」。

   ★**影の仕事は「下を通る任意のコンテンツからヘッダーを分けること」**。ページ最上部で下にあるのは
     必ずヒーロー（下層ページはタイトル帯）＝**それ自体が面なので境界を自分で作る**。
     つまり最上部では影に仕事が無く、**副作用だけが残る**。
   ★副作用の出方＝**白い面の上でだけ汚れに見える**。写真ヒーローでは見えないので長く気づかれなかったが、
     カードを上端にドックすると白い面がヘッダーの真下に来て、上端に灰色の帯として出る。
     ＝「見えていなかったのは下地が写真だっただけ」で、宣言はずっと間違っていた。
   ★前例：統一フィールド（`hero-framed-field`）は既に「スクロール後だけ影」にしてある。同じ規則に合流させる。

   ★★**トークン経由で出す**（`box-shadow` を直接切り替えない）：1段ヘッダー（統合・浮きバー）は
     ぼかしではなく**1pxの罫線**（`0 1px 0`）を自分で宣言しており、`.is-scrolled` を直接書くと
     詳細度が並んで**後勝ちでそちらを消してしまう**。器の既定値を `none` にして、
     スクロール時に値を差し込む形なら、自分で影を宣言している形状には**触れない**。 */
.site-header {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--hdr-shadow, none);
}
.site-header.is-scrolled {
  --hdr-shadow: 0 2px 12px color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
}
/* ★★★上の前提「最上部で下にあるのは必ず面（ヒーロー／タイトル帯）」は、2026-08-31 に
     実測したとき `templates/index.html`（404・検索結果・カテゴリー等）だけが反例だった。
   一度は `body:is(.error404, .search) .site-header:not(.is-scrolled) { --hdr-shadow: … }` で
   **宣言で塞いだ**が、**前提のほうを真にする**（index.html にもタイトル帯を出す）ほうへ直したので、
   この例外は**撤去した**——例外は「まだ直していない」という印であって、設計ではない。
   ★同時に、404・検索結果に `<h1>` が無かったこと／本文が左端に貼り付いていたことも直っている
     （詳細は `inc/page-hero.php` の `clinic_index_hero`）。 */
.site-header__symbol img { border-radius: 50%; }
.site-header__nav a { border-radius: var(--r-field); }
.site-header__nav a:hover {
  color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--primary-light);
}

/* ── ヒーローのリード（キャッチ・サブ・ボタン）＝全変種の土台 ── */
.section-hero.hero--color {
  background: linear-gradient(135deg, var(--wp--preset--color--bg-soft) 0%, #ffffff 70%);
}
/* ★★★器はこの1つだけ（2026-08-31）。コラージュ・カードの `.hero__inner--*` は
   **同じ4行（max-width / width / margin / padding）を書き写していた**が、この規則のほうが
   ファイルの後ろにあり詳細度も同じ (0,1,0) なので、変種側の宣言は**後勝ちで黙って負けていた**
   ＝`calc(… * var(--space-scale, 1))` と書いてあった余白の軸追従は最初から効いていなかった
   （実測：合成要素に `--space-scale: 3` を与えても padding は 48px のまま）。
   → 変種側からは幾何の宣言を落とし、差分（display / gap）だけを持たせた。 */
.hero__inner {
  /* 左右のガター＝ここ1か所。max-width の打ち消しと padding が同じ式を読む（式を散らさない）。 */
  --hero-gutter: clamp(1rem, 4vw, 2.5rem);
  position: relative; z-index: 2;
  /* ★★★box-sizing を明示する（このテーマは content-box が既定）。
     指定しないと `width: 100%` の**内容幅**に左右padding が上乗せされ、器（額・セクション）から
     **2×ガターぶんはみ出す**（実測 375px：親343px に対し 375px＝右へ32px）。
     はみ出しは親の `overflow: hidden` に飲まれるので**横スクロールにはならず**、代わりに
     **右の余白だけが消えて文字が縁で切れる**——左は正しく空くので「片側だけ詰まっている」に見える、
     気づきにくい壊れ方になる。同じ原因の前例＝`.site-header__bar`（§1段レイアウト）。
     ★max-width はガター2つぶんを足して打ち消す：wide-size は「**本文の幅**」の意味なので、
     border-box にしたぶんを足さないと PC で中身が 2×ガター 狭くなる（実測 1440px：1240→1160px）。
     足しておけば PC は従来どおり中身 1240px のまま、スマホのはみ出しだけが消える。
     ★`--hero-spread`＝変種が器を広げたいときに渡す片側の量（既定 0）。器の幾何はここ1か所のまま、
       変種はトークンだけを渡す（いま使うのはコラージュの左右散らしだけ＝§コラージュ「広い画面では外へ散らす」）。 */
  box-sizing: border-box;
  max-width: calc(var(--wp--style--global--wide-size, 1200px) + var(--hero-gutter) * 2 + var(--hero-spread, 0px) * 2);
  width: 100%; margin: 0 auto;
  padding: var(--wp--preset--spacing--80, 4rem) var(--hero-gutter);
}
.hero__label {
  display: inline-block; font-size: 0.8rem; font-weight: var(--w-ui, 700);
  padding: 0.3em 1em; border-radius: var(--r-chip);
  background: var(--wp--preset--color--primary-light);
  color: var(--wp--preset--color--primary);
}
.hero__catch { --catch-fs-min: 2rem; --catch-fs: clamp(var(--catch-fs-min), 4.5vw, 3rem); font-size: var(--catch-fs); font-weight: var(--w-head, 700); line-height: 1.3; margin: 0.4em 0 0.3em; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
/* ★★キャッチも文節の切れ目でだけ折り返す（2026-10-16・公開デモの実射「…いちばん近くで支えた／い」「地域の皆さまの健康／を」）。
   切れ目は PHP が <wbr> で入れる（`clinic_hero_catch_html()`＝サブと同じ `clinic_text_phrase_cuts()`）。keep-all・anywhere・balance の役もサブと同じ。
   ★まず下の §キャッチを枠に合わせる で「院が改行した行が1行に入る大きさ」まで縮め、下限で入らないときだけここが効く
   （スマホ・長い行）＝割れても「いちばん近くで／支えたい」の形になる。 */
/* ━━ ★★★キャッチを枠に合わせる（2026-09-22・テンプレ 03 の実射「1280px で『かかりつけ医とし／て』と折り返す」）━━
   大きさは画面幅（4.5vw）で決めていたが、**入る幅は画面幅では決まらない**。
   実測（1280px・t03＝左サイドバー＋診療時間とお知らせを右に重ねる）：
     ヒーロー 969px（サイドバー 296px のぶん狭い）− カード 462 − 間隔 51 − 左の寄せ 40 ＝ **枠 416px**
     2行目「かかりつけ医として」＝強調6文字×1.1em＋3文字＝9.6em × 48px ＝ **461px** → 「て」だけが3行目へ落ちる。
     崩れる帯は 1101〜約1325px（枠が 279〜461px）。1366px 以上は入っていた。
   ★★サイドバーだけの話ではない：額装（t05）は 1000px で枠が 415px しかなく、同じ見本が**4行**に崩れていた
     （修正後は 38.8px の2行）。カードを横に重ねる構成は、サイドバーが無くても狭い PC 幅で同じ形になる。
   → **院が改行した行（いちばん長い行）が枠に入る大きさ**を上限に足す。
     行の幅（em）は PHP が h1 に注入する（`--catch-em`＝`clinic_hero_catch_em()`。CSS は文字数を知り得ない）。
     枠の幅は `.hero__lead` をコンテナにして `100cqi` で読む＝**代理（画面幅）ではなく条件そのもの**で決める。
   ★縮めるだけで大きくはしない（上限は従来の式のまま）＝入っていた構成は1pxも動かない。
     下限も従来どおり 2rem（それより狭い枠＝1101〜約1186px のサイドバー構成では折り返しが残る。
     そこは枠 269〜309px にカードを並べていること自体が窮屈＝直すならカードを下へ回す話）。
   ★コンテナにするのは PC（901px〜）のスライドショーと額装で、**枠の幅が中身に依存しない**ところだけ：
     ・`container-type: inline-size` は「中身から幅を決める」箱（fit-content・余白 auto の flex の子）を**幅0に潰す**。
       PC のこの2構成では枠は「伸びる flex の子」か「ブロック」なので潰れない
       （実測：t02・t04・t05・t07 を 1000／1280／1440px で、コンテナ指定の有無で枠の幅が1pxも変わらない）。
     ・縦書き（catch-vertical）は枠が fit-content＝除外。スマホ（〜900px）は枠が余白 auto の flex の子＝除外。
     ・カードとコラージュは枠の決まり方が別（カードやコラージュの格子）＝ここでは触らない。
   ★`--catch-em` が無いとき（注入の無い描画経路）は 0.01 に落ちて割り算が巨大になる＝従来の式がそのまま勝つ。 */
@media (min-width: 901px) {
  .section-hero:is(.hero--photo, .hero--color):not(.catch-vertical) .hero__lead { container-type: inline-size; }
  .section-hero:is(.hero--photo, .hero--color):not(.catch-vertical) .hero__catch {
    font-size: max(var(--catch-fs-min), min(var(--catch-fs), calc((100cqi - 2px) / var(--catch-em, 0.01))));
  }
}
/* ★★カード（t08）にも同じ枠合わせ（2026-10-16・公開デモの実射「1440px で『…いちばん近くで支えた／い』」）。
   実測（t08・丸ゴシック）：文字の列 517px に 48px × 11字＝528px → 「い」だけが次の行へ。1000px では 376px に 45px で4行に崩れていた。
   ★文字の列（`.hero__card-text`）は flex-basis 44%（PC）／縦積みで全幅（〜959px）＝**幅が中身に依存しない**のでコンテナにしてよい
   （上の注記の条件。PC・スマホとも、コンテナ指定の有無で列の幅は1pxも変わらない）。 */
.section-hero.hero--card .hero__card-text { container-type: inline-size; }
.section-hero.hero--card .hero__catch {
  font-size: max(var(--catch-fs-min), min(var(--catch-fs), calc((100cqi - 2px) / var(--catch-em, 0.01))));
}
/* ★★サブは文節の切れ目でだけ折り返す（2026-10-15 実射「…ご一緒／します。」）。
   切れ目は PHP が <wbr> で入れる（`clinic_text_phrase_html()`＝どのブラウザでも同じ。auto-phrase は Chrome / Edge だけ）。
   ・keep-all＝<wbr> と句読点の後ろ以外の和文の間では割らない
   ・anywhere＝1行に入らない長い文節だけは端で割る（はみ出さない・最小幅も従来どおり）
   ・balance＝切れ目の中から行の長さがそろう所を選ぶ（「…ために。／治療の…」。詰め込むと「…まで／ご一緒します。」） */
.hero__sub {
  font-size: var(--wp--preset--font-size--md, 1.125rem); color: var(--wp--preset--color--text-muted); margin: 0; max-width: 36em;
  word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance;
}
.hero__buttons { display: flex; gap: 1rem; margin-top: 1.6rem; flex-wrap: wrap; }
/* 写真モード＝文字は白（暗幕の上）。ハローは §写真ヒーローの文字 が担当 */
.hero--photo .hero__label { background: rgba(255,255,255,0.2); color: #fff; }
.hero--photo .hero__catch { color: #fff; }
.hero--photo .hero__sub { color: rgba(255,255,255,0.92); }
.hero--photo .cta-btn--outline { border-color: #fff !important; color: #fff !important; }
.hero--photo .cta-btn--outline:hover { background: rgba(255,255,255,0.15) !important; }

/* ── フッター（寸法・クリニック情報・メニュー） ── */
.site-footer__inner {
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.site-footer__copyright { max-width: 100%; }
.site-footer__copy { color: var(--footer-ink-faint); font-size: var(--wp--preset--font-size--xs, 0.75rem); margin: 0; }
.site-footer__info { font-size: 0.875rem; line-height: 1.9; }
/* ★この規則は .site-footer__col p（0,1,1）と同詳細度で後にあるため、情報カラムの本文では
   こちらが勝つ（.site-footer__name の color も同じ理由で既に効いていない）。
   トークン化にあたっては現行の見え方をそのまま保つ＝別トークン --footer-ink-info を割り当てる。 */
.site-footer__info p { margin: 0 0 0.2em; color: var(--footer-ink-info); }
.site-footer__info a { color: var(--footer-ink-body); text-decoration: none; }
.site-footer__name { margin-bottom: 0.5em; }
.site-footer__hours { font-size: 0.82rem; }
.site-footer__nav .footer-menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.6rem;
}
/* ※このフッターメニュー（inc/pages-admin.php が出力）は現在のフッター構成では未使用だが、
   トーン軸を足したときに取り残されると「白文字のまま薄い地に乗る」ので一緒にトークン化する。
   ★リンクの不透明度は 0.8 → 0.85（--footer-ink-body）に揃えた＝役割が `.site-footer__col a` と
   同じ「フッターのリンク」なので、偶発的にずれていた値を正す（未描画のため現状の見た目に影響なし）。 */
.site-footer__nav .footer-menu a { color: var(--footer-ink-body); text-decoration: none; font-size: 0.9rem; }
.site-footer__nav .footer-menu a:hover { color: var(--footer-ink); }

/* ── 固定ページ本文（page-content）のタイポグラフィ ── */
/* ★2026-08-31：タイトル帯は clinic_page_hero() が描くようになったので、見出しは
   `.dept-hero__title`（同じ 3xl）が持つ。ここにあった `.wp-block-post-title` への指定は
   **描かれない要素への宣言**になったので削除した。 */
.content-page__body { line-height: 1.9; }
.content-page__body h2 {
  font-size: var(--wp--preset--font-size--xl, 1.5rem);
  border-left: 5px solid var(--wp--preset--color--primary);
  padding-left: 0.6em;
  margin: 2em 0 0.7em;
}
.content-page__body h3 { font-size: var(--wp--preset--font-size--lg, 1.25rem); margin: 1.6em 0 0.5em; }
.content-page__body p { margin: 0 0 1.2em; }
.content-page__body ul, .content-page__body ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.content-page__body li { margin-bottom: 0.4em; }
.content-page__body img { max-width: 100%; height: auto; border-radius: var(--r-media); }
.content-page__body blockquote {
  border-left: 4px solid var(--rule);
  margin: 1.5em 0; padding: 0.5em 1.2em; color: var(--wp--preset--color--text-muted);
}
.content-page__body table { font-size: 0.95rem; }
.content-page__body a { color: var(--wp--preset--color--primary); }

/* ── 診療案内 一覧ページ：等幅3列・最終行中央・カード内中央寄せ ── */
.departments__grid--list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--wp--preset--spacing--50, 1.5rem);
  margin-top: var(--wp--preset--spacing--70, 2rem);
}
.departments__grid--list .departments__card { flex: 0 0 calc((100% - 2 * 1.5rem) / 3); }
.departments__grid--list .departments__card-inner { align-items: center; text-align: center; }
.departments__grid--list .departments__icon { margin: 0 auto 0.7rem; }
/* ★一覧の型の見出しの大きさもここが持つ（旧＝LPが inline で `font-size: lg` を書いていた）。
   トップのカードは `.departments__card-head h3` の `--dept-title-fs`＋tstep で自動縮小するが、
   `--list` は3列固定で幅が読めるので段階的な縮小は要らない＝**型ごとに事情が違う**。 */
.departments__grid--list .departments__card-inner > h3 { text-align: center; font-size: var(--wp--preset--font-size--lg); }
.departments__grid--list .departments__card-inner > h3::after {
  content: ""; display: block; width: 28px; height: 3px;
  margin: 0.4rem auto 0; border-radius: 2px;
  background: var(--wp--preset--color--accent);
}
.departments__grid--list .departments__desc {
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--sm);
}

/* ━━ スマホのヒーロー（≤900px）＝写真の枠を「PCの割合」から切り離す（2026-08-17 実射FB）━━━━
   ★★実測（375×812・元画像1448×900）：PCは枠1265×810で**元画像の97%**が見えるのに、
     スマホは枠375×731＝**幅の32%しか見えない**。`cover` は枠の縦横比で切り取るので、
     画面が縦長なスマホに「画面の76〜88%」というPCの値をそのまま当てると枠が縦長になりすぎる。
   → スマホは px で頭打ちにする（`min(72vh, 560px)`＝実測560px・**見える幅42%**）。
   ★`svh` ではなく `vh` を使う理由：custom property に入れた `svh` は非対応時に
     「前の宣言に戻る」フォールバックが効かない（パース時ではなく**置換時**に無効になるため
     プロパティが unset に落ちる）。px の上限が実質の頭打ちなので vh/svh の差は結果に出ない。

   ── 埋め込み（ドック）があるとき ──
   ★★**スマホは元からドックではない**（≤900px では絶対配置をやめ、フィレットも面も無効にして
     在来フローに積むだけ）。にもかかわらずカードがヒーローの**内側**に積まれるため、
     写真の枠が 731→**1162px** まで伸びて見える幅が**20%**に落ち、しかもその**65%はカードの下敷き**
     になっていた（実測）。＝「置き場所を変える」だけのはずの埋め込みが、写真の見え方まで変えていた。
   → **写真の領域とカードの領域を分ける**：写真は在来フローの1ブロックとして高さを持ち、
     キャッチは負マージンで写真の上へ戻す（＝キャッチ枠と写真が**マジックナンバー無しで一致**する。
     `.hero__inner` の padding-top はヘッダー形状ごとに 0／inset／inset+余白 と3通りあり、
     写真の高さと突き合わせると必ずズレるので、**逃げはキャッチの内側に一本化**する）。
     カードは写真の直下に**全幅の帯として接地**＝デスクトップの「端に彫り込む」に対応する
     モバイルの表現（ドックをやめるのではなく、成立する形に翻訳する）。
   ★実測（改修後・375×812）：見える幅 20%→**46%**／写真がカードで隠れる量 758px→**0**／
     ヒーロー全高 1162→**1097px**／最初のカードの上端 563px（＝折り返し位置の内側）／
     埋め込み内の診療時間表 309→**341px**（午後の受付が1行に収まる）／横スクロールなし。 */
@media (max-width: 900px) {
  .section-hero:is(.hero--photo, .hero--color) {
    --hero-mob-photo: min(72vh, 560px);
    min-height: calc(var(--hero-mob-photo) + var(--hero-header-inset, 0px));
  }
  /* ドック時はさらに短く＝最初のカードが折り返し位置の内側に顔を出す（スクロールの手がかり） */
  .section-hero.has-hero-embed.hero--photo { --hero-mob-photo: min(62vh, 520px); }

  /* 写真＝在来フローの1ブロック。キャッチは負マージンで写真の上へ戻す。
     ※ スロットを在来フローへ落とす指定そのものは §モバイル：絶対配置をやめ〜 が持つ（ここでは重ねない）。
     ※ 額装（framed）は対象外＝写真が「マットの上のカード」でジオメトリが別物（マットの中央寄せを
        display:block で壊さないため `:not(.hero--framed)`）。額装のモバイルは従来どおり。 */
  /* ★★写真とキャッチは**同じセル**に置く（2026-08-17 実射FB「横向きにすると崩れる」）。
     旧実装は「写真＝在来フローで `--hero-mob-photo` の高さ／キャッチ＝負マージンで上に戻す」だったが、
     **写真の高さは vh（画面の高さ）・キャッチの高さは文字（＝画面の幅に連動）**で決まるため、
     横向き（幅が広い＝文字が大きい／高さが低い）では**両者が逆に動いて**キャッチが写真から溢れる。
     実測（812×375）：写真 233px に対しキャッチの塊 **364px＝132pxはみ出し**——
     サブコピーとボタンが写真の外（白地）に出て「崩れて見える」の正体。
   → `.section-hero` をグリッドにし、**写真・暗幕・キャッチを 1行目の同じセル**へ置く。
     行の高さ＝`max(--hero-mob-photo, キャッチの実高)` になり、**写真が常にキャッチを覆う**。
     カードは2行目以降へ自動配置。負マージンという「高さを二重に管理する仕組み」も消える。
   ★`.hero__inner` は `display: contents` で**箱を透過**させる（グリッドの子をキャッチとカードにする）。
     箱が消えるぶん、左右のガターは `.hero__lead` が、下の余白はセクションが持つ。 */
  /* ━━ ★★★共通の規則を1つに畳んだ（2026-08-31 実射FB②）━━
     前日に額装をこの構成へ合流させたとき、**共通部分を丸ごと書き写した**。その翌日には早くも差が出た——
     1枚目の上角を落とす指定が、額装は `:first-child` 付き／スライドショーは**無し**だったため、
     スライドショーだけ**2枚目（お知らせ）の上角まで角なし**になっていた
     （実測：スライドショー `0 0 12 12` / `0 0 12 12`、額装 `0 0 12 12` / `12 12 0 0`）。
     ★2枚目の上端は**14pxの隙間の下**にあり、何にも接していない＝規則（下記）では丸めるのが正しい。
     ＝「同じ条件を2か所に書くと必ずズレる」（§デザイン画面の情報設計）の実例。**1日でズレた。**
     → 違うのは**「どちらをグリッドにするか」と「下端の始末」だけ**。そこだけ分ける。 */

  /* ── 共通：器を透過し、写真・暗幕・キャッチを同じセルへ。カードは全幅の帯 ── */
  .section-hero.has-hero-embed.hero--photo .hero__inner { display: contents; }
  .section-hero.has-hero-embed.hero--photo :is(.hero__bg, .hero__overlay) {
    position: relative;              /* 中のスライド（絶対配置）の基準は保つ */
    grid-area: 1 / 1;
    inset: auto;
    height: auto;
    min-height: var(--hero-mob-photo);
  }
  /* キャッチ＝写真と同じセル。**接地・間隔の担当は「隣どうし」だけ**にする
     （旧実装は `.hero__inner` の `gap` がキャッチとカードの間にも効き、
      「接している辺は角なし」の前提を壊して14px浮かせていた）。 */
  .section-hero.has-hero-embed.hero--photo .hero__lead {
    grid-area: 1 / 1;
    z-index: 1;
    min-height: var(--hero-mob-photo);
    box-sizing: border-box;
    /* ★ヘッダーの逃げはここに一本化（形状ごとに3通りある padding-top と突き合わせない）。
       額装では常に 0＝マットを負マージンで重ねないので被らない。**0 のときに何も起きない指定**なので
       共通側に置ける（＝将来ここが 0 でなくなっても、キャッチが自動で吸収する）。 */
    padding-top: var(--hero-header-inset, 0px);
    padding-inline: var(--gutter);              /* inner が display:contents なのでガターはここ */
    /* ★キャッチの中身が最低高を超えたとき（横向きなど）、**ボタンが写真の下端にぴったり接地**して
       窮屈に見える（実測 812×375：ボタンの下端＝写真の下端＝364px で余白0）。
       行の高さは中身で決まるので、ここに下余白を置けば**写真もその分だけ伸びる**。 */
    padding-bottom: var(--gutter);
    display: flex; flex-direction: column; justify-content: center;
  }
  /* ★ラベル（内科・小児科）は**中身の幅**に収める（2026-08-17 実射FB「ラベルが右に伸びている」）。
     キャッチ枠を縦フレックスにした副作用で、**子は既定で幅いっぱいに伸びる**（align-items: stretch）。
     ピル（丸い錠剤）は中身の幅で成立する部品なので、伸びると「途中で切れた帯」に見える。
     ★横位置はキャッチの位置の軸（catch-h-*）に合わせる＝`text-align` はフレックスの子の**箱**には
       効かないので、`align-self` で同じことを表す（寄せの担当を1つにする）。 */
  .section-hero.has-hero-embed.hero--photo .hero__label { align-self: flex-start; }
  .section-hero.has-hero-embed.hero--photo.catch-h-center .hero__label { align-self: center; }
  .section-hero.has-hero-embed.hero--photo.catch-h-right .hero__label { align-self: flex-end; }

  /* カード＝写真の直下に接地する全幅の帯（左右の余白を外して表の幅を稼ぐ：実測 309→341px） */
  .section-hero.has-hero-embed.hero--photo .hero__embed--slot { margin-inline: 0; }
  /* カード同士だけを離す（写真と1枚目は接地したまま） */
  .section-hero.has-hero-embed.hero--photo .hero__embed--slot + .hero__embed--slot { margin-top: 14px; }
  /* ★★継ぎ目は「接している辺は角なし／露出している辺は丸める」で作る（2026-08-17 実射FB
       「お知らせカードと診療案内の継ぎ目がなく不自然」）。**デスクトップのドックと同じ規則**＝
       壁に接する角は直角・露出する角は `--dock-r`（§ドックの継ぎ目）をモバイルへそのまま翻訳する。
     ・1枚目の**上端だけ**が写真に接地している → そこだけ角なし。
     ・それ以外の辺は露出している → `--r-card` で丸める＝面がどこで終わるかが見える。
     ★白い帯が白いセクションへ溶ける問題は「地色の差」ではなく**面の終わり方**で解く：
       地色は院ごとに変わる（次のバンドが白／淡色のどちらにもなる）ので、
       色の対比に頼ると**片方の組合せで必ず破綻する**（診療時間表の色を「乗っている面」で決めた判断と同型）。 */
  .section-hero.has-hero-embed.hero--photo .hero__embed-card { border-radius: var(--r-card); }
  /* ★1枚目＝キャッチの直後のスロットの**先頭のカード**。
     ・`:first-of-type` は同じ div の `.hero__lead` に当たるので使わない。
     ・★★`:first-child` を**落とさない**：スロットには複数のカードが入る（診療時間＋お知らせ）ので、
       子孫セレクタのままだと**そのスロットの全カード**の上角が落ち、2枚目が「隙間の下なのに角なし」になる。 */
  .section-hero.has-hero-embed.hero--photo .hero__lead + .hero__embed--slot .hero__embed-card:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  /* ── スライドショー（全幅写真）：グリッドになるのは**セクション自身** ── */
  .section-hero.has-hero-embed.hero--photo:not(.hero--framed) {
    display: grid;
    grid-template-columns: 1fr;
    /* ★写真ヒーローは flex 時代の `align-items: center` を持っている。グリッドでも効くため、
       そのままだと**写真が行の高さに伸びず中央に浮く**（実測 812×375：行364pxの中で写真233pxが上下中央）。
       同じセルに重ねる構図では**引き伸ばし**が要る。 */
    align-items: stretch;
    justify-items: stretch;
    /* 最後のカードと次のセクションを離す（地色が同じでも終わりが分かる） */
    padding-bottom: var(--gutter);
  }
  /* ★区切り波は食い込ませない：波は「写真の下端に食い込ませる」ための -1*--wave-h を持つが
     （§.wave-divider--hero-overlay）、この構成ではヒーローの下端が**写真ではなくカードの帯**に
     なるため、そのままだと波が最後のカードを 56〜120px 削る。ここでは普通の区切りとして下に置く。
     ※ 波の形・色はそのまま＝軸（wave）は生きている。変えるのは食い込みだけ。
     ※ 額装は波を出さない（`clinic_front_wave_overlay` を呼ばない）ので、この指定は片側だけでよい。 */
  .section-hero.has-hero-embed.hero--photo:not(.hero--framed) + .wave-divider--hero-overlay {
    margin-top: 0;
  }

  /* ── 額装：グリッドになるのは**額**。外形は額が持つので下端の始末だけ違う ──
     （2026-08-31 実射FB①。除外をやめた経緯は docs/variant-catalog.md §額装のスマホも…） */
  .section-hero.hero--framed.has-hero-embed.hero--photo .hero__frame {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    justify-items: stretch;
    /* ★額の `min-height: clamp(520px, 90vh, 800px)` は**写真の高さ**の指定なので、
       行（写真）が `--hero-mob-photo` で持つ。額に残すと写真＋カードの合計に効いて
       「カードを積んだぶん額が伸びる」が二重になる。 */
    min-height: 0;
  }
  /* ★額装だけの違い＝**下端は額（--frame-r）が丸める**ので、最後のカードの下角は角なしにする
     （両方が丸いと、額の丸みとカードの丸みのあいだにマットが三日月形に覗く）。
     スライドショーでは最後のカードの下は露出している（セクションの padding-bottom）ので丸めたまま。 */
  .section-hero.hero--framed.has-hero-embed.hero--photo .hero__embed--slot:last-child .hero__embed-card:last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
/* ★最狭の画面では帯の内側も詰める（2026-08-17）。受付の時刻を1つの塊にした（＝折り返さない）ぶん
   行見出しの列が 82→97px に広がり、幅320pxで表が **7px はみ出した**（実測）。
   ★詰めるのは**余白**であって字ではない（2026-08-02 に診療時間表で決めたのと同じ判断）。
   実測（320px）：表 286→298px・行見出し97＋曜日27×6＋35＝294 で収まる。 */
@media (max-width: 400px) {
  .section-hero.has-hero-embed.hero--photo .hero__embed-card {
    padding-inline: 10px;
  }
}

/* ── レスポンシブ：モバイルドロワー／ハンバーガー変形 ── */
@media (max-width: 900px) {
  /* ★★★**`relative` ではなく `sticky`**（2026-08-12 実射FBの調査で発覚）。
     ここが `position: relative` だったため、**スマホで追従しない形状が2つあった**——
     実測（375px・scrollY 1500）：帯分離 fixed ○／上部中央 fixed ○／フローティング fixed ○／
     左サイドバー sticky ○ に対し、**統合（1段）と右サイドバーは relative で画面外へ流れていた**
     （top −1500）。他の形状は自前で `fixed`/`sticky` を当てているので生き残っており、
     **自前指定を持たない2形状だけが取り残されていた**。
     2026-07-30 に「追従を全形状でそろえた」としたのは、この2つを見落としている。
     ★`relative` にしていた目的は**ドロワーの含みブロックを作ること**（`.site-header__drawer` が
       `position: absolute; top: 100%`）。`sticky` も positioned element なので**目的は保たれる**。
     ★★教訓：**同じ役割の実装が形状ごとに分かれていると、「共通側」を触ったときに
       自前指定を持つものだけが生き残り、持たないものが黙って取り残される。** */
  .site-header { position: sticky; top: var(--admin-bar-h); }
  .site-nav-toggle { display: flex; }
  .site-header__drawer {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0.4rem;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    padding: 1rem clamp(1rem, 4vw, 2.5rem) 1.4rem;
    max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.2s;
  }
  body.nav-open .site-header__drawer { max-height: 80vh; opacity: 1; pointer-events: auto; }
  .site-header__nav .primary-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .site-header__nav .primary-menu > li { border-bottom: 1px solid var(--rule); }
  .site-header__nav a { display: block; padding: 0.9em 0.4em; }
  body.nav-open .site-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .site-nav-toggle__bar:nth-child(2) { opacity: 0; }
  body.nav-open .site-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .departments__grid--list .departments__card { flex-basis: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 768px) {
  /* 診療時間テーブルは、入りきらないときだけ横スクロールに逃がす。
     ★★**下限 480px は撤去した**（2026-08-02）。「列が潰れて読めなくなるのを防ぐ」ための下限だったが、
       表は**自分の min-content より細くはならない**（潰れは下限が無くても起きない）。
       一方で 480px は 375px 端末で常に噛み、**金・土・日祝の3列が初期表示の外**に出ていた——
       しかもスマホにはスクロールバーが出ないので、**隠れていること自体が伝わらない**。
       クリニックのサイトで一番読まれる情報が、黙って欠けている状態だった。
       実測（375px・受付時間あり／構え3 × 記号3 × 行見出し2 ＝ 18通り）＝必要幅 **300〜330px**。
       トップ（コンテナ375px）・アクセス（343px）とも全通りが収まり、横スクロールは消える。
       ＝下限は「潰れ防止」には要らず、**隠す副作用だけ**が残っていた。
     ★★`overflow-x: auto` は残す：320px級の端末や、時間の文字列が長いサイトでは
       min-content がコンテナを超える。そこは**スクロールに逃がすのが安全側**（切り取るのではなく）。
     ※ 小さい版（--compact）は元から下限の対象外。字も余白も詰めた**狭い場所に収めるための版**で、
       実測の必要幅は 295px。そこへ大きい版の前提を持ち込むと押し広げて隣の列に重なる（2026-07-30）。 */
  .hours__table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* ★★狭幅では横の余白を詰めて、行見出し（時間＋受付）に幅を返す（2026-08-02・実射FB iPhone SE）。
     ページの左右余白（--gutter）をセクションに与えたぶん表の器が 375→343px に減り、
     **受付が「受付 8:45〜12：」/「00」と時刻の途中で割れていた**（実測 375×667）。
     時刻が途中で折り返すと読めない——`.hours__time` を nowrap にしているのと同じ理由が、
     受付の行にも当てはまる（受付も「何時まで」という時刻そのもの）。
     ★詰めるのは**余白**であって字ではない（小さい版で 2026-08-02 に決めたのと同じ判断）。
     実測（375px）：行見出し 119→142px・曜日の列 30→27px・受付 2行→**1行**・表の高さ 244→198px・
     横スクロールなし。デスクトップと小さい版（--compact）は対象外。 */
  .hours__table:not(.hours__table--compact) :is(thead th, tbody td) { padding-inline: 0.25em; }
  .hours__table:not(.hours__table--compact) tbody th { padding-inline: 0.6em; }
  .departments__grid .wp-block-column { flex-basis: calc(50% - 0.75rem) !important; }
  /* ※ 特徴の1列化はここではなく列数の上限（--feat-cols-max）で行う＝列数の決定を1か所に保つ
     （旧 `.features__cards .wp-block-column { flex-basis:100% }` は同詳細度の後勝ちで
       上の式を丸ごと無効化していたため、幅768px以下だけ別系統になっていた。2026-08-17 撤去） */
}
@media (max-width: 560px) {
  .departments__grid--list .departments__card { flex-basis: 100%; }
}
/* ★★320px 級の端末では、診療時間の表の横の余白をもう一段詰めて**器に収める**（2026-09-26）。
   実測（320px・器 288px）：トップの表 309px／フッターの小さい版 311px ＝ どちらも**日祝の列が
   初期表示の外**に出ていた（スクロールに逃げてはいるが、スマホではスクロールバーが出ないので
   隠れていること自体が伝わらない＝上の 768px の節と同じ問題）。
   ★詰めるのは余白であって字ではない（上の2つの節と同じ判断）。曜日の列は記号1字ぶんの幅なので、
   左右 0.15em でも隣の列の記号とは十分に離れる。
   ★スクロールの逃げ道（overflow-x: auto）は残す＝時間の文字列が長い院ではなお超えうる。 */
/* ★詳細度：上の 768px の節（大きい版）と小さい版の宣言はどちらも (0,2,2) なので、
   **同じ形のセレクタで書いて後ろに置く**（狭い幅ほど後ろ＝メディアクエリの通常の並び）。 */
@media (max-width: 359px) {
  .hours__table:not(.hours__table--compact) :is(thead th, tbody td),
  .hours__table--compact.hours__table :is(thead th, tbody td) { padding-inline: 0.15em; }
  .hours__table:not(.hours__table--compact) tbody th { padding-inline: 0.3em; }
  .hours__table--compact.hours__table tbody th { padding-inline: 0.2em; }
}
@media (max-width: 480px) {
  .departments__grid .wp-block-column { flex-basis: 100% !important; }

  /* ━━ 診療案内：スマホの並べ方＝タイル（索引）（2026-08-02・実射FB「1列だと長く間延びして見える」）━━
     実測（375px・4件）：1列＋説明あり＝**1289px＝ビューポート1.6画面ぶん**。
     2列にするだけで 893px（−31%）、説明を外すと **634px（−51%）**＝ほぼ1画面に収まる。
     ★★**2列でも説明を残すとカードが 262→331px と縦に伸びる**（幅178pxに5〜6行）。
       「短くはなったが読みにくい」中途半端な状態になるので、タイルでは説明を出さない。
     ★★**「2列」ではなく「タイル（索引）」という役割で持つ**：列数の選択に見せると、
       説明が消えるという副作用が名前から読み取れない（設定UIの文言も役割で書く）。
     ★★**省略が成立する条件＝続きを読む道があること**。タイルのときだけ
       「診療案内をもっと見る →」を出し、**詳細ページを持たない科目も含めて全件の説明が載っている**
       一覧ページへ必ず辿れるようにする（診療時間表の「★を出すなら説明も出す」の裏返し）。
     ★説明は `display: none`（視覚的に隠すだけ、にはしない）：カード全体がリンクなので、
       隠した長文が**リンクの読み上げ名に丸ごと入る**と、かえって使いづらくなる。
       見た目と読み上げを一致させ、情報への道は「もっと見る」で保証する。
     ※ 481〜768px は従来どおり2列＋説明あり（カードが約350px幅で成立している）。PCも不変。 */
  /* ★★セレクタは**コアに勝てる形**で書くこと。WP コアが
       `.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important }`
       を **≤781px** に当てており、`:not()` の中身も数えるので詳細度は **(0,3,0)**。
       素直に `.departments__grid--mob-tile .wp-block-column`（0,2,0）と書くと**1pxも効かない**
       （実測：flex-basis が 100% のまま＝1列。同じ理由で既存の
        `@media(max-width:768px)` の2列指定（0,2,0）も**効いていない**＝768px でも1列のまま）。
       クラス3つ（0,3,0）で同着にし、後に書くことで勝たせる。 */
  /* ★★左右の間隔は「外側の余白」と「カード間の gap」の**両方**で決まる（2026-08-02 実射FB
       「2列が外に寄りすぎ」）。旧実装は**外側0／gap20**で、外側にはカードの中央寄せの余りしか
       無かったため、中身どうしの空きが端の空きの **2.47倍**になり、左右へ散って見えていた。
     ★★**gap だけを詰めても釣り合わない**：中央には「カード2枚ぶんの中央寄せの余り」が
       既に含まれるので、gap は外側と同じ量では多すぎる。実測（375px・端/中/比）＝
       外0/gap20＝43/106/**2.47** ／ 外0/gap0＝48/96/2.00 ／ **外16/gap8＝54/84/1.56** ／
       外24/gap8＝58/76/1.31 ／ 外32/gap0＝64/64/1.00。
     → **外側はページのガター（他のセクションと同じ）／gap はその半分**を採る。
       完全な 1.00 は外側32px＋gap0 だが、gap 0 は**カードに枠や白地を選んだとき2枚がくっついて見える**
       （枠・影は顧客が選べる軸）ので取らない。外側をページのガターに合わせるほうが、
       隣のセクションとの縦のラインもそろう。
     ※ 縦の間隔（row-gap）は従来どおり＝横だけを詰める（`column-gap` のみ上書き）。 */
  /* ★2026-08-31：外側のガターは**セクションが持つ**ようになった（§ページの左右余白）ので、
     ここでは重ねない（両方が持つと 16+16＝32px になりタイルが狭くなる）。
     残すのは gap だけ＝「外側はページのガター／gap はその半分」という当時の結論のうち、
     ここが担当するのは後半だけになった。 */
  .departments__grid--mob-tile {
    column-gap: calc(var(--gutter) / 2) !important;
  }
  .departments__grid--mob-tile.wp-block-columns > .wp-block-column {
    flex-basis: calc(50% - var(--gutter) / 4) !important;
  }
  .departments__grid--mob-tile .departments__card-inner > p:not(.departments__more) { display: none; }
  /* ★★タイルの部品の大きさは「索引」という役割に合わせる（2026-08-17 実射FB「見た目が良くない」）。
     アイコンの大きさ（40〜100px）は**PCのカード幅（約350px）を前提にした値**で、タイル（168px）に
     そのまま持ち込むと支配的になる。実測（375px）：中身120pxに対しアイコンの地が**92px＝77%**。
     → タイルでは上限を掛ける（40px＝地は60px）。実測：中身144px／地62px＝**43%**・
       カード高 204→174px。**院が選んだ値が上限より小さければそのまま**なので、選択は殺さない。
     ★グリフも同じトークンから出す（0.9倍＝pattern が渡している比率と同じ）。箱だけ縮めると
       グリフ（PHPが width/height 属性で書く実寸）が取り残されて地からはみ出す。
     ※ ヒーローの写真枠と同じ判断＝**PCの値をそのままスマホに当てない**。 */
  .departments__grid--mob-tile {
    --dept-tile-ico: min(var(--dept-icon-size, 40px), 40px);
  }
  .departments__grid--mob-tile .departments__icon {
    width: var(--dept-tile-ico);
    height: var(--dept-tile-ico);
  }
  :is(.departments__grid--ico-fill, .departments__grid--ico-ring).departments__grid--mob-tile .departments__icon {
    width: calc(var(--dept-tile-ico) * 1.5);
    height: calc(var(--dept-tile-ico) * 1.5);
  }
  .departments__grid--mob-tile .departments__icon svg {
    width: calc(var(--dept-tile-ico) * 0.9);
    height: calc(var(--dept-tile-ico) * 0.9);
  }
  /* 内側の余白もタイルの寸法に合わせる（PC用の 22/24px は 168px の器では効きすぎる） */
  .departments__grid--mob-tile {
    --dept-card-pad-block: 16px;
    --dept-card-pad-inline: 12px;
  }
  /* ★★タイルでは「アイコンの横に名前」が成立しない（2026-08-17 実射FB
       「スマホ表示の左右の幅がおかしい」）。実測（320px幅）：カードの中身は **92px** しかなく、
       アイコンの地（`--dept-icon-size` 60px × 1.5＝**90px**）だけで使い切って
       **名前に残る幅が 0px** になっていた。結果、`white-space: nowrap` の錠剤が
       カードから突き抜け、**ページ全体が16px横に広がる**（症状はヘッダーの MENU や
       診療時間表の右端が切れる＝「原因の見えない横ずれ」。原因は画面の下にある診療案内）。
     → タイルでは**縦積み（アイコンの上・名前の下）に正規化**する。名前がカード幅いっぱいを
       使えるので、折り返しても1文字ずつにならない（実測：名前に使える幅 0→92px）。
     ★**位置の軸（pos-side）は保存値のまま＝丸めるだけ**（広い画面では従来どおり横並び）。
       ゲートにして選択肢を消すと、管理UIの出し分け→リーク防止→検証の連鎖が生える
       （ヘッダーCTAの `panel`→`stack`・コラージュの縦書きと同じ作法）。
     ★あわせて1行維持も解除する：縦積みでも長い名前（例「ホワイトニング」112px）は
       92pxに収まらないので、**はみ出すより2行のほうがマシ**（`--tlong` に既にある安全弁と同じ判断）。 */
  .departments__grid--mob-tile.departments__grid--pos-side .departments__card-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-inline: 8px;
  }
  .departments__grid--mob-tile.departments__grid--pos-side .departments__card-head h3 {
    white-space: normal;
  }
  /* ★タイルの「詳しく見る」は中央（2026-10-14）。タイルではアイコンと科目名がどの型でも中央に縦積みになる
     （アイコン横も上で縦積みに丸める）ので、札もその下の中央に置く。
     ★2つ目のセレクタが要る：説明は `display: none` で**隠しているだけで DOM には残る**ため、
       「説明の直後」の規則（`p:not(.departments__more) + .departments__more`＝面が見えない1列では左）が当たる。
       同じ形・同じ詳細度で後ろに書いて勝つ。1つ目はアイコン横の「左」に勝つため。 */
  .departments__grid--mob-tile .departments__more,
  .departments__grid--mob-tile .departments__card-inner > p:not(.departments__more) + .departments__more { text-align: center; }
  /* ★★1列（list）の間延び＝**面が無いのに内側の余白が効いている**（2026-08-17 実射FB
       「科目の上下のスペースが広く間延びしている」）。
     カードの面は院が選べる（`cardbg-transparent` × `frame-flat` ＝地も枠も影も無い）。
     面が無いときの内側の余白は**見えないまま場所だけ取る**ので、項目間の空きに**二重に加算**される。
     実測（375px）：項目の中身どうしの間隔 ＝ gap 20 ＋ 上下の余白 22.4×2 ＝ **64.8px**。
     セクション自身の上下余白は 44px なので、**内側の空きが器の余白を1.47倍上回る**
     ＝「ひとつの一覧」ではなく「別々のブロック」に見える
     （2026-07-21 に当院の特徴で決めた判断基準：**グループ内の項目間隔はセクション自身の余白より内側に収める**）。
   → 面が無いときは上下の余白を持たない。**間隔は行の gap 1本だけが決める**ようになり、
     面のある／無いでカード間の見え方が揃う（面があるときの余白は白地の内側に入るので二重にならない）。
   ★左右の余白は残す：本文の測度（読みやすい行長）を決めているのは横方向の余白で、
     こちらは面の有無と関係がない。
   ※ 「面が無い」の判定と指定は 2026-10-14 に下の 768px の節へ移した（白い帯の上の白いカードも面が無い）。 */
  /* 項目間はセクション自身の余白（44px）より内側に収める */
  .departments__grid--mob-list { row-gap: 28px !important; }

  /* 「もっと見る」はスマホのタイル表示だけの部品＝説明が見えている画面には出さない */
  .departments__more-wrap { margin-top: var(--wp--preset--spacing--60, 1.5rem); text-align: center; }
}
/* タイルは狭幅だけの並べ方なので、それ以外の幅では「もっと見る」を出さない */
@media (min-width: 481px) { .departments__more-wrap { display: none; } }
/* ★★★「面が見えない」の判定を正す（2026-10-14 実射FB「アイコンと科目名の帯の形にすると、
     スマホで上下の余白が空きすぎに見える」）。
   上の 480px の節（2026-08-17）は「透過 × 枠・影なし」だけを面なしとしていたが、
   **白いカード × 枠・影なしが白い帯に乗っても面は消える**（白地の上の白地）。テンプレ03の既定がちょうどこれで、
   見えない上下の余白（22.4px×2）が項目間に上乗せされ、科目どうしの空きが **73px**
   （セクション自身の余白 44px の1.7倍＝「ひとつの一覧」ではなく「別々のブロック」に見える）。
   ★帯の色は**並び順で白／淡色が交互**に決まる＝同じ設定でも並び順しだいで面が見えたり消えたりする。
     判定は保存値ではなく**乗っている帯のクラス**（`.front-band--white`）で持つ。
     淡色の帯に乗った白いカードは面が見える＝対象外（その余白は白地の内側のゆとりなので詰めない）。
   ★範囲は**1列で並ぶ幅すべて**（〜768px）。旧指定は ≤480px だけで、481〜768px（大きめのスマホの横向き・
     小さめのタブレット）も1列なのに 65px のままだった（768px の2列指定はコアに負けて効いていない＝上の節）。
     行の間も 28px にそろえる（481〜768px の既定は 20px）。
   ★タイル（≤480px）も同じ規則に入れる：タイルの 16px も面の内側の寸法なので、面が無ければ同じく二重になる
     （行の間 52→28px）。
   実測（375px）：テンプレ03 73→28px・セクションの高さ 1110→931px／ほかの7テンプレは1pxも変わらない／PC は不変。
   ★セレクタはタイルの `--dept-card-pad-block: 16px`（0,1,0）と行の間 28px（0,1,0・!important）に勝つ (0,2,0) 以上。
   ★★「詳しく見る」もここで説明の続き（左）にする（2026-10-14・§「詳しく見る」はカードの軸にそろえる）。
     面も列の区切りも無い1列では、帰属を示すのは寄せと近さだけ（2026-08-17 実射FB）。
     1行の説明は箱が縮んで中央に置かれるので、箱も伸ばして左端をそろえる（`--dept-desc-self`）。
     PC は列で項目が分かれるので、面が無くても中央のまま。 */
@media (max-width: 768px) {
  .departments__grid--cardbg-transparent.departments__grid--frame-flat,
  .front-band--white .departments__grid--cardbg-white.departments__grid--frame-flat {
    --dept-card-pad-block: 0px;
    row-gap: 28px !important;
    --dept-more-align: left;
    --dept-desc-self: stretch;
  }
}

/* ━━ 書体軸（body.font-*）＝本文と見出しの書体 ━━
   ★実際の font-family スタックは inc/design-tokens.php が宣言し、
     clinic_inject_design_tokens() が :root へ --font-body / --font-head として注入する。
     ここは「どこに当てるか」だけを持つ＝書体を増やしてもこのCSSは変わらない。
   ★旧構造では kit-soft.css / kit-trust.css が見出しごとに font-family を直書きしており
     （soft 6箇所・trust 37箇所）、書体を変えるにはキットCSSを書く必要があった。 */
body { font-family: var(--font-body); }
h1, h2, h3, h4,
.wp-block-heading,
.hero__catch,
.site-header__name,
.lp-section-title,
.dept-hero__title,
.section-cta__heading {
  font-family: var(--font-head);
  letter-spacing: var(--head-letter, 0);
}
/* ★★院名の字間は**院名の長さから**（2026-09-25 運営者の目視「水田医院は文字が詰まって見える」）。
   `--logo-letter` は PHP が注入する（見出しの字間と長さの目安の大きいほう＝`clinic_logo_letter_em()`）。
   注入が無い文脈（画像ロゴ・エディタ等）は見出しの字間のまま。
   ★字間は最後の字の後ろにも付くので、同じ量を右の余白から引く＝中央寄せ・幅の判定・メニューとの間隔がずれない。 */
.site-header__name {
  letter-spacing: var(--logo-letter, var(--head-letter, 0));
  margin-inline-end: calc(-1 * var(--logo-letter, var(--head-letter, 0)));
}