/* �h�����[���j���[ */

/*---------- #menu ----------*/
#menu {
  position: fixed;
  left: -200px;
  top: 50;
  z-index: 500;
  width: 200px;
  height: 100%;
  background-color: #ffffff;
  -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: #ffffff;
  //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: #95eff5;
  transition: background-color 400ms;
}

#menu_btn {
  /* �i�r�Q�[�V������\���E��\��������{�^�� */
  position: absolute;
  /*bottom: 0;*/
  top: 12px;
  right: -4em;
  width: 4em;
  border-radius: 0 8px 8px 0;
  background-color: rgba( 157, 204, 224, 0.7);
  padding: 6px 20px;
  cursor: pointer;
  z-index: 10;
}

/* �����{�^���� */
.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: 150;
  opacity: 0;
  transition: opacity 0.5s;
}
.menu-background.open {
  width: 100%;
  height: 100%;
  opacity: 1;
}