/* ?h?????[???j???[ */

/*---------- #menu ----------*/
#menu {
  position: fixed;
  left: -220px;
  top: 50;
  z-index: 500;
  width: 220px;
  height: 100%;
  background-color: #f3f4f1;
  -webkit-transition: left 0.4s ease-in-out;
  transition: left 0.4s ease-in-out;

}
#menu.open {
  left: 0;
}
#menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#menu li {
  padding: 4px;
  color: black;
  background-color: #f3f4f1;
  //border-bottom: 1px solid #fff;
  text-align: left;
  height: 35px;
  vertical-align: center;

}

#menu li a{
  color: black;
  //background-color: #9acd32;
  //border-bottom: 1px solid #fff;
  border: none;
  padding: 0 0 0.75em 0.75em;
  cursor: pointer;
}

#menu li,
#menu li a {
  transition: background-color 0.5s;
  font-weight: 600;
  display:block;
}

#menu li:hover,
#menu li a:hover {
  background-color: #82df80d2;
  transition: background-color 200ms;
}

#menu_btn {
  /* ?i?r?Q?[?V??????\???E??\????????{?^?? */
  position: absolute;
  /*bottom: 0;*/
  top: 5px;
  right: -4em;
  width: 4em;
  border-radius: 0 8px 8px 0;
  background-color: rgba(240, 240, 240, 0.9);
  padding: 6px 20px;
  cursor: pointer;
}

/* ?????{?^???? */
.btn-mn{
  width: 80px;
}

/* ???j???[?\????????p */
/* --- .menu-background --- */
.menu-background {
  position: fixed;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 5;
  opacity: 0;
  transition: opacity 0.5s;
}
.menu-background.open {
  width: 100%;
  height: 100%;
  opacity: 1;
}