/* ==========================================================================
   日本史の友 — Chic Japanese Edition (2026-07)
   墨・生成り・朱を基調に、装飾より文字と余白を優先する静かな意匠。
   ライト・ダーク両テーマの実効トークンはここを単一の正とする。
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root,
[data-theme="light"] {
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "MS PMincho", serif;
  --sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Helvetica Neue", sans-serif;
  --radius: 4px;
  --radius-lg: 6px;
  --radius-pill: 3px;
  /* 線の太さは3段階だけ（docs/DESIGN.md「線の太さ」） */
  --rule: 1px;        /* 罫：区切り・表。色を付けない */
  --rule-color: 2px;  /* 色線：時代色・朱を付ける線 */
  --rule-head: 4px;   /* 見出し線：部・章の見出しの縦線 */
  --accent: #9b2f2b;
  --accent-dark: #74211f;
  --accent-tint: #eee0d9;
  --ink: #25231f;
  /* 補助文の色。ライトで最も濃い面（--paper-deep）の上でも 4.5:1 を満たす明るさ。
     これより明るくすると、ヒーロー域や図版まわりの説明文が基準を下回る。 */
  --mute: #696359;
  --body-text: var(--ink);
  --supplement-text: var(--mute);
  --figure-caption: var(--mute);
  --paper: #f7f4ed;
  --paper-deep: #e8e0d2;
  --card-bg: #faf8f2;
  --hero-bg: #ebe4d7;
  --line: #d5ccbc;
  --line-strong: #b9ad9b;
  --shadow-soft: 0 8px 24px rgba(46, 39, 28, 0.07);
  --shadow-hover: 0 16px 34px rgba(46, 39, 28, 0.12);
  /* キーボード操作時だけ出る輪郭。半透明だと下地に沈んで居場所が分からなくなるため
     不透明にする。内側の1本で要素との境を作り、外側の1本で輪郭を見せる。
     実際の色は --accent-text 経由でテーマごとに切り替わる。 */
  --focus-ring: 0 0 0 1px var(--paper), 0 0 0 4px var(--accent-text);
  --header-bg-soft: rgba(29, 28, 25, 0.97);
  --footer-bg: #1d1c19;
  --footer-fg: #eee8dc;
  --footer-fg-muted: rgba(238, 232, 220, 0.67);
  --footer-link: #eee8dc;
  --footer-divider: rgba(238, 232, 220, 0.16);
  --era-tsushi: #8a6a31;
  --era-kodai: #365a68;
  --era-chusei: #4d6755;
  --era-kinsei: #92342e;
  --era-kingendai: #5f5368;
  --header-control-size: 44px;
  --content-gutter: 16px;

  /* --- テーマに依存しない色 ---
     ヘッダーは両テーマとも暗色のため、その上の文字色は共通で持つ。
     図版の下地も、透過画像や古文書の可読性を優先して常に白とする。 */
  --header-fg: #f2ede3;
  --header-fg-strong: #ffffff;
  --header-accent: #d7b8ae;
  --figure-bg: #ffffff;
  /* 検索ボタンの下地は両テーマとも暗色なので、その上の文字は常に白。
     アクセント色の上に乗るホバー時だけ --on-accent に切り替える。 */
  --search-btn-fg: #ffffff;

  /* --- テーマごとに向きが変わる色 ---
     ライトは「黒へ寄せると強調」、ダークは「白へ寄せると強調」になるため、
     color-mix の相手をトークン側で切り替える。
     --on-accent は、アクセントがライトで暗い朱、ダークで明るい朱になるため、
     文字色も明暗を反転させないとコントラストが確保できない。 */
  --on-accent: #ffffff;
  /* 朱を「文字色」として使うとき専用。背景・境界には --accent をそのまま使う。
     ライトの朱は暗いのでそのまま読めるが、ダークの朱は明るく、暗い下地の上で
     小さな文字にすると 3.8〜4.4:1 までしか出ない。ダークだけ明るい方へ寄せる。 */
  --accent-text: var(--accent);
  --heading-strong: color-mix(in srgb, var(--ink) 92%, #000);
  --search-btn-bg: color-mix(in srgb, var(--ink) 88%, #000);
  --search-btn-line: color-mix(in srgb, var(--ink) 78%, #000);
  color-scheme: light;
}

[data-theme="dark"] {
  --accent: #c76d62;
  --accent-dark: #df9187;
  --accent-tint: #3b2925;
  --ink: #ece6da;
  --mute: #aaa194;
  --body-text: var(--ink);
  --supplement-text: var(--mute);
  --figure-caption: var(--mute);
  --paper: #1c1a17;
  --paper-deep: #12110f;
  --card-bg: #25221d;
  --hero-bg: #201d19;
  --line: #413a31;
  --line-strong: #5a5043;
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-hover: 0 16px 34px rgba(0, 0, 0, 0.4);
  /* --focus-ring はライト側の定義が --paper / --accent-text 経由で
     ダークの値を自動的に拾うため、ここでは上書きしない。 */
  --header-bg-soft: rgba(16, 15, 13, 0.97);
  --footer-bg: #0f0e0c;
  --footer-fg: #ece8e0;
  --footer-fg-muted: rgba(236, 232, 224, 0.65);
  --footer-link: #ece8e0;
  --footer-divider: rgba(255, 255, 255, 0.12);
  --era-tsushi: #b59656;
  --era-kodai: #7294a1;
  --era-chusei: #78927f;
  --era-kinsei: #c76d62;
  --era-kingendai: #9485a0;

  /* ライトの ink は暗色、ダークの ink は明色。同じ色計算を使い回すと
     ダークで検索ボタンが明るくなり、白文字が読めなくなる。向きを反転させる。 */
  /* ダークのアクセント(#c76d62)・アクセント濃(#df9187)は明るい朱のため、
     白文字では 3.63:1 / 2.46:1 しか出ない。暗い紙色を文字に使う。 */
  --on-accent: var(--paper-deep);
  --accent-text: var(--accent-dark);
  --heading-strong: color-mix(in srgb, var(--ink) 92%, #fff);
  --search-btn-bg: var(--line-strong);
  --search-btn-line: var(--line);
  color-scheme: dark;
}

html {
  scroll-padding-top: 92px;
  background: var(--paper);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

::selection {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

body {
  font-family: var(--sans);
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 58%, var(--paper) 100%);
  color: var(--body-text);
  font-size: 15.5px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* 本文へスキップ（キーボードのTabキーで最初にフォーカスした時だけ現れる） */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(calc(-100% - 14px));
  transition: transform 0.15s ease;
}
.skip-link:focus {
  transform: none;
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
}
a:hover { color: var(--accent-text); }

a, button, input { -webkit-tap-highlight-color: transparent; }
/* summary（記事の目次の開閉）や tabindex 付き要素もキーボードで到達できる。
   取りこぼすとブラウザ既定の細い輪郭になり、他と見え方が揃わない。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ========== ヘッダー ========== */
#header {
  background: var(--header-bg-soft);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(14px);
}
#header .inner-header {
  width: 95%;
  max-width: 1280px;
  margin: 0 auto;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 16px;
}
#header .logo {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
#header .logo a {
  color: var(--ink) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--card-bg) 72%, var(--accent-tint));
  position: relative;
  top: 1px;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
#header .logo .logo-icon { top: 0; }
#header .logo a:hover {
  color: var(--accent) !important;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--card-bg) 56%, var(--accent-tint));
  box-shadow: 0 4px 12px rgba(73, 60, 43, 0.08);
}
#header nav.pc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#header nav.pc > a {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  transition: background 0.18s ease, color 0.18s ease;
}
#header nav.pc > a:hover {
  background: var(--accent-tint);
  color: var(--accent-text);
}

/* ========== テーマトグルボタン（theme.js が注入） ========== */
#theme-toggle {
  background: none;
  border: 1.5px solid var(--line-strong);
  color: var(--mute);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  margin-left: 8px;
  line-height: 1;
  vertical-align: middle;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
#theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-tint);
}
#theme-toggle .theme-icon {
  font-size: 15px;
  line-height: 1;
}
#theme-toggle .theme-label {
  margin-left: 4px;
}

/* ========== コンテナ ========== */
#container {
  width: 95%;
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
  padding: 36px var(--content-gutter) 72px;
}

/* ========== サイドバー ========== */
#sub {
  float: left;
  width: 230px;
  padding: 22px 20px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: sticky;
  top: 92px;
  align-self: flex-start;
}
#sub h3 {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-text);
  margin: 22px 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent-tint);
  letter-spacing: 0.08em;
}
#sub h3:first-child { margin-top: 0; }
#sub ul { list-style: none; margin-bottom: 12px; }
#sub ul li {
  font-size: 13.5px;
  padding: 2px 0;
}
#sub ul li a {
  color: var(--ink);
  text-decoration: none;
  display: block;
  padding: 6px 10px;
  margin: 0 -10px;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}
#sub ul li a:hover {
  color: var(--accent-text);
  background: var(--accent-tint);
}

/* サイドバー目次 現在地・アクティブ強調 */
#sub ul li a.active,
#sub ul li a[aria-current="page"] {
  color: var(--accent-text);
  font-weight: 700;
  background: var(--accent-tint);
}

/* ========== メインコンテンツ ========== */
#inner {
  margin-left: 230px;
  min-height: 600px;
  min-width: 0;
  padding-left: 36px;
}

.article-body {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ========== トップページ：フルブリード化 ========== */
#container:has(.hero-home) {
  width: 100%;
  max-width: none;
  padding: 0 0 72px;
}
#container:has(.hero-home) #sub { display: none; }
#container:has(.hero-home) #inner {
  margin-left: 0;
  padding-left: 0;
}
#container:has(.hero-home) #inner > .home-section-head,
#container:has(.hero-home) #inner > .news-list,
#container:has(.hero-home) #inner > .card-grid,
#container:has(.hero-home) #inner > .hero-feature,
#container:has(.hero-home) #inner > .point-box {
  width: min(1180px, calc(100% - 36px));
  margin-left: auto;
  margin-right: auto;
}

/* ========== ヒーロー（トップページ）========== */
/* Safari のフルページスクリーンショットでは、ヒーロー全面の layered gradients
   や mask-image が黒く合成されることがある。背景は単色にして安全側へ倒す。 */
.hero-home,
#inner > .hero-home {
  position: relative;
  overflow: visible;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.66fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  margin: 0 0 64px;
  padding: clamp(58px, 8vw, 108px) clamp(20px, 6vw, 88px) clamp(50px, 7vw, 90px);
  background: var(--hero-bg);
  background-image: none;
  border-bottom: 1px solid var(--line);
}
.hero-home::before,
#inner > .hero-home::before {
  content: none;
}
.hero-home::after,
#inner > .hero-home::after {
  content: "";
  position: absolute;
  left: clamp(20px, 6vw, 88px);
  right: clamp(20px, 6vw, 88px);
  bottom: -1px;
  height: 1px;
  background: var(--line);
  opacity: 1;
}
.hero-home > * { position: relative; z-index: 1; }

.hero-home .hero-copy {
  max-width: 780px;
  position: relative;
  z-index: 40;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 6px 14px;
  background: color-mix(in srgb, var(--card-bg) 70%, var(--accent-tint));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: var(--radius-pill);
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-home h1,
#inner > .hero-home h1 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  font-family: var(--serif);
  color: var(--ink);
  font-size: clamp(44px, 7vw, 92px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0;
}
.hero-home h1 .logo-icon {
  width: clamp(40px, 5.4vw, 72px);
  height: clamp(40px, 5.4vw, 72px);
  margin-right: 0;
  top: 0;
  border-radius: 18%;
  box-shadow: 0 14px 28px rgba(200, 16, 46, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.hero-home .tagline,
#inner > .hero-home .tagline {
  max-width: 660px;
  margin: 0 0 28px;
  color: var(--mute);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.95;
  font-weight: 600;
}

/* ヒーロー内 記事検索 */
.hero-search {
  position: relative;
  z-index: 1200;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  width: min(640px, 100%);
  padding: 8px;
  background: var(--card-bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  box-shadow: 0 18px 48px rgba(73, 60, 43, 0.11);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.hero-search:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring), var(--shadow-soft);
}
.hero-search input {
  min-width: 0;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 12px 12px 12px 20px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  outline: none;
}
.hero-search input:focus,
.hero-search input:focus-visible {
  outline: none;
  box-shadow: none;
}
.hero-search input::-webkit-search-decoration,
.hero-search input::-webkit-search-cancel-button,
.hero-search input::-webkit-search-results-button,
.hero-search input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.hero-search input::placeholder { color: var(--mute); }
.hero-search button {
  min-width: 96px;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 12px 24px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.hero-search button:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(200, 16, 46, 0.25);
}
.hero-search-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 8px;
  right: 8px;
  display: none;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  z-index: 1201;
  text-align: left;
}
.hero-search-results.visible { display: block; }
.hero-search-results a,
.hero-search-results .empty {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 18px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.hero-search-results a:last-child { border-bottom: 0; }
.hero-search-results a:hover { background: var(--accent-tint); }
.hero-search-results strong {
  font-family: var(--serif);
  font-size: 16px;
}
.hero-search-results span {
  color: var(--mute);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.hero-search-results .empty { color: var(--mute); font-size: 13px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 0;
}
.hero-actions .hero-stats {
  margin: 0;
}
.hero-stats div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 8px;
  min-height: 42px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--card-bg) 76%, var(--paper));
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 18px rgba(73, 60, 43, 0.06);
}
.hero-stats dt {
  color: var(--mute);
  font-size: 11px;
  font-weight: 800;
}
.hero-stats dd {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

/* ボタン */
.btn-primary {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 800;
  padding: 13px 28px;
  text-decoration: none;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-pill);
  transition: transform 0.18s ease, background 0.18s ease,
              border-color 0.18s ease, box-shadow 0.18s ease;
}
.btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(200, 16, 46, 0.25);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  background: var(--card-bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 800;
  padding: 13px 28px;
  text-decoration: none;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  transition: transform 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, box-shadow 0.18s ease;
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent-text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

/* ヒーロー右：4つの入口カード（時代カラーで彩る） */
.hero-feature {
  display: grid;
  gap: 12px;
}
.hero-feature-card {
  --feature-color: var(--accent);
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  min-height: 96px;
  padding: 18px 22px 18px 24px;
  color: var(--ink);
  text-decoration: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--feature-color) 10%, transparent), transparent 44%),
    var(--card-bg);
  border: 1px solid var(--line);
  border-left: 6px solid var(--feature-color, var(--accent));
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.hero-feature-card::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 16px;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  color: var(--feature-color);
  opacity: 0;
  transform: translateX(-6px) rotate(45deg);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.hero-feature-card:nth-child(1) { --feature-color: var(--era-kodai); }
.hero-feature-card:nth-child(2) { --feature-color: var(--era-tsushi); }
.hero-feature-card:nth-child(3) { --feature-color: var(--era-chusei); }
.hero-feature-card:nth-child(4) { --feature-color: var(--era-kingendai); }
.hero-feature-card:nth-child(5) { --feature-color: var(--era-kinsei); }
.hero-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--feature-color, var(--accent));
}
.hero-feature-card:hover::after {
  opacity: 1;
  transform: translateX(0) rotate(45deg);
}
.hero-feature-card strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 900;
  line-height: 1.2;
}
.hero-feature-card span {
  color: var(--mute);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}

/* ========== お知らせ（トップページ） ========== */
.news-list { display: grid; gap: 0; }
.news-list > .news-month {
  border-top: 1px solid var(--line-strong);
}
.news-list > .news-month:first-child {
  border-top: 0;
}
.news-month-title,
.news-month-archive > summary {
  min-height: var(--header-control-size);
  padding: 18px 0 12px;
  color: var(--body-text);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.news-month-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.news-month-title span,
.news-month-archive > summary small {
  color: var(--supplement-text);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.news-month-archive > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}
.news-month-archive > summary::-webkit-details-marker { display: none; }
.news-month-archive > summary::before {
  content: "›";
  color: var(--accent-text);
  font-family: var(--sans);
  transform: rotate(0);
  transition: transform 0.18s ease;
}
.news-month-archive[open] > summary::before {
  transform: rotate(90deg);
}
.news-month-archive > summary small {
  margin-left: auto;
}
.news-month-items .news-item:first-child,
.news-month-items .news-empty:first-child {
  border-top: 1px solid var(--line);
}
.news-item,
.news-empty {
  display: grid;
  grid-template-columns: 96px 64px minmax(180px, 0.72fr) minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid var(--line);
  transition: background 0.18s ease, color 0.18s ease;
}
.news-item:first-child,
.news-empty:first-child { border-top: 0; }
.news-item time {
  color: var(--mute);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.news-label {
  justify-self: start;
  padding: 3px 10px;
  background: var(--accent-tint);
  border-radius: var(--radius-pill);
  color: var(--accent-text);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.6;
  white-space: nowrap;
}
.news-item strong {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}
.news-body {
  color: var(--mute);
  font-size: 13px;
  line-height: 1.7;
}
a.news-item:hover strong { color: var(--accent-text); }
a.news-item:hover {
  background: color-mix(in srgb, var(--accent-tint) 42%, transparent);
}

/* ========== セクション見出し ========== */
.section-title {
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 900;
  margin: 64px 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-title::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 28px;
  background: var(--accent);
  border-radius: 5px;
}
.section-title a {
  color: inherit;
  text-decoration: none;
}
.section-title a:hover {
  color: var(--accent-text);
}

/* 部見出し（章節別目次） */
.part-title {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  line-height: 1.25;
  margin: 64px 0 20px;
  padding: 14px 20px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-left: 8px solid var(--accent);
  border-radius: var(--radius);
}

/* ========== カードグリッド ========== */
/* 注意: .card-grid 内のインデントは build.py が解析するため変更不可（HTML側） */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 56px;
}
.card {
  --card-era: var(--accent);
  background: var(--card-bg);
  padding: 26px 24px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* 上端に時代カラーのアクセントバー */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--card-era);
  opacity: 0.85;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--card-era) 45%, var(--line));
}
.card:hover h3 a { color: var(--card-era); }

/* 時代カラー（data-era 持ちは時代色、無印は朱） */
.card[data-era="tsushi"]    { --card-era: var(--era-tsushi); }
.card[data-era="kodai"]     { --card-era: var(--era-kodai); }
.card[data-era="chusei"]    { --card-era: var(--era-chusei); }
.card[data-era="kinsei"]    { --card-era: var(--era-kinsei); }
.card[data-era="kingendai"] { --card-era: var(--era-kingendai); }

/* 時代バッジ：色つきピル */
.card .era {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 3px 12px;
  margin-bottom: 14px;
  background: color-mix(in srgb, var(--card-era) 11%, transparent);
  border-radius: var(--radius-pill);
  color: var(--card-era);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.card h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 12px;
  line-height: 1.25;
}
.card h3 a {
  color: var(--ink);
  text-decoration: none;
  /* インラインの上下 padding は行の高さを変えないので、
     見た目はそのままで指で押せる範囲だけ広がる。 */
  padding: 3px 0;
  transition: color 0.18s ease;
}
#container:has(.hero-home) #inner > .card-grid > .card {
  min-height: 310px;
}
.card p {
  font-size: 13.5px;
  color: var(--mute);
  line-height: 1.8;
  margin-bottom: 18px;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.card .card-link {
  display: inline-flex;
  align-items: center;
  /* 指で押せる高さ（24px）を確保する。文字の位置は変わらない。 */
  min-height: 24px;
  font-size: 13px;
  font-weight: 800;
  color: var(--card-era);
  text-decoration: none;
  transition: opacity 0.18s ease;
}
.card .card-link:hover { opacity: 0.75; }
.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.card-foot .card-link { align-self: auto; }
.card .card-date {
  font-size: 11px;
  font-weight: 700;
  color: var(--mute);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* 公開日・更新日を縦に並べる（更新日を上、公開日を下）。 */
.card-dates {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

/* ========== 50音順索引 ========== */
.index-section {
  margin-bottom: 48px;
}
.index-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.index-item {
  --index-era: var(--accent);
}
.index-item[data-era="tsushi"]    { --index-era: var(--era-tsushi); }
.index-item[data-era="kodai"]     { --index-era: var(--era-kodai); }
.index-item[data-era="chusei"]    { --index-era: var(--era-chusei); }
.index-item[data-era="kinsei"]    { --index-era: var(--era-kinsei); }
.index-item[data-era="kingendai"] { --index-era: var(--era-kingendai); }
.index-item a,
.index-empty {
  display: grid;
  grid-template-columns: minmax(10em, 1.2fr) minmax(8em, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  min-height: 54px;
  padding: 11px 14px 11px 16px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-left: 5px solid var(--index-era);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(73, 60, 43, 0.05);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.index-item a:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--index-era) 45%, var(--line));
  box-shadow: var(--shadow-soft);
}
.index-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.35;
}
.index-reading,
.index-alias {
  color: var(--mute);
  font-size: 12px;
  line-height: 1.4;
}
.index-era {
  justify-self: end;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--index-era) 11%, transparent);
  color: var(--index-era);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.index-alias {
  grid-column: 2 / -1;
}
.index-empty {
  display: block;
  color: var(--mute);
  border-left-color: var(--line-strong);
}

/* ========== 記事ページ ========== */
.breadcrumb {
  font-size: 12.5px;
  color: var(--mute);
  margin-bottom: 28px;
}
/* インライン要素の上下 padding は行の高さを押し広げないため、
   見た目を変えずに指で押せる範囲だけを広げられる。 */
.breadcrumb a { color: inherit; text-decoration: none; padding: 6px 0; }
.breadcrumb a:hover { color: var(--accent-text); text-decoration: underline; }
.breadcrumb .sep { margin: 0 8px; opacity: 0.55; }

.article-header,
.article-body { max-width: 780px; }

.article-header {
  margin-bottom: 44px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.article-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 88px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}
.article-header .era-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  margin-bottom: 18px;
  background: var(--accent-tint);
  border-radius: var(--radius-pill);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.article-header h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 900;
  margin-bottom: 14px;
  line-height: 1.2;
  color: var(--ink);
}
.article-header .subtitle {
  font-size: 16.5px;
  color: var(--mute);
  font-weight: 600;
  line-height: 1.7;
  max-width: 720px;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--mute);
}
.article-meta span { white-space: nowrap; }
.article-meta span + span { padding-left: 14px; border-left: 1px solid var(--line-strong); }

.article-body { counter-reset: h2-counter; }
.article-body h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 31px);
  font-weight: 900;
  margin: 64px 0 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  line-height: 1.35;
  display: flex;
  align-items: baseline;
  gap: 14px;
  position: relative;
}
.article-body h2::before {
  counter-increment: h2-counter;
  content: counter(h2-counter, decimal-leading-zero);
  flex-shrink: 0;
  color: var(--accent-text);
  font-family: var(--sans);
  font-size: 0.6em;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.article-body h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 56px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}
.article-body h3 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 900;
  margin: 42px 0 14px;
  line-height: 1.45;
}
.article-body p {
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 2;
}
.article-body ul, .article-body ol {
  padding-left: 26px;
  margin-bottom: 24px;
  font-size: 15.5px;
}
.article-body li { margin-bottom: 10px; line-height: 1.9; }
.article-body strong { font-weight: 800; }

/* 強調は太字に統一。<em> も斜体ではなく太字扱い。
   重要語はいずれ解説記事へのリンクに育てる方針で、太字はその暫定マーカー */
.article-body em { font-style: normal; font-weight: 800; }

/* 引用 */
.article-body blockquote {
  margin: 30px 0;
  padding: 16px 22px;
  background: var(--card-bg);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--ink);
}
.article-body blockquote p:last-child { margin-bottom: 0; }

/* ポイントボックス（SUMMARY・かんたん要約など） */
.point-box {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 26px 30px;
  margin: 32px 0;
  position: relative;
  overflow: hidden;
}
.point-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--accent);
  opacity: 0.85;
}
.point-box .point-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-text);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.point-box p {
  font-size: 15px;
  line-height: 1.95;
  margin-bottom: 14px;
}
.point-box p:last-child { margin-bottom: 0; }

/* 本文末の関連記事 */
.related-articles {
  margin: 64px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
}
.related-articles h2 {
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.related-articles h2::before {
  content: "";
  flex-shrink: 0;
  width: 3px;
  height: 22px;
  background: var(--accent);
  border-radius: 0;
}
.related-articles .related-index-list { margin: 0; }
.related-articles[hidden] { display: none; }

/* ========== 記事内目次（スマホ用） ==========
   デスクトップは左サイドバーに目次があるため、小さい画面だけで表示する。 */
.article-toc {
  margin: 20px 0 0;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.article-toc summary {
  cursor: pointer;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-text);
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.article-toc summary::-webkit-details-marker { display: none; }
.article-toc summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s ease;
}
.article-toc[open] summary::before { transform: rotate(90deg); }
.article-toc ul {
  list-style: none;
  margin: 0;
  padding: 0 18px 10px;
}
.article-toc li { margin: 0; }
.article-toc a {
  display: block;
  padding: 9px 2px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
}
.article-toc a:hover { color: var(--accent-text); }
@media (min-width: 769px) {
  .article-toc { display: none; }
}

/* ========== 前後の記事ナビ（章節順） ========== */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.article-nav-link {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 18px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.article-nav-link.article-nav-next { align-items: flex-end; text-align: right; }
.article-nav-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.article-nav-dir {
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 800;
}
.article-nav-link strong {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}
.article-nav-link:hover strong { color: var(--accent-text); }
@media (max-width: 480px) {
  .article-nav { grid-template-columns: 1fr; }
  .article-nav-empty { display: none; }
  .article-nav-link.article-nav-next { align-items: flex-start; text-align: left; }
}

/* ========== 図版 ========== */
.article-figure {
  margin: 32px 0;
  text-align: center;
}
.article-figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--figure-bg);
}
.article-figure.portrait img {
  width: min(100%, 360px);
}
.article-figure figcaption {
  font-size: 13px;
  color: var(--figure-caption);
  margin-top: 10px;
  line-height: 1.6;
}
.article-figure.map-figure .map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-bg);
}
.article-figure.map-figure .map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ========== 年表 ========== */
.nenpyo-section-title {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 900;
  color: var(--ink);
  margin: 56px 0 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nenpyo-section-title::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 26px;
  background: var(--accent);
  border-radius: 5px;
}
.nenpyo-section-title:first-of-type { margin-top: 24px; }
.nenpyo-section-lead {
  font-size: 14.5px;
  color: var(--mute);
  margin: 0 0 20px;
  line-height: 1.7;
}
.nenpyo-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 48px;
  box-shadow: var(--shadow-soft);
}
.nenpyo-table th {
  background: color-mix(in srgb, var(--accent) 6%, var(--card-bg));
  color: var(--accent-text);
  font-size: 11.5px;
  font-weight: 800;
  padding: 13px 16px;
  text-align: left;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--line);
}
.nenpyo-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  vertical-align: top;
  transition: background 0.15s ease;
}
.nenpyo-table tr:last-child td { border-bottom: none; }
/* 薄い縞模様で行を追いやすくする。hover の強調は縞より後に置いて優先させる */
.nenpyo-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--paper) 55%, transparent);
}
.nenpyo-table tbody tr:hover td { background: var(--accent-tint); }
.nenpyo-table .year {
  font-family: var(--serif);
  font-weight: 900;
  white-space: nowrap;
  color: var(--accent-dark);
  font-size: 16px;
  width: 100px;
}
.nenpyo-table .era-col {
  color: var(--mute);
  font-size: 11px;
  letter-spacing: 0.08em;
  width: 110px;
  font-weight: 700;
}
.nenpyo-table .event { font-size: 14.5px; }
.nenpyo-table .event a { font-weight: 700; }

.rekidai-table .year { width: 48px; font-size: 15px; text-align: right; }
.rekidai-table .party-col { width: auto; }
.rekidai-table .term-col { width: 160px; }
.rekidai-table .event { white-space: nowrap; }
.rekidai-table .party {
  font-size: 13.5px;
  white-space: nowrap;
}
.rekidai-table td:last-child {
  font-size: 13.5px;
  color: var(--mute);
  white-space: nowrap;
}
@media (max-width: 768px) {
  .rekidai-table { display: block; overflow-x: auto; white-space: nowrap; }
  .rekidai-table th, .rekidai-table td { padding: 10px 8px; }
  .rekidai-table .year { width: 36px; font-size: 13.5px; }
  .rekidai-table .event { font-size: 13.5px; }
  .rekidai-table .party { font-size: 12.5px; }
  .rekidai-table td:last-child { font-size: 12px; }
}

/* ========== フッター ========== */
#footer {
  background: var(--footer-bg);
  color: var(--footer-fg);
  text-align: center;
  padding: 48px 24px;
  font-size: 13px;
  margin-top: 80px;
  clear: both;
  border-top: 6px solid var(--accent);
}
#footer a { color: var(--footer-link); text-decoration: none; }
#footer a:hover { color: var(--accent-text); }

#footer.footer-v2 {
  text-align: left;
  padding: 56px 24px 28px;
}
#footer.footer-v2 .footer-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 2fr;
  gap: 56px;
  align-items: start;
}
#footer.footer-v2 .footer-grid.footer-grid-2col {
  grid-template-columns: 2fr 1fr;
  gap: 64px;
}
#footer.footer-v2 .footer-grid.footer-grid-3col {
  grid-template-columns: minmax(260px, 1.35fr) minmax(130px, 0.62fr) minmax(190px, 0.86fr);
  gap: clamp(36px, 5vw, 72px);
}
#footer.footer-v2 .footer-intro { max-width: 340px; }
#footer.footer-v2 .footer-col h2 {
  font-size: 12px;
  letter-spacing: 0.12em;
  margin: 0 0 14px;
  color: var(--footer-fg-muted);
  font-weight: 800;
  text-transform: uppercase;
}
#footer.footer-v2 .footer-col p {
  margin: 0 0 10px;
  line-height: 1.8;
  font-size: 13px;
  opacity: 0.85;
}
#footer.footer-v2 .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#footer.footer-v2 .footer-col ul li { margin-bottom: 8px; }
#footer.footer-v2 .footer-col ul li a {
  font-size: 13px;
  text-decoration: none;
  opacity: 0.9;
}
#footer.footer-v2 .footer-col ul li a:hover { opacity: 1; color: var(--accent-text); }
#footer.footer-v2 .footer-brand {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#footer.footer-v2 .footer-copy {
  max-width: 1080px;
  margin: 36px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--footer-divider);
  font-size: 12px;
  opacity: 0.65;
  text-align: center;
  letter-spacing: 0.05em;
}

/* ========== 読書プログレスバー（記事ページ、theme.js が注入） ========== */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--page-era, var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  z-index: 2000;
  pointer-events: none;
}

/* ========== ページの先頭へ戻るボタン（theme.js が注入） ========== */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--card-bg);
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  color: var(--accent-text);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, visibility 0.25s ease,
              transform 0.25s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  z-index: 900;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
}
.back-to-top svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 768px) {
  .back-to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }
}

/* ========== ハンバーガーメニュー（モバイル） ========== */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-direction: column;
  gap: 5px;
  margin-right: 10px;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 199;
}
.sidebar-overlay.active { display: block; }

/* ========== ヘッダー検索（theme.js が注入） ========== */
.header-search {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  position: relative;
  z-index: 1001;
}
.header-search .search-toggle {
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 6px 8px;
  font-size: 16px;
  line-height: 1;
  border-radius: 8px;
}
.header-search .search-toggle:hover { color: var(--accent-text); }
.header-search .search-close {
  display: none;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 6px 8px;
  font-size: 18px;
  line-height: 1;
}
.header-search .search-close:hover { color: var(--accent-text); }
.header-search .search-input {
  width: 0;
  padding: 0;
  border: 1px solid transparent;
  opacity: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  border-radius: var(--radius-pill);
  transition: width .25s ease, opacity .2s ease, padding .25s ease, border-color .25s ease;
}
.header-search.open .search-input {
  width: 200px;
  padding: 8px 16px;
  opacity: 1;
  border-color: var(--line);
  margin-right: 6px;
}
/* ブラウザ標準の検索クリア（✕）は非表示。閉じるボタンと紛らわしいため */
.header-search .search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.header-search .search-results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 280px;
  max-height: 360px;
  overflow-y: auto;
  box-shadow: var(--shadow-hover);
  z-index: 1002;
  display: none;
}
.header-search.open .search-results.visible { display: block; }
.header-search .search-results a {
  display: block;
  padding: 11px 16px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.header-search .search-results a:last-child { border-bottom: none; }
.header-search .search-results a:hover {
  background: var(--accent-tint);
  color: var(--accent-text);
}
.header-search .search-results a .era {
  font-size: 11px;
  color: var(--mute);
  margin-left: 8px;
}
.header-search .search-results .empty {
  padding: 14px;
  color: var(--mute);
  font-size: 13px;
}

/* デスクトップ（769px以上）: 検索窓は常時表示、🔍トグルは非表示 */
@media (min-width: 769px) {
  .header-search .search-toggle { display: none; }
  .header-search .search-input {
    width: 190px;
    padding: 8px 16px;
    opacity: 1;
    border-color: var(--line);
    background: var(--card-bg);
    margin-right: 6px;
  }
  .header-search .search-input:focus { border-color: var(--accent); }
  .header-search .search-results.visible { display: block; }
}

/* ========== SVG・ロゴアイコン ========== */
.nav-icon,
.logo-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.nav-icon {
  stroke: currentColor;
  fill: none;
  width: 14px;
  height: 14px;
  margin-right: 2px;
  position: relative;
  top: -1px;
}
.logo-icon {
  width: 22px;
  height: 22px;
  margin-right: 4px;
  position: relative;
  top: -2px;
  border-radius: 22%;
}
#footer .logo-icon {
  width: 18px;
  height: 18px;
  top: -1px;
}

/* ========== レスポンシブ ========== */

#sub.global-drawer-only {
  display: none;
}

/* タブレットを含むコンパクト表示（〜1024px）: 共通ドロワー */
@media (max-width: 1024px) {
  html { scroll-padding-top: 70px; }
  #container {
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding: 28px 14px 56px;
  }
  #container:has(.hero-home) #sub { display: block; }
  .hamburger {
    display: flex;
    width: var(--header-control-size);
    height: var(--header-control-size);
    margin-right: 2px;
    padding: 11px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
  }
  .hamburger span { background: var(--header-fg); }
  #sub {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    overflow-y: auto;
    background: var(--paper);
    z-index: 200;
    padding: 72px 24px 32px;
    border: none;
    border-right: 1px solid var(--line);
    border-radius: 0;
    margin-top: 0;
    float: none;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  #sub.open { transform: translateX(0); }
  #sub h3 { font-size: 12.5px; margin: 18px 0 8px; }
  #sub h3:first-child { margin-top: 0; }
  #sub ul li { font-size: 13.5px; }
  #sub ul li a {
    min-height: var(--header-control-size);
    display: flex;
    align-items: center;
  }
  #inner {
    margin-left: 0;
    min-width: 0;
    padding-left: 0;
  }
  #header {
    position: relative;
    top: auto;
    background: var(--header-bg-soft);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  #header .inner-header {
    width: 100%;
    height: 56px;
    gap: 4px;
    padding: 0 8px;
  }
  #header .logo {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 16px;
  }
  #header .logo a {
    min-height: var(--header-control-size);
    color: var(--header-fg) !important;
  }
  #header .logo .logo-icon { width: 19px; height: 19px; }
  #header nav.pc {
    display: inline-flex;
    min-width: 112px;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-left: auto;
  }
  #header nav.pc > a { display: none; }
  .header-search {
    position: static;
    margin-left: 0;
  }
  .header-search .search-toggle,
  .header-search .search-close {
    min-width: var(--header-control-size);
    min-height: var(--header-control-size);
    padding: 0;
    place-items: center;
  }
  .header-search .search-toggle { display: grid; }
  .header-search .search-input {
    width: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    border-color: transparent;
  }
  .header-search.open .search-close { display: grid; }
  #theme-toggle {
    min-width: 60px;
    min-height: var(--header-control-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    padding: 0 9px;
  }
  #sub.global-drawer-only { display: block; }
}

/* モバイル（〜768px）: ハンバーガードロワー */
@media (max-width: 768px) {
  html { scroll-padding-top: 70px; }

  #container {
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding: 18px 14px 36px;
  }
  #container:has(.hero-home) { padding: 0 0 44px; }
  #container:has(.hero-home) #sub { display: block; }
  #container:has(.hero-home) #inner > .home-section-head,
  #container:has(.hero-home) #inner > .news-list,
  #container:has(.hero-home) #inner > .card-grid,
  #container:has(.hero-home) #inner > .hero-feature,
  #container:has(.hero-home) #inner > .point-box {
    width: min(100% - 28px, 1180px);
  }

  .hamburger { display: flex; }

  /* サイドバー：左からスライドのドロワー */
  #sub {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    overflow-y: auto;
    background: var(--paper);
    z-index: 200;
    padding: 72px 24px 32px;
    border: none;
    border-right: 1px solid var(--line);
    border-radius: 0;
    margin-top: 0;
    float: none;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  #sub.open { transform: translateX(0); }
  #sub h3 { font-size: 12.5px; margin: 18px 0 8px; }
  #sub h3:first-child { margin-top: 0; }
  #sub ul li { font-size: 13.5px; }

  /* 記事エリア：全幅 */
  #inner {
    margin-left: 0;
    padding-left: 0;
  }

  /* ヘッダー */
  #header {
    position: relative;
    top: auto;
    background: var(--card-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  #header .inner-header { height: 56px; padding: 0 12px; }
  #header .logo { font-size: 17px; }
  #header .logo .logo-icon { width: 19px; height: 19px; }
  /* PCナビのリンクはハンバーガー＆サイドバーで代替。
     nav.pc 自体は theme-toggle / 検索の注入先なので残す */
  #header nav.pc > a { display: none; }
  #header nav.pc {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
  }
  .header-search { margin-left: 4px; position: static; }
  .header-search .search-toggle { font-size: 18px; padding: 6px; }

  /* ヒーロー */
  .hero-home,
  #inner > .hero-home {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 36px;
    padding: 40px 18px 36px;
    background: var(--hero-bg) !important;
    background-image: none !important;
  }
  .hero-home .hero-eyebrow,
  .hero-home h1,
  .hero-home .tagline,
  .hero-home .hero-search,
  .hero-home .hero-actions,
  .hero-home .hero-stats,
  .hero-home .hero-feature {
    animation: none;
  }
  .hero-home h1,
  #inner > .hero-home h1 {
    font-size: clamp(34px, 11vw, 48px);
    gap: 12px;
    white-space: nowrap;
  }
  .hero-home h1 .logo-icon { width: 38px; height: 38px; }
  .hero-home .tagline,
  #inner > .hero-home .tagline {
    font-size: 14.5px;
    line-height: 1.85;
    margin-bottom: 22px;
  }
  .hero-search input { min-height: 46px; font-size: 16px; /* iOS自動ズーム抑止 */ }
  .hero-search button { min-height: 46px; padding: 0 18px; }
  .hero-actions { margin-top: 16px; }
  .hero-stats { margin-top: 18px; gap: 8px; }
  .hero-stats div { min-height: 38px; padding: 7px 12px; }
  .hero-stats dd { font-size: 20px; }
  .btn-primary, .btn-secondary { padding: 11px 22px; font-size: 13px; }

  .hero-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hero-feature-card { min-height: 104px; padding: 14px 28px 14px 14px; border-left-width: 5px; }
  .hero-feature-card strong { font-size: 18px; }
  .hero-feature-card span { font-size: 12px; line-height: 1.5; }

  /* お知らせ */
  .news-item,
  .news-empty {
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    padding: 14px 0;
  }
  .news-item strong,
  .news-body { grid-column: 1 / -1; }

  /* セクション見出し */
  .section-title { font-size: 21px; margin: 44px 0 18px; }
  .section-title::before { width: 8px; height: 22px; }
  .part-title { font-size: 22px; margin: 48px 0 16px; padding: 12px 16px; border-left-width: 6px; }

  /* カード（1列に） */
  .card-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
  .card { padding: 22px 18px 18px; }
  #container:has(.hero-home) #inner > .card-grid > .card { min-height: 0; }
  .card h3 { font-size: 21px; margin-bottom: 10px; }
  .card p { font-size: 13px; margin-bottom: 14px; -webkit-line-clamp: 6; }
  .index-list { grid-template-columns: 1fr; gap: 9px; }
  .index-item a,
  .index-empty {
    grid-template-columns: 1fr auto;
    min-height: 58px;
    padding: 11px 12px 11px 14px;
  }
  .index-title { font-size: 16px; }
  .index-reading { grid-column: 1; }
  .index-era { grid-column: 2; grid-row: 1 / span 2; }
  .index-alias { grid-column: 1 / -1; }

  /* 記事ページ */
  .article-header { margin-bottom: 32px; padding-bottom: 22px; }
  .article-header h1 { font-size: 27px; line-height: 1.25; }
  .article-header .subtitle { font-size: 15px; }
  .article-body h2 { font-size: 22px; margin: 40px 0 16px; }
  .article-body h3 { font-size: 18px; margin: 26px 0 10px; }
  /* スマホは読書距離が近いぶん文字を小さくしがちだが、
     長文の読みやすさを優先してPCと同じ16pxを保つ */
  .article-body p,
  .article-body ul,
  .article-body ol { font-size: 16px; }

  /* ポイントボックス */
  .point-box { padding: 20px 18px; margin: 24px 0; }

  /* 年表テーブル */
  .nenpyo-table th,
  .nenpyo-table td { padding: 10px 10px; font-size: 13px; }
  .nenpyo-table .year { font-size: 14px; width: 70px; }
  .nenpyo-table .era-col { font-size: 10px; width: 78px; }
  .nenpyo-table .event { font-size: 13.5px; }
  .nenpyo-section-title { font-size: 21px; }

  /* フッター */
  #footer { padding: 36px 18px; font-size: 12px; margin-top: 48px; }
  #footer.footer-v2 .footer-grid,
  #footer.footer-v2 .footer-grid.footer-grid-3col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 24px;
  }
  #footer.footer-v2 .footer-intro {
    grid-column: 1 / -1;
    max-width: 440px;
  }

  /* テーマトグルを小さく */
  #theme-toggle { font-size: 9px; padding: 5px 9px; margin-left: 4px; }
}

/* 小型スマホ（〜400px） */
/* 小型スマホ向けの文字サイズ調整。
   .hero-home h1 / .card h3 / .hero-feature はここでは指定しない。
   前者2つは後方の 768px ブロックとトップページ限定の高特異度セレクタが
   優先されて効かず、.hero-feature は 768px ブロックが同じ 1fr を指定していた。 */
@media (max-width: 480px) {
  .article-header h1 { font-size: 24px; }
  .section-title { font-size: 19px; }
  #footer.footer-v2 .footer-grid,
  #footer.footer-v2 .footer-grid.footer-grid-3col {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  #footer.footer-v2 .footer-intro { grid-column: auto; }
  .article-body h2 { font-size: 20px; }
}

/* ========== コンパクト検索：開いたらヘッダーごと検索バーに ========== */
@media (max-width: 1024px) {
  .header-search { position: static; }
  .header-search.open {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0 8px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-sizing: border-box;
    z-index: 1100;
  }
  .header-search.open .search-toggle {
    flex: 0 0 auto;
    font-size: 18px;
    padding: 6px;
  }
  .header-search.open .search-input {
    position: static;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 8px 4px;
    font-size: 16px; /* iOS Safari の自動ズーム抑止 */
    opacity: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--ink);
  }
  .header-search.open .search-close {
    display: block;
    flex: 0 0 auto;
  }
  .header-search .search-results {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: 100%;
    max-height: calc(100vh - 56px);
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    border-radius: 0;
    z-index: 1099;
    text-align: left;
  }
}

@media (max-width: 480px) {
  #header nav.pc { min-width: 96px; }
  #theme-toggle {
    min-width: var(--header-control-size);
    width: var(--header-control-size);
    padding: 0;
  }
  #theme-toggle .theme-label { display: none; }
}

/* ========== 印刷スタイル ========== */
@media print {
  #header, #sub, #footer, .breadcrumb, .sidebar-overlay, .hamburger, #theme-toggle, .header-search, .back-to-top, .reading-progress, .shiori-btn { display: none !important; }
  body { background: #fff; color: #000; }
  #container { display: block; max-width: 100%; margin: 0; padding: 0; }
  #inner { margin: 0; padding: 0; }
  .article-header, .article-body { max-width: 100%; }
  .article-body { font-size: 11pt; line-height: 1.7; }
  .article-body h2, .article-body h3 { page-break-after: avoid; }
  .article-body p, .article-body li { orphans: 3; widows: 3; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .point-box, .card { border: 1px solid #000; background: #fff !important; box-shadow: none; }

  /* 画面用の色はテーマごとに明暗が入れ替わるが、紙は常に白い。
     ダークテーマのまま印刷すると、見出しや強調が紙の上でほぼ消える
     （記事タイトルで 1.24:1）。本文領域の文字は黒に固定する。 */
  #inner,
  #inner *,
  #inner *::before,
  #inner *::after {
    color: #000 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  /* 罫線もテーマ由来だと薄く出ることがあるため、表だけは黒で固定する。 */
  #inner table, #inner th, #inner td { border-color: #000 !important; }
}

/* ========== しおり（ブックマーク）機能 ========== */

/* 記事ページの「しおりを挟む」ボタン */
.shiori-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.shiori-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.shiori-btn.active {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent-text);
}

/* しおりページ: 前書き */
.shiori-note {
  margin-bottom: 24px;
  color: var(--mute);
  font-size: 13px;
  line-height: 1.8;
}

/* しおりページ: 一覧 */
.shiori-list { list-style: none; }
.shiori-item {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.shiori-item-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.shiori-era {
  font-size: 12px;
  color: var(--accent-text);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  padding: 1px 10px;
  white-space: nowrap;
}
.shiori-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.shiori-title:hover { color: var(--accent-text); }
.shiori-date { margin-left: auto; font-size: 12px; color: var(--mute); }
.shiori-remove {
  margin-top: 10px;
  padding: 0;
  border: none;
  background: none;
  color: var(--mute);
  font-family: var(--sans);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
.shiori-remove:hover { color: var(--accent-text); }

/* しおりページ: 空のとき */
.shiori-empty {
  padding: 44px 20px;
  text-align: center;
  color: var(--mute);
  font-size: 14px;
  line-height: 2;
  background: var(--card-bg);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.shiori-empty-links a { color: var(--accent-text); }

/* ==========================================================================
   Chic Japanese Edition — component refinements
   墨・生成り・朱を基調に、装飾より文字と余白を優先する静かな意匠へ。
   ========================================================================== */

body {
  background: var(--paper);
  letter-spacing: 0.015em;
}

/* 黒漆を思わせるヘッダー。朱印だけを小さく効かせる。 */
#header {
  background: var(--header-bg-soft);
  border-bottom-color: rgba(238, 232, 220, 0.17);
  box-shadow: 0 6px 22px rgba(18, 16, 12, 0.16);
}
#header .logo a {
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--header-fg) 42%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--header-fg) 5%, transparent);
  color: var(--header-fg) !important;
  letter-spacing: 0.08em;
}
#header .logo a:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--header-fg-strong) !important;
  box-shadow: 0 4px 12px rgba(18, 16, 12, 0.2);
}
#header nav.pc > a {
  color: color-mix(in srgb, var(--header-fg) 82%, transparent);
  border-bottom: 1px solid transparent;
  border-radius: 0;
  letter-spacing: 0.1em;
}
#header nav.pc > a:hover {
  background: transparent;
  color: var(--header-fg-strong);
  border-bottom-color: var(--accent);
}
#theme-toggle {
  border-color: color-mix(in srgb, var(--header-fg) 30%, transparent);
  border-radius: 2px;
  color: color-mix(in srgb, var(--header-fg) 78%, transparent);
}
#theme-toggle:hover {
  border-color: var(--header-accent);
  background: rgba(255, 255, 255, 0.06);
  color: var(--header-fg-strong);
}
.header-search input {
  border-color: color-mix(in srgb, var(--header-fg) 24%, transparent);
  background: rgba(255, 255, 255, 0.06);
  color: var(--header-fg);
}
.header-search .search-input::placeholder {
  color: var(--mute);
  opacity: 1;
}

/* トップでは本文内検索を主役にし、ヘッダーの検索欄は重複させない。 */
body:has(.hero-home) .header-search { display: none; }

/* ヒーロー：説明だけの大きな余白をやめ、写真付きの注目記事を並べる。 */
.hero-home,
#inner > .hero-home {
  min-height: 500px;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr);
  gap: clamp(38px, 6vw, 78px);
  margin-bottom: 0;
  padding-top: clamp(52px, 6.5vw, 82px);
  padding-bottom: clamp(48px, 6vw, 76px);
  background: var(--hero-bg);
}
.hero-home::before,
#inner > .hero-home::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 4px;
  background: var(--accent);
}
.hero-home::after,
#inner > .hero-home::after {
  left: clamp(20px, 6vw, 88px);
  right: clamp(20px, 6vw, 88px);
  height: 0;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
}
.hero-home .hero-copy {
  max-width: 640px;
}
.hero-eyebrow {
  margin-bottom: 25px;
  padding: 4px 10px 4px 12px;
  border: 0;
  border-left: 1px solid var(--accent);
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 58%, var(--mute));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
}
.hero-home h1,
#inner > .hero-home h1 {
  gap: 14px;
  margin-bottom: 24px;
  color: var(--heading-strong);
  font-size: clamp(40px, 4.2vw, 58px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.09em;
}
.hero-home h1 .logo-icon {
  width: clamp(36px, 3.3vw, 46px);
  height: clamp(36px, 3.3vw, 46px);
  border-radius: 2px;
  box-shadow: 0 7px 16px rgba(116, 33, 31, 0.16);
}
.hero-home .tagline,
#inner > .hero-home .tagline {
  display: grid;
  gap: 7px;
  max-width: 560px;
  margin-bottom: 29px;
  color: var(--mute);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.045em;
}
.hero-home .tagline .tagline-lead {
  color: color-mix(in srgb, var(--ink) 84%, var(--mute));
  font-family: var(--serif);
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 600;
  letter-spacing: 0.055em;
}
.hero-search {
  gap: 0;
  width: min(560px, 100%);
  padding: 0;
  border-color: var(--line-strong);
  border-radius: 2px;
  background: color-mix(in srgb, var(--card-bg) 88%, var(--paper));
  box-shadow: 0 6px 18px rgba(46, 39, 28, 0.06);
}
.hero-search input {
  border-radius: 0;
  padding: 14px 17px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}
.hero-search button {
  min-width: 92px;
  border-left: 1px solid var(--search-btn-line);
  border-radius: 0;
  padding: 14px 21px;
  background: var(--search-btn-bg);
  color: var(--search-btn-fg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.hero-search button:hover {
  background: var(--accent-dark);
  color: var(--on-accent);
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}
.hero-actions {
  justify-content: space-between;
  width: min(560px, 100%);
  gap: 16px;
  margin-top: 10px;
  padding: 0 2px;
}

.home-featured {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-self: center;
  min-height: 300px;
  gap: 9px;
}
.home-featured-stage {
  display: grid;
  min-width: 0;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--line-strong);
  box-shadow: 8px 9px 0 color-mix(in srgb, var(--accent) 8%, transparent);
}
.home-featured-slide {
  --featured-tone: var(--accent);
  position: relative;
  z-index: 0;
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(140px, 0.46fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  background:
    linear-gradient(
      128deg,
      color-mix(in srgb, var(--featured-tone) 19%, var(--card-bg)) 0%,
      var(--card-bg) 53%,
      color-mix(in srgb, var(--featured-tone) 8%, var(--card-bg)) 100%
    );
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.75s ease, visibility 0s linear 0.75s;
}
.home-featured-slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.75s ease, visibility 0s;
}
.home-featured-slide.featured-tone-kodai { --featured-tone: var(--era-kodai); }
.home-featured-slide.featured-tone-kingendai { --featured-tone: var(--era-kingendai); }
.home-featured-slide::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background: linear-gradient(
    105deg,
    transparent 22%,
    color-mix(in srgb, var(--featured-tone) 13%, transparent) 48%,
    transparent 72%
  );
  transform: translateX(-85%);
  pointer-events: none;
}
.home-featured-slide > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .home-featured-slide.is-active::before {
    animation: home-featured-gradient 1.15s ease-out;
  }
}
@keyframes home-featured-gradient {
  from { transform: translateX(-85%); opacity: 0; }
  35% { opacity: 1; }
  to { transform: translateX(85%); opacity: 0; }
}
.home-featured-image {
  grid-column: 1;
  grid-row: 1;
  display: block;
  min-height: 270px;
  overflow: hidden;
  background: var(--paper-deep);
}
.home-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 270px;
  object-fit: cover;
  object-position: center 18%;
  filter: saturate(0.78) contrast(1.04);
  transition: filter 0.24s ease, transform 0.35s ease;
}
.home-featured-slide.is-active:hover .home-featured-image img {
  filter: saturate(0.95) contrast(1.04);
  transform: scale(1.012);
}
.home-featured-image.home-featured-image-diagram {
  display: grid;
  place-items: center;
  padding: 10px;
  background: color-mix(in srgb, var(--featured-tone) 8%, var(--paper-deep));
}
.home-featured-image.home-featured-image-diagram img {
  min-height: 0;
  object-fit: contain;
  filter: none;
}
.home-featured-slide.is-active:hover .home-featured-image-diagram img {
  filter: none;
  transform: none;
}
.home-featured-copy {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding: 24px 22px 18px;
}
.home-featured-kicker {
  margin: 0 0 6px;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.home-featured h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(27px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
}
.home-featured h2 a {
  color: var(--ink);
  text-decoration: none;
}
.home-featured h2 a:hover { color: var(--accent-text); }
.home-featured-copy > p:not(.home-featured-kicker) {
  margin: 0 0 11px;
  color: var(--mute);
  font-size: 14px;
  line-height: 1.75;
}
.home-featured-link {
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.home-featured-link span {
  display: inline-block;
  margin-left: 5px;
  transition: transform 0.18s ease;
}
.home-featured-link:hover span { transform: translateX(3px); }
.home-featured-credit {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  padding: 9px 12px 10px;
  border-top: 1px solid var(--line);
  color: var(--mute);
  font-size: 12px;
  line-height: 1.55;
}
.home-featured-credit a { color: inherit; }
.home-featured-controls {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 32px;
}
.home-featured-dots {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 1px;
}
.home-featured-dots button {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.home-featured-dot {
  position: relative;
  display: block;
  width: 7px;
  height: 7px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--mute) 64%, transparent);
  transition: width 0.28s ease, background 0.28s ease;
}
.home-featured-dot::before {
  position: absolute;
  inset: 0;
  background: var(--accent);
  content: "";
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
.home-featured-dots button.is-active .home-featured-dot {
  width: 26px;
  background: color-mix(in srgb, var(--accent) 24%, var(--line));
}
.home-featured-dots button.is-active.is-progressing .home-featured-dot::before {
  opacity: 1;
  animation: home-featured-progress 7s linear forwards;
}
.home-featured-dots button:hover .home-featured-dot {
  background: var(--accent-text);
}
.home-featured-dots button.is-active:hover .home-featured-dot {
  background: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.home-featured-dots button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}
.home-featured.is-carousel-paused .home-featured-dots button.is-progressing .home-featured-dot::before {
  animation-play-state: paused;
}
.home-featured-toggle {
  grid-column: 3;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line-strong) 78%, transparent);
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--card-bg) 78%, transparent),
    color-mix(in srgb, var(--paper) 52%, transparent)
  );
  color: var(--mute);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--paper) 88%, transparent),
    0 3px 10px color-mix(in srgb, var(--ink) 10%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.home-featured-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line-strong));
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--card-bg) 84%, transparent),
    color-mix(in srgb, var(--accent) 10%, var(--paper))
  );
  color: var(--accent-text);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--paper) 92%, transparent),
    0 5px 13px color-mix(in srgb, var(--ink) 13%, transparent);
  transform: translateY(-1px);
}
.home-featured-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.home-featured-toggle-icon {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
}
.home-featured-toggle-icon::before,
.home-featured-toggle-icon::after {
  position: absolute;
  top: 1px;
  width: 3px;
  height: 10px;
  border-radius: 1px;
  background: currentColor;
  content: "";
}
.home-featured-toggle-icon::before { left: 1px; }
.home-featured-toggle-icon::after { right: 1px; }
.home-featured-toggle.is-paused .home-featured-toggle-icon::before {
  top: 0;
  left: 2px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid currentColor;
  border-radius: 0;
  background: transparent;
}
.home-featured-toggle.is-paused .home-featured-toggle-icon::after { content: none; }
@keyframes home-featured-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .home-featured-slide,
  .home-featured-slide.is-active,
  .home-featured-dot,
  .home-featured-toggle {
    transition: none;
  }
}
.hero-stats div {
  display: inline-flex;
  grid-template-columns: none;
  gap: 7px;
  min-height: 0;
  padding: 7px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hero-stats dt {
  color: var(--mute);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.hero-stats dd {
  font-size: 18px;
  font-weight: 600;
}
.hero-stats dd small {
  margin-left: 2px;
  color: var(--mute);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
}
.btn-secondary {
  border-radius: 2px;
  background: transparent;
  letter-spacing: 0.06em;
}
.hero-actions .btn-secondary {
  padding: 7px 0;
  border: 0;
  color: color-mix(in srgb, var(--ink) 68%, var(--mute));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.hero-actions .btn-secondary span {
  display: inline-block;
  margin-left: 5px;
  color: var(--accent-text);
  transition: transform 0.18s ease;
}
.hero-actions .btn-secondary:hover {
  border-color: transparent;
  color: var(--ink);
  transform: none;
  box-shadow: none;
}
.hero-actions .btn-secondary:hover span {
  transform: translateX(3px);
}

/* 五つの探し方：ヒーローから独立した、簡潔な索引として並べる。 */
.hero-feature {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: 34px;
  margin-bottom: 18px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.hero-feature-card {
  --feature-color: var(--accent);
  overflow: visible;
  min-height: 96px;
  grid-template-columns: minmax(0, 1fr) 14px;
  grid-template-rows: auto auto;
  align-items: center;
  align-content: initial;
  column-gap: 8px;
  padding: 18px 18px 17px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hero-feature-card:last-child { border-right: 0; }
.hero-feature-card::before {
  content: none;
  display: none;
}
.hero-feature-card::after {
  content: "→";
  position: static;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: auto;
  height: auto;
  border: 0;
  color: var(--accent-text);
  font-family: var(--sans);
  font-size: 13px;
  opacity: 0.45;
  transform: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.hero-feature-card strong,
.hero-feature-card span {
  grid-column: 1;
}
.hero-feature-card strong {
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.hero-feature-card > span {
  color: var(--mute);
  font-size: 12px;
  line-height: 1.55;
}
.hero-feature-card:hover {
  transform: none;
  border-color: var(--line);
  background: color-mix(in srgb, var(--accent-tint) 45%, transparent);
  box-shadow: none;
}
.hero-feature-card:hover strong {
  color: var(--accent-dark);
}
.hero-feature-card:hover::after {
  opacity: 1;
  transform: translateX(3px);
}

.section-title,
.part-title {
  font-family: var(--serif);
}
.news-label {
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 2px;
  background: transparent;
}
.section-title {
  gap: 16px;
  font-weight: 700;
  letter-spacing: 0.09em;
}
.section-title::before {
  width: 3px;
  height: 30px;
  border-radius: 0;
  box-shadow: none;
}
.card-grid {
  gap: 16px;
}
.card {
  padding: 27px 25px 23px;
  border-color: var(--line-strong);
  border-radius: 3px;
  box-shadow: none;
}
.card::before {
  inset: 0 auto 0 0;
  width: 3px;
  height: auto;
  opacity: 0.75;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.card .era {
  padding: 2px 0 3px;
  border-bottom: 1px solid color-mix(in srgb, var(--card-era) 48%, transparent);
  border-radius: 0;
  background: transparent;
  letter-spacing: 0.1em;
}
.card h3 {
  font-weight: 700;
  letter-spacing: 0.04em;
}
.card-foot {
  border-top-style: dotted;
}

/* トップの新着記事：均一カードをやめ、読み物の目録として横組みにする。 */
#container:has(.hero-home) #inner > .card-grid {
  display: block;
  gap: 0;
  margin-bottom: 34px;
  border-top: 1px solid var(--line-strong);
}
#container:has(.hero-home) #inner > .card-grid > .card:nth-child(n) {
  display: grid;
  grid-template-columns: 132px minmax(170px, 0.62fr) minmax(260px, 1.25fr) 132px;
  gap: 24px;
  align-items: start;
  min-height: 0;
  padding: 28px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
#container:has(.hero-home) #inner > .card-grid > .card::before {
  display: none;
}
#container:has(.hero-home) #inner > .card-grid > .card:hover {
  transform: none;
  background: color-mix(in srgb, var(--paper-deep) 32%, transparent);
  box-shadow: none;
}
#container:has(.hero-home) #inner > .card-grid > .card .era {
  grid-column: 1;
  margin: 3px 0 0;
  padding: 0;
  border: 0;
  color: var(--accent-dark);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.08em;
  white-space: normal;
}
#container:has(.hero-home) #inner > .card-grid > .card h3 {
  grid-column: 2;
  margin: 0;
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 600;
  letter-spacing: 0.045em;
}
#container:has(.hero-home) #inner > .card-grid > .card p {
  grid-column: 3;
  margin: 0;
  color: var(--mute);
  font-size: 12.5px;
  line-height: 1.75;
  -webkit-line-clamp: 3;
}
#container:has(.hero-home) #inner > .card-grid > .card .card-foot {
  grid-column: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  margin: 0;
  padding: 1px 0 0;
  border: 0;
}
#container:has(.hero-home) #inner > .card-grid > .card .card-dates {
  order: -1;
}
#container:has(.hero-home) #inner > .card-grid > .card .card-date {
  font-size: 10px;
}
#container:has(.hero-home) #inner > .card-grid > .card .card-link {
  color: var(--accent-dark);
  font-size: 11px;
}
.point-box,
.part-title,
.index-item a,
.index-empty {
  border-radius: 3px;
  box-shadow: none;
}

#container:has(.hero-home) #inner > .point-box {
  padding: 26px 0 4px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-strong);
}
#container:has(.hero-home) #inner > .point-box::before { display: none; }

#footer {
  background: var(--footer-bg);
}
#footer .footer-brand {
  font-family: var(--serif);
  letter-spacing: 0.1em;
}

/* ==========================================================================
   トップページの各セクションを同じ体裁に揃える。
   「お知らせ / 最近の記事 / このサイトについて / プライバシーポリシー」を、
   同じ見出し（朱バー付き .section-title）＋右肩の共通リンク（.section-more）で並べ、
   セクション間の余白も一定のリズムにする。
   ========================================================================== */
.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
  margin: 64px 0 22px;
}
.home-section-head .section-title {
  margin: 0;
}
/* ヒーロー直後の最初の見出しは、ヒーロー側の余白に任せて詰める。 */
#container:has(.hero-home) #inner > .hero-home + .home-section-head {
  margin-top: 0;
}
/* セクション間の間隔は見出し行の margin で一定に保つため、中身側の余白は殺す。 */
#container:has(.hero-home) #inner > .news-list,
#container:has(.hero-home) #inner > .card-grid,
#container:has(.hero-home) #inner > .point-box {
  margin-top: 0;
  margin-bottom: 0;
}
/* 右肩の「すべて見る →」系リンク（全セクション共通の見え方）。 */
.section-more {
  flex-shrink: 0;
  color: var(--accent-text);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
}
.section-more:hover { text-decoration: underline; }
.section-more .section-more-arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.18s ease;
}
.section-more:hover .section-more-arrow { transform: translateX(3px); }

@media (max-width: 768px) {
  #header {
    background: var(--header-bg-soft);
    border-bottom-color: rgba(238, 232, 220, 0.17);
  }
  #header .logo { font-size: 16px; }
  #header .logo a {
    min-height: 44px;
    color: var(--header-fg) !important;
  }
  .hamburger {
    width: 44px;
    height: 44px;
    margin-right: 2px;
    padding: 11px;
    align-items: center;
    justify-content: center;
  }
  .hamburger span { background: var(--header-fg); }
  .header-search .search-toggle,
  .header-search .search-close {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    place-items: center;
  }
  .header-search .search-toggle { display: grid; }
  .header-search.open .search-close { display: grid; }
  #theme-toggle {
    min-width: 60px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
  }
  #sub ul li a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .article-toc a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .hero-home,
  #inner > .hero-home {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 42px 20px 34px 24px;
    background: var(--hero-bg) !important;
  }
  .hero-home::before,
  #inner > .hero-home::before { width: 3px; }
  .hero-home h1,
  #inner > .hero-home h1 {
    gap: 12px;
    font-size: clamp(31px, 9vw, 39px);
    letter-spacing: 0.045em;
  }
  .hero-home h1 .logo-icon {
    width: 34px;
    height: 34px;
  }
  .hero-home .tagline,
  #inner > .hero-home .tagline {
    gap: 5px;
    font-size: 12.5px;
    line-height: 1.75;
  }
  .hero-home .tagline .tagline-lead { font-size: 15px; }
  .hero-search button { min-width: 76px; padding: 0 14px; }
  .hero-actions { margin-top: 7px; }
  .hero-actions .btn-secondary {
    min-height: 44px;
    align-items: center;
  }
  .home-featured {
    grid-template-rows: auto auto;
    min-height: 0;
  }
  .home-featured-stage { box-shadow: 7px 8px 0 color-mix(in srgb, var(--accent) 9%, transparent); }
  .home-featured-slide {
    grid-template-columns: 118px minmax(0, 1fr);
    grid-template-rows: minmax(190px, 1fr) auto;
  }
  .home-featured-image {
    grid-column: 1;
    grid-row: 1;
    min-height: 190px;
  }
  .home-featured-image img {
    min-height: 190px;
    max-height: 220px;
  }
  .home-featured-copy {
    grid-column: 2;
    grid-row: 1;
    padding: 18px 15px 12px;
  }
  .home-featured h2 { font-size: 25px; }
  .home-featured-copy > p:not(.home-featured-kicker) {
    font-size: 12px;
    line-height: 1.65;
  }
  .home-featured-credit {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 9px 12px 11px;
    border-top: 1px solid var(--line);
  }
  .hero-feature {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 24px;
  }
  .hero-feature-card {
    min-height: 88px;
    grid-template-columns: minmax(0, 1fr) 14px;
    padding: 14px 12px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .hero-feature-card:nth-child(2n) { border-right: 0; }
  .hero-feature-card:last-child {
    grid-column: 1 / -1;
    border-bottom: 0;
  }
  .hero-feature-card strong { font-size: 16px; }
  .home-section-head { margin: 44px 0 16px; }
  .section-title::before { height: 24px; }

  #container:has(.hero-home) #inner > .card-grid {
    margin-bottom: 0;
  }
  #container:has(.hero-home) #inner > .card-grid > .card:nth-child(n) {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 18px 0;
  }
  #container:has(.hero-home) #inner > .card-grid > .card .era,
  #container:has(.hero-home) #inner > .card-grid > .card h3,
  #container:has(.hero-home) #inner > .card-grid > .card p,
  #container:has(.hero-home) #inner > .card-grid > .card .card-foot {
    grid-column: 1;
  }
  #container:has(.hero-home) #inner > .card-grid > .card .era {
    margin-top: 0;
  }
  #container:has(.hero-home) #inner > .card-grid > .card h3 {
    font-size: 20px;
  }
  #container:has(.hero-home) #inner > .card-grid > .card p {
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.8;
    -webkit-line-clamp: 3;
  }
  #container:has(.hero-home) #inner > .card-grid > .card .card-foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
  }
}

@media print {
  .hero-home::before,
  #inner > .hero-home::before { display: none; }
}

/* ==========================================================================
   Liquid Glass — 透明感は操作部に限定し、背景は生成りの単色に保つ
   ========================================================================== */
:root,
[data-theme="light"] {
  --liquid-glass-glass: color-mix(in srgb, var(--card-bg) 64%, transparent);
  --liquid-glass-glass-strong: color-mix(in srgb, var(--card-bg) 80%, transparent);
  --liquid-glass-hairline: color-mix(in srgb, var(--line-strong) 52%, transparent);
  --liquid-glass-highlight: color-mix(in srgb, #fff 78%, transparent);
  --liquid-glass-lowlight: color-mix(in srgb, var(--ink) 8%, transparent);
  --liquid-glass-shadow: 0 24px 64px color-mix(in srgb, var(--ink) 10%, transparent);
  --liquid-glass-control-surface: color-mix(in srgb, #fff 46%, transparent);
  --liquid-glass-control-surface-hover: color-mix(in srgb, #fff 72%, transparent);
  --liquid-glass-control-shine: color-mix(in srgb, #fff 64%, transparent);
  --liquid-glass-control-shine-hover: color-mix(in srgb, #fff 92%, transparent);
  --liquid-glass-control-border: color-mix(in srgb, var(--line-strong) 48%, transparent);
  --liquid-glass-control-border-hover: color-mix(in srgb, var(--accent) 26%, var(--line));
}

[data-theme="dark"] {
  --liquid-glass-glass: color-mix(in srgb, var(--card-bg) 58%, transparent);
  --liquid-glass-glass-strong: color-mix(in srgb, var(--card-bg) 76%, transparent);
  --liquid-glass-hairline: color-mix(in srgb, var(--ink) 24%, transparent);
  --liquid-glass-highlight: color-mix(in srgb, #fff 20%, transparent);
  --liquid-glass-lowlight: color-mix(in srgb, #000 24%, transparent);
  --liquid-glass-shadow: 0 26px 72px rgba(0, 0, 0, 0.3);
  --liquid-glass-control-surface: color-mix(in srgb, var(--card-bg) 52%, transparent);
  --liquid-glass-control-surface-hover: color-mix(in srgb, var(--ink) 18%, transparent);
  --liquid-glass-control-shine: color-mix(in srgb, #fff 14%, transparent);
  --liquid-glass-control-shine-hover: color-mix(in srgb, #fff 30%, transparent);
  --liquid-glass-control-border: color-mix(in srgb, var(--ink) 22%, transparent);
  --liquid-glass-control-border-hover: color-mix(in srgb, var(--accent-dark) 44%, var(--line));
}

body {
  background: var(--paper);
}

#header {
  background:
    linear-gradient(180deg, var(--liquid-glass-highlight), transparent 46%),
    color-mix(in srgb, var(--paper) 76%, transparent);
  border-bottom-color: var(--liquid-glass-hairline);
  box-shadow:
    0 1px 0 var(--liquid-glass-highlight),
    inset 0 -1px 0 var(--liquid-glass-lowlight),
    0 10px 34px color-mix(in srgb, var(--ink) 7%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.35);
  backdrop-filter: blur(28px) saturate(1.35);
}

#header .inner-header {
  max-width: 1340px;
  height: 72px;
}

#header .logo a {
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: var(--ink) !important;
  letter-spacing: 0.04em;
}

#header .logo a:hover {
  border-color: transparent;
  background: transparent;
  color: var(--accent-text) !important;
  box-shadow: none;
}

#header nav.pc > a {
  padding: 9px 13px;
  color: color-mix(in srgb, var(--ink) 76%, transparent);
  border: 0;
  border-radius: 999px;
  letter-spacing: 0.06em;
}

#header nav.pc > a:hover {
  background: var(--liquid-glass-glass-strong);
  color: var(--ink);
  border-bottom-color: transparent;
}

#theme-toggle {
  border-color: var(--liquid-glass-hairline);
  border-radius: 999px;
  background:
    linear-gradient(145deg, var(--liquid-glass-highlight), transparent 48%), var(--liquid-glass-glass);
  color: var(--ink);
  box-shadow: inset 0 1px 0 var(--liquid-glass-highlight);
}

#theme-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: var(--liquid-glass-glass-strong);
  color: var(--accent-text);
}

.hero-home,
#inner > .hero-home {
  min-height: 600px;
  grid-template-columns: minmax(400px, 0.94fr) minmax(420px, 0.9fr);
  gap: clamp(36px, 4vw, 58px);
  padding: clamp(64px, 7vw, 94px) clamp(28px, 4vw, 64px) clamp(62px, 7vw, 92px);
  background: transparent;
  border-bottom: 0;
}

.hero-home::before,
#inner > .hero-home::before {
  content: none;
}

.hero-home::after,
#inner > .hero-home::after {
  content: none;
}

.hero-home .hero-copy {
  max-width: 680px;
}

.hero-eyebrow {
  margin-bottom: 22px;
  padding: 7px 13px;
  border: 1px solid var(--liquid-glass-hairline);
  border-radius: 999px;
  background: var(--liquid-glass-glass);
  color: var(--mute);
  font-size: 11px;
  letter-spacing: 0.15em;
  box-shadow: inset 0 1px 0 var(--liquid-glass-highlight);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

.hero-home h1,
#inner > .hero-home h1 {
  gap: 14px;
  margin-bottom: 25px;
  font-size: clamp(48px, 4.6vw, 68px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.045em;
  white-space: nowrap;
}

.hero-home h1 .logo-icon {
  width: clamp(44px, 4vw, 58px);
  height: clamp(44px, 4vw, 58px);
  border-radius: 12px;
  box-shadow:
    0 18px 42px color-mix(in srgb, var(--accent) 26%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

.hero-home .tagline,
#inner > .hero-home .tagline {
  max-width: 600px;
  margin-bottom: 34px;
}

.hero-home .tagline .tagline-lead {
  font-size: clamp(17px, 1.55vw, 21px);
  font-weight: 500;
  line-height: 1.8;
}

.hero-search {
  gap: 8px;
  width: min(600px, 100%);
  padding: 7px;
  border-color: var(--liquid-glass-hairline);
  border-radius: 17px;
  background:
    linear-gradient(145deg, var(--liquid-glass-highlight), transparent 38%),
    var(--liquid-glass-glass-strong);
  box-shadow:
    inset 0 1px 0 var(--liquid-glass-highlight),
    inset 0 -1px 0 var(--liquid-glass-lowlight),
    0 18px 50px color-mix(in srgb, var(--ink) 9%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
}

.hero-search input {
  border-radius: 12px;
  padding: 14px 17px;
  font-size: 16px;
}

.hero-search button {
  min-width: 92px;
  border: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--liquid-glass-hairline));
  border-radius: 12px;
  padding: 13px 22px;
  background: color-mix(in srgb, var(--accent) 14%, var(--liquid-glass-glass));
  color: var(--accent-text);
  letter-spacing: 0.07em;
}

.hero-search button:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 22%, var(--liquid-glass-glass-strong));
  color: var(--accent-text);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 var(--liquid-glass-highlight),
    0 10px 24px color-mix(in srgb, var(--accent) 16%, transparent);
}

.hero-search:focus-within {
  box-shadow:
    var(--focus-ring),
    inset 0 1px 0 var(--liquid-glass-highlight),
    inset 0 -1px 0 var(--liquid-glass-lowlight),
    0 20px 56px color-mix(in srgb, var(--ink) 10%, transparent);
}

.hero-actions {
  width: min(600px, 100%);
  margin-top: 14px;
}

.hero-actions .btn-secondary {
  min-height: 40px;
  padding: 8px 13px;
  border-radius: 999px;
}

.home-featured {
  gap: 14px;
}

.home-featured-stage {
  overflow: hidden;
  border: 1px solid var(--liquid-glass-hairline);
  border-radius: 24px;
  background: var(--card-bg);
  box-shadow:
    inset 0 1px 0 var(--liquid-glass-highlight),
    var(--liquid-glass-shadow);
}

.home-featured-slide {
  grid-template-columns: minmax(185px, 0.56fr) minmax(0, 1fr);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--featured-tone) 14%, var(--card-bg)),
      var(--card-bg) 68%
    ),
    var(--card-bg);
}

.home-featured-image,
.home-featured-image img {
  min-height: 370px;
}

.home-featured-image img {
  filter: saturate(0.88) contrast(1.03);
}

.home-featured-copy {
  padding: 34px 30px 28px;
}

.home-featured-kicker {
  margin-bottom: 10px;
  font-size: 12px;
}

.home-featured h2 {
  margin-bottom: 13px;
  font-size: clamp(28px, 2.7vw, 39px);
  font-weight: 600;
  text-wrap: balance;
}

.home-featured-copy > p:not(.home-featured-kicker) {
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.85;
}

.home-featured-credit {
  border-top-color: var(--liquid-glass-hairline);
  background: color-mix(in srgb, var(--paper) 24%, transparent);
}

.home-featured-controls {
  min-height: 40px;
}

.home-featured-dots {
  min-height: 38px;
  padding: 2px 8px;
  border: 1px solid var(--liquid-glass-hairline);
  border-radius: 999px;
  background:
    linear-gradient(145deg, var(--liquid-glass-highlight), transparent 50%), var(--liquid-glass-glass);
  box-shadow:
    inset 0 1px 0 var(--liquid-glass-highlight),
    inset 0 -1px 0 var(--liquid-glass-lowlight);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

.home-featured-toggle {
  width: 38px;
  height: 38px;
  border-color: var(--liquid-glass-hairline);
  background:
    linear-gradient(145deg, var(--liquid-glass-highlight), transparent 50%), var(--liquid-glass-glass);
  box-shadow:
    inset 0 1px 0 var(--liquid-glass-highlight),
    inset 0 -1px 0 var(--liquid-glass-lowlight),
    0 8px 22px color-mix(in srgb, var(--ink) 8%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

.hero-feature {
  width: min(1180px, calc(100% - 36px));
  margin-top: -26px;
  margin-bottom: 30px;
  padding: 8px;
  border: 1px solid var(--liquid-glass-hairline);
  border-radius: 22px;
  background:
    linear-gradient(150deg, var(--liquid-glass-highlight), transparent 34%), var(--liquid-glass-glass);
  box-shadow:
    inset 0 1px 0 var(--liquid-glass-highlight),
    inset 0 -1px 0 var(--liquid-glass-lowlight),
    0 22px 70px color-mix(in srgb, var(--ink) 9%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.25);
  backdrop-filter: blur(26px) saturate(1.25);
}

.hero-feature-card {
  min-height: 88px;
  padding: 15px 16px;
  border-right-color: var(--liquid-glass-hairline);
  border-radius: 15px;
  transition:
    background 0.22s ease,
    transform 0.22s ease;
}

.hero-feature-card:hover {
  background:
    radial-gradient(
      circle at 50% 0,
      color-mix(in srgb, var(--feature-color) 13%, transparent),
      transparent 72%
    ),
    var(--liquid-glass-glass-strong);
  transform: translateY(-1px);
}

.hero-search button:active,
.home-featured-toggle:active,
.hero-feature-card:active,
#theme-toggle:active {
  transform: scale(0.98);
}

@media (max-width: 1024px) {
  .hero-home,
  #inner > .hero-home {
    grid-template-columns: minmax(380px, 1fr) minmax(390px, 0.9fr);
    gap: 32px;
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (max-width: 768px) {
  #header {
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    backdrop-filter: blur(22px) saturate(1.3);
  }

  .hero-home,
  #inner > .hero-home {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    padding: 56px 20px 74px;
  }

  .hero-home h1,
  #inner > .hero-home h1 {
    font-size: clamp(35px, 10vw, 48px);
  }

  .home-featured-stage {
    border-radius: 20px;
    box-shadow:
      inset 0 1px 0 var(--liquid-glass-highlight),
      0 24px 60px color-mix(in srgb, var(--ink) 12%, transparent);
  }

  .home-featured-slide {
    grid-template-columns: 130px minmax(0, 1fr);
    grid-template-rows: minmax(230px, 1fr) auto;
  }

  .home-featured-image,
  .home-featured-image img {
    min-height: 230px;
  }

  .home-featured-copy {
    padding: 22px 18px 18px;
  }

  .hero-feature {
    margin-top: -26px;
    padding: 7px;
    border-radius: 19px;
  }

  .hero-feature-card {
    border-radius: 13px;
  }
}

@media (max-width: 480px) {
  .hero-home,
  #inner > .hero-home {
    padding-top: 42px;
  }

  .hero-eyebrow {
    font-size: 10px;
  }

  .hero-search {
    border-radius: 15px;
  }

  .hero-search button {
    min-width: 74px;
    padding-inline: 15px;
  }

  .home-featured-slide {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .home-featured-copy > p:not(.home-featured-kicker) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }

  .hero-feature {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-feature-card:last-child {
    grid-column: 1 / -1;
  }
}

/* 第二画面以降：一枚の透明な面に情報をまとめ、線の多さを抑える。 */
#container:has(.hero-home) {
  padding-bottom: 88px;
}

#container:has(.hero-home) #inner > .home-section-head,
#container:has(.hero-home) #inner > .news-list,
#container:has(.hero-home) #inner > .card-grid,
#container:has(.hero-home) #inner > .point-box {
  width: min(1120px, calc(100% - 40px));
}

.home-section-head {
  margin-top: 68px;
  margin-bottom: 21px;
}

.home-section-head .section-title {
  gap: 0;
  color: var(--heading-strong);
  font-size: clamp(28px, 3.1vw, 39px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0.045em;
}

.home-section-head .section-title::before {
  content: none;
}

.section-more {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 12px;
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.section-more:hover {
  background: var(--liquid-glass-glass);
  text-decoration: none;
}

#container:has(.hero-home) #inner > .card-grid {
  overflow: visible;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#container:has(.hero-home) #inner > .card-grid > .card:nth-child(n) {
  grid-template-columns: 106px minmax(170px, 0.6fr) minmax(280px, 1.4fr) 110px;
  gap: 22px;
  min-height: 112px;
  padding: 21px 6px;
  border-bottom-color: var(--line);
  border-radius: 10px;
}

#container:has(.hero-home) #inner > .card-grid > .card:hover {
  background: color-mix(in srgb, var(--card-bg) 44%, transparent);
}

#container:has(.hero-home) #inner > .card-grid > .card .era {
  margin-top: 2px;
  color: var(--accent-text);
  font-size: 12px;
}

#container:has(.hero-home) #inner > .card-grid > .card h3 {
  font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.35;
}

#container:has(.hero-home) #inner > .card-grid > .card p {
  color: color-mix(in srgb, var(--ink) 70%, var(--mute));
  font-size: 14px;
  line-height: 1.75;
  -webkit-line-clamp: 2;
}

#container:has(.hero-home) #inner > .card-grid > .card .card-link {
  display: none;
}

#container:has(.hero-home)
  #inner
  > .card-grid
  > .card:has(.card-date-updated)
  .card-date:not(.card-date-updated) {
  display: none;
}

.news-list {
  overflow: visible;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.news-item,
.news-empty {
  padding: 18px 6px;
  border-top-color: var(--line);
  border-radius: 9px;
}

a.news-item:hover {
  background: color-mix(in srgb, var(--card-bg) 44%, transparent);
}

.news-label {
  padding: 4px 10px;
  border-color: var(--liquid-glass-hairline);
  border-radius: 8px;
  background: transparent;
}

.news-item strong {
  font-size: 16px;
  font-weight: 700;
}

.news-body {
  color: color-mix(in srgb, var(--ink) 68%, var(--mute));
  font-size: 14px;
}

#container:has(.hero-home) #inner > .point-box {
  overflow: hidden;
  padding: 30px 32px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card-bg) 72%, var(--paper));
  box-shadow: none;
}

#container:has(.hero-home) #inner > .point-box p {
  max-width: 860px;
  color: color-mix(in srgb, var(--ink) 78%, var(--mute));
  font-size: 16px;
  line-height: 2;
}

#footer {
  border-top: 1px solid color-mix(in srgb, var(--footer-fg) 12%, transparent);
  background: color-mix(in srgb, var(--footer-bg) 94%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--footer-fg) 6%, transparent);
}

#footer.footer-v2 .footer-grid {
  padding-top: 12px;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-home .hero-copy,
  .home-featured {
    animation: liquid-glass-rise 0.7s cubic-bezier(0.2, 0.75, 0.28, 1) both;
  }

  .home-featured {
    animation-delay: 0.08s;
  }

  @keyframes liquid-glass-rise {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (max-width: 768px) {
  #container:has(.hero-home) {
    padding-bottom: 68px;
  }

  #container:has(.hero-home) #inner > .home-section-head,
  #container:has(.hero-home) #inner > .news-list,
  #container:has(.hero-home) #inner > .card-grid,
  #container:has(.hero-home) #inner > .point-box {
    width: min(100% - 28px, 1120px);
  }

  .home-section-head {
    margin-top: 52px;
    margin-bottom: 18px;
  }

  .home-section-head .section-title {
    font-size: 28px;
  }

  #container:has(.hero-home) #inner > .card-grid,
  .news-list {
    padding: 0;
    border-radius: 0;
  }

  #container:has(.hero-home) #inner > .card-grid > .card:nth-child(n) {
    gap: 8px;
    min-height: 0;
    padding: 19px 4px;
    border-radius: 8px;
  }

  #container:has(.hero-home) #inner > .card-grid > .card p {
    font-size: 15px;
    line-height: 1.85;
  }

  .news-item,
  .news-empty {
    grid-template-columns: 92px 1fr;
    gap: 7px 12px;
    padding: 18px 6px;
  }

  .news-item time,
  .news-label {
    grid-row: 1;
  }

  .news-item strong,
  .news-body {
    grid-column: 1 / -1;
  }

  #container:has(.hero-home) #inner > .point-box {
    padding: 26px 22px;
    border-radius: 12px;
  }
}

@media (max-width: 480px) {
  .home-section-head {
    align-items: center;
  }

  .home-section-head .section-title {
    font-size: 25px;
  }

  .section-more {
    padding-inline: 8px;
    font-size: 12px;
  }

  .news-item strong {
    font-size: 15px;
  }
}

/*
 * ガラス操作部の共通規則。
 * 通常時から素材を見せ、ホバー時は同じ明るい面へ切り替える。
 */
#header .logo a,
#header nav.pc > a,
#theme-toggle,
.hamburger,
.hero-search button,
.hero-actions .btn-secondary,
.home-featured-link,
.home-featured-dots,
.home-featured-toggle,
.hero-feature-card,
.section-more,
.back-to-top {
  border: 1px solid var(--liquid-glass-control-border);
  background:
    linear-gradient(145deg, var(--liquid-glass-control-shine), transparent 48%),
    var(--liquid-glass-control-surface);
  box-shadow:
    inset 0 1px 0 var(--liquid-glass-highlight),
    inset 0 -1px 0 var(--liquid-glass-lowlight),
    0 7px 20px color-mix(in srgb, var(--ink) 7%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    transform 0.12s ease;
}

#header .logo a:hover,
#header nav.pc > a:hover,
#theme-toggle:hover,
.hamburger:hover,
.hero-search button:hover,
.hero-actions .btn-secondary:hover,
.home-featured-link:hover,
.home-featured-dots:hover,
.home-featured-toggle:hover,
.hero-feature-card:hover,
.section-more:hover,
.back-to-top:hover {
  border-color: var(--liquid-glass-control-border-hover);
  background:
    linear-gradient(145deg, var(--liquid-glass-control-shine-hover), transparent 52%),
    var(--liquid-glass-control-surface-hover);
  box-shadow:
    inset 0 1px 0 var(--liquid-glass-control-shine-hover),
    inset 0 -1px 0 var(--liquid-glass-lowlight),
    0 10px 28px color-mix(in srgb, var(--ink) 9%, transparent);
  transform: none;
}

#header .logo a {
  padding: 8px 11px;
  border-radius: 12px;
  color: var(--ink) !important;
}

#header .logo a:hover {
  color: var(--ink) !important;
}

#header nav.pc > a {
  border-radius: 12px;
}

#header nav.pc > a:hover {
  color: var(--ink);
}

#theme-toggle {
  border-radius: 12px;
}

.hero-search button {
  background:
    linear-gradient(145deg, var(--liquid-glass-control-shine), transparent 48%),
    color-mix(in srgb, var(--accent) 10%, var(--liquid-glass-control-surface));
}

.hero-search button:hover {
  background:
    linear-gradient(145deg, var(--liquid-glass-control-shine-hover), transparent 52%),
    color-mix(in srgb, var(--accent) 14%, var(--liquid-glass-control-surface-hover));
}

.hero-actions .btn-secondary,
.home-featured-link,
.section-more {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 12px;
  border-radius: 12px;
  text-decoration: none;
}

.home-featured-link {
  width: fit-content;
  color: var(--accent-text);
}

.home-featured-dots {
  min-height: 38px;
  padding: 2px 8px;
  border-radius: 12px;
}

.home-featured-toggle,
.back-to-top {
  border-radius: 50%;
}

.hero-feature {
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hero-feature-card,
.hero-feature-card:last-child,
.hero-feature-card:nth-child(2n) {
  min-height: 94px;
  padding: 16px 17px;
  border: 1px solid var(--liquid-glass-control-border);
  border-radius: 16px;
}

.hero-feature-card:hover {
  background:
    radial-gradient(
      circle at 50% 0,
      color-mix(in srgb, var(--feature-color) 10%, transparent),
      transparent 72%
    ),
    linear-gradient(145deg, var(--liquid-glass-control-shine-hover), transparent 52%),
    var(--liquid-glass-control-surface-hover);
}

.hero-search button:active,
.hero-actions .btn-secondary:active,
.home-featured-link:active,
.home-featured-toggle:active,
.hero-feature-card:active,
.section-more:active,
.back-to-top:active,
#header .logo a:active,
#header nav.pc > a:active,
#theme-toggle:active,
.hamburger:active {
  transform: scale(0.98);
}

.home-featured-link:hover span,
.hero-actions .btn-secondary:hover span,
.section-more:hover .section-more-arrow,
.hero-feature-card:hover::after {
  transform: none;
}

@media (max-width: 768px) {
  .hero-feature {
    gap: 10px;
    padding: 0;
    border-radius: 0;
  }

  .hero-feature-card,
  .hero-feature-card:nth-child(2n),
  .hero-feature-card:last-child {
    border: 1px solid var(--liquid-glass-control-border);
    border-radius: 14px;
  }
}

/* 透明効果を弱める設定や非対応ブラウザでは、不透明な面に安全に戻す。 */
@media (prefers-reduced-transparency: reduce) {
  #header,
  .hero-search,
  #header .logo a,
  #header nav.pc > a,
  #theme-toggle,
  .hamburger,
  .hero-search button,
  .hero-actions .btn-secondary,
  .home-featured-link,
  .home-featured-dots,
  .home-featured-toggle,
  .hero-feature-card,
  .section-more,
  .back-to-top {
    background: var(--card-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #header,
  .hero-search,
  #header .logo a,
  #header nav.pc > a,
  #theme-toggle,
  .hamburger,
  .hero-search button,
  .hero-actions .btn-secondary,
  .home-featured-link,
  .home-featured-dots,
  .home-featured-toggle,
  .hero-feature-card,
  .section-more,
  .back-to-top {
    background: var(--card-bg);
  }
}

/* ==========================================================================
   Centered editorial header — ロゴをホーム操作として見せ、ナビを中央にまとめる
   ========================================================================== */
#header .inner-header {
  width: min(calc(100% - 32px), 1040px);
  max-width: none;
  height: 78px;
  padding-inline: 0;
  justify-content: center;
  gap: 18px;
}

#header .logo {
  display: flex;
  flex: 0 0 auto;
}

#header .logo a,
#header .logo a:hover {
  width: 44px;
  height: 44px;
  min-height: 44px;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--liquid-glass-control-border);
  border-radius: 12px;
  background:
    linear-gradient(145deg, var(--liquid-glass-control-shine), transparent 52%),
    var(--liquid-glass-control-surface);
  color: var(--ink) !important;
  box-shadow:
    inset 0 1px 0 var(--liquid-glass-highlight),
    inset 0 -1px 0 var(--liquid-glass-lowlight),
    0 6px 18px color-mix(in srgb, var(--ink) 6%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
}

#header .logo a:hover {
  border-color: var(--liquid-glass-control-border-hover);
  background:
    linear-gradient(145deg, var(--liquid-glass-control-shine-hover), transparent 52%),
    var(--liquid-glass-control-surface-hover);
  box-shadow:
    inset 0 1px 0 var(--liquid-glass-control-shine-hover),
    inset 0 -1px 0 var(--liquid-glass-lowlight),
    0 10px 28px color-mix(in srgb, var(--ink) 9%, transparent);
}

#header .logo .logo-icon {
  width: 24px;
  height: 24px;
  margin-right: 0;
  top: 0;
  border-radius: 3px;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 20%, transparent);
}

#header nav.pc {
  gap: 2px;
  margin-left: 0;
}

#header nav.pc > a,
#header nav.pc > a:hover {
  position: relative;
  min-height: 44px;
  padding: 12px 13px 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 74%, transparent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#header nav.pc > a::after {
  content: "";
  position: absolute;
  left: 13px;
  right: calc(13px + 0.12em);
  bottom: 6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.18s ease;
}

#header nav.pc > a:hover,
#header nav.pc > a:focus-visible {
  color: var(--ink);
}

#header nav.pc > a:hover::after,
#header nav.pc > a:focus-visible::after {
  transform: scaleX(1);
}

#theme-toggle,
#theme-toggle:hover {
  min-width: 76px;
  min-height: 40px;
  margin-left: 14px;
  padding: 8px 12px;
  border-radius: 999px;
}

@media (max-width: 1024px) {
  #header .inner-header {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 112px;
    width: 100%;
    height: 62px;
    padding-inline: 8px;
    gap: 4px;
  }

  #header .logo {
    justify-self: center;
  }

  #header .logo a,
  #header .logo a:hover {
    width: 42px;
    height: 42px;
    min-height: 42px;
    color: var(--ink) !important;
  }

  #header .logo .logo-icon {
    width: 21px;
    height: 21px;
    margin-right: 0;
  }

  #header nav.pc {
    width: 112px;
    min-width: 112px;
    justify-self: end;
    gap: 4px;
    margin-left: 0;
  }

  #theme-toggle,
  #theme-toggle:hover {
    min-width: 58px;
    min-height: 42px;
    margin-left: 0;
    padding: 0 9px;
  }

  .hamburger,
  .hamburger:hover {
    justify-self: start;
    width: 42px;
    height: 42px;
    margin-right: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .hamburger span {
    width: 20px;
    background: var(--ink);
  }
}

@media (max-width: 480px) {
  #header .inner-header {
    grid-template-columns: 92px minmax(0, 1fr) 92px;
    padding-inline: 6px;
  }

  #header nav.pc {
    width: 92px;
    min-width: 92px;
  }

  #theme-toggle,
  #theme-toggle:hover {
    min-width: 44px;
    width: 44px;
    padding: 0;
  }

  #theme-toggle .theme-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #header nav.pc > a::after {
    transition: none;
  }
}

/* ==========================================================================
   全体デザイン改善（2026-09）
   トップを入口、一覧を索引、記事を読み物として整理し、カードの反復を抑える。
   ========================================================================== */

body {
  background: var(--paper);
}

/* 共通ヘッダー: 操作を一枚ずつ囲わず、文字ナビと下線で整理する。 */
#header {
  border-bottom-color: color-mix(in srgb, var(--line-strong) 68%, transparent);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--ink) 4%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
  backdrop-filter: blur(22px) saturate(1.12);
}

#header .inner-header {
  width: min(calc(100% - 32px), 1260px);
  height: 68px;
  padding-inline: 0;
}

#header .logo a {
  padding: 7px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#header .logo a:hover {
  border: 0;
  background: color-mix(in srgb, var(--accent-tint) 54%, transparent);
  box-shadow: none;
}

#header nav.pc {
  gap: 12px;
}

#header nav.pc > a {
  position: relative;
  padding: 10px 4px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: color-mix(in srgb, var(--ink) 76%, var(--mute));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#header nav.pc > a::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 2px;
  left: 50%;
  height: 2px;
  background: var(--accent);
  transition: right 0.18s ease, left 0.18s ease;
}

#header nav.pc > a:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
}

#header nav.pc > a:hover::after {
  right: 4px;
  left: 4px;
}

#theme-toggle,
.hamburger {
  border-radius: var(--radius-lg);
}

/* 共通本文: サイドバーを独立カードではなく、紙面の欄外として見せる。 */
#container:not(:has(.hero-home)) {
  width: min(calc(100% - 32px), 1260px);
  padding-top: 46px;
}

#sub:not(.global-drawer-only) {
  width: 218px;
  padding: 8px 24px 18px 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

#sub h3 {
  margin-top: 28px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
  color: var(--accent-text);
  font-size: 11px;
  letter-spacing: 0.14em;
}

#sub ul li a {
  margin: 0;
  padding: 6px 0 6px 11px;
  border-left: 2px solid transparent;
  border-radius: 0;
}

#sub ul li a:hover,
#sub ul li a.active,
#sub ul li a[aria-current="page"] {
  border-left-color: var(--accent);
  background: transparent;
}

#inner:not(:has(.hero-home)) {
  margin-left: 218px;
  padding-left: clamp(34px, 5vw, 72px);
}

/* トップ: 大きな入口を保ちつつ、面の重なりを減らす。 */
#container:has(.hero-home) {
  padding-bottom: 96px;
}

#inner > .hero-home {
  width: min(calc(100% - 40px), 1240px);
  min-height: 570px;
  grid-template-columns: minmax(390px, 0.9fr) minmax(430px, 1fr);
  gap: clamp(42px, 6vw, 82px);
  margin: 0 auto 52px;
  padding: clamp(72px, 8vw, 104px) 0 68px;
  border: 0;
  background: transparent;
}

#inner > .hero-home::before,
#inner > .hero-home::after {
  content: none;
}

.hero-eyebrow {
  margin-bottom: 24px;
  padding: 0 0 7px;
  border: 0;
  border-bottom: 1px solid var(--accent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--accent-text);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hero-home h1,
#inner > .hero-home h1 {
  margin-bottom: 24px;
  font-size: clamp(46px, 5vw, 70px);
  font-weight: 600;
  letter-spacing: 0.055em;
}

.hero-home h1 .logo-icon {
  width: clamp(42px, 4vw, 56px);
  height: clamp(42px, 4vw, 56px);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.hero-home .tagline,
#inner > .hero-home .tagline {
  margin-bottom: 34px;
}

.hero-search {
  gap: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hero-search input {
  min-height: 54px;
  padding-inline: 0 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.hero-search button {
  min-width: 80px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-lg);
}

.hero-search:focus-within {
  border-bottom-color: var(--accent);
  box-shadow: 0 2px 0 var(--accent);
}

.hero-actions {
  margin-top: 18px;
}

.hero-actions .btn-secondary {
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.home-featured-stage {
  border-color: var(--line-strong);
  border-radius: calc(var(--radius-lg) * 3);
  box-shadow: var(--shadow-soft);
}

.home-featured-slide {
  grid-template-columns: minmax(190px, 0.78fr) minmax(0, 1fr);
  background: var(--card-bg);
}

.home-featured-image,
.home-featured-image img {
  min-height: 384px;
}

.home-featured-copy {
  padding: 36px 30px 30px;
}

.home-featured h2 {
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 600;
}

.home-featured-credit {
  background: transparent;
}

.home-featured-dots,
.home-featured-toggle {
  border-radius: var(--radius-lg);
}

/* 記事の探し方: 5枚のカードではなく、一本の索引帯にする。 */
#inner > .hero-feature {
  width: min(calc(100% - 40px), 1120px);
  gap: 0;
  margin: 0 auto 60px;
  padding: 12px 0;
  border-top: 0;
  border-bottom: 0;
  background: transparent;
}

.hero-feature-card,
.hero-feature-card:last-child,
.hero-feature-card:nth-child(2n) {
  min-height: 92px;
  padding: 16px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hero-feature-card:last-child {
  border-right: 0;
}

.hero-feature-card::before {
  content: "";
  width: 18px;
  height: 2px;
  margin-bottom: 10px;
  background: var(--feature-color);
}

.hero-feature-card:hover {
  background: color-mix(in srgb, var(--card-bg) 56%, transparent);
  box-shadow: none;
}

.hero-feature-card strong {
  font-size: 19px;
}

.hero-feature-card > span {
  margin-top: 5px;
  font-size: 12px;
}

/* トップ第二画面: 見出しと行のリズムを揃える。 */
#container:has(.hero-home) #inner > .home-section-head,
#container:has(.hero-home) #inner > .news-list,
#container:has(.hero-home) #inner > .card-grid,
#container:has(.hero-home) #inner > .point-box {
  width: min(calc(100% - 40px), 1120px);
}

.home-section-head {
  margin-top: 72px;
  margin-bottom: 18px;
}

.home-section-head .section-title {
  font-size: clamp(27px, 3vw, 38px);
  font-weight: 600;
}

.section-more {
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#container:has(.hero-home) #inner > .card-grid,
#container:has(.hero-home) #inner > .news-list {
  border-top: 0;
}

#container:has(.hero-home) #inner > .news-list .news-item,
#container:has(.hero-home) #inner > .news-list .news-empty {
  border-top: 0;
}

#container:has(.hero-home) #inner > .card-grid > .card:nth-child(n) {
  grid-template-columns: 112px minmax(150px, 0.58fr) minmax(260px, 1.42fr) 112px;
  gap: 22px;
  padding: 23px 4px;
  border-bottom: 0;
  border-radius: 0;
}

#container:has(.hero-home) #inner > .card-grid > .card:hover {
  background: color-mix(in srgb, var(--card-bg) 54%, transparent);
}

#container:has(.hero-home) #inner > .point-box {
  padding: 30px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* 一覧ページ: 箱の集合から、見開きの索引へ。 */
.breadcrumb {
  margin-bottom: 34px;
  letter-spacing: 0.04em;
}

.article-header,
.article-body {
  max-width: 800px;
}

.article-header {
  margin-bottom: 54px;
  padding-bottom: 28px;
}

.article-header .era-badge {
  margin-bottom: 18px;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--accent);
  border-radius: 0;
  background: transparent;
}

.article-header h1 {
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 600;
  letter-spacing: 0.045em;
}

.article-header .subtitle {
  max-width: 680px;
  font-weight: 500;
}

.part-title {
  margin: 68px 0 14px;
  padding: 13px 0 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-left: 4px solid var(--accent);
  border-radius: 0;
  background: transparent;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 600;
}

#inner:not(:has(.hero-home)) > h3 {
  margin-top: 34px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 19px;
}

.index-list {
  gap: 0 26px;
  margin-bottom: 34px;
}

.index-item a,
.index-empty {
  position: relative;
  min-height: 58px;
  padding: 13px 34px 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.index-item a::before,
.index-empty::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--index-era, var(--line-strong));
  transform: translateY(-50%);
}

.index-item a::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 4px;
  color: var(--accent-text);
  font-family: var(--sans);
  font-size: 12px;
  transform: translateY(-50%);
}

.index-item a:hover {
  padding-left: 22px;
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--card-bg) 48%, transparent);
  box-shadow: none;
  transform: none;
}

.index-title {
  font-size: 17px;
  font-weight: 600;
}

.index-era {
  border-radius: var(--radius);
  background: transparent;
}

/* 記事ページ: 要約は欄外注、本文は読み物として余白を広く取る。 */
.article-body {
  max-width: 740px;
}

.article-body > .point-box:first-child {
  margin: 38px 0 58px;
  padding: 24px 0 24px 26px;
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 0;
  background: color-mix(in srgb, var(--card-bg) 54%, transparent);
  box-shadow: none;
}

.article-body > .point-box:first-child::before {
  content: none;
}

.article-body > .point-box:first-child .point-title {
  margin-bottom: 18px;
  font-size: 12px;
  letter-spacing: 0.12em;
}

.article-body p {
  margin-bottom: 27px;
  font-size: 16.5px;
  line-height: 2.08;
}

.article-body h2 {
  margin-top: 76px;
  padding-bottom: 14px;
  gap: 16px;
  font-size: clamp(25px, 3vw, 32px);
  font-weight: 600;
}

.article-body h2::before {
  min-width: 2.3em;
  color: var(--accent-text);
  font-size: 0.52em;
  letter-spacing: 0.12em;
}

.article-body h2::after {
  width: 72px;
  height: 2px;
}

.article-body h3 {
  margin-top: 48px;
  padding-left: 15px;
  border-left: 3px solid var(--line-strong);
  font-weight: 600;
}

.article-figure {
  margin-block: 42px;
}

.article-figure img {
  border-radius: 0;
}

.related-articles {
  margin-top: 78px;
}

.related-articles .index-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.article-nav-link {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.article-nav-link:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--card-bg) 48%, transparent);
  box-shadow: none;
}

/* フッター: 本文から静かに切り替え、罫線の密度を合わせる。 */
#footer {
  border-top: 3px solid var(--accent-dark);
  box-shadow: none;
}

#footer.footer-v2 .footer-grid {
  padding-top: 28px;
}

#footer.footer-v2 .footer-brand {
  font-weight: 600;
  letter-spacing: 0.06em;
}

@media (prefers-reduced-motion: no-preference) {
  #header nav.pc > a::after,
  .index-item a {
    transition: padding 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  }

  #container:has(.hero-home) #inner > .card-grid > .card:nth-child(n) {
    transition: background 0.18s ease, border-color 0.18s ease;
  }
}

@media (max-width: 1024px) {
  #inner > .hero-home {
    grid-template-columns: minmax(340px, 0.86fr) minmax(390px, 1fr);
    gap: 34px;
  }
}

@media (max-width: 768px) {
  #header .inner-header {
    width: calc(100% - 24px);
  }

  #container:not(:has(.hero-home)) {
    width: min(calc(100% - 28px), 1260px);
    padding-top: 30px;
  }

  #inner:not(:has(.hero-home)) {
    margin-left: 0;
    padding-left: 0;
  }

  #inner > .hero-home {
    width: min(calc(100% - 28px), 1240px);
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
    padding: 54px 0 56px;
  }

  .hero-home h1,
  #inner > .hero-home h1 {
    font-size: clamp(38px, 11vw, 52px);
    white-space: normal;
  }

  .home-featured-slide {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .home-featured-image,
  .home-featured-image img {
    min-height: 240px;
  }

  #inner > .hero-feature {
    width: min(calc(100% - 28px), 1120px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: 8px;
  }

  .hero-feature-card,
  .hero-feature-card:nth-child(2n),
  .hero-feature-card:last-child {
    border: 0;
    border-radius: 0;
  }

  .hero-feature-card:nth-child(odd) {
    border-right: 0;
  }

  .hero-feature-card:last-child {
    grid-column: 1 / -1;
    border-bottom: 0;
  }

  #container:has(.hero-home) #inner > .home-section-head,
  #container:has(.hero-home) #inner > .news-list,
  #container:has(.hero-home) #inner > .card-grid,
  #container:has(.hero-home) #inner > .point-box {
    width: min(calc(100% - 28px), 1120px);
  }

  .article-header h1 {
    font-size: clamp(35px, 10vw, 48px);
  }

  .index-list,
  .related-articles .index-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-body p {
    font-size: 16px;
    line-height: 2;
  }
}

@media (max-width: 480px) {
  #inner > .hero-home {
    padding-top: 42px;
  }

  .home-featured-slide {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .home-featured-copy {
    padding: 22px 18px 18px;
  }

  #inner > .hero-feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-feature-card:nth-child(odd) {
    border-right: 0;
  }

  .hero-feature-card:last-child {
    grid-column: auto;
  }

  .article-body > .point-box:first-child {
    padding: 20px 0 20px 18px;
  }

  .article-body h2 {
    gap: 10px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  #header {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ==========================================================================
   ヘッダー操作の安定化と検索面（2026-09）
   ホバーで寸法を変えず、虫眼鏡から検索面を開く。
   ========================================================================== */

#header .logo a,
#header .logo a:hover,
#header nav.pc > a,
#header nav.pc > a:hover,
#theme-toggle,
#theme-toggle:hover,
.header-search .search-toggle,
.header-search .search-toggle:hover {
  transform: none;
}

/* :hover 付きの古い規則が余白を広げないよう、3状態で同じ寸法を宣言する。 */
#header nav.pc > a,
#header nav.pc > a:hover,
#header nav.pc > a:focus-visible {
  min-width: 0;
  min-height: 44px;
  padding: 10px 4px 8px;
  border-width: 0;
  font-size: 13px;
  letter-spacing: 0.12em;
  line-height: 1.8;
  transition: color 0.18s ease, background-color 0.18s ease;
}

#header nav.pc > a::after {
  right: 4px;
  left: 4px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.18s ease;
}

#header nav.pc > a:hover::after,
#header nav.pc > a:focus-visible::after {
  right: 4px;
  left: 4px;
  transform: scaleX(1);
}

body:has(.hero-home) .header-search,
.header-search {
  display: inline-flex;
  align-items: center;
  flex: 0 0 42px;
  min-width: 42px;
  min-height: 42px;
  margin-left: 2px;
}

.header-search .search-toggle,
.header-search .search-toggle:hover {
  display: grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  transition: color 0.18s ease, background-color 0.18s ease;
}

.header-search .search-toggle:hover,
.header-search .search-toggle:focus-visible,
.header-search.open .search-toggle {
  background: color-mix(in srgb, var(--accent-tint) 58%, transparent);
  color: var(--accent-text);
}

.header-search .search-toggle svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 閉じた検索欄は場所もフォーカスも取らず、ヘッダの並びを固定する。 */
.header-search .search-input {
  width: 0;
  margin: 0;
  padding: 0;
  border-color: transparent;
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 1025px) {
  .header-search.open::before {
    content: "";
    position: fixed;
    z-index: -2;
    inset: 68px 0 0;
    background: color-mix(in srgb, var(--paper) 56%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(0.82);
    backdrop-filter: blur(18px) saturate(0.82);
  }

  .header-search.open::after {
    content: "";
    position: fixed;
    z-index: -1;
    top: 68px;
    right: 0;
    left: 0;
    height: 176px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--ink) 8%, transparent);
  }

  .header-search.open .search-input {
    position: fixed;
    z-index: 1102;
    top: 96px;
    left: 50%;
    width: min(620px, calc(100vw - 80px));
    min-height: 52px;
    margin: 0;
    padding: 10px 54px 10px 48px;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 22px;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%);
    transition: border-color 0.18s ease;
  }

  .header-search.open .search-input:focus {
    border-bottom-color: var(--accent);
    box-shadow: 0 1px 0 var(--accent);
  }

  .header-search.open .search-close {
    position: fixed;
    z-index: 1103;
    top: 101px;
    right: max(46px, calc((100vw - 620px) / 2 + 8px));
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mute);
    font-size: 20px;
  }

  .header-search.open .search-close:hover {
    background: color-mix(in srgb, var(--accent-tint) 58%, transparent);
    color: var(--ink);
  }

  .header-search .search-results {
    position: fixed;
    z-index: 1102;
    top: 158px;
    right: auto;
    left: 50%;
    width: min(620px, calc(100vw - 80px));
    min-width: 0;
    max-height: min(390px, calc(100vh - 188px));
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    transform: translateX(-50%);
  }
}

@media (max-width: 1024px) {
  .header-search.open {
    width: auto;
    min-width: 0;
  }

  .header-search.open .search-input {
    pointer-events: auto;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .header-search.open::before,
  .header-search.open::after {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ==========================================================================
   記事ページ 2026-09 修正案: 「型の反復」を減らす
   - 番号付き見出し・短い朱線・左罫線など、どの節でも同じ形で繰り返される飾りをやめ、
     見出しは文字と1本の罫線だけで立たせる。
   - 要約は囲みではなく、上下の罫線で区切った欄外注にする。
   - 図版は白い板を貼らず、紙色の上に細い枠で置く。
   - 1文1段落はそのまま、段落間の余白を狭めて「文のかたまり」に見えるようにする。
   ========================================================================== */

/* 記事の表題: 朱の短線をやめ、罫線1本で区切る */
.article-header::after { content: none; }
.article-header { border-bottom: 1px solid var(--line-strong); }

/* 大見出し: 番号と短い朱線をやめる */
.article-body h2 {
  display: block;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-strong);
  letter-spacing: 0.06em;
}
.article-body h2::before { content: none; counter-increment: none; }
.article-body h2::after { content: none; }

/* 小見出し: 左罫線をやめ、文字だけで立たせる */
.article-body h3 {
  padding-left: 0;
  border-left: 0;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
  font-size: 20px;
}

/* 要約: 囲みではなく欄外注。上下の細い罫線で本文と区切る */
.article-body > .point-box:first-child {
  margin: 34px 0 60px;
  padding: 18px 0 20px;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
}
.article-body > .point-box:first-child .point-title {
  margin-bottom: 12px;
  color: var(--supplement-text);
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
}
.article-body > .point-box:first-child p {
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 8px;
}

/* 本文: 1文1段落のまま、段落間を詰めて文のかたまりに見せる。
   14px では1文ごとの区切りが弱くなりすぎるため 18px に置く。 */
.article-body p {
  margin-bottom: 18px;
  line-height: 1.95;
}
.article-body h2 + p,
.article-body h3 + p { margin-top: 0; }

/* 図版: 白い板をやめ、紙色の上に細い枠。キャプションは明朝で図番を立たせる */
.article-figure img {
  border: 1px solid var(--line-strong);
}
.article-figure figcaption {
  font-family: var(--serif);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  margin-top: 12px;
}

/* ==========================================================================
   トップページ 2026-09 修正案: 「型の反復」を減らす
   - 看板の小見出しの朱線、入口5項目の色付き短線と矢印など、繰り返しの飾りをやめる。
   - 注目記事の板は角丸と影をやめ、罫線1本の枠にする。ボタン状の操作部は文字リンクへ。
   - 検索ボタン・切替ボタン・お知らせの札は、角丸の「ガラス」風をやめて平らな枠にする。
   ========================================================================== */

/* 看板: 小見出しの朱線をやめ、文字だけにする */
.hero-eyebrow {
  padding: 0;
  border: 0;
  color: var(--supplement-text);
  letter-spacing: 0.18em;
}

/* 検索ボタン: 平らな枠 */
.hero-search button {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero-search button:hover {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent-text);
  box-shadow: none;
}

/* 注目記事: 角丸・影・下地の階調をやめ、罫線1本の枠に */
.home-featured-stage {
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.home-featured-slide {
  background: transparent;
}
.home-featured-slide::before {
  content: none;
}
.home-featured-copy {
  padding: 34px 30px 28px;
}
.home-featured-kicker {
  color: var(--supplement-text);
  letter-spacing: 0.18em;
}
.home-featured-credit {
  border-top: 1px solid var(--line);
}

/* 「記事を読む」: ボタンではなく下線付きの文字リンク */
.home-featured-link {
  min-height: 0;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid var(--accent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.home-featured-link:hover {
  border-color: var(--accent);
  background: transparent;
  box-shadow: none;
  color: var(--accent-dark);
}

/* 切替の点と一時停止: 囲みをやめる */
.home-featured-dots {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.home-featured-dots:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.home-featured-toggle {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.home-featured-toggle:hover {
  border-color: var(--accent);
  background: transparent;
  box-shadow: none;
}

/* 記事の探し方: 色付き短線と矢印をやめ、上下罫線と縦の細線だけの索引帯に */
#inner > .hero-feature {
  padding: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.hero-feature-card,
.hero-feature-card:nth-child(2n) {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
  min-height: 0;
  padding: 20px 18px 18px;
  border-right: 1px solid var(--line);
}
.hero-feature-card:last-child {
  border-right: 0;
}
.hero-feature-card::before,
.hero-feature-card::after {
  content: none;
  display: none;
}
.hero-feature-card strong {
  font-size: 19px;
  letter-spacing: 0.08em;
}
.hero-feature-card > span {
  margin-top: 6px;
}
.hero-feature-card:hover {
  background: transparent;
  transform: none;
}
.hero-feature-card:hover strong {
  color: var(--accent-text);
}

/* お知らせの札: 角丸を小さく、細い枠だけに */
.news-label {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
}

@media (max-width: 768px) {
  .hero-feature-card,
  .hero-feature-card:nth-child(2n),
  .hero-feature-card:last-child {
    padding: 14px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .hero-feature-card:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
  .hero-feature-card:nth-child(odd) {
    border-right: 1px solid var(--line);
  }
  .hero-feature-card:last-child {
    border-right: 0;
    border-bottom: 0;
  }
}

@media (max-width: 480px) {
  /* 1列では各項目の下に罫線を戻し、最後だけ外す */
  .hero-feature-card,
  .hero-feature-card:nth-child(odd),
  .hero-feature-card:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .hero-feature-card:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 768px) {
  /* 既存の不具合の修正: 4836行付近の4列指定が媒体幅の指定より後にあり、
     768px以下でも4列のまま子要素が1列目に押し込まれて幅112pxで折り返していた。
     小画面では1列に戻す。 */
  #container:has(.hero-home) #inner > .card-grid > .card:nth-child(n) {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 18px 0;
  }
}

/* ========== 時代色：色で時代を示す（2026-09） ==========
   時代色は飾りではなく「どの時代の話か」を示すためだけに使う。
   並び順などで色を割り振らない。朱はサイトの印と、図版の決定的な一件に残す。 */

/* トップの最新記事：時代名を記事の時代色で */
#container:has(.hero-home) #inner > .card-grid > .card .era {
  color: var(--card-era);
}

/* 記事ページ：パンくずの部（mokuji.html#partN）から時代を判定 */
body:has(.breadcrumb a[href$="mokuji.html#part0"]) { --page-era: var(--era-tsushi); }
body:has(.breadcrumb a[href$="mokuji.html#part1"]) { --page-era: var(--era-kodai); }
body:has(.breadcrumb a[href$="mokuji.html#part2"]) { --page-era: var(--era-chusei); }
body:has(.breadcrumb a[href$="mokuji.html#part3"]) { --page-era: var(--era-kinsei); }
body:has(.breadcrumb a[href$="mokuji.html#part4"]) { --page-era: var(--era-kingendai); }
.article-header .era-badge {
  color: var(--page-era, var(--accent-text));
  border-bottom-color: var(--page-era, var(--accent));
}

/* 章節別目次：部見出しの左罫 */
.part-title#part0 { border-left-color: var(--era-tsushi); }
.part-title#part1 { border-left-color: var(--era-kodai); }
.part-title#part2 { border-left-color: var(--era-chusei); }
.part-title#part3 { border-left-color: var(--era-kinsei); }
.part-title#part4 { border-left-color: var(--era-kingendai); }

/* 人物一覧：時代見出しの縦罫 */
.section-title#kodai::before { background: var(--era-kodai); }
.section-title#chusei::before { background: var(--era-chusei); }
.section-title#kinsei::before { background: var(--era-kinsei); }
.section-title#kingendai::before { background: var(--era-kingendai); }

/* 章節別目次：章見出しの縦罫も部と同じ時代色 */
.section-title#ch1::before, .section-title#ch2::before, .section-title#ch3::before, .section-title#ch4::before { background: var(--era-kodai); }
.section-title#ch5::before, .section-title#ch6::before, .section-title#ch7::before { background: var(--era-chusei); }
.section-title#ch8::before, .section-title#ch9::before, .section-title#ch10::before { background: var(--era-kinsei); }
.section-title#ch11::before, .section-title#ch12::before, .section-title#ch13::before, .section-title#ch14::before, .section-title#ch15::before, .section-title#ch16::before, .section-title#ch17::before, .section-title#ch18::before { background: var(--era-kingendai); }

/* 一覧の矢印は朱をやめて補助色に（朱を使う場所を絞る） */
.index-item a::after { color: var(--mute); }

/* ========== 線の太さを3段階に（2026-09） ==========
   罫 1px（--rule）／色線 2px（--rule-color）／見出し線 4px（--rule-head）。
   色を付ける線は 2px 以上にし、1px の色線は作らない。 */
#footer { border-top-width: var(--rule-color); }
.home-featured-link { border-bottom-width: var(--rule-color); }
.article-header .era-badge { border-bottom-width: var(--rule-color); }
.reading-progress { height: var(--rule-color); }
.part-title { border-left-width: var(--rule-head); }
.section-title::before { width: var(--rule-head); }
.nenpyo-section-title::before { width: var(--rule-head); border-radius: 0; }
.point-box::before { height: var(--rule-head); opacity: 1; }

/* ========== 小さな文字の下限（2026-09） ==========
   補助の文字は 12px 未満にしない。時代名は色が読めるよう 13px。 */
#container:has(.hero-home) #inner > .card-grid > .card .era,
.article-header .era-badge { font-size: 13px; }
#container:has(.hero-home) #inner > .card-grid > .card .card-date,
#container:has(.hero-home) #inner > .card-grid > .card .card-link,
.news-label,
.hero-eyebrow,
.hero-actions .btn-secondary,
#sub h3,
.hero-stats dt,
.nenpyo-table th,
.nenpyo-table .era-col { font-size: 12px; }
.hero-stats dd small { font-size: 11px; }

/* タブレット以下では通常サイドバーもドロワーとして開くため、紙色の面を保つ。 */
@media (max-width: 1024px) {
  #sub:not(.global-drawer-only) {
    background: var(--paper);
  }
}

/* ==========================================================================
   読み物と索引の紙面（2026-10）
   共通の文字組みを先に決め、トップ・索引・本文は用途に応じて組む。
   画面用の仕上げをここに集約し、既存の印刷用配色には干渉しない。
   ========================================================================== */
@media screen {
  #header {
    background: var(--paper);
    border-bottom: var(--rule) solid var(--line);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  #header .inner-header {
    width: min(calc(100% - 64px), 1120px);
    justify-content: space-between;
    gap: 24px;
  }
  #header .logo { width: auto; flex: 0 0 auto; margin-right: auto; }
  #header .logo a, #header .logo a:hover {
    padding: 0;
    width: auto;
    justify-content: flex-start;
    min-height: 44px;
    background: transparent;
    box-shadow: none;
    color: var(--ink) !important;
  }
  #header .site-name {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.08em;
  }
  #header .logo .logo-icon {
    width: 24px;
    height: 24px;
    filter: none;
    box-shadow: none;
  }
  #header nav.pc { gap: 18px; }
  #theme-toggle, #theme-toggle:hover, .hamburger, .hamburger:hover,
  .shiori-btn, .shiori-btn:hover, .back-to-top, .back-to-top:hover {
    border: var(--rule) solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: none;
  }
  .shiori-btn[aria-pressed="true"] { color: var(--accent-text); border-color: var(--accent); }
  .hamburger span { background: var(--ink); }
  .header-search.open::before, .header-search.open::after {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .header-search.open::after { background: var(--paper); }
  .header-search .search-results, .hero-search-results {
    border-radius: var(--radius);
    background: var(--card-bg);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .hero-home .hero-copy { animation: none; }

  #inner > .hero-home {
    width: min(calc(100% - 64px), 1120px);
    min-height: 0;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    align-items: start;
    gap: 64px;
    margin: 0 auto;
    padding: 64px 0 48px;
    background: transparent !important;
  }
  .hero-eyebrow { margin-bottom: 20px; font-weight: 500; letter-spacing: 0.08em; }
  #inner > .hero-home h1 {
    margin: 0 0 22px;
    font-size: clamp(38px, 4.5vw, 56px);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.4;
  }
  .hero-home h1 .logo-icon { display: none; }
  #inner > .hero-home .tagline {
    margin: 0 0 28px;
    max-width: none;
    text-wrap: pretty;
    font-size: 18px;
    line-height: 1.95;
  }
  .hero-home .tagline .tagline-lead { font-size: inherit; }
  .hero-search { width: 100%; }
  .hero-search input { font-size: 16px; min-height: 48px; }
  .hero-search button, .hero-search button:hover {
    min-width: 64px;
    min-height: 44px;
    padding: 8px 14px;
    border: 0;
    border-radius: 0;
    transform: none;
  }
  .hero-actions { margin-top: 16px; gap: 16px; }
  .hero-stats div { padding: 0; }
  .hero-stats dt, .hero-actions .btn-secondary { font-weight: 500; }
  .hero-stats dd { font-size: 17px; }
  .hero-stats dd small { font-size: 12px; }

  .home-reading { padding-left: 30px; border-left: var(--rule) solid var(--line); }
  .home-reading > h2 {
    margin-bottom: 18px;
    color: var(--mute);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
  }
  .home-reading-feature { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 22px; }
  .home-reading-image { display: block; }
  .home-reading-image img { display: block; width: 100%; height: auto; }
  .home-reading-feature h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 27px; font-weight: 600; }
  .home-reading-feature h3 a { color: var(--ink); text-decoration: none; }
  .home-reading-feature p { color: var(--mute); font-size: 14px; line-height: 1.85; }
  .home-reading-link { display: inline-block; margin-top: 10px; padding-block: 3px; font-size: 13px; }
  .home-reading-credit { margin: 12px 0 20px; color: var(--mute); font-size: 12px; line-height: 1.7; }
  .home-reading-credit a { color: inherit; }
  .home-reading-more { list-style: none; border-top: var(--rule) solid var(--line); }
  .home-reading-more li { border-bottom: var(--rule) solid var(--line); }
  .home-reading-more a {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    padding-block: 12px;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 17px;
    text-decoration: none;
  }
  .home-reading-more a > span:first-child { grid-column: 1; color: var(--mute); font-family: var(--sans); font-size: 12px; }
  .home-reading-more a > span:last-child { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .home-reading a:hover { color: var(--accent-text); text-decoration: underline; }

  #container:has(.hero-home) #inner > :is(.hero-feature, .home-section-head, .card-grid, .news-list, .point-box) {
    width: min(calc(100% - 64px), 1120px);
  }
  #inner > .hero-feature { margin-bottom: 40px; }
  .hero-feature-card, .hero-feature-card:nth-child(2n), .hero-feature-card:last-child {
    min-height: 0;
    padding: 18px 20px;
    border-radius: 0;
  }
  .hero-feature-card:first-child { padding-left: 0; }
  .hero-feature-card strong { font-size: 19px; font-weight: 600; }
  .hero-feature-card > span { font-size: 12px; font-weight: 400; line-height: 1.8; }
  .home-section-head { margin-top: 46px; margin-bottom: 16px; }
  .section-title, #inner:not(:has(.hero-home)) > h3.section-title {
    padding-left: 0;
    border-left: 0;
    background: transparent;
    box-shadow: none;
  }
  .section-title::before, .section-title::after { content: none; }
  .home-section-head .section-title { font-size: 26px; }
  .section-more { font-weight: 500; font-size: 12px; }
  #container:has(.hero-home) #inner > .card-grid { border-top: var(--rule) solid var(--line-strong); }
  #container:has(.hero-home) #inner > .card-grid > .card:nth-child(n) {
    grid-template-columns: 92px minmax(180px, 0.85fr) minmax(0, 1.6fr);
    gap: 10px 28px;
    padding: 25px 0;
    border-bottom: var(--rule) solid var(--line);
  }
  #container:has(.hero-home) #inner > .card-grid > .card .era { grid-column: 1; grid-row: 1 / 3; }
  #container:has(.hero-home) #inner > .card-grid > .card h3 { grid-column: 2; grid-row: 1; font-size: 23px; line-height: 1.65; letter-spacing: 0; }
  #container:has(.hero-home) #inner > .card-grid > .card p { grid-column: 3; grid-row: 1 / 3; font-size: 14px; line-height: 1.95; -webkit-line-clamp: 3; }
  #container:has(.hero-home) #inner > .card-grid > .card .card-foot { grid-column: 2; grid-row: 2; align-items: flex-start; }
  #container:has(.hero-home) #inner > .card-grid > .card .card-date { font-weight: 400; letter-spacing: 0; }
  .news-label { padding: 0; border: 0; background: transparent; font-weight: 500; }
  .news-item { box-shadow: none; border-radius: 0; }

  #container:not(:has(.hero-home)) { width: min(calc(100% - 64px), 1120px); padding: 32px 0 64px; }
  #inner:not(:has(.hero-home)) { padding-left: 48px; }
  #sub h3 { color: var(--mute); font-weight: 500; letter-spacing: 0.04em; }
  /* 欄の見出しは下の項目に寄せ、前の欄とは離す（項目どうし ≦ 見出しから項目 ＜ 欄どうし）。 */
  #sub h3 { margin-top: 40px; margin-bottom: 0; }
  #sub ul li { padding-block: 0; }
  #sub ul li a { padding-block: 4px; }
  .breadcrumb { margin-bottom: 24px; font-size: 12px; }
  .article-header { max-width: 740px; margin-bottom: 30px; padding-bottom: 24px; }
  .article-header h1 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.5; letter-spacing: 0.03em; }
  .article-header .era-badge { margin-bottom: 10px; padding: 0; border: 0; }
  .article-header:not(:has(.article-meta)) .era-badge { display: none; }
  .article-header .subtitle { margin-top: 12px; font-size: 15px; line-height: 1.9; }
  .article-meta { margin-top: 16px; }
  .article-body > .point-box:first-child { margin: 0 0 36px; padding: 0 0 24px; border-top: 0; }
  .article-body > .point-box:first-child .point-title { margin-bottom: 12px; font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em; }
  .article-body p { font-size: 17px; line-height: 1.95; margin-bottom: 10px; }
  .article-body h2 { font-size: 26px; line-height: 1.5; }
  .article-body h3 { font-size: 20px; line-height: 1.6; }

  /* 本文の近接（2026-10）
     <p> は意味のまとまりの段落（2026-10に1文1段落を廃止）。段落どうしは行間より少しだけ広げる。
     見出しは上を広く・下を狭くして後ろの本文に属させ、図は前後の説明文と組にする。
     目に見える空き（行の上下の余白を含む。PC）はおよそ次の順。
       行どうし 16 ＜ 見出しから本文 22 ＜ 段落どうし 26 ＜ 本文と図 32 ＜ 小見出しの前 70 ＜ 大見出しの前 100 */
  .article-body > h2 { margin-top: 86px; margin-bottom: 14px; }
  .article-body > h3 { margin-top: 56px; margin-bottom: 6px; }
  .article-body > h2 + h3 { margin-top: 24px; }
  /* 要約の直後は節の切れ目が明らかなので、最初の大見出しの前を詰める。 */
  .article-body > .point-box:first-child + h2,
  .article-body > .point-box:first-child + .article-figure + h2 { margin-top: 48px; }
  /* 図・表は直前の文章と、直後の「図1では」などの説明文の両方と組にする。題名は図に寄せる。 */
  .article-body > :is(.article-figure, .nenpyo-table) { margin-top: 24px; margin-bottom: 24px; }
  .article-body > :is(h2, h3) + :is(.article-figure, .nenpyo-table) { margin-top: 16px; }
  .article-figure img { vertical-align: top; } /* 行の下の余りをなくし、題名を図に付ける */
  .article-figure figcaption { margin-top: 8px; }
  .nenpyo-table caption { padding-bottom: 8px; }
  .article-body > :is(ul, ol) { margin-top: 0; margin-bottom: 12px; }
  .article-body > :is(ul, ol) li { margin-bottom: 6px; }
  /* 本文中の補足の枠は本文から一段離し、別の話であることを示す。 */
  .article-body > .point-box:not(:first-child) { margin-top: 32px; margin-bottom: 32px; }
  .article-body > .point-box p, .article-body > .point-box:first-child p { margin-bottom: 8px; }
  /* 関連記事と前後の記事: 見出しの罫線と重なる上の罫線をやめ、離れて浮く線をなくす。 */
  .related-articles { margin-top: 96px; padding-top: 0; border-top: 0; }
  .related-articles h2 { margin-top: 0; }
  .article-nav { margin-top: 48px; padding-top: 0; border-top: 0; }

  /* 本文の整列（2026-10）
     本文欄の左端と右端を「見えない線」にし、すべての要素をどちらかに付ける。
     - 左端: 見出し・段落・図・図の題名・表・箇条書きの文字・関連記事・前の記事
     - 右端: 段落は両端揃えで右端もそろえる。次の記事は右寄せで右端に付ける
     - 箇条書きの記号と左欄の選択中の印は線の外へ出し、文字の頭をそろえる */
  .article-body > p,
  .article-body > .point-box p { text-align: justify; text-justify: inter-character; }
  .article-figure, .article-figure figcaption { text-align: left; }
  .article-figure img { display: block; margin-inline: 0; }
  .article-figure img[src*=".svg"] { width: 100%; }
  .article-body .nenpyo-table caption { text-align: left; }
  .article-body .nenpyo-table :is(th, td):first-child { padding-left: 0; }
  .article-body .nenpyo-table :is(th, td):last-child { padding-right: 0; }
  .article-body .nenpyo-table tbody tr:last-child > * { border-bottom: var(--rule) solid var(--line-strong); }
  .article-body > :is(ul, ol) { padding-left: 0; list-style-position: outside; }
  .related-articles .related-index-list { padding-left: 0; }
  .article-nav-link, .article-nav-link:hover { padding-inline: 0; }
  #sub ul li a { margin-left: -13px; }

  /* 「幕藩体制」で先行適用。話題の区切りと図・説明のまとまりを示す。 */
  .article-reading-example .article-body > h3 {
    font-weight: 700;
    letter-spacing: 0.03em;
  }
  .article-reading-example .article-body > p strong { font-weight: 700; }
  .article-reading-example .article-figure {
    width: 100%;
    max-width: 560px;
    text-align: left;
  }
  .article-reading-example .article-figure img { display: block; width: 100%; }
  .article-reading-example .article-figure figcaption {
    font-size: 14px;
    line-height: 1.8;
  }
  .article-toc { margin: 20px 0 24px; border-radius: 0; background: transparent; box-shadow: none; }
  .point-box { border-radius: 0; box-shadow: none; background: transparent; }
  .part-title { margin-top: 44px; font-size: 27px; padding-block: 8px 12px; }
  /* 目次・索引の近接: 章の見出しは下の記事名に寄せ、部・章の切れ目を段階的に広げる。
     部の説明 → 章 32 ＜ 章どうし 48 ＜ 部どうし 80 */
  #inner > .part-title { margin-top: 80px; }
  #inner > .article-header + .part-title { margin-top: 44px; }
  :is(#inner, .index-section) > h2.section-title { margin-bottom: 4px; line-height: 1.5; }
  #inner > :is(.part-title, h2.section-title) + p { margin-bottom: 0; }
  #inner > h3.section-title { margin-top: 48px; margin-bottom: 4px; }
  #inner > :is(.part-title, .part-title + p) + h3.section-title { margin-top: 32px; }
  #inner > .index-list { margin-bottom: 0; }
  .index-list { gap: 0 28px; }
  .index-item a, .index-item a:hover, .index-empty { padding: 12px 0; min-height: 48px; background: transparent; }
  .index-item a::before, .index-item a::after, .index-empty::before { content: none; }
  .index-item a:hover .index-title { text-decoration: underline; text-underline-offset: 4px; }
  .index-title { font-size: 17px; font-weight: 500; }
  .nenpyo-section-title { margin-top: 40px; font-size: 25px; font-weight: 600; }
  .nenpyo-section-title::before { content: none; }
  .nenpyo-table { border: 0; border-top: var(--rule) solid var(--line-strong); border-radius: 0; background: transparent; box-shadow: none; }
  .nenpyo-table th { background: var(--paper); color: var(--ink); font-size: 13px; }
  #footer {
    --footer-fg: var(--ink);
    --footer-link: var(--ink);
    --footer-fg-muted: var(--mute);
    --footer-divider: var(--line);
    margin-top: 40px;
    border-top: var(--rule) solid var(--line-strong);
    background: var(--paper);
    color: var(--ink);
  }
  #footer.footer-v2 .footer-col p, #footer.footer-v2 .footer-copy, #footer.footer-v2 .footer-col ul li a { opacity: 1; }
  #footer.footer-v2 .footer-col p, #footer.footer-v2 .footer-copy { color: var(--mute); }
  #footer.footer-v2 .footer-brand { font-size: 22px; }
  #footer.footer-v2 .footer-copy { text-align: left; }
  /* トップと一覧の整列（2026-10）
     - 看板の操作行は左右の余白をなくし、検索欄と同じ左右端に付ける
     - お知らせの行は「最近の記事」と同じ列（日付と分類・題名・本文）に置く
     - 目次の部の色線と、お知らせの月の開閉記号は線の外へ出し、文字の頭をそろえる */
  .hero-actions { padding-inline: 0; }
  .hero-search button, .hero-search button:hover { min-width: 0; padding-inline: 0; } /* 「検索」を検索欄の右端に付ける */
  .section-more, .section-more:hover { padding-inline: 0; } /* 「すべての記事を見る →」を右端に付ける */
  .hero-actions .btn-secondary, .hero-actions .btn-secondary:hover { padding-inline: 0; }
  .news-item, .news-empty, a.news-item:hover {
    grid-template-columns: 92px minmax(180px, 0.85fr) minmax(0, 1.6fr);
    gap: 4px 28px;
    padding-inline: 0;
  }
  .news-item, .news-empty { grid-template-rows: auto 1fr; }
  .news-item time { grid-column: 1; grid-row: 1; }
  .news-item .news-label { grid-column: 1; grid-row: 2; }
  .news-item strong { grid-column: 2; grid-row: 1 / 3; }
  .news-item .news-body { grid-column: 3; grid-row: 1 / 3; }
  .news-month-archive > summary { position: relative; }
  .news-month-archive > summary::before { position: absolute; left: -1em; }
  #inner > .part-title { margin-left: -22px; }
  /* 一覧・お知らせのように本文欄より広い表を持つページは、表題の罫線も同じ右端まで伸ばす。 */
  #inner:has(> :is(.index-list, .index-section, .part-title, .news-list, .nenpyo-section-title)) > .article-header { max-width: none; }

  /* フッターもヘッダーと同じ枠の左右端にそろえ、列の頭を本文の左端（左欄の幅＋余白＝266px）と
     本文欄の中ほどに置く。トップページでは「記事をひらく」欄の文字の頭にそろえる。 */
  #footer.footer-v2 { padding-inline: 0; }
  #footer.footer-v2 :is(.footer-grid, .footer-copy) { width: min(calc(100% - 64px), 1120px); max-width: none; margin-inline: auto; }
  #footer.footer-v2 .footer-grid.footer-grid-3col { grid-template-columns: 266px minmax(0, 370px) minmax(0, 1fr); column-gap: 0; }
  #footer.footer-v2 .footer-intro { max-width: none; padding-right: 24px; }
  body:has(.hero-home) #footer.footer-v2 .footer-grid.footer-grid-3col {
    grid-template-columns: calc((100% - 64px) * 1.12 / 2.12 + 95px) minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media screen and (max-width: 1024px) {
  #header .inner-header { gap: 12px; }
  #header nav.pc { gap: 6px; }
  #inner:not(:has(.hero-home)) { margin-left: 0; padding-left: 0; }
  #sub:not(.global-drawer-only) { width: min(320px, calc(100vw - 48px)); border-right: var(--rule) solid var(--line); padding: 88px 24px 28px; }
  #inner > .hero-home { gap: 32px; padding-top: 42px; }
  .home-reading { padding-left: 24px; }
  .home-reading-feature { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; }
  .home-reading-feature h3 { font-size: 24px; }
  .hero-feature-card, .hero-feature-card:nth-child(2n), .hero-feature-card:last-child { padding-inline: 12px; }
  #footer.footer-v2 .footer-grid.footer-grid-3col { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
  body:has(.hero-home) #footer.footer-v2 .footer-grid.footer-grid-3col {
    grid-template-columns: calc((100% - 32px) * 1.12 / 2.12 + 57px) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0;
  }
}

@media screen and (max-width: 768px) {
  #header .inner-header { width: calc(100% - 40px); gap: 8px; } /* 本文と同じ20pxの余白 */
  #header .site-name { font-size: 18px; }
  #header .logo .logo-icon { width: 22px; height: 22px; }
  #inner > .hero-home { width: calc(100% - 40px); grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 0; }
  #inner > .hero-home h1 { font-size: 40px; margin-bottom: 14px; }
  #inner > .hero-home .tagline { font-size: 17px; margin-bottom: 22px; }
  .hero-eyebrow { margin-bottom: 12px; }
  .home-reading { padding: 22px 0 0; border-left: 0; border-top: var(--rule) solid var(--line); }
  .home-reading > h2 { margin-bottom: 14px; }
  .home-reading-feature { grid-template-columns: 84px minmax(0, 1fr); }
  .home-reading-credit { margin-bottom: 14px; }
  #container:has(.hero-home) #inner > :is(.hero-feature, .home-section-head, .card-grid, .news-list, .point-box) { width: calc(100% - 40px); }
  #inner > .hero-feature { grid-template-columns: minmax(0, 1fr); margin-bottom: 32px; }
  .hero-feature-card, .hero-feature-card:nth-child(n) {
    grid-template-columns: 3em minmax(0, 1fr);
    align-items: baseline;
    gap: 16px;
    padding: 13px 0;
    border-right: 0;
    border-bottom: var(--rule) solid var(--line);
  }
  .hero-feature-card:last-child { border-bottom: 0; }
  .hero-feature-card strong, .hero-feature-card > span { grid-column: auto; grid-row: auto; }
  .hero-feature-card > span { margin: 0; font-size: 13px; }
  .home-section-head { margin-top: 36px; }
  .home-section-head .section-title { font-size: 24px; }
  #container:has(.hero-home) #inner > .card-grid > .card:nth-child(n) { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 22px 0; }
  #container:has(.hero-home) #inner > .card-grid > .card :is(.era, h3, p, .card-foot) { grid-column: 1; grid-row: auto; }
  #container:has(.hero-home) #inner > .card-grid > .card h3 { font-size: 23px; }
  #container:has(.hero-home) #inner > .card-grid > .card p { font-size: 14px; }
  #container:not(:has(.hero-home)) { width: calc(100% - 40px); padding-top: 24px; }
  .article-header h1 { font-size: 34px; }
  .article-body p { font-size: 16px; margin-bottom: 9px; }
  .article-body h2 { font-size: 24px; }
  .article-body > h2 { margin-top: 68px; margin-bottom: 12px; }
  .article-body > h3 { margin-top: 44px; }
  .article-body > h2 + h3 { margin-top: 20px; }
  .article-body > .point-box:first-child + h2,
  .article-body > .point-box:first-child + .article-figure + h2 { margin-top: 40px; }
  .related-articles { margin-top: 76px; }
  .part-title { font-size: 25px; }
  #inner > .part-title { margin-top: 64px; margin-left: -16px; padding-left: 12px; }
  .news-item, .news-empty, a.news-item:hover { grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: none; gap: 4px 12px; }
  .news-item .news-label { grid-column: 2; grid-row: 1; }
  .news-item strong, .news-item .news-body { grid-column: 1 / -1; grid-row: auto; }
  #inner > h3.section-title { margin-top: 40px; }
  #footer.footer-v2 { padding: 32px 0 24px; }
  #footer.footer-v2 :is(.footer-grid, .footer-copy) { width: calc(100% - 40px); }
  #footer.footer-v2 .footer-grid.footer-grid-3col, body:has(.hero-home) #footer.footer-v2 .footer-grid.footer-grid-3col { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  #footer.footer-v2 .footer-intro { grid-column: 1 / -1; }
}

@media screen and (max-width: 480px) {
  #header .site-name { font-size: 16px; }
  #header .inner-header { gap: 4px; }
  #header .logo a { gap: 5px; }
  #inner > .hero-home h1 { font-size: 36px; }
  .hero-actions { flex-wrap: wrap; }
}