@charset "utf-8";

.anime-scroll--hidden-x{
    overflow-x:hidden;
}
.anime-scroll--hidden-y{
    overflow-y:hidden;
}


/* 下からスライドイン */
.slideUp{
	opacity: 0;
	-webkit-transform: translateY(60px);
	        transform: translateY(60px);
}
.slideUp.slideIn{
	opacity: 1;
	-webkit-transform: translateY(0);
	        transform: translateY(0);
	-webkit-transition: .8s ease-in-out;
	transition: .8s ease-in-out;
}
.slideUp--delay1{
	opacity: 0;
	-webkit-transform: translateY(60px);
	        transform: translateY(60px);
}
.slideUp--delay1.slideIn{
	opacity: 1;
	-webkit-transform: translateY(0);
	        transform: translateY(0);
	-webkit-transition: .8s ease-in-out;
	transition: .8s ease-in-out;
	-webkit-transition-delay:0.1s ;
	        transition-delay:0.1s ;
}
.slideUp--delay2{
	opacity: 0;
	-webkit-transform: translateY(60px);
	        transform: translateY(60px);
}
.slideUp--delay2.slideIn{
	opacity: 1;
	-webkit-transform: translateY(0);
	        transform: translateY(0);
	-webkit-transition: .8s ease-in-out;
	transition: .8s ease-in-out;
	-webkit-transition-delay:0.2s ;
	        transition-delay:0.2s ;
}
.slideUp--delay3{
	opacity: 0;
	-webkit-transform: translateY(60px);
	        transform: translateY(60px);
}
.slideUp--delay3.slideIn{
	opacity: 1;
	-webkit-transform: translateY(0);
	        transform: translateY(0);
	-webkit-transition: .8s ease-in-out;
	transition: .8s ease-in-out;
	-webkit-transition-delay:0.3s ;
	        transition-delay:0.3s ;
}

/* 上からスライドイン */
.slideDown{
	opacity: 0;
	-webkit-transform: translateY(-60px);
	        transform: translateY(-60px);
}
.slideDown.slideIn{
	opacity: 1;
	-webkit-transform: translateY(0);
	        transform: translateY(0);
	-webkit-transition: .8s ease-in-out;
	transition: .8s ease-in-out;
}


/* 左からスライドイン */
.slideLeft{
	visibility: hidden;
}
.slideLeft.slideIn{
	visibility: visible;
	-webkit-animation: slideLeft .8s 0s 1 ease backwards;
	        animation: slideLeft .8s 0s 1 ease backwards;
}
.slideLeft--delay1{
	visibility: hidden;
}
.slideLeft--delay1.slideIn{
	visibility: visible;
	-webkit-animation: slideLeft .8s 1 ease backwards;
	        animation: slideLeft .8s 1 ease backwards;
	-webkit-animation-delay: 0.3s;
	        animation-delay: 0.3s;
}
.slideLeft--delay2{
	visibility: hidden;
}
.slideLeft--delay2.slideIn{
	visibility: visible;
	-webkit-animation: slideLeft .8s 1 ease backwards;
	        animation: slideLeft .8s 1 ease backwards;
	-webkit-animation-delay: 0.6s;
	        animation-delay: 0.6s;
}
@-webkit-keyframes slideLeft{
	0%{
		opacity: 0;
		-webkit-transform: translateX(-60px);
		        transform: translateX(-60px);
	}
}
@keyframes slideLeft{
	0%{
		opacity: 0;
		-webkit-transform: translateX(-60px);
		        transform: translateX(-60px);
	}
}


/* 右からスライドイン */
.slideRight{
	visibility: hidden;
}
.slideRight.slideIn{
	visibility: visible;
	-webkit-animation: slideRight .8s 0s 1 ease backwards;
	        animation: slideRight .8s 0s 1 ease backwards;
}
@-webkit-keyframes slideRight{
	0%{
		opacity: 0;
		-webkit-transform: translateX(60px);
		        transform: translateX(60px);
	}
}
@keyframes slideRight{
	0%{
		opacity: 0;
		-webkit-transform: translateX(60px);
		        transform: translateX(60px);
	}
}

/* ふわっと表示 */
.fade{
	opacity: 0;
}
.fade.fadeIn{
	opacity: 1;
	-webkit-transition: .8s ease-in-out;
	transition: .8s ease-in-out;
}
.fade--delay1{
	opacity: 0;
}
.fade--delay1.fadeIn{
	opacity: 1;
	-webkit-transition: .8s ease-in-out;
	transition: .8s ease-in-out;
	-webkit-transition-delay: .6s;
	        transition-delay: .6s;
}