:root{--bg:#fbf8f1;--panel:#fff;--ink:#2b2a28;--muted:#6b675f;--line:#ddd6c8;--primary:#2f8f5b;--primary-ink:#fff;--kanji:#f3a43b;--kanji-soft:#fff1dc;--kanji-on:#c96a08;--kata:#3b82c4;--kata-soft:#e5f0fb;--stroke-now:#e4572e;--hanamaru:#e0473a;--adult:#f1f4f8;--font:"UD デジタル 教科書体 N-R", "UD Digi Kyokasho N-R", "BIZ UDPゴシック", sans-serif}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:22px;line-height:1.6}button,input{font-family:inherit;font-size:inherit;color:inherit}[hidden]{display:none!important}.top{background:var(--panel);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;padding:10px 24px;display:flex}.brand{color:var(--muted);white-space:nowrap;font-size:20px}.steps{flex-wrap:wrap;gap:6px;display:flex}.step{border:1px solid var(--line);background:var(--bg);cursor:pointer;border-radius:999px;padding:2px 14px;font-size:17px}.step[aria-current=step]{background:var(--ink);color:#fff;border-color:var(--ink)}.step:disabled{opacity:.4;cursor:default}main{max-width:1240px;margin:0 auto;padding:20px 24px 8px}.screen{flex-direction:column;min-height:calc(100vh - 150px);display:flex}.q{margin:8px 0 4px;font-size:40px;font-weight:400}.hint{color:var(--muted);margin:0 0 16px}.msg{min-height:1.6em;color:var(--kanji-on);margin:8px 0 0;font-size:26px}.msg.wait{color:var(--muted)}.msg.wait:after{content:"";border:3px solid var(--line);border-top-color:var(--primary);vertical-align:-.1em;border-radius:50%;width:.8em;height:.8em;margin-left:.4em;animation:1s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:16px;margin-top:auto;padding:16px 0 8px;display:flex}.btn{border:2px solid var(--ink);background:var(--panel);cursor:pointer;border-radius:18px;align-items:center;gap:10px;min-height:72px;padding:14px 32px;font-size:28px;display:inline-flex}.btn:hover{background:#f4f0e6}.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}.btn.primary:hover{filter:brightness(1.07)}.btn:disabled{opacity:.45;cursor:default;filter:none}.btn.small{min-height:56px;padding:8px 20px;font-size:22px}.btn:focus-visible,.step:focus-visible,.seg:focus-visible,.tab:focus-visible{outline-offset:2px;outline:4px solid #7fb3e6}.icon{flex:none;width:1em;height:1em}.sample-list{grid-template-columns:1fr 1fr;gap:16px;margin:16px 0 24px;display:grid}.sample{text-align:left;border:2px solid var(--line);background:var(--panel);cursor:pointer;border-radius:22px;min-height:100px;padding:22px 28px;font-size:34px}.sample:hover{border-color:var(--primary)}.sample.flash{animation:.9s 2 flash}@keyframes flash{50%{border-color:var(--kanji);background:var(--kanji-soft)}}.or{color:var(--muted)}.free{flex-wrap:wrap;gap:16px;margin-top:8px;display:flex}.free input{border:2px solid var(--line);background:var(--panel);border-radius:16px;flex:420px;min-height:72px;padding:12px 20px;font-size:32px}.free input:focus{border-color:var(--primary);outline:none}.free input{min-width:0}.sentence{background:var(--panel);border:1px solid var(--line);word-break:keep-all;overflow-wrap:anywhere;border-radius:24px;margin:8px 0 12px;padding:28px 32px;font-size:56px;line-height:2.1}.seg{font-size:inherit;cursor:pointer;border:3px solid var(--kanji);background:var(--kanji-soft);vertical-align:baseline;border-radius:14px;margin:0 2px;padding:4px 10px;line-height:1.2}.seg[aria-pressed=true]{border-color:var(--kanji-on);background:#ffe0b3;padding-top:.5em}.seg.kata{border-color:var(--kata);background:var(--kata-soft);border-style:dashed}.seg.kata[aria-pressed=true]{background:#cfe3f7;border-style:solid}ruby rt{color:var(--muted);font-size:.42em}.seg.cand-kana{border:3px dashed var(--line);background:var(--panel)}.seg.focus{outline-offset:2px;outline:4px solid #7fb3e6}.cands{flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 10px;display:flex}.cands-label{color:var(--muted);font-size:24px}.cand{border:2px solid var(--line);background:var(--panel);cursor:pointer;border-radius:14px;flex-direction:column;align-items:center;gap:0;min-width:84px;min-height:64px;padding:6px 16px;font-size:32px;line-height:1.2;display:inline-flex}.cand:hover{border-color:var(--kanji)}.cand[aria-pressed=true]{border-color:var(--kanji-on);background:var(--kanji-soft)}.cand-grade{color:var(--muted);font-size:15px}.cand:focus-visible{outline-offset:2px;outline:4px solid #7fb3e6}.ai-btn{text-align:center;flex-wrap:wrap;justify-content:center;font-size:22px}.ai-left{color:var(--muted);font-size:18px}.picked{margin:4px 0;font-size:26px}.picked b{margin:0 4px;font-size:36px}.tabs{flex-wrap:wrap;gap:10px;margin-bottom:12px;display:flex}.tab{cursor:pointer;border:2px solid var(--line);background:var(--panel);border-radius:16px;width:76px;height:76px;font-size:40px}.tab[aria-selected=true]{border-color:var(--kanji-on);background:var(--kanji-soft)}.s3{flex-wrap:wrap;align-items:flex-start;gap:32px;display:flex}.board-wrap{aspect-ratio:1;background:var(--panel);border-radius:12px;flex:none;width:min(440px,52vh,90vw)}.board{width:100%;height:100%;display:block}.g-border{fill:none;stroke:#8f887b;stroke-width:1px}.g-cross{stroke:#c9c1b2;stroke-width:.6px;stroke-dasharray:2 2}.board .shadow path{fill:none;stroke:#ece6da;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round}.board .ink path{fill:none;stroke:var(--ink);stroke-width:4px;stroke-linecap:round;stroke-linejoin:round}.board .nums text{fill:var(--stroke-now);opacity:0;font-family:sans-serif;font-size:7px}.board .fallback{fill:var(--ink);font-size:80px}.info{flex:360px}.info .count{margin:0;font-size:30px}.info .ctx{margin:4px 0 12px;font-size:28px}.yomi{grid-template-columns:auto 1fr;gap:4px 16px;margin:0 0 12px;font-size:28px;display:grid}.yomi dt{color:var(--muted)}.yomi dd{margin:0}.okuri{color:var(--muted);font-size:.8em}.grade{background:var(--kanji-soft);border-radius:999px;margin:0 0 8px;padding:2px 18px;font-size:24px;display:inline-block}.note{color:var(--kanji-on);margin:4px 0 12px;font-size:22px}.s3-buttons{flex-wrap:wrap;gap:14px;margin-top:12px;display:flex}.s4{align-items:flex-start;gap:28px;display:flex}.s4-side{flex-direction:column;flex:0 0 300px;gap:14px;display:flex;position:sticky;top:12px}.s4-side .q{font-size:34px}.paper-scroll{background:#e8e3d8;border-radius:12px;flex:auto;max-height:calc(100vh - 140px);padding:20px;overflow:auto}.sheets{flex-direction:column;align-items:center;gap:20px;display:flex}.sheet,.sheet-measure{font-family:var(--font);color:#000;font-size:4mm;line-height:1.4}.sheet{-webkit-print-color-adjust:exact;print-color-adjust:exact;background:#fff;flex-direction:column;flex:none;width:210mm;height:296mm;padding:12mm 12mm 12mm 22mm;display:flex;position:relative;overflow:hidden;box-shadow:0 2px 12px #0000002e}.sheet-measure{visibility:hidden;width:176mm;position:absolute;top:0;left:-10000px}.punch{border:.3mm dashed #a8a8a8;border-radius:50%;width:6mm;height:6mm;position:absolute;left:9mm}.punch.p1{top:105.5mm}.punch.p2{top:185.5mm}.punch:before,.punch:after{content:"";background:#a8a8a8;position:absolute}.punch:before{width:2.4mm;height:.25mm;margin:-.125mm 0 0 -1.2mm;top:50%;left:50%}.punch:after{width:.25mm;height:2.4mm;margin:-1.2mm 0 0 -.125mm;top:50%;left:50%}.punch-note{writing-mode:vertical-rl;color:#8a8a8a;white-space:nowrap;justify-content:center;align-items:center;width:3.6mm;height:70mm;font-size:2.6mm;line-height:1;display:flex;position:absolute;top:113mm;left:10.2mm}.sh-top{display:flow-root}.sh-head{border-bottom:.4mm solid #000;justify-content:space-between;align-items:flex-end;padding-bottom:2mm;display:flex}.sh-title{font-size:6mm}.sh-page{color:#555;margin-left:3mm;font-size:3.6mm}.sh-fields{gap:6mm;font-size:4mm;display:flex}.sh-field{border-bottom:.3mm solid #000;min-width:12mm;display:inline-block}.sh-field.name{min-width:45mm}.sh-sentence{margin:2mm 0 1mm;font-size:8mm;line-height:1.9}.sh-sentence.small{color:#333;margin:1mm 0 0;font-size:4.6mm}.sh-sentence rt{color:#333;font-size:.42em}.sh-label{color:#333;margin:0 0 1mm;font-size:3.6mm}.sh-label b{color:#000;margin-right:2mm;font-size:5mm;font-weight:400}.sh-sub{color:#333;margin:1.6mm 0 .6mm;font-size:3.4mm}.sh-sub:first-child{margin-top:0}.sh-block{break-inside:avoid;page-break-inside:avoid;padding-top:2.5mm;display:flow-root}.sh-row{gap:.7mm;display:flex}.sh-row+.sh-row{margin-top:.7mm}.cell{flex:none;width:16.9mm;height:16.9mm;display:block}.cell .c-border{fill:none;stroke:#888;stroke-width:1.1px}.cell .c-cross{stroke:#c8c8c8;stroke-width:.8px;stroke-dasharray:1.5 2.5}.cell .c-ink path{fill:none;stroke-width:4.5px;stroke-linecap:round;stroke-linejoin:round}.cell .c-ink text{font-family:var(--font);font-size:80px}.cell .model path{stroke:#000}.cell .model text{fill:#000}.cell .trace path{stroke:#555}.cell .trace text{fill:#555}.cell .tw{opacity:.22}.sh-char-head{align-items:flex-start;gap:2mm;display:flex}.sh-char-main{flex:auto;min-width:0}.sh-qr{flex-direction:column;flex:none;align-items:center;width:20mm;margin-bottom:1mm;display:flex}.sh-qr .qr{width:20mm;height:20mm;display:block}.sh-qr-note{color:#555;white-space:nowrap;margin-top:-.4mm;font-size:2.2mm;line-height:1}.sh-seq{flex-wrap:wrap;gap:.7mm;margin-bottom:1mm;display:flex}.seq-item{flex-direction:column;align-items:center;display:flex}.seq-item .cell{width:10mm;height:10mm}.seq-item .c-cross{display:none}.seq-item .c-ink path{stroke-width:6px}.seq-item .prev path{stroke:#b5b5b5}.seq-item .now path{stroke:#000}.seq-n{margin-top:.5mm;font-family:sans-serif;font-size:2.6mm;line-height:1}.sh-credit{color:#555;white-space:pre-line;text-align:right;font-size:2.8mm;line-height:1.2;position:absolute;bottom:4mm;right:12mm}.adult-wrap{background:var(--adult);border-radius:24px;padding:20px 28px}.adult-wrap .q{font-size:32px}.answer-card{background:#fff;border-radius:20px;min-height:210px;margin:8px 0 14px;padding:18px 28px;position:relative}.answer-text{margin:0;padding-right:220px;font-size:64px;line-height:2.1}.answer-full{color:var(--muted);margin:0;font-size:22px}.answer-chars{flex-wrap:wrap;gap:14px;margin-bottom:16px;display:flex}.a-char{text-align:center;background:#fff;border-radius:16px;min-width:120px;padding:8px 16px}.a-char .k{font-size:80px;line-height:1.2;display:block}.a-char .r{color:var(--muted);font-size:18px}.a-char .chk{color:var(--kanji-on);font-size:15px;display:block}.records{max-height:260px;margin:4px 0;padding:0;font-size:20px;list-style:none;overflow:auto}.records li{background:#fff;border-radius:10px;flex-wrap:wrap;gap:16px;margin-bottom:6px;padding:6px 14px;display:flex}.records .d{color:var(--muted)}.records .m{color:var(--hanamaru)}.store-msg{color:var(--muted);font-size:18px}.empty{color:var(--muted)}.stamp{pointer-events:none;width:200px;height:200px;margin-top:-100px;position:absolute;top:50%;right:18px}.stamp svg{width:100%;height:100%;overflow:visible}.stamp path{fill:none;stroke:var(--hanamaru);stroke-width:7px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1px}.stamp.play path.sp{animation:1s ease-out forwards hm-draw}.stamp.play path.pe{animation:1.3s ease-in-out .9s forwards hm-draw}.stamp.play svg{animation:2.6s ease-out hm-pop}.stamp.play .praise{animation:.6s ease-out 2.1s forwards hm-praise}.praise{white-space:nowrap;color:var(--hanamaru);opacity:0;font-size:26px;position:absolute;bottom:-34px;left:50%;transform:translate(-50%)scale(.6)}@keyframes hm-draw{to{stroke-dashoffset:0}}@keyframes hm-pop{0%{transform:scale(.7)rotate(-12deg)}80%{transform:scale(1.06)rotate(2deg)}to{transform:scale(1)rotate(0)}}@keyframes hm-praise{to{opacity:1;transform:translate(-50%)scale(1)}}.credit{text-align:center;color:var(--muted);padding:6px 0 14px;font-size:14px}@media (width<=900px){.sample-list{grid-template-columns:1fr}.s4{flex-direction:column}.s4-side{flex:none;width:100%;position:static}.answer-text{padding-top:180px;padding-right:0}.stamp{top:110px}.sentence{font-size:40px}}@media (prefers-reduced-motion:reduce){.stamp.play path{animation-duration:10ms!important;animation-delay:0s!important}}a.btn{color:inherit;text-decoration:none}a.btn.primary{color:var(--primary-ink)}select{font-family:inherit;font-size:inherit;color:inherit}.page{flex-direction:column;min-height:100vh;display:flex}.stroke-page{flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:100dvh;padding:16px;display:flex}.stroke-page .board-wrap{width:min(100vw - 32px,72vh,640px)}.stroke-page .msg{text-align:center}.stroke-page .credit{max-width:640px;padding:0;font-size:12px}.page>main{flex:1 0 auto;width:100%}.actions.start{justify-content:flex-start;margin-top:8px}.as-parent{margin-left:6px;font-size:16px}.btn.big{justify-content:center;min-height:96px;padding:18px 36px;font-size:30px}.btn .sub{color:inherit;opacity:.85;font-size:18px;display:block}.btn.big:has(.sub){flex-direction:column;gap:2px}.choice{flex-wrap:wrap;gap:18px;margin:16px 0;display:flex}.choice .btn{flex:320px}.menu{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:16px 0;display:grid}.review-btn{background:var(--kanji-on);border-color:var(--kanji-on);align-self:flex-start;min-height:96px;margin:4px 0 8px;padding:18px 40px;font-size:34px}.free.pair input{letter-spacing:.12em;text-transform:uppercase}.hint.small{font-size:18px}.hint.inline{margin:0;font-size:18px}.parent .q{font-size:34px}.usage{color:var(--muted);margin-top:8px;font-size:20px}.kid-list{flex-direction:column;gap:16px;margin:12px 0;display:flex}.kid-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:16px 22px}.kid-head{align-items:baseline;gap:16px;display:flex}.kid-name{font-size:32px}.kid-grade{color:var(--muted);font-size:20px}.devices{margin:8px 0 12px;padding:0;font-size:20px;list-style:none}.devices li{border-top:1px dashed var(--line);flex-wrap:wrap;align-items:center;gap:16px;padding:6px 0;display:flex}.devices .dev-label{min-width:220px}.devices .dev-seen{color:var(--muted);flex:1}.kid-actions{flex-wrap:wrap;gap:12px;display:flex}.form{flex-direction:column;gap:16px;max-width:640px;display:flex}.form label{flex-direction:column;gap:6px;font-size:22px;display:flex}.form input,.form select{border:2px solid var(--line);background:var(--panel);border-radius:14px;min-height:64px;padding:10px 16px;font-size:28px}.pair-code{letter-spacing:.12em;margin:12px 0 0;font-family:BIZ UDゴシック,BIZ UDGothic,monospace;font-size:96px}.pair-left{color:var(--kanji-on);margin:4px 0 12px;font-size:28px}.url{background:var(--panel);border-radius:6px;padding:0 8px;font-family:monospace;font-weight:400}.share-now{font-size:26px}.share-now b{color:var(--primary);font-size:32px}.share-now .sub{color:var(--muted);margin-left:8px;font-size:18px}.explain{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:8px 24px 12px;font-size:19px;line-height:1.7}.explain h2{margin:14px 0 4px;font-size:22px}.explain h3{margin:4px 0;font-size:20px}.explain ul{margin:0;padding-left:1.2em}.pros-cons{grid-template-columns:1fr 1fr;gap:16px;margin:8px 0;display:grid}.pros-cons>div{background:var(--bg);border-radius:14px;padding:8px 16px}.marks{justify-content:center;gap:8px;margin-top:6px;display:flex}.mark{border:2px solid var(--line);background:var(--panel);cursor:pointer;border-radius:14px;min-width:64px;min-height:56px;padding:4px 14px;font-size:22px}.mark.ok{font-size:30px}.mark.ok[aria-pressed=true]{border-color:var(--hanamaru);color:var(--hanamaru);background:#fde8e6}.mark.again[aria-pressed=true]{border-color:var(--kata);color:var(--kata);background:var(--kata-soft)}.mark:focus-visible{outline-offset:2px;outline:4px solid #7fb3e6}.next{color:var(--muted);margin-top:6px;font-size:20px;display:block}.next.ok{color:var(--hanamaru)}.print-pick{text-align:left;align-items:flex-start}.sh-lead{color:#333;margin:2mm 0 0;font-size:4.6mm}.rv-row{border-bottom:.2mm dashed #c8c8c8;align-items:flex-end;gap:3mm;padding:4mm 0 3mm;display:flex}.rv-no{color:#333;flex:none;width:6mm;font-size:5mm;line-height:14mm}.rv-line{flex-wrap:wrap;align-items:flex-end;row-gap:3mm;margin:0;font-size:8mm;display:flex}.rv-ch{line-height:14mm}.rv-box{flex-direction:column;align-items:center;margin:0 1mm;display:inline-flex}.rv-hira{color:#000;font-size:4.2mm;line-height:1.3}.rv-slots{align-items:center;gap:.7mm;display:flex}.sheet .rv-cell,.rv-cell{width:14mm;height:14mm}.rv-kana{font-size:8mm;line-height:14mm}@media (width<=900px){.pros-cons{grid-template-columns:1fr}.pair-code{font-size:64px}}@page{size:A4;margin:0}@media print{html,body{background:#fff}.top,.credit,.s4-side{display:none!important}main{max-width:none;margin:0;padding:0}.print-screen{min-height:0;display:block!important}.s4{display:block}.paper-scroll{background:0 0;border-radius:0;max-height:none;padding:0;overflow:visible}.sheets{display:block}.sheet{box-shadow:none;break-after:page;page-break-after:always;margin:0}.sheet:last-child{break-after:auto;page-break-after:auto}}