/* =========================================================
   White Theme Override (Color-only) for stellabase header/nav
   - Layout / spacing untouched
   ========================================================= */

/* Color tokens (header & drawer) */
:root{
  --h-bg: #ffffff;
  --h-text: #0f172a;               /* “墨” */
  --h-muted: rgba(15,23,42,.68);
  --h-border: rgba(15,23,42,.10);
  --h-shadow: 0 10px 26px rgba(15,23,42,.08);

  --accent-1: #2563eb;             /* blue */
  --accent-2: #06b6d4;             /* cyan */
  --focus-ring: rgba(37,99,235,.30);

  --chip-bg: rgba(15,23,42,.04);
  --chip-bg-hover: rgba(15,23,42,.07);
}

/* =========================
   Header bar (white)
========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 9995;

  background: var(--h-bg) !important;
  color: var(--h-text) !important;
  box-shadow: var(--h-shadow) !important;
  border-bottom: 1px solid var(--h-border);
}

/* Site name: gradient text を白背景用に再設計（透明事故防止） */
.site-name-wrapper{
  background: linear-gradient(180deg, #0f172a 0%, #1e3a8a 55%, #2563eb 100%) !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
}

/* インナー：センター寄せの横並び */
.header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.55rem 1.4rem;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

/* =========================
   Branding（ロゴ＋サイト名）
   – Luxury & Tech Hybrid Branding
========================= */

/* ロゴ領域は縮まない */
.site-header .site-branding{
  flex: 0 0 auto;
  min-width: 0;
}

/* ナビは伸びる（PCでメニューを置く） */
.site-header .global-nav{
  flex: 1 1 auto;
  min-width: 0;
}

/* ナビのULを横並びに固定（折返しさせない） */
.site-header .global-nav .nav-list{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;        /* ← nowrap をやめる */
  min-width: 0;
  white-space: normal;    /* ← nowrap をやめる */
}

/* クリック領域 */
.site-branding-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

/* ロゴ wrapper（正方形で揃える） */
.site-logo-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 20%;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 3px 8px rgba(0,0,0,0.28);
  flex-shrink: 0;
}

/* ロゴ（custom-logo） */
.site-logo-wrapper img.custom-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;             /* ← cover → contain に変更 */
  background: transparent;         /* 念のため */
  transition: transform 0.25s ease-out, filter 0.25s ease-out;
}

/* ホバー時の浮遊感 */
.site-branding-link:hover .site-logo-wrapper img.custom-logo {
  transform: translateY(-1px) scale(1.02);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.45));
}

/* サイト名（最高級のタイポグラフィ） */
.site-name-wrapper {
  font-family:
    "Inter Tight",
    "SF Pro Display",
    "Segoe UI",
    "Hiragino Sans",
    "Noto Sans JP",
    sans-serif;

  font-size: 1.28rem;
  font-weight: 640;
  letter-spacing: 0.01em;

  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 45%, #93c5fd 100%);
  -webkit-background-clip: text;
  color: transparent;

  white-space: nowrap;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.site-branding-link:hover .site-name-wrapper {
  transform: translateY(-1px);
  opacity: 1;
}

/* =========================
   PC Global Nav links
========================= */
.nav-list a{
  color: rgba(15,23,42,.72) !important;
}

.nav-list a:hover,
.nav-list a:focus-visible{
  color: var(--h-text) !important;
}

/* underline indicator: 白背景用に少し抑制（ギラつきを防ぐ） */
.nav-list a::after{
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2)) !important;
  opacity: 0; /* hover時に出る挙動は元CSSのまま */
}

/* =========================================
   Header layout: Auth button always right
   ========================================= */

/* 4カラム位置を明示（順序が変でも崩れにくい） */
.site-header .nav-toggle{ grid-column: 1;
  flex: 0 0 38px;         /* ← これが効きます */
  width: 38px;
  height: 38px;
  aspect-ratio: 1 / 1;    /* 念のため */
  line-height: 0;
  padding: 0;
  align-self: center;
  appearance: none;
  -webkit-appearance: none;
}


.site-header .site-branding{ grid-column: 2; }
.site-header .global-nav{ grid-column: 3; min-width: 0; }

.site-header .header-auth{ grid-column: 4;
   justify-self: end;
   order: 1;
   width: auto;
  }

/* ナビ側のリンク整形が btn を潰すのを防ぐ */
.site-header .header-auth .btn{
  text-decoration: none;
}

/* ヘッダー内で折り返し/はみ出しで消えるのを防ぐ */
.site-header,
.site-header .header-inner{
  overflow: visible !important;
  align-items: flex-start;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

/* auth ボタンは絶対に改行しない */
.site-header .header-auth .btn--nav,
.site-header .header-auth a{
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

/* 認証ボタンのLIを右端へ押し出す（これが肝） */
.site-header .global-nav .nav-list > li.menu-item--auth{
  margin-left: auto !important;
  flex: 0 0 auto;
}


/* global-navが消えても auth は右端に張り付く */
.site-header .header-auth{
  margin-left: auto;
  flex: 0 0 auto;
}

.site-header .header-right{
  margin-left: auto;            /* 右端に寄せる */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 10px !important;
  min-width: 0;
}

/* ナビ側の a の装飾が .btn を潰すのを確実に防ぐ（強めに上書き） */
.site-header .global-nav .nav-list > li.menu-item--auth > a.btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* =========================
   Hamburger (white surface)
   - stellabaseの立体感/挙動は維持
   - 白ヘッダーに溶ける配色へ統合
========================= */

/* トークン（他と合わせるなら :root に寄せてもOK） */
.nav-toggle{
  --tg-border: rgba(15, 23, 42, .16);
  --tg-surface-1: rgba(255, 255, 255, .92);
  --tg-surface-2: rgba(241, 245, 249, .92);
  --tg-ink: rgba(15, 23, 42, .82);
  --tg-ink-weak: rgba(15, 23, 42, .70);

  --tg-accent-1: #2563eb;  /* blue */
  --tg-accent-2: #06b6d4;  /* cyan */
  --tg-ring: rgba(37, 99, 235, .30);

  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--tg-border);

  /* “白いのに安っぽくない”＝ごく薄いガラス */
  background: radial-gradient(circle at 30% 0, var(--tg-surface-1), var(--tg-surface-2));

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  /* stellabaseの体験（軽い浮遊感）を維持 */
  box-shadow: 0 10px 22px rgba(15, 23, 42, .10);

  transition:
    background-color 0.16s ease-out,
    border-color 0.16s ease-out,
    box-shadow 0.16s ease-out,
    transform 0.12s ease-out;
}

/* 3本バー */
.nav-toggle span{
  display: block;
  width: 19px;
  height: 2px;
  margin: 0 auto;
  border-radius: 999px;

  /* 白面なのでインク色へ */
  background-color: var(--tg-ink);

  transition:
    transform 0.18s ease-out,
    opacity 0.18s ease-out,
    width 0.18s ease-out,
    background-color 0.18s ease-out;
}

.nav-toggle:hover{
  /* hoverは“青みの反射”だけ足す：ギラつかせない */
  background: radial-gradient(
    circle at 30% 0,
    rgba(219, 234, 254, .78),
    rgba(241, 245, 249, .96)
  );
  border-color: rgba(37, 99, 235, .22);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .14);
  transform: translateY(-1px);
}

/* フォーカス：白バーの上で綺麗に見える二重リング */
.nav-toggle:focus-visible{
  outline: 0;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.85),
    0 0 0 5px var(--tg-ring),
    0 14px 30px rgba(15, 23, 42, .14);
}

/* 開いているとき：黄色→ブランドアクセントに統一（上品） */
.nav-toggle.is-open{
  border-color: rgba(37, 99, 235, .45);
  background: radial-gradient(
    circle at 30% 0,
    rgba(191, 219, 254, .90),
    rgba(255, 255, 255, .98)
  );
  box-shadow:
    0 16px 34px rgba(15, 23, 42, .16),
    0 10px 24px rgba(37, 99, 235, .12);
}

/* is-open 時のバーはグラデ“っぽく”見せる（単色でも十分品が出る） */
.nav-toggle.is-open span{
  background-color: var(--tg-accent-1);
}

/* X 変形はそのまま（形状維持） */
.nav-toggle.is-open span:nth-child(1){
  transform: translateY(5px) rotate(40deg);
  width: 19px;
}
.nav-toggle.is-open span:nth-child(2){
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3){
  transform: translateY(-5px) rotate(-40deg);
  width: 19px;
}

/* “is-open なのに hover” の時だけ、ほんの少しシアンを足して気持ちよく */
.nav-toggle.is-open:hover{
  border-color: rgba(6, 182, 212, .40);
  box-shadow:
    0 18px 38px rgba(15, 23, 42, .18),
    0 12px 26px rgba(6, 182, 212, .12);
}


/* =========================
   Global Nav（PC メイン）
========================= */

.global-nav {
  margin-left: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* リンク：細めサンセリフ＋インジケータライン */
.nav-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0;
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.82);
  text-decoration: none;
  border-bottom: none;
  transition:
    color 0.18s ease-out,
    transform 0.18s ease-out;
}

/* 下のグラデーションライン */
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.4rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #60a5fa, #38bdf8);
  transform: scaleX(0.25);
  transform-origin: center;
  opacity: 0;
  transition:
    transform 0.18s ease-out,
    opacity 0.18s ease-out;
}

.nav-list a:hover,
.nav-list a:focus-visible {
  color: #f9fafb;
  transform: translateY(-1px);
}

.nav-list a:hover::after,
.nav-list a:focus-visible::after,
.nav-list a[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

/* =========================
   ヘッダー右側：検索＋ログイン
========================= */
/* PC時：右側を2段（上：ログアウト / 下：検索）にする */
@media (min-width: 1024px){

.header-actions {
  display: flex;
  align-items: flex-end;   /* 右揃え */
  gap: 0.9rem;
  margin-left: auto;       /* 念のため右に寄せる */
}


/* 上にログアウト */
.site-header .header-right .header-auth{
  order: 1;
}

/* 下に検索 */
.site-header .header-right .header-search{
  order: 2;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

}


/* PC ヘッダー内の検索フォームだけをターゲットにする */
  .site-header .header-right .search-form{
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 280px;            /* お好みで 280〜360 */
  max-width: 320px;
  min-width: 200px;
  background: radial-gradient(circle at 0 0, rgba(148,163,184,0.35), rgba(15,23,42,0.9));
  border-radius: 999px;
  padding: 0.1rem 0.1rem 0.1rem 0.75rem;
  border: 1px solid rgba(148,163,184,0.75);
  box-shadow: 0 8px 22px rgba(15,23,42,0.75);
}

/* WordPress デフォルト構造を想定 */
.header-search .search-form label {
  margin: 0;
  flex: 1 1 auto;
}

.header-search .search-field {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0.3rem 0.25rem;
  font-size: 0.84rem;
  background: transparent;
  color: #e5e7eb;
}

.header-search .search-field::placeholder {
  color: rgba(148,163,184,0.85);
}


/* =========================
   Header Search Submit (white header fusion)
   - 形状/サイズそのまま、色だけ上質に統合
========================= */

/* 検索フォーム全体（白ヘッダーでの見え方を整える）
   ※既に別定義がある場合は「競合しない範囲で」上書きされます */
.site-header .header-right .search-form,
.site-header .header-search .search-form{
  /* 白面で“浮く”ための薄いガラス＋境界 */
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,245,249,.92));
  border: 1px solid rgba(15, 23, 42, .14);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .10);
}

/* 入力欄（白面に合わせてインク色へ） */
.site-header .header-search .search-field{
  color: rgba(15, 23, 42, .86);
}
.site-header .header-search .search-field::placeholder{
  color: rgba(15, 23, 42, .48);
}

/* ボタン本体 */
.header-search .search-submit{
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-left: 0.35rem;

  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, .18);
  cursor: pointer;

  /* “青い宝石”を白面に置く：青→シアンの微グラデ */
  background:
    linear-gradient(135deg, rgba(37,99,235,1), rgba(6,182,212,.95));
  background-image: url("/wp-content/themes/stellabase/assets/images/images/search-logo.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;

  /* 白面なので影は濃すぎない、でも押したくなる */
  box-shadow:
    0 10px 20px rgba(15, 23, 42, .12),
    0 8px 18px rgba(37, 99, 235, .12);

  /* WordPress の value="検索" を完全に隠す */
  font-size: 0;
  color: transparent;
  text-indent: -9999px;

  transition:
    filter 0.18s ease-out,
    transform 0.12s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out;
}

.header-search .search-submit:hover{
  transform: translateY(-1px);
  border-color: rgba(6, 182, 212, .26);
  box-shadow:
    0 14px 26px rgba(15, 23, 42, .14),
    0 12px 22px rgba(6, 182, 212, .14);
  filter: saturate(1.04);
}

/* フォーカスリング：トグルと同じ言語（白→青） */
.header-search .search-field:focus-visible,
.header-search .search-submit:focus-visible{
  outline: none;
}

.header-search .search-form:focus-within{
  border-color: rgba(37, 99, 235, .28);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.85),
    0 0 0 5px rgba(37, 99, 235, .28),
    0 12px 26px rgba(15, 23, 42, .12);
}

/* =========================
   Header Auth Button (white header fusion)
   - 透明感は維持しつつ、白バー上で“ボタン”に見せる
========================= */

.nav-auth{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;

  /* 白面で輪郭が消えない境界 */
  border: 1px solid rgba(15, 23, 42, .14);

  /* ガラス感：白→薄いグレー */
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,245,249,.92));
  color: rgba(15, 23, 42, .86);

  /* “高級UIの薄い影” */
  box-shadow: 0 10px 22px rgba(15, 23, 42, .10);

  transition:
    background-color .12s ease,
    transform .12s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.nav-auth:hover{
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, .18);
  box-shadow:
    0 14px 26px rgba(15, 23, 42, .12),
    0 10px 20px rgba(37, 99, 235, .08);
}

.nav-auth:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.85),
    0 0 0 5px rgba(37, 99, 235, .28),
    0 14px 26px rgba(15, 23, 42, .12);
}

.site-header a.btn.btn-outline.btn--nav{
  background: rgba(255,255,255,.92) !important;
  color: rgba(11,18,32,.88) !important;
  border: 1px solid rgba(15,23,42,.18) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.10) !important;
}

.site-header a.btn.btn-outline.btn--nav:hover{
  background: rgba(37,99,235,.08) !important;
  border-color: rgba(37,99,235,.26) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15,23,42,.12) !important;
}

.site-header a.btn.btn-outline.btn--nav:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.92),
    0 0 0 4px var(--nav-ring),
    0 14px 28px rgba(15,23,42,.12) !important;
}



/* =========================
   Header layout (Mobile unified)
   - Left: hamburger
   - Center: logo + site title
   - Right: nothing (reserved space to keep center truly centered)
   - Hide: global nav / header-right (search + auth) on mobile
========================= */

@media (max-width: 1023.98px){

  /* 右側（検索・ログイン等）はモバイルでは完全に非表示 → ドロワーへ */
  .site-header .header-right,
  .site-header .header-actions,
  .site-header .header-right .header-search,
  .site-header .header-right .header-auth,
  .site-header .global-nav{
    display: none !important;
  }

  /* ヘッダーは「左:トグル / 中央:ブランド / 右:ダミー枠」で中央を安定させる */
  .site-header .header-inner{
    display: grid !important;
    grid-template-columns: 44px 1fr 44px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0.55rem 1rem !important;
  }

  /* ハンバーガーは左固定 */
  .site-header .nav-toggle{
    grid-column: 1;
    justify-self: start;
  }

  /* ロゴ＋サイト名は中央固定 */
  .site-header .site-branding{
    grid-column: 2;
    justify-self: center;
  }

  /* 右側に“同じ幅の空間”を作って中央ズレを防ぐ */
  .site-header .header-inner::after{
    content: "";
    grid-column: 3;
    width: 38px;
    height: 38px;
    justify-self: end;
  }

  /* ブランド（ロゴ画像） */
  .site-logo-wrapper img.custom-logo{
    display: block;
    width: 70%;
    height: 70%;
    object-fit: contain;
    background: transparent;
    transition: transform 0.25s ease-out, filter 0.25s ease-out;
  }

  /* ブランド（サイト名） */
  .site-name-wrapper{
    font-family:
      "Inter Tight",
      "SF Pro Display",
      "Segoe UI",
      "Hiragino Sans",
      "Noto Sans JP",
      sans-serif;
    font-size: 1.00rem;
    font-weight: 640;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  }

  /* ロゴとサイト名の間 */
  .site-branding-link{
    gap: 0.35rem;
  }
}

/* =========================
   Desktop: show menu/search/auth normally
========================= */
@media (min-width: 1024px){
  .site-header .global-nav{ display: block; }
  .site-header .header-right{ display: flex; }
  .site-header .header-actions{
    display: flex;
    align-items: flex-end;
    gap: 0.9rem;
    margin-left: auto;
  }
}


/* =========================================
   Header base (Desktop default)
   HTML:
   .header-inner
     .nav-toggle
     .site-branding
     .global-nav
     .header-right (search + auth)
========================================= */

.site-header .header-inner{
  display: flex;
  align-items: center;
  gap: 14px;
}

/* 左：ハンバーガーは常に左端 */
.site-header .nav-toggle{
  flex: 0 0 auto;
}

/* ロゴ＋サイト名 */
.site-header .site-branding{
  flex: 0 0 auto;
}
.site-header .site-branding-link{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
}
.site-header .site-logo-wrapper{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-header .site-logo-wrapper img.custom-logo{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  object-fit: contain;
  background: transparent;
}

/* グローバルナビ（PC） */
.site-header .global-nav{
  flex: 1 1 auto;
  min-width: 0;
}
.site-header .global-nav .nav-list{
  display: flex;
  align-items: center;
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

/* 右端：検索 + ログアウト */
.site-header .header-right{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}

/* header-search が「search-submit」というクラスも持っていても崩れない */
.site-header .header-right .header-search{
  display: inline-flex;
  align-items: center;
}


/* =========================================
   Mobile unified
   - Left: hamburger
   - Center: branding (logo + title)
   - Right: empty spacer (to keep center true)
   - Hide: global-nav + header-right (search/auth)
========================================= */

@media (max-width: 1023.98px){

  /* モバイルでは：メニューも検索もログアウトもヘッダーから消す（ドロワーへ統合） */
  .site-header .global-nav,
  .site-header .header-right{
    display: none !important;
  }

  /* 3列グリッドにして中央を安定させる */
  .site-header .header-inner{
    display: grid !important;
    grid-template-columns: 44px 1fr 44px !important; /* 左:toggle / 中央:branding / 右:空枠 */
    align-items: center !important;
    gap: 10px !important;
  }

  .site-header .nav-toggle{
    grid-column: 1;
    justify-self: start;
  }

  .site-header .site-branding{
    grid-column: 2;
    justify-self: center;
  }

  /* 右側の“空枠”を作る（中央ズレ防止） */
  .site-header .header-inner::after{
    content: "";
    grid-column: 3;
    width: 38px;
    height: 38px;
    justify-self: end;
  }

  /* モバイル時：ロゴとサイト名の見え方調整（必要なら） */
  .site-header .site-name-wrapper{
    font-size: 1rem;
    font-weight: 640;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
}

/* =========================================
   Desktop only (explicit)
========================================= */
@media (min-width: 1024px){
  .site-header .global-nav{ display: block; }
  .site-header .header-right{ display: inline-flex; }
}





/* =========================
   HEADER DRAWER (white surface fusion)
   - 動き/寸法そのまま、色だけ白系に統一
========================= */

.header-drawer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* 背景幕：白ドロワーなので少し濃くして“前に出る” */
.header-drawer__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.52);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease-out;
}

/* 左から出てくるパネル本体（白ガラス） */
.header-drawer__panel{
  position: absolute;
  inset: 0 auto 0 0;
  width: 340px;
  max-width: 84%;

  /* 白でも“平面”にならない設計：上が白、下が薄いスレート */
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(241,245,249,.96) 100%);
  color: rgba(15, 23, 42, .88);

  transform: translateX(-100%);
  transition: transform 0.24s ease-out;

  /* 白面は影が命：横方向の立体＋薄い外周ライン */
  box-shadow:
    10px 0 30px rgba(2, 6, 23, .18),
    6px 0 18px rgba(37, 99, 235, .06);
  border-right: 1px solid rgba(15, 23, 42, .10);

  display: flex;
  flex-direction: column;

  /* ガラス感（効く環境だけ） */
  backdrop-filter: blur(10px);
}

/* ドロワーヘッダー */
.header-drawer__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.1rem 0.4rem;

  /* 白地なので境界線は薄めのインク色 */
  border-bottom: 1px solid rgba(15, 23, 42, .10);
}

.header-drawer__logo{
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.header-drawer__logo img{
  max-height: 32px;
  width: auto;
  height: auto;
}

/* タイトル：白地なので“薄いグレー” */
.header-drawer__title{
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .56);
  margin: 0 0 0 0.4rem;
}

/* 閉じるボタン：白地の上で“アイコンボタン”に見せる */
.header-drawer__close{
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;

  border: 1px solid rgba(15, 23, 42, .14);
  background: rgba(255,255,255,.88);
  color: rgba(15, 23, 42, .78);

  font-size: 1.1rem;
  cursor: pointer;

  box-shadow: 0 10px 20px rgba(2, 6, 23, .10);

  transition:
    background-color 0.16s ease-out,
    border-color 0.16s ease-out,
    transform 0.12s ease-out,
    box-shadow 0.16s ease-out,
    color 0.16s ease-out;
}

.header-drawer__close:hover{
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, .20);
  background: rgba(239, 246, 255, .95); /* ほんのりブルー */
  color: rgba(15, 23, 42, .92);
  box-shadow:
    0 14px 26px rgba(2, 6, 23, .12),
    0 10px 18px rgba(37, 99, 235, .08);
}

.header-drawer__close:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.85),
    0 0 0 5px rgba(37, 99, 235, .28),
    0 14px 26px rgba(2, 6, 23, .12);
}

/* 中身スクロール */
.header-drawer__inner{
  padding: 0.7rem 1.1rem 1.2rem;
  overflow-y: auto;
  max-height: 100%;
}

/* 開いている状態 */
.header-drawer.is-open{
  pointer-events: auto;
}

.header-drawer.is-open .header-drawer__backdrop{
  opacity: 1;
  pointer-events: auto;
}

.header-drawer.is-open .header-drawer__panel{
  transform: translateX(0);
}

/* ドロワー最上部の検索フォーム */
.header-drawer__search{
  margin: 0.4rem 0 0.8rem;
}

/* =========================
   Drawer Auth Panel (White Drawer Fusion)
   - 形/構造そのまま、白ドロワー前提で“密度”を上げる
========================= */

/* 変数：白面の上でも成立するコントラストに再定義 */
.header-drawer{
  /* card surface（白ドロワー上の“ガラスカード”） */
  --auth-surface: rgba(255, 255, 255, .92);
  --auth-surface2: rgba(248, 250, 252, .92);

  /* ink */
  --auth-text: rgba(2, 6, 23, .92);
  --auth-muted: rgba(2, 6, 23, .56);

  /* accent（青→シアンは踏襲。白面では彩度を感じやすいので少し上品に） */
  --auth-accent-1: #2563eb; /* blue */
  --auth-accent-2: #06b6d4; /* cyan */

  /* border / ring：白面に合わせて“インク寄り”＋“青の薄膜” */
  --auth-border: rgba(15, 23, 42, .12);
  --auth-border2: rgba(37, 99, 235, .18);
  --auth-ring: rgba(37, 99, 235, .28);
}

/* Drawer Auth Panel */
.drawer-auth{
  margin: 12px 0 16px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 白ドロワー上の“主役カード” */
.drawer-auth__card{
  border-radius: 18px;

  /* 二重の境界：薄いインク線 + 青の気配（高級UIのコツ） */
  border: 1px solid var(--auth-border);
  box-shadow:
    0 18px 40px rgba(2, 6, 23, .10),
    0 10px 22px rgba(2, 6, 23, .06),
    0 0 0 1px rgba(37, 99, 235, .07);

  background: linear-gradient(180deg, var(--auth-surface), var(--auth-surface2));
  padding: 14px 14px 12px;

  /* ガラス感（効く環境だけ） */
  backdrop-filter: blur(10px);
}

/* ヘッダー情報 */
.drawer-auth__meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.drawer-auth__eyebrow{
  font-size: 11px;
  letter-spacing: .06em;
  margin: 0;
  color: var(--auth-muted);
}

.drawer-auth__name{
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--auth-text);
  line-height: 1.2;
}

.drawer-auth__actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.drawer-auth__btn{
  width:100%;
  justify-content:center;
  border-radius:999px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

/* Primary：白面では“沈まず発光”。影を黒→青に寄せて上品に */
.drawer-auth .btn.btn-primary{
  color:#fff;
  border: 0;
  background: linear-gradient(135deg, var(--auth-accent-1), var(--auth-accent-2));
  box-shadow:
    0 14px 28px rgba(37,99,235,.22),
    0 10px 22px rgba(6,182,212,.14),
    0 2px 0 rgba(255,255,255,.25) inset;
}

/* Outline：白カード上で“白ボタンが消える”問題を回避（薄い面＋境界線＋陰影） */
.drawer-auth .btn.btn-outline{
  color: var(--auth-text);
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15, 23, 42, .14);
  box-shadow:
    0 10px 18px rgba(2,6,23,.08),
    0 0 0 1px rgba(37,99,235,.06);
}

/* “新規登録”アクセント：青シアンの気配だけ足す（やりすぎない） */
.drawer-auth__btn--accent{
  border-color: rgba(6,182,212,.28) !important;
  box-shadow:
    0 10px 18px rgba(2,6,23,.08),
    0 0 0 1px rgba(6,182,212,.08) !important;
}

/* hover / focus（“軽く浮く”＋“輪郭が締まる”） */
.drawer-auth .btn:hover{
  transform: translateY(-1px);
}

.drawer-auth .btn.btn-primary:hover{
  box-shadow:
    0 18px 36px rgba(37,99,235,.26),
    0 14px 28px rgba(6,182,212,.18),
    0 2px 0 rgba(255,255,255,.25) inset;
}

.drawer-auth .btn.btn-outline:hover{
  border-color: rgba(37, 99, 235, .22);
  box-shadow:
    0 14px 26px rgba(2,6,23,.10),
    0 0 0 1px rgba(37,99,235,.10);
}

.drawer-auth .btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.85),
    0 0 0 6px var(--auth-ring);
}

@media (prefers-reduced-motion: reduce){
  .drawer-auth__btn{ transition: none; }
  .drawer-auth .btn:hover{ transform: none; }
}


/* =========================
   Drawer Search + Menu (White Drawer Fusion)
   - 形/挙動はそのまま、白ドロワーの統一トーンへ
========================= */

/* Drawer内の色設計（このブロック内だけで完結） */
.header-drawer{
  --drawer-ink: rgba(2, 6, 23, .90);
  --drawer-muted: rgba(2, 6, 23, .56);

  --drawer-line: rgba(15, 23, 42, .12);
  --drawer-line-strong: rgba(15, 23, 42, .18);

  --drawer-surface: rgba(255,255,255,.92);
  --drawer-surface2: rgba(248,250,252,.94);

  --drawer-accent-1: #2563eb; /* blue */
  --drawer-accent-2: #06b6d4; /* cyan */
  --drawer-accent-soft: rgba(37, 99, 235, .10);

  --drawer-shadow-1: 0 18px 40px rgba(2, 6, 23, .10);
  --drawer-shadow-2: 0 10px 22px rgba(2, 6, 23, .06);
}

/* =========================
   Drawer 内 検索フォーム（white surface）
========================= */

.header-drawer__search .search-form{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;

  /* 白ガラス面 */
  background: linear-gradient(180deg, var(--drawer-surface), var(--drawer-surface2));
  border-radius: 999px;
  padding: 0.2rem 0.25rem 0.2rem 0.85rem;

  /* 影＋薄い縁取り（白面の上で“締まる”） */
  border: 1px solid var(--drawer-line);
  box-shadow:
    0 12px 26px rgba(2,6,23,.10),
    0 8px 18px rgba(2,6,23,.06),
    0 0 0 1px rgba(37,99,235,.06);

  backdrop-filter: blur(10px);
}

/* WordPress デフォルト構造 */
.header-drawer__search .search-form label{
  flex: 1 1 auto;
  margin: 0;
}

.header-drawer__search .search-field{
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;

  color: var(--drawer-ink);
  font-size: 0.9rem;
  padding: 0.32rem 0.25rem;
}

.header-drawer__search .search-field::placeholder{
  color: rgba(2, 6, 23, .42);
}

/* =========================
   Drawer 検索ボタン（white drawer版）
========================= */

.header-drawer__search .search-submit{
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-left: 0.35rem;

  border-radius: 999px;
  border: 0;
  cursor: pointer;

  /* “主役の小さな宝石”として保持（青→シアン） */
  background: linear-gradient(135deg, var(--drawer-accent-1), var(--drawer-accent-2));
  background-image: url("/wp-content/themes/stellabase/assets/images/images/search-logo.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;

  box-shadow:
    0 12px 24px rgba(37,99,235,.22),
    0 10px 20px rgba(6,182,212,.14),
    0 2px 0 rgba(255,255,255,.22) inset;

  /* value="検索" を完全に無効化 */
  font-size: 0;
  color: transparent;
  text-indent: -9999px;

  transition:
    transform 0.12s ease-out,
    box-shadow 0.18s ease-out,
    filter 0.18s ease-out;
}

.header-drawer__search .search-submit:hover{
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow:
    0 16px 30px rgba(37,99,235,.26),
    0 14px 26px rgba(6,182,212,.18),
    0 2px 0 rgba(255,255,255,.22) inset;
}

/* フォーカス時（白面用：黒リングを捨て、青の薄膜で上品に） */
.header-drawer__search .search-field:focus-visible,
.header-drawer__search .search-submit:focus-visible{
  outline: none;
}

.header-drawer__search .search-form:focus-within{
  border-color: rgba(37,99,235,.22);
  box-shadow:
    0 0 0 1px rgba(37,99,235,.10),
    0 0 0 4px rgba(37,99,235,.16),
    0 12px 26px rgba(2,6,23,.10),
    0 8px 18px rgba(2,6,23,.06);
}

/* =========================
   Drawer Menu（white card list）
========================= */

.header-drawer-nav{ margin-top: 0.45rem; }

.drawer-menu{
  list-style: none;
  margin: 0;
  padding: 0.3rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.drawer-menu > li{ margin: 0; }

/* 行をカードっぽく（白面の上での“精密UI”） */
.drawer-menu > li > a{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;

  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  font-size: 0.92rem;

  color: var(--drawer-ink);
  text-decoration: none;

  /* 白ガラスカード */
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,250,252,.92));
  border: 1px solid var(--drawer-line);

  box-shadow:
    0 12px 24px rgba(2,6,23,.10),
    0 8px 16px rgba(2,6,23,.06),
    0 0 0 1px rgba(37,99,235,.05);

  transition:
    background-color 0.16s ease-out,
    border-color 0.16s ease-out,
    transform 0.12s ease-out,
    box-shadow 0.16s ease-out;
}

/* 左の丸インジケータ（白面では“薄い発光”に） */
.drawer-menu > li > a::before{
  content: "";
  flex: 0 0 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--drawer-accent-1), var(--drawer-accent-2));
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

/* 右の矢印（白面用：インク寄り） */
.drawer-menu > li > a::after{
  content: "›";
  font-size: 0.95rem;
  opacity: 0.55;
  color: rgba(2, 6, 23, .70);
}

/* hover：白→ほんのり青膜＋影を一段だけ上げる */
.drawer-menu > li > a:hover{
  background: linear-gradient(180deg, rgba(239,246,255,.92), rgba(236,254,255,.92));
  border-color: rgba(37,99,235,.22);
  transform: translateY(-1px);
  box-shadow:
    0 18px 34px rgba(2,6,23,.12),
    0 12px 24px rgba(2,6,23,.08),
    0 0 0 1px rgba(6,182,212,.10);
}

/* 現在ページ（白面用：青膜＋境界線を締める） */
.drawer-menu > li > a[aria-current="page"]{
  background: linear-gradient(180deg, rgba(239,246,255,.92), rgba(236,254,255,.92));
  border-color: rgba(37,99,235,.28);
  box-shadow:
    0 18px 34px rgba(2,6,23,.12),
    0 12px 24px rgba(2,6,23,.08),
    0 0 0 1px rgba(37,99,235,.12);
}

/* =========================
   Drawer Widgets（white drawer版）
========================= */

.header-drawer__widgets{
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--drawer-line);
}

.header-drawer__widgets .widget{ margin-bottom: 1rem; }

.header-drawer__widgets .widget-title{
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--drawer-muted);
  margin: 0 0 0.35rem;
}

/* 背景スクロール停止はそのまま */
html.drawer-open,
html.drawer-open body{
  overflow: hidden;
}

/* ============================================
   FOOTER 強制調整 — 完全安定版（共通設定）
============================================ */

/* フッター本体：全デバイス共通で中央寄せレイアウト */
.site-footer {
  padding: 2rem 1.2rem 1.8rem;
  background: #020617;
  color: rgba(11,18,32,.72);
  border-radius: 16px 16px 0 0;
  margin-top: 1.6rem;
  font-size: 0.85rem;
}

/* ★ 常に1カラム中央寄せ（PC/モバイル共通） */
.site-footer-inner {
  max-width: 720px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 1.4rem !important;
}

/* ロゴ＋タイトル全体 */
.footer-brand-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.8rem !important;
  width: 100%;
}

/* ロゴとタイトル横並び */
.footer-brand-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  text-decoration: none;
  color: inherit;
}

/* ロゴ（HTML側サイズを無効化） */
.footer-logo {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  object-fit: cover !important;
  border-radius: 14% !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.30);
  display: block !important;
}

/* <span class="footer-brand-title"> の色を“確実に”締める */
.site-footer .footer-brand-title{
  color: rgba(11,18,32,.90) !important;
  font-weight: 700;
  letter-spacing: .02em;
}

/* フッターメニュー（中央寄せ） */
.footer-nav {
  margin-top: 0.75rem;
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: wrap;              /* スマホで折り返し OK */
  justify-content: center;
  gap: 1.2rem !important;
  text-align: center;
}

/* コピーライト */
.footer-copy {
  font-size: 0.78rem;
  opacity: 0.7;
  margin-top: 0.8rem;
  width: 100%;
  text-align: center !important;
}

/* ============================================
   PC 調整（768px 以上）
============================================ */
@media (min-width: 768px) {
  .site-footer {
    padding: 2.4rem 1.2rem 2rem;
    font-size: 0.9rem;
  }

  .site-footer-inner {
    max-width: 720px !important;
    gap: 1.4rem !important;
  }

  .footer-logo {
    width: 48px !important;
    height: 48px !important;
  }

  .footer-brand-title {
    font-size: 1rem !important;
  }
}

/* ============================================
   モバイル最適化（767px 以下）
============================================ */
@media (max-width: 767px) {

  .site-footer {
    padding: 1.8rem 1rem 1.6rem;
    font-size: 0.8rem;
  }

  .site-footer-inner {
    max-width: 90% !important;
    gap: 1.6rem !important;
  }

  .footer-logo {
    width: 42px !important;
    height: 42px !important;
  }

  .footer-brand-title {
    font-size: 0.9rem !important;
  }

  /* メニューは少し間隔を詰める */
  .footer-menu {
    gap: 0.9rem !important;
  }
}

/* フッターメニュー：liの癖を消す */
.footer-menu > li {
  margin: 0 !important;
  padding: 0 !important;
}

/* フッターメニュー：リンクの見た目 */
.footer-menu a {
  color: #e2e8f0;
  text-decoration: none;
  opacity: 0.9;
  display: inline-block;
  padding: 0.15rem 0.1rem;
  border-radius: 10px;
}

/* hover */
.footer-menu a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* キーボード操作時（アクセシビリティ） */
.footer-menu a:focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.9);
  outline-offset: 3px;
  opacity: 1;
}

/* 現在ページ */
.footer-menu .current-menu-item > a,
.footer-menu .current_page_item > a {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}