@charset "UTF-8";
/*color*/
/* mixinCSS Document */
/*----------common----------*/
/*alt*/
/*hover*/
/*
 style.css（ファイル名変更不可）
 本サイト各ページ用CSS（記事ページ）
*/
/* ntv-wrapper
========================================== */
.ntv-wrapper {
  background-color: #fff;
}

/* aside内(※margin, paddingは変更しないでください)
========================================== */
/* タイトル（フォント色、背景色）
------------------------------------------ */
.drama-box-title.title-base {
  /* color: #000; */
  /* background-color: #f00; */
}

/* SNS・シェア（枠色）
------------------------------------------ */
.drama-box-sns-area,
.drama-box-share-area {
  /* border-color: #000; */
}

/* SNS・シェア（タイトル色、タイトル背景色）
------------------------------------------ */
.drama-box-sns-area .drama-box-title,
.drama-box-share-area .drama-box-title {
  /* color: #000; */
  /* background-color: #fff; */
}

/* ------------------------------------------------------------------
 SP（〜600px）
------------------------------------------------------------------ */
@media only screen and (max-width: 600px) {
  /* ntv-wrapper
  ========================================== */
  .ntv-wrapper {
    margin-bottom: 0;
  }

  #d-nav .d-nav-area .d-nav-list {
    position: relative;
  }
  #d-nav .d-nav-area .d-nav-list:after {
    content: "";
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAABCAMAAAA7HHRPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTk2Q0Y5MzAwMjgzMTFFOTlCNzdCMUM5REI0NDVFNUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTk2Q0Y5MzEwMjgzMTFFOTlCNzdCMUM5REI0NDVFNUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCMjc2QkE3RjAyNzcxMUU5OUI3N0IxQzlEQjQ0NUU1QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCMjc2QkE4MDAyNzcxMUU5OUI3N0IxQzlEQjQ0NUU1QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Prd3dhcAAAAGUExURf///////1V89WwAAAACdFJOU/8A5bcwSgAAABFJREFUeNpiYGBgYAQDgAADAAAfAAfvwIGSAAAAAElFTkSuQmCC") repeat-x center center;
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
  }
  #d-nav .d-nav-area .d-nav-item {
    width: 24%;
  }
  #d-nav .d-nav-area .d-nav-item:nth-child(5):after {
    display: none;
  }
}
/* ------------------------------------------------------------------
 SP 〜 tablet（〜992px）
------------------------------------------------------------------ */
@media screen and (max-width: 992px) {
  #d-nav {
    background-color: #ff0638;
    /* drama-nav-list
    ------------------------------ */
    /* d-nav - status */
    /* d-nav - contents */
  }
  #d-nav .d-nav-list {
    width: 100%;
    margin: 0px auto;
    font-size: 0;
    text-align: center;
  }
  #d-nav .d-nav-item {
    display: inline-block;
    width: 12%;
    vertical-align: top;
    position: relative;
  }
  #d-nav .d-nav-item:after {
    content: "";
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAB4CAYAAAAzOJiAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACNJREFUeNpi+P//PwMTAxCQR/yHsxhHlQxXJf/x6sVKAAQYACckEuwlqzxQAAAAAElFTkSuQmCC") no-repeat center center;
    display: block;
    width: 1px;
    padding-top: 100%;
    position: absolute;
    top: 0;
    left: -1%;
  }
  #d-nav .d-nav-item:first-child:after {
    display: none;
  }
  #d-nav .d-nav-item:not(:first-child) {
    margin-left: 0.56%;
  }
  #d-nav .d-nav-item a,
  #d-nav .d-nav-item span.cs {
    display: block;
    width: 100%;
    padding-top: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
    overflow: hidden;
  }
  #d-nav .d-nav-item.is-new:before {
    content: '';
    display: block;
    width: 40%;
    height: 40%;
    background: url(../images/common/drama-nav-icon-new.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: -15%;
    right: -3%;
    z-index: 30;
  }
  #d-nav .d-nav-item.is-coming {
    background-color: transparent;
  }
  #d-nav .d-nav-item.is-coming a {
    opacity: 1;
    pointer-events: none;
  }
  #d-nav .d-nav-item.intro a {
    background-image: url(/setsuyakurock/images/nav/intro.png);
  }
  #d-nav .d-nav-item.story a {
    background-image: url(/setsuyakurock/images/nav/story.png);
  }
  #d-nav .d-nav-item.caststaff a {
    background-image: url(/setsuyakurock/images/nav/caststaff.png);
  }
  #d-nav .d-nav-item.chart a {
    background-image: url(/setsuyakurock/images/nav/chart.png);
  }
  #d-nav .d-nav-item.original a {
    background-image: url(/setsuyakurock/images/nav/original.png);
  }
  #d-nav .d-nav-item.music a {
    background-image: url(/setsuyakurock/images/nav/music.png);
  }
  #d-nav .d-nav-item.topics a {
    background-image: url(/setsuyakurock/images/nav/topics.png);
  }
  #d-nav .d-nav-item.hulu a {
    background-image: url(/setsuyakurock/images/nav/hulu.png);
  }
  #d-nav .d-nav-item a span {
    width: 100%;
    font-size: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
  }

  /* area
  ========================================== */
  .d-area {
    margin: 0px auto;
  }

  .d-inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
  }
}
/* ------------------------------------------------------------------
 PC（993px〜）
------------------------------------------------------------------ */
@media screen and (min-width: 993px) {
  #d-nav {
    background-color: #ff0638;
    /* drama-nav-list
    ------------------------------ */
    /* d-nav - status */
    /* d-nav - contents */
  }
  #d-nav .d-nav-list {
    width: 100%;
    margin: 0px auto;
    font-size: 0;
    text-align: center;
  }
  #d-nav .d-nav-item {
    display: inline-block;
    width: 12%;
    vertical-align: top;
    position: relative;
  }
  #d-nav .d-nav-item:after {
    content: "";
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAB4CAYAAAAzOJiAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACNJREFUeNpi+P//PwMTAxCQR/yHsxhHlQxXJf/x6sVKAAQYACckEuwlqzxQAAAAAElFTkSuQmCC") no-repeat center center;
    display: block;
    width: 1px;
    padding-top: 100%;
    position: absolute;
    top: 0;
    left: -1%;
  }
  #d-nav .d-nav-item:first-child:after {
    display: none;
  }
  #d-nav .d-nav-item:not(:first-child) {
    margin-left: 0.56%;
  }
  #d-nav .d-nav-item a,
  #d-nav .d-nav-item span.cs {
    display: block;
    width: 100%;
    padding-top: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
    overflow: hidden;
  }
  #d-nav .d-nav-item.is-new:before {
    content: '';
    display: block;
    width: 40%;
    height: 40%;
    background: url(../images/common/drama-nav-icon-new.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: -15%;
    right: -3%;
    z-index: 30;
  }
  #d-nav .d-nav-item.is-coming {
    background-color: transparent;
  }
  #d-nav .d-nav-item.is-coming a {
    opacity: 1;
    pointer-events: none;
  }
  #d-nav .d-nav-item.intro a {
    background-image: url(/setsuyakurock/images/nav/intro.png);
  }
  #d-nav .d-nav-item.story a {
    background-image: url(/setsuyakurock/images/nav/story.png);
  }
  #d-nav .d-nav-item.caststaff a {
    background-image: url(/setsuyakurock/images/nav/caststaff.png);
  }
  #d-nav .d-nav-item.chart a {
    background-image: url(/setsuyakurock/images/nav/chart.png);
  }
  #d-nav .d-nav-item.original a {
    background-image: url(/setsuyakurock/images/nav/original.png);
  }
  #d-nav .d-nav-item.music a {
    background-image: url(/setsuyakurock/images/nav/music.png);
  }
  #d-nav .d-nav-item.topics a {
    background-image: url(/setsuyakurock/images/nav/topics.png);
  }
  #d-nav .d-nav-item.hulu a {
    background-image: url(/setsuyakurock/images/nav/hulu.png);
  }
  #d-nav .d-nav-item a span {
    width: 100%;
    font-size: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
  }

  /* area
  ========================================== */
  .d-area {
    margin: 0px auto;
  }

  .d-inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .ntv-pageTop a {
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 5px;
    z-index: 100;
  }

  .ntv-pageTop a:after {
    content: "";
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    margin-top: 24.5px;
  }
}