<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AREXYZ Club OS</title>
  <meta name="description" content="クラブ運営・育成・分析・個人最適・トレーニング実行を、一つのOSへ。AREXYZ Club OS はクラブ全体を動かす Sports Execution Operating System。">
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header class="site-header">
    <div class="container header-inner">
      <a href="./" class="brand">
        <img src="assets/logo.png" alt="AREXYZ logo" class="brand-logo" />
        <span class="brand-text">AREXYZ Club OS</span>
      </a>

      <nav class="desktop-nav">
        <a href="#solution">Solution</a>
        <a href="#functions">Functions</a>
        <a href="#difference">Difference</a>
        <a href="#pricing">Pricing</a>
      </nav>

      <div class="header-actions">
        <a href="#cta" class="btn btn-outline btn-small">導入相談</a>
        <button class="menu-toggle" id="menuToggle" aria-label="menu" aria-expanded="false">
          <span></span><span></span><span></span>
        </button>
      </div>
    </div>

    <div class="mobile-nav" id="mobileNav">
      <a href="#solution">Solution</a>
      <a href="#functions">Functions</a>
      <a href="#difference">Difference</a>
      <a href="#pricing">Pricing</a>
      <a href="#cta">導入相談</a>
    </div>
  </header>

  <main>
    <section class="hero">
      <div class="hero-os-visual">
        <img src="assets/hero_os.jpg" alt="AREXYZ Club OS hero visual" />
        <div class="hero-overlay"></div>
      </div>

      <div class="container hero-content">
        <p class="eyebrow">Sports Execution Operating System</p>

        <h1>
          クラブは、もう“分析するもの”ではない。<br>
          動かすものだ。
        </h1>

        <p class="hero-description">
          分析・個人最適・トレーニング実行・保護者対応・クラブ運営まで統合する
          <strong>AREXYZ Club OS</strong>。<br>
          分析・個人最適・トレーニング実行・クラブ運営を一気通貫で接続する Sports Execution Operating System。
        </p>

        <div class="hero-cta">
          <a href="./demo.html" class="btn btn-primary">デモを見る</a>
          <a href="./contact.html" class="btn btn-outline">導入相談</a>
        </div>
      </div>
    </section>

    <section class="ui-proof">
      <div class="container ui-proof-grid">
        <div class="ui-proof-copy">
          <p class="section-label">Execution Layer</p>
          <h2>
            分析・意思決定・個人最適・
            トレーニング実行まで、
            すべてが一つにつながる。
          </h2>
          <p>
            AREXYZは、単なる分析ツールではありません。
            コーチ、選手、トレーニング、保護者、クラブ経営を分断させず、
            実行まで接続するためのOSです。
          </p>
          <ul class="check-list">
            <li>AI戦術分析</li>
            <li>個別最適化</li>
            <li>トレーニング設計</li>
            <li>保護者レポート</li>
            <li>クラブ経営管理</li>
          </ul>
        </div>

        <div class="ui-proof-image-card">
          <img src="assets/ui_dashboard.png" alt="AREXYZ dashboard UI" />
        </div>
      </div>
    </section>

    <section class="section" id="solution">
      <div class="container">
        <div class="section-head">
          <p class="section-label">Problem / Solution</p>
          <h2>クラブは“分析不足”ではなく、“接続不足”で損をしている。</h2>
          <p>
            データはあるのに意思決定に繋がらない。分析結果がトレーニングに落ちない。
            個人とチーム、経営と現場、保護者対応が分断されている。
            AREXYZは、その断絶をつなぎ直します。
          </p>
        </div>

        <div class="cards two">
          <article class="card">
            <h3>Before</h3>
            <ul>
              <li>データはあるが活用されない</li>
              <li>分析がトレーニングに落ちない</li>
              <li>コーチ・経営・保護者が分断</li>
              <li>育成と収益が別々に最適化</li>
            </ul>
          </article>

          <article class="card">
            <h3>After</h3>
            <ul>
              <li>分析 → 意思決定 → 実行まで接続</li>
              <li>個人最適がトレーニングに反映</li>
              <li>経営・現場・保護者が統合</li>
              <li>再現可能な育成と運営へ</li>
            </ul>
          </article>
        </div>
      </div>
    </section>

    <section class="section" id="functions">
      <div class="container">
        <div class="section-head">
          <p class="section-label">Functions</p>
          <h2>分析で終わらず、個人最適と実行に接続する。</h2>
        </div>

        <div class="cards three">
          <article class="card function-card">
            <div class="icon">⚽</div>
            <h3>Player Development</h3>
            <p>スキル、フィジカル、成長トラッキング、個別パフォーマンス分析。</p>
          </article>

          <article class="card function-card">
            <div class="icon">🧠</div>
            <h3>Personal Optimization</h3>
            <p>疲労、リスク、コンディション、準備度を一人ひとりに最適化。</p>
          </article>

          <article class="card function-card">
            <div class="icon">🏃</div>
            <h3>Training Intelligence</h3>
            <p>AIがトレーニング設計・実行・フィードバックループを支援。</p>
          </article>

          <article class="card function-card">
            <div class="icon">🎯</div>
            <h3>Performance & Tactical</h3>
            <p>試合・戦術・シミュレーション・リーグ比較までを構造化。</p>
          </article>

          <article class="card function-card">
            <div class="icon">🏟️</div>
            <h3>Club Management</h3>
            <p>財務、会員継続率、スタッフ配置、運営指標を一元管理。</p>
          </article>

          <article class="card function-card">
            <div class="icon">👨‍👩‍👧</div>
            <h3>Parent Reporting</h3>
            <p>保護者説明会、月次レポート、コミュニケーションを構造化。</p>
          </article>
        </div>
      </div>
    </section>

    <section class="section" id="difference">
      <div class="container">
        <div class="section-head">
          <p class="section-label">Difference</p>
          <h2>“分析で終わるツール”と、“成果を出すOS”の違い。</h2>
        </div>

        <div class="table-wrap">
          <table class="compare-table">
            <thead>
              <tr>
                <th>項目</th>
                <th>従来ツール</th>
                <th>AREXYZ Club OS</th>
              </tr>
            </thead>
            <tbody>
              <tr><td>分析</td><td>○</td><td>○</td></tr>
              <tr><td>戦術</td><td>○</td><td>○</td></tr>
              <tr><td>個人最適</td><td>△</td><td>◎</td></tr>
              <tr><td>トレーニング生成</td><td>×</td><td>◎</td></tr>
              <tr><td>クラブ経営</td><td>×</td><td>○</td></tr>
              <tr><td>保護者対応</td><td>×</td><td>○</td></tr>
              <tr><td>実行連動</td><td>×</td><td>◎</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>

    <section class="section" id="pricing">
      <div class="container pricing-grid">
        <div class="card pricing-main">
          <p class="section-label">Pricing</p>
          <p class="pricing-prelead">これはツールではなく、クラブ運営OSです。</p>
          <h2>月額 300,000円〜</h2>
          <p>
            分析ツールではなく、育成・個人最適・トレーニング実行・経営・保護者導線を統合した
            <strong>Club Operating System</strong> としての価格設計です。
          </p>
          <div class="hero-cta">
            <a href="./contact.html" class="btn btn-primary">導入相談</a>
            <a href="./contact.html#document" class="btn btn-outline">資料請求</a>
          </div>
        </div>

        <div class="card pricing-side">
          <h3>Plan Notes</h3>
          <ul>
            <li>初月トライアルあり</li>
            <li>クラブ規模に応じたカスタム対応</li>
            <li>デモ環境・導入支援・保守運用に対応</li>
            <li>独自ドメイン・決済連携も拡張可能</li>
          </ul>
        </div>
      </div>
    </section>

    <section class="section cta-section" id="cta">
      <div class="container">
        <div class="card cta-card">
          <p class="section-label">Call To Action</p>
          <h2>まずは、クラブOSを体験してください。</h2>
          <p>
            AREXYZは、分析・個人最適・トレーニング実行・クラブ運営をひとつに接続する
            Sports Execution OSです。
          </p>
          <div class="hero-cta">
            <a href="./demo.html" class="btn btn-primary">デモ予約</a>
            <a href="./contact.html" class="btn btn-outline">導入相談</a>
            <a href="./contact.html#document" class="btn btn-outline">資料請求</a>
          </div>
        </div>
      </div>
    </section>
  </main>

  <script src="app.js"></script>
</body>
</html>
