@charset "UTF-8";
/**
 * @ animation.css
 *
 * 
 */
/* ==============================
  下からフェードイン
============================== */
.js-ani-item--fadein {
  opacity: 0;
}
.js-ani-item--fadein.is-active {
  animation: ani-fadein 1.5s ease both;
}
@keyframes ani-fadein {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ==============================
  左からフェードイン
============================== */
.js-ani-item--fadein-left {
  opacity: 0;
}
.js-ani-item--fadein-left.is-active {
  animation: ani-fadein-left 1.5s ease both;
}
@keyframes ani-fadein-left {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ==============================
  右からフェードイン
============================== */
.js-ani-item--fadein-right {
  opacity: 0;
}
.js-ani-item--fadein-right.is-active {
  animation: ani-fadein-right 1.5s ease both;
}
@keyframes ani-fadein-right {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}