@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: BASS CONNECT JAPAN — ナビをピル化＆白帯透明化（完成版）
Template:   cocoon-master
Version:    1.2.0
*/

/* =========================================================
   0) 共通メモ
   - キャッシュ系(Autoptimize/LiteSpeed/ConoHa)は変更後に削除推奨
   - できる限り !important を最小限に抑えつつ、上書き競合に勝つ所だけ付与
   ========================================================= */

/* =========================================================
   1) ナビ周りの「白い帯」を完全に透明化
   Cocoon のラッパーで背景/影/罫線を持つ要素を無効化
   ========================================================= */
#navi,
#navi-in,
#navi .navi-in,
.header-container .navi,
.header-container .navi-in,
.global-nav, .global-nav-in,
.menu-container, .menu-container-in,
ul.menu-top.menu-header.navi.cf {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 疑似要素由来の帯も無効化 */
#navi::before, #navi::after,
#navi-in::before, #navi-in::after,
.navi-in::before, .navi-in::after,
.menu-container::before, .menu-container::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   2) メニューULのレイアウト（PC中央寄せ / SPは横スクロール）
   ========================================================= */
ul.menu-top.menu-header.navi.cf {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  list-style: none;
  margin: 0 auto;
}

/* スマホは横スクロール可能にして取りこぼしゼロ */
@media (max-width: 768px) {
  #navi .navi-in, #navi-in {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    /* 端フェード */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  #navi .navi-in::-webkit-scrollbar { display: none; }

  ul.menu-top.menu-header.navi.cf {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 12px;
  }
}

/* =========================================================
   3) ピル化の本体
   実際のテキスト要素 .item-label を“カプセル”にする
   構造: li > a > .caption-wrap > .item-label（Cocoon）
   ========================================================= */
ul.menu-top.menu-header.navi.cf > li > a .item-label {
  display: inline-block;
  padding: 10px 22px;
  margin: 4px 6px;
  border-radius: 999px;

  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;

  /* 白ガラス風のピル */
  background: rgba(255, 255, 255, .96);
  color: #1f2937;                           /* text-gray-800 */
  border: 1px solid rgba(100,116,139,.38);  /* slate-500/38% */
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

/* hover：少しリフト＆アクセントの薄膜 */
ul.menu-top.menu-header.navi.cf > li > a:hover .item-label {
  transform: translateY(-1px);
  background: rgba(14,165,233,.16);         /* sky-500の薄膜 */
  box-shadow: 0 6px 14px rgba(14,165,233,.22);
}

/* 現在地（active/current） */
ul.menu-top.menu-header.navi.cf > li.current-menu-item > a .item-label,
ul.menu-top.menu-header.navi.cf > li.current_page_item > a .item-label,
ul.menu-top.menu-header.navi.cf > li.current-menu-ancestor > a .item-label {
  background: linear-gradient(180deg, #0ea5e9, #0284c7); /* sky-500→sky-600 */
  color: #fff;
  border: none;
  box-shadow: 0 10px 24px rgba(14,165,233,.32);
}

/* フォーカス可視化（キーボード操作時のアクセシビリティ） */
ul.menu-top.menu-header.navi.cf > li > a:focus .item-label,
ul.menu-top.menu-header.navi.cf > li > a:focus-visible .item-label {
  outline: 3px solid rgba(14,165,233,.65);
  outline-offset: 2px;
}

/* =========================================================
   4) 細かな調整
   ========================================================= */
/* 各 li はサイズに合わせる（折返し時の変な余白を防止） */
ul.menu-top.menu-header.navi.cf > li { flex: none; }

/* モバイル：タップ高の確保（小さめに最適化） */
@media (max-width: 768px) {
  ul.menu-top.menu-header.navi.cf > li > a .item-label {
    padding: 9px 18px;
    font-size: 15px;
    line-height: 1.35;
  }
}

/* PC：並びの間隔をやや広めに */
@media (min-width: 1024px) {
  ul.menu-top.menu-header.navi.cf { gap: 14px; }
}

/* =========================================================
   5)（任意）ヒーローの下に余白が詰まる場合の保険
   ※ 要らなければ削除OK
   ========================================================= */
#navi, #navi-in, #navi .navi-in { padding-top: 16px; }

/* =========================================================
   6)（任意）開発時の反映確認バッジ
   有効化したい時だけ下のコメントを外す
   ========================================================= */
/*
body::before{
  content:"STYLE.CSS OK";
  position:fixed; top:10px; left:10px;
  background:#ef4444; color:#fff; font-weight:700;
  padding:6px 10px; border-radius:6px; z-index:99999;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
*/


/* === EMERGENCY OVERRIDE: BCJ nav pills — paste at the VERY BOTTOM === */

/* 白帯を必ず消す（UL本体） */
ul.menu-top.menu-header.navi.cf{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* “枠を広げてしまう中間ラッパ”を無効化して素通しに */
ul.menu-top.menu-header.navi.cf > li > a,
ul.menu-top.menu-header.navi.cf > li > a .caption-wrap{
  display: inline-block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ★本命：実際のテキスト .item-label をピル化（全部ここに集約） */
ul.menu-top.menu-header.navi.cf > li > a .item-label{
  display: inline-block !important;
  padding: 10px 22px !important;
  margin: 6px 8px !important;
  border-radius: 999px !important;

  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;

  background: rgba(255,255,255,.96) !important;
  color: #1f2937 !important;
  border: 1px solid rgba(100,116,139,.38) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.12) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

/* Hover / Active （視認性だけ最小に） */
ul.menu-top.menu-header.navi.cf > li > a:hover .item-label{
  transform: translateY(-1px) !important;
  background: rgba(14,165,233,.16) !important;
  box-shadow: 0 8px 20px rgba(14,165,233,.22) !important;
}
ul.menu-top.menu-header.navi.cf > li.current-menu-item > a .item-label,
ul.menu-top.menu-header.navi.cf > li.current_page_item > a .item-label,
ul.menu-top.menu-header.navi.cf > li.current-menu-ancestor > a .item-label{
  background: linear-gradient(180deg,#0ea5e9,#0284c7) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(14,165,233,.32) !important;
}


/* === EMERGENCY FIX 2: 直接 <a> にピル装飾 === */

/* UL自体の白背景を消す */
ul.menu-top.menu-header.navi.cf {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Aリンク本体をピル化 */
ul.menu-top.menu-header.navi.cf > li > a {
  display: inline-block !important;
  padding: 10px 22px !important;
  margin: 6px 8px !important;
  border-radius: 999px !important;

  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;

  background: rgba(255,255,255,.96) !important;
  color: #1f2937 !important;
  border: 1px solid rgba(100,116,139,.38) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.12) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

/* Hover */
ul.menu-top.menu-header.navi.cf > li > a:hover {
  transform: translateY(-1px) !important;
  background: rgba(14,165,233,.16) !important;
  box-shadow: 0 8px 20px rgba(14,165,233,.22) !important;
}

/* Active（現在地） */
ul.menu-top.menu-header.navi.cf > li.current-menu-item > a,
ul.menu-top.menu-header.navi.cf > li.current_page_item > a,
ul.menu-top.menu-header.navi.cf > li.current-menu-ancestor > a {
  background: linear-gradient(180deg,#0ea5e9,#0284c7) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(14,165,233,.32) !important;
}

/* === 最小2ルール：この2つだけで pill を出す === */

/* 1) 白い帯（ULの背景）だけ透明化 */
ul.menu-top.menu-header.navi.cf{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 2) 実際の文字が入ってる .item-label を pill 化（確実に当たる点だけ） */
div.item-label{
  display: inline-block !important;
  padding: 10px 22px !important;
  margin: 4px 6px !important;
  border-radius: 999px !important;

  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;

  background: rgba(255,255,255,.96) !important;
  color: #1f2937 !important;
  border: 1px solid rgba(100,116,139,.38) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.12) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
/* hover と 現在地 */
ul.menu-top.menu-header.navi.cf > li > a:hover div.item-label{
  transform: translateY(-1px) !important;
  background: rgba(14,165,233,.16) !important;
  box-shadow: 0 8px 20px rgba(14,165,233,.22) !important;
}
ul.menu-top.menu-header.navi.cf > li.current-menu-item div.item-label,
ul.menu-top.menu-header.navi.cf > li.current_page_item div.item-label,
ul.menu-top.menu-header.navi.cf > li.current-menu-ancestor div.item-label{
  background: linear-gradient(180deg,#0ea5e9,#0284c7) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(14,165,233,.32) !important;
}