/* ==========================================================================
   SEO記事ページ 共通CSS
   色・書体・本文幅は :root の変数を変えるだけで全体に反映されます。
   スマホを基準に書き、600px / 1000px 以上で調整しています。
   ========================================================================== */

:root {
  /* 色 */
  --navy: #12264a;        /* メインカラー。見出し・罫線・フッター */
  --navy-soft: #27457a;   /* 本文中のリンク */
  --ink: #1d2736;         /* 本文 */
  --ink-sub: #4b5769;     /* 補助の文字（白背景でコントラスト 7:1 以上） */
  --rule: #d6dce6;        /* 細い罫線 */
  --tint: #f3f5f9;        /* 目次・ポイントの淡い背景 */
  --marker: #d9e2f1;      /* 文中の強調マーカー */
  --warn: #9b3a24;        /* 注意 */
  --warn-tint: #fbf3ef;   /* 注意の淡い背景 */
  --brass: #a0814a;       /* 章番号など、ごく一部だけに使う差し色 */
  --on-navy: #ffffff;
  --on-navy-sub: #ccd5e5;

  /* 書体。外部フォントを読まないので表示が速い */
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  --font-head: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --font-num: Georgia, "Times New Roman", serif;

  /* 寸法 */
  --gutter: 20px;         /* 画面の左右の余白。全要素の外側はこの線にそろう */
  --col: 720px;           /* 本文の幅。PCで1行40字前後 */
  --inset: 18px;          /* 目次や囲みの内側の余白 */
}

@media (min-width: 600px) {
  :root { --gutter: 32px; --inset: 24px; }
}

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 20px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;   /* 17px */
  line-height: 1.9;
  letter-spacing: .02em;
  overflow-wrap: break-word;
  line-break: strict;
}

@media (min-width: 600px) {
  body { font-size: 1.125rem; line-height: 1.95; }  /* 18px */
}

img { max-width: 100%; height: auto; vertical-align: middle; }
figure { margin: 0; }

a { color: var(--navy-soft); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--navy); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--navy-soft); outline-offset: 2px; }

p { margin: 1.25em 0 0; }
strong { font-weight: 700; }

/* 文中の強調。太字＋淡いマーカー */
.hl {
  font-weight: 700;
  background: linear-gradient(transparent 62%, var(--marker) 62%);
}

/* 本文へ移動（キーボード操作時だけ見える） */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 10;
  padding: .5em 1em;
  background: var(--navy);
  color: #fff;
}
.skip-link:focus { top: 8px; color: #fff; }

/* --------------------------------------------------------------------------
   ヘッダー（ロゴ）
   -------------------------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: #fff;
}
.site-header__inner {
  max-width: calc(var(--col) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 14px var(--gutter);
}
.logo { display: inline-block; line-height: 0; }
.logo img { width: auto; height: 30px; }

@media (min-width: 600px) {
  .site-header__inner { padding-block: 18px; }
  .logo img { height: 34px; }
}

/* --------------------------------------------------------------------------
   記事の冒頭（PR表記・タイトル・更新日・パンくず）
   -------------------------------------------------------------------------- */
.article {
  max-width: calc(var(--col) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  counter-reset: chapter;
}

.pr-note {
  display: flex;
  align-items: center;
  gap: .6em;
  margin: 20px 0 0;
  color: var(--ink-sub);
  font-size: .8125rem;    /* 13px。このページで最も小さい文字 */
  line-height: 1.5;
  letter-spacing: .03em;
}
.pr-mark {
  flex: none;
  padding: 0 .5em;
  border: 1px solid var(--ink-sub);
  line-height: 1.5;
}

h1 {
  margin: 16px 0 0;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: clamp(1.875rem, 1.45rem + 2vw, 2.75rem);  /* 30〜44px */
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .03em;
  font-feature-settings: "palt";
  word-break: auto-phrase;
}
/* タイトル後半（｜のあと）を一段軽くする */
.h1-sub {
  display: block;
  margin-top: .3em;
  font-size: .68em;
  font-weight: 500;
  line-height: 1.55;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 1.4em;
  margin-top: 18px;
  color: var(--ink-sub);
  font-size: .9375rem;    /* 15px */
  line-height: 1.7;
}
.article-meta p { margin: 0; }
.article-meta .updated { color: var(--navy); font-weight: 700; }
.article-meta a { color: inherit; }

.breadcrumb {
  margin-top: 18px;
  padding-block: 8px;
  border-block: 1px solid var(--rule);
  font-size: .875rem;     /* 14px */
  line-height: 1.6;
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li + li::before {
  content: "";
  flex: none;
  width: .42em;
  height: .42em;
  margin-inline: .7em .8em;
  border-top: 1px solid var(--ink-sub);
  border-right: 1px solid var(--ink-sub);
  transform: rotate(45deg);
}
.breadcrumb a { display: inline-block; padding-block: .25em; color: var(--ink-sub); text-decoration: none; }
.breadcrumb a:hover { color: var(--navy); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink); }

@media (min-width: 1000px) {
  .pr-note { margin-top: 32px; }
  h1 { margin-top: 20px; }
}

.lead { margin-top: 32px; }
.lead > p:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   目次。淡い背景。外側は本文と同じ幅にそろえる
   -------------------------------------------------------------------------- */
.toc {
  margin-top: 48px;
  padding: 8px var(--inset) 20px;
  background: var(--tint);
}
.toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  cursor: pointer;
  list-style: none;
}
.toc summary::-webkit-details-marker { display: none; }
.toc__title {
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: .1em;
}
.toc__toggle {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--ink-sub);
  font-size: .9375rem;
}
.toc__toggle::before { content: "開く"; }
.toc details[open] .toc__toggle::before { content: "閉じる"; }
.toc__toggle::after {
  content: "";
  width: .5em;
  height: .5em;
  margin-top: -.25em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.toc details[open] .toc__toggle::after { margin-top: .2em; transform: rotate(-135deg); }

.toc { --toc-indent: 2.25rem; }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc a { display: block; color: inherit; text-decoration: none; word-break: auto-phrase; }
.toc a:hover { color: var(--navy-soft); text-decoration: underline; }

.toc__l2 { counter-reset: toc; border-bottom: 1px solid var(--rule); }
.toc__l2 > li { border-top: 1px solid var(--rule); padding-block: 2px 8px; }
.toc__l2 > li:not(.is-plain) { counter-increment: toc; }

/* h2 */
.toc__l2 > li > a {
  display: grid;
  grid-template-columns: var(--toc-indent) 1fr;
  padding-block: 10px 6px;
  color: var(--navy);
  font-weight: 700;
  line-height: 1.6;
}
.toc__l2 > li > a::before {
  content: "";
  color: var(--brass);
  font-family: var(--font-num);
  font-weight: 400;
}
.toc__l2 > li:not(.is-plain) > a::before { content: counter(toc, decimal-leading-zero); }

/* h3 */
.toc .toc__l3 { padding-left: var(--toc-indent); font-size: 1rem; line-height: 1.6; }
.toc__l3 > li > a { padding-block: 8px; }

/* h4 */
.toc .toc__l4 { padding-left: 1.2em; color: var(--ink-sub); font-size: .9375rem; }
.toc__l4 > li > a { padding-block: 6px; }
.toc__l2 > li.is-plain > a { font-weight: 500; }

/* --------------------------------------------------------------------------
   見出し
   -------------------------------------------------------------------------- */
.chapter { margin-top: 80px; counter-increment: chapter; }
@media (min-width: 600px) {
  .chapter { margin-top: 96px; }
}

.chapter > h2,
.section-plain > h2 {
  margin: 0;
  padding-top: 18px;
  border-top: 3px solid var(--navy);
  color: var(--navy);
  font-family: var(--font-head);
  font-size: clamp(1.625rem, 1.4rem + 1.1vw, 2.125rem);  /* 26〜34px */
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .03em;
  font-feature-settings: "palt";
  word-break: auto-phrase;
}

/* 章番号。本文に文字として入らないので、順番を変えても自動で振り直される */
.chapter > h2::before {
  content: counter(chapter, decimal-leading-zero);
  display: block;
  margin-bottom: .1em;
  color: var(--brass);
  font-family: var(--font-num);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .04em;
}

@media (min-width: 600px) {
  .chapter > h2::before { font-size: 1.625rem; }
}

h3 {
  margin: 56px 0 0;
  padding-bottom: .5em;
  border-bottom: 1px solid var(--rule);
  color: var(--navy);
  font-size: 1.3125rem;   /* 21px */
  font-weight: 700;
  line-height: 1.55;
  word-break: auto-phrase;
}
@media (min-width: 600px) {
  h3 { font-size: 1.4375rem; }  /* 23px */
}
h3 + p { margin-top: .95em; }

h4 {
  margin: 36px 0 0;
  color: var(--navy);
  font-size: 1.125rem;    /* 18px */
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 600px) {
  h4 { font-size: 1.1875rem; }
}
h4::before {
  content: "";
  display: inline-block;
  width: .5em;
  height: .5em;
  margin-right: .55em;
  background: var(--navy);
  vertical-align: .14em;
}
h4 + p { margin-top: .55em; }

/* --------------------------------------------------------------------------
   h2ごとのアイキャッチ画像。幅は本文と同じ
   -------------------------------------------------------------------------- */
.eyecatch {
  margin: 22px 0 0;
  background: var(--tint);
}
.eyecatch img { display: block; width: 100%; }
.eyecatch + p { margin-top: 28px; }

@media (min-width: 600px) {
  .eyecatch { margin-top: 26px; }
  .eyecatch + p { margin-top: 32px; }
}

/* 本文中の図（キャプション付き） */
.figure { margin-top: 2em; }
.figure img { display: block; width: 100%; }
.figure figcaption {
  margin-top: .7em;
  color: var(--ink-sub);
  font-size: .9375rem;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   リスト
   -------------------------------------------------------------------------- */
.article ul:not([class]),
.article ol:not([class]) {
  margin: 1.1em 0 0;
  padding: 0;
  list-style: none;
}
.article ul:not([class]) > li,
.article ol:not([class]) > li {
  position: relative;
  padding-left: 1.5em;
  line-height: 1.8;
}
.article ul:not([class]) > li + li,
.article ol:not([class]) > li + li { margin-top: .5em; }

.article ul:not([class]) > li::before {
  content: "";
  position: absolute;
  top: .68em;
  left: .3em;
  width: .42em;
  height: .42em;
  background: var(--navy);
}
.article ul:not([class]) ul { margin-top: .5em; }
.article ul:not([class]) ul > li::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--navy);
}

.article ol:not([class]) { counter-reset: item; }
.article ol:not([class]) > li { counter-increment: item; padding-left: 1.8em; }
.article ol:not([class]) > li::before {
  content: counter(item) ".";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.4em;
  color: var(--navy);
  font-family: var(--font-num);
  font-weight: 700;
  text-align: right;
}

.list-head { color: var(--navy); font-weight: 700; }

/* チェックリスト。行を罫線で区切る */
.checklist {
  margin: 1.4em 0 0;
  padding: 0;
  border-bottom: 1px solid var(--rule);
  list-style: none;
}
.checklist li {
  position: relative;
  padding: .75em 0 .75em 2em;
  border-top: 1px solid var(--rule);
  line-height: 1.7;
}
.checklist li::before {
  content: "";
  position: absolute;
  top: 1.12em;
  left: .3em;
  width: .85em;
  height: .45em;
  border-bottom: 2px solid var(--navy);
  border-left: 2px solid var(--navy);
  transform: rotate(-45deg);
}

/* 手順。大きな数字と罫線で組む */
.steps {
  margin: 1.8em 0 0;
  padding: 0;
  border-bottom: 1px solid var(--navy);
  list-style: none;
  counter-reset: step;
}
.steps li {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  column-gap: .75rem;
  padding-block: 1.05em 1.15em;
  border-top: 1px solid var(--rule);
  counter-increment: step;
}
.steps li:first-child { border-top: 1px solid var(--navy); }
.steps li::before {
  content: counter(step);
  grid-row: span 2;
  color: var(--brass);
  font-family: var(--font-num);
  font-size: 2.25rem;
  line-height: 1;
}
.steps__title { display: block; color: var(--navy); font-weight: 700; line-height: 1.6; }
.steps__text { display: block; margin-top: .3em; font-size: 1rem; line-height: 1.8; }

/* --------------------------------------------------------------------------
   表
   -------------------------------------------------------------------------- */
.table-wrap { margin-top: 1.8em; overflow-x: auto; }  /* 内容が長くてもページ全体は横に動かさない */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;    /* 15px */
  line-height: 1.7;
  letter-spacing: .01em;
}
@media (min-width: 600px) {
  table { font-size: 1rem; }
}

caption {
  padding-bottom: .65em;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
}
@media (min-width: 600px) {
  caption { font-size: 1.0625rem; }
}

thead th {
  padding: .7em .8em;
  border-top: 2px solid var(--navy);
  border-bottom: 1px solid var(--navy);
  background: var(--tint);
  color: var(--navy);
  font-weight: 700;
  text-align: left;
  vertical-align: bottom;
}
tbody th, tbody td {
  padding: .8em;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
tbody th { color: var(--navy); font-weight: 700; }
tbody tr:last-child > * { border-bottom: 1px solid var(--navy); }

.table-note {
  margin-top: .8em;
  color: var(--ink-sub);
  font-size: .875rem;     /* 14px */
  line-height: 1.7;
}

/* .nw は折り返さないセル用 */
.nw { white-space: nowrap; }

@media (max-width: 599px) {
  thead th, tbody th, tbody td { padding-inline: .6em; }
}

/* 横にスクロールする比較表。1列目は固定。外枠に縦スクロールは持たせない */
.table-scroll {
  margin-top: 1.8em;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.table-scroll table { min-width: 680px; border-collapse: separate; border-spacing: 0; }
.table-scroll thead th { white-space: nowrap; }
.table-scroll th, .table-scroll td { word-break: auto-phrase; }
.table-scroll tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  min-width: 6.5em;
}
.table-scroll.is-overflow tr > :first-child { box-shadow: inset -1px 0 0 var(--rule); }
.table-scroll thead tr > :first-child { background: var(--tint); }
.table-scroll caption { position: sticky; left: 0; width: min(100vw - var(--gutter) * 2, 100%); }
.table-scroll__hint {
  display: none;
  margin-top: .8em;
  color: var(--ink-sub);
  font-size: .875rem;
  line-height: 1.6;
}
.table-scroll.is-overflow + .table-scroll__hint { display: block; }

/* スマホでは1行ずつ縦に積む表。項目が多く横スクロールさせたくないとき用 */
@media (max-width: 599px) {
  .table-stack table,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td,
  .table-stack tbody th { display: block; }
  .table-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .table-stack caption { display: block; }
  .table-stack tbody { border-top: 2px solid var(--navy); }
  .table-stack tr { padding-block: .9em 1em; border-bottom: 1px solid var(--rule); }
  .table-stack tbody tr:last-child { border-bottom: 1px solid var(--navy); }
  .table-stack tbody tr:last-child > * { border-bottom: 0; }
  .table-stack tbody th {
    padding: 0 0 .35em;
    border: 0;
    font-size: 1.0625rem;
  }
  .table-stack td {
    display: grid;
    grid-template-columns: 6em 1fr;
    gap: .75em;
    padding: .2em 0;
    border: 0;
  }
  .table-stack td::before {
    content: attr(data-label);
    color: var(--ink-sub);
  }
}

/* --------------------------------------------------------------------------
   装飾パターン。どれも左の縦線・影・角丸カードを使わない
   -------------------------------------------------------------------------- */

/* A 要点まとめ：上下の罫線だけで区切る */
.box-summary {
  margin-top: 36px;
  padding-block: 18px 22px;
  border-top: 3px solid var(--navy);
  border-bottom: 1px solid var(--navy);
}
.box-summary__title {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .05em;
}

/* B ポイント：淡い背景に紺のラベル */
.box-point {
  position: relative;
  margin-top: 2.2em;
  padding: 3.1em var(--inset) 1.5em;
  background: var(--tint);
}
.box-point__label {
  position: absolute;
  top: 0;
  left: var(--inset);
  margin: 0;
  padding: .3em 1em;
  background: var(--navy);
  color: var(--on-navy);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
}
.box-point > p:nth-child(2), .box-point > ul:nth-child(2) { margin-top: 0; }

/* C 補足：細い枠の上辺にラベルを載せる */
.box-note {
  position: relative;
  margin-top: 2.4em;
  padding: 1.5em var(--inset) 1.2em;
  border: 1px solid #aeb8c8;
}
.box-note__label {
  position: absolute;
  top: -.8em;
  left: calc(var(--inset) - .6em);  /* ラベルの文字と本文の左端をそろえる */
  margin: 0;
  padding: 0 .6em;
  background: #fff;
  color: var(--navy);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.6;
}
.box-note > p:nth-child(2) { margin-top: 0; }

/* D 注意：色は注意の時だけ使う */
.box-caution {
  margin-top: 2.2em;
  padding: 1.1em var(--inset) 1.25em;
  border-top: 2px solid var(--warn);
  background: var(--warn-tint);
}
.box-caution__label {
  display: flex;
  align-items: center;
  gap: .5em;
  margin: 0 0 .35em;
  color: var(--warn);
  font-weight: 700;
  line-height: 1.6;
}
.box-caution__label::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.35em;
  height: 1.35em;
  background: var(--warn);
  color: #fff;
  font-family: var(--font-num);
  font-size: .875em;
  line-height: 1;
}
.box-caution > p:last-child { margin-top: 0; }

/* E 結論：紺の面。1記事に1〜2回まで */
.band-answer {
  margin-top: 2.6em;
  padding: 1.7em var(--inset) 1.9em;
  background: var(--navy);
  color: var(--on-navy);
}
.band-answer__label {
  margin: 0;
  color: #d3bd8f;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .12em;
}
.band-answer__main {
  margin: .4em 0 0;
  font-family: var(--font-head);
  font-size: clamp(1.375rem, 1.25rem + .7vw, 1.75rem);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .03em;
  font-feature-settings: "palt";
  word-break: auto-phrase;
}
.band-answer__text {
  margin: .9em 0 0;
  color: var(--on-navy-sub);
  font-size: 1rem;
  line-height: 1.85;
}

/* F 引用 */
.quote {
  position: relative;
  margin: 2.2em 0 0;
  padding: .3em 0 0 2.6rem;
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: -.08em;
  left: -.04em;
  color: var(--brass);
  font-family: var(--font-num);
  font-size: 4rem;
  line-height: 1;
}
.quote p { margin: 0; color: var(--navy); font-family: var(--font-head); font-size: 1.125rem; font-weight: 500; line-height: 1.9; }
.quote cite {
  display: block;
  margin-top: .7em;
  color: var(--ink-sub);
  font-size: .875rem;
  font-style: normal;
  line-height: 1.6;
}

/* G メリットと注意点の対比 */
.compare {
  display: grid;
  gap: 1.8em;
  margin-top: 2em;
}
.compare__col { border-top: 2px solid var(--navy); padding-top: .75em; }
.compare__col--minus { border-top-color: var(--warn); }
.compare__title { margin: 0; color: var(--navy); font-weight: 700; }
.compare__col--minus .compare__title { color: var(--warn); }
.article .compare__col ul { margin-top: .5em; }
.article .compare__col--minus ul > li::before { background: var(--warn); }

@media (min-width: 600px) {
  .compare { grid-template-columns: 1fr 1fr; gap: 2em; }
}

/* H 数字を見せる */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 2em 0 0;
  padding: 0;
  border-block: 1px solid var(--navy);
}
.stats > div { padding: 1em .75em 1.1em; border-left: 1px solid var(--rule); }
.stats > div:first-child { border-left: 0; padding-left: 0; }
.stats dt {
  color: var(--ink-sub);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.5;
}
.stats dd {
  margin: .15em 0 0;
  color: var(--navy);
  font-family: var(--font-num);
  font-size: 2rem;
  line-height: 1.25;
}
.stats dd span { margin-left: .08em; font-family: var(--font-body); font-size: .9375rem; }
.stats__note { display: block; word-break: auto-phrase; margin-top: .35em; color: var(--ink-sub); font-size: .875rem; line-height: 1.55; font-family: var(--font-body); }

@media (min-width: 600px) {
  .stats > div { padding-inline: 1.2em; }
  .stats dd { font-size: 2.5rem; }
}

/* I 公式サイトへのボタン。広告リンクには rel="sponsored" を付ける */
.cta { margin-top: 2.2em; text-align: center; }
.cta__note { margin: 0 0 .6em; color: var(--ink-sub); font-size: .9375rem; line-height: 1.6; }
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8em;
  width: 100%;
  max-width: 460px;
  min-height: 60px;
  margin-inline: auto;
  padding: .7em 1.4em;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
.btn::after {
  content: "";
  flex: none;
  width: .55em;
  height: .55em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover { background: var(--navy-soft); color: #fff; }

/* 脚注の参照番号 */
.ref-mark { font-size: .875rem; vertical-align: .35em; line-height: 0; }
.ref-mark a { padding: .2em; text-decoration: none; }

/* --------------------------------------------------------------------------
   FAQ（details で押した行の真下に開く）
   -------------------------------------------------------------------------- */
.faq { margin-top: 28px; border-bottom: 1px solid var(--navy); }
.faq details { border-top: 1px solid var(--rule); }
.faq details:first-child { border-top: 1px solid var(--navy); }
.faq summary {
  position: relative;
  display: grid;
  grid-template-columns: 1.9em 1fr 1.6em;
  gap: .25em;
  align-items: start;
  padding-block: 1em;
  color: var(--navy);
  font-weight: 700;
  line-height: 1.65;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "Q";
  color: var(--navy);
  font-family: var(--font-num);
  font-size: 1.3em;
  font-weight: 400;
  line-height: 1.25;
}
/* ＋／－ */
.faq summary::after {
  content: "";
  justify-self: end;
  width: .9em;
  height: .9em;
  margin-top: .38em;
  background:
    linear-gradient(var(--navy), var(--navy)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--navy), var(--navy)) center / 1.5px 100% no-repeat;
}
.faq details[open] summary::after {
  background: linear-gradient(var(--navy), var(--navy)) center / 100% 1.5px no-repeat;
}
.faq__a {
  display: grid;
  grid-template-columns: 1.9em 1fr;
  gap: .25em;
  padding: 0 1.6em 1.25em 0;
}
.faq__a::before {
  content: "A";
  color: var(--brass);
  font-family: var(--font-num);
  font-size: 1.3em;
  line-height: 1.3;
}
.faq__a p { margin: 0; }

/* --------------------------------------------------------------------------
   著者情報・参照元・関連ページ（章番号なしの見出し）
   -------------------------------------------------------------------------- */
.section-plain { margin-top: 80px; }
.section-plain > h2 { font-size: clamp(1.375rem, 1.25rem + .7vw, 1.75rem); }

.author {
  display: grid;
  grid-template-columns: 76px 1fr;
  column-gap: 16px;
  align-items: center;
  padding-block: 22px;
  border-bottom: 1px solid var(--rule);
}
.author:last-of-type { border-bottom: 1px solid var(--navy); }
.author__photo img { display: block; width: 76px; height: 76px; object-fit: cover; }
.author__role { margin: 0; color: var(--ink-sub); font-size: .875rem; line-height: 1.6; }
.author__name { margin: .1em 0 0; color: var(--navy); font-size: 1.1875rem; font-weight: 700; line-height: 1.5; }
.author__name a { color: inherit; text-decoration: none; }
.author__name a:hover { text-decoration: underline; }
.author__job { margin: .15em 0 0; color: var(--ink-sub); font-size: .9375rem; line-height: 1.6; }
.author__bio { grid-column: 1 / -1; margin: .9em 0 0; font-size: 1rem; line-height: 1.85; }
.author__links {
  display: flex;
  flex-wrap: wrap;
  gap: .2em 1.3em;
  grid-column: 1 / -1;
  margin: .6em 0 0;
  padding: 0;
  font-size: .9375rem;
  list-style: none;
}
.author__links a { display: inline-block; padding-block: .3em; }

@media (min-width: 600px) {
  .author { grid-template-columns: 104px 1fr; column-gap: 24px; align-items: start; }
  .author__photo { grid-row: span 3; }
  .author__photo img { width: 104px; height: 104px; }
  .author__bio, .author__links { grid-column: 2; }
}

.policy-links {
  display: flex;
  flex-wrap: wrap;
  gap: .2em 1.4em;
  margin: 1em 0 0;
  padding: 0;
  font-size: .9375rem;
  list-style: none;
}
.policy-links a { display: inline-block; padding-block: .35em; }

.refs {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: ref;
}
.refs li {
  display: grid;
  grid-template-columns: 2.2em 1fr;
  padding-block: .7em;
  border-bottom: 1px solid var(--rule);
  counter-increment: ref;
  font-size: 1rem;
  line-height: 1.7;
  scroll-margin-top: 20px;
}
.refs li::before {
  content: "[" counter(ref) "]";
  color: var(--ink-sub);
  font-family: var(--font-num);
  font-size: .9375rem;
}
.refs li:target { background: var(--tint); }
.refs__meta { display: block; color: var(--ink-sub); font-size: .875rem; }

.history { margin-top: 12px; font-size: 1rem; }
.history summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  border-bottom: 1px solid var(--rule);
  color: var(--navy);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.history summary::-webkit-details-marker { display: none; }
.history summary::after {
  content: "";
  flex: none;
  width: .85em;
  height: .85em;
  background:
    linear-gradient(var(--navy), var(--navy)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--navy), var(--navy)) center / 1.5px 100% no-repeat;
}
.history[open] summary::after {
  background: linear-gradient(var(--navy), var(--navy)) center / 100% 1.5px no-repeat;
}
.article .history ul { margin: .3em 0 .4em; }
.history li { font-size: .9375rem; }
.history time { color: var(--ink-sub); margin-right: .6em; }

.related {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.related li { border-bottom: 1px solid var(--rule); }
.related a {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items: center;
  padding-block: 14px;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
}
.related a span { word-break: auto-phrase; }
.related a:hover span { text-decoration: underline; }
.related img { display: block; width: 100%; }
.more-link { margin-top: 1.1em; font-size: 1rem; text-align: right; }

@media (min-width: 600px) {
  .related { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .related a { grid-template-columns: 128px 1fr; }
}

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: 96px;
  padding-block: 44px 28px;
  background: var(--navy);
  color: var(--on-navy-sub);
  font-size: .9375rem;
  line-height: 1.8;
}
.site-footer__inner {
  max-width: calc(var(--col) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.footer-logo { display: inline-block; line-height: 0; }
.footer-logo img { width: auto; height: 30px; }

.footer-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 24px;
  margin-top: 30px;
}
.footer-nav__title {
  margin: 0 0 .4em;
  color: var(--on-navy);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.6;
}
.footer-nav ul { margin: 0; padding: 0; list-style: none; }
.footer-nav a {
  display: block;
  word-break: auto-phrase;
  padding-block: .45em;
  color: var(--on-navy-sub);
  line-height: 1.5;
  text-decoration: none;
}
.footer-nav a:hover { color: #fff; text-decoration: underline; }

.footer-note {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: .875rem;
  line-height: 1.85;
}
.footer-note p { margin: 0; }
.footer-note p + p { margin-top: .8em; }

.copyright {
  margin: 24px 0 0;
  font-size: .875rem;
  line-height: 1.6;
}
.copyright small { font-size: inherit; }

@media (min-width: 600px) {
  .footer-nav { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   目次へ戻るボタン（目次が画面から消えたら出す）
   -------------------------------------------------------------------------- */
.to-toc {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 5;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--navy);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.to-toc.is-visible { opacity: 1; visibility: visible; }
.to-toc:hover { background: var(--navy-soft); color: #fff; }

/* 印刷時は操作用の部品を出さない */
@media print {
  .to-toc, .toc__toggle, .skip-link { display: none; }
}