:root{font-family:"Yu Gothic",Meiryo,sans-serif;color:#183346;background:#eef7f8;font-size:18px;line-height:1.65}*{box-sizing:border-box}body{margin:0;overflow-x:hidden}header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px clamp(14px,4vw,52px);background:#fff;border-bottom:6px solid #4f8790}h1{margin:0;font-size:clamp(1.45rem,4vw,2.25rem)}header p{margin:0}.screen{display:none;width:min(1120px,100%);margin:auto;padding:24px 16px}.screen.active{display:block}.hero,.panel,.river-card,.feedback{background:#fff;border-radius:18px;padding:24px;box-shadow:0 3px 13px #18334620}.hero{text-align:center}.hero img{width:min(280px,65vw);height:180px}.lead,.question-text{text-align:center;font-size:1.25rem;font-weight:700}.notice{padding:18px;border-left:9px solid #c98b12;background:#fff6d8}.adult-note{padding:18px;border-left:9px solid #657780;background:#f2f5f6}.mouth-definition{display:flex;align-items:center;justify-content:center;gap:20px}.mouth-definition img{width:130px;height:100px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}.actions.compact button{min-height:48px}button,select,input{font:inherit}button{min-height:60px;padding:11px 18px;border:3px solid #355b68;border-radius:14px;background:#fff;color:#183346;font-weight:700;cursor:pointer}button:hover{background:#e7f3ee}button:focus-visible{outline:4px dashed #111;outline-offset:5px}button:disabled{cursor:not-allowed;opacity:.55}.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.panel label,.panel fieldset{display:block;margin:18px 0}fieldset{border:2px solid #9aafb5;border-radius:12px;padding:14px}.inline-choices,.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px}.check-grid label,#displaySettings label,.inline-choices label{display:flex;align-items:center;gap:8px;margin:0;min-height:48px}.quiz-head{display:grid;grid-template-columns:1fr auto;gap:6px}.quiz-head progress{grid-column:1/-1;width:100%;height:18px}.river-card{position:relative;display:flex;align-items:center;justify-content:center;gap:24px;min-height:210px;border:8px solid var(--hint,#71858d)}.river-card.no-color{border-color:#71858d}.river-card img{width:min(35vw,220px);height:145px;object-fit:contain}.river-card img.mouth-mini{width:90px;height:80px}.river-card h2{font-size:clamp(2rem,6vw,3.2rem);margin:.3em}.symbol{position:absolute;top:7px;left:10px;font-size:2.5rem;line-height:1}.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:20px}.option{position:relative;display:flex;flex-direction:column;min-height:285px;padding:12px;border:8px solid var(--hint,#71858d);border-radius:16px;background:#fff}.option.no-color{border-color:#71858d}.option.selected{box-shadow:inset 0 0 0 5px #111}.option-choice{width:100%;border:0;padding:8px;background:transparent}.option-choice strong{display:block;font-size:1.35rem}.state{display:block}.map-area{height:112px;display:flex;align-items:center;justify-content:center}.prefecture-map{display:block;max-width:92%;max-height:108px;object-fit:contain}.map-fallback{width:68px;height:68px;border:8px solid #657780;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}.map-button{align-self:center;min-height:44px;padding:4px 12px;border-width:2px}.map-button[hidden]{display:none}.badge{position:relative;z-index:1;align-self:flex-end;margin-bottom:5px;padding:3px 7px;background:#fff8d7;border:2px solid #222;border-radius:8px}.feedback{margin-top:18px;min-height:84px}.feedback.correct{border-left:10px solid #2e7d32}.feedback.wrong{border-left:10px solid #b36000}ruby{line-height:2.15}rt{font-size:70%}.result-item{padding:15px 0;border-top:2px solid #abc0c0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}dialog{width:min(92vw,680px);border:4px solid #355b68;border-radius:18px}dialog::backdrop{background:#0008}dialog img{display:block;width:100%;height:min(55vh,430px);object-fit:contain}@media(max-width:768px){header{align-items:flex-start}.options{grid-template-columns:repeat(2,minmax(0,1fr))}.river-card{flex-direction:column;gap:0}.mode-grid{grid-template-columns:1fr}}@media(max-width:470px){.options{grid-template-columns:1fr}.option{min-height:270px}header span{font-size:.75rem}}