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

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

.mv::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: calc(467 / 750 * 100%);
	background: url(../images/bg_mv_sp.png) no-repeat center bottom/contain;
	z-index: 1;
	margin-top: calc(1051/750 *100%);
}

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

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

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

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

.official_link {
	width: calc(650 / 750 * 100%);
	padding-top: calc(141/750 *100%);
	margin: 0 auto;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto calc(29 / 750 * 100%);
	z-index: 4;
}

.official_link a {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/btn_official_sp.png) no-repeat center /contain;
}

@media screen and (min-width: 700px) {
	#header {
		background-size: calc(160/1040 *100%) auto;
	}

	.mv {
		background: url(../images/bg_mv_pc.png) no-repeat top center/calc(1920/740 *100%);
	}

	.mv::before {
		display: none;
	}

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

	.mv_img {
		margin-top: 0;
	}

	.site_ttl {
		width: calc(377 / 740 * 100%);
		margin: calc(717/ 740 * 100%) auto 0;
	}

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

	.official_link {
		width: calc(650 / 720 * 100%);
		padding-top: calc(110/720 *100%);
		margin: 0 auto calc(30/ 720 * 100%);
	}

	.official_link a {
		background: url(../images/btn_official_pc_on.png) no-repeat center /contain;
	}

	.official_link a::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url(../images/btn_official_pc_off.png) no-repeat center /contain;
		-webkit-transition: .3s ease;
		transition: .3s ease;
	}

	.official_link a:hover::before {
		-webkit-transition: .3s ease;
		transition: .3s ease;
		opacity: 0;
	}
	.bg_line {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.bg_line span:not(:last-child) {
		display: block;
		background: #3e3d3c;
		height: 2px;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.bg_line span:last-child {
		display: block;
		background: #3e3d3c;
		height: 100%;
		width: 2px;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: calc(-840/1040 *100%);
	}
	.bg_line span:nth-child(1) {
		margin-top: calc(139/1040 *100%);
	}
	.bg_line span:nth-child(2) {
		margin-top: calc(856/1040 *100%);
	}
	.bg_line span:nth-child(3) {
		left: 50%;
		margin-top: calc(1269/1040 *100%);
		margin-left: calc(-312/1040 *100%);
	}
	.bg_line span:last-child {
		margin-left: -840px;
	}
}

@media screen and (min-width: 1040px) {
	#header {
		background-size: 160px auto;
	}
	.mv {
		background-size: 1920px auto;
	}
	.bg_line span:nth-child(1) {
		margin-top: 139px;
	}

	.bg_line span:nth-child(2) {
		margin-top: 856px;
	}

	.bg_line span:nth-child(3) {
		margin-top: 1269px;
		margin-left: -312px;
	}
}

/* =====================================================================
*    intro
* =================================================================== */
.intro {
	background-color: #ef6662;
	padding: calc(100/750 *100%) 0 calc(120/750 *100%);
	overflow: hidden;
}

.intro::before {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/bg_intro_sp.png) no-repeat center top/contain;
	z-index: 3;
	margin: 0;
}

.intro .inner::before,
.intro .inner::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: calc(1400/750 *100vw);
	background: #f39390;
	z-index: 0;
	transform-origin: center;
	transform: rotate(45deg);
}

.intro .inner::before {
	margin: calc(-295/750 *100%) 0 0 calc(129 /750 *100%);
}

.intro .inner::after {
	margin: calc(610/750 *100%) 0 0 calc(343 /750 *100%);
}

.intro .sec_ttl {
	width: calc(510 / 750 * 100%);
	margin: 0 auto calc(60/750 *100%);
	z-index: 3;
}

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

.intro_box picture {
	display: block;
	z-index: 6;
}

.intro_box::before,
.intro_box::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: calc(655 / 695 * 100%);
	padding-top: calc(258 / 695 * 100%);
	z-index: 1;
}

.intro_box::before {
	background: url(../images/img_pic1.jpg) no-repeat center/contain;
	margin: calc(187/695 *100%) 0 0 calc(-227/695 *100%);
}

.intro_box::after {
	background: url(../images/img_pic2.jpg) no-repeat center/contain;
	margin: calc(1058/695 *100%) 0 0 calc(235/695 *100%);
}

@media screen and (min-width: 700px) {
	.intro {
		padding: calc(100/1040 *100%) 0 calc(120/1040 *100%);
	}

	.intro::before {
		background: url(../images/bg_intro_pc.png) no-repeat center top/calc(1920/740 *100%) auto;
	}

	.intro .inner::before,
	.intro .inner::after {
		height: calc(1400/1040 *100%);
	}

	.intro .inner::before {
		margin: calc(-345/1040 *100%) 0 0 calc(40 /1040 *100%);
	}

	.intro .inner::after {
		margin: calc(222/1040 *100%) 0 0 calc(726 /1040 *100%);
	}

	.intro .sec_ttl {
		width: calc(394/ 740 * 100%);
		margin: 0 auto calc(60/740 *100%);
	}

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

	.intro_box::before,
	.intro_box::after {
		width: calc(655 / 725 * 100%);
		padding-top: calc(258 / 725 * 100%);
	}

	.intro_box::before {
		margin: calc(258/725 *100%) 0 0 calc(-538/725 *100%);
	}

	.intro_box::after {
		margin: calc(582/725 *100%) 0 0 calc(462/725 *100%);
	}
}

@media screen and (min-width: 1040px) {
	.intro {
		padding: 100px 0 120px;
	}

	.intro::before {
		background-size: 1920px auto;
	}
}

/* =====================================================================
*    cast
* =================================================================== */
.cast {
	padding: calc(100/750 *100%) 0 0;
}

.cast::before {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	padding-top: calc(1181/750 *100%);
	background: url(../images/bg_cast_sp.png) no-repeat center top/cover;
	z-index: 0;
	margin: 0;
}

.cast .sec_ttl {
	width: calc(406 / 750 * 100%);
	margin: 0 auto calc(60/750 *100%);
}

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

@media screen and (min-width: 700px) {
	.cast {
		padding: calc(100/740 *100%) 0 0;
	}

	.cast::before {
		padding-top: calc(905/740 *100%);
		background: url(../images/bg_cast_pc.png) no-repeat center top/calc(1920/740 *100%) auto;
	}

	.cast .sec_ttl {
		width: calc(314 / 740 * 100%);
		margin: 0 auto calc(60/740 *100%);
	}

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

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

	.cast::before {
		padding-top: 905px;
		background-size: 1920px;
	}

	.cast .sec_ttl {
		width: calc(314 / 740 * 100%);
		margin: 0 auto calc(60/740 *100%);
	}

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

/* =====================================================================
*    staff
* =================================================================== */
.staff {
	padding: calc(130/750 *100%) 0 calc(240/750 *100%);
	overflow: hidden;
}

.staff::before {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	padding-top: calc(1181/750 *100%);
	background: url(../images/bg_cast_sp.png) no-repeat center top/contain;
	z-index: 0;
	margin-top: calc(567/750 *100%);
}

.staff .sec_ttl {
	width: calc(406 / 750 * 100%);
	margin: 0 auto calc(60/750 *100%);
}

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

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

	.staff::before {
		padding-top: calc(905/740 *100%);
		background: url(../images/bg_cast_pc.png) no-repeat center top/calc(1920/740 *100%) auto;
		margin-top: calc(470/740 *100%);
	}

	.staff .sec_ttl {
		width: calc(314 / 740 * 100%);
		margin: 0 auto calc(60/740 *100%);
	}

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

@media screen and (min-width: 1040px) {
	.staff {
		padding: 146px 0 182px;
	}

	.staff::before {
		padding-top: 905px;
		background-size: 1920px;
		margin-top: 470px;
	}

	.staff .sec_ttl {
		width: calc(314 / 740 * 100%);
		margin: 0 auto calc(60/740 *100%);
	}

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