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

.drama-contentsBox, .drama-contentsBox-inner, .drama-main {
  margin: 0;
}

#topics {
  background-color: #ffce07;
  margin: 0;
}

#topics .drama-inner {
  background-image: url(../images/top/bg_yellow.png);
	background-repeat: no-repeat;
	background-position: top right;
  padding: 60px 0 150px;
}

#topics .drama-box-title {
	height: 36px;
	background-image: url(../images/top/topics_title.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	margin: 0 auto 35px;
	font-size: 0px;
}

#topics .drama-box-title > span.title-01 {
  height: 0;
}

body.second .drama-main .drama-box-body {
  border: none;
}


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

  body.second .drama-main .topics-area .drama-box-body {
    width: calc(100% - 40px);
    margin: auto;
  }

  body.second .drama-main .topics-area .drama-article {
    padding: 20px 18px 10px;
  }

  body.second .drama-main .topics-area .drama-article-tag {
    padding: 0;
  }

  body.second .drama-main .topics-area .drama-article-body {
    padding: 20px 0 0;
  }
}


/* ------------------------------------------------------------------
 SP（〜600px）
------------------------------------------------------------------ */
@media only screen and (max-width: 600px) {

  #topics .drama-inner {
		background-position: top center;
		background-size: 105%;
    padding: 25px 0 50px;
  }

  body.second .drama-main .topics-area {
    margin: 0 auto;
  }

  body.second .drama-main .topics-area .drama-box-body {
    width: calc(100% - 20px);
    padding: 0 0 20px;
    background-color: #fff;
  }

  #topics .drama-box-title {
		height: 19.8px;
		margin-bottom: 15px;
  }
  
  body.second .drama-main .topics-area .drama-article-body {
    padding: 0 10px;
  }

  .drama-share-body>ul>li {
    padding: 0 10px;
  }

}