*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
}

main {
  width: 100%;
}

.lp-section {
  position: relative;
  width: 100%;
  line-height: 0;
}

.lp-section img {
  width: 100%;
  height: auto;
  display: block;
}

/* ─── Hotspot 共通 ─────────────────────────────── */
.hotspot {
  position: absolute;
  display: block;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, outline-color 0.18s ease;
}

/* ─── ナビアイテム ──────────────────────────────── */
.hotspot.nav-item {
  border-radius: 4px;
}
.hotspot.nav-item:hover {
  background-color: rgba(0, 0, 0, 0.08);
}
.hotspot.nav-item:active {
  background-color: rgba(0, 0, 0, 0.15);
}

/* ─── プライマリボタン（オレンジ） ──────────────── */
.hotspot.btn-primary {
  border-radius: 50px;
}
.hotspot.btn-primary:hover {
  background-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.hotspot.btn-primary:active {
  background-color: rgba(0, 0, 0, 0.1);
}

/* ─── セカンダリボタン（アウトライン） ──────────── */
.hotspot.btn-secondary {
  border-radius: 50px;
}
.hotspot.btn-secondary:hover {
  background-color: rgba(0, 0, 0, 0.07);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.hotspot.btn-secondary:active {
  background-color: rgba(0, 0, 0, 0.14);
}

/* ─── 導入事例カード ────────────────────────────── */
.hotspot.card {
  border-radius: 10px;
  outline: 2px solid transparent;
}
.hotspot.card:hover {
  background-color: rgba(210, 100, 30, 0.05);
  outline-color: rgba(210, 100, 30, 0.35);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.13);
}
.hotspot.card:active {
  background-color: rgba(0, 0, 0, 0.08);
}

/* ─── フッターリンク ────────────────────────────── */
.hotspot.footer-link {
  border-radius: 3px;
}
.hotspot.footer-link:hover {
  background-color: rgba(0, 0, 0, 0.08);
}
.hotspot.footer-link:active {
  background-color: rgba(0, 0, 0, 0.15);
}


/* ════════════════════════════════════════════════
   各要素の位置（画像サイズに対する %）
   LP①  : 1536 × 1024 px
   LP⑤  : 1672 ×  941 px
   LP⑥  : 1672 ×  941 px
   ════════════════════════════════════════════════ */

/* ── LP① ヘッダーナビ ─── */
#nav-about  { left: 30.5%; top:  5.1%; width:  7.8%; height: 4.0%; }
#nav-merit  { left: 39.3%; top:  5.3%; width:  8.8%; height: 4.0%; }
#nav-flow   { left: 49.6%; top:  5.1%; width:  7.0%; height: 4.0%; }
#nav-cases  { left: 58.2%; top:  5.6%; width:  5.5%; height: 3.4%; }
#nav-faq    { left: 64.7%; top:  5.1%; width:  9.2%; height: 4.0%; }

/* ── LP① ヘッダー CTAボタン ─── */
#header-cta { left: 76.2%; top:  4.5%; width: 20.7%; height: 5.4%; }

/* ── LP① メイン CTAボタン ─── */
#hero-cta-1 { left:  4.5%; top: 67.7%; width: 26.5%; height: 7.5%; }
#hero-cta-2 { left:  4.1%; top: 77.9%; width: 27.4%; height: 7.2%; }

/* ── LP⑤ 導入事例カード ─── */
#case-1 { left:  3.1%; top: 19.1%; width: 30.2%; height: 56.5%; }
#case-2 { left: 33.4%; top: 19.1%; width: 30.7%; height: 56.5%; }
#case-3 { left: 64.2%; top: 19.2%; width: 31.9%; height: 56.5%; }

/* ── LP⑥ CTAボタン ─── */
#cta-contact       { left:  6.9%; top: 32.7%; width: 26.4%; height: 7.3%; }
#cta-download      { left: 34.1%; top: 32.7%; width: 21.0%; height: 7.3%; }
#cta-contact-right { left: 79.9%; top: 75.9%; width: 13.8%; height: 6.4%; }

/* ── LP⑥ フッターリンク ─── */
#footer-company { left:  2.1%; top: 90.7%; width:  5.0%; height: 3.2%; }
#footer-privacy { left:  7.6%; top: 90.9%; width:  8.5%; height: 3.2%; }
#footer-terms   { left: 16.7%; top: 90.7%; width:  4.0%; height: 3.2%; }
#footer-contact { left:  2.4%; top: 94.9%; width: 10.2%; height: 3.2%; }