/*-------------------------------------------------------------------
** 共通アニメーション
この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 0.3s 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(20%);
}

.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;
  }
}

/* バウンスしながらフェードイン（下→上に少し行き過ぎて戻る） */
.jsFadeInBounceBox {
  opacity: 0;
  transform: translateY(20%);
}

.jsFadeInBounce {
  animation: fadeInBounce 1s forwards;
}

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

  60% {
    opacity: 1;
    transform: translateY(-6%);
  }

  80% {
    transform: translateY(2%);
  }

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