最新2025年版 Gemini CLIとClaude Code簡単導入（Win・Mac）

import React from 'react';

const WindowsMacInstallGuide = () => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="bg-white rounded-xl shadow-lg p-8 mb-8">
          <h1 className="text-3xl font-bold text-gray-800 mb-6 text-center">
            Gemini CLI と Claude Code のインストール方法
          </h1>
          <p className="text-lg text-gray-600 text-center mb-4">
            Windows・Mac対応 パソコン初心者向けガイド
          </p>
          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
            <p className="text-yellow-800 text-sm font-medium">
              ⚠️ 重要：どちらのツールもNode.js 18以上が必要です。まずNode.jsをインストールしてから各ツールの導入を進めてください。
            </p>
          </div>
        </div>

        {/* OS Selection */}
        <div className="grid md:grid-cols-2 gap-8 mb-8">
          <div className="bg-white rounded-xl shadow-lg p-6">
            <div className="flex items-center mb-4">
              <div className="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mr-4">
                <span className="text-white font-bold text-xl">W</span>
              </div>
              <h2 className="text-2xl font-bold text-gray-800">Windows</h2>
            </div>
            <div className="space-y-3">
              <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
                <p className="text-blue-800 font-medium text-sm">推奨環境</p>
                <ul className="text-blue-700 text-sm mt-1 list-disc list-inside">
                  <li>Windows 10/11</li>
                  <li>PowerShell 5.0以上</li>
                  <li>管理者権限（初回のみ）</li>
                </ul>
              </div>
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-lg p-6">
            <div className="flex items-center mb-4">
              <div className="w-12 h-12 bg-gray-700 rounded-lg flex items-center justify-center mr-4">
                <span className="text-white font-bold text-xl">M</span>
              </div>
              <h2 className="text-2xl font-bold text-gray-800">macOS</h2>
            </div>
            <div className="space-y-3">
              <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
                <p className="text-gray-800 font-medium text-sm">推奨環境</p>
                <ul className="text-gray-700 text-sm mt-1 list-disc list-inside">
                  <li>macOS 10.15以上</li>
                  <li>Xcode Command Line Tools</li>
                  <li>Homebrew（推奨）</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        {/* Node.js Installation */}
        <div className="bg-white rounded-xl shadow-lg p-8 mb-8">
          <div className="flex items-center mb-6">
            <div className="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center mr-4">
              <span className="text-white font-bold text-xl">1</span>
            </div>
            <h2 className="text-2xl font-bold text-gray-800">Node.js のインストール（事前準備）</h2>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {/* Windows Node.js */}
            <div className="bg-blue-50 rounded-lg p-6">
              <h3 className="text-lg font-semibold text-blue-800 mb-4">Windows の場合</h3>
              <div className="space-y-4">
                <div>
                  <h4 className="font-medium text-gray-800 mb-2">方法1: 公式インストーラー（推奨）</h4>
                  <ol className="list-decimal list-inside space-y-2 text-sm text-gray-700">
                    <li>
                      <a href="https://nodejs.org/ja" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">
                        Node.js公式サイト
                      </a>
                      にアクセス
                    </li>
                    <li>「LTS（推奨版）」をクリックしてダウンロード</li>
                    <li>ダウンロードした.msiファイルを実行</li>
                    <li>インストーラーの指示に従って進める</li>
                  </ol>
                </div>
                <div>
                  <h4 className="font-medium text-gray-800 mb-2">方法2: PowerShellでnvm使用</h4>
                  <div className="bg-gray-800 text-green-400 p-3 rounded font-mono text-xs">
                    # 実行ポリシーを一時変更<br/>
                    Set-ExecutionPolicy RemoteSigned -Scope Process<br/>
                    # nvmをインストール<br/>
                    iwr -useb https://raw.githubusercontent.com/coreybutler/nvm-windows/master/webinstall.bat | iex<br/>
                    # Node.js LTSをインストール<br/>
                    nvm install lts<br/>
                    nvm use lts
                  </div>
                </div>
              </div>
            </div>

            {/* macOS Node.js */}
            <div className="bg-gray-50 rounded-lg p-6">
              <h3 className="text-lg font-semibold text-gray-800 mb-4">macOS の場合</h3>
              <div className="space-y-4">
                <div>
                  <h4 className="font-medium text-gray-800 mb-2">方法1: Homebrew使用（推奨）</h4>
                  <div className="bg-gray-800 text-green-400 p-3 rounded font-mono text-xs">
                    # Homebrewをインストール（未インストールの場合）<br/>
                    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"<br/>
                    # Node.jsをインストール<br/>
                    brew install node
                  </div>
                </div>
                <div>
                  <h4 className="font-medium text-gray-800 mb-2">方法2: nvm使用</h4>
                  <div className="bg-gray-800 text-green-400 p-3 rounded font-mono text-xs">
                    # nvmをインストール<br/>
                    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash<br/>
                    # ターミナルを再起動または以下を実行<br/>
                    source ~/.zshrc<br/>
                    # Node.js LTSをインストール<br/>
                    nvm install --lts<br/>
                    nvm use --lts
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="mt-6 bg-green-50 border border-green-200 rounded-lg p-4">
            <h4 className="font-medium text-green-800 mb-2">インストール確認</h4>
            <div className="bg-gray-800 text-green-400 p-3 rounded font-mono text-sm">
              node --version<br/>
              npm --version
            </div>
            <p className="text-green-700 text-sm mt-2">
              両方のコマンドでバージョンが表示されれば成功です（例: v22.18.0, 10.9.3）
            </p>
          </div>
        </div>

        {/* Gemini CLI Installation */}
        <div className="bg-white rounded-xl shadow-lg p-8 mb-8">
          <div className="flex items-center mb-6">
            <div className="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mr-4">
              <span className="text-white font-bold text-xl">G</span>
            </div>
            <h2 className="text-2xl font-bold text-gray-800">Gemini CLI のインストール</h2>
          </div>

          <div className="mb-6">
            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
              <p className="text-blue-800 font-medium">概要</p>
              <p className="text-blue-700 text-sm mt-1">
                GoogleのAIコードアシスタント「Gemini」をターミナルから直接利用できるツール。
                無料で1日1000リクエストまで利用可能。
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {/* Windows Gemini CLI */}
            <div className="bg-blue-50 rounded-lg p-6">
              <h3 className="text-lg font-semibold text-blue-800 mb-4">Windows での手順</h3>
              <div className="space-y-4">
                <div>
                  <h4 className="font-medium text-gray-800 mb-2">1. PowerShellを管理者として起動</h4>
                  <p className="text-sm text-gray-600 mb-2">スタートメニュー → PowerShell → 右クリック → 管理者として実行</p>
                </div>
                <div>
                  <h4 className="font-medium text-gray-800 mb-2">2. インストールコマンド実行</h4>
                  <div className="space-y-2">
                    <p className="text-sm text-gray-600">一時的に試す場合:</p>
                    <div className="bg-gray-800 text-green-400 p-2 rounded font-mono text-xs">
                      npx https://github.com/google-gemini/gemini-cli
                    </div>
                    <p className="text-sm text-gray-600 mt-3">本格利用する場合:</p>
                    <div className="bg-gray-800 text-green-400 p-2 rounded font-mono text-xs">
                      npm install -g @google/gemini-cli
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* macOS Gemini CLI */}
            <div className="bg-gray-50 rounded-lg p-6">
              <h3 className="text-lg font-semibold text-gray-800 mb-4">macOS での手順</h3>
              <div className="space-y-4">
                <div>
                  <h4 className="font-medium text-gray-800 mb-2">1. ターミナルを起動</h4>
                  <p className="text-sm text-gray-600 mb-2">Spotlight検索（⌘+Space）→「ターミナル」と入力</p>
                </div>
                <div>
                  <h4 className="font-medium text-gray-800 mb-2">2. インストールコマンド実行</h4>
                  <div className="space-y-2">
                    <p className="text-sm text-gray-600">一時的に試す場合:</p>
                    <div className="bg-gray-800 text-green-400 p-2 rounded font-mono text-xs">
                      npx https://github.com/google-gemini/gemini-cli
                    </div>
                    <p className="text-sm text-gray-600 mt-3">本格利用する場合:</p>
                    <div className="bg-gray-800 text-green-400 p-2 rounded font-mono text-xs">
                      npm install -g @google/gemini-cli
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="mt-6 space-y-4">
            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
              <h4 className="font-medium text-yellow-800 mb-2">初回設定</h4>
              <ol className="list-decimal list-inside space-y-1 text-yellow-700 text-sm">
                <li>ターミナルで <code className="bg-yellow-100 px-1 rounded">gemini</code> と入力</li>
                <li>色のテーマを選択（Tab、Enter、矢印キーで操作）</li>
                <li>Googleアカウントでログイン</li>
              </ol>
            </div>

            <div className="bg-red-50 border border-red-200 rounded-lg p-4">
              <h4 className="font-medium text-red-800 mb-2">よくあるエラーと対処法</h4>
              <p className="text-red-700 text-sm mb-2">
                「Failed to login. Message: This account requires setting the GOOGLE_CLOUD_PROJECT env var.」
              </p>
              <p className="text-red-700 text-sm mb-2">対処法:</p>
              <div className="bg-gray-800 text-green-400 p-2 rounded font-mono text-xs mb-2">
                # Windows PowerShell<br/>
                $env:GOOGLE_CLOUD_PROJECT="your-project-id"<br/>
                # macOS/Linux<br/>
                export GOOGLE_CLOUD_PROJECT=your-project-id
              </div>
              <p className="text-red-700 text-xs">
                your-project-idは
                <a href="https://console.cloud.google.com/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">
                  Google Cloud Console
                </a>
                で確認できます
              </p>
            </div>
          </div>
        </div>

        {/* Claude Code Installation */}
        <div className="bg-white rounded-xl shadow-lg p-8 mb-8">
          <div className="flex items-center mb-6">
            <div className="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mr-4">
              <span className="text-white font-bold text-xl">C</span>
            </div>
            <h2 className="text-2xl font-bold text-gray-800">Claude Code のインストール</h2>
          </div>

          <div className="mb-6">
            <div className="bg-purple-50 border border-purple-200 rounded-lg p-4 mb-4">
              <p className="text-purple-800 font-medium">概要</p>
              <p className="text-purple-700 text-sm mt-1">
                AnthropicのAIコーディングツール。ターミナルから自然言語でコード生成、ファイル編集、
                Git操作などを自動化。Windows環境でもネイティブ対応。
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {/* Windows Claude Code */}
            <div className="bg-purple-50 rounded-lg p-6">
              <h3 className="text-lg font-semibold text-purple-800 mb-4">Windows での手順</h3>
              <div className="space-y-4">
                <div>
                  <h4 className="font-medium text-gray-800 mb-2">1. 事前準備</h4>
                  <ul className="text-sm text-gray-600 list-disc list-inside space-y-1">
                    <li>Node.js 18以上（推奨: 22 LTS）</li>
                    <li>Git for Windows（プルリクエスト作成時）</li>
                    <li>
                      <a href="https://claude.ai" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">
                        Anthropicアカウント
                      </a>
                      （月額20ドルのClaude App認証推奨）
                    </li>
                  </ul>
                </div>
                <div>
                  <h4 className="font-medium text-gray-800 mb-2">2. PowerShell設定</h4>
                  <div className="bg-gray-800 text-green-400 p-3 rounded font-mono text-xs">
                    # 実行ポリシーを一時変更<br/>
                    Set-ExecutionPolicy RemoteSigned -Scope Process<br/>
                    # 「Y」を入力してEnter
                  </div>
                </div>
                <div>
                  <h4 className="font-medium text-gray-800 mb-2">3. Claude Codeインストール</h4>
                  <div className="bg-gray-800 text-green-400 p-3 rounded font-mono text-xs">
                    npm install -g @anthropic-ai/claude-code
                  </div>
                </div>
              </div>
            </div>

            {/* macOS Claude Code */}
            <div className="bg-gray-50 rounded-lg p-6">
              <h3 className="text-lg font-semibold text-gray-800 mb-4">macOS での手順</h3>
              <div className="space-y-4">
                <div>
                  <h4 className="font-medium text-gray-800 mb-2">1. 事前準備</h4>
                  <ul className="text-sm text-gray-600 list-disc list-inside space-y-1">
                    <li>Node.js 18以上（推奨: 22 LTS）</li>
                    <li>Xcode Command Line Tools</li>
                    <li>
                      <a href="https://claude.ai" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">
                        Anthropicアカウント
                      </a>
                      （月額20ドルのClaude App認証推奨）
                    </li>
                  </ul>
                </div>
                <div>
                  <h4 className="font-medium text-gray-800 mb-2">2. Command Line Toolsインストール</h4>
                  <div className="bg-gray-800 text-green-400 p-3 rounded font-mono text-xs">
                    xcode-select --install
                  </div>
                </div>
                <div>
                  <h4 className="font-medium text-gray-800 mb-2">3. Claude Codeインストール</h4>
                  <div className="bg-gray-800 text-green-400 p-3 rounded font-mono text-xs">
                    npm install -g @anthropic-ai/claude-code
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="mt-6 space-y-4">
            <div className="bg-green-50 border border-green-200 rounded-lg p-4">
              <h4 className="font-medium text-green-800 mb-2">インストール確認</h4>
              <div className="bg-gray-800 text-green-400 p-2 rounded font-mono text-sm">
                claude --version
              </div>
              <p className="text-green-700 text-sm mt-1">バージョンが表示されれば成功です</p>
            </div>

            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
              <h4 className="font-medium text-blue-800 mb-2">初回起動と設定</h4>
              <ol className="list-decimal list-inside space-y-1 text-blue-700 text-sm">
                <li>プロジェクトディレクトリに移動</li>
                <li><code className="bg-blue-100 px-1 rounded">claude</code> と入力して起動</li>
                <li>テーマを選択</li>
                <li>Claude App（推奨）でログイン</li>
                <li>認証を完了</li>
              </ol>
            </div>
          </div>
        </div>

        {/* Usage Commands */}
        <div className="bg-white rounded-xl shadow-lg p-8 mb-8">
          <h2 className="text-2xl font-bold text-gray-800 mb-6">基本的な使い方</h2>
          
          <div className="grid md:grid-cols-2 gap-8">
            {/* Gemini CLI Commands */}
            <div className="bg-blue-50 rounded-lg p-6">
              <h3 className="text-lg font-semibold text-blue-800 mb-4">Gemini CLI コマンド</h3>
              <div className="space-y-3">
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-700">起動:</span>
                  <code className="bg-gray-100 px-2 py-1 rounded text-sm">gemini</code>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-700">終了:</span>
                  <code className="bg-gray-100 px-2 py-1 rounded text-sm">exit または Ctrl+C</code>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-700">ヘルプ:</span>
                  <code className="bg-gray-100 px-2 py-1 rounded text-sm">/help</code>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-700">履歴クリア:</span>
                  <code className="bg-gray-100 px-2 py-1 rounded text-sm">/clear</code>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-700">会話圧縮:</span>
                  <code className="bg-gray-100 px-2 py-1 rounded text-sm">/compress</code>
                </div>
              </div>
            </div>

            {/* Claude Code Commands */}
            <div className="bg-purple-50 rounded-lg p-6">
              <h3 className="text-lg font-semibold text-purple-800 mb-4">Claude Code コマンド</h3>
              <div className="space-y-3">
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-700">起動:</span>
                  <code className="bg-gray-100 px-2 py-1 rounded text-sm">claude</code>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-700">コスト確認:</span>
                  <code className="bg-gray-100 px-2 py-1 rounded text-sm">/cost</code>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-700">履歴クリア:</span>
                  <code className="bg-gray-100 px-2 py-1 rounded text-sm">/clear</code>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-700">会話圧縮:</span>
                  <code className="bg-gray-100 px-2 py-1 rounded text-sm">/compact</code>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-700">プロジェクト分析:</span>
                  <code className="bg-gray-100 px-2 py-1 rounded text-sm">/init</code>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Pricing Information */}
        <div className="bg-white rounded-xl shadow-lg p-8 mb-8">
          <h2 className="text-2xl font-bold text-gray-800 mb-6">料金プラン</h2>
          
          <div className="grid md:grid-cols-2 gap-8">
            {/* Gemini CLI Pricing */}
            <div className="bg-green-50 rounded-lg p-6">
              <h3 className="text-lg font-semibold text-green-800 mb-4">Gemini CLI</h3>
              <div className="space-y-3">
                <div className="bg-green-100 border border-green-300 rounded-lg p-3">
                  <p className="text-green-800 font-medium">無料プラン</p>
                  <ul className="text-green-700 text-sm mt-1 list-disc list-inside">
                    <li>1日1000リクエストまで</li>
                    <li>毎分60リクエスト</li>
                    <li>100万トークンのコンテキスト</li>
                  </ul>
                </div>
              </div>
            </div>

            {/* Claude Code Pricing */}
            <div className="bg-purple-50 rounded-lg p-6">
              <h3 className="text-lg font-semibold text-purple-800 mb-4">Claude Code</h3>
              <div className="space-y-3">
                <div className="bg-purple-100 border border-purple-300 rounded-lg p-3">
                  <p className="text-purple-800 font-medium">従量課金制</p>
                  <p className="text-purple-700 text-sm">月数ドル〜数十ドル（使用量に応じて）</p>
                </div>
                <div className="bg-purple-100 border border-purple-300 rounded-lg p-3">
                  <p className="text-purple-800 font-medium">Proプラン: $17/月</p>
                  <p className="text-purple-700 text-sm">Sonnet 4モデル利用可能</p>
                </div>
                <div className="bg-purple-100 border border-purple-300 rounded-lg p-3">
                  <p className="text-purple-800 font-medium">Max 5xプラン: $100/月</p>
                  <p className="text-purple-700 text-sm">Opus 4モデルも使用可能</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Troubleshooting */}
        <div className="bg-white rounded-xl shadow-lg p-8 mb-8">
          <h2 className="text-2xl font-bold text-gray-800 mb-6">トラブルシューティング</h2>
          
          <div className="space-y-6">
            <div className="bg-red-50 border border-red-200 rounded-lg p-4">
              <h3 className="font-semibold text-red-800 mb-2">Node.jsが見つからない場合</h3>
              <p className="text-red-700 text-sm mb-2">
                「'node' は、内部コマンドまたは外部コマンド...」というエラーが表示される場合
              </p>
              <ul className="text-red-700 text-sm list-disc list-inside space-y-1">
                <li>ターミナル/PowerShellを再起動してください</li>
                <li>Node.jsを再インストールしてください</li>
                <li>環境変数PATHにNode.jsが追加されているか確認してください</li>
              </ul>
            </div>

            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
              <h3 className="font-semibold text-yellow-800 mb-2">権限エラーが発生する場合</h3>
              <p className="text-yellow-700 text-sm mb-2">
                「permission denied」や「アクセスが拒否されました」というエラーが表示される場合
              </p>
              <ul className="text-yellow-700 text-sm list-disc list-inside space-y-1">
                <li>Windows: PowerShellを管理者として実行してください</li>
                <li>macOS: sudoを使用するか、npmの権限設定を変更してください</li>
                <li>npmのグローバルディレクトリを変更することも検討してください</li>
              </ul>
            </div>

            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
              <h3 className="font-semibold text-blue-800 mb-2">ネットワークエラーが発生する場合</h3>
              <p className="text-blue-700 text-sm mb-2">
                インストール中にタイムアウトやネットワークエラーが発生する場合
              </p>
              <ul className="text-blue-700 text-sm list-disc list-inside space-y-1">
                <li>インターネット接続を確認してください</li>
                <li>企業ネットワークの場合、プロキシ設定が必要な場合があります</li>
                <li>npmのレジストリを変更してみてください（npm config set registry https://registry.npmjs.org/）</li>
              </ul>
            </div>
          </div>
        </div>

        {/* Summary */}
        <div className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl shadow-lg p-8 text-white">
          <h2 className="text-2xl font-bold mb-4">まとめ</h2>
          <div className="grid md:grid-cols-2 gap-6">
            <div>
              <h3 className="text-lg font-semibold mb-2">Gemini CLI</h3>
              <ul className="text-sm space-y-1 opacity-90">
                <li>• Google製のAIコードアシスタント</li>
                <li>• 無料で1日1000リクエスト</li>
                <li>• Node.js 18以上が必要</li>
                <li>• ターミナルから直接利用可能</li>
                <li>• Google Cloudプロジェクト設定が必要な場合あり</li>
              </ul>
            </div>
            <div>
              <h3 className="text-lg font-semibold mb-2">Claude Code</h3>
              <ul className="text-sm space-y-1 opacity-90">
                <li>• Anthropic製のAIコーディングツール</li>
                <li>• 月額17ドル〜（Proプラン）</li>
                <li>• Windows・macOS両対応</li>
                <li>• 自然言語でコード生成・編集</li>
                <li>• プロジェクト全体を理解して作業</li>
              </ul>
            </div>
          </div>
          <div className="mt-6 p-4 bg-white bg-opacity-20 rounded-lg">
            <p className="text-sm">
              <strong>重要:</strong> どちらのツールもNode.jsが必要です。まずNode.jsをインストールしてから、
              各ツールのインストールを進めてください。困った時は公式ドキュメントを確認するか、
              コミュニティフォーラムで質問してみましょう。
            </p>
          </div>
        </div>

        {/* Reference Links */}
        <div className="bg-white rounded-xl shadow-lg p-8">
          <h2 className="text-2xl font-bold text-gray-800 mb-6">参考リンク</h2>
          <div className="grid md:grid-cols-2 gap-6">
            <div>
              <h3 className="text-lg font-semibold text-gray-700 mb-3">公式ドキュメント</h3>
              <ul className="space-y-2">
                <li>
                  <a href="https://nodejs.org/ja" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700 text-sm">
                    Node.js 公式サイト（日本語）
                  </a>
                </li>
                <li>
                  <a href="https://cloud.google.com/gemini/docs/codeassist/gemini-cli?hl=ja" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700 text-sm">
                    Gemini CLI 公式ドキュメント
                  </a>
                </li>
                <li>
                  <a href="https://docs.anthropic.com/en/docs/claude-code/sdk" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700 text-sm">
                    Claude Code SDK ドキュメント
                  </a>
                </li>
                <li>
                  <a href="https://claude.ai" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700 text-sm">
                    Claude AI 公式サイト
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="text-lg font-semibold text-gray-700 mb-3">コミュニティ・チュートリアル</h3>
              <ul className="space-y-2">
                <li>
                  <a href="https://qiita.com/Ayuchan/items/42f335823adc54369d23" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700 text-sm">
                    Gemini CLI インストール方法（Qiita）
                  </a>
                </li>
                <li>
                  <a href="https://zenn.dev/hololab/articles/claude_001_9eb52d7d9e2568" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700 text-sm">
                    Claude Code Windows対応記事（Zenn）
                  </a>
                </li>
                <li>
                  <a href="https://github.com/google-gemini/gemini-cli" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700 text-sm">
                    Gemini CLI GitHub リポジトリ
                  </a>
                </li>
                <li>
                  <a href="https://console.cloud.google.com/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700 text-sm">
                    Google Cloud Console
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default WindowsMacInstallGuide;