@charset "utf-8";
/* ================================================================
   共通テスト英語L 超絶道場 — 原田英語
   方針（kyote-app と同じ思想。色だけ緑→藍に変えている）:
     ・白地。背景に模様を敷かない
     ・日本語はゴシック。英文だけセリフ体で大きく、行間を広く
     ・色は「緑＝正解 / 赤＝誤答」だけ。ブランド色は藍
     ・装飾より余白。1画面に置くものを減らす
   リスニング特有: 音声プレーヤ／スクリプト／ディクテーション／
   先読みタイマー／ワークシート を足している。
   ================================================================ */

:root{
  --brand:#2e478f; --brand-dark:#213567; --brand-light:#ecf0fa; --brand-mid:#b9c5e6;
  --text:#1a1d1f; --sub:#5b6670; --line:#dde2e6; --line-soft:#eef1f3;
  --bg:#ffffff; --panel:#f7f9fa;
  --ok:#17784f; --ok-bg:#e8f5ee;
  --ng:#c0392b; --ng-bg:#fdecea;
  --amber:#b8730c; --amber-bg:#fdf3e0;
  --mark:#fff3b8;
  --radius:12px;
  --ja:"Noto Sans JP","Hiragino Sans","Yu Gothic UI","Meiryo",system-ui,sans-serif;
  --en:Georgia,"Times New Roman","Century Schoolbook",serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:var(--ja);
  background:var(--bg);
  color:var(--text);
  line-height:1.85;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
button,input,select,textarea{font-family:inherit;color:inherit;font-size:inherit;}
a{color:var(--brand);}
.wrap{max-width:760px;margin:0 auto;padding:0 18px 96px;}
body.wide-page .wrap{max-width:1160px;}
@media(max-width:640px){ body{font-size:16px;} .wrap{padding:0 14px 92px;} }

/* ===== ヘッダ ===== */
header.top{padding:18px 0 14px;border-bottom:1px solid var(--line);margin-bottom:20px;}
.title-row{display:flex;align-items:center;gap:12px;}
.stamp{
  width:44px;height:44px;border-radius:10px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;flex-shrink:0;
}
header.top h1{font-size:1.22rem;font-weight:700;line-height:1.4;letter-spacing:.01em;}
header.top h1 a{color:inherit;text-decoration:none;}
header.top p.tag{font-size:.82rem;color:var(--sub);margin-top:1px;}
header.top p.tag b{color:var(--brand);font-weight:700;}
.hdr-right{margin-left:auto;text-align:right;flex-shrink:0;}
.rank{font-size:.75rem;color:var(--sub);}
.rank b{display:block;font-size:.8rem;color:var(--sub);font-weight:500;}
.title-main{min-width:0;}
.bubble{
  display:inline-block;background:var(--brand-light);color:var(--brand-dark);
  border-radius:99px;padding:2px 12px;font-size:.74rem;font-weight:700;
  position:relative;margin-bottom:5px;
}
.bubble::after{content:"";position:absolute;left:18px;bottom:-5px;width:9px;height:9px;
  background:var(--brand-light);transform:rotate(45deg);}
@media(max-width:640px){
  header.top{padding:12px 0 10px;margin-bottom:14px;}
  .stamp{width:36px;height:36px;font-size:.85rem;}
  header.top h1{font-size:1.05rem;}
  header.top p.tag{display:none;}
  .hdr-right{display:none;}
  .bubble{font-size:.68rem;padding:1px 10px;}
}

/* ===== 見出し・箱 ===== */
.sec-title{
  font-size:1.05rem;font-weight:700;color:var(--brand-dark);
  margin:30px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--brand-light);line-height:1.5;
}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:14px 0;}
.card.tight{padding:14px 16px;}
.card.soft{background:var(--panel);border-color:var(--line-soft);}
.card-head{display:flex;align-items:center;gap:9px;margin-bottom:12px;}
.card-head i{
  font-style:normal;width:26px;height:26px;border-radius:7px;background:var(--brand-light);color:var(--brand-dark);
  font-size:.82rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.card-head b{font-size:1.02rem;font-weight:700;}
.card-head .more{margin-left:auto;font-size:.8rem;color:var(--sub);font-weight:400;}
.hint{font-size:.86rem;color:var(--sub);line-height:1.8;}
.hint.mt{margin-top:10px;}
.lead{font-size:.95rem;color:var(--sub);margin-bottom:14px;line-height:1.85;}

/* ===== ボタン ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 20px;border:1.5px solid var(--line);background:var(--bg);border-radius:9px;
  font-size:.95rem;font-weight:700;color:var(--text);cursor:pointer;line-height:1.4;
}
.btn:hover{background:var(--panel);}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand);}
.btn.primary:hover{background:var(--brand-dark);}
.btn.warn{background:var(--ng);color:#fff;border-color:var(--ng);}
.btn.ghost{background:none;border-color:transparent;color:var(--sub);font-weight:500;text-decoration:underline;padding:6px 4px;}
.btn.block{width:100%;}
.btn.lg{padding:15px 28px;font-size:1.05rem;}
.btn.sm{padding:7px 13px;font-size:.85rem;font-weight:500;}
.btn:disabled{opacity:.45;cursor:default;}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.row.between{justify-content:space-between;}
.spacer{flex:1;}

.chips{display:flex;gap:7px;flex-wrap:wrap;}
.chips button{
  padding:9px 15px;border:1.5px solid var(--line);background:var(--bg);border-radius:8px;
  font-size:.9rem;font-weight:500;color:var(--text);cursor:pointer;
}
.chips button.on{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:700;}
.tag-s{display:inline-block;font-size:.78rem;font-weight:700;padding:2px 9px;border-radius:5px;
  background:var(--brand-light);color:var(--brand-dark);}
.tag-s.grey{background:var(--panel);color:var(--sub);}
.tag-s.ok{background:var(--ok-bg);color:var(--ok);}
.tag-s.ng{background:var(--ng-bg);color:var(--ng);}
.tag-s.amber{background:var(--amber-bg);color:var(--amber);}

/* ================================================================
   ホーム
   ================================================================ */
.countq{
  display:flex;align-items:center;gap:18px;
  background:var(--bg);border:1.5px solid var(--line);
  border-radius:var(--radius);padding:14px 18px;margin:4px 0 14px;
}
.cq-days{flex-shrink:0;text-align:center;min-width:126px;}
.cq-days i{display:block;font-style:normal;font-size:.72rem;color:var(--sub);letter-spacing:.02em;}
.cq-days b{font-size:2.05rem;color:var(--brand-dark);line-height:1.2;letter-spacing:.01em;}
.cq-days b.eve{font-size:1.4rem;}
.cq-days span{font-size:.88rem;color:var(--brand-dark);font-weight:700;margin-left:2px;}
.cq-days em{display:block;font-style:normal;font-size:.72rem;color:var(--sub);}
.cq-quote{flex:1;min-width:0;border-left:1px solid var(--line-soft);padding-left:18px;}
.cq-en{font-family:var(--en);font-size:1.04rem;line-height:1.6;color:var(--text);}
.cq-ja{font-size:.8rem;color:var(--sub);margin-top:4px;line-height:1.7;}
.cq-by{margin-left:8px;font-size:.74rem;color:var(--sub);white-space:nowrap;}
@media(max-width:560px){
  .countq{flex-direction:column;align-items:stretch;gap:10px;padding:13px 15px;}
  .cq-days{display:flex;align-items:baseline;justify-content:center;gap:7px;min-width:0;}
  .cq-days b{font-size:1.7rem;}
  .cq-quote{border-left:0;padding-left:0;border-top:1px solid var(--line-soft);padding-top:10px;}
  .cq-en{font-size:.98rem;}
  .cq-by{white-space:normal;}
}

.hero{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);
  color:#fff;border-radius:var(--radius);padding:26px 24px;margin:4px 0 20px;
}
.hero .hero-t{font-size:1.35rem;font-weight:700;line-height:1.5;letter-spacing:.01em;}
.hero p{font-size:.93rem;line-height:1.9;margin:10px 0 16px;color:rgba(255,255,255,.92);}
.hero p b{color:#fff;border-bottom:2px solid rgba(255,255,255,.55);}
.hero .btn.primary{background:#fff;color:var(--brand-dark);border-color:#fff;}
.hero .btn.primary:hover{background:var(--brand-light);}

.scorebd{
  display:flex;align-items:center;gap:18px;width:100%;text-align:left;cursor:pointer;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);
  color:#fff;border:0;border-radius:var(--radius);padding:18px 22px;margin:4px 0 16px;
}
.scorebd .sb-left{flex-shrink:0;}
.scorebd .sb-score{font-size:2.1rem;font-weight:700;line-height:1.1;letter-spacing:.01em;}
.scorebd .sb-score i{font-style:normal;font-size:1rem;font-weight:500;opacity:.75;margin-left:2px;}
.scorebd .sb-judge{
  display:inline-flex;align-items:center;justify-content:center;vertical-align:6px;
  width:30px;height:30px;margin-left:10px;border-radius:8px;
  background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.5);
  font-size:1.05rem;font-weight:700;
}
.scorebd .sb-cap{display:block;font-size:.78rem;color:rgba(255,255,255,.85);margin-top:4px;}
.scorebd .sb-right{flex:1;min-width:0;}
.scorebd .sb-line{display:block;font-size:.85rem;color:rgba(255,255,255,.88);}
.scorebd .sb-line b{font-size:1rem;color:#fff;}
.scorebd .sb-prog{display:block;height:7px;background:rgba(255,255,255,.22);border-radius:99px;overflow:hidden;margin:8px 0 6px;}
.scorebd .sb-prog i{display:block;height:100%;background:#fff;border-radius:99px;}
.scorebd .sb-note{display:block;font-size:.78rem;color:rgba(255,255,255,.8);}
.scorebd .sb-note b{color:#fff;}
@media(max-width:560px){
  .scorebd{flex-direction:column;align-items:stretch;gap:10px;padding:16px 18px;}
  .scorebd .sb-score{font-size:1.8rem;}
}

/* 武器庫タイル */
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 8px;}
/* いちばん見てほしい1枚。白い箱が並ぶ中で埋もれないよう、色を反転させる。 */
.toolhero{
  grid-column:1 / -1;display:flex;align-items:center;gap:15px;width:100%;text-align:left;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);
  border:0;border-radius:var(--radius);padding:18px 20px;cursor:pointer;color:#fff;
  box-shadow:0 4px 18px rgba(46,71,143,.28);transition:transform .12s,box-shadow .12s;
}
.toolhero:hover{transform:translateY(-2px);box-shadow:0 7px 24px rgba(46,71,143,.36);}
.toolhero .he{flex-shrink:0;font-size:2.5rem;line-height:1;}
.toolhero .hx{flex:1;min-width:0;}
.toolhero .hb{
  display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.08em;
  background:#ffd84d;color:#4a3800;border-radius:99px;padding:2px 9px;margin-bottom:5px;
}
.toolhero b{display:block;font-size:1.24rem;line-height:1.35;color:#fff;}
.toolhero .hl{display:block;font-size:.9rem;line-height:1.6;margin-top:4px;color:rgba(255,255,255,.95);}
.toolhero .hl b{display:inline;font-size:inherit;color:#ffd84d;}
.toolhero .hs{display:block;font-size:.79rem;line-height:1.6;margin-top:5px;color:rgba(255,255,255,.78);}
.toolhero .ha{flex-shrink:0;font-size:1.5rem;color:rgba(255,255,255,.85);}
@media(max-width:520px){
  .toolhero{gap:11px;padding:15px 15px;}
  .toolhero .he{font-size:2rem;}
  .toolhero b{font-size:1.08rem;}
  .toolhero .hl{font-size:.83rem;}
  .toolhero .hs{display:none;}
  .toolhero .ha{display:none;}
}
.tool{
  position:relative;display:block;width:100%;text-align:left;background:var(--bg);
  border:1.5px solid var(--line);border-radius:var(--radius);padding:14px 16px;cursor:pointer;
  transition:border-color .12s,box-shadow .12s,transform .12s;
}
.tool:hover{border-color:var(--brand);box-shadow:0 3px 14px rgba(46,71,143,.10);transform:translateY(-1px);}
.tool .te{display:block;font-size:1.55rem;line-height:1.2;}
.tool b{display:block;font-size:1rem;margin-top:7px;line-height:1.4;}
.tool .td{display:block;font-size:.8rem;color:var(--sub);margin-top:3px;line-height:1.65;}
.tool .tn{
  position:absolute;top:12px;right:14px;font-size:.8rem;font-weight:700;color:var(--brand-dark);
  background:var(--brand-light);border-radius:99px;padding:2px 11px;line-height:1.7;
}
@media(max-width:520px){
  .tool-grid{gap:8px;}
  .tool{padding:12px 13px;}
  .tool b{font-size:.93rem;}
  .tool .td{font-size:.74rem;}
  .tool .tn{font-size:.72rem;padding:1px 8px;top:10px;right:11px;}
}

/* 大問の一覧 */
.dai-list{display:grid;gap:10px;margin:16px 0;}
.dai-row{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--bg);
  border:1.5px solid var(--line);border-radius:var(--radius);padding:16px 18px;cursor:pointer;
  transition:border-color .12s,box-shadow .12s,transform .12s;
}
.dai-row:hover{border-color:var(--brand);box-shadow:0 3px 14px rgba(46,71,143,.10);transform:translateY(-1px);}
.dai-row .dn{
  flex-shrink:0;width:58px;font-size:.95rem;font-weight:700;color:#fff;background:var(--brand);
  border-radius:8px;text-align:center;padding:8px 0;line-height:1.2;
}
.dai-row .dn small{display:block;font-size:.62rem;font-weight:500;opacity:.85;letter-spacing:.02em;}
.dai-row .dm{flex:1;min-width:0;}
.dai-row .dm b{display:block;font-size:1.08rem;line-height:1.4;}
.dai-row .demoji{margin-right:7px;}
.dai-row .dh{display:block;font-size:.92rem;color:var(--text);margin-top:3px;}
.dai-row .dmeta{display:block;font-size:.82rem;color:var(--sub);margin-top:5px;}
.dai-row .dgo{flex-shrink:0;text-align:right;width:74px;}
.dai-row .dpct{display:block;font-size:.98rem;font-weight:700;color:var(--brand-dark);line-height:1.3;}
.dai-row .dpct.low{color:var(--ng);}
.dai-row .dpct.dim{font-size:.78rem;font-weight:500;color:var(--sub);}
.dai-row .dbar{display:block;width:100%;height:6px;background:var(--line-soft);border-radius:99px;overflow:hidden;margin:5px 0 4px;}
.dai-row .dbar i{display:block;height:100%;background:var(--brand);border-radius:99px;}
.dai-row .dbar i.low{background:var(--ng);}
.dai-row .dnum{display:block;font-size:.76rem;color:var(--sub);}
@media(max-width:520px){
  .dai-row{padding:13px 14px;gap:11px;}
  .dai-row .dn{width:50px;font-size:.85rem;padding:6px 0;}
  .dai-row .dm b{font-size:1rem;}
  .dai-row .dh{font-size:.86rem;}
  .dai-row .dmeta{font-size:.76rem;}
  .dai-row .dgo{width:60px;}
}

/* ===== 大問ページ ===== */
.dai-h{font-size:1.5rem;font-weight:700;margin:14px 0 10px;line-height:1.35;}
.dai-h span{display:inline-block;background:var(--brand);color:#fff;border-radius:7px;
  padding:2px 11px;font-size:.95rem;margin-right:10px;vertical-align:middle;}
.honne{font-size:1.15rem;font-weight:700;color:var(--brand-dark);background:var(--brand-light);
  border-radius:10px;padding:14px 18px;margin:10px 0 14px;line-height:1.6;}

ol.steps{list-style:none;counter-reset:st;display:grid;gap:10px;margin:0;}
ol.steps li{counter-increment:st;position:relative;border:1px solid var(--line);border-radius:10px;
  padding:15px 18px 15px 56px;}
ol.steps li::before{content:counter(st);position:absolute;left:16px;top:15px;width:26px;height:26px;
  background:var(--brand);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:700;}
ol.steps li b{font-size:1.02rem;}
ol.steps li p{font-size:.94rem;color:var(--sub);margin-top:6px;line-height:1.85;}
ol.steps li p b{color:var(--text);font-size:1em;}

.trapcard{border:1px solid var(--line);border-radius:10px;padding:14px 17px;margin:8px 0;}
.trapcard b{display:block;font-size:1rem;color:var(--ng);}
.trapcard p{font-size:.92rem;margin-top:7px;line-height:1.8;}
.trapcard .lb{display:inline-block;font-size:.76rem;font-weight:700;background:var(--ng-bg);color:var(--ng);
  border-radius:5px;padding:1px 8px;margin-right:8px;}
.trapcard .lb.ok{background:var(--ok-bg);color:var(--ok);}

.phlist{display:grid;grid-template-columns:1fr;gap:8px;}
@media(min-width:620px){.phlist{grid-template-columns:1fr 1fr;}}
.ph2{border:1px solid var(--line);border-radius:9px;padding:11px 14px;}
.ph2 .en{font-size:1.02rem;}
.ph2 .pj{font-size:.94rem;margin-top:2px;}
.ph2 .pn{font-size:.84rem;color:var(--sub);margin-top:5px;}

ul.checks{list-style:none;display:grid;gap:7px;}
ul.checks li{position:relative;padding-left:26px;font-size:.96rem;}
ul.checks li::before{content:"□";position:absolute;left:2px;color:var(--brand);font-size:1.15rem;line-height:1.4;}
.ngcard{border-color:#e8b4ad;background:#fffaf9;}
.ngcard .card-head i{background:var(--ng-bg);color:var(--ng);}

/* ================================================================
   音声プレーヤ（この教材の心臓部）
   ================================================================ */
.player{
  border:1.5px solid var(--brand-mid);border-radius:var(--radius);
  background:var(--brand-light);padding:14px 16px;margin:14px 0;
}
.player.locked{border-color:var(--line);background:var(--panel);}
.pl-top{display:flex;align-items:center;gap:12px;}
.pl-play{
  flex-shrink:0;width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;
  background:var(--brand);color:#fff;font-size:1.35rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(46,71,143,.28);
}
.pl-play:hover{background:var(--brand-dark);}
.pl-play:disabled{background:var(--sub);opacity:.5;cursor:default;box-shadow:none;}
.pl-mid{flex:1;min-width:0;}
.pl-label{font-size:.82rem;color:var(--brand-dark);font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pl-label .cnt{background:var(--brand);color:#fff;border-radius:99px;padding:1px 9px;font-size:.74rem;}
.pl-label .cnt.done{background:var(--sub);}
.pl-seek{
  width:100%;height:6px;margin-top:8px;background:rgba(46,71,143,.18);border-radius:99px;
  overflow:hidden;position:relative;cursor:pointer;
}
.pl-seek i{display:block;height:100%;background:var(--brand);border-radius:99px;width:0;transition:width .12s linear;}
.pl-time{font-size:.76rem;color:var(--sub);font-variant-numeric:tabular-nums;margin-top:4px;
  display:flex;justify-content:space-between;}
.pl-bot{display:flex;align-items:center;gap:8px;margin-top:11px;flex-wrap:wrap;}
.pl-bot .sp{display:flex;gap:4px;}
.pl-bot .sp button{
  border:1.5px solid var(--brand-mid);background:var(--bg);border-radius:7px;padding:4px 9px;
  font-size:.78rem;font-weight:700;color:var(--brand-dark);cursor:pointer;font-variant-numeric:tabular-nums;
}
.pl-bot .sp button.on{background:var(--brand);color:#fff;border-color:var(--brand);}
.pl-bot .mini{
  border:1.5px solid var(--brand-mid);background:var(--bg);border-radius:7px;padding:4px 11px;
  font-size:.78rem;font-weight:700;color:var(--brand-dark);cursor:pointer;
}
.pl-bot .mini:hover{background:#fff;}
.pl-bot .mini.on{background:var(--brand);color:#fff;border-color:var(--brand);}
.pl-bot .mini:disabled{opacity:.4;cursor:default;}
.pl-note{font-size:.78rem;color:var(--sub);margin-top:8px;line-height:1.7;}
@media(max-width:520px){
  .player{padding:12px 13px;}
  .pl-play{width:48px;height:48px;font-size:1.2rem;}
}

/* 波形っぽい再生インジケータ */
.bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px;vertical-align:-2px;margin-left:2px;}
.bars i{width:3px;background:var(--brand);border-radius:2px;height:30%;animation:bb .9s ease-in-out infinite;}
.bars i:nth-child(2){animation-delay:.15s;} .bars i:nth-child(3){animation-delay:.3s;}
.bars i:nth-child(4){animation-delay:.45s;} .bars i:nth-child(5){animation-delay:.6s;}
@keyframes bb{0%,100%{height:25%;}50%{height:100%;}}
@media (prefers-reduced-motion:reduce){ .bars i{animation:none;height:60%;} }

/* ===== スクリプト表示 ===== */
.script{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:14px 0;background:var(--bg);}
.script .sc-h{display:flex;align-items:center;gap:9px;font-size:.85rem;font-weight:700;color:var(--sub);
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap;}
.script .sc-h .spacer{flex:1;}
.script .line .body{display:block;}
.line{display:flex;gap:11px;padding:7px 9px;border-radius:8px;margin:2px -9px;}
.line.on{background:var(--mark);}
.line .who{
  flex-shrink:0;font-size:.78rem;font-weight:700;width:52px;padding-top:5px;
  color:var(--brand-dark);letter-spacing:.02em;
}
.line .who.w{color:#a3376b;}
.line .body{flex:1;min-width:0;}
.line .en{display:block;font-family:var(--en);font-size:1.06rem;line-height:1.85;}
.line .ja{display:block;font-size:.86rem;color:var(--sub);line-height:1.75;margin-top:2px;}
.line.hide-ja .ja{display:none;}
.script.blurja .ja{filter:blur(4px);user-select:none;}
.script.blurja:hover .ja{filter:none;}
@media(max-width:520px){
  .script{padding:14px 13px;}
  .line{gap:8px;} .line .who{width:44px;font-size:.72rem;}
  .line .en{font-size:1rem;}
}

/* 音の変化ハイライト */
.chg{border-bottom:2px solid var(--brand);padding-bottom:1px;cursor:help;}
.chg.link{border-color:#2e8fa8;}
.chg.drop{border-color:#c0392b;}
.chg.flap{border-color:#b8730c;}
.chg.weak{border-color:#7a5ea8;}
.chglegend{display:flex;gap:12px;flex-wrap:wrap;font-size:.8rem;color:var(--sub);margin-top:10px;}
.chglegend span{display:inline-flex;align-items:center;gap:5px;}
.chglegend i{width:16px;height:3px;border-radius:2px;display:inline-block;font-style:normal;}

/* ================================================================
   資料（第4問の表・第5問のワークシート・図表）
   ================================================================ */
.doc{border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin:16px 0;background:var(--bg);}
@media(max-width:640px){.doc{padding:16px 15px;}}
.doc-label{
  display:flex;align-items:center;gap:9px;font-size:.85rem;font-weight:700;color:var(--sub);
  padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap;
}
.doc-label .t{font-family:var(--en);font-size:.9rem;font-style:italic;color:var(--sub);font-weight:400;}
.doc h4{font-family:var(--en);font-size:1.15rem;font-weight:700;color:var(--text);margin:20px 0 8px;line-height:1.5;}
.doc h4:first-child{margin-top:0;}
.doc p.en{margin:12px 0;font-family:var(--en);font-size:1.06rem;line-height:1.95;}
.doc ul{list-style:none;margin:12px 0;}
.doc ul li{position:relative;padding-left:20px;margin:8px 0;}
.doc ul li::before{content:"";position:absolute;left:4px;top:.85em;width:6px;height:6px;border-radius:50%;background:var(--brand-mid);}
.doc .note{background:var(--panel);border-radius:8px;padding:12px 15px;margin:14px 0;font-size:1.02rem;}
.doc table{width:100%;border-collapse:collapse;margin:14px 0;font-family:var(--en);font-size:1rem;}
.doc table th,.doc table td{border:1px solid var(--line);padding:9px 12px;text-align:left;}
.doc table th{background:var(--panel);font-weight:700;}
.doc figure{margin:16px 0;text-align:center;}
.doc figure svg{max-width:100%;height:auto;}
.doc figcaption{font-family:var(--en);font-size:.88rem;color:var(--sub);font-style:italic;margin-top:6px;}
.ja{font-size:.9rem;color:var(--sub);line-height:1.8;margin-top:6px;}
.en{font-family:var(--en);}
@media(max-width:640px){
  .doc table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .doc table th,.doc table td{padding:7px 9px;font-size:.92rem;}
}

/* グラフ（Chart.js）を置く枠 — 画像は使わない。数値JSONから描く。 */
.chartbox{position:relative;margin:16px auto;max-width:520px;}
.chartbox .ct{font-size:.92rem;font-weight:700;text-align:center;margin-bottom:8px;}
.chartbox .cs{font-size:.8rem;color:var(--sub);text-align:center;margin-top:6px;}

/* ワークシート（第5問） */
.wsheet{border:2px solid var(--text);border-radius:6px;padding:0;overflow:hidden;margin:16px 0;background:var(--bg);}
.wsheet .wh{background:var(--text);color:#fff;padding:9px 18px;font-size:.82rem;font-weight:700;letter-spacing:.08em;}
.wsheet .wb{padding:16px 20px;}
.wsheet h4{font-family:var(--en);font-size:1.12rem;margin:0 0 10px;text-align:center;}
.wsheet .wsec{font-family:var(--en);font-weight:700;font-size:1.02rem;margin:16px 0 6px;
  border-bottom:1px solid var(--line);padding-bottom:4px;}
.wsheet .wsec:first-of-type{margin-top:4px;}
.wsheet ul{list-style:none;margin:8px 0;}
.wsheet ul li{position:relative;padding-left:20px;margin:7px 0;font-family:var(--en);font-size:1.02rem;line-height:1.85;}
.wsheet ul li::before{content:"•";position:absolute;left:5px;color:var(--sub);}
.wsheet table{width:100%;border-collapse:collapse;margin:10px 0;font-family:var(--en);font-size:.98rem;}
.wsheet th,.wsheet td{border:1px solid var(--line);padding:8px 11px;text-align:left;}
.wsheet th{background:var(--panel);font-weight:700;}
@media(max-width:640px){
  .wsheet .wb{padding:14px 14px;}
  .wsheet table{display:block;overflow-x:auto;}
}

/* 空欄（ワークシート・表の穴） */
.blank{
  display:inline-flex;align-items:center;justify-content:center;min-width:56px;height:29px;
  border:1.5px solid var(--brand);border-radius:6px;background:var(--bg);
  color:var(--brand-dark);font-weight:700;font-family:var(--ja);font-size:.88rem;
  padding:0 9px;cursor:pointer;vertical-align:middle;margin:0 2px;
}
.blank:hover{background:var(--brand-light);}
.blank.filled{background:var(--brand-light);}
.blank.on{background:var(--mark);border-color:var(--amber);}
.blank.right{border-color:var(--ok);background:var(--ok-bg);color:var(--ok);}
.blank.wrong{border-color:var(--ng);background:var(--ng-bg);color:var(--ng);}

/* ================================================================
   設問
   ================================================================ */
.q{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:14px 0;}
@media(max-width:640px){.q{padding:15px 15px;}}
.q-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px;}
.q-no{flex-shrink:0;min-width:30px;width:auto;padding:0 7px;height:30px;border-radius:8px;background:var(--text);color:#fff;white-space:nowrap;
  font-size:.92rem;font-weight:700;display:flex;align-items:center;justify-content:center;}
.q-text{font-family:var(--en);font-size:1.06rem;line-height:1.7;flex:1;padding-top:2px;}
.q-text .qja{font-family:var(--ja);font-size:.88rem;color:var(--sub);display:block;margin-top:3px;line-height:1.7;}
.q-type{font-size:.8rem;color:var(--sub);margin-top:4px;}
.q-pt{margin-left:auto;flex-shrink:0;font-size:.76rem;color:var(--sub);white-space:nowrap;padding-top:6px;}
.choices{list-style:none;display:grid;gap:9px;}
.choice{
  display:flex;align-items:flex-start;gap:12px;padding:13px 15px;border:1.5px solid var(--line);
  border-radius:10px;cursor:pointer;background:var(--bg);text-align:left;width:100%;line-height:1.7;
}
.choice:hover{border-color:var(--brand-mid);background:var(--panel);}
.choice .m{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:var(--sub);}
.choice .c{flex:1;font-family:var(--en);font-size:1.03rem;}
.choice .c .cja{font-family:var(--ja);font-size:.85rem;color:var(--sub);display:block;margin-top:2px;}
.choice.sel{border-color:var(--brand);background:var(--brand-light);}
.choice.sel .m{background:var(--brand);color:#fff;border-color:var(--brand);}
.choice.right{border-color:var(--ok);background:var(--ok-bg);}
.choice.right .m{background:var(--ok);color:#fff;border-color:var(--ok);}
.choice.wrong{border-color:var(--ng);background:var(--ng-bg);}
.choice.wrong .m{background:var(--ng);color:#fff;border-color:var(--ng);}
.choices.locked .choice{cursor:default;}

/* イラスト・グラフ選択（第1問B・第2問・第6問B）。4枚を並べる。
   グリッドの中に中身の大きいものを置くので、min-width:0 を必ず入れる。
   これがないと列がはみ出してページ全体が横にずれる。 */
.choice .c.fig{display:block;min-width:0;width:100%;}
.choice .c.fig svg{width:100%;max-width:260px;height:auto;display:block;margin:0 auto;}
.choice .c.fig .chartbox{max-width:100%;margin:0;}
.choices.figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.choices.figs > li{min-width:0;}
.choices.figs .choice{min-width:0;padding:10px 11px;}
@media(max-width:560px){.choices.figs{grid-template-columns:1fr;}}

.exp{margin-top:14px;padding:16px 18px;background:var(--panel);border-radius:10px;font-size:.97rem;line-height:1.95;}
.exp .lbl{display:block;font-size:.85rem;font-weight:700;color:var(--brand-dark);margin-bottom:8px;}
.exp b{font-weight:700;}
.exp code{font-family:var(--en);font-style:normal;background:#fff;border:1px solid var(--line);
  padding:1px 6px;border-radius:4px;font-size:.97em;}
.exp .per{margin-top:12px;display:grid;gap:9px;}
.exp .per > div{font-size:.94rem;padding:9px 12px;background:#fff;border-radius:8px;border:1px solid var(--line-soft);}
.exp .per > div.picked{border-color:#e8b4ad;background:var(--ng-bg);}
.exp .per > div b{color:var(--ng);}
.tech{margin-top:12px;font-size:.92rem;color:var(--brand-dark);background:var(--brand-light);border-radius:8px;padding:11px 14px;}
.tech::before{content:"解き方 ";font-weight:700;}
.keyline{margin-top:12px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--ok);
  border-radius:8px;padding:11px 14px;}
.keyline .kl{display:block;font-size:.78rem;font-weight:700;color:var(--ok);margin-bottom:4px;}
.keyline .en{display:block;font-size:1.03rem;line-height:1.8;}
.keyline .ja{display:block;margin-top:3px;}

/* ================================================================
   並べかえ（第4問A 問18-21）
   ================================================================ */
.cards{display:grid;gap:9px;}
.dcard{border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;
  display:flex;align-items:center;gap:12px;user-select:none;background:var(--bg);}
.dcard .h{flex-shrink:0;width:30px;height:30px;border-radius:8px;background:var(--brand-light);
  color:var(--brand-dark);font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center;}
.dcard .b{flex:1;min-width:0;}
/* 並べかえは4枚を見比べるもの。1枚が大きすぎると比較にならないので、
   幅を抑えて、上下の入れかえが1画面で見えるようにする。 */
.dcard .b svg{width:100%;max-width:240px;height:auto;display:block;}
.dcard .b .cap{font-size:.88rem;color:var(--sub);margin-top:3px;}
.dcard .ord{flex-shrink:0;display:flex;flex-direction:column;gap:4px;}
.dcard .ord button{border:1.5px solid var(--line);background:var(--bg);border-radius:6px;width:34px;height:24px;
  font-size:.7rem;cursor:pointer;color:var(--sub);}
.dcard .ord button:hover{border-color:var(--brand);color:var(--brand);}
.dcard.ok{border-color:var(--ok);background:var(--ok-bg);}
.dcard.ng{border-color:var(--ng);background:var(--ng-bg);}

/* ================================================================
   ディクテーション
   ================================================================ */
.dict{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:14px 0;}
.dict textarea{
  width:100%;min-height:88px;border:1.5px solid var(--line);border-radius:9px;padding:11px 13px;
  font-family:var(--en);font-size:1.05rem;line-height:1.8;resize:vertical;
}
.dict textarea:focus{outline:none;border-color:var(--brand);}
.dresult{margin-top:12px;font-family:var(--en);font-size:1.08rem;line-height:2;}
.dresult .w{display:inline;}
.dresult .w.ok{color:var(--ok);}
.dresult .w.ng{color:var(--ng);text-decoration:line-through;text-decoration-thickness:1.5px;}
.dresult .w.miss{background:var(--mark);border-radius:3px;padding:0 3px;font-weight:700;}
.dscore{display:flex;gap:14px;align-items:baseline;margin-top:10px;font-size:.9rem;color:var(--sub);}
.dscore b{font-size:1.5rem;font-family:var(--en);color:var(--brand-dark);}

/* ================================================================
   先読みトレーナー
   ================================================================ */
.prelook{border:1.5px solid var(--brand-mid);border-radius:var(--radius);overflow:hidden;margin:14px 0;}
.prelook .ph{background:var(--brand);color:#fff;padding:10px 16px;display:flex;align-items:center;gap:12px;}
.prelook .ph b{font-size:.95rem;}
.prelook .ph .t{margin-left:auto;font-family:var(--en);font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums;}
.prelook .ph .t.warn{color:#ffe08a;}
.prelook .pbar{height:5px;background:rgba(255,255,255,.25);}
.prelook .pbar i{display:block;height:100%;background:#fff;transition:width .25s linear;}
.prelook .pb{padding:16px 18px;}
.prelook.done .pb{filter:blur(5px);pointer-events:none;user-select:none;}

/* ================================================================
   タイマー・マークシート・結果（本番モード）
   ================================================================ */
.timerbar{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line);
  padding:10px 0;margin-bottom:16px;}
.timerbar .in{max-width:760px;margin:0 auto;padding:0 18px;display:flex;align-items:center;gap:14px;}
.clock{font-family:var(--en);font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums;}
.clock.warn{color:var(--amber);} .clock.over{color:var(--ng);}
.meter{flex:1;height:5px;background:var(--line-soft);border-radius:99px;overflow:hidden;min-width:50px;}
.meter i{display:block;height:100%;background:var(--brand);transition:width .4s;}
.meter i.warn{background:#d99b12;} .meter i.over{background:var(--ng);}
.mini-note{font-size:.82rem;color:var(--sub);white-space:nowrap;}
@media(max-width:720px){.mini-note{display:none;}}

.sheet37{border:1px solid var(--line);border-radius:var(--radius);padding:14px;}
.msrow{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid var(--line-soft);}
.msrow:last-child{border-bottom:none;}
.msrow .no{width:28px;font-size:.85rem;color:var(--sub);text-align:right;font-variant-numeric:tabular-nums;}
.msrow .dai{width:52px;font-size:.72rem;color:var(--sub);}
.bub{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);font-size:.8rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--bg);color:var(--sub);}
.bub.on{background:var(--text);color:#fff;border-color:var(--text);}

.gauge{display:flex;align-items:center;gap:11px;margin:9px 0;}
.gauge .lb{width:74px;font-size:.86rem;flex-shrink:0;}
.gauge .tr{flex:1;height:10px;background:var(--line-soft);border-radius:99px;overflow:hidden;}
.gauge .tr i{display:block;height:100%;background:var(--brand);border-radius:99px;}
.gauge .tr i.low{background:var(--ng);} .gauge .tr i.mid{background:#d99b12;}
.gauge .vv{width:82px;text-align:right;font-size:.85rem;color:var(--sub);flex-shrink:0;font-variant-numeric:tabular-nums;}
.bigscore{text-align:center;padding:12px 0 18px;}
.bigscore .n{font-family:var(--en);font-size:3.2rem;font-weight:700;line-height:1;}
.bigscore .n small{font-size:1.05rem;color:var(--sub);font-weight:400;}
.bigscore .j{font-size:1.05rem;font-weight:700;margin-top:10px;}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;text-align:center;}
.kv div{background:var(--panel);border-radius:10px;padding:12px 6px;}
.kv b{display:block;font-size:1.3rem;font-family:var(--en);}
.kv span{font-size:.8rem;color:var(--sub);}

/* ===== 一覧 ===== */
.list{display:grid;gap:9px;}
.item{display:flex;align-items:center;gap:13px;border:1px solid var(--line);
  border-radius:10px;padding:13px 16px;cursor:pointer;text-align:left;width:100%;background:var(--bg);}
.item:hover{border-color:var(--brand);}
.item .e{font-size:1.2rem;flex-shrink:0;}
.item .tt{flex:1;min-width:0;}
.item .tt b{display:block;font-size:1rem;line-height:1.5;}
.item .tt span{display:block;font-size:.85rem;color:var(--sub);margin-top:2px;}
.item .rt{flex-shrink:0;text-align:right;font-size:.82rem;color:var(--sub);line-height:1.5;}
.item.done{background:var(--panel);}
.item.done .tt b::after{content:" ✓";color:var(--ok);}

/* ================================================================
   AIはらだくん
   ================================================================ */
.chat{display:grid;gap:12px;margin:14px 0;}
.msg{display:flex;gap:10px;align-items:flex-start;}
.msg.me{flex-direction:row-reverse;}
.msg .av{flex-shrink:0;width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--brand-light);
  display:flex;align-items:center;justify-content:center;}
.msg .av svg{width:100%;height:100%;}
.msg .bb{
  max-width:78%;background:var(--panel);border-radius:12px;padding:12px 15px;font-size:.96rem;line-height:1.9;
}
.msg.me .bb{background:var(--brand);color:#fff;}
.msg .bb .en{font-family:var(--en);}
.msg .bb p+p{margin-top:8px;}
.msg .bb b{font-weight:700;}
.msg.think .bb{color:var(--sub);}
.dots{display:inline-flex;gap:4px;}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--sub);animation:dd 1.2s infinite;}
.dots i:nth-child(2){animation-delay:.2s;} .dots i:nth-child(3){animation-delay:.4s;}
@keyframes dd{0%,60%,100%{opacity:.25;}30%{opacity:1;}}
.askbox{display:flex;gap:8px;align-items:flex-end;margin-top:14px;}
.askbox textarea{
  flex:1;min-height:46px;max-height:150px;border:1.5px solid var(--line);border-radius:10px;
  padding:11px 13px;font-size:.96rem;line-height:1.6;resize:none;
}
.askbox textarea:focus{outline:none;border-color:var(--brand);}
.quota{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--sub);margin-top:10px;flex-wrap:wrap;}
.quota .pips{display:inline-flex;gap:4px;}
.quota .pips i{width:10px;height:10px;border-radius:50%;background:var(--brand);display:inline-block;}
.quota .pips i.used{background:var(--line);}
.quota.out{color:var(--ng);}

/* ===== オーバーレイ・トースト ===== */
#overlay{position:fixed;inset:0;background:rgba(26,29,31,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
.ov-card{background:var(--bg);border-radius:14px;padding:30px 34px;text-align:center;max-width:400px;width:100%;}
.ov-spin{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;
  margin:0 auto 14px;animation:spin .9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.ov-card b{display:block;font-size:1rem;}
.ov-card span{display:block;font-size:.85rem;color:var(--sub);margin-top:6px;}
#toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:var(--text);color:#fff;
  padding:13px 22px;border-radius:10px;font-size:.92rem;z-index:200;max-width:90vw;text-align:center;}
.modal{position:fixed;inset:0;background:rgba(26,29,31,.55);display:flex;align-items:flex-end;justify-content:center;z-index:110;}
@media(min-width:640px){.modal{align-items:center;}}
.modal .box{background:var(--bg);border-radius:14px 14px 0 0;padding:22px;max-width:560px;width:100%;max-height:88vh;overflow:auto;}
@media(min-width:640px){.modal .box{border-radius:14px;}}

/* ===== 下部ナビ ===== */
nav.bottom{position:fixed;left:0;right:0;bottom:0;background:var(--bg);
  border-top:1px solid var(--line);display:flex;z-index:60;}
nav.bottom button{flex:1;border:none;background:none;padding:9px 2px 10px;cursor:pointer;color:var(--sub);
  font-size:.7rem;font-weight:500;display:flex;flex-direction:column;align-items:center;gap:3px;}
nav.bottom button i{font-style:normal;font-size:1.2rem;line-height:1;}
nav.bottom button.on{color:var(--brand);font-weight:700;}

/* ===== フッタ ===== */
.foot{text-align:center;padding:34px 0 14px;border-top:1px solid var(--line);margin-top:40px;}
.foot .c{font-size:.92rem;color:var(--sub);}
.foot .brand-box{
  display:block;max-width:430px;margin:14px auto 0;text-decoration:none;color:inherit;
  border:1.5px solid var(--brand);border-radius:12px;padding:18px 20px;background:var(--brand-light);
}
.foot .brand-box:hover{background:#e2e8f7;}
.foot .brand-box .bl{display:block;font-size:.8rem;font-weight:700;color:var(--brand-dark);letter-spacing:.08em;}
.foot .brand-box .bn{display:block;font-size:1.5rem;font-weight:700;color:var(--brand-dark);line-height:1.3;margin:2px 0 8px;}
.foot .brand-box .bs{display:block;font-size:.86rem;color:var(--text);line-height:1.75;}
.foot .brand-box .bg{display:inline-block;margin-top:11px;font-size:.88rem;font-weight:700;color:#fff;
  background:var(--brand);border-radius:8px;padding:8px 18px;}
.foot .s{font-size:.8rem;color:var(--sub);margin-top:8px;}

/* ===== 上に戻る ===== */
.totop{
  position:fixed; right:16px; z-index:59;
  bottom:calc(58px + 12px + env(safe-area-inset-bottom, 0px));
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--brand-mid); background:#fff; color:var(--brand);
  box-shadow:0 2px 10px rgba(0,0,0,.14);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s, transform .18s, visibility .18s;
}
.totop.on{ opacity:1; visibility:visible; transform:translateY(0); }
.totop:hover{ background:var(--brand-light); }
@media (prefers-reduced-motion:reduce){ .totop{ transition:none; } }

/* ===== 印刷 ===== */
@media print{
  nav.bottom,.timerbar,.btn,.player,.totop,#toast,header.top .hdr-right{display:none !important;}
  body{font-size:10.5pt;}
  .card,.doc,.q,.script{border:1px solid #999;}
  .script.blurja .ja{filter:none;}
}

/* ================================================================
   講義の出典カード
   どこまでが研究の裏づけで、どこからが解釈なのかを分けて見せる。
   ================================================================ */
.srcbox{
  border:1px solid var(--line);border-left:4px solid var(--brand-mid);
  border-radius:8px;padding:12px 15px;margin:16px 0;background:var(--panel);
}
.srcbox .sl{display:block;font-size:.76rem;font-weight:700;color:var(--sub);
  letter-spacing:.04em;margin-bottom:6px;}
.srcbox ul{list-style:none;display:grid;gap:6px;}
.srcbox li{font-size:.85rem;line-height:1.75;color:var(--sub);position:relative;padding-left:14px;}
.srcbox li::before{content:"▸";position:absolute;left:0;color:var(--brand-mid);}
.srcbox a{color:var(--brand);text-decoration:underline;text-underline-offset:.16em;}
.srcbox .sn{display:block;color:var(--sub);font-size:.8rem;}

/* ================================================================
   豆知識
   ================================================================ */
.mames{display:grid;gap:11px;}
.mame{border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px;background:var(--bg);}
.mame .mh{display:flex;align-items:baseline;gap:9px;margin-bottom:7px;flex-wrap:wrap;}
.mame .me{font-size:1.15rem;line-height:1;}
.mame .mh b{font-size:1.04rem;font-weight:700;line-height:1.5;}
.mame .mc{margin-left:auto;font-size:.74rem;font-weight:700;color:var(--brand-dark);
  background:var(--brand-light);border-radius:5px;padding:1px 8px;white-space:nowrap;}
.mame .mb{font-size:.95rem;line-height:1.9;}
.mame .mr{display:inline-block;margin-top:9px;font-size:.84rem;font-weight:700;
  color:var(--brand);text-decoration:none;background:var(--brand-light);
  border-radius:7px;padding:6px 11px;}
.mame .mr:hover{background:#e2e8f7;}
@media(max-width:520px){
  .mame{padding:13px 14px;}
  .mame .mc{margin-left:0;}
}

/* ================================================================
   リーディング編（R編）への導線
   ================================================================ */
.rbanner{
  display:flex;align-items:flex-start;gap:14px;text-decoration:none;color:inherit;
  border:1.5px solid var(--brand-mid);border-radius:var(--radius);
  padding:16px 18px;margin:14px 0;background:var(--brand-light);
}
.rbanner:hover{background:#e2e8f7;border-color:var(--brand);}
.rbanner .rb-stamp{
  flex-shrink:0;width:44px;height:44px;border-radius:10px;background:#1a6b4c;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:700;
}
.rbanner .rb-body{flex:1;min-width:0;}
.rbanner .rb-body b{display:block;font-size:1.08rem;color:var(--text);}
.rbanner .rb-s{display:block;font-size:.87rem;color:var(--sub);line-height:1.8;margin-top:4px;}
.rbanner .rb-go{display:inline-block;margin-top:10px;font-size:.86rem;font-weight:700;
  color:#fff;background:var(--brand);border-radius:8px;padding:7px 16px;}

/* ================================================================
   本文中の英語（rich() が \`...\` から作る <i class="enq">）
   設問カードの .q と名前が衝突していたので enq に分けてある。
   枠で囲むと行が持ち上がって読みにくいので、
   下線と字体だけで「ここは英語」と示す。
   ================================================================ */
i.enq{
  font-family:var(--en);
  font-style:normal;
  font-size:1.02em;
  padding:0 1px;
  border-bottom:1px solid var(--brand-mid);
  white-space:normal;          /* 長い引用でも折り返す */
  overflow-wrap:break-word;
}
/* 濃い背景の上（honne / hero など）では下線を薄くする */
.honne i.enq{border-bottom-color:var(--brand);}
.exp i.enq{border-bottom-color:var(--sub);}

/* ================================================================
   解き方の設定バー（採点のしかた／タイムトライアル／音）
   ================================================================ */
.modebar .mb-l{font-size:.86rem;font-weight:700;color:var(--sub);}
.modebar .chips button{padding:6px 13px;font-size:.86rem;}
.mini-t{
  border:1.5px solid var(--line);background:var(--bg);border-radius:8px;
  padding:6px 12px;font-size:.84rem;font-weight:700;color:var(--sub);cursor:pointer;white-space:nowrap;
}
.mini-t:hover{background:var(--panel);}
.mini-t.on{background:var(--brand);color:#fff;border-color:var(--brand);}
@media(max-width:560px){
  .modebar .row{gap:7px;}
  .modebar .spacer{flex-basis:100%;height:0;}
  .mini-t{padding:5px 10px;font-size:.78rem;}
}

/* ================================================================
   タイムトライアルの残り時間
   本番の解答ポーズと同じ長さで走る。
   ================================================================ */
.tt{
  display:flex;align-items:center;gap:10px;margin:10px 0 14px;
  border:1.5px solid var(--brand-mid);background:var(--brand-light);
  border-radius:10px;padding:9px 14px;
}
.tt[hidden]{display:none !important;}
.tt .ttl{font-size:.8rem;font-weight:700;color:var(--brand-dark);flex-shrink:0;}
.tt b{font-size:1.15rem;font-variant-numeric:tabular-nums;color:var(--brand-dark);
  min-width:74px;flex-shrink:0;}
.tt .ttbar{flex:1;height:8px;background:rgba(46,71,143,.18);border-radius:99px;overflow:hidden;}
.tt .ttbar i{display:block;height:100%;background:var(--brand);border-radius:99px;
  transition:width 1s linear;}
.tt.warn{border-color:var(--amber);background:var(--amber-bg);}
.tt.warn b,.tt.warn .ttl{color:var(--amber);}
.tt.warn .ttbar i{background:var(--amber);}
.tt.done{border-color:var(--ok);background:var(--ok-bg);}
.tt.done b,.tt.done .ttl{color:var(--ok);}
.tt.done .ttbar i{background:var(--ok);}
.tt.over{border-color:var(--ng);background:var(--ng-bg);}
.tt.over b,.tt.over .ttl{color:var(--ng);}
.tt.over .ttbar i{background:var(--ng);width:0 !important;}

/* 登場人物の立場。答えそのものなので、解いたあとにだけ出す */
.stance{background:var(--ok-bg);border-left:3px solid var(--ok);padding:8px 10px;border-radius:0 6px 6px 0;color:var(--text);}

/* ---------------- 超絶フレーズ集 ---------------- */
.phs{display:flex;flex-direction:column;gap:8px;}
.ph{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;}
.ph.open{border-color:var(--brand-mid);box-shadow:0 2px 10px rgba(46,71,143,.08);}
.phh{width:100%;display:flex;align-items:center;gap:10px;padding:13px 15px;background:none;border:0;
  cursor:pointer;text-align:left;font:inherit;}
.phh:hover{background:var(--brand-light);}
.ph .pe{font-family:var(--en);font-size:1.05rem;font-weight:600;color:var(--text);flex:1;}
.ph .pd{flex-shrink:0;font-size:.74rem;font-weight:700;color:var(--brand);
  background:var(--brand-light);border-radius:99px;padding:3px 9px;}
.ph.open .phh{border-bottom:1px solid var(--line);}
.pbody{padding:12px 15px 15px;}
.pja{font-size:1.02rem;font-weight:700;color:var(--brand-dark);margin:0 0 7px;}
.pn{font-size:.93rem;line-height:1.75;color:var(--text);margin:0 0 11px;}
.pex{font-family:var(--en);font-size:1rem;line-height:1.65;margin:9px 0 0;
  border-left:3px solid var(--brand-mid);padding-left:11px;}
.pexja{display:block;font-family:var(--ja);font-size:.86rem;color:var(--sub);margin-top:3px;}

/* ================================================================
   印刷ページ（#/print/…）
   画面ではプレビュー、@media print で A4 の紙面になる。
   ================================================================ */
.printpage{max-width:820px;margin:0 auto;}
.printbar .btn{padding:10px 22px;}
.phead{border-bottom:2.5px solid var(--brand);padding:6px 2px 12px;margin:14px 0 16px;}
.phead .pb{font-size:.78rem;letter-spacing:.06em;color:var(--sub);}
.phead h1{font-size:1.32rem;margin:4px 0 8px;color:var(--brand-dark);}
.phead .psub{font-size:.92rem;color:var(--text);margin:0;}
.psec{display:flex;align-items:baseline;gap:12px;margin:26px 0 12px;}
.psec span{display:inline-block;background:var(--brand);color:#fff;font-weight:800;
  font-size:1.02rem;letter-spacing:.14em;padding:5px 20px;border-radius:6px;}
.psec i{font-style:normal;font-size:.8rem;color:var(--sub);}
.pitem{margin:0 0 18px;}
.pino{font-weight:800;font-size:.9rem;color:var(--brand-dark);
  border-left:4px solid var(--brand);padding-left:8px;margin:14px 0 8px;}
.anstbl{width:100%;border-collapse:collapse;table-layout:fixed;}
.anstbl th,.anstbl td{border:1.4px solid var(--line);text-align:center;padding:7px 2px;}
.anstbl th{background:var(--panel);font-size:.85rem;}
.anstbl td{font-size:1.05rem;font-weight:700;color:var(--brand-dark);}
.pbreak{height:0;}

@page{size:A4;margin:13mm 12mm;}
@media print{
  body{background:#fff;}
  /* アプリの飾りを全部落とす */
  header.top, footer.foot, nav.bottom, #toast, .noprint{display:none !important;}
  .wrap{max-width:none;padding:0;margin:0;}
  .printpage{max-width:none;}
  html{font-size:13.2px;}
  /* カードの影・角丸は紙では細い線に */
  .card,.doc,.wsheet{box-shadow:none !important;border:1px solid #c9cfd8;}
  .q{border:none;padding-left:0;padding-right:0;}
  /* 改ページは「小さな単位」だけ守る。大きな塊ごと avoid にすると、
     入りきらない塊が丸ごと次ページへ飛び、紙が大きく空白になる。 */
  .q-head{break-inside:avoid;break-after:avoid;}
  .choices li,.dcard,.exp .keyline,.exp .tech,.script .line,.anstbl,
  .chartbox,.fillpool .row{break-inside:avoid;}
  .psec{break-after:avoid;}
  .pino{break-after:avoid;}
  .pbreak{break-before:page;}
  .psec span{background:#2e478f !important;color:#fff !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;}
  /* 選択肢：ボタンの見た目を消して、正解には印をつける */
  .choice{border:1px solid #d4d9e2;background:#fff;box-shadow:none;}
  .choices.locked .choice.right{border:2.2px solid #1c7c3c;background:#fff;}
  .choices.locked .choice.right .c::after{content:"　◀ 正解";color:#1c7c3c;font-weight:800;font-size:.85em;}
  .choices.locked .choice.wrong{border:1px solid #d4d9e2;}
  /* 解く道具（並べかえの▲▼・確定ボタンなど）は紙に出さない */
  .ord,.fixrow,.pl-note,.player{display:none !important;}
  /* スクリプトは白地に */
  .script{border:1px solid #c9cfd8;background:#fff;}
  .script .tag-s{display:none;}
  .script .line{cursor:auto;}
  a{color:inherit;text-decoration:none;}
}
@media print{
  /* 並べかえの操作説明は紙では出さない */
  .q [data-order] + .hint{display:none;}
  /* 図カードは紙では2列に。1列だと1枚が巨大になり、紙を食いつぶす */
  .cards{grid-template-columns:1fr 1fr;gap:4mm;}
  .dcard .b svg{max-width:150px;}
}

/* ディクテーション・音の変化道場の判定バナー */
.verdict{margin-top:12px;padding:10px 14px;border-radius:10px;font-weight:700;font-size:1.02rem;}
.verdict.ok{background:var(--ok-bg);color:var(--ok);border:1.5px solid var(--ok);}
.verdict.near{background:#fff7e0;color:#8a6100;border:1.5px solid #d9b23a;}
.verdict.ng{background:var(--ng-bg);color:var(--ng);border:1.5px solid var(--ng);}
.verdict.ng b,.verdict.near b{color:inherit;}
.dmine{display:flex;gap:10px;align-items:baseline;margin-top:8px;font-family:var(--en);
  font-size:1.02rem;line-height:1.9;}
.dmine .lb{flex-shrink:0;font-family:var(--ja);font-size:.76rem;font-weight:700;color:var(--sub);
  border:1px solid var(--line);border-radius:6px;padding:2px 7px;}
.dmine .w.ok{color:var(--ok);}
.dmine .w.ng{color:var(--ng);text-decoration:line-through;text-decoration-thickness:1.5px;}