@charset "UTF-8";
/*
 topics.css（ファイル名変更不可）
 本サイト記事ページ用CSS（記事ページのみ読み込まれる）
*/
.drama-contentsBox {
  margin-top: 0;
  background: url("../images/common/bg_Bl.jpg") repeat;
}
.drama-contentsBox:after {
  content: "";
  background: url("../images/common/town1.png") no-repeat center bottom;
  width: 100%;
  height: 0;
  padding-top: 23.42%;
  background-size: contain;
  display: block;
  margin-top: -10%;
  z-index: 1;
}
.drama-contentsBox .drama-contentsBox-inner {
  position: relative;
}
.drama-contentsBox .drama-contentsBox-inner:before {
  content: "";
  background: url("../images/common/cloud01.png") no-repeat;
  width: 277px;
  height: 42px;
  position: absolute;
  left: -5%;
  top: 1%;
  z-index: 1;
}
.drama-contentsBox .drama-contentsBox-inner:after {
  content: "";
  background: url("../images/common/cloud02.png") no-repeat;
  width: 344px;
  height: 115px;
  position: absolute;
  right: -5%;
  top: 2%;
  z-index: 1;
}
.drama-contentsBox .drama-contentsBox-inner #topics {
  position: relative;
  z-index: 100;
}
.drama-contentsBox .drama-contentsBox-inner .drama-box-title {
  background: url("../images/top/h3_topics.png") no-repeat center;
  width: 255px;
  height: 116px;
  margin: 4% auto;
  z-index: 100;
}

/* ------------------------------------------------------------------
 SP（〜600px）
------------------------------------------------------------------ */
/* ------------------------------------------------------------------
 SP 〜 tablet（〜992px）
------------------------------------------------------------------ */
@media screen and (max-width: 992px) {
  .drama-contentsBox .drama-contentsBox-inner:before {
    width: 30%;
    height: 0;
    padding-top: 5.36%;
    background-size: contain;
    top: 1%;
    z-index: 1;
  }
  .drama-contentsBox .drama-contentsBox-inner:after {
    width: 30%;
    height: 0;
    padding-top: 10.03%;
    background-size: contain;
    top: 1%;
    z-index: 1;
  }
  .drama-contentsBox .drama-contentsBox-inner #topics {
    position: relative;
    z-index: 100;
  }
  .drama-contentsBox .drama-contentsBox-inner #topics .drama-box-title {
    width: 30.67%;
    height: 0;
    padding-top: 15.09%;
    background-size: contain;
  }
  .drama-contentsBox .drama-contentsBox-inner #topics .drama-box-body {
    border: 1px solid #fff !important;
  }
  .drama-contentsBox .drama-contentsBox-inner #topics .topics-box-body {
    width: 90%;
    margin: auto;
  }
}
/* ------------------------------------------------------------------
 PC（993px〜）
------------------------------------------------------------------ */