#web-header {position:fixed; top:0; left:0; width:100%; z-index:6; background:rgba(255,255,255,0.8); height:75px;}
#web-header h1 {position:absolute; left:20px; top:5px; }
#web-header ul {width:1200px; margin:0 auto; text-align:center;}
#web-header ul li {display:inline-block; margin-top:15px;}
#web-header ul li a {color:#000; margin:0 20px; font-size:17px; text-decoration:none; font-weight:400;}


#mobile-header {display:none;}


/* navi logo ------------------------------------------------------------------------ */
#nav-open {
	width:32px;
	height:20px;
	position:fixed;
	z-index:99999;
	top:48%;
	right:40px;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);
	-webkit-transition:200ms ease-out;
	-moz-transition:200ms ease-out;
	-o-transition:200ms ease-out;
	transition:200ms ease-out;
	cursor:pointer;
}
#nav-open span {
	display:block;
	position:absolute;
	height:3px;
	width:100%;
	background:#252222;	
	opacity:1;
	bottom:0;
	left:0;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);
	-webkit-transition:200ms ease-out;
	-moz-transition:200ms ease-out;
	-o-transition:200ms ease-out;
	transition:200ms ease-out;
}
#nav-open.open span {background:#fff!important;}
#nav-open span:nth-child(1) {
	bottom:0px;
}
#nav-open:hover span {
	background:#252222;
}
#nav-open span:nth-child(2) {
	bottom:8px;
}
#nav-open span:nth-child(3) {
	bottom:16px;
}
#nav-open.open span:nth-child(1) {
	bottom:8px;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
#nav-open.open span:nth-child(2) {
	opacity:0;
}
#nav-open.open span:nth-child(3) {
	bottom:8px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
}
#nav-wrap {
	background:#fff;
	width:50%;
	height:100%;
	z-index:9999;
	position:fixed;
	top:0;
	left:-100%;
}
#nav-wrap ul {
	position:absolute;
	top:50%;
	width:100%;
}
#nav-wrap ul li {
	text-align:center;
	margin:3em 0;
}
#nav-wrap ul li:last-child {
	position:relative;
	margin-left:0;
}
#nav-wrap ul li a {
	color:#fff;
	letter-spacing:0.1em;
	font-size:1.25em;
}
#nav-wrap ul li a:hover {
	border-bottom:1px solid;
	padding-bottom: 3px;
}





@media screen and (max-width:1024px) { 

#web-header {display:none;}


#mobile-header {display: inline;}
#mobile-header #nav-wrap ul li a {	color: #fff; text-decoration:none; font-size:20px;}
#mobile-header #nav-wrap {	display: block; width: 100%; background: #333132; height:100%;}
#mobile-header #nav-open {	top: 28px;	right: 28px;}


}