@charset "UTF-8";

/* フェードインアニメーション */
.fade-in-animation {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  /* デバッグ用: 赤い境界線を追加（後で削除） */
  /* border: 2px solid red !important; */
}

.fade-in-animation.visible {
  opacity: 1;
  transform: translateY(0);
  /* デバッグ用: 緑の境界線を追加（後で削除） */
  /* border: 2px solid green !important; */
}

/* パララックス効果 */
.parallax-container {
  overflow: hidden;
  position: relative;
}

.parallax-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120% !important;
  object-fit: cover;
  transform: translateY(0);
  transition: transform 0.1s linear;
  will-change: transform;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  /* モバイルではパララックス効果を無効化 */
  .parallax-image {
    position: relative;
    height: 100%;
    transform: none !important;
  }
}