@charset "UTF-8";


/* 共通設定 */
.anim,
.anim_up,
.anim_left,
.anim_right,
.anim_down {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

/* フェードのみ */
.anim {
  transform: translateY(0);
}

/* 下からふわっと */
.anim_up {
  transform: translateY(20px);
}

/* 右から左へ */
.anim_left {
  transform: translateX(20px);
}

/* 左から右へ */
.anim_right {
  transform: translateX(-20px);
}

/* 上から下へ */
.anim_down {
  transform: translateY(-20px);
}

/* 表示後 */
.anim.show,
.anim_up.show,
.anim_left.show,
.anim_right.show,
.anim_down.show {
  opacity: 1;
  transform: translate(0, 0);
  will-change: auto;
}

/* 動きを減らす設定のユーザー向け */
/* @media (prefers-reduced-motion: reduce) {
  .anim,
  .anim_up,
  .anim_left,
  .anim_right,
  .anim_down {
    opacity: 1;
    transform: none;
    transition: none;
  }
} */