/* ============================================================
   東京レジスターズ — デザイントークン（白ベース・2026）
   全ページ共通。色・余白・タイポ・フォントの基準＝デザインの背骨。
   ※ WordPressテーマ移行時もこのトークンをそのまま流用する。
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@400;500;700;900&display=swap");

:root {
    /* ── フォント ── */
    --font-body:
        "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --font-display:
        "Oswald", "Arial Narrow", sans-serif; /* 英字見出し用（多ウェイト） */

    /* ── カラー：ベース（白） ── */
    --c-bg: #ffffff; /* 背景の主役 */
    --c-surface: #f5f6f7; /* セクション地色（オフホワイト） */
    --c-line: #e8eaed; /* 罫線・カード境界 */
    --c-muted: #8a93a0; /* 補助文字 */
    /* ── カラー：アクセント（黒）※クライアント確定：青は使わず黒をアクセントに ── */
    --c-ink: #0e1116; /* テキスト主役・見出し */
    --c-ink-sub: #2c3138; /* サブテキスト */
    --c-accent: #0e1116; /* アクセント＝黒（CTA・強調・リンクhover等） */
    /* ── 機能色 ── */
    --c-success: #27ae60;
    --c-error: #e2552b;

    /* ── 余白スケール（4px基準） ── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-8: 48px;
    --sp-10: 64px;
    --sp-12: 80px;
    --sp-16: 120px;

    /* ── 形状・影 ── */
    --radius: 2px;
    --shadow-card: 0 12px 30px rgba(16, 43, 141, 0.1);

    /* ── ブレイクポイント（参考値） ── */
    /* PC>960 / tablet 640-960 / SP<640 */

    /* ============================================================
       既存ワイヤーCSS互換エイリアス（白ベースのグレースケール）
       ※ 各セクションを本デザイン化する際に上記 --c-* へ順次移行する。
       ============================================================ */
    --black: #ffffff;
    --dark: #f5f6f7;
    --g900: #eef0f2;
    --g800: #e2e5e9;
    --g700: #d2d6db;
    --g600: #b9bfc6;
    --g500: #969ca4;
    --g400: #767c84;
    --g300: #565b62;
    --g200: #34383d;
    --g100: #1a1d21;
    --white: #14171a;
    --pure: #000000;
    --rule: 1px solid #e2e5e9;
    --rule-thin: 1px solid #eef0f2;
    --pure-white: #14171a;
    --gray-900: #eef0f2;
    --gray-800: #e2e5e9;
    --gray-700: #d2d6db;
    --gray-600: #b9bfc6;
    --gray-500: #969ca4;
    --gray-400: #767c84;
    --gray-300: #565b62;
    --gray-200: #34383d;
    --gray-100: #1a1d21;

    /* ショートハンド（ティッカー等で使用）※青は廃止し黒に統一 */
    --ink: #0e1116;
    --blue: #0e1116;
}

/* 特大英字見出し群に英字表示フォント（--font-display ＝ Oswald）を適用
   （日本語は本文＝Noto のまま）。トラッキングを微調整。 */
/* 旧名（他ページ＝top.css非依存ページで使用中のため残置）＋ FLOCSS新名（TOP） */
.hero-statement,
.page-title,
.section-header__title,
.players-faces-title,
.vision-headline,
.join-headline,
.partners-title,
.company-title,
.moment-headline,
.fixtures-opponent,
.homeground-headline,
.p-hero__statement,
.c-section-header__title,
.p-vision__headline,
.p-join__headline,
.p-homeground__headline {
    font-family: var(--font-display);
    letter-spacing: 0.02em !important;
}

/* ── 表示切替ユーティリティ（モバイルファースト：ベース＝SP表示） ── */
.sp-only { display: block !important; }
.pc-only { display: none !important; }

@media (min-width: 769px) {
    .sp-only { display: none !important; }
    .pc-only { display: block !important; }
}

/* 視覚的に隠してスクリーンリーダーには読ませる（SVG化見出しの文言保持など） */
.u-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;
}