/* 計算ダンジョン 説明書 Web版（site/guide/manual.html・tebiki.html 共用）
   印刷用（manual.css・kids.css）を元に、ページ区切りを外してスマホ幅で読めるようにしたもの */
:root{--ink:#3f2f25;--soft:#6f5d50;--paper:#fffdf8;--cream:#fdf6ec;--peach:#fdeddb;--green:#e5f1d8;--green-deep:#2e7d52;--orange:#ef8f2e;--orange-deep:#c96d12;--night:#2f2a45;--gold:#d9a520;--marker:#ffd76e;--sky:#e2f0f8;--line:#dfd4c2;--red:#d33a2c}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;color:var(--ink);background:var(--cream);font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:16px;line-height:1.9}
img{max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.25em}
.skip-link{position:absolute;top:-80px;background:var(--ink);color:#fff;padding:10px;z-index:20}.skip-link:focus{top:0}
.site-header{max-width:1240px;margin:auto;padding:18px 24px;display:flex;gap:20px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);flex-wrap:wrap}
.site-header nav{display:flex;gap:18px;font-size:13px;font-weight:800;flex-wrap:wrap}.site-header nav a{text-decoration:none}
.site-footer{border-top:1px solid var(--line);text-align:center;padding:30px 20px 40px;color:var(--soft);font-size:12px}.site-footer strong{font-size:17px;color:var(--ink)}.site-footer p{margin:5px 0}.site-footer a{font-weight:800}
.web-hero{max-width:880px;margin:0 auto;padding:40px 24px 10px}
.web-hero .eyebrow{display:inline-block;background:var(--ink);color:var(--paper);border-radius:99px;padding:4px 14px;font-size:12px;font-weight:800;margin:0 0 16px}
.web-hero h1{font-size:34px;line-height:1.55;margin:0 0 16px;font-weight:900}
.marker{background:linear-gradient(transparent 62%,var(--marker) 62%,var(--marker) 92%,transparent 92%)}
.web-hero .lead{font-size:16px;margin:0 0 18px}
.web-hero .note{font-size:12px;color:var(--soft)}
.dl{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin:0 0 10px}
.primary-button{display:inline-flex;gap:14px;align-items:center;border-radius:99px;text-decoration:none;background:var(--orange);box-shadow:0 5px 0 #d97a1a;color:#412b1c;padding:14px 24px;font-weight:900;font-size:15px}
.sub-link{font-size:14px;font-weight:800;color:var(--green-deep)}
.totop{text-align:right;font-size:13px;font-weight:800;margin:10px 0 0}.totop a{color:var(--green-deep)}
/* 保護者向け：紙面を1列の読み物に */
.book{max-width:880px;margin:0 auto;padding:10px 24px 40px;font-size:15.5px}
.book section{margin:0 0 40px}
.book .toc{background:var(--paper);border:2px solid var(--line);border-radius:16px;padding:20px 20px 10px}
.book .toc a{display:flex;gap:12px;align-items:baseline;text-decoration:none;width:100%}

.book /* ---------- もくじ ---------- */
.toc{ page-break-after: always; }
.book .toc h2{ font-size: 20pt; margin: 2mm 0 1mm; }
.book .toc .intro{ color: var(--soft); margin-bottom: 6mm; }
.book .toc ol{ list-style: none; padding: 0; margin: 0; }
.book .toc li{ display: flex; align-items: center; gap: 3mm; padding: 1.3mm 0; border-bottom: 1px dotted var(--line); line-height: 1.45; }
.book .toc .no{ flex: 0 0 13mm; font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; color: #fff;
  background: var(--night); border-radius: 2mm; text-align: center; font-size: 10pt; padding: .4mm 0; }
.book .toc .ti{ flex: 1; font-weight: 700; font-size: 11pt; }
.book .toc .ti span{ display: block; font-weight: 400; font-size: 8.5pt; color: var(--soft); }
.book .toc .pg{ flex: 0 0 12mm; text-align: right; font-weight: 700; color: var(--orange-deep); }
.book .howto{ margin-top: 5mm; background: var(--cream); border-radius: 3mm; padding: 4mm 5mm; }
.book .howto h3{ margin: 0 0 1.5mm; font-size: 11pt; }
.book /* ---------- 章の扉 ---------- */
.chapter{ page-break-before: always; }
.book .ch-head{
  position: relative; background: var(--night); color: #fff; border-radius: 3mm;
  padding: 5mm 6mm 5mm 34mm; margin-bottom: 5mm; min-height: 30mm; overflow: hidden;
}
.book .ch-head::after{ content: ""; position: absolute; right: -10mm; top: -14mm; width: 52mm; height: 52mm;
  border-radius: 50%; border: 6mm solid rgba(255,215,110,.12); }
.book .ch-head .num{
  position: absolute; left: 6mm; top: 50%; transform: translateY(-50%);
  width: 22mm; height: 25mm; background: var(--gold);
  clip-path: polygon(50% 0, 100% 14%, 100% 62%, 50% 100%, 0 62%, 0 14%);
  display: flex; align-items: center; justify-content: center;
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 22pt; color: var(--night);
}
.book .ch-head .kicker{ font-size: 8.5pt; color: var(--marker); letter-spacing: .12em; }
.book .ch-head h2{ margin: .5mm 0 1mm; font-size: 18pt; line-height: 1.3; }
.book .ch-head p{ margin: 0; color: #e4e0f0; font-size: 9.5pt; line-height: 1.6; }
.book /* ---------- 要点の箱 ---------- */
.keys{ border: 2px solid var(--orange); border-radius: 3mm; padding: 3.5mm 5mm 2.5mm; margin: 0 0 5mm; background: #fffaf2; }
.book .keys h3{ margin: 0 0 1.5mm; font-size: 10.5pt; color: var(--orange-deep); }
.book .keys ul{ margin: 0; padding-left: 5mm; }
.book .keys li{ margin-bottom: 1mm; }
.book /* ---------- 見出し ---------- */
h3.sec{ font-size: 12.5pt; margin: 5mm 0 2.5mm; padding: 1mm 0 1mm 4mm; border-left: 5px solid var(--green-deep);
  background: linear-gradient(to right, var(--green), rgba(229,241,216,0)); break-after: avoid; }
.book h4.sub{ font-size: 10.5pt; margin: 3.5mm 0 1.5mm; color: var(--green-deep); break-after: avoid; }
.book /* ---------- 2段組（文章＋実画面） ---------- */
.split{ display: flex; gap: 6mm; align-items: flex-start; margin-bottom: 3mm; break-inside: avoid; }
.book .split .txt{ flex: 1; min-width: 0; }
.book .split .pic{ flex: 0 0 52mm; }
.book .split .pic.w44{ flex-basis: 44mm; }
.book .split .pic.w62{ flex-basis: 62mm; }
.book .split .pic.w70{ flex-basis: 70mm; }
.book .shot{ display: block; width: 100%; border-radius: 3mm; border: 1px solid var(--line); box-shadow: 0 1mm 2.5mm rgba(63,47,37,.15); }
.book .cap{ font-size: 8pt; color: var(--soft); text-align: center; margin-top: 1.5mm; line-height: 1.45; }
.book .pics{ display: flex; gap: 5mm; justify-content: center; margin: 2mm 0 4mm; break-inside: avoid; }
.book .pics figure{ margin: 0; flex: 0 0 auto; }
.book /* 仮置きの枠（撮影はあとで） */
.ph{ border: 2px dashed var(--red); border-radius: 3mm; color: var(--red); background: #fff5f4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  font-weight: 700; font-size: 9pt; line-height: 1.5; padding: 4mm; }
.book .ph small{ font-weight: 400; font-size: 7.5pt; margin-top: 1mm; }
.book .ph.tall{ height: 100mm; }
.book .ph.mid{ height: 70mm; }
.book .ph.low{ height: 46mm; }
.book /* ---------- 手順の番号 ---------- */
ol.steps{ list-style: none; counter-reset: st; padding: 0; margin: 0 0 3mm; }
.book ol.steps > li{ counter-increment: st; position: relative; padding: 0 0 2.4mm 10mm; break-inside: avoid; }
.book ol.steps > li::before{ content: counter(st); position: absolute; left: 0; top: .2mm; width: 6.5mm; height: 6.5mm;
  border-radius: 50%; background: var(--green-deep); color: #fff; font-weight: 700; font-size: 9pt;
  display: flex; align-items: center; justify-content: center; font-family: "Zen Maru Gothic", sans-serif; }
.book ol.steps > li b.h{ display: block; }
.book /* ---------- メモ・注意 ---------- */
.note{ background: var(--sky); border-radius: 3mm; padding: 3mm 4.5mm; margin: 2mm 0 4mm; break-inside: avoid; }
.book .note.warn{ background: #fdecea; border-left: 4px solid var(--red); }
.book .note.gold{ background: #fff6d8; border-left: 4px solid var(--gold); }
.book .note h4{ margin: 0 0 1mm; font-size: 10pt; }
.book .note p:last-child, .book .note ul:last-child{ margin-bottom: 0; }
.book .note ul{ margin: 0; padding-left: 5mm; }
.book /* ---------- 流れ図 ---------- */
.flow{ display: flex; align-items: stretch; gap: 0; margin: 2mm 0 4mm; break-inside: avoid; }
.book .flow .box{ flex: 1; background: var(--cream); border: 1.5px solid var(--line); border-radius: 2.5mm;
  padding: 2mm 2.5mm; font-size: 8.8pt; line-height: 1.5; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.book .flow .box b{ display: block; font-size: 9.5pt; color: var(--ink); }
.book .flow .box.hl{ background: #fff2cc; border-color: var(--gold); }
.book .flow .box.dark{ background: var(--night); color: #fff; border-color: var(--night); }
.book .flow .box.dark b{ color: var(--marker); }
.book .flow .arr{ flex: 0 0 6mm; display: flex; align-items: center; justify-content: center; color: var(--orange); font-size: 13pt; font-weight: 900; }
.book .vflow{ display: flex; flex-direction: column; align-items: stretch; margin: 2mm 0 4mm; break-inside: avoid; }
.book .vflow .box{ background: var(--cream); border: 1.5px solid var(--line); border-radius: 2.5mm; padding: 2mm 3.5mm; font-size: 9pt; line-height: 1.55; }
.book .vflow .box.hl{ background: #fff2cc; border-color: var(--gold); }
.book .vflow .box.dark{ background: var(--night); color: #fff; border-color: var(--night); }
.book .vflow .arr{ text-align: center; color: var(--orange); font-weight: 900; line-height: 1; padding: 1mm 0; font-size: 11pt; }
.book /* 計算式の箱 */
.formula{ display: flex; align-items: center; justify-content: center; gap: 2mm; flex-wrap: nowrap;
  background: var(--night); color: #fff; border-radius: 3mm; padding: 3.5mm 4mm; margin: 2mm 0 4mm; break-inside: avoid; }
.book .formula .t{ background: #fff; color: var(--ink); border-radius: 2mm; padding: 1.5mm 3mm; font-weight: 700; font-size: 9.5pt; text-align: center; line-height: 1.35; }
.book .formula .t small{ display: block; font-weight: 400; font-size: 7.5pt; color: var(--soft); }
.book .formula .t.res{ background: var(--marker); }
.book .formula .op{ font-weight: 900; font-size: 14pt; color: var(--marker); }
.book /* ---------- 表（最小限） ---------- */
table.t{ width: 100%; border-collapse: collapse; margin: 1mm 0 4mm; font-size: 9pt; line-height: 1.5; break-inside: avoid; }
.book table.t th, .book table.t td{ border: 1px solid var(--line); padding: 1.5mm 2.5mm; vertical-align: top; text-align: left; }
.book table.t th{ background: var(--cream); font-weight: 700; }
.book table.t td.c, .book table.t th.c{ text-align: center; }
.book /* 階級のはしご */
.ranks{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6mm; margin: 2mm 0 4mm; break-inside: avoid; }
.book .ranks div{ border-radius: 2mm; padding: 1.3mm 2mm; font-size: 8.3pt; line-height: 1.35; background: var(--cream); border: 1px solid var(--line); }
.book .ranks div b{ display: block; font-size: 8.8pt; }
.book .ranks div span{ color: var(--soft); }
.book /* 評価のバッジ */
.badges{ display: flex; gap: 2.5mm; margin: 2mm 0 4mm; break-inside: avoid; }
.book .badges div{ flex: 1; border-radius: 2.5mm; padding: 2mm 2.5mm; text-align: center; font-size: 8.5pt; line-height: 1.45; border: 1.5px solid var(--line); }
.book .badges div b{ display: block; font-size: 11pt; font-family: "Zen Maru Gothic", sans-serif; }
.book .badges .kin{ background: #fff3c4; border-color: var(--gold); }
.book .badges .gin{ background: #eef1f5; border-color: #9aa6b4; }
.book .badges .clr{ background: var(--green); border-color: #9cc48a; }
.book .badges .mi{ background: #f4f1ec; }
.book /* 誤解トップ10 */
.myth{ border: 1.5px solid var(--line); border-radius: 3mm; margin: 0 0 3.2mm; break-inside: avoid; overflow: hidden; }
.book .myth .q{ background: var(--night); color: #fff; padding: 1.8mm 4mm; font-weight: 700; font-size: 10pt; display: flex; gap: 3mm; align-items: baseline; }
.book .myth .q .n{ color: var(--marker); font-family: "Zen Maru Gothic", sans-serif; font-size: 12pt; flex: 0 0 auto; }
.book .myth .row{ display: flex; padding: 1.6mm 4mm; font-size: 9pt; line-height: 1.6; }
.book .myth .row + .row{ border-top: 1px dashed var(--line); }
.book .myth .lab{ flex: 0 0 19mm; font-weight: 700; }
.book .myth .lab.t{ color: var(--green-deep); }
.book .myth .lab.d{ color: var(--orange-deep); }
.book .myth .row div{ flex: 1; }
.book /* 用語集・画面マップ */
dl.gloss{ margin: 0; columns: 2; column-gap: 7mm; }
.book dl.gloss div{ break-inside: avoid; margin-bottom: 1.6mm; }
.book dl.gloss dt{ font-weight: 700; color: var(--green-deep); font-size: 9.5pt; }
.book dl.gloss dd{ margin: 0; font-size: 8.6pt; line-height: 1.5; }
.book .railmap{ display: flex; gap: 6mm; align-items: flex-start; }
.book .railmap .rail{ flex: 0 0 26mm; background: #6b4a2e; border-radius: 3mm; padding: 2mm; display: flex; flex-direction: column; gap: 1.6mm; }
.book .railmap .rail div{ background: #fff; border-radius: 2mm; text-align: center; font-size: 7pt; padding: 1mm 0 .6mm; line-height: 1.2; font-weight: 700; }
.book .railmap .rail div img{ width: 9mm; height: 9mm; object-fit: contain; display: block; margin: 0 auto .4mm; }
.book .railmap .rail div.set{ background: #fff3c4; outline: 1.5px solid var(--gold); }
.book .railmap .rail div.shop{ background: #efe8fb; }
.book .railmap table{ flex: 1; }
.book .chars{ display: flex; gap: 3mm; align-items: flex-end; justify-content: center; margin: 1mm 0 2mm; }
.book .chars img{ height: 26mm; width: auto; }
.book .icon-inline{ height: 5mm; vertical-align: -1.2mm; }
.book .endmark{ text-align: center; margin-top: 8mm; color: var(--soft); font-size: 9pt; }
.book .avoid{ break-inside: avoid; }
.book .cols2{ display: flex; gap: 5mm; }
.book .cols2 > div{ flex: 1; min-width: 0; }
.tebiki .kbook p{ margin: 0 0 3mm; }
.tebiki .kbook ruby rt{ font-size: 50%; }
.tebiki .kbook b{ color: #b4501b; }
.tebiki .kbook .pg{ width: 210mm; height: 297mm; padding: 13mm 14mm 16mm; position: relative; overflow: hidden; page-break-after: always; background: #fffdf8; }
.tebiki .kbook .pg:last-child{ page-break-after: auto; }
.tebiki .kbook .pg .no{ position: absolute; bottom: 7mm; left: 0; right: 0; text-align: center; font-size: 10pt; color: var(--soft); }
.tebiki .kbook /* 見出し：巻物ふうの帯 */
.head{ display: flex; align-items: center; gap: 4mm; background: var(--night); color: #fff; border-radius: 6mm; padding: 4mm 6mm; margin-bottom: 6mm; }
.tebiki .kbook .head .badge{ flex: 0 0 auto; width: 17mm; height: 17mm; border-radius: 50%; background: var(--gold); color: var(--night);
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 20pt; }
.tebiki .kbook .head h2{ margin: 0; font-size: 24pt; line-height: 1.3; letter-spacing: .05em; }
.tebiki .kbook .head .sub{ font-size: 11pt; color: var(--marker); display: block; letter-spacing: .1em; }
.tebiki .kbook .lead{ font-size: 16pt; background: var(--cream); border-radius: 5mm; padding: 4mm 6mm; margin-bottom: 5mm; }
.tebiki .kbook .row{ display: flex; gap: 6mm; align-items: flex-start; }
.tebiki .kbook .row > .col{ flex: 1; min-width: 0; }
.tebiki .kbook .shot{ display: block; width: 100%; border-radius: 4mm; border: 2px solid var(--line); box-shadow: 0 1.2mm 3mm rgba(0,0,0,.15); }
.tebiki .kbook .cap{ font-size: 10.5pt; color: var(--soft); text-align: center; margin-top: 1.5mm; line-height: 1.5; }
.tebiki .kbook /* 番号つきの手順 */
ol.st{ list-style: none; counter-reset: s; padding: 0; margin: 0 0 4mm; }
.tebiki .kbook ol.st li{ counter-increment: s; position: relative; padding-left: 13mm; margin-bottom: 3.5mm; }
.tebiki .kbook ol.st li::before{ content: counter(s); position: absolute; left: 0; top: .5mm; width: 9mm; height: 9mm; border-radius: 50%;
  background: var(--green-deep); color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 14pt; }
.tebiki .kbook /* ふきだし（ヒント） */
.tip{ position: relative; background: var(--sky); border-radius: 5mm; padding: 3.5mm 5mm 3.5mm 24mm; margin: 4mm 0; min-height: 22mm; }
.tebiki .kbook .tip img{ position: absolute; left: 3mm; bottom: 1mm; width: 18mm; }
.tebiki .kbook .tip .t{ font-weight: 900; color: var(--green-deep); display: block; font-size: 13pt; }
.tebiki .kbook .warn{ background: #fdecea; }
.tebiki .kbook .warn .t{ color: var(--red); }
.tebiki .kbook /* カード */
.cards{ display: grid; gap: 4mm; margin: 3mm 0; }
.tebiki .kbook .cards.c2{ grid-template-columns: 1fr 1fr; }
.tebiki .kbook .cards.c3{ grid-template-columns: 1fr 1fr 1fr; }
.tebiki .kbook .cards.c4{ grid-template-columns: 1fr 1fr 1fr 1fr; }
.tebiki .kbook .card{ background: #fff; border: 2.5px solid var(--line); border-radius: 5mm; padding: 3mm; text-align: center; font-size: 12.5pt; line-height: 1.5; }
.tebiki .kbook .card img{ height: 28mm; width: auto; max-width: 100%; display: block; margin: 0 auto 1.5mm; object-fit: contain; }
.tebiki .kbook .card .n{ display: block; font-weight: 900; font-size: 14pt; color: var(--ink); }
.tebiki .kbook .card.kin{ background: #fff3c4; border-color: var(--gold); }
.tebiki .kbook .card.gin{ background: #eef1f5; border-color: #9aa6b4; }
.tebiki .kbook .card.grn{ background: var(--green); border-color: #9cc48a; }
.tebiki .kbook .big{ font-size: 20pt; font-weight: 900; }
.tebiki .kbook .flow{ display: flex; align-items: stretch; margin: 4mm 0; }
.tebiki .kbook .flow .box{ flex: 1; background: var(--cream); border: 2.5px solid var(--line); border-radius: 5mm; padding: 3mm; text-align: center; font-size: 12.5pt; line-height: 1.5; display: flex; flex-direction: column; justify-content: center; }
.tebiki .kbook .flow .box.hl{ background: #fff3c4; border-color: var(--gold); }
.tebiki .kbook .flow .arr{ flex: 0 0 9mm; display: flex; align-items: center; justify-content: center; color: #e8862a; font-size: 18pt; font-weight: 900; }
.tebiki .kbook table.k{ width: 100%; border-collapse: separate; border-spacing: 0; margin: 3mm 0; font-size: 13pt; line-height: 1.5; }
.tebiki .kbook table.k td, .tebiki .kbook table.k th{ border-bottom: 2px dotted var(--line); padding: 2mm 3mm; text-align: left; vertical-align: middle; }
.tebiki .kbook table.k th{ color: var(--green-deep); }
.tebiki .kbook table.k img{ height: 12mm; vertical-align: middle; }
.tebiki .kbook /* 表紙 */
.cover{ padding: 0; background: var(--night); color: #fff; }
.tebiki .kbook .cover .art{ position: absolute; inset: 0 0 auto 0; width: 210mm; height: 170mm; object-fit: cover; }
.tebiki .kbook .cover .fade{ position: absolute; left: 0; top: 120mm; width: 210mm; height: 55mm; background: linear-gradient(to bottom, rgba(47,42,69,0), var(--night)); }
.tebiki .kbook .cover .
.cover .logo{ width: 140mm; display: block; margin: 0 auto 4mm; }
.tebiki .kbook .cover h1{ font-size: 40pt; margin: 0 0 3mm; letter-spacing: .12em; color: var(--marker); }
.tebiki .kbook .cover p{ font-size: 15pt; color: #ece8f6; }
.tebiki .kbook .cover .heroes{ display: flex; justify-content: center; gap: 6mm; margin-top: 4mm; }
.tebiki .kbook .cover .heroes img{ height: 36mm; }
.tebiki .kbook /* もくじ */
.toc li{ list-style: none; display: flex; align-items: center; gap: 4mm; padding: 2.2mm 0; border-bottom: 2px dotted var(--line); font-size: 15pt; }
.tebiki .kbook .toc ol{ padding: 0; margin: 0; }
.tebiki .kbook .toc .b{ width: 11mm; height: 11mm; border-radius: 50%; background: var(--gold); color: var(--night); font-weight: 900; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.tebiki .kbook .toc .p{ margin-left: auto; color: #b4501b; font-weight: 900; }
.tebiki .kbook .rail{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3mm; }
.tebiki .kbook .rail div{ background: #fff; border: 2.5px solid var(--line); border-radius: 4mm; padding: 2mm 3mm; display: flex; align-items: center; gap: 3mm; font-size: 12pt; line-height: 1.45; }
.tebiki .kbook .rail img{ width: 13mm; height: 13mm; object-fit: contain; flex: 0 0 auto; }
.tebiki .kbook .rail b{ display: block; color: var(--ink); font-size: 13pt; }
.tebiki .kbook .rail .set{ background: #fff3c4; border-color: var(--gold); }
.tebiki .kbook /* ネタバレよけ：黒いシルエット（LP の .sample-spirit-secret と同じ filter:brightness(0)） */
img.sil{ filter: brightness(0); }
.tebiki .kbook img.sil.gin{ filter: brightness(0) drop-shadow(0 0 1.2mm #dfe6ee) drop-shadow(0 0 2.5mm #b8c4d2); }
.tebiki .kbook img.sil.kin{ filter: brightness(0) drop-shadow(0 0 1.2mm #ffe27a) drop-shadow(0 0 2.5mm #f0b72a); }
/* ---- Web 向けの上書き ---- */
.book p,.book li{line-height:1.9}
.book .chapter{page-break-before:auto;break-before:auto;padding-top:10px;border-top:3px dashed var(--line)}
.book h3.sec{break-before:auto!important}
.book .ch-head{padding:18px 18px 18px 96px;min-height:90px}
.book .ch-head .num{width:60px;height:68px;left:18px;font-size:22px}
.book .ch-head h2{font-size:23px}
.book .formula{flex-wrap:wrap}
.book .shot{max-width:320px;margin:0 auto}
.book .pics figure img.shot{max-width:100%}
@media(max-width:700px){
  .web-hero h1{font-size:27px}
  .book{padding:6px 16px 30px}
  .book .split,.book .cols2,.book .railmap{flex-direction:column;gap:12px}
  .book .split .pic{flex-basis:auto!important;width:100%;max-width:300px;margin:0 auto}
  .book .flow{flex-direction:column}.book .flow .arr{transform:rotate(90deg);flex-basis:22px}
  .book .pics{flex-wrap:wrap}.book .pics figure{flex:1 1 140px}.book .pics figure img{width:100%!important}
  .book .badges{flex-wrap:wrap}.book .badges div{flex:1 1 40%}
  .book .ranks{grid-template-columns:repeat(2,1fr)}
  .book dl.gloss{columns:1}
  .book table.t{display:block;overflow-x:auto;font-size:13px}
  .book .ch-head{padding-left:84px}.book .ch-head h2{font-size:20px}
  .book .myth .row{flex-direction:column}.book .myth .lab{flex-basis:auto}
  .book .railmap .rail{flex-direction:row;flex-wrap:wrap;flex-basis:auto}.book .railmap .rail div{flex:1 1 60px}
}
/* 子ども向け：A4の1ページ＝1枚のカード */
.kids-hero{position:relative;max-width:none;padding:0;background:var(--night);color:#fff;text-align:center;overflow:hidden}
.kids-hero .art{width:100%;max-height:440px;object-fit:cover;display:block}
.kids-hero .body{padding:10px 20px 30px;max-width:760px;margin:0 auto}
.kids-hero .logo{width:min(80%,420px);margin:-60px auto 10px;display:block;position:relative}
.kids-hero h1{color:var(--marker);font-size:36px;letter-spacing:.12em;margin:0 0 10px}
.kids-hero p{color:#ece8f6}.kids-hero .dl{justify-content:center}.kids-hero .for-parent a{color:#ffd76e;font-size:14px;font-weight:800}
.kbook{max-width:820px;margin:0 auto;padding:20px 16px 40px}
.tebiki .kbook .pg{width:auto;height:auto;padding:22px 22px 26px;margin:0 0 26px;border-radius:22px;box-shadow:0 4px 0 #46342a14;page-break-after:auto;overflow:visible}
.tebiki .kbook .pg.ending{padding:0;background:var(--night);color:#fff;text-align:center;overflow:hidden}
.tebiki .kbook .pg.ending .art{position:static;width:100%;height:auto;max-height:380px;object-fit:cover}
.tebiki .kbook .pg.ending .fade{display:none}
.tebiki .kbook .pg.ending .body{position:static;padding:16px 20px 26px}
.tebiki .kbook .pg.ending h1{font-size:26px}
@media(max-width:700px){
  .tebiki .kbook{font-size:16px}
  .tebiki .kbook .row{flex-direction:column}.tebiki .kbook .row>div{flex-basis:auto!important;width:100%;max-width:300px;margin:0 auto}
  .tebiki .kbook .cards.c4{grid-template-columns:1fr 1fr}.tebiki .kbook .cards.c3{grid-template-columns:1fr 1fr 1fr}
  .tebiki .kbook .rail{grid-template-columns:1fr 1fr}
  .tebiki .kbook .flow{flex-direction:column}.tebiki .kbook .flow .arr{transform:rotate(90deg);flex-basis:24px}
  .tebiki .kbook .head h2{font-size:20px}.tebiki .kbook .head .badge{width:13mm;height:13mm;font-size:16pt}
  .kids-hero h1{font-size:28px}
}
.tebiki .kbook{font-size:17px;line-height:1.8;font-weight:500}