*{box-sizing:border-box}body{margin:0;font-family:"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;background:#fffaf1;color:#333}.screen{min-height:100vh;padding:18px;display:flex;flex-direction:column;align-items:center}.card{width:min(920px,100%);background:white;border-radius:28px;box-shadow:0 8px 24px #0001;padding:22px;text-align:center}.homecard{padding-top:28px}.brand{display:inline-flex;align-items:center;justify-content:center;background:#ff7b54;color:#fff;border-radius:999px;font-weight:900;letter-spacing:.03em;padding:10px 18px;box-shadow:0 4px 0 #d95e3e;border:4px solid #fff}.title{font-size:clamp(34px,8vw,72px);margin:18px 0 8px}.sub{font-size:clamp(16px,3.6vw,24px);color:#666}.menu{display:grid;gap:16px;margin-top:28px}.btn{border:0;border-radius:22px;background:#8ed081;color:white;font-weight:800;font-size:clamp(20px,5vw,34px);padding:18px 22px;box-shadow:0 5px 0 #65ad58;cursor:pointer}.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #65ad58}.btn.orange{background:#ffb86b;box-shadow:0 5px 0 #df8e3e}.btn.blue{background:#78aee8;box-shadow:0 5px 0 #4b82bd}.topbar{width:min(920px,100%);display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin-bottom:10px}.topbar .smallbtn{justify-self:start}.topbar .progress{justify-self:end}.smallbtn{border:0;border-radius:999px;background:#fff;color:#555;padding:12px 16px;font-size:18px;font-weight:700;box-shadow:0 3px 12px #0001}.progress{font-weight:800;color:#777}.bigchar{font-size:clamp(90px,25vw,210px);line-height:1.05;margin:20px 0}.kanaStage{min-height:48vh;display:flex;align-items:center;justify-content:center}.kanaimg{max-width:min(78vw,420px);max-height:48vh;object-fit:contain;margin:22px auto;display:block}.strokeimg{max-width:min(82vw,520px);max-height:45vh;object-fit:contain;background:white;border-radius:20px}.traceimg{filter:none}.canvaswrap{position:relative;display:inline-block;background:#fff;border-radius:20px;overflow:hidden}.draw{position:absolute;left:0;top:0;width:100%;height:100%;touch-action:none}.wordOnlyWrap{min-height:42vh;display:flex;align-items:center;justify-content:center}.wordtextimg{max-width:min(88vw,760px);max-height:28vh;object-fit:contain}.wordimg{max-width:min(90vw,720px);max-height:58vh;object-fit:contain}.nav{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:18px}.hidden{display:none}.hint{color:#777;font-size:18px;margin-top:10px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:10px;max-height:28vh;overflow:auto;margin-top:15px}.pick{font-size:28px;background:#fff;border:2px solid #eee;border-radius:16px;padding:12px}@media(max-width:520px){.topbar{grid-template-columns:1fr;justify-items:center}.topbar .smallbtn,.topbar .progress{justify-self:center}.brand{font-size:14px}.grid{grid-template-columns:repeat(auto-fit,minmax(56px,1fr))}.pick{font-size:24px;padding:10px}}

.logoimg{width:82px;height:auto;display:block;border-radius:18px}.topbar .logoimg{width:64px}.homecard .logoimg{width:130px;margin:0 auto 10px}.pick.active{background:#fff1c7;border-color:#ffb86b;box-shadow:0 0 0 3px #ffe3b3}.kanaGrid{max-height:24vh}.canvaswrap{min-height:180px}.strokeimg{display:block}.wordOnlyWrap{overflow:hidden}.wordtextimg{max-width:min(88vw,760px);max-height:34vh;object-fit:contain}

.strokeStage{display:flex;justify-content:center;align-items:center;min-height:48vh}
.animwrap{position:relative;display:inline-block;background:#fff;border-radius:20px;overflow:hidden}
.animwrap .strokeimg{display:block}
.strokebase{position:relative;z-index:1}
.blankbase{width:min(82vw,520px);height:45vh;background:#fff}
.strokeoverlay{position:absolute;left:0;top:0;z-index:2}
.drawRevealLR{animation:revealLR 1.05s ease-out both}
.drawRevealTB{animation:revealTB 1.05s ease-out both}
.drawFade{animation:softFade .6s ease-out both}
@keyframes revealLR{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes revealTB{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes softFade{from{opacity:.25}to{opacity:1}}
.wordOnlyWrap{min-height:45vh;align-items:center}
.wordtextimg{max-width:min(92vw,860px);max-height:46vh;object-fit:contain}
/* v5: 書き順をきれいに重ねるための調整 */
.animwrap.improved{position:relative;display:inline-block;background:#fff;border-radius:20px;overflow:hidden;line-height:0}
.animwrap.improved .stageSizer{display:block;opacity:0;max-width:min(82vw,520px);max-height:45vh;width:auto;height:auto}
.strokeLayer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.traceLayer{z-index:1;opacity:1}
.prevLayer{z-index:2}
.strokeoverlay{z-index:3}
.strokeimg{border:none!important;box-shadow:none!important}
.canvaswrap{line-height:0}
/* v6: 書き順の四角い枠を消し、透明PNGとして重ねる */
.strokeStage{display:flex;align-items:center;justify-content:center;min-height:46vh;background:transparent;}
.animwrap.improved{position:relative;display:inline-block;width:min(82vw,520px);height:min(82vw,520px);max-height:52vh;background:transparent;border:0;overflow:hidden;}
.animwrap.improved .stageSizer{width:100%;height:100%;object-fit:contain;visibility:hidden;background:transparent;border:0;}
.strokeLayer{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;background:transparent;border:0;}
.traceLayer{opacity:.32;filter:grayscale(1);}
.prevLayer{opacity:1;}
.strokeoverlay{opacity:1;}
.strokeimg{background:transparent!important;border:0!important;box-shadow:none!important;}
.canvaswrap{background:transparent!important;border:0!important;}
.drawRevealLR{animation:revealLR 1.15s ease-out both;}
.drawRevealTB{animation:revealTB 1.15s ease-out both;}
.drawFade{animation:fadeInStroke .75s ease-out both;}
@keyframes revealLR{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes revealTB{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fadeInStroke{from{opacity:0}to{opacity:1}}

/* v8: タイトル変更・書き順の二重線と完成後の縮小を軽減 */
.finalwrap{width:min(82vw,520px)!important;height:min(82vw,520px)!important;max-height:52vh!important;}
.fixedCanvas{position:relative;display:inline-block;width:min(82vw,520px);height:min(82vw,520px);max-height:52vh;background:transparent!important;border:0!important;overflow:hidden;line-height:0;}
.fixedCanvas .stageSizer{width:100%;height:100%;object-fit:contain;visibility:hidden;display:block;}
.fixedCanvas .strokeLayer{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;}
.fixedCanvas .draw{position:absolute;left:0;top:0;width:100%;height:100%;}
.title{font-size:clamp(34px,8vw,68px);font-weight:900;}
.sub{font-size:clamp(15px,3.6vw,25px);}

/* v9: 変わるのは今書いている画だけ */
.animwrap.newStroke{
  position:relative;
  display:inline-block;
  width:min(82vw,520px);
  height:min(82vw,520px);
  max-height:52vh;
  background:transparent;
  border:0;
  overflow:hidden;
  line-height:0;
}
.animwrap.newStroke .stageSizer{
  width:100%;height:100%;object-fit:contain;visibility:hidden;display:block;
}
.animwrap.newStroke .traceLayer{
  opacity:1;
  filter:none;
  z-index:1;
}
.animwrap.newStroke .partLayer{
  z-index:2;
  background:transparent!important;
  border:0!important;
}
.animwrap.newStroke .currentPart{z-index:3;}
.animwrap.newStroke .donePart{opacity:1;}
.animwrap.newStroke .drawRevealLR{animation:revealLR 1.25s ease-out both;}
.animwrap.newStroke .drawRevealTB{animation:revealTB 1.25s ease-out both;}
.animwrap.newStroke .drawFade{animation:softCurrent .95s ease-out both;}
@keyframes softCurrent{from{opacity:0}to{opacity:1}}

/* v11: Go Up Kids 書き順ナビ */
.animwrap.strokeNavi{
  position:relative;
  display:inline-block;
  width:min(82vw,520px);
  height:min(82vw,520px);
  max-height:52vh;
  background:transparent;
  border:0;
  overflow:hidden;
  line-height:0;
}
.animwrap.strokeNavi .stageSizer{
  width:100%;height:100%;object-fit:contain;visibility:hidden;display:block;
}
.cleanTrace{opacity:1;filter:none;z-index:1;}
.guideDone{z-index:2;opacity:1;filter:none;}
.strokeGuide{
  position:absolute;
  transform:translate(-50%,-50%);
  z-index:5;
  font-weight:900;
  font-family:"Yu Gothic","Hiragino Maru Gothic ProN",sans-serif;
  font-size:clamp(34px,8vw,64px);
  line-height:1;
  color:#111;
  background:rgba(255,255,255,.9);
  border:4px solid #111;
  border-radius:22px;
  padding:.18em .35em .24em;
  box-shadow:0 4px 12px #0002;
  animation:guidePop .25s ease-out both;
}
@keyframes guidePop{from{opacity:0;transform:translate(-50%,-50%) scale(.86)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.fixedCanvas .traceimg{opacity:1;filter:none;}


/* v12: シンプルな書き順ナビ。数字なし・矢印だけ・子どもが書いた線だけ黒 */
.simpleNavi .cleanTrace{opacity:1;filter:none;z-index:1;}
.strokeArrow{
  position:absolute;
  transform:translate(-50%,-50%);
  z-index:5;
  font-weight:900;
  font-family:"Yu Gothic","Hiragino Maru Gothic ProN",sans-serif;
  font-size:clamp(42px,10vw,86px);
  line-height:1;
  color:#111;
  background:transparent;
  border:0;
  padding:0;
  box-shadow:none;
  text-shadow:0 2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff;
  animation:arrowPop .18s ease-out both;
}
@keyframes arrowPop{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.fixedCanvas .draw{cursor:crosshair;}
.fixedCanvas .traceimg{opacity:1;filter:none;}

/* v13: 教材ページ共通ヘッダー */
.topbar{grid-template-columns:auto 1fr auto;}
.topbar .progress{justify-self:center;}
.topbar .logoimg{width:42px;justify-self:end;border-radius:10px;}
@media(max-width:520px){
  .topbar{grid-template-columns:auto 1fr auto;justify-items:stretch;}
  .topbar .smallbtn{justify-self:start;font-size:15px;padding:10px 13px;}
  .topbar .progress{justify-self:center;font-size:15px;}
  .topbar .logoimg{width:36px;justify-self:end;}
}

/* v14: 端末のフォントに依存しない「あ〜ん」の画像書き順 */
.kj-lesson{overflow:hidden;margin:-22px;border-radius:28px;--kj-ink:#26303a;--kj-muted:#69747f;--kj-paper:#fffdf7;--kj-cream:#fff6da;--kj-orange:#f5a623;--kj-orange2:#d87b08;--kj-teal:#168d87;--kj-red:#ef4e45;--kj-line:#eadfca;color:var(--kj-ink);}
.kj-rowtabs{display:flex;gap:7px;overflow-x:auto;padding:12px 14px;background:#e9f7f5;border-bottom:1px solid #cfe5e2;scrollbar-width:thin;}
.kj-rowtab{flex:0 0 auto;min-width:67px;min-height:38px;padding:5px 12px;border:0;border-radius:999px;color:#4c6265;background:#ffffffc7;font-size:14px;font-weight:800;cursor:pointer;}
.kj-rowtab.on{color:#fff;background:var(--kj-teal);}
.kj-tabs{display:flex;justify-content:center;gap:10px;padding:16px;background:var(--kj-cream);border-bottom:1px solid var(--kj-line);}
.kj-tab{width:min(104px,17vw);min-height:68px;border:2px solid transparent;border-radius:18px;color:var(--kj-ink);background:#ffffffb8;font-family:"Yu Gothic","Hiragino Maru Gothic ProN",sans-serif;font-size:38px;cursor:pointer;transition:.18s;}
.kj-tab:hover{transform:translateY(-2px);}.kj-tab.on{border-color:var(--kj-orange);color:var(--kj-orange2);background:#fff;box-shadow:0 5px 0 #d87b0824;}
.kj-grid{display:grid;grid-template-columns:minmax(360px,1.15fr) minmax(310px,.85fr);gap:44px;align-items:center;padding:38px 46px 44px;}
.kj-stage{position:relative;width:min(100%,490px);aspect-ratio:1;margin:auto;overflow:hidden;border:3px solid #d6e6e3;border-radius:26px;background-color:var(--kj-paper);background-image:linear-gradient(to right,transparent calc(50% - 1px),#d8e9e7 calc(50% - 1px),#d8e9e7 calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(to bottom,transparent calc(50% - 1px),#d8e9e7 calc(50% - 1px),#d8e9e7 calc(50% + 1px),transparent calc(50% + 1px));}
.kj-stage:before,.kj-stage:after{content:"";position:absolute;z-index:0;border:1px dashed #168d872e;}.kj-stage:before{inset:12% 0;border-left:0;border-right:0}.kj-stage:after{inset:0 12%;border-top:0;border-bottom:0}
.kj-guideimg,.kj-stroke{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none;}
.kj-guideimg{z-index:1;opacity:0;transition:opacity .22s;}.kj-guideimg.show{opacity:1;}.kj-stroke{z-index:2;opacity:0;transform:scale(.992);transition:opacity .22s,transform .3s;}.kj-stroke.show{opacity:1;transform:scale(1)}.kj-stroke.active{filter:invert(38%) sepia(87%) saturate(2205%) hue-rotate(338deg) brightness(105%) contrast(88%);animation:kj-arrive .45s cubic-bezier(.2,.8,.2,1)}
@keyframes kj-arrive{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}
.kj-dots{display:flex;justify-content:center;gap:12px;margin-top:18px}.kj-dots span{display:grid;width:40px;height:40px;place-items:center;border:2px solid #d5dfdf;border-radius:50%;color:#899292;background:#fff;font-weight:800;transition:.2s}.kj-dots span.done{border-color:var(--kj-teal);color:#fff;background:var(--kj-teal)}
.kj-label{margin:0;color:var(--kj-muted);font-size:18px;font-weight:700}.kj-status{min-height:76px;margin:12px 0 24px;font-size:clamp(26px,3.3vw,41px);font-weight:900;line-height:1.25}.kj-status.complete{color:var(--kj-red)}.kj-status.tracing{color:var(--kj-teal)}
.kj-controls{display:grid;gap:12px}.kj-play,.kj-replay,.kj-clear,.kj-speeds button{border:0;border-radius:15px;cursor:pointer}.kj-play{min-height:64px;color:#fff;background:var(--kj-orange);box-shadow:0 7px 0 var(--kj-orange2);font-size:20px;font-weight:900}.kj-play:active{transform:translateY(4px);box-shadow:0 3px 0 var(--kj-orange2)}.kj-replay{min-height:48px;color:var(--kj-teal);background:#eaf7f5;font-weight:800}.kj-clear{min-height:48px;color:#087cad;background:#e7f7fd;font-size:16px;font-weight:900}
.kj-field{margin:28px 0 20px;padding:0;border:0}.kj-field legend{margin-bottom:9px;font-size:14px;font-weight:800}.kj-speeds{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.kj-speeds button{min-height:42px;color:#59636c;background:#f1f3f3;font-size:14px;font-weight:700}.kj-speeds button.on{color:#fff;background:var(--kj-teal)}
@media(max-width:780px){.kj-grid{grid-template-columns:1fr;gap:26px;padding:24px 20px 32px}.kj-stage{width:min(100%,410px)}.kj-control{text-align:center}.kj-controls{max-width:440px;margin:auto}.kj-status{min-height:auto}}
@media(max-width:520px){.kj-lesson{margin:-22px}.kj-rowtabs{padding:9px 10px}.kj-rowtab{min-width:61px;padding-inline:10px}.kj-tabs{gap:6px;padding:10px}.kj-tab{min-height:58px;border-radius:13px;font-size:32px}}
.kj-stage.is-tracing{overscroll-behavior:contain}.kj-drawcanvas{position:absolute;inset:0;z-index:6;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
@media(prefers-reduced-motion:reduce){.kj-lesson *,.kj-lesson *:before,.kj-lesson *:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}