@charset "UTF-8";
/* /files/user/2026-27/gamelp/ */

/* ---------------------------------------------------------
   1. Design Tokens
   --------------------------------------------------------- */
:root{
  /* --- color（要デザイナー確認：カンプJPGからのサンプリング値） --- */
  --c-red:        #c80019;   /* ブランドレッド。カード帯・ボタン・見出し */
  --c-red-bright: #C6000D;   /* グラデーションの明部 */
  --c-red-mid:    #A80003;
  --c-red-deep:   #6E0000;   /* グラデーションの暗部 */
  --c-red-burn:   #630000;   /* 赤×黒の乗算結果を実測した色。ハンバーガーの枠線に使う */
  --c-black:      #000000;
  --c-white:      #FFFFFF;
  --c-gray:       #646464;
  --c-line:       #333333;

  /* 赤背景セクションのグラデーション（中心が明るい放射状） */
  --grad-red: radial-gradient(120% 90% at 45% 55%,
              var(--c-red-bright) 0%, var(--c-red-mid) 45%, var(--c-red-deep) 100%);


  /* --- typography --- */
  --f-en: "Poppins", sans-serif !important;                 /* 欧文・数字 */
  --f-ja: "Kosugi", "Hiragino Sans", "Yu Gothic", sans-serif !important; /* 和文 */
  --fs-base: max(0.9375rem, var(--fs-min));   /* 実効12px下限は --fs-min（7-1参照） */
  --lh-base: 1.8;
  --ls-base: .06em;

  /* --- layout --- */
  --inner: 76.25rem;         /* カンプ実測 x=350～1570 */
  --inner-narrow: 71.25rem;  /* アコーディオン等 */
  --gutter: 1.25rem;
  --card-gap: 2.5rem;
  --card-w:   23.75rem;   /* カード1枚の幅（1220px枠・3列・gap40px）。2枚以下のとき中央寄せに使う */
  --sec-pt: 5rem;         /* セクション上下余白（PC） */
  --sec-pb: 6.25rem;
  --header-h: 5.625rem;
  --radius-pill: 62.4375rem;

  --ease: cubic-bezier(.22,.61,.36,1);

  /* --- ハンバーガー／ドロワーの共有寸法 ---
     ★ .p-drawer は .p-header__toggle の子孫ではないので、この5つは必ず :root に置く。
       ボタン側にだけ書くとドロワーが値を引けず、SPで位置とサイズがずれる。 */
  --toggle-size:   5rem;        /* 80px */
  --toggle-top:    3.125rem;    /* 50px */
  --toggle-right:  3.125rem;    /* 50px */
  --toggle-border: 0.3125rem;   /* 枠線 5px */
  --toggle-radius: 1.0625rem;   /* 角丸 17px（左上・右下のみ） */

  /* --- ドロワー（展開メニュー）--- カンプ実測 phx2627_lp_home game_sozai_0828.pdf p.1
     パネル 1820×705 / 角丸25px / 枠5px / 地 rgba(0,0,0,.9)
     MENU はパネル上端から135px、項目は Kosugi 20px・5列4行・行ピッチ107px・列間108px */
  --drawer-maxw:    113.75rem;   /* 1820px */
  --drawer-radius:  1.5625rem;   /* 25px */
  --drawer-row:     6.6875rem;   /* 107px：項目1行の高さ */
  --drawer-col-gap: 6.75rem;     /* 108px */
  --drawer-dur:     .45s;        /* 箱の展開／収縮 */
  --drawer-fade:    .25s;        /* MENU・項目のフェード */
  --drawer-lag:     .28s;        /* 展開が終わりかけてから中身を出す */
  --drawer-stagger: .03s;        /* 項目を1つずつずらす量 */
  --lock-shift:     0px;         /* スクロールロックで消えるスクロールバーぶん */

  /* --- モーダル --- */
  --modal-mx: 10;                /* 左右余白 10vw */
  --modal-my: 10;                /* 上下余白 10vh */
  --modal-vw: 1vw;               /* dvw が使えれば下の @supports で差し替わる */
  --modal-vh: 1vh;
  --modal-maxw: 118.75rem;       /* 1900px */
  --modal-expand:  .24s;
  --modal-fade:    .2s;
  --modal-stagger: .09s;
  --modal-lag:     .05s;
}
/* dvw/dvh はカスタムプロパティの二重指定では単位フォールバックが効かないので
   @supports で切り替える */
@supports (width:1dvw){
  :root{ --modal-vw:1dvw; --modal-vh:1dvh; }
}

/* ---------------------------------------------------------
   2. Base
   --------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--c-black);
  color:var(--c-white);
  font-family:var(--f-ja);
  font-size:var(--fs-base);
  font-weight: 500;
  line-height:var(--lh-base);
  letter-spacing:var(--ls-base);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
/* body をロックするとスクロールバーが消えてビューポートが広がり、right 指定の
   固定要素（ハンバーガー／ドロワー）が右にずれる。その幅ぶんを戻す。
   --sbw は js/script.js が :root に入れる。 */
body.is-menuopen{ --lock-shift:var(--sbw, 0px); }
img,svg,video{ max-width:100%; height:auto; vertical-align:middle; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,dl,dd{ margin:0; font-weight: 500;}
.p-header h1{height: 0;}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:0.125rem solid var(--c-white); outline-offset:0.1875rem; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important;
     transition-delay:0s !important; animation-delay:0s !important; }
}

/* ---------------------------------------------------------
   3. Layout utilities
   --------------------------------------------------------- */
.l-inner{ width:min(100% - var(--gutter)*2, var(--inner)); margin-inline:auto; position: relative; z-index: 10;}
/* ★ z-index が付いた .l-inner は「合成コンテキスト」を作るので、中の
   mix-blend-mode は背後のセクション背景と合成されなくなる（乗算が死ぬ）。
   クイックナビの赤枠は乗算が要るので、イラストを持たない #intro だけ
   z-index を外して合成コンテキストを作らせない（position:relative のままでよい）。 */
#intro .l-inner{ z-index:auto; }
.l-inner--narrow{ width:min(100% - var(--gutter)*2, var(--inner-narrow)); margin-inline:auto; }

.l-section{ position:relative; padding:var(--sec-pt) 0 var(--sec-pb); }
.u-bg-black{ background:var(--c-black); color:var(--c-white); }
.u-bg-white{ background:var(--c-white); color:var(--c-black); }
.u-bg-red-img{
  background: url(/v=1788323491/files/user/2026-27/gamelp/bk-red.svg) no-repeat;
  background-size: cover;
  background-position: center;
}
#intro.u-bg-red-img{
  background-position: bottom center;
}
.u-center{ text-align:center; }
.u-sr-only{
  position:absolute; width:0.0625rem; height:0.0625rem; padding:0; margin:-0.0625rem;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* ---------------------------------------------------------
   4. Components
   --------------------------------------------------------- */

/* 4-1. セクション見出し（英題SVG＋和文サブ） */
.c-secttl{ display:flex; flex-direction:column; align-items:center; gap:0.375rem; margin-bottom:5.3125rem; }
#partner .c-secttl{margin-bottom: 0;}
#benefits .c-secttl,#event .c-secttl,#booth .c-secttl,
#service .c-secttl,#goods .c-secttl,#gourmet .c-secttl,
#ticket .c-secttl,#next-game .c-secttl{margin-bottom: 3.125rem;}
.c-secttl__en{ display:block; }
.c-secttl__en img{ height:1.625rem; width:auto; }
.c-secttl__ja{ font-size:max(0.9375rem, var(--fs-min)); color:currentColor; font-weight:500; }

/* 4-2. カード（画像＋テキスト帯） */
.c-card{
  position:relative;                       /* .c-card__more（全面ボタン）の位置基準 */
  display:flex; flex-direction:column; height:100%;
  border:0.1875rem solid var(--c-red);
}
/* 赤背景セクションのカードは枠線も黒。
   ただし赤いラッパー（.bigsize）の中に黒/白のセクションが入れ子になっているので、
   より内側の背景クラスで赤に戻す（CSSは近さでは決まらないので、この順で書くこと）。 */
.u-bg-red-img .c-card{ border-color:var(--c-black); }
.u-bg-black .c-card,
.u-bg-white .c-card{ border-color:var(--c-red); }
.c-card__img{ aspect-ratio:16/9; overflow:hidden; }
.c-card__img img{ width:100%; height:100%; object-fit:cover; }
.c-card__body{ flex:1; padding:1.25rem 0.375rem; letter-spacing: 0.04em;}
.c-card__title{ font-size:1.25rem; text-align:center; margin-bottom:0.75rem; }
.c-card__text{text-align: left; }
/* ★ グリッドのトラックは minmax(0,1fr)、カード内テキストは overflow-wrap:anywhere。
   grid の 1fr は minmax(auto,1fr)＝最小値がカードの min-content なので、
   RCMS本文に折り返せない長い連続文字（URL・英数字・ 連結）が入ると
   トラックがその幅まで広がり、SPでカードが画面からはみ出す。 */
.c-card{ min-width:0; }
.c-card__title,.c-card__text{ overflow-wrap:anywhere; }
.c-card__text img{ max-width:100%; height:auto; }
/* 本文帯の地色バリエーション */
.c-card--red   .c-card__body{ background:var(--c-red);   color:var(--c-white); }
.c-card--black .c-card__body{ background:var(--c-black);  color:var(--c-white); }

/* ---- カードの行数クランプ（タイトル2行／本文5行・全文はモーダル） ----
   ★ 高さは「常に確保」。内容が短くてもカードの高さと帯の位置が揃う。
   ★ タイトルはプレーンテキストなので -webkit-line-clamp で行末に「…」が出せる。
   ★ 本文は拡張項目のHTMLで、table・div・img など何が来るか不定。
     -webkit-line-clamp は行ボックスを数える仕組みなので、table が1つでも
     入ると行数を数えられず素通しになる（Chromiumで実測。Safariはさらに弱い）。
     そこで本文は「N行ぶんの高さで切る＋帯の地色のグラデーションを重ねる」方式。
     はみ出しているカードだけ js/script.js が .is-clipped を付ける。
   ★ 行送りは --card-ttl-lh / --card-txt-lh に集約。SPはこの2つだけ差し替える。 */
.c-card{
  --card-ttl-lines: 2;
  --card-txt-lines: 5;
  --card-ttl-lh: calc(1.25rem * 1.8);          /* PC: 20px × --lh-base */
  --card-txt-lh: calc(var(--fs-base) * 1.8);   /* PC: 15px × --lh-base */
  --card-bg:  var(--c-white);                  /* グラデーションの到達色＝帯の地色 */
  --card-bg0: rgba(255,255,255,0);             /* 同色の透明。Safari旧版のグレー転びを避けるため transparent は使わない */
}
.c-card--red { --card-bg:var(--c-red);   --card-bg0:rgba(200,0,25,0); }
.c-card--black{ --card-bg:var(--c-black); --card-bg0:rgba(0,0,0,0); }

.c-card__title{
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--card-ttl-lines); line-clamp:var(--card-ttl-lines);
  overflow:hidden;
  line-height:var(--card-ttl-lh);
  height:calc(var(--card-ttl-lh) * var(--card-ttl-lines));
}
.c-card__text{
  position:relative;
  line-height:var(--card-txt-lh);
  height:calc(var(--card-txt-lh) * var(--card-txt-lines));
  overflow:hidden;
}
/* 入稿HTMLの余白で行位置がずれると4行ぴったりにならないので、カード内だけ潰す。
   モーダル側（.c-modaldtl__txt）には効かないので全文表示の見た目は変わらない。 */
.c-card__text > :first-child{ margin-top:0; }
.c-card__text > :last-child{ margin-bottom:0; }
.c-card__text p{ margin:0; }
.c-card__text.is-clipped::after{
  content:"…";
  position:absolute; left:0; right:0; bottom:0;
  height:var(--card-txt-lh);
  display:flex; align-items:flex-end; justify-content:flex-end;
  background:linear-gradient(to bottom, var(--card-bg0) 0%, var(--card-bg) 100%);
  pointer-events:none;
}
/* js/modal.js が各カードの末尾に差し込む「カード全面を覆う透明ボタン」。
   スタイルを当てないと素の button がフロー内に積まれ、本文帯の下に数pxの隙間ができる。 */
.c-card__more{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; padding:0;
}

/* 4-3. ボタン */
.c-btn{ display:inline-flex; align-items:center; justify-content:center; }
.c-btn--ticket{
  min-width:9.375rem; padding:0.5rem 1.625rem; border-radius:var(--radius-pill);
  background:var(--c-red); color:var(--c-white); font-size:1.5rem;
  transition:opacity .3s var(--ease);
}
.c-btn--ticket:hover{ opacity:.8; }
.c-btn--readmore img{ width:11.4375rem; }
.c-btn--website img{ width:8.1875rem; }
.c-btn--seemore img{ width:4.75rem; }

/* 4-5. アコーディオン */
.c-acc{
  --acc-dur:   .35s;   /* 本文の開閉時間（.c-acc__body と揃える） */
  --acc-delay: .38s;   /* 畳み終わってからヘッダーの角を戻すまでの待ち */
  margin-bottom:3.125rem; position:relative; z-index:1;
}
section .c-acc:last-child{
  margin-bottom: 0;
}
.c-acc__head{
  display:flex; align-items:center; gap:1.25rem; width:100%;
  padding:0.625rem 2.5rem;
  border-radius: 1.5625rem 0 1.5625rem 0;
  border: 0.1875rem solid var(--c-black);
  background:var(--c-red); color:var(--c-white); text-align:left;
  font-size: 1.875rem;
}
.c-acc__label{ flex:1; }
.c-acc__mark{ position:relative; width:1.875rem; height:1.875rem; flex:none; }
.c-acc__mark::before,.c-acc__mark::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:0.125rem;
  background:currentColor; transition:transform .3s var(--ease);
}
.c-acc__mark::after{ transform:rotate(90deg); }
.c-acc.is-open .c-acc__mark::after{ transform:rotate(0); }
.c-acc__body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--acc-dur) var(--ease); }
.c-acc.is-open .c-acc__body{ grid-template-rows:1fr; }
.c-acc__inner{ overflow:hidden; }
/* 地色・枠線・角丸は必ず内側（.c-acc__content）に持たせる。
   overflow:hidden の .c-acc__inner 側に置くと、畳み切っても上下枠ぶんの数pxが残る。 */
.c-acc__content{
  padding:4.5rem 5.625rem 3.75rem;   /* カンプ実測 72 / 90 / 60px */
  background:var(--c-red);
  color:var(--c-white);          /* .u-bg-white セクションの黒文字を打ち消す */
  border:0.1875rem solid var(--c-black);
  border-top:0;                  /* 上はヘッダーの下枠と重なるので描かない */
  border-radius:0 0 1.5625rem 0;
}
/* 開いている間はヘッダーと本文を赤い1枚の面に見せる。
   閉じる時は本文が畳み終わってから角丸と下枠を戻す（先に戻すと角が本文の上に出てガタつく）。 */
.c-acc__head{
  transition:border-radius 0s linear var(--acc-delay),
             border-bottom-color 0s linear var(--acc-delay);
}
.c-acc.is-open .c-acc__head{
  border-bottom-color:transparent;
  border-radius:1.5625rem 0 0 0;
  transition-delay:0s;
}
/* ★ ヘッダーと本文の継ぎ目に出る1pxのヘアライン対策（2026-09-03 実機で報告）。
   ヘッダー下端と本文上端は論理上ぴったり接しているが、rem が端数（SPは 1rem≒15.4px）
   なので境界が小数位置になり、ラスタライズで下地（TIME TABLEは白セクション）が
   1px だけ透けることがある。1px 重ねて潰す。
   ヘッダーの下枠は開いている間 transparent ＝ヘッダー自身の赤地が見えるので、
   重ねても見た目は変わらない。閉じている時は本文の高さが0なので影響なし。 */
.c-acc__body{ margin-top:-1px; }

/* 4-5b. TIME TABLE（アコーディオン展開時）
   カンプ実測（sozai_0828.pdf p.2／1920px＝等倍）
     時刻   … パネル左端から 90.96px（＝本文パディング90pxの位置）
     罫線・内容 … パネル左端から 200px（＝本文左から110px）／罫線は3px黒で右端まで
     行ピッチ 117.3px（罫線→内容 34px／内容の行送り52.8px）
     時刻は罫線の高さに中心が来るよう上へずらす（レイアウトには影響させない）
   ★ 本文の文字色は白。TIME TABLE は .u-bg-white セクションなので
     .c-acc__content 側の color:#fff で打ち消している。 */
.p-timetable{ font-size:1.875rem; line-height:1; letter-spacing:0; }
.p-timetable__row{
  display:grid;
  /* 時刻カラムは 97px + 13px の間隔 = 罫線が110pxの位置から始まる。
     「試合終了後」「half time」のように長い時刻ラベルの行は、カンプでも
     罫線の開始位置が右にずれている（実測 163px）。max-content で自動追従させる。 */
  grid-template-columns:minmax(6.0625rem, max-content) 1fr;
  column-gap:0.8125rem;
}
.p-timetable__row dt{
  grid-column:1; grid-row:1;
  position:relative; top:-0.895rem;     /* 罫線に中心を合わせる（-14.3px） */
  font-family:var(--f-en); white-space:nowrap;
}
.p-timetable__row dd{ grid-column:2; line-height: 1.57em;}
.p-timetable__row dd:first-of-type{
  border-top:0.1875rem solid var(--c-black);
  padding-top:1.9375rem;                /* 31px */
}
.p-timetable__row dd + dd{ margin-top:1.4375rem; }   /* 行送り52.8px */
.p-timetable__row dd:last-of-type{ padding-bottom:3.3125rem; }  /* 53px */

/* 4-5c. TICKET 価格表（アコーディオン展開時）
   価格表は 920×1538（豊橋）/ 920×1399（浜松）のベクター。中央配置。 */
.c-acc__content--price{ padding:4.5rem 5.625rem 5.6875rem; }   /* 72 / 90 / 91px */
.p-price{ margin:0; text-align:center; }
.p-price img{ width:min(100%, 57.5rem); height:auto; }          /* 920px */

/* 4-6. 日程ブロック（GAME INFO / TEAM30 / STREAMING 共通） */
.c-games{ display:grid; grid-template-columns:1fr 0.0625rem 1fr; align-items:start; }
/* 1試合しかないときは仕切りを消して1カラムにする（＝画面に対して中央に来る） */
.c-games:not(:has(.c-game ~ .c-game)){ grid-template-columns:minmax(0,1fr); }
.c-games:not(:has(.c-game ~ .c-game)) .c-games__sep{ display:none; }
.c-games__sep{ background:var(--c-black); align-self:stretch; width: 0.1875rem;}
.u-bg-black .c-games__sep{
  background-color: var(--c-red);
}
.c-games .c-game__times{
  border: none;
}
.c-games .c-game__times__wrap{
  width: 100%;
  max-width: 18.75rem;
  margin: 0 auto;
  margin-bottom: 2.1875rem;
}
.c-games .c-game__times__wrap::before,.c-games .c-game__times__wrap::after{
  content: "";
  width: 100%;
  height: 0.1875rem;
  background-color: var(--c-red);
  display: block;
}
.c-game{ display:flex; flex-direction:column; align-items:center; gap:1rem; padding:0 2.5rem; }
.c-game__presents div{aspect-ratio: 2 / 1;}
.c-game__presents img{ width:18.75rem; aspect-ratio:2 / 1; background-color:var(--c-white); object-fit:contain; object-position:center; border:0.125rem solid var(--c-gray); }
.c-game__presents span{ display:block; font-family:var(--f-en); font-size:1.5625rem; font-weight: 500; margin-top:0.5rem; text-align: center;}
.c-game__date{ font-family:var(--f-en); font-size:7.1875rem; font-weight:500; line-height:1; letter-spacing:0; margin-top: 0.3em;}
.c-game__dow{ font-family:var(--f-en); font-size:2.1875rem; letter-spacing:0; }
.c-game__times{
  display:flex; gap:2rem; padding:0.9375rem 0; width:100%; justify-content:center;
  border-top:0.0625rem solid currentColor; border-bottom:0.0625rem solid currentColor;
}
.c-game__time{ text-align:center; }
.c-game__time dt{ font-family:var(--f-en); font-size:1.5625rem; letter-spacing:0; }
.c-game__time dd{ font-family:var(--f-en); font-size:3.125rem; line-height:1.2; letter-spacing:0;}

/* 4-7. モーダル（カード詳細）
   ★ display:none にしてはいけない。js/modal.js は閉じたまま Splide を mount して
     寸法を測るので、visibility で隠す。display:none だと幅0で組まれて壊れる。
   ★ 開く = 枠が開ききってから 画像→タイトル→本文 の順にフェードイン
     閉じる = 画像→タイトル→本文 が消えきってから枠が閉じる（重ねない）
     順番は各パーツの --modal-order（0,1,2）で持たせ、delay は calc で出す。 */
.c-modal{
  position:fixed; inset:0; z-index:200;
  visibility:hidden;
  /* 表示領域（10vw/10vh の余白の内側）。PCは1900px上限の16:9、
     横長画面でも縦にはみ出さないよう高さ側でも頭打ちにする */
  --modal-w: min(
      calc((100 - var(--modal-mx) * 2) * var(--modal-vw)),
      var(--modal-maxw),
      calc((100 - var(--modal-my) * 2) * var(--modal-vh) * 16 / 9));
  --modal-h: calc(var(--modal-w) * 9 / 16);
  --modal-in-base:  calc(var(--modal-expand) + var(--modal-lag));
  --modal-out-all:  calc(var(--modal-fade) + var(--modal-stagger) * 2);
  transition:visibility 0s linear calc(var(--modal-out-all) + var(--modal-expand));
}
.c-modal.is-open{ visibility:visible; transition-delay:0s; }

.c-modal__bk{
  position:absolute; inset:0; background:rgba(0,0,0,.8);
  opacity:0; transition:opacity var(--modal-expand) var(--ease) var(--modal-out-all);
}
.c-modal.is-open .c-modal__bk{ opacity:1; transition-delay:0s; }

.c-modal__frame{
  position:absolute; top:50%; left:50%;
  width:var(--modal-w); height:var(--modal-h);
  translate:-50% -50%;
  background:var(--c-black);
  border:0.1875rem solid var(--c-red);
  border-radius:var(--drawer-radius) 0 var(--drawer-radius) 0;
  overflow:hidden;
  opacity:0;
  /* ★ 展開に transform / scale を使ってはいけない。
     js/modal.js は閉じたまま（visibility:hidden）Splide を mount して
     getBoundingClientRect で幅を測るので、縮小状態の幅で桁を計算してしまい
     開いた瞬間にスライドが半端な位置で止まる。
     clip-path はレイアウト寸法に影響しないので安全。 */
  clip-path:inset(5% 4% round var(--drawer-radius) 0 var(--drawer-radius) 0);
  transition:opacity   var(--modal-expand) var(--ease) var(--modal-out-all),
             clip-path var(--modal-expand) var(--ease) var(--modal-out-all);
}
.c-modal.is-open .c-modal__frame{
  opacity:1;
  clip-path:inset(0 0 round var(--drawer-radius) 0 var(--drawer-radius) 0);
  transition-delay:0s;
}

.c-modal__close{ position:absolute; z-index:3; top:1.25rem; right:1.25rem; width:2.25rem; height:2.25rem; }
.c-modal__close::before,.c-modal__close::after{
  content:""; position:absolute; inset:50% 0.25rem auto; height:0.125rem; background:var(--c-white);
}
.c-modal__close::before{ transform:rotate(45deg); }
.c-modal__close::after { transform:rotate(-45deg); }

/* --- スライダー（枠いっぱい。矢印とドットは下に重ねる） --- */
.c-modal__slider,
.c-modal__slider .splide__track,
.c-modal__slider .splide__list,
.c-modal__slider .splide__slide{ height:100%; }
.c-modal__slider .splide__arrows{
  position:absolute; left:0; right:0; bottom:3rem; margin-top:0; z-index:2;
}
.c-modal__slider .splide__pagination{
  position:absolute; left:0; right:0; bottom:1.375rem; z-index:2;
  display:flex; justify-content:center; gap:0.5rem;
}
.c-modal__slider .splide__pagination__page{
  width:0.625rem; height:0.625rem; padding:0; border-radius:50%;
  background:var(--c-gray); transition:background-color .3s var(--ease);
}
.c-modal__slider .splide__pagination__page.is-active{ background:var(--c-red); }

/* --- 中身（元のカードから組み立てる。js/modal.js） --- */
.c-modaldtl{
  display:grid;
  grid-template-columns:1fr 1fr;
  /* ★ minmax(0,1fr) が必須。暗黙の auto 行だと本文が長いとき行が max-content まで
       伸びて枠からはみ出し、右カラムの overflow が効かなくなる。 */
  grid-template-rows:minmax(0, 1fr);
  gap:2.5rem;
  height:100%;
  padding:3.75rem 3.75rem 7rem;
}
/* 画像はカードと同じ16:9のまま上揃え（height:100% で伸ばさない） */
.c-modaldtl__img{ align-self:start; aspect-ratio:16/9; overflow:hidden; margin:0; }
.c-modaldtl__img img{ width:100%; height:100%; object-fit:cover; }
/* PCは右カラムだけスクロールする（枠自体は絶対に動かさない） */
.c-modaldtl__body{ min-height:0; overflow-y:auto; }
.c-modaldtl__ttl{ font-size:1.875rem; line-height:1.4; margin-bottom:1.25rem; }
.c-modaldtl__txt{ text-align:left; }
/* モーダルは全文表示。拡張項目のHTML（table・img・長いURL）がそのまま入るので、
   横方向にはみ出さないようにガードしておく（縦は .c-modaldtl__body がスクロール）。 */
.c-modaldtl__txt{ overflow-wrap:anywhere; }
.c-modaldtl__txt img{ max-width:100%; height:auto; }
.c-modaldtl__txt table{ max-width:100%; }
.c-modaldtl__extra{ margin-top:2rem; }

.c-modaldtl__img { --modal-order:0; }
.c-modaldtl__ttl { --modal-order:1; }
.c-modaldtl__txt,
.c-modaldtl__extra{ --modal-order:2; }
.c-modaldtl__img,.c-modaldtl__ttl,.c-modaldtl__txt,.c-modaldtl__extra{
  opacity:0;
  transition:opacity var(--modal-fade) var(--ease)
             calc(var(--modal-stagger) * var(--modal-order));   /* 閉じる時 */
}
.c-modal.is-open .c-modaldtl__img,
.c-modal.is-open .c-modaldtl__ttl,
.c-modal.is-open .c-modaldtl__txt,
.c-modal.is-open .c-modaldtl__extra{
  opacity:1;
  transition-delay:calc(var(--modal-in-base) + var(--modal-stagger) * var(--modal-order));
}

/* ---------------------------------------------------------
   5. Project（セクション個別）
   --------------------------------------------------------- */

/* 5-1. ヘッダー */
.p-header__logo{
  text-align: center;
  position: relative;
  top: -5rem;
  margin: 3.75rem 0 0;
}
.p-header__logo img{ height:5.8125rem; }
/* --- ハンバーガーボタン ---
   枠線＋黒地は CSS で描く。枠の色はデザイナー支給 menu-box.png の
   「赤×黒の乗算後」を実測した固定色（--c-red-burn）。
   mix-blend-mode のままだと黒セクションの上を通ったとき枠が消えるため単色で置く。
   数値はカンプ実測（1920px 幅 = 等倍）。 */
.p-header__toggle{
  --toggle-bar-inset: 1.1875rem;   /* 白線の左右インセット */
  --toggle-bar-h: 0.1875rem;       /* 白線の太さ */
  --toggle-bar-gap: 1.09375rem;    /* 白線2本の中心間距離 */
  /* サイズ・位置・枠線・角丸は :root（ドロワーと共有）*/

  position:absolute;
  z-index:100;
  top:var(--toggle-top);
  /* ★ ドロワーと同じく --lock-shift を足す。展開中は body が overflow:hidden に
     なってスクロールバーが消え、ビューポートが広がるぶん right 基準の固定要素が
     右へずれる。ボタン側にも足さないとパネルと右上角が合わない。 */
  right:calc(var(--toggle-right) + var(--lock-shift));
  width:var(--toggle-size);
  height:var(--toggle-size);
  padding:0;
  border:none;
}
.p-header__toggle.is-fixed{ position:fixed; }

/* 枠線＋黒地。border をボタン本体に付けると白線2本が枠のぶん内側にずれるので ::before に置く */
.p-header__toggle::before{
  content:"";
  position:absolute; inset:0;
  background:var(--c-black);
  border:var(--toggle-border) solid var(--c-red-burn);
  border-radius:var(--toggle-radius) 0 var(--toggle-radius) 0;
  /* ★ フェードさせない。ドロワー(.p-drawer)が閉じている時とまったく同じ
     80×80・角丸17px・黒地・#630000枠なので、切り替えは一瞬でよい。
     閉じる時は「ドロワーが80×80まで縮み切った瞬間」に入れ替える。
     ここでフェードインさせると、パネルがまだ大きいうちに小さい枠が
     浮かび上がって二重に見える。 */
  transition:opacity 0s linear calc(var(--drawer-fade) + var(--drawer-dur));
}
/* 展開時は白い×だけを残す */
/* 開く時は即座に消す（ドロワー側が同じ見た目で引き継ぐ） */
.is-menuopen .p-header__toggle::before{ opacity:0; transition-delay:0s; }

/* --- 白線2本（枠の上） --- */
.p-header__toggle span{
  position:absolute;
  left:var(--toggle-bar-inset);
  right:var(--toggle-bar-inset);
  height:var(--toggle-bar-h);
  background:var(--c-white);
  translate:0 -50%;
  /* ×→≡ に戻すのはパネルが縮み始めてから（中身が消える間は×のまま） */
  transition:top .3s var(--ease) var(--drawer-fade),
             transform .3s var(--ease) var(--drawer-fade),
             opacity .3s var(--ease) var(--drawer-fade);
}
.p-header__toggle span:nth-child(1){ top:calc(50% - var(--toggle-bar-gap) / 2); }
.p-header__toggle span:nth-child(2){ top:calc(50% + var(--toggle-bar-gap) / 2); }

/* --- 展開時（×印） --- */
.is-menuopen .p-header__toggle span{ top:50%; transition-delay:0s; }
.is-menuopen .p-header__toggle span:nth-child(1){ transform:rotate(45deg); }
.is-menuopen .p-header__toggle span:nth-child(2){ transform:rotate(-45deg); }

/* 5-2. ドロワーメニュー（展開デザイン: sozai_0828.pdf p.1）
   ------------------------------------------------------------------
   .p-drawer 自身が「閉じている時のハンバーガー（80×80・角丸17px・黒地・
   #630000の枠）」の見た目を持ち、開くとメニューの大きさまで width / height /
   border-radius / background-color がトランジションする。
   ★ clip-path で畳むと枠線がL字にしかならずボタンに見えない。width/height で畳むこと。
   ★ 中身（.p-drawer__inner）は最終幅で固定し、親の overflow:hidden で切る。
     一緒に縮めると展開の途中で文字が折り返してガタつく。
   ★ height:auto はトランジションできないので js/script.js が中身の実高さを
     --drawer-h に流し込む（ResizeObserver）。
   ★ left:50% ではなく right 指定。右上を基点にすると 1920px より広い画面でも
     パネルの右上角とハンバーガーの右上角が必ず一致する。
   ------------------------------------------------------------------ */
.p-drawer{
  /* 展開後の幅。100dvw はスクロールバー込みなので --sbw を引く */
  --drawer-w: min(
      calc(100dvw - var(--toggle-right) * 2 - var(--sbw, 0px)),
      var(--drawer-maxw));

  position:fixed;
  z-index:95;                               /* ハンバーガー(100)より下 */
  /* ★ ハンバーガーは「画面右上へ移動し終わってから」展開する（js/script.js）。
     パネルが開く時点でボタンは必ず fixed の --toggle-top にいるので、
     ここは固定値でよい（以前の --drawer-top による追いかけは廃止）。 */
  top:var(--toggle-top);
  right:calc(var(--toggle-right) + var(--lock-shift));
  width:var(--toggle-size);                 /* 閉じている時＝ハンバーガーと同じ */
  height:var(--toggle-size);
  overflow:hidden;
  background-color:var(--c-black);
  border:var(--toggle-border) solid var(--c-red-burn);
  border-radius:var(--toggle-radius) 0 var(--toggle-radius) 0;
  visibility:hidden;
  transition:
    width            var(--drawer-dur) var(--ease) var(--drawer-fade),
    height           var(--drawer-dur) var(--ease) var(--drawer-fade),
    border-radius    var(--drawer-dur) var(--ease) var(--drawer-fade),
    background-color var(--drawer-dur) var(--ease) var(--drawer-fade),
    visibility       0s linear calc(var(--drawer-dur) + var(--drawer-fade));
}
body.is-menuopen .p-drawer{
  visibility:visible;
  width:var(--drawer-w);
  height:calc(var(--drawer-h, 44.0625rem) + var(--toggle-border) * 2);
  background-color:rgba(0,0,0,.9);
  border-radius:var(--drawer-radius) 0 var(--drawer-radius) 0;
  transition-delay:0s;
}

/* 中身は最終幅で固定（親の border ぶんを引く） */
.p-drawer__inner{
  width:calc(var(--drawer-w) - var(--toggle-border) * 2);
  padding:8.125rem 0 4.75rem;               /* MENU上端まで135px / 下76px */
}

/* MENU（Poppins 700 30px・赤・中央） */
.p-drawer__ttl{
  margin:0 0 1.9375rem;                     /* 31px */
  font-family:var(--f-en); font-weight:700; font-size:1.875rem; line-height:1;
  letter-spacing:.06em; text-align:center; color:var(--c-red);
  opacity:0; transition:opacity var(--drawer-fade) var(--ease);
}
body.is-menuopen .p-drawer__ttl{ opacity:1; transition-delay:var(--drawer-lag); }

/* 項目は5列4行、並びは行方向（左→右→次の行）＝LPのセクション順 */
.p-drawer__list{
  display:grid;
  grid-template-columns:repeat(5, max-content);
  column-gap:var(--drawer-col-gap);
  justify-content:center;
}
.p-drawer__list li{
  display:flex; align-items:center;
  height:var(--drawer-row);                 /* 107px */
  opacity:0; transition:opacity var(--drawer-fade) var(--ease);
}
/* --i は js/script.js が li に振る（項目数が変わっても順番どおり出す） */
body.is-menuopen .p-drawer__list li{
  opacity:1;
  transition-delay:calc(var(--drawer-lag) + var(--i, 0) * var(--drawer-stagger));
}
.p-drawer__list a{
  font-size:1.25rem; line-height:1; letter-spacing:.06em;
  color:var(--c-white); white-space:nowrap;
  transition:color .2s var(--ease);
}
.p-drawer__list a:hover{ color:var(--c-red); }

/* 5-3. KV */
.p-kv{ position:relative; width:100%; aspect-ratio:16/9; background:var(--c-black); overflow:hidden; }
.p-kv__pic,
.p-kv__video{ position:absolute; inset:0; }
.p-kv__media{ display:block; width:100%; height:100%; object-fit:cover; }

/* 5-4. クイックナビ */
.p-quicknav{ display:grid; grid-template-columns:repeat(2,25rem); gap:3.75rem; justify-content:center; }
.p-quicknav__item{
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  aspect-ratio:4/5;
  padding:3.125rem 1.5rem;
  /* background:var(--c-black); */
  box-sizing: border-box;
  box-shadow:0.4375rem 0.4375rem 0.625rem rgba(0,0,0,.5);
  border-radius:3.125rem 0 3.125rem 0;
  transition:top .3s var(--ease);
  position: relative;
  top: 0;
}
.p-quicknav__item::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: multiply;
  border-radius:3.125rem 0 3.125rem 0;
  border: 0.3125rem solid var(--c-red);
  z-index: 0;
}
.p-quicknav__item::after{
  content: "";
  position: absolute;
  top: 0.3125rem;
  left: 0.3125rem;
  width: calc(100% - 0.625rem);
  height: calc(100% - 0.625rem);
  display: block;
  background:var(--c-black);
  border-radius:2.8125rem 0 2.8125rem 0;
  z-index: 0;
}
.p-quicknav__item:hover{ top:-0.375rem; opacity: unset;}
.p-quicknav__icon{ display:flex; flex:1; align-items:center; z-index: 1;}
.p-quicknav__icon img{ height:7.9375rem; width:auto; }
.c-btn--seemore{z-index: 1;}

/* 5-5. SCROLL */
.p-scroll{ display:flex; flex-direction:column; align-items:center; gap:0.75rem; margin-top:4.5rem; }
.p-scroll img{ width:7.125rem; }
.p-scroll__line{ 
  width:0.125rem; height:5rem; background:var(--c-black); position: relative;
  animation-name: scrollAnime;
  animation-duration: .7s;
    animation-timing-function: ease-in;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.p-scroll__line::after{
  content: "";
  position: absolute;
  bottom: 0.5rem;
  left: -1.4375rem;
  width: 1.625rem;
  height: 0.125rem;
  background: var(--c-black);
  transform: rotate(-143deg);
}
@keyframes scrollAnime{
  0%{
    top: 0;
  }
  100%{
    top: 1.875rem;
  }
}

/* 5-6. マッチアップ */
#intro{ padding-bottom: 0;}
.p-matchup{ display:flex; flex-direction:column; align-items:center; margin-top:4.5rem; }
.p-matchup__home img{ width:46.875rem; }
.p-matchup__vs img{ width:4.375rem; }
.p-matchup__away{margin-top: 1.875rem;}
.p-matchup__away img{ width:46.875rem; }
.p-matchup__ttl{ margin-top:2.8125rem; margin-bottom: -0.6875rem;}
.p-matchup__ttl img{ width:min(100%,76.5rem); }
.next-game-away{margin: 1.25rem 0 3.125rem;}
.next-game-away img{ width:21.7rem; }

/* 5-7. 会場名 */
.p-venue{ margin-top:3.5rem; text-align:center; }
.p-venue__en{ font-family:var(--f-en); font-size:3.125rem; }
.p-venue__ja{ font-size:1.25rem; }

/* 5-8. GAME HIGHLIGHTS */
.p-highlights__ttl img{ width:min(100%,44.125rem); }
.p-highlights__text{
  margin:3rem 0 1rem;
  font-size:max(1.0625rem, var(--fs-min)); text-align:center; color:var(--c-white);
  display: grid;
  grid-template-rows: 0fr;
  transition:.3s all var(--ease);
  position: relative;
}
.p-highlights__text::after{
  content: "";
  width: 100%;
  display: block;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 15%, var(--c-black));
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 1;
  transition:.3s all var(--ease);
}
.p-highlights__text > *{overflow: hidden; min-height: 11em;}
.p-highlights__text .caption{
  font-size: 1.25rem;
  color: var(--c-red);
  margin: 0.5em 0 1em;
}
.p-highlights__text.is-open{grid-template-rows: 1fr;}
.p-highlights__text.is-open::after{opacity: 0;}
.p-highlights__more{ margin-top:2.25rem; text-align:center; }

/* 5-9. 選手スライダー */
.p-players__ttl .c-secttl__en img{ width:20.125rem; height:auto; }
.p-player__img{ display:block; }
.p-player__figure{ position:relative; }
.p-players__hint{ margin-top:3.125rem; }
.p-players__hint img{ width:8.25rem; }
.p-slider{overflow: hidden; z-index: 1;}
#players .p-slider::before,#players .p-slider::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  display: block;
  width: 32%;
  background: linear-gradient(90deg, rgba(0,0,0,0), var(--c-black));
  z-index: 1;
}
#players .p-slider::before{ left:0; transform:rotate(180deg); }
#players .p-slider::after { right:0; }
/* 矢印＝シャフト（::before）＋45°の矢じり（::after）。
   矢じりは「シャフトの端点」を transform-origin にして回すので、
   幅・高さ・線の太さをどう変えても必ず端で接する（bottom/left の当て込みは使わない）。
   prev は上側、next は下側に矢じりが出る点対称のデザイン。 */
.splide__arrows{
  display:flex; justify-content:center; align-items:center;
  gap:1rem; margin-top:1.875rem;
}
.splide__arrow{
  --arrow-line:  0.125rem;        /* 線の太さ */
  --arrow-head:  1.625rem;        /* 矢じり（45°の斜辺）の長さ */
  --arrow-color: var(--c-red);
  position:relative; padding:0;
  width:3.125rem;
  height:2.5rem;
}
.splide__arrow::before,
.splide__arrow::after{
  content:"";
  position:absolute;
  top:calc(50% - var(--arrow-line) / 2);
  height:var(--arrow-line);
  background:var(--arrow-color);
}
.splide__arrow::before{ left:0; right:0; }                       /* シャフト */
.splide__arrow::after { width:var(--arrow-head); }               /* 矢じり */
.splide__arrow--prev::after{ left:0;  transform-origin:left  center; transform:rotate(-45deg); }
.splide__arrow--next::after{ right:0; transform-origin:right center; transform:rotate(-45deg); }
/* 赤背景セクションだけ黒線 */
.u-bg-red-img .splide__arrow{ --arrow-color:var(--c-black); }
/* .bigsize（u-bg-red-img）が #booth（u-bg-black）を入れ子で包んでいるため、
   内側の背景クラスで赤に戻す（戻さないと黒地に黒矢印で消える） */
.u-bg-black .splide__arrow,
.u-bg-white .splide__arrow{ --arrow-color:var(--c-red); }
/* 選手スライダーはシャフトだけ長い（矢じりの長さは共通） */
#players .splide__arrows{ margin-top:0; }
/* 1ページに収まる（送る必要がない）ときは矢印ごと消す。is-single は script.js が
   ブレイクポイントごとに付け外しする（PC3枚で1ページ → SP2枚で2ページ、などがあるため） */
.splide.is-single .splide__arrows{ display:none; }
/* 1ページのときはカードを中央に寄せる。Splide の送り位置（transform）を無効にして
   flex の中央寄せで並べ、loop 用の複製は隠す。スライド間の margin は消して、
   同じ間隔を script.js が .splide__list の gap に入れ直す（最後の1枚の余白で中央がずれるため） */
.splide.is-single .splide__list{ transform:none !important; justify-content:center; }
.splide.is-single .splide__slide{ margin-right:0 !important; }
.splide.is-single .splide__slide.is-clone{ display:none; }
#players .splide__arrow{ width:6.25rem; }

/* 5-10. パフォーマー */
.p-performers__list{ display:grid; grid-template-columns:repeat(2,25rem); gap:4rem; justify-content:center; margin-bottom:1.875rem; }
.p-performers__list:has(> li:only-child){ grid-template-columns:25rem; }
/* li の中身は a で包まれても包まれなくても同じ見た目になるようにしておく。
   a をブロック化してセル全体をタップ領域にする（0907: 画像リンク追加対応） */
.p-performers__item > a{ display:block; }
.p-performers__item img{ display:block; width:100%; }

/* 5-11. GAMEDAY PARTNER */
.p-partner__logo{ margin-top:1.5rem; margin-bottom:1.5rem; }
.p-partner__logo img{ aspect-ratio: 2 / 1; object-fit: contain; object-position: center; width: 37.5rem;}
.p-partner__name{ font-size:1.875rem; margin-bottom:1.25rem; }
.p-partner__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--card-gap); margin-top:3.5rem; }
/* カードが2枚以下のときは枠いっぱいに引き伸ばさず、カード幅のまま中央に置く。
   ★ 2枚用と1枚用は詳細度に注意。:has(> :nth-child(-n+2):last-child) は
     :has(> :only-child) より詳細度が高く、1枚のときも2カラムのまま勝ってしまう。 */
.p-partner__grid:has(> :nth-child(-n+2):last-child){ justify-content:center; }
.p-partner__grid:has(> li:nth-child(2):last-child){ grid-template-columns:repeat(2, var(--card-w)); }
.p-partner__grid:has(> li:only-child){ grid-template-columns:var(--card-w); }

/* 5-12. TEAM30 */
.p-team30{ position:relative; overflow:hidden; }
.p-team30__bg1{
  position:absolute; top:-4.3rem; right:-6.0625rem; width:34.375rem; pointer-events:none;
}
.p-team30__bg2{
  position:absolute; bottom:-10.625rem; left:-11.875rem; width:61.875rem; pointer-events:none;
}
.p-team30__group + .p-team30__group{ margin-top:6rem; }
.p-team30__badge{
  display:inline-block; padding:0.5rem 2.125rem; border-radius:var(--radius-pill);
  background:var(--c-black); color:var(--c-white); font-size:1.5rem;
}
.p-team30__grade{ margin-top:0.625rem; }
.p-team30__players{ margin-top:2.5rem; }
.p-team30__players ul::before,.p-team30__players ul::after{content: ""; width: 100%; max-width: 18.75rem; margin: 0 auto; height: 0.1875rem; background-color: var(--c-black); display: block;}
.p-team30__player{ padding:0.625rem 0; font-size:2.1875rem; }
.p-team30__player span{ display:block; font-size:1.5625rem; }
/* 2日開催で片方の日だけ選手がいないとき、空の日の枠（上下の線）を隣の高い方に揃える。
   列を stretch し、ul を縦flexで伸ばして下線（::after）を最下部へ押し出す。 */
.p-team30__players{ align-items:stretch; }
.p-team30__players .c-game > ul{ flex:1 1 auto; display:flex; flex-direction:column; }
.p-team30__players .c-game > ul > li:last-child{ margin-bottom:auto; }
.p-team30__players .c-game > ul:not(:has(li))::before{ margin-bottom:auto; }
.p-team30__note{ margin-top:1.75rem; text-align:center; }

/* 5-13. YouTube / バナー */
.p-embed{ width:100%; margin-inline:auto; aspect-ratio:16/9; }
.p-embed iframe{ width:100%; height:100%; border:0; }
.p-banner{ display:block; width:min(100%,var(--inner)); margin-inline:auto; }
.p-banner__ph{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1220/500; border:0.0625rem dashed var(--c-line);
  font-family:var(--f-en); letter-spacing:.2em; color:var(--c-gray);
}

/* STREAMING */
.streaming-list::before,.streaming-list::after{
  content: "";
  width: 100%;
  max-width: 18.75rem;
  margin: 0 auto;
  height: 0.1875rem;
  background-color: var(--c-black);
  display: block;
}
/* 下の罫線が「視聴する」ボタンに接してしまうのでアキを取る */
.streaming-list::after{ margin-top: .25rem; }
.streaming-list li{text-align: center;}
.streaming-list li .c-btn--ticket{font-size: max(1rem, var(--fs-min)); margin: 1rem 0;}
.s-time{font-size: 2.1875rem; text-align: center; line-height: 1.1em; padding-top: 1rem;}
.s-time span{font-size: 1.5625rem; display: block;}

/* 5-14. 初めて観戦される方へ */
.p-beginner{ position:relative; display:grid; place-items:center; aspect-ratio: 16 / 9; overflow:hidden; }
.p-beginner__bg{ position:absolute; inset:0; }
.p-beginner__bg img{ width:100%; height:100%; object-fit:cover; }
.p-beginner__bg::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); }
.p-beginner__body{ position:relative; text-align:center; }
.p-beginner__ttl{ font-size:3.125rem; margin-bottom:1.25rem; font-weight: 500; color: var(--c-white);}

/* 5-15. TICKET */
.p-ticket__seat{ margin-bottom:3.5rem; text-align:center; }

/* 5-16. ARENA */
.p-arena__name{ font-size:2.8125rem; text-align:center; }
.p-arena__addr{ text-align:center; margin-top:-0.375rem; }
.p-arena__media{ display:grid; grid-template-columns:56fr 44fr; margin-top:2.5rem; }
.p-arena__map{ background:#DDD; min-height:26.25rem; }
.p-arena__map iframe{ width:100%; height:100%; border:0; display:block; }
.p-arena__photo img{ width:auto; height:100%; aspect-ratio: 109 / 83; object-fit:cover; }
.p-access{ display:grid; justify-items:center; margin-top:6.25rem; }
.p-access__box{ width:min(100%,37.5rem); border:0.1875rem solid currentColor; padding:1.25rem 0.375rem; text-align:center; font-size:1.25rem; letter-spacing: 0; margin-bottom: 0.625rem; margin-top: 4.375rem; position: relative;}
.p-access__box:first-child{margin-top: 0;}
.p-access__box h3{ font-size:1.875rem; margin-bottom:0.625rem; position: absolute; top: -1em; left: 50%; transform: translateX(-50%); word-break: keep-all; font-weight: 500; padding: 0 1em; background-color: var(--c-white);}
.p-access__note{ text-align:center; letter-spacing: 0;}
.p-access__note a{ color:var(--c-red); }
.hmmt.p-access__box{width: auto !important; text-align:left;}

/* 5-17. フッター */
.p-footer{ padding:5rem 0 2.5rem; background:var(--c-black); color:var(--c-white); text-align:center; }
.p-footer__logos{ display:flex; align-items:center; justify-content:center; gap:2.5rem; }
.p-footer__logos .phoenix{height: 5.625rem; width: 10.625rem;
}
.p-footer__logos .sanen{height: 6rem; width: 10.625rem;
}
.p-footer__sns{ display:flex; justify-content:center; gap:1.8rem; margin-top:1.5rem; }
.p-footer__sns img{ height:2.47rem; }
.p-footer__ttl{ font-family:var(--f-en); font-size:max(1.4rem, var(--fs-min)); letter-spacing:.2em; margin-top:3rem; }
.p-footer__copy{ margin-top:3rem; font-family:var(--f-en); font-size:max(0.625rem, var(--fs-min)); letter-spacing:.1em; }

/* 5-18. 追従要素 */
/* 追従CTA（TICKETS HERE）
   円の直径 --cta-d だけで全体が決まる。中の文字・仕切り線は cqw（=直径の1%）。
      絵（円枠・文字・キャラ・黒地）は img/illust-cta-chara.svg 1枚。日付だけHTMLで重ねてリンクにする。 */
:root{ --cta-d:7.5rem; --cta-right:2rem; --cta-bottom:2rem; }
.p-fixedcta{
  position:fixed; right:var(--cta-right); bottom:var(--cta-bottom); z-index:80;
  width:var(--cta-d); aspect-ratio:1; border-radius:50%; overflow:hidden;
  container-type:inline-size; transition:opacity .3s var(--ease);
}
.p-fixedcta.is-hidden{ opacity:0; pointer-events:none; }
.p-fixedcta__bg{ position:absolute; top:0; left:0; display:block; width:100%; height:auto; max-width:none; pointer-events:none; } /* 円・TICKETS HERE・キャラ・下半分の黒まで入った素材 */
.p-fixedcta__dates{
  position:absolute; left:0; right:0; top:55.9%; bottom:0;    /* 上下の境目 = 素材の 134.24 / 240.13 */
  display:flex; margin:0; padding:0; list-style:none;
}
.p-fixedcta__dates li{ position:relative; flex:1 1 0; min-width:0; }
.p-fixedcta__dates a{
  display:flex; flex-direction:column; align-items:center; height:100%;
  padding-top:8.3cqw; color:#fff; text-decoration:none;
  font-family:var(--f-en); font-weight:500; line-height:1; letter-spacing:0;
  transition:opacity .2s var(--ease);
}
.p-fixedcta__date{ font-size:13cqw; }
.p-fixedcta__dow { font-size:8.4cqw; margin-top:3.7cqw; }
@media (hover:hover){ .p-fixedcta__dates a:hover{ opacity:.7; } }
.p-fixedcta__dates a:focus-visible{ outline:2px solid #fff; outline-offset:-0.4rem; border-radius:0 0 50% 50%; }
/* 2試合：左右に分けて中央に縦線 */
.p-fixedcta__dates li:first-child:not(:only-child) a{ padding-left:7.6cqw; }
.p-fixedcta__dates li:last-child:not(:only-child)  a{ padding-right:7.6cqw; }
.p-fixedcta__dates li:not(:only-child) a{ padding-top:7.65cqw; }
.p-fixedcta__dates li:not(:only-child) .p-fixedcta__date{ font-size:10.9cqw; }
.p-fixedcta__dates li:not(:only-child) .p-fixedcta__dow { font-size:7.4cqw; margin-top:2.4cqw; }
.p-fixedcta__dates li + li::before{
  content:""; position:absolute; left:-0.5cqw; top:4.9cqw; width:1cqw; height:33.3cqw; background:#fff;
}
.p-gotop{ position:fixed; right:2.75rem; bottom:calc(var(--cta-bottom) + var(--cta-d) + 1.125rem); z-index:80; width:2.75rem; height:2.75rem; border-radius:50%;
  background:var(--c-red); display:grid; place-items:center; transition:opacity .3s var(--ease); }
.p-gotop.is-hidden{ opacity:0; pointer-events:none; }
.p-gotop::before{ content:""; width:0.75rem; height:0.75rem; border-top:0.125rem solid #fff; border-right:0.125rem solid #fff;
  transform:rotate(-45deg); translate:0 0.1875rem; }

/* 5-19. イラスト（吹き出し付きキャラクター）*/
.p-illust{ position:absolute; pointer-events:none; z-index: 0;}

/* コンテンツ枠を基準にするための位置指定 */
#goods > .l-inner,
#gourmet > .l-inner{ position:relative; }

.p-illust--timetable{ top:-1.3125rem; right:7.5rem; width:16.5625rem; }      /* 基準: .l-inner--narrow */
.p-illust--ticket   { bottom:-9.5625rem; right:-2.5rem; width:7.875rem; }     /* 基準: 内側の相対配置div */
.p-illust--partner  { top:-9.375rem; right:0.625rem; width:12.625rem; }       /* 基準: 内側の相対配置div */
/* 枠幅に対する比率で指定（カンプ実測 706px / 859.6px ÷ 1220px）。
   rem固定だと 1220～1259px の間だけ枠幅が縮んで数%ズレるため % を使う */
.p-illust--goods    { top:-0.8125rem; left:57.87%; width:7.8125rem; }
.p-illust--gourmet  { top:-6.375rem;  left:70.46%; width:19.25rem; }
/* パフォーマーはセクション直下なので、画面中央（＝枠中央）基準で寄せる */
.p-illust--performer{ bottom:-0.25rem; left:50%; margin-left:3.6rem; translate:-50% 0; width:15.4375rem; }

/* ---------------------------------------------------------
   6. Splide 調整
   --------------------------------------------------------- */
/* track の overflow を開けるのは「中央1枚＋左右のぞき見せ」の選手スライダーだけ。
   全 track に効かせると、枚数が表示枚数以下で中央寄せになるスライダー
   （GOURMET など）でクローンが枠の外にはみ出し、両端が見切れて見える。 */
#players .splide__track{ overflow:visible; }
.p-slider .splide__list{ align-items:stretch; }
.p-slider .splide__slide{ height:auto; }

/* ---------------------------------------------------------
   7. Responsive
   --------------------------------------------------------- */
/* ---------------------------------------------------------
   7-1. 769～1219px：1220pxデザインを画面幅に比例縮小
   ---------------------------------------------------------
   このLPは 1220px 固定幅のPCデザイン（カンプ実測）。
   1219px以下は html の font-size を絞ることで、rem で書かれた
   レイアウト・文字がまとめて等比縮小され、カンプの比率が保たれる。

   ★ px ではなく font-size で縮小している理由
     zoom / transform:scale() だと Splide の内部計算（getBoundingClientRect と
     px指定の translate の混在）が破綻し、スライドが両端で見切れる。
     rem 方式なら JS から見える寸法が実寸と一致するので破綻しない。

   1rem = 16px（1220px以上）
   --fit-base = 1220px(コンテンツ) + 20px(ガター) × 2 = 1260px
   例）画面 769px → 9.77px/rem ／ 画面 1219px → 15.48px/rem
   --------------------------------------------------------- */
:root{
  --fit-base: 1260px;
  --fs-min: 0px;          /* 通常は下限なし */
}
@media screen and (min-width:769px) and (max-width:1219px){
  html{ font-size: calc(16px * 100vw / var(--fit-base)); }
  /* 縮小しても本文が読めなくならないよう、実効12pxを下限にする
     （見出しなど元が20px以上のものは下限に掛からず等比縮小のまま） */
  :root{ --fs-min: 12px; }
}

@media screen and (min-width:1350px) and (max-width:1550px){
  .p-drawer__list {
    grid-template-columns: repeat(4, max-content);
  }
}
@media screen and (min-width:769px) and (max-width:1349px){
  .p-drawer__list {
    grid-template-columns: repeat(3, max-content);
  }
}

/* ---------------------------------------------------------
   7-2. 768px以下：SP
   ---------------------------------------------------------
   カンプ: デザイン/_base/phx2627_lp_home game_base_sp_ol.ai
   アートボード 390 × 10810px（= CSS px 等倍）。以下の数値はすべてこの
   カンプの実測値。1rem = 16px @390px として rem に変換している。

   ★ 縮小方式は PC 中間幅（7-1）と同じ「html の font-size × rem」。
     zoom / transform:scale() は Splide の内部計算を壊すので使わない。
     390px を基準に等比拡縮し、1rem = 17.6px（＝画面幅 430px ＝ 大きめのスマホ）
     で頭打ちにする。431px 以上は各パーツの寸法を固定したままコンテンツ枠だけが
     広がるので、余った幅をカラム数の増加に回せる。
       ～599px    … カード2枚（カンプどおりの並び）
       600～768px … カード3枚（3枚入る幅になるため）
     ※ 391～768px のデザインは未受領のため、この段階分けは実装側の判断。
   --------------------------------------------------------- */
@media screen and (max-width:768px){

  html{ font-size: min(calc(16px * 100vw / 390px), 17.6px); }

  :root{
    --gutter:     3.125rem;   /* 50px：390px時のコンテンツ幅 290px */
    /* 枠幅は画面幅に追従させる（上限は事実上なし）。
       390px時は 390 - 50*2 = 290px でカンプ実測どおりになる。 */
    --inner:      62.5rem;
    --inner-narrow:62.5rem;
    --card-gap:   0.875rem;   /* 14px */
    --card-w:     8.625rem;   /* 138px：カンプ実測のカード幅 */
    --sec-pt:     3rem;       /* 48px */
    --sec-pb:     3rem;       /* 48px */
    --header-h:   3rem;
    --fs-base:    0.5rem;     /* 8px */
    --fs-min:     0px;
    /* ハンバーガー／ドロワー共有（44px基準 = PCの 44/80 倍） */
    --toggle-size:   2.75rem;
    --toggle-top:    1rem;
    --toggle-right:  1rem;
    --toggle-border: 0.171875rem;  /* 2.75px */
    --toggle-radius: 0.5625rem;    /* 9px */
  }
  body{ font-size:var(--fs-base); }

  /* ---- 共通：画像まわりの行間アキを殺す ----
     SPは各パーツが数px単位なので、inline画像の下に出る line-height 由来の
     余白（PCでは無視できる量）がカンプとのズレになる。 */
  .c-secttl__en,.p-matchup p,.p-scroll,.p-players__hint{ line-height:0; }
  .p-header__logo img,.p-matchup p img,.p-scroll img,
  .p-players__hint img,.p-highlights__ttl img,.p-partner__logo img{ display:block; margin-inline:auto; }
  .c-btn img{ display:block; }

  /* ---- 共通：セクション見出し ---- */
  .c-secttl{ gap:0.25rem; margin-bottom:1.5rem; }          /* 4px / 24px */
  .c-secttl__en img{ height:0.65625rem; }                   /* 10.5px */
  .c-secttl__ja{ font-size:0.4375rem; line-height:1; }      /* 7px */
  #benefits .c-secttl,#event .c-secttl,#booth .c-secttl,
  #service .c-secttl,#goods .c-secttl,#gourmet .c-secttl{ margin-bottom:3.125rem; } /* 50px */
  #highlights .c-secttl{ margin-bottom:2.875rem; }          /* 46px */
  #next-game .c-secttl{ margin-bottom:1.46875rem; }         /* 23.5px */
  #partner .c-secttl{ margin-bottom:0; }

  /* ---- 共通：カード ---- */
  .c-card{ border-width:0.09375rem; }                       /* 1.5px */
  .c-card__body{ padding:0.4375rem 0.25rem; }               /* 7px / 4px */
  .c-card{ --card-ttl-lh:0.6875rem; --card-txt-lh:0.5625rem; }  /* 行送り 11px / 9px */
  .c-card__title{ font-size:0.421875rem; margin-bottom:0.5em; }  /* 6.75px */
  .c-card__text{ font-size:0.359375rem; }                          /* 5.75px */

  /* ---- 共通：ボタン ---- */
  .c-btn--ticket{ min-width:4.875rem; padding:0.34375rem 0.84375rem; font-size:0.5rem; } /* 78×25.5px */
  .c-btn--readmore img{ width:4.9375rem; }                  /* 79px */
  .c-btn--website  img{ width:4.5rem; }                     /* 72px */
  .c-btn--seemore  img{ width:3.1875rem; }                  /* 51px */

  /* ---- 共通：アコーディオン ---- */
  .c-acc{ margin-bottom:0.59375rem; }                       /* 9.5px */
  .c-acc__head{
    gap:0.4375rem; padding:0.0625rem 0.875rem;
    border-width:0.09375rem; border-radius:0.5rem 0 0.5rem 0;
    font-size:0.5625rem;                                    /* 9px */
  }
  .c-acc__mark{ width:0.5625rem; height:0.5625rem; }
  .c-acc__mark::before,.c-acc__mark::after{ height:0.0625rem; }
  .c-acc__content{
    padding:1.15rem 1.4375rem 0.95rem; font-size:0.5rem;   /* PC 72/90/60 の 0.254倍 */
    border-width:0.09375rem; border-top:0;
    border-radius:0 0 0.5rem 0;
  }
  .c-acc.is-open .c-acc__head{ border-radius:0.5rem 0 0 0; }

  /* ---- TIME TABLE / 価格表（アコーディオン展開時） ---- */
  .p-timetable{ font-size:0.5rem; }
  .p-timetable__row{ grid-template-columns:minmax(1.5375rem, max-content) 1fr; column-gap:0.20625rem; }
  .p-timetable__row dt{ top:-0.2275rem; }
  .p-timetable__row dd:first-of-type{ border-top-width:0.0625rem; padding-top:0.5rem; }
  .p-timetable__row dd + dd{ margin-top:0.365rem; }
  .p-timetable__row dd:last-of-type{ padding-bottom:0.84rem; }
  .c-acc__content--price{ padding:1.15rem 1.4375rem 1.45rem; }
  /* 価格表は縮めると読めないので横スクロールで逃がす（SPカンプ未受領・実装側判断） */
  .c-acc__content--price{ overflow-x:auto; }
  .p-price img{ width:100%; height:auto; max-width:none; }

  /* ---- 共通：日程ブロック（GAME INFO / TEAM30 / STREAMING） ---- */
  .c-games{ grid-template-columns:1fr 0.0625rem 1fr; }      /* 仕切り 1px */
  .c-games__sep{ width:0.0625rem; }
  .c-game{ padding:0 0.5rem; gap:0.5rem; }
  .c-game__presents img{ width:5.96875rem; border-width:0.0625rem; }  /* 95.5px */
  .c-game__presents span{ font-size:0.45rem; line-height:1.2; margin-top:0.5rem; } /* 7.2px */
  .c-game__date{ font-size:2.125rem; line-height:1; margin-top:0.25em; } /* 34px */
  .c-game__dow{ font-size:0.6875rem; line-height:1; }                 /* 11px */
  .c-games .c-game__times__wrap{ max-width:5.96875rem; margin-bottom:1.5rem; } /* 95.5px */
  .c-games .c-game__times__wrap::before,
  .c-games .c-game__times__wrap::after{ height:0.0625rem; }
  .c-game__times{ gap:1.125rem; padding:0.4375rem 0; }
  .c-game__time dt{ font-size:0.5rem; line-height:1.2; }    /* 8px */
  .c-game__time dd{ font-size:0.9375rem; line-height:1.2; } /* 15px */

  /* ---- 共通：Splide 矢印／スワイプ導線 ---- */
  .splide__arrows{ gap:0.5rem; margin-top:1.5rem; }
  .splide__arrows p{ font-size:0.4375rem; }                 /* 7px */
  .splide__arrow{
    --arrow-line:0.0625rem;                                 /* 1px */
    --arrow-head:0.5625rem;                                 /* 9px */
    width:1.125rem; height:0.75rem;                         /* 18×12px */
  }

  /* ---- 赤背景 ----
     bk-red.svg は 1920×2880 の放射グラデ。SPの横長セクション（390×380程度）に
     cover で敷くと中央だけが拡大されて平坦な赤になるため、枠に合わせて伸ばす。 */
  .u-bg-red-img{ background-image:var(--grad-red); }
  #intro.u-bg-red-img{ background-image:var(--grad-red); }

  /* ---- KV（SPは縦位置 390:693 ＝ 9:16） ---- */
  .p-kv{ aspect-ratio:130/231; }

  /* ---- ヘッダー ---- */
  .p-header__logo{ top:0; margin:0 0 3.25rem; }             /* 下 52px */
  .p-header__logo img{ height:3.6875rem; }                  /* 59px */
  .p-header__toggle{
    --toggle-bar-inset:0.6875rem; --toggle-bar-h:0.125rem; --toggle-bar-gap:0.5rem;
  }
  /* ---- ドロワー（SPの展開カンプは未受領。PCを 290/1140 ≒ 0.254 倍で換算し、
       5列は入らないので2列にする） ---- */
  .p-drawer{ --drawer-maxw:62.5rem; --drawer-radius:0.5rem; }
  .p-drawer__inner{ padding:2.75rem 1.25rem 1.5rem; }
  .p-drawer__ttl{ margin-bottom:1rem; font-size:0.9375rem; }
  .p-drawer__list{
    grid-template-columns:repeat(2, 1fr);
    column-gap:1rem; justify-content:stretch;
  }
  .p-drawer__list li{ height:2rem; }
  .p-drawer__list a{ font-size:0.6875rem; }

  /* ---- クイックナビ ---- */
  .p-quicknav{ grid-template-columns:repeat(2,8.34375rem); gap:1.25rem; } /* 133.5px / 20px */
  .p-quicknav__item{
    padding:0.9375rem 0.5rem;                               /* 15px / 8px */
    border-radius:1.05rem 0 1.05rem 0;
    box-shadow:0.25rem 0.25rem 0.3rem rgba(0,0,0,.5);
  }
  .p-quicknav__item::before{ border-width:0.104rem; border-radius:1.05rem 0 1.05rem 0; }
  .p-quicknav__item::after{
    top:0.104rem; left:0.104rem;
    width:calc(100% - 0.208rem); height:calc(100% - 0.208rem);
    border-radius:0.95rem 0 0.95rem 0;
  }
  /* 0905修正: 4枚のアイコンSVGは絵柄＋文字が一体。GOODS & GOURMET だけ
     アートボードが横長（292.98×126.39）で、高さ60pxだと幅139px＞カード内寸
     117.5px となり img{max-width:100%} に当たって1枚だけ84%に縮んでいた
     （＝文字のQ数と位置が他と揃わない）。一番横長のGOODSが収まる高さに
     4枚とも揃える（117.5 ÷ 2.3181 ≒ 50.7px）。 */
  .p-quicknav__icon img{ height:3.15625rem; }                /* 50.5px */

  /* ---- SCROLL ---- */
  .p-scroll{ margin-top:1.4375rem; gap:0.375rem; }          /* 23px / 6px */
  .p-scroll img{ width:3.3125rem; }                         /* 53px */
  .p-scroll__line{ width:0.0625rem; height:2.1875rem; }     /* 35px */
  .p-scroll__line::after{ bottom:0.25rem; left:-0.59375rem; width:0.6875rem; height:0.0625rem; }

  /* ---- マッチアップ ---- */
  .p-matchup{ margin-top:2.5625rem; }                       /* 41px */
  .p-matchup__home img{ width:16.15625rem; }                /* 描画幅258.5px＝ロゴ実寸176.5px */
  .p-matchup__vs   img{ width:1.5rem; }                     /* 24px */
  .p-matchup__away { margin-top:0.28125rem; }               /* 4.5px */
  .p-matchup__away img{ width:16.15625rem; }                /* 描画幅258.5px＝ロゴ実寸107px */
  .p-matchup__ttl{ margin-top:2.34375rem; margin-bottom:-0.2rem; } 
  .p-matchup__ttl img{ width:100%; }
  .next-game-away{ margin:0.9375rem 0 1.5rem; }
  #next-game .l-inner > p img{ width:0.90625rem; }          /* VS 14.5px */
  #next-game .l-inner > p.next-game-away img{ width:8.5rem; } /* 描画136px＝ロゴ実寸55.5px */

  /* ---- 会場名 ---- */
  .p-venue{ margin-top:1.9375rem; }                         /* 31px */
  .p-venue__en{ font-size:1.25rem; line-height:1.2; }       /* 20px */
  .p-venue__ja{ font-size:0.40625rem; line-height:1.4; }    /* 6.5px */

  /* ---- TIME TABLE ---- */
  #timetable{ padding-bottom:4.03125rem; }                  /* 64.5px */
  .p-illust--timetable{ top:-1.8rem; right:-1.09375rem; width:6.875rem; } /* 0905修正: 足がタイムテーブル枠に接する位置へ +6px */

  /* ---- GAME HIGHLIGHTS ---- */
  .p-highlights__ttl img{ width:min(100%,17.8125rem); }     /* 285px */
  .p-highlights__ttl .c-secttl__en{ display:block; margin-bottom:-0.21875rem; }
  #highlights .c-secttl__ja{ font-size:0.415625rem; }       /* 6.65px */
  .p-highlights__text{ margin:2rem 0 0; font-size:0.5rem; }        /* 8px */
  .p-highlights__text > *{ min-height:14em; }
  .p-highlights__text .caption{ font-size:0.6875rem; margin:0.5em 0 1.45em; } /* 11px */
  /* 0905修正: 閉じている時はカンプ実測の5.5px。展開時は本文と近すぎるので16px空ける */
  .p-highlights__more{ margin-top:0.34375rem; }
  .p-highlights__text.is-open + .p-highlights__more{ margin-top:1rem; }

  /* ---- 選手スライダー ---- */
  /* カンプでは選手↔パフォーマー間のアキが 41.5px しかない（通常セクションは48+48） */
  #players{ padding-bottom:1.25rem; }
  #performers{ padding-top:1.375rem; padding-bottom:3.9375rem; }
  #players .c-secttl{ margin-bottom:1rem; }
  .p-players__ttl .c-secttl__en img{ width:9.375rem; height:auto; } /* 150px */
  .p-players__hint{ margin-top:2.6875rem; }                 /* 43px */
  .p-players__hint img{ width:4.875rem; }                   /* 78px */
  /* カンプ実測：シャフト59px／矢じりの縦横9px（＝斜辺 9√2 ≒ 12.73px）／全高19px */
  #players .splide__arrow{
    width:3.6875rem; height:1.1875rem;                      /* 59×19px */
    --arrow-head:0.795625rem;                               /* 12.73px */
  }
  #players .p-slider::before,#players .p-slider::after{ width:30%; }
  /* カンプでは選手スライダーだけ画面幅いっぱい（左右の隣が画面端まで見える）。
     l-inner(290px)の中だと padding 122.5px×2 でスライドが潰れるので全幅に逃がす。
     幅は「カンプの画面幅 390px = 24.375rem」で頭打ちにする。そうしないと
     rem が上限に張り付く 487.5px 超で中央のカードだけ肥大する。 */
  #players .p-slider{
    width:min(100vw, 24.375rem);
    margin-inline:calc((100% - min(100vw, 24.375rem)) / 2);
  }

  /* ---- パフォーマー ---- */
  .p-performers__list{ grid-template-columns:repeat(2,6.28125rem); gap:1.1875rem; margin-bottom:0.5rem; }
  .p-performers__list:has(> li:only-child){ grid-template-columns:6.28125rem; }
  .p-illust--performer{ bottom:-0.125rem; margin-left:1.640625rem; width:7.34375rem; }

  /* ---- GAMEDAY PARTNER ---- */
  /* 画像に余白が入っているため、ロゴの見た目位置に合わせて実測で詰める */
  .p-partner__logo{ margin-top:1.53125rem; margin-bottom:0; }
  .p-partner__logo img{ width:9.375rem; }                   /* 描画150px＝ロゴ実寸125px */
  .p-partner__name{ font-size:0.625rem; margin-bottom:1.1875rem; } /* 10px */
  .p-partner__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--card-gap); margin-top:1.5625rem; }
  .p-illust--partner{ top:-3.75rem; right:-0.15625rem; width:5.0625rem; } /* 0905修正: カード枠の上に乗る位置へ -6px */

  /* ---- TEAM30 ---- */
  .p-team30__bg1{ top:-1.25rem; right:-1.875rem; width:10.625rem; }
  .p-team30__bg2{ bottom:-3.25rem; left:-3.75rem; width:19.375rem; }
  .p-team30__group + .p-team30__group{ margin-top:1.375rem; }
  .p-team30__badge{ padding:0.34375rem 1.09375rem; font-size:0.5rem; } /* 110×25px */
  .p-team30__grade{ margin-top:0.59375rem; font-size:0.48125rem; }  /* 7.7px */
  .p-team30__players{ margin-top:1.75rem; }
  .p-team30__players ul::before,.p-team30__players ul::after{ max-width:5.96875rem; height:0.0625rem; }
  .p-team30__players ul::before{ margin-bottom:0.375rem; }
  .p-team30__players ul::after{ margin-top:0.625rem; }
  .p-team30__player{ padding:0.34375rem 0; font-size:0.65rem; }     /* 10.4px */
  .p-team30__player span{ font-size:0.5625rem; }                    /* 9px */
  .p-team30__note{ margin-top:0.75rem; font-size:0.4375rem; line-height:1.5;
                   width:min(100%,12.25rem); margin-inline:auto; } /* 0905修正: 190→196px。「変更、」が1行目に収まりカンプの改行位置になる */
  /* HTMLに直書きされた margin-bottom:40px（PC値）をSP実測値で上書き。
     ★本来はHTML側からインラインstyleを外してCSSに寄せたい（要承認） */
  #team30 p[style*="margin-bottom"]{ margin-bottom:1.59375rem !important; }

  /* ---- YouTube / バナー ---- */
  /* カンプでは YouTube 埋め込みが画面幅いっぱい（390×219＝16:9）で、上下の余白なし */
  #youtube{ padding:0; }
  #youtube .l-inner,#youtube .p-embed{ width:100%; }
  .p-embed iframe{ display:block; }
  .p-banner{ width:min(100%,var(--inner)); }
  .p-banner__ph{ aspect-ratio:290/387; font-size:0.5rem; }

  /* ---- STREAMING ---- */
  .streaming-list::before,.streaming-list::after{ max-width:5.96875rem; height:0.0625rem; }
  .streaming-list::after{ margin-top:0.8125rem; }           /* 13px */
  .streaming-list li .c-btn--ticket{ font-size:0.5rem; margin:0.75rem 0 0; }
  .s-time{ font-size:0.578125rem; line-height:1.35; padding-top:0.8125rem; } /* 9.25px */
  .s-time span{ font-size:0.625rem; line-height:1.3; }      /* 10px */

  /* ---- 初めて観戦される方へ ---- */
  .p-beginner__ttl{ font-size:0.625rem; margin-bottom:0.75rem; }  /* 10px */
  .p-beginner .c-btn--ticket{ font-size:0.55rem; }          /* 8.8px */

  /* ---- TICKET ---- */
  /* 座席図JPGは四辺に余白が入っているため、図版の見た目幅がカンプ実測の
     290pxになるよう描画幅311pxで置く（差し替え時は要再調整） */
  .p-ticket__seat{ margin-bottom:1.5625rem; }               /* 25px */
  .p-ticket__seat img{ width:19.4375rem; }                  /* 描画311px */
  #ticket .c-secttl{ margin-bottom:1.4375rem; }             /* 23px */
  .p-illust--ticket{ bottom:-3.7rem; right:-0.09375rem; width:4.375rem; } /* 0905修正: 足が白ベタ境界に乗る位置へ +9px */
  .p-illust--goods  { top:0.75rem;  left:65.5%; width:3.4375rem; }
  .p-illust--gourmet{ top:-2rem;  left:56.9%; width:8.90625rem; }

  /* ---- ARENA ---- */
  .p-arena__name{ font-size:0.78125rem; }                   /* 12.5px */
  .p-arena__addr{ font-size:0.4375rem; margin-top:0.1875rem; }
  .p-arena__media{ grid-template-columns:1fr; margin-top:1.5rem; }
  .p-arena__photo img{ width:100%; height:auto; }
  .p-arena__map{ min-height:13.71875rem; }                  /* 219.5px */
  .p-access{ margin-top:2.625rem; }
  .p-access__box{
    width:min(100%,18.125rem); padding:0.6875rem 0.25rem;
    border-width:0.09375rem; font-size:0.5rem;
    margin-top:1.75rem; margin-bottom:0.375rem;
  }
  .hmmt.p-access__box{width:100% !important;}
  .p-access__box h3{ font-size:0.625rem; margin-bottom:0.375rem; }
  .p-access__note{ font-size:0.4375rem; }

  /* ---- フッター ---- */
  .p-footer{ padding:1.6875rem 0 1.5rem; }
  .p-footer__logos{ flex-direction:column; gap:0.75rem; }
  .p-footer__logos .phoenix{ width:4.46875rem; height:2.375rem; }  /* 描画71.5×38px＝ロゴ実寸65×34px */
  .p-footer__logos .sanen  { width:3.625rem; height:2.53125rem; }  /* 58×40.5px */
  .p-footer__sns{ gap:1.4375rem; margin-top:1rem; }         /* 23px */
  .p-footer__sns img{ height:1.375rem; }                    /* 22px */
  .p-footer__ttl{ font-size:0.390625rem; margin-top:2.75rem; }
  .p-footer__copy{ font-size:0.34375rem; margin-top:0.875rem; }

  /* ---- 追従要素 ---- */
  /* ---- モーダル（SPは比率不問。表示領域そのまま＝縦長） ---- */
  .c-modal{
    --modal-w: calc((100 - var(--modal-mx) * 2) * var(--modal-vw));
    --modal-h: calc((100 - var(--modal-my) * 2) * var(--modal-vh));
  }
  .c-modal__frame{ border-width:0.09375rem; border-radius:0.5rem 0 0.5rem 0; }
  .c-modal__close{ top:0.5rem; right:0.5rem; width:1.25rem; height:1.25rem; }
  /* SPは画像込みで全体が縦スクロールする */
  .c-modaldtl{
    grid-template-columns:1fr; grid-template-rows:auto;
    align-content:start;      /* auto行が引き伸ばされて画像の下に隙間ができるのを防ぐ */
    gap:0.75rem; padding:1.25rem 1rem 3rem;
    overflow-y:auto;
  }
  .c-modaldtl__body{ overflow:visible; }
  .c-modaldtl__ttl{ font-size:0.625rem; margin-bottom:0.5rem; }
  .c-modal__slider .splide__arrows{ bottom:1.25rem; }
  .c-modal__slider .splide__pagination{ bottom:0.5rem; }
  .c-modal__slider .splide__pagination__page{ width:0.3125rem; height:0.3125rem; }

    /* 日付を2つ載せるので旧画像（4rem）より大きくしている */
  :root{ --cta-d:5.5rem; --cta-right:0.75rem; --cta-bottom:0.75rem; }
  .p-gotop{ right:1rem; bottom:calc(var(--cta-bottom) + var(--cta-d) + 0.625rem); width:2.25rem; height:2.25rem; }
  .p-illust{ display:block; }
}

/* ---------------------------------------------------------
   7-3. 600～768px：カードが3枚入る幅
   ---------------------------------------------------------
   7-2 の各値（＝390pxカンプの寸法）はそのまま。1rem が 17.6px で
   頭打ちになるぶん、余った幅を「カラム数」に回す。
   Splide 側の 600～768px = 3枚（js/sliders.js の BP_SP3 / BP_SP2）と揃える。
   --------------------------------------------------------- */
@media screen and (min-width:600px) and (max-width:768px){
  .p-partner__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

.c-modal:not(.is-open){ pointer-events:none; }

.c-modal:not(.is-open) .splide.is-initialized,
.c-modal:not(.is-open) .splide.is-rendered{ visibility:hidden; }