body { background-color: #f8fafc; }
.bg-pattern { background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 20px 20px; }

/* =========================================================
   スクロールアニメーション / モーション
   ========================================================= */

/* スクロールで表示される要素の初期状態 */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 左右からのスライドイン */
.reveal-left  { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); }
.reveal-left.is-visible,
.reveal-right.is-visible { transform: translateX(0); }

/* 拡大しながら表示 */
.reveal-zoom { transform: scale(0.9); }
.reveal-zoom.is-visible { transform: scale(1); }

/* 時間差表示 */
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
.reveal.delay-4 { transition-delay: 0.4s; }

/* ヒーローの読み込み時アニメーション */
@keyframes lpFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lp-hero-anim > * { opacity: 0; animation: lpFadeUp 0.8s ease both; }
.lp-hero-anim > *:nth-child(1) { animation-delay: 0.1s; }
.lp-hero-anim > *:nth-child(2) { animation-delay: 0.25s; }
.lp-hero-anim > *:nth-child(3) { animation-delay: 0.4s; }
.lp-hero-anim > *:nth-child(4) { animation-delay: 0.55s; }

/* ヒーロー画像のふわふわ浮遊 */
@keyframes lpFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.lp-float { animation: lpFloat 4s ease-in-out infinite; }

/* 主要CTAボタンの脈打ち演出 */
@keyframes ctaPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 20px rgba(255, 107, 0, 0.45), 0 0 0 0 rgba(255, 107, 0, 0.55);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 12px 26px rgba(255, 107, 0, 0.55), 0 0 0 14px rgba(255, 107, 0, 0);
  }
}
.cta-pulse {
  animation: ctaPulse 1.6s ease-in-out infinite;
}
.cta-pulse:hover {
  animation-play-state: paused;
}

/* アニメーションを好まないユーザーへの配慮 */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-zoom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .lp-hero-anim > * { opacity: 1 !important; animation: none !important; }
  .lp-float { animation: none !important; }
  .cta-pulse { animation: none !important; }
}