/* ====================================================================
 * global-nav.css — 下層ページ共通グローバルナビ（右レール #main-Nav）
 *
 * D-0 共通ガワ刷新。トップ専用 home.css からレール系ルールを抽出し
 * `.page-id-785` スコープを除去したもの。下層公開ページ（members 系を除く）
 * にのみ enqueue する。トップ（page-home.php）は従来どおり home.css が担当
 * （本ファイルは home には読み込まない＝home 回帰ゼロを担保）。
 *
 * 抽出元 home.css 行範囲（2026-06-20 時点）:
 *   §0b ロゴ          L91-134
 *   §12 レール本体     L1386-1674（#main-Nav / .menu-Btn / .menu-Overlay / sp-Header/Footer）
 *   §0c Cocoonヘッダー非表示 L1782-1785
 *   §12b ログイン項目  L1684-1763
 *   §13 rail-Search    L1801-1842
 *   §13 rail z-index override L2481-2483（#main-Nav=100020）
 *   §13 csp-search-active レール減光 L2714-2717
 *
 * 除外（下層では引き込まない）: 検索モーダル内部の磨き込み（#csp-modal 中身・
 *   カテゴリ段階開示・モーダルロゴ・CTA）＝下層はプラグイン既定。MV/各セクション。
 *
 * 色/radius/transition はトークン参照（design-tokens.core.css に依存＝enqueue deps）。
 * 一時的に home.css とルールが重複する（技術負債）。解消トリガー: 下層展開が
 *   dev/pre で回帰なしを確認後、home.css 側を本ファイル参照化（D-0 完了報告に明記）。
 * ==================================================================== */

/* --- ロゴ（自前ヘッダー・背景連動カラー切替）§0b -------------------- */
/* 自前ヘッダー本体：画面左上に固定・透明バー。 */
.site-Header-pb1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;   /* [2026-06-21] 下層で固定ヘッダーを全幅化し .wrapper の margin:0 auto 中央寄せを成立させ、ロゴ位置をトップに揃える（トップは .page-id-785 header{width:100%} で実施済の等価処理。global-nav.cssは下層のみ読込で無影響） */
  z-index: 5000;
  background-color: transparent;
  pointer-events: none;   /* 透明バー全幅でクリックを奪わない。ロゴ <a> のみ復帰 */
}
.site-Header-pb1 .site-Logo {
  position: relative;
  z-index: 10;
  margin-top: 20px;
  width: clamp(9.813rem, 8.766rem + 5.23vw, 12.625rem);
}
.site-Header-pb1 .site-Logo a {
  display: block;
  position: relative;
  pointer-events: auto;   /* ロゴリンクはクリック可能に戻す */
}
/* 2枚のロゴを重ねてクロスフェード。color 切替は opacity transition。
   下層は home-globalmenu.js の背景サンプリングが light/dark を実測追従。
   初期クラスはマークアップ側で下層=logo-on-light（白背景でカラーロゴ＝白溶け防止）。 */
.site-Header-pb1 .site-Logo .logo-Img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity .3s ease;
}
.site-Header-pb1 .site-Logo .logo-dark {
  position: absolute;
  top: 0;
  left: 0;
}
.site-Header-pb1.logo-on-dark  .logo-light { opacity: 0; }
.site-Header-pb1.logo-on-dark  .logo-dark  { opacity: 1; }
.site-Header-pb1.logo-on-light .logo-light { opacity: 1; }
.site-Header-pb1.logo-on-light .logo-dark  { opacity: 0; }
@media screen and (max-width: 767px) {
  .site-Header-pb1 .site-Logo { margin-left: 14px; margin-top: 10px; }
}

/* --- スクロールロック補助（JS が body を fixed 化・menu-open は補助） --- */
.menu-open { height: 100vh; overflow-y: hidden; }

/* --- 右レール #main-Nav §12 ---------------------------------------- */
#main-Nav {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100002;
  display: flex;
  flex-direction: column;
}
@media print, screen and (min-width: 768px) {
  #main-Nav {
    width: 101px;
    height: 100vh;
    align-items: center;
    background: var(--color-brand-blue);
    border-left: 1px solid var(--color-brand-white);
  }
}
@media screen and (max-width: 767px) {
  #main-Nav { overflow: hidden; }
}
#main-Nav a { color: var(--color-brand-white); text-decoration: none; }

@media print, screen and (min-width: 768px) {
  #main-Nav .nav-content-Scroll {
    flex-grow: 1;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
}
#main-Nav .nav-content-Scroll::-webkit-scrollbar { display: none; width: 0; }

#main-Nav .g-Navigation { font-size: 1rem; list-style: none; margin: 0; padding: 0; }
@media print, screen and (min-width: 768px) {
  #main-Nav .g-Navigation { width: 100%; }
}
#main-Nav .g-Navigation .top-Level { margin: 0; }
#main-Nav .g-Navigation .top-Level img,
#main-Nav .g-Navigation .top-Level .nav-Icon {
  width: 35px;
  height: auto;
  margin: 0 auto 1px;
  display: block;
}
#main-Nav .g-Navigation .top-Level a {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100px;
  padding: 10px;
  text-align: center;
  background: var(--color-brand-blue);
  transition: background var(--t-base);
}
#main-Nav .g-Navigation .top-Level a:hover {
  background: var(--color-blue-light); /* #0050E0・カンプ準拠（白文字 AA） */
}
/* 長いラベル（Tournament 等）の段ズレ防止。 */
#main-Nav .g-Navigation .top-Level a {
  font-size: 0.8rem;
  letter-spacing: 0;
  word-break: break-word;
  line-height: 1.3;
}

/* --- 3×3 ドットボタン .menu-Btn ------------------------------------ */
.menu-Btn {
  position: relative;
  z-index: 100003;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
  cursor: pointer;
  padding: 20px 12px 15px;
  background: var(--color-brand-orange);
  transition: background var(--t-base);
}
@media print, screen and (min-width: 768px) {
  .menu-Btn { width: 100%; min-width: 100px; }
}
@media screen and (max-width: 767px) {
  .menu-Btn { width: 70px; height: 60px; padding: 6px 0 3px; } /* シグネチャ死守 */
}
@media (hover: hover) {
  .menu-Btn:hover { background: var(--color-orange-hover); } /* light #FF933D・意図的AA例外2.21:1・承認済 */
}
.menu-Btn .btn-Text {
  color: var(--color-brand-white);
  margin-top: 4px;
  margin-bottom: auto;
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  .menu-Btn .btn-Text { font-size: .8rem; }
}
/* ドット束 */
.menu-Btn .dots-Line { position: relative; width: 30px; height: 30px; }
.menu-Btn .dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-brand-white);
  border-radius: 50%;
  position: absolute;
  transition: all var(--t-base);
}
.menu-Btn .dot:nth-child(1) { top: 0;    left: 0; }
.menu-Btn .dot:nth-child(2) { top: 0;    left: 12px; }
.menu-Btn .dot:nth-child(3) { top: 0;    left: 24px; }
.menu-Btn .dot:nth-child(4) { top: 12px; left: 0; }
.menu-Btn .dot:nth-child(5) { top: 12px; left: 12px; }
.menu-Btn .dot:nth-child(6) { top: 12px; left: 24px; }
.menu-Btn .dot:nth-child(7) { top: 24px; left: 0; }
.menu-Btn .dot:nth-child(8) { top: 24px; left: 12px; }
.menu-Btn .dot:nth-child(9) { top: 24px; left: 24px; }
/* active 時：四隅ドット → X 字、中・辺ドットは消去 */
.menu-Btn.active .dot:nth-child(1),
.menu-Btn.active .dot:nth-child(3),
.menu-Btn.active .dot:nth-child(7),
.menu-Btn.active .dot:nth-child(9) {
  width: 30px;
  height: 3px;
  background-color: var(--color-brand-white);
  border-radius: 2px;
  top: 50%;
  left: 0;
  transform-origin: center;
}
.menu-Btn.active .dot:nth-child(1) { transform: translateY(-50%) rotate(45deg); }
.menu-Btn.active .dot:nth-child(3) { transform: translateY(-50%) rotate(-45deg); }
.menu-Btn.active .dot:nth-child(7) { transform: translateY(-50%) rotate(-45deg); }
.menu-Btn.active .dot:nth-child(9) { transform: translateY(-50%) rotate(45deg); }
.menu-Btn.active .dot:nth-child(2),
.menu-Btn.active .dot:nth-child(4),
.menu-Btn.active .dot:nth-child(5),
.menu-Btn.active .dot:nth-child(6),
.menu-Btn.active .dot:nth-child(8) { opacity: 0; }

/* --- 橙オーバーレイ .menu-Overlay ---------------------------------- */
.menu-Overlay {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 100vw;
  background: var(--color-brand-orange);
  z-index: 100000;
  transform: translateX(100%);
  transition: transform 0.4s ease-in-out;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
}
@media print, screen and (min-width: 768px) {
  .menu-Overlay { right: 100px; width: calc(100% - 100px); } /* レール分よける */
}
.menu-Overlay.open { transform: translateX(0); }
.menu-Overlay .wrapper { height: 100%; }
.menu-Overlay .site-Logo {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease-out, transform .3s ease-out;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .menu-Overlay .site-Logo { margin-top: -5px; margin-left: 0; }
}
.menu-Overlay.open .site-Logo { opacity: 1; transform: translateY(0); }
.menu-Overlay .site-Logo img { width: clamp(9.813rem, 8.766rem + 5.23vw, 12.625rem); }
.menu-Overlay .navi-Wrap {
  padding-top: clamp(2rem, 2.256rem + 3.72vw, 3rem);
  padding-bottom: 150px;
  flex-grow: 1;
  overflow-y: scroll;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.menu-Overlay .navi-Wrap::-webkit-scrollbar { display: none; width: 0; }
.menu-Overlay .navi-Link {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}
@media print, screen and (min-width: 768px) {
  .menu-Overlay .navi-Link { align-items: center; padding-top: 5%; }
  .menu-Overlay .navi-Link li { width: 48%; }
}
@media screen and (max-width: 767px) {
  .menu-Overlay .navi-Link li { width: 50%; margin-bottom: 8px; }
}
.menu-Overlay .navi-Link li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease-out, transform .3s ease-out;
}
.menu-Overlay.open .navi-Link li { opacity: 1; transform: translateY(0); }
.menu-Overlay .navi-Link li a {
  color: var(--color-brand-white);
  line-height: 1.6;
  text-decoration: none;
  font-size: clamp(1.125rem, .637rem + 2.44vw, 2.438rem);
  position: relative;
  padding-left: 20px;
  background-image: linear-gradient(to right, var(--color-brand-white), var(--color-brand-white));
  background-repeat: no-repeat;
  background-position: left 1.3em;
  background-size: 0 4px;
  transition: background-size .3s ease;
}
.menu-Overlay .navi-Link li a::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background: var(--color-brand-white);
  left: 0;
  top: .6em;
}
@media screen and (max-width: 767px) {
  .menu-Overlay .navi-Link li a::before { top: .5em; }
}
.menu-Overlay .navi-Link li a:hover { background-size: 100% 4px; }

/* --- SP 用ヘッダー/フッターナビ配置（.sp-Header / .sp-Footer） --- */
@media screen and (max-width: 767px) {
  #main-Nav .sp-Header {
    display: flex;
    flex-direction: row-reverse;
    margin-left: auto;
    border-left: 1px solid var(--color-brand-white);
    border-bottom: 1px solid var(--color-brand-white);
  }
  #main-Nav .sp-Header .top-Level { width: 70px; height: 60px; }
  #main-Nav .sp-Header .top-Level a { min-height: 60px; font-size: .7rem; padding: 1px 0; }

  #main-Nav .sp-Footer {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
  }
  #main-Nav .sp-Footer.visible {
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    opacity: 1;
    transform: translateY(0);
    border-top: 1px solid var(--color-brand-white);
    z-index: 100001; /* オーバーレイ(100000)より上・レール(100002/100020)より下 */
  }
  #main-Nav .sp-Footer.visible li.top-Level {
    width: 25%;
    border-left: 1px solid var(--color-brand-white);
    border-bottom: 1px solid var(--color-brand-white);
  }
  #main-Nav .sp-Footer.visible li.top-Level .nav-Icon { width: 27px; }
  #main-Nav .sp-Footer.visible li.top-Level-Search { display: none; }
}
@media print, screen and (min-width: 768px) {
  #main-Nav .sp-Footer { display: flex; flex-direction: column; }
}

/* --- §12b ログイン状態表示（右レール Login 項目） ------------------ */
#main-Nav .g-Navigation .login-Item { margin: 0; position: relative; }
#main-Nav .login-Menu { width: 100%; }
#main-Nav .login-Summary {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100px;
  padding: 10px;
  text-align: center;
  background: var(--color-brand-blue);
  color: var(--color-brand-white);
  font-size: 0.8rem;
  line-height: 1.3;
  letter-spacing: 0;
  word-break: break-word;
  cursor: pointer;
  list-style: none;
  transition: background var(--t-base);
}
#main-Nav .login-Summary::-webkit-details-marker { display: none; }
#main-Nav .login-Summary:hover { background: var(--color-blue-light); }
#main-Nav .login-Avatar { display: block; margin: 0 auto 4px; }
#main-Nav .g-Navigation .top-Level.login-Item .login-Avatar img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid var(--color-brand-white);
  background: var(--color-brand-white);
  display: block;
  object-fit: cover;
}
#main-Nav .login-Name {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#main-Nav .login-Drop {
  display: none;
  position: fixed;
  z-index: 100021;                  /* レール(#main-Nav=100020) 子・検索(100010)より上 */
  min-width: 160px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--color-brand-blue);
  border: 1px solid var(--color-brand-white);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
#main-Nav .login-Menu[open] .login-Drop { display: block; }
#main-Nav .login-Drop li { margin: 0; }
#main-Nav .login-Drop a {
  display: block;
  padding: 10px 16px;
  color: var(--color-brand-white);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
  text-align: left;
  transition: background var(--t-base);
}
#main-Nav .login-Drop a:hover { background: var(--color-blue-light); }
@media screen and (max-width: 767px) {
  #main-Nav .sp-Header .login-Summary { min-height: 60px; font-size: .6rem; padding: 5px 0; }
  #main-Nav .g-Navigation .top-Level.login-Item .login-Avatar img { width: 28px; height: 28px; }
  #main-Nav .login-Drop { min-width: 132px; padding: 4px 0; border-radius: 5px; }
  #main-Nav .login-Drop a { padding: 8px 14px; font-size: .8rem; }
}

/* --- §13 レール Search ボタン（.rail-Search） ---------------------- */
#main-Nav .g-Navigation .top-Level-Search { margin: 0; }
#main-Nav .g-Navigation .top-Level-Search .rail-Search {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: none;
  cursor: pointer;
  text-align: center;
  background: var(--color-brand-blue);
  color: var(--color-brand-white);
  font-size: 0.8rem;
  line-height: 1.3;
  letter-spacing: 0;
  transition: background var(--t-base);
}
#main-Nav .g-Navigation .top-Level-Search .rail-Search:hover {
  background: var(--color-blue-light);
}
#main-Nav .top-Level-Search .rail-Search .nav-Icon {
  width: 35px;
  height: auto;
  margin: 0 auto 1px;
  display: block;
}
#main-Nav .top-Level-Search .rail-Search .icon-Search { color: var(--color-brand-orange); } /* 虫眼鏡＝橙 */
#main-Nav .top-Level-Search .rail-Search .icon-Close  { color: var(--color-brand-orange); }  /* ×＝橙 */
#main-Nav .top-Level-Search .rail-Search-Label {
  font-style: normal;
  color: var(--color-brand-white);
}
#main-Nav .top-Level-Search .rail-Search { position: relative; }
#main-Nav .top-Level-Search .rail-Search .icon-Close { display: none; }
#main-Nav .top-Level-Search .rail-Search.active .icon-Search { display: none; }
#main-Nav .top-Level-Search .rail-Search.active .icon-Close  { display: block; }

/* --- §13 レール z-index override（検索パネル100010より前面に） ----- */
#main-Nav {
  z-index: 100020;
}

/* --- §13 検索中はレールの Search 以外を半透明化 -------------------- */
body.csp-search-active #main-Nav .g-Navigation .top-Level:not(.top-Level-Search) {
  opacity: 0.4;
  transition: opacity var(--t-base, 0.3s ease);
}

/* --- レール文脈の wrapper / 出し分けユーティリティ（home.css §0 のレール依存分） ---
 * .wrapper はサイト共通の汎用 class のため、グローバル衝突を避けて
 * レール文脈（.site-Header-pb1 / .menu-Overlay）に限定して再宣言する。
 * ロゴ中央寄せ（max-width:1160・margin:0 auto）が下層でも成立し、ロゴ位置が home と揃う。 */
.site-Header-pb1 .wrapper,
.menu-Overlay .wrapper { display: flex; margin: 0 auto; }
@media print, screen and (min-width: 768px) {
  .site-Header-pb1 .wrapper,
  .menu-Overlay .wrapper {
    max-width: var(--container-max-width);
    width: 100%;
    padding-left: var(--container-padding-x-pc);
  }
}
@media screen and (max-width: 767px) {
  .site-Header-pb1 .wrapper,
  .menu-Overlay .wrapper {
    width: 100%;
    padding-left: var(--container-padding-x-sp);
    padding-right: var(--container-padding-x-sp);
  }
}
.menu-Overlay .dp-Flexcolumn { display: flex; flex-direction: column; }
@media screen and (max-width: 767px) {
  #main-Nav .dp-Spnone { display: none; }
}

/* --- オーバーレイロゴ位置整合（開閉でロゴが跳ばない・home.css §13 Menuロゴ位置整合） ---
 * ヘッダー(中央寄せオフセット60)と Menu(同10)の差 50px を margin-left で吸収し left を揃える。 */
.menu-Overlay .site-Logo { margin-top: 20px; margin-left: 50px; }
@media screen and (max-width: 767px) {
  .menu-Overlay .site-Logo { margin-top: 10px; margin-left: 14px; }
}

/* [2026-06-21] SP 最下部到達時にレール＋ロゴをゆっくりフェードアウト（home-globalmenu.js が .is-rail-hidden をトグル）。 */
#main-Nav,
.site-Header-pb1 { transition: opacity .5s ease; }
#main-Nav.is-rail-hidden,
.site-Header-pb1.is-rail-hidden { opacity: 0; pointer-events: none; }

/* [2026-06-21] 下層パンくずの開始点を SP 固定ヘッダー(menu-Btn 60px)分まで下げ被りを解消。
   親Cocoonの既定 margin-top(≈58.5px・56px時) を id 特異度で上書き。トップ(page-id-785)は breadcrumb 非表示で無影響。 */
@media screen and (max-width: 767px) {
  #breadcrumb { margin-top: 64px; }
}