WEBSITE · 21.0 KB
refs/pengin/lp-master-02-thanks.html
Workspace snapshot · 08/31 23:51
Preview
Source
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>申し込み完了 — BtoBサービスLP汎用WF</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 / 軽量ヘッダー
============================================================ -->
<header class="wf-header">
<div class="wf-header-main">
<div class="wf-header-logo">[ロゴ]</div>
<div class="wf-header-cta">
<a href="01-top.html" class="wf-btn white sm">▶ トップに戻る</a>
</div>
</div>
</header>
<!-- ============================================================
SEC 02 / ヒーロー — 受付完了メッセージ
============================================================ -->
<section class="wf-section flat">
<div style="padding: 96px 80px 80px; background: linear-gradient(180deg, #F5F5F5 0%, #fff 100%); text-align: center;">
<div style="width: 96px; height: 96px; background: #2A2A26; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 56px; margin: 0 auto;">✓</div>
<h1 class="wf-mt-32" style="font-size: 40px; font-weight: 700; line-height: 1.4;">
お申し込みありがとうございました
</h1>
<p class="wf-mt-24" style="font-size: 17px; line-height: 1.9; max-width: 640px; margin: 24px auto 0;">
この度は[商品名]にお問い合わせいただき、誠にありがとうございます。<br>
受付が正常に完了いたしました。担当者より<strong>営業日24時間以内</strong>にご連絡いたします。
</p>
<!-- 受付番号風 -->
<div class="wf-mt-32" style="display: inline-block; padding: 16px 32px; background: #fff; border: 1px solid var(--wf-line);">
<div class="wf-xs wf-text-mute" style="font-weight: 600; letter-spacing: 0.1em;">受付番号</div>
<div class="wf-mt-4" style="font-size: 22px; font-weight: 600; font-family: 'Inter', monospace; letter-spacing: 0.05em;">REQ-YYYYMMDD-XXXX</div>
</div>
<p class="wf-text-mute wf-mt-24" style="font-size: 13px;">※ ご登録いただいたメールアドレス宛に、受付完了メールを送信しました。</p>
</div>
</section>
<!-- ============================================================
SEC 03 / 次のステップ説明（NEXT STEPS 3〜4ステップ）
============================================================ -->
<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>
<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; bottom: 32px; left: 31px; width: 2px; background: var(--wf-line); z-index: 0;"></div>
<div class="wf-row gap-24" style="position: relative; z-index: 1; align-items: flex-start; padding: 16px 0;">
<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; flex-shrink: 0;">01</div>
<div style="flex: 1; padding: 16px 24px; background: var(--wf-bg-soft);">
<div class="wf-xs wf-text-mute" style="font-weight: 600; letter-spacing: 0.1em;">本日 / 今すぐ</div>
<h4 class="wf-mt-4" style="font-size: 17px; font-weight: 600;">受付完了メールの確認</h4>
<p class="wf-small wf-text-mute wf-mt-8" style="line-height: 1.8;">ご登録のメールアドレスに、受付完了の自動メールをお送りしました。お手元に届いていることをご確認ください。届いていない場合は迷惑メールフォルダもご確認のうえ、お手数ですが再度お問い合わせください。</p>
</div>
</div>
<div class="wf-row gap-24" style="position: relative; z-index: 1; align-items: flex-start; padding: 16px 0;">
<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; flex-shrink: 0;">02</div>
<div style="flex: 1; padding: 16px 24px; background: var(--wf-bg-soft);">
<div class="wf-xs wf-text-mute" style="font-weight: 600; letter-spacing: 0.1em;">営業日24時間以内</div>
<h4 class="wf-mt-4" style="font-size: 17px; font-weight: 600;">担当者よりご連絡</h4>
<p class="wf-small wf-text-mute wf-mt-8" style="line-height: 1.8;">専任担当者より、メール（または電話）にてご連絡いたします。ご相談内容を踏まえた上で、最適なご提案をするため、まずは20〜30分の無料ヒアリングをご提案させていただきます。</p>
</div>
</div>
<div class="wf-row gap-24" style="position: relative; z-index: 1; align-items: flex-start; padding: 16px 0;">
<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; flex-shrink: 0;">03</div>
<div style="flex: 1; padding: 16px 24px; background: var(--wf-bg-soft);">
<div class="wf-xs wf-text-mute" style="font-weight: 600; letter-spacing: 0.1em;">3〜5営業日以内</div>
<h4 class="wf-mt-4" style="font-size: 17px; font-weight: 600;">無料ヒアリング・課題整理</h4>
<p class="wf-small wf-text-mute wf-mt-8" style="line-height: 1.8;">オンラインミーティングにて、現状の課題と目標を専任担当が丁寧にヒアリング。その場で実現可能な施策案・目安スケジュール・お見積もりイメージをお伝えします。</p>
</div>
</div>
<div class="wf-row gap-24" style="position: relative; z-index: 1; align-items: flex-start; padding: 16px 0;">
<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; flex-shrink: 0;">04</div>
<div style="flex: 1; padding: 16px 24px; background: #2A2A26; color: #fff;">
<div class="wf-xs" style="font-weight: 600; letter-spacing: 0.1em; color: #C9A04F;">1〜2週間以内</div>
<h4 class="wf-mt-4" style="font-size: 17px; font-weight: 600;">正式提案・お見積り提示</h4>
<p class="wf-small wf-mt-8" style="line-height: 1.8; opacity: 0.85;">貴社専用にカスタマイズしたご提案書とお見積りをご提示。検討期間を経てご導入が決まりましたら、速やかにキックオフへと移行します。</p>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================================
SEC 04 / 担当者からのメッセージ
============================================================ -->
<section class="wf-section soft">
<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-col-asym wf-mt-48" style="grid-template-columns: 4fr 8fr; align-items: flex-start; gap: 48px; background: #fff; padding: 40px; border: 1px solid var(--wf-line);">
<div>
<div class="wf-img" style="aspect-ratio: 1/1;">[担当者の顔写真]</div>
<div class="wf-mt-16">
<div class="wf-small" style="font-weight: 600;">[担当者名]</div>
<div class="wf-xs wf-text-mute wf-mt-4" style="line-height: 1.7;">[部署 / 役職]<br>[商品名]ご相談窓口</div>
</div>
<div class="wf-mt-16">
<div class="wf-row gap-4" style="font-size: 14px;">
<span style="color: #C9A04F;">★★★★★</span>
</div>
<div class="wf-xs wf-text-mute wf-mt-4">対応評価：5.0 / 5.0</div>
</div>
</div>
<div>
<p style="font-size: 16px; line-height: 1.9; font-weight: 500;">
[氏名] 様<br>
この度は[商品名]にお問い合わせいただき、誠にありがとうございます。
</p>
<p class="wf-mt-16" style="font-size: 14px; line-height: 1.9;">
[担当者の挨拶段落：「貴社の◯◯課題に対して、当社では[X]社以上の支援実績がございます。お打ち合わせまでに具体的な施策案をいくつか整理してご提案できるよう、準備を進めてまいります。」など、安心感を醸成する3〜5行]
</p>
<p class="wf-mt-16" style="font-size: 14px; line-height: 1.9;">
[担当者の意気込み段落：「無料ヒアリングの場では、率直なご質問・ご懸念点を遠慮なくお聞かせください。当社にご依頼いただくべきかどうかも含め、フラットにご助言申し上げます。」]
</p>
<div class="wf-mt-24" style="padding: 16px 20px; background: var(--wf-bg-soft); border-left: 3px solid #2A2A26;">
<p style="font-size: 13px; line-height: 1.8; font-weight: 500;">
「[担当者の一言メッセージ：例 一緒に貴社のXX成長を実現させてください。]」
</p>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================================
SEC 05 / ご連絡予定の説明
============================================================ -->
<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-col-3 wf-mt-48">
<div style="padding: 32px 24px; background: var(--wf-bg-soft); text-align: center;">
<div style="font-size: 32px;">📅</div>
<h4 class="wf-mt-16" style="font-size: 16px; font-weight: 600;">いつ？</h4>
<p class="wf-small wf-mt-8" style="line-height: 1.8;">営業日24時間以内<br>（土日祝を除く）</p>
</div>
<div style="padding: 32px 24px; background: var(--wf-bg-soft); text-align: center;">
<div style="font-size: 32px;">👤</div>
<h4 class="wf-mt-16" style="font-size: 16px; font-weight: 600;">誰から？</h4>
<p class="wf-small wf-mt-8" style="line-height: 1.8;">専任担当者<br>（プロフィール上記）</p>
</div>
<div style="padding: 32px 24px; background: var(--wf-bg-soft); text-align: center;">
<div style="font-size: 32px;">✉</div>
<h4 class="wf-mt-16" style="font-size: 16px; font-weight: 600;">どうやって？</h4>
<p class="wf-small wf-mt-8" style="line-height: 1.8;">メール優先<br>（ご希望時のみ電話）</p>
</div>
</div>
<div class="wf-mt-32" style="padding: 24px; background: #FFFAEB; border-left: 4px solid #C9A04F;">
<h4 style="font-size: 15px; font-weight: 600;">📩 メール受信が確認できない場合</h4>
<p class="wf-small wf-mt-8" style="line-height: 1.8;">
受付完了メールが届かない場合、以下をご確認ください：<br>
① 迷惑メール / プロモーションフォルダに振り分けられていないか<br>
② ご入力のメールアドレスに誤りがないか<br>
③ 受信ドメインに <code>@example.com</code> が許可されているか<br>
上記でも解決しない場合は、お手数ですが下記の電話番号までご連絡ください。
</p>
</div>
</div>
</section>
<!-- ============================================================
SEC 06 / 急ぎ連絡先（電話・メール）
============================================================ -->
<section class="wf-section soft">
<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-col-2 wf-mt-48">
<div style="padding: 40px 32px; background: #fff; border: 1px solid var(--wf-line); text-align: center;">
<div style="font-size: 40px;">📞</div>
<h4 class="wf-mt-16" style="font-size: 16px; font-weight: 600;">お電話でのご相談</h4>
<div class="wf-mt-16" style="font-size: 32px; font-weight: 700; letter-spacing: 0.04em;">XX-XXXX-XXXX</div>
<p class="wf-small wf-text-mute wf-mt-8">受付：平日 XX:XX 〜 XX:XX</p>
<p class="wf-xs wf-text-mute wf-mt-16" style="line-height: 1.8;">「受付番号 REQ-YYYYMMDD-XXXX の件で」と<br>お伝えいただくとスムーズです。</p>
</div>
<div style="padding: 40px 32px; background: #fff; border: 1px solid var(--wf-line); text-align: center;">
<div style="font-size: 40px;">✉</div>
<h4 class="wf-mt-16" style="font-size: 16px; font-weight: 600;">メールでのご相談</h4>
<div class="wf-mt-16" style="font-size: 18px; font-weight: 600;">support@example.com</div>
<p class="wf-small wf-text-mute wf-mt-8">24時間受付・営業日24時間以内に返信</p>
<a class="wf-btn dark sm wf-mt-16">メーラーを起動</a>
</div>
</div>
</div>
</section>
<!-- ============================================================
SEC 07 / 関連リコメンド（コラム / 事例 / 資料）
============================================================ -->
<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-col-3 wf-mt-48">
<a href="#" class="wf-card">
<div class="card-img"></div>
<div class="card-cat">コラム</div>
<div class="card-title">[関連記事タイトル01：例 ◯◯業界で[商品名]が選ばれる5つの理由]</div>
<p class="card-desc wf-mt-8">[記事の冒頭2〜3行]</p>
</a>
<a href="#" class="wf-card">
<div class="card-img"></div>
<div class="card-cat">コラム</div>
<div class="card-title">[関連記事タイトル02：例 導入前に知っておきたい◯◯の落とし穴]</div>
<p class="card-desc wf-mt-8">[記事の冒頭2〜3行]</p>
</a>
<a href="#" class="wf-card">
<div class="card-img"></div>
<div class="card-cat">コラム</div>
<div class="card-title">[関連記事タイトル03：例 ROIを最大化する◯◯活用法]</div>
<p class="card-desc wf-mt-8">[記事の冒頭2〜3行]</p>
</a>
</div>
<div class="wf-col-3 wf-mt-32">
<a href="#" class="wf-card">
<div class="card-img"></div>
<div class="card-cat">導入事例</div>
<div class="card-title">[事例01：例 [企業名]様 / リード数XX倍を実現]</div>
<p class="card-desc wf-mt-8">[業界・規模・成果の概要]</p>
</a>
<a href="#" class="wf-card">
<div class="card-img"></div>
<div class="card-cat">導入事例</div>
<div class="card-title">[事例02：例 [企業名]様 / 業務工数XX%削減]</div>
<p class="card-desc wf-mt-8">[業界・規模・成果の概要]</p>
</a>
<a href="#" class="wf-card">
<div class="card-img"></div>
<div class="card-cat">資料DL</div>
<div class="card-title">[資料：例 [商品名]サービス詳細資料（PDF・XX頁）]</div>
<p class="card-desc wf-mt-8">[資料概要：機能一覧・料金詳細・事例集を1冊に]</p>
</a>
</div>
<p class="wf-text-center wf-mt-32"><a href="#" style="text-decoration: underline; font-size: 14px;">▶ すべての記事 / 事例を見る</a></p>
</div>
</section>
<!-- ============================================================
SEC 08 / SNSフォロー誘導
============================================================ -->
<section class="wf-section soft">
<div class="wf-container wf-text-center" style="max-width: 720px;">
<div class="wf-section-title wf-text-center">
<span class="label">SNSで最新情報をお届け</span>
<h2>SNSをフォローしませんか？</h2>
<p class="lead" style="margin-left: auto; margin-right: auto;">
業界トレンド・最新事例・活用ノウハウを毎週配信しています。
</p>
</div>
<div class="wf-row center gap-16 wf-mt-32" style="flex-wrap: wrap;">
<a class="wf-btn white" style="min-width: 180px;">𝕏 (Twitter) フォロー</a>
<a class="wf-btn white" style="min-width: 180px;">in LinkedIn フォロー</a>
<a class="wf-btn white" style="min-width: 180px;">▶ YouTube 登録</a>
<a class="wf-btn white" style="min-width: 180px;">f Facebook いいね</a>
</div>
<p class="wf-xs wf-text-mute wf-mt-16">フォロワー数：[X],XXX名 / 週X回更新</p>
</div>
</section>
<!-- ============================================================
SEC 09 / メルマガ登録誘導
============================================================ -->
<section class="wf-section">
<div class="wf-container" style="max-width: 720px;">
<div style="padding: 48px; background: #2A2A26; color: #fff; text-align: center;">
<div class="wf-xs" style="opacity: 0.7; font-weight: 600; letter-spacing: 0.1em;">NEWSLETTER</div>
<h3 class="wf-mt-16" style="font-size: 24px; font-weight: 600; line-height: 1.5; color: #fff;">
月1回の限定ノウハウ配信<br>メルマガで先取り情報をお届け
</h3>
<p class="wf-mt-16" style="font-size: 14px; line-height: 1.9; opacity: 0.85;">
公開していない事例 / 業界レポート / 限定セミナー情報を、月1回お届けします。<br>
現在 [X],XXX名 が登録中。配信解除はいつでも可能です。
</p>
<div class="wf-mt-32" style="display: flex; gap: 8px; max-width: 480px; margin-left: auto; margin-right: auto;">
<input class="wf-form-input" placeholder="メールアドレスを入力" style="background: #fff; color: #000; flex: 1;">
<a class="wf-btn" style="background: #C9A04F; color: #fff; min-width: 120px;">登録する</a>
</div>
<p class="wf-xs wf-mt-16" style="opacity: 0.7;">※ 個人情報は厳重に管理いたします</p>
</div>
</div>
</section>
<!-- ============================================================
SEC 10 / 軽量フッター
============================================================ -->
<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="01-top.html" 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>