/* ------------------------------
* フェードインアイテム
------------------------------- */
.fadeIn,
.fadeIn_one,
.fadeLeft_one,
.fadeTop_one,
.popUp_one {
  opacity: 0;
	/* visibility: hidden; */
  transition: opacity 0.8s, transform 0.6s;
  will-change: opacity, transform;
}

.fadeIn.is-active,
.fadeIn_one.is-active,
.fadeLeft_one.is-active,
.fadeTop_one.is-active,
.popUp_one.is-active {
  opacity: 1;
	/* visibility: visible; */
}

.fadeLeft_one {
  transform: translateX(-30px);
}
.fadeLeft_one.is-active {
	opacity: 1;
  transform: translateX(0);
  transition-delay: 0.3s;
}

.fadeTop_one {
  transform: translateY(-30px);
}
.fadeTop_one.is-active {
  transform: translateY(0);
  transition-delay: 0.3s;
}

.fadeIn,
.fadeIn_one {
  transform: translateY(30px);
}
.fadeIn.is-active {
  transform: translateY(0);
  transition-delay: 0.4s;
}
.fadeIn_one.is-active {
  transform: translateY(0);
  transition-delay: 0.3s;
}

.popUp_one {
  transform: scale(0);
}
.popUp_one.is-active {
  transform: scale(1);
  transition-delay: 0.3s;
}

/* ------------------------------
* 画像や文字を目隠ししてから表示アニメーション
------------------------------- */
.effect,
.effect_2 {
  position: relative;
  opacity: 0;
  will-change: opacity, transform;
}

.effect.is-active,
.effect_2.is-active {
  opacity: 1;
}

.effect::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0%;
  right: 100%;
  bottom: 0%;
  left: 0%;
  background: #032578;
}

.effect.is-active {
  animation: kf_c01a 2s 1.5s forwards;
}

.effect.is-active::before {
  animation: kf_c01b 2s forwards;
}

@keyframes kf_c01a {
  100% {
    color: inherit;
  }
}
@keyframes kf_c01b {
  50% {
    left: 0%;
    right: 0%;
  }
  100% {
    left: 101%;
    right: 0%;
  }
}

.effect_2 {
  transition: opacity .5s ease;
}

.effect_2.is-active {
  animation: kf_c02a .2s ease forwards;
}

.effect_2::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #003b96;
  transform-origin: top;
}

.effect_2.is-active::before {
  animation: kf_c02b 0.8s ease forwards;
}

@keyframes kf_c02a {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes kf_c02b {
  40% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(-102%);
  }
}