/* ==========================================================================
   SinqContent 公開面 共通スタイル（KAIGOLOG）
   2026-07-28 designer / 継続流入コンテンツエンジン モックアップ用

   方針：
   - assets/style.css の CSS 変数・既存クラス（.btn / .site-header / .site-footer /
     .section / .article-card 等）を土台にする。配色・フォントは新規発明しない。
   - 既存 article-*.html の記事スタイル（.article-wrap / .article-sources 等）は
     各ページのインライン <style> に重複していたものを、この 1 ファイルへ集約した。
     ＝新規CSSではなく「既存スタイルの共通化」。既存 article-*.html は無改変。
   - 余白は 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 の一貫スケールのみ使用。
   - アクセントは --color-accent（アンバー）1色に限定。状態色（success/warning/
     danger）は「状態を示すときだけ」使い、装飾には使わない。グラデーションは
     既存 .article-cta / .cta-band の踏襲以外は追加しない。
   ========================================================================== */

:root {
  /* 02_共通ブランド方針 のパレットにある Danger を、既存 style.css に未定義のため補う */
  --color-danger: #b91c1c;
  --color-danger-soft: #fdeceb;
  --color-warning-soft: #fdf3e3;
  --color-info: #1e40af;
  /* 注意：style.css の --color-primary-light は #2a4d8f（濃い青）で「薄い色」ではない。
     淡色の面が必要な箇所でこれを背景に使うと文字が読めなくなるため、専用の淡色を持つ。 */
  --color-primary-soft: #e8edf6;
}

/* ==========================================================================
   1. 一覧ページ共通：ページ見出し帯
   ========================================================================== */
.content-head {
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
  padding: 40px 24px 32px;
}
.content-head-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.content-head h1 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-primary);
  margin: 0 0 8px;
  text-wrap: pretty;
}
.content-head .content-head-lead {
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-muted);
  margin: 0;
  max-width: var(--max-width-text);
}

/* ==========================================================================
   2. パンくず（既存 article-*.html と同一の見た目）
   ========================================================================== */
.breadcrumb {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 24px;
  line-height: 1.7;
}
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary); text-decoration: underline; }
.breadcrumb span { margin: 0 6px; }

/* ==========================================================================
   3. カテゴリフィルタ（スマホは横一列＋横スクロール＝02 §A 準拠）
   ========================================================================== */
.filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  padding: 0 0 4px;
  margin: 0 0 24px;
}
.filter-bar::-webkit-scrollbar { display: none; }
/* タップ目標 44px（2026-07-28 ui-reviewer M-8）。
   旧 padding:7px 16px ＝実高 約34px で、屋外・片手・高齢者の指では隣のチップを
   踏みやすかった。高さは min-height で確保し、左右の余白だけ padding で持つ。 */
.filter-chip {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0 16px;
  text-decoration: none;
}
.filter-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.filter-chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  font-weight: 600;
}
.filter-chip.is-active:hover { color: #ffffff; }

/* ==========================================================================
   4. 記事カード（画像を使わない前提のカード）
      情報の段差＝ 種別チップ(11px) / タイトル(17px 600) / リード(14px muted)
      / メタ(12px) の 4 段。数字（出典件数・更新日）を出して薄さを避ける。
   ========================================================================== */
.post-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.post-list.is-single { grid-template-columns: 1fr; }

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 24px 16px;
  transition: box-shadow .15s, border-color .15s;
  /* カテゴリ帯の既定色（カテゴリ未設定のカード＝無彩色で目立たせない） */
  --cat-band: #dfe3ea;
}
.post-card:hover {
  border-color: var(--color-primary-light);
  box-shadow: 0 4px 14px rgba(28, 52, 100, .08);
}

/* --------------------------------------------------------------------------
   カテゴリ帯（2026-07-28 ui-reviewer m-1）
   同じ形のカードが縦に並ぶと、スクロール中に「今どのあたりを見ているか」の
   手がかりが無くなる。左端 4px の帯でカテゴリを区別する。
   配色は新しい色相を足さず、アクセント（アンバー）の濃淡5段階だけで作る
   （虹色配色にしない＝02_共通ブランド方針／アクセントは1色）。
   帯は .post-card-title a::after（カード全面のクリック領域）の下に入るため、
   タップ挙動には影響しない。
   -------------------------------------------------------------------------- */
.post-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--cat-band);
}
.post-card.cat-1 { --cat-band: #8a4d0f; }
.post-card.cat-2 { --cat-band: #b8741a; }
.post-card.cat-3 { --cat-band: #cf9440; }
.post-card.cat-4 { --cat-band: #e0b678; }
.post-card.cat-5 { --cat-band: #eed8b4; }
.post-card-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.post-card-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-primary);
  margin: 0;
  text-wrap: pretty;
}
.post-card-title a { color: inherit; text-decoration: none; }
/* 既読の判別（m-1）。一覧に戻ったとき「どれを読んだか」が分かるようにする。
   青紫の既定 visited 色は使わず、ネイビーを一段くすませた色にとどめる。 */
.post-card-title a:visited { color: #5b6b85; }
/* カード全面をクリック領域にする（スマホ・片手操作） */
.post-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.post-card:hover .post-card-title a { text-decoration: underline; }
.post-card-lead {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
}
.post-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
  margin-top: 4px;
}
/* メタ情報の区切り記号（一覧・記事ヘッダで共通） */
.meta-sep { color: var(--color-border); }
.post-card-meta strong {
  font-weight: 600;
  color: var(--color-text);
}

/* チップ（種別・カテゴリ） */
.chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.chip-cat {
  color: var(--color-accent-dark);
  background: var(--color-accent-soft);
}
.chip-type {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid #cdd8e8;
}

/* 重要度バッジ：高＝塗り／中＝枠線／低＝文字のみ。
   3段階を色数で表さず「面積と強さ」で表す（配色を増やさないための判断）。 */
.imp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.imp-high {
  color: #ffffff;
  background: var(--color-warning);
}
.imp-mid {
  color: var(--color-warning);
  background: var(--color-warning-soft);
  border: 1px solid #e8d3b3;
}
.imp-low {
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
}

/* ==========================================================================
   5. ページング・月別アーカイブ
   ========================================================================== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 40px 0 0;
  flex-wrap: wrap;
}
.pagination a,
.pagination span {
  min-width: 44px;              /* タップ目標 44px（片手・高齢者配慮） */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-bg);
}
.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination .is-current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  font-weight: 600;
}
.pagination .is-disabled { color: var(--color-text-muted); background: var(--color-bg-soft); }

.archive-block {
  margin: 48px 0 0;
  padding: 24px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.archive-block h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 12px;
}
.archive-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.archive-links a {
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 6px 12px;
  text-decoration: none;
}
.archive-links a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.archive-links a .count { color: var(--color-text-muted); font-size: 12px; margin-left: 4px; }

/* ==========================================================================
   6. 記事本文（既存 article-*.html と同一の型を共通化）
   ========================================================================== */
.article-wrap {
  max-width: var(--max-width-text);
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.article-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent-dark);
  background: var(--color-accent-soft);
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
  text-decoration: none;
}
.article-eyebrow:hover { background: #eedad0; color: var(--color-accent-dark); }
.article-h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.5;
  margin: 0 0 16px;
  text-wrap: pretty;
}
.article-meta {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 32px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.article-lead {
  font-size: 16px;
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
  border-left: 4px solid var(--color-accent);
  padding: 16px 20px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 40px;
  line-height: 1.9;
}
.article-wrap h2 {
  font-size: 21px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 48px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-accent);
  text-wrap: pretty;
}
.article-wrap h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 32px 0 12px;
  text-wrap: pretty;
}
.article-wrap p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text);
  margin: 0 0 16px;
}
.article-wrap ul,
.article-wrap ol {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text);
  margin: 0 0 16px;
  padding-left: 1.5em;
}
.article-wrap li { margin-bottom: 6px; }
.article-notice {
  font-size: 13px;
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 24px 0;
  line-height: 1.8;
}

/* 「現場への影響」ブロック（NEWS 詳細の核・要約と視覚的に段差をつける） */
.impact-block {
  margin: 32px 0;
  padding: 20px 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-primary);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.impact-block .impact-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 12px;
  letter-spacing: 0.04em;
}
.impact-block ul { margin: 0; padding-left: 1.4em; }
.impact-block li { font-size: 15px; line-height: 1.85; margin-bottom: 8px; }
.impact-block li:last-child { margin-bottom: 0; }

/* 要約ブロック（NEWS 冒頭） */
.summary-block {
  margin: 0 0 32px;
  padding: 20px 24px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.summary-block .summary-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}
.summary-block p { font-size: 15px; line-height: 1.9; margin: 0 0 8px; }
.summary-block p:last-child { margin-bottom: 0; }

/* FAQ 補強ボックス（既存 article-*.html と同一） */
.article-faq { margin: 40px 0; display: grid; gap: 14px; }
.article-faq-item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.article-faq-item .faq-q {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 6px;
}
.article-faq-item .faq-a {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.8;
}

/* ==========================================================================
   7. 出典カード（発行者・日付・公式URL）
      既存 .article-sources（箇条書き）を、NEWS 用に「1件＝1カード」に拡張。
      COLUMN では既存 .article-sources をそのまま使ってよい。
   ========================================================================== */
.article-sources {
  margin: 40px 0 0;
  padding: 24px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.article-sources h2 {
  font-size: 16px;
  border-bottom: none;
  margin: 0 0 4px;
  padding-bottom: 0;
}
.article-sources .sources-note {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 16px;
}
.article-sources ul { margin: 0; padding-left: 1.4em; }
.article-sources li { font-size: 13px; color: var(--color-text-muted); margin-bottom: 8px; }
.article-sources a { font-size: 13px; color: var(--color-primary); }

.source-card-list { display: grid; gap: 12px; }
.source-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.source-card .source-publisher {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.source-card .source-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  margin: 0 0 6px;
}
.source-card .source-title a { color: var(--color-primary); text-decoration: none; }
.source-card .source-title a:hover { text-decoration: underline; }
.source-card .source-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
  word-break: break-all;
}
.source-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.source-status.is-ok { color: var(--color-success); background: #e8f5ee; }
.source-status.is-ng { color: var(--color-danger); background: var(--color-danger-soft); }

/* ==========================================================================
   8. 記事内インライン登録CTA（.inline-cta）

   【2026-07-28 更新】旧「記事内インライン AI司書（未ログイン1問体験）」は
   見送り確定（仕様 content_engine_spec_v0.1.md §9-1／§10-c）。同じ位置には
   登録誘導のみを置く。関連クラス（.ai-ask* / .ai-answer*）は使用箇所が
   なくなったため削除した（worker が未採用機能を実装しないように、
   スタイルだけ残さない）。

   トーン設計：
   - 記事末尾の主CTA（.article-cta＝濃色グラデーション・中央寄せ・大）と
     同じ強さにしない。本文の読み進みを止めない「読み物の中の案内」として、
     本文中の他の淡色ブロック（.summary-block / .article-faq-item）と同じ面
     （bg-soft ＋ 1px border）に揃え、左端のアクセント線1本だけで区別する。
   - 装飾色はアクセント（アンバー）1色のみ。グラデーション・白抜き帯は使わない。
   - タイポ段差＝見出し 15px/700 → 本文 14px/muted → ボタン → 注記 12px。
   ========================================================================== */
.inline-cta {
  margin: 40px 0;
  padding: 20px 24px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
}
.inline-cta .inline-cta-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-primary);
  margin: 0 0 8px;
}
.inline-cta p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-muted);
  margin: 0 0 16px;
}
.inline-cta .inline-cta-note {
  font-size: 12px;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 12px 0 0;
}

/* ==========================================================================
   9. YouTube ファサード（クリックまで iframe を作らない）
   ========================================================================== */
.yt-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}
.yt-facade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yt-facade .yt-shade {
  position: absolute;
  inset: 0;
  background: rgba(20, 37, 74, .45);
}
.yt-facade .yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.yt-facade:hover .yt-play { background: #ffffff; }
.yt-facade .yt-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(20, 37, 74, 0) 0%, rgba(20, 37, 74, .85) 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  text-align: left;
}
.yt-block { margin: 32px 0; }
.yt-block .yt-note {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 8px 0 0;
  line-height: 1.7;
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.video-item .video-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.6;
  margin: 12px 0 4px;
  text-wrap: pretty;
}
.video-item .video-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
}

/* ==========================================================================
   10. 記事シェア（.share-row）／ フッターSNS（.footer-sns）

   【2026-07-28 ui-reviewer M-11 で条件を訂正】
   この2つは別物であり、出し分けの条件も別。旧版は両方を
   「自社SNSの設定がある製品でのみ出力」で束ねていたが、これは設計として誤り。

   ・.share-row（記事シェアボタン）＝ 読者が“読者自身のアカウント”で共有する導線。
     自社がXやnoteを開設しているかどうかと関係がない。よって **無条件で常に出す**。
     href は SSR で記事のURL・タイトルを埋める（後述のプレースホルダ参照）。

   ・.footer-sns（自社アカウントへのリンク）＝ 自社が運用しているアカウントだけ。
     productConfig.content.sns の各要素のうち **値が空でないものだけ <a> を出力**し、
     **全部空なら .footer-sns ごと出力しない**（display:none で隠さない＝空枠を作らない）。
     KAIGOLOG の現況（43_外部リソース・連携台帳の実測）＝ X:稼働／note:公開開始／
     Instagram:アカウント確保のみ・未投稿 → モックは **X と note の2つだけ**表示する。
     Instagram は運用が始まっていないので出さない（押しても何も無い導線を作らない）。
   ========================================================================== */
.share-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}
.share-row .share-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-right: 4px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;   /* 40px → 44px（ui-reviewer M-8） */
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  line-height: 1;
}
.share-btn:hover { border-color: var(--color-primary); background: var(--color-bg-soft); }
.share-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* 「URLをコピー」の結果表示（2026-07-28 ui-reviewer m-3）。
   押しても何も起きないと、コピーできたのか分からず何度も押される。
   ボタンのラベルは動かさず（押し間違いの原因になる）、隣に結果を出す。
   失敗時は「どうすればよいか」まで書く（CLAUDE.md §5 分かりやすい日本語）。 */
.share-msg {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--color-success);
}
.share-msg.is-error {
  color: var(--color-danger);
  font-weight: 500;
}

.footer-sns {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 0 0 20px;
  flex-wrap: wrap;
}
.footer-sns a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #ffffff;
  text-decoration: none;
  opacity: .9;
}
.footer-sns a:hover { opacity: 1; text-decoration: underline; }
.footer-sns svg { width: 14px; height: 14px; }

/* ==========================================================================
   11. 関連記事
   ========================================================================== */
.related-block { margin: 48px 0 0; }
.related-block h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
  margin: 0 0 16px;
}
.related-list { display: grid; gap: 8px; }
.related-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  text-decoration: none;
}
.related-item:hover { border-color: var(--color-primary); background: var(--color-bg-soft); }
.related-item .chip { margin-top: 2px; flex-shrink: 0; }
.related-item .related-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-primary);
  text-wrap: pretty;
}
.related-item .related-date {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ==========================================================================
   12. CTA（既存 article-*.html と同一）
   ========================================================================== */
.article-cta {
  margin: 48px 0 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #ffffff;
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
}
.article-cta h2 {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  border-bottom: none;
  margin: 0 0 12px;
  padding: 0;
  line-height: 1.6;
}
.article-cta p {
  color: rgba(255, 255, 255, .92);
  font-size: 15px;
  line-height: 1.85;
  margin: 0 0 20px;
}
.article-cta .cta-note {
  font-size: 12px;
  color: rgba(255, 255, 255, .70);
  margin: 16px 0 0;
  line-height: 1.75;
}
/* 副CTA（事業所プラン）：主CTA と同じ大きさにしない＝優先順位を視覚で示す */
.article-cta-sub {
  margin: 16px 0 0;
  font-size: 13px;
}
.article-cta-sub a { color: #ffffff; }

/* ==========================================================================
   13. お知らせ（NOTICE）
   ========================================================================== */
.notice-list {
  border-top: 1px solid var(--color-border);
}
.notice-row {
  display: grid;
  grid-template-columns: 110px 96px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 16px 8px;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
}
.notice-row:hover { background: var(--color-bg-soft); }
.notice-row .notice-date {
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.notice-row .notice-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-primary);
  text-wrap: pretty;
}
.kind {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  padding: 3px 0;
  width: 96px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.kind-normal { color: var(--color-text-muted); background: var(--color-bg-soft); border: 1px solid var(--color-border); }
.kind-maint { color: var(--color-warning); background: var(--color-warning-soft); border: 1px solid #e8d3b3; }
.kind-important { color: #ffffff; background: var(--color-danger); border: 1px solid var(--color-danger); }

/* 緊急告知バナー（メンテナンス等・詳細ページ最上部） */
.alert-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--color-danger);
  border-left: 4px solid var(--color-danger);
  background: var(--color-danger-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  margin: 0 0 32px;
}
/* 緊急度を色だけで示さない（2026-07-28 ui-reviewer m-10）。
   赤い面だけでは、色覚特性のある方・屋外の強い光の下・白黒印刷で
   「これは緊急の告知である」ことが伝わらないため、警告アイコンを併置する。 */
.alert-banner .alert-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-danger);
}
.alert-banner .alert-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-danger);
  margin: 0 0 4px;
}
.alert-banner p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
  margin: 0;
}

/* お知らせ本文は情報量が少ないので、記事より詰めた組みにする */
.notice-body h2 { font-size: 17px; margin: 32px 0 12px; }
.notice-detail-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 24px;
}
.notice-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 0 0 24px;
}
.notice-table th,
.notice-table td {
  border: 1px solid var(--color-border);
  padding: 10px 14px;
  text-align: left;
  line-height: 1.8;
}
.notice-table th {
  background: var(--color-bg-soft);
  font-weight: 600;
  color: var(--color-text-muted);
  width: 30%;
  white-space: nowrap;
}

/* ==========================================================================
   14. LP 新着セクション（3枠）
   ========================================================================== */
.lp-updates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lp-update-col {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 24px 16px;
  display: flex;
  flex-direction: column;
}
.lp-update-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.lp-update-head h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
  white-space: nowrap;
}
.lp-update-head a {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent-dark);
  text-decoration: none;
  white-space: nowrap;
}
.lp-update-head a:hover { text-decoration: underline; }
.lp-update-items { list-style: none; margin: 0; padding: 0; flex: 1; }
.lp-update-items li { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.lp-update-items li:last-child { border-bottom: none; }
.lp-update-items .u-date {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.lp-update-items a {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-primary);
  text-decoration: none;
  text-wrap: pretty;
}
.lp-update-items a:hover { text-decoration: underline; }
.lp-update-empty {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 12px 0;
  margin: 0;
}

/* ==========================================================================
   15. モバイル（≤640px）
   ========================================================================== */
@media (max-width: 640px) {
  .content-head { padding: 32px 16px 24px; }
  .content-head h1 { font-size: 22px; }
  .content-head .content-head-lead { font-size: 15px; }

  .article-wrap { padding: 32px 16px 56px; }
  .article-h1 { font-size: 22px; }
  .article-wrap h2 { font-size: 18px; margin: 40px 0 12px; }
  .article-wrap h3 { font-size: 16px; }
  .article-lead { font-size: 15px; padding: 14px 16px; }
  .article-cta { padding: 28px 20px; }
  .article-cta h2 { font-size: 18px; }

  .post-list { grid-template-columns: 1fr; }
  .post-card { padding: 16px 18px 14px; }
  .post-card-title { font-size: 16px; }

  .impact-block { padding: 16px 18px; }
  .summary-block { padding: 16px 18px; }

  /* 記事内インライン登録CTA：片手操作を想定し、ボタンは全幅で押しやすくする */
  .inline-cta { padding: 16px 18px; }
  .inline-cta .btn { display: block; width: 100%; text-align: center; }

  /* お知らせ一覧：3カラム → 日付＋種別を1行目、タイトルを2行目 */
  .notice-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "date kind"
      "title title";
    gap: 4px 12px;
    padding: 14px 4px;
  }
  .notice-row .notice-date { grid-area: date; }
  .notice-row .kind { grid-area: kind; width: auto; padding: 3px 10px; justify-self: start; }
  .notice-row .notice-title { grid-area: title; }

  .lp-updates { grid-template-columns: 1fr; gap: 16px; }
  .video-grid { grid-template-columns: 1fr; }
  .share-row .share-btn { flex: 1 1 auto; justify-content: center; }
}

@media (min-width: 641px) and (max-width: 900px) {
  .lp-updates { grid-template-columns: 1fr; }
}

/* ==========================================================================
   16. 記事内FAQブロック（仕様 v0.2 §5-4「選ぶ系FAQ 3件」）
       2026-07-28 designer / N-1

   【新デザインを起こしていない根拠】
   本番稼働中の公開Q&Aページ `frontend/faq.html`（未ログイン・登録不要）で
   使われている以下のクラスを、同名・同値のまま持ち込んでいる：
     .faq-free-badge（無料・登録不要バッジ）／.citation-card ／.citation-title
     ／.citation-link ／.sources-head
   faq.html は変数名が `--primary` 系（インライン定義）、こちらは公開面共通の
   `--color-*` 系のため、変数名だけ読み替えて値は同じものを使っている。
   （2つの変数体系を混ぜない＝mockup_content_index.html「共通スタイル」節）

   【段差の設計】
     見出し(h2 21px/700・既存 .article-wrap h2 をそのまま使用)
       → 質問 15px/600 primary
       → 回答本文 14px/1.85 text
       → 出典カード 13px
       → 注記 12px muted
   アクセント（アンバー）は「Qバッジ」と「開いているカードの枠」だけに使う。
   回答側の「A」はネイビー（02_共通ブランド方針 §D の Q/A バッジ規約）。

   【空枠を作らない】
   公開FAQが3件未満／取得失敗のときは <section class="faq-block"> ごと
   出力しない（display:none で隠すのではなく、SSR時に要素を作らない）。
   .faq-block に固有の上マージンしか持たせていないのはこのため＝
   ブロックが無いときに前後の余白が二重に残らない。
   ========================================================================== */
.faq-block { margin: 48px 0 0; }
.faq-block-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
.faq-block-head h2 {
  margin: 0;
  padding: 0;
  border-bottom: none;
  font-size: 21px;
}
/* faq.html と同一（無料・登録不要であることを最初に示す） */
.faq-free-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ecfdf5;
  color: var(--color-success);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.faq-block-lead {
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-muted);
  margin: 0 0 16px;
}

.faq-acc { display: grid; gap: 12px; }
.faq-acc-item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-acc-item.is-open { border-color: var(--color-accent); }

/* 質問行＝タップ目標。片手・屋外操作を想定して行全体をボタンにする（min 56px） */
.faq-q-btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--color-primary);
  text-align: left;
  cursor: pointer;
  letter-spacing: 0.04em;
  /* 開いたカードを画面内へ寄せる際、固定ヘッダーの下に潜らせない
     （2026-07-28 ui-reviewer M-10。JS 側の scrollIntoView と対で効く） */
  scroll-margin-top: 72px;
}
.faq-q-btn:hover { background: var(--color-bg-soft); }
/* Q/A バッジ＝02_共通ブランド方針 §D（アイコン・Q/A は見出しの「左横」・積み上げない） */
.faq-qa-badge {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  color: #ffffff;
}
.faq-qa-badge.is-q { background: var(--color-accent); }
.faq-qa-badge.is-a { background: var(--color-primary); }
.faq-q-text { flex: 1; min-width: 0; text-wrap: pretty; }
.faq-q-mark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: var(--color-text-muted);
  transition: transform .15s;
}
.faq-acc-item.is-open .faq-q-mark { transform: rotate(180deg); }

.faq-panel {
  display: none;
  padding: 16px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-soft);
}
.faq-acc-item.is-open .faq-panel { display: block; }

/* --------------------------------------------------------------------------
   読み込み中（状態0）／2026-07-28 ui-reviewer C-2
   回答はタップ後に POST /api/v2/pubref/faq/answer で取りに行くため、
   タップからパネルが埋まるまでに必ず「間」がある。ここが無表示だと、
   電波の悪い場所（屋外・施設内）で「押せていない」と受け取られ、
   二度タップ → faqLimiter（レート制限）に当たって開けなくなる。
   よって次の2つを必ず出す：
     ① パネルは即座に開き、「回答を読み込んでいます…」＋骨組みを見せる
     ② 通信中はその質問行を押せなくする（aria-busy="true" ＋ pointer-events:none）
        …押せないことを、色を落とすだけでなく、右端の回転インジケータで示す。
   他のカードは押せるままにする（1件の通信で全体を止めない）。
   -------------------------------------------------------------------------- */
.faq-loading { display: none; }
.faq-acc-item.is-loading .faq-loading { display: block; }
.faq-acc-item.is-loading .faq-a-row { display: none; }

.faq-loading-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.8;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}
/* スケルトン＝回答が入る場所と量をあらかじめ見せる（画面が跳ねない） */
.faq-skeleton { display: grid; gap: 8px; }
.faq-skeleton span {
  display: block;
  height: 12px;
  border-radius: 3px;
  background: #e7eaef;
}
.faq-skeleton span:nth-child(2) { width: 92%; }
.faq-skeleton span:nth-child(3) { width: 64%; }

/* 通信中の質問行：再タップを受け付けない（二度タップ→レート制限の防止） */
.faq-q-btn[aria-busy="true"] {
  pointer-events: none;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
}
.faq-q-btn[aria-busy="true"] .faq-q-mark { display: none; }
.faq-q-btn[aria-busy="true"]::after {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  border: 2px solid #dfe3ea;
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: faq-spin .8s linear infinite;
}
@keyframes faq-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .faq-q-btn[aria-busy="true"]::after { animation: none; }
}
.faq-a-row { display: flex; align-items: flex-start; gap: 12px; }
.faq-a-body { flex: 1; min-width: 0; }
.faq-a-body p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text);
  margin: 0 0 12px;
}
.faq-a-body p:last-child { margin-bottom: 0; }
.faq-a-body strong { font-weight: 700; color: var(--color-primary); }

/* 出典（faq.html の .citation-card / .citation-title / .citation-link と同値） */
.faq-a-body .sources-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 16px 0 4px;
}
.citation-card {
  background: var(--color-primary-soft);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 14px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.8;
}
.citation-title { font-weight: 700; color: var(--color-primary); margin: 0 0 4px; }
/* FAQブロックで最も重要なリンク（一次資料へ出る導線）。
   旧 実高 約18px ＝ 指では踏めない大きさだったため 44px を確保する
   （2026-07-28 ui-reviewer M-8）。 */
.citation-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent-dark);
  text-decoration: none;
  margin-top: 4px;
  word-break: break-word;
}
.citation-link:hover { text-decoration: underline; }

/* 1枚だけ落ちたときの表示（他のカードは動き続ける＝CLAUDE.md §5 分かりやすい日本語） */
.faq-panel-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-warning);
  margin: 0;
}
.faq-panel-msg svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; }
.faq-panel-msg .faq-msg-sub {
  display: block;
  color: var(--color-text-muted);
  font-size: 12px;
  margin-top: 2px;
}

/* 回答を1つでも開いたら出る CTA（§5-4「展開後の直下にCTA1つのみ」）。
   .inline-cta の面をそのまま使い、新しいCTAデザインを作らない。 */
.faq-block-cta { display: none; margin: 16px 0 0; }
.faq-block-cta.is-shown { display: block; }

/* ==========================================================================
   17. AI生成であることの表示（仕様 v0.2 §9-5）
       「AIが自動生成しました」とだけ書かない＝工程と責任主体を書く枠。
       免責（.article-disclaimer / .article-notice）とは別枠にし、
       主張の強さは免責より弱くする（本文の邪魔をしない灰色の小さな面）。
   ========================================================================== */
.ai-note {
  margin: 24px 0 0;
  padding: 16px 20px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.ai-note .ai-note-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin: 0 0 8px;
}
.ai-note p {
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-text-muted);
  margin: 0 0 8px;
}
.ai-note p:last-child { margin-bottom: 0; }
.ai-note strong { font-weight: 700; color: var(--color-text); }
.ai-note a { color: var(--color-primary); }

/* ==========================================================================
   18. 文書系ページ（編集方針 /editorial-policy ＝ P-9 ほか）
       既存の利用規約・プライバシー（ShienLog `frontend/mockups/terms.html` 等
       ファミリー共通の法務文書レイアウト）の型を踏襲する：
         ・本文幅は記事と同じ 780px
         ・h2 は「左に4pxのアクセント線」（記事の h2＝下線 とは別の型にして、
           読み物ではなく文書であることを見た目で区別する）
         ・条番号や更新日を上部にまとめる
   ========================================================================== */
.doc-wrap {
  max-width: var(--max-width-text);
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.doc-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.5;
  margin: 0 0 8px;
  text-wrap: pretty;
}
.doc-meta {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 24px;
}
.doc-lead {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
  border-left: 4px solid var(--color-accent);
  padding: 16px 20px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 32px;
}
.doc-toc {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 24px;
  margin: 0 0 40px;
}
.doc-toc h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin: 0 0 8px;
}
.doc-toc ol { margin: 0; padding-left: 1.4em; }
.doc-toc li { font-size: 14px; line-height: 1.9; }
/* 目次リンクは 44px を確保する（ui-reviewer M-8）。
   旧 実高 約27px で、6項目が密に並ぶため隣を踏みやすかった。 */
.doc-toc li a {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.doc-toc a { color: var(--color-primary); }

.doc-body h2 {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-primary);
  border-left: 4px solid var(--color-accent);
  padding: 0 0 0 12px;
  margin: 40px 0 12px;
  text-wrap: pretty;
}
.doc-body h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 24px 0 8px;
  text-wrap: pretty;
}
.doc-body p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text);
  margin: 0 0 16px;
}
.doc-body ul,
.doc-body ol {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text);
  margin: 0 0 16px;
  padding-left: 1.5em;
}
.doc-body li { margin-bottom: 8px; }
.doc-callout {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 0 0 16px;
}
.doc-callout p { margin: 0 0 8px; font-size: 14px; }
.doc-callout p:last-child { margin: 0; }
.doc-callout .doc-callout-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin: 0 0 4px;
}
.doc-contact {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary);
  word-break: break-all;
}
.doc-foot-nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   19. モバイル（≤640px）＝ 16〜18 の追補
   ========================================================================== */
@media (max-width: 640px) {
  .faq-block { margin-top: 40px; }
  .faq-block-head h2 { font-size: 18px; }
  .faq-q-btn { font-size: 14.5px; padding: 14px 12px; gap: 8px; }
  /* 2段nav（§21→style.css）を使うページは、スマホではヘッダーを
     非sticky にした（2026-07-29 オーナー確定）。M-10 で開いた質問行を
     上へ寄せても、ヘッダーは既に画面外へ流れていて覆いかぶさらないため、
     174px ぶんの逃げ（旧値 184px）はもう要らない。
     質問行が画面の上端に貼り付いて見えないよう、余白だけ残す。 */
  body:has(.site-nav.is-two-row) .faq-q-btn { scroll-margin-top: 16px; }
  .faq-panel { padding: 14px 12px; }
  .faq-a-row { gap: 8px; }
  .faq-block-cta .btn { display: block; width: 100%; text-align: center; }

  .doc-wrap { padding: 32px 16px 56px; }
  .doc-title { font-size: 22px; }
  .doc-body h2 { font-size: 17px; margin: 32px 0 12px; }
  .doc-body h3 { font-size: 15px; }
  .doc-toc { padding: 14px 18px; }
  .doc-foot-nav { gap: 12px; }
}

/* ==========================================================================
   20. 見出しアンカーの逃げ（2026-07-28 ui-reviewer M-7）

   .site-header は position:sticky（style.css）で常に画面上部に居座る。
   目次（.doc-toc）や #updates への遷移で、飛び先の見出しがそのヘッダーの
   下に隠れ、「押したのに何も起きていない／別の項目に飛んだ」と読める状態だった。
   飛び先ごとに JS で補正するのではなく、飛び先側に scroll-margin-top を持たせて
   構造的に解決する（アンカーが増えても対応が漏れない）。
   値＝ヘッダー実高（PC 約72px・SP 約60px）＋ 余白12px。

   ※例外（2026-07-29）：スマホ（≤640px）の2段navページだけはヘッダーを
     非sticky にしたため、覆いかぶさりが起きない＝逃げは余白ぶんだけでよい。
     下のメディアクエリ内で 16px に落としている。
   ========================================================================== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.doc-body h2,
.doc-body h3,
.article-wrap h2,
.article-wrap h3,
#updates {
  scroll-margin-top: 84px;
}
/* スマホはヘッダーが低い（padding 12px）ぶん、逃げも小さくする＝
   飛び先の見出しが画面の真ん中まで落ちてこないようにする */
@media (max-width: 640px) {
  .doc-body h2,
  .doc-body h3,
  .article-wrap h2,
  .article-wrap h3,
  #updates {
    scroll-margin-top: 72px;
  }
  /* 2段nav（style.css）を使うページは、スマホではヘッダーを非sticky にした
     （2026-07-29 オーナー確定）。ヘッダーはスクロールで画面外へ流れるので
     飛び先に覆いかぶさらない＝ヘッダー実高ぶんの逃げ（旧値 184px）は不要。
     見出しが画面の上端に貼り付いて見えないよう、余白だけ 16px 残す。

     ★ここは :has() のまま残す（2026-07-29 ui-reviewer N-1 判定）。
       2段組みレイアウト本体は :has() 依存をやめ、HTML側の .is-two-row-host で
       制御するよう変更した（style.css「2段組みモバイルnav」節）が、この
       scroll-margin-top は条件が外れても上の 72px にフォールバックするだけ
       ＝飛び先が 56px ぶん余分に下がるが、崩れも横スクロールも起きない。
       レイアウトを壊さない条件分岐なので明示クラス化はしない。 */
  body:has(.site-nav.is-two-row) .doc-body h2,
  body:has(.site-nav.is-two-row) .doc-body h3,
  body:has(.site-nav.is-two-row) .article-wrap h2,
  body:has(.site-nav.is-two-row) .article-wrap h3,
  body:has(.site-nav.is-two-row) #updates {
    scroll-margin-top: 16px;
  }
}

/* ==========================================================================
   21. モバイルnav：2段組み（2026-07-28 ui-reviewer M-9・オーナー確定案）
       → 定義は assets/style.css へ移動しました（2026-07-29 designer）

   【移動した理由】
   LP（index.html）も2段navを使うことがオーナー判断で確定したが、
   index.html は content.css を読み込まない（style.css だけ）。
   ヘッダーは全ページ共通のコンポーネントなので、同じ見た目の定義を
   2ファイルに分けず style.css に一本化した。
   実装（.site-nav.is-two-row / .nav-row / 幅崩壊の是正）は
   assets/style.css の「2段組みモバイルnav」節を参照。

   【HTML側で必要な指定（2026-07-29 ui-reviewer N-1）】
   2段navを使うページは、nav に .is-two-row を付けるだけでは足りない。
   ヘッダーの折り返しと非sticky化は :has() をやめて明示クラスに変えたため、
     <header class="site-header is-two-row-host">
       <div class="site-header-inner is-two-row-host">
   の2か所にも .is-two-row-host を付ける（付け忘れると、リンク行が
   flex:1 0 100% のまま折り返せずページ幅が膨張して横スクロールが出る）。

   【申し送りの訂正（2026-07-29 ui-reviewer G）】
   旧版のこの節には「is-two-row を付けないページは従来どおり1段のまま＝
   このスタイルシートは既存ページの見た目を変えない」と書いていたが、
   これは正しくなかった。M-8（タップ目標44px）の
     .site-nav a { min-height: 44px; ... }
   は .is-two-row に限定しておらず、**1段navのページを含む全ページ**に効く
   （ヘッダー実高が 約36px → 約44px に上がる）。
   正しくは次のとおり：
     ・タップ目標44pxの拡大 …… 全ページに適用される（opt-inではない）
     ・2段組みナビ（is-two-row）…… そのクラスを付けたページだけのopt-in
   ========================================================================== */