@charset "UTF-8";

/* spinoff
========================================== */
.spinoff-area {}
.spinoff-area a { display: block; }
.spinoff-inner {}

body .d-contentsBox {
    width: 100%;
}

body .spinoff-area{
	background: url(../images/spinoff/bg-top.jpg) no-repeat center top;
	background-size: contain;
    background-color: #47515b;
	color: #ffffff;
	padding-top: calc(50 / 1000 * 50%);
	padding-bottom: calc(30 / 1000 * 50%);
	margin: 0 auto 40px;
}

h2.d-box-title{
	max-width: 573px;
    height: auto;
    background-image: url(../images/spinoff/title.png);
	background-repeat: no-repeat;
    background-size: contain;
	background-position: center;
	padding-top: 24.89%;
	font-size: 0;
    margin: 0 auto 50px;
}

	body .d-contentsBox-inner {
    overflow: visible;
	}



/* spinoff-article
------------------------------------------ */
.spinoff-article-body {
	width: 90%;
	margin: 0 auto;
}

.spinoff-mainImg{
	width: 100%;
	max-width: 960px;
	height: 0;
	margin: 0 auto;
	padding-top: calc(667 / 1000 * 100%);
	background-repeat:no-repeat;
	background-position: center;
	background-size: cover;
}

.spinoff-article p{
	font-size: 1.6rem;
	line-height: 1.75;
	letter-spacing: 0.1em;
}


.spinoff-article-contents {}
.spinoff-article-contents p {
	margin: 0 0 1.5em 0;
	font-size: 1.6rem;
	line-height: 1.75;
	letter-spacing: 0.12em;
}
.spinoff-article-contents p strong{
	color: #00e0d3;
	display:inline-block;
}

.spinoff-article-contents p span{
    letter-spacing: -0.15em;
	margin-right: 0.15em;
}


p#spinoff-dokusen-txt{
	max-width: 632px;
    height: auto;
    background-image: url(../images/spinoff/dokusen-txt.png);
	background-repeat: no-repeat;
    background-size: contain;
	background-position: center;
	padding-top: calc(65 / 1000 * 100%);
	font-size: 0;
	margin: 5% auto;
}


.hulu-banner {
	max-width: 640px;
	width: 100%;
	margin: 0 auto;
	font-size: 0;
}

.hulu-banner-img {}
.hulu-banner-img img {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.free-banner {
	max-width: 568px;
	width: 100%;
	margin: 5% auto;
	font-size: 0;
}

.free-banner-img {}
.free-banner-img img {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.spinoff-intro{
	margin: 5% auto;
}

.spinoff-intro h3{
	max-width: 385px;
    height: auto;
    background-image: url(../images/spinoff/title-intro.png);
	background-repeat: no-repeat;
    background-size: contain;
	background-position: center;
	padding-top: calc(116 / 1000 * 100%);
	font-size: 0;
	margin: 0 auto 5% auto;
}

.spinoff-intro p{
/*	padding: 0 0 5% 0;
    font-size: 1.8rem;
    line-height: 3;
	text-align: center;
*/
	max-width: 676px;
    height: auto;
    background-image: url(../images/spinoff/intro-txt_pc.png);
	background-repeat: no-repeat;
    background-size: contain;
	background-position: center;
	padding-top: calc(301 / 1000 * 100%);
	font-size: 0;
	margin: 5% auto 15%;
}

.spinoff-story{
	margin: 5% auto 10% auto;
}
.spinoff-story h3{
	max-width: 385px;
    height: auto;
    background-image: url(../images/spinoff/title-story.png);
	background-repeat: no-repeat;
    background-size: contain;
	background-position: center;
	padding-top: calc(116 / 1000 * 100%);
	font-size: 0;
	margin: 0 auto 5% auto;
}

.spinoff-story p{
	line-height: 2;
	margin: 5% auto;
}


.spinoff-schedule {
	background-color: #0b8079;
	text-align: center;
	box-sizing: border-box;
	padding: 3% 2%;
	margin: 5% auto;
}

.spinoff-schedule h3{
	text-align: center;
	font-size: 2.6rem;
	line-height: 1.75;
	font-weight: bold;
	padding-bottom: 2%;
}

.spinoff-schedule li{
	text-align: center;
	font-size: 1.8rem;
	line-height: 1.75;
	font-weight: bold;
}


.whats_hulu{
	background-color: #000000;
	border: 3px double #3ce132;
	text-align: center;
	box-sizing: border-box;
	padding: 3% 2%;
	margin: 0 auto 5% auto;
}

.whats_hulu h3{
	color: #3ce132;
	font-size: 3rem;
	line-height: 2;
	font-weight: bold;
	padding-bottom: 2%;
}



@media only screen and (min-width: 601px) and (max-width: 992px) {}

@media only screen and (max-width: 650px) {
/*.spinoff-intro p{
	padding: 0 0 5% 0;
    font-size: 1.2rem;
    line-height: 2;
	text-align: center;
	letter-spacing: 0;
}*/
}

@media only screen and (max-width: 600px) {
	body .spinoff-area{
		background-size: 180%,180%;
		margin: 0 auto 0;
	}
	
	body h2.d-box-title {
	padding-top: calc(239 / 600 * 80%);
	font-size: 0;
    margin: 0 auto 50px;
	}

	.spinoff-article-body {
		padding: 0;
		overflow: hidden;
	}

	.spinoff-article-mainImg {
		width: calc(94% + 1px);
		height: 0;
		margin: 0 auto;
		background-repeat:no-repeat;
		background-position: center;
		background-size: cover;
	}

	.spinoff-article-contents {
		padding: 0 3% 0;
	}
	.spinoff-article-contents p {
		font-size: 1.4rem;
		line-height: 1.7;
	}
	

.spinoff-intro p{
	max-width: 443px;
    background-image: url(../images/spinoff/intro-txt_sp.png);
	padding-top: 95%;
	margin: 10% auto 15% auto;
}

	.spinoff-intro h3{
		padding-top: calc(116 / 600 * 100%);
		margin: 10% auto 5% auto;
	}
	
	.spinoff-story h3{
		padding-top: calc(116 / 600 * 100%);
		margin: 10% auto 5% auto;
	}

	.spinoff-schedule h3{
		font-size: 2rem;
	}

	.spinoff-schedule li{
		font-size: 1.4rem;
		line-height: 1.75;
	}
	
}