
#logo {
  max-width:50%;
  display:block;
  margin:0 auto;
}
nav{
  width: 100%;
  height: 60px;
  position: relative;
  background: #F6F6F6;
  z-index: 1000!important;
}
.drawer{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 60px;
  padding: 0 1em;
}
/*ナビゲーション部分*/
.menu ul li a {
display:block;
  font-weight:bold;
  padding: 2em;
  border-bottom: 1px dotted #CCC;
  color:#333;
  text-decoration:none;
}
.menu ul li a:hover{
  background-color:rgba(0,0,0,0.8);
  color:orange;
}
.menu img{
  display:inline;
}
.menu{
  text-align:center;
  background-color:rgba(255,255,255,0.8);
  transition: .5s ease;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}
/*OPEN時の動き*/
.menu.open {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
}
/*トグルボタンのスタイルを指定*/
.Toggle {
  display: block;
  position: fixed;    /* bodyに対しての絶対位置指定 */
  width: 35px;
  height: 35px;
  cursor: pointer;
  z-index: 3;
  right:15px;
}
.Toggle span {
  display: block;
  position: absolute;
  width: 30px;
  border-bottom: solid 2px #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: 18px;
}
.Toggle span:nth-child(3) {
  top: 32px;
}
.Toggle.active span:nth-child(1) {
  top: 18px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/* 2番目と3番目のspanを45度に */
.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);
}
/* pc */
@media screen and (min-width: 600px) {
  header::after{
    display:none;
  } 
  nav{
    display: flex;
  }
  .Toggle{
    display: none;
  }
  .menu{
    width: 100%;
    background-color: transparent;
    margin-top:0;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  .menu ul{
    height: 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
  }
  .menu ul li a{
    padding: 0 1em;
    border-bottom: none;
  }
  .menu ul li a:hover
  {
    background-color:transparent;
  }
}
 /* 画面サイズ 500px 未満 */
 @media only screen and (max-width: 499px) {
  nav{
    height:0;
    z-index:0;
  }
 .Toggle{
    top:65px;
  }
}
