@charset "utf-8";
/* CSS INFORMATION -====================================================
File name : top.css
Description : TOPページCSS
===================================================================== */

/* =====================================================================
*    header
* =================================================================== */
#header {
	background: url(../images/bg_mv_grade.jpg) no-repeat center bottom/cover;
}

.mv_box {
	padding-top: calc(1376 / 750 * 100%);
}

.site_ttl {
	width: calc(484 / 750 * 100%);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: calc(711 / 750 * 100%) auto 0;
	z-index: 2;
}

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

.mv_onair {
	width: calc(549 / 750 * 100%);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto calc(263 / 750 * 100%);
	z-index: 2;
}

.official_link a {
	width: calc(630 / 750 * 100%);
	padding-top: calc(160 / 750 * 100%);
	margin: 0 auto calc(65 / 750 * 100%);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.official_link img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}


@media screen and (min-width:700px) {
	.mv {
		background: url(../images/bg_mv.png) no-repeat center top/calc(1663 / 1040 * 100%) auto;
	}


	.mv_box {
		margin: 0 calc(30 / 740 * 100%) 0 0;
		padding-top: calc(1145 / 740 * 100%);
	}

	.mv_img {
		margin-top: calc(20 / 710 * 100%);
	}

	.site_ttl {
		width: calc(484 / 710 * 100%);
		margin: calc(680 / 710 * 100%) auto 0;
	}

	.mv_onair {
		width: calc(349 / 710 * 100%);
		margin: 0 auto calc(155 / 710 * 100%);
	}

	.official_link a {
		width: calc(400 / 710 * 100%);
		padding-top: calc(102 / 710 * 100%);
		margin: 0 auto calc(28 / 710 * 100%);
	}

	.official_link a:hover img:nth-of-type(2) {
		opacity: 0;
	}
}

@media screen and (min-width:1040px) {
	.mv {
		background-size: 1663px auto;
	}
}


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

.intro::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: calc(18 / 750 * 100%);
	background: url(../images/bg_border.png) repeat-x center/contain;
	margin-top: calc(55 / 750 * 100%);
}

.intro .inner::before {
	content: "";
	display: block;
	width: calc(165 / 750 * 100%);
	padding-top: calc(119 / 750 * 100%);
	margin: calc(25 / 750 * 100%) auto 0;
	background: url(../images/bg_intro_deco.png) no-repeat center top;
	background-size: contain;
	/*
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
*/
}

.intro .sec_ttl {
	padding-top: calc(67 / 750 * 100%);
}

.intro_box {
	width: calc(700 / 750 * 100%);
	margin-left: calc(34 / 750 * 100%);
	padding-bottom: calc(177 / 750 * 100%);
}

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

	.intro::before {
		padding-top: calc(18 / 1040 * 100%);
		margin-top: calc(55 / 1040 * 100%);
	}

	.intro .inner::before {
		width: calc(165 / 740 * 100%);
		padding-top: calc(119 / 740 * 100%);
		margin: calc(8 / 740 * 100%) 0 0 calc(280 / 740 * 100%);
	}

	.intro .sec_ttl {
		padding-top: calc(64 / 740 * 100%);
	}

	.intro_box {
		width: calc(588 / 740 * 100%);
		margin: 0 auto;
		padding-bottom: calc(122 / 740 * 100%);
	}

}

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

	.intro::before {
		padding-top: 18px;
		margin-top: 55px;
	}

	.intro .inner::before {
		width: 165px;
		padding-top: 119px;
		margin: 8px 0 0 280px;
	}
}


/* =====================================================================
*    cast
* =================================================================== */
.cast::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: calc(56 / 750 * 100%);
	background: url(../images/bg_cast_deco.jpg) repeat-x center top/contain;
}

.cast .sec_ttl {
	padding-top: calc(170 / 750 * 100%);
}

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

@media screen and (min-width:700px) {
	.cast::before {
		padding-top: calc(28 / 1040 * 100%);
	}

	.cast .sec_ttl {
		padding-top: calc(128 / 740 * 100%);
	}

	.cast_box {
		width: calc(100 / 740 * 100%);
	}
}

@media screen and (min-width:1040px) {
	.cast::before {
		padding-top: 28px;
	}
}



/* =====================================================================
*    staff
* =================================================================== */
.staff .sec_ttl {
	padding-top: calc(160 / 750 * 100%);
}

.staff_box {
	width: calc(465 / 750 * 100%);
	margin-left: calc(97 / 750 * 100%);
	padding-bottom: calc(244 / 750 * 100%);
}

@media screen and (min-width:700px) {
	.staff .sec_ttl {
		padding-top: calc(160 / 740 * 100%);
	}

	.staff_box {
		width: calc(286 / 740 * 100%);
		margin-left: calc(202 / 740 * 100%);
		padding-bottom: calc(200 / 750 * 100%);
	}
}

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