body {
	font-family: dnp-shuei-gothic-gin-std, sans-serif;
	font-weight: 500;
	color: #000300;
}
.bg {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/img_bg.png);
	background-size: cover;
	z-index: -5;
}
.sp {
	display: none;
}
.container {
	max-width: 1150px;
	margin: auto;
	position: relative;
}
.wrapper {
	padding: 0 24px;
}
.wrapper_bottom {
	overflow: hidden;
}
.section {
	margin-top: 120px;
}
.h2_en {
	font-family: 'CabinetGrotesk';
	font-size: 22px;
	color: #B1883A;
	white-space: nowrap;
}

.modal_bg {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(10px);
	z-index: 9999;
}
.modal_bg.active {
	display: block;
}
.modal {
	width: 95%;
	max-width: 1200px;
	position: fixed;
	top: 50%;
	left: 50%;
	visibility: hidden;
	z-index: -99;
	display: grid;
	place-items: center;
	transform: scale(1.1) translate(-50%,-50%);
	transition: .4s;
}
.modal.active {
	transform: scale(1) translate(-50%,-50%);
	z-index: 99999;
	visibility: visible;
}
.modal_content {
	width: 90%;
	max-width: 1200px;
	position: relative;
	
	transition: .4s;
	display: none;
}
.modal_content.active {
	display: block;
}
.modal_close_btn {
	font-size: 30px;
	color: #fff;
	position: absolute;
	top: 0;
	left: 100%;
	width: 50px;
	height: 50px;
	background-color: #000300;
	display: grid;
	place-items: center;
}
.modal_content video,
.modal_content > iframe {
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 16/9;
}
@media (max-width: 767px) {
	html {
		font-size: 2.544529262086514vw;
	}
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	.wrapper {
		padding: 0 2.4rem;
	}
	.section {
		margin-top: 10rem;
	}
	.h2_en {
		font-size: 2rem;
	}
	.modal_close_btn {
		font-size: 2rem;
		top: inherit;
		bottom: 100%;
		left: inherit;
		right: 0;
		width: 3rem;
		height: 3rem;
	}
}