/* IT リテラシー 共通スタイル
   kodama-lab.com / kodamay.org と同じ色づかい（青 #003f8c ／ 橙 #f08300）
   ダーク対応・保護領域内で完結（外部読み込みなし） */
:root{
  --blue:#003f8c; --blue-l:#1b5cb0; --orange:#f08300; --ink:#1a2230;
  --sub:#5a6577; --line:#d7dee8; --bg:#f7f9fc; --card:#fff;
  --ok:#1a7f4b; --ng:#c0392b; --fix:#8a4ba8;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#e6ebf3; --sub:#a3b0c4; --line:#33405a; --bg:#111725; --card:#182032;
    --blue:#5b9bea; --blue-l:#7db4f5; --ok:#4ec98a; --ng:#ef8b7f; --fix:#c9a0e0;
  }
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--bg);
  font-family:"Hiragino Sans","Noto Sans JP",system-ui,-apple-system,sans-serif;
  line-height:1.85;font-size:16px}
a{color:var(--blue-l)}
.wrap{max-width:920px;margin:0 auto;padding:0 20px 90px}
header.top{background:linear-gradient(135deg,#003f8c 0%,#00295c 100%);color:#fff;
  padding:28px 20px 24px;margin-bottom:28px}
header.top .wrap{padding-bottom:0}
header.top .course{font-size:.8rem;letter-spacing:.18em;opacity:.85}
header.top h1{margin:.2em 0 .12em;font-size:1.75rem;letter-spacing:.04em}
header.top .sub{font-size:.92rem;opacity:.92}
h2{font-size:1.25rem;margin:2.3em 0 .7em;padding-left:12px;border-left:6px solid var(--orange)}
h3{font-size:1.05rem;margin:1.7em 0 .5em;color:var(--blue)}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:18px 20px;margin:18px 0;box-shadow:0 1px 3px rgba(20,40,80,.06)}
.goal{background:color-mix(in srgb,var(--blue) 8%,var(--card));border-color:color-mix(in srgb,var(--blue) 30%,var(--line))}
.goal ul{margin:.4em 0 0;padding-left:1.3em}
.note{background:color-mix(in srgb,var(--orange) 8%,var(--card));border-color:color-mix(in srgb,var(--orange) 32%,var(--line))}
.warn{background:color-mix(in srgb,var(--ng) 8%,var(--card));border-color:color-mix(in srgb,var(--ng) 30%,var(--line))}
.fixbox{background:color-mix(in srgb,var(--fix) 9%,var(--card));border-color:color-mix(in srgb,var(--fix) 34%,var(--line))}
.fixbox::before{content:"元スライドからの修正";display:inline-block;font-size:.7rem;font-weight:700;
  color:#fff;background:var(--fix);padding:1px 9px;border-radius:10px;margin-bottom:8px}
.addbox{background:color-mix(in srgb,var(--ok) 8%,var(--card));border-color:color-mix(in srgb,var(--ok) 30%,var(--line))}
.addbox::before{content:"追加した内容";display:inline-block;font-size:.7rem;font-weight:700;
  color:#fff;background:var(--ok);padding:1px 9px;border-radius:10px;margin-bottom:8px}
table.t{border-collapse:collapse;margin:14px 0;background:var(--card);font-size:.94rem;width:100%}
table.t th,table.t td{border:1px solid var(--line);padding:7px 11px;text-align:center}
table.t th{background:color-mix(in srgb,var(--blue) 12%,var(--card))}
table.t td.l{text-align:left}
table.t caption{caption-side:top;text-align:left;font-weight:700;padding-bottom:6px;color:var(--blue)}
.scroll{overflow-x:auto}
.model{background:var(--card);border:2px solid var(--blue);border-radius:10px;padding:16px 18px;margin:24px 0}
.model .mhead{font-weight:700;color:var(--blue);margin:-4px 0 10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.model .mhead::before{content:"▶";color:var(--orange)}
.model .tag{font-size:.72rem;background:var(--orange);color:#fff;padding:1px 8px;border-radius:10px}
.ctrl{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin:10px 0}
.ctrl label{font-size:.9rem;display:flex;align-items:center;gap:8px}
.ctrl input[type=range]{width:200px;accent-color:var(--blue)}
.ctrl button{background:var(--blue);color:#fff;border:0;border-radius:5px;padding:6px 15px;cursor:pointer;font-size:.9rem;font-family:inherit}
.ctrl button:hover{filter:brightness(1.12)}
.ctrl button.sec{background:#7b879a}
/* 固定幅で描く canvas は、狭い画面ではみ出さないよう縮める */
canvas{max-width:100%;height:auto}
.readout{font-size:.92rem;margin-top:10px;padding:9px 12px;
  background:color-mix(in srgb,var(--blue) 8%,var(--card));border-radius:6px}
.readout b{color:var(--blue)}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.deriv{font-family:ui-monospace,Menlo,monospace;font-size:.95rem;line-height:2.0;margin:10px 0}
.deriv .step{display:flex;gap:14px;flex-wrap:wrap;padding:3px 8px;border-radius:5px}
.deriv .step.cur{background:color-mix(in srgb,var(--orange) 20%,transparent);font-weight:700}
.deriv .why{color:var(--sub);font-size:.85rem}
.rule{display:inline-block;text-align:center;margin:6px 14px;font-family:ui-monospace,Menlo,monospace}
.rule .num{border-bottom:2px solid currentColor;padding:0 10px 3px;display:block}
.rule .den{padding-top:3px;display:block}
.bad{color:var(--ng);text-decoration:line-through}
.good{color:var(--ok);font-weight:700}
.diag{border-collapse:collapse;font-family:ui-monospace,Menlo,monospace;font-size:.95rem}
.diag td{border:1px solid var(--line);padding:3px 7px;text-align:center;min-width:1.9em}
.diag td.dg{background:color-mix(in srgb,var(--orange) 34%,transparent);font-weight:700}
.diag td.lbl{border:0;padding-right:10px;color:var(--sub);text-align:right}
.diag tr.new td{background:color-mix(in srgb,var(--ok) 22%,transparent);font-weight:700}
.layers{display:grid;gap:10px;margin:14px 0}
.layer{border:1px solid var(--line);border-radius:8px;padding:10px 14px;background:var(--card)}
.layer h4{margin:.1em 0 .3em;font-size:.98rem}
.layer.L1{border-left:6px solid var(--ng)}
.layer.L2{border-left:6px solid var(--orange)}
.layer.L3{border-left:6px solid var(--ok)}
.layer.L4{border-left:6px solid #7b879a}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
.chip{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:4px 12px;
  cursor:pointer;font-size:.86rem;font-family:inherit;color:var(--ink)}
.chip:hover{border-color:var(--blue)}
.chip.done{opacity:.45}
.quiz{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin:18px 0}
.quiz .q{font-weight:700;margin:.2em 0 .5em}
.quiz .opt{display:block;margin:.25em 0;cursor:pointer}
.quiz .fb{margin-top:.5em;font-size:.9rem;padding:8px 11px;border-radius:6px;display:none}
.quiz .fb.show{display:block}
.quiz .fb.ok{background:color-mix(in srgb,var(--ok) 14%,var(--card));border:1px solid var(--ok)}
.quiz .fb.ng{background:color-mix(in srgb,var(--ng) 12%,var(--card));border:1px solid var(--ng)}
.quiz button{background:var(--blue);color:#fff;border:0;border-radius:5px;padding:5px 13px;cursor:pointer;font-family:inherit}
footer{border-top:1px solid var(--line);margin-top:40px;padding-top:16px;color:var(--sub);font-size:.86rem}
.kv{font-size:.88rem;color:var(--sub)}
ul.tight li{margin:.25em 0}

/* ===================== VBA 実行部品（vba.js が使う） ===================== */
.vbabox{background:var(--card);border:2px solid var(--blue);border-radius:10px;padding:16px 18px;margin:22px 0}
.vgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:820px){.vgrid{grid-template-columns:minmax(0,1fr)}}
.vlab{font-size:.76rem;color:var(--sub);letter-spacing:.06em;margin-bottom:4px}
textarea.vsrc{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem;
  line-height:1.55;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  background:color-mix(in srgb,var(--blue) 5%,var(--card));color:var(--ink);resize:vertical;tab-size:4}
textarea.vsrc:focus{outline:2px solid var(--blue);outline-offset:1px}
.vsheetbox{overflow:auto;max-height:420px;border:1px solid var(--line);border-radius:8px}
table.vsheet{border-collapse:collapse;font-family:ui-monospace,Menlo,monospace;font-size:.8rem;
  background:var(--card);width:max-content;min-width:100%}
table.vsheet th{background:color-mix(in srgb,var(--blue) 12%,var(--card));color:var(--sub);
  border:1px solid var(--line);padding:2px 7px;font-weight:400;font-size:.72rem;
  position:sticky;top:0;z-index:1}
table.vsheet tr th:first-child{position:sticky;left:0;z-index:2}
table.vsheet td{border:1px solid var(--line);padding:2px 7px;min-width:3.6em;max-width:14em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:1.7em}
table.vsheet td.n{text-align:right}
table.vsheet td.chg{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--orange) 55%,transparent)}
.vout{margin-top:10px;font-size:.86rem}
.vok{background:color-mix(in srgb,var(--ok) 12%,var(--card));border:1px solid var(--ok);
  border-radius:6px;padding:7px 11px}
.verr{background:color-mix(in srgb,var(--ng) 12%,var(--card));border:1px solid var(--ng);
  border-radius:6px;padding:7px 11px}
.vwarn{background:color-mix(in srgb,var(--orange) 12%,var(--card));border:1px solid var(--orange);
  border-radius:6px;padding:7px 11px;margin-top:6px;font-size:.82rem}
.vlog{font-family:ui-monospace,Menlo,monospace;font-size:.8rem;margin-top:6px;padding:7px 11px;
  background:color-mix(in srgb,var(--blue) 7%,var(--card));border-radius:6px;
  max-height:160px;overflow-y:auto}
code.vb{font-family:ui-monospace,Menlo,monospace;background:color-mix(in srgb,var(--blue) 9%,var(--card));
  padding:1px 5px;border-radius:4px;font-size:.9em}
pre.vb{font-family:ui-monospace,Menlo,monospace;font-size:.86rem;line-height:1.6;overflow-x:auto;
  background:color-mix(in srgb,var(--blue) 6%,var(--card));border:1px solid var(--line);
  border-radius:8px;padding:11px 13px;margin:12px 0;tab-size:4}
pre.vb .cm{color:var(--ok)}
pre.vb .kw{color:var(--blue);font-weight:700}
.chaps{display:grid;gap:8px;margin:14px 0}
a.ch,div.ch{display:flex;gap:14px;align-items:baseline;border:1px solid var(--line);border-radius:8px;
  padding:9px 14px;background:var(--card);text-decoration:none;color:inherit}
a.ch:hover{border-color:var(--blue)}
.ch .n{font-family:ui-monospace,Menlo,monospace;color:var(--blue);font-weight:700;min-width:4.2em}
.ch .t{flex:1}
.ch .s{font-size:.78rem;color:var(--sub);display:block}
.ch.soon{opacity:.6}
.ch.open{border-left:5px solid var(--ok)}
.vgfxbox{border:1px solid var(--line);border-radius:8px;background:var(--card);padding:6px;overflow:auto}
svg.vgfx{width:100%;height:auto;display:block;color:var(--ink);background:var(--card)}
.vgfxn{font-size:.74rem;color:var(--sub);margin-top:4px;text-align:right}