# 命令書：Webサイト制作プロジェクト（企画・デザイン・コーディング）

## 1. あなたへの役割定義
あなたは、以下の専門知識を統合した、最高レベルのAI Webデベロッパーです。
* **Webディレクター**: プロジェクト全体を俯瞰し、ビジネス要件をWebサイトの構造と機能に落とし込みます。
* **UI/UXデザイナー**: ユーザー中心設計に基づき、直感的で美しいインターフェースと優れたユーザー体験をデザインします。
* **フロントエンドエンジニア**: 最新のWeb標準に準拠した、クリーンで効率的、かつレスポンシブなコードを記述します。

## 2. プロジェクトの概要
これから私が依頼するWebサイトのプロジェクト概要は以下の通りです。内容を正確に理解し、最高の提案をしてください。

* **Webサイトの名称**:
    【 例：オーガニックカフェ「Green Leaf」 】

* **Webサイトの目的（複数可）**:
    【 例：新規顧客の獲得、オンライン予約の受付、ブランドイメージの向上 】

* **メインターゲットユーザー**:
    【 例：20代〜40代の健康志向の女性、近隣に住むファミリー層、オーガニック製品に関心が高い人々 】

* **サイトを通じてユーザーに提供したい価値・体験**:
    【 例：産地直送の新鮮な食材を使ったメニューの魅力を伝える。都会の喧騒を忘れさせるような、落ち着いた店内の雰囲気を伝える。Webサイトから手軽に席の予約ができる利便性を提供する。 】

* **参考サイト（3つまで）**:
    * 参考サイト1: 【 URLを記入 】
        * 気に入っている点: 【 例：写真の使い方が美しく、世界観が伝わる点 】
    * 参考サイト2: 【 URLを記入 】
        * 気に入っている点: 【 例：予約フォームがシンプルで使いやすい点 】
    * 参考サイト3: 【 URLを記入 】
        * 気に入っている点: 【 例：全体的なデザインのトーン＆マナー、色使い 】

* **その他、特に重視したい要件**:
    【 例：スマートフォンでの見やすさを最優先（モバイルファースト）、SEOを意識した構造、将来的にブログ機能を追加できるような拡張性、アクセシビリティへの配慮 】


## 3. 制作の進め方とアウトプット形式
このプロジェクトは、以下の3つのフェーズで進行します。**必ずフェーズごとに提案を行い、私の承認を得てから次のフェーズに進んでください。**

---

### **【フェーズ1】 サイト構造の提案（Webディレクターの視点）**

**▼ あなたへの依頼：**
上記`## 2. プロジェクトの概要`に基づいて、以下の3項目を提案してください。

1.  **サイトコンセプトの言語化**:
    サイトの目的とターゲットユーザーの心に響く、魅力的で分かりやすいコンセプトを3案提案してください。

2.  **サイトマップ**:
    Webサイトに必要なページとその階層構造を、ツリー形式（Markdown記法）で網羅的に示してください。

3.  **主要ページのワイヤーフレーム（構成案）**:
    「トップページ」と、このサイトで最も重要だと考えられるページ（あなたが選定）の2ページについて、どのような情報ブロック（ヘッダー、メインビジュアル、コンセプト紹介、メニューハイライト、店舗情報、フッターなど）をどのような順番で配置するか、シンプルなテキストベースで記述してください。

**それでは、まずフェーズ1の提案から開始してください。**

---
**(フェーズ1の提案を受け、あなたが承認した後に、以下の指示をGeminiに与えます)**

### **【フェーズ2】 デザインの提案（UI/UXデザイナーの視点）**

**▼ あなたへの依頼：**
フェーズ1で確定したサイト構造に基づき、具体的なデザインの方向性を提案してください。

1.  **デザインコンセプト**:
    サイト全体の雰囲気や世界観を表現するキーワード（例：ナチュラル、モダン、温かみのある、クリーン）を5つ提案し、その中から最も推奨する組み合わせを1つ選んで理由を説明してください。

2.  **カラーパレット**:
    サイトの印象を決定づけるカラーパレットを提案してください。メインカラー、サブカラー、アクセントカラー、ベースカラー、テキストカラーを、具体的なカラーコード（HEX: `#FFFFFF`形式）と共に提示してください。

3.  **タイポグラフィ（フォント）**:
    見出しと本文に使用するフォントの組み合わせを提案してください。読みやすさ、デザインコンセプトとの整合性を考慮し、Google Fontsから選定してください。選定理由と、適切なフォントウェイト（太さ）も合わせて提案してください。

4.  **UIコンポーネントのスタイル**:
    ボタン、フォーム、ナビゲーションメニューなどの主要なUI要素について、デザインスタイル（形状、色、マウスオーバーした時の変化など）を言語で具体的に記述してください。

**それでは、フェーズ2の提案を開始してください。**

---
**(フェーズ2の提案を受け、あなたが承認した後に、以下の指示をGeminiに与えます)**

### **【フェーズ3】 コーディング（フロントエンドエンジニアの視点）**

**▼ あなたへの依頼：**
フェーズ1、2で確定した仕様に基づき、Webサイトのコーディングを行ってください。

1.  **使用技術**:
    * HTML5
    * CSS3
    * JavaScript (DOM操作によるシンプルなインタラクション)

2.  **コーディングの基本方針**:
    * **レスポンシブ対応**: PCとスマートフォンの両方で最適に表示されるように、メディアクエリを用いて実装してください。
    * **セマンティックHTML**: `header`, `main`, `footer`, `nav`, `section`, `article` などのHTMLタグを適切に使い分け、構造的に意味のあるマークアップを行ってください。
    * **CSS設計**: クラス名が衝突しにくく、メンテナンス性の高いCSSを意識してください（例：BEMの考え方など）。
    * **アクセシビリティ**: `img`タグには必ず`alt`属性を付与し、ボタンやリンクの役割が明確にわかるようにするなど、基本的なアクセシビリティ（a11y）に配慮してください。
    * **コメント**: コードの各セクションが何を表しているか分かるように、適切なコメントを加えてください。

3.  **アウトプット形式**:
    以下のファイル構成で、各ファイルの内容を個別のコードブロックで提示してください。
    * `index.html` (トップページ)
    * `style.css` (全ページ共通のCSS。リセットCSSの内容も含めてください)
    * `script.js` (全ページ共通のJavaScript)
    * その他、フェーズ1で提案された主要ページのHTMLファイル (例：`menu.html`, `access.html` など)

**それでは、フェーズ3のコーディングを開始してください。**

1. サイトコンセプトの言語化
ターゲットであるマーケティング担当者・経営層の課題解決意欲と、HubSpotへの興味関心を刺激するコンセプトを3案提案します。

• 案1：論理的・信頼性重視

ビジネスの成長を、データで加速する。 感覚的なマーケティングから脱却し、HubSpotを基盤としたデータドリブンな意思決定で、再現性の高い成長を実現する。貴社のビジネスに、確かな手応えと未来への展望を提供するパートナーとなることを目指すサイト。

• 案2：変革・パートナーシップ重視

  マーケティングの常識をアップデートせよ。 HubSpotは単なるツールではありません。顧客との関係を根底から見直し、組織全体を変革する「新しい成長のOS」です。私たちはその導入から活用までを伴走し、貴社の挑戦を成功へと導きます。

• 案3：シンプル・成果重視（推奨）

  複雑な課題を、シンプルに解決。成果につながるHubSpot活用術。 煩雑な顧客管理、非効率なマーケティング活動。そんな課題をHubSpotでシンプルに解決しませんか？本質的な活動に集中できる環境を構築し、最短距離でビジネスの成果を最大化するためのノウハウを提供します。 （推奨理由） 参考サイトの「わかりやすさ」「シンプルな問い合わせ」という点を踏まえ、多忙な担当者や経営層に対し、端的に「解決策」と「成果」を提示するこのコンセプトが最も心に響くと考えられます。

2. サイトマップ

BtoBコーポレートサイトとしての信頼性と、HubSpotの価値を伝える情報提供、そして将来的な拡張性（ブログ機能）を考慮したサイトマップを提案します。

• ホーム
• HubSpotとは（ソリューション） - HubSpotでできること（機能一覧） - 導入のメリット - 料金プラン
• 導入事例 - 導入事例一覧 - [事例詳細ページ] (テンプレート)
• 私たちの強み（サービス） - 導入支援サービス - 運用サポート - 選ばれる理由
• お役立ち資料（ブログ・ホワイトペーパー） - 記事一覧 - [記事詳細ページ] (テンプレート) - 資料ダウンロード一覧
• 会社情報 - 代表挨拶・ビジョン - 会社概要 - ニュースリリース
• お問い合わせ - お問い合わせフォーム - 資料請求フォーム
• その他 - プライバシーポリシー - サイトマップ

3. 主要ページのワイヤーフレーム（構成案）

サイトの顔である「トップページ」と、ユーザーの関心が最も高く、コンバージョンにつながりやすい「導入事例一覧ページ」の構成案を提案します。

• 【構成案1】 トップページ

• 【構成案2】 導入事例一覧ページ

以上が、フェーズ1の提案となります。 内容をご確認いただき、修正点やご要望がございましたらお申し付けください。 こちらの内容でよろしければ、承認の旨をお伝えください。承認をいただき次第、【フェーズ2】デザインの提案に進ませていただきます。

1. デザインコンセプト（キーワード）

サイト全体の雰囲気と世界観を表現するキーワードとして、以下の5つを提案します。

1. 信頼性 (Trustworthy)
   BtoB取引の基盤となる、揺るぎない信頼感と安定感を表現します。
2. 先進性 (Innovative)
   HubSpotという最先端ツールの価値を反映し、モダンで洗練された印象を与えます。
3. 明快さ (Clarity)
   複雑な情報を整理し、ユーザーが直感的に理解できる、シンプルで分かりやすい構成を目指します。
4. 専門性 (Professional)
   ターゲットであるマーケティング担当者や経営層に響く、専門知識と高い品質を感じさせます。
5. 論理的 (Logical)
    データに基づいた成果を約束する姿勢を、整然としたレイアウトや情報設計で表現します。

【推奨する組み合わせ】 上記の中から、特に「信頼性」「先進性」「明快さ」の3つをデザインのコアコンセプトとして推奨します。

• 理由: BtoBサイトとしての「信頼性」を土台としながら、HubSpotがもたらす「先進性」を視覚的に表現します。そして、それらの情報を「明快さ」をもって伝えることで、多忙なターゲットユーザーがストレスなく、最短距離で求める情報にたどり着き、「シンプルに解決。成果につながる」というサイトコンセプトを最も効果的に体現できると考えるためです。

2. カラーパレット

上記のデザインコンセプトに基づき、信頼感と先進性を両立させるカラーパレットを提案します。

3. タイポグラフィ（フォント）

サイト全体の可読性とデザイン性を高めるため、Google Fontsから以下のフォントを選定しました。

• 使用フォント: Noto Sans JP
• 選定理由: あらゆるデバイスで美しく表示される、非常に可読性の高いスタンダードなフォントです。クセがなく誠実な印象を与えるため、BtoBサイトの「信頼性」と「明快さ」を表現するのに最適です。また、豊富なウェイト（太さ）が用意されているため、見出しと本文でメリハリをつけやすく、デザインの一貫性を保でます。
• フォントウェイト（太さ）の指定:
  • 見出し (h1, h2, h3): Bold (700) - 力強く、情報を瞬時に認識させます。
  • 小見出し・強調テキスト: Medium (500) - 適度な強調で、階層構造を分かりやすくします。
  • 本文: Regular (400) - 最も読みやすい標準的な太さです。

4. UIコンポーネントのスタイル

主要なUI要素のデザインスタイルを定義します。

• ボタン (Button)
  • 形状: 角を少しだけ丸めた（border-radius: 4px程度）四角形。信頼感を保ちつつ、堅すぎない印象を与えます。
  • メインのCTAボタン: 背景色はアクセントカラー (#FF7A59)、テキストは白。マウスオーバーすると、少し明るい色に変化し、ユーザーのアクションを促します。
  • サブボタン: 白背景にメインカラー (#0A2463) の枠線とテキスト。マウスオーバーすると、背景がメインカラーに、テキストが白に反転します。
• フォーム (Form)
  • 入力欄: 背景は白、枠線は薄いグレー。ユーザーが入力欄をクリック（フォーカス）すると、枠線の色がメインカラー (#0A2463) に変わり、どこを編集中か明確に示します。
  • ラベル: 「お名前」「メールアドレス」といった項目名は、入力欄の中に薄く表示する（プレースホルダー）のではなく、常に入力欄の上に表示します。これにより、入力途中でも項目名が分かり、アクセシビリティも向上します。
• ナビゲーションメニュー (Navigation)
  • スタイル: ヘッダーに配置された、シンプルなテキストリンク。
  • 現在地の表示: ユーザーが現在閲覧しているページのメニュー項目は、テキストの色がメインカラー (#0A2463) になり、下に細いアクセントカラー (#FF7A59) の線が表示されます。
  • マウスオーバー: メニュー項目にカーソルを合わせると、テキストの色がメインカラー (#0A2463) に変化します。

1. index.html (トップページ)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BtoB Demo Site - 成果につながるHubSpot活用術</title>
    <meta name="description" content="複雑なビジネス課題をシンプルに解決。データドリブンな意思決定で、貴社のビジネス成長を加速させるHubSpot活用法をご提案します。">
    
    <link rel="preconnect" href="<https://fonts.googleapis.com>">
    <link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin>
    <link href="<https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap>" rel="stylesheet">
    
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header class="header">
        <div class="header__inner container">
            <a href="index.html" class="header__logo">BtoB Demo Site</a>
            <nav class="header__nav">
                <ul>
                    <li><a href="#solution">HubSpotとは</a></li>
                    <li><a href="showcases.html">導入事例</a></li>
                    <li><a href="#strength">私たちの強み</a></li>
                    <li><a href="#company">会社情報</a></li>
                </ul>
            </nav>
            <div class="header__cta">
                <a href="#contact" class="btn btn--secondary">資料請求</a>
                <a href="#contact" class="btn btn--primary">お問い合わせ</a>
            </div>
            <button class="header__hamburger" id="js-hamburger">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </header>

    <main>
        <section class="mv">
            <div class="mv__inner container">
                <div class="mv__text">
                    <h1 class="mv__title">その顧客管理、<br>ムダが多くないですか？</h1>
                    <p class="mv__subtitle">複雑な課題を、シンプルに解決。<br>成果につながるHubSpot活用術をご提案します。</p>
                    <div class="mv__cta">
                        <a href="#contact" class="btn btn--primary btn--large">まずは無料で相談する</a>
                    </div>
                </div>
            </div>
        </section>

        <section class="problem section-padding" id="problem">
            <div class="problem__inner container anim-fade-in">
                <h2 class="section-title">こんな課題を抱えていませんか？</h2>
                <div class="problem__grid">
                    <div class="problem-card">
                        <h3 class="problem-card__title">見込み客の育成が属人化している</h3>
                        <p class="problem-card__text">営業担当者の経験や勘に頼ったアプローチになっており、組織としての成果が安定しない。</p>
                    </div>
                    <div class="problem-card">
                        <h3 class="problem-card__title">データが分散し分析できない</h3>
                        <p class="problem-card__text">顧客情報、商談履歴、Webアクセスなどがバラバラのツールで管理され、有効な分析ができていない。</p>
                    </div>
                    <div class="problem-card">
                        <h3 class="problem-card__title">マーケティング施策が非効率</h3>
                        <p class="problem-card__text">手作業でのメール配信やSNS投稿に時間がかかり、本来注力すべき戦略立案が疎かになっている。</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="solution section-padding bg-light" id="solution">
            <div class="solution__inner container anim-fade-in">
                <h2 class="section-title">HubSpotがその課題を<span class="text-accent">シンプルに解決</span>します</h2>
                <div class="solution__content">
                    <p class="section-text">HubSpotは、マーケティング、セールス、カスタマーサービスの各部門が必要とする機能を一つに統合したプラットフォームです。顧客情報を一元管理し、データに基づいた最適なアプローチを自動化することで、ビジネスの成長を強力に後押しします。</p>
                    <a href="#contact" class="btn btn--primary">機能の詳細を見る</a>
                </div>
            </div>
        </section>

        <section class="showcases section-padding" id="showcases">
            <div class="showcases__inner container anim-fade-in">
                 <h2 class="section-title">導入事例</h2>
                 <div class="showcases__grid">
                    <a href="showcases.html" class="case-card">
                        <div class="case-card__img">
                            <img src="<https://via.placeholder.com/400x250?text=Case+Study+1>" alt="株式会社A様の導入事例">
                        </div>
                        <div class="case-card__body">
                            <p class="case-card__client">株式会社A様</p>
                            <h3 class="case-card__title">顧客データの一元化で、商談化率が150%に向上</h3>
                        </div>
                    </a>
                    <a href="showcases.html" class="case-card">
                        <div class="case-card__img">
                            <img src="<https://via.placeholder.com/400x250?text=Case+Study+2>" alt="BtoBサービスB社の導入事例">
                        </div>
                        <div class="case-card__body">
                            <p class="case-card__client">BtoBサービスB社様</p>
                            <h3 class="case-card__title">マーケティングオートメーションで、問い合わせ数が2倍に</h3>
                        </div>
                    </a>
                 </div>
                 <div class="section-cta">
                     <a href="showcases.html" class="btn btn--secondary">すべての導入事例を見る</a>
                 </div>
            </div>
        </section>
        
        </main>

    <footer class="footer">
        <div class="footer__inner container">
            <div class="footer__info">
                <a href="index.html" class="footer__logo">BtoB Demo Site</a>
                <p>〒100-0000 東京都千代田区丸の内1-2-3</p>
            </div>
            <div class="footer__nav">
                 <ul>
                    <li><a href="#solution">HubSpotとは</a></li>
                    <li><a href="showcases.html">導入事例</a></li>
                    <li><a href="#strength">私たちの強み</a></li>
                    <li><a href="#company">会社情報</a></li>
                    <li><a href="#contact">お問い合わせ</a></li>
                    <li><a href="#privacy">プライバシーポリシー</a></li>
                </ul>
            </div>
        </div>
        <div class="footer__copyright">
            <p>&copy; 2025 BtoB Demo Site. All Rights Reserved.</p>
        </div>
    </footer>

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

2. showcases.html (導入事例一覧ページ)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>導入事例 - BtoB Demo Site</title>
    <meta name="description" content="当社が支援させていただいたお客様のHubSpot導入事例をご紹介します。">
    
    <link rel="preconnect" href="<https://fonts.googleapis.com>">
    <link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin>
    <link href="<https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap>" rel="stylesheet">
    
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header class="header">
        </header>

    <main>
        <div class="page-header">
            <div class="container">
                <h1 class="page-header__title">導入事例</h1>
                <p>当社が支援させていただいたお客様の成功事例をご紹介します。</p>
            </div>
        </div>

        <section class="showcases-list section-padding">
            <div class="container anim-fade-in">
                <div class="showcases-list__filter">
                    <button class="btn btn--secondary is-active">すべて</button>
                    <button class="btn btn--secondary">業界別</button>
                    <button class="btn btn--secondary">課題別</button>
                </div>

                <div class="showcases__grid">
                    <a href="#" class="case-card">
                        <div class="case-card__img">
                            <img src="<https://via.placeholder.com/400x250?text=Case+Study+1>" alt="株式会社A様の導入事例">
                        </div>
                        <div class="case-card__body">
                            <p class="case-card__client">株式会社A様</p>
                            <h3 class="case-card__title">顧客データの一元化で、商談化率が150%に向上</h3>
                            <div class="case-card__tags">
                                <span class="tag">#IT業界</span>
                                <span class="tag">#顧客管理</span>
                            </div>
                        </div>
                    </a>
                    <a href="#" class="case-card">
                        <div class="case-card__img">
                            <img src="<https://via.placeholder.com/400x250?text=Case+Study+2>" alt="BtoBサービスB社の導入事例">
                        </div>
                        <div class="case-card__body">
                            <p class="case-card__client">BtoBサービスB社様</p>
                            <h3 class="case-card__title">マーケティングオートメーションで、問い合わせ数が2倍に</h3>
                             <div class="case-card__tags">
                                <span class="tag">#製造業</span>
                                <span class="tag">#リード獲得</span>
                            </div>
                        </div>
                    </a>
                     <a href="#" class="case-card">
                         <div class="case-card__img">
                            <img src="<https://via.placeholder.com/400x250?text=Case+Study+3>" alt="C株式会社の導入事例">
                        </div>
                        <div class="case-card__body">
                            <p class="case-card__client">C株式会社様</p>
                            <h3 class="case-card__title">営業プロセスの可視化で、チーム全体の売上が30%アップ</h3>
                             <div class="case-card__tags">
                                <span class="tag">#人材サービス</span>
                                <span class="tag">#営業効率化</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </section>

        <section class="cta section-padding bg-light">
             <div class="cta__inner container anim-fade-in">
                <h2 class="section-title">あなたの課題も解決できます</h2>
                <p class="section-text">まずは、貴社の状況や課題を私たちにお聞かせください。<br>最適な解決策をご提案します。</p>
                <a href="#contact" class="btn btn--primary btn--large">無料で相談する</a>
            </div>
        </section>
    </main>

    <footer class="footer">
        </footer>

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

3. style.css (全ページ共通のCSS)

/* ====================
Reset & Basic
==================== */
:root {
    --main-color: #0A2463;
    --sub-color: #F5F7FA;
    --accent-color: #FF7A59;
    --base-color: #FFFFFF;
    --text-color: #333333;
    --header-height: 80px;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-color);
    background-color: var(--base-color);
    line-height: 1.8;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

ul {
    list-style: none;
}

.container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-padding {
    padding: 80px 0;
}

.bg-light {
    background-color: var(--sub-color);
}

.section-title {
    font-size: 2.25rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
}

.section-text {
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto 30px;
    text-align: center;
}

.section-cta {
    text-align: center;
    margin-top: 40px;
}
.text-accent {
    color: var(--accent-color);
}

/* ====================
Button
==================== */
.btn {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 4px;
    font-weight: 700;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.3s;
}
.btn--primary {
    background-color: var(--accent-color);
    color: var(--base-color);
    border-color: var(--accent-color);
}
.btn--primary:hover {
    background-color: var(--base-color);
    color: var(--accent-color);
    opacity: 1;
}
.btn--secondary {
    background-color: var(--base-color);
    color: var(--main-color);
    border-color: var(--main-color);
}
.btn--secondary:hover {
    background-color: var(--main-color);
    color: var(--base-color);
    opacity: 1;
}
.btn--large {
    padding: 16px 48px;
    font-size: 1.125rem;
}

/* ====================
Header
==================== */
.header {
    height: var(--header-height);
    background-color: var(--base-color);
    border-bottom: 1px solid #eee;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}
.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.header__logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--main-color);
}
.header__nav ul {
    display: flex;
    gap: 30px;
}
.header__nav a {
    font-weight: 500;
}
.header__cta {
    display: flex;
    gap: 10px;
}
.header__hamburger {
    display: none; /* Hide by default */
}

/* ====================
Main Visual (MV)
==================== */
.mv {
    height: 600px;
    display: flex;
    align-items: center;
    background-color: var(--main-color);
    color: var(--base-color);
    margin-top: var(--header-height);
}
.mv__title {
    font-size: 3rem;
    line-height: 1.4;
    margin-bottom: 20px;
}
.mv__subtitle {
    font-size: 1.25rem;
    margin-bottom: 40px;
}

/* ====================
Problem Section
==================== */
.problem__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.problem-card {
    background-color: var(--sub-color);
    padding: 30px;
    border-radius: 8px;
}
.problem-card__title {
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: var(--main-color);
}

/* ====================
Showcases Section
==================== */
.showcases__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.case-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    background-color: var(--base-color);
    transition: all 0.3s;
}
.case-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    opacity: 1;
}
.case-card__img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.case-card__body {
    padding: 20px;
}
.case-card__client {
    font-size: 0.875rem;
    margin-bottom: 5px;
}
.case-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5;
}
.case-card__tags {
    margin-top: 15px;
    display: flex;
    gap: 8px;
}
.tag {
    font-size: 0.75rem;
    background-color: var(--sub-color);
    padding: 4px 8px;
    border-radius: 4px;
}

/* ====================
Page Header (for subpages)
==================== */
.page-header {
    padding: 60px 0;
    text-align: center;
    background-color: var(--main-color);
    color: var(--base-color);
    margin-top: var(--header-height);
}
.page-header__title {
    font-size: 2.5rem;
}

/* ====================
Footer
==================== */
.footer {
    background-color: var(--main-color);
    color: var(--base-color);
    padding-top: 60px;
}
.footer__inner {
    display: flex;
    justify-content: space-between;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.footer__logo {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    display: block;
}
.footer__nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
}
.footer__copyright {
    text-align: center;
    padding: 20px 0;
    font-size: 0.875rem;
}

/* ====================
Animation
==================== */
.anim-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s, transform 0.8s;
}
.anim-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ====================
Responsive (for Smartphone)
==================== */
@media (max-width: 768px) {
    .section-padding { padding: 60px 0; }
    .section-title { font-size: 1.75rem; }

    .header__nav, .header__cta { display: none; }
    .header__hamburger {
        display: block;
        width: 30px;
        height: 20px;
        position: relative;
        cursor: pointer;
        border: none;
        background: transparent;
    }
    .header__hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--main-color);
        position: absolute;
        left: 0;
        transition: all 0.3s;
    }
    .header__hamburger span:nth-child(1) { top: 0; }
    .header__hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
    .header__hamburger span:nth-child(3) { bottom: 0; }
    
    /* Active state for hamburger menu */
    .header.is-open .header__hamburger span:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }
    .header.is-open .header__hamburger span:nth-child(2) {
        opacity: 0;
    }
    .header.is-open .header__hamburger span:nth-child(3) {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
    }
    /* Mobile nav appears */
    .header.is-open .header__nav {
        display: block;
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background-color: var(--base-color);
        padding: 20px;
    }
    .header.is-open .header__nav ul {
        flex-direction: column;
        gap: 0;
    }
    .header.is-open .header__nav li {
        border-bottom: 1px solid #eee;
    }
    .header.is-open .header__nav a {
        display: block;
        padding: 15px 0;
    }

    .mv { height: auto; padding: 60px 0; }
    .mv__title { font-size: 2rem; }
    .mv__subtitle { font-size: 1rem; }

    .problem__grid { grid-template-columns: 1fr; }
    
    .footer__inner { flex-direction: column; gap: 40px; }
}

4. script.js (全ページ共通のJavaScript)

document.addEventListener('DOMContentLoaded', function() {

    // 1. Hamburger Menu for Mobile
    const hamburger = document.getElementById('js-hamburger');
    const header = document.querySelector('.header');

    if (hamburger) {
        hamburger.addEventListener('click', function() {
            header.classList.toggle('is-open');
        });
    }

    // 2. Scroll Animation (Fade In)
    const fadeinTargets = document.querySelectorAll('.anim-fade-in');

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            // isIntersecting is true when the element is in the viewport
            if (entry.isIntersecting) {
                entry.target.classList.add('is-visible');
                // Stop observing the element once it's visible
                observer.unobserve(entry.target);
            }
        });
    }, {
        rootMargin: '0px', // margin around the root
        threshold: 0.2 // 20% of the item must be visible
    });

    fadeinTargets.forEach(target => {
        observer.observe(target);
    });

});