/* ============================================================
   components/header-drawer.css
   Hamburger + mobile drawer
   ============================================================ */

/* ============================================================
   2026-04-21 UX改善: ハンバーガー / モバイルドロワー / 4カラムfooter
   ============================================================ */

/* ----- Hamburger button (PC非表示 / SP表示) ----- */
.header__hamburger {
  display: none;
  width: 40px; height: 40px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; position: relative;
  margin-left: var(--space-2);
}
.header__hamburger span {
  display: block; position: absolute; left: 8px;
  width: 24px; height: 2px; background: var(--primary);
  border-radius: 2px; transition: transform .25s, top .25s, opacity .2s;
}
.header__hamburger span:nth-child(1) { top: 12px; }
.header__hamburger span:nth-child(2) { top: 19px; }
.header__hamburger span:nth-child(3) { top: 26px; }
.header__hamburger.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.header__hamburger.is-open span:nth-child(2) { opacity: 0; }
.header__hamburger.is-open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* ----- Mobile drawer ----- */
.drawer {
  position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4); z-index: 99;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.drawer.is-open { opacity: 1; pointer-events: auto; }
.drawer__panel {
  background: #fff; padding: 8px 0 24px;
  max-height: calc(100vh - 64px); overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.drawer__item {
  display: block; padding: 16px 24px;
  font-size: var(--font-lg); font-weight: 600; color: var(--text);
  border-bottom: 1px solid #f3f3f3;
}
.drawer__item:hover, .drawer__item:active { background: var(--primary-bg); color: var(--primary); }
.drawer__item--accent {
  color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-light));
  margin: var(--space-3) var(--space-4); border-radius: 8px; text-align: center; border-bottom: 0;
}
.drawer__item--accent:hover, .drawer__item--accent:active {
  color: #fff; opacity: 0.9;
}

/* ----- SP header adjustments ----- */
@media (max-width: 768px) {
  .header__hamburger { display: block; }
  .header__auth { display: none; }  /* ログイン/会員登録はドロワーで出す */
  .header__logo { font-size: 18px; }
}