@charset "utf-8";

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

/* =====================================================================
*    hulu_movie
* =================================================================== */
.movie {
    background: url(../images/common/bg_green.jpg) repeat center top;
    background-size: calc(200 / 750 * 100%) auto;
}

.movie::after {
    display: none;
}

.movie .sec_ttl::before {
    background-image: repeating-linear-gradient(90deg, #3CE032, #3CE032 calc(5 / 750 * 100vw), transparent calc(5 / 750 * 100vw), transparent calc(10 / 750 * 100vw));
}

.movie .sec_contents {
    padding: 0;
}

.movie .sec_contents::before {
    display: none;
}

.hulu_logo {
    width: calc(450 / 630 * 100%);
    margin: calc(80 / 630 * 100%) auto 0;
}

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

.movie_box::after,
.hulu_link::after {
    content: "";
    display: block;
    width: calc(750 / 630 * 100%);
    padding-top: calc(100 / 630 * 100%);
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 0 0 calc(-60 / 630 * 100%);
}

.movie_box a {
    z-index: 2;
}

.hulu_link {
    padding: calc(40 / 630 * 100%) 0 0;
}

.hulu_link::after {
    padding-top: 0;
    height: 100%;
}

.hulu_link_txt {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-align: center;
    z-index: 2;
}

.hulu_link_txt strong {
    color: #3CE032;
    font-size: 150%;
    font-weight: 700;
}

.hulu_link_txt::after {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(10 / 630 * 100%);
    margin: calc(40 / 630 * 100%) 0 0;
    background-image: repeating-linear-gradient(90deg, #3CE032 0px, #3CE032 calc(4 / 750 * 100vw), transparent calc(4 / 750 * 100vw), transparent calc(10 / 750 * 100vw));
    -webkit-transform: skewX(-27deg);
    transform: skewX(-27deg);
}

.hulu_link_txt2 {
    color: #f79646;
    z-index: 2;
    text-align: center;
    font-size: 3rem;
    margin: calc(50 / 630 * 100%) 0 calc(20 / 630 * 100%);
}

.hulu_link_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 0 calc(100 / 630 * 100%);
    z-index: 2;
}

.hulu_link_list li {
    width: calc(300 / 630 * 100%);
    margin: 0 calc(30 / 630 * 100%) 0 0;
}

.hulu_link_list li:last-child {
    margin-right: 0;
}

.hulu_link_list li a {
    -webkit-box-shadow: 0 calc(15 / 750 * 100vw) calc(15 / 750 * 100vw) rgba(0, 0, 0, 0.1);
    box-shadow: 0 calc(15 / 750 * 100vw) calc(15 / 750 * 100vw) rgba(0, 0, 0, 0.1);
}

@media screen and (min-width: 768px) {
    .movie {
        background-size: calc(200 / 1280 * 100%) auto;
    }

    .movie .sec_ttl::before {
        background-image: repeating-linear-gradient(90deg, #3CE032, #3CE032 calc(5 / 95 * 100%), transparent calc(5 / 95 * 100%), transparent calc(10 / 95 * 100%));
    }

    .hulu_logo {
        width: calc(450 / 980 * 100%);
        margin: calc(10 / 980 * 100%) auto 0;
    }

    .movie_box {
        width: calc(780 / 980 * 100%);
        margin: calc(30 / 980 * 100%) auto 0;
    }

    .movie_box::after {
        width: calc(980 / 780 * 100%);
        padding-top: calc(60 / 780 * 100%);
        margin: 0 0 0 calc(-100 / 780 * 100%);
    }

    .hulu_link {
        padding: calc(20 / 980 * 100%) 0 0;
    }

    .hulu_link::after {
        width: 100%;
        margin: 0;
    }

    .hulu_link_txt {
        width: calc(650 / 980 * 100%);
        margin: 0 auto;
    }

    .hulu_link_txt::after {
        padding-top: calc(10 / 650 * 100%);
        margin: calc(20 / 650 * 100%) 0 0;
        background-image: repeating-linear-gradient(90deg, transparent 0px, #3CE032 calc(1 / 650 * 100%), #3CE032 calc(2 / 650 * 100%), transparent calc(3 / 650 * 100%), transparent calc(7 / 650 * 100%));
    }

    .hulu_link_txt2 {
        font-size: 2rem;
        font-weight: bold;
        margin: calc(30 / 980 * 100%) 0 0;
    }

    .hulu_link_list {
        width: calc(650 / 980 * 100%);
        margin: calc(20 / 980 * 100%) auto 0;
        padding: 0 0 calc(100 / 980 * 100%);
    }

    .hulu_link_list li {
        width: calc(300 / 650 * 100%);
        margin: 0 calc(50 / 650 * 100%) 0 0;
    }

    .hulu_link_list li a {
        -webkit-box-shadow: 0 calc(15 / 1280 * 100vw) calc(15 / 1280 * 100vw) rgba(0, 0, 0, 0.1);
        box-shadow: 0 calc(15 / 1280 * 100vw) calc(15 / 1280 * 100vw) rgba(0, 0, 0, 0.1);
    }

    .hulu_link_list li a:hover {
        opacity: 0.7;
    }
}

@media screen and (min-width: 1280px) {
    .movie {
        background-size: 200px auto;
    }

    .hulu_link_list li a {
        -webkit-box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1);
        box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1);
    }
}


/* =====================================================================
*    hulu_intro
* =================================================================== */


@media screen and (min-width: 768px) {}

@media screen and (min-width: 1280px) {}


/* =====================================================================
*    hulu_story
* =================================================================== */
.story {
    padding: 0;
    background: none;
}

.story_date_txt {
    margin: calc(105 / 630 * 100%) 0 calc(45 / 630 * 100%);
}

.story_date_tab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: calc(80 / 630 * 100%) 0 0;
}

.story_date_tab li {
    width: calc(150 / 630 * 100%);
}

.story_date_tab li.nolink::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.story_date_tab li.nolink span {
    background-color: #959595;
    color: #ccc;
}

.story_date_tab li span {
    display: block;
    background-color: #000;
    padding: 0.92em 0;
    color: #ffeb0d;
    font-size: 2.4rem;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-align: center;
    cursor: pointer;
}

.story_date_panel::before {
    content: "";
    display: block;
    width: calc(750 / 630 * 100%);
    height: 100%;
    margin: calc(256 / 630 * 100%) 0 0 calc(-60 / 630 * 100%);
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}

.story_date_panel > li {
    display: none;
}

.story_date_panel li.is-show {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
}

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

.story_date_panel .story_box_photo {
    -webkit-order: 2;
    -moz-order: 2;
    -ms-order: 2;
    -o-order: 2;
    order: 2;
    padding-bottom: calc(100 / 630 * 100%);
}

.story_date_panel .story_box_photo::before {
    display: none;
}

.story_box_photo figure {
    margin: 0 0 calc(20 / 630 * 100%);
}

.story_box_photo figure::before {
    content: "";
    display: block;
    width: calc(40 / 630 * 100%);
    padding-top: calc(200 / 630 * 100%);
    background-image: repeating-linear-gradient(0deg, transparent, transparent calc(6 / 750 * 100vw), rgba(240, 52, 84, 1) calc(7 / 750 * 100vw), rgba(240, 52, 84, 1) calc(10 / 750 * 100vw), transparent calc(11 / 750 * 100vw));
    -webkit-transform: skewY(-10deg);
    transform: skewY(-10deg);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    margin: calc(127 / 630 * 100%) calc(-20 / 630 * 100%) 0 0;
}

.story_box_photo figure:nth-child(even)::before {
    display: none;
}

.story_box_photo figure:nth-child(4n-3)::before {
    right: auto;
    left: 0;
    margin: calc(127 / 630 * 100%) 0 0 calc(-20 / 630 * 100%);
}

.story_box_photo figure img {
    z-index: 2;
}

.story_txt {
    margin: calc(-100 / 630 * 100%) 0 0;
    padding: calc(160 / 630 * 100%) 0 calc(40 / 630 * 100%);
}

.story_txt dt {
    margin: 0 0 1.2em;
    padding: 0 0 0.3em;
    border-bottom: 1px solid #000;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.714;
}

.story_txt dt span {
    display: inline-block;
    margin: 0 0 0 0.3em;
    color: #f03454;
    font-weight: 700;
}

.story_txt dd {
    font-size: 2.8rem;
    line-height: 1.714;
}

.story_txt dd p:not(:last-child) {
    margin: 0 0 1.8em;
}

@media screen and (min-width: 768px) {
    .story_date_txt {
        width: calc(630 / 980 * 100%);
        margin: calc(35 / 980 * 100%) auto calc(25 / 980 * 100%);
    }

    .story_date_tab {
        width: calc(780 / 980 * 100%);
        margin: calc(20 / 980 * 100%) auto calc(10 / 980 * 100%);
    }

    .story_date_tab li {
        width: calc(190 / 780 * 100%);
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .story_date_tab li span {
        padding: 1.12em 0;
        font-size: 1.6rem;
    }

    .story_date_tab li:not(.nolink):hover span {
        background-color: #f03454;
        color: #ffeb0d;
    }

    .story_date_panel {
        width: calc(780 / 980 * 100%);
        margin: 0 auto;
    }

    .story_date_panel::before {
        width: calc(980 / 780 * 100%);
        margin: calc(340 / 780 * 100%) 0 0 calc(-100 / 780 * 100%);
    }

    .story_date_panel .story_box_photo {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 100%;
        margin: 0 auto;
        -webkit-order: 1;
        -moz-order: 1;
        -ms-order: 1;
        -o-order: 1;
        order: 1;
        padding-bottom: 0;
    }

    .story_date_panel .story_box_photo::before {
        width: calc(40 / 780 * 100%);
        padding-top: calc(200 / 780 * 100%);
        background-image: repeating-linear-gradient(0deg, transparent, transparent calc(6 / 200 * 100%), rgba(240, 52, 84, 1) calc(7 / 200 * 100%), rgba(240, 52, 84, 1) calc(10 / 200 * 100%), transparent calc(11 / 200 * 100%));
        margin: calc(212 / 780 * 100%) calc(-20 / 780 * 100%) 0 0;
    }

    .story_date_panel .story_box_photo figure {
        width: calc(380 / 780 * 100%);
        margin: 0 calc(19 / 780 * 100%) calc(20 / 780 * 100%) 0;
    }

    .story_date_panel .story_box_photo figure:nth-child(even),
    .story_date_panel .story_box_photo figure:last-child {
        margin-right: 0;
    }

    .story_box_photo figure::before {
        width: calc(40 / 480 * 100%);
        padding-top: calc(200 / 480 * 100%);
        background-image: repeating-linear-gradient(0deg, transparent, transparent calc(6 / 200 * 100%), rgba(240, 52, 84, 1) calc(7 / 200 * 100%), rgba(240, 52, 84, 1) calc(10 / 200 * 100%), transparent calc(11 / 200 * 100%));
        margin: calc(54 / 480 * 100%) calc(-20 / 480 * 100%) 0 0;
    }

    .story_box_photo figure:nth-child(3)::before {
        display: none;
    }

    .story_box_photo figure:nth-child(4)::before {
        display: block;
    }

    .story_txt {
        -webkit-order: 2;
        -moz-order: 2;
        -ms-order: 2;
        -o-order: 2;
        order: ;
        margin: calc(-100 / 780 * 100%) 0 0;
        padding: calc(140 / 780 * 100%) 0 calc(90 / 780 * 100%);
    }

    .story_txt dt {
        font-size: 1.6rem;
    }

    .story_txt dd {
        font-size: 1.6rem;
    }
}

@media screen and (min-width: 1280px) {}


/* =====================================================================
*    hulu_chart
* =================================================================== */
.chart {
    background-color: #fff;
}

.chart.bg_right::before {
    display: none;
}

.chart .sec_ttl {
    z-index: 2;
}

.chart .sec_contents {
    width: 100%;
}

.chart_photo {
    margin: calc(-85 / 750 * 100%) 0 0;
    padding: 0 0 calc(130 / 750 * 100%);
}

.chart_photo::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(180 / 750 * 100%) 0 0;
}

@media screen and (min-width: 768px) {
    .chart {
        background-color: transparent;
    }

    .chart.bg_right::before {
        display: block;
    }

    .chart_photo {
        margin: calc(50 / 980 * 100%) 0 0;
        padding: 0 0 calc(80 / 980 * 100%);
    }

    .chart_photo::before {
        height: 50%;
        top: auto;
        bottom: 0;
        margin: 0;
    }

    /*
    .chart_photo picture::before {
        content: "";
        display: block;
        width: 100%;
        padding-top: calc(122 / 980 * 100%);
        background: url(../images/hulu/img_hulu_chart_pc2.png) no-repeat left top;
        background-size: 100% auto;
    }
*/
}

@media screen and (min-width: 1280px) {}


/* =====================================================================
*    cast
* =================================================================== */
.cast {
    padding: calc(150 / 750 * 100%) 0;
    background: url(../images/common/bg_gray.jpg) repeat center top;
    background-size: calc(200 / 750 * 100%) auto;
}

.cast_ttl1 {
    width: calc(431 / 750 * 100%);
    margin: 0 auto;
}

.cast_box {
    margin: calc(100 / 630 * 100%) 0 0;
}

.cast_ttl2 {
    width: calc(109 / 630 * 100%);
    margin: 0 auto;
}

.cast_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;
    margin: calc(50 / 630 * 100%) 0 0;
    font-size: 2.8rem;
    line-height: 1.714;
}

.cast_list dt {
    width: calc(270 / 630 * 100%);
    text-align: right;
}

.cast_list dt::after {
    content: ":";
    display: inline-block;
    color: #f03454;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 calc(-45 / 270 * 100%) 0 0;
}

.cast_list dd {
    width: calc(270 / 630 * 100%);
}

.cast_list dd small {
    font-size: 71%;
}

.cast_list_margin {
    margin-top: 2.5em;
}

.staff_list {
    margin: calc(50 / 630 * 100%) 0 0;
}

.staff_list dl {
    margin: 0 0 calc(40 / 630 * 100%);
    line-height: 1.714;
    text-align: center;
}

.staff_list dl:last-child {
    margin-bottom: 0;
}

.staff_list dt {
    font-size: 2.4rem;
}

.staff_list dt::after {
    content: "";
    display: block;
    width: calc(20 / 630 * 100%);
    margin: 0.5em auto;
    padding-top: calc(3 / 630 * 100%);
    background-color: #f03454;
}

.staff_list_txt1 {
    font-size: 2.8rem;
}

.staff_list_txt1 small {
    font-size: 71%;
}

.staff_list_txt2 {
    margin: calc(40 / 630 * 100%) 0 0;
    font-size: 2rem;
    line-height: 1.5;
    text-align: left;
}

@media screen and (min-width: 768px) {
    .cast {
        padding: calc(100 / 1280 * 100%) 0;
        background-size: calc(200 / 1280 * 100%) auto;
    }

    .cast_ttl1 {
        width: calc(324 / 980 * 100%);
    }

    .cast_box {
        margin: calc(60 / 980 * 100%) 0 0;
    }

    .cast_ttl2 {
        width: calc(68 / 980 * 100%);
    }

    .cast_list {
        margin: calc(35 / 980 * 100%) 0 0;
        font-size: 2.1rem;
    }

    .cast_list dt {
        width: calc(455 / 980 * 100%);
    }

    .cast_list_margin {
        margin-top: 3em;
    }

    .cast_list dt::after {
        margin: 0 calc(-40 / 455 * 100%) 0 0;
    }

    .cast_list dd {
        width: calc(455 / 980 * 100%);
    }

    .staff_box {
        margin: calc(80 / 980 * 100%) 0 0;
    }

    .staff_list {
        margin: calc(35 / 980 * 100%) 0 0;
    }

    .staff_list dl {
        margin: 0 0 calc(25 / 980 * 100%);
    }

    .staff_list dt {
        font-size: 1.8rem;
    }

    .staff_list dt::after {
        width: calc(15 / 980 * 100%);
        padding-top: calc(2 / 980 * 100%);
    }

    .staff_list_txt1 {
        font-size: 2.1rem;
    }

    .staff_list_txt2 {
        width: calc(480 / 980 * 100%);
        margin: calc(25 / 980 * 100%) auto 0;
        font-size: 1.5rem;
    }
}

@media screen and (min-width: 1280px) {
    .cast {
        padding: 100px 0;
        background-size: 200px auto;
    }
}


/* =====================================================================
*    hulu_what
* =================================================================== */
.what {
    padding: calc(150 / 750 * 100%) 0;
    background: url(../images/common/bg_green.jpg) repeat center top;
    background-size: calc(200 / 750 * 100%) auto;
}

.what_ttl {
    width: calc(206 / 750 * 100%);
    margin: 0 auto;
}

.what_txt {
    margin: calc(90 / 630 * 100%) 0 0;
    font-size: 2.8rem;
    line-height: 1.714;
}

.what .hulu_link_list {
    /*    margin: calc(65 / 630 * 100%) 0 0;*/
    padding: 0;
}

@media screen and (min-width: 768px) {
    .what {
        padding: calc(100 / 1280 * 100%) 0;
        background-size: calc(200 / 1280 * 100%) auto;
    }

    .what_ttl {
        width: calc(155 / 980 * 100%);
    }

    .what_txt {
        width: calc(780 / 980 * 100%);
        margin: calc(40 / 980 * 100%) auto 0;
        font-size: 1.6rem;
        line-height: 1.625;
    }

    .what .hulu_link_txt2 {
        color: #fff;
        font-weight: normal;
    }

    .what .hulu_link_list {
        margin: calc(20 / 980 * 100%) auto 0;
    }
}

@media screen and (min-width: 1280px) {
    .what {
        padding: 100px 0;
        background-size: 200px auto;
    }
}