*{box-sizing:border-box}.learn-page{max-width:1320px;margin:auto;padding:12px}.learn-page>h1{margin:8px 0;color:#365a53}.pn-lead{margin:5px 0 12px}.atelier{position:relative;isolation:isolate;aspect-ratio:16/9;width:100%;border-radius:22px;overflow:hidden;container-type:size;background:#fff1d6 url('./assets/background.webp') center/cover;color:#36261c;font-family:'Zen Maru Gothic',sans-serif;font-weight:900;--tile:min(10cqw,18cqh)}.atelier:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border-radius:0}.atelier button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;min-height:34px}.atelier button:focus-visible{outline:4px solid #167e88;outline-offset:3px}.atelier button:disabled{cursor:default}.atelier button:not(.pane){border:1px solid #78552e;background:#fff6e2 url('./assets/button.webp') center/100% 100%;border-radius:12px;padding:5px 16px}.atelier button[aria-pressed=true]{box-shadow:inset 0 0 0 3px #087965}.toolbar{position:absolute;left:2%;right:2%;top:2%;height:7%;display:flex;justify-content:space-between;align-items:center;gap:8px;z-index:2;font-size:clamp(11px,1.2cqw,20px)}.toolbar strong{background:#fff4dcee;border-radius:9px;padding:3px 8px}.toolbar>div{display:flex;gap:4px}.toolbar button{padding:3px 7px!important;font-size:clamp(11px,1.1cqw,19px)}#scene{position:absolute;inset:11% 3% 3%}.menu{height:100%;display:grid;grid-template-columns:1.5fr 1fr;gap:5%;padding:0 8%;align-items:center}.main-window{height:100%;background:url('./assets/arch.webp') center/100% 100%;padding:18% 20% 12%;display:flex;flex-direction:column;justify-content:center;gap:8%}.main-window h2{font-size:clamp(20px,3.5cqw,58px);line-height:1.1;text-align:center;margin:0}.mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.mosaic img{width:100%;aspect-ratio:1;min-width:0;object-fit:contain}.settings{display:flex;flex-direction:column;height:92%;justify-content:center;gap:5%;text-align:center}.settings>p{font-size:clamp(12px,1.7cqw,26px);margin:0}.settings button{min-height:17%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:clamp(17px,2cqw,34px)}.settings button small{font-size:clamp(11px,1.2cqw,20px)}.settings #start{font-size:clamp(20px,2.5cqw,42px);color:#a83822}.play{height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:20% 33% 4% 26% 9% 8%}.stats{grid-column:1;grid-row:1;display:flex;gap:7px;height:100%;width:32%;align-self:start;justify-content:center}.stats span{flex:1;min-width:0;background:url('./assets/pendant.webp') center/100% 100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:15%}.stats small{font-size:clamp(10px,1.1cqw,18px)}.stats b{font-size:clamp(22px,2.7cqw,44px);line-height:1.1}.play>h2{grid-row:1;grid-column:1;justify-self:end;align-self:center;margin:0 20% 0 0;font-size:clamp(22px,3cqw,48px)}.sequence{grid-row:2;display:grid;grid-template-columns:repeat(7,var(--tile));gap:6px;align-content:center;justify-content:center;padding-bottom:18px}.pane{position:relative;width:var(--tile);height:var(--tile);background:url('./assets/pane.webp') center/100% 100%;border:0;min-width:0;padding:0}.pane img{position:absolute;left:15%;top:15%;width:70%;height:70%;object-fit:contain}.pane>small{position:absolute;left:0;right:0;bottom:-20px;height:18px;text-align:center;font-size:clamp(11px,1.2cqw,20px);line-height:18px}.question-mark{position:absolute;inset:15%;display:grid;place-items:center;font-size:clamp(24px,4.5cqw,72px);color:#b94939}.pane.unitmark{outline:3px solid #087b58;outline-offset:1px}.sequence-order{grid-row:3;text-align:center;align-self:center;margin:0;font-size:clamp(11px,1.2cqw,20px)}.choices{grid-row:4;display:flex;gap:22px;justify-content:center;align-items:center}.atelier .choice{width:var(--tile);height:var(--tile);min-height:0}.choice.wrong{outline:3px dashed #b75630;outline-offset:1px}.choice.correct{outline:5px solid #087b58;outline-offset:2px}.feedback{grid-row:5;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(12px,1.65cqw,26px);line-height:1.4}.play-actions{grid-row:6;display:flex;align-items:stretch;justify-content:space-between;gap:12px;font-size:clamp(12px,1.4cqw,24px)}.play-actions #next{color:#08664f;min-width:25%}.result{height:100%;display:grid;grid-template-rows:13% 67% 18%;gap:1%;text-align:center}.result>h2{font-size:clamp(22px,3cqw,50px);margin:0;align-self:center}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:20px}.gallery article{background:#fff8e7d9;border:2px solid #92672e;border-radius:12px;display:grid;grid-template-rows:20% 60% 20%;min-width:0;min-height:0;padding:5px}.gallery h3{margin:0;font-size:clamp(14px,1.5cqw,24px)}.mini-sequence{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center}.mini-sequence img{width:100%;max-height:100%;aspect-ratio:1;object-fit:contain;background:url('./assets/pane.webp') center/100% 100%;padding:10%;min-width:0}.gallery p{margin:0;font-size:clamp(10px,1.1cqw,18px)}.result-bottom{display:flex;align-items:center;justify-content:space-around;gap:10px;background:#fce3a6b8;border:2px solid #b08036;border-radius:20px;padding:8px;font-size:clamp(12px,1.5cqw,24px)}.result-bottom p{margin:0}.result-bottom b{font-size:1.6em}.result-bottom button{font-size:clamp(14px,1.7cqw,28px)}.sheet{position:absolute;inset:0;z-index:5;background:#48381dbb;display:grid;place-items:center;padding:3%}.sheet-card{width:min(92%,620px);max-height:100%;overflow:auto;background:#fff6df;border:3px solid #94713e;border-radius:22px;padding:18px;text-align:center;font-size:clamp(14px,1.5cqw,24px);line-height:1.7}.sheet-card h2{margin:0 0 8px}.sheet-card button{margin:5px}.atelier [hidden]{display:none!important}.parent-note{max-width:850px;margin:25px auto;line-height:1.9}
@container(max-aspect-ratio:1/1){.atelier{--tile:19cqw}.toolbar{height:9%;flex-direction:column;justify-content:center;gap:3px}.toolbar strong{font-size:13px}.toolbar button{font-size:12px}#scene{inset:12% 3% 3%}.menu{grid-template-columns:1fr;grid-template-rows:52% 48%;padding:0 8%;gap:0}.main-window{width:84%;justify-self:center;padding:15% 20% 6%;gap:4%}.main-window h2{font-size:27px}.mosaic{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;max-height:60%}.mosaic img{height:40px}.settings{gap:5px;height:100%}.settings>p{font-size:14px}.settings button{font-size:20px;min-height:46px}.settings button small{font-size:11px}.settings #start{font-size:24px}.play{grid-template-rows:20% 35% 4% 22% 10% 9%;--tile:19cqw}.stats{width:100%;height:75%;align-self:end;justify-self:center;max-width:280px}.stats span{padding-top:8%}.stats small{font-size:11px}.stats b{font-size:26px}.play>h2{font-size:24px;align-self:start;justify-self:center;margin:0}.sequence{grid-template-columns:repeat(4,var(--tile));row-gap:25px;column-gap:4px;padding-bottom:18px}.sequence-order{font-size:0}.sequence-order::after{content:'1→2→3→4、5→6→7 の じゅん';font-size:12px}.pane>small{font-size:12px}.question-mark{font-size:35px}.choices{gap:18px}.feedback{font-size:13px}.play-actions{gap:6px;font-size:13px}.play-actions button{padding:3px 8px!important}.result{grid-template-rows:9% 70% 19%}.result>h2{font-size:23px}.gallery{grid-template-columns:1fr;grid-template-rows:repeat(6,minmax(0,1fr));gap:5px}.gallery article{grid-template-columns:20px 1fr;grid-template-rows:1fr 16px;padding:2px 6px}.gallery h3{grid-row:1/3;align-self:center;font-size:16px}.mini-sequence{grid-column:2;min-height:0}.mini-sequence img{height:100%;max-height:45px;width:100%}.gallery p{grid-column:2;font-size:11px;line-height:16px}.result-bottom{flex-wrap:wrap;gap:5px;padding:5px}.result-bottom p{width:100%;font-size:14px}.result-bottom button{font-size:18px}.sheet-card{font-size:14px}}@media(max-width:600px) and (orientation:portrait){.atelier{aspect-ratio:auto;height:min(780px,calc(100svh - 20px));min-height:640px}.learn-page{padding:7px}.learn-page>h1{font-size:25px}}

.main-window{position:relative;padding:0}.main-window h2{position:absolute;top:26%;left:18%;right:18%;font-size:clamp(20px,3cqw,48px)}.mosaic{position:absolute;top:42%;left:23%;right:23%;bottom:13%;grid-template-rows:repeat(3,minmax(0,1fr));max-height:none}.mosaic img{height:100%;width:100%;min-height:0}@container(max-aspect-ratio:1/1){.main-window{padding:0}.main-window h2{font-size:27px}.mosaic{top:48%;max-height:none}.mosaic img{height:100%}}