:root{
  --navy:#13233f; --navy2:#1d3460; --ink:#1b2333; --muted:#5b6478; --line:#dde2ea;
  --bg:#f5f7fa; --surface:#fff; --gold:#c9a14a; --gold-ink:#3a2b06; --link:#2a5bb0;
  --r:14px; --font:"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.8;font-size:16px;-webkit-text-size-adjust:100%}
a{color:var(--link)}
img{max-width:100%;height:auto}
.pr{background:#eef1f6;color:var(--muted);font-size:12px;text-align:center;padding:4px 16px}
header.site{background:var(--navy);color:#fff}
header.site .in,footer .in,main{max-width:960px;margin:0 auto;padding:0 16px}
header.site .in{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{color:#fff;text-decoration:none;font-weight:800;letter-spacing:.02em}
.logo span{color:var(--gold)}
header nav a{color:#dfe6f2;text-decoration:none;margin-left:16px;font-size:14px}
main{padding-top:24px;padding-bottom:48px}
h1{font-size:28px;line-height:1.35;margin:.2em 0 .4em}
h2{font-size:21px;line-height:1.4;margin:1.6em 0 .6em}
.btn{display:inline-block;background:var(--gold);color:var(--gold-ink);font-weight:800;text-decoration:none;padding:12px 22px;border-radius:999px;border:0;font-size:16px;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;border:2px solid var(--navy);color:var(--navy);padding:8px 16px;font-size:14px}
.note,.meta{color:var(--muted);font-size:13px}
/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border-radius:var(--r);padding:28px}
.hero h1{color:#fff}.hero em{font-style:normal;color:var(--gold)}
.kicker{margin:0;color:#b9c6dd;font-size:13px;font-weight:700;letter-spacing:.08em}
.lead{color:#dfe6f2;font-size:15px}
.map{margin:0;background:rgba(255,255,255,.06);border-radius:var(--r);padding:8px}
.map svg{width:100%;display:block}
.map .ax{stroke:#6f82a6;stroke-width:1.2}
.map .al{fill:#9fb0cd;font-size:10px}
.pin circle{fill:var(--gold);opacity:.95}
.pin text{fill:#fff;font-size:12px;font-weight:700}
.pin{opacity:0;transform-box:fill-box;transform-origin:center;animation:pop .5s ease-out forwards}
.p1{animation-delay:.2s}.p2{animation-delay:.45s}.p3{animation-delay:.7s}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.map figcaption{color:#9fb0cd;font-size:11px;text-align:center}
/* quiz */
.quiz{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-top:28px;scroll-margin-top:16px}
.bar{height:6px;background:#e7ebf2;border-radius:3px;overflow:hidden}
.bar span{display:block;height:100%;width:0;background:var(--gold);transition:width .35s}
.qcard{display:none}
.qcard.is-on{display:block;animation:in .3s ease-out}
@keyframes in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.qn{margin:12px 0 0;color:var(--gold);font-weight:800}
.qcard h2{margin:.2em 0 .8em;font-size:20px}
.opts{display:grid;gap:10px}
.opts button{font:inherit;font-weight:700;padding:14px;border-radius:12px;border:2px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;text-align:left}
.opts button:hover,.opts button:focus-visible{border-color:var(--navy)}
.result{animation:in .35s ease-out}
.rk{margin:16px 0 8px;font-weight:800;color:var(--navy)}
.cards{display:grid;gap:10px}
.card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff}
.card.main{border:2px solid var(--gold);background:#fffaf0}
.card b{font-size:18px;color:var(--navy)}
.card p{margin:.3em 0;font-size:14px;color:var(--muted)}
.next a{display:block;padding:12px 14px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:700}
.next a::after{content:" →"}
.again{margin-top:14px;font:inherit;background:none;border:0;color:var(--link);text-decoration:underline;cursor:pointer}
/* steps */
.flow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;counter-reset:s}
.flow li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center;font-weight:700;font-size:14px}
.flow b{display:grid;place-items:center;width:28px;height:28px;margin:0 auto 6px;border-radius:50%;background:var(--navy);color:#fff;font-size:13px}
/* list, table, article */
.list a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:8px;text-decoration:none;font-weight:700;color:var(--ink)}
.list small{display:block;color:var(--muted);font-weight:400}
.list-cta{text-align:center;margin:24px 0 8px;padding:20px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.list-cta p{margin:0 0 10px;color:var(--muted);font-size:14px}
.empty{color:var(--muted);font-size:14px}
table{width:100%;border-collapse:collapse;background:var(--surface);font-size:14px}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:#eef1f6;white-space:nowrap}
footer{background:var(--navy);color:#b9c6dd;font-size:13px;padding:24px 0}
footer a{color:#dfe6f2;margin-right:16px}
footer .sister{display:block;background:rgba(255,255,255,.08);border-radius:12px;padding:12px 14px;margin-bottom:14px;text-decoration:none}
footer .sister b{display:block;color:#fff}
@media (max-width:720px){
  .hero{grid-template-columns:1fr;padding:22px 18px}
  h1{font-size:24px}
  .flow{grid-template-columns:repeat(2,1fr)}
  table{display:block;overflow-x:auto}
}
.toolcard{display:flex;align-items:center;gap:14px;margin:24px 0;padding:16px;border-radius:14px;background:var(--navy);color:#fff;text-decoration:none;transition:transform .15s}
.toolcard:hover{transform:translateY(-2px)}
.tc-bars{flex:0 0 52px;height:56px;display:flex;align-items:flex-end;gap:6px;border-bottom:2px solid rgba(255,255,255,.35)}
.tc-bars i{flex:1;height:var(--h);background:rgba(255,255,255,.45);border-radius:4px 4px 0 0;transform-origin:bottom;animation:tcup .9s ease-out both}
.tc-bars i+i{background:var(--gold);animation-delay:.35s}
.tc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tc-k{font-size:12px;color:var(--gold);font-weight:800}
.tc-txt b{font-size:16px;line-height:1.4}
.tc-ex{font-size:13px;color:#b9c6dd}.tc-ex em{font-style:normal;color:var(--gold);font-weight:800}
.tc-go{font-size:22px;color:var(--gold)}
@keyframes tcup{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.pin{opacity:1}}
/* fv-hc-1 B：FVでQ1に答える */
[data-fv][hidden]{display:none!important}
.fvq{margin-top:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px}
.fvq-q{margin:0 0 10px;font-weight:700}.fvq-q b{color:var(--gold);margin-right:8px}
.fvq-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fvq-opts button{font:inherit;font-weight:800;padding:13px 8px;border-radius:999px;border:0;background:var(--gold);color:var(--gold-ink);cursor:pointer;transition:transform .15s}
.fvq-opts button+button{background:#fff;color:var(--navy)}
.fvq-opts button:hover,.fvq-opts button:focus-visible{transform:translateY(-2px)}
/* 記事 */
.art{max-width:760px;margin:0 auto}
.crumb{font-size:12px;color:var(--muted);margin:0 0 6px}
.prbox{background:#eef1f6;border-radius:10px;padding:10px 12px;font-size:12px;color:var(--muted);line-height:1.6}
.fig{margin:12px 0 18px}.fig img{display:block;width:100%;border-radius:12px;border:1px solid var(--line);background:#fff}
.fig figcaption{font-size:12px;color:var(--muted);margin-top:6px}
.point{background:#fffaf0;border-left:4px solid var(--gold);padding:10px 14px;border-radius:0 10px 10px 0}
.ag{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:4px 16px 14px;margin-bottom:12px}
.ag h3{margin:.8em 0 .2em;font-size:18px;color:var(--navy)}.ag ul{margin:0;padding-left:1.2em;font-size:15px}
.offer-slot:empty{display:none}
.offer-slot .offer{display:block;margin:10px 0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}.offer-slot .tag{display:inline-block;font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 6px;margin-right:6px}.offer-slot small{display:block;color:var(--muted);margin:4px 0 8px}
.faq{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:8px}
.faq summary{font-weight:700;cursor:pointer}.faq p{margin:.5em 0 0;font-size:15px}
/* 記事03 30dai-nenshu-up の図（HTML/CSSで描画、画像なし） */
.sumcard{background:var(--navy);color:#fff;border-radius:var(--r);padding:18px 16px}
.sum-h{margin:0 0 10px;font-weight:800;font-size:18px}.sum-h b{color:var(--gold);font-size:24px}
.sum-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sum-chips div{background:var(--navy2);border-radius:10px;padding:8px 10px;display:grid;gap:2px}
.sum-chips small{color:#c8d2e6;font-size:12px}.sum-chips .up{font-weight:800;font-size:17px}.sum-chips .dn{color:#c8d2e6;font-size:14px}
.stackfig{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.stack-l{margin:0 0 2px;font-weight:700;font-size:14px}
.stack-bar{display:flex;height:34px;border-radius:8px;overflow:hidden;background:#eef1f6;margin-bottom:12px;transform-origin:left;animation:grow .9s ease-out both}
.stack-bar i{display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;color:#fff;white-space:nowrap}
.s1{background:#1d3460}.s2{background:#4a6fb0}.s3{background:#c9ced8;color:var(--ink)!important}.s4{background:#9aa3b5}.s5{background:#6b7488}
.legend{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.gapfig{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.gap-h{margin:0 0 8px;font-weight:700}
.gap{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:8px;margin-bottom:8px;font-size:14px}
.gap b{display:block;width:var(--w);background:#9aa3b5;color:#fff;border-radius:6px;padding:4px 8px;font-size:14px;transform-origin:left;animation:grow .9s ease-out both}
.gap b.hi{background:var(--gold);color:var(--gold-ink)}
.gap b.neg{white-space:nowrap;background:#e3e6ec;color:var(--ink);border:1px dashed #6b7488}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.steps li>b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-size:13px;margin-right:8px}
.steps strong{color:var(--navy);font-size:17px}.steps p{margin:.3em 0;font-size:14px;color:var(--muted)}
.steps a{display:block;font-size:14px;font-weight:700;margin-top:4px}.steps a::after{content:" →"}
.checks{list-style:none;padding:0}.checks li{position:relative;padding:8px 0 8px 30px;border-bottom:1px solid var(--line)}
.checks li::before{content:"";position:absolute;left:2px;top:12px;width:16px;height:16px;border:2px solid #9aa3b5;border-radius:4px}
.cards.two{grid-template-columns:1fr 1fr}.cards a.card{text-decoration:none;color:var(--ink)}.cards a.card b::after{content:" →"}
/* 記事04 gaishikei-tenshoku-kihon の図4（HTML/CSSで描画） */
.lawfig{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:12px 0}
.law-shield{animation:pop .6s ease-out both}
.law-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.law-chips div{background:var(--navy);color:#fff;border-radius:10px;padding:8px 10px;display:grid;gap:2px}
.law-chips small{color:#c8d2e6;font-size:12px}.law-chips b{font-size:15px}
.law-q{margin:12px 0;padding:10px 14px;border-left:4px solid var(--navy);background:#f4f6fa;border-radius:0 10px 10px 0;font-size:14px}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@media (max-width:720px){.steps,.cards.two,.law-chips{grid-template-columns:1fr}}
/* オファー年収→手取り差額ツール（/tools/nenshu-up-tedori/） */
.calc{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:14px 0}
.calc .row{grid-column:1/-1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.calc .row label{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:700;font-size:14px}
.calc .row.offer{border-color:var(--gold);background:#fffaf0}
.calc .yen{display:flex;align-items:center;gap:4px}
.calc input[type=number]{width:96px;font:inherit;font-size:20px;font-weight:800;text-align:right;padding:4px 6px;border:1px solid var(--line);border-radius:8px}
.calc input[type=range]{width:100%;margin:8px 0 0;accent-color:var(--navy)}
.calc .offer input[type=range]{accent-color:var(--gold)}
.calc select{width:100%;font:inherit;font-size:14px;padding:8px 6px;border:1px solid var(--line);border-radius:8px;background:#fff}
.calc .sel{font-size:12px;color:var(--muted);display:grid;gap:4px}
.diffcard{background:var(--navy);color:#fff;border-radius:var(--r);padding:18px 16px;text-align:center}
.diffcard .k{margin:0;font-size:13px;color:#c8d2e6}
.diffcard .big{margin:2px 0 4px;font-size:44px;font-weight:900;color:var(--gold);line-height:1.1;font-variant-numeric:tabular-nums}
.diffcard .big small{font-size:18px;margin-left:2px}
.diffcard .sub{margin:0;font-size:14px}.diffcard .sub b{color:var(--gold)}
.cmp{margin:14px 0 0;display:grid;gap:8px;text-align:left}
.cmp div{display:grid;grid-template-columns:5.5em 1fr;align-items:center;gap:8px;font-size:12px;color:#c8d2e6}
.cmp i{display:block;height:26px;border-radius:6px;background:#4a6fb0;color:#fff;font-style:normal;font-weight:800;font-size:13px;padding:0 8px;line-height:26px;white-space:nowrap;min-width:5.5em;transition:width .6s ease-out}
.cmp .o i{background:var(--gold);color:var(--gold-ink)}
.split{margin:16px 0 4px}
.split p{margin:0 0 6px;font-size:13px;color:var(--muted)}
.split .stack-bar{margin-bottom:6px}
.split .stack-bar i{transition:width .6s ease-out}
.tnote{font-size:12px;color:var(--muted);line-height:1.7}
@media (max-width:720px){.calc{grid-template-columns:1fr 1fr}.calc .sel.pref{grid-column:1/-1}.diffcard .big{font-size:38px}}
/* 記事06 consul-tenshoku-30dai の図（HTML/CSSで描画） */
.sum-chips.three{grid-template-columns:repeat(3,1fr)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;animation:pop .5s ease-out both}
.tile:nth-child(2){animation-delay:.1s}.tile:nth-child(3){animation-delay:.2s}.tile:nth-child(4){animation-delay:.3s}
.tile small{color:var(--muted);font-size:12px;font-weight:700}
.tile b{display:block;color:var(--navy);font-size:26px;font-weight:900;line-height:1.2;font-variant-numeric:tabular-nums}
.tile b i{font-style:normal;font-size:14px;margin-left:2px}.tile b.sm{font-size:16px;line-height:1.5}
.tile p{margin:.3em 0 0;font-size:13px;color:var(--muted)}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card b.nb::after{content:none}
.firms{display:grid;gap:8px}
.firm{display:grid;grid-template-columns:9em 1fr 1fr;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.firm b{color:var(--navy)}.firm p{margin:0;font-size:14px}
.firm span{font-size:13px;font-weight:700;color:var(--gold-ink);background:#fffaf0;border-left:3px solid var(--gold);padding:4px 8px;border-radius:0 6px 6px 0}
.casefig{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.casefig div{background:var(--navy);color:#fff;padding:12px 14px 12px 22px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%);animation:pop .5s ease-out both}
.casefig div:first-child{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);padding-left:14px}
.casefig div:nth-child(2){background:#2b4a80;animation-delay:.15s}.casefig div:nth-child(3){background:var(--gold);color:var(--gold-ink);animation-delay:.3s}
.casefig small{display:block;font-size:12px;opacity:.85;font-weight:700}.casefig b{font-size:15px}
@media (max-width:720px){.cards.three,.casefig{grid-template-columns:1fr}.firm{grid-template-columns:1fr;gap:4px}
  .casefig div,.casefig div:first-child{clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),50% 100%,0 calc(100% - 10px));padding:10px 14px 18px}
  .sum-chips.three{grid-template-columns:repeat(3,1fr)}.sum-chips.three .up{font-size:15px}}

/* 記事07 2軸マトリクス */
.mx{margin:12px 0}
.mx-y,.mx-x{margin:0 0 6px;font-size:12px;color:var(--muted);line-height:1.5}.mx-x{margin:6px 0 0}
.mx-y b,.mx-x b{color:var(--navy)}
.mx-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px;border-left:3px solid var(--navy);border-bottom:3px solid var(--navy);padding:0 0 6px 6px}
.mx-c{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 26px 14px 10px;min-height:84px;font-size:14px;font-weight:700;color:var(--navy);animation:pop .5s ease-out both}
.mx-c small{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:4px}
.mx-c.hot{background:#fffaf0;border:2px solid var(--gold);animation-delay:.2s}.mx-c.hot b{color:var(--gold-ink)}
.mx-dot{position:absolute;left:24px;bottom:24px;width:14px;height:14px;margin:0 0 -7px -7px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 4px rgba(19,35,63,.18);animation:mxmove 2.4s .6s ease-in-out both}
@keyframes mxmove{from{left:24px;bottom:24px}to{left:calc(100% - 16px);bottom:calc(100% - 16px)}}
@media (prefers-reduced-motion:reduce){.mx-dot{animation:none;left:calc(100% - 16px);bottom:calc(100% - 16px)}}
/* 記事08 エンワールド：チーム図・向く人2列 */
.teamfig{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px}
.teamfig svg{display:block;max-width:360px;margin:0 auto}
.tf-ring{animation:tfspin 18s linear infinite;transform-origin:160px 110px}
.tf-n{animation:pop .5s ease-out both}.tf-2{animation-delay:.15s}.tf-3{animation-delay:.3s}
@keyframes tfspin{to{transform:rotate(360deg)}}
.fitfig{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fitfig>div{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff}
.fitfig .fit-y{border:2px solid var(--gold);background:#fffaf0}
.fitfig>div>b{color:var(--navy);font-size:17px}
.fit-n ul{padding-left:1.1em;margin:.4em 0 0}.fit-n li{padding:6px 0;font-size:14px}
@media (max-width:720px){.fitfig{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.tf-ring,.tf-n{animation:none}}