/**
 * Scrollイン
 */

/* スクロールアニメーション用の基本クラス */
.scroll-animate {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-animate.animate {
  opacity: 1;
  transform: translateY(0);
}

/* より強いアニメーション */
.scroll-animate-strong {
  opacity: 0;
  transform: translateY(80px) scale(0.9);
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.scroll-animate-strong.animate {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 左からスライドイン */
.scroll-slide-left {
  opacity: 0;
  transform: translateX(-100px);
  transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-slide-left.animate {
  opacity: 1;
  transform: translateX(0);
}

/* 右からスライドイン */
.scroll-slide-right {
  opacity: 0;
  transform: translateX(100px);
  transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-slide-right.animate {
  opacity: 1;
  transform: translateX(0);
}

/* フェードインのみ */
.scroll-fade {
  opacity: 0;
  transition: all 1.2s ease-out;
}

.scroll-fade.animate {
  opacity: 1;
}

/* 回転しながら登場 */
.scroll-rotate {
  opacity: 0;
  transform: translateY(50px) rotate(15deg);
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.scroll-rotate.animate {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/* 遅延アニメーション */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }




/* ===== PC時のみ表示 ===== */
.pc-only {
  display: block; /* PC時は表示 */
}

/* ===== SP時のみ表示 ===== */
.sp-only {
  display: none; /* PC時は非表示 */
}

/* ===== ブレークポイント: 768px以下をSP扱い ===== */
@media (max-width: 768px) {
  .pc-only {
    display: none; /* SP時は非表示 */
  }

  .sp-only {
    display: block; /* SP時は表示 */
  }
}

/* ===== より詳細な切り替え（任意で使用） ===== */

/* タブレット用（769px〜1024px） */
.tablet-only {
  display: none;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .tablet-only {
    display: block;
  }
}

/* デスクトップ用（1025px以上） */
.desktop-only {
  display: none;
}

@media (min-width: 1025px) {
  .desktop-only {
    display: block;
  }
}

/* ===== インライン要素用 ===== */
.pc-only-inline {
  display: inline; /* PC時はインライン表示 */
}

.sp-only-inline {
  display: none; /* PC時は非表示 */
}

@media (max-width: 768px) {
  .pc-only-inline {
    display: none; /* SP時は非表示 */
  }

  .sp-only-inline {
    display: inline; /* SP時はインライン表示 */
  }
}

/* ===== フレックス要素用 ===== */
.pc-only-flex {
  display: flex; /* PC時はフレックス表示 */
}

.sp-only-flex {
  display: none; /* PC時は非表示 */
}

@media (max-width: 768px) {
  .pc-only-flex {
    display: none; /* SP時は非表示 */
  }

  .sp-only-flex {
    display: flex; /* SP時はフレックス表示 */
  }
}