/*============================
#visual
============================*/
#visual {
	position: relative;
	overflow: hidden;
	padding: 60px 0 0;
	max-height: 100vh;
	box-sizing: border-box;
}
#visual .inside {
	width: auto;
}
#visual .inside .img {}
#visual .inside .img.main {
	box-sizing: border-box;
	position: relative;
	display: table;
	z-index: 10;
	pointer-events: none;
	height: 100%;
}
#visual .inside .img.main img {
	width: auto;
	height: 100%;
	max-width: 58.967741935484vw;
	max-height: 100%;
	display: block;
	margin: -11px 0 0;
	opacity: 0;
}
#visual .inside .text01 {
	position: absolute;
	top: 26.4vw;
	left: 14.533333333333vw;
	z-index: 20;
}
#visual .inside .text01 img {
	width: 29.066666666667vw;
	height: auto;
	transform-origin: left bottom;
	transform: scale(0);
}
.start #visual .inside .img.main img {
	animation-name: AnimeMain;
	animation-duration: .6s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
	animation-delay: 1s;
	animation-direction: normal;
	will-change: transform, opacity;
}
@keyframes AnimeMain {
	0% {
		transform: translate(0, 0) scale(0);
		opacity: 0;
	}
	100% {
		transform: translate(0, 0) scale(1);
		opacity: 1;
	}
}
.start #visual .inside .text01 img {
	animation-name: AnimeText01;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
	animation-delay: 0s;
	animation-direction: normal;
}
@keyframes AnimeText01 {
	0% {
		transform: translate(-200%, 100%) scale(-1, 1);
	}
	100% {
		transform: scale(1, 1);
	}
}
@keyframes AnimeRound {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@keyframes AnimeLoop {
	0% {
		transform: translateY(-5%);
	}
	100% {
		transform: translateY(5%);
	}
}
@keyframes AnimeLoopHover {
	0% {
		transform: translateY(-5%) rotate(0deg);
	}
	20% {
		transform: translateY(0%) rotate(2deg);
	}
	40% {
		transform: translateY(5%) rotate(-2deg);
	}
	60% {
		transform: translateY(0%) rotate(3deg);
	}
	80% {
		transform: translateY(-5%) rotate(-3deg);
	}
	100% {
		transform: translateY(0%) rotate(0deg);
	}
}
#visual .visual_roulette .roulette {
	transform: translate(0, -10%);
	opacity: 0;
	transition: ease-out 1s 1.5s;
}
.start #visual .visual_roulette .roulette {
	transform: translate(0, 0%);
	opacity: 1;
}
#visual .visual_roulette .roulette .roulette_light_01 img, #visual .visual_roulette .roulette .roulette_light_02 img {
	animation-name: AnimeRoulette_light;
	animation-duration: 5s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	transform-origin: center;
}
#visual .visual_roulette .roulette .roulette_light_02 img {
	animation-delay: 2.5s;
}
@keyframes AnimeRoulette_light {
	0% {
		transform: rotate(0deg) scale(0);
	}
	10% {
		transform: rotate(20deg) scale(1);
	}
	20% {
		transform: rotate(40deg) scale(0);
	}
	30% {
		transform: rotate(60deg) scale(1);
	}
	40% {
		transform: rotate(80deg) scale(0);
	}
	50% {
		transform: rotate(100deg) scale(1);
	}
	60% {
		transform: rotate(120deg) scale(0);
	}
	70% {
		transform: rotate(140deg) scale(1);
	}
	80% {
		transform: rotate(160deg) scale(0);
	}
	90% {
		transform: rotate(180deg) scale(1);
	}
	99% {
		transform: rotate(720deg) scale(1);
	}
	100% {
		transform: rotate(0deg) scale(0);
	}
}
#visual .visual_roulette .beginner_banner {
	transform: translate(20%, 0);
	opacity: 0;
	transition: ease-out 0.5s 2s;
}
.start #visual .visual_roulette .beginner_banner {
	transform: translate(0, 0%);
	opacity: 1;
}
@media screen and (min-width: 1720px) {
	#visual .inside .img.main {}
	#visual .inside .img.main img {
		max-width: 1021px;
		max-height: 100%;
		margin: -11px 0 0;
	}
	#visual .inside .text01 {
		top: 442px;
		left: 249px;
	}
	#visual .inside .text01 img {
		width: 490px;
	}
}
@media screen and (max-width: 640px) {
	/*============================
#visual
============================*/
	#visual {
		padding: 60px 0;
		max-height: none;
	}
	#visual .inside {
		margin: 0;
	}
	#visual .inside .img {}
	#visual .inside .img.main {
		position: relative;
		z-index: 1;
		margin: 0px -70px -80px 0;
	}
	#visual .inside .img.main img {
		max-width: 100%;
		height: auto;
		margin: 0;
	}
	#visual .inside .text01 {
		top: 46.4vw;
		left: 19.533333vw;
	}
	#visual .inside .text01 img {
		width: 63.066667vw;
	}
	.start #visual .inside .img.main img {}
	.start #visual .inside .text01 img {}
	#visual .visual_roulette .roulette {
		transform: translate(0, -10%);
	}
	.start #visual .visual_roulette .roulette {
		transform: translate(0, 0%);
	}
	#visual .visual_roulette .roulette .roulette_light_01 img, #visual .visual_roulette .roulette .roulette_light_02 img {}
	#visual .visual_roulette .roulette .roulette_light_02 img {}
	#visual .visual_roulette .beginner_banner {
		transform: translate(20%, 0);
	}
	.start #visual .visual_roulette .beginner_banner {
		transform: translate(0, 0%);
	}
}