@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : hulu.css
Description :
===================================================================== */

section,
section * {
    position: relative;
}

section:not(#early-warning):not(.gDef-top-banner) {
    padding: 0 0 calc(100 / 750 * 100%);
}

section h2 {
    padding-top: calc(100 / 630 * 100%);
}

@media screen and (min-width: 768px) {
    section:not(#early-warning):not(.gDef-top-banner) {
        padding: 0 0 100px;
    }

    section h2 {
        padding-top: calc(100 / 1000 * 100%);
    }

}


/* ********************************************************************
        Huluオリジナルストーリー
******************************************************************** */
.hulu h2 {
    width: calc(595 / 630 * 100%);
    margin: 0 auto calc(30 / 630 * 100%);
}

.hulu_contents_ttl {
    width: calc(500 / 630 * 100%);
    margin: 0 auto calc(20 / 630 * 100%);
}

.hulu_movie_ttl {
    text-align: center;
    font-weight: bold;
    font-size: 2.5rem;
    margin-bottom: calc(40 / 630 * 100%);
}

.hulu_movie_photo {
    position: relative;
    background: url(../images/common/bg_story_movie.jpg) no-repeat center;
    background-size: contain;
    padding: calc(60 / 630 * 100%);
    width: calc(750 / 630 * 100%);
    margin-left: calc(-55 / 630 * 100%);
}

.hulu_movie_photo::before {
    content: '';
    position: absolute;
    background: url(../images/common/img_story_movie1.png) no-repeat center;
    background-size: 100%;
    top: 0;
    left: 0;
    margin: calc(-30 / 630 * 100%) 0 0 calc(-30 / 630 * 100%);
    width: calc(150 / 630 * 100%);
    height: calc(380 / 630 * 100%);
    z-index: 2;
}

.hulu_movie_photo::after {
    content: '';
    position: absolute;
    background: url(../images/common/img_story_movie2.png) no-repeat center;
    background-size: 100%;
    bottom: 0;
    right: 0;
    margin: 0 calc(-50 / 630 * 100%) calc(-120 / 630 * 100%) 0;
    width: calc(220 / 630 * 100%);
    height: calc(380 / 630 * 100%);
    z-index: 2;
}

.hulu_catch {
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    padding-bottom: calc(80 / 630 * 100%);
    margin-bottom: calc(80 / 630 * 100%);
    border-bottom: 3px dotted #9d9282;
}

.hulu_catch * {
    font-weight: bold;
}

.hulu_catch strong {
    font-size: 2.6rem;
}

.hulu_catch span {
    font-size: 2.1rem;
}

.hulu_trial h5 {
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 2;
    margin-bottom: calc(60 / 630 * 100%);
}

.hulu_trial h5 span {
    font-size: 2.1rem;
    font-weight: bold;
}

.hulu_trial h5::before,
.hulu_trial h5::after {
    content: '';
    position: absolute;
    background: url(../images/common/img_ttl_pink.png) no-repeat center;
    background-size: contain;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: calc(35 / 630 * 100%);
    height: auto;
    padding-top: calc(90 / 630 * 100%);
}

.hulu_trial h5::after {
    left: auto;
    right: 0;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

.hulu_trial ul {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.hulu_trial li {
    width: calc(300 / 630 * 100%);
}


@media screen and (min-width: 768px) {
    .hulu h2 {
        width: calc(446 / 1000 * 100%);
        margin: 0 auto calc(20 / 1000 * 100%);
    }

    .hulu_contents_ttl {
        width: calc(373 / 1000 * 100%);
        margin: 0 auto calc(20 / 1000 * 100%);
    }

    .hulu_movie_ttl {
        font-size: 3.4rem;
        margin-bottom: calc(40 / 1000 * 100%);
    }

    .hulu_movie_photo {
        padding: calc(60 / 1000 * 100%) calc(100 / 1000 * 100%);
        width: 100%;
        margin: 0 auto;
    }

    .hulu_movie_photo::before {
        margin: calc(-10 / 1000 * 100%) 0 0 calc(-10 / 1000 * 100%);
        width: calc(175 / 1000 * 100%);
        height: calc(450 / 1000 * 100%);
        z-index: 2;
    }

    .hulu_movie_photo::after {
        margin: 0 calc(20 / 1000 * 100%) calc(-60 / 1000 * 100%) 0;
        width: calc(240 / 1000 * 100%);
        height: calc(430 / 1000 * 100%);
    }

    .hulu_movie_photo a:hover {
        opacity: 1;
    }

    .hulu_catch {
        font-size: 2rem;
        padding-bottom: calc(50 / 1000 * 100%);
        margin-bottom: calc(50 / 1000 * 100%);
    }

    .hulu_catch strong {
        font-size: 3.8rem;
    }

    .hulu_catch span {
        font-size: 3.4rem;
    }

    .hulu_trial {
        width: calc(650 / 1000 * 100%);
        margin: auto;
    }

    .hulu_trial h5 {
        font-size: 3.2rem;
        margin-bottom: calc(60 / 1000 * 100%);
    }

    .hulu_trial h5 span {
        font-size: 4.2rem;
    }

    .hulu_trial h5::before,
    .hulu_trial h5::after {
        content: '';
        position: absolute;
        background: url(../images/common/img_ttl_pink.png) no-repeat center;
        background-size: contain;
        left: 0;
        width: calc(35 / 650 * 100%);
        height: auto;
        padding-top: calc(50 / 650 * 100%);
    }

    .hulu_trial h5::after {
        left: auto;
        right: 0;
        -webkit-transform: scale(-1, 1);
        transform: scale(-1, 1);
    }

    .hulu_trial li {
        width: calc(300 / 650 * 100%);
    }

    .hulu_trial li a:hover {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
}

/* ********************************************************************
        イントロ
******************************************************************** */
.intro {
    background: #dcf6f5;
    padding: 0 0 calc(150 / 750 * 100%);
}

.intro::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: calc(120 / 750 * 100%);
    background: url(../images/common/bg_stripe_blue.jpg) repeat center;
}

.intro h2 {
    width: calc(221 / 630 * 100%);
}

.intro p {
    line-height: 1.8;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .intro {
        padding: 0 0 120px;
    }

    .intro::before {
        padding-top: 70px;
    }

    .intro h2 {
        width: calc(164 / 1000 * 100%);
        margin: 0 auto calc(60 / 1000 * 100%);
    }

}


/* ********************************************************************
        配信スケジュール
******************************************************************** */
.schedule h2 {
    margin: 0 auto calc(100 / 630 * 100%);
}

.schedule_box:not(:last-child) {
    margin-bottom: calc(60 / 630 * 100%);
}

.schedule_date,
.schedule_txt {
    text-align: center;
    font-weight: bold;
    font-size: 2.1rem;
}

.schedule_date {
    margin-bottom: calc(30 / 630 * 100%);
}

.schedule_txt {
    margin-bottom: calc(40 / 630 * 100%);
    padding-bottom: calc(25 / 630 * 100%);
    border-bottom: 3px dotted #9d9282;
}

.schedule_box dl {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap-reverse;
    flex-flow: row wrap-reverse;
}

.schedule_box dt {
    margin: calc(30 / 630 * 100%) 0;
}

.schedule_box dd {
    line-height: 1.7;
}

.schedule_list_photo {
    margin: 0 auto calc(40 / 630 * 100%);
}

@media screen and (min-width: 768px) {
    .schedule h2 {
        width: calc(481 / 1000 * 100%);
        margin: 0 auto calc(80 / 1000 * 100%);
    }

    .schedule_box:not(:last-child) {
        margin-bottom: calc(60 / 1000 * 100%);
    }

    .schedule_date,
    .schedule_txt {
        font-size: 3rem;
    }

    .schedule_date {
        margin-bottom: calc(30 / 1000 * 100%);
    }

    .schedule_txt {
        margin-bottom: calc(40 / 1000 * 100%);
        padding-bottom: calc(25 / 1000 * 100%);
    }

    .schedule_box dl {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-bottom: calc(40 / 1000 * 100%);
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-flow: row-reverse nowrap;
        flex-flow: row-reverse nowrap;
    }

    .schedule_box dt,
    .schedule_box dd {
        width: calc(470 / 1000 * 100%);
        margin: 0;
    }

    .schedule_box dl:nth-child(even) {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
    }

    .schedule_list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
    }

    .schedule_list_photo {
        width: calc(475 / 1000 * 100%);
        margin: 0 0 calc(50 / 1000 * 100%);
    }

}

/* ********************************************************************
        キャスト
******************************************************************** */
.cast {
    background: #dcf6f5;
}

.cast h2 {
    width: calc(174 / 630 * 100%);
}

.cast .cast_box li {
    margin-bottom: calc(10 / 630 * 100%);
}

.cast .cast_box li.line {
    padding-bottom: calc(40 / 630 * 100%);
}

.cast .cast_box dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.cast .cast_box dt {
    width: 50%;
    padding-right: 7%;
    text-align: right;
    color: #47ccc5;
}

.cast .cast_box dt::before {
    content: ':';
    position: absolute;
    width: 3px;
    height: calc(35 / 630 * 100vw);
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    color: #beb09f;
}

.cast .cast_box dd {
    width: 50%;
    padding-left: 6%;
}

@media screen and (min-width: 768px) {
    .cast h2 {
        width: calc(132 / 1000 * 100%);
    }

    .cast .cast_box li {
        margin-bottom: calc(6 / 1000 * 100%);
        font-size: 2.1rem;
    }

    .cast .cast_box li.line {
        padding-bottom: calc(35 / 1000 * 100%);
    }

    .cast .cast_box dt {
        padding-right: 5%;
        text-align: right;
        color: #47ccc5;
    }

    .cast .cast_box dt::before {
        width: 4px;
        height: 40px;
    }

    .cast .cast_box dd {
        padding-left: 5%;
    }
}


/* ********************************************************************
        コメント
******************************************************************** */
.comment {
    background: #f2efeb;
}

.comment h2 {
    width: calc(191 / 630 * 100%);
}

.comment_box:not(:last-child) {
    margin-bottom: calc(60 / 630 * 100%);
}

.comment_box dt {
    text-align: center;
    font-weight: bold;
    font-size: 1.6rem;
    margin-bottom: calc(30 / 630 * 100%);
    padding-bottom: calc(30 / 630 * 100%);
    border-bottom: 3px dotted #9d9282;
}

.comment_box dd {
    line-height: 1.7;
    margin-bottom: calc(40 / 630 * 100%);
}

.comment_box dd strong {
    font-weight: bold;
    display: block;
    margin-bottom: calc(10 / 630 * 100%);
    padding-left: 1.3em;
}

.comment_box dd strong::before {
    content: '●';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 1em;
}

@media screen and (min-width: 768px) {
    .comment h2 {
        width: calc(141 / 1000 * 100%);
    }

    .comment_box:not(:last-child) {
        margin-bottom: calc(60 / 1000 * 100%);
    }

    .comment_box dt {
        font-size: 2.4rem;
        margin-bottom: calc(40 / 1000 * 100%);
        padding-bottom: calc(20 / 1000 * 100%);
    }

    .comment_box dd {
        margin-bottom: calc(40 / 1000 * 100%);
    }

    .comment_box dd strong {
        margin-bottom: calc(10 / 1000 * 100%);
    }

}


/* ********************************************************************
        Huluとは
******************************************************************** */
.about {
    background: #c1f2f0;
}

.about h2 {
    width: calc(221 / 630 * 100%);
}

.about h2 + p {
    margin-bottom: calc(50 / 630 * 100%);
}

@media screen and (min-width: 768px) {
    .about h2 {
        width: calc(163 / 1000 * 100%);
    }

    .about h2 + p {
        text-align: center;
        margin-bottom: calc(50 / 1000 * 100%);
    }

}