← GPT-AI-LP
WEBSITE · 86.7 KB

refs/pengin/lp-master-01-top.html

Workspace snapshot · 08/31 23:51

Preview

Source
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>LP 本体 — BtoBサービスLP汎用WF(22セクション・長尺型)</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Noto+Sans+JP:wght@300;400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../common/_base.css">
</head>
<body>
<div class="wf-stage">
<div class="wf-frame">

  <!-- ============================================================
       SEC 01 / ヘッダー(軽量・ロゴ + フローティングCTA)
       ============================================================ -->
  <header class="wf-header" style="position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
    <div class="wf-header-main">
      <div class="wf-header-logo">[ロゴ]</div>
      <div class="wf-header-cta wf-row gap-16">
        <span class="wf-xs wf-text-mute" style="display: inline-flex; align-items: center;">
          ▼ 残り[X]社 / 今月の受付
        </span>
        <a href="#cta-bottom" class="wf-btn dark sm">▶ 無料相談する</a>
      </div>
    </div>
  </header>

  <!-- ============================================================
       SEC 02 / FV — 価格+成果+安心の3点同時提示
       ============================================================ -->
  <section class="wf-section flat">
    <div style="padding: 64px 80px; background: linear-gradient(180deg, #F5F5F5 0%, #fff 100%);">
      <div class="wf-container" style="display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start;">

        <!-- 左列:コピー + 信頼指標 + 担当者 + ビジュアル -->
        <div>

        <!-- 上段:補足バッジ -->
        <div class="wf-row gap-8" style="flex-wrap: wrap;">
          <span class="wf-tag" style="background:#2A2A26; color:#fff; height:28px; padding:0 14px; font-weight:500;">毎月[X]社限定</span>
          <span class="wf-tag" style="background:#fff; color:#2A2A26; border:1px solid #2A2A26; height:28px; padding:0 14px; font-weight:500;">IT導入補助金 対象</span>
          <span class="wf-tag" style="background:#fff; color:#2A2A26; border:1px solid #2A2A26; height:28px; padding:0 14px; font-weight:500;">業界経験[X]年</span>
          <span class="wf-tag" style="background:#fff; color:#2A2A26; border:1px solid #2A2A26; height:28px; padding:0 14px; font-weight:500;">導入[X]社突破</span>
        </div>

        <!-- メインコピー(8語以内・ベネフィット型) -->
        <h1 class="wf-mt-24" style="font-size: 44px; font-weight: 700; line-height: 1.4; letter-spacing: 0.01em;">
          [メインコピー:ターゲットの<br>
          解決したい課題を一文で / 8語以内]
        </h1>

        <!-- サブコピー -->
        <p class="wf-mt-24" style="font-size: 18px; line-height: 1.9; max-width: 720px; color: var(--wf-text);">
          [サブコピー:商品名 + 提供価値 + 導入メリット を一文で押し切る / 2〜3行]
        </p>

        <!-- 信頼指標(巨大数値で3〜4点提示) -->
        <div class="wf-row gap-32 wf-mt-32" style="flex-wrap: wrap;">
          <div>
            <div style="font-size: 48px; font-weight: 700; line-height: 1;">最大<span style="color:#B32D2D;">XXX</span>%</div>
            <div class="wf-small wf-text-mute wf-mt-8">[成果指標:例 売上向上率]</div>
          </div>
          <div style="width:1px; background:var(--wf-line); align-self:stretch;"></div>
          <div>
            <div style="font-size: 48px; font-weight: 700; line-height: 1;"><span style="color:#B32D2D;">XX</span>倍</div>
            <div class="wf-small wf-text-mute wf-mt-8">[成果指標:例 リード獲得数]</div>
          </div>
          <div style="width:1px; background:var(--wf-line); align-self:stretch;"></div>
          <div>
            <div style="font-size: 48px; font-weight: 700; line-height: 1;">月額<span style="color:#B32D2D;">XX</span>万円〜</div>
            <div class="wf-small wf-text-mute wf-mt-8">価格を隠さない明示</div>
          </div>
          <div style="width:1px; background:var(--wf-line); align-self:stretch;"></div>
          <div>
            <div style="font-size: 48px; font-weight: 700; line-height: 1;"><span style="color:#B32D2D;">成果保証</span></div>
            <div class="wf-small wf-text-mute wf-mt-8">未達時は[X]返金</div>
          </div>
        </div>

          <!-- 担当者紹介(FV信頼形成) -->
          <div class="wf-row gap-16 wf-mt-32" style="align-items: center;">
            <div class="wf-img" style="width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;">[担当顔写真]</div>
            <div>
              <div style="font-size: 13px; font-weight: 600;">専任コンサルタント [氏名]</div>
              <div class="wf-xs wf-text-mute wf-mt-4">[業界経験X年 / 累計支援X社 / 元◯◯出身]</div>
            </div>
          </div>

          <!-- FVビジュアル(左列下) -->
          <div class="wf-img r-16-9 wf-mt-32" style="height: 240px;">[FVビジュアル:ダッシュボード / プロダクト画面 / 利用シーン]</div>
        </div>

        <!-- 右列:FVフォーム埋込(メイン CTA) -->
        <div style="background: #fff; border: 2px solid #2A2A26; padding: 32px; box-shadow: 0 8px 32px rgba(0,0,0,0.08);">
          <div class="wf-row gap-8" style="margin-bottom: 16px;">
            <span class="wf-tag" style="background:#B32D2D; color:#fff; height:24px; padding:0 12px; font-size:11px;">無料相談 受付中</span>
          </div>
          <h3 style="font-size: 22px; font-weight: 700; line-height: 1.5;">
            30秒で完了 / 営業日<br>24時間以内に折返し
          </h3>
          <p class="wf-small wf-text-mute wf-mt-12" style="line-height: 1.8;">
            [強引な売り込みなし。お見積もり・資料請求も同フォームから]
          </p>

          <div class="wf-mt-24">
            <div style="margin-bottom: 12px;">
              <label class="wf-xs" style="display: block; font-weight: 600; margin-bottom: 6px;">お名前 <span style="color:#B32D2D;">必須</span></label>
              <input class="wf-form-input" placeholder="山田 太郎" style="height: 44px;">
            </div>
            <div style="margin-bottom: 12px;">
              <label class="wf-xs" style="display: block; font-weight: 600; margin-bottom: 6px;">会社名 <span style="color:#B32D2D;">必須</span></label>
              <input class="wf-form-input" placeholder="株式会社〇〇" style="height: 44px;">
            </div>
            <div style="margin-bottom: 12px;">
              <label class="wf-xs" style="display: block; font-weight: 600; margin-bottom: 6px;">メールアドレス <span style="color:#B32D2D;">必須</span></label>
              <input class="wf-form-input" placeholder="example@company.com" style="height: 44px;">
            </div>
            <div style="margin-bottom: 12px;">
              <label class="wf-xs" style="display: block; font-weight: 600; margin-bottom: 6px;">電話番号</label>
              <input class="wf-form-input" placeholder="03-0000-0000" style="height: 44px;">
            </div>
            <div style="margin-bottom: 16px;">
              <label class="wf-xs" style="display: block; font-weight: 600; margin-bottom: 6px;">ご相談内容</label>
              <textarea class="wf-form-textarea" placeholder="現状の課題・実現したいこと等" style="min-height: 80px;"></textarea>
            </div>
            <label style="display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 16px;">
              <input type="checkbox"> <a href="#" style="text-decoration: underline;">プライバシーポリシー</a>に同意する
            </label>
            <a class="wf-btn dark block lg">▶ 無料で相談する</a>
            <p class="wf-xs wf-text-mute wf-mt-12" style="text-align: center;">毎月[X]社限定 / 強引な営業なし</p>
          </div>

          <!-- 資料DL代替CTA -->
          <div class="wf-mt-24" style="padding-top: 16px; border-top: 1px solid var(--wf-line);">
            <p class="wf-xs wf-text-mute" style="margin-bottom: 8px;">まずは資料だけ受け取りたい方</p>
            <a href="#download" class="wf-btn outline-dark block">資料をダウンロード(無料)</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       SEC 03 / 信頼指標バー(横一列・濃色背景)
       ============================================================ -->
  <section class="wf-section" style="background: #2A2A26; color: #fff; padding: 40px 80px;">
    <div class="wf-container wf-row" style="justify-content: space-around; gap: 32px; flex-wrap: wrap;">
      <div style="text-align: center;">
        <div style="font-size: 56px; font-weight: 700; line-height: 1;">XX<span style="font-size: 18px;">%</span></div>
        <div style="font-size: 13px; opacity: 0.85; margin-top: 8px;">[継続率 / 顧客満足度]</div>
      </div>
      <div style="text-align: center;">
        <div style="font-size: 56px; font-weight: 700; line-height: 1;">XXX<span style="font-size: 18px;">社</span></div>
        <div style="font-size: 13px; opacity: 0.85; margin-top: 8px;">[累計導入企業数]</div>
      </div>
      <div style="text-align: center;">
        <div style="font-size: 56px; font-weight: 700; line-height: 1;">X.X<span style="font-size: 18px;">倍</span></div>
        <div style="font-size: 13px; opacity: 0.85; margin-top: 8px;">[平均成果改善]</div>
      </div>
      <div style="text-align: center;">
        <div style="font-size: 56px; font-weight: 700; line-height: 1;">No.<span style="color:#C9A04F;">1</span></div>
        <div style="font-size: 13px; opacity: 0.85; margin-top: 8px;">[受賞・カテゴリ1位]</div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       SEC 04 / 顧客ロゴスライダー(10〜20社)
       ============================================================ -->
  <section class="wf-section tight">
    <div class="wf-container wf-text-center">
      <p class="wf-small wf-text-mute">[業界をリードする企業に選ばれています / 計XXX社が導入]</p>
      <div class="wf-row center wf-mt-24" style="flex-wrap: wrap; gap: 32px 48px; opacity: 0.8;">
        <div class="wf-img" style="width: 120px; height: 40px;">[ロゴ01]</div>
        <div class="wf-img" style="width: 120px; height: 40px;">[ロゴ02]</div>
        <div class="wf-img" style="width: 120px; height: 40px;">[ロゴ03]</div>
        <div class="wf-img" style="width: 120px; height: 40px;">[ロゴ04]</div>
        <div class="wf-img" style="width: 120px; height: 40px;">[ロゴ05]</div>
        <div class="wf-img" style="width: 120px; height: 40px;">[ロゴ06]</div>
        <div class="wf-img" style="width: 120px; height: 40px;">[ロゴ07]</div>
        <div class="wf-img" style="width: 120px; height: 40px;">[ロゴ08]</div>
      </div>
      <div class="wf-row center wf-mt-24" style="flex-wrap: wrap; gap: 32px 48px; opacity: 0.8;">
        <div class="wf-img" style="width: 120px; height: 40px;">[ロゴ09]</div>
        <div class="wf-img" style="width: 120px; height: 40px;">[ロゴ10]</div>
        <div class="wf-img" style="width: 120px; height: 40px;">[ロゴ11]</div>
        <div class="wf-img" style="width: 120px; height: 40px;">[ロゴ12]</div>
        <div class="wf-img" style="width: 120px; height: 40px;">[ロゴ13]</div>
        <div class="wf-img" style="width: 120px; height: 40px;">[ロゴ14]</div>
        <div class="wf-img" style="width: 120px; height: 40px;">[ロゴ15]</div>
        <div class="wf-img" style="width: 120px; height: 40px;">[ロゴ16]</div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       SEC 05 / 課題提起 — こんなお悩みありませんか?(共感型6〜8項目)
       ============================================================ -->
  <section class="wf-section soft">
    <div class="wf-container">
      <div class="wf-section-title wf-text-center">
        <span class="label">よくあるお悩み</span>
        <h2>こんな課題、ありませんか?</h2>
        <p class="lead" style="margin-left: auto; margin-right: auto;">
          [ターゲット業界]の担当者様から、毎日のように寄せられる代表的なお悩みです。
        </p>
      </div>

      <div class="wf-col-2 wf-mt-48" style="max-width: 960px; margin: 0 auto;">
        <div style="padding: 24px 28px; background: #fff; border: 1px solid var(--wf-line); display: flex; gap: 16px; align-items: flex-start;">
          <span style="font-size: 32px; line-height: 1; color: #B32D2D;">✗</span>
          <div>
            <h4 style="font-size: 16px; font-weight: 600; line-height: 1.5;">[悩み01:例 リード数が伸び悩んでいる]</h4>
            <p class="wf-small wf-text-mute wf-mt-8" style="line-height: 1.8;">[補足:背景や具体状況の一文]</p>
          </div>
        </div>
        <div style="padding: 24px 28px; background: #fff; border: 1px solid var(--wf-line); display: flex; gap: 16px; align-items: flex-start;">
          <span style="font-size: 32px; line-height: 1; color: #B32D2D;">✗</span>
          <div>
            <h4 style="font-size: 16px; font-weight: 600; line-height: 1.5;">[悩み02:例 商談化率が上がらない]</h4>
            <p class="wf-small wf-text-mute wf-mt-8" style="line-height: 1.8;">[補足]</p>
          </div>
        </div>
        <div style="padding: 24px 28px; background: #fff; border: 1px solid var(--wf-line); display: flex; gap: 16px; align-items: flex-start;">
          <span style="font-size: 32px; line-height: 1; color: #B32D2D;">✗</span>
          <div>
            <h4 style="font-size: 16px; font-weight: 600; line-height: 1.5;">[悩み03:例 業務工数が膨大]</h4>
            <p class="wf-small wf-text-mute wf-mt-8" style="line-height: 1.8;">[補足]</p>
          </div>
        </div>
        <div style="padding: 24px 28px; background: #fff; border: 1px solid var(--wf-line); display: flex; gap: 16px; align-items: flex-start;">
          <span style="font-size: 32px; line-height: 1; color: #B32D2D;">✗</span>
          <div>
            <h4 style="font-size: 16px; font-weight: 600; line-height: 1.5;">[悩み04:例 専門人材が社内にいない]</h4>
            <p class="wf-small wf-text-mute wf-mt-8" style="line-height: 1.8;">[補足]</p>
          </div>
        </div>
        <div style="padding: 24px 28px; background: #fff; border: 1px solid var(--wf-line); display: flex; gap: 16px; align-items: flex-start;">
          <span style="font-size: 32px; line-height: 1; color: #B32D2D;">✗</span>
          <div>
            <h4 style="font-size: 16px; font-weight: 600; line-height: 1.5;">[悩み05:例 既存ツールが現場で使いこなせない]</h4>
            <p class="wf-small wf-text-mute wf-mt-8" style="line-height: 1.8;">[補足]</p>
          </div>
        </div>
        <div style="padding: 24px 28px; background: #fff; border: 1px solid var(--wf-line); display: flex; gap: 16px; align-items: flex-start;">
          <span style="font-size: 32px; line-height: 1; color: #B32D2D;">✗</span>
          <div>
            <h4 style="font-size: 16px; font-weight: 600; line-height: 1.5;">[悩み06:例 投資対効果が見えない]</h4>
            <p class="wf-small wf-text-mute wf-mt-8" style="line-height: 1.8;">[補足]</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       SEC 06 / 共感(放置するとどうなるか)
       ============================================================ -->
  <section class="wf-section">
    <div class="wf-container" style="max-width: 880px;">
      <div class="wf-section-title wf-text-center">
        <span class="label">放置するとどうなる?</span>
        <h2>その課題、放置すると<br>事業成長の足かせになります</h2>
      </div>
      <div class="wf-mt-32" style="background: var(--wf-bg-soft); padding: 40px 48px; border-left: 4px solid #B32D2D;">
        <p style="font-size: 16px; line-height: 2.0;">
          [現状放置のリスクを客観事実 + 数値で語る段落。例:「業界平均では◯◯の課題を放置した企業の[X]%が、3年以内にシェアを[X]%失っているデータがあります。」3〜5行ほど]
        </p>
        <p class="wf-mt-24" style="font-size: 16px; line-height: 2.0;">
          [感情に寄せた追加段落。「貴社が今やるべきは、もう "ツール選び" ではなく "確実な実行体制" の構築です。」]
        </p>
      </div>
      <div class="wf-row center gap-32 wf-mt-48" style="flex-wrap: wrap;">
        <div style="text-align: center;">
          <div style="font-size: 36px; font-weight: 700; color: #B32D2D;">XX%</div>
          <div class="wf-small wf-text-mute">[業界での課題発生率]</div>
        </div>
        <div style="text-align: center;">
          <div style="font-size: 36px; font-weight: 700; color: #B32D2D;">▼XX%</div>
          <div class="wf-small wf-text-mute">[未対応企業の業績落差]</div>
        </div>
        <div style="text-align: center;">
          <div style="font-size: 36px; font-weight: 700; color: #B32D2D;">XX年</div>
          <div class="wf-small wf-text-mute">[対応猶予の業界平均]</div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       SEC 07 / ソリューション提示([商品名]が解決します)
       ============================================================ -->
  <section class="wf-section soft">
    <div class="wf-container">
      <div class="wf-section-title wf-text-center">
        <span class="label">私たちの打ち手</span>
        <h2>[商品名]が、すべての課題を解決します</h2>
        <p class="lead" style="margin-left: auto; margin-right: auto;">
          [一行で何のサービスか / カテゴリ的位置 / 提供形態]を、業界経験[X]年のチームが提供します。
        </p>
      </div>

      <div class="wf-col-asym wf-mt-48" style="grid-template-columns: 6fr 6fr; align-items: center;">
        <div class="wf-img r-4-3" style="background:#2A2A26;">[サービス全体像 / プロダクトイメージ]</div>
        <div>
          <div class="wf-tag" style="background:#2A2A26; color:#fff; height:28px; padding:0 14px;">[サービスカテゴリ]</div>
          <h3 class="wf-mt-16" style="font-size: 28px; font-weight: 600; line-height: 1.5;">
            [プロダクト名] — [一行ベネフィット]
          </h3>
          <p class="wf-mt-16" style="font-size: 15px; line-height: 2.0;">
            [どのような仕組みで課題を解決するか。3〜4行で。「◯◯の自動化」「◯◯の可視化」「◯◯の伴走支援」など、提供価値を3つに絞って端的に]
          </p>
          <ul class="wf-mt-24" style="font-size: 15px; line-height: 2.0; padding-left: 20px; list-style: '✓ ';">
            <li><strong>[核心機能01]</strong>:[一行説明]</li>
            <li><strong>[核心機能02]</strong>:[一行説明]</li>
            <li><strong>[核心機能03]</strong>:[一行説明]</li>
            <li><strong>[核心機能04]</strong>:[一行説明]</li>
          </ul>
        </div>
      </div>

      <!-- Before/After比較 -->
      <div class="wf-mt-48" style="background:#fff; padding: 40px; border: 1px solid var(--wf-line);">
        <h4 class="wf-text-center" style="font-size: 20px; font-weight: 600;">導入による変化</h4>
        <div class="wf-col-2 wf-mt-32" style="align-items: stretch;">
          <div style="padding: 32px; background: var(--wf-bg-soft); border-left: 4px solid #999;">
            <div class="wf-small wf-text-mute" style="font-weight: 600; letter-spacing: 0.1em;">BEFORE — 導入前</div>
            <ul class="wf-mt-16" style="font-size: 14px; line-height: 2.0; padding-left: 20px; list-style: '✗ ';">
              <li>[課題状態01:例 月間リード数 [X]件で停滞]</li>
              <li>[課題状態02]</li>
              <li>[課題状態03]</li>
              <li>[課題状態04]</li>
            </ul>
          </div>
          <div style="padding: 32px; background: #2A2A26; color: #fff; border-left: 4px solid #C9A04F;">
            <div style="font-size: 12px; opacity: 0.7; font-weight: 600; letter-spacing: 0.1em;">AFTER — 導入後</div>
            <ul class="wf-mt-16" style="font-size: 14px; line-height: 2.0; padding-left: 20px; list-style: '✓ ';">
              <li>[改善状態01:例 月間リード数 [X]倍 / 商談化率も向上]</li>
              <li>[改善状態02]</li>
              <li>[改善状態03]</li>
              <li>[改善状態04]</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       SEC 08 / 中間CTAバナー1
       ============================================================ -->
  <section class="wf-section" style="background: var(--wf-img-deep); color: #fff;">
    <div class="wf-container wf-text-center">
      <h3 style="font-size: 28px; color: #fff; font-weight: 600; line-height: 1.5;">
        まずは、貴社の課題を聞かせてください<br>無料相談・お見積もりは30秒で完了
      </h3>
      <p class="wf-mt-16" style="opacity: 0.85;">※ 営業日24時間以内に折返し / 強引な売り込みは一切いたしません</p>
      <div class="wf-row center gap-16 wf-mt-32" style="flex-wrap: wrap;">
        <a href="#cta-bottom" class="wf-btn outline-white lg">▶ 無料相談する</a>
        <a href="#download" class="wf-btn white lg">資料をダウンロード</a>
      </div>
      <p class="wf-xs wf-mt-16" style="color: rgba(255,255,255,0.7);">※ 毎月[X]社限定 / 平均回答[X]営業日</p>
    </div>
  </section>

  <!-- ============================================================
       SEC 09 / 差別化(他社と何が違うのか・強み3〜4個)
       ============================================================ -->
  <section class="wf-section">
    <div class="wf-container">
      <div class="wf-section-title wf-text-center">
        <span class="label">選ばれる理由</span>
        <h2>[商品名]だけが提供できる<br>[X]つの差別化要素</h2>
      </div>

      <!-- 強み01:左テキスト・右画像 -->
      <div class="wf-col-asym wf-mt-48" style="align-items: center;">
        <div>
          <div class="wf-row gap-16">
            <div style="font-size: 64px; font-weight: 700; line-height: 1; color: var(--wf-text-faint);">01</div>
            <div style="flex: 1;">
              <h3 style="font-size: 26px; font-weight: 600; line-height: 1.5;">[強み01:例 業界唯一の◯◯◯◯メソッド]</h3>
            </div>
          </div>
          <p class="wf-mt-24" style="font-size: 15px; line-height: 2.0;">
            [強み01の説明:4〜6行。なぜそれが他社にはない強みか / 根拠 / どう顧客のメリットに繋がるか]
          </p>
          <div class="wf-mt-24" style="padding: 16px 20px; background: var(--wf-bg-soft); border-left: 3px solid #2A2A26;">
            <div class="wf-xs wf-text-mute" style="font-weight: 600; letter-spacing: 0.1em;">根拠データ</div>
            <p class="wf-small wf-mt-4" style="line-height: 1.8;">[数値・受賞・特許・調査結果など客観的根拠を一行]</p>
          </div>
        </div>
        <div class="wf-img r-4-3">[強み01イメージ]</div>
      </div>

      <!-- 強み02:左画像・右テキスト -->
      <div class="wf-col-asym wf-mt-48" style="align-items: center; grid-template-columns: 7fr 5fr;">
        <div class="wf-img r-4-3">[強み02イメージ]</div>
        <div>
          <div class="wf-row gap-16">
            <div style="font-size: 64px; font-weight: 700; line-height: 1; color: var(--wf-text-faint);">02</div>
            <div style="flex: 1;">
              <h3 style="font-size: 26px; font-weight: 600; line-height: 1.5;">[強み02:例 専任伴走チームによる成果コミット]</h3>
            </div>
          </div>
          <p class="wf-mt-24" style="font-size: 15px; line-height: 2.0;">
            [強み02の説明:4〜6行]
          </p>
          <div class="wf-mt-24" style="padding: 16px 20px; background: var(--wf-bg-soft); border-left: 3px solid #2A2A26;">
            <div class="wf-xs wf-text-mute" style="font-weight: 600; letter-spacing: 0.1em;">根拠データ</div>
            <p class="wf-small wf-mt-4" style="line-height: 1.8;">[根拠]</p>
          </div>
        </div>
      </div>

      <!-- 強み03:左テキスト・右画像 -->
      <div class="wf-col-asym wf-mt-48" style="align-items: center;">
        <div>
          <div class="wf-row gap-16">
            <div style="font-size: 64px; font-weight: 700; line-height: 1; color: var(--wf-text-faint);">03</div>
            <div style="flex: 1;">
              <h3 style="font-size: 26px; font-weight: 600; line-height: 1.5;">[強み03:例 完全成果報酬型・未達時返金保証]</h3>
            </div>
          </div>
          <p class="wf-mt-24" style="font-size: 15px; line-height: 2.0;">
            [強み03の説明:4〜6行]
          </p>
          <div class="wf-mt-24" style="padding: 16px 20px; background: var(--wf-bg-soft); border-left: 3px solid #2A2A26;">
            <div class="wf-xs wf-text-mute" style="font-weight: 600; letter-spacing: 0.1em;">根拠データ</div>
            <p class="wf-small wf-mt-4" style="line-height: 1.8;">[根拠]</p>
          </div>
        </div>
        <div class="wf-img r-4-3">[強み03イメージ]</div>
      </div>

      <!-- 強み04:左画像・右テキスト -->
      <div class="wf-col-asym wf-mt-48" style="align-items: center; grid-template-columns: 7fr 5fr;">
        <div class="wf-img r-4-3">[強み04イメージ]</div>
        <div>
          <div class="wf-row gap-16">
            <div style="font-size: 64px; font-weight: 700; line-height: 1; color: var(--wf-text-faint);">04</div>
            <div style="flex: 1;">
              <h3 style="font-size: 26px; font-weight: 600; line-height: 1.5;">[強み04:例 業界最速・最短[X]日で導入完了]</h3>
            </div>
          </div>
          <p class="wf-mt-24" style="font-size: 15px; line-height: 2.0;">
            [強み04の説明:4〜6行]
          </p>
          <div class="wf-mt-24" style="padding: 16px 20px; background: var(--wf-bg-soft); border-left: 3px solid #2A2A26;">
            <div class="wf-xs wf-text-mute" style="font-weight: 600; letter-spacing: 0.1em;">根拠データ</div>
            <p class="wf-small wf-mt-4" style="line-height: 1.8;">[根拠]</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       SEC 10 / プロセス図(ご利用の流れ・4〜5ステップ)
       ============================================================ -->
  <section class="wf-section soft">
    <div class="wf-container">
      <div class="wf-section-title wf-text-center">
        <span class="label">ご利用の流れ</span>
        <h2>導入から成果創出まで、最短[X]日</h2>
        <p class="lead" style="margin-left: auto; margin-right: auto;">
          [導入難易度の低さ・伴走の手厚さを訴求]
        </p>
      </div>

      <div class="wf-mt-48" style="position: relative;">
        <!-- 接続線 -->
        <div style="position: absolute; top: 32px; left: 8%; right: 8%; height: 2px; background: var(--wf-line); z-index: 0;"></div>

        <div class="wf-col-4" style="position: relative; z-index: 1; grid-template-columns: repeat(5, 1fr); gap: 16px;">
          <div style="text-align: center; background: #F5F5F5; padding: 24px 16px;">
            <div style="width: 64px; height: 64px; background: #2A2A26; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; margin: 0 auto;">01</div>
            <h4 class="wf-mt-16" style="font-size: 15px; font-weight: 600; line-height: 1.5;">お問い合わせ</h4>
            <p class="wf-xs wf-text-mute wf-mt-8" style="line-height: 1.8;">[フォームから30秒で / 24時間以内に折返し]</p>
            <div class="wf-xs wf-mt-16" style="font-weight: 600; color: #B32D2D;">所要:即日</div>
          </div>
          <div style="text-align: center; background: #F5F5F5; padding: 24px 16px;">
            <div style="width: 64px; height: 64px; background: #2A2A26; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; margin: 0 auto;">02</div>
            <h4 class="wf-mt-16" style="font-size: 15px; font-weight: 600; line-height: 1.5;">無料ヒアリング</h4>
            <p class="wf-xs wf-text-mute wf-mt-8" style="line-height: 1.8;">[現状課題・目標を専任担当が1時間ヒアリング]</p>
            <div class="wf-xs wf-mt-16" style="font-weight: 600; color: #B32D2D;">所要:1〜3日</div>
          </div>
          <div style="text-align: center; background: #F5F5F5; padding: 24px 16px;">
            <div style="width: 64px; height: 64px; background: #2A2A26; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; margin: 0 auto;">03</div>
            <h4 class="wf-mt-16" style="font-size: 15px; font-weight: 600; line-height: 1.5;">ご提案・お見積り</h4>
            <p class="wf-xs wf-text-mute wf-mt-8" style="line-height: 1.8;">[貴社専用のプラン設計・見積もり提示]</p>
            <div class="wf-xs wf-mt-16" style="font-weight: 600; color: #B32D2D;">所要:3〜5日</div>
          </div>
          <div style="text-align: center; background: #F5F5F5; padding: 24px 16px;">
            <div style="width: 64px; height: 64px; background: #2A2A26; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; margin: 0 auto;">04</div>
            <h4 class="wf-mt-16" style="font-size: 15px; font-weight: 600; line-height: 1.5;">導入・キックオフ</h4>
            <p class="wf-xs wf-text-mute wf-mt-8" style="line-height: 1.8;">[初期セットアップ / KPI設計 / 専任チーム配属]</p>
            <div class="wf-xs wf-mt-16" style="font-weight: 600; color: #B32D2D;">所要:1〜2週間</div>
          </div>
          <div style="text-align: center; background: #2A2A26; color: #fff; padding: 24px 16px;">
            <div style="width: 64px; height: 64px; background: #C9A04F; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; margin: 0 auto;">05</div>
            <h4 class="wf-mt-16" style="font-size: 15px; font-weight: 600; line-height: 1.5;">運用・成果創出</h4>
            <p class="wf-xs wf-mt-8" style="line-height: 1.8; opacity: 0.85;">[月次レビュー / PDCA / 継続改善]</p>
            <div class="wf-xs wf-mt-16" style="font-weight: 600; color: #C9A04F;">継続伴走</div>
          </div>
        </div>
      </div>

      <p class="wf-text-center wf-mt-48" style="font-size: 16px;">
        <strong>お問い合わせから運用開始まで、最短<span style="color:#B32D2D; font-size: 24px;">[X]日</span></strong>
      </p>
    </div>
  </section>

  <!-- ============================================================
       SEC 11 / 業態タブUI(あらゆるシーンに対応・5〜8業態)
       ============================================================ -->
  <section class="wf-section">
    <div class="wf-container">
      <div class="wf-section-title wf-text-center">
        <span class="label">適用シーン</span>
        <h2>あらゆる業態・規模・目的に対応</h2>
        <p class="lead" style="margin-left: auto; margin-right: auto;">
          [商品名]は業界・規模を問わず、貴社のフェーズに合わせて柔軟に活用いただけます。
        </p>
      </div>

      <!-- タブ切り替え -->
      <div class="wf-row gap-8 wf-mt-32" style="border-bottom: 2px solid var(--wf-line); flex-wrap: wrap;">
        <button class="wf-tag" style="padding: 12px 20px; background: #2A2A26; color: #fff; height: auto; font-size: 13px;">SaaS / IT</button>
        <button class="wf-tag" style="padding: 12px 20px; height: auto; font-size: 13px;">製造業</button>
        <button class="wf-tag" style="padding: 12px 20px; height: auto; font-size: 13px;">人材・HR</button>
        <button class="wf-tag" style="padding: 12px 20px; height: auto; font-size: 13px;">不動産</button>
        <button class="wf-tag" style="padding: 12px 20px; height: auto; font-size: 13px;">士業・コンサル</button>
        <button class="wf-tag" style="padding: 12px 20px; height: auto; font-size: 13px;">EC・小売</button>
        <button class="wf-tag" style="padding: 12px 20px; height: auto; font-size: 13px;">医療・介護</button>
        <button class="wf-tag" style="padding: 12px 20px; height: auto; font-size: 13px;">金融・保険</button>
      </div>

      <!-- アクティブ業態のコンテンツ表示 -->
      <div class="wf-col-asym wf-mt-32" style="align-items: center;">
        <div class="wf-img r-4-3">[業態01:SaaS/IT 業の事例イメージ]</div>
        <div>
          <div class="wf-tag" style="background: #F5F5F5;">SaaS / IT 業界</div>
          <h3 class="wf-mt-16" style="font-size: 24px; font-weight: 600; line-height: 1.5;">
            [SaaS事業者向け:[商品名]の導入事例]
          </h3>
          <p class="wf-mt-16" style="font-size: 14px; line-height: 1.9;">
            [業態01での具体ケース:「◯◯社では月間リード数が[X]倍、商談化率が[X]%向上」など、業態固有のメリットを3〜4行で]
          </p>
          <div class="wf-row gap-24 wf-mt-24" style="flex-wrap: wrap;">
            <div>
              <div style="font-size: 28px; font-weight: 700; color: #B32D2D;">XX倍</div>
              <div class="wf-xs wf-text-mute">[業態固有指標01]</div>
            </div>
            <div>
              <div style="font-size: 28px; font-weight: 700; color: #B32D2D;">XX%</div>
              <div class="wf-xs wf-text-mute">[業態固有指標02]</div>
            </div>
            <div>
              <div style="font-size: 28px; font-weight: 700; color: #B32D2D;">XX件</div>
              <div class="wf-xs wf-text-mute">[業態固有指標03]</div>
            </div>
          </div>
          <a class="wf-btn dark wf-mt-32" style="min-width: 200px;">▶ この業態の事例を見る</a>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       SEC 12 / 競合比較表(自社 vs カテゴリA/B/C)
       ============================================================ -->
  <section class="wf-section soft">
    <div class="wf-container">
      <div class="wf-section-title wf-text-center">
        <span class="label">他サービスとの違い</span>
        <h2>類似サービスとの徹底比較</h2>
        <p class="lead" style="margin-left: auto; margin-right: auto;">
          [商品名]が選ばれる理由は、料金・成果・サポートのすべてで競合を上回るバランスにあります。
        </p>
      </div>

      <div class="wf-mt-48" style="overflow-x: auto;">
        <table style="width: 100%; border-collapse: collapse; background: #fff; min-width: 800px;">
          <thead>
            <tr>
              <th style="padding: 16px 12px; text-align: left; border-bottom: 2px solid var(--wf-line); font-size: 13px; color: var(--wf-text-mute); font-weight: 500; width: 22%;">比較項目</th>
              <th style="padding: 16px 12px; text-align: center; border-bottom: 2px solid #2A2A26; background: #2A2A26; color: #fff; font-size: 14px; font-weight: 600; width: 22%;">[商品名]</th>
              <th style="padding: 16px 12px; text-align: center; border-bottom: 2px solid var(--wf-line); font-size: 13px; color: var(--wf-text-mute); font-weight: 500; width: 18%;">[競合A:大手SaaS型]</th>
              <th style="padding: 16px 12px; text-align: center; border-bottom: 2px solid var(--wf-line); font-size: 13px; color: var(--wf-text-mute); font-weight: 500; width: 18%;">[競合B:代理店型]</th>
              <th style="padding: 16px 12px; text-align: center; border-bottom: 2px solid var(--wf-line); font-size: 13px; color: var(--wf-text-mute); font-weight: 500; width: 18%;">[競合C:内製化]</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); font-size: 13px; font-weight: 600;">月額料金</td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; background: #FAFAF7; font-size: 13px;"><strong style="color: #2A2A26;">XX万円〜</strong><br><span class="wf-xs wf-text-mute">明朗会計</span></td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; font-size: 13px;">XXX万円〜<br><span class="wf-xs" style="color:#B32D2D;">3倍以上</span></td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; font-size: 13px;">XX〜XXX万円<br><span class="wf-xs wf-text-mute">変動大</span></td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; font-size: 13px;">人件費 XXX万〜<br><span class="wf-xs" style="color:#B32D2D;">最高</span></td>
            </tr>
            <tr>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); font-size: 13px; font-weight: 600;">導入期間</td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; background: #FAFAF7; font-size: 13px;"><strong style="color: #2A2A26;">最短X日</strong></td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; font-size: 13px;">2〜3ヶ月</td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; font-size: 13px;">1〜2ヶ月</td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; font-size: 13px;">6ヶ月〜</td>
            </tr>
            <tr>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); font-size: 13px; font-weight: 600;">専任サポート</td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; background: #FAFAF7; font-size: 18px;"><strong style="color: #2A8A4F;">◎</strong></td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; font-size: 18px;">△</td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; font-size: 18px;">○</td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; font-size: 18px; color: #B32D2D;">✗</td>
            </tr>
            <tr>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); font-size: 13px; font-weight: 600;">成果保証</td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; background: #FAFAF7; font-size: 18px;"><strong style="color: #2A8A4F;">◎</strong></td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; font-size: 18px; color: #B32D2D;">✗</td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; font-size: 18px;">△</td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; font-size: 18px; color: #B32D2D;">✗</td>
            </tr>
            <tr>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); font-size: 13px; font-weight: 600;">解約縛り</td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; background: #FAFAF7; font-size: 13px;"><strong>なし</strong><br><span class="wf-xs wf-text-mute">いつでも解約可</span></td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; font-size: 13px;">年契約</td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; font-size: 13px;">最低6ヶ月</td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; font-size: 13px;">—</td>
            </tr>
            <tr>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); font-size: 13px; font-weight: 600;">専門人材</td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; background: #FAFAF7; font-size: 13px;"><strong style="color: #2A2A26;">不要</strong></td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; font-size: 13px;">必要</td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; font-size: 13px;">不要</td>
              <td style="padding: 18px 12px; border-bottom: 1px solid var(--wf-line); text-align: center; font-size: 13px;">複数名 必須</td>
            </tr>
            <tr>
              <td style="padding: 18px 12px; font-size: 13px; font-weight: 600;">トータル評価</td>
              <td style="padding: 18px 12px; text-align: center; background: #FAFAF7; font-size: 18px;"><strong style="color: #2A8A4F;">◎ 最適</strong></td>
              <td style="padding: 18px 12px; text-align: center; font-size: 18px;">△</td>
              <td style="padding: 18px 12px; text-align: center; font-size: 18px;">△</td>
              <td style="padding: 18px 12px; text-align: center; font-size: 18px; color: #B32D2D;">✗</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>

  <!-- ============================================================
       SEC 13 / 中間CTAバナー2
       ============================================================ -->
  <section class="wf-section" style="background: var(--wf-img-deep); color: #fff;">
    <div class="wf-container wf-text-center">
      <h3 style="font-size: 28px; color: #fff; font-weight: 600; line-height: 1.5;">
        類似サービスを比較中の方へ<br>"なぜ[商品名]なのか" を15分でご説明します
      </h3>
      <p class="wf-mt-16" style="opacity: 0.85;">他社見積もりをお持ちの方には、より具体的な比較資料をご提供します</p>
      <div class="wf-row center gap-16 wf-mt-32" style="flex-wrap: wrap;">
        <a href="#cta-bottom" class="wf-btn outline-white lg">▶ 比較資料を請求する</a>
        <a href="#cta-bottom" class="wf-btn white lg">▶ 15分ミーティング予約</a>
      </div>
      <p class="wf-xs wf-mt-16" style="color: rgba(255,255,255,0.7);">※ 営業日24時間以内に折返し / 強引な勧誘なし</p>
    </div>
  </section>

  <!-- ============================================================
       SEC 14 / 数値で見る[商品名](4〜6項目グリッド)
       ============================================================ -->
  <section class="wf-section">
    <div class="wf-container">
      <div class="wf-section-title wf-text-center">
        <span class="label">数値で見る[商品名]</span>
        <h2>選ばれ続ける、確かな実績</h2>
      </div>

      <div class="wf-col-3 wf-mt-48">
        <div style="text-align: center; padding: 40px 24px; background: var(--wf-bg-soft);">
          <div style="font-size: 64px; font-weight: 700; line-height: 1;">XXX<span style="font-size: 22px;">社</span></div>
          <div class="wf-small wf-mt-16" style="line-height: 1.8;">[累計導入企業数]<br><span class="wf-text-mute">大手企業から中小企業まで幅広く</span></div>
        </div>
        <div style="text-align: center; padding: 40px 24px; background: var(--wf-bg-soft);">
          <div style="font-size: 64px; font-weight: 700; line-height: 1;">XX<span style="font-size: 22px;">%</span></div>
          <div class="wf-small wf-mt-16" style="line-height: 1.8;">[継続率]<br><span class="wf-text-mute">業界平均を大きく上回る</span></div>
        </div>
        <div style="text-align: center; padding: 40px 24px; background: var(--wf-bg-soft);">
          <div style="font-size: 64px; font-weight: 700; line-height: 1;">X.X<span style="font-size: 22px;">倍</span></div>
          <div class="wf-small wf-mt-16" style="line-height: 1.8;">[平均成果改善率]<br><span class="wf-text-mute">導入前比 / 全顧客平均</span></div>
        </div>
      </div>

      <div class="wf-col-3 wf-mt-32">
        <div style="text-align: center; padding: 40px 24px; background: var(--wf-bg-soft);">
          <div style="font-size: 64px; font-weight: 700; line-height: 1;">XX<span style="font-size: 22px;">点</span></div>
          <div class="wf-small wf-mt-16" style="line-height: 1.8;">[NPS / 顧客推奨度]<br><span class="wf-text-mute">業界最高水準</span></div>
        </div>
        <div style="text-align: center; padding: 40px 24px; background: var(--wf-bg-soft);">
          <div style="font-size: 64px; font-weight: 700; line-height: 1;">XX<span style="font-size: 22px;">日</span></div>
          <div class="wf-small wf-mt-16" style="line-height: 1.8;">[平均導入期間]<br><span class="wf-text-mute">業界最速クラス</span></div>
        </div>
        <div style="text-align: center; padding: 40px 24px; background: var(--wf-bg-soft);">
          <div style="font-size: 64px; font-weight: 700; line-height: 1;">XX<span style="font-size: 22px;">年</span></div>
          <div class="wf-small wf-mt-16" style="line-height: 1.8;">[サービス提供年数]<br><span class="wf-text-mute">業界トップクラスの実績</span></div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       SEC 15 / 導入事例(3社・4ブロック構造:課題/施策/成果/声)
       ============================================================ -->
  <section class="wf-section soft">
    <div class="wf-container">
      <div class="wf-section-title wf-text-center">
        <span class="label">導入事例</span>
        <h2>お客様の成功ストーリー</h2>
        <p class="lead" style="margin-left: auto; margin-right: auto;">
          実際に[商品名]を導入された企業様の、具体的な成果と取り組みをご紹介します。
        </p>
      </div>

      <!-- 事例01 -->
      <div class="wf-mt-48" style="background: #fff; padding: 48px; border: 1px solid var(--wf-line);">
        <div class="wf-row gap-24" style="flex-wrap: wrap; align-items: center;">
          <div class="wf-img" style="width: 160px; height: 56px;">[顧客ロゴ01]</div>
          <div>
            <div class="wf-xs wf-text-mute" style="font-weight: 600; letter-spacing: 0.1em;">CASE 01 — [業界]</div>
            <h3 class="wf-mt-4" style="font-size: 22px; font-weight: 600;">[企業名01] 様 / [事業内容]</h3>
          </div>
        </div>

        <div class="wf-col-4 wf-mt-32" style="gap: 16px;">
          <div style="padding: 24px; background: var(--wf-bg-soft); border-top: 3px solid #B32D2D;">
            <div class="wf-xs" style="font-weight: 600; letter-spacing: 0.1em; color: #B32D2D;">課題</div>
            <p class="wf-small wf-mt-8" style="line-height: 1.8;">[導入前の具体課題:3〜4行]</p>
          </div>
          <div style="padding: 24px; background: var(--wf-bg-soft); border-top: 3px solid #2A2A26;">
            <div class="wf-xs" style="font-weight: 600; letter-spacing: 0.1em;">施策</div>
            <p class="wf-small wf-mt-8" style="line-height: 1.8;">[実施した具体施策:3〜4行]</p>
          </div>
          <div style="padding: 24px; background: #2A2A26; color: #fff; border-top: 3px solid #C9A04F;">
            <div class="wf-xs" style="font-weight: 600; letter-spacing: 0.1em; color: #C9A04F;">成果</div>
            <ul class="wf-mt-8" style="font-size: 12px; line-height: 1.9; padding-left: 16px; list-style: '✓ ';">
              <li>[指標01]:<strong>XXX%向上</strong></li>
              <li>[指標02]:<strong>XX倍</strong></li>
              <li>[指標03]:<strong>XX件達成</strong></li>
            </ul>
          </div>
          <div style="padding: 24px; background: var(--wf-bg-soft); border-top: 3px solid var(--wf-text-mute);">
            <div class="wf-xs" style="font-weight: 600; letter-spacing: 0.1em;">顧客の声</div>
            <p class="wf-small wf-mt-8" style="line-height: 1.8; font-style: italic;">「[顧客のリアルな一言コメント]」</p>
            <p class="wf-xs wf-text-mute wf-mt-8">— [氏名]様 / [部署・役職]</p>
          </div>
        </div>

        <div class="wf-row gap-16 wf-mt-32">
          <a class="wf-btn white sm">▶ 事例詳細を見る</a>
          <a class="wf-btn white sm">資料DL</a>
        </div>
      </div>

      <!-- 事例02 -->
      <div class="wf-mt-32" style="background: #fff; padding: 48px; border: 1px solid var(--wf-line);">
        <div class="wf-row gap-24" style="flex-wrap: wrap; align-items: center;">
          <div class="wf-img" style="width: 160px; height: 56px;">[顧客ロゴ02]</div>
          <div>
            <div class="wf-xs wf-text-mute" style="font-weight: 600; letter-spacing: 0.1em;">CASE 02 — [業界]</div>
            <h3 class="wf-mt-4" style="font-size: 22px; font-weight: 600;">[企業名02] 様 / [事業内容]</h3>
          </div>
        </div>

        <div class="wf-col-4 wf-mt-32" style="gap: 16px;">
          <div style="padding: 24px; background: var(--wf-bg-soft); border-top: 3px solid #B32D2D;">
            <div class="wf-xs" style="font-weight: 600; letter-spacing: 0.1em; color: #B32D2D;">課題</div>
            <p class="wf-small wf-mt-8" style="line-height: 1.8;">[導入前の具体課題]</p>
          </div>
          <div style="padding: 24px; background: var(--wf-bg-soft); border-top: 3px solid #2A2A26;">
            <div class="wf-xs" style="font-weight: 600; letter-spacing: 0.1em;">施策</div>
            <p class="wf-small wf-mt-8" style="line-height: 1.8;">[実施した具体施策]</p>
          </div>
          <div style="padding: 24px; background: #2A2A26; color: #fff; border-top: 3px solid #C9A04F;">
            <div class="wf-xs" style="font-weight: 600; letter-spacing: 0.1em; color: #C9A04F;">成果</div>
            <ul class="wf-mt-8" style="font-size: 12px; line-height: 1.9; padding-left: 16px; list-style: '✓ ';">
              <li>[指標01]:<strong>XX%向上</strong></li>
              <li>[指標02]:<strong>XX倍</strong></li>
              <li>[指標03]:<strong>XX件達成</strong></li>
            </ul>
          </div>
          <div style="padding: 24px; background: var(--wf-bg-soft); border-top: 3px solid var(--wf-text-mute);">
            <div class="wf-xs" style="font-weight: 600; letter-spacing: 0.1em;">顧客の声</div>
            <p class="wf-small wf-mt-8" style="line-height: 1.8; font-style: italic;">「[顧客のリアルな一言コメント]」</p>
            <p class="wf-xs wf-text-mute wf-mt-8">— [氏名]様 / [部署・役職]</p>
          </div>
        </div>

        <div class="wf-row gap-16 wf-mt-32">
          <a class="wf-btn white sm">▶ 事例詳細を見る</a>
          <a class="wf-btn white sm">資料DL</a>
        </div>
      </div>

      <!-- 事例03 -->
      <div class="wf-mt-32" style="background: #fff; padding: 48px; border: 1px solid var(--wf-line);">
        <div class="wf-row gap-24" style="flex-wrap: wrap; align-items: center;">
          <div class="wf-img" style="width: 160px; height: 56px;">[顧客ロゴ03]</div>
          <div>
            <div class="wf-xs wf-text-mute" style="font-weight: 600; letter-spacing: 0.1em;">CASE 03 — [業界]</div>
            <h3 class="wf-mt-4" style="font-size: 22px; font-weight: 600;">[企業名03] 様 / [事業内容]</h3>
          </div>
        </div>

        <div class="wf-col-4 wf-mt-32" style="gap: 16px;">
          <div style="padding: 24px; background: var(--wf-bg-soft); border-top: 3px solid #B32D2D;">
            <div class="wf-xs" style="font-weight: 600; letter-spacing: 0.1em; color: #B32D2D;">課題</div>
            <p class="wf-small wf-mt-8" style="line-height: 1.8;">[導入前の具体課題]</p>
          </div>
          <div style="padding: 24px; background: var(--wf-bg-soft); border-top: 3px solid #2A2A26;">
            <div class="wf-xs" style="font-weight: 600; letter-spacing: 0.1em;">施策</div>
            <p class="wf-small wf-mt-8" style="line-height: 1.8;">[実施した具体施策]</p>
          </div>
          <div style="padding: 24px; background: #2A2A26; color: #fff; border-top: 3px solid #C9A04F;">
            <div class="wf-xs" style="font-weight: 600; letter-spacing: 0.1em; color: #C9A04F;">成果</div>
            <ul class="wf-mt-8" style="font-size: 12px; line-height: 1.9; padding-left: 16px; list-style: '✓ ';">
              <li>[指標01]:<strong>XX%向上</strong></li>
              <li>[指標02]:<strong>XX倍</strong></li>
              <li>[指標03]:<strong>XX件達成</strong></li>
            </ul>
          </div>
          <div style="padding: 24px; background: var(--wf-bg-soft); border-top: 3px solid var(--wf-text-mute);">
            <div class="wf-xs" style="font-weight: 600; letter-spacing: 0.1em;">顧客の声</div>
            <p class="wf-small wf-mt-8" style="line-height: 1.8; font-style: italic;">「[顧客のリアルな一言コメント]」</p>
            <p class="wf-xs wf-text-mute wf-mt-8">— [氏名]様 / [部署・役職]</p>
          </div>
        </div>

        <div class="wf-row gap-16 wf-mt-32">
          <a class="wf-btn white sm">▶ 事例詳細を見る</a>
          <a class="wf-btn white sm">資料DL</a>
        </div>
      </div>

      <p class="wf-text-center wf-mt-32"><a href="#" style="text-decoration: underline; font-size: 14px;">▶ 他のすべての導入事例を見る(XXX社の事例)</a></p>
    </div>
  </section>

  <!-- ============================================================
       SEC 16 / お客様の声(3名・顔写真+引用+所属)
       ============================================================ -->
  <section class="wf-section">
    <div class="wf-container">
      <div class="wf-section-title wf-text-center">
        <span class="label">お客様の声</span>
        <h2>導入企業様からの<br>リアルな評価コメント</h2>
      </div>

      <div class="wf-col-3 wf-mt-48">
        <div style="padding: 32px; background: #fff; border: 1px solid var(--wf-line); position: relative;">
          <div style="font-size: 48px; line-height: 1; color: var(--wf-text-faint); font-family: serif;">"</div>
          <p style="font-size: 15px; line-height: 1.9; margin-top: -16px; min-height: 180px;">
            [顧客の声01:実際の発言を3〜5行。具体的な数値や状況を含む方が良い]
          </p>
          <div class="wf-row gap-12 wf-mt-24" style="border-top: 1px solid var(--wf-line); padding-top: 24px;">
            <div class="wf-img" style="width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;"></div>
            <div>
              <div class="wf-small" style="font-weight: 600;">[氏名01] 様</div>
              <div class="wf-xs wf-text-mute" style="line-height: 1.6;">[企業名01]<br>[役職]</div>
            </div>
          </div>
          <div class="wf-row gap-4 wf-mt-16" style="font-size: 14px;">
            <span style="color: #C9A04F;">★★★★★</span>
            <span class="wf-xs wf-text-mute">5.0</span>
          </div>
        </div>

        <div style="padding: 32px; background: #fff; border: 1px solid var(--wf-line); position: relative;">
          <div style="font-size: 48px; line-height: 1; color: var(--wf-text-faint); font-family: serif;">"</div>
          <p style="font-size: 15px; line-height: 1.9; margin-top: -16px; min-height: 180px;">
            [顧客の声02:実際の発言を3〜5行]
          </p>
          <div class="wf-row gap-12 wf-mt-24" style="border-top: 1px solid var(--wf-line); padding-top: 24px;">
            <div class="wf-img" style="width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;"></div>
            <div>
              <div class="wf-small" style="font-weight: 600;">[氏名02] 様</div>
              <div class="wf-xs wf-text-mute" style="line-height: 1.6;">[企業名02]<br>[役職]</div>
            </div>
          </div>
          <div class="wf-row gap-4 wf-mt-16" style="font-size: 14px;">
            <span style="color: #C9A04F;">★★★★★</span>
            <span class="wf-xs wf-text-mute">5.0</span>
          </div>
        </div>

        <div style="padding: 32px; background: #fff; border: 1px solid var(--wf-line); position: relative;">
          <div style="font-size: 48px; line-height: 1; color: var(--wf-text-faint); font-family: serif;">"</div>
          <p style="font-size: 15px; line-height: 1.9; margin-top: -16px; min-height: 180px;">
            [顧客の声03:実際の発言を3〜5行]
          </p>
          <div class="wf-row gap-12 wf-mt-24" style="border-top: 1px solid var(--wf-line); padding-top: 24px;">
            <div class="wf-img" style="width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;"></div>
            <div>
              <div class="wf-small" style="font-weight: 600;">[氏名03] 様</div>
              <div class="wf-xs wf-text-mute" style="line-height: 1.6;">[企業名03]<br>[役職]</div>
            </div>
          </div>
          <div class="wf-row gap-4 wf-mt-16" style="font-size: 14px;">
            <span style="color: #C9A04F;">★★★★★</span>
            <span class="wf-xs wf-text-mute">5.0</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       SEC 17 / 料金プラン4段階(カード並列)
       ============================================================ -->
  <section class="wf-section soft">
    <div class="wf-container">
      <div class="wf-section-title wf-text-center">
        <span class="label">料金プラン</span>
        <h2>明朗な4段階の料金プラン</h2>
        <p class="lead" style="margin-left: auto; margin-right: auto;">
          貴社の事業フェーズ・予算に合わせて、最適なプランをお選びいただけます。
          初期費用無料・いつでも変更可能。
        </p>
      </div>

      <div class="wf-col-4 wf-mt-48" style="gap: 16px; align-items: stretch;">
        <!-- LIGHT -->
        <div style="padding: 32px 24px; background: #fff; border: 1px solid var(--wf-line); display: flex; flex-direction: column;">
          <div class="wf-xs wf-text-mute" style="font-weight: 600; letter-spacing: 0.15em;">LIGHT</div>
          <h4 class="wf-mt-8" style="font-size: 18px; font-weight: 600;">[ライトプラン]</h4>
          <p class="wf-xs wf-text-mute wf-mt-8" style="line-height: 1.7;">[まずは小さく始めたい個人事業主・スタートアップ向け]</p>
          <div class="wf-mt-24" style="border-top: 1px solid var(--wf-line); padding-top: 24px;">
            <div style="font-size: 32px; font-weight: 700; line-height: 1;">¥XX,XXX<span style="font-size: 13px; font-weight: 400;">/月</span></div>
            <div class="wf-xs wf-text-mute wf-mt-4">初期費用:無料</div>
          </div>
          <ul class="wf-mt-24" style="font-size: 13px; line-height: 2.0; padding-left: 16px; list-style: '✓ '; flex: 1;">
            <li>[項目01]</li>
            <li>[項目02]</li>
            <li>[項目03]</li>
            <li>[項目04]</li>
            <li class="wf-text-mute">[利用上限:例 ◯件/月]</li>
          </ul>
          <a class="wf-btn white block wf-mt-24">このプランを選ぶ</a>
        </div>

        <!-- STANDARD -->
        <div style="padding: 32px 24px; background: #fff; border: 1px solid var(--wf-line); display: flex; flex-direction: column;">
          <div class="wf-xs wf-text-mute" style="font-weight: 600; letter-spacing: 0.15em;">STANDARD</div>
          <h4 class="wf-mt-8" style="font-size: 18px; font-weight: 600;">[スタンダード]</h4>
          <p class="wf-xs wf-text-mute wf-mt-8" style="line-height: 1.7;">[本格運用を始めたい中小企業向け]</p>
          <div class="wf-mt-24" style="border-top: 1px solid var(--wf-line); padding-top: 24px;">
            <div style="font-size: 32px; font-weight: 700; line-height: 1;">¥XXX,XXX<span style="font-size: 13px; font-weight: 400;">/月</span></div>
            <div class="wf-xs wf-text-mute wf-mt-4">初期費用:無料</div>
          </div>
          <ul class="wf-mt-24" style="font-size: 13px; line-height: 2.0; padding-left: 16px; list-style: '✓ '; flex: 1;">
            <li>LIGHTのすべて</li>
            <li>[追加項目01]</li>
            <li>[追加項目02]</li>
            <li>[追加項目03]</li>
            <li>[専任サポート月X時間]</li>
          </ul>
          <a class="wf-btn white block wf-mt-24">このプランを選ぶ</a>
        </div>

        <!-- BUSINESS(おすすめ) -->
        <div style="padding: 32px 24px; background: #2A2A26; color: #fff; border: 2px solid #2A2A26; position: relative; display: flex; flex-direction: column;">
          <div style="position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: #C9A04F; color: #fff; padding: 6px 24px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em;">おすすめ</div>
          <div style="font-size: 11px; opacity: 0.7; font-weight: 600; letter-spacing: 0.15em;">BUSINESS</div>
          <h4 class="wf-mt-8" style="font-size: 18px; font-weight: 600;">[ビジネス]</h4>
          <p class="wf-xs wf-mt-8" style="line-height: 1.7; opacity: 0.85;">[最も選ばれている本格活用プラン / 中堅企業向け]</p>
          <div class="wf-mt-24" style="border-top: 1px solid rgba(255,255,255,0.3); padding-top: 24px;">
            <div style="font-size: 32px; font-weight: 700; line-height: 1;">¥XXX,XXX<span style="font-size: 13px; font-weight: 400;">/月</span></div>
            <div class="wf-xs wf-mt-4" style="opacity: 0.7;">初期費用:無料</div>
          </div>
          <ul class="wf-mt-24" style="font-size: 13px; line-height: 2.0; padding-left: 16px; list-style: '✓ '; flex: 1;">
            <li>STANDARDのすべて</li>
            <li>[追加項目01]</li>
            <li>[追加項目02]</li>
            <li>[追加項目03]</li>
            <li>[追加項目04]</li>
            <li>[専任サポート無制限]</li>
          </ul>
          <a class="wf-btn block wf-mt-24" style="background: #C9A04F; color: #fff;">このプランを選ぶ</a>
        </div>

        <!-- ENTERPRISE -->
        <div style="padding: 32px 24px; background: #fff; border: 1px solid var(--wf-line); display: flex; flex-direction: column;">
          <div class="wf-xs wf-text-mute" style="font-weight: 600; letter-spacing: 0.15em;">ENTERPRISE</div>
          <h4 class="wf-mt-8" style="font-size: 18px; font-weight: 600;">[エンタープライズ]</h4>
          <p class="wf-xs wf-text-mute wf-mt-8" style="line-height: 1.7;">[大企業・特殊要件向けカスタムプラン]</p>
          <div class="wf-mt-24" style="border-top: 1px solid var(--wf-line); padding-top: 24px;">
            <div style="font-size: 22px; font-weight: 700; line-height: 1.2;">お問い合わせ</div>
            <div class="wf-xs wf-text-mute wf-mt-4">¥XXX,XXX/月〜(要見積)</div>
          </div>
          <ul class="wf-mt-24" style="font-size: 13px; line-height: 2.0; padding-left: 16px; list-style: '✓ '; flex: 1;">
            <li>BUSINESSのすべて</li>
            <li>[カスタム開発対応]</li>
            <li>[専任PM・専属チーム]</li>
            <li>[SLA保証]</li>
            <li>[セキュリティ要件対応]</li>
          </ul>
          <a class="wf-btn white block wf-mt-24">問い合わせる</a>
        </div>
      </div>

      <p class="wf-text-center wf-text-mute wf-mt-32" style="font-size: 13px;">
        ※ 表示価格はすべて税抜 / IT導入補助金の対象サービスです(最大[X]万円補助)<br>
        ※ プラン変更はいつでも可能・解約縛りなし
      </p>
    </div>
  </section>

  <!-- ============================================================
       SEC 18 / 中間CTAバナー3
       ============================================================ -->
  <section class="wf-section" style="background: var(--wf-img-deep); color: #fff;">
    <div class="wf-container wf-text-center">
      <h3 style="font-size: 28px; color: #fff; font-weight: 600; line-height: 1.5;">
        どのプランが最適か、迷っていませんか?<br>専任担当が貴社の状況に合わせてご提案します
      </h3>
      <p class="wf-mt-16" style="opacity: 0.85;">プラン診断 + 見積もり + IT導入補助金の活用提案、すべて無料</p>
      <div class="wf-row center gap-16 wf-mt-32" style="flex-wrap: wrap;">
        <a href="#cta-bottom" class="wf-btn outline-white lg">▶ プラン診断する</a>
        <a href="#download" class="wf-btn white lg">料金詳細をダウンロード</a>
      </div>
      <p class="wf-xs wf-mt-16" style="color: rgba(255,255,255,0.7);">※ 毎月[X]社限定 / 平均回答[X]営業日</p>
    </div>
  </section>

  <!-- ============================================================
       SEC 19 / FAQ 8〜10項目(折り畳み式・幅広カバー)
       ============================================================ -->
  <section class="wf-section">
    <div class="wf-container" style="max-width: 880px;">
      <div class="wf-section-title wf-text-center">
        <span class="label">よくあるご質問</span>
        <h2>導入前のご不安にお答えします</h2>
      </div>

      <div class="wf-mt-48">
        <details style="border-bottom: 1px solid var(--wf-line); padding: 20px 0;" open>
          <summary style="font-size: 16px; font-weight: 600; cursor: pointer; display: flex; gap: 16px; align-items: flex-start;">
            <span style="color:#B32D2D; font-weight: 700;">Q.</span>
            <span style="flex: 1;">料金体系を教えてください。追加費用は発生しますか?</span>
          </summary>
          <div class="wf-mt-16" style="padding-left: 36px;">
            <p style="font-size: 14px; line-height: 1.9;"><strong style="color:#2A2A26;">A.</strong> [料金は月額制 / 初期費用無料 / 表示金額以外の追加費用は原則発生しません。オプション利用時のみ別途。詳しくは「料金プラン」セクションをご確認ください。具体的な見積もりは無料相談でご案内します]</p>
          </div>
        </details>

        <details style="border-bottom: 1px solid var(--wf-line); padding: 20px 0;">
          <summary style="font-size: 16px; font-weight: 600; cursor: pointer; display: flex; gap: 16px; align-items: flex-start;">
            <span style="color:#B32D2D; font-weight: 700;">Q.</span>
            <span style="flex: 1;">最低契約期間や解約縛りはありますか?</span>
          </summary>
          <div class="wf-mt-16" style="padding-left: 36px;">
            <p style="font-size: 14px; line-height: 1.9;"><strong style="color:#2A2A26;">A.</strong> [最低契約期間なし / いつでも解約可能 / 違約金等は一切発生しません。契約縛りで顧客を縛るのではなく、サービス品質で選ばれ続けることを大切にしています]</p>
          </div>
        </details>

        <details style="border-bottom: 1px solid var(--wf-line); padding: 20px 0;">
          <summary style="font-size: 16px; font-weight: 600; cursor: pointer; display: flex; gap: 16px; align-items: flex-start;">
            <span style="color:#B32D2D; font-weight: 700;">Q.</span>
            <span style="flex: 1;">解約方法と、解約後のデータ取り扱いを教えてください。</span>
          </summary>
          <div class="wf-mt-16" style="padding-left: 36px;">
            <p style="font-size: 14px; line-height: 1.9;"><strong style="color:#2A2A26;">A.</strong> [解約は管理画面 or 担当者へのご連絡で完結 / 解約後はXX日以内にすべてのデータをエクスポート可能 / 個人情報保護法に基づき、解約X日後にデータは完全削除されます]</p>
          </div>
        </details>

        <details style="border-bottom: 1px solid var(--wf-line); padding: 20px 0;">
          <summary style="font-size: 16px; font-weight: 600; cursor: pointer; display: flex; gap: 16px; align-items: flex-start;">
            <span style="color:#B32D2D; font-weight: 700;">Q.</span>
            <span style="flex: 1;">サポート体制について教えてください。</span>
          </summary>
          <div class="wf-mt-16" style="padding-left: 36px;">
            <p style="font-size: 14px; line-height: 1.9;"><strong style="color:#2A2A26;">A.</strong> [専任担当がつきます / メール・チャット・電話・オンラインMTG対応可 / 平日XX:XX〜XX:XX対応 / プランに応じて月次レビュー・改善提案を実施]</p>
          </div>
        </details>

        <details style="border-bottom: 1px solid var(--wf-line); padding: 20px 0;">
          <summary style="font-size: 16px; font-weight: 600; cursor: pointer; display: flex; gap: 16px; align-items: flex-start;">
            <span style="color:#B32D2D; font-weight: 700;">Q.</span>
            <span style="flex: 1;">導入までどれくらいの期間がかかりますか?</span>
          </summary>
          <div class="wf-mt-16" style="padding-left: 36px;">
            <p style="font-size: 14px; line-height: 1.9;"><strong style="color:#2A2A26;">A.</strong> [最短X日で導入完了 / 平均X〜X週間 / プラン規模・カスタム要件により変動。お問い合わせ後X日以内に詳細スケジュールをご提示します]</p>
          </div>
        </details>

        <details style="border-bottom: 1px solid var(--wf-line); padding: 20px 0;">
          <summary style="font-size: 16px; font-weight: 600; cursor: pointer; display: flex; gap: 16px; align-items: flex-start;">
            <span style="color:#B32D2D; font-weight: 700;">Q.</span>
            <span style="flex: 1;">セキュリティ対策はどうなっていますか?</span>
          </summary>
          <div class="wf-mt-16" style="padding-left: 36px;">
            <p style="font-size: 14px; line-height: 1.9;"><strong style="color:#2A2A26;">A.</strong> [ISO27001 / プライバシーマーク取得 / 通信SSL暗号化 / データはAWS東京リージョンで管理 / 定期的な脆弱性診断 / 個人情報保護法・GDPR準拠。詳細なセキュリティチェックシートを別途ご提供可能です]</p>
          </div>
        </details>

        <details style="border-bottom: 1px solid var(--wf-line); padding: 20px 0;">
          <summary style="font-size: 16px; font-weight: 600; cursor: pointer; display: flex; gap: 16px; align-items: flex-start;">
            <span style="color:#B32D2D; font-weight: 700;">Q.</span>
            <span style="flex: 1;">他社サービスからの乗り換えは可能ですか?</span>
          </summary>
          <div class="wf-mt-16" style="padding-left: 36px;">
            <p style="font-size: 14px; line-height: 1.9;"><strong style="color:#2A2A26;">A.</strong> [乗り換え実績多数 / データ移行を専任チームが無料サポート / 競合各社からの移行ガイドあり / 乗り換えキャンペーン(初月無料・XX%OFF等)も随時実施しています]</p>
          </div>
        </details>

        <details style="border-bottom: 1px solid var(--wf-line); padding: 20px 0;">
          <summary style="font-size: 16px; font-weight: 600; cursor: pointer; display: flex; gap: 16px; align-items: flex-start;">
            <span style="color:#B32D2D; font-weight: 700;">Q.</span>
            <span style="flex: 1;">IT導入補助金は使えますか?</span>
          </summary>
          <div class="wf-mt-16" style="padding-left: 36px;">
            <p style="font-size: 14px; line-height: 1.9;"><strong style="color:#2A2A26;">A.</strong> [IT導入補助金(XXX類型)の認定事業者です / 最大XX万円の補助金活用が可能 / 申請サポートも無料で行います / 詳細は無料相談でご案内]</p>
          </div>
        </details>

        <details style="border-bottom: 1px solid var(--wf-line); padding: 20px 0;">
          <summary style="font-size: 16px; font-weight: 600; cursor: pointer; display: flex; gap: 16px; align-items: flex-start;">
            <span style="color:#B32D2D; font-weight: 700;">Q.</span>
            <span style="flex: 1;">無料トライアル・デモはありますか?</span>
          </summary>
          <div class="wf-mt-16" style="padding-left: 36px;">
            <p style="font-size: 14px; line-height: 1.9;"><strong style="color:#2A2A26;">A.</strong> [X日間の無料トライアル可 / 機能制限なしのフル機能版 / クレジットカード登録不要 / オンラインデモ(30分)も毎週開催中]</p>
          </div>
        </details>

        <details style="border-bottom: 1px solid var(--wf-line); padding: 20px 0;">
          <summary style="font-size: 16px; font-weight: 600; cursor: pointer; display: flex; gap: 16px; align-items: flex-start;">
            <span style="color:#B32D2D; font-weight: 700;">Q.</span>
            <span style="flex: 1;">ここに記載のないご質問は?</span>
          </summary>
          <div class="wf-mt-16" style="padding-left: 36px;">
            <p style="font-size: 14px; line-height: 1.9;"><strong style="color:#2A2A26;">A.</strong> [無料相談(30分)でどんなご質問にもお答えします / お問い合わせフォームからお気軽にお寄せください / 営業日24時間以内にご返信します]</p>
          </div>
        </details>
      </div>
    </div>
  </section>

  <!-- ============================================================
       SEC 20 / 断るお客様パターン(リバースペルソナ・信頼性UP)
       ============================================================ -->
  <section class="wf-section soft">
    <div class="wf-container" style="max-width: 1000px;">
      <div class="wf-section-title wf-text-center">
        <span class="label">注意事項</span>
        <h2>こんな方には、お勧めしません</h2>
        <p class="lead" style="margin-left: auto; margin-right: auto;">
          [商品名]と相性が悪いお客様パターンを、先に正直に申し上げておきます。
          ミスマッチを避けることが、お互いの時間を守る最善の方法だと考えています。
        </p>
      </div>

      <div class="wf-col-2 wf-mt-48">
        <div style="padding: 28px 32px; background: #fff; border-left: 4px solid #B32D2D;">
          <div class="wf-xs wf-text-mute" style="font-weight: 600; letter-spacing: 0.1em;">PATTERN 01</div>
          <h4 class="wf-mt-8" style="font-size: 17px; font-weight: 600; line-height: 1.5;">[パターン01:例 「丸投げで成果だけ出してほしい」とお考えの方]</h4>
          <p class="wf-small wf-mt-16" style="line-height: 1.9;">[理由:当社のサービスは、貴社との伴走を前提として設計されています。月X時間の打ち合わせとフィードバックがどうしても発生するため、完全丸投げ志向の方には他社のフルマネージド型をお勧めします]</p>
        </div>
        <div style="padding: 28px 32px; background: #fff; border-left: 4px solid #B32D2D;">
          <div class="wf-xs wf-text-mute" style="font-weight: 600; letter-spacing: 0.1em;">PATTERN 02</div>
          <h4 class="wf-mt-8" style="font-size: 17px; font-weight: 600; line-height: 1.5;">[パターン02:例 1ヶ月以内の即効性を求める方]</h4>
          <p class="wf-small wf-mt-16" style="line-height: 1.9;">[理由:当社が提供しているのは "中長期で再現性のある成果" であり、X〜X ヶ月の伴走を経て効果が出る設計です。1ヶ月で結果を求める方は、別の選択肢の方が満足度が高いと考えます]</p>
        </div>
        <div style="padding: 28px 32px; background: #fff; border-left: 4px solid #B32D2D;">
          <div class="wf-xs wf-text-mute" style="font-weight: 600; letter-spacing: 0.1em;">PATTERN 03</div>
          <h4 class="wf-mt-8" style="font-size: 17px; font-weight: 600; line-height: 1.5;">[パターン03:例 価格だけで判断したい方]</h4>
          <p class="wf-small wf-mt-16" style="line-height: 1.9;">[理由:当社は「最安」ではなく「最高ROI」を目指しています。同じカテゴリには月数千円から始められるサービスもあり、コストだけを最優先される方にはそちらをお勧めします]</p>
        </div>
        <div style="padding: 28px 32px; background: #fff; border-left: 4px solid #B32D2D;">
          <div class="wf-xs wf-text-mute" style="font-weight: 600; letter-spacing: 0.1em;">PATTERN 04</div>
          <h4 class="wf-mt-8" style="font-size: 17px; font-weight: 600; line-height: 1.5;">[パターン04:例 社内合意形成にX ヶ月以上要する方]</h4>
          <p class="wf-small wf-mt-16" style="line-height: 1.9;">[理由:当社のリソースには上限があり、毎月X社しか新規受け入れができません。意思決定が長期化する場合、ご紹介いただいた他社にお譲りすることをお勧めします]</p>
        </div>
      </div>

      <div class="wf-mt-48 wf-text-center" style="padding: 32px; background: #fff; border: 1px solid var(--wf-line);">
        <p style="font-size: 16px; line-height: 1.9;">
          上記に当てはまらない方は、ぜひ一度ご相談ください。<br>
          <strong>「自社が当てはまるか分からない」場合も、無料相談で率直にお伝えします。</strong>
        </p>
      </div>
    </div>
  </section>

  <!-- ============================================================
       SEC 21 / 代表メッセージ(顔写真+想いの文)
       ============================================================ -->
  <section class="wf-section">
    <div class="wf-container">
      <div class="wf-section-title wf-text-center">
        <span class="label">代表メッセージ</span>
        <h2>[商品名]に込めた想い</h2>
      </div>

      <div class="wf-col-asym wf-mt-48" style="grid-template-columns: 4fr 8fr; align-items: flex-start; gap: 64px;">
        <div>
          <div class="wf-img" style="aspect-ratio: 4/5;">[代表の顔写真]</div>
          <div class="wf-mt-16">
            <div class="wf-small" style="font-weight: 600; letter-spacing: 0.05em;">代表取締役 [氏名]</div>
            <div class="wf-xs wf-text-mute wf-mt-4" style="line-height: 1.7;">[経歴:◯◯大学卒業 / [前職] / 20XX年 [社名]設立]</div>
          </div>
        </div>

        <div>
          <p style="font-size: 17px; line-height: 2.0; font-weight: 500;">
            「[キャッチーな冒頭の一文:例 私たちは、業界のXXに革命を起こすために創業しました。]」
          </p>
          <p class="wf-mt-24" style="font-size: 14px; line-height: 2.0;">
            [メッセージ本文 第1段落:創業の背景 / 業界の課題認識 / なぜこのサービスを作ったか。4〜6行]
          </p>
          <p class="wf-mt-24" style="font-size: 14px; line-height: 2.0;">
            [メッセージ本文 第2段落:私たちの提供価値 / お客様への約束。4〜6行]
          </p>
          <p class="wf-mt-24" style="font-size: 14px; line-height: 2.0;">
            [メッセージ本文 第3段落:これからのビジョン / 一緒に取り組みたいこと。4〜6行]
          </p>
          <div class="wf-mt-32" style="padding: 20px 24px; background: var(--wf-bg-soft); border-left: 3px solid #2A2A26;">
            <p style="font-size: 14px; line-height: 1.9; font-weight: 500;">
              「[締めの一文:例 貴社の事業成長に、本気で向き合うパートナーでありたい。]」
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       SEC 22 / ファイナルCTA + フォーム埋込
       ============================================================ -->
  <section class="wf-section" id="cta-bottom" style="background: var(--wf-img-deep); color: #fff;">
    <div class="wf-container" style="max-width: 880px;">
      <div class="wf-text-center">
        <span class="label" style="color: rgba(255,255,255,0.7); font-size: 13px; letter-spacing: 0.1em;">START NOW</span>
        <h2 style="font-size: 36px; color: #fff; line-height: 1.5; margin-top: 16px; font-weight: 600;">
          今この瞬間も、競合は前へ進んでいます<br>
          まずは30秒、貴社の状況を聞かせてください
        </h2>
        <p style="margin-top: 24px; opacity: 0.85; font-size: 16px; line-height: 1.9;">
          毎月限定[X]社のみの受付です。<br>
          今月お申し込みの方限定で、<strong style="color:#C9A04F;">初月無料 + 個別戦略レポート(XX万円相当)</strong>を進呈中。
        </p>
      </div>

      <!-- フォーム5項目以内 -->
      <div class="wf-mt-48" style="background: rgba(255,255,255,0.08); padding: 48px; border: 1px solid rgba(255,255,255,0.3);">
        <div class="wf-text-center" style="margin-bottom: 32px;">
          <div class="wf-row center gap-8">
            <span style="font-size: 12px; opacity: 0.7;">入力時間:</span>
            <strong style="font-size: 16px; color: #C9A04F;">約30秒</strong>
            <span style="font-size: 12px; opacity: 0.7;">/ 必須項目:</span>
            <strong style="font-size: 16px; color: #C9A04F;">3つのみ</strong>
          </div>
        </div>

        <div class="wf-form-row" style="border-bottom: 1px solid rgba(255,255,255,0.2);">
          <div class="wf-form-label" style="color: #fff;">お名前 <span class="req">必須</span></div>
          <input class="wf-form-input" placeholder="例:山田 太郎" style="background:#fff; color:#000; border-color: transparent;">
        </div>
        <div class="wf-form-row" style="border-bottom: 1px solid rgba(255,255,255,0.2);">
          <div class="wf-form-label" style="color: #fff;">会社名 <span class="req">必須</span></div>
          <input class="wf-form-input" placeholder="例:株式会社XXX" style="background:#fff; color:#000; border-color: transparent;">
        </div>
        <div class="wf-form-row" style="border-bottom: 1px solid rgba(255,255,255,0.2);">
          <div class="wf-form-label" style="color: #fff;">メール <span class="req">必須</span></div>
          <input class="wf-form-input" placeholder="例:sample@example.com" type="email" style="background:#fff; color:#000; border-color: transparent;">
        </div>
        <div class="wf-form-row" style="border-bottom: 1px solid rgba(255,255,255,0.2);">
          <div class="wf-form-label" style="color: #fff;">電話番号 <span style="font-size: 10px; opacity: 0.7;">任意</span></div>
          <input class="wf-form-input" placeholder="例:03-XXXX-XXXX" type="tel" style="background:#fff; color:#000; border-color: transparent;">
        </div>
        <div class="wf-form-row" style="border-bottom: none;">
          <div class="wf-form-label" style="color: #fff;">ご相談内容 <span style="font-size: 10px; opacity: 0.7;">任意</span></div>
          <textarea class="wf-form-textarea" placeholder="現状の課題や、検討中の規模感などをご自由にお書きください" style="background:#fff; color:#000; border-color: transparent;"></textarea>
        </div>

        <a class="wf-btn block lg wf-mt-32" style="background:#C9A04F; color:#fff; font-weight: 600; height: 72px; font-size: 16px;">▶ 今すぐ無料相談する(30秒で完了)</a>
        <p class="wf-xs wf-text-center wf-mt-16" style="opacity: 0.7; line-height: 1.7;">
          ※ 営業日24時間以内に折り返しご連絡いたします<br>
          ※ 強引な勧誘・営業電話は一切行いません<br>
          ※ ご相談内容は厳重に管理し、第三者に開示することはありません
        </p>
      </div>

      <!-- 補助CTA:電話・メール直 -->
      <div class="wf-row center gap-32 wf-mt-32" style="flex-wrap: wrap;">
        <div style="text-align: center;">
          <div class="wf-xs" style="opacity: 0.7;">お電話でのご相談</div>
          <div style="font-size: 24px; font-weight: 700; margin-top: 4px;">XX-XXXX-XXXX</div>
          <div class="wf-xs" style="opacity: 0.7;">平日 XX:XX〜XX:XX</div>
        </div>
        <div style="width: 1px; background: rgba(255,255,255,0.3); align-self: stretch;"></div>
        <div style="text-align: center;">
          <div class="wf-xs" style="opacity: 0.7;">メールでのご相談</div>
          <div style="font-size: 18px; font-weight: 600; margin-top: 4px;">sample@example.com</div>
          <div class="wf-xs" style="opacity: 0.7;">24時間受付</div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       軽量フッター
       ============================================================ -->
  <footer style="background: #1F1F1C; color: rgba(255,255,255,0.7); padding: 40px 40px 24px; text-align: center;">
    <div class="wf-container">
      <div class="wf-row center gap-16 wf-mb-16" style="flex-wrap: wrap;">
        <a href="#" style="color: inherit; text-decoration: none; font-size: 13px; opacity: 0.85;">運営会社</a>
        <span style="opacity: 0.3;">|</span>
        <a href="#" style="color: inherit; text-decoration: underline; font-size: 13px;">プライバシーポリシー</a>
        <span style="opacity: 0.3;">|</span>
        <a href="#" style="color: inherit; text-decoration: underline; font-size: 13px;">特定商取引法に基づく表記</a>
        <span style="opacity: 0.3;">|</span>
        <a href="#" style="color: inherit; text-decoration: underline; font-size: 13px;">利用規約</a>
        <span style="opacity: 0.3;">|</span>
        <a href="#" style="color: inherit; text-decoration: underline; font-size: 13px;">セキュリティ</a>
      </div>
      <p style="font-size: 12px; opacity: 0.6;">© YYYY [会社名] All Rights Reserved.</p>
    </div>
  </footer>

</div>
</div>
</body>
</html>