/* 日本脆弱性総合ポータル。仕様は DESIGN.md。色は墨・和紙・紅と補助の鼠だけ */
:root {
  --washi: #f6f3ec;
  --washi-deep: #ece7dc;
  --sumi: #1b1b1f;
  --nezumi: #5f5f64;
  --line: #d6d0c4;
  --beni: #b7282e;
  /* 「この記事の3行まとめ」のカードだけに使う緑。コントラスト比は (明るい方の相対輝度+0.05)/(暗い方+0.05) で計算。
     見出し #1f5f36 は背景 #e8f3ea 上で 6.71、本文の墨 #1b1b1f は同じ背景上で 15.08（基準 4.5）。
     枠 #2f7d4a は和紙 #f6f3ec 上で 4.56（図形の基準 3） */
  --green-bg: #e8f3ea;
  --green-line: #2f7d4a;
  --green-text: #1f5f36;
  --header-bg: #1b1b1f;
  --header-fg: #f6f3ec;

  --font-body:
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic",
    meiryo, sans-serif;
  --font-head:
    "Hiragino Mincho ProN", "Yu Mincho", yumincho, "Noto Serif JP", serif;
  --font-mono: ui-monospace, "SFMono-Regular", menlo, consolas, monospace;

  --gutter: 16px;

  /* 日付ピッカー・selectの一覧・スクロールバーなどのブラウザ標準部品も配色に合わせる */
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --washi: #14161c;
    --washi-deep: #1d2028;
    --sumi: #ece7dc;
    --nezumi: #a3a3a8;
    --line: #33363f;
    --beni: #e2525a;
    /* 見出し #8fd3a6 は背景 #14261b 上で 9.10、本文の墨 #ece7dc は同じ背景上で 12.87。枠 #4f9e6b は墨夜 #14161c 上で 5.54 */
    --green-bg: #14261b;
    --green-line: #4f9e6b;
    --green-text: #8fd3a6;
    --header-bg: #0e1014;
    --header-fg: #ece7dc;
  }
}

@media (min-width: 641px) {
  :root {
    --gutter: 32px;
  }
}

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

/* 内容の短いページ（404・500など）でも、フッターを画面の下端に置く */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--washi);
  color: var(--sumi);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

/* 文字 */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  text-wrap: balance;
  /* 「何が侵入口だ / ったのか。」のように語の途中で改行しないよう、文節で折り返す（lang="ja"） */
  word-break: auto-phrase;
}

h1 {
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

h2 {
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

h3 {
  font-size: 20px;
  line-height: 1.6;
}

p,
ul,
ol,
dl {
  margin: 0;
}

ul,
ol {
  padding-left: 1.25em;
}

p,
li {
  max-width: 40em;
  text-wrap: pretty;
}

::placeholder {
  color: var(--nezumi);
  opacity: 1;
}

a {
  color: var(--sumi);
  text-underline-offset: 0.25em;
}

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0;
}

.note {
  color: var(--nezumi);
  font-size: 14px;
  line-height: 1.7;
}

.weak {
  color: var(--nezumi);
}

:focus-visible {
  outline: 3px solid var(--sumi);
  outline-offset: 2px;
}

/* 本文へ移動。フォーカスしたときだけ画面に出す */
.skip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 12px 16px;
  background: var(--header-bg);
  color: var(--header-fg);
  font-weight: 700;
}

.skip:not(:focus) {
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.skip:focus-visible {
  outline-color: var(--header-fg);
  outline-offset: -3px;
}

/* ボタン。公開側の絞り込みと管理画面で共用する */
.button {
  height: 48px;
  padding: 0 24px;
  border: 1px solid var(--sumi);
  /* 角丸はボタンと入力欄だけ（DESIGN.md §1）。タグ・印・区画は四角のまま */
  border-radius: 4px;
  background: var(--sumi);
  color: var(--washi);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
}

.button:hover {
  background: var(--nezumi);
}

.button:active {
  transform: translateY(1px);
}

.button:disabled {
  border-color: var(--nezumi);
  background: var(--washi-deep);
  color: var(--nezumi);
  cursor: not-allowed;
}

.button.secondary {
  background: var(--washi);
  color: var(--sumi);
}

.button.secondary:hover {
  background: var(--washi-deep);
}

/* 絞り込みのリセット。押せる高さを48px以上にする（ヘッダーのナビより特異度が低いため、先に書く） */
.filter-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

/* ヘッダー */
/* ヘッダーはダークでも墨のまま（色トークンの反転に従わせない） */
.site-header {
  background: var(--header-bg);
  color: var(--header-fg);
}

.site-header :focus-visible {
  outline-color: var(--header-fg);
}

.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  color: var(--header-fg);
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
}

.logo {
  flex: none;
  width: 40px;
  height: 40px;
}

.site-header nav {
  flex: 1 0 100%;
}

.site-header nav ul {
  display: flex;
  gap: 32px;
  padding: 0;
  list-style: none;
}

/* 押せる高さを44px以上にする（10 + 8 + 行高25.6 + 線2） */
.site-header nav a {
  display: block;
  padding: 10px 0 8px;
  border-bottom: 2px solid transparent;
  color: var(--header-fg);
  font-size: 16px;
  line-height: 1.6;
  text-decoration: none;
}

.site-header nav a:hover {
  text-decoration: underline;
}

.site-header nav a[aria-current="page"] {
  border-bottom-color: var(--beni);
  font-weight: 700;
}

/* 太字の幅を先に確保し、現在地が変わってもナビの項目を横にずらさない */
.site-header nav a::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
}

@media (min-width: 641px) {
  .site-header-inner {
    height: 64px;
    flex-wrap: nowrap;
    align-items: center;
  }

  .site-header nav {
    flex: none;
  }

  .site-header nav a {
    padding: 18px 0 16px;
  }
}

/* 本文の枠 */
main,
.site-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

main {
  flex: 1 0 auto;
  width: 100%;
  padding-bottom: 96px;
}

/* 見出し領域と本文は余白で区切り、罫線は引かない（DESIGN.md §4） */
.page-heading {
  position: relative;
  padding: 48px 0;
}

.page-heading > :not(.fuji) {
  position: relative;
}

.page-heading .lede {
  word-break: auto-phrase;
  margin-top: 8px;
  font-size: 20px;
  line-height: 1.6;
}

.page-heading .scope {
  margin-top: 24px;
  color: var(--nezumi);
  font-size: 14px;
}

@media (min-width: 1025px) {
  .home .page-heading h1 {
    font-size: 45px;
    line-height: 1.4;
    letter-spacing: 0;
  }

  .page-heading {
    padding: 64px 0;
  }

  /* 文字は左寄せで、稜線の頂は中央に来るため、下の余白（64px）より少し高くても文字にかからない */
  .fuji {
    height: 96px;
  }
}

/* 富士の稜線。トップページの見出しの背後にだけ描く */
.fuji {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  /* 見出しの下の余白（48px）に収め、収録期間などの文字に稜線をかけない */
  height: 48px;
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5px;
  pointer-events: none;
}

.fuji path {
  vector-effect: non-scaling-stroke;
}

/* 区画 */
.block {
  padding-top: 48px;
}

.block > * + * {
  margin-top: 16px;
}

/* 区画の始まりの線。区切り線は薄い色にし、墨は使わない（DESIGN.md §4） */
.block > h2,
.browse > h2 {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.block h3 {
  margin-top: 32px;
}

.block.tint {
  margin: 48px calc(-1 * var(--gutter)) 0;
  padding: 32px var(--gutter);
  background: var(--washi-deep);
}

.block.tint > h2 {
  padding-top: 0;
  border-top: 0;
}

/* 分類・年から探す。一覧と並べ、1025px以上では右の列に置く */
.browse-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.browse {
  padding-top: 48px;
}

.browse > h2:not(:first-child) {
  margin-top: 48px;
}

.browse-list {
  margin-top: 16px;
  padding: 0;
  list-style: none;
}

.browse-list li {
  max-width: none;
}

/* 現在の項目は、色ではなく太字と左の線で示す。押せる高さを44px以上にする */
.browse-list :is(a, .browse-zero) {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0 4px 12px;
  border-left: 2px solid transparent;
}

.browse > .browse-list a[aria-current="page"] {
  border-left-color: var(--sumi);
  font-weight: 700;
}

.browse-zero {
  color: var(--nezumi);
}

.attr-links {
  padding: 0;
  list-style: none;
}

.attr-links > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* 1列のときは一覧の後ろに来る。一覧が台帳の最後の行の罫線で終わるなら、その罫線を区切りに使う */
@media (max-width: 1024px) {
  .browse-layout > .block:has(> .ledger:last-child) + .browse > h2:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

@media (min-width: 1025px) {
  .browse-layout {
    grid-template-columns: minmax(0, 1fr) 16em;
    gap: 0 48px;
  }

  /* 右に導線の列があると一覧の幅が狭いので、タグを題名の下に回して題名の列を広く取る */
  .browse-layout .ledger-row {
    grid-template-areas:
      "date main mark"
      "date tags mark";
    grid-template-columns: 7em minmax(0, 1fr) 8.5em;
  }

  /* 罫線の直後では、一覧の見出しと同じく自分の上罫線を出さない */
  :is(.page-heading, .warning) + .browse-layout > .browse > h2:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* 件数は「表示 N件 / 全M件」を1行に保つ。狭い幅では見出しの下の行に回る */
.section-heading > :not(h2) {
  flex: none;
  white-space: nowrap;
}

.section-heading + * {
  margin-top: 16px;
}

.warning {
  max-width: none;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}

/* エラーは太い墨の罫線で、完了の通知と区別する（紅は使わない） */
.warning[role="alert"] {
  border-top: 3px solid var(--sumi);
  border-bottom: 3px solid var(--sumi);
}

/* 見出し領域や通知の直後に来る区画は、自分の上罫線を出さない（見出しの直後に線を引かない・通知の線と二重にしない） */
:is(.page-heading, .warning) + .block > :is(h2, .section-heading):first-child,
:is(.page-heading, .warning)
  + .browse-layout
  > .block
  > :is(h2, .section-heading):first-child,
.page-heading + .prose-sections > .block:first-child > h2 {
  padding-top: 0;
  border-top: 0;
}

/* 区画の最後の注意書きは、次の区画の上罫線で閉じる */
.block > .warning:last-child {
  border-bottom: 0;
}

/* 押せる高さを48px以上にする */
.more-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 24px;
  font-weight: 700;
}

/* 記事の上部の戻るリンク。見出し領域の下の余白があるため、上の余白を持たない */
.back-top {
  margin-bottom: 16px;
}

.back-link {
  margin-top: 0;
}

/* 空の表示は囲まない。区切る相手がないため罫線を引かない */
.empty {
  margin-top: 48px;
  padding: 32px 0;
}

.empty > * + * {
  margin-top: 16px;
}

.page-heading + .empty {
  margin-top: 0;
}

/* 集計の数字 */
.figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.filter + .figures {
  margin-top: 48px;
}

.figures > div {
  padding: 24px 16px 24px 0;
}

.figures dt {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.figures dd {
  margin: 0;
  /* 4列のときに「評価ではな / い」と1文字だけ落ちないよう、文節で折り返す */
  word-break: auto-phrase;
}

.figures .figure {
  font-size: 32px;
  line-height: 1.5;
}

.figures .figure span {
  margin-left: 4px;
  font-family: var(--font-body);
  font-size: 14px;
}

@media (min-width: 1025px) {
  .figures {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 印（状態の表示）。塗りと線で区別し、文字ラベルを必ず添える */
.mark {
  display: inline-block;
  padding: 0 8px;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 1.7;
  white-space: nowrap;
}

.mark-gap {
  border-color: var(--beni);
  background: var(--beni);
  color: var(--washi);
}

.mark-undiscovered {
  border: 1px solid var(--sumi);
  color: var(--sumi);
}

.mark-pending {
  border: 1px dotted var(--nezumi);
  color: var(--nezumi);
}

.certainty {
  font-size: 14px;
}

.certainty.weak {
  color: var(--nezumi);
}

.tag {
  display: inline-block;
  padding: 0 8px;
  background: var(--washi-deep);
  color: var(--sumi);
  font-size: 14px;
  line-height: 1.7;
}

/* 事例の一覧（台帳） */
.ledger {
  padding: 0;
  list-style: none;
}

.ledger li {
  max-width: none;
  border-top: 1px solid var(--line);
}

.ledger li:last-child {
  border-bottom: 1px solid var(--line);
}

.ledger-row {
  display: grid;
  grid-template-areas:
    "date mark"
    "main main"
    "tags tags";
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  padding: 16px 8px;
  color: var(--sumi);
  text-decoration: none;
}

.ledger-row:hover {
  background: var(--washi-deep);
}

.ledger-row:hover .tag {
  background: var(--washi);
}

.ledger-date {
  grid-area: date;
  font-size: 14px;
}

.ledger-mark {
  grid-area: mark;
  justify-self: end;
  color: var(--nezumi);
  font-size: 14px;
}

.ledger-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ledger-main strong {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.ledger-tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (min-width: 641px) {
  .ledger-row {
    grid-template-areas:
      "date main mark"
      "date tags mark";
    grid-template-columns: 7em 1fr auto;
    align-items: start;
  }

  .ledger-mark {
    justify-self: end;
  }
}

@media (min-width: 1025px) {
  .ledger-row {
    grid-template-areas: "date main tags mark";
    /* タグ列は最長のタグ（「認証情報・シークレット」約170px）、印の列は最長の印（「対策の欠落を確認」約132px）に合わせ、題名の列を広く取る */
    grid-template-columns: 7em minmax(0, 1fr) 11em 8.5em;
  }

  .ledger-tags {
    align-content: flex-start;
  }
}

/* 原因タグの無い行は、空の tags 列・行を作らない */
.ledger-row.no-tags {
  grid-template-areas:
    "date mark"
    "main main";
}

@media (min-width: 641px) {
  .ledger-row.no-tags {
    grid-template-areas: "date main mark";
  }
}

@media (min-width: 1025px) {
  .ledger-row.no-tags {
    grid-template-columns: 7em minmax(0, 1fr) 8.5em;
  }
}

/* 絞り込み */
.filter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 24px 0 0;
}

.filter label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
}

.filter input,
.filter select,
.home-search input {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--sumi);
  /* 入力欄はボタンと同じ4pxの角丸（DESIGN.md §1） */
  border-radius: 4px;
  background: var(--washi);
  color: var(--sumi);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.02em;
  appearance: none;
}

/* 矢印を描く硬い境界の linear-gradient は装飾ではない（DESIGN.md §7の例外）。管理画面のselectも同じ矢印にそろえる */
.filter select,
.admin-form select {
  appearance: none;
  padding-right: 32px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--sumi) 50%),
    linear-gradient(135deg, var(--sumi) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 21px,
    calc(100% - 13px) 21px;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

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

  .filter-q,
  .filter-actions {
    grid-column: 1 / -1;
  }
}

/* 1段目に検索欄と操作、2段目にselect */
@media (min-width: 1025px) {
  /* 2段目の先頭は原因の分類。「認証情報・シークレット (4)」等の長い選択肢が1025px幅でも切れないよう広げる */
  .filter {
    grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr));
    align-items: end;
  }

  /* 操作（送信ボタンと「条件をリセット」）は1列には収まらないため、右の2列を使う */
  .filter-q {
    grid-column: 1 / 3;
  }

  .filter-actions {
    grid-column: 3 / -1;
    grid-row: 1;
  }
}

/* トップの検索（検索語だけ） */
.home-search {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 16px;
  margin-top: 32px;
}

.home-search label {
  font-size: 14px;
  font-weight: 700;
}

@media (min-width: 641px) {
  .home-search {
    grid-template-columns: 1fr auto;
  }

  .home-search label {
    grid-column: 1 / -1;
  }
}

/* 事例の詳細 */
.detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 48px;
}

.intro {
  margin-top: 48px;
  font-size: 20px;
  line-height: 1.6;
}

/* この記事の3行まとめ。DESIGN.md の3色の決まりの例外で、緑を使うのはこのカードだけ */
.key-points {
  padding: 16px;
  border: 1px solid var(--green-line);
  border-radius: 4px;
  background: var(--green-bg);
}

@media (min-width: 641px) {
  .key-points {
    padding: 24px;
  }
}

.key-points-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--green-text);
  font-size: 20px;
  line-height: 1.6;
}

.key-points-icon {
  flex: none;
  width: 32px;
  height: 32px;
}

.key-points ol {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.key-points + .intro {
  margin-top: 32px;
}

.chain {
  padding-left: 1.5em;
}

/* 本文の重要な語句（原因・被害）。色だけに頼らず太字も付ける */
.key {
  color: var(--beni);
  font-weight: 700;
}

.detail-attrs {
  padding-top: 48px;
}

.attrs > div {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.attrs > div:first-child {
  border-top: 1px solid var(--line);
}

.attrs dt {
  font-size: 14px;
  font-weight: 700;
}

.attrs dd {
  margin: 0;
}

.sources {
  padding: 0;
  list-style: none;
}

.sources li {
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.sources li:first-child {
  border-top: 0;
  padding-top: 0;
}

.source-title {
  display: block;
  font-weight: 700;
}

@media (min-width: 1025px) {
  .detail {
    grid-template-columns: 2fr 1fr;
  }

  /* 2列のときは属性欄が見出し領域のすぐ下に来るため、上罫線と上の余白を持たない */
  .attrs > div:first-child {
    border-top: 0;
  }

  .back-top + .detail .detail-attrs {
    padding-top: 0;
  }
}

/* 外部資料へのリンク */
.source {
  display: block;
  padding: 16px 0 0;
  font-weight: 700;
}

.source-note {
  display: block;
  color: var(--nezumi);
  font-size: 14px;
  font-weight: 400;
}

.block > .source {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* 一覧の直後のリンクは、一覧の最後の行の下罫線を区切りに使う */
.block > .ledger + .source {
  border-top: 0;
}

.block > .source + .source {
  margin-top: 0;
}

/* 集計 */
.report-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 48px;
}

@media (min-width: 1025px) {
  .report-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* 「原因の分類」は右の2区画と同じ高さにする */
  .report-grid > .block:first-child {
    grid-row: span 2;
  }
}

.bars {
  padding: 0;
  list-style: none;
}

.bars li {
  max-width: none;
}

.bar-row {
  display: grid;
  grid-template-areas:
    "label count"
    "track track";
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 8px 0;
}

.bar-label {
  grid-area: label;
}

.bar-count {
  grid-area: count;
  min-width: 4em;
  text-align: right;
}

.bar-track {
  grid-area: track;
  display: block;
  height: 8px;
  background: var(--washi-deep);
}

.bar-fill {
  display: block;
  height: 100%;
  background: var(--sumi);
}

.bar-fill.accent {
  background: var(--beni);
}

/* 表 */
.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.6;
}

.data-table th,
.data-table td {
  padding: 8px 16px 8px 8px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

/* 見出し行は背景色で区別し、上に罫線を引かない */
.data-table thead th {
  border-top: 0;
  background: var(--washi-deep);
  font-weight: 700;
  white-space: nowrap;
}

.data-table caption {
  padding-bottom: 8px;
  text-align: left;
}

/* 行の見出し（年・表示名）は本文と同じ太さ。太字は列見出しだけ */
/* 行見出し（「2021年」「侵入口は未公表」）は折り返さない。狭い幅では表を横にスクロールする */
.data-table tbody th {
  font-weight: 400;
  white-space: nowrap;
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: 1px solid var(--line);
}

/* 区画の最後の表は、次の区画の上罫線で閉じる */
.block
  > .table-scroll:last-child
  .data-table
  tbody
  tr:last-child
  > :is(th, td) {
  border-bottom: 0;
}

.data-table .num {
  text-align: right;
}

.prose-sections > .block:first-child {
  padding-top: 48px;
}

/* フッター */
/* 背景色が変わるので、上に罫線は引かない */
.site-footer {
  background: var(--washi-deep);
}

.site-footer-inner {
  padding-top: 32px;
  padding-bottom: 48px;
  font-size: 14px;
}

.site-footer-inner > * + * {
  margin-top: 8px;
}

.footer-title {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
}

.site-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  padding: 0;
  list-style: none;
}

.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* 見出し領域の直後の区画は上の余白を持たない。間は見出しの下の余白（48〜64px）だけにする */
.page-heading + .block,
.page-heading + .prose-sections > .block:first-child,
.page-heading + .browse-layout > :is(.block, .browse) {
  padding-top: 0;
}

.back-top + .detail .intro:first-child {
  margin-top: 0;
}

.page-heading + :is(.empty, .filter) {
  padding-top: 0;
}

.page-heading + .empty > :first-child {
  margin-top: 0;
}