/* TOE Lesson Guide（2026-09-30）— 3ページ共通。見た目は clil-plan/how-to に合わせる（英語の下に日本語） */
:root{
  --navy:#1f2a44; --ink:#22283a; --cream:#f7f4ee; --paper:#fff; --line:#e6e0d4;
  --sub:#5b6072; --muted:#8a8f9e;
  --red:#e94f37; --orange:#f0663a; --yellow:#ffce3a; --mint:#8fd6c4; --blue:#1a6fb5; --green:#0fa885;
  --violet:#7c3aed; --teal:#0f766e; --amber:#e0800a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--cream);color:var(--ink);line-height:1.65;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Segoe UI",sans-serif;
  -webkit-text-size-adjust:100%;overflow-wrap:break-word}
.bar{height:8px;background:linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--mint),var(--blue))}
.tback{position:fixed;top:10px;right:10px;z-index:100;background:var(--navy);color:#fff;text-decoration:none;
  font-weight:800;font-size:13px;padding:8px 14px;border-radius:999px;box-shadow:0 3px 12px rgba(0,0,0,.3)}
header{background:linear-gradient(155deg,var(--navy),#2c3a5e);color:#fff;padding:20px 16px 20px}
header .lv{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);padding:4px 11px;border-radius:999px;margin-bottom:8px}
header h1{font-size:22px;font-weight:900;line-height:1.35}
header .ja{font-size:15px;font-weight:700;opacity:.9;margin-top:2px}
header .lead{font-size:13px;opacity:.85;margin-top:8px;font-weight:600;line-height:1.7}

/* 3階層のタブ（どのページにも同じもの） */
.tabs{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:1px solid var(--line);
  display:flex;gap:6px;padding:8px 12px;overflow-x:auto}
.tabs a{flex:1 0 auto;text-align:center;text-decoration:none;color:var(--sub);background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:7px 10px;font-size:13px;font-weight:800;line-height:1.3;white-space:nowrap}
.tabs a small{display:block;font-size:11px;font-weight:700;color:var(--muted)}
.tabs a.on{background:var(--navy);border-color:var(--navy);color:#fff}
.tabs a.on small{color:#cdd5e8}

main{max-width:820px;margin:0 auto;padding:14px 12px 60px}
h2{font-size:18px;font-weight:900;color:var(--navy);margin:24px 0 9px;padding-bottom:6px;border-bottom:3px solid var(--mint);scroll-margin-top:70px}
h2 .e{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-top:1px}
h3{font-size:15.5px;font-weight:900;color:var(--navy);margin:14px 0 4px}
h3 .e{font-size:12.5px;font-weight:700;color:var(--muted);margin-left:6px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:0 0 12px}
.card>h3:first-child{margin-top:0}

/* 英語の下に日本語 */
.en{font-size:15px;font-weight:700}
.jp{font-size:13px;font-weight:600;color:var(--sub);margin-top:1px}
p.en+p.jp{margin-bottom:9px}
td .jp,li .jp{font-size:12.5px}

/* 箇条書き（英＋日） */
ul.bi,ol.bi{list-style:none;display:grid;gap:7px;margin:6px 0}
ul.bi li,ol.bi li{padding:7px 10px 7px 34px;position:relative;background:#fbf9f5;border-radius:10px}
ul.bi li::before{content:"✓";position:absolute;left:11px;top:7px;font-weight:900;color:var(--green)}
ol.bi{counter-reset:n}
ol.bi li{counter-increment:n}
ol.bi li::before{content:counter(n);position:absolute;left:8px;top:8px;width:19px;height:19px;border-radius:6px;
  background:var(--navy);color:#fff;font-size:11.5px;font-weight:900;display:grid;place-items:center}
ul.q li::before{content:"?";color:var(--blue)}

/* チェック（押すと✓。保存はしない＝入力必須ではない） */
.chk li{cursor:pointer;user-select:none}
.chk li::before{content:"";width:15px;height:15px;border:2px solid #c9c3b5;border-radius:4px;top:10px;left:10px}
.chk li.done{background:#eefaf5}
.chk li.done::before{content:"✓";border-color:var(--green);background:var(--green);color:#fff;font-size:11px;line-height:12px;text-align:center}

/* 流れ（矢印） */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0}
.flow span{background:#eef4ff;color:#1b3f7a;font-weight:800;font-size:13px;padding:5px 11px;border-radius:999px}
.flow i{font-style:normal;color:var(--muted);font-weight:900}
.flow span.hit{background:var(--green);color:#fff}

/* 合言葉 */
.mottos{display:grid;grid-template-columns:1fr;gap:7px;margin:4px 0 6px}
@media(min-width:620px){.mottos{grid-template-columns:1fr 1fr}}
.mottos div{background:#fffaf0;border:2px solid #ffe2a8;border-radius:12px;padding:8px 12px}
.mottos b{display:block;font-size:14px;color:#8a5200}
.mottos span{font-size:12.5px;color:var(--sub);font-weight:600}

/* 注意・理由・言い方 */
.why{background:#f1fbf7;border-left:4px solid var(--green);border-radius:0 10px 10px 0;padding:10px 13px;margin:10px 0}
.warn{background:#fff4f1;border-left:4px solid var(--red);border-radius:0 10px 10px 0;padding:10px 13px;margin:10px 0}
.lab{font-size:11px;font-weight:800;letter-spacing:.05em;color:#0a8f6d;margin-bottom:2px}
.warn .lab{color:#c0392b}
.say{background:#f2f7ff;border:2px dashed #cfe0ff;border-radius:12px;padding:10px 13px;margin:10px 0}
.say .lab{color:#3b6fd4}
.soon{background:repeating-linear-gradient(135deg,#fff,#fff 10px,#f6f3ec 10px,#f6f3ec 20px);border:2px dashed #cfc7b6;
  border-radius:14px;padding:12px 14px;margin:0 0 12px;text-align:center}
.soon b{display:block;color:var(--navy);font-size:15px}
.soon span{font-size:13px;color:var(--sub);font-weight:700}

/* 50分の流れ */
.steps{display:grid;gap:7px;margin:6px 0}
.st{display:flex;gap:10px;align-items:flex-start;background:#fbf9f5;border-radius:12px;padding:9px 11px}
.st .k{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:900;font-size:13px}
.st .ip{flex:0 0 auto;margin-left:auto;font-size:11.5px;font-weight:800;border-radius:999px;padding:3px 9px;white-space:nowrap;align-self:center}
.ip.off{background:#eceae4;color:#6b6c7a}
.ip.on{background:#e3f6ef;color:#0a8f6d}
.st .t{min-width:0}

/* 表 */
table{width:100%;border-collapse:collapse;font-size:13.5px;margin:8px 0}
th{background:#eef1fb;color:var(--navy);font-weight:800;text-align:left;border:1px solid #d9e0ee;padding:7px 9px}
td{border:1px solid #e4e8f0;padding:7px 9px;vertical-align:top;background:#fff}
.tw{overflow-x:auto}

/* ボタン名（アプリの表記そのまま） */
.btn{display:inline-block;font-weight:900;font-size:12.5px;padding:1px 9px;border-radius:999px;background:#eef1fb;color:var(--navy);white-space:nowrap}
.btn.v{background:var(--violet);color:#fff}
.btn.ok{background:#12b886;color:#fff}
.btn.ng{background:#fff;color:#c0392b;box-shadow:inset 0 0 0 2px #f3b4ab}

/* リンクボタン */
.go{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:10px 13px;margin:6px 0;font-weight:800;font-size:14px}
.go .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:17px;flex:0 0 auto}
.go small{display:block;font-size:12px;color:var(--muted);font-weight:700}
.go::after{content:"›";margin-left:auto;font-size:20px;color:var(--muted)}

/* ページ内ジャンプ */
.jumps{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 4px}
.jumps a{text-decoration:none;font-size:12.5px;font-weight:800;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 11px}

details{background:var(--paper);border:1px solid var(--line);border-radius:16px;margin:0 0 12px}
details summary{cursor:pointer;padding:13px 16px;font-weight:900;color:var(--navy);font-size:15px}
details summary .e{font-size:12.5px;color:var(--muted);font-weight:700;margin-left:6px}
details>div{padding:0 16px 14px}

.next{display:grid;gap:8px;margin-top:22px}
.credit{text-align:center;font-size:11.5px;color:var(--muted);margin-top:18px;line-height:1.8}
@media print{ .tabs,.tback,.go,.next{display:none} .card,.st,details{break-inside:avoid} details>div{display:block} }