@charset "utf-8";

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


/* 下からスライドイン */
.slideUpAnime,
.slideUpAnime--delay1,
.slideUpAnime--delay2,
.slideUpAnime--delay3
{
	opacity: 0;
}
.slideUpAnime.slideIn,
.slideUpAnime--delay1.slideIn,
.slideUpAnime--delay2.slideIn,
.slideUpAnime--delay3.slideIn
{
	will-change: animation , transform;
	-webkit-animation: slideUpAnime .8s ease-in-out 1 both;
	        animation: slideUpAnime .8s ease-in-out 1 both;
}
.slideUpAnime--delay1.slideIn{
	-webkit-animation-delay: .1s;
	        animation-delay: .1s;
}
.slideUpAnime--delay2.slideIn{
	-webkit-animation-delay: .2s;
	        animation-delay: .2s;
}
.slideUpAnime--delay3.slideIn{
	-webkit-animation-delay: .3s;
	        animation-delay: .3s;
}
@-webkit-keyframes slideUpAnime{
	0%{
		opacity: 0;
		-webkit-transform: translateY(40px);
		        transform: translateY(40px);
	}
	100%{
		opacity: 1;
		-webkit-transform: translateY(0);
		        transform: translateY(0);
	}
}
@keyframes slideUpAnime{
	0%{
		opacity: 0;
		-webkit-transform: translateY(40px);
		        transform: translateY(40px);
	}
	100%{
		opacity: 1;
		-webkit-transform: translateY(0);
		        transform: translateY(0);
	}
}


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

/* ふわっと表示 */
.fade,
.fade--delay1,
.fade--delay2,
.fade--delay3
{
	opacity: 0;
}
.fade.fadeIn,
.fade--delay1.fadeIn,
.fade--delay2.fadeIn,
.fade--delay3.fadeIn
{
	will-change: animation;
	opacity: 1;
	-webkit-animation: fadeIn .8s 0s 1 ease-in-out both;
	        animation: fadeIn .8s 0s 1 ease-in-out both;
}
.fade--delay1.fadeIn{
	-webkit-animation-delay: .2s;
	        animation-delay: .2s;
}
.fade--delay2.fadeIn{
	-webkit-animation-delay: .3s;
	        animation-delay: .3s;
}
.fade--delay3.fadeIn{
	-webkit-animation-delay: .6s;
	        animation-delay: .6s;
}
@-webkit-keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}