*{box-sizing:border-box}.letter-page{max-width:1280px;margin:20px auto;padding:0 16px}.letter-page>h1{font-size:28px;color:#244e3e;margin:0}.letter-page>p{color:#465d50;margin:8px 0 16px}.classroom{position:relative;container-type:inline-size;isolation:isolate;width:100%;aspect-ratio:16/9;overflow:hidden;background:#286148 url('./assets/blackboard.webp') center/100% 100%;color:#fffbed;border-radius:10px;font-family:'Zen Maru Gothic',sans-serif}.classroom button{font:900 clamp(11px,1.4cqw,21px)/1.25 'Zen Maru Gothic',sans-serif;border:2px solid #f4e7bb;border-radius:9px;padding:8px 12px;background:#fff6d9;color:#403729;cursor:pointer}.classroom button:focus-visible{outline:4px solid #ffdc53;outline-offset:2px}.classroom button:disabled{opacity:.5;cursor:default}.classroom button[aria-pressed=true]{background:#ffc653}.classroom button.coral{background:#f3a58f;color:#332722}.game-tools{position:absolute;right:2.5%;top:3.3%;display:flex;gap:6px;z-index:4;height:7%}.game-tools button{font-size:clamp(9px,1cqw,15px);padding:4px 6px}.game-tools button[aria-pressed=false]{background:#c8cfbb}.voice-status{position:absolute;left:3%;right:3%;bottom:3%;margin:0;text-align:center;font-size:clamp(11px,1.35cqw,20px);font-weight:700;line-height:1.3}#scene{position:absolute;inset:3% 3% 10%;display:grid;grid-template-rows:16% minmax(0,1fr);gap:3%}.scene-head{grid-row:1;min-height:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:5px}.mode-tabs,.sub-tabs{display:flex;gap:6px}.mode-tabs button,.sub-tabs button{font-size:clamp(10px,1.35cqw,19px);padding:5px 12px}.sub-tabs button{font-size:clamp(10px,1.2cqw,17px)}.study{grid-row:2;display:grid;grid-template-columns:23% minmax(0,1fr);gap:2%;min-height:0}.featured{display:grid;grid-template-rows:minmax(0,1fr) 12% 12% 12%;gap:2%;min-height:0}.picture-card{background:#fffbed;border:3px solid #efdcaa;border-radius:12px;color:#342c20;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;padding:8px}.feature-char{font:700 clamp(36px,6cqw,88px)/1.1 'UD デジタル 教科書体 NK-R','BIZ UDGothic','Yu Gothic',sans-serif}.feature-image{height:53%;width:90%;min-height:0;object-fit:contain;mix-blend-mode:multiply}.featured button{font-size:clamp(11px,1.35cqw,19px);padding:4px}.table-side{display:grid;grid-template-rows:minmax(0,1fr) 8%;gap:2%;min-height:0}.letter-table{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));gap:5px;min-height:0}.letter-cell{min-width:0;min-height:0;background:#fffbed;border:2px solid transparent;border-radius:7px;display:grid;grid-template-rows:39% minmax(0,1fr);gap:0;overflow:hidden}.letter-cell.empty{background:#fffbed15;border:1px dashed #eee5c34d}.letter-cell.selected{border-color:#ff926b;box-shadow:0 0 0 2px #ff926b}.letter-cell button{border:0;background:transparent!important;box-shadow:none;padding:0;min-width:0;min-height:0;border-radius:3px;color:#282720}.letter-cell .char{font:700 clamp(16px,2cqw,29px)/1.1 'UD デジタル 教科書体 NK-R','BIZ UDGothic','Yu Gothic',sans-serif}.letter-cell .word{display:grid;place-items:center;padding:2px 3px}.letter-cell img{width:100%;height:100%;min-height:0;max-height:100%;object-fit:contain;mix-blend-mode:multiply}.table-footer{display:flex;justify-content:space-between;align-items:center;font-size:clamp(10px,1.2cqw,17px)}.table-footer button{font-size:clamp(10px,1.2cqw,17px);padding:3px 10px}.menu-title{margin:0;font-size:clamp(24px,4.2cqw,60px);line-height:1.2}.menu-subtitle{font-size:clamp(12px,1.8cqw,26px);margin:5px 0 0}.books{grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4%;width:85%;justify-self:center;min-height:0}.books button{border:none;border-radius:4%;background:transparent url('./assets/cover0.webp') center/100% 100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3%;padding:10% 12% 8%;min-height:0}.books button:nth-child(2){background-image:url('./assets/cover1.webp')}.books button:nth-child(3){background-image:url('./assets/cover2.webp')}.books .cover-char{font:700 clamp(40px,6.5cqw,90px)/1 'UD デジタル 教科書体 NK-R','Yu Gothic',sans-serif}.books img{height:38%;width:90%;object-fit:contain;mix-blend-mode:multiply;min-height:0}.books strong{font-size:clamp(15px,2.3cqw,33px);white-space:nowrap}.focus-title{font-size:clamp(14px,2cqw,28px);margin:0;padding:10px 14px;background:#fff6d9;color:#3b3427;border-radius:9px;max-width:44%}.focus-content{grid-row:2;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) 14% 12%;gap:4%;min-height:0;padding:0 5%}.large-char{font:700 clamp(80px,18cqw,250px)/1 'UD デジタル 教科書体 NK-R','Yu Gothic',sans-serif}.large-word img{width:94%;height:94%;object-fit:contain;mix-blend-mode:multiply}.focus-content>.picture-card{grid-row:1}.focus-content>#hearChar,.focus-content>#hearWord{grid-row:2;font-size:clamp(15px,2.2cqw,30px)}.focus-nav{grid-row:3;grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:5%;font-size:clamp(13px,1.6cqw,23px)}.focus-nav button{font-size:clamp(11px,1.4cqw,21px);padding:6px 12px}.sheet{position:absolute;inset:0;z-index:10;background:#173f36d9;display:grid;place-items:center;padding:3%}.sheet[hidden]{display:none}.sheet>div{color:#403729;background:#fff8df;border:5px solid #d0b27b;border-radius:15px;max-width:600px;width:94%;max-height:100%;overflow:auto;padding:22px;display:grid;gap:12px}.sheet h2,.sheet p{margin:0}.sheet p{font-size:clamp(13px,1.5cqw,21px);line-height:1.6}.parent-note{font-size:13px!important}.classroom:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border-radius:0}@media(max-width:900px) and (orientation:landscape){.game-tools{gap:3px}.game-tools button{font-size:9px;padding:2px 4px}.mode-tabs button,.sub-tabs button{font-size:10px;padding:3px 7px}.letter-table{gap:3px}.letter-cell .char{font-size:16px}.featured button{font-size:10px}.focus-nav button{padding:3px 8px}.voice-status{font-size:11px}}@media(max-width:640px) and (orientation:portrait){.letter-page{padding:0 8px}.classroom{aspect-ratio:auto;padding:12px 12px 20px;background-size:100% 100%}.game-tools{position:relative;right:auto;top:auto;justify-content:flex-end;height:36px;gap:4px;margin:0 0 12px}.game-tools button{font-size:9px;padding:3px 4px}#scene{position:relative;inset:auto;display:flex;flex-direction:column;gap:16px}.scene-head{gap:9px}.mode-tabs,.sub-tabs{width:100%}.mode-tabs button,.sub-tabs button{flex:1;font-size:13px;padding:8px 4px}.study{display:flex;flex-direction:column;gap:18px}.featured{display:grid;grid-template-columns:44% 1fr;grid-template-rows:42px 42px 42px;gap:8px}.picture-card{grid-row:1/4;grid-column:1;padding:5px}.feature-char{font-size:36px}.feature-image{height:64%;width:90%}.featured button{grid-column:2;font-size:13px}.table-side{display:flex;flex-direction:column;gap:12px}.letter-table{grid-template-columns:repeat(var(--compact-columns),minmax(0,1fr));grid-template-rows:repeat(var(--compact-rows),86px);gap:5px}.letter-cell{grid-column:var(--compact-col)!important;grid-row:var(--compact-row)!important}.letter-cell .char{font-size:23px}.table-footer{font-size:12px}.table-footer button{font-size:12px;padding:7px 12px}.voice-status{position:static;margin:15px 4px 0;font-size:13px;min-height:34px}.menu-title{font-size:33px}.menu-subtitle{font-size:15px}.books{display:flex;flex-direction:column;gap:18px;width:100%;align-items:center}.books button{height:290px;width:210px;flex-shrink:0;padding:30px 25px 22px;gap:6px}.books .cover-char{font-size:58px}.books img{height:105px}.books strong{font-size:23px}.focus-title{font-size:18px;max-width:100%;padding:10px}.focus-content{padding:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:240px 55px auto;gap:10px}.focus-content>.picture-card{grid-row:1;grid-column:auto}.large-char{font-size:85px}.large-word img{width:100%;height:100%}.focus-content>#hearChar,.focus-content>#hearWord{font-size:14px;padding:5px}.focus-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;font-size:15px}.focus-nav button{font-size:13px;min-height:40px;padding:6px}.focus-nav #toList{grid-column:1/-1}.sheet>div{padding:16px}.sheet button{font-size:16px}.sheet p{font-size:14px}.classroom:fullscreen{overflow:auto;min-height:100dvh}.classroom:fullscreen .game-tools{position:sticky;top:0;background:#286148;padding:2px;z-index:6}}
@media(max-width:640px) and (orientation:portrait){.sheet{position:fixed;inset:0;padding:18px;z-index:1000}}

.large-char.double{font-size:clamp(60px,13cqw,180px)}@media(max-width:640px) and (orientation:portrait){.large-char.double{font-size:52px}}
