@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root{font-family:'Noto Sans SC','Noto Sans JP',system-ui,sans-serif;color:#1d312e;background:#f5f3ec;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:320px}button{font:inherit}.shell{max-width:1080px;margin:auto;padding:0 36px 34px}.topbar{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dbdfd5}.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:17px;letter-spacing:.04em}.brand-mark{width:35px;height:35px;display:grid;place-items:center;border:1.5px solid #244e43;border-radius:50%;font-family:'Noto Sans JP',sans-serif;font-size:15px}.topbar-note{color:#85958c;font-size:12px;letter-spacing:.09em}.intro{padding:54px 0 37px}.eyebrow{display:flex;align-items:center;gap:10px;color:#658976;font-size:10px;font-weight:700;letter-spacing:.18em}.eyebrow-line{width:24px;height:1px;background:#658976}.intro h1{font-size:clamp(33px,4vw,49px);line-height:1.4;letter-spacing:-.045em;margin:19px 0 15px;font-weight:700}.intro h1 em{font-style:normal;color:#829787}.intro p{margin:0;color:#6b7c72;font-size:13px;line-height:1.9}.practice{border:1px solid #d8ded3;border-radius:19px;background:#fffefa;box-shadow:0 20px 55px rgba(29,49,46,.045);overflow:hidden}.practice-head{height:69px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e6e9e0;padding:0 35px}.round-label{font-size:11px;font-weight:700;letter-spacing:.1em;color:#54695d}.round-label span{color:#b4bdb4;margin:0 7px}.count{font-size:15px;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums}.count-divider,#total{color:#9ca99f;font-weight:400}.question-area{min-height:291px;padding:30px 35px 20px;display:flex;flex-direction:column;align-items:center}.grade-row{align-self:stretch;display:flex;align-items:center;gap:10px}.grade{display:inline-flex;align-items:center;justify-content:center;background:#eaf1e8;color:#477662;padding:5px 11px;border-radius:6px;font-size:12px;font-weight:700;letter-spacing:.03em}.grade-caption{font-size:11px;color:#a7b2a8}.visual{height:114px;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px}.visual span{height:var(--h);width:5px;background:#6b947c;border-radius:99px;opacity:.7;transition:height .25s}.visual span:nth-child(1),.visual span:nth-child(15){--h:12px}.visual span:nth-child(2),.visual span:nth-child(14){--h:25px}.visual span:nth-child(3),.visual span:nth-child(13){--h:42px}.visual span:nth-child(4),.visual span:nth-child(12){--h:23px}.visual span:nth-child(5),.visual span:nth-child(11){--h:63px}.visual span:nth-child(6),.visual span:nth-child(10){--h:39px}.visual span:nth-child(7),.visual span:nth-child(9){--h:74px}.visual span:nth-child(8){--h:51px}.practice.is-playing .visual span{animation:pulse .8s ease-in-out infinite alternate;animation-delay:calc(var(--n,0) * -90ms)}.visual span:nth-child(2n){--n:2}.visual span:nth-child(3n){--n:4}.visual span:nth-child(5n){--n:6}@keyframes pulse{to{height:12px;opacity:.4}}.status{color:#8b9b90;font-size:12px;margin:2px 0 12px}.question-panel{width:min(100%,650px);text-align:center;padding:12px 0 9px;animation:appear .2s ease-out}.question-panel[hidden]{display:none}.question-caption{font-size:10px;letter-spacing:.15em;font-weight:700;color:#9bad9e}.question-panel p{font-family:'Noto Sans JP',sans-serif;font-size:clamp(17px,2.4vw,23px);line-height:1.7;color:#263e33;margin:10px 0 0;font-weight:600}@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.controls{border-top:1px solid #e6e9e0;padding:23px 35px 29px;display:grid;grid-template-columns:1.38fr 1fr 1fr 1.1fr;gap:10px}.button{height:56px;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:600;transition:background .16s,transform .16s,border-color .16s}.button:active{transform:scale(.985)}.button:focus-visible{outline:3px solid #e7a571;outline-offset:2px}.button-primary{background:#284e40;border:1px solid #284e40;color:#fff}.button-primary:hover{background:#38634f}.button-outline{background:#fffefa;border:1px solid #dbe2d8;color:#3e6150}.button-outline:hover{background:#eff5ed;border-color:#a7bfab}.button-next{background:#f3e9df;border:1px solid #f3e9df;color:#724a35;justify-content:space-between;padding:0 19px}.button-next:hover{background:#ead9c8}.icon{font-size:20px;line-height:1;font-weight:400}.button-primary .icon{font-size:15px}.icon-text{font-size:18px;font-family:'Noto Sans JP',sans-serif}.arrow{font-size:23px;font-weight:400}.progress{height:4px;background:#e8eee7}.progress span{display:block;height:100%;background:#78a589;width:2.5%;transition:width .25s}footer{text-align:center;color:#a1ada1;font-size:11px;padding-top:24px;line-height:1.8}@media(max-width:680px){.shell{padding:0 18px 25px}.topbar{height:72px}.brand{font-size:15px}.topbar-note{font-size:10px}.intro{padding:45px 4px 30px}.intro h1{font-size:clamp(29px,8vw,37px)}.intro p{font-size:12px}.practice-head{height:61px;padding:0 20px}.question-area{min-height:275px;padding:24px 20px 12px}.visual{height:112px}.controls{padding:18px 18px 21px;grid-template-columns:1fr 1fr;gap:9px}.button{height:54px;font-size:13px}.button-primary{grid-column:1}.button-next{grid-column:2;grid-row:2}.question-panel p{font-size:18px}.practice{border-radius:15px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}