/* =========================================================
   HEADER STRUCTURE (brand + globalMenu + localMenu)
========================================================= */
.site-header {
  backdrop-filter : blur(6px);
  background      : rgba(255, 255, 255, 0.9);
  height          : 70px;
  left            : 0;
  padding-top     : 10px;
  position        : fixed;
  right           : 0;
  top             : 0;
  z-index         : 100;
}

/* ヘッダー全体 */
header .container.nav {
  align-items     : center;
  display         : flex;
  flex-wrap       : wrap;
  justify-content : space-between;
}

/* 上段：ブランド＋グローバルメニューを横並び */
header .container.nav > div,
header .container.nav > a.brand,
header .container.nav > .nav-links {
  align-items : center;
  display     : flex;
}

/* ブランド（左側） */
.brand {
  color          : var(--color-accent-dark);
  font-family    : "Playfair Display", serif;
  font-size      : 1.1rem;
  font-weight    : 700;
  letter-spacing : .12em;
  text-transform : uppercase;
}

header .brand-text {
  color          : var(--color-accent-dark, #8C6C4A);
  font-size      : 1.3rem;
  font-weight    : 700;
  letter-spacing : 0.02em;
}

/* グローバルメニュー（右側） */
.nav-links {
  font-family : "Noto Sans JP", sans-serif;
}

header .nav-links ul.globalMenu {
  align-items : center;
  display     : flex;
  gap         : 24px;
  list-style  : none;
  margin      : 0;
  padding     : 0;
}

header .nav-links ul.globalMenu > li > a {
  border-radius   : 4px;
  color           : #333333;
  display         : block;
  font-weight     : 500;
  padding         : 10px 14px;
  text-decoration : none;
  transition      : color 0.2s ease, background 0.2s ease;
}

header .nav-links ul.globalMenu > li > a:hover {
  background : rgba(181, 148, 114, 0.1);
  color      : var(--color-accent-dark, #8C6C4A);
}

/* サブメニュー */
header .nav-links ul.globalMenu li ul {
  background     : #FFFFFF;
  border         : 1px solid rgba(0, 0, 0, 0.08);
  border-radius  : 6px;
  box-shadow     : 0 8px 24px rgba(0, 0, 0, 0.1);
  display        : flex;
  flex-direction : column;
  left           : 0;
  margin         : 0;
  min-width      : 200px;
  opacity        : 0;
  padding        : 8px 0;
  position       : absolute;
  top            : 100%;
  transform      : translateY(5px);
  transition     : all 0.25s ease;
  visibility     : hidden;
  z-index        : 100;
}


header .nav-links ul.globalMenu > li:hover > ul {
  opacity    : 1;
  transform  : translateY(0);
  visibility : visible;
}

header .nav-links ul.globalMenu li ul li a {
  color           : #333333;
  display         : block;
  font-size       : 0.9rem;
  padding         : 10px 18px;
  text-decoration : none;
  transition      : background 0.2s ease, color 0.2s ease;
  white-space     : nowrap;
}

header .nav-links ul.globalMenu li ul li a:hover {
  background : rgba(181, 148, 114, 0.1);
  color      : var(--color-accent-dark, #8C6C4A);
}

/* 下段：ローカルメニューを中央寄せ */
.localMenu {
  align-items     : center;
  background      : var(--color-bg);;
  border-top      : 1px solid rgba(0, 0, 0, 0.08);
  display         : flex;
  gap             : 18px;
  justify-content : center; /* ✅ 中央揃えに変更 */
  list-style      : none;
  margin          : 0;
  padding         : 6px 0 0;
  position        : relative;
  top             : 16px;
}

header .container.nav nav + nav {
  display         : flex;
  flex-basis      : 100%;
  justify-content : center; /* ← ココが効きます */
}

.localMenu li a {
  border-radius   : 6px;
  color           : #333333;
  display         : block;
  font-size       : 0.9rem;
  font-weight     : 600;
  padding         : 6px 12px;
  text-decoration : none;
  transition      : background 0.2s ease, color 0.2s ease;
}

.localMenu li a:hover {
  background : rgba(181, 148, 114, 0.1);
  color      : var(--color-accent-dark, #8C6C4A);
}

.localMenu li a.active {
  background  : var(--color-accent, #B59472);
  box-shadow  : 0 -2px 6px rgba(181, 148, 114, 0.2) inset;
  color       : #FFFFFF;
  font-weight : 700;
}

/* すべての li を相対配置に（子 ul の基準にする） */
header .nav-links ul.globalMenu li {
  position : relative;
}

/* 第2階層以降の入子メニュー */
header .nav-links ul.globalMenu li ul ul {
  border-radius : 6px;
  box-shadow    : 0 4px 16px rgba(0, 0, 0, 0.1);
  left          : 100%; /* 親の右に出す */
  margin-left   : 2px; /* わずかに隙間 */
  top           : 0; /* 親の高さを基準に */
}

/* 入子メニューの表示条件 */
header .nav-links ul.globalMenu li ul li:hover > ul {
  opacity    : 1;
  transform  : translateY(0);
  visibility : visible;
}


/* ローカルメニューを持つページでh2が埋もれないように余白を確保 */
.has-localmenu .pageTitle h2 {
  margin-top : 80px;
}

/* =========================================================
   📱 スマホ最適化CSS（menu-toggleを.nav内に残す構成）
   PC版への影響なし
   対応幅：～480px（例：iPhone SE〜13 mini）
========================================================= */
@media (max-width : 1024px) {
  /* ===================== HEADER ===================== */
  header .container.nav > .nav-links {
    display : none !important; /* ← 常時非表示に上書き */
  }

  header .container.nav > .nav-links.open {
    background     : #FFFFFF;
    border-top     : 1px solid #EEEEEE;
    box-shadow     : 0 8px 18px rgba(0, 0, 0, 0.08);
    display        : flex !important; /* ← open時のみ表示 */
    flex-direction : column;
    left           : 0;
    position       : absolute;
    text-align     : center;
    top            : 60px;
    width          : 100%;
    z-index        : 1000;
  }


  .site-header {
    background    : #FFFFFF;
    border-bottom : 1px solid #EEEEEE;
    padding       : 10px 0;
    position      : relative;
  }

  .nav {
    align-items     : center;
    display         : flex;
    justify-content : space-between;
    position        : relative;
  }

  .brand-text {
    color       : var(--color-accent-dark);
    font-size   : 1rem;
    font-weight : 700;
  }

  /* --- ハンバーガーアイコン（絶対配置でPCに影響なし） --- */
  .menu-toggle {
    cursor   : pointer;
    display  : block !important;
    height   : 22px;
    position : absolute;
    right    : 16px;
    top      : 16px;
    width    : 26px;
    z-index  : 1000;
  }

  .menu-toggle::before,
  .menu-toggle::after,
  .menu-toggle span {
    background : #333333;
    content    : "";
    height     : 3px;
    left       : 0;
    position   : absolute;
    transition : all 0.3s;
    width      : 100%;
  }

  .menu-toggle::before {
    top : 0;
  }

  .menu-toggle::after {
    bottom : 0;
  }

  .menu-toggle span {
    top : 9px;
  }

  .menu-toggle.active::before {
    transform : translateY(9px) rotate(45deg);
  }

  .menu-toggle.active::after {
    transform : translateY(-9px) rotate(-45deg);
  }

  .menu-toggle.active span {
    opacity : 0;
  }

  /* ===================== NAV LINKS ===================== */
  .nav-links {
    background     : #FFFFFF;
    border-top     : 1px solid #EEEEEE;
    box-shadow     : 0 6px 12px rgba(0, 0, 0, 0.05);
    display        : none !important;
    flex-direction : column;
    left           : 0;
    padding        : 10px 0;
    position       : absolute;
    top            : 60px;
    width          : 100%;
    z-index        : 999;
  }

  .nav-links.open {
    display : flex;
  }

  .nav-links ul {
    display        : flex;
    flex-direction : column;
    gap            : 10px;
    list-style     : none;
    margin         : 0;
    padding        : 0;
  }

  .nav-links a {
    color           : #333333;
    display         : block;
    padding         : 10px 20px;
    text-align      : center;
    text-decoration : none;
  }
}