/* 後悔の分岐統計の見た目（KOK-007）
 *
 * Claude Design のキャンバスで作り、運用者が承認したデザイン（スマホのトップ・質問・結果、パソコンのトップ）を写したもの。
 * デザインにない画面（分岐ごとのページ、回答のページ、法務ページ）も、同じ色・書体・部品で組む。
 *
 * 色：地は灰みの白、文字は墨、カードは白。色が意味を持つのは道だけ。
 *   選んだ道（did）は青、選ばなかった道（didnt）はオレンジ（線と面は明るいオレンジ、小さな文字は読める濃さのオレンジ）。
 *   部品を .side-did / .side-didnt の中に置くと、その道の色が --side、--side-text、--side-track に入る。
 *   後悔の度合いの内訳は、同じ道の色の濃さで分ける（濃い＝後悔している側、灰＝どちらとも言えない）。
 * 書体：Zen Kaku Gothic New（400/500/700/900）、大きな数字は Barlow Condensed 500/600（単位の「人に」「人」はゴシック）。どちらも Google Fonts。
 * 押せるもの：白地に 1.5px の墨の縁、角丸 14px、下に 3px（パソコンのトップは 4px）の墨の影。選ぶと墨の塗りに白文字。押すと影の分だけ沈む。
 * 紹介（PR）の枠は墨の地に白いボタン。
 * 濃淡（KOK-009）：運用者が承認した「濃淡をつけた」見本（結果の画面）に合わせた。1画面に言いたいことを1つ決めて見出しの一文にし、答えは大きな数字＋短い一文。
 *   黄（--yellow）は「あなたが気にしていること」のラベルだけ。黒地のカードはあなたへの一言と紹介。ダークモードはない（C-010）。
 * 動き：押したときの沈みと色の変化だけ。動きを減らす設定では色の変化の時間も付けない。
 * デザインからの変更：小さな文字の灰（#7A808A）とオレンジ（#E2552B）は、白と地の上で 4.5:1 に届かないので、
 *   小さな文字だけ #6B717B と #BD3F14 にした。大きな数字と線はデザインの色のまま。
 */
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Barlow+Condensed:wght@500;600&display=swap");

:root {
  color-scheme: light;
  --bg: #F4F5F7;
  --card: #FFFFFF;
  --sub: #F8F9FB;
  --ink: #16181D;
  --ink-2: #3A3F48;
  --ink-3: #5B616B;
  --ink-4: #6B717B;
  --line: #D5D8DE;
  --line-soft: #ECEEF2;
  --card-edge: #E3E5EA;
  --on-ink: #FFFFFF;
  /* 押せるものの縁と影 */
  --key-line: #16181D;
  --key-bg: #FFFFFF;
  --key-on: #16181D;
  --key-on-fg: #FFFFFF;
  /* 選んだ道（青）と選ばなかった道（オレンジ） */
  --did: #2747D9;
  --did-text: #2747D9;
  --did-track: #DCE2F7;
  --did-wash: #E3E8FB;
  --didnt: #FF6A3D;
  --didnt-big: #E2552B;
  --didnt-text: #BD3F14;
  --didnt-track: #FBE1D8;
  --didnt-wash: #FDEDE6;
  --on-side: #FFFFFF;
  --yellow: #F5C542;
  /* 灰の棒と、どちらとも言えない */
  --bar-other: #B9BEC8;
  --mid: #B9BEC8;
  /* 紹介（PR）の枠 */
  --pr-bg: #16181D;
  --pr-edge: #16181D;
  --pr-fg: #FFFFFF;
  --pr-sub: #C9CCD3;
  --pr-body: #DADDE3;
  --pr-note: #A3A8B1;
  --pr-line: #5B616B;
  --pr-key: #FFFFFF;
  --pr-key-fg: #16181D;
  --focus: #2747D9;
  --sans: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
  --num: "Barlow Condensed", "Zen Kaku Gothic New", "Arial Narrow", system-ui, sans-serif;
}

/* ダーク：地を暗い墨、カードを一段明るい墨。押せるものの縁と影は明るい灰、青とオレンジは暗い地で読める明るさに */


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.8;
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
  word-break: auto-phrase;
}
a { color: var(--ink); }
a:hover { color: var(--did-text); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-weight: 900; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* 線のアイコン（矢印、チェック）は文字の色で描く */
.i-arrow { flex: none; }
.i-arrow path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.i-check { flex: none; }
.i-check rect, .i-check path { fill: none; stroke: var(--did); stroke-width: 2; }
.i-check path { stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* 道の色 */
.side-did { --side: var(--did); --side-big: var(--did); --side-text: var(--did-text); --side-track: var(--did-track); --side-wash: var(--did-wash); }
.side-didnt { --side: var(--didnt); --side-big: var(--didnt-big); --side-text: var(--didnt-text); --side-track: var(--didnt-track); --side-wash: var(--didnt-wash); }

/* ---- ページの枠 ---- */
.page { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.page-col { max-width: 760px; }
.page-top { max-width: 760px; }

/* 共通部品の法務ページ（main、h1、h2、table、footer）も同じ形で読めるようにする */
main:not(.page) { max-width: 760px; margin: 0 auto; padding: 0 20px 8px; }
main:not(.page)::before {
  content: "後悔の分岐統計";
  display: flex; align-items: center; gap: 8px;
  padding: 18px 0 18px 30px;
  font-weight: 900; font-size: 15px;
  background: no-repeat left center / 22px 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 21V12M11 12L4 3M11 12L18 3' stroke='%2316181D' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='4' cy='3' r='2.4' fill='%232747D9'/%3E%3Ccircle cx='18' cy='3' r='2.4' fill='%23FF6A3D'/%3E%3C/svg%3E");
}

main:not(.page) h1 { font-size: 28px; line-height: 1.4; margin: 12px 0 16px; }
main:not(.page) h2 { font-size: 19px; line-height: 1.5; margin: 32px 0 10px; }
main:not(.page) p, main:not(.page) li { font-size: 15px; line-height: 1.85; color: var(--ink-2); }
main:not(.page) p + p { margin-top: 10px; }
main:not(.page) ul { padding-left: 1.2em; }
main:not(.page) li + li { margin-top: 8px; }
main:not(.page) table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 0 var(--card-edge); font-size: 14px; }
main:not(.page) th, main:not(.page) td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); line-height: 1.7; }
main:not(.page) tr:last-child th, main:not(.page) tr:last-child td { border-bottom: 0; }
main:not(.page) th { width: 38%; color: var(--ink-3); font-weight: 700; font-size: 13px; }

footer { margin-top: 40px; padding: 16px 0 28px; font-size: 12px; line-height: 1.7; color: var(--ink-3); }
footer a { color: var(--ink-3); display: inline-flex; align-items: center; min-height: 44px; }
.foot { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; }
.foot span { display: inline-flex; align-items: center; min-height: 44px; }
/* 分かれ道ごとのページへの普通のリンク（検索エンジンが各ページを見つけるため。診断へのリンクは shindan#… の形で別） */
.branch-nav { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; font-size: 12px; line-height: 1.7; color: var(--ink-3); }
.branch-nav span { width: 100%; font-weight: 700; }
.branch-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-3); }
.branch-nav a[aria-current] { color: var(--ink); font-weight: 700; }
.branch-nav + footer { margin-top: 0; padding-top: 0; }

/* ---- ヘッダー ---- */
.mast { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; }
.site { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 900; font-size: 16px; letter-spacing: .02em; text-decoration: none; color: var(--ink); }
.page-col .site { font-size: 15px; }
.page-col .logo { width: 20px; height: 20px; }
.logo path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.logo .dot-did { fill: var(--did); }
.logo .dot-didnt { fill: var(--didnt); }
.mast nav { display: flex; gap: 16px; }
.mast nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; color: var(--ink-3); text-decoration: none; }
.page-col .mast nav a { text-decoration: underline; text-underline-offset: 3px; }
.page-top .mast nav a { text-decoration: none; }
.mast nav a:hover { color: var(--did-text); }
.pr-line { font-size: 11px; line-height: 1.6; color: var(--ink-3); }
@media (max-width: 599px) { .wide-only { display: none !important; } }

/* ---- 共通の部品 ---- */
.card { background: var(--card); border-radius: 20px; box-shadow: 0 1px 0 var(--card-edge); }
.small-note { font-size: 12px; line-height: 1.7; color: var(--ink-3); }
.lead { font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--ink-3); text-underline-offset: 3px; }

/* 押せるもの：白地に墨の縁と下の影。押すと影の分だけ沈む */
.btn, .row-key, .choices a, .q-opt, .opt > span {
  background: var(--key-bg);
  color: var(--ink);
  border: 1.5px solid var(--key-line);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--key-line);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover, .row-key:hover, .choices a:hover, .q-opt:hover { color: var(--ink); background: var(--sub); }
.btn:active, .row-key:active, .choices a:active, .q-opt:active { transform: translateY(3px); box-shadow: 0 0 0 var(--key-line); }
@media (prefers-reduced-motion: no-preference) {
  .btn, .row-key, .choices a, .q-opt, .opt > span, .pr-key, .row-link { transition: background-color .12s, color .12s; }
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 20px; font-size: 15px; font-weight: 700; text-align: center; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-go { display: flex; width: 100%; min-height: 60px; font-size: 17px; }
.row-key { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 0 18px; font-size: 16px; font-weight: 700; }
.row-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 18px; border-radius: 14px; background: var(--card); text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.5; }
.row-link span { display: flex; flex-direction: column; }
.row-link small { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.row-link:hover { color: var(--did-text); }

/* ---- トップ ---- */
.hero { padding-top: 28px; }
.hero h1 { font-size: 34px; line-height: 1.32; letter-spacing: -.01em; }
.hero-lead { margin-top: 16px; font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.example { margin-top: 20px; padding: 20px 18px 18px; }
.example-h { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.fork-svg { display: block; width: 100%; max-width: 354px; height: auto; margin: 6px auto 0; overflow: visible; }
.fork-svg path { fill: none; stroke-width: 6; stroke-linecap: round; }
.fork-svg .road-did { stroke: var(--did); }
.fork-svg .road-didnt { stroke: var(--didnt); }
.fork-svg circle { fill: var(--ink); }
.ex-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.ex-who { font-size: 12px; font-weight: 700; line-height: 1.6; color: var(--side-text); }
.ex-pct { font-family: var(--num); font-weight: 500; font-size: 66px; line-height: 1; color: var(--side-big); letter-spacing: 0; }
.ex-pct .u { font-size: 28px; }
.ex-what { font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.ex-source { margin-top: 12px; font-size: 10px; line-height: 1.6; color: var(--ink-4); }

.pick { padding-top: 36px; }
.pick h2 { margin: 0 0 14px; font-size: 20px; line-height: 1.5; }
.choices { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.choices a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 60px; padding: 0 18px; font-size: 17px; font-weight: 700; line-height: 1.4; }
.c-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.c-q { display: none; }
.c-meta .i-arrow { color: var(--ink); }

.how { padding-top: 40px; }
.how h2 { margin: 0 0 16px; font-size: 20px; line-height: 1.5; }
.steps { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.steps li { display: flex; gap: 14px; }
.step-no { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; line-height: 1; }
.steps h3 { font-size: 15px; font-weight: 700; line-height: 1.6; }
.steps p { font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.how .small-note { margin-top: 20px; }

.done-card { margin-top: 32px; padding: 20px 18px; }
.done-card h2 { font-size: 18px; line-height: 1.5; }
.done-card p { margin-top: 8px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.done-row { margin-top: 14px !important; }
.done-row .btn { width: 100%; }

/* ---- 診断（1画面1問） ---- */
.page-quiz .quiz { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.q-head { display: flex; align-items: center; gap: 12px; padding: 16px 0; }
.q-back { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.q-back:hover { border-color: var(--ink); }
.q-meta { flex: 1; min-width: 0; }
.q-branch { font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--ink-3); }
.q-progress { list-style: none; display: flex; gap: 6px; margin-top: 8px; }
.q-progress li { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.q-progress li.on { background: var(--did); }
.q-count { font-family: var(--num); font-weight: 500; font-size: 22px; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.q-body { padding-top: 28px; flex: 1; display: flex; flex-direction: column; }
.q-num { font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--did-text); }
.q-title { margin: 8px 0 24px; font-size: 26px; line-height: 1.45; }
.q-title:focus { outline: none; }
.q-opts { display: flex; flex-direction: column; gap: 12px; }
.q-opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 10px 18px; text-align: left; font-size: 17px; font-weight: 700; line-height: 1.45; }
.q-no { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; }
.q-opt[aria-pressed="true"], .q-opt[aria-pressed="true"]:hover { background: var(--key-on); color: var(--key-on-fg); }
.q-note { margin: auto 0 28px; padding-top: 28px; font-size: 12px; line-height: 1.7; color: var(--ink-3); }
.page-quiz footer { margin-top: 0; }

/* ---- 結論の数字のカード（KOK-009）----
 * 1画面で言いたいことを1つ決め、見出しの一文にする。答えは「大きな数字＋短い一文」、出典は1行で小さく。
 * 文字の大きさは、大きな数字 / 見出し 26 / 一文 18 / 本文 14 / 注 12 の段で、段の差をはっきりさせる。字間は広げない。
 */
.eyebrow { font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink-4); }
.fig-card { padding: 22px 20px; border-radius: 22px; overflow: hidden; }
.fig-card + .fig-card { margin-top: 12px; }
.fc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.fc-label { font-size: 13px; font-weight: 900; line-height: 1.6; color: var(--side-text); }
.lean-tag { font-size: 11px; font-weight: 700; line-height: 1.5; color: var(--on-side); background: var(--side-text); padding: 2px 8px; border-radius: 6px; }
.big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; margin-top: 2px; font-family: var(--num); font-weight: 600; font-size: 64px; line-height: 1; letter-spacing: 0; color: var(--side-big); }
.big .u { font-family: var(--sans); font-size: 20px; font-weight: 900; line-height: 1; }
.is-primary .big { font-size: 104px; line-height: .95; }
.is-primary .big .u { font-size: 26px; }
.fc-say { margin-top: 6px; font-size: 18px; line-height: 1.5; font-weight: 900; text-wrap: balance; }
.fc-lead { margin-top: 8px; }
.fc-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.fc-row .bar1 { flex: 1; margin-top: 0; }
.fc-pct { font-family: var(--num); font-weight: 600; font-size: 28px; line-height: 1; color: var(--side-text); }
.fig-card > .bar1 { margin-top: 12px; }
.fc-src { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--ink-4); }
.fc-src b { font-weight: 700; color: var(--ink-2); }
.fc-more, .fc-ours { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--ink-4); }
.fc-none { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--ink-4); }
.roads-note { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--ink-4); }
.roads > .roads-note { padding: 12px 20px; margin: 0; background: var(--sub); }

.bar1 { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--side-track); }
.bar1 i { display: block; height: 100%; background: var(--side); }
.fig-source { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--ink-4); }
.fig-source a { color: inherit; }
.fig-none { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--ink-4); }

/* 内訳の帯（道の色の濃さ）と、畳んだ凡例 */
.stack { display: block; width: 100%; height: 12px; margin-top: 12px; border-radius: 6px; overflow: hidden; }
.t-r2 { fill: var(--side, var(--did)); background: var(--side, var(--did)); }
.t-r1 { fill: color-mix(in srgb, var(--side, var(--did)) 58%, var(--card)); background: color-mix(in srgb, var(--side, var(--did)) 58%, var(--card)); }
.t-mid { fill: var(--mid); background: var(--mid); }
.t-n1 { fill: color-mix(in srgb, var(--side, var(--did)) 30%, var(--card)); background: color-mix(in srgb, var(--side, var(--did)) 30%, var(--card)); }
.t-n2 { fill: color-mix(in srgb, var(--side, var(--did)) 15%, var(--card)); background: color-mix(in srgb, var(--side, var(--did)) 15%, var(--card)); }
.t-rest { fill: var(--line-soft); background: var(--line-soft); }
.stack .gap { fill: var(--card); }
.fig-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.fig-legend li { display: inline-flex; align-items: center; gap: 6px; }
.fig-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.fig-legend i.t-n2, .fig-legend i.t-rest { box-shadow: inset 0 0 0 1px var(--line); }
.table-view table { border-collapse: collapse; margin: 8px 0 8px; font-size: 13px; }
.table-view th, .table-view td { padding: 4px 16px 4px 0; text-align: left; border-bottom: 1px solid var(--line-soft); }
.table-view td.n { text-align: right; font-variant-numeric: tabular-nums; }

/* 畳むもの（summary は 44px 以上、矢印つき） */
.table-view, .notes { font-size: 12px; color: var(--ink-4); }
.table-view summary, .notes summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; font-weight: 700; }
.table-view summary::after, .notes summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -3px 0 0 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.table-view[open] summary::after, .notes[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.table-view summary { display: inline-flex; }
.table-view summary::-webkit-details-marker, .notes summary::-webkit-details-marker { display: none; }

/* 理由の横棒：1位か、気にしていることに近い理由だけを道の色にする。ほかは灰色 */
.reasons-card { margin-top: 16px; padding: 16px 16px 12px; border-radius: 16px; }
.reasons { margin: 0; }
.hb-title { font-size: 14px; font-weight: 900; line-height: 1.6; margin-bottom: 12px; }
.hb-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.hb-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--ink-2); }
.hb-val { flex: none; font-family: var(--num); font-size: 18px; font-weight: 600; line-height: 1; }
.hb-val small { font-size: 12px; }
.hb-track { display: block; height: 8px; border-radius: 4px; background: #E3E5EA; margin-top: 4px; }
.hb-track i { display: block; height: 100%; border-radius: 4px; background: var(--bar-other); }
.hb-row.is-hi .hb-track i { background: var(--side); }
.hb-row.is-hi .hb-line { font-weight: 900; color: var(--side-text); }
.mine-tag { display: block; width: max-content; margin-top: 3px; font-size: 11px; font-weight: 700; line-height: 1.6; padding: 0 6px; border-radius: 4px; background: var(--yellow); color: var(--ink); }
.reasons .fig-source { margin-top: 12px; }

/* ---- 結果 ---- */
.res-top { padding-top: 12px; }
.res-title { margin-top: 6px; font-size: 26px; line-height: 1.4; font-weight: 900; }
.res-title:focus { outline: none; }
.res-fork { margin-top: 20px; }
.res-sec { margin-top: 28px; }
.res-sec h2 { font-size: 16px; line-height: 1.5; }
.res-sec .reasons { margin-top: 12px; }
.res-next { margin-top: 32px; display: flex; flex-direction: column; gap: 10px; }
.save-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.btn-line, .btn-line:hover, .btn-line:active { background: var(--card); box-shadow: none; transform: none; }
.btn-line { min-height: 52px; }
.btn-line:hover { background: var(--sub); }
.done-msg { font-size: 13px; color: var(--did-text); min-height: 0; }
.done-msg:empty { display: none; }
.notes { margin: 20px 0 8px; }
.notes p, .src-list { margin-top: 6px; line-height: 1.7; }
.src-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.notes a { color: inherit; }
.empty { padding: 32px 0 8px; }
.empty h1 { font-size: 26px; line-height: 1.45; }
.empty .lead { margin: 12px 0 20px; }

/* ---- 黒地のカード：あなたへの一言と紹介（PR）----
 * 黄は「あなたが気にしていること」のラベルだけ。紹介のボタンは白（押すもの）
 */
.dark-card, .pr-box, .inline-refer { margin-top: 28px; background: var(--pr-bg); color: var(--pr-fg); border-radius: 22px; padding: 22px 20px; }
.dk-label { font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--yellow); }
.dk-head { margin-top: 8px; font-size: 22px; line-height: 1.45; font-weight: 900; text-wrap: balance; }
.dk-head.is-fact { font-size: 16px; line-height: 1.7; font-weight: 700; }
.dk-head b { font-weight: 900; }
.dk-sub { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--pr-sub); }
.dk-act { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.dk-key { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 8px 14px; border-radius: 14px; background: var(--pr-key); color: var(--pr-key-fg); text-decoration: none; font-size: 16px; font-weight: 900; line-height: 1.4; text-align: center; }
.dk-key:hover { color: var(--pr-key-fg); background: #E6E8EC; }
.dk-note { margin-top: 10px; font-size: 11px; line-height: 1.7; color: var(--pr-note); }
.dk-note a { color: inherit; }
.dark-card .pr, .pr-box .pr, .inline-refer .pr { font-size: 10px; font-weight: 900; line-height: 1.4; color: var(--pr-fg); border: 1.5px solid var(--pr-fg); border-radius: 4px; padding: 1px 5px; }

/* 紹介の一覧（分岐のページ下、回答の後） */
.pr-top { display: flex; align-items: center; gap: 8px; }
.pr-badge { font-size: 11px; font-weight: 900; line-height: 1.4; border: 1.5px solid var(--pr-fg); border-radius: 4px; padding: 1px 5px; }
.pr-sub { font-size: 12px; line-height: 1.5; color: var(--pr-sub); }
.pr-head { margin-top: 10px; font-size: 20px; line-height: 1.45; font-weight: 900; color: var(--pr-fg); text-wrap: balance; }
.pr-text { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--pr-sub); }
.pr-links { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.pr-links li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 6px; }
.pr-key { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 8px 16px; border-radius: 14px; background: var(--pr-key); color: var(--pr-key-fg); text-decoration: none; font-size: 16px; font-weight: 900; line-height: 1.4; text-align: center; }
.pr-key:hover { color: var(--pr-key-fg); background: #E6E8EC; }
.pr-key.is-sub { min-height: 52px; background: transparent; color: var(--pr-fg); border: 1.5px solid var(--pr-line); font-size: 15px; font-weight: 700; }
.pr-key.is-sub:hover { color: var(--pr-fg); background: rgb(255 255 255 / .08); }
.pr-links .what { grid-column: 1 / -1; font-size: 11px; line-height: 1.6; color: var(--pr-note); }
.pr-note { margin-top: 14px; font-size: 11px; line-height: 1.7; color: var(--pr-note); }
.inline-refer > p:first-child { font-size: 14px; line-height: 1.7; color: var(--pr-sub); }
.inline-refer::before { content: "PR"; display: inline-block; margin-bottom: 10px; font-size: 11px; font-weight: 900; line-height: 1.4; border: 1.5px solid var(--pr-fg); border-radius: 4px; padding: 1px 5px; }
.inline-links { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.inline-links a { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 8px 16px; border-radius: 14px; border: 1.5px solid var(--pr-line); color: var(--pr-fg); text-decoration: none; font-size: 15px; font-weight: 700; text-align: center; }
.inline-links a:first-child { background: var(--pr-key); color: var(--pr-key-fg); border-color: var(--pr-key); font-weight: 900; }
.inline-links a:hover { color: var(--pr-fg); background: rgb(255 255 255 / .08); }
.inline-links a:first-child:hover { color: var(--pr-key-fg); background: #E6E8EC; }

/* ---- 分岐ごとのページ ---- */
.intro { padding-top: 16px; }
.intro h1 { margin-top: 6px; font-size: 26px; line-height: 1.4; }
.intro .eyebrow + h1 { margin-top: 6px; }
.teaser { margin-top: 20px; }
.start-row { margin-top: 20px; }
.detail { margin-top: 64px; }
.detail > h2, .sec-h { font-size: 20px; line-height: 1.5; }
.sec-lead { margin-top: 6px; font-size: 13px; line-height: 1.7; color: var(--ink-4); }
.detail .fork { margin-top: 16px; }
.caveat { margin-top: 10px; font-size: 12px; line-height: 1.7; color: var(--ink-4); }

/* 詳しいデータ：道ごとのまとまり。誰の・どれだけ（大きな数字）・何について、の順 */
.roads { overflow: hidden; }
.road { padding: 20px; }
.road + .road { border-top: 1px solid var(--line-soft); }
.road-name { font-size: 13px; font-weight: 900; line-height: 1.6; color: var(--side-text); }
.say { margin: 0; }
.say-who { margin-top: 12px; font-size: 14px; font-weight: 700; line-height: 1.5; }
.say-what { margin-top: 2px; font-size: 15px; line-height: 1.7; }
.big-m { font-size: 56px; line-height: 1; margin-top: 2px; }
.big-m .u { font-size: 20px; }
.big-m .pct { margin-left: 8px; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-4); }
.fork .say + .say { margin-top: 20px; padding-top: 4px; border-top: 1px dashed var(--line); }
.say-text { font-size: 14px; line-height: 1.7; }
.say-text .ratio { font-weight: 900; }
.ours { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.ours-h { font-size: 12px; font-weight: 700; color: var(--ink-4); }

/* 読み物：見出しは結論の一文、段落は短く */
.article { margin-top: 8px; }
.article h3 { margin: 40px 0 10px; font-size: 20px; line-height: 1.5; text-wrap: balance; }
.article > p { font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.article > p + p { margin-top: 10px; }
.article .inline-refer { margin: 24px 0; }
.article .reasons-card { margin: 16px 0; }
.refer { margin-top: 48px; }
.others-sec { margin-top: 40px; }
.others-sec h2 { font-size: 20px; margin-bottom: 14px; }
.others { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

/* ---- 回答のページ ---- */
.ans-head { padding-top: 16px; }
.ans-head h1 { margin-top: 4px; font-size: 26px; line-height: 1.4; }
.ans-head .lead { margin-top: 10px; font-size: 14px; }
.picks { list-style: none; margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sec-h + .picks { margin-top: 12px; }
.ans-head + .sec-h { margin-top: 28px; }
.answer-box { margin-top: 4px; }

/* 質問は診断の画面と同じ部品：番号つきの大きな札。選ぶと墨の塗り */
.q { margin: 28px 0 0; padding: 0; border: 0; min-width: 0; }
.q legend { float: left; width: 100%; padding: 0; margin-bottom: 14px; font-size: 20px; font-weight: 900; line-height: 1.5; }
.q legend + * { clear: both; }
.qn { display: block; font-size: 13px; font-weight: 700; color: var(--did-text); margin-bottom: 4px; }
.sub-q { clear: both; margin: 14px 0 8px; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink-2); }
.qn + .sub-q, .q legend + .sub-q { margin-top: 0; }
.opts { display: flex; flex-direction: column; gap: 10px; }
.opts.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt { position: relative; display: block; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt > span { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 18px; font-size: 16px; font-weight: 700; line-height: 1.45; }
.opts.grid .opt > span { min-height: 56px; justify-content: center; text-align: center; padding: 8px 12px; }
.opt:hover > span { background: var(--sub); }
.opt input:checked + span { background: var(--key-on); color: var(--key-on-fg); }
.opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.opt-no { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; }
.submit-row { margin-top: 28px; }
.submit-row .small-note { margin-top: 12px; }
.submit-row .btn-go, .submit-row .btn-go:hover { background: var(--key-on); color: var(--key-on-fg); }
.form-error { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--didnt-text); }
.form-error:empty { display: none; }

/* 答えた後（KOK-010）：結論の一文 → あなたと同じ答えの人の割合 → このサイトの回答 → 黒地（後悔している人にだけ）→ 共感してもらう → 行き先
 * 色は、あなたの区分（道の色）と押すものだけ。帯の区分はほかを薄い道の色にして、あなたの区分だけを濃くする */
.af-top { padding-top: 12px; }
.af-head { margin-top: 6px; font-size: 26px; line-height: 1.4; font-weight: 900; }
.af-head:focus { outline: none; }
.nb { white-space: nowrap; }
.af-num { margin-top: 20px; }
.ab { position: relative; margin-top: 22px; }
.ab-bar { display: flex; height: 40px; border-radius: 10px; overflow: hidden; }
.ab-seg { display: flex; align-items: center; justify-content: center; min-width: 2px; font-size: 12px; font-weight: 900; line-height: 1; color: var(--on-side); white-space: nowrap; overflow: hidden; }
.ab-seg + .ab-seg { border-left: 2px solid var(--card); }
.ab-t0 { background: var(--side-track); }
.ab-t1 { background: color-mix(in srgb, var(--side) 30%, var(--card)); }
.ab-seg.is-you { background: var(--side); }
.ab-tag { position: absolute; top: -22px; transform: translateX(-50%); font-size: 12px; font-weight: 900; line-height: 20px; color: var(--side-text); white-space: nowrap; }
.ab-tag.is-left { left: 0; transform: none; }
.ab-tag.is-right { right: 0; transform: none; }
.ab-caps { display: grid; margin-top: 6px; font-size: 11px; line-height: 1.5; color: var(--ink-3); }
.ab-caps span { min-width: 0; }
.ab-caps .is-you, .ab-legend .is-you { font-weight: 900; color: var(--side-text); }
.ab-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.ab-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ab-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ab-legend i.is-you { background: var(--side); }
.af-ours { margin-top: 12px; padding: 20px; border-radius: 22px; }
.af-k { font-size: 13px; font-weight: 900; line-height: 1.6; }
.af-say { margin-top: 6px; font-size: 16px; line-height: 1.6; font-weight: 700; }
.af-ours .fc-src { margin-top: 12px; }
.af-prog { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.af-track { flex: 1; height: 8px; border-radius: 4px; background: var(--card-edge); overflow: hidden; }
.af-track i { display: block; height: 100%; border-radius: 4px; background: var(--ink); }
.af-n { font-size: 13px; font-weight: 700; white-space: nowrap; }
.af-n b { font-family: var(--num); font-size: 20px; font-weight: 600; }
.af-share { margin-top: 28px; }
.af-share h2 { margin-bottom: 12px; font-size: 16px; line-height: 1.5; }
.share-card { padding: 18px; background: var(--card); border: 1.5px solid var(--key-line); border-radius: 18px; box-shadow: 0 3px 0 var(--key-line); }
.sc-mine { font-size: 12px; font-weight: 700; line-height: 1.6; color: var(--ink-4); }
.sc-feel { margin-top: 6px; font-size: 20px; line-height: 1.4; font-weight: 900; }
.sc-same { margin-top: 4px; font-size: 13px; line-height: 1.6; }
.sc-pct { font-family: var(--num); font-size: 20px; font-weight: 600; color: var(--side-big); }
.af-share .save-row { margin-top: 12px; }
.btn-fill, .btn-fill:hover, .btn-fill:active { background: var(--key-on); color: var(--key-on-fg); box-shadow: none; transform: none; }
.af-share .btn { min-height: 52px; }
.af-go { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.ans-stats { margin-top: 40px; }
.ans-stats .sec-h { margin-bottom: 12px; }
.ans-more { margin-top: 12px; display: flex; flex-wrap: wrap; column-gap: 20px; }
.done-card h2 { font-size: 20px; line-height: 1.5; }

/* ---- 幅の広い画面 ---- */
@media (min-width: 600px) {
  .page-col, .page-top { padding: 0 32px; }
  .page-col { max-width: 784px; }
  .page-top { max-width: 784px; }
  .choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .others, .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn-go { display: inline-flex; width: auto; min-width: 320px; }
  .submit-row .btn-go { display: flex; width: 100%; }
  .done-row .btn { width: auto; min-width: 280px; }
  .res-title, .intro h1, .ans-head h1, .af-head { font-size: 32px; }
  .is-primary .big { font-size: 128px; }
  .is-primary .big .u { font-size: 32px; }
  .fig-card { padding: 26px 28px; }
  .fc-say { font-size: 20px; }
  .road { padding: 24px; }
  .dark-card, .pr-box, .inline-refer { padding: 26px 28px; }
  .dk-head { font-size: 26px; }
  .dk-act { max-width: 420px; }
  .page-quiz { max-width: 720px; padding: 0 32px; }
  .opts.side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* パソコンのトップ：見出しと例のカードの2段組、10の選択肢は5列の札 */
@media (min-width: 960px) {
  .page-top { max-width: 1184px; }
  .page-top .mast { padding: 16px 0 0; }
  .page-top .site { font-size: 18px; gap: 10px; }
  .page-top .logo { width: 26px; height: 26px; }
  .page-top .mast nav { gap: 28px; }
  .page-top .mast nav a { font-size: 14px; color: var(--ink-2); }
  .page-top .pr-line { font-size: 12px; }
  .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: center; padding: 56px 0 40px; }
  .hero h1 { font-size: 56px; line-height: 1.3; }
  .hero-lead { margin-top: 22px; font-size: 17px; line-height: 1.9; max-width: 520px; }
  .example { margin-top: 0; border-radius: 24px; padding: 28px 28px 22px; }
  .example-h { font-size: 13px; }
  .example .fork-svg { max-width: 460px; margin-top: 8px; }
  .example .fork-svg path { stroke-width: 7; }
  .ex-cols { gap: 20px; margin-top: 6px; }
  .ex-who { font-size: 13px; }
  .ex-pct { font-size: 92px; }
  .ex-pct .u { font-size: 34px; }
  .ex-what { font-size: 13px; line-height: 1.7; }
  .ex-source { margin-top: 14px; font-size: 11px; }
  .pick { padding: 24px 0 0; }
  .pick h2 { margin-bottom: 20px; font-size: 26px; }
  .choices { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .choices a { flex-direction: column; align-items: stretch; justify-content: space-between; min-height: 144px; padding: 16px 18px; border-radius: 16px; box-shadow: 0 4px 0 var(--key-line); font-size: 18px; font-weight: 900; }
  .choices a:active { transform: translateY(4px); }
  .c-q { display: inline; }
  .c-meta .i-arrow { width: 20px; height: 20px; }
  .how { padding-top: 72px; }
  .how h2 { font-size: 26px; margin-bottom: 20px; }
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .how .small-note { max-width: 760px; }
  .page-top .done-card { margin-top: 40px; padding: 24px 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; }
  .page-top .done-card h2, .page-top .done-card > p:not(.done-row) { grid-column: 1; }
  .page-top .done-card .done-row { grid-column: 2; grid-row: 1 / span 2; margin-top: 0 !important; }
  .others { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- KOK-011：心配したことは起きたか、時間の軸、調査がない側、数字が違う理由、後悔が多い分かれ道、決断メモ ----
 * 濃淡の原則のまま：答えは大きな数字＋短い一文、説明は小さく、色は道の色（数字）と押すものだけ。データが足りないときは部品ごと出さない。
 */
.co-card { margin-top: 20px; }
.concern-opts { gap: 8px; }
.concern-opts .opt > span { min-height: 48px; font-size: 14px; }

/* 公開調査がない側：1文と、回答へのボタン */
.ns { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.ns-text { font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.ns-text b { font-weight: 900; }
.ns-btn { margin-top: 10px; min-height: 48px; font-size: 14px; }
.ns-entry { margin: 18px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.ns-entry .ns-text + .ns-text { margin-top: 6px; }
.af-first { margin-top: 8px; font-size: 14px; line-height: 1.6; font-weight: 700; color: var(--side-text); }

/* 後悔は時間でどう変わるか：区分ごとの縦の棒 */
.yr { margin-top: 12px; padding: 20px; border-radius: 22px; }
.detail .yr { margin-top: 16px; }
.yr-k { font-size: 13px; font-weight: 900; line-height: 1.6; color: var(--side-text); }
.yr-head { margin-top: 6px; font-size: 18px; line-height: 1.5; font-weight: 900; text-wrap: balance; }
.yr-cols { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 16px; }
.yr-col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.yr-pct { font-family: var(--num); font-weight: 600; font-size: 14px; line-height: 1; color: var(--ink-2); }
.yr-pct b { font-size: 28px; font-weight: 600; }
.yr-bar { display: flex; align-items: flex-end; width: 100%; height: 72px; border-radius: 8px; background: var(--side-track); overflow: hidden; }
.yr-bar i { display: block; width: 100%; background: color-mix(in srgb, var(--side) 45%, var(--card)); }
.yr-col.is-last .yr-bar i { background: var(--side); }
.yr-lab { font-size: 12px; font-weight: 700; line-height: 1.4; text-align: center; }
.yr-n { font-size: 11px; line-height: 1.4; color: var(--ink-4); }
.yr .fc-src { margin-top: 14px; }

/* 数字が違う理由 */
.gap { margin-top: 40px; }
.gap-title { font-size: 20px; line-height: 1.5; }
.gap-head { margin-top: 6px; font-size: 18px; line-height: 1.5; font-weight: 900; text-wrap: balance; }
.gap-cols { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.gap-col { padding: 16px 14px; border-radius: 18px; background: var(--card); box-shadow: 0 1px 0 var(--card-edge); }
.gap-by { font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--ink-3); }
.gap-col .big { color: var(--ink); font-size: 52px; }
.gap-dl { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.gap-dl dt { margin-top: 6px; font-weight: 900; color: var(--ink-2); }
.gap-dl dd { margin: 0; }
.gap-why { margin-top: 12px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
@media (max-width: 420px) { .gap-cols { grid-template-columns: minmax(0, 1fr); } }

/* 後悔が多い分かれ道（トップ） */
.rank { padding-top: 40px; }
.rank h2 { font-size: 20px; line-height: 1.5; }
.rk-lead { margin-top: 6px; font-size: 13px; line-height: 1.7; color: var(--ink-4); }
.rk-list { list-style: none; margin-top: 14px; display: grid; gap: 8px; }
.rk-row a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; border-radius: 14px; background: var(--card); box-shadow: 0 1px 0 var(--card-edge); color: var(--ink); text-decoration: none; }
.rk-row a:hover { background: var(--sub); }
.rk-no { flex: none; font-family: var(--num); font-size: 20px; font-weight: 600; width: 22px; color: var(--ink-4); }
.rk-name { flex: 1; display: flex; flex-direction: column; font-size: 15px; font-weight: 700; line-height: 1.4; }
.rk-name small { font-size: 11px; font-weight: 500; color: var(--ink-4); }
.rk-pct { font-family: var(--num); font-size: 16px; font-weight: 600; color: var(--side-text); }
.rk-pct b { font-size: 30px; font-weight: 600; }
.rank .small-note { margin-top: 10px; }

/* 決断メモ（準備中）：押すものは1つ。数字は出さない */
.memo { margin-top: 28px; padding: 18px 18px 20px; border: 1.5px dashed var(--line); border-radius: 18px; }
.memo-k { font-size: 13px; font-weight: 900; line-height: 1.6; color: var(--ink-3); }
.memo-text { margin-top: 6px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.memo-act { margin-top: 12px; }
.memo-act .btn { min-height: 48px; font-size: 14px; }
.memo-done { font-size: 14px; line-height: 1.7; font-weight: 700; }

/* ---- 選ぶ前に確かめられること（KOK-012）----
 * 見出しは結論の一文。各項目は、誰に（小さなラベル）、何と聞く（太字の一文）、どこを見る（小さめ）、出典（さらに小さく）の濃淡
 */
.chk { margin-top: 28px; }
.detail .chk { margin-top: 40px; }
.chk-k { font-size: 12px; font-weight: 700; line-height: 1.6; color: var(--ink-3); }
.chk-head { margin-top: 4px; font-size: 20px; line-height: 1.5; font-weight: 900; text-wrap: balance; }
.chk-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.chk-item { background: var(--card); border-radius: 18px; padding: 16px 18px 14px; box-shadow: 0 1px 0 var(--card-edge); }
.chk-who { font-size: 12px; line-height: 1.7; color: var(--ink-3); }
.chk-who span, .chk-look b { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; background: var(--line-soft); color: var(--ink-2); font-size: 11px; font-weight: 700; line-height: 1.7; }
.chk-ask { margin-top: 8px; font-size: 16px; line-height: 1.7; font-weight: 900; color: var(--ink); }
.chk-look { margin-top: 8px; font-size: 13px; line-height: 1.75; color: var(--ink-2); }
.chk-src { margin-top: 8px; font-size: 11px; line-height: 1.7; color: var(--ink-4); }
.chk-src a { color: inherit; text-underline-offset: 2px; }
.chk-more { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.chk-more summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; font-weight: 700; }
.chk-more summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -3px 0 0 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.chk-more[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.chk-more summary::-webkit-details-marker { display: none; }
.chk-more[open] summary { margin-bottom: 4px; }
.chk-note { margin-top: 12px; font-size: 11px; line-height: 1.7; color: var(--ink-4); }
@media (min-width: 600px) {
  .chk-head { font-size: 24px; }
  .chk-ask { font-size: 17px; }
}