/* =======================================================
   Header (image logo) + Global Navigation
   — 1ファイル完結 / 重複なし / PC↔SPで素直に切替
   色やフォントは base.css の変数を使用（無ければ下のfallback）
======================================================= */

/* Fallback variables（base.cssに既にあるなら削除OK） */
:root{
  --c-deep:  #823327;   /* 濃い桃 */
  --c-pale:  #eecebf;   /* 薄い桃 */
  --c-ink:   #1b2430;
  --c-white: #fff;
}

/* ========== Header: image logo ========== */
.site-header{
  position: relative;
  width: 100%;
  z-index: 50;
}
.site-header .header-inner{
  width: 100%;
  margin: 0;
  padding: 0;
}
.site-header .brand{ display:block; width:100%; line-height:0; background:none; }
.site-header .brand-img{
  display:block;
  width:100%;
  height:auto;            /* 常に全体を表示（トリミングしない） */
}

/* ========== Global Nav (desktop base) ========== */
.global-nav{
  width:100%;
  background: var(--c-deep);
  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.gn-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  justify-content:space-between;
  align-items:stretch;
}
.gn-list > li{
  border-inline-end: 1px solid rgba(0,0,0,.12);
}
.gn-list > li:last-child{ border-inline-end:none; }

.gn-list a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:72px;
  padding:8px 12px;
  text-decoration:none;
  color: var(--c-pale);
  transition: background .25s ease, color .25s ease, transform .2s ease, opacity .2s ease;
}
.gn-list a .gn-jp{
  font-size:.9rem;
  letter-spacing:.08em;
}
.gn-list a .gn-en{
  font-size:1.8rem;
  font-style:italic;
  line-height:1.05;
}
.gn-list a:hover,
.gn-list a:focus-visible{
  background: var(--c-pale);
  color: var(--c-deep);
  outline: none;
}

/* ========== Hamburger (hidden on desktop) ========== */
.nav-toggle{
  display:none;           /* PCでは非表示 */
}

/* ========== Responsive ========== */

/* タブレット：少し詰める */
@media (max-width: 1024px){
  .gn-list a{ min-height:68px; }
  .gn-list a .gn-en{ font-size:1.6rem; }
}

/* スマホ：ハンバーガー表示＆縦ナビ */
@media (max-width: 768px){
  /* ハンバーガー本体（右上） */
  .nav-toggle{
    position:absolute;
    top:10px; right:12px;
    width:44px; height:44px;
    display:inline-flex;
    align-items:center; justify-content:center;
    background: var(--c-deep);
    border:none; border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,.25);
    cursor:pointer;
    z-index:60;
  }
  .nav-toggle:focus-visible{ outline:2px solid var(--c-pale); outline-offset:2px; }
 /* 3本線 */
  .nav-toggle__bar{
  
    width: 22px; height: 2px;
    background: var(--c-pale);
    transition: transform .25s ease, opacity .2s ease;
  }
  .nav-toggle__bar + .nav-toggle__bar{ margin-top: 5px; }


  /* 変形（X） */
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* ナビ：閉じている時は高さ0で隠す（空白ゼロ） */
  .global-nav{
    position:relative;
    background: linear-gradient(0deg, var(--c-deep), #6f2a23);
    color: var(--c-pale);
    max-height:0;
    overflow:hidden;
    padding:0;
    transition:max-height .28s ease, padding .2s ease;
    box-shadow:0 6px 20px rgba(0,0,0,.25);
  }
  /* 開いた時 */
  .global-nav.is-open{
    max-height:70vh;     /* 十分大きく */
    padding:6px 0 10px;
  }

  /* 縦並び */
  .gn-list{
    flex-direction:column;
    align-items:stretch;
  }
  .gn-list > li{ border-inline-end:none; border-bottom:1px solid rgba(255,255,255,.15); }
  .gn-list > li:last-child{ border-bottom:none; }

  .gn-list a{
    min-height:unset;
    padding:14px 18px;
    color: var(--c-pale);
  }
  .gn-list a .gn-en{ font-size:1.3rem; }
}

/* さらに小さい端末でロゴ高さを少し抑える（任意） */
@media (max-width: 520px){
  .gn-list a{ padding:12px 16px; }
  .gn-list a .gn-en{ font-size:1.2rem; }
}

/* ====== グローバルナビを均等配置 ====== */
.global-nav {
  background-color: var(--c-deep, #823327);
  width: 100%;
}

.global-nav .gn-list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.global-nav .gn-list > li {
  flex: 1;                          /* 均等割りの要！ */
  text-align: center;               /* 中央寄せ */
  border-right: 1px solid rgba(0,0,0,.12);
}

.global-nav .gn-list > li:last-child {
  border-right: none;               /* 最後だけ区切りなし */
}

.global-nav .gn-list > li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--c-pale, #eecebf);
  transition: background .25s ease, color .25s ease;
}

.global-nav .gn-list > li a .gn-jp {
  font-size: 0.9rem;
  letter-spacing: .08em;
}
.global-nav .gn-list > li a .gn-en {
  font-size: 1.6rem;
  font-style: italic;
  line-height: 1.05;
}

/* hover時に背景と文字色を反転 */
.global-nav .gn-list > li a:hover {
  background-color: var(--c-pale, #eecebf);
  color: var(--c-deep, #823327);
}

/* ====== スマホ用調整 ====== */
@media (max-width: 768px) {
  .global-nav .gn-list {
    flex-direction: column;
  }
  .global-nav .gn-list > li {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.15);
  }
  .global-nav .gn-list > li:last-child {
    border-bottom: none;
  }
}