@charset "UTF-8";
/*==================================================
　/アニメーション
===================================*/
/* その場で */
.fadeIn {
  opacity: 0;
  animation-name: fadeInAnimation;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn-delay {
  opacity: 0;
  animation-name: fadeInAnimation;
  animation-duration: 3s;
  animation-delay: 13s;
  animation-fill-mode: forwards;
}

.fadeOut {
  animation-name: fadeOutAnimation;
  animation-delay: 11s;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  opacity: 1;
}

@keyframes fadeOutAnimation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    z-index: -1000;
  }
}
.fadeOutDelay {
  animation-name: fadeOutAnimation;
  animation-delay: 12s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 1;
}

/* 下から */
.fadeUp {
  animation-name: fadeUpAnimation;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnimation {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 右から */
.fadeRight {
  animation-name: fadeRightAnimation;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeRightAnimation {
  from {
    opacity: 0;
    transform: translateX(150px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 右から */
.fadeLeft {
  animation-name: fadeLeftAnimation;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeLeftAnimation {
  from {
    opacity: 0;
    transform: translateX(-150px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeInTrigger {
  opacity: 0;
}

.fadeUpTrigger {
  opacity: 0;
}

.fadeRightTrigger {
  opacity: 0;
}

.fadeLeftTrigger {
  opacity: 0;
}

.fadeInDelayTrigger {
  opacity: 0;
}/*# sourceMappingURL=anime.css.map */