@charset "utf-8";

.InUp,
.InDown,
.InLeft,
.InRight{
	opacity: 0;
}

.run{
	animation-fill-mode:both;
	visibility: visible !important;	
	animation-duration:1.0s;
	
	-webkit-animation-fill-mode:both;
	-webkit-visibility: visible !important;	
	-webkit-animation-duration:1.0s;
}

.InUp.run{animation-name: InUp; -webkit-animation-name: InUp;}
.InDown.run{animation-name: InDown; -webkit-animation-name: InDown;}
.InLeft.run{animation-name: InLeft; -webkit-animation-name: InLeft;}
.InRight.run{animation-name: InRight; -webkit-animation-name: InRight;}

@keyframes InUp {
	0% { opacity: 0; transform: translateY(10px); filter: blur(0px) -webkit-transform: translateY(10px); -webkit-filter: blur(0px); }
	100% { opacity: 1; transform: translateY(0px); filter: blur(0px); -webkit-transform: translateY(0px); -webkit-filter: blur(0px); }
}

@keyframes InDown {
	0% { opacity: 0; transform: translateY(-10px); blur(0px); }
	100% { opacity: 1; transform: translateY(0px); blur(0px); }
}

@keyframes InLeft {
	0% { opacity: 0; transform: translateX(-10px); filter: blur(0px); -webkit-transform: translateX(-10px); -webkit-filter: blur(0px); }
	100% { opacity: 1; transform: translateX(0px); filter: blur(0px); -webkit-transform: translateX(0px); -webkit-filter: blur(0px); }
}

@keyframes InRight {
	0% { opacity: 0; transform: translateX(10px); filter: blur(0px); }
	100% { opacity: 1; transform: translateX(0px); filter: blur(0px); }
}


/*ディレイ*/
.delay-02s{animation-delay: 0.2s;}
.delay-04s{animation-delay: 0.4s;}
.delay-06s{animation-delay: 0.6s;}
.delay-08s{animation-delay: 0.8s;}
.delay-10s{animation-delay: 1.0s;}