@charset "UTF-8";

.hamburger-menu {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100; /* 他の要素より上に表示 */
}

.menu-icon {
  display: block;
  width: 30px;
  height: 20px;
  position: relative;
  cursor: pointer;
  z-index: 101; /* メニューアイコンをメニューより上に */
}

.menu-icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: black;
  border-radius: 2px;
  transition: transform 0.4s ease, opacity 0.4s ease;
/*  transition: 0.25s ease-in-out;*/
  transform-origin: center;/*×にするために追加*/
}

.menu-icon span:nth-child(1) {
/*  top: 0;*/
  top: 50%;
  transform: translateY(-10px);
}

.menu-icon span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.menu-icon span:nth-child(3) {
/*  bottom: 0;*/
  top: 50%;
  transform: translateY(8px);
}

#menu-toggle {
  display: none;
}

#menu-toggle:checked + .menu-icon span:nth-child(1) {
  transform: translateY(0) rotate(45deg);
/*  transform: translateY(50%) rotate(45deg);*/
}

#menu-toggle:checked + .menu-icon span:nth-child(2) {
  opacity: 0;
}

#menu-toggle:checked + .menu-icon span:nth-child(3) {
  transform: translateY(0) rotate(-45deg);
/*  transform: translateY(-50%) rotate(-45deg);*/
}

.menu {
  position: fixed;
  top: 0;
  left: -300px; /* Initially hidden */
/*  width: 250px;*/
  width: 90vw; /* 画面幅の90%を使用 */
  max-width: 300px; /*上記と一緒に追加*/
  height: 100vh;
  background-color: white;
  box-shadow: 2px 0 5px rgba(0,0,0,0.5);
  transition: left 0.3s ease-in-out;
  z-index: 100; /* メニューをアイコンより下に */
}

#menu-toggle:checked + .menu-icon + .menu {
  left: 0; /* Slide in on checkbox check */
}

.menu ul {
  display: flex; /*縦並びにしたいため*/
  flex-direction: column; /*縦並びにしたいため*/
  list-style: none;
  padding: 0;
  margin: 0;
  padding-top: 60px; /* メニューアイコンの上 */
}

.menu li {
/*  padding: 10px;*/
  padding: 1px 10px;
  border-bottom: 1px solid #eee;
}

.menu a {
  display: block;
  color: black;
  text-decoration: none;
  padding: 10px;
  white-space: nowrap; /*折り返さないために追加*/
/*  overflow: hidden; /*折り返さないために追加*/
/*  text-overflow: ellipsis; /*折り返さないために追加*/
}