/* =========================================================
   ヘッダー・グローバルナビ
   ========================================================= */

.header{
  position:sticky; top:0; z-index:100;
  background:rgba(246,243,234,.96);
  backdrop-filter:blur(4px);
  border-bottom:1px solid rgba(0,0,0,.05);
}
.header-inner{
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 2rem;
}
.logo{ display:flex; align-items:center; gap:.6rem; }
.logo-icon{ width:38px; height:46px; }
.logo-text{ display:flex; flex-direction:column; line-height:1.1; }
.logo-jp{ font-family:"Noto Serif JP",serif; font-size:1.35rem; font-weight:600; letter-spacing:.15em; color:#2f3326; }
.logo-en{ font-size:.6rem; letter-spacing:.25em; color:var(--green-light); margin-top:.15rem; }
.nav{ display:flex; gap:1.6rem; font-size:.92rem; }
.nav a{ color:#454539; transition:.2s; padding-bottom:.2rem; white-space:nowrap; }
.nav a:hover{ color:var(--green); }
.nav a.active{ color:var(--green); font-weight:700; border-bottom:2px solid var(--green); }

/* ===== ハンバーガーメニュー ===== */
.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; cursor:pointer;
  padding:.3rem .4rem; width:38px; height:38px; flex-shrink:0;
}
.nav-toggle span{
  display:block; width:22px; height:2px;
  background:var(--text); border-radius:1px;
  transition:.25s; margin:0 auto;
}
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ===== レスポンシブ =====
   注: デスクトップ幅でも 8項目のナビが1行に収まるには約1160px以上必要なため、
   ブレークポイントを1024→1200pxに引き上げ、狭い幅で文字が折り返して
   崩れて見える問題を解消する。 */
@media (max-width:1200px){
  .nav-toggle{ display:flex; }
  .nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:rgba(246,243,234,.98);
    border-bottom:2px solid var(--beige);
    box-shadow:0 4px 16px rgba(0,0,0,.1);
    z-index:99;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:.9rem 2rem; border-bottom:1px solid var(--beige); font-size:1rem; }
  .nav a:last-child{ border-bottom:none; }
}