#wrapper {
	background: url(https://artory.co.jp/lab/okamoto/egt/fv.png) no-repeat center top;
	/* display: none; */

}


#fv {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 1200px;
	z-index: 10;
}

#canvas {
	transition: 1s;
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

#about {
	position: relative;
	overflow: hidden;
}

#about .inner {
	position: relative;
	z-index: 5;
}

#about_canvas {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

#fv .max_wrap {
	position: relative;
	max-width: 1480px;
	margin: 0 auto;
}

#fv_text {
	width: 1100px;
	margin: auto;
	position: relative;
	z-index: 3;
}

#fv_text .texts {
	display: none;
	position: absolute;
	left: 8%;
	top: 250px;
	width: 65%;
	z-index: 0;
}

#fv_text .texts .eternal {
	width: 100%;
	height: auto;
}

#fv_text .texts .generation {
	width: 90%;
	height: auto;
}

#fv_text .texts .team {
	width: 80%;
	height: auto;
}

#fv_text .texts .text {
	width: 100%;
	height: auto;
	margin: 30px 0 0;
}

#fv_text img.lion {
	display: none;
	float: right;
	width: 38%;
	height: auto;
	transition: 1s;
	position: relative;
	z-index: 1;
	opacity: 0;
	margin: 120px 0 0;
	right: -5%;
}

#fv_text .copyright {
	position: absolute;
	top: 530px;
	height: 200px;
	width: auto;
	left: 0%;
}

#fv_text .scroll {
	position: absolute;
	right: 0;
	top: 750px;
	height: 200px;
	width: auto;
}

#fv .max_wrap .scroll {
	position: absolute;
	right: 20px;
	z-index: 10;
	bottom: 220px;
	width: 29px;
	height: 190px;
}

#fv .max_wrap .scroll a {	
	display: inline-block;
	position: absolute;
	padding: 10px 10px 110px;
}

#fv .max_wrap .scroll a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 1px;
	height: 100px;
	background: rgba(255, 255, 255, .4);
}

#fv .max_wrap .scroll a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1px;
	height: 100px;
	background: #fff;
	animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes sdl {
	0% {
		transform: scale(1, 0);
		transform-origin: 0 0;
	}
	50% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}
	50.1% {
		transform: scale(1, 1);
		transform-origin: 0 100%;
	}
	100% {
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}

#index canvas {
	opacity: 0.8;
}




/* ------------------------------------------------------------ mobile */

@media only screen and (max-width:767px) {
	
	#wrapper {
		background: none;
	}

	
	#fv {
		height: 160vw;
		transition: 1s;
	}
	#canvas {
		display: none;
		top: 50px;
		width: 300vw !important;
		height: 300vw !important;
	}
	#about_canvas {
		display: none;
		width: 300vw !important;
		height: 300vw !important;
	}
	#fv_text {
		padding: 20px 0 0;
		position: relative;
		width: 100%;
	}
	#fv_text .fv_text_bg {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0;
		background: url(../images/canvas/fv_bg_sp.png) no-repeat center center;
		background-size: auto 100%;
		opacity: 0;
	}
	#fv_text .texts {
		top: auto;
		position: absolute;
		left: 10%;
		bottom: 40px;
		width: 80%;
		z-index: 2;
	}
	#fv_text .texts .eternal {
		width: 100%;
		height: auto;
	}
	#fv_text .texts .generation {
		width: 90%;
		height: auto;
	}
	#fv_text .texts .team {
		width: 80%;
		height: auto;
	}
	#fv_text .texts .text {
		width: 85%;
		height: auto;
		margin: 10px 0 0;
	}
	#fv_text .copyright {
		top: 45%;
		left: 3%;
		height: 150px;
	}
	#fv_text .scroll {
		top: 72%;
		right: 3%;
		height: 150px;
		z-index: 1;
	}
	#fv_text img.lion {
		float: right;
		width: 60%;
		height: auto;
		transition: 1s;
		position: relative;
		z-index: 1;
		opacity: 0;
		margin: 0;
		bottom: -40px;
	}
	
	#fv .max_wrap {
		height: 100%;
	}
	
	#fv_text {
		height: 100%;
		box-sizing: border-box;
	}
	
	#fv .max_wrap .scroll {
		right: 3%;
		bottom: 0;
		width: 29px;
		height: 190px;
	}
	
	#fv .max_wrap .scroll a {	
		padding: 10px 10px 90px;
	}
	
	#fv .max_wrap .scroll a::before {
		height: 80px;
	}
	
	#fv .max_wrap .scroll a::after {
		height: 80px;
	}
	
	
}