縦タイムライン

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「縦タイムライン」の効果を追加してください。

# 追加してほしい効果
縦タイムライン（タイムライン & 404）
左に伸びる縦線とノードで年表をたどるタイムライン。日付・見出し・説明を並べ、スクロールに合わせて各項目が順にふわっと現れます。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- 縦タイムライン: 左の縦線とノードを辿って年表を読む -->
<section class="tlv">
  <div class="tlv__card">
    <p class="tlv__eyebrow">OUR JOURNEY</p>
    <h2 class="tlv__title">プロダクト開発ヒストリー</h2>

    <div class="tlv__scroll" tabindex="0" role="region" aria-label="開発の歩み（スクロールで続きを表示）">
      <ol class="tlv__list">
        <li class="tlv__item">
          <span class="tlv__dot" aria-hidden="true"></span>
          <time class="tlv__date">2022年1月</time>
          <h3 class="tlv__heading">プロジェクト始動</h3>
          <p class="tlv__desc">小さなチーム3人でアイデアを検証し、最初のプロトタイプを完成させました。</p>
        </li>
        <li class="tlv__item">
          <span class="tlv__dot" aria-hidden="true"></span>
          <time class="tlv__date">2022年8月</time>
          <h3 class="tlv__heading">クローズドβを公開</h3>
          <p class="tlv__desc">限定100名のユーザーへ先行提供し、率直なフィードバックを集めました。</p>
        </li>
        <li class="tlv__item">
          <span class="tlv__dot" aria-hidden="true"></span>
          <time class="tlv__date">2023年3月</time>
          <h3 class="tlv__heading">正式ローンチ</h3>
          <p class="tlv__desc">半年間の改善を経て一般公開。初月だけで1,000人が登録しました。</p>
        </li>
        <li class="tlv__item">
          <span class="tlv__dot" aria-hidden="true"></span>
          <time class="tlv__date">2023年11月</time>
          <h3 class="tlv__heading">シリーズAを完了</h3>
          <p class="tlv__desc">資金調達に成功し、開発チームを5名から12名へ拡大しました。</p>
        </li>
        <li class="tlv__item">
          <span class="tlv__dot" aria-hidden="true"></span>
          <time class="tlv__date">2024年9月</time>
          <h3 class="tlv__heading">海外展開を開始</h3>
          <p class="tlv__desc">英語・韓国語に対応し、アジア圏のユーザーへ提供を始めました。</p>
        </li>
        <li class="tlv__item">
          <span class="tlv__dot" aria-hidden="true"></span>
          <time class="tlv__date">2025年6月</time>
          <h3 class="tlv__heading">利用者10万人を突破</h3>
          <p class="tlv__desc">累計登録ユーザーが10万人を超え、業界内での存在感を高めています。</p>
        </li>
      </ol>
    </div>
  </div>
</section>

【CSS】
/* 縦タイムライン: 左の縦線 + ノードで年表を辿るカード */
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 30px 16px;
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", system-ui, sans-serif;
  background: radial-gradient(120% 100% at 20% -10%, #1b2245 0%, #0b0e1a 60%);
  color: #e9ecf7;
}

/* ルート: 全幅 */
.tlv { width: 100%; display: grid; place-items: center; }

.tlv__card {
  width: min(640px, 100%);
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  padding: 28px 26px 10px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}

.tlv__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  color: #7fe0d3;
}
.tlv__title {
  margin: 0 0 22px;
  font-size: clamp(19px, 3vw, 23px);
  font-weight: 800;
  letter-spacing: -.01em;
}

/* 続きはスクロールで読める、上限高さの内部領域 */
.tlv__scroll {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 224, 211, .4) transparent;
}
.tlv__scroll::-webkit-scrollbar { width: 6px; }
.tlv__scroll::-webkit-scrollbar-thumb { background: rgba(127, 224, 211, .35); border-radius: 999px; }

.tlv__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 2px 0 20px 26px;
}
/* 縦線 */
.tlv__list::before {
  content: "";
  position: absolute;
  left: 5px; top: 6px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, #59e6cf, #6d7dfb 55%, rgba(109, 125, 251, .15));
  border-radius: 2px;
}

.tlv__item {
  position: relative;
  padding: 0 0 26px 20px;
  opacity: 0;
  transform: translateY(14px);
  animation: tlvIn .6s cubic-bezier(.22, 1, .36, 1) forwards;
}
.tlv__item:last-child { padding-bottom: 4px; }
.tlv__item:nth-child(1) { animation-delay: .05s; }
.tlv__item:nth-child(2) { animation-delay: .16s; }
.tlv__item:nth-child(3) { animation-delay: .27s; }
.tlv__item:nth-child(4) { animation-delay: .38s; }
.tlv__item:nth-child(5) { animation-delay: .49s; }
.tlv__item:nth-child(6) { animation-delay: .60s; }

.tlv__dot {
  position: absolute;
  left: -26px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #59e6cf, #6d7dfb);
  box-shadow: 0 0 0 4px rgba(89, 230, 207, .16);
}

.tlv__date {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #8f97c9;
  margin-bottom: 4px;
}
.tlv__heading {
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 800;
  color: #f3f5ff;
}
.tlv__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #b7bce0;
}

@keyframes tlvIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .tlv__card { padding: 22px 18px 6px; border-radius: 16px; }
  .tlv__title { margin-bottom: 18px; }
  .tlv__scroll { max-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .tlv__item { animation: none !important; opacity: 1; transform: none; }
}

【JavaScript】
// 縦タイムライン: 演出はCSSの読み込み時アニメーションのみで完結（JS不要）

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

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