@charset "utf-8";
/* CSS Document */

/*-----------------------------------------------
sky   #82D2E6
blue  #4B9BE1
brown #5A3C00
-----------------------------------------------*/

/*-----------------------------------------------
  burger
-----------------------------------------------*/
header .burger {
display: none;
position: relative;
z-index: 2000;
width: 35px;
height: 35px;
border-radius: 2px;
}
header .burger:hover {
cursor: pointer;
}
header .burger:before,
header .burger:after,
header .burger span {
display: block;
width: 100%;
position: absolute;
left: 0;
right: 0;
transition: 0.2s;
}
header .burger:before {
content: "";
top: 10%;
border-bottom: 2px solid #82D2E6;
}
header .burger:after {
content: "";
bottom: 10%;
border-bottom: 2px solid #82D2E6;
}
header .burger span {
border-bottom: 2px solid #82D2E6;
top: calc(50% - 1px);
}
header .burger.on span {
display: none;
}
header .burger.on:before {
top: calc(50% - 1px);
transform: rotate(-45deg);
border-color: #FFF;
}
header .burger.on:after {
bottom: calc(50% - 1px);
transform: rotate(45deg);
border-color: #FFF;
}
@media screen and (max-width: 1024px) {
	header .burger {
	display: block;
	}
}
@media screen and (max-width: 640px) {
	header .burger {
	width: 8vw;
	height: 8vw;
	}
}

/*-----------------------------------------------
  nav
-----------------------------------------------*/
#gnavi {
position: relative;
z-index: 100;
padding: 10px 0;
background-color: #FFF;
}
#gnavi ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#gnavi li:not(:first-child) {
border-left: 1px solid #CCC;
}
#gnavi a {
display: block;
padding: 0 0.65em;
}
#gnavi a:hover {
text-decoration: underline;
}
#gnavi li ul {
display: none;
position: absolute;
padding-top: 0.65em;
background-color: rgba(255,255,255,0.9);
}
#gnavi li li {
width: 15em;
text-align: left;
}
#gnavi li li:not(:first-child) {
border-left: 0;
}
#gnavi li li a {
padding: 0.5em 1em;
border-bottom: 1px solid #CCC;
}
#gnavi li li a:hover {
text-decoration: underline;
}
@media screen and (max-width: 1024px) {
	#gnavi {
	position: fixed;
	z-index: 1000;
	top: 0;
	right: -16em;
	width: 16em;
	height: 100%;
	padding: 68px 0 0 0;
	background-color: rgba(130,210,230,0.925);
	box-shadow: 0 0 4px rgba(0,0,0,0.1);
	transition: 0.4s;
	}
	#gnavi.on {
	right: 0;
	}
	#gnavi > ul {
	display: block;
	height: 100%;
	overflow-y: scroll;
	}
	#gnavi li:not(:first-child) {
	border: 0;
	}
	#gnavi a {
	margin-left: 10px;
	padding: 0.75em;
	color: #FFF;
	background-image: url("../img/common/arw_right_w.png");
	background-position: right 1em center;
	background-repeat: no-repeat;
	background-size: 0.75em;
	border-bottom: 1px solid rgba(255,255,255,0.25);
	}
	#gnavi .down > a {
	background-image: url("../img/common/ico_close.png");
	}
	#gnavi .down > a.open {
	background-image: url("../img/common/ico_open.png");
	}
	#gnavi li:first-child a {
	border-top: 1px solid rgba(255,255,255,0.25);
	}
	#gnavi a:hover {
	text-decoration: none;
	background-color: rgba(0,0,0,0.075);
	}
	#gnavi a.active {
	background-color: rgba(0,0,0,0.075);
	}
	#gnavi li ul {
	position: static;
	margin-left: 10px;
	padding: 0;
	background-color: rgba(255,255,255,0.75);
	}
	#gnavi li li {
	width: 100%;
	}
	#gnavi li li a {
	margin: 0;
	padding: 0.75em;
	color: #000;
	background-image: url("../img/common/arw_right.png");
	background-position: right 1em center;
	background-repeat: no-repeat;
	background-size: 0.75em;
	border-bottom: 1px solid rgba(130,210,230,0.925);
	}
	#gnavi li li a:hover {
	text-decoration: none;
	}
}
@media screen and (max-width: 640px) {
	#gnavi {
	padding-top: 16vw;
	}
	#gnavi a {
	margin-left: 4%;
	padding: 1em 4%;
	}
	#gnavi li ul {
	margin-left: 4%;
	}
	#gnavi li li a {
	margin-left: 0;
	padding: 0.75em 4%;
	}
}