:root{--navy:#002C6A;--navy3:#001A40;--navy2:#0B4AA8;--ink:#2f3437;--ink2:#6b6f75;--gold:#A16207;--gold2:#D4A853;--goldbg:#FBF6EA;--off:#F4F5F8;--line:#e2e5ea;--r:#D64545;--sh:0 10px 28px rgba(0,44,106,.12)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;background:var(--off);color:var(--ink);-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
.nw{display:inline-block}
.mock{background:var(--navy3);color:#fff;font-size:12px;text-align:center;padding:6px 10px;line-height:1.6}
.top{background:#fff;display:flex;align-items:center;gap:12px;padding:12px 18px;box-shadow:0 2px 10px rgba(0,44,106,.06);position:sticky;top:0;z-index:10}
.top img{height:20px}
.top b{font-size:15px;color:var(--navy3)}
.top .me{margin-left:auto;font-size:12px;color:var(--ink2)}
.wrap{max-width:1040px;margin:0 auto;padding:22px 18px 60px}

/* トップ */
.hero{background:linear-gradient(135deg,var(--navy3),var(--navy) 60%,var(--navy2));color:#fff;border-radius:22px;padding:30px 28px;position:relative;overflow:hidden;box-shadow:var(--sh)}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:rgba(212,168,83,.2)}
.hero small{color:var(--gold2);font-weight:800;letter-spacing:.1em;font-size:12px}
.hero h1{font-size:clamp(24px,4vw,34px);font-weight:900;line-height:1.4;margin-top:6px;position:relative}
.hero p{font-size:14px;line-height:1.9;margin-top:10px;opacity:.9;max-width:600px;position:relative}
.prog{margin-top:18px;position:relative}
.prog .bar{height:10px;border-radius:5px;background:rgba(255,255,255,.18);overflow:hidden}
.prog .bar i{display:block;height:100%;background:var(--gold2);border-radius:5px;width:0;transition:width .6s}
.prog span{font-size:12px;display:block;margin-top:6px;opacity:.85}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.plan{background:#fff;border-radius:16px;padding:18px 20px;box-shadow:var(--sh);border-top:5px solid var(--c)}
.plan b{font-size:16px;color:var(--navy3)}
.plan .pr{font-size:13px;color:var(--ink2);margin-top:4px}
.plan .pr strong{font-size:22px;color:var(--c);font-family:"Oswald",sans-serif;margin-right:2px}
.plan p{font-size:13px;line-height:1.8;margin-top:6px;color:var(--ink2)}
.note{font-size:11px;color:var(--ink2);margin-top:8px}
.course{margin-top:30px}
.course h2{font-size:20px;color:var(--navy3);display:flex;align-items:center;gap:10px}
.course h2 i{width:10px;height:26px;border-radius:3px;background:var(--c);display:inline-block}
.course .lead{font-size:14px;color:var(--ink2);margin-top:6px;line-height:1.8}
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:14px}
.ls{background:#fff;border-radius:14px;box-shadow:0 4px 14px rgba(0,44,106,.08);padding:16px;display:flex;flex-direction:column;gap:6px;position:relative;transition:transform .2s,box-shadow .2s;border:2px solid transparent}
a.ls:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--c)}
.ls .no{font-family:"Oswald",sans-serif;font-size:13px;color:var(--c);letter-spacing:.06em}
.ls b{font-size:16px;color:var(--navy3);line-height:1.5}
.ls .mt{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink2);margin-top:auto;padding-top:6px}
.ls .st{font-weight:800;border-radius:999px;padding:2px 9px;font-size:11px}
.ls .st.go{background:var(--navy);color:#fff}
.ls .st.done{background:#e6f6ec;color:#17803d}
.ls .st.soon{background:#eef0f4;color:var(--ink2)}
.ls ul{list-style:none;font-size:12px;color:var(--ink2);line-height:1.7}
.ls ul li::before{content:"・"}
.ls.soon{opacity:.85}

/* 受講画面 */
.player{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
.stage{background:#fff;border-radius:18px;box-shadow:var(--sh);overflow:hidden}
.slide{aspect-ratio:16/9;position:relative;overflow:hidden;background:#fff;container-type:inline-size}
.sl{position:absolute;inset:0;padding:6% 7%;display:flex;flex-direction:column;justify-content:center;animation:fade .45s ease}
@keyframes fade{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.sl h3{font-size:4.6cqw;font-weight:900;color:var(--navy3);line-height:1.35}
.sl .k{font-size:1.9cqw;font-weight:800;color:var(--gold);letter-spacing:.12em;margin-bottom:1.2cqw}
.sl.t-title{background:linear-gradient(135deg,var(--navy3),var(--navy) 65%,var(--navy2));color:#fff}
.sl.t-title h3{color:#fff;font-size:7cqw}
.sl.t-title .sub{font-size:2.4cqw;margin-top:1.6cqw;opacity:.85}
.sl.t-title .lg{position:absolute;right:5%;bottom:7%;height:3.2cqw}
.sl.t-title::after{content:"";position:absolute;right:-8%;top:-20%;width:45%;aspect-ratio:1;border-radius:50%;background:rgba(212,168,83,.22)}
.bul{list-style:none;margin-top:3cqw;display:flex;flex-direction:column;gap:1.6cqw}
.bul li{font-size:2.8cqw;font-weight:700;color:var(--ink);display:flex;gap:1.4cqw;align-items:center}
.bul li b{flex:none;width:4cqw;height:4cqw;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:2cqw;font-family:"Oswald",sans-serif}
.fl{display:flex;align-items:center;gap:2cqw;margin-top:4cqw}
.fl div{flex:1;background:var(--goldbg);border-radius:2cqw;padding:3cqw 1cqw;text-align:center;font-size:2.6cqw;font-weight:800;color:var(--navy3)}
.fl div:nth-child(3){background:var(--navy);color:#fff}
.fl span{font-size:3.4cqw;color:var(--gold2);font-weight:900}
.sl .nt{font-size:2.1cqw;color:var(--ink2);margin-top:2.6cqw}
.cg{display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw;margin-top:4cqw}
.cg div{background:#fff;border:.3cqw solid var(--line);border-radius:2cqw;padding:3cqw 1cqw;text-align:center;box-shadow:0 1cqw 2.4cqw rgba(0,44,106,.08)}
.cg svg{width:7cqw;height:7cqw;color:var(--navy)}
.cg p{font-size:2.2cqw;font-weight:800;margin-top:1.4cqw;color:var(--navy3)}
.tw{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw;margin-top:3cqw}
.tw div{border-radius:2cqw;padding:2.6cqw}
.tw .ok{background:#eaf4ee}.tw .ng{background:#fdeeee}
.tw b{font-size:2.4cqw;display:block;margin-bottom:1.2cqw}
.tw .ok b{color:#17803d}.tw .ng b{color:var(--r)}
.tw li{font-size:2cqw;line-height:1.6;margin-left:2.4cqw}
.wb{margin-top:3cqw;background:#fff6e0;border-left:1.2cqw solid var(--gold2);border-radius:1.4cqw;padding:2.4cqw 3cqw}
.wb li{font-size:2.4cqw;font-weight:700;line-height:1.75;list-style:none}
.wb li::before{content:"！";color:var(--gold);margin-right:1cqw}
.tg{display:grid;grid-template-columns:1fr 1fr;gap:2cqw;margin-top:3cqw}
.tg div{border:.3cqw solid var(--line);border-radius:1.6cqw;padding:2.2cqw 2.6cqw;display:flex;justify-content:space-between;align-items:baseline}
.tg b{font-size:2.8cqw;color:var(--navy3)}.tg span{font-size:1.8cqw;color:var(--ink2)}
.sp{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;margin-top:4cqw}
.sp div{background:var(--off);border-radius:2cqw;padding:3cqw 2cqw;position:relative}
.sp i{font-style:normal;font-family:"Oswald",sans-serif;font-size:4.4cqw;color:var(--gold2);font-weight:700}
.sp b{display:block;font-size:2.6cqw;color:var(--navy3);margin-top:.6cqw}
.sp p{font-size:1.9cqw;color:var(--ink2);margin-top:.8cqw;line-height:1.5}
.sx{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw;margin-top:3.4cqw}
.sx div{border-radius:2cqw;padding:2.6cqw 3cqw}
.sx .ai{background:var(--goldbg)}.sx .hu{background:var(--navy);color:#fff}
.sx b{font-size:2.4cqw;display:block;margin-bottom:1.4cqw}
.sx .ai b{color:var(--gold)}
.sx span{display:inline-block;font-size:2.4cqw;font-weight:800;border-radius:999px;padding:.6cqw 2cqw;margin:0 1cqw 1cqw 0;background:#fff;color:var(--navy3)}
.sx .hu span{background:rgba(255,255,255,.14);color:#fff}
.sl.t-end{background:var(--goldbg)}
.sl .nx{margin-top:3cqw;display:inline-block;background:var(--navy);color:#fff;font-size:2.2cqw;font-weight:800;border-radius:999px;padding:1.2cqw 3cqw;align-self:flex-start}
.ctl{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line)}
.ctl button{border:none;background:var(--navy);color:#fff;font-weight:800;border-radius:10px;height:42px;padding:0 16px;font-size:14px}
.ctl button.wh{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.ctl button:disabled{opacity:.35}
.ctl .pg{flex:1;height:6px;border-radius:3px;background:#e9ecf2;overflow:hidden}
.ctl .pg i{display:block;height:100%;background:var(--gold2);transition:width .3s}
.ctl .cnt{font-size:12px;color:var(--ink2);white-space:nowrap}
.cap{padding:16px 18px 20px;font-size:15px;line-height:2;color:var(--ink);border-top:1px solid var(--line);background:#fcfcfd}
.cap small{display:block;font-size:11px;font-weight:800;color:var(--gold);letter-spacing:.1em;margin-bottom:4px}
.side{background:#fff;border-radius:16px;box-shadow:0 4px 14px rgba(0,44,106,.08);padding:14px}
.side b{font-size:13px;color:var(--navy3)}
.side ol{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:4px}
.side li button{width:100%;text-align:left;border:none;background:none;border-radius:8px;padding:7px 9px;font-size:13px;color:var(--ink2);display:flex;gap:8px}
.side li button.on{background:var(--goldbg);color:var(--navy3);font-weight:800}
.side li button i{font-style:normal;font-family:"Oswald",sans-serif;color:var(--gold);min-width:18px}
.quiz{background:#fff;border-radius:18px;box-shadow:var(--sh);padding:22px;margin-top:18px}
.quiz h2{font-size:18px;color:var(--navy3)}
.qq{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.qq p{font-weight:800;font-size:15px;line-height:1.7}
.qq .cs{display:grid;gap:8px;margin-top:10px}
.qq button{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:11px 14px;text-align:left;font-size:14px}
.qq button.ok{border-color:#17803d;background:#eaf4ee;font-weight:800}
.qq button.ng{border-color:var(--r);background:#fdeeee}
.qq .ex{font-size:13px;color:var(--ink2);margin-top:8px;line-height:1.7}
.done{display:none;margin-top:18px;background:var(--navy);color:#fff;border-radius:14px;padding:18px;text-align:center}
.done.on{display:block}
.done b{font-size:18px}
.done a{display:inline-block;margin-top:10px;background:var(--gold2);color:var(--navy3);font-weight:800;border-radius:999px;padding:9px 18px;font-size:14px}
.back{display:inline-block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:12px}
@media (max-width:820px){.player{grid-template-columns:1fr}.side{display:none}.plans{grid-template-columns:1fr}}
@media (max-width:640px){.wrap{padding:14px 12px 50px}.hero{padding:22px 18px;border-radius:18px}.cap{font-size:14px;padding:14px}.ctl button{padding:0 12px;font-size:13px}}
/* スマホ：スライドを縦長にして、文字を大きくする */
@container (max-width:520px){
  .sl{padding:7% 6%}
  .sl h3{font-size:7cqw}
  .sl .k{font-size:3cqw}
  .sl.t-title h3{font-size:10cqw}.sl.t-title .sub{font-size:3.8cqw}.sl.t-title .lg{height:5cqw}
  .bul li{font-size:4.4cqw}.bul li b{width:6.4cqw;height:6.4cqw;font-size:3.4cqw}
  .fl{flex-direction:column;gap:1.6cqw}.fl div{width:100%;font-size:4.4cqw;padding:3cqw}.fl span{transform:rotate(90deg);font-size:5cqw}
  .sl .nt{font-size:3.4cqw}
  .cg{grid-template-columns:1fr 1fr}.cg svg{width:10cqw;height:10cqw}.cg p{font-size:3.8cqw}
  .tw{grid-template-columns:1fr}.tw b{font-size:4.2cqw}.tw li{font-size:3.6cqw;margin-left:4cqw}
  .wb li{font-size:3.9cqw}
  .tg{grid-template-columns:1fr}.tg b{font-size:4.6cqw}.tg span{font-size:3cqw}
  .sp{grid-template-columns:1fr}.sp i{font-size:6cqw}.sp b{font-size:4.4cqw}.sp p{font-size:3.4cqw}
  .sx{grid-template-columns:1fr}.sx b{font-size:4.2cqw}.sx span{font-size:4cqw}
  .sl .nx{font-size:3.8cqw;padding:2cqw 4.4cqw}
}
@media (max-width:640px){.slide{aspect-ratio:3/4}}