@charset "UTF-8";

/*--------------------------------------------------------------------------------
	top0
--------------------------------------------------------------------------------*/

.p-top0-wrapper {
	background: #f0f0f0;
	width: 100%;
	height: 100vh;
	display: flex; 
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hideen;
}

.p-top0-mainv {
	text-align: center;
}

.p-top0-mainv-logo {
	font-size: 4.4rem;
	line-height: 1;
	text-align: center;
	color: #ff0000;
}

.p-top0-mainv-logoj {
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.5;
}

.p-top0-mainv-info {
	display: inline-block;
	margin: 40px auto 0 auto;
	padding: 0 40px;
	font-size: 1.4rem;
	text-align: left;
}

.p-top0-mainv-info-ttl {
	text-align: center;
	margin: 0 0 16px 0;
	font-weight: 500;
}

.p-top0-mainv-copyright {
	position: absolute;
	bottom:30px;
	let: 0;
	font-size: 1.2rem;
	text-align: center;
}

/* animation */

@keyframes mainv-bganimation {
	0% {
		background: #333;
	}
	30% {
		background: #333;
	}
	100% {
		background: #fff;
	}
}

@keyframes mainv-animation {
	0% {
		transform: translate(0, 50px);
		opacity: 0;
	}
	30% {
		opacity: 0;
	}
	100% {
		transform: translate(0, 0);
		opacity: 1;
	}

}

.js-top-mainv-bg {
	animation: mainv-bganimation 2s ease-out 0s 1 forwards;
}

.js-top-mainv-logo {
	opacity: 0;
	animation: mainv-animation 1s ease-out 1s 1 forwards;
}

.js-top-mainv-logoj {
	opacity: 0;
	animation: mainv-animation 1s ease-out 1.5s 1 forwards;
}

.js-top-mainv-info {
	opacity: 0;
	animation: mainv-animation 1s ease-out 3s 1 forwards;
}

.js-top-mainv-copyright {
	opacity: 0;
	animation: mainv-animation 1s ease-out 4s 1 forwards;
}