/*fadeIn*/
.fadeIn {
  opacity: 0;
}
.fadeIn.js_showTargetAnimate {
  animation: fadeIn 1.5s ease 0s forwards;
}
@keyframes fadeIn {
  0% {
	/*filter:  blur(1px);*/
    opacity: 0;
  }
  100% {
	/*filter: blur(0);*/
    opacity: 1;
  }
}

/*fadeInUp*/
.fadeInUp {
  opacity: 0;
}

.fadeInUp.js_showTargetAnimate {
  animation: fadeInUp 1.2s ease 0s forwards;
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
	/*filter:  blur(1px);*/
	transform: translateY( 20px );
  }
  90% {
	transform: translateY( 0 ) ;
  }
  100% {
    opacity: 1;
	/*filter: blur(0);*/
	transform: translateY( 0 ) ;
  }
}

/*fadeInDown*/
.fadeInDown {
  opacity: 0;
}

.fadeInDown.js_showTargetAnimate {
  animation: fadeInDown 1.5s ease 0s forwards;
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
	filter:  blur(1px);
	transform: translateY( -40px ) 
  }
  90% {
	transform: translateY( 0 ) ;
  }
  100% {
    opacity: 1;
	filter: blur(0);
	transform: translateY( 0 ) ;
  }
}



/*zoomOut*/
.zoomOutParent {
	overflow: hidden;
}
.zoomOut {
	opacity: 0;
	transform: scale(1.3)
}
.zoomOut.js_showTargetAnimate {
  animation: zoomOut 1.5s ease 0s forwards;
}
@keyframes zoomOut {
  0% {
	opacity: 0;
	transform: scale(1.2)
  }
  100% {
	opacity: 1;
	transform: scale(1)

  }
}

/*zoomIn*/
.zoomInParent {
	overflow: hidden;
}
.zoomIn {
	opacity: 0;
	transform: scale(1)
}
.zoomIn.js_showTargetAnimate {
  animation: zoomIn 1s ease 0s forwards;
}
@keyframes zoomIn {
  0% {
	opacity: 0;
	transform: scale(1)
  }
  100% {
	opacity: 1;
	transform: scale(1.2)

  }
}





/*stretch*/
/*---------------------
※clip-pathはIEでは効かないので「fadeIn」等を親要素に入れる方がよい
ex <p class="fadeIn js_showTarget"><img src="01.jpg" alt="" class="stretchRight js_showTarget"></p>
---------------------*/
/*stretchLeft*/
.stretchLeft {
  opacity: 0;
}
.stretchLeft.js_showTargetAnimate {
  animation: stretchLeft 1.5s ease 0s forwards;
}
@keyframes stretchLeft {
  0% {
    opacity: 0;
	clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 1;
	clip-path: inset(0 0 0 0);
  }
}

/*stretchRight*/
.stretchRight {
  opacity: 0;
}
.stretchRight.js_showTargetAnimate {
  animation: stretchRight 1.5s ease 0s forwards;
}
@keyframes stretchRight {
  0% {
    opacity: 0;
	clip-path: inset(0 0 0 100%);
  }
  100% {
    opacity: 1;
	clip-path: inset(0 0 0 0);
  }
}

/*stretchCenter*/
.stretchCenter {
  opacity: 0;
}
.stretchCenter.js_showTargetAnimate {
  animation: stretchCenter 1.5s ease 0s forwards;
}
@keyframes stretchCenter {
  0% {
    opacity: 0;
	clip-path: inset(0 50% 0 50%);
  }
  100% {
    opacity: 1;
	clip-path: inset(0 0 0 0);
  }
}




/*stretchTop*/
.stretchTop {
  opacity: 0;
}
.stretchTop.js_showTargetAnimate {
  animation: stretchTop 1.5s ease 0s forwards;
}
@keyframes stretchTop {
  0% {
    opacity: 1;
	clip-path: inset(0 0 100% 0);
  }
  100% {
    opacity: 1;
	clip-path: inset(0 0 0 0);
  }
}

/*stretchBottom*/
.stretchBottom {
  opacity: 0;
}
.stretchBottom.js_showTargetAnimate {
  animation: stretchBottom 1.5s ease 0s forwards;
}
@keyframes stretchBottom {
  0% {
    opacity: 0;
	clip-path: inset(100% 0 0 0);
  }
  100% {
    opacity: 1;
	clip-path: inset(0 0 0 0);
  }
}


/*-----------------------------------------------------------------------
・追加
------------------------------------------------------------------------ */

/*stretchLeft_fast*/
.stretchLeft_fast {
  opacity: 0;
}
.stretchLeft_fast.js_showTargetAnimate {
  animation: stretchLeft_fast .8s ease 0s forwards;
}
@keyframes stretchLeft_fast {
  0% {
    opacity: 0;
	clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 1;
	clip-path: inset(0 0 0 0);
  }
}

/*stretchRight_fast*/
.stretchRight_fast {
  opacity: 0;
}
.stretchRight_fast.js_showTargetAnimate {
  animation: stretchRight_fast .8s ease 0s forwards;
}
@keyframes stretchRight_fast {
  0% {
    opacity: 0;
	clip-path: inset(0 0 0 100%);
  }
  100% {
    opacity: 1;
	clip-path: inset(0 0 0 0);
  }
}

/*stretchLeft_50pOp1*/
.stretchLeft_50pOp1 {
  opacity: 0;
}
.stretchLeft_50pOp1.js_showTargetAnimate {
  animation: stretchLeft_50pOp1 1.5s ease 0s forwards;
}
@keyframes stretchLeft_50pOp1 {
  0% {
    opacity: 0;
	clip-path: inset(0 100% 0 0);
  }
  50% {
	opacity: 1;
  }
  100% {
    opacity: 1;
	clip-path: inset(0 0 0 0);
  }
}

/*stretchLeft_1pOp1*/
.stretchLeft_1pOp1 {
  opacity: 0;
}
.stretchLeft_1pOp1.js_showTargetAnimate {
  animation: stretchLeft_1pOp1 1.5s ease 0s forwards;
}
@keyframes stretchLeft_1pOp1 {
  0% {
    opacity: 0;
	clip-path: inset(0 100% 0 0);
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
	clip-path: inset(0 0 0 0);
  }
}

/*fadeInRight*/
.fadeInRight {
  opacity: 0;
}
.fadeInRight.js_showTargetAnimate {
  animation: fadeInRight 1.5s ease 0s forwards;
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
	transform: translateX( -30px );
  }
  90% {
	transform: translateX( 0 ) ;
  }
  100% {
    opacity: 1;
	transform: translateX( 0 ) ;
  }
}

/*fadeInLeft*/
.fadeInLeft {
  opacity: 0;
}
.fadeInLeft.js_showTargetAnimate {
  animation: fadeInLeft 1.5s ease 0s forwards;
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
	transform: translateX( 30px );
  }
  90% {
	transform: translateX( 0 ) ;
  }
  100% {
    opacity: 1;
	transform: translateX( 0 ) ;
  }
}




/*fadeInBlur*/
/*※親要素にtranslateかけるとchoromeでバグあり*/
.fadeInBlur {
	opacity: 0;
}
.fadeInBlur.js_showTargetAnimate {
  animation: fadeInBlur 1.5s ease 0s forwards;
}
@keyframes fadeInBlur {
  0% {
	filter:  blur(20px);
    opacity: 0;
  }
  100% {
	filter: blur(0);
    opacity: 1;
  }
}

/*fadeInBlurLittle*/
.fadeInBlurLittle {
  opacity: 0;
}
.fadeInBlurLittle.js_showTargetAnimate {
  animation: fadeInBlurLittle 1.5s ease 0s forwards;
}
@keyframes fadeInBlurLittle {
  0% {
	filter:  blur(5px);
    opacity: 0;
  }
  100% {
	filter: blur(0);
    opacity: 1;
  }
}

/*fadeInBlurSmaller*/
.fadeInBlurSmaller {
  opacity: 0;
}
.fadeInBlurSmaller.js_showTargetAnimate {
  animation: fadeInBlurSmaller 3s ease 0s forwards;
}
@keyframes fadeInBlurSmaller {
  0% {
	filter:  blur(20px);
    opacity: 0;
	transform: scale(1.2);
  }
  65% {
	filter: blur(0);
  }
  100% {
	filter: blur(0);
    opacity: 1;
	transform: scale(1);
  }
}




/*------------------------------------------------------
txtSplitAnimeBreak 改行あり
※setting.jsのtxtSplitAnimeと組み合わせ
<span class="txtSplitAnimeBreak js_showTarget">xxxxxxxx</span>
<span class="txtSplitAnimeBreak js_showTarget">xxxxxxxx</span>
<span class="txtSplitAnimeBreak js_showTarget">xxxxxxxx</span>
---------------------------------------------------------*/
	.txtSplitAnimeBreak.js_showTarget .txtSplitAnimeBreakInner{ 
		opacity: 0;
		display: inline-block;
	}
	.txtSplitAnimeBreak.js_showTargetAnimate .txtSplitAnimeBreakInner{
	  animation: txtsplitanimeBreak 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s forwards;
	}

@keyframes txtsplitanimeBreak {
	0%   {
		opacity:0;
		transform: translateY(-20px) scale(4);
	}
	30% {
		transform: translateY(0);
	}
	100% {
		opacity:1;
		transform: translateY(0)  scale(1);
	}
}





/*------------------------------------------------------
txtSplitAnime
※setting.jsのtxtSplitAnimeと組み合わせ
---------------------------------------------------------*/
/*txtSplitAnime*/
	.txtSplitAnime span {
		opacity: 0;
		display: inline-block;
	}
	.txtSplitAnime.js_showTargetAnimate span{ 
		animation:txtsplitanime 2.5s ease-out forwards;
	}
	@keyframes txtsplitanime {
		0%   {
			opacity:0;
			transform: translateY(-20px) scale(5);
		}
		30% {
			transform: translateY(0);
		}
		100% {
			opacity:1;
			transform: translateY(0)  scale(1);
		}
	}
	
	
	
	



/*-----------------------------------------------------------------------
・個別にでディレイ指定したい場合に使用。
------------------------------------------------------------------------ */
.js_showDelay0ms	{ animation-delay: 0.0s!important; }
.js_showDelay100ms	{ animation-delay: 0.1s!important; }
.js_showDelay200ms	{ animation-delay: 0.2s!important; }
.js_showDelay300ms	{ animation-delay: 0.3s!important; }
.js_showDelay400ms	{ animation-delay: 0.4s!important; }
.js_showDelay500ms	{ animation-delay: 0.5s!important; }
.js_showDelay600ms	{ animation-delay: 0.6s!important; }
.js_showDelay700ms	{ animation-delay: 0.7s!important; }
.js_showDelay800ms	{ animation-delay: 0.8s!important; }
.js_showDelay900ms	{ animation-delay: 0.9s!important; }
.js_showDelay1000ms	{ animation-delay: 1.0s!important; }
.js_showDelay1100ms	{ animation-delay: 1.1s!important; }
.js_showDelay1200ms	{ animation-delay: 1.2s!important; }
.js_showDelay1300ms	{ animation-delay: 1.3s!important; }
.js_showDelay1400ms	{ animation-delay: 1.4s!important; }
.js_showDelay1500ms	{ animation-delay: 1.5s!important; }
.js_showDelay1600ms	{ animation-delay: 1.6s!important; }
.js_showDelay1700ms	{ animation-delay: 1.7s!important; }
.js_showDelay1800ms	{ animation-delay: 1.8s!important; }
.js_showDelay1900ms	{ animation-delay: 1.9s!important; }
.js_showDelay2000ms	{ animation-delay: 2.0s!important; }
.js_showDelay2100ms	{ animation-delay: 2.1s!important; }
.js_showDelay2200ms	{ animation-delay: 2.2s!important; }
.js_showDelay2300ms	{ animation-delay: 2.3s!important; }
.js_showDelay2400ms	{ animation-delay: 2.4s!important; }
.js_showDelay2500ms	{ animation-delay: 2.5s!important; }
.js_showDelay2600ms	{ animation-delay: 2.6s!important; }
.js_showDelay2700ms	{ animation-delay: 2.7s!important; }
.js_showDelay2800ms	{ animation-delay: 2.8s!important; }
.js_showDelay2900ms	{ animation-delay: 2.9s!important; }
.js_showDelay3000ms	{ animation-delay: 3.0s!important; }
.js_showDelay3100ms	{ animation-delay: 3.1s!important; }
.js_showDelay3200ms	{ animation-delay: 3.2s!important; }
.js_showDelay3300ms	{ animation-delay: 3.3s!important; }
.js_showDelay3400ms	{ animation-delay: 3.4s!important; }
.js_showDelay3500ms	{ animation-delay: 3.5s!important; }
.js_showDelay3600ms	{ animation-delay: 3.6s!important; }
.js_showDelay3700ms	{ animation-delay: 3.7s!important; }
.js_showDelay3800ms	{ animation-delay: 3.8s!important; }
.js_showDelay3900ms	{ animation-delay: 3.9s!important; }
.js_showDelay4000ms	{ animation-delay: 4.0s!important; }
.js_showDelay4100ms	{ animation-delay: 4.1s!important; }
.js_showDelay4200ms	{ animation-delay: 4.2s!important; }
.js_showDelay4300ms	{ animation-delay: 4.3s!important; }
.js_showDelay4400ms	{ animation-delay: 4.4s!important; }
.js_showDelay4500ms	{ animation-delay: 4.5s!important; }
.js_showDelay4600ms	{ animation-delay: 4.6s!important; }
.js_showDelay4700ms	{ animation-delay: 4.7s!important; }
.js_showDelay4800ms	{ animation-delay: 4.8s!important; }
.js_showDelay4900ms	{ animation-delay: 4.9s!important; }
.js_showDelay5000ms	{ animation-delay: 5.0s!important; }

/*-----------------------------------------------------------------------
・個別にで所要時間指定したい場合に使用。
------------------------------------------------------------------------ */
.js_showDuration0ms	{ animation-duration: 0.0s!important; }
.js_showDuration100ms	{ animation-duration: 0.1s!important; }
.js_showDuration200ms	{ animation-duration: 0.2s!important; }
.js_showDuration300ms	{ animation-duration: 0.3s!important; }
.js_showDuration400ms	{ animation-duration: 0.4s!important; }
.js_showDuration500ms	{ animation-duration: 0.5s!important; }
.js_showDuration600ms	{ animation-duration: 0.6s!important; }
.js_showDuration700ms	{ animation-duration: 0.7s!important; }
.js_showDuration800ms	{ animation-duration: 0.8s!important; }
.js_showDuration900ms	{ animation-duration: 0.9s!important; }
.js_showDuration1000ms	{ animation-duration: 1.0s!important; }
.js_showDuration1100ms	{ animation-duration: 1.1s!important; }
.js_showDuration1200ms	{ animation-duration: 1.2s!important; }
.js_showDuration1300ms	{ animation-duration: 1.3s!important; }
.js_showDuration1400ms	{ animation-duration: 1.4s!important; }
.js_showDuration1500ms	{ animation-duration: 1.5s!important; }
.js_showDuration1600ms	{ animation-duration: 1.6s!important; }
.js_showDuration1700ms	{ animation-duration: 1.7s!important; }
.js_showDuration1800ms	{ animation-duration: 1.8s!important; }
.js_showDuration1900ms	{ animation-duration: 1.9s!important; }
.js_showDuration2000ms	{ animation-duration: 2.0s!important; }
.js_showDuration2100ms	{ animation-duration: 2.1s!important; }
.js_showDuration2200ms	{ animation-duration: 2.2s!important; }
.js_showDuration2300ms	{ animation-duration: 2.3s!important; }
.js_showDuration2400ms	{ animation-duration: 2.4s!important; }
.js_showDuration2500ms	{ animation-duration: 2.5s!important; }
.js_showDuration2600ms	{ animation-duration: 2.6s!important; }
.js_showDuration2700ms	{ animation-duration: 2.7s!important; }
.js_showDuration2800ms	{ animation-duration: 2.8s!important; }
.js_showDuration2900ms	{ animation-duration: 2.9s!important; }
.js_showDuration3000ms	{ animation-duration: 3.0s!important; }
.js_showDuration3100ms	{ animation-duration: 3.1s!important; }
.js_showDuration3200ms	{ animation-duration: 3.2s!important; }
.js_showDuration3300ms	{ animation-duration: 3.3s!important; }
.js_showDuration3400ms	{ animation-duration: 3.4s!important; }
.js_showDuration3500ms	{ animation-duration: 3.5s!important; }
.js_showDuration3600ms	{ animation-duration: 3.6s!important; }
.js_showDuration3700ms	{ animation-duration: 3.7s!important; }
.js_showDuration3800ms	{ animation-duration: 3.8s!important; }
.js_showDuration3900ms	{ animation-duration: 3.9s!important; }
.js_showDuration4000ms	{ animation-duration: 4.0s!important; }
.js_showDuration4100ms	{ animation-duration: 4.1s!important; }
.js_showDuration4200ms	{ animation-duration: 4.2s!important; }
.js_showDuration4300ms	{ animation-duration: 4.3s!important; }
.js_showDuration4400ms	{ animation-duration: 4.4s!important; }
.js_showDuration4500ms	{ animation-duration: 4.5s!important; }
.js_showDuration4600ms	{ animation-duration: 4.6s!important; }
.js_showDuration4700ms	{ animation-duration: 4.7s!important; }
.js_showDuration4800ms	{ animation-duration: 4.8s!important; }
.js_showDuration4900ms	{ animation-duration: 4.9s!important; }
.js_showDuration5000ms	{ animation-duration: 5.0s!important; }

/*-----------------------------------------------------------------------
・個別にで所要時間指定したい場合に使用。
------------------------------------------------------------------------ */
.js_showTiming_easeInOutQuint	{ animation-timing-function: cubic-bezier(.83, 0, .17, 1)!important; }