@charset "utf-8";
/* -- ul#menu --------------- */
#menu {
	list-style-type: none;
	width: 100%;
	background: #fff;
	z-index: 990;
	display: none;
}
#menu ul { display: block; padding-top: 55px;}
#menu li { width: 50%; display: inline-block;}
#menu li a {
	text-decoration: none;
	display: block;
	padding: 3px 0;
  margin: 0 2px;
}
#menu li a:hover { opacity: 1;}

/* -- div#sp-icon --------------- */
div#sp-icon {
	width : 40px;
	height: 48px;
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 999;
  border: 1px solid var(--blue);
}
div#sp-icon:hover { cursor: pointer;}
div#sp-icon:after {
  content:'menu';
  display: block;
  color: var(--blue);
  font-family: Arial, Helvetica, Verdana, sans-serif;
  font-size: 10px;
  text-align: center;
  position: absolute;
  bottom: 1px;
  left:5px;
}
div#sp-icon span,
div#sp-icon span:before,
div#sp-icon span:after {
	display: inline-block;
	width: 25px;
	height: 2px;
	background: var(--blue);
	position: absolute;
	transition-property: transform;
	transition-duration: 0.3s;
}

div#sp-icon span {
	left: 50%;
	top: 18px;
	transform: translate( -50%, -50% );
}

div#sp-icon span:before {
	content: "";
	transform: translateY( -9px ) rotate( 0deg );
}

div#sp-icon span:after {
	content: "";
	transform: translateY( 9px ) rotate( 0deg );
}

div.sp-open span { background: transparent !important;}
div.sp-open span:before { transform: rotate( 45deg ) !important;}
div.sp-open span:after { transform: rotate( -45deg ) !important;}