@charset "utf-8";

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


/* 下からスライドイン */
.slideUp,
.slideUp--delay1,
.slideUp--delay2,
.slideUp--delay3
{
	will-change: transition,transform;
	opacity: 0;
	-webkit-transform: translateY(40px);
	        transform: translateY(40px);
	-webkit-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
}
.slideUp.slideIn{
	will-change: transform;
	opacity: 1;
	-webkit-transform: translateY(0);
	        transform: translateY(0);
}
.slideUp--delay1.slideIn{
	will-change: transform;
	opacity: 1;
	-webkit-transform: translateY(0);
	        transform: translateY(0);
	-webkit-transition-delay: .2s;
	        transition-delay: .2s;
}
.slideUp--delay2.slideIn{
	will-change: transform;
	opacity: 1;
	-webkit-transform: translateY(0);
	        transform: translateY(0);
	-webkit-transition-delay: .4s;
	        transition-delay: .4s;
}
.slideUp--delay3.slideIn{
	will-change: transform;
	opacity: 1;
	-webkit-transform: translateY(0);
	        transform: translateY(0);
	-webkit-transition-delay: .4s;
	        transition-delay: .4s;
}

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


/* 左からスライドイン */
.slideLeft,
.slideLeft--delay1,
.slideLeft--delay2,
.slideLeft--delay3
{
	will-change: transition,transform;
	opacity: 0;
	-webkit-transform: translateX(-40px);
	        transform: translateX(-40px);
	-webkit-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
}
.slideLeft.slideIn{
	will-change: transform;
	opacity: 1;
	-webkit-transform: translateX(0);
	        transform: translateX(0);
}
.slideLeft--delay1.slideIn{
	will-change: transform;
	opacity: 1;
	-webkit-transform: translateX(0);
	        transform: translateX(0);
	-webkit-transition-delay: .2s;
	        transition-delay: .2s;
}
.slideLeft--delay2.slideIn{
	will-change: transform;
	opacity: 1;
	-webkit-transform: translateX(0);
	        transform: translateX(0);
	-webkit-transition-delay: .4s;
	        transition-delay: .4s;
}
.slideLeft--delay3.slideIn{
	will-change: transform;
	opacity: 1;
	-webkit-transform: translateX(0);
	        transform: translateX(0);
	-webkit-transition-delay: .4s;
	        transition-delay: .4s;
}


/* ふわっと表示 */
.fade,
.fade--delay1,
.fade--delay2,
.fade--delay3
{
	opacity: 0;
}
.fade.fadeIn{
	will-change: transition;
	opacity: 1;
	-webkit-transition: .8s ease-in-out;
	transition: .8s ease-in-out;
}
.fade--delay1.fadeIn{
	will-change: transition;
	opacity: 1;
	-webkit-transition: .8s ease-in-out;
	transition: .8s ease-in-out;
	-webkit-transition-delay: .2s;
	        transition-delay: .2s;
}
.fade--delay2.fadeIn{
	will-change: transition;
	opacity: 1;
	-webkit-transition: .8s ease-in-out;
	transition: .8s ease-in-out;
	-webkit-transition-delay: .4s;
	        transition-delay: .4s;
}
.fade--delay3.fadeIn{
	will-change: transition;
	opacity: 1;
	-webkit-transition: .8s ease-in-out;
	transition: .8s ease-in-out;
	-webkit-transition-delay: .8s;
	        transition-delay: .8s;
}

.overUp,
.overUp--delay1,
.overUp--delay2,
.overUp--delay3
{
	will-change: transform,transition;
	opacity: 0;
	-webkit-transform: translateY(60px);
	        transform: translateY(60px);
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.overUp.slideIn{
	will-change: transform;
	opacity: 1;
	-webkit-transform: translateY(0);
	        transform: translateY(0);
}
.overUp--delay1.slideIn{
	will-change: transform;
	opacity: 1;
	-webkit-transform: translateY(0);
	        transform: translateY(0);
	-webkit-transition-delay: .2s;
	        transition-delay: .2s;
}
.overUp--delay2.slideIn{
	will-change: transform;
	opacity: 1;
	-webkit-transform: translateY(0);
	        transform: translateY(0);
	-webkit-transition-delay: .4s;
	        transition-delay: .4s;
}
.overUp--delay3.slideIn{
	will-change: transform;
	opacity: 1;
	-webkit-transform: translateY(0);
	        transform: translateY(0);
	-webkit-transition-delay: .8s;
	        transition-delay: .8s;
}
.overOpen,
.overOpen--delay1,
.overOpen--delay2,
.overOpen--delay3
{
	position: relative;
}
.overOpen::before,
.overOpen--delay1::before,
.overOpen--delay2::before,
.overOpen--delay3::before
{
	will-change: transition;
	content: "";
	background: var(--color-sub);
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
	-webkit-transition-delay: .4s;
	        transition-delay: .4s;
	z-index: 1;
}
.overOpen.open::before{
	height: 0;
}
.overOpen--delay1.open::before{
	height: 0;
	-webkit-transition-delay: .8s;
	        transition-delay: .8s;
}
.overOpen--delay2.open::before{
	height: 0;
	-webkit-transition-delay: 1.6s;
	        transition-delay: 1.6s;
}
.overOpen--delay3.open::before{
	height: 0;
	-webkit-transition-delay: 2.4s;
	        transition-delay: 2.4s;
}