menu{
    position: fixed ;
    top:0;
    right:0;
    left:auto;
    background-color: #2E76C4;
    height:94px;
    margin:0;
    padding:0;
    width:144px;
    z-index:100001;
  }
nav{
  position: fixed !important;
  top:0;
  height:165px;
  width:100%;
  background-color:red;
}
  .menu-trigger,
  .menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
  }
  .menu-trigger {
    position: relative;
    width: 50px;
    height: 24px;
    left:50%;
    top:40%;
  }
  .menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
  }
  .menu-trigger span:nth-of-type(1) {
    top: 0;
  }
  .menu-trigger span:nth-of-type(2) {
    top: 10px;
    width:75%;
  }
  .menu-trigger span:nth-of-type(3) {
    bottom: 0;
    width:50%;
  }
  
  .menu-trigger::before {
    content: 'MENU';
    color:#fff;
    margin-left:-60px;
  }
  .menu-trigger::after {
    position: absolute;
    left: 0;
    bottom: -30px;
    display: block;
    width: 100%;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: all .4s;
  }
  
  .menu-trigger.active::before {
    content: 'CLOSE';
  }
  
  
  .menu-trigger.active span:nth-of-type(1) {
    -webkit-transform: translateY(10px) rotate(-45deg);
    transform: translateY(10px) rotate(-45deg);
    width:100%;
  }
  .menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
    width:100%;
  }
  .menu-trigger.active span:nth-of-type(3) {
    -webkit-transform: translateY(-10px) rotate(45deg);
    transform: translateY(-10px) rotate(45deg);
    width:100%;
  }

  div.menu{
    position:fixed;
    top:0;
    width:100%;
    height:100%;
    z-index:10000;
    /* display:none;*/
    background-color:#2E76C4;
  }
  div.menulogo{
    padding:10px;
    position: absolute;
    top:0;
    z-index:100001;
    display:none;
  }
  div.menulist{
    z-index:100001;
    position: absolute;
    top:20%;
    width:60%;
    left:50%;
    margin-left:-30%;
    display:none;
  }
  div.menulist ul{
    
    list-style-type: none;
    font-family: "Noto Serif JP", "Yu Mincho", YuMincho, 游明朝, YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

  }
  div.menulist ul li{
    text-align: center;
    padding:20px;
  }
  div.menulist ul li a {
    color:#fff;
    text-decoration: none;
  }


  @media (max-width: 768px) {
    div.menulist{
      margin:0;
      width:100%;
      left:0;

    }
  }