/* タブレット/モバイルのハンバーガー＋右からスライドインする全面メニュー（Figma /menu 準拠）。
   デスクトップ(≥1025px)は従来の左ナビ＋右SNSのままで、ハンバーガー/オーバーレイは非表示。 */

/* 旧・フッター前の MENU ナビはハンバーガーメニューに置き換えるため非表示 */
.footer-menu {
  display: none !important;
}

/* --- ハンバーガーボタン（≤1024px のみ表示） --- */
.site-menu-toggle {
  display: none;
}

/* --- モーダル・オーバーレイ（005: 写真パネル廃止。下のページを黒50%で透かし、右から白パネルが入る） --- */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.site-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease;
}

.site-menu__photo {
  display: none;
}

.site-menu__body {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 0 0 min(83%, 480px);
  height: 100%;
  padding: 150px 10% 40px 40px;
  background: #fff;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-menu.is-open .site-menu__body {
  transform: translateX(0);
}

.site-menu__close {
  position: absolute;
  top: 40px;
  right: 6%;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ink);
  cursor: pointer;
}

.site-menu__close::before,
.site-menu__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 24px;
  height: 1.5px;
  background: currentColor;
}
.site-menu__close::before { transform: rotate(45deg); }
.site-menu__close::after { transform: rotate(-45deg); }

.site-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.site-menu__nav a {
  color: var(--c-ink);
  font-family: var(--font-grotesk);
  font-size: var(--fs-16);
  font-weight: 400;
  letter-spacing: 0.18em;
  width: max-content;
}

/* 007: JOURNAL は準備中。メニューには残しつつグレーアウトのみ（ページ実体は削除済み）
   （href はページ階層で /#journal・../#journal 等に揺れるため末尾一致で拾う）
   ACCESS はリンク有効のままトップの #access へスクロールする（href は menu.js が書き換え） */
.site-menu__nav a[href$="#journal"] {
  pointer-events: none;
  opacity: 0.35;
}

/* 007: footer メニューの JOURNAL も準備中でグレーアウト（header/menu と揃える） */
.footer-menu a[href$="#journal"] {
  pointer-events: none;
  opacity: 0.35;
}

.site-menu__sns {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 48px;
}

.site-menu__sns a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-ink);
  font-family: var(--font-grotesk);
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
}

.site-menu__sns svg {
  width: 18px;
  height: 18px;
}

/* body を縦 flex 化し、コピーライトは通常フローの末尾押し下げに（短い画面でもナビ・SNSと重ならない） */
.site-menu__copy {
  margin-top: auto;
  padding-top: 32px;
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-size: var(--fs-10);
  letter-spacing: 0.08em;
}

@media (max-width: 1024px) {
  .site-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    position: fixed;
    top: 30px;
    right: 24px;
    z-index: 50;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
  }

  .site-menu-toggle span {
    display: block;
    width: 28px;
    height: 1.5px;
    background: var(--c-ink);
    transition: opacity 180ms ease;
  }

  /* メニューが開いている間はスクロールロック */
  body.menu-open {
    overflow: hidden;
  }
}

@media (max-width: 560px) {
  .site-menu__body { padding: 120px 24px 40px 32px; }
  .site-menu__close { top: 30px; }
  .site-menu__copy { left: 32px; }
  .site-menu-toggle { top: 28px; right: 20px; }
}