// ============================================================
// FootballStyle — Article: フットサルとサッカーの違い
// テーマ: 解説 / 初心者向け
// 文字数: 約520字 (本文リード+本文)
//
// ヒーローキャッチコピー候補 (3案):
//   A: 「サッカーとは似て非なる競技。だから、面白い。」
//   B: 「5人・狭い・速い。それがフットサルの本質だ。」
//   C: 「サッカー経験者こそ、一度やってみてほしい理由。」
// ============================================================

// --- コートサイズ比較: ChatGPT生成画像 ---
const CourtComparisonAI = () => (
  <div style={{ maxWidth: 640, margin: '0 auto' }}>
    <img src="img_court_comparison_chatgpt.png" alt="サッカーとフットサルのコートサイズ比較" style={{ width: '100%', display: 'block', borderRadius: 2 }} />
  </div>
);

// --- CSS版: コートサイズ比較（オーバーレイ方式）---
// サッカーフィールドの中に、実際の比率でフットサルコートを重ねて表示
const CourtComparison = () => (
  <div style={{ maxWidth: 640, margin: '0 auto' }}>
    {/* サッカーフィールド本体（比率 105:68） */}
    <div style={{
      position: 'relative',
      aspectRatio: '105/68',
      background: 'repeating-linear-gradient(90deg,#138236 0px,#138236 20px,#0D7230 20px,#0D7230 40px)',
      border: '3px solid #0A5F24',
      overflow: 'hidden',
    }}>
      {/* センターライン */}
      <div style={{ position:'absolute', left:'50%', top:0, bottom:0, width:2, background:'rgba(255,255,255,0.6)', transform:'translateX(-50%)' }}/>
      {/* センターサークル（半径9.15m → 幅17.4%） */}
      <div style={{ position:'absolute', top:'50%', left:'50%', width:'17.4%', aspectRatio:'1/1', border:'2px solid rgba(255,255,255,0.6)', borderRadius:'50%', transform:'translate(-50%,-50%)' }}/>
      {/* ペナルティエリア 左右 (16.5m幅 / 105m = 15.7%) */}
      <div style={{ position:'absolute', left:0, top:'22%', width:'15.7%', height:'59.3%', border:'2px solid rgba(255,255,255,0.6)', borderLeft:'none' }}/>
      <div style={{ position:'absolute', right:0, top:'22%', width:'15.7%', height:'59.3%', border:'2px solid rgba(255,255,255,0.6)', borderRight:'none' }}/>
      {/* ゴールエリア 左右 (5.5m / 105m = 5.2%) */}
      <div style={{ position:'absolute', left:0, top:'34.6%', width:'5.2%', height:'30.8%', border:'2px solid rgba(255,255,255,0.6)', borderLeft:'none' }}/>
      <div style={{ position:'absolute', right:0, top:'34.6%', width:'5.2%', height:'30.8%', border:'2px solid rgba(255,255,255,0.6)', borderRight:'none' }}/>

      {/* ── フットサルコート オーバーレイ ──
          幅: 40/105 = 38.1%   高さ: 20/68 = 29.4%  */}
      <div style={{
        position:'absolute', left:'50%', top:'50%',
        width:'38.1%', height:'29.4%',
        transform:'translate(-50%,-50%)',
        background:'rgba(245,224,0,0.18)',
        border:'2.5px solid #F5E000',
        boxShadow:'0 0 14px rgba(245,224,0,0.45)',
      }}>
        {/* フットサル センターライン */}
        <div style={{ position:'absolute', left:'50%', top:0, bottom:0, width:1.5, background:'rgba(245,224,0,0.7)', transform:'translateX(-50%)' }}/>
        {/* フットサル センターサークル */}
        <div style={{ position:'absolute', top:'50%', left:'50%', width:'22%', aspectRatio:'1/1', border:'1.5px solid rgba(245,224,0,0.7)', borderRadius:'50%', transform:'translate(-50%,-50%)' }}/>
        {/* フットサル ペナルティエリア（半円）左: 半径6m → 幅15%・高さ60% */}
        <div style={{ position:'absolute', left:0, top:'20%', width:'15%', height:'60%', border:'1.5px solid rgba(245,224,0,0.6)', borderLeft:'none', borderRadius:'0 999px 999px 0' }}/>
        {/* フットサル ペナルティエリア（半円）右 */}
        <div style={{ position:'absolute', right:0, top:'20%', width:'15%', height:'60%', border:'1.5px solid rgba(245,224,0,0.6)', borderRight:'none', borderRadius:'999px 0 0 999px' }}/>
        {/* FUTSAL ラベル */}
        <div style={{
          position:'absolute', bottom:'10%', left:'50%', transform:'translateX(-50%)',
          fontFamily:"'Barlow Condensed',sans-serif", fontWeight:900, fontSize:10,
          color:'#F5E000', letterSpacing:'0.12em', whiteSpace:'nowrap',
          textShadow:'0 1px 4px rgba(0,0,0,0.9)',
        }}>FUTSAL  40m × 20m</div>
      </div>

      {/* SOCCER ラベル（左上） */}
      <div style={{
        position:'absolute', top:9, left:12,
        fontFamily:"'Barlow Condensed',sans-serif", fontWeight:900, fontSize:12,
        color:'rgba(255,255,255,0.85)', letterSpacing:'0.1em',
        textShadow:'0 1px 2px rgba(0,0,0,0.5)',
      }}>SOCCER  105m × 68m</div>

      {/* 「約1/7」バッジ（右上） */}
      <div style={{
        position:'absolute', top:8, right:10,
        background:'#F5E000', border:'2px solid #0A0A09',
        fontFamily:"'Barlow Condensed',sans-serif", fontWeight:900, fontSize:11,
        color:'#0A0A09', letterSpacing:'0.04em', padding:'3px 9px',
      }}>約 1/7 のサイズ</div>
    </div>
  </div>
);

// --- CSS版: 人数比較
// デザイン: ChatGPT画像スタイルを踏襲（サッカー=緑ストライプ / フットサル=青）
// フォーメーション: フットサル 1-2-1 / サッカー 4-2-3-1
const PlayerCount = () => {

  // 選手ドット（GK=黒、フィールド=白）
  const Dot = ({ x, y, isGK }) => (
    <div style={{
      position:'absolute', left:`${x}%`, top:`${y}%`,
      transform:'translate(-50%,-50%)',
      width:26, height:26, borderRadius:'50%',
      background: isGK ? '#111' : '#fff',
      border: isGK ? '2px solid #fff' : '2px solid rgba(0,0,0,0.18)',
      display:'flex', alignItems:'center', justifyContent:'center',
      boxShadow:'0 2px 6px rgba(0,0,0,0.4)',
      zIndex:2,
    }}>
      {isGK && <span style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:900, fontSize:8, color:'#fff', lineHeight:1 }}>GK</span>}
    </div>
  );

  // フィールドパネル共通
  const Panel = ({ title, titleBg, fieldBg, borderColor, aRatio, players, count, countColor, gkLabel, isFutsal }) => (
    <div style={{ flex:1, minWidth:180 }}>
      {/* タイトルバッジ */}
      <div style={{ display:'flex', justifyContent:'center', marginBottom:10 }}>
        <div style={{
          background:titleBg, color:'#fff', borderRadius:6,
          padding:'5px 20px',
          fontFamily:"'Noto Sans JP',sans-serif", fontWeight:900, fontSize:15,
        }}>{title}</div>
      </div>

      {/* フィールド */}
      <div style={{ position:'relative', aspectRatio:aRatio, background:fieldBg, border:`3px solid ${borderColor}`, overflow:'hidden', borderRadius:2 }}>
        {/* センターライン */}
        <div style={{ position:'absolute', left:'50%', top:0, bottom:0, width:2, background:'rgba(255,255,255,0.75)', transform:'translateX(-50%)' }}/>
        {/* センターサークル */}
        <div style={{ position:'absolute', top:'50%', left:'50%', width:'18%', aspectRatio:'1/1', border:'2px solid rgba(255,255,255,0.75)', borderRadius:'50%', transform:'translate(-50%,-50%)' }}/>

        {isFutsal ? (
          /* フットサル: 半円ペナルティエリア（半径6m → 幅15%・高さ60%） */
          <>
            <div style={{ position:'absolute', left:0, top:'20%', width:'15%', height:'60%', border:'2px solid rgba(255,255,255,0.75)', borderLeft:'none', borderRadius:'0 999px 999px 0' }}/>
            <div style={{ position:'absolute', right:0, top:'20%', width:'15%', height:'60%', border:'2px solid rgba(255,255,255,0.75)', borderRight:'none', borderRadius:'999px 0 0 999px' }}/>
          </>
        ) : (
          /* サッカー: 矩形ペナルティエリア */
          <>
            <div style={{ position:'absolute', left:0, top:'22%', width:'16%', height:'56%', border:'2px solid rgba(255,255,255,0.75)', borderLeft:'none' }}/>
            <div style={{ position:'absolute', right:0, top:'22%', width:'16%', height:'56%', border:'2px solid rgba(255,255,255,0.75)', borderRight:'none' }}/>
          </>
        )}

        {/* 選手 */}
        {players.map((p, i) => <Dot key={i} x={p.x} y={p.y} isGK={p.isGK} />)}
      </div>

      {/* 人数 */}
      <div style={{ textAlign:'center', marginTop:8, display:'flex', alignItems:'baseline', gap:3, justifyContent:'center' }}>
        <span style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:900, fontSize:44, color:countColor, lineHeight:1 }}>{count}</span>
        <span style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:16, color:'#5E5E55' }}>人</span>
      </div>
      {/* 凡例 */}
      <div style={{ display:'flex', gap:12, justifyContent:'center', fontFamily:"'Barlow Condensed',sans-serif", fontSize:12, color:'#5E5E55', marginTop:3 }}>
        <span><span style={{ color:'#111' }}>●</span> {gkLabel}</span>
        <span><span style={{ color:'rgba(0,0,0,0.35)', background:'#fff', borderRadius:'50%', display:'inline-block', width:10, height:10, border:'1px solid rgba(0,0,0,0.2)', verticalAlign:'middle', marginRight:3 }}></span>フィールド</span>
      </div>
    </div>
  );

  // ── フットサル 1-2-1 ──
  // GK | フィクソ(1) | アラ×2 | ピヴォ(1)
  const futsalPlayers = [
    { x:7,  y:50, isGK:true  },  // GK（ゴレイロ）
    { x:30, y:50, isGK:false },  // フィクソ
    { x:55, y:24, isGK:false },  // アラ（左）
    { x:55, y:76, isGK:false },  // アラ（右）
    { x:79, y:50, isGK:false },  // ピヴォ
  ];

  // ── サッカー 4-2-3-1 ──
  // GK | 4DF | 2DM | 3AM | 1FW
  const soccerPlayers = [
    { x:5,  y:50, isGK:true  },  // GK
    { x:20, y:14, isGK:false },  // DF
    { x:20, y:38, isGK:false },  // DF
    { x:20, y:62, isGK:false },  // DF
    { x:20, y:86, isGK:false },  // DF
    { x:38, y:35, isGK:false },  // DM
    { x:38, y:65, isGK:false },  // DM
    { x:57, y:17, isGK:false },  // AM（左）
    { x:57, y:50, isGK:false },  // AM（中）
    { x:57, y:83, isGK:false },  // AM（右）
    { x:75, y:50, isGK:false },  // FW
  ];

  return (
    <div style={{ background:'#fff', borderRadius:2, padding:'4px 0' }}>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 32px 1fr', gap:8, alignItems:'center' }}>
        <Panel
          title="フットサル" titleBg="#1565C0"
          fieldBg="#1E88E5" borderColor="#1565C0" aRatio="2/1"
          players={futsalPlayers} count={5} countColor="#1565C0"
          gkLabel="ゴレイロ" isFutsal={true}
        />
        <div style={{ textAlign:'center' }}>
          <span style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:900, fontSize:20, color:'#E8442D' }}>VS</span>
        </div>
        <Panel
          title="サッカー" titleBg="#2E7D32"
          fieldBg="repeating-linear-gradient(180deg,#5CB85C 0px,#5CB85C 22px,#4CAF50 22px,#4CAF50 44px)"
          borderColor="#2E7D32" aRatio="105/68"
          players={soccerPlayers} count={11} countColor="#2E7D32"
          gkLabel="GK"
        />
      </div>
    </div>
  );
};

// --- メインArticleコンポーネント ---
const ArticleFutsalVsSoccer = ({ setRoute }) => {
  const isMobile = useIsMobile();

  return (
    <main style={{ paddingBottom: 96, background: '#F7F7F4' }}>

      {/* ===== HERO ===== */}
      <section style={{ background: '#0A0A09', color: '#fff', borderBottom: '4px solid #F5E000' }}>
        <Container style={{ padding: '40px 24px 56px' }}>
          {/* タグ行 */}
          <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
            <Tag variant="pitch">解説</Tag>
            <Tag variant="ink">はじめてのフットサル</Tag>
          </div>
          {/* ヘッドライン + 画像 */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : '1.3fr 1fr',
            gap: isMobile ? 24 : 40,
            alignItems: 'center',
          }}>
            <div>
              {/*
                ヒーローキャッチコピー — 採用案: B
                他の候補:
                  A: 「サッカーとは似て非なる競技。だから、面白い。」
                  C: 「サッカー経験者こそ、一度やってみてほしい理由。」
              */}
              <h1 style={{
                fontFamily: 'var(--font-sans)', fontWeight: 900,
                fontSize: 'clamp(28px, 4.2vw, 52px)',
                lineHeight: 1.18, margin: 0, letterSpacing: '-0.01em',
              }}>
                <em style={{ fontStyle: 'normal', color: '#F5E000' }}>5人・狭い・速い。</em><br />
                それがフットサルの本質だ。
              </h1>
              <p style={{ fontSize: 17, color: '#BFBFB3', marginTop: 18, maxWidth: 480, lineHeight: 1.75 }}>
                サッカーと何が違うの？ その疑問をコート図・人数・ルールの3軸で徹底解説。
              </p>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, marginTop: 24, color: '#F5E000', letterSpacing: '0.05em' }}>
                2026.04.28 ・ 編集部 ・ 読了 5分
              </div>
            </div>
            <PhotoBlock aspect="4/3" imageUrl="img_hero.png" alt="フットサルの試合シーン" />
          </div>
        </Container>
      </section>

      {/* ===== BODY + SIDEBAR ===== */}
      <Container style={{ marginTop: isMobile ? 32 : 56 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '720px 1fr',
          gap: isMobile ? 32 : 48,
          alignItems: 'flex-start',
        }}>

          {/* ===== 記事本文 ===== */}
          <article style={{
            fontFamily: 'var(--font-sans)', fontSize: 15,
            lineHeight: 1.9, color: '#1A1A17', letterSpacing: '0.02em',
          }}>

            {/* リード文 */}
            <p style={{ fontSize: 17, lineHeight: 1.85, marginBottom: 8, color: '#3A3A30' }}>
              「フットサルってサッカーと何が違うの？」——始める前に誰もが感じる疑問です。ルールが違う、人数が違う、なんとなくは知っていても、具体的な違いがわからない方も多いはず。
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.85, marginBottom: 8, color: '#3A3A30' }}>
              この記事では<strong>コート・人数・ルール</strong>の3軸で、サッカーとフットサルの違いを図解つきで徹底比較します。
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.85, marginBottom: 32, color: '#3A3A30' }}>
              5分読めば「どちらが自分に合っているか」「なぜフットサルは個人技が上がると言われるのか」がすっきりわかります。
            </p>

            {/* セクション1: コートサイズ */}
            <h2 style={{
              fontFamily: 'var(--font-sans)', fontWeight: 900, fontSize: 26,
              margin: '0 0 16px', borderLeft: '6px solid #F5E000', paddingLeft: 16,
            }}>コートのサイズ — 約7分の1の世界</h2>
            <p style={{ marginBottom: 20 }}>
              フットサルのコートは約40m×20m。一般的なサッカーフィールド（約105m×68m）のおよそ<strong>7分の1</strong>しかありません。狭い分だけ一人ひとりへの要求が高く、常に判断を迫られます。ボールも専用の4号球（低バウンド）を使用し、跳ねにくい分だけ足元の技術が直接結果に出やすいのが特徴です。
            </p>

            {/* コート比較図 */}
            <div style={{ background: '#fff', border: '2px solid #DDDDD4', padding: '24px 20px', marginBottom: 32 }}>
              <Eyebrow>COURT COMPARISON</Eyebrow>
              <div style={{ marginTop: 16 }}>
                <CourtComparisonAI />
              </div>
              <p style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#5E5E55', margin: '12px 0 0' }}>
                ※ 図は概略スケール。実際の競技規則により寸法は多少変動します。
              </p>
            </div>

            {/* セクション2: 人数 */}
            <h2 style={{
              fontFamily: 'var(--font-sans)', fontWeight: 900, fontSize: 26,
              margin: '0 0 16px', borderLeft: '6px solid #F5E000', paddingLeft: 16,
            }}>人数 — 5人 vs 11人</h2>
            <p style={{ marginBottom: 20 }}>
              フットサルは1チーム<strong>5人</strong>（ゴールキーパー＝ゴレイロ1人＋フィールドプレーヤー4人）でプレーします。サッカーの11人と比べて約半分。コンパクトなコートに少人数が密集するため、ボールに関わる頻度がサッカーとは比べ物になりません。初心者でも試合の中心に入りやすいのは、この人数の少なさが理由のひとつです。
            </p>

            {/* 人数比較図 */}
            <div style={{ background: '#fff', border: '2px solid #DDDDD4', padding: '24px 20px', marginBottom: 32 }}>
              <Eyebrow>PLAYER COUNT</Eyebrow>
              <div style={{ marginTop: 16 }}>
                <PlayerCount />
              </div>
            </div>

            {/* セクション3: ルールの違い */}
            <h2 style={{
              fontFamily: 'var(--font-sans)', fontWeight: 900, fontSize: 26,
              margin: '0 0 16px', borderLeft: '6px solid #F5E000', paddingLeft: 16,
            }}>主なルールの違い</h2>
            <p style={{ marginBottom: 20 }}>
              フットサル最大の特徴は<strong>オフサイドがないこと</strong>。これだけでサッカーとは根本的に異なる戦術が生まれます。また、スローインの代わりに足で行う「キックイン」、ゴールキックの代わりにゴレイロからのクリアランス（4秒ルールあり）など、プレーの再開方法も独自のルールが設けられています。
            </p>

            {/* ルール比較表 */}
            <div style={{ background: '#fff', border: '2px solid #0A0A09', overflow: 'auto', marginBottom: 12 }}>
              <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: 'var(--font-sans)', fontSize: 13 }}>
                <thead>
                  <tr style={{ background: '#0A0A09', color: '#fff' }}>
                    {['項目', 'フットサル', 'サッカー'].map(h => (
                      <th key={h} style={{
                        padding: '12px 14px', textAlign: 'left',
                        fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 700,
                        letterSpacing: '0.08em', textTransform: 'uppercase',
                      }}>{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {[
                    ['コートサイズ',     '約 40m × 20m',               '約 105m × 68m',        false],
                    ['1チームの人数',    '5人（交代自由）',              '11人（交代3〜5人）',     false],
                    ['ボール',           '4号球（低バウンド）',           '5号球（通常）',          false],
                    ['オフサイド',       'なし',                         'あり',                  true],
                    ['スローイン',       'キックイン（足で蹴る）',         'スローイン（手で投げる）', false],
                    ['GKの呼び方',       'ゴレイロ',                     'ゴールキーパー',          false],
                    ['プレー再開4秒ルール', 'あり',                      'なし',                  false],
                    ['試合時間',         '前後半 各20分（時計停止制）',   '前後半 各45分',           false],
                  ].map(([item, futsal, soccer, highlight], i) => (
                    <tr key={i} style={{
                      background: highlight ? '#FFFCE6' : (i % 2 ? '#F7F7F4' : '#fff'),
                      borderTop: '1px solid #EDEDE7',
                    }}>
                      <td style={{ padding: '11px 14px', fontWeight: 700, color: '#0A0A09' }}>
                        {highlight && (
                          <span style={{
                            background: '#F5E000', color: '#0A0A09',
                            fontFamily: 'var(--font-display)', fontSize: 9, fontWeight: 900,
                            padding: '2px 5px', marginRight: 6, letterSpacing: '0.05em',
                          }}>KEY</span>
                        )}
                        {item}
                      </td>
                      <td style={{ padding: '11px 14px', color: '#138236', fontWeight: 600 }}>{futsal}</td>
                      <td style={{ padding: '11px 14px', color: '#5E5E55' }}>{soccer}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <p style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#5E5E55', marginBottom: 32 }}>
              ※ 競技規則は大会・連盟により異なる場合があります。
            </p>

            {/* セクション4: まとめ */}
            <h2 style={{
              fontFamily: 'var(--font-sans)', fontWeight: 900, fontSize: 26,
              margin: '0 0 16px', borderLeft: '6px solid #F5E000', paddingLeft: 16,
            }}>まとめ — サッカーとは「別競技」。でも繋がっている。</h2>

            {/* おさらいボックス */}
            <div style={{ background: '#FFFCE6', border: '2px solid #F5E000', padding: '18px 22px', marginBottom: 20, borderRadius: 2 }}>
              <p style={{ fontWeight: 900, fontSize: 14, marginBottom: 10, color: '#0A0A09', letterSpacing: '0.04em' }}>この記事のポイント</p>
              <ul style={{ margin: 0, paddingLeft: 20, fontSize: 15, lineHeight: 2, color: '#1A1A17' }}>
                <li><strong>コートサイズ</strong>：フットサルはサッカーの約<strong>7分の1</strong>（40m × 20m）</li>
                <li><strong>人数</strong>：フットサルは<strong>5人</strong>、サッカーは<strong>11人</strong></li>
                <li><strong>最大の違い</strong>：フットサルには<strong>オフサイドがない</strong></li>
                <li><strong>ボール</strong>：低バウンドの4号球で足元の技術が直接結果に出る</li>
              </ul>
            </div>

            <p style={{ marginBottom: 16 }}>
              狭いコート・少ない人数・オフサイドなし——これらが組み合わさることで、フットサルでは「個人技術」と「2人組の連係」が極めて重要になります。常にプレッシャーを受けながら素早く判断する経験は、そのままサッカーの個人戦術向上に直結します。
            </p>
            <p style={{ marginBottom: 32 }}>
              別競技でありながら、互いを高め合える——それがフットサルとサッカーの関係です。まずは近くの<strong>個サル（個人参加フットサル）</strong>に参加して、コートの狭さと速さを実際に体感してみてください。
            </p>

            {/* 免責 */}
            <p style={{
              fontFamily: 'var(--font-mono)', fontSize: 13, color: '#5E5E55',
              margin: '48px 0 0', borderTop: '1px solid #DDDDD4', paddingTop: 24, lineHeight: 1.7,
            }}>
              ※ 本記事の数値・ルールは一般的な競技規則を参考にまとめたものです。大会や連盟によって異なる場合があります。
            </p>
          </article>

          {/* ===== SIDEBAR ===== */}
          <aside style={{
            position: isMobile ? 'static' : 'sticky',
            top: 96,
            display: 'flex', flexDirection: 'column', gap: 28,
          }}>
            {/* 目次 */}
            <div style={{ background: '#fff', border: '1px solid #DDDDD4', padding: 18 }}>
              <Eyebrow>TABLE OF CONTENTS</Eyebrow>
              <ol style={{ paddingLeft: 22, margin: '12px 0 0', fontSize: 13, lineHeight: 1.9, color: '#1A1A17' }}>
                <li>コートのサイズ — 約7分の1の世界</li>
                <li>人数 — 5人 vs 11人</li>
                <li>主なルールの違い</li>
                <li>まとめ — サッカーとは「別競技」。でも繋がっている。</li>
              </ol>
            </div>

            {/* 関連記事 */}
            <div>
              <Eyebrow>RELATED</Eyebrow>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 12 }}>
                {[
                  { t: 'フットサルの4大局面を理解しよう', tone: 'pitch' },
                  { t: '個人戦術の基本 — ドリブルと1対1',  tone: 'night' },
                  { t: '2人組の関係：ワンツーとパラレラ',   tone: 'teal'  },
                ].map((r, i) => (
                  <a key={i} onClick={() => setRoute && setRoute('article')} style={{ display: 'grid', gridTemplateColumns: '72px 1fr', gap: 12, cursor: 'pointer', textDecoration: 'none' }}>
                    <PhotoBlock aspect="1/1" tone={r.tone} />
                    <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 700, color: '#0A0A09', lineHeight: 1.45 }}>{r.t}</div>
                  </a>
                ))}
              </div>
            </div>

            {/* ニュースレター */}
            <div style={{ background: '#0A0A09', color: '#fff', padding: 20 }}>
              <Eyebrow color="#F5E000">NEWSLETTER</Eyebrow>
              <p style={{ fontSize: 13, color: '#BFBFB3', margin: '8px 0 14px', lineHeight: 1.6 }}>毎週、新着記事と動画をお届け。</p>
              <Button variant="accent" size="sm" icon="arrow-right">登録する</Button>
            </div>
          </aside>

        </div>
      </Container>
    </main>
  );
};

window.ArticleFutsalVsSoccer = ArticleFutsalVsSoccer;
