.overlay {
  display: none;
  mix-blend-mode: multiply;
  opacity: 1;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}

.menubtn {
  position: fixed;
  z-index:5;
  cursor: pointer;
}
.menubtn canvas{
  background-color: transparent;
}

.menu {
  display:block;
  font-family: 'Cardamon W01 Regular';
  position: fixed;
  top:0; right:-50%;
  height: 120%;
  width: 50%;
  z-index: 4;
  background-color: white;
  transition: all 0.4s cubic-bezier(0, 0.04, 0, 1);
}
.menu .menucontent ul{
  list-style-type: none;
  padding-left: 100px;
  }
.menu .menucontent li{
  padding-bottom: 20px;
}
.menu .menucontent li:last-child{
  padding-bottom: 0;
}

.menu .menucontent li a{
  color: #000000;
  text-decoration: none;
}
.menu .menucontent li a:hover{
  color: #505050;
}

.menu .sns{
  display:block;
  background-color: black;
  filter: invert(100%);
  -webkit-filter: invert(100%);
  line-height:100%;
  text-align: left;
  margin-top: 100px;
}
.menu .sns ul{
  margin:0;
  padding:0;
  font-size:0;
  display:inline-block;
}
.menu .sns li{
  margin-right: 20px;
  display:inline-block;
}
.menu .sns li:last-child{
  margin-right: 0px;
}
.menu .sns li a{
  display:inline-block;
  background: url("https://drippers.co.jp/images/common/btn-sns-sp.png") no-repeat left top;
}
.menu_open .menu {
    display:block;
    transform: translateX(-100%);
}
.menu_open .overlay{
    display:block;
}

/* for PC */
@media screen and (max-width:960px){
  .menubtn{
    right: 50px;
  }
}
@media screen and (min-width: 961px){
  .menubtn{
    right: 100px;
  }
}

@media screen and (min-width: 769px){
  .menubtn canvas{
    width:34px;
    height:28px;
  }
  .menu_open .menubtn{
    right: 50px;
  }

  .menubtn{
    top:107.5px;
  }
  .menu{
    right:-30%;
    width: 30%;
  }

  .menu .menucontent{
    font-size: 20px;
    padding-top: 190px;
  }
  .menu .sns{
    margin-left: 100px;
  }
  .menu .sns li a{
    background-size: 60px 20px;
    height: 20px;
    width: 20px;
  }
  .menu .sns li.fb a{
    background-position-x: 0;
  }
  .menu .sns li.tw a{
    background-position-x: -20px;
  }
  .menu .sns li.in a{
    background-position-x: -40px;
  }

}

/* for sp */
@media screen and (max-width: 768px) {
  .overlay{
    height: 120%;
  }
  .menubtn canvas{
    width:18px;
    height:15px;
  }
  .menubtn {
    top:46px;
    right:25px;
  }
  .menubtn canvas{
    width: 18px;
    height: 15px;
  }

  .menu .menucontent{
    font-size: 17px;
    padding-top: 120px;
  }
  .menu .menucontent ul{
    padding-left: 25%;
  }
  .menu .menucontent li{
    padding-bottom: 14px;
  }

  .menu .sns{
    margin-top: 50px;
    margin-left: 25%;
  }
  .menu .sns li{
    margin-right: 20px;
  }
  .menu .sns li a{
    background-size: 45px 15px;
    height: 15px;
    width: 15px;
  }
  .menu .sns li.fb a{
    background-position-x: 0;
  }
  .menu .sns li.tw a{
    background-position-x: -15px;
  }
  .menu .sns li.in a{
    background-position-x: -30px;
  }
}