:root{--ink:#183046;--blue:#1769aa;--blue-dark:#0c4778;--cream:#fff8e8;--paper:#fff;--yellow:#ffd85a;--green:#287a3c;--red:#b52b2b;--shadow:0 5px 0 rgba(24,48,70,.13)}
*{box-sizing:border-box}
html{font-size:18px;touch-action:manipulation}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"UD デジタル 教科書体 NK-R","BIZ UDPGothic","Yu Gothic",sans-serif;line-height:1.65;min-height:100vh}
button,select,input{font:inherit}
button{cursor:pointer}
.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.6rem;z-index:20}
.site-header{background:#fff;border-bottom:4px solid var(--yellow);padding:.55rem 1rem;text-align:center}
.brand{border:0;background:transparent;color:var(--ink);font-weight:800;font-size:clamp(1rem,2.6vw,1.35rem)}
main{width:min(1100px,94%);margin:1.4rem auto;min-height:70vh}
footer{text-align:center;padding:1rem;font-weight:700;background:#fff;margin-top:2rem}
.screen{animation:appear .18s ease-out}.hero{text-align:center;max-width:850px;margin:3vh auto}.hero-icon{font-size:clamp(4rem,13vw,7rem);line-height:1}
h1{font-size:clamp(2rem,6vw,3.7rem);line-height:1.35;margin:.3rem 0;color:var(--blue-dark)}h2{font-size:clamp(1.65rem,4vw,2.4rem);line-height:1.35;margin:.4rem 0 1rem}h3{font-size:1.35rem;margin:.2rem 0}.lead{font-size:clamp(1.15rem,3vw,1.5rem);font-weight:700}
.button-grid,.actions,.food-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin:1.6rem 0}
.big-button,.action-button,.choice-button{min-height:64px;border:3px solid var(--blue-dark);border-radius:16px;padding:.7rem 1.3rem;background:#fff;color:var(--ink);font-weight:800;box-shadow:var(--shadow)}
.big-button{font-size:clamp(1.2rem,3.3vw,1.6rem);min-width:min(260px,100%)}.big-button.primary,.action-button.primary{background:var(--blue);color:#fff}.big-button.sunny{background:var(--yellow)}
button:hover{filter:brightness(.97);transform:translateY(-1px)}button:focus-visible{outline:5px solid #ff8c00;outline-offset:3px}button:active{transform:translateY(2px);box-shadow:none}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.food-badge{background:var(--yellow);padding:.35rem .9rem;border-radius:999px;font-size:1.25rem;font-weight:800}
.progress{text-align:center;font-weight:800}.progress-bar{height:14px;background:#dce7ef;border-radius:99px;overflow:hidden;max-width:500px;margin:.35rem auto}.progress-bar span{display:block;height:100%;background:var(--green)}
.cards{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:1rem;margin:1rem 0}.cards.count-4{grid-template-columns:repeat(4,1fr)}.cards.count-3{grid-template-columns:repeat(3,1fr)}
.process-card{position:relative;background:var(--paper);border:4px solid #b9cedc;border-radius:20px;padding:1rem;text-align:center;box-shadow:var(--shadow);min-height:270px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;user-select:none}
.process-card[draggable=true]{cursor:grab}.process-card.dragging{opacity:.45}.process-card.selected{border:6px solid var(--blue);background:#e9f5ff}.process-card.selected::before{content:"えらんだカード";background:var(--blue);color:#fff;padding:.1rem .5rem;border-radius:6px;font-weight:800}.process-card.correct{border:6px solid var(--green)}.process-card.correct::before{content:"○ ここで正解";color:var(--green);font-weight:900}.process-card.wrong{border:6px solid var(--red)}.process-card.wrong::before{content:"△ ちがう場所";color:var(--red);font-weight:900}
.step-number{position:absolute;left:.5rem;top:.5rem;background:var(--blue-dark);color:#fff;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font-weight:900}.emoji{font-size:3.2rem;line-height:1.25}.card-text{font-size:1.05rem;font-weight:800;line-height:1.5;margin:.35rem 0}.reading{color:#465d70;font-size:.9rem;margin:.2rem 0}.person{background:#edf3f6;border-radius:10px;padding:.25rem .5rem;margin-top:auto;font-weight:700}.speak{position:absolute;right:.45rem;top:.45rem;border:2px solid var(--blue);background:#fff;border-radius:50%;width:2.5rem;height:2.5rem;font-size:1.2rem}
.practice-card{transition:transform .15s}.practice-card.expanded{transform:scale(1.04);z-index:2;border-color:var(--blue)}.focus-view{max-width:520px;margin:1rem auto}.focus-view .process-card{min-height:340px}.hidden{display:none!important}
.message{max-width:750px;margin:1rem auto;padding:1rem;border-radius:16px;background:#fff;border:3px solid var(--blue);text-align:center;font-size:1.2rem;font-weight:800}.message.error{border-color:var(--red);background:#fff0f0}.message.success{border-color:var(--green);background:#effbef}.celebrate{font-size:2.5rem;letter-spacing:.5rem;animation:pop .5s ease-out}
.settings{max-width:800px;margin:auto}.setting{display:grid;grid-template-columns:220px 1fr;gap:1rem;align-items:center;padding:1rem;border-bottom:2px solid #d9e2e8;background:#fff}.setting:first-of-type{border-radius:18px 18px 0 0}.setting:last-of-type{border-radius:0 0 18px 18px}.setting legend,.setting-label{font-weight:900}.options{display:flex;flex-wrap:wrap;gap:.45rem}.options label{border:2px solid #7890a2;padding:.45rem .65rem;border-radius:10px;font-weight:700}.options label:has(input:checked){background:#dff1ff;border:4px solid var(--blue)}
.summary{max-width:780px;margin:auto;text-align:center}.people-list{text-align:left;display:inline-block;font-size:1.2rem;font-weight:700}.quiz-choices{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:1rem;max-width:650px;margin:1rem auto}.result-box{background:#fff;border:4px solid var(--green);border-radius:20px;padding:1.2rem;text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes appear{from{opacity:0;transform:translateY(5px)}}@keyframes pop{50%{transform:scale(1.15)}}
@media(max-width:900px){.cards,.cards.count-4{grid-template-columns:repeat(2,1fr)}.cards .process-card:last-child:nth-child(odd){grid-column:1/-1;max-width:430px;width:100%;justify-self:center}}
@media(max-width:560px){html{font-size:16px}main{width:95%;margin:.8rem auto}.cards,.cards.count-4,.cards.count-3{grid-template-columns:1fr}.cards .process-card:last-child:nth-child(odd){grid-column:auto;max-width:none}.process-card{min-height:235px}.setting{grid-template-columns:1fr}.quiz-choices{grid-template-columns:1fr}.actions{gap:.65rem}.action-button{width:100%}.site-header{padding:.35rem}.hero{margin-top:1vh}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}