@charset "utf-8";


ul#menu {
	margin: 30px 0 20px 0;
	padding: 0;
	list-style-type : none;
	background : #ffffff;
	opacity : 0.9;
	position : absolute;
	left : 0px;
	top : 0px;
	z-index : 990;
	display : none;
}

ul#menu li {
	text-align : center;
	border: solid 1px #eee;
}

ul#menu li a {
	text-decoration : none;
	display : block;
	padding : 15px 0;
}

ul#menu li a:hover {
	background : #a9a9a9;
	opacity : 0.7;
}


div#sp-icon {
	width : 70px;
	height : 70px;
	position : absolute;
	right : 0px;
	top : 0px;
	z-index : 999;
}

div#sp-icon:hover {
	cursor : pointer;
	opacity : 0.7;
}

div#sp-icon span,
div#sp-icon span:before,
div#sp-icon span:after {
	display : inline-block;
	width : 30px;
	height : 3px;
	background : #000000;
	transition-property : transform;
	transition-duration : 0.3s;
}

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

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

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


div.sp-close span {
	background : transparent !important;
}

div.sp-close span:before {
	transform : rotate( 45deg ) !important;
}

div.sp-close span:after {
	transform : rotate( -45deg ) !important;
}