/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 22 2022 | 10:43:21 */
/***じわっと出現する***/
.blur{
	animation-name:blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}
@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }
  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}
.blurTrigger{
    opacity: 0;
}

/***順番に出現***/
.box{
	opacity: 0;
}
.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.6s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/***横からフェードイン***/
.fadeIn {
animation-name:fadeInAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeInAnime{
   0% {
    opacity: 0.3;
	transform: translateX(140px);
  }
	25% {
    opacity: 0.3;
	transform: translateX(65px);
  }
	  75% {
    opacity: 0.8;
	transform: translateX(120px);
  }

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


/***テキストがタイピング風に出現***/
.TextTyping span {
	display: none;
}
/*文字列後ろの線の設定*/
.TextTyping::after {
 	content: "|";
	animation: typinganime .8s ease infinite;
}
@keyframes typinganime{
	from{opacity:0}
	to{opacity:1}
}

/***ヒストリーの数字じわっと***/
.history-years{
	animation-name:historyAnime;
	animation-duration:5s;
	animation-delay:1s;
	animation-fill-mode:forwards;
}
@keyframes historyAnime{
  0% {
	filter: blur(10px);
	transform: scale(1.5) translateX(100px);
	opacity: 0;
  }
  80% {
	filter: blur(0);
	transform: scale(1) translateX(0);
	opacity: 0.4;
  }
	100%{
	opacity: 0.1;	
	}
}
.historyTrigger{
    opacity: 0;
}