.scroll-up {
    opacity: 0; 
    visibility: hidden;
    transform: translateY(50px);
    transition: all 1s;
}
.scroll-up.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}
.s01 {
  --page40-s01: #000000;
  font-weight: bold;
  dominant-baseline: hanging;
  text-anchor: middle;
  fill: transparent;
}
.s01_viewbox.is-show .s01 {
  stroke-dasharray: 500;
  stroke: var(--page40-s01);
  animation-name: kf_s01;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes kf_s01 {
  0% {
    stroke-dashoffset: 500;
    stroke-width: .0833rem;
    fill: transparent;
  }
  40% {
    fill: transparent;
  }
  60% {
    stroke-width: .0833rem;
  }
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-width: 0px;
    fill: var(--page40-s01);
  }
}



.fade-in {
    opacity: 0; 
    visibility: hidden;
    transition: all 1s;
}
.fade-in.is-show {
    opacity: 1;
    visibility: visible;
}


/* 以下PC */
@media (min-width: 768px) {
	@keyframes kf_s01 {
	  0% {
	    stroke-dashoffset: 500;
	    stroke-width: .0555rem;
	    fill: transparent;
	  }
	  40% {
	    fill: transparent;
	  }
	  60% {
	    stroke-width: .0555rem;
	  }
	  90% {
	    stroke-dashoffset: 0;
	  }
	  100% {
	    stroke-width: 0px;
	    fill: var(--page40-s01);
	  }
	}
	
}

.bounce_text span {
	position: relative;
	display: inline-block;
	opacity: 0;
}
.bounce_text.active span {
  animation-name: text_updown;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
.bounce_header_divide span {
	position: relative;
	display: inline-block;
	opacity: 0;
}
.bounce_header_divide.active span {
  animation-name: text_updown;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}


@keyframes text_updown {
  0% {
	  opacity: .3;
	  transform: translateY(0.5rem);
	}
	5% {
	  opacity: .6;
		transform: translateY(-0.5rem);
	}
	15% {
		opacity: 1;
		transform: translateY(0)
	}
	65% {
		opacity: 1;
	}
	75% {
		opacity: .5;
	}
	100% {
		opacity: 1;
	}
	
}