@charset "UTF-8";
/*
 topics.css（ファイル名変更不可）
 本サイト記事ページ用CSS（記事ページのみ読み込まれる）
*/

/* General
========================================== */
body.second .drama-contentsBox {
	margin: 0 auto;
}
body.second .drama-contentsBox-inner {
	padding: 0;
	background: url(../images/common/bg-dot-01.png) repeat center transparent;
	background-size: 4px auto;
	box-shadow: 0 16px 45px -6px rgba(0, 0, 0, 0.5) inset;
}
body.second .drama-main .topics-area {
	margin: 0 auto 160px;
}
body.second .drama-main .topics-area .drama-tag {
	background-color: #535353;
	border-color: #535353;
}
body.second .drama-main .drama-box-body {
	border: 20px solid #d9d9d9;
}
body.second .drama-main .drama-box-title {
	width: 100%;
	height: 215px;
	padding: 0;
	background: url(../images/common/d-box-title-topics-article.png) no-repeat center transparent;
	background-size: contain;
	font-size: 0;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
}



/* ------------------------------------------------------------------
 SP（〜600px）
------------------------------------------------------------------ */
@media only screen and (max-width: 600px) {
	body.second .drama-contentsBox {
		margin: 0 auto;
	}
	body.second .drama-contentsBox-inner {
		background-size: 2px auto;
		box-shadow: 0 16px 20px -10px rgba(0, 0, 0, 0.5) inset;
	}
	body.second .drama-main .topics-area {
		margin: 0 auto 12% !important;
	}
	body.second .drama-main .topics-area .drama-article-tag {
		padding: 10px 10px 0;
	}
	body.second .drama-main .drama-box-body {
		margin: 0 3%;
		border: 10px solid #d9d9d9;
	}
	body.second .drama-main .drama-box-title { height: 0; padding-top: calc(200 / 640 * 100%); background-size: cover; }
}

/* ------------------------------------------------------------------
 SP 〜 tablet（〜992px）
------------------------------------------------------------------ */
@media screen and (min-width: 601px) and (max-width: 992px) {
	body.second .drama-main .drama-box-body {
		margin: 0 20px;
	}
	body.second .drama-main .drama-box-title {
		background-size: cover;
	}
	body.second .drama-main .topics-area .drama-inner {
		padding: 0;
	}
}

@media screen and (max-width: 992px) {
	body.second .drama-main .topics-area {
		margin: 0 auto 120px;
	}
}


/* ------------------------------------------------------------------
 PC（993px〜）
------------------------------------------------------------------ */
@media screen and (min-width: 993px) {
	body.second .drama-main .topics-area .drama-article {
		padding: 45px 42px;
		margin-top: 0;
	}
}