/* ==== Header base ==== */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:saturate(140%) blur(6px)}
.site-header .nav{display:flex;justify-content:space-between;align-items:center;height:60px}

/* Toggle */
.menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line,#e5e7eb);border-radius:10px;background:#fff;color:#334155;cursor:pointer}
.menu-toggle .icon-close{display:none}
.menu-toggle[aria-expanded="true"] .icon-menu{display:none}
.menu-toggle[aria-expanded="true"] .icon-close{display:block}

/* Drawer (mobile) */
.nav-drawer{
  position:fixed;inset:0 0 0 auto;width:82vw;max-width:320px;
  background:var(--paper,#fff);border-left:1px solid var(--line,#eee);
  transform:translateX(100%);transition:transform .22s ease;will-change:transform;backface-visibility:hidden;
  padding:48px 16px 16px;z-index:1000
}
.nav-drawer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.nav-drawer a{color:#334155;font-weight:600;text-decoration:none}
.drawer-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:#fff}

/* Overlay */
.nav-overlay{
  position:fixed;inset:0;display:none;pointer-events:auto;z-index:900;
  background:
    radial-gradient(60vw 40vh at 20% 0%, rgba(255,244,214,.85), rgba(255,244,214,.15) 70%, transparent 90%),
    linear-gradient(to bottom, rgba(255,250,242,.95), rgba(255,250,242,.85)),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="240" viewBox="0 0 400 240"><path d="M0,200 C60,140 120,140 180,200 S300,260 360,200" fill="none" stroke="%23b9811d" stroke-width="1.2" stroke-opacity=".22"/><path d="M-40,120 C20,60 80,60 140,120 S260,180 320,120" fill="none" stroke="%23b9811d" stroke-width="1.2" stroke-opacity=".18"/></svg>');
  background-size:cover,cover,400px 240px;background-repeat:no-repeat,no-repeat,repeat;backdrop-filter:blur(2px)
}

/* Open state */
html.nav-open .nav-drawer{transform:translateX(0)!important}
html.nav-open .nav-overlay{display:block}

/* Desktop */
@media (min-width:960px){
  .menu-toggle{display:none}
  .drawer-close{display:none!important}
  .nav-drawer{position:static;inset:auto;width:auto;max-width:none;border:0;padding:0;background:transparent;transform:none!important;transition:none}
  .nav-drawer ul{flex-direction:row;gap:16px}
  .nav-overlay{display:none!important}
}
/* === Drawer 内の視認性を強制（他CSSの白文字上書き対策） === */
.site-header .nav-drawer{ 
    background:#fff; 
    color:#1f2937;                          /* 本文色 */
    height:100dvh; 
    overflow:auto; 
    padding: max(48px, calc(env(safe-area-inset-top) + 16px)) 16px 16px;
  }
  .site-header .nav-drawer li{ list-style:none; }
  .site-header .nav-drawer a{
    display:block;
    color:#1f2937 !important;               /* ← 他の白文字指定を確実に無効化 */
    text-decoration:none;
    padding:12px 8px;
    border-radius:10px;
  }
  .site-header .nav-drawer a:hover,
  .site-header .nav-drawer a:focus{
    background:#f8fafc;
    outline: none;
  }
  /* Drawer 内リストを必ず表示（初期 display:none の上書き） */
.nav-drawer ul{
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav-drawer li{ list-style: none; }
  .nav-drawer a{
    display:block;
    color:#1f2937 !important;
    text-decoration:none;
    padding:12px 8px;
    border-radius:10px;
  }
  .nav-drawer a:hover,
  .nav-drawer a:focus{ background:#f8fafc; outline:none; }
  /* nav を開いている間だけ、ヘッダーのコンテキストを最前面に上げる */
html.nav-open .site-header{ z-index: 2000; }

/* レイヤーの順序：overlay(1500) < header(2000) 内の drawer(1000) */
.nav-overlay{ z-index: 1500; }
.nav-drawer{  z-index: 1000; position: fixed; inset: 0 0 0 auto; }