@charset "UTF-8";
/* CSS Document */

/* fadeUp */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1.0s;
  animation-fill-mode: forwards;
  opacity: 0; /* 初期状態で透明 */
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* スクロール時にアニメーションが発動するトリガー */
.fadeUpTrigger {
  opacity: 0; /* 初期状態で透明 */
  visibility: hidden; /* 初期状態で非表示（アクセシビリティ向上のため） */
  transition: opacity 0.5s ease, visibility 0.5s ease; /* スムーズな状態切り替え */
}

.fadeUp.fadeUpTrigger {
  opacity: 1; /* アニメーション後に表示される */
  visibility: visible;
}
