#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 90;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#overlay.open {
  display: block;
  opacity: 1;
}

/* =========================
   side menu
========================= */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#sideMenu {
  position: fixed;
  top: var(--base-head);
  right: calc(-1 * var(--menu-width));
  width: var(--menu-width);
  max-width: var(--menu-width);
  height: calc(100% - var(--base-head));
  background: #333;
  color: #fff;
  transition: right 0.3s ease;
  z-index: 100; /* overlayより上 */
}

#sideMenu.open {
  right: 0;
}

#sideMenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#sideMenu li {
  border-bottom: 1px solid #555;
}

#sideMenu li {
  display: block;
  padding: var(--menu-padding);
  color: #fff;
  background: #333;
  text-decoration: none;
  font-size: var(--menu-font);
}

#sideMenu li:hover {
  background: #444;
}

/* =========================
   sub menu
========================= */
#sideMenu .has-sub > .sub-menu {
  display: none;
}

#sideMenu .has-sub.open > .sub-menu {
  display: block;
}

#sideMenu .sub-menu li {
  background: #555;
}