@charset "UTF-8";

/*フェード（下から出る）*/
.fade {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.fade.active {
  opacity: 1;
  transform: translate(0, 0);
}


/* 右フェード */
.fade-right {
  opacity: 0;
  transform: translate(200px, 0px);
  transition: all 0.5s cubic-bezier(.03, .76, .42, 1.03);
}

.fade-right.active {
  opacity: 1;
  transform: translate(0, 0);
}

/* 左フェード */
.fade-left {
  opacity: 0;
  transform: translate(-200px, 0px);
  transition: all 0.5s cubic-bezier(.03, .76, .42, 1.03);
}

.fade-left.active {
  opacity: 1;
  transform: translate(0, 0);
}


/* バウンド表示 */
.bound.active {
  animation: bound 1.7s;
}

@keyframes bound {
  0% {
    transform: translateY(0)
  }

  5% {
    transform: translateY(0)
  }

  10% {
    transform: translateY(0)
  }

  20% {
    transform: translateY(-25px)
  }

  25% {
    transform: translateY(0)
  }

  30% {
    transform: translateY(-15px)
  }

  40% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(0)
  }
}