@charset "utf-8";

/* =========================
  Hamburger
========================= */

.hamburger{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 38px;

  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2000;

  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
  cursor: pointer;
}

/* “メニュー”テキストは出さない */
.hamburger__text{ display:none; }

.hamburger__line{
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: #0f172a;
  border-radius: 2px;
  transition: transform .2s ease, background .2s ease;
}
.hamburger__line::before,
.hamburger__line::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:#0f172a;
  border-radius:2px;
  transition: transform .2s ease, top .2s ease, opacity .2s ease;
}
.hamburger__line::before{ top: -6px; }
.hamburger__line::after{ top: 6px; }

/* active：×に変形 */
.hamburger.-active .hamburger__line{
  background: transparent;
}
.hamburger.-active .hamburger__line::before{
  top: 0;
  transform: rotate(45deg);
}
.hamburger.-active .hamburger__line::after{
  top: 0;
  transform: rotate(-45deg);
}

/* =========================
  Drawer Nav（クリック奪取対策 完全版）
========================= */

/* 背景の暗幕 */
.header__nav-area{
  position: fixed;
  inset: 0;
  z-index: 1500;                 /* hamburger(2000)より下に */
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease, visibility .25s ease;
  background: rgba(15,23,42,.35);
  display: grid;
  justify-content: end;

  pointer-events: none;          /* ← 非表示時はクリックを通す（超重要） */
}

/* 表示時だけクリック奪う */
.header__nav-area.-active{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;          /* ← 表示時だけクリックを奪う */
}

/* パネル本体 */
.global-navigation{
  width: min(360px, 86vw);
  height: 100%;
  background: #fff;
  border-left: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 20px 60px rgba(15,23,42,.20);
  padding: 84px 22px 26px;
}

/* リスト */
.global-navigation__list > li{
  padding: 14px 0;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.global-navigation__list > li + li{ margin-top: 0; }

.global-navigation__link{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: #0f172a;
  font-weight: 700;
  text-decoration: none;
}
.global-navigation__link:hover{ opacity:.85; }

@media (max-width: 750px){
  .hamburger{ top:10px; right:10px; width:42px; height:36px; }
}