@CHARSET "UTF-8";

/* HEADER */
#header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	padding:0 15px;
	z-index:10;
	height:60px;
	transition:0.2s;
	background:#1462A2;
	font-family:'Noto Sans CJK JP', sans-serif;}
.headimg .headgrid{
	margin:0 auto;
	width:100%;}
h1.head-logo{
	line-height:0;
	width:180px;
	margin:5px 0 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:#FFF;
	font-weight:bold;
	text-decoration:none;
	font-size:clamp(14px, 1.4vw, 16px);}
.headbtn{
	margin:auto;
	width:100%;
	z-index:2;}
.headbtn a{
	display:flex;
	text-decoration:none;
	justify-content:center;
	align-items:center;
	gap:15px;
	text-align:center;
	background:#d42e2e;
	border-bottom:solid 5px #a72121;
	position:relative;
	font-weight:bold;
	color:#FFF;
	box-sizing:border-box;
	transition:0.3s;}
.headbtn a span{
	font-size:10px;
	display:none;}
.headbtn a:hover{
	border-bottom:solid 2px #a72121;
	transform:translateY(3px);}
.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;
		background-color:rgba(20,98,162,0.9);
		padding:0;}
	#header.sc-color{
		background-color:transparent;}
	#head-logo{
		margin:0 0 0 20px;}
	.headbtn a span{
		display:block;}
	.headblock{
		display:flex;
		justify-content:space-between;
		align-items:center;
		margin:auto;}
	.head_inner{
		padding:0;
		width:auto;}
	h1.head-logo{
		margin:0 0 0 20px;
		width:200px;}
	#menu{
		display:none;}
	#gnavi{
		display:flex;
		justify-content:end;
		width:100%;}
	#gnavi li{
		margin:0 0 0 30px;
		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:#DE3654;
		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;
		border-radius:0 0 0 10px;
		height:85px;
		width:160px;
		margin:-5px 0 0;
		flex-direction:column;
		gap:0;}
}
@media only screen and (max-width:1023px){
	#head-logo{
		display:flex;
		height:60px;
		align-items:center;
		line-height:0;}
	#head-logo img{
		width:150px;}
	.headimg{
		z-index:500;
		width:100%;
		top:0;
		height:60px;}
	#nav-drawer{
		position:fixed;
		display:block;
		width:60px;
		height:60px;
		right:0;
		top:0;
		background:#d42e2e;}
	#nav-open::before{
		content:'Menu';
		left:0;
		right:0;
		bottom:6px;
		margin:auto;
		width:100%;
		position:absolute;
		font-size:12px;
		text-align:center;
		color:#FFF;
		font-weight:bold;}
	.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:2px;
		top:16px;
		left:0;
		right:0;
		margin:auto;
		width:20px;
		border-radius:3px;
		background:#FFF;
		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;
		color:#000;
		padding:15px 0;
		font-size:16px;
		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;
		width:240px;
		height:45px;
		margin:auto;
		background:#d42e2e;}
	.headbtn a:before{
		right:auto;
		top:22px;
		left:30px;}
}


/* FOOTER */
footer{
	background:#1462A2;
	padding:30px 20px;}
.footer-menu{
	text-align:center;
	max-width:250px;
	margin:auto;}
.footer-menu ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;}
.footer-menu li{
	width:calc(50% - 10px);
	display:inline-block;}
.footer-menu li:nth-child(odd){
	margin:10px 10px 0 0;}
.footer-menu li:nth-child(even){
	margin:10px 0 0 10px;}
.footer-menu li:nth-child(1){
	margin:0 10px 0 0;}
.footer-menu li:nth-child(2){
	margin:0 0 0 10px;}
.footer-menu li a{
	color:var(--white);}
.footer-menu li:last-of-type a{
	border:none;
	margin:0;
	padding:0;}
#copyright{
	border-top:1px solid #5679D2;
	padding:20px 0 0;
	margin:30px 0 0;
	text-align:center;
	font-size:12px;
	color:var(--white);}
#copyright a{
	color:var(--white);
	text-decoration:underline;}
#copyright a:hover{
	color:rgba(255, 255, 255, 0.6);}
@media only screen and (min-width:768px){
	footer{
		padding:80px 20px 60px;}
	.footer-menu{
		max-width:none;}
	.footer-menu li,
	.footer-menu li:nth-child(odd),
	.footer-menu li:nth-child(even),
	.footer-menu li:nth-child(1),
	.footer-menu li:nth-child(2){
		width:auto;
		margin:0 15px;}
	#copyright{
		padding:30px 0 0;
		margin:70px 0 0;}
}