:root{
  --ai:#1f3a5f; --ai-d:#14263f; --shu:#c8452d; --shu-d:#a8351f; --washi:#f7f3ea; --paper:#fffdf8;
  --sumi:#232323; --gray:#6b6b6b; --line:#ded7c6; --ok:#2f7d4f; --warn:#b7791f; --ng:#b3261e; --focus:#1a73e8;
  --r:14px; --max:1040px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--washi);color:var(--sumi);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP","Meiryo",system-ui,sans-serif;
  font-size:17px;line-height:2.05}
ruby{ruby-position:over}
rt{font-size:.5em;line-height:1;color:var(--gray);font-weight:400;letter-spacing:0}
/* ふりがなの出し方 */
body[data-furi="none"] rt{display:none}
body[data-furi="hard"] ruby[data-lv="N5"] rt, body[data-furi="hard"] ruby[data-lv="N4"] rt{display:none}
a{color:var(--ai)} a:hover{color:var(--shu-d)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:100} .skip:focus{left:8px;top:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.7;margin:0 0 .4em;color:var(--ai-d)}
h1{font-size:2rem} h2{font-size:1.5rem} h3{font-size:1.15rem}
p{margin:.3em 0 .9em}
.muted{color:var(--gray);font-size:.92rem}

/* ヘッダー */
.site-header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.site-header .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ai-d);font-weight:700;font-size:1.25rem;line-height:1.4}
.brand svg{width:36px;height:36px;flex:none}
.nav{display:flex;gap:4px 14px;flex-wrap:wrap;margin-left:auto;align-items:center}
.nav a{text-decoration:none;font-size:.95rem;padding:2px 4px}
.furi{display:flex;align-items:center;gap:6px;font-size:.88rem}
.furi select{font:inherit;padding:2px 6px;border:1px solid var(--line);border-radius:8px;background:#fff}
.btn{display:inline-block;border:2px solid var(--ai);background:var(--ai);color:#fff;text-decoration:none;
  padding:6px 20px;border-radius:999px;font:inherit;font-weight:700;cursor:pointer;line-height:1.9}
.btn:hover{background:var(--ai-d);color:#fff}
.btn.shu{background:var(--shu);border-color:var(--shu)} .btn.shu:hover{background:var(--shu-d);border-color:var(--shu-d)}
.btn.ghost{background:transparent;color:var(--ai)} .btn.ghost:hover{background:var(--ai);color:#fff}
.btn.sm{padding:2px 14px;font-size:.92rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ヒーロー */
.hero{background:linear-gradient(180deg,var(--paper),var(--washi));padding:56px 0 40px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-90px;top:-90px;width:380px;height:380px;border-radius:50%;
  border:34px solid rgba(31,58,95,.07)}
.hero::after{content:"";position:absolute;right:120px;top:36px;width:70px;height:70px;border-radius:50%;background:rgba(200,69,45,.16)}
.hero h1{font-size:2.3rem;max-width:18em}
.hero .lead{max-width:36em;font-size:1.08rem}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
section.block{padding:42px 0}
section.alt{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.card.lv{border-top:6px solid var(--ai)} .card.lv.middle{border-top-color:var(--shu)} .card.lv.upper{border-top-color:#2b2b2b}
.card h3 .jl{font-size:.8rem;font-weight:400;color:var(--gray);margin-left:6px}
dl.spec{display:grid;grid-template-columns:auto 1fr;gap:0 14px;margin:8px 0;font-size:.95rem}
dl.spec dt{color:var(--gray)} dl.spec dd{margin:0}
.pillar{display:flex;gap:14px;align-items:flex-start}
.pillar .n{flex:none;width:38px;height:38px;border-radius:50%;background:var(--ai);color:#fff;display:grid;place-items:center;font-weight:700;line-height:1}
.pillar:nth-child(even) .n{background:var(--shu)}
.pillar h3{margin:0;font-size:1.05rem} .pillar p{margin:0;font-size:.93rem;line-height:1.9}
.steps{counter-reset:s;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));padding:0;list-style:none}
.steps li{counter-increment:s;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;position:relative}
.steps li::before{content:counter(s);position:absolute;top:-14px;left:14px;width:30px;height:30px;border-radius:50%;background:var(--shu);color:#fff;display:grid;place-items:center;font-weight:700;line-height:1}
.steps h3{font-size:1.05rem;margin-top:6px} .steps p{font-size:.92rem;line-height:1.9;margin:0}
details.faq{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:6px 18px;margin-bottom:10px}
details.faq summary{cursor:pointer;font-weight:700;padding:6px 0}
.badge{display:inline-block;border-radius:999px;padding:0 12px;font-size:.85rem;font-weight:700;color:#fff;background:var(--gray);line-height:1.8}
.badge.ok{background:var(--ok)} .badge.review{background:var(--warn)} .badge.ng{background:var(--ng)}
.notice{background:#fff7e0;border:1px solid #ecd9a0;border-radius:12px;padding:10px 16px;font-size:.95rem}

/* フォーム */
form.f{display:grid;gap:14px;max-width:640px}
label.fl{display:grid;gap:2px;font-weight:700;font-size:.95rem}
input[type=text],input[type=email],select.in,textarea{font:inherit;padding:8px 12px;border:1.5px solid #bdb5a0;border-radius:10px;background:#fff;width:100%;line-height:1.7}
textarea{min-height:130px}
.err{color:var(--ng);font-size:.9rem;font-weight:400}
.ok-box{background:#eaf5ee;border:1px solid #b9dcc6;border-radius:12px;padding:14px 18px}
code.ref{font-size:1.2rem;background:#fff;border:1px dashed var(--gray);padding:2px 10px;border-radius:8px;letter-spacing:.06em}

/* 受験画面 */
.exam-bar{position:sticky;top:0;z-index:15;background:var(--ai-d);color:#fff}
.exam-bar .wrap{display:flex;align-items:center;gap:14px;padding-top:6px;padding-bottom:6px;flex-wrap:wrap}
.exam-bar rt{color:#c9d3e2}
.timer{font-variant-numeric:tabular-nums;font-size:1.35rem;font-weight:700;margin-left:auto}
.timer.low{color:#ffb4a8} .saved{font-size:.85rem;opacity:.8}
.exam{display:grid;grid-template-columns:230px 1fr;gap:22px;padding:22px 0 80px}
@media(max-width:820px){.exam{grid-template-columns:1fr}}
.navgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:6px}
.navgrid button{font:inherit;font-size:.82rem;border:1.5px solid var(--line);background:var(--paper);border-radius:8px;padding:3px 0;cursor:pointer;line-height:1.5}
.navgrid button.ans{background:#dbe7f7;border-color:#9db8dd}
.navgrid button.flag{border-color:var(--shu);box-shadow:inset 0 -4px 0 var(--shu)}
.navgrid button.cur{outline:3px solid var(--focus)}
.qcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px}
.qmeta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.9rem;color:var(--gray);margin-bottom:6px}
.qprompt{font-size:1.12rem;font-weight:600;margin-bottom:12px}
.passage{background:var(--washi);border-left:5px solid var(--ai);border-radius:8px;padding:10px 16px;margin-bottom:14px}
.passage table{border-collapse:collapse;width:100%;background:#fff;margin:6px 0}
.passage th,.passage td{border:1px solid #cfc7b2;padding:2px 10px;text-align:left;line-height:1.9}
.passage th{background:#ece6d5}
.choices{display:grid;gap:10px;margin:0;padding:0;border:0}
.choice{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--line);background:#fff;border-radius:12px;padding:8px 14px;cursor:pointer}
.choice:hover{border-color:var(--ai)}
.choice input{margin-top:.8em;width:20px;height:20px;flex:none;accent-color:var(--ai)}
.choice.sel{border-color:var(--ai);background:#eef3fb}
.choice .no{font-weight:700;color:var(--ai);flex:none;width:1.6em;margin-top:0}
.order-row{display:flex;gap:12px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:12px;padding:8px 14px}
.order-row select{font:inherit;padding:2px 8px;border-radius:8px;border:1.5px solid #bdb5a0}
.qnav{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.counter{font-size:.9rem;color:var(--gray);text-align:right}
.counter.bad{color:var(--ng)}
.cam{position:fixed;right:12px;bottom:12px;width:170px;border:3px solid var(--ai);border-radius:12px;overflow:hidden;background:#000;z-index:30;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.cam video{display:block;width:100%;transform:scaleX(-1)}
.cam.lost{border-color:var(--ng)}
.modal{position:fixed;inset:0;background:rgba(20,38,63,.6);z-index:50;display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal .box{background:var(--paper);border-radius:16px;max-width:560px;width:100%;padding:24px 28px;max-height:90vh;overflow:auto}
.modal .row{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}

/* 結果 */
.score{display:flex;gap:26px;align-items:center;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 26px}
.score .big{font-size:3rem;font-weight:800;color:var(--ai-d);line-height:1.3}
.verdict{font-size:1.6rem;font-weight:800;padding:2px 22px;border-radius:12px;color:#fff;line-height:1.7}
.verdict.pass{background:var(--ok)} .verdict.fail{background:var(--ng)} .verdict.wait{background:var(--warn)}
.bars{display:grid;gap:8px}
.bar{display:grid;grid-template-columns:11em 1fr 4.5em;gap:10px;align-items:center;font-size:.95rem}
.bar .track{background:#e8e2d1;border-radius:99px;height:14px;overflow:hidden}
.bar .fill{height:100%;background:var(--ai)}
.rev{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 20px;margin-bottom:12px}
.rev.right{border-left:6px solid var(--ok)} .rev.wrong{border-left:6px solid var(--ng)} .rev.wait{border-left:6px solid var(--warn)}
.rev .ans-line{font-size:.95rem}
.explain{background:#f3efe2;border-radius:8px;padding:6px 14px;margin-top:6px;font-size:.95rem}
.essay-a{white-space:pre-wrap;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 12px;line-height:1.9}

/* 管理 */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 16px;border-bottom:2px solid var(--line)}
.tabs button{font:inherit;border:0;background:transparent;padding:6px 16px;cursor:pointer;border-bottom:4px solid transparent;margin-bottom:-2px;font-weight:700;color:var(--gray)}
.tabs button.on{color:var(--ai-d);border-bottom-color:var(--shu)}
table.t{border-collapse:collapse;width:100%;background:var(--paper);font-size:.92rem;line-height:1.7}
table.t th,table.t td{border:1px solid var(--line);padding:4px 10px;text-align:left;vertical-align:top}
table.t th{background:#ece6d5}
.scroll{overflow:auto;max-height:560px;border-radius:10px}
.vocab-hit{display:inline-block;background:#fde8e6;border-radius:6px;padding:0 8px;margin:2px;font-size:.9rem}
.vocab-hit.near{background:#fff1cf}

/* 合格証 */
@media print{.site-header,.site-footer,.noprint,.exam-bar{display:none!important} body{background:#fff}}

/* フッター */
.site-footer{background:var(--ai-d);color:#dfe6f2;padding:30px 0 40px;margin-top:40px;font-size:.92rem;line-height:2}
.site-footer a{color:#fff} .site-footer rt{color:#b8c4d8}
.site-footer ul{list-style:none;padding:0;margin:4px 0;display:flex;gap:6px 22px;flex-wrap:wrap}
.site-footer .small{font-size:.82rem;opacity:.85}
@media(max-width:600px){body{font-size:16px}.hero h1{font-size:1.75rem}.bar{grid-template-columns:7em 1fr 4em}.qcard{padding:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- 時間の表示・1問ずつの受験 ---- */
.exam-bar .endat{font-size:.85rem;opacity:.85}
.exam-bar .alltime{margin-left:auto;font-size:.85rem;opacity:.85}
.exam-bar .alltime + .timer{margin-left:0}
.tbar{height:4px;background:rgba(255,255,255,.18)} .tbar span{display:block;height:100%;width:100%;background:#7fb2ff;transition:width .25s linear}
.exam.paced{display:block;max-width:820px}
.qtimer{display:flex;align-items:center;gap:12px;margin:-4px 0 14px;flex-wrap:wrap}
.qtimer .qlabel{font-weight:700;color:var(--ai-d)}
.qtimer .qsec{font-variant-numeric:tabular-nums;font-size:2rem;font-weight:800;color:var(--ai-d);min-width:3.2em}
.qtimer .qsec.low{color:var(--shu)} .qtimer .qsec.crit{color:var(--ng);animation:pulse .8s infinite}
.qtimer .qbar{flex:1 1 160px;height:12px;border-radius:99px;background:#e8e2d1;overflow:hidden}
.qtimer .qbar span{display:block;height:100%;width:100%;background:var(--ai);transition:width .25s linear} .qtimer .qbar span.low{background:var(--shu)}
@keyframes pulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.qtimer .qsec.crit{animation:none}.tbar span,.qtimer .qbar span{transition:none}}
.nocopy{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.nocopy textarea{-webkit-user-select:text;user-select:text}
.timeup{margin:14px 0;padding:12px 16px;border-radius:10px;background:#fde8e6;border:1px solid var(--ng);color:var(--ng);font-weight:700}
.lockbanner{position:sticky;top:44px;z-index:30;background:var(--ng);color:#fff;text-align:center;padding:10px;font-weight:700}
.qcard .qnav{align-items:center}
.qcard .qnav .muted{margin-right:auto}
@media print{.nocopy,.exam-bar{display:none!important}}

/* ---- 申し込み・お支払い ---- */
.code-big{font-size:2rem;font-weight:800;letter-spacing:.1em;font-variant-numeric:tabular-nums;background:#fff;border:2px dashed var(--ai);border-radius:12px;padding:10px 18px;display:inline-block;margin:6px 0;user-select:all}
#pricebox{margin:4px 0}

/* ---- 結果の分析 ---- */
.analysis{margin-top:30px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px 26px}
.analysis h2{margin-top:0} .analysis h3{margin:22px 0 6px;color:var(--ai-d);font-size:1.08rem}
.analysis .an-lead{font-size:1.1rem;font-weight:600}
.an-grid{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:20px;align-items:center}
@media (max-width:720px){.an-grid{grid-template-columns:1fr}}
.radar{width:100%;max-width:420px;height:auto;color:var(--sumi)}
.vps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.vp{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.vp .vph{display:flex;justify-content:space-between;align-items:baseline}
.vp .vpn{font-weight:800;color:var(--shu)} .vp p{margin:.4em 0 0;font-size:.95rem}
.vp .track{display:block;background:#e8e2d1;border-radius:99px;height:10px;overflow:hidden} .vp .fill{height:100%;background:var(--shu)}
.an-note{margin-top:18px;padding:10px 14px;background:#f3efe2;border-radius:10px;font-size:.9rem;color:var(--gray)}

/* ---- 級ごとの流れ・結果確認 ---- */
.lflows{margin-top:34px}
ol.lf{padding-left:1.4em;margin:8px 0} ol.lf li{margin-bottom:6px}
.periods,.periods ul{padding-left:1.2em} .periods li{margin-bottom:4px}
.rs-list{padding-left:1.2em} .rs-list li{margin-bottom:6px;font-weight:600}

label.fl{display:grid;gap:6px;font-weight:600}

.siteband{background:var(--ai,#1f3a5f);color:#f7f3ea}
.siteband .wrap{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;padding-top:8px;padding-bottom:8px;font-size:.9rem}
.siteband b{font-size:1rem}
.siteband i{font-style:normal;opacity:.8;font-size:.8rem;flex-basis:100%}
.hero .eyebrow{display:inline-block;margin:0 0 10px;padding:3px 12px;border:1px solid #1f3a5f;border-radius:99px;color:#1f3a5f;font-size:.9rem;font-weight:700}

.art{display:block;width:100%;height:auto}
.hero .wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.hero .hero-text{flex:1 1 360px}
.hero-art{flex:0 1 380px;max-width:380px;position:relative;z-index:1}
.lv-art{width:96px;margin:0 0 6px}
.side-art{width:120px;float:right;margin:0 0 8px 12px}
@media(max-width:640px){.hero-art{max-width:300px}}
.dlbox{margin-top:18px;max-width:40em;padding:14px 18px;border:1px solid var(--line);border-radius:10px;background:#fff}.dlbox h3{margin:0 0 4px}

.cookiebar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;background:#1f3a5f;color:#f7f3ea;border-radius:12px;padding:12px 16px;display:flex;gap:12px 18px;flex-wrap:wrap;align-items:center;justify-content:space-between;box-shadow:0 6px 24px rgba(0,0,0,.25);font-size:.9rem;max-width:980px;margin:0 auto}
.cookiebar[hidden]{display:none}
.cookiebar p{margin:0;flex:1 1 380px}.cookiebar a{color:#f7f3ea;text-decoration:underline}
.cookiebar .btn.ghost{background:transparent;color:#f7f3ea;border-color:#f7f3ea}
fieldset.hq{border:1px solid var(--line);border-radius:10px;padding:10px 14px 14px;margin:0;display:grid;gap:10px;background:#fff}
fieldset.hq[hidden]{display:none}
fieldset.hq legend{font-weight:700;padding:0 6px;color:#1f3a5f}
.checks{display:flex;flex-wrap:wrap;gap:6px 16px}.checks label{display:flex;gap:6px;align-items:center}
.checks input{width:18px;height:18px}
a.btn.disabled{opacity:.45;pointer-events:none}
.site-footer .refs ul{display:flex;flex-wrap:wrap;gap:4px 18px;padding:0;list-style:none;margin:2px 0 8px}
.card .big{font-size:1.9rem;font-weight:700;color:#1f3a5f}
/* ラベルの文字(ふりがなつき)が、1文字ずつ折り返さないように */
label.fl,div.fl{display:block;font-weight:600;font-size:.95rem}
label.fl>input,label.fl>select,label.fl>textarea,div.fl>.checks{display:flex;margin-top:6px}
label.fl>input,label.fl>select,label.fl>textarea{width:100%}
label.fl>.err,div.fl>.err{display:block}

/* 注意事項のチェックシート・受験者アンケート */
.warnbox{border:2px solid #b3261e;background:#fff3f0;border-radius:10px;padding:12px 14px;font-weight:600}
.chklist{list-style:none;margin:12px 0;padding:0;display:grid;gap:8px}
.chkrow{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;line-height:1.7}
.chkrow input{width:20px;height:20px;margin-top:.45em;flex:none}
.chkrow:has(input:checked){background:#f1f7ee;border-color:#6a9a5b}
fieldset.svq{border:1px solid var(--line);border-radius:10px;padding:10px 14px 12px;margin:0 0 14px;display:grid;gap:6px}
fieldset.svq legend{font-weight:700;padding:0 6px}
fieldset.svq.miss{border-color:#b3261e;box-shadow:0 0 0 2px #f4c7c3}