:root {
  color-scheme: light;
  --page-bg: #eef1f6;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--page-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
.lp { width: 100%; min-height: 100vh; }
.visual-wrap {
  position: relative;
  width: min(100%, 1180px);
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 36px rgba(10,32,67,.12);
  overflow: hidden;
}
.visual {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.hotspot {
  position: absolute;
  display: block;
  z-index: 5;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}
.hotspot:focus-visible {
  outline: 4px solid #ffbf47;
  outline-offset: 3px;
}
/* Coordinates are percentages based on the supplied 726 × 1536 design, so they scale automatically. */
.hotspot-top { left: 4.8%; top: 21.45%; width: 42.2%; height: 3.35%; }
.hotspot-bottom { left: 5.2%; top: 95.45%; width: 29.0%; height: 3.45%; }

/* Tablet */
@media (max-width: 1024px) {
  body { background: #f7f8fb; }
  .visual-wrap { width: 100%; box-shadow: none; }
}

/* Smartphone: full-width, no side gutters, touch targets remain aligned to the scaled design. */
@media (max-width: 767px) {
  html, body { background: #fff; }
  .visual-wrap { width: 100vw; max-width: none; margin: 0; }
  .visual { width: 100vw; max-width: none; }
  .hotspot-top { left: 4.2%; width: 44.5%; min-height: 42px; }
  .hotspot-bottom { left: 4.2%; width: 31.5%; min-height: 42px; }
}

/* Very small phones */
@media (max-width: 420px) {
  .hotspot-top, .hotspot-bottom { min-height: 44px; }
}