:root{--navy:#17345f;--blue:#2366a8;--sky:#e9f4fb;--yellow:#f4c653;--cream:#fbf7ee;--ink:#1e2b3c;--muted:#657384;--line:#d9e0e4;--white:#fffefa}*{box-sizing:border-box}html{background:var(--cream);min-height:100%}body{min-height:100vh;color:var(--ink);background:radial-gradient(circle at 8% 10%,#f4c6533d,transparent 24rem),radial-gradient(circle at 95% 86%,#2366a81f,transparent 28rem),var(--cream);margin:0;font-family:Hiragino Sans,Yu Gothic,Noto Sans JP,system-ui,sans-serif}button{font:inherit}.page-shell{flex-direction:column;width:min(820px,100% - 28px);min-height:100vh;margin:0 auto;padding:34px 0 22px;display:flex}.welcome-card,.practice-card,.done-card{background:#fffefaf5;border:1px solid #17345f21;border-radius:30px;position:relative;overflow:hidden;box-shadow:0 26px 80px #17345f1f}.welcome-card{margin:auto 0;padding:clamp(32px,7vw,66px)}.welcome-card:after,.done-card:after{content:"";border:30px solid #f4c65338;border-radius:50%;width:180px;height:180px;position:absolute;top:-68px;right:-76px}.lesson-chip{color:var(--navy);background:#e6f1f8;border-radius:999px;padding:7px 13px;font-size:.8rem;font-weight:800;display:inline-block}.kicker{color:var(--blue);letter-spacing:.15em;margin:25px 0 8px;font-size:.72rem;font-weight:850}.welcome-card h1,.done-card h1{color:var(--navy);letter-spacing:.03em;margin:0;font-family:Hiragino Mincho ProN,Yu Mincho,serif;font-size:clamp(2.5rem,8vw,4.6rem);line-height:1.15}.welcome-card h1 span{color:var(--blue)}.welcome-copy{max-width:530px;color:var(--muted);margin:23px 0 30px;font-size:1.05rem;line-height:1.9}.welcome-actions{flex-wrap:wrap;gap:12px;display:flex}.primary-button,.secondary-button,.next-button,.listen-button,.hint-toggle{cursor:pointer;border:0;transition:transform .15s,box-shadow .15s,background .15s}.primary-button{color:#fff;background:var(--navy);border-radius:14px;padding:15px 22px;font-weight:800}.primary-button:hover,.primary-button:focus-visible,.next-button:hover:not(:disabled),.next-button:focus-visible:not(:disabled){background:#102845;outline:3px solid #2366a838;transform:translateY(-1px)}.secondary-button{color:var(--navy);background:#fff;border:1px solid #b9cfdf;border-radius:14px;padding:14px 19px;font-weight:750}.secondary-button:hover,.secondary-button:focus-visible{border-color:var(--blue);outline:3px solid #2366a826}.welcome-meta{flex-wrap:wrap;gap:8px;margin-top:28px;display:flex}.welcome-meta span{color:#667485;background:#f3f4f3;border-radius:8px;padding:6px 10px;font-size:.75rem;font-weight:700}.role-intro{padding-top:clamp(28px,5vw,52px)}.role-intro .welcome-copy{margin-bottom:20px}.role-card{background:linear-gradient(145deg,#eef7fc,#fffaf0);border:1px solid #b9cfdf;border-radius:20px;max-width:620px;margin:18px 0 27px;padding:20px;box-shadow:0 12px 30px #17345f14}.role-card-title{color:var(--navy);border-bottom:1px solid #cfdee7;align-items:center;gap:12px;padding-bottom:14px;display:flex}.role-card-title>span{color:#fff;background:var(--blue);border-radius:50%;justify-content:center;align-items:center;width:43px;height:43px;font-size:1.25rem;display:flex}.role-card small{color:#6d7d8a;letter-spacing:.11em;font-size:.65rem;font-weight:850;display:block}.role-card strong{color:var(--navy);margin-top:2px;font-size:1rem;display:block}.role-facts{grid-template-columns:repeat(3,1fr);gap:10px;padding-top:14px;display:grid}.role-facts>div{text-align:center;background:#ffffffd9;border-radius:14px;flex-direction:column;justify-content:center;min-height:92px;padding:12px;display:flex}.role-facts>div>span{margin-bottom:5px;font-size:1.5rem}.role-card.compact{margin:0 0 20px;padding:13px}.role-card.compact .role-card-title{display:none}.role-card.compact .role-facts{padding-top:0}.role-card.compact .role-facts>div{min-height:72px;padding:8px}footer{color:#7c8791;text-align:center;margin-top:auto;padding-top:18px;font-size:.77rem}.practice-header{justify-content:space-between;align-items:end;gap:20px;margin:12px 0 18px;display:flex}.practice-header .kicker{margin:0 0 5px}.practice-header h1{color:var(--navy);margin:0;font-family:Hiragino Mincho ProN,Yu Mincho,serif;font-size:clamp(1.55rem,4vw,2.35rem)}.step-count{color:var(--muted);white-space:nowrap}.step-count strong{color:var(--blue);font-size:2.25rem}.progress{background:#dae2e6;border-radius:999px;height:7px;margin-bottom:18px;overflow:hidden}.progress div{border-radius:inherit;background:linear-gradient(90deg,var(--yellow),#efa844);height:100%;transition:width .3s}.practice-card{padding:clamp(24px,5.5vw,48px)}.prompt-tag{color:#76601d;background:#fff0bc;border-radius:8px;padding:6px 11px;font-size:.78rem;font-weight:800;display:inline-block}.instruction{color:var(--muted);margin:20px 0 11px;font-size:.88rem}.listen-button{width:100%;min-height:68px;color:var(--navy);background:var(--sky);text-align:left;border:1px solid #b8d1e1;border-radius:17px;align-items:center;gap:15px;padding:13px 18px;font-weight:800;display:flex}.listen-button:hover,.listen-button:focus-visible{border-color:var(--blue);outline:3px solid #2366a824;transform:translateY(-1px)}.listen-button.playing{color:#fff;background:var(--blue)}.speaker{color:#fff;background:var(--blue);border-radius:50%;flex:none;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.15rem;display:inline-flex}.playing .speaker{color:var(--blue);background:#fff}.question-panel{border-left:5px solid var(--yellow);background:#faf8f1;border-radius:0 16px 16px 0;margin:27px 0 20px;padding:23px 24px}.question-label{color:#8c7952;letter-spacing:.12em;font-size:.72rem;font-weight:850}.question-panel h2{color:var(--navy);margin:8px 0 0;font-family:Hiragino Mincho ProN,Yu Mincho,serif;font-size:clamp(1.3rem,3.7vw,1.9rem);line-height:1.65}.answer-zone{color:#4d5966;background:#f0f2f3;border-radius:16px;align-items:center;gap:17px;min-height:88px;margin-bottom:17px;padding:15px 18px;animation:.22s ease-out rise;display:flex}.answer-zone.ready{color:#315c4c;background:#eaf5ef}.answer-zone strong{margin-bottom:3px;display:block}.answer-zone p{margin:0;font-size:.84rem}.countdown{border:4px solid var(--yellow);width:54px;height:54px;color:var(--navy);background:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:1.5rem;font-weight:900;display:flex}.hint-wrap{border-top:1px solid var(--line);padding-top:16px}.hint-toggle{width:100%;color:var(--blue);text-align:left;background:0 0;justify-content:space-between;padding:11px 3px;font-size:.88rem;font-weight:800;display:flex}.hint-toggle:focus-visible{border-radius:8px;outline:3px solid #2366a82b}.hint-box{color:var(--navy);background:#fff6d6;border-radius:13px;padding:15px 18px;animation:.18s ease-out rise}.hint-box p{margin:5px 0;font-size:1.02rem;font-weight:750}.navigation{justify-content:flex-end;margin-top:22px;display:flex}.next-button{color:#fff;background:var(--navy);border-radius:14px;justify-content:center;align-items:center;gap:15px;min-width:165px;padding:14px 18px;font-weight:800;display:flex}.next-button:disabled{color:#8b949b;cursor:not-allowed;background:#e0e4e6}.done-card{text-align:center;width:min(630px,100%);margin:auto;padding:clamp(35px,7vw,64px)}.done-icon{color:#fff;background:var(--blue);border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;margin:0 auto 20px;font-size:2rem;font-weight:900;display:flex;box-shadow:0 0 0 9px #e8f2f8}.done-card .kicker{margin-top:0}.done-card h1{font-size:clamp(2rem,6vw,3.3rem)}.done-card>p:not(.kicker){color:var(--muted);line-height:1.8}.done-summary{justify-content:center;align-items:baseline;gap:10px;margin:24px 0;display:flex}.done-summary strong{color:var(--blue);font-size:3.8rem;line-height:1}.done-summary span{color:var(--muted);font-weight:700}@keyframes rise{0%{opacity:0;transform:translateY(5px)}}@media (width<=620px){.page-shell{width:min(100% - 20px,820px);padding-top:21px}.welcome-card,.practice-card,.done-card{border-radius:22px}.welcome-actions{flex-direction:column}.welcome-actions button{width:100%}.practice-header{align-items:center}.step-count strong{font-size:1.8rem}.practice-card{padding:22px 18px}.question-panel{padding:19px 16px}.role-facts{gap:6px}.role-facts>div{min-height:82px;padding:8px 4px}.role-card strong{font-size:.86rem}.next-button{width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

.question-panel h2,.hint-box p,.prompt-tag{font-family:YuKyokasho,"Yu Kyokasho","UD Digi Kyokasho N-R","UD デジタル 教科書体 N-R","Klee One Local","Hiragino Mincho ProN","Yu Mincho",serif;font-weight:500}

@font-face{font-family:"Klee One Local";src:url("./KleeOne-subset.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}