@charset "UTF-8";

.ntv-contentsWrap {
    position: relative;
    padding-bottom: 0;
}

.bg-drama2018-header {
    background: url(../images/common/header-bg.png) repeat-x;
    background-size: contain;
}

.bg-drama2018-header_2nd {
    background: url(../images/common/header-bg_2nd.png) repeat-x;
    background-size: contain;
}

.bg-drama2018-subcontents {
    background: url(../images/common/subcontents-bg.png) repeat-x;
    background-size: contain;
}

.bg-intro {
    box-shadow: 0px 3px 7px -3px rgba(0,0,0,0.35) inset;
    background: url(../images/common/intro-bg.png);
}

.bg-comment,.bg-chart {
    box-shadow: 0px 3px 7px -3px rgba(0,0,0,0.35) inset;
    background: url(../images/common/cast-bg.png);
}

.bg-story {
    box-shadow: 0px 3px 7px -3px rgba(0,0,0,0.35) inset;
    background: url(../images/common/story-bg.png);
}

.bg-cast {
    box-shadow: 0px 3px 7px -3px rgba(0,0,0,0.35) inset;
    background: url(../images/common/cast_list-bg.png);
}

.bg-staff {
    box-shadow: 0px 3px 7px -3px rgba(0,0,0,0.35) inset;
    background: url(../images/common/staff-bg.png);
}

.jImag {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

@media print {
    .jImag {
        display: none;
    }
}

.drama2018-main-mainImg img {
    display: block;
    width: 100%;
    vertical-align: bottom;
}

.drama2018-contents {
    box-sizing: border-box;
    font-size: 1.6rem;
    color: #fff;
}

.drama2018-header_2nd a:hover,.drama2018-contents a:hover, .bnr_cast a:hover, .bnr_24h_inner a:hover {
    transition: opacity .1s;
    text-decoration: none;
    opacity: 0.65;
}

/* drama2018-header */
.drama2018-header {
    padding-bottom: 6%;
    position: relative;
}

.drama2018-header .drama2018-main-mainH2 {
    margin-top: 6.62%;
    text-indent: -9999px;
    width: 100%;
    padding-top: 72.05%;
    height: 0;
    background: url(../images/common/main-mainh2.png) no-repeat;
    background-size: cover;
}

.drama2018-header_2nd .drama2018-header_2nd_txt {
    text-indent: -9999px;
    width: 340px;
    height: 78px;
    background: url(../images/common/header-2nd_txt.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: 242px;
    right: 0px;
}

/* drama2018-subcontents */
.drama2018-subcontents {
    padding: 3.63% 0 6.02%;
    text-align: center;
    position: relative;
}

.drama2018-subcontents-date {
    text-indent: -9999px;
    background: url(../images/common/subcontents-date.png) no-repeat;
    background-size: cover;
    width: 98.18%;
    height: 0;
    padding-top: 6.1%;
    margin: 0 auto;
}

.drama2018-subcontents-menu {
    margin-top: 3.63%;
}

.drama2018-subcontents-menu a {
    display: block;
    width: 25%;
    height: 0;
    padding-top: 13.7%;
    text-indent: -9999px;
    float: left;
}

.drama2018-subcontents-menu .nav_intro {
    background: url(../images/common/nav_intro.png) no-repeat;
    background-size: cover;
}

.drama2018-subcontents-menu .nav_story {
    background: url(../images/common/nav_story.png) no-repeat;
    background-size: cover;
}

.drama2018-subcontents-menu .nav_cast {
    background: url(../images/common/nav_cast.png) no-repeat;
    background-size: cover;
}

.drama2018-subcontents-menu .nav_staff {
    background: url(../images/common/nav_staff.png) no-repeat;
    background-size: cover;
}

.drama2018-subcontents-menu:after {
    display: block;
    content: '';
    clear: both;
}

.drama2018-subcontents-bnr {
    margin-top: 3.63%;
}

.drama2018-subcontents-bnr a {
    width: 94.84%;
    display: inline-block;
}

.drama2018-subcontents-bnr a img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.drama2018-subcontents-movie {
    margin-top: 6.92%;
}

.drama2018-subcontents-movie h3 {
    padding: 0 0 3.03% 1.51%;
    border-bottom: 1px solid #fff;
}

.drama2018-subcontents-movie h3 span {
    width: 19.12%;
    padding-top: 5.2%;
    background: url(../images/common/movie-h3.png) no-repeat;
    background-size: cover;
    text-indent: -9999px;
    display: block;
    height: 0;
}

.drama2018-subcontents-movie .drama2018-subcontents-movie_inner {
    position: relative;
    height: 0;
    padding: 56.25% 0 0;
    margin: 6.02% 2.25% 0
}

.drama2018-subcontents-movie .drama2018-subcontents-movie_inner iframe,
.drama2018-subcontents-movie .drama2018-subcontents-movie_inner img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.drama2018-subcontents-timeline {
    margin-top: 6.02%;
    padding: 0 2.42%;
    height: 400px;
}

.drama2018-subcontents-timeline iframe {
    width: 740px !important;
}

/* drama2018-box */
.drama2018-box {
    padding: 9.09% 0;
    position: relative;
}

.drama2018-box h3 {
    padding: 0 0 3.03% 1.51%;
}

.drama2018-box h3 span {
    text-indent: -9999px;
    height: 0;
    display: block;
}

.drama2018-box-inner {
    padding: 7.57% 7.57% 0 1.51%;
}

.drama2018-box-inner p {
    line-height: 1.75;
    letter-spacing: 1px;
    font-size: 1.6rem;
}

.drama2018-box-inner p:not(:last-of-type) {
    margin-bottom: 4.54%;
}

.drama2018-box-inner p span {
    font-size: 2rem;
    font-weight: bold;
}

.drama2018-box-inner p i {
    font-size: 70%;
}

.drama2018-box .staff-table {
    font-size: 2rem;
    display: inline-block;
    text-align: left;
    margin: 7.57% 0 40.9%;
}

.drama2018-box .staff-table tr th {
    text-align: right;
    padding: 1% 0;
}

.drama2018-box#intro {
    background: url(../images/common/intro-bg-inner.png) no-repeat;
    background-size: cover;
}

.drama2018-box#intro h3 {
    border-bottom: 1px solid #97b6d8;
}

.drama2018-box#intro h3 span {
    width: 48.33%;
    padding-top: 9.4%;
    background: url(../images/common/intro-h3.png) no-repeat;
    background-size: cover;
}

.drama2018-box#comment {
}

.drama2018-box#comment h3 {
    border-bottom: 1px solid #fff6c4;
}

.drama2018-box#comment h3 span {
    width: 49.84%;
    padding-top: 9.3%;
    background: url(../images/common/cast-h3.png) no-repeat;
    background-size: cover;
}

.drama2018-box#comment .drama2018-box-inner {
    padding-left: 0;
    padding-right: 0;
}

.drama2018-box#comment .cast-comment {
    padding: 0 7.57% 0 1.51%;
}

.drama2018-box#comment .cast-comment:after {
    display: block;
    content: '';
    clear: both;
}

.drama2018-box#comment .cast-comment.kenton {
    background: url(../images/common/cast-bg-inner.png) no-repeat;
    background-position: 100% 40%;
    border-bottom: 1px solid #fff;
    margin-bottom: 7.57%;
    padding-bottom: 7.57%;
}

.drama2018-box#comment .cast-comment.fuminok {
    padding-left: 4%;
}

.drama2018-box#comment .cast-comment .cast-img,
.drama2018-box#comment .cast-comment .cast-txt {
    float: left;
}

.drama2018-box#comment .cast-comment .cast-img {
    margin-right: 4%;
    width: 31.93%;
}

.drama2018-box#comment .cast-comment .cast-img img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.drama2018-box#comment .cast-comment .cast-txt {
    width: 64%;
}

.drama2018-box#cast {
}

.drama2018-box#cast h3 {
    border-bottom: 1px solid #fff;
}

.drama2018-box#cast h3 span {
    width: 15.72%;
    padding-top: 9.6%;
    background: url(../images/common/cast_list-h3.png) no-repeat;
    background-size: cover;
}

.drama2018-box#cast .drama2018-box-inner {
    padding-left: 0;
    padding-right: 0;
}

.drama2018-box#cast .cast_list {
    border-bottom: 1px solid #fff;
    padding: 0 3% 7.51% 3.9%;
}

.drama2018-box#cast .cast_list:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.drama2018-box#cast .cast_list~.cast_list {
    margin-top: 7.57%;
}

.drama2018-box#cast .cast_list:after {
    display: block;
    content: '';
    clear: both;
}

.drama2018-box#cast .cast_list .cast_list-img,
.drama2018-box#cast .cast_list .cast_list-content {
    float: left;
}

.drama2018-box#cast .cast_list .cast_list-img {
    margin-right: 4%;
    width: 31.93%;
}

.drama2018-box#cast .cast_list .cast_list-img img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.drama2018-box#cast .cast_list .cast_list-content {
    width: 64%;
}

.drama2018-box#cast .cast_list .cast_list-actor {
    border-bottom: 1px solid #fff;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
    padding-bottom: 3%;
}

.drama2018-box#cast .cast_list .cast_list-actor span.sub_name {
    font-size: 1.7rem;
}

.drama2018-box#cast .cast_list .cast_list-name {
    font-size: 1.9rem;
    font-weight: bold;
}

.drama2018-box#cast .cast_list_midashi {
    font-weight: bold;
    font-size: 2.8rem;
    margin-top: 3%;
    margin-bottom: -4%;
}

.drama2018-box#staff h3 {
    border-bottom: 1px solid #fff;
}

.drama2018-box#staff {
    text-align: center;
    background: url(../images/common/staff-bg-inner.png) no-repeat;
    background-position: 50% 86%;
}

.drama2018-box#staff h3 span {
    width: 18.63%;
    padding-top: 9.4%;
    background: url(../images/common/staff-h3.png) no-repeat;
    background-size: cover;
}

.drama2018-box#story h3 {
    border-bottom: 1px solid #fff;
}

.drama2018-box#story h3 span {
    width: 20.63%;
    padding-top: 9.5%;
    background: url(../images/common/story-h3.png) no-repeat;
    background-size: cover;
}

.drama2018-box#story .drama2018-box-inner {
    padding-left: 0;
    padding-right: 0;
}

.drama2018-box#story .drama2018-box-story {
    margin-top: 7.53%;
    padding-left: 1.5%;
    padding-right: 2.4%;
}

.drama2018-box#story figure img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.drama2018-box#story p:not(:first-of-type) {
    width: 50%;
}

.drama2018-box#story .txt-l {
    float: left;
}

.drama2018-box#story .txt-r {
    float: right;
}

.drama2018-box#story figure.fig-l {
    float: left;
    width: 38.1%;
    margin: .5em 6.3% 1em 4.51%;
}

.drama2018-box#story figure.fig-r {
    float: right;
    width: 38.1%;
    margin: .5em 5.4% 1em 5.41%;
}

.drama2018-box#story hr {
    display: block;
    clear: both;
    content: '';
    border: none;
    margin: 0;
}

.drama2018-box#story p b {
    font-size: 1.8rem;
    font-weight: bold;
}

.drama2018-box#story p .c-blue {
    color: #2f00fc;
}

.drama2018-box#story p .c-pink {
    color: #c20d6f;
}

.drama2018-box#chart h3 {
    border-bottom: 1px solid #fff;
}

.drama2018-box#chart h3 span {
    width: 20.93%;
    padding-top: 9.5%;
    background: url(../images/common/chart-h3.png) no-repeat;
    background-size: cover;
}

.drama2018-box#worklist h3 {
    border-bottom: 1px solid #000;
}

.drama2018-box#worklist h3 span {
    width: 33.63%;
    padding-top: 9.4%;
    background: url(../images/common/worklist-h3.png) no-repeat;
    background-size: cover;
}
.drama2018-box#worklist img{
  max-width: 100%;
  height: auto;
  vertical-align:bottom;
}

.i_copyright {
    text-align: center;
    background: url(../images/common/staff-bg.png);
    border-top: 2px solid #000;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 2px 0;
    color: #000;
}

.bnr_24h {
    background: #fcfcb3;
    border-top: 4px solid #000;
}

.bnr_24h_inner {
    padding: 26px 0 27px;
    width: 1024px;
    margin: 0 auto;
}

.bnr_24h a img {
    vertical-align: bottom;
}

.pageTop {
    display: block;
    width: 134px;
    height: 165px;
    text-indent: -9999px;
    background: url(../images/common/pagetop.png) no-repeat;
    background-size: cover;
    position: fixed;
    bottom: -180px;
    right: 220px;
    transition: bottom .25s ease-in-out;
}


/* ---------------------------------
 SP用
--------------------------------- */
@media screen and (max-width: 992px) {
    .drama2018-header_2nd a:hover,.drama2018-contents a:hover, .bnr_cast a:hover, .bnr_24h_inner a:hover {
        opacity: 1;
    }

    .drama2018-header {
        padding-top: 4.54%;
    }

    .drama2018-header_2nd {
        padding-top: 4.6875%;
    }

    .drama2018-header_2nd .drama2018-main-mainImg {
        width: 92.65625%;
        margin: 0 auto;
    }

    .drama2018-header_2nd .drama2018-header_2nd_txt {
        width: 89.375%;
        height: 0;
        padding-top: 5.7%;
        background: url(../images/common/header-2nd_txt_sp.png) no-repeat;
        background-size: cover;
        position: relative;
        top: 0;
        margin: 7.03% auto 3.4375%;
    }

    .drama2018-box {
        padding: 9.09% 3.125%;
    }

    .drama2018-box-inner {
        padding-left: 0;
        padding-right: 0;
    }

    .drama2018-box-inner p {
        font-size: 3.4375vw;
    }

    .drama2018-box-inner p span {
        font-size: 3.75vw;
    }

    .drama2018-box .staff-table {
        font-size: 3.4375vw;
    }

    .drama2018-box#intro {
        background: url(../images/common/intro-bg-inner-sp.png) no-repeat;
        background-size: cover;
        background-position: center;
        padding-bottom: 40.625%;
    }

    .drama2018-box#cast .cast-comment.kenton {
        background-size: 40%;
        background-position: 94% 60%;
    }

    .drama2018-box#cast .cast_list {
        padding-right: 0;
    }

    .drama2018-box#cast .cast_list .cast_list-actor {
        font-size: 4.0625vw;
    }

    .drama2018-box#cast .cast_list .cast_list-actor span.sub_name {
        font-size: 3vw;
    }

    .drama2018-box#cast .cast_list .cast_list-name {
        font-size: 3.125vw;
    }

    .drama2018-box#cast .cast_list-txt {
        padding-right: 7.51%;
    }

    .drama2018-box#cast .cast_list_midashi {
        font-size: 4.6vw;
    }

    .drama2018-box#staff {
        background-size: 90%;
    }

    .drama2018-box#story .drama2018-box-story {
        padding-left: 0;
        padding-right: 0;
    }

    .drama2018-box#story p:not(:first-of-type) {
        width: 100%;
    }

    .drama2018-box#story .txt-l {
        float: none;
    }

    .drama2018-box#story .txt-r {
        float: none;
    }

    .drama2018-box#story figure.fig-l {
        margin: .5em 5.6% 1em 0;
        width: 43.4%;
    }

    .drama2018-box#story figure.fig-r {
        width: 43.4%;
        margin: .5em 0 1em 4.51%;
    }

    .drama2018-box#story p b {
        font-size: 3.75vw;
    }

    .drama2018-box#chart .drama2018-box-inner img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
    }

    .drama2018-box#worklist img{
      max-width: 80%;
      height: auto;
      vertical-align:bottom;
    }

    .bnr_24h {
        padding: 4.0625% 4.0625% 4.21875%;
    }

    .bnr_24h a {
        display: block;
        width: 100%;
    }

    .bnr_24h a img {
        width: 100%;
        height: auto;
    }

    .pc,
  .pageTop {
        display: none;
    }
}

/* ---------------------------------
 tablet用(SP設定を上書き）
--------------------------------- */
@media screen and (min-width : 601px) {
}

/* ---------------------------------
 PC用
--------------------------------- */
@media screen and (min-width: 993px) {
    .sp {
        display: none;
    }
}



/* ---------------------------------
 右カラム設定
--------------------------------- */

/* 右カラム　タイトル */
.ntv-box-title {
    background: #222;
}

.ntv-box-title.title-base {
  /* background: #f00; */
}

/* ---------------------------------
 ティザーTOPICS一覧用
--------------------------------- */


/* ボタン */
#topics .drama-btn.btn-more {
  /* color: #ffffff; */
    display: block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    word-break: break-all;
    position: relative;
    background: transparent;
    border: 1px solid #000;
    padding: 15px;
    font-size: 1.4rem;
}

#topics .drama-btn.btn-more i {
    font-size: 1.5em;
    margin-right: 5px;
    vertical-align: middle;
}

@media screen and (max-width: 992px) {
    #topics .topics-btn {
        padding: 10px;
        margin: 0;
    }
}

/* リスト */
@media screen and (min-width: 993px) {
    #topics .topics-item {
        width: 49%;
    }

    #topics .topics-item:nth-of-type(n+3) {
        margin-top: 15px;
    }

    #topics .topics-item:nth-of-type(2n+1) {
        margin-left: 0;
    }

    #topics .topics-item:nth-of-type(2n) {
        margin-left: 2%;
    }
}