/* =========================================================
   起業の経営学 第1版: 本文と記事の部品
   本文ファイルの書き方（01_director/plan/build-spec.md）の class に合わせる。番号は element-list.md の ID
   記事の部品の見た目は、デザイナー2 の記事ページの型（REQ-005）を取り込んだもの。持ち主: デザイナー1
   ========================================================= */

/* ---------- 記事の段組み（本文と、PC の目次） ---------- */

/* 目次が横に並ばない幅（1023px まで）でも、記事の段（要点のまとめ、目次、本文、記事の終わり）は 720px（1行 約40字）まで。
   左にそろえる（タブレットの幅で1行が約55字になって読みにくかった。2026-10-18 ユーザーの判断。REQ-030） */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--article-width));
  gap: 28px;
  padding-block: 28px var(--section-space);
}

.article-layout > * {
  min-width: 0;
}

@media (min-width: 1024px) {
  .article-layout {
    grid-template-columns: minmax(0, var(--article-width)) var(--rail-width);
    grid-template-areas:
      "keypoints toc"
      "body      toc"
      "end       toc";
    grid-template-rows: auto auto 1fr;
    justify-content: space-between;
    column-gap: 64px;
    row-gap: 40px;
    padding-top: 44px;
  }

  .article-layout > .key-points { grid-area: keypoints; }
  .article-layout > .article-body { grid-area: body; }
  .article-layout > .article-end { grid-area: end; }

  .article-layout > .toc {
    grid-area: toc;
    align-self: start;
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  /* 要点のまとめがないときは、本文から始める */
  .article-layout:not(:has(> .key-points)) {
    grid-template-areas:
      "body toc"
      "end  toc";
    grid-template-rows: auto 1fr;
  }
}

/* 入口・一覧・固定ページの本文 */
.page-body {
  padding-block: 32px var(--section-space);
}

@media (min-width: 960px) {
  .page-body {
    padding-top: 48px;
  }
}

/* ---------- 本文（1-4 本文、1-2 見出し） ---------- */

:where(.article-body, .page-body) {
  font-size: 1rem;
  line-height: 1.95;
}

/* 段落と部品のあいだ。要素の名前で指定し（土台のリセットより後で同じ強さ）、本文の箱は :where で包む
   （柱の部品など、class で指定した余白のほうが強くなるように） */
:where(.article-body, .page-body) :is(p, ul, ol, dl, figure, blockquote, pre, details, aside) {
  margin-top: 1.25em;
}

:where(.article-body, .page-body) :where(.table-wrap, .do-dont) {
  margin-top: 1.25em;
}

:where(.article-body, .page-body) h2 {
  margin-top: 2.8em;
}

:where(.article-body, .page-body) h3 {
  margin-top: 2.2em;
}

:where(.article-body, .page-body) h4 {
  margin-top: 1.8em;
}

/* 見出しのすぐ下は、少し詰める */
:where(.article-body, .page-body) :is(h2, h3, h4) + *,
:where(.article-body, .page-body) h2 + section > :first-child {
  margin-top: 1em;
}

/* 箱や部品の最初の要素には、上の余白をつけない */
:where(.article-body, .page-body) > :first-child,
:where(.article-body, .page-body) > section:first-child > :first-child,
:where(.article-body, .page-body) :is(li, td, th, dd, aside, details, blockquote, figure, .callout, .do-dont__item, .case-story) > :first-child {
  margin-top: 0;
}

/* 仕組みが差し込む一覧と著者カードの中には、本文の段落の余白をつけない（それぞれの部品の余白だけにする） */
:where(.article-body, .page-body) :where(.card-list, .reading-route, .session-list, .author-card) :is(p, ul, ol, dl, figure, blockquote, pre, details, aside, h2, h3, h4) {
  margin-top: 0;
}

/* h2: 文字の左に青緑の丸（2026-10-17 ユーザーの指摘。REQ-014、REQ-021）。丸の大きさは --heading-dot（文字の 0.7 倍）で、
   1行目の文字の高さの真ん中。2行目からは1行目の文字の頭にそろえる（丸の下にもぐらせない） */
:where(.article-body, .page-body) h2 {
  position: relative;
  padding-left: calc(var(--heading-dot) + var(--heading-dot-gap));
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  font-weight: 900;
  line-height: 1.45;
}

:where(.article-body, .page-body) h2::before {
  content: "";
  position: absolute;
  top: calc((1.45em - var(--heading-dot)) / 2); /* 行の高さ（line-height 1.45）の真ん中 */
  left: 0;
  width: var(--heading-dot);
  height: var(--heading-dot);
  border-radius: 50%;
  background: var(--color-teal);
}

:where(.article-body, .page-body) h3 {
  font-size: 1.1875rem;
  font-weight: 900;
  line-height: 1.5;
}

:where(.article-body, .page-body) h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
}

:where(.article-body, .page-body) a {
  color: var(--color-link);
  text-underline-offset: 0.2em;
}

/* 本文の中の「→」のリンク（link-arrow。REQ-014）: <a href="…" class="link-arrow">…を読む</a> と書くと、後ろに「→」が付く。
   「→」は下線の外。ホバーとキーボードの選択で右へ動く（動きは site.css の 8-2） */
.link-arrow::after {
  content: "→";
  display: inline-block;
  margin-left: 0.3em;
  transition: transform var(--arrow-duration) ease-out;
}

:where(.article-body, .page-body) strong {
  font-weight: 700;
  background: linear-gradient(transparent 64%, var(--color-navy-tint) 64%);
}

/* 2-1 箇条書き、2-2 番号つきリスト（class のない ul と ol） */
:where(.article-body, .page-body) :where(ul:not([class]), ol:not([class])) {
  padding-left: 1.5em;
}

:where(.article-body, .page-body) :where(ul:not([class]), ol:not([class])) > li + li {
  margin-top: 0.4em;
}

:where(.article-body, .page-body) ul:not([class]) > li::marker {
  color: var(--color-navy);
}

:where(.article-body, .page-body) ol:not([class]) > li::marker {
  color: var(--color-navy);
  font-weight: 700;
}

@media (min-width: 960px) {
  .article-body {
    font-size: 1.0625rem;
  }
}

/* 1-6 注釈 */
.note {
  color: var(--color-text-light);
  font-size: 0.8125rem;
  line-height: 1.75;
}

/* ---------- 3-1 要点のまとめ ---------- */

.key-points {
  padding: 18px 18px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}

.key-points__title {
  margin-bottom: 12px;
  color: var(--color-navy-dark);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.5;
}

.key-points ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.key-points li {
  position: relative;
  padding-left: 30px;
  font-weight: 500;
  line-height: 1.7;
}

/* 紺の丸に白いチェック */
.key-points li::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

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

/* ---------- 6-5 目次: 見出しを細い線の上の駅として並べる ---------- */

.toc {
  padding: 18px 18px 20px;
  background: var(--color-gray-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  font-size: 0.875rem;
  line-height: 1.6;
}

.toc__title {
  margin-bottom: 10px;
  color: var(--color-navy-dark);
  font-size: 0.875rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.toc__list {
  position: relative;
  display: grid;
  gap: 2px;
}

.toc__list::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 5px;
  width: 2px;
  background: #cfd8e5;
}

.toc__list > li {
  position: relative;
  padding-left: 22px;
}

.toc__list > li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-navy);
  border-radius: 50%;
  background: var(--color-white);
  transition: background-color 0.2s, border-color 0.2s;
}

.toc a {
  display: block;
  padding: 5px 0;
  color: var(--color-navy-dark);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s;
}

/* 読んでいる見出し（2026-10-17 ユーザーの指摘。REQ-021）: site.js が、画面を読み進めるのに合わせて、
   項目に is-current、リンクに aria-current="true" を付ける。丸を青緑で塗り、文字も青緑にする。
   JavaScript が動かないときは付かないだけ（今までどおり）。動きを減らす設定の人には色の切り替えの動きをしない（base.css） */
.toc__list > li.is-current::before {
  border-color: var(--color-teal);
  background: var(--color-teal);
}

.toc a[aria-current="true"] {
  color: var(--color-teal);
}

.toc a:hover {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (min-width: 1024px) {
  .toc {
    padding: 4px 0 4px 2px;
    background: none;
    border: 0;
    border-radius: 0;
  }

  .toc__title {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-line);
  }
}

/* ---------- 3-2 囲み（補足、ポイント、注意、例、書き出してみよう） ---------- */

.callout {
  position: relative;
  padding: 16px 18px 18px;
  border-left: var(--stroke-accent) solid var(--color-navy);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  background: var(--color-navy-faint);
  font-size: 0.9375rem;
  line-height: 1.85;
}

.callout > * + * {
  margin-top: 10px;
}

.callout__title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-navy-dark);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.5;
}

.callout__title::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background: center / 22px no-repeat;
}

/* 補足: 紺の丸に「i」 */
.callout--note .callout__title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='%23345887'/%3E%3Cpath d='M11 9.5v6' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='11' cy='6.4' r='1.4' fill='%23fff'/%3E%3C/svg%3E");
}

/* ポイント: 紺の地に星 */
.callout--point {
  background: var(--color-navy-tint);
}

.callout--point .callout__title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='%2300204e'/%3E%3Cpath d='M11 5.5l1.6 3.4 3.7.5-2.7 2.6.7 3.7L11 14l-3.3 1.7.7-3.7-2.7-2.6 3.7-.5z' fill='%23fff'/%3E%3C/svg%3E");
}

/* 注意: からし色の線と薄い面。文字は濃い色のまま。
   印は濃いからし色の三角に白の「!」（からし色の面に載せるものは、濃いからし色と白。4.51:1） */
.callout--warning {
  border-left-color: var(--color-mustard);
  background: var(--color-mustard-tint);
}

.callout--warning .callout__title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 2.5l9.5 17H1.5z' fill='%23947129' stroke='%23947129' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M11 8.5v5' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='11' cy='16.4' r='1.3' fill='%23fff'/%3E%3C/svg%3E");
}

/* 例: 白い地に紺の点線 */
.callout--example {
  border: 1px solid transparent;
  border-left: var(--stroke-accent) solid var(--color-navy);
  background: var(--color-white);
}

/* 記入例の点線（REQ-019）: 左は紺の実線のまま、上・右・下を点線にする。点線の形の左の角の丸みは、枠の左の外へ出して切り落とす */
.callout--example::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -14px;
  background: #9fb2cc;
  pointer-events: none;
  clip-path: inset(0 0 0 14px);
  -webkit-mask: var(--dash-frame) 0 0 / 100% 100% no-repeat;
  mask: var(--dash-frame) 0 0 / 100% 100% no-repeat;
}

.callout--example .callout__title::before {
  /* 紺の紙に、折った角と3本の行 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5.5 2h8l4.5 4.5V19a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 19V3.5A1.5 1.5 0 0 1 5.5 2z' fill='%23345887'/%3E%3Cpath d='M13.5 2v3a1.5 1.5 0 0 0 1.5 1.5h3z' fill='%239fb2cc'/%3E%3Cpath d='M7.5 10.5h7M7.5 13.5h7M7.5 16.5h4.5' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 書き出してみよう: 方眼のノートの地（書いて使う場面） */
.callout--work {
  border: 1px solid #c9d3e1;
  border-left: var(--stroke-accent) solid var(--color-navy);
  background-color: var(--color-white);
  background-image:
    linear-gradient(rgba(52, 88, 135, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 88, 135, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
}

.callout--work .callout__title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M4 18l1-4 9.5-9.5a2 2 0 0 1 3 3L8 17z' fill='%23345887'/%3E%3Cpath d='M4 18l4-1-3-3z' fill='%23117d76'/%3E%3C/svg%3E");
}

.callout ul:not([class]),
.callout ol:not([class]) {
  padding-left: 1.4em;
}

.callout--work ul:not([class]) > li,
.callout--work ol:not([class]) > li {
  padding-block: 2px;
}

@media (min-width: 640px) {
  .callout {
    padding: 20px 24px 22px;
  }
}

/* ---------- 4-1 手順: 紺の駅を、からし色の道でつなぐ ---------- */

ol.steps {
  --step-size: 36px; /* 番号の丸の大きさ */
  display: grid;
  margin-top: 1.75em;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

ol.steps > li {
  position: relative;
  padding: 0 0 32px 52px;
  counter-increment: step;
}

ol.steps > li:last-child {
  padding-bottom: 0;
}

ol.steps > li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--step-size);
  height: var(--step-size);
  border-radius: 50%;
  background: var(--color-navy);
  box-shadow: 0 0 0 4px var(--color-white);
  color: var(--color-white);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
}

ol.steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: var(--step-size);
  bottom: 0;
  left: calc(var(--step-size) / 2 - var(--stroke-route) / 2);
  width: var(--stroke-route);
  background: var(--color-mustard);
}

/* 見出しの1行目を、番号の丸の真ん中にそろえる（見出しの行の高さは 1.5。2行目からは1行目の下に続く） */
ol.steps > li > h3 {
  margin-top: 0;
  padding-top: max(0px, calc((var(--step-size) - 1.5em) / 2));
}

/* 「手順1」の見た目のラベルはなくした（2026-10-17 ユーザーの指摘「見出しで手順とうたっているので要らない」。REQ-022）。
   見出しだけをたどって読む人のために、番号は読み上げ用にだけ見出しの中に残す（画面には出さない） */
ol.steps > li > h3::before {
  content: counter(step) ". ";
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 丸の中の番号は、見出しの中で読まれるので、読み上げで二重にしない（対応ブラウザのみ。対応していなければ二重に読まれるだけ） */
ol.steps > li:has(> h3:first-child)::before {
  content: counter(step);
  content: counter(step) / "";
}

ol.steps > li > * + * {
  margin-top: 12px;
}

/* スマホ（幅 640px 未満）: 本文を番号の丸の右に寄せず、横いっぱいに広げる（丸の右だと1行 約18字で細い段が続いた）。
   番号の丸は見出しの左に置いたまま。からし色の縦の線は本文と重なるのでなくし、手順と手順のあいだに薄い区切りを入れる。
   PC は今のまま（丸をからし色の線でつなぐ）（2026-10-18 ユーザーの判断「よいと思います」。REQ-026 の4の見本。REQ-032） */
@media (max-width: 639.98px) {
  ol.steps > li {
    padding: 0 0 24px;
  }

  ol.steps > li + li {
    padding-top: 22px;
    border-top: 1px solid var(--color-line);
  }

  ol.steps > li + li::before {
    top: 22px;
  }

  ol.steps > li:not(:last-child)::after {
    display: none;
  }

  ol.steps > li > h3 {
    min-height: var(--step-size);
    padding-left: calc(var(--step-size) + 12px);
  }
}

@media (min-width: 640px) {
  ol.steps {
    --step-size: 44px;
  }

  ol.steps > li {
    padding-left: 64px;
  }

  ol.steps > li::before {
    font-size: 1.25rem;
  }
}

/* ---------- 2-4 よい例・悪い例 ---------- */

.do-dont {
  display: grid;
  gap: 10px;
}

.do-dont__item {
  padding: 14px 16px 16px;
  border-radius: var(--radius-m);
  line-height: 1.75;
}

.do-dont__item > * + * {
  margin-top: 8px;
}

.do-dont__item--do {
  background: var(--color-white);
  border: 1px solid var(--color-navy); /* 2026-10-17 ユーザーの選択で 1px（REQ-019） */
}

.do-dont__item--dont {
  position: relative;
  background: var(--color-gray-bg);
  border: 1px solid transparent;
}

.do-dont__item--dont::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: #b9c0c8;
  pointer-events: none;
  -webkit-mask: var(--dash-frame) 0 0 / 100% 100% no-repeat;
  mask: var(--dash-frame) 0 0 / 100% 100% no-repeat;
}

.do-dont__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.do-dont__item--do .do-dont__label {
  color: var(--color-navy);
}

.do-dont__item--dont .do-dont__label {
  color: #555;
}

/* 記号だけでなく「よい例」「悪い例」と文字でも書く */
.do-dont__label::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: center / 20px no-repeat;
}

.do-dont__item--do .do-dont__label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.5' fill='%23345887'/%3E%3Ccircle cx='10' cy='10' r='4.6' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}

.do-dont__item--dont .do-dont__label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.5' fill='%23707780'/%3E%3Cpath d='M6.8 6.8l6.4 6.4M13.2 6.8l-6.4 6.4' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.do-dont__item ul:not([class]) {
  padding-left: 1.3em;
}

@media (min-width: 640px) {
  .do-dont {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* よい例か悪い例の片方だけのときは、横いっぱいに */
  .do-dont > :only-child {
    grid-column: 1 / -1;
  }
}

/* ---------- 2-3 チェックリスト ---------- */

ul.checklist {
  display: grid;
  padding: 6px 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  background: var(--color-white);
  list-style: none;
}

ul.checklist > li {
  position: relative;
  padding: 12px 0 12px 34px;
  line-height: 1.7;
}

ul.checklist > li + li {
  border-top: 1px solid transparent;
  background: repeating-linear-gradient(90deg, var(--color-line) 0 2px, transparent 2px 4px) border-box left top / 100% 1px no-repeat;
}

ul.checklist > li::before {
  content: "";
  position: absolute;
  top: calc(12px + 0.2em);
  left: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-navy);
  border-radius: 5px;
  background: var(--color-white);
}

@media (min-width: 640px) {
  ul.checklist {
    padding: 8px 24px;
  }
}

/* ---------- 2-6 用語と説明 ---------- */

dl.definition-list {
  display: grid;
  /* 一番上の線は、行の区切りと同じ薄い 1px（2026-10-17 ユーザーの選択「案B」。REQ-023） */
  border-top: 1px solid var(--color-line);
}

dl.definition-list > dt {
  padding-top: 14px;
  color: var(--color-navy-dark);
  font-weight: 900;
  line-height: 1.6;
}

dl.definition-list > dd {
  margin: 0;
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--color-line);
  line-height: 1.85;
}

@media (min-width: 768px) {
  dl.definition-list {
    grid-template-columns: minmax(8em, 13em) minmax(0, 1fr);
  }

  dl.definition-list > dt,
  dl.definition-list > dd {
    padding-block: 14px;
    border-bottom: 1px solid var(--color-line);
  }

  dl.definition-list > dd {
    padding-left: 20px;
  }
}

/* ---------- 3-5 事例・体験談（著者の体験） ---------- */

.case-story {
  padding: 20px 18px 22px;
  border: 1px solid #d9e1ec;
  border-radius: var(--radius-l);
  background: var(--color-navy-faint);
}

.case-story > * + * {
  margin-top: 12px;
}

.case-story__title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-navy-dark);
  font-size: 1.0625rem;
  font-weight: 900;
  line-height: 1.55;
}

/* 人の形の印（著者の体験であることを示す） */
.case-story__title::before {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-navy-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='11.5' r='4.5' fill='%23fff'/%3E%3Cpath d='M7 23.5c1.2-4 4.3-6 8-6s6.8 2 8 6' fill='%23fff'/%3E%3C/svg%3E") center / 30px no-repeat;
}

@media (min-width: 640px) {
  .case-story {
    padding: 26px 30px 28px;
  }
}

/* ---------- 3-3 引用（出典つき） ---------- */

blockquote.quote {
  padding: 4px 0 4px 20px;
  /* 例外: 線の色が薄い紺なので、2px（--stroke-accent）では見えにくい。色は変えない決まりなので、3px にする（REQ-012 で認められた例外） */
  border-left: 3px solid var(--color-navy-tint);
  color: var(--color-text);
}

blockquote.quote > * + * {
  margin-top: 8px;
}

blockquote.quote cite {
  display: block;
  color: var(--color-text-light);
  font-size: 0.8125rem;
  font-style: normal;
}

blockquote.quote cite::before {
  content: "出典: ";
}

/* ---------- 4-3 図と説明文 ---------- */

figure.figure img {
  margin-inline: auto;
  border-radius: 8px;
}

figure.figure figcaption {
  margin-top: 8px;
  color: var(--color-text-light);
  font-size: 0.8125rem;
  line-height: 1.7;
  text-align: center;
}

/* ---------- 4-4 関係図: すきまの図（gap-venn。2026-10-18 REQ-024） ----------
   3つの円の重なりで、「A が求めていて、B ができて、C はできていない」所（すきま）を青緑で示す。
   3C分析では A＝顧客が求めること、B＝自社ができること、C＝競合ができること。
   灰の所: 3つの重なり（比べられて値下げ合戦になりやすい）と、B のうち A の外（得意でも売れない）。
   図の中の文字はすべて HTML（読み上げと検索・AI が読める）。絵は CSS で描く:
   - 円の線と白い面: 3つの名前（gap-venn__set）の ::before（線）と ::after（面）。名前は位置を持たないので、図の箱に対して置ける
   - 青緑と灰の面: 図の箱の ::after（すきま）と ::before（灰の所）を、形（SVG）で切り抜く
   - 絵はすべて z-index が負（図の箱の中だけで重なる）。文字はその上に出る
   - 形と位置は 02_designer/tools/gap_venn_geometry.py が書き出す変数。文字の大きさは図の幅に合わせて変わる（cqi。上限と下限つき）
   - 図の中の文字は短く。灰の所と、すきまの文字は2行で、分ける所に <wbr> を書く（「勝てる<wbr>すきま」）
   見た目はフレームワーク図（pillars.css）にそろえた: 薄い紺の箱、上に図の名前と青緑の短い線 */

.gap-venn {
  margin-top: 1.75em; /* 本文の中で、前の段落から少し離す（フレームワーク図と同じ） */
  padding: 16px 14px 18px;
  background: var(--color-navy-faint);
  border: 1px solid #d9e1ec; /* フレームワーク図の枠と同じ色 */
  border-radius: var(--radius-l);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.gap-venn__caption,
.flow__caption,
.converge__caption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--color-navy-dark);
  font-size: 0.9375rem;
  font-weight: 900;
  line-height: 1.5;
}

.gap-venn__caption::before,
.flow__caption::before,
.converge__caption::before {
  content: "";
  flex: none;
  width: 24px;
  height: var(--stroke-mark);
  border-radius: calc(var(--stroke-mark) / 2);
  background: var(--color-teal);
}

.gap-venn__chart {
  /* 形（02_designer/tools/gap_venn_geometry.py が書き出す。手で直さない）: 箱 340×406、半径 100、A・B の中心の間 110、C を下げる量 14 */
  --gv-ratio: 340 / 406;
  --gv-top: 11.330%;     /* 上の帯（A と B の名前）の高さ */
  --gv-bottom: 11.330%;  /* 下の帯（C の名前）の高さ */
  --gv-size: 58.824%;    /* 円の直径（箱の幅に対して） */
  --gv-edge: 4.412cqi; /* 円の外の左右の余白（A と B の名前の端をそろえる） */
  --gv-a-x: 4.412%; --gv-a-y: 11.330%;
  --gv-b-x: 36.765%; --gv-b-y: 11.330%;
  --gv-c-x: 20.588%; --gv-c-y: 39.409%;
  --gv-gap-x: 50.000%; --gv-gap-y: 29.064%;
  --gv-crowded-x: 50.000%; --gv-crowded-y: 47.291%;
  --gv-unwanted-x: 78.235%; --gv-unwanted-y: 30.542%;
  --gv-shape-gap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 406' preserveAspectRatio='none'%3E%3Cpath d='M170.00 62.48 A100 100 0 0 1 212.23 169.36 A100 100 0 0 0 127.77 169.36 A100 100 0 0 1 170.00 62.48Z'/%3E%3C/svg%3E");
  --gv-shape-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 406' preserveAspectRatio='none'%3E%3Cpath d='M127.77 169.36 A100 100 0 0 1 212.23 169.36 A100 100 0 0 1 170.00 229.52 A100 100 0 0 1 127.77 169.36Z'/%3E%3Cpath d='M170.00 62.48 A100 100 0 1 1 170.00 229.52 A100 100 0 0 0 170.00 62.48Z'/%3E%3C/svg%3E");
  /* 色と線 */
  --gv-line: 1.5px;                      /* 円の線 */
  --gv-muted: var(--color-navy-tint);   /* 灰の所（#666 の文字と 4.92:1） */
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: var(--gv-top) 1fr var(--gv-bottom);
  width: min(100%, 400px);
  margin-inline: auto;
  aspect-ratio: var(--gv-ratio);
}

/* 青緑と灰の面: 形で切り抜く */
.gap-venn__chart::before,
.gap-venn__chart::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: var(--gv-shape) 0 0 / 100% 100% no-repeat;
  mask: var(--gv-shape) 0 0 / 100% 100% no-repeat;
}

.gap-venn__chart::before {
  --gv-shape: var(--gv-shape-muted);
  z-index: -3;
  background: var(--gv-muted);
}

.gap-venn__chart::after {
  --gv-shape: var(--gv-shape-gap);
  z-index: -2;
  background: var(--color-teal);
}

/* 3つの円の名前。円の外（A と B は上、C は下）に置く */
.gap-venn__set {
  margin: 0;
  color: var(--color-navy-dark);
  font-size: 0.875rem; /* cqi が使えないブラウザ用 */
  font-size: clamp(0.8125rem, 4.6cqi, 1rem);
  font-weight: 900;
  line-height: 1.35;
  white-space: nowrap;
}

.gap-venn__set--want {
  --gv-x: var(--gv-a-x);
  --gv-y: var(--gv-a-y);
  grid-area: 1 / 1;
  align-self: end;
  justify-self: start;
  padding: 0 0 6px var(--gv-edge);
}

.gap-venn__set--can {
  --gv-x: var(--gv-b-x);
  --gv-y: var(--gv-b-y);
  grid-area: 1 / 2;
  align-self: end;
  justify-self: end;
  padding: 0 var(--gv-edge) 6px 0;
  text-align: right;
}

.gap-venn__set--rival {
  --gv-x: var(--gv-c-x);
  --gv-y: var(--gv-c-y);
  grid-area: 3 / 1 / 4 / 3;
  align-self: start;
  justify-self: center;
  padding-top: 6px;
  text-align: center;
}

/* 英語の名前（Customer など）。頭文字だけ太く（フレームワーク図と同じ） */
.gap-venn__en {
  display: block;
  color: var(--color-navy);
  font-size: 0.6875rem;
  font-size: clamp(0.6875rem, 3.4cqi, 0.8125rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.gap-venn__en::first-letter {
  font-size: 1.15em;
  font-weight: 900;
}

/* 円: ::after が白い面（いちばん下）、::before が線（いちばん上）。線は円の縁の上に、真ん中をそろえて引く */
.gap-venn__set::before,
.gap-venn__set::after {
  content: "";
  position: absolute;
  top: var(--gv-y);
  left: var(--gv-x);
  width: var(--gv-size);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.gap-venn__set::after {
  z-index: -4;
  background: var(--color-white);
}

.gap-venn__set::before {
  z-index: -1;
  width: calc(var(--gv-size) + var(--gv-line));
  margin: calc(var(--gv-line) / -2) 0 0 calc(var(--gv-line) / -2);
  border: var(--gv-line) solid var(--color-navy);
}

/* 重なりの所の文字。点を中心に置き、<wbr> の所で2行に分ける */
.gap-venn__area {
  position: absolute;
  top: var(--gv-at-y);
  left: var(--gv-at-x);
  width: min-content;
  margin: 0;
  translate: -50% -50%;
  color: var(--color-text-light);
  font-size: 0.75rem;
  font-size: clamp(0.75rem, 3.9cqi, 0.875rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  word-break: keep-all;
}

.gap-venn__area--gap {
  --gv-at-x: var(--gv-gap-x);
  --gv-at-y: var(--gv-gap-y);
  color: var(--color-white);
  font-size: 0.9375rem;
  font-size: clamp(0.9375rem, 5cqi, 1.125rem);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.gap-venn__area--crowded {
  --gv-at-x: var(--gv-crowded-x);
  --gv-at-y: var(--gv-crowded-y);
}

.gap-venn__area--unwanted {
  --gv-at-x: var(--gv-unwanted-x);
  --gv-at-y: var(--gv-unwanted-y);
}

/* ---------- 4-4 流れ図（flow。2026-10-18 REQ-026） ----------
   いくつかの段階を、からし色の矢印でつないで見せる図。スマホは上から下へ、図の幅が 680px 以上で左から右へ並ぶ。
   例: 「AIO とは」の「AI 検索が答えを作る流れ」（質問を受ける → 検索に分ける → ページを選ぶ → まとめて出典を添える）
   - 文字はすべて HTML。順番は ol で伝える（丸の中の番号は CSS が付け、読み上げでは読まない）。段階は 3〜5 個まで
   - いちばん大事な段階に flow__step--focus（青緑の枠）。図の下のまとめは flow__result（青緑の薄い面）
   - 段階の中に置けるもの: flow__text（説明）、flow__quote（例の質問などの吹き出し）、検索語の例は柱の部品の search-words（pillars.css）
   - 色の役割どおり: 紺＝番号の丸（駅）、からし色＝流れの矢印（道すじ）、青緑＝大事な段階とまとめ（目印）
   - 見た目はフレームワーク図とすきまの図にそろえた（薄い紺の箱、図の名前と青緑の短い線、白いカード） */

.flow {
  container-type: inline-size;
  margin-top: 1.75em; /* 本文の中で、前の段落から少し離す */
  padding: 16px 14px 18px;
  background: var(--color-navy-faint);
  border: 1px solid #d9e1ec; /* フレームワーク図の枠と同じ色 */
  border-radius: var(--radius-l);
  word-break: auto-phrase; /* 狭いカードの中の文を、文節で折り返す（対応ブラウザのみ。「ペ／ージ」のような切れ方を避ける） */
  text-wrap: pretty;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.flow__steps {
  --flow-num: 28px;  /* 番号の丸 */
  --flow-pad: 14px;  /* カードの中の余白 */
  --flow-gap: 30px;  /* 段階のあいだ（矢印を置く） */
  /* 矢じり（からし色。太さは流れの線と同じ 2px）。下向きと右向き */
  --flow-head-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1.5 1.2 7 6.8l5.5-5.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --flow-head-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.2 1.5 6.8 7l-5.6 5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  display: grid;
  gap: var(--flow-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: flow;
}

.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--flow-num) minmax(0, 1fr);
  align-content: start;
  gap: 8px 10px;
  min-width: 0;
  padding: var(--flow-pad) var(--flow-pad) 16px;
  background: var(--color-white);
  border: 1px solid #d3dce8; /* フレームワーク図のマスと同じ色 */
  border-radius: var(--radius-m);
  counter-increment: flow;
  font-size: 0.875rem;
  line-height: 1.7;
}

.flow__step > * {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
}

/* 番号の丸（駅）。読み上げでは読まない（順番は ol で伝わる） */
.flow__step::before {
  content: counter(flow);
  content: counter(flow) / "";
  grid-row: 1;
  grid-column: 1;
  display: grid;
  place-items: center;
  width: var(--flow-num);
  height: var(--flow-num);
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
}

/* 段階の名前（スマホでは番号の右） */
.flow__title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  color: var(--color-navy-dark);
  font-size: 0.9375rem;
  font-weight: 900;
  line-height: 1.45;
}

.flow__text {
  color: var(--color-text);
}

/* 例の質問などの吹き出し */
.flow__quote {
  position: relative;
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--color-navy-tint);
  color: var(--color-text);
  font-size: 0.8125rem;
  line-height: 1.65;
}

.flow__quote::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 18px;
  width: 12px;
  height: 7px;
  background: inherit;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

/* いちばん大事な段階: 青緑の枠（2px） */
.flow__step--focus {
  border-color: var(--color-teal);
  box-shadow: inset 0 0 0 1px var(--color-teal);
}

/* 次の段階へ向かう矢印（からし色の線と矢じり）。線と矢じりを1つの要素に重ねて描く */
.flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(100% + 1px + 4px);
  left: calc(var(--flow-pad) + var(--flow-num) / 2 - 7px);
  width: 14px;
  height: calc(var(--flow-gap) - 8px);
  background: var(--color-mustard);
  -webkit-mask:
    var(--flow-head-down) center bottom / 14px 8px no-repeat,
    linear-gradient(#000 0 0) center top / var(--stroke-route) calc(100% - 1px) no-repeat;
  mask:
    var(--flow-head-down) center bottom / 14px 8px no-repeat,
    linear-gradient(#000 0 0) center top / var(--stroke-route) calc(100% - 1px) no-repeat;
  pointer-events: none;
}

/* 図の下のまとめ */
.flow__result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  padding: 12px 16px;
  border-radius: var(--radius-m);
  background: var(--color-teal-tint);
  color: var(--color-navy-dark);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
}

.flow__result::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--color-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3 8.6 13.4 14.6 7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* 図の幅が 680px 以上: 左から右へ並べる。番号は段階の名前の上。カードが細くなるので、文字と余白を少し詰める */
@container (min-width: 680px) {
  .flow__steps {
    --flow-pad: 12px;
    --flow-gap: 26px;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }

  .flow__step {
    grid-template-columns: minmax(0, 1fr);
    font-size: 0.8125rem;
    line-height: 1.65;
  }

  .flow__title {
    grid-column: 1;
    grid-row: auto;
    font-size: 0.875rem;
  }

  .flow__quote {
    padding: 8px 10px;
  }

  .flow__step:not(:last-child)::after {
    top: calc(var(--flow-pad) + var(--flow-num) / 2 - 7px);
    left: calc(100% + 1px + 4px);
    width: calc(var(--flow-gap) - 8px);
    height: 14px;
    -webkit-mask:
      var(--flow-head-right) right center / 8px 14px no-repeat,
      linear-gradient(#000 0 0) left center / calc(100% - 1px) var(--stroke-route) no-repeat;
    mask:
      var(--flow-head-right) right center / 8px 14px no-repeat,
      linear-gradient(#000 0 0) left center / calc(100% - 1px) var(--stroke-route) no-repeat;
  }
}

/* ---------- 4-4 集まる図（converge。2026-10-18 REQ-028） ----------
   いくつもの情報の出どころ（カード）を点線の枠でまとめ、からし色の矢印で「確かめること」を通って、1つの答えに集まる図。
   例: 「AI に紹介される会社の条件」の「AI が紹介する会社を選ぶまで」（自社のサイト、Googleビジネスプロフィール、SNS、ほかのサイト → AI の答え）
   - 文字はすべて HTML。カードは2列（図の幅 480px 未満〔スマホ〕では1列）
   - カードの中の番号（converge__num。紺の丸）は、本文の「条件1〜5」などと対応させる。番号の前に読み上げ用の「条件」を書ける（visually-hidden）
   - converge__join: 枠と答えのあいだの「確かめること」（白い札）。上と下に、からし色の矢印
   - converge__result: 答え（青緑の 2px の枠と、上の青緑の札 converge__result-label）。出どころは converge__cite
   - 色の役割どおり: 紺＝番号の丸、からし色＝集まる流れ（矢印）、青緑＝答え（目印）。まとめる枠は点線（点 2px・すき間 2px） */

.converge {
  --cv-arrow: 30px; /* 矢印の長さ */
  --cv-head-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1.5 1.2 7 6.8l5.5-5.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  container-type: inline-size;
  margin-top: 1.75em; /* 本文の中で、前の段落から少し離す */
  padding: 16px 14px 18px;
  background: var(--color-navy-faint);
  border: 1px solid #d9e1ec; /* フレームワーク図の枠と同じ色 */
  border-radius: var(--radius-l);
  word-break: auto-phrase; /* 狭いカードの中の文を、文節で折り返す（対応ブラウザのみ） */
  text-wrap: pretty;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* 出どころをまとめる点線の枠（角の丸み 12px。点線の描き方は site.css の「8-3」） */
.converge__group {
  position: relative;
  padding: 10px 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-m);
}

.converge__group::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: var(--color-navy);
  opacity: 0.5;
  pointer-events: none;
  -webkit-mask: var(--dash-frame) 0 0 / 100% 100% no-repeat;
  mask: var(--dash-frame) 0 0 / 100% 100% no-repeat;
}

.converge__label {
  margin: 0 0 8px 2px;
  color: var(--color-navy-dark);
  font-size: 0.8125rem;
  font-weight: 900;
  line-height: 1.5;
}

.converge__sources {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.converge__source {
  min-width: 0;
  padding: 10px 12px 12px;
  background: var(--color-white);
  border: 1px solid #d3dce8; /* フレームワーク図のマスと同じ色 */
  border-radius: var(--radius-m);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.converge__source > * {
  margin: 0;
}

.converge__source > * + * {
  margin-top: 6px;
}

.converge__name {
  color: var(--color-navy-dark);
  font-size: 0.875rem;
  font-weight: 900;
  line-height: 1.45;
}

.converge__text {
  color: var(--color-text-light);
}

.converge__points {
  display: grid;
  gap: 6px;
  padding: 0;
  list-style: none;
}

.converge__points > li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  color: var(--color-navy-dark);
  font-weight: 700;
}

/* 番号の丸（本文の「条件1〜5」などと対応させる） */
.converge__num {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

/* 枠と答えのあいだの「確かめること」。上と下に、からし色の矢印 */
.converge__join {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: var(--cv-arrow) auto;
  padding: 7px 14px;
  background: var(--color-white);
  border: 1px solid #d3dce8;
  border-radius: var(--radius-m);
  color: var(--color-navy-dark);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.6;
}

.converge__join .converge__num {
  margin-top: 1px;
}

.converge__join::before,
.converge__join::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 14px;
  height: calc(var(--cv-arrow) - 6px);
  margin-left: -7px;
  background: var(--color-mustard);
  pointer-events: none;
  -webkit-mask:
    var(--cv-head-down) center bottom / 14px 8px no-repeat,
    linear-gradient(#000 0 0) center top / var(--stroke-route) calc(100% - 1px) no-repeat;
  mask:
    var(--cv-head-down) center bottom / 14px 8px no-repeat,
    linear-gradient(#000 0 0) center top / var(--stroke-route) calc(100% - 1px) no-repeat;
}

.converge__join::before {
  bottom: calc(100% + 1px + 3px);
}

.converge__join::after {
  top: calc(100% + 1px + 3px);
}

/* 答え: 青緑の 2px の枠と、上の青緑の札 */
.converge__result {
  position: relative;
  padding: 20px 16px 14px;
  background: var(--color-white);
  border: 2px solid var(--color-teal);
  border-radius: var(--radius-m);
  color: var(--color-text);
  font-size: 0.875rem;
  line-height: 1.75;
}

.converge__result > * {
  margin: 0;
}

.converge__result > * + * {
  margin-top: 6px;
}

.converge__result > .converge__result-label {
  position: absolute;
  top: -12px;
  left: 14px;
  margin: 0;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--color-teal);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 22px;
}

.converge__cite {
  color: var(--color-text-light);
  font-size: 0.75rem;
  line-height: 1.6;
}

/* 図の幅が 480px 以上で、出どころのカードを2列に（スマホでは1列。2列だとカードが細く、文が細切れになる） */
@container (min-width: 480px) {
  .converge__sources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* カードの名前に番号を添えるとき（<p class="converge__name"><span class="converge__num">1</span>地図の枠</p>） */
.converge__name:has(> .converge__num) {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 答え（または、広がる図の元）の中の、登録した情報などの一覧（<li><strong>名前</strong>〇〇整体院</li>） */
.converge__facts {
  display: grid;
  gap: 2px;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.7;
}

.converge__facts > li {
  display: flex;
  gap: 10px;
}

.converge__facts strong {
  flex: none;
  min-width: 2.5em;
  background: none; /* 本文の太字のマーカーは付けない（項目の名前なので） */
  color: var(--color-navy-dark);
}

/* 図の下のまとめ（青緑の薄い面に、青緑の丸のチェック。流れ図のまとめと同じ見た目） */
.converge__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  padding: 12px 16px;
  border-radius: var(--radius-m);
  background: var(--color-teal-tint);
  color: var(--color-navy-dark);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
}

.converge__note::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--color-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3 8.6 13.4 14.6 7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* 広がる図（converge--spread。REQ-030）: 1つの元（上の青緑の枠 converge__result）から、からし色の矢印で
   いくつもの行き先（点線の枠のカード）に広がる。HTML は 元 → converge__join → converge__group → converge__note の順に書く。
   行き先のカードは、スマホでは1列、図の幅 600px 以上で横に3つ並ぶ（3枚まで） */
.converge--spread .converge__sources {
  grid-template-columns: minmax(0, 1fr);
}

@container (min-width: 600px) {
  .converge--spread .converge__sources {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- 2-5 表（横にはみ出すときは、包みの中で横に動かせる） ---------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  -webkit-overflow-scrolling: touch;
  /* 横に動かせるときだけ、隠れている側の端に影が出る（影は local の白い面に覆われ、端まで動かすと消える） */
  background:
    linear-gradient(90deg, var(--color-white) 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(270deg, var(--color-white) 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 32, 78, 0.2), rgba(0, 32, 78, 0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 32, 78, 0.2), rgba(0, 32, 78, 0)) right center / 14px 100% no-repeat scroll;
  background-color: var(--color-white);
}

/* 3列までの表は画面の幅に収める。4列から、狭い画面では横に動かす */
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.table-wrap table:has(tr > :nth-child(4)) {
  min-width: 480px;
}

.table-wrap table:has(tr > :nth-child(5)) {
  min-width: 600px;
}

.table-wrap caption {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-navy-dark);
  font-weight: 700;
  text-align: left;
}

/* 横に動かす表でも、表の見出しは見えている幅で折り返し（右で切れない）、横に動かしても左に残す
   （2026-10-18 ユーザーの判断。REQ-030。左に残す動きは Safari では効かないことがある。効かなくても折り返しは効く） */
.table-wrap {
  container-type: inline-size;
}

.table-wrap caption {
  position: sticky;
  left: 0;
  max-width: 100cqi;
}

/* 画面に収まらない表（スマホの4列以上。5列以上は幅 640px 未満まで）の上に「表は横に動かせます →」を出す（REQ-030） */
.table-wrap::before {
  content: "表は横に動かせます →";
  position: sticky;
  left: 0;
  display: none;
  width: 100cqi;
  padding: 6px 14px;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-navy-faint);
  color: var(--color-navy);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: right;
}

@media (max-width: 519.98px) {
  .table-wrap:has(table tr > :nth-child(4))::before {
    display: block;
  }
}

@media (max-width: 639.98px) {
  .table-wrap:has(table tr > :nth-child(5))::before {
    display: block;
  }
}

/* VRIO の判定表（柱の部品。横に動かさずに収める作り）には出さない */
.framework.framework--table .table-wrap::before {
  display: none;
}

.table-wrap th,
.table-wrap td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.table-wrap th {
  background: var(--color-gray-bg);
  color: var(--color-navy-dark);
  font-weight: 700;
}

.table-wrap tr:last-child > * {
  border-bottom: 0;
}

/* 折り返し: 文節で折り返し（対応ブラウザのみ）、細い列では語の途中でも折り返して画面に収める。
   どの列も 4.5em より細くしない（短い列が「支給/額」「第/1回」のように1〜2字ずつ折り返さないように） */
.table-wrap th,
.table-wrap td {
  min-width: 4.5em;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

/* 行見出しは、文節の途中では折り返さない（「直接競合」が「直接競/合」にならないように）。
   1行に収めはしない（長い見出しで1列目だけが画面をふさがないように） */
.table-wrap tbody th {
  overflow-wrap: break-word;
}

/* 行見出しが長い表（8字以上。仕組みが table-wrap--long-head を付ける）は、狭い画面の3列までなら、
   行見出しの幅を全体の4割にして、語の途中でも折り返す（ほかの列が細くなりすぎないように） */
@media (max-width: 639.98px) {
  .table-wrap th,
  .table-wrap td {
    padding: 10px 12px;
  }

  .table-wrap--long-head table:not(:has(tr > :nth-child(4))) tbody th {
    width: 40%;
    overflow-wrap: anywhere;
  }
}

/* ---------- 1-7 コードの見本 ---------- */

pre.code-block {
  overflow-x: auto;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--color-navy-dark);
  color: #e6edf6;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  letter-spacing: 0;
  tab-size: 2;
}

pre.code-block code {
  font-family: inherit;
}

:where(.article-body, .page-body) :not(pre) > code {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--color-gray-bg);
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* ---------- 10-1 開閉（閉じていても文字は HTML にある） ---------- */

details.disclosure {
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-white);
}

details.disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  color: var(--color-navy);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

details.disclosure > summary::-webkit-details-marker {
  display: none;
}

details.disclosure > summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s;
}

details.disclosure[open] > summary::after {
  transform: rotate(-135deg) translateX(-3px);
}

details.disclosure > :not(summary) {
  margin: 0 16px;
}

details.disclosure > :last-child {
  margin-bottom: 16px;
}

/* ---------- 記事の終わり（前後の回、出典、著者カード、次に読む） ---------- */

.article-end {
  display: grid;
  gap: 48px;
  padding-top: 8px;
}

.article-end:empty {
  display: none;
}

.references__title,
.related__title {
  position: relative;
  margin-bottom: 14px;
  padding-left: calc(var(--heading-dot) + var(--heading-dot-gap));
  font-size: 1.0625rem;
  font-weight: 900;
  line-height: 1.5;
}

.references__title::before,
.related__title::before {
  content: "";
  position: absolute;
  top: calc((1.5em - var(--heading-dot)) / 2);
  left: 0;
  width: var(--heading-dot);
  height: var(--heading-dot);
  border-radius: 50%;
  background: var(--color-teal);
}

/* 9-3 出典・参考文献 */
.references ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0 0 0 1.4em;
  font-size: 0.875rem;
  line-height: 1.7;
  list-style: decimal;
}

.references li::marker {
  color: var(--color-text-light);
  font-weight: 700;
}

.references a {
  color: var(--color-link);
  text-underline-offset: 0.2em;
}

/* 9-1 著者カード */
.author-card {
  padding: 20px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-l);
}

.author-card__heading {
  margin-bottom: 14px;
  color: var(--color-text-light);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* スマートフォン: 写真の横に肩書きと名前、紹介文から下は横いっぱい */
.author-card__body {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
}

.author-card__text {
  display: contents;
}

.author-card__photo {
  grid-row: 1 / span 2;
  width: 64px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
}

.author-card__role {
  grid-column: 2;
  align-self: end;
}

.author-card__name {
  grid-column: 2;
  align-self: start;
}

.author-card__summary,
.author-card__facts,
.author-card__more {
  grid-column: 1 / -1;
}

.author-card__role {
  color: var(--color-text-light);
  font-size: 0.8125rem;
  font-weight: 700;
}

.author-card__name {
  color: var(--color-navy-dark);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.5;
}

.author-card__name a {
  text-decoration: none;
}

.author-card__name a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.author-card__summary {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.8;
}

.author-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.author-card__facts li {
  padding: 2px 10px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-gray-bg);
  font-size: 0.75rem;
  line-height: 1.7;
}

.author-card__more {
  margin-top: 14px;
  font-size: 0.875rem;
}

@media (min-width: 640px) {
  .author-card {
    padding: 24px 28px;
  }

  /* PC: 写真を左の列に置き、文はすべて右の列 */
  .author-card__body {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 0 24px;
    align-items: start;
  }

  .author-card__photo {
    grid-row: 1 / span 5;
    width: 96px;
  }

  .author-card__role,
  .author-card__name,
  .author-card__summary,
  .author-card__facts,
  .author-card__more {
    grid-column: 2;
    align-self: auto;
  }
}

/* 次に読む（記事の終わりは2列まで） */
.related .card-list {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .related .card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 6-6 前後のページ送り（講座の前後の回） */
.pager {
  display: grid;
  gap: 12px;
}

.pager__links {
  display: grid;
  gap: 12px;
}

.pager__link {
  display: grid;
  gap: 2px;
  padding: 14px 18px;
  border-radius: var(--radius-m);
  line-height: 1.55;
  text-decoration: none;
}

.pager__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.pager__title {
  font-weight: 900;
}

.pager__link--prev {
  border: 1px solid var(--color-line);
  background: var(--color-white);
  color: var(--color-navy-dark);
}

.pager__link--prev .pager__label {
  color: var(--color-text-light);
}

.pager__link--prev .pager__label::before {
  content: "←";
  display: inline-block;
  margin-right: 0.3em;
  transition: transform var(--arrow-duration) ease-out;
}

.pager__link--prev:hover {
  border-color: var(--color-navy);
}

.pager__link--next {
  background: var(--color-navy);
  color: var(--color-white);
  text-align: right;
}

.pager__link--next .pager__label::after {
  content: "→";
  display: inline-block;
  margin-left: 0.3em;
  transition: transform var(--arrow-duration) ease-out;
}

.pager__link--next:hover {
  background: var(--color-navy-dark);
}

.pager__top {
  justify-self: start;
  color: var(--color-link);
  font-size: 0.875rem;
  font-weight: 700;
  text-underline-offset: 0.2em;
}

@media (min-width: 640px) {
  .pager__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pager__link--next:only-child {
    grid-column: 2;
  }
}

/* 講座の表紙: 回の一覧と著者カード */
.course-sessions {
  margin-top: var(--section-space);
}

.course-sessions h2 {
  margin-bottom: 24px;
}

.page-body--course > .author-card {
  max-width: 820px;
  margin-top: var(--section-space);
}