@charset "utf-8";








@media screen and (max-width: 960px) {
/* 960pxまでの幅の場合に適応される */





.menu-icon {
  background-color: #000;
  width: 40px; /* ← 3本ラインボックスの横幅（heightとセットで変える） */
  height: 30px; /* ← 3本ラインボックスの縦幅（widthとセットで変える）*/
  position: fixed; /* ← fixedにして常に左上固定 */
  top: 3%; /* ← 3本ラインボックスの上からの位置 */
  left: 85%;  /* ← 3本ラインボックスの左からの位置 */
  cursor: pointer;
  z-index: 3;
  display: inline-block;
  padding: 7px 6px 14px 6px;
  border-radius: 5px;
}

.menu-icon span {
  display: block;
  height: 4px; /* ← 3本ラインの太さ */
  margin: 6px 0; /* ← 3本ラインの間隔 */
  background: #fff; /* ← 3本ラインの色 */
  border-radius: 0px; /* ← 3本ラインの端の丸み */
  transition: 0.4s; /* ← 3本ラインをクリックした時に×になるまでの時間 */
}

/* ハンバーガーがXに変形 */
#menu-toggle:checked + .menu-icon span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
#menu-toggle:checked + .menu-icon span:nth-child(2) {
  opacity: 0;
}
#menu-toggle:checked + .menu-icon span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* オーバーレイ背景 */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5); /* ← メニューを開いた時のメイン背景の透明度 */
  opacity: 0;
  pointer-events: none;
  transition: 0.4s; /* ← メニューを開いた時のメイン背景に透過がかかる時間 */
  opacity: 0;
  z-index: 1;
}

#menu-toggle:checked ~ .overlay {
  opacity: 1;
  pointer-events: auto;
}









/* ホバー時のアクション */
.nav_link:hover {
  color: #888; /* ホバー時の文字色 */
  background-color:transparent;/* ホバー時の背景色を解除 */
}




}