<div class="charity-cafe-lp">
  <style>
    /* 全体の設定 */
    .charity-cafe-lp {
      font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
      color: #333;
      line-height: 1.8;
      background: #faf8f5;
      margin: 0;
      padding: 0;
      -webkit-font-smoothing: antialiased;
    }
    .charity-cafe-lp * { box-sizing: border-box; margin: 0; padding: 0; }
    
    .cc-section {
      padding: 60px 20px;
      max-width: 800px;
      margin: 0 auto;
    }
    
    /* ボタンデザイン */
    .cc-btn {
      display: inline-block;
      background: #e67e22; /* 温かいオレンジ */
      color: #ffffff !important;
      font-size: 1.1rem;
      font-weight: bold;
      padding: 16px 40px;
      border-radius: 50px;
      text-decoration: none;
      box-shadow: 0 8px 15px rgba(230, 126, 34, 0.3);
      transition: all 0.3s ease;
      margin-top: 15px;
    }
    .cc-btn:hover {
      background: #d35400;
      transform: translateY(-3px);
      box-shadow: 0 12px 20px rgba(230, 126, 34, 0.4);
    }
    .cc-microcopy {
      font-size: 0.85rem;
      color: #7f5539;
      margin-top: 10px;
      display: block;
    }

    /* 各セクションのタイトル */
    .cc-title {
      font-size: 1.4rem;
      color: #7f5539; /* コーヒーブラウン */
      text-align: center;
      margin-bottom: 30px;
      position: relative;
      font-weight: bold;
      line-height: 1.5;
    }
    .cc-title::after {
      content: '';
      display: block;
      width: 40px;
      height: 3px;
      background: #dda15e; /* ラテカラー */
      margin: 15px auto 0;
      border-radius: 2px;
    }

    /* ファーストビュー */
    .cc-hero {
      background: linear-gradient(135deg, #f5ebe0 0%, #e3d5ca 100%);
      padding: 80px 20px;
      text-align: center;
      border-radius: 0 0 30px 30px;
      position: relative;
    }
    .cc-hero h1 {
      font-size: 1.6rem;
      color: #7f5539;
      font-weight: 900;
      margin-bottom: 20px;
      line-height: 1.5;
    }
    .cc-hero p {
      font-size: 1rem;
      color: #9c6644;
      margin-bottom: 20px;
    }

    /* P:モヤモヤ（箇条書き） */
    .cc-problem {
      background: #ffffff;
      border-radius: 20px;
      padding: 40px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.03);
      margin: -20px auto 40px;
      position: relative;
      z-index: 2;
    }
    .cc-problem ul {
      list-style: none;
    }
    .cc-problem li {
      background: #fdfbf7;
      margin-bottom: 15px;
      padding: 15px 20px;
      border-radius: 10px;
      border-left: 5px solid #dda15e;
      font-weight: bold;
      color: #555;
    }

    /* 寄付先カード */
    .cc-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
      margin-top: 30px;
    }
    .cc-card {
      background: #ffffff;
      padding: 30px 20px;
      border-radius: 15px;
      text-align: center;
      box-shadow: 0 4px 15px rgba(0,0,0,0.03);
      border-top: 4px solid #bc6c25;
    }
    .cc-card h3 {
      font-size: 1.1rem;
      color: #7f5539;
      margin-bottom: 10px;
      line-height: 1.4;
    }
    .cc-card p {
      font-size: 0.9rem;
      color: #666;
    }

    /* FAQ */
    .cc-qa {
      background: #ffffff;
      border-radius: 15px;
      padding: 20px 25px;
      margin-bottom: 15px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    }
    .cc-q {
      font-weight: bold;
      color: #7f5539;
      margin-bottom: 10px;
      display: flex;
    }
    .cc-q::before { content: 'Q.'; color: #dda15e; margin-right: 10px; font-size: 1.2rem; }
    .cc-a { color: #555; display: flex; }
    .cc-a::before { content: 'A.'; color: #9c6644; margin-right: 10px; font-size: 1.2rem; font-weight: bold; }

    /* CTA (最後のオファー部分) */
    .cc-cta {
      background: linear-gradient(135deg, #7f5539 0%, #9c6644 100%);
      color: #ffffff;
      padding: 60px 20px;
      text-align: center;
      border-radius: 30px;
      margin: 40px auto;
      max-width: 800px;
    }
    .cc-cta h2 {
      color: #ffffff;
      font-size: 1.5rem;
      margin-bottom: 15px;
      line-height: 1.4;
    }
    .cc-cta p {
      margin-bottom: 30px;
      color: #f5ebe0;
    }
    .cc-text-center { text-align: center; }

    /* スマホ対応 */
    @media (max-width: 600px) {
      .cc-hero h1 { font-size: 1.4rem; }
      .cc-title { font-size: 1.3rem; }
      .cc-section { padding: 40px 15px; }
      .cc-btn { width: 100%; white-space: normal; }
      .cc-problem { padding: 30px 15px; margin: 0 10px; }
    }
  </style>

  <!-- ファーストビュー -->
  <div class="cc-hero">
    <h1>楽しく話して、ちょっといいコト。<br>参加するだけで寄付ができるカフェ会</h1>
    <p>美味しいコーヒーと楽しいおしゃべりが、誰かの支援に繋がる。<br>気軽なチャリティ・カフェ会です。</p>
    <div>
      <a href="#link" class="cc-btn">今すぐカフェ会に申し込む</a>
      <span class="cc-microcopy">※入力はたったの1分で完了します。</span>
    </div>
  </div>

  <!-- P（Problem） -->
  <div class="cc-section cc-problem">
    <h2 class="cc-title">こんなモヤモヤ、抱えていませんか？</h2>
    <ul>
      <li>「会社と家の往復で、新しい出会いがない」</li>
      <li>「ボランティアや寄付に興味はあるけど、何から始めればいいか分からない」</li>
      <li>「無理なく社会貢献しつつ、同じ価値観の仲間と出会いたい」</li>
    </ul>
  </div>

  <!-- A（Affinity） -->
  <div class="cc-section cc-text-center">
    <h2 class="cc-title">その優しい気持ち、日常の中でカタチにできます。</h2>
    <p>「誰かの役に立ちたい」と思っても、時間やお金を理由に最初の一歩を踏み出せない方はたくさんいます。<br>まとまった寄付や特別なスキルは必要ありません。もっと日常の延長線上で、肩の力を抜いて社会と繋がる場所があってもいいと思いませんか？</p>
  </div>

  <!-- S（Solution） -->
  <div class="cc-section cc-text-center">
    <h2 class="cc-title">おしゃべりが支援に変わる<br>「チャリティ・カフェ会」</h2>
    <p>私たちが提案するのは、参加するだけで社会貢献になるカフェ会です。<br>やることは、カフェが好きな方とリラックスして会話を楽しむだけ。あなたの充実したカフェタイムが、そのまま社会を良くする一歩になります。</p>
  </div>

  <!-- 寄付先 -->
  <div class="cc-section">
    <h2 class="cc-title">あなたの参加費が以下の活動に寄付されます</h2>
    <p class="cc-text-center" style="color:#d35400; font-weight:bold; font-size: 0.9rem;">※当日、ご自身で支援先をお選びいただけます。</p>
    
    <div class="cc-cards">
      <div class="cc-card">
        <h3>福岡市内の<br>こども食堂</h3>
        <p>地域の子どもたちの居場所と食事の支援</p>
      </div>
      <div class="cc-card">
        <h3>能登半島地震の<br>復興支援</h3>
        <p>被災地の継続的なサポート</p>
      </div>
      <div class="cc-card">
        <h3>環境保全<br>活動</h3>
        <p>豊かな自然を未来へ繋ぐアクション</p>
      </div>
    </div>
  </div>

  <!-- FAQ -->
  <div class="cc-section">
    <h2 class="cc-title">参加前のよくあるご質問</h2>
    
    <div class="cc-qa">
      <div class="cc-q">一人での参加でも浮きませんか？</div>
      <div class="cc-a">はい、大丈夫です！毎回ほとんどの方がお一人での参加です。すぐに打ち解けられるよう主催者がサポートします。</div>
    </div>
    
    <div class="cc-qa">
      <div class="cc-q">カフェ会に参加するのが初めてで不安です。</div>
      <div class="cc-a">初参加の方も大歓迎です。サポートいたしますので、話すのが少し苦手な方も安心してお越しください。</div>
    </div>
    
    <div class="cc-qa">
      <div class="cc-q">寄付やボランティアの専門知識は必要ですか？</div>
      <div class="cc-a">全く必要ありません。「楽しくおしゃべりすること」がそのまま支援に繋がる仕組みですので、気軽な気持ちでご参加ください。</div>
    </div>
    
    <div class="cc-qa">
      <div class="cc-q">営業や勧誘目的の人はきませんか？</div>
      <div class="cc-a">当会では、宗教やネットワークビジネス、過度な営業や勧誘活動は一切禁止しております。純粋な交流の場として安心してお楽しみいただけます。</div>
    </div>
  </div>

  <!-- CTA（最後の申込） -->
  <div class="cc-section">
    <div class="cc-cta">
      <h2>あなたの参加が、誰かの笑顔に繋がります。</h2>
      <p>「面白そう」「ちょっと話してみたい」<br>その直感を大切に、まずは一度遊びに来てください。<br>定員になり次第締め切りとなりますので、<br>お申し込みはお早めに！</p>
      
      <!-- 実際の申込みフォームのURLを href="#link" に書き換えてください -->
      <a href="#link" class="cc-btn" style="background:#ffffff; color:#d35400 !important;">今すぐカフェ会に申し込む</a>
      <span class="cc-microcopy" style="color:#f5ebe0;">※入力はたったの1分で完了します。</span>
    </div>
  </div>

</div>
