/* ヘッダー */
header {
    position: fixed;
    top: 0px;
    right: 0px;
    display: flex;
    width: 100vw;
    box-shadow: 10px 5px 5px #1f496e62;
    background-color: var(--bg);
    height: 7vh;
    gap: 1rem;
    z-index: 99999;
}

/* 企業名・ロゴ */
header div.site-title {
    width: 19vw;
    padding-left: 4vw;
    /* 縦中央の肝 */
    display: flex;
    align-items: center;   /* 縦中央 */
    /* 横も中央なら↓ */
    justify-content: left;
}

header div.site-title h1 {
    font-size: clamp(1.2rem, 19vw, 1.5rem);
    margin: 0;
    color: var(--base);
}

header div.site-title h1 span {
    font-weight: 400;
}


/* =========================================================
   Global Nav Overlay (Top-level only) - Final CSS
   - 固定ヘッダー
   - ハンバーガーで白オーバーレイ全画面
   - メニューはトップ階層リンクのみ（サブ無し）
   - JP⇄EN表示をhover/focusでクロスフェード
   - EN固定トグルに対応（任意）
   ========================================================= */

/* ---- Base Reset ---- */


/* キーボード操作時の見やすいフォーカスリング */
:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--base) 70%, #fff);
    outline-offset: 2px;
}

/* 画面リーダー専用テキスト */
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* スクロールロック（メニュー表示中にbodyへ付与） */
body.nav-open {
    overflow: hidden;
}

/* =========================================================
   Fixed Header
   ========================================================= */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;             /* top:0; left:0; right:0 */
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(12px, 2vw, 2rem);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 120;
}
.brand{
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--text-strong);
}
.brand:hover{ color: var(--base-600); }

/* ハンバーガー */
.hamburger{
  -webkit-tap-highlight-color: transparent;
  width: 44px; height: 44px; border: 0; padding: 0;
  background: transparent; display: inline-grid; place-items: center;
  cursor: pointer;
  z-index: 122;
}
.hamburger .bars{
  width: 24px; height: 2px; background: var(--text-strong);
  position: relative; transition: background .2s ease;
}
.hamburger .bars::before,
.hamburger .bars::after{
  content:""; position:absolute; left:0; width:24px; height:2px;
  background: var(--text-strong);
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.hamburger .bars::before{ top: -8px; }
.hamburger .bars::after { top:  8px; }

/* 開いたときはXアイコン */
.hamburger.is-open .bars{ background: transparent; }
.hamburger.is-open .bars::before{ top:0; transform: rotate(45deg); }
.hamburger.is-open .bars::after { top:0; transform: rotate(-45deg); }

/* （任意）言語トグルの見た目。HTMLに .lang-toggle があれば有効 */
.lang-toggle{
  margin-left: 8px; padding: 6px 10px; border-radius: 8px;
  border:1px solid var(--border); background:#fff; color:var(--text-strong);
  font-weight:700; cursor:pointer;
}
.lang-toggle[aria-pressed="true"]{
  background: var(--surface); border-color: var(--border);
}

/* =========================================================
   Fullscreen Overlay Nav (Top-level only)
   ========================================================= */
.nav-overlay{
  position: fixed; inset: 0;
  background: #fff; /* ページを白で覆う */
  transform: translateY(-100%); /* 上から出現 */
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
  z-index: 120;                 /* headerより上 */
  display: flex; flex-direction: column;
}
.nav-overlay.is-open{
  transform: translateY(0);
  opacity: 1;
}

/* 中身のコンテナ */
.nav-inner{
  width: calc(100% - 20wv);
  padding: 2vw 10vw;
}

/* 閉じるボタン（右上の×） */
.nav-close{
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  z-index: 122;
}
.nav-close::before, .nav-close::after{
  content:""; position:absolute; top:50%; left:50%; width:24px; height:2px;
  background: var(--text-strong); transform-origin: center;
}
.nav-close::before{ transform: translate(-50%,-50%) rotate(45deg); }
.nav-close::after { transform: translate(-50%,-50%) rotate(-45deg); }

/* タイトル */
.nav-title{
  margin: clamp(48px, 6vw, 64px) 0 16px;
  font-size: clamp(1.5rem, 3rem, 5rem);
  color: var(--text-strong);
  font-weight: 200;
}

/* リスト（トップ階層のみ） */
.nav-list{list-style: none; margin: 0; padding: 0;}
.nav-item + .nav-item{ border-top: 1px solid var(--border); padding-top: 1.5rem; }

/* 各リンク行 */
.nav-link{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 0;
  font-weight: 400; color: var(--text-strong);
  font-size: clamp(16px, 1.6vw, 5rem);
  letter-spacing: 1.1px;
}

/* ホバー時の色ニュアンス（控えめに） */
.nav-link:hover{ color: var(--base-600); }

/* =========================================================
   JP ⇄ EN クロスフェード（hover / focus-visible）
   - navリンクと任意の .label に適用
   ========================================================= */
.label, .nav-link{ display: grid; align-items: center; }
.label .jp, .label .en,
.nav-link .jp, .nav-link .en{
  grid-area: 1 / 1;
  transition: opacity .20s ease, transform .20s ease;
  white-space: nowrap;
}

/* ENは最初は隠す（見た目だけ。aria-hiddenで読み上げ除外推奨） */
.label .en, .nav-link .en{
  opacity: 0; transform: translateY(4px);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto,
               "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  letter-spacing: 0.2em;
}

/* マウスhover & キーボードfocusでENを出す、JPを引っ込める */
.nav-link:hover .jp,
.nav-link:focus-visible .jp{
  opacity: 0; transform: translateY(-4px);
}
.nav-link:hover .en,
.nav-link:focus-visible .en{
  opacity: 1; transform: translateY(0);
}

/* EN固定モード（任意）：<html data-lang="en"> で全体英語表示に */
html[data-lang="en"] .jp{ opacity: 0; transform: translateY(-4px); }
html[data-lang="en"] .en{ opacity: 1; transform: translateY(0); }

/* 動きが苦手な人に配慮 */
@media (prefers-reduced-motion: reduce) {
  .nav-overlay { transition: none; }
  .nav-link .jp, .nav-link .en, .label .jp, .label .en { transition: none; }
}

/* スムーススクロール（OS設定で“動きを減らす”の人は自動で無効化されるブラウザが多い） */
html { scroll-behavior: smooth; }

/* 固定ヘッダーぶんのオフセット（遷移先側にこのクラスを付けるとズレない） */
.scroll-target { scroll-margin-top: var(--header-h); }

/* バグ修正 & レイヤー調整 */
.nav-inner{ width: calc(100% - 20vw); }   /* ← 20wv になっていたので修正 */
.nav-overlay{ z-index: 140; }            /* ヘッダーより確実に前面へ */
.nav-close{ z-index: 150; }


/* 楽天ボタン */
header div.rakuten-button {
    width: 19vw;
    /* 縦中央の肝 */
    display: flex;
    align-items: center; /* 縦中央 */
    /* 横も中央なら↓ */
    justify-content: right;
    padding-right: 2vw;
}

header div.rakuten-button div a {
    display: inline-flex;        /* インラインのままFlexに */
    align-items: center;         /* 縦中央 */
    justify-content: center;     /* 横中央（任意） */
    text-align: center;          /* 複数行時の横位置 */
    color: #fff;
    background-color: #bf0000;
    border-radius: 30px;
    padding: 0.5rem 1.25rem;
    font-weight: bold;
}

@media (width >= 0px) and (width < 479px){
  h2.nav-title {
    font-size: 2.5rem;
  }
}

@media (width >= 480px) and (width < 767px){
  h2.nav-title {
    font-size: 3rem;
  }
}

@media (width >= 768px) and (width < 1199px){
  h2.nav-title {
    font-size: 3.5rem;
  }
}

@media (width >= 1200px){
  h2.nav-title {
    font-size: 5rem;
  }
}