@charset "utf-8";
@import "./vars.css";
@import "./reset.css";
@import "./fonts.css";
@import "./icon.css";
@import "./form.css?";
@import "./parts.css";
body {
	font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
	font-size: 16px;
	line-height: 1.6;
	color: var(--main-body-color);
}
.img_box {
	position: relative;
	overflow: hidden;
	float: none;
	clear: both;
	font-size: 0;
	line-height: 0;
	margin: 0 0 40px;
}
.img_box img {
	width: 100%;
}
.text-right {
	text-align: right;
	font-size: 12px;
}
.sp {
	display: none !important;
}
/* =Structure
-------------------------------------------------------------- */
/* The main theme structure */
#wrapper {
	position: relative;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	background: #000;
}
#wrapper::before {
	position: fixed;
	content: "";
	display: block;
	left: 0;
	right: 0;
	top: 0;
	background: url(../img/sp/bg.jpg) center top /cover no-repeat;
	height: 100vh;
	opacity: 0.4;
}
@media screen and (min-width:641px) {
	#wrapper::before {
		background: url(../img/bg.jpg) center top /cover no-repeat;
	}
}
.inside {
	margin: 0 auto;
	width: 980px;
	position: relative;
}
.inside::after {
	overflow: hidden;
	float: none;
	clear: both;
	content: "";
	display: block;
	height: 0;
}
/* =Layout
-------------------------------------------------------------- */
/* =#header
-------------------------------------------------------------- */
#header {
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
	background: #FFF;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#header {
	overflow: hidden;
	z-index: 999;
}
#header .inside {
	padding: 12px 0;
	width: 980px;
}
#header h1 {
	width: auto;
	text-align: center;
	line-height: 0;
}
#header h1 img {
	width: auto;
	height: 26px;
}
/* =#main
-------------------------------------------------------------- */
#main {
	position: relative;
	float: none;
	clear: both;
	padding: 0px 0;
	margin: 0 auto 0;
}
#main.below {}
/* =#footer
-------------------------------------------------------------- */
#footer {
	float: none;
	clear: both;
	width: 100%;
}
#footer {
	position: absolute;
	bottom: 0;
	padding: 10px 0;
	z-index: 9999;
	background: #000;
}
#footer p {
	text-align: center;
	margin: 0;
	font-size: 10px;
	color: #fff;
}
/* =#container
-------------------------------------------------------------- */
#container {
	float: none;
	clear: both;
	width: 100%;
	overflow: hidden;
	margin: 0 auto 0;
	padding: 50px 0 0;
}
/* =#content
-------------------------------------------------------------- */
#content {
	float: none;
	clear: both;
	width: 100%;
}
/* =#visual
-------------------------------------------------------------- */
#visual {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	height: 763px;
}
@media screen and (min-width:641px) {
	#visual {
		background: url("../img/visual.jpg") center top / cover no-repeat;
	}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	#visual {
		background: url("../img/x2/visual.jpg") center top / cover no-repeat;
	}
}
#visual .img, #visual .info {
	flex: 1;
	background: rgba(0, 0, 0, 0.85);
}
#visual img {
	display: block;
	width: 100%;
}
/* =sections
-------------------------------------------------------------- */
#main section {
	padding: 40px 0;
	position: relative;
}
#main section .inside {
	position: relative;
	z-index: 1;
}
#main.below section#contents {
	padding: 120px 0;
}
#main section h2 {
	font-size: 30px;
	font-weight: 900;
	margin: 0 -1em 60px;
	text-align: center;
	line-height: 1.5;
	letter-spacing: 0.6em;
	padding: 10px 0px;
	color: var(--main-base-color);
	position: relative;
	overflow: visible;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	text-indent: 0.6em;
}
#main section h2::before, #main section h2::after {
	content: "";
	width: 100%;
	margin: 0 1em;
	height: 10px;
	background: var(--main-base-color);
}
#main section h2 span {
	position: relative;
	z-index: 10;
}
.btn a {
	width: 600px;
	display: block;
	margin: 40px auto;
}
.btn a img {
	display: block;
}
/*============================
#about
============================*/
img {
	width: auto;
	height: auto;
}
#about {}
#about .inside {
	text-align: center;
}
#about .inside .emblem_01 {
	margin: 0 0 40px;
}
#about .inside .emblem_01 img {}
#about .inside .about {
	margin: 0 0 40px;
}
#about .inside .about img {}
#about .inside .specials {}
#about .inside .specials ul {
	display: flex;
	margin: 0 -10px;
}
#about .inside .specials ul li {
	margin: 0 10px;
}
#about .inside .specials ul li img {}
#about .inside .contents {
	margin: 0 0 40px;
}
#about .inside .contents img {}
@media screen and (max-width:640px) {
	a:active, a:hover {
		filter: alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
	}
	a:hover img {
		filter: alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
	}
	/* =Structure
-------------------------------------------------------------- */
	/* The main theme structure */
	.inside {
		width: auto;
		margin: 0 3%;
	}
	body {
		font-size: 4.5vw;
		line-height: 1.6;
	}
	.pc {
		display: none !important;
	}
	.sp {
		display: block !important;
	}
	br.sp {
		display: inline !important;
	}
	img, picture {
		max-width: 100%;
		width: auto;
		height: auto;
	}
	#wrapper {}
	#wrapper::before {
		bottom: auto;
		height: 100vh;
	}
	#header {}
	#visual {
		height: auto;
	}
	#main {
		width: auto;
		padding: 0 0;
		margin: 0;
	}
	#container {
		width: auto;
	}
	#main.below {}
	#footer {
		float: none;
		clear: both;
		width: 100%;
	}
	/* =#header
-------------------------------------------------------------- */
	#header {
		padding: 0;
		position: relative;
		top: auto;
		left: auto;
	}
	#header .inside {
		padding: 2.56410256410256vw 0;
		width: auto;
	}
	#header h1 {
		width: 100%;
	}
	#header h1 img {
		width: auto;
		height: 5.12820512820513vw;
	}
	/* =#footer
-------------------------------------------------------------- */
	#footer {
		padding: 6% 0;
		position: relative;
		bottom: auto;
		left: auto;
	}
	#footer p {
		font-size: 3vw;
		padding: 0;
		line-height: 1;
	}
	/* =#content
-------------------------------------------------------------- */
	#content {
		float: none;
		clear: both;
		width: 100%;
	}
	#container {
		padding: 0;
	}
	/* =#visual
-------------------------------------------------------------- */
	#visual {
		padding: 0;
		flex-direction: column-reverse;
	}
	#visual .img, #visual .info {}
	#visual img {}
	/* =sections
-------------------------------------------------------------- */
	#main section {
		padding: 10.128205vw 0;
		overflow: hidden;
		position: relative;
		z-index: 10;
	}
	#main section .inside {
		position: relative;
		z-index: 10;
	}
	#main section::before {
		width: 100%;
		bottom: auto;
		top: 0;
		left: 0;
		left: auto;
		height: 100%;
		z-index: -1;
		position: absolute;
	}
	#main.below section#contents {
		/*background: rgba(0, 0, 0, 0.75);*/
		padding: 100px 0;
		position: relative;
	}
	#main section h2 {
		font-size: 5.12820512820513vw;
		margin: 0 -1em 5.12820512820513vw;
		letter-spacing: 0.25em;
		padding: 3.84615384615385vw 0;
	}
	#main #span p.center {
		font-size: 3.58974358974359vw;
	}
	#span .img img {
		width: auto;
		margin: 0 auto;
		display: block;
	}
	.btn a {
		width: auto;
		display: block;
		margin: 5.12820512820513vw auto;
	}
	.btn a img {
		display: block;
	}
#about .inside .emblem_01 {
		margin: 0 0 6.25vw;
}
	#about .inside .about {
		margin: 0 0 6.25vw;
	}
	#about .inside .about img {}
	#about .inside .specials {}
	#about .inside .specials ul {
		display: block;
		margin: 0vw;
	}
	#about .inside .specials ul li {
		margin: 0 0 3.125vw;
	}
	#about .inside .specials ul li:last-child {
		margin: 0;
	}
	#about .inside .specials ul li img {}
	#about .inside .contents {
		margin: 0 0 6.25vw;
	}
	#about .inside .contents img {}
}