@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : cast.css
Description :キャスト・スタッフ
===================================================================== */

.cast {
	padding: calc(100 / 750 * 100%) 0 calc(170 / 750 * 100%);
}

.cast::before {
	content: "";
	display: block;
	width: calc(245 / 750 * 100%);
	padding-top: calc(559 / 750 * 100%);
	background: url(../images/cast/bg_deco1.webp) no-repeat left top;
	background-size: cover;
	position: absolute;
	top: 0;
	right: 0;
	margin: calc(-35 / 750 * 100%) 0 0;
}

.cast::after {
	content: "";
	display: block;
	width: calc(336 / 750 * 100%);
	padding-top: calc(548 / 750 * 100%);
	background: url(../images/cast/bg_deco2.webp) no-repeat center top;
	background-size: cover;
	position: absolute;
	bottom: 0;
	margin: 0 0 calc(130/ 750 * 100%);
	z-index: 1;
}

.cast .inner {
	z-index: 2;
}

.cast h2 {
	margin-bottom: calc(100 / 650 * 100%);
}

.cast_wrap > div {
	border: 3px solid #f5f5f5;
	background-color: #ffffff;
	padding: calc(70 / 650 * 100%) calc(60 / 650 * 100%);
}

.cast_wrap > div:not(:last-child) {
	margin-bottom: calc(100 / 650 * 100%);
}

.cast_box .cast_subttl {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(74 / 650 * 100%);
	margin: calc(-20 / 650 * 100%) 0 0 calc(60 / 650 * 100%);
}

.staff_box .cast_subttl {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(92 / 650 * 100%);
	margin: calc(-20 / 650 * 100%) calc(60 / 650 * 100%) 0 0;
}

.cast_wrap ul li {
	/*	margin-bottom: calc(40 / 650 * 100%);*/
	margin-bottom: 2.5em;
}

.cast_wrap dl {
	color: #63596a;
}

.cast_wrap dt {
	font-size: 2rem;
	font-weight: bold;
}

.cast_wrap dt rt {
	font-size: 1.4rem;
}

.cast_wrap dd {
	font-size: 2.8rem;
}

.cast_wrap dd small {
	margin-left: 1em;
}

.cast_name4 {
	width: calc(94 / 750 * 100vw) !important;
}


/*1列ver*/

.column1 li:last-child {
	margin-bottom: 0;
}

.column1 .cast_list dl {
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.column1 .cast_list dt {
	width: 50%;
	padding-right: 1.3em;
	text-align: right;
}

@media all and (-ms-high-contrast: none) {
	.cast_list rt {
		-webkit-transform: translateY(-.5rem);
		transform: translateY(-.5rem);
	}
}

.column1 .cast_list dd {
	width: 50%;
	padding-left: 1.3em;
	display: -moz-inline-flex;
	display: -ms-inline-flex;
	display: -o-inline-flex;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-ms-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.column1 .staff_list {
	text-align: center;
}

.flex {
	width: 100% !important;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.flex dl {
	width: 50%;
}

@media screen and (max-width: 767px) {
	.flex dl {
		display: block !important;
	}

	.flex dl * {
		display: block !important;
		width: 100% !important;
		padding: 0 !important;
		text-align: center !important;
	}
}


/*2列ver*/
.column2 ul {
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-align-items: flex-end;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

.column2 ul li {
	width: 50%;
}

.column2 ul li:nth-last-child(-n+2) {
	margin-bottom: 0;
}

.column2 .wide {
	width: 100%;
}

.column2 dt {
	line-height: 1;
}

.column2 .cast_name4 {
	margin: 0.6em 0;
}

.column2 ul li:nth-last-child(-n+2) {
	margin-bottom: 0;
}

@media screen and (min-width: 768px) {
	.cast {
		padding: calc(120 / 1400 * 100%) 0 calc(140 / 1400 * 100%);
	}

	.cast::before {
		width: calc(245 / 1400 * 100%);
		padding-top: calc(559 / 1400 * 100%);
		margin: calc(-35 / 1400 * 100%) 0 0;
		background-size: contain;
	}

	.cast::after {
		width: calc(336 / 1400 * 100%);
		padding-top: calc(548 / 1400 * 100%);
		margin: 0 0 calc(-100 / 1400 * 100%);
		background-size: contain;
	}

	.cast h2 {
		margin-bottom: calc(80 / 1200 * 100%);
	}

	.cast_wrap {}

	.cast_wrap > div {
		border-width: .6rem;
		width: calc(1000 / 1200 * 100%);
		margin: auto;
		padding: calc(60 / 1200 * 100%) calc(190 / 1200 * 100%);
	}

	.cast_wrap > div:not(:last-child) {
		margin-bottom: calc(100 / 1200 * 100%);
	}

	.cast_box .cast_subttl {
		width: calc(74 / 1200 * 100%);
		margin: calc(-15 / 1200 * 100%) 0 0 calc(60 / 1200 * 100%);
	}

	.staff_box .cast_subttl {
		width: calc(92 / 1200 * 100%);
		margin: calc(-15 / 1200 * 100%) calc(60 / 1200 * 100%) 0 0;
	}

	.cast_list {
		margin-bottom: 0;
	}

	.cast_wrap dl {}

	.cast_wrap ul li {
		margin-bottom: 3em;
	}

	.cast_wrap dt {
		font-size: 1.4rem;
	}

	.cast_wrap dt rt {
		font-size: 0.9rem;
	}

	.cast_wrap dd {
		font-size: 1.8rem;
	}

	.cast_name4 {
		width: calc(66 / 304 * 100%) !important;
	}

	.column2 .cast_name4 {
		margin: 0.4em 0;
	}

}

@media screen and (min-width: 1400px) {
	.cast {
		padding: 120px 0 140px;
	}

	.cast::before {
		width: 245px;
		padding-top: 559px;
		margin: -35px 0 0;
	}

	.cast::after {
		width: 336px;
		padding-top: 548px;
		margin: 0 0 -100px;
	}
}