/* 共通設定：最初は透明 */
.animate {
  opacity: 0;
  /* transition: all 0.8s ease-out; ←ここを消して下に移動 */
}

.animate.show {
  opacity: 1;
  transform: none;
  transition: all 0.8s ease-out; /* 現れる時だけ時間をかける */
}

/* 各パターンの初期位置設定 */
.fade-in {
  transform: translateY(30px); /* 少し下から */
}

.slide-in-left {
  transform: translateX(-50px); /* 左から */
}

.slide-in-right {
  transform: translateX(50px); /* 右から */
}

.zoom-in {
  transform: scale(0.8); /* 小さな状態から */
}