*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--page);font-family:"Hiragino Sans","Yu Gothic UI","Noto Sans JP",sans-serif;color:#222;line-height:1.7}
main{display:block}
.part{background:var(--bg)}
.frame{position:relative;max-width:600px;margin:0 auto}
.frame img{display:block;width:100%;height:auto}
.hit{position:absolute;display:block;border-radius:12px;transition:box-shadow .2s,background-color .2s}
.hit:hover{background:rgba(255,255,255,.08);box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.hit:focus-visible{outline:3px solid #ffbf00;outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
footer{max-width:600px;margin:0 auto;padding:28px 20px 40px;font-size:12px;color:#555;background:#fff}
footer p+p{margin-top:6px}
.todo{color:#999}
.frame img{opacity:1;transition:opacity .6s ease}
.frame img.pre{opacity:0}
@media (prefers-reduced-motion:reduce){.frame img,.hit{transition:none}.frame img.pre{opacity:1}}