@charset "UTF-8";
/*
 topics.css（ファイル名変更不可）
 本サイト記事ページ用CSS（記事ページのみ読み込まれる）
*/


.drama-main {
	background: url(../images/common/d-box-bg.png);
}
.drama-main .drama-box {
	position: relative;
	border: 5px solid #cd9935;
	background-color: #fff9ed;
	padding: 50px;
}
.drama-main .drama-box:before {
	position: absolute;
	top: 5px;
	left: 5px;
	content: '';
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border: 1px solid #cd9935;
	z-index: 0;
}
body.second .drama-main .drama-box-body {
	position: relative;
	z-index: 1;
	border: none;
}
body.second .drama-main .topics-area {
	margin: 10px auto;
}
.drama-main .drama-box-title {
	padding: 0 20px;
}
.drama-main .drama-box-title .title-01 {
	background: url(../images/common/takane-title-topics.png) 0 0 no-repeat;
	margin-bottom: 40px;
}
.drama-main .drama-box-title > span.title-01 {
	height: 59px;
	background-position: center;
}
/* ------------------------------------------------------------------
	SP（〜600px）
------------------------------------------------------------------ */
@media only screen and (max-width: 600px) {

	.drama-main .drama-box {
		padding: 20px 6px 6px;
		border: 3px solid #cd9935;
	}
	#topics .drama-inner {
		padding: 0 2%;
	}
	body.second .drama-main .topics-area {
		margin: 15px auto;
	}
	.drama-main .drama-box:before {
		top: 3px;
		left: 3px;
		width: calc(100% - 6px);
		height: calc(100% - 6px);
	}
	.drama-main .drama-box-title > span.title-01 {
		height: 40px;
	}
	.drama-main .drama-box-title .title-01 {
		margin-bottom: 15px;
	}
}

/* ------------------------------------------------------------------
 SP 〜 tablet　（〜992px）
------------------------------------------------------------------ */
@media screen and (max-width: 992px) {
}

@media only screen and (max-width: 992px) and (min-width: 601px) {
	.drama-main .drama-box {
		padding: 50px 20px;
	}
}

/* ------------------------------------------------------------------
 PC（993px〜）
------------------------------------------------------------------ */
@media screen and (min-width: 993px) {
}

/* ------------------------------------------------------------------
 tablet FONT調整用（601px〜）
------------------------------------------------------------------ */
@media screen and (min-width : 601px){

}
