/* ====================================
   カスタムプロパティ
   ==================================== */
:root {
  /* ページ数設定 */
  --page-count: 8;
  /* ★編集箇所: LPのページ数を指定してください (例: 5, 6 など) */

  /* ドットインジケーターの有効時の色 */
  --dot-active-color: #a6ec54;
  /* ★編集箇所: アクティブなドットの色を変更できます */
  /* ドットインジケーターの通常時の色 */
  --dot-inactive-color: #ccc;
  /* ★編集箇所: 通常のドットの色を変更できます */
}

/* ページごとの個別背景色は背景コンテナで管理するため削除 */

/* ====================================
   ベーススタイル
   ==================================== */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  /* スワイプ領域以外はスクロールさせない */
  position: relative;
  background-color: #f8f8f8;
  color: #333;
}

/* LPコンテナ - スワイプ領域 */
.lp-container {
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  -webkit-overflow-scrolling: touch;
  /* iOSでのスクロールをスムーズに */
  touch-action: pan-y;
  /* 垂直方向のパンジェスチャーを許可し、水平方向のブラウザ挙動を抑制 */
  cursor: default;
}

/* 各ページを内包するラッパー */
.lp-pages {
  display: flex;
  width: calc(var(--page-count) * 100vw);
  /* ページ数 × 100vw */
  height: 100%;
  transition: transform 0.5s ease-in-out;
  /* スワイプアニメーション */
  will-change: transform;
  /* パフォーマンス最適化 */
}

/* 個々のLPページ */
.lp-page {
  width: 100vw;
  height: 100%;
  flex-shrink: 0;
  /* ページが縮まないように */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 水平中央揃え */
  text-align: center;
  padding-bottom: 0;
  /* 画像が全面に来るのでパディングは不要 */
  box-sizing: border-box;
  position: relative;
  background-color: transparent;
  /* 背景画像を表示するため透明に */
  overflow-y: hidden;
  /* ページコンテンツのスクロールは不要 */
}

/* 背景画像コンテナ */
.bg-container {
  position: fixed;
  top: 0;
  left: 50%;
  width: 100vw;
  max-width: calc(100dvh * 750/1094);
  height: 100dvh;
  z-index: -1;
  overflow: hidden;
  background-color: #333;
  transform: translateX(-50%);
}

/* 個別の背景画像 */
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.bg-image.active {
  opacity: 1;
}

/* LPコンテンツ画像 */
.lp-page-content-img {
  display: block;
  width: 100%;
  max-width: calc(100dvh * 750/1094);
  height: 100%;
  object-fit: contain;
  /* アスペクト比を維持して要素を覆う */
  z-index: 1;
  /* CTAやスワイプドットより下 */
  opacity: 1;
  /* 透明度を1（不透明）に設定 */
  user-drag: none;
  -webkit-user-drag: none;
  /* WebKit系ブラウザ向け */
  pointer-events: none;
  /* マウスイベントを透過させる */
}

/* 固定CTAボタン */
.cta-fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 1000;
}

.cta-fixed-bottom a {
  display: block;
}

.cta-fixed-bottom a img {
  display: block;
  width: 100%;
}

/* スワイプ指示のドット */
.swipe-dots {
  position: absolute;
  bottom: 20dvh;
  width: 100%;
  text-align: center;
  z-index: 500;
  opacity: 0.8;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  background-color: var(--dot-inactive-color);
  /* 通常時のドットの色 */
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color: var(--dot-active-color);
  /* アクティブなドットの色 */
}

/* --- ガイド全体のスタイル --- */
.swipe-guide-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  padding: 20px 30px;
  border-radius: 10px;
  color: white;
  z-index: 100;
  pointer-events: none;

  /* サイトを開いて3秒後に、0.8秒かけて(0.8s)表示 */
  opacity: 0;
  animation: fadeGuideIn 0.8s ease forwards 3s;
}

@keyframes fadeGuideIn {
  to {
    opacity: 1;
  }
}


/* --- 【変更箇所】指アイコンのアニメーション --- */
.swipe-hand-icon {
  width: 100%;
  margin: auto;
  text-align: center;
  display: inline-block;
  /* アニメーションの適用 */
  /* 2秒かけて1回の動作を行い、それを無限(infinite)に繰り返す */
  animation: swipeFadeLoop 2s ease-in-out infinite;
}

/* 動作の定義 */
@keyframes swipeFadeLoop {

  /* 0%〜20%: その場でフェードイン */
  0% {
    opacity: 0;
    transform: translateX(32px);
    /* 開始位置 */
  }

  20% {
    opacity: 1;
    transform: translateX(32px);
    /* 完全に表示 */
  }

  80% {
    opacity: 1;
    transform: translateX(-32px);
    /* 左端まで移動 */
  }

  100% {
    opacity: 0;
    transform: translateX(-32px);
    /* フェードアウトして終了 */
  }
}

/* --- テキストのスタイル --- */
.swipe-text {
  margin: 5px 0 0;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  /* テキストを1行に収める */
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* 非表示にするためのクラス */
.swipe-guide-container.is-hidden {
  animation: fadeOut 0.4s ease forwards !important;
  pointer-events: none !important;
}

/* 中のアイコンのアニメーションも止める */
.swipe-guide-container.is-hidden .swipe-hand-icon {
  animation: none;
}


/* ====================================
   PC表示用のスタイル (画面幅768px以上)
   ==================================== */
@media (min-width: 768px) {

  /* LPコンテナ全体を中央に配置し、9:16の比率を維持 */
  .lp-container {
    width: 100%;
    max-width: calc(100dvh * 750/1094);
    height: 100vh;
    /* 画面いっぱいの高さ */
    margin: 0 auto;
    /* 中央寄せ */
  }

  /* 各ページ内での画像のサイズ調整 */
  .lp-page {
    width: 100%;
    max-width: calc(100dvh * 750/1094);
    height: 100%;
  }

  /* 固定CTAボタンの位置調整 */
  .cta-fixed-bottom {
    left: 50%;
    /* 中央に配置 */
    transform: translateX(-50%);
    /* 中央寄せの微調整 */
    width: 100%;
    max-width: calc(100dvh * 750/1094);
  }

  /* スワイプ指示UIの位置調整 */
  .swipe-indicator {
    left: 50%;
    /* 中央に配置 */
    transform: translateX(-50%);
    /* 中央寄せの微調整 */
    width: 100%;
    max-width: calc(100dvh * 750/1094);
  }

  /* スワイプドットの位置調整 */
  .swipe-dots {
    left: 50%;
    /* 中央に配置 */
    transform: translateX(-50%);
    /* 中央寄せの微調整 */
    width: 100%;
    max-width: calc(100dvh * 750/1094);
  }
}