ul {
list-style: none;
margin: 0;
padding: 0;
}
nav{
width: 100%;
height: 50px;
position: fixed;
background: #fafafa;
z-index: 100;
}
.drawer{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: relative;
height: 50px;
padding: 0 1em;
}
#logo {
max-width:50%;
display:block;
margin:10px auto 0 0px;
align-items: left;
}
.menu ul li a {
display:block;
font-weight:bold;
text-align: left;
padding: 1.5em;
border-bottom: 1px dotted #518000;
margin: 0 1.5em;
color: #FFF;
text-decoration:none;
}
.menu{
text-align:center;
background-color:rgba(171,211,0,1);
transition: .5s ease;
-webkit-transform: translateX(-105%);
transform: translateX(-105%);
}
.menu.open {
-webkit-transform: translateX(0%);
transform: translateX(0%);

}
.Toggle {
display: block;
position: fixed;
width: 15px;
height: 0px;
cursor: pointer;
z-index: 3;
right:20px;
top:12px;
}

.Toggle span {
display: block;
position: absolute;
width: 21px;
border-bottom: solid 3px #333;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;

}

.Toggle span:nth-child(1) {
top:5px;
}

.Toggle span:nth-child(2) {
top: 12px;
}

.Toggle span:nth-child(3) {
top: 19px;
}
.Toggle.active span:nth-child(1) {
top: 18px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
@media only screen and (min-width: 600px) {
nav{ height: 100px;  }
.drawer{	height: 100px;}
#logo {  max-width:30%;
}
.Toggle {
display: block;
position: fixed;
width: 50px;
height: 0px;
cursor: pointer;
z-index: 3;
right:20px;
top:23px;
}
.Toggle span {
width: 50px;
border-bottom: solid 5px #333;
}
.Toggle span:nth-child(1) {
top:5px;
}
.Toggle span:nth-child(2) {
top: 23px;
}
.Toggle span:nth-child(3) {
top: 40px;
}
}

@media only screen and (min-width: 1025px) {
header{width: 2500px;
position: fixed;
background: #fafafa;
z-index: 100;
height: 70px;
box-shadow: 0 0.6rem 0.5rem -0.5rem hsl(0 0% 0% / 20%);
}
nav{
max-width: 1100px;
width: 100%;
margin: 0 auto;
background: #fafafa;
display: flex;-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 50px;
}
.drawer{
height: 50px;
}
#logo {
max-width:60%;
display:block;
margin:0 auto;
padding-top: 25px;
}
header::after{ display:none; } 

.Toggle{
display: none;
}
.menu{
width: 100%;
background-color: transparent;
margin-top:0;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu ul{
height: 70px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
.menu ul li a{
padding: 0 0.1em; height: 40px;
border-bottom: none;
color: #333;
margin: 0px 1.3em;
letter-spacing: 5px;
background-image: url(../img/btn_haikei.png);
background-position: top center;
background-repeat: no-repeat;
}
.menu ul li a:hover{
opacity: .5;
-webkit-opacity: .5;
-moz-opacity: .5;
}
}