統計バンド・ヒーロー

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「統計バンド・ヒーロー」の効果を追加してください。

# 追加してほしい効果
統計バンド・ヒーロー（ヒーロー & タイトル）
コピーとCTAの下に4つの指標を並べたバンドを配置したヒーロー。バンドが画面に入ると数値が0からカウントアップし、導入実績を印象づけます。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- 統計バンド・ヒーロー：中央コピー+CTAの下に指標3〜4個のバンドを配置。数値はカウントアップ -->
<section class="hsb">
  <div class="hsb__glow" aria-hidden="true"></div>
  <div class="hsb__top">
    <span class="hsb__kicker">TRUSTED BY TEAMS WORLDWIDE</span>
    <h1 class="hsb__title">数字が語る、<br>導入企業からの信頼。</h1>
    <p class="hsb__sub">日々の業務データを1つの基盤にまとめ、意思決定のスピードを引き上げます。</p>
    <div class="hsb__cta">
      <a class="hsb__btn hsb__btn--primary" href="#" onclick="return false">無料で始める</a>
      <a class="hsb__btn hsb__btn--ghost" href="#" onclick="return false">導入事例を見る &rarr;</a>
    </div>
  </div>
  <div class="hsb__band" id="hsbBand">
    <div class="hsb__stat">
      <b class="hsb__num" data-target="12400" data-suffix="+">0</b>
      <span class="hsb__label">導入チーム数</span>
    </div>
    <div class="hsb__stat">
      <b class="hsb__num" data-target="99.98" data-decimals="2" data-suffix="%">0</b>
      <span class="hsb__label">稼働率</span>
    </div>
    <div class="hsb__stat">
      <b class="hsb__num" data-target="4.2" data-decimals="1" data-suffix="&times;">0</b>
      <span class="hsb__label">平均生産性向上</span>
    </div>
    <div class="hsb__stat">
      <b class="hsb__num" data-target="38" data-suffix="ヶ国">0</b>
      <span class="hsb__label">対応言語</span>
    </div>
  </div>
</section>

【CSS】
* { box-sizing: border-box; }
body {
  margin: 0;
  display: block;
  background: #0d1017;
  font-family: "Segoe UI", "Hiragino Sans", system-ui, sans-serif;
}

/* ルート：全幅フル。上段=コピー+CTA、下段=統計バンドの縦積み土台 */
.hsb {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #0d1017;
  color: #eef0fb;
  display: flex;
  flex-direction: column;
}

.hsb__glow {
  position: absolute; inset: -10%;
  background:
    radial-gradient(36% 42% at 22% 18%, rgba(56, 189, 248, .18), transparent 62%),
    radial-gradient(34% 40% at 82% 14%, rgba(129, 140, 248, .16), transparent 62%);
  animation: hsbDrift 17s ease-in-out infinite alternate;
}
@keyframes hsbDrift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-3%, 3%); }
}

.hsb__top {
  position: relative; z-index: 1;
  flex: 1;
  max-width: 720px; margin: 0 auto; width: 100%;
  padding: 56px 28px 40px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; justify-content: center;
}
.hsb__kicker {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #93c5fd;
}
.hsb__title {
  margin: 18px 0 0; font-size: clamp(27px, 4.4vw, 40px); font-weight: 800; line-height: 1.3;
  color: #f4f6ff;
}
.hsb__sub { margin: 14px auto 0; max-width: 440px; font-size: 14.5px; line-height: 1.75; color: #a6abc9; }
.hsb__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hsb__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; border-radius: 12px; font-size: 14px; font-weight: 700; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.hsb__btn--primary {
  color: #0a0c14; background: linear-gradient(135deg, #93c5fd, #a5b4fc);
  box-shadow: 0 12px 26px rgba(99, 102, 241, .28);
}
.hsb__btn--primary:hover { transform: translateY(-2px); }
.hsb__btn--ghost { color: #eef0fb; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .22); }
.hsb__btn--ghost:hover { border-color: rgba(255, 255, 255, .5); transform: translateY(-2px); }

/* --- 統計バンド --- */
.hsb__band {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03);
  padding: 28px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1080px; margin: 0 auto; width: 100%;
}
.hsb__stat { text-align: center; padding: 6px 8px; }
.hsb__num {
  display: block; font-size: clamp(24px, 3.2vw, 34px); font-weight: 800;
  color: #fff; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.hsb__label { display: block; margin-top: 6px; font-size: 12px; color: #9298bb; }

@media (max-width: 720px) {
  .hsb__top { padding: 40px 22px 30px; }
  .hsb__title { font-size: clamp(23px, 6.6vw, 28px); }
  .hsb__band { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .hsb__glow { animation: none; }
}

【JavaScript】
// 統計バンド・ヒーロー：バンドが画面に入ったら各数値を0からdata-targetまでカウントアップする。
(() => {
  const band = document.getElementById('hsbBand');
  if (!band) return;
  const nums = Array.from(band.querySelectorAll('.hsb__num'));
  if (!nums.length) return;

  const DURATION = 1600; // ms
  let played = false;

  const format = (el, value) => {
    const decimals = parseInt(el.getAttribute('data-decimals') || '0', 10);
    const suffix = el.getAttribute('data-suffix') || '';
    return value.toFixed(decimals) + suffix;
  };

  const run = () => {
    if (played) return;
    played = true;
    const start = performance.now();
    const targets = nums.map((el) => parseFloat(el.getAttribute('data-target') || '0'));

    const tick = (now) => {
      const t = Math.min(1, (now - start) / DURATION);
      // easeOutCubic
      const eased = 1 - Math.pow(1 - t, 3);
      nums.forEach((el, i) => {
        el.textContent = format(el, targets[i] * eased);
      });
      if (t < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
  };

  if ('IntersectionObserver' in window) {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((entry) => { if (entry.isIntersecting) run(); });
    }, { threshold: 0.3 });
    io.observe(band);
  } else {
    run();
  }
})();

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

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