@charset "UTF-8";
/*========== 共通アニメーション設定 ==========*/

.fadeBase {
  animation-delay: 0.2s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  opacity: 0;
}

/*========== 遅延指定 ==========*/
.animationDelay--000 {
  animation-delay: 0.0s;
}

.animationDelay--010 {
  animation-delay: 0.10s;
}

.animationDelay--015 {
  animation-delay: 0.15s;
}

.animationDelay--020 {
  animation-delay: 0.20s;
}

.animationDelay--025 {
  animation-delay: 0.25s;
}

.animationDelay--030 {
  animation-delay: 0.30s;
}

.animationDelay--035 {
  animation-delay: 0.35s;
}

.animationDelay--040 {
  animation-delay: 0.40s;
}

.animationDelay--045 {
  animation-delay: 0.45s;
}

.animationDelay--050 {
  animation-delay: 0.50s;
}

.animationDelay--060 {
  animation-delay: 0.60s;
}

.animationDelay--070 {
  animation-delay: 0.70s;
}

.animationDelay--080 {
  animation-delay: 0.80s;
}

.animationDelay--090 {
  animation-delay: 0.90s;
}

.animationDelay--100 {
  animation-delay: 1.00s;
}

/*========== 拡大しながらフェードイン ==========*/

.fadeInScaleTrigger {
  opacity: 0;
}

.fadeInScale {
  animation-name: fadeInScaleAnime;
  animation-timing-function: ease-in-out;
}

@keyframes fadeInScaleAnime {
  0% {
    opacity: 0;
    transform: scale(0.95) translate(0, 0);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/*========== 上からスライドイン ==========*/

.fadeInTopTrigger {
  opacity: 0;
}

.fadeInTop {
  animation-name: fadeInTopAnime;
}

@keyframes fadeInTopAnime {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*========== 下からスライドイン ==========*/

.fadeInBottomTrigger {
  opacity: 0;
}

.fadeInBottom {
  animation-name: fadeInBottomAnime;
}

@keyframes fadeInBottomAnime {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*========== 右からスライドイン ==========*/

.fadeInRightTrigger {
  opacity: 0;
}

.fadeInRight {
  animation-name: fadeInRightAnime;
}

@keyframes fadeInRightAnime {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/*========== 左からスライドイン ==========*/

.fadeInLeftTrigger {
  opacity: 0;
}

.fadeInLeft {
  animation-name: fadeInLeftAnime;
}

@keyframes fadeInLeftAnime {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/*========== 左からスライドイン ==========*/

.fadeInBottomWithCenter {
  animation-name: fadeInBottomWithCenter;
  animation-duration: 0.5s;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

@keyframes fadeInBottomWithCenter {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(40px);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}