/*
Theme Name: Ishikawa Athletic
Theme URI: https://ishikawa-juku.com/
Author: イシカワ塾
Description: イシカワ塾公式サイトのクラシックテーマ「体育会（Athletic）」。モノトーン（黒×グレー）基調＋カテゴリ色（警察=青／消防=赤）。ビルド工程なし・外部リソース読み込みなし・システムフォントのみ。デザイン正本はWEBサイト刷新/モックアップ。
Version: 1.0.0
Requires at least: 6.1
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ishikawa-athletic
*/

/* ============================================================
   イシカワ塾 公式サイト 共有CSS「体育会（Athletic）」
   （index.html / article.html / hub.html）
   モノトーン（黒×グレー）基調のスポーティ。斜めカット・太い数字・ゼッケン的タイポ。

   彩色ポリシー（2026-07-17 配色再設計）:
   ① ブランド赤（--red系）＝ヘッダー/フッターのロゴプレート（.brand）限定。
      他のどの部品にも使わない（カテゴリ赤との混同防止）。
   ② カテゴリ色 ＝ 警察 #2d26d3（青）／消防 #E60011（赤・2026-07-29オーナー指示で統一。ロゴ赤≒同色は意図的）。
      読者が「自分のカテゴリ」を色で選別するための識別色。
      ページ単位では body クラス（cat-police / cat-fire / hub-police / hub-fire）で
      --accent 系トークンが一括で切り替わる。無カテゴリページ＝ダークグレー。
   ③ ゴールド ＝ 監修チップ枠・ガイドバナー枠・出典罫線（権威まわり限定）。現状維持。

   自己完結（外部フォント・CDN読み込みなし／システムフォントのみ）

   実装ルール（WPブロック互換）:
   - skew変形（要素本体のskew＋内側spanの逆skew）はサイトクローム側
     （ナビ・見出し装飾・レーンカード・ハブカード等テーマ出力）に限定。
   - post_contentに入る部品（note CTA・FAQ・過去問枠・マーカー・表）は
     単層マークアップにCSSを当てるだけで成立させる。斜めの勢いは
     擬似要素・clip-path・ボーダー・ハードシャドウで出す。
   - イタリックはゼッケン数字・英字ラベル限定。日本語は正体。
   ============================================================ */

/* ---------- 0. トークン & リセット ---------- */
:root{
  /* ---- ブランド赤（★ロゴプレート .brand 限定。他部品には使用禁止）----
     既存 #E60012 はロゴ実測色（#E60100）とほぼ同一のため変更しない。
     note版アイコンと同じ「赤地×白ロゴ」のブランドマークとしてのみ残す */
  --red: #E60012;        /* ロゴプレート地色 */
  --red-dark: #A50010;   /* ロゴプレートのホバーのみ */

  /* ---- カテゴリ色（警察／消防を識別する部品限定）----
     レーンカード・カテゴリタグ・検索候補のカテゴリ表記・著者経歴バー等 */
  --cat-fire: #E60011;    /* 消防カテゴリカラー 2026-07-29統一（白文字 約4.8:1 AA可） */
  --cat-police: #2d26d3;  /* 警察カテゴリカラー（白文字 約9.0:1 AA可） */

  /* ---- 汎用アクセント（ページのカテゴリで切替）----
     無カテゴリ（トップ等）＝ダークグレー。カテゴリページでは下の
     bodyクラス切替により、番号チップ・見出し装飾・CTA・タグ等が一括変色 */
  --accent: #3a3e46;
  --accent-ink: #3a3e46;              /* 白地の文字用（10.7:1） */
  --accent-dark: #23252B;             /* ホバー用の濃色 */
  --accent-weak: rgba(58,62,70,.10);  /* マーカー下線などの淡色 */

  /* ---- ゴールド（枠線・罫線・権威チップ限定の差し色）----
     白地の小サイズ文字には使用禁止（最濃の #BB872E でも約2.9:1でAA未達）。
     ゴールド地に文字を載せる場合は濃色（--black）を使う。 */
  --gold-1: #E7C777; --gold-2: #DDB151; --gold-3: #BB872E;
  --gold-grad: linear-gradient(135deg, var(--gold-1), var(--gold-2), var(--gold-3));

  /* ---- グレースケール ---- */
  --black: #16181D;      /* 黒（ユニフォームブラック） */
  --ink: #23252B;        /* 本文 */
  --g-100: #F4F5F7;      /* 交互背景 */
  --g-300: #E3E4E8;      /* 罫線 */
  --g-500: #575C66;      /* 補足テキスト（白地 5.9:1 AA） */
  --g-700: #3A3E46;      /* 濃グレー（無カテゴリ時のアクセントと同値） */
  --muted: var(--g-500);
  --line: var(--g-300);
  --court: var(--g-100);
  --paper: #FFFFFF;
  --maxw: 1120px;
  --maxw-article: 780px;
  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
          "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

/* カテゴリ切替（記事= body.cat-* ／ ハブ= body.hub-*。同一トークンに統合） */
body.cat-police, body.hub-police{
  --accent: var(--cat-police);
  --accent-ink: var(--cat-police);      /* 白地 約9.0:1 */
  --accent-dark: #231DA6;
  --accent-weak: rgba(45,38,211,.10);
}
body.cat-fire, body.hub-fire{
  --accent: var(--cat-fire);
  --accent-ink: #C00010;                /* 白地の文字用（約6.5:1。#E60011のままだと4.8:1） */
  --accent-dark: #A5000D;
  --accent-weak: rgba(230,0,17,.10);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ overflow-x: clip; -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  overflow-x: clip;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.85;
  font-size: 16px;
  font-feature-settings: "palt";
}
img{ max-width: 100%; height: auto; }
a{ color: var(--accent-ink); }
a:hover{ color: var(--accent-dark); }
:focus-visible{ outline: 3px solid var(--black); outline-offset: 2px; }
::selection{ background: var(--black); color: #fff; }
::placeholder{ color: #6B7078; opacity: 1; } /* 白地 5.0:1 */
[id]{ scroll-margin-top: 76px; }

.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
.wrap-narrow{ max-width: var(--maxw-article); margin: 0 auto; padding: 0 18px; }

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--black); color: #fff; padding: 10px 18px; font-weight: 700;
}
.skip-link:focus{ left: 0; }

/* ---------- 1. 共通タイポ部品 ---------- */
/* ゼッケン数字（太字イタリック。数字・英字ラベル専用） */
.zk{
  font-style: italic;
  font-weight: 900;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* セクション見出し（ダブルスラッシュ＋極太。和文は正体）
   キッカーはカテゴリと無関係なクローム＝モノトーン（黒文字＋黒/グレーの2本スラッシュ） */
.sec-head{ margin: 0 0 20px; }
.sec-en{
  display: flex; align-items: center; gap: 12px;
  color: var(--black); font-weight: 800; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  margin: 0 0 4px;
}
.sec-en::before{
  content: ""; width: 12px; height: 20px; flex: none;
  background: var(--black); transform: skewX(-18deg);
  box-shadow: 17px 0 0 #9BA0AA;
  margin-right: 18px;
}
.sec-title{
  margin: 0;
  font-size: clamp(24px, 4.6vw, 32px);
  font-weight: 900; letter-spacing: .01em;
  line-height: 1.3;
}
.sec-lead{ margin: 8px 0 0; color: var(--muted); font-size: 14px; }

/* バッジ・チップ */
.badge-new{
  display: inline-block; background: var(--black); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  padding: 2px 9px; transform: skewX(-10deg);
}
.badge-new > span{ display: inline-block; transform: skewX(10deg); }
.badge-soon{
  display: inline-block; background: #fff; color: var(--muted);
  border: 1px solid #B9BCC4;
  font-size: 11px; font-weight: 700; padding: 2px 9px;
}
/* タグ（カテゴリ表記チップ）: 既定はページアクセント（無カテゴリ＝ダークグレー）。
   tag-police / tag-fire はカテゴリ横断の並び（トップの幹記事等）でも常にカテゴリ色。
   is-planned（準備中カード）のグレー枠より優先させるため複合セレクタで指定 */
.tag{
  display: inline-block; border: 2px solid var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 800; padding: 1px 10px;
  transform: skewX(-10deg);
}
.tag > span{ display: inline-block; transform: skewX(10deg); }
.tag.tag-police, .rel-card.is-planned .tag.tag-police{ border-color: var(--cat-police); color: var(--cat-police); }
.tag.tag-fire, .rel-card.is-planned .tag.tag-fire{ border-color: var(--cat-fire); color: #C00010; }

/* ボタン（斜行スポーティ。黒地白文字＋ハードシャドウ。サイトクローム専用＝post_contentでは.cta-btnを使う） */
.btn{
  display: inline-block;
  background: var(--black); color: #fff; text-decoration: none;
  font-weight: 800; font-size: 15px;
  padding: 13px 30px;
  transform: skewX(-8deg);
  border: 2px solid var(--black);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.btn > span{ display: inline-block; transform: skewX(8deg); }
.btn:hover{
  background: var(--g-700); border-color: var(--g-700); color: #fff;
  transform: skewX(-8deg) translate(-2px, -2px);
  box-shadow: 4px 4px 0 #B9BCC4;
}
.btn-ghost{
  background: #fff; color: var(--black); border-color: var(--black);
}
.btn-ghost > span{ color: var(--black); }
.btn-ghost:hover{
  background: var(--black); border-color: var(--black);
  box-shadow: 4px 4px 0 #B9BCC4;
}
.btn-ghost:hover > span{ color: #fff; }

/* モバイルのみの改行 */
.sp-only{ display: inline; }
@media (min-width: 640px){ .sp-only{ display: none; } }

/* 語のまとまりで折り返す（見出しの中間折れ防止） */
.nowrap{ display: inline-block; white-space: nowrap; }

/* マーカー（黄色蛍光の下線マーカー。単層spanで成立＝post_content可。
   2026-07-29オーナー指示: よくある蛍光イエローに統一 */
.mk{
  font-weight: 700;
  background: linear-gradient(transparent 60%, rgba(255,235,59,.62) 60%);
  padding: 0 1px;
}
/* 黒地（著者ボックス等）では帯でなく黄色文字で強調（白文字×黄帯の可読性低下を回避） */
.author .mk{ background: none; color: #FFE95C; }

/* ---------- 2. ヘッダー & ナビ ---------- */
.site-head{
  position: sticky; top: 0; z-index: 100;
  background: var(--black); color: #fff;
  border-bottom: 3px solid #2A2D35;
}
.site-head-inner{
  max-width: var(--maxw); margin: 0 auto; padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 58px; gap: 10px;
}
/* ロゴプレート: ★サイト内で唯一ブランド赤を使う部品（note版アイコンと同じ赤地×白ロゴ） */
.brand{
  display: inline-block; text-decoration: none; flex: none;
  background: var(--red); transform: skewX(-12deg);
  padding: 7px 18px; margin-left: 6px;
}
.brand > span{
  display: inline-block; transform: skewX(12deg);
  color: #fff; font-weight: 900; font-size: 19px; letter-spacing: .06em;
}
.brand small{
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .24em;
  color: #fff; margin-top: -2px; /* 赤地に白 4.8:1（AA） */
}
/* 実ロゴ画像（logo-white.png 532×192・白版）。
   プレート本体のskewは内側spanの逆skewで打ち消し済み＝画像は正体を保つ */
.brand img{ display: block; height: 40px; width: auto; }
.brand img + small{ margin-top: 3px; }
.brand:hover{ background: var(--red-dark); }

/* デスクトップナビ（CSSホバー開閉） */
.gnav{ display: none; }
.gnav > ul{ list-style: none; display: flex; margin: 0; padding: 0; gap: 2px; }
.gnav > ul > li{ position: relative; }
.gnav a{
  display: block; color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 700; padding: 17px 13px;
}
.gnav > ul > li > a:hover{ color: #fff; box-shadow: inset 0 -4px 0 #fff; }
.gnav .sub{
  list-style: none; margin: 0; padding: 8px 0;
  position: absolute; left: 0; top: 100%; min-width: 220px;
  background: var(--black); border: 1px solid #2A2D35; border-top: 3px solid #fff;
  display: none;
}
.gnav li:hover > .sub,
.gnav li:focus-within > .sub{ display: block; }
.gnav .sub a{ padding: 9px 18px; font-weight: 600; font-size: 13px; }
.gnav .sub a:hover{ background: #23252B; color: #fff; }
.gnav .caret{ font-size: 10px; opacity: .7; margin-left: 2px; }

/* ハンバーガー（テキストラベル付き） */
.nav-toggle{
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 48px; min-height: 50px; padding: 6px 8px;
  background: transparent; border: 0; cursor: pointer;
}
.nav-toggle .bars{
  display: flex; flex-direction: column; gap: 4px; width: 22px;
}
.nav-toggle .bar{
  display: block; height: 3px; width: 100%; background: #fff;
  transition: transform .2s, opacity .2s;
}
.nav-toggle-label{
  color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .1em; line-height: 1;
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* モバイルドロワー（黒地＝モノトーン。カテゴリ濃色は黒地で沈むため使わない） */
.drawer{ display: none; background: var(--black); border-top: 1px solid #2A2D35; }
.drawer.open{ display: block; }
.drawer-inner{ max-width: var(--maxw); margin: 0 auto; padding: 16px 18px 26px; }
.drawer-label{
  color: #9BA0AA; font-size: 11px; font-weight: 800; letter-spacing: .2em;
  margin: 16px 0 8px;
}
.drawer-lanes{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.drawer-lanes a{
  display: flex; align-items: center; gap: 10px;
  background: #23252B; color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 700; padding: 12px 12px;
  border-left: 4px solid #fff;
}
.drawer-lanes a:hover{ background: #2C2F38; color: #fff; }
.drawer-lanes .zk{ color: #fff; font-size: 18px; }
.drawer-links{ list-style: none; margin: 0; padding: 0; }
.drawer-links a{
  display: block; color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 600; padding: 10px 2px;
  border-bottom: 1px solid #2A2D35;
}
.drawer-links a:hover{ color: #B9BCC4; }

@media (min-width: 1024px){
  .gnav{ display: block; }
  .nav-toggle{ display: none; }
  .drawer{ display: none !important; }
}

/* ---------- 3. パンくず ---------- */
.breadcrumb{ background: var(--court); border-bottom: 1px solid var(--line); }
.breadcrumb ol{
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  margin: 0 auto; max-width: var(--maxw); padding: 8px 18px;
  font-size: 12px; gap: 4px;
}
.breadcrumb li{ display: flex; align-items: center; gap: 4px; color: var(--muted); }
.breadcrumb li + li::before{
  content: ""; width: 6px; height: 10px; display: inline-block;
  background: var(--accent); transform: skewX(-18deg); margin: 0 5px;
}
.breadcrumb a{ color: var(--muted); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover{ color: var(--accent-ink); text-decoration: underline; }
.breadcrumb [aria-current]{ color: var(--ink); font-weight: 700; }

/* ---------- 4. トップ: ヒーロー ---------- */
.hero{
  position: relative; overflow: hidden;
  background: var(--paper);
  border-bottom: 3px solid var(--black);
}
/* 最背面: 流れる都市スカイライン（2層パララックス・自己完結SVG data URI）。
   47・スピードラインよりさらに背後。淡色（黒5.5%/3.8%）で本文可読性に影響しない */
.hero::before{
  content: ""; position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='190'><g fill='%2316181D' fill-opacity='.038'><rect x='0' y='95' width='120' height='95'/><rect x='140' y='55' width='95' height='135'/><rect x='188' y='34' width='10' height='24'/><rect x='255' y='115' width='85' height='75'/><rect x='360' y='70' width='110' height='120'/><rect x='490' y='125' width='75' height='65'/><rect x='585' y='45' width='100' height='145'/><rect x='705' y='100' width='90' height='90'/><rect x='815' y='65' width='85' height='125'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='300'><g fill='%2316181D' fill-opacity='.055'><rect x='0' y='210' width='70' height='90'/><rect x='80' y='150' width='55' height='150'/><rect x='145' y='190' width='40' height='110'/><rect x='200' y='120' width='65' height='180'/><rect x='218' y='96' width='8' height='26'/><rect x='280' y='205' width='48' height='95'/><rect x='340' y='165' width='58' height='135'/><rect x='412' y='230' width='38' height='70'/><polygon points='500,60 542,300 458,300'/><rect x='497' y='30' width='6' height='34'/><rect x='560' y='185' width='52' height='115'/><rect x='625' y='140' width='60' height='160'/><rect x='700' y='215' width='42' height='85'/><rect x='755' y='105' width='68' height='195'/><rect x='782' y='84' width='9' height='22'/><rect x='840' y='195' width='50' height='105'/><rect x='905' y='160' width='55' height='140'/><rect x='975' y='225' width='40' height='75'/><rect x='1030' y='135' width='62' height='165'/><rect x='1105' y='200' width='50' height='100'/><rect x='1165' y='170' width='35' height='130'/></g></svg>");
  background-repeat: repeat-x, repeat-x;
  background-position: 0 100%, 0 100%;
  animation: hero-skyline 48s linear infinite;
  pointer-events: none;
}
@keyframes hero-skyline{
  from{ background-position: 0 100%, 0 100%; }
  to{ background-position: -1800px 100%, -1200px 100%; }
}
/* スピードライン（スカイラインの手前・コンテンツの背後） */
.hero-stripes{
  position: absolute; inset: 0;
  background:
    linear-gradient(-62deg, transparent 0 58%, rgba(22,24,29,.06) 58% 66%, transparent 66% 70%, rgba(22,24,29,.04) 70% 76%, transparent 76%);
  pointer-events: none;
}
/* 47 ゼッケンウォーターマーク（白地・グレー系。hero-figure内＝人物の背後） */
.hero-num{
  position: absolute; top: -34px; bottom: auto; margin: 0; z-index: 0;
  right: max(-14px, calc((100% - var(--maxw)) / 2 - 24px));
  font-size: clamp(150px, 28vw, 300px);
  font-style: italic; font-weight: 900; line-height: 1;
  color: rgba(22,24,29,.055);
  -webkit-text-stroke: 2px rgba(22,24,29,.10);
  pointer-events: none; user-select: none;
}
/* キャラクターイラスト（透過WebP・切り抜き版）。白地に直接配置。
   左向き＝視線がキャッチコピーへ向かう。ブランド素材/イラスト/README.md が正本。
   フレックス配置＝2人の重なり量は消防官の負マージンで制御
   （狭幅=大きく重ねて収める／広幅=離す） */
.hero-figure{
  position: absolute; top: 0; bottom: 0; z-index: 0;
  right: max(0px, calc((100% - var(--maxw)) / 2));
  width: clamp(300px, 36vw, 560px);
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding-right: clamp(6px, 2vw, 28px);
  pointer-events: none;
}
.hero-figure img{ display: block; width: auto; }
.hero-figure .chara-fire{
  height: clamp(280px, 10vw + 210px, 350px);
  margin-right: clamp(-140px, 15vw - 285px, -48px);
}
.hero-figure .chara-police{ height: clamp(320px, 12vw + 232px, 400px); }
@media (min-width: 900px){
  .hero .hero-inner{ padding-right: clamp(310px, 38vw, 580px); }
}
@media (max-width: 899px){
  /* 47＝キャッチコピーの真横（eyebrow2行 + マージンの直下あたりに頭を合わせる） */
  .hero .hero-num{
    top: 66px; right: -10px;
    font-size: clamp(112px, 34vw, 140px);
  }
  .hero-figure{
    position: relative; inset: auto; width: 100%;
    margin-top: 18px;
    height: clamp(252px, 70vw, 336px);
    padding-right: 10px;
  }
  .hero-figure .chara-police{ height: clamp(228px, 64vw, 300px); }
  .hero-figure .chara-fire{ height: clamp(198px, 55vw, 262px); margin-right: -70px; }
  .hero .hero-inner{ padding-bottom: 0; }
}
.hero-chara .chara-fire{ height: clamp(200px, 24vw, 316px); margin-right: -34px; }
.hero-chara .chara-police{ height: clamp(230px, 28vw, 368px); }
@media (max-width: 899px){ .hero-chara{ display: none; } }
.hero-inner{
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto;
  padding: 46px 18px 54px;
}
/* h1＝サイト名＋職種・試験名（SEO）。大型キャッチはh1内のspanで表現 */
.hero h1{ margin: 0 0 14px; line-height: 1.2; }
.hero-eyebrow{
  display: inline-block; margin: 0 0 12px;
  background: var(--black); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .14em;
  padding: 5px 14px; transform: skewX(-10deg);
}
.hero-eyebrow > span{ display: inline-block; transform: skewX(10deg); }
.hero-catch-line{ display: block; margin-top: 10px; }
.hero-catch{
  display: inline;
  background: var(--black); color: #fff;
  padding: .04em .16em .07em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  font-size: clamp(34px, 7.4vw, 62px);
  font-weight: 900; line-height: 1.34; letter-spacing: .01em;
}
/* 黒地プレート上は白（クラス名 .red は互換のため維持） */
.hero-catch .red{ color: #fff; }
.hero-lead{
  margin: 14px 0 20px; max-width: 640px;
  font-size: clamp(14px, 2.4vw, 16px); font-weight: 500; color: var(--ink);
}
.hero-lead strong{ color: var(--black); }
.hero-chips{ list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; }
.hero-chips li{
  background: #fff; border: 2px solid var(--black);
  font-size: 12px; font-weight: 700; padding: 4px 12px;
  transform: skewX(-8deg);
}
.hero-chips li > span{ display: inline-block; transform: skewX(8deg); }
/* 運営=消防（赤）／監修=警察（青）＝カテゴリ色の塗りつぶし＋白文字
   （白文字コントラスト: 赤#E60011≒4.8:1・青#2d26d3≒9.0:1＝AA可） */
.hero-chips li.chip-fire{ background: var(--cat-fire); border-color: var(--cat-fire); color: #fff; }
.hero-chips li.chip-police{ background: var(--cat-police); border-color: var(--cat-police); color: #fff; }
/* 権威チップ（監修表記）: ゴールドは枠線のみ。文字色・地色は不変（文字に使わない） */
.hero-chips li.chip-gold{ border: 2px solid var(--gold-2); border-image: var(--gold-grad) 1; }
.hero-btns{ display: flex; flex-wrap: wrap; gap: 14px 18px; }

/* ---------- 5. トップ: 4大導線（レーンカード） ---------- */
/* モバイルは2×2グリッド（検索への到達を速く）。640px以上でフル表示 */
.lanes-sec{ padding: 44px 0 50px; }
.lanes{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.lane{
  position: relative; display: block; overflow: hidden;
  background: #fff; border: 2px solid var(--black);
  text-decoration: none; color: inherit;
  padding: 16px 12px 14px;
  transition: transform .15s, box-shadow .15s;
}
.lane::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px;
  background: linear-gradient(-62deg, var(--black) 0 34px, var(--g-500) 34px);
}
.lane::after{
  content: attr(data-num);
  position: absolute; right: 2px; bottom: -14px;
  font-size: 60px; font-style: italic; font-weight: 900; line-height: 1;
  color: rgba(22,24,29,.08);
  pointer-events: none;
}
.lane:hover{
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--black);
  color: inherit;
}
.lane-kind{
  display: inline-block; margin: 4px 0 8px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em; color: var(--muted);
}
.lane h3{
  margin: 0 0 6px; font-size: 15.5px; font-weight: 900; line-height: 1.4;
}
.lane p{ display: none; margin: 0; font-size: 13px; color: var(--muted); position: relative; z-index: 1; }
.lane .lane-go{
  display: inline-block; margin-top: 10px;
  font-size: 12px; font-weight: 800; color: var(--black);
  border-bottom: 3px solid var(--black);
}
.lane .badge-soon{ margin-top: 10px; align-self: flex-start; }

@media (min-width: 640px){
  .lanes{ grid-template-columns: 1fr 1fr; gap: 14px; }
  .lane{ padding: 20px 18px 18px; }
  .lane::after{ font-size: 92px; bottom: -20px; }
  .lane-kind{ font-size: 11px; letter-spacing: .16em; }
  .lane h3{ font-size: 19px; }
  .lane p{ display: block; }
  .lane .lane-go{ margin-top: 12px; }
}
@media (min-width: 1024px){
  .lanes{ grid-template-columns: repeat(4, 1fr); }
}

/* レーンカードのカテゴリ識別（警察=青／消防=赤）＝トップの彩色の入口。
   変えるのは上端バー・英字キッカー・ゼッケン番号アクセント・ホバーシャドウのみ。
   カード構造・黒文字は不変 */
.lane-police::before{ background: linear-gradient(-62deg, var(--black) 0 34px, var(--cat-police) 34px); }
.lane-police::after{ color: rgba(45,38,211,.12); }
.lane-police .lane-kind{ color: var(--cat-police); }
.lane-police:hover{ box-shadow: 6px 6px 0 var(--cat-police); }
.lane-fire::before{ background: linear-gradient(-62deg, var(--black) 0 34px, var(--cat-fire) 34px); }
.lane-fire::after{ color: rgba(230,0,17,.11); }
.lane-fire .lane-kind{ color: #C00010; }
.lane-fire:hover{ box-shadow: 6px 6px 0 var(--cat-fire); }

/* ---------- 6. トップ: 自治体検索（コンボボックス） ---------- */
.search-sec{
  padding: 44px 0 54px;
  background:
    repeating-linear-gradient(-62deg, rgba(22,24,29,.028) 0 12px, transparent 12px 26px),
    var(--court);
  border-top: 3px solid var(--black);
  border-bottom: 3px solid var(--black);
}
.combo{ position: relative; max-width: 560px; }
.combo input{
  width: 100%; font: inherit; font-weight: 600;
  padding: 14px 16px 14px 52px;
  border: 3px solid var(--black); background: #fff; color: var(--ink);
}
.combo input:focus{ outline: 3px solid var(--accent); outline-offset: 1px; }
.combo .combo-icon{
  position: absolute; left: 0; top: 0; bottom: 0; width: 40px;
  background: var(--accent); display: grid; place-items: center;
  clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%);
  color: #fff; font-weight: 900; font-size: 16px;
  pointer-events: none;
}
.combo ul{
  list-style: none; margin: 6px 0 0; padding: 6px;
  position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
  background: #fff; border: 3px solid var(--black);
  max-height: 320px; overflow-y: auto;
  box-shadow: 6px 6px 0 rgba(22,24,29,.18);
}
.combo ul[hidden]{ display: none; }
.combo li{ margin: 0; }
.combo li > a{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; text-decoration: none; color: var(--ink);
  font-size: 14px; font-weight: 600;
}
.combo li > a:hover, .combo li > a.is-active{ background: var(--court); color: var(--accent-ink); }
.combo li .zk{ color: var(--accent-ink); font-size: 15px; min-width: 30px; }
.combo li > a .badge-soon{ margin-left: auto; flex: none; }
.combo-empty{ padding: 10px 12px; color: var(--muted); font-size: 13px; }
/* 検索候補内のカテゴリ表記（警察=青。小さく識別のみ） */
.combo li .combo-cat{ color: var(--cat-police); font-size: 11px; font-weight: 800; }
.search-hint{ margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* ---------- 7. カード一覧（幹記事・関連記事など） ---------- */
.cards-sec{ padding: 44px 0 50px; }
.card-grid{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 640px){ .card-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){ .card-grid.cols-4{ grid-template-columns: repeat(4, 1fr); } }

.acard{
  position: relative; display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 2px solid var(--black);
  padding: 16px 16px 14px 22px; text-decoration: none; color: inherit;
  transition: transform .15s, box-shadow .15s;
}
/* 左辺のカテゴリ帯（枠線でなく内側の帯＝黒2pxが帯ごと全周を囲む） */
.acard::before{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--black);
}
.acard:hover{
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--black);
  color: inherit;
}
/* カテゴリ色版（はじめての方へ）: 帯＝常時テーマカラー／ホバー影＝テーマカラー／外枠は黒2px維持 */
.acard.acard-police::before{ background: var(--cat-police); }
.acard.acard-police:hover{ box-shadow: 5px 5px 0 var(--cat-police); }
.acard.acard-fire::before{ background: var(--cat-fire); }
.acard.acard-fire:hover{ box-shadow: 5px 5px 0 var(--cat-fire); }
.acard .acard-meta{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acard .tag{ font-size: 13px; padding: 2px 12px; }
.acard h3{ margin: 0; font-size: 15px; font-weight: 800; line-height: 1.55; }
.acard p{ margin: 0; font-size: 12.5px; color: var(--muted); }
.acard .go{
  margin-top: auto; align-self: flex-end;
  font-size: 12px; font-weight: 800; color: var(--black); font-style: italic; /* 英字ラベル＝モノトーン */
}

/* ---------- 8. トップ: 新着 ---------- */
.new-sec{ padding: 44px 0 50px; background: var(--paper); }
.new-list{ list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--black); }
.new-list li{ border-bottom: 1px solid var(--line); }
.new-list a{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 14px 6px; text-decoration: none; color: inherit;
}
.new-list a:hover{ background: var(--court); color: inherit; }
.new-list a:hover .new-title{ color: var(--black); }
.new-date{
  font-variant-numeric: tabular-nums; font-weight: 800; font-style: italic; /* 数字 */
  color: var(--muted); font-size: 13px; min-width: 92px;
}
.new-title{ font-weight: 700; font-size: 14.5px; line-height: 1.6; flex: 1 1 260px; }

/* ---------- 9. トップ: note / YouTube 帯 ---------- */
.media-sec{
  position: relative; padding: 52px 0 58px;
  background: var(--black); color: #fff;
}
.media-sec::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 26px;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.media-sec .sec-title{ color: #fff; }
.media-sec .sec-en{ color: #B9BCC4; }
.media-sec .sec-en::before{ background: #fff; box-shadow: 17px 0 0 #9BA0AA; }
.media-sec .sec-lead{ color: #B9BCC4; }
.media-grid{ display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
@media (min-width: 768px){ .media-grid{ grid-template-columns: 1fr 1fr; } }
.media-card{
  display: block; background: #fff; color: var(--ink); text-decoration: none;
  border: 2px solid #fff; padding: 20px 18px;
  position: relative; overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.media-card::before{
  content: ""; position: absolute; top: 0; right: 0; width: 54px; height: 54px;
  background: var(--black); clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.media-card:hover{ transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #fff; color: var(--ink); }
.media-card .media-kind{
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .2em;
  color: var(--muted); margin-bottom: 6px;
}
.media-card h3{ margin: 0 0 8px; font-size: 18px; font-weight: 900; }
.media-card p{ margin: 0; font-size: 13px; color: var(--muted); }
.media-card .go{ display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 800; color: var(--black); }
.media-card .media-ext{ display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }

/* 黒地コンテキストのリンク色（カテゴリ濃色は黒地で沈むため、標準的なライトブルー） */
:root{ --link-dark: #8AB4F8; --link-dark-hover: #C2E7FF; }
.author a{ color: var(--link-dark); text-decoration: underline; text-underline-offset: 2px; }
.author a:hover{ color: var(--link-dark-hover); }

/* ---------- 10. 著者プロフィール（共通部品・黒地＝モノトーン） ---------- */
.author{
  position: relative; overflow: hidden;
  background: var(--black); color: #fff;
  border-left: 8px solid var(--g-500);
  padding: 22px 20px;
}
.author::after{
  content: ""; position: absolute; right: -30px; top: -40px;
  width: 130px; height: 200px; background: rgba(255,255,255,.07);
  transform: skewX(-18deg); pointer-events: none;
}
.author-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.author-avatar{
  flex: none; width: 58px; height: 58px; border-radius: 50%;
  background: #fff; color: var(--black); display: grid; place-items: center;
  font-weight: 900; font-size: 24px; border: 3px solid #fff;
}
.author-name{ margin: 0; font-size: 18px; font-weight: 900; line-height: 1.3; }
.author-name small{ display: block; font-size: 11px; font-weight: 700; color: #B9BCC4; letter-spacing: .12em; }
.author-creds{ list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; }
.author-creds li{
  background: #fff; color: var(--black);
  font-size: 11px; font-weight: 800; padding: 3px 10px;
  transform: skewX(-8deg);
}
.author-creds li > span{ display: inline-block; transform: skewX(8deg); }
/* 経歴チップのカテゴリ識別バー（消防出身=赤／警察監修=青。白チップ上で視認良好） */
.author-creds li.cred-fire{ border-left: 4px solid var(--cat-fire); }
.author-creds li.cred-police{ border-left: 4px solid var(--cat-police); }
.author p{ margin: 0; font-size: 13.5px; line-height: 1.9; color: #E8E9EC; position: relative; z-index: 1; }

.author + .author{ margin-top: 14px; }

/* ---------- 11. フッター ---------- */
.site-foot{ background: var(--black); color: #fff; margin-top: 0; }
.foot-slant{ height: 30px; background: var(--black); clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%); }
.foot-inner{ max-width: var(--maxw); margin: 0 auto; padding: 40px 18px 20px; }
.foot-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; }
@media (min-width: 768px){ .foot-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot-brand p{ margin: 12px 0 0; font-size: 12px; line-height: 1.9; color: #B9BCC4; }
.foot-col h4{
  margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .18em;
  color: #B9BCC4; border-bottom: 2px solid #6B7078; display: inline-block; padding-bottom: 2px;
}
.foot-col ul{ list-style: none; margin: 0; padding: 0; }
.foot-col a{
  display: block; color: #E8E9EC; text-decoration: none;
  font-size: 13px; padding: 5px 0;
}
.foot-col a:hover{ color: #B9BCC4; }
.foot-note{ margin: 30px 0 0; padding-top: 14px; border-top: 1px solid #2A2D35; font-size: 11px; color: #9BA0AA; }
.foot-copy{ margin: 8px 0 0; font-size: 12px; color: #B9BCC4; font-weight: 700; }

/* ---------- 12. 記事ページ ---------- */
.art-hero{
  background: var(--black); color: #fff;
  position: relative; overflow: hidden;
}
/* スピードライン（黒地＝白系グレースケール） */
.art-hero::before{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(-62deg, transparent 0 68%, rgba(255,255,255,.09) 68% 74%, transparent 74% 78%, rgba(255,255,255,.04) 78% 84%, transparent 84%);
  pointer-events: none;
}
.art-hero-inner{
  position: relative; max-width: var(--maxw-article); margin: 0 auto;
  padding: 34px 18px 30px;
}
.art-cat{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
/* カテゴリタグ: 警察=青×白文字 約9:1／消防=赤×白文字 約5:1（いずれもAA）。
   自治体名タグ（例:「警視庁」）は白地×黒文字のモノトーン（ブランド赤は使わない） */
.art-cat span{
  background: #fff; color: var(--black); font-size: 11px; font-weight: 800;
  padding: 3px 12px; transform: skewX(-10deg); display: inline-block;
}
.art-cat span > span{ display: inline-block; transform: skewX(10deg); background: none; padding: 0; color: inherit; }
.art-cat span.cat-police{ background: var(--cat-police); color: #fff; }
.art-cat span.cat-fire{ background: var(--cat-fire); color: #fff; }
.art-hero h1{
  margin: 0 0 14px; font-size: clamp(22px, 4.6vw, 32px);
  font-weight: 900; line-height: 1.45;
}
.art-meta{ display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: #B9BCC4; }
.art-meta b{ color: #fff; font-weight: 700; }
.art-meta .zk{ color: #B9BCC4; font-size: 13px; }
/* 監修チップ（黒地）: ゴールドは枠線のみ。文字は現状の白系のまま */
.art-meta .sup-chip{
  display: inline-block; padding: 1px 10px;
  border: 1.5px solid var(--gold-2); border-image: var(--gold-grad) 1;
}

/* 目次（GAME PLAN） */
.toc{
  margin: 26px 0 34px;
  border: 3px solid var(--black); background: #fff;
  position: relative;
}
.toc-head{
  display: flex; align-items: center; gap: 10px;
  background: var(--black); color: #fff;
  padding: 10px 16px;
}
.toc-head .zk{ color: #fff; font-size: 18px; }
.toc-head h2{ margin: 0; font-size: 15px; font-weight: 900; letter-spacing: .08em; }
.toc-head small{ font-size: 10px; letter-spacing: .26em; color: #B9BCC4; font-weight: 800; margin-left: auto; }
.toc ol{
  list-style: none; margin: 0; padding: 14px 16px 16px;
  counter-reset: toc;
  display: grid; grid-template-columns: 1fr; gap: 2px;
}
@media (min-width: 640px){ .toc ol{ grid-template-columns: 1fr 1fr; column-gap: 22px; } }
.toc li{ counter-increment: toc; }
.toc a{
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 4px; text-decoration: none; color: var(--ink);
  font-size: 14px; font-weight: 700; border-bottom: 1px dashed var(--line);
}
.toc a::before{
  content: counter(toc, decimal-leading-zero);
  font-style: italic; font-weight: 900; color: var(--accent-ink);
  font-size: 15px; min-width: 26px;
}
.toc a:hover{ color: var(--accent-ink); }

/* 本文（h2〜h4は素のタグにCSSを当てるだけ＝post_content互換） */
.art-body{ counter-reset: sec; padding-bottom: 10px; }
.art-body > p{ margin: 0 0 1.4em; }
.art-body h2{
  counter-increment: sec;
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  background: var(--black); color: #fff;
  margin: 54px 0 24px; padding: 12px 46px 12px 16px;
  font-size: clamp(18px, 3.4vw, 22px); font-weight: 900; line-height: 1.45;
}
.art-body h2::before{
  content: counter(sec, decimal-leading-zero);
  flex: none;
  font-style: italic; font-weight: 900; font-size: 26px; line-height: 1;
  color: #fff; background: var(--accent);
  padding: 8px 12px; margin: -12px 0 -12px -16px;
  align-self: stretch; display: flex; align-items: center;
}
.art-body h2::after{
  content: ""; position: absolute; right: -14px; top: -6px; bottom: -6px; width: 34px;
  background: var(--accent); transform: skewX(-18deg); opacity: .85;
}
.art-body h3{
  margin: 40px 0 16px; padding: 6px 0 6px 14px;
  border-left: 6px solid var(--accent);
  background: linear-gradient(90deg, var(--court), transparent 82%);
  font-size: 17.5px; font-weight: 800; line-height: 1.5;
}
.art-body h4{
  display: flex; align-items: center; gap: 9px;
  margin: 30px 0 12px; font-size: 15.5px; font-weight: 800;
}
.art-body h4::before{
  content: ""; flex: none; width: 11px; height: 15px;
  background: var(--accent); transform: skewX(-16deg);
}

/* 過去問枠（スコアボード。blockquote単層＝post_content互換） */
.kakomon{
  position: relative; margin: 26px 0 18px;
  border: 2px solid var(--black); background: #fff;
  padding: 20px 16px 14px;
}
.kakomon::before{
  content: "過去問"; position: absolute; top: -13px; left: 12px;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .1em;
  padding: 3px 20px 3px 14px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.kakomon .yr{
  display: block; margin-bottom: 4px;
  font-weight: 900; font-size: 15px; color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.kakomon p{ margin: 0; font-weight: 600; }
.src{ text-align: right; color: var(--muted); font-size: 12px; margin: 6px 0 0; }
.src a{ color: var(--muted); }
/* 過去問枠直後の出典行: 上罫線をゴールドの細線に（権威まわり限定。文字色は不変） */
.kakomon + .src{ border-top: 1px solid var(--gold-2); padding-top: 6px; }

/* 注意ボックス（単層＝post_content互換。警告色は使わずモノトーン＝カテゴリ赤との混同防止） */
.caution{
  position: relative; margin: 22px 0;
  border: 2px solid var(--black); background: #fff;
  padding: 18px 16px 14px; font-size: 14px;
}
.caution::before{
  content: "注意"; position: absolute; top: -12px; left: 12px;
  background: var(--black); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .16em;
  padding: 2px 18px 2px 12px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.caution p{ margin: 0; }

/* チェックリスト（ul単層＝post_content互換） */
.checks{ list-style: none; margin: 0 0 1.4em; padding: 18px 16px; background: var(--court); border-top: 3px solid var(--black); border-bottom: 3px solid var(--black); }
.checks li{
  position: relative; padding: 5px 0 5px 32px; font-size: 14.5px; line-height: 1.75;
}
.checks li::before{
  content: "✓"; position: absolute; left: 0; top: 8px;
  width: 22px; height: 21px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 900;
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
.checks li + li{ border-top: 1px dashed #D4D6DB; }

/* トレーニングメニュー（番号ステップ。ol単層＝post_content互換） */
.steps{ list-style: none; counter-reset: step; margin: 0 0 1.4em; padding: 0; }
.steps li{
  counter-increment: step;
  position: relative; margin: 0 0 12px;
  background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--black);
  padding: 14px 16px 14px 74px;
  font-size: 14.5px; line-height: 1.8;
}
.steps li::before{
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 14px; top: 12px;
  font-style: italic; font-weight: 900; font-size: 26px; line-height: 1;
  color: var(--accent-ink);
}
.steps li::after{
  content: "STEP"; position: absolute; left: 16px; top: 40px;
  font-size: 9px; font-weight: 800; letter-spacing: .2em; color: var(--muted);
}

/* テーブル（div.tbl-scroll＋table＝post_content互換） */
.tbl-scroll{ overflow-x: auto; margin: 0 0 1.4em; border: 2px solid var(--black); }
.tbl-scroll table{ width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.tbl-scroll th{
  background: var(--black); color: #fff; font-weight: 800;
  padding: 10px 12px; text-align: center; white-space: nowrap;
  border-left: 1px solid #2A2D35;
}
.tbl-scroll th:first-child{ border-left: 0; }
.tbl-scroll td{
  padding: 10px 12px; text-align: center; border-top: 1px solid var(--line);
  border-left: 1px solid var(--line); font-weight: 600;
}
.tbl-scroll td:first-child{ border-left: 0; }
.tbl-scroll tbody tr:nth-child(even){ background: var(--court); }

/* note CTA（最重要コンバージョン部品。各行が単層マークアップ＝post_content互換。
   旗・上端ストライプ・ボタンはページアクセント＝カテゴリ色で切替） */
.cta{
  position: relative; overflow: hidden;
  margin: 34px 0; padding: 26px 20px 22px;
  background: var(--black); color: #fff;
  border: 3px solid var(--black);
}
.cta::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: repeating-linear-gradient(-62deg, var(--accent) 0 18px, #fff 18px 26px);
}
.cta::after{
  content: ""; position: absolute; right: -46px; top: -30px;
  width: 150px; height: 240px; background: rgba(255,255,255,.07);
  transform: skewX(-18deg); pointer-events: none;
}
.cta-flag{
  display: inline-block; margin: 0 0 12px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .2em;
  padding: 3px 22px 3px 14px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  position: relative; z-index: 1;
}
.cta-name{
  margin: 0 0 8px; font-size: clamp(17px, 3.2vw, 20px);
  font-weight: 900; line-height: 1.5; position: relative; z-index: 1;
}
.cta-benefit{
  margin: 0 0 8px; font-size: 13.5px; color: #E8E9EC;
  position: relative; z-index: 1;
}
.cta-price{
  margin: 0 0 16px; font-size: 12px; color: #E8E9EC;
  position: relative; z-index: 1;
}
.cta-center{ margin: 0; position: relative; z-index: 1; }
.cta-btn{
  position: relative; overflow: hidden;
  display: block; text-align: center;
  background: var(--accent); color: #fff; text-decoration: none;
  font-weight: 900; font-size: 16px;
  padding: 15px 20px;
  border: 2px solid #fff;
  box-shadow: 6px 6px 0 rgba(255,255,255,.28);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.cta-btn::before{
  content: ""; position: absolute; top: -6px; bottom: -6px; right: 34px; width: 9px;
  background: rgba(255,255,255,.22); transform: skewX(-18deg); pointer-events: none;
}
.cta-btn:hover{
  background: var(--accent-dark); color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 rgba(255,255,255,.28);
}
.cta-ext{
  margin: 10px 0 0; font-size: 11.5px; color: #B9BCC4;
  position: relative; z-index: 1;
}
@media (min-width: 640px){
  .cta-btn{ display: inline-block; min-width: 340px; }
}

/* note商品カード（記事末） */
.product-card{
  display: flex; align-items: center; gap: 14px;
  border: 2px solid var(--black); background: #fff;
  padding: 14px 16px; margin: 0 0 12px;
  text-decoration: none; color: inherit;
  transition: transform .15s, box-shadow .15s;
}
.product-card:hover{ transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--accent); color: inherit; }
.product-card .pc-flag{
  flex: none; background: var(--black); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  padding: 8px 16px 8px 10px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.product-card .pc-body{ flex: 1; min-width: 0; }
.product-card h3{
  margin: 0 0 2px; padding: 0; border-left: 0; background: none;
  font-size: 14.5px; font-weight: 800; line-height: 1.5;
}
.product-card p{ margin: 0; font-size: 12px; color: var(--muted); }
.product-card .go{ flex: none; font-style: italic; font-weight: 900; color: var(--accent-ink); }
.ext-note{ margin: 2px 0 0; font-size: 11.5px; color: var(--muted); }

/* note教材カード（記事内。Step7.5の変換スクリプト convert_for_new_theme.py が
   [st-card-ex] から生成する契約部品。単層マークアップ＝post_content互換） */
.note-card{ margin: 28px 0; }
.note-card-link{
  display: block; position: relative;
  border: 2px solid var(--black); background: #fff;
  padding: 18px 18px 12px; text-decoration: none; color: var(--ink);
  transition: transform .15s, box-shadow .15s;
}
.note-card-link:hover{
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--accent); color: var(--ink);
}
.note-card-flag{
  position: absolute; top: -2px; left: -2px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  padding: 3px 16px 3px 10px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.note-card-title{
  display: block; font-weight: 800; line-height: 1.55;
  margin: 12px 0 6px; font-size: 15px;
}
.note-card-cta{ display: inline-block; color: var(--accent-ink); font-weight: 800; font-size: 13px; }
.note-card-ext{ display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }

/* FAQ（details/summary。summary直下はテキストのみ＝post_content互換。
   Q=黒／A=ページアクセントで問答を区別 */
.faq{
  border: 2px solid var(--black); background: #fff; margin: 0 0 12px;
}
.faq summary{
  position: relative;
  padding: 14px 44px 14px 56px; cursor: pointer;
  font-weight: 800; font-size: 14.5px; line-height: 1.6;
  list-style: none;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::before{
  content: "Q"; position: absolute; left: 16px; top: 14px;
  width: 26px; height: 26px;
  background: var(--black); color: #fff;
  display: grid; place-items: center;
  font-style: italic; font-weight: 900; font-size: 14px; /* 英字 */
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.faq summary::after{
  content: "＋"; position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--accent-ink); font-weight: 900; font-size: 19px; line-height: 1;
}
.faq[open] summary::after{ content: "－"; }
.faq[open] summary{ border-bottom: 2px solid var(--black); }
.faq summary:hover{ background: var(--court); }
.faq .faq-a{ padding: 14px 16px 16px 56px; position: relative; font-size: 14px; }
.faq .faq-a::before{
  content: "A"; position: absolute; left: 16px; top: 14px;
  width: 26px; height: 26px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-style: italic; font-weight: 900; font-size: 14px; /* 英字 */
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.faq .faq-a p{ margin: 0 0 .8em; }
.faq .faq-a p:last-child{ margin-bottom: 0; }

/* 記事内の締め・シェア風パーツ */
.art-close{ margin: 30px 0 0; font-weight: 600; }

/* 関連記事 */
.related-sec{ padding: 44px 0 54px; background: var(--court); border-top: 3px solid var(--black); }
.related-grid{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 640px){ .related-grid{ grid-template-columns: 1fr 1fr; } }
.rel-card{
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 2px solid var(--black);
  padding: 16px; text-decoration: none; color: inherit;
  transition: transform .15s, box-shadow .15s;
}
a.rel-card:hover{ transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--accent); color: inherit; }
.rel-card h3{ margin: 0; font-size: 14.5px; font-weight: 800; line-height: 1.6; }
.rel-card .go{ margin-top: auto; align-self: flex-end; font-style: italic; font-weight: 900; font-size: 12px; color: var(--black); }
/* 準備中の関連記事カード（同一自治体クロス用） */
.rel-card.is-planned{ border-style: dashed; border-color: #B9BCC4; background: var(--court); }
.rel-card.is-planned h3{ color: var(--muted); }
.rel-card.is-planned .tag{ border-color: #B9BCC4; color: var(--muted); }
.rel-card .rel-sub{
  margin-top: auto; display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted); font-weight: 600;
}

/* ---------- 13. ハブページ ---------- */
.hub-hero{
  background: var(--black); color: #fff;
  position: relative; overflow: hidden;
  border-bottom: 3px solid var(--accent); /* カテゴリ色のキーライン */
}
/* スピードライン（黒地＝白系グレースケール） */
.hub-hero::before{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(-62deg, transparent 0 62%, rgba(255,255,255,.08) 62% 70%, transparent 70% 74%, rgba(255,255,255,.04) 74% 80%, transparent 80%);
  pointer-events: none;
}
.hub-hero .hero-num{ color: rgba(255,255,255,.05); -webkit-text-stroke: 2px rgba(255,255,255,.10); }
/* ハブのキャラクターイラスト（透過WebP・上半身左向き＝視線が見出しへ向かう） */
.hub-chara{
  position: absolute; bottom: 0; z-index: 0;
  right: max(clamp(0px, 4vw, 72px), calc((100% - var(--maxw)) / 2 + 24px));
  pointer-events: none;
}
.hub-chara img{ display: block; height: clamp(220px, 23vw, 300px); width: auto; }
/* モバイルでも右側に表示。重なる帯のテキストは右に余白を取って改行させる */
@media (max-width: 999px){
  .hub-chara{ right: -4px; }
  .hub-chara img{ height: clamp(180px, 48vw, 245px); }
  .hub-hero-inner > p,
  .hub-cred,
  .hub-count{ padding-right: clamp(110px, 36vw, 170px); }
}
.hub-hero-inner{
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto; padding: 40px 18px 40px;
}
.hub-hero h1{
  margin: 0 0 12px;
  font-size: clamp(26px, 5.4vw, 42px);
  font-weight: 900; line-height: 1.35;
}
/* 旧赤アクセント → 白へ（黒地でカテゴリ濃色は沈むため。クラス名 .red は互換のため維持） */
.hub-hero h1 .red{ color: #fff; }
.hub-hero p{ margin: 0 0 16px; max-width: 640px; font-size: 14px; color: #E8E9EC; }
.hub-count{ list-style: none; display: flex; gap: 12px; margin: 0; padding: 0; flex-wrap: wrap; }
.hub-count li{
  background: #fff; color: var(--black);
  padding: 8px 18px; transform: skewX(-8deg);
  display: flex; align-items: baseline; gap: 8px;
}
.hub-count li > *{ transform: skewX(8deg); }
.hub-count .zk{ font-size: 26px; color: var(--accent-ink); }
.hub-count small{ font-size: 11px; font-weight: 800; }
.hub-count li.dim{ background: #2A2D35; color: #B9BCC4; }
.hub-count li.dim .zk{ color: #B9BCC4; }
/* ハブの権威チップ（執筆・監修表記／黒地）: ゴールドは枠線のみ、文字は白のまま */
.hub-cred{
  display: inline-block; margin: 0 0 16px;
  border: 2px solid var(--gold-2); border-image: var(--gold-grad) 1;
  color: #fff; font-size: 12px; font-weight: 700; padding: 4px 14px;
  transform: skewX(-8deg);
}
.hub-cred > span{ display: inline-block; transform: skewX(8deg); }

/* 地域ジャンプ＋絞り込み */
.hub-nav{ padding: 22px 0 8px; }
.region-jump{ list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; }
.region-jump a{
  display: inline-block; text-decoration: none;
  border: 2px solid var(--black); color: var(--black); background: #fff;
  font-size: 12.5px; font-weight: 800; padding: 6px 14px;
  transform: skewX(-8deg);
  transition: background .15s, color .15s;
}
.region-jump a > span{ display: inline-block; transform: skewX(8deg); }
.region-jump a:hover{ background: var(--black); color: #fff; }
.hub-filter{ max-width: 460px; }

/* 都道府県グリッド */
.region-sec{ padding: 10px 0 8px; }
.region-head{
  display: flex; align-items: baseline; gap: 12px;
  margin: 26px 0 14px;
  border-bottom: 3px solid var(--black);
  padding-bottom: 8px;
}
.region-head h2{
  margin: 0; font-size: 20px; font-weight: 900;
  display: flex; align-items: center; gap: 10px;
}
.region-head h2::before{
  content: ""; width: 10px; height: 22px; background: var(--accent);
  transform: skewX(-18deg);
}
.region-head small{ font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--muted); }

.pref-grid{
  list-style: none; margin: 0 0 10px; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
@media (min-width: 640px){ .pref-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px){ .pref-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1120px){ .pref-grid{ grid-template-columns: repeat(5, 1fr); } }

/* 県カード: アクセントバー・番号・ホバー・:targetはページアクセント
   （bodyの hub-police / hub-fire で青/赤に切替。トークン統合済みのため個別上書き不要） */
.pref-card{
  position: relative;
  display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--black); background: #fff;
  padding: 12px 12px; text-decoration: none; color: inherit;
  overflow: hidden; min-height: 68px;
  transition: transform .15s, box-shadow .15s;
}
.pref-card::before{
  content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 5px;
  background: var(--accent);
}
.pref-card:hover{ transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--accent); color: inherit; }
.pref-card:target{ outline: 4px solid var(--accent); outline-offset: 2px; }
.pref-card .pref-code{
  flex: none; font-style: italic; font-weight: 900; font-size: 24px;
  color: var(--accent-ink); min-width: 34px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* 県名（1行目）＋警察本部名（2行目）の2行構造。単語途中の折返しを防ぐ */
.pref-card .pref-name{
  font-size: 14px; font-weight: 800; line-height: 1.3; flex: 1; min-width: 0;
  white-space: nowrap; word-break: keep-all;
}
.pref-card .pref-name small{
  display: block; font-size: 10.5px; font-weight: 700; color: var(--muted);
  letter-spacing: .02em; margin-top: 2px; white-space: nowrap;
}
.pref-card .go{ flex: none; font-style: italic; font-weight: 900; color: var(--black); }

/* 準備中カード（グレー維持） */
.pref-card.is-soon{
  border-style: dashed; border-color: #B9BCC4; background: var(--court);
  cursor: default;
}
.pref-card.is-soon::before{ background: #B9BCC4; }
.pref-card.is-soon:hover{ transform: none; box-shadow: none; }
.pref-card.is-soon .pref-code{ color: #7A8089; } /* 24px太字=大テキストAA 3.6:1 */
.pref-card.is-soon .pref-name{ color: var(--muted); }
/* 準備中バッジは右上のリボンに（県名との重なり防止） */
.pref-card.is-soon .badge-soon{
  position: absolute; top: 5px; right: 6px;
  font-size: 10px; line-height: 1.6; padding: 1px 7px;
}

.hub-empty{ display: none; margin: 20px 0; color: var(--muted); font-weight: 700; }
.hub-empty.show{ display: block; }

/* ハブ下部：幹記事導線 */
.hub-guide-sec{ padding: 34px 0 50px; }
/* 幹記事ガイドバナー: ゴールド枠（権威まわり限定のアクセント。文字色は不変） */
.hub-guide-sec .acard{ border-color: var(--gold-2); }
.hub-guide-sec .acard::before{ background: var(--gold-3); }

/* ---------- 14. 汎用セクション余白 ---------- */
.pad-sec{ padding: 44px 0 50px; }
.mt-0{ margin-top: 0; }

/* ---------- 15. アクセシビリティ微調整 ---------- */
@media (prefers-reduced-motion: reduce){
  .hero::before{ animation: none; }
  *, *::before, *::after{ transition: none !important; }
}

/* ============================================================
   16. WordPress追補（テーマ実装で必要になった分。モックアップ由来ではない）
   ============================================================ */

/* wp_nav_menu のサブメニュー（.sub-menu）を .sub と同じ意匠に */
.gnav ul .sub-menu{
  list-style: none; margin: 0; padding: 8px 0;
  position: absolute; left: 0; top: 100%; min-width: 220px;
  background: var(--black); border: 1px solid #2A2D35; border-top: 3px solid #fff;
  display: none;
}
.gnav li:hover > .sub-menu,
.gnav li:focus-within > .sub-menu{ display: block; }
.gnav .sub-menu a{ padding: 9px 18px; font-weight: 600; font-size: 13px; }
.gnav .sub-menu a:hover{ background: #23252B; color: #fff; }

/* 目次はthe_contentフィルタで本文（.art-body）内に挿入されるため、
   .art-body h2 の黒帯・章番号カウンタが目次見出しに効かないよう打ち消す */
.art-body .toc-head h2{
  counter-increment: none;
  display: block; overflow: visible;
  background: none; color: #fff;
  margin: 0; padding: 0;
  font-size: 15px; font-weight: 900; letter-spacing: .08em; line-height: inherit;
}
.art-body .toc-head h2::before,
.art-body .toc-head h2::after{ content: none; }

/* WPコアの基本クラス */
.screen-reader-text{
  position: absolute !important;
  clip-path: inset(50%); overflow: hidden;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  word-wrap: normal !important;
}
.aligncenter{ display: block; margin-left: auto; margin-right: auto; }
.alignleft{ float: left; margin: 0 1.4em 1em 0; }
.alignright{ float: right; margin: 0 0 1em 1.4em; }
.wp-caption{ max-width: 100%; }
.wp-caption-text{ font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.art-body img{ margin: 0 0 1em; }

/* 記事下ページャ・アーカイブのページネーション */
.pagination{ margin: 30px 0 0; }
.pagination .nav-links{ display: flex; flex-wrap: wrap; gap: 6px; }
.pagination .page-numbers{
  display: inline-block; min-width: 40px; text-align: center;
  border: 2px solid var(--black); background: #fff; color: var(--black);
  font-weight: 800; font-style: italic; font-size: 14px;
  padding: 7px 10px; text-decoration: none;
  transition: background .15s, color .15s;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover{ background: var(--black); color: #fff; }
.pagination .page-numbers.dots{ border-color: transparent; }

/* アーカイブ・404などの汎用ページヘッダー余白 */
.archive-sec{ padding: 34px 0 50px; }
.notfound-sec{ padding: 60px 0 80px; }
.notfound-num{
  margin: 0 0 8px; font-size: clamp(72px, 16vw, 140px);
  font-style: italic; font-weight: 900; line-height: 1;
  color: rgba(22,24,29,.10); -webkit-text-stroke: 2px rgba(22,24,29,.22);
}