/* =======================================
   Global Header / Navigation
   – Premium, clean, precise (00a0e8 based)
======================================= */

/* -------------------------
   Design Tokens (Header)
------------------------- */
:root{
  --brand-500: #0B76B8;
  --brand-400: #3A9AD6;
  --brand-600: #075C95;
  --ink-900:  #0B1220;
  --white:    #FFFFFF;

  --shadow-focus: 0 0 0 3px rgba(11, 118, 184, .25);
}
/* -------------------------
   Header Shell
------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 9999;

  background: linear-gradient(90deg,
    var(--brand-400) 0%,
    var(--brand-500) 55%,
    var(--brand-600) 100%
  );
  box-shadow: none;
  border-bottom: 1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* “艶”は薄く・広く（汚くならない範囲） */
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg,
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,0) 60%
  );
}

/* -------------------------
   Header Inner (layout)
------------------------- */
.header-inner{
  position: relative;
  max-width: 1120px;
  margin: 0 auto;

  /* 縦の密度を上げすぎない：上品に見える最小ライン */
  min-height: 68px;
  padding: 0.60rem 1.40rem;

  display: flex;
  align-items: center;
  gap: 1.10rem;

  /* 右側の白グラデとの調和：余白で“呼吸”を作る */
  letter-spacing: .01em;
}

/* クリック可能な要素の共通フィードバック（安っぽい hover を排除） */
.site-header a,
.site-header button{
  -webkit-tap-highlight-color: transparent;
}

.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header input:focus-visible{
  outline: none;
  box-shadow: none !important;  /* 光る原因を止める */
  border-radius: 12px;
}

/* 端末幅が狭いときの余白最適化（header-innerだけ先に整える） */
@media (max-width: 959px){
  .header-inner{
    padding: 0.55rem 1.00rem;
    min-height: 64px;
    gap: .85rem;
  }
}

/* =========================
   Branding（ロゴ＋サイト名）
   – Premium / Clean / Balanced
========================= */

/* ロゴ領域は縮まない（ただし“縮み0”で詰まりを回避） */
.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: 18px;
  flex-wrap: nowrap;
  min-width: 0;
  white-space: nowrap;
}

/* クリック領域：押しやすさ＋上品な当たり判定 */
.site-branding-link{
  display: inline-flex;
  align-items: center;
  gap: 0.70rem;
  text-decoration: none;
  min-height: 44px;                 /* タップ領域 */
  border-radius: 14px;              /* focus ring が綺麗に出る */
  padding: 2px 6px;                 /* 小さな余白で“品”を作る */
  transition: transform .18s ease, opacity .18s ease;
}

/* ロゴ枠：正方形固定をやめて「高さ基準」の横長枠に */
.site-logo-wrapper{
  width: auto;
  height: 46px;
  padding: 0;              /* ← 余白も不要なら削る */
  border-radius: 0;        /* ← 角丸も不要なら削る */
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;

  background: transparent; /* ★ 透明 */
  border: none;             /* ★ 枠線なし */
  box-shadow: none;         /* ★ 影なし */
  backdrop-filter: none;    /* ★ ガラス効果オフ */
  -webkit-backdrop-filter: none;
}

/* 画像：wrapperを埋めるのをやめて、横長を生かす */
.site-logo-wrapper img.custom-logo{
  height: 100%;
  width: auto;
  max-width: 220px;         /* 横に伸びすぎる暴れ防止（好みで調整） */
  object-fit: contain;
  display: block;
  filter:
  drop-shadow(0 0 4px rgba(255,255,255,.45));
}

/* ホバー：やりすぎない（安っぽさ回避） */
.site-branding-link:hover{
  transform: translateY(-1px);
}

.site-branding-link:hover .site-logo-wrapper{
  background: transparent;
  border: none;
  box-shadow: none;
}

.site-branding-link:hover .site-logo-wrapper img.custom-logo{
  transform: scale(1.02);
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.7))
    drop-shadow(0 0 18px rgba(120,200,255,.45));
}

/* ロゴ文字：グラデ廃止（高級感は“単色の精度”で出す） */
.site-name-wrapper{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

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

/* “右が白寄り”の時に、タイトルが薄く見える環境向けの保険 */
@media (prefers-contrast: more){
  .site-name-wrapper{
    background: none;
    color: rgba(11,18,32,.92);
    text-shadow: none;
  }
}

/* モバイル：ロゴと文字のバランス（詰まり回避） */
@media (max-width: 768px){

  .site-logo-wrapper{
    height: 40px;
    padding: 5px 8px;
    border-radius: 12px;
  }
  .site-logo-wrapper img.custom-logo{
    max-width: 180px;
  }

  .site-branding-link{ gap: .45rem; padding: 2px 4px; }
  .site-name-wrapper{ font-size: 1.00rem; letter-spacing: .01em; }
}



/* =========================================
   Header layout: robust + premium balance
   - Layout responsibility is centralized in .header-inner
   - Works with/without global-nav (mobile)
   + Nav hover is ONLY on hover-capable devices
   + No underline / no “sticky hover” / focus-visible only
========================================= */

/* -----------------------------
   Desktop baseline (layout)
------------------------------ */
.site-header .header-inner{
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-width: 0;
}

/* ===== Mobile hamburger: remove circular capsule (keep tap area) ===== */
.site-header .nav-toggle{
  width: 40px;
  height: 40px;

  background: transparent !important; /* 白い丸面を消す */
  border: 0 !important;               /* 枠線を消す */
  box-shadow: none !important;        /* 影を消す */
  border-radius: 10px !important;     /* 円をやめる（当たり判定は残る） */

  transform: none !important;
  filter: none !important;
}

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

.site-header .global-nav{
  flex: 1 1 auto;
  min-width: 0;
}

.site-header .header-right,
.site-header .header-auth{
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-header .header-auth a,
.site-header .header-auth .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}

.site-header .global-nav .nav-list > li.menu-item--auth{
  margin-left: auto;
  flex: 0 0 auto;
}

.site-header{ overflow: visible; }
.site-header .header-inner{ overflow: visible; }


/* -----------------------------
   Nav / Button interaction
   - hover only when possible
   - no underline
   - focus-visible only
   - eliminate sticky hover on touch
------------------------------ */

/* 下線は常に無効（ピル反応と競合させない） */
.site-header .global-nav a,
.site-header .global-nav a:focus,
.site-header .global-nav a:active,
.site-header .global-nav a:focus-visible{
  text-decoration: none !important;
}

/* ベース（非hover時）＝“反応ゼロ”に固定 */
.site-header .global-nav a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent; /* iOSの青ハイライト抑制 */
  box-shadow: none;
  outline: none; /* :focus で残さない */
}


/* キーボード操作のときだけフォーカスリング（見た目とA11y両立） */
.site-header .global-nav a:focus-visible{
  outline: 2px solid rgba(17, 17, 17, 0.45);
  outline-offset: 2px;
}

/* タップ中は“瞬間だけ”変化させ、残像を作らない */
.site-header .global-nav a:active{
  box-shadow: none;
}

/* badge/chip も同じ哲学で統一（ある場合だけ効く） */
@media (hover: hover) and (pointer: fine){
  .badge--section:hover,
  .badge--category:hover,
  .chip--tag:hover{
    text-decoration: none;
  }
}

.badge--section:focus,
.badge--category:focus,
.chip--tag:focus{
  outline: none;
}

.badge--section:focus-visible,
.badge--category:focus-visible,
.chip--tag:focus-visible{
  outline: 2px solid rgba(17, 17, 17, 0.45);
  outline-offset: 2px;
}


/* -----------------------------
   Responsive (Mobile)
   - 1行：toggle | logo(中央) | right(右)
------------------------------ */
@media (max-width: 959px){
  .site-header .global-nav{ display: none; }
  .site-header .header-actions{ display: none; } /* あれば */

  .site-header .header-inner{
    display: grid;
    grid-template-columns: auto 1fr auto; /* toggle | branding | right */
    align-items: center;
    gap: 10px;
  }

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

  .site-header .header-right,
  .site-header .header-auth{
    justify-self: end;
    margin-left: 0;
  }

  .site-header .header-auth .btn--nav{
    padding: 0.36rem 0.80rem;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
  }
}

@media (max-width: 768px){
  .site-header .header-inner{ gap: 8px; }
  .site-header .header-auth .btn--nav{
    padding: 0.34rem 0.74rem;
    font-size: 0.76rem;
  }
}

@media (max-width: 410px){
  .site-header .header-auth{ display: none; }
}



/* =========================
   Hamburger Toggle (Premium / Glass / Cyan)
   - Matches #00a0e8 header
   - White-ish surface, precise ring, calm motion
========================= */

.nav-toggle{
  /* size */
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;

  /* layout */
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;

  /* surface (white-ish, not "cheap flat") */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.78) 55%,
      rgba(255,255,255,.70) 100%);
  border: 1px solid rgba(255,255,255,.55);

  /* subtle depth */
  box-shadow:
    0 10px 22px rgba(0,56,86,.18),
    0 2px 6px rgba(0,56,86,.10);

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

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

/* 3 bars */
.nav-toggle span{
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  border-radius: 999px;

  /* deep ink, not pure black */
  background-color: rgba(255,255,255,.92) !important;

  transition:
    transform .18s ease,
    opacity .18s ease,
    width .18s ease,
    background-color .18s ease;
}

/* hover: crisp lift + cyan sheen */
.nav-toggle:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 28px rgba(0,56,86,.22),
    0 4px 10px rgba(0,56,86,.12);
  filter: saturate(1.02);
}

/* focus: premium cyan ring */
.nav-toggle:focus-visible{
  outline: 0;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.85),
    0 0 0 5px rgba(0,160,232,.55),
    0 14px 28px rgba(0,56,86,.22);
}

/* active press: tiny compression (feels expensive) */
.nav-toggle:active{
  transform: translateY(0) scale(.98);
}

/* Open state: cyan-tinted glass + white bars */
.nav-toggle.is-open{
  border-color: rgba(0,160,232,.55);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.nav-toggle.is-open span{
  background-color: rgba(255,255,255,.92) !important;
}

/* X morph (refined angles) */
.nav-toggle.is-open span:nth-child(1){
  transform: translateY(5px) rotate(42deg);
  width: 18px;
}
.nav-toggle.is-open span:nth-child(2){
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3){
  transform: translateY(-5px) rotate(-42deg);
  width: 18px;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .nav-toggle,
  .nav-toggle span{
    transition: none;
  }
}

/* =========================
   Global Nav (PC Main) — Premium / Clean / Precise
   - Works with #00a0e8 gradient header + white-ish right side
========================= */

.global-nav{
  margin-left: auto;
  min-width: 0;
}

/* UL */
.nav-list{
  display: flex;
  align-items: center;
  gap: 1.15rem;             /* 詰めて上質に */
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

/* Link base */
.nav-list a{
  border-radius: 10px;                 /* 999px をやめる */
  padding: .42rem .58rem;
  background: transparent;
  box-shadow: none;
  transform: none;
  position: relative;
  display: inline-flex;
  align-items: center;

  /* typography */
  font-size: .86rem;
  font-weight: 650;         /* Sony-like: 細すぎない */
  letter-spacing: .06em;    /* 0.12em は強すぎるので半分へ */
  text-transform: uppercase;

  /* color: white headerでも沈まない設計 */
  color: rgba(255,255,255,.88);
  text-decoration: none;
  border-bottom: none;

  transition:
    color .18s ease,
    background-color .18s ease,
    transform .18s ease;
}

/* underline (精密で上品な“光”だけ出す) */
.nav-list a::after{
  content: none !important;
  opacity: 0 !important;
  transform: none !important;
  background: none !important;
}

/* 光沢/発光の原因：影と派手な背景を停止 */
.site-header .nav-list a,
.site-header .nav-list a:hover,
.site-header .nav-list a:focus,
.site-header .nav-list a:active,
.site-header .nav-list a:focus-visible{
  box-shadow: none !important;
  text-decoration: none !important;
}


/* Current page: “押し込まれた上質感” */
.nav-list a[aria-current="page"]{
  color: rgba(255,255,255,.98);
  background: rgba(255,255,255,.18);
  box-shadow: none;
}


/* Hoverは「静かに」 */
@media (hover: hover) and (pointer: fine){
  .site-header .nav-list a:hover{
    color: rgba(255,255,255,.98);
    background: rgba(255,255,255,.10); /* ガラスは薄く */
    transform: translateY(-0.5px);     /* 1px だと演出感が出やすい */
  }

  /* 押下中は動かさない（安っぽいバウンドを抑える） */
  .site-header .nav-list a:active{
    transform: none;
    background: rgba(255,255,255,.12);
  }

  /* 現在地は「背景うっすら」だけで十分上品 */
  .site-header .nav-list a[aria-current="page"]{
    color: rgba(255,255,255,.98);
    background: rgba(255,255,255,.16);
    box-shadow: none;
}
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .nav-list a,
  .nav-list a::after{
    transition: none;
  }
}

/* =========================
   Search (Shared Base)
========================= */

/* search-form 共通 */
.header-search .search-form,
.header-drawer__search .search-form{
  position: relative;
  display: inline-flex;
  align-items: center;

  border-radius: 999px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.74);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

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

/* label 共通 */
.header-search .search-form label,
.header-drawer__search .search-form label{
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* input 共通 */
.header-search .search-field,
.header-drawer__search .search-field{
  width: 100%;
  min-width: 0;

  border: 0;
  outline: 0;
  background: transparent;

  padding: 0;
  margin: 0;

  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(11,18,32,.92);
}

.header-search .search-field::placeholder,
.header-drawer__search .search-field::placeholder{
  color: rgba(11,18,32,.44);
}

/* submit 共通（ルーペが埋もれない対策込み） */
.header-search .search-form > input.search-submit,
.header-drawer__search .search-form > input.search-submit{
  border-radius: 999px;
  border: 0;
  cursor: pointer;

  /* 重要：白いルーペが白い光沢に埋もれないよう「薄い濃色ハロー」を挟む */
  background-image:
    url("/wp-content/themes/kensa-theme/assets/images/images/search-logo.webp"),
    radial-gradient(circle at 50% 50%, rgba(11,18,32,.28) 0 46%, rgba(11,18,32,0) 62%),
    linear-gradient(135deg, #1fbaff 0%, #00a0e8 55%, #007fc6 100%);

  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center;
  background-size: 14px 14px, 100% 100%, 100% 100%;

  /* WP value="検索" を隠す */
  font-size: 0;
  color: transparent;
  text-indent: -9999px;

  transition:
    transform .14s ease,
    filter .18s ease,
    box-shadow .18s ease;
}

.header-search .search-form:focus-within,
.header-drawer__search .search-form:focus-within{
  border-color: rgba(0,160,232,.55);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.80),
    0 0 0 6px rgba(0,160,232,.22);
}

/* クリック要素のfocusはform側で受ける */
.header-search .search-field:focus-visible,
.header-search .search-submit:focus-visible,
.header-drawer__search .search-field:focus-visible,
.header-drawer__search .search-submit:focus-visible{
  outline: none;
}



/* =========================
   Header Right: Search (PC)
========================= */

.header-actions{
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-left: 1.2rem;
  min-width: 0;
}

.header-search .search-form{
  --search-h: 36px;

  height: var(--search-h);
  width: min(320px, 28vw);
  max-width: 340px;

  padding: 0 6px 0 14px;

  box-shadow:
    0 16px 30px rgba(0,56,86,.14),
    0 6px 14px rgba(0,56,86,.10);
}

.header-search .search-field{
  font-size: .88rem;
}

.header-search .search-form > input.search-submit{
  width: 30px;
  height: 30px;
  margin-left: 8px;

  box-shadow:
    0 10px 18px rgba(0,56,86,.18),
    0 4px 10px rgba(0,56,86,.10);
}

.header-search .search-form > input.search-submit:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow:
    0 14px 22px rgba(0,56,86,.22),
    0 6px 14px rgba(0,56,86,.12);
}


/* =========================
   Drawer Search
========================= */

.header-drawer__search{
  margin: 12px 0 14px;
}

.header-drawer__search .search-form{
  width: 100%;
  padding: 10px 10px 10px 14px;

  box-shadow:
    0 14px 22px rgba(0,56,86,.14),
    0 6px 12px rgba(0,56,86,.08);
}

.header-drawer__search .search-field{
  font-size: .92rem;
  line-height: 1.2;
}

.header-drawer__search .search-form > input.search-submit{
  width: 34px;
  height: 34px;
  margin-left: 10px;

  box-shadow:
    0 14px 22px rgba(0,56,86,.18),
    0 6px 12px rgba(0,56,86,.10);
}

.header-drawer__search .search-form > input.search-submit:hover{
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow:
    0 18px 26px rgba(0,56,86,.22),
    0 8px 16px rgba(0,56,86,.12);
}


@media (prefers-reduced-motion: reduce){
  .header-search .search-form,
  .header-drawer__search .search-form,
  .header-search .search-form > input.search-submit,
  .header-drawer__search .search-form > input.search-submit{
    transition: none !important;
  }
}

@media (max-width: 959px){
  .site-header .header-inner .header-search{
    display: none !important;
  }
}

/* =========================================================
   Drawer: Stable layout + premium brand skin (Header matched)
   - No muddy navy, clean cyan/azure, readable UI
   - Replace the whole block with this
========================================================= */

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

/* Backdrop: “青い薄幕”を上品に（黒で濁らせない） */
.header-drawer__backdrop{
  position: absolute !important;
  inset: 0 !important;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 160, 232, .14) !important; /* #00a0e8 ベース */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity .22s ease-out;
}

/* Panel: 左固定 + 幅安定 + “濁らない”グラデ */
.header-drawer__panel{
  position: relative !important; /* 追加 */
  isolation: isolate;            /* 追加（重なりを安定） */
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: auto !important;

  width: 360px !important;
  max-width: 86vw !important;

  transform: translateX(-104%) !important;
  transition: transform .26s cubic-bezier(.2,.8,.2,1) !important;

  /* Premium cyan/azure skin */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.06) 0%,
    rgba(255,255,255,.02) 18%,
    var(--brand-500) 55%,
    var(--brand-600) 100%
  ) !important;




  color: #fff !important;

  /* “柱”感：深い影は青寄りで */
  box-shadow:
    14px 0 34px rgba(0, 56, 86, .20),
    6px 0 18px rgba(0, 56, 86, .12) !important;

  display: flex !important;
  flex-direction: column !important;

  /* ガラス感（効かなくてもOK） */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* 文字の下に“薄いインク”を敷いてコントラストを安定させる */
.header-drawer__panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  /* 透明感は残しつつ、白文字が沈まない最低限の暗さ */
  background: linear-gradient(
    180deg,
    rgba(11,18,32,.18) 0%,
    rgba(11,18,32,.10) 40%,
    rgba(11,18,32,.06) 100%
  );
}


/* パネル内の実コンテンツを下地より前に */
.header-drawer__panel > *{
  position: relative;
  z-index: 1;
}

.header-drawer__backdrop{
  background: rgba(11,18,32,.14) !important; /* 青ベースより“インク”が安定 */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Header strip: 余白と仕切りを綺麗に */
.header-drawer__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.22) !important;
}

/* Brand row */
.header-drawer__logo{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.header-drawer__logo img{
  max-height: 32px;
  width: auto;
  height: auto;
}

/* Title: “白”ベースに統一（衝突を排除） */
.header-drawer__title{
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.88) !important;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Close: 濃紺を捨てて “白ガラス + 青リング” */
.header-drawer__close{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.40) !important;
  background: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;

  font-size: 1.05rem;
  cursor: pointer;

  box-shadow:
    0 10px 18px rgba(0,56,86,.14),
    0 4px 10px rgba(0,56,86,.08);

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

.header-drawer__close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.55) !important;
  box-shadow:
    0 14px 22px rgba(0,56,86,.18),
    0 6px 14px rgba(0,56,86,.10);
}

.header-drawer__close:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.78),
    0 0 0 6px rgba(0,160,232,.28),
    0 14px 22px rgba(0,56,86,.16);
}

/* Inner: 余白を“呼吸”させる */
.header-drawer__inner{
  padding: 14px 14px 18px !important;
  overflow-y: auto !important;
}

/* Drawer menu cards: “白ガラス”で統一（濁りを消す） */
.drawer-menu > li > a{
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  color: rgba(255,255,255,.96) !important;

  box-shadow:
    0 12px 22px rgba(0,56,86,.14),
    0 6px 14px rgba(0,56,86,.08) !important;

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

.drawer-menu > li > a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.20) !important;
  border-color: rgba(255,255,255,.40) !important;
  box-shadow:
    0 16px 26px rgba(0,56,86,.18),
    0 8px 16px rgba(0,56,86,.10) !important;
}

/* Open state */
.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) !important;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .header-drawer__backdrop,
  .header-drawer__panel,
  .header-drawer__close,
  .drawer-menu > li > a{
    transition: none !important;
  }
}



/* =========================
   Drawer Main Menu (Premium)
   - Replace the whole block with this
========================= */

.header-drawer-nav{
  margin-top: 10px !important;
}

/* リスト：詰めすぎない。均一なリズム */
.drawer-menu{
  list-style: none;
  margin: 0 !important;
  padding: 6px 0 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px; /* 0.2rem は貧相に見えるので“気持ち良い間隔”へ */
}

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

/* 行：白ガラスカード + 上品な輪郭 */
.drawer-menu > li > a{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 12px 12px 14px;
  border-radius: 14px;

  font-size: 0.94rem;
  line-height: 1.2;
  letter-spacing: .02em;

  color: rgba(255,255,255,.96);
  text-decoration: none;

  /* “濁りのない”半透明白（青パネル上で綺麗に乗る） */
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.12));
  border: 1px solid rgba(255,255,255,.22);

  /* 黒影で沈めず、青寄りの影で“品”を出す */
  box-shadow:
    0 12px 22px rgba(0,56,86,.18),
    0 6px 12px rgba(0,56,86,.10);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

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

/* 左のインジケータ：小さく、鋭く（#00a0e8 系で統一） */
.drawer-menu > li > a::before{
  content: "";
  flex: 0 0 8px;
  height: 8px;
  border-radius: 999px;

  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), rgba(255,255,255,0) 55%),
              linear-gradient(135deg, #1fbaff 0%, #00a0e8 55%, #007fc6 100%);

  box-shadow:
    0 0 0 3px rgba(255,255,255,.16),
    0 8px 14px rgba(0,56,86,.18);
}

/* 右の矢印：› だと古いので、軽く・細く */
.drawer-menu > li > a::after{
  content: "→";
  font-size: .95rem;
  opacity: .72;
  transform: translateX(-1px);
  transition: transform .14s ease, opacity .18s ease;
}

/* hover：持ち上げすぎない。“発光”中心 */
.drawer-menu > li > a:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.34);
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.14));
  box-shadow:
    0 16px 26px rgba(0,56,86,.22),
    0 8px 16px rgba(0,56,86,.12);
  filter: saturate(1.03);
}

.drawer-menu > li > a:hover::after{
  transform: translateX(2px);
  opacity: .92;
}

/* アクティブ：押下感 */
.drawer-menu > li > a:active{
  transform: translateY(0);
}

/* キーボード操作：上品なリング（白 + #00a0e8） */
.drawer-menu > li > a:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.72),
    0 0 0 6px rgba(0,160,232,.22),
    0 16px 26px rgba(0,56,86,.18);
}

/* 現在ページ：派手に塗らず“輪郭”で見せる */
.drawer-menu > li > a[aria-current="page"]{
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.16));
  border-color: rgba(255,255,255,.42);
}

/* =========================
   Drawer Widgets (optional)
========================= */

.header-drawer__widgets{
  margin-top: 18px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,.22) !important;
}

.header-drawer__widgets .widget{
  margin-bottom: 14px !important;
}

.header-drawer__widgets .widget-title{
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  margin: 0 0 8px;
}

/* ドロワーを開いている間は背景スクロール停止 */
html.drawer-open,
html.drawer-open body{
  overflow: hidden;
}

/* =========================
   Responsive (header area)
========================= */

@media (max-width: 959px){
  .header-inner{
    padding: 0.55rem 1rem;
    gap: 1rem;
  }
  .global-nav{ display: none; }
  .header-actions{ display: none; }
}

@media (min-width: 960px){
  .header-inner{
    padding: 0.75rem 1.8rem;
    display: flex;
    align-items: center;
    gap: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .drawer-menu > li > a,
  .drawer-menu > li > a::after{
    transition: none !important;
  }
  .drawer-menu > li > a:hover{
    transform: none !important;
  }
}



/* Drawer内シェア：下に余白を作って詰まり回避 */
.header-drawer__inner .jpn-share-area--drawer{
  margin-top: 16px;
}

/* ガラスカード（ドロワー背景に馴染ませる） */
.header-drawer__inner .jpn-share-area--drawer .jpn-share-area__card{
  padding: 14px 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
}

/* =========================================================
   Drawer Share (scriptlesssocialsharing) : force white circles
   ========================================================= */
.header-drawer__inner .jpn-share-area--drawer .scriptlesssocialsharing__buttons a.button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;

  border-radius: 999px !important;

  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.55) !important;

  box-shadow:
    0 10px 18px rgba(0,56,86,.14),
    0 4px 10px rgba(0,56,86,.08) !important;
}

/* hover（任意） */
.header-drawer__inner .jpn-share-area--drawer .scriptlesssocialsharing__buttons a.button:hover{
  background: #fff !important;
}

/* 中のアイコンサイズ＆色を安定 */
.header-drawer__inner .jpn-share-area--drawer .scriptlesssocialsharing__icon{
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

/* email（svg）の色を黒寄りに */
.header-drawer__inner .jpn-share-area--drawer svg.scriptlesssocialsharing__icon{
  fill: rgba(11,18,32,.88) !important;
}