:root{
  --primary:#2b2bff;
  --text:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --bg-alt:#f6f7fb;
  --border:#e5e7eb;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP",Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.8;}

/* layout */
.container{width:min(1100px,92%);margin:0 auto}
.section{padding:72px 0}
.section.alt{background:var(--bg-alt)}
.sec-title{font-size:28px;margin:0 0 8px}
.sec-desc{color:var(--muted);margin:0 0 24px}
.grid{display:grid;gap:24px}
.cards-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.cards-3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.cards-3{grid-template-columns:1fr}}

/* header */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:50}
.header-inner{display:flex;align-items:center;gap:16px;justify-content:space-between;height:64px}
.logo{font-weight:700;text-decoration:none;color:#111}
.nav{display:flex;gap:18px}
.nav a{color:#111;text-decoration:none;font-weight:600}
.menu-btn{display:none;border:0;background:transparent;font-size:24px}
.hide-sp{display:inline-flex}
@media(max-width:840px){
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);padding:12px 4%;}
  .nav a{display:block;padding:10px 6px}
  .menu-btn{display:inline-flex}
  .hide-sp{display:none}
}

/* hero */
.hero{background:linear-gradient(180deg,#eef2ff 0%,#fff 100%);padding:64px 0}
.hero-inner{display:grid;gap:24px;grid-template-columns:1.15fr .85fr;align-items:center}
@media(max-width:960px){.hero-inner{grid-template-columns:1fr}}
.eyebrow{color:var(--primary);font-weight:700;margin:0 0 6px}
.hero h1{font-size:40px;line-height:1.2;margin:0 0 8px}
.lead{color:var(--muted);margin:0 0 16px}
.badges{display:flex;gap:10px;padding:0;margin:14px 0 0;list-style:none;flex-wrap:wrap}
.badges li{border:1px solid var(--border);padding:6px 10px;border-radius:999px;background:#fff;font-size:13px}
.hero-media img{width:100%;border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.06)}

/* cards */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card-body{padding:16px}
.card-body h3{margin:0 0 6px;font-size:18px}
.card-body p{margin:0 0 10px;color:var(--muted)}
.chip-row{display:flex;gap:8px;list-style:none;margin:0 0 12px;padding:0}
.chip-row li{font-size:12px;border:1px solid var(--border);border-radius:999px;padding:4px 8px;background:#fff}
.card-foot{display:flex;justify-content:space-between;align-items:center}
.price{font-weight:800}

/* features */
.features{grid-template-columns:repeat(3,1fr)}
.feature{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.feature .icon{font-size:24px}

/* steps */
.steps{counter-reset:st;margin:0;padding-left:0;list-style:none;display:grid;gap:10px}
.steps li{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.steps li strong{margin-right:6px}

/* plans */
.plan{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-align:center;position:relative}
.plan .plan-price{font-size:28px;font-weight:800;margin:6px 0 16px}
.plan-list{list-style:none;margin:0 0 18px;padding:0;color:var(--text)}
.plan.featured{border:2px solid var(--primary);box-shadow:0 10px 30px rgba(43,43,255,.08)}
.ribbon{position:absolute;top:-10px;right:-10px;background:var(--primary);color:#fff;font-size:12px;padding:6px 10px;border-radius:999px}

/* review */
.review{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px;font-style:italic}

/* accordion */
details{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:12px}
details+details{margin-top:10px}
summary{cursor:pointer;font-weight:700}

/* CTA */
.cta{background:#0f172a;color:#fff;padding:72px 0;text-align:center}
.cta .cta-inner{max-width:640px;margin:0 auto}
.cta h2{margin:0 0 8px}
.cta .cta-row{display:flex;gap:12px;justify-content:center;margin-top:12px}
@media(max-width:520px){.cta .cta-row{flex-direction:column}}

/* footer */
.site-footer{border-top:1px solid var(--border);background:#fff}
.footer-inner{display:flex;gap:12px;justify-content:space-between;align-items:center;height:72px}
.footer-inner a{color:var(--muted);text-decoration:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:10px;border:1px solid var(--border);text-decoration:none;color:#111;background:#fff;font-weight:700}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.ghost{background:#fff;border-color:var(--primary);color:var(--primary)}
.btn.small{padding:8px 12px;font-size:14px}
.btn.large{padding:14px 22px;font-size:16px}
.btn.block{width:100%}

/* === 固定ヘッダー設定 === */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
}

.site-header .logo {
  font-weight: bold;
  color: #2f55d4;
  text-decoration: none;
  font-size: 20px;
}

.nav a {
  margin-left: 18px;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s;
}

.nav a:hover {
  color: #2f55d4;
}

/* 固定ヘッダー分の余白をボディに確保 */
body {
  padding-top: 70px;
}

/* ==== SNSシェアボタン セクション ==== */
.share-section {
  text-align: center;
  margin-top: 50px;
}

.share-section h3 {
  color: #224bdb;
  font-weight: 700;
  margin-bottom: 25px;
  font-size: 1.2em;
}

.share-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.share-btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  transition: all 0.3s ease;
}

.share-btn.twitter {
  background-color: #000000;
}

.share-btn.line {
  background-color: #06C755;
}

.share-btn.copy {
  background-color: #2f55d4;
  border: none;
  cursor: pointer;
}

.share-btn:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

#copy-msg-01 {
  margin-top: 10px;
  color: #2f55d4;
  font-weight: bold;
  display: none;
}

<style>
.template-get {
  background: #f9fafc;
  padding: 80px 20px;
  text-align: center;
}
.template-get h2 {
  font-size: 28px;
  font-weight: 700;
  color: #222;
  margin-bottom: 20px;
}
.template-get .lead {
  font-size: 18px;
  color: #555;
  margin-bottom: 40px;
  line-height: 1.8;
}
.benefits ul {
  list-style: none;
  padding: 0;
  margin: 0 auto 30px;
  text-align: left;
  max-width: 600px;
}
.benefits li {
  font-size: 16px;
  color: #333;
  margin: 8px 0;
  padding-left: 1.2em;
  text-indent: -1.2em;
}
.benefits li::before {
  content: "✅ ";
}
.cta-buttons {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}
.btn.primary {
  background: linear-gradient(90deg, #2f55d4, #4a80f0);
  color: #fff;
}
.btn.primary:hover {
  background: #1e3ca3;
  transform: translateY(-3px);
}
.btn.ghost {
  border: 2px solid #2f55d4;
  color: #2f55d4;
  background: #fff;
}
.btn.ghost:hover {
  background: #2f55d4;
  color: #fff;
  transform: translateY(-3px);
}
.note {
  margin-top: 40px;
  color: #555;
  font-size: 15px;
  line-height: 1.7;
}
</style>

/* ==================== footer ==================== */
.site-footer {
  border-top: 1px solid var(--border);
  background: #fff;
  padding: 20px 0;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.footer-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.footer-btn {
  display: inline-block;
  background-color: #2f55d4;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s, transform 0.2s;
}

.footer-btn:hover {
  background-color: #1e3ca3;
  transform: translateY(-2px);
}

/* 強調された「依頼する」ボタン */
.cta-request-btn {
  display: inline-block;
  background: linear-gradient(135deg, #0056ff, #007bff);
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  padding: 16px 48px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 85, 255, 0.35);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* ホバー時のアクション */
.cta-request-btn:hover {
  background: linear-gradient(135deg, #0040cc, #0066ff);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 85, 255, 0.45);
}

/* クリック時の軽い押し込み */
.cta-request-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0, 85, 255, 0.3);
}

/* グラデーションの光エフェクト */
.cta-request-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transition: all 0.6s ease;
}

.cta-request-btn:hover::after {
  left: 100%;
}

.template-preview-link {
  display: none !important;
}

.back-home {
  text-align: center;
  margin: 60px 0 80px;
}

.home-btn {
  display: inline-block;
  background: #0066ff;
  color: #fff;
  padding: 14px 28px;
  font-size: 18px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s, transform 0.2s;
}

.home-btn:hover {
  background: #004bcc;
  transform: translateY(-2px);
}

.template-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* フッター全体 */
.footer {
  background-color: #f9f9ff;
  padding: 20px 40px;
  border-top: 1px solid #e0e0e0;
  border-radius: 0 0 12px 12px;
  font-size: 14px;
  color: #333;
}

/* 内側レイアウト：横並び中央寄せ */
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* リンク部分 */
.footer-links {
  display: flex;
  gap: 30px;
}

.footer-links a {
  text-decoration: none;
  color: #3b3bff;
  font-weight: 600;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: #1e1eff;
}

/* ここに追加！ style.css の一番下でOK */
.template-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
}

.template-card {
  width: 320px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.template-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

.template-card img {
  width: 100%;
  display: block;
  border-bottom: 1px solid #eee;
}

.template-card h3,
.template-card p,
.template-card a {
  margin: 16px;
}

.template-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 1px solid #eee;
  border-radius: 8px 8px 0 0;
}

.hero {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-text {
  position: absolute;
  bottom: 40px;
  left: 50px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.features {
  padding: 60px 20px;
  text-align: center;
}

.feature-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.feature {
  width: 300px;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.cta {
  text-align: center;
  background: #eef2ff;
  padding: 60px 20px;
}

.cta .btn {
  display: inline-block;
  background: #2f55d4;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
}

.cta .btn:hover {
  background: #1e3ca3;
}

.templates {
  text-align: center;
  padding: 60px 20px;
}

/* 中央寄せ */
.template-list {
  display: flex;
  justify-content: center;  /* 横方向中央 */
  align-items: flex-start;  /* 縦の整列を上に */
  flex-wrap: wrap;
  gap: 40px;  /* カード間の余白 */
  margin: 0 auto;  /* 全体中央寄せ */
  max-width: 900px; /* 全体幅を制御 */
}

/* 各カード */
.template-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  width: 320px;
  padding: 20px;
  text-align: left;
  transition: transform 0.3s ease;
}

.template-card:hover {
  transform: translateY(-6px);
}

.template-card .image-wrapper img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 15px;
}

.template-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.template-card ul {
  padding-left: 20px;
  color: #555;
}

.template-card .price {
  font-weight: bold;
  font-size: 20px;
  margin-top: 15px;
}

.btn.primary {
  display: inline-block;
  background: #1a3cff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 10px;
}

/* =====================
   テンプレ紹介セクション強調デザイン
===================== */
.template-section {
  background: linear-gradient(135deg, #f5f7ff, #e6edff);
  padding: 60px 20px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  text-align: center;
}

.template-section h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #1b2a4e;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

.template-section p {
  color: #4a4a4a;
  font-size: 1.1rem;
  margin-bottom: 40px;
}

/* テンプレボックス */
.template-box {
  background: #fff;
  border: 2px solid #e1e6ff;
  border-radius: 20px;
  padding: 30px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.template-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-color: #4f6ef7;
}

/* タイトル */
.template-box h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 10px;
  color: #1a1a40;
}

/* 説明文 */
.template-box p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

/* ボタン */
.template-box .btn {
  display: inline-block;
  background: linear-gradient(90deg, #4f6ef7, #6c8bff);
  color: #fff;
  padding: 12px 30px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.template-box .btn:hover {
  background: linear-gradient(90deg, #3d58d6, #4f6ef7);
  transform: scale(1.05);
}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>LP制作テンプレート | 最短1日で公開</title>
  <meta name="description" content="AI対応のLP制作テンプレート。最短1日で公開。実績・ブログ・FAQ・お問い合わせまで一式搭載。">
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <!-- ===== Header ===== -->
  <header class="site-header">
    <div class="container header-inner">
      <a class="logo" href="#"><span>LP</span> Template</a>
      <nav class="nav">
        <a href="#service">サービス</a>
        <a href="#works">実績</a>
        <a href="#blog">ブログ</a>
        <a href="#faq">FAQ</a>
        <a href="#contact" class="btn btn-ghost small">無料相談</a>
      </nav>
      <button class="nav-toggle" aria-label="メニューを開閉">☰</button>
    </div>
  </header>

  <!-- ===== Hero / First View ===== -->
  <section class="hero">
    <div class="container hero-inner">
      <h1 class="hero-title">AIで最短1日、<br class="sp-only">見せられるLPを完成。</h1>
      <p class="hero-lead">
        設計・構成・デザイン・文章生成までワンストップ。<br />
        スマホ最適・CV導線標準装備のテンプレート。
      </p>
      <div class="cta-row">
        <a href="#contact" class="btn btn-primary">無料で相談する</a>
        <a href="#service" class="btn btn-ghost">機能を見る</a>
      </div>
      <ul class="trust-list">
        <li>レスポンシブ対応</li>
        <li>画像・テキスト差し替えのみ</li>
        <li>SEO初期設定込み</li>
      </ul>
    </div>
  </section>

  <!-- ===== Service / Menu ===== -->
  <section id="service" class="section">
    <div class="container">
      <h2 class="sec-title">サービス内容</h2>
      <p class="sec-lead">目的に合わせて選べる3つのパッケージ。<br class="sp-only">最短1日で公開まで伴走します。</p>

      <div class="cards grid-3">
        <article class="card">
          <div class="card-ico">🧩</div>
          <h3 class="card-title">LP制作（テンプレ）</h3>
          <p class="card-txt">
            既成テンプレへ文章・画像を差し替え。<br />
            低コスト × 高速ローンチ向け。
          </p>
          <ul class="feature-list">
            <li>構成・デザイン済み</li>
            <li>AI文章提案込み</li>
            <li>スマホ最適化</li>
          </ul>
          <div class="price">¥50,000〜 / 1案件</div>
          <a href="#contact" class="btn btn-primary block">このプランで相談</a>
        </article>

        <article class="card">
          <div class="card-ico">🧠</div>
          <h3 class="card-title">LP設計＋制作</h3>
          <p class="card-txt">
            ヒアリングから訴求設計を実施。<br />
            競合・差別化・CV導線を再設計。
          </p>
          <ul class="feature-list">
            <li>ヒアリング1h</li>
            <li>構成図・ワイヤー</li>
            <li>CTA導線最適化</li>
          </ul>
          <div class="price">¥120,000〜</div>
          <a href="#contact" class="btn btn-primary block">このプランで相談</a>
        </article>

        <article class="card">
          <div class="card-ico">⚡</div>
          <h3 class="card-title">運用サポート</h3>
          <p class="card-txt">
            解析・ABテスト・改善。<br />
            公開後の数字改善を継続支援。
          </p>
          <ul class="feature-list">
            <li>月次レポート</li>
            <li>ABテスト提案</li>
            <li>改善実装</li>
          </ul>
          <div class="price">¥30,000〜 / 月</div>
          <a href="#contact" class="btn btn-primary block">このプランで相談</a>
        </article>
      </div>
    </div>
  </section>

  <!-- ===== Why (選ばれる理由) ===== -->
  <section class="section section-alt">
    <div class="container">
      <h2 class="sec-title">選ばれる理由</h2>
      <div class="cards grid-3">
        <article class="card flat">
          <div class="card-ico">⚡</div>
          <h3 class="card-title">最短で形になる</h3>
          <p class="card-txt">
            初期構築をテンプレ化。<br />
            今日はじめて今日リリース。<br />
            文章や画像を入れ替えるだけで即公開。<br />
            今日から副業・事業スタートが可能。
          </p>
        </article>
        <article class="card flat">
          <div class="card-ico">🧠</div>
          <h3 class="card-title">AI前提の設計</h3>
          <p class="card-txt">
            記事・LP・画像生成までAI運用に最適化。<br />
            ChatGPTやCanvaと連携して作業を自動化。<br />
            制作スピードと品質を両立。
          </p>
        </article>
        <article class="card flat">
          <div class="card-ico">📈</div>
          <h3 class="card-title">CV導線を標準装備</h3>
          <p class="card-txt">
            実績→FAQ→CTAの流れで自然に成約へ。<br />
            心理学に基づく構成で見込み客が自然に<br />
            「問い合わせ」へ進みます。
          </p>
        </article>
      </div>
    </div>
  </section>

  <!-- ===== Works / 実績 ===== -->
  <section id="works" class="section">
    <div class="container">
      <h2 class="sec-title">実績・導入事例</h2>
      <div class="works grid-3">
        <figure class="work">
          <img src="https://images.unsplash.com/photo-1522199710521-72d69614c702?q=80&w=1200&auto=format&fit=crop" alt="事例Aのサムネイル">
          <figcaption>
            <h3>事例A｜オンライン講座LP</h3>
            <p>CV率 1.8倍 / 広告費30%削減。</p>
          </figcaption>
        </figure>
        <figure class="work">
          <img src="https://images.unsplash.com/photo-1485217988980-11786ced9454?q=80&w=1200&auto=format&fit=crop" alt="事例Bのサムネイル">
          <figcaption>
            <h3>事例B｜美容サロンLP</h3>
            <p>予約率 2.2倍 / 来店単価UP。</p>
          </figcaption>
        </figure>
        <figure class="work">
          <img src="https://images.unsplash.com/photo-1492724441997-5dc865305da7?q=80&w=1200&auto=format&fit=crop" alt="事例Cのサムネイル">
          <figcaption>
            <h3>事例C｜D2C商品LP</h3>
            <p>新規獲得CPA 38%改善。</p>
          </figcaption>
        </figure>
      </div>
    </div>
  </section>

  <!-- ===== Blog / 更新情報 ===== -->
  <section id="blog" class="section section-alt">
    <div class="container">
      <h2 class="sec-title">ブログ・更新情報</h2>
      <div class="posts grid-3">
        <article class="post">
          <span class="post-date">2025-11-06</span>
          <h3 class="post-title"><a href="#">AIとLPの相性を最大化する3つの施策</a></h3>
          <p class="post-excerpt">構成テンプレとAI文章生成の合わせ技で、制作コストを下げつつCVを高める方法。</p>
        </article>
        <article class="post">
          <span class="post-date">2025-10-28</span>
          <h3 class="post-title"><a href="#">スマホ最適のチェックリスト</a></h3>
          <p class="post-excerpt">読了率・スクロール率を高めるUI。CTA配置とフォント設計の実例。</p>
        </article>
        <article class="post">
          <span class="post-date">2025-10-10</span>
          <h3 class="post-title"><a href="#">公開当日から反応を得る導線設計</a></h3>
          <p class="post-excerpt">実績→FAQ→CTAの順で自然に行動を促すオーソドックスな型。</p>
        </article>
      </div>
    </div>
  </section>

  <!-- ===== FAQ ===== -->
  <section id="faq" class="section">
    <div class="container">
      <h2 class="sec-title">よくある質問</h2>
      <div class="accordion">
        <details>
          <summary>初心者でも使えますか？</summary>
          <p>はい。文章と画像を差し替えるだけで公開できます。操作ガイドもお渡しします。</p>
        </details>
        <details>
          <summary>商用利用は可能ですか？</summary>
          <p>可能です。クレジット表記は不要です。再配布のみご遠慮ください。</p>
        </details>
        <details>
          <summary>WordPressでも使えますか？</summary>
          <p>はい。静的HTMLとして導入するか、テーマに組み込み可能です。</p>
        </details>
      </div>
    </div>
  </section>

  <!-- ===== Contact ===== -->
  <section id="contact" class="section section-alt">
    <div class="container">
      <h2 class="sec-title">お問い合わせ</h2>
      <p class="sec-lead">無料相談・お見積りはこちらから。<br class="sp-only">最短で本日中にご返信します。</p>

      <form class="contact-form" action="https://formspree.io/f/xbjwlyza" method="POST">
        <div class="grid-2">
          <div class="form-group">
            <label for="name">お名前</label>
            <input id="name" name="name" type="text" required />
          </div>
          <div class="form-group">
            <label for="email">メールアドレス</label>
            <input id="email" name="email" type="email" required />
          </div>
        </div>

        <div class="form-group">
          <label for="type">ご相談内容</label>
          <select id="type" name="type">
            <option>テンプレLP制作</option>
            <option>LP設計＋制作</option>
            <option>運用・改善</option>
            <option>その他</option>
          </select>
        </div>

        <div class="form-group">
          <label for="message">詳細</label>
          <textarea id="message" name="message" rows="6" placeholder="現状・目的・希望納期など"></textarea>
        </div>

        <button type="submit" class="btn btn-primary">送信する</button>
      </form>
      <p class="policy-note">※ 送信によりプライバシーポリシーに同意したものとみなします。</p>
    </div>
  </section>

  <!-- ===== Footer ===== -->
  <footer class="site-footer">
    <div class="container footer-inner">
      <small>© 2025 LP Template</small>
      <nav class="footer-nav">
        <a href="#service">サービス</a>
        <a href="#works">実績</a>
        <a href="#faq">FAQ</a>
        <a href="#contact">お問い合わせ</a>
      </nav>
    </div>
  </footer>

  <script>
    // モバイルナビ
    const navBtn = document.querySelector('.nav-toggle');
    const nav = document.querySelector('.nav');
    navBtn?.addEventListener('click', () => nav.classList.toggle('open'));
  </script>
</body>
</html>

body {
  font-family: "Noto Sans JP", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #fffaf4;
  color: #333;
}

/* ヘッダー */
header {
  background-color: #f8c471;
  padding: 10px 0;
  text-align: center;
}

.logo {
  margin: 0;
  font-size: 24px;
  color: #fff;
}

.nav-links {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.nav-links a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}

.nav-links a:hover {
  text-decoration: underline;
}

/* 本文 */
main {
  max-width: 1000px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* フッター */
footer {
  background-color: #f8c471;
  color: #fff;
  text-align: center;
  padding: 10px;
  margin-top: 40px;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #fffaf4;
  color: #333;
}

.site-header {
  background: #f8c471;
  text-align: center;
  padding: 20px 0;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 0;
}

nav a {
  color: white;
  font-weight: bold;
  text-decoration: none;
}

.menu-item {
  text-align: center;
  margin: 20px;
  display: inline-block;
}

.menu-item img {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  object-fit: cover;
}
/* ============================
   追尾（固定）ヘッダー設定
============================ */
header, .navbar {
  position: fixed;          /* 固定表示 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;            /* 最前面に */
  background-color: #fff;   /* 背景色（透け防止） */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* ふわっと影 */
  transition: all 0.3s ease; /* スクロール時の滑らかさ */
}

/* ページ内容がヘッダーに隠れないよう余白を追加 */
body {
  padding-top: 80px; /* ヘッダーの高さに合わせて調整 */
}
/* ============================
   「一覧に戻る」ボタン固定設定
============================ */
.back-button {
  position: fixed;          /* スクロールしても固定 */
  top: 15px;                /* 上の余白（ヘッダーより少し下） */
  left: 20px;               /* 左の余白 */
  z-index: 10000;           /* 最前面に配置（ヘッダーより上） */
  background-color: #ffa500; /* オレンジ背景 */
  color: #fff;              /* 白文字 */
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: bold;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ホバー時の効果 */
.back-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.footer-buttons a {
  background-color: #2a7bff;   /* 明るめの青 */
  color: #ffffff;              /* 白文字で視認性アップ */
  padding: 12px 25px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* ホバー時の視覚効果 */
.footer-buttons a:hover {
  background-color: #1e5fd9;   /* 濃いめの青に変化 */
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}
/* ヘッダーを固定した分だけ本文を下げる */
body {
  padding-top: 100px; /* ヘッダーの高さに合わせて調整 */
}
/* ヘッダー固定設定 */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f8be6b; /* 現在のオレンジ色 */
  z-index: 1000; /* 上に固定 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* ヘッダー高さ分だけ本文を下げる */
main, body {
  padding-top: 100px; /* ←ヘッダーの高さに合わせて調整 */
}

/* 戻るボタンも追尾にする場合 */
.back-button {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1100;
}
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #f8be6b;
  z-index: 1000;
}

main, body {
  padding-top: 90px;
}