@charset "UTF-8";   /* サーバーが文字コードなしで返すため、CSSをUTF-8として読ませる（設計意図SSOT §26） */
html { scroll-behavior: smooth; }

/* 変数（トークン）は tokens.css に置く（設計意図SSOT §34） */

/* 「動きを減らす」設定のときは、ページ全体の動き（表示の切り替え・点滅・なめらかなスクロール）を止める（設計意図SSOT §38） */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: var(--dur-reduced) !important; animation-duration: var(--dur-reduced) !important; animation-iteration-count: 1 !important; }
}

*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; }   /* ボタンなどは親の書体を受け継がない（既定は Arial など）。本文と同じ書体にする（設計意図SSOT §27 追記2） */
h1, h2, h3, h4 { word-break: auto-phrase; }   /* 見出しは文節の途中で折り返さない（lang="ja" のときに効く。設計意図SSOT §22・§24 ルール4） */
.diag-hook-q, .st-diag-section-head-title, .diag-q-text, .diag-result-title, .diag-form-title, .diag-forward-lead, .diag-cta-title, .calc-basis-title, .ai-badge,
.compare-3-head, .compare-head, .compare-3-value, .compare-item, .compare-3-conclusion, .compare-conclusion { word-break: auto-phrase; }   /* ⑤の見出しの役割の文（p・div）と比較の短い文も、文節の途中で折り返さない（設計意図SSOT §27 追記2） */
.card-title-text, .theme-rcard-catch, .idx-theme-title, .report-pager-label, .survey-meta-heading, .sol-title,
.rb-label, .gap-label, .gap-col-head, .miss-label, .css-donut-label, .ex-cl-nm, .ex-cl-head, .pain-scenario-tag, .cause-label,
.diag-check-label, .ex-cl-risk, .ex-cl-sub, .pain-scenario-source, .caption-accordion > summary, .gap-freq-kicker { word-break: auto-phrase; overflow-wrap: anywhere; }   /* 見出しの役目をする短い文（札の題・カードのキャッチ・図の項目名・選択肢など）も、文節の途中で折り返さない。入り切らない文節だけ、文節の中で折り返す（設計意図SSOT §58） */
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--slate);
  line-height: 1.7;
  background-color: var(--light);
  overflow-x: hidden;
}

/* ─── サイト共通ヘッダー ─── */
.st-util-bar {
  background: var(--shell-beige);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--slate);
}
.st-util-inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--space-2) var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.st-util-left, .st-util-right { display: flex; align-items: center; gap: var(--space-3); }
.st-util-bar a { color: var(--slate); text-decoration: none; font-size: var(--text-xs); }
.st-util-bar a:hover { text-decoration: underline; }
.st-util-sep { color: var(--border); }

.st-main-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 4px var(--bd);
}
.st-header-inner {
  padding: 0 var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 64px;
}
.st-logo { flex-shrink: 0; display: flex; align-items: center; }
.st-logo img { height: var(--logo-h); width: auto; display: block; }
.st-header-location {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--slate);
  letter-spacing: 0.08em;
  padding-left: var(--space-4);
  border-left: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
}
.st-header-location:hover { color: var(--navy); }
.st-header-about {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--slate);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.st-header-about:hover { background: var(--light); color: var(--navy); }
.st-nav-doc {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  color: var(--brand);
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.st-nav-doc:hover { background: var(--shell-beige); border-color: var(--border); }
.st-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  margin-left: auto;
}
.st-phone-block { text-align: right; line-height: 1.3; }
.st-phone-block a {
  color: var(--navy);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.st-phone-block small { font-size: var(--text-xs); color: var(--slate); display: block; }
.st-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--white);
  border: 1.5px solid var(--shell-acc);
  color: var(--shell-acc);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--dur-base), color var(--dur-base);
}
.st-contact-btn:hover {
  background: var(--shell-g) padding-box, var(--shell-g) border-box;
  color: var(--white);
}
.hdr-stripe {
  height: 3px;
  background: var(--shell-g);
  flex-shrink: 0;
}

/* ヘッダーは幅に応じて項目を順に隠し、横にはみ出さない（設計意図SSOT §26）。お問い合わせは常に残す */
@media (max-width: 1024px) {
  .st-header-about { display: none; }
}
@media (max-width: 900px) {
  .st-phone-block small { display: none; }
}
@media (max-width: 800px) {
  .st-header-location { display: none; }
}
@media (max-width: 600px) {
  .st-util-bar { display: none; }
  .st-phone-block { display: none; }
}
@media (max-width: 480px) {
  .st-header-inner { padding: 0 var(--space-4); gap: var(--space-3); }
  .st-logo img { height: var(--logo-h-sm); }
  .st-header-right .st-nav-doc { display: none; }
  .st-contact-btn { padding: var(--space-2) var(--space-3); }
}

/* ─── サイト共通フッター ─── */
.st-site-footer {
  background: var(--white);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  line-height: 1.8;
  margin-top: 0;
  position: relative;
  z-index: 300;
}
.st-footer-main {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--space-10) var(--space-5) var(--space-7);
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}
.st-footer-heading {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.st-footer-main p { margin: 0 0 var(--space-1); font-size: var(--text-xs); color: var(--slate); }
.st-footer-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.st-footer-nav-list a { color: var(--slate); text-decoration: none; font-size: var(--text-xs); }
.st-footer-nav-list a:hover { color: var(--brand); }
/* 左の列：サービスのロゴ → 運営会社の名前 → 認証マーク（設計意図SSOT §29） */
.st-footer-logo { display: inline-block; }
.st-footer-logo img { height: var(--logo-h-sm); width: auto; display: block; }
.st-footer-main .st-footer-company { margin: var(--space-2) 0 var(--space-4); font-size: var(--text-xs); color: var(--slate); }
.st-footer-marks { display: flex; gap: var(--space-3); align-items: center; }
.st-footer-marks img { display: block; height: 44px; width: auto; }
.st-footer-bottom {
  border-top: 1px solid var(--border);
  text-align: center;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-xs);
  color: var(--muted);
}
@media (max-width: 768px) {
  .st-footer-main { grid-template-columns: 1fr 1fr; gap: var(--space-6); padding: var(--space-8) var(--space-4) var(--space-6); }
}
@media (max-width: 480px) {
  .st-footer-main { grid-template-columns: 1fr; }
}

/* ─── レイアウト共通 ─── */

.report-layout {
  padding-bottom: var(--space-16);
}
.report-main {
  padding-top: 0;
  min-width: 0;
}

/* ─── 調査概要テーブル ─── */
.survey-allq {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.survey-allq > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--slate);
  background: var(--light);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  user-select: none;
}
.survey-allq > summary::-webkit-details-marker { display: none; }
.survey-allq > summary::before {
  content: '\25B6';
  font-size: var(--text-xs);
  transition: transform var(--dur-base);
  display: inline-block;
  color: var(--slate);
}
.survey-allq[open] > summary::before { transform: rotate(90deg); }
.survey-allq[open] > summary {
  border-bottom: 1px solid var(--border);
}
.survey-allq-body {
  padding: var(--space-2) var(--space-4) var(--space-4);
  background: var(--white);
}
.report-cite {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-4);
}
.survey-q-block {
  border-bottom: 1px solid var(--border);
  padding: var(--space-3) 0 var(--space-1);
}
.survey-q-block:last-child {
  border-bottom: none;
}

/* ─── セクション共通 ─── */
.report-section {
  background-color: var(--white);
  padding: var(--space-10);
  margin: var(--space-6) 0;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  scroll-margin-top: 80px;
}
.section-title {
  font-size: var(--text-h2);
  color: var(--navy);
  margin-top: 0; /* 上の余白は枠（.report-section）の内側余白だけにする。h2の標準の上余白を足さない（設計意図SSOT §19） */
  margin-bottom: var(--space-8);
  padding-left: var(--space-2);
  border-left: 3px solid var(--border);
  font-weight: 700;
}
/* 見出しの直後の調査の見出しリンクは上余白を持たない（見出しの下の余白と足し算にしない。冒頭のH1の下では20pxのまま） */
.section-title + .survey-meta-heading { margin-top: 0; }
.intro-heading {
  font-size: var(--text-h2);
  color: var(--navy);
  margin-bottom: 0;
  padding-left: var(--space-2);
  border-left: 3px solid var(--border);
  font-weight: 700;
}

/* ─── テーマ一覧：インデックス型グリッド（カード形式は廃止・2026-09-22） ─── */
.idx-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-bottom: none;
  margin: 0 0 var(--space-6);
}
.idx-theme-cell {
  position: relative;
  overflow: hidden;
  min-height: 168px;
  display: block;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border);
}
.idx-theme-cell:nth-child(odd) { border-right: 1px solid var(--border); }
.idx-theme-cell:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: none; }   /* 最後の行に1つだけ残る枠は2列分に広げる（公開中のテーマが1つ・3つのとき。設計意図SSOT §67 ルール5） */
.idx-theme-thumb {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 58%;
  background-image: linear-gradient(to right, var(--white) 0%, var(--white-a00) 42%, var(--white-a00) 100%),
                     var(--hero-img);
  background-size: cover;
  background-position: center;
}
@media (max-width: 720px) {
  .idx-theme-grid { grid-template-columns: 1fr; }
  .idx-theme-cell { min-height: 0; }
  .idx-theme-cell:nth-child(odd) { border-right: none; }
  .idx-theme-thumb {
    position: static;
    width: 100%;
    height: 140px;
    background-image: linear-gradient(to top, var(--white) 0%, var(--white-a00) 55%), var(--hero-img);
  }
  .idx-theme-body { max-width: 100% !important; padding-top: var(--space-4); }
}
/* ─── ヒーロー上部：テキストと画像 ─── */
/* 画像の枠は3:2に固定する。写真を切るのは縦横比を合わせるときだけで、切る位置は中央（設計意図SSOT §14）。
   721px以上では、画像をヒーローの帯（.theme-hero）の右上＝ページの右端に置き、帯の高さいっぱいまで伸ばす。右上の円の飾りが上に重なる（§18）。
   そのため .theme-hero-inner と .theme-hero-top-grid は位置の基準にしない（position を持たせない） */
.theme-hero-top-grid {
  /* ヒーロー画像の幅の上限＝見出しの列に重ならない幅（§18の表）。高さの上限（×2/3）もここから決まる */
  --hero-thumb-max-w: 460px;
}
@media (min-width: 1100px) {
  .lnav-main:has(.report-aside-nav) .theme-hero-top-grid { --hero-thumb-max-w: 600px; } /* ノート：右端の固定目次ぶんの余白がある */
}
@media (min-width: 1280px) {
  .theme-hero-top-grid { --hero-thumb-max-w: 540px; }
}
@media (min-width: 1400px) {
  .theme-hero-top-grid,
  .lnav-main:has(.report-aside-nav) .theme-hero-top-grid { --hero-thumb-max-w: 660px; }
}
.hero-thumb {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  max-width: var(--hero-thumb-max-w);
  max-height: calc(var(--hero-thumb-max-w) * 2 / 3); /* 高さだけが文字に合わせて伸びると枠が正方形に近づき、写真の右側が切れていた */
  aspect-ratio: 3 / 2;
  background-image: linear-gradient(to right, var(--white) 0%, var(--white-a00) 50%, var(--white-a00) 100%),
                     var(--hero-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-text-block {
  position: relative;
  z-index: 1;
  /* 見出しの列の右端を、画像の幅の上限の左端（ページ右端 − --hero-thumb-max-w）に合わせる（設計意図SSOT §18 原則4）。
     100%＝本文の列の幅、100vw − 左ナビ − 左の余白 − 画像の上限幅＝見出しの列に使える幅。
     100vwはスクロールバーの幅を含むため、スクロールバーが幅を取る環境では最大約17px画像側に寄る（画像の左端は白いぼかしで見えない） */
  padding-right: max(0px, calc(100% - (100vw - var(--lnav-w) - var(--main-gutter) - var(--hero-thumb-max-w))));
}
@media (max-width: 900px) {
  .theme-hero-top-grid { --hero-thumb-max-w: 320px; }
  .hero-text-block { padding-right: 280px; }
}
@media (max-width: 720px) {
  .hero-thumb { position: static; margin-bottom: var(--space-4); }
  .hero-text-block { padding-right: 0; }
}
/* ノートのタイトルは画像の幅の1/4（白いぼかしの濃い側）まで重ねる。見出しの列の右端＝画像の幅の上限の左から1/4（§18 原則5）。
   テーマページは説明文・調査概要の長い文が画像に載るため重ねない（上の原則4のまま）。720px以下は画像が見出しの上に来るため対象外 */
@media (min-width: 901px) {
  .lnav-main:has(.report-aside-nav) .hero-text-block {
    padding-right: max(0px, calc(100% - (100vw - var(--lnav-w) - var(--main-gutter) - var(--hero-thumb-max-w) * 3 / 4)));
  }
}
@media (min-width: 721px) and (max-width: 900px) {
  .lnav-main:has(.report-aside-nav) .hero-text-block { padding-right: calc(var(--hero-thumb-max-w) * 3 / 4 - var(--main-gutter)); }
}
.idx-theme-body {
  position: relative;
  z-index: 1;
  padding: var(--space-6) var(--space-6);
  max-width: 56%;
}
.idx-theme-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.5;
  margin-bottom: var(--space-2);
}
.idx-theme-sub {
  font-size: var(--text-xs);
  color: var(--mu);
  line-height: 1.7;
  font-weight: 400;
  margin-bottom: var(--space-4);
}
.idx-theme-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--mu);
  padding-bottom: 1px;
  border-bottom: 1px solid var(--black-a10);
  transition: color var(--dur-fast), gap var(--dur-fast);
}
.idx-theme-cell:hover .idx-theme-link { color: var(--shell-acc); gap: var(--space-2); border-bottom-color: var(--shell-acc); }

/* ─── フルCTAセクション ─── */
.report-cta {
  margin: 0 calc(-1 * var(--main-gutter));
  padding: var(--space-12) var(--band-pad-end) var(--space-12) var(--main-gutter);
  background: var(--shell-g135);
  position: relative;
  overflow: hidden;
}
.report-cta::before {
  content: '';
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 220px;
  height: 220px;
  border-radius: var(--radius-circle);
  border: 28px solid var(--white-a08);
  pointer-events: none;
}
.report-cta::after {
  content: '';
  position: absolute;
  right: 80px;
  top: -40px;
  width: 100px;
  height: 100px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--white-a08);
  pointer-events: none;
}
.report-cta-inner {
  position: relative;
  z-index: 1;
}
.report-cta-eye {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--white-a70);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
}
.report-cta-h {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--white);
  line-height: 1.6;
  margin-bottom: var(--space-2);
}
.report-cta-sub {
  font-size: var(--text-xs);
  color: var(--white-a70);
  line-height: 1.8;
  margin-bottom: var(--space-8);
}
.report-cta-btns {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.report-cta-btn-a {
  background: var(--white);
  color: var(--shell-acc);
  font-size: var(--text-base);
  font-weight: 700;
  padding: var(--space-3) var(--space-7);
  border: none;
  border-radius: var(--radius-xs);
  text-decoration: none;
  display: inline-block;
  transition: opacity var(--dur-fast);
}
.report-cta-btn-a:hover { opacity: .9; text-decoration: none; color: var(--shell-acc); }
.report-cta-btn-b {
  background: var(--white-a15);
  color: var(--white);
  font-size: var(--text-base);
  font-weight: 400;
  padding: var(--space-3) var(--space-6);
  border: 1.5px solid var(--white-a50);
  border-radius: var(--radius-xs);
  text-decoration: none;
  display: inline-block;
  transition: background var(--dur-fast);
}
.report-cta-btn-b:hover { background: var(--white-a25); text-decoration: none; color: var(--white); }
@media (max-width: 600px) {
  .report-cta { padding: var(--space-10) var(--space-5); }
  .report-cta-h { font-size: var(--text-lg); }
  .report-cta-btns { flex-direction: column; }
  .report-cta-btn-a, .report-cta-btn-b { text-align: center; }
}

/* ─── パンくずナビ ─── */
.breadcrumb {
  margin: 0 calc(-1 * var(--main-gutter));
  padding: 0 var(--band-pad-end) 0 var(--main-gutter);
  border-bottom: 1px solid var(--border);
  background: var(--light);
}
.breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--slate);
}
.breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  margin: 0 var(--space-2);
  color: var(--slate);
}
.breadcrumb-item a {
  color: var(--slate);
  text-decoration: none;
  font-weight: 400;
}
.breadcrumb-item a:hover {
  color: var(--navy);
  text-decoration: underline;
}
.breadcrumb-item--current span {
  color: var(--navy);
  font-weight: 700;
}

/* ─── ヒーロー eyebrow（個別レポートページ・2026-07-21）─── */
.thrb-eyebrow {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2); margin-bottom: var(--space-4);
}
.thrb-num-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--navy);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

/* ─── テーマページ ヒーロー ─── */
.theme-hero {
  margin: 0 calc(-1 * var(--main-gutter));
  padding: var(--space-10) var(--band-pad-end) var(--space-8) var(--main-gutter);
  position: relative;
  overflow: hidden;
  background-color: var(--white);
  background-image: radial-gradient(circle, var(--black-a05) 1.2px, transparent 1.2px);
  background-size: 28px 28px;
}
@keyframes theme-arc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes theme-arc2-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
.theme-hero-arc {
  position: absolute; right: -60px; top: -60px;
  width: 200px; height: 200px; border-radius: var(--radius-circle);
  border: 24px solid var(--bd); pointer-events: none;
  transform-origin: center;
  z-index: 2;
}
.theme-hero-inner { position: static; } /* ヒーロー画像の位置の基準を帯（.theme-hero）にするため、ここでは position を持たせない（§18）。文字は .hero-text-block の z-index で画像より前に出る */
.theme-hero-eye-block { padding-bottom: var(--space-4); }
.theme-hero-eye {
  font-size: var(--text-h1); letter-spacing: .01em;
  color: var(--navy); font-weight: 700;
  flex-shrink: 0; line-height: 1.5; margin: 0;
}
/* 最終子ルール: overflow:hiddenの親はmargin-bottomが加算されるためリセット */
.theme-hero-inner > *:last-child { margin-bottom: 0; }
.theme-hero-h1 {
  font-size: var(--text-h1); font-weight: 700; line-height: 1.55;
  color: var(--navy); margin-bottom: var(--space-4);
}
/* 見出しはGEO問いとキャッチを2行に分ける（ダッシュでつながない） */
.theme-hero-h1-q,
.theme-hero-h1-a { display: block; }
.theme-hero-eye-block + * {
  border-top: 0.5px solid var(--bd);
  padding-top: var(--space-4);
}

/* ─── 前後ナビ ─── */
.sibling-nav-cards {
  margin: var(--space-8) 0 var(--space-2);
}
.sibling-nav-cards .sibling-nav-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-2);
  color: var(--shell-blu);
}
.sibling-nav-cards .theme-report-cards {
  margin: 0;
}

.report-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  align-items: center;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.report-pager-index {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--navy);   /* 前後のノートのリンクと同じ（§35） */
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  white-space: nowrap;
  text-align: center;
}
.report-pager-index:hover { background: var(--light); }
.report-pager-prev { text-align: left; }
.report-pager-next { text-align: right; }
.report-pager-link {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: background var(--dur-fast), border-color var(--dur-fast);
  max-width: 220px;
}
.report-pager-link:hover { background: var(--brand-light); border-color: var(--border); }
.report-pager-dir { font-size: var(--text-xs); color: var(--muted); font-weight: 500; }
.report-pager-label { font-size: var(--text-xs); color: var(--navy); font-weight: 500; line-height: 1.4; }
.report-pager-link--next { align-items: flex-end; }
@media (max-width: 600px) {
  .report-pager { grid-template-columns: 1fr 1fr; }
  .report-pager-index { display: none; }
  .report-pager-next { text-align: right; }
}

/* ─── 準備中表示 ─── */
.report-coming-soon {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--slate);
}
.report-coming-soon-icon { font-size: var(--text-h1); margin-bottom: var(--space-4); }
.report-coming-soon-title { font-size: var(--text-base); font-weight: 700; color: var(--navy); margin: 0 0 var(--space-2); }
.report-coming-soon-desc { font-size: var(--text-base); line-height: 1.8; margin: 0; }
.report-coming-soon-desc a { color: var(--accent); }

/* ─── ヒーロー数値バンド ─── */

@media (max-width: 768px) {
  .report-section { padding: var(--space-6) var(--space-4); }
}

/* ─── グラフィック2カラム ─── */
.graphic-row {
  display: grid;
  grid-template-columns: 11fr 9fr;
  gap: 0 var(--space-10);
  align-items: stretch;
  margin-bottom: var(--space-8);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden; 
}
.graphic-row > .graphic-left  { 
  padding: var(--space-6) 0 var(--space-10) var(--space-10); 
  min-height: 380px; 
  min-width: 0; 
  display: flex; 
  flex-direction: column; 
  gap: var(--space-5); 
  justify-content: center; 
}
.graphic-row > .graphic-right { 
  padding: var(--space-6) var(--space-10) var(--space-10) 0; 
  min-height: 380px; 
  min-width: 0; 
  display: flex; 
  align-items: center; 
}
.graphic-row .caption-accordion {
  grid-column: 1 / -1;
  margin: 0; 
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--brand-light);
}
.graphic-row .caption-accordion > summary {
  background: var(--light);
  color: var(--slate);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-8); 
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  cursor: pointer;
  list-style: none;
}
.graphic-row .caption-accordion > summary::-webkit-details-marker { display: none; }
.graphic-row .caption-accordion > summary::before {
  content: '\25B6';
  font-size: var(--text-xs);
  color: var(--slate);   /* 開閉の文字と同じ（§35） */
  margin-right: var(--space-2);
  margin-left: -18px;
  display: inline-block;
  transition: transform var(--dur-base);
}
.graphic-row .caption-accordion[open] > summary::before { transform: rotate(90deg); }
.graphic-row .caption-accordion > summary:hover {
  background: var(--border);
}
.graphic-row .caption-accordion[open] > summary {
  border-radius: 0;
  border-bottom: 1px solid var(--border);
}
.graphic-row .caption-accordion-body {
  padding: var(--space-6) var(--space-8);
  background: var(--brand-light);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.graphic-right h4 {
  font-size: var(--text-claim);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin: 0 0 var(--space-6);
  width: 100%;
  padding: 0;
  letter-spacing: -0.03em;
}
.graphic-right h4::before { display: none; }
.graphic-caption,
div.graphic-caption {
  font-size: var(--text-base);
  color: var(--slate);
  line-height: 1.85;
  margin: 0 0 var(--space-4);
}
div.graphic-caption p { margin: 0; }

@media (max-width: 768px) {
  .graphic-row { 
    grid-template-columns: 1fr; 
    gap: var(--space-6) 0;
  }
  .graphic-row > .graphic-left { 
    padding: 0 var(--space-5) var(--space-6); 
    min-height: auto; 
  }
  .graphic-row > .graphic-right { 
    padding: 0 var(--space-5) var(--space-6); 
    min-height: auto; 
  }
  .graphic-row > .graphic-card-header {   /* 基本の決まり（あとに書いた左右 40px）に負けないよう、強さを上げる（設計意図SSOT §58） */
    padding: var(--space-6) var(--space-5) 0; 
    flex-wrap: wrap;   /* 題が札の横に入り切らないときは、札の下の行に送る（§58） */
    row-gap: var(--space-2);
  }
  .graphic-row .caption-accordion > summary {
    padding: var(--space-3) var(--space-5) var(--space-3) var(--space-7);
  }
  .graphic-row .caption-accordion-body {
    padding: var(--space-5);
  }
}

.report-section:has(.graphic-row),
.report-section:has(.insight-cards) {
  background: transparent;
  border: none;
  padding: 0;
}
.insight-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

/* ─── n数バッジ ─── */
.data-n-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--white);
  background: var(--navy);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-xs);
  letter-spacing: .04em;
  align-self: flex-start;
}

/* ─── CSSドーナツチャート ─── */
.css-donut-navy {
  width: 190px;
  height: 190px;
  border-radius: var(--radius-circle);
  background: conic-gradient(
    var(--accent) 0% var(--donut-pct, 50%),
    var(--border) var(--donut-pct, 50%) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  box-shadow: 0 6px 20px var(--black-a10);
}
.css-donut-center {
  width: 130px;
  height: 130px;
  border-radius: var(--radius-circle);
  background: var(--brand-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2);
}
.css-donut-num {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}
.css-donut-subnum {
  font-size: var(--text-xs);
  color: var(--slate);
  line-height: 1.4;
  margin-top: 3px;
}
.css-donut-label {
  font-size: var(--text-xs);
  color: var(--slate);
  line-height: 1.4;
  margin-top: 3px;
  font-weight: 500;
}

/* ─── 凡例ボックス ─── */
.legend-box { display: flex; flex-direction: column; gap: var(--space-2); }
.legend-item { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); /* 部品の中の文（§25） */ color: var(--slate); line-height: 1.5; }
.legend-color { width: 12px; height: 12px; border-radius: var(--radius-xs); flex-shrink: 0; margin-top: 2px; }
.legend-color-accent { background: var(--accent); }
.legend-color-gray { background: var(--border); }

/* ─── 構造ギャップ図 ─── */
.gap-compare {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.gap-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.gap-col-head {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  text-align: center;
  margin-bottom: 2px;
}
.gap-col--before .gap-col-head {
  background: var(--light);
  color: var(--navy);
}
.gap-col--after .gap-col-head {
  background: color-mix(in srgb, var(--shell-blu) 10%, var(--white));
  color: var(--shell-blu);
}
.gap-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--light);
}
.gap-label {
  font-size: var(--text-sm);   /* 部品の中の項目名（§25） */
  color: var(--navy);
  line-height: 1.4;
  flex: 1;
}
.gap-pct {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}
.gap-arrow {
  font-size: var(--text-lg);
  color: var(--slate);
  padding-top: var(--space-8);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .gap-compare { flex-direction: column; }
  .gap-arrow { padding-top: 0; transform: rotate(90deg); align-self: center; }
}

/* ─── ペインシナリオ ─── */
/* ④の場面は箱で囲まない。節がすでに枠のため、場面の間の線だけにする（③と同じ。設計意図SSOT §25・§39） */
.pain-scenarios {
  display: flex;
  flex-direction: column;
}
.pain-scenario {
  display: grid;
  grid-template-columns: 68px 1fr;
  padding: var(--space-3) 0;
}
.pain-scenario:not(:last-child) { border-bottom: 1px solid var(--border); }
.pain-scenario-anchor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
  gap: 2px;
}
.pain-scenario-note { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--slate); line-height: 1.6; }   /* ④の場面が作った例だと分かる注（設計意図SSOT §62） */
.pain-scenario-anchor-num {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.pain-scenario-anchor-sub {
  font-size: var(--text-xs);
  color: var(--slate);
  line-height: 1.2;
  text-align: center;
}
.pain-scenario-body {
  padding: 0 0 0 var(--space-4);
}
.pain-scenario-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--shell-blu);
  background: color-mix(in srgb, var(--shell-blu) 8%, var(--white));
  border: 1px solid color-mix(in srgb, var(--shell-blu) 20%, var(--white));
  padding: 1px var(--space-2);
  border-radius: var(--radius-xs);
  margin-bottom: var(--space-1);
  letter-spacing: 0.04em;
}
.pain-scenario-source {   /* 「この数字：『（選択肢の言葉）』を選んだ人」（設計意図SSOT §25） */
  font-size: var(--text-xs);
  color: var(--slate);
  line-height: 1.5;
  margin: 0 0 var(--space-1);
}
.pain-scenario-text {
  font-size: var(--text-sm);   /* 部品の中の文（§25） */
  color: var(--navy);
  line-height: 1.6;
  margin: 0;
}
.pain-scenario-text strong {
  color: var(--navy);
}

/* ─── 統計ローデータ ─── */
.data-q {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.7;
  margin: var(--space-5) 0 var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-left: 3px solid var(--border);   /* 地と角丸は付けない（設計意図SSOT §39） */
}
.data-text { color: var(--slate); line-height: 1.5; }
.data-pct { font-weight: 700; color: var(--navy); text-align: right; white-space: nowrap; }
.data-val { color: var(--slate); text-align: right; white-space: nowrap; font-size: var(--text-xs); }
/* 調査データの表（設計意図SSOT §61 ルール15。旧 .data-a の一覧と同じ見た目）：左右の余白8px・列の間8px・割合の列60px・票数の列52px。1行ずつの箱にしない（§39） */
.data-table { width: 100%; border-collapse: collapse; margin: var(--space-5) 0 var(--space-2); font-size: var(--text-base); }   /* 設問の上の余白は表に持たせる（前の表の下の余白と重ねるため。題の余白は表の内側で重ならない） */
.data-table caption.data-q { margin-top: 0; text-align: left; }
.data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* 列の見出しは画面に出さない（読み上げと機械のため） */
.data-table tbody tr { border-bottom: 1px solid var(--border); }   /* 行の間の線だけ（§39） */
.data-table tbody th, .data-table tbody td { padding: var(--space-2) 0 var(--space-2) var(--space-2); vertical-align: middle; }
.data-table tbody th { font-weight: 400; text-align: left; }
.data-table .data-pct { width: calc(60px + var(--space-2)); }
.data-table .data-val { width: calc(52px + var(--space-2) * 2); padding-right: var(--space-2); }

/* ─── 調査概要内 全設問データ ─── */
.report-details-viz {
  border: none;
  margin-bottom: 0;
}
.report-details-summary { margin-bottom: var(--space-2); }
.report-details-viz > summary,
.report-details-viz > .report-details-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.report-details-viz > summary { margin-bottom: var(--space-5); }
.report-details-viz > .report-details-summary { margin-bottom: var(--space-2); }
.report-details-viz > summary::-webkit-details-marker { display: none; }
.report-details-viz > summary .section-title { margin: 0; }

.caption-accordion {   /* 枠線・色・余白は .graphic-row .caption-accordion で決める（全部が節のカードの中。設計意図SSOT §39） */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  align-self: stretch;
  overflow: hidden;
}
.caption-accordion > summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  user-select: none;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.caption-accordion > summary::-webkit-details-marker { display: none; }
.caption-accordion > summary::before {
  content: '\25B6';
  font-size: var(--text-xs);
  transition: transform var(--dur-base);
  display: inline-block;
}
.caption-accordion[open] > summary::before { transform: rotate(90deg); }
.caption-accordion-body .graphic-caption {
  margin: 0;
  padding: 0 0 var(--space-3);
  background: none;
  border: none;
  border-radius: 0;
}

.section-title svg {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  margin-right: var(--space-2);
  flex-shrink: 0;
}
.intro-heading svg {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  margin-right: var(--space-2);
  flex-shrink: 0;
}

.compare-col {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}

/* ⑤診断の部品：オレンジはデータと主なボタン（お問い合わせ）だけ。ほかは --navy などにする（設計意図SSOT「カラー設計原則」） */
.diag-tool-card { --theme-color: var(--navy); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; scroll-margin-top: 80px; }
.diag-tool-card .st-diag-section-head { margin-top: 0; border-left: none; border-right: none; border-top: none; border-radius: 0; border-bottom: 1px solid var(--border); background: var(--white); }
.diag-tool-card .diag-hook-card { border: none; border-radius: 0; margin: 0; background: var(--light); }
.diag-tool-card .interactive-selector { margin: 0; background: var(--light); padding: 0 var(--space-3); gap: 0; }   /* タブの並びの地（左右の余白を含む）は上の問いかけの帯と同じ薄い地。選んでいるタブ（白地）だけが下の画面とつながる（設計意図SSOT §27） */
.diag-tool-card .interactive-selector .select-tab-btn:not(:last-child) { border-right: none; }
.diag-tool-card .select-tab-btn { border-radius: 0; background-color: var(--light); }   /* 選んでいないタブは薄い地。選んでいるタブは .select-tab-btn.active（白地・上の濃い線）。2つとも同じ形（設計意図SSOT §27） */
.diag-tool-card .diag-wrapper { border: none; border-radius: 0; }

.diag-hook-card {
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-6) var(--space-8);
  margin: 0 0 var(--space-5);
}
.diag-hook-q {
  font-size: var(--text-xl);
  color: var(--navy);
  line-height: 1.6;
  margin: 0 0 var(--space-2);
}
.diag-hook-q strong { color: var(--navy); }
.diag-hook-hint {
  font-size: var(--text-xs);
  color: var(--slate);
  margin: 0 0 var(--space-4);
}
.diag-hook-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.diag-hook-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--shell-blu);
  background: color-mix(in srgb, var(--shell-blu) 10%, var(--white));
  border: 1px solid color-mix(in srgb, var(--shell-blu) 25%, var(--white));
  padding: 3px var(--space-2);
  border-radius: var(--radius-lg);
}
@media (max-width: 640px) {
  .diag-hook-card { padding: var(--space-4) var(--space-5); }
}

.diag-score-display { margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--light); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.dsm-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }   /* 入りきらなければ札を得点の下へ（設計意図SSOT §65 の 9） */
.dsm-label-text { font-size: var(--text-xs); font-weight: 700; color: var(--slate); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-1); }
.dsm-score-num { font-size: var(--text-h1); font-weight: 700; color: var(--navy); line-height: 1; }
.dsm-score-num span { font-size: var(--text-xs); font-weight: 500; color: var(--slate); }
.dsm-bar-wrap { height: 8px; background: var(--border); border-radius: var(--radius-xs); overflow: hidden; margin-bottom: var(--space-2); }
.dsm-bar { height: 100%; width: 0; border-radius: var(--radius-xs); transition: width var(--dur-bar) var(--ease-out); }
.dsm-level-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-xs); font-size: var(--text-xs); font-weight: 700; max-width: 100%; }   /* 札の文字は枠の幅で折り返す（設計意図SSOT §65 の 9。旧 white-space: nowrap） */
/* 診断ツール（ノート別・2026-09-25）で足した部品。値はトークンで書く（設計意図SSOT「⑥診断コンポーネント」画面の部品） */
.dsm-level-badge.is-high { color: var(--sem-danger); background: var(--sem-danger-bg); border: 1px solid var(--sem-danger); }
.dsm-level-badge.is-mid  { color: var(--warning); background: var(--warning-bg); border: 1px solid var(--warning-bdr); }
.dsm-level-badge.is-low  { color: var(--sem-ok); background: var(--sem-ok-bg); border: 1px solid var(--sem-ok-bdr); }
.dsm-bar.is-high { background: var(--sem-danger); }
.dsm-bar.is-mid  { background: var(--sem-warn); }
.dsm-bar.is-low  { background: var(--sem-ok); }
/* 診断の点数の向き（2026-10-07）：高いほど「確認が必要な点が多い」。色の意味を知らなくても読めるよう、数字の下に言葉・帯の下に区間名を置く（設計意図SSOT §79） */
.dsm-direction { font-size: var(--text-xs); color: var(--slate); margin: 0 0 var(--space-2); line-height: 1.5; text-align: left; text-wrap: balance; }   /* 折り返すときは行をそろえる（最後の1〜2文字だけが次の行に落ちない）。未対応のブラウザは今までどおり */
.dsm-scale { display: flex; width: 100%; gap: 0; margin-bottom: var(--space-1); }
.dsm-scale-seg { box-sizing: border-box; padding-top: var(--space-1); font-size: var(--text-xs); line-height: 1.4; color: var(--slate); border-top: 3px solid var(--border); text-align: left; word-break: keep-all; overflow-wrap: anywhere; }   /* 入りきらない狭い幅だけ、語の途中で折る（区間名が隣と重ならないように） */
.dsm-scale-seg + .dsm-scale-seg { padding-left: var(--space-1); }   /* 区間名の間の余白は、右でなく隣の区間の左に持たせる（先頭の30%の幅に、6文字の区間名が 360px でも収まるように） */
.dsm-scale-seg.is-low  { border-top-color: var(--sem-ok); }
.dsm-scale-seg.is-mid  { border-top-color: var(--sem-warn); }
.dsm-scale-seg.is-high { border-top-color: var(--sem-danger); }
.dsm-scale-seg.is-now  { color: var(--navy); font-weight: 700; }
.dsm-top > div { text-align: left; }
.dsm-br { display: none; }   /* 区間名の中の改行は、狭い幅だけ効かせる（広い幅では1行に収まるため） */
@media (max-width: 480px) { .dsm-top { flex-direction: column; align-items: flex-start; gap: var(--space-2); } .dsm-br { display: inline; } }   /* 狭い幅は、得点と札を縦に並べる（§65 の 9 の続き） */
/* ⑤の結果の画面の各まとまりの見出しは、同じ大きさ（18px）・太字・左寄せ（設計意図SSOT §27 追記） */
.diag-result-title { font-size: var(--text-lg); font-weight: 700; color: var(--navy); text-align: left; margin-bottom: var(--space-3); }
.diag-done { font-size: var(--text-sm); font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--space-3); }
.diag-form-title { font-size: var(--text-lg); font-weight: 700; color: var(--navy); text-align: left; margin: 0 0 var(--space-3); }   /* 比較の見出し。ほかの見出しと同じく下線は引かない（§27 追記2） */
/* 試算への案内は、お問い合わせ（.diag-cta）と同じ間隔：見出し→文 8px、文→ボタン 20px（§27 追記2） */
.diag-forward-lead { font-size: var(--text-lg); font-weight: 700; color: var(--navy); margin: 0 0 var(--space-2); }
.diag-forward-sub { font-size: var(--text-sm); color: var(--slate); margin: 0 0 var(--space-5); }
.diag-basis-formula { margin-top: var(--space-3); border-top: 1px dashed var(--border); padding-top: var(--space-3); }
.diag-basis-formula .calc-formula { display: block; margin-top: var(--space-1); font-weight: 400; color: var(--slate); }
.diag-basis-note { display: block; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--muted); }
.diag-basis-total { color: var(--navy); font-size: var(--text-base); }
.diag-sim-body { margin-top: var(--space-4); }
/* 元のツールの style="color: …" を置き換える。既存の .compare-3-col:not(.highlight) .compare-3-value などより優先させる */
.compare-3-container .compare-3-col .compare-3-value.is-muted, .compare-container .compare-col .compare-item.is-muted { color: var(--slate); }
.compare-3-container .compare-3-col .compare-3-value.is-accent, .compare-container .compare-col .compare-item.is-accent { color: var(--shell-blu); font-weight: 500; }   /* 強調する行は青の文字だけ。太字にしない（§27 追記2） */
.diag-cta { background: none; border: none; border-top: 1px solid var(--border); border-radius: 0; padding: var(--space-6) 0 0; margin-top: var(--space-4); text-align: left; }
.diag-cta.is-warm { margin-top: var(--space-6); }
.diag-cta-title { font-size: var(--text-lg); font-weight: 700; color: var(--navy); margin: 0 0 var(--space-2); }
.diag-cta-text { font-size: var(--text-sm); color: var(--slate); line-height: 1.7; margin: 0 0 var(--space-5); }
/* ボタンの文字は1行に収める。並びきらないときはボタンごと次の行へ送る（設計意図SSOT「④ CTA」共通ルール） */
.diag-cta-btns { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.diag-cta-main, .diag-cta-sub { flex: 1 1 auto; white-space: nowrap; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; border-radius: var(--radius-xs); padding: var(--space-4); font-weight: 700; }
.diag-cta-main { background: var(--accent); color: var(--white); font-size: var(--text-base); }
.diag-cta-main:hover { background: var(--accent-dark); color: var(--white); text-decoration: none; }
.diag-cta-sub { background: var(--white); color: var(--navy); border: 1px solid var(--border); font-size: var(--text-sm); }
.diag-cta-sub:hover { border-color: var(--slate); color: var(--navy); text-decoration: none; }
@media (max-width: 640px) {
  .diag-cta-btns { flex-direction: column; }
  .diag-cta-main, .diag-cta-sub { padding-inline: var(--space-2); }   /* 幅320pxでも文字を1行に収める（本文の左右の余白16pxを引いた箱の幅246pxに収める） */
}
.diag-reset { background: none; border: 1px solid var(--border); color: var(--slate); padding: var(--space-2) var(--space-6); border-radius: var(--radius-xs); font-size: var(--text-sm); cursor: pointer; margin-top: var(--space-3); }
.diag-reset:hover { border-color: var(--slate); color: var(--navy); }
.diag-actions { text-align: center; }

.interactive-selector { display: flex; gap: var(--space-3); margin: 0 0 var(--space-4); border-bottom: 2px solid var(--border); padding-bottom: 0; }
.select-tab-btn small { font-size: var(--text-sm); }   /* 既定の smaller（13.3px）は目盛りに無いため（設計意図SSOT §24） */
.select-tab-btn { flex: 1; padding: var(--space-4); font-size: var(--text-base); font-weight: 700; border: 1px solid var(--border); border-bottom: none; border-radius: 0; background-color: var(--light); color: var(--slate); cursor: pointer; text-align: center; transition: background-color var(--dur-base) var(--ease-default), color var(--dur-base) var(--ease-default), border-color var(--dur-base) var(--ease-default), border-width var(--dur-base) var(--ease-default); margin-bottom: -2px; }
.select-tab-btn:hover { background-color: var(--border); color: var(--navy); }
.select-tab-btn.active { background-color: var(--white); border-top: 3px solid var(--navy); border-left: 1px solid var(--border); border-right: 1px solid var(--border); color: var(--navy); }
@media (max-width: 640px) {
  .interactive-selector { flex-direction: column; }
}

.app-panel { display: none; }
.app-panel.active { display: block; }
.diag-wrapper { background-color: var(--white); border: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); border-top: none; padding: var(--space-10); box-shadow: 0 10px 25px -5px var(--black-a05); position: relative; min-height: 420px; text-align: left; }
@media (max-width: 640px) {
  .diag-wrapper { padding: var(--space-5); }
}
.diag-header-zone { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.diag-step-indicator { font-size: var(--text-xs); font-weight: 700; color: var(--slate); background-color: var(--light); padding: 2px var(--space-3); border-radius: var(--radius-xs); }
.diag-taipa-badge { font-size: var(--text-xs); font-weight: 700; color: var(--theme-color, var(--shell-acc)); background-color: color-mix(in srgb, var(--theme-color, var(--shell-acc)) 10%, var(--white)); padding: 2px var(--space-3); border-radius: var(--radius-xs); }
.diag-progress { height: 4px; background-color: var(--border); border-radius: var(--radius-xs); margin-bottom: var(--space-8); }
.diag-progress-bar { height: 100%; width: 33.3%; background-color: var(--navy); transition: width var(--dur-slow) var(--ease-out); }
.diag-step { display: none; opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-default), transform var(--dur-slow) var(--ease-default); }
.diag-step.active { display: block; opacity: 1; transform: translateY(0); }
.diag-q-text { font-size: var(--text-xl); font-weight: 700; color: var(--navy); margin-bottom: var(--space-3); line-height: 1.5; }
.diag-q-sub { font-size: var(--text-base); color: var(--slate); margin-bottom: var(--space-6); }
.diag-options { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.diag-check-label { background-color: var(--white); border: 1px solid var(--border); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-lg); font-weight: 500; transition: border-color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.diag-check-label input { transform: scale(1.2); cursor: pointer; }
.diag-check-label:hover { border-color: var(--navy); background-color: var(--light); transform: translateY(-1px); }
.diag-check-label.selected { border-color: var(--navy); background-color: var(--light); font-weight: 500; color: var(--navy); }
.diag-nav { display: flex; flex-wrap: wrap; row-gap: var(--space-2); justify-content: space-between; border-top: 1px solid var(--border); padding-top: var(--space-4); }
.diag-btn-next { background-color: var(--navy); color: var(--white); border: none; padding: var(--space-3) var(--space-7); border-radius: var(--radius-xs); font-weight: 700; cursor: pointer; font-size: var(--text-base); white-space: nowrap; transition: background-color var(--dur-base); }
.diag-btn-next:hover:not(:disabled) { background-color: var(--brand-dark); }
.diag-btn-next:disabled { background-color: var(--border); color: var(--slate); cursor: not-allowed; }   /* 選ぶまで押せない（設計意図SSOT §30） */
.diag-btn-prev { background-color: transparent; color: var(--slate); border: none; cursor: pointer; font-size: var(--text-base); font-weight: 500; padding: var(--space-3) 0; }
.diag-btn-prev:disabled { opacity: 0; cursor: not-allowed; }
@media (max-width: 640px) {
  .diag-btn-next { padding-inline: var(--space-3); }   /* 幅320pxでも「前に戻る」と並べて、文字を1行に収める（④ CTA 共通ルール） */
}
.diag-loading { display: none; text-align: center; padding: var(--space-20) 0; }
.spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top: 3px solid var(--navy); border-radius: var(--radius-circle); margin: 0 auto var(--space-4); animation: spin var(--dur-spin) var(--ease-linear) infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.loading-text { font-size: var(--text-sm); font-weight: 500; color: var(--slate); }
.result-screen { display: none; text-align: center; opacity: 0; transform: translateY(15px); transition: opacity var(--dur-slower) var(--ease-default), transform var(--dur-slower) var(--ease-default); }
.result-screen.show { display: block; opacity: 1; transform: translateY(0); }
.cost-meter-zone { background: var(--navy); color: var(--white); padding: var(--space-8); border-radius: var(--radius-sm); margin: var(--space-5) 0 var(--space-6); text-align: center; }   /* 左右の端は下の文・診断の得点の帯とそろえる（§27 追記2） */
.meter-label { font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--white-a70); margin-bottom: var(--space-2); }
.meter-amount { font-size: var(--text-meter); font-weight: 700; color: var(--white); white-space: nowrap; }   /* 桁が増えても1行に収める（§78 ルール6） */
.meter-unit { font-size: var(--text-lg); color: var(--white-a85); margin-left: var(--space-1); font-weight: 700; }
/* ⑤の結果の画面は枠を重ねない。残すのは結果の数字の帯とボタンだけ（設計意図SSOT §27） */
.result-body { text-align: left; background: none; padding: 0; border-radius: 0; border: none; margin-bottom: var(--space-6); font-size: var(--text-base); line-height: 1.9; position: relative; min-height: 150px; }
.ai-badge { display: block; font-size: var(--text-lg); font-weight: 700; color: var(--navy); text-align: left; margin-bottom: var(--space-3); }   /* 試算の文の見出し */
.ai-cursor { color: var(--navy); font-weight: 700; animation: ai-blink var(--dur-blink) infinite; margin-left: 2px; font-size: var(--text-base); vertical-align: middle; }
@keyframes ai-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.forward-box { background: none; border: none; border-top: 1px solid var(--border); padding: var(--space-6) 0 0; border-radius: 0; text-align: left; font-size: var(--text-base); display: flex; flex-direction: column; }
.forward-btn { display: inline-block; background-color: var(--navy); color: var(--white); border: none; padding: var(--space-3) var(--space-6); font-size: var(--text-base); font-weight: 700; border-radius: var(--radius-xs); cursor: pointer; transition: background-color var(--dur-base); }
.forward-btn:hover { background-color: var(--brand-dark); }
.fade-box-animated { display: none; opacity: 0; transition: opacity var(--dur-slower) var(--ease-out), transform var(--dur-slower) var(--ease-out); transform: translateY(15px); }
.fade-box-animated.show { display: block; opacity: 1; transform: translateY(0); }
.calc-basis-box { border-top: 1px solid var(--border); padding: var(--space-5) 0 0; text-align: left; font-size: var(--text-sm); /* 部品の中の文（§25） */ }
.calc-basis-title { font-size: var(--text-lg); font-weight: 700; color: var(--navy); margin-bottom: var(--space-2); }
.calc-basis-item { color: var(--navy); margin-bottom: var(--space-1); line-height: 1.7; }
.calc-formula { font-weight: 700; }   /* 入力した値・計算式。地の色はつけない（§27） */
/* ⑤試算の結果の「計算の根拠」の先頭にある、時給を変える部品（設計意図SSOT §78）。値はすべてトークン */
.diag-wage { position: relative; margin: var(--space-3) 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--shell-beige); border-radius: var(--radius-sm); }
.diag-wage-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.diag-wage-label { font-weight: 700; color: var(--navy); }
.diag-wage-numwrap { display: inline-flex; align-items: center; gap: var(--space-1); }
.diag-wage-num { width: 6em; padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--white); color: var(--navy); font: inherit; font-weight: 700; text-align: right; }
.diag-wage-num[aria-invalid="true"] { border-color: var(--sem-danger); }
.diag-wage-unit { color: var(--navy); }
.diag-wage-reset { padding: 0; border: none; background: none; color: var(--shell-blu); font: inherit; text-decoration: underline; cursor: pointer; }
.diag-wage-slider { display: block; width: 100%; margin: var(--space-3) 0 var(--space-2); accent-color: var(--shell-blu); cursor: pointer; }
.diag-wage-hint { margin: 0; font-size: var(--text-xs); color: var(--slate); }
.diag-wage-hint.is-invalid { color: var(--sem-danger); }
.diag-wage-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* 読み上げ専用（画面には出さない）。.data-table thead と同じ隠し方 */
.compare-3-container { width: 100%; margin: 0 0 var(--space-6); text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 640px) {
  .compare-3-container { grid-template-columns: 1fr; }
}
/* 比較の列は1段の箱（薄い地）。列の中の行は枠にせず区切り線（設計意図SSOT §27 追記）。
   ストックマモルの列は白地に青の枠。青はトンマナの Structural Blue（--shell-blu）で、枠線・列の見出し・強調する行の文字だけに使い、地は塗らない（§27 追記2） */
.compare-3-col { display: flex; flex-direction: column; background: var(--light); border: 2px solid transparent; border-radius: var(--radius-sm); padding: var(--space-4); font-size: var(--text-sm); }
.compare-3-col.highlight { background: var(--white); border-color: var(--shell-blu); }
.compare-3-head { font-weight: 700; font-size: var(--text-base); text-align: left; border-bottom: 2px solid var(--border); padding-bottom: var(--space-2); margin-bottom: var(--space-3); color: var(--navy); }
.compare-3-col.highlight .compare-3-head { color: var(--shell-blu); }
.compare-3-label { font-size: var(--text-xs); color: var(--slate); font-weight: 700; margin-bottom: 2px; }
.compare-3-value { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-weight: 500; font-size: var(--text-sm); color: var(--navy); margin-bottom: var(--space-2); }
.compare-3-col.highlight .compare-3-value { color: var(--navy); }
.compare-3-col:not(.highlight) .compare-3-value { color: var(--slate); }
.compare-3-conclusion { margin-top: auto; font-size: var(--text-sm); font-weight: 700; text-align: left; padding-top: var(--space-2); }   /* まとめは列の下端にそろえる */
.compare-3-col.highlight .compare-3-conclusion { color: var(--navy); }
.compare-container { width: 100%; margin: 0 0 var(--space-6); text-align: left; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.compare-container .compare-col { display: flex; flex-direction: column; background: var(--light); border: 2px solid transparent; border-radius: var(--radius-sm); padding: var(--space-4); overflow: visible; }
@media (max-width: 640px) {
  .compare-container { grid-template-columns: 1fr; }
}
.compare-container .compare-col.highlight { background: var(--white); border-color: var(--shell-blu); }
.compare-head { font-size: var(--text-base); font-weight: 700; text-align: left; padding-bottom: var(--space-2); border-bottom: 2px solid var(--border); margin-bottom: var(--space-3); color: var(--navy); }
.compare-head small { font-size: var(--text-sm); font-weight: 500; color: var(--slate); }   /* 列の小見出し。既定の smaller（13.3px）は目盛りに無い（§27 追記2） */
.compare-container .compare-col.highlight .compare-head { color: var(--shell-blu); }
.compare-item { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 500; color: var(--slate); }
.compare-col:not(.highlight) .compare-item { color: var(--slate); }
.compare-conclusion { margin-top: auto; font-size: var(--text-sm); font-weight: 700; text-align: left; padding-top: var(--space-2); }   /* まとめは列の下端にそろえる */
.compare-container .compare-col.highlight .compare-conclusion { color: var(--navy); }
.st-diag-section-head { background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--navy); border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: var(--space-4) var(--space-5); margin-top: var(--space-10); display: flex; align-items: center; gap: var(--space-2); }
.st-diag-section-head-label { font-size: var(--text-xs); font-weight: 700; color: var(--muted); padding: 2px var(--space-2); border-radius: var(--radius-xs); letter-spacing: .08em; }
.st-diag-section-head-title { font-size: var(--text-base); font-weight: 700; color: var(--navy); }

/* ─── ランキングバー ─── */
.ranking-bars { display: flex; flex-direction: column; gap: var(--space-2); }
.ranking-bar-item { display: flex; align-items: center; gap: var(--space-2); }
.rb-rank { width: 22px; height: 22px; border-radius: var(--radius-circle); background: var(--navy); color: var(--white); font-size: var(--text-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rb-label { font-size: var(--text-sm); /* 部品の中の項目名（§25） */ font-weight: 500; color: var(--navy); width: 220px; flex-shrink: 0; }
.rb-track { flex: 1; height: 10px; background: var(--border); border-radius: var(--radius-xs); overflow: hidden; }
.rb-fill { height: 100%; background: var(--accent); border-radius: var(--radius-xs); }
.rb-pct { font-size: var(--text-base); font-weight: 700; color: var(--navy); width: 44px; text-align: right; flex-shrink: 0; }

.gap-freq-kicker { padding: var(--space-2) var(--space-4); background: var(--white); border-left: 3px solid var(--slate); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--text-sm); /* 部品の中の文（§25） */ color: var(--navy); line-height: 1.5; }
.gap-freq-num { font-size: var(--text-base); font-weight: 700; color: var(--navy); margin-right: var(--space-1); }
/* 節の主張（h4）の割合と同じ数字だけ、オレンジにする。1節に1つ（設計意図SSOT §57） */
.css-donut-num.is-claim, .gap-pct.is-claim, .rb-pct.is-claim, .gap-freq-num.is-claim, .pain-scenario-anchor-num.is-claim { color: var(--accent); }

.approach-divider { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-7) 0 var(--space-5); padding-top: var(--space-6); border-top: 2px dashed var(--border); }
.approach-divider-badge { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; color: var(--white); background: var(--muted); padding: 2px var(--space-2); border-radius: var(--radius-xs); white-space: nowrap; }
.approach-divider-title { font-size: var(--text-xs); font-weight: 700; color: var(--slate); }

/* ─── 個別レポート専用コンポーネント群 ─── */

/* ── report-lead ── */
.report-lead { font-size: var(--text-base); color: var(--slate); line-height: 1.8; margin: 0 0 var(--space-7); font-weight: 500;}

/* ── ページインデックス ── */
.page-index { display: flex; flex-wrap: nowrap; overflow: hidden; overflow-x: auto; margin: 0 0 var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-sm); scrollbar-width: none; }
.page-index::-webkit-scrollbar { display: none; }
.page-index-item { flex: 1 0 auto; padding: var(--space-3) var(--space-4); background: var(--light); text-decoration: none; color: inherit; transition: background var(--dur-fast); position: relative; min-width: 0; }
.page-index-item:not(:last-child) { border-right: 1px solid var(--border); }
.page-index-item:hover { background: var(--shell-beige); }
.page-index-step { font-size: var(--text-xs); font-weight: 700; color: var(--muted); letter-spacing: .05em; margin-bottom: var(--space-1); display: block; }
.page-index-title { font-size: var(--text-xs); font-weight: 700; color: var(--navy); line-height: 1.4; margin-bottom: 2px; display: block; }
.page-index-sub { font-size: var(--text-xs); color: var(--mu); display: block; }

/* ── graphic-card-header（.graphic-row内専用） ── */
.graphic-card-header { grid-column: 1 / -1; padding: var(--space-6) var(--space-10) 0; display: flex; align-items: center; gap: var(--space-3); }
/* ── section-header（.report-section直下用） ── */
.section-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.card-step { font-size: var(--text-xs); font-weight: 700; color: var(--muted); letter-spacing: .08em; background: color-mix(in srgb, var(--navy) 6%, var(--white)); padding: 2px var(--space-2); border-radius: var(--radius-xs); flex-shrink: 0; white-space: nowrap; }
.card-title-text { margin: 0; font-size: var(--text-base); font-weight: 700; color: var(--navy); }   /* 札の題は h3（設計意図SSOT §61 ルール10）。h3 の既定の余白を打ち消す */

/* ── graphic-sub-heading ── */
.graphic-sub-heading {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--navy);
  margin: var(--space-5) 0 var(--space-2);
}

/* ── rank-shift-table ── */
.rank-shift-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); /* 項目名は部品の中の文（§25）。列の見出しは12px */ margin: 0 0 var(--space-6) 0; }
.rank-shift-table th { padding: var(--space-2) var(--space-2); border-bottom: 2px solid var(--border); text-align: left; font-size: var(--text-xs); font-weight: 700; color: var(--navy); white-space: nowrap; }
.rank-shift-table th.rst-center { text-align: center; }
.rank-shift-table td { padding: var(--space-2) var(--space-2); border-bottom: 0.5px solid var(--border); color: var(--navy); vertical-align: middle; white-space: nowrap; }
.rank-shift-table td.rst-center { text-align: center; white-space: nowrap; }
.rank-shift-table td.rst-left { text-align: left; white-space: nowrap; }
.rank-shift-table tr:last-child td { border-bottom: none; }
.rs-badge { display: inline-block; font-size: var(--text-xs); font-weight: 500; border-radius: var(--radius-xs); padding: 2px var(--space-2); }
.rs-badge-blue { background: color-mix(in srgb, var(--shell-blu) 12%, var(--white)); color: var(--shell-blu); }
.rs-badge-red { background: color-mix(in srgb, var(--red) 10%, var(--white)); color: var(--red); }
.rs-mid-arrow { font-size: var(--text-xs); color: var(--muted); font-weight: 700; }
.rs-change { font-size: var(--text-xs); font-weight: 700; margin-left: var(--space-2); }
.rs-change-stay { color: var(--muted); }
.rs-change-up { color: var(--shell-blu); }
.rs-change-down, .rs-change-down-hard { color: var(--red); }   /* 札と矢印の色は向きだけで決める：下がった＝赤、上がった＝青。下がり方の大きさは矢印の数（設計意図SSOT §64） */
.rank-shift-note { font-size: var(--text-xs); color: var(--slate); margin: 0 0 var(--space-1); line-height: 1.6; }   /* 表の下の注。箱で囲まない（設計意図SSOT §39） */

/* ── miss-ranking ── */
.miss-ranking { margin: 0 0 var(--space-4) 0; }
.miss-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--light); }
.miss-item:last-child { border-bottom: none; }
.miss-rank { font-size: var(--text-xs); font-weight: 700; color: var(--white); background: var(--navy); border-radius: var(--radius-xs); padding: 2px var(--space-2); flex-shrink: 0; min-width: 32px; text-align: center; }
.miss-label { flex: 1; font-size: var(--text-sm); /* 部品の中の項目名（§25） */ color: var(--navy); line-height: 1.5; font-weight: 500; }
.miss-bar-wrap { width: 80px; flex-shrink: 0; }
.miss-bar-track { background: var(--border); border-radius: var(--radius-xs); height: 6px; }
.miss-bar-fill { background: var(--shell-acc); border-radius: var(--radius-xs); height: 6px; width: var(--bar-w, 0%); }
.miss-pct { font-size: var(--text-base); font-weight: 700; color: var(--slate); flex-shrink: 0; min-width: 40px; text-align: right; letter-spacing: -0.02em;}

/* ── solution section ── */
.solution-title { font-size: var(--text-h2); font-weight: 700; color: var(--navy); margin: 0 0 var(--space-2); line-height: 1.5; }
.solution-sub { font-size: var(--text-base); color: var(--slate); margin: 0 0 var(--space-6); line-height: 1.6; }
.sol-item { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
.sol-item:last-child { border-bottom: none; }
.sol-num { font-size: var(--text-xs); font-weight: 700; color: var(--white); background: var(--navy); border-radius: var(--radius-circle); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.sol-body { flex: 1; min-width: 0; }
.sol-title { font-size: var(--text-base); font-weight: 700; color: var(--navy); margin-bottom: var(--space-1); }
.sol-desc { font-size: var(--text-sm); /* 部品の中の文（§25） */ color: var(--slate); line-height: 1.6; }

/* ─── テーマページ：収録レポートカード一覧 ─── */
.theme-report-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}
/* ヒーローの帯の直後に来るとき（テーマページ）は、帯との間を空ける（設計意図SSOT §20） */
.theme-hero + .theme-report-cards { margin-top: var(--main-gutter); }
.theme-rcard[hidden] {
  display: none;
}
.theme-rcard {
  position: relative;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0 0 var(--space-5);
  overflow: hidden;
  flex: 0 0 auto;
  width: 300px;
  max-width: 100%;
  height: 380px;
  border-radius: var(--radius-md);
  border: 1px solid var(--bd);
  box-shadow: 0 2px 10px var(--black-a05);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--dur-base), transform var(--dur-base);
}
.theme-rcard:hover {
  box-shadow: 0 6px 20px var(--bd);
  transform: translateY(-1px);
  text-decoration: none;
}
.theme-rcard-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--light);
}
.theme-rcard-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* 暗幕は左上の番号バッジの背後だけ。写真の他の部分は暗くしない（hook は白地ボックスで自立） */
.theme-rcard-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 85% 80% at 0 0,
    color-mix(in srgb, var(--navy) 70%, transparent) 0%,
    color-mix(in srgb, var(--navy) 40%, transparent) 45%,
    transparent 100%);
}
/* 写真上に載るカード左上の番号バッジは白抜きにする（ヒーロー側の同名クラスには影響させない） */
.theme-rcard > .theme-rcard-num-value {
  color: var(--white);
  text-shadow: 0 1px 6px color-mix(in srgb, var(--navy) 45%, transparent);
}
.theme-rcard > .theme-rcard-num-value .theme-rcard-num-tag {
  background: color-mix(in srgb, var(--white) 18%, transparent);
  border-color: color-mix(in srgb, var(--white) 60%, transparent);
}
.theme-rcard-num-value {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  align-items: center;
  gap: var(--space-2);
  color: var(--navy);
  letter-spacing: .02em;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.theme-rcard-num-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--bd);
  border: 1px solid var(--black-a15);
  border-radius: var(--radius-xs);
  padding: 2px var(--space-2);
}
.theme-rcard-num-hash {
  font-size: var(--text-xs);
  font-weight: 500;
  opacity: .75;
}
.theme-rcard-num-digits {
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1;
}
.theme-rcard-hook-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 0 var(--space-4) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.6;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.theme-rcard-hook-mark {
  display: inline;
  color: var(--navy);
  background: var(--white);
  border-radius: var(--radius-xs);
  padding: 2px var(--space-1);
  text-decoration-line: underline;
  text-decoration-color: var(--highlight-marker);
  text-decoration-thickness: 6px;
  text-underline-offset: -3px;
}
.theme-rcard-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-5); }
.theme-rcard-catch {
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy);
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.theme-rcard-geo {
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.6;
  color: var(--slate);
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.theme-rcard-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: 0 var(--space-5);
}
.theme-rcard-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--slate);
  padding-bottom: 1px;
  border-bottom: 1px solid var(--black-a10);
  transition: color var(--dur-fast), gap var(--dur-fast);
  margin-left: auto;
}
.theme-rcard:hover .theme-rcard-link { color: var(--shell-acc); gap: var(--space-2); border-bottom-color: var(--shell-acc); }
.theme-rcard--active {
  opacity: .4;
  pointer-events: none;
  cursor: default;
}
.theme-rcard-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--shell-acc);
  color: var(--white);
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill);
  letter-spacing: .05em;
  align-self: flex-start;
}
@media (max-width: 700px) {
  .theme-rcard { width: 100%; max-width: 340px; }
}

/* ③の原因は枠で囲まない。節がすでに枠のため、行の区切り線だけにする（設計意図SSOT §25） */
.graphic-left .cause-box {
  padding: 0;
}
.graphic-left .cause-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-3) 0;
}
.graphic-left .cause-item:not(:last-child) { border-bottom: 1px solid var(--border); }
.graphic-left .cause-num {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle);
  background: var(--theme-color, var(--shell-acc));
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  padding: 0;
  letter-spacing: 0;
  margin-top: 2px;
}
.graphic-left .cause-body { flex: 1; }
.graphic-left .cause-label {
  font-size: var(--text-base); /* 項目の名前＝見出しとして読ませる文言のため本文サイズ（SSOT §13 原則3） */
  font-weight: 700;
  color: var(--navy);   /* 本文の中で繰り返す項目名はオレンジにしない（設計意図SSOT §35） */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.graphic-left .cause-text { font-size: var(--text-sm); /* 部品の中の文（§25） */ color: var(--navy); line-height: 1.6; }
.graphic-left .cause-text .is-claim { color: var(--accent); font-weight: 700; }   /* h4 の数字が図にもコラムにも無い節は、原因の文の中の同じ数字に印（設計意図SSOT §64） */

/* ── aside-nav: 右追従ナビ ── */
.report-aside-nav {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: var(--aside-nav-w);
  z-index: 200;
  background: var(--white-a90);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 0;
  border: 1px solid var(--border);
  border-right: none;
  box-shadow: -2px 4px 20px var(--bd);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-default);
}
.report-aside-nav.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.aside-nav-list {
  display: flex;
  flex-direction: column;
}
.aside-nav-item {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4); 
  text-decoration: none;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--light);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.aside-nav-item:last-child { border-bottom: none; }

.aside-nav-item:hover {
  background: color-mix(in srgb, var(--shell-acc) 6%, var(--white));
  border-left-color: var(--shell-acc);
}
.aside-nav-item.is-active {
  background: color-mix(in srgb, var(--shell-acc) 8%, var(--white));
  border-left-color: var(--shell-acc);
}

.aside-nav-step {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--muted);
  transition: color var(--dur-fast);
  margin-bottom: 3px;
}
.aside-nav-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
}

/* 診断・インタラクティブ用（Accent Orange）の定義上書き */
.aside-nav-item[data-nav-target="section-diagnostic"] {
  --theme-color: var(--shell-acc);
}
.aside-nav-item[data-nav-target="section-diagnostic"]:hover {
  border-left-color: var(--theme-color);
  background: color-mix(in srgb, var(--theme-color, var(--shell-acc)) 6%, var(--white));
}
.aside-nav-item[data-nav-target="section-diagnostic"].is-active {
  border-left-color: var(--theme-color);
  background: color-mix(in srgb, var(--theme-color, var(--shell-acc)) 8%, var(--white));
}

/* レスポンシブ制御（PC幅での表示切替） */
@media(min-width: 1100px) {
  .report-aside-nav { display: block; }
  .page-index { display: none; }
  /* 右端の固定目次の下に本文を潜らせない（目次の幅＋本文の左右余白ぶん、帯の右余白を確保する） */
  .lnav-main:has(.report-aside-nav) { --band-pad-end-min: calc(var(--aside-nav-w) + var(--main-gutter)); }
}

/* ─── 調査概要バー ─── */
.survey-meta-heading {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--mu);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  margin: var(--space-5) 0 var(--space-2);
}
.survey-meta-heading:hover {
  color: var(--shell-acc);
  text-decoration: underline;
}
/* ノートの冒頭の行：調査の見出しリンクと、公開日・更新日を並べる。日付は小さく控えめに（設計意図SSOT §68 ルール4・ルールB RULE 16） */
.hero-meta-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-4); }
.note-dates { display: flex; flex-wrap: wrap; column-gap: var(--space-3); margin: 0; font-size: var(--text-sm); font-weight: 400; color: var(--mu); }
.survey-meta-bar {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-4) 0 0;
  margin: 0 0 var(--space-8);
}
.survey-meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.survey-meta-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--slate);
  line-height: 1.5;
}
.survey-meta-key {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--mu);
  white-space: nowrap;
}
.survey-meta-val {
  font-size: var(--text-xs);
  color: var(--slate);
}

/* ================================================================
   /report/ TOPページ
   ================================================================ */
.idx-hero {
  margin: 0 calc(-1 * var(--main-gutter));
  padding: var(--space-14) var(--band-pad-end) var(--space-6) var(--main-gutter);
  position: relative;
  overflow: hidden;
  background: var(--white);
  background-image: radial-gradient(circle, var(--black-a05) 1.2px, transparent 1.2px);
  background-size: 28px 28px;
}
.idx-hero-arc {
  position: absolute;
  right: -80px;
  top: -80px;
  width: 240px;
  height: 240px;
  border-radius: var(--radius-circle);
  border: 32px solid var(--black-a05);
  pointer-events: none;
}
.idx-hero-inner {
  position: relative;
  z-index: 1;
}
.idx-hero-h1 {
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy);
  margin: 0 0 var(--space-3);
}
.idx-hero-sub {
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.75;
  color: var(--mu);
  margin: 0;
}
.idx-sec-label {
  font-size: var(--text-display);
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--mu-light);
  font-weight: 700;
}
/* Hubの節の表題：日本語の見出しと件数（h2.idx-sec-title。小さく濃い色）／英字（.idx-sec-label。大きくグレー。飾り）の2段。ノート・テーマ・調査概要で共通（設計意図SSOT §23） */
.idx-sec-head {
  margin-bottom: var(--space-5);
}
.idx-sec-title {
  font-size: var(--text-sm);
  line-height: 1.4;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .08em;
  margin: 0 0 var(--space-1);
}
.idx-reports-head {
  margin-bottom: var(--space-6);
}
.idx-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.idx-filter-tab {
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.4;
  font-weight: 700;
  color: var(--slate);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.idx-filter-tab:hover {
  border-color: var(--navy);
  color: var(--navy);
}
.idx-filter-tab.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.idx-themes {
  margin: 0 calc(-1 * var(--main-gutter));
  padding: var(--space-4) var(--band-pad-end) var(--space-6) var(--main-gutter);
  background: var(--white);
}
.idx-survey-about {
  margin-bottom: var(--space-5);
}
.idx-survey-about p {
  font-size: var(--text-sm);
  color: var(--navy);
  line-height: 1.9;
}
.idx-survey-intro {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-8);
  padding: var(--space-6) var(--space-8);
  background: var(--shell-beige);
  border-radius: var(--radius-xs);
}
.idx-survey-intro-block dt {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--shell-blu);
  letter-spacing: .05em;
  margin-bottom: var(--space-2);
}
.idx-survey-intro-block dd {
  font-size: var(--text-sm);
  color: var(--navy);
  line-height: 1.8;
  padding-left: 1em;
  text-indent: -1em;
  margin-left: 0;
}
.idx-survey-intro-block dd::before {
  content: '\30FB';
}
@media (max-width: 720px) {
  .idx-survey-intro { grid-template-columns: 1fr; gap: var(--space-4); }
}
.idx-reports {
  margin: 0 calc(-1 * var(--main-gutter));
  padding: var(--space-4) var(--band-pad-end) var(--space-12) var(--main-gutter);
  background: var(--white);
}
.report-page-content {
  margin: 0 calc(-1 * var(--main-gutter));
  padding: var(--space-12) var(--band-pad-end) var(--space-12) var(--main-gutter);
  background: var(--shell-beige);
  border-top: 0.5px solid var(--border);
}
@media (max-width: 720px) {
  .idx-hero { padding: var(--space-10) var(--band-pad-end) var(--space-8) var(--main-gutter); }
  .idx-themes, .idx-reports { padding: var(--space-8) var(--band-pad-end) var(--space-8) var(--main-gutter); }
}

/* ── ex-cl チェックリスト（08/_content.php より移行） ── */
.ex-cl-head{background:var(--navy);color:var(--white);padding:var(--space-2) var(--space-4);font-size: var(--text-xs);font-weight:700;display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);justify-content:space-between;align-items:center;}   /* 題と注が入り切らないときは、注を次の行に送る（設計意図SSOT §58） */
.ex-cl-note{font-weight:400;font-size: var(--text-xs);opacity:.8;}
.ex-cl-item{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border);background:var(--white);}   /* 行の間の線。外の箱は付けない（設計意図SSOT §39） */
.ex-cl-item:last-child{border-bottom:none;}
.ex-cl-item.high{background:color-mix(in srgb, var(--sem-danger) 4%, var(--white));}   /* 高リスクの行の薄い赤（旧 #fff8f8。§26の置き換えで壊れていた指定を直した。設計意図SSOT §30） */
.ex-cl-chk{font-size: var(--text-lg);color:var(--sem-danger);flex-shrink:0;line-height:1.3;margin-top:1px;}
.ex-cl-bd{flex:1;}
.ex-cl-nm{font-size: var(--text-base);font-weight:700;color:var(--navy);margin-bottom:var(--space-1);}
.ex-cl-risk{font-size: var(--text-xs);color:var(--red, var(--sem-danger));background:color-mix(in srgb, var(--red, var(--sem-danger)) 8%, var(--white));border-radius: var(--radius-xs);padding:2px var(--space-2);display:inline-block;}
.ex-cl-sub{font-size: var(--text-xs);color:var(--slate);margin-top:2px;}

/* ─── 左ナビゲーション (lnav) ─── */
.lnav-body {
  display: grid;
  grid-template-columns: var(--lnav-w) 1fr;
  position: relative;
  align-items: start;
}
.lnav {
  width: var(--lnav-w);
  border-right: 0.5px solid var(--bd);
  background: var(--white);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 10;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.lnav-identity {
  display: block;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  transition: opacity var(--dur-fast);
}
.lnav-identity:hover {
  opacity: .75;
  text-decoration: none;
}
.lnav-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--white);
  background: var(--shell-g);
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  margin-bottom: var(--space-2);
}
.lnav-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.45;
  margin-bottom: var(--space-1);
}
.lnav-theme {
  display: block;
  text-decoration: none;
  padding: var(--space-3) var(--space-4);
  border-bottom: 0.5px solid var(--bd);
  position: relative;
  transition: background var(--dur-fast);
  color: inherit;
  flex-shrink: 0;
}
.lnav-theme:hover { background: var(--light); text-decoration: none; }
.lnav-theme--on    { background: var(--light); }
.lnav-theme--on::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--shell-acc);
}
.lnav-theme-name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.5;
  margin-bottom: var(--space-1);
}
.lnav-foot {
  display: block;
  text-decoration: none;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--slate);
  margin-top: auto;
  border-top: 0.5px solid var(--bd);
  transition: color var(--dur-fast);
}
.lnav-foot:hover { color: var(--navy); text-decoration: none; }

/* lnav メインコンテンツエリア */
.lnav-main {
  min-width: 0;
  padding: 0 var(--main-gutter);
  background: var(--white);
  /* 帯の右余白：背景は右端まで、中身は --content-max で止める。
     --band-pad-end-min の上書き（目次ありのページ）を反映させるため、:root ではなくこの要素で計算する */
  --band-pad-end: max(var(--band-pad-end-min), calc(100% + var(--main-gutter) - var(--content-max)));
}
/* 本文直下の「帯」以外の要素（背景なし）は、中身の最大幅で止める */
.idx-survey-section,
.theme-report-cards { max-width: var(--content-max); }

/* lnav モバイル対応 */
@media (max-width: 768px) {
  .lnav-body { grid-template-columns: 1fr; }
  .lnav { display: none; }
}

/* ── スマホ幅の見出しの大きさ（設計意図SSOT §24 ルール3）。各見出しの元の指定より後ろに置き、確実に上書きする ── */
@media (max-width: 640px) {
  /* スマホ幅では1段小さくする（設計意図SSOT §24 ルール3） */
  .theme-hero-h1, .theme-hero-eye, .idx-hero-h1 { font-size: var(--text-h1-sp); }
  .idx-sec-label { font-size: var(--text-h1); }   /* Hubの節の英字（飾り）は、スマホ幅では1段小さく（§23） */
  .graphic-right h4 { font-size: var(--text-xl); }
}

/* ─── 診断カードの切り替え（2026-10-04。保護くんで決めた形を ST・ConPass にも適用） ───
   ユーザー指摘の経緯：幅いっぱいの中央寄せ2行で左右が空く → 地の色がページ・問いかけ・未選択タブで同じで境目が無い → 白にすると選択タブが溶ける → 枠が多すぎる → 余白がばらばら。
   決めた形：問いかけカードは白（下線なし）。切り替えは薄い色の1本のセグメントに「番号の札＋左揃え2行」のボタンを2つ並べ、選んでいる方だけ濃い色に塗る。枠は外側の角丸だけ。
   左端は問いかけ・ボタン・設問で同じ32px（スマホ20px）、バッジ→ボタン20px、ボタン→ステップ表示28px。経緯は 保護くん 設計意図 A-1 */
.diag-tool-card .diag-hook-card { background: var(--white); border-bottom: none; padding: var(--space-6) var(--space-8) var(--space-5); }
.diag-tool-card .interactive-selector { background: var(--white); border-bottom: none; margin: 0; padding: 0 var(--space-8) var(--space-5); gap: 0; }
.diag-tool-card .select-tab-btn, .diag-tool-card .select-tab-btn:hover { display: flex; align-items: center; gap: var(--space-3); margin-bottom: 0; padding: var(--space-3) var(--space-4); border: none; border-radius: 0; box-shadow: none; text-align: left; font-weight: 500; color: var(--slate); background-color: color-mix(in srgb, var(--accent) 8%, var(--white)); }
.diag-tool-card .interactive-selector .select-tab-btn:not(:last-child) { border-right: none; }
.diag-tool-card .select-tab-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.diag-tool-card .select-tab-btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.diag-tool-card .select-tab-btn:hover { background-color: color-mix(in srgb, var(--accent) 16%, var(--white)); color: var(--accent-dark); }
.diag-tool-card .select-tab-btn.active, .diag-tool-card .select-tab-btn.active:hover { font-weight: 700; color: var(--white); background-color: var(--accent-dark); border: none; box-shadow: none; }
.diag-tool-card .select-tab-num { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: 700; border: none; background: color-mix(in srgb, var(--accent) 18%, var(--white)); color: var(--accent-dark); }
.diag-tool-card .select-tab-btn.active .select-tab-num { background: var(--white); color: var(--accent-dark); }
.diag-tool-card .select-tab-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.diag-tool-card .select-tab-text small { font-weight: 400; color: var(--slate); }
.diag-tool-card .select-tab-btn.active .select-tab-text small { color: rgba(255, 255, 255, .85); }
.diag-tool-card .diag-wrapper { padding: var(--space-2) var(--space-8) var(--space-10); min-height: 0; }
@media (max-width: 640px) {
  .diag-tool-card .diag-hook-card { padding: var(--space-5) var(--space-5) var(--space-4); }
  .diag-tool-card .interactive-selector { padding: 0 var(--space-5) var(--space-5); }
  .diag-tool-card .interactive-selector .select-tab-btn:not(:last-child) { border-bottom: none; }
  .diag-tool-card .select-tab-btn:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
  .diag-tool-card .select-tab-btn:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
  .diag-tool-card .diag-wrapper { padding: var(--space-2) var(--space-5) var(--space-8); }
}