@charset "utf-8";

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

/* =====================================================================
*    共通の背景
* =================================================================== */

.bg_blue {
	background-color: #dbf0ff;
}

.bg_blue::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/bg_blue_t_sp.jpg) no-repeat center/contain;
	width: 100%;
	padding-top: calc(346 / 750 * 100%);
}

.bg_blue::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(../images/bg_blue_b_sp.jpg) no-repeat center/contain;
	width: 100%;
	padding-top: calc(401 / 750 * 100%);
}

.bg_pattern {
	background: url(../images/bg_pattern.jpg) repeat center/calc(500 / 750 * 100%) auto;
}

@media screen and (min-width: 768px) {
	.bg_blue::before {
		background-image: url(../images/bg_blue_t_pc.jpg);
		padding-top: calc(625 / 1600 * 100%);
	}

	.bg_blue::after {
		background-image: url(../images/bg_blue_b_pc.jpg);
		padding-top: calc(404 / 1600 * 100%);
	}

	.bg_pattern {
		background-size: calc(500 / 1200 * 100%) auto;
	}
}

@media screen and (min-width: 1200px) {
	.bg_pattern {
		background-size: 500px auto;
	}
}


/* =====================================================================
*    mv
* =================================================================== */
.mv {
	padding-top: calc(495 / 750 * 100%);
}

.mv .inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	margin: auto;
	overflow: hidden;
}

.mv_ttl {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.mv_deli {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(102 / 750 * 100%);
	margin: calc(11 / 750 * 100%) 0 0 calc(16 / 750 * 100%);
}

.mv_onair {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	/* width: calc(240 / 750 * 100%);
	margin: calc(397 / 750 * 100%) 0 0 calc(38 / 750 * 100%); */
	width: calc(490 / 750 * 100%);
	margin: calc(385 / 750 * 100%) 0 0 calc(38 / 750 * 100%);
}

@media screen and (min-width: 768px) {
	.mv {
		padding-top: calc(660 / 1200 * 100%);
	}

	.mv::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: calc(458 / 1200 * 100%);
		padding-top: calc(481 / 1200 * 100%);
		background: url(../images/bg_top_l.png) no-repeat center/contain;
	}

	.mv::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: calc(1279 / 1200 * 100%);
		padding-top: calc(957 / 1200 * 100%);
		background: url(../images/bg_top_r.png) no-repeat center/contain;
	}

	.mv_ttl {
		width: calc(1000 / 1200 * 100%);
		margin: auto;
		right: 0;
	}

	.mv_deli {
		width: calc(102 / 1200 * 100%);
		margin: calc(15 / 1200 * 100%) 0 0 calc(123 / 1200 * 100%);
	}

/*	.mv_onair {
		width: calc(262 / 1200 * 100%);
		margin: calc(545 / 1200 * 100%) 0 0 calc(199 / 1200 * 100%);
	}
	*/
	.mv_onair {
	width: calc(524 / 1200 * 100%);
	margin: calc(522 / 1200 * 100%) 0 0 calc(199 / 1200 * 100%);
	}
}

@media screen and (min-width: 1200px) {
	.mv {
		padding-top: 660px;
	}

	.mv::before {
		width: 458px;
		padding-top: 481px;
	}

	.mv::after {
		width: 1279px;
		padding-top: 957px;
	}

}

/* =====================================================================
*    banner1
* =================================================================== */
#banner {
	padding: calc(60 / 750 * 100%) 0;
}


@media screen and (min-width: 768px) {
	#banner {
		padding: calc(40 / 1200 * 100%) 0;
	}

}

@media screen and (min-width: 1200px) {
	#banner {
		padding: 40px 0;
	}

}



/* =====================================================================
*    nextstory
* =================================================================== */

.nextstory_movie {
	margin-bottom: calc(40 / 690 * 100%);
	-webkit-box-shadow: .4em .4em 0 0 #ffff18;
	box-shadow: .4em .4em 0 0 #ffff18;
}

/*
.nextstory_movie::before {
	content: '';
	position: absolute;
	top: .4em;
	left: .4em;
	width: 100%;
	height: 100%;
	background-color: #ffff18;
}
*/

.nextstory_movie_btn::before {
	content: '';
	position: absolute;
	top: -.4em;
	left: -.4em;
	width: 100%;
	height: 100%;
	border: .1em solid #24a0fc;
	z-index: 2;
}

.nextstory_movie_btn::after {
	content: "";
	display: block;
	width: calc(91 / 750 * 100vw);
	height: calc(65 / 750 * 100vw);
	position: absolute;
	background: url(../images/btn_movie.png) no-repeat center/contain;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 2;
}

.nextstory_subttl {
	font-size: 5.6rem;
	font-weight: bold;
	text-align: center;
}

.nextstory_date {
	text-align: center;
	margin-bottom: 1.3em;
}

.twitter {
	border: .2em solid #24a0fc;
	padding: calc(60 / 690 * 100%) calc(50 / 690 * 100%);
	margin-top: 3em;
}

.twitter_ttl {
	display: inline;
	font-size: 3rem;
	width: 16.5em;
	background-color: #dbf0ff;
	text-align: center;
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: -1em auto 0;
}

.twitter_box {
	padding-top: calc(690 / 570 * 100%);
	background-color: #fff;
	overflow: hidden;
}

.twitter_box iframe {
	width: 740px !important;
	height: 40em !important;
	font-size: 2rem;
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	-webkit-overflow-scrolling: touch;
}


@media screen and (min-width: 768px) {
	.nextstory_movie {
		width: calc(880 / 1000 * 100%);
		margin: 0 auto calc(30 / 1000 * 100%);
		-webkit-box-shadow: 0.5em 0.5em 0 0 #ffff18;
		box-shadow: 0.5em 0.5em 0 0 #ffff18
	}

	.nextstory_movie_btn::before {
		top: -.5em;
		left: -.5em;
		border-width: .15em;
	}

	.nextstory_movie_btn::after {
		width: calc(91 / 1200 * 100vw);
		height: calc(65 / 1200 * 100vw);
		-webkit-transition: .3s;
		transition: .3s;
	}

	.nextstory_movie_photo:hover .nextstory_movie_btn::after {
		-webkit-transform: scale(1.197);
		transform: scale(1.197);
	}

	.nextstory_date {
		font-size: 2rem;
	}

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

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

	.twitter_ttl {
		font-size: 2.8rem;
	}

	.twitter_box {
		padding-top: calc(637 / 880 * 100%);
	}

	.twitter_box iframe {
		height: 100% !important;
	}

}

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

	.nextstory_movie_btn::after {
		width: 91px;
		height: 65px;
	}
}


/* =====================================================================
*    intro
* =================================================================== */

#intro::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(260 / 750 * 100%);
	padding-top: calc(659 / 750 * 100%);
	background: url(../images/bg_shape_l.png) no-repeat center/contain;
	margin: 0 0 calc(20 / 750 * 100%) calc(-80 / 750 * 100%);
}

#intro::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: calc(291 / 750 * 100%);
	padding-top: calc(652 / 750 * 100%);
	background: url(../images/bg_shape_r.png) no-repeat center/contain;
	margin: 0 calc(-65 / 750 * 100%) calc(-10 / 750 * 100%) 0;
}

.intro_box p {
	font-size: 2.8rem;
	text-align: center;
	letter-spacing: -.1rem;
}

.intro_txtImg {
	display: inline !important;
	width: calc(286 / 690 * 100%) !important;
	vertical-align: middle;
}

.intro_box .blue {
	color: #28a4f9;
}

.intro_box strong {
	font-weight: normal;
}

@media screen and (min-width: 768px) {
	#intro::before {
		width: calc(320 / 1600 * 100%);
		padding-top: calc(812 / 1600 * 100%);
		margin: 0;
	}

	#intro::after {
		width: calc(362 / 1600 * 100%);
		padding-top: calc(812 / 1600 * 100%);
		margin: 00;
	}

	.intro_box p {
		font-size: 1.8rem;
		letter-spacing: 0;
	}

	.intro_txtImg {
		width: calc(263 / 1000 * 100%) !important;
	}

	.intro_box strong {
		font-weight: normal;
		font-size: 2.6rem;
	}
}

@media screen and (min-width: 1600px) {
	#intro::before {
		width: 320px;
		padding-top: 812px;
	}

	#intro::after {
		width: 362px;
		padding-top: 812px;
	}
}


/* =====================================================================
*    story
* =================================================================== */
#story {
	padding: calc(100 / 750 * 100%) 0;
}

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

.story_date_tab li {
	display: block;
	width: calc(300 / 650 * 100%);
	margin: 0 calc(50 / 650 * 100%) calc(45 / 650 * 100%) 0;
	padding: .5em 0;
	font-weight: bold;
	text-align: center;
}

.story_date_tab li::before {
	content: '';
	position: absolute;
	top: .12em;
	left: .12em;
	width: 100%;
	height: 100%;
	background-color: #f0f9ff;
	z-index: 1;
}

.story_date_tab li::after {
	content: '';
	position: absolute;
	top: -.12em;
	left: -.12em;
	width: 100%;
	height: 100%;
	border: .1em solid #24a0fc;
	z-index: 2;
}

.story_date_tab span {
	z-index: 2;
}

/*IE対策*/
_:-ms-lang(x)::-ms-backdrop,
.story_date_tab span {
	bottom: -.3em;
}

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

.story_date_tab li.nolink {
	color: #93a9bb;
	pointer-events: none;
}

.story_date_tab li.nolink::before {
	background-color: #e1eaf0;
}

.story_date_tab li.nolink::after {
	border-color: #93a9bb;
}

.story_date_tab li.is-active::before {
	background-color: #ffff18;
}

.story_date_panel > li {
	display: none;
	background-color: #fff;
	padding: calc(20 / 690 * 100%) calc(20 / 690 * 100%) calc(40 / 690 * 100%);
	-webkit-box-shadow: .3em .3em 0 0 #24a0fc;
	box-shadow: .3em .3em 0 0 #24a0fc;
}

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

.story_photo {
	margin-bottom: calc(50 / 690 * 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: .2em;
}

.slick-dots li {
	display: inline-block;
	width: calc(48 / 750 * 100vw);
	height: calc(4 / 750 * 100vw);
	margin: 0 .3em;
}

.slick-dots li button {
	display: block;
	background-color: #ccddeb;
	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: #24a0fc;
}

.story_txtBox,
.netabare {
	width: calc(600 / 650 * 100%);
	margin: auto;
}

.story_txtBox dt {
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-align-items: flex-end;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	line-height: 1;
	margin-bottom: calc(50 / 690 * 100%);
	padding: 0 .5em;
}

.story_ttl {
	font-size: 3.6rem;
	font-weight: bold;
}

/*ネタばれ*/
.netabare {
	border-top: .1em solid #dbf0ff;
	padding-top: 1.5em;
	margin-top: 1.5em;
}

.netabare_box {
	height: 7em;
	overflow: hidden;
}

.netabare_btn {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0)));
	background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.netabare_btn a {
	width: calc(480 / 650 * 100%);
	margin: calc(50 / 650 * 100%) auto 0;
	background-color: #fff;
	padding: 1em 0;
	font-size: 2.8rem;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	border: 1px solid #2a4052;
}

.netabare_btn a::after {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	border-top: 2px solid #2a4052;
	border-right: 2px solid #2a4052;
	position: relative;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	top: -0.25em;
	margin: 0 0 0 1em;
}

.novel {
	background-color: #f0f9ff;
	border-radius: 1em;
	width: calc(630 / 650 * 100%);
	margin: calc(60 / 650 * 100%) auto 0;
	padding: calc(40 / 650 * 100%) calc(40 / 650 * 100%) calc(115 / 650 * 100%);
}

.novel::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	background: url(../images/icon_tw_sp.png) no-repeat center/contain;
	width: calc(451 / 630 * 100%);
	padding-top: calc(41 / 630 * 100%);
	margin: 0 0 calc(40 / 630 * 100%) calc(40 / 630 * 100%);
}

.novel_ttl {
	color: #24a0fc;
	font-size: 3rem;
	font-weight: bold;
	padding-left: 1.5em;
}

.novel_ttl::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 1.2em;
	height: 1.5em;
	background: url(../images/icon_wing.png) no-repeat center/contain;
}

/*IE対策*/
_:-ms-lang(x)::-ms-backdrop,
.novel_ttl::before {
	top: -.8em;
}


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

	#story {
		padding: calc(120 / 1200 * 100%) 0 calc(150 / 1200 * 100%);
	}

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

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

	.story_date_tab li::before {
		-webkit-transition: .3s ease;
		transition: .3s ease;
	}

	.story_date_tab li:not(.nolink):hover {
		cursor: pointer;
	}

	.story_date_tab li:not(.nolink):hover::before {
		background-color: #ffff18;
	}

	.story_date_panel > li {
		padding: calc(80 / 1000 * 100%) calc(100 / 1000 * 100%);
	}

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

	.slick-dots li {
		width: calc(24 / 1200 * 100vw);
		height: calc(2 / 1200 * 100vw);
	}

	.story_txtBox,
	.netabare,
	.novel {
		width: calc(680 / 800 * 100%);
	}

	.story_txtBox dt {
		margin-bottom: 2em;
		padding: 0;
	}

	.story_ttl {
		font-size: 2.8rem;
	}

	/*	ネタバレ*/
	.netabare_box {
		height: 10em;
	}

	.netabare_btn a {
		width: calc(360 / 680 * 100%);
		margin: calc(40 / 680 * 100%) auto 0;
		padding: 1.1em 0;
		font-size: 1.8rem;
	}

	.netabare_btn a:hover {
		background-color: #f0f9ff;
		border-color: #24a0fc;
		color: #24a0fc;
	}

	.netabare_btn a::after {
		-webkit-transition: 0.3s ease;
		transition: 0.3s ease;
	}

	.netabare_btn a:hover::after {
		border-color: #24a0fc;
	}


	.novel {
		border-radius: 2em;
		margin: calc(60 / 800 * 100%) auto 0;
		padding: calc(20 / 800 * 100%) calc(40 / 800 * 100%) calc(70 / 800 * 100%);
	}

	.novel::before {
		background: url(../images/icon_tw_pc.png) no-repeat center/contain;
		width: calc(539 / 680 * 100%);
		padding-top: calc(21 / 680 * 100%);
		margin: 0 0 calc(20 / 680 * 100%) calc(40 / 680 * 100%);
	}

	.novel_ttl {
		font-size: 2rem;
		margin-bottom: .5em;
	}

	.novel_ttl::before {
		width: 1em;
		height: 1.2em;
	}

	.novel p {}
}

@media screen and (min-width: 1200px) {
	#story {
		padding: 120px 0 150px;
	}

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




/* =====================================================================
*    cast
* =================================================================== */
#cast h2 {
	margin-bottom: calc(115 / 690 * 100%);
}

.cast_list li {
	background-color: #ffffff;
	padding: calc(40 / 690 * 100%) calc(40 / 690 * 100%) calc(60 / 690 * 100%);
}

.cast_list li:not(:last-child) {
	margin-bottom: calc(120 / 690 * 100%);
}

.cast_img {
	position: absolute;
	width: calc(262 / 610 * 100%);
	top: 0;
	left: 0;
	margin: calc(-95 / 610 * 100%) 0 0 0;
}

.cast_list dl {
	margin: 0 0 calc(30 / 610 * 100%) calc(300 / 610 * 100%);
}

.cast_list dt span {
	display: block;
}

.cast_list dt .ja {
	font-size: 3.2rem;
	color: #209cff;
	font-weight: bold;
	line-height: 1.8;
}

.cast_list dt .en {
	font-size: 2.4rem;
	color: #93a9bb;
	margin-bottom: .3em;
}

.cast_list dd {
	color: #000;
}


@media screen and (min-width: 768px) {
	#cast h2 {
		margin-bottom: calc(125 / 1000 * 100%);
	}

	.cast_list {}

	.cast_list li {
		padding: calc(50 / 1000 * 100%) calc(100 / 1000 * 100%);
	}

	.cast_list li:not(:last-child) {
		margin-bottom: calc(130 / 1000 * 100%);
	}

	.cast_img {
		width: calc(222 / 800 * 100%);
		margin: calc(-136 / 800 * 100%) 0 0 0;
	}

	.cast_list dl {
		margin: 0 0 calc(30 / 800 * 100%) calc(260 / 800 * 100%);
	}

	.cast_list dt {
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-align-items: flex-end;
		-webkit-box-align: end;
		-ms-flex-align: end;
		align-items: flex-end;
	}

	.cast_list dt .ja {
		font-size: 2.4rem;
	}

	.cast_list dt .en {
		font-size: 1.6rem;
		margin: 0 0 0 1.5em;
	}

	.cast_list dd {
		font-size: 1.r8em;
	}

}

@media screen and (min-width: 1200px) {
	#cast {
		padding: 100px 0;
	}
}


/* =====================================================================
*    staff
* =================================================================== */
#staff {
	padding: calc(100 / 750 * 100%) 0;
}

#staff h2 {
	margin-bottom: calc(80 / 690 * 100%);
}

.staff_box {
	text-align: center;
}

.staff_box li:not(:last-child) {
	margin-bottom: calc(50 / 690 * 100%);
}

.staff_box dt {
	font-size: 2.4rem;
	color: #209cff;
	font-weight: bold;
	padding-bottom: calc(30 / 690 * 100%);
}

.staff_box dt::before {
	content: '…';
	position: absolute;
	color: #363534;
	width: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	font-size: 2.8rem;
	line-height: 1;
}

/*IE対策*/
_:-ms-lang(x)::-ms-backdrop,
.staff_box dt {
	padding-bottom: 1em;
}

/*IE対策*/
_:-ms-lang(x)::-ms-backdrop,
.staff_box dt::before {
	bottom: .5em;
}


@media screen and (min-width: 768px) {
	#staff {
		padding: calc(100 / 1200 * 100%) 0;
	}

	#staff h2 {
		margin-bottom: calc(60 / 1000 * 100%);
	}

	.staff_box li:not(:last-child) {
		margin-bottom: calc(40 / 1000 * 100%);
	}

	.staff_box dt {
		font-size: 1.4rem;
		padding-bottom: calc(25 / 1000 * 100%);
	}

	.staff_box dt::before {
		font-size: 2rem;
		line-height: 1.2;
	}

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

}

@media screen and (min-width: 1200px) {
	#staff {
		padding: 100px 0;
	}
}