/*-------------------------------------------------------------------
** 共通アニメーション
このCSSはJSファイルと連動しています
-------------------------------------------------------------------*/
/*このCSSは original_smooth_txt.jsと連動しています*/
.js_smooth_txt {
  opacity: 0;
}

.js_smooth_txt span {
  opacity: 0;
  transition: .6s ease-in-out;
}


/*フェードイン*/
.jsFadeInBox {
  opacity: 0;
}

.jsFadeIn {
  animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*左からフェードイン*/
.jsFadeInLeftBox {
  opacity: 0;
  transform: translateX(-20%);
}

.jsFadeInLeft {
  animation: fadeInLeft 1s forwards;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20%);
  }

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

/*右からフェードイン*/
.jsFadeInRightBox {
  opacity: 0;
  transform: translateX(20%);
}

.jsFadeInRight {
  animation: fadeInRight 1s forwards;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(20%);
  }

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

/*下からフェードイン*/
.jsFadeInBottomBox {
  opacity: 0;
  transform: translateY(40px);
}

.jsFadeInBottom {
  animation: fadeInBottom 1s forwards;
}

@keyframes fadeInBottom {
  0% {
    opacity: 0;
    transform: translateY(20%);
  }

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

/*ブラーしながらフェードイン*/
.jsFadeInBlurBox {
  opacity: 0;
  filter: blur(30px);
}

.jsFadeInBlur {
  animation: fadeInBlur 1s forwards;
}

@keyframes fadeInBlur {
  0% {
    filter: blur(30px);
    opacity: 0;
  }

  100% {
    filter: blur(0);
    opacity: 1;
  }
}

/*ズームしながらフェードイン*/
.jsFadeInZoomBox {
  opacity: 0;
  transform: scale(0)
}

.jsFadeInZoom {
  animation: fadeInZoom 1s forwards;
}

@keyframes fadeInZoom {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/*回転ズームしながらフェードイン*/
.jsRotateFadeInZoomBox {
  opacity: 0;
  transform: scale(0)
}

.jsRotateFadeInZoom {
  animation: rotateFadeInZoom 1s forwards;
}


@keyframes rotateFadeInZoom {
  0% {
    transform: scale(1.1) rotate(90deg);
    opacity: 0;
  }

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

/*左上からフェードイン*/
.jsLeftTopFadeInBox {
  opacity: 0;
  transform: scale(0)
}

.jsLeftTopFadeIn {
  animation: leftTopFadeIn 1s forwards;
}
@keyframes leftTopFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-30px) translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}