@charset "utf-8";

/*-----------------------------------------
	ConceptBody
-----------------------------------------*/

#ConceptBody {
	padding-top: 40px;
}

.ConceptImage1 {
	background: url(/img/concept_bg_1.jpg) no-repeat center top;
	background-size: 100%;
	width: 100%;
	aspect-ratio: 764/2136;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.ConceptImage2 {
	background: url(/img/concept_bg_2.jpg) no-repeat center top;
	background-size: 100%;
	width: 100%;
	aspect-ratio: 564/2904;
}

.ConceptImage3 {
	background: url(/img/concept_bg_3.webp) no-repeat center top;
	background-size: 100%;
	width: 100%;
	aspect-ratio: 780/1605;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.ConceptComic img {
	width: 100%;
	display: block;
}

.ConceptComic a {
	display: block;
}

.ConceptImage4 {
	background: url(/img/concept_bg_4.webp) no-repeat center top;
	background-size: 100%;
	width: 100%;
	aspect-ratio: 780/1573;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.ConceptMovie {
	width: 80%;
	position: relative;
	margin-bottom: 60px;
}

.ConceptMovieWrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
}

.ConceptMoviePlayer {
	width: 100%;
	height: 100%;
}

.ConceptMoviePoster {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.ConceptMoviePoster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width: 480px) {
	#ConceptBody {
		padding-top: 10px;
	}

	.ConceptMovie {
		margin-bottom: 20px;
	}
}