@charset "UTF-8";

/* General
========================================== */
.second .drama-contentsBox {
	margin: 0 auto;
}
.second .drama-main .topics-area .drama-box-body {
	border: none;
}

.topics-area {
	margin: 0 auto !important;
	padding: 0 0 110px;
	background: url(../images/top/topics-bg.png) repeat center;
	background-size: 250px auto;
	position: relative;
	overflow: hidden;
}
.topics-area:before,
.topics-area:after {
	content: '';
	display: block;
	height: 0;
	background-size: contain !important;
	position: absolute;
	z-index: 10;
}
.topics-area:before {
	width: 75.5%;
	max-width: 1131px;
	padding-top: 73.5%;
	background: url(../images/top/topics-illust-01.png) no-repeat top center;
	top: -2%;
	left: 0;
}
.topics-area:after {
	width: 23.4%;
	max-width: 350px;
	padding-top: 21.4%;
	background: url(../images/top/topics-illust-02.png) no-repeat top center;
	top: 1%;
	right: 1.5%;
}

.topics-area .drama-box-title {
	height: 200px;
	padding: 0;
	background: url(../images/common/d-box-title-topics.png) no-repeat center;
	background-size: contain;
	font-size: 0;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
}

.topics-area .drama-inner {
	position: relative;
	z-index: 15;
}

.second .drama-main .topics-area .drama-article-body > h1{
	color: #d8296e;
}





/* ------------------------------------------------------------------
	SP（〜600px）
------------------------------------------------------------------ */
@media only screen and (max-width: 600px) {
	.topics-area .drama-inner:before {
		width: 100% !important;
		padding-top: calc(403 / 750 * 100%) !important;
		background-image: url(../images/top/topics-illust-01-sp.png) !important; /* same as TOP TOPICS illust */
		bottom: 0.25% !important;
	}
	.topics-area .drama-inner .drama-box {
		padding-bottom: 40% !important;
	}
	.topics-area .drama-box-title {
		height: 0;
		padding-top: calc(220 / 750 * 100%);
		background-size: contain;
	}
	body.second .drama-main .topics-area .drama-article-tag {
		padding: 20px 20px 0;
	}
	body.second .drama-main .topics-area .drama-article-body {
		padding: 20px;
	}
}





/* ------------------------------------------------------------------
	SP 〜 tablet（〜992px）
------------------------------------------------------------------ */
@media screen and (max-width: 992px) {
	.topics-area { padding: 0; }
	.topics-area:before {
		width: calc(75.5% * 1.5);
		padding-top: calc(73.5% * 1.5);
		background-position: center top;
		background-size: cover !important;
		top: -1%;
		left: -26%;
	}
	.topics-area:after {
		width: calc(23.4% * 1.5);
		padding-top: calc(21.4% * 1.5);
		top: 0.5%;
		right: -1%;
	}
	.topics-area .topics-btn > a {
		width: 87.5% !important;
	}
	.topics-area .drama-inner {
		position: relative;
	}
	.topics-area .drama-inner:before {
		content: '';
		display: block;
		width: calc(75.5% * 1.5); /* same as above illust */
		height: 0;
		padding-top: 50%; /* for shorten */
		background: url(../images/top/topics-illust-01.png) no-repeat bottom center; /* same as above illust */
		background-size: cover;
		position: absolute;
		bottom: -0.5%;
		left: 0;
		z-index: -10;
	}
	.topics-area .drama-inner .drama-box {
		padding-bottom: 35%;
	}
}





/* ------------------------------------------------------------------
	PC（993px〜）
------------------------------------------------------------------ */
@media screen and (min-width: 993px) {}






/* ------------------------------------------------------------------
	tablet FONT調整用（601px〜）
------------------------------------------------------------------ */
@media screen and (min-width : 601px){}