/* 20代転職ラボ — 日曜夜の紺と、街灯の琥珀色。読む前に答えさせる。 */
:root{
  --night:#16213a;      /* 日曜夜の紺：ヒーロー・見出し */
  --night-2:#22304f;
  --lamp:#f0a33a;       /* 街灯の琥珀：主要ボタン・印 */
  --lamp-ink:#1b1408;
  --paper:#f4f6f8;      /* 地の色（少し青み） */
  --surface:#ffffff;
  --text:#1c2333;
  --muted:#5a6377;
  --line:#dfe3ea;
  --soft:#fff4e2;       /* 琥珀の淡色：注記 */
  --link:#2f5fb3;
  --warn:#9a5b06; --warn-soft:#fff4e2;
  --accent:var(--lamp); --accent-ink:var(--lamp-ink); --accent-soft:var(--soft);
  --bg:var(--paper);
  --radius:12px;
  --font:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0f1524; --surface:#171f33; --text:#e7ebf3; --muted:#9aa4ba; --line:#28324a;
    --soft:#2b2214; --link:#8fb4ff; --warn:#f0b35a; --warn-soft:#2b2214; --night:#0b1120; --night-2:#141c30;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.9;letter-spacing:.01em}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--lamp);outline-offset:2px}
.pr{background:var(--night);color:#c9d2e6;font-size:11px;text-align:center;padding:5px 16px;letter-spacing:.04em}
header.site{background:var(--night);color:#fff;position:sticky;top:0;z-index:10;border-bottom:1px solid rgba(255,255,255,.08)}
header.site .in{max-width:880px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font-weight:900;font-size:18px;color:#fff;text-decoration:none;letter-spacing:.02em}
.logo span{color:var(--lamp)}
nav{display:flex;gap:18px}
nav a{font-size:14px;color:#c9d2e6;text-decoration:none}
nav a:hover{color:#fff}
main{max-width:720px;margin:0 auto;padding:24px 16px 56px}
h1{font-size:clamp(24px,5.6vw,32px);line-height:1.4;margin:8px 0 14px;font-weight:900;text-wrap:balance}
h2{font-size:21px;line-height:1.5;margin:44px 0 14px;font-weight:900;color:var(--night);padding-bottom:8px;border-bottom:3px solid var(--lamp);text-wrap:balance}
@media (prefers-color-scheme: dark){h2{color:var(--text)}}
h3{font-size:18px;margin:28px 0 8px;font-weight:700}
p{margin:0 0 1.1em}
.lead{color:var(--muted)}
.meta{font-size:13px;color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:16px 0}
.box{background:var(--soft);border-left:4px solid var(--lamp);border-radius:0 8px 8px 0;padding:14px 16px;margin:20px 0}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 16px;font-size:14px}
table{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0;display:block;overflow-x:auto}
th,td{border:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
th{background:var(--soft)}
.grid{display:grid;gap:12px}
@media(min-width:640px){.grid.two{grid-template-columns:1fr 1fr}}
/* ボタン：主要は琥珀、副は線 */
.btn{display:inline-block;background:var(--lamp);color:var(--lamp-ink);font-weight:900;text-decoration:none;padding:14px 22px;border-radius:999px;border:0;font-size:16px;cursor:pointer;text-align:center;font-family:inherit}
.btn:hover{filter:brightness(1.05)}
.btn.block{display:block;width:100%}
.btn.ghost{background:transparent;color:var(--text);border:2px solid var(--line)}
/* 記事リスト */
.list a{display:block;padding:14px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text);font-weight:700}
.list a:hover{color:var(--link)}
.list a small{display:block;color:var(--muted);font-weight:400;font-size:13px;margin-top:2px}
/* 広告・商品枠 */
.offer{border:1px solid var(--line);border-top:4px solid var(--lamp);border-radius:var(--radius);padding:16px 18px;margin:20px 0;background:var(--surface)}
.offer .tag{font-size:12px;color:var(--muted)}
.offer h3{margin-top:6px}
/* 診断 */
.q{font-size:20px;font-weight:900;margin:6px 0 18px;line-height:1.5}
.opts{display:grid;gap:10px}
.opt{background:var(--surface);border:2px solid var(--line);border-radius:10px;padding:14px 16px;text-align:left;font-size:16px;color:var(--text);cursor:pointer;font-family:inherit;transition:border-color .15s}
.opt:hover,.opt:focus-visible{border-color:var(--lamp)}
.notekit .nk-q{margin:8px 0 8px;font-weight:700}
.notekit .nk-opts{display:grid;gap:8px}
.notekit .nk-opt{padding:12px 14px;font-size:15px}
.notekit .nk-opt[aria-pressed="true"]{border-color:var(--lamp);background:var(--soft)}
.notekit .nk-item:not(:empty){margin-top:12px}
.bar{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:10px}
.bar i{display:block;height:100%;background:var(--lamp);width:0;transition:width .25s}
.result-type{font-size:13px;color:var(--warn);font-weight:700}
.hidden{display:none}
/* トップ：ヒーロー */
.hero{background:var(--night);color:#fff;margin:-24px -16px 0;padding:36px 16px 40px}
@media(min-width:760px){.hero{margin:-24px calc(50% - 50vw) 0;padding:56px calc(50vw - 344px) 60px}}
.hero .kicker{color:#c9d2e6;font-size:14px;margin:0 0 10px}
.hero h1{color:#fff;font-size:clamp(28px,7.4vw,44px);line-height:1.3;margin:0 0 22px}
.hero .opt{background:var(--night-2);border-color:#34436a;color:#fff}
.hero .opt:hover,.hero .opt:focus-visible{border-color:var(--lamp);background:#283862}
.hero .note{color:#aab5cc;font-size:13px;margin:16px 0 0}
/* 段階別の道すじ */
.stages{display:grid;gap:0;margin:8px 0 0;counter-reset:st}
.stage{display:grid;grid-template-columns:40px 1fr;gap:4px 14px;padding:18px 0;border-bottom:1px solid var(--line)}
.stage:before{counter-increment:st;content:counter(st);grid-row:1 / span 3;width:34px;height:34px;border-radius:50%;background:var(--night);color:var(--lamp);display:grid;place-items:center;font-weight:900}
.stage h3{margin:2px 0 0;font-size:18px}
.stage p{margin:0;color:var(--muted);font-size:15px}
.stage .links{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:15px;font-weight:700}
footer{border-top:1px solid var(--line);background:var(--surface);font-size:13px;color:var(--muted)}
footer .in{max-width:720px;margin:0 auto;padding:20px 16px}
footer a{color:var(--muted);margin-right:14px}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
a.opt{display:block;text-decoration:none}
details.more{border-top:1px solid var(--line);padding:4px 0}
details.more:last-of-type{border-bottom:1px solid var(--line)}
details.more summary{cursor:pointer;font-weight:700;padding:12px 0;list-style:none}
details.more summary::-webkit-details-marker{display:none}
details.more summary:after{content:"+";float:right;color:var(--muted);font-weight:400}
details.more[open] summary:after{content:"−"}
/* ヒーローの夜景：窓が順に灯る（読み込み時に1回だけ） */
.hero{position:relative;overflow:hidden;padding-bottom:120px}
.hero .skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:110px;display:block}
.hero .win{opacity:0;animation:winOn .5s ease-out forwards}
@keyframes winOn{to{opacity:1}}
/* 回答ボタンは常に表示（動きは位置だけ） */
.hero .opts .opt{animation:rise .45s ease-out backwards}
.hero .opts .opt:nth-child(2){animation-delay:.06s}.hero .opts .opt:nth-child(3){animation-delay:.12s}.hero .opts .opt:nth-child(4){animation-delay:.18s}
@keyframes rise{from{transform:translateY(10px)}}
/* 記事のアイキャッチ */
img.eyecatch{display:block;width:100%;height:auto;border-radius:10px;margin:4px 0 18px}
/* 診断：問題の切り替えと結果の登場 */
.swap{animation:swap .28s ease-out}
@keyframes swap{from{transform:translateX(14px)}}
.result-img{display:block;width:100%;height:auto;border-radius:10px;margin:0 0 14px;animation:pop .5s cubic-bezier(.2,.8,.3,1.2)}
@keyframes pop{from{transform:scale(.94)}}
@media (prefers-reduced-motion: reduce){.hero .win,.hero .opts .opt,.swap,.result-img{animation:none!important;opacity:1!important;transform:none!important}}