/* Layout: 紺の帯（はじめの見出し・結果の見出し・フッター）と白い本文。
   路線図のように、質問ごと・サービスの種類ごとに線の色を割り当てる（--c1〜--c9） */
:root {
  --bg: #F2F5FA;
  --surface: #FFFFFF;
  --ink: #0F1B2D;
  --muted: #55637A;
  --rule: #D9E0EB;
  --band: #10284A;
  --band-grid: #19355F;
  --band-ink: #FFFFFF;
  --band-muted: #BAC8DE;
  --cta: #FFC21A;
  --cta-ink: #10213A;
  --cta-edge: #C99100;
  --go: #DD4F0E;
  --go-ink: #FFFFFF;
  --go-edge: #A93A08;
  --c1: #12924A;
  --c2: #1F66D6;
  --c3: #D9701A;
  --c4: #D63A6E;
  --c5: #6E4AD6;
  --c6: #0E8C9A;
  --c7: #B7791F;
  --c8: #C93636;
  --c9: #3F6E8C;
  --on-c: #FFFFFF;
  /* 紺の帯の上の路線図。帯はどちらのテーマでも暗いので固定 */
  --m1: #2DBE6C;
  --m2: #4D8DF0;
  --m3: #F59A3C;
  --m4: #EF6C98;
  --m5: #A486F5;
  --m-stn: #FFFFFF;
  --note-bg: #FFF4D4;
  --note-ink: #5C4400;
  --shadow: 0 1px 2px rgba(15, 27, 45, .06), 0 8px 24px rgba(15, 27, 45, .07);

  --font-display: "M PLUS 1", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-num: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --radius: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A111D;
    --surface: #131C2C;
    --ink: #E7EDF6;
    --muted: #9AA8BF;
    --rule: #26334A;
    --band: #0D1C36;
    --band-grid: #15294A;
    --band-ink: #F2F6FC;
    --band-muted: #A9B8D0;
    --cta: #FFC93A;
    --cta-ink: #10213A;
    --cta-edge: #B88400;
    --go: #FF6B2C;
    --go-ink: #1A0A02;
    --go-edge: #B9440F;
    --c1: #2DBE6C;
    --c2: #5A92F2;
    --c3: #F09040;
    --c4: #EF6C98;
    --c5: #9C80F2;
    --c6: #2FB9C7;
    --c7: #E0A83E;
    --c8: #F06B6B;
    --c9: #6FA6C9;
    --on-c: #0A111D;
    --m-stn: #E7EDF6;
    --note-bg: #362C10;
    --note-ink: #F3DE9E;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A111D;
  --surface: #131C2C;
  --ink: #E7EDF6;
  --muted: #9AA8BF;
  --rule: #26334A;
  --band: #0D1C36;
  --band-grid: #15294A;
  --band-ink: #F2F6FC;
  --band-muted: #A9B8D0;
  --cta: #FFC93A;
  --cta-ink: #10213A;
  --cta-edge: #B88400;
  --go: #FF6B2C;
  --go-ink: #1A0A02;
  --go-edge: #B9440F;
  --c1: #2DBE6C;
  --c2: #5A92F2;
  --c3: #F09040;
  --c4: #EF6C98;
  --c5: #9C80F2;
  --c6: #2FB9C7;
  --c7: #E0A83E;
  --c8: #F06B6B;
  --c9: #6FA6C9;
  --on-c: #0A111D;
  --m-stn: #E7EDF6;
  --note-bg: #362C10;
  --note-ink: #F3DE9E;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
}
[hidden] { display: none !important; }
img { max-width: 100%; }

.wrap {
  max-width: 44rem;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

h1, h2, h3 { margin: 0; line-height: 1.45; text-wrap: balance; word-break: auto-phrase; overflow-wrap: anywhere; }
h1, h2 { font-family: var(--font-display); font-weight: 800; }
h2 { font-size: 1.35rem; }
.h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; }
p { margin: 0; }
a { color: var(--c2); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- PR表示・試作の表示 ---------- */
.prbar { background: var(--surface); border-bottom: 1px solid var(--rule); font-size: .78rem; color: var(--muted); }
.prbar__in { display: flex; gap: .5rem; align-items: center; padding-block: .35rem; }
.pr {
  flex: none;
  font-family: var(--font-num); font-weight: 700; font-size: .72rem; letter-spacing: .08em; line-height: 1.6;
  background: var(--ink); color: var(--surface);
  border-radius: 4px; padding: 0 .4rem;
}
.proto { background: var(--note-bg); color: var(--note-ink); font-size: .8rem; line-height: 1.6; }
.proto .wrap { padding-block: .45rem; }

/* ---------- ヘッダー ---------- */
.site { background: var(--surface); border-bottom: 1px solid var(--rule); }
.site__in { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-block: .65rem; }
.brand {
  display: inline-flex; gap: .5rem; align-items: center;
  font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; letter-spacing: .02em;
  color: var(--ink); text-decoration: none;
}
.logo { width: 44px; height: 28px; flex: none; }
.ln { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ln1 { stroke: var(--c1); }
.ln2 { stroke: var(--c2); }
.ln3 { stroke: var(--c3); }
.logo__stn { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.site__tag { font-size: .75rem; color: var(--muted); text-align: right; line-height: 1.4; }
@media (max-width: 419px) { .site__tag { display: none; } }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 3.2rem; padding: .7rem 1.5rem;
  border-radius: 999px; border: 0;
  font: inherit; font-weight: 700; line-height: 1.4;
  cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:disabled { opacity: .4; cursor: not-allowed; filter: none; transform: none; box-shadow: none; }
.btn--start {
  width: 100%; min-height: 3.6rem; font-size: 1.15rem;
  background: var(--cta); color: var(--cta-ink);
  box-shadow: 0 4px 0 var(--cta-edge);
}
.btn--start::after, .btn--go::after { content: "→"; font-family: var(--font-num); font-weight: 800; }
.btn--start:active, .btn--go:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cta-edge); }
.btn--go {
  width: 100%; font-size: 1.05rem;
  background: var(--go); color: var(--go-ink);
  box-shadow: 0 4px 0 var(--go-edge);
}
.btn--go:active { box-shadow: 0 1px 0 var(--go-edge); }
.btn--out::after { content: "↗"; }
.btn--ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); justify-self: center; }
@media (min-width: 600px) {
  .btn--start { width: auto; justify-self: start; padding-inline: 3rem; }
}
.linkbtn {
  justify-self: start;
  background: none; border: 0; padding: .35rem 0;
  font: inherit; font-size: .9rem; color: var(--muted);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- 共通のパーツ ---------- */
.panel { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.2rem 1.2rem; }
.sec-title { display: flex; align-items: center; gap: .55rem; font-size: 1.2rem; }
.sec-title::before {
  content: ""; flex: none; width: 6px; height: 1.15em; border-radius: 3px;
  background: linear-gradient(var(--c1) 0 33%, var(--c2) 33% 66%, var(--c3) 66%);
}
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; font-size: .85rem; font-weight: 700; }
.tag {
  display: inline-block; border-radius: 999px; padding: .05rem .65rem;
  background: var(--cta); color: var(--cta-ink);
  font-size: .75rem; font-weight: 700;
}
.chip {
  display: inline-flex; align-items: center;
  font-size: .78rem; line-height: 1.45; font-weight: 500;
  padding: .15rem .6rem; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
}

/* 駅ナンバリング風のバッジ。色は --qc（質問）か --kc（種類） */
.stn {
  flex: none; position: relative; z-index: 1;
  display: grid; place-items: center; align-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 11px;
  background: var(--qc, var(--c1)); color: var(--on-c);
  font-family: var(--font-num); font-weight: 800; font-size: 1.05rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stn small { display: block; font-family: var(--font-body); font-size: .62rem; font-weight: 700; letter-spacing: .06em; opacity: .85; margin-bottom: 1px; }

/* ---------- はじめの画面 ---------- */
.hero { position: relative; overflow: hidden; background: var(--band); color: var(--band-ink); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--band-grid) 1px, transparent 1px), linear-gradient(90deg, var(--band-grid) 1px, transparent 1px);
  background-size: 28px 28px;
}
.hero > .wrap { position: relative; }
.hero__in { display: grid; gap: 1rem; padding-block: 1.75rem 2rem; }
.hero .eyebrow { color: var(--band-muted); }
.hero h1 { font-size: clamp(1.8rem, 7.6vw, 2.7rem); font-weight: 900; line-height: 1.35; letter-spacing: .01em; }
.nw { white-space: nowrap; }
.hl { color: var(--cta); }
.hl b { font-family: var(--font-num); font-weight: 800; font-size: 1.35em; line-height: 1; margin-right: .05em; }
.hero__lead { color: var(--band-muted); max-width: 34em; word-break: auto-phrase; }
.hero__lead b { font-family: var(--font-num); font-weight: 800; font-size: 1.2em; color: var(--band-ink); margin-right: .05em; }
.hero__facts { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .85rem; color: var(--band-ink); }
.hero__facts li { display: inline-flex; align-items: center; gap: .35rem; }
.hero__facts li::before { content: "✓"; color: var(--m1); font-weight: 800; }
/* はじめの図（転職・就活とも）：「START 診断をはじめる」▶ 枠の中の8つの質問（駅）▶「GO あなたに合った○○サービス」。
   駅は app.js・shukatsu.js の drawRouteMap。START と GO はボタン（押すと診断が始まる）。START は GO と同じ形で少し小さい。
   スマホは上から START ▼ 枠 ▼ GO、広い画面は横に並べる */
.flow {
  --s: clamp(1.7rem, 7.4vw, 2.4rem); /* 駅の大きさ */
  --px: .65rem;                       /* 枠の左右の余白 */
  display: grid; grid-template-areas: "start" "a1" "panel" "a2" "goal";
  margin-block: .25rem;
}
.flow__panel {
  grid-area: panel; min-width: 0; padding: .95rem var(--px) .85rem;
  background: var(--band-grid); border: 1px solid color-mix(in srgb, var(--band-muted) 35%, transparent); border-radius: var(--radius);
}
.flow__stops { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); }
/* 駅をつなぐ線（1番から最後の駅まで） */
.flow__stops::before {
  content: ""; position: absolute; left: calc(50% / var(--n, 8)); right: calc(50% / var(--n, 8)); top: calc(var(--s) / 2 - 3px);
  height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--band-ink) 70%, transparent);
}
.flow__stops li { display: grid; justify-items: center; align-content: start; gap: .35rem; min-width: 0; }
.flow .stn { width: var(--s); height: var(--s); border-radius: 8px; font-size: calc(var(--s) * .5); box-shadow: 0 0 0 3px var(--band-grid); }
.flow__lbl { font-size: clamp(.6rem, 2.5vw, .76rem); font-weight: 700; line-height: 1.3; color: var(--band-muted); text-align: center; word-break: keep-all; }
.flow__cap { margin-top: .85rem; font-size: .9rem; font-weight: 700; line-height: 1.6; color: var(--band-ink); word-break: auto-phrase; }
.flow__cap b { font-family: var(--font-num); font-weight: 800; font-size: 1.35em; line-height: 1; color: var(--cta); margin-right: .05em; }
/* 矢印。スマホは下向き、広い画面は右向き */
.flow__arrow { justify-self: center; width: 0; height: 0; margin-block: .55rem; border-inline: 13px solid transparent; border-top: 14px solid var(--cta); }
.flow__arrow--in { grid-area: a1; }
.flow__arrow--out { grid-area: a2; }
/* START と GO のボタン（同じ形。START は少し小さい） */
.flow__start, .flow__goal {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .85rem 1rem; border: 0; border-radius: 14px; background: var(--cta); color: var(--cta-ink); box-shadow: 0 4px 0 var(--cta-edge);
  font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; line-height: 1.4; text-align: center;
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.flow__start { grid-area: start; padding-block: .7rem; font-size: .95rem; }
.flow__goal { grid-area: goal; }
.flow__start br, .flow__goal br { display: none; }
.flow__go { flex: none; padding: .15rem .45rem; border-radius: 6px; background: var(--cta-ink); color: var(--cta); font-family: var(--font-num); font-weight: 800; font-size: .75rem; letter-spacing: .08em; }
.flow__start .flow__go { font-size: .68rem; }
.flow__start:hover, .flow__goal:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--cta-edge); }
.flow__start:active, .flow__goal:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--cta-edge); }
.flow__start:focus-visible, .flow__goal:focus-visible { outline: 3px solid var(--band-ink); outline-offset: 4px; }
@media (min-width: 600px) {
  .flow {
    --s: 2.1rem; --px: .9rem;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "start a1 panel a2 goal"; align-items: center;
  }
  .flow__panel { padding-top: 1rem; }
  .flow__arrow { margin: 0 .5rem; border-block: 13px solid transparent; border-inline: 0; border-left: 15px solid var(--cta); }
  .flow__start, .flow__goal { flex-direction: column; gap: .35rem; padding: 1rem .8rem; }
  .flow__start { padding: .85rem .8rem; }
  .flow__goal { width: 9.5em; }
  .flow__start br, .flow__goal br { display: inline; }
}

.intro__body { display: grid; gap: 1.25rem; padding-block: 1.5rem 2.5rem; }

.routemap ol { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; }
.routemap li { position: relative; display: flex; align-items: center; gap: .85rem; padding-block: .3rem; font-weight: 500; }
.routemap li::before {
  content: ""; position: absolute; left: calc(1.25rem - 3px); top: 0; bottom: 0; width: 6px; background: var(--qc);
}
.routemap li:first-child::before { top: 50%; }
.routemap li:last-child::before { display: none; }
.routemap li.end .stn { background: var(--cta); color: var(--cta-ink); }
.routemap li.end > span:last-child { font-weight: 700; }

/* ---------- 質問 ---------- */
.qview { display: grid; gap: 1.25rem; padding-block: 1.25rem 2.5rem; }
.progress { display: grid; gap: .45rem; }
.progress__meta { display: flex; justify-content: space-between; align-items: baseline; font-size: .85rem; font-weight: 700; color: var(--qc); }
.progress__meta b { font-family: var(--font-num); font-size: 1.15rem; color: var(--ink); }
.progress__meta span:last-child { color: var(--muted); font-weight: 500; }
.track { list-style: none; margin: 0; padding: 0; position: relative; height: 22px; display: flex; align-items: center; justify-content: space-between; }
.track::before, .track::after { content: ""; position: absolute; left: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; }
.track::before { right: 0; background: var(--rule); }
.track::after { width: var(--done, 0%); background: var(--qc); transition: width .3s ease; }
.track li { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--rule); }
.track li.done { border-color: var(--dc); background: var(--dc); }
.track li.now { width: 22px; height: 22px; border: 5px solid var(--qc); background: var(--surface); }
.track li.goal { border-radius: 4px; }

.qhead { display: flex; gap: .9rem; align-items: flex-start; }
.qtext { min-width: 0; display: grid; gap: .3rem; }
.qtext h2 { font-size: clamp(1.3rem, 5.4vw, 1.6rem); }
.hint { color: var(--muted); font-size: .88rem; }

.choices { display: grid; gap: .6rem; }
/* 選択肢が多い質問（今の仕事）は2列に */
.choices--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.choices--grid .choice { word-break: auto-phrase; min-height: 3.2rem; padding: .6rem .8rem; font-size: .92rem; }
@media (min-width: 640px) { .choices--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 年齢は広い画面でも2列（前半・後半を横に並べる） */
@media (min-width: 640px) { .choices--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%; min-height: 3.5rem; padding: .75rem 1.1rem;
  background: var(--surface); color: var(--ink);
  border: 2px solid transparent; border-radius: 14px; box-shadow: var(--shadow);
  font: inherit; font-weight: 700; text-align: left; line-height: 1.5;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}
.choice::after {
  content: ""; flex: none; width: .55rem; height: .55rem;
  border-right: 3px solid var(--qc); border-bottom: 3px solid var(--qc);
  transform: rotate(-45deg);
}
.choice:hover { border-color: var(--qc); }
.choice[aria-pressed="true"] { background: var(--qc); border-color: var(--qc); color: var(--on-c); }
.choice[aria-pressed="true"]::after { border-color: var(--on-c); }
/* 選択肢の下に小さく補足（年齢の「20〜24歳」など） */
.choice__txt { display: grid; min-width: 0; }
.choice__txt small { font-size: .78rem; font-weight: 500; color: var(--muted); }
.choice[aria-pressed="true"] .choice__txt small { color: inherit; opacity: .85; }

.field { display: grid; gap: .9rem; }
select {
  width: 100%; min-height: 3.5rem; padding: .6rem 1rem;
  font: inherit; font-weight: 700; color: var(--ink); background: var(--surface);
  border: 2px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow);
}
select:focus-visible { border-color: var(--qc); }
.qnav { display: flex; }

/* 地域（複数選択） */
.area { display: grid; gap: .6rem; }
.area__label { font-size: .85rem; font-weight: 700; color: var(--muted); margin-top: .5rem; }
.choice--any::after {
  width: 1.2rem; height: 1.2rem; transform: none;
  border: 2px solid var(--rule); border-radius: 6px; background: var(--surface);
}
.choice--any[aria-pressed="true"]::after { border-color: var(--on-c); background: var(--on-c); box-shadow: inset 0 0 0 3px var(--qc); }
.regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 560px) { .regions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chipbtn {
  min-height: 2.85rem; padding: .45rem .6rem;
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--rule); border-radius: 12px;
  font: inherit; font-size: .92rem; font-weight: 700; line-height: 1.35; text-align: center;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.chipbtn:hover { border-color: var(--qc); }
.chipbtn[data-partial="true"] { border-color: var(--qc); border-style: dashed; }
.chipbtn[aria-pressed="true"] { background: var(--qc); border-color: var(--qc); border-style: solid; color: var(--on-c); }
.prefs { display: grid; gap: .5rem; }
.prefs details { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); padding: 0 .9rem; }
.prefs summary { cursor: pointer; padding-block: .65rem; font-weight: 700; }
.cnt { margin-left: .5rem; padding: 0 .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--qc); color: var(--on-c); }
.cnt:empty { display: none; }
.chipgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; padding-bottom: .9rem; }
@media (min-width: 560px) { .chipgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.area__count { font-size: .88rem; font-weight: 700; color: var(--ink); margin-top: .5rem; }
/* 希望の仕事（複数選択） */
.jobgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 640px) { .jobgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chipbtn--job { word-break: auto-phrase; min-height: 3.2rem; background: var(--surface); box-shadow: var(--shadow); border-color: transparent; }
.chipbtn--job[aria-pressed="true"] { border-color: var(--qc); }

/* ---------- 結果 ---------- */
.rband { position: relative; overflow: hidden; background: var(--band); color: var(--band-ink); }
.rband::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--band-grid) 1px, transparent 1px), linear-gradient(90deg, var(--band-grid) 1px, transparent 1px);
  background-size: 28px 28px;
}
.rband__in { position: relative; display: grid; gap: .7rem; padding-block: 1.5rem 1.4rem; }
.rband h2 { font-size: clamp(1.45rem, 6vw, 2rem); font-weight: 900; }
.rband__count { font-size: .95rem; color: var(--band-muted); }
.rband__sub { font-size: .88rem; color: var(--band-muted); }
/* 2社以上の登録をすすめるひとこと（app.js・shukatsu.js の TIP） */
.rband__tip { font-size: .92rem; font-weight: 700; line-height: 1.6; color: var(--band-ink); }
.rband__tip b { color: var(--cta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.rband__count b { font-family: var(--font-num); font-size: 2rem; font-weight: 800; color: var(--cta); margin-right: .2rem; vertical-align: -.1em; }
.summary { display: flex; flex-wrap: wrap; gap: .35rem; }
.rband .chip { background: transparent; border-color: var(--band-muted); color: var(--band-ink); }
.rband .linkbtn { color: var(--band-ink); }

.rbody { display: grid; gap: 1.4rem; padding-block: 1.25rem 2.5rem; }
.prnote { display: flex; gap: .5rem; align-items: center; font-size: .82rem; color: var(--muted); }
.empty { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.2rem; }

/* ひと目で比較 */
.compare { display: grid; gap: .7rem; }
.tablewrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--surface); }
.compare table { width: 100%; border-collapse: collapse; font-size: .82rem; line-height: 1.5; }
.compare th:first-child { width: 48%; }
.cname { display: flex; gap: .5rem; align-items: flex-start; }
.cname > span:last-child { display: grid; gap: .1rem; min-width: 0; }
.compare th, .compare td { padding: .65rem .6rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--rule); }
.compare thead th { background: var(--band); color: var(--band-ink); font-weight: 700; font-size: .78rem; white-space: nowrap; }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td:first-child { font-weight: 700; }
.compare td:first-child a { color: var(--ink); text-decoration-color: var(--kc); text-decoration-thickness: 2px; }
.cnum { flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: .05rem; border-radius: 7px; background: var(--kc); color: var(--on-c); font-family: var(--font-num); font-weight: 800; font-size: .8rem; }
.kdot { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; font-size: .72rem; font-weight: 700; color: var(--kc); }
.kdot::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--kc); }

/* カード */
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.card {
  overflow: hidden; scroll-margin-top: 1rem;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid var(--rule);
}
.card__head {
  display: flex; gap: .85rem; align-items: center;
  padding: .9rem 1.2rem;
  background: color-mix(in srgb, var(--kc) 12%, var(--surface));
  border-bottom: 3px solid var(--kc);
}
.card__head .stn { background: var(--kc); }
.card__title { min-width: 0; display: grid; gap: .1rem; }
.card__kind { font-size: .78rem; font-weight: 700; color: var(--kc); }
.card h3 { font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; line-height: 1.35; }
.card__body { display: grid; gap: .85rem; padding: 1rem 1.2rem 1.2rem; }

/* あなたとの相性（★と合っている点）。点数は app.js・shukatsu.js の parts()、★は starValue() */
.match { display: grid; gap: .4rem; padding: .7rem .9rem .8rem; border-radius: 12px; border: 1px solid var(--rule); background: color-mix(in srgb, var(--kc) 5%, var(--surface)); }
.match__title { font-size: .78rem; font-weight: 700; color: var(--muted); }
.rate { display: inline-flex; align-items: center; gap: .45rem; font-size: 1.4rem; line-height: 1; }
.stars { position: relative; display: inline-block; white-space: nowrap; }
.stars__bg { color: var(--rule); }
.stars__fg { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--c7); }
.rate__num { font-family: var(--font-num); font-weight: 800; font-size: .8em; color: var(--ink); }
.rate--sm { font-size: .8rem; gap: .3rem; }
.match__pts { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; font-size: .82rem; line-height: 1.5; }
.match__pts li { display: flex; gap: .3rem; }
.match__pts li::before { content: "＋"; color: var(--kc); font-weight: 800; }
.banner { display: flex; justify-content: center; }
.banner img { height: auto; }
/* カードの詳細の表。左の項目名のマスはサービスの種類の色 */
.spec { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; font-size: .9rem; line-height: 1.65; }
.spec th { width: 1%; white-space: nowrap; padding: .7rem .9rem; background: var(--kc); color: var(--on-c); font-size: .8rem; font-weight: 700; text-align: center; vertical-align: middle; }
.spec td { padding: .7rem .9rem; vertical-align: middle; overflow-wrap: anywhere; }
.spec tr + tr th { border-top: 1px solid color-mix(in srgb, var(--on-c) 35%, var(--kc)); }
.spec tr + tr td { border-top: 1px solid var(--rule); }
.checked { font-size: .75rem; color: var(--muted); text-align: center; }

.more { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0 1.2rem; }
.more summary { cursor: pointer; padding-block: .85rem; font-weight: 700; }
.more ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.more li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; border-top: 1px solid var(--rule); padding-top: .6rem; }
.more li > span { min-width: 0; line-height: 1.5; }
.more small { color: var(--muted); }
.more a { flex: none; font-size: .9rem; font-weight: 700; }

.rule { display: grid; gap: .5rem; font-size: .88rem; color: var(--muted); }
.rule .h3 { color: var(--ink); }
.rule ol { margin: 0; padding-left: 1.4em; display: grid; gap: .2rem; }

/* ---------- 種類の説明（結果画面の下。app.js・shukatsu.js の kindsGuide） ---------- */
.kinds { display: grid; gap: .8rem; }
@media (min-width: 640px) { .kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kind {
  display: grid; gap: .45rem; align-content: start;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.1rem 1.2rem 1.2rem;
}
.kind__icon {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 14px;
  background: var(--kc); color: var(--on-c);
}
.kind__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kind h3, .kind h4 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--kc); }
/* 結果画面の下に出す「○○サービスの3つの種類」（転職・就活とも） */
.kindsguide { display: grid; gap: .9rem; }
.kind p { font-size: .9rem; color: var(--muted); }
.notes { margin: .5rem 0 0; padding-left: 1.2em; display: grid; gap: .3rem; color: var(--muted); font-size: .92rem; }

/* ---------- フッター ---------- */
.about { background: var(--band); color: var(--band-muted); }
.about__in { display: grid; gap: 1rem; padding-block: 2.25rem 3rem; font-size: .85rem; }
.about h2 { font-size: 1.05rem; color: var(--band-ink); }
.about dl { margin: 0; display: grid; gap: .7rem; }
.about dl div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: .75rem; }
.about dt { font-weight: 700; color: var(--band-ink); }
.about dd { margin: 0; }
.about__brand { font-family: var(--font-display); font-weight: 900; color: var(--band-ink); margin-top: .5rem; }

/* ---------- 一覧ページ（shokushu/・nendai/。site/build_pages.py が作る） ---------- */
.crumbs ol { list-style: none; margin: 0; padding: .55rem 0; display: flex; flex-wrap: wrap; gap: .2rem .5rem; font-size: .78rem; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; gap: .5rem; }
.crumbs li + li::before { content: "›"; color: var(--muted); }
.crumbs a { color: var(--muted); }
.rband h1 { font-size: clamp(1.5rem, 6.4vw, 2.2rem); font-weight: 900; }
.lp-lead { display: grid; gap: .5rem; font-size: .95rem; }
.lp-sec { display: grid; gap: .8rem; }
.lp-sec .sec-title small, .jobnav small { font-family: var(--font-num); font-weight: 700; font-size: .8rem; color: var(--muted); }
.lp-sec .sec-title small { margin-left: .1rem; }
.lp-note { font-size: .9rem; color: var(--muted); }
.lp-cta { display: grid; gap: .7rem; justify-items: center; text-align: center; }
.lp-cta__lead { font-weight: 700; text-wrap: balance; }
.lp-cta__sub { font-size: .8rem; color: var(--muted); }
.lp-cta .btn--start { justify-self: stretch; }
@media (min-width: 600px) { .lp-cta .btn--start { justify-self: center; } }
.lp-mini { list-style: none; margin: 0; padding: .3rem 1.2rem; display: grid; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.lp-mini li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding-block: .7rem; }
.lp-mini li + li { border-top: 1px solid var(--rule); }
.lp-mini li > span { min-width: 0; line-height: 1.5; }
.lp-mini small { color: var(--muted); }
.lp-mini a { flex: none; font-size: .9rem; font-weight: 700; }
.lp-nav { display: grid; gap: .8rem; }
.jobnav { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 640px) { .jobnav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-nav .jobnav { margin: 0; }
.jobnav a {
  display: flex; justify-content: space-between; align-items: center; gap: .4rem; height: 100%;
  padding: .6rem .8rem; border: 1px solid var(--rule); border-radius: 12px;
  background: var(--surface); color: var(--ink); font-size: .88rem; font-weight: 700; line-height: 1.45;
  text-decoration: none;
}
.jobnav small { flex: none; white-space: nowrap; }
.jobnav a:hover { border-color: var(--c2); }
.jobnav a[aria-current="page"] { border-color: var(--ink); background: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ---------- マネールート診断で足したもの（site/money/ だけ） ---------- */
.routes__lead { font-weight: 700; color: var(--band-ink); margin-top: .25rem; }
.routes { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 640px) { .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.route {
  width: 100%; height: 100%;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem;
  padding: .85rem 1rem; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--ink);
  border: 0; border-left: 6px solid var(--kc); border-radius: 14px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
  font: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}
.route:hover { transform: translateY(-1px); }
.route:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.route__icon { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 12px; background: var(--kc); color: var(--on-c); }
.route__icon svg, .qroute__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.route__txt { display: grid; gap: .1rem; min-width: 0; line-height: 1.4; }
.route__txt b { font-family: var(--font-display); font-weight: 900; font-size: 1.08rem; }
.route__txt small { font-size: .78rem; color: var(--muted); }
.route__n { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.route__n b { font-family: var(--font-num); font-size: 1.2rem; font-weight: 800; color: var(--ink); margin-right: .1rem; }
.qroute { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 700; color: var(--kc); }
.qroute__icon { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 9px; background: var(--kc); color: var(--on-c); }
.qroute__icon svg { width: 18px; height: 18px; }
.chipbtn small { display: block; font-size: .7rem; font-weight: 500; opacity: .8; margin-top: .15rem; }
.rband__btns { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.notice { border-left: 5px solid var(--kc); background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); padding: .8rem 1rem; font-size: .88rem; line-height: 1.7; }
.others { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0 1.2rem; }
.others summary { cursor: pointer; padding-block: .85rem; font-weight: 700; }
.others .results--more { margin: .2rem 0 1.2rem; }
.others .results--more .card { box-shadow: none; }