/* ===== reset-ish ===== */
html, body { margin: 0; padding: 0; background: #000; }
body {
  /* スマホで下端が隠れないようセーフエリア＋最低余白を確保 */
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0));
}
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ===== layout ===== */
.page {
  width: 75%;
  margin: 0 auto;
  background: #000;
}

.section {
  position: relative;
  /* 画像の継ぎ目が出る場合の保険：少しだけ重ねたいならここで調整
     例: margin-top: -2px; */
}

/* ===== click overlay ===== */
.hotspots {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none; /* 子要素aだけ有効にする */
}

.hotspots a {
  position: absolute;
  display: block;
  pointer-events: auto;
  /* クリックできるが見えない */
  background: rgba(255, 255, 255, 0);
}

/* デバッグ表示（枠を出す） */
body.debug .hotspots a {
  border: 2px solid rgba(0, 255, 255, 0.8) !important;
  background: rgba(0, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
}

/* PC/SP画像の切り替え */
.pc-only {
  display: block;
}
.sp-only {
  display: none;
}

/* クリック領域のタップしやすさ（スマホ向け） */
@media (max-width: 768px) {
  .page {
    width: 100%;
    max-width: 100%;
  }

  /* 最後のセクションの下に余白を確保（ページ末尾まで見えるように） */
  .page .section:last-child {
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0));
  }

  /* SP用画像を表示、PC用画像を非表示 */
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
}

/* スムーススクロール */
html { scroll-behavior: smooth; }

/* ===== HERO セクション ===== */
.hero-section {
  position: relative;
}

.hero-bg {
  position: relative;
  z-index: 1;
}