/*
Theme Name: Lightning Child for jpn26
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.1
*/

/* ==============================
   ロゴは流す / メニューだけ固定
   ============================== */

/* ヘッダー自体は固定しない（念のため） */
.site-header,
#header,
.l-site-header{
  position: static !important;
}

/* 固定したいグローバルナビだけ */
nav#global-nav.global-nav.global-nav--layout--float-right{
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
  background: #000 !important; /* 透け防止（必要なら） */
}

/* 固定時の見やすさ（任意） */
nav#global-nav.global-nav.global-nav--layout--float-right{
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* =================================================
   Lightning: 画面幅でメニューが消える問題の強制復旧パッチ
   （レイアウト崩れは後でOK。まず「存在するメニュー」を必ず表示）
================================================= */

/* 1) ヘッダー内の「メニューっぽい領域」を強制表示 */
.site-header,
.site-header *[class*="nav"],
.site-header *[class*="menu"],
.site-header nav,
.site-header .navbar,
.site-header .navbar-collapse,
.site-header .header-nav,
.site-header .headerNav,
.site-header .global-nav,
.site-header .global-nav-list,
.site-header .gnav,
.site-header .nav,
.site-header .menu,
.site-header .menu-header-container,
.site-header .vk-mobile-nav,
.site-header .vk-mobile-nav-menu,
.site-header .vk-menu-btn,
.site-header .navbar-toggle {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* 2) UL系が 0 になって消えるのを防ぐ */
.site-header ul[class*="menu"],
.site-header ul[class*="nav"]{
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* 3) （もしBootstrapのcollapseで潰されてる場合）collapseを常時展開 */
.site-header .collapse,
.site-header .navbar-collapse{
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* =====================================
   Lightning：ヘッダーメニューを常に横並びにする
===================================== */

/* メニューのULを横並び */
.site-header .global-nav-list,
.site-header ul.menu,
.site-header ul.nav,
.site-header .navbar-nav,
.site-header .vk-menu__list {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;   /* 1行に収まらない時は折り返し */
  gap: 12px !important;         /* メニュー間隔（好みで調整） */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* LIを横並びに安定させる */
.site-header .global-nav-list > li,
.site-header ul.menu > li,
.site-header .navbar-nav > li,
.site-header .vk-menu__list > li {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}

/* aタグの余白（クリックしやすく） */
.site-header .global-nav-list > li > a,
.site-header ul.menu > li > a,
.site-header .navbar-nav > li > a,
.site-header .vk-menu__list > li > a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 8px !important;
  white-space: nowrap !important; /* 文字が折れて縦積みになるのを防ぐ */
}

/* =====================================
   ヘッダーメニュー：縦並びを強制的に横並びへ
   （Lightningのモバイル縦メニューCSSを上書き）
===================================== */

/* メニューのリスト本体（UL）を横並び */
.site-header nav ul,
.site-header .global-nav-list,
.site-header ul.menu,
.site-header .navbar-nav,
.site-header [class*="nav"] ul,
.site-header [class*="menu"] ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;          /* 収まらなければ折り返し（横並びのまま） */
  justify-content: flex-end !important;/* 右寄せ（必要なければ消してOK） */
  align-items: center !important;
  gap: 24px !important;                /* 間隔 */
}

/* 縦並びの原因になりがちな「liが幅100%」を解除 */
.site-header nav ul > li,
.site-header .global-nav-list > li,
.site-header ul.menu > li,
.site-header .navbar-nav > li,
.site-header [class*="nav"] ul > li,
.site-header [class*="menu"] ul > li {
  width: auto !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  margin: 0 !important;
}

/* aタグもブロック100%になりがちなので解除 */
.site-header nav ul > li > a,
.site-header .global-nav-list > li > a,
.site-header ul.menu > li > a,
.site-header .navbar-nav > li > a,
.site-header [class*="nav"] ul > li > a,
.site-header [class*="menu"] ul > li > a {
  display: inline-flex !important;
  width: auto !important;
  white-space: nowrap !important;
  padding: 10px 8px !important;
}

/* Bootstrap系の縦メニュー指定が残ってるときの保険 */
.site-header .navbar-nav {
  float: none !important;
}

/* ==============================
   nav領域が細くて縦積みになるのを防ぐ（全幅化）
============================== */
nav#global-nav.global-nav.global-nav--layout--float-right{
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important; /* 右寄せ */
}

/* nav内のリストも「横に使える幅」を100%に */
nav#global-nav.global-nav.global-nav--layout--float-right .global-nav-list,
nav#global-nav.global-nav.global-nav--layout--float-right ul.menu{
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;         /* まずは折り返し禁止で横並び固定 */
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 24px !important;
}

/* 1項目ずつ改行させる指定が残ってても潰す */
nav#global-nav.global-nav.global-nav--layout--float-right .global-nav-list > li,
nav#global-nav.global-nav.global-nav--layout--float-right ul.menu > li{
  width: auto !important;
  flex: 0 0 auto !important;
}

@media (max-width: 768px){

  /* navは横スクロール禁止 */
  nav#global-nav.global-nav.global-nav--layout--float-right{
    overflow-x: hidden !important;
  }

  /* ULを絶対1行 */
  nav#global-nav.global-nav.global-nav--layout--float-right .global-nav-list,
  nav#global-nav.global-nav.global-nav--layout--float-right ul.menu{
    flex-wrap: nowrap !important;
    gap: 6px !important;              /* ← 間隔をかなり詰める */
  }

  /* 各メニュー項目 */
  nav#global-nav.global-nav.global-nav--layout--float-right .global-nav-list > li > a,
  nav#global-nav.global-nav.global-nav--layout--float-right ul.menu > li > a{
    padding: 6px 4px !important;      /* ← クリック余白を最小寄り */
    
    /* ★ここが重要：画面幅に応じて自動縮小 */
    font-size: clamp(10px, 2.8vw, 14px) !important;
    
    white-space: nowrap !important;
    letter-spacing: 0.02em !important;
  }

  /* nav左右の無駄余白を削る */
  nav#global-nav.global-nav.global-nav--layout--float-right{
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* =====================================
   vk-mobile-nav の MENU ボタンを強制的に消す（幅広めに対応）
===================================== */
@media (max-width: 1200px){
  div#vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn,
  div#vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn.position-right,
  #vk-mobile-nav-menu-btn{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* =====================================
   スマホ：1行固定のまま、横スクロールを消す（最後の詰め）
===================================== */
@media (max-width: 768px){

  /* UL全体を横方向だけ圧縮して収める */
  nav#global-nav.global-nav.global-nav--layout--float-right .global-nav-list,
  nav#global-nav.global-nav.global-nav--layout--float-right ul.menu{
    transform: scaleX(0.86) !important;          /* ← ここが効く */
    transform-origin: right center !important;
    gap: 4px !important;                         /* 間隔さらに縮小 */
  }

  /* 文字ももう少し縮める */
  nav#global-nav.global-nav.global-nav--layout--float-right .global-nav-list > li > a,
  nav#global-nav.global-nav.global-nav--layout--float-right ul.menu > li > a{
    font-size: clamp(8px, 2.15vw, 11px) !important;
    letter-spacing: -0.10em !important;
    padding: 4px 6px !important;
  }
}

/* 小さいiPhoneだけ、もう一段だけ圧縮 */
@media (max-width: 390px){
  nav#global-nav.global-nav.global-nav--layout--float-right .global-nav-list,
  nav#global-nav.global-nav.global-nav--layout--float-right ul.menu{
    transform: scaleX(0.82) !important;
  }
}

/* transform(scale) をやめる（ズレの原因） */
@media (max-width: 1200px){
  nav#global-nav.global-nav.global-nav--layout--float-right .global-nav-list,
  nav#global-nav.global-nav.global-nav--layout--float-right ul.menu{
    transform: none !important;
  }
}

/* スマホ：1行固定、詰めてスクロールを減らす（scale無し） */
@media (max-width: 768px){

  /* MENUボタンは確実に消す */
  div#vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  nav#global-nav.global-nav.global-nav--layout--float-right{
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 4px !important;   /* 左右余白を最小 */
  }

  nav#global-nav.global-nav.global-nav--layout--float-right .global-nav-list{
    display: flex !important;
    flex-wrap: nowrap !important;     /* 絶対1行 */
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 4px !important;              /* 間隔最小 */
  }

  nav#global-nav.global-nav.global-nav--layout--float-right .global-nav-list > li > a{
    padding: 6px 4px !important;      /* 余白最小 */
    font-size: 10px !important;       /* まず固定で小さく */
    letter-spacing: -0.08em !important;
    white-space: nowrap !important;
  }
}

/* =====================================
   ナビ項目が勝手に広がるのを止める（重要）
===================================== */

/* li の均等割りを無効化 */
.global-nav-list > li{
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

/* a の最小幅制限を解除 */
.global-nav-list > li > a{
  min-width: 0 !important;
  width: auto !important;
}

/* UL の space-between をやめる */
.global-nav-list{
  justify-content: flex-end !important; /* または flex-start */
}