:root { --bg:#FAFAF7; --ink:#2F3331; --sage:#6E8B7B; --gray:#7A7D7B; }
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif; }
main { max-width:560px; margin:0 auto; }
.notice { background:var(--sage); color:#fff; font-size:12px; text-align:center; padding:6px 16px; line-height:1.6; }
.part { position:relative; }
.part img { display:block; width:100%; height:auto; }
.hit { position:absolute; left:6%; width:88%; border-radius:8px; }
.hit:focus-visible { outline:3px solid #E9C46A; }
footer { max-width:560px; margin:0 auto; padding:24px 16px 48px; font-size:12px; color:var(--gray); line-height:1.8; text-align:center; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 18px; border-radius:8px; font-size:14px; max-width:calc(100% - 32px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }