@charset "utf-8";
/* ==========================================================================
   Yoshi's CUP 公式サイト — Design tokens & components
   デザインハンドオフ（design_handoff_yoshis_cup）に準拠
   ========================================================================== */

:root{
  --paper:        oklch(0.98 0.006 95);
  --raised:       oklch(0.995 0.004 95);
  --surface-alt:  oklch(0.95 0.004 95);
  --ink:          oklch(0.20 0.012 260);
  --ink-soft:     oklch(0.44 0.012 260);
  --ink-mute:     oklch(0.62 0.012 260);
  --line:         oklch(0.88 0.006 95);
  --line-strong:  oklch(0.80 0.006 95);
  --soft:         oklch(0.94 0.006 95);
  --ball:         oklch(0.86 0.20 122);
  --ball-ink:     oklch(0.28 0.10 122);
  --live:         oklch(0.60 0.22 25);

  --jp: "Noto Sans JP", system-ui, sans-serif;
  --en: Inter, system-ui, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;

  --shadow-soft: 8px 8px 20px oklch(0.80 0.012 95 / .5), -8px -8px 20px oklch(1 0 0 / .95);
  --shadow-card: 0 1px 3px oklch(0 0 0 / .06), 0 18px 50px oklch(0 0 0 / .08);
  --shadow-hover: 0 10px 24px oklch(0 0 0 / .08);
  --ease: cubic-bezier(.2,.7,.3,1);
  --ease-pop: cubic-bezier(.34,1.56,.64,1);
  --ease-snap: cubic-bezier(.16,.9,.28,1);   /* スクロール演出用：立ち上がりが速く、すっと収まる */

  --gutter: 44px;
  --maxw: 1240px;

  /* 字間（トラッキング）— 数値を上げるとより優雅に、下げると引き締まります */
  --tracking:      .045em;   /* 本文・UI 全般 */
  --tracking-head: .085em;   /* 見出し（和文） */
  --tracking-lead: .06em;    /* リード文・長文 */
  --tracking-ui:   .05em;    /* ボタン・ナビ */

  /* セクション間のゆとり */
  --section-gap:   104px;
  --section-gap-s: 68px;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--jp);
  font-feature-settings:"palt";
  /* 和文の字送りをわずかに広げ、ゆったりと上質な印象に */
  letter-spacing:var(--tracking);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  /* 長いURLなどがはみ出すのは防ぎつつ、住所の番地（11-8-2）や「U-16」のような
     ひとまとまりの表記が途中で切れないようにする */
  overflow-wrap:break-word;
  word-break:normal;
  line-break:strict;
}

/* ---------- 字間（優雅さの調整はここだけで効きます） ---------- */
h1, h2, h3, .h-jp, .page-head h1, .hero-copy h1{ letter-spacing:var(--tracking-head) }
.lead, .lead-s, .article-body p, .policy p, .site-footer__note{ letter-spacing:var(--tracking-lead) }
.btn, .chip, .link-row, .site-nav a{ letter-spacing:var(--tracking-ui) }
img{ max-width:100% }
a{ color:var(--ball-ink); text-decoration:none; transition:color .2s var(--ease) }
a:hover{ color:var(--ink) }
h1,h2,h3,h4,p,figure{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
input,select,textarea{ font:inherit; color:inherit }
:focus-visible{ outline:2px solid var(--ball-ink); outline-offset:2px; border-radius:4px }
.tnum{ font-variant-numeric:tabular-nums }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:8px; top:-60px; z-index:200;
  background:var(--ball); color:var(--ball-ink);
  font:700 13px/1 var(--jp); padding:12px 18px; border-radius:999px;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:8px }

/* ---------- keyframes ---------- */
@keyframes ysBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@keyframes ysUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes ysBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ysRoll{
  0%{transform:translateX(-20px) translateY(0) rotate(0)}
  25%{transform:translateX(300px) translateY(-2px) rotate(220deg)}
  50%{transform:translateX(620px) translateY(0) rotate(450deg)}
  75%{transform:translateX(930px) translateY(-2px) rotate(670deg)}
  100%{transform:translateX(1240px) translateY(0) rotate(900deg)}
}
@keyframes ysRollSp{
  0%{transform:translateX(-16px) translateY(0) rotate(0)}
  25%{transform:translateX(94px) translateY(-1.5px) rotate(150deg)}
  50%{transform:translateX(196px) translateY(0) rotate(300deg)}
  75%{transform:translateX(292px) translateY(-1.5px) rotate(450deg)}
  100%{transform:translateX(390px) translateY(0) rotate(600deg)}
}

/* ==========================================================================
   スクロールリビール
   JS（motion.js）が IntersectionObserver で .is-in を付けます。
   JSが動かない環境では最初から表示されたままなので、内容が消えることはありません。
   ========================================================================== */
.js-motion [data-reveal]{
  opacity:0;
  transform:translateY(var(--reveal-y, 22px)) scale(var(--reveal-s, 1));
  transition:
    opacity  .42s var(--ease-snap) var(--d, 0ms),
    transform .52s var(--ease-snap) var(--d, 0ms);
  will-change:opacity, transform;
}
.js-motion [data-reveal].is-in{ opacity:1; transform:none }

/* 動きの種類（data-reveal の値で指定） */
.js-motion [data-reveal="fade"]{ --reveal-y:0px }
.js-motion [data-reveal="rise"]{ --reveal-y:30px }
.js-motion [data-reveal="zoom"]{ --reveal-y:0px; --reveal-s:1.03 }
.js-motion [data-reveal="left"]{ --reveal-y:0px; transform:translateX(-22px) }
.js-motion [data-reveal="right"]{ --reveal-y:0px; transform:translateX(22px) }

/* 見出しの下線をスクロールで引く */
.js-motion .grad-line{ transform-origin:left center; transform:scaleX(0); transition:transform .6s var(--ease-snap) var(--d,0ms) }
.js-motion .grad-line.is-in{ transform:none }

/* ヒーロー写真をゆっくり寄せる（スクロール量に応じて） */
.hero img{ transform:scale(var(--hero-scale, 1)); transform-origin:50% 45% }

/* 端末の「視覚効果を減らす」設定でも演出を表示します（ご要望により常時ON）。
   代わりに、その設定のときは動きの幅と速度を控えめにして、負担を抑えます。 */
@media (prefers-reduced-motion: reduce){
  .js-motion [data-reveal]{ --reveal-y:12px; --reveal-s:1.012; transition-duration:.34s, .4s }
}

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter) }
.section{ padding-bottom:var(--section-gap) }
.section-tight{ padding-bottom:calc(var(--section-gap) * .6) }
.page-body{ padding-top:56px }
.narrow{ max-width:860px }
.narrow-form{ max-width:820px }
.dotted-bg{
  background-color:var(--paper);
  background-image:radial-gradient(oklch(0.20 0.012 260 / .045) 1px, transparent 1px);
  background-size:15px 15px;
}

/* ---------- header ---------- */
.site-header{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px 24px;
  padding:14px var(--gutter);
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky; top:0; z-index:60;
  transition:padding .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
}
/* スクロールすると少し引き締まり、影でそっと浮かせる */
.site-header.is-scrolled{
  padding-top:10px; padding-bottom:10px;
  background:oklch(0.98 0.006 95 / .9);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  backdrop-filter:saturate(1.4) blur(12px);
  box-shadow:0 10px 30px oklch(0 0 0 / .05);
}
.site-header__logo{ height:32px; width:auto; flex:none; transition:height .45s var(--ease) }
.site-header.is-scrolled .site-header__logo{ height:28px }
.site-nav{ display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center }
.site-nav a{
  font:500 13px/1 var(--jp); color:var(--ink-soft);
  white-space:nowrap; flex:none;
}
.site-nav a:hover{ color:var(--ball-ink) }
.site-nav a[aria-current="page"]{ font-weight:700; color:var(--ink) }
.header-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; flex:none }
.nav-toggle{ display:none }

.live-badge{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font:700 11px/1 var(--en); letter-spacing:.1em; color:var(--live);
  padding:7px 11px; border:1.5px solid var(--live); border-radius:999px;
}
.live-badge::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--live); animation:ysBlink 1.4s ease-in-out infinite;
}
.live-badge[hidden]{ display:none }

.ball-line{
  position:relative; height:26px; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.ball-line__track{
  position:absolute; left:0; right:0; top:16px; height:2px;
  background:repeating-linear-gradient(90deg, var(--ink) 0 12px, transparent 12px 22px);
  opacity:.32;
}
.ball-line__ball{ position:absolute; top:4px; left:0; animation:ysRoll 22s linear infinite }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:var(--paper); padding:40px var(--gutter) }
.site-footer a{ color:var(--paper) }
.site-footer a:hover{ color:var(--ball) }
.site-footer__inner{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; max-width:var(--maxw); margin:0 auto }
.site-footer__brand{ display:flex; align-items:center; gap:12px }
.site-footer__brand strong{ font:700 20px/1 var(--en); letter-spacing:0 }
.dots{ display:flex; gap:5px }
.dots i{ width:7px; height:7px; border-radius:50%; background:var(--ball); display:block }
.dots i:nth-child(2){ opacity:.6 }
.dots i:nth-child(3){ opacity:.3 }
.site-footer__note{ font:400 12.5px/1.95 var(--jp); opacity:.75; margin-top:12px; max-width:30em }
.site-footer__cols{ display:flex; gap:40px; flex-wrap:wrap }
.footer-links{ display:flex; flex-direction:column; gap:9px }
.footer-links span{ font:600 10.5px/1 var(--en); letter-spacing:.14em; text-transform:uppercase; opacity:.55; margin-bottom:2px }
.footer-links a{ font:500 12.5px/1.6 var(--jp); opacity:.85 }
/* 運営情報の下に置くSNSアイコン */
.site-footer__brand-col{ max-width:34em }
.sns-icons-row{ display:flex; gap:12px; margin-top:22px }
.sns-icon{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; flex:none;
  border:1px solid oklch(0.98 0.006 95 / .32); color:var(--paper);
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.sns-icon:hover{ background:var(--ball); border-color:var(--ball); color:var(--ball-ink); transform:translateY(-2px) }

/* ---------- typography helpers ---------- */
.eyebrow{
  font:600 11px/1 var(--en); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); display:flex; align-items:center; gap:8px;
}
.eyebrow .num{ font:800 12px/1 var(--en); letter-spacing:.02em; color:var(--ball) }
.eyebrow .bar{ width:26px; height:2px; background:var(--ball); border-radius:2px; flex:none }
.h-en{ font:700 34px/1.25 var(--en); letter-spacing:0; margin:12px 0 6px; display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.h-jp{ font:700 24px/1.4 var(--jp); margin:0 0 14px }
.lead{ font:400 15px/2 var(--jp); color:var(--ink-soft); margin:0 0 16px; max-width:52em }
.lead-s{ font:400 14px/1.95 var(--jp); color:var(--ink-soft); margin:0 0 14px; max-width:46em }
.note{ font:400 12.5px/1.9 var(--jp); color:var(--ink-soft) }
.credit{ font:400 11.5px/1.8 var(--jp); color:var(--ink-soft); margin-top:10px }
.marker{ background:linear-gradient(transparent 62%, oklch(0.86 0.20 122 / .7) 62%) }

.breadcrumb{ font:400 12px/1.7 var(--jp); color:var(--ink-soft) }
.breadcrumb a{ color:var(--ink-soft) }
.breadcrumb a:hover{ color:var(--ball-ink) }
.breadcrumb strong{ color:var(--ink); font-weight:400 }

.page-head{ display:flex; align-items:baseline; gap:14px; margin-top:16px; flex-wrap:wrap }
.page-head h1{ font:800 44px/1 var(--en); letter-spacing:-.005em; margin:0 }
.page-head span{ font:600 14px/1 var(--jp); color:var(--ink-soft) }

/* セクション間の仕切り線。
   直前のセクションの余白の中に重ねて置くので、
   仕切り線があってもなくてもセクション同士の間隔は同じになります。 */
.rule-row{
  height:var(--section-gap);
  margin-top:calc(-1 * var(--section-gap));
  display:flex; align-items:center;
  padding-top:0; padding-bottom:0;
  pointer-events:none;
}

.grad-line{ height:3px; border-radius:2px; background:linear-gradient(90deg, var(--ball), oklch(0.20 0.012 260 / .22) 55%, transparent) }
.dash-rule{ display:flex; align-items:center; gap:10px }
.dash-rule i{ flex:1; height:2px; background:repeating-linear-gradient(90deg, var(--ink) 0 12px, transparent 12px 22px); opacity:.4 }
.ph{
  border:1px dashed var(--line-strong); border-radius:7px; padding:6px 9px;
  font:400 11px/1.4 var(--mono); color:var(--ink-soft); display:inline-block;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:700 14px/1 var(--jp); padding:15px 26px; border-radius:999px;
  white-space:nowrap; cursor:pointer; text-align:center;
  transition:transform .25s var(--ease-pop), box-shadow .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn-ball{ background:var(--ball); color:var(--ball-ink) }
.btn-ball:hover{ transform:translateY(-2px); box-shadow:0 8px 18px oklch(0.86 0.20 122 / .45); color:var(--ball-ink) }
.btn-outline{ color:var(--ink); border:2px solid var(--ink); padding:13px 24px }
.btn-outline:hover{ transform:translateY(-2px); background:var(--ink); color:var(--paper) }
.btn-ghost{
  font:700 13px/1 var(--jp); color:var(--ink);
  border:1px solid var(--line); background:var(--raised); padding:12px 18px;
}
.btn-ghost:hover{ border-color:var(--ball); color:var(--ball-ink) }
.btn-sm{ font-size:13px; padding:12px 18px }
.btn-block{ display:flex; width:100% }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px }

.link-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid var(--line); background:var(--raised); border-radius:12px;
  padding:14px 16px; font:700 13px/1.4 var(--jp); color:var(--ink);
  transition:border-color .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}
.link-row:hover{ border-color:var(--ball); color:var(--ball-ink); transform:translateX(2px) }
.link-row.is-ball{ background:var(--ball); color:var(--ball-ink); border-color:var(--ball) }
.link-row.is-ball:hover{ transform:translateY(-2px); box-shadow:0 8px 18px oklch(0.86 0.20 122 / .45) }
.link-row .arrow{ font-family:var(--en) }

.chip{
  font:700 14px/1 var(--en); padding:12px 20px; border-radius:999px;
  background:transparent; color:var(--ink); border:1px solid var(--line-strong);
  cursor:pointer; white-space:nowrap;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.chip:hover{ border-color:var(--ball); color:var(--ball-ink) }
.chip[aria-selected="true"], .chip.is-on{ background:var(--ball); color:var(--ball-ink); border-color:var(--ball) }
.chip-jp{ font:600 12.5px/1 var(--jp); padding:10px 16px }
.chip-row{ display:flex; gap:10px; flex-wrap:wrap }

.tag{ font:700 10.5px/1 var(--jp); padding:5px 9px; border-radius:999px; background:var(--soft); color:var(--ink-soft); white-space:nowrap }
.tag-ball{ background:var(--ball); color:var(--ball-ink) }
.badge-new{
  font:800 9.5px/1 var(--en); letter-spacing:.12em;
  background:var(--ball); color:var(--ball-ink);
  border:1.5px solid var(--ink); padding:4px 7px; display:inline-block;
}
.tag-pdf{
  font:700 9.5px/1 var(--en); letter-spacing:.08em; color:var(--live);
  border:1.5px solid var(--live); border-radius:5px; padding:4px 6px; white-space:nowrap;
}
.tag-req{ font:700 10px/1 var(--jp); color:var(--live); border:1.5px solid var(--live); border-radius:5px; padding:3px 6px }
.tag-auto{
  font:700 9.5px/1 var(--en); letter-spacing:.1em;
  background:var(--ball); color:var(--ball-ink); padding:5px 8px; border-radius:5px; white-space:nowrap;
}

/* ---------- cards ---------- */
.card{ background:var(--raised); border:1px solid var(--line); border-radius:18px; padding:22px 24px }
/* 上端から見出しまでの余白を、下端から最終行の文字までの余白（行の余白14pxを含む）に合わせる */
.card-lg{ border-radius:20px; padding:40px 30px 26px }
.card-list{ background:var(--raised); border:1px solid var(--line); border-radius:18px; padding:4px 24px 16px }
.soft-card{ background:var(--paper); border-radius:20px; padding:22px 24px; box-shadow:var(--shadow-soft) }
.card-hover{ transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease) }
.card-hover:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:var(--ball) }
.card-top{ border-top:4px solid var(--ball); border-radius:4px 4px 18px 18px }

.row-list > *{ border-top:1px solid var(--line) }
.row-list > *:first-child{ border-top:0 }

.frame{ position:relative; border-radius:20px; overflow:hidden; background:var(--ink) }
.frame img{ width:100%; height:100%; object-fit:cover; display:block }
.frame::before,.frame::after,.frame > i:first-child,.frame > i:nth-child(2){ content:""; position:absolute; width:22px; height:22px; z-index:1 }
.frame::before{ left:12px; top:12px; border-top:2.5px solid var(--ball); border-left:2.5px solid var(--ball) }
.frame::after{ right:12px; top:12px; border-top:2.5px solid var(--ball); border-right:2.5px solid var(--ball) }
.frame > i:first-child{ left:12px; bottom:12px; border-bottom:2.5px solid var(--ball); border-left:2.5px solid var(--ball) }
.frame > i:nth-child(2){ right:12px; bottom:12px; border-bottom:2.5px solid var(--ball); border-right:2.5px solid var(--ball) }

.photo-zoom{ overflow:hidden }
.photo-zoom img{ transition:transform 1.2s var(--ease) }
.photo-zoom:hover img{ transform:scale(1.04) }

.player-photo{
  aspect-ratio:3/4; border-radius:10px; overflow:hidden;
  background:repeating-linear-gradient(135deg, oklch(0.93 0.006 95) 0 8px, oklch(0.90 0.006 95) 8px 16px);
  display:grid; place-items:center;
  font:400 10.5px/1 var(--mono); color:var(--ink-soft);
}
.player-photo img{ width:100%; height:100%; object-fit:cover; display:block }

/* ---------- grids ---------- */
/* min-width:0 が無いと、中の画像の実寸でトラックが広がり横スクロールが出る */
.grid{ display:grid; gap:18px }
.grid > *{ min-width:0 }
.g2{ grid-template-columns:repeat(2,1fr) }
.g3{ grid-template-columns:repeat(3,1fr) }
.g4{ grid-template-columns:repeat(4,1fr) }
.g6{ grid-template-columns:repeat(6,1fr) }
.split{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:start }
.split-even{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start }

/* ---------- hero (top) ---------- */
.hero{ height:460px; overflow:hidden; background:var(--ink) }
.hero img{ width:100%; height:100%; object-fit:cover; object-position:56% 34%; display:block }
/* 左（見出し）と右（リード＋CTA）を上下中央で対に揃え、左右対称に見せる */
.hero-copy{
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
  padding:88px var(--gutter) 92px;
  align-items:center;
  max-width:var(--maxw); margin:0 auto;
}
/* 左右のブロックを同じ幅・同じ中心線に置き、対になるよう揃える */
.hero-copy > div{ display:flex; flex-direction:column; justify-content:center; min-width:0 }
.hero-copy h1{ font:700 54px/1.5 var(--jp); margin:0 }
.j2w{ display:flex; align-items:center; gap:16px; margin-top:24px; flex-wrap:wrap }
.j2w b{ font:800 30px/1 var(--en); letter-spacing:.06em; font-weight:800 }
.j2w b i{ color:var(--ball); font-style:normal }
.hero-copy p{ font:400 16px/2.2 var(--jp); color:var(--ink-soft); margin:0 }

/* ---------- news list ---------- */
.news-row{
  display:grid; grid-template-columns:150px 152px 1fr auto; gap:18px; align-items:center;
  padding:18px 0; border-top:1px solid var(--line); color:var(--ink);
}
.news-row:hover{ color:var(--ball-ink) }
.news-row .date{ font:600 13px/1 var(--en); color:var(--ink-soft) }
.news-row .meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.news-row .title{ font:500 15px/1.7 var(--jp) }
.news-row .arrow{ font:400 13px/1 var(--en); color:var(--ink-soft) }
.news-compact .news-row{ grid-template-columns:96px 148px 1fr auto; gap:16px; padding:14px 0 }
.news-compact .news-row .date{ font-size:12.5px }
.news-compact .news-row .title{ font-size:14px; line-height:1.6 }
.news-empty{ padding:28px 0; font:400 13px/1.9 var(--jp); color:var(--ink-soft); border-top:1px solid var(--line) }

.pager{ display:flex; justify-content:center; gap:8px; padding:26px 0 0; border-top:1px solid var(--line); margin-top:14px }
.pager button{
  min-width:38px; text-align:center; font:600 13px/1 var(--en);
  padding:11px 8px; border-radius:10px; border:1px solid var(--line-strong); background:transparent; color:var(--ink);
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.pager button:hover:not(:disabled){ border-color:var(--ball); color:var(--ball-ink) }
.pager button[aria-current="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.pager button:disabled{ opacity:.35; cursor:not-allowed }

/* ---------- data rows ---------- */
.fact-row{ display:grid; grid-template-columns:76px 1fr; gap:14px; padding:14px 0; border-top:1px solid var(--line); align-items:baseline }
.fact-row dt{ font:600 10.5px/1.4 var(--en); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft) }
.fact-row dd{ font:500 14px/1.65 var(--jp); color:var(--ink); margin:0 }

.summary-row{ display:grid; grid-template-columns:170px 1fr; gap:22px; padding:16px 0; border-top:1px solid var(--line); align-items:baseline }
.summary-row dt{ font:700 13px/1.7 var(--jp); color:var(--ink-soft) }
.summary-row dd{ font:400 14.5px/1.9 var(--jp); margin:0 }

.doc-row{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--line); color:var(--ink) }
.doc-row:hover{ color:var(--ball-ink) }
.doc-row .t{ font:500 13.5px/1.5 var(--jp) }
.doc-row .m{ display:block; font:400 11px/1.5 var(--en); color:var(--ink-soft) }

.draw-row{ display:grid; grid-template-columns:116px 1fr auto; gap:14px; align-items:center; padding:13px 0; border-top:1px solid var(--line) }
.draw-row .r{ font:700 11px/1 var(--en); letter-spacing:.1em; color:var(--ink-soft); text-transform:uppercase; display:inline-flex; align-items:center; gap:8px }
.draw-row .r i{ width:8px; height:8px; border-radius:50%; background:var(--ball); flex:none }
.draw-row .p{ font:500 13.5px/1.5 var(--jp) }
.draw-row .s{ font:600 13px/1 var(--en); color:var(--ink-soft); border:1px dashed var(--line-strong); border-radius:7px; padding:6px 12px; white-space:nowrap }

.edition-row{ display:grid; grid-template-columns:112px 200px 1fr 96px; gap:20px; align-items:center; padding:18px 0; border-top:1px solid var(--line); color:var(--ink) }
.edition-row:hover{ color:var(--ball-ink) }
.edition-row .y{ font:800 20px/1 var(--en); letter-spacing:0 }
.edition-row .e{ font:500 11.5px/1.6 var(--jp); color:var(--ink-soft) }
.edition-row .field{ display:flex; flex-wrap:wrap; gap:6px }
.edition-row .go{ font:600 12.5px/1 var(--jp); color:var(--ball-ink); text-align:right; white-space:nowrap }

/* ---------- live score (public) ---------- */
.live-card{ background:var(--paper); border-radius:24px; padding:24px 26px; box-shadow:var(--shadow-soft) }
.live-card__head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap }
.live-card__head .court{ font:500 12px/1.5 var(--en); color:var(--ink-soft) }
.live-row{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; padding:12px 0; border-top:1px solid var(--line) }
.live-row .nm{ font:700 16px/1.3 var(--jp) }
.live-row .sv{ color:var(--ball-ink) }
.live-row .mt{ display:block; font:400 11px/1.4 var(--en); color:var(--ink-soft) }
.setbox{ display:flex; gap:6px }
.setbox span{
  min-width:36px; text-align:center; font:700 18px/1.4 var(--en);
  font-variant-numeric:tabular-nums; padding:3px 5px; border-radius:9px;
  background:var(--soft); color:var(--ink);
}
.setbox span.win{ background:var(--ball); color:var(--ball-ink) }
.live-updated{ font:400 11px/1.6 var(--en); color:var(--ink-soft); margin-top:12px; display:flex; align-items:center; gap:6px }
.live-updated::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ball); animation:ysBlink 1.4s ease-in-out infinite }
.live-off{
  border:1px dashed var(--line-strong); border-radius:18px; padding:26px;
  font:400 13px/1.9 var(--jp); color:var(--ink-soft); background:var(--raised);
}

/* ---------- quote / team ---------- */
.quote{ position:relative; background:var(--paper); border-radius:20px; padding:22px 24px 22px 50px; margin-top:20px; box-shadow:var(--shadow-soft) }
.quote::before{ content:"\201C"; position:absolute; left:16px; top:10px; font:800 40px/1 var(--en); color:var(--ball) }
.quote p{ font:400 14px/1.95 var(--jp); color:var(--ink) }
.quote cite{ display:block; font:600 12px/1.6 var(--en); color:var(--ink-soft); margin-top:14px; font-style:normal }

.member{ background:var(--raised); border:1px solid var(--line); border-radius:16px; padding:18px 20px }
.member .role{ font:600 10.5px/1 var(--en); letter-spacing:.1em; text-transform:uppercase; color:var(--ball-ink) }
.member .nm{ display:flex; align-items:center; gap:10px; margin:8px 0 6px }
.member .nm b{ font:700 17px/1.4 var(--jp) }
.member p{ font:400 12px/1.75 var(--jp); color:var(--ink-soft) }
.sns-icons{ display:flex; gap:6px; margin-left:auto }
.sns-icons a{
  width:30px; height:30px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--ink);
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.sns-icons a:hover{ background:var(--ball); border-color:var(--ball); color:var(--ball-ink) }

/* ---------- stats / supporters ---------- */
.stat{ border-top:2px solid var(--ball); padding-top:10px }
.stat b{ display:block; font:800 26px/1.1 var(--en); letter-spacing:0; font-variant-numeric:tabular-nums }
.stat span{ display:block; font:400 11.5px/1.5 var(--jp); color:var(--ink-soft); margin-top:4px }

.banner{
  aspect-ratio:16/5; border:1px dashed var(--line-strong); border-radius:12px; background:var(--paper);
  display:grid; place-items:center; text-align:center; padding:6px;
  font:400 10.5px/1.4 var(--mono); color:var(--ink-soft);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.banner:hover{ border-color:var(--ball); background:var(--raised) }
.banner-s{ aspect-ratio:16/7; border-radius:10px; font-size:9.5px }
.banner.has-logo{ border-style:solid; border-color:var(--line); background:var(--raised); padding:10px }
.banner.has-logo img{ max-width:100%; max-height:100%; object-fit:contain; display:block }
/* 公式サイトのURLが登録されている協賛枠。押せることが分かるようにする */
/* 記事本文に置かれたリンク */
.article-body a{ color:var(--ball-ink); text-underline-offset:3px; text-decoration-thickness:1.5px }
.article-body a:hover{ background:oklch(0.86 0.20 122 / .22); border-radius:3px }

/* エントリー受付中にメニューへ移動する「配信を観る」 */
.site-nav__stream{ color:var(--ball-ink) !important; font-weight:700 }
.site-nav__stream::before{ content:'▶'; font-size:.72em; margin-right:5px; opacity:.7 }

.banner.is-link{ text-decoration:none; cursor:pointer }
.banner.is-link:hover{ border-color:var(--ball); transform:translateY(-2px); box-shadow:0 6px 16px oklch(0.20 0.012 260 / .08) }
.banner.is-link:focus-visible{ outline:2px solid var(--ball); outline-offset:2px }

.plan{ display:flex; flex-direction:column; background:var(--raised); border:1px solid var(--line); border-top:4px solid var(--ball); border-radius:4px 4px 18px 18px; padding:24px 26px }
.plan .tier{ align-self:flex-start; font:700 10px/1 var(--en); letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:var(--ink); color:var(--paper) }
.plan .tier.gold{ background:var(--ball); color:var(--ball-ink) }
.plan .price{ font:800 34px/1.1 var(--en); letter-spacing:0; margin:14px 0 0; font-variant-numeric:tabular-nums }
.plan .price small{ font:500 12px/1 var(--jp); color:var(--ink-soft) }
.plan .cta{ margin-top:auto; padding-top:18px }
.plan .cta small{ display:block; font:400 10.5px/1.6 var(--jp); color:var(--ink-soft); text-align:center; margin-top:8px }
.bullets li{ border-top:1px dashed var(--line); padding:8px 0 8px 16px; position:relative; font:400 12.5px/1.7 var(--jp); color:var(--ink-soft) }
.bullets li::before{ content:""; position:absolute; left:0; top:13px; width:6px; height:6px; border-radius:50%; background:var(--ball) }
.bullets li:first-child{ border-top:0 }

/* ---------- video ---------- */
.video{ aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:var(--ink) }
.video iframe{ width:100%; height:100%; border:0; display:block }

/* ---------- podium / gallery ---------- */
.podium{ background:var(--raised); border:1px solid var(--line); border-top:4px solid var(--soft); border-radius:4px 4px 18px 18px; padding:14px }
.podium.is-first{ border-top-color:var(--ball) }
.podium .pic{
  aspect-ratio:4/3; border-radius:12px; overflow:hidden;
  background:repeating-linear-gradient(135deg, oklch(0.93 0.006 95) 0 8px, oklch(0.90 0.006 95) 8px 16px);
  display:grid; place-items:center; font:400 10.5px/1 var(--mono); color:var(--ink-soft);
}
.podium .pic img{ width:100%; height:100%; object-fit:cover; display:block }
.podium .rk{ display:flex; align-items:center; gap:8px; margin:12px 0 8px; flex-wrap:wrap }
.podium .rk .en{ font:600 11px/1 var(--en); color:var(--ink-soft) }

.gallery-item{
  aspect-ratio:3/2; border-radius:12px; overflow:hidden;
  background:oklch(0.90 0.006 95); border:1px solid var(--line);
  background-size:cover; display:grid; place-items:center;
  font:400 10.5px/1 var(--mono); color:var(--ink-soft);
  transition:transform .5s var(--ease);
}
.gallery-item:hover{ transform:scale(1.03) }

/* ---------- timeline / prizes ---------- */
.day{ background:var(--raised); border:1px solid var(--line); border-radius:18px; padding:20px 22px }
.day .hd{ display:flex; align-items:baseline; gap:8px }
.day .hd b{ font:800 22px/1 var(--en); letter-spacing:0 }
.day .hd span{ font:600 11px/1 var(--en); letter-spacing:.12em; color:var(--ink-soft) }
.day .lb{ font:700 13px/1.5 var(--jp); margin:10px 0 12px; color:var(--ball-ink) }
.day li{ display:grid; grid-template-columns:52px 1fr; gap:10px; padding:7px 0; border-top:1px solid var(--line); font:400 12.5px/1.5 var(--jp); color:var(--ink-soft) }
.day li b{ font:600 12.5px/1.5 var(--en); color:var(--ink) }

.champ-card{ background:var(--raised); border:1px solid var(--ball); border-radius:18px; padding:22px 24px; box-shadow:6px 6px 0 oklch(0.86 0.20 122 / .35) }
.champ-card .y{ display:flex; align-items:center; gap:10px; font:800 20px/1 var(--en); letter-spacing:0 }
.champ-card .n{ font:700 18px/1.5 var(--jp); margin:10px 0 6px }
.champ-card p{ font:400 13px/1.9 var(--jp); color:var(--ink-soft) }

/* ---------- access ---------- */
.map{
  position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden;
  border:1px solid var(--line); background:var(--soft);
}
.map iframe{ width:100%; height:100%; border:0; display:block }
.route{ background:var(--raised); border:1px solid var(--line); border-top:4px solid var(--ball); border-radius:4px 4px 18px 18px; padding:22px 24px }
.route .en{ font:600 10.5px/1 var(--en); letter-spacing:.12em; text-transform:uppercase; color:var(--ball-ink) }
.route h3{ font:700 17px/1.5 var(--jp); margin:8px 0 }
.route p{ font:400 13px/1.9 var(--jp); color:var(--ink-soft) }

/* ---------- article ---------- */
.article-body h2{ font:700 20px/1.6 var(--jp); margin:26px 0 10px }
.article-body p{ font:400 15px/2.1 var(--jp); color:oklch(0.32 0.012 260); margin:0 0 16px }
.article-nav{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  background:var(--raised); border:1px solid var(--line); border-radius:16px; padding:18px 24px;
}
.article-nav a{ font:600 13px/1.6 var(--jp); color:var(--ink-soft) }
.article-nav a.mid{ font-weight:700; color:var(--ink) }
.article-nav span.off{ font:600 13px/1.6 var(--jp); color:var(--line-strong) }

/* ---------- forms ---------- */
.form-card{ background:var(--raised); border:1px solid var(--line); border-radius:18px; padding:28px 30px; display:flex; flex-direction:column; gap:18px }
.field > .lb{ display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap }
.field > .lb b{ font:700 13px/1 var(--jp) }
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:10px; background:var(--paper);
  padding:14px 16px; font:400 13.5px/1.5 var(--jp); color:var(--ink);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea{ min-height:150px; resize:vertical }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-mute) }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--ball); background:var(--raised); outline:none }
.field.is-auto input, .field.is-auto select{ border-color:var(--ball); background:var(--raised) }
.field .err{ display:none; font:500 12px/1.6 var(--jp); color:var(--live); margin-top:6px }
.field.is-error input, .field.is-error select, .field.is-error textarea{ border-color:var(--live) }
.field.is-error .err{ display:block }
.check{ display:flex; align-items:flex-start; gap:10px; font:400 13px/1.7 var(--jp); color:var(--ink-soft); cursor:pointer }
.check input{ width:18px; height:18px; margin:2px 0 0; accent-color:var(--ball-ink); flex:none }
.auto-note{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--raised); border:1px solid var(--ball); border-radius:12px; padding:12px 16px;
  font:500 12.5px/1.7 var(--jp);
}
.form-error{
  border:1px solid var(--live); background:oklch(0.60 0.22 25 / .07); border-radius:12px;
  padding:12px 16px; font:500 12.5px/1.8 var(--jp); color:var(--ink);
}
.form-ok{
  display:none; background:var(--raised); border:1px solid var(--ball); border-radius:16px;
  padding:24px 26px; box-shadow:6px 6px 0 oklch(0.86 0.20 122 / .25);
}
.form-ok.is-on{ display:block }
.form-ok h2{ font:700 18px/1.6 var(--jp); margin-bottom:8px }
.form-ok p{ font:400 13.5px/1.9 var(--jp); color:var(--ink-soft) }

/* ---------- policy ---------- */
.policy h2{ font:700 17px/1.6 var(--jp); margin:24px 0 8px }
.policy p{ font:400 14px/2.05 var(--jp); color:var(--ink-soft) }
.note-box{
  border:1px dashed var(--line-strong); border-radius:12px; padding:16px 18px;
  font:400 11.5px/1.8 var(--mono); color:var(--ink-soft);
}

/* ==========================================================================
   Responsive — SP (〜768px)
   ========================================================================== */
/* 動画とリンクカード。スマホでは縦に積む（横並びのままだとカードが潰れるため） */
/* エントリー受付ボタン（管理画面でONのときだけ表示） */
.entry-box{ margin-top:16px }
.entry-box .btn{ width:100% }
.entry-note{ margin:8px 2px 0; font:400 11.5px/1.8 var(--jp); color:var(--ink-soft) }

.video-split{ display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:stretch }

@media (max-width:768px){
  .video-split{ grid-template-columns:1fr }
  :root{
    --gutter:20px;
    --section-gap:var(--section-gap-s);
    --tracking:.03em;
    --tracking-head:.055em;
    --tracking-lead:.04em;
    --tracking-ui:.03em;
  }
  .site-header{ padding:14px 18px; gap:12px }
  .site-header__logo{ height:26px }
  .site-nav{
    display:none; order:9; width:100%; flex-direction:column; gap:0;
    border-top:1px solid var(--line); padding-top:6px;
  }
  .site-nav.is-open{ display:flex }
  .site-nav a{ display:flex; align-items:center; min-height:44px; font-size:14px; width:100% }
  .nav-toggle{
    display:grid; place-items:center; width:44px; height:44px;
    border:1px solid var(--line); border-radius:12px; flex:none;
  }
  .nav-toggle i{ display:block; width:18px; height:12px; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink) }
  .nav-toggle[aria-expanded="true"] i{ border-top-color:var(--ball-ink); border-bottom-color:var(--ball-ink) }
  .header-actions .btn{ font-size:12px; padding:11px 14px }
  .header-actions .live-badge{ padding:6px 9px; font-size:10px }

  .ball-line{ height:22px }
  .ball-line__track{ top:13px; background:repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 18px); opacity:.3 }
  .ball-line__ball{ top:3px; animation-name:ysRollSp; animation-duration:16s }

  /* セクション余白は :root の --section-gap で制御 */
  .hero{ height:260px }
  .hero img{ object-position:58% 30% }
  .hero-copy{ display:block; padding:44px var(--gutter) 48px }
  .hero-copy h1{ font-size:34px; line-height:1.45 }
  .j2w b{ font-size:20px }
  .hero-copy p{ font-size:14px; line-height:2.05; margin-top:18px }
  .btn-row{ flex-direction:column; margin-top:18px }
  .btn-row .btn{ width:100% }

  .h-en{ font:700 24px/1.4 var(--jp); margin:14px 0 12px }
  .h-jp{ font-size:20px }
  .lead, .lead-s{ font-size:13.5px; line-height:2 }
  .page-head h1{ font-size:34px }
  .card{ padding:18px 18px }
  .card-lg{ padding:31px 18px 18px }
  .card-list{ padding:2px 16px 12px }
  .soft-card{ padding:18px }
  .quote{ padding:18px 18px 18px 40px; border-radius:18px }
  .quote::before{ font-size:34px; left:12px; top:8px }

  .g2,.g3,.g4,.g6{ grid-template-columns:repeat(2,1fr); gap:12px }
  .g1-sp{ grid-template-columns:1fr }
  .split,.split-even{ grid-template-columns:1fr; gap:26px }
  .grid{ gap:12px }

  .news-row, .news-compact .news-row{ display:block; padding:13px 0 }
  .news-row .meta{ margin-bottom:4px }
  .news-row .date{ font-size:11.5px }
  .news-row .title, .news-compact .news-row .title{ font-size:13.5px; line-height:1.65 }
  .news-row .arrow{ display:none }

  .fact-row{ grid-template-columns:1fr; gap:3px }
  .summary-row{ grid-template-columns:1fr; gap:4px }
  .draw-row{ grid-template-columns:1fr auto; gap:10px }
  .edition-row{ grid-template-columns:1fr auto; gap:10px; padding:13px 0 }
  .edition-row .field{ display:none }
  .doc-row{ grid-template-columns:1fr auto }
  .doc-row .m{ display:none }

  .live-row{ gap:10px }
  .live-row .nm{ font-size:14.5px }
  .live-row .mt{ display:none }
  .setbox span{ min-width:30px; font-size:16px }

  .hero-copy, .site-footer__inner{ gap:26px }
  .site-footer{ padding:40px 20px }
  .site-footer__note{ font-size:11.5px }
  .form-card{ padding:20px 18px }
  .article-nav{ padding:16px 18px; gap:12px }
  .plan{ padding:20px 20px }
}

@media (max-width:420px){
  .g2,.g3,.g4,.g6{ grid-template-columns:1fr }
  .grid.keep2{ grid-template-columns:repeat(2,1fr) }
}