@charset "utf-8";

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

/* =====================================================================
*    hulu_movie
* =================================================================== */
.hulu_movie {
	padding: calc(140 / 750 * 100%) 0 calc(80 / 750 * 100%);
}

.hulu_movie h2 {
	margin: 0 0 calc(45 / 650 * 100%);
}

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

.hulu_movie_box {
    margin-top: calc(30 / 650 * 100%);
}

.hulu_movie_photo {
	background: url(../images/top/bg_nextstory_movie_sp.png) no-repeat center/contain;
	width: calc(666 / 650 * 100%);
	padding: calc(25 / 650 * 100%);
	margin: 0 0 calc(70 / 650 * 100%) calc(-8 / 650 * 100%);
}

.hulu_movie_photo::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(../images/deco/bg_deco4.png) no-repeat center/contain;
	width: calc(324 / 650 * 100%);
	padding-top: calc(113 / 650 * 100%);
	margin: 0 0 calc(-77 / 650 * 100%) calc(-170 / 650 * 100%);
}

.hulu_movie_photo::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	background: url(../images/deco/bg_deco3.png) no-repeat center/contain;
	width: calc(265 / 650 * 100%);
	padding-top: calc(143 / 650 * 100%);
	margin: 0 calc(-150 / 650 * 100%) calc(-83 / 650 * 100%) 0;
	z-index: -1;
}

.hulu_movie_photo a img {
    -o-object-fit: cover;
    object-fit: cover;
    font-family: 'object-fit: cover;';
    -o-object-position: center;
    object-position: center;
    height: calc(330 / 750 * 100vw);
}

.hulu_movie_btn::before {
	content: "";
	display: block;
	width: calc(100 / 750 * 100vw);
	height: calc(100 / 750 * 100vw);
	position: absolute;
	background-color: #982411;
	border-radius: 50%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 1;
}

.hulu_movie_btn::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: .4em;
	right: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: .7em 0 .7em 1em;
	border-color: transparent transparent transparent #fff;
	border-radius: .3em;
	z-index: 1;
}

.hulu_movie_txt p {
	margin-bottom: 0.3em;
	text-align: center;
	line-height: 1.5;
	font-size: 2.8rem;
}

.hulu_movie_txt strong {
	display: block;
	font-size: 3.6rem;
	font-weight: 900;
}

.red {
	color: #9b200c;
}

@media screen and (min-width: 768px) {
    .hulu_movie {
        padding: calc(120 / 1200 * 100%) 0 calc(80 / 1200 * 100%);
    }

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

	.hulu_movie_subttl {
		width: calc(630 / 1000 * 100%);
	}

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

	.hulu_movie_photo {
		width: 100%;
        background: url(../images/top/bg_nextstory_movie_pc.png) no-repeat center/contain;
        margin: 0 0 calc(60 / 800 * 100%);
        padding: calc(20 / 800 * 100%);
	}

	.hulu_movie_photo::before {
		width: calc(185 / 800 * 100%);
        padding-top: calc(65 / 800 * 100%);
        margin: 0 0 calc(-35 / 800 * 100%) calc(-90 / 800 * 100%);
	}

	.hulu_movie_photo::after {
		margin: 0 calc(-94 / 800 * 100%) calc(-41 / 800 * 100%) 0;
		width: calc(151 / 800 * 100%);
		padding-top: calc(81 / 800 * 100%);
	}
    
    .hulu_movie_photo a img {
        height: calc(417 / 1200 * 100vw);
    }

	.hulu_movie_btn::before {
		width: calc(100 / 1200 * 100vw);
		height: calc(100 / 1200 * 100vw);
	}

	.hulu_movie_btn::after {
		border-width: 1.2em 0 1.2em 1.8em;
	}

	.hulu_movie_btn::before,
	.hulu_movie_btn::after {
		-webkit-transition: .2s;
		transition: .2s;
	}

	.hulu_movie_btn:hover::before,
	.hulu_movie_btn:hover::after {
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
		-webkit-transition: .2s;
		transition: .2s;
	}

	.hulu_movie_txt p {
        margin-bottom: 0.9em;
		font-size: 1.6rem;
	}

	.hulu_movie_txt strong {
		font-size: 2.8rem;
	}
}

@media screen and (min-width: 1200px) {
	.hulu_movie {
		padding: 120px 0 80px;
	}
    
    .hulu_movie_photo a img {
        height: 417px;
    }

	.hulu_movie_btn::before {
		width: 100px;
        height: 100px;
	}

}

/* =====================================================================
*    trial 
* =================================================================== */
.hulu_trial {
	background-color: #9b200c;
}

.hulu_trial .inner {
	padding: calc(60 / 750 * 100%) 0 calc(100 / 750 * 100%);
}

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

.hulu_trial_link {
    width: calc(630 / 650 * 100%);
	padding: calc(55 / 650 * 100%) 0 0;
	margin: 0 auto;
}

.hulu_link_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

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

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

@media screen and (min-width: 768px) {
	.hulu_trial .inner {
		padding: calc(45 / 1200 * 100%) calc(100 / 1200 * 100%) calc(65 / 1200 * 100%);
	}

	.hulu_link_ttl {
		width: calc(317 / 1000 * 100%);
	}

	.hulu_trial_link {
		width: calc(800 / 1000 * 100%);
		padding: calc(30 / 1000 * 100%) 0 0;
	}

	.hulu_link_list {
		margin: 0 auto;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

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

	.hulu_link_list li a {
		font-size: 2rem;
		top: 0;
		-webkit-box-shadow: 0 calc(8 / 1200 * 100vw) calc(17 / 1200 * 100vw) rgba(0, 0, 0, 0.3);
		box-shadow: 0 calc(8 / 1200 * 100vw) calc(17 / 1200 * 100vw) rgba(0, 0, 0, 0.3);
		-webkit-box-shadow: 0 0.67vw 1.42vw rgba(0, 0, 0, 0.3);
		box-shadow: 0 0.67vw 1.42vw rgba(0, 0, 0, 0.3);
	}

	.hulu_link_list li a:hover {
		top: 0.5em;
		-webkit-box-shadow: 0 0 calc(12 / 1200 * 100vw) rgba(0, 0, 0, 0.3);
		box-shadow: 0 0 calc(12 / 1200 * 100vw) rgba(0, 0, 0, 0.3);
		-webkit-box-shadow: 0 0 1vw rgba(0, 0, 0, 0.3);
		box-shadow: 0 0 1vw rgba(0, 0, 0, 0.3);
	}
}

@media screen and (min-width: 1200px) {
	.hulu_trial .inner {
		padding: 45px 100px 65px;
	}
    
    .hulu_link_list li a {
        -webkit-box-shadow: 0 8px 17px rgba(0, 0, 0, 0.3);
        box-shadow: 0 8px 17px rgba(0, 0, 0, 0.3);
    }
    
    .hulu_link_list li a:hover {
        -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
    }
}

/* =====================================================================
*    hulu_intro
* =================================================================== */
.hulu_intro {
	padding: calc(160 / 750 * 100%) 0;
    overflow: hidden;
}

.hulu_intro::before,
.hulu_intro::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/hulu/bg_deco1.png) repeat-y top center/100% auto;
	width: calc(554 / 750 * 100%);
	height: 200%;
    margin: calc(-285 / 750 * 100%) 0 0 calc(-340 / 750 * 100%);
}

.hulu_intro::after {
    left: auto;
	right: 0;
    margin: calc(-395 / 750 * 100%) calc(-362 / 750 * 100%) 0 0;
}

.hulu_intro_txt {
	text-align: center;
	line-height: 2.214;
	font-size: 3rem;
}

.hulu_intro_txt small {
	font-size: 2rem;
}

.color1 {
	color: #ac2009;
    font-weight: 900;
	background-color: #e0d5c4;
}

.color1 rt {
    background-color: #e0d5c4;
}

@media screen and (min-width: 768px) {
	.hulu_intro {
		padding: calc(100 / 1200 * 100%) 0;
	}
    
    .hulu_intro::before,
    .hulu_intro::after {
        background: url(../images/hulu/bg_deco1.png) repeat-y top center/100% auto;
        width: calc(554 / 1200 * 100%);
        left: 50%;
        right: auto;
        margin: calc(-237 / 1200 * 100%) 0 0 calc(-830 / 1200 * 100%);
    }
    
    .hulu_intro::after {
        margin: calc(-255 / 1200 * 100%) 0 0 calc(280 / 1200 * 100%);
    }

	.hulu_intro_txt {
		font-size: 2rem;
        line-height: 2.333;
	}

	.hulu_intro_txt small {
		font-size: 1.2rem;
	}
}

@media screen and (min-width: 1200px) {
	.hulu_intro {
		padding: 100px 0;
	}
    
    .hulu_intro::before,
    .hulu_intro::after {
        width: 554px;
        margin: -237px 0 0 -830px;
    }
    
    .hulu_intro::after {
        margin: -255px 0 0 280px;
    }
}

/* =====================================================================
*    hulu_story
* =================================================================== */
.hulu_story {
	background: url(../images/common/bg_brown.jpg) repeat center/calc(250 / 750 * 100%) auto;
    padding: calc(100 / 750 * 100%) 0 calc(130 / 750 * 100%);
}

.story_date_tab {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
    width: calc(630 / 650 * 100%);
    margin: 0 auto calc(50 / 650 * 100%);
}

.story_date_tab li {
	display: block;
    width: calc(310 / 630 * 100%);
    margin: 0 calc(10 / 630 * 100%) calc(20 / 630 * 100%) 0;
	background: linear-gradient(45deg, transparent 0.6em, #c5a545 0.6em), linear-gradient(135deg, transparent 0.6em, #c5a545 0.6em), linear-gradient(225deg, transparent 0.6em, #c5a545 0.6em), linear-gradient(315deg, transparent 0.6em, #c5a545 0.6em);
    background-position: bottom left, top left, top right, bottom right;
    background-size: 50.1% 50.1%;
    background-repeat: no-repeat;
	color: #211700;
	padding: 1em 0;
	font-size: 2.2rem;
    font-family: "Noto Serif JP","游明朝","Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.05em;
}

.story_date_tab li:nth-child(even),
.story_date_tab li:last-child {
    margin-right: 0;
}

.story_date_tab .date {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: -.9em 0 0;
    text-align: center;
    z-index: 3;
}

.story_date_tab .date span {
    display: inline-block;
    padding: .3em 1.2em;
    background-color: #95210e;
    border-radius: 2em;
    color: #fff;
    font-size: 1.8rem;
    font-family: "Noto Serif JP","游明朝","Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
    font-weight: 400;
    line-height: 1;
}

.story_date_tab .date span::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .5em .3em 0 .3em;
    border-color: #95210e transparent transparent transparent;
    margin-bottom: -.4em;
}

.story_date_tab li.nolink {
    background: linear-gradient(45deg, transparent 0.6em, #ccc1a2 0.6em), linear-gradient(135deg, transparent 0.6em, #ccc1a2 0.6em), linear-gradient(225deg, transparent 0.6em, #ccc1a2 0.6em), linear-gradient(315deg, transparent 0.6em, #ccc1a2 0.6em);
    background-position: bottom left, top left, top right, bottom right;
    background-size: 50.1% 50.1%;
    background-repeat: no-repeat;
	color: #83764d;
	pointer-events: none;
}

.story_date_tab li.is-active {
    background: linear-gradient(45deg, transparent 0.6em, #2a1f02 0.6em), linear-gradient(135deg, transparent 0.6em, #2a1f02 0.6em), linear-gradient(225deg, transparent 0.6em, #2a1f02 0.6em), linear-gradient(315deg, transparent 0.6em, #2a1f02 0.6em);
    background-position: bottom left, top left, top right, bottom right;
    background-size: 50.1% 50.1%;
    background-repeat: no-repeat;
    color: #fff;
}

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

.story_date_panel > li {
	display: none;
}

.story_date_panel li.is-show {
	display: block !important;
}

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

.story_subttl {
	font-size: 3.6rem;
	text-align: center;
	font-weight: 700;
	color: #982411;
	margin-bottom: calc(30 / 630 * 100%);
}

.slick-dots {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-top: calc(380 / 630 * 100%);
}

.slick-dots li {
	display: inline-block;
	width: calc(14 / 750 * 100vw);
	height: calc(14 / 750 * 100vw);
	margin: 0 .7rem;
}

.slick-dots li button {
	display: block;
	background-color: #b9b9b9;
    border-radius: 50%;
	width: 100%;
	height: 100%;
	padding: 0;
	cursor: pointer;
	color: transparent;
	border: 0;
	outline: none;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
	/*	background: #c8c8c8;*/
}

.slick-dots li.slick-active button {
	background-color: #96220f;
}

.story_txt {
	font-size: 2.4rem;
    line-height: 1.833;
}

.story_bnr {
    margin: calc(120 / 650 * 100%) auto 0;
}

.story_bnr li {
	margin-bottom: calc(40 / 560 * 100%);
}

.story_bnr li:last-child {
    margin-bottom: 0;
}

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

	.story_date_tab {
		margin-bottom: calc(60 / 1000 * 100%);
        width: calc(600 / 1000 * 100%);
	}

	.story_date_tab li,
    .story_date_tab li:nth-child(even) {
        width: calc(192 / 1000 * 100%);
        margin: 0 calc(10 / 1000 * 100%) calc(20 / 1000 * 100%) 0;
		font-size: 1.4rem;
		-webkit-transition: .2s;
		transition: .2s;
        width: calc(320 / 1000 * 100%);
	}

	.story_date_tab li:not(.nolink):hover {
		cursor: pointer;
		-webkit-transition: .2s;
		transition: .2s;
		background-image: linear-gradient(45deg, transparent 0.6em, #2a1f02 0.6em), linear-gradient(135deg, transparent 0.6em, #2a1f02 0.6em), linear-gradient(225deg, transparent 0.6em, #2a1f02 0.6em), linear-gradient(315deg, transparent 0.6em, #2a1f02 0.6em);
        color: #fff;
	}

	.story_date_tab .date span {
		font-size: 1.2rem;
	}

	.story_date_panel {
		width: calc(800 / 1000 * 100%);
	}

	.story_photo {
		margin-bottom: calc(80 / 800 * 100%);
	}

	.story_subttl {
		font-size: 3rem;
		margin-bottom: calc(30 / 800 * 100%);
	}

	.slick-dots {
		margin-top: calc(470 / 800 * 100%);
	}

	.slick-dots li {
		width: calc(10 / 1200 * 100vw);
        height: calc(10 / 1200 * 100vw);
        margin: 0 .5rem;
	}

	.story_txt {
		font-size: 1.6rem;
        line-height: 1.875;
	}

	.story_bnr {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: center;
		width: calc(900 / 1000 * 100%);
		margin: calc(100 / 1000 * 100%) auto 0;
	}

	.story_bnr li {
		width: calc(440 / 900 * 100%);
		margin: 0 !important;
	}
    
    .story_bnr li a {
		overflow: hidden;
	}
}

@media screen and (min-width: 1200px) {
	.hulu_story {
		padding: 100px 0;
        background-size: 250px auto;
	}

	.slick-dots li {
		width: 10px;
        height: 10px;
	}
}



/* =====================================================================
*   cast
* =================================================================== */
.hulu_cast {
	padding: calc(100 / 750 * 100%) 0;
    overflow: hidden;
}

.hulu_cast::before,
.hulu_cast::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/hulu/bg_deco1.png) repeat-y top center/100% auto;
	width: calc(554 / 750 * 100%);
	height: 200%;
    margin: calc(-125 / 750 * 100%) 0 0 calc(-340 / 750 * 100%);
}

.hulu_cast::after {
    left: auto;
    right: 0;
    margin: calc(-190 / 750 * 100%) calc(-342 / 750 * 100%) 0 0;
}

.cast_box li {
	margin-bottom: calc(5 / 650 * 100%);
}


.cast_box li:nth-child(6),
.cast_box li:nth-child(7) {
    margin-bottom: calc(40 / 650 * 100%);
}

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

.cast_box dt {
	width: 50%;
	padding-right: 2.1em;
	text-align: right;
	color: #9a2613;
}

.cast_box dt::before {
	content: ':';
	position: absolute;
	width: 3px;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
    color: #000;
}

.cast_box dd {
	width: 50%;
	padding-left: 2em;
}

.cast_box > *,
.staff_box dd {
	font-size: 2.8rem;
}

@media screen and (min-width: 768px) {
	.hulu_cast {
		padding: calc(80 / 1200 * 100%) 0;
	}
    
    .hulu_cast::before,
    .hulu_cast::after {
        background: url(../images/hulu/bg_deco1.png) repeat-y top center/100% auto;
        width: calc(554 / 1200 * 100%);
        left: 50%;
        right: auto;
        margin: calc(-510 / 1200 * 100%) 0 0 calc(-830 / 1200 * 100%);
    }
    
    .hulu_cast::after {
        margin: calc(-530 / 1200 * 100%) 0 0 calc(280 / 1200 * 100%);
    }

	.cast_box > *,
	.staff_box dd {
		font-size: 2.1rem;
	}

	.cast_box li {
		margin-bottom: 0.3rem;
	}

    .cast_box li:nth-child(6),
    .cast_box li:nth-child(7) {
        margin-bottom: 3.7rem;
    }

	.cast_box dt {
		padding-right: 4%;
	}

	.cast_box dd {
		padding-left: 4%;
	}
}

@media screen and (min-width: 1200px) {
	.hulu_cast {
		padding: 80px 0;
	}
    
    .hulu_cast::before,
    .hulu_cast::after {
        width: 554px;
        margin: -510px 0 0 -830px;
    }
    
    .hulu_cast::after {
        margin: -530px 0 0 280px;
    }
}



/* =====================================================================
*    comment
* =================================================================== */
.hulu_bg {
    background: url(../images/common/bg_brown.jpg) repeat center/calc(250 / 750 * 100%) auto;
}

.hulu_comment {
    padding: calc(100 / 750 * 100%) 0;
}

.hulu_comment > .inner::before,
.hulu_comment > .inner::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/deco/bg_deco1.png) no-repeat center/contain;
    width: calc(129 / 650 * 100%);
    padding-top: calc(127 / 650 * 100%);
    margin: calc(-56 / 650 * 100%) 0 0 calc(-85 / 650 * 100%);
}

.hulu_comment > .inner::after {
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
    margin: 0 calc(-85 / 650 * 100%) calc(-72 / 650 * 100%) 0;
}

.hulu_comment .sec_contents {
    width: calc(690 / 650 * 100%);
    margin: 0 0 0 calc(-20 / 650 * 100%);
    padding: calc(8 / 650 * 100%);
    background-color: #fff;
    -webkit-box-shadow: 0 calc(3 / 750 * 100vw) calc(10 / 750 * 100vw) 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 calc(3 / 750 * 100vw) calc(10 / 750 * 100vw) 0 rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.hulu_comment_box {
    padding: calc(50 / 674 * 100%) calc(53 / 674 * 100%);
    border: calc(4 / 750 * 100vw) solid #b68e16;
}

.hulu_comment_ttl {
	margin-bottom: 1.1em;
	font-size: 5rem;
    font-family: "Noto Serif JP","游明朝","Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
    font-weight: 500;
    line-height: 1;
	letter-spacing: -0.1em;
    text-align: center;
}

.hulu_comment_subttl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	color: #af8e41;
    font-size: 2.8rem;
	margin-bottom: .5em;
}

.hulu_comment_subttl span {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    max-width: 90%;
    padding: 0 0.8em 0 0;
    font-weight: bold;
}

.hulu_comment_subttl::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #daceb3;
}

.hulu_comment_txt {
	font-size: 2.8rem;
    line-height: 1.571;
}

@media screen and (min-width: 768px) {
	.hulu_bg {
		background-size: calc(250 / 1200 * 100%) auto;
	}
    
    .hulu_comment {
        padding: calc(80 / 1200 * 100%) 0;
    }
    
    .hulu_comment > .inner::before,
    .hulu_comment > .inner::after {
        width: calc(129 / 1200 * 100%);
        padding-top: calc(127 / 1200 * 100%);
        margin: calc(-51 / 1200 * 100%) 0 0 calc(35 / 1200 * 100%);
    }
    
    .hulu_comment > .inner::after {
        margin: 0 calc(35 / 1200 * 100%) calc(-57 / 1200 * 100%) 0;
    }
    
    .hulu_comment .sec_contents {
        width: 100%;
        margin: 0;
        padding: calc(4 / 1000 * 100%);
        -webkit-box-shadow: 0 calc(3 / 1200 * 100vw) calc(7 / 1200 * 100vw) 0 rgba(0, 0, 0, 0.4);
        box-shadow: 0 calc(3 / 1200 * 100vw) calc(7 / 1200 * 100vw) 0 rgba(0, 0, 0, 0.4);
    }
    
    .hulu_comment_box {
        padding: calc(40 / 992 * 100%) calc(89 / 992 * 100%) calc(55 / 992 * 100%);
        border-width: 2px;
    }
    
    .hulu_comment_ttl {
        margin-bottom: 0.7em;
        font-size: 3.4rem;
    }
    
    .hulu_comment_subttl {
        font-size: 1.8rem;
    }
    
    .hulu_comment_txt {
        font-size: 1.6rem;
        line-height: 1.75;
    }
}

@media screen and (min-width: 1200px) {
	.hulu_bg {
		background-size: 250px auto;
	}
    
    .hulu_comment {
        padding: 80px 0;
    }
    
    .hulu_comment .sec_contents {
        -webkit-box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.4);
        box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.4);
    }
}

/* =====================================================================
*    about
* =================================================================== */
.hulu_about {
	padding: 0 0 calc(40 / 750 * 100%);
}

.hulu_about_box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/hulu/bg_deco2.png) no-repeat center/contain;
    width: calc(325 / 650 * 100%);
    padding-top: calc(114 / 650 * 100%);
    margin: calc(-50 / 650 * 100%) 0 0 calc(-150 / 650 * 100%);
    z-index: -1;
}

.hulu_about_box::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    background: url(../images/hulu/bg_deco3.png) no-repeat center/contain;
    width: calc(266 / 650 * 100%);
    padding-top: calc(144 / 650 * 100%);
    margin: 0 calc(-65 / 650 * 100%) calc(-70 / 650 * 100%) 0;
    z-index: -1;
}

.hulu_about_txt {
    width: calc(630 / 650 * 100%);
    margin: 0 auto;
	line-height: 2;
}

.hulu_about + .hulu_trial {
    padding-bottom: calc(200 / 750 * 100%);
    background-color: transparent;
}

@media screen and (min-width: 768px) {
	.hulu_about {
        padding: 0;
    }
    
    .hulu_about h2 {
        width: calc(455 / 1000 * 100%);
    }
    
    .hulu_about_box::before {
        width: calc(185 / 1000 * 100%);
        padding-top: calc(65 / 1000 * 100%);
        margin: calc(-25 / 1000 * 100%) 0 0 calc(73 / 1000 * 100%);
    }
    
    .hulu_about_box::after {
        width: calc(151 / 1000 * 100%);
        padding-top: calc(81 / 1000 * 100%);
        margin: 0 calc(95 / 1000 * 100%) calc(-20 / 1000 * 100%) 0;
    }

	.hulu_about_txt {
		width: calc(680 / 1000 * 100%);
	}
    
    .hulu_about + .hulu_trial {
        padding-bottom: calc(150 / 1200 * 100%);
    }
}

@media screen and (min-width: 1200px) {
	.hulu_about + .hulu_trial {
        padding-bottom: 150px;
    }
}


/* =====================================================================
*    movie_popup
* =================================================================== */
.bc_wrapper {
	width: 100%;
	height: 100%;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 100000;
	display: none;
	cursor: pointer;
}

.bc_wrapper .return_box {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.bc_wrapper .bc_movie_wrap {
	width: 100%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: auto;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;
}

.bc_wrapper .bc_movie_wrap .bc_movie {
	width: 100%;
	padding-top: 56.25%;
	position: relative;
}

.bc_wrapper .bc_movie_wrap .bc_movie video {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

.bc_wrapper .bc_movie_wrap .bc_movie iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

.vjs-icon-placeholder {
	display: block;
	margin: -1em 0 0;
	position: static;
}

.bc_wrapper .btn2 {
	margin: calc(50 / 750 * 100%) auto 0;
}

.bc_wrapper .btn2 a {
	color: #fff;
	text-decoration: none;
	border-bottom: 2px solid #fff;
	-webkit-transition: .2s;
	transition: .2s;
	font-size: 3rem;
	padding: 5px 10px;
}

@media screen and (min-width: 768px) {
	.bc_wrapper .bc_movie_wrap {
		width: calc(800 / 1200 * 100%);
	}

	.bc_wrapper .btn2 {
		margin: calc(30 / 800 * 100%) auto 0;
	}

	.bc_wrapper .btn2 a {
		font-size: 2rem;
	}

	.bc_wrapper .btn2 a:hover {
		color: #982411;
		border-color: #982411;
		-webkit-transition: .2s;
		transition: .2s;
	}
}

@media screen and (min-width: 1200px) {
	.bc_wrapper .bc_movie_wrap {
		width: 800px;
	}
}