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

.drama-main{
	position: relative;
}
.drama-contentsBox{
	margin: 0 auto;
}
.drama-contentsBox-inner{
	padding-bottom: 0;
}
.topics-area{
	margin: 0 auto!important;
}
.topics-area .drama-inner{
	padding: 0 10px 5.1%;
}
.topics-area .drama-box-title{
	text-indent: -9999px;
	width: 54.48%;
	padding: 0;
	padding-top: 19.3%;
	margin-left: 23.36%;
	background: url(../images/topics/topics-title-pc.png) no-repeat;
	background-size:cover;
	height: 0;
}
body.second .drama-main .topics-area .drama-box-body{
	border: 2px solid #d4b79b;
	background: #fbeeda;
	border-radius: 5px;
	padding: 2.04% 2.44% 2.24%;
}
body.second .drama-main .topics-area .drama-article{
	padding: 5.46% 7.28% 5.03%;
	border: 1px solid #d4b79b;
	border-bottom:none;
}
body.second .drama-main .topics-area .drama-article-tag{
	padding: 0;
}
body.second .drama-main .topics-area .drama-article-body{
	padding: 20px 0 0;
}
body.second .drama-main .topics-area .drama-article-aside{
	border: 1px solid #d4b79b;
	border-top:none;
}
#_popIn_recommend_for_drama ._popIn_recommend_container{
	background-color: inherit!important;
}


/* ------------------------------------------------------------------
	SP（〜600px）
------------------------------------------------------------------ */
@media only screen and (max-width: 600px) {
	.drama-contentsBox{
		background: linear-gradient(to bottom, rgb(242, 192, 124) 0%,rgba(240,199,130,1) 26%,rgba(244,203,100,1) 72%,rgba(255,211,160,1) 100%);
	}
	.topics-area .drama-inner{
		padding: 0 4.21875% 7.8125%;
	}
	.topics-area .drama-box-title{
		width: 89.26%;
		padding: 0;
		padding-top: 30.6%;
		margin-left: 4.42%;
		background: url(../images/topics/topics-title-sp.png) no-repeat;
		background-size:cover;
	}
	body.second .drama-main .topics-area .drama-box-body{
		padding: 1.54% 1.71% 1.71%;
	}
	body.second .drama-main .topics-area .drama-article{
		padding: 6.25% 2.85% 3.57%;
	}
	body.second .drama-main .topics-area .drama-article-body{
		padding: 10px 0 0;
	}
	.drama-share-body > ul > li {
	    padding: 0 10px;
	}
}

/* ------------------------------------------------------------------
 SP 〜 tablet　（〜992px）
------------------------------------------------------------------ */
@media screen and (max-width: 992px) {
}


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

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

}