@charset "UTF-8";
/* ==================================================================
   NPO法人 BLACKSOX  共通スタイルシート
   ------------------------------------------------------------------
   01. 設計トークン（色・余白・文字）
   02. リセットと土台
   03. アクセシビリティ
   04. 汎用パーツ
   05. ヘッダー／グローバルナビ
   06. パンくず
   07. トップページ専用（スライダー・入口ボタンなど）
   08. 下層ページ共通
   09. フッター
   10. レスポンシブ
   ------------------------------------------------------------------
   配色ルール（ロゴに合わせた 白・黒・赤 の3色）
     ・赤は「白い背景の上」で使う。赤地には必ず白文字。
     ・黒い背景の上に赤文字は置かない（コントラスト 2.9:1 で不足するため）。
       暗い面での強調は白文字＋赤のバー／下線で行う。
   ※ グラデーションは使用しません（すべてフラット）
   ================================================================== */


/* ==================================================================
   01. 設計トークン
   ================================================================== */
:root {
  /* ベース */
  --c-ink:        #1A1A1A;  /* 文字・濃い面。ロゴの黒(#231816)は赤みがあるため、
                               面で使うとくすむので、UIはニュートラルな黒にする */
  --c-logo-black: #231816;  /* ロゴ本来の黒（画像内の色。参考値） */
  --c-white:      #FFFFFF;
  --c-paper:      #F5F5F5;  /* ページ背景（ニュートラルグレー） */
  --c-line:       #DCDCDC;  /* 罫線 */
  --c-sub:        #595959;  /* 補足文字（白背景で 7.0:1） */

  /* アクセント（ロゴの赤） */
  --c-red:        #C90509;  /* 白背景で 5.98:1。赤地には白文字 */
  --c-red-dark:   #9E0407;  /* ホバー時 */
  --c-red-bg:     #FDECEC;  /* 淡い赤（帯・表の見出しなど） */
  --c-footer-bg:  #E9E9E9;  /* フッターの明るいグレー。黒いロゴをそのまま置ける */
  --c-footer-line:#D1D1D1;

  /* プログラム識別色（白背景で 4.5:1 以上） */
  --c-prog-1:     #231816;
  --c-prog-2:     #C90509;
  --c-prog-3:     #7A2E12;
  --c-prog-4:     #4A4A4A;
  --c-prog-5:     #8C1D3F;

  /* 余白 */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;

  /* 角丸・線 */
  --radius:    14px;
  --radius-sm: 8px;
  --border:    2px solid var(--c-ink);

  /* レイアウト */
  --wrap: 1120px;
  --gutter: 20px;
}

/* 文字サイズ変更（ヘッダーのボタンで切り替え） */
html[data-fontsize="1"] { font-size: 100%; }   /* 16px */
html[data-fontsize="2"] { font-size: 112.5%; } /* 18px */
html[data-fontsize="3"] { font-size: 125%; }   /* 20px */


/* ==================================================================
   02. リセットと土台
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  /* 見本サイトと同じ Noto Sans JP。読み込み前は端末標準ゴシックで代替 */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic,
               Meiryo, sans-serif;
  font-optical-sizing: auto;
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: .02em;
  -webkit-text-size-adjust: 100%;
}

img, svg, video { max-width: 100%; height: auto; vertical-align: bottom; }

a { color: var(--c-red); text-underline-offset: .2em; }
a:hover { text-decoration: none; }

ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

h1, h2, h3, h4, p, figure { margin: 0; }

button { font: inherit; color: inherit; cursor: pointer; }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ==================================================================
   03. アクセシビリティ
   ================================================================== */
.visually-hidden {
  position: absolute !important;
  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;
  top: -100px; left: 0;
  z-index: 1000;
  background: var(--c-red);
  color: var(--c-white);
  font-weight: 700;
  padding: var(--sp-3) var(--sp-5);
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* フォーカスリングは常にはっきり見えるように */
:focus-visible {
  outline: 3px solid var(--c-red);
  outline-offset: 2px;
  border-radius: 4px;
}
/* 暗い面の上では白いリングに切り替える */
.hero-slider :focus-visible,
.stats :focus-visible,
.page-head :focus-visible,
.utility :focus-visible {
  outline-color: var(--c-white);
}

@media (forced-colors: active) {
  .btn, .card, .prog-card, .entry-pill { border: 1px solid CanvasText; }
}


/* ==================================================================
   04. 汎用パーツ
   ================================================================== */

/* --- ボタン --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;              /* タップ領域を44px以上確保 */
  padding: var(--sp-3) var(--sp-5);
  border-radius: 999px;
  border: var(--border);
  background: var(--c-white);
  color: var(--c-ink);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.4;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--c-red); border-color: var(--c-red); color: var(--c-white); }
.btn--primary:hover { background: var(--c-red-dark); border-color: var(--c-red-dark); }
.btn--donate  { background: var(--c-ink); color: var(--c-white); }
.btn--ghost   { background: transparent; }
.btn--lg      { min-height: 56px; padding-inline: var(--sp-6); font-size: 1.0625rem; }

/* --- セクション見出し --- */
.section { padding-block: var(--sp-8); }
.section--tint { background: var(--c-white); }

.sec-head { margin-bottom: var(--sp-6); }
.sec-head__en {
  display: block;
  font-size: .75rem;
  letter-spacing: .18em;
  font-weight: 700;
  color: var(--c-sub);
}
.sec-head__ja {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  line-height: 1.4;
  margin-top: var(--sp-1);
}
.sec-head__ja::after {
  content: "";
  display: block;
  width: 48px; height: 6px;
  background: var(--c-red);
  border-radius: 999px;
  margin-top: var(--sp-3);
}
.sec-head--center { text-align: center; }
.sec-head--center .sec-head__ja::after { margin-inline: auto; }
/* 暗い面に置く見出し */
.sec-head--light .sec-head__en { color: #C9C9C9; }
.sec-head--light .sec-head__ja { color: var(--c-white); }

.sec-more { margin-top: var(--sp-6); text-align: center; }

/* --- カード --- */
.card {
  background: var(--c-white);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
}

/* --- グリッド --- */
.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }


/* ==================================================================
   05. ヘッダー／グローバルナビ
   ================================================================== */

/* --- テスト環境の帯（本番ドメインでは出力されません） --- */
.staging-bar {
  background: #4A4A4A;
  color: var(--c-white);
  font-size: .75rem;
  text-align: center;
  padding: var(--sp-1) var(--gutter);
  letter-spacing: .02em;
}

/* --- ユーティリティ行（文字サイズ変更） --- */
.utility {
  background: var(--c-ink);
  color: var(--c-white);
  font-size: .8125rem;
}
.utility__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-2) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.fontsize { display: flex; align-items: center; gap: var(--sp-2); }
.fontsize__label { color: #D6D6D6; }
.fontsize__btn {
  min-height: 32px;
  padding: 0 var(--sp-3);
  border: 1px solid #767676;
  border-radius: 999px;
  background: transparent;
  color: var(--c-white);
  font-size: .8125rem;
}
/* 選択中は色だけでなく枠と太字でも示す */
.fontsize__btn[aria-pressed="true"] {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-ink);
  font-weight: 700;
}
.utility__contact { color: #D6D6D6; }
.utility__contact a { color: var(--c-white); }

/* --- ヘッダー本体 --- */
.site-header {
  background: var(--c-white);
  border-bottom: 3px solid var(--c-ink);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-3) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  /* 文字サイズ「特大」など横幅が足りないときは、
     はみ出させずに次の行へ送る（項目内での折り返しは nowrap で禁止） */
  flex-wrap: wrap;
  row-gap: var(--sp-2);
}

/* ロゴ：靴下マーク＋ロゴタイプ */
.logo { flex: 0 0 auto; }
.logo a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--c-ink);
}
.logo__mark { width: 44px; height: auto; }
.logo__type {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.1;
}
.logo__sub {
  display: block;
  font-size: .625rem;
  letter-spacing: .08em;
  font-weight: 400;
  color: var(--c-sub);
  font-family: inherit;
}

.global-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.global-nav__list { display: flex; gap: var(--sp-1); }
.global-nav__item { position: relative; }
.global-nav__link {
  display: block;
  padding: var(--sp-3) var(--sp-3);
  color: var(--c-ink);
  font-weight: 700;
  font-size: .9375rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;   /* メニューを2行に折り返さない */
}
.global-nav__link:hover { background: var(--c-red-bg); }
.global-nav__link[aria-current="page"] { box-shadow: inset 0 -5px 0 var(--c-red); }

.global-nav__sub {
  position: absolute;
  top: 100%; left: 0;
  min-width: 240px;
  background: var(--c-white);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
}
.global-nav__item:hover .global-nav__sub,
.global-nav__item:focus-within .global-nav__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.global-nav__sub a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  color: var(--c-ink);
  font-size: .875rem;
  text-decoration: none;
  border-radius: 6px;
}
.global-nav__sub a:hover { background: var(--c-red-bg); }

.header-cta { display: flex; gap: var(--sp-2); }
/* 「参加申込」「寄付」は文字数が違うので、min-width で横幅をそろえる */
.header-cta .btn {
  font-size: .875rem;
  min-height: 44px;
  min-width: 7em;
  padding-inline: var(--sp-4);
  white-space: nowrap;
}

/* 画面幅が足りなくなってきたら、折り返す前に少しずつ詰める */
@media (max-width: 1180px) {
  .site-header__inner { gap: var(--sp-3); }
  .global-nav { gap: var(--sp-3); }
  .global-nav__link { padding-inline: var(--sp-2); font-size: .875rem; }
  .header-cta .btn { padding-inline: var(--sp-3); }
  .logo__sub { display: none; }
}

/* --- スマホ用メニューボタン --- */
.menu-toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-3);
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  font-weight: 700;
  font-size: .8125rem;
}
.menu-toggle__bars { display: grid; gap: 4px; }
.menu-toggle__bars span {
  display: block; width: 20px; height: 2px; background: var(--c-ink);
}


/* ==================================================================
   06. パンくず
   ================================================================== */
.breadcrumb { background: var(--c-white); border-bottom: 1px solid var(--c-line); }
.breadcrumb__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-3) var(--gutter);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: .8125rem; }
.breadcrumb li + li::before { content: "›"; margin-right: var(--sp-2); color: var(--c-sub); }
.breadcrumb span[aria-current] { color: var(--c-sub); }


/* ==================================================================
   07. トップページ専用
   ================================================================== */

/* ------------------------------------------------------------------
   ヒーロースライダー
   中央のスライドを大きく、左右を少しのぞかせる「見本サイト」型。
   画像サイズは 1200 × 630px（横:縦 = 40:21）で用意してください。
   ------------------------------------------------------------------ */
.hero-slider {
  position: relative;
  background: #9E9E9E;          /* スライド外側の下地 */
  padding-block: var(--sp-6);
  overflow: hidden;
}
.hero-slider__viewport { overflow: hidden; }
.hero-slider__track {
  display: flex;
  align-items: stretch;
  gap: var(--sp-4);
  transition: transform .45s ease;
  will-change: transform;
}
.hero-slide {
  flex: 0 0 62%;
  opacity: .45;
  transition: opacity .45s ease;
}
.hero-slide.is-current { opacity: 1; }
.hero-slide a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-white);
}
.hero-slide img { width: 100%; aspect-ratio: 40 / 21; object-fit: cover; }

/* 前へ／次へ */
.hero-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--c-ink);
  background: var(--c-white);
  color: var(--c-ink);
  display: grid; place-items: center;
  font-size: 1.125rem;
  z-index: 3;
}
.hero-slider__nav:hover { background: var(--c-red); border-color: var(--c-red); color: var(--c-white); }
.hero-slider__nav--prev { left: 12px; }
.hero-slider__nav--next { right: 12px; }

/* インジケーター（ドット）と再生／停止 */
.hero-slider__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.hero-slider__dots { display: flex; gap: var(--sp-2); }
.hero-slider__dot {
  width: 26px; height: 26px;       /* 見た目は小さく、タップ領域は確保 */
  border: none; background: none;
  display: grid; place-items: center;
  padding: 0;
}
.hero-slider__dot::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-white);
  border: 2px solid var(--c-white);
}
.hero-slider__dot[aria-current="true"]::before {
  background: var(--c-red);
  border-color: var(--c-white);
  transform: scale(1.25);
}
.hero-slider__play {
  min-height: 32px;
  padding: 0 var(--sp-4);
  border-radius: 999px;
  border: 2px solid var(--c-white);
  background: transparent;
  color: var(--c-white);
  font-size: .75rem;
  font-weight: 700;
}

/* ------------------------------------------------------------------
   目的別の入口ボタン（スライダーのすぐ下）
   ------------------------------------------------------------------ */
.entries { background: var(--c-white); padding-block: var(--sp-7); }
.entry-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.entry-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 84px;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 999px;
  background: var(--c-ink);
  color: var(--c-white);
  text-decoration: none;
  transition: background-color .15s ease, transform .15s ease;
}
.entry-pill:hover { background: var(--c-red); transform: translateY(-2px); }
/* 赤地になったときは補足文字も白にしてコントラストを確保する */
.entry-pill:hover .entry-pill__sub { color: var(--c-white); }
/* 左端の見出しラベル（絵文字は使わず文字で示す） */
.entry-pill__label {
  flex: 0 0 auto;
  min-width: 3.6em;
  padding: var(--sp-1) var(--sp-2);
  border: 2px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  line-height: 1.6;
}
.entry-pill__text { display: grid; gap: 2px; }
.entry-pill__sub { font-size: .75rem; color: #DADADA; line-height: 1.5; }
.entry-pill__main { font-size: 1.0625rem; font-weight: 800; line-height: 1.4; }

/* --- 「BLACKSOXとは」の写真 --- */
.about-photo {
  width: 100%;
  aspect-ratio: 4 / 3;      /* 横長すぎないよう、比率を固定 */
  object-fit: cover;
  border-radius: var(--radius);
}

/* --- プログラムカード --- */
.prog-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.prog-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--c-ink);
  transition: transform .15s ease;
}
.prog-card:hover { transform: translateY(-4px); }
/* カードの主役はプログラムのロゴ。
   写真ではなくロゴを大きく見せ、内容は下のテキストで伝えます。 */
.prog-card__logo {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-line);
  padding: var(--sp-4);
}
.prog-card__logo img {
  width: auto; height: auto;
  max-width: 80%; max-height: 128px;
  object-fit: contain;
  transition: transform .15s ease;
}
.prog-card:hover .prog-card__logo img { transform: scale(1.04); }
.prog-card__body { padding: var(--sp-5); display: grid; gap: var(--sp-2); }
.prog-card__tag {
  justify-self: start;
  font-size: .75rem;
  font-weight: 700;
  color: var(--c-white);
  background: var(--c-ink);
  border-radius: 999px;
  padding: 2px var(--sp-3);
}
.prog-card--tennis  .prog-card__tag { background: var(--c-prog-2); }
.prog-card--junior  .prog-card__tag { background: var(--c-prog-1); }
.prog-card--sports  .prog-card__tag { background: var(--c-prog-3); }
.prog-card--tech    .prog-card__tag { background: var(--c-prog-4); }
.prog-card--school  .prog-card__tag { background: var(--c-prog-5); }
.prog-card__title { font-size: 1.125rem; font-weight: 800; }
.prog-card__desc { font-size: .875rem; color: var(--c-sub); }
.prog-card__meta { font-size: .8125rem; border-top: 1px dashed var(--c-line); padding-top: var(--sp-2); }
.prog-card__meta dt { float: left; clear: left; width: 4.5em; color: var(--c-sub); }

/* ------------------------------------------------------------------
   スローガンの帯（大きな写真＋キャッチコピー）
   ------------------------------------------------------------------
   ▼ 見た目の調整は、すぐ下の「設定」の数値だけ変えれば済みます。
     文言・ボタン・写真は includes/config.php の $BAND で変えられます。

   ・写真ぜんたいに黒のオーバーレイをかけ、文字は枠なしで直接のせる
     （見本サイトと同じ形）。
   ・文字は下寄せ。集合写真でも、顔が集まる上半分に文字がかからない。
   ・オーバーレイ 58% は実測値。いまの写真のいちばん明るい部分の上でも
     白文字で 5.4:1 あり、JIS/WCAG の AA 基準（4.5:1）を満たす。
     写真を差し替えるときは、明るい写真ほど数値を上げること。
   ・文字はすべて白。うすいグレーにすると基準を下回る。
   ------------------------------------------------------------------ */

/* === 設定（ここだけ変えれば見た目が変わります） =================== */
.band {
  --band-height:       clamp(480px, 56vw, 760px); /* 帯の高さ */
  --band-overlay:      .58;        /* 写真を暗くする度合い 0（そのまま）〜1（まっ黒） */
  --band-align:        flex-end;   /* 文字の縦位置 flex-end=下 / center=中央 / flex-start=上 */
  --band-text-max:     820px;      /* 文字ブロックの最大幅 */

  --band-catch-size:   clamp(1.75rem, .7rem + 3.4vw, 3.5rem); /* スローガンの大きさ */
  --band-catch-weight: 900;        /* スローガンの太さ 100〜900（900がいちばん太い） */
  --band-catch-line:   1.28;       /* スローガンの行間 */
  --band-catch-space:  -.01em;     /* スローガンの字間。詰めたいときはマイナスに */
  --band-lead-size:    1.375rem;   /* スローガンの上の「前ふり」の大きさ */

  --band-note-size:    1rem;       /* 説明文の大きさ */

  --band-btn-size:     1.125rem;   /* ボタンの文字の大きさ */
  --band-btn-height:   64px;       /* ボタンの高さ */
  --band-btn-pad:      2.25rem;    /* ボタンの左右の余白 */
  --band-btn-radius:   999px;      /* ボタンの角丸。0 にすると四角になります */
}
/* =============================================================== */

.band { position: relative; background: var(--c-ink); }
.band__photo {
  display: block;
  width: 100%;
  height: var(--band-height);
  object-fit: cover;
  object-position: 50% 50%;
}
.band__inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: var(--band-align);
  background: rgba(0, 0, 0, var(--band-overlay));
}
.band__inner .wrap { width: 100%; }
.band__panel {
  max-width: var(--band-text-max);
  padding-bottom: var(--sp-5);
  color: var(--c-white);
}
.band__en {
  font-size: .8125rem;
  letter-spacing: .18em;
  font-weight: 700;
  color: var(--c-white);
}
.band__catch {
  margin-top: var(--sp-2);
  font-size: var(--band-catch-size);
  line-height: var(--band-catch-line);
  letter-spacing: var(--band-catch-space);
  font-weight: var(--band-catch-weight);
  color: var(--c-white);
}
.band__lead {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--band-lead-size);
  font-weight: 700;
  letter-spacing: .02em;
}
.band__catch-line { display: block; }              /* 1行ぶん。<br> のかわり */
.band__catch-em {
  width: fit-content;
  box-shadow: inset 0 -.18em 0 var(--c-red);       /* 最後の行に赤の下線 */
}
.band__note {
  margin-top: var(--sp-3);
  font-size: var(--band-note-size);
  color: var(--c-white);
}
.band__btn { margin-top: var(--sp-4); }
.band__btn .btn {
  min-height: var(--band-btn-height);
  padding-inline: var(--band-btn-pad);
  border-radius: var(--band-btn-radius);
  font-size: var(--band-btn-size);
  font-weight: 700;
}

/* --- 開催日程 --- */
.event-list { display: grid; gap: var(--sp-3); }
.event {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-left: 6px solid var(--c-red);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
}
.event__date { font-weight: 800; }
.event__date span { display: block; font-size: .75rem; color: var(--c-sub); font-weight: 400; }
.event__title { font-weight: 700; }
.event__place { font-size: .8125rem; color: var(--c-sub); }

/* --- お知らせ --- */
.news-list { display: grid; gap: var(--sp-1); }
.news-item a {
  display: grid;
  grid-template-columns: 8em 9em 1fr;
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-4) var(--sp-2);
  border-bottom: 1px dashed var(--c-line);
  text-decoration: none;
  color: var(--c-ink);
}
.news-item a:hover { background: var(--c-red-bg); }
.news-item time { font-size: .875rem; color: var(--c-sub); }
.news-item__cat {
  justify-self: start;
  font-size: .75rem;
  font-weight: 700;
  border: 2px solid var(--c-ink);
  border-radius: 999px;
  padding: 1px var(--sp-3);
  background: var(--c-white);
  color: var(--c-ink);
}
.news-item__cat--report { background: var(--c-red); border-color: var(--c-red); color: var(--c-white); }
.news-item__cat--media  { background: var(--c-red-bg); border-color: var(--c-red); }
.news-item__title { text-decoration: underline; }

/* --- 数字で見る --- */
.stats { background: var(--c-ink); color: var(--c-white); }
.stat-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); text-align: center; }
.stat {
  padding: var(--sp-4) var(--sp-2);
  border-top: 5px solid var(--c-red);   /* 暗い面では赤は「面」で使う */
}
.stat__num { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: 800; color: var(--c-white); line-height: 1.2; }
.stat__num small { font-size: .5em; margin-left: .2em; }
.stat__label { font-size: .875rem; color: #D6D6D6; }

/* --- 支えるバナー --- */
.support-banners { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.support-banner {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--c-white);
  text-decoration: none;
  color: var(--c-ink);
}
.support-banner--donate {
  background: var(--c-red);
  border-color: var(--c-red);
  color: var(--c-white);
}
.support-banner--donate .btn { background: var(--c-white); border-color: var(--c-white); }
.support-banner__title { font-size: 1.25rem; font-weight: 800; }
.support-banner__desc { font-size: .9375rem; }

/* --- パートナー --- */
/* パートナーのロゴ。ロゴ画像が無い団体は名前のテキストで並びます。
   ロゴは高さをそろえ、幅は成り行き（縦横比を崩さない） */
.partner-list { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; align-items: stretch; }
.partner-list li {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
}
.partner-list a {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: var(--sp-4) var(--sp-5);
  text-decoration: none;
  color: var(--c-ink);
}
.partner-list img { max-height: 56px; width: auto; }
.partner-list__name { font-size: .875rem; font-weight: 700; text-align: center; }

.partner-note {
  margin-top: var(--sp-5);
  text-align: center;
  font-size: .8125rem;
  color: var(--c-sub);
}


/* ==================================================================
   08. 下層ページ共通
   ================================================================== */
.page-head { background: var(--c-ink); color: var(--c-white); }
.page-head__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-7) var(--gutter);
  border-left: 8px solid var(--c-red);
}
.page-head__en { font-size: .75rem; letter-spacing: .18em; color: #D6D6D6; font-weight: 700; }
.page-head__title { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); line-height: 1.4; margin-top: var(--sp-1); }
.page-head__lead { margin-top: var(--sp-3); color: #E3E3E3; }

.page-body { padding-block: var(--sp-7); }
.page-body h2 {
  font-size: 1.375rem;
  line-height: 1.5;
  margin: var(--sp-7) 0 var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 7px solid var(--c-red);
}
.page-body h2:first-child { margin-top: 0; }
.page-body h3 { font-size: 1.125rem; margin: var(--sp-6) 0 var(--sp-3); }
.page-body p + p { margin-top: var(--sp-4); }
.page-body ul.list { display: grid; gap: var(--sp-2); margin: var(--sp-4) 0; }
.page-body ul.list li { padding-left: 1.4em; position: relative; }
.page-body ul.list li::before {
  content: ""; position: absolute; left: 0; top: .7em;
  width: 10px; height: 10px; border-radius: 50%; background: var(--c-red);
}

.table-scroll { overflow-x: auto; margin: var(--sp-5) 0; }
.table-scroll table { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--c-white); font-size: .9375rem; }
.table-scroll th, .table-scroll td { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.table-scroll thead th { background: var(--c-ink); color: var(--c-white); }
.table-scroll tbody th { background: var(--c-red-bg); white-space: nowrap; }


/* ==================================================================
   09. フッター
   ================================================================== */
.site-footer {
  background: var(--c-footer-bg);
  color: var(--c-ink);
  margin-top: var(--sp-8);
  border-top: 6px solid var(--c-red);
}
.site-footer a { color: var(--c-ink); }
.site-footer__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-7) var(--gutter);
  display: grid;
  /* 左の列は、スローガン「スポーツでみんなの靴下をまっ黒にします」が
     1行に収まる幅を確保する（標準の文字サイズで約316px必要） */
  grid-template-columns: 340px 1fr;
  gap: var(--sp-7);
}
.footer-brand__logo { display: flex; align-items: center; gap: var(--sp-3); }
/* フッターが明るいグレーなので、ロゴはそのまま置ける（白い丸は不要） */
.footer-brand__logo img { width: 52px; }
.footer-brand__type { font-size: 1.25rem; font-weight: 800; letter-spacing: .04em; }
.footer-brand__catch { margin-top: var(--sp-3); font-weight: 700; color: var(--c-red); }
.footer-contact { margin-top: var(--sp-4); font-size: .875rem; display: grid; grid-template-columns: 4.5em 1fr; gap: var(--sp-1) var(--sp-3); }
.footer-contact dt { color: var(--c-sub); }
/* SNSアイコン（公式ブランドカラー）。
   アイコンは30px、押せる範囲は44px四方を確保する */
.sns { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.sns a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  text-decoration: none;
  transition: background-color .15s ease;
}
.sns a:hover { background: rgba(0, 0, 0, .07); }
.sns img { width: 30px; height: 30px; }

.footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.footer-nav__head { font-weight: 700; margin-bottom: var(--sp-2); }
.footer-nav ul { display: grid; gap: var(--sp-1); font-size: .875rem; }
.footer-nav ul a { color: var(--c-sub); }
/* リンクが並ぶ場所なので下線は常時つけず、ホバー・フォーカス時に出す
   （メール・電話は押せることを示すため下線を残す） */
.footer-nav a, .footer-sub a { text-decoration: none; }
.footer-nav a:hover, .footer-nav a:focus-visible,
.footer-sub a:hover, .footer-sub a:focus-visible { text-decoration: underline; }
.footer-nav__head a { text-decoration: none; }
.footer-nav__head a:hover { text-decoration: underline; }

.site-footer__bottom { border-top: 1px solid var(--c-footer-line); }
.site-footer__bottom-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-4) var(--gutter);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: space-between; align-items: center;
  font-size: .8125rem;
}
.footer-sub { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.copyright { color: var(--c-sub); }

/* ページ先頭へ戻る */
.to-top {
  position: fixed;
  right: 16px; bottom: 16px;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid var(--c-red);
  background: var(--c-red);
  color: var(--c-white);
  font-size: 1.25rem;
  display: none;
  z-index: 90;
}
.to-top.is-visible { display: block; }


/* ==================================================================
   10. レスポンシブ
   ================================================================== */
@media (max-width: 1080px) {
  .prog-list  { grid-template-columns: repeat(2, 1fr); }
  .entry-list { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .menu-toggle { display: inline-flex; }

  .global-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--c-white);
    border-bottom: 3px solid var(--c-ink);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-4) var(--gutter) var(--sp-6);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  .global-nav.is-open { display: flex; }

  .global-nav__list { flex-direction: column; gap: 0; }
  .global-nav__link { padding: var(--sp-4) var(--sp-2); border-bottom: 1px solid var(--c-line); }

  /* スマホではドロップダウンを常時展開（階層を隠さない） */
  .global-nav__sub {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    border: none;
    padding: var(--sp-2) 0 var(--sp-3) var(--sp-5);
    min-width: 0;
  }
  .global-nav__sub a { padding: var(--sp-2) 0; }

  .header-cta { margin-top: var(--sp-5); flex-direction: column; }
  .header-cta .btn { width: 100%; }

  .hero-slide { flex: 0 0 82%; }
  .stat-list { grid-template-columns: repeat(2, 1fr); }
  .support-banners { grid-template-columns: 1fr; }
  .footer-nav { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  /* 帯は「写真 → 文字」の縦並びにする（小さい画面で文字が写真を覆わないように） */
  .band { display: flex; flex-direction: column; }
  .band__photo { height: 260px; object-position: 50% 50%; }
  .band__inner { position: static; background: var(--c-ink); }
  .band__panel {
    max-width: none;
    padding: var(--sp-5) 0 var(--sp-6);
  }
  .band__inner .wrap { padding-block: 0; }

  .utility__inner { justify-content: center; }
  .utility__contact { width: 100%; text-align: center; }

  .logo__type { font-size: 1.125rem; }
  .hero-slide { flex: 0 0 90%; }
  .hero-slider__nav { width: 40px; height: 40px; }

  .prog-list { grid-template-columns: 1fr; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }

  .event { grid-template-columns: 1fr; gap: var(--sp-2); }
  .event .btn { width: 100%; }

  .news-item a { grid-template-columns: 1fr; gap: var(--sp-1); }
  .footer-nav { grid-template-columns: 1fr; }
}

/* 印刷時 */
@media print {
  .utility, .menu-toggle, .global-nav, .to-top, .hero-slider, .site-footer__bottom { display: none !important; }
  body { background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; }
}