@charset "utf-8";
/* アニメーション */
 .animate {
  opacity: 0; /* 初期状態 */
  transition: opacity 1s ease-out, transform 1s ease-out; /* 透明度と変形 */
}
/* フェードイン（下から上に） */
.fade-in {
  transform: translateY(120px); /* 下方向に120px */
}
/* フェードイン（上から下に） */
.fade-in2 {
  transform: translateY(-120px); /* 下方向に120px */
}
/* ズームイン（拡大） */
.zoom-in {
  transform: scale(0.6); /* 10%のサイズ */
}
/* スライドイン（左から右へ） */
.slide-in {
  transform: translateX(-150px); /* 左に150pxずらす */
}
/* スライドイン（右から左へ） */
.slide-in2 {
  transform: translateX(150px); /* 右に150pxずらす */
}
/* 3D回転（Y軸を中心に回転） */
.rotate {
  transform: rotateX(90deg); /* X軸方向に90度回転 */
}

/* 要素が画面内に入ったとき（アニメーション完了時）*/
.show {
  opacity: 1; /* 完全に表示 */
  transform: translateY(0) scale(1) translateX(0) rotateY(0); /* 元の位置・サイズ・回転に戻す */
}