/*
Theme Name: Kouikuken
Theme URI: https://kouikuken.com/
Author: 公務員育成研究会
Description: kouikuken.com 専用クラシックテーマ。モックアップ「端正なデータベース（官立の索引）— Registry & Index」のCSSを移植。title/meta/canonical/JSON-LD は AIOSEO に委任する。
Version: 0.1.0
Requires at least: 6.3
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kouikuken
*/

/* ============================================================
   ソース構成（モックアップからの移植元）
   1) 共通:        モックアップ/assets/style.css（全文そのまま）
   2) トップ固有:  index.html <style>（.hero / .stats / .region-index / .news-list / .content-cards / .about-blurb）
   3) 記事固有:    article.html <style>（.article-header / .rec-table / .q-list / .source-note / .related-* 等）
   4) ハブ固有:    hub.html <style>（.hub-* / .pref-card* / .muni-row / .region-chips。モック専用 .demo-note は除外）
   5) 面接記事固有: interview.html <style>（.part-label / .toc-2col / .callout / .step-list 等）
   クラス名はモックのまま変更しない。重複していた @keyframes capPulse は1定義に整理。
   注意: .related-sub は 3) と 5) の両方に定義があり、後勝ちで 5) が優先される（モックの読み込み順と同等）。
   ============================================================ */


/* ================================================================
   1) 共通スタイル（assets/style.css 全文）
   ================================================================ */

/* ============================================================
   kouikuken.com サイト刷新モックアップ 共通スタイル
   案「端正なデータベース（官立の索引）— Registry & Index」
   ------------------------------------------------------------
   ▼ このファイルは3ページ（index.html / article.html / hub.html）共通。
     ページ固有の微調整はこのファイルを編集せず、各HTML内の <style> に書くこと。

   ▼ 記事・ハブ担当者向け 共通クラス早見表
   ------------------------------------------------------------
   【レイアウト】
   .container            最大幅1080px・左右16px（≥768pxで24px）
   .container--narrow    最大幅840px（ハブページ用。.containerと併用）
   .section              padding 40px 0 のセクション
   .section--alt         背景 --bg-section（セクション交互背景）
   .section-head         見出し行（h2左・注記右のflex）
   .section-title        H2に付与。下に32px×2pxの金ショートルールが出る
   .section-note         見出し右の13pxグレー注記（例「全68自治体」）

   【共通ヘッダー（3ページ同一マークアップで使う）】
   <a class="skip-link" href="#main">本文へスキップ</a>
   <div class="brand-band" aria-hidden="true"></div>   ← 紺4px+金1pxのシグネチャ帯
   <header class="site-header">
     <div class="container">
       <a class="site-logo" href="index.html">
         <span class="logo-name">公務員育成研究会</span>
         <span class="logo-sub">論作文過去問データベース</span>
       </a>
       <nav class="site-nav" aria-label="メイン">
         <a href="index.html#index">自治体をさがす</a>
         <a href="index.html#about">About Us</a>
       </nav>
     </div>
   </header>
   ※ロゴ2行目(.logo-sub)はモバイルで自動非表示。

   【共通フッター】
   <footer class="site-footer"><div class="container">
     <div class="footer-grid">
       <div><h2 class="footer-title">…</h2><ul class="footer-links">…</ul></div> ×3
     </div>
     <div class="footer-bottom">© 2026 公務員育成研究会</div>
   </div></footer>
   3カラム目は .footer-logo（.logo-name/.logo-sub 再利用可）。

   【パンくず】
   <nav class="breadcrumb" aria-label="パンくず"><ol>
     <li><a href="index.html">HOME</a></li>
     <li><a href="hub.html">関東</a></li>
     <li><a href="hub.html">東京都</a></li>
     <li><span aria-current="page">東京都庁｜論文・作文｜過去問まとめ</span></li>
   </ol></nav>
   区切り「›」はCSSで自動挿入。schema.org BreadcrumbList のJSON-LDを併記すること。

   【ボタン】（最小タップ領域44px確保済み）
   .btn                 基本形（inline-flex・角丸4px）
   .btn-primary         紺地白字（hover --navy-500）
   .btn-secondary       白地・紺1px枠・紺字（「全て開く/閉じる」等）
   .btn-cta             赤地(--red)×白太字。**「解答例を読む」CTA専用**。他用途禁止
   .btn-sm              小型（padding 8px 16px・14px）

   【バッジ・チップ】（11px/600/ls .08em）
   .badge .badge-pref   緑（--cat-pref系）＝種別「都道府県庁」
   .badge .badge-city   橙（--cat-city系）＝種別「市役所」
   .badge .badge-police 青（--cat-police系）＝種別「警察本部」（将来用）
   .badge .badge-fire   赤（--cat-fire系）＝種別「消防本部」（将来用）
   .badge .badge-navy   紺枠紺字＝カテゴリ「論作文」等の汎用
   .badge .badge-gray   グレー枠＝新着欄の「更新」等の汎用
   .badge .badge-gold   金枠・--gold-700字＝「公開中」「12件」「新着」
   .badge .badge-muted  グレー地・枠なし＝「準備中」
   .chip-pdf            「PDF」チップ専用（--pdf色。他用途禁止）
   .cond-chips > .chip  記事冒頭の条件チップ（形式/時間/文字数）

   【カード】
   a.card               白地1px枠・角丸6px・hoverで枠--navy-500
   .card--disabled      破線枠・--ink-3・非リンク（準備中カード。<div>で使う）
   .card-head / .card-title / .card-desc

   【索引テーブル】
   <div class="scroll-x"><table class="index-table">…</table></div>
   caption=左揃え13px。th=紺地白字。数字セルは <td class="num">。
   偶数行縞・行hoverは自動。モバイルで列を隠す場合は各ページ<style>で
   [data-priority="low"]{display:none} 等を書く。

   【記事レイアウト】
   .article-layout      ≥1024pxで main+300pxサイドバーの2カラムgrid
   .article-main        本文側（max-width 720px）
   .article-sidebar     ≥1024pxのみ表示・sticky top:24px
   .sidebar-box / .sidebar-title
   .article-body        本文タイポ（16px/lh1.9・p間1em）
   .meta-line           13pxメタ行（tabular-nums適用済み）
   .toc-box             テキスト型記事用の目次<nav>（枠1px・--bg-stripe地）
   h2.section-bar       区分見出し（--bg-section地＋左4px紺罫）
   .acc-controls        「＋全て開く／−全て閉じる」右寄せ行

   【年度アコーディオン】
   <section class="year-group">
     <details class="year-row" open>            ← 最新年度のみ open 推奨
       <summary><h3>2024年度</h3>
         <span class="year-meta">PDF 1件</span>
         <svg class="chevron" …>（下記チェブロン）</svg>
       </summary>
       <div class="year-body">…中身は初期HTMLに常置…</div>
     </details>…
   </section>
   .year-body には content-visibility:auto 適用済み（長大記事の描画対策）。
   ★ハッシュ→閉じたdetailsを自動openするJSを記事ページに必ず入れること。

   【記事の中身部品】
   .file-row            PDFファイル行（.chip-pdf＋リンク＋右端DLアイコン）
   .question / .q-label / .q-note   問題文ブロック（左3px金罫＋「問題」ラベル）
   .mobile-toolbar      画面下端sticky操作バー（<1024pxのみ表示。hidden属性で出し分け）
   .pager               前後の自治体ページネーション
   .share-row > .icon-btn   シェアアイコンボタン列（44px角）

   【ハブ部品】
   .region-tabs         8地域の横スクロールタブ（現在地は aria-current="page"）
   .link-rows           自治体行リスト（外枠1px・角丸6px）
     <li class="group-head">東京都（1）</li>       ← 都道府県グループ見出し
     <li><a class="link-row" href="…">
       <span class="row-name">東京都庁</span>
       <span class="badge badge-navy">都道府県庁</span>
       <span class="row-arrow">›</span></a></li>

   【検索コンボボックス】
   HTML/JSとも index.html の「muni-data」JSONブロックと
   「検索コンボボックス」<script> をそのままコピーして使う（68自治体データ入り）。
   <form class="searchbox" role="search" action="https://kouikuken.com/" method="get"
         data-combobox data-empty-href="index.html#index">
     （検索アイコンSVG＋ <input name="s" role="combobox"> ＋ <ul role="listbox" hidden>）
   </form>
   小型版はフォームに .searchbox--sm を追加（サイドバー/ハブ用）。
   JS無効時は /?s= のGET検索としてそのまま動く（no-JSフォールバック）。

   【アイコン（inline SVG・currentColor・stroke1.5px の5種のみ）】
   検索:    <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/>
   chevron: <path d="M6 9l6 6 6-6"/>
   ›       （テキスト文字で可。.row-arrow）
   DL:      <path d="M12 3v12m0 0l-4-4m4 4l4-4M4 19h16"/>
   外部:    <path d="M14 5h5v5M19 5l-8 8M9 5H5v14h14v-4"/>

   【横断規約】
   ・sticky/アンカー事故防止: 見出し隠れは --sticky-offset で一元管理。
     stickyバーを持つページは自ページ<style>で
     :root{--sticky-offset:64px} 等に上書きする（[id]のscroll-margin-topに反映される）。
   ・スペーシングは8pxグリッド（4/8/12/16/24/32/40/56）。
   ・影は .mobile-toolbar と .search-listbox のみ。角丸は4px/6pxの2値のみ。
   ・金(--gold-500/300)は罫・バッジ枠・フォーカス・紺地上の文字・CTA地のみ。
     白地の金文字は --gold-700 かつ13px以下・太字に限る。
   ============================================================ */

/* ---------- 1. デザイントークン ---------- */
/* ブランド正式カラー（2026-07-16 ユーザー支給）:
   基本テーマ #04032D（ブルー）／ゴールド #D8C392／アクセント赤 #BB271A
   navy-700/500・gold-700/500 は同系色から導出した派生トーン（白地文字のAAコントラスト確保用） */
:root {
  --navy-900: #04032D;
  --navy-700: #17153F;
  --navy-500: #312D6E;
  --link: #1D50A2;
  --gold-700: #7A6329;
  --gold-500: #B99B54;
  --gold-300: #D8C392;
  --red: #BB271A;
  --red-700: #99190E;
  --ink: #1F2530;
  --ink-2: #4B5563;
  --ink-3: #6B7280;
  --line: #D8DCE3;
  --line-strong: #9AA3B0;
  --bg-stripe: #F6F7F9;
  --bg-section: #F2F4F7;
  --pdf: #A2352A;
  /* カテゴリ識別色（note運用と共通。メイン=枠・大きい面、ink=バッジ小文字、bg=薄地） */
  --cat-pref: #215034;    --cat-pref-bg: #E7FFDD;
  --cat-city: #C6812C;    --cat-city-ink: #7D5217;  --cat-city-bg: #FFF7D8;
  --cat-police: #133581;  --cat-police-bg: #DEF4FF;
  --cat-fire: #791636;    --cat-fire-bg: #FFE9EC;
  --font: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  /* 見出し用明朝（ロゴの游明朝体と響かせる。Webフォント不使用＝OS内蔵のみ。
     Android等の明朝非搭載環境は serif フォールバック） */
  --font-serif: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "BIZ UDPMincho", "Noto Serif JP", serif;
  --shadow-sticky: 0 1px 3px rgba(15, 27, 49, .08);
  /* stickyバー導入ページは各ページ<style>でこの値を上書きする */
  --sticky-offset: 16px;
}

/* ---------- 1.5 本文の強調・外部リンク（全記事共通） ----------
   strong: 通常の太字（多用してよい・段落の骨格語）
   .marker: 金のマーカー（1セクション1箇所が目安。持ち帰ってほしい結論だけ）
   a.ext: 外部リンク（↗付き・target=_blank rel=noopener で使う） */
.article-body strong { font-weight: 700; }
/* リストの中黒はブランドゴールドの差し色に */
.article-body ul > li::marker { color: var(--gold-500); }
.marker {
  background: linear-gradient(transparent 58%, rgba(216, 195, 146, .55) 58%);
  font-weight: 700;
  padding: 0 1px;
}
a.ext::after { content: "↗"; font-size: .78em; margin-left: 2px; opacity: .75; }

/* ---------- 2. リセット・ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
}
img, svg { max-width: 100%; vertical-align: middle; }
table { border-collapse: collapse; }
button { font-family: inherit; }
[id] { scroll-margin-top: var(--sticky-offset); }

h1, h2, h3, h4 { margin: 0; font-weight: 700; text-wrap: balance; }
/* H1はbalance/prettyだと行を詰めて中途半端な位置で折り返すため通常折り返しに（2026-07-24） */
h1 { text-wrap: wrap; }
h1 { font-family: var(--font-serif); font-size: 24px; line-height: 1.35; letter-spacing: .03em; color: var(--navy-700); }
h2 { font-family: var(--font-serif); font-size: 20px; line-height: 1.4; letter-spacing: .02em; color: var(--navy-700); }
/* 小さなUI見出しはゴシックのまま（明朝は大見出し専用） */
.sidebar-title, .footer-title { font-family: var(--font); letter-spacing: normal; }
h3 { font-size: 17px; line-height: 1.5; }
@media (min-width: 1024px) {
  h1 { font-size: 30px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }
}
p { margin: 1em 0; }

/* リンク: 常時下線（操作可能性は色でなく下線で示す） */
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:visited { color: var(--link); }
a:hover { color: var(--navy-500); text-decoration-thickness: 2px; }

/* フォーカス可視化（全インタラクティブ要素共通） */
:focus { outline: 2px solid var(--gold-500); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- 3. レイアウト ---------- */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 768px) {
  .container { padding-left: 24px; padding-right: 24px; }
}
.container--narrow { max-width: 840px; }

.section { padding: 40px 0; }
.section--alt { background: var(--bg-section); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.section-title {
  position: relative;
  padding-bottom: 12px;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--gold-500);
}
.section-note { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- 4. ヘッダー ---------- */
.skip-link {
  position: absolute;
  left: 8px;
  top: -56px;
  z-index: 100;
  background: var(--navy-700);
  color: #fff;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14px;
}
.skip-link:focus { top: 8px; }

.brand-band {
  height: 4px;
  background: var(--navy-700);
  border-bottom: 1px solid var(--gold-500);
}
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
}
@media (min-width: 768px) {
  .site-header > .container { min-height: 64px; }
}
.site-logo { text-decoration: none; line-height: 1.3; padding: 8px 0; }
.site-logo:hover { text-decoration: none; }
/* ロゴ画像（ヘッダー=ブラック版、フッター=ゴールド版。実寸1459x250のトリミング済PNG） */
.logo-img { display: block; height: 36px; width: auto; }
@media (min-width: 768px) { .logo-img { height: 42px; } }
.footer-logo .logo-img { height: 40px; margin-bottom: 4px; }
.logo-name {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-700);
}
.logo-sub {
  display: block;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--ink-3);
}
.site-nav { display: flex; gap: 8px; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  font-size: 14px;
  color: var(--navy-700);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .site-header .logo-sub { display: none; }
  .site-header .logo-name { font-size: 15px; white-space: nowrap; }
  .site-nav { gap: 0; }
  .site-nav a { font-size: 13px; padding: 0 6px; }
}

/* ---------- 5. フッター ---------- */
.site-footer {
  background: var(--navy-900);
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
  padding: 40px 0 24px;
  margin-top: 0;
}
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
.footer-title {
  color: var(--gold-300);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  margin: 0 0 12px;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { padding: 2px 0; }
.footer-links a {
  color: rgba(255, 255, 255, .8);
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}
.footer-links a:hover { color: #fff; }
.footer-logo .logo-name { color: #fff; }
.footer-logo .logo-sub { color: var(--gold-300); }
.footer-note { font-size: 13px; color: rgba(255, 255, 255, .6); margin-top: 12px; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .15);
  margin-top: 32px;
  padding-top: 16px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
}

/* ---------- 6. パンくず ---------- */
.breadcrumb { padding: 12px 0; font-size: 13px; }
.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  white-space: normal;
}
.breadcrumb li + li::before {
  content: "›";
  margin: 0 8px;
  color: var(--ink-3);
}
.breadcrumb [aria-current="page"] { color: var(--ink-2); }

/* ---------- 7. ボタン ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  background: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--navy-700); color: #fff; }
.btn-primary:hover { background: var(--navy-500); color: #fff; }
.btn-secondary { background: #fff; border-color: var(--navy-700); color: var(--navy-700); }
.btn-secondary:hover { border-color: var(--navy-500); color: var(--navy-500); background: var(--bg-stripe); }
/* 「解答例を読む」CTA専用。唯一の金地面（18px相当・紺太字でコントラストAA確保） */
.btn-cta { background: var(--red); color: #fff; font-size: 16px; font-weight: 700; }
.btn-cta:hover { background: var(--red-700); color: #fff; }
.btn-sm { padding: 8px 16px; font-size: 14px; }

/* ---------- 8. バッジ・チップ ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.6;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.badge-navy { color: var(--navy-700); border-color: var(--navy-700); background: #fff; }
.badge-gray { color: var(--ink-2); border-color: var(--line-strong); background: #fff; }
.badge-gold { color: var(--gold-700); border-color: var(--gold-500); background: #fff; }
.badge-muted { color: var(--ink-2); background: var(--bg-section); border-color: transparent; }
/* カテゴリ識別バッジ（都道府県庁/市役所/警察本部/消防本部。noteの識別色と共通） */
.badge-pref   { color: var(--cat-pref);       border-color: var(--cat-pref);   background: var(--cat-pref-bg); }
.badge-city   { color: var(--cat-city-ink);   border-color: var(--cat-city);   background: var(--cat-city-bg); }
.badge-police { color: var(--cat-police);     border-color: var(--cat-police); background: var(--cat-police-bg); }
.badge-fire   { color: var(--cat-fire);       border-color: var(--cat-fire);   background: var(--cat-fire-bg); }

.chip-pdf {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--pdf);
  border: 1px solid var(--pdf);
  background: #fff;
  white-space: nowrap;
}

.cond-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.cond-chips .chip {
  background: var(--bg-stripe);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 13px;
  color: var(--ink-2);
}

/* ---------- 9. カード ---------- */
.card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 20px;
  color: var(--ink);
  text-decoration: none;
}
a.card:hover { border-color: var(--navy-500); text-decoration: none; color: var(--ink); }
.card--disabled {
  border-style: dashed;
  color: var(--ink-3);
  cursor: default;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.card-title { font-size: 17px; font-weight: 700; color: var(--navy-700); }
.card--disabled .card-title { color: var(--ink-3); }
.card-desc { font-size: 13px; color: var(--ink-2); margin: 8px 0 0; line-height: 1.6; }
.card--disabled .card-desc { color: var(--ink-3); }

/* ---------- 10. 索引テーブル ---------- */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.index-table {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line-strong);
  font-size: 14px;
  line-height: 1.6;
}
.index-table caption {
  caption-side: top;
  text-align: left;
  font-size: 13px;
  color: var(--ink-2);
  padding-bottom: 8px;
}
.index-table th {
  background: var(--navy-700);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;
}
.index-table td {
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.index-table td.sub { font-size: 14px; }
.index-table tbody tr:nth-child(even) { background: var(--bg-stripe); }
.index-table tbody tr:hover { background: var(--bg-stripe); }
.index-table .num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- 11. 検索コンボボックス ---------- */
.searchbox { position: relative; max-width: 560px; }
.search-input {
  width: 100%;
  height: 52px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  padding: 0 16px 0 48px;
  appearance: none;
  -webkit-appearance: none;
}
.search-input::placeholder { color: var(--ink-3); }
.search-icon {
  position: absolute;
  left: 16px;
  top: 26px;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}
.searchbox--sm .search-input { height: 44px; font-size: 14px; padding-left: 40px; }
.searchbox--sm .search-icon { left: 12px; top: 22px; width: 18px; height: 18px; }
.search-listbox {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  box-shadow: var(--shadow-sticky);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  text-align: left;
}
.search-listbox[hidden] { display: none; }
.search-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}
.search-option:hover,
.search-option[aria-selected="true"] { background: var(--bg-stripe); }
.search-option .opt-meta { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.search-option mark {
  background: none;
  color: var(--navy-500);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.search-empty { padding: 12px 16px; font-size: 14px; color: var(--ink-2); }

/* ---------- 12. 記事レイアウト ---------- */
.article-layout { display: block; }
.article-main { max-width: 720px; }
.article-sidebar { display: none; }
@media (min-width: 1024px) {
  .article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    align-items: start;
  }
  .article-sidebar {
    display: block;
    position: sticky;
    top: 24px;
  }
}
.sidebar-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}
.sidebar-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-700);
  margin: 0 0 8px;
}
.sidebar-box ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.sidebar-box li { border-top: 1px solid var(--line); }
.sidebar-box li:first-child { border-top: 0; }
.sidebar-box li a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 4px 0;
}

.article-body { font-size: 16px; line-height: 1.9; }
.article-body p { margin: 1em 0; }

.meta-line {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* テキスト型記事用の通常目次 */
.toc-box {
  border: 1px solid var(--line);
  background: var(--bg-stripe);
  padding: 16px 20px;
  font-size: 14px;
  margin: 24px 0;
}
.toc-box ol { margin: 8px 0 0; padding-left: 1.5em; }
.toc-box li { padding: 4px 0; }

/* 区分見出し（H2）＝セクションバー様式 */
h2.section-bar {
  background: var(--navy-900);
  border-left: 4px solid var(--gold-300);
  padding: 10px 14px;
  color: #fff;
  margin: 2.5em 0 1em;
}

.acc-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 16px 0;
}

/* ---------- 13. 年度アコーディオン ---------- */
.year-group {
  border: 1px solid var(--line-strong);
  background: #fff;
  margin: 16px 0 32px;
}
details.year-row + details.year-row { border-top: 1px solid var(--line); }
.year-row > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 4px 16px;
  cursor: pointer;
  list-style: none;
}
.year-row > summary::-webkit-details-marker { display: none; }
.year-row > summary::marker { content: ""; }
.year-row > summary:hover { background: var(--bg-stripe); }
.year-row[open] > summary {
  background: var(--bg-stripe);
  border-bottom: 1px solid var(--line);
}
.year-row summary h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  color: var(--ink);
}
.year-row .year-meta {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.year-row .chevron {
  flex-shrink: 0;
  color: var(--ink-3);
  transition: transform .15s;
}
.year-row[open] .chevron { transform: rotate(180deg); }
.year-body {
  padding: 16px 20px;
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
}

/* ---------- 14. ファイル行・問題文ブロック ---------- */
.file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 4px;
}
.file-row + .file-row { border-top: 1px solid var(--line); }
.file-row:hover { background: var(--bg-stripe); }
.file-row .file-name { font-size: 15px; }
.file-row .dl-icon { margin-left: auto; color: var(--ink-3); flex-shrink: 0; }

.question {
  border-left: 3px solid var(--gold-500);
  padding-left: 16px;
  margin: 24px 0;
}
.q-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--gold-700);
  margin-bottom: 8px;
}
.question p { font-size: 16px; line-height: 1.9; margin: .5em 0; }
.question ol { margin: .5em 0; padding-left: 1.8em; line-height: 1.9; }
.q-note { font-size: 13px; color: var(--ink-3); }

/* ---------- 15. モバイル操作バー・ページャ・シェア ---------- */
.mobile-toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 6px 12px;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -1px 3px rgba(15, 27, 49, .08);
}
.mobile-toolbar[hidden] { display: none; }
@media (min-width: 1024px) {
  .mobile-toolbar { display: none; }
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.pager a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
}

.share-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fff;
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: none;
}
.icon-btn:hover { background: var(--bg-stripe); color: var(--navy-700); }

/* ---------- 16. ハブ部品 ---------- */
.region-tabs {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.region-tabs::-webkit-scrollbar { display: none; }
.region-tabs a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.region-tabs a:hover { color: var(--navy-500); }
.region-tabs a[aria-current="page"] {
  color: var(--navy-700);
  font-weight: 600;
  border-bottom-color: var(--gold-500);
}

.link-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.link-rows > li + li { border-top: 1px solid var(--line); }
.link-rows .group-head {
  background: var(--bg-stripe);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  font-variant-numeric: tabular-nums;
}
.link-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 4px 16px;
  text-decoration: none;
}
.link-row:hover { background: var(--bg-stripe); text-decoration: none; }
.link-row .row-name {
  font-size: 16px;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-row:hover .row-name { color: var(--navy-500); text-decoration-thickness: 2px; }
.link-row .row-arrow {
  margin-left: auto;
  color: var(--ink-3);
  font-size: 18px;
  flex-shrink: 0;
}

/* ---------- 17. ユーティリティ・印刷 ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.tnum { font-variant-numeric: tabular-nums; }
time { font-variant-numeric: tabular-nums; }

@media print {
  .mobile-toolbar, .site-nav, .acc-controls, .skip-link, .share-row { display: none !important; }
  .site-footer { background: none; color: var(--ink); }
}

/* ================================================================
   2) トップページ固有（index.html <style>）
   ================================================================ */

/* ===== index.html 固有スタイル（トップページのみ。共通部品は assets/style.css） ===== */

/* --- ヒーロー --- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  color: #fff;
  padding: 40px 16px;
  text-align: center;
}
@media (min-width: 768px) {
  .hero { padding: 56px 24px; }
}
/* 動く背景①: 金の点描による日本列島。スクロールに連動して沈み込み+ズーム（末尾のパララックスJS参照）。
   主要12都市のマーカーは時差でゆっくり明滅 */
.hero-map {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform;
}
.hero-map svg {
  height: 155%;
  flex-shrink: 0;
  transform: translateX(18%);
}
@media (max-width: 767px) {
  .hero-map svg { height: 135%; transform: translateX(8%); }
}
.hero-map .cap { animation: capPulse 4.5s ease-in-out infinite; }
@keyframes capPulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
/* 動く背景②: 紺の同系色と金のかすかな光がゆらぐ（コントラスト維持のため低透明度） */
.hero::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(600px 420px at 22% 30%, rgba(58, 52, 140, .5), transparent 65%),
    radial-gradient(760px 520px at 78% 72%, rgba(216, 195, 146, .1), transparent 65%);
  animation: heroGlow 24s ease-in-out infinite alternate;
  will-change: transform, opacity;
  pointer-events: none;
}
@keyframes heroGlow {
  from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .9; }
  to   { transform: translate3d(2%, 1%, 0) scale(1.06); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after, .hero-map .cap { animation: none; }
}
.hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.hero-trust {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 4px;
  color: var(--gold-300);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  padding: 4px 12px;
  margin-bottom: 16px;
}
.hero h1 {
  color: #fff;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: .01em;
}
@media (min-width: 768px) {
  .hero h1 { font-size: 28px; }
}
.hero h1 .num { color: var(--gold-300); }
.hero-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, .75);
  margin: 12px 0 24px;
  font-variant-numeric: tabular-nums;
}
.hero .searchbox { margin: 0 auto; }
.hero-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.hero-chips::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .hero-chips { flex-wrap: wrap; justify-content: center; overflow: visible; }
}
.chips-label {
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .6);
}
.hero-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 4px;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
}
.hero-chip:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.hero-chip:visited { color: #fff; }

/* --- 収録統計帯 --- */
.stats { background: #fff; border-bottom: 1px solid var(--line); padding: 20px 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  text-align: center;
}
@media (min-width: 768px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat-num {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--navy-700);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.stat-label { display: block; font-size: 12px; color: var(--ink-2); }

/* --- 地域・自治体索引 --- */
.region-index { margin: 0; }
@media (min-width: 768px) {
  .region-index { columns: 2; column-gap: 20px; }
}
@media (min-width: 1024px) {
  .region-index { columns: 3; }
}
.region-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 20px;
  break-inside: avoid;
  overflow: hidden;
}
.region-panel > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 16px;
  cursor: pointer;
  list-style: none;
  /* 地方名バーは基本テーマ色の紺地×白文字（ロゴと同じ游明朝） */
  background: var(--navy-900);
}
.region-panel > summary::-webkit-details-marker { display: none; }
.region-panel > summary::marker { content: ""; }
.region-panel[open] > summary { border-bottom: 1px solid var(--line); }
.region-panel > summary .region-name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.region-panel > summary .region-name:hover { color: var(--gold-300); text-decoration-color: var(--gold-300); }
.region-panel > summary .badge { margin-left: auto; }
.region-panel > summary .chevron { flex-shrink: 0; color: rgba(255, 255, 255, .75); transition: transform .15s; }
.region-panel[open] > summary .chevron { transform: rotate(180deg); }
@media (min-width: 768px) {
  /* デスクトップはJSで常時展開・トグル無効化（chevronも隠す） */
  .region-panel > summary { cursor: default; }
  .region-panel > summary .chevron { display: none; }
}
.region-panel-body { padding: 4px 0 8px; }
.pref-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  margin: 0;
  padding: 8px 16px 2px;
}
.muni-links { list-style: none; margin: 0; padding: 0; }
.muni-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 16px;
  font-size: 14px;
}
.muni-links a:hover { background: var(--bg-stripe); }
@media (min-width: 768px) {
  .muni-links a { min-height: 36px; }
}

/* --- 新着・更新 --- */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.news-list > li:first-child { border-top: 1px solid var(--line); }
.news-list time {
  width: 6em;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.news-body { flex-basis: 100%; }
.news-title { font-size: 15px; }
.news-note { font-size: 13px; color: var(--ink-2); margin-left: 8px; }
@media (min-width: 768px) {
  .news-body { flex-basis: auto; flex: 1; min-width: 0; }
}

/* --- 収録コンテンツ --- */
.content-cards { display: grid; gap: 20px; }
@media (min-width: 768px) {
  .content-cards { grid-template-columns: repeat(2, 1fr); max-width: 840px; margin: 0 auto; }
}

/* --- About導線 --- */
.about-blurb {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  font-size: 15px;
  line-height: 1.9;
}
.about-blurb .btn { margin-top: 16px; }

/* ================================================================
   3) 論作文記事ページ固有（article.html <style>）
   ================================================================ */

/* ===== article.html 固有スタイル（記事ページのみ。共通部品は assets/style.css） ===== */

/* --- 記事ヘッダ --- */
.article-header { padding: 4px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.article-header h1 { margin-bottom: 10px; }

/* --- 収録内容一覧（目次を兼ねる表） --- */
.rec-table .fmt-chip { display: none; }
@media (max-width: 767px) {
  .rec-table [data-priority="low"] { display: none; }
  .rec-table .fmt-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.6;
    color: var(--ink-2);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    padding: 0 6px;
    margin-left: 8px;
    vertical-align: 1px;
  }
}

/* --- 区分メタ行（H2セクションバー直下） --- */
.kubun-meta {
  font-size: 13px;
  color: var(--ink-2);
  margin: -6px 0 12px;
  font-variant-numeric: tabular-nums;
}

/* --- 設問リスト（１）（２） --- */
.q-list { list-style: none; margin: .5em 0; padding-left: 0; }
.q-list > li { position: relative; padding-left: 3em; margin: .5em 0; }
.q-list > li > .q-num { position: absolute; left: 0; top: 0; }
/* .question p (16px) より優先させる注記サイズの明示 */
.question p.q-note { font-size: 13px; line-height: 1.6; }

/* --- 出典表記 --- */
.source-note {
  background: var(--bg-stripe);
  border: 1px solid var(--line);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.7;
  margin: 32px 0;
}
.source-note .ext-icon { margin-left: 2px; vertical-align: -2px; }

/* --- この自治体の他コンテンツ --- */
.muni-contents { display: grid; gap: 12px; margin: 16px 0; }
.card-current { border-color: var(--navy-500); }
.more-link { font-size: 14px; }

/* --- 近隣・同格の自治体／あわせて読みたい --- */
.related-sub { margin: 32px 0 16px; }
.related-cards { display: grid; gap: 20px; }
@media (min-width: 768px) { .related-cards { grid-template-columns: repeat(3, 1fr); } }

/* --- 記事フッタ（シェア・パンくず再掲・前後ページ） --- */
.article-foot .share-row { margin-bottom: 16px; }
.share-label { font-size: 13px; color: var(--ink-2); margin-right: 4px; }
.share-row .icon-btn { width: auto; min-width: 44px; padding: 0 12px; font-size: 13px; font-weight: 700; }
.copy-status { font-size: 13px; font-weight: 600; color: var(--gold-700); }

/* --- モバイル操作バーの分の下余白（最下部コンテンツの隠れ防止） --- */
@media (max-width: 1023px) { body { padding-bottom: 64px; } }

/* ================================================================
   4) ハブページ固有（hub.html <style>）
   ================================================================ */

/* ===== hub.html 固有スタイル（ハブページのみ。共通部品は assets/style.css） ===== */

/* --- ハブ共通 --- */
.hub-page { padding: 0 0 56px; }
.hub-head { margin: 16px 0 24px; }
.hub-head .meta-line { margin: 8px 0 0; }
.hub-lead { font-size: 15px; color: var(--ink-2); margin: 8px 0 0; line-height: 1.8; }
.hub-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 0;
}
.hub-block { margin-top: 40px; }
.hub-hint { font-size: 13px; color: var(--ink-2); margin: 0 0 16px; }

/* --- 地域タブ（style.cssの.region-tabsを流用） --- */
#region-hub .region-tabs { margin-bottom: 8px; }

/* --- 地域ヒーロー帯: 地方フォーカスの点描地図。スクロールでズーム（末尾JS） --- */
.hub-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  padding: 36px 0 32px;
  margin-top: 16px;
  margin-bottom: 28px;
}
.hub-hero-map {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}
.hub-hero-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub-hero-map .cap { animation: capPulse 4.5s ease-in-out infinite; }
/* @keyframes capPulse は index 由来の定義を共用（重複整理） */
.hub-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(340px 200px at 50% 50%, rgba(216, 195, 146, .12), transparent 70%),
    radial-gradient(closest-side at 50% 50%, transparent 55%, rgba(4, 3, 45, .6) 100%);
  pointer-events: none;
}
.hub-hero-inner { position: relative; z-index: 1; }
.hub-hero .hub-head { margin: 0; }
.hub-hero h1 { color: #fff; }
.hub-hero .meta-line { color: rgba(255, 255, 255, .82); }
@media (prefers-reduced-motion: reduce) { .hub-hero-map .cap { animation: none; } }

/* --- 都道府県カード（地域ハブ本体） --- */
.pref-cards { margin-top: 24px; }
@media (min-width: 768px) {
  .pref-cards { columns: 2; column-gap: 20px; }
}
.pref-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 16px;
  break-inside: avoid;
  overflow: hidden;
}
@media (min-width: 768px) {
  .pref-card { margin-bottom: 20px; }
}
.pref-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  /* トップの地方名バーと同じ意匠（基本テーマ色×ゴールド） */
  background: var(--navy-900);
}
.pref-card-head h2 {
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}
.pref-card-rows { list-style: none; margin: 0; padding: 0; }
.pref-card-rows > li + li { border-top: 1px solid var(--line); }

/* 自治体行 = ハブへの行リンク + 論作文過去問への直行リンク（タップ領域を分離） */
.muni-row { display: flex; align-items: stretch; }
.muni-row .link-row { flex: 1 1 auto; min-width: 0; }
.row-direct {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 52px;
  padding: 0 14px;
  border-left: 1px solid var(--line);
  font-size: 13px;
  white-space: nowrap;
}
.row-direct:hover { background: var(--bg-stripe); }

/* 行の右端メタ（自治体ハブ側の回遊リストで使用） */
.link-row .row-meta {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
}
.link-row .row-meta + .row-arrow { margin-left: 0; }

/* --- 他の地域チップ --- */
.region-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.region-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  color: var(--navy-700);
  text-decoration: none;
  white-space: nowrap;
}
.region-chips a:hover {
  background: var(--bg-stripe);
  border-color: var(--navy-500);
  color: var(--navy-500);
}

/* --- コンテンツカード（自治体ハブ本体） --- */
.hub-cards { display: grid; gap: 12px; margin-top: 24px; }
.hub-card { display: flex; align-items: center; gap: 16px; }
.hub-card-main { flex: 1 1 auto; min-width: 0; }
.hub-card .card-desc { margin-top: 4px; }
.hub-card .row-arrow { color: var(--ink-3); font-size: 18px; flex-shrink: 0; }
.hub-card.card--disabled .row-arrow { visibility: hidden; }

/* --- 検索ブロック --- */
.hub-search .searchbox { margin-top: 12px; }

/* ================================================================
   5) 面接記事ページ固有（interview.html <style>）
   ================================================================ */

/* ===== interview.html 固有スタイル（面接対策・自治体研究まとめ記事） ===== */
.article-head .meta-line .badge { margin-left: 8px; vertical-align: 1px; }

/* 部ラベル */
.article-body p.part-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4.6em 0 0;
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: .14em;
  font-size: 13px;
  color: var(--gold-700);
}
.part-label::after { content: ""; flex: 1; height: 1px; background: var(--gold-500); opacity: .55; }

/* 2部構成の目次カード */
.toc-2col { display: grid; gap: 16px; margin: 24px 0 4px; }
@media (min-width: 768px) { .toc-2col { grid-template-columns: 1fr 1fr; } }
.toc-card { border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 16px 20px 12px; }
.toc-card-title { margin: 0 0 8px; font-family: var(--font-serif); font-weight: 700; color: var(--navy-700); border-bottom: 2px solid var(--gold-300); padding-bottom: 6px; }
.toc-card ol { margin: 0; padding-left: 1.4em; }
.toc-card li { margin: 6px 0; font-size: 14px; }

/* 小見出しの視認性（金の左罫）と、見出し直上の余白 */
.article-body h2.section-bar { margin-top: 3.2em; }
/* 部ラベル直後の見出しは間隔を詰める（一律の見出し上スペースの例外） */
.part-label + h2.section-bar { margin-top: 1.1em; }
.article-body h3 {
  border-left: 3px solid var(--gold-500);
  padding-left: 10px;
  color: var(--navy-700);
  margin: 2.4em 0 0.9em;
}
.article-body h4 { color: var(--navy-700); margin: 2em 0 0.8em; }
.article-body .scroll-x { margin: 1.2em 0 1.5em; }
.ref-inline { font-size: 13px; color: var(--ink-2); }
.ref-inline a { color: var(--link); }

/* 事実リスト */
.fact-list { padding-left: 1.3em; }
.fact-list > li { margin: .55em 0; }

/* 質問・回答例の引用 */
.q-quote {
  border-left: 3px solid var(--gold-500);
  background: var(--bg-stripe);
  padding: 12px 16px;
  margin: 14px 0;
  font-weight: 600;
}

/* アドバイスコールアウト */
.callout { border: 1px solid var(--gold-500); border-left-width: 4px; border-radius: 4px; background: #fff; padding: 14px 18px; margin: 22px 0; }
.callout-title { font-weight: 700; color: var(--gold-700); font-size: 13px; letter-spacing: .08em; margin: 0 0 6px; }
.callout p { margin: .5em 0; }
/* 悪い例／改善例: ラベルチップ＋薄地＋左罫で識別。本文は通常インク色（黒字と誤読しない） */
.callout .ex {
  display: block;
  border-left: 3px solid;
  border-radius: 0 4px 4px 0;
  padding: 8px 14px;
  margin: 8px 0;
  color: var(--ink);
}
.callout .ex-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  border-radius: 3px;
  padding: 1px 8px;
  margin-right: 8px;
  vertical-align: 2px;
}
.callout .ng { border-left-color: var(--pdf); background: var(--cat-fire-bg); }
.callout .ng .ex-label { background: var(--pdf); }
.callout .ok { border-left-color: var(--cat-pref); background: var(--cat-pref-bg); }
.callout .ok .ex-label { background: var(--cat-pref); }

/* 準備ステップ */
.step-list { list-style: none; margin: 20px 0; padding: 0; counter-reset: step; }
.step-list > li { position: relative; padding: 8px 0 22px 56px; counter-increment: step; }
.step-list > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 2px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy-900); color: var(--gold-300);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 17px;
}
.step-list > li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 46px; bottom: 0; width: 2px; background: var(--line); }

/* 注記・CTA・関連 */
.ref-note { font-size: 12.5px; color: var(--ink-3); margin: 8px 0 0; }
.cta-box { text-align: center; margin: 26px 0; }
.cta-tri { font-size: .72em; margin-left: 8px; vertical-align: 1px; }
.related-one { margin-bottom: 56px; }
.related-one .card { display: block; margin-top: 10px; }
.related-sub { margin-top: 2.5em; }

/* ============================================================
   19. 論作文記事・本文DBマークアップの整形（全68記事に自動適用）
   interview.html（面接記事モック）の意匠を、実DBのブロックHTMLへ対応付け
   ============================================================ */
/* 章見出し（本文直下のH2）= 面接記事の section-bar と同装 */
.article-body > h2.wp-block-heading {
  background: var(--navy-900);
  border-left: 4px solid var(--gold-300);
  padding: 10px 14px;
  color: #fff;
  font-size: 20px;
  margin: 2.8em 0 1em;
}
/* アコーディオン内の見出し（東京都庁型: 区分名がトグルと二重になる）は控えめに */
.article-body [data-st-slidebox-content] h2.wp-block-heading {
  background: none;
  border-left: 3px solid var(--gold-500);
  padding: 0 0 0 10px;
  color: var(--navy-700);
  font-size: 17px;
  margin: .4em 0 1em;
}
/* 節見出し（H3）= 面接記事のH3と同装（金の左罫） */
.article-body h3.wp-block-heading {
  border-left: 3px solid var(--gold-500);
  padding-left: 10px;
  color: var(--navy-700);
  margin: 2em 0 .9em;
}
/* H3直前にDB由来のスペーサーブロックがある場合は、その高さ分だけmargin-topを詰めて
   interview.html（見出し上約38px）と同等の空きに揃える */
.article-body .wp-block-spacer + h3.wp-block-heading { margin-top: .9em; }
.article-body [data-st-slidebox-content] h3.wp-block-heading {
  font-size: 15px;
  margin: 1.6em 0 .7em;
}
.article-body [data-st-slidebox-content] .wp-block-spacer + h3.wp-block-heading { margin-top: .5em; }
/* 表（wp-block-table）= 収録内容表と同装 */
/* 表（wp-block-table）= .index-table と完全同装（面接記事の表と統一） */
.article-body figure.wp-block-table {
  margin: 1.2em 0 1.6em;
  overflow-x: auto;
}
.article-body figure.wp-block-table table {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.6;
}
.article-body figure.wp-block-table th {
  background: var(--navy-700);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;
}
.article-body figure.wp-block-table td {
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.article-body figure.wp-block-table tbody tr:nth-child(even) { background: var(--bg-stripe); }
.article-body figure.wp-block-table tbody tr:hover { background: var(--bg-stripe); }
/* PDFリンク（wp-block-file）= 面接記事の file-row と同装 + PDFチップ */
.article-body .wp-block-file {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 4px;
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.article-body .wp-block-file::before {
  content: "PDF";
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
  background: var(--pdf);
  border-radius: 3px;
  padding: 2px 7px;
}
.article-body .wp-block-file a { font-size: 15px; }
.article-body .wp-block-file::after {
  content: "↓";
  margin-left: auto;
  color: var(--ink-3);
}
/* リード部（収録内容表の上に出す本文冒頭） */
.article-lead { margin-bottom: 8px; }
.article-lead > p:first-child { font-size: 16.5px; }

/* ============================================================
   20. 論作文記事・本文DBマークアップの整形 第2弾（2026-07-22 オーナー指示）
   ============================================================ */
/* H4（区分の小分類。例: 行政・警察行政）= うっすら灰色の帯 */
.article-body h4.wp-block-heading {
  background: var(--bg-section);
  border-radius: 4px;
  padding: 8px 14px;
  color: var(--navy-700);
  font-size: 16px;
  margin: 2em 0 .9em;
}
/* H5（年度表記。例: 2025（令和7）年度）= 金の枠チップ */
.article-body h5.wp-block-heading {
  display: inline-block;
  border: 1px solid var(--gold-500);
  border-left-width: 4px;
  border-radius: 4px;
  background: #fff;
  padding: 5px 14px;
  color: var(--navy-700);
  font-size: 14.5px;
  font-weight: 700;
  margin: 1.8em 0 .8em;
}
/* 番号リスト = 金の四角に白番号 */
.article-body ol:not([class]),
.article-body ol.wp-block-list {
  list-style: none;
  counter-reset: kk-oli;
  margin: 1em 0;
  padding-left: 0;
}
.article-body ol:not([class]) > li,
.article-body ol.wp-block-list > li {
  position: relative;
  counter-increment: kk-oli;
  padding-left: 38px;
  margin: .6em 0;
}
.article-body ol:not([class]) > li::before,
.article-body ol.wp-block-list > li::before {
  content: counter(kk-oli);
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-500);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border-radius: 4px;
}
/* AFFINGERマイボタン（解答例を読む／予想テーマ解答例 等）= 面接記事のbtn-ctaと同装。
   DB内のinlineスタイル（#cc0000・radius15px）を上書きする */
.article-body p.st-mybtn {
  text-align: center;
  margin: 24px 0;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.article-body p.st-mybtn > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  background: var(--red);
  color: #fff !important;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.article-body p.st-mybtn > a:hover { background: var(--red-700); }
/* AFFINGERのアイコン<i>はCSSが無く空になるため、▶ を面接記事のcta-triと同装で描画 */
.article-body p.st-mybtn i.st-svg-chevron-right::after {
  content: "▶";
  font-size: .72em;
  margin-left: 2px;
  vertical-align: 1px;
  font-style: normal;
}

/* ============================================================
   21. シェアボタンのサービスカラー（2026-07-22 オーナー指示）
   ============================================================ */
.share-row .icon-btn { font-weight: 700; font-size: 12px; }
.icon-btn.is-instagram { color: #E4405F; border-color: #E4405F; }
.icon-btn.is-instagram:hover { background: #E4405F; color: #fff; }
.icon-btn.is-line { color: #06C755; border-color: #06C755; }
.icon-btn.is-line:hover { background: #06C755; color: #fff; }
.icon-btn.is-x { color: #0F1419; border-color: #0F1419; }
.icon-btn.is-x:hover { background: #0F1419; color: #fff; }
.icon-btn.is-facebook { color: #1877F2; border-color: #1877F2; }
.icon-btn.is-facebook:hover { background: #1877F2; color: #fff; }
.icon-btn.is-hatena { color: #00A4DE; border-color: #00A4DE; }
.icon-btn.is-hatena:hover { background: #00A4DE; color: #fff; }
.icon-btn.is-url { color: var(--ink-2); }

/* ============================================================
   22. 論作文記事の仕上げ第4弾（2026-07-22 オーナー指示）
   ============================================================ */
/* 目次カード（この記事で分かること）: interview の toc-card を単票で使用 */
.article-toc { margin: 20px 0 28px; }

/* 過去問（アコーディオン内）のリストは装飾しない（問題文の再現性を優先） */
.article-body [data-st-slidebox-content] ul > li::marker { color: currentColor; }
.article-body [data-st-slidebox-content] ol:not(.paren-list) {
  list-style: decimal;
  padding-left: 1.8em;
  margin: 1em 0;
}
.article-body [data-st-slidebox-content] ol:not(.paren-list) > li {
  position: static;
  padding-left: 0;
  margin: .4em 0;
}
.article-body [data-st-slidebox-content] ol:not(.paren-list) > li::before { content: none; }

/* （１）（２）形式の番号リスト（旧サイトの paren-list を移植。全文脈で有効） */
.article-body ol.paren-list {
  list-style: none;
  counter-reset: paren;
  padding-left: 3em;
  margin: 1em 0;
}
.article-body ol.paren-list > li {
  position: relative;
  counter-increment: paren;
  padding-left: 0;
  margin: .4em 0;
}
.article-body ol.paren-list > li::before {
  content: "（" counter(paren) "）";
  position: absolute;
  left: -3em;
  top: auto;
  width: 3em;
  height: auto;
  display: block;
  text-align: right;
  white-space: nowrap;
  font-variant-east-asian: full-width;
  background: none;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  border-radius: 0;
}

/* アコーディオン内CTA（解答例を読む）の上下スペースを詰める */
.article-body [data-st-slidebox-content] p.st-mybtn { margin: 10px 0 14px; }

/* シェアボタンのロゴアイコン（インラインSVG・サービスカラーはcurrentColor経由） */
.share-row .icon-btn svg { width: 20px; height: 20px; display: block; }

/* ============================================================
   23. サイドメニュー（ドロワー。2026-07-22 オーナー指示でヘッダーナビを置換）
   ============================================================ */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--navy-700);
  border-radius: 4px;
  color: var(--navy-700);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.menu-toggle:hover { background: var(--bg-stripe); }
@media (max-width: 767px) {
  .menu-toggle { padding: 8px; min-width: 44px; justify-content: center; }
  .menu-toggle-label { display: none; }
}
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 3, 45, .45);
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 998;
}
body.kk-drawer-open .drawer-backdrop { opacity: 1; }
.site-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 88vw);
  background: #fff;
  border-left: 1px solid var(--line);
  transform: translateX(105%);
  transition: transform .2s ease;
  z-index: 999;
  display: flex;
  flex-direction: column;
}
body.kk-drawer-open .site-drawer { transform: none; }
body.kk-drawer-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .site-drawer, .drawer-backdrop { transition: none; }
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 12px 20px;
  background: var(--navy-900);
}
.drawer-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--gold-300);
  font-size: 15px;
}
.drawer-close {
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}
.drawer-close:hover { background: rgba(255, 255, 255, .12); }
.drawer-body { overflow-y: auto; padding: 8px 20px 32px; }
.drawer-sec { margin-top: 22px; }
.drawer-sec-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: .06em;
  border-bottom: 2px solid var(--gold-300);
  padding-bottom: 6px;
  margin: 0 0 10px;
}
.drawer-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.drawer-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-size: 13px;
  color: var(--navy-700);
  text-decoration: none;
}
.drawer-chip:hover { border-color: var(--navy-500); color: var(--navy-500); background: var(--bg-stripe); }
.drawer-links { list-style: none; margin: 0; padding: 0; }
.drawer-links li + li { border-top: 1px solid var(--line); }
.drawer-links a,
.drawer-link-disabled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 4px;
  font-size: 14.5px;
  text-decoration: none;
  color: var(--ink);
}
.drawer-links a:hover { color: var(--navy-500); background: var(--bg-stripe); }
.drawer-link-disabled { color: var(--ink-3); }
.drawer-count { font-size: 12px; color: var(--ink-3); flex-shrink: 0; }

/* フッターの権利表記（コピーガード・ソフト対策の一環） */
.footer-legal { margin: 0 0 6px; font-size: 11.5px; color: rgba(255, 255, 255, .55); }

/* 論作文過去問の一覧ページ（/past-questions/。2026-07-24） */
.archive-page { padding-bottom: 56px; }
.archive-page .section-bar { display: flex; align-items: center; justify-content: space-between; }
.archive-count { font-size: 13px; font-weight: 400; color: var(--gold-300); }
.archive-rows { margin-bottom: 8px; }