@charset "utf-8";

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

.hulu {
    padding: calc(100 / 750 * 100%) 0;
    background-color: #ffe822;
}

.hulu::after {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(235 / 750 * 100%);
    background: url(../images/common/line_tate_white.png) repeat left top;
    background-size: calc(20 / 750 * 100%) auto;
    position: absolute;
    left: 0;
    bottom: 0;
}

.hulu .inner {
    z-index: 2;
}

.hulu .sec_ttl {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 5.3rem;
    letter-spacing: -0.1em;
}

.hulu .sec_ttl::before, .hulu .sec_ttl::after {
    margin: 0;
    position: relative;
    top: 0.05em;
}

.hulu .sec_ttl em {
    display: inline-block;
    margin-right: -0.2em;
    font-size: 6rem;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.05em;
}

@media screen and (min-width: 768px) {
    .hulu {
        padding: calc(100 / 1100 * 100%) 0;
    }
    
    .hulu::after {
        padding-top: calc(200 / 1100 * 100%);
        background-size: calc(10 / 1100 * 100%) auto;
    }
    
    .hulu .sec_ttl {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin: 0 auto calc(50 / 1100 * 100%);
        font-size: 6rem;
    }
    
    .hulu .sec_ttl::before {
        margin: 0 calc(34 / 1100 * 100%) 0 0;
    }
    
    .hulu .sec_ttl::after {
        margin: 0 0 0 calc(34 / 1100 * 100%);
    }
    
    .hulu .sec_ttl em {
        margin-right: 0;
        font-size: 6.4rem;
    }
}

@media screen and (min-width: 1100px) {
    .hulu {
        padding: 100px 0;
    }
    
    .hulu::after {
        padding-top: 200px;
        background-size: 10px auto;
    }
}


/* =====================================================================
*    hulu_intro
* =================================================================== */
.hulu_intro {
}

.hulu_intro .inner {
    z-index: 2;
}

.hulu_intro_box {
    margin: 0 0 calc(90 / 750 * 100%);
}

.hulu_intro_box::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(257 / 750 * 100%);
    background: url(../images/hulu/bg_hulu_icon_sp.png) no-repeat left top;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(360 / 750 * 100%) 0 0;
}

.hulu_intro_thumb {
    width: calc(700 / 750 * 100%);
    margin: 0 auto calc(70 / 750 * 100%);
    background: url(../images/index/bg_nextstory_movie.png) no-repeat left top;
    background-size: 100% auto;
}

.hulu_intro_thumb_img {
    width: calc(550 / 700 * 100%);
    margin: 0 0 0 calc(68 / 700 * 100%);
    padding: calc(15 / 700 * 100%) 0 calc(24 / 700 * 100%);
}

.hulu_movie_wrap {
    width: 100%;
    padding-top: 56.25%;
    position: relative;
}

.bc-player-default_default {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.hulu_intro_txt {
}

.hulu_only {
    /* width: calc(592 / 750 * 100%); */
    width: calc(651 / 750 * 100%);
    margin: 0 auto calc(35 / 750 * 100%);
}

.hulu_date {
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

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

@media screen and (min-width: 768px) {
    .hulu_intro {
    }
    
    .hulu_intro_box {
        margin: 0 0 calc(25 / 1100 * 100%);
    }
    
    .hulu_intro_box::before {
        padding-top: calc(177 / 1100 * 100%);
        background: url(../images/hulu/bg_hulu_icon_pc.png) no-repeat left top;
        background-size: 100% auto;
        margin: calc(497 / 1100 * 100%) 0 0;
    }
    
    .hulu_intro_thumb {
        width: calc(950 / 1100 * 100%);
        margin: 0 auto calc(58 / 1100 * 100%);
    }
    
    .hulu_intro_thumb_img {
        width: calc(746 / 950 * 100%);
        padding: calc(21 / 950 * 100%) 0 calc(32 / 950 * 100%);
    }
    
    .hulu_only {
        /* width: calc(444 / 1100 * 100%); */
        width: calc(511 / 1100 * 100%);
        margin: 0 auto calc(30 / 1100 * 100%);
    }
    
    .hulu_date {
        font-size: 2.4rem;
    }
    
    .hulu_btn {
        width: calc(564 / 1100 * 100%);
    }
    
    .hulu_btn a:hover {
        opacity: 0.7;
    }
}


/* =====================================================================
*    hulu_story
* =================================================================== */
.hulu_story {
    padding: calc(100 / 750 * 100%) 0;
    background: url(../images/common/line_tate_yellow.png) repeat left top;
    background-size: calc(20 / 750 * 100%) auto;
}

.hulu_story_details {
}

.hulu_story_details .sec_subttl {
    margin: 0 0 calc(60 / 750 * 100%);
}

.hulu_story_details_box {
    width: calc(710 / 750 * 100%);
    margin: 0 auto calc(50 / 750 * 100%);
    padding: calc(70 / 750 * 100%) calc(70 / 750 * 100%) calc(80 / 750 * 100%);
    background-color: #fff;
    border-radius: 6vw;
    -webkit-box-shadow: 0 calc(10 / 750 * 100vw) 0 #ffe822;
    box-shadow: 0 calc(10 / 750 * 100vw) 0 #ffe822;
}

.hulu_story_details_txt {
    margin: 0 0 calc(30 / 570 * 100%);
    font-size: 2.6rem;
    line-height: 1.7;
}

.hulu_story_details_cast {
    padding: calc(30 / 570 * 100%) calc(50 / 570 * 100%);
    background-color: #ffe822;
}

.hulu_story_details_cast dt {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 3%;
}

.hulu_story_details_cast dd {
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1;
    margin: 0 0 3%;
}

.hulu_story_details_cast dd:last-child {
    margin: 0;
}

.hulu_story_photo {
    width: calc(600 / 750 * 100%);
    margin: 0 auto calc(50 / 750 * 100%);
}

.hulu_story_photo li {
    margin: 0 0 calc(30 / 600 * 100%);
    padding: calc(5 / 600 * 100%);
    background-color: #ffe822;
}

.hulu_story_photo li:last-child {
    margin: 0;
}

.hulu_story_details .hulu_btn {
    margin-bottom: calc(80 / 750 * 100%);
}

.hulu_comment .sec_subttl {
    margin: 0 0 calc(60 / 750 * 100%);
}

.hulu_comment_box {
    width: calc(690 / 750 * 100%);
    margin: 0 0 calc(30 / 750 * 100%) auto;
    padding: calc(120 / 750 * 100%) calc(75 / 750 * 100%) calc(50 / 750 * 100%) calc(80 / 750 * 100%);
    background-color: #fff;
}

.hulu_comment div:last-of-type {
    margin-bottom: 0;
}

.hulu_comment_ttl {
    width: 100%;
    color: #fff;
    font-size: 3.3rem;
    font-weight: 700;
    line-height: 1;
    background-color: #000;
    padding: 0.5em 0 0.6em calc(140 / 690 * 100%);
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(25 / 690 * 100%) 0 0 calc(-60 / 690 * 100%);
}

.hulu_comment_q {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #e5003b;
    font-size: 2.7rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 3%;
}

.hulu_comment_q::before {
    content: "Q：";
    display: inline-block;
    letter-spacing: -0.2em;
    margin: 0 1.2em 0 0;
}

.hulu_comment_a {
    font-size: 2.55rem;
    font-weight: 400;
    line-height: 1.7;
    margin: 0 0 6%;
}

@media screen and (min-width: 768px) {
    .hulu_story {
        padding: calc(100 / 1100 * 100%) 0;
        background-size: calc(10 / 1100 * 100%) auto;
    }
    
    .hulu_story .sec_subttl {
        margin: 0 0 calc(35 / 1100 * 100%);
        padding: 0 0 calc(28 / 1100 * 100%);
    }
    
    .hulu_story .sec_subttl::before, .hulu_story .sec_subttl::after {
        width: calc(30 / 1100 * 100%);
        padding-top: calc(26 / 1100 * 100%);
        margin: 0 calc(29 / 1100 * 100%) 0 0;
    }
    
    .hulu_story .sec_subttl::after {
        margin: 0 0 0 calc(29 / 1100 * 100%);
    }
    
    .hulu_story_details_box {
        width: calc(1000 / 1100 * 100%);
        margin: 0 auto calc(40 / 1100 * 100%);
        padding: calc(55 / 1100 * 100%) calc(100 / 1100 * 100%) calc(65 / 1100 * 100%);
        border-radius: calc(45 / 1100 * 100vw);
        -webkit-box-shadow: 0 calc(10 / 1100 * 100vw) 0 #ffe822;
        box-shadow: 0 calc(10 / 1100 * 100vw) 0 #ffe822;
    }
    
    .hulu_story_details_txt {
        margin: 0 0 calc(25 / 800 * 100%);
        font-size: 1.6rem;
    }
    
    .hulu_story_details_cast {
        width: calc(570 / 800 * 100%);
        margin: 0 auto;
        padding: calc(30 / 800 * 100%) calc(50 / 800 * 100%);
    }
    
    .hulu_story_details_cast dt {
        font-size: 1.4rem;
    }
    
    .hulu_story_details_cast dd {
        display: inline-block;
        margin: 0;
        font-size: 1.4rem;
    }
    
    .hulu_story_details_cast dd:first-of-type {
        margin-right: 0.5em;
    }
    
    .hulu_story_photo {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        width: calc(920 / 1100 * 100%);
        margin: 0 auto calc(30 / 1100 * 100%);
    }
    
    .hulu_story_photo li {
        width: calc(450 / 920 * 100%);
        margin: 0 calc(20 / 920 * 100%) calc(20 / 920 * 100%) 0;
        padding: calc(4 / 920 * 100%);
    }
    
    .hulu_story_photo li:nth-child(even),
    .hulu_story_photo li:last-child {
        margin-right: 0;
    }
    
    .hulu_story_details .hulu_btn {
        margin-bottom: calc(50 / 1100 * 100%);
    }
    
    .hulu_comment_box {
        width: calc(890 / 1100 * 100%);
        margin: 0 auto calc(30 / 1100 * 100%) calc(120 / 1100 * 100%);
        padding: calc(95 / 1100 * 100%) calc(60 / 1100 * 100%) calc(50 / 1100 * 100%);
        background-color: #fff;
    }
    
    .hulu_comment_ttl {
        width: calc(280 / 890 * 100%);
        margin: calc(20 / 890 * 100%) 0 0 calc(-30 / 890 * 100%);
        padding: 0.8em 0 0.85em calc(90 / 890 * 100%);
        font-size: 1.9rem;
    }
    
    .hulu_comment_q {
        font-size: 1.6rem;
        margin: 0 0 1.5%;
    }
    
    .hulu_comment_a {
        font-size: 1.6rem;
        margin: 0 0 4%;
    }
}

@media screen and (min-width: 1100px) {
    .hulu_story {
        padding: 100px 0;
        background-size: 10px auto;
    }
    
    .hulu_story_details_box {
        border-radius: 45px;
        -webkit-box-shadow: 0 10px 0 #ffe822;
        box-shadow: 0 10px 0 #ffe822;
    }
}


/* =====================================================================
*    what_hulu
* =================================================================== */
.what_hulu {
    padding: calc(20 / 750 * 100%) 0;
    background-color: #3CE032;
}

.what_hulu_box {
    width: calc(710 / 750 * 100%);
    margin: 0 auto;
    padding: calc(70 / 750 * 100%) calc(50 / 750 * 100%) calc(55 / 750 * 100%);
    border: calc(10 / 750 * 100vw) solid #ffe822;
}

.what_hulu_ttl {
    width: calc(259 / 590 * 100%);
    margin: 0 auto calc(30 / 590 * 100%);
}

.what_hulu_txt {
    color: #fff;
    font-size: 2.6rem;
    line-height: 1.7;
    margin: 0 auto calc(40 / 590 * 100%);
}

.what_hulu_box .hulu_btn {
    width: calc(564 / 590 * 100%);
}

@media screen and (min-width: 768px) {
    .what_hulu {
        padding: calc(30 / 1100 * 100%) 0;
    }
    
    .what_hulu_box {
        width: calc(920 / 1100 * 100%);
        padding: calc(30 / 1100 * 100%) 0;
        border: calc(5 / 1100 * 100vw) solid #ffe822;
    }
    
    .what_hulu_ttl {
        width: calc(207 / 910 * 100%);
        margin: 0 auto calc(30 / 910 * 100%);
    }
    
    .what_hulu_txt {
        font-size: 1.6rem;
        text-align: center;
        margin: 0 auto calc(20 / 910 * 100%);
    }
    
    .what_hulu_box .hulu_btn {
        width: calc(564 / 910 * 100%);
    }
}

@media screen and (min-width: 1100px) {
    .what_hulu {
        padding: 30px 0;
    }
    
    .what_hulu_box {
        border: 5px solid #ffe822;
    }
}

/* =====================================================================
*    19.05.23
* =================================================================== */
.hulu_story_catch_txt {
	height: 140px;
	background: url(../images/hulu/txt_hulu_catch_sp.png) no-repeat 50% 30%;
    background-size: 100% auto;
}

@media screen and (min-width: 1100px) {
    .hulu_story_catch_txt {
	    height: 79px;
		margin-bottom: 4em;
	    background: url(../images/hulu/txt_hulu_catch.png) no-repeat 50% 50%;
    }
}

@media screen and (min-width: 768px) {
    .hulu_story_catch_txt {
	    height: 79px;
		margin-bottom: 4em;
	    background: url(../images/hulu/txt_hulu_catch.png) no-repeat 50% 50%;
    }
}

.hulu_story_sns_txt {
	width: 55%;
	padding-top: 1em;
	margin: 0 auto 3em;
}

@media screen and (min-width: 1100px) {
    .hulu_story_sns_txt {
		width: 40%;
		margin: -2em auto 4.5em;
    }
}

@media screen and (min-width: 768px) {
    .hulu_story_sns_txt {
	    width: 40%;
		margin: -2em auto 4.5em;
    }
}