@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : movie.css
Description : 動画
===================================================================== */

.movie {
	background: url(../images/common/bg_pattern_chara2.png) top center #f29473;
	background-size: calc(600 / 750 * 100%);
}

.movie .inner {
	padding: calc(120 / 750 * 100%) 0;
}

.movie .sec_contents * {
	z-index: 2;
}

.chara25 {
	width: calc(189 / 630 * 100%) !important;
	margin: calc(120 / 630 * 100%) calc(-60 / 630 * 100%) 0 0;
	top: 0;
	right: 0;
	z-index: 1;
}

.chara26 {
	width: calc(184 / 630 * 100%) !important;
	bottom: 0;
	left: 0;
	margin: 0 0 calc(-250 / 630 * 100%) calc(-30 / 630 * 100%);
	z-index: 1;
}

.movie_subttl {
	margin-bottom: calc(40 / 630 * 100%);
}

.movie_subttl::before {
	content: '';
	position: absolute;
	background-color: #f6ec7f;
	width: 11em;
	height: 1px;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}

.movie_subttl::after {
	content: '';
	position: absolute;
	background-color: #f6ec7f;
	width: 11em;
	height: 1px;
	top: 8px;
	bottom: 0;
	right: 0;
	margin: auto;
}

.movie_subttl span {
	color: #fff;
	font-size: 4.4rem;
}

.movie_list li {
	margin-bottom: calc(60/ 630 * 100%);
}

.movie_photo {
	margin: 0 0 1em;
}

.movie_photo::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #f6ec7f;
	top: 0;
	left: 0;
	margin: calc(10 / 630 * 100%) 0 0 calc(-10 / 630 * 100%);
}

.movie_btn::before {
	content: "";
	display: block;
	width: calc(100 / 750 * 100vw);
	height: calc(100 / 750 * 100vw);
	position: absolute;
	background-color: #ffffff;
	border-radius: 50%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 3;
}

.movie_btn::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: .4em;
	right: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: .7em 0 .7em 1em;
	border-color: transparent transparent transparent #85c0c7;
	z-index: 3;
}



@media screen and (min-width: 768px) {
	.movie {
		background-size: calc(500 / 1200 * 100%);
	}

	.movie .inner {
		padding: calc(120 / 1200 * 100%) 0 calc(180 / 1200 * 100%);
	}

	.chara25 {
		width: calc(189 / 1200 * 100%) !important;
		margin: calc(105 / 1200 * 100%) 0 0 0;
	}

	.chara26 {
		width: calc(184 / 1200 * 100%) !important;
		margin: 0 0 calc(-130 / 1200 * 100%) calc(-50 / 1200 * 100%);
	}

	.movie_subttl {
		margin-bottom: calc(60 / 1000 * 100%);
	}

	.movie_subttl::before {
		width: calc(715 / 1000 * 100%);
	}

	.movie_subttl::after {
		width: calc(715 / 1000 * 100%);
		top: 8px;
	}

	.movie_subttl span {
		font-size: 3rem;
	}

	.movie_list {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		justify-content: center;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.movie_list li {
		width: calc(460 / 1000 * 100%);
		margin-bottom: calc(40 / 1000 * 100%);
	}

	.movie_list li:nth-child(2n) {
		margin-left: calc(75 / 1000 * 100%);
	}

	.movie_photo::before {
		margin: calc(7 / 460 * 100%) 0 0 calc(-7 / 460 * 100%);
	}

	.movie_btn::before,
	.movie_btn::after {
		-webkit-transition: .2s;
		transition: .2s;
	}

	.movie_btn:hover::before,
	.movie_btn:hover::after {
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
		-webkit-transition: .2s;
		transition: .2s;
	}

	.movie_btn::before {
		width: calc(90 / 1200 * 100vw);
		height: calc(90 / 1200 * 100vw);
	}

	.movie_btn::after {
		border-width: 1em 0 1em 1.5em;
	}

}

@media screen and (min-width: 1200px) {
	.movie {
		background-size: 500px;
	}

	.movie .inner {
		padding: 120px 0 180px;
	}

	.movie_btn::before {
		width: 90px;
		height: 90px;

	}