#banner {
	position: relative;
	z-index: 0;
}

#banner_BG {
	width: 100%;
}

#banner_BG.mobile {
	display: none;
}

#banner_content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#banner_content img {
	position: absolute;
	opacity: 0;
	transition: 1.2s;
}

#banner_content img.show {
	opacity: 1;
}

#banner_img_KV {
	top: 10%;
	left: -38%;
	width: 30%;
}

#banner_img_title {
	top: 19%;
	right: -29%;
	width: 18%;
}

#banner_img_girl {
	bottom: -43%;
	left: 36%;
	width: 38%;
}

#banner_img_wave, #banner_img_table {
	bottom: -20%;
	left: 0;
	width: 100%;
}


#banner_img_KV.show {
	position: absolute;
	top: 10%;
	left: 8%;
	width: 30%;
}

#banner_img_title.show {
	position: absolute;
	top: 19%;
	right: 11%;
	width: 18%;
}

#banner_img_girl.show {
	position: absolute;
	bottom: 5%;
	left: 36%;
	width: 38%;
}

#banner_img_wave.show, #banner_img_table.show {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

#banner_img_wave {
	animation-name: wave;
	animation-iteration-count: infinite;
	animation-duration: 2S;
	animation-timing-function: ease-in-out;
}

.new_banner {
	position: relative;
	width: 100%;
}

.new_banner img {
	transition: .6s;
	opacity: 0;
}

.new_banner img.show {
	opacity: 1;
}

.banner_BG_01 {
	width: 100%;
}



.banner_BG_02 {
	position: absolute;
	left: 0;
	bottom: -50%;
	width: 100%;
}

.banner_BG_02.show {
	bottom: -5%;
	animation-name: wave;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}








.title {
	position: absolute;
	top: 0%;
	left: 38%;
	width: 40%;
}

.title.show {
	top: 7%;
}




.content {
	position: absolute;
	top: 0%;
	left: 43%;
	width: 21%;
}

.content.show {
	top: 61%;
}





.girl {
	position: absolute;
	bottom: -20%;
	left: 18%;
	width: 24%;
	margin-bottom: -15px;
}

.girl.show {
	bottom: 0%;
	animation-name: jump;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}




.hands {
	position: absolute;
	bottom: -20%;
	left: 63%;
	width: 16%;
	margin-bottom: -15px;
}

.hands.show {
	bottom: 0%;
	animation-name: jump;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-delay: .2s;
}


@keyframes wave {
	0%{
		bottom: -2%;
	}

	50%{
		bottom: -0%;
	}

	100%{
		bottom: -2%;
	}
}

@keyframes jump {
	0%{
		margin-bottom: -15px;
	}

	10%{
		margin-bottom: -15px;
	}

	15%{
		margin-bottom: 0px;
	}

	20%{
		margin-bottom: -15px;
	}
}



@media screen and (max-width: 1366px) {

}

@media screen and (max-width: 1024px) {

	#banner_BG {
		display: none;
	}

	#banner_BG.mobile {
		display: block;
	}

	#banner_img_KV.show {
		top: 6%;
		left: 14%;
		width: 72%;
	}
	
	#banner_img_girl.show {
		left: 46%;
		width: 50%;
	}

	#banner_img_title.show {
		top: 52%;
		right: 52%;
		width: 36%;
	}

	.new_banner {
		width: 240%;
		margin: 0 -70%;
	}

	.title {
		position: absolute;
		top: 0%;
		left: 32%;
		width: 37%;
	}
	
	.title.show {
		top: 7%;
	}
	
	
	
	
	.content {
		position: absolute;
		top: 0%;
		left: 45%;
		width: 21%;
	}
	
	.content.show {
		top: 54%;
	}
	
	
	
	
	
	.girl {
		position: absolute;
		bottom: -20%;
		left: 30%;
		width: 15%;
		margin-bottom: -15px;
	}
	
	.girl.show {
		bottom: 0%;
		animation-name: jump;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}
	
	
	
	
	.hands {
		position: absolute;
		bottom: -20%;
		left: 58%;
		width: 11%;
		margin-bottom: -15px;
	}
	
	.hands.show {
		bottom: 5%;
		animation-name: jump;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-delay: .2s;
	}
}

@media screen and (max-width: 767px) {

}

@media screen and (max-width: 320px) {

}

@media screen and (max-device-width: 480px) {
	
}