スプリットスクリーン 50/50

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「スプリットスクリーン 50/50」の効果を追加してください。

# 追加してほしい効果
スプリットスクリーン 50/50（レイアウト & グリッド）
画面を左右50/50に分割し、それぞれ異なるトーンのコンテンツを配置するランディングページの定番構成。狭い画面では自動的に縦積みへ切り替わる。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- スプリットスクリーン 50/50：画面を左右に分割し、異なるトーンのコンテンツを対比させる -->
<div class="spl" id="splRoot">
  <section class="spl__half spl__half--light" data-half="individual">
    <div class="spl__inner">
      <p class="spl__eyebrow">FOR INDIVIDUALS</p>
      <h1>個人ではじめる</h1>
      <p class="spl__text">無料プランで今すぐ制作を開始。テンプレートとAIアシストで、初日から公開できます。</p>
      <button class="spl__cta spl__cta--light" type="button" data-cta>無料で始める</button>
    </div>
  </section>

  <section class="spl__half spl__half--dark" data-half="team">
    <div class="spl__inner">
      <p class="spl__eyebrow">FOR TEAMS</p>
      <h1>チームで拡張する</h1>
      <p class="spl__text">権限管理・監査ログ・SSOに対応したプランで、組織全体のワークフローを統一します。</p>
      <button class="spl__cta spl__cta--dark" type="button" data-cta>営業に相談する</button>
    </div>
  </section>
</div>

【CSS】
/* 全体：左右で明暗を対比させる 50/50 スプリットスクリーン */
* { 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 中央寄せで潰れるため必須 */
.spl { width: 100%; min-height: 100vh; display: flex; }

.spl__half {
  flex: 1 1 50%;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 56px 40px;
}
.spl__half--light { background: #f7f8fb; color: #10131d; --accent: #4338ca; }
.spl__half--dark  { background: #0b0e17; color: #eef0f5; --accent: #38bdf8; }

.spl__inner { max-width: 360px; }
.spl__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .24em; margin-bottom: 12px; color: var(--accent); }

.spl__inner h1 { font-size: clamp(22px, 3.4vw, 30px); margin-bottom: 14px; }
.spl__text { font-size: 14px; line-height: 1.8; margin-bottom: 22px; opacity: .82; }

.spl__cta {
  font-size: 13px; font-weight: 700; padding: 11px 22px; border-radius: 999px;
  border: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.spl__cta--light { background: #10131d; color: #fff; }
.spl__cta--light:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(16,19,29,.5); }
.spl__cta--dark { background: #7dd3fc; color: #0b0e17; }
.spl__cta--dark:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(125,211,252,.5); }

/* クリックした側を軽くハイライト（is-picked は JS が付け外し） */
.spl__half.is-picked { box-shadow: inset 0 0 0 3px var(--accent); }

/* 狭幅では縦積みに切り替え */
@media (max-width: 680px) {
  .spl { flex-direction: column; }
  .spl__half { min-height: 50vh; padding: 40px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .spl__cta { transition: none; }
}

【JavaScript】
// クリックした側を軽くハイライトする（レイアウト自体はCSSのみ・演出は最小限／null安全）
(() => {
  const root = document.getElementById('splRoot');
  if (!root) return;
  const halves = root.querySelectorAll('.spl__half');
  const buttons = root.querySelectorAll('[data-cta]');
  if (!halves.length || !buttons.length) return;

  buttons.forEach((btn) => {
    btn.addEventListener('click', () => {
      const half = btn.closest('.spl__half');
      if (!half) return;
      halves.forEach((h) => h.classList.remove('is-picked'));
      half.classList.add('is-picked');
    });
  });
})();

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

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