:root { --ink: #16171a; --red: #d5381f; --paper: #f6f4ef; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--ink); }
body { font-family: "Hiragino Sans", "Noto Sans JP", sans-serif; color: var(--paper); }
.lp { width: 100%; max-width: 520px; margin: 0 auto; background: var(--ink); }
.part { position: relative; display: block; line-height: 0; }
.part img { display: block; width: 100%; height: auto; }

/* 画像の中のボタンの上に重ねる、押せる範囲 */
.hit { position: absolute; left: 4%; right: 4%; display: block; border-radius: 8px; }
.hit:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hit-fv  { top: 87.8%; height: 6.6%; min-height: 44px; }
.hit-cta { top: 74.2%; height: 7.7%; min-height: 44px; }
.hit-num { top: 83%; height: 6.4%; min-height: 44px; left: 12%; right: 12%; }

/* 途中のページでだけ出る、画面下の電話ボタン */
.sticky {
  position: fixed; left: 50%; bottom: 0; z-index: 10;
  width: 100%; max-width: 520px; min-height: 60px;
  transform: translate(-50%, 110%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  background: var(--red); color: #fff; text-decoration: none; line-height: 1.35;
  transition: transform .25s ease;
}
.sticky.show { transform: translate(-50%, 0); }
.sticky-label { font-size: 13px; }
.sticky-num { font-size: 20px; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) { .sticky { transition: none; } }