/* =============================================================
   nav-drawer.css  【最新版 v5 / 2026-07-02】
   全ページで中身の位置・余白・アイコンを完全に統一（!importantで固定）
   ============================================================= */
/* =============================================================
   nav-drawer.css — 全ページ共通の「おしゃれなハンバーガーメニュー」
   マイページのドロワーと同じ世界観（右からふわっと滑り込む）。

   ★ 重要：ドロワーの見た目は「幅（@media）」で切り替えない。
     ページごとにハンバーガーが出る幅が違う（768px のページも 1024px の
     ページもある）ため、幅で分岐すると中身の位置がページによってズレる。
     ドロワーは既定で画面外（translateX(100%)）に隠れており、.is-open が
     付いたときだけスライドインする。開く/開かないの判定は JS 側が
     「ハンバーガーが実際に表示されているか」で行う。だからここでは
     幅に関係なく“同じ見た目”を常に適用する。
   ============================================================= */

.navd-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(38, 34, 30, 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 100010;
}
.navd-backdrop.is-open { opacity: 1; visibility: visible; }

.navd-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  height: 100% !important;
  width: 84% !important;
  max-width: 340px !important;
  margin: 0 !important;
  background: var(--color-bg-white, #fbf9f6);
  box-shadow: -12px 0 40px rgba(38, 34, 30, 0.16);
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(.22,.61,.36,1);
  z-index: 100011;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: max(1.4rem, env(safe-area-inset-top)) 0 max(1.4rem, env(safe-area-inset-bottom)) !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--font-body, 'Zen Maru Gothic', sans-serif);
  box-sizing: border-box !important;
  text-align: left !important;
}
.navd-drawer.is-open { transform: translateX(0); }

.navd-drawer .navd-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 1.4rem 1.1rem !important;
  margin: 0 0 0.5rem !important;
  border-bottom: 1px solid var(--color-border-light, var(--color-border, #e7e2da));
  width: auto !important;
}
.navd-drawer .navd-greet {
  font-family: var(--font-display, 'Kaisei Opti', serif);
  font-size: 0.95rem !important;
  color: var(--color-primary-dark, #4a7e7f);
  line-height: 1.5;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}
.navd-greet small {
  display: block;
  font-family: var(--font-body, 'Zen Maru Gothic', sans-serif);
  font-size: 0.72rem;
  color: var(--color-text-muted, #8a847a);
  font-weight: 400;
  margin-top: 2px;
}
.navd-close {
  width: 34px; height: 34px;
  border: none;
  background: var(--color-bg-soft, #f2efe9);
  color: var(--color-text-muted, #8a847a);
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.navd-close:hover { background: var(--color-border, #e7e2da); color: var(--color-text, #3d3832); }

.navd-drawer .navd-nav { display: flex !important; flex-direction: column !important; align-items: stretch !important; padding: 0.4rem 0.9rem !important; gap: 2px !important; width: auto !important; }
/* ★ レイアウトに関わる項目は、各ページの独自CSS（nav a / li / button 等）に
   絶対に負けないよう !important + 高詳細度で固定する。これで全ページ・全幅で
   中身の位置が完全に同じになる。 */
.navd-drawer .navd-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.9rem !important;
  margin: 0 !important;
  padding: 0.85rem 0.9rem !important;
  border-radius: 14px;
  text-decoration: none !important;
  color: var(--color-text, #3d3832);
  font-family: var(--font-body, 'Zen Maru Gothic', sans-serif);
  font-size: 0.95rem !important;
  font-weight: 500;
  border: none !important;
  border-bottom: none !important;
  background: none;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  float: none !important;
  position: static !important;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
  box-sizing: border-box !important;
  opacity: 0;
  transform: translateX(12px);
}
.navd-drawer.is-open .navd-item {
  opacity: 1;
  transform: translateX(0);
  transition: background 0.18s ease, opacity 0.32s ease, transform 0.32s ease;
}
.navd-drawer.is-open .navd-item:nth-child(1)  { transition-delay: 0.04s; }
.navd-drawer.is-open .navd-item:nth-child(2)  { transition-delay: 0.07s; }
.navd-drawer.is-open .navd-item:nth-child(3)  { transition-delay: 0.10s; }
.navd-drawer.is-open .navd-item:nth-child(4)  { transition-delay: 0.13s; }
.navd-drawer.is-open .navd-item:nth-child(5)  { transition-delay: 0.16s; }
.navd-drawer.is-open .navd-item:nth-child(6)  { transition-delay: 0.19s; }
.navd-drawer.is-open .navd-item:nth-child(7)  { transition-delay: 0.22s; }
.navd-drawer.is-open .navd-item:nth-child(8)  { transition-delay: 0.25s; }
.navd-drawer.is-open .navd-item:nth-child(9)  { transition-delay: 0.28s; }
.navd-drawer.is-open .navd-item:nth-child(10) { transition-delay: 0.31s; }
.navd-item:hover { background: var(--color-primary-bg, #eef5f4); }
.navd-item:active { transform: scale(0.98); }
.navd-drawer .navd-ic {
  width: 38px !important; height: 38px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--color-primary-bg, #eef5f4);
  border-radius: 11px !important;
  font-size: 1.05rem !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.navd-item.is-current {
  background: var(--color-primary-bg, #eef5f4);
  color: var(--color-primary-dark, #4a7e7f);
  font-weight: 700;
}
.navd-item.is-current .navd-ic { background: var(--color-primary, #5f9e9f); }
.navd-item.accent .navd-ic { background: var(--color-primary, #5f9e9f); }
.navd-foot {
  margin-top: auto;
  padding: 0.7rem 1.3rem 0;
  border-top: 1px solid var(--color-border-light, var(--color-border, #e7e2da));
}
.navd-item.logout { color: var(--color-text-muted, #8a847a); font-size: 0.9rem; }
.navd-item.logout .navd-ic { background: var(--color-bg-soft, #f2efe9); }
.navd-item.logout:hover { background: #fbeeec; color: #8a2520; }

.menu-toggle.navd-x span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.navd-x span:nth-child(2) { opacity: 0; }
.menu-toggle.navd-x span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .navd-drawer, .navd-backdrop, .navd-item, .menu-toggle span { transition: none !important; }
  .navd-drawer.is-open .navd-item { opacity: 1; transform: none; }
}