@charset "utf-8";
/* =====================
  ハンバーガーボタン（SPのみ表示）
  Figma SP ヘッダー：高さ50px／赤い3本線 39×22
===================== */
.c-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.c-menu-btn__lines {
  position: relative;
  width: 39px;
  height: 22px;
}
.c-menu-btn__lines span,
.c-menu-btn__lines::before,
.c-menu-btn__lines::after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  width: 39px;
  height: 4px;
  border-radius: 1px;
  background-color: var(--c-red);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.c-menu-btn__lines::before {
  top: 0;
}
.c-menu-btn__lines span {
  top: 9px;
}
.c-menu-btn__lines::after {
  top: 18px;
}
/* 開いている時：×印 */
.c-menu-btn.is-active .c-menu-btn__lines span {
  opacity: 0;
}
.c-menu-btn.is-active .c-menu-btn__lines::before {
  transform: translateY(9px) rotate(45deg);
}
.c-menu-btn.is-active .c-menu-btn__lines::after {
  transform: translateY(-9px) rotate(-45deg);
}
/* テキストラベルはデザインに無いので非表示 */
.c-menu-btn__text {
  display: none;
}

@media screen and (max-width: 680px) {
  .c-menu-btn {
    display: flex;
  }
  /* ヘッダーはページ内容より前面に */
  .l-header {
    z-index: 701;
  }
  /* ドロワー(#main-menu-container) はヘッダーの子要素なので、
     .l-header の z-index はヘッダー内部の重なり順には効かない。
     ロゴとボタンをドロワー(700)より上に積み直す。 */
  .c-logo,
  .c-menu-btn {
    position: relative;
    z-index: 702;
  }
  /* =====================
    スライドインメニュー
  ===================== */
  #main-menu-container {
    position: fixed;
    z-index: 700;
    top: 0;
    right: -100vw;
    width: 100vw;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.96);
    background-image: url("../img/common/bg-ume.svg");
    background-repeat: repeat;
    background-size: 900px;
    transition: right 0.3s linear;
  }
  #main-menu-container.is-active {
    right: 0;
  }
  #main-menu-container .c-nav__list {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 6.4vw, 32px);
  }
  #main-menu-container .c-nav__item a {
    font-size: 18px;
    letter-spacing: 0.12em;
  }
}