<div class="contact-page">
  <h1>お問い合わせ</h1>
  <p>ご質問やご不明点がございましたら、お気軽にお問い合わせください。</p>

  <form method="post" action="/contact#contact_form" id="contact_form">
    <label for="name">お名前</label>
    <input type="text" id="name" name="contact[name]" required>

    <label for="email">メールアドレス</label>
    <input type="email" id="email" name="contact[email]" required>

    <label for="message">お問い合わせ内容</label>
    <textarea id="message" name="contact[body]" required></textarea>

    <button type="submit">送信</button>
  </form>
</div>

<style>
  .contact-page { max-width: 600px; margin: auto; text-align: center; }
  form { display: flex; flex-direction: column; gap: 10px; }
  input, textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
  button { background-color: black; color: white; padding: 10px; border: none; cursor: pointer; }
</style>