.kanji-page{max-width:1200px;margin:auto;padding:14px}.kanji-page>h1{text-align:center;font-size:25px;margin:5px}.kanji-page>.kids-seo-lead{text-align:center;margin:0 0 15px}.kanji-workshop{position:relative;box-sizing:border-box;width:100%;aspect-ratio:16/9;border:5px solid #775235;border-radius:20px;background:#866047 url(assets/workshop.webp) center/cover;color:#243c2e;overflow:hidden;font-family:"Zen Maru Gothic","Yu Gothic",sans-serif;font-weight:700;container-type:inline-size;isolation:isolate}.kanji-workshop *{box-sizing:border-box}.kanji-workshop [hidden]{display:none!important}.kanji-workshop button{font:900 clamp(13px,1.45cqw,24px)/1.4 "Zen Maru Gothic","Yu Gothic",sans-serif;cursor:pointer;color:#263c2d;border:0;border-radius:10px;background:transparent url(assets/tile.webp) center/100% 100%;min-height:40px;padding:8px 18px}.kanji-workshop button:hover{filter:brightness(1.05)}.kanji-workshop button:active{filter:brightness(.95)}.kanji-workshop button:disabled{opacity:.45;cursor:default}.kanji-workshop :focus-visible{outline:4px solid #a74916;outline-offset:3px}.kanji-workshop button.orange{background-image:url(assets/orange.webp);color:#fffbef}.kanji-workshop button.green{background-image:url(assets/green.webp);color:#fffbef}.kanji-workshop h2,.kanji-workshop p{margin:0;line-height:1.5}.kanji-workshop h2{font-size:clamp(22px,3.2cqw,52px)}.kanji-workshop #base{height:100%}.workshop-top{height:10%;display:flex;justify-content:flex-end;align-items:center;gap:7px;padding:6px 2%}.workshop-top button{font-size:clamp(11px,1.1cqw,19px);min-height:32px;padding:7px 12px;white-space:nowrap}
.kanji-cover{height:88%;padding:2% 8% 5%;display:grid;grid-template-columns:55% 45%;align-items:center;gap:3%}.cover-paper{height:100%;background:url(assets/paper.webp) center/100% 100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;text-align:center;padding:10% 6%}.cover-paper h2{font-size:clamp(26px,4.1cqw,68px);white-space:nowrap;line-height:1.6}.cover-paper p{font-size:clamp(15px,1.8cqw,28px)}.cover-paper small{font-size:clamp(13px,1.4cqw,21px)}.cover-paper button{width:78%;margin-top:8px;min-height:55px;font-size:clamp(19px,2.5cqw,38px)}.cover-example{display:flex;flex-direction:column;align-items:center;gap:8px}.example-parts{display:flex;align-items:center;gap:12px;width:100%;justify-content:center}.wood-tile{display:grid;place-items:center;background:url(assets/tile.webp) center/100% 100%;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:700;line-height:1.1;color:#18352a;padding:12px;aspect-ratio:1}.example-parts .wood-tile{width:43%;font-size:clamp(50px,8cqw,130px)}.example-parts b{font-size:clamp(22px,3cqw,45px);color:#fff5d8}.example-arrow{color:#ffefd1;font-size:clamp(30px,4cqw,60px);line-height:1}.finished-tile{width:45%;font-size:clamp(55px,9cqw,140px)}
.kanji-play{height:88%;padding:0 8% 2%;display:grid;grid-template-rows:auto minmax(0,1.1fr) minmax(0,.9fr) clamp(90px,8.7cqw,140px);gap:8px}.play-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.play-heading h2{font-size:clamp(18px,2.3cqw,36px);padding:4px 16px;background:url(assets/label.webp) center/100% 100%}.progress-slip{display:flex;gap:24px;background:url(assets/label.webp) center/100% 100%;padding:7px 23px;font-size:clamp(12px,1.2cqw,19px)}.progress-slip strong{font-size:clamp(19px,2cqw,32px);margin-left:5px}.parts-board{width:78%;height:100%;justify-self:center;display:flex;align-items:center;justify-content:center;gap:4%;padding:10px 12%;background:url(assets/board.webp) center/100% 100%;min-height:0}.parts-board .wood-tile{height:92%;max-height:100%;width:auto;min-width:0;font-size:clamp(60px,9cqw,160px)}.plus{font-size:clamp(26px,3.5cqw,56px);color:#fff2d7}.kanji-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:6%;min-height:0}.kanji-choices button{position:relative;padding:8px;min-height:0;border:3px solid transparent;background-image:url(assets/tile.webp);font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(48px,7cqw,125px);line-height:1}.kanji-choices button small{position:absolute;left:9%;top:10%;font:700 clamp(11px,1cqw,17px)/1 "Zen Maru Gothic",sans-serif;color:#9b451b}.kanji-choices button.correct{outline:4px solid #467d48;outline-offset:-6px}.kanji-choices button.chosen-wrong{outline:4px dashed #a95622;outline-offset:-6px}.kanji-choices button[aria-disabled=true]{cursor:default}.feedback-slip{min-height:72px;position:relative;text-align:center;padding:9px 11%;background:url(assets/label.webp) center/100% 100%;display:grid;align-content:center;justify-items:center}.feedback-slip strong{font-size:clamp(15px,1.7cqw,27px)}.feedback-slip p{font-size:clamp(13px,1.4cqw,22px);line-height:1.65;min-height:1.5em}.feedback-slip button{position:absolute;right:1%;top:50%;transform:translateY(-50%);font-size:clamp(10px,1cqw,16px);min-height:32px;padding:6px 10px;width:12%}.kanji-workshop ruby{ruby-position:over}.kanji-workshop rt{font:700 .5em/1.2 "Zen Maru Gothic","Yu Gothic",sans-serif}
.kanji-result{height:88%;padding:1% 14% 3%}.result-paper{height:100%;background:url(assets/paper.webp) center/100% 100%;padding:4% 10% 5%;display:flex;flex-direction:column;justify-content:center;gap:8px;text-align:center}.result-paper h2{font-size:clamp(24px,3.2cqw,50px);line-height:1.4}.result-score{font-size:clamp(20px,2.8cqw,45px)}.result-score strong{font-size:clamp(42px,5cqw,80px);color:#547445;margin:0 5px}.result-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%}.result-tiles button{position:relative;aspect-ratio:1;padding:5px;font:700 clamp(26px,4cqw,62px)/1 "Yu Mincho",serif}.result-tiles button small{position:absolute;right:9%;bottom:8%;font:900 clamp(11px,1.3cqw,20px)/1 sans-serif;color:#35753e}.result-tiles button.review small{color:#a54e1f}.review-guide{font-size:clamp(11px,1.2cqw,19px)}.result-actions{display:flex;gap:12px;justify-content:center}.result-actions button{min-width:40%}
.workshop-dialog{position:absolute;inset:0;z-index:10;background:#1c211bbb;display:grid;place-items:center;padding:3%}.dialog-paper{background:url(assets/paper.webp) center/100% 100%;width:94%;max-height:100%;overflow:auto;padding:5% 6%;border-radius:16px}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.dialog-heading h2{font-size:clamp(23px,3.2cqw,48px);line-height:1.5}.dialog-heading button{flex-shrink:0}.dialog-paper p{font-size:clamp(15px,1.8cqw,28px);margin:12px 0;line-height:1.9}.dialog-paper label{display:flex;gap:12px;align-items:center;margin:16px 0;font-size:clamp(15px,1.8cqw,26px)}.dialog-paper input[type=range]{width:80%}.help-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center}.help-steps>section{padding:8px 4px}.help-steps h3{font-size:clamp(15px,1.9cqw,28px);margin:0 0 10px}.help-mini{display:flex;align-items:center;justify-content:center;gap:8px;min-height:90px}.help-mini .wood-tile{width:75px;max-width:43%;font-size:45px;padding:5px}.help-mini.one .wood-tile{width:100px;max-width:80%;font-size:65px}.help-steps p{font-size:clamp(12px,1.4cqw,21px);line-height:1.7}.help-bottom{text-align:center}.hint-diagram{display:flex;align-items:center;justify-content:center;gap:12px}.hint-diagram .wood-tile{width:95px;font-size:60px;padding:5px}.hint-diagram>b{font-size:24px}.hint-reading{text-align:center}.hint-reading ruby{font-size:1.15em}.parent-note{margin-top:20px;padding:16px;background:#fff8ec;border-radius:12px}.parent-note h2{font-size:18px}.parent-note p{font-size:14px;line-height:1.8}.kanji-workshop:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0}
@media(max-width:600px) and (orientation:portrait){.kanji-page{padding:6px}.kanji-workshop{aspect-ratio:auto;height:700px;border-width:3px;border-radius:15px}.workshop-top{height:12%;flex-wrap:wrap;justify-content:center;align-content:center;gap:5px;padding:6px}.workshop-top button{font-size:11px;min-height:29px;padding:6px 9px}.kanji-cover{height:88%;grid-template-columns:1fr;grid-template-rows:52% 43%;gap:4%;padding:1% 6% 7%}.cover-paper{padding:9% 6%;gap:5px}.cover-paper h2{font-size:32px;line-height:1.5}.cover-paper p{font-size:15px;line-height:1.5}.cover-paper small{font-size:13px}.cover-paper button{font-size:20px;min-height:45px;margin-top:4px}.cover-example{display:grid;grid-template-columns:1fr;grid-template-rows:47% 13% 40%;gap:2px;justify-items:center}.example-parts{height:100%;gap:12px}.example-parts .wood-tile{height:100%;width:auto;font-size:65px}.example-parts b{font-size:23px}.example-arrow{font-size:25px}.finished-tile{height:100%;width:auto;font-size:56px;padding:8px}.kanji-play{height:86%;padding:0 5% 5%;grid-template-rows:auto minmax(0,1.1fr) minmax(0,.9fr) 125px;gap:10px}.play-heading{flex-direction:column;gap:6px}.play-heading h2{font-size:19px;padding:7px 15px;white-space:nowrap}.progress-slip{gap:25px;padding:6px 24px;font-size:12px}.progress-slip strong{font-size:20px}.parts-board{width:100%;padding:10px 12%;gap:3%}.parts-board .wood-tile{font-size:64px;height:83%;max-width:44%;padding:7px}.plus{font-size:26px}.kanji-choices{gap:5%}.kanji-choices button{font-size:45px;border-width:2px;padding:5px}.kanji-choices button small{font-size:11px;top:8%;left:12%}.feedback-slip{padding:10px 8% 43px;min-height:125px}.feedback-slip strong{font-size:16px}.feedback-slip p{font-size:13px;line-height:1.8}.feedback-slip button{top:auto;bottom:7px;right:50%;transform:translateX(50%);width:auto;font-size:11px;min-height:28px;white-space:nowrap}.kanji-result{height:87%;padding:2% 5% 8%}.result-paper{padding:12% 8%;gap:13px}.result-paper h2{font-size:26px}.result-score{font-size:24px}.result-score strong{font-size:47px}.result-tiles{grid-template-columns:repeat(5,1fr);gap:5px}.result-tiles button{font-size:30px;min-height:52px;padding:4px}.result-tiles button small{font-size:11px;bottom:6%;right:5%}.review-guide{font-size:12px}.result-actions{flex-direction:column;gap:8px}.result-actions button{font-size:15px;min-height:43px}.workshop-dialog{padding:3%}.dialog-paper{width:100%;padding:9% 8%;max-height:100%}.dialog-heading{gap:6px;margin-bottom:8px}.dialog-heading h2{font-size:22px}.dialog-heading button{font-size:11px;padding:7px 9px;min-height:30px}.dialog-paper p{font-size:15px;line-height:1.9}.help-steps{grid-template-columns:1fr;gap:5px}.help-steps>section{display:grid;grid-template-columns:45% 55%;padding:5px 0;align-items:center}.help-steps h3{grid-column:1/3;font-size:15px;margin-bottom:3px}.help-mini{min-height:70px}.help-mini .wood-tile{font-size:34px;width:55px;max-width:44%;padding:4px}.help-mini.one .wood-tile{font-size:45px;width:65px}.help-steps p{font-size:12px;margin:2px}.help-bottom p{font-size:12px}.hint-diagram{gap:5px}.hint-diagram .wood-tile{width:65px;font-size:40px}.hint-diagram>b{font-size:16px}.dialog-paper label{font-size:15px}.kanji-workshop:fullscreen{height:100dvh}}
@media(max-height:500px) and (orientation:landscape){.kanji-page{padding:5px}.workshop-top{height:12%;padding:3px 2%;gap:5px}.workshop-top button{font-size:11px;padding:4px 9px;min-height:28px}.kanji-play{height:86%;gap:4px;padding:0 7% 2%;grid-template-rows:auto minmax(0,1.1fr) minmax(0,.9fr) 56px}.play-heading h2{font-size:18px}.progress-slip{font-size:11px;padding:4px 19px;gap:17px}.progress-slip strong{font-size:19px}.parts-board{width:66%;padding:4px 10%}.parts-board .wood-tile{font-size:60px;padding:7px}.kanji-choices{gap:9%}.kanji-choices button{font-size:48px}.feedback-slip{min-height:56px;padding:5px 13%}.feedback-slip strong{font-size:13px}.feedback-slip p{font-size:11px;line-height:1.6}.feedback-slip button{font-size:10px;padding:3px;width:13%;min-height:28px}.cover-paper{gap:4px;padding:5%}.cover-paper h2{font-size:32px}.cover-paper p{font-size:13px}.cover-paper small{font-size:12px}.cover-paper button{font-size:20px;min-height:40px;margin-top:3px}.kanji-cover{height:86%;padding:1% 9% 3%}.example-parts .wood-tile{font-size:60px}.finished-tile{font-size:66px}.example-arrow{font-size:25px}.result-paper{gap:4px;padding:3% 10%}.result-paper h2{font-size:23px}.result-score{font-size:20px}.result-score strong{font-size:32px}.result-tiles{gap:5px}.result-tiles button{font-size:30px;aspect-ratio:1.3;min-height:42px}.result-tiles button small{font-size:10px}.result-actions button{font-size:12px;min-height:30px;padding:6px}.review-guide{font-size:10px}.dialog-paper{padding:3% 6%}.dialog-heading{margin-bottom:5px}.dialog-heading h2{font-size:22px}.dialog-paper p{font-size:13px;margin:5px 0}.help-mini{min-height:65px}.help-mini .wood-tile{width:55px;font-size:36px}.help-mini.one .wood-tile{width:67px;font-size:44px}.help-steps h3{font-size:14px}.help-steps p{font-size:12px}.dialog-paper button{min-height:30px;font-size:12px}.hint-diagram .wood-tile{width:75px;font-size:45px}}
@media(prefers-reduced-motion:reduce){.kanji-workshop *{scroll-behavior:auto!important}}

@media(max-height:500px) and (orientation:landscape){.kanji-workshop{width:min(100%,calc((100dvh - 14px)*16/9));margin-inline:auto}.kanji-workshop:fullscreen{width:100vw}}

.result-paper h2 span{display:inline-block}.result-tiles button{display:flex;align-items:center;justify-content:center;padding-bottom:20px}
@media(max-width:600px) and (orientation:portrait){.parts-board .wood-tile{height:auto;width:clamp(76px,26cqw,104px);max-width:44%;font-size:clamp(48px,16cqw,60px);padding:6px}.result-tiles button{padding:4px 4px 16px}}

.dialog-paper{background-image:url(assets/plain-paper.webp)}.help-mini.options .wood-tile{max-width:30%}
@media(min-width:1000px){.help-mini .wood-tile{width:clamp(75px,9cqw,140px);font-size:clamp(45px,5cqw,80px)}.help-mini.one .wood-tile{width:clamp(100px,11cqw,170px);font-size:clamp(65px,7cqw,105px)}}
@media(max-width:600px) and (orientation:portrait){.help-mini.options .wood-tile{font-size:25px;padding:3px}.help-mini.options{gap:4px}}