/* =========================================
   global_nav.css（Hero部SPデザイン統一版 + 完全統合）
   追加: 各セクションごとのナビゲーション色切り替え
   方針:
     - #global_menu と #main-menu を“同格”として固定化
     - ラッパー(#global_nav)はフェード管理のみ（pointer-eventsは子で許可）
     - light/dark の色は currentColor で一括制御
     - ★タイトルとメニューのタイポグラフィを完全共通化
========================================= */

/* ===== タイトルとメニューのサイズ/位置・ウェイトを共通管理（★強化） =====
   - 画面幅に応じたサイズは変数で一元管理
   - SP時はメディアクエリ側で“変数だけ”上書き（個別要素での font-size 指定はしない）
   - ★フォントファミリーも変数化し、タイトルと(MENU)で完全一致させる
   - ★NEW: オーバーレイ左の3行タイトルの“行間”を変数化（--overlayTitleLhSP）して重なりを解消
*/
:root{
  --headerTitleSize: clamp(1.4rem, 2vw, 1.8rem); /* タイトルとメニューを揃える基準 */
  --headerWeight: 800;                            /* タイトル/メニューの太さを統一 */
  --headerLetter: 0.04em;                         /* 見出し系の字間 */
  --headerTop: 16px;                              /* 上端揃え（ロゴ/メニュー共通） */
  --headerRight: 10vw;                            /* 右上メニューの右余白（従来値を継承） */
  --headerGap: 1.5em;                             /* メニュー内の間隔 */
  --headerTitleFont: inherit;                     /* ★タイトルとMENUのフォントを“一括指定” */

  /* ▼ホバーの文字スライド用（descender 切れ対策を含めた“高さ＝シフト量”） */
  --rollH: 1.15em;                                /* ウィンドウの高さ。y,g などの脚が完全に抜ける余白を確保 */

  /* ▼NEW: オーバーレイ左の3行タイトルの行高（SP向け）
     - 既存の .65 だと端末により重なりやすい → 1.10〜1.16 程度で安定化
     - まずは 1.12 を既定値にし、極小端末は後段のメディアクエリで微増 */
  --overlayTitleLhSP: 1.12;

  /* ===== NEW: Skebアイコン用の色トークン（黒茶トーンベース） =====
     - 通常/ダークは #333 系の黒茶に調和
     - 白い模様は #fff を維持（“白はそのまま”の要件）
     - リングは終端より暗くして縁取りを確実に見せる
  */
  --sns-skeb-white: #333333;     /* 白い模様（固定） */
  --sns-skeb-ring:  #1C1512;     /* 外周リング（最暗） */
  --sns-skeb-grad-start: #333333;/* グラデ開始（内側）— 将来の面塗り復帰にも対応 */
  --sns-skeb-grad-end:   #2F231E;/* グラデ終端（外側） */

  /* ===== NEW: SNS共通のホバー色（他SNSとSkebを同一色に） ===== */
  --sns-hover-color: #f64a8a;    /* 既存のピンク色に合わせる（必要ならモード別に上書き可） */
}

/* -----------------------------
   ラッパー全体（フェード管理）
----------------------------- */
#global_nav {
  position: relative;
  z-index: 2000;
  /* 旧: opacity:0（.visibleで表示）→ 初期から可視に */
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none; /* 子だけ操作可（原文維持） */
}
#global_nav.visible { opacity: 1; } /* 互換維持 */

/* ラッパー配下の操作系は許可（クリック可） */
#global_nav #global-logo,
#global_nav #global_menu,
#global_nav #main-menu,
#global_nav #sns-vertical,
#global_nav #menu-toggle-btn {
  pointer-events: auto;
}

/* -----------------------------
   タイトル（左上）
----------------------------- */
#global_nav #global-logo {
  position: fixed;
  left: 6vw;
  top: var(--headerTop);        /* ★メニューと同じ変数で上端揃え */
  z-index: 2100;
  /* タイポは下の“共通タイポ”で一括制御 */
  color: #333;           /* デフォルトを #333（light-mode で上書き） */
  opacity: 1;            /* 常時表示 */
  visibility: visible;   /* 常時表示 */
  transition: color 0.3s ease;
}
/* タイトルのリンクは親のタイポ＆色を完全継承＋下線なし */
#global_nav #global-logo .site-title{
  color: currentColor;
  text-decoration: none;
  font: inherit;         /* ★font-family/size/weight/letter-spacing/line-height 全継承 */
}

/* -----------------------------
   メニュー（右上固定：両IDに対応）
----------------------------- */
#global_nav #global_menu,
#global_nav #main-menu {
  position: fixed;
  z-index: 2200;
  top: var(--headerTop);        /* ★ロゴと同じ高さ（SPでも同値に統一） */
  right: var(--headerRight);
  display: flex;
  align-items: center;
  gap: var(--headerGap);
  color: #333;           /* デフォルトを #333（light-mode で上書き） */
  transition: color 0.3s;/* スクロール連動アニメは廃止、色のみ */
  line-height: 1;
}

#global_nav #global_menu ul,
#global_nav #main-menu ul {
  display: flex;
  gap: 2.2em;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* リンクは“親を完全継承”→ タイトルと同じ見え方になる */
#global_nav #global_menu a,
#global_nav #main-menu a {
  color: currentColor;
  text-decoration: none;
  font: inherit;          /* ← サイズ・太さ・字間・ファミリーを完全継承（重要） */
  transition: color 0.2s;
}

/* -----------------------------
   ★ タイトル＆メニューの共通タイポグラフィ
   - ここでサイズ・太さ・字間・行高・フォントファミリーを一括指定
   - 適用対象：タイトル文字／メニュー全体／SPのMENUボタン
   - これにより「SP時の(MENU)がタイトルと同じ高さ・同じフォント・同じ大きさ」に保証
----------------------------- */
#global_nav :is(#global-logo, #global_menu, #main-menu, #menu-toggle-btn){
  font-family: var(--headerTitleFont); /* ★フォントを完全一致 */
  font-size: var(--headerTitleSize);
  font-weight: var(--headerWeight);
  letter-spacing: var(--headerLetter);
  line-height: 1;                     /* ★高さ（視覚上の行高）も一致 */
}

/* -----------------------------
   メニューロールアニメーション（ホバー）
   ※ descender（y,g,p 等）の“消え残り”対策：
     - ウィンドウ高さを --rollH に揃え、移動量も同値にすることで
       1行目が完全にフレーム外へ抜ける（100%だとフォントによって残る）
----------------------------- */
#global_nav .menu-roll {
  display: block;
  height: var(--rollH);   /* ← 1行分＋わずかに余白 */
  overflow: hidden;
  position: relative;
}
#global_nav .menu-roll span {
  display: block;
  transform: translateY(0);
  will-change: transform;
  transition: transform 1.1s cubic-bezier(.4,0,.2,1);
}
#global_nav a:hover .menu-roll span {
  transform: translateY(calc(-1 * var(--rollH))); /* ← 高さぶん正確に上へ */
}
#global_nav .menu-roll::after {
  content: attr(data-hover);
  display: block;
  position: absolute;
  left: 0; top: var(--rollH);                 /* ← 下に待機（高さと一致） */
  width: 100%;
  color: currentColor;
  transition: top 1.1s cubic-bezier(.4,0,.2,1);
}
#global_nav a:hover .menu-roll::after { top: 0; }

/* -----------------------------
   スマホ用メニューボタン（右上）
----------------------------- */
#global_nav #menu-toggle-btn {
  display: none;           /* SPで表示 */
  background: none;
  border: none;
  color: #333;             /* デフォルトは #333（light-mode で上書き） */
  cursor: pointer;
  z-index: 2300;
  transition: color 0.2s;
  /* タイポは“共通タイポ”で付与済み（font-family/size/weight/letter-spacing/line-height） */
  padding: 0;
  margin-left: 1.2em;
}
#global_nav #menu-toggle-btn:active { color: #f64a8a; }

/* -----------------------------
   SNS 縦アイコン（右）
----------------------------- */
#global_nav #sns-vertical {
  position: fixed;
  top: 50%;
  right: 2vw;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.6em;
  z-index: 2300;
  color: #333;             /* デフォルトは #333（light-mode で上書き） */
  transition: color 0.3s;
}
#global_nav #sns-vertical a { color: inherit; text-decoration: none; }
#global_nav #sns-vertical svg {
  width: 38px; height: 38px;
  fill: currentColor;      /* 親の color に追随（※Skebは下の専用ルールで上書き） */
  transition: filter .22s, fill .22s; /* ← 他SNSの“ふわっ”はここが効いている */
  filter: drop-shadow(0 2px 2px #0002);
}
/* ▼ホバー時の色を変数で統一（他SNSすべてに適用） */
#global_nav #sns-vertical a:hover svg {
  fill: var(--sns-hover-color, #f64a8a);
}

/* ===== Skebアイコン専用（SVG内style撤去の外部化版） ====================
   - .sns-icon--skeb の子要素に直接 fill を与える
   - 親 svg の fill（currentColor）より優先されるため、他SNSの挙動とは独立
   - 通常時はブランド/設計色、ホバー時は“Skeb専用ホバー上書き”で統一
----------------------------------------------------------------------- */
#global_nav #sns-vertical .sns-icon--skeb .skeb-fill-white { fill: var(--sns-skeb-white, #ffffff); }
#global_nav #sns-vertical .sns-icon--skeb .skeb-fill-none  { fill: none; }
#global_nav #sns-vertical .sns-icon--skeb .skeb-fill-grad  { fill: url(#skeb-gradient); } /* 将来の面塗り復帰に対応 */
#global_nav #sns-vertical .sns-icon--skeb .skeb-fill-ring  { fill: var(--sns-skeb-ring, #1C1512); }

/* ▼Skebも“ふわっ”と変わるように、子パーツ側へも遷移を付与 */
#global_nav #sns-vertical .sns-icon--skeb .skeb-fill-ring,
#global_nav #sns-vertical .sns-icon--skeb .skeb-fill-white,
#global_nav #sns-vertical .sns-icon--skeb .skeb-fill-grad {
  transition: fill .22s;                 /* 他SNSの svg と同速度に揃える */
}
#global_nav #sns-vertical .sns-icon--skeb #skeb-gradient stop{
  transition: stop-color .22s;           /* 将来のグラデ復帰時に“ふわっ”と色が変わる */
}

/* --- グラデーション stop-color をCSS変数で制御（面塗りがある場合に有効） --- */
#global_nav #sns-vertical .sns-icon--skeb #skeb-gradient stop:nth-child(1) {
  stop-color: var(--sns-skeb-grad-start, #333333); /* 内側（開始） */
}
#global_nav #sns-vertical .sns-icon--skeb #skeb-gradient stop:nth-child(2) {
  stop-color: var(--sns-skeb-grad-end, #2F231E);   /* 外側（終端） */
}

/* --- Skeb専用ホバー上書き（他SNSと同一色へ統一） -----------------------
   - Skebは子要素に個別 fill を持つため、親 svg のピンクが継承されない
   - よって“子要素を直接”同じ色で上書きして統一
----------------------------------------------------------------------- */
#global_nav #sns-vertical a:hover .sns-icon--skeb .skeb-fill-ring,
#global_nav #sns-vertical a:hover .sns-icon--skeb .skeb-fill-white{
  fill: var(--sns-hover-color, #f64a8a);
}
/* （面塗りを復帰させた場合の保険：グラデも同色に変えるなら以下を有効化）
#global_nav #sns-vertical a:hover .sns-icon--skeb .skeb-fill-grad{ fill: var(--sns-hover-color, #f64a8a); }
#global_nav #sns-vertical a:hover .sns-icon--skeb #skeb-gradient stop{ stop-color: var(--sns-hover-color, #f64a8a); }
*/

/* -----------------------------
   スマホ対応：位置や間隔のみ。サイズは“変数だけ”を上書き
----------------------------- */
@media (max-width: 700px) {
  /* ★SPは変数を上書きするだけで、タイトル/メニュー/MENUボタンの“フォント・大きさ・行高”が完全一致 */
  :root{
    --headerTitleSize: clamp(1.2rem, 4.8vw, 1.4rem); /* スマホ時の共通サイズ */
    /* 必要なら SP専用フォントもここで：
       --headerTitleFont: "YourSPFont", system-ui, sans-serif; */
  }

  #global_nav #global-logo{
    left:16px;
    top: var(--headerTop);            /* ★ロゴの基準位置（共通変数） */
  }
  #global_nav #global_menu,
  #global_nav #main-menu{
    top: var(--headerTop);            /* ★SPでも“ロゴと同じ高さ”に固定 */
    right: 2vw;
    gap: .5em;
  }

  /* メニューのテキストリンク群は SP では隠し、(MENU) ボタンを表示 */
  #global_nav #global_menu ul,
  #global_nav #main-menu ul { display: none; }
  #global_nav #menu-toggle-btn { display:block; }

  /* ★SP中央固定の“ビヨンビヨン問題”対策
     - まずは従来どおりの 50% 基準（古いブラウザ用フォールバック）
     - さらに svh 対応端末では 50svh を優先し、アドレスバー表示/非表示でも中心がズレにくい
  */
  #global_nav #sns-vertical { right: 1vw; gap: 1em; top: 50%; transform: translateY(-50%); }
  @supports (height: 1svh) {
    #global_nav #sns-vertical { top: 50svh; } /* ← Small Viewport Height を基準にして安定化 */
  }
  /* 端末下部の安全領域に配慮したい場合の微調整（必要なら解除）
     #global_nav #sns-vertical { margin-bottom: env(safe-area-inset-bottom); }
  */

  #global_nav #sns-vertical svg { width: 30px; height: 30px; }
}

/* -----------------------------
   オーバーレイメニュー（SP全画面）
----------------------------- */
#menu-overlay {
  position: fixed;
  top: -100%; left: 0; width: 100%; height: 100%;
  background: #000; z-index: 5000; transition: top .8s ease;
  color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center;
}
#menu-overlay.open { top: 0; }

/* ▼(CLOSE) を (MENU) と完全一致にする（高さ/フォント/サイズ）
   - top を --headerTop に統一（MENU と同じ上端基準）
   - タイポはヘッダー共通変数を適用（family/size/weight/letter/line-height）
*/
#menu-overlay #menu-close-btn{
  position:absolute; top: var(--headerTop); right:2vw; /* 旧: top:8px → 共通変数へ */
  background:none; border:none; color:#fff; cursor:pointer;
  font-family: var(--headerTitleFont);
  font-size: var(--headerTitleSize);
  font-weight: var(--headerWeight);
  letter-spacing: var(--headerLetter);
  line-height:1;
  transition: color .2s;
}

/* ▼オーバーレイ左の3行タイトル：重なり解消（行間を十分に確保） */
#menu-overlay .overlay-logo{
  position:absolute; top:16px; left:16px; text-align:left;
  line-height: var(--overlayTitleLhSP); /* 旧: .65 → 変数化して安全値へ */
  letter-spacing:.04em; font-size:clamp(2rem, 7vw, 3rem);
  font-weight:800; color:#fff;
}
#menu-overlay .overlay-logo .thin{ font-weight:300 !important; }
#menu-overlay .overlay-logo .line3{
  display:block; font-size:.37em; font-weight:500; opacity:.74;
  margin-top:.28em; /* 旧: .22em → わずかに増やし重なりを抑制 */
  letter-spacing:.02em;
}

#menu-overlay .overlay-menu{ list-style:none; padding:0; margin:0; text-align:center; }
#menu-overlay .overlay-menu li{ margin:15px 0; }
#menu-overlay .overlay-menu a{
  text-decoration:none; color:#fff; font-size:2rem; font-weight:bold; transition: color .3s;
}
#menu-overlay .overlay-menu a:hover{ color:#ccc; }

/* =========================================
   ナビゲーションの色切り替え (セクション単位)
   data-nav-color="light" → 白
   data-nav-color="dark"  → 黒 (#333)
   - JS が #global_nav に .light-mode / .dark-mode を付与
   - 文字色は currentColor 運用（リンク/SVGも追随）
========================================= */

/* lightモード（白）
   - Skebは“外周側を一段暗く”し、白背景でも輪郭が消えないようにする
   - 変数だけ上書き → グラデ/リング/ホバーが自動追随
*/
#global_nav.light-mode #global-logo,
#global_nav.light-mode #global_menu,
#global_nav.light-mode #main-menu,
#global_nav.light-mode #sns-vertical,
#global_nav.light-mode #menu-toggle-btn { color: #fff; }
#global_nav.light-mode #sns-vertical svg { fill: #fff; }

#global_nav.light-mode {
  --sns-skeb-white: #ffffff;     /* 白模様はそのまま */
  --sns-skeb-grad-start: #333333;/* 内側は据え置き */
  --sns-skeb-grad-end:   #251B16;/* 外側を一段暗く（背景#fffでの同化防止） */
  --sns-skeb-ring:       #ffffff;/* 終端よりさらに暗い輪郭で確実に見せる */
  /* 必要ならホバー色もモードで変更可
     --sns-hover-color: #f64a8a;
  */
}

/* darkモード（黒）— デフォルトと同値（互換のため明示） */
#global_nav.dark-mode #global-logo,
#global_nav.dark-mode #global_menu,
#global_nav.dark-mode #main-menu,
#global_nav.dark-mode #sns-vertical,
#global_nav.dark-mode #menu-toggle-btn { color: #333; }
#global_nav.dark-mode #sns-vertical svg { fill: #333; }

/* ▼極小端末の保険：重なりやすい場合は行間をさらに微増 */
@media (max-width: 360px){
  :root{ --overlayTitleLhSP: 1.16; }
}