:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; background: #dff7ff; }
body { min-height: 100vh; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.visual-page { position: relative; width: min(100%, 1312px); margin: 0 auto; line-height: 0; background: #fff; box-shadow: 0 0 36px rgba(5, 91, 151, .12); }
.main-visual { display: block; width: 100%; height: auto; }
.hotspot { position: absolute; z-index: 2; display: block; border-radius: 22px; outline-offset: -5px; transition: background-color .18s ease, box-shadow .18s ease; }
.hotspot:hover { background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .7), 0 5px 18px rgba(0, 101, 173, .2); }
.hotspot:focus-visible { outline: 5px solid #ffed61; background: rgba(255, 255, 255, .16); }
.plan-a { left: 3.3%; top: 35.0%; width: 27.5%; height: 17.6%; }
.plan-b { left: 32.0%; top: 35.0%; width: 30.0%; height: 17.6%; }
.plan-c { left: 63.7%; top: 35.0%; width: 33.4%; height: 17.6%; }
.contact-link { border-radius: 999px; }
.contact-top { left: 29.3%; top: 24.8%; width: 41.5%; height: 5.8%; }
.contact-middle { left: 29.3%; top: 62.6%; width: 41.5%; height: 5.4%; }
.contact-bottom { left: 31.9%; top: 88.0%; width: 36.8%; height: 5.4%; }
@media (max-width: 600px) { .visual-page { box-shadow: none; } .hotspot { border-radius: 8px; } .contact-link { border-radius: 999px; } }
@media (prefers-reduced-motion: reduce) { .hotspot { transition: none; } }