:root { --bg:#f2f6fb; --ink:#233; --accent:#e8564b; --card:#fff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:16px; line-height:2.1; }
rt { font-size:0.5em; letter-spacing:0; }
.wrap { max-width:780px; margin:0 auto; padding:16px 16px 80px; }
header.top { background:#20315b; color:#fff; padding:14px 0; }
header.top .wrap { padding:0 16px; display:flex; align-items:center; gap:12px; }
header.top a { color:#cfe0ff; text-decoration:none; font-size:14px; }
.stepBadge { background:var(--accent); color:#fff; font-weight:800; border-radius:10px;
  padding:4px 12px; font-size:15px; white-space:nowrap; }
h1 { font-size:26px; margin:18px 0 4px; line-height:1.8; }
.learnchips { margin:6px 0 18px; }
.chip { display:inline-block; background:#20315b; color:#fff; border-radius:999px;
  padding:2px 14px; font-size:13px; margin:2px 4px 2px 0; }
.card { background:var(--card); border-radius:14px; padding:18px 22px; margin:16px 0;
  box-shadow:0 1px 4px rgba(30,50,90,.08); }
.card h2 { font-size:19px; margin:0 0 10px; border-left:6px solid var(--accent);
  padding-left:10px; }
.goal { border-left:6px solid #2ea86f; }
.goal h2 { border-color:#2ea86f; }
ol.bigsteps { padding-left:0; counter-reset:s; list-style:none; margin:0; }
ol.bigsteps>li { counter-increment:s; margin:14px 0; padding:14px 0 4px; border-top:1px dashed #d5e0ee; }
ol.bigsteps>li:first-child { border-top:none; padding-top:0; }
ol.bigsteps>li::before { content:counter(s); background:#20315b; color:#fff; font-weight:800;
  display:inline-flex; width:28px; height:28px; border-radius:50%; align-items:center;
  justify-content:center; margin-right:10px; }
.checklist { list-style:none; padding-left:4px; }
.checklist li { margin:6px 0; }
.checklist input { transform:scale(1.4); margin-right:10px; }
.point { background:#fff8e1; border:2px solid #ffd54f; border-radius:12px;
  padding:12px 16px; margin:14px 0; }
.qa { margin:10px 0; border:1px solid #e3eaf4; border-radius:10px; overflow:hidden; }
.qa .q { background:#f6f9fd; padding:8px 14px; font-weight:700; }
.qa .a { padding:8px 14px; }
.dl { display:inline-block; background:#2ea86f; color:#fff; font-weight:700;
  padding:10px 18px; border-radius:999px; text-decoration:none; margin:6px 8px 6px 0; }
.nav2 { display:flex; justify-content:space-between; margin:26px 0 0; gap:10px; }
.nav2 a { background:#20315b; color:#fff; text-decoration:none; padding:12px 20px;
  border-radius:12px; font-weight:700; }
.nav2 .ghost { background:#c6d2e6; color:#22345f; }
table.toc { width:100%; border-collapse:collapse; }
table.toc td, table.toc th { border-bottom:1px solid #e2e9f3; padding:9px 8px; text-align:left; }
table.toc a { color:#1d4fa1; font-weight:700; text-decoration:none; }
.mini { color:#68789a; font-size:13px; line-height:1.9; }
/* scratchblocks描画エリア */
.scriptBox { margin:10px 0 4px; }
.scriptLabel { font-size:13px; font-weight:700; color:#5a6c92; margin-bottom:4px; }
pre.blocks { background:#f7fafd; border:1px solid #dbe5f1; border-radius:10px;
  padding:14px 16px; display:inline-block; max-width:100%; overflow-x:auto; margin:0; }
@media (max-width:520px){ body{font-size:15px;} .card{padding:14px;} }