/* リキッドレイアウト対応 */
.w-outer {
  width: 100%;
  max-width: 100%;
}

.w-inner {
  width: 100%;
  max-width: 100%;
}

.safe-inner {
  width: 750px !important;
  margin-left: auto;
  margin-right: auto;
}
.ffb-game-lp-wrap {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background: #b84c97;
}

.ffb-game-lp-wrap.red {
  background: #c10230;
}

.u-desktop {
  display: none;
}

main {
  margin-inline: auto;
  max-width: 750px;
}

html {
  font-size: 16px;
}

/* pcの電話番号発信対応 */

/* ホバー */

a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Remove default padding */

ul,
ol {
  padding: 0;
}

/* Remove default margin */

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core root defaults */

html {
  scroll-behavior: smooth;
}

/* Set core body defaults */

body {
  line-height: 1.5;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

/* Remove list styles on ul, ol elements with a class attribute */

ul,
ol {
  list-style: none;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

img {
  display: block;
  max-width: 100%;
  width: 100%;
}

/* Natural flow and rhythm in articles by default */

article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
  font: inherit;
}

/* フォームリセット */

input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
  display: none;
}

input[type="submit"],
input[type="button"],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

picture {
  display: block;
}

button {
  display: block;
  padding: 0;
  width: 100%;
}

.l-inner {
  height: inherit;
  margin: 0 auto;
  padding-left: 30px;
  padding-left: 1.875rem;
  padding-right: 30px;
  padding-right: 1.875rem;
  width: 100%;
}

.p-access {
  background-color: #b84c97;
}

.p-access.red {
  background-color: #c10230;
}

#bondsup-20250308 .p-access {
  background-color: #d51721;
}

#bondsup-20260307 .p-access {
  background-color: #8a091f;
}

.p-access__map {
  padding: 0 30px;
  padding: 0 1.875rem;
}

.p-access__map iframe {
  aspect-ratio: 700/400;
  height: 100%;
  width: 100%;
}

.p-access a {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.p-access a:hover {
  opacity: 0.8;
}

.p-drawer {
  background-color: #b84c97;
  display: none;
  height: 100%;
  left: 0;
  margin: 0 auto;
  /*max-width: 750px;*/
  overflow-y: scroll;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
}
.red .p-drawer {
  background-color: #c10230;
}

#bondsup-20250308 .p-drawer {
  background-color: #000;
}

.p-drawer__inner {
  height: 100%;
  min-height: 1000px;
  min-height: 62.5rem;
  position: relative;
  width: 100%;
}

.p-drawer__nav {
  left: 50%;
  max-width: 450px;
  max-width: 28.125rem;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
}

.p-drawer__link a {
  border-bottom: 3px solid #181b39;
  color: white;
  display: block;
  font-size: 28px;
  font-size: 1.75rem;
  font-weight: 900;
  padding-bottom: 14px;
  padding-bottom: 0.875rem;
  padding-top: 46px;
  padding-top: 2.875rem;
  text-align: center;
}
#bondsup-20250308 .p-drawer__link a {
  border-bottom: 3px solid #d51721;
}

#bondsup-20260307 .p-drawer__link a {
  border-bottom: 3px solid #8a091f;
}

.p-sdgstop {
  overflow: hidden;
}

.p-sdgstop__top {
  position: relative;
}

.p-sdgstop__content {
  left: 50%;
  padding: 0 30px;
  padding: 0 1.875rem;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  @media (max-width: 750px) {
    position: initial;
    padding: 0;
    transform: none;
    width: 85%;
    margin: auto;
  }
}
.p-sdgstop__top {
  background: url(/v=1732867450/files/user/_/lp/game_lp/SDGS-BG.jpg);
  background-size: cover;
  background-position: center;
  @media (max-width: 750px) {
    background-size: cover;
    background-position: center;
    padding-top: 1.5em;
  }
}

.p-sdgs__unit {
  margin-top: -1px;
  position: relative;
}
.p-sdgs__unit {
  background: #c2e464;
}

.p-sdgs__slider {
  bottom: 70px;
  bottom: 4.375rem;
  padding: 0 30px;
  padding: 0 1.875rem;
  position: absolute;
  width: 100%;
}

.p-event__unit {
  margin-top: -1px;
  position: relative;
}
.p-event__unit {
  background: #b84c97;
}

.p-event__slider {
  padding: calc(30 / 375 * 100vw) 30px;
  width: 100%;
}

@media (min-width: 751px) {
  .p-event__slider {
    padding: 30px 0;
  }
}

.slider-dots {
  gap: 20px;
  gap: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 auto;
  margin-top: 45px;
  margin-top: 2.8125rem;
}

.slider-dots li {
  border: 2px solid white;
  height: 40px;
  height: 2.5rem;
  list-style: none;
  width: 40px;
  width: 2.5rem;
}

.slider-dots li.slick-active {
  background-color: #181b39;
  border-color: #181b39;
}

.red .slider-dots li.slick-active {
  background-color: #000;
  border-color: #000;
}

.slider-dots button {
  display: none;
}

.slick-dotted.slick-slider {
  margin-bottom: 0;
}

.slide-arrow {
  cursor: pointer;
  height: 166px;
  height: 10.375rem;
  position: absolute;
  top: calc(50% - 4.0625rem);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  width: 50px;
  width: 3.125rem;
  z-index: 1;
}

.prev-arrow {
  background: url(/v=1696321680/files/user/_/lp/game_lp/arrow-prev.jpg) center center/contain no-repeat;
  left: 0px;
}
.red .prev-arrow {
  background: url(/v=1708222105/files/user/_/lp/game_lp/arrow-red-left.png) center center/contain no-repeat;
  left: 0px;
}

.next-arrow {
  background: url(/v=1696321680/files/user/_/lp/game_lp/arrow-next.jpg) center center/contain no-repeat;
  right: 0px;
}
.red .next-arrow {
  background: url(/v=1708222105/files/user/_/lp/game_lp/arrow-red-right.png) center center/contain no-repeat;
  right: 0px;
}

.slide-arrow:hover {
  opacity: 0.8;
}

.p-float {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /*max-width: 750px;*/
  width: 100%;
  bottom: 0;
  display: grid;
  grid-template-columns: 65.3% 20.4%;
  gap: 3.125rem;
  align-items: flex-end;
  z-index: 1000;
}

.p-float__kansen {
  margin-inline: auto;
  margin-bottom: 0.625rem;
  @media (min-width: 750px) {
    width: 40%;
  }
}
.p-flaot__btn {
  @media (min-width: 750px) {
    width: 30%;
  }
}

.p-food__unit {
  margin-top: -1px;
  position: relative;
}
.p-food__unit {
  background: url(/v=1724560500/files/user/_/lp/game_lp/2024-25-LP-BG-2.jpg);
  aspect-ratio: 5.5 / 3;
}

.p-food__slider {
  bottom: 60px;
  bottom: 3.75rem;
  padding: 0 30px;
  padding: 0 1.875rem;
  width: 100%;
}

.p-footer {
  margin-inline: auto;
  background-color: #b84c97;
  max-width: 750px;
  max-width: 46.875rem;
  padding-bottom: 20px;
  padding-bottom: 1.25rem;
  padding-top: 30px;
  padding-top: 1.875rem;
}

#bondsup-20250308 .p-footer {
  background-color: #000;
}
#bondsup-20250308 .l-footer {
  background-color: #000;
}

#bondsup-20260307 .p-footer {
  background-color: #000;
}
#bondsup-20260307 .l-footer {
  background-color: #000;
}

.p-footer__top {
  margin-inline: auto;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  width: 600px;
  width: 37.5rem;
}

.p-footer__top:hover {
  opacity: 0.8;
}

.p-footer__logo {
  margin-inline: auto;
  margin-top: 40px;
  margin-top: 2.5rem;
  width: 250px;
  width: 15.625rem;
}

.p-footer__sns {
  gap: 30px;
  gap: 1.875rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 45px;
  margin-top: 2.8125rem;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

.p-footer__sns li {
  width: 100px;
  width: 6.25rem;
}

.p-footer__sns li a {
  display: block;
}

.p-footer__copy {
  color: white;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.1666666667;
  margin-top: 35px;
  margin-top: 2.1875rem;
  text-align: center;
}

.p-game {
  overflow: hidden;
}

.p-game__top {
  position: relative;
  background: url(/v=1786953860/files/user/_/lp/game_lp/2026-27-GAME-LP-BG-1.jpg) bottom center/cover no-repeat;
}

.p-game__content {
  position: initial;
  padding: 0;
  transform: none;
  width: 85%;
  margin: auto;
}

@media (min-width: 751px) {
  .p-game__content {
    width: 100%;
  }
}

#bondsup-20250308 .p-game__top {
  background: none;
}
#bondsup-20250308 .p-game {
  background: url(/v=1738470191/files/user/_/lp/game_lp/2024-25-LP-BG-BUD.jpg);
  @media (max-width: 750px) {
    background-size: cover;
    background-position: center;
    padding-top: 1.5em;
  }
}

#bondsup-20260307 .p-game__top {
  background: none;
}
#bondsup-20260307 .p-game {
  background: url(/v=1772089619/files/user/_/lp/game_lp/2025-26-LP-BG-BUD.jpg);
  @media (max-width: 750px) {
    background-size: cover;
    background-position: center;
    padding-top: 1.5em;
  }
}
#bondsup-2026032122 .p-game__top {
  background: none;
}
#bondsup-2026032122 .p-game {
  background: url(/v=1772073464/files/user/_/lp/game_lp/2025-26-LP-BG-AIZU.jpg);
  @media (max-width: 750px) {
    background-size: cover;
    background-position: center;
    padding-top: 1.5em;
  }
}

.game-preview {
  background: #ffffff;
}

.p-game__place {
  margin-inline: auto;
  margin-top: 30px;
  margin-top: 1.875rem;
  margin-bottom: 30px;
  margin-bottom: 1.875rem;
  width: 450px;
  width: 28.125rem;
}

.p-game__bottom {
  background-color: #181b39;
  padding-bottom: 50px;
  padding-bottom: 3.125rem;
}

.p-game__bottom.purple {
  background-color: #b84c97;
  padding-bottom: 50px;
  padding-bottom: 3.125rem;
}
.p-game__bottom.red,
#bondsup-20250308 .p-game__bottom {
  background-color: #000;
}
.p-game__bottom.red,
#bondsup-20260307 .p-game__bottom {
  background-color: #000;
}

.p-game__schedule {
  width: 100%;
}

.p-game__btns {
  gap: 20px;
  gap: 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 20px;
  margin-top: 1.25rem;
}

.p-game__btns--one-clumn {
  display: block;
  width: calc(100% / 2 - 1.25rem);
  margin-left: auto;
  margin-right: auto;
}

.p-game__btn a {
  display: block;
}

.p-good__sec {
  position: relative;
}
.p-good__sec {
  background: #000;
}

.p-good__btn {
  bottom: 70px;
  bottom: 4.375rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 600px;
  width: 37.5rem;
}

#bondsup-20250308 .p-good {
  background: #d51721;
}

#bondsup-20260307 .p-good {
  background: #8a091f;
}

.p-good.orange {
  background: #ec8e26;
}

.p-header {
  background-color: #b84c97;
  height: 100px;
  height: 6.25rem;
  left: 0;
  margin: 0 auto;
  /*max-width: 750px;*/
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 10;
}

/* スクロールに合わせて出し入れするヘッダー。
   下方向にスクロールすると上へ引っ込み、上方向で戻る（クラスの付け外しはJS）。
   このLPだけの挙動なので、目印として js-header-hide を付けた要素にのみ効かせる。 */
.p-header.js-header-hide {
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  will-change: transform;
}

.p-header.js-header-hide.is-hidden {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

/* 動きを抑える設定の環境では出し入れのアニメーションを省く（隠れる動作自体は残す） */
@media (prefers-reduced-motion: reduce) {
  .p-header.js-header-hide {
    -webkit-transition: none;
    transition: none;
  }
}
.p-header.red {
  background-color: #c10230;
}
#bondsup-20250308 .p-header {
  background-color: #000;
}

#bondsup-20260307 .p-header {
  background-color: #000;
}

.p-header__inner {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-left: 15px;
}

.p-header__logo {
  width: 95px;
  width: 5.9375rem;
}

.p-header__hamburger {
  cursor: pointer;
  height: 100%;
  margin-left: auto;
  position: relative;
  width: 100px;
  width: 6.25rem;
  z-index: 1;
}

.p-header__hamburger img {
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.p-header__hamburger img:nth-child(2) {
  opacity: 0;
}

.p-header__hamburger.is-active img:nth-child(1) {
  opacity: 0;
}

.p-header__hamburger.is-active img:nth-child(2) {
  opacity: 1;
}

.p-manner {
  background-color: black;
  padding-bottom: 100px;
  padding-bottom: 6.25rem;
}

.p-manner__btn {
  margin-inline: auto;
  margin-top: 50px;
  margin-top: 3.125rem;
  width: 600px;
  width: 37.5rem;
}

.p-mv {
  padding-top: 100px;
  padding-top: 6.25rem;
}
.p-mv {
  /*background: url(/v=1723953255/files/user/_/lp/game_lp/test-image.png);*/
}
.l-tab {
  /*background: url(/v=1723953468/files/user/_/lp/game_lp/test-image-w.png);*/
}
#bondsup-20250308 .l-tab {
  background: #000000;
}
#bondsup-20260307 .l-tab {
  background: #000000;
}
.p-performer {
  background: #181b39;
}
.p-performer.purple {
  background: #b84c97;
}
#bondsup-20250308 .p-performer {
  background: #000;
}
#bondsup-20260307 .p-performer {
  background: #000;
}
.p-news {
  position: relative;
}
.p-news__inner {
  background: #181b39;
}

#bondsup-20260307 .p-news__inner {
  background: #000;
}

.p-slogan {
  background: url(/v=1696321684/files/user/_/lp/game_lp/LP-SEC-SLOGAN.png);
}
.p-news__slider {
  padding: 0 30px;
  padding: 0 1.875rem;
  width: 100%;
}

.p-news__slider .slider-dots li.slick-active {
  background-color: #b84c97;
  border-color: #b84c97;
}

.red .p-news__slider .slider-dots li.slick-active {
  background-color: #c10230;
  border-color: #c10230;
}

.p-news__slider .prev-arrow {
  background: url(/v=1696321680/files/user/_/lp/game_lp/arrow-prev2.jpg) center center/contain no-repeat;
  left: 0;
}
.red .p-news__slider .prev-arrow {
  background: url(/v=1708222105/files/user/_/lp/game_lp/arrow-red-left.png) center center/contain no-repeat;
  left: 0;
}

.p-news__slider .next-arrow {
  background: url(/v=1696321680/files/user/_/lp/game_lp/arrow-next2.jpg) center center/contain no-repeat;
  right: 0;
}
.red .p-news__slider .next-arrow {
  background: url(/v=1708222105/files/user/_/lp/game_lp/arrow-red-right.png) center center/contain no-repeat;
  right: 0;
}

.p-roster {
  position: relative;
}
.p-roster {
  background: url(/v=1724566857/files/user/_/lp/game_lp/2024-25-LP-BG-7.jpg);
}

.p-roster.year-2025 {
  background: url(/v=1754549631/files/user/_/lp/game_lp/2025-26-LP-BG-1.jpg);
  aspect-ratio: 7.5 / 3;
}

#bondsup-20250308 .p-roster {
  background: url(/v=1738669438/files/user/_/lp/game_lp/2024-25-LP-BG-BUD-2.jpg);
}

#bondsup-20260307 .p-roster {
  background: url(/v=1738669438/files/user/_/lp/game_lp/2024-25-LP-BG-BUD-2.jpg);
}

.p-roster__slider {
  bottom: 80px;
  bottom: 5rem;
  width: 100%;
}

.p-roster__card {
  margin: 0 5px;
  margin: 0 0.3125rem;
}

/* 席種セクションのコンテナ（.p-tab.safe-inner）。
   エリアマップのタブボタンと同名だが別物なので、
   マップ側は .p-tabs の直下に限定してスタイルを当てている（下記） */
.p-tab {
  position: relative;
}

/* ===== エリアマップのタブ ===== */
/* 列数はタブの数に自動追従する */
.p-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-tabs > .p-tab {
  position: relative;
  /* <button> のブラウザ既定スタイルを打ち消す */
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.p-tabs > .p-tab img {
  max-width: 100%;
  left: 0;
  top: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

/* 1枚目=選択中の絵柄、2枚目=通常の絵柄 */
.p-tabs > .p-tab img:nth-child(1) {
  opacity: 0;
  position: relative;
}

.p-tabs > .p-tab img:nth-child(2) {
  opacity: 1;
  position: absolute;
}

.p-tabs > .p-tab.is-active img:nth-child(1) {
  opacity: 1;
}

.p-tabs > .p-tab.is-active img:nth-child(2) {
  opacity: 0;
}

/* キーボード操作時のフォーカス表示（背景が #EC8E26 なので黒で囲む） */
.p-tabs > .p-tab:focus-visible {
  outline: 3px solid #000;
  outline-offset: 3px;
}

.p-tabpanel {
  margin-top: 6px;
}

/* JS実行前のちらつき対策。2枚目以降を隠す（タブの枚数に依存しない） */
.p-tabpanel > :nth-child(n + 2) {
  display: none;
}

/* is-scrollable が付いていないパネルは、幅に合わせて全体を見せる */
.p-tabpanel__content img {
  display: block;
  width: 100%;
  height: auto;
}

/* スクロールを知らせるアイコンを中央に重ねるための基準。
   アイコンは overflow の外側（この要素の直下）に置くので、
   スクロールしても一緒に動かない */
.is-scrollable {
  position: relative;
}

/* is-scrollable のパネルは高さを固定し、はみ出した分を横スクロールで見せる。
   スクロールするのは role="tabpanel" と tabindex="0" が付く
   .p-tabpanel__content 自身なので、キーボードの矢印キーでも動かせる。
   マウスの場合はドラッグでも動かせるようにしている（JS側で担当） */
.is-scrollable .is-scrollable__content {
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  overflow-x: auto;
  height: 600px;
}

/* ドラッグ中だけカーソルを変える（クラスの付け外しはJS） */
.is-scrollable .is-scrollable__content.is-dragging {
  cursor: grabbing;
}

/* ===== 横スクロールできることを知らせるアイコン =====
   アイコン本体は ScrollHint（MIT / appleple）が挿入する。
   CSSもCDNから読み込むので、ここには置き場所の調整だけを書く。
   ・.scroll-hint-icon-wrap … アイコンを包む絶対配置の器（ライブラリ側）
   端のグラデーション（suggestiveShadow）は使わない。
   ScrollHint は初期化した1枚だけを包む作りで、タブを切り替えると
   影の有無がパネルごとにばらつくため、無しで統一している */

/* アイコンが画像より奥に隠れないようにする */
.is-scrollable .scroll-hint-icon-wrap {
  z-index: 2;
}

/* テキストを1行に収める。
   ライブラリ既定は width: 120px 固定で、padding を引いた内容幅は100px。
   「横にスクロールできます」は 10px × 11文字 = 110px あって折り返すため、
   幅を内容に合わせる。幅が可変になるので、中央寄せも
   left: calc(50% - 60px) から translate に置き換える */
.is-scrollable .scroll-hint-icon {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: auto;
  min-width: 120px;
  white-space: nowrap;
}

/* 動きを抑える設定の環境では指のアニメーションを止める（表示自体は残す） */
@media (prefers-reduced-motion: reduce) {
  .scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
    -webkit-animation: none;
    animation: none;
  }
}

.is-scrollable .is-scrollable__content img {
  height: 100%;
  max-width: none;
  width: auto;
  /* ドラッグ中に画像自体が引きずられたり、文字が選択されるのを防ぐ */
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media (max-width: 750px) {
  /* SPは高さを固定し、幅は画像の比率なりに伸ばして横スクロールで見せる。
	   スクロールさせるのは role="tabpanel" と tabindex="0" が付く
	   .p-tabpanel__content 自身なので、キーボードの矢印キーでもスクロールできる */
  .is-scrollable .is-scrollable__content {
    height: 60vh;
    max-height: 500px;
    overflow-x: auto;
  }
}

.p-tab__btns {
  gap: 16px;
  gap: 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  left: 50%;
  padding: 0 30px;
  padding: 0 1.875rem;
  position: absolute;
  top: 78px;
  top: 4.875rem;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
}

.p-tab__btns_2025-26 {
  gap: 16px;
  gap: 1rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  left: 50%;
  padding: 0 30px;
  padding: 0 1.875rem;
  position: absolute;
  top: 78px;
  top: 4.875rem;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
}

.p-ticket {
  position: relative;
}

.p-ticket__slider {
  padding: 0 30px;
  padding: 0 1.875rem;
}

.p-ticket__slider .slider-dots li {
  border-color: #181b39;
}

.p-ticket__slider .slider-dots li.slick-active {
  background-color: #b84c97;
  border-color: #b84c97;
}

.red .p-ticket__slider .slider-dots li.slick-active {
  background-color: #c10230;
  border-color: #c10230;
}

.p-ticket__slider .prev-arrow {
  background: url(/v=1696321680/files/user/_/lp/game_lp/arrow-prev2.jpg) center center/contain no-repeat;
  left: 0;
}
.red .p-ticket__slider .prev-arrow {
  background: url(/v=1708222105/files/user/_/lp/game_lp/arrow-red-left.png) center center/contain no-repeat;
}

.p-ticket__slider .next-arrow {
  background: url(/v=1696321680/files/user/_/lp/game_lp/arrow-next2.jpg) center center/contain no-repeat;
  right: 0;
}

.red .p-ticket__slider .next-arrow {
  background: url(/v=1708222105/files/user/_/lp/game_lp/arrow-red-right.png) center center/contain no-repeat;
  right: 0;
}

.p-ticket__sect {
  margin-top: 80px;
  margin-top: 5rem;
}

.p-ticket__units {
  margin-top: 40px;
  margin-top: 2.5rem;
  padding-bottom: 55px;
  padding-bottom: 3.4375rem;
}

.p-ticket__unit + .p-ticket__unit {
  margin-top: 50px;
  margin-top: 3.125rem;
}

.p-ticket__unit p img {
  margin-inline: auto;
}

.p-ticket__unit:nth-child(1) p img {
  width: 400px;
  width: 25rem;
}

.p-ticket__unit:nth-child(2) p img {
  width: 480px;
  width: 30rem;
}

.p-ticket__btn {
  margin-inline: auto;
  width: 600px;
  width: 37.5rem;
}

.p-time {
  background-color: #181b39;
  padding-bottom: 180px;
  padding-bottom: 11.25rem;
}

#bondsup-20250308 .p-time {
  background-color: #000;
}

#bondsup-20260307 .p-time {
  background-color: #000;
}

.p-time__title {
  margin-left: -30px;
  margin-left: -1.875rem;
  width: 750px;
  width: 46.875rem;
}

/* 列数はタブの数に自動追従する（2日開催／3日開催でクラスの付け替えが不要） */
.p-time__tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: 105px;
  height: 6.5625rem;
  margin-top: 48px;
  margin-top: 3rem;
}

/* 列数は自動になったため、このクラスは高さの指定だけを担う。
   既存ページとの互換のためクラス名はそのまま残している */
.p-time__tabs--three-clumn {
  height: 4rem;
}

.p-time__tabbtn {
  position: relative;
  /* <button> のブラウザ既定スタイルを打ち消す */
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* キーボード操作時のフォーカス表示（背景が黒なので白で囲む） */
.p-time__tabbtn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.p-time__tabbtn img {
  height: 100%;
  left: 0;
  top: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  width: 100%;
}

.p-time__tabbtn img:nth-child(1) {
  opacity: 0;
  position: relative;
}

.p-time__tabbtn img:nth-child(2) {
  opacity: 1;
  position: absolute;
}

.p-time__tabbtn.is-active img:nth-child(1) {
  opacity: 1;
}

.p-time__tabbtn.is-active img:nth-child(2) {
  opacity: 0;
}

/* JS実行前のちらつき対策。2枚目以降を隠す（タブの枚数に依存しない） */
.p-time__panels > :nth-child(n + 2) {
  display: none;
}

.l-game {
  background-color: #181b39;
}

.l-rollsec {
  height: 117px;
  background-color: #000;
  background-size: cover;
  animation-name: warning;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: reverse;
  @media (max-width: 750px) {
    height: calc(117px / 2);
    animation-duration: 12s;
    margin: 0em 0;
  }
}

.l-rollsec.rollsec-2026-27 {
  background-image: url(/v=1787317553/files/user/_/lp/game_lp/LP-ROLL-TEXT-2026-27.webp);
}

@keyframes warning {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 2027px 0;
    @media (max-width: 750px) {
      background-position: 1012px 0;
    }
  }
}

@media screen and (min-width: 768px) {
  .u-desktop {
    display: block;
  }

  .u-mobile {
    display: none;
  }

  a[href^="tel:"] {
    pointer-events: none;
  }

  a:hover {
    opacity: 0.8;
  }
}

@media (max-width: 750px) {
  html {
    font-size: 2.1333333333vw;
  }
  .safe-inner {
    width: auto !important;
  }
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  background-color: #b84c97;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeOut 1.5s 2.5s forwards;
}
.loading.red,
#bondsup-20250308 .loading {
  background-color: #000;
}

.loading.red,
#bondsup-20260307 .loading {
  background-color: #000;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.loading__logo {
  opacity: 0;
  animation: logo_fade 2s 0.5s forwards;
  width: 175px;
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  60% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
  }
}

/*1daysゲーム*/

.game-single .p-game__btn + .p-game__btn {
  display: none;
}
.game-single .p-game__btn {
  width: 50%;
  margin: auto;
}
.game-single .p-game__btns {
  display: block;
}

.yt-frame {
  display: block;
  margin: 0em auto 3em;
  @media (max-width: 750px) {
    width: 90%;
    height: auto;
    aspect-ratio: 1 / 0.6;
  }
}

/* 202608 - 追記 */

:root {
  --font-xs: calc(12 / 375 * 100vw);
  --font-sm: calc(12 / 375 * 100vw);
  --font-md: calc(13 / 375 * 100vw);
  --font-lg: calc(15 / 375 * 100vw);
}

@media (min-width: 751px) {
  :root {
    --font-xs: 12px;
    --font-sm: 20px;
    --font-md: 25px;
    --font-lg: 30px;
  }
}

/* colors */
.p-h3 {
  color: #fff;
  padding: 10px 0;
  background: #b84c97;
  font-size: var(--font-lg);
  text-align: center;
}

.bg-black {
  background: #000;
}

.bg-yellow {
  background: #ec8e26;
}

.bg-l-yellow {
  background: #f6f19e;
  color: #000;
}

.bg-l-yellow .p-sec__ttl-sub {
  color: #000;
}

.bg-white {
  background: #fff;
}

.bg-white .p-sec__ttl-sub {
  color: #b84c97;
}

/* p-sec */
.p-sec {
  padding-top: calc(24 / 375 * 100vw);
  padding-bottom: calc(24 / 375 * 100vw);
}

.p-sec.pb-sm {
  padding-bottom: calc(8 / 375 * 100vw);
}

@media (min-width: 751px) {
  .p-sec {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .p-sec.pb-sm {
    padding-bottom: calc(16 / 375 * 100vw);
  }
}

/* p-sec__ttl */
.p-sec__ttl {
  text-align: center;
  margin-bottom: calc(30 / 375 * 100vw);
}

.p-sec__ttl-main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(26 / 375 * 100vw);
  margin-bottom: 17px;
}

.p-sec__ttl-main img {
  height: 100%;
  width: auto;
}

.p-sec__ttl-sub {
  font-size: var(--font-md);
  color: #fff;
  font-weight: 500;
}

@media (min-width: 751px) {
  .p-sec__ttl {
    margin-bottom: 30px;
  }

  .p-sec__ttl-main {
    height: 52px;
    margin-bottom: 34px;
  }
}

/* p-txt */
.p-txt {
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: var(--font-sm);
  text-align: center;
  font-weight: 400;
  color: #000;
}

.p-txt.white {
  color: #fff;
}

.marker {
  background: #f1d5d4;
  line-height: 2;
}

.p-txt.mb-lg {
  margin-bottom: 30px;
}

@media (min-width: 751px) {
  .p-txt.mb-lg {
    margin-bottom: 60px;
  }
}

/* tile */
.p-tiles__2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.p-tiles__3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.p-tiles__4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (min-width: 751px) {
  .p-tiles__2 {
    gap: 20px;
  }

  .p-tiles__3 {
    gap: 20px;
  }

  .p-tiles__4 {
    gap: 20px;
  }
}

/* readmore */
/* 初期は高さを制限して途中で切っておき、
   「もっと見る」を押すとJSが中身の高さまで開いて高さの固定を外す。
   SPはカンプ750px幅を基準にvwで換算する（349 / 750 * 100 = 46.5333…） */
.readmore-wrap {
  height: calc(640 / 750 * 100vw);
  overflow: hidden;
}

/* 開いたあとフォーカスを移す先。領域自体には枠を出さない */
.readmore-wrap:focus {
  outline: none;
}

.p-btn-readmore {
  display: block;
  width: calc(180 / 375 * 100vw);
  margin-left: auto;
  margin-right: auto;
  margin-top: 3.2vw;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* キーボード操作時のフォーカス表示（背景が #EC8E26 なので黒で囲む） */
.p-btn-readmore:focus-visible {
  outline: 3px solid #000;
  outline-offset: 3px;
}

.p-btn-sm {
  width: calc(180 / 375 * 100vw);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 751px) {
  .readmore-wrap {
    height: 640px;
  }

  .p-btn-readmore {
    width: 340px;
    margin-top: 48px;
  }

  .p-btn-sm {
    width: 340px;
  }
}

/* players */
/* メインのスライダー。矢印は左右端に重ねる */
.p-players-slider-main {
  position: relative;
}

.p-btn-prev,
.p-btn-next {
  /* SPはカンプ750px幅を基準にvwで換算する（29 / 750 * 100 = 3.8666…） */
  width: calc(32 / 375 * 100vw);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}

.p-btn-prev {
  left: 0.8vw;
}

.p-btn-next {
  right: 0.8vw;
}

/* 見た目は変えずにタップ領域だけ広げる。
   SPでは矢印が15px前後になり指で押しにくいため、最低44px四方を確保する */
.p-btn-prev::before,
.p-btn-next::before {
  content: "";
  height: max(44px, 100%);
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: max(44px, 100%);
}

.p-btn-prev:focus-visible,
.p-btn-next:focus-visible,
.p-players-thumbs__card:focus-visible {
  outline: 3px solid #000;
  outline-offset: 3px;
}

/* サムネはスライドさせず、4列グリッドで全員並べる */
.p-tile__4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3333333333vw;
  margin-top: 3.2vw;
}

.p-players-thumbs__card {
  position: relative;
}

/* 選択中の枠。img の上に重ねるため疑似要素で描く */
.p-players-thumbs__card.is-active::after {
  border: 2px solid #b84c97;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

@media (min-width: 751px) {
  .p-btn-prev,
  .p-btn-next {
    width: 58px;
  }

  .p-btn-prev {
    left: 12px;
  }

  .p-btn-next {
    right: 12px;
  }

  .p-tile__4 {
    gap: 10px;
    margin-top: 24px;
  }

  .p-players-thumbs__card.is-active::after {
    border-width: 5px;
  }
}

/*#players */
#players {
  background: url(/v=1786953860/files/user/_/lp/game_lp/2026-27-GAME-LP-BG-2-2.jpg) center center/cover no-repeat;
}

@media (min-width: 751px) {
  #players {
    background: url(/v=1786953860/files/user/_/lp/game_lp/2026-27-GAME-LP-BG-2.jpg) center center/cover no-repeat;
    /* パララックス：スクロールしても背景を動かさない。
		   iOS Safari は background-attachment: fixed に未対応で、
		   固定されないどころか cover の計算が崩れて画像が巨大化するため、
		   SPには当てずPC（min-width: 751px）だけに指定している。
		   ※ background ショートハンドが attachment を scroll に戻すので、
		     必ずショートハンドより後に書く */
    background-attachment: fixed;
  }
}

.p-players-slider {
  width: 70%;
  max-width: 400px;
  margin: 10px auto;
}

/* ===== 2.5枚見せスライダー（パフォーマー） =====
   slick は使わない。slick は各スライドの width をインラインで書き込むため、
   余白を margin で足すと合計幅が溢れて 2.5枚が崩れ、padding で内側に取ると
   中身が内側に寄る（親のマイナスマージンで補正すると見切れ位置が外へずれる）。
   flex の gap なら「余白」と「見切れ位置」を別々に決められる。
   スワイプ・慣性・スナップはブラウザの標準機能。
   マウスのドラッグだけJS（enableDragScroll）が担当する。 */
.p-slider-2half {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  /* 操作はスワイプとドラッグなのでスクロールバーは出さない */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.p-slider-2half::-webkit-scrollbar {
  display: none;
}

/* ドラッグ中はスナップを切って自由に動かせるようにする。
   指（マウス）を離すとクラスが外れてスナップが復活し、最寄りに吸着する */
.p-slider-2half.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.p-slider-2half img {
  /* ドラッグ中に画像が引きずられたり選択されるのを防ぐ */
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 3枚目がちょうど半分覗く幅にする。
   可視幅 = 2.5枚 + gap2つ なので、1枚の幅は (100% - gap*2) / 2.5 */
.p-slider-2half__item {
  flex: 0 0 calc((100% - 10px * 2) / 2.5);
  scroll-snap-align: start;
}

.mt-sm {
  margin-top: calc(15 / 375 * 100vw);
}

.mt-md {
  margin-top: calc(20 / 375 * 100vw);
}

.mt-lg {
  margin-top: calc(30 / 375 * 100vw);
}

@media (min-width: 751px) {
  .p-slider-2half {
    gap: 20px;
  }

  .p-slider-2half__item {
    flex-basis: calc((100% - 20px * 2) / 2.5);
  }

  .mt-sm {
    margin-top: 30px;
  }

  .mt-md {
    margin-top: 40px;
  }

  .mt-lg {
    margin-top: 60px;
  }
}

.p-img iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-top: 20px;
}

.p-parking-cont {
  padding: 8px;
  background: #181c39;
}

@media (min-width: 751px) {
  .p-parking-cont {
    padding: 16px;
  }
}

.p-bottom,
.p-bottom-nav {
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 0;
}

.p-bottom {
  bottom: 0;
  height: 75px;
  display: flex;
  z-index: 98;
}

.p-bottom__item {
  flex: 0 0 auto;
  width: calc(100% / 3);
}

.p-bottom__item:hover {
  opacity: 1;
}

.p-bottom__item:hover img {
  opacity: 0.7;
}

.p-bottom__item:nth-child(1) {
  background: #b84c97;
}

.p-bottom__item:nth-child(2) {
  background: #000;
}

.p-bottom__item:nth-child(3) {
  background: #ed1c24;
}

.p-bottom__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s;
}

.p-bottom-nav {
  transform: translateY(110%);
  /* 閉じている間は visibility: hidden にして、画面外にあるリンクに
	   Tab キーでフォーカスが入らないようにする。
	   隠すのはスライドが終わってから（0.3s 遅らせる） */
  visibility: hidden;
  transition:
    transform 0.3s,
    visibility 0s 0.3s;
  z-index: 99;
  padding: calc(25 / 375 * 100vw);
  /* 上はヘッダーの下端まで。引く値は .p-header の height と揃えること。
	   dvh はアドレスバーの伸縮を含めた実際の高さ（非対応環境は vh を使う） */
  max-height: calc(100vh - 6.25rem);
  max-height: calc(100dvh - 6.25rem);
  /* 中身が入り切らないときは下のリストだけをスクロールさせる。
	   この要素に overflow を付けると、上に飛び出しているタブ（::before）が
	   切り取られてしまうため、スクロールはリスト側に持たせている */
  display: flex;
  flex-direction: column;
}

/* 引き出しを開けている間は背面のスクロールを止める（クラスはJSが付け外しする） */
html.is-nav-open,
html.is-nav-open body {
  overflow: hidden;
}

/* rgba() に16進は渡せない（Sassの rgba($color, $alpha) とは別物）。
   素のCSSでは10進のRGB値で書く。#b84c97 → 184, 76, 151 */
.p-bottom-nav.today {
  background: rgba(184, 76, 151, 0.5);
}

.p-bottom-nav.before {
  background: rgba(0, 0, 0, 0.5);
}

.p-bottom-nav.is-open {
  transform: translateY(0);
  visibility: visible;
  transition:
    transform 0.3s,
    visibility 0s;
}

/* 引き出しの上に飛び出す取っ手。
   位置とサイズは today / before 共通にして、画像だけ差し替える。
   （以前は today にしか content と position が無く、before 側が出ていなかった）
   ここをクリックすると閉じる。疑似要素にはイベントを付けられないので、
   JS側は「親自身がクリックされ、かつ本体の上端より上」で判定している。 */
.p-bottom-nav::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(200 / 375 * 100vw);
  height: calc(48 / 375 * 100vw);
  cursor: pointer;
}

.p-bottom-nav.today::before {
  background: url("/files/user/_/lp/game_lp/LP-2026-27-drawer-tab-a.svg") center center/contain no-repeat;
}

.p-bottom-nav.before::before {
  background: url("/files/user/_/lp/game_lp/LP-2026-27-drawer-tab-b.svg") center center/contain no-repeat;
}

@media (min-width: 751px) {
  .p-bottom {
    height: 100px;
  }

  .p-bottom-nav {
    padding: 50px;
  }

  .p-bottom-nav::before {
    width: 200px;
    height: 48px;
  }
}

.p-bottom-nav__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  /* 入り切らない分はここをスクロールする。
	   min-height: 0 が無いと flex アイテムが縮まずスクロールが出ない。
	   overscroll-behavior で端まで来たときに背面が動くのを防ぐ */
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 751px) {
  .p-bottom-nav__list {
    gap: 25px;
    grid-template-columns: repeat(4, 1fr);
  }
}

.p-btn-md {
  width: calc(170 / 375 * 100vw);
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.p-btn-lg {
  width: calc(300 / 375 * 100vw);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media (min-width: 751px) {
  .p-btn-md,
  .p-btn-lg {
    width: 100%;
  }
}

.p-btn-md img,
.p-btn-lg img {
  width: 100%;
  height: auto;
  max-width: unset;
}

.p-partner-ttl {
  font-size: var(--font-xs);
  color: #b84c97;
  font-weight: 500;
  position: relative;
  text-align: center;
  margin-bottom: 15px;
}

.p-partner-ttl__txt {
  background: #fff;
  padding: 0 1rem;
  z-index: 2;
  position: relative;
  display: inline-block;
}

.p-partner-ttl::before {
  content: "";
  position: absolute;
  display: block;
  top: calc(50% - 0.5px);
  left: 0;
  width: 100%;
  height: 1px;
  background: #b84c97;
  z-index: 1;
}

.akippa {
  position: relative;
}

.akippa-btn {
  position: absolute;
  width: calc(300 / 375 * 100vw);
  max-width: 600px;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(32 / 375 * 100vw);
}

@media (min-width: 751px) {
  .akippa-btn {
    bottom: 64px;
  }
}

/* 白背景のセクションでは未選択のドットの枠を濃紺にする。
   既定は border: 2px solid white で、背景が白いと見えなくなるため。
   選択中の色（既定は濃紺、ニューススライダーはピンク）には触らない。
   ここで .slick-active も指定すると詳細度が並んで後勝ちになり、
   .p-news__slider の指定を打ち消してしまう。 */
.bg-white .slider-dots li {
  border-color: #b84c97;
}

/* 次のホームゲーム：共通パーツ（printStaticcontents static_id=97）の一覧から
   ホームゲームだけを残す。
   B.LEAGUE 側の出力では HOME のタグにだけ .c-tag--primary が付くので、
   それを持たない試合（AWAY）を隠している。
       HOME → <span class="c-tag c-tag--round c-tag--primary c-bfont">HOME</span>
       AWAY → <span class="c-tag c-tag--round c-bfont">AWAY</span>

   JSで要素を消すのではなくCSSで隠しているのは、この一覧に
   B.LEAGUE 側のドラッグスクロールJSが効いているため。
   初期化後に要素を消すと横幅の計算がずれる。
   :has() 非対応の環境では絞り込みが効かず全試合が出るだけで、表示は壊れない。

   .p-next-home を付けた範囲だけに限定しているので、
   同じ共通パーツを他の場所で使っても影響しない。 */
.p-next-home #js-game-list > li:not(:has(.c-tag--primary)) {
  display: none;
}

/* ===== アコーディオン =====
   観戦ガイド（lp_kansenguide/style.css の .accordion-area-2024-25-kansen 系）から
   見た目を持ってきたもの。対応は次のとおり:
     .accordion-area-2024-25-kansen → .mod-accordions
     li                             → .mod-accordion
     .title                         → .mod-accordion__title
     .box                           → .mod-accordion__box
   幅（width / max-width / margin: 5% auto）は移植していない。
   このLPは safe-inner などラッパー側で幅を決めているため。
   開いている間はタイトルに close クラスが付き、＋が×に変わる（付け外しはJS）。 */
.mod-accordions {
  list-style: none;
}

.mod-accordion {
  margin: 10px 0;
  background: #181b39;
}

.mod-accordion section {
  border: none;
}

.mod-accordion__title {
  /* ＋アイコンの位置基準にするため relative */
  position: relative;
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: normal;
  padding: 3% 3% 3% 50px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  color: #fff;
}

/* 左端の＋アイコン。2本の線を重ねて作る */
.mod-accordion__title::before,
.mod-accordion__title::after {
  position: absolute;
  content: "";
  width: 15px;
  height: 2px;
  background-color: #fff;
  top: 48%;
  left: 15px;
  /* 移植元は疑似要素に transition が無く瞬間的に切り替わっていたので、
	   親の transition と揃うよう補っている */
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.mod-accordion__title::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

/* 開いている間は close が付き、＋が×になる */
.mod-accordion__title.close::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.mod-accordion__title.close::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* キーボード操作時のフォーカス表示（背景が濃紺なので白で囲む） */
.mod-accordion__title:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

/* 開いたときに現れる中身。初期は非表示 */
.mod-accordion__box {
  display: none;
  background: #fff;
  margin: 0;
  padding: 3%;
  border: 1px solid #b84c97;
  color: #181b39;
}

.mod-accordion__box p {
  margin: 0.5em 0;
  font-size: var(--font-sm);
  font-weight: 400;
}

/* 移植元は .box h1 だが、このLPの見出しは h4 */
.mod-accordion__box h4 {
  border-bottom: 1px solid #b84c97;
  color: #b84c97;
  font-size: var(--font-md);
}

.mod-accordion__box img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* 観戦ガイド流用 */
.kansen-guide-2024-25-speech-bubble04-1 {
  position: relative;
  margin: 0 auto 3%;
  padding: 2% 2%;
  background-color: #ffffff;
  border: none;
  outline: solid 2px #181b39;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  width: 85%;
  height: auto;
  gap: 2rem;
  color: #181b39;
}
.kansen-guide-2024-25-speech-bubble04-1 p {
  margin: 3% auto 0%;
}

.kansen-guide-2024-25-contents1-1 {
  width: 45%;
  margin: 0 1%;
}
.kansen-guide-2024-25-contents1-1 img {
  width: 100%;
  margin: auto;
}

.kansen-guide-2024-25-contents2 {
  width: 50%;
  margin: auto;
}

.kansen-guide-2024-25-contents2 p {
  text-align: justify;
}

@media screen and (max-width: 750px) {
  .kansen-guide-2024-25-contents1-1 {
    width: 90%;
    margin: 0 auto;
    height: 30%;
  }
  .kansen-guide-2024-25-contents1-1 img {
    margin: 5% auto 0;
  }
  .kansen-guide-2024-25-contents1-1 p {
    margin: 8% auto;
  }
  .kansen-guide-2024-25-contents1-1-V2 {
    width: 90%;
    margin: 0 auto;
    height: 30%;
  }
  .kansen-guide-2024-25-contents1-1-V2 img {
    margin: 5% auto 0;
  }
  .kansen-guide-2024-25-contents1-1-V2 p {
    margin: 8% auto;
  }
  .kansen-guide-2024-25-contents2 {
    width: 90%;
    margin: 5% auto;
  }
  .kansen-guide-2024-25-contents2 p {
    margin: 0% auto;
  }
  .kansen-guide-2024-25-speech-bubble04-1 {
    position: relative;
    margin: 1% auto 5%;
    padding: 1% 1% 5%;
    background-color: #ffffff;
    border: none;
    outline: solid 2px #181b39;
    border-radius: 20px;
    display: block;
    justify-content: space-between;
    width: 90%;
    height: auto;
    color: #181b39;
  }
  .kansen-guide-2024-25-speech-bubble04-1 p {
    margin: 3% 3% 0%;
  }
}

@media screen and (min-width: 751px) {
  .kansen-guide-2024-25-contents2.pc-after {
    order: 1;
  }
}

.slider {
  /*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 90%;
  margin: 0 auto;
}

.slider img {
  width: 100%; /*スライダー内の画像を横幅100%に*/
  height: auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
  margin: 0 10px;
}

.slider-BONDSKUN {
  /*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 50%;
  /*height: 100%;*/
  margin: 10% auto;
}

.slider-BONDSKUN img {
  width: 80%; /*スライダー内の画像を横幅100%に*/
  height: auto;
  padding: 1% 1%;
  margin: 10% auto;
  border: #fff solid 2px;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider-BONDSKUN .slick-slide {
  margin: 0 auto;
}

/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
  position: absolute; /*絶対配置にする*/
  z-index: 999;
  top: 42%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  /*outline: 5px solid #181b39;*/
  border-top: 10px solid #b84c97; /*矢印の色*/
  border-right: 10px solid #b84c97; /*矢印の色*/
  height: 25px;
  width: 25px;
}

.slick-prev {
  /*戻る矢印の位置と形状*/
  left: -3.5%;
  transform: rotate(-135deg);
}

.slick-next {
  /*次へ矢印の位置と形状*/
  right: -3.5%;
  transform: rotate(45deg);
}

.slick-prev02,
.slick-next02 {
  position: absolute; /*絶対配置にする*/
  z-index: 999;
  top: 45%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  /*outline: 5px solid #181b39;*/
  border-top: 2px solid #b84c97; /*矢印の色*/
  border-right: 2px solid #b84c97; /*矢印の色*/
  height: 15px;
  width: 15px;
}

.slick-prev02 {
  /*戻る矢印の位置と形状*/
  left: -2.5%;
  transform: rotate(-135deg);
}

.slick-next02 {
  /*次へ矢印の位置と形状*/
  right: -2.5%;
  transform: rotate(45deg);
}

@media (max-width: 750px) {
  .slider {
    /*横幅94%で左右に余白を持たせて中央寄せ*/
    width: 100%;
    height: 115%;
    margin: 0 auto;
  }

  .slider img {
    width: 95%;
    height: auto;
  }

  /*slickのJSで書かれるタグ内、スライド左右の余白調整*/

  .slider .slick-slide {
    margin: 0 10px;
  }

  .slider-BONDSKUN {
    /*横幅94%で左右に余白を持たせて中央寄せ*/
    width: auto;
    height: 60%;
    margin: 10% auto -75%;
  }

  .slider-BONDSKUN img {
    width: 80%; /*スライダー内の画像を横幅100%に*/
    height: auto;
    padding: 1% 1%;
    margin: 10% auto;
    border: #fff solid 2px;
  }

  /*slickのJSで書かれるタグ内、スライド左右の余白調整*/

  .slider-BONDSKUN .slick-slide {
    margin: 0 auto;
  }
}

.kg-ttl {
  text-align: center;
  max-width: 750px;
  margin: 0 auto;
  font-size: var(--font-lg);
  font-weight: 700;
}

.kg-ttl.text-ttl {
  margin: 30px auto;
}