@charset "utf-8";

html{
	font-size: 10px;
}
:root{
	--font_ja: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;;
	--font_en: 'Overpass Mono', monospace;
	--fc_main: #444;
	--fc_sub: #999;
	--bg_footer: #666;
	--bg_menu: #ccc;
	--cont_w: 128rem;
	--cont_m: calc(50% - 64rem);
	--cont_bottom: 12rem;
}
body{
	color: var(--fc_main);
	font-family: var(--font_ja);
}

.hamburger{
	display: none;
}
header{
	height: 10rem;
	padding: 0 4.5rem;
	border-bottom: 1px solid var(--bg_menu);
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}
header h1 a{
	font-size: 3.754rem;
	font-family: var(--font_en);
	font-weight: 600;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-feature-settings: "palt";
}
header h1 a img{
	width: 14rem;
}
header h1 small{
	font-size: 1rem;
	font-family: var(--font_ja);
	letter-spacing: .1em;
}
header .pc_menu{
	width: max-content;
}
.pc_menu{
	display: flex;
}
.sp_nav{
	display: none;
}
.pc_menu > li > a{
	padding: 0 3.6rem;
	height: 10rem;
	font-size: 1.8rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	position: relative;
}
.pc_menu > li > a small{
	margin: 0 0 .5em;
	font-size: 1rem;
	font-family: var(--font_en);
	color: var(--fc_sub);
	font-weight: 600;
}
.pc_menu > li > a:hover::before{
	content: '';
	width: calc(100% - 3.6rem);
	height: .4rem;
	background: var(--bg_menu);
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.pc_menu > li > a + section{
	display: none;
}

.pc_menu > li:nth-child(1):hover a + section{
	display: block;
}
.pc_menu > li + li a::after{
	content: '';
	width: 1px;
	height: 3.4rem;
	background: var(--bg_menu);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}
.menu_list{
	display: flex;
	gap: 3.6rem;
}
.menu_list li a{
	gap: .5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--fc_sub);
	font-family: var(--font_en);
	font-weight: 700;
	position: relative;
}
.menu_list li a img{
	width: 3.2rem;
}
.pc_menu > li section{
	width: 100%;
	display: block;
	background: #fff;
	position: absolute;
	top: 10rem;
	left: 0;
	z-index: 10;
}
.pc_menu > li section ul{
	width: 93rem;
	margin: auto;
	padding: 3rem 0;
	display: flex;
	justify-content: space-between;
}
.pc_menu > li section li{
	width: 30rem;
}
.pc_menu > li section strong{
	width: 100%;
	height: 8rem;
	border: 1px solid var(--bg_menu);
	display: flex;
	justify-content: center;
	align-items: center;
}
.pc_menu > li section strong img{
	height: 3.5rem;
}
.pc_menu > li section div{
	padding: 1.7rem 1rem;
	display: flex;
	flex-wrap: wrap;
}
.pc_menu > li section div a{
	width: 50%;
	font-size: 1.2rem;
	line-height: 2.5em;
	color: var(--fc_sub);
	font-weight: bold;
	display: block;
	font-feature-settings: "palt";
}
.pc_search > input{
	display: none;
}
#header_form:checked + label a{
	display: none;
}
#header_form:checked + label + form{
	display: block;
}
.pc_search form{
	display: none;
	position: relative;
}
.pc_search form .txt{
	height: 5rem;
	font-size: 1.8rem;
	padding: 2rem;
	font-weight: bold;
	color: var(--fc_sub);
	background: #f2f2f2;
}
.pc_search form .search{
	width: 3rem;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 1rem;
}

.tel,.form{
	width: 32rem;
	height: 17.6rem;
}
.tel{
	margin: 0 0 0 auto;
	padding: 0 3rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.tel dl{
	margin: 0 0 2rem;
	gap: 2rem 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.tel dt{
	font-size: 2.2rem;
	margin: .5rem 1rem 0 0;
	font-family: var(--font_en);
	font-weight: 600;
}
.tel dd{
	font-size: 2.7rem;
	font-weight: bold;
}
.tel p{
	font-size: 1.7rem;
	text-align: center;
	font-feature-settings: "palt";
	font-weight: 500;
}
.form{
	padding: 3rem;
	margin: 0 0 0 3rem;
	position: relative;
}
.form::before{
	content: '';
	width: 4rem;
	height: 2px;
	background: #fff;
	position: absolute;
	bottom: 1.6rem;
	right: 2rem;
}
.form::after{
	content: '';
	width: 1.2rem;
	height: 2px;
	background: #fff;
	position: absolute;
	bottom: 2rem;
	right: 2rem;
	transform: rotate(32deg);
}
.form strong{
	margin: 0 0 1rem;
	font-size: 2.6rem;
	text-align: center;
	line-height: 4.2rem;
	font-weight: bold;
	display: block;
}
.form span{
	font-size: 2.8rem;
	line-height: 1.14em;
	font-weight: bold;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	letter-spacing: .06em;
}
.form span::before{
	content: '';
	width: 6.9rem;
	aspect-ratio: 69/57;
	display: block;
}

.btn{
	color: var(--fc_sub);
	border: 1px solid var(--fc_sub);
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	font-weight: bold;
	transition: .2s;
}
.btn:hover{
	color: #fff;
	background: var(--fc_sub);
}
.btn::before,.btn::after{
	content: '';
	height: 1px;
	background: #a7a7a7;
	position: absolute;
	right: 1.2rem;
	transition: .2s;
}
.btn::before{
	width: 2rem;
	top: 55%;
	transform: translateY(-50%);
}
.btn::after{
	width: .5em;
	top: calc(55% - 3px);
	transform: translateY(-50%) rotate(45deg);
}
.btn:hover::before,.btn:hover::after{
	background: #fff;
}

.guide{
	padding: 8rem var(--cont_m);
	background: #f0f0f0;
}
.guide > ul{
	display: flex;
	justify-content: space-between;
}
.guide > ul > li{
	width: 63rem;
}

.guide strong{
	font-size: 1.8rem;
	margin: 0 0 2.5rem;
	padding: 2rem;
	text-indent: 3rem;
	background: #fff;
	font-weight: bold;
	position: relative;
	display: block;
}
.guide * + strong{
	margin: 2.5rem 0;
}
.guide strong::before{
	content: '';
	width: 2rem;
	aspect-ratio: 2/1;
	background: url(../images/icon04.png) no-repeat center/contain;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 2rem;
}
.guide p,.guide em,.guide dl{
	padding: 0 2rem;
	font-size: 1.2rem;
	line-height: 1.6em;
	font-weight: bold;
	color: #555;
}
.guide em{
	margin: 0 0 1.6em;
	display: block;
}
.guide dl dt,.guide dl dd{
	line-height: 1.6em;
}
.guide dl dd{
	margin: 0 0 1.3em;
}
.toggle_btn{
	cursor: unset;
}

footer{
	padding: 8rem 0 0;
	background: var(--bg_footer);
	display: flex;
	flex-wrap: wrap;
}
footer .info{
	padding: 0 0 8rem var(--cont_m);
}
footer .info > a{
	margin: 0 0 3rem;
	display: block;
}
footer .info > a img{
	width: 14rem;
}
footer .info dl{
	margin: 0 0 2.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}
footer .info dl dt{
	font-size: 1.2rem;
	background: var(--bg_footer);
	padding: .4rem .8rem;
	background: #fff;
	border-radius: 1.1rem;
	font-weight: bold;
}
footer .info dl dd{
	font-size: 1.2rem;
	color: #fff;
}
footer .info ul{
	width: 36.7rem;
	display: flex;
	justify-content: space-between;
}
footer .info li{
	width: 17.4rem;
	height: 5.8rem;
}
footer .info li a{
	width: 100%;
	height: 100%;
	font-size: 1.4rem;
	font-weight: bold;
	border: 1px solid #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	padding: 0 2rem 0 0;
}
footer .info li a:hover{
	background: #fff;
	color: var(--bg_footer);
}
footer .info li a:hover::before,footer .info li a:hover::after{
	background: var(--bg_footer);
}
footer .info li .btn::before,footer .info li .btn::after{
	background: #fff;
}
footer > ul{
	margin: 0 0 0 auto;
	padding: 0 var(--cont_m) 0 0;
	display: flex;
}
footer .tel{
	border: 1px solid #fff;
}
footer .tel{
	color: #fff;
}
footer > ul li:nth-child(2){
	width: 32rem;
	height: 17.6rem;
}
footer .form{
	background: #fff;
	display: block;
}
footer .form strong{
	border: 2px solid var(--bg_footer);
	border-radius: .5rem;
	color: var(--bg_footer);
}
footer .form span::before{
	background: url(../images/contact_gray.png) no-repeat center/contain;
}
footer .form::before,footer .form::after{
	background: var(--bg_footer);
}
footer > small{
	font-family: var(--font_en);
	font-weight: 500;
	width: 100%;
	height: 10rem;
	font-size: 1.2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
}

@media screen and (max-width:1400px) {
	html{
		font-size: .7vw;
	}
	.pc_menu > li > a{
		padding: 0 2rem;
	}
}

@media screen and (max-width:769px) {
	html{
		font-size: 1.3333vw;
	}
	:root{
		--cont_w: 92%;
		--cont_m: 4%;
		--cont_bottom: 10rem;
	}

	header{
		height: 13rem;
	}
	
	header .pc_menu{
		display: none;
	}
	.pc_search{
		display: none;
	}
	header h1 a img{
		width: 20rem;
	}
	.menu_list{
		margin: 0 0 0 auto;
	}
	.menu_list li a img{
		width: 4rem;
	}
	.menu_list li a{
		font-size: 2rem;
	}
	.hamburger{
		width: 5rem;
		height: 4rem;
		margin: 0 0 0 4rem;
		position: relative;
	}
	.show{
		display: block;
	}
	.hamburger::before{
		content: '';
		width: 100%;
		height: 2px;
		background: var(--fc_sub);
		position: absolute;
		top: 0;
		left: 0;
		transition: .2s;
	}
	.hamburger::after{
		content: '';
		width: 100%;
		height: 2px;
		background: var(--fc_sub);
		position: absolute;
		bottom: 0;
		left: 0;
		transition: .2s;
	}
	.hamburger span{
		width: 100%;
		height: 2px;
		background: var(--fc_sub);
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
		color: rgba(0, 0, 0, 0);
	}
	.hamburger.active span{
		display: none;
	}
	.hamburger.active::before{
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
	}
	.hamburger.active::after{
		bottom: 50%;
		transform: translateY(50%) rotate(-45deg);
	}
	.sp_nav{
		width: 100%;
		padding: 5rem 4% 10rem;
		height: calc(100vh - 13rem);
		background: #fff;
		/* display: flex; */
		flex-wrap: wrap;
		justify-content: space-between;
		position: absolute;
		top: 13rem;
		z-index: 50;
		overflow:scroll;
	}
	.sp_nav_show{
		display: flex;
	}
	.nav_brand{
		margin: 0 0 7rem;
		display: flex;
		flex-direction: column;
		gap: 7rem;
	}
	.nav_brand strong{
		width: 100%;
		height: 18rem;
		margin: 0 0 4rem;
		border: 1px solid #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.nav_brand div{
		display: flex;
		flex-wrap: wrap;
		gap: 5rem 0;
	}
	.nav_brand div a{
		width: 50%;
		font-size: 2.6rem;
		color: var(--fc_sub);
		text-indent: 2rem;
		font-weight: bold;
		display: block;
		font-feature-settings: "palt";
	}
	.sp_nav form{
		width: 100%;
		margin: 0 0 8rem;
		position: relative;
	}
	.sp_nav form .txt{
		width: 100%;
		height: 12rem;
		background: #f2f2f2;
		padding: 0 3rem;
		font-size: 3rem;
		color: var(--fc_sub);
		font-weight: bold;
	}
	.sp_nav form .search{
		width: 5rem;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 3rem;
	}
	.nav_other{
		width: 100%;
		margin: 0 0 8rem;
		display: flex;
		flex-wrap: wrap;
		gap: 5rem 0;
	}
	.nav_other li{
		width: 50%;
	}
	.nav_other li a{
		font-size: 2.6rem;
		color: var(--fc_sub);
		text-indent: 2rem;
		font-weight: bold;
		display: block;
		font-feature-settings: "palt";
	}
	.sp_nav .tel{
		width: 33rem;
		margin: 0;
		border: 1px solid var(--fc_sub);
	}
	.sp_nav .form{
		width: 33rem;
		margin: 0;
		display: block;
		background: #666;
	}
	.form strong{
		color: #fff;
		border: 1px solid #fff;
		border-radius: .5rem;
	}
	.form span{
		color: #fff;
	}
	.form span::before{
		background: url(../images/contact.png) no-repeat center/contain;
	}
	.guide > ul{
		display: block;
	}
	.guide > ul > li{
		width: 100%;
	}
	.guide > ul > li + li{
		border-top: 1px solid #f3f3f3;
	}
	.guide strong{
		margin: 0;
		padding: 3rem 2rem;
		font-size: 2.4rem;
		text-indent: 3.6rem;
	}
	.guide strong::before{
		width: 3rem;
	}
	.guide strong span::before{
		content: '';
		width: 3rem;
		height: 1px;
		background: var(--bg_footer);
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 2rem;
	}
	.guide strong span::after{
		content: '';
		height: 3rem;
		width: 1px;
		background: var(--bg_footer);
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 3.4rem;
	}
	.guide strong.active span::after{
		display: none;
	}
	.guide p, .guide em, .guide dl{
		font-size: 2.4rem;
	}
	.guide * + strong{
		margin: 0;
		border-top: 1px solid #f3f3f3;
	}
	.guide > ul div{
		padding: 2rem 0 3rem;
		display: none;
	}
	.toggle{
		display: none;
	}
	.toggle:checked + label + div{
		display: block;
	}
	.toggle_btn{
		cursor: pointer;
	}
	.toggle + .toggle_btn strong{
		border-top: 1px solid #f3f3f3;
	}
	.guide li:first-child .toggle:first-child  + .toggle_btn strong{
		border: none;
	}
	.guide .toggle:checked + label span::after{
		opacity: 0;
	}


	footer{
		padding: 8rem 0 0;
		display: block;
	}
	footer .info{
		padding: 0 4%;
	}
	footer .info > a{
		width: 23rem;
		margin: 0 auto 8rem;
		display: block;
	}
	footer .info > a img{
		width: 100%;
	}
	footer .info dl dt{
		width: 10rem;
		height: 4rem;
		padding: 0;
		border-radius: 2rem;
		font-size: 2rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	footer .info dl dd{
		font-size: 2rem;
	}
	footer .info dl{
		margin: 0 0 4rem;
		justify-content: center;
	}
	footer .info ul{
		width: 100%;
		margin: 0 0 5rem;
	}
	footer .info li{
		width: 33rem;
		height: 9.6rem;
	}
	footer .info li a{
		font-size: 2.4rem;
	}
	.btn::before{
		width: 4rem;
	}
	footer > ul{
		width: 92%;
		margin: 0 4% 10rem;
		padding: 0;
		justify-content: space-between;
	}
	footer .form{
		width: 100%;
		margin: 0;
	}
	footer .form span{
		color: var(--bg_footer);
	}
	footer .tel{
		width: 33rem;
		margin: 0;
	}
	footer > ul li:nth-child(2){
		width: 33rem;
		margin: 0;
	}
	footer > small{
		height: 10rem;
		font-size: 2rem;
	}
}