/* くいずん算数 (2026-11-02 ・ sansu/*.php ・ benkyo/ ・ js/qzn_sansu.js) */
.sz-wrap { --sz-blue: #0284C7; --sz-blue-l: #E0F2FE; --sz-green: #16A34A; --sz-green-l: #DCFCE7; --sz-orange: #EA580C; --sz-orange-l: #FFEDD5; --sz-ink: #0F172A; --sz-ink2: #334155; --sz-line: #E2E8F0;
	max-width: 760px; margin: 0 auto; padding: 4px 16px 28px; color: var(--sz-ink); word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.sz-wrap p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.85; color: var(--sz-ink2); }
.sz-wrap b { color: var(--sz-ink); }
.sz-wrap h1, .sz-wrap h2 { font-feature-settings: "palt"; }
.sz-wrap .f, .sz-wrap .nw { white-space: nowrap; }

/* 表紙 (短く ・ 題 + 1 行 + すぐ 動かす ボタン) */
.sz-hero { position: relative; overflow: hidden; margin: 6px 0 12px; padding: 18px 16px 16px; border-radius: 22px; background: linear-gradient(135deg, #0EA5E9 0%, #2563EB 55%, #4F46E5 100%); color: #fff; }
.sz-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 88% 12%, rgba(255,255,255,.25), transparent 45%), radial-gradient(circle at 8% 110%, rgba(255,255,255,.18), transparent 40%); pointer-events: none; }
.sz-hero .art { position: relative; z-index: 1; float: right; display: flex; align-items: flex-end; margin: -4px -6px 4px 8px; padding-bottom: 12px; pointer-events: none; }
.sz-hero .art span { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 6px 14px rgba(15,23,42,.18); }
.sz-hero .art .tu { margin-left: -14px; transform: translateY(12px); }
.sz-hero .art svg { width: 56px; height: 56px; }
.sz-hero .k { position: relative; display: inline-block; padding: 4px 11px; border-radius: 999px; background: rgba(15,23,42,.24); font-size: 12px; font-weight: 900; letter-spacing: .04em; }
.sz-hero h1 { position: relative; margin: 10px 0 6px; font-size: 34px; font-weight: 900; line-height: 1.2; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.sz-hero p { position: relative; margin: 0 0 8px; font-size: 15px; font-weight: 800; line-height: 1.7; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.sz-hero .lead { font-size: 16.5px; line-height: 1.6; }
.sz-hero .meta { margin: 0; font-size: 12.5px; font-weight: 800; color: rgba(255,255,255,.9); text-shadow: none; }
.sz-cta { position: relative; clear: both; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; margin: 14px 0 0; border-radius: 16px; background: #fff; box-shadow: 0 4px 0 #1E3A8A; color: #1D4ED8; font-size: 17px; font-weight: 900; text-decoration: none; }
.sz-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #1E3A8A; }
.sz-hero .facts { position: relative; clear: both; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.sz-hero .facts span { padding: 4px 11px; border-radius: 999px; background: #fff; color: #1E3A8A; font-size: 12.5px; font-weight: 900; white-space: nowrap; }

/* もくじ (スタンプを 取った 所に ✓) */
.sz-toc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
.sz-toc a { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 8px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--sz-line); color: var(--sz-ink); font-size: 13px; font-weight: 800; text-decoration: none; line-height: 1.3; white-space: nowrap; }
.sz-toc a b { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sz-blue); color: #fff; font-size: 12px; }
/* 判子 ・ 済んだ ところは 番号が 朱色の 判子に */
.sz-toc a.done { background: #FFF7F7; box-shadow: inset 0 0 0 1.5px #FECACA; }
.sz-toc a.done b { width: 26px; height: 26px; margin: -2px 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 40%, #FFE4E6 100%); box-shadow: inset 0 0 0 2px #DC2626, inset 0 0 0 3.5px #fff, inset 0 0 0 4.5px #DC2626; color: #DC2626; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 13.5px; font-weight: 900; transform: rotate(-12deg); }
.sz-toc a.pop b { animation: szHanko .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes szHanko { 0% { transform: rotate(-12deg) scale(2.4); opacity: 0; } 60% { transform: rotate(-12deg) scale(.9); opacity: 1; } 100% { transform: rotate(-12deg) scale(1); } }
/* スタンプの 進み具合 (細い 帯) */
.sz-stamps { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 8px 12px; border-radius: 14px; background: #FFFBEB; box-shadow: inset 0 0 0 1.5px #FDE68A; }
.sz-stamps .tx { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.sz-stamps .tx b { font-size: 13.5px; font-weight: 900; color: #78350F; }
.sz-stamps .tx small { font-size: 11.5px; font-weight: 800; color: #92400E; }
.sz-stamps .dots { flex: none; margin-left: auto; display: flex; gap: 3px; }
.sz-stamps .dots i { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #FCD34D; color: #B08A2E; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 10px; font-style: normal; font-weight: 900; }
.sz-stamps .dots i.on { background: #FFF1F2; box-shadow: inset 0 0 0 1.8px #DC2626; color: #DC2626; transform: rotate(-12deg); }
.sz-stamps.all { position: relative; overflow: hidden; padding: 10px 12px; background: linear-gradient(135deg, #FEF3C7, #FDE68A); box-shadow: inset 0 0 0 2px #F59E0B; }
.sz-stamps.all .tx { flex: 1; }
.sz-stamps.all .tx b { font-size: 15px; }
.hk.big { flex: none; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: #FFF1F2; box-shadow: inset 0 0 0 3px #DC2626, inset 0 0 0 5px #FFF1F2, inset 0 0 0 6.5px #DC2626; transform: rotate(-12deg); animation: szHanko .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.hk.big b { color: #DC2626; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 10px; letter-spacing: -.02em; font-weight: 900; line-height: 1.25; text-align: center; }

/* 箱 */
.sz-card { margin: 0 0 14px; padding: 18px 16px 16px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.06), inset 0 0 0 1px var(--sz-line); scroll-margin-top: 70px; }
.sz-card h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 20px; font-weight: 900; line-height: 1.35; color: var(--sz-ink); }
.sz-card h2 i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg, #0EA5E9, #2563EB); color: #fff; font-size: 15px; font-style: normal; }
.sz-q { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: #F8FAFC; border-left: 4px solid var(--sz-blue); font-size: 15.5px; font-weight: 800; line-height: 1.75; }
.sz-note { font-size: 13.5px !important; color: #64748B !important; }

/* 星 */
.stars { display: inline-flex; gap: 2px; line-height: 1; }
.stars i { font-style: normal; font-size: 13px; color: #CBD5E1; }
.stars i.on { color: #F59E0B; }
.stars.big { display: flex; justify-content: center; gap: 6px; }
.stars.big i { font-size: 36px; }
.stars.big i.on { text-shadow: 0 2px 0 #B45309; animation: szStar .5s ease both; }
.stars.big i.on:nth-child(2) { animation-delay: .15s; } .stars.big i.on:nth-child(3) { animation-delay: .3s; }
@keyframes szStar { from { transform: scale(.2) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* 1. 動かしてみよう (ステージ) */
.sz-toy, .sz-ttoy { position: relative; margin: 12px 0 0; padding: 10px; border-radius: 16px; background: linear-gradient(180deg, #F0F9FF, #ECFDF5); box-shadow: inset 0 0 0 1px #BAE6FD; overflow: hidden; scroll-margin-top: 70px; }
.sz-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
.sz-stage .tb { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 48px; padding: 6px 4px; border: 0; border-radius: 12px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px #BAE6FD; font: inherit; color: #475569; cursor: pointer; touch-action: manipulation; }
.sz-stage .tb b { font-size: 13px; font-weight: 900; color: inherit; white-space: nowrap; }
.sz-stage .tb.on { background: #fff; box-shadow: inset 0 0 0 2px var(--sz-blue), 0 2px 0 #7DD3FC; color: #075985; }
.sz-toy-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 8px; }
.sz-toy-top .c { padding: 6px 4px; border-radius: 12px; background: #fff; text-align: center; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.sz-toy-top small { display: block; font-size: 11.5px; font-weight: 800; color: #64748B; white-space: nowrap; }
.sz-toy-top b { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sz-toy-top .g b { color: var(--sz-blue); }
.sz-toy-top .df b { color: var(--sz-orange); font-size: 17px; }
.sz-toy-top.ok .now, .sz-toy-top.ok .df { background: var(--sz-green-l); }
.sz-toy-top.ok .df b, .sz-toy-top.ok .now b { color: var(--sz-green); }
.sz-toy-top.over .df b { color: #DC2626; }
.sz-pred { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; padding: 8px 10px; border-radius: 12px; background: #FFFBEB; box-shadow: inset 0 0 0 1px #FDE68A; }
.sz-pred .q { flex: 1 1 auto; font-size: 13.5px; font-weight: 900; color: #78350F; }
.sz-pred .ch { display: flex; gap: 6px; }
.sz-pred .pg { min-width: 58px; min-height: 36px; padding: 4px 8px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px #FCD34D, 0 2px 0 #FCD34D; font: inherit; font-size: 14px; font-weight: 900; color: #92400E; cursor: pointer; touch-action: manipulation; }
.sz-pred .pg.on { background: #F59E0B; box-shadow: 0 2px 0 #B45309; color: #fff; }
.sz-pred.lock { opacity: .75; }
.sz-pred.lock .pg:not(.on) { cursor: default; }
.sz-field { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 6px; padding-top: 4px; }
.sz-ani { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 4px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 #CBD5E1, inset 0 0 0 1.5px #E2E8F0; cursor: pointer; font: inherit; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .12s; }
.sz-ani:active { transform: translateY(2px); box-shadow: 0 0 0 #CBD5E1, inset 0 0 0 1.5px #E2E8F0; }
.sz-ani.tu { background: #F0FDF4; box-shadow: 0 2px 0 #86EFAC, inset 0 0 0 1.5px #BBF7D0; }
.sz-ani .pic { display: block; width: 100%; max-width: 56px; aspect-ratio: 1; }
.sz-ani .pic svg { width: 100%; height: 100%; display: block; }
.sz-ani .lg { font-size: 11.5px; font-weight: 900; color: #475569; white-space: nowrap; }
.sz-ani.tu .lg { color: var(--sz-green); }
.sz-ani.flip .pic { animation: szFlip .34s ease; }
.sz-ani.hint { z-index: 1; animation: szHint 1.4s ease-in-out infinite; }
.sz-ani.hint::after { content: ""; position: absolute; right: -7px; top: -7px; width: 26px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 12.2V4.6a1.6 1.6 0 0 1 3.2 0v5.6a1.6 1.6 0 0 1 3.1.5v.5a1.6 1.6 0 0 1 3 .7v.6a1.5 1.5 0 0 1 2.6 1v3.4a6.3 6.3 0 0 1-6.3 6.3h-1.6a5.4 5.4 0 0 1-4.3-2.2l-3.6-4.9a1.6 1.6 0 0 1 2.4-2.1l1.5 1.6z' fill='%23fff' stroke='%230F172A' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 2px 2px rgba(15,23,42,.25)); pointer-events: none; animation: szTap 1.4s ease-in-out infinite; }
.sz-field.c6 .sz-ani.hint::after { width: 21px; height: 21px; right: -5px; top: -6px; }
@keyframes szTap { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(-3px, 4px) scale(.92); } }
@keyframes szHint { 0%, 100% { box-shadow: 0 2px 0 #CBD5E1, inset 0 0 0 2px var(--sz-blue), 0 0 0 0 rgba(2,132,199,.45); } 50% { box-shadow: 0 2px 0 #CBD5E1, inset 0 0 0 2px var(--sz-blue), 0 0 0 7px rgba(2,132,199,0); } }
@keyframes szFlip { 0% { transform: scale(1) rotateY(0); } 45% { transform: scale(.7) rotateY(90deg); } 100% { transform: scale(1) rotateY(0); } }
.sz-field.win .sz-ani { animation: szHop .5s ease both; }
.sz-field.win .sz-ani:nth-child(odd) { animation-delay: .08s; }
@keyframes szHop { 40% { transform: translateY(-8px); } }
.sz-pop { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); padding: 2px 7px; border-radius: 999px; background: var(--sz-orange); color: #fff; font-size: 12px; font-weight: 900; white-space: nowrap; pointer-events: none; animation: szPop .9s ease forwards; }
.sz-pop.dn { background: #64748B; }
@keyframes szPop { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); } 20% { opacity: 1; transform: translate(-50%, -6px) scale(1.08); } 70% { opacity: 1; transform: translate(-50%, -16px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -24px); } }
.sz-toy-msg { min-height: 52px; margin: 10px 0 8px !important; padding: 9px 12px; border-radius: 12px; background: #fff; font-size: 14.5px !important; font-weight: 700; line-height: 1.7 !important; color: var(--sz-ink) !important; }
.sz-toy-msg.ok { padding: 12px; background: var(--sz-green-l); box-shadow: inset 0 0 0 1.5px #86EFAC; text-align: center; }
.sz-toy-msg.warn { background: #FEF2F2; box-shadow: inset 0 0 0 1.5px #FECACA; }
.sz-toy-msg .tl { display: block; margin: 6px 0 2px; font-size: 15.5px; }
.sz-toy-msg .why { display: block; font-size: 12.5px; font-weight: 800; line-height: 1.6; color: #166534; }
.sz-toy-msg .nx { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 0; }
.sz-toy-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sz-toy-bar .cnt { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; font-weight: 800; color: var(--sz-ink2); }
.sz-toy-bar .cnt b { font-size: 16px; font-variant-numeric: tabular-nums; }
.sz-toy-bar .cnt .mv { color: #64748B; }

/* ボタン */
.sz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 18px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #0EA5E9, #0284C7); box-shadow: 0 3px 0 #075985; color: #fff; font: inherit; font-size: 15px; font-weight: 900; text-decoration: none; cursor: pointer; touch-action: manipulation; }
.sz-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #075985; }
.sz-btn.sub { min-height: 40px; padding: 6px 14px; background: #fff; box-shadow: inset 0 0 0 1.5px #CBD5E1, 0 2px 0 #CBD5E1; color: var(--sz-ink2); font-size: 13.5px; }

/* 2. 解き方 */
.sz-steps { counter-reset: st; list-style: none; margin: 0; padding: 0; }
.sz-steps li { counter-increment: st; position: relative; margin: 0 0 10px; padding: 12px 14px 6px 54px; border-radius: 14px; background: #F8FAFC; box-shadow: inset 0 0 0 1px var(--sz-line); }
.sz-steps li::before { content: counter(st); position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sz-blue); color: #fff; font-size: 16px; font-weight: 900; }
.sz-steps li > b { display: block; margin: 3px 0 4px; font-size: 16px; }
.sz-steps li > p { margin-bottom: 8px; }
.sz-steps li.ans { background: var(--sz-green-l); box-shadow: inset 0 0 0 1.5px #86EFAC; }
.sz-steps li.ans::before { content: "答"; background: var(--sz-green); font-size: 14px; }
.sz-steps li.in { animation: szIn .35s ease; }
@keyframes szIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sz-stepbtn { display: flex; width: 100%; margin: 4px 0 8px; }
.chk { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 8px; background: rgba(255,255,255,.75); font-size: 13.5px; font-weight: 800; color: #166534; }
/* ステップの 図 */
.sz-vis { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; margin: 2px 0 8px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--sz-line); }
.sz-vis .row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; width: 100%; max-width: 360px; }
.sz-vis .row i { display: block; aspect-ratio: 1; }
.sz-vis .row svg { display: block; width: 100%; height: 100%; }
.sz-vis .eq { padding: 3px 10px; border-radius: 999px; background: var(--sz-blue-l); font-size: 13.5px; font-weight: 900; color: #075985; white-space: nowrap; }
.sz-vis .eq b { color: #C2410C; }
.sz-vis.gap { flex-wrap: nowrap; gap: 0; }
.sz-vis.gap .g { display: grid; place-items: center; min-height: 38px; padding: 0 6px; font-size: 13.5px; font-weight: 900; white-space: nowrap; }
.sz-vis.gap .g.a { flex: 5; border-radius: 10px 0 0 10px; background: #7DD3FC; box-shadow: inset 0 0 0 1.5px var(--sz-blue); color: #0C4A6E; }
.sz-vis.gap .g.d { flex: 2; border-radius: 0 10px 10px 0; background: repeating-linear-gradient(-45deg, #FFEDD5 0 6px, #fff 6px 12px); box-shadow: inset 0 0 0 2px var(--sz-orange); color: #9A3412; font-size: 12px; }
.sz-vis.swap i { display: block; width: 52px; height: 52px; }
.sz-vis.swap i svg { width: 100%; height: 100%; display: block; }
.sz-vis.swap .ar { font-size: 22px; font-weight: 900; color: var(--sz-orange); }
.sz-vis.swap .eq { background: var(--sz-orange-l); color: #9A3412; }
.sz-point { margin: 12px 0 0; padding: 12px 14px 4px; border-radius: 14px; background: #FFFBEB; box-shadow: inset 0 0 0 1.5px #FDE68A; }
.sz-point > b { display: inline-block; margin: 0 0 4px; padding: 2px 10px; border-radius: 999px; background: #B45309; color: #fff !important; font-size: 12.5px; }
.sz-point p { margin: 0 0 8px; color: #78350F; }
.sz-point.warn { background: #FEF2F2; box-shadow: inset 0 0 0 1.5px #FECACA; }
.sz-point.warn > b { background: #DC2626; }
.sz-point.warn p { color: #7F1D1D; }
.sz-point.sm p { font-size: 14.5px; }

/* 3. 面積図 (青 = 全部 A なら ・ オレンジ = ふえた 分 ・ 点線 = うめる わく) */
.sz-area { position: relative; overflow: hidden; margin: 12px 0; padding: 10px 10px 12px; border-radius: 16px; background: #F8FAFC; box-shadow: inset 0 0 0 1px var(--sz-line); }
.sz-area-svg { max-width: 460px; margin: 0 auto; padding: 4px 0 0; border-radius: 12px; background: #fff; transition: box-shadow .2s, background .2s; }
.sz-area-svg.ok { box-shadow: 0 0 0 3px #86EFAC; background: #F0FDF4; }
.sz-area-svg svg { display: block; width: 100%; height: auto; }
.sz-area-svg .ax { stroke: #64748B; stroke-width: 1.5; }
.sz-area-svg .ra { fill: #7DD3FC; stroke: #0284C7; stroke-width: 1.5; }
.sz-area-svg .rx { fill: #FB923C; stroke: #C2410C; stroke-width: 2.2; }
.sz-area-svg .goal { fill: rgba(251,146,60,.12); stroke: #EA580C; stroke-width: 2; stroke-dasharray: 6 4; animation: szGoal 1.6s ease-in-out infinite; }
@keyframes szGoal { 50% { fill: rgba(251,146,60,.28); } }
.sz-area-svg .sp { stroke: #C2410C; stroke-width: 2; }
.sz-area-svg .in { font-size: 13.5px; font-weight: 900; fill: #0C4A6E; text-anchor: middle; }
.sz-area-svg .in.x { fill: #fff; font-size: 15px; }
.sz-area-svg .in.g { fill: #C2410C; font-size: 12px; }
.sz-area-svg .tk { font-size: 12px; font-weight: 900; fill: #475569; text-anchor: end; }
.sz-area-svg .bl { font-size: 12.5px; font-weight: 900; fill: #0369A1; text-anchor: middle; }
.sz-area-svg .bl.b { fill: #C2410C; }
.sz-area-svg .bl.s { font-size: 12.5px; font-weight: 800; fill: #475569; }
.sz-area.fix .sz-area-svg .in { font-size: 16px; } .sz-area.fix .sz-area-svg .in.x { font-size: 17px; }
.sz-area.fix .sz-area-svg .bl { font-size: 15px; } .sz-area.fix .sz-area-svg .bl.s { font-size: 14.5px; } .sz-area.fix .sz-area-svg .tk { font-size: 15px; }
.sz-area-ctl { display: flex; align-items: center; gap: 10px; max-width: 460px; margin: 10px auto 0; font-size: 14px; font-weight: 900; }
.sz-area-ctl span { flex: none; color: #C2410C; }
.sz-area-ctl input { flex: 1; min-width: 0; height: 36px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
.sz-area-ctl input::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #FB923C 0 var(--p, 0%), #FFEDD5 var(--p, 0%) 100%); box-shadow: inset 0 0 0 1.5px #FDBA74; }
.sz-area-ctl input::-moz-range-track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #FB923C 0 var(--p, 0%), #FFEDD5 var(--p, 0%) 100%); box-shadow: inset 0 0 0 1.5px #FDBA74; }
.sz-area-ctl input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 36px; height: 36px; margin-top: -12px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' aria-hidden='true'%3E%3Cg fill='%234D7C0F'%3E%3Crect x='22.5' y='39' width='6' height='12.5' rx='3'/%3E%3Crect x='43' y='39' width='6' height='12.5' rx='3'/%3E%3C/g%3E%3Cg fill='%2365A30D' stroke='%233F6212' stroke-width='1'%3E%3Crect x='15.5' y='41' width='7.5' height='14' rx='3.6'/%3E%3Crect x='36' y='41' width='7.5' height='14' rx='3.6'/%3E%3C/g%3E%3Cpath d='M52.5 39.5 L59 42.6 L52.5 44.6 Z' fill='%2365A30D'/%3E%3Ccircle cx='10.5' cy='35.5' r='7.2' fill='%2384CC16' stroke='%233F6212' stroke-width='1.2'/%3E%3Ccircle cx='8.4' cy='34' r='1.4' fill='%230F172A'/%3E%3Ccircle cx='8.8' cy='33.5' r='.45' fill='%23fff'/%3E%3Cpath d='M5.4 38.2 Q7.6 39.6 9.8 38.4' stroke='%233F6212' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12.5 42 C12.5 26.5 22.5 18.5 33.5 18.5 C44.5 18.5 54.5 26.5 54.5 42 Z' fill='%2316A34A' stroke='%2314532D' stroke-width='1.6'/%3E%3Cg fill='none' stroke='%2386EFAC' stroke-width='1.5' stroke-linejoin='round' opacity='.9'%3E%3Cpath d='M28 24 L39 24 L43 31.5 L39 39 L28 39 L24 31.5 Z'/%3E%3Cpath d='M24 31.5 L16 31.5 M43 31.5 L51 31.5 M28 24 L25 20.5 M39 24 L42 20.5'/%3E%3C/g%3E%3Crect x='10.5' y='40' width='46' height='5' rx='2.5' fill='%23FDE047' stroke='%23A16207' stroke-width='1'/%3E%3C/svg%3E") center / 28px no-repeat; box-shadow: 0 0 0 3px #EA580C, 0 3px 6px rgba(15,23,42,.25); }
.sz-area-ctl input::-moz-range-thumb { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' aria-hidden='true'%3E%3Cg fill='%234D7C0F'%3E%3Crect x='22.5' y='39' width='6' height='12.5' rx='3'/%3E%3Crect x='43' y='39' width='6' height='12.5' rx='3'/%3E%3C/g%3E%3Cg fill='%2365A30D' stroke='%233F6212' stroke-width='1'%3E%3Crect x='15.5' y='41' width='7.5' height='14' rx='3.6'/%3E%3Crect x='36' y='41' width='7.5' height='14' rx='3.6'/%3E%3C/g%3E%3Cpath d='M52.5 39.5 L59 42.6 L52.5 44.6 Z' fill='%2365A30D'/%3E%3Ccircle cx='10.5' cy='35.5' r='7.2' fill='%2384CC16' stroke='%233F6212' stroke-width='1.2'/%3E%3Ccircle cx='8.4' cy='34' r='1.4' fill='%230F172A'/%3E%3Ccircle cx='8.8' cy='33.5' r='.45' fill='%23fff'/%3E%3Cpath d='M5.4 38.2 Q7.6 39.6 9.8 38.4' stroke='%233F6212' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12.5 42 C12.5 26.5 22.5 18.5 33.5 18.5 C44.5 18.5 54.5 26.5 54.5 42 Z' fill='%2316A34A' stroke='%2314532D' stroke-width='1.6'/%3E%3Cg fill='none' stroke='%2386EFAC' stroke-width='1.5' stroke-linejoin='round' opacity='.9'%3E%3Cpath d='M28 24 L39 24 L43 31.5 L39 39 L28 39 L24 31.5 Z'/%3E%3Cpath d='M24 31.5 L16 31.5 M43 31.5 L51 31.5 M28 24 L25 20.5 M39 24 L42 20.5'/%3E%3C/g%3E%3Crect x='10.5' y='40' width='46' height='5' rx='2.5' fill='%23FDE047' stroke='%23A16207' stroke-width='1'/%3E%3C/svg%3E") center / 26px no-repeat; box-shadow: 0 0 0 3px #EA580C, 0 3px 6px rgba(15,23,42,.25); }
.sz-area-ctl input:focus-visible { outline: none; }
.sz-area-ctl input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #EA580C, 0 0 0 7px rgba(234,88,12,.25); }
.sz-area-ctl b { flex: none; min-width: 56px; padding: 3px 8px; border-radius: 8px; background: var(--sz-orange-l); color: #9A3412; text-align: center; font-variant-numeric: tabular-nums; }
.sz-area-leg { display: grid; gap: 5px; max-width: 460px; margin: 10px auto 0; }
.sz-area-leg > span { display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sz-area-leg > span > i { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.sz-area-leg > span > span { min-width: 0; }
.sz-area-leg .f { margin-left: .35em; }
.sz-area-leg .tot .f { margin-left: 0; }
.sz-area-leg .ca { background: var(--sz-blue-l); color: #075985; }
.sz-area-leg .ca i { background: #7DD3FC; box-shadow: inset 0 0 0 1.5px #0284C7; }
.sz-area-leg .cx { background: var(--sz-orange-l); color: #9A3412; }
.sz-area-leg .cx i { background: #FB923C; box-shadow: inset 0 0 0 1.5px #C2410C; }
.sz-area-leg .tot { flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--sz-line); color: var(--sz-ink); }
.sz-area-leg .tot b { font-size: 15px; color: inherit; }
.sz-area-leg .tot small { font-size: 12.5px; font-weight: 800; color: #475569; }
.sz-area-leg .tot.ok { background: var(--sz-green-l); box-shadow: inset 0 0 0 1.5px #86EFAC; color: #166534; }
.sz-area-leg .tot.ok small { padding: 1px 8px; border-radius: 999px; background: #16A34A; color: #fff; }

/* 線分図 (弁償) */
.sz-bar { margin: 6px 0 10px; padding: 10px 12px 8px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--sz-line); }
.sz-bar .cap { margin: 0 0 4px; font-size: 13px; font-weight: 900; color: #075985; }
.sz-bar .b { display: flex; height: 32px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1.5px #0284C7; }
.sz-bar .b .ok { display: grid; place-items: center; background: #7DD3FC; font-size: 12.5px; font-weight: 900; color: #0C4A6E; white-space: nowrap; }
.sz-bar .b .ng { flex: 1; background: repeating-linear-gradient(-45deg, #FECACA 0 6px, #fff 6px 12px); box-shadow: inset 2px 0 0 #DC2626; }
.sz-bar .ngl { display: flex; justify-content: flex-end; margin: 4px 0 0; }
.sz-bar .ngl span { padding: 2px 8px; border-radius: 6px; background: #FEF2F2; font-size: 12.5px; font-weight: 900; color: #B91C1C; text-align: right; }

/* 4. 例題 */
.sz-ex { margin: 14px 0 0; padding: 14px 14px 12px; border-radius: 16px; background: #FCFDFE; box-shadow: inset 0 0 0 1.5px var(--sz-line); }
.sz-ex .hd { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.sz-ex .hd b { font-size: 16px; line-height: 1.4; }
.lv { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; color: #fff; }
.lv.l1 { background: #15803D; } .lv.l2 { background: #B45309; } .lv.l3 { background: #BE123C; }
.sz-rv { margin: 8px 0 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px #CBD5E1; overflow: hidden; }
.sz-rv > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; cursor: pointer; font-size: 14.5px; font-weight: 900; color: #0369A1; list-style: none; }
.sz-rv > summary::-webkit-details-marker { display: none; }
.sz-rv > summary::before { content: "？"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sz-blue-l); color: var(--sz-blue); font-size: 13px; }
.sz-rv > summary::after { content: "▼"; margin-left: auto; font-size: 11px; color: #94A3B8; transition: transform .2s; }
.sz-rv[open] > summary::after { transform: rotate(180deg); }
.sz-rv.hint > summary { color: #92400E; }
.sz-rv.hint > summary::before { content: "？"; background: #FEF3C7; color: #B45309; }
.sz-rv.how > summary::before { content: "✎"; }
.sz-rv.ans > summary { color: #15803D; }
.sz-rv.ans > summary::before { content: "答"; background: var(--sz-green-l); color: var(--sz-green); }
.sz-rv.ans[open] { box-shadow: inset 0 0 0 2px #86EFAC; }
.sz-rv > :not(summary) { margin-left: 14px; margin-right: 14px; }
.sz-rv[open] > :last-child { margin-bottom: 12px; }
.sz-rv .sub { margin-top: 6px; margin-bottom: 4px; font-size: 13.5px; font-weight: 900; color: #475569; }
.sz-mini { margin: 4px 0 8px 14px; padding: 0 0 0 18px; }
.sz-mini li { margin: 0 0 4px; font-size: 15px; line-height: 1.75; color: var(--sz-ink2); }
.sz-rv .sz-area { margin: 6px 14px 10px; }

/* 5. よくある間違い (× と ○ を 並べる) */
.sz-miss { list-style: none; margin: 0; padding: 0; }
.sz-miss li { position: relative; margin: 0 0 10px; padding: 12px 14px 10px 50px; border-radius: 14px; background: #FFF7ED; box-shadow: inset 0 0 0 1px #FED7AA; }
.sz-miss li::before { content: "!"; position: absolute; left: 13px; top: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sz-orange); color: #fff; font-weight: 900; }
.sz-miss li > b { display: block; margin: 2px 0 4px; font-size: 15.5px; }
.sz-miss p { font-size: 14.5px; margin-bottom: 8px; }
.xo { display: grid; gap: 5px; }
.xo > span { position: relative; padding: 6px 10px 6px 34px; border-radius: 10px; font-size: 14px; font-weight: 800; line-height: 1.6; }
.xo > span::before { position: absolute; left: 9px; top: 7px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 900; }
.xo .x { background: #fff; box-shadow: inset 0 0 0 1px #FECACA; color: #7F1D1D; }
.xo .x::before { content: "×"; background: #DC2626; }
.xo .o { background: #F0FDF4; box-shadow: inset 0 0 0 1px #86EFAC; color: #14532D; }
.xo .o::before { content: "○"; background: var(--sz-green); }

/* 6. 練習 */
.sz-quiz { position: relative; margin: 10px 0 0; scroll-margin-top: 70px; }
.sz-qz { margin: 0 0 12px; padding: 14px; border-radius: 16px; background: #F8FAFC; box-shadow: inset 0 0 0 1px var(--sz-line); }
.sz-qz .qn { display: inline-block; margin: 0 0 6px; padding: 2px 10px; border-radius: 999px; background: #1E3A8A; color: #fff; font-size: 12.5px; font-weight: 900; }
.sz-qz .qt { margin: 0 0 12px; font-size: 16px; font-weight: 800; line-height: 1.75; }
.sz-qz .cs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sz-c { min-height: 54px; padding: 8px 6px; border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 2px #CBD5E1, 0 3px 0 #CBD5E1; color: var(--sz-ink); font: inherit; font-size: 17px; font-weight: 900; cursor: pointer; touch-action: manipulation; }
.sz-c:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 0 0 2px #CBD5E1, 0 1px 0 #CBD5E1; }
.sz-c:disabled { cursor: default; opacity: .6; }
.sz-c.right { opacity: 1; background: var(--sz-green-l); box-shadow: inset 0 0 0 2.5px var(--sz-green), 0 3px 0 #15803D; color: #166534; }
.sz-c.wrong { opacity: 1; background: #FEF2F2; box-shadow: inset 0 0 0 2.5px #EF4444, 0 3px 0 #B91C1C; color: #991B1B; animation: szShake .35s; }
@keyframes szShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.sz-qz .exp { margin: 12px 0 0; padding: 12px 14px 4px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--sz-line); }
.sz-qz .exp > b { display: block; margin: 0 0 4px; font-size: 15px; }
.sz-qz .exp p { font-size: 14.5px; }
.sz-qz .exp .sz-area, .sz-qz .exp .sz-bar { margin: 4px 0 10px; }
/* JS が 動く ときだけ 1 問ずつ */
.sz-quiz.on .sz-qz { margin: 0; }
.sz-qhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.sz-qhead .dots { display: flex; gap: 5px; }
.sz-qhead .dots i { width: 22px; height: 8px; border-radius: 999px; background: #E2E8F0; }
.sz-qhead .dots i.cur { background: #93C5FD; }
.sz-qhead .dots i.o { background: var(--sz-green); }
.sz-qhead .dots i.x { background: #F87171; }
.sz-qhead .sc { font-size: 13px; font-weight: 800; color: #475569; font-variant-numeric: tabular-nums; }
.sz-mark { margin: 12px 0 0; font-size: 18px; font-weight: 900; text-align: center; }
.sz-mark.o { color: var(--sz-green); } .sz-mark.x { color: #DC2626; }
.sz-mark em { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: #B45309; color: #fff; font-size: 13px; font-style: normal; vertical-align: 2px; animation: szStar .4s ease both; }
.sz-mark.o::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 6px; vertical-align: -2px; border: 3.5px solid var(--sz-green); border-radius: 50%; box-sizing: border-box; }
.sz-mark.x::before { content: "×"; margin-right: 4px; font-size: 22px; line-height: 0; }
.sz-qnext { display: flex; width: 100%; margin: 12px 0 0; }
.sz-qres { padding: 18px 14px; border-radius: 16px; background: linear-gradient(180deg, #EFF6FF, #fff); box-shadow: inset 0 0 0 1.5px #BFDBFE; text-align: center; }
.sz-qres .pt { display: block; margin: 8px 0 6px; font-size: 20px; }
.sz-qres .stamp { display: inline-grid; place-items: center; margin: 4px 0 10px; padding: 8px 16px; border: 3px solid #DC2626; border-radius: 12px; color: #DC2626; font-size: 17px; font-weight: 900; transform: rotate(-6deg); animation: szStamp .4s .4s ease both; }
.sz-qres .stamp { position: relative; }
.sz-qres .stamp.lock { animation: none; }
.sz-qres .stamp.lock { margin-bottom: 22px; }
.sz-qres .stamp em { position: absolute; right: -18px; bottom: -16px; padding: 3px 9px 3px 24px; border-radius: 999px; background: #1E293B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='7.5' rx='1.6' fill='%23fff'/%3E%3Cpath d='M5.2 7V5.2a2.8 2.8 0 0 1 5.6 0V7' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") 7px center / 13px no-repeat; color: #fff; font-size: 12px; font-style: normal; transform: rotate(6deg); }
.sz-qres .stamp.lock { opacity: 1; color: rgba(220,38,38,.45); border-color: rgba(220,38,38,.4); }
@keyframes szStamp { from { transform: rotate(-6deg) scale(2.2); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: 1; } }
.sz-qres .bt { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 0; }

/* よくある 間違い の スタンプ */
.sz-gotit { display: flex; width: 100%; margin: 4px 0 0; background: linear-gradient(180deg, #F97316, #EA580C); box-shadow: 0 3px 0 #9A3412; }
.sz-gotit.done { gap: 10px; background: #FFF7F7; box-shadow: inset 0 0 0 2px #FECACA; color: #B91C1C; cursor: default; }
.hk.sm { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #FFF1F2; box-shadow: inset 0 0 0 2px #DC2626, inset 0 0 0 3.5px #FFF1F2, inset 0 0 0 4.5px #DC2626; transform: rotate(-12deg); animation: szHanko .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.hk.sm b { color: #DC2626; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 14px; font-weight: 900; }

/* 豆知識 ・ つぎの 単元 */
.sz-soonh { margin: 0 0 6px !important; font-size: 13px !important; font-weight: 900; color: #475569 !important; }
.sz-soonl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0 0 12px; padding: 0; }
.sz-soonl li { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: #F8FAFC; box-shadow: inset 0 0 0 1px var(--sz-line); }
.sz-soonl .ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.sz-soonl .ic svg { width: 34px; height: 34px; }
.sz-soonl b { font-size: 14.5px; font-weight: 900; color: #1E293B; }
.sz-soonl i { position: absolute; right: 8px; top: 7px; padding: 0 7px; border-radius: 999px; background: #E2E8F0; font-size: 10.5px; font-style: normal; font-weight: 900; color: #334155; }
.sz-trivia { background: linear-gradient(180deg, #FFFBEB, #fff); }
.sz-nextbt { display: flex; flex-wrap: wrap; gap: 8px; }
.sz-nextbt .sz-btn { flex: 1 1 140px; }

/* 紙吹雪 */
.sz-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.sz-confetti i { position: absolute; top: -10px; width: 8px; height: 12px; border-radius: 2px; animation: szConf 1.8s ease-in forwards; }
@keyframes szConf { to { transform: translateY(520px) rotate(var(--r)); opacity: 0; } }

@media (max-width: 380px) {
	.sz-hero h1 { font-size: 30px; }
	.sz-hero .art span { width: 62px; height: 62px; } .sz-hero .art svg { width: 48px; height: 48px; }
	.sz-toc a { font-size: 12px; padding: 6px; }
	.sz-stamps .sp i { width: 36px; height: 36px; }
}
@media (min-width: 720px) {
	.sz-field { gap: 10px; }
	.sz-ani .pic { max-width: 72px; }
	.sz-hero { padding: 24px 22px 20px; }
	.sz-hero .art span { width: 92px; height: 92px; } .sz-hero .art svg { width: 72px; height: 72px; }
	.sz-cta { display: inline-flex; padding: 0 28px; }
}
@media (prefers-reduced-motion: reduce) { .sz-wrap *, .sz-wrap *::before, .sz-wrap *::after { animation: none !important; transition: none !important; } }

/* 算数の トップ ・ 単元の 一覧 */
.sz-feat { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, #ECFEFF, #F0FDF4); box-shadow: inset 0 0 0 2px #5EEAD4, 0 3px 0 #99F6E4; color: var(--sz-ink); text-decoration: none; }
.sz-feat:active { transform: translateY(2px); }
.sz-feat .pic { flex: none; display: flex; align-items: flex-end; padding-bottom: 6px; }
.sz-feat .pic span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(15,23,42,.12); }
.sz-feat .pic span + span { margin-left: -12px; transform: translateY(6px); }
.sz-feat .pic svg { width: 42px; height: 42px; }
.sz-feat .tx { flex: 1; min-width: 0; }
.sz-feat .tx small { display: block; font-size: 12px; font-weight: 900; color: #0F766E; }
.sz-feat .tx b { display: block; margin: 1px 0 3px; font-size: 21px; font-weight: 900; }
.sz-feat .tx span { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.55; color: var(--sz-ink2); }
.sz-feat .tx .go { display: inline-block; margin-top: 8px; padding: 6px 14px; border-radius: 999px; background: #0F766E; box-shadow: 0 2px 0 #134E4A; color: #fff; font-size: 14px; font-weight: 900; white-space: nowrap; }
.sz-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; counter-reset: fl; }
.sz-flow li { counter-increment: fl; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; background: #F0F9FF; box-shadow: inset 0 0 0 1px #BAE6FD; text-align: center; }
.sz-flow li { position: relative; }
.sz-flow li::before { content: counter(fl); position: absolute; left: 6px; top: 6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sz-blue); color: #fff; font-size: 11.5px; font-weight: 900; }
.sz-flow .fi { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.1); }
.sz-flow .fi svg { width: 40px; height: 40px; }
/* 算数の トップの 表紙の 絵 (単元の 絵を 3 つ) */
.sz-hero .art.hubart { display: grid; grid-template-columns: repeat(2, 54px); gap: 4px; padding-bottom: 0; }
.sz-hero .art.hubart span { width: 54px; height: 54px; }
.sz-hero .art.hubart span:first-child { grid-column: 1 / 3; justify-self: center; }
.sz-hero .art.hubart svg { width: 40px; height: 40px; }
.sz-flow li b { font-size: 14px; line-height: 1.35; }
.sz-flow li small { font-size: 12px; font-weight: 700; line-height: 1.5; color: #475569; }

/* 勉強の トップ (/benkyo/) */
.bk-h1 { margin: 10px 0 4px; font-size: 26px; font-weight: 900; }
.bk-lead { margin: 0 0 12px !important; font-size: 14.5px !important; }
.bk-cards { display: grid; gap: 10px; }
.bk-card { position: relative; display: flex; align-items: center; gap: 12px; overflow: hidden; padding: 14px; border-radius: 20px; color: #fff; text-decoration: none; box-shadow: 0 4px 0 rgba(15,23,42,.2); }
.bk-card:active { transform: translateY(2px); }
.bk-card.et { background: linear-gradient(135deg, #7C3AED, #4F46E5 60%, #2563EB); }
.bk-card.sz { background: linear-gradient(135deg, #0284C7, #0F766E 70%, #15803D); }
.bk-card .art { flex: none; position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 22px; background: rgba(255,255,255,.95); box-shadow: 0 4px 10px rgba(15,23,42,.18); }
.bk-card .art svg { display: block; }
.bk-card.sz .art .a1 { position: absolute; left: 4px; top: 6px; width: 46px; height: 46px; }
.bk-card.sz .art .a2 { position: absolute; right: 2px; bottom: 4px; width: 48px; height: 48px; }
.bk-card.et .art svg { width: 66px; height: 66px; }
.bk-card .tx { flex: 1; min-width: 0; }
.bk-card .k { display: inline-block; padding: 2px 9px; border-radius: 999px; background: rgba(15,23,42,.26); font-size: 11.5px; font-weight: 900; }
.bk-card b { display: block; margin: 5px 0 3px; font-size: 21px; font-weight: 900; color: #fff; }
.bk-card p { margin: 0 0 8px !important; font-size: 13.5px !important; font-weight: 700; line-height: 1.6 !important; color: #fff !important; }
.bk-card .ft { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.bk-card .ft span { padding: 2px 9px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 900; color: #1E293B; white-space: nowrap; }
.bk-card .gor { display: flex; justify-content: flex-end; margin-top: 8px; }
.bk-card .go { padding: 6px 14px; border-radius: 999px; background: #FDE047; box-shadow: 0 2px 0 rgba(15,23,42,.25); color: #1E293B; font-size: 13.5px; font-weight: 900; white-space: nowrap; }
@media (min-width: 720px) { .bk-cards { grid-template-columns: 1fr 1fr; } .bk-card { align-items: flex-start; } }
/* 算数の トップの 表紙 (題が 折れないように 絵を 小さく) */
.sz-hub-hero h1 { font-size: 28px; white-space: nowrap; }
.sz-hub-hero .art span { width: 60px; height: 60px; } .sz-hub-hero .art svg { width: 46px; height: 46px; }
.sz-hub-hero .art .tu { margin-left: -12px; transform: translateY(10px); }

/* ── 2026-11-03 作り直し（ゲームディレクターの レビュー）── */
.wait { display: none !important; }
.sz-js { display: none; }
.szjs .sz-js { display: inline; }
.fu.in { animation: szIn .35s ease; }
.shake { animation: szShake .35s; }

/* 数字の 穴埋め */
.blw { display: inline-flex; align-items: center; gap: 3px; margin: 0 2px; vertical-align: middle; white-space: nowrap; }
.blw input { height: 34px; padding: 0 6px; border: 0; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 2px #CBD5E1; font: inherit; font-size: 17px; font-weight: 900; color: var(--sz-ink); text-align: center; font-variant-numeric: tabular-nums; }
.blw input:disabled { background: #F1F5F9; box-shadow: inset 0 0 0 2px #E2E8F0; }
.blw.on input { box-shadow: inset 0 0 0 2.5px var(--sz-blue), 0 0 0 4px rgba(2,132,199,.15); }
.blw input:focus { outline: none; }
.blw button { display: none; height: 30px; min-width: 30px; padding: 0 7px; border: 0; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; touch-action: manipulation; }
.blw.on button { display: inline-grid; place-items: center; }
.blw .ok { background: var(--sz-blue); color: #fff; box-shadow: 0 2px 0 #075985; }
.blw .hq { background: #FEF3C7; color: #92400E; box-shadow: inset 0 0 0 1.5px #FCD34D; }
.bl.ok, .bl.rv { display: inline-block; min-width: 1.6em; margin: 0 2px; padding: 0 6px; border-radius: 8px; text-align: center; font-variant-numeric: tabular-nums; }
.szjs .bl.ok { background: var(--sz-green-l); color: #166534; box-shadow: inset 0 0 0 1.5px #86EFAC; animation: szStar .35s ease both; }
.szjs .bl.rv { background: var(--sz-orange-l); color: #9A3412; box-shadow: inset 0 0 0 1.5px #FDBA74; }
.sz-tip { display: block; margin: 8px 0 4px; padding: 8px 10px; border-radius: 10px; background: #FFFBEB; box-shadow: inset 0 0 0 1.5px #FDE68A; font-size: 14px; font-weight: 700; line-height: 1.65; color: #78350F; }
.sz-tip i { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 999px; background: #B45309; color: #fff; font-size: 11.5px; font-style: normal; font-weight: 900; vertical-align: 1px; }
.sz-tip .give { display: inline-block; margin-left: 6px; padding: 2px 10px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #FDBA74; color: #9A3412; font: inherit; font-size: 12.5px; font-weight: 900; cursor: pointer; }
.sz-mini.sz-fill li { margin-bottom: 8px; }

/* 動かしてみる ・ あと 何びき？ */
.sz-stage .tb em { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #E0F2FE; color: #075985; font-size: 10.5px; font-style: normal; vertical-align: 1px; }
.sz-stage .tb.lock { background: #F1F5F9; box-shadow: inset 0 0 0 1px #E2E8F0; color: #64748B; }
.sz-stage .tb.lock small { font-size: 10.5px; font-weight: 800; line-height: 1.3; color: #64748B; }
.sz-stage .tb.lock b::before { content: ""; display: inline-block; width: 11px; height: 12px; margin-right: 4px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='7.5' rx='1.6' fill='%2364748B'/%3E%3Cpath d='M5.2 7V5.2a2.8 2.8 0 0 1 5.6 0V7' fill='none' stroke='%2364748B' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat; }
.sz-toy-msg { margin: 0 0 8px !important; }
.sz-toy-msg .calc { display: block; margin: 4px 0; font-size: 15px; font-weight: 800; color: #14532D; }
.sz-toy-msg .calc b { color: var(--sz-green); }
.sz-toy-msg .sm { display: block; font-size: 14px; }
.sz-ask { margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background: #FFFBEB; box-shadow: inset 0 0 0 2px #FCD34D, 0 3px 0 #FDE68A; }
.sz-ask.nudge { animation: szNudge .45s ease; }
@keyframes szNudge { 30% { transform: scale(1.025); } }
.sz-ask .aq { margin: 0 0 8px !important; font-size: 15px !important; font-weight: 900; line-height: 1.6 !important; color: #78350F !important; }
.sz-ask .aq b { color: #C2410C; }
.ach { display: flex; flex-wrap: wrap; gap: 8px; }
.ach .pg, .sz-aask .pg { flex: 1 1 0; min-width: 70px; min-height: 46px; padding: 4px 8px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 2px #FCD34D, 0 3px 0 #FCD34D; font: inherit; font-size: 17px; font-weight: 900; color: #92400E; cursor: pointer; touch-action: manipulation; }
.ach .pg:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 0 0 2px #FCD34D, 0 1px 0 #FCD34D; }
.ach .pg:disabled { opacity: .6; cursor: default; }
.ain { display: flex; align-items: center; gap: 8px; }
.ain input { width: 90px; height: 46px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 2.5px #FCD34D; font: inherit; font-size: 22px; font-weight: 900; text-align: center; color: var(--sz-ink); }
.ain input:focus { outline: none; box-shadow: inset 0 0 0 2.5px #F59E0B, 0 0 0 4px rgba(245,158,11,.2); }
.ain b { font-size: 15px; color: #92400E; }
.ain .go { flex: 1; }
.sz-ask .hb { margin-top: 8px; padding: 3px 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #FCD34D; color: #92400E; font: inherit; font-size: 12.5px; font-weight: 900; cursor: pointer; }
.sz-ask .ht, .sz-aask .ht { margin: 8px 0 0 !important; padding: 7px 10px; border-radius: 10px; background: #fff; font-size: 13.5px !important; font-weight: 700; line-height: 1.6 !important; color: #78350F !important; }
.sz-field.lock .sz-ani { opacity: .9; }
.sz-field.big { gap: 4px; }
.sz-field.big .sz-ani { padding: 2px 1px; border-radius: 9px; }
.sz-field.big .sz-ani .pic { max-width: 36px; }
.sz-field.big .sz-ani.hint::after { width: 18px; height: 18px; right: -5px; top: -6px; }
.sz-toy-bar .sz-btn.sub { font-size: 12.5px; padding: 6px 12px; }

/* 面積図 ・ 面積を 出して 横を 当てる */
.sz-area-svg .hl { stroke: #EA580C; stroke-width: 1.6; stroke-dasharray: 5 4; }
.sz-aask { max-width: 460px; margin: 10px auto 0; padding: 10px 12px; border-radius: 14px; background: #FFFBEB; box-shadow: inset 0 0 0 2px #FCD34D; }
.sz-aask .aq { margin: 0 0 8px !important; font-size: 14.5px !important; font-weight: 800; line-height: 1.8 !important; color: #78350F !important; }
.sz-aask .n1 { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; background: #B45309; color: #fff; font-size: 12px; font-weight: 900; vertical-align: 1px; }
.sz-aask.fin { background: #F0FDF4; box-shadow: inset 0 0 0 2px #86EFAC; }
.sz-area.won .sz-area-ctl { animation: none; }

/* まちがい探し */
.sz-find { display: grid; gap: 12px; margin: 10px 0 14px; }
.sz-find .fz { padding: 12px; border-radius: 16px; background: #F8FAFC; box-shadow: inset 0 0 0 1px var(--sz-line); }
.sz-find .who { margin: 0 0 8px !important; font-size: 14px !important; line-height: 1.6 !important; }
.sz-find ol { list-style: none; counter-reset: fz; margin: 0; padding: 0; display: grid; gap: 6px; }
.sz-find li { counter-increment: fz; position: relative; padding: 8px 10px 8px 38px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1.5px #E2E8F0; font-size: 14.5px; font-weight: 800; line-height: 1.6; color: var(--sz-ink); }
.sz-find li::before { content: counter(fz); position: absolute; left: 9px; top: 9px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #CBD5E1; color: #fff; font-size: 11.5px; font-weight: 900; }
.sz-find .play li { cursor: pointer; box-shadow: inset 0 0 0 1.5px #E2E8F0, 0 2px 0 #E2E8F0; touch-action: manipulation; }
.sz-find .play:not(.done) li:active { transform: translateY(1px); }
.sz-find li.no { background: #F8FAFC; }
.sz-find li.hit { background: #FEF2F2; box-shadow: inset 0 0 0 2px #EF4444; color: #991B1B; }
.sz-find li.hit::before { background: #DC2626; }
.sz-find li.hit::after { content: "まちがい"; position: absolute; right: 8px; top: -9px; padding: 0 8px; border-radius: 999px; background: #DC2626; color: #fff; font-size: 11px; font-weight: 900; transform: rotate(4deg); }
.sz-find .why { margin: 10px 0 0 !important; padding: 9px 12px; border-radius: 11px; background: #F0FDF4; box-shadow: inset 0 0 0 1.5px #86EFAC; font-size: 14px !important; font-weight: 700; line-height: 1.7 !important; color: #14532D !important; }
.sz-find .sz-tip { margin: 8px 0 0; }
.sz-find .chk3 .sz-fill { margin: 0 !important; font-size: 15px !important; font-weight: 800; }

/* 練習 ・ まちがいに 合わせた ひとこと ・ 見なおし ・ タイムアタック */
.sz-why { margin: 6px 0 0 !important; padding: 8px 10px; border-radius: 10px; background: #FEF2F2; font-size: 14px !important; font-weight: 700; line-height: 1.65 !important; color: #7F1D1D !important; text-align: left; }
.sz-qres .wl { margin: 16px 0 0; text-align: left; }
.sz-qres .wlh { margin: 0 0 4px !important; font-size: 13.5px !important; font-weight: 900; color: #334155 !important; }
.sz-qres .wl .wq { margin: 4px 0 0 !important; font-size: 14.5px !important; font-weight: 800; color: var(--sz-ink) !important; }
.sz-qres .wl .exp { margin: 8px 0 12px; padding: 10px 12px 4px; border-radius: 12px; background: #F8FAFC; box-shadow: inset 0 0 0 1px var(--sz-line); }
.sz-qhead .sc.ta { padding: 2px 10px; border-radius: 999px; background: #1E293B; color: #fff; font-size: 14px; }
.sz-ta { padding: 18px 14px; border-radius: 16px; background: linear-gradient(180deg, #EEF2FF, #fff); box-shadow: inset 0 0 0 1.5px #C7D2FE; text-align: center; }
.sz-ta .tt { display: block; margin: 0 0 6px; font-size: 20px; color: #312E81; }
.sz-ta .bs { font-weight: 900; color: #4338CA !important; }
.sz-ta .sz-btn { display: flex; width: 100%; margin: 8px 0 0; }
.sz-qres .tm { display: block; font-size: 40px; font-weight: 900; color: #312E81; font-variant-numeric: tabular-nums; }
.sz-qres .rec { display: inline-block; margin: 4px 0 6px; padding: 2px 12px; border-radius: 999px; background: #DC2626; color: #fff; font-size: 14px; font-weight: 900; animation: szStamp .4s ease both; }
.sz-qres .bs { display: inline-block; margin: 4px 0 6px; font-size: 13.5px; font-weight: 900; color: #4338CA; }

/* 今日の 1問 */
.sz-dsec { background: linear-gradient(180deg, #F0F9FF, #fff); box-shadow: 0 1px 2px rgba(15,23,42,.06), inset 0 0 0 1.5px #BAE6FD; }
.sz-daily .dh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.sz-daily .dh b { font-size: 14px; color: #075985; }
.sz-daily .streak { padding: 2px 10px; border-radius: 999px; background: #E2E8F0; font-size: 12.5px; font-weight: 900; color: #334155; }
.sz-daily .streak.on { background: linear-gradient(90deg, #F97316, #DC2626); color: #fff; }
.sz-daily .streak.pop { animation: szStamp .45s ease both; }
.sz-daily .sz-qz { background: #fff; }
.sz-daily .tmr { margin: 10px 0 0 !important; font-size: 13px !important; font-weight: 800; color: #475569 !important; text-align: center; }

/* 単元の 進み具合 (算数の トップ) */
.szp { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; padding: 3px 10px; border-radius: 999px; background: #FFFBEB; box-shadow: inset 0 0 0 1.5px #FDE68A; font-size: 12.5px; font-weight: 900; color: #92400E; }
.szp.all { background: #FFF1F2; box-shadow: inset 0 0 0 1.5px #FECACA; color: #B91C1C; }
.szp .hk { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.8px #DC2626; transform: rotate(-12deg); font-style: normal; }
.szp .hk b { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 11px; color: #DC2626; }
.sz-feat .tx .szp { display: inline-flex; margin: 6px 0 0 8px; font-size: 12px; line-height: 1.4; color: #92400E; }
.sz-feat .tx .szp.all { color: #B91C1C; }
.sz-stage .tb b { font-size: 12.5px; }
.sz-stage .tb.lock b::before { content: none; }
.sz-stage .tb.lock small i { display: inline-block; width: 10px; height: 11px; margin-right: 3px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='7.5' rx='1.6' fill='%2364748B'/%3E%3Cpath d='M5.2 7V5.2a2.8 2.8 0 0 1 5.6 0V7' fill='none' stroke='%2364748B' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 360px) { .sz-stamps .tx small { display: none; } .sz-stamps .dots i { width: 18px; height: 18px; font-size: 9.5px; } }
/* hidden を 必ず 効かせる (display を 書いた クラスに 負けない ・ 2026-11-03) */
.sz-wrap [hidden], .sz-tip[hidden] { display: none !important; }
.sz-aask .pg.wrong { background: #FEF2F2; box-shadow: inset 0 0 0 2.5px #EF4444, 0 3px 0 #B91C1C; color: #991B1B; opacity: 1; }
.sz-aask .pg.right { background: var(--sz-green-l); box-shadow: inset 0 0 0 2.5px var(--sz-green), 0 3px 0 #15803D; color: #166534; opacity: 1; }
/* 今日の 1問 ・ 1 週間の 判子 と 連続の 判子 */
.sz-daily .wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0 0 8px; }
.sz-daily .dy { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sz-daily .dy small { font-size: 10.5px; font-weight: 800; color: #64748B; }
.sz-daily .dy i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #E2E8F0; font-style: normal; font-size: 12px; font-weight: 800; color: #94A3B8; }
.sz-daily .dy.td i { box-shadow: inset 0 0 0 2px #0284C7; color: #0369A1; }
.sz-daily .dy.on i { background: #FFF1F2; box-shadow: inset 0 0 0 2px #DC2626; color: #DC2626; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 13px; font-weight: 900; transform: rotate(-10deg); }
.sz-daily .ml { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 10px; }
.sz-daily .mi { display: inline-flex; align-items: baseline; gap: 1px; padding: 2px 8px; border-radius: 999px; background: #F1F5F9; box-shadow: inset 0 0 0 1px #E2E8F0; font-size: 11px; font-weight: 900; color: #64748B; }
.sz-daily .mi i { font-style: normal; font-size: 13px; }
.sz-daily .mi.on { background: #DC2626; box-shadow: none; color: #fff; }
.sz-daily .mi.pop { animation: szStamp .5s ease both; }
.sz-daily .ml small { flex-basis: 100%; font-size: 12px; font-weight: 800; color: #475569; }
.sz-daily .sz-rv.dex { margin-top: 10px; }
/* 称号を 手に入れた お知らせ */
.sz-toast { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 9999; display: flex; align-items: center; gap: 10px; width: min(92vw, 420px); padding: 10px 12px; border-radius: 16px; background: #1E293B; box-shadow: 0 10px 30px rgba(15,23,42,.35); color: #fff; transform: translate(-50%, 140%); transition: transform .4s cubic-bezier(.2, 1.4, .4, 1); }
.sz-toast.on { transform: translate(-50%, 0); }
.sz-toast img { flex: none; width: 52px; height: 52px; }
.sz-toast span { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 800; line-height: 1.5; }
.sz-toast b { color: #FDE047; font-size: 14px; }
.sz-toast a { color: #7DD3FC; font-size: 12.5px; font-weight: 900; }
.sz-toast button { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 16px; cursor: pointer; }
/* 和差算 ・ 線分図 (テープ ・ js/qzn_sansu.js の tapeSvg ・ include/qzn_sansu.php の qzn_sz_tape_svg) */
.sz-tfig { position: relative; margin: 6px 0 8px; touch-action: manipulation; padding: 8px 6px 4px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--sz-line); }
.sz-tfig.pop { animation: szNudge .35s ease; }
.sz-tape { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; overflow: visible; }
.sz-tape .ta { fill: #7DD3FC; stroke: #0284C7; stroke-width: 1.5; }
.sz-tape .td { fill: #FDBA74; stroke: #C2410C; stroke-width: 1.5; }
.sz-tape .td.gone { fill: #FFF7ED; stroke: #FB923C; stroke-dasharray: 4 3; }
.sz-tape .gh { fill: #F0FDF4; stroke: #16A34A; stroke-width: 1.5; stroke-dasharray: 4 3; }
.sz-tape .gh.ad { fill: #86EFAC; stroke-dasharray: none; }
.sz-tape .hot { cursor: pointer; outline: none; animation: szTapeHot 1.1s ease-in-out infinite; }
.sz-tape .hot:focus-visible { stroke: #0F172A; stroke-width: 2.5; }
@keyframes szTapeHot { 50% { fill-opacity: .45; stroke-width: 3; } }
.sz-tape .fly { transform-box: fill-box; transform-origin: center; animation: szTapeFly .46s ease-in forwards; }
@keyframes szTapeFly { to { transform: translate(18px, -26px) rotate(-14deg); opacity: 0; } }
.sz-tape .grow { transform-box: fill-box; transform-origin: left center; animation: szTapeGrow .45s ease-out both; }
@keyframes szTapeGrow { from { transform: scaleX(0); } }
.sz-tape text { font-family: inherit; font-weight: 900; pointer-events: none; }   /* 文字の 上を 押しても 下の テープに 届くように */
.sz-tape .nm { font-size: 13px; fill: #0F172A; text-anchor: end; }
.sz-tape .nv { font-size: 10.5px; fill: #475569; text-anchor: end; }
.sz-tape .iv { font-size: 13px; fill: #0C4A6E; text-anchor: middle; }
.sz-tape .dl { font-size: 11.5px; fill: #C2410C; text-anchor: middle; }
.sz-tape .hl { font-size: 12px; fill: #fff; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: #C2410C; stroke-width: 2.5px; }
.sz-tape .hl.g { fill: #166534; stroke: #F0FDF4; }
.sz-tape .dv { stroke: #64748B; stroke-width: 1.2; stroke-dasharray: 3 3; }
.sz-tape .br { fill: none; stroke: #64748B; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sz-tape .sm { font-size: 11px; fill: #64748B; }
.sz-tape .sm.b { font-size: 13px; fill: #0F172A; }
.sz-ttoy .sz-tfig { margin: 0 0 8px; }
@media (prefers-reduced-motion: reduce) { .sz-tape .hot, .sz-tape .fly, .sz-tape .grow, .sz-tfig.pop { animation: none; } }
.sz-build { margin: 10px 0 0; }
.sz-build .sz-aask { margin-top: 4px; }
.sz-build .sz-aask .aq + .aq { margin-top: 6px !important; }
/* ほかの 単元への 小さな カード */
.sz-feat.mini { margin: 0 0 12px; padding: 10px 12px; }
.sz-feat.mini .pic span { width: 44px; height: 44px; } .sz-feat.mini .pic svg { width: 34px; height: 34px; }
.sz-feat.mini .tx b { font-size: 18px; }
.sz-feat.mini .tx > span { font-size: 13px; }
/* 今日の 1問 ・ 単元と むずかしさ ・ お知らせ */
.sz-daily .du { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 8px; }
.sz-daily .du span { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; }
.sz-daily .du .un { background: var(--sz-blue); color: #fff; }
.sz-daily .du .lv1 { background: #F1F5F9; color: #475569; }
.sz-daily .du .lv3 { background: #FEF3C7; color: #92400E; box-shadow: inset 0 0 0 1px #FCD34D; }
.sz-daily .mi.ic::after { content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 3px; align-self: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF8C8, #E9A400 60%, #A86200); box-shadow: 0 0 0 1px rgba(127,67,0,.4); }
.sz-daily .tmr a { margin-left: 4px; color: var(--sz-blue); white-space: nowrap; }
.sz-daily .rmd { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--sz-line); font-size: 13px; font-weight: 800; color: var(--sz-ink2); cursor: pointer; }
.sz-daily .rmd input { flex: none; width: 20px; height: 20px; accent-color: var(--sz-blue); }
.sz-daily .rmn { margin: 6px 0 0 !important; font-size: 12.5px !important; font-weight: 800; color: #92400E !important; }
.sz-daily .rmn a { margin-left: 4px; color: var(--sz-blue); }
.sz-toy-top b.v.lg { font-size: 16px; }
.sz-steps li .sz-tfig { margin-left: -42px; }
.sz-stage.n4 { gap: 4px; }
.sz-stage.n4 .tb { padding: 6px 2px; }
.sz-stage.n4 .tb b { font-size: 11.5px; letter-spacing: -.02em; }
.sz-stage.n4 .stars i { font-size: 12px; }
.sz-stage.n4 .tb.lock small { font-size: 9.5px; }
/* 今日の1問の あと ・ リベンジ / 週末テスト */
.sz-daily .dx { display: grid; gap: 10px; margin: 12px 0 0; }
.sz-daily .dxc { padding: 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px #FDE68A; }
.sz-daily .dxc.wt { box-shadow: inset 0 0 0 1.5px #C4B5FD; }
.sz-daily .dxh b { display: block; font-size: 15px; font-weight: 900; color: #92400E; }
.sz-daily .dxc.wt .dxh b { color: #5B21B6; }
.sz-daily .dxh small { display: block; margin: 2px 0 8px; font-size: 12.5px; font-weight: 700; line-height: 1.6; color: #475569; }
.sz-daily .dxb .sz-qz { margin: 0; }
.sz-daily .dxr { margin: 10px 0 0 !important; font-size: 13.5px !important; font-weight: 900; text-align: center; color: #92400E !important; }
.sz-daily .dxr.ok { color: var(--sz-green) !important; }
.sz-daily .dxs { margin: 8px 0 0 !important; font-size: 13.5px !important; font-weight: 800; text-align: center; color: #475569 !important; }
.sz-daily .dxs b { color: #5B21B6; font-size: 16px; margin-right: 6px; }
.sz-daily .dxb > .sz-btn.go { display: block; width: 100%; }

/* 植木算 ・ 方陣算 ・ 旅人算の 図 (figSvg / qzn_sz_fig_svg) */
.sz-fig2 { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; overflow: visible; }
.sz-fig2 text { font-weight: 900; text-anchor: middle; pointer-events: none; }
.sz-fig2 [data-t] { cursor: pointer; }
.sz-fig2 .rd { fill: #E7D8C3; }
.sz-fig2 .rd2 { stroke: #E2E8F0; stroke-width: 9; stroke-linecap: round; }
.sz-fig2 .sp { fill: #F0FDF4; stroke: #16A34A; stroke-width: 2; stroke-dasharray: 3 3; animation: szTapeHot 1.1s ease-in-out infinite; }
.sz-fig2 .gl { font-size: 11px; fill: #64748B; }
.sz-fig2 .ar2 { stroke: #64748B; stroke-width: 1.3; }
.sz-fig2 .tl2 { font-size: 13.5px; fill: #0F172A; paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.sz-fig2 .tl2.ok { font-size: 15px; fill: #15803D; }
.sz-fig2 .rg { fill: none; stroke: #A16207; stroke-width: 2; stroke-dasharray: 2 4; }
.sz-fig2 .g2 { fill: #fff; }
.sz-fig2 .tk { stroke-width: 7; stroke-linecap: round; }
.sz-fig2 .tk.a { stroke: #7DD3FC; }
.sz-fig2 .tk.b { stroke: #FDBA74; }
.sz-fig2 .wn { font-size: 11.5px; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.sz-fig2 .tm { font-size: 12.5px; fill: #475569; text-anchor: start; }
.sz-fig2 .tm.r { text-anchor: end; }
.sz-fig2 .pn { font-size: 9.5px; fill: #fff; }
.sz-figs { display: grid; gap: 8px; }
.sz-figs .cap { margin: 0 0 2px !important; font-size: 12.5px !important; font-weight: 900; color: #475569 !important; text-align: center; }

/* 図の 仕分け (.sz-pick ・ 場面ごとに 考え方を 選ぶ) */
.sz-pick { display: grid; gap: 8px; margin: 8px 0 10px; }
.sz-pick .pk { padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--sz-line); }
.sz-pick .pk.ok { background: var(--sz-green-l); box-shadow: inset 0 0 0 1.5px #86EFAC; }
.sz-pick .pq { margin: 0 0 6px !important; font-size: 14.5px !important; font-weight: 800; line-height: 1.6 !important; color: var(--sz-ink) !important; }
.sz-pick .pf { margin: 0 0 6px; }
.sz-pick .po { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sz-pick .po.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sz-pick .pb { min-height: 42px; padding: 4px 6px; border: 0; border-radius: 11px; background: #F8FAFC; box-shadow: inset 0 0 0 1.5px #CBD5E1, 0 2px 0 #E2E8F0; font: inherit; font-size: 14.5px; font-weight: 900; line-height: 1.3; color: #1E293B; cursor: pointer; touch-action: manipulation; }
.sz-pick .pb.right { background: var(--sz-green); color: #fff; box-shadow: 0 2px 0 #15803D; }
.sz-pick .pb.wrong { background: #FEF2F2; color: #B91C1C; box-shadow: inset 0 0 0 1.5px #FECACA; text-decoration: line-through; }
.sz-pick .pb:disabled { cursor: default; }
.sz-pick .pw { margin: 7px 0 0 !important; padding: 6px 9px; border-radius: 9px; background: #FEF2F2; font-size: 13px !important; font-weight: 800; line-height: 1.6 !important; color: #991B1B !important; }

/* 検索エンジンにも 中身が 残るように (2026-11-03 SEO の 点検) */
.bl.wt { display: none !important; }
.blw .ok::before { content: "OK"; }
.blw .hq::before { content: "?"; }
.sz-card h2[data-n]::before { content: attr(data-n); flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg, #0EA5E9, #2563EB); color: #fff; font-size: 15px; }
.sz-hero h1 small { display: block; margin-top: 2px; font-size: 17px; font-weight: 900; opacity: .92; }
.sz-qlist { margin: 12px 0 0; border-radius: 14px; background: #F8FAFC; box-shadow: inset 0 0 0 1px var(--sz-line); }
.sz-qlist > summary { padding: 11px 14px; font-size: 14px; font-weight: 900; color: #334155; cursor: pointer; }
.sz-qlist .sz-qz { margin: 0 10px 10px; background: #fff; }
.sz-qlist .sz-qz .cs { display: none; }
.sz-qlist .sz-qz .exp { display: block !important; margin-top: 4px; }
.sz-point p.sm { font-size: 13px; }
.sz-about h3 { margin: 14px 0 6px; font-size: 16px; font-weight: 900; color: var(--sz-ink); }
.sz-about p { font-size: 14px; line-height: 1.8; color: var(--sz-ink2); }
.sz-about p.sm { font-size: 12.5px; color: #475569; }
.sz-about a { color: #0369A1; font-weight: 800; }
.sz-tbl { width: 100%; max-width: 380px; margin: 6px auto 8px; border-collapse: collapse; font-size: 15px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.sz-tbl th { padding: 6px 4px; background: #F1F5F9; font-size: 13px; color: #334155; }
.sz-tbl td { padding: 5px 4px; border-top: 1px solid #E2E8F0; }
.sz-tbl td small { display: block; font-size: 11px; color: #64748B; }
.sz-tbl tr.hit td { background: var(--sz-green-l); color: #166534; }
.sz-tbl tr.dot td { color: #94A3B8; }
.sz-units { display: grid; gap: 8px; margin: 10px 0 12px; }
.sz-units > div { padding: 10px 12px; border-radius: 12px; background: #F8FAFC; box-shadow: inset 0 0 0 1px var(--sz-line); }
.sz-units dt { margin: 0 0 3px; font-size: 16px; font-weight: 900; }
.sz-units dt a { color: #0369A1; text-decoration: none; }
.sz-units dd { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.7; color: var(--sz-ink2); }
.sz-fig2 .tl3 { font-size: 11.5px; fill: #075985; }
.bk-card.ot { background: linear-gradient(135deg, #0B1437, #1E3A8A 65%, #0E7490); }
.bk-card.ot .art svg { width: 66px; height: 66px; }
/* 2026-11-03 見た目の 点検 1 回目の 直し */
.blg { white-space: nowrap; }
.sz-wrap p, .sz-wrap li { text-wrap: pretty; }
.sz-fig2 .stn { stroke: rgba(15,23,42,.35); stroke-width: 1; }
.sz-fig2 .shn { fill: #fff; opacity: .32; pointer-events: none; }
.sz-fig2 .tl3.s { font-size: 10.5px; fill: #0369A1; }
.sz-units { list-style: none; padding: 0; }
.sz-units li a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--sz-line), 0 2px 0 #E2E8F0; color: inherit; text-decoration: none; }
.sz-units li a:active { transform: translateY(2px); }
.sz-units .ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #F0F9FF; }
.sz-units .ic svg { width: 40px; height: 40px; }
.sz-units .ic .tk2 svg { width: 44px; height: 44px; }
.sz-units .tx { flex: 1; min-width: 0; }
.sz-units .tx b { display: block; font-size: 16.5px; font-weight: 900; color: #0369A1; }
.sz-units .tx span { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.65; color: var(--sz-ink2); }
.sz-units .tx small { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; background: #F1F5F9; font-size: 11.5px; font-weight: 900; color: #475569; }
.sz-units li > a > i { flex: none; font-style: normal; font-size: 22px; font-weight: 900; color: #94A3B8; }

/* ── 2026-11-03 SEO の 2回目の レビュー ・ 例題の 題は h3 / 図で わかる こと / 選ぶ 遊びの 答えの 1行 / よくある 質問 / 図の 画像 / 印刷 */
.sz-ex .hd h3 { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 900; color: inherit; }
.sz-sum { margin-top: 10px; }
.sz-sum > summary::before { content: "i"; font-family: Georgia, serif; font-style: italic; }
.sz-sum p { font-size: 14px; }
.sz-pick .pa { margin: 6px 2px 0; font-size: 13.5px; line-height: 1.7; font-weight: 800; color: #166534; }
.szjs .sz-pick:not(.peek) .pk:not(.ok) .pa { display: none; }
.sz-prt { margin: 2px 0 10px; }
.sz-prt .sz-btn { min-height: 40px; font-size: 13.5px; }
.sz-faq { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: #F8FAFC; box-shadow: inset 0 0 0 1px #E2E8F0; }
.sz-faq .fh { margin: 0 0 4px; font-size: 13px; font-weight: 900; color: #64748B; letter-spacing: .04em; }
.sz-faq h3 { position: relative; margin: 10px 0 4px; padding-left: 26px; font-size: 15px; line-height: 1.5; color: #0F172A; }
.sz-faq h3::before { content: "Q"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #0EA5E9; color: #fff; font-size: 12px; font-weight: 900; }
.sz-faq p { margin: 0 0 6px; padding-left: 26px; font-size: 14px; }
.sz-figimg { margin: 12px 0 6px; }
.sz-figimg img { display: block; width: 100%; max-width: 440px; margin: 0 auto; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px #E2E8F0; background: #fff; }
.sz-figimg figcaption { margin: 6px 2px 0; font-size: 12.5px; line-height: 1.6; color: #64748B; }
.sz-pws { display: none; }
@media print {
	@page { margin: 14mm 12mm; }
	html, body { background: #fff !important; }
	.qz-header, .qz-nav, .qz-footer, .qz-breadcrumb, .sz-cta, .sz-toc, .sz-stamps, .sz-toy, .sz-ttoy, .sz-ueki-toy, .sz-houjin-toy, .sz-tabi-toy, .sz-dsec, .sz-next, .sz-prt, .sz-btn, .sz-qhead, .sz-qbox, .sz-qres, .sz-js, .sz-hero .art { display: none !important; }
	.sz-card { box-shadow: none !important; border: 1px solid #CBD5E1; break-inside: auto; }
	.sz-ex, .sz-qz, figure { break-inside: avoid; }
	.sz-after.wait, .bl.wt, .szjs .sz-pick .pk .pa { display: revert !important; }
	.blw { display: none !important; }
	body.sz-pw > *:not(.sz-pws) { display: none !important; }
	body.sz-pw .sz-pws { display: block !important; font-size: 13pt; line-height: 1.8; color: #000; }
	.sz-pws h1 { font-size: 18pt; margin: 0 0 4mm; }
	.sz-pws .nm { margin: 0 0 6mm; font-size: 11pt; }
	.sz-pws ol { margin: 0; padding-left: 1.4em; }
	.sz-pws li { margin: 0 0 7mm; break-inside: avoid; }
	.sz-pws .cs { margin-top: 1mm; font-size: 12pt; }
	.sz-pws .cs span { display: inline-block; margin-right: 8mm; }
	.sz-pws .an { margin-top: 2mm; font-size: 11pt; }
	.sz-pws .pb { break-before: page; }
	.sz-pws .ft { margin-top: 6mm; font-size: 9pt; color: #555; }
}
.sz-morel { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; }
.sz-morel a { display: block; padding: 10px 12px; border-radius: 12px; background: var(--sz-blue-l, #E0F2FE); color: #0369A1; font-size: 14px; font-weight: 900; text-decoration: none; }
.sz-dia .gd { stroke: #E2E8F0; stroke-width: 1; }
.sz-dia .ax { fill: none; stroke: #64748B; stroke-width: 1.6; }
.sz-dia .dl { fill: none; stroke: #DC2626; stroke-width: 1.2; stroke-dasharray: 3 3; }
.sz-dia .tx { font-size: 10px; fill: #64748B; text-anchor: middle; font-weight: 700; }
.sz-dia .ty { font-size: 10px; fill: #64748B; text-anchor: end; font-weight: 700; }
.sz-dia .ty.s { font-size: 9.5px; fill: #334155; }
.sz-dia .al { font-size: 10px; fill: #475569; text-anchor: end; font-weight: 700; }
.sz-dia .nm { font-size: 12px; font-weight: 900; }
.sz-dia .pt { font-size: 11px; font-weight: 900; fill: #B91C1C; }
.sz-dia .pt.e { text-anchor: end; }
.sz-dfig { margin: 10px 0 8px; }
.sz-dfig figcaption { margin-top: 4px; font-size: 12.5px; color: #64748B; }
.sz-dread { margin: 8px 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sz-dread li { padding: 10px 12px; border-radius: 12px; background: #F8FAFC; box-shadow: inset 0 0 0 1px #E2E8F0; }
.sz-dread li b { display: block; font-size: 14.5px; color: #0F172A; }
.sz-dread li p { margin: 2px 0 0; font-size: 14px; }
.sz-tblw { overflow-x: auto; margin: 8px 0 4px; }
.sz-ktbl { width: 100%; max-width: none; margin: 0; font-size: 14px; font-weight: 500; text-align: left; }
.sz-ktbl th, .sz-ktbl td { vertical-align: top; text-align: left; line-height: 1.6; }
.sz-ktbl tbody th { white-space: nowrap; font-weight: 900; }
.sz-ktbl tr.gr th { padding-top: 12px; background: none; color: #0369A1; font-size: 12.5px; letter-spacing: .04em; }
.sz-ktbl tr.on { background: #F0F9FF; }
.sz-ktbl tr.on th a { color: #0369A1; }
.sz-ktbl td small { display: block; margin-top: 2px; font-size: 12px; color: #64748B; font-weight: 700; }
.sz-ktbl thead th { font-size: 12px; }

/* 解かずに 先に 見る (2026-11-03 SEO の 3回目 R-1 ・ 遊びを 終える 前でも 公式 ・ 見分け方 ・ まちがいの 一覧を 開ける) */
.sz-peek { display: inline-flex; align-items: center; min-height: 36px; margin: 12px 0 0; padding: 4px 14px; border: 0; border-radius: 999px; background: #F1F5F9; box-shadow: inset 0 0 0 1.5px #CBD5E1; color: #475569; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.sz-peek:hover { background: #E2E8F0; }
@media print { .sz-peek { display: none !important; } }
/* 遊びの 箱の 高さを 先に 取って おく (R-2 ・ JS が 組み立てる 前と あとで 下が ずれないように ・ szjs は ページの 頭で 付ける ・ 375〜1200px で 測った 高さ) */
.szjs .sz-toy { min-height: 420px; } .szjs .sz-ttoy { min-height: 365px; } .szjs .sz-ueki-toy { min-height: 335px; } .szjs .sz-houjin-toy { min-height: 500px; } .szjs .sz-tabi-toy { min-height: 540px; }
@media (min-width: 720px) { .szjs .sz-toy { min-height: 455px; } .szjs .sz-ttoy { min-height: 415px; } .szjs .sz-ueki-toy { min-height: 360px; } .szjs .sz-houjin-toy { min-height: 590px; } }
.szjs .sz-stamps[hidden] { display: flex !important; visibility: hidden; min-height: 49px; box-sizing: border-box; }
@media print { .szjs .sz-toy, .szjs .sz-ttoy, .szjs .sz-ueki-toy, .szjs .sz-houjin-toy, .szjs .sz-tabi-toy { min-height: 0; } }
/* 見出しは ふつうの 箱に (flex だと 文節の <wbr> ごとに 別の 箱に 分かれ「ダイヤグラ / ム」の ように 語の 途中で 折れた ・ 番号は 左に 置いて 2行目を そろえる) */
.sz-card h2 { display: block; }
.sz-card h2[data-n] { position: relative; min-height: 30px; padding-left: 40px; }
.sz-card h2[data-n]::before { position: absolute; left: 0; top: -1px; }
/* 1節の 説明は Web フォントに かわると 行が 増えて 下の 遊びが 押し下げられる（旅人算で CLS 0.2）→ フォントの 後の 行数ぶんを 先に 取る（2026-11-03 SEO の 4回目 S-1 ・ 1行 28px ・ 360〜412px と 768px で 測った） */
.sz-lead[data-u="tsurukame"] { min-height: 56px; } .sz-lead[data-u="wasa"] { min-height: 112px; } .sz-lead[data-u="ueki"] { min-height: 140px; } .sz-lead[data-u="houjin"] { min-height: 112px; } .sz-lead[data-u="tabibito"] { min-height: 84px; }
@media (min-width: 390px) { .sz-lead[data-u="ueki"] { min-height: 112px; } }
@media (min-width: 412px) { .sz-lead[data-u="houjin"] { min-height: 84px; } }
@media (min-width: 720px) { .sz-lead[data-u="tsurukame"] { min-height: 28px; } .sz-lead[data-u="wasa"], .sz-lead[data-u="ueki"], .sz-lead[data-u="houjin"], .sz-lead[data-u="tabibito"] { min-height: 56px; } }