@charset "utf-8";


/*animation1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {
		left: -200px;
	}

	100% {
		left: 0px;
	}
}


/*opa1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*slide*/
@keyframes slide1 {
	0% {
		opacity: 1;
	}

	25% {
		opacity: 1;
	}

	35% {
		opacity: 0;
	}

	90% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes slide2 {
	0% {
		opacity: 0;
	}

	25% {
		opacity: 0;
	}

	35% {
		opacity: 1;
	}

	60% {
		opacity: 1;
	}

	70% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

@keyframes slide3 {
	0% {
		opacity: 0;
	}

	60% {
		opacity: 0;
	}

	70% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}



.slide1,
.slide2,
.slide3 {
	animation-duration: 30s;
	animation-iteration-count: infinite;
	position: absolute;
	left: 0px;
	top: 0px;
	animation-fill-mode: both;
	animation-delay: 1s;
}

.slide1 {
	position: relative;
	animation-name: slide1;
}

.slide2 {
	animation-name: slide2;
}

.slide3 {
	animation-name: slide3;
}

@keyframes space_cover {
	0% {
		height: 100%;

	}

	100% {
		bottom: 100%;
		height: 0;

	}
}

@keyframes fadeinfv {
	0% {
		opacity: 0;
	}

	100% {
		top: 0;
		opacity: 1;
	}
}

@keyframes slideIn {
	to {
		left: 0;
		opacity: 1;
	}
}

.sa {
	opacity: 0;
	position: relative;
}

.sa.show {
	transform: translate(0, 0);
	transition-delay: 2s;
	opacity: 1;
	transition: all .8s;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.sa._ani {
	transition: slideUp 0.4s ease-out 0.2s;
	animation: slideUp .6s ease-out forwards;
	transition-delay: .1s;
}

@keyframes slideUp {
	0% {
		opacity: 0;
		transform: translateY(1rem);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.sa--lr.sa._ani,
.sa--rl.sa._ani {
	transform: translate(0, 0);
	transition: all 1s;
	animation: slideInRight 0.5s cubic-bezier(0, 1.12, 0.79, 1.03) forwards 0.6s;
}

.sa--lr {
	opacity: 1;
	transform: translate(-100%, 0);
}

.sa--rl {
	transform: translate(100%, 0);
}

.sa--up {
	transform: translate(0, 30px);
}

.fade-in,
.fade-in-first {
	opacity: 0;
	transition-duration: 4s;
	transition-delay: 4s;
	transition: all 0.5s cubic-bezier(0.68, -0.55, 0.5, 1.55);
	transform: translateY(100px);
}