/* ==========================================================================
   style.css - 2026-27ホームゲームLP 全スタイル統合ファイル
   RCMS組み込み用に単一ファイルへ統合。
   すべてのスタイルは .bwhg-site 配下にスコープされ、親サイトのCSSへ影響しない。
   ========================================================================== */

/* ---------------------------------------------------------------- */
/* base.css */
/* ---------------------------------------------------------------- */
/* ==========================================================================
   base.css - リセット・デザイントークン・フォント・共通見出しパターン
   RCMS等の既存サイトへ組み込む前提のため、body/html/img/a等の要素セレクタは
   すべて .bwhg-site 配下に限定し、親サイト側のスタイルへ影響しないようにする。
   ========================================================================== */

@font-face {
  font-family: 'BW-Spiked';
  src: url('/files/user/_/lp/2026-27/font/BW-Spiked-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.bwhg-site {
  --color-gold: #C5A231;
  --color-white: #FFFFFF;
  --color-dark: #0F0F13;

  --font-display: 'BW-Spiked', sans-serif;
  --font-jp: 'Noto Sans JP', sans-serif;
  --font-en: 'Inter', sans-serif;
}

/* 詳細度を上げずにスコープするため :where() を使用する。
   （通常の子孫セレクタ `.bwhg-site img` 等にすると詳細度が (0,1,1) に上がり、
   　各セクション側の単一クラス指定 `.bwhg-xxx__img { display: none }` などの
   　上書きが効かなくなるため、必ず :where() を使うこと） */
:where(.bwhg-site, .bwhg-site *, .bwhg-site *::before, .bwhg-site *::after) {
  box-sizing: border-box;
}

.bwhg-site {
  position: relative;
  max-width: 1366px;
  margin: 0 auto;
  color: var(--color-white);
  font-family: var(--font-jp);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

:where(.bwhg-site) img {
  max-width: 100%;
  display: block;
}

:where(.bwhg-site) a {
  color: inherit;
  text-decoration: none;
}

:where(.bwhg-site) ul,
:where(.bwhg-site) ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.bwhg-site) h1,
:where(.bwhg-site) h2,
:where(.bwhg-site) h3,
:where(.bwhg-site) h4,
:where(.bwhg-site) p {
  margin: 0;
}

:where(.bwhg-site) button {
  font-family: inherit;
  cursor: pointer;
}

:where(.bwhg-site) main > section[id] {
  scroll-margin-top: 80px;
}

@media (max-width: 768px) {
  :where(.bwhg-site) main > section[id] {
    scroll-margin-top: 60px;
  }

  /* 親ページのbody余白（RCMS埋め込み時のためbodyはリセットしていない）の影響を受けず、
     Figma通りビューポート幅いっぱいに表示されるようにする */
  .bwhg-site {
    width: var(--bwhg-vw);
    max-width: var(--bwhg-vw);
    margin-left: calc(50% - (var(--bwhg-vw) / 2));
    margin-right: calc(50% - (var(--bwhg-vw) / 2));
  }
}

/* 見出し共通パターン: 大きい英字(BW-Spiked) + 小さい日本語(ゴールド) */
.bwhg-section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.bwhg-section-heading__en {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
}

.bwhg-section-heading__jp {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: var(--color-white);
  text-align: center;
}

@media (max-width: 768px) {
  .bwhg-section-heading__en {
    font-size: 40px;
  }
}

/* ---------------------------------------------------------------- */
/* sections/header.css */
/* ---------------------------------------------------------------- */
/* ==========================================================================
   header / nav-menu / fixed-bar
   ========================================================================== */

.bwhg-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  padding-left: 24px;
}

/* 769px以上（.bwhg-siteが1366px基準で表示される範囲）では、
   headerがコンテンツ幅1366pxの範囲内に留まってしまい、
   769〜1365pxではビューポート外へロゴやactionsがはみ出し、
   1366px以上では実際の画面端との間に余白ができてしまう。
   header自体をビューポートに固定表示し、常に画面幅いっぱいに揃うようにする。
   headerをposition:fixedで通常のフローから外すため、
   後続コンテンツがheaderの裏に隠れないようmainにその分の余白を付与する。 */
@media (min-width: 769px) {
  .bwhg-header {
    position: fixed;
    left: 0;
    /* right:0を残しJS実行前もCSSだけで画面幅いっぱいに表示されるようにする
       （right指定がないとJS実行前はwidth:autoがshrink-to-fitになり、
       　読み込み中だけ内容幅に縮んで見えてしまう）。
       JS（syncHeaderWidth）はleft・widthをインラインで直接指定すると同時に
       rightを明示的に'auto'へ上書きし、left・width・rightの3つが同時に
       有効な制約になってブラウザによって解決結果が割れる状態
       （Chromiumではスクロールバー分だけ右端がずれる等）を避ける */
    right: 0;
    width: auto;
  }

  :where(.bwhg-site) main {
    padding-top: 80px;
  }
}

/* ビューポート幅が1366pxを超える場合に左右へ白い余白が出ないよう、
   背景のみをビューポート全幅までブリードさせる（コンテンツ位置はFigma通り1366px基準のまま） */
.bwhg-header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  transform: translateX(-50%);
  background-color: var(--color-dark);
  z-index: -1;
}

.bwhg-header__brand {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bwhg-header__logo {
  width: 68px;
  height: 66px;
  object-fit: cover;
}

.bwhg-header__brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1em;
  color: var(--color-gold);
  white-space: nowrap;
}

.bwhg-header__brand-break {
  display: none;
}

/* 画面幅1125px以下ではbwhg-header__brand-nameを2行に折り返す
   （768px以下のSPレイアウト切り替えとは別に、この行送りのみ独立して適用する） */
@media (max-width: 1125px) {
  .bwhg-header__brand-break {
    display: inline;
  }
}

/* 769px〜1120px（タブレット〜狭いPC幅）: チケットボタン×2＋詳細ボタンの
   固定幅合計がheaderの実ビューポート幅に収まらず、flex-shrinkでheader__actions自体は
   縮んでもボタン自身は縮まないため、brand-nameと重なって崩れる。
   768px以下のSPと同じくハンバーガーメニューのみ表示する（bwhg-access-summary等と同じ対応） */
@media (max-width: 1120px) {
  .bwhg-header__actions > .bwhg-header__ticket,
  .bwhg-header__actions > .bwhg-header__detail-btn {
    display: none;
  }
}

.bwhg-header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.bwhg-header__ticket {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  transition: opacity 0.3s ease-out;
}

/* Figmaにこのボタン専用のホバー定義がないため、他のクリック可能要素との
   視覚的な一貫性を持たせる目的で不透明度のみ軽く下げる */
.bwhg-header__ticket:hover {
  opacity: 0.85;
}

.bwhg-header__ticket-shape {
  width: 135px;
  height: 44px;
  margin-right: -2px;
}

.bwhg-header__ticket-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 44px;
  padding: 6px 5px 6px 10px;
  background-color: var(--color-gold);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: var(--color-dark);
  text-align: left;
  white-space: nowrap;
}

.bwhg-header__ticket-date {
  position: absolute;
  left: 67.5px;
  top: 12px;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: flex-end;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.6;
  color: var(--color-dark);
  white-space: nowrap;
}

.bwhg-header__ticket-date-num {
  font-size: 36px;
}

.bwhg-header__ticket-date-day {
  font-size: 16px;
  letter-spacing: -0.8px;
}

.bwhg-header__detail-btn {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 200px;
  padding: 10px 20px;
  background-color: var(--color-dark);
  border: 1px solid var(--color-gold);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-white);
  white-space: nowrap;
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

.bwhg-header__detail-btn:hover {
  background-color: #222222;
  color: var(--color-gold);
}

.bwhg-header__detail-btn-icon {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.bwhg-header__detail-btn-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-out;
}

.bwhg-header__detail-btn-icon img:last-child {
  opacity: 0;
}

.bwhg-header__detail-btn:hover .bwhg-header__detail-btn-icon img:first-child {
  opacity: 0;
}

.bwhg-header__detail-btn:hover .bwhg-header__detail-btn-icon img:last-child {
  opacity: 1;
}

.bwhg-header__menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 80px;
  height: 80px;
  border: none;
  background-color: var(--color-gold);
  transition: opacity 0.3s ease-out;
}

/* Figmaのプロトタイプにこのボタン専用のホバー定義がないため、
   他のボタン類と視覚的な一貫性を持たせる目的で不透明度のみ軽く下げる */
.bwhg-header__menu-btn:hover {
  opacity: 0.85;
}

.bwhg-header__menu-btn-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 40px;
}

.bwhg-header__menu-btn-bar {
  width: 100%;
  height: 4px;
  background-color: var(--color-dark);
}

.bwhg-header__menu-btn-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--color-dark);
}

.bwhg-header__menu-btn.bwhg-is-active .bwhg-header__menu-btn-bars {
  position: relative;
  height: 15px;
}

.bwhg-header__menu-btn.bwhg-is-active .bwhg-header__menu-btn-bar {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
}

.bwhg-header__menu-btn.bwhg-is-active .bwhg-header__menu-btn-bar:nth-child(1) {
  transform: translateY(-50%) rotate(25deg);
}

.bwhg-header__menu-btn.bwhg-is-active .bwhg-header__menu-btn-bar:nth-child(2) {
  transform: translateY(-50%) rotate(-25deg);
}

.bwhg-header__menu-btn.bwhg-is-active .bwhg-header__menu-btn-bar:nth-child(3) {
  display: none;
}

/* ---------- nav-menu (ハンバーガーメニュー展開パネル) ---------- */

.bwhg-nav-menu {
  position: fixed;
  top: 80px;
  left: 0;
  z-index: 99;
  width: 100%;
  max-width: 1366px;
  height: calc(100% - 80px);
  overflow-y: auto;
  background-color: var(--color-dark);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.bwhg-nav-menu.bwhg-is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.bwhg-nav-menu__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 16px;
  column-gap: 219px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 24px;
}

/* SPでは1列のため上から読む並び順（EVENTS〜ACCESS）をそのままDOM順にしているが、
   PC/タブレット(769px〜)は2列表示のFigma仕様（左列: EVENTS/TIME SCHEDULE/ARENA GOURMET/ARENA MAP、
   右列: GOODS/TEAM/ACCESS）を保つため、明示的にgrid-column/grid-rowを指定する */
@media (min-width: 769px) {
  .bwhg-nav-menu__list li:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .bwhg-nav-menu__list li:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .bwhg-nav-menu__list li:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
  }

  .bwhg-nav-menu__list li:nth-child(4) {
    grid-column: 1;
    grid-row: 4;
  }

  .bwhg-nav-menu__list li:nth-child(5) {
    grid-column: 2;
    grid-row: 1;
  }

  .bwhg-nav-menu__list li:nth-child(6) {
    grid-column: 2;
    grid-row: 2;
  }

  .bwhg-nav-menu__list li:nth-child(7) {
    grid-column: 2;
    grid-row: 3;
  }
}

/* 769px〜1100pxは2列(column-gap:219px)のままだと幅が収まらずはみ出るため、
   SPと同じ1列レイアウトに変更する（上のmin-width:769pxで指定した
   grid-column/grid-rowを、同じ詳細度のセレクタで打ち消す） */
@media (max-width: 1100px) and (min-width: 769px) {
  .bwhg-nav-menu__list {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 300px;
    padding: 24px 16px;
  }

  .bwhg-nav-menu__list li:nth-child(1),
  .bwhg-nav-menu__list li:nth-child(2),
  .bwhg-nav-menu__list li:nth-child(3),
  .bwhg-nav-menu__list li:nth-child(4),
  .bwhg-nav-menu__list li:nth-child(5),
  .bwhg-nav-menu__list li:nth-child(6),
  .bwhg-nav-menu__list li:nth-child(7) {
    grid-column: 1;
  }

  .bwhg-nav-menu__list li:nth-child(1) { grid-row: 1; }
  .bwhg-nav-menu__list li:nth-child(2) { grid-row: 2; }
  .bwhg-nav-menu__list li:nth-child(3) { grid-row: 3; }
  .bwhg-nav-menu__list li:nth-child(4) { grid-row: 4; }
  .bwhg-nav-menu__list li:nth-child(5) { grid-row: 5; }
  .bwhg-nav-menu__list li:nth-child(6) { grid-row: 6; }
  .bwhg-nav-menu__list li:nth-child(7) { grid-row: 7; }

  .bwhg-nav-menu__link-en {
    font-size: 32px;
    white-space: normal;
  }

  .bwhg-nav-menu__link-jp {
    font-size: 15px;
  }
}

.bwhg-nav-menu__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bwhg-nav-menu__link-en {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  color: var(--color-white);
  /* TIME SCHEDULE/ARENA GOURMET等、列幅に収まりきらない項目は
     column-gap(219px)の余白へはみ出す形で1行を維持する。
     幅が十分でないSP（1列表示）では2行への折り返しを許可する */
  white-space: nowrap;
}

.bwhg-nav-menu__link-jp {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-gold);
}

/* ---------- fixed-bar (SP固定フッター、PCでは非表示) ---------- */

.bwhg-fixed-bar {
  display: none;
}

/* 769px〜1120pxはヘッダーのチケットボタン・詳細ボタンを非表示にしているため、
   チケット購入手段が失われないよう、SPと同じ固定バーをこの範囲でも表示する */
@media (max-width: 1120px) {
  /* 以前ここをposition:stickyにしていたが、bwhg-fixed-barはbwhg-site
     （包含ブロック）の一番最後の子要素であり、後ろに続くコンテンツが
     ないためstickyが機能する「余地」が存在せず、常にページ末尾の
     通常位置にしか表示されない（ページ最後までスクロールしないと
     見えない）致命的な不具合になっていたため、position:fixedへ戻す。
     Firefoxで追従しない件は、bwhg-fixed-bar自体ではなくhtml/bodyの
     overflow-x設定（このファイル内script.jsでhtmlにもoverflow-x:hiddenを
     設定する対応）で解消したことを別途確認済み */
  .bwhg-fixed-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 64px;
  }

  .bwhg-fixed-bar__ticket {
    display: flex;
    flex: 0 0 33.3334%;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 12px 5px;
    background-color: var(--color-white);
    border-top: 2px solid var(--color-gold);
    border-right: 2px solid var(--color-gold);
  }

  .bwhg-fixed-bar__day {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    width: 100%;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 0.6;
    color: var(--color-dark);
  }

  .bwhg-fixed-bar__day-num {
    font-size: 32px;
  }

  .bwhg-fixed-bar__day-week {
    font-size: 16px;
    letter-spacing: -0.8px;
  }

  .bwhg-fixed-bar__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 4px 8px;
    background-color: var(--color-gold);
    font-family: var(--font-jp);
    font-weight: 700;
    font-size: 13px;
    color: var(--color-white);
    white-space: nowrap;
  }

  .bwhg-fixed-bar__detail {
    display: flex;
    flex: 0 0 33.3334%;
    min-width: 0;
    align-items: center;
    justify-content: center;
    background-color: var(--color-dark);
    border-top: 2px solid var(--color-gold);
    font-family: var(--font-jp);
    font-weight: 700;
    font-size: 13px;
    color: var(--color-white);
  }
}

@media (max-width: 768px) {
  .bwhg-header {
    height: 60px;
    padding-left: 10px;
  }

  .bwhg-header__logo {
    width: 50px;
    height: 39.6px;
  }

  .bwhg-header__brand-name {
    font-size: 16.2px;
    white-space: normal;
  }

  .bwhg-header__brand-break {
    display: inline;
  }

  .bwhg-header__menu-btn {
    width: 60px;
    height: 60px;
    gap: 4.8px;
  }

  .bwhg-header__menu-btn-bars {
    width: 30px;
    gap: 4.8px;
  }

  .bwhg-header__menu-btn-bar {
    height: 2.4px;
  }

  .bwhg-header__menu-btn-label {
    font-size: 9.6px;
  }

  .bwhg-nav-menu {
    top: 60px;
    height: calc(100% - 60px);
  }

  .bwhg-nav-menu__list {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 300px;
    padding: 24px 16px;
  }

  .bwhg-nav-menu__link-en {
    font-size: 32px;
    white-space: normal;
  }

  .bwhg-nav-menu__link-jp {
    font-size: 15px;
  }
}

/* ---------------------------------------------------------------- */
/* sections/hero.css */
/* ---------------------------------------------------------------- */
/* ==========================================================================
   hero (FV)
   ========================================================================== */

.bwhg-hero {
  position: relative;
  /* ビューポート幅が1366pxを超える場合に左右へ白い余白が出ないよう、
     ヒーロー画像自体をビューポート全幅までブリードさせる（高解像度画像のため拡大しても破綻しない） */
  width: var(--bwhg-vw);
  margin-left: calc(50% - (var(--bwhg-vw) / 2));
}

.bwhg-hero__image {
  width: 100%;
  height: auto;
}

.bwhg-hero__image-sp {
  display: none;
}

@media (max-width: 768px) {
  .bwhg-hero__image {
    display: none;
  }

  .bwhg-hero__image-sp {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ---------------------------------------------------------------- */
/* sections/schedule.css */
/* ---------------------------------------------------------------- */
/* ==========================================================================
   schedule (開催カード x2)
   ========================================================================== */

.bwhg-schedule {
  display: flex;
}

.bwhg-schedule__card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  /* コンテンツは中央の仕切り線側に寄る配置のため、1枚目は左に大きい余白（右寄せ）
     外側（ビューポート端側）の余白は、.bwhg-siteが1366px未満にクロップされる範囲（769px〜999px）で
     コンテンツが欠けないよう、クロップ量に応じて動的に拡大する（1000px以上では固定183pxのまま） */
  padding: 40px 30px 40px max(183px, calc(683px - var(--bwhg-vw) / 2));
  border-right: 1px solid var(--color-white);
}

.bwhg-schedule__card:last-child {
  /* 2枚目は左右反転（左寄せ）にして中央の仕切り線側にコンテンツを寄せる */
  padding: 40px max(183px, calc(683px - var(--bwhg-vw) / 2)) 40px 30px;
  border-right: none;
}

/* ビューポート幅が1366pxを超える場合に左右へ白い余白が出ないよう、
   各カードの背景をビューポート端までブリードさせる（中央の仕切り線位置は変えない）。
   幅は「.bwhg-siteの水平中央からビューポート端までの距離」が必要なため、
   var(--bwhg-vw)/2ではなく、JSで実測したvar(--bwhg-site-center)を基準に計算する
   （.bwhg-siteがビューポート中央にない範囲＝769px〜999pxの左寄せ表示でも正しく揃う） */
.bwhg-schedule__card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #96804a;
  z-index: -1;
}

.bwhg-schedule__card:first-child::before {
  left: auto;
  right: 0;
  width: var(--bwhg-site-center);
}

.bwhg-schedule__card:last-child::before {
  left: 0;
  right: auto;
  width: calc(var(--bwhg-vw) - var(--bwhg-site-center));
}

.bwhg-schedule__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  max-width: none;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  z-index: 0;
}

.bwhg-schedule__card:first-child .bwhg-schedule__bg {
  left: auto;
  right: 0;
  width: var(--bwhg-site-center);
}

.bwhg-schedule__card:last-child .bwhg-schedule__bg {
  left: 0;
  right: auto;
  width: calc(var(--bwhg-vw) - var(--bwhg-site-center));
}

.bwhg-schedule__sponsor {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 80px;
  padding: 8px 0;
  background-color: var(--color-white);
}

.bwhg-schedule__sponsor-logo {
  max-width: 190px;
  max-height: 64px;
}

.bwhg-schedule__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
}

.bwhg-schedule__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.bwhg-schedule__day-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 32px;
  width: 100%;
}

.bwhg-schedule__day {
  display: flex;
  align-items: flex-end;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.6;
  color: var(--color-dark);
  white-space: nowrap;
}

.bwhg-schedule__day-num {
  font-size: 110px;
}

.bwhg-schedule__day-week {
  font-size: 32px;
  letter-spacing: -1.6px;
}

.bwhg-schedule__time {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bwhg-schedule__time-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bwhg-schedule__time-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 0.6;
  color: var(--color-white);
  width: 68px;
}

.bwhg-schedule__time-icon {
  width: 10px;
  height: 10px;
}

.bwhg-schedule__time-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 0.6;
  color: var(--color-white);
  white-space: nowrap;
}

.bwhg-schedule__venue {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid var(--color-white);
}

.bwhg-schedule__venue-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bwhg-schedule__venue-label {
  padding: 4px 10px 2px;
  border: 1px solid var(--color-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--color-white);
}

.bwhg-schedule__venue-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 0.6;
  color: var(--color-white);
}

.bwhg-schedule__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.bwhg-schedule__ticket-btn,
.bwhg-schedule__live-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70px;
  /* flex-grow の等分だと画像の内在アスペクト比の影響で幅が均等にならないため、
     ギャップ分(10px)を差し引いた固定の50%幅で確実に等幅にする */
  flex: 0 0 calc(50% - 5px);
  min-width: 0;
  background-color: var(--color-dark);
  transition: opacity 0.3s ease-out;
}

.bwhg-schedule__ticket-btn:hover,
.bwhg-schedule__live-btn:hover {
  opacity: 0.85;
}

.bwhg-schedule__ticket-btn {
  flex-direction: row;
  gap: 6px;
  padding: 13px 12px 14px;
}

.bwhg-schedule__ticket-logo {
  width: 120px;
  height: 46px;
}

.bwhg-schedule__ticket-text {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-white);
  text-align: left;
  white-space: nowrap;
}

.bwhg-schedule__live-btn {
  gap: 6px;
  padding: 13px 30px 14px 31px;
}

.bwhg-schedule__live-logo {
  width: 168px;
  height: 21.3px;
}

.bwhg-schedule__live-text {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--color-white);
  text-align: center;
}

@media (max-width: 768px) {
  .bwhg-schedule {
    flex-direction: column;
  }

  .bwhg-schedule__card {
    flex: none;
    width: 100%;
    padding: 30px 16px;
    border-right: none;
    border-bottom: 1px solid var(--color-white);
    align-items: center;
  }

  .bwhg-schedule__card:last-child {
    padding: 30px 16px;
    border-bottom: none;
  }

  /* SPは縦積みで各カードが全幅になるため、背景ブリードも左右対称の全幅に切り替える */
  .bwhg-schedule__card::before,
  .bwhg-schedule__card:first-child::before,
  .bwhg-schedule__card:last-child::before,
  .bwhg-schedule__bg,
  .bwhg-schedule__card:first-child .bwhg-schedule__bg,
  .bwhg-schedule__card:last-child .bwhg-schedule__bg {
    left: 50%;
    right: auto;
    width: var(--bwhg-vw);
    transform: translateX(-50%);
  }

  .bwhg-schedule__sponsor {
    width: 140px;
    height: 40px;
    padding: 4px 0;
  }

  .bwhg-schedule__sponsor-logo {
    max-width: 94px;
    max-height: 32px;
  }

  .bwhg-schedule__info,
  .bwhg-schedule__day-row,
  .bwhg-schedule__venue {
    width: 343px;
    max-width: 100%;
  }

  /* Androidのみ、フォントのレンダリング差によりday-weekとtimeの間隔が詰まって見えるため、
     justify-content:space-betweenに加えて最低限のgapを保証する */
  .bwhg-schedule__day-row {
    gap: 12px;
  }

  .bwhg-schedule__day-num {
    font-size: 80px;
  }

  .bwhg-schedule__day-week {
    font-size: 24px;
    letter-spacing: -1.2px;
  }

  .bwhg-schedule__time-value {
    font-size: 24px;
    width: 52px;
  }

  .bwhg-schedule__time-icon {
    width: 8px;
    height: 8px;
  }

  .bwhg-schedule__time-label {
    font-size: 16px;
  }

  .bwhg-schedule__ticket-btn,
  .bwhg-schedule__live-btn {
    height: 50px;
  }

  .bwhg-schedule__ticket-btn {
    gap: 4px;
    padding: 9px 8px 10px;
  }

  .bwhg-schedule__ticket-logo {
    width: 85.7px;
    height: 32.9px;
  }

  .bwhg-schedule__live-logo {
    width: 120px;
    height: 15.2px;
  }

  .bwhg-schedule__ticket-text,
  .bwhg-schedule__live-text {
    font-size: 11.4px;
  }
}

/* 769px〜1100pxはカードを横並びのままにすると、110px等の固定フォントサイズの
   文字がはみ出るため、SPと同じレイアウト（縦積み・小さめフォント）に変更する */
@media (max-width: 1100px) and (min-width: 769px) {
  .bwhg-schedule {
    flex-direction: column;
  }

  .bwhg-schedule__card {
    flex: none;
    width: 100%;
    padding: 30px 16px;
    border-right: none;
    border-bottom: 1px solid var(--color-white);
    align-items: center;
  }

  .bwhg-schedule__card:last-child {
    padding: 30px 16px;
    border-bottom: none;
  }

  .bwhg-schedule__card::before,
  .bwhg-schedule__card:first-child::before,
  .bwhg-schedule__card:last-child::before,
  .bwhg-schedule__bg,
  .bwhg-schedule__card:first-child .bwhg-schedule__bg,
  .bwhg-schedule__card:last-child .bwhg-schedule__bg {
    left: 50%;
    right: auto;
    width: var(--bwhg-vw);
    transform: translateX(-50%);
  }

  .bwhg-schedule__sponsor {
    width: 140px;
    height: 40px;
    padding: 4px 0;
  }

  .bwhg-schedule__sponsor-logo {
    max-width: 94px;
    max-height: 32px;
  }

  /* bwhg-schedule__actionsはSPでは（bwhg-site自体が実ビューポート幅に一致するため）
     明示的な幅指定なしでも収まっていたが、この範囲ではbwhg-siteが1366px固定の
     ままのため、他のinfo/day-row/venueと同様に343pxへ明示的に縮める必要がある */
  .bwhg-schedule__info,
  .bwhg-schedule__day-row,
  .bwhg-schedule__venue,
  .bwhg-schedule__actions {
    width: 343px;
    max-width: 100%;
  }

  .bwhg-schedule__day-row {
    gap: 12px;
  }

  .bwhg-schedule__day-num {
    font-size: 80px;
  }

  .bwhg-schedule__day-week {
    font-size: 24px;
    letter-spacing: -1.2px;
  }

  .bwhg-schedule__time-value {
    font-size: 24px;
    width: 52px;
  }

  .bwhg-schedule__time-icon {
    width: 8px;
    height: 8px;
  }

  .bwhg-schedule__time-label {
    font-size: 16px;
  }

  .bwhg-schedule__ticket-btn,
  .bwhg-schedule__live-btn {
    height: 50px;
  }

  .bwhg-schedule__ticket-btn {
    gap: 4px;
    padding: 9px 8px 10px;
  }

  .bwhg-schedule__ticket-logo {
    width: 85.7px;
    height: 32.9px;
  }

  .bwhg-schedule__live-logo {
    width: 120px;
    height: 15.2px;
  }

  .bwhg-schedule__ticket-text,
  .bwhg-schedule__live-text {
    font-size: 11.4px;
  }
}

/* ---------------------------------------------------------------- */
/* sections/access-summary.css */
/* ---------------------------------------------------------------- */
/* ==========================================================================
   access-summary (アクセス方法 簡易パネル)
   ========================================================================== */

.bwhg-access-summary {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 83px;
}

.bwhg-access-summary__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
  object-fit: cover;
  opacity: 0.15;
  z-index: 0;
}

/* ビューポート幅が1366pxを超える場合に左右へ白い余白が出ないよう、
   背景のみをビューポート全幅までブリードさせる（コンテンツ位置はFigma通り1366px基準のまま） */
.bwhg-access-summary__bg-base {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  transform: translateX(-50%);
  background-color: var(--color-dark);
  z-index: -1;
}

.bwhg-access-summary__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.bwhg-access-summary__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 1100px;
  max-width: 100%;
  padding: 40px 60px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--color-white);
  backdrop-filter: blur(10px);
}

.bwhg-access-summary__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 26px;
  color: var(--color-white);
  text-align: center;
}

.bwhg-access-summary__list {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.bwhg-access-summary__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 230px;
}

.bwhg-access-summary__divider {
  width: 1px;
  height: 175px;
  background-color: var(--color-white);
  flex-shrink: 0;
}

/* 769px〜1120px（タブレット〜狭いPC幅）: 4項目横並びだと幅が足りず崩れる（重なり）ため、
   SPと同じ縦積みレイアウトを流用して崩れを防ぐ（bwhg-access__と同じ対応） */
@media (max-width: 1120px) and (min-width: 769px) {
  /* .bwhg-access-summary__panel自体はwidth:1100px; max-width:100%だが、
     max-width:100%は1366px固定の祖先要素基準にしか効かず実ビューポート幅を見ないため、
     var(--bwhg-vw)基準で明示的に縮める（縮んだ分は親のalign-items:centerで自動的に中央寄せ） */
  .bwhg-access-summary__panel {
    width: min(1100px, calc(var(--bwhg-vw) - 48px));
  }

  .bwhg-access-summary__list {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 600px;
    max-width: 100%;
  }

  .bwhg-access-summary__item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 40px;
  }

  .bwhg-access-summary__divider {
    width: 100%;
    height: 1px;
  }
}

.bwhg-access-summary__icons {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.bwhg-access-summary__icon-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  /* ラベル文字幅に関わらずアイコン(60px)基準で幅を固定し、隣接アイコンとの間隔（＋マーク位置）がラベル長に左右されないようにする */
  width: 60px;
}

/* 単独アイコン（車のみ）の場合も、車+シャトルバスのコンボ幅と同じ幅にしてセンター揃えにする */
.bwhg-access-summary__icon-group:only-child {
  width: 156px;
}

.bwhg-access-summary__icon-label {
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
}

.bwhg-access-summary__icon {
  width: 60px;
  height: 60px;
}

.bwhg-access-summary__icon--bordered {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-gold);
  border-radius: 5px;
}

.bwhg-access-summary__icon--bordered img {
  max-width: 40px;
  max-height: 42px;
}

.bwhg-access-summary__plus {
  position: relative;
  /* ラベル＋gapの高さ分だけ下げて、アイコン画像(60px)の垂直中央に合わせる（Figma実測値） */
  margin-top: 46px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.bwhg-access-summary__plus-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bwhg-access-summary__plus-symbol {
  position: relative;
  display: block;
  font-family: var(--font-jp);
  font-size: 13px;
  line-height: 20px;
  color: var(--color-dark);
  text-align: center;
}

.bwhg-access-summary__text {
  width: 100%;
  font-family: var(--font-jp);
  font-size: 15px;
  color: var(--color-white);
  text-align: left;
}

.bwhg-access-summary__text strong {
  font-weight: 700;
  color: var(--color-gold);
}

.bwhg-access-summary__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 280px;
  padding: 14px 20px;
  background-color: var(--color-dark);
  border: 1px solid var(--color-gold);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-white);
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

.bwhg-access-summary__btn:hover {
  background-color: #222222;
  color: var(--color-gold);
}

.bwhg-access-summary__btn-icon {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.bwhg-access-summary__btn-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-out;
}

.bwhg-access-summary__btn-icon img:last-child {
  opacity: 0;
}

.bwhg-access-summary__btn:hover .bwhg-access-summary__btn-icon img:first-child {
  opacity: 0;
}

.bwhg-access-summary__btn:hover .bwhg-access-summary__btn-icon img:last-child {
  opacity: 1;
}

@media (max-width: 768px) {
  .bwhg-access-summary {
    padding: 40px 16px;
  }

  .bwhg-access-summary__panel {
    gap: 20px;
    width: 100%;
    padding: 20px 16px 30px;
  }

  .bwhg-access-summary__title {
    font-size: 20px;
  }

  .bwhg-access-summary__list {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 300px;
    max-width: 100%;
  }

  .bwhg-access-summary__item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
  }

  .bwhg-access-summary__divider {
    width: 100%;
    height: 1px;
  }

  .bwhg-access-summary__icons {
    gap: 6px;
  }

  .bwhg-access-summary__icon-group {
    width: 45px;
  }

  .bwhg-access-summary__icon-group:only-child {
    width: 117px;
  }

  .bwhg-access-summary__icon,
  .bwhg-access-summary__icon--bordered {
    width: 45px;
    height: 45px;
  }

  .bwhg-access-summary__icon--bordered img {
    max-width: 30px;
    max-height: 31px;
  }

  .bwhg-access-summary__plus {
    margin-top: 41px;
    width: 15px;
    height: 15px;
  }

  .bwhg-access-summary__plus-symbol {
    font-size: 10px;
    line-height: 15px;
  }

  .bwhg-access-summary__text {
    width: 150px;
    text-align: left;
  }
}

/* ---------------------------------------------------------------- */
/* sections/contents-menu.css */
/* ---------------------------------------------------------------- */
/* ==========================================================================
   contents-menu (CONTENTS MENU アンカーナビ)
   ========================================================================== */

.bwhg-menu-section {
  position: relative;
  padding-top: 80px;
  padding-bottom: 40px;
}

.bwhg-menu-section__texture-top {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
  object-fit: cover;
  z-index: 0;
}

/* 下半分はEVENTSセクションと同じゴールド＋テクスチャの背景
   ビューポート幅が1366pxを超える場合に左右へ白い余白が出ないよう、
   背景のみをビューポート全幅までブリードさせる（コンテンツ位置はFigma通り1366px基準のまま） */
.bwhg-menu-section__gold-bottom {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--bwhg-vw);
  transform: translateX(-50%);
  bottom: 0;
  background-color: var(--color-gold);
  overflow: hidden;
  z-index: 0;
}

.bwhg-menu-section__texture-bottom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
}

.bwhg-contents-menu {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  margin: 0 133px;
  padding: 40px 50px 60px;
  background-color: var(--color-dark);
  border: 2px solid var(--color-gold);
}

.bwhg-contents-menu__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  width: 1000px;
  max-width: 100%;
}

.bwhg-contents-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-gold);
}

.bwhg-contents-menu__label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bwhg-contents-menu__icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.bwhg-contents-menu__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-white);
  white-space: nowrap;
  transition: color 0.3s ease-out;
}

.bwhg-contents-menu__item:hover .bwhg-contents-menu__text {
  color: var(--color-gold);
}

.bwhg-contents-menu__break {
  display: none;
}

.bwhg-contents-menu__chevron {
  width: 8px;
  height: 12px;
  transform: rotate(90deg);
}

/* 769px〜1100pxはmargin:0 133px（固定）のままだと実ビューポート幅に対して
   幅が合わずはみ出るため、var(--bwhg-vw)基準の幅に縮めて中央寄せし直し、
   グリッドもSPと同じ2列に変更する */
@media (max-width: 1100px) and (min-width: 769px) {
  .bwhg-contents-menu {
    margin: 0 auto;
    width: min(1100px, calc(var(--bwhg-vw) - 32px));
    padding: 40px 30px 60px;
  }

  .bwhg-contents-menu__grid {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }
}

@media (max-width: 768px) {
  .bwhg-menu-section {
    padding-top: 40px;
    padding-bottom: 24px;
  }

  .bwhg-contents-menu {
    gap: 30px;
    margin: 0 16px;
    padding: 30px 16px;
  }

  .bwhg-contents-menu__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 20px;
    width: 310px;
  }

  .bwhg-contents-menu__item {
    height: auto;
    align-items: flex-start;
  }

  .bwhg-contents-menu__icon {
    width: 26px;
    height: 26px;
  }

  .bwhg-contents-menu__text {
    font-size: 14px;
    line-height: 1.2;
  }

  .bwhg-contents-menu__break {
    display: block;
  }

  .bwhg-contents-menu__chevron {
    width: 6px;
    height: 9px;
    margin-top: 4px;
  }
}

/* ---------------------------------------------------------------- */
/* sections/event-info.css */
/* ---------------------------------------------------------------- */
/* ==========================================================================
   event-info (イベント情報 告知カード一覧)
   ========================================================================== */

.bwhg-event-info {
  position: relative;
  display: flex;
  justify-content: center;
  /* 左右の余白は、.bwhg-siteが1366px未満にクロップされる範囲（769px〜999px）で
     コンテンツが欠けないよう、クロップ量に応じて動的に拡大する（1000px以上では固定183pxのまま） */
  padding: 100px max(183px, calc(683px - var(--bwhg-vw) / 2)) 100px;
}

/* ビューポート幅が1366pxを超える場合に左右へ白い余白が出ないよう、
   背景のみをビューポート全幅までブリードさせる（コンテンツ位置はFigma通り1366px基準のまま） */
.bwhg-event-info::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  transform: translateX(-50%);
  background-color: var(--color-gold);
  z-index: -1;
}

.bwhg-event-info__texture {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
  object-fit: cover;
  opacity: 0.15;
  z-index: 0;
}

.bwhg-event-info__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 1000px;
  max-width: 100%;
}

.bwhg-event-info__heading {
  gap: 0;
}

.bwhg-event-info__heading .bwhg-section-heading__en {
  font-size: 110px;
  color: var(--color-dark);
}

.bwhg-event-info__heading .bwhg-section-heading__jp {
  font-size: 22px;
  color: var(--color-dark);
  letter-spacing: -1.1px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-dark);
}

.bwhg-event-info__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.bwhg-event-info__item {
  position: relative;
  transition: opacity 0.2s ease-out;
}

.bwhg-event-info__item:hover {
  opacity: 0.85;
}

.bwhg-event-info__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  height: 100%;
  padding: 8px 8px 30px;
  background-color: var(--color-white);
  color: inherit;
  text-decoration: none;
}

.bwhg-event-info__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.bwhg-event-info__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bwhg-event-info__text {
  width: 100%;
  padding: 0 20px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-dark);
  text-align: left;
}

.bwhg-event-info__badge {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
}

.bwhg-event-info__badge-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bwhg-event-info__badge-plus {
  position: absolute;
  left: 20.53px;
  top: 15px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-gold);
}

@media (max-width: 768px) {
  .bwhg-event-info {
    padding: 60px 16px 40px;
  }

  .bwhg-event-info__inner {
    gap: 30px;
    width: 343px;
  }

  .bwhg-event-info__heading .bwhg-section-heading__en {
    font-size: 64px;
  }

  .bwhg-event-info__heading .bwhg-section-heading__jp {
    font-size: 18px;
    letter-spacing: -0.9px;
  }

  .bwhg-event-info__list {
    grid-template-columns: repeat(2, 166px);
    gap: 11px;
    width: 343px;
  }

  .bwhg-event-info__item {
    width: 166px;
    height: 249px;
  }

  .bwhg-event-info__link {
    gap: 8px;
    padding: 6px 6px 30px;
  }

  .bwhg-event-info__text {
    padding: 0;
  }
}

/* ---------------------------------------------------------------- */
/* sections/time-schedule.css */
/* ---------------------------------------------------------------- */
/* ==========================================================================
   time-schedule (タイムスケジュール 土日2日程テーブル)
   ========================================================================== */

.bwhg-time-schedule {
  position: relative;
  /* 左右の余白は、.bwhg-siteが1366px未満にクロップされる範囲（769px〜999px）で
     コンテンツが欠けないよう、クロップ量に応じて動的に拡大する（1000px以上では固定183pxのまま） */
  padding: 100px max(183px, calc(683px - var(--bwhg-vw) / 2));
}

/* ビューポート幅が1366pxを超える場合に左右へ白い余白が出ないよう、
   背景のみをビューポート全幅までブリードさせる（コンテンツ位置はFigma通り1366px基準のまま） */
.bwhg-time-schedule::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  transform: translateX(-50%);
  background-color: #f5f5f5;
  z-index: -1;
}

.bwhg-time-schedule__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
  object-fit: cover;
  opacity: 0.5;
  z-index: 0;
}

.bwhg-time-schedule__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 100%;
}

.bwhg-time-schedule__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bwhg-time-schedule__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 110px;
  line-height: 1;
  color: var(--color-dark);
  text-align: center;
  white-space: nowrap;
  /* RCMS埋め込み先の他LP用CSS（h2タグへの背景画像指定・margin指定）が
     読み込み順によって上書きされてしまうため、明示的にリセットする */
  background: none;
  margin: 0;
}

.bwhg-time-schedule__break {
  display: none;
}

.bwhg-time-schedule__subtitle {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-gold);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -1.1px;
  color: var(--color-dark);
  text-align: center;
}

/* --- スケジュール本体（PC: 従来通りSAT/SUNを2列常時表示、SPのみタブ切り替え） --- */
.bwhg-time-schedule__body {
  display: grid;
  grid-template-columns: 480px 480px;
  grid-template-areas:
    "sat-head sun-head"
    "sat-table sun-table";
  column-gap: 40px;
  row-gap: 16px;
  width: 100%;
}

/* PCではタブボタンをグリッドの直接の子として振る舞わせ、見出しとして常時表示する */
.bwhg-time-schedule__tabs {
  display: contents;
}

.bwhg-time-schedule__tab {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding-top: 14px;
  border: none;
  background: none;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.6;
  cursor: default;
}

.bwhg-time-schedule__tab--sat {
  grid-area: sat-head;
  color: #96804a;
}

.bwhg-time-schedule__tab--sun {
  grid-area: sun-head;
  color: #96804a;
}

.bwhg-time-schedule__day-num {
  font-size: 80px;
}

.bwhg-time-schedule__day-week {
  font-size: 32px;
  letter-spacing: -1.6px;
}

.bwhg-time-schedule__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
}

.bwhg-time-schedule__table--sat {
  grid-area: sat-table;
}

.bwhg-time-schedule__table--sun {
  grid-area: sun-table;
}

/* PC(769px以上)はSAT/SUNを常に両方表示するため、SP用タブ切り替えでついた
   hidden属性を打ち消す */
@media (min-width: 769px) {
  .bwhg-time-schedule__table[hidden] {
    display: table;
  }
}

.bwhg-time-schedule__table-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.bwhg-time-schedule__time {
  width: 120px;
  /* フォント（BW-Spiked）の字面の見え方の違いを吸収するため、天地の内訳のみ微調整
     （上下合計は22pxのまま = 1行時のセル高さ・行の高さ計算には影響しない） */
  padding: 14px 16px 8px;
  background-color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--color-dark);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

/* bwhg-time-schedule__event が2行以上になる行は、時刻を上揃えにする */
.bwhg-time-schedule__time--top {
  padding-top: 11px;
  padding-bottom: 11px;
  vertical-align: top;
}

.bwhg-time-schedule__time-suffix {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;
  margin-left: 2px;
}

.bwhg-time-schedule__event {
  position: relative;
  padding: 10px 11px;
  background-color: var(--color-white);
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-dark);
  text-align: left;
  vertical-align: middle;
}

.bwhg-time-schedule__event::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background-color: var(--color-dark);
}

.bwhg-time-schedule__highlight {
  font-weight: 700;
  color: var(--color-gold);
}

@media (max-width: 768px) {
  .bwhg-time-schedule {
    padding: 40px 16px;
  }

  .bwhg-time-schedule__inner {
    gap: 20px;
  }

  .bwhg-time-schedule__title {
    font-size: 64px;
  }

  .bwhg-time-schedule__break {
    display: block;
  }

  .bwhg-time-schedule__subtitle {
    font-size: 18px;
    letter-spacing: -0.9px;
  }

  /* SPのみ本体をタブ切り替え式（1つのテーブルだけ表示）に変更する */
  .bwhg-time-schedule__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .bwhg-time-schedule__tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
  }

  /* Figmaデザイン（TIME SCHEDULE_SP）に合わせ、下線＋不透明度の表現から
     塗りつぶし背景（アクティブ:Brave Gold Dark 1 #96804A／非アクティブ:#CCCCCC）
     ＋白文字のバッジ表現に変更する */
  .bwhg-time-schedule__tab {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 12px 0;
    background-color: #CCCCCC;
    border-bottom: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .bwhg-time-schedule__tab.bwhg-is-active {
    background-color: #96804A;
  }

  .bwhg-time-schedule__tab--sat,
  .bwhg-time-schedule__tab--sun {
    color: #FFFFFF;
  }

  .bwhg-time-schedule__table[hidden] {
    display: none;
  }

  .bwhg-time-schedule__day-num {
    font-size: 50px;
  }

  .bwhg-time-schedule__day-week {
    font-size: 20px;
    letter-spacing: -1px;
  }

  .bwhg-time-schedule__time {
    width: 100px;
    padding: 11px 10px;
    font-size: 26px;
  }

  .bwhg-time-schedule__time-suffix {
    font-size: 16px;
  }

  .bwhg-time-schedule__event {
    font-size: 16px;
  }
}

/* 769px〜1100pxはPC本体（SAT/SUN 480px×2列常時表示）のままだと幅が収まらず
   はみ出るため、SPと同じタブ切り替え式レイアウトに変更する */
@media (max-width: 1100px) and (min-width: 769px) {
  .bwhg-time-schedule {
    padding: 40px 16px;
  }

  /* SPではbwhg-site自体が実ビューポート幅に一致するためwidth:100%のままでも
     問題ないが、この範囲ではbwhg-site自体は1366px固定のままのため、
     table等がwidth:100%で1366px基準の幅を引き継いでしまう。
     bwhg-time-schedule__inner自体をvar(--bwhg-vw)基準の幅に明示的に縮める */
  .bwhg-time-schedule__inner {
    gap: 20px;
    max-width: min(600px, calc(var(--bwhg-vw) - 32px));
    margin: 0 auto;
  }

  .bwhg-time-schedule__title {
    font-size: 64px;
  }

  .bwhg-time-schedule__break {
    display: block;
  }

  .bwhg-time-schedule__subtitle {
    font-size: 18px;
    letter-spacing: -0.9px;
  }

  .bwhg-time-schedule__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .bwhg-time-schedule__tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
  }

  /* Figmaデザイン（TIME SCHEDULE_SP）に合わせ、下線＋不透明度の表現から
     塗りつぶし背景（アクティブ:Brave Gold Dark 1 #96804A／非アクティブ:#CCCCCC）
     ＋白文字のバッジ表現に変更する */
  .bwhg-time-schedule__tab {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 12px 0;
    background-color: #CCCCCC;
    border-bottom: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .bwhg-time-schedule__tab.bwhg-is-active {
    background-color: #96804A;
  }

  .bwhg-time-schedule__tab--sat,
  .bwhg-time-schedule__tab--sun {
    color: #FFFFFF;
  }

  .bwhg-time-schedule__table[hidden] {
    display: none;
  }

  .bwhg-time-schedule__day-num {
    font-size: 50px;
  }

  .bwhg-time-schedule__day-week {
    font-size: 20px;
    letter-spacing: -1px;
  }

  .bwhg-time-schedule__time {
    width: 100px;
    padding: 11px 10px;
    font-size: 26px;
  }

  .bwhg-time-schedule__time-suffix {
    font-size: 16px;
  }

  .bwhg-time-schedule__event {
    font-size: 16px;
  }
}

/* ---------------------------------------------------------------- */
/* sections/gourmet.css */
/* ---------------------------------------------------------------- */
/* ==========================================================================
   gourmet (アリーナグルメ: オフィシャルフードカルーセル + ウォリ飯フロア別出店グリッド)
   ========================================================================== */

.bwhg-gourmet {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1366px;
  margin: 0 auto;
  padding: 80px 0;
}

/* ビューポート幅が1366pxを超える場合に左右へ白い余白が出ないよう、
   背景のみをビューポート全幅までブリードさせる（コンテンツ位置はFigma通り1366px基準のまま） */
.bwhg-gourmet::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  transform: translateX(-50%);
  background-color: var(--color-dark);
  z-index: -1;
}

/* ---------- 見出し ---------- */

.bwhg-gourmet__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 765px;
  max-width: 100%;
}

.bwhg-gourmet__heading-top {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bwhg-gourmet__heading-en {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 110px;
  line-height: 1;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
}

.bwhg-gourmet__heading-break {
  display: none;
}

.bwhg-gourmet__heading-label {
  display: inline-flex;
  justify-content: center;
  border-bottom: 2px solid var(--color-gold);
  padding-bottom: 8px;
}

.bwhg-gourmet__heading-jp {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -1.1px;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
}

.bwhg-gourmet__heading-desc {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-gold);
  text-align: center;
}

/* ---------- オフィシャルフード ---------- */

.bwhg-gourmet__official {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  margin-top: 40px;
}

/* RCMS側で「準備中」表示として一時的に差し込まれているプレースホルダー画像
   （bwhg-gourmet__wari内・bwhg-arena-map__top内の2箇所で共通利用）。
   専用のサイズ指定がなくimgの汎用リセット（max-width:100%）のみが効いていたため、
   コンテンツ幅を大きく超えて表示されてしまっていた */
.bwhg-gourmet__wari-comingsoon-image {
  width: 330px;
  max-width: 100%;
}

.bwhg-gourmet__official-heading {
  width: 100%;
  margin: 0;
  padding: 10px 0;
  background-color: var(--color-gold);
  color: var(--color-dark);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 28px;
  text-align: center;
}

.bwhg-gourmet__carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
}

/* タッチはブラウザ標準のスクロール＋scroll-snapにすべて任せる
   （自前のJSドラッグ実装は実機のOSジェスチャー認識と競合しやすいため）。
   マウスの時だけJSでscrollLeftを直接動かす */
.bwhg-gourmet__track-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
}

.bwhg-gourmet__track-viewport::-webkit-scrollbar {
  display: none;
}

.bwhg-gourmet__track-viewport.bwhg-is-dragging {
  cursor: grabbing;
}

.bwhg-gourmet__track {
  display: flex;
  gap: 26px;
}

/* iOS Safariは画像の長押しで独自の画像ドラッグ／コールアウトを開始してしまうため無効化する */
.bwhg-gourmet__track img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* 画像のみのカード（名称・価格表示は廃止）。
   縦サイズは変更前のbwhg-gourmet__card（画像＋文字組み）の実測の高さ
   （PC 439px／SP 351px）を維持し、横サイズは各画像自体のアスペクト比に
   委ねる（width指定なし＝img側のheight:100%; width:auto;に追従） */
.bwhg-gourmet__card {
  flex: 0 0 auto;
  height: 439px;
  scroll-snap-align: start;
}

.bwhg-gourmet__card img {
  height: 100%;
  width: auto;
  display: block;
}

/* ---------- カルーセルのページネーション ---------- */

.bwhg-gourmet__pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 209px;
}

.bwhg-gourmet__pagination-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: auto;
}

/* flex-shrink:0が無いと、カウンター表示の桁数が増えた際（例:「18／18」）に
   .bwhg-gourmet__pagination側の固定幅209pxへ収めようとして矢印アイコン側が
   横方向に押しつぶされ、正方形のアイコンが縦長に歪んで見える不具合があったため、
   アイコンの正方形サイズを常に維持する */
.bwhg-gourmet__pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
}

.bwhg-gourmet__pagination-btn img {
  display: block;
  width: 100%;
  height: 100%;
}

.bwhg-gourmet__pagination-btn--prev img {
  transform: scaleX(-1);
}

.bwhg-gourmet__pagination-counter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.5;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
}

.bwhg-gourmet__pagination-note {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-white);
  text-align: center;
  width: 100%;
}

/* ---------- ウォリ飯 ---------- */

.bwhg-gourmet__wari {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 100%;
  margin-top: 80px;
}

.bwhg-gourmet__wari-heading {
  width: 100%;
  margin: 0;
  padding: 10px 0;
  background-color: var(--color-gold);
  color: var(--color-dark);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 28px;
  text-align: center;
}

.bwhg-gourmet__wari-body {
  display: flex;
  flex-direction: column;
  gap: 70px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.bwhg-gourmet__floor {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
}

.bwhg-gourmet__floor-title {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 6px 16px;
  border-bottom: 2px solid var(--color-gold);
  border-left: 8px solid var(--color-gold);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 26px;
  color: var(--color-gold);
  white-space: nowrap;
}

.bwhg-gourmet__wari-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 235px);
  justify-content: start;
  gap: 20px;
  width: 100%;
}

.bwhg-gourmet__shop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 235px;
  padding: 8px 8px 20px;
  background-color: var(--color-white);
}

.bwhg-gourmet__shop-image {
  width: 219px;
  height: 219px;
  overflow: hidden;
  background-color: var(--color-dark);
}

/* 769px〜1100pxはauto-fill(235px固定)のままだと.bwhg-gourmet__wari-bodyの
   実ビューポート幅に対して列数が合わずはみ出るため、bwhg-team__roster同様
   実ビューポート幅に追従する3列のフレキシブルグリッドに切り替える */
@media (max-width: 1100px) and (min-width: 769px) {
  /* .bwhg-gourmet__wari-body自体もmax-width:1000px固定のままで実ビューポート幅を
     超えてしまうため、var(--bwhg-vw)基準で縮める（縮んだ分は
     margin:0 autoで自動的に中央寄せされる） */
  .bwhg-gourmet__wari-body {
    max-width: min(1000px, calc(var(--bwhg-vw) - 32px));
  }

  .bwhg-gourmet__wari-grid {
    grid-template-columns: repeat(3, 1fr);
    justify-content: stretch;
    gap: 20px;
  }

  .bwhg-gourmet__shop {
    width: 100%;
  }

  .bwhg-gourmet__shop-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

.bwhg-gourmet__shop-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bwhg-gourmet__shop-image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bwhg-gourmet__shop-placeholder-text {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-gold);
  text-align: center;
}

.bwhg-gourmet__shop-dates {
  display: flex;
  gap: 4px;
}

.bwhg-gourmet__shop-date {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding: 2px 4px 1px;
  border: 1px solid var(--color-dark);
  color: var(--color-dark);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.bwhg-gourmet__shop-date-num {
  font-size: 22px;
}

.bwhg-gourmet__shop-date-day {
  font-size: 16px;
}

.bwhg-gourmet__shop-name {
  width: 100%;
  padding: 0 6px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-dark);
}

/* ==========================================================================
   SP (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {

  .bwhg-gourmet {
    padding: 40px 0;
  }

  .bwhg-gourmet__heading {
    gap: 30px;
    width: 343px;
  }

  .bwhg-gourmet__heading-en {
    font-size: 64px;
    white-space: normal;
  }

  .bwhg-gourmet__heading-break {
    display: block;
  }

  .bwhg-gourmet__heading-jp {
    font-size: 18px;
    letter-spacing: -0.9px;
    white-space: normal;
  }

  .bwhg-gourmet__heading-desc {
    font-size: 16px;
  }

  .bwhg-gourmet__heading-desc-line {
    white-space: nowrap;
  }

  .bwhg-gourmet__official {
    gap: 20px;
    margin-top: 30px;
  }

  .bwhg-gourmet__official-heading {
    padding: 6px 0;
    font-size: 24px;
  }

  .bwhg-gourmet__carousel {
    gap: 20px;
  }

  .bwhg-gourmet__track {
    gap: 10px;
  }

  /* SPでは画像ごとにアスペクト比が異なり、PCと同じ「高さ固定・幅は画像なり」だと
     横長画像の幅が画面幅を超えてしまい1枚が画面に収まらない。SPでは逆に
     「幅を画面幅（var(--bwhg-vw)）に固定し、高さは画像なり」にして、
     どの画像も必ず画面内に収まるようにする */
  .bwhg-gourmet__card {
    width: var(--bwhg-vw);
    height: auto;
  }

  .bwhg-gourmet__card img {
    width: 100%;
    height: auto;
  }

  .bwhg-gourmet__pagination-row {
    gap: 25px;
  }

  .bwhg-gourmet__pagination-btn {
    width: 33.333px;
    height: 33.333px;
  }

  .bwhg-gourmet__pagination-counter {
    font-size: 26px;
  }

  .bwhg-gourmet__wari {
    gap: 20px;
    margin-top: 40px;
  }

  .bwhg-gourmet__wari-heading {
    padding: 6px 0;
    font-size: 24px;
  }

  .bwhg-gourmet__wari-body {
    gap: 40px;
    max-width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .bwhg-gourmet__floor {
    gap: 20px;
  }

  .bwhg-gourmet__floor-title {
    padding: 4px 10px;
    font-size: 22px;
  }

  .bwhg-gourmet__wari-grid {
    grid-template-columns: repeat(2, 166px);
    justify-content: center;
    gap: 10px;
  }

  .bwhg-gourmet__shop {
    width: 166px;
    gap: 6px;
    padding: 6px 6px 16px;
  }

  .bwhg-gourmet__shop-image {
    width: 154px;
    height: 154px;
  }

  .bwhg-gourmet__shop-date {
    width: 75px;
    padding: 3px 2px 1px;
  }

  .bwhg-gourmet__shop-date-num {
    font-size: 20px;
  }

  .bwhg-gourmet__shop-date-day {
    font-size: 13px;
  }

  .bwhg-gourmet__shop-name {
    padding: 0 4px;
    font-size: 16px;
  }
}

/* ---------------------------------------------------------------- */
/* sections/arena-map.css */
/* ---------------------------------------------------------------- */
/* ==========================================================================
   arena-map (アリーナマップ)
   ========================================================================== */

.bwhg-arena-map {
  position: relative;
  display: flex;
  justify-content: center;
  /* 左右の余白は、.bwhg-siteが1366px未満にクロップされる範囲（769px〜999px）で
     コンテンツが欠けないよう、クロップ量に応じて動的に拡大する（1000px以上では固定183pxのまま） */
  padding: 100px max(183px, calc(683px - var(--bwhg-vw) / 2));
}

/* ビューポート幅が1366pxを超える場合に左右へ白い余白が出ないよう、
   背景のみをビューポート全幅までブリードさせる（コンテンツ位置はFigma通り1366px基準のまま） */
.bwhg-arena-map::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  transform: translateX(-50%);
  background-color: var(--color-dark);
  z-index: -1;
}

.bwhg-arena-map__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
  object-fit: cover;
  z-index: 0;
}

.bwhg-arena-map__bg-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(150, 128, 74, 0.6) 0%, rgba(15, 15, 19, 0.9) 50%, rgba(15, 15, 19, 0.8) 100%);
  z-index: 0;
}

.bwhg-arena-map__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 1000px;
  max-width: 100%;
}

/* ---------- 見出し + マップ ---------- */

.bwhg-arena-map__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 100%;
}

.bwhg-arena-map__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bwhg-arena-map__heading-en {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 110px;
  line-height: 0.9;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
}

.bwhg-arena-map__heading-jp {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -1.1px;
  color: var(--color-white);
  text-align: center;
  border-bottom: 2px solid var(--color-gold);
  padding-bottom: 8px;
}

.bwhg-arena-map__maps {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
}

.bwhg-arena-map__map {
  width: 480px;
}

.bwhg-arena-map__map-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.bwhg-arena-map__map-label {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  width: 100%;
  padding: 16px 20px 12px;
  background-color: var(--color-dark);
}

.bwhg-arena-map__map-label-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 0.6;
  color: var(--color-gold);
}

.bwhg-arena-map__map-label-unit {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 0.6;
  color: var(--color-gold);
}

.bwhg-arena-map__map-visual {
  width: 100%;
  background-color: var(--color-white);
  overflow: hidden;
}

.bwhg-arena-map__map-visual--1f {
  aspect-ratio: 1920 / 2480;
}

.bwhg-arena-map__map-visual--2f {
  aspect-ratio: 1920 / 2080;
}

.bwhg-arena-map__map-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- やっていいこと（土足入場OK等） ---------- */

.bwhg-arena-map__rules {
  display: flex;
  align-items: center;
  gap: 30px;
}

.bwhg-arena-map__rule {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.bwhg-arena-map__rule-label {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
}

.bwhg-arena-map__rule-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 2px solid var(--color-gold);
  border-radius: 30px;
}

/* ---------- 凡例 + 非常口パネル ---------- */

.bwhg-arena-map__panel {
  position: relative;
  width: 100%;
  padding: 30px 68px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--color-white);
  backdrop-filter: blur(10px);
}

.bwhg-arena-map__panel-row {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.bwhg-arena-map__legend {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.bwhg-arena-map__legend-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bwhg-arena-map__legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bwhg-arena-map__legend-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.bwhg-arena-map__legend-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.bwhg-arena-map__legend-label {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-white);
  white-space: nowrap;
}

/* PCでは1行、SPでは「バリアフリートイレ／（おむつ替え）」を2行に分ける(Figma実測に準拠) */
.bwhg-arena-map__legend-break {
  display: none;
}

.bwhg-arena-map__notice {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background-color: var(--color-white);
}

/* 769px〜1100pxは凡例(nowrapラベル)＋固定300px幅のnoticeを横並びのままにすると
   幅が収まらずはみ出るため、SPと同じ縦積みに切り替える */
@media (max-width: 1100px) and (min-width: 769px) {
  .bwhg-arena-map__panel-row {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .bwhg-arena-map__notice {
    width: 100%;
  }

  .bwhg-arena-map__legend-break {
    display: inline;
  }
}

.bwhg-arena-map__notice-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  background-color: #009C42;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-white);
}

.bwhg-arena-map__notice-text {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-dark);
}

.bwhg-arena-map__notice-sub {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: #009C42;
}

.bwhg-arena-map__notice-icon {
  display: inline-block;
  width: 68.8px;
  height: 32px;
  vertical-align: middle;
  margin: 0 2px;
}

/* ---------- ボタン ---------- */

.bwhg-arena-map__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 280px;
  padding: 14px 20px;
  background-color: var(--color-dark);
  border: 1px solid var(--color-gold);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-white);
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

.bwhg-arena-map__btn:hover {
  background-color: #222222;
  color: var(--color-gold);
}

.bwhg-arena-map__btn-icon {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.bwhg-arena-map__btn-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-out;
}

.bwhg-arena-map__btn-icon img:last-child {
  opacity: 0;
}

.bwhg-arena-map__btn:hover .bwhg-arena-map__btn-icon img:first-child {
  opacity: 0;
}

.bwhg-arena-map__btn:hover .bwhg-arena-map__btn-icon img:last-child {
  opacity: 1;
}

/* ==========================================================================
   SP (max-width: 768px) — Figma SP実測値 375px基準
   ========================================================================== */

@media (max-width: 768px) {
  .bwhg-arena-map {
    padding: 40px 16px;
  }

  .bwhg-arena-map__container {
    width: 343px;
  }

  .bwhg-arena-map__top {
    gap: 30px;
  }

  .bwhg-arena-map__heading-en {
    font-size: 64px;
  }

  .bwhg-arena-map__heading-jp {
    font-size: 18px;
    letter-spacing: -0.9px;
  }

  .bwhg-arena-map__maps {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .bwhg-arena-map__map {
    width: 100%;
  }

  .bwhg-arena-map__map-label {
    gap: 3.573px;
    padding: 11.433px 14.292px 8.575px;
  }

  .bwhg-arena-map__map-label-num {
    font-size: 34.3px;
  }

  .bwhg-arena-map__map-label-unit {
    font-size: 17.15px;
  }

  .bwhg-arena-map__panel {
    padding: 21px 16.5px;
  }

  .bwhg-arena-map__panel-row {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .bwhg-arena-map__legend {
    gap: 20px;
  }

  .bwhg-arena-map__legend-col {
    gap: 12px;
  }

  .bwhg-arena-map__legend-item {
    gap: 5px;
  }

  .bwhg-arena-map__legend-label {
    font-size: 12px;
  }

  .bwhg-arena-map__legend-break {
    display: inline;
  }

  .bwhg-arena-map__notice {
    width: 100%;
  }
}

/* ---------------------------------------------------------------- */
/* sections/team.css */
/* ---------------------------------------------------------------- */
/* ==========================================================================
   team（オフィシャルロスター＆HC / JASPERS / チームMC紹介 / マスコット紹介）
   ========================================================================== */

.bwhg-team {
  position: relative;
}

/* ビューポート幅が1366pxを超える場合に左右へ白い余白が出ないよう、
   背景のみをビューポート全幅までブリードさせる（コンテンツ位置はFigma通り1366px基準のまま） */
.bwhg-team::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  transform: translateX(-50%);
  background-color: var(--color-dark);
  z-index: -1;
}

/* ---------- 背景装飾（暗色パネル＋BRAVE WARRIORS袋文字＋明色パネル） ---------- */

.bwhg-team__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* team-bg-texture-dark.png/light.pngは斜めの意匠が焼き込まれた画像のため、
   ビューポート全幅までブリードさせて高さ固定のままobject-fit:coverで
   引き伸ばすと、幅が高さに対して極端に横長になった時点（実測で約1479px〜）で
   意匠の斜めラインの見える位置がずれてしまう。
   「BRAVE WARRIORS」袋文字と同様、Figma通り1366px幅の範囲内に留め、
   それを超える幅は.bwhg-team::beforeの単色背景に任せる */
.bwhg-team__bg-dark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1677px;
  overflow: hidden;
  background-color: var(--color-dark);
}

.bwhg-team__bg-dark-texture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.08;
}

/* 袋文字「BRAVE WARRIORS」はFigma通り1366px幅で見切れる意匠のため、
   周囲の背景ブリードとは別に自身でクリップ境界を持たせる */
.bwhg-team__bg-text {
  position: absolute;
  top: 20px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: hidden;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 326px;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px #877849;
  text-stroke: 1px #877849;
  opacity: 0.5;
  white-space: nowrap;
  text-align: center;
}

.bwhg-team__bg-light {
  position: absolute;
  top: 1355px;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}

.bwhg-team__bg-light-texture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bwhg-team__bg-light-fill {
  display: none;
}

.bwhg-team__bg-light-fill-texture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 共通レイアウト ---------- */

.bwhg-team__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

/* ---------- 見出し共通（block-heading） ---------- */

.bwhg-team__block-heading {
  display: flex;
  align-items: flex-end;
  width: 100%;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--color-white);
}

.bwhg-team__block-heading--gold {
  border-bottom-color: #96804a;
}

/* 1366px以下（SPに切り替わる769px手前まで）は、.bwhg-team__block-headingの祖先要素が
   1366px固定のままのため、width:100%だけでは実ビューポート幅に追従しない。
   var(--bwhg-vw)基準の上限を併用し、画面サイズに応じて縮むようにする
   （100%の方が狭い場合はそちらを優先するのでjaspers/mc等の2カラム内でも崩れない） */
@media (max-width: 1365px) and (min-width: 769px) {
  .bwhg-team__block-heading {
    width: min(100%, calc(var(--bwhg-vw) - 48px));
    align-self: center;
  }
}

.bwhg-team__block-heading-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 60px;
  line-height: 1;
  color: var(--color-white);
}

.bwhg-team__block-heading--gold .bwhg-team__block-heading-text {
  color: #96804a;
}

/* ---------- TEAM / ROSTER & HC ---------- */

.bwhg-team__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 100%;
}

.bwhg-team__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bwhg-team__intro-en {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 100px;
  line-height: 1;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
}

.bwhg-team__intro-jp {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-gold);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -1.1px;
  color: var(--color-white);
  text-align: center;
}

.bwhg-team__roster {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
}

.bwhg-team__roster-grid {
  display: grid;
  grid-template-columns: repeat(5, 220px);
  gap: 38px 25px;
  width: 100%;
}

.bwhg-team__roster-photo {
  width: 220px;
  height: 280px;
  object-fit: cover;
  transition: opacity 0.2s ease-out;
}

/* 769px〜1100pxはPC(5列×220px固定)のままだと幅が収まらずはみ出るため、
   実ビューポート幅に追従する3列のフレキシブルグリッドに切り替える */
@media (max-width: 1100px) and (min-width: 769px) {
  /* .bwhg-team__inner自体もmax-width:1200px固定のままで実ビューポート幅を
     超えてしまうため、var(--bwhg-vw)基準で縮める（縮んだ分は
     margin:0 autoで自動的に中央寄せされる） */
  .bwhg-team__inner {
    max-width: min(1100px, calc(var(--bwhg-vw) - 32px));
  }

  .bwhg-team__roster-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .bwhg-team__roster-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 220 / 280;
  }
}

.bwhg-team__roster-photo:hover {
  opacity: 0.8;
}

/* ---------- JASPERS / MC ---------- */

.bwhg-team__profile {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  width: 100%;
}

/* 1366px以下（SPに切り替わる769px手前まで）は、.bwhg-team__profileの祖先要素が
   1366px固定のままのため、width:100%だけでは実ビューポート幅に追従しない。
   var(--bwhg-vw)基準の上限を併用して画面サイズに応じて縮める。
   親の.bwhg-team__innerがalign-items:centerのため、縮んだ分は自動で画面中央に寄る */
@media (max-width: 1365px) and (min-width: 769px) {
  .bwhg-team__profile {
    width: min(100%, calc(var(--bwhg-vw) - 48px));
  }
}

.bwhg-team__jaspers,
.bwhg-team__mc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  flex: 1 1 0;
  min-width: 0;
}

.bwhg-team__jaspers-photo {
  width: 100%;
  height: 374px;
  background-color: var(--color-white);
}

.bwhg-team__jaspers-text {
  width: 100%;
  margin-top: 20px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: #0f0f13;
}

.bwhg-team__mc-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.bwhg-team__mc-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.bwhg-team__mc-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 20px;
  width: 100%;
}

.bwhg-team__mc-photo {
  flex-shrink: 0;
  width: 160px;
  height: 180px;
  object-fit: cover;
}

.bwhg-team__mc-text {
  width: 355px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: #0f0f13;
}

/* ---------- 名札バー（MC / マスコット共通） ---------- */

.bwhg-team__namebar {
  position: relative;
  width: 100%;
  height: 48px;
  background-image: url("../images/team-mc-name-bar-1.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.bwhg-team__namebar--mascot {
  background-image: url("../images/team-mascot-name-bar.svg");
}

.bwhg-team__namebar-text {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 12px 0 0 45.6px;
  font-family: var(--font-jp);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-white);
  white-space: nowrap;
}

.bwhg-team__namebar--mascot .bwhg-team__namebar-text {
  padding: 10.6px 0 0 35.29px;
}

.bwhg-team__namebar-role,
.bwhg-team__namebar-name {
  font-size: 20px;
}

.bwhg-team__namebar-kana {
  font-size: 16px;
}

.bwhg-team__name-break {
  display: none;
}

/* ---------- マスコット紹介 ---------- */

.bwhg-team__mascot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
}

.bwhg-team__mascot-body {
  display: grid;
  grid-template-columns: 234px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 22px;
  width: 958px;
  margin-left: auto;
}

/* 1366px以下（SPに切り替わる769px手前まで）は、.bwhg-team__mascotの祖先要素が
   1366px固定のままのため、var(--bwhg-vw)を基準に幅を画面サイズへ追従させて縮め、
   画面中央に表示する（1366px以上ではFigma通り右寄せの958px固定のまま） */
@media (max-width: 1365px) and (min-width: 769px) {
  .bwhg-team__mascot-body {
    width: min(958px, calc(var(--bwhg-vw) - 48px));
    margin: 0 auto;
  }
}

.bwhg-team__mascot-body .bwhg-team__namebar {
  grid-column: 2;
  grid-row: 1;
}

.bwhg-team__mascot-photo {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: center;
  width: 234px;
  height: 363px;
  object-fit: cover;
}

.bwhg-team__mascot-facts {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
  padding-left: 22px;
}

.bwhg-team__mascot-facts li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: #0f0f13;
}

.bwhg-team__mascot-facts li::before {
  content: "\25CF";
  flex-shrink: 0;
  font-size: 10px;
  color: var(--color-gold);
}

.bwhg-team__mascot-facts strong {
  font-weight: 700;
}

.bwhg-team__mascot-desc {
  grid-column: 2;
  grid-row: 3;
  width: 418px;
  margin-top: 16px;
  margin-left: 22px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: #0f0f13;
}

/* 769px〜1100pxはJASPERS写真＋MC一覧の横並び(gap:80px)のままだと幅が足りず、
   MC側のnamebarテキスト等が見切れるため、SPと同じ縦積みレイアウトに変更する。
   （この節はbwhg-team__mc-row等の基本ルールより後ろに置くこと。
   　以前この節を基本ルールより前に置いてしまい、同じ詳細度のalign-items等が
   　基本ルール側で上書きされ、写真・テキストが中央寄せにならない不具合があった） */
@media (max-width: 1100px) and (min-width: 769px) {
  .bwhg-team__profile {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .bwhg-team__jaspers,
  .bwhg-team__mc {
    flex: none;
    width: 100%;
    gap: 20px;
  }

  .bwhg-team__mc-item {
    align-items: center;
  }

  .bwhg-team__mc-row {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
  }

  .bwhg-team__mc-text {
    width: 100%;
  }

  /* namebar-textはJASPERS/MCを縦積みにしてMC側に全幅を確保したことで
     PCサイズのまま1行で収まるため、SPのような改行・画像差し替えは不要 */

  /* プロフィールを縦積みにしたことでbwhg-team全体の高さが変わり、
     斜め模様の見える位置がPC/SPの固定値と合わなくなったため、
     この範囲専用の値に調整する */
  .bwhg-team__bg-light {
    top: 2279px;
  }
}

/* ==========================================================================
   SP（〜768px）
   ========================================================================== */

@media (max-width: 768px) {
  .bwhg-team__bg-dark {
    height: 2000px;
  }

  .bwhg-team__bg-text {
    top: 4px;
    font-size: 89.56px;
  }

  .bwhg-team__bg-light {
    top: 1896px;
    /* bottom:0（team末尾まで延伸）だとobject-fit:coverの拡大率がteam全体の高さに
       依存してしまい、斜め模様の見える位置が実コンテンツの長さ次第でずれてしまうため、
       Figmaの意図した位置になる高さに固定する */
    bottom: 1815px;
  }

  /* bg-lightをbottom固定にした分、team末尾までの背景が途切れるため、
     斜め模様のない背景テクスチャ（goods-bg-texture-sp.pngと同じ画像）で埋める */
  .bwhg-team__bg-light-fill {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1815px;
    overflow: hidden;
  }

  .bwhg-team__inner {
    max-width: 343px;
    padding: 40px 0;
    gap: 40px;
  }

  .bwhg-team__block-heading {
    padding-bottom: 10px;
  }

  .bwhg-team__block-heading-text {
    font-size: 40px;
  }

  .bwhg-team__block-heading-text--sm {
    font-size: 36px;
  }

  .bwhg-team__top {
    gap: 30px;
  }

  .bwhg-team__intro-en {
    font-size: 64px;
  }

  .bwhg-team__intro-jp {
    font-size: 18px;
    letter-spacing: -0.9px;
  }

  .bwhg-team__roster {
    gap: 30px;
  }

  .bwhg-team__roster-grid {
    grid-template-columns: repeat(2, 165px);
    gap: 13px;
    justify-content: center;
  }

  .bwhg-team__roster-photo {
    width: 165px;
    height: 210px;
  }

  .bwhg-team__profile {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .bwhg-team__jaspers,
  .bwhg-team__mc {
    flex: none;
    width: 100%;
    gap: 20px;
  }

  .bwhg-team__jaspers-photo {
    height: 229px;
  }

  .bwhg-team__mc-row {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
  }

  .bwhg-team__mc-text {
    width: 100%;
  }

  .bwhg-team__namebar,
  .bwhg-team__namebar--mascot {
    height: 64px;
    background-image: url("../images/team-name-bar-sp.svg");
  }

  .bwhg-team__namebar-text,
  .bwhg-team__namebar--mascot .bwhg-team__namebar-text {
    padding: 5.91px 0 0 45px;
  }

  .bwhg-team__name-break {
    display: inline;
  }

  .bwhg-team__mascot {
    gap: 20px;
  }

  .bwhg-team__mascot-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 343px;
    margin: 0 auto;
    gap: 16px;
  }

  .bwhg-team__mascot-photo {
    width: 143px;
    height: 222px;
  }

  .bwhg-team__mascot-facts {
    margin-top: 0;
    padding-left: 0;
    width: 100%;
  }

  .bwhg-team__mascot-desc {
    width: 100%;
    margin-top: 0;
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------- */
/* sections/goods.css */
/* ---------------------------------------------------------------- */
/* ==========================================================================
   goods (「初観戦の方へ」応援グッズカルーセル)
   ========================================================================== */

.bwhg-goods {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
}

/* ビューポート幅が1366pxを超える場合に左右へ白い余白が出ないよう、
   背景のみをビューポート全幅までブリードさせる（コンテンツ位置はFigma通り1366px基準のまま） */
.bwhg-goods::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  transform: translateX(-50%);
  background-color: #f5f5f5;
  z-index: -1;
}

.bwhg-goods__bg-texture {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
  object-fit: cover;
  opacity: 0.5;
  z-index: 0;
}

.bwhg-goods__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 見出し（base.cssの.bwhg-section-headingを再利用、白背景セクション用に色を上書き） */
.bwhg-goods__heading-en {
  font-size: 110px;
  color: var(--color-dark);
}

.bwhg-goods__heading-jp-wrap {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-gold);
}

.bwhg-goods__heading-jp {
  font-size: 22px;
  letter-spacing: -1.1px;
  color: var(--color-dark);
}

/* 「初観戦の方へ」ラベル＋バナー */
.bwhg-goods__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 50px;
}

.bwhg-goods__intro-label {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bwhg-goods__intro-deco {
  width: 14px;
  height: 22px;
}

.bwhg-goods__intro-deco--left {
  transform: rotate(180deg) scaleY(-1);
}

.bwhg-goods__intro-label-text {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-dark);
  white-space: nowrap;
}

.bwhg-goods__intro-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 0;
  background-color: var(--color-dark);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 28px;
  line-height: normal;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
}

.bwhg-goods__intro-break {
  display: none;
}

.bwhg-goods__intro-banner-accent {
  color: var(--color-gold);
}

/* カルーセル */
.bwhg-goods__carousel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 30px;
}

/* タッチはブラウザ標準のスクロール＋scroll-snapにすべて任せる
   （自前のJSドラッグ実装は実機のOSジェスチャー認識と競合しやすいため）。
   マウスの時だけJSでscrollLeftを直接動かす */
.bwhg-goods__carousel {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
}

.bwhg-goods__carousel::-webkit-scrollbar {
  display: none;
}

.bwhg-goods__carousel.bwhg-is-dragging {
  cursor: grabbing;
}

.bwhg-goods__track {
  display: flex;
  gap: 26px;
}

.bwhg-goods__track img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

.bwhg-goods__item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-snap-align: start;
  gap: 16px;
  width: 382px;
  padding: 8px 8px 20px;
  background-color: var(--color-white);
}

.bwhg-goods__item-photo {
  position: relative;
  width: 366px;
  height: 244px;
  overflow: hidden;
}

.bwhg-goods__item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bwhg-goods__item-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  width: 100%;
  padding: 0 24px;
}

.bwhg-goods__item-name {
  width: 100%;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-dark);
}

.bwhg-goods__item-price {
  margin-top: auto;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: var(--color-dark);
  text-align: right;
}

.bwhg-goods__item-qty,
.bwhg-goods__item-tax {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-dark);
}

.bwhg-goods__item-qty {
  margin-right: 8px;
}

.bwhg-goods__item-tax {
  margin-left: 8px;
}

/* カルーセル操作ナビ */
.bwhg-goods__nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 20px;
}

.bwhg-goods__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
}

.bwhg-goods__nav-btn img {
  width: 100%;
  height: 100%;
}

.bwhg-goods__nav-btn--prev img {
  transform: rotate(180deg) scaleY(-1);
}

.bwhg-goods__nav-counter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.5;
  color: var(--color-dark);
  white-space: nowrap;
}

/* CTAボタン */
.bwhg-goods__cta {
  margin-top: 20px;
}

.bwhg-goods__cta-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 280px;
  padding: 14px 20px;
  background-color: var(--color-dark);
  border: 1px solid var(--color-gold);
  transition: background-color 0.3s ease-out;
}

.bwhg-goods__cta-link:hover {
  background-color: #222222;
}

.bwhg-goods__cta-text {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-white);
  transition: color 0.3s ease-out;
}

.bwhg-goods__cta-link:hover .bwhg-goods__cta-text {
  color: var(--color-gold);
}

.bwhg-goods__cta-icon {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.bwhg-goods__cta-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-out;
}

.bwhg-goods__cta-icon img:last-child {
  opacity: 0;
}

.bwhg-goods__cta-link:hover .bwhg-goods__cta-icon img:first-child {
  opacity: 0;
}

.bwhg-goods__cta-link:hover .bwhg-goods__cta-icon img:last-child {
  opacity: 1;
}

@media (max-width: 768px) {
  .bwhg-goods {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f5f5f5;
  }

  .bwhg-goods__bg-texture {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    object-fit: cover;
    opacity: 0.5;
    z-index: 0;
  }

  .bwhg-goods__heading-en {
    font-size: 64px;
  }

  .bwhg-goods__heading-jp {
    font-size: 18px;
    letter-spacing: -0.9px;
  }

  .bwhg-goods__intro {
    margin-top: 30px;
  }

  .bwhg-goods__intro-label-text {
    font-size: 24px;
  }

  .bwhg-goods__intro-banner {
    display: block;
    padding: 6px 0;
    font-size: 24px;
    white-space: normal;
  }

  .bwhg-goods__intro-break {
    display: block;
  }

  .bwhg-goods__carousel-wrap {
    margin-top: 20px;
  }

  .bwhg-goods__track {
    gap: 10px;
  }

  .bwhg-goods__item {
    width: 300px;
    padding: 6px 6px 15px;
    gap: 14px;
  }

  .bwhg-goods__item-photo {
    width: 100%;
    height: 192px;
  }

  .bwhg-goods__item-body {
    gap: 16px;
    padding: 0 16px;
  }

  .bwhg-goods__item-name {
    font-size: 16px;
  }

  .bwhg-goods__item-price {
    font-size: 36px;
  }

  .bwhg-goods__item-qty,
  .bwhg-goods__item-tax {
    font-size: 16px;
  }

  .bwhg-goods__nav {
    gap: 25px;
  }

  .bwhg-goods__nav-btn {
    width: 33.333px;
    height: 33.333px;
  }

  .bwhg-goods__nav-counter {
    font-size: 26px;
  }
}

/* ---------------------------------------------------------------- */
/* sections/access.css */
/* ---------------------------------------------------------------- */
/* ==========================================================================
   access (アクセス フルセクション: 会場情報 + アクセス方法パネル)
   ========================================================================== */

.bwhg-access {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 83px;
}

/* ビューポート幅が1366pxを超える場合に左右へ白い余白が出ないよう、
   背景のみをビューポート全幅までブリードさせる（コンテンツ位置はFigma通り1366px基準のまま） */
.bwhg-access__bg-base {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  transform: translateX(-50%);
  background-color: var(--color-dark);
  z-index: -1;
}

.bwhg-access__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
  object-fit: cover;
  opacity: 0.15;
  z-index: 0;
}

.bwhg-access__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 1200px;
  max-width: 100%;
}

/* 見出し（BW-Spiked 110px + 下線付き日本語） */
.bwhg-access__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bwhg-access__heading-en {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 110px;
  line-height: 1;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
  /* RCMS埋め込み先の他LP用CSS（h2タグへの背景画像・margin-bottom指定）が
     読み込み順によって上書きされてしまうため、明示的にリセットする */
  background: none;
  margin: 0;
}

.bwhg-access__heading-jp-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-gold);
}

.bwhg-access__heading-jp {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-white);
  text-align: center;
  letter-spacing: -1.1px;
  white-space: nowrap;
}

.bwhg-access__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

/* 会場写真 + 住所 */
.bwhg-access__venue {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 1100px;
  max-width: 100%;
}

.bwhg-access__photo {
  width: 480px;
  height: 320px;
  object-fit: cover;
  flex-shrink: 0;
}

.bwhg-access__venue-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 497px;
  max-width: 100%;
}

.bwhg-access__venue-name {
  font-family: var(--font-jp);
  color: var(--color-white);
}

.bwhg-access__venue-name-main {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
}

.bwhg-access__venue-address {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
}

.bwhg-access__map {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.bwhg-access__map-text {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-gold);
  text-decoration: underline;
  white-space: nowrap;
}

.bwhg-access__map-icon {
  width: 15.05px;
  height: 20px;
  flex-shrink: 0;
}

/* アクセス方法パネル */
.bwhg-access__method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 1100px;
  max-width: 100%;
}

.bwhg-access__panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px 60px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--color-white);
  backdrop-filter: blur(10px);
}

.bwhg-access__panel-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 26px;
  color: var(--color-white);
  text-align: center;
}

.bwhg-access__icons {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.bwhg-access__item {
  width: 230px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.bwhg-access__divider {
  width: 1px;
  height: 175px;
  background-color: var(--color-white);
  flex-shrink: 0;
}

/* 769px〜1120px（タブレット〜狭いPC幅）: 4項目横並びだと幅が足りず崩れる（重なり）ため、
   SPと同じ縦積みレイアウトを流用して崩れを防ぐ */
@media (max-width: 1120px) and (min-width: 769px) {
  /* .bwhg-access__method自体はwidth:1100px; max-width:100%だが、
     max-width:100%は1366px固定の祖先要素基準にしか効かず実ビューポート幅を見ないため、
     var(--bwhg-vw)基準で明示的に縮める（縮んだ分は親のalign-items:centerで自動的に中央寄せ） */
  .bwhg-access__method {
    width: min(1100px, calc(var(--bwhg-vw) - 48px));
  }

  .bwhg-access__icons {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 600px;
    max-width: 100%;
  }

  .bwhg-access__item {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
    gap: 40px;
  }

  .bwhg-access__divider {
    width: 100%;
    height: 1px;
  }
}

/* 2アイコン組み合わせ（車＋シャトルバス／車＋電車／自転車＋バイク） */
.bwhg-access__combo {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}

.bwhg-access__combo--bus,
.bwhg-access__combo--train,
.bwhg-access__combo--bike {
  gap: 40px;
}

.bwhg-access__icon-unit {
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* 単独アイコン（車のみ）の場合も、車+シャトルバスのコンボ幅と同じ幅にしてセンター揃えにする */
.bwhg-access__item > .bwhg-access__icon-unit {
  width: 160px;
  flex-shrink: 0;
}

.bwhg-access__icon-label {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
}

.bwhg-access__icon {
  width: 60px;
  height: 60px;
}

.bwhg-access__icon-bordered {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-gold);
  border-radius: 4.8px;
}

.bwhg-access__icon--train {
  width: 30px;
  height: 41.043px;
}

.bwhg-access__icon--bicycle {
  width: 40px;
  height: 22.311px;
}

.bwhg-access__icon--motorcycle {
  width: 40px;
  height: 25.408px;
}

/* ＋ バッジ（アイコン間の重ね合わせ） */
.bwhg-access__plus {
  position: absolute;
  left: 70px;
  width: 20px;
  height: 20px;
}

.bwhg-access__plus--bus {
  top: 46px;
}

.bwhg-access__plus--train,
.bwhg-access__plus--bike {
  top: 47px;
}

.bwhg-access__plus-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bwhg-access__plus-symbol {
  position: relative;
  display: block;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 13.333px;
  line-height: 20px;
  color: var(--color-dark);
  text-align: center;
}

.bwhg-access__item-text {
  width: 100%;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 15px;
  color: var(--color-white);
  text-align: left;
}

.bwhg-access__item-text strong {
  font-weight: 700;
  color: var(--color-gold);
}

/* 詳細ボタン */
.bwhg-access__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 280px;
  padding: 14px 20px;
  background-color: var(--color-dark);
  border: 1px solid var(--color-gold);
  transition: background-color 0.3s ease-out;
}

.bwhg-access__btn:hover {
  background-color: #222222;
}

.bwhg-access__btn-text {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-white);
  white-space: nowrap;
  transition: color 0.3s ease-out;
}

.bwhg-access__btn:hover .bwhg-access__btn-text {
  color: var(--color-gold);
}

.bwhg-access__btn-icon {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.bwhg-access__btn-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-out;
}

.bwhg-access__btn-icon img:last-child {
  opacity: 0;
}

.bwhg-access__btn:hover .bwhg-access__btn-icon img:first-child {
  opacity: 0;
}

.bwhg-access__btn:hover .bwhg-access__btn-icon img:last-child {
  opacity: 1;
}

@media (max-width: 768px) {
  .bwhg-access {
    padding: 40px 16px;
  }

  .bwhg-access__inner {
    gap: 30px;
    width: 343px;
  }

  .bwhg-access__heading-en {
    font-size: 64px;
  }

  .bwhg-access__heading-jp {
    font-size: 18px;
    letter-spacing: -0.9px;
  }

  .bwhg-access__content {
    gap: 40px;
  }

  .bwhg-access__venue {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    width: 100%;
  }

  .bwhg-access__photo {
    width: 100%;
    height: 228.667px;
  }

  .bwhg-access__venue-info {
    width: 100%;
  }

  .bwhg-access__method {
    gap: 30px;
    width: 100%;
  }

  .bwhg-access__panel {
    gap: 20px;
    padding: 20px 16px 30px;
  }

  .bwhg-access__icons {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 300px;
    max-width: 100%;
  }

  .bwhg-access__item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 70px;
    gap: 10px;
  }

  .bwhg-access__divider {
    width: 100%;
    height: 1px;
  }

  .bwhg-access__combo--bus,
  .bwhg-access__combo--train,
  .bwhg-access__combo--bike {
    gap: 30px;
  }

  .bwhg-access__icon-unit {
    width: 45px;
    gap: 3.75px;
  }

  .bwhg-access__item > .bwhg-access__icon-unit {
    width: 120px;
  }

  .bwhg-access__icon-label {
    font-size: 10.5px;
  }

  .bwhg-access__icon {
    width: 45px;
    height: 45px;
  }

  .bwhg-access__icon--car {
    height: 49px;
  }

  .bwhg-access__icon-bordered {
    width: 45px;
    height: 45px;
    border-width: 1.5px;
    border-radius: 3.6px;
  }

  .bwhg-access__icon--train {
    width: 22.5px;
    height: 30.782px;
  }

  .bwhg-access__icon--bicycle {
    width: 30px;
    height: 16.734px;
  }

  .bwhg-access__icon--motorcycle {
    width: 30px;
    height: 19.056px;
  }

  .bwhg-access__plus {
    left: 52.5px;
    width: 15px;
    height: 15px;
  }

  .bwhg-access__plus--bus {
    top: 34.5px;
  }

  .bwhg-access__plus--train,
  .bwhg-access__plus--bike {
    top: 35.25px;
  }

  .bwhg-access__plus-symbol {
    font-size: 10px;
    line-height: 15px;
  }

  .bwhg-access__item-text {
    width: 150px;
    text-align: left;
  }
}

/* ---------------------------------------------------------------- */
/* sections/next-games.css */
/* ---------------------------------------------------------------- */
/* ==========================================================================
   next-games (NEXT HOME GAMES / 次回以降のホームゲーム情報)
   ========================================================================== */

.bwhg-next-games {
  position: relative;
  padding: 50px 133px;
}

/* ビューポート幅が1366pxを超える場合に左右へ白い余白が出ないよう、
   背景のみをビューポート全幅までブリードさせる（コンテンツ位置はFigma通り1366px基準のまま） */
.bwhg-next-games::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  transform: translateX(-50%);
  background-color: #96804a;
  z-index: -1;
}

.bwhg-next-games__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
  object-fit: cover;
  opacity: 0.1;
}

.bwhg-next-games__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 1100px;
  max-width: 100%;
  margin: 0 auto;
}


.bwhg-next-games__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 72px;
  line-height: 1;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
  /* RCMS埋め込み先の他LP用CSS（h2タグへの背景画像指定）が
     読み込み順によって上書きされてしまうため、明示的にリセットする */
  background: none;
}

.bwhg-next-games__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  padding: 40px 0;
  background-color: var(--color-dark);
}

.bwhg-next-games__matchup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.bwhg-next-games__team-logo--home {
  width: 180px;
  height: 111.236px;
  object-fit: contain;
}

.bwhg-next-games__team-logo--away {
  width: 180px;
  height: 115px;
  object-fit: contain;
}

.bwhg-next-games__vs {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 0.6;
  color: var(--color-gold);
  text-align: center;
  white-space: nowrap;
}

.bwhg-next-games__games {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  width: 100%;
  padding: 20px 50px 16px;
  background-color: rgba(255, 255, 255, 0.1);
  border-top: 1px solid var(--color-white);
  border-bottom: 1px solid var(--color-white);
}

.bwhg-next-games__game {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.bwhg-next-games__date-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
}

.bwhg-next-games__date {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.6;
  color: var(--color-white);
  white-space: nowrap;
}

.bwhg-next-games__date-num {
  font-size: 64px;
}

.bwhg-next-games__date-day {
  font-size: 32px;
  letter-spacing: -1.6px;
}

.bwhg-next-games__time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 38px;
  padding: 2px 20px 0;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}

.bwhg-next-games__time-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 0.6;
  color: var(--color-white);
  white-space: nowrap;
}

.bwhg-next-games__time-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 0.6;
  color: var(--color-white);
  white-space: nowrap;
}

.bwhg-next-games__ticket-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 280px;
  padding: 14px 20px;
  background-color: var(--color-dark);
  border: 1px solid var(--color-gold);
  transition: background-color 0.3s ease-out;
}

.bwhg-next-games__ticket-link:hover {
  background-color: #222222;
}

.bwhg-next-games__ticket-link-text {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-white);
  white-space: nowrap;
  transition: color 0.3s ease-out;
}

.bwhg-next-games__ticket-link:hover .bwhg-next-games__ticket-link-text {
  color: var(--color-gold);
}

.bwhg-next-games__ticket-link-icon {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.bwhg-next-games__ticket-link-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-out;
}

.bwhg-next-games__ticket-link-icon img:last-child {
  opacity: 0;
}

.bwhg-next-games__ticket-link:hover .bwhg-next-games__ticket-link-icon img:first-child {
  opacity: 0;
}

.bwhg-next-games__ticket-link:hover .bwhg-next-games__ticket-link-icon img:last-child {
  opacity: 1;
}

.bwhg-next-games__divider {
  width: 1px;
  height: 130px;
  background-color: var(--color-white);
  flex-shrink: 0;
}

.bwhg-next-games__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 320px;
  max-width: 100%;
  padding: 16px 12px;
  background-color: var(--color-dark);
  transition: opacity 0.3s ease-out;
}

.bwhg-next-games__cta:hover {
  opacity: 0.85;
}

.bwhg-next-games__cta-logo {
  width: 120px;
  height: 46px;
}

.bwhg-next-games__cta-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-white);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .bwhg-next-games {
    padding: 40px 16px;
  }

  .bwhg-next-games__inner {
    width: 343px;
  }

  .bwhg-next-games__title {
    font-size: 40px;
  }

  .bwhg-next-games__panel {
    padding: 20px 0;
  }

  .bwhg-next-games__matchup {
    gap: 25.632px;
  }

  .bwhg-next-games__team-logo--home {
    width: 115.344px;
    height: 71.28px;
  }

  .bwhg-next-games__team-logo--away {
    width: 115.344px;
    height: 73.692px;
  }

  .bwhg-next-games__vs {
    font-size: 25px;
  }

  .bwhg-next-games__games {
    flex-direction: column;
    gap: 20px;
    padding: 20px 0 16px;
  }

  .bwhg-next-games__game {
    width: 300px;
    max-width: 100%;
  }

  .bwhg-next-games__date-row {
    justify-content: space-between;
    width: 100%;
    gap: 0;
  }

  .bwhg-next-games__date-num {
    font-size: 52px;
  }

  .bwhg-next-games__date-day {
    font-size: 26px;
    letter-spacing: -1.3px;
  }

  .bwhg-next-games__time {
    gap: 8px;
    height: 30px;
    padding: 2px 16px 0;
  }

  .bwhg-next-games__time-value {
    font-size: 22px;
  }

  .bwhg-next-games__time-label {
    font-size: 15px;
  }

  .bwhg-next-games__divider {
    width: 300px;
    max-width: 100%;
    height: 1px;
  }
}

/* 769px〜1100pxはgamesの2試合分の横並びが幅に収まらずはみ出るため、
   SPと同じ縦積みレイアウトに変更する */
@media (max-width: 1100px) and (min-width: 769px) {
  .bwhg-next-games__inner {
    width: 343px;
  }

  .bwhg-next-games__games {
    flex-direction: column;
    gap: 20px;
    padding: 20px 0 16px;
  }

  .bwhg-next-games__game {
    width: 300px;
    max-width: 100%;
  }

  .bwhg-next-games__date-row {
    justify-content: space-between;
    width: 100%;
    gap: 0;
  }

  .bwhg-next-games__date-num {
    font-size: 52px;
  }

  .bwhg-next-games__date-day {
    font-size: 26px;
    letter-spacing: -1.3px;
  }

  .bwhg-next-games__time {
    gap: 8px;
    height: 30px;
    padding: 2px 16px 0;
  }

  .bwhg-next-games__time-value {
    font-size: 22px;
  }

  .bwhg-next-games__time-label {
    font-size: 15px;
  }

  .bwhg-next-games__divider {
    width: 300px;
    max-width: 100%;
    height: 1px;
  }
}

/* ---------------------------------------------------------------- */
/* sections/footer-btn.css */
/* ---------------------------------------------------------------- */
/* ==========================================================================
   footer-btn (クラブワンモア / よくある質問 の2大CTAボタン)
   ========================================================================== */

.bwhg-footer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 60px 0;
  background-color: var(--color-white);
}

/* クラブワンモア: ロゴ・背景写真・ブレンド効果・枠線を1枚に書き出した画像を使用 */
.bwhg-footer-btn__club {
  display: block;
  width: 480px;
  flex-shrink: 0;
  transition: opacity 0.3s ease-out;
}

.bwhg-footer-btn__club:hover {
  opacity: 0.85;
}

.bwhg-footer-btn__club-img {
  display: block;
  width: 100%;
  height: auto;
}

/* よくある質問 */
.bwhg-footer-btn__faq {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 480px;
  height: 160px;
  flex-shrink: 0;
  border: 4px solid var(--color-gold);
  background-color: var(--color-dark);
  overflow: hidden;
  transition: opacity 0.3s ease-out;
}

.bwhg-footer-btn__faq:hover {
  opacity: 0.85;
}

.bwhg-footer-btn__faq-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.bwhg-footer-btn__faq-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.bwhg-footer-btn__faq-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 0.6;
  color: var(--color-gold);
  text-align: right;
  white-space: nowrap;
}

.bwhg-footer-btn__faq-icon {
  display: block;
  width: 18px;
  height: 17.999px;
}

@media (max-width: 768px) {
  .bwhg-footer-btn {
    flex-direction: column;
    gap: 16px;
    padding: 30px 0;
  }

  .bwhg-footer-btn__club {
    width: 343px;
  }

  .bwhg-footer-btn__faq {
    width: 343px;
    height: 114px;
    border-width: 2.858px;
  }

  .bwhg-footer-btn__faq-content {
    gap: 7.146px;
  }

  .bwhg-footer-btn__faq-text {
    font-size: 14.292px;
  }

  .bwhg-footer-btn__faq-icon {
    width: 12.862px;
    height: 12.862px;
  }
}

/* 769px〜1100pxは480px×2つ＋gap40px＝1000px必要なため、900px等の狭い幅では
   横並びのまま収まらずはみ出る。SPと同じ縦積みレイアウトに変更する */
@media (max-width: 1100px) and (min-width: 769px) {
  .bwhg-footer-btn {
    flex-direction: column;
    gap: 16px;
    padding: 30px 0;
  }

  .bwhg-footer-btn__club {
    width: 343px;
  }

  .bwhg-footer-btn__faq {
    width: 343px;
    height: 114px;
    border-width: 2.858px;
  }

  .bwhg-footer-btn__faq-content {
    gap: 7.146px;
  }

  .bwhg-footer-btn__faq-text {
    font-size: 14.292px;
  }

  .bwhg-footer-btn__faq-icon {
    width: 12.862px;
    height: 12.862px;
  }
}

/* ---------------------------------------------------------------- */
/* sections/footer.css */
/* ---------------------------------------------------------------- */
/* ==========================================================================
   footer
   ========================================================================== */

.bwhg-footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* RCMS埋め込み先の他LP用CSS（footerタグへの背景色・paddingの指定）が
     読み込み順によって上書きされてしまうため、明示的にリセットする */
  padding: 0;
  background: none;
}

/* ---------- SNSall ---------- */

.bwhg-footer__sns {
  position: relative;
  width: 100%;
  padding: 30px 0;
}

/* ビューポート幅が1366pxを超える場合に左右へ白い余白が出ないよう、
   背景のみをビューポート全幅までブリードさせる（コンテンツ位置はFigma通り1366px基準のまま） */
.bwhg-footer__sns::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  transform: translateX(-50%);
  background-color: var(--color-dark);
  z-index: -1;
}

.bwhg-footer__sns-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.bwhg-footer__sns-link {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
}

.bwhg-footer__sns-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: filter 0.3s ease-out;
}

/* Figmaでは背景の丸部分だけがゴールドから少し暗いゴールドに変化する仕様だが、
   背景とロゴが1枚のSVGに一体化している画像もあるため、CSS filterで近似する */
.bwhg-footer__sns-link:hover .bwhg-footer__sns-icon {
  filter: brightness(0.75);
}

.bwhg-footer__sns-glyph {
  position: absolute;
}

.bwhg-footer__sns-glyph--x {
  left: 11px;
  top: 11px;
  width: 22px;
  height: 22.4835px;
}

.bwhg-footer__sns-glyph--youtube-outer {
  left: 9px;
  top: 13.4px;
  width: 26px;
  height: 18.2px;
}

.bwhg-footer__sns-glyph--youtube-inner {
  left: 19.4px;
  top: 18.6px;
  width: 6.755px;
  height: 7.8px;
}

/* ---------- リンク集 ---------- */

.bwhg-footer__links {
  position: relative;
  width: 100%;
  padding: 30px 0;
}

/* ビューポート幅が1366pxを超える場合に左右へ白い余白が出ないよう、
   背景・上下ボーダーをビューポート全幅までブリードさせる（コンテンツ位置はFigma通り1366px基準のまま） */
.bwhg-footer__links::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  transform: translateX(-50%);
  background-color: var(--color-dark);
  border-top: 1px solid var(--color-gold);
  border-bottom: 1px solid var(--color-gold);
  z-index: -1;
}

.bwhg-footer__links-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: var(--bwhg-vw);
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
  object-fit: cover;
}

.bwhg-footer__links-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.bwhg-footer__logo {
  width: 300px;
  height: auto;
}

.bwhg-footer__nav-list {
  display: flex;
  align-items: center;
  border-left: 1px solid var(--color-gold);
}

.bwhg-footer__nav-item {
  width: 200px;
  height: 21px;
  border-right: 1px solid var(--color-gold);
}

.bwhg-footer__nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
  transition: color 0.3s ease-out;
}

.bwhg-footer__nav-link:hover {
  color: var(--color-gold);
}

/* ---------- フッター住所など情報 ---------- */

.bwhg-footer__info {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  padding: 20px 30px;
}

/* ビューポート幅が1366pxを超える場合に左右へ白い余白が出ないよう、
   背景・上ボーダーをビューポート全幅までブリードさせる（コンテンツ位置はFigma通り1366px基準のまま） */
.bwhg-footer__info::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bwhg-vw);
  transform: translateX(-50%);
  background-color: var(--color-dark);
  border-top: 1px solid var(--color-gold);
  z-index: -1;
}

.bwhg-footer__address {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 700px;
  font-style: normal;
  /* RCMS埋め込み先の他LP用CSS（addressタグへのtext-align指定）が
     混入するのを防ぐため、明示的にリセットする */
  text-align: left;
}

.bwhg-footer__company {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-white);
  /* RCMS埋め込み先の他LP用CSS（pタグへのtext-align指定）が
     混入するのを防ぐため、明示的にリセットする */
  text-align: left;
}

.bwhg-footer__contact {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-white);
  /* RCMS埋め込み先の他LP用CSS（pタグへのtext-align指定）が
     混入するのを防ぐため、明示的にリセットする */
  text-align: left;
}

.bwhg-footer__contact-link {
  color: var(--color-gold);
  text-decoration: underline;
}

.bwhg-footer__contact-break {
  display: none;
}

.bwhg-footer__copyright {
  padding: 10px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 10px;
  line-height: 1;
  color: #666666;
  text-align: right;
  white-space: nowrap;
}

/* ==========================================================================
   Responsive (SP, 375px基準)
   ========================================================================== */

@media (max-width: 768px) {
  .bwhg-footer__sns-list {
    gap: 20px;
  }

  .bwhg-footer__links {
    padding: 40px 0;
  }

  .bwhg-footer__logo {
    width: 220px;
  }

  .bwhg-footer__nav-list {
    flex-direction: column;
    align-items: center;
    border-left: none;
    border-top: 1px solid var(--color-gold);
  }

  .bwhg-footer__nav-item {
    width: 200px;
    height: auto;
    padding: 10px 0;
    border-right: none;
    border-bottom: 1px solid var(--color-gold);
  }

  .bwhg-footer__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    /* 下部固定の.bwhg-fixed-bar（高さ64px）に隠れて最後まで見えなくなるため、
       その分だけ下側の余白を広げる */
    padding: 20px 30px calc(64px + 20px);
  }

  .bwhg-footer__address {
    gap: 30px;
    width: 100%;
    max-width: 294px;
  }

  .bwhg-footer__contact-break {
    display: block;
  }

  .bwhg-footer__copyright {
    width: 100%;
    padding: 0;
    text-align: left;
  }
}

/* 769px〜1306pxはbwhg-site自体が1366px固定幅のまま（背景のみを実ビューポート外へ
   クロップする方式）のため、bwhg-footer__infoのjustify-content:space-betweenが
   アドレスとコピーライトを実ビューポート外の左右端へ押し出し、見切れてしまう
   （実測で幅700pxのアドレスは1306px未満から左端が、コピーライトは同じ点から
   右端がそれぞれ画面外へ出始めるため、1306pxをしきい値とする）。
   SPと同じ縦積みレイアウトを流用しつつ、bwhg-footer__info自体もvar(--bwhg-vw)基準の
   幅に縮めてmargin:0 autoで中央寄せし直す（bwhg-access-summaryと同じ対応） */
@media (max-width: 1306px) and (min-width: 769px) {
  .bwhg-footer__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: min(700px, calc(var(--bwhg-vw) - 48px));
    margin: 0 auto;
  }

  .bwhg-footer__address {
    gap: 30px;
    width: 100%;
    max-width: 294px;
  }

  .bwhg-footer__copyright {
    width: 100%;
    padding: 0;
    text-align: left;
  }

  /* bwhg-footer__info自体をvar(--bwhg-vw)基準の狭い幅へ縮めたため、
     ファイル末尾の共通ブリード処理（left:0;right:0;で"元のコンテナ幅"へ広げる方式。
     bwhg-footer__infoの幅がビューポート幅と一致している前提だった）のままだと
     背景がこの狭い幅に合わせて縮み、左右に地の色（白）が見えてしまう。
     この範囲だけ、1366px超の場合と同じ「ビューポート全幅を基準に中央寄せ」方式に戻す
     （ファイル末尾の共通ブリード処理の対象からはbwhg-footer__info::beforeを除外済み） */
  .bwhg-footer__info::before {
    left: 50%;
    right: auto;
    width: var(--bwhg-vw);
    max-width: none;
    transform: translateX(-50%);
  }
}

/* 1307px〜1365pxはbwhg-footer__infoが従来通りビューポート幅いっぱい（1366px基準の
   クロップされた箱と同じ幅）のままのため、ファイル末尾の共通ブリード処理と同じ
   left:0;right:0;方式をそのまま適用する（除外した分をここで明示的に復元する） */
@media (max-width: 1365px) and (min-width: 1307px) {
  .bwhg-footer__info::before {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    transform: none;
  }
}

/* 769px〜1120pxもSPと同じ.bwhg-fixed-barを表示するため、
   その分だけ下側の余白を広げる（768px以下と同じ対応） */
@media (max-width: 1120px) and (min-width: 769px) {
  .bwhg-footer__info {
    padding-bottom: calc(64px + 20px);
  }
}

/* ---------------------------------------------------------------- */
/* sections/popup.css */
/* ---------------------------------------------------------------- */
/* ==========================================================================
   popup - お知らせポップアップ（PC: node 232:5451 / SP: node 265:2628）
   ========================================================================== */

/* オーバーレイ。初期状態は非表示、.bwhg-is-open が付いたときのみ表示する */
.bwhg-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(15, 15, 19, 0.7);
}

.bwhg-popup.bwhg-is-open {
  display: flex;
}

/* 閉じるボタン: オーバーレイ（ビューポート）右上に固定配置 */
.bwhg-popup__close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bwhg-popup__close-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bwhg-popup__close-icon {
  position: absolute;
  inset: 0;
}

.bwhg-popup__close-icon::before,
.bwhg-popup__close-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background-color: var(--color-white);
}

.bwhg-popup__close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.bwhg-popup__close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* モーダルパネル */
.bwhg-popup__panel {
  position: relative;
  width: 1000px;
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 50px;
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
}

.bwhg-popup__title {
  margin: 0 0 40px;
  padding: 0 10px 4px;
  border-bottom: 1px solid var(--color-dark);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.5;
  color: var(--color-dark);
  /* RCMS埋め込み先の他LP用CSS（h2タグへの背景画像指定）が
     読み込み順によって上書きされてしまうため、明示的にリセットする */
  background: none;
}

/* PC: 写真（固定）とテキスト（縦スクロール）を横並びにする */
.bwhg-popup__scroll {
  display: flex;
  flex-direction: row;
  gap: 40px;
  margin-bottom: 55px;
}

.bwhg-popup__media {
  flex-shrink: 0;
  width: 400px;
  height: 266.667px;
  overflow: hidden;
}

.bwhg-popup__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bwhg-popup__text-inner {
  box-sizing: border-box;
  width: 460px;
  height: 340px;
  overflow-y: auto;
  padding-right: 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-dark) #CCCCCC;
}

.bwhg-popup__text-inner::-webkit-scrollbar {
  width: 12px;
}

.bwhg-popup__text-inner::-webkit-scrollbar-track {
  background-color: #CCCCCC;
  border-radius: 3px;
}

.bwhg-popup__text-inner::-webkit-scrollbar-thumb {
  background-color: var(--color-dark);
  border-radius: 3px;
}

.bwhg-popup__text {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-dark);
}

.bwhg-popup__action {
  display: flex;
  justify-content: center;
}

.bwhg-popup__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 280px;
  padding: 14px 20px;
  box-sizing: border-box;
  background-color: var(--color-dark);
  border: 1px solid var(--color-gold);
}

.bwhg-popup__button-label {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-white);
}

.bwhg-popup__button-icon {
  width: 12px;
  height: 12px;
}

/* ==========================================================================
   SP (max-width: 768px) - node 265:2628 実測値（375px基準）
   ========================================================================== */
@media (max-width: 768px) {
  .bwhg-popup__close {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
  }

  .bwhg-popup__close-icon::before,
  .bwhg-popup__close-icon::after {
    width: 16px;
    height: 1.6px;
  }

  .bwhg-popup__panel {
    width: 343px;
    max-height: calc(100vh - 32px);
    padding: 22px;
    align-items: center;
  }

  .bwhg-popup__title {
    width: 100%;
    max-width: 300px;
    margin-bottom: 16px;
    padding: 0 0 4px 5px;
    font-size: 22px;
  }

  /* SP: 写真とテキストをまとめて縦スクロールさせる */
  .bwhg-popup__scroll {
    flex-direction: column;
    gap: 10px;
    width: 300px;
    max-height: 422px;
    overflow-y: auto;
    padding-right: 24px;
    box-sizing: border-box;
    margin-bottom: 30px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-dark) #CCCCCC;
  }

  .bwhg-popup__scroll::-webkit-scrollbar {
    width: 12px;
  }

  .bwhg-popup__scroll::-webkit-scrollbar-track {
    background-color: #CCCCCC;
    border-radius: 3px;
  }

  .bwhg-popup__scroll::-webkit-scrollbar-thumb {
    background-color: var(--color-dark);
    border-radius: 3px;
  }

  .bwhg-popup__media {
    width: 100%;
    height: 176px;
  }

  .bwhg-popup__text-inner {
    width: 100%;
    /* 本文が長い場合にボタンが画面下にはみ出さないよう、内部スクロールで天地を抑える */
    max-height: 300px;
    overflow-y: auto;
    padding-right: 0;
  }

  .bwhg-popup__text {
    font-size: 15px;
  }

  .bwhg-popup__action {
    width: 100%;
  }
}

/* 769px〜1365pxでは.bwhg-site自体が1366px幅のまま中央寄せされビューポート外へ
   はみ出す（script.js syncSiteWidth参照。schedule等の中央分割コンテンツの
   仕切り線がずれる不具合を避けるため、この範囲では左寄せにせず中央寄せのまま
   維持する設計のため）。main・footer（ともに.bwhg-siteの直接の子で、
   width:100%のまま縮んでいない）配下の各セクションのラッパーボックス自体も
   同じ分だけビューポート幅を超えて存在してしまい、実機（iPad Safari等）の
   横スワイプでその余白が露出し、レイアウトが崩れて見える不具合の原因になっていた。
   main・footerをビューポート実幅（var(--bwhg-vw)）へ縮めて中央に配置し直すことで、
   .bwhg-site自身のはみ出しは見た目に影響しない透明な余白として残しつつ、
   実際に表示されるコンテンツ側は必ずビューポート内へ収まるようにする
   （bwhg-hero等の中央寄せブリード指定は包含ブロックの中心がビューポート中心と
   一致してさえいれば幅に依存せず正しく機能するため変更不要。各セクション内部の
   コンテンツ幅も既存の769〜1100pxレスポンシブ対応で個別に調整済みのため
   影響しない）。.bwhg-footerは他の多くのコンポーネント同様width:100%の
   ベース指定が後方（本ファイル下部）にあるため、同じ詳細度で確実に上書きできるよう
   このブロックをその後方に配置している */
@media (max-width: 1365px) and (min-width: 769px) {
  :where(.bwhg-site) main,
  .bwhg-footer {
    width: var(--bwhg-vw);
    margin-left: calc(50% - (var(--bwhg-vw) / 2));
  }

  /* main・footerを実ビューポート幅へ縮めても、.bwhg-site自身は1366px幅の
     まま中央寄せではみ出しているため、document.documentElement.scrollWidthは
     この透明な余白分だけ依然clientWidthを超えてしまう。この範囲では
     main・footer配下に実際に表示される内容はすべてビューポート内へ収まる
     よう調整済みのため、.bwhg-site自身のはみ出しをここで隠しても表示上の
     欠けは発生しない（1366px以上ではbwhg-hero等が.bwhg-siteの外側へ正規に
     ブリードするため、この範囲に限定してoverflow-xを指定する） */
  .bwhg-site {
    overflow-x: hidden;
  }
}

/* ==========================================================================
   [無効化済み] 769px〜1365px背景ブリード補正（廃止）
   ========================================================================== */
/* このブロックは「769px〜1365pxで.bwhg-siteがビューポート左端に接する
   （左寄せになる）」という古い前提に基づいていたが、script.jsのsyncSiteWidthは
   現在この範囲でも常に.bwhg-siteを中央寄せしており、その前提はすでに成立していない。
   古い前提のままこのブロックが生きていたため、bwhg-hero等の
   var(--bwhg-vw)ベースの正しいブリード指定を「元のコンテナ幅（1366px基準）」へ
   誤って引き戻してしまい、hero画像の焼き込みテキストが見切れる等の不具合の
   原因になっていた。実害が確認できなかったため削除はせず、
   @media (max-width: 1px) として無効化のみしてある
   （比較用に残置。将来的に問題なければ完全に削除してよい） */
@media (max-width: 1px) and (min-width: 769px) {
  /* div／疑似要素は width:auto が「左右いっぱいに広がる」挙動になるため、
     left:0; right:0; width:auto; で元のコンテナ幅に戻す */
  .bwhg-header::before,
  .bwhg-menu-section__gold-bottom,
  .bwhg-event-info::before,
  .bwhg-access-summary__bg-base,
  .bwhg-time-schedule::before,
  .bwhg-gourmet::before,
  .bwhg-arena-map::before,
  .bwhg-arena-map__bg-overlay,
  .bwhg-team::before,
  .bwhg-goods::before,
  .bwhg-access__bg-base,
  .bwhg-next-games::before,
  .bwhg-footer__sns::before,
  .bwhg-footer__links::before,
  .bwhg-schedule__card::before {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    transform: none;
  }

  /* imgタグ（置換要素）はleft/right指定時にwidth:autoが本来の画像比率を優先してしまい
     コンテナいっぱいに広がらないため、widthを明示的に100%指定する */
  .bwhg-menu-section__texture-top,
  .bwhg-event-info__texture,
  .bwhg-access-summary__bg,
  .bwhg-time-schedule__bg,
  .bwhg-arena-map__bg,
  .bwhg-goods__bg-texture,
  .bwhg-access__bg,
  .bwhg-next-games__bg,
  .bwhg-footer__links-bg,
  .bwhg-schedule__bg {
    left: 0;
    right: auto;
    width: 100%;
    max-width: none;
    transform: none;
  }

  .bwhg-hero {
    width: 100%;
    margin-left: 0;
  }
}