<!DOCTYPE html>
<!--
  lp-template.html — LP実装のひな型（chige-lp-kit / templates/）
  使い方: work/<案件名>/index.src.html としてコピーしてから編集する。
          手順の正本は .claude/skills/lp-workflow/SKILL.md（Phase 5）。
  ルール: 【ここに〜】はプレースホルダー。色は :root のCSS変数に集約し、要素ごとのハードコード色は書かない。
          特定ブランドの色・文言・写真は入れない（このファイル自体はニュートラルな出発点）。
-->
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【ここにページタイトル・32字目安】</title>
<meta name="description" content="【ここにmeta description・80〜120字】">
<link rel="canonical" href="【ここに公開後のURLを設定】">

<!-- OGP: LINE/Instagram/X等でシェアされたときのプレビュー用。画像は1200x630のJPEGで用意する（lp-workflow Phase 7） -->
<meta property="og:type" content="website">
<meta property="og:title" content="【ここにOGPタイトル】">
<meta property="og:description" content="【ここにOGP説明文】">
<meta property="og:image" content="【ここにOGP画像のURL・1200x630のJPEG】">
<meta property="og:site_name" content="【ここにサイト名】">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary_large_image">

<!-- favicon: 用意でき次第、下のコメントを外して差し替える -->
<!-- <link rel="icon" href="favicon.ico"> -->

<!-- JSON-LD構造化データ: 料金・日程が確定してから追加する（lp-workflow Phase 7 参照。未確定のまま入れない） -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600&family=Noto+Serif+JP:wght@500;700&family=Inter:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">

<style>
  /* カラー・フォント方針は :root に集約する。値は仮のニュートラル色。Phase 4で選んだブランドカラーに差し替える。 */
  :root {
    --color-bg: #faf9f6;          /* 背景色。【ここにブランドの背景色】仮のオフホワイト */
    --color-surface: #ffffff;     /* カード等の面色 */
    --color-text: #232323;        /* 本文文字色 */
    --color-text-muted: #6b6b66;  /* 補助文字色（キャプション・注記） */
    --color-primary: #33513f;     /* メインカラー。【ここにブランドのメインカラーを設定】仮の深緑 */
    --color-primary-dark: #223629;/* メインカラーの濃色（ホバー等） */
    --color-accent: #b08d57;      /* アクセントカラー。【ここにアクセントカラーを設定】仮の真鍮色 */
    --color-border: #e6e3da;      /* 罫線・区切り線の色 */
    --font-heading: 'EB Garamond', 'Noto Serif JP', serif;   /* 見出し: 和欧混植（欧文セリフ+明朝） */
    --font-body: 'Inter', 'Noto Sans JP', sans-serif;        /* 本文: 和欧混植（欧文サンセリフ+ゴシック） */
    --fs-h1: clamp(32px, 5.5vw, 60px);
    --fs-h2: clamp(26px, 4vw, 38px);
    --fs-h3: clamp(19px, 2.4vw, 23px);
    --fs-body: clamp(15px, 1.6vw, 17px);
    --fs-label: clamp(12px, 1.2vw, 13px);
    --space-section: clamp(64px, 10vw, 128px);
    --space-lg: clamp(24px, 4vw, 48px);
    --space-md: clamp(16px, 2.4vw, 28px);
    --radius-card: 6px;
    --max-width: 1120px;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.8; letter-spacing: 0.05em; font-feature-settings: "palt"; -webkit-font-smoothing: antialiased; }
  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; }

  h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; line-height: 1.5; letter-spacing: 0.03em; margin: 0 0 0.6em; }
  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }
  p { margin: 0 0 1em; }

  .container { max-width: var(--max-width); margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
  .section { padding: var(--space-section) 0; }
  .section-alt { background: var(--color-surface); }
  .section-label { display: block; font-size: var(--fs-label); font-family: var(--font-heading); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.8em; }
  .section-title { margin-bottom: var(--space-md); }
  .section-lead { color: var(--color-text-muted); max-width: 42em; }

  .btn { display: inline-block; padding: 0.9em 2em; border-radius: 999px; font-family: var(--font-body); font-weight: 500; letter-spacing: 0.08em; text-decoration: none; border: 1px solid transparent; transition: opacity .2s ease, transform .2s ease; }
  .btn:hover { opacity: 0.85; }
  .btn-primary { background: var(--color-primary); color: #fff; }
  .btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }

  /* header */
  .site-header { position: sticky; top: 0; z-index: 10; background: rgba(250, 249, 246, 0.9); backdrop-filter: blur(6px); border-bottom: 1px solid var(--color-border); }
  .site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
  .logo { font-family: var(--font-heading); font-size: clamp(18px, 2vw, 22px); letter-spacing: 0.08em; text-decoration: none; color: var(--color-text); }

  /* hero */
  .hero { padding: clamp(80px, 14vw, 160px) 0 var(--space-section); text-align: center; }
  .hero-label { justify-content: center; display: flex; }
  .hero h1 { max-width: 18em; margin-left: auto; margin-right: auto; }
  .hero-sub { max-width: 34em; margin: 0 auto var(--space-lg); color: var(--color-text-muted); }

  /* 共感（課題の言語化） */
  .empathy-list { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: var(--space-md); }
  .empathy-list li { padding: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }

  /* ベネフィット（カード） */
  .benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-md); }
  .benefit-card { min-width: 0; /* Grid子要素の暗黙min-widthによる横スクロール事故を防ぐ */ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-lg) var(--space-md); }
  .benefit-card .num { font-family: var(--font-heading); color: var(--color-accent); font-size: var(--fs-label); letter-spacing: 0.18em; }

  /* お客様の声 */
  .voice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-md); }
  .voice-card { min-width: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-md); }
  .voice-name { margin-top: 1em; color: var(--color-text-muted); font-size: var(--fs-label); }

  /* 料金 */
  .price-card { max-width: 32em; margin: 0 auto; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-lg); }
  .price-amount { font-family: var(--font-heading); font-size: clamp(30px, 5vw, 44px); color: var(--color-primary); margin: 0.3em 0; }
  .price-note { font-size: var(--fs-label); color: var(--color-text-muted); }

  /* FAQ */
  .faq-list { max-width: 42em; margin: 0 auto; }
  .faq-item { border-bottom: 1px solid var(--color-border); padding: var(--space-md) 0; }
  .faq-item summary { cursor: pointer; font-weight: 500; list-style: none; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::before { content: "Q. "; color: var(--color-accent); font-family: var(--font-heading); }
  .faq-item p { margin-top: 0.8em; color: var(--color-text-muted); }

  /* 最終CTA */
  .final-cta { text-align: center; background: var(--color-primary); color: #fff; }
  .final-cta h2 { color: #fff; }
  .final-cta .section-lead { color: rgba(255,255,255,0.8); margin-left: auto; margin-right: auto; text-align: center; }
  .final-cta .btn-primary { background: #fff; color: var(--color-primary); }

  /* footer */
  .site-footer { padding: var(--space-lg) 0; text-align: center; color: var(--color-text-muted); font-size: var(--fs-label); }
  .legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em 1.5em; margin-bottom: 0.8em; }
  .legal-links a { color: inherit; }

  /* スクロールフェードイン */
  .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
  .rv.is-visible { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .rv { opacity: 1; transform: none; transition: none; }
  }

  /* ブレイクポイント（860px / 600pxの2段のみ） */
  @media (max-width: 860px) {
    .empathy-list { grid-template-columns: 1fr; }
  }
  @media (max-width: 600px) {
    .site-header .container { padding-top: 12px; padding-bottom: 12px; }
    .btn { width: 100%; text-align: center; }
  }
</style>
</head>
<body>

<header class="site-header">
  <div class="container">
    <a class="logo" href="#">【ここにロゴテキスト・サービス名】</a>
    <a class="btn btn-primary" href="#cta">【ここにCTA文言】</a>
  </div>
</header>

<section class="hero">
  <div class="container">
    <span class="section-label hero-label">【English Label】</span>
    <h1>【ここにキャッチコピー・見出し】</h1>
    <p class="hero-sub">【ここにサブコピー。1〜2文でLPの約束を言い切る】</p>
    <a class="btn btn-primary" href="#cta">【ここにCTA文言】</a>
  </div>
</section>

<section class="section" id="empathy">
  <div class="container">
    <span class="section-label">Empathy</span>
    <h2 class="section-title rv">【ここに共感セクションの見出し】</h2>
    <p class="section-lead rv">【ここに読み手が抱えている課題・悩みを言語化する導入文】</p>
    <ul class="empathy-list">
      <li class="rv">【ここに課題1】</li>
      <li class="rv">【ここに課題2】</li>
      <li class="rv">【ここに課題3】</li>
    </ul>
  </div>
</section>

<section class="section section-alt" id="benefits">
  <div class="container">
    <span class="section-label">Benefits</span>
    <h2 class="section-title rv">【ここにベネフィットセクションの見出し】</h2>
    <div class="benefit-grid">
      <div class="benefit-card rv">
        <p class="num">01</p>
        <h3>【ここにベネフィット1の見出し】</h3>
        <p>【ここにベネフィット1の説明】</p>
      </div>
      <div class="benefit-card rv">
        <p class="num">02</p>
        <h3>【ここにベネフィット2の見出し】</h3>
        <p>【ここにベネフィット2の説明】</p>
      </div>
      <div class="benefit-card rv">
        <p class="num">03</p>
        <h3>【ここにベネフィット3の見出し】</h3>
        <p>【ここにベネフィット3の説明】</p>
      </div>
    </div>
  </div>
</section>

<section class="section" id="voices">
  <div class="container">
    <span class="section-label">Voices</span>
    <h2 class="section-title rv">【ここにお客様の声セクションの見出し】</h2>
    <!--
      【実際の声が揃うまで空にしておく】。数字・体験談は創作しない（lp-workflow 禁則）。
      声が集まったら1件につき1枚、下のカードをコピーして .voice-grid の中に追加する。

      <div class="voice-grid">
        <div class="voice-card rv">
          <p class="voice-text">【ここにお客様の声本文】</p>
          <p class="voice-name">【お名前・属性】</p>
        </div>
      </div>
    -->
  </div>
</section>

<section class="section section-alt" id="pricing">
  <div class="container">
    <span class="section-label">Pricing</span>
    <h2 class="section-title rv">【ここに料金セクションの見出し】</h2>
    <!-- 料金・日程が未確定の間は【仮】マーカーを付ける。確定してから正式表記にする（lp-workflow Phase 5-i） -->
    <div class="price-card rv">
      <h3>【ここにプラン名】</h3>
      <p class="price-amount">【仮】￥ここに金額</p>
      <p class="price-note">【ここに料金に関する注記・税込表記など】</p>
      <a class="btn btn-primary" href="#cta">【ここにCTA文言】</a>
    </div>
  </div>
</section>

<section class="section" id="faq">
  <div class="container">
    <span class="section-label">FAQ</span>
    <h2 class="section-title rv">よくあるご質問</h2>
    <div class="faq-list">
      <details class="faq-item rv">
        <summary>【ここに質問1】</summary>
        <p>【ここに回答1】</p>
      </details>
      <details class="faq-item rv">
        <summary>【ここに質問2】</summary>
        <p>【ここに回答2】</p>
      </details>
      <details class="faq-item rv">
        <summary>【ここに質問3】</summary>
        <p>【ここに回答3】</p>
      </details>
    </div>
  </div>
</section>

<section class="section final-cta" id="cta">
  <div class="container">
    <h2 class="rv">【ここに最終CTAの見出し】</h2>
    <p class="section-lead rv">【ここに背中を押す一言】</p>
    <a class="btn btn-primary" href="【ここに申込・登録フォームのURL】">【ここにCTA文言】</a>
  </div>
</section>

<footer class="site-footer">
  <div class="container">
    <!--
      有料の申込・購入があるLPでは「特定商取引法に基づく表記」へのリンクが必要。
      lp-legal スキルの手順で tokusho.html を作ってから、下のリンクを有効にすること。
      リンク先が無いまま href="#" で公開しない。不要な場合（無料登録のみ等）はこの nav ごと削除する。
    -->
    <nav class="legal-links">
      <a href="tokusho.html">特定商取引法に基づく表記</a>
      <a href="privacy.html">プライバシーポリシー</a>
    </nav>
    <p>&copy; <span id="year"></span> 【ここに事業者名】</p>
  </div>
</footer>

<script>
(function () {
  // 著作権表記の年を自動更新
  var yearEl = document.getElementById('year');
  if (yearEl) { yearEl.textContent = new Date().getFullYear(); }

  // スクロールフェードイン（.rv）。prefers-reduced-motion では無効化して即表示にする。
  var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var targets = document.querySelectorAll('.rv');
  if (reduceMotion || !('IntersectionObserver' in window)) {
    targets.forEach(function (el) { el.classList.add('is-visible'); });
    return;
  }
  var observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
  targets.forEach(function (el) { observer.observe(el); });
})();
</script>

</body>
</html>
