フルブリード交互セクション

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「フルブリード交互セクション」の効果を追加してください。

# 追加してほしい効果
フルブリード交互セクション（レイアウト & グリッド）
全幅の帯セクションが明るい配色と暗い配色で交互に並ぶランディングページ構成。帯の中身は中央のmax-widthに収まり、スクロールで順にふわりと現れる。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- フルブリード交互セクション：帯が明暗交互に全幅で並び、中身は中央のmax-widthに収まる -->
<div class="fba" id="fbaRoot">
  <section class="fba__band fba__band--dark" data-reveal>
    <div class="fba__inner fba__inner--hero">
      <span class="fba__eyebrow">PRODUCT LAUNCH</span>
      <h1>もっとシンプルに、<br>もっと速く。</h1>
      <p>チームの作業を1つの画面に集約するワークスペース。今日から無料で始められます。</p>
      <div class="fba__cta-row">
        <button class="fba__btn fba__btn--solid" type="button">無料ではじめる</button>
        <button class="fba__btn fba__btn--ghost" type="button">デモを見る</button>
      </div>
    </div>
  </section>

  <section class="fba__band fba__band--light" data-reveal>
    <div class="fba__inner">
      <span class="fba__eyebrow fba__eyebrow--dark">FEATURES</span>
      <h2>あらゆる作業を、迷わず。</h2>
      <div class="fba__cards">
        <article class="fba__card"><span class="fba__ico">◆</span><h3>統合検索</h3><p>すべてのドキュメントを横断して瞬時に検索。</p></article>
        <article class="fba__card"><span class="fba__ico">◇</span><h3>自動整理</h3><p>タグ付けとフォルダ分けをAIが自動で提案。</p></article>
        <article class="fba__card"><span class="fba__ico">◈</span><h3>共同編集</h3><p>複数人での同時編集とコメントに対応。</p></article>
      </div>
    </div>
  </section>

  <section class="fba__band fba__band--dark" data-reveal>
    <div class="fba__inner fba__inner--stats">
      <span class="fba__eyebrow">BY THE NUMBERS</span>
      <div class="fba__stats">
        <div><b>12,400+</b><span>導入チーム</span></div>
        <div><b>99.98%</b><span>稼働率</span></div>
        <div><b>4.8 / 5</b><span>平均評価</span></div>
      </div>
    </div>
  </section>

  <section class="fba__band fba__band--light" data-reveal>
    <div class="fba__inner fba__inner--quote">
      <span class="fba__eyebrow fba__eyebrow--dark">VOICE</span>
      <blockquote>「導入から1週間で、チーム内の確認作業が半分になりました。」</blockquote>
      <p class="fba__quoter">— 山田 彩子 / プロダクトマネージャー</p>
    </div>
  </section>

  <section class="fba__band fba__band--dark" data-reveal>
    <div class="fba__inner fba__inner--cta">
      <h2>今すぐ、始めてみませんか。</h2>
      <p>クレジットカード登録不要。いつでもキャンセルできます。</p>
      <button class="fba__btn fba__btn--solid" type="button">無料アカウントを作成</button>
    </div>
  </section>
</div>

【CSS】
/* 全体：全幅の帯セクションが明暗交互に並ぶランディングページ構成 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Hiragino Sans", system-ui, sans-serif;
  min-height: 100vh;
  display: block; /* ビルダーの flex 中央寄せを解除し、帯をフルブリードで表示 */
}

/* ルート：width:100% が無いと親の flex 中央寄せで潰れるため必須 */
.fba { width: 100%; }

.fba__band { width: 100%; padding: clamp(52px, 8vw, 88px) 20px; }
.fba__band--dark { background: #0b0e17; color: #eef0f5; }
.fba__band--light { background: #f6f7fb; color: #14171f; }

/* 中身は中央 max-width に収める */
.fba__inner { width: min(880px, 100%); margin: 0 auto; text-align: center; }
.fba__inner--hero h1 { font-size: clamp(28px, 5vw, 46px); line-height: 1.3; margin-bottom: 16px; }
.fba__inner--hero p { font-size: 15px; line-height: 1.8; opacity: .78; max-width: 46ch; margin: 0 auto 26px; }

.fba__eyebrow { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .26em; color: #7dd3fc; margin-bottom: 14px; }
.fba__eyebrow--dark { color: #4338ca; }

.fba__band--light h2, .fba__band--dark h2 { font-size: clamp(22px, 3.6vw, 32px); margin-bottom: 28px; }

.fba__cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.fba__btn {
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 12px 26px; border-radius: 999px; border: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.fba__btn--solid { background: #7dd3fc; color: #0b0e17; }
.fba__btn--solid:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(125, 211, 252, .5); }
.fba__btn--ghost { background: transparent; color: #eef0f5; border: 1px solid rgba(255, 255, 255, .3); }
.fba__btn--ghost:hover { border-color: rgba(255, 255, 255, .6); }

/* 機能カード */
.fba__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; margin-top: 8px; }
.fba__card { background: #fff; border: 1px solid #e5e8f0; border-radius: 16px; padding: 22px; }
.fba__ico { font-size: 20px; color: #4338ca; }
.fba__card h3 { font-size: 15px; font-weight: 800; margin: 10px 0 6px; }
.fba__card p { font-size: 13px; line-height: 1.7; color: #565f77; }

/* 統計 */
.fba__stats { display: flex; justify-content: center; gap: clamp(28px, 6vw, 64px); flex-wrap: wrap; }
.fba__stats div { display: flex; flex-direction: column; gap: 6px; }
.fba__stats b { font-size: clamp(24px, 4vw, 34px); font-weight: 800; color: #7dd3fc; }
.fba__stats span { font-size: 12px; opacity: .7; letter-spacing: .04em; }

/* 引用 */
.fba__inner--quote blockquote { font-size: clamp(18px, 2.6vw, 24px); line-height: 1.7; font-weight: 700; margin-bottom: 14px; }
.fba__quoter { font-size: 13px; color: #565f77; }

/* CTA */
.fba__inner--cta p { font-size: 14px; opacity: .75; margin-bottom: 24px; }

/* スクロールで軽くフェードイン（is-visible は JS が付与） */
.fba__band[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.fba__band[data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .fba__cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fba__band[data-reveal] { opacity: 1; transform: none; transition: none; }
  .fba__btn { transition: none; }
}

【JavaScript】
// 帯セクションが画面に入ったらフェードイン表示（IntersectionObserver・null安全）
(() => {
  const sections = document.querySelectorAll('[data-reveal]');
  if (!sections.length) return;

  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reduceMotion || typeof IntersectionObserver === 'undefined') {
    sections.forEach((s) => s.classList.add('is-visible'));
    return;
  }

  const io = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        io.unobserve(entry.target);
      }
    });
  }, { threshold: 0.15 });

  sections.forEach((s) => io.observe(s));
})();

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。