/* js trigger */
/* fade up */
.jsc-fadeUp,
.jsc-fadeUp-delay,
.jsc-fadeUp-moreDelay {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s, transform 1.2s;
}
.jsc-fadeUp.is-active {
  opacity: 1;
  transform: translateY(0);
}
.jsc-fadeUp-delay.is-active {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .3s;
}
.jsc-fadeUp-moreDelay.is-active {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .6s;
}

/* fade in */
.jsc-fadeIn,
.jsc-fadeIn-delay {
  opacity: 0;
  transition: opacity 1.2s;
}
.jsc-fadeIn.is-active {
  opacity: 1;
}
.jsc-fadeIn-delay.is-active {
  opacity: 1;
  transition-delay: .6s;
}

/* fade in fv */
.jsc-fadeIn-bg {
  opacity: 0;
  transition: opacity 1.2s;
}
.jsc-fadeIn-bg.is-active {
  opacity: 1;
}

/* fade up scene */
.jsc-fadeUp-bg.is-active {
  opacity: 1;
}
.jsc-fadeUp-text.is-active {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

/* zoom slide */
.add-animation {
  animation: zoomOut 5s linear 0s normal both;
}
@keyframes zoomOut {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* underline */
.jsc-itemName {
  padding-bottom: 10px;
  position: relative;
}
.jsc-itemName::after {
  content: "";
  width: 0;
	height: 1px;
	background-color: #333;
	position: absolute;
	left: 50%;
	bottom: 0;
  transform: translateX(-50%);
	transition: all 1.2s;
}
.jsc-itemName.is-active::after {
  content: "";
  width: 100%;
	height: 1px;
  background-color: #333;
	position: absolute;
	left: 50%;
	bottom: -0;
}