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

.drama-contentsBox {
	margin: 0 auto;
	background-image: url(../images/common/bg_map.png);
}
.topics-area .drama-box-title {
	height: 44px;
	padding: 0;
	background: url(../images/common/d-box-title-topics_pc.png) no-repeat center;
	background-size: contain;
	font-size: 0;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
	margin: 70px auto;
}
body.second .drama-main .topics-area .drama-box-body {
	position: relative;
	z-index: 0;
	border: none;
	background-image: url(../images/common/bg_dark.png);
	padding: 60px;
}
body.second .drama-main .topics-area .drama-box-body:after {
	content: '';
	display: inline-block;
	position: absolute;
	z-index: -1;
	top: 60px;
	left: auto;
	right: 70px;
	transform: rotate(-3deg);
	width: 50%;
	height: 40px;
	background: #dbdbdb;
}

body.second .drama-main .topics-area .drama-article {
	position: relative;
	z-index: 1;
}
body.second .drama-main .topics-area .drama-article:before {
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
	top: -50px;
	right: -50px;
	width: 163px;
	height: 147px;
	background: url(../images/common/topics_deco.png) no-repeat center;
	background-size: contain;
}



/* ------------------------------------------------------------------
 PC（993px〜）
------------------------------------------------------------------ */
@media screen and (min-width: 993px) {
	.drama-contentsWrap a:hover { opacity: 0.6; }
}

/* ------------------------------------------------------------------
 tablet（〜992px）
------------------------------------------------------------------ */
@media screen and (max-width: 992px) {
	body.second .drama-main .topics-area .drama-inner {
		padding: 0;
	}
	body.second .drama-main .topics-area .drama-box-body {
		padding: 60px 30px;
	}
	body.second .drama-main .topics-area .drama-box-body:after {
		top: 60px;
		left: auto;
		right: 40px;
	}


}

/* ------------------------------------------------------------------
 SP（〜600px）
------------------------------------------------------------------ */
@media only screen and (max-width: 600px) {
	.drama-contentsBox {
		background-image: url(../images/common/bg_map.png);
		background-size: 160px 160px;
	}
	body.second .drama-main .topics-area .drama-inner {
		padding: 0;
	}
	.topics-area .drama-box-title {
		height: 23px;
		background: url(../images/common/d-box-title-topics_sp.png) no-repeat center;
		background-size: contain;
		margin: 30px auto 10px;
	}
	body.second .drama-main .topics-area .drama-box-body {
		background-image: none;
		padding: 0;
	}
	body.second .drama-main .topics-area .drama-box-body:before {
		content: '';
		display: block;
		position: absolute;
		z-index: 0;
		top: 20px;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url(../images/common/bg_paper.png);
	}
	body.second .drama-main .topics-area .drama-box-body:after {
		content: '';
		display: inline-block;
		position: absolute;
		z-index: -1;
		top: 25px;
		left: 0;
		transform: rotate(-3deg);
		width: 100%;
		height: 10%;
		background: #dbdbdb;
	}
	body.second .drama-main .topics-area .drama-article {
		width: calc(100% - 30px);
		margin: 30px auto 0;
	}
	body.second .drama-main .topics-area .drama-article:before {
		content: '';
		display: block;
		position: absolute;
		z-index: -1;
		top: -25px;
		right: -20px;
		width: 82px;
		height: 74px;
	}
	#topics .topics-btn {
		margin: 20px auto 0;
	}


}