/* 資格試験対策.net — site styles
   配色：青 #0050D7 ／ 白 ／ 薄いグレー ／ 黒 #010101（文字はグレーを使わない） */
:root{
  --bg:#f3f5f8; --paper:#ffffff; --ink:#010101; --line:#dfe3ea; --line2:#eef1f5;
  --accent:#0050d7; --accent-ink:#ffffff; --accent-soft:#e8effc; --accent-deep:#003ea8;
  --cta:#f5761a; --cta-hover:#e0650c;
  --ok:#1e8a4c; --ok-soft:#e4f5ea; --ng:#d23c2f; --ng-soft:#fcebe9;
  --ad:#eef1f5;
  --qsize:17px;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --disp:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --body:"Noto Sans JP","Hiragino Sans","Yu Gothic","Meiryo",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#010101; --paper:#15181e; --ink:#f2f4f7; --line:#2c313a; --line2:#20242b;
  --accent:#4d8bff; --accent-ink:#010101; --accent-soft:#12213f; --accent-deep:#0050d7;
  --ok:#5fcf8a; --ok-soft:#173224; --ng:#ff7b6e; --ng-soft:#3a1f1c; --ad:#20242b; color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#010101; --paper:#15181e; --ink:#f2f4f7; --line:#2c313a; --line2:#20242b;
  --accent:#4d8bff; --accent-ink:#010101; --accent-soft:#12213f; --accent-deep:#0050d7;
  --ok:#5fcf8a; --ok-soft:#173224; --ng:#ff7b6e; --ng-soft:#3a1f1c; --ad:#20242b; color-scheme:dark;}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.85}
a{color:var(--accent)}
img{max-width:100%;height:auto}
.wrap{max-width:1040px;margin:0 auto;padding-inline:16px}
.site{background:var(--paper);min-height:100vh;display:flex;flex-direction:column}
.site>main{flex:1}
:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:var(--paper);padding:8px;z-index:9}

/* header */
.hdr{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:20}
.hdr .wrap{display:flex;align-items:center;gap:14px;padding-block:10px}
.logo{font-family:var(--disp);font-weight:900;font-size:22px;letter-spacing:.01em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px;white-space:nowrap}
.logo i{display:inline-block;width:22px;height:22px;border-radius:5px;background:var(--accent);position:relative;flex:none}
.logo i::after{content:"";position:absolute;left:6px;top:5px;width:6px;height:9px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(40deg)}
.hdr nav{display:flex;gap:18px;font-size:15px;font-weight:500;margin-left:8px}
.hdr nav a{color:var(--ink);text-decoration:none}
.hdr .sp{margin-left:auto;display:flex;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--disp);font-weight:700;font-size:15px;padding:9px 18px;border-radius:8px;border:1px solid var(--accent);color:var(--accent);background:transparent;text-decoration:none;cursor:pointer;line-height:1.3;white-space:nowrap}
.btn.pri{background:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.btn.cta{background:var(--cta);border-color:var(--cta);color:#fff;box-shadow:0 4px 14px rgba(245,118,26,.35)}
.btn.cta:hover{background:var(--cta-hover);border-color:var(--cta-hover)}
.btn.big{font-size:17px;padding:14px 26px}
.btn.sm{font-size:14px;padding:6px 12px}
.btn[disabled]{opacity:.5;cursor:default}
@media (max-width:640px){.hdr nav{display:none}.hdr .sp .btn:not(.keep){display:none}}

/* page */
.crumb{font-size:14px;padding:12px 0 0}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 4px}
.crumb a{color:var(--ink);text-decoration:none}
.crumb li+li::before{content:"›";margin:0 6px}
.pg{padding-block:16px 40px}
h1{font-family:var(--disp);font-weight:900;font-size:clamp(26px,4vw,36px);line-height:1.35;letter-spacing:.01em;margin:6px 0 10px;text-wrap:balance}
h2{font-family:var(--disp);font-weight:700;font-size:21px;margin:34px 0 12px;padding-left:12px;border-left:4px solid var(--accent);line-height:1.4}
h3{font-family:var(--disp);font-weight:700;font-size:17.5px;margin:22px 0 8px}
p{margin:0 0 10px;max-width:72ch}
.sub{font-size:15px}
.hero{background:var(--accent);color:#fff;padding:40px 0 36px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.08)}
.hero::before{content:"";position:absolute;right:120px;bottom:-140px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.06)}
.hero .wrap{position:relative}
.hero h1{color:#fff;margin:0 0 10px}
.hero p{color:#fff;font-size:16.5px}
.hero .btn{background:#fff;color:var(--accent);border-color:#fff}
.hero .btn.cta{background:var(--cta);border-color:var(--cta);color:#fff}
.hero .btn.cta:hover{background:var(--cta-hover);border-color:var(--cta-hover)}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 6px}
.actions .grow{flex:1}
.ad{background:var(--ad);border:1px dashed var(--line);border-radius:4px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;display:flex;align-items:center;justify-content:center;margin:18px 0;min-height:90px}
.ad.sq{min-height:110px}
html[data-plan="paid"] .ad{display:none}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip{font-size:13px;padding:2px 10px;border-radius:999px;background:var(--line2);color:var(--ink);text-decoration:none}
.chip.a{background:var(--accent-soft);color:var(--accent);font-weight:700}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:12px 0}
.card{border:1px solid var(--line);border-radius:10px;padding:18px 20px;background:var(--paper);text-decoration:none;color:inherit;display:block}
a.card:hover{border-color:var(--accent)}
.card h4{font-family:var(--disp);font-size:17.5px;margin:0 0 4px}
.card .m{font-size:14.5px}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:12px 0}
.kpi div{border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.kpi b{display:block;font-family:var(--disp);font-size:26px;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.2}
.kpi span{font-size:13px}
table{border-collapse:collapse;width:100%;font-size:15px;margin:8px 0 14px}
th,td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{font-family:var(--disp);font-weight:700;white-space:nowrap;background:var(--line2)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl{overflow-x:auto}
.list{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:10px 0}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line2);text-decoration:none;color:inherit}
.row:last-child{border-bottom:0}
a.row:hover{background:var(--line2)}
.row .t{flex:1;min-width:0}.row .t b{font-family:var(--disp);font-weight:700;font-size:16.5px;display:block}
.row .t small{font-size:13.5px}
.row .s{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.bar{height:6px;border-radius:3px;background:var(--line2);overflow:hidden;width:110px;flex:none}
.bar i{display:block;height:100%;background:var(--accent)}
.lock{font-size:11px;color:var(--accent);border:1px solid var(--accent);border-radius:3px;padding:0 5px;font-family:var(--disp);font-weight:700;vertical-align:middle}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin:14px 0 12px;overflow-x:auto}
.tabs a{font-family:var(--disp);font-weight:700;font-size:15.5px;padding:8px 14px;color:var(--ink);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-2px}
.tabs a.on{color:var(--accent);border-color:var(--accent)}
.opts{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:10px 0}
.opt{border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:15.5px;display:flex;gap:8px;align-items:center;cursor:pointer;background:var(--paper);color:inherit;text-decoration:none}
.opt.on,.opt:hover{border-color:var(--accent);background:var(--accent-soft)}
.note{border-left:4px solid var(--accent);background:var(--accent-soft);padding:10px 16px;border-radius:0 8px 8px 0;margin:12px 0}
.faq details{border:1px solid var(--line);border-radius:8px;padding:10px 16px;margin:8px 0}
.faq summary{font-family:var(--disp);font-weight:700;cursor:pointer}
.legal h2{font-size:18px;margin-top:28px}
.legal th{width:11em}
footer{border-top:1px solid var(--line);background:var(--line2);font-size:13.5px}
footer .wrap{display:flex;flex-wrap:wrap;gap:6px 16px;padding-block:18px}
footer a{color:var(--ink);text-decoration:none}

/* question page */
.qhead{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:14px;margin-bottom:6px}
.qhead b{font-family:var(--mono);color:var(--ink)}
.fs{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-left:auto}
.fs button{border:0;background:var(--paper);color:var(--ink);font-family:var(--disp);font-weight:700;padding:5px 12px;cursor:pointer;font-size:14px;border-right:1px solid var(--line)}
.fs button:last-child{border-right:0}
.fs button.on{background:var(--accent);color:var(--accent-ink)}
.qbox{border:1px solid var(--line);border-radius:8px;padding:16px 18px;margin:10px 0;background:var(--paper)}
.qbody{font-size:var(--qsize);line-height:1.9}
.qbody p{max-width:none}
.qbody table{font-size:inherit}
.codes{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px;font-size:var(--qsize)}
.codes span b{font-family:var(--mono);margin-right:3px;font-size:.95em}
.jr{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0}
.jside{border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.jside h4{font-family:var(--disp);margin:0 0 6px;font-size:var(--qsize)}
.jrow{display:flex;gap:6px;margin:6px 0}
.jrow .sel{flex:1;min-width:0;font-size:16px}
@media (max-width:640px){.jr{grid-template-columns:1fr}}
.journal{overflow-x:auto}
.journal table{margin:0;font-size:var(--qsize)}
.journal td{padding:6px 8px;vertical-align:middle}
.journal td.n{min-width:180px}
.sel{font-family:var(--body);font-size:16px;border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:var(--paper);color:var(--ink);min-width:90px}
.sel.set{border-color:var(--accent);font-weight:700}
.amt{width:160px;min-width:160px;border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-family:var(--mono);font-size:16px;line-height:1.3;text-align:right;background:var(--paper);color:var(--ink);font-variant-numeric:tabular-nums}
.amt.set{border-color:var(--accent);font-weight:700}
.amt.ok,.sel.ok{border-color:var(--ok);background:var(--ok-soft)}
.amt.ng,.sel.ng{border-color:var(--ng);background:var(--ng-soft)}
.fields{display:grid;gap:10px;margin:8px 0}
.field{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:10px 14px;font-size:var(--qsize)}
.field label{font-weight:700}
.field .inp{display:flex;align-items:center;gap:6px}
.field small{grid-column:1/-1;font-size:14px}
.choices{display:grid;gap:8px;margin:8px 0}
.choice{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:12px 14px;cursor:pointer;font-size:var(--qsize);background:var(--paper)}
.choice.on{border-color:var(--accent);background:var(--accent-soft)}
.choice.ok{border-color:var(--ok);background:var(--ok-soft)}
.choice.ng{border-color:var(--ng);background:var(--ng-soft)}
.choice input{margin-top:.45em}
.mat{overflow-x:auto;margin:8px 0}
.mat table{margin:0;font-size:var(--qsize);min-width:460px}
.mat caption{font-family:var(--disp);font-weight:700;text-align:left;padding:4px 0 6px}
.mat th.h{position:sticky;left:0;background:var(--line2);z-index:1}
.mat td.n{white-space:nowrap}
.mat tr.total td,.mat tr.total th{border-top:2px solid var(--ink);font-weight:700}
.mat .amt{width:140px;min-width:140px}
.result{border-radius:8px;padding:14px 18px;margin:14px 0;border:1px solid}
.result.ok{background:var(--ok-soft);border-color:var(--ok)}.result.ng{background:var(--ng-soft);border-color:var(--ng)}
.result h3{margin:0 0 4px;font-size:19px}
.result.ok h3{color:var(--ok)}.result.ng h3{color:var(--ng)}
.steps{counter-reset:s;padding:0;margin:8px 0;list-style:none}
.steps li{counter-increment:s;position:relative;padding-left:38px;margin:10px 0;font-size:var(--qsize)}
.steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:27px;height:27px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--disp);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.trap{border-left:4px solid var(--accent);background:var(--accent-soft);padding:10px 16px;border-radius:0 8px 8px 0;font-size:var(--qsize);margin:10px 0}
.hint{font-size:14px;margin:10px 0 0}
#explain[hidden]{display:none}
.report{font-size:13.5px}

/* calculator */
.calcfab{position:fixed;right:16px;bottom:16px;z-index:30}
.calcfab .btn{border-radius:999px;background:var(--paper);box-shadow:0 2px 10px rgba(0,0,0,.2)}
.calc{position:fixed;right:16px;bottom:70px;width:280px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.25);padding:12px;z-index:31}
.calc[hidden]{display:none}
.calc .disp{font-family:var(--mono);font-size:24px;text-align:right;padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin-bottom:8px;overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums}
.calc .mem{font-size:12px;text-align:right;min-height:1.4em}
.calc .keys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.calc button{font-family:var(--disp);font-size:18px;padding:10px 0;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);cursor:pointer}
.calc button.op{background:var(--accent-soft);color:var(--accent)}
.calc button.eq{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.calc button.m{font-size:14px}

/* records */
.spark{width:100%;height:60px;display:block}
.bars{display:grid;gap:6px}
.bars>div{display:grid;grid-template-columns:1fr 130px 60px;gap:10px;align-items:center;font-size:15px}
@media (max-width:520px){.bars>div{grid-template-columns:1fr 90px 50px}}

/* pricing */
.cmp th.c,.cmp td.c{text-align:center;white-space:nowrap}
.cmp th.hot{color:var(--accent)}
.cmp th small{font-weight:500;font-size:13px}
.cmp td.y{color:var(--accent);font-weight:900;font-size:20px}
.cmp td.x{font-weight:700;font-size:18px}
.cmp tr.cta td{border-bottom:0;padding-top:16px}
.cmp td:first-child{font-weight:500}

/* maintenance */
.maint{text-align:center;padding:80px 16px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}