/* ============================================
   1. Foundation  - リセット、変数、ベース
   2. Layout      - l- : header, footer, container
   3. Component   - c- : card, button, modal, breadcrumb 等
   4. Project     - p- : ページ固有ブロック
   5. Utility     - u- : 補助クラス
   6. Print       - @media print
   ============================================ */

/* ============================================
   1. Foundation
   ============================================ */

/* ---- 1-0. @font-face（Noto Sans JP / Noto Serif JP、自己ホスト） ----
   CDNからの読み込みは禁止のため、サブセット化したwoff2をassets/fonts/に同梱し自己ホストする。
   ライセンスはSIL Open Font License 1.1（再配布可）。OFL.txtを同梱すること。
   読み込めない環境ではフォールバックの書体で表示される */

@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/noto-sans-jp-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/noto-sans-jp-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif JP";
  src: url("../fonts/noto-serif-jp-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- 1-1. リセット ---- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* ルートのフォントサイズはブラウザ既定（通常16px）に委ねる。
     remで指定した文字がユーザーの文字サイズ設定に追従できるよう、pxで固定しない */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* スクロールバー領域を常に確保する。モーダル表示中にスクロールをロック（overflow:hidden）しても
     スクロールバーが消えず、中央配置のモーダルや本文が左右にずれない */
  scrollbar-gutter: stable;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

/* 見出し要素の既定サイズ・太さをリセットし、コンポーネント側の指定に委ねる。
   font-size は inherit ではなく 1em で書く（値としては同じ＝親のサイズを継承する）。
   inherit は相対単位と判定されず、miChecker で 1.4.4 の指摘対象になるため */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1em;
  font-weight: inherit;
}

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

/* 画像の保存操作を抑止する。JS側（common.js）の右クリック・ドラッグ抑止と対になる指定。
   -webkit-touch-callout はスマートフォンでの長押し保存メニュー、
   -webkit-user-drag はドラッグしてデスクトップへ落とす操作を抑止する。
   いずれもベンダー拡張のため対応しないブラウザもあり、URL直打ち等では取得できる。
   完全な保護ではなく、あくまで簡易的な抑止である */
img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

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

button {
  background: none;
  border: none;
  cursor: pointer;
}

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

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ---- 1-2. カスタムプロパティ ---- */

:root {
  /* -- 色：マルーン系（プライマリ） -- */
  --color-primary: #5b0b0c; /* ヘッダー背景／ボタン(メイン)通常・アクティブ背景／カード見出し文字色／カード枠線・下線 全般 */
  --color-primary-hover: #9a1617; /* ボタン／ナビ／カード共通のホバー背景色 */

  /* -- 色：フォーカス --
     コンポーネントごとの定義（黄枠のみ／黄背景＋えんじ色枠／
     TOPカードのみ二重リング）に従う */
  --color-focus: #ffd735; /* 黄色。単体の枠、または黄背景＋えんじ色枠の背景に使用 */
  --color-focus-outline: #5b0b0c; /* えんじ色。黄背景＋えんじ色枠の枠、およびTOPカードの外側リングに使用 */

  /* -- 色：見出しバー・装飾 -- */
  --color-heading-bar-bg: #50341c; /* rule-of-lawページ「見出し大」バー背景（パネル展示／デジタルアーカイブ） */
  --color-gold-border: #9e7a3a; /* 巨人･法曹･施策カード内側ボックスの縁取り */

  /* -- 色：背景・ニュートラル -- */
  --color-bg-page: #fef9ef; /* ページ全体の背景色 */
  --color-bg-card: #ffffff;
  --color-bg-card-hover: #f6f6f6; /* TOPカードのホバー背景 */
  --color-border-card: rgba(163, 163, 163, 0.8); /* TOPカード通常時のボーダー */
  --color-nav-divider: #ffffff; /* ヘッダーナビ項目間の区切り線 */
  --color-modal-close-bg: #000000; /* デジタルアーカイブ拡大モーダルの閉じるボタン背景 */
  --color-modal-close-bg-hover: #333333; /* 同ホバー時 */
  /* 画像・PDFサムネイルのプレースホルダー色（#c4c4c4、#d9d9d9等）は変数化せず、
     Component層で直値記述する */

  /* -- 色：テキスト -- */
  --color-text-base: #333333;
  --color-text-white: #ffffff;

  /* -- 色：ヒーロー画像オーバーレイ（黒。下ほど濃いグラデーション） -- */
  --color-overlay-start: rgba(0, 0, 0, 0.2);
  --color-overlay-end: rgba(0, 0, 0, 0.8);

  /* -- シャドウ -- */
  --shadow-card: 0 2px 5px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 2px 5px rgba(0, 0, 0, 0.4);
  --shadow-button-hover: 0 4px 2px rgba(0, 0, 0, 0.25);
  --shadow-nav-sp-link: 0 2px 10px rgba(0, 0, 0, 0.25); /* SPメニュー内リンクの通常時シャドウ */

  /* -- 角丸 -- */
  --radius-button: 6px;
  --radius-card: 10px;
  --radius-heading-bar: 6px;

  /* -- フォントファミリー（Noto Sans JP / Noto Serif JP を同梱・自己ホスト） --
     外部（CDN）からの読み込みは禁止のため、サブセット化したwoff2をassets/fonts/に同梱し、
     上部の@font-faceで自己ホストする。フォールバックにはBIZ UD書体・システムフォントを残し、
     読み込み失敗時でも表示が崩れないようにしている */
  /* 見出し：Noto Serif JP（同梱） */
  --font-serif: "Noto Serif JP", "BIZ UDPMincho", "Hiragino Mincho ProN",
    "Hiragino Mincho Pro", "Yu Mincho", YuMincho, serif;

  /* 本文：Noto Sans JP（同梱） */
  --font-sans: "Noto Sans JP", "BIZ UDPGothic", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic, Meiryo, sans-serif;

  /* 欧文（フッター等）：コピーライト等の欧文も同梱Noto Sans JPで統一し、閲覧環境（OS）に
     よる見た目の差をなくす。同梱woff2は基本ラテンを完全に含むため欧文も表示可能。
     読み込み失敗時の保険としてシステムフォントを残す */
  --font-latin: "Noto Sans JP", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* -- フォントサイズ -- */
  --fs-h1: 2.5rem; /* 各ページ ヒーロー内タイトル */
  --fs-h2: 1.625rem; /* rule-of-law.html「見出し大」 */
  --fs-h3-card: 1.5rem; /* TOPカード見出し */
  --fs-h3-panel: 1.3125rem; /* rule-of-law.html「見出し中」 */
  --fs-h4-card: 1.3125rem; /* 巨人･法曹･施策カード見出し */
  --fs-body: 1.125rem; /* 本文標準 */
  --fs-button: 1rem; /* ボタン・ヘッダーナビ文字 */
  --fs-small: 0.875rem; /* パンくず */

  /* -- 行間 -- */
  --lh-heading: 1.5;
  --lh-body: 2;
  --lh-button: 1.75;

  /* -- 字間 -- */
  --tracking-sm: 0.42px; /* パンくず */
  --tracking-base: 0.48px; /* ボタン・ヘッダーナビ */
  --tracking-md: 0.54px; /* カード見出し・本文 */
  --tracking-lg: 0.72px; /* TOPカード見出し */
  --tracking-xl: 1.05px; /* rule-of-law.html「見出し中」 */
  --tracking-2xl: 1.3px; /* rule-of-law.html「見出し大」 */
  --tracking-display: 2px; /* H1 */
  --tracking-footer: 0.8px; /* フッターコピーライト */

  /* -- レイアウト寸法 -- */
  --header-height: 60px;
  /* 本文コンテンツ幅（PC）。
     この値は「余白を除いた中身の幅」。左右にpaddingを持つコンテナでは
     max-width: calc(var(--content-width) + 40px) として指定する（padding 20px×2 を加算） */
  --content-width: 960px;

  /* -- ブレークポイント（CSS変数はメディアクエリ条件に使用できないため値のみ記載） --
     tablet: 768px / pc: 1024px */
}

/* ---- 1-3. ベース ---- */

body {
  /* サイトの最小レイアウト幅。これより狭い画面ではレイアウトを組み替えず、
     375px幅のまま全体を縮小して表示する（縮小の制御は common.js のviewport切り替え）。
     JS無効時はここが効いてレイアウトは崩れず、横スクロールで閲覧できる状態を保つ */
  min-width: 375px;
  font-family: var(--font-sans);
  /* BIZ UDPGothicはRegular(400)で十分な太さがあるため、font-weightは指定しない */
  font-weight: 400;
  background-color: var(--color-bg-page);
  /* 全ページ共通の背景テクスチャ（和紙調）。CSSのopacityは要素全体（内包するテキスト等）にも
     影響してしまうため、あらかじめ画像側で#fef9efに30%合成した1枚のJPEGを用意し、
     通常のbackground-imageとして適用している */
  background-image: url("../images/common/bg-texture.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

/* ルビ（ふりがな）共通：親文字との間隔をわずかに空ける。
   量はルビのフォントサイズに比例（em）させ、サイズの異なる全ルビ
   （一覧カードの氏名・ヒーローサブタイトル・TOPカード・本文中）で
   見た目の比率が揃うようにする */
rt {
  transform: translateY(-0.15em);
}

/* BIZ UDPMinchoはRegular(400)とBold(700)の2ウェイトのみで、
   中間のfont-weight:600に対応する書体データを持たない（600指定時はブラウザが
   最も近い上位ウェイトへ自動フォールバックし実質Bold相当になるため、
   曖昧さを避けて明示的に700を指定する）。他コンポーネントの見出し系（c-card__title-text等）も700で統一している */
.l-heading,
h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 700;
}

/* ============================================
   2. Layout
   ============================================ */

/* ---- 2-1. l-skip-link（本文へスキップ） ----
   通常は画面外に隠し、フォーカス時のみ表示する一般的な実装パターンを採用する */

.l-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 200;
  padding: 8px 16px;
  background: var(--color-bg-card);
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
}

.l-skip-link:focus {
  top: 0;
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ---- 2-2. l-container（本文幅コンテナ） ---- */

.l-container {
  width: 100%;
  /* 左右padding 20px を加算した値を上限にすることで、中身の幅が960pxになる */
  max-width: calc(var(--content-width) + 40px);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ---- 2-3. l-header（上部リンクバー／追従ヘッダー） ---- */

.l-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: var(--color-primary);
  /* backdrop-filter（すりガラス効果）は意図的に使用しない。
     背景が不透明なえんじ色のため視覚効果が一切ない一方、backdrop-filterは
     position:fixed の子孫に対する「包含ブロック」を生成してしまう。
     そうなると、子要素であるSPメニューのドロワー（画面右外に退避している）が
     ビューポートではなくヘッダー基準の配置となってページの横幅を押し広げ、
     拡大モーダルの中央寄せ（margin:auto）の基準がずれて、モーダルが画面外へはみ出す */
}

.l-header__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* SP：ハンバーガーボタンを右寄せ */
  height: var(--header-height);
  padding: 10px;
}

/* SP用ハンバーガーボタン */
.l-header__menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 50px;
  height: 50px;
  border: 1px solid var(--color-text-white);
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-text-white);
}

@media (hover: hover) {
  .l-header__menu-btn:hover {
    cursor: pointer;
  }
}

/* 他コンポーネントの主流パターン（黄枠1色）に合わせる */
.l-header__menu-btn:focus,
.l-header__menu-btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.l-header__menu-btn:focus:not(:focus-visible) {
  outline: none;
}

/* アクティブ：全コンポーネント共通ルール（要素1px下）に揃える */
.l-header__menu-btn:active {
  transform: translateY(1px);
}

.l-header__menu-btn-line {
  display: block;
  width: 30px;
  height: 2px;
  background: var(--color-text-white);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* メニューを開いている間は×（CLOSE）にする。
   3本線のうち中央を消し、上下をそれぞれ中央へ寄せて交差させる。
   線は2px・間隔7pxで並ぶため、中央までの移動量は 2+7=9px。角度は -40度／41度。
   ラベルの MENU / CLOSE の切り替えは common.js が textContent で行う */
.l-header__menu-btn[aria-expanded="true"] .l-header__menu-btn-line:nth-of-type(1) {
  transform: translateY(9px) rotate(-40deg);
}

.l-header__menu-btn[aria-expanded="true"] .l-header__menu-btn-line:nth-of-type(2) {
  opacity: 0;
}

.l-header__menu-btn[aria-expanded="true"] .l-header__menu-btn-line:nth-of-type(3) {
  transform: translateY(-9px) rotate(41deg);
}

@media (prefers-reduced-motion: reduce) {
  .l-header__menu-btn-line {
    transition: none;
  }
}

.l-header__menu-btn-label {
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: 0.625rem;
  line-height: 1;
  color: var(--color-text-white);
}

/* グローバルナビゲーション（c-nav）を内包する領域。
   PC/SPで同一の<nav><ul class="c-nav">…</ul></nav>を共有し、
   ここではレイアウト（配置・余白・背景）のみを担当する */
.l-header__nav {
  width: 100%;
  padding: 60px 20px;
  /* 背景色#fef9efの上に和紙テクスチャを不透明度30%。
     body背景と同一の合成済み画像をそのまま使う */
  background-color: var(--color-bg-page);
  background-image: url("../images/common/bg-texture.jpg");
  background-size: cover;
  background-position: center;
}

/* ---- 2-4. ブレークポイントによる出し分け ----
   SPファースト：初期状態はSP版（ハンバーガー＋常時展開ナビ）を表示し、
   1024px以上でPC版グローバルナビ（ヘッダー内centered）に切り替える。
   c-nav / c-nav__link 自体の見た目の出し分けは Component 側（3-3）で行う */

/* JS有効時のみ、ナビを画面右端から出入りするドロワーにする。
   JS無効時はこの指定が当たらず、通常フロー内で常時展開された状態のまま（要件どおり）。
   幅340px。狭い端末では画面幅に収める。
   display:none ではなく visibility:hidden を使うのは、transformのアニメーションを
   効かせつつ、閉じている間はフォーカス・読み上げの対象から外すため */
.js-enabled .l-header__nav {
  position: fixed;
  top: var(--header-height);
  right: 0;
  z-index: 90; /* l-header（100）より下、本文より上 */
  width: min(340px, 100%);
  height: calc(100vh - var(--header-height));
  overflow-y: auto;
  overscroll-behavior: contain; /* ドロワー内のスクロールが背面に伝播しないようにする */
  transform: translateX(100%);
  visibility: hidden;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

/* アドレスバーの伸縮を考慮した動的ビューポート単位。非対応環境では上の100vhが有効 */
@supports (height: 100dvh) {
  .js-enabled .l-header__nav {
    height: calc(100dvh - var(--header-height));
  }
}

.js-enabled .l-header__nav.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s ease, visibility 0s;
}

/* 動きを減らす設定の環境ではスライドさせない */
@media (prefers-reduced-motion: reduce) {
  .js-enabled .l-header__nav {
    transition: visibility 0s linear 0s;
  }

  .js-enabled .l-header__nav.is-open {
    transition: none;
  }
}

@media (min-width: 1024px) {
  .l-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--header-height);
  }

  .l-header__bar {
    display: none;
  }

  .l-header__nav,
  .js-enabled .l-header__nav,
  .js-enabled .l-header__nav.is-open {
    display: block; /* PC版では常時表示。!important は使わずセレクタの詳細度で上書きする */
    width: auto;
    max-width: var(--content-width);
    padding: 0;
    background: transparent; /* ショートハンドのためSP用のテクスチャ画像もここで解除される */
    /* SP用ドロワーの指定をすべて打ち消す。
       これがないとPC幅でもfixed・画面外・visibility:hiddenのままになり、ナビが消える */
    position: static;
    top: auto;
    right: auto;
    height: auto;
    overflow: visible;
    transform: none;
    visibility: visible;
    box-shadow: none;
    transition: none;
  }
}

/* ---- 2-5. アンカーリンク先の見出しが追従ヘッダーに被らないための調整 ---- */

[id] {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

/* ---- 2-6. l-footer ---- */

.l-footer {
  padding: 49px 0 48px;
}

/* 罫線はl-footer（全幅）ではなく内側のl-container（コンテンツ幅960px）に付与し、
   罫線の幅をコンテンツ幅に揃える。
   padding-topは罫線とコピーライトの間の余白（48px）。全17ページ共通のフッター仕様 */
/* 罫線は border ではなく疑似要素で引く。
   border-top は padding を含むボーダーボックスの端に引かれるため、
   PCでは1000px・SPでは画面全幅になってしまい、コンテンツ幅と揃わない。
   疑似要素はパディングボックスの内側に入るため、幅が自動的にコンテンツ幅になる。
   margin-bottom は罫線とコピーライトの間の余白（48px） */
.l-footer .l-container::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 48px;
  background: rgba(51, 51, 51, 0.8);
}

.l-footer__copyright {
  text-align: center;
  color: var(--color-text-base);
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: 0.65rem; /* 10.4px */
  letter-spacing: var(--tracking-footer);
}

/* PCでは16px。変化幅が4pxと小さく見出し系でもないため、
   clampではなくブレークポイントでの切り替えとする */
@media (min-width: 1024px) {
  .l-footer__copyright {
    font-size: var(--fs-button);
  }
}

/* ---- 2-7. l-hero（各ページ共通のヒーローセクション） ----
   背景写真＋グラデーション＋見出し（＋任意でサブタイトル） */

.l-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 150px;
  padding: 20px;
  overflow: hidden;
  background-color: #6b6b6b; /* 画像読み込み前・失敗時のフォールバック背景色 */
  background-size: cover;
  background-position: center;
  /* ▼差し替え：ヒーロー背景 */
  background-image: url("../images/common/hero.jpg");
  /* ▲差し替えここまで */
}

.l-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--color-overlay-start), var(--color-overlay-end));
  pointer-events: none;
}

.l-hero__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-width);
}

.l-hero__title {
  color: var(--color-text-white);
  font-family: var(--font-serif);
  font-weight: 700;
  /* 22px。PCでの値は下のメディアクエリで指定する。
     vw を含む clamp は使わない：ページズーム時に vw 項が縮み、
     テキストが200%まで拡大されず JIS 1.4.4 を満たせないため */
  font-size: 1.375rem;
  letter-spacing: 1.2px;
  line-height: var(--lh-heading);
  text-align: center;
}

.l-hero__subtitle {
  margin-top: 5px; /* 見出しとの間隔 */
  color: var(--color-text-white);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1rem; /* 16px */
  letter-spacing: 0.8px;
  line-height: var(--lh-heading);
}

/* 「未来へつなぐ『法の支配』」のみで使用するルビ（「幸福」の読み「しあわせ」） */
.l-hero__subtitle ruby {
  ruby-position: over;
}

.l-hero__subtitle rt {
  font-size: 0.625rem;
  letter-spacing: 0.5px;
  color: var(--color-text-white);
}

@media (min-width: 1024px) {
  .l-hero {
    height: 230px;
    padding: 50px 20px 0;
    align-items: flex-start;
  }

  .l-hero__title {
    font-size: var(--fs-h1); /* 40px */
    letter-spacing: var(--tracking-display);
  }

  .l-hero__subtitle {
    margin-top: 20px;
    font-size: var(--fs-h3-card); /* 24px。TOPカード見出しと同一サイズのため既存トークンを再利用 */
    letter-spacing: 1.2px; /* 既存トークンと一致しないため直値 */
  }

  .l-hero__subtitle rt {
    font-size: 0.75rem;
    letter-spacing: 0.6px;
  }
}

/* ---- 2-7-1. l-hero--top（TOPページ専用モディファイア） ----
   他ページのl-heroとは高さ・文字サイズ・左右中央寄せか左寄せかが異なるため、
   共通部分（背景・グラデーション等）はl-heroを継承しつつモディファイアで上書きする */

.l-hero--top {
  min-height: 540px;
  /* SPはロゴ＋キャッチコピーを縦積みでKV下部に配置する
     （PCのレイアウト（ロゴ左上・タイトル左下）は下のメディアクエリで復元する） */
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 20px 20px 60px; /* 下60px：SPのKV下余白 */
  /* SPは背景画像を下端基準で表示する（上側をトリミング）。
     PCは下のメディアクエリで中央基準に戻す */
  background-position: center bottom;
}

/* 「昭和100年」ロゴ（TOPページのみ）。
   SP：キャッチコピーの直上（間隔10px）・高さ120px。
   グラデーションオーバーレイ（.l-hero::after）より前面に出すためz-indexを持たせる */
.l-hero__logo {
  position: relative;
  z-index: 1;
  width: auto;
  height: 120px;
  margin-bottom: 10px;
}

@media (min-width: 1024px) {
  .l-hero__logo {
    /* PCは左上に絶対配置。
       コンテンツ幅（960px）の左端＝タイトルの左端に揃える。
       30pxはl-hero--topのコンテナ左padding（タイトル左端）と同じ値 */
    position: absolute;
    left: calc((100% - var(--content-width)) / 2 + 30px);
    top: 30px;
    height: 160px;
    margin-bottom: 0;
  }
}

.l-hero--top .l-hero__title {
  text-align: left; /* 他ページは中央寄せだがTOPのみ左寄せ */
  /* キャッチコピー2行目の両端揃えの基準幅を1行目に合わせるため、
     h1自体を内容幅（＝最長行である1行目の幅）に縮める */
  width: fit-content;
}

/* TOPキャッチコピー2行目「～法務省と昭和100年の歩み～」。
   1行目「ふれる、たどる、つなぐ。」より文字を小さくし、行間を空け、
   両端揃え（text-align-last: justify）で1行目と横幅を揃える。
   幅合わせを固定のletter-spacingではなく両端揃えにすることで、
   フォント環境・ブレークポイントが変わっても常に1行目と同幅になる */
.l-hero__title-sub {
  display: block;
  margin-top: 10px; /* PC/SP共通 */
  font-size: 1rem; /* 16px（1行目22pxより小さく） */
  letter-spacing: normal; /* 字間は両端揃えが自動配分するためリセット */
  text-align: justify;
  text-align-last: justify;
}

@media (min-width: 1024px) {
  .l-hero--top {
    height: 400px;
    min-height: 400px; /* SP用min-height:540px（基本ルール側）がPCへ漏れて高さを540pxに
                           押し上げてしまうため、PCブレークポイントで明示的に上書きする */
    /* SP用の縦積み・下寄せ指定（基本ルール側）をPCの横並びレイアウトへ戻す */
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background-position: center; /* SP用の下端基準（基本ルール側）を中央基準へ戻す */
  }

  .l-hero--top .l-hero__container {
    padding: 0 0 60px 30px; /* 下余白60px（ロゴ160pxを含むKV内の配分） */
  }

  .l-hero--top .l-hero__title {
    font-size: 2.625rem; /* 42px（他ページの40pxとは異なる） */
    letter-spacing: 2.1px;
  }

  .l-hero__title-sub {
    font-size: 1.75rem; /* 28px（1行目42pxより小さく） */
    /* PCは両端揃えではなく固定字間（0.3em）。
       この字間で2行目が1行目の「。」までの幅に収まる（2行目504px＜1行目528px） */
    letter-spacing: 0.3em;
    text-align: left;
    text-align-last: auto;
  }
}

/* ---- 2-7-2. 下層ページ（TOP以外）のヒーロー ----
   画像上のタイトルを「縦中央・左寄せ」に配置する。
   ・縦中央：align-items:center ＋ padding:0（base/768メディアのflex-end/flex-start・上padding50pxを上書き）。
     ヒーロー高さ（SP:min-height150px / tablet以上:height230px）の中央にタイトルが来る。
   ・左寄せ：l-hero__title を text-align:left に。
   ・左端揃え：l-hero__container に本文(l-container)と同じ左右padding20pxを与え、
     タイトル・サブタイトルの左端を本文（パンくず等）と揃える。
   詳細度(.l-hero:not(.l-hero--top) = 0,2,0)がbase/768メディアの .l-hero(0,1,0)より高いため上書きされる。
   TOP(.l-hero--top)には一切影響しない。 */
.l-hero:not(.l-hero--top) {
  align-items: center;
  padding: 0;
}

/* 下層ページのみ、オーバーレイの開始濃度を0.35とする（基本の0.2より濃くする）。
   タイトルが画像の縦中央（グラデーションが薄い位置）に乗るため、
   実画像の明るい箇所と重なるとコントラスト比が基準（3:1）を下回ることへの対策
   （0.35で全条件のコントラスト比が3:1以上になる）。
   TOP（l-hero--top）は0.2のまま（その濃度で全条件3:1以上になるため） */
.l-hero:not(.l-hero--top)::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), var(--color-overlay-end));
}

.l-hero:not(.l-hero--top) .l-hero__container {
  padding-inline: 20px;
  /* l-container と同じ考え方。中身の幅を960pxにするため padding 分を加算する。
     TOP（.l-hero--top）はpaddingの設計が異なるため、base の max-width（960px）のまま */
  max-width: calc(var(--content-width) + 40px);
}

.l-hero:not(.l-hero--top) .l-hero__title,
.l-hero:not(.l-hero--top) .l-hero__subtitle {
  text-align: left;
}

/* ---- 2-8. l-main（ヒーロー下のメインコンテンツ領域） ----
   背景（クリーム＋テクスチャ）はbodyに指定しているため、ここではページ縦方向の
   リズムのみを担当する。横幅の制御は内側に置く l-container に委ねる */

.l-main__inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: 20px;
  padding-bottom: 60px;
}

@media (min-width: 1024px) {
  .l-main__inner {
    gap: 40px;
    padding-top: 30px;
    padding-bottom: 80px;
  }
}

/* TOPページ（body.p-top）限定のカード周り余白（指定：カードの上下 各60px）。
   カード上端＝ヒーロー→カード＝padding-top、カード下端＝カード→区切り線＝padding-bottom。
   区切り線はフッター内にあるため、下側60pxを確定させるべくTOPのみフッター上パディングを0にする
   （他ページのフッター上余白には影響させない）。他16ページはこの上書きを受けない */
.p-top .l-main__inner {
  padding-top: 60px;
  padding-bottom: 60px;
}

.p-top .l-footer {
  padding-top: 0;
}

/* ============================================
   3. Component
   ============================================ */

/* ---- 3-0. フォーカス表示の共通方針 ----
   コンポーネントごとの定義どおりに実装する。パターンは大きく2種類：

   (A) 黄枠のみ（1色）
       ボタン（メイン）／ヘッダーナビ：背景色は変えず、黄色の枠線のみ追加
       → outline: 2px solid var(--color-focus);

   (B) 黄背景＋えんじ色枠
       テキストリンク系（サイト内リンク／外部リンク／ダウンロードリンク）／
       スマートフォン用ナビゲーション：背景を黄色で塗りつぶし、えんじ色の枠を追加
       → background: var(--color-focus); border: ○px solid var(--color-focus-outline);

   例外：
   - TOPカード（c-top-card）は背景白のまま外側にえんじ色、内側に黄色の
     二重の枠が視覚的に確認できる、唯一の二重リング
   - 巨人／法曹／施策カード（c-card）は外枠内を黄色で塗りつぶし、
     内側ボックスの縁取り色をえんじ色系（--color-primary-hover）にする
     独自パターン

   :focus-visible を基本としつつ、非対応ブラウザ向けの保険として :focus にも
   同じスタイルを当て、対応ブラウザでは :focus:not(:focus-visible) で
   マウスクリック時の表示を解除する（キーボード操作時のみ表示させるため）。
   outline: none は上記の代替表現とセットでのみ使用する。 */

/* ---- 3-1. c-btn（ボタン） ---- */

.c-btn {
  position: relative; /* 矢印アイコン（右端固定）の配置基準 */
  display: inline-flex;
  align-items: center;
  /* ラベルはボタン中央、矢印は右端に固定 */
  justify-content: center;
  /* 左右padding。右31px＝矢印の占有域（右余白14px＋矢印幅9px＋ラベルとの最小間隔8px）で、
     文言が長くなってもラベルが矢印と重ならない幅を確保している。
     左右を対称（31px）にするとラベルはボタンの幾何中心に載るが、その右側に矢印が
     加わるため、ラベルと矢印を合わせた見た目が右寄りになる。
     左を8px詰め・右を8px広げ、ラベルの位置だけを8px左へ寄せて視覚的な釣り合いを取る
     （左右の合計は62pxで変わらないため、ラベルの使える幅はそのまま） */
  padding: 14px 39px 14px 23px;
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-text-white);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-button);
  line-height: 1;
  letter-spacing: var(--tracking-base);
  text-transform: uppercase;
  white-space: nowrap;
}

.c-btn__icon {
  /* ラベルの中央配置に影響しないよう、フレックスの並びから外して右端に固定する */
  position: absolute;
  top: 50%;
  right: 14px; /* 矢印の右端からボタン右端まで14px */
  transform: translateY(-50%);
  width: 9px;
  height: 16px;
}

@media (hover: hover) {
  .c-btn:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-button-hover);
    cursor: pointer;
  }
}

/* フォーカス：ボタンの外側に 黄2px → えんじ2px の順で枠が付く。
   outline（黄）を offset:0 でボタンに密着させ、その外側に box-shadow でえんじの輪郭を重ねる。
   えんじの輪郭があることで、明るいページ背景に対しても境界が成立する（12.7:1） */
.c-btn:focus,
.c-btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--color-focus-outline);
}

.c-btn:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c-btn:active {
  transform: translateY(1px);
}

/* c-btn--main（詳細ページ「一覧へ戻る」等）・c-btn--download（塗りボタン版、現状未使用）は
   配色・状態が同一のため、.c-btn の基本スタイルをそのまま使用する */

/* 幅180px（高さは padding14px＋文字16px＝44px で自動的に一致する）。
   width ではなく min-width としているのは、発注者が「一覧へ戻る」の文言を
   長いものに差し替えた場合でもボタンからはみ出さないようにするため。
   現行のラベル（全詳細ページ共通「一覧へ戻る」）は180px未満のため、幅は180pxで表示される */
.c-btn--main {
  min-width: 180px;
  max-width: 100%;
}

.c-btn--download {
}

/* ボタン右端の矢印（白）。カード類の矢印（icon-arrow.svg）はえんじ色のため別アセット。
   c-btn--download は用途が異なる（ダウンロードアイコン）ため、--main のみに適用する */
.c-btn--main .c-btn__icon {
  background-image: url("../images/common/icon-arrow-white.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ---- 3-2. c-link（テキストリンク） ---- */

.c-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  border-bottom: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-family: var(--font-sans);
  /* SPは16px。タイトル22px ＞ 見出し18px ＞ テキスト16px の段階に揃える。
     PCは本文と同じ18px（下のメディアクエリで指定） */
  font-size: 1rem;
  line-height: var(--lh-button);
  letter-spacing: var(--tracking-md);
}

@media (min-width: 1024px) {
  .c-link {
    font-size: var(--fs-body); /* 18px。本文と同じサイズ */
  }
}

.c-link__icon {
  flex-shrink: 0;
}

@media (hover: hover) {
  .c-link:hover {
    color: var(--color-primary-hover);
    border-bottom-width: 2px;
    border-bottom-color: var(--color-primary-hover);
    cursor: pointer;
  }
}

/* フォーカス：黄背景＋えんじ色枠（下線を枠に置き換える） */
.c-link:focus,
.c-link:focus-visible {
  outline: none;
  border: 3px solid var(--color-focus-outline);
  border-radius: var(--radius-button);
  background: var(--color-focus);
  padding: 4px;
}

.c-link:focus:not(:focus-visible) {
  outline: none;
  border: none;
  border-bottom: 1px solid var(--color-primary);
  border-radius: 0;
  background: transparent;
  padding: 0 4px;
}

.c-link:active {
  transform: translateY(1px);
}

/* c-link--external（外部リンク。links.html 等）
   下線がつくのはラベル部分のみで、アイコンは下線の外側に並ぶ。
   base .c-link（下線が要素全体にかかる想定）とは構造が異なるため、
   ラベルを .c-link__label で囲む構成に上書きする */
.c-link--external {
  gap: 4px;
  padding: 0;
  border-bottom: none;
}

.c-link--external .c-link__label {
  border-bottom: 1px solid var(--color-primary);
  padding: 0 4px;
}

/* リンク名の折り返し単位。「名称（組織名）」の組織名部分を塊にして、
   1行に収まらない画面幅では塊の境目（＝括弧の前）で折り返す
   （c-heading-mid__seg と同じ手法。リンク集で使用） */
.c-link__seg {
  display: inline-block;
}

.c-link--external .c-link__icon {
  width: 24px; /* 正方形 */
  height: 24px;
  /* 外部リンクアイコン（同梱SVG）。ラベルの右横、下線の外側に表示する */
  background-image: url("../images/common/icon-external.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media (hover: hover) {
  .c-link--external:hover {
    border-bottom: none;
  }
}

@media (hover: hover) {
  .c-link--external:hover .c-link__label {
    color: var(--color-primary-hover);
    border-bottom-width: 2px;
    border-bottom-color: var(--color-primary-hover);
  }
}

.c-link--external:focus:not(:focus-visible) {
  border-bottom: none;
}

/* c-archive-card（デジタルアーカイブ：書籍紹介カード。rule-of-law.html）
   1枚のカード内に、独立した2つのリンクを縦に並べる：
   ① 書籍画像 … クリックでモーダル拡大（JS）。② 「PDFダウンロード」 … クリックでPDFをDL。
   ※「画像＝モーダル／テキスト＝PDFダウンロード」と操作を分離した構成
     （1つの <a> にまとめない）。 */
.c-archive-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 15px;
  border-radius: var(--radius-card);
  background: var(--color-bg-card);
  /* 影は付けない（PDFダウンロード周りは影なしの仕様） */
}

/* 書籍画像リンク：クリックでモーダル拡大（JS）。JS無効時はhrefの拡大画像を直接開く */
.c-archive-card__thumb-link {
  display: block;
  line-height: 0; /* インライン画像下の余白を除去 */
  border-radius: 2px;
}

@media (hover: hover) {
  .c-archive-card__thumb-link:hover {
    opacity: 0.85; /* 影は付けず、わずかな不透明度でクリック可能を示す */
    cursor: pointer;
  }
}

/* フォーカス：他コンポーネントと同じ2色構成（黄枠＋えんじリング）。
   カード自体にえんじ色の飾り枠があるため、えんじ1本の枠では
   フォーカスが飾り枠と見分けられないため */
.c-archive-card__thumb-link:focus,
.c-archive-card__thumb-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--color-focus-outline);
}

.c-archive-card__thumb-link:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* アクティブ：全コンポーネント共通ルール（要素1px下）に揃える */
.c-archive-card__thumb-link:active {
  transform: translateY(1px);
}

.c-archive-card__thumb {
  display: block;
  width: 230px; /* PC/SP共通（固定） */
  aspect-ratio: 230 / 345; /* 実素材の比率差でも崩れないようアスペクト比で指定する */
  object-fit: cover;
  /* プレースホルダー背景色は変数化せず直値で記述する */
  background-color: #d9d9d9;
}

/* c-link--download（PDFダウンロードのテキストリンク＋アイコン。rule-of-law.html）
   c-link--external と同様、下線はラベルに付け、右横にDLアイコンを並べる。
   base .c-link の要素全体下線は使わない */
.c-link--download {
  padding: 0;
  border-bottom: none;
}

/* ラベル文字＋アイコンの行 */
.c-link__label-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.c-link--download .c-link__icon {
  width: 20px; /* 約20×23.85px */
  height: 24px;
  /* ダウンロードアイコン（同梱SVG）。ラベル「PDFダウンロード」の右横に表示する */
  background-image: url("../images/common/icon-download.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.c-link__label {
  border-bottom: 1px solid var(--color-primary);
  padding: 0 4px;
}

@media (hover: hover) {
  .c-link--download:hover .c-link__label {
    border-bottom-width: 2px;
    border-bottom-color: var(--color-primary-hover);
    color: var(--color-primary-hover);
  }
}

/* フォーカス時はラベル行（.c-link__label-row）が黄背景＋えんじ色枠になる。
   リンク要素自体には base .c-link のフォーカス枠を出さないよう打ち消す */
.c-link--download:focus,
.c-link--download:focus-visible,
.c-link--download:focus:not(:focus-visible) {
  outline: none;
  border: none;
  background: transparent;
  padding: 0;
}

.c-link--download:focus .c-link__label-row,
.c-link--download:focus-visible .c-link__label-row {
  border: 3px solid var(--color-focus-outline);
  border-radius: var(--radius-button);
  background: var(--color-focus);
  padding: 4px 8px;
}

.c-link--download:focus:not(:focus-visible) .c-link__label-row {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

/* ---- 3-3. c-nav（グローバルナビゲーション。PC/SP共通の単一マークアップ） ----
   <nav class="l-header__nav"><ul class="c-nav"><li><a class="c-nav__link">…</a></li>…</ul></nav>
   という1セットのマークアップをPC/SP共通で使用し、見た目の違いはすべて
   このセクション内のメディアクエリで吸収する（17ファイル直書きのため二重管理を避ける）。

   SPファースト：既定値はスマートフォン用ナビゲーション（白カード＋シャドウ）、
   1024px以上でヘッダーグローバルナビゲーション（マルーン地の横並びバー）に切り替える */

.c-nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.c-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--radius-button);
  border-bottom: 1px solid var(--color-border-card);
  background: var(--color-bg-card);
  color: var(--color-primary);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-button);
  letter-spacing: var(--tracking-base);
  box-shadow: var(--shadow-nav-sp-link);
}

.c-nav__icon {
  flex-shrink: 0;
  width: 9px;
  height: 16px;
  /* SPメニューの各リンク右端の矢印。カード類と同じ画像を流用する
     （全状態でえんじ色のまま変化しないため、固定色のSVGをそのまま背景画像として使う） */
  background-image: url("../images/common/icon-arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* PC版ヘッダーナビのみで使用する明示的な改行。
   「「法の支配」の成熟の100年」等、長いラベルをデザインどおりの位置で2行に折り返すために使う。
   SP版（spメニュー）ではラベルは1行表示のため、display:noneで改行そのものを無効化する
   （<br>はdisplay:noneにすると改行を発生させなくなるため、HTML側の<br>タグは変更せずCSSだけで
   PC/SPの表示を切り替えられる。ナビ項目数・順序が固定の全17ページ共通ナビであり、
   ラベル文言の一部だけを可変にする複雑さを避けるため、この方式を採用した） */
.c-nav__link-break {
  display: none;
}

@media (hover: hover) {
  .c-nav__link:hover {
    background: var(--color-primary-hover);
    color: var(--color-text-white);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
  }

  /* 背景がえんじ色になるため、矢印も白に切り替える */
  .c-nav__link:hover .c-nav__icon {
    background-image: url("../images/common/icon-arrow-white.svg");
  }
}

/* カレント（現在ページ）。PC版ヘッダーナビと同じ強調表現をSP版にも適用している。
   文字色を白にしているのは、背景がえんじ色になるため通常時のえんじ文字のままでは
   コントラストが確保できないため（矢印は currentColor 追従で自動的に白になる）。
   ※この定義はフォーカス指定より前に置くこと。詳細度が同じ(0,2,0)のため、
   　後に置くとカレント項目にフォーカスしても黄背景が出なくなる */
.c-nav__link[aria-current="page"] {
  background: var(--color-primary-hover);
  color: var(--color-text-white);
  text-decoration: underline;
}

/* 背景がえんじ色になるため、矢印も白に切り替える */
.c-nav__link[aria-current="page"] .c-nav__icon {
  background-image: url("../images/common/icon-arrow-white.svg");
}

/* フォーカス（SP）：黄背景＋えんじ色枠（通常時は下辺のみの線を、全周2pxにする） */
.c-nav__link:focus,
.c-nav__link:focus-visible {
  outline: none;
  border: 2px solid var(--color-focus-outline);
  background: var(--color-focus);
  color: var(--color-primary);
  box-shadow: none;
}

/* フォーカス時は背景が黄（または白）で文字色がえんじになるため、矢印もえんじに戻す。
   ホバー・カレントの指定と同じ詳細度(0,3,0)のため、必ずそれらより後ろに置くこと */
.c-nav__link:focus .c-nav__icon,
.c-nav__link:focus-visible .c-nav__icon {
  background-image: url("../images/common/icon-arrow.svg");
}

.c-nav__link:focus:not(:focus-visible) {
  outline: none;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: var(--color-border-card);
  background: var(--color-bg-card);
  color: var(--color-primary);
  box-shadow: var(--shadow-nav-sp-link);
}

.c-nav__link:active {
  transform: translateY(1px);
}


@media (min-width: 1024px) {
  .c-nav {
    flex-direction: row;
    gap: 0;
    height: var(--header-height);
    border-left: 1px solid var(--color-nav-divider);
  }

  .c-nav__link {
    justify-content: center;
    height: 100%;
    padding: 0 21px;
    border-radius: 0;
    border-bottom: none;
    border-right: 1px solid var(--color-nav-divider);
    background: var(--color-primary);
    color: rgba(255, 255, 255, 0.9);
    line-height: var(--lh-heading);
    text-align: center;
    white-space: nowrap;
    box-shadow: none;
  }

  .c-nav__icon {
    display: none;
  }

  /* 各ナビ項目の幅を固定する（合計959px≒コンテンツ幅960px）。
     項目の並び順は全17ページ共通で固定のため、位置指定（nth-child）で対応する。
     flex-shrink:0により、テキストの折り返し都合で幅が縮んだり伸びたりしない */
  .c-nav > li {
    flex-shrink: 0;
  }

  .c-nav > li:nth-child(1) { width: 82px; }  /* TOP */
  .c-nav > li:nth-child(2) { width: 135px; } /* 企画の趣旨 */
  .c-nav > li:nth-child(3) { width: 166px; } /* 「法の支配」の成熟の100年 */
  .c-nav > li:nth-child(4) { width: 173px; } /* 昭和期の立法を支えた巨人たち */
  .c-nav > li:nth-child(5) { width: 135px; } /* 昭和を生きた女性法曹たち */
  .c-nav > li:nth-child(6) { width: 152px; } /* 未来へつなぐ「法の支配」 */
  .c-nav > li:nth-child(7) { width: 116px; } /* リンク集 */

  /* 2行に折り返すラベルのみ行間を1.3にする（1行のラベルは1.5のまま） */
  .c-nav > li:nth-child(3) .c-nav__link,
  .c-nav > li:nth-child(4) .c-nav__link,
  .c-nav > li:nth-child(5) .c-nav__link,
  .c-nav > li:nth-child(6) .c-nav__link {
    line-height: 1.3;
  }

  /* PC版のみ明示的な改行を有効化する（SP版はc-nav側の既定display:noneのまま） */
  .c-nav__link-break {
    display: inline;
  }

  @media (hover: hover) {
    .c-nav__link:hover {
      background: var(--color-primary-hover);
      color: rgba(255, 255, 255, 0.9);
      box-shadow: none;
    }
  }

  /* フォーカス（PC）：黄枠のみ（背景はそのまま）。
     ヘッダーの高さ(60px)からリングがはみ出さないよう内側オフセットにする */
  .c-nav__link:focus,
  .c-nav__link:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
    border: none;
    background: var(--color-primary);
    color: rgba(255, 255, 255, 0.9);
  }

  .c-nav__link:focus:not(:focus-visible) {
    outline: none;
    border: none;
    border-right: 1px solid var(--color-nav-divider);
    background: var(--color-primary);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: none;
  }
}

/* ---- 3-5. c-top-card（TOPページ カードリンク） ---- */

.c-top-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* 縦16px／横15px。横を15pxにすることで、カード幅290px − border1px×2 − 横padding15px×2 =
     コンテンツ幅258pxとなり、写真が正確に258×180pxで表示される。
     border(1px)がpadding領域相当を占めるため、横のみ15pxにしている */
  padding: 16px 15px;
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-card);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-card);
}

.c-top-card__thumb {
  width: 100%;
  aspect-ratio: 258 / 180; /* 写真は258×180px。実素材の比率差でも崩れないようheight固定ではなくアスペクト比で指定 */
  object-fit: cover;
}

/* ロゴ調画像など「全体を収めたい」画像用。現在は使用箇所なし（発注者の更新用に残している） */
.c-top-card__thumb--contain {
  object-fit: contain;
}

/* c-top-card__heading（タイトル・サブタイトルのラッパー）。

   【SP】この見出しブロック自身の border-bottom が下線になる。
   縦1列で並ぶため、カードごとに下線の位置を揃える（面合わせする）必要がなく、
   タイトル／サブタイトルの直下に padding-bottom:10px を空けて線を引く。

   【PC】同じ行に並ぶカードで下線の位置を揃える必要があるため、
   下線を独立要素（.c-top-card__underline）に切り替え、この領域を flex:1 で伸縮させる
   （メディアクエリ側で指定） */
.c-top-card__heading {
  display: flex;
  flex-direction: column;
  gap: 10px; /* タイトルとサブタイトルの間隔 */
  padding-bottom: 10px; /* 下線までの間隔 */
  border-bottom: 1px solid var(--color-primary);
}

/* 下線用の独立要素。SPでは見出しの border-bottom が下線を担うため非表示にし、
   PC（カードが横並びになり面合わせが必要）でのみ表示する */
.c-top-card__underline {
  display: none;
}

.c-top-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.c-top-card__title-text {
  color: var(--color-primary);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.125rem; /* PCの16pxより大きい（他コンポーネントと逆の傾向） */
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-md);
}

.c-top-card__icon {
  flex-shrink: 0;
  width: 9px;
  height: 16px;
  background-image: url("../images/common/icon-arrow.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

/* サブタイトル（③④⑤カードのみ） */
.c-top-card__subtitle {
  color: var(--color-primary);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.875rem; /* PC/SP共通 */
  letter-spacing: var(--tracking-sm);
  line-height: 1.2;
  /* 約物（開き括弧「）のぶら下げ。1行目の「はカード左端に置き、2行目以降（改行後含む）は
     「1文字分（1em）字下げして、本文が開き括弧の右に揃うようにする。
     サブタイトルは全て「…」形式のため共通適用で問題ない */
  padding-left: 1em;
  text-indent: -1em;
}

.c-top-card__subtitle ruby {
  ruby-position: over;
}

.c-top-card__subtitle rt {
  /* ルビ（しあわせ）のサイズは5px。
     コントラストは白背景に対し約14:1で、5pxでもJIS X 8341-3 AA（4.5:1以上）を満たす。
     WCAG/JISに最小フォントサイズの規定はなく、ズームでも拡大されるため問題ない */
  font-size: 0.3125rem;
  color: var(--color-primary);
}

@media (min-width: 1024px) {
  /* PCはカードが横並びになるため、下線の位置をカード間で揃える（面合わせ）。
     見出し領域を flex:1 で伸ばし、下線は独立要素として margin-top:auto で最下部に固定する */
  .c-top-card__heading {
    flex: 1;
    display: grid;
    grid-template-rows: auto 1fr;
    row-gap: 10px;
    padding-bottom: 0;
    border-bottom: none;
  }

  .c-top-card__underline {
    display: block;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--color-primary);
  }

  /* heading下段（1fr）の中で縦中央に配置。1行/2行サブタイトルの中心が揃う */
  .c-top-card__subtitle {
    align-self: center;
  }

  .c-top-card__title-text {
    font-size: var(--fs-button); /* 16px */
    /* 最長タイトル「史料でたどる司法の近代化への道」（14文字）がPC幅の1行に収まらないため字間を0に詰める。全6枚のカードに共通適用（例外なし）。
       字間トークンはボタン・ナビ等と共有のため、トークン値ではなくこの要素で0に上書きする */
    letter-spacing: 0;
  }
}

@media (hover: hover) {
  .c-top-card:hover {
    background: var(--color-bg-card-hover);
    box-shadow: var(--shadow-card-hover);
    cursor: pointer;
  }
}

/* フォーカス：外側にえんじ色、内側に黄色の二重リング
   （このコンポーネントだけが二重枠になっている） */
.c-top-card:focus,
.c-top-card:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
  box-shadow: var(--shadow-card-hover), 0 0 0 2px var(--color-focus);
}

.c-top-card:focus:not(:focus-visible) {
  outline: none;
  box-shadow: var(--shadow-card);
}

/* アクティブ時は見出し文字のみ1px下げる */
.c-top-card:active .c-top-card__title {
  transform: translateY(1px);
}

/* ---- 3-6. c-card（巨人／法曹／施策のカードリンク） ---- */

.c-card {
  position: relative; /* 四隅装飾（疑似要素）の配置基準 */
  display: block;
  /* 白地の上に和紙テクスチャを不透明度60%で重ねた背景。
     CSSのopacityは子要素にも影響するため、body背景と同じ方針で、
     あらかじめ白に60%合成したJPEGを用意し通常のbackground-imageとして敷く。
     ホバー・フォーカス時は背景を単色で上書きするため、復帰用にカスタムプロパティ化しておく */
  --card-band-bg: var(--color-bg-card) url("../images/common/card-texture.jpg") center / cover no-repeat;
  background: var(--card-band-bg);
  border: 10px solid var(--color-primary);
  /* えんじの枠10px → テクスチャ6px → 金線1px → 内側の白 の順に重ねるため、paddingは6px */
  padding: 6px;
}

/* 枠四隅の装飾。同一の装飾を回転して4隅に配置するが、
   background-imageは回転できないため、あらかじめ4方向分のSVGを用意している。
   ::before で上2隅、::after で下2隅を複数背景（カンマ区切り）で配置する。
   4隅ともカード外周から4pxの位置＝paddingボックス基準で-6px（えんじ枠に重なる） */
.c-card::before,
.c-card::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  height: 30px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 30px 30px;
}

.c-card::before {
  top: -6px;
  background-image:
    url("../images/common/card-corner-tl.svg"),
    url("../images/common/card-corner-tr.svg");
  background-position: left top, right top;
}

.c-card::after {
  bottom: -6px;
  background-image:
    url("../images/common/card-corner-bl.svg"),
    url("../images/common/card-corner-br.svg");
  background-position: left bottom, right bottom;
}

.c-card__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 金線の内側の余白は15px */
  padding: 15px;
  border: 1px solid var(--color-gold-border);
  background: var(--color-bg-card);
}

.c-card__thumb {
  width: 100%;
  aspect-ratio: 387 / 238;
  object-fit: cover;
  /* プレースホルダー背景色は変数化せず直値で記述する */
  background-color: #c4c4c4;
}

@media (min-width: 1024px) {
  .c-card__thumb {
    aspect-ratio: 387 / 284;
  }
}

/* 見出しは中央寄せ。矢印アイコンは絶対配置で右端に固定し、
   テキストがカード幅全体に対して中央になるようにする */
.c-card__title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 左右対称のパディング＝中央寄せを保ったまま、長い見出しが右端のアイコンに重ならないための余白 */
  padding: 0 20px;
}

.c-card__title-text {
  color: var(--color-primary);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-h4-card);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-md);
}

/* 氏名の上のルビ（giants・lawyersのカードで使用。futureの取組名にはルビなし） */
.c-card__title-text ruby {
  ruby-position: over;
}

.c-card__title-text rt {
  font-size: 0.625rem;
  letter-spacing: 0.5px;
}

/* ルビ付き氏名（表示用の aria-hidden 側）は姓と名の間で改行しない。
   macOS Safari はルビを含む見出しの幅を狭く見積もることがあり、
   Enter押下時（:active の transform で再描画される瞬間）や印刷時に
   「團藤／重光」のように姓名の間で折り返してしまうため。氏名は短く、カード幅に常に収まる */
.c-card__title-text > [aria-hidden="true"] {
  display: inline-block; /* 姓名をひとまとまりの箱にし、箱の内側では改行が起きないようにする */
  white-space: nowrap;
}

.c-card__icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  width: 6px;
  height: 10px;
  background-image: url("../images/common/icon-arrow.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

@media (min-width: 1024px) {
  .c-card__icon {
    width: 9px; /* 約9.08px */
    height: 16px; /* 約15.93px */
  }
}

@media (hover: hover) {
  .c-card:hover {
    background: var(--color-primary-hover);
    cursor: pointer;
  }
}

/* フォーカス：枠内を黄色で塗りつぶし、内側ボックスの縁取りをえんじ色系
   （--color-primary-hover。通常時は金色の --color-gold-border）にする */
.c-card:focus,
.c-card:focus-visible {
  outline: none;
  background: var(--color-focus);
}

.c-card:focus .c-card__inner,
.c-card:focus-visible .c-card__inner {
  border-color: var(--color-primary-hover);
}

.c-card:focus:not(:focus-visible) {
  outline: none;
  background: var(--card-band-bg); /* 通常時のテクスチャ帯に戻す */
}

.c-card:focus:not(:focus-visible) .c-card__inner {
  border-color: var(--color-gold-border);
}

/* アクティブ時は見出し文字のみ1px下げる */
.c-card:active .c-card__title-text {
  transform: translateY(1px);
}

/* ---- 3-7. c-breadcrumb（パンくず） ----
   各一覧・詳細ページで共通の構造。
   状態定義（ホバー等）は他コンポーネントの主流パターン（黄枠1色）に合わせる */

.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.c-breadcrumb__item,
.c-breadcrumb__link {
  color: var(--color-text-base);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.36px;
}

.c-breadcrumb__link {
  text-decoration: none;
}

@media (hover: hover) {
  .c-breadcrumb__link:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  /* 現在ページ（自己リンク）はテキスト表示の見た目を維持し、ホバーでも下線を出さない */
  .c-breadcrumb__link[aria-current="page"]:hover {
    text-decoration: none;
  }
}

/* c-link の状態定義（黄背景＋えんじ色枠）を流用する。
     枠は border ではなく outline で描く（インライン要素のため、borderだと行の高さがずれる） */
.c-breadcrumb__link:focus,
.c-breadcrumb__link:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 0;
  background: var(--color-focus);
}

.c-breadcrumb__link:focus:not(:focus-visible) {
  outline: none;
}

/* アクティブ：c-link の状態定義を流用する */
.c-breadcrumb__link:active {
  transform: translateY(1px);
}

@media (min-width: 1024px) {
  .c-breadcrumb__item,
  .c-breadcrumb__link {
    font-size: var(--fs-small);
    letter-spacing: var(--tracking-sm);
  }
}

/* ---- 3-8. c-heading-bar（「見出し大」バー） ----
   rule-of-law.html・詳細ページ共通の茶色バー見出し */

.c-heading-bar {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 20px;
  border-radius: var(--radius-heading-bar);
  background: var(--color-heading-bar-bg);
}

.c-heading-bar__text {
  color: var(--color-text-white);
  font-family: var(--font-serif);
  font-weight: 700;
  /* 18px。SPのサイズ段階を
     タイトル22px ＞ 見出し18px ＞ テキスト16px に揃えるための調整 */
  font-size: 1.125rem;
  letter-spacing: 1px;
  line-height: var(--lh-heading);
}

@media (min-width: 1024px) {
  .c-heading-bar {
    padding: 12px 30px;
  }

  .c-heading-bar__text {
    font-size: var(--fs-h2); /* 26px */
    letter-spacing: var(--tracking-2xl);
  }
}

/* ---- 3-9. c-heading-mid（「見出し中」） ----
   rule-of-law.htmlのパネル展示・デジタルアーカイブ各項目の見出し。
   c-heading-bar（見出し大）の1つ下の見出しレベルとして使用する */

.c-heading-mid {
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.9px;
  line-height: var(--lh-heading);
}

/* 見出し内の「タイトル」「―サブタイトル―」の区切り単位。inline-block にすることで、
   1行に収まらない画面幅ではこの塊の境目で折り返し、語句の途中でちぎれない。
   塊自体が行幅を超える場合は塊の内部で通常どおり折り返す */
.c-heading-mid__seg {
  display: inline-block;
}

/* --break-sp：SPでは1行に収まる場合でも塊ごとに必ず改行する
   （「―法の支配の礎を築く― 法務省の誕生」で使用）。タブレット以上は通常の折り返しに戻す */
.c-heading-mid--break-sp .c-heading-mid__seg {
  display: block;
}

@media (min-width: 768px) {
  .c-heading-mid--break-sp .c-heading-mid__seg {
    display: inline-block;
  }
}

@media (min-width: 1024px) {
  .c-heading-mid {
    padding-bottom: 16px;
    font-size: var(--fs-h3-panel);
    letter-spacing: var(--tracking-xl);
  }
}

/* ---- 3-10. c-modal（拡大表示） ----
   <dialog>要素を使用。HTML側ではopen属性を付与せず、JSのshowModal()で開く */

.c-modal {
  padding: 0;
  border: none;
  background: transparent;
  /* 閉じるボタンはカードの右上角から外側へはみ出す配置のため、
     <dialog>既定の overflow:auto のままだとボタンが見切れ、スクロールバーが出る。
     カードの寸法はビューポート内に必ず収まるよう .c-modal__image 側で制御しているため、
     ここは visible にしてはみ出しをそのまま表示させる */
  overflow: visible;
  /* カードの幅をここで確定させる（画像側ではなくダイアログ側で制御する）。
     100vw はスクロールバーの幅を含むため、実際の表示幅より大きく計算されて画面からはみ出す。
     百分率は初期包含ブロック（＝スクロールバーを除いたビューポート）を基準にするため、
     横方向は百分率で指定する。
       第1項：カード幅の上限（画像300px＋左右padding10px）
       第2項：左右20pxの余白と、閉じるボタンの右へのはみ出し15px、その左右対称分を確保
              （カード幅 ≦ 表示幅 −(20×2+15×2)）
       第3項：画面が低いときに縦がはみ出さないよう、高さから逆算したカード幅
              （画像高 ＝(カード幅−20)×1.5、これに上下の余白・はみ出しを加えた値が画面高以内） */
  width: min(320px, calc(100% - 70px), calc((100vh - 90px) / 1.5 + 20px));
  max-width: calc(100% - 70px); /* widthが効かない環境への保険 */
  max-height: calc(100% - 70px);
}

/* 中央寄せをブラウザ標準（UAスタイルシート）任せにせず明示する。
   <dialog> の中央寄せは inset:0 ＋ margin:auto で実現されるが、
   width や max-height を指定した場合の挙動がブラウザによって異なることがあるため、
   同じ指定を実装側で明示して画面中央に固定する */
.c-modal[open] {
  position: fixed;
  inset: 0;
  margin: auto;
}

/* アドレスバーの伸縮を考慮した動的ビューポート単位。非対応環境では上の100vhが有効 */
@supports (height: 100dvh) {
  .c-modal {
    width: min(320px, calc(100% - 70px), calc((100dvh - 90px) / 1.5 + 20px));
  }
}

.c-modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

/* モーダル表示中は背後ページのスクロールをロックし、スクロールバーを出さない。
   スクロールバー領域は html の scrollbar-gutter:stable で常時確保しているため、
   ここで overflow:hidden にしてもレイアウトはずれない（JSが is-modal-open を付与） */
.is-modal-open {
  overflow: hidden;
}

.c-modal__card {
  position: relative;
  width: 100%; /* 幅は .c-modal 側で確定させ、カードはそれいっぱいに広がる */
  max-width: 100%;
  padding: 10px;
  background: var(--color-bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.c-modal__image {
  display: block;
  aspect-ratio: 2 / 3; /* 2:3。実素材が2:3でない場合はobject-fit:containで全体表示 */
  /* 幅はカード（＝.c-modal）から受け取り、高さは aspect-ratio が決める。
     画面に収める計算は .c-modal 側に集約している */
  width: 100%;
  height: auto;
  /* 拡大表示（資料全体を見せる）が目的のため、一覧サムネイル(cover)とは異なりcontainを採用 */
  object-fit: contain;
  /* プレースホルダー背景色は変数化せず直値で記述する */
  background-color: #d9d9d9;
}

.c-modal__close {
  position: absolute;
  top: -15px; /* カード右上角の中心に重なる位置 */
  right: -15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--color-modal-close-bg); /* 黒円＋白い× */
  color: var(--color-text-white);
  font-size: 1.125rem; /* 18px */
  line-height: 1;
  cursor: pointer;
}

@media (hover: hover) {
  .c-modal__close:hover {
    background: var(--color-modal-close-bg-hover);
  }
}

/* 状態定義は c-btn と同じ構成（黄枠＋外側にえんじの輪郭）に揃える。
   白いカード面の上に置かれるため、えんじの輪郭がないと黄枠の境界が成立しない */
.c-modal__close:focus,
.c-modal__close:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--color-focus-outline);
}

.c-modal__close:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* アクティブ：全コンポーネント共通ルール（要素1px下）に揃える */
.c-modal__close:active {
  transform: translateY(1px);
}

@media (min-width: 1024px) {
  .c-modal__card {
    padding: 15px;
  }

  /* PCはカード余白15px・閉じるボタンのはみ出し20pxのため、SPとは定数が変わる。
     第1項：カード幅の上限（画像450px＋左右padding15px）
     第2項：左右20pxの余白と閉じるボタンのはみ出し20pxの左右対称分＝80px
     第3項：高さから逆算（画像高＝(カード幅−30)×1.5、上下の余白・はみ出し込みで110px） */
  .c-modal {
    width: min(480px, calc(100% - 80px), calc((100vh - 110px) / 1.5 + 30px));
    max-height: calc(100% - 80px);
  }

  @supports (height: 100dvh) {
    .c-modal {
      width: min(480px, calc(100% - 80px), calc((100dvh - 110px) / 1.5 + 30px));
    }
  }

  .c-modal__close {
    top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    font-size: 1.5rem; /* 24px */
  }
}

/* ---- c-modal--landscape（横長画像用のモーダル） ----
   未来へつなぐ詳細ページの取組画像拡大で使用。
   基本の c-modal は書影（縦2:3）前提で幅を算出しているため、
   横長（実素材は大判ポスター。拡大用画像はPDFから幅4000pxで書き出し）用に
   幅の算出式とアスペクト比を差し替える。
   式の考え方は基本形と同一（第3項＝画像高（(カード幅−余白)÷1.414）＋ツールバー分が
   画面高に収まる幅の上限。高さの引き代170pxはツールバー・余白・閉じるボタンのはみ出し込み） */
.c-modal--landscape {
  width: min(640px, calc(100% - 70px), calc((100vh - 170px) * 1.414 + 20px));
}

@supports (height: 100dvh) {
  .c-modal--landscape {
    width: min(640px, calc(100% - 70px), calc((100dvh - 170px) * 1.414 + 20px));
  }
}

/* 拡大用画像の比率（4000×2830前後）。数pxの書き出し誤差は object-fit: contain が吸収する */
.c-modal--landscape .c-modal__image {
  aspect-ratio: 1920 / 1358;
}

@media (min-width: 1024px) {
  /* 第1項：画像960px（コンテンツ幅と同じ）＋左右padding15px */
  .c-modal--landscape {
    width: min(990px, calc(100% - 80px), calc((100vh - 170px) * 1.414 + 30px));
  }

  @supports (height: 100dvh) {
    .c-modal--landscape {
      width: min(990px, calc(100% - 80px), calc((100dvh - 170px) * 1.414 + 30px));
    }
  }
}

/* ---- 取組画像モーダルの拡大表示 ----
   ポスターの文字を読めるようにするための機能。
   「全体表示（既定）⇔ 拡大表示」を is-zoomed クラスで切り替える（JSが付与）。
   拡大時は画像を原寸（幅4000px）で表示し、c-modal__scroll の中をスクロールして読む。
   スクロールはブラウザ標準機能のため、タッチ・マウス・キーボードいずれでも操作できる */
.c-modal__scroll {
  line-height: 0; /* インライン画像下の余白を除去 */
}

.c-modal--landscape .c-modal__image {
  cursor: zoom-in; /* 画像クリックでも拡大切替できることを示す */
}

.c-modal.is-zoomed .c-modal__scroll {
  /* 全体表示時の画像と同じ縦横比の枠を保ち、拡大してもモーダルの外形が変わらないようにする */
  aspect-ratio: 1920 / 1358;
  overflow: auto;
  overscroll-behavior: contain; /* スクロールが背面ページへ連鎖しないようにする */
}

.c-modal.is-zoomed .c-modal__image {
  /* width/height属性の原寸（4000px）で表示する */
  width: auto;
  max-width: none;
  aspect-ratio: auto;
  cursor: zoom-out;
}

/* ツールバー（拡大切替ボタン＋PDFリンク）。SPでは折り返して縦に並ぶ */
.c-modal__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 30px;
  margin-top: 10px;
}

.c-modal__zoom {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-button);
  background: var(--color-bg-card);
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
}

@media (hover: hover) {
  .c-modal__zoom:hover {
    background: var(--color-primary);
    color: var(--color-text-white);
  }
}

/* フォーカス：他コンポーネントと同じ2色構成（黄枠＋えんじリング） */
.c-modal__zoom:focus,
.c-modal__zoom:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--color-focus-outline);
}

.c-modal__zoom:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c-modal__zoom:active {
  transform: translateY(1px);
}

/* 拡大画像のスクロール領域：キーボード操作用に tabindex を持つためフォーカス表示も整える。
   内側（inset）の影は中の画像に隠れるため、他コンポーネントと同じく領域の外側に
   黄枠＋えんじリングを描く（外側の余白は .c-modal__card の padding 10px 内に収まる） */
.c-modal__scroll:focus,
.c-modal__scroll:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--color-focus-outline);
}

.c-modal__scroll:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ============================================
   4. Project
   ============================================ */

/* ---- 4-1. p-card-grid（一覧ページのカードグリッド） ----
   giants.html / lawyers.html / future.html の3ページで共通利用する。
   c-card自体は共通のまま、列数のみモディファイアで切り替える。
   SP：1カラム／タブレット(768px)：2カラム／PC(1024px)：デザインどおりの列数・カラム幅に切り替える */

.p-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  width: 100%;
}

@media (min-width: 768px) {
  .p-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .p-card-grid--cols-2 {
    grid-template-columns: repeat(2, 290px);
    justify-content: center;
    gap: 50px;
  }

  .p-card-grid--cols-3 {
    grid-template-columns: repeat(3, 290px);
    justify-content: center;
    column-gap: 25px;
    row-gap: 50px;
  }

  /* index.html専用。--cols-3と列数・列幅は同じだが、行間が30pxと異なるため
     既存モディファイアを流用せず別モディファイアとして追加する。
     カード幅290px×3＋列間25px×2＝920pxでコンテナ幅（960−左右padding20）にちょうど収まる */
  .p-card-grid--top {
    grid-template-columns: repeat(3, 290px);
    justify-content: center;
    column-gap: 25px;
    row-gap: 30px; /* --cols-3の50pxとは異なる */
  }
}

.p-card-grid__item {
  display: flex;
}

.p-card-grid__item .c-card,
.p-card-grid__item .c-top-card {
  width: 100%;
}

/* ---- 4-2. p-detail（詳細ページ本文一式） ----
   giants / lawyers / future の詳細10ページで共通利用するテンプレート。
   c-heading-bar（タイトル）／p-detail__media（画像・動画エリア）／
   p-detail__body（本文）／c-btn--main（一覧へ戻る）で構成する */

.p-detail {
  display: flex;
  flex-direction: column;
  gap: 40px; /* PC/SP共通 */
  width: 100%;
}

/* .c-prose は本文（地の文）用の汎用クラス。about.html等、詳細ページ以外の
   本文エリアでも同じ書式を使うため p-detail__body と併記して共通化している */
.p-detail__body,
.c-prose {
  color: var(--color-text-base);
  font-family: var(--font-sans);
  font-size: 1rem;
  letter-spacing: 0.48px;
  line-height: var(--lh-button);
}

.p-detail__body p + p,
.c-prose p + p {
  margin-top: 1.5em; /* 段落間隔（一般的な行間） */
}

/* 紹介文（リード文）。巨人詳細の氏名下に置く2行のキャッチコピー。
   明朝＋えんじ色＋サイズアップは c-heading-mid（中見出し）の語彙を流用した格上げ
   （クリーム背景に対するえんじ色のコントラスト比は約10:1でAA基準クリア） */
.p-detail__lead {
  font-family: var(--font-serif);
  font-weight: 700;
  /* c-heading-mid（SP 1.125rem／PC 1.3125rem）と紛れないよう、見出しより一回り大きくする */
  font-size: 1.25rem;
  color: var(--color-primary);
}

/* 紹介文の改行（2行）はPCのみ。SPでは行幅が足りず不自然な位置で
     折り返されるため、強制改行を消して自然な折り返しに任せる（c-nav__link-break と同じ手法） */
.p-detail__lead-break {
  display: none;
}

/* 紹介文・本文段落の後に略年譜見出し（c-heading-mid）が続く場合の間隔。
   p-detail のブロック間隔（40px）に合わせる */
.p-detail__body > * + .c-heading-mid {
  margin-top: 40px;
}

/* 略歴。「年号／月／事項」の3カラムで面を揃える。
   小見出し「略歴」は c-heading-mid を使用する。
   カラム幅はem指定（文字サイズ変更に追従）。全行で同じ幅を使うため面が揃う */
.p-detail__chronology {
  margin-top: 20px; /* c-heading-mid（下線罫）との間隔。rule-of-lawのパネル項目と同等の間合い */
  line-height: 2; /* 行が詰まって見えないよう年譜のみ広めにする */
}

/* SP：年号を1行目に全幅で表示し、その下に「月　事項」を1行で置く2段組み。
   同じ年の続き行（年号セルが空）は年号行が高さ0で消え、月の行だけが年号の下に
   連なるため、どの月がどの年かのまとまりが分かる。
   タブレット以上で「年号／月／事項」の3カラム1行に切り替える */
.p-detail__chronology-row {
  display: grid;
  /* 1列目は月（2.2em）＋約0.5emの字下げ。右揃えで「4月」「12月」の「月」の位置を揃える */
  grid-template-columns: 2.7em 1fr;
  column-gap: 0.75em; /* 月と事項の間 */
}

/* 年号は全幅の行。空のとき（同年続き行）は行ボックスが生成されず高さ0になる */
.p-detail__chronology-year {
  grid-column: 1 / -1;
}

/* 年のまとまりを罫線でも区切る（SP・PC共通）。年号が入っている行＝新しい年の開始行の
   上に区切り線を引く（同年続き行には引かない）。:has() は対応環境（各ブラウザ最新版）で使用可。
   色はTOPカード等と同じ控えめなグレーの区切り線を流用 */
.p-detail__chronology-row:has(.p-detail__chronology-year:not(:empty)):not(:first-child) {
  border-top: 1px solid var(--color-border-card);
  margin-top: 0.4em;
  padding-top: 0.4em;
}

/* 月は右揃えにして「4月」「12月」の「月」の位置を揃える */
.p-detail__chronology-month {
  text-align: right;
}

/* 年の数字を2桁分の幅で右揃えにし、1桁の年（大正6年）と2桁の年（明治30年）の
     「年」以降の位置を揃える */
.p-detail__chronology-yearnum {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
}

/* 事項はSPでは2列目（月の隣）。折り返し行も2列目に収まるためぶら下げ字下げになる */

@media (min-width: 768px) {
  .p-detail__chronology-row {
    /* 年号「明治30年（1897年）」＝9.69em（PC・字間含む）／ 月「12月」＝2.2em。
       カラム内に余りが出ると年↔月の見た目の余白が広がるため、この値ぴったりに設定する */
    grid-template-columns: 9.7em 2.2em 1fr;
    column-gap: 0.25em; /* 年と月の間は小さめに空ける */
  }

  .p-detail__chronology-year {
    grid-column: auto; /* 1列目に戻す */
  }

  .p-detail__chronology-text {
    padding-left: 1.25em; /* 月と内容の間は年・月間（0.25em）より明確に大きく空ける（計1.5em） */
  }
}

@media (min-width: 1024px) {
  .p-detail__body,
  .c-prose {
    font-size: var(--fs-body);
    letter-spacing: var(--tracking-md);
  }

  .p-detail__lead {
    font-size: 1.5rem;
  }

  .p-detail__lead-break {
    display: inline;
  }
}

/* 動画つき詳細（巨人1・巨人2）：YouTubeサムネイルへのリンク */
.p-detail__video {
  display: block;
  width: 100%;
  color: var(--color-primary);
  text-align: center;
}

/* サムネイルと再生ボタンを重ねるための親要素 */
.p-detail__video-thumb-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* サムネイル画像 */
.p-detail__video-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9; /* PC(960/540)・SP(560/315)いずれも16:9 */
  object-fit: cover;
  /* プレースホルダー背景色は変数化せず直値で記述する */
  background-color: #c4c4c4;
  transition: opacity 0.2s ease;
}

/* 注記（p-detail__media-note）の配置基準 */
.p-detail__media {
  position: relative;
}

/* デザイン上の注記。不要な場合はHTML側のブロックごと削除する */
.p-detail__media-note {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 0 16px;
  color: #000000;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .p-detail__media-note {
    gap: 40px;
    font-size: 1.25rem;
  }
}

/* サムネイル中央の再生ボタン */
.p-detail__video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  border-radius: 8px;
  background-color: rgba(91, 11, 12, 0.9);
  transform: translate(-50%, -50%);
  transition: background-color 0.2s ease;
  pointer-events: none;
}

/* 再生ボタン内の白い三角形 */
.p-detail__video-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid #ffffff;
  transform: translate(-50%, -50%);
}

/* YouTubeへのリンク文言 */
.p-detail__video-label {
  display: block;
  width: fit-content;
  margin: 10px auto 0;
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  line-height: var(--lh-button);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* 外部サイト・別ウィンドウで開く旨の注記 */
.p-detail__video-note {
  display: block;
  margin-top: 2px;
  color: var(--color-text-base);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .p-detail__video-label {
    font-size: var(--fs-body);
  }
}

/* マウス操作時のホバー表示 */
@media (hover: hover) {
  .p-detail__video:hover {
    cursor: pointer;
  }

  .p-detail__video:hover .p-detail__video-thumb {
    opacity: 0.85;
  }

  .p-detail__video:hover .p-detail__video-icon {
    background-color: var(--color-primary-hover);
  }

  .p-detail__video:hover .p-detail__video-label {
    color: var(--color-primary-hover);
  }
}

/* 状態定義は c-btn と同じ構成（黄枠＋外側にえんじの輪郭）に揃える */
.p-detail__video:focus,
.p-detail__video:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--color-focus-outline);
}

.p-detail__video:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* アクティブ：全コンポーネント共通ルール（要素1px下）に揃える */
.p-detail__video:active {
  transform: translateY(1px);
}

/* 施策（取組1〜3）の詳細：画像2枚が縦に並ぶ構成。
   画像どうしの間隔40pxは .p-detail の gap がそのまま効く。
   実素材（A4横のポスター画像）は端まで情報がありトリミングできないため、
   960/690 枠でのトリミング（object-fit: cover）はせず、原寸比率のまま全幅で表示する */
.p-detail__figure {
  display: block;
  width: 100%;
  height: auto;
  background-color: #c4c4c4;
}

/* 取組画像のカード囲み。
   デジタルアーカイブの c-archive-card と同じ意匠（角丸・白背景・padding15px・影なし・
   画像とPDFダウンロードの間隔10px）で、取組画像とPDFダウンロードを1枚のカードに収める */
.p-detail__media--card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  border-radius: var(--radius-card);
  background: var(--color-bg-card);
}

/* カード内ではPDFダウンロードとの間隔を上のgap（10px＝アーカイブと同じ）に任せる */
.p-detail__media--card .p-detail__pdf {
  margin-top: 0;
}

/* 取組画像の拡大リンク：クリックでモーダル拡大（JS）。JS無効時はhrefの原寸画像を直接開く
   （仕組み・状態定義は c-archive-card__thumb-link と同一構成） */
.p-detail__figure-link {
  display: block;
  line-height: 0; /* インライン画像下の余白を除去 */
}

@media (hover: hover) {
  .p-detail__figure-link:hover {
    opacity: 0.85; /* 影は付けず、わずかな不透明度でクリック可能を示す */
    cursor: pointer;
  }
}

/* フォーカス：他コンポーネントと同じ2色構成（黄枠＋えんじリング） */
.p-detail__figure-link:focus,
.p-detail__figure-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--color-focus-outline);
}

.p-detail__figure-link:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* アクティブ：全コンポーネント共通ルール（要素1px下）に揃える */
.p-detail__figure-link:active {
  transform: translateY(1px);
}

/* 取組ポスター画像の直下に置くPDFダウンロード。
   リンク自体は rule-of-law のPDFダウンロードと同じ c-link--download を使用。
   画像とセットで1ブロックに見えるよう p-detail__media の内側に置き、間隔は狭めにする */
.p-detail__pdf {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* 動画なし詳細（巨人3・4、法曹1〜3）：肖像・イメージ画像のみ。
   16:9枠でのトリミングはせず、原写真の専用画像（{slug}-detail.jpg・幅1000px）を
   原寸比率のまま中央揃えで縮小表示する（一覧カード用のトリミング版（432×367）とは別ファイル） */
.p-detail__portrait {
  display: block;
  /* 原寸のまま中央揃え表示（拡大しない）。画像が500pxより大きい場合と
     画面が画像より狭い場合のみ縮小する（コンテナ幅と500pxの小さい方でキャップ） */
  width: auto;
  max-width: min(100%, 500px);
  height: auto;
  margin: 0 auto;
  background-color: #c4c4c4;
}

/* PCでは本文表示領域（960px）の40%（＝384px）を上限に縮小する
   （SP・タブレットは上の500px上限のまま） */
@media (min-width: 1024px) {
  .p-detail__portrait {
    max-width: min(100%, 384px);
  }
}

.p-detail__back {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ---- 4-3. p-links（リンク集） ---- */

.p-links {
  display: flex;
  flex-direction: column;
  gap: 50px; /* 各セクションの下余白 */
  width: 100%;
}

.p-links__section {
  display: flex;
  flex-direction: column;
  gap: 30px; /* 見出しとリストの間 */
}

.p-links__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* 各リンクの前に「・」を付けてリスト化し、約1字下げる。
     ::before ではなくリストマーカーで実装する（スクリーンリーダーに記号として読み上げさせないため）。
     「・」は1em幅のため、padding 2em のうち 1em〜2em にマーカー、2em からリンクが始まる */
  list-style: "・";
  padding-left: 2em;
}

@media (min-width: 1024px) {
  .p-links {
    gap: 80px;
  }

  .p-links__section {
    gap: 40px;
  }
}

/* ---- 4-4. p-rule-of-law（rule-of-law.html：パネル展示＋デジタルアーカイブ） ---- */

.p-rule-of-law {
  display: flex;
  flex-direction: column;
  gap: 80px; /* パネル展示とデジタルアーカイブの間 */
  width: 100%;
}

/* パネル展示 */

.p-panel__section {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
}

.p-panel__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.p-panel__list {
  list-style: decimal;
  padding-left: 24px;
  color: var(--color-text-base);
  font-family: var(--font-sans);
  font-size: 1rem;
  letter-spacing: 0.48px;
  line-height: 2;
}

@media (min-width: 1024px) {
  .p-panel__section {
    gap: 40px;
  }

  .p-panel__list {
    padding-left: 27px;
    font-size: var(--fs-body);
    letter-spacing: var(--tracking-md);
  }
}

/* デジタルアーカイブ */

.p-archive__section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.p-archive__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 100%;
}

/* 大容量PDFの注意書き。カード（白枠）の外・直下に置く。
   親のgap 26pxをマイナスマージンで詰めて、カードとの間隔を実質12pxにする */
.p-archive__note {
  max-width: 38em;
  margin-top: -14px;
  font-size: 0.875rem;
  color: var(--color-text-base);
  line-height: 1.7;
}

@media (min-width: 1024px) {
  .p-archive__item {
    gap: 40px;
  }
}

/* ---- 4-4. p-about（企画の趣旨：装飾パネル） ----
   深緑（#0f1b0d）にダマスク柄を不透明度3%で重ねた背景＋上下に金色の飾り罫。
   柄はbg-damask.jpgに合成済み（表示1280×960でタイル）。
   飾り罫は装飾のため擬似要素の背景画像で実装する */
.p-about {
  padding: 40px 20px;
  border: 6px solid #c59849; /* 金色の枠線。PC（1024px以上）では10pxに切り替え */
  background-color: #0f1b0d;
  background-image: url("../images/about/bg-damask.jpg");
  background-size: 1280px 960px;
  background-position: left top;
}

.p-about::before,
.p-about::after {
  content: "";
  display: block;
  height: 40px;
  background: url("../images/about/ornament-line.png") no-repeat center / contain;
}

.p-about::before {
  margin-bottom: 30px;
}

.p-about::after {
  margin-top: 30px;
  transform: scaleY(-1); /* 下の飾り罫は上下反転（デザインどおり、上の罫の鏡像） */
}

/* パネル内の本文は白＋ひと回り大きく（SP 16px→18px、PC 18px→20px）。
   太字・下線（u-underline）は色を継承するため指定不要 */
.p-about .c-prose {
  color: var(--color-text-white);
  font-size: 1.125rem;
}

@media (min-width: 1024px) {
  .p-about {
    padding: 60px 70px;
    border-width: 10px;
  }

  .p-about::before,
  .p-about::after {
    height: 71px;
  }

  .p-about::before {
    margin-bottom: 60px;
  }

  .p-about::after {
    margin-top: 60px;
  }

  .p-about .c-prose {
    font-size: 1.25rem;
  }
}

/* ============================================
   5. Utility
   ============================================ */

/* 視覚的に隠し、スクリーンリーダーには読み上げさせる（画像alt相当のテキスト提供用）。
   外部サイト・別ウィンドウで開く旨の告知など、視覚デザイン上は出さないが
   支援技術には伝える必要がある文言に用いる */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 本文中の下線強調。<strong class="u-underline"> の形で使用する */
.u-underline {
  text-decoration: underline;
  text-underline-offset: 0.2em; /* 和文で文字に下線が重ならないよう少し離す */
}

/* ============================================
   6. Print
   ============================================ */

/* 印刷対応。
   ・ナビゲーション類を隠し、本文＋パンくずを1カラムで印刷する
   ・配色は画面のまま維持する：
     ブラウザの「背景のグラフィックス」チェックON → 画面と同等のカラー印刷／
     OFF → ブラウザが背景（背景色・背景画像）だけを自動で外し、白背景の印刷になる。
     チェック状態はCSSから検知できないため、背景が消えても読めるよう
     白文字要素にのみ可読化処理を施す（下の「背景OFF対策」参照）
   ・print-color-adjust: exact は使用しない（チェックOFFでも背景が強制印刷され、
     ON/OFFの切り替えができなくなるため） */
@media print {

  @page {
    margin: 15mm;
  }

  /* ---- 非表示にする要素 ----
     ・l-header：上部リンクバー（追従ヘッダー）とSP用ハンバーガーボタン一式
     ・l-skip-link：本文へスキップ（画面外要素のため）
     ・p-detail__back：「一覧へ戻る」ボタン
     ・c-modal：デジタルアーカイブ拡大モーダル（open状態のまま印刷される事態を防ぐ。
       サムネイル側は通常リンクなのでそのまま印刷される）
     ※パンくず（c-breadcrumb）は印刷しても有用なため残す */
  .l-header,
  .l-skip-link,
  .p-detail__back,
  .c-modal {
    display: none !important;
  }

  /* p-about（企画の趣旨の装飾パネル）：パネル本体（金色ボーダー・余白・背景）は画面どおり。
     飾り罫（擬似要素・背景画像）だけは、背景OFF時に確保領域が空白として残るため常に非表示にする */
  .p-about::before,
  .p-about::after {
    display: none;
  }

  /* パネル内の本文（画面では深緑地に白文字）は、印刷では黒文字＋半透明の白プレートにする
     （ヒーロー・見出しバーと同じ方針。白文字のままだと背景OFF時にChromeが
     薄いグレー（#ABABAB）へ自動置換してしまい、長文の本文では特に読みにくいため） */
  .p-about .c-prose {
    color: #000;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 2pt;
    padding: 10pt 12pt;
  }

  /* 一覧カード（巨人・法曹・取組）の四隅飾り（擬似要素・背景画像）は印刷では非表示にする。
     背景OFF時に飾りの領域が白い帯として描画され、枠線の上下（10pxのうち内側6px）を
     覆い隠してしまうため（p-about の飾り罫と同じ「印刷では細部の装飾を省く」方針）。
     えんじの枠線10pxと内側の金線1pxは、両モードとも四辺すべて印刷される */
  .c-card::before,
  .c-card::after {
    display: none;
  }

  /* ---- 文字サイズ：pt指定（A4での可読性基準） ---- */
  body {
    font-size: 10.5pt;
    line-height: 1.7;
  }

  .l-hero__title {
    font-size: 16pt;
  }

  .l-hero__subtitle {
    font-size: 12pt;
  }

  .c-heading-bar__text {
    font-size: 13pt;
  }

  .c-heading-mid {
    font-size: 12pt;
  }

  /* ---- TOPのヒーロー（ロゴ＋キャッチコピー）：画面幅によらず紙面用の配置に固定 ----
     macOS Safari は印刷時も画面幅のメディアクエリ（min-width: 1024px）を適用したまま、
     紙面幅（約680px）で組版する。このときPC用のロゴ絶対配置（960px幅基準の left 計算）では
     ロゴが紙面の左外へはみ出し、キャッチコピーもPC用の42px／28pxになるため、
     SP用の縦積みと同じ指定をここで明示し、どのブラウザでも同じ紙面にする */
  .l-hero--top {
    height: auto;
    min-height: 540px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 20px 20px 60px;
    background-position: center bottom;
  }

  .l-hero--top .l-hero__container {
    padding: 0;
  }

  .l-hero__logo {
    position: relative;
    left: auto;
    top: auto;
    height: 120px;
    margin-bottom: 10px;
  }

  .l-hero--top .l-hero__title {
    font-size: 16pt;
    letter-spacing: 1.2px;
  }

  .l-hero__title-sub {
    font-size: 12pt;
    letter-spacing: normal;
    text-align: justify;
    text-align-last: justify;
  }

  /* ---- レイアウト：A4幅に収まる1カラム ---- */
  /* 左右は画面と同じ20pxの余白を残す（コンテンツ幅ぴったりで印刷しない。
     ヒーロータイトルの字下げ（l-hero の padding 20px）とも左端が揃う） */
  .l-container {
    max-width: 100%;
  }

  /* flexコンテナはページ分割（改ページ）の挙動が不安定なため、印刷時は通常ブロックにする。
     子要素の間隔はgapの代わりにマージンで再現する */
  .l-main__inner,
  .p-card-grid__item,
  .c-top-card,
  .c-card {
    display: block;
  }

  .l-main__inner {
    padding-top: 8pt;
    padding-bottom: 0;
  }

  .l-main__inner > * + * {
    margin-top: 12pt;
  }

  /* 取組画像カード（future詳細：画像＋PDFダウンロードを囲む白カード）も同じ理由で通常ブロックにする。
     flexのままだと macOS Safari が下の break-inside: avoid を守らず、
     カードがページ境界で上下に分断される。gap（10px）はマージンで再現する */
  .p-detail__media--card {
    display: block;
  }

  /* カードを並べる詳細ページ本体（.p-detail）も flex のため、同じ理由で通常ブロックにする。
     Safari は flex の子要素に指定した break-inside: avoid も守らないため、
     親が flex のままだとカードがページ境界で分断される。gap（40px）はマージンで再現する */
  .p-detail {
    display: block;
  }

  .p-detail > * + * {
    margin-top: 40px;
  }

  .p-detail__media--card > * + * {
    margin-top: 10px;
  }

  .c-top-card__heading {
    margin-top: 6pt;
  }

  /* ヒーローは画面と同じ帯（背景写真＋タイトル）のまま印刷する。
     写真は背景画像のため、背景OFF時はブラウザが自動で外す。
     枠線は常に印刷されるため、OFF時もヒーロー領域が枠として残る
     （ON時は写真の額縁として見える。色・太さは見出しバーの枠と同じで統一） */
  .l-hero {
    border: 1pt solid var(--color-heading-bar-bg);
  }

  /* 写真の上の暗いグラデーション（文字を読みやすくするための重ね）は印刷では外す。
     印刷では文字を白プレート＋黒文字にしているため不要なうえ、macOS の Safari・Firefox の
     PDF保存では半透明のグラデーションが不透明な黒として出力され、写真が真っ黒に覆われるため */
  .l-hero::after {
    display: none;
  }

  /* カードのサムネイルは紙面で1カード1ページを占有しないよう幅を抑える */
  .c-top-card__thumb,
  .c-card__thumb {
    width: auto !important;
    max-width: 180pt;
    height: auto !important;
  }

  /* 肖像写真（動画なし詳細5ページ）：縦長写真が break-inside: avoid とあわさって
     1ページ目に収まらず、本文ごと2ページ目へ送られてしまうため、紙面では幅を抑える
     （240pt≒A4版面の約45%。縦は比率どおり約340ptで、ヒーロー・見出しバーと合わせても
     1ページ目に収まる） */
  .p-detail__portrait {
    max-width: 240pt;
  }

  /* カードの枠・タイトル下線が紙面幅いっぱいに伸びないよう、
     カード幅を写真に沿わせる（画面表示のカードに近い見た目にする）。
     max-width＝写真180pt＋カードの左右padding・border相当。
     写真より長いタイトル・サブタイトルはこの幅で折り返す */
  .c-top-card,
  .c-card {
    width: fit-content;
    max-width: 205pt;
  }

  /* カードグリッド（TOPの6枚・一覧の3〜4枚）は1カラムに */
  .p-card-grid {
    display: block !important;
  }

  .p-card-grid__item + .p-card-grid__item {
    margin-top: 12pt;
  }

  /* 装飾アイコン（矢印・ダウンロード・外部リンク等の aria-hidden 要素）は非表示にする。
     いずれも背景画像のため印刷では絵が消え、幅だけ残った空箱がラベルの中央揃えを
     ずらす原因になる（例：PDFダウンロードの文字が書影の中央から左にずれる）。
     外部リンクである旨は a[href^="http"]::after のURL併記で伝わるため情報の欠落はない */
  .c-link__icon,
  .c-btn__icon,
  .c-card__icon,
  .c-top-card__icon,
  .c-nav__icon {
    display: none;
  }

  /* SP用の見出し強制改行（--break-sp）は印刷では解除する。
     印刷の版面幅（A4で約680px）がSPブレークポイント未満のためSP用指定が効いてしまうが、
     紙面では1行に収まるため改行しない */
  .c-heading-mid--break-sp .c-heading-mid__seg {
    display: inline-block;
  }

  /* ---- 背景OFF対策（白文字要素の黒文字化＋白プレート：u-print-plate） ----
     印刷では白文字要素（ヒーローのタイトル・サブタイトル、見出しバーの文字）を常に黒文字にし、
     文字の背後に半透明の白プレートを敷く。プレートは背景のため
     「背景のグラフィックス」ONのときだけ印刷され、
     ON＝写真・バーの上に白プレート＋黒文字／OFF＝白紙に黒文字、のどちらでも読める。
     ※白文字のまま印刷する構成は不可：Chromiumは背景OFF時に白文字を自動で
       薄いグレー（#ABABAB）に置き換えるため黒にできず、
       background-clip: text の白も背景OFFで消えない */
  .u-print-plate {
    color: #000 !important;
    text-shadow: none;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 2pt;
    padding: 2pt 6pt;
  }

  /* プレート内のルビ（ヒーローサブタイトルの「しあわせ」）も黒文字にする。
     ルビには画面用に白色を個別に指定しているため、上の黒文字が引き継がれない */
  .u-print-plate rt {
    color: #000;
  }

  /* ルビを含むプレートは、ルビが上端からはみ出さないよう上の余白を広げる */
  .u-print-plate:has(rt) {
    padding-top: 8pt;
  }

  /* 見出しバー：背景OFF時の構造補助（バーと同色の枠線。ONでは背景色に溶けて見えない） */
  .c-heading-bar {
    border: 1pt solid var(--color-heading-bar-bg);
  }

  /* ---- 改ページ制御 ----
     「見出し直後で改ページしない」は、直後に本文が続く見出しバー・中見出しに限定する。
     h2〜h4への一括指定にすると、カード末尾のタイトル（h2）が「次のカードと離れるな」
     という結合を連鎖させ、カード群全体が次ページへ送られてしまう（1ページ目が
     ほぼ空白になる）。h1（ヒーロー内タイトル）も同様の理由で対象外 */
  .c-heading-bar,
  .c-heading-mid {
    break-after: avoid; /* 見出しの直後で改ページしない */
    break-inside: avoid;
  }

  /* ロゴとタイトルの間で改ページされないよう、ヒーローはひとまとまりで扱う */
  .l-hero {
    break-inside: avoid;
  }

  .c-card,
  .c-top-card,
  .c-archive-card,
  .p-detail__chronology-row {
    break-inside: avoid; /* カード・年譜1行の途中で改ページしない */
  }

  /* 詳細ページの画像ブロック（取組ポスター・肖像・動画サムネ）は途中で改ページしない。
     macOS Safari の印刷でポスター画像がページ境界で分割される事象への対策。
     p-detail__media に指定することで、画像とその直下の
     PDFダウンロードリンクもセットで同一ページに収まる。page-break-inside は旧構文の保険 */
  .p-detail__media,
  .p-detail__figure,
  .p-detail__portrait {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 書影カードがページ境界で分割されると、次ページへ送られた「PDFダウンロード」の
     ラベルが1〜2文字ずつの縦割れになる（Firefoxで発生）。
     上のbreak-inside:avoidで分割自体を防いだうえで、保険としてラベルの折り返しも禁止する */
  .c-link--download .c-link__label-row {
    white-space: nowrap;
  }

  /* ---- リンクURLの併記 ----
     外部リンク（絶対URL）のみ併記する。内部リンクは相対パス（./xxx.html）で
     紙面上の情報価値がないため対象外。
     TOPページのカード（.c-top-card）は除外する（リンク集の c-link--external は併記のまま） */
  a[href^="http"]:not(.c-top-card)::after {
    /* URLはリンク名の下の行に単独で表示する */
    content: "(" attr(href) ")";
    display: block;
    font-size: 8pt;
    word-break: break-all;
  }

  /* c-link は画面用が inline-flex のため、block の ::after が同じ行に並んでしまう。
     印刷時はブロック化して「リンク名／次の行にURL」の縦積みにする */
  .c-link {
    display: block;
  }
}