*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#e9edf2;color:#1f2a37;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic","Meiryo",system-ui,-apple-system,sans-serif;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
.wrap{max-width:480px;margin:0 auto;min-height:100vh;background:#fff;box-shadow:0 0 40px rgba(15,30,55,.08)}
.hd{background:#15263f;color:#fff;padding:14px 16px;display:flex;align-items:center;gap:11px;border-bottom:3px solid #c8a24a}
.emb{flex:0 0 38px;width:38px;height:38px;border-radius:9px;background:#c8a24a;color:#15263f;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}
.hd .t1{font-size:15px;font-weight:600;letter-spacing:.02em}
.hd .t2{font-size:12px;color:#aebbd0;margin-top:2px}
.main{padding:18px 16px 28px}
.back{background:none;border:none;color:#aebbd0;font-family:inherit;font-size:13px;cursor:pointer;padding:0;display:flex;align-items:center;gap:4px}
.back:hover{color:#fff}
/* ホーム（コレクション選択） */
.lead{font-size:13px;color:#6b7280;line-height:1.7;margin:2px 0 16px}
.grp{font-size:12px;font-weight:700;color:#8a93a2;letter-spacing:.04em;margin:18px 0 9px}
.ccard{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:15px;border:1.5px solid #e1e5ec;border-radius:14px;background:#fff;cursor:pointer;font-family:inherit;margin-bottom:11px;transition:border-color .15s,box-shadow .15s,transform .06s}
.ccard:hover{border-color:#c8a24a;box-shadow:0 4px 16px rgba(20,40,70,.07)}
.ccard:active{transform:scale(.995)}
a.ccard{text-decoration:none;color:inherit}
.cnum{flex:0 0 46px;width:46px;height:46px;border-radius:11px;background:#15263f;color:#c8a24a;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;line-height:1}
.cnum small{font-size:9px;color:#aebbd0;font-weight:600;margin-top:2px}
.cbody{flex:1;min-width:0}
.cbody .ct{font-size:15px;font-weight:600;color:#1f2a37}
.cbody .cs{font-size:12px;color:#8a93a2;margin-top:3px}
.cat{display:inline-block;font-size:10px;font-weight:700;color:#9a7b27;background:#f6efdc;border-radius:5px;padding:2px 7px;margin-bottom:5px}
/* 成績バッジ（未学習/不合格/合格/満点合格） */
.stb{display:inline-block;font-size:10px;font-weight:700;border-radius:5px;padding:2px 7px;margin:0 6px 5px 0;vertical-align:middle}
.stb-new{color:#7a8699;background:#eef1f6}
.stb-fail{color:#fff;background:#c23b3b}
.stb-pass{color:#fff;background:#1f8a4c}
.stb-perfect{color:#5a4500;background:#e9c766}
.chev{flex:0 0 auto;color:#c2c9d4;font-size:18px}
/* 進捗 */
.prog{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.bar{flex:1;height:6px;border-radius:99px;background:#e6e9ef;overflow:hidden}
.bar>i{display:block;height:100%;background:#c8a24a;border-radius:99px;transition:width .35s}
.pnum{font-size:12px;color:#6b7280;white-space:nowrap}
/* 設問 */
.q{font-size:17px;font-weight:600;line-height:1.65;margin:6px 0 14px;white-space:pre-wrap}
.qimg{margin:0 0 6px}
.qimg img{width:100%;height:auto;display:block;border-radius:11px;border:1px solid #e2e6ec;cursor:zoom-in;background:#f4f6f9}
.hint{font-size:12px;color:#9aa3af;margin:7px 0 15px;display:flex;align-items:center;gap:5px}
.opts{display:flex;flex-direction:column;gap:11px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:54px;padding:13px 15px;border:1.5px solid #dfe3ea;border-radius:13px;background:#fff;font-size:15px;line-height:1.5;color:#1f2a37;cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s,transform .06s}
.opt:hover{border-color:#b9c2d2;background:#f7f9fc}
.opt:active{transform:scale(.99)}
.opt:disabled{cursor:default}
.opt.sel{border-color:#15263f;background:#eef2f8}
.opt.sel .bdg{background:#15263f;color:#fff}
.bdg{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:#eef1f6;color:#6b7280}
.bdg.chk{border-radius:8px}
.cta{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:15px;border:none;border-radius:13px;background:#15263f;color:#fff;font-size:16px;font-weight:600;cursor:pointer;font-family:inherit}
.cta:active{transform:scale(.99)}
.cta:disabled{opacity:.4;cursor:default}
.cta.sm{width:auto;padding:12px 22px;font-size:15px}
.cta.gold{background:#c8a24a;color:#15263f}
/* 画像選択肢（A/B比較） */
.iopts{display:flex;flex-direction:column;gap:14px}
.iopt{border:1.5px solid #dfe3ea;border-radius:14px;padding:11px;background:#fff;transition:border-color .15s,background .15s}
.iopt.iok{border-color:#1f8a4c;background:#f1faf4}
.iopt.ing{border-color:#c23b3b;background:#fdf2f2}
.ihd{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.ihd .ilab{font-size:13px;font-weight:700;color:#5b6472}
.iopt img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid #e2e6ec;cursor:zoom-in;background:#f4f6f9}
.iopt .pick{margin-top:11px}
/* 記入式（fill-in） */
.fills{display:flex;flex-direction:column;gap:11px;margin-bottom:15px}
.fillrow{display:flex;align-items:center;gap:11px}
.filllab{flex:0 0 auto;font-size:15px;font-weight:700;color:#5b6472;min-width:30px}
.fillin{flex:1;min-height:52px;padding:12px 15px;border:1.5px solid #dfe3ea;border-radius:13px;background:#fff;font-size:18px;font-family:inherit;color:#1f2a37;text-align:center;letter-spacing:.08em}
.fillin:focus{outline:none;border-color:#15263f;background:#f7f9fc}
.fillin:disabled{cursor:default}
/* 語群穴埋め（wordbank）：設問文中のプルダウン */
.wbsel{display:inline-block;margin:0 2px;padding:5px 26px 5px 9px;border:1.5px solid #15263f;border-radius:9px;background:#eef2f8;color:#15263f;font-family:inherit;font-size:15px;font-weight:600;line-height:1.4;cursor:pointer;vertical-align:baseline;max-width:100%;
  -webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%2315263f'/></svg>");background-repeat:no-repeat;background-position:right 9px center}
.wbsel:focus{outline:none;box-shadow:0 0 0 3px rgba(200,162,74,.3)}
.wbsel:disabled{opacity:1;cursor:default}
/* 解説の小項目（A/B別） */
.expitem{margin-top:13px;padding-top:13px;border-top:1px dashed #d9deea}
.expitem:first-of-type{margin-top:4px;padding-top:0;border-top:none}
.intro{background:#f5f7fb;border:1px solid #e6e9ef;border-radius:13px;padding:16px;margin:6px 0 18px}
.intro h3{margin:0 0 7px;font-size:13px;font-weight:700;color:#5b6472}
.intro p{margin:0;font-size:14px;line-height:1.8;color:#3a4452;white-space:pre-wrap}
/* フィードバック */
.fb-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;margin:18px 0 11px}
.exp{background:#f5f7fb;border:1px solid #e6e9ef;border-radius:13px;padding:15px}
.exp h4{margin:0 0 9px;font-size:13px;font-weight:700;color:#5b6472}
.exp .etext{margin:0 0 12px;font-size:14px;line-height:1.8;color:#3a4452;white-space:pre-wrap}
.exp img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid #e2e6ec;cursor:zoom-in;background:#f4f6f9}
.cap{font-size:11px;color:#9aa3af;margin:6px 0 0}
.reveal{margin-top:13px}
.reveal .cta{background:#fff;color:#15263f;border:1.5px solid #15263f}
.nextrow{display:flex;justify-content:flex-end;margin-top:18px}
/* 結果 */
.res{text-align:center;padding:22px 0}
.medal{width:74px;height:74px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:35px}
.res .sc{font-size:26px;font-weight:700;margin:0 0 4px}
.res .lb{font-size:15px;margin:0 0 24px}
.res .row{display:flex;gap:10px;justify-content:center}
.foot{text-align:center;font-size:11px;color:#aab2bf;padding:0 0 22px}
#modal{position:fixed;inset:0;background:rgba(12,18,30,.78);display:none;align-items:center;justify-content:center;padding:12px;z-index:50}
#modal .mi{width:100%;max-width:920px;max-height:94vh;display:flex;flex-direction:column}
#modal .mh{display:flex;justify-content:flex-end;margin-bottom:8px}
#modal .x{border:none;background:rgba(255,255,255,.16);width:36px;height:36px;border-radius:9px;font-size:19px;color:#fff;cursor:pointer}
#modal img{width:100%;height:auto;max-height:84vh;object-fit:contain;border-radius:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@keyframes fd{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fade{animation:fd .26s ease}
/* コース選択（index） */
.hero{padding:22px 0 6px}
.hero .em{width:52px;height:52px;border-radius:13px;background:#c8a24a;color:#15263f;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:25px;margin-bottom:14px}
.hero h2{margin:0 0 6px;font-size:21px;font-weight:700;color:#15263f}
.hero p{margin:0;font-size:13px;color:#6b7280;line-height:1.7}
.soon{opacity:.55;cursor:default}
.soon:hover{border-color:#e1e5ec;box-shadow:none}
.tag{display:inline-block;font-size:10px;font-weight:700;border-radius:5px;padding:2px 7px;margin-left:6px;vertical-align:middle}
.tag.rdy{color:#1f8a4c;background:#e8f6ee}
.tag.wip{color:#8a7a3a;background:#f1ecdc}
/* ===== PC（横広がり）：幅広1カラム＋チャート左右並び。スマホ(〜759px)は上記のまま ===== */
@media (min-width:760px){
  .wrap{max-width:960px}
  .hd{padding:16px 24px}
  .main{padding:24px 34px 44px}
  .lead{font-size:14px}
  .q{font-size:18px;margin:8px 0 16px}
  .intro{padding:18px 22px}
  .intro p{font-size:15px}
  /* 設問の複数チャートを左右に並べる（1枚のときは全幅のまま） */
  .qimgs.multi{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px;align-items:start}
  .qimgs.multi .qimg{margin:0}
  /* A/B画像選択肢を左右に並べる */
  .iopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;align-items:start}
  /* A/B別の解説チャートも左右に */
  .expitems{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .expitems .expitem{margin-top:0;padding-top:0;border-top:none}
  /* 拡大モーダルはより大きく */
  #modal .mi{max-width:1100px}
}