@charset "UTF-8";


/* cast
========================================== */
.cast-area {}
.cast-area a { display: block; }
.cast-inner {}
.cast-box {}
.cast-box + .cast-box{
	margin-top: 60px;
}

.cast-img {}
.cast-img img {
	margin: 0 auto;
}
.drama-main .drama-box-subTitle > span.title-01 {
	font-size: 0;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
	line-height: 0;
	width: 100%;
	height: 31px;
	background-image: url(../images/cast/drama-box-subTitle-cast.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.drama-main .staff-box .drama-box-subTitle > span.title-01 {
	background-image: url(../images/cast/drama-box-subTitle-staff.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}

.drama-contentsWrap .cast-box .cast-img img {
	width: 100%;
	max-width: 502px;
}
.drama-contentsWrap .staff-box .cast-img img {
	width: 100%;
	max-width: 640px;
}



.cast-text {
	font-size: 0;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
}





/* ------------------------------------------------------------------
	small-screen
------------------------------------------------------------------ */
@media only screen and (max-width: 600px) {
	/* drama-box-body
	========================================== */
	body.second .drama-main .drama-box-body { padding-top: 0; }
	.drama-main .drama-box-subTitle {
		margin-bottom: 30px;
	}


	/* cast
	========================================== */
	.cast-area { margin: 0 auto 20px; }

	.cast-img {
		padding: 0 15px;
	}
	.drama-contentsWrap .cast-box .cast-img {
		padding: 0 15px;
	}
	.cast-img img {
		max-width: 400px !important;
		margin: 0 auto;
	}
	.cast-box + .cast-box {
		margin-top: 35px;
	}

	.cast-text {
		font-size: 0;
		text-indent: -9999px;
		overflow: hidden;
		white-space: nowrap;
	}

	.drama-main .drama-box-subTitle {
		padding: 5px 15px;
	}
	.drama-main .drama-box-subTitle > span.title-01 {
		height: 20px;
	}

}



/* ------------------------------------------------------------------
	small-screen-up to medium-screen
------------------------------------------------------------------ */
@media only screen and (min-width: 601px) and (max-width: 992px) {
}



/* ------------------------------------------------------------------
	medium-screen
------------------------------------------------------------------ */
@media only screen and (max-width: 992px) {
}



/* ------------------------------------------------------------------
	medium-screen-up
------------------------------------------------------------------ */
@media only screen and (min-width: 993px) {
	.drama-contentsWrap .cast-img img {
		width: 643px;
	}
}



/* ------------------------------------------------------------------
	small-screen-up
------------------------------------------------------------------ */
@media only screen and (min-width: 601px) {
	.cast-img {
		padding: 0 50px;
	}
}