:root { --bg: #FFF9EE; --ink: #3A3330; --sub: #7A6E66; --main: #F08A24; --main-deep: #C96A0B; --green: #4CAF7A; --red: #E5534B; --card: #fff; --line: #F0E2CC; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 19px/1.8 "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif; }
a { color: var(--main-deep); }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.site-head { background: #fff; border-bottom: 3px solid var(--main); position: sticky; top: 0; z-index: 5; }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-top: 8px; padding-bottom: 6px; }
.logo { font-weight: 900; font-size: 21px; color: var(--ink); text-decoration: none; }
.site-head nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px 12px; flex-wrap: wrap; font-size: 15px; }
.site-head nav a { text-decoration: none; color: var(--sub); padding: 4px 2px; }
.site-head nav a[aria-current] { color: var(--main-deep); font-weight: 700; border-bottom: 3px solid var(--main); }
h1 { font-size: 28px; line-height: 1.4; margin: 20px 0 8px; }
h1 small { display: block; font-size: 16px; color: var(--sub); font-weight: 700; }
h2 small { font-size: 15px; color: var(--sub); margin-left: 8px; }
.lead { font-size: 18px; }
.crumbs ol { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 14px; color: var(--sub); }
.crumbs li + li::before { content: "›"; margin-right: 4px; }
.card { background: var(--card); border: 2px solid var(--line); border-radius: 18px; padding: 14px 18px; margin: 16px 0; }
.card h2 { margin: 0 0 6px; font-size: 21px; }
.set-links { display: flex; flex-wrap: wrap; gap: 8px; }
.set-links a { display: inline-block; background: #fff; border: 2px solid var(--main); border-radius: 12px; padding: 6px 14px; text-decoration: none; font-weight: 700; }
.big-links a { min-width: 140px; text-align: center; }
.set-links small { display: block; font-size: 13px; color: var(--sub); font-weight: 500; }
.top-cards { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.top-cards a { display: block; background: #fff; border: 3px solid var(--line); border-radius: 20px; padding: 18px; text-decoration: none; color: var(--ink); box-shadow: 0 4px 0 var(--line); }
.top-cards a:hover { border-color: var(--main); }
.top-cards .ic { font-size: 40px; display: block; }
.top-cards b { font-size: 22px; display: block; }
.top-cards small { color: var(--sub); font-size: 15px; }
.tools-row { margin: 12px 0; }
.btn-print, .btn-sub { font: 700 17px inherit; font-family: inherit; border-radius: 999px; padding: 10px 22px; cursor: pointer; border: 2px solid var(--main); background: #fff; color: var(--main-deep); }
.quiz { list-style: none; padding: 0; counter-reset: q; }
.q { background: #fff; border: 2px solid var(--line); border-radius: 18px; padding: 16px; margin: 0 0 16px; }
.q-text { margin: 0 0 10px; font-weight: 700; font-size: 20px; }
.q-no { display: inline-block; background: var(--main); color: #fff; border-radius: 8px; padding: 0 10px; margin-right: 10px; font-size: 16px; }
.big { font-size: 34px; letter-spacing: .08em; color: var(--ink); margin: 0 4px; }
.blank { color: var(--main-deep); }
.hint { display: block; font-size: 16px; font-weight: 500; color: var(--sub); margin-top: 4px; }
.hint.mean { font-size: 19px; color: var(--ink); background: #FFF4E0; border-radius: 10px; padding: 8px 12px; }
.choices { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.choices button { width: 100%; min-height: 56px; font: 700 19px inherit; font-family: inherit; text-align: left; padding: 8px 14px; border-radius: 14px; border: 2px solid #E3D3BC; background: #FFFDF8; color: var(--ink); cursor: pointer; }
.choices button:hover { border-color: var(--main); }
.choices button.is-ok { background: #E3F6EA; border-color: var(--green); }
.choices button.is-ng { background: #FDE7E5; border-color: var(--red); }
.q-res { font-weight: 900; font-size: 20px; margin: 10px 0 0; }
.q-res.ok { color: var(--green); } .q-res.ng { color: var(--red); }
.q-ex { margin: 4px 0 0; font-size: 17px; color: var(--sub); }
.score { background: #fff; border: 3px solid var(--main); border-radius: 18px; padding: 16px; text-align: center; font-size: 22px; font-weight: 700; }
.score b { font-size: 40px; color: var(--main-deep); }
.set-nav p { display: flex; flex-wrap: wrap; gap: 6px; }
.set-nav a, .set-nav span { display: inline-block; min-width: 44px; text-align: center; padding: 6px 10px; border-radius: 10px; border: 2px solid var(--line); background: #fff; text-decoration: none; }
.set-nav span { background: var(--main); color: #fff; border-color: var(--main); }
.answer-key, .print-name { display: none; }
.mg { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.mg figure { margin: 0; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 8px; }
.mg figcaption { font-weight: 700; font-size: 16px; text-align: center; }
.mg svg { width: 100%; height: auto; display: block; border-radius: 8px; }
.pic-right { cursor: crosshair; }
.pic-right .mark { fill: none; stroke: transparent; stroke-width: 5; pointer-events: none; }
.pic-right .mark.on { stroke: var(--red); }
.pic-right .mark.is-shown { stroke-dasharray: 8 6; }
.pic-right.miss { animation: shake .25s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.mg-count { font-size: 22px; font-weight: 700; text-align: center; }
.mg-count b { color: var(--main-deep); font-size: 30px; }
.mg-list { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mg-list a { display: block; text-decoration: none; text-align: center; font-weight: 700; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 6px; }
.mg-list svg { width: 100%; height: auto; border-radius: 6px; }
.prose p { margin: 0 0 1em; }
.site-foot { margin-top: 40px; padding: 20px 0; background: #fff; border-top: 2px solid var(--line); font-size: 14px; color: var(--sub); }
@media (max-width: 600px) {
  body { font-size: 18px; }
  h1 { font-size: 24px; }
  .mg { grid-template-columns: 1fr; }
  .big { font-size: 30px; }
}
/* 印刷：ボタンやメニューは出さず、答えは別のページに */
@media print {
  body { background: #fff; font-size: 14pt; }
  .site-head, .site-foot, .crumbs, .tools-row, .set-nav, .score, .q-res, .q-ex, .mg-count { display: none !important; }
  .print-name { display: block; font-size: 12pt; border-bottom: 1px solid #999; padding-bottom: 4px; }
  .q { break-inside: avoid; border: 1px solid #999; padding: 8px 10px; margin-bottom: 8px; }
  .choices button { border: 1px solid #999; min-height: 0; background: #fff !important; }
  .answer-key { display: block; break-before: page; }
  .mg { grid-template-columns: 1fr; }
  .mg figure { break-inside: avoid; border: 1px solid #999; }
  .mg svg { max-height: 9.5cm; width: auto; margin: 0 auto; }
  .pic-right .mark { display: none; }
  .mg-key svg { max-height: 12cm; width: auto; display: block; margin: 0 auto; }
}
/* 和同開珎の十字 */
.wd { display: grid; grid-template-columns: repeat(5, 2.2em); grid-template-rows: repeat(5, 2.2em); place-items: center; margin: 10px auto 0; font-size: 26px; width: max-content; }
.wd > span { display: flex; align-items: center; justify-content: center; }
.wd-t, .wd-l, .wd-r, .wd-b, .wd-c { width: 1.8em; height: 1.8em; border: 2px solid #C9B79C; border-radius: 10px; background: #fff; font-weight: 700; }
.wd-c { border-color: var(--main); background: #FFF1DE; color: var(--main-deep); }
.wd-a { color: var(--sub); font-size: 22px; }
.wd-t { grid-area: 1 / 3; } .wd-at { grid-area: 2 / 3; } .wd-l { grid-area: 3 / 1; } .wd-al { grid-area: 3 / 2; } .wd-c { grid-area: 3 / 3; }
.wd-ar { grid-area: 3 / 4; } .wd-r { grid-area: 3 / 5; } .wd-ab { grid-area: 4 / 3; } .wd-b { grid-area: 5 / 3; }
.note { font-size: 15px; color: var(--sub); }
@media (max-width: 600px) { .wd { font-size: 22px; } }
/* 計算プリント */
.drill { list-style: none; padding: 0; display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); counter-reset: d; }
.drill li { counter-increment: d; display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; font-size: 22px; font-weight: 700; }
.drill li::before { content: "(" counter(d) ")"; font-size: 14px; color: var(--sub); min-width: 2.2em; }
.drill input, .hm input { font: 700 22px inherit; font-family: inherit; width: 3.2em; text-align: center; border: 2px solid #D8C6AA; border-radius: 8px; padding: 2px; background: #FFFDF8; }
.drill input.is-ok, .hm input.is-ok { border-color: var(--green); background: #E3F6EA; }
.drill input.is-ng, .hm input.is-ng { border-color: var(--red); background: #FDE7E5; }
.drill-key { columns: 2; font-size: 15pt; }
.timer { font-size: 22px; font-weight: 700; margin-left: 8px; color: var(--main-deep); }
.hm-wrap { overflow-x: auto; }
.hm { border-collapse: collapse; margin: 8px auto; background: #fff; }
.hm th, .hm td { border: 1px solid #B9A88E; width: 2.4em; height: 2.4em; text-align: center; font-size: 19px; padding: 0; }
.hm th { background: #FFF1DE; }
.hm .hm-op { background: var(--main); color: #fff; }
.hm input { width: 2.2em; font-size: 18px; border: 0; background: transparent; }
/* 迷路 */
.maze-box svg, .maze-ans svg, .answer-key svg.maze { width: 100%; max-width: 640px; height: auto; display: block; margin: 0 auto; background: #fff; border-radius: 10px; }
.mg-list svg.maze { width: 100%; height: auto; }
@media print {
  .drill li { border: 1px solid #999; }
  .drill input, .hm input { border: 0; border-bottom: 1px solid #333; border-radius: 0; background: #fff !important; }
  .timer { display: none; }
  .hm th, .hm td { width: 1.6cm; height: 1.25cm; font-size: 14pt; }
  .maze-box svg { max-height: 23cm; width: auto; }
  .answer-key svg.maze { max-height: 20cm; width: auto; }
}
/* 難しさの★ */
.lv { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: #F2A541; letter-spacing: 1px; background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 2px 12px; }
.lv b { color: var(--ink); font-size: 14px; letter-spacing: 0; }
.lv3 { border-color: #F3B4AE; } .lv3 b { color: #C0392B; }
.lv4 { border-color: #C0392B; background: #FFF0EE; } .lv4 b { color: #C0392B; }
.lv-h { margin: 28px 0 0; }
.card h3 { margin: 0 0 4px; font-size: 20px; }
.next-row { text-align: center; margin: 18px 0; }
.btn-next { display: inline-block; background: var(--main); color: #fff; font-weight: 900; font-size: 20px; text-decoration: none; padding: 12px 34px; border-radius: 999px; box-shadow: 0 4px 0 var(--main-deep); }
@media print { .lv, .next-row { display: none; } }
.pic-right .hint-glow { fill: rgba(255, 214, 64, .35); stroke: #F2A541; stroke-width: 3; stroke-dasharray: 6 6; pointer-events: none; animation: glow 1.8s ease-out; }
@keyframes glow { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.big.koto { font-size: 26px; letter-spacing: .02em; }
.guide h2 { font-size: 22px; margin: 26px 0 8px; border-left: 6px solid var(--main); padding-left: 10px; }
.guide ol, .guide ul { padding-left: 1.4em; } .guide li { margin-bottom: 6px; }
.guide-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.guide-list a { display: block; background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 14px 16px; text-decoration: none; color: var(--ink); }
.guide-list b { display: block; font-size: 20px; color: var(--main-deep); } .guide-list small { color: var(--sub); font-size: 15px; }
.plain { padding-left: 1.2em; margin: 0; }
/* ぎっしり（最高にむずかしい） */
.mg.is-dense { grid-template-columns: 1fr; }
.mg.is-dense figure { overflow: auto; }
.mg.is-dense.is-zoom svg { width: 200%; max-width: none; }
.lv5 { border-color: #7B1FA2; background: #F6EAFB; } .lv5 b { color: #7B1FA2; }
@media print { .mg.is-dense svg { max-height: 12cm; width: auto; } }
@media (max-width: 600px) { .mg.is-dense.is-zoom svg { width: 320%; } .mg.is-dense.is-zoom figure { max-height: 70vh; } }
/* 名画で間違い探し */
.mg.is-meiga svg image { image-rendering: auto; }
.mg-list img { width: 100%; height: auto; border-radius: 6px; display: block; }
.mg-list .mz { display: block; text-align: center; font-size: 13px; margin-top: 2px; }
.mi { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 6px 0 10px; }
.mi dt { font-weight: 700; color: var(--sub); }
.mi dd { margin: 0; }
.mg.is-meiga:not(.is-dense).is-zoom { grid-template-columns: 1fr; }
.mg.is-meiga.is-zoom figure { overflow: auto; max-height: 80vh; }
.mg.is-meiga.is-zoom svg { width: 200%; max-width: none; }
/* 数独 */
.sdk-wrap { display: flex; justify-content: center; margin: 12px 0; }
.sdk { border-collapse: collapse; border: 3px solid #333; background: #fff; }
.sdk td { width: min(10vw, 52px); height: min(10vw, 52px); border: 1px solid #A99; text-align: center; font-size: min(6vw, 28px); font-weight: 700; padding: 0; }
.sdk6 td { width: min(14vw, 60px); height: min(14vw, 60px); font-size: min(8vw, 32px); }
.sdk td.br { border-right: 3px solid #333; } .sdk td.bb { border-bottom: 3px solid #333; }
.sdk td.given { color: #222; background: #F6F1E7; }
.sdk td.ans { color: #C0392B; }
.sdk td.same { background: #FFF0C2; }
.sdk input { width: 100%; height: 100%; border: 0; text-align: center; font: 700 inherit; font-size: inherit; font-family: inherit; color: #1E5AA8; background: transparent; padding: 0; caret-color: transparent; }
.sdk input:focus { outline: 3px solid var(--main); outline-offset: -3px; background: #FFF5E6; }
.sdk input.is-ng { color: var(--red); background: #FDE7E5; }
.sdk input.is-hint { color: #7B1FA2; }
.sdk-pad { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0; }
.sdk-pad button { min-width: 48px; height: 48px; font: 700 22px inherit; font-family: inherit; border-radius: 12px; border: 2px solid var(--main); background: #fff; color: var(--main-deep); cursor: pointer; }
@media print { .sdk-pad { display: none; } .sdk td { width: 1.6cm; height: 1.6cm; font-size: 22pt; } .sdk6 td { width: 2cm; height: 2cm; } .sdk input { color: #fff; } .sdk td.same { background: #fff; } }
/* スマホ：メニューは横にスクロール、上に固定しない（問題が隠れないように） */
@media (max-width: 700px) {
  .site-head { position: static; }
  .site-head nav { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .site-head nav ul { flex-wrap: nowrap; white-space: nowrap; }
}
/* 文字さがし */
.ws-box { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: center; }
.ws-wrap { display: flex; justify-content: center; }
.ws { border-collapse: collapse; background: #fff; border: 3px solid #555; user-select: none; }
.ws td { width: min(9vw, 44px); height: min(9vw, 44px); text-align: center; font-size: min(6vw, 26px); font-weight: 700; border: 1px solid #E3D3BC; cursor: pointer; padding: 0; }
.ws10 td { width: min(8vw, 40px); height: min(8vw, 40px); font-size: min(5.2vw, 24px); }
.ws12 td { width: min(7.2vw, 36px); height: min(7.2vw, 36px); font-size: min(4.6vw, 21px); }
.ws td.sel { background: #FFD966 !important; outline: 2px solid var(--main); }
.ws td.hit { background: #FFE0A3; }
.ws.miss { animation: shake .25s; }
.ws-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 4px 18px; font-size: 19px; font-weight: 700; }
.ws-list li::before { content: "□ "; color: var(--sub); }
.ws-list li.on { color: #999; text-decoration: line-through; }
.ws-list li.on::before { content: "☑ "; color: var(--green); }
@media print { .ws td { width: 1.25cm; height: 1.25cm; font-size: 18pt; background: #fff !important; } .ws12 td { width: 1.1cm; height: 1.1cm; font-size: 15pt; } .answer-key .ws td.hit { background: #ddd !important; } .ws-list li.on { color: #000; text-decoration: none; } }
/* ぬりえ */
.nurie { margin: 12px 0; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 8px; }
.nurie img { width: 100%; height: auto; display: block; }
.nurie-ref { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto 8px; border-radius: 8px; }
.mg-list img.nurie-th { border: 1px solid #ddd; background: #fff; }
@media print {
  body * { visibility: visible; }
  .no-print, .lead, h1, .crumbs, .tools-row { display: none !important; }
  .nurie { border: 0; padding: 0; margin: 0; }
  .nurie img { max-height: 26cm; width: auto; max-width: 100%; margin: 0 auto; }
}
/* 同じ絵さがし */
.oj { display: grid; gap: 8px; margin: 12px 0; }
.oj4 { grid-template-columns: repeat(4, 1fr); } .oj5 { grid-template-columns: repeat(5, 1fr); } .oj6 { grid-template-columns: repeat(6, 1fr); } .oj7 { grid-template-columns: repeat(7, 1fr); }
.oj-cell { position: relative; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 4px; cursor: pointer; aspect-ratio: 1; }
.oj-cell svg { width: 100%; height: 100%; display: block; }
.oj-cell span { position: absolute; left: 4px; top: 2px; font-size: 12px; color: var(--sub); }
.oj-cell.sel { border-color: var(--main); background: #FFF1DE; box-shadow: 0 0 0 3px var(--main) inset; }
.oj-cell.hit { border-color: var(--green); background: #E3F6EA; box-shadow: 0 0 0 3px var(--green) inset; }
@media (max-width: 600px) { .oj6, .oj7 { grid-template-columns: repeat(5, 1fr); } .oj { gap: 5px; } }
/* 神経衰弱 */
.sk { display: grid; gap: 10px; margin: 12px 0; }
.sk4 { grid-template-columns: repeat(4, 1fr); } .sk5 { grid-template-columns: repeat(5, 1fr); } .sk6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 600px) { .sk6 { grid-template-columns: repeat(5, 1fr); } .sk { gap: 6px; } }
.sk-card { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; border: 0; padding: 0; cursor: pointer; background: transparent; perspective: 600px; }
.sk-card > span { position: absolute; inset: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; transition: transform .35s; overflow: hidden; }
.sk-back { background: repeating-linear-gradient(45deg, #F08A24 0 10px, #F5A65B 10px 20px); color: #fff; font-size: 30px; font-weight: 900; border: 3px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.sk-face { background: #fff; border: 3px solid var(--line); transform: rotateY(180deg); }
.sk-face svg { width: 90%; height: 90%; } .sk-face img { width: 100%; height: 100%; object-fit: cover; }
.sk-card.up .sk-back, .sk-card.done .sk-back { transform: rotateY(180deg); }
.sk-card.up .sk-face, .sk-card.done .sk-face { transform: rotateY(360deg); }
.sk-card.done .sk-face { border-color: var(--green); }
.sk-stat { font-size: 17px; margin-left: 8px; }
@media print { .oj-cell { border: 1px solid #999; } .oj-cell.hit { background: #ddd; } }
/* ===== こどもコーナー ===== */
body.kids { --bg: #FFF6FA; --main: #FF7FA8; --main-deep: #D63F74; --line: #FFDCE8; --green: #3FB57A; background: var(--bg) radial-gradient(circle at 20px 20px, #FFE3EE 3px, transparent 4px) 0 0 / 40px 40px; }
body.kids h1 { color: #D63F74; }
body.kids .lead { font-size: 20px; }
.k-parade { width: 100%; height: auto; display: block; margin: 6px 0; }
.k-menu { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.k-menu a { display: block; text-align: center; background: #fff; border: 3px solid var(--line); border-radius: 24px; padding: 10px 8px 12px; text-decoration: none; color: var(--ink); box-shadow: 0 5px 0 var(--line); }
.k-menu a:hover { border-color: var(--main); transform: translateY(-2px); }
.k-menu .k-ico { width: 84px; height: 84px; display: block; margin: 0 auto; }
.k-menu b { display: block; font-size: 19px; color: #D63F74; }
.k-menu small { color: var(--sub); font-size: 13px; }
.k-grid { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.k-grid a { display: block; background: #fff; border: 3px solid var(--line); border-radius: 18px; padding: 6px; text-align: center; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 14px; }
.k-grid svg { width: 100%; height: 110px; display: block; }
.note { font-size: 14px; color: var(--sub); }
.mg.is-kids figure { background: #fff; }
.kmaze { max-width: 680px; }
/* なぞりがき */
.trace { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.tr-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tr-box { position: relative; width: 74px; height: 74px; background: #fff; border: 2px solid #F3A6C0; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font: 600 58px/1 "Klee One", "Hiragino Mincho ProN", serif; touch-action: none;
  background-image: linear-gradient(#F7C9D8, #F7C9D8), linear-gradient(#F7C9D8, #F7C9D8); background-size: 100% 1px, 1px 100%; background-position: center; background-repeat: no-repeat; }
.tr-box.is-model { color: #3A3330; background-color: #FFF1F6; }
.tr-box.is-trace { color: #D9D2CE; }
.tr-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tr-word { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 700; margin-left: 6px; }
.tr-word .k-ico { width: 40px; height: 40px; }
@media (max-width: 600px) { .tr-box { width: 50px; height: 50px; font-size: 40px; } .tr-word { width: 100%; margin: 0; } }
@media print { .tr-box { width: 2.3cm; height: 2.3cm; font-size: 1.8cm; } .tr-box canvas { display: none; } .trace { gap: 4mm; } }
/* かず */
.k-count { width: 100%; max-width: 480px; height: auto; display: block; margin: 6px auto; background: #fff; border-radius: 14px; }
.k-shiki { display: inline-block; font-size: 26px; font-weight: 900; color: #D63F74; margin-top: 4px; }
body.kids .choices button { font-size: 26px; font-weight: 900; }
/* ぬりえ */
.np { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 6px 0; }
.np-c { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #ccc; cursor: pointer; font-size: 20px; }
.np-c.on { box-shadow: 0 0 0 4px #3A3330; transform: scale(1.1); }
.np-w { background: #fff; }
.nurie-k svg { width: 100%; max-width: 620px; height: auto; display: block; margin: 0 auto; background: #fff; border-radius: 16px; }
.nurie-k .fr { cursor: pointer; }
@media print { .np { display: none; } .nurie-k svg { max-height: 24cm; width: auto; } }
/* てんつなぎ */
.ts-box svg { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; background: #fff; border-radius: 16px; }
.ts-dot circle { fill: #3A3330; }
.ts-dot text { fill: #3A3330; font-weight: 700; font-family: sans-serif; }
.ts-dot.nx circle { fill: #FF7FA8; r: 8; }
.ts-dot.on circle { fill: #D63F74; }
.ts-line { stroke: #D63F74; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ts .ts-done { opacity: 0; transition: opacity .8s; }
.ts.is-done .ts-done { opacity: 1; }
.ts.is-done .ts-dot { opacity: .25; }
.ts.miss { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media print { .ts-dot.nx circle { fill: #3A3330; } }
/* しんけいすいじゃく・おなじえ（こども） */
.sk3 { grid-template-columns: repeat(3, 1fr); max-width: 520px; margin-left: auto; margin-right: auto; }
.sk.is-kids .sk-back { background: repeating-linear-gradient(45deg, #FF7FA8 0 10px, #FFA9C5 10px 20px); }
.oj3 { grid-template-columns: repeat(3, 1fr); max-width: 520px; margin-left: auto; margin-right: auto; }
.oj.is-kids .oj-cell { border-radius: 18px; }