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

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

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

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

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

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

.official_link a {
	width: calc(630 / 750 * 100%);
	padding-top: calc(160 / 750 * 100%);
	margin: 0 auto calc(40 / 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) {
	#header {
		background: linear-gradient(to top, #080808, #f70b0d);
	}
	.mv {
		background: url(../images/bg_mv_noise.png) repeat-x center bottom/calc(1600 / 1040 * 100%) auto;
	}
	.mv .inner::before,
	.mv .inner::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: calc(969 / 1040 * 100%);
		padding-top: calc(479 / 1040 * 100%);
		background: url(../images/bg_mv_dust.png) no-repeat center/contain;
		z-index: 1;
	}
	.mv .inner::before {
		margin-left: calc(-770 / 1040 * 100%);
	}
	.mv .inner::after {
		margin-left: calc(610 / 1040 * 100%);
		margin-top: calc(-144 / 1040 * 100%);
	}

	.mv_box {
		margin: 0 calc(20 / 740 * 100%) 0 0;
		padding-top: calc(1200 / 740 * 100%);
		z-index: 3;
	}

	.mv_img {
		margin-top: 0;
	}

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

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

	.official_link a {
		width: calc(400 / 720 * 100%);
		padding-top: calc(102 / 720 * 100%);
		margin: 0 auto calc(40 / 720 * 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: #fafafa;
	overflow: hidden;
}

.intro .inner::before,
.intro .inner::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: calc(1195 / 750 * 100%);
	padding-top: calc(1472 / 750 * 100%);
	background: url(../images/bg_smoke.png) no-repeat center/contain;
	opacity: .4;
	z-index: 1;
}

.intro .inner::before {
	margin-top: calc(-473 / 750 * 100%);
	margin-left: calc(-109 / 750 * 100%);
}
.intro .inner::after {
	margin-top: calc(630 / 750 * 100%);
	margin-left: calc(-433 / 750 * 100%);
	transform: scale(-1, -1);
}

.intro .sec_ttl {
	padding-top: calc(80 / 750 * 100%);
}
.intro .sec_ttl::before {
	background: url(../images/img_deco_black.png) no-repeat center/contain;
	width: calc(6 / 750 * 100%);
	padding-top: calc(30 / 750 * 100%);
}

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

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

	.intro .inner::before,
	.intro .inner::after {
		width: calc(1195 / 740 * 100%);
		padding-top: calc(1472 / 740 * 100%);
	}

	.intro .inner::before {
		margin-top: calc(-784 / 740 * 100%);
		margin-left: calc(525 / 740 * 100%);
	}

	.intro .inner::after {
		margin-top: calc(-110 / 740 * 100%);
		margin-left: calc(-596 / 740 * 100%);
		transform: scale(-1, -1);
	}

	.intro .sec_ttl {
		padding-top: calc(100 / 740 * 100%);
	}
	.intro .sec_ttl::before {
		width: calc(3 / 740 * 100%);
		padding-top: calc(15 / 740 * 100%);
	}

	.intro_box {
		width: calc(700 / 740 * 100%);
		margin: 0 auto;
		padding-bottom: calc(122 / 740 * 100%);
	}
	.intro_box::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: calc(1195 / 740 * 100%);
		padding-top: calc(1472 / 740 * 100%);
		background: url(../images/bg_smoke.png) no-repeat center/contain;
		opacity: .4;
		z-index: 1;
		transform: rotate(90deg);
		transform-origin: top left;
		margin-top: calc(-34 / 740 * 100%);
		margin-left: calc(1792 / 740 * 100%);
	}
}

@media screen and (min-width: 1040px) {
	.intro_box {
		width: 100%;
	}
	.intro .inner::before {
		width: 1193px;
		padding-top: 1474px;
		margin: -784px 0 0 525px;
	}
	.intro .inner::after {
		width: 1193px;
		padding-top: 1474px;
		margin: -110px 0 0 -596px;
	}
	.intro_box::before {
		width: 1193px;
		padding-top: 1474px;
		margin: -34px 0 0 1792px;
	}
}

/* =====================================================================
*    staff
* =================================================================== */
.staff {
	background-color: #080808;
}
.staff::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-top: calc(725 / 750 * 100%);
	background: url(../images/bg_cloud1.png) repeat-x bottom center/cover;
}

.staff .sec_ttl {
	padding-top: calc(100 / 750 * 100%);
	color: #fff;
}
.staff .sec_ttl::before {
	background: url(../images/img_deco_white.png) no-repeat center/contain;
	width: calc(6 / 750 * 100%);
	padding-top: calc(30 / 750 * 100%);
}

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

.staff_box ul li dl {
	text-align: center;
	width: calc(320/350 * 100%);
	margin: 0 auto;
	color: #fff;
}
.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 {
	letter-spacing: .1em;
}
.txt_narrow {
	display: inline-block;
	transform: scale(0.8, 1);
	transform-origin: 0 0;
	width: 125%;
}
.ib {
	display: inline-block;
}
.small1 {
	font-size: 1.8rem;
}
.small2 {
	font-size: 2.2rem;
}

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

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

	.staff_box ul li dl {
		width: calc(350/370 * 100%);
	}
	.staff_box ul li dl dt {
		font-size: 1.2rem;
		padding: 0.1em 0.35em;
		margin-bottom: calc(12/350 * 100%);
	}
	.txt_narrow {
		transform: scale(1, 1);
		width: 100%;
	}
	.small1 {
		font-size: 1.2rem;
	}
	.small2 {
		font-size: 1.4rem;
	}
}

@media screen and (min-width: 1040px) {
	.staff::before {
		padding-top: 725px;
	}
	.staff .sec_ttl {
		padding-top: 100px;
	}
}

/* =====================================================================
*    cast
* =================================================================== */
.cast::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-top: calc(725 / 750 * 100%);
	background: url(../images/bg_cloud2.png) repeat-x bottom center/ cover;
}

.cast .sec_ttl {
	padding-top: calc(100 / 750 * 100%);
}
.cast .sec_ttl::before {
	background: url(../images/img_deco_black.png) no-repeat center/contain;
	width: calc(6 / 750 * 100%);
	padding-top: calc(30 / 750 * 100%);
}

.cast_box {
	width: calc(700 / 750 * 100%);
	margin: 0 auto;
	padding-bottom: calc(200 / 750 * 100%);
}
.cast_box ul {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.cast_box ul li {
	width: 50%;
	margin-bottom: calc(40/350 * 100%);
}
.cast_box ul li:last-child,
.cast_box ul li:nth-last-child(2) {
	margin-bottom: 0;
}
.cast_box ul li dl {
	text-align: center;
	width: calc(320/350 * 100%);
	margin: 0 auto;
	color: #080808;
}
.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%);
	transform: scale(1, 1);
}
.cast_box ul li dl dd {
	letter-spacing: .1em;
}

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

	.cast .sec_ttl {
		padding-top: calc(100 / 740 * 100%);
	}
	.cast .sec_ttl::before {
		width: calc(3 / 740 * 100%);
		padding-top: calc(15 / 740 * 100%);
	}

	.cast_box {
		width: calc(680/740 * 100%);
		margin: 0 auto;
		padding-bottom: calc(200 / 740 * 100%);
	}
	.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) {
	.cast::before {
		padding-top: 725px;
	}
	.cast .sec_ttl {
		padding-top: 100px;
	}
}