/* ==========================================================================
   狩猟・ジビエ入門サイト 共通スタイル ／ 墨と信号 SUMI & SIGNAL
   （試験対策アプリのスタイルは examination/css/style.css 側・別系統）
   ========================================================================== */

:root {
  /* ===== 紙と墨 ===== */
  --paper: #F2EFE8;
  --paper-2: #E9E5DB;
  --paper-3: #DDD8CC;
  --sumi: #14171A;
  --sumi-2: #3A403F;
  --sumi-3: #767E7B;   /* 文字禁止。罫線・チップ専用（3.6:1） */
  --night: #0C0E0D;
  --night-ink: #E8E4DA;
  --night-sub: #A9B0AB;

  /* ===== 季節アクセント（JSが --accent を上書きする） ===== */
  --shu: #B7382C;          /* 朱・落款 */
  --ai: #1F3A4D;           /* 藍・猟期 */
  --kou: #9C7C3A;          /* 金泥・夜 */
  --wakakusa: #5A7A4A;     /* 若草・春（文字用） */
  --wakakusa-deco: #7C9A5A;/* 若草・装飾専用。文字禁止（2.8:1） */
  --fukamidori: #2F5D45;   /* 深緑・夏 */
  --accent: var(--shu);
  /* ページ単位でアクセントを固定する（higai は制度・公務の顔なので藍で通す・仕様§8）。
     JS側は data-accent が付いているページで --accent を書き換えない。 */

  /* ===== 形：角丸と影を捨てる ===== */
  --radius: 0px;
  --line: rgba(20, 23, 26, 0.16);
  --hair: 1px solid rgba(20, 23, 26, 0.16);
  --hair-strong: 1px solid rgba(20, 23, 26, 0.32);
  --shadow: none;
  --shadow-hover: none;

  /* ===== 書体三層 ===== */
  --mincho: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --gothic: 'Zen Kaku Gothic New', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  /* IBM Plex Mono はゼロに斜線が入るので、0と8を取り違えにくい。
     フォールバックの Consolas / SF Mono も同様にゼロが判別できるものを選んでいる。 */
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
  --font: var(--gothic);

  /* ===== 余白（AI感対策の即効薬：旧値の約2倍） ===== */
  --sec-y: clamp(72px, 11vw, 148px);
  --measure: 34em;

  /* ===== 旧トークン互換エイリアス（HTML内のインラインstyleが参照） ===== */
  --green-900: var(--sumi);
  --green-700: var(--sumi);
  --green-500: var(--sumi-2);
  --green-100: var(--paper-2);
  --accent-dark: var(--accent);
  --cream: var(--paper);
  --ink: var(--sumi);
  --ink-soft: var(--sumi-2);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  font-family: var(--gothic);
  background: var(--paper);
  color: var(--sumi);
  line-height: 1.95;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  position: relative;
  -webkit-font-smoothing: antialiased;
}
/* 紙の粒子感 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* width/height 属性を付けているので、幅が詰まったときに縦横比が崩れないよう
   height:auto を必ず添える（付けないと属性の高さで潰れる） */
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--mincho);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

html[data-accent="ai"] { --accent: var(--ai); }
a { color: var(--accent); text-underline-offset: 0.22em; }

/* 等幅ユーティリティ（数値・英字ラベル） */
.mono {
  font-family: var(--mono);
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}

/* ===== 紋アイコン（絵文字の置換） ===== */
.mon {
  width: 52px;
  height: 52px;
  display: block;
  color: var(--sumi);
  overflow: visible;
}
.mon.sm { width: 20px; height: 20px; }
.mon.xs { width: 15px; height: 15px; }
/* 描かれるアニメーション（176 は外周の円弧長より少し長い固定値）
   JSが無い環境では最初から描かれた状態にするため .js で伏せる */
.mon.draw {
  stroke-dasharray: 176;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .mon.draw { stroke-dashoffset: 176; }
.js .mon.draw.is-in { stroke-dashoffset: 0; }

/* ===== 水墨画 =====
   地の明暗で色が反転するため、墨絵の色は変数で受け渡す。
   --ink-veil 霞（地の色）／--ink-accent 差し色 */
.ink-art {
  display: block;
  width: 100%;
  height: auto;
  color: var(--sumi);
  --ink-veil: var(--paper);
  --ink-accent: var(--accent);
}
/* ヒーロー背景の遠山＋霞。文字の下・獣の後ろに敷く */
.hero-ink {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 62%;
  z-index: 0;
  /* 遠山は季節色。明度は保ったまま色相だけ入れ替わる */
  color: var(--ink-season, var(--night-ink));
  pointer-events: none;
}
/* 文字と逆側（右）に置く獣 */
.hero-beast {
  position: absolute;
  right: clamp(16px, 6vw, 80px);
  bottom: clamp(30px, 5.5vw, 66px);
  /* 情景なので高さで揃える。ヒーローが低いページでもはみ出さない */
  width: auto;
  height: clamp(170px, 56%, 330px);
  z-index: 1;
  color: var(--night-ink);
  --ink-veil: var(--night);
  --ink-accent: var(--kou); /* 夜墨の差し色は金泥 */
  opacity: 0.88;
  pointer-events: none;
}
/* 水彩の獣（画像）。screen合成は暗部が飛んで痩せるため通常合成で置く。
   原画の金泥・赤茶のラインは残す（彩度だけ少し落とす） */
img.hero-beast {
  right: clamp(12px, 7vw, 110px);
  bottom: 0;
  width: auto;
  height: clamp(230px, 58%, 520px);
  opacity: 0.95;
  filter: saturate(0.9) contrast(1.05);
}
/* 2頭目（猪）3頭目（鴨）。奥へ行くほど小さく薄く、少し重ねて群れにする */
img.hero-beast-2 {
  right: clamp(90px, 22vw, 340px);
  height: clamp(120px, 27%, 250px);
  opacity: 0.85;
  z-index: 1;
}
img.hero-beast-3 {
  right: clamp(180px, 33vw, 520px);
  height: clamp(72px, 16%, 148px);
  opacity: 0.74;
  z-index: 1;
}
/* 本文の脇に置く墨絵 */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(150px, 19vw, 250px);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.split > .ink-figure { align-self: center; }
/* 長い記事本文の脇では、絵を上に寄せて見出しと並べる */
.split.top { align-items: start; }
.split.top > .ink-figure { position: sticky; top: 130px; }
.split > .ink-figure .ink-art { opacity: 0.82; }
/* 紙の地に置く水彩イラスト。原画の色ラインは活かす */
img.ink-photo { filter: saturate(0.9); opacity: 0.92; }

/* ===== 滲み罫・四隅ブラケット・縦組み ===== */
.rule { display: block; width: 100%; height: 40px; color: var(--sumi); }
.bracket { position: relative; }
.bracket::before, .bracket::after { content: ''; position: absolute; width: 12px; height: 12px; }
.bracket::before { top: 0; left: 0; border-top: 1px solid var(--sumi); border-left: 1px solid var(--sumi); }
.bracket::after { bottom: 0; right: 0; border-bottom: 1px solid var(--sumi); border-right: 1px solid var(--sumi); }

.jsv { display: flex; flex-direction: column; align-items: center; gap: 0.2em; }
.jsv .vch { display: block; line-height: 1; }
.jsv .vch.pn { transform: translate(0.42em, -0.42em); }
.jsv .vch.dash { transform: rotate(90deg); }

/* ===== ヘッダー ===== */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: rgba(242, 239, 232, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: var(--hair);
  transition: padding 0.25s ease;
}
.site-nav.shrink { padding-top: 8px; padding-bottom: 8px; border-bottom-color: rgba(20, 23, 26, 0.32); }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--sumi);
  font-family: var(--mincho);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}
.brand .logo-mark {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--sumi);
}
.brand .logo-mark .mon { width: 36px; height: 36px; }
.brand small {
  display: block;
  font-family: var(--mono);
  font-size: 0.54rem;
  font-weight: 400;
  color: var(--sumi-2);
  letter-spacing: 0.22em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 26px);
  list-style: none;
}
.nav-links a {
  text-decoration: none;
  color: var(--sumi);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.nav-links a:hover { border-color: var(--sumi); }
.nav-links a.active { border-color: var(--accent); }
.nav-links a.nav-cta {
  background: var(--sumi);
  color: var(--paper);
  padding: 10px 18px;
  border: 1px solid var(--sumi);
  font-weight: 500;
  letter-spacing: 0.1em;
  transition: background 0.25s, color 0.25s;
}
.nav-links a.nav-cta:hover { background: transparent; color: var(--sumi); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--sumi);
  cursor: pointer;
  line-height: 0;
  padding: 4px;
}

/* ===== ヒーロー ===== */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(168deg, var(--night) 0%, var(--sumi) 58%, #1E2426 100%);
  color: var(--night-ink);
  padding: clamp(80px, 13vw, 150px) clamp(20px, 6vw, 60px) clamp(100px, 14vw, 170px);
  isolation: isolate;
}
.hero .eyebrow, .page-hero .eyebrow {
  position: relative;
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  color: var(--night-sub);
  border-bottom: 2px solid var(--ink-season, rgba(232, 228, 218, 0.28));
  padding: 0 2px 8px;
  margin-bottom: 32px;
}
/* 文字は左、墨絵は右。ヒーローの中身は必ず絵より前面に */
.hero > :not(.hero-ink):not(.hero-beast):not(.hero-copy),
.page-hero > :not(.hero-ink):not(.hero-beast) { position: relative; z-index: 3; }
.hero h1, .page-hero h1 { max-width: min(72%, 880px); }
.hero .lead, .hero-cta, .page-hero p { max-width: min(52%, 560px); }

.hero h1 {
  position: relative;
  font-family: var(--mincho);
  font-size: clamp(2rem, 6.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-wrap: balance;
}

/* ヒーローのキーコピー（仕様§8）。writing-modeではなく文字スタック方式（§4）で組む。
   絶対配置で右の柱に立て、獣と本文のあいだの余白に置く。
   主題が右・副題が左（縦組みの読み順）なので row-reverse。 */
.hero .hero-copy {
  position: absolute;
  top: clamp(92px, 12.5vw, 168px);
  right: clamp(20px, 6vw, 60px);
  z-index: 4;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: clamp(10px, 1.6vw, 20px);
  max-width: none;
  letter-spacing: 0;
  line-height: 1;
}
.hero-copy .vtxt {
  flex: 0 0 auto;
  font-family: var(--mincho);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.4vw, 2.9rem);
  gap: 0.2em;
  color: var(--night-ink);
  /* 遠山の上に乗るので、地の色でわずかに沈める（縁取りではなく暈し） */
  text-shadow: 0 0 26px rgba(12, 14, 13, 0.66);
}
.hero-copy .vsub {
  flex: 0 0 auto;
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(0.76rem, 1.5vw, 0.98rem);
  gap: 0.32em;
  padding-top: clamp(12px, 2.4vw, 32px);
  color: var(--kou); /* 夜の地の差し色は金泥（#9C7C3A on #0C0E0D = 4.9:1） */
}
/* 一文字ずつ落ちてくる。--i は site.js が付ける */
.hero-copy .vch {
  animation: vchIn 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 0.05s + 0.18s);
}
/* 句読点は右上に寄せてあるので、その位置を保ったまま落とす */
.hero-copy .vch.pn { animation-name: vchInPn; }
@keyframes vchIn {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes vchInPn {
  from { opacity: 0; transform: translate(0.42em, calc(-0.42em - 14px)); }
  to { opacity: 1; transform: translate(0.42em, -0.42em); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero .lead {
  position: relative;
  margin: 30px 0 0;
  max-width: var(--measure);
  font-size: clamp(0.88rem, 2.2vw, 0.98rem);
  color: var(--night-sub);
  opacity: 0;
  animation: fadeInUp 0.9s ease 0.55s both;
}
.hero-cta {
  position: relative;
  margin-top: 42px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  opacity: 0;
  animation: fadeInUp 0.9s ease 0.75s both;
}
.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius);
  padding: 14px 28px;
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  border: 1px solid transparent;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn-primary { background: var(--paper); color: var(--sumi); border-color: var(--paper); }
.btn-primary:hover { background: transparent; color: var(--paper); }
.btn-ghost { background: transparent; color: var(--night-ink); border-color: rgba(232, 228, 218, 0.5); }
.btn-ghost:hover { border-color: var(--night-ink); }
.btn-green { background: var(--sumi); color: var(--paper); border-color: var(--sumi); }
.btn-green:hover { background: transparent; color: var(--sumi); }
.btn .arrow { display: inline-block; margin-left: 10px; transition: transform 0.25s; }
.btn:hover .arrow { transform: translateX(5px); }

/* ヒーロー下の山シルエット */
.hero-mountains {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(50px, 9vw, 110px);
  display: block;
}

/* ページ共通ヒーロー（サブページ） */
.page-hero {
  background: linear-gradient(168deg, var(--night), var(--sumi));
  color: var(--night-ink);
  padding: clamp(60px, 9vw, 100px) clamp(20px, 6vw, 60px) clamp(70px, 10vw, 115px);
  position: relative;
  overflow: hidden;
}
.page-hero h1 {
  position: relative;
  font-family: var(--mincho);
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  opacity: 0;
  animation: fadeInUp 0.8s ease 0.1s both;
}
.page-hero p {
  position: relative;
  margin-top: 18px;
  color: var(--night-sub);
  font-size: 0.9rem;
  max-width: var(--measure);
  opacity: 0;
  animation: fadeInUp 0.8s ease 0.3s both;
}
.page-hero .eyebrow { margin-bottom: 26px; }
.page-hero .hero-mountains { opacity: 0.9; }

/* ===== 帯ティッカー（マーキー） ===== */
.marquee-band {
  position: relative;
  overflow: hidden;
  background: var(--sumi);
  color: var(--night-sub);
  border-top: 1px solid rgba(232, 228, 218, 0.14);
  border-bottom: 1px solid rgba(232, 228, 218, 0.14);
  padding: 11px 0;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  animation: marqueeScroll 46s linear infinite;
  will-change: transform;
}
.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 22px;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--night-sub);
  white-space: nowrap;
}
.marquee-track span .mon { color: var(--night-sub); }
.marquee-track span::after {
  content: '/';
  margin-left: 22px;
  font-family: var(--mono);
  color: rgba(232, 228, 218, 0.3);
  font-size: 0.7rem;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===== HUD帯（ヘッダー直下・全ページ）=====
   猟期カウントダウン・月齢・日の入。実データなので装飾ではなく計器 */
.hud {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px clamp(12px, 2.2vw, 26px);
  padding: 9px clamp(16px, 4vw, 40px);
  background: var(--paper);
  border-bottom: var(--hair);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  line-height: 1.7;
  color: var(--sumi-2);
  /* 桁を揃えたうえで、ゼロに斜線を入れて 8 との誤読を防ぐ */
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: 'zero' 1;
}
.hud[hidden] { display: none; }
.hud b { color: var(--accent); font-weight: 700; font-size: 1.06em; letter-spacing: 0.08em; }
/* 季節の見出し。色だけでは伝わらないので名前と色見本を並べる */
.hud .hud-season {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-weight: 700;
  padding-right: clamp(4px, 1vw, 12px);
  border-right: var(--hair);
}
.hud .hud-season i { width: 8px; height: 8px; background: currentColor; flex: 0 0 auto; }
.hud .hud-note { letter-spacing: 0.04em; font-size: 0.84em; }
.hud .hud-geo { margin-left: auto; white-space: nowrap; }
@media (max-width: 900px) {
  .hud .hud-note { display: none; }
}
@media (max-width: 600px) {
  .hud .hud-geo { display: none; }
}

/* ===== ページ上部クイックファクト帯 ===== */
.quickfact-band {
  background: var(--sumi);
  color: var(--night-sub);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  padding: 10px 16px;
  border-bottom: 2px solid var(--ink-season, rgba(232, 228, 218, 0.14));
}
.quickfact-band strong { color: var(--night-ink); font-weight: 700; }

/* ===== トップに戻るボタン ===== */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  border: 1px solid var(--sumi);
  background: var(--sumi);
  color: var(--paper);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s, background 0.25s, color 0.25s;
}
.to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top:hover { background: var(--paper); color: var(--sumi); }

/* ===== 目次（記事ページ用） ===== */
.toc {
  background: var(--paper);
  border: var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 28px;
  margin: -46px auto 0;
  position: relative;
  z-index: 4;
  max-width: 760px;
}
.toc .toc-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--accent);
  margin-bottom: 14px;
  display: block;
}
.toc ol { list-style: none; counter-reset: toc; display: grid; gap: 0; }
.toc li { counter-increment: toc; }
.toc a {
  display: flex;
  gap: 14px;
  text-decoration: none;
  color: var(--sumi);
  font-size: 0.86rem;
  font-weight: 400;
  padding: 9px 2px;
  border-top: var(--hair);
  transition: padding-left 0.2s;
}
.toc li:first-child a { border-top: none; }
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--sumi-2);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}
.toc a:hover { padding-left: 10px; }

/* ===== 記事本文 ===== */
h3.h-sub {
  font-family: var(--mincho);
  color: var(--sumi);
  font-size: 1.2rem;
  font-weight: 800;
  margin: 46px 0 18px;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
}
.article-body h4.h-sub-sm {
  font-family: var(--mincho);
  color: var(--sumi);
  font-size: 1.02rem;
  font-weight: 600;
  margin: 30px 0 12px;
}
.article-body p { color: var(--sumi); font-size: 0.92rem; margin-bottom: 16px; max-width: var(--measure); }
/* 単体で .article-body を持つ段落（導入文）も行長を揃える */
p.article-body { max-width: var(--measure); }
.article-body p.lede {
  font-family: var(--mincho);
  font-size: 1.05rem;
  line-height: 2.1;
  color: var(--sumi);
}
.article-body ul.plain, .article-body ol.plain {
  margin: 6px 0 20px 1.3em;
  color: var(--sumi-2);
  font-size: 0.9rem;
  max-width: var(--measure);
}
.article-body ul.plain li, .article-body ol.plain li { margin-bottom: 8px; }
.article-body .src-note {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--sumi-2);
  border-top: var(--hair);
  padding-top: 12px;
  margin-top: 4px;
  margin-bottom: 30px;
  max-width: var(--measure);
}
.pull-quote {
  position: relative;
  margin: 40px 0;
  padding: 8px 0 8px 28px;
  border-left: 2px solid var(--accent);
  background: none;
  border-radius: var(--radius);
  font-family: var(--mincho);
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  font-weight: 600;
  color: var(--sumi);
  line-height: 2.05;
  max-width: 42em;
}

/* ===== ラベルバッジ ===== */
.term-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 3px 10px;
  border-radius: var(--radius);
  border: var(--hair);
  background: none;
  color: var(--sumi-2);
}
.term-badge.on { border-color: var(--accent); color: var(--accent); }

/* ===== ニュースウィジェット ===== */
.news-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--sumi-2);
  background: none;
  border: var(--hair);
  padding: 3px 10px;
  border-radius: var(--radius);
  vertical-align: middle;
  margin-right: 8px;
}
.news-live-badge i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: newsBlink 1.6s steps(1) infinite;
}
@keyframes newsBlink { 50% { opacity: 0.15; } }

.news-panel {
  background: none;
  border: var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0;
  max-width: 820px;
  margin: 0 auto;
}
.news-list { display: flex; flex-direction: column; }
a.news-item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 20px;
  text-decoration: none;
  color: var(--sumi);
  border-bottom: var(--hair);
  transition: background 0.2s, padding-left 0.2s;
}
a.news-item:last-child { border-bottom: none; }
a.news-item:hover { background: var(--paper-2); padding-left: 26px; }
.news-item .news-time {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--sumi-2);
  background: none;
  border: var(--hair);
  padding: 2px 8px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.news-item .news-body { flex: 1; min-width: 0; }
.news-item .news-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--sumi);
  line-height: 1.7;
}
.news-item .news-source {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--sumi-2);
}
.news-item .news-arrow {
  flex: 0 0 auto;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s, transform 0.2s;
}
a.news-item:hover .news-arrow { opacity: 1; transform: translateX(0); }

.news-skel { padding: 16px 20px; border-bottom: var(--hair); }
.news-skel:last-child { border-bottom: none; }
.news-skel .bar {
  height: 10px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--paper-2) 25%, var(--paper-3) 37%, var(--paper-2) 63%);
  background-size: 400% 100%;
  animation: newsSkelShine 1.4s ease infinite;
}
.news-skel .bar.w60 { width: 60%; margin-bottom: 8px; }
.news-skel .bar.w30 { width: 30%; height: 8px; }
@keyframes newsSkelShine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.news-empty {
  padding: 36px 22px;
  color: var(--sumi-2);
  font-size: 0.86rem;
  line-height: 1.9;
}
.news-empty a { color: var(--accent); }
.news-updated {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--sumi-2);
  margin-top: 14px;
}

/* ===== ニュース：開閉アコーディオン ===== */
.news-accordion { max-width: 820px; margin: 0 auto; }
.news-accordion-summary {
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
.news-accordion-summary::-webkit-details-marker { display: none; }
.news-accordion-summary .en {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--accent);
  text-transform: uppercase;
}
.news-accordion-summary h2 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mincho);
  font-size: clamp(1.4rem, 3.6vw, 2rem);
  font-weight: 800;
  color: var(--sumi);
  margin-top: 12px;
  letter-spacing: 0.08em;
  text-wrap: balance;
}
.news-accordion-arrow {
  display: inline-block;
  font-size: 0.5em;
  color: var(--accent);
  transition: transform 0.25s;
}
.news-accordion[open] .news-accordion-arrow { transform: rotate(180deg); }
.news-accordion-body { margin-top: clamp(24px, 4vw, 36px); }
.news-accordion-body .sub {
  color: var(--sumi-2);
  font-size: 0.88rem;
  max-width: var(--measure);
  margin: 0 0 22px;
}

/* ===== レイアウト ===== */
main { display: block; overflow-x: clip; }
.section {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--sec-y) clamp(18px, 5vw, 40px);
}
.section.tight { padding-top: calc(var(--sec-y) * 0.62); }

/* 章と章のあいだに滲み罫を1本。余白のちょうど中央に置く */
.section + .section::before,
.section-rule::before {
  content: '';
  position: absolute;
  top: -14px;
  left: clamp(18px, 5vw, 40px);
  right: clamp(18px, 5vw, 40px);
  height: 28px;
  opacity: 0.42;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='28' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cfilter id='e' x='-6%25' y='-60%25' width='112%25' height='220%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.018 0.05' numOctaves='4' seed='12' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='13' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='0' y='12' width='1200' height='4' fill='%2314171A' filter='url(%23e)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* 章題：中央揃えをやめ、英字ラベルを左の柱に立てた非対称の組みに */
.section-head {
  margin-bottom: clamp(34px, 5vw, 56px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: clamp(16px, 2.4vw, 30px);
  row-gap: 12px;
}
.section-head .en {
  grid-column: 1;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--accent);
  text-transform: uppercase;
  white-space: nowrap;
}
.section-head h2 {
  grid-column: 2;
  font-family: var(--mincho);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 800;
  color: var(--sumi);
  letter-spacing: 0.08em;
  text-wrap: balance;
}
.section-head .sub {
  grid-column: 2;
  margin: 0;
  color: var(--sumi-2);
  font-size: 0.88rem;
  max-width: var(--measure);
}

/* ==========================================================================
   セクション型（仕様§6）
   同じ型を3回以上続けない。index.html の並びは
   型1 / 型1 / 型3 / 型2 / 型1 / 型4 / 型4 / 型1。
   ========================================================================== */

/* --- 型1：縦組み章題型 ---------------------------------------------------
   左に朱の章番号と縦書きの章題、右に英字ラベルと導入文。 */
.chap {
  margin-bottom: clamp(34px, 5vw, 56px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(24px, 3.6vw, 50px);
  align-items: start;
}
.chap-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}
.chap-no {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.chap-title {
  writing-mode: vertical-rl;
  font-family: var(--mincho);
  font-size: clamp(1.3rem, 3.2vw, 1.95rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--sumi);
  margin: 0;
}
/* 縦中横：縦組みの中で半角数字を正立させる（「4種類」の 4 など） */
.chap-title .tcy {
  -webkit-text-combine: horizontal;
  text-combine-upright: all;
}
/* 章題から下へ伸びる細い柱。これが縦組みの支えになる */
.chap-col::after {
  content: '';
  width: 1px;
  height: clamp(26px, 5vw, 54px);
  background: linear-gradient(rgba(20, 23, 26, 0.34), rgba(20, 23, 26, 0));
}
.chap-lead .en {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--accent);
  text-transform: uppercase;
}
.chap-lead .sub {
  margin: 16px 0 0;
  color: var(--sumi-2);
  font-size: 0.9rem;
  max-width: var(--measure);
}
/* 導入文（明朝1.05rem）はそのまま活かし、位置だけ整える */
.chap-lead p.lede { margin: 16px 0 0; }
.chap-lead.bracket { padding: 20px 22px; }

/* --- 型2：全面図版型 -----------------------------------------------------
   図版を右の断ち切りまで伸ばし、文章は短いコピー1本だけ添える。 */
.plate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 38%, 440px);
  column-gap: clamp(26px, 4vw, 60px);
  align-items: end;
  /* 版面の右端ではなくビューポートの右端まで断ち切る */
  margin-right: calc(-1 * (50vw - 50%));
  border-top: var(--hair);
  padding-top: clamp(26px, 3.6vw, 48px);
}
.plate-copy { padding-bottom: clamp(14px, 3vw, 40px); max-width: var(--measure); }
.plate-copy .en {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.plate-copy h2 {
  font-family: var(--mincho);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 800;
  color: var(--sumi);
  letter-spacing: 0.08em;
  line-height: 1.6;
}
.plate-copy p {
  margin: 18px 0 26px;
  color: var(--sumi-2);
  font-size: 0.9rem;
}
.plate-fig { align-self: end; }
.plate-fig img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.9);
  opacity: 0.94;
}
/* 図版の下に置く補足。版面の幅に戻す */
.plate-note { margin-top: clamp(30px, 4vw, 52px); }

/* --- 型3：数値型 ---------------------------------------------------------
   等幅の巨大な数字。下線はスクロールで引かれる（site.js が .is-in を付与）。 */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(30px, 4vw, 54px) clamp(24px, 3vw, 44px);
}
/* 1つだけ置いたとき（higaiの被害総額）に下線が版面いっぱいへ伸びて
   区切り罫に見えてしまうので、数値の塊の幅で止める */
.figures .stat { position: relative; padding-bottom: 24px; max-width: 26em; }
.figures .stat .num {
  font-family: var(--mono);
  font-size: clamp(2.3rem, 5.6vw, 3.8rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--sumi);
  line-height: 1.05;
}
.figures .stat .num small {
  font-family: var(--gothic);
  font-size: 0.3em;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-left: 2px;
}
.figures .stat .label {
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--sumi);
  line-height: 1.9;
  max-width: 22em;
}
/* 出典は小さくするが、薄墨(#767E7B)は文字に使えないので淡墨(#3A403F)で組む（§2） */
.figures .stat .note {
  margin-top: 8px;
  font-size: 0.68rem;
  color: var(--sumi-2);
  line-height: 1.8;
  max-width: 24em;
}
.figures .stat::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='6' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cfilter id='e' x='-4%25' y='-120%25' width='108%25' height='340%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.08' numOctaves='3' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='5' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='0' y='1' width='400' height='3' fill='%2314171A' filter='url(%23e)'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
}
.figures .stat.is-in::after { transform: scaleX(1); }
/* JSが動かない環境では最初から引かれた状態にする */
html:not(.js) .figures .stat::after { transform: scaleX(1); }

/* --- 型4：索引型 ---------------------------------------------------------
   ヘアライン罫のリスト。等幅の連番付き。 */
.index-list { list-style: none; counter-reset: idx; border-top: var(--hair); }
.index-list li { border-bottom: var(--hair); }
.index-list a {
  display: grid;
  grid-template-columns: auto auto minmax(0, 14em) minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: clamp(12px, 2.2vw, 28px);
  padding: 22px 6px;
  text-decoration: none;
  transition: background 0.25s, padding-left 0.25s;
}
.index-list a:hover { background: rgba(255, 255, 255, 0.4); padding-left: 16px; }
.index-list .idx {
  counter-increment: idx;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.index-list .idx::before { content: counter(idx, decimal-leading-zero); }
.index-list .mon { width: 26px; height: 26px; color: var(--sumi); align-self: center; }
.index-list .ttl {
  font-family: var(--mincho);
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--sumi);
  letter-spacing: 0.04em;
}
.index-list .desc { font-size: 0.8rem; color: var(--sumi-2); line-height: 1.9; }
.index-list .go {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--sumi-2);
  white-space: nowrap;
  transition: color 0.2s, letter-spacing 0.2s;
}
.index-list a:hover .go { color: var(--accent); letter-spacing: 0.28em; }

/* ===== カード ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0;
}
.info-card {
  position: relative;
  background: none;
  border: var(--hair);
  border-radius: var(--radius);
  padding: 32px 28px 34px;
  box-shadow: var(--shadow);
  transition: background 0.25s;
}
.info-card:hover { background: rgba(255, 255, 255, 0.34); }
.info-card .icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: none;
  display: grid;
  place-items: center;
  color: var(--sumi);
  margin-bottom: 20px;
}
.info-card h3 { font-family: var(--mincho); font-size: 1.1rem; font-weight: 800; color: var(--sumi); margin-bottom: 12px; }

/* 4枚（3枚）均等をやめ、1枚だけ大きく取った非対称の組みにする（仕様§8）。
   大きい1枚には水彩を断ち切りで置き、カードの縁で切る。 */
.card-grid.uneven { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.card-grid.uneven > .lead-card { grid-column: 1; grid-row: 1 / span 2; }
/* 4枚あるときだけ、最後の1枚を下段いっぱいに寝かせる */
.card-grid.uneven > .info-card:nth-child(4) { grid-column: 1 / -1; }
.info-card.lead-card {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(110px, 15vw, 200px);
}
.info-card.lead-card > :not(.card-bleed) { position: relative; z-index: 1; }
.card-bleed {
  position: absolute;
  right: -7%;
  bottom: -5%;
  width: clamp(130px, 44%, 240px);
  height: auto;
  z-index: 0;
  opacity: 0.92;
  filter: saturate(0.9);
  pointer-events: none;
}
.info-card p { font-size: 0.84rem; color: var(--sumi-2); line-height: 2; }

/* リンクカード（ページ誘導） */
a.link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: none;
  border: var(--hair);
  border-radius: var(--radius);
  padding: 30px 28px 32px;
  box-shadow: var(--shadow);
  transition: background 0.25s;
  overflow: hidden;
}
a.link-card:hover { background: rgba(255, 255, 255, 0.34); }
a.link-card .icon {
  display: block;
  color: var(--sumi);
  margin-bottom: 18px;
}
a.link-card h3 { font-family: var(--mincho); color: var(--sumi); font-size: 1.06rem; font-weight: 800; margin-bottom: 10px; }
a.link-card p { color: var(--sumi-2); font-size: 0.82rem; line-height: 2; flex: 1; }
a.link-card .go {
  margin-top: 20px;
  font-family: var(--mono);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  transition: letter-spacing 0.2s;
}
a.link-card:hover .go { letter-spacing: 0.32em; }

/* ===== 部位図（仕様§9-2・gibierの主役） ===== */
.cuts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}
.cuts-fig { margin: 0; position: sticky; top: 120px; }
.cuts-fig .ink-art { width: 100%; height: auto; color: var(--sumi); }
.cuts-fig .cut-no text {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.cuts-fig figcaption {
  margin-top: 12px;
  font-size: 0.72rem;
  color: var(--sumi-2);
  letter-spacing: 0.04em;
}
.cuts-list { border-top: var(--hair); }
details.cut { border-bottom: var(--hair); }
details.cut > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: clamp(12px, 2vw, 22px);
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
  transition: background 0.25s, padding-left 0.25s;
}
details.cut > summary::-webkit-details-marker { display: none; }
details.cut > summary:hover { background: rgba(255, 255, 255, 0.42); padding-left: 12px; }
details.cut > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.cut-idx {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.cut-name { font-family: var(--mincho); font-size: 1rem; font-weight: 800; color: var(--sumi); letter-spacing: 0.06em; }
.cut-open {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--sumi-2);
  white-space: nowrap;
}
.cut-open::after { content: ' +'; }
details.cut[open] .cut-open { color: var(--accent); }
details.cut[open] .cut-open::after { content: ' −'; }
.cut-body { padding: 0 4px 22px; }
.cut-body p { font-size: 0.82rem; color: var(--sumi-2); line-height: 2; max-width: var(--measure); }

/* ===== お品書き（仕様§8 gibier：縦組み・右から左） ===== */
.oshinagaki {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 44px);
  border: var(--hair);
  background: var(--paper-2);
  padding: clamp(28px, 4.4vw, 54px) clamp(18px, 2.6vw, 32px);
  overflow-x: auto;
}
.oshina-group {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: clamp(14px, 2vw, 26px);
  flex: 0 0 auto;
}
.oshina-kind {
  writing-mode: vertical-rl;
  font-family: var(--mincho);
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--sumi);
  border-right: var(--hair);
  padding-right: clamp(10px, 1.6vw, 18px);
  margin: 0;
}
.oshina-list {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: clamp(11px, 1.5vw, 19px);
  list-style: none;
  flex: 0 0 auto;
}
.oshina-list li {
  writing-mode: vertical-rl;
  flex: 0 0 auto;
  line-height: 1.1;
}
.oshina-list b {
  font-family: var(--mincho);
  font-size: clamp(0.95rem, 1.9vw, 1.12rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--sumi);
}
.oshina-list small {
  display: block;
  margin-top: 0;
  padding-top: 0.9em;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--sumi-2);
}

/* ===== 資格一覧（リンクではない索引・about） ===== */
.qual-list { list-style: none; counter-reset: idx; border-top: var(--hair); }
.qual-list li { border-bottom: var(--hair); }
.qual-list .qual {
  display: grid;
  grid-template-columns: auto minmax(0, 12em) minmax(0, 1fr);
  align-items: baseline;
  column-gap: clamp(12px, 2.2vw, 28px);
  padding: 17px 4px;
}
.qual-list .idx {
  counter-increment: idx;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.qual-list .idx::before { content: counter(idx, decimal-leading-zero); }
.qual-list .ttl {
  font-family: var(--mincho);
  font-size: 1rem;
  font-weight: 800;
  color: var(--sumi);
  letter-spacing: 0.05em;
}
.qual-list .desc { font-size: 0.82rem; color: var(--sumi-2); line-height: 1.95; }

/* ===== 対句（左右2段の縦書き見出し・仕様§8 higai） ===== */
.tsuiku {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: var(--hair);
  border-bottom: var(--hair);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.tsuiku-col {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(18px, 2.6vw, 32px);
  align-items: start;
  padding: clamp(26px, 3.4vw, 40px) clamp(20px, 2.6vw, 32px);
}
.tsuiku-col + .tsuiku-col { border-left: var(--hair); }
.tsuiku-title {
  writing-mode: vertical-rl;
  font-family: var(--mincho);
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--sumi);
  margin: 0;
}
.tsuiku-body p { font-size: 0.86rem; color: var(--sumi-2); margin: 0 0 14px; line-height: 2; }
.tsuiku-body .en {
  display: block;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--accent);
  margin-bottom: 12px;
}
.tsuiku-body .key {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--sumi-2);
  border: 1px solid rgba(20, 23, 26, 0.28);
  padding: 3px 10px;
}

/* ===== 細い横棒（被害額の内訳・仕様§8 higai。地図は精度担保が難しいので使わない） ===== */
.bars { list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; }
.bars li {
  display: grid;
  grid-template-columns: minmax(0, 7em) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(12px, 2vw, 24px);
  padding: 14px 0;
  border-bottom: var(--hair);
}
.bars li:first-child { border-top: var(--hair); }
.bar-label { font-size: 0.84rem; color: var(--sumi); }
.bar-track { height: 3px; background: rgba(20, 23, 26, 0.12); }
.bar-fill { display: block; height: 3px; background: var(--sumi); }
.bar-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  color: var(--sumi);
  white-space: nowrap;
}
.bar-num small { font-family: var(--gothic); font-size: 0.52em; font-weight: 500; margin-left: 2px; }

/* ===== フィールドサイン図鑑（仕様§9-1） =====
   墨絵をタップすると「何の獣か」が開く。<details> なのでJSなしで動き、キーボードでも開ける。 */
.sign-grid {
  display: grid;
  /* 6枚なので広い画面では3列（3+3）に割れる幅にしてある */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0;
}
details.sign { border: var(--hair); transition: background 0.25s; }
details.sign[open] { background: rgba(255, 255, 255, 0.42); }
details.sign > summary {
  display: block;
  cursor: pointer;
  list-style: none;
  padding: 30px 26px 26px;
  transition: background 0.25s;
}
details.sign > summary::-webkit-details-marker { display: none; }
details.sign > summary:hover { background: rgba(255, 255, 255, 0.42); }
details.sign > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.sign-art {
  display: block;
  width: min(150px, 62%);
  height: auto;
  margin: 0 auto 22px;
  color: var(--sumi);
  overflow: visible;
}
.sign-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-top: var(--hair);
  padding-top: 15px;
}
.sign-no {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.sign-kind {
  font-family: var(--mincho);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--sumi);
  letter-spacing: 0.08em;
}
.sign-hint { display: block; margin-top: 10px; font-size: 0.8rem; color: var(--sumi-2); line-height: 1.9; }
.sign-cta {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--sumi-2);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: color 0.2s;
}
.sign-cta::after { content: ' +'; }
details.sign[open] .sign-cta { color: var(--accent); }
details.sign[open] .sign-cta::after { content: ' −'; }
.sign-body { padding: 0 26px 28px; }
.sign-name {
  font-family: var(--mincho);
  font-size: 1.24rem;
  font-weight: 800;
  color: var(--sumi);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.sign-body p { font-size: 0.82rem; color: var(--sumi-2); line-height: 2; }
/* 試験対策アプリへの導線 */
.sign-foot {
  margin-top: clamp(30px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: 20px;
}
.sign-foot p { font-size: 0.86rem; color: var(--sumi-2); max-width: var(--measure); }

/* ===== ステップ（取得フロー） ===== */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  position: relative;
  background: none;
  border-top: var(--hair);
  border-radius: var(--radius);
  padding: 30px 0 32px 76px;
  box-shadow: var(--shadow);
}
.steps .step:last-child { border-bottom: var(--hair); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--sumi);
  color: var(--sumi);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.7rem;
  display: grid;
  place-items: center;
}
.step h3 { font-family: var(--mincho); color: var(--sumi); font-size: 1.06rem; font-weight: 800; margin-bottom: 10px; }
.step p { font-size: 0.86rem; color: var(--sumi-2); max-width: var(--measure); }
.step .tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  background: none;
  border: 1px solid currentColor;
  padding: 2px 9px;
  border-radius: var(--radius);
  margin-left: 12px;
  vertical-align: middle;
}

/* ===== テーブル ===== */
.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); border: var(--hair); }
table.nice {
  width: 100%;
  border-collapse: collapse;
  background: none;
  font-size: 0.86rem;
  min-width: 560px;
}
table.nice th, table.nice td { padding: 16px 18px; text-align: left; border-bottom: var(--hair); }
table.nice thead th {
  background: var(--sumi);
  color: var(--paper);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
table.nice tbody tr:nth-child(even) { background: var(--paper-2); }
table.nice tbody tr:last-child td { border-bottom: none; }
table.nice td.num {
  text-align: right;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--sumi);
  white-space: nowrap;
}

/* ===== アコーディオン（FAQ） ===== */
details.faq {
  background: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: var(--hair);
  margin-bottom: 0;
  overflow: hidden;
}
details.faq:last-of-type { border-bottom: var(--hair); }
details.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 52px 20px 2px;
  font-family: var(--mincho);
  font-weight: 600;
  color: var(--sumi);
  position: relative;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.25s;
}
details.faq[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
details.faq .faq-body { padding: 0 40px 24px 2px; font-size: 0.86rem; color: var(--sumi-2); max-width: var(--measure); }

/* ===== 注意書き・コールアウト ===== */
.callout {
  border-radius: var(--radius);
  padding: 22px 24px;
  font-size: 0.84rem;
  line-height: 2;
  margin: 32px 0;
  border-left: 2px solid;
  background: var(--paper-2);
}
.callout.warn { border-color: var(--accent); color: var(--sumi); }
.callout.info { border-color: var(--sumi); color: var(--sumi); }

/* ===== CTAバンド ===== */
.cta-band {
  background: var(--sumi);
  border-radius: var(--radius);
  color: var(--night-ink);
  padding: clamp(50px, 8vw, 84px) clamp(24px, 5vw, 60px);
  box-shadow: var(--shadow);
}
.cta-band h2 { font-family: var(--mincho); font-size: clamp(1.3rem, 3.5vw, 2rem); font-weight: 800; letter-spacing: 0.1em; text-wrap: balance; }
.cta-band p { margin: 20px 0 30px; color: var(--night-sub); font-size: 0.88rem; max-width: var(--measure); }

/* ===== 都道府県索引（仕様§8 contact：等幅の索引＋インクリメンタル検索） ===== */
.pref-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  border: var(--hair);
  padding: 12px 16px;
  margin-bottom: clamp(26px, 3.4vw, 44px);
  background: rgba(255, 255, 255, 0.34);
}
.pref-search .mon { color: var(--sumi-2); }
.pref-search input {
  border: none;
  background: none;
  font-family: var(--gothic);
  font-size: 0.88rem;
  color: var(--sumi);
  padding: 6px 0;
  min-width: 0;
}
.pref-search input::placeholder { color: var(--sumi-2); opacity: 0.72; }
.pref-search input:focus { outline: none; }
.pref-search:focus-within { border-color: var(--accent); }
.pref-count {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--sumi-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pref-empty { font-size: 0.86rem; color: var(--sumi-2); padding: 26px 4px; }

/* 地方見出しは縦書き、県名は横1列（仕様§8） */
.region {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(18px, 2.6vw, 34px);
  align-items: start;
  padding: clamp(22px, 3vw, 36px) 0;
  border-top: var(--hair);
}
.region:last-child { border-bottom: var(--hair); }
.region-name {
  writing-mode: vertical-rl;
  font-family: var(--mincho);
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--sumi);
  margin: 0;
  justify-self: center;
}
.pref-index { list-style: none; }
.pref-row {
  display: grid;
  grid-template-columns: auto minmax(0, 8em) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(12px, 2vw, 24px);
  padding: 11px 4px;
  border-bottom: var(--hair);
}
.pref-index li:last-child { border-bottom: none; }
.pref-no {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--sumi-2);
  font-variant-numeric: tabular-nums;
}
.pref-row .pref-name {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.08em;
  color: var(--sumi);
}
.pref-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.pref-acts a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 4px 11px;
  border: var(--hair);
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pref-acts a.official { color: var(--sumi); }
.pref-acts a.official:hover { background: var(--sumi); color: var(--paper); border-color: var(--sumi); }
.pref-acts a.search { color: var(--sumi-2); }
.pref-acts a.search:hover { border-color: var(--accent); color: var(--accent); }

/* 取得フローは横罫をやめ、丸番号を貫く縦一本の墨線にする（仕様§8 license） */
.steps.timeline { position: relative; }
.steps.timeline::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 34px;
  bottom: 46px;
  width: 6px;
  pointer-events: none;
  opacity: 0.6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='800' viewBox='0 0 6 800' preserveAspectRatio='none'%3E%3Cfilter id='v' x='-140%25' y='-2%25' width='380%25' height='104%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05 0.014' numOctaves='4' seed='9' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='4' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='2' y='0' width='2' height='800' fill='%2314171A' filter='url(%23v)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.steps.timeline .step { border-top: none; }
.steps.timeline .step:last-child { border-bottom: none; }
/* 丸番号は紙の地で塗り、線を断つ */
.steps.timeline .step::before { background: var(--paper); }

/* ===== 比較カード（免許種類） ===== */
.license-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; }
.license-card {
  background: none;
  border: var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 2px solid var(--sumi);
  padding: 28px 24px 30px;
  transition: background 0.25s;
}
.license-card:hover { background: rgba(255, 255, 255, 0.34); }
.license-card.pick { border-top-color: var(--accent); position: relative; }
.license-card.pick::after {
  content: '人気';
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 1px 9px;
  border-radius: var(--radius);
}
.license-mon { margin-bottom: 18px; }
.license-mon .mon { width: 46px; height: 46px; color: var(--sumi); }
.license-card h3 { font-family: var(--mincho); color: var(--sumi); font-size: 1.06rem; font-weight: 800; margin-bottom: 6px; }
.license-card .en { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.24em; color: var(--accent); font-weight: 700; }
.license-card ul { list-style: none; margin-top: 18px; font-size: 0.82rem; color: var(--sumi-2); }
.license-card ul li { padding: 8px 0 8px 20px; position: relative; border-bottom: var(--hair); line-height: 1.9; }
.license-card ul li:last-child { border-bottom: none; }
.license-card ul li::before { content: '—'; position: absolute; left: 0; color: var(--accent); }

/* ===== フッター ===== */
.site-footer {
  margin-top: clamp(50px, 8vw, 100px);
  background: var(--sumi);
  color: var(--night-sub);
  padding: clamp(50px, 7vw, 76px) clamp(20px, 5vw, 50px) 34px;
}
.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 36px;
}
.site-footer h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mincho);
  color: var(--night-ink);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: 0.1em;
}
.site-footer h2 .mon { color: var(--night-ink); }
/* サイト名の読みと語義。「狩座」は読みが特殊なので名義のすぐ下に置く */
.site-footer .brand-yomi {
  margin: -8px 0 14px;
  font-size: 0.72rem;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--night-sub);
}
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: var(--night-sub); text-decoration: none; font-size: 0.82rem; transition: color 0.2s; }
.site-footer a:hover { color: var(--night-ink); }
.footer-note {
  max-width: 1080px;
  margin: 40px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(232, 228, 218, 0.16);
  font-size: 0.7rem;
  color: var(--night-sub);
  line-height: 2;
}

/* ===== 出現アニメーション ===== */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ===== レスポンシブ ===== */
/* 縦組みコピーを立てたヒーロー（index）だけ、獣を左へ寄せて柱の場所を空ける */
@media (min-width: 901px) {
  .hero-vert img.hero-beast { right: clamp(118px, 15vw, 250px); }
  .hero-vert img.hero-beast-2 { right: clamp(210px, 30vw, 470px); }
  .hero-vert img.hero-beast-3 { right: clamp(300px, 41vw, 650px); }
}

/* 幅が足りなくなったら墨絵は下がって薄い添え物になる */
@media (max-width: 900px) {
  /* 縦組みコピーは絶対配置をやめて流れに戻す（獣と重ならないように） */
  .hero .hero-copy {
    position: static;
    justify-content: flex-end;
    margin: 0 0 6px;
  }
  .hero-copy .vtxt { text-shadow: none; }
  /* 断ち切り図版は1カラムに畳む。図版だけ右へ抜く */
  .plate { grid-template-columns: minmax(0, 1fr); row-gap: 26px; margin-right: 0; }
  .plate-copy { padding-bottom: 0; }
  .plate-fig {
    margin-right: calc(-1 * (50vw - 50%));
    max-width: 420px;
    margin-left: auto;
  }
  .hero h1, .page-hero h1 { max-width: none; }
  .hero .lead, .hero-cta, .page-hero p { max-width: var(--measure); }
  .hero-beast {
    right: -4%;
    bottom: clamp(20px, 4vw, 40px);
    width: clamp(120px, 30vw, 190px);
    opacity: 0.26;
  }
  img.hero-beast {
    right: -10%;
    bottom: 0;
    width: auto;
    height: clamp(200px, 46%, 300px);
    opacity: 0.62;
  }
  /* 狭い画面では3頭を寄せて重ねる（重なりは許容） */
  img.hero-beast-2 {
    right: 20%;
    height: clamp(96px, 24%, 165px);
    opacity: 0.5;
  }
  img.hero-beast-3 {
    right: 44%;
    height: clamp(58px, 14%, 96px);
    opacity: 0.42;
  }
  /* 非対称の組みは2カラムを保てる幅がないので均等へ戻す */
  .card-grid.uneven { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .card-grid.uneven > .lead-card,
  .card-grid.uneven > .info-card:nth-child(4) { grid-column: auto; grid-row: auto; }
  .info-card.lead-card { padding-bottom: clamp(96px, 24vw, 150px); }
  .card-bleed { width: clamp(110px, 34%, 180px); }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split > .ink-figure { max-width: 132px; margin: 0 auto; position: static; opacity: 0.7; }
}

@media (max-width: 768px) {
  /* 縦組みはスマホでは横組みに戻す（仕様 §4） */
  .jsv { flex-direction: row; gap: 0; }
  .jsv .vch.pn { transform: none; }
  .jsv .vch.dash { transform: none; }
  [style*="writing-mode"], .vertical, .chap-title { writing-mode: horizontal-tb !important; }
  /* ヒーローのキーコピー：主題の下に副題を置く横組みへ */
  .hero .hero-copy { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-copy .vtxt { font-size: clamp(1.8rem, 9vw, 2.6rem); letter-spacing: 0.06em; }
  .hero-copy .vsub { padding-top: 0; letter-spacing: 0.12em; }
  /* 横組みでは句読点を右上へ寄せない。アニメーションの終値が transform を握るので
     キーフレームごと差し替える（.jsv .vch.pn の transform:none だけでは勝てない） */
  .hero-copy .vch.pn { animation-name: vchIn; }
  /* 型1：章題を横に寝かせ、番号と並べる */
  .chap { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .chap-col { flex-direction: row; align-items: baseline; gap: 14px; padding-top: 0; }
  .chap-col::after { display: none; }
  .chap-title { letter-spacing: 0.08em; }
  /* 型4：索引は2段に折る */
  .index-list a { grid-template-columns: auto auto minmax(0, 1fr); row-gap: 8px; padding: 20px 4px; }
  .index-list .desc { grid-column: 1 / -1; }
  .index-list .go { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: var(--hair);
    display: none;
    padding: 6px 18px 18px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding: 14px 6px; border-bottom: var(--hair); border-top: none; font-size: 0.92rem; }
  .nav-links a.nav-cta { margin-top: 14px; text-align: center; }
  .hero h1 { font-size: clamp(1.7rem, 6.5vw, 3.8rem); letter-spacing: 0.06em; }
  .step { padding: 26px 0 28px 62px; }
  .step::before { width: 38px; height: 38px; top: 24px; }
  .section-head { grid-template-columns: 1fr; row-gap: 8px; }
  .section-head .en, .section-head h2, .section-head .sub { grid-column: 1; }
  .toc { margin-top: -30px; padding: 20px 20px; }
  .to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
  .info-card, a.link-card { padding: 26px 22px 28px; }
  .sign-foot { grid-template-columns: minmax(0, 1fr); }
  .tsuiku { grid-template-columns: minmax(0, 1fr); }
  .qual-list .qual { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
  .qual-list .desc { grid-column: 2 / -1; }
  /* 都道府県索引：地方見出しを横に寝かせ、県名と導線を2段に折る */
  .region { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .region-name { writing-mode: horizontal-tb !important; letter-spacing: 0.12em; justify-self: start; }
  .pref-row { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; }
  .pref-acts { grid-column: 1 / -1; justify-content: flex-start; }
  /* 部位図：図版を上、一覧を下に積む。sticky も解除する */
  .cuts { grid-template-columns: minmax(0, 1fr); }
  .cuts-fig { position: static; max-width: 460px; margin: 0 auto; }
  /* お品書き：768px以下は横組みの一覧に戻す（仕様§4・§10） */
  .oshinagaki { flex-direction: column; align-items: stretch; gap: 26px; overflow-x: visible; }
  .oshina-group { flex-direction: column; gap: 12px; }
  .oshina-kind {
    writing-mode: horizontal-tb !important;
    border-right: none;
    border-bottom: var(--hair);
    padding: 0 0 8px;
    letter-spacing: 0.14em;
  }
  .oshina-list { flex-direction: column; gap: 10px; }
  .oshina-list li { writing-mode: horizontal-tb !important; line-height: 1.6; }
  .oshina-list small { display: inline; padding: 0 0 0 12px; }
  .tsuiku-col + .tsuiku-col { border-left: none; border-top: var(--hair); }
  .tsuiku-col { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .tsuiku-title { writing-mode: horizontal-tb !important; letter-spacing: 0.08em; }
  .bars li { grid-template-columns: minmax(0, 6em) minmax(0, 1fr) auto; column-gap: 12px; }
  details.sign > summary { padding: 26px 22px 22px; }
  .sign-body { padding: 0 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .fade-up { opacity: 1; transform: none; }
  .hero .lead, .hero-cta, .hero .eyebrow, .page-hero h1, .page-hero p { opacity: 1; transform: none; animation: none; }
  /* transform は触らない。句読点の寄せは .jsv .vch.pn 側（768px以下では解除）に任せる */
  .hero-copy .vch { animation: none; opacity: 1; }
  .figures .stat::after { transition: none; transform: scaleX(1); }
  .marquee-track { animation: none; }
  body::before { display: none; }
  .news-live-badge i { animation: none; }
  .news-skel .bar { animation: none; }
  .mon.draw, .js .mon.draw { stroke-dashoffset: 0; transition: none; }
}