/* =============================================================================
   kknavi.css — 国際教育ナビ（kknavi.jp）リニューアル 共有スタイル（D4 カンプ基盤）
   -----------------------------------------------------------------------------
   一次ソース（正典）:
     - VIガイドライン  outputs/kknavi-vi/国際教育ナビ_VIガイドライン.md（v1.0, 2026.06）
     - デザインシステム outputs/kknavi-renewal/design-system.md（D2 v0.1）
     - 全画面ワイヤー   outputs/kknavi-renewal/wireframes.md（D3 v0.1）
   方針:
     - モバイルファースト（SP 起点 → min-width で PC エンハンス）
     - 単一H1 / テキスト非画像化 / WCAG AA / focus-visible 可視
     - 新色を作らない（VI/design-system の実値のみ）。優位表現を使わない。
   ⚠️ 【派生・要確認】🔁 の値は VI 確定 / D4 実機調整で上書き前提（design-system §4）。
   ============================================================================= */

/* =============================================================================
   1. デザイントークン（CSS カスタムプロパティ）
   design-system 付録「トークン一覧（CSS変数・実装スタブ）」を踏襲。
   ============================================================================= */
:root {
  /* --- カラー（プリミティブ）【VI由来 §3】 --- */
  --color-ink: #1A1A1F;            /* 文字・主役・反転背景 */
  --color-paper: #FFFFFF;          /* 基本背景・余白 */
  --color-accent-pink: #FF5E83;    /* 面・大見出し・グラフィックのみ（本文不可） */
  --color-accent-coral: #FFA66B;   /* グラデ端・補助アクセント */
  --color-link: #D8345C;           /* 白地リンク/小テキスト（AA確保） */
  --color-text-secondary: #6F6F6F; /* 副次テキスト */
  --color-border: #D5D5D5;         /* 罫線・境界 */
  --color-surface: #F5F5F5;        /* カード背景・面 */
  /* ブランドグラデ：CTA・帯・OGP 限定。本文背景に広く敷くのは NG（VI §3）🔁 #FF6883 暫定 */
  --gradient-brand: linear-gradient(90deg, #FF5E83 0%, #FF6883 50%, #FFA66B 100%);
  --gradient-brand-135: linear-gradient(135deg, #FF5E83 0%, #FF6883 50%, #FFA66B 100%);

  /* --- カラー（セマンティック）--- */
  --color-bg: var(--color-paper);
  --color-bg-subtle: var(--color-surface);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-text-secondary); /* 補足限定・本文化しない */
  --color-cta-bg: var(--gradient-brand);
  --color-on-accent: var(--color-paper);           /* グラデ/インク地の前景は白のみ */
  --color-accent-graphic: var(--color-accent-pink);

  /* --- 状態色【派生・要確認】🔁 --- */
  --color-focus-ring: #D8345C;
  --color-state-error: #D8345C;
  /* --color-state-success: 未定（VI に緑系なし。色相新設は保留） */
  --color-overlay: rgba(26, 26, 31, .56);
  --color-disabled-text: #6F6F6F;
  --color-disabled-bg: #F5F5F5;

  /* --- タイポ：フォント【VI由来 §4】 --- */
  --font-sans-jp: "Noto Sans JP", system-ui, sans-serif;            /* 和文 本文・見出し */
  --font-sans-latin: "Inter", system-ui, "Noto Sans JP", sans-serif; /* 欧文・数字・ラベル */

  /* --- タイポ：スケール（h1/h2/body=【VI由来 §4】, 他=【派生・要確認】🔁）--- */
  --font-size-h1: 40px;    /* VI由来 */
  --font-size-h2: 28px;    /* VI由来 */
  --font-size-body: 17px;  /* VI由来 */
  --font-size-h3: 22px;    /* 派生 */
  --font-size-h4: 19px;    /* 派生 */
  --font-size-lead: 19px;  /* 派生 */
  --font-size-small: 15px; /* 派生 */
  --font-size-caption: 13px; /* 派生 */
  --font-size-label: 13px; /* 派生 */
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* --- 行間・字間【派生・要確認】🔁 --- */
  --line-height-body: 1.9;
  --line-height-heading: 1.4;
  --line-height-tight: 1.25;
  --letter-spacing-body: 0.02em;
  --letter-spacing-tagline: 0.12em;

  /* --- スペーシング（8px 基準）【派生・要確認】🔁 --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* --- コンテナ・グリッド【派生・要確認】🔁 --- */
  --container-max: 1200px;     /* サイト最大幅 */
  --container-article: 720px;  /* 記事本文カラム（長文可読性） */
  --grid-gutter: 16px;         /* SP 既定。PC は 24px に上書き */
  --tap-target-min: 44px;      /* 最小タップ領域 */

  /* --- 角丸・影【派生・要確認】🔁（控えめ＝VI トンマナ）--- */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(26, 26, 31, .06);
  --shadow-md: 0 4px 16px rgba(26, 26, 31, .10);
  --shadow-focus: 0 0 0 3px rgba(216, 52, 92, .45); /* #D8345C 由来 */

  /* --- ロゴ【VI由来 §2】（アセットは assets/ 実在・🔁VI確定で差し替えうる）--- */
  --logo-min-width: 132px;   /* デジタル最小 */
  --logo-aspect: 252 / 43;   /* viewBox 比（≒ 5.86:1）*/

  /* --- レイアウト補助 --- */
  --header-height: 56px;     /* SP 既定。PC は 72px に上書き */
}

/* ブレークポイント（参照値・実体は @media で使用）【派生・要確認】🔁
   --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1200px; */

/* =============================================================================
   2. ベース（リセット＋モバイルファースト基盤）
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;          /* 16px 基準。px トークンは絶対指定 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans-jp);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, picture, video { max-width: 100%; height: auto; display: block; }

a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button { font: inherit; color: inherit; cursor: pointer; }

[hidden] { display: none !important; }

/* 欧文・数字は Inter を効かせる補助クラス（design-system §1-2-1） */
.is-latin { font-family: var(--font-sans-latin); }

/* スクリーンリーダー専用（視覚的に隠すがa11yツリーに残す） */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* --- フォーカス共通リング（a11y 必須・色だけに依存しない）design-system §1-6 --- */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* リング描画が映える要素には box-shadow も併用 */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.chip:focus-visible,
.card:focus-visible,
.card a:focus-visible,
.field:focus-visible,
input:focus-visible {
  outline-color: transparent;
  box-shadow: var(--shadow-focus);
}

/* reduced-motion 尊重（design-system §1-6） */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* =============================================================================
   3. レイアウト・ユーティリティ
   ============================================================================= */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4); /* SP 16px */
}
.container--article { max-width: var(--container-article); }

.section { padding-block: var(--space-7); }       /* SP 48px */
.section--tight { padding-block: var(--space-6); }
.section--subtle { background: var(--color-bg-subtle); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* レスポンシブグリッド（SP 1 列 → PC 多列） */
.grid { display: grid; gap: var(--grid-gutter); grid-template-columns: 1fr; }

/* =============================================================================
   4. タイポ・コンポーネント（C10 / P7 見出し・本文タイポセット）
   ============================================================================= */
.h1, h1 {
  font-family: var(--font-sans-jp);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: 0.01em;
}
.h2, h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
.h3, h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
.h4, h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
.lead {
  font-size: var(--font-size-lead);
  color: var(--color-text);
  line-height: 1.8;
}
.text-body { font-size: var(--font-size-body); line-height: var(--line-height-body); }
.text-small { font-size: var(--font-size-small); }
.text-caption { font-size: var(--font-size-caption); color: var(--color-text-muted); }
.text-muted { color: var(--color-text-muted); } /* 補足限定・本文化しない */

/* 記事本文（リンクは下線＋リンク色） */
.prose { font-size: var(--font-size-body); line-height: var(--line-height-body); }
.prose p + p { margin-top: var(--space-5); }
.prose a { color: var(--color-link); text-decoration: underline; }

/* セクション見出し（中央寄せの章タイトル＋任意の補足） */
.section-title {
  text-align: center;
  margin-bottom: var(--space-6);
}
.section-title__eyebrow {
  font-family: var(--font-sans-latin);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tagline);
  text-transform: uppercase;
  color: var(--color-link);
  display: block;
  margin-bottom: var(--space-2);
}
.section-title__lead {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* =============================================================================
   5. ボタン（.btn / .btn--primary）
   ============================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target-min);   /* 44px */
  padding: 10px var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans-jp);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-decoration: none;
  transition: box-shadow .15s ease, transform .1s ease, background-color .15s ease;
}
.btn:hover { box-shadow: var(--shadow-md); text-decoration: none; }
.btn:active { transform: translateY(1px); }

/* プライマリ＝ブランドグラデ地＋白文字（VI §3 効かせどころ＝CTA） */
.btn--primary {
  background: var(--gradient-brand);
  color: var(--color-on-accent);
  border-color: transparent;
}
.btn--primary:hover { box-shadow: var(--shadow-md); filter: brightness(1.03); }

/* インク地ボタン（控えめだが明快） */
.btn--ink {
  background: var(--color-ink);
  color: var(--color-on-accent);
  border-color: transparent;
}

/* 枠線のみ（本文を邪魔しない控えめ CTA。ink 文字） */
.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}

/* グラデ/インク地の上に置くボタン（白面＋ink 文字＝AA 余裕）。
   ヒーロー・CTA・追従バーなどアクセント地のどこでも使える共通 modifier。 */
.btn--on-accent {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: transparent;
}
.btn--on-accent:hover { box-shadow: var(--shadow-md); filter: brightness(1.02); }
.btn--on-accent-outline {
  background: transparent;
  color: var(--color-on-accent);
  border-color: rgba(255, 255, 255, .8);
}
.btn--on-accent-outline:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }

.btn--block { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled {
  background: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  border-color: var(--color-border);
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
}

/* =============================================================================
   6. グローバルヘッダー＋ナビ（C14 / P1）.site-header .gnav
   ============================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-height);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
/* ロゴ（白地＝ink 版。alt 付き画像。テキスト非画像化の例外＝媒体名ロゴ） */
.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.site-header__logo img {
  width: clamp(132px, 38vw, 168px); /* VI 最小 132px を下回らせない */
  height: auto;
}
.site-header__spacer { flex: 1 1 auto; }

/* グローバルナビ（PC で水平表示・SP は☰で開閉） */
.gnav { display: none; }                 /* SP 既定は非表示（☰内に格納） */
.gnav__list { display: flex; align-items: center; gap: var(--space-5); }
.gnav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target-min);
  color: var(--color-ink);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-small);
}
.gnav__link:hover { color: var(--color-link); text-decoration: none; }
.gnav__link[aria-current="page"] {
  color: var(--color-link);
  box-shadow: inset 0 -2px 0 var(--color-link);
}
.gnav__link--muted { color: var(--color-text-muted); } /* （学校事例）提案中などの補助項目 */

/* 検索入口・ハンバーガー（親指圏） */
.header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target-min);
  height: var(--tap-target-min);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink);
}
.header-icon:hover { background: var(--color-surface); }
.header-menu-toggle { display: inline-flex; }  /* SP 表示 */

/* SP ドロワー（☰展開）— カンプでは静的に内容を提示 */
.gnav-drawer {
  border-top: 1px solid var(--color-border);
  background: var(--color-paper);
  padding: var(--space-3) var(--space-4) var(--space-5);
}
.gnav-drawer__list > li + li { border-top: 1px solid var(--color-border); }
.gnav-drawer__link {
  display: flex;
  align-items: center;
  min-height: var(--tap-target-min);
  padding-block: var(--space-2);
  color: var(--color-ink);
  font-weight: var(--font-weight-medium);
}

/* =============================================================================
   7. ヒーロー（.hero）— トップ T1 ①／効かせどころのグラデ
   ============================================================================= */
.hero {
  position: relative;
  background: var(--gradient-brand-135);  /* グラデ地。白文字のみ重ねる（VI §3） */
  color: var(--color-on-accent);
  overflow: hidden;
}
.hero__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-8) var(--space-4);  /* SP */
  position: relative;
  z-index: 1;
}
.hero__eyebrow {
  font-family: var(--font-sans-latin);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tagline);
  text-transform: uppercase;
  opacity: .95;
  margin-bottom: var(--space-3);
}
.hero__title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-on-accent);
  margin: 0 0 var(--space-4);
}
.hero__lead {
  font-size: var(--font-size-lead);
  line-height: 1.8;
  max-width: 36em;
  margin: 0 0 var(--space-6);
  color: var(--color-on-accent);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* ヒーロー地の上のボタンは共通 .btn--on-accent / .btn--on-accent-outline を使う */

/* =============================================================================
   8. 記事カード（C1）.card ＋ タイプ別 modifier
   レイアウト: 縦型（既定）/ 横型（.card--row）/ コンパクト（.card--compact）
   ============================================================================= */
.card {
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow .15s ease, transform .1s ease;
  height: 100%;
}
.card:hover { box-shadow: var(--shadow-md); }
.card:hover .card__title { text-decoration: underline; }

/* サムネ／空サムネ（プレースホルダ）— 寸法確保で CLS 0 */
.card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-surface);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  flex: 1 1 auto;
}
.card__category {
  font-family: var(--font-sans-latin);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-link);
}
.card__title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  color: var(--color-ink);       /* タイトルは本文基準（AAA） */
}
.card__title a { color: inherit; text-decoration: none; }
/* カード全体リンク化（擬似要素でクリック領域を拡張・キーボード到達は実リンク） */
.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card__excerpt {
  font-size: var(--font-size-small);
  color: var(--color-text);
  line-height: 1.7;
}
.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  margin-top: auto;
}
.card__meta time { font-family: var(--font-sans-latin); }
.card { position: relative; } /* ::after オーバーレイの基準 */

/* 横型（PC 一覧・関連枠） */
.card--row { flex-direction: row; }
.card--row .card__media { flex: 0 0 40%; aspect-ratio: 4 / 3; }
.card--row .card__body { flex: 1 1 auto; }

/* コンパクト（サイド・関連リスト・サムネ小） */
.card--compact .card__media { aspect-ratio: 3 / 2; }
.card--compact .card__title { font-size: var(--font-size-body); }

/* タイプ差分（メタ強調の出し分け。色分けは最小限＝アクセント乱用しない） */
.card--interview .card__author,
.card--school .card__school { /* 著者/学校メタを前面に（下の author-meta/school-meta を内包） */ }
.card--textbook .card__category { color: var(--color-link); }

/* =============================================================================
   9. ハブ入口ブロック（T1 ② 2本柱）.hub-entry
   ============================================================================= */
.hub-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  text-decoration: none;
  color: var(--color-ink);
  transition: box-shadow .15s ease, border-color .15s ease;
  height: 100%;
}
.hub-entry:hover { box-shadow: var(--shadow-md); border-color: var(--color-ink); text-decoration: none; }
.hub-entry__label {
  font-family: var(--font-sans-latin);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-link);
}
.hub-entry__title { font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); line-height: 1.4; }
.hub-entry__desc { font-size: var(--font-size-small); color: var(--color-text); line-height: 1.7; }
.hub-entry__more {
  margin-top: auto;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-link);
}
.hub-entry__more::after { content: " →"; }
/* 主役の2本柱は左端にグラデのアクセント帯（面＝効かせどころ・本文文字には使わない） */
.hub-entry--primary { border-left: 4px solid transparent; border-image: var(--gradient-brand) 1; }
/* 補助（指導法・提案中の学校事例）は控えめ */
.hub-entry--sub { background: var(--color-surface); }

/* =============================================================================
   10. タグチップ（C9 / P4）.chip
   既定: surface 地 ＋ ink 文字 ＋ pill。色分けはしない/最小限。
   ============================================================================= */
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 32px;                 /* タップ確保（行内・44px は親で担保） */
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);          /* surface×ink ≒ AAA */
  font-family: var(--font-sans-jp);
  font-size: var(--font-size-label);
  line-height: 1.3;
  text-decoration: none;
  border: 1px solid transparent;
}
.chip:hover { border-color: var(--color-link); color: var(--color-link); text-decoration: none; }
.chip__axis { color: var(--color-text-muted); font-size: var(--font-size-caption); } /* (技能) 等の軸ラベル */
.chip--more { background: transparent; color: var(--color-link); font-weight: var(--font-weight-bold); } /* +N 省略 */

/* =============================================================================
   11. 著者（教員）メタ（C7）.author-meta ／ 学校メタ（C8）.school-meta
   氏名・学校名はテキスト（画像化しない）。装飾で消さない。
   ============================================================================= */
.author-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.author-meta__avatar {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);   /* 空状態でも崩れない */
  object-fit: cover;
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-bold);
  overflow: hidden;
}
.author-meta__name { font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); color: var(--color-ink); }
.author-meta__role { font-size: var(--font-size-small); color: var(--color-text-muted); }
.author-meta--lg .author-meta__avatar { width: 72px; height: 72px; }

.school-meta { display: flex; flex-direction: column; gap: var(--space-2); }
.school-meta__name { font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); color: var(--color-ink); }
.school-meta__row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--font-size-small); color: var(--color-text-muted); }
.school-meta__label { color: var(--color-text-muted); }
.school-meta__value { color: var(--color-ink); }

/* =============================================================================
   12. 比較表（C2）.compare-table
   PC: 表。SP: カード化（既定）／横スクロール表（.compare-table--scroll）。
   ============================================================================= */
.compare-wrap { width: 100%; }

/* --- SP 既定＝カード化（1教材=1カード, 項目ラベル+値） --- */
.compare-cards { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.compare-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  padding: var(--space-4);
}
.compare-card__title { font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); color: var(--color-ink); margin-bottom: var(--space-3); }
.compare-card__title a { color: inherit; text-decoration: none; }
.compare-card__title a:hover { color: var(--color-link); text-decoration: underline; }
.compare-card__row {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-small);
}
.compare-card__label { color: var(--color-text-muted); }
.compare-card__value { color: var(--color-ink); }

/* --- PC 表（テキスト実体。画像化しない） --- */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-small);
}
.compare-table caption { text-align: left; color: var(--color-text-muted); font-size: var(--font-size-caption); margin-bottom: var(--space-2); }
.compare-table th, .compare-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.compare-table thead th {
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  background: var(--color-surface);
  white-space: nowrap;
}
.compare-table tbody tr:hover { background: var(--color-surface); }
.compare-table th[scope="row"] { font-weight: var(--font-weight-bold); color: var(--color-ink); }
.compare-table a { color: var(--color-link); }
.compare-table .is-empty { color: var(--color-text-muted); } /* 未付与セルは「—」 */

/* 横スクロール表（任意） */
.compare-table--scroll { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =============================================================================
   13. 絞り込みフィルタ（C3）.facet
   PC: 上部バー/サイド。SP: ボトムシート起動ボタン＋主要ピル。
   ============================================================================= */
.facet { display: flex; flex-direction: column; gap: var(--space-4); }
.facet__group { display: flex; flex-direction: column; gap: var(--space-3); }
.facet__legend { font-size: var(--font-size-small); font-weight: var(--font-weight-bold); color: var(--color-ink); }
.facet__pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* ピル（チェック/選択） */
.facet-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target-min);
  padding: 6px var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--font-size-small);
  text-decoration: none;
}
.facet-pill:hover { border-color: var(--color-link); color: var(--color-link); text-decoration: none; }
.facet-pill__count { color: var(--color-text-muted); font-family: var(--font-sans-latin); font-size: var(--font-size-caption); }
/* 選択中（色だけに依存せず ✓ も併用） */
.facet-pill[aria-pressed="true"], .facet-pill.is-selected {
  background: var(--color-ink);
  color: var(--color-on-accent);
  border-color: var(--color-ink);
}
.facet-pill[aria-pressed="true"] .facet-pill__count,
.facet-pill.is-selected .facet-pill__count { color: var(--color-on-accent); }

/* SP のボトムシート起動ボタン（親指圏） */
.facet-sheet-trigger { display: inline-flex; }

/* ボトムシート（カンプでは構造のみ。背面は overlay） */
.bottom-sheet-overlay { position: fixed; inset: 0; background: var(--color-overlay); z-index: 200; }
.bottom-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 201;
  background: var(--color-paper);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-md);
  padding: var(--space-5) var(--space-4) var(--space-6);
  max-height: 80vh; overflow: auto;
}

/* =============================================================================
   14. FAQ アコーディオン（C5）.faq
   button[aria-expanded] + aria-controls。中身がある時だけ出す。
   ============================================================================= */
.faq { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-paper); }
.faq__item + .faq__item { border-top: 1px solid var(--color-border); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap-target-min);
  padding: var(--space-4);
  background: transparent;
  border: 0;
  text-align: left;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
}
.faq__q:hover { background: var(--color-surface); }
.faq__icon { flex: 0 0 auto; transition: transform .15s ease; color: var(--color-link); }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__a {
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--font-size-small);
  line-height: 1.8;
  color: var(--color-text);
}
.faq__a[hidden] { display: none; }

/* =============================================================================
   15. パンくず（C4 / P3）.breadcrumb — SP でも省略しない
   ============================================================================= */
.breadcrumb { padding-block: var(--space-3); }
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-caption);
}
.breadcrumb__list a { color: var(--color-link); }
.breadcrumb__sep { color: var(--color-text-muted); } /* aria-hidden 想定 */
.breadcrumb__current { color: var(--color-text-muted); } /* aria-current="page" */

/* =============================================================================
   16. CTA（C6 / P5）.cta — グラデ地・白文字。控えめ版も用意。
   ============================================================================= */
.cta {
  background: var(--gradient-brand-135);
  color: var(--color-on-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-5);
  text-align: center;
}
.cta__title { font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); color: var(--color-on-accent); line-height: 1.4; margin: 0 0 var(--space-3); }
.cta__lead { font-size: var(--font-size-body); line-height: 1.8; color: var(--color-on-accent); max-width: 36em; margin: 0 auto var(--space-5); }
/* リードマグネット（C13）— 登録理由の視覚化 */
.cta__magnet {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--font-size-small);
  color: var(--color-on-accent);
}
/* フォーム（メール＋送信） */
.cta__form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 30em; margin-inline: auto; }
.field {
  width: 100%;
  min-height: var(--tap-target-min);
  padding: 10px var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--font-size-body);
}
.field::placeholder { color: var(--color-text-muted); }
.cta__note { font-size: var(--font-size-caption); color: var(--color-on-accent); opacity: .9; margin-top: var(--space-2); }

/* 控えめ版（記事中インライン／本文を邪魔しない・枠線＋ink 文字） */
.cta--subtle {
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-border);
}
.cta--subtle .cta__title,
.cta--subtle .cta__lead { color: var(--color-ink); }
.cta--subtle .cta__magnet { background: var(--color-paper); border-color: var(--color-border); color: var(--color-ink); }
.cta--subtle .cta__note { color: var(--color-text-muted); }

/* モバイル追従バー（控えめ・CLS/誤タップ注意・寸法確保）— カンプでは SP のみ提示 */
.cta-sticky {
  position: sticky;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-ink);
  color: var(--color-on-accent);
  padding: var(--space-3) var(--space-4);
  box-shadow: 0 -2px 12px rgba(26, 26, 31, .14);
}
.cta-sticky__text { flex: 1 1 auto; font-size: var(--font-size-small); font-weight: var(--font-weight-bold); }

/* =============================================================================
   17. 引用／プルクオート（C11）.pullquote — 装飾は控えめ
   アクセントは罫線/記号のみ（面）。本文文字色には #FF5E83 を使わない。
   ============================================================================= */
.pullquote {
  border-left: 4px solid transparent;
  border-image: var(--gradient-brand) 1;  /* 罫線＝効かせどころ（面） */
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
  margin: var(--space-6) 0;
}
.pullquote__text { font-size: var(--font-size-h4); line-height: 1.7; color: var(--color-ink); font-weight: var(--font-weight-medium); }
.pullquote__cite { display: block; margin-top: var(--space-3); font-size: var(--font-size-small); color: var(--color-text-muted); font-style: normal; }

/* =============================================================================
   18. 関連リンク枠（C12 / P6）.related — 全記事末必須1セット
   ============================================================================= */
.related { }
.related__title { font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); margin-bottom: var(--space-5); } /* H2/H3。H1 にしない */
.related__grid { display: grid; gap: var(--grid-gutter); grid-template-columns: 1fr; }

/* =============================================================================
   19. ページネーション（補助）.pagination
   ============================================================================= */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; }
.pagination__link, .pagination__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-target-min);
  min-height: var(--tap-target-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-family: var(--font-sans-latin);
  font-size: var(--font-size-small);
}
.pagination__link { color: var(--color-link); background: var(--color-paper); }
.pagination__link:hover { background: var(--color-surface); text-decoration: none; }
.pagination__current {
  background: var(--color-ink);
  color: var(--color-on-accent);
  border-color: var(--color-ink);
  font-weight: var(--font-weight-bold);
}
.pagination__link[aria-disabled="true"] { color: var(--color-disabled-text); background: var(--color-disabled-bg); cursor: not-allowed; }

/* =============================================================================
   20. 画像プレースホルダ（.imgslot）— 寸法確保で CLS 0・alt 相当ラベル
   ============================================================================= */
.imgslot {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  text-align: center;
  padding: var(--space-3);
  border: 0;
}
.imgslot--ratio-16-9 { aspect-ratio: 16 / 9; }
.imgslot--ratio-4-3 { aspect-ratio: 4 / 3; }
.imgslot--ratio-1-1 { aspect-ratio: 1 / 1; }
.imgslot__label { max-width: 90%; }

/* =============================================================================
   21. フッター（C14 / P2）.site-footer — SP 縦積み → PC 多列
   ============================================================================= */
.site-footer {
  background: var(--color-ink);            /* インク地：白ロゴ＋白文字（VI §2 反転） */
  color: var(--color-on-accent);
  padding-block: var(--space-8) var(--space-6);
}
.site-footer a { color: var(--color-on-accent); }
.site-footer a:hover { color: var(--color-on-accent); text-decoration: underline; }
.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
.site-footer__brand { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__logo img { width: 160px; height: auto; }
.site-footer__desc { font-size: var(--font-size-small); line-height: 1.8; color: rgba(255, 255, 255, .82); max-width: 32em; }
.footer-nav__title {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  margin-bottom: var(--space-3);
}
.footer-nav__list > li + li { margin-top: var(--space-2); }
.footer-nav__list a { font-size: var(--font-size-small); }
.site-footer__bottom {
  max-width: var(--container-max);
  margin: var(--space-7) auto 0;
  padding: var(--space-5) var(--space-4) 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-caption);
  color: rgba(255, 255, 255, .7);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }

/* =============================================================================
   22. レスポンシブ — SP 起点 → min-width で PC エンハンス
   BP: 480 / 768 / 1024 / 1200（design-system §1-5）
   ============================================================================= */

/* --- ≥480px（大きめスマホ）: 2 列グリッドに --- */
@media (min-width: 480px) {
  .grid--cards { grid-template-columns: repeat(2, 1fr); }
  .compare-cards { grid-template-columns: repeat(2, 1fr); }
  .related__grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- ≥768px（タブレット境界）: ヘッダー水平ナビ / ヒーロー拡張 / 比較表は表へ --- */
@media (min-width: 768px) {
  :root {
    --grid-gutter: 24px;     /* PC ガター */
    --header-height: 72px;
  }
  .container { padding-inline: var(--space-6); }
  .section { padding-block: var(--space-8); }

  /* ヘッダー: ☰非表示・グロナビ表示 */
  .gnav { display: block; }
  .header-menu-toggle { display: none; }
  .gnav-drawer { display: none; }

  /* ヒーロー */
  .hero__inner { padding: var(--space-9) var(--space-6); }
  .hero__title { font-size: 48px; }            /* H1 40 を起点に PC で拡張（装飾的・H1 のまま） */
  .hero__lead { font-size: var(--font-size-lead); }

  /* 2本柱: 主役2枚 + 補助2枚 */
  .grid--hubs { grid-template-columns: repeat(2, 1fr); }
  .grid--hubs-sub { grid-template-columns: repeat(2, 1fr); }

  /* カード: 3 列 */
  .grid--cards { grid-template-columns: repeat(3, 1fr); }
  .related__grid { grid-template-columns: repeat(3, 1fr); }

  /* 比較表: カードを隠し表を表示（SP=カード / PC=表） */
  .compare-cards { display: none; }
  .compare-table-pc { display: table; }

  /* CTA フォームを横並びに */
  .cta__form { flex-direction: row; align-items: stretch; }
  .cta__form .field { flex: 1 1 auto; }
  .cta__form .btn { flex: 0 0 auto; }

  /* SP 専用要素を隠す */
  .sp-only { display: none !important; }
  .facet-sheet-trigger { display: none; }
  .cta-sticky { display: none; }

  /* フッター多列 */
  .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-7); align-items: start; }
}

/* PC 既定では SP 専用の比較表カードを隠す前提のため、SP では PC 表を隠す */
@media (max-width: 767.98px) {
  .compare-table-pc { display: none; }
  .pc-only { display: none !important; }
}

/* --- ≥1024px（PC・情報濃度UP）: 余白とリードを広げる --- */
@media (min-width: 1024px) {
  .hero__title { font-size: 56px; }
  .section--lg { padding-block: var(--space-9); }
  /* T1 注目記事: 先頭カードをフィーチャー（横型大）にする任意レイアウト */
  .grid--cards-feature { grid-template-columns: repeat(3, 1fr); }
}

/* --- ≥1200px（コンテナ上限）--- */
@media (min-width: 1200px) {
  .container { padding-inline: 0; }
}

/* =============================================================================
   23. ホーム リードモジュール（編集トップ＝視覚階層: 主役大 + 準主役小）
   F パターンの起点（左上）に主役を置き、右に準主役を積む。画像・見出しのサイズで
   「強弱」をつける（news フロントの定石／editorial front の visual hierarchy）。
   ============================================================================= */
.section-title--left { text-align: left; }

.lead-grid { display: grid; gap: var(--grid-gutter); grid-template-columns: 1fr; align-items: start; }

/* 主役（フィーチャー）= 大。既定 .card を継承し、見出し・余白・本文を拡張 */
.feature-card .card__body { gap: var(--space-4); padding: var(--space-5); }
.feature-card .card__title { font-size: var(--font-size-h3); line-height: 1.35; }
.feature-card .card__excerpt { font-size: var(--font-size-body); line-height: 1.8; }

/* 準主役リスト = 横型ミニカード（小サムネ＋見出し中心・本文なし） */
.secondary-list { display: flex; flex-direction: column; }
.secondary-list .mini-card + .mini-card { border-top: 1px solid var(--color-border); }
.mini-card {
  position: relative;
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  background: var(--color-paper);
}
.mini-card__media { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; }
.mini-card__cat {
  font-family: var(--font-sans-latin);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-link);
}
.mini-card__title { font-size: var(--font-size-small); font-weight: var(--font-weight-bold); line-height: 1.5; color: var(--color-ink); margin-top: 2px; }
.mini-card__title a { color: inherit; text-decoration: none; }
.mini-card__title a::after { content: ""; position: absolute; inset: 0; }
.mini-card:hover .mini-card__title { text-decoration: underline; }
.mini-card__meta { margin-top: var(--space-1); font-size: var(--font-size-caption); color: var(--color-text-muted); }
.mini-card__meta time { font-family: var(--font-sans-latin); }

@media (min-width: 768px) {
  /* 主役大（左・F パターン起点） + 準主役リスト（右） */
  .lead-grid { grid-template-columns: 1.7fr 1fr; gap: var(--space-7); }
  .feature-card .card__title { font-size: var(--font-size-h2); line-height: 1.3; }
}

/* =============================================================================
   24. プロフェッショナル・ディレクトリ（一覧性重視＝小さめ・多数）
   「これだけの先生が集う場」を見せ、取材対象の『入りたい』動機を高める。
   kknavi は記事≒教員インタビューのため、この一覧は実質「人で見る新着」。
   ============================================================================= */
.pro-grid { display: grid; gap: var(--space-5) var(--space-4); grid-template-columns: repeat(2, 1fr); }
.pro-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); }
.pro-card__photo { width: 88px; height: 88px; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-surface); }
.pro-card__name { font-size: var(--font-size-small); font-weight: var(--font-weight-bold); color: var(--color-ink); line-height: 1.4; }
.pro-card__name a { color: inherit; text-decoration: none; }
.pro-card__name a::after { content: ""; position: absolute; inset: 0; }
.pro-card:hover .pro-card__name { text-decoration: underline; }
.pro-card__school { font-size: var(--font-size-caption); color: var(--color-text-muted); line-height: 1.4; }
@media (min-width: 480px) { .pro-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .pro-grid { grid-template-columns: repeat(6, 1fr); gap: var(--space-6) var(--space-4); } }

/* 取材供給の入口（『一覧に入りたい』を行動に変える小導線） */
.join-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3);
  margin-top: var(--space-6); padding: var(--space-4) var(--space-5);
  background: var(--color-paper); border: 1px dashed var(--color-border); border-radius: var(--radius-md);
  font-size: var(--font-size-small); color: var(--color-text); text-align: center;
}
.join-cta strong { color: var(--color-ink); }

/* 2 分割グリッド（セミナー等の小モジュール） */
.grid--two { grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid--two { grid-template-columns: repeat(2, 1fr); } }

/* カテゴリ別「新着」リバーの見出し行（左：見出し / 右：もっと見る） */
.river-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.river-head__more { font-size: var(--font-size-small); font-weight: var(--font-weight-bold); color: var(--color-link); white-space: nowrap; }
.river-head__more::after { content: " →"; }

/* =============================================================================
   25. イベント（セミナー）告知リスト — 現行サイト準拠の「小さい行」
   日付ブロック + 小バナー + タイトル + タグ。記事カードより小さく一覧性重視。
   ============================================================================= */
.event-list { display: flex; flex-direction: column; }
.event-item + .event-item { border-top: 1px solid var(--color-border); }
.event-item {
  position: relative;
  display: grid;
  grid-template-columns: 46px 76px 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4) 0;
}
.event-item__date { text-align: center; font-family: var(--font-sans-latin); line-height: 1.15; }
.event-item__date .y { display: block; font-size: 11px; color: var(--color-text-muted); }
.event-item__date .d { display: block; font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); color: var(--color-ink); }
.event-item__date .t { display: block; font-size: 11px; color: var(--color-text-muted); }
.event-item__thumb { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); }
.event-item__body { display: flex; flex-direction: column; gap: var(--space-2); }
.event-item__free { font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); color: var(--color-link); }
.event-item__title { font-size: var(--font-size-small); font-weight: var(--font-weight-bold); line-height: 1.5; color: var(--color-ink); }
.event-item__title a { color: inherit; text-decoration: none; }
.event-item__title a::after { content: ""; position: absolute; inset: 0; }
.event-item:hover .event-item__title { text-decoration: underline; }
.event-item__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.event-tag { display: inline-flex; align-items: center; padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-on-accent); font-size: 11px; font-weight: var(--font-weight-medium); }
@media (min-width: 600px) {
  .event-item { grid-template-columns: 64px 112px 1fr; gap: var(--space-4); }
}

/* =============================================================================
   26. 運営元のサービス枠（ハウス広告・控えめ）.promo
   自社プロダクト(RepeaTalk / KOOM)の紹介。第三者広告でなく"運営元のサービス"なので
   PR表記＋surface地で控えめに。寸法確保で CLS 0。ブランド色は枠の中だけで使う。
   ============================================================================= */
.promo {
  position: relative;
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.promo__label {
  position: absolute; top: var(--space-2); right: var(--space-3);
  font-family: var(--font-sans-latin); font-size: 11px; letter-spacing: .06em;
  color: var(--color-text-muted); text-transform: uppercase;
}
.promo__logo {
  flex: 0 0 auto; width: 100px; height: 52px;
  display: grid; place-items: center; text-align: center;
  background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: var(--font-sans-latin); font-weight: var(--font-weight-bold); color: var(--color-ink); font-size: 14px;
  overflow: hidden;
}
.promo__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.promo__title { font-size: var(--font-size-small); font-weight: var(--font-weight-bold); color: var(--color-ink); line-height: 1.4; }
.promo__desc { font-size: var(--font-size-caption); color: var(--color-text-muted); line-height: 1.5; }
.promo__cta { flex: 0 0 auto; font-size: var(--font-size-small); font-weight: var(--font-weight-bold); color: var(--color-link); white-space: nowrap; }
@media (max-width: 599.98px) {
  .promo { flex-wrap: wrap; gap: var(--space-3); }
  .promo__cta { width: 100%; }
}

/* =============================================================================
   27. 記事内目次（.toc）— H2 アンカーリスト。SP=<details>で折りたたみ / PC=開いた箱
   記事詳細（T4/T5/T7）の著者メタ直後に置く。回遊でなく「読む前の見通し」を担う。
   SP: <details class="toc"> で <summary> をタップして開閉（JS不要・ネイティブ）。
   PC(≥768): 常時開いた状態（details[open] を CSS で強制表示・summary は非対話見出しに）。
   ============================================================================= */
.toc {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4) var(--space-5);
  margin-block: var(--space-6);
}
.toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap-target-min);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;                 /* デフォルト三角を消す（独自アイコン） */
}
.toc__summary::-webkit-details-marker { display: none; }
.toc__summary-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.toc__eyebrow {
  font-family: var(--font-sans-latin);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-link);
}
.toc__icon { flex: 0 0 auto; transition: transform .15s ease; color: var(--color-link); }
.toc[open] .toc__icon { transform: rotate(180deg); }
/* 開いているときだけ縦リストとして表示（閉じている SP では UA が畳む）。
   display をここで常時 flex にすると <details> のネイティブ折りたたみが壊れるため [open] で出す。 */
.toc[open] > .toc__list { display: flex; }
.toc__list { margin-top: var(--space-3); flex-direction: column; gap: var(--space-1); counter-reset: toc; }
.toc__item { position: relative; }
.toc__link {
  display: block;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  font-size: var(--font-size-small);
  line-height: 1.6;
  color: var(--color-link);
  text-decoration: none;
}
.toc__link::before {
  counter-increment: toc;
  content: counter(toc) ".";
  position: absolute;
  left: 0;
  font-family: var(--font-sans-latin);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
}
.toc__link:hover { text-decoration: underline; }

@media (min-width: 768px) {
  /* PC: 常に開いた箱として表示（<details> が閉じていても中身を見せる）。
     UA は details:not([open]) の summary 以外を display:none にするため明示的に上書きする。 */
  .toc:not([open]) > .toc__list { display: flex; }
  .toc > .toc__summary { cursor: default; }
  .toc .toc__icon { display: none; }        /* PC は開閉アイコン不要 */
}

/* =============================================================================
   28. シェア行（.share）— 記事末の軽量テキストリンク型（X / LINE / URLコピー）
   intent URL 方式で外部スクリプトなし（コピーのみ数行のインラインJSで補助）。
   控えめ＝面を張らずテキストリンク中心。タグ群の直後に置く（T5/T4/T7 で同位置）。
   ============================================================================= */
.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.share__label {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  letter-spacing: .04em;
}
.share__list { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.share__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target-min);
  padding: 6px var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.share__link:hover { border-color: var(--color-link); color: var(--color-link); text-decoration: none; }
.share__link svg { flex: 0 0 auto; }
/* コピー完了フィードバック（JS が data-copied を立てる。色に依存せず文言で伝える） */
.share__link[data-copied="true"] { border-color: var(--color-ink); color: var(--color-ink); }
.share__status { font-size: var(--font-size-caption); color: var(--color-text-muted); }

/* =============================================================================
   29. プロフィールヒーロー（.profile-hero）— プロフェッショナル個人ページ（T13）冒頭
   写真（.imgslot）＋氏名（H1）＋所属・肩書＋専門タグ。人名SEO資産の核。
   SP: 縦積み（写真→氏名→所属→タグ）。PC(≥768): 写真=左固定 / テキスト=右。
   ============================================================================= */
.profile-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-block: var(--space-5) var(--space-7);
}
.profile-hero__media { width: 160px; }        /* SP: 小さめの正方形ポートレート */
.profile-hero__photo { border-radius: var(--radius-lg); overflow: hidden; }
.profile-hero__body { display: flex; flex-direction: column; gap: var(--space-3); }
.profile-hero__eyebrow {
  font-family: var(--font-sans-latin);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-link);
}
.profile-hero__name { margin: 0; }             /* ここが H1（氏名） */
.profile-hero__role { font-size: var(--font-size-lead); color: var(--color-text); line-height: 1.6; }
.profile-hero__school { font-size: var(--font-size-small); color: var(--color-text-muted); }
@media (min-width: 768px) {
  .profile-hero { grid-template-columns: 200px 1fr; gap: var(--space-7); align-items: center; }
  .profile-hero__media { width: 200px; }
}

/* セクション件数バッジ（「この先生の記事（8件）」等の一覧見出しの補助） */
.count-badge {
  font-family: var(--font-sans-latin);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  margin-left: var(--space-2);
}