---
layout: home
title: "Breeders Flow - ブリーダー専用HP制作・更新システムサービス"
description: "LINEでかんたん更新。ポータルサイトに頼らない、ブリーダーのための直販HP制作サービス。"
---

    <!-- 1. Hero Section -->
    <section class="relative pt-32 pb-20 md:pt-40 md:pb-28 overflow-hidden">
        <!-- 背景画像 -->
        <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('/image/FV-optimized.jpg');"></div>
        <!-- 半透明オーバーレイ -->
        <div class="absolute inset-0 bg-white/70 backdrop-blur-[2px]"></div>
        <!-- コンテンツ -->
        <div class="relative z-10 max-w-4xl mx-auto px-4 text-center">
            <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-teal-100 text-teal-700 text-sm font-bold mb-8">
                <span class="w-2 h-2 bg-teal-500 rounded-full animate-pulse"></span>
                ブリーダー専用HPサービス
            </div>
            <h1 class="font-serif-jp text-4xl md:text-5xl lg:text-6xl font-black leading-tight text-slate-900 mb-6 tracking-tight">
                あなたのこだわりが、<br><span class="text-teal-600">"ここで迎えたい"</span><br class="md:hidden">に変わる。
            </h1>
            <p class="text-lg md:text-xl text-slate-600 leading-relaxed mb-10">
                LINEで更新するだけで、あなた専用のホームページが完成。<br class="hidden md:block">
                指名検索にも強い自社HPで、想いで選ばれるブリーダーへ。
            </p>

            <!-- Trust Badges -->
            <div class="flex flex-wrap justify-center gap-4 md:gap-6 mb-10">
                <div class="flex items-center gap-2 bg-red-50 rounded-full px-5 py-2.5 shadow-sm border border-red-200">
                    <i class="fa-solid fa-fire text-red-500"></i>
                    <span class="text-sm font-bold text-slate-700">初期費用 <span class="line-through text-slate-400">50,000円</span> → <span class="text-red-500 text-lg font-extrabold">0</span>円</span>
                </div>
                <div class="flex items-center gap-2 bg-white rounded-full px-5 py-2.5 shadow-sm border border-slate-100">
                    <i class="fa-brands fa-line text-[#06C755]"></i>
                    <span class="text-sm font-bold text-slate-700"><span class="text-teal-600">LINE & Web</span>で更新</span>
                </div>
                <div class="flex items-center gap-2 bg-white rounded-full px-5 py-2.5 shadow-sm border border-slate-100">
                    <i class="fa-solid fa-magnifying-glass text-teal-500"></i>
                    <span class="text-sm font-bold text-slate-700">SEO対策 <span class="text-teal-600">標準搭載</span></span>
                </div>
            </div>

            <!-- CTA Buttons -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="/contact/" class="px-8 py-4 bg-teal-500 hover:bg-teal-600 text-white font-bold text-lg rounded-full shadow-xl hover:shadow-2xl transition-all transform hover:-translate-y-1 text-center">
                    無料で相談する
                </a>
                <a href="/demo/" class="px-8 py-4 bg-white text-slate-700 font-bold text-lg rounded-full border-2 border-slate-200 hover:border-teal-200 hover:bg-teal-50 transition-colors text-center">
                    <i class="fa-solid fa-bolt mr-1 text-teal-500"></i>3分でデモ体験
                </a>
            </div>
            <p class="text-sm text-red-500 font-bold mt-4">
                <i class="fa-solid fa-fire mr-1"></i>毎月5社限定！初期費用無料キャンペーン実施中
            </p>
        </div>
    </section>

    <!-- 2. Problems / Pain Points Section -->
    <section class="py-20 bg-slate-50 relative overflow-hidden">
        <div class="container mx-auto px-4 md:px-6">
            <div class="text-center mb-12 fade-in">
                <h2 class="text-3xl md:text-4xl font-bold mb-6 text-slate-900">
                    <span class="block text-lg md:text-xl text-teal-600 font-bold mb-2 tracking-widest">BREEDER'S WORRIES</span>
                    こんなお悩み、ありませんか？
                </h2>
                <p class="text-slate-600">
                    頑張っているのに成果が出ない——それは<strong class="text-slate-800">自分のHPがない</strong>ことが原因かもしれません。
                </p>
            </div>

            <div class="grid md:grid-cols-2 gap-4 max-w-4xl mx-auto fade-in">
                <div class="flex items-start gap-4 bg-white p-5 rounded-xl border border-slate-100">
                    <div class="flex-shrink-0 w-10 h-10 bg-red-50 rounded-full flex items-center justify-center">
                        <i class="fa-solid fa-scale-balanced text-red-400"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-slate-800 mb-1">法改正で1頭の重みが増した</h3>
                        <p class="text-sm text-slate-500">頭数制限・繁殖回数上限で、1頭あたりの利益確保がこれまで以上に重要に。</p>
                    </div>
                </div>
                <div class="flex items-start gap-4 bg-white p-5 rounded-xl border border-slate-100">
                    <div class="flex-shrink-0 w-10 h-10 bg-red-50 rounded-full flex items-center justify-center">
                        <i class="fa-solid fa-coins text-red-400"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-slate-800 mb-1">ポータルの手数料が利益を圧迫</h3>
                        <p class="text-sm text-slate-500">掲載料や成約手数料で、せっかくの売上が目減りしていませんか？</p>
                    </div>
                </div>
                <div class="flex items-start gap-4 bg-white p-5 rounded-xl border border-slate-100">
                    <div class="flex-shrink-0 w-10 h-10 bg-red-50 rounded-full flex items-center justify-center">
                        <i class="fa-solid fa-mobile-screen text-red-400"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-slate-800 mb-1">SNSで認知はあるのに受け皿がない</h3>
                        <p class="text-sm text-slate-500">フォロワーは増えても、信頼できる問い合わせ先がポータルしかない。</p>
                    </div>
                </div>
                <div class="flex items-start gap-4 bg-white p-5 rounded-xl border border-slate-100">
                    <div class="flex-shrink-0 w-10 h-10 bg-red-50 rounded-full flex items-center justify-center">
                        <i class="fa-solid fa-heart-crack text-red-400"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-slate-800 mb-1">こだわりや想いが伝わらない</h3>
                        <p class="text-sm text-slate-500">ポータルでは横並び表示。飼育環境や健康管理のこだわりが埋もれてしまう。</p>
                    </div>
                </div>
                <div class="flex items-start gap-4 bg-white p-5 rounded-xl border border-slate-100 md:col-span-2 md:max-w-md md:mx-auto">
                    <div class="flex-shrink-0 w-10 h-10 bg-red-50 rounded-full flex items-center justify-center">
                        <i class="fa-solid fa-magnifying-glass text-red-400"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-slate-800 mb-1">犬舎名・猫舎名で検索しても出てこない</h3>
                        <p class="text-sm text-slate-500">指名検索されてもHPがなく、比較サイトに戻られてしまう。</p>
                    </div>
                </div>
            </div>

            <div class="mt-12 text-center">
                <p class="text-lg md:text-xl font-bold text-slate-800 mb-6">
                    1つでも当てはまる方は、ぜひ<span class="text-teal-500">Breeders Flow</span>にご相談ください
                </p>
                <a href="https://lin.ee/zsve441" class="inline-block bg-green-500 hover:bg-green-600 text-white rounded-full px-8 py-3 font-bold transition shadow-lg hover:shadow-xl">
                    <i class="fa-brands fa-line mr-2"></i>LINEで無料相談する
                </a>
            </div>
        </div>
    </section>

    <!-- 3. What Changes - Breeders Flowで変わること -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-4 md:px-6">
            <div class="text-center mb-16 fade-in">
                <span class="text-teal-500 font-bold tracking-wider uppercase text-sm mb-2 block">WHAT CHANGES</span>
                <h2 class="text-3xl md:text-4xl font-bold mb-4 text-slate-900">Breeders Flowで、こう変わる。</h2>
                <p class="text-slate-600">ポータルでは実現できなかった<strong class="text-slate-800">「伝える力」</strong>を、あなたのHPに。</p>
            </div>

            <!-- Bento Grid -->
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-5 max-w-5xl mx-auto auto-rows-auto">
                <!-- Card 1: 成長記録 (Featured - large) -->
                <div class="bg-gradient-to-br from-rose-50 to-white p-8 rounded-2xl border border-rose-200 shadow-sm hover:shadow-lg transition-all md:col-span-2 lg:col-span-2 lg:row-span-2 flex flex-col justify-center fade-in">
                    <div class="w-14 h-14 bg-rose-100 rounded-xl flex items-center justify-center mb-5">
                        <i class="fa-solid fa-heart-pulse text-rose-600 text-2xl"></i>
                    </div>
                    <h3 class="font-bold text-slate-800 text-xl md:text-2xl mb-3">成長記録・健康管理で<br>信頼を証明</h3>
                    <p class="text-slate-600 leading-relaxed">ワクチン接種歴、健康診断結果、体重の成長記録をHP上で公開。「この犬舎なら安心」とお客様に伝わる、ポータルにはない情報発信ができます。</p>
                    <div class="mt-5 flex flex-wrap gap-2">
                        <span class="text-xs bg-rose-100 text-rose-700 px-3 py-1 rounded-full font-medium">ワクチン記録</span>
                        <span class="text-xs bg-rose-100 text-rose-700 px-3 py-1 rounded-full font-medium">体重推移</span>
                        <span class="text-xs bg-rose-100 text-rose-700 px-3 py-1 rounded-full font-medium">健康診断</span>
                    </div>
                </div>
                <!-- Card 2: 構造化データ -->
                <div class="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-all fade-in fade-in-delay-1">
                    <div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center mb-4">
                        <i class="fa-solid fa-star text-amber-600 text-xl"></i>
                    </div>
                    <h3 class="font-bold text-slate-800 text-lg mb-2">Google検索に<br>星評価・価格が直接表示</h3>
                    <p class="text-sm text-slate-600 leading-relaxed">構造化データを標準搭載。検索結果に星評価や価格帯が表示され、クリック率が大幅にアップします。</p>
                </div>
                <!-- Card 3: 動画 -->
                <div class="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-all fade-in fade-in-delay-2">
                    <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-4">
                        <i class="fa-solid fa-video text-blue-600 text-xl"></i>
                    </div>
                    <h3 class="font-bold text-slate-800 text-lg mb-2">動画埋め込みで<br>飼育環境を見せる</h3>
                    <p class="text-sm text-slate-600 leading-relaxed">YouTube動画をHP内に埋め込み可能。犬舎の雰囲気や子犬の動く姿を見せ、見学前から信頼を築けます。</p>
                </div>
                <!-- Card 4: カスタマイズ -->
                <div class="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-all fade-in fade-in-delay-1">
                    <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-4">
                        <i class="fa-solid fa-layer-group text-purple-600 text-xl"></i>
                    </div>
                    <h3 class="font-bold text-slate-800 text-lg mb-2">13セクション+自由に並び替え</h3>
                    <p class="text-sm text-slate-600 leading-relaxed">セクションの表示・非表示や順番を自由にカスタマイズ。あなたの犬舎の個性が際立ちます。</p>
                </div>
                <!-- Card 5: ウェイティングリスト -->
                <div class="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-all lg:col-span-2 fade-in fade-in-delay-2">
                    <div class="flex items-start gap-5">
                        <div class="w-12 h-12 bg-teal-100 rounded-xl flex items-center justify-center shrink-0">
                            <i class="fa-solid fa-clock-rotate-left text-teal-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-slate-800 text-lg mb-2">ウェイティングリストで見込み客を逃さない</h3>
                            <p class="text-sm text-slate-600 leading-relaxed">「この犬種に興味があります」というお客様の声を事前に受付・管理。出産後すぐにご案内でき、人気犬種の需要を逃しません。</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-12 text-center fade-in">
                <a href="/features/" class="inline-flex items-center gap-2 text-teal-600 hover:text-teal-700 font-bold transition-colors">
                    <span>すべての機能を見る</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                </a>
            </div>
        </div>
    </section>

    <!-- 4. ROI Cost Simulation (Interactive) -->
    <section class="py-20 bg-slate-50">
        <div class="max-w-4xl mx-auto px-4">
            <div class="text-center mb-12 fade-in">
                <span class="text-teal-500 font-bold tracking-wider uppercase text-sm mb-2 block">COST SIMULATION</span>
                <h2 class="text-3xl md:text-4xl font-bold mb-4 text-slate-900">ポータル × 自社HP で、<br class="md:hidden">利益率が変わる。</h2>
                <p class="text-slate-600">ポータルをやめる必要はありません。<br class="hidden md:block">自社HPからの直販が少し増えるだけで、手数料分がそのまま利益になります。</p>
            </div>

            <!-- Interactive Calculator -->
            <div class="bg-white border border-slate-200 rounded-2xl p-6 md:p-8 mb-6 fade-in">
                <h3 class="text-lg font-bold text-slate-800 mb-8 flex items-center gap-2">
                    <i class="fa-solid fa-sliders text-teal-500"></i>
                    あなたの犬舎でシミュレーション
                </h3>

                <!-- Slider: 年間成約頭数 -->
                <div class="mb-6">
                    <div class="flex justify-between items-center mb-2">
                        <label class="text-sm font-bold text-slate-700">年間成約頭数</label>
                        <span class="text-lg font-extrabold text-slate-900"><span id="val-heads">50</span>頭</span>
                    </div>
                    <input type="range" id="slider-heads" min="10" max="100" step="5" value="50" class="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-teal-500">
                    <div class="flex justify-between text-xs text-slate-400 mt-1"><span>10頭</span><span>100頭</span></div>
                </div>

                <!-- Slider: 平均販売価格 -->
                <div class="mb-6">
                    <div class="flex justify-between items-center mb-2">
                        <label class="text-sm font-bold text-slate-700">平均販売価格</label>
                        <span class="text-lg font-extrabold text-slate-900"><span id="val-price">30</span>万円</span>
                    </div>
                    <input type="range" id="slider-price" min="10" max="80" step="5" value="30" class="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-teal-500">
                    <div class="flex justify-between text-xs text-slate-400 mt-1"><span>10万円</span><span>80万円</span></div>
                </div>

                <!-- Slider: 直販に切り替える頭数 -->
                <div class="mb-8">
                    <div class="flex justify-between items-center mb-2">
                        <label class="text-sm font-bold text-slate-700">うち直販に切り替える頭数</label>
                        <span class="text-lg font-extrabold text-teal-600"><span id="val-direct">10</span>頭</span>
                    </div>
                    <input type="range" id="slider-direct" min="0" max="50" step="1" value="10" class="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-teal-500">
                    <div class="flex justify-between text-xs text-slate-400 mt-1"><span>0頭</span><span id="direct-max-label">50頭</span></div>
                </div>

                <!-- Result Cards -->
                <div class="grid md:grid-cols-3 gap-4 text-center">
                    <div class="bg-red-50 rounded-xl p-4 border border-red-200">
                        <p class="text-xs text-red-500 mb-1 font-medium">現在のポータル手数料（年間）</p>
                        <p class="text-2xl font-extrabold text-red-600"><span id="result-portal-fee" class="countup" data-target="75">75</span><span class="text-base">万円</span></p>
                        <p class="text-xs text-slate-400 mt-1">手数料率12.5%で試算</p>
                    </div>
                    <div class="bg-teal-50 rounded-xl p-4 border border-teal-200">
                        <p class="text-xs text-teal-600 mb-1 font-medium">直販による手数料削減</p>
                        <p class="text-2xl font-extrabold text-teal-600"><span id="result-saving" class="countup" data-target="37">37</span><span class="text-base">万円</span></p>
                        <p class="text-xs text-slate-400 mt-1">Breeders Flow費用控除前</p>
                    </div>
                    <div id="result-profit-card" class="bg-teal-100 rounded-xl p-4 border border-teal-300">
                        <p class="text-xs text-teal-700 mb-1 font-medium">差し引き利益改善</p>
                        <p class="text-2xl font-extrabold text-teal-700"><span id="result-profit-sign">+</span><span id="result-profit" class="countup" data-target="14">14</span><span class="text-base">万円/年</span></p>
                        <p class="text-xs text-slate-500 mt-1">月額19,800円差し引き後</p>
                    </div>
                </div>
            </div>

            <!-- Breakeven callout -->
            <div class="mt-6 bg-amber-50 border border-amber-300 rounded-2xl p-6 text-center fade-in">
                <p class="text-slate-700 mb-1">あなたの場合、自社HP経由の直販が</p>
                <p class="text-2xl md:text-3xl font-extrabold text-slate-900">
                    年間 <span class="text-teal-600" id="result-breakeven">7</span>頭 でサービス費用を回収
                </p>
                <p class="text-slate-600 mt-2 text-sm font-medium">それ以降の直販は、<strong class="text-teal-600">1頭ごとに<span id="result-per-head">3.8</span>万円がそのまま利益</strong>に。</p>
                <p class="text-xs text-slate-500 mt-2">※ 手数料率は中央値12.5%で試算しています</p>
            </div>

            <div class="mt-8 text-center">
                <a href="/contact/" class="inline-block px-8 py-4 bg-teal-500 hover:bg-teal-600 text-white font-bold text-lg rounded-full shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-0.5">
                    無料で相談してみる
                </a>
            </div>
        </div>
    </section>

    <!-- 5. Demo / Portfolio Section -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-4 md:px-6">
            <div class="text-center mb-12 fade-in">
                <span class="text-teal-500 font-bold tracking-wider uppercase text-sm mb-2 block">DEMO</span>
                <h2 class="text-3xl font-bold mb-4 text-slate-900">デモサイト・サイトイメージ</h2>
                <p class="text-slate-600">基本となる3つのサイトデザインをご覧ください。この他複数種類よりお選びいただけます。</p>
            </div>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Premium Theme -->
                <a href="https://breeder-test001.pages.dev/" target="_blank" rel="noopener noreferrer" class="group cursor-pointer fade-in">
                    <div class="bg-slate-100 rounded-2xl p-3 shadow-md group-hover:shadow-xl transition-all duration-300 transform group-hover:-translate-y-1">
                        <!-- Browser mockup bar -->
                        <div class="bg-slate-200 rounded-t-lg px-3 py-2 flex items-center gap-1.5 mb-0">
                            <span class="w-2.5 h-2.5 rounded-full bg-red-400"></span>
                            <span class="w-2.5 h-2.5 rounded-full bg-amber-400"></span>
                            <span class="w-2.5 h-2.5 rounded-full bg-green-400"></span>
                            <span class="ml-2 text-[10px] text-slate-400 bg-white rounded px-2 py-0.5 flex-1 text-center truncate">breeder-test001.pages.dev</span>
                        </div>
                        <div class="h-48 bg-slate-200 relative rounded-b-lg overflow-hidden">
                             <div class="absolute inset-0"><img src="/assets/images/demo/premium.jpg" alt="プレミアムテーマ デモサイト" class="w-full h-full object-cover object-top" /></div>
                             <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"><span class="text-white font-bold border-2 border-white px-4 py-2 rounded-full text-sm">デモを見る <i class="fa-solid fa-arrow-up-right-from-square ml-1 text-xs"></i></span></div>
                        </div>
                    </div>
                    <div class="p-3 text-center"><h3 class="font-bold text-slate-800">プレミアムテーマ</h3><p class="text-sm text-slate-500">高級感のあるダーク×ゴールドデザイン</p></div>
                </a>
                <!-- Modern Theme -->
                <a href="https://breeder-test002.pages.dev/" target="_blank" rel="noopener noreferrer" class="group cursor-pointer fade-in fade-in-delay-1">
                    <div class="bg-slate-100 rounded-2xl p-3 shadow-md group-hover:shadow-xl transition-all duration-300 transform group-hover:-translate-y-1">
                        <div class="bg-slate-200 rounded-t-lg px-3 py-2 flex items-center gap-1.5 mb-0">
                            <span class="w-2.5 h-2.5 rounded-full bg-red-400"></span>
                            <span class="w-2.5 h-2.5 rounded-full bg-amber-400"></span>
                            <span class="w-2.5 h-2.5 rounded-full bg-green-400"></span>
                            <span class="ml-2 text-[10px] text-slate-400 bg-white rounded px-2 py-0.5 flex-1 text-center truncate">breeder-test002.pages.dev</span>
                        </div>
                        <div class="h-48 bg-slate-200 relative rounded-b-lg overflow-hidden">
                             <div class="absolute inset-0"><img src="/assets/images/demo/modern.jpg" alt="モダンテーマ デモサイト" class="w-full h-full object-cover object-top" /></div>
                             <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"><span class="text-white font-bold border-2 border-white px-4 py-2 rounded-full text-sm">デモを見る <i class="fa-solid fa-arrow-up-right-from-square ml-1 text-xs"></i></span></div>
                        </div>
                    </div>
                    <div class="p-3 text-center"><h3 class="font-bold text-slate-800">モダンテーマ</h3><p class="text-sm text-slate-500">シンプルで洗練されたホワイトデザイン</p></div>
                </a>
                <!-- Natural Theme -->
                <a href="https://breeder-test003.pages.dev/" target="_blank" rel="noopener noreferrer" class="group cursor-pointer fade-in fade-in-delay-2">
                    <div class="bg-slate-100 rounded-2xl p-3 shadow-md group-hover:shadow-xl transition-all duration-300 transform group-hover:-translate-y-1">
                        <div class="bg-slate-200 rounded-t-lg px-3 py-2 flex items-center gap-1.5 mb-0">
                            <span class="w-2.5 h-2.5 rounded-full bg-red-400"></span>
                            <span class="w-2.5 h-2.5 rounded-full bg-amber-400"></span>
                            <span class="w-2.5 h-2.5 rounded-full bg-green-400"></span>
                            <span class="ml-2 text-[10px] text-slate-400 bg-white rounded px-2 py-0.5 flex-1 text-center truncate">breeder-test003.pages.dev</span>
                        </div>
                        <div class="h-48 bg-slate-200 relative rounded-b-lg overflow-hidden">
                             <div class="absolute inset-0"><img src="/assets/images/demo/natural.jpg" alt="ナチュラルテーマ デモサイト" class="w-full h-full object-cover object-top" /></div>
                             <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"><span class="text-white font-bold border-2 border-white px-4 py-2 rounded-full text-sm">デモを見る <i class="fa-solid fa-arrow-up-right-from-square ml-1 text-xs"></i></span></div>
                        </div>
                    </div>
                    <div class="p-3 text-center"><h3 class="font-bold text-slate-800">ナチュラルテーマ</h3><p class="text-sm text-slate-500">温かみのあるクリーム×グリーンデザイン</p></div>
                </a>
            </div>
            <!-- Live Preview Area -->
            <div class="mt-12 fade-in">
                <div class="text-center mb-6">
                    <p class="text-sm font-bold text-slate-500 mb-3">3つデモサイトをライブプレビュー</p>
                    <div class="inline-flex gap-2">
                        <button onclick="switchDemoPreview('https://breeder-test001.pages.dev/', 'プレミアム')" class="demo-tab px-4 py-2 rounded-full text-sm font-bold transition border-2 border-teal-500 bg-teal-500 text-white shadow-sm">プレミアム</button>
                        <button onclick="switchDemoPreview('https://breeder-test002.pages.dev/', 'モダン')" class="demo-tab px-4 py-2 rounded-full text-sm font-bold transition border-2 border-teal-500 bg-white text-teal-600 hover:bg-teal-50">モダン</button>
                        <button onclick="switchDemoPreview('https://breeder-test003.pages.dev/', 'ナチュラル')" class="demo-tab px-4 py-2 rounded-full text-sm font-bold transition border-2 border-teal-500 bg-white text-teal-600 hover:bg-teal-50">ナチュラル</button>
                    </div>
                </div>
                <div class="bg-slate-100 rounded-2xl p-3 shadow-lg max-w-4xl mx-auto">
                    <!-- Browser bar -->
                    <div class="bg-slate-200 rounded-t-lg px-4 py-2.5 flex items-center gap-2">
                        <span class="w-3 h-3 rounded-full bg-red-400"></span>
                        <span class="w-3 h-3 rounded-full bg-amber-400"></span>
                        <span class="w-3 h-3 rounded-full bg-green-400"></span>
                        <span class="ml-3 text-xs text-slate-400 bg-white rounded-md px-3 py-1 flex-1 text-center" id="demo-url-bar">breeder-test001.pages.dev</span>
                        <a id="demo-external-link" href="https://breeder-test001.pages.dev/" target="_blank" rel="noopener noreferrer" class="text-slate-400 hover:text-teal-500 transition-colors" title="新しいタブで開く">
                            <i class="fa-solid fa-arrow-up-right-from-square text-sm"></i>
                        </a>
                    </div>
                    <!-- iframe -->
                    <div class="rounded-b-lg overflow-hidden bg-white" style="height: 480px;">
                        <iframe id="demo-iframe" src="https://breeder-test001.pages.dev/" class="w-full h-full border-0" loading="lazy" sandbox="allow-scripts allow-same-origin" title="デモサイト プレビュー"></iframe>
                    </div>
                </div>
                <p class="text-center text-xs text-slate-400 mt-3"><i class="fa-solid fa-hand-pointer mr-1"></i>プレビュー内をスクロールして実際のサイトを体験できます<br>※縮小して表示している関係上、体裁が崩れている場合がございます。下記より実際のサイトをご覧ください。</p>
            </div>

            <div class="mt-8 text-center">
                <a href="/demo/" class="inline-flex items-center gap-2 text-teal-600 hover:text-teal-700 font-bold transition-colors">
                    <span>テーマの詳細・カスタマイズ事例を見る</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                </a>
            </div>
        </div>
    </section>

    <!-- 6. Why Us - 比較表 -->
    <section id="features" class="py-20 bg-slate-900 text-white">
        <div class="container mx-auto px-4 md:px-6">
            <div class="text-center mb-12 fade-in">
                <span class="text-teal-400 font-bold tracking-wider uppercase text-sm">WHY US</span>
                <h2 class="text-3xl md:text-4xl font-bold mt-2">他サービスとの違い</h2>
            </div>

            <div class="overflow-x-auto -mx-4 px-4 fade-in">
                <table class="w-full min-w-[640px] text-sm">
                    <thead>
                        <tr>
                            <th class="p-3 text-left text-slate-400 font-medium"></th>
                            <th class="p-3 text-center text-slate-300 font-medium bg-slate-800 rounded-t-lg">HP制作会社</th>
                            <th class="p-3 text-center text-slate-300 font-medium bg-slate-800 rounded-t-lg">汎用サービス<br><span class="text-xs text-slate-500">Wix・Jimdo等</span></th>
                            <th class="p-3 text-center text-slate-300 font-medium bg-slate-800 rounded-t-lg">ブリーダー<br>専門業者</th>
                            <th class="p-3 text-center text-white font-bold bg-teal-600 rounded-t-xl">Breeders Flow</th>
                        </tr>
                    </thead>
                    <tbody class="text-center">
                        <tr class="border-t border-slate-700">
                            <td class="p-3 text-left text-slate-400 font-medium">初期費用</td>
                            <td class="p-3 bg-slate-800/50 text-slate-300">30〜100万円</td>
                            <td class="p-3 bg-slate-800/50 text-slate-300">0円〜</td>
                            <td class="p-3 bg-slate-800/50 text-slate-300">10〜30万円</td>
                            <td class="p-3 bg-teal-900/40 text-teal-300 font-bold">0円</td>
                        </tr>
                        <tr class="border-t border-slate-700">
                            <td class="p-3 text-left text-slate-400 font-medium">月額費用</td>
                            <td class="p-3 bg-slate-800/50 text-slate-300">保守費別途</td>
                            <td class="p-3 bg-slate-800/50 text-slate-300">0〜2,000円</td>
                            <td class="p-3 bg-slate-800/50 text-slate-300">5,000〜15,000円</td>
                            <td class="p-3 bg-teal-900/40 text-teal-300 font-bold">19,800円〜</td>
                        </tr>
                        <tr class="border-t border-slate-700">
                            <td class="p-3 text-left text-slate-400 font-medium">更新方法</td>
                            <td class="p-3 bg-slate-800/50 text-slate-300">業者に依頼</td>
                            <td class="p-3 bg-slate-800/50 text-slate-300">PC操作</td>
                            <td class="p-3 bg-slate-800/50 text-slate-300">PC操作</td>
                            <td class="p-3 bg-teal-900/40 text-teal-300 font-bold">LINEで完結</td>
                        </tr>
                        <tr class="border-t border-slate-700">
                            <td class="p-3 text-left text-slate-400 font-medium">ブリーダー特化</td>
                            <td class="p-3 bg-slate-800/50 text-red-400">×</td>
                            <td class="p-3 bg-slate-800/50 text-red-400">×</td>
                            <td class="p-3 bg-slate-800/50 text-yellow-400">△</td>
                            <td class="p-3 bg-teal-900/40 text-teal-300 font-bold">◎</td>
                        </tr>
                        <tr class="border-t border-slate-700">
                            <td class="p-3 text-left text-slate-400 font-medium">SEO対策</td>
                            <td class="p-3 bg-slate-800/50 text-slate-300">○（別料金）</td>
                            <td class="p-3 bg-slate-800/50 text-yellow-400">△</td>
                            <td class="p-3 bg-slate-800/50 text-yellow-400">△</td>
                            <td class="p-3 bg-teal-900/40 text-teal-300 font-bold">◎ 標準搭載</td>
                        </tr>
                        <tr class="border-t border-slate-700">
                            <td class="p-3 text-left text-slate-400 font-medium rounded-b-lg">標準作成ページ数</td>
                            <td class="p-3 bg-slate-800/50 text-slate-300 rounded-b-lg">5〜10ページ</td>
                            <td class="p-3 bg-slate-800/50 text-slate-300 rounded-b-lg">5〜10ページ</td>
                            <td class="p-3 bg-slate-800/50 text-slate-300 rounded-b-lg">5ページ前後</td>
                            <td class="p-3 bg-teal-900/40 text-teal-300 font-bold rounded-b-xl">16ページ以上</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="mt-12 text-center">
                <a href="/contact/" class="inline-block px-8 py-4 bg-teal-500 hover:bg-teal-600 text-white font-bold text-lg rounded-full shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-0.5">
                    無料で相談してみる
                </a>
                <p class="text-sm text-slate-400 mt-3">LINEでもお気軽にどうぞ</p>
            </div>
        </div>
    </section>

    <!-- 7. Voice / Before-After -->
    <section class="py-20 bg-slate-50">
        <div class="container mx-auto px-4 md:px-6">
            <div class="text-center mb-12 fade-in">
                <span class="text-teal-500 font-bold tracking-wider uppercase text-sm mb-2 block">VOICE</span>
                <h2 class="text-3xl md:text-4xl font-bold mb-4 text-slate-900">導入ブリーダー様の変化</h2>
                <p class="text-slate-600">Breeders Flowを導入するとどう変わるのか、ビフォー・アフターでご紹介します。</p>
            </div>

            <!-- Before / After Comparison -->
            <div class="grid md:grid-cols-2 gap-6 md:gap-8 max-w-4xl mx-auto fade-in">
                <!-- BEFORE -->
                <div class="text-center">
                    <span class="inline-block bg-red-100 text-red-600 text-xs font-bold px-4 py-1.5 rounded-full mb-4">BEFORE</span>
                    <div class="bg-red-50 rounded-2xl p-6 md:p-8 border border-red-200 text-left">
                        <h3 class="font-bold text-red-700 mb-4 text-center">ポータルに頼っていた時</h3>
                        <ul class="space-y-4">
                            <li class="flex items-start gap-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-red-400 shrink-0 mt-0.5"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                                <span class="text-sm text-slate-600">他の犬舎と価格で比較され、<strong>値下げ圧力</strong>がかかる</span>
                            </li>
                            <li class="flex items-start gap-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-red-400 shrink-0 mt-0.5"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                                <span class="text-sm text-slate-600">成約のたびに<strong>手数料が発生</strong>し、利益が目減り</span>
                            </li>
                            <li class="flex items-start gap-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-red-400 shrink-0 mt-0.5"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                                <span class="text-sm text-slate-600">飼育方針やこだわりを伝えきれず、<strong>「条件」だけで選ばれる</strong></span>
                            </li>
                            <li class="flex items-start gap-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-red-400 shrink-0 mt-0.5"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                                <span class="text-sm text-slate-600">犬舎名で検索しても<strong>ポータルが表示</strong>される</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- AFTER -->
                <div class="text-center">
                    <span class="inline-block bg-teal-100 text-teal-600 text-xs font-bold px-4 py-1.5 rounded-full mb-4">AFTER</span>
                    <div class="bg-teal-50 rounded-2xl p-6 md:p-8 border-2 border-teal-300 shadow-md text-left">
                        <h3 class="font-bold text-teal-700 mb-4 text-center">Breeders Flow導入後</h3>
                        <ul class="space-y-4">
                            <li class="flex items-start gap-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500 shrink-0 mt-0.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>
                                <span class="text-sm text-slate-700 font-medium">あなたの想い・飼育環境を見て<strong>「ここで迎えたい」</strong>と選ばれる</span>
                            </li>
                            <li class="flex items-start gap-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500 shrink-0 mt-0.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>
                                <span class="text-sm text-slate-700 font-medium">直接の問い合わせが増え、<strong>手数料なしで利益率が改善</strong></span>
                            </li>
                            <li class="flex items-start gap-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500 shrink-0 mt-0.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>
                                <span class="text-sm text-slate-700 font-medium">成長記録・動画で<strong>こだわりをデータで証明</strong></span>
                            </li>
                            <li class="flex items-start gap-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500 shrink-0 mt-0.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>
                                <span class="text-sm text-slate-700 font-medium">犬舎名の<strong>指名検索で自社HPが上位表示</strong></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Testimonial Placeholder -->
            <div class="mt-16 max-w-4xl mx-auto">
                <h3 class="text-center text-lg font-bold text-slate-700 mb-8">導入ブリーダー様の声</h3>
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm">
                        <div class="flex items-center gap-3 mb-4">
                            <div class="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center">
                                <i class="fa-solid fa-dog text-teal-600"></i>
                            </div>
                            <div>
                                <p class="font-bold text-slate-800">トイプードル専門犬舎 様</p>
                                <p class="text-xs text-slate-500">スタンダードプラン</p>
                            </div>
                        </div>
                        <div class="flex gap-1 mb-3">
                            <i class="fa-solid fa-star text-amber-400"></i>
                            <i class="fa-solid fa-star text-amber-400"></i>
                            <i class="fa-solid fa-star text-amber-400"></i>
                            <i class="fa-solid fa-star text-amber-400"></i>
                            <i class="fa-solid fa-star text-amber-400"></i>
                        </div>
                        <p class="text-sm text-slate-600 leading-relaxed">LINEで写真を送るだけでHPが更新されるので、忙しい日も無理なく続けられています。ポータル経由だったお問い合わせが、HP直接に切り替わってきました。</p>
                    </div>
                    <div class="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm">
                        <div class="flex items-center gap-3 mb-4">
                            <div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center">
                                <i class="fa-solid fa-cat text-amber-600"></i>
                            </div>
                            <div>
                                <p class="font-bold text-slate-800">スコティッシュフォールド猫舎 様</p>
                                <p class="text-xs text-slate-500">プレミアムプラン</p>
                            </div>
                        </div>
                        <div class="flex gap-1 mb-3">
                            <i class="fa-solid fa-star text-amber-400"></i>
                            <i class="fa-solid fa-star text-amber-400"></i>
                            <i class="fa-solid fa-star text-amber-400"></i>
                            <i class="fa-solid fa-star text-amber-400"></i>
                            <i class="fa-solid fa-star text-amber-400"></i>
                        </div>
                        <p class="text-sm text-slate-600 leading-relaxed">猫舎名で検索したら自分のHPが1番上に出るようになりました。健康管理の記録を載せたことで、お客様からの信頼度が格段に上がったと感じます。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 8. Pricing Section -->
    <section id="pricing" class="py-20 bg-white">
        <div class="container mx-auto px-4 md:px-6">
            <div class="text-center mb-16 fade-in">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 text-slate-900">料金プラン</h2>
                <p class="text-slate-600 mb-6">ドメイン・サーバー・更新システム、すべて込みのシンプルな料金体系です。</p>
                <div class="inline-flex items-center gap-3 bg-red-500 text-white font-bold px-6 py-3 rounded-full shadow-lg campaign-glow">
                    <span class="bg-white text-red-500 text-xs font-extrabold px-2 py-0.5 rounded-full">毎月5社限定</span>
                    <span class="text-base md:text-lg"><i class="fa-solid fa-gift mr-1"></i>初期費用無料キャンペーン実施中</span>
                </div>
            </div>

            <div class="max-w-5xl mx-auto">

                <!-- Plan Cards -->
                <div class="grid md:grid-cols-2 gap-8 mb-12">

                    <!-- Standard Plan -->
                    <div class="bg-white border-2 border-teal-100 rounded-3xl shadow-xl overflow-hidden relative flex flex-col">
                        <div class="absolute top-0 left-0 bg-teal-600 text-white font-bold px-4 py-1.5 rounded-br-xl text-sm z-10">おすすめ</div>
                        <div class="p-8 md:p-10 text-center border-b border-slate-100">
                            <h3 class="text-xl font-bold text-slate-800 mb-2">スタンダードプラン</h3>
                            <p class="text-slate-600 font-bold mb-4 bg-teal-50 inline-block px-4 py-1 rounded-full text-sm">3つのテンプレートからデザインを選択</p>
                            <div class="flex justify-center items-end gap-2 mb-2">
                                <span class="text-slate-400 font-bold text-base relative top-[-6px]">月額</span>
                                <span class="text-4xl md:text-5xl font-extrabold text-slate-900">19,800</span>
                                <span class="text-slate-600 font-medium pb-1">円 (税込)</span>
                            </div>
                            <div class="inline-block bg-amber-50 border border-amber-300 rounded-lg px-3 py-1.5 mb-3">
                                <p class="text-xs text-amber-700 font-bold"><i class="fa-solid fa-gift mr-1"></i>6ヶ月継続割引 → <span class="text-lg text-amber-600">14,800</span>円/月</p>
                            </div>
                            <p class="text-slate-500 text-sm">※最低契約期間6ヶ月 / 初期費用 <span class="line-through">50,000円</span> → <span class="text-red-500 font-bold">0円</span></p>
                        </div>
                        <div class="p-6 bg-slate-50 mt-auto">
                            <ul class="space-y-3 text-left">
                                <li class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500 shrink-0"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg><span class="text-sm">独自ドメイン取得・更新費込み</span></li>
                                <li class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500 shrink-0"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg><span class="text-sm">サーバー維持管理費込み</span></li>
                                <li class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500 shrink-0"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg><span class="text-sm">LINE更新システム利用料</span></li>
                                <li class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500 shrink-0"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg><span class="text-sm">SEO対策・スマホ対応</span></li>
                                <li class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500 shrink-0"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg><span class="text-sm">メール・LINEサポート</span></li>
                            </ul>
                            <div class="mt-6 text-center">
                                <a href="/contact/" class="inline-block px-8 py-3 bg-teal-500 hover:bg-teal-600 text-white font-bold rounded-full shadow-lg hover:shadow-xl transition-all w-full text-center">無料で相談する</a>
                            </div>
                        </div>
                    </div>

                    <!-- Premium Plan -->
                    <div class="bg-white border-2 border-amber-200 rounded-3xl shadow-xl overflow-hidden relative flex flex-col">
                        <div class="p-8 md:p-10 text-center border-b border-slate-100">
                            <h3 class="text-xl font-bold text-slate-800 mb-2">プレミアムプラン</h3>
                            <p class="text-amber-700 font-bold mb-4 bg-amber-50 inline-block px-4 py-1 rounded-full text-sm">HP + 集客支援パッケージ</p>
                            <div class="flex justify-center items-end gap-2 mb-2">
                                <span class="text-slate-400 font-bold text-base relative top-[-6px]">月額</span>
                                <span class="text-4xl md:text-5xl font-extrabold text-slate-900">29,800</span>
                                <span class="text-slate-600 font-medium pb-1">円 (税込)</span>
                            </div>
                            <div class="inline-block bg-amber-50 border border-amber-300 rounded-lg px-3 py-1.5 mb-3">
                                <p class="text-xs text-amber-700 font-bold"><i class="fa-solid fa-gift mr-1"></i>6ヶ月継続割引 → <span class="text-lg text-amber-600">24,800</span>円/月</p>
                            </div>
                            <p class="text-slate-500 text-sm">※最低契約期間6ヶ月 / 初期費用 <span class="line-through">50,000円</span> → <span class="text-red-500 font-bold">0円</span></p>
                        </div>
                        <div class="p-6 bg-slate-50 mt-auto">
                            <ul class="space-y-3 text-left">
                                <li class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500 shrink-0"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg><span class="text-sm font-medium">スタンダードの全機能</span></li>
                                <li class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-amber-500 shrink-0"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg><span class="text-sm font-medium">LINE見学予約システム<span class="text-xs text-slate-500 ml-1">自動リマインド付き</span></span></li>
                                <li class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-amber-500 shrink-0"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg><span class="text-sm font-medium">自動応答・ステップ配信<span class="text-xs text-slate-500 ml-1">24時間自動対応</span></span></li>
                                <li class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-amber-500 shrink-0"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg><span class="text-sm font-medium">顧客CRM・タグ管理<span class="text-xs text-slate-500 ml-1">見込み客を逃さない</span></span></li>
                                <li class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-amber-500 shrink-0"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg><span class="text-sm font-medium">GBP最適化 + 優先サポート<span class="text-xs text-slate-500 ml-1">即日対応</span></span></li>
                            </ul>
                            <div class="mt-4 bg-amber-50 rounded-lg p-3">
                                <p class="text-xs text-slate-500"><i class="fa-solid fa-circle-info text-amber-500 mr-1"></i>別々に外注すると<strong>¥60,000〜150,000</strong>相当のサービスが月額に含まれています。</p>
                            </div>
                            <div class="mt-4 text-center">
                                <a href="/contact/" class="inline-block px-8 py-3 bg-amber-500 hover:bg-amber-600 text-white font-bold rounded-full shadow-lg hover:shadow-xl transition-all w-full text-center">プレミアムで始める</a>
                            </div>
                        </div>
                    </div>

                </div>

                <!-- Link to detailed pricing -->
                <div class="text-center">
                    <a href="/pricing/" class="inline-flex items-center gap-2 text-teal-600 hover:text-teal-700 font-bold transition-colors">
                        <span>他社との料金比較・オプション一覧を見る</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 9. FAQ Section -->
    <section id="faq" class="py-20 bg-slate-50">
        <div class="container mx-auto px-4 md:px-6 max-w-3xl">
            <div class="text-center mb-16 fade-in">
                <h2 class="text-3xl font-bold mb-4 text-slate-900">よくある質問</h2>
            </div>

            <div class="space-y-4">
                <div class="border border-slate-200 rounded-lg overflow-hidden faq-item">
                    <button class="w-full px-6 py-4 text-left bg-white hover:bg-slate-50 flex items-center justify-between font-bold text-slate-800 transition-colors faq-btn">
                        <span class="flex items-center gap-3"><span class="text-teal-500">Q.</span>パソコンが苦手ですが、本当に更新できますか？</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300 shrink-0 chevron"><path d="m6 9 6 6 6-6"/></svg>
                    </button>
                    <div class="px-6 bg-slate-50 text-slate-600 leading-relaxed max-h-0 overflow-hidden transition-all duration-300 faq-answer" style="transition: max-height 0.3s ease;">
                        <div class="py-4 border-t border-slate-100"><span class="font-bold text-teal-500 mr-2">A.</span>はい、大丈夫です。普段お使いのLINEアプリで、友だちにメッセージを送る感覚で子犬・子猫の情報を入力するだけでホームページが更新されます。複雑な管理画面へのログインは不要です。</div>
                    </div>
                </div>
                <div class="border border-slate-200 rounded-lg overflow-hidden faq-item">
                    <button class="w-full px-6 py-4 text-left bg-white hover:bg-slate-50 flex items-center justify-between font-bold text-slate-800 transition-colors faq-btn">
                        <span class="flex items-center gap-3"><span class="text-teal-500">Q.</span>すでに他のホームページを持っていますが、乗り換えは可能ですか？</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300 shrink-0 chevron"><path d="m6 9 6 6 6-6"/></svg>
                    </button>
                    <div class="px-6 bg-slate-50 text-slate-600 leading-relaxed max-h-0 overflow-hidden transition-all duration-300 faq-answer" style="transition: max-height 0.3s ease;">
                        <div class="py-4 border-t border-slate-100"><span class="font-bold text-teal-500 mr-2">A.</span>可能です。ドメイン（.comなどのアドレス）の移管手続きもサポートいたします。現在のホームページの課題を分析し、より集客効果の高いサイトへリニューアルをご提案します。</div>
                    </div>
                </div>
                <div class="border border-slate-200 rounded-lg overflow-hidden faq-item">
                    <button class="w-full px-6 py-4 text-left bg-white hover:bg-slate-50 flex items-center justify-between font-bold text-slate-800 transition-colors faq-btn">
                        <span class="flex items-center gap-3"><span class="text-teal-500">Q.</span>最低契約期間はありますか？</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300 shrink-0 chevron"><path d="m6 9 6 6 6-6"/></svg>
                    </button>
                    <div class="px-6 bg-slate-50 text-slate-600 leading-relaxed max-h-0 overflow-hidden transition-all duration-300 faq-answer" style="transition: max-height 0.3s ease;">
                        <div class="py-4 border-t border-slate-100"><span class="font-bold text-teal-500 mr-2">A.</span>はい、最低契約期間は6ヶ月とさせていただいております。SEO（検索エンジン対策）の効果が出るまで一定期間が必要なためです。7ヶ月目以降は1ヶ月ごとの自動更新となり、解約金は発生しません。</div>
                    </div>
                </div>
                <div class="border border-slate-200 rounded-lg overflow-hidden faq-item">
                    <button class="w-full px-6 py-4 text-left bg-white hover:bg-slate-50 flex items-center justify-between font-bold text-slate-800 transition-colors faq-btn">
                        <span class="flex items-center gap-3"><span class="text-teal-500">Q.</span>独自ドメインの取得費用はかかりますか？</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300 shrink-0 chevron"><path d="m6 9 6 6 6-6"/></svg>
                    </button>
                    <div class="px-6 bg-slate-50 text-slate-600 leading-relaxed max-h-0 overflow-hidden transition-all duration-300 faq-answer" style="transition: max-height 0.3s ease;">
                        <div class="py-4 border-t border-slate-100"><span class="font-bold text-teal-500 mr-2">A.</span>いいえ、ドメインの取得・管理費用も月額料金に含まれています。面倒な更新手続きも弊社が代行しますのでご安心ください。</div>
                    </div>
                </div>
                <div class="border border-slate-200 rounded-lg overflow-hidden faq-item">
                    <button class="w-full px-6 py-4 text-left bg-white hover:bg-slate-50 flex items-center justify-between font-bold text-slate-800 transition-colors faq-btn">
                        <span class="flex items-center gap-3"><span class="text-teal-500">Q.</span>申し込みからどのくらいで公開できますか？</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300 shrink-0 chevron"><path d="m6 9 6 6 6-6"/></svg>
                    </button>
                    <div class="px-6 bg-slate-50 text-slate-600 leading-relaxed max-h-0 overflow-hidden transition-all duration-300 faq-answer" style="transition: max-height 0.3s ease;">
                        <div class="py-4 border-t border-slate-100"><span class="font-bold text-teal-500 mr-2">A.</span>テンプレート選択後、最短即日で公開可能です。犬舎の情報や写真をご用意いただければ、スムーズに制作を進められます。</div>
                    </div>
                </div>
            </div>

            <div class="mt-8 text-center">
                <a href="/faq/" class="inline-flex items-center gap-2 text-teal-600 hover:text-teal-700 font-bold transition-colors">
                    <span>その他のよくある質問を見る</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                </a>
            </div>
        </div>
    </section>

    <!-- 10. Contact Section -->
    <section id="contact" class="py-20 bg-gradient-to-br from-slate-900 to-slate-800 text-white">
        <div class="container mx-auto px-4 md:px-6 max-w-4xl">
            <div class="text-center mb-12 fade-in">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">まずは無料相談から</h2>
                <p class="text-slate-300">あなたの犬舎・猫舎に最適なプランをご提案します。</p>
            </div>

            <div class="grid md:grid-cols-2 gap-8">
                <!-- LINE Section (Primary) -->
                <div class="bg-green-50 border-2 border-green-300 rounded-2xl p-8 text-center text-slate-800 relative">
                    <div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-green-500 text-white text-xs font-bold px-4 py-1 rounded-full">おすすめ</div>
                    <div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 bg-green-100">
                        <i class="fa-brands fa-line text-green-500 text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">LINEでかんたん相談</h3>
                    <p class="text-sm text-gray-600 mb-6">友だち追加してトークで質問するだけ。<br>最短当日にお返事します。</p>
                    <a href="https://lin.ee/zsve441" class="inline-block bg-green-500 hover:bg-green-600 text-white rounded-full px-8 py-3 font-bold transition w-full shadow-lg hover:shadow-xl">
                        <i class="fa-brands fa-line mr-2"></i>友だち追加する
                    </a>
                    <div class="mt-4 bg-white rounded-lg p-3 inline-block">
                        <img src="https://qr-official.line.me/gs/M_011fycjm_GW.png?oat__id=6381470&oat_content=qr" alt="LINE QRコード" class="w-28 h-28 mx-auto">
                    </div>
                </div>

                <!-- Form (Secondary) -->
                <div>
                    <form action="https://formsubmit.co/r.tada@breeders-flow.com" method="POST" class="bg-white text-slate-800 rounded-2xl p-8 shadow-2xl">
                        <input type="hidden" name="_subject" value="【Breeders Flow】お問い合わせがありました">
                        <input type="hidden" name="_next" value="https://breeders-flow.com/contact/?sent=true">
                        <input type="hidden" name="_captcha" value="true">
                        <input type="text" name="_honey" style="display:none">
                        <h3 class="font-bold text-lg mb-1 text-center">メールで相談する</h3>
                        <p class="text-xs text-slate-500 text-center mb-6">詳しい内容を送りたい方はこちら</p>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-bold text-slate-700 mb-1">お名前 <span class="text-red-500 text-xs">必須</span></label>
                                <input type="text" name="name" required placeholder="山田 太郎" class="w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-teal-500 focus:ring-2 focus:ring-teal-200 outline-none transition-all text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-bold text-slate-700 mb-1">メールアドレス <span class="text-red-500 text-xs">必須</span></label>
                                <input type="email" name="email" required placeholder="example@email.com" class="w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-teal-500 focus:ring-2 focus:ring-teal-200 outline-none transition-all text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-bold text-slate-700 mb-1">お問い合わせ内容 <span class="text-red-500 text-xs">必須</span></label>
                                <textarea name="message" required rows="4" placeholder="ご質問やご要望をご記入ください" class="w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-teal-500 focus:ring-2 focus:ring-teal-200 outline-none transition-all text-sm resize-y"></textarea>
                            </div>
                            <div>
                                <label class="flex items-start gap-2 cursor-pointer">
                                    <input type="checkbox" required class="mt-1 accent-teal-600">
                                    <span class="text-xs text-gray-600"><a href="/privacy/" class="text-teal-600 underline">プライバシーポリシー</a>に同意の上、送信してください。</span>
                                </label>
                            </div>
                            <button type="submit" class="w-full px-8 py-3 bg-teal-500 hover:bg-teal-600 text-white font-bold rounded-full shadow-lg hover:shadow-xl transition-all">
                                送信する
                            </button>
                        </div>
                        <p class="text-xs text-gray-400 text-center mt-3"><i class="fa-solid fa-lock mr-1"></i>SSL暗号化通信で保護されています</p>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Sticky CTA (Mobile only) -->
    <div id="sticky-cta" class="fixed bottom-0 left-0 right-0 z-50 md:hidden translate-y-full transition-transform duration-300 bg-white/95 backdrop-blur-sm border-t border-slate-200 shadow-[0_-4px_12px_rgba(0,0,0,0.08)] px-4 py-3">
        <div class="flex gap-2">
            <a href="/contact/" class="flex-1 px-4 py-3 bg-teal-500 hover:bg-teal-600 text-white font-bold text-sm rounded-full shadow-lg text-center transition-colors">
                無料で相談する
            </a>
            <a href="https://lin.ee/zsve441" class="px-4 py-3 bg-[#06C755] hover:bg-[#05b34c] text-white font-bold text-sm rounded-full shadow-lg text-center transition-colors">
                <i class="fa-brands fa-line text-lg"></i>
            </a>
        </div>
    </div>

    <!-- FAQ Accordion Script (page-specific) -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const faqItems = document.querySelectorAll('.faq-item');
            faqItems.forEach(item => {
                const btn = item.querySelector('.faq-btn');
                const answer = item.querySelector('.faq-answer');
                const chevron = item.querySelector('.chevron');
                btn.addEventListener('click', () => {
                    const isOpen = answer.style.maxHeight && answer.style.maxHeight !== '0px';
                    faqItems.forEach(otherItem => {
                        const otherAnswer = otherItem.querySelector('.faq-answer');
                        const otherChevron = otherItem.querySelector('.chevron');
                        if (otherItem !== item) {
                            otherAnswer.style.maxHeight = '0px';
                            otherChevron.style.transform = 'rotate(0deg)';
                        }
                    });
                    if (isOpen) {
                        answer.style.maxHeight = '0px';
                        chevron.style.transform = 'rotate(0deg)';
                    } else {
                        answer.style.maxHeight = answer.scrollHeight + 'px';
                        chevron.style.transform = 'rotate(180deg)';
                    }
                });
            });
        });

        // === ROI Interactive Calculator ===
        var sliderHeads = document.getElementById('slider-heads');
        var sliderPrice = document.getElementById('slider-price');
        var sliderDirect = document.getElementById('slider-direct');
        var RATE = 0.125; // 手数料率 12.5%（10-15%の中央値）
        var BF_ANNUAL = 23.76; // Breeders Flow年間費用（万円）

        function updateROI() {
            var heads = parseInt(sliderHeads.value);
            var price = parseInt(sliderPrice.value);
            var direct = parseInt(sliderDirect.value);

            // 直販スライダーの上限を成約頭数に連動
            sliderDirect.max = heads;
            if (direct > heads) {
                direct = heads;
                sliderDirect.value = direct;
            }
            document.getElementById('direct-max-label').textContent = heads + '頭';

            // 表示値更新
            document.getElementById('val-heads').textContent = heads;
            document.getElementById('val-price').textContent = price;
            document.getElementById('val-direct').textContent = direct;

            // 計算
            var portalFee = Math.round(heads * price * RATE); // 万円
            var saving = Math.round(direct * price * RATE);
            var profit = Math.round(saving - BF_ANNUAL);
            var perHead = Math.round(price * RATE * 10) / 10;
            var breakeven = Math.ceil(BF_ANNUAL / (price * RATE));

            // 結果反映
            document.getElementById('result-portal-fee').textContent = portalFee;
            document.getElementById('result-saving').textContent = saving;
            document.getElementById('result-profit').textContent = Math.abs(profit);
            document.getElementById('result-profit-sign').textContent = profit >= 0 ? '+' : '-';
            document.getElementById('result-per-head').textContent = perHead;
            document.getElementById('result-breakeven').textContent = breakeven;

            // 利益改善カードの色
            var profitCard = document.getElementById('result-profit-card');
            if (profit >= 0) {
                profitCard.className = 'bg-teal-100 rounded-xl p-4 border border-teal-300';
                document.getElementById('result-profit').className = 'countup';
                profitCard.querySelector('.text-2xl').className = 'text-2xl font-extrabold text-teal-700';
            } else {
                profitCard.className = 'bg-red-50 rounded-xl p-4 border border-red-200';
                profitCard.querySelector('.text-2xl').className = 'text-2xl font-extrabold text-red-600';
            }
        }

        if (sliderHeads) {
            sliderHeads.addEventListener('input', updateROI);
            sliderPrice.addEventListener('input', updateROI);
            sliderDirect.addEventListener('input', updateROI);
            updateROI();
        }

        // === Count-Up Animation ===
        var countUpObserver = new IntersectionObserver(function(entries) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    var el = entry.target;
                    var target = parseFloat(el.textContent);
                    if (isNaN(target) || target === 0) return;
                    var duration = 800;
                    var start = 0;
                    var startTime = null;
                    var isInt = Number.isInteger(target);

                    function animate(ts) {
                        if (!startTime) startTime = ts;
                        var progress = Math.min((ts - startTime) / duration, 1);
                        var eased = 1 - Math.pow(1 - progress, 3); // easeOutCubic
                        var current = start + (target - start) * eased;
                        el.textContent = isInt ? Math.round(current) : current.toFixed(1);
                        if (progress < 1) requestAnimationFrame(animate);
                    }
                    requestAnimationFrame(animate);
                    countUpObserver.unobserve(el);
                }
            });
        }, { threshold: 0.5 });

        document.querySelectorAll('.countup').forEach(function(el) {
            countUpObserver.observe(el);
        });

        // === Sticky CTA (Mobile) ===
        var stickyCta = document.getElementById('sticky-cta');
        var heroSection = document.querySelector('section');
        if (stickyCta && heroSection) {
            var stickyObserver = new IntersectionObserver(function(entries) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        stickyCta.classList.add('translate-y-full');
                        stickyCta.classList.remove('translate-y-0');
                    } else {
                        stickyCta.classList.remove('translate-y-full');
                        stickyCta.classList.add('translate-y-0');
                    }
                });
            }, { threshold: 0 });
            stickyObserver.observe(heroSection);
        }
    </script>

    <!-- Demo Preview Switcher -->
    <script>
        function switchDemoPreview(url, label) {
            document.getElementById('demo-iframe').src = url;
            document.getElementById('demo-url-bar').textContent = url.replace('https://', '');
            document.getElementById('demo-external-link').href = url;

            document.querySelectorAll('.demo-tab').forEach(function(btn) {
                if (btn.textContent.trim() === label) {
                    btn.className = 'demo-tab px-4 py-2 rounded-full text-sm font-bold transition border-2 border-teal-500 bg-teal-500 text-white shadow-sm';
                } else {
                    btn.className = 'demo-tab px-4 py-2 rounded-full text-sm font-bold transition border-2 border-teal-500 bg-white text-teal-600 hover:bg-teal-50';
                }
            });
        }
    </script>