@charset "UTF-8";
/* ==========================================================================
	 * mainvisual
========================================================================== */
.mainvisual__container {
	position: relative;
	width: 100%;
	height: 420px;
	background-image: url(/assets/img/movie/mainvisual_bg_sp.jpg?v=210003);
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: cover;
}
.mainvisual__title {
	padding-top: 1em;
	padding-right: .5em;
	padding-bottom: 1em;
	padding-left: 1.2em;
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 210px;
	background-color: #a4c300;
	opacity: .9;
	font-size: 2.4rem;
	color: #fff;
	line-height: 1.5;
}

@media screen and (min-width: 768px) {
	.mainvisual__container {
		height: 480px;
		background-image: url(/assets/img/movie/mainvisual_bg.jpg?v=210003);
	}
	.mainvisual__title {
		padding-top: .85em;
		padding-right: .5em;
		padding-bottom: .8em;
		padding-left: 1.3em;
		width: 300px;
		font-size: 3.4rem;
	}
}


/* ==========================================================================
	 * movie
========================================================================== */
.movie__container {
	padding-top: 45px;
	padding-right: 20px;
	padding-bottom: 70px;
	padding-left: 20px;
}
.movie__title {
	margin-bottom: 25px;
	font-size: 2.5rem;
	text-align: center;
	color: #297229;
	line-height: 1.5;
}
.movie__bodycopy {
	margin-bottom: 40px;
	font-size: 1.5rem;
	color: #297229;
	line-height: 1.8;
}
.movie__list {
	margin-bottom: -50px;
}
.movie__item {
	margin-bottom: 50px;
}
.movie__picture {
	margin-bottom: 15px;
	overflow: hidden;
	text-align: center;
}
.movie__item-title {
	margin-bottom: 5px;
	font-size: 1.7rem;
	font-weight: bold;
	color: #297229;
	line-height: 1.6;
}
.movie__item-bodycopy {
	font-size: 1.5rem;
	line-height: 1.6;
}
.movie__item-bodycopy span {
	padding-top: 8px;
	display: block;
	font-size: 1.3rem;
	line-height: 1.5;
}
.movie__item-dummy {
	font-size: 1.7rem;
	font-weight: bold;
	text-align: center;
}

@media screen and (min-width: 768px) {
	.movie__container {
		margin-right: auto;
		margin-left: auto;
		padding-top: 90px;
		padding-right: 60px;
		padding-left: 60px;
		max-width: 980px;
	}
	.movie__title {
		font-size: 4rem;
	}
	.movie__bodycopy {
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 80px;
		max-width: 740px;
	}
	.movie__list {
		margin-bottom: -100px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.movie__item {
		margin-bottom: 60px;
		width: 30.5%;
	}
}