/* ===== Header base ===== */
:root { --header-h: 72px; --gap: 16px; --accent: #111; }

.site-header{
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap);
  height: var(--header-h);
  padding: 8px 20px;
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

/* ブランド（ロゴ + タイトル） */
.logo-container{ display:flex; align-items:center; gap:12px; min-width:0; }
.logo-container .nav-icon{ width:120px; height:auto; display:block; } /* ←ロゴ画像 */
.site-title{ 
  font-family:"Outfit","Noto Sans JP",system-ui,sans-serif;
  font-weight:700; font-size:1.05rem; line-height:1.1; letter-spacing:.02em;
  white-space:nowrap;
}

/* 右側ナビ（アイコンの下にラベル） */
.header-nav{ display:block; }
.header-nav .nav-menu{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:22px;
}
.header-nav .nav-menu > li > a{
  display:inline-flex; flex-direction:column; align-items:center; gap:6px;
  text-decoration:none; color:var(--accent);
}
.header-nav .nav-menu .nav-icon{ width:28px; height:28px; object-fit:contain; }
.header-nav .nav-menu span{ 
  font-size:12px; line-height:1.1; letter-spacing:.04em; 
  text-transform:uppercase;
}

/* hover/focus */
.header-nav a:hover span{ text-decoration:underline; }
.header-nav a:focus-visible{ outline:2px solid #bbb; outline-offset:3px; border-radius:8px; }

/* ハンバーガー（SPで表示） */
.hamburger{
  display:none; width:44px; height:44px; background:none; border:0; padding:0;
  position:relative;
}
.hamburger span{
  position:absolute; left:10px; right:10px; height:2px; background:#111;
  transition:.2s;
}
.hamburger span:nth-child(1){ top:14px; }
.hamburger span:nth-child(2){ top:21px; }
.hamburger span:nth-child(3){ top:28px; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* モバイルメニュー */
.mobile-nav{
  display:none; position:fixed; top:var(--header-h); left:0; right:0;
  background:#fff; border-bottom:1px solid #eee; box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.mobile-nav.is-open{ display:block; }
.mobile-nav ul{ list-style:none; margin:0; padding:14px 18px; }
.mobile-nav li + li{ margin-top:10px; }
.mobile-nav a{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:#111; font-weight:600;
}

/* レスポンシブ */
@media (max-width: 900px){
  .header-nav{ display:none; }      /* PCナビを隠す */
  /* .hamburger{ display:inline-block; } */
  .site-title{ font-size:1rem; }
  .logo-container .nav-icon{ width:110px; }
}
@media (max-width: 520px){
  :root{ --header-h: 64px; }
  .site-title{ display:none; }      /* 極小幅ではサブコピーを隠す */
  .logo-container .nav-icon{ width:100px; }
}

/* ブロックテーマのタイトルが被る場合はホームだけ非表示（任意） */
.home .wp-block-post-title{ display:none; }


/* 右上ナビ：アイコンの下にラベルを必ず表示 */
.header-nav .nav-menu > li > a{
  display:inline-flex;                   /* 横並び→縦並びにできるように */
  flex-direction:column;                 /* アイコンの下に文字 */
  align-items:center;
  gap:6px;
  text-decoration:none;
  color:#111;
}
.header-nav .nav-menu > li > a .font-en{
  display:block !important;              /* 以前の display:none を打ち消す */
  font-size:12px;
  line-height:1.1;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:center;
}
.header-nav .nav-menu > li > a .nav-icon{
  width:28px; height:28px; object-fit:contain; display:block;
}

/* 余白と高さの微調整（お好みで） */
.site-header{ height:72px; padding:8px 20px; }
.logo-container .nav-icon{ width:120px; height:auto; }
.site-title{ font-weight:700; font-size:1.05rem; }

/* モバイルではPCナビ非表示＋ハンバーガー表示（被り防止） */
/* @media (max-width: 900px){
  .header-nav{ display:none; }
} */
/* とても狭い幅ではラベルを横並びに（折返し防止） */
@media (max-width: 420px){
  .header-nav .nav-menu > li > a{ flex-direction:row; gap:8px; }
}

/* === Header: ロゴ基準で高さを決める === */
:root{
  --logo-h: 84px;              /* ロゴの“見せたい高さ”。必要に応じて 72–96px で微調整 */
}

.site-header{
  /* 固定heightをやめて内容で高さが決まるように */
  height: auto;
  min-height: calc(var(--logo-h) + 16px);  /* 上下パディング分を足して余裕を作る */
  padding-block: 8px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ロゴ画像は“高さ”で揃える。幅は自動で比率維持 */
.logo-container .nav-icon{
  height: var(--logo-h);
  width: auto;
  display: block;              /* 画像の下に余白が出ないように */
}

/* 右側ナビは中央揃え */
.header-nav .nav-menu{
  display: flex;
  align-items: center;
  gap: 22px;
}

/* ==== Header nav：縦線の仕切り ==== */
:root{
  --nav-divider-color: #D9D9D9;  /* 仕切りの色 */
  --nav-divider-h: 34px;         /* 仕切りの高さ（アイコン+ラベルに合わせて微調整） */
  --nav-item-gap: 22px;          /* ナビ間のスペース */
}

/* gap を自前で管理して、仕切りを差し込みやすくする */
.header-nav .nav-menu{
  display:flex;
  align-items:center;
  gap: 0;                         /* ← ここを 0 にして margin/padding で間隔を作る */
}

.header-nav .nav-menu > li{
  position: relative;
}

/* 2個目以降の項目の手前に仕切りを描く */
.header-nav .nav-menu > li + li{
  margin-left: var(--nav-item-gap);
  padding-left: var(--nav-item-gap);
}
.header-nav .nav-menu > li + li::before{
  content:"";
  position:absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: var(--nav-divider-h);
  background: var(--nav-divider-color);
  pointer-events: none;
  opacity: .9;
}

/* （任意）ホバー時は少し濃く */
.header-nav .nav-menu > li:hover + li::before{
  background: #BEBEBE;
}

/* モバイルではPCナビごと非表示なので仕切りも出ない */
/* @media (max-width: 900px){
  .header-nav{ display:none; }
} */
@media (max-width: 900px){
  .header-nav{ display:inline-flex; }
}


/* SP時のロゴ高さだけ少し落とす（任意） */
@media (max-width: 900px){
  :root{ --logo-h: 72px; }
}
@media (max-width: 600px){
  :root{ --logo-h: 60px; }
  .site-title{ display: none; }  /* 極小幅はサブコピーを隠すと収まり良い */
}