@charset "UTF-8";

.button-menu {
  --width-button-menu-pc: 171;
  --width-button-menu-sp: 87;

  position: fixed !important;
  top: 0;
  right: calc(100vw / 2 - (var(--width-kv-background) / 2 * 1px));
  width: calc(var(--width-button-menu-pc) * 1px);
  z-index: 4;
}

.background-overlay {
  position: fixed;
  backdrop-filter: blur(10px);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  z-index: 5;
  display: none;
}

.menu {
  --width-menu: 350;
  --height-menu: 610;
  
  left: calc(100vw / 2 - (var(--width-kv-background) / 2 * 1px));
  width: calc(var(--width-menu) * 1px);
  height: calc(var(--height-menu) * 1px);
  background-image: url("../../../images/event/2207higurashi3/menu/background.png");
  position: fixed;
  z-index: 5;

  display: none;
}
.menu ul {
  --mt-menu-ul: 40;
  list-style: none;
  margin-top: calc(var(--mt-menu-ul) * 1px);
}
.menu li {
  text-align: left;
  margin: 20px 0 20px 30px;
}
.menu li:hover {
  cursor: pointer;
}
#menuitem-story {
  --width-menuitem-story: 141;
}
#menuitem-movie {
  --width-menuitem-movie: 116;
}
#menuitem-goods {
  --width-menuitem-goods: 87;
}
#menuitem-information {
  --width-menuitem-information: 247;
}
#menuitem-schedule {
  --width-menuitem-schedule: 199;
}
#menuitem-map {
  --width-menuitem-map: 67;
}
#menuitem-about {
  --width-menuitem-about: 67;
}
#menuitem-faq {
  --width-menuitem-faq: 133;
}


/* 1001px未満 */
@media screen and (max-width: 1000px) {
  .button-menu {
    right: 0;
    width: calc(var(--width-button-menu-sp) / 1000 * 100vw * 1.2);
  }
  .menu {
    left: 0;
    width: calc(var(--width-menu) / 1000 * 100vw * 1.2);
    height: calc(var(--height-menu) / 1000 * 100vw * 1.2);
    background-size: cover;
  }
  .menu ul {
    margin-top: 10px;
  }
  .menu li {
    margin: 0 0 5px 5px;
  }
  #menuitem-story {
    width: calc(var(--width-menuitem-story) / 1000 * 100vw * 1.2);
  }
  #menuitem-movie {
    width: calc(var(--width-menuitem-movie) / 1000 * 100vw * 1.2);
  }
  #menuitem-goods {
    width: calc(var(--width-menuitem-goods) / 1000 * 100vw * 1.2);
  }
  #menuitem-information {
    width: calc(var(--width-menuitem-information) / 1000 * 100vw * 1.2);
  }
  #menuitem-schedule {
    width: calc(var(--width-menuitem-schedule) / 1000 * 100vw * 1.2);
  }
  #menuitem-map {
    width: calc(var(--width-menuitem-map) / 1000 * 100vw * 1.2);
  }
  #menuitem-about {
    width: calc(var(--width-menuitem-about) / 1000 * 100vw * 1.2);
  }
  #menuitem-faq {
    width: calc(var(--width-menuitem-faq) / 1000 * 100vw * 1.2);
  }
}

/* 広い画面では、メニューボタンを背景の右外側へ */
@media screen and (min-width: 1640px) {
  .button-menu {
    left: calc(50vw + 520px);
    right: auto;
    width: 171px;
  }
}