@charset "UTF-8";

<section class="hero">
  <div class="hero-inner">
    <h1 class="catch">栃木の畑から、その週いちばん良い状態の野菜だけをお届けします。</h1>
    <p class="sub">土の温度や光の加減を見て、ちょうどいいタイミングで収穫・発送しています。</p>
    <div class="cta-wrap">
      <a href="/contact" class="btn btn-primary">お問い合わせ</a>
      <a href="/services" class="btn btn-ghost">サービスを見る</a>
    </div>
  </div>
</section>

<section class="one-container one-section">
  <div class="one-eyebrow">services</div>
  <h2 class="one-title">サービス一覧</h2>
  <p class="one-lead">レンタル畑と野菜直送、２つの楽しみ方をご用意しています。</p>

  <div class="service-grid">
    <article class="card">
      <span class="badge">レンタル畑</span>
      <h3>自分の区画で、季節の野菜を育てる</h3>
      <p class="desc">土づくりからサポート。家族で週末に土に触れる体験を。</p>
      <ul class="list-check">
        <li>区画レンタルと栽培アドバイス</li>
        <li>苗・種の用意もご相談可</li>
      </ul>
    </article>

    <article class="card">
      <span class="badge">野菜お届け</span>
      <h3>朝どれ中心の旬セットを定期便で</h3>
      <p class="desc">その週いちばん良い状態の野菜を、箱に詰めてお送りします。</p>
      <ul class="list-check">
        <li>中身は季節で変わります</li>
        <li>保存のコツも同封</li>
      </ul>
    </article>
  </div>
</section>

<section class="one-container one-section">
  <div class="one-eyebrow">news</div>
  <h2 class="one-title">お知らせ</h2>
  <div class="news-list">
    <a class="news-item" href="#">
      <div class="news-date">2025-11-07</div>
      <div>
        <div class="news-title">【本日の収穫】ほうれん草が甘くなっています</div>
        <div class="news-meta">栃木の朝どれ / 旬の変化</div>
      </div>
    </a>
  </div>
</section>

<section class="one-container one-section">
  <div class="one-eyebrow">faq</div>
  <h2 class="one-title">よくある質問</h2>
  <div class="faq">
    <div class="faq-item open">
      <div class="faq-q">いつ発送されますか？</div>
      <div class="faq-a">その週でもっとも状態が良い日に収穫し、当日発送します（固定曜日ではありません）。</div>
    </div>
    <div class="faq-item">
      <div class="faq-q">保存はどうすれば良いですか？</div>
      <div class="faq-a">さつまいもは13〜15℃の冷暗所に。土は洗わず、1本ずつ新聞紙で包んで段ボールへ。10℃以下は避けてください。</div>
    </div>
  </div>
</section>

<section class="one-container one-section">
  <div class="cta">
    <h3>畑の状況を見ながら、無理のない範囲でご案内します。</h3>
    <p>「ちょっと話だけ」でも大丈夫です。いまの畑の状態を踏まえてご提案します。</p>
    <a href="/contact" class="btn btn-primary">お問い合わせはこちら</a>
  </div>
</section>