/* =========================================================
   柱の専用部品（持ち主: デザイナー2。REQ-007）
   5-1 ペルソナシート / 5-2 フレームワーク図の型 / 5-3 検索結果の見本 / 5-4 AI 回答の見本 / 柱の入口: 3つの柱のつながり /
   5-5 市場からペルソナへの絞り込み / 5-6 見比べ
   書き方（HTML の見本）は 04_designer2/design/components.md。
   色や角丸は共通の CSS の変数を使い、変数がないときのために既定値を添えている（A案「道しるべ」の値）。
   アクセントは2色（決定ログ 2026-10-17）。青緑（--p-accent）は札と印に使い、面の文字は白にする。
   からし色（--p-route）は道すじと流れ（柱をつなぐ線、分析の流れの矢印）の線だけに使い、文字と広い面には使わない
   線の太さは種類ごとの変数（決定ログ 2026-10-17）: 印の短い線 --p-stroke-mark、流れの線 --p-stroke-route、飾りの線 --p-stroke-accent。
   枠の線（1px の区切り、2px の枠、点線）は変数にしない。点線は、枠もつなぐ線も区切りも、太さ 1px・点 2px・すき間 2px にそろえる
   （D1 の描き方。site.css の「8-3 点線」。CSS の dashed は点の長さがブラウザまかせなので使わない。書き方はこのファイルの「点線」）
   ========================================================= */

.persona-card,
.persona-zoom,
.persona-contrast,
.framework,
.serp-preview,
.ai-answer-preview,
.pillar-map,
.pillar-map__loop {
  --p-navy: var(--color-navy, #345887);
  --p-navy-dark: var(--color-navy-dark, #00204e);
  --p-accent: var(--color-teal, #117d76);
  --p-route: var(--color-mustard, #d4a23a);
  --p-stroke-mark: var(--stroke-mark, 2px);
  --p-stroke-route: var(--stroke-route, 2px);
  --p-stroke-accent: var(--stroke-accent, 2px);
  --p-dash-frame: var(--dash-frame, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CclipPath id='c'%3E%3Crect width='100%25' height='100%25' rx='12'/%3E%3C/clipPath%3E%3Crect width='100%25' height='100%25' rx='12' fill='none' stroke='%23000' stroke-width='2' stroke-dasharray='2 2' clip-path='url(%23c)'/%3E%3C/svg%3E")); /* 点線の枠の形（角の丸み 12px）。D1 の変数がないときも、枠が塗りつぶしにならないように同じ形を持つ */
  --p-text: var(--color-text, #333);
  --p-text-light: var(--color-text-light, #666);
  --p-link: var(--color-link, #3d70bb);
  --p-white: var(--color-white, #fff);
  --p-gray-bg: var(--color-gray-bg, #f8f9fa);
  --p-line: var(--color-line, #dee2e6);
  --p-tint: var(--color-navy-tint, #e8eef6);
  --p-faint: var(--color-navy-faint, #f1f4f9);
  --p-radius: var(--radius-m, 12px);
  --p-radius-l: var(--radius-l, 20px);
  --p-shadow: var(--shadow-card, 0 1px 0 rgba(0, 32, 78, 0.04), 0 8px 24px -16px rgba(0, 32, 78, 0.35));
  margin: 1.75em 0 0; /* 本文の中で、前の段落から少し離す */
  color: var(--p-text);
}

/* 部品の中のリストは、共通の本文のリストの印を使わない */
.persona-card ul,
.framework ul,
.framework ol,
.serp-preview ol,
.ai-answer-preview ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.persona-card li::before,
.framework li::before,
.serp-preview li::before,
.ai-answer-preview li::before {
  content: none;
}

/* ---------- 点線（太さ 1px、点 2px・すき間 2px。2026-10-17 ユーザーの選択。REQ-020） ----------
   D1 の描き方（site.css の「8-3 点線」、direction.md の線のきまり）と同じ。
   - 枠（角の丸みはどれも 12px）: 枠を 1px の透明にし、::after を枠に重ねて、点線の形で切り抜く。色は --p-dash-color
   - 区切りとつなぐ線: repeating-linear-gradient の背景で描く（それぞれの部品の所に書いている）
   ::after を枠に使うので、点線の枠の部品で ::after をほかに使わない（改善の輪の印は ::before） */
.persona-card__company::after,
.framework__cell--muted::after,
.framework__node--action::after,
.pillar-map__item--current .pillar-map__body::after,
.pillar-map__loop::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: var(--p-dash-color, var(--p-line));
  pointer-events: none;
  -webkit-mask: var(--p-dash-frame) 0 0 / 100% 100% no-repeat;
  mask: var(--p-dash-frame) 0 0 / 100% 100% no-repeat;
}

/* =========================================================
   5-1 ペルソナシート（persona-card）
   ========================================================= */

.persona-card {
  overflow: hidden;
  background: var(--p-white);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius-l);
  box-shadow: var(--p-shadow);
}

.persona-card__head {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px 18px 16px;
}

.persona-card__photo {
  width: 76px;
  height: 76px;
  max-width: none;
  border-radius: 50%;
  background: #e1e8f1;
  box-shadow: 0 0 0 3px var(--p-white), 0 0 0 4px var(--p-line);
  object-fit: cover;
}

/* 写真がないとき: 頭文字の丸 */
.persona-card__initial {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--p-tint);
  box-shadow: 0 0 0 3px var(--p-white), 0 0 0 4px var(--p-line);
  color: var(--p-navy);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
}

.persona-card__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  color: var(--p-text-light);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
}

/* 「記入例」の札 */
.persona-card__badge {
  padding: 0 8px;
  border-radius: 4px;
  background: var(--p-navy-dark);
  color: var(--p-white);
  letter-spacing: 0.08em;
  line-height: 1.7;
}

.persona-card__title {
  margin: 6px 0 0;
  color: var(--p-navy-dark);
  font-size: 1.0625rem;
  font-weight: 900;
  line-height: 1.5;
  word-break: auto-phrase;
}

.persona-card__name {
  margin: 4px 0 0;
  font-size: 0.875rem;
  font-weight: 700;
}

.persona-card__name span {
  color: var(--p-text-light);
  font-weight: 400;
}

/* 会社に売る事業: 会社の属性（担当者の前に置く） */
.persona-card__company {
  --p-dash-color: #b8c4d6;
  position: relative;
  margin: 0 18px 14px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--p-radius);
}

/* 課題の1文: シートの要約 */
.persona-card__summary {
  margin: 0 18px;
  padding: 12px 14px;
  border-radius: var(--p-radius);
  background: var(--p-tint);
}

.persona-card__summary-label,
.persona-card__label {
  margin: 0;
  color: var(--p-navy);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.persona-card__summary-text {
  margin: 4px 0 0;
  color: var(--p-navy-dark);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.75;
}

/* 型の区切り（／）は紺で細く */
.persona-card__summary-text .sep {
  margin: 0 0.25em;
  color: var(--p-navy);
  font-weight: 400;
}

.persona-card__body {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.persona-card__block {
  display: grid;
  gap: 10px;
  align-content: start;
}

.persona-card__block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--p-navy-dark);
  color: var(--p-navy-dark);
  font-size: 0.9375rem;
  font-weight: 900;
  line-height: 1.5;
}

/* 手順の札「手順2」など（記事「ペルソナの作り方」の5つの手順と対応。数字だけだと「1 はどこ？」と迷うため、文字で書く） */
.persona-card__step {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--p-navy);
  color: var(--p-white);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.persona-card__items {
  display: grid;
  gap: 12px;
  margin: 0;
}

.persona-card__item dt {
  color: var(--p-text-light);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

.persona-card__item dd {
  margin: 2px 0 0;
  font-size: 0.9375rem;
  line-height: 1.75;
}

/* 困っている場面は、シートの中でいちばん大事。少し大きく、紺の線で */
.persona-card__item--scene dd {
  padding: 2px 0 2px 12px;
  border-left: var(--p-stroke-accent) solid var(--p-navy);
  color: var(--p-navy-dark);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.85;
}

.persona-card__item li {
  position: relative;
  padding-left: 14px;
}

.persona-card__item li + li {
  margin-top: 4px;
}

.persona-card .persona-card__item li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--p-navy);
}

/* 基本情報は、短い値を表のように並べる */
.persona-card__basics {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0 14px;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.persona-card__basics dt,
.persona-card__basics dd {
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid transparent;
  background: repeating-linear-gradient(90deg, var(--p-line) 0 2px, transparent 2px 4px) border-box left bottom / 100% 1px no-repeat;
}

.persona-card__basics dt {
  padding-top: 9px;
  color: var(--p-text-light);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

/* この人が使う言葉（検索語と、AI への質問） */
.persona-card__words {
  display: grid;
  gap: 12px;
  padding: 16px 18px 20px;
  border-top: 1px solid var(--p-line);
  background: var(--p-faint);
}

.persona-card__words .persona-card__block-title {
  padding-bottom: 0;
  border-bottom: 0;
}

.search-words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 検索窓の形: 虫めがねの印 + 打ち込む言葉 */
.search-words li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 10px;
  border: 1px solid #b8c4d6;
  border-radius: 999px;
  background: var(--p-white, #fff);
  color: var(--p-navy-dark, #00204e);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.6;
}

.search-words li::before,
.persona-card .search-words li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.8' cy='6.8' r='4.6' fill='none' stroke='%23345887' stroke-width='2'/%3E%3Cpath d='M10.3 10.3l3.7 3.7' stroke='%23345887' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* AI への質問: 吹き出しの印 */
.ai-question {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #b8c4d6;
  border-radius: var(--p-radius, 12px);
  background: var(--p-white, #fff);
  font-size: 0.875rem;
  line-height: 1.75;
}

.ai-question::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--p-navy-dark, #00204e) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M7 8.5h12a1.5 1.5 0 0 1 1.5 1.5v6a1.5 1.5 0 0 1-1.5 1.5h-6l-3.5 2.6v-2.6H7A1.5 1.5 0 0 1 5.5 16v-6A1.5 1.5 0 0 1 7 8.5z' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / 26px no-repeat;
}

.ai-question__label {
  display: block;
  color: var(--p-text-light, #666);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.persona-card__note {
  margin: 0;
  padding: 12px 18px;
  border-top: 1px solid transparent;
  background: repeating-linear-gradient(90deg, var(--p-line) 0 2px, transparent 2px 4px) border-box left top / 100% 1px no-repeat;
  font-size: 0.875rem;
  line-height: 1.8;
}

.persona-card__note strong {
  color: var(--p-navy-dark);
}

.persona-card__caption {
  padding: 12px 18px 14px;
  border-top: 1px solid var(--p-line);
  color: var(--p-text-light);
  font-size: 0.75rem;
  line-height: 1.7;
}

@media (min-width: 640px) {
  .persona-card__head {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 22px;
    padding: 24px 28px 20px;
  }

  .persona-card__photo,
  .persona-card__initial {
    width: 104px;
    height: 104px;
  }

  .persona-card__initial {
    font-size: 2.25rem;
  }

  .persona-card__title {
    font-size: 1.25rem;
  }

  .persona-card__company,
  .persona-card__summary {
    margin-inline: 28px;
  }

  .persona-card__summary {
    padding: 14px 18px;
  }

  .persona-card__summary-text {
    font-size: 1rem;
  }

  .persona-card__body {
    padding: 24px 28px;
  }

  .persona-card__words {
    padding: 18px 28px 22px;
  }

  .persona-card__note,
  .persona-card__caption {
    padding-inline: 28px;
  }
}

/* 「状況」と「人物像」を左右に（カードの幅が足りるときだけ） */
@container (min-width: 760px) {
  .persona-card__body {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: 36px;
  }
}

.persona-card {
  container-type: inline-size;
}

/* =========================================================
   5-2 フレームワーク図の型（framework）
   --quadrant（4象限）、--columns（3列）、--hub（中心と周り）、--canvas（9マス）、
   --tree（ツリー）、--compare（前後の比較）、--table（表）。記入例は --example を足す
   図の中の文字はすべて HTML で持つ（読み上げと検索で読める）
   ========================================================= */

.framework {
  container-type: inline-size;
  padding: 16px 14px 18px;
  background: var(--p-faint);
  border: 1px solid #d9e1ec;
  border-radius: var(--p-radius-l);
}

/* 図の名前（上に置く） */
.framework__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 14px;
  color: var(--p-navy-dark);
  font-size: 0.9375rem;
  font-weight: 900;
  line-height: 1.5;
}

.framework__caption::before {
  content: "";
  flex: none;
  width: 24px;
  height: var(--p-stroke-mark);
  border-radius: calc(var(--p-stroke-mark) / 2);
  background: var(--p-accent);
}

/* 記入例の札 */
.framework__badge {
  padding: 0 8px;
  border-radius: 4px;
  background: var(--p-navy-dark);
  color: var(--p-white);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.8;
}

.framework__grid {
  position: relative;
  display: grid;
  gap: 8px;
}

/* マス（共通） */
.framework__cell {
  min-width: 0;
  padding: 12px 12px 14px;
  background: var(--p-white);
  border: 1px solid #d3dce8;
  border-radius: var(--p-radius);
  font-size: 0.875rem;
  line-height: 1.7;
}

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

.framework__name {
  margin: 0;
  color: var(--p-navy-dark);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.45;
}

/* 英語の名前（Strength など）。頭文字だけ太く */
.framework__en {
  display: block;
  margin-top: 1px;
  color: var(--p-navy);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

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

.framework__text {
  margin: 0;
  color: var(--p-text);
}

.framework__hint {
  margin: 0;
  color: var(--p-text-light);
  font-size: 0.8125rem;
}

/* マスの中の書き込み（記入例など） */
.framework__items li {
  position: relative;
  padding-left: 12px;
  line-height: 1.6;
}

.framework__items li + li {
  margin-top: 4px;
}

.framework .framework__items li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--p-navy);
}

/* 記入例: マスの中を付箋のように */
.framework--example .framework__items li {
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--p-tint);
  font-size: 0.8125rem;
}

.framework--example .framework__items li::before {
  display: none;
}

/* 注目するマス（説明の中で、いま見ているところ） */
.framework__cell--focus {
  border: 2px solid var(--p-navy);
  background: var(--p-white);
  box-shadow: 0 0 0 4px rgba(52, 88, 135, 0.12);
}

.framework__cell--muted {
  --p-dash-color: #d3dce8;
  position: relative;
  background: transparent;
  border-color: transparent;
}

.framework__cell--muted .framework__name,
.framework__cell--muted .framework__en {
  color: var(--p-text-light);
}

.framework__note {
  margin: 12px 0 0;
  color: var(--p-text-light);
  font-size: 0.8125rem;
  line-height: 1.7;
}

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

  .framework__grid {
    gap: 10px;
  }

  .framework__cell {
    padding: 14px 16px 16px;
    font-size: 0.9375rem;
  }
}

/* ---------- 4象限（--quadrant）: SWOT、PEST、クロスSWOT ---------- */

.framework--quadrant .framework__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 軸の名前つき（左上の角は空ける） */
.framework--quadrant .framework__grid--axes {
  grid-template-columns: auto repeat(2, minmax(0, 1fr));
}

.framework__corner {
  display: block;
}

.framework__axis {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 4px 6px;
  color: var(--p-navy-dark);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* 行の軸は縦書き（「内部環境」など短い言葉） */
.framework__axis--row {
  padding: 8px 4px;
  border-radius: 999px;
  background: var(--p-tint);
  writing-mode: vertical-rl;
  letter-spacing: 0.12em;
}

.framework__axis--focus {
  background: var(--p-navy);
  color: var(--p-white);
}

/* 掛け合わせ（クロスSWOT）: 見出しのマスは紺の地 */
.framework--cross .framework__grid--axes {
  grid-template-columns: minmax(0, 0.8fr) repeat(2, minmax(0, 1fr));
}

.framework--cross .framework__axis {
  padding: 10px 8px;
  border-radius: var(--p-radius);
  background: var(--p-navy);
  color: var(--p-white);
  writing-mode: horizontal-tb;
  letter-spacing: 0.02em;
}

.framework--cross .framework__axis .framework__en {
  color: #dbe6f5;
}

.framework--cross .framework__corner {
  display: grid;
  place-items: center;
  color: var(--p-text-light);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* 真ん中の丸（PEST分析、VRIO分析など。図の名前は figcaption にもある） */
.framework__center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0;
  border-radius: 50%;
  background: var(--p-navy-dark);
  box-shadow: 0 0 0 4px var(--p-faint);
  color: var(--p-white);
  font-size: 0.6875rem;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  transform: translate(-50%, -50%);
}

/* 4象限のマスは、真ん中の丸に文字が重ならないよう内側を空ける（2列に並ぶ幅のときだけ） */
@container (min-width: 481px) {
  .framework--quadrant .framework__grid:has(.framework__center) .framework__cell {
    padding-bottom: 36px;
  }

  .framework--quadrant .framework__grid:has(.framework__center) .framework__cell:nth-of-type(odd) {
    padding-right: 22px;
  }

  .framework--quadrant .framework__grid:has(.framework__center) .framework__cell:nth-of-type(even) {
    padding-left: 22px;
  }

  .framework--quadrant .framework__grid:has(.framework__center) .framework__cell:nth-of-type(n + 3) {
    padding-top: 36px;
    padding-bottom: 14px;
  }
}

@container (max-width: 480px) {
  .framework__center {
    display: none;
  }
}

/* 狭い幅で中身が長いときは1列に積む（--stack-sm）。列の軸の名前は読み上げにだけ残し、行の軸は見出しのように横書きにする */
@container (max-width: 480px) {
  .framework--quadrant.framework--stack-sm .framework__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .framework--stack-sm .framework__corner,
  .framework--stack-sm .framework__center {
    display: none;
  }

  .framework--stack-sm .framework__axis:not(.framework__axis--row) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .framework--stack-sm .framework__axis--row {
    justify-self: start;
    margin-top: 6px;
    padding: 2px 12px;
    writing-mode: horizontal-tb;
    letter-spacing: 0.06em;
  }

  .framework--quadrant.framework--stack-sm .framework__grid .framework__cell {
    padding: 12px 12px 14px;
  }
}

@container (min-width: 560px) {
  .framework__center {
    width: 84px;
    height: 84px;
    font-size: 0.8125rem;
  }
}

/* ---------- 3列（--columns）: 3C ---------- */

.framework--columns .framework__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

/* 3つをつなぐ点線（スマホは縦、広い幅は横） */
.framework--columns .framework__grid::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 28px;
  width: 1px;
  background: repeating-linear-gradient(180deg, #9fb1c9 0 2px, transparent 2px 4px);
}

.framework--columns .framework__cell {
  position: relative;
  padding-left: 60px;
}

/* 頭文字の丸（C など。data-mark の文字） */
.framework--columns .framework__cell::before {
  content: attr(data-mark);
  position: absolute;
  top: 12px;
  left: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--p-navy);
  box-shadow: 0 0 0 4px var(--p-white);
  color: var(--p-white);
  font-size: 0.8125rem;
  font-weight: 900;
}

.framework__result {
  position: relative;
  margin-top: 22px;
  padding: 12px 16px 14px;
  border: 2px solid var(--p-navy);
  border-radius: var(--p-radius);
  background: var(--p-white);
  font-size: 0.875rem;
  line-height: 1.7;
}

.framework__result::before {
  content: "";
  position: absolute;
  top: -22px;
  left: 50%;
  width: var(--p-stroke-route);
  height: 20px;
  margin-left: calc(var(--p-stroke-route) / -2);
  background: var(--p-route);
}

/* 枠の中の段落には、本文の段落の余白をつけない（枠の上だけが広く空いていた。REQ-025） */
.framework__result p {
  margin: 0;
}

.framework__result p + p {
  margin-top: 6px;
}

/* 結論の札（「勝てるすきま」）: 流れの線が届く、枠の上の辺の真ん中に載せる（REQ-025）。
   3つの欄からの線が札に着き、答えにたどり着いたことを示す。青緑の面に白の文字（4.98:1）で、すきまの図（gap-venn）の
   「勝てるすきま」の青緑とそろえる。札を書くのは枠の最初の p（<p class="framework__result-label">勝てるすきま</p>） */
.framework__result:has(> .framework__result-label) {
  margin-top: 32px;
  padding-top: 20px;
}

.framework__result:has(> .framework__result-label)::before {
  top: -34px;
  height: 24px; /* 札の下にもぐらせて、線と札のあいだにすきまを作らない */
}

.framework__result .framework__result-label {
  position: absolute;
  top: -1px; /* 枠の線（2px）の真ん中 */
  left: 50%;
  padding: 0 9px;
  border-radius: 4px;
  background: var(--p-accent);
  color: var(--p-white);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.8;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.framework__result .framework__result-label + p {
  margin-top: 0;
}

@container (min-width: 600px) {
  .framework--columns .framework__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .framework--columns .framework__grid::before {
    top: 30px; /* 頭文字の丸（上から 12px、高さ 36px）の中心 */
    bottom: auto;
    left: 16%;
    right: 16%;
    width: auto;
    height: 1px;
    background: repeating-linear-gradient(90deg, #9fb1c9 0 2px, transparent 2px 4px);
  }

  .framework--columns .framework__cell {
    padding: 52px 16px 16px;
    text-align: center;
  }

  /* 付箋の文は左寄せ（2〜3行の文の行の頭をそろえる。番号の丸と欄の名前は真ん中のまま。REQ-025） */
  .framework--columns .framework__items {
    text-align: left;
  }

  .framework--columns .framework__cell::before {
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ---------- 中心と周り（--hub）: ファイブフォース ---------- */

.framework--hub .framework__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    ".    top    ."
    "left center right"
    ".    bottom .";
  gap: 26px 22px;
  align-items: center;
}

.framework--hub .framework__cell {
  position: relative;
  padding: 10px 8px 12px;
  text-align: center;
}

.framework--hub .framework__name {
  font-size: 0.8125rem;
  word-break: auto-phrase;
}

.framework--hub .framework__hint {
  font-size: 0.75rem;
  line-height: 1.55;
}

.framework__cell--center {
  grid-area: center;
  border: 2px solid var(--p-navy);
  background: var(--p-navy);
}

.framework__cell--center .framework__name,
.framework__cell--center .framework__hint {
  color: var(--p-white);
}

.framework__cell--top { grid-area: top; }
.framework__cell--left { grid-area: left; }
.framework__cell--right { grid-area: right; }
.framework__cell--bottom { grid-area: bottom; }

/* 周りから中心へ向かう矢印（からし色の線と矢じり） */
.framework--hub .framework__cell--top::after,
.framework--hub .framework__cell--bottom::after,
.framework--hub .framework__cell--left::after,
.framework--hub .framework__cell--right::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-right: var(--p-stroke-route) solid var(--p-route);
  border-bottom: var(--p-stroke-route) solid var(--p-route);
}

.framework--hub .framework__cell--top::after {
  top: calc(100% + 7px);
  left: calc(50% - 5px);
  transform: rotate(45deg);
}

.framework--hub .framework__cell--bottom::after {
  bottom: calc(100% + 7px);
  left: calc(50% - 5px);
  transform: rotate(-135deg);
}

.framework--hub .framework__cell--left::after {
  top: calc(50% - 5px);
  left: calc(100% + 5px);
  transform: rotate(-45deg);
}

.framework--hub .framework__cell--right::after {
  top: calc(50% - 5px);
  right: calc(100% + 5px);
  transform: rotate(135deg);
}

@container (min-width: 560px) {
  .framework--hub .framework__grid {
    gap: 30px 40px;
  }

  .framework--hub .framework__cell {
    padding: 14px 12px 16px;
  }

  .framework--hub .framework__name {
    font-size: 0.9375rem;
  }

  .framework--hub .framework__hint {
    font-size: 0.8125rem;
  }

  .framework--hub .framework__cell--left::after { left: calc(100% + 12px); }
  .framework--hub .framework__cell--right::after { right: calc(100% + 12px); }
}

/* ---------- 9マス（--canvas）: ビジネスモデルキャンバス ----------
   HTML は書く順（顧客 → 価値提案 → … → コスト構造）に並べる。広い幅で決まった配置にする */

.framework--canvas .framework__grid {
  grid-template-columns: minmax(0, 1fr);
}

.framework--canvas .framework__cell {
  position: relative;
  padding-top: 12px;
}

/* 書く順の番号（data-order） */
.framework--canvas .framework__cell[data-order]::before {
  content: attr(data-order);
  float: right;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0 0 4px 8px;
  border-radius: 50%;
  background: var(--p-navy);
  color: var(--p-white);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

.framework--canvas .framework__name {
  font-size: 0.875rem;
}

@container (min-width: 600px) {
  .framework--canvas .framework__grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-template-areas:
      "kp kp ka ka vp vp cr cr cs cs"
      "kp kp kr kr vp vp ch ch cs cs"
      "co co co co co rv rv rv rv rv";
    gap: 6px;
  }

  .framework--canvas .framework__cell {
    min-height: 92px;
    padding: 8px 8px 10px;
    font-size: 0.75rem;
  }

  .framework--canvas .framework__name {
    font-size: 0.75rem;
  }

  .framework--canvas.framework--example .framework__items li {
    padding: 3px 6px;
    font-size: 0.6875rem;
    line-height: 1.5;
  }

  .framework--canvas .framework__cell--cs { grid-area: cs; }
  .framework--canvas .framework__cell--vp { grid-area: vp; }
  .framework--canvas .framework__cell--ch { grid-area: ch; }
  .framework--canvas .framework__cell--cr { grid-area: cr; }
  .framework--canvas .framework__cell--rv { grid-area: rv; }
  .framework--canvas .framework__cell--kr { grid-area: kr; }
  .framework--canvas .framework__cell--ka { grid-area: ka; }
  .framework--canvas .framework__cell--kp { grid-area: kp; }
  .framework--canvas .framework__cell--co { grid-area: co; }

  .framework--canvas .framework__cell--vp {
    border: 2px solid var(--p-navy);
  }
}

/* ---------- ツリー（--tree）: なぜなぜ分析 ---------- */

.framework__tree,
.framework__tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.framework__tree ul {
  margin-left: 14px;
  padding-left: 18px;
  border-left: 2px solid #9fb1c9;
}

.framework__tree li {
  position: relative;
  padding-top: 10px;
}

.framework__tree ul > li::after {
  content: "";
  position: absolute;
  top: 30px;
  left: -18px;
  width: 16px;
  border-top: 2px solid #9fb1c9;
}

/* 最後の枝は、線を枝のところで止める */
.framework__tree ul > li:last-child::before {
  content: "";
  position: absolute;
  top: 31px;
  bottom: 0;
  left: -20px;
  width: 4px;
  background: var(--p-faint);
}

.framework__node {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #d3dce8;
  border-radius: var(--p-radius);
  background: var(--p-white);
  font-size: 0.875rem;
  line-height: 1.7;
}

.framework__node-label {
  display: inline-block;
  margin-right: 6px;
  padding: 0 7px;
  border-radius: 4px;
  background: var(--p-tint);
  color: var(--p-navy);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.7;
}

.framework__node--root {
  border: 2px solid var(--p-navy);
  font-weight: 700;
}

/* 根本の原因と対策 */
.framework__node--cause {
  border: 2px solid var(--p-navy-dark);
  background: var(--p-navy-dark);
  color: var(--p-white);
}

.framework__node--cause .framework__node-label {
  background: var(--p-accent);
  color: var(--p-white);
}

.framework__node--action {
  --p-dash-color: var(--p-navy);
  position: relative;
  border: 1px solid transparent;
}

/* ---------- ツリー（--tree）: なぜなぜ分析。枝分かれは入れ子の framework__tree、1本なら framework__chain ---------- */

.framework--tree .framework__node {
  max-width: 40em;
}

/* 枝分かれのないツリー（なぜを1本で深める）: 縦の鎖 */
ol.framework__chain {
  display: grid;
  gap: 22px;
  padding: 0;
  list-style: none;
}

.framework__chain > li {
  position: relative;
}

/* 下の段へ向かう矢印（からし色の線と矢じり） */
.framework__chain > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(23.5px - var(--p-stroke-route) / 2);
  bottom: -20px;
  width: var(--p-stroke-route);
  height: 18px;
  background: var(--p-route);
}

.framework .framework__chain > li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 19px;
  bottom: -21px;
  z-index: 1;
  width: 9px;
  height: 9px;
  border-right: var(--p-stroke-route) solid var(--p-route);
  border-bottom: var(--p-stroke-route) solid var(--p-route);
  transform: rotate(45deg);
}

.framework__chain .framework__node-label {
  display: block;
  width: fit-content;
  margin: 0 0 4px;
}

/* ---------- 前後の比較（--compare）: As-Is / To-Be ---------- */

.framework--compare .framework__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.framework__state {
  padding: 12px 14px 14px;
  border-radius: var(--p-radius);
  font-size: 0.875rem;
  line-height: 1.7;
}

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

.framework__state--from {
  background: var(--p-white);
  border: 1px solid #d3dce8;
}

.framework__state--to {
  background: var(--p-navy);
  color: var(--p-white);
}

.framework__state--to .framework__name,
.framework__state--to .framework__en,
.framework__state--to .framework__text {
  color: var(--p-white);
}

/* 間: 差（問題）と、差を埋める道（課題） */
.framework__gap {
  position: relative;
  margin: 0 0 0 22px;
  padding: 14px 0 14px 26px;
  border-left: var(--p-stroke-route) solid var(--p-route);
}

.framework__gap-label {
  margin: 0 0 8px;
  color: var(--p-navy-dark);
  font-size: 0.8125rem;
  font-weight: 900;
}

.framework__path {
  display: grid;
  gap: 6px;
  counter-reset: path;
}

.framework__path li {
  position: relative;
  padding: 6px 10px 6px 34px;
  border-radius: 8px;
  background: var(--p-white);
  border: 1px solid #d3dce8;
  font-size: 0.8125rem;
  line-height: 1.6;
  counter-increment: path;
}

.framework .framework__path li::before {
  content: counter(path);
  position: absolute;
  top: 50%;
  left: 8px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--p-navy);
  color: var(--p-white);
  font-size: 0.6875rem;
  font-weight: 700;
  transform: translateY(-50%);
}

@container (min-width: 640px) {
  .framework--compare .framework__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 0;
    align-items: center;
  }

  .framework__gap {
    margin: 0;
    padding: 18px 20px;
    border-left: 0;
    border-top: var(--p-stroke-route) solid var(--p-route);
  }

  .framework__gap::after {
    content: "";
    position: absolute;
    top: calc(-7px - var(--p-stroke-route) / 2);
    right: -2px;
    width: 14px;
    height: 14px;
    border-top: var(--p-stroke-route) solid var(--p-route);
    border-right: var(--p-stroke-route) solid var(--p-route);
    transform: rotate(45deg);
  }
}

/* ---------- 表（--table）: VRIO ---------- */

.framework--table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--p-white);
  font-size: 0.8125rem;
}

/* 共通の表（components.css）は5列から最小幅 600px で横に動かす。判定表は文字を小さくして、
   スマホでも全部の列（とくに右端の判定）を見せるので、最小幅を外す（共通の指定より強くする） */
.framework.framework--table .table-wrap table {
  min-width: 0;
}

.framework--table th,
.framework--table td {
  padding: 8px 6px;
  border: 1px solid #d3dce8;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
}

.framework--table thead th {
  background: var(--p-tint);
  color: var(--p-navy-dark);
  font-weight: 700;
}

/* 判定の列 */
.framework--table th:last-child,
.framework--table td:last-child {
  background: var(--p-faint);
  color: var(--p-navy-dark);
  font-weight: 700;
}

.framework--table tbody tr:last-child td:last-child {
  background: var(--p-navy);
  color: var(--p-white);
}

/* ○ と × は記号だけにせず、読み上げ用の文字を添える（visually-hidden） */
.framework__mark {
  font-size: 1rem;
  font-weight: 700;
}

.framework__mark--no {
  color: var(--p-text-light);
}

/* 分析の向き（左から右へ） */
.framework__direction {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--p-text-light);
  font-size: 0.8125rem;
  font-weight: 700;
}

.framework__direction::after {
  content: "";
  flex: 1;
  height: var(--p-stroke-route);
  border-radius: calc(var(--p-stroke-route) / 2);
  background: linear-gradient(90deg, var(--p-route) 0 calc(100% - 4px), transparent 0);
  -webkit-mask: linear-gradient(#000 0 0);
}

@container (max-width: 599px) {
  .framework--table table {
    font-size: 0.75rem;
    line-height: 1.5;
  }

  .framework--table caption {
    padding: 8px 10px;
    font-size: 0.75rem;
  }

  /* 共通の表は文節で折り返すが、5列を狭い幅に収めるため、日本語は字の切れ目でも折り返す（英単語は切らない） */
  .framework--table th,
  .framework--table td {
    padding: 6px 2px;
    letter-spacing: 0;
    word-break: normal;
    overflow-wrap: normal;
  }

  /* 英語の見出し（Organization など）は切らないので、見出しの字を小さくして、右端の判定の列に幅を回す */
  .framework--table thead th {
    font-size: 0.6875rem;
  }
}

@container (min-width: 600px) {
  .framework--table table {
    font-size: 0.875rem;
  }

  .framework--table th,
  .framework--table td {
    padding: 10px 10px;
  }
}

/* =========================================================
   5-3 検索結果の見本（serp-preview）
   実在の検索サービスの画面はまねず、見出し・URL・説明文の並びだけを抽象化して見せる
   ========================================================= */

.serp-preview {
  padding: 14px;
  border: 1px solid #d3dce8;
  border-radius: var(--p-radius-l);
  background: var(--p-white);
}

/* 検索窓 */
.serp-preview__query {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px 14px;
  border: 1px solid #b8c4d6;
  border-radius: 999px;
  color: var(--p-navy-dark);
  font-size: 0.875rem;
  font-weight: 700;
}

.serp-preview__query::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.8' cy='6.8' r='4.6' fill='none' stroke='%23345887' stroke-width='2'/%3E%3Cpath d='M10.3 10.3l3.7 3.7' stroke='%23345887' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.serp-preview__results {
  display: grid;
  gap: 4px;
}

.serp-preview__item {
  position: relative;
  padding: 10px 12px 12px;
  border-radius: var(--p-radius);
}

.serp-preview__site {
  margin: 0;
  color: var(--p-text-light);
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.serp-preview__title {
  margin: 2px 0 0;
  color: var(--p-link);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

.serp-preview__desc {
  margin: 4px 0 0;
  color: var(--p-text);
  font-size: 0.8125rem;
  line-height: 1.7;
}

/* 自社のページ: 紺の枠と「自社」の札 */
.serp-preview__item--mine {
  border: 2px solid var(--p-navy);
  background: var(--p-faint);
}

.serp-preview__tag {
  position: absolute;
  top: -10px;
  right: 10px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--p-accent);
  color: var(--p-white);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.7;
}

/* ほかの結果は控えめに */
.serp-preview__item--other .serp-preview__title {
  color: #5a6b85;
}

.serp-preview__caption,
.ai-answer-preview__caption {
  margin: 12px 0 0;
  color: var(--p-text-light);
  font-size: 0.75rem;
  line-height: 1.6;
}

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

/* =========================================================
   5-4 AI 回答の見本（ai-answer-preview）
   特定の AI サービスの画面はまねず、「質問 → 回答 → 根拠のページ」の並びだけを見せる
   ========================================================= */

.ai-answer-preview {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d3dce8;
  border-radius: var(--p-radius-l);
  background: var(--p-faint);
}

/* 質問: 右寄せの吹き出し */
.ai-answer-preview__question {
  justify-self: end;
  max-width: 88%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  background: var(--p-navy);
  color: var(--p-white);
  font-size: 0.875rem;
  line-height: 1.7;
}

.ai-answer-preview__answer {
  padding: 12px 14px 14px;
  border: 1px solid #d3dce8;
  border-radius: 16px 16px 16px 4px;
  background: var(--p-white);
  font-size: 0.875rem;
  line-height: 1.8;
}

.ai-answer-preview__answer > * + * {
  margin-top: 8px;
}

.ai-answer-preview__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--p-text-light);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ai-answer-preview__label::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--p-navy-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 3.5l1.3 3.2 3.2 1.3-3.2 1.3L9 12.5 7.7 9.3 4.5 8l3.2-1.3z' fill='%23fff'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* 回答の中の、根拠の番号 */
.ai-answer-preview__ref {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin: 0 2px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--p-tint);
  color: var(--p-navy);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: 0.1em;
}

/* 根拠として示されるページ */
.ai-answer-preview__sources {
  display: grid;
  gap: 6px;
  padding-top: 10px !important;
  border-top: 1px solid transparent;
  background: repeating-linear-gradient(90deg, var(--p-line) 0 2px, transparent 2px 4px) border-box left top / 100% 1px no-repeat;
}

.ai-answer-preview__sources li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-items: baseline;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.8125rem;
  line-height: 1.55;
}

.ai-answer-preview__sources .ai-answer-preview__ref {
  grid-row: span 2;
}

.ai-answer-preview__source-site {
  color: var(--p-text-light);
  font-size: 0.75rem;
}

.ai-answer-preview__sources .is-mine {
  border: 2px solid var(--p-navy);
  background: var(--p-faint);
}

.ai-answer-preview__sources .is-mine strong {
  color: var(--p-navy-dark);
}

@media (min-width: 640px) {
  .ai-answer-preview {
    padding: 20px 22px;
  }
}

/* =========================================================
   柱の入口: 3つの柱のつながり（pillar-map）
   いまいる柱に --current と「いまここ」。スマホは縦の道、PC は横の道（トップの「3つの柱」と同じ形）
   ========================================================= */

ol.pillar-map {
  position: relative;
  display: grid;
  gap: 20px;
  padding: 0;
  list-style: none;
}

.pillar-map__item {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

/* 柱から次の柱へ、からし色の道 */
.pillar-map__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: -20px;
  left: calc(20px - var(--p-stroke-route) / 2);
  width: var(--p-stroke-route);
  background: var(--p-route);
}

.pillar-map__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--p-navy);
  box-shadow: 0 0 0 4px var(--p-white);
  color: var(--p-white);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}

.pillar-map__body {
  position: relative;
  padding: 18px;
  background: var(--p-white);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  box-shadow: var(--p-shadow);
}

.pillar-map__body > * {
  margin: 0;
}

/* 名前は語の途中で切らず、<wbr> の所（ビジネス／フレームワーク）でだけ折り返す */
.pillar-map__name {
  color: var(--p-navy-dark);
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1.4;
  word-break: keep-all;
}

.pillar-map__name a {
  color: inherit;
  text-decoration: none;
}

.pillar-map__name a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pillar-map__body .pillar-map__q {
  display: inline-block;
  margin-top: 6px;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--p-tint);
  color: var(--p-navy);
  font-size: 0.8125rem;
  font-weight: 700;
}

.pillar-map__body .pillar-map__desc {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.8;
}

.pillar-map__body .pillar-map__link {
  margin-top: 12px;
}

/* ボタン風のリンク: 下線は文字の下だけ（1px）。「→」は下線の外に置き、ホバーで右へ少し動かす */
.pillar-map__link a {
  color: var(--p-navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: var(--stroke-button, 1px);
  text-underline-offset: 0.35em;
}

.pillar-map__link a::after {
  content: "→";
  display: inline-block; /* inline-block には、親の下線が伸びない */
  margin-left: 0.3em;
  transition: transform 0.2s ease-out;
}

.pillar-map__link a:hover::after {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .pillar-map__link a::after {
    transition: none;
  }

  .pillar-map__link a:hover::after {
    transform: none;
  }
}

/* いまいる柱: 点線の枠と「いまここ」 */
.pillar-map__item--current .pillar-map__body {
  --p-dash-color: var(--p-line);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* 長い柱の名前（ビジネスフレームワーク）が「いまここ」の下にもぐらないよう、名前の右をあける */
.pillar-map__item--current .pillar-map__name {
  padding-right: 64px;
}

.pillar-map__body .pillar-map__here {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--p-accent);
  color: var(--p-white);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.7;
}

/* 改善の輪（3 から 1 へ戻る） */
.pillar-map__loop {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 760px;
  margin-inline: auto;
  --p-dash-color: var(--p-navy);
  position: relative;
  padding: 14px 18px;
  border: 1px solid transparent;
  border-radius: var(--p-radius);
  background: var(--p-white);
  font-size: 0.9375rem;
  line-height: 1.75;
}

.pillar-map__loop::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12a8 8 0 1 1-2.34-5.66M20 4v5h-5' fill='none' stroke='%23345887' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}

.pillar-map__loop strong {
  color: var(--p-navy-dark);
}

@media (min-width: 960px) {
  ol.pillar-map {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }

  /* 横の道: 3つの駅を1本のからし色の線でつなぐ */
  ol.pillar-map::before {
    content: "";
    position: absolute;
    top: calc(28px - var(--p-stroke-route) / 2);
    left: calc((100% - 56px) / 6);
    right: calc((100% - 56px) / 6);
    height: var(--p-stroke-route);
    border-radius: calc(var(--p-stroke-route) / 2);
    background: var(--p-route);
  }

  .pillar-map__item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    justify-items: center;
    align-items: stretch;
    gap: 18px;
  }

  .pillar-map__item:not(:last-child)::before {
    display: none;
  }

  .pillar-map__num {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
  }

  .pillar-map__body {
    width: 100%;
    padding: 22px;
  }
}

/* =========================================================
   5-5 市場からペルソナへの絞り込み（persona-zoom）。REQ-027
   市場 ⊃ ターゲット（客層）⊃ ペルソナ（1人）を入れ子の囲みで描き、段ごとに「かける言葉」と、その届き方を添える。
   絞るほど言葉がはっきりすることを、ひと目で示す。いちばん内側のペルソナを、青緑の枠と札で目立たせる（青緑は目印）。
   図の中の文字はすべて HTML。見た目の箱は、フレームワーク図（framework）にそろえる
   ========================================================= */

.persona-zoom {
  container-type: inline-size;
  padding: 16px 14px 18px;
  background: var(--p-faint);
  border: 1px solid #d9e1ec;
  border-radius: var(--p-radius-l);
}

/* 図の名前（上に置く。フレームワーク図と同じ形） */
.persona-zoom__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 14px;
  color: var(--p-navy-dark);
  font-size: 0.9375rem;
  font-weight: 900;
  line-height: 1.5;
}

.persona-zoom__caption::before {
  content: "";
  flex: none;
  width: 24px;
  height: var(--p-stroke-mark);
  border-radius: calc(var(--p-stroke-mark) / 2);
  background: var(--p-accent);
}

/* 段（入れ子の囲み）。外から 市場（白）→ ターゲット（薄い紺）→ ペルソナ（白、青緑の枠） */
.persona-zoom__level {
  padding: 12px 12px 14px;
  border: 1px solid #d3dce8;
  border-radius: var(--p-radius);
  background: var(--p-white);
  font-size: 0.875rem;
  line-height: 1.7;
}

.persona-zoom .persona-zoom__level > * {
  margin: 0;
}

.persona-zoom .persona-zoom__level > * + * {
  margin-top: 4px;
}

.persona-zoom .persona-zoom__level > .persona-zoom__level {
  margin-top: 12px;
}

.persona-zoom__level--market {
  background: var(--p-white);
}

.persona-zoom__level--target {
  border-color: #c9d5e5;
  background: var(--p-tint);
}

.persona-zoom__level--persona {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  border: 2px solid var(--p-accent);
  background: var(--p-white);
  box-shadow: var(--p-shadow);
}

/* ペルソナの段: 顔の右に札と名前、その下は幅いっぱい */
.persona-zoom__level--persona > * {
  grid-column: 1 / -1;
}

.persona-zoom__photo {
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  max-width: none;
  border-radius: 50%;
  background: #e1e8f1;
  box-shadow: 0 0 0 2px var(--p-white), 0 0 0 3px var(--p-line);
  object-fit: cover;
}

.persona-zoom .persona-zoom__level--persona > .persona-zoom__photo {
  grid-column: 1;
}

.persona-zoom .persona-zoom__level--persona > .persona-zoom__name,
.persona-zoom .persona-zoom__level--persona > .persona-zoom__who {
  grid-column: 2;
  margin-top: 0;
}

.persona-zoom .persona-zoom__level--persona > .persona-zoom__name {
  align-self: end;
}

.persona-zoom .persona-zoom__level--persona > .persona-zoom__who {
  align-self: start;
}

.persona-zoom .persona-zoom__level--persona > .persona-zoom__scene {
  margin-top: 8px;
}

/* 段の名前の札: 市場は薄い紺、ターゲットは紺、ペルソナは青緑（白の文字） */
.persona-zoom__name {
  width: fit-content;
  padding: 0 8px;
  border-radius: 4px;
  background: #dbe3ee;
  color: var(--p-navy-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.8;
}

.persona-zoom__name span {
  font-weight: 400;
}

.persona-zoom__level--target > .persona-zoom__name {
  background: var(--p-navy);
  color: var(--p-white);
}

.persona-zoom__level--persona > .persona-zoom__name {
  background: var(--p-accent);
  color: var(--p-white);
}

/* 誰か（市場とターゲットは客層、ペルソナは名前） */
.persona-zoom__who {
  color: var(--p-navy-dark);
  font-weight: 700;
}

/* ペルソナの困っている場面 */
.persona-zoom__scene {
  color: var(--p-text);
}

/* かける言葉 */
.persona-zoom__words {
  color: var(--p-navy-dark);
}

.persona-zoom__label {
  margin-right: 6px;
  color: var(--p-text-light);
  font-size: 0.75rem;
  font-weight: 700;
}

/* お客さんの反応（その言葉がどう届くか）。ペルソナの段だけ紺の太字 */
.persona-zoom__result {
  color: var(--p-text-light);
}

.persona-zoom__level--persona > .persona-zoom__result {
  color: var(--p-navy-dark);
  font-weight: 700;
}

/* 段のあいだの「どう絞ったか」。頭に、からし色の下向きの印（流れの線の色） */
.persona-zoom__narrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--p-text-light);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
}

.persona-zoom__narrow::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: -4px 3px 0 5px;
  border-right: var(--p-stroke-route) solid var(--p-route);
  border-bottom: var(--p-stroke-route) solid var(--p-route);
  transform: rotate(45deg);
}

.persona-zoom .persona-zoom__level > .persona-zoom__narrow {
  margin-top: 12px;
}

.persona-zoom .persona-zoom__level > .persona-zoom__narrow + .persona-zoom__level {
  margin-top: 6px;
}

/* 図の下の注記 */
.persona-zoom__note {
  margin: 12px 0 0;
  color: var(--p-text-light);
  font-size: 0.8125rem;
  line-height: 1.7;
}

/* 図が狭いとき（スマホ）は、「かける言葉」などの札を言葉の上の行に置き（言葉が札の後ろで細切れに折り返さないように）、
   入れ子の余白を詰めて、いちばん内側のペルソナの段の幅を広げる */
@container (max-width: 399px) {
  .persona-zoom__label {
    display: block;
  }

  .persona-zoom__level {
    padding: 10px 10px 12px;
  }
}

@media (max-width: 400px) {
  .persona-zoom {
    padding: 14px 10px 16px;
  }
}

@container (min-width: 560px) {
  .persona-zoom__level {
    padding: 14px 18px 16px;
    font-size: 0.9375rem;
  }

  .persona-zoom .persona-zoom__level > .persona-zoom__level {
    margin-top: 14px;
  }

  .persona-zoom__level--persona {
    grid-template-columns: 60px minmax(0, 1fr);
    column-gap: 14px;
  }

  .persona-zoom__photo {
    width: 60px;
    height: 60px;
  }
}

/* 広い画面では、図の幅を 720px までにして真ん中に置く（囲みが横に間延びしないように） */
@media (min-width: 640px) {
  .persona-zoom {
    max-width: 720px;
    margin-inline: auto;
    padding: 22px 24px 24px;
  }
}

/* =========================================================
   5-6 見比べ（persona-contrast）。REQ-029
   2つのやり方（売り手の文と課題の1文、未来を聞く質問と今を聞く質問など）を上下に並べ、行ごとの札
   （質問、返ってくる答え、わかること など）で比べる。下（よいほう）を青緑の枠と札で目立たせ、あいだに
   「どう変えたか」を、からし色の下向きの印と添える（印と札の形は persona-zoom と同じ）。図の中の文字はすべて HTML
   ========================================================= */

.persona-contrast {
  container-type: inline-size;
  padding: 16px 14px 18px;
  background: var(--p-faint);
  border: 1px solid #d9e1ec;
  border-radius: var(--p-radius-l);
}

.persona-contrast__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 14px;
  color: var(--p-navy-dark);
  font-size: 0.9375rem;
  font-weight: 900;
  line-height: 1.5;
}

.persona-contrast__caption::before {
  content: "";
  flex: none;
  width: 24px;
  height: var(--p-stroke-mark);
  border-radius: calc(var(--p-stroke-mark) / 2);
  background: var(--p-accent);
}

/* 比べる2つの囲み。上（--before）は白に細い枠、下（--after）は青緑の 2px の枠と影 */
.persona-contrast__side {
  padding: 12px 12px 14px;
  border: 1px solid #d3dce8;
  border-radius: var(--p-radius);
  background: var(--p-white);
  font-size: 0.875rem;
  line-height: 1.7;
}

.persona-contrast__side--before {
  background: var(--p-white);
}

.persona-contrast__side--after {
  border: 2px solid var(--p-accent);
  box-shadow: var(--p-shadow);
}

.persona-contrast .persona-contrast__side > * {
  margin: 0;
}

.persona-contrast .persona-contrast__side > * + * {
  margin-top: 8px;
}

/* 矢印（turn）を置かないときは、2つの囲みを少し離す（よい例と悪い例のように、順番ではなく比べるとき） */
.persona-contrast__side + .persona-contrast__side {
  margin-top: 14px;
}

/* 囲みの名前の札: 上は薄い紺、下は青緑（白の文字） */
.persona-contrast__name {
  width: fit-content;
  padding: 0 8px;
  border-radius: 4px;
  background: #dbe3ee;
  color: var(--p-navy-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.8;
}

.persona-contrast__side--after > .persona-contrast__name {
  background: var(--p-accent);
  color: var(--p-white);
}

/* 行。頭に行の役割の札（persona-contrast__label） */
.persona-contrast__row {
  color: var(--p-navy-dark);
}

.persona-contrast__label {
  margin-right: 6px;
  color: var(--p-text-light);
  font-size: 0.75rem;
  font-weight: 700;
}

/* まとめの行（わかること、見えてくること）: 薄い面に置いて、上の行（中身）と分ける。上は灰の面、下は青緑の薄い面に紺の太字 */
.persona-contrast .persona-contrast__side > .persona-contrast__row--result {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f1f3f6;
  color: var(--p-navy-dark);
}

.persona-contrast .persona-contrast__side--after > .persona-contrast__row--result {
  background: var(--color-teal-tint, #e7f2f1);
  font-weight: 700;
}

/* 2つのあいだの「どう変えたか」 */
.persona-contrast__turn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--p-navy-dark);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
}

.persona-contrast__turn::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin: -5px 3px 0 6px;
  border-right: var(--p-stroke-route) solid var(--p-route);
  border-bottom: var(--p-stroke-route) solid var(--p-route);
  transform: rotate(45deg);
}

.persona-contrast__note {
  margin: 12px 0 0;
  color: var(--p-text-light);
  font-size: 0.8125rem;
  line-height: 1.7;
}

/* 図が狭いとき（スマホ）は、行の札を言葉の上の行に置く */
@container (max-width: 399px) {
  .persona-contrast__label {
    display: block;
    margin-bottom: 1px;
  }
}

@container (min-width: 560px) {
  .persona-contrast__side {
    padding: 14px 18px 16px;
    font-size: 0.9375rem;
  }
}

@media (max-width: 400px) {
  .persona-contrast {
    padding: 14px 10px 16px;
  }
}

/* 広い画面では、図の幅を 720px までにして真ん中に置く */
@media (min-width: 640px) {
  .persona-contrast {
    max-width: 720px;
    margin-inline: auto;
    padding: 22px 24px 24px;
  }
}