/* ==========================================================================
   page-doc.css — 文書テンプレート（ご利用規約・プライバシーポリシー・LOCUSについて）
   パンくず、ページタイトルと本文を載せる面、目次、条文の組み。
   ヘッダ・フッタ・検索・オーバーレイは components.css が持つ。ここでは触らない。
   sp（〜767px）を基準に書き、tablet / desktop / wide で上書きする（DESIGN.md 8章）。
   影を使わない（DESIGN.md 5.3）。面と罫線だけで立てる。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. ページの地と文字色
   下層ページは DESIGN.md 2.1 の規範どおり。トップの例外（#FCFCFC / #000）を持ち込まない。
   html の地は .page-bg の画像が読めなかったときにだけ見える。body は透明のまま
   （base.css）。ここで地を敷くと z-index: -10 の .page-bg を隠す。
   -------------------------------------------------------------------------- */

html.doc {
  background-color: var(--color-bg-default);
}

html.doc body {
  color: var(--color-text-primary);
}

.doc {
  /* ヘッダの高さ。components.css の .site-header と同じ値を段ごとに持つ。
     パンくずの上余白（固定ヘッダのぶん）と、ページ内リンクの着地位置に使う。 */
  --doc-header-h: 85px;
  /* 外周余白。DESIGN.md 8章。wide の 160px は tokens.css に無いのでここで持つ。 */
  --doc-pad: var(--pad-sp);
  /* シートの内側。カンプは上下と左右で値が違う */
  --doc-sheet-pad-x: 20px;
  --doc-sheet-pad-y: 24px;
  /* ページタイトルと本文を切る罫線の、上と下の空き。カンプは上下で値が違う */
  --doc-rule-gap-above: 20px;
  --doc-rule-gap-below: 24px;
  /* 面はすべて地図を透かす。比率はヒーローのカードに合わせ、最も暗い地図の上でも
     本文の最小コントラスト（--color-text-tertiary）が 4.5:1 を下回らない値。 */
  --doc-surface: rgba(255, 255, 255, 0.92);
  --doc-surface-muted: rgba(246, 244, 240, 0.92);
  /* 目次パネルの開閉。イージングは motion.css の --intro-ease-item を使う。
     操作への応答のため --intro-item-dur-fast（450ms）より短くする。
     閉じるときは開くときより速く（依頼の「唐突に消えない」を、開くより速い引きで満たす）。 */
  --doc-toc-shift: 12px;
  --doc-toc-open-dur: 180ms;
  --doc-toc-close-dur: 120ms;
}

/* パンくずは地が白。固定ヘッダとの境目をカンプどおり髪の毛罫で切る */
.doc .site-header {
  border-bottom: var(--stroke-hairline) solid var(--color-border-default);
}

/* --------------------------------------------------------------------------
   1. パンくず
   カンプ：高さ48（SPは44）、地は白、x160 起点（SPは x20）。現在地はリンクにしない。
   -------------------------------------------------------------------------- */

.breadcrumb {
  /* 固定ヘッダのぶんを padding で送る。地の白がヘッダの背後まで届く */
  padding-top: var(--doc-header-h);
  background-color: var(--doc-surface);
}

.breadcrumb__list {
  display: flex;
  margin: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-8);
  min-height: 44px;
  padding: 0 20px;
  font-size: var(--size-min-sp);
  line-height: var(--leading-min);
  color: var(--color-text-secondary);
}

.breadcrumb__list li {
  display: flex;
  align-items: center;
  gap: 0 var(--space-8);
}

.breadcrumb__sep {
  color: var(--color-text-tertiary);
}

.breadcrumb a {
  color: var(--color-primary-dark);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   2. 背景
   背景は .page-bg の固定レイヤーが持つ。文書ページでは読み込み演出を行わない
   （motion.css はトップのために残し、ここで打ち消す）。膜そのものは残し、
   演出後の濃度で最初から置く。
   -------------------------------------------------------------------------- */

html.doc .page-bg img {
  animation: none;
  opacity: 1;
}

html.doc .page-bg::after {
  animation: none;
  opacity: var(--intro-veil-opacity);
}

/* --------------------------------------------------------------------------
   3. シート
   カンプ：ページタイトルと本文は1枚の面。SPは x10 幅400、内側20／上24。
   PCは x248 幅1104、内側48。あいだを髪の毛罫で切る。
   目次は面の右上に重ねる。段組みではなく、行をまたぐ1列のグリッドで重ねる。
   -------------------------------------------------------------------------- */

.doc-main {
  padding: 28px var(--doc-pad) 56px;
}

.doc-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  max-width: 1104px;
  margin-inline: auto;
  padding: var(--doc-sheet-pad-y) var(--doc-sheet-pad-x);
  background-color: var(--doc-surface);
  border-radius: 20px;
}

.not-found-main {
  width: 100%;
}

.not-found-sheet {
  display: flex;
  min-height: 360px;
  max-width: 1104px;
  margin-inline: auto;
  padding: 48px 20px;
  align-items: center;
  justify-content: center;
  background-color: var(--doc-surface);
  border-radius: 20px;
  text-align: center;
}

.not-found-message {
  display: flex;
  width: 100%;
  max-width: 920px;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.not-found-heading-group {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 10px;
}

.not-found-code {
  font-size: var(--size-min-sp);
  font-weight: var(--weight-h3);
  line-height: var(--leading-body);
  letter-spacing: 0.08em;
  color: var(--color-accent-default);
}

.not-found-title {
  font-size: var(--size-display-sp);
  font-weight: var(--weight-display);
  line-height: var(--leading-heading);
  color: var(--color-text-primary);
}

.not-found-copy {
  width: 100%;
  max-width: 720px;
  font-size: var(--size-body-sp);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
}

.doc-head {
  grid-column: 1;
  grid-row: 1;
  padding-bottom: var(--doc-rule-gap-above);
  border-bottom: var(--stroke-hairline) solid var(--color-border-default);
}

.doc-head__title {
  font-size: var(--size-h1-sp);
  font-weight: var(--weight-h1);
  line-height: var(--leading-heading);
  color: var(--color-text-primary);
}

.doc-head__lead {
  margin-top: var(--space-12);
  font-size: var(--size-body-sp);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
}

.doc-head__date {
  margin-top: var(--space-12);
  font-size: var(--size-min-sp);
  line-height: var(--leading-min);
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.doc-head__date-sep {
  margin: 0 var(--space-16);
}

@media (max-width: 767px) {

  /* 目次ボタン（実測100px）が面の右端から10px内側に重なる。横で避けるための空き */
  .doc-head__title {
    padding-right: calc(100px - 10px + var(--space-8));
  }

  .doc-head__lead,
  .doc-head__date {
    margin-top: var(--space-24);
  }

  /* 目次ボタンを面の右端から10px・上端から11pxへ寄せる（Figma 233:5153）。
     sticky の可動域はグリッド行の開始位置を基準にするため、margin で通常位置を
     移動させる（sheetのpadding分をmarginで打ち消して詰める）。 */
  .doc-toc {
    margin-top: calc(-1 * (var(--doc-sheet-pad-y) - 11px));
    margin-right: calc(-1 * (var(--doc-sheet-pad-x) - 10px));
  }
}

/* --------------------------------------------------------------------------
   4. 目次
   ボタンを押すとパネルが開く。SPは面の右上に貼り付き、スクロールしても残る
   （行をまたいで置き、シートの高さぶんを sticky の可動域にする）。
   PCは貼り付けず、カンプどおり面の右上に置く。
   -------------------------------------------------------------------------- */

.doc-toc {
  grid-column: 1;
  grid-row: 1 / -1;
  justify-self: end;
  align-self: start;
  position: sticky;
  top: calc(var(--doc-header-h) + var(--space-8));
  z-index: 3;
}

.doc-toc__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 11px;
  font-family: inherit;
  font-size: var(--size-body-sp);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-surface);
  border: var(--stroke-hairline) solid var(--color-border-default);
  border-radius: 9999px;
  cursor: pointer;
}

.doc-toc__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.doc-toc__icon:first-child {
  color: var(--color-primary-default);
}

.doc-toc__icon--down,
.doc-toc__icon--up {
  color: var(--color-text-secondary);
}

.doc-toc__button[aria-expanded="false"] .doc-toc__icon--up,
.doc-toc__button[aria-expanded="true"] .doc-toc__icon--down {
  display: none;
}

.doc-toc__panel {
  position: absolute;
  top: calc(100% + var(--space-8));
  right: 0;
  width: 300px;
  max-width: calc(100vw - 2 * var(--doc-pad) - 2 * var(--doc-sheet-pad-x));
  max-height: calc(100vh - var(--doc-header-h) - 96px);
  padding: var(--space-16) 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--color-bg-muted);
  border: var(--stroke-hairline) solid var(--color-border-default);
  border-radius: 8px;
  opacity: 0;
  transform: translateX(var(--doc-toc-shift));
  transition: opacity var(--doc-toc-close-dur) var(--intro-ease-item),
              transform var(--doc-toc-close-dur) var(--intro-ease-item);
}

.doc-toc__panel.is-open {
  opacity: 1;
  transform: translateX(0);
  transition-duration: var(--doc-toc-open-dur);
}

.doc-toc__panel[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {

  /* .is-open は特度が高いため、閉状態のセレクタだけでは打ち消せない */
  .doc-toc__panel,
  .doc-toc__panel.is-open {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.doc-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* カンプの送りは34px。DESIGN.md 8章末尾のタッチ対象44pxを満たす値へ広げる */
.doc-toc__list a {
  display: block;
  padding: 10px 0;
  font-size: var(--size-body-sp);
  line-height: var(--leading-body);
  color: var(--color-primary-dark);
  text-decoration-line: none;
}

.doc-toc__list a:hover {
  color: var(--color-primary-default);
  text-decoration-line: underline;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   5. 条文
   本文は16px・行間1.5（DESIGN.md 3.4 / 3.5）。分量を理由に詰めない（5.3）。
   条・項の番号は等幅で組む（5.3）。
   -------------------------------------------------------------------------- */

.doc-body {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  padding-top: var(--doc-rule-gap-below);
}

.location-candidate-lead {
  color: var(--color-text-secondary);
}

.location-candidate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
  margin-top: var(--space-24);
}

.location-candidate-card {
  display: flex;
  min-height: 64px;
  padding: var(--space-16);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  color: var(--color-primary-dark);
  background: var(--color-bg-surface);
  border: var(--stroke-hairline) solid var(--color-border-default);
  border-radius: 12px;
  text-decoration: none;
}

.location-candidate-card:hover,
.location-candidate-card:focus-visible {
  border-color: var(--color-primary-default);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 767px) {
  .location-candidate-grid {
    grid-template-columns: 1fr;
  }
}

.doc-body > h2 {
  margin-top: 40px;
  font-size: var(--size-h2-sp);
  font-weight: var(--weight-h2);
  line-height: var(--leading-heading);
  color: var(--color-text-primary);
  text-wrap: pretty;
}

.doc-body > h2:first-child {
  margin-top: 0;
}

.doc-body h3 {
  margin-top: 32px;
  font-size: var(--size-h3-sp);
  font-weight: var(--weight-h3);
  line-height: var(--leading-heading);
  color: var(--color-text-primary);
  text-wrap: pretty;
}

/* ページ内リンクの着地が固定ヘッダに潜らないようにする */
.doc-body h2,
.doc-body h3 {
  scroll-margin-top: calc(var(--doc-header-h) + var(--space-16));
}

.doc-body p {
  margin-top: var(--space-16);
  font-size: var(--size-body-sp);
  line-height: var(--leading-body);
}

.doc-body h2 + p,
.doc-body h3 + p,
.doc-body h2 + .doc-list,
.doc-body h3 + .doc-list,
.doc-body h2 + .doc-bullets,
.doc-body h3 + .doc-bullets,
.doc-body h2 + .doc-scroll,
.doc-body h3 + .doc-scroll {
  margin-top: var(--space-12);
}

.doc-body strong {
  font-weight: var(--weight-h3);
}

/* 項・号の番号。左に等幅で置き、右そろえで桁をそろえる */
.doc-list {
  counter-reset: doc-item;
  margin: var(--space-16) 0 0;
  padding-left: 2.4em;
  list-style: none;
}

.doc-list > li {
  position: relative;
  margin-top: var(--space-12);
  font-size: var(--size-body-sp);
  line-height: var(--leading-body);
}

.doc-list > li:first-child {
  margin-top: 0;
}

.doc-list > li::before {
  counter-increment: doc-item;
  content: counter(doc-item) ".";
  position: absolute;
  left: -2.4em;
  width: 2em;
  font-family: var(--font-mono);
  font-feature-settings: normal;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-text-secondary);
}

.doc-list .doc-list {
  margin-top: var(--space-12);
  margin-bottom: 0;
}

/* 順序を持たない箇条書き。番号を振ると原文に無い順位を与えるため、点で置く */
.doc-bullets {
  margin: var(--space-16) 0 0;
  padding-left: 1.4em;
  list-style: none;
}

.doc-bullets > li {
  position: relative;
  margin-top: var(--space-12);
  font-size: var(--size-body-sp);
  line-height: var(--leading-body);
}

.doc-bullets > li:first-child {
  margin-top: 0;
}

.doc-bullets > li::before {
  content: "";
  position: absolute;
  left: -1.4em;
  top: calc(0.5em * var(--leading-body) - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-text-secondary);
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-body-sp);
  line-height: var(--leading-body);
}

.doc-table th,
.doc-table td {
  padding: var(--space-8) var(--space-12);
  text-align: left;
  vertical-align: top;
  border: var(--stroke-hairline) solid var(--color-border-default);
}

.doc-table th {
  font-weight: var(--weight-h3);
  white-space: nowrap;
  background-color: var(--color-bg-muted);
}

/* 幅の狭い画面で表がページを横に伸ばさないよう、表だけを内側で送る */
.doc-scroll {
  margin-top: var(--space-16);
  overflow-x: auto;
}

/* ==========================================================================
   tablet（768〜1023px）
   ========================================================================== */

@media (min-width: 768px) {

  .doc {
    --doc-header-h: 96px;
    --doc-pad: var(--pad-tablet);
    --doc-sheet-pad-x: 32px;
    --doc-sheet-pad-y: 32px;
    --doc-rule-gap-above: 24px;
    --doc-rule-gap-below: 32px;
  }

  .breadcrumb__list {
    min-height: 48px;
    padding: 0 var(--pad-tablet);
    font-size: var(--size-min-pc);
  }

  .doc-main {
    padding-top: 40px;
    padding-bottom: 80px;
  }

  .not-found-sheet {
    min-height: 444px;
    padding: 64px;
  }

  .not-found-title {
    font-size: var(--size-display-pc);
  }

  .doc-head__title {
    font-size: var(--size-h1-pc);
  }

  .doc-head__lead {
    font-size: var(--size-body-pc);
  }

  .doc-head__date {
    font-size: var(--size-min-pc);
  }

  .doc-body > h2 {
    font-size: var(--size-h2-pc);
  }

  .doc-body h3 {
    font-size: var(--size-h3-pc);
  }

  /* 目次18項目が1行に収まる最小幅は425px（第11条の項目名で実測）。
     tabletの面内側幅（768px幅で最小625px）に収まる範囲で余裕を持たせる。 */
  .doc-toc__panel {
    width: 440px;
  }
}

/* ==========================================================================
   desktop（1024〜1439px）
   カンプ：面 x248 幅1104、内側48。目次ボタンは面の右上（右端が内側余白に接する）。
   本文の版面は720。
   ========================================================================== */

@media (min-width: 1024px) {

  .doc {
    --doc-header-h: 118px;
    --doc-pad: var(--pad-desktop);
    --doc-sheet-pad-x: 48px;
    --doc-sheet-pad-y: 48px;
    --doc-rule-gap-above: 32px;
    --doc-rule-gap-below: 40px;
  }

  .breadcrumb__list {
    padding: 0 var(--pad-desktop);
  }

  .doc-main {
    padding-top: 48px;
    padding-bottom: 96px;
  }

  .doc-body {
    max-width: 720px;
  }

  .doc-toc {
    position: relative;
    top: auto;
  }

  .doc-toc__button {
    gap: var(--space-8);
    padding: 0 14px;
  }

  .doc-toc__icon {
    width: 18px;
    height: 18px;
  }

  /* 目次18項目が1行に収まる最小幅は364px（第11条の項目名で実測）。 */
  .doc-toc__panel {
    width: 380px;
    max-height: none;
  }

  .doc-toc__list a {
    padding: 6px 0;
    font-size: var(--size-min-pc);
    line-height: var(--leading-min);
  }
}

/* ==========================================================================
   wide（1440px〜）
   ========================================================================== */

@media (min-width: 1440px) {

  .doc {
    /* DESIGN.md 8章の wide の外周余白。パンくずの起点がカンプの x160 になる */
    --doc-pad: 160px;
  }

  .breadcrumb__list {
    padding: 0 160px;
  }
}

/* ==========================================================================
   6. 出典の一覧（/license/）
   1つの表のマークアップを、sp ではカード、tablet 以上では表として見せる。
   sp で display を差し替えるため、HTML 側に role を明示して表の意味を保つ。
   Figma 232:4003（PCの表）／233:5178（SPのカード）。
   ========================================================================== */

.doc-extlink {
  text-decoration-line: underline;
  text-underline-offset: 3px;
}

.doc-extlink__icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 4px;
  vertical-align: -0.12em;
  color: var(--color-text-tertiary);
}

.doc-sources {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-body-sp);
  line-height: var(--leading-body);
}

.doc-sources th,
.doc-sources td {
  text-align: left;
  vertical-align: top;
}

.doc-sources__sub {
  display: block;
  margin-top: 4px;
  font-size: var(--size-min-sp);
  line-height: var(--leading-min);
}

/* --- sp（〜767px）：カード。カンプ 233:5179 は内側18・カード間12 --- */

@media (max-width: 767px) {

  .doc-sources,
  .doc-sources thead,
  .doc-sources tbody,
  .doc-sources tr,
  .doc-sources th,
  .doc-sources td {
    display: block;
  }

  .doc-sources thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .doc-sources tbody tr {
    margin-top: var(--space-12);
    padding: 18px;
    background-color: var(--doc-surface-muted);
    border: var(--stroke-hairline) solid var(--color-border-default);
    border-radius: 8px;
  }

  .doc-sources tbody tr:first-child {
    margin-top: 0;
  }

  .doc-sources__name {
    font-weight: var(--weight-h3);
    line-height: var(--leading-min);
  }

  .doc-sources td {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: var(--space-8);
    margin-top: 10px;
    font-size: var(--size-min-sp);
    line-height: var(--leading-min);
  }

  .doc-sources td::before {
    content: attr(data-label);
    color: var(--color-text-tertiary);
  }
}

/* --- tablet 以上：表。カンプ 232:4003 は見出し行40・本文の行48（セル上下12） --- */

@media (min-width: 768px) {

  .doc-sources {
    table-layout: fixed;
    min-width: 560px;
  }

  .doc-sources__col--name { width: 38%; }
  .doc-sources__col--dist { width: 18%; }
  .doc-sources__col--terms { width: 31%; }
  .doc-sources__col--work { width: 13%; }

  .doc-sources thead th {
    padding: 10px var(--space-8);
    font-size: var(--size-min-pc);
    font-weight: var(--weight-h3);
    line-height: var(--leading-min);
    color: var(--color-text-secondary);
    white-space: nowrap;
    background-color: var(--color-bg-muted);
    border-bottom: var(--stroke-hairline) solid var(--color-border-default);
  }

  .doc-sources tbody th,
  .doc-sources tbody td {
    padding: var(--space-12) var(--space-8);
    border-bottom: var(--stroke-hairline) solid var(--color-border-default);
  }

  .doc-sources tbody th {
    font-weight: var(--weight-body);
  }

  .doc-sources tr > :first-child {
    padding-left: 0;
  }

  .doc-sources tr > :last-child {
    padding-right: 0;
  }
}

/* ==========================================================================
   7. 本文に置かれる素の要素
   お知らせの記事本文は Markdown から生まれ、クラスを持たない（`content/news/README.md`
   が許す範囲は見出し・段落・箇条書き・リンク・強調・インラインコードだけ）。
   クラスを持つ .doc-list / .doc-bullets（既存4ページ）と衝突させないため、
   :not([class]) で素の要素だけに当てる。
   ========================================================================== */

.doc-body > :first-child {
  margin-top: 0;
}

.doc-body ul:not([class]) {
  margin: var(--space-16) 0 0;
  padding-left: 1.4em;
  list-style: none;
}

.doc-body ul:not([class]) > li {
  position: relative;
  margin-top: var(--space-12);
  font-size: var(--size-body-sp);
  line-height: var(--leading-body);
}

.doc-body ul:not([class]) > li:first-child {
  margin-top: 0;
}

.doc-body ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: -1.4em;
  top: calc(0.5em * var(--leading-body) - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-text-secondary);
}

.doc-body h2 + ul:not([class]),
.doc-body h3 + ul:not([class]) {
  margin-top: var(--space-12);
}

.doc-body code {
  padding: 0.1em 0.35em;
  font-family: var(--font-mono);
  font-feature-settings: normal;
  font-size: 0.9em;
  background-color: var(--color-bg-muted);
  border-radius: 4px;
}

/* ==========================================================================
   8. お知らせ（/news/ と /news/{id}/）
   Figma 232:4240（一覧）／239:5530（記事）。
   ========================================================================== */

/* --- 区分タグ。3値（お知らせ・障害・重要）で地と枠を変える ---------------
   カンプの寸法（高さ26／「重要」46／「お知らせ」74）は 14px・左右9px で出る。
   「重要」だけ accent/default を敷く（DESIGN.md 2.9 の例外）。他の2値は
   カテゴリ色を使えない（5.3）ため、地と枠の差だけで分ける。 */

.news-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 74px;
  height: 26px;
  padding: 0 9px;
  font-size: var(--size-min-sp);
  line-height: 1;
  white-space: nowrap;
  color: var(--color-text-secondary);
  background-color: var(--color-bg-muted);
  border: var(--stroke-hairline) solid var(--color-border-default);
  border-radius: 4px;
}

.news-tag--incident {
  color: var(--color-text-primary);
  background-color: var(--color-bg-surface);
  border-color: var(--color-border-strong);
}

.news-tag--important {
  color: var(--color-text-inverse);
  background-color: var(--color-accent-default);
  border-color: var(--color-accent-default);
}

/* --- 一覧 --------------------------------------------------------------- */

.news-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-list__item {
  padding: var(--space-16) 0;
  border-bottom: var(--stroke-hairline) solid var(--color-border-default);
}

.news-list__item:first-child {
  padding-top: 0;
}

.doc-body .news-list__meta {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-top: 0;
}

.news-list__date {
  font-size: var(--size-min-sp);
  line-height: var(--leading-min);
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* タッチ対象44px（DESIGN.md 8章末尾）を上下の padding で満たす */
.news-list__title {
  display: block;
  padding: 10px 0;
  font-size: var(--size-body-sp);
  line-height: var(--leading-body);
  color: var(--color-primary-dark);
  text-decoration-line: none;
}

.news-list__title:hover {
  color: var(--color-primary-default);
  text-decoration-line: underline;
  text-underline-offset: 4px;
}

/* --- 0件 ----------------------------------------------------------------
   記事が無いのは正常な状態である。罫線・地・アイコンを足すと、一覧が出るはずの
   場所で何かが失敗したように読まれる。上下24pxは一覧1行（tablet以上で66px）に
   釣り合わせた値。 */

.doc-body .news-empty {
  margin: 0;
  padding: var(--space-24) 0;
  font-size: var(--size-body-sp);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
}

/* --- 記事のタグと日付 --------------------------------------------------- */

.doc-body .doc-head__meta,
.doc-head__meta {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin: 0 0 var(--space-12);
}

.doc-head__meta .news-list__date {
  font-size: var(--size-min-sp);
}

/* --- 一覧へ戻る。カンプ w181 h50 --------------------------------------- */

.doc-back {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-width: 181px;
  min-height: 50px;
  margin-top: var(--space-32);
  padding: 0 var(--space-16);
  font-size: var(--size-body-sp);
  line-height: var(--leading-body);
  color: var(--color-primary-dark);
  background-color: var(--color-bg-surface);
  border: var(--stroke-control) solid var(--color-primary-dark);
  border-radius: 9999px;
  text-decoration-line: none;
}

.doc-back:hover {
  color: var(--color-text-inverse);
  background-color: var(--color-primary-dark);
}

.doc-back__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

@media (min-width: 1024px) {

  /* 一覧は散文ではないため、本文カラム720pxではなく面の内側いっぱい（カンプ1008）を使う。
     タイトルの下の罫線と一覧の罫線が同じ幅で揃う。 */
  .doc-body--wide {
    max-width: none;
  }
}

@media (min-width: 768px) {

  /* カンプの1行 66px。日付 w110・タグ x130・タイトルは残り。
     日付とタグの間だけ詰めるため、column-gap ではなく空きトラック
     （2・4列目）で個別の間隔を持たせる。 */
  .news-list__item {
    display: grid;
    grid-template-columns: 110px var(--space-12) 74px 20px minmax(0, 1fr);
    align-items: center;
    column-gap: 0;
    min-height: 66px;
    padding: var(--space-8) 0;
  }

  .doc-body .news-list__meta {
    display: contents;
  }

  .news-list__date {
    grid-column: 1;
  }

  .news-list__meta .news-tag {
    grid-column: 3;
    justify-self: start;
  }

  .news-list__title {
    grid-column: 5;
    padding: 0;
  }
}

/* ==========================================================================
   9. フォーム（/contact/）
   DESIGN.md 4.6：DADS の構造と状態設計に従う。枠は border/strong 2px、
   フォーカスリングを削除しない、エラーを色だけで伝えない。
   Figma 232:4302：ラベル23／入力欄52（内側左16）／項目間32／本文欄150／
   同意22×22／送信 w128 h54。
   JavaScript を持たない。検証はブラウザの標準（required / maxlength / type）に任せ、
   サーバーが返す状態は .form-summary と .form-field__error に載る。
   ========================================================================== */

.doc-body .form-note {
  margin-top: 0;
  font-size: var(--size-min-sp);
  line-height: var(--leading-min);
  color: var(--color-text-secondary);
}

/* 必須の印。DESIGN.md 2.9 が accent/default を認める2つ目の対象 */
.form-req {
  margin-left: 2px;
  color: var(--color-accent-default);
  font-weight: var(--weight-h3);
}

.form {
  margin-top: var(--space-24);
}

.form-field {
  margin-top: var(--space-32);
}

.form > .form-field:first-of-type {
  margin-top: 0;
}

.form-field__label {
  display: block;
  font-size: var(--size-body-sp);
  font-weight: var(--weight-h3);
  line-height: var(--leading-min);
  color: var(--color-text-primary);
}

.form-field__input,
.form-field__textarea {
  display: block;
  width: 100%;
  height: 52px;
  margin-top: var(--space-8);
  padding: 0 var(--space-16);
  font-family: inherit;
  font-size: var(--size-body-sp);
  line-height: var(--leading-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-surface);
  border: var(--stroke-control) solid var(--color-border-strong);
  border-radius: 8px;
}

.form-field__textarea {
  height: 150px;
  padding: var(--space-12) var(--space-16);
  resize: vertical;
}

.form-field__input::placeholder,
.form-field__textarea::placeholder {
  color: var(--color-text-tertiary);
  opacity: 1;
}

.doc-body .form-field__hint {
  margin-top: var(--space-8);
  font-size: var(--size-min-sp);
  line-height: var(--leading-min);
  color: var(--color-text-secondary);
}

/* --- 同意。チェックはカンプの22px、行は44px（DESIGN.md 8章末尾） -------- */

.form-consent {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 44px;
  margin-top: var(--space-32);
}

.form-consent__box {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--color-primary-default);
}

.form-consent__label {
  font-size: var(--size-body-sp);
  line-height: var(--leading-body);
  color: var(--color-text-primary);
}

.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 128px;
  min-height: 54px;
  margin-top: var(--space-32);
  padding: 0 var(--space-24);
  font-family: inherit;
  font-size: var(--size-body-sp);
  font-weight: var(--weight-h3);
  color: var(--color-text-inverse);
  background-color: var(--color-primary-default);
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.12s linear;
}

.form-submit:hover {
  background-color: var(--color-primary-dark);
}

/* --- ハニーポット -------------------------------------------------------
   自動入力のプログラムは display:none と visibility:hidden の欄を避けるため、
   位置で画面外へ出す。左へ飛ばすので横スクロールは伸びない。 */

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- エラー -------------------------------------------------------------
   色だけで伝えない（DESIGN.md 4.6）。まとめは枠と見出しの文、各欄は
   「エラー：」で始まる文と枠線の2つで示す。 */

.form-summary {
  margin-top: var(--space-24);
  padding: var(--space-16);
  background-color: var(--color-bg-surface);
  border: var(--stroke-control) solid var(--color-status-error);
  border-radius: 8px;
}

.doc-body .form-summary__title {
  margin-top: 0;
  font-size: var(--size-body-sp);
  font-weight: var(--weight-h3);
  line-height: var(--leading-body);
  color: var(--color-status-error);
}

.form-summary__list {
  margin: var(--space-8) 0 0;
  padding-left: 1.4em;
  list-style: disc;
}

.form-summary__list li {
  margin-top: 4px;
  font-size: var(--size-body-sp);
  line-height: var(--leading-body);
}

.doc-body .form-field__error {
  margin-top: var(--space-8);
  font-size: var(--size-min-sp);
  font-weight: var(--weight-h3);
  line-height: var(--leading-min);
  color: var(--color-status-error);
}

.form-field__input[aria-invalid="true"],
.form-field__textarea[aria-invalid="true"] {
  border-color: var(--color-status-error);
}

@media (min-width: 768px) {

  .doc-body .form-note,
  .doc-body .form-field__hint,
  .doc-body .form-field__error {
    font-size: var(--size-min-pc);
  }
}