@CHARSET "UTF-8";
:root{
	--primary-mainn:#187FC3;
	--light-bg:#f9f7f2;
	--border-color:#1A8AD5;
	--text-main:#333;
}

/* HEADER */
#header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	padding:0 15px;
	z-index:10;
	height:60px;
	background:#FFF;
	box-shadow:0 0 20px 0 rgba(0, 0, 0, 0.15);
	font-family:'Noto Sans CJK JP', sans-serif;}
.headimg .headgrid{
	margin:0 auto;
	width:100%;}
h1.head-logo{
	margin:0;}
#nav-input{
	display:none;}
#mainNav{
	display:flex;
	justify-content:inherit;
	align-items:center;
	flex-wrap:wrap;}
#gnavi{
	padding:0;
	margin:0;}
#gnavi li{
	padding:0;
	list-style:none;
	text-align:center;
	margin:0;}
#gnavi li::before{
	display:none;}
#gnavi a{
	transition:0.4s;
	color:#333;
	text-decoration:none;
	font-size:clamp(14px, 1.4vw, 12px);}
.headbtn{
	margin:auto;
	width:100%;
	z-index:2;}
.headbtn a{
	display:block;
	text-decoration:none;
	text-align:center;
	box-sizing:border-box;
	border:1px solid var(--border-color);
	background:var(--primary-mainn);
	transition:0.3s;
	position:relative;
	color:#FFF;}
.headbtn a:hover{
	background:#FFF;
	color:var(--primary-mainn);}
.head_inner{
	margin:0 auto;
	width:100%;}
.sp-logo{
	display:none;}
@media only screen and (min-width:1200px){
	.head_inner{
		margin:0 auto;}
}
@media screen and (min-width:1024px){
	#header{
		align-items:center;
		padding:0;
		height:80px;
		box-sizing:border-box;
		box-shadow:none;
		padding:0 20px;
		box-shadow:0 0 20px 0 rgba(0, 0, 0, 0.15);}
	.headblock{
		display:flex;
		justify-content:space-between;
		align-items:center;
		max-width:1100px;
		margin:auto;}
	.head_inner{
		padding:0;
		width:auto;}
	#menu{
		display:none;}
	#gnavi{
		display:flex;
		justify-content:end;
		width:100%;}
	#gnavi li{
		margin:0 0 0 20px;
		font-size:15px;
		text-align:center;}
	#gnavi li:first-child{
		margin:0;}
	#gnavi a{
		display:block;
		line-height:1.2;
		height:80px;
		line-height:80px;
		letter-spacing:0;}
	#gnavi span{
		color:#a5a5a5;}
	#gnavi ul{
		opacity:0;
		visibility:hidden;
		transition:opacity 0.4s ease, visibility 0.4s ease;}
	#gnavi .menu-ckeck,
	#gnavi .menu-pull{
		display:none;}
	#gnavi li:hover ul{
		opacity:1;
		visibility:visible;
		position:absolute;
		top:80px;
		left:0;
		z-index:500;
		padding:0;}
	#gnavi li li{
		margin:0;
		float:none;
		width:100%;
		text-align:left;
		background:var(--primary-mainn);
		border:none!important;}
	#gnavi li li a{
		padding:16px 10px;
		border:0;
		height:auto;
		color:#fff;
		line-height:normal;
		text-align:center;
		font-size:14px;}
	#gnavi li.current-menu-item li a,
	#gnavi li li a{
		border-bottom-width:1px;}
	#gnavi li li.current-menu-item a,
	#gnavi li li a:hover{
		background:#AD213F;}
	#gnavi > li.has-children{
		position:relative;}
	li.has-children ul.sub-menu{
		position:absolute;
		top:80px;
		width:100%;
		margin-left:-70px;
		width:200px;
		padding:0;
		background:#033AC7;
		-webkit-transition:all .2s ease;
		transition:all .2s ease;}
	li.has-children:hover ul.sub-menu{
		top:50px;
		visibility:visible;
		opacity:1;}
	.headbtn{
		width:auto;
		margin:0 0 0 30px;}
	.headbtn a{
		display:flex;
		justify-content:center;
		align-items:center;
		height:50px;
		width:150px;}
}
@media only screen and (max-width:1023px){
	.headimg{
		z-index:500;
		width:100%;
		top:0;
		height:60px;}
	.head-logo{
		height:60px;
		line-height:60px;
		font-size:30px;
		margin:0;}
	#nav-drawer{
		position:fixed;
		display:block;
		width:60px;
		height:60px;
		right:0;
		top:0;}
	.nav-unshown{
		display:none;}
	#nav-open{
		display:inline-block;
		width:60px;
		height:60px;
		margin:auto;
		vertical-align:middle;
		z-index:99;
		position:relative;}
	#nav-open span,
	#nav-open span:before,
	#nav-open span:after{
		position:absolute;
		height:1px;
		top:24px;
		left:0;
		right:0;
		margin:auto;
		width:20px;
		background:#000;
		display:block;
		content:'';
		cursor:pointer;
		transition:all .4s;}
	#nav-open span:before{
		top:7px;}
	#nav-open span:after{
		top:14px;}
	#nav-input:checked ~ #nav-open span{
		transform:translateY(8px) rotate(-45deg);}
	#nav-input:checked ~ #nav-open span:before{
		opacity:0;}
	#nav-input:checked ~ #nav-open span:after{
		transform:translateY(-16px) rotate(90deg);
		top:16px;}
	#gnavi .menu-pull::before,
	#gnavi .menu-pull::after{
		content:'';
		display:block;
		background:#000;
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		margin:auto;}
	#gnavi .menu-pull:before{
		width:1px;
		height:15px;
		transition:transform .2s ease;}
	#gnavi .menu-pull:after{
		width:15px;
		height:1px;}
	#gnavi .menu-ckeck:checked ~ .menu-pull::before{
		transform:rotate(90deg);}
	#nav-close{
		display:none;
		position:fixed;
		z-index:98;
		top:0;
		left:0;
		width:100%;
		height:100%;
		opacity:0;
		transition:.3s ease-in-out;}
	#mainNav{
		overflow:auto;
		position:fixed;
		align-items:unset;
		top:60px;
		left:0;
		z-index:9999;
		width:100%;
		transition:.3s ease-in-out;
		-webkit-transform:translateX(-105%);
		transform:translateX(-105%);
		overflow:auto;
		scroll-snap-type:y mandatory;
		max-height:100vh;}
	#nav-input:checked~#nav-close{
		display:block;
		opacity:.5;}
	#nav-input:checked~#mainNav{
		-webkit-transform:translateX(0%);
		transform:translateX(0%);
		background:#FFF;}
	#gnavi{
		padding:0;
		margin:0;}
	#gnavi .menu-ckeck{
		position:absolute;
		opacity:0;}
	#gnavi .menu-pull{
		font-weight:bold;
		line-height:1.6;
		position:absolute;
		display:block;
		margin:auto;
		top:12px;
		right:20px;
		height:40px;
		width:40px;
		cursor:pointer;
		z-index:2;}
	#gnavi li{
		position:relative;}
	#gnavi li a{
		position:relative;
		padding:13px 0;
		text-align:left;
		display:block;
		width:calc(100% - 40px);
		margin:auto;
		box-sizing:border-box;
		border-bottom:1px solid #ccc;}
	#gnavi li.drawer-nav-item.has-children a:before{
		display:none;}
	#gnavi .sub-menu{
		height:0;
		transition:all 0.5s ease;
		opacity:0;
		position:relative;
		z-index:-1;
		padding:0;}
	#gnavi .sub-menu li{
		opacity:0;
		height:0;
		width:calc(100% - 40px);
		margin:auto;
		background:#000;}
	#gnavi .sub-menu li a{
		border-bottom:1px solid #FFF;
		color:#FFF;}
	#gnavi .sub-menu li a{
		position:relative;}
	#gnavi .menu-ckeck:checked ~ .sub-menu{
		height:auto;
		opacity:1;
		z-index:1;}
	#gnavi .menu-ckeck:checked ~ .sub-menu li{
		height:auto;
		opacity:1;}
	#gnavi li li:last-child a{
		border-bottom:none}
	.headbtn{
		padding:20px}
	.headbtn a{
		text-align:center;
		align-items:center;
		justify-content:center;
		width:240px;
		height:45px;
		display:flex;
		margin:auto;
		background:var(--primary-mainn);}
	.headbtn a:before{
		right:auto;
		top:22px;
		left:30px;}
}

/* FOOTER */
#footer{
	padding:22px 20px;
	border-top:0.5px solid #CCC;
	font-size:11px;
	background:#FFF;}
.footer-inner{
	max-width:1100px;
	margin:0 auto;}
.footer-copy{
	margin:0;
	text-align:center;}
.footer-link{
	list-style:none;
	padding:0;
	display:flex;
	justify-content:center;
	gap:10px;
	margin:0 auto 20px;}
.footer-link li{
	margin:0 0 5px;}
.footer-link li:last-child{
	margin:0;}
.footer-link li a{
	font-size:12px;
	color:#333;}
@media only screen and (min-width:1024px){
	#footer{
		display:flex;
		justify-content:space-between;
		align-items:center;}
	.footer-inner{
		display:flex;
		flex-direction:row-reverse;
		justify-content:space-between;
		width:100%;
		gap:20px;}
	.footer-copy{
		text-align:left;}
	.footer-link{
		gap:20px;
		margin:0;}
}