[data-aos="blur-in"] {
  opacity: 0;
  filter: blur(20px); /* ボケの強さ */
  transition-property: filter, opacity, transform; /* 変化させるプロパティ */
}

/* 2. アニメーション実行時（画面に入った後） */
[data-aos="blur-in"].aos-animate {
  opacity: 1;
  filter: blur(0);
}

[data-aos="blur-up"] {
  opacity: 0;
  filter: blur(15px);
  transform: translateY(30px); /* 最初は少し下に配置 */
  transition-property: filter, opacity, transform;
}

[data-aos="blur-up"].aos-animate {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0); /* 元の位置に戻る */
}
/* -------------------------------------------
   パターン1：左から出てくる (Blur Slide Right)
   (左にある状態から、右に向かって所定位置へ)
------------------------------------------- */
[data-aos="blur-right"] {
  opacity: 0;
  filter: blur(20px); /* ボケの強さ */
  transform: translateX(-50px); /* 左に50pxズレた状態からスタート */
}

[data-aos="blur-right"].aos-animate {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

/* -------------------------------------------
   パターン2：右から出てくる (Blur Slide Left)
   (右にある状態から、左に向かって所定位置へ)
------------------------------------------- */
[data-aos="blur-left"] {
  opacity: 0;
  filter: blur(20px); /* ボケの強さ */
  transform: translateX(50px); /* 右に50pxズレた状態からスタート */
}

[data-aos="blur-left"].aos-animate {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}