@charset "UTF-8";
/* =====================================================================
   ARANMARE / SHIPMATE CLUB — 共通スタイル
   セマンティックHTML5 + プレーンCSS / BEM風 / CSS変数 / 外部CDN非依存
   ===================================================================== */

/* ---------- 1. トークン ---------- */
:root {
  /* color */
  --color-accent:#f97316;
  --color-accent-light:#fb923c;
  --color-accent-strong:#ea580c;
  --color-accent-50:#fff7ed;
  --color-ink:#0a2748;        /* 深い紺（元ラフの芯を反映） */
  --color-ink-2:#13335f;
  --color-muted:#5b6b85;
  --color-line:#e3e9f1;
  --color-surface:#fffdfb;
  --color-surface-2:#f5f8fc;
  --color-white:#ffffff;

  /* gradients */
  --grad-hero: radial-gradient(120% 130% at 88% 8%, #ffe6d2 0%, #fff3e8 38%, var(--color-surface) 72%);
  --grad-cta: linear-gradient(90deg, var(--color-accent-light), var(--color-accent));
  --grad-card-dark: linear-gradient(135deg, #0a2748 0%, #13335f 40%, #c2410c 100%);
  --grad-soft: linear-gradient(160deg, #fff3e8, #ffe2cc);

  /* radii */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:28px;
  --r-pill:999px;

  /* shadow */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.04);
  --shadow-md: 0 8px 24px -10px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.05);
  --shadow-lg: 0 26px 60px -24px rgba(15,23,42,.32);
  --shadow-accent: 0 14px 30px -12px rgba(234,88,12,.55);

  /* type */
  --font-jp: "BIZ UDPGothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  --font-en: "Helvetica Neue","Arial",var(--font-jp);

  /* layout */
  --shell-max:2400px;
  --gutter:clamp(16px, 4vw, 56px);
  --header-h:82px;
}

/* ---------- 2. リセット & ベース ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0;
  font-family:var(--font-jp);
  color:var(--color-ink);
  background:linear-gradient(180deg,#fffdfb 0%,#fff3ec 40%,#f5f8fc 100%);
  background-attachment:fixed;
  line-height:1.7;
  font-size:15px;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
ul,ol { margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p { margin:0; }
:focus-visible { outline:3px solid var(--color-accent); outline-offset:2px; border-radius:6px; }

/* ---------- 3. 汎用ユーティリティ ---------- */
.shell { width:min(92vw, 50vw + 600px, var(--shell-max)); margin-inline:auto; }
.eyebrow {
  font-family:var(--font-en);
  text-transform:uppercase;
  letter-spacing:.25em;
  font-size:12px;
  font-weight:700;
  color:var(--color-accent-strong);
}
.is-visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}



/* ---------- 4. ワードマーク ---------- */
.wordmark { display:inline-flex; flex-direction:column; line-height:1; }
.wordmark__name {
  font-family:var(--font-en);
  font-style:italic;
  font-weight:900;
  font-size:25px;
  letter-spacing:.005em;
  color:var(--color-accent-strong);
}
.wordmark__sub {
  font-family:var(--font-en);
  font-size:9.5px;
  letter-spacing:.14em;
  font-weight:900;
  color:var(--color-ink);
  margin-top:5px;
}
.wordmark--light .wordmark__name { color:var(--color-accent-light); }
.wordmark--light .wordmark__sub { color:rgba(255,255,255,.7); }

/* ---------- 5. ボタン ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-jp);
  font-weight:700;
  font-size:14px;
  line-height:1;
  padding:13px 22px;
  border-radius:var(--r-pill);
  border:1.5px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
  text-align:center;
}
.btn:focus-visible { outline:3px solid var(--color-ink); outline-offset:3px; }

.btn--primary { background:var(--grad-cta); color:#fff; box-shadow:var(--shadow-accent); }
.btn--primary:hover { transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(234,88,12,.6); }
.btn--primary:active { transform:translateY(0); filter:brightness(.96); }

.btn--outline { background:var(--color-white); color:var(--color-ink-2); border-color:var(--color-line); box-shadow:var(--shadow-sm); }
.btn--outline:hover { border-color:var(--color-accent); color:var(--color-accent-strong); transform:translateY(-2px); }
.btn--outline:active { transform:translateY(0); background:var(--color-accent-50); }

.btn--ghost-light { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.28); }
.btn--ghost-light:hover { background:rgba(255,255,255,.2); transform:translateY(-2px); }

.btn--lg { padding:16px 30px; font-size:15px; }
.btn--block { width:100%; }
.btn--sm { padding:10px 16px; font-size:13px; }

/* ---------- 6. バッジ ---------- */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:700; line-height:1;
  padding:6px 11px; border-radius:var(--r-pill);
  letter-spacing:.02em;
}
.badge--lock { background:linear-gradient(135deg,#1e293b,#334155); color:#fde7d4; box-shadow:var(--shadow-sm); }
.badge--free { background:var(--color-white); color:var(--color-ink-2); border:1.5px solid var(--color-line); }
.badge--new { background:var(--color-accent); color:#fff; }
.badge--cat { background:var(--color-ink); color:#fff; }
.badge--cat-soft { background:var(--color-accent-50); color:var(--color-accent-strong); border:1px solid #fed7aa; }

/* ---------- 7. セクション見出し ---------- */
.section { padding-block:clamp(28px,4vw,48px); }
.section__head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  margin-bottom:20px;
}
.section__title { font-size:clamp(20px,2.4vw,26px); font-weight:900; letter-spacing:.02em; }
.section__title .en { display:block; }
.section__lead { color:var(--color-muted); font-size:14px; margin-top:6px; max-width:62ch; }
.section__more {
  font-size:12.5px; font-weight:700; color:var(--color-muted);
  display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
  transition:color .18s ease, gap .18s ease;
}
.section__more::after { content:"›"; font-size:16px; line-height:1; }
.section__more:hover { color:var(--color-accent-strong); gap:9px; }

/* ---------- 8. パネル（白カード） ---------- */
.panel {
  background:var(--color-white);
  border:1px solid var(--color-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
}
.panel--pad { padding:clamp(18px,2.4vw,28px); }

/* ---------- 9. ヘッダー（共通パーツ） ---------- */
.header__logo{
    display:block;
    max-width:50%;
}
.site-header {
  position:sticky; top:0; z-index:60;
  background:rgba(255,253,251,.82);
  -webkit-backdrop-filter:none;
  border-bottom:1px solid rgba(226,232,240,.8);
}
.site-header__bar {
  display:flex; align-items:center; gap:24px;
  height:var(--header-h);
}
.site-header__brand { flex-shrink:1; }
.site-nav { margin-inline:auto; }
.site-nav__list { display:flex; align-items:center; gap:clamp(14px,1.8vw,30px); }
.site-nav__link {
  position:relative; font-size:14px; font-weight:800; color:var(--color-ink);
  padding:8px 2px; transition:color .18s ease;
}
.site-nav__link::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--color-accent); transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
}
.site-nav__link:hover { color:var(--color-accent-strong); }
.site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after { transform:scaleX(1); }
.site-nav__link[aria-current="page"] { color:var(--color-accent-strong); }
.site-header__actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.site-header__toggle { display:none; }
.site-nav__mobile-actions { display:none; }

/* モバイルメニュー */
.nav-toggle {
  margin-left:auto;
  display:none; width:46px; height:46px; border:1px solid var(--color-line);
  border-radius:12px; background:var(--color-white); position:relative; flex-shrink:0;

}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content:""; position:absolute; left:50%; width:20px; height:2px; border-radius:2px;
  background:var(--color-ink); transform:translateX(-50%); transition:transform .22s ease, opacity .18s ease;
}
.nav-toggle span { top:50%; margin-top:-1px; }
.nav-toggle span::before { top:-7px; }
.nav-toggle span::after { top:7px; }

/* ---------- 10. レイアウト：本文 + サイドバー ---------- */
.layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(20px,2.8vw,40px);
  align-items:start;
  padding-block:28px 56px;
  width:min(92vw, 50vw + 600px, var(--shell-max));
  margin-inline:auto;
}
.layout__main { min-width:0; display:flex; flex-direction:column; gap:clamp(22px,3vw,38px); }
.layout__aside {
  position:sticky; top:calc(var(--header-h) + 18px);
  display:flex; flex-direction:column; gap:18px;
}

/* Logged-out: layout template adds .layout--single, collapse to one column */
.layout--single { grid-template-columns:minmax(0,1fr); }

/* ---------- 11. サイドバー部品 ---------- */
.aside-card { padding:18px 18px 20px; }
.aside-card__head {
  display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:14px;
}
.aside-card__title { font-size:16px; font-weight:800; }

.welcome { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.welcome__avatar {
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background:var(--grad-soft); border:1px solid #fed7aa;
}
.welcome__hi { font-size:11px; color:var(--color-muted); }
.welcome__name { font-size:15px; font-weight:800; }

.rank-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.rank-chip {
  border:1px solid #fde2c6; background:linear-gradient(160deg,#fff8f1,#fff);
  border-radius:14px; padding:14px 8px; text-align:center;
  font-size:12.5px; font-weight:700; color:var(--color-ink-2);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rank-chip:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--color-accent-light); }

.mini-news { display:flex; flex-direction:column; gap:12px; }
.mini-news__item { display:flex; gap:10px; align-items:flex-start; }
.mini-news__item p { font-size:12.5px; color:var(--color-ink-2); }

.quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.quick-grid__link {
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:12.5px; font-weight:700; color:var(--color-ink-2);
  border:1px solid var(--color-line); border-radius:12px; padding:12px 8px;
  background:var(--color-white); transition:all .16s ease;
}
.quick-grid__link:hover { border-color:var(--color-accent); color:var(--color-accent-strong); background:var(--color-accent-50); transform:translateY(-2px); }

/* ---------- 12. 電子会員証 ---------- */
.member-card {
  border-radius:var(--r-md); padding:18px; color:#fff;
  background:var(--grad-card-dark); position:relative; overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.member-card::after {
  content:""; position:absolute; width:170px; height:170px; border-radius:50%;
  right:-50px; top:-60px; background:radial-gradient(circle,rgba(251,146,60,.55),transparent 68%);
  pointer-events:none;
}
.member-card::before {
  content:""; position:absolute; width:120px; height:120px; border-radius:50%;
  left:-40px; bottom:-50px; background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);
  pointer-events:none;
}
.member-card__brand { position:relative; }
.member-card__name { font-family:var(--font-en); font-style:italic; font-weight:800; font-size:18px; color:var(--color-accent-light); }
.member-card__org { font-size:8.5px; letter-spacing:.16em; color:rgba(255,255,255,.62); margin-top:2px; }
.member-card__type { font-size:18px; font-weight:800; letter-spacing:.04em; margin-top:12px; }
.member-card__season { font-size:9.5px; letter-spacing:.2em; color:var(--color-accent-light); margin-top:4px; }

.member-meta { display:block; margin-top:14px; }
.member-meta__grade {
  border:1.5px solid var(--color-accent-light); color:var(--color-accent-light);
  border-radius:12px; padding:8px 14px; font-weight:800; font-size:14px;
  white-space:normal; display:inline-block; margin-bottom:10px;
}
.member-meta__list { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:12px; align-content:start; }
.member-meta__list dt { color:var(--color-muted); }
.member-meta__list dd { margin:0; font-weight:700; }

/* ---------- 13. Hero ---------- */
.hero {
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  background:var(--grad-hero);
  border:1px solid #ffe1c7;
  padding:clamp(26px,3.2vw,44px);
}
.hero__grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(22px,3.4vw,48px); align-items:center; }
.hero__title { font-size:clamp(30px,4.4vw,52px); font-weight:900; line-height:1.18; letter-spacing:.01em; margin-top:14px; text-wrap:balance; }
.hero__title .accent { color:var(--color-accent-strong); }
.hero__lead { color:var(--color-ink-2); margin-top:18px; max-width:52ch; font-size:15.5px; }
.hero__cta {flex-wrap:wrap; gap:12px; margin-top:26px; }
.hero__visual {
  border-radius:var(--r-lg); min-height:clamp(220px,26vw,300px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:var(--color-accent-strong);
}
.hero__cta .new__register{
    width:45%;
    min-width:300px;
}

/* 画像プレースホルダ（共通） */
.ph {
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(249,115,22,.07) 0 12px, rgba(249,115,22,.13) 12px 24px),
    linear-gradient(160deg,#fff3e8,#ffe0c8);
  border:1px dashed #f6b27a;
  color:var(--color-accent-strong);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:4px;
}
.ph__label { font-size:14px; font-weight:800; }
.ph__note { font-family:var(--font-en); font-size:10.5px; letter-spacing:.08em; color:#b45309; opacity:.85; }
.ph__icon { width:34px; height:34px; opacity:.55; }

/* ---------- 14. NEXT GAME ---------- */
.nextgame {
  background:linear-gradient(120deg,#0a2748,#13335f 62%,#7c2d12);
  color:#fff; border-radius:var(--r-lg); padding:20px clamp(20px,2.6vw,30px);
  display:flex; align-items:center; gap:clamp(16px,2.4vw,30px); flex-wrap:wrap;
  position:relative; overflow:hidden; box-shadow:var(--shadow-lg);
}
.nextgame__label { font-size:13px; font-weight:700; color:rgba(255,255,255,.8); }
.nextgame__date { font-size:clamp(28px,3.4vw,40px); font-weight:800; line-height:1; }
.nextgame__date .dow { font-size:.42em; vertical-align:.5em; background:var(--color-accent); padding:3px 6px; border-radius:6px; margin-left:6px; }
.nextgame__time { font-size:11px; letter-spacing:.12em; color:rgba(255,255,255,.7); margin-top:6px; }
.nextgame__vs { font-family:var(--font-en); font-weight:800; color:var(--color-accent-light); font-size:14px; }
.nextgame__opp { font-weight:700; font-size:15px; }
.nextgame__venue { font-size:12px; color:rgba(255,255,255,.72); margin-top:2px; }
.nextgame__cta { margin-left:auto; }

/* ---------- 15. 2カラム（お知らせ + 限定） ---------- */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,22px); }

.newslist { display:flex; flex-direction:column; }
.newslist__item {
  display:flex; align-items:center; gap:12px; padding:11px 2px;
  border-bottom:1px solid var(--color-line); transition:background .15s ease;
}
.newslist__item:last-child { border-bottom:0; }
.newslist__item:hover { background:var(--color-accent-50); }
.newslist__date { font-family:var(--font-en); font-size:12px; color:var(--color-muted); flex-shrink:0; }
.newslist__title { font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tag {
  font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:6px; flex-shrink:0;
  background:var(--color-ink); color:#fff; letter-spacing:.02em;
}
.tag--accent { background:var(--color-accent); }
.tag--soft { background:var(--color-accent-50); color:var(--color-accent-strong); border:1px solid #fed7aa; }

.limited-list { display:flex; flex-direction:column; gap:2px; margin-bottom:16px; }
.limited-list__item { display:flex; gap:12px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--color-line); }
.limited-list__item:last-child { border-bottom:0; }
.limited-list__ico {
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  background:var(--color-accent-50); border:1px solid #fed7aa;
  display:flex; align-items:center; justify-content:center; color:var(--color-accent-strong);
}
.limited-list__name { font-size:14px; font-weight:700; }
.limited-list__desc { font-size:12px; color:var(--color-muted); }

/* ---------- 16. Instagram グリッド ---------- */
.iggrid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,16px); }
.igtile {
  position:relative; aspect-ratio:1/1; border-radius:var(--r-md); overflow:hidden;
  background:var(--grad-soft); border:1px solid #fde2c6;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:13px; font-weight:700; color:var(--color-ink-2);
  transition:transform .2s ease, box-shadow .2s ease;
}
.igtile:hover { transform:translateY(-4px) scale(1.01); box-shadow:var(--shadow-md); }
.igtile::after {
  content:""; position:absolute; top:10px; right:10px; width:16px; height:16px;
  border:2px solid rgba(234,88,12,.5); border-radius:5px;
}
.igtile::before {
  content:""; position:absolute; top:13px; right:13px; width:6px; height:6px;
  border:1.5px solid rgba(234,88,12,.6); border-radius:50%;
}

/* Instagram embed.js 上書き */
.ig-embed-grid { align-items:start; }
.ig-embed-grid .instagram-media {
  min-width:unset !important;
  width:100% !important;
  margin:0 !important;
}

/* ---------- 17. 選手カード ---------- */
.players { display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.4vw,16px); }
.player {
  display:flex; flex-direction:column; gap:8px;
}
.player__photo {
  aspect-ratio:3/4; border-radius:var(--r-md); overflow:hidden; position:relative;
}
.player__photo .ph { width:100%; height:100%; }
.player__badge { position:absolute; top:8px; left:8px; }
.player__no { font-family:var(--font-en); font-weight:800; font-size:14px; color:var(--color-accent-strong); }
.player__name { font-size:14px; font-weight:800; }
.player__pos { font-family:var(--font-en); font-size:11px; letter-spacing:.1em; color:var(--color-muted); }
.player:hover .player__photo { box-shadow:var(--shadow-md); }
.player__photo { transition:box-shadow .2s ease, transform .2s ease; }
.player:hover .player__photo { transform:translateY(-3px); }

/* ---------- 18. FAQ アコーディオン ---------- */
.faq__page__another .faq__item{
    margin-top:10px;
    
}
.faq__page__another .page-hero__eyebrow{
    color: var(--color-accent-strong);
}

.faq__page__another .faq-count{
    margin-top:3em;
    
}
.faq__page__another #faq-visible-count{
    color: var(--color-accent-strong);
    font-weight: 800;
    margin-top: 3em;
}
.faq__page__another .faq {
    display:block !important;
}
.faq { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.faq__item { border:1px solid var(--color-line); border-radius:14px; background:var(--color-white); overflow:hidden; }
.faq__q {
  width:100%; display:flex; align-items:flex-start; gap:10px; text-align:left;
  padding:16px 18px; background:none; border:0; font-size:14px; font-weight:700; color:var(--color-ink);
}
.faq__q::before {
  content:"›"; color:var(--color-accent-strong); font-weight:800; font-size:18px; line-height:1.2;
  transition:transform .22s ease; flex-shrink:0;
}
.faq__item[open] .faq__q::before { transform:rotate(90deg); }
.faq__a { padding:0 18px 16px 38px; font-size:13px; color:var(--color-muted); }
/* details/summary version */
details.faq__item > summary { list-style:none; }
details.faq__item > summary::-webkit-details-marker { display:none; }

/* ---------- 19. 注意事項 6カード ---------- */
.notes { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.note { background:var(--color-accent-50); border:1px solid #fde4cd; border-radius:var(--r-md); padding:18px; }
.note__num {
  width:26px; height:26px; border-radius:50%; background:var(--color-accent);
  color:#fff; font-family:var(--font-en); font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center; margin-bottom:10px;
}
.note__title { font-size:14px; font-weight:800; margin-bottom:5px; }
.note__desc { font-size:12.5px; color:var(--color-muted); }

/* ---------- 20. プランカード ---------- */
.plans-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,18px); }
.plan {
  border:1px solid var(--color-line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--color-white); display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease;
}
.plan:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.plan__head { padding:14px 18px; color:#fff; font-weight:800; font-size:16px; letter-spacing:.04em; }
.plan--royal .plan__head    { background: #2a2a51; }
.plan--platinum .plan__head { background: #2d2d2d; }
.plan--gold .plan__head     { background: #d4820a; }
.plan--silver .plan__head   { background: #8096a8; }
.plan--junior .plan__head   { background: #4992c5 }
.plan--line .plan__head     { background: #27a844; }
.plan__body { padding:18px; display:flex; flex-direction:column; gap:14px; flex:1; }
.plan__price { font-size:18px; font-weight:800; }
.plan__price .tax { font-size:11px; color:var(--color-muted); font-weight:600; }
.plan__list { display:flex; flex-direction:column; gap:8px; }
.plan__list li { font-size:13px; display:flex; gap:8px; align-items:flex-start; }
.plan__list li::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--color-accent); margin-top:8px; flex-shrink:0; }
.plan__etc {
  font-size: 13px;
  color: inherit;
}
.plan__more { margin-top:auto; text-align:center; font-size:13px; font-weight:700; color:var(--color-accent-strong); padding-top:6px; }
.plan__ribbon {
  display:inline-flex; align-self:flex-start; font-size:11px; font-weight:800; color:#fff;
  background:var(--color-accent); padding:4px 12px; border-radius:var(--r-pill); letter-spacing:.05em;
}
.plan__badge {
  display: inline-flex;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: #1d4ed8;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  letter-spacing: .05em;
}

.plan__free {
  color: var(--color-accent-strong);
}

/* ---------- 21. CTAバンド ---------- */
.cta-band {
  background:var(--grad-soft); border:1px solid #ffd9b8; border-radius:var(--r-xl);
  padding:clamp(28px,4vw,48px); text-align:center;
}
.cta-band__title { font-size:clamp(22px,2.8vw,30px); font-weight:900; }
.cta-band__lead { color:var(--color-ink-2); margin-top:10px; }
.cta-band__actions { display:flex; gap:12px; justify-content:center; margin-top:24px; flex-wrap:wrap; }
.cta-band .new__register{
    width:24%;
    min-width:300px;
}
/* ---------- 22. フッター（共通パーツ） ---------- */
.site-footer { background:var(--color-ink); color:#cbd5e1; margin-top:40px; }
.site-footer__grid {
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:32px;
  padding-block:clamp(36px,5vw,56px);
}
.site-footer img{
    max-width:60%;
}
.site-footer__lead { font-size:13px; color:#94a3b8; margin-top:14px; max-width:34ch; }
.footer-col__title { font-size:12px; font-weight:700; color:var(--color-accent-light); letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px; font-family:var(--font-en); }
.footer-col__link { display:block; font-size:13.5px; padding:5px 0; color:var(--color-accent-light); transition:color .16s ease; }
.footer-col__link:hover { color:var(--color-accent-light); }
.site-footer__bottom { border-top:1px solid rgba(255,255,255,.1); padding-block:18px; font-size:11.5px; color:#64748b; text-align:right; }

/* =====================================================================
   レスポンシブ
   ===================================================================== */
@media (max-width:1080px) {
  .layout { grid-template-columns:1fr; }
  .layout__aside { position:static; flex-direction:row; flex-wrap:wrap; }
  .layout__aside > * { flex:1 1 280px; }
  .players { grid-template-columns:repeat(3,1fr); }
}

/* ナビ：タブレット以下はハンバーガーに切替（〜1023px） */
.site-nav__mobile-actions { display:none; }
@media (max-width:1023px) {
  .site-nav, .site-header__actions { display:none; }
  .nav-toggle { display:block; }
.site-nav.is-open {
  display:block;
  position:fixed;
  inset:var(--header-h) 0 0 0;
  z-index:55;
  background-color:#fffdfb;
  padding:24px var(--gutter);
  overflow:visible; /* auto → visible に変更 */
  margin:0;
  isolation:isolate; /* ← これを追加 */
}
  .site-nav.is-open .site-nav__list { display: flex; flex-direction:column; align-items:stretch; gap:20px; }
  .site-nav.is-open .site-nav__link { padding:16px 4px; border-bottom:1px solid var(--color-line); font-size:16px; }
  .site-nav.is-open .site-nav__mobile-actions { display:flex; flex-direction:column; gap:12px; margin-top:24px; }
  body.nav-open { overflow:hidden; }
}

@media (max-width:767px) {
  .layout__aside { flex-direction:column; }
  .layout__aside > * { flex:auto; }
  .hero__grid { grid-template-columns:1fr; }
  .nextgame { flex-direction:column; align-items:flex-start; gap:14px; }
  .nextgame__cta { margin-left:0; width:100%; }
  .nextgame__cta .btn { width:100%; }
  .duo { grid-template-columns:1fr; }
  .iggrid { grid-template-columns:repeat(2,1fr); }
  .players { grid-template-columns:repeat(2,1fr); }
  .faq { grid-template-columns:1fr; }
  .notes { grid-template-columns:1fr; }
  .plans-3 { grid-template-columns:1fr; }
  .member-meta { flex-direction:column; }
  .site-footer__grid { grid-template-columns:1fr; gap:24px; }
  .cta-band__actions .btn { width:100%; }
  /* 比較表は横スクロール */
  .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =====================================================================
   入会・会員プラン / マイページ / NEWS 用 追加スタイル
   ===================================================================== */

/* ページヘッダー（下層共通） */
.page-hero {
  background:var(--grad-hero); border-bottom:1px solid #ffe1c7;
  padding-block:clamp(30px,4vw,52px);
}
.page-hero__title { font-size:clamp(26px,3.4vw,40px); font-weight:900; margin-top:10px; }
.page-hero__lead { color:var(--color-ink-2); margin-top:12px; max-width:60ch; }
.breadcrumb { display:flex; gap:8px; font-size:12px; color:var(--color-muted); flex-wrap:wrap; }
.breadcrumb a:hover { color:var(--color-accent-strong); }
.breadcrumb__sep { color:var(--color-line); }

/* 入会の流れ（ステップ） */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.step { background:var(--color-white); border:1px solid var(--color-line); border-radius:var(--r-md); padding:20px; position:relative; }
.step__num {
  font-family:var(--font-en); font-weight:800; font-size:30px; color:var(--color-accent-light); line-height:1;
}
.step__title { font-size:15px; font-weight:800; margin-top:10px; }
.step__desc { font-size:12.5px; color:var(--color-muted); margin-top:6px; }
.step:not(:last-child)::after {
  content:"›"; position:absolute; right:-11px; top:50%; transform:translateY(-50%);
  color:var(--color-accent-light); font-weight:800; font-size:22px; z-index:2;
}
@media (max-width:767px){ .steps{ grid-template-columns:1fr 1fr; } .step:nth-child(2n)::after{display:none;} }

/* 比較表 */

.compare .registration-closed-badge{
    display:inline-block; 
    margin-top:5px; 
    background:#d64545; color:#fff; 
    font-size:11px; 
    padding:2px 8px; 
    border-radius:10px;
}

.compare { width:100%; border-collapse:separate; border-spacing:0; min-width:760px; font-size:13px; }
.compare th, .compare td { padding:12px 12px; text-align:center; border-bottom:1px solid var(--color-line); }
.compare thead th {
  background:var(--color-ink); color:#fff; font-size:13px; font-weight:800;
  border-bottom:0;
}
.compare thead th:first-child { background:var(--color-ink-2); }
.compare tbody th {
  text-align:left; font-weight:700; color:var(--color-ink-2); background:var(--color-surface);
  position:sticky; left:0; z-index:2; min-width:190px; border-right:1px solid var(--color-line);
}
.compare tbody tr:nth-child(even) td, .compare tbody tr:nth-child(even) th { background:var(--color-surface-2); }
.compare tbody tr:hover td { background:var(--color-accent-50); }
.compare .yes { color:var(--color-accent-strong); font-weight:800; font-size:16px; }
.compare .no { color:#cbd5e1; }
.compare .stage { font-weight:700; color:var(--color-ink-2); font-size:12px; }
.compare .price-row td, .compare .price-row th { font-weight:800; font-size:14px; background:var(--color-accent-50)!important; }

/* 補足情報エリア */
.info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.info-card { background:var(--color-white); border:1px solid var(--color-line); border-radius:var(--r-md); padding:20px; }
.info-card__title { font-size:14px; font-weight:800; margin-bottom:8px; display:flex; gap:8px; align-items:center; }
.info-card__body { font-size:13px; color:var(--color-muted); }
.info-card__body li { display:flex; gap:8px; padding:3px 0; }
.info-card__body li::before { content:"•"; color:var(--color-accent); }
@media (max-width:767px){ .info-grid{ grid-template-columns:1fr; } }

/* マイページ */
.mypage-grid { display:grid; grid-template-columns:380px minmax(0,1fr); gap:clamp(20px,2.6vw,34px); align-items:start; padding-block:32px 56px; }
.member-card--lg { padding:26px; border-radius:var(--r-lg); }
.member-card--lg .member-card__type { font-size:24px; }
.member-card--lg .member-card__no { font-family:var(--font-en); letter-spacing:.1em; }
.bigcard-meta { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; position:relative; }
.bigcard-meta dt { font-size:10px; letter-spacing:.12em; color:rgba(255,255,255,.6); text-transform:uppercase; font-family:var(--font-en); }
.bigcard-meta dd { margin:2px 0 0; font-size:18px; font-weight:800; }
.status-row { grid-template-columns:repeat(3,1fr); gap:14px; }
.status-card { background:var(--color-white); border:1px solid var(--color-line); border-radius:var(--r-md); padding:18px; box-shadow:var(--shadow-sm); }
.status-card__label { font-size:11px; letter-spacing:.1em; color:var(--color-muted); font-family:var(--font-en); text-transform:uppercase; }
.status-card__value { font-size:20px; font-weight:800; margin-top:6px; }
.status-card__sub { font-size:12px; color:var(--color-muted); margin-top:4px; }
.mypage-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.mypage-actions .btn {
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  padding:20px 34px;
  font-size:17px;
  white-space:normal;
  box-sizing:border-box;
}
.reco { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.reco__card { border:1px solid var(--color-line); border-radius:var(--r-md); overflow:hidden; background:var(--color-white); transition:transform .2s ease, box-shadow .2s ease; }
.reco__card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.reco__thumb { aspect-ratio:16/10; }
.reco__thumb .ph { width:100%; height:100%; border:0; border-radius:0; }
.reco__body { padding:14px; }
.reco__badges { display:flex; gap:6px; margin-bottom:8px; }
.reco__title { font-size:14px; font-weight:700; }
.submenu { display:flex; gap:10px; flex-wrap:wrap; }
.submenu a { font-size:13px; font-weight:700; color:var(--color-ink-2); border:1px solid var(--color-line); border-radius:var(--r-pill); padding:10px 18px; background:var(--color-white); transition:all .16s ease; }
.submenu a:hover { border-color:var(--color-accent); color:var(--color-accent-strong); }
@media (max-width:900px){ .mypage-grid{ grid-template-columns:1fr; } .status-row,.reco{ grid-template-columns:1fr; } }

/* NEWS 一覧 / 詳細 */
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.chip {
  font-size:13px; font-weight:700; color:var(--color-ink-2); border:1px solid var(--color-line);
  background:var(--color-white); border-radius:var(--r-pill); padding:9px 18px; transition:all .16s ease;
}
.chip:hover { border-color:var(--color-accent); color:var(--color-accent-strong); }
.chip[aria-current="true"], .chip.is-active { background:var(--color-ink); color:#fff; border-color:var(--color-ink); }

.cardgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); }
.ncard { display:flex; flex-direction:column; background:var(--color-white); border:1px solid var(--color-line); border-radius:var(--r-md); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; }
.ncard:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.ncard__thumb { aspect-ratio:16/10; position:relative; }
.ncard__thumb.ph { background:white; border:none; }
.ncard__badge { position:absolute; top:10px; left:10px; }
.ncard__body { padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; min-height: 0; /* ← これだけ追加 */}
.ncard__meta { display:flex; gap:10px; align-items:center; font-size:11.5px; color:var(--color-muted); }
.ncard__title { font-size:15px; font-weight:800; line-height:1.5; }
.ncard__lead { font-size:12.5px; color:var(--color-muted); }
@media (max-width:900px){ .cardgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .cardgrid{ grid-template-columns:1fr; } }

/* ページネーション */
.pagination { display:flex; gap:6px; justify-content:center; align-items:center; margin-top:36px; }
.pagination a, .pagination span {
  min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--color-line); border-radius:12px; font-weight:700; font-size:14px;
  background:var(--color-white); color:var(--color-ink-2); transition:all .16s ease;
}
.pagination a:hover { border-color:var(--color-accent); color:var(--color-accent-strong); }
.pagination .is-current { background:var(--color-ink); color:#fff; border-color:var(--color-ink); }

/* 記事詳細 */
.article { max-width:760px; margin-inline:auto; }
.article__hero {
  width: 100%;
  max-width: 480px;
  height: auto;
  aspect-ratio: unset; /* ← これで縦横比の固定を解除 */
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-block: 22px;
}
.article__hero.ph { background:none; border:none; }
.article__meta { display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--color-muted); }
.article__title { font-size:clamp(24px,3vw,34px); font-weight:800; line-height:1.4; margin-top:12px; }
.rt { font-size:15px; line-height:1.95; color:var(--color-ink-2); }
.rt h2 { font-size:21px; font-weight:800; margin:32px 0 12px; padding-left:14px; border-left:5px solid var(--color-accent); }
.rt h3 { font-size:17px; font-weight:800; margin:24px 0 8px; }
.rt p { margin:0 0 18px; }
.rt figure { margin:24px 0; }
.rt figure .ph { aspect-ratio:16/9; border-radius:var(--r-md); }
.rt figcaption { font-size:12px; color:var(--color-muted); margin-top:8px; text-align:center; }

/* 続きは会員限定（ぼかし + ロック） */
.paywall { position:relative; margin-top:8px; }
.paywall__fade {
  position:relative; max-height:170px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 30%,transparent 100%);
  filter:blur(.4px);
}
.paywall__gate {
  margin-top:-40px; position:relative; z-index:2;
  background:linear-gradient(180deg,rgba(255,253,251,0),var(--color-surface) 36%);
  text-align:center; padding:48px 20px 8px;
}
.paywall__lock {
  width:54px; height:54px; border-radius:50%; margin:0 auto 14px;
  background:var(--grad-card-dark); color:#fde7d4; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg);
}
.paywall__title { font-size:18px; font-weight:800; }
.paywall__lead { font-size:13px; color:var(--color-muted); margin:8px auto 18px; max-width:42ch; }

/* 関連記事 */
.related { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:767px){ .related{ grid-template-columns:1fr; } }

/* =====================================================================
   選手一覧 / 選手個別 / Instagram埋め込み 追加スタイル
   ===================================================================== */

/* 選手一覧グリッド（トップの .players を一覧用に拡張） */
.roster { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,22px); }
@media (max-width:900px){ .roster{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .roster{ grid-template-columns:repeat(2,1fr); } }

/* ポジション見出し帯 */
.pos-head { display:flex; align-items:center; gap:12px; margin:8px 0 18px; }
.pos-head__en { font-family:var(--font-en); font-weight:900; font-size:13px; letter-spacing:.18em; color:var(--color-accent-strong); text-transform:uppercase; }
.pos-head__ja { font-size:15px; font-weight:800; }
.pos-head__line { flex:1; height:1px; background:var(--color-line); }

/* 選手個別：プロフィールヒーロー */
.player-hero { display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:clamp(22px,3vw,44px); align-items:start; }
.player-hero__photo { position:relative; aspect-ratio:3/4; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); }
.player-hero__photo .ph { width:100%; height:100%; border-radius:0; border:0; }
.player-hero__no {
  position:absolute; left:18px; top:14px; z-index:2;
  font-family:var(--font-en); font-weight:900; font-size:clamp(48px,7vw,84px); line-height:.8;
  color:rgba(255,255,255,.92); text-shadow:0 4px 18px rgba(10,39,72,.5);
}
.player-hero__body { padding-top:8px; }
.player-hero__pos { font-family:var(--font-en); font-weight:900; letter-spacing:.16em; color:var(--color-accent-strong); font-size:14px; }
.player-hero__name { font-size:clamp(30px,4vw,46px); font-weight:900; line-height:1.1; margin-top:6px; }
.player-hero__kana { font-family:var(--font-en); letter-spacing:.14em; color:var(--color-muted); font-size:13px; margin-top:8px; text-transform:uppercase; }
.player-hero__quote { font-size:16px; font-weight:700; color:var(--color-ink-2); margin-top:18px; padding-left:14px; border-left:4px solid var(--color-accent); line-height:1.6; }

/* スペック表（縦並びのデータ） */
.spec { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--color-line); border:1px solid var(--color-line); border-radius:var(--r-md); overflow:hidden; margin-top:22px; }
.spec__item { background:var(--color-white); padding:14px 16px; }
.spec__dt { font-size:11px; letter-spacing:.1em; color:var(--color-muted); font-family:var(--font-en); text-transform:uppercase; }
.spec__dd { font-size:18px; font-weight:800; margin-top:4px; }
.spec__dd small { font-size:12px; font-weight:600; color:var(--color-muted); }

/* SNSリンク */
.sns-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.sns-link { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; padding:10px 16px; border-radius:var(--r-pill); border:1.5px solid var(--color-line); background:var(--color-white); transition:all .16s ease; }
.sns-link:hover { border-color:var(--color-accent); color:var(--color-accent-strong); transform:translateY(-2px); }
.sns-link__ico { width:18px; height:18px; }

/* 成績テーブル */
.stat-table { width:100%; border-collapse:separate; border-spacing:0; font-size:14px; min-width:560px; }
.stat-table th, .stat-table td { padding:12px 14px; text-align:center; border-bottom:1px solid var(--color-line); }
.stat-table thead th { background:var(--color-ink); color:#fff; font-weight:800; font-size:13px; }
.stat-table thead th:first-child, .stat-table tbody th { text-align:left; }
.stat-table tbody th { font-weight:700; color:var(--color-ink-2); background:var(--color-surface); }
.stat-table tbody tr:nth-child(even) td, .stat-table tbody tr:nth-child(even) th { background:var(--color-surface-2); }
.stat-table .hl { color:var(--color-accent-strong); font-weight:800; }

@media (max-width:767px){
  .player-hero { grid-template-columns:1fr; }
  .player-hero__photo { max-width:340px; margin-inline:auto; }
  .spec { grid-template-columns:1fr 1fr; }
}

/* Instagram 埋め込み欄 */
.ig-embed-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,16px); }
@media (max-width:900px){ .ig-embed-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .ig-embed-grid{ grid-template-columns:1fr; } }
/* 公式埋め込み（embed.js）を流し込む枠。CMSでは各セル内に blockquote.instagram-media を出力 */
.ig-embed {
  position:relative; aspect-ratio:1/1; border-radius:var(--r-md); overflow:hidden;
  background:var(--grad-soft); border:1px solid #fde2c6;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px;
}
.ig-embed__chrome { position:absolute; top:0; left:0; right:0; height:38px; background:rgba(255,255,255,.7); display:flex; align-items:center; gap:8px; padding:0 12px; border-bottom:1px solid #fde2c6; }
.ig-embed__avatar { width:22px; height:22px; border-radius:50%; background:var(--grad-cta); flex-shrink:0; }
.ig-embed__handle { font-size:11px; font-weight:800; color:var(--color-ink); }
.ig-embed__note { font-family:var(--font-en); font-size:10px; letter-spacing:.06em; color:#b45309; }
.ig-embed__label { font-size:13px; font-weight:800; color:var(--color-ink-2); margin-top:18px; }
.ig-embed__bar { position:absolute; bottom:0; left:0; right:0; height:34px; background:rgba(255,255,255,.7); border-top:1px solid #fde2c6; display:flex; align-items:center; gap:10px; padding:0 12px; }
.ig-embed__bar span { width:16px; height:16px; border:2px solid rgba(234,88,12,.55); border-radius:4px; }
.ig-embed__bar span:nth-child(2){ border-radius:50%; }

/* =====================================================================
   試合日程・結果 / 試合詳細 追加スタイル
   ===================================================================== */

/* 月別タブ・絞り込み（chip流用） */
.games-toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.games-toolbar__group { display:flex; gap:8px; flex-wrap:wrap; }

/* 日程リスト */
.schedule { display:flex; flex-direction:column; gap:10px; }
.game-row {
  display:grid;
  grid-template-columns:96px 78px minmax(0,1fr) 150px;
  align-items:center; gap:18px;
  background:var(--color-white); border:1px solid var(--color-line); border-radius:var(--r-md);
  padding:16px 20px; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.game-row:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--color-accent-light); }
.game-row--next { border-color:var(--color-accent); box-shadow:var(--shadow-accent); background:linear-gradient(160deg,#fff8f2,#fff); }
.game-row__date { text-align:center; }
.game-row__md { font-family:var(--font-en); font-weight:900; font-size:22px; line-height:1; color:var(--color-ink); }
.game-row__md .dow { font-size:11px; margin-left:3px; color:var(--color-accent-strong); }
.game-row__time { font-family:var(--font-en); font-size:11px; color:var(--color-muted); margin-top:4px; letter-spacing:.04em; }
.ha { display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; padding:6px 0; width:64px; border-radius:var(--r-pill); }
.ha--home { background:var(--color-ink); color:#fff; }
.ha--away { background:var(--color-white); color:var(--color-ink-2); border:1.5px solid var(--color-line); }
.game-row__match { min-width:0; }
.game-row__vs { font-family:var(--font-en); font-size:11px; font-weight:800; color:var(--color-accent-strong); letter-spacing:.1em; }
.game-row__opp { font-size:16px; font-weight:800; line-height:1.3; }
.game-row__venue { font-size:12px; color:var(--color-muted); margin-top:2px; }
.game-row__result { text-align:right; }
.game-row__score { font-family:var(--font-en); font-weight:900; font-size:20px; }
.wl { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:7px; font-family:var(--font-en); font-weight:900; font-size:13px; color:#fff; margin-right:8px; vertical-align:-3px; }
.wl--w { background:#16a34a; }
.wl--l { background:#94a3b8; }
.game-row__cta { display:inline-flex; }
@media (max-width:767px){
  .game-row { grid-template-columns:64px 1fr; grid-template-areas:"date match" "ha result"; gap:10px 14px; }
  .game-row__date{ grid-area:date; } .game-row__match{ grid-area:match; }
  .game-row .ha{ grid-area:ha; } .game-row__result{ grid-area:result; align-self:center; }
  .game-row__cta .btn{ width:100%; }
}

/* スコアボード（試合詳細ヒーロー） */
.scoreboard {
  background:linear-gradient(120deg,#0a2748,#13335f 62%,#7c2d12); color:#fff;
  border-radius:var(--r-xl); padding:clamp(24px,3vw,40px); box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden;
}
.scoreboard__status { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.08em; background:rgba(255,255,255,.14); padding:6px 14px; border-radius:var(--r-pill); }
.scoreboard__main { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(14px,3vw,40px); margin-top:20px; }
.sb-team { text-align:center; }
.sb-team__logo { width:84px; height:84px; border-radius:50%; margin:0 auto 12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-family:var(--font-en); font-weight:900; font-size:24px; color:var(--color-accent-light); }
.sb-team__name { font-size:clamp(15px,1.8vw,20px); font-weight:800; }
.sb-team__tag { font-size:11px; color:rgba(255,255,255,.6); margin-top:4px; letter-spacing:.06em; }
.sb-score { font-family:var(--font-en); font-weight:900; font-size:clamp(40px,7vw,72px); line-height:1; }
.sb-score--win { color:var(--color-accent-light); }
.sb-mid { text-align:center; }
.sb-mid__final { font-family:var(--font-en); font-size:12px; letter-spacing:.2em; color:rgba(255,255,255,.7); }
.sb-mid__dash { font-family:var(--font-en); font-weight:900; font-size:clamp(28px,4vw,44px); margin:6px 0; }
@media (max-width:600px){
  .scoreboard__main { grid-template-columns:1fr 1fr; }
  .sb-mid { grid-column:1 / -1; order:3; }
  .sb-team__logo { width:60px; height:60px; font-size:18px; }
}

/* クォーター別スコア */
.qtable { width:100%; border-collapse:separate; border-spacing:0; font-size:14px; margin-top:22px; min-width:480px; }
.qtable th, .qtable td { padding:11px 12px; text-align:center; border-bottom:1px solid var(--color-line); }
.qtable thead th { background:var(--color-ink); color:#fff; font-weight:800; font-size:12px; font-family:var(--font-en); }
.qtable tbody th { text-align:left; font-weight:800; }
.qtable .total { font-family:var(--font-en); font-weight:900; font-size:16px; color:var(--color-accent-strong); }
.qtable tbody tr:nth-child(even) td, .qtable tbody tr:nth-child(even) th { background:var(--color-surface-2); }

/* 順位表 */
.standings { width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
.standings th, .standings td { padding:10px 12px; border-bottom:1px solid var(--color-line); text-align:center; }
.standings thead th { background:var(--color-surface); color:var(--color-ink-2); font-weight:800; font-size:12px; }
.standings tbody th { text-align:left; font-weight:700; }
.standings tbody td:first-of-type { font-family:var(--font-en); font-weight:900; }
.standings tr.is-self th, .standings tr.is-self td { background:var(--color-accent-50); color:var(--color-accent-strong); font-weight:800; }
.standings .rk { font-family:var(--font-en); font-weight:900; color:var(--color-accent-strong); }



.plan.is-full .btn{
  pointer-events: none;
  opacity:0.6;
  cursor: default;
}

/* モーダル 仮 */
 
.plan.is-full .btn{
  pointer-events: none;
  opacity:0.6;
  cursor: default;
}
 
 
.card-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.card-modal[hidden] { display: none; }
.card-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}
.card-modal__inner {
  position: relative;
  max-width: 700px;
  width: 100%;
}
.card-modal__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.card-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.card-modal__card {
  position: relative;
  display: inline-block;
}
.card-modal__no {
  position: absolute;
  top: 22%;        /* 上からの位置。赤枠に合わせて微調整 */
  left: 7%;        /* 左からの位置 */
  color: #fff;
  font-size: clamp(14px, 2.4vw, 16px);  /* 画像の大きさに追従 */
  font-weight: 700;
  letter-spacing: 0.04em;
}

.card-modal__name {
  position: absolute;
  top: 30%;        /* 上からの位置。赤枠に合わせて微調整 */
  left: 7%;        /* 左からの位置 */
  color: #fff;
  font-size: clamp(14px, 2.4vw, 22px);  /* 画像の大きさに追従 */
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* =====================================================================
   TICKET PAGE — ページ専用スタイル
   前提: site-existing.css のトークン・共通コンポーネント(.btn/.panel/.chip/
   .steps/.faq/.card-modal 等)を読み込んだ上で追加適用する。
   ===================================================================== */

/* ---------- 0. ページ専用トークン（既存トークンの拡張） ---------- */
:root {
  /* 席種ガイド用の識別カラー（会場データ提供の配色に統一。意味ごとの共通パレットで、
     会場ごとに採用する席種の数・並びが異なるため、色は「席種の意味」に紐づけている） */
  --seat-c1: #c2185b;  /* コートサイド(ベンチ向かい側)指定席（1列目特典付） */
  --seat-c2: #f72389;  /* コートサイド(ベンチ向かい側)指定席（1列目） */
  --seat-c3: #7a3686;  /* 1階ベンチ向かい側指定席（2・3列目） */
  --seat-c4: #a866b3;  /* 1階ベンチ向かい側自由席（4列目以降）／1階自由席 */
  --seat-c5: #d81900;  /* 【HOME】コートエンド指定席（特典付） */
  --seat-c6: #ff694d;  /* 【HOME】コートエンド指定席 */
  --seat-c7: #6caf02;  /* 【AWAY】コートエンド指定席 */
  --seat-c8: #ff8f33;  /* 【HOME】コートサイドベンチ側指定席 */
  --seat-c9: #007a7a;  /* 【HOME】1Fベンチ側指定席（1・2列目） */
  --seat-c10: #09b6a8; /* 【HOME】1Fベンチ側自由席（3列目以降） */
  --seat-c11: #1e08d3; /* 【AWAY】コートサイドベンチ側指定席 */
  --seat-c12: #0068ff; /* 【AWAY】1Fベンチ側指定席（1・2列目） */
  --seat-c13: #0095ff; /* 【AWAY】1Fベンチ側自由席（3列目以降） */
  --seat-c14: #4f005d; /* 2F自由席メイン（ベンチ向かい側） */
  --seat-c15: #0e7745; /* 2F自由席 */
  --seat-c16: #0f046a; /* BOX席（4席セット） */
  --seat-c17: #9abead; /* 車いす席（文字は黒） */
}

/* ---------- 1. アイコン共通 ---------- */
.icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ---------- 2. ページヘッダー（パンくず＋タイトル） ---------- */
/* 既存の .page-hero / .breadcrumb / .eyebrow をそのまま利用。
   タイトル横に画像を置くため .hero__grid / .hero__visual を流用する。 */
.page-hero .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.page-hero .hero__cta .btn .icon { font-size: 18px; }
/* 「チケットを購入する」がComing Soon分の2段組みで幅が広がり、隣の「購入履歴を確認する」と
   幅が揃わないため、2つのボタン幅を揃える。
   min-width で揃えると、その値がそのまま1列目(.hero__copy)の max-content に
   積み上がってしまい（下記参照）、画面幅によって画像が極端に小さくなる原因になるため、
   幅は min-width ではなく「お互いに残りスペースを均等に分け合う」flex で揃える。
   （テキストの1行分より狭くなりすぎないよう最低幅だけ緩く確保） */
.page-hero .hero__cta .btn { flex: 1 1 0; min-width: 200px; }

/* メインビジュアル：テキスト列(1.1fr)が中身より広く確保され、余った分がそのまま
   画像との間の余白に見えていたため、1列目をテキストの実幅(max-content)にフィットさせる。
   その分、画像列(1fr)が広がるので、縦に伸びすぎないよう max-width で上限をつける。
   枠の縦横比は実画像(1200:600)に合わせ、object-fit:cover でも隙間・ズレが出ないようにする。 */
.page-hero .hero__grid { grid-template-columns: max-content minmax(0, 1fr); }
.page-hero .hero__visual {
  width: 100%; max-width: 760px; margin-left: auto; overflow: hidden; box-shadow: var(--shadow-md);
  aspect-ratio: 1200 / 600; min-height: 0;
}
.page-hero .hero__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 3. 会場セレクター ---------- */
/* .page-hero の下端余白のみでスペーシングを作る（section の二重paddingを避ける） */
.venue-select { margin-top: clamp(18px, 2.4vw, 26px); }
.venue-select__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.venue-select__icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-accent-50); color: var(--color-accent-strong);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  border: 1px solid #fed7aa;
}
.venue-select__title { font-size: 18px; font-weight: 900; }
.venue-select__desc { font-size: 13px; color: var(--color-muted); margin-top: 4px; }
.venue-select__note { font-size: 12px; color: var(--color-muted); margin-top: 14px; }

.venue-select__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.venue-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--color-surface-2); border: 1.5px solid var(--color-line);
  border-radius: var(--r-md); padding: 16px 18px; text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.venue-card:hover { border-color: var(--color-accent-light); transform: translateY(-2px); }
/* 非選択の会場は沈ませて、選択中カードとの差でクリック可能なことを伝える */
.venue-card:not(.is-active) { opacity: .55; transition: opacity .16s ease, border-color .16s ease, transform .16s ease; }
.venue-card:not(.is-active):hover { opacity: .85; }
.venue-card__ico {
  width: auto; height: 64px; flex-shrink: 0; padding: 6px 10px;
  background: var(--color-white); border: 1px solid var(--color-line); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--color-ink-2);
}
.venue-card__ico img { height: 100%; width: auto; object-fit: contain; display: block; }
.venue-card__name { flex: 1; text-align: center; font-size: 15px; font-weight: 800; color: var(--color-ink); line-height: 1.4; }
.venue-card__name small { display: block; font-size: 11.5px; font-weight: 600; color: var(--color-muted); margin-top: 2px; }
.venue-card.is-active {
  background: var(--grad-card-dark); border-color: transparent; box-shadow: var(--shadow-md);
}
.venue-card.is-active .venue-card__ico { background: var(--color-white); border-color: transparent; color: var(--color-accent-light); }
.venue-card.is-active .venue-card__name { color: #fff; }
.venue-card.is-active .venue-card__name small { color: rgba(255,255,255,.65); }

/* ---------- 4. アイコン付きページ内ナビ ---------- */
/* 他のカードと同じくshell幅・角丸・枠線のカードにする（画面端まで伸びる帯にしない） */
.ticket-quicknav {
  position: sticky; top: var(--header-h); z-index: 15;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  margin-top: clamp(18px, 2.4vw, 26px);
  overflow: hidden;
}
.ticket-quicknav__inner {
  display: grid; grid-template-columns: repeat(8, 1fr);
}
.ticket-quicknav a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 6px; text-align: center; font-size: 12px; font-weight: 800; color: var(--color-ink-2);
  border-right: 1px solid var(--color-line); transition: color .16s ease, background .16s ease;
}
.ticket-quicknav a:last-child { border-right: 0; }
.ticket-quicknav a .icon { font-size: 22px; color: var(--color-accent-strong); }
.ticket-quicknav__picto { width: 28px; height: 28px; object-fit: contain; }
.ticket-quicknav a:hover { color: var(--color-accent-strong); background: var(--color-accent-50); }

/* ---------- 5. コンテンツセクション（サイド＋メイン） ---------- */
/* 01〜07のカードをまとめて1つのコンテナで管理し、カード間の余白を一括制御する
   （個々を .section で包むと padding-block が二重にかかって間延びするため） */
.ticket-stack {
  display: flex; flex-direction: column;
  gap: clamp(18px, 2.2vw, 24px);
  margin-top: clamp(18px, 2.4vw, 26px);
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* ヘッダー＋アイコンナビ分だけアンカー着地位置を下げる（sticky要素に隠れないように） */
/* 実際のオフセットは ticket.js が要素高さを計測して --anchor-offset に設定する */
#seat, #price, #schedule, #howto, #detail, #faq, #access, #contact {
  scroll-margin-top: var(--anchor-offset, calc(var(--header-h) + 74px));
}

.ticket-section {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(20px, 2.6vw, 30px);
}
.ticket-section__side { display: flex; flex-direction: column; gap: 4px; }
.ticket-section__num {
  font-family: var(--font-en); font-weight: 900; font-size: 38px; line-height: 1;
  color: var(--color-accent-light);
}
.ticket-section__title { font-size: 21px; font-weight: 900; margin-top: 6px; }
.ticket-section__desc { font-size: 13.5px; color: var(--color-muted); margin-top: 8px; }
.ticket-section__side .btn { margin-top: 16px; align-self: flex-start; }
.ticket-section__main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* タブ（会場・拠点切り替え） chip を流用 */
.chip-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.chip-tabs .chip { border: none; }

/* ---------- 6. 席種ガイド ---------- */
/* 席種ガイドは折り返さない幅、画像側は残り幅いっぱいに広がる可変列
   （広いPC画面でも画像が空きスペースを吸収するため、右側に余白が残らない）。
   Grid の固定minmaxだとサイド欄・余白を差し引いた実幅が最小合計を下回るタイミングで
   はみ出すため、コンテナの実幅が足りなければ自動で折り返す flex-wrap にする。 */
.seat-layout { display: flex; flex-wrap: wrap; gap: clamp(20px, 2.6vw, 32px); align-items: start; }
.seat-layout__map { flex: 1 1 420px; min-width: 280px; }
.seat-layout__guide { flex: 0 1 340px; }
.seat-guide__label { font-size: 12.5px; font-weight: 800; color: var(--color-ink-2); margin-bottom: 10px; }
.seat-guide { display: flex; flex-direction: column; gap: 8px; }
.seat-guide li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-ink-2); white-space: nowrap; }
.seat-guide__note { font-size: 11.5px; color: var(--color-muted); margin-top: 10px; }
.seat-dot {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%; color: #fff;
  font-family: var(--font-en); font-weight: 800; font-size: 11.5px;
}
.seat-dot--c1 { background: var(--seat-c1); }
.seat-dot--c2 { background: var(--seat-c2); }
.seat-dot--c3 { background: var(--seat-c3); }
.seat-dot--c4 { background: var(--seat-c4); }
.seat-dot--c5 { background: var(--seat-c5); }
.seat-dot--c6 { background: var(--seat-c6); }
.seat-dot--c7 { background: var(--seat-c7); }
.seat-dot--c8 { background: var(--seat-c8); }
.seat-dot--c9 { background: var(--seat-c9); }
.seat-dot--c10 { background: var(--seat-c10); }
.seat-dot--c11 { background: var(--seat-c11); }
.seat-dot--c12 { background: var(--seat-c12); }
.seat-dot--c13 { background: var(--seat-c13); }
.seat-dot--c14 { background: var(--seat-c14); }
.seat-dot--c15 { background: var(--seat-c15); }
.seat-dot--c16 { background: var(--seat-c16); }
.seat-dot--c17 { background: var(--seat-c17); color: var(--color-ink); }

/* 価格表：大人／高校生以下、介助あり／介助無しなど複数料金がある行の内訳表示 */
.price-table td .price-sub { display: block; font-size: 11px; font-weight: 700; opacity: .85; margin-top: 2px; }

.seatmap-panel[hidden] { display: none; }
/* 座席図拡大モーダル：実画像(1600x900)に合わせて表示する。
   横幅基準の固定比率(aspect-ratio)だと画面高さが足りない環境で画像が縦にはみ出し、
   閉じるボタンごと画面外に押し出されてしまうため、max-width/max-height の両方で
   クランプして「画面に収まる範囲で」拡大・縮小させる（object-fitで見切れ・引き伸ばし防止）。 */
.card-modal__inner--seatmap { max-width: 1400px; display: flex; justify-content: center; }
.card-modal__inner--seatmap .card-modal__img {
  width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 120px);
  object-fit: contain; border-radius: 0; background: var(--color-surface-2);
}
.seatmap { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.seatmap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.seatmap__pin {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en); font-weight: 800; font-size: 12px;
  box-shadow: 0 2px 6px rgba(15,23,42,.25);
}
.seatmap__zoom { align-self: flex-end; margin-top: 12px; }
.seatmap--placeholder { aspect-ratio: 16/9; }

/* 会場ごとの出し分けパネル（席種ガイド・価格表）共通のプレースホルダー余白 */
.ph--pad { padding: 24px; }

/* site-existing.css の .table-scroll は max-width:767px の中でしか overflow-x:auto を
   付与していないため、PC幅で表(min-width指定あり)がコンテナ幅を超えるとはみ出す。
   常時横スクロール可能にする。 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 7. 価格表 ---------- */
.price-notice { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 0; }
.price-notice__item { border-left: 3px solid var(--color-accent); border-radius: 0; padding-left: 10px; }
.price-notice__label { font-size: 12.5px; font-weight: 800; color: var(--color-accent-strong); margin-bottom: 2px; }
.price-notice__text { font-size: 12.5px; line-height: 1.5; color: var(--color-ink-2); margin: 0; }

.price-table__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.price-table__head h3 { font-size: 15px; font-weight: 800; color: var(--color-ink); }
.price-table__head h3 small { font-size: 12px; font-weight: 600; color: var(--color-muted); margin-left: 6px; }

/* 全席種を表示／閉じる：表内（4番目の行の下）に + ⇄ − の開閉ボタン行として配置 */
.price-table__toggle-row td { padding: 0; }
.price-table__toggle {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; background: var(--color-accent-50); color: var(--color-accent-strong);
  font-size: 12.5px; font-weight: 800; padding: 12px 0; cursor: pointer;
  transition: background .16s ease;
}
.price-table__toggle:hover { background: var(--color-accent-light); }
.price-table__toggle-icon {
  position: relative; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-accent-strong);
}
.price-table__toggle-icon::before, .price-table__toggle-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--color-white);
  transform: translate(-50%, -50%); transition: transform .18s ease;
}
.price-table__toggle-icon::before { width: 9px; height: 1.6px; }
.price-table__toggle-icon::after { width: 1.6px; height: 9px; }
.price-table__toggle[aria-expanded="true"] .price-table__toggle-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.price-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; min-width: 480px; }
.price-table th, .price-table td { padding: 12px 14px; border-bottom: 1px solid var(--color-line); text-align: center; }
.price-table thead th { background: var(--color-ink); color: #fff; font-weight: 800; font-size: 12.5px; }
.price-table thead th:first-child, .price-table td:first-child { text-align: left; }
/* display:flex にすると td がテーブルの行高さ同期から外れてしまう
   （複数行の価格セルと高さがズレる／colspan行の罫線が文字幅で途切れる）ため使わない */
.price-table td:first-child { font-weight: 700; color: var(--color-ink-2); }
.price-table td:first-child .seat-dot { vertical-align: middle; margin-right: 8px; }
.price-table tbody tr:nth-child(even) td { background: var(--color-surface-2); }
.price-table td:not(:first-child) { font-weight: 800; font-family: var(--font-en); }
.price-table__extra[hidden] { display: none; }

.fc-cta {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--grad-soft); border: 1.5px solid var(--color-accent); border-radius: var(--r-md);
  padding: 18px 22px;
}
.fc-cta__icon {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-white); border: 1.5px solid var(--color-accent-light);
  display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--color-accent-strong);
}
.fc-cta__body { flex: 1; min-width: 200px; }
.fc-cta__body strong { display: block; font-size: 16px; color: var(--color-accent-strong); }
.fc-cta__body p { font-size: 12.5px; color: var(--color-ink-2); margin-top: 4px; }

/* ---------- 8. 販売スケジュール ---------- */
.schedule-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 920px; }
.schedule-table th, .schedule-table td { padding: 12px 12px; border-bottom: 1px solid var(--color-line); border-right: 1px solid var(--color-line); text-align: center; white-space: nowrap; }
.schedule-table th:last-child, .schedule-table td:last-child:not(.schedule-table__divider) { border-right: 0; }
.schedule-table thead th { background: var(--color-ink); color: #fff; font-weight: 800; font-size: 12px; }
.schedule-table td:nth-child(3), .schedule-table td:nth-child(4) { text-align: left; font-weight: 700; }

/* 会場・対戦相手（試合情報）と 会員ランク別販売日 の境目（他の縦線と同じ色・太さに統一） */
.schedule-table .schedule-table__divider { border-right: 1px solid var(--color-line); }

/* 会員ランクの見出し色（提供データの配色に統一） */
.schedule-table thead th.rank-royal { background: #666666; }
.schedule-table thead th.rank-platinum { background: #1c4587; }
.schedule-table thead th.rank-gold { background: #bf9000; }
.schedule-table thead th.rank-silver { background: #ff9900; }

.schedule-team-names { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.schedule-team-names li { font-size: 11.5px; color: var(--color-muted); line-height: 1.5; }
.schedule-team-names__abbr { font-weight: 700; color: var(--color-ink-2); }

.ticket-cta-row { margin-top: 20px; text-align: right; }

/* ---------- 9. 購入方法（横スクロールのステップカード） ---------- */
/* PCは折り返しグリッド（横スクロールなし）。スマホのみ横スクロールに切り替え（下記メディアクエリ）。
   列数を repeat(4,1fr) 固定にすると、.ticket-section の側欄(230px固定)分だけ main 幅が狭くなる
   900〜1080px帯などでカードが極端に潰れ、説明文・見出しが省略されてしまうため、
   auto-fit + minmax(200px,1fr) でカード最小幅(200px = 画像の最大表示幅と同じ)を保証しつつ
   列数を可変にする */
.howto-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px;
  list-style: none; margin: 0; padding: 0;
}
.howto-step {
  background: var(--color-white); border: 1px solid var(--color-line);
  border-radius: var(--r-lg); padding: 14px;
}
/* 見出し・本文はカードごとの文字量で高さが変わると、横並びの画像位置がずれるため、
   折り返し行数を固定し line-clamp ではみ出し分を省略して高さを揃える */
.howto-step__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.howto-step__num {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-accent); color: #fff;
  font-family: var(--font-en); font-weight: 800; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
/* 外枠(.howto-step__title)は「2行分の高さ」を常に確保して横並びの画像位置を揃える固定枠。
   実際の行数(1行/2行)は中の -inner 側で決まるため、flexで縦中央寄せして
   1行タイトルが枠の上端に張り付いて見えるのを防ぐ */
.howto-step__title {
  font-size: 16px; font-weight: 900; color: var(--color-ink); line-height: 1.3;
  height: 2.6em;
  display: flex; align-items: center;
}
.howto-step__title-inner {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  /* 「ログイン」等のカタカナ語の途中で改行されるのを防ぐ（それでも1単語が幅を超える場合はanywhereで強制折返し） */
  word-break: keep-all; overflow-wrap: anywhere;
}
.howto-step__text {
  font-size: 12px; font-weight: 700; color: var(--color-ink-2); line-height: 1.5; margin-bottom: 8px;
  height: 54px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* 画像は実データの縦長比率（360×699）。カード幅いっぱいにせず小さめに中央表示して縦の高さを抑える */
.howto-step__shot { aspect-ratio: 360 / 699; max-width: 200px; margin: 0 auto; }

/* ---------- 10. チケット詳細（チェックリスト） ---------- */
.detail-list { display: flex; flex-direction: column; }
.detail-list__item { padding: 18px 0; border-bottom: 1px solid var(--color-line); }
.detail-list__item:first-child { padding-top: 0; }
.detail-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-list__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 800; color: var(--color-ink); margin-bottom: 10px;
}
.detail-list__title::before {
  content: "✓"; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent);
  color: #fff; font-size: 11px; font-weight: 800;
}
.detail-list__item p { font-size: 13.5px; color: var(--color-muted); margin-top: 6px; }
.detail-list__item p:first-of-type { margin-top: 0; }
.detail-list__item ul { margin-top: 6px; }
.detail-list__item ul li { font-size: 13.5px; color: var(--color-muted); padding: 3px 0; display: flex; gap: 6px; }
.detail-list__item ul li::before { content: "・"; color: var(--color-accent); flex-shrink: 0; }
.detail-list__note { font-size: 12.5px; color: var(--color-muted); }

/* FAQの回答が複数行・箇条書きになる場合の見た目調整 */
.faq__a p + p { margin-top: 8px; }
.faq__a ul { margin-top: 6px; }
.faq__a ul li { display: flex; gap: 6px; padding: 2px 0; }
.faq__a ul li::before { content: "・"; color: var(--color-accent); flex-shrink: 0; }

/* ---------- 11. アクセス（会場タブ＋地図＋住所） ---------- */
/* 地図を16:9の横長にして住所テキストと高さを揃える。テキスト側はエリア上部に寄せる */
.access-grid[hidden] { display: none; }
.access-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: flex-start; }
.access-grid .ph { aspect-ratio: 16 / 9; }
.access-map-frame {
  aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--color-line);
}
.access-map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.access-info h3 { font-size: 16px; font-weight: 800; color: var(--color-ink); margin-bottom: 10px; }
.access-info p { font-size: 13.5px; color: var(--color-muted); margin-top: 6px; }
.access-info__label { font-weight: 700; color: var(--color-ink-2); }
.access-info__maplink {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 10px;
  font-size: 13px; font-weight: 700; color: var(--color-accent-strong);
}
.access-info__maplink::after { content: "›"; font-size: 16px; line-height: 1; }
.access-info__maplink:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .access-grid .ph { aspect-ratio: 16 / 10; }
}

/* ---------- 12. お問い合わせ ---------- */
/* ボタンを上、事務局情報を下に縦積み */
.contact-panel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.contact-info__org { font-size: 13.5px; font-weight: 800; color: var(--color-ink); margin-bottom: 8px; }
.contact-info__row { display: flex; gap: 20px; flex-wrap: wrap; }
.contact-info__row span, .contact-info__row a {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-muted);
}
.contact-info__row a { color: var(--color-accent-strong); }
.contact-info__row a:hover { text-decoration: underline; }
.contact-info__row .icon { font-size: 15px; color: var(--color-accent-strong); }

/* サイド（3行）に対してメイン（1行）が短く、上揃えだと下に空白ができるため縦中央にする */
#contact.ticket-section { align-items: center; }

/* チケット販売開始前の一時対応：ボタンとして押せないことが一目で分かるよう、
   グレーではなくブランドカラーのまま彩度・影を落として区別する
   （ヘッダー内CTA・販売スケジュール内CTA・購入方法内CTAなど、販売開始前は
   ページ内の「購入する」系ボタン全てに共通で適用する） */
/* ラベルが長いボタンでも横に伸びて崩れないよう、1行に収めようとせず
   「本文」と「Coming Soon...」を2段に折り返して表示する */
.btn[disabled] {
  background: var(--color-accent-light);
  box-shadow: none;
  cursor: not-allowed;
  opacity: .8;
  flex-wrap: wrap;
  row-gap: 2px;
}
.btn[disabled]:hover { transform: none; }
.btn__soon {
  flex-basis: 100%;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  opacity: .85; white-space: nowrap; text-align: center;
}

/* ---------- 14. ボトムCTA / 固定CTA（モバイル） ---------- */
.ticket-fixed-cta { display: none; }

/* =====================================================================
   レスポンシブ
   ===================================================================== */
@media (max-width: 1080px) {
  .ticket-quicknav__inner { grid-template-columns: repeat(4, 1fr); }
  .ticket-quicknav a:nth-child(4) { border-right: 0; }
  /* 900px超〜1080px帯では3列のままだと .venue-card 内のアイコン分だけ店名の幅が
     ほぼ無くなり、日本語が1文字ずつ改行されて縦書きのように見えてしまうため、
     3列グリッドが崩れ始める前の段階で1列に切り替える */
  .venue-select__list { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .access-grid { grid-template-columns: 1fr; }
  /* 900px以下は .hero__copy(max-content) が画像列を圧迫して小さくなりすぎるため、
     画像を縮小し続けるのではなくボタンの下にスタックさせる。
     .page-hero .hero__grid は既存の .hero__grid { grid-template-columns:1fr; } より
     詳細度が高く上書きしてしまうため、同じスタック指定をここでも当てる */
  .page-hero .hero__grid { grid-template-columns: 1fr; }
  .page-hero .hero__visual { max-width: none; }
}

@media (max-width: 767px) {
  body { padding-bottom: 76px; }
  .ticket-section { grid-template-columns: 1fr; }

  /* SHIPMATE CLUB訴求バナーのボタン：文言が長く1行だと枠からはみ出すため、
     折り返しを許可して2行に収める（レイアウトの縦積み化はしない） */
  .fc-cta .btn { white-space: normal; text-align: center; }
  .ticket-quicknav__inner { grid-template-columns: repeat(4, minmax(84px, 1fr)); overflow-x: auto; }
  .ticket-quicknav a:nth-child(4) { border-right: 1px solid var(--color-line); }
  .schedule-table { min-width: 760px; }
  .price-table { min-width: 560px; }

  /* スマホのみ横スクロールのカード列に切り替え。
     画像が小さく見づらいとの指摘のため、カード幅を広げて画像をPC同等の大きさ(max 200px)で
     表示できるようにする（拡大ボタンは追加せず、スワイプで見やすいサイズのまま読み進める） */
  .howto-steps { display: flex; overflow-x: auto; gap: 12px; padding-bottom: 12px; }
  .howto-step { flex: 0 0 230px; }
  /* カード幅が狭く、丸数字の右に横並びだと見出しの実質幅が66pxしかなく2行に収まらないため、
     スマホのみ丸数字を見出しの上に縦積みにしてテキスト幅を確保する */
  .howto-step__head { flex-direction: column; align-items: flex-start; gap: 6px; }

  .ticket-fixed-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    min-height: 60px; background: var(--color-ink); color: #fff;
    font-weight: 900; font-size: 14px; box-shadow: 0 -6px 20px rgba(10,39,72,.25);
  }
}