/* =============================================================
   フリースクール検索 スタイルシート
   構成: 1.トークン → 2.ベース → 3.レイアウト → 4.コンポーネント → 5.レスポンシブ
   ルール: 色・余白・角丸・影は必ず下のトークンを参照する（16進のベタ書き禁止）
   ============================================================= */

/* =============================================================
   1. トークン
   ============================================================= */

:root {
  color-scheme: light;

  /* --- 色: 地は白、面も白、区切りはティールの淡い面で作る。
     アクセントはティール1系統（+ 装飾専用の明ティール）。 --- */
  --bg: #ffffff;           /* 地 */
  --surface: #ffffff;      /* 面 */
  --surface-mute: #eef6f4; /* 面の中の淡い区画（出典・補足・地図の陸地） */
  --tint: #f0f7f6;         /* 交互セクション・フッターの淡いティール面 */
  --tint-strong: #e0efec;  /* ヒーローのグラデーション終端 */
  --text: #182f2d;         /* 文字 */
  --muted: #5a6d6b;        /* 副文字。白の上でAA合格。--accent-soft の上では使わない */
  --muted-strong: #3e5350; /* 淡色面（--accent-soft / --tint）に載せる副文字 */
  --line: #e2ebe9;         /* 罫 */
  --line-strong: #c6d6d2;  /* 強い罫（区切り・地図の輪郭） */

  --accent: #1e7d72;       /* アクセント（ティール）。白文字でAA合格 */
  --accent-dark: #135a51;  /* アクセント濃（文字に使う） */
  --accent-bright: #2fa294;/* 装飾専用（アイコン・グラデ・帯）。文字には使わない */
  /* アクセント淡。使ってよいのは次の4つだけ。
     (1) ホバー・フォーカスの一時的な面 (2) 選択中の状態（チップ・押せる面）
     (3) 「情報確認済み」バッジ (4) アイコンの円座布団 */
  --accent-soft: #e2f2ef;
  /* 見出しのマーカー強調（ヒーローのキーワードだけに使う） */
  --marker: #ffe066;

  /* --- 地方カラー（参考: hojokin-agent.jp の地域色分け） ---
     使ってよいのは「地域を見分けるための色分け」だけ:
     (1) 日本地図の県の塗り (2) 都道府県グリッドの色ドット (3) 地図下の凡例。
     状態色（確認済み・エラー）や導線の色とは混ぜない */
  --region-hokkaido: #4fb3ad;
  --region-tohoku: #6cbf6c;
  --region-kanto: #a3c95c;
  --region-chubu: #d9c554;
  --region-kinki: #eaa353;
  --region-chugoku: #dd8a66;
  --region-shikoku: #e58787;
  --region-kyushu: #a08ecb;

  /* --- 状態色: エラー表示にだけ使う。装飾には使わない --- */
  --danger: #9a3324;
  --danger-soft: #f6e7e3;

  /* --- 余白スケール（8px基準） --- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 72px;
  /* セクション境界の縦余白は例外なくこれを通す（--s8 の直参照を禁止）。
     フッター・静的ページ下端も同じ値を使い、SPで縦リズムがズレないようにする */
  --section-gap: var(--s8); /* SPでは 48px に縮む */

  /* --- タップ領域の最小サイズ（WCAG 2.5.8 の 24px ではなく、指で押す前提の 44px を採る） ---
     テキストリンクの見た目は変えず、上下パディングだけで高さを稼ぐときに使う */
  --tap: 44px;
  --tap-pad: var(--s2);
  /* 文中インラインリンク用の当たり判定。行送りを崩さず、上下パディングだけで
     13〜16px のリンクを 44px 以上にする（インライン要素の上下パディングは
     行ボックスの高さを変えないので、本文のレイアウトは動かない） */
  --tap-pad-inline: var(--s4);

  /* --- スティッキーヘッダーの実高（アンカー遷移の逃げ幅の基準） ---
     ヘッダーは position: sticky なので、#map などへ飛ぶと見出しがヘッダーの下に潜る。
     全アンカー先に scroll-margin-top を通し、eyebrow ごと見えるところで止める */
  --header-h: 72px;
  --anchor-offset: calc(var(--header-h) + var(--s3));

  /* --- アイコン: 「確認済み」のチェック。色は mask + background で --accent を通す --- */
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 12.4 2 8.2l1.4-1.4 2.8 2.8L12.6 3l1.4 1.4z'/%3E%3C/svg%3E");

  /* --- 角丸は4段だけ --- */
  --r-s: 10px;   /* 入力・小部品 */
  --r-m: 16px;   /* カード・パネル・地図枠 */
  --r-l: 22px;   /* ヒーローの主役パネル・大きな面 */
  --r-full: 999px;

  /* --- 影は2段 ---
     --sh1: 静的なカード・パネルの浮き（淡く広い影）。ホバーで --sh2 に上げる。
     --sh2: 前面へ浮くもの（ダイアログ・ドロワー・トースト・ツールチップ）と
            カードのホバー時 */
  --sh1: 0 1px 2px rgba(19, 52, 47, 0.04), 0 6px 24px rgba(19, 52, 47, 0.06);
  --sh2: 0 12px 40px rgba(19, 52, 47, 0.13);

  /* --- コンテナ幅 --- */
  --container: 1180px;
  --container-narrow: 860px;
  /* ヘッダー（全幅の帯）の左右余白。本文コンテナと同じ位置にロゴとナビの端を揃える。
     コンテナが画面いっぱいまで縮んだら、従来どおりの可変余白に落ちる。
     ※ % はこの値を使う要素自身の幅に対して解決されるので、ヘッダーと
       ドロワー（left:0/right:0 でヘッダーと同幅）の両方で同じ位置になる */
  --edge-pad: max(clamp(18px, 4vw, 56px), calc(50% - var(--container) / 2));

  /* --- 書体（ウエイトは 400 と 700 の2段だけ。中間ウエイトは使わない） ---
     Apple環境: Hiragino Sans（OS同梱なので追加通信ゼロ）
     それ以外 : Noto Sans JP 400/700 を Google Fonts から読み込む
     ねらいはWindows/AndroidでYu Gothicの細い描画に落ちるのを防ぐこと。
     日本語見出しは palt を掛け、本文は掛けずに letter-spacing で開ける。 */
  --font-sans: "Hiragino Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Yu Gothic Medium", "Segoe UI", sans-serif;

  /* --- 文字サイズは8段だけ。px直書きは禁止（必ずこのトークンを参照する） ---

     見出しは「レベル1つ = サイズ1つ」。同じ画面に同じレベルで違うサイズを出さない。
     ここが1対1でないと、見出しは階層ではなくただの装飾になる。

       h1  --fs-hero / トップは clamp(30px, 3.4vw, 44px)
       h2  --fs-2xl (30px)  ← セクション見出しも検索パネル見出しも必ずこれ
       h3  --fs-xl  (20px)  ← 施設名・記事カード見出し・aside見出しも必ずこれ
       本文 --fs-base (16px)

     級差は h1 44 → h2 30 → h3 20 → 本文 16 の約1.5倍刻み。
     26px（旧h2）だと 20px の h3 と1.3倍しか違わず、章の入口に見えなかった。

     xs   タグ・注記・キャプション
     sm   メタ情報・ラベル・eyebrow・セクション説明文
     md   副文（カード内の説明・テキストリンク）
     base 本文（body の既定値）
     lg   リード文・記事本文の小見出し
     xl   h3
     2xl  h2・指標の数字
     3xl  下層ページの h1
     hero トップの主見出しだけ（画面幅で伸縮） */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 30px;
  --fs-3xl: 32px;
  --fs-hero: clamp(32px, 5.2vw, 56px);

  /* --- 字間: 小さい字ほど開け、大きい字は締める --- */
  --tracking-hero: 0.04em;    /* h1・主見出し */
  --tracking-head: 0.02em;    /* h2〜h4 */
  --tracking-body: 0.02em;    /* 本文 */
  --tracking-caption: 0.04em; /* 12〜13px の小さい字 */
  --tracking-eyebrow: 0.08em; /* 全角混じりの小見出しラベル */

  /* --- ブレークポイントはこの3段だけ（他の閾値を新設しない） ---
     1024px 多カラム → 1カラム（ナビ格納・検索パネル縦積み）
     768px  横並びの塊を崩す（指標カード・見出し行）
     480px  SPタイポグラフィ（見出し縮小・1カラム化） */
}

/* =============================================================
   2. ベース
   ============================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* アンカー先はヘッダーの下に潜らせない。id を持つ要素すべてに効かせておけば、
   生成ページ（施設詳細・ガイド記事の見出しリンク）でも同じ挙動になる */
[id] {
  scroll-margin-top: var(--anchor-offset);
}

body {
  margin: 0;
  /* 全幅の帯（.section--band::before）が 100vw ではみ出すぶんを切る。
     clip はスクロールコンテナを作らないので、position: sticky を壊さない */
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  /* 本文は palt を掛けない（掛けると字が糊付く）。わずかに字間を開けて呼吸させる */
  font-feature-settings: normal;
  letter-spacing: var(--tracking-body);
  line-height: 1.8;
  /* 禁則処理。小書きカナ・長音・promptを行頭に落とさない（「質問チ／ェックリスト」の防止） */
  line-break: strict;
  overflow-wrap: break-word;
}

/* 数字・英数の並ぶ場所は字間補正を戻す（読み違いを防ぐ） */
input,
select,
textarea,
.metrics strong,
.admin-summary strong,
#resultCount,
#metric-count {
  letter-spacing: normal;
  font-feature-settings: normal;
}

/* 12〜13px の小さい字は字間を広げる（小さいほど開ける） */
.tag,
.card-updated,
.metrics span,
.map-note,
.breadcrumbs,
.site-footer,
.site-footer-note,
.search-panel span,
.search-status,
.card-meta span,
.detail-list dt,
.link-note,
.new-badge,
.verified-badge,
.guide-table-wrap th,
.facility-detail .facility-status,
.guide-article .guide-dates,
.contact-form label > span,
.contact-form small,
.contact-status,
.contact-done-note,
.dialogue-speaker-name {
  letter-spacing: var(--tracking-caption);
  /* 最終行に1文字だけ残る「拡張中／中」のような割れを防ぐ */
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* --- フォーカスリング（キーボード・支援機器の現在位置） ---
   :where() で詳細度0にしてあるので、個別指定があればそちらが勝つ。
   ブラウザ既定の細い青枠は緑の塗りボタン上でほぼ見えないため、必ず自前で描く。
   outline は border-radius に追従するので、ここで角丸を上書きしない */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* 緑の塗り・淡緑の面の上では緑のリングが沈むので、文字色に切り替える */
.search-panel button[type="submit"]:focus-visible,
.contact-form button[type="submit"]:focus-visible,
.review-actions button:focus-visible,
.approve:focus-visible,
.header-action:focus-visible {
  outline-color: var(--text);
}

/* --- 本文へスキップ。フォーカスされたときだけヘッダーの手前に出る --- */
.skip-link {
  position: fixed;
  top: var(--s2);
  left: var(--s4);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--s2) var(--s4);
  color: var(--surface);
  background: var(--accent-dark);
  border-radius: var(--r-s);
  font-size: var(--fs-md);
  font-weight: 700;
  box-shadow: var(--sh2);
  transform: translateY(calc(-100% - var(--s5)));
}

.skip-link:focus {
  transform: translateY(0);
}

/* スキップ先の <main tabindex="-1">。プログラム的にフォーカスを受けるだけなので
   クリック時のリングは出さない。キーボード操作（:focus-visible）では出す */
main[tabindex="-1"]:focus {
  outline: none;
}

main[tabindex="-1"]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

/* --- 文中のインラインリンク ---
   WCAG 2.5.5/2.5.8 は「文の中に埋まったリンク」をターゲットサイズの対象外にしている。
   ただし保護者が実際に押すのは「お問い合わせ」「プライバシーポリシー」なので、
   行送りを変えずに上下パディングだけで当たり判定を約44pxまで広げ、
   色に頼らず下線でもリンクだと分かるようにする。
   :not([class]) にしてあるので、クラスを持つ部品（.card-link 等）には一切当たらない */
:where(p, li, dd, .contact-agree span) a:not([class]) {
  padding-block: var(--tap-pad-inline);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 折り返さないと分かっている短いリンク（注記の窓口・同意欄・パンくず）は、
   パディング頼みをやめて 44px の箱にする。折り返す本文中のリンクには使わない
   （inline-flex にすると行をまたげず、狭い画面で横スクロールが出るため） */
/* ヒーロー注記のリンクはここに入れない。文の途中に埋まっているリンクなので、
   min-height 44px を与えると行ボックスが押し広げられ、2行の段落が実測 84px
   （本来 63px）になって行送りが壊れる。文中リンクは WCAG 2.5.8 の例外 */
.contact-agree span a,
.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-block: 0;
}

/* 下線は「文の中に埋まっていて、見た目だけではリンクと分からない」場所のためのもの。
   リスト状に並ぶナビ（フッターの列・パンくず）は並びで役割が分かるので、
   常時下線は敷かない（ホバー時の下線は従来どおり残る） */
.site-footer-nav a,
.site-footer > p a,
.breadcrumbs a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

/* hidden 属性はレイアウト指定より強い（未送信の完了メッセージ等が出てしまうのを防ぐ） */
[hidden] {
  display: none !important;
}

/* --- 見出し（日本語組版: トラッキングを入れて行間を締める） --- */

/* palt（約物のツメ）は見出しだけに掛ける。読点のあとに穴が空くのを防ぐ */
h1,
h2,
h3,
h4,
.hero-title,
.eyebrow,
.brand {
  font-feature-settings: "palt" 1;
}

h1,
h2,
h3,
h4 {
  margin-top: 0;
  letter-spacing: var(--tracking-head);
  line-height: 1.35;
}

/* 見出しは「文節で折る」「最終行に1語だけ残さない」。禁則も強めに掛ける */
h1,
h2,
h3,
h4,
.hero-title,
.card-head h3,
.guide-card-title,
.lead {
  line-break: strict;
  word-break: auto-phrase;
  text-wrap: pretty;
}

h1,
.hero-title {
  max-width: 760px;
  margin: 0 0 var(--s4);
  font-size: var(--fs-hero);
  letter-spacing: var(--tracking-hero);
  line-height: 1.25;
}

/* 主見出しは語の途中で改行させない（「フリースクー／ル」を防ぐ）。
   狭い画面でだけ意味のかたまり単位で折り返す */
.hero-title span {
  display: inline;
  white-space: nowrap;
}

p {
  margin-top: 0;
}

.eyebrow {
  margin: 0 0 var(--s2);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1.5;
}

/* 英語の小ラベル（BY AREA など）。参考: hojokin-agent.jp のセクション頭。
   飾りなので lang="en" を付けず、aria-hidden で読み上げから外す */
.eyebrow-en {
  margin: 0 0 var(--s1);
  color: var(--accent-bright);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* 行長は px ではなく em で決める（級数を変えても字数が変わらない）。
   日本語の 18px は1行33全角字あたりが読みやすさの上限。710px 固定だと
   39字になり、視線が行末から次の行頭へ戻れなくなる */
.lead {
  max-width: 33em;
  margin-bottom: var(--s5);
  color: var(--muted);
  font-size: var(--fs-lg);
}

/* --- 最終行が2〜3字だけ残る「泣き別れ」を止める ---
   375px では日本語の1行が20字前後しか入らないので、注記・見出し・方針ページの
   本文が「…扱いです／す。」のように最終行2字で終わる箇所が実測で多数出ていた
   （運営者情報だけで6件）。
   効くのは word-break: auto-phrase（文節で折る）で、これを入れると
   「その都道府県の／ページに移動します。」のように、どの行も文節で終わる。
   balance は行長がそろう代わりに「補助／金」「オンラインフリースクー／ル」と
   語の途中で割るので使わない（見出しで特にひどい）。auto-phrase と併用しても
   balance 側が無効になるだけなので、pretty と組み合わせる。
   auto-phrase 未対応のブラウザでは従来どおりの折り返しに戻るだけ（劣化しない）。
   対象は「短い注記・見出し・カードの要約・読み物ページの本文」。
   ヒーローの見出しとリード文は、span で折り位置を手で決めてあるので触らない */
.section-note,
.map-note,
.search-quick-label,
.guide-card-title,
.guide-card-desc,
.result-card .card-head h3,
.site-footer-note,
.doc-panel > p,
.check-list li {
  text-wrap: pretty;
  word-break: auto-phrase;
}

/* 固有名詞だけは行をまたがせない（「フリースクール検／索」のように
   サイト名が割れると、名前として読めなくなる） */
.nobr {
  white-space: nowrap;
}

dl {
  margin: 0 0 var(--s4);
}

dl div {
  display: flex;
  justify-content: space-between;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
}

dt {
  color: var(--muted);
}

dd {
  margin: 0;
  font-weight: 700;
}

/* =============================================================
   3. レイアウト
   ============================================================= */

/* --- ヘッダー --- */

/* ヘッダーは全ページで同じ枠にする（ロゴ・ナビ4項目・右のツール）。
   ページごとに項目数やCTAのラベルが入れ替わると、移動するたびに枠が組み替わり、
   自分がどこにいるのか分からなくなる。

   軸: space-between をやめて 3カラムのグリッドにする。
   space-between だと左のロゴと右のツールの幅の差がそのままナビの位置に出て、
   本文コンテナの中心から数十px ずれる。中央の列に置けば、ロゴやツールの
   幅が変わってもナビの中心はコンテナの中心から動かない */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s5);
  min-height: var(--header-h);
  padding: var(--s3) var(--edge-pad);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.site-header > .brand {
  grid-column: 1;
  justify-self: start;
}

.site-header > .main-nav {
  grid-column: 2;
  justify-self: center;
}

.site-header > .header-tools {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s3);
}

/* 社内画面（管理・レビュー）はハンバーガーを持たないので、直下のCTAをそのまま右列に置く */
.site-header > .header-action {
  grid-column: 3;
  justify-self: end;
}

.brand,
.main-nav {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

/* ロゴもトップへ戻るリンクなので、44px の当たり判定を確保する（見た目の高さは38pxのまま） */
.brand {
  min-height: var(--tap);
  font-weight: 700;
  letter-spacing: var(--tracking-head);
  white-space: nowrap;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--surface);
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  border-radius: var(--r-s);
  box-shadow: 0 2px 8px rgba(30, 125, 114, 0.28);
}

.main-nav {
  color: var(--muted);
  font-size: var(--fs-md);
  font-weight: 700;
}

.main-nav a {
  padding: var(--s2);
}

.main-nav a:hover {
  color: var(--accent-dark);
}

/* --- ハンバーガー（1024px 以下でだけ出る） ---
   広い画面ではナビが常時見えているので出さない。押し間違えないよう 44x44px を確保する */
.nav-toggle {
  display: none;
  /* flex アイテムとして縮ませない。縮むと 320px 幅で実測 25px まで潰れ、
     44px の当たり判定が消える（押せないメニューになる） */
  flex: none;
  width: var(--tap);
  height: var(--tap);
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  cursor: pointer;
}

.nav-toggle:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* 3本線はCSSで描く（画像・アイコンフォントを持ち込まない） */
.nav-toggle-bars {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: var(--r-full);
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: var(--r-full);
}

.nav-toggle-bars::before {
  top: -6px;
}

.nav-toggle-bars::after {
  top: 6px;
}

.nav-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 開いている間は3本線を×に変える（ラベルは nav.js が「メニューを閉じる」に差し替える） */
.nav-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* --- ドロワーの背景幕 ---
   幕が無いと、開いたまま下までスクロールしたときに本文の上へパネルが宙に浮いて重なる。
   幕を敷いて背景を落とし、幕をタップすれば閉じられるようにする。
   z-index はヘッダー(10)の1つ下。パネルはヘッダーの子なので必ず幕の上に出る */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 9;
  background: rgba(27, 43, 41, 0.44);
}

/* ドロワーを開いている間は背景をスクロールさせない（画面が途中で切れて見えるのを防ぐ） */
body.nav-open {
  overflow: hidden;
}

/* 画面下の固定CTAは持たない。
   812px のSPで上69px＋下64pxの2本を常時出すと、ビューポートの16%が常に
   ふさがれる。実測でも、下のCTAが「ガイド記事をすべて見る」を丸ごと隠し、
   地域ランキングの説明文の最終行に重なっていた。
   主導線（施設を探す）は上のスティッキーヘッダーに1本だけ置き、
   固定要素は上端だけにする */

/* --- ヒーロー --- */

.hero {
  position: relative;
  color: var(--text);
  background: linear-gradient(165deg, #f5fbf9 0%, var(--tint) 45%, var(--tint-strong) 100%);
  border-bottom: 1px solid var(--line);
  /* 装飾のはみ出し（ドットパターン）はヒーローの中だけで切る */
  overflow: hidden;
}

/* 右上の装飾ドット。情報ではないので薄く、テキストの背面に敷く */
.hero::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -50px;
  width: 380px;
  height: 380px;
  background-image: radial-gradient(var(--accent-bright) 2px, transparent 2.6px);
  background-size: 24px 24px;
  border-radius: 50%;
  opacity: 0.16;
  pointer-events: none;
}

/* 左下にもごく薄い円をひとつ（面の単調さを消すだけの飾り） */
.hero::after {
  content: "";
  position: absolute;
  bottom: -140px;
  left: -90px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(47, 162, 148, 0.10), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
}

/* ヒーローの主見出しのキーワードだけ、マーカーで下半分を塗る */
.hero-title .marker {
  font-style: normal;
  background: linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 92%, transparent 92%);
}

/* --- ヒーロー左: 実績数字（アイコン付き） --- */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  margin: 0;
}

.hero-stat {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0;
}

.hero-stat + .hero-stat {
  padding-left: var(--s6);
  border-left: 1px solid var(--line-strong);
}

.hero-stat-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--surface);
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  border-radius: var(--r-m);
  box-shadow: 0 4px 12px rgba(30, 125, 114, 0.25);
}

.hero-stat-icon svg {
  width: 22px;
  height: 22px;
}

.hero-stat-body {
  display: grid;
  line-height: 1.3;
}

.hero-stat-body strong {
  font-size: var(--fs-2xl);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
}

.hero-stat-body strong small {
  font-size: var(--fs-base);
  font-weight: 700;
}

.hero-stat-body > span {
  color: var(--muted-strong);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-caption);
}

/* 左に「探す導線」、右に「確かめ方の証跡」を置いた2カラム。
   配分は 1.1:0.9 ではなく 1.25:0.75。主役の検索パネルを 700px 級に保つため
   （1.1:0.9 だと左が 600px を切り、キーワード欄が窮屈になる）。
   align-items は start 固定。stretch にすると背の低い側のカード内部に
   行き場のない空白（間延び）が生まれるので、余りは地の余白として外に出す */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--s7);
  align-items: start;
  width: min(var(--container), calc(100% - var(--s6)));
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) 0 var(--s7);
}

/* 縦の間隔は gap だけで作る（負マージンでの微調整を持ち込まない） */
.hero-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s5);
  min-width: 0;
}

.hero-lede {
  display: grid;
  gap: var(--s4);
}

.hero-headline {
  display: grid;
  gap: var(--s2);
}

.hero-headline .eyebrow,
.hero-headline .hero-title,
.hero-lede .lead {
  margin: 0;
}

/* 2カラム化で見出しの版面が狭くなるぶん、字送りを詰めずに級数を下げる */
.hero .hero-title {
  max-width: none;
  font-size: clamp(30px, 3.4vw, 44px);
}

.hero-main > .search-panel {
  width: 100%;
}

/* 右カラムは面を1枚だけ置く。地図への導線は下の地図セクションが担うので、
   ここに地図カードを置かない（同じラベルが1画面に2回出るのを防ぐ）。
   stretch にして左カラム（コピー＋検索パネル）と下端を揃える。余りは
   パネル内の3ブロックの境界（罫のある位置）に均等に配るので、
   「行き場のない空白」ではなく区切りの余白として読める */
.hero-side {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
}

/* --- セクション --- */

.section,
.results {
  position: relative;
  width: min(var(--container), calc(100% - var(--s6)));
  margin: 0 auto;
  padding: var(--section-gap) 0;
}

/* 面（白）と地（--bg）を交互に敷いてセクションのリズムを作る。
   ::before を左右に伸ばして全幅の帯にする（HTMLの入れ子を増やさないため）。
   はみ出しは body の overflow-x: clip で切る */
.section--band::before,
.results--band::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background: var(--tint);
  border-block: 1px solid var(--line);
}

/* セクションの区切りは「境界に細い罫1本」だけに統一する。
   トーンの反転（面／地）は区切りの語彙としては使わない（フッターだけが例外で、
   ページの終端＝受け皿であることを面で示す）。罫を2本重ねない */
.section--rule {
  border-top: 1px solid var(--line);
}

/* 見出し直下の1行説明。全セクションで必ず1行入れて、セクションの立ち上がりの
   高さを揃える（ある／ないでh2下の余白が変わるのを防ぐ） */
/* 13px の説明文に --muted（白 5.6:1）を敷くと、実機のSPではほぼ読めない。
   情報は削らず --muted-strong（7.2:1）まで上げる。h2 との強弱はウエイトで足りている */
.section-note,
.map-note,
.area-note {
  margin: calc(var(--s5) * -1 + var(--s2)) 0 var(--s5);
  /* 62em（1行62全角字）は本文としても注記としても長すぎた。40字で折る */
  max-width: 40em;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--muted-strong);
}

/* 説明文は見出しと同じラッパ（.section-heading > div）の中に入れる。
   外に出すと1カラムに落ちたとき「見出し → 右の操作リンク → 説明文」の順になり、
   見出しと自分の説明がボタンで分断される。中に入れた場合は上の負マージンを打ち消す */
.section-heading .section-note,
.section-heading .map-note,
.section-heading .area-note,
.results-head .section-note {
  margin: var(--s2) 0 0;
}

/* 幅で出し分ける文言。768px を境に片方だけを出す（両方は絶対に出さない）。
   「地図が実際には使えない幅で、地図の説明だけ残る」ような不誠実を防ぐための出し分け */
.on-narrow {
  display: none;
}

.section-heading,
.results-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s2) var(--s5);
  margin-bottom: var(--s5);
}

/* eyebrow と h2 をラッパdivに入れていない見出しでも、必ず同じ左の列に積む。
   右にまわすのは「操作」（リンク・ボタン・並び替え）だけ */
.section-heading > *,
.results-head > * {
  grid-column: 1;
  margin-bottom: 0;
}

.section-heading > a,
.section-heading > button,
.results-head > a,
.results-head > button,
.results-head > .results-sort {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: end;
  justify-self: end;
}

/* 並び替えは「値だけが右上に浮いている」状態にしない。
   検索パネルのフィールドと同じ「小さなラベル＋コントロール」の形にそろえる */
.results-sort {
  display: grid;
  gap: var(--s1);
}

.results-sort label {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* 件数は見出しから説明文に移したので、数字だけは本文サイズに上げて拾えるようにする */
.results-head .section-note strong {
  color: var(--text);
  font-size: var(--fs-base);
}

.section-heading h2,
.results-head h2 {
  margin: 0;
  font-size: var(--fs-2xl);
}

/* --- フッター --- */

/* 運営者・編集方針・免責を受け止める面。本文と同じ 1180px に揃える */
.site-footer {
  /* 直前のセクションが下パディングを持つので、ここでは重ねて空けない */
  margin-top: 0;
  padding: var(--s8) 0 var(--s7);
  background: var(--tint);
  border-top: 1px solid var(--line);
  font-size: var(--fs-md);
  color: var(--muted-strong);
}

/* .site-footer > p は旧マークアップ（about / contact / guide / 生成ページ）の1行フッター。
   同じ本文幅に揃えて、全幅に流れないようにする */
.site-footer-inner,
.site-footer-bottom,
.site-footer-note,
.site-footer > p {
  width: min(var(--container), calc(100% - var(--s6)));
  margin: 0 auto;
}

/* 3列とも内容ぶんの幅にして、余りは列間に等分する（space-between）。
   旧: 1列目を 1fr にしていたため、列だけが 1180px まで伸びて中身（34em で折る
   段落）が伸びず、説明文の右端とリンク列の間に 333px の空洞ができていた。
   逆に3列とも等分すると最終列の右に 200px 残って面が閉じない。
   両端（ブランド＝左端／最終列＝右端）を必ず接地させ、間隔を等しくする */
.site-footer-inner {
  display: grid;
  grid-template-columns: auto max-content max-content;
  justify-content: space-between;
  gap: var(--s5) var(--s8);
  align-items: start;
}

.site-footer a {
  color: inherit;
}

.site-footer a:hover {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer-name {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 700;
}

/* 1列目の幅はこの max-width がそのまま決める（列は auto）。
   34em（1行34全角字）は注記としては長いので 28em に詰め、
   段落の右端＝列の右端になるようにする（列だけが伸びる状態を作らない） */
.site-footer-desc {
  margin: var(--s2) 0 0;
  max-width: 28em;
  line-height: 1.8;
}

/* 文節ごとの折り返し（index のフッターのみ。他ページの1行フッターには span が無い） */
.site-footer-desc span {
  display: inline-block;
}

/* 旧マークアップ（生成ページ）用に残す */
.site-footer-updated {
  margin: var(--s2) 0 0;
  font-size: var(--fs-sm);
}

/* 最下段。左に注意書き、右に運営名と更新日を置いて面の右端まで使い切る */
.site-footer-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: baseline;
  gap: var(--s3) var(--s6);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.site-footer-bottom > .site-footer-note {
  width: auto;
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

.site-footer-meta {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: right;
  white-space: nowrap;
}

/* 列の見出しは <h2> にしない。13px の h2 が 20px の施設名 h3 より小さく、
   見出しレベルと視覚ウェイトが逆転するため。nav に aria-label があるので
   スクリーンリーダー上の区別は保たれる */
.site-footer-nav-title {
  margin: 0 0 var(--s2);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
}

.site-footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 行そのものを押せる面にするので、行間の隙間（当たらない帯）は作らない */
  gap: 0;
}

/* 「運営者情報・編集方針」「お問い合わせ」は信頼系の導線。
   15px のテキストリンク1行（実測15px）では指で押せないので、行の高さを44pxにする */
.site-footer-nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding-block: 0;
}

/* 旧マークアップの1行フッター（about / contact / guide / 生成ページ）も同じ高さにする */
.site-footer > p a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-block: 0;
}

/* 重要な注意書き。最小・最薄にしない */
.site-footer-note {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

/* --- パンくず --- */

.breadcrumbs {
  width: min(100% - var(--s6), var(--container-narrow));
  margin: var(--s3) auto 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  padding: 0;
  margin: 0;
}

.breadcrumbs li + li::before {
  content: "›";
  margin: 0 var(--s1);
  color: var(--line-strong);
}

.breadcrumbs a {
  color: inherit;
}

/* =============================================================
   4. コンポーネント
   ============================================================= */

/* --- ボタン: 「塗り」「アウトライン」「テキストリンク」の3種だけ --- */

.header-action,
.inline-link,
.secondary-button,
.search-panel button[type="submit"],
.contact-form button[type="submit"],
.review-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  cursor: pointer;
  font-weight: 700;
}

/* 塗り（主導線）: ティール1色だけ */
.search-panel button[type="submit"],
.contact-form button[type="submit"],
.approve {
  color: var(--surface);
  background: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: 0 4px 14px rgba(30, 125, 114, 0.28);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.search-panel button[type="submit"]:hover,
.contact-form button[type="submit"]:hover,
.approve:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  box-shadow: 0 6px 18px rgba(19, 90, 81, 0.32);
}

/* ヘッダーのCTAは参考サイトと同じ「塗りのピル」。ページ内の塗りボタンと同格に見えるが、
   常時見える主導線なので塗りで良い（検索パネル側は面の大きさで主役性を保つ） */
.header-action {
  min-height: var(--tap);
  padding: 0 var(--s5);
  color: var(--surface);
  background: var(--accent);
  border: 1px solid var(--accent);
  transition: background 0.15s ease;
}

.header-action:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

/* アウトライン */
/* 38px だと指で押すには低い。アウトライン系のボタンも 44px に揃える */
.inline-link,
.secondary-button {
  min-height: var(--tap);
  padding: 0 var(--s4);
  color: var(--accent-dark);
  background: var(--surface);
  border: 1px solid var(--accent);
  transition: background 0.15s ease;
}

.inline-link:hover,
.secondary-button:hover {
  background: var(--accent-soft);
}

/* 控えめなアウトライン（同格の導線が並ぶ場所） */
.secondary-link {
  color: var(--text);
  border-color: var(--line);
}

.secondary-link:hover {
  background: var(--surface-mute);
}

.compact {
  min-width: 140px;
  padding: 0 var(--s3);
}

/* --- 検索パネル --- */

/* 列は「キーワード」「都道府県」「ボタン」の3つだけ。中身と宣言を必ず一致させる。
   面の描き方はサイト共通（白＋1px罫＋角丸12px・影なし）。主役であることは
   「罫を1段濃くする」「内側の余白を1段広くする」「唯一の塗りボタンを持つ」の3点で示す。
   影で浮かせるのはダイアログ・ドロワーなど本当に前面に出るものだけ（--sh2 のコメント参照） */
.search-panel {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  gap: var(--s4);
  /* 主役なので内側の余白は他の面より1段広い（32px）。ここを詰めると窮屈に見える */
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--r-l);
  /* ヒーローの淡いティール面の上に浮かせる主役パネル */
  box-shadow: var(--sh2);
}

/* 中身は見出し1つだけ（補助コピーを右端に浮かせるのをやめた） */
.search-panel-heading {
  grid-column: 1 / -1;
  color: var(--text);
}

/* 検索パネルの見出しもページ内の h2 なので、セクション見出しと同じ級数にする。
   ここだけ 18px にしていたため、同じ画面で h2(18px) < h3(20px) の逆転が起きていた。
   30px はパネル内では大きく見えるが、これが「このページの主役」であることを
   級数で言い切ることのほうが、階層の一貫性としても導線としても正しい */
.search-panel-heading h2,
.search-panel-heading strong {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-head);
}

.search-panel label {
  display: grid;
  gap: var(--s1);
}

.search-panel span {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.search-panel input,
.search-panel select,
.results-head select {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--s3);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
}

/* 並び替えセレクトは見出しの右に置く（幅いっぱいに伸ばさない） */
.results-head select {
  width: auto;
  min-width: 180px;
}

/* リング幅はサイト全体で3pxに統一する（ここだけ2pxだと、タブ移動で太さが揺れる） */
.search-panel input:focus-visible,
.search-panel select:focus-visible,
.results-head select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ページ内で唯一の「塗り」CTA。ヘッダーはアウトラインに降格させて主従を1つにする */
.search-panel button[type="submit"] {
  align-self: end;
  min-width: 168px;
  min-height: 52px;
  padding: 0 var(--s5);
  font-size: var(--fs-base);
}

/* --- 検索パネル内: よく使う条件のチップ --- */
/* 右カラムに置くと「探す」導線が左右に割れるので、主役のパネルの中に入れて
   パネル自体の重さ（面積・行数）を上げる。app.js の #tagButtons をそのまま使う */
.search-quick {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--s2);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

.search-quick-label {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caption);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* 該当0件の条件を落とした結果チップが1つも無くなったら、見出しごと畳む
   （「よく使われる条件から絞る」だけが残る空振りを防ぐ） */
.search-quick:has(.chips:empty) {
  display: none;
}

/* 主導線（塗り）と競合しない第3階層。枠は罫色、選択時だけアクセント淡に反転する */
.chips .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 var(--s3);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  cursor: pointer;
  /* 補助導線なので本文より小さいが、12pxまでは下げない。タップ領域は min-height 34px で確保する */
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-caption);
  white-space: nowrap;
  transition: background 0.15s ease;
}

.chips .chip:hover {
  background: var(--surface-mute);
}

.chips .chip.active {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.chips .chip:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* 選択中は淡緑の面になるので、緑のリングが沈まないよう文字色に切り替える */
.chips .chip.active:focus-visible {
  outline-color: var(--text);
}

.search-status {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--accent-dark);
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* 未検索のときは行ごと畳む。空のままだとパネル下端に死に余白が残る */
.search-status:empty {
  display: none;
}

/* --- 特徴から探す（アイコンカードのグリッド。参考: hojokin-agent.jp の業種別カード） ---
   押すと検索パネルのチップと同じタグ絞り込みが掛かり、一覧まで移動する（app.js が結線） */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  padding: var(--s5) var(--s3);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--sh1);
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: var(--tracking-caption);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.feature-card:hover {
  border-color: var(--accent);
  box-shadow: var(--sh2);
  transform: translateY(-2px);
}

/* アイコンの円座布団。アイコンは stroke: currentColor の inline SVG */
.feature-card-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-full);
  transition: background 0.15s ease, color 0.15s ease;
}

.feature-card:hover .feature-card-icon {
  color: var(--surface);
  background: var(--accent);
}

/* 選択中（チップの active と同じ語彙: 淡い面＋アクセント罫） */
.feature-card.active {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.feature-card.active .feature-card-icon {
  color: var(--surface);
  background: var(--accent);
}

.feature-card.active:focus-visible {
  outline-color: var(--text);
}

.feature-card-icon svg {
  width: 26px;
  height: 26px;
}

/* --- ヒーロー右: この一覧について（数字＋たしかめ方） --- */

/* ファーストビューの面は「検索パネル（影あり・主役）」と「この一覧について（影なし・従）」の2枚だけ。
   薄緑カードのような3枚目のサーフェスは作らない */
.hero-facts {
  display: grid;
  align-content: space-evenly;
  gap: var(--s5);
  width: 100%;
  min-height: 100%;
  padding: var(--s6);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-l);
  box-shadow: var(--sh1);
  backdrop-filter: blur(6px);
}

/* パネルの頭は「見出し＋数字」で1ブロック。数字を頭の中に入れることで、
   縦積みのテキストの中に横方向の帯がひとつだけできる（視線が止まる足場）。
   区切り罫は必ず「次のブロックの上」に1本だけ持たせる。頭にも border-bottom を
   付けると、24px 離れた2本の罫が並んで、その間に用途のない帯ができる */
.hero-facts-head {
  display: grid;
  gap: var(--s3);
}

.hero-facts-head .eyebrow {
  margin: 0;
}

/* 数字は縦に積まず横1列。2つだけなので、SPでも1行に収まる。
   数字ごとの注記は置かない（置くと、そのまま下の「たしかめ方」の言い換えになる） */
.metrics {
  display: flex;
  flex-wrap: wrap;
  /* 列間は 375px でも2つが1行に収まる値まで縮める（32px のままだと折り返して、
     せっかく横に並べた数字がまた縦積みに戻る）。数字とラベルの間は 12px なので、
     24px あれば「172 掲載施設」「47 都道府県」の group は読み分けられる */
  gap: var(--s2) clamp(24px, 5vw, 32px);
}

.metric {
  display: flex;
  align-items: baseline;
  /* 30px の数字と 16px のラベルの間。8px だと字幅の詰まった数字でラベルと接触して
     見えるので、1段広い 12px を全行で共通にする */
  gap: var(--s3);
  margin: 0;
}

/* 数値は操作できないので緑にしない（緑＝押せる、を薄めない） */
.metric strong {
  color: var(--text);
  font-size: var(--fs-2xl);
  line-height: 1.2;
  white-space: nowrap;
  /* 掲載件数は読み込み後に 0 → 172 と差し替わる。等幅数字にしておかないと
     桁が増えたときにラベルの位置が横に飛ぶ */
  font-variant-numeric: tabular-nums;
}

.metric span {
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.5;
}

.hero-facts-steps {
  display: grid;
  gap: var(--s3);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.hero-facts-steps-title {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
}

/* 番号バッジ＋縦線の定型ステップUIはやめ、チェックだけの淡い箇条書きにする。
   文体は「〜します」で統一（体言止めと混ぜない） */
.hero-steps {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-steps li {
  position: relative;
  padding-left: var(--s5);
  font-size: var(--fs-md);
  line-height: 1.7;
}

/* 折り返しは読点の位置だけで起こす（文節のかたまりは割らない）。
   ブラウザ任せだと「…行政ページ／で、毎日…」と助詞の途中で折れ、
   さらに pretty だと2行目が「します」だけの孤立行になっていた */
.hero-steps li span {
  display: inline-block;
}

/* チェックはCSSで描く（アイコン画像を増やさない）。
   トップの「たしかめ方」と方針ページの箇条書きは同じ部品を共有する */
.hero-steps li::before,
.check-list li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 3px;
  width: 5px;
  height: 10px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 最終更新日と出典の注記。カード下端に置き、独立した宙に浮く行を作らない */
/* 12px は実機で読めない。信頼の根拠（最終更新日・出典・訂正の窓口）を置く行なので
   13px まで上げ、文字色も本文色に寄せてコントラストを確保する */
.hero-facts-note {
  margin: 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  color: var(--muted-strong);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-caption);
  line-height: 1.8;
  text-wrap: pretty;
}

.hero-facts-note a {
  color: var(--accent-dark);
  font-weight: 700;
  text-decoration: underline;
  /* 「お／問い合わせ」のようにリンク名が行をまたぐのを防ぐ */
  white-space: nowrap;
}

/* --- 施設カード --- */

/* カードの gutter はページ全体で --s5（24px）に統一する。
   記事カード（.guide-cards）・地域チップの列間だけは別値にしない */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s5);
}

/* 一覧は段階表示。全件出しきったら行ごと消して、下に空の帯を残さない */
.results-more {
  display: grid;
  justify-items: center;
  margin-top: var(--s6);
}

.results-more:not(:has(.results-more-button:not([hidden]))) {
  display: none;
}

.results-more-button {
  min-height: 52px;
  padding: 0 var(--s7);
  color: var(--accent-dark);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font-size: var(--fs-base);
  font-weight: 700;
  cursor: pointer;
}

.results-more-button:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.results-more-rest {
  color: var(--muted);
  font-weight: 400;
  letter-spacing: normal;
}

/* 「地域の情報源」= 都道府県絞り込み時だけ出る、地域団体の外部サイト案内。
   一覧の入口（施設カードの上）に置く。施設カード（--surface）とは役割が違う
   補足情報なので、出典・補足と同じ淡い区画（--surface-mute）に載せて視覚的に
   一段引き、主役の一覧と取り違えないようにする。
   検索画面と都道府県ページ（build-static-pages.mjs）の両方で使う */
.region-resources {
  margin: var(--s5) 0 var(--s6);
  padding: var(--s5);
  background: var(--surface-mute);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}

/* 箱の中の見出しは記事の章見出しではないので、章見出しの装飾（横罫＋大きな上余白）を
   受けさせない。都道府県ページでは .static-page h2（border-top + padding-top、
   このファイルの後方で定義）が同じ詳細度で後勝ちするため、打ち消しには
   .static-page を含む3つ目のセレクタが要る。検索画面（h3）と見た目を揃える */
.region-resources h2,
.region-resources h3,
.static-page .region-resources h2 {
  margin: 0 0 var(--s2);
  padding-top: 0;
  border-top: 0;
  font-size: var(--fs-xl);
}

.region-resources-note {
  margin: 0 0 var(--s3);
  font-size: var(--fs-sm);
  color: var(--muted-strong);
}

.region-resources-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s3);
}

.region-resource a {
  font-weight: 700;
  color: var(--accent-dark);
  text-underline-offset: 3px;
}

.region-resource-area {
  margin-left: var(--s2);
  font-size: var(--fs-sm);
  color: var(--muted-strong);
}

.region-resource p {
  margin: var(--s1) 0 0;
  font-size: var(--fs-md);
  color: var(--muted-strong);
}

.result-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s1);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--sh1);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.result-card:hover {
  border-color: var(--accent);
  box-shadow: var(--sh2);
  transform: translateY(-2px);
}

.result-card .card-head {
  margin-bottom: var(--s3);
}

/* 確認状態のバッジは施設名の上に独立した行として置く。
   h3 にインラインで入れると、施設名の長さでバッジの位置が毎回変わり、
   タイトルの塊がカードごとにガタつく（バッジの軸が存在しなくなる） */
.result-card .card-head > .verified-badge,
.result-card .card-head > .new-badge {
  margin: 0 0 var(--s2);
}

.card-head h3 {
  margin-bottom: var(--s1);
  font-size: var(--fs-xl);
}

/* 施設名に2行ぶんの高さを予約しない。
   1行で収まる施設名（「フリースクールSAGA」など）の下に 27px の空白が残り、
   所在地との間に何かが抜け落ちたように見えていた。
   カードの高さはグリッドで揃い、リンク行は margin-top:auto で下端に固定されるので、
   長さの差ぶんの余りは「最終確認日」と区切り罫の間＝もともと余白のある場所に集まる。
   施設名・所在地・最終確認日は常にひとかたまりとして読める */

.location {
  color: var(--muted);
  font-size: var(--fs-md);
}

/* このサイトが素人臭さを免れる唯一の武器は「いつ・どこで確かめたか」。
   カード内で一番小さく薄い表示にしてしまうと、その武器を自分で捨てることになる。
   12px/--muted（4.9:1）→ 13px/--text（12:1）に上げ、チェックアイコンで
   「確認済み」であることを文字を増やさずに伝える */
.card-updated {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin: var(--s1) 0 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.card-updated::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--accent);
  -webkit-mask: var(--icon-check) no-repeat center / contain;
  mask: var(--icon-check) no-repeat center / contain;
}

/* mask 非対応ブラウザでは緑の四角が残って不具合に見えるので、アイコンごと落とす
   （意味は「最終確認日」の文字が担っているので、情報は失われない） */
@supports not ((mask: none) or (-webkit-mask: none)) {
  .card-updated::before {
    display: none;
  }
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s3) 0;
}

.tag {
  padding: 3px var(--s3);
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* リンク行はカード下部に罫線で区切って揃える。
   リンク自身の上下パディング（--tap-pad）ぶんを負マージンで打ち消し、
   カード上端→バッジ と リンク→カード下端 の余白を対称にする。
   横の間隔は --s5。保護者が最後に押す導線なので、隣を誤爆しない距離を取る */
.card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s5);
  align-items: center;
  justify-content: flex-start;
  margin-top: auto;
  margin-bottom: calc(var(--tap-pad) * -1);
  padding-top: calc(var(--s3) - var(--tap-pad));
  border-top: 1px solid var(--line);
}

/* テキストリンク（3種目のボタン）。
   見た目はテキストリンクのまま、上下パディングで指の当たり判定を 44px 確保する */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: var(--tap);
  padding: var(--tap-pad) 0;
  color: var(--accent-dark);
  font-weight: 700;
  font-size: var(--fs-md);
  white-space: nowrap;
}

.card-link::after {
  content: "↗";
  font-size: var(--fs-xs);
  opacity: 0.55;
}

.card-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.card-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: var(--s2);
  margin-top: var(--s3);
}

.card-meta div {
  padding: var(--s2);
  background: var(--surface-mute);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
}

.card-meta span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.card-meta strong {
  display: block;
  font-size: var(--fs-md);
}

/* 情報の確からしさを示すバッジ（色相は増やさず、面の強さで区別する） */
.new-badge,
.verified-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--s2);
  margin-left: var(--s1);
  vertical-align: middle;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.verified-badge {
  color: var(--accent-dark);
  background: var(--accent-soft);
}

.new-badge {
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
}

/* --- 詳細ダイアログ --- */

dialog {
  width: min(760px, calc(100% - var(--s6)));
  padding: 0;
  border: 0;
  border-radius: var(--r-m);
  box-shadow: var(--sh2);
}

dialog::backdrop {
  background: rgba(27, 43, 41, 0.5);
}

.close-button {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  /* ダイアログを閉じる唯一の見える手段。36px では指で押しにくい */
  width: var(--tap);
  height: var(--tap);
  color: var(--text);
  background: var(--surface-mute);
  border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
  font-size: var(--fs-xl);
  line-height: 1;
}

.dialog-body {
  padding: var(--s6);
}

.dialog-body h2 {
  margin-right: 38px;
}

.detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
  margin: var(--s4) 0 var(--s1);
}

.detail-list div {
  display: block;
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
}

.detail-list dt {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.detail-list dd {
  margin: var(--s1) 0 0;
  color: var(--text);
  font-weight: 700;
}

.source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
}

.link-note {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--s3);
  color: var(--muted);
  background: var(--surface-mute);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  font-size: var(--fs-sm);
}

/* 一覧カードのリンク行では、塗り面は「押せるもの」にだけ与える。
   ここで .link-note を灰色のピル（38px・面あり・罫あり）のまま出すと、
   押せない「公式HPは確認中」が、押せる「公式HP↗」（面なしのテキスト）より
   重い面を持つ。9枚並べたときに視線が集まるのが未整備のカードになり、
   面の階層が反転する。カードの中ではミュートのテキストに落とし、
   .card-link と同じベースライン・同じ高さに揃える */
.card-links .link-note {
  min-height: var(--tap);
  padding: var(--tap-pad) 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-body);
}

.source-box {
  margin-top: var(--s4);
  padding: var(--s3);
  background: var(--surface-mute);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
}

/* --- 地域グリッド（＝一覧の絞り込み操作。地図右のランキングとは役割を分ける） --- */

/* 掲載のある県を北→南の順にすべて出す。件数順に並べ替えると
   地図右のTOP10と同じ「ランキング」を2回見せることになるので、順序を変えない */
/* 47は素数なので何列にしても最終行に余りが出る。8列なら余りは1セルで済む */
.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--s2);
  /* 地図（.map-body）と同じセクションに同居するため、地図との切れ目をここで取る */
  margin-top: var(--s6);
}

.area-grid button {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: var(--s2);
  width: 100%;
  min-height: 46px;
  padding: var(--s2) var(--s3);
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  box-shadow: var(--sh1);
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: 700;
  transition: border-color 0.15s ease, background 0.15s ease;
}

/* セル下端の件数バーは廃止した（app.js の --fill も削除済み）。
   最大23件・大半が1〜3件という分布では、141pxのセルに対して 1件=11px /
   2件=13px / 3件=18px にしかならず、隣の県との差が目視できない。
   読めない符号は情報ではなく罫線ノイズなので、面のスタイルも
   「白＋1px罫」だけに戻し、施設カード・記事カードと同じ語彙に揃える */
.area-grid button:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* 件数は「押せる場所」ではないので緑にしない（ボタン全体がリンク） */
.area-grid span {
  margin-left: auto;
  color: var(--muted);
  letter-spacing: normal;
  font-feature-settings: normal;
}

/* 地方色のドット（地図の塗り分け・凡例と同じ色。app.js が --rc を色トークンに結線） */
.area-grid button::before {
  content: "";
  flex: none;
  align-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rc, var(--line-strong));
  opacity: 0.85;
}

.area-loading {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

/* 都道府県別ページへのリンク集。セクションの終端になるので、
   13pxの素のテキスト1行では終わりが締まらない。行そのものを面にして受け止める。
   （罫はこのブロックの枠だけ。セクション境界の罫と二重に引かない） */
.prefecture-links {
  margin-top: var(--s5);
}

.prefecture-links > details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}

.prefecture-links > details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: var(--tap);
  padding: var(--s3) var(--s5);
  color: var(--accent-dark);
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.prefecture-links > details > summary::-webkit-details-marker {
  display: none;
}

.prefecture-links > details > summary::after {
  content: "＋";
  color: var(--muted);
  font-size: var(--fs-sm);
}

.prefecture-links > details[open] > summary::after {
  content: "−";
}

.prefecture-links > details > summary:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prefecture-links > details[open] > summary {
  border-bottom: 1px solid var(--line);
}

/* 47本のリンクを素のテキストで並べると、行間ごと指の当たり判定が重なって押し間違える。
   1本ずつをチップにして高さ 44px と隣との間隔 8px を確保する（面が白なので地の色で置く） */
.prefecture-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s4) var(--s5) var(--s5);
}

.prefecture-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--tap-pad) var(--s3);
  font-size: var(--fs-md);
  color: var(--accent-dark);
  background: var(--surface-mute);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
}

/* 200px 上に「同じ47個の並び」（絞り込みチップ）があり、形だけでは区別できない。
   こちらは押すと別ページに移動するので、矢印で行き先が変わることを形でも示す */
.prefecture-links a::after {
  content: "→";
  margin-left: var(--s1);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.prefecture-links a:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* --- 日本地図 --- */

.map-section {
  position: relative;
}

/* 地図だけだと右に大きな空白が残るので、掲載数の多い県のリストで埋める。
   カラム比と gap は .hero-inner と完全に同じにする（1.25:0.75 / --s7）。
   ページを縦にスクロールしたとき、右カラムの左端＝縦のガイド線が動かないようにするため。
   カード同士の gutter（--s5）とは役割が違うので、ここだけ値が異なるのは意図的 */
/* align-items は stretch。2枚のカードの底を必ず揃える（右カラムの下に
   150px の死んだ余白が残ると、2カラムが「揃っていない2枚」に見えるため） */
/* 10県ランキング撤去後は地図が単独。全幅では大きすぎるので760pxで中央に置く */
.map-body {
  display: block;
}

.japan-map-wrap {
  min-width: 0;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: var(--s3);
}


.japan-map-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}

.map-loading {
  padding: var(--s7) var(--s4);
  text-align: center;
  color: var(--muted);
}

.jp-pref {
  fill: var(--surface-mute);
  /* 地方色で塗り分けるので、県境は白で抜いて色同士が濁らないようにする */
  stroke: var(--surface);
  stroke-width: 0.8;
}

/* 地方ごとの塗り分け（app.js の colorMapRegions が data-pref から付与）。
   パステルに落とすため塗りの不透明度を下げる（ドット＝アクセント色の視認性を守る） */
.jp-pref--hokkaido { fill: var(--region-hokkaido); fill-opacity: 0.4; }
.jp-pref--tohoku { fill: var(--region-tohoku); fill-opacity: 0.4; }
.jp-pref--kanto { fill: var(--region-kanto); fill-opacity: 0.4; }
.jp-pref--chubu { fill: var(--region-chubu); fill-opacity: 0.4; }
.jp-pref--kinki { fill: var(--region-kinki); fill-opacity: 0.4; }
.jp-pref--chugoku { fill: var(--region-chugoku); fill-opacity: 0.4; }
.jp-pref--shikoku { fill: var(--region-shikoku); fill-opacity: 0.4; }
.jp-pref--kyushu { fill: var(--region-kyushu); fill-opacity: 0.4; }

/* 地図下の凡例。色が何を意味するかを必ず言葉で添える */
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s2) var(--s1);
}

.map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  color: var(--muted-strong);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caption);
}

.map-legend-item i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0.75;
}

.jp-inset-frame {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

/* 破線枠が「意味の分からない飾り」にならないよう、必ず県名を添える */
.jp-inset-label {
  fill: var(--muted);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
}

.map-dot {
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 1.2;
  transition: r 0.1s ease;
}

.map-dot-hit {
  fill: transparent;
}

.map-dot-g {
  cursor: pointer;
  outline: none;
}

.map-dot-g:hover .map-dot,
.map-dot-g:focus-visible .map-dot {
  r: 6.5;
  fill: var(--accent-dark);
}

/* ドットが少し太るだけでは、キーボード操作でどこにいるか分からない。
   SVGにはoutlineが効かないので、輪郭線で同じ太さ（3px）のリングを描く */
.map-dot-g:focus-visible .map-dot {
  stroke: var(--text);
  stroke-width: 3;
  paint-order: stroke;
}

.map-dot-g--approx .map-dot {
  opacity: 0.45;
}

.map-tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: var(--s1) var(--s2);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--sh2);
  z-index: 5;
}

/* --- 記事カードの悩み別グループ（experiment #107） --- */

/* グループ見出しは記事カードと同じ面の上に置く。区切り線や色面を足すと
   セクション（h2）とグループ（h3）で見出しの段が2重に見えるので、
   余白と文字サイズだけで階層を作る */
.guide-groups {
  display: flex;
  flex-direction: column;
  gap: var(--s7);
}

.guide-group-head {
  margin-bottom: var(--s4);
}

.guide-group-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.guide-group-note {
  margin: var(--s1) 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

/* グループ内の続きへの導線。カードと同じ罫線色でつなぐのではなく、
   本文リンクの文法（下線＋矢印）に寄せて「読み物の続き」だと示す */
.guide-group-more {
  display: inline-block;
  margin-top: var(--s3);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.guide-group-more:hover {
  text-decoration-thickness: 2px;
}

/* /guide 一覧の冒頭アンカー。3つしかないので横並び1行に収める */
.guide-group-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin: var(--s4) 0 var(--s6);
  font-size: 0.9375rem;
}

.guide-group-nav a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* アンカー移動時の逃げ幅は [id] の共通指定（--anchor-offset）に任せる */

/* --- 記事カード（施設カードの「台帳」と区別する読み物の文法） --- */

.guide-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s5);
}

/* 記事カードは全件を等幅・等高・同一の面にする（1180px で3列×2行）。
   1枚目だけ幅・余白・ラベルを変えると、同じ行でタイトルの天地と要約の開始行が
   ずれて「壊れている」と読まれる。序列は付けず、並び順だけで新しさを示す。 */
.guide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
  --guide-card-bg: var(--surface);
  background: var(--guide-card-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--sh1);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* 記事カードに「特集」「おすすめ」の序列は付けない。
   淡緑（--accent-soft）は「情報確認済み」バッジの地色なので、編集都合の強調に
   流用すると、このサイトで唯一の色付き面が「確認済み」と「おすすめ」の二重の
   意味になる。罫を1段濃くするだけの差も、意図ではなく塗り忘れに見える。
   6枚は完全に等価な面として並べ、順序だけで新しさを示す。 */

/* 「ガイド記事」ラベルは eyebrow「保護者向けガイド」＋ h2「フリースクール選びの
   ガイド記事」に続く3度目の反復。カテゴリはセクション見出しが既に言っているので
   6枚とも出さない。1枚目にだけ残すと、同じ行でタイトルの天地が約30pxずれる */
.guide-banner .guide-card-kicker {
  display: none;
}

/* /guide 一覧でも同じ理由で出さない。悩み別グループの見出し（h2）の直下に
   「ガイド記事」が5枚連続すると、グループ名より先に同じ語が5回目に入る */
.static-page .guide-card-kicker {
  display: none;
}

/* 見出しは2行で固定し、同じ行のカードで要約の開始位置を揃える */
.guide-banner .guide-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(2em * 1.45);
}

.guide-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--sh2);
}

/* リングの太さはサイト全体で3pxに統一する（ここだけ2pxだと、タブ移動で太さが揺れる）。
   タイトルの a が ::after でカード全面を覆っているので、押せる面はカードそのもの＝44px以上 */
.guide-card:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* カード全面をクリック可能にする（リンク先はタイトルと同じ記事） */
.guide-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-m);
}

.guide-card-kicker {
  margin: 0;
  color: var(--accent-dark);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
}

/* 記事カードの見出しも h3。施設カードの h3 と同じ級数にする
   （同じ画面で h3 が 20px と 18px に割れないようにする） */
.guide-card-title {
  margin: 0;
  font-size: var(--fs-xl);
  line-height: 1.45;
}

/* 見出しリンクは、1行に収まる幅（480px 以上）では実測18〜20pxしかなく、
   WCAG 2.5.8 の最小 24px を割る。文中に埋まったリンクではないので例外に
   当たらない。上下パディングで当たり判定を広げ、同じ値の負マージンで
   カードの余白は1pxも動かさない。
   都道府県ページの施設名リンク（.result-card の h3 > a）も同じ形 */
.guide-card-title a,
.result-card .card-head h3 a {
  display: inline-block;
  padding-block: var(--s1);
  margin-block: calc(var(--s1) * -1);
}

.guide-card-title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 淡緑の面に載るので --muted（4.84:1）ではなく --muted-strong（7.2:1）を使う */
.guide-card-desc {
  margin: 0;
  color: var(--muted-strong);
  font-size: var(--fs-md);
  line-height: 1.8;
}

/* 要約は全カード3行で切り揃える（全文は記事ページで読める） */
.guide-banner .guide-card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.guide-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: auto;
  padding-top: var(--s2);
}

/* 話し手のアイコンはページ内で唯一の多色要素（肌色・ピンク・水色）になり、
   同じ2枚が記事の数だけ並ぶ。「対話形式・約N分」の文字で意味は足りるので出さない
   （記事本文の中では話し手が誰か分かる必要があるので、そちらでは出す） */
.guide-card-avatars {
  display: none;
}

/* 日付を「2026-07-／24」と割らない。入らないときは行を折り返して逃がす */
.guide-card-info {
  color: var(--muted-strong);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: normal;
}

.guide-card-read {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s4);
  margin-left: auto;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-radius: var(--r-full);
  font-size: var(--fs-md);
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.guide-card-read:hover,
.guide-card:hover .guide-card-read {
  color: var(--surface);
  background: var(--accent);
}

.guide-banner .guide-empty {
  color: var(--muted);
  margin: 0;
}

/* --- 読み物ページ（運営者情報・編集方針・お問い合わせ）共通 ---
   トップが全部カードでできているのに、方針ページだけ地の上に本文が直置きだと
   同じサイトに見えない。本文は必ず面（白＋1px罫＋角丸12px・影なし）に載せる。
   保護者がいちばん真面目に読むページなので、行長もここでいちばん短く取る */

/* 1280px では <li> が1行71全角字まで伸びていた。
   本文側に max-width を掛けると面だけが伸びて中身が伸びない（フッターで起きたのと
   同じ空洞ができる）ので、面ごと1本の読み物カラムに落とす。
   660px − パネル内側 32px×2 = 本文596px ≒ 1行37全角字 */
.doc-hero,
.doc-page .section {
  width: min(660px, calc(100% - var(--s6)));
  margin-inline: auto;
}

.doc-hero {
  padding: clamp(40px, 6vw, 72px) 0 var(--s6);
}

.doc-panel {
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}

.doc-panel > p {
  margin-bottom: var(--s4);
}

/* 箇条書きの直後に補足の段落が続くとき、行間と見分けがつかなくなるのを防ぐ */
.doc-panel > * + p {
  margin-top: var(--s5);
}

.doc-panel > :last-child {
  margin-bottom: 0;
}

/* トップの「たしかめ方」と同じチェック付きの箇条書き。
   同じ内容（確かめ方・編集方針）が、ページによって黒丸ビュレットと
   チェックの2通りの体裁で出るのを防ぐ */
.check-list {
  display: grid;
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: var(--s5);
  line-height: 1.9;
}

/* --- 静的生成ページ（施設詳細・都道府県・ガイド記事）共通 --- */

.static-page {
  width: min(100% - var(--s6), var(--container-narrow));
  margin: 0 auto;
  padding: var(--s6) 0 var(--section-gap);
}

.static-page h1 {
  font-size: var(--fs-3xl);
  line-height: 1.35;
  margin: var(--s2) 0 var(--s3);
}

.static-page h2 {
  font-size: var(--fs-xl);
  margin: var(--s7) 0 var(--s4);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.static-page h3 {
  font-size: var(--fs-lg);
  margin: var(--s5) 0 var(--s2);
}

/* 記事カードはトップでもガイド一覧でも同じ部品。
   .static-page h3 の記事本文用の既定（18px）に負けて、同じカードが
   ページによって 20px と 18px に割れるのを防ぐ */
.static-page .guide-card-title {
  margin: 0;
  font-size: var(--fs-xl);
}

/* .lead / .section-heading はトップページ用の定義を上書きする */
.static-page .lead {
  color: var(--muted);
  margin-bottom: var(--s5);
}

.static-page .section-heading {
  display: block;
}

.static-page .section {
  width: 100%;
  padding: 0;
}

/* 都道府県ページ: バッジ凡例。lead の直後に置くので下余白だけ整える */
.pref-status-legend {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: calc(-1 * var(--s3)) 0 var(--s4);
}

/* 都道府県ページ: 掲載3件未満の県で「全施設を網羅済み」と誤読させないための注記 */
.pref-coverage-note {
  margin-top: var(--s5);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
}

.pref-coverage-note p {
  color: var(--muted);
  font-size: var(--fs-md);
  margin: 0;
}

.facility-detail .facility-status {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: var(--s4);
}

/* H1直下の要約ブロック（施設名・所在市区町村・対象学年・オンライン可否・最終確認日・確認状態）。
   保護者が「自分の子に関係あるか」を3秒で判断できるよう、本文の表より先に置く。 */
.facility-detail .facility-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s2) var(--s4);
  margin: var(--s3) 0 var(--s4);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.facility-detail .facility-summary > div {
  margin: 0;
}
.facility-detail .facility-summary dt {
  font-size: var(--fs-sm);
  color: var(--muted);
  letter-spacing: var(--tracking-caption);
  margin: 0;
}
.facility-detail .facility-summary dd {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.facility-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin: var(--s3) 0 var(--s2);
}

.facility-related {
  margin-top: var(--s6);
  font-size: var(--fs-md);
}

/* 施設詳細下部の内部リンク（同県の他施設・関連ガイド） */
.facility-links {
  list-style: none;
  margin: var(--s3) 0 var(--s4);
  padding: 0;
  border-top: 1px solid var(--line);
}

.facility-links li {
  border-bottom: 1px solid var(--line);
  padding: var(--s3) 0;
}

.facility-links a {
  font-size: var(--fs-md);
  font-weight: 600;
}

.facility-links-note {
  display: block;
  margin-top: var(--s1);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.facility-links-more,
.facility-links-empty {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: var(--s4);
}

.facility-links-more a {
  color: inherit;
}

.guide-table-wrap {
  overflow-x: auto;
  margin: var(--s4) 0;
}

.guide-table-wrap table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-md);
}

/* テーブルは格子罫をやめて横罫線のみ */
.guide-table-wrap th,
.guide-table-wrap td {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: var(--s3) var(--s3) var(--s3) 0;
  text-align: left;
  overflow-wrap: anywhere;
}

.guide-table-wrap thead th {
  border-bottom-width: 2px;
}

.guide-table-wrap th {
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* --- ガイド記事（対話形式） --- */

.guide-article {
  max-width: 720px;
  margin: 0 auto;
}

.guide-article .guide-dates {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: var(--s6);
}

.guide-body {
  margin-top: var(--s2);
}

.dialogue {
  display: flex;
  gap: var(--s2);
  margin: var(--s3) 0;
  align-items: flex-start;
}

.dialogue--right {
  flex-direction: row-reverse;
}

.dialogue-speaker {
  flex-shrink: 0;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

/* アバターの縁・名前はニュートラル（キャラ絵自体が識別子になる） */
.dialogue-speaker img {
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  object-fit: cover;
  display: block;
}

.dialogue-speaker-name {
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  color: var(--muted);
}

.dialogue-body {
  max-width: calc(100% - 80px);
  border-radius: var(--r-m);
  padding: var(--s3) var(--s4);
}

/* 吹き出しは「白＋罫線」と「アクセント淡色」の2種のみ */
.dialogue--left .dialogue-body {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top-left-radius: var(--s1);
}

.dialogue--right .dialogue-body {
  background: var(--accent-soft);
  border-top-right-radius: var(--s1);
}

.dialogue-body p {
  margin: 0;
}

/* 強調は蛍光色でなくアクセント淡色の下塗り */
.guide-body mark {
  background: linear-gradient(transparent 55%, var(--accent-soft) 55%);
  padding: 0 1px;
  color: inherit;
}

/* ボックスは「左罫3px＋淡い面」の1パターン。種別は罫の色だけで示す */
.guide-box {
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  background: var(--surface-mute);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0;
}

.guide-box-title {
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-eyebrow);
  margin: 0 0 var(--s2);
  color: var(--accent-dark);
}

/* 注意・断りのボックスは色を足さず、罫と文字をニュートラルに落として区別する */
.guide-box--warning {
  border-left-color: var(--muted);
}

.guide-box--warning .guide-box-title {
  color: var(--muted);
}

.guide-box--steps ol {
  margin: 0;
  padding-left: var(--s5);
}

.guide-box--steps li {
  margin: var(--s1) 0;
}

.guide-figure {
  margin: var(--s5) 0;
}

.guide-figure img {
  max-width: 100%;
  border-radius: var(--r-m);
  border: 1px solid var(--line);
}

.guide-sources ul,
.guide-related ul {
  padding-left: var(--s5);
  line-height: 2;
}

/* --- お問い合わせフォーム（/contact） --- */

/* 「お預かりした情報をどう扱うか」の約束。about の編集方針と同じ内容の種類なので、
   同じチェック付きの体裁（.check-list）にそろえ、黒丸ビュレットと混在させない */
.contact-assurance {
  max-width: 36em;
  margin: var(--s3) 0 0;
  padding: var(--s4) var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  color: var(--text);
  font-size: var(--fs-md);
}

.contact-form {
  display: grid;
  gap: var(--s4);
  max-width: 640px;
  margin-top: var(--s5);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}

.contact-form label {
  display: grid;
  gap: var(--s1);
}

.contact-form label > span {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.contact-form .required-mark {
  margin-left: var(--s1);
  color: var(--accent-dark);
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 700;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--s2) var(--s3);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
}

.contact-form textarea {
  resize: vertical;
}

.contact-form small {
  color: var(--muted);
  font-size: var(--fs-xs);
}

/* honeypot: botにだけ見える欄。display:noneは避ける */
.contact-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 送信そのものを止めうる同意欄。ラベル全体を押せる面（44px）にし、
   チェックボックス自体も 20px → 24px に上げる */
.contact-agree {
  display: flex !important;
  align-items: center;
  gap: var(--s3);
  min-height: var(--tap);
  cursor: pointer;
}

/* チェックボックス自体は 24px（WCAG 2.5.8 の最小）。
   ただし <label> が input とテキストを包んでいるので、実際に押せる面は行全体＝44px */
.contact-agree input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0;
  flex: none;
  accent-color: var(--accent);
}

.contact-agree span {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}

.contact-form button[type="submit"] {
  min-height: 48px;
  padding: 0 var(--s5);
  font-size: var(--fs-md);
}

.contact-form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: wait;
}

.contact-status {
  min-height: 20px;
  margin: 0;
  color: var(--danger);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.contact-done {
  max-width: 640px;
  margin-top: var(--s5);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  display: grid;
  gap: var(--s3);
  justify-items: start;
}

.contact-done h2 {
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

.contact-done-note {
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* --- 管理・レビュー画面（社内向け） --- */

.admin-hero,
.admin-layout {
  width: min(var(--container), calc(100% - var(--s6)));
  margin: 0 auto;
}

.admin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--s5);
  padding: clamp(42px, 6vw, 74px) 0 var(--s6);
}

.admin-hero h1 {
  max-width: 720px;
  color: var(--text);
}

.admin-summary {
  display: grid;
  gap: var(--s3);
  align-content: start;
}

.admin-summary div,
.admin-panel,
.review-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}

.admin-summary div {
  padding: var(--s4);
}

.admin-summary strong {
  display: block;
  color: var(--accent-dark);
  font-size: var(--fs-3xl);
  line-height: 1.2;
}

.admin-summary span {
  color: var(--muted);
  font-weight: 700;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--s5);
  padding-bottom: var(--section-gap);
}

.admin-panel {
  padding: var(--s5);
}

.review-list {
  display: grid;
  gap: var(--s3);
}

.review-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: var(--s4);
  padding: var(--s4);
}

.review-item h3 {
  margin: var(--s2) 0 var(--s1);
}

.review-item p {
  margin-bottom: var(--s2);
  color: var(--muted);
}

.review-actions {
  display: grid;
  gap: var(--s2);
  align-content: start;
}

.review-actions button {
  min-height: 40px;
  border: 0;
}

.reject {
  color: var(--danger);
  background: var(--danger-soft);
}

.timeline {
  display: grid;
  gap: var(--s3);
}

.timeline div {
  padding-left: var(--s3);
  border-left: 3px solid var(--accent);
}

.timeline p {
  margin: var(--s1) 0 0;
  color: var(--muted);
  font-size: var(--fs-md);
}

.review-checklist,
.route-list {
  display: grid;
  gap: var(--s3);
}

.review-checklist label {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--s2);
  align-items: start;
  padding: var(--s3);
  background: var(--surface-mute);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
}

.route-list a {
  display: flex;
  justify-content: space-between;
  padding: var(--s3);
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-radius: var(--r-s);
  font-weight: 700;
}

/* --- トースト --- */

.toast {
  position: fixed;
  right: var(--s4);
  bottom: var(--s4);
  z-index: 20;
  max-width: min(420px, calc(100% - var(--s6)));
  padding: var(--s3) var(--s4);
  color: var(--surface);
  background: var(--text);
  border-radius: var(--r-s);
  box-shadow: var(--sh2);
}

/* =============================================================
   5. レスポンシブ
   段は 1024 / 768 / 480 の3つだけ。新しい閾値を足さない
   （旧 980 / 620 / 640 は近接して後勝ちが起きていたので統合した）
   ============================================================= */

/* --- 1024px: 多カラム → 1カラム --- */
@media (max-width: 1024px) {
  /* ナビを消すのではなく、ハンバーガーで開けるドロワーに置き換える。
     スマホ主体の保護者にナビもCTAも無い状態は致命的なので、必ず開く手段を残す。
     JSが動かない場合は data-open が付かず、これまでどおり非表示のまま（劣化しない） */
  .nav-toggle {
    display: inline-flex;
  }

  /* ドロワーは全幅に開く。グリッドの2列目に置いたままだと、絶対配置の
     包含ブロックが「2列目のグリッドエリア」になり、画面中央に幅144pxの
     短冊として開いてしまう。列指定を外して包含ブロックをヘッダー自身に戻す */
  .site-header > .main-nav {
    grid-column: auto;
    justify-self: stretch;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s2) var(--edge-pad) var(--s3);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh2);
  }

  .main-nav[data-open="true"] {
    display: flex;
  }

  /* 行そのものを押せる面にする。指で押す前提なので48px */
  .main-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--s2);
    color: var(--text);
    border-bottom: 1px solid var(--line);
  }

  .main-nav a:last-child {
    border-bottom: 0;
  }

  /* 右の地図入口・証跡パネルはコピー・検索・掲載状況の下へ回す（探す導線を先に見せる） */
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
  }

  .admin-hero,
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .card-meta {
    grid-template-columns: repeat(2, 1fr);
  }

  .review-item {
    grid-template-columns: 1fr;
  }
}

/* --- 768px: 横並びの塊を崩す --- */
@media (max-width: 768px) {
  :root {
    --section-gap: var(--s7);
  }

  /* 47個の絞り込みチップを1〜2列にすると縦に1200px以上流れる。
     375px でも3列は保ち、スクロール量を半分に抑える */
  .area-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }

  .area-grid button {
    font-size: var(--fs-sm);
  }

  /* 指で押す幅では 34px のチップは低すぎる。マウス前提の広い画面ではそのまま */
  .chips .chip {
    min-height: var(--tap);
    padding: 0 var(--s4);
  }

  /* 375px幅では全国図が330px、施設ドットが2〜3pxで指では選べない。
     「ドットを選ぶと詳細が開きます」と書いてあるのに押せないのは不誠実なので、
     この幅では地図を出さず、代わりに都道府県のランキングを主役にする */
  .japan-map-wrap {
    display: none;
  }

  .on-wide {
    display: none;
  }

  .on-narrow {
    display: revert;
  }

  /* 検索の3列が窮屈になるのはここから。1024pxではまだ横並びが成立する */
  .search-panel {
    grid-template-columns: 1fr;
  }

  .results-head,
  .section-heading {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  /* 1カラムに落とすので、右に逃がしていた操作も左の列に戻す */
  .section-heading > a,
  .section-heading > button,
  .results-head > a,
  .results-head > button,
  .results-head > .results-sort {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  /* 記事カードは1列に積む。6枚とも同じ面・同じ余白のままにして、
     ブレークポイント間で不整合を作らない */
  .guide-cards,
  .guide-banner .guide-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 1列では横に並ぶ相手がいないので、見出しの2行ぶんを確保しない */
  .guide-banner .guide-card-title {
    min-height: 0;
  }

  /* 3行で切り揃えるのは、横に並ぶカードと高さをそろえるため。1列では相手が
     いないので解除する。-webkit-box のままだと text-wrap: balance が効かず、
     要約の最終行が「た。」の2字だけで終わる（実測3件） */
  .guide-banner .guide-card-desc {
    display: block;
    overflow: visible;
  }

  /* 特徴カードは2列に落とす（4列のままだとラベルが1文字ずつ折れる） */
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 実績数字は縦積みにせず、仕切り罫だけ外して折り返しに任せる */
  .hero-stat + .hero-stat {
    padding-left: 0;
    border-left: 0;
  }

  .site-footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer-brand {
    grid-column: 1 / -1;
  }

  .site-footer-bottom {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer-meta {
    text-align: left;
  }

}

/* --- 480px: SPタイポグラフィと1カラム化 --- */
@media (max-width: 480px) {
  /* ヘッダーが低くなるぶん、アンカーの逃げ幅も一緒に縮める */
  :root {
    --header-h: 64px;
  }

  .site-header {
    min-height: var(--header-h);
  }

  /* ヘッダーはSPでも全ページ同じ形（ロゴ・主導線・メニュー）で1行に収める。
     旧: トップだけ画面下の固定CTAに主導線を渡してヘッダーのCTAを畳んでいたため、
     トップ 69px / 運営者情報 85px（CTAが「施設を／探す」と2行に折れる）と、
     ページを移るたびにヘッダーの高さと中身が入れ替わっていた。
     375px に3つ並べる余地を作るため、この幅だけ左右の余白・列間・級数を1段落とす */
  .site-header {
    /* 中央の列（ナビ）はドロワーになって在庫が無いので、この幅では
       3等分をやめて中身の幅で置く。等分のままだと 375px で
       ロゴが自分の列から 5px はみ出す */
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr) max-content;
    gap: var(--s3);
    padding-inline: var(--s3);
  }

  .site-header > .header-tools {
    gap: var(--s2);
  }

  /* start のままだと中身の幅で固定され、列が足りなくなっても縮まない */
  .site-header > .brand {
    justify-self: stretch;
  }

  /* 級数は 15px まで。13px まで落とすと、サイト名も主導線も実機で読めない */
  /* 320px 級の端末では3つ並べても入りきらない。そのときに縮めるのはサイト名
     （ロゴマークは残るので識別できる）で、主導線とメニューの当たり判定は削らない */
  .brand {
    gap: var(--s2);
    min-width: 0;
    font-size: var(--fs-md);
  }

  .brand > span:not(.brand-mark) {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand-mark {
    flex: none;
    width: 32px;
    height: 32px;
  }

  /* 折り返させない。折れた瞬間にヘッダーの高さが 16px 伸び、
     他ページと枠が揃わなくなる */
  .header-action {
    flex: none;
    padding: 0 var(--s3);
    font-size: var(--fs-md);
    white-space: nowrap;
  }

  .hero-inner,
  .section,
  .results,
  .site-footer-inner,
  .site-footer-bottom,
  .site-footer-note,
  .admin-hero,
  .admin-layout,
  .doc-hero,
  .doc-page .section {
    width: min(100% - var(--s5), var(--container));
  }

  /* 32px の内側余白のままだと、375px で本文が1行17全角字しか入らない。
     読み物ページは行長がいちばん効くので、この幅では内側を16pxまで詰めて
     1行20字前後を確保する（面はそのまま残す） */
  .doc-panel {
    padding: var(--s4);
  }

  .check-list li {
    padding-left: var(--s4);
  }

  /* 主役の「検索する」を1画面目に収めるため、ヒーロー上部と検索パネルの余白を詰める */
  .hero-inner {
    padding-top: var(--s5);
  }

  .search-panel {
    gap: var(--s3);
    padding: var(--s4);
  }

  /* 狭い画面では「気になった／フリースクールへ、／まっすぐ。」と3行に割れ、
     1行目だけ極端に短いデコボコになる。級数と字間を詰めて2行に収め、
     かたまりの nowrap も外して（外さないと横スクロールが出る）自然に折る */
  .hero .hero-title {
    font-size: clamp(24px, 6.4vw, 30px);
    letter-spacing: 0.01em;
  }

  .hero-title span {
    display: inline;
    white-space: normal;
  }


  .lead {
    font-size: var(--fs-base);
  }

  /* SPの見出し階層は h1 24px > h2 20px > h3 18px の3段で必ず単調に下げる。
     デスクトップ（44 / 30 / 20）と同じく、レベル1つにサイズ1つを守る。
     検索パネルの見出しもセクション見出しと同じ h2 なので必ず同じ値にする */
  .section-heading h2,
  .results-head h2,
  .search-panel-heading h2 {
    font-size: var(--fs-xl);
  }

  .result-card .card-head h3,
  .guide-card-title,
  .static-page .guide-card-title {
    font-size: var(--fs-lg);
  }

  .static-page h1 {
    font-size: var(--fs-2xl);
  }

  .card-meta,
  .detail-list {
    grid-template-columns: 1fr;
  }

  .dialogue-speaker {
    width: 48px;
  }

  .dialogue-speaker img {
    width: 44px;
    height: 44px;
  }

  .dialogue-body {
    max-width: calc(100% - 64px);
  }

  .site-footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* カードが1列になる幅では横に並ぶ相手がいないので、施設名の2行ぶんを確保しない
     （空の1行が「名前と所在地が離れている」ようにしか見えないため） */
  .result-card .card-head h3 {
    min-height: 0;
  }

  /* minmax(320px, 1fr) のままだと、320px 端末（コンテナ 296px）で
     カードが 320px のまま残り、ページ全体に12pxの横スクロールが出る。
     この幅ではどのみち1列なので、下限を外して列幅に従わせる */
  .cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .results-more-button {
    width: 100%;
    padding: 0 var(--s4);
  }

  /* 特徴カードはこの幅でも2列を保ち、内側の余白と円座布団を1段縮める */
  .feature-card {
    padding: var(--s4) var(--s2);
    font-size: var(--fs-sm);
  }

  .feature-card-icon {
    width: 48px;
    height: 48px;
  }

  .feature-card-icon svg {
    width: 22px;
    height: 22px;
  }

  .hero-stat-icon {
    width: 40px;
    height: 40px;
  }

  .hero-stat-body strong {
    font-size: var(--fs-xl);
  }
}

/* --- 最新記事ティッカー（トップページ・ヒーロー直下） ---
   最新ガイド記事8本を横に流し続けるマーキー。HTMLには1セットだけあり、
   nav.js がループ用の複製（aria-hidden）を足して .guide-ticker--loop / .guide-ticker-track--loop を付ける。
   トラックを -50% までずらすと同じ絵に戻るので途切れなく見える。
   ホバー・フォーカス中は一時停止（読んでいる途中に流れて行かないように）。
   複製がない状態（JS無効・reduced-motion）は静止して横スクロールに切り替える */
.guide-ticker {
  overflow-x: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.guide-ticker-track {
  display: flex;
  width: max-content;
}

.guide-ticker--loop {
  overflow: hidden;
}

.guide-ticker-track--loop {
  animation: guide-ticker-flow 56s linear infinite;
}

.guide-ticker:hover .guide-ticker-track,
.guide-ticker:focus-within .guide-ticker-track {
  animation-play-state: paused;
}

@keyframes guide-ticker-flow {
  to {
    transform: translateX(-50%);
  }
}

.guide-ticker-list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-ticker-item {
  flex: none;
  border-right: 1px solid var(--line);
}

.guide-ticker-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: max-content;
  max-width: 300px;
  padding: 18px 28px;
  text-decoration: none;
}

.guide-ticker-kicker {
  font-size: var(--fs-xs);
  color: var(--accent-dark);
  font-weight: 700;
}

.guide-ticker-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
}

.guide-ticker-link:hover .guide-ticker-title,
.guide-ticker-link:focus-visible .guide-ticker-title {
  color: var(--accent-dark);
  text-decoration: underline;
}

.guide-ticker-date {
  font-size: var(--fs-xs);
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  /* nav.js は reduced-motion では複製を作らないが、念のためCSS側でも止める */
  .guide-ticker--loop {
    overflow-x: auto;
  }

  .guide-ticker-track--loop {
    animation: none;
  }

  /* 静止表示ではループ用の複製が「同じ記事が2回並ぶ」ノイズになるので隠す */
  .guide-ticker-list[aria-hidden="true"] {
    display: none;
  }
}

/* --- スクロール出現アニメーション ---
   .reveal は nav.js（全ページ共通）が対象（記事カード・特徴カード・地図）に付け、
   画面に入ると .reveal--in でふわっと浮き上がる。出現後は両クラスとも外されるので、
   ホバー時の transform は各部品自身の transition に戻る。
   ※各部品の transition 指定（.guide-card 等）より必ず後勝ちさせるため、
     この位置（コンポーネント定義とレスポンシブの後・reduced-motion の直前）に置く。
   reduced-motion では .reveal 自体が付かない（JS側で分岐） */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal--in {
  opacity: 1;
  transform: none;
}

/* =============================================================
   6. 動きを減らす設定（prefers-reduced-motion）
   ここは必ずファイル末尾に置く（あとから来た transition に負けないため）。
   前庭障害のある利用者に、スムーススクロールと動きを一切当てない
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}