@charset "UTF-8";
/* mixinCSS Document */
/*----------common----------*/
/*alt*/
/*hover*/
.drama-contentsBox {
  margin: 0 auto;
}
.drama-contentsBox .drama-contentsBox-inner {
  padding-bottom: 0;
  position: relative;
  z-index: 100;
}
.drama-contentsBox .drama-contentsBox-inner:before {
  content: "";
  background: url(../images/common/cloud01.png) no-repeat;
  width: 277px;
  height: 42px;
  position: absolute;
  left: -5%;
  top: 120px;
  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: 80px;
  z-index: 1;
}

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

body.second .drama-main .topics-area .drama-article {
  border-radius: 10px 10px 0 0;
}

.drama-inner {
  position: relative;
  z-index: 100;
}

.topics-area {
  margin: 0 auto !important;
  background: url(../images/common/bg.jpg) repeat #7e9fde;
  position: relative;
}
.topics-area:after {
  content: "";
  background: url(../images/common/bottom_town01.png) no-repeat center bottom;
  width: 100%;
  height: 0;
  padding-top: 23.42%;
  background-size: cover;
  display: block;
  margin-top: -9%;
}
.topics-area .drama-box-title {
  text-indent: -9999px;
  display: block;
  overflow: hidden;
  background: url(../images/top/h3_topics.png) no-repeat center;
  padding-top: 12.62136%;
  margin-bottom: 3%;
}

/* ------------------------------------------------------------------
 SP（〜600px）
------------------------------------------------------------------ */
@media only screen and (max-width: 600px) {
  body.second .drama-main .topics-area .drama-article-body {
    padding: 5%;
  }

  body.second .drama-main .topics-area .drama-box-body {
    width: 95%;
    margin: auto;
  }
}
/* ------------------------------------------------------------------
 SP 〜 tablet（〜992px）
------------------------------------------------------------------ */
@media screen and (max-width: 992px) {
  .topics-area {
    padding-top: 3%;
  }

  .drama-contentsBox .drama-contentsBox-inner #topics .drama-box-title {
    width: 30.67%;
    height: 0;
    padding-top: 15.09%;
    background-size: contain;
    margin: 0 auto 4%;
  }

  .drama-contentsBox .drama-contentsBox-inner:before {
    width: 30%;
    height: 0;
    padding-top: 5.36%;
    background-size: contain;
    top: 50px;
    z-index: 1;
  }

  .drama-contentsBox .drama-contentsBox-inner:after {
    width: 30%;
    height: 0;
    padding-top: 10.03%;
    background-size: contain;
    top: 30px;
    z-index: 1;
  }
}
/* ------------------------------------------------------------------
 PC（993px〜）
------------------------------------------------------------------ */