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

/* =====================================================================
*    header
* =================================================================== */
#header {
	background-color: #080808;
}

.mv_box {
	padding-top: calc(1318 / 750 * 100%);
}
.mv_box::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: calc(485 / 750 * 100%);
	background: url(../images/img_shadow.png) no-repeat center bottom/contain;
	z-index: 2;
	margin-top: calc(687/750 *100%);
}

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

.mv_img {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

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

@media screen and (min-width: 700px) {
	#header {
	}
	.mv {
		background: url(../images/bg_grange1.png) no-repeat top right/ auto,
			url(../images/bg_grange2.png) no-repeat bottom left/auto;
	}

	.mv_box {
		margin: 0 calc(20 / 740 * 100%) 0 0;
		padding-top: calc(1077 / 740 * 100%);
		z-index: 3;
	}
	.mv_box::before {
		width: 100%;
		padding-top: calc(466 / 720 * 100%);
		background: url(../images/img_shadow.png) no-repeat center bottom/contain;
		z-index: 2;
		margin-top: calc(611/720 *100%);
	}

	.mv_img {
		margin-top: 0;
	}

	.site_ttl {
		width: calc(350 / 720 * 100%);
		margin: calc(624 / 720 * 100%) auto 0;
	}

	.mv_onair {
		width: calc(437 / 720 * 100%);
		margin: 0 auto calc(28 / 720 * 100%);
	}
}

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

/* --------------------------------------
* * official
-------------------------------------- */
.official {
	background-color: #6a0404;
}
.official .inner {
	padding: calc(40/750 *100%) 0;
}

.official_link a {
	width: calc(630 / 750 * 100%);
	margin: 0 auto;
}

.official_link img {
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}

@media screen and (min-width: 700px) {
	.official .inner {
		padding: 40px 300px 40px 0;
	}

	.official_link a {
		width: calc(400 / 720 * 100%);
	}
	.official_link a:hover {
		opacity: .5;
	}

	.official_link a:hover img:nth-of-type(2) {
		opacity: 0;
	}
}
@media screen and (min-width: 1040px) {
}
/* =====================================================================
*    intro
* =================================================================== */
.intro {
	background: url(../images/bg_pattern.jpg) repeat center / calc(188/750 *100%) auto;
}

.intro .inner {
	padding: calc(50/750 *100%) 0 calc(150/750 *100%);
}

.intro .sec_ttl {
}

.intro_box {
	width: calc(606 / 750 * 100%);
	margin: 0 auto;
	z-index: 3;
}
.intro_box picture {
	display: block;
}

.intro_box::before,
.intro_box::after,
.intro_box picture::before,
.intro_box picture::after {
	content: '';
	position: absolute;

	width: calc(126 / 750 * 100%);
	padding-top: calc(126 / 750 * 100%);
	background: url(../images/bg_frame.png) no-repeat center /contain;
	z-index: 1;
}
.intro_box::before {
	top: 0;
	left: 0;
	margin-top: calc(-80/606 *100%);
	margin-left: calc(-60/606 *100%);
}
.intro_box::after {
	top: 0;
	right: 0;
	margin-top: calc(-80/606 *100%);
	margin-right: calc(-60/606 *100%);
	transform: scale(-1, 1);
}
.intro_box picture::before {
	bottom: 0;
	left: 0;
	margin-bottom: calc(-80/606 *100%);
	margin-left: calc(-60/606 *100%);
	transform: scale(1, -1);
}
.intro_box picture::after {
	bottom: 0;
	right: 0;
	margin-bottom: calc(-80/606 *100%);
	margin-right: calc(-60/606 *100%);
	transform: scale(-1, -1);
}

@media screen and (min-width: 700px) {
	.intro {
		background-size: 94px auto;
	}
	.intro .inner {
		padding: 80px 300px 112px 0;
	}

	.intro .sec_ttl {
		padding-bottom: 0;
		margin-bottom: calc(124/740 *100%);
	}

	.intro_box {
		width: calc(710 / 740 * 100%);
		margin: 0 auto 0 0;
	}
	.intro_box img {
		width: calc(562/720 *100%);
		margin: 0 auto;
	}
	.intro_box::before,
	.intro_box::after {
		content: '';
		position: absolute;
		width: calc(126 / 710 * 100%);
		padding-top: calc(126 / 710 * 100%);
	}

	.intro_box picture::before,
	.intro_box picture::after {
		content: '';
		position: absolute;
		width: calc(126 / 710 * 100%);
		padding-top: calc(126 / 710 * 100%);
	}
	.intro_box::before {
		margin-top: calc(-74/710 *100%);
		margin-left: 0;
	}
	.intro_box::after {
		margin-top: calc(-74/710 *100%);
		margin-right: 0;
	}
	.intro_box picture::before {
		margin-bottom: calc(-74/710 *100%);
		margin-left: 0;
	}
	.intro_box picture::after {
		margin-bottom: calc(-74/710 *100%);
		margin-right: 0;
	}
}

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

/* =====================================================================
*    cast
* =================================================================== */
.cast {
	background: url(../images/bg_crack1.png) no-repeat right bottom / calc(323/750 *100%) auto #6a0404;
}
.cast .inner {
	padding: calc(50/750 *100%) 0 calc(120/750 *100%);
}

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

.cast_box {
	width: calc(700 / 750 * 100%);
	margin: 0 auto;
}
.cast_box ul {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.cast_box ul li {
	width: 50%;
	margin-bottom: calc(40/350 * 100%);
	padding: 0 calc(10/350 *100%);
}
.cast_box ul li:last-child {
	margin-bottom: 0;
}
.cast_box ul li dl {
	text-align: left;
}
.cast_box ul li dl dt {
	display: inline-block;
	font-size: 2rem;
	background: #a72420;
	padding: 0.1em 0.35em;
	color: #fff;
	margin-bottom: calc(20/350 * 100%);
}
.cast_box ul li dl dd {
	color: #fff;
	letter-spacing: .1em;
}

@media screen and (min-width: 700px) {
	.cast {
		background-size: auto;
	}
	.cast .inner {
		padding: 80px 300px 100px 0;
	}

	.cast .sec_ttl {
		padding-bottom: 0;
	}

	.cast_box {
		width: calc(680/740 * 100%);
		margin: 0 auto;
	}
	.cast_box ul li {
		width: 50%;
		margin-bottom: calc(40/680 * 100%);
	}

	.cast_box ul li dl {
		width: calc(260/340 * 100%);
	}
	.cast_box ul li dl dt {
		font-size: 1.2rem;
		padding: 0.1em 0.35em;
		margin-bottom: calc(12/350 * 100%);
	}
}

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

/* =====================================================================
*    staff
* =================================================================== */
.staff {
	background: url(../images/bg_crack2.png) no-repeat left bottom / calc(947/750 *100%) auto #080808;
}

.staff .inner {
	padding: calc(50/750 *100%) 0 calc(270/750 *100%);
}

.staff .sec_ttl {
	padding-bottom: calc(20 / 750 * 100%);
}

.staff_box {
	width: calc(700 / 750 * 100%);
	margin: 0 auto;
}
.staff_box ul {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.staff_box ul li {
	width: 50%;
	margin-bottom: calc(40/350 * 100%);
	padding: 0 calc(10/350 *100%);
}
.staff_box ul li:last-child {
	margin-bottom: 0;
	width: 100%;
}

.staff_box ul li dl {
	text-align: left;
}
.staff_box ul li dl dt {
	display: inline-block;
	font-size: 2rem;
	background: #a72420;
	padding: 0.1em 0.35em;
	color: #fff;
	margin-bottom: calc(20/350 * 100%);
}
.staff_box ul li dl dd {
	color: #fff;
	letter-spacing: .03em;
}
.small {
	font-size: 1.8rem;
}
.ib {
	display: inline-block;
}

@media screen and (min-width: 700px) {
	.staff {
		background-size: 947px auto;
	}
	.staff .inner {
		padding: 80px 300px 200px 0;
	}
	.staff .sec_ttl {
		padding-bottom: 0;
	}

	.staff_box {
		width: calc(680/740 * 100%);
		margin: 0 auto;
	}
	.staff_box ul li {
		width: 50%;
		padding: 0 calc(10/340*100);
		margin-bottom: calc(40/680 * 100%);
	}

	.staff_box ul li dl {
	}
	.staff_box ul li dl dt {
		font-size: 1.2rem;
		padding: 0.1em 0.35em;
		margin-bottom: calc(12/350 * 100%);
	}
	.staff_box ul li:last-child {
		padding-left: calc(20/680 *100%);
	}
	.small {
		font-size: 1.2rem;
	}
}

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