ロードマップ

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

# 追加してほしい効果
ロードマップ（タイムライン & 404）
Now・Next・Laterの3列に分けたカンバン風ロードマップ。ステータスごとに色分けし、進行中タスクには達成率を示す進捗バーが伸びます。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- ロードマップ: Now / Next / Later の3列カンバンで開発状況を公開 -->
<section class="tlr">
  <div class="tlr__card">
    <div class="tlr__head">
      <h2 class="tlr__title">プロダクトロードマップ</h2>
      <p class="tlr__sub">開発中の機能をステータス別に公開しています</p>
    </div>

    <div class="tlr__board">
      <div class="tlr__col tlr__col--now">
        <div class="tlr__col-head">
          <span class="tlr__dot" aria-hidden="true"></span>Now
          <span class="tlr__count">2</span>
        </div>
        <ol class="tlr__cards">
          <li class="tlr__task">
            <p class="tlr__task-title">ダークモード対応</p>
            <span class="tlr__tag">UI</span>
            <div class="tlr__progress" role="img" aria-label="進捗70%">
              <span class="tlr__progress-bar" style="--p:70%"></span>
            </div>
          </li>
          <li class="tlr__task">
            <p class="tlr__task-title">検索の高速化</p>
            <span class="tlr__tag">Performance</span>
            <div class="tlr__progress" role="img" aria-label="進捗40%">
              <span class="tlr__progress-bar" style="--p:40%"></span>
            </div>
          </li>
        </ol>
      </div>

      <div class="tlr__col tlr__col--next">
        <div class="tlr__col-head">
          <span class="tlr__dot" aria-hidden="true"></span>Next
          <span class="tlr__count">2</span>
        </div>
        <ol class="tlr__cards">
          <li class="tlr__task">
            <p class="tlr__task-title">モバイルアプリβ版</p>
            <span class="tlr__tag">Mobile</span>
          </li>
          <li class="tlr__task">
            <p class="tlr__task-title">多言語対応（英語）</p>
            <span class="tlr__tag">i18n</span>
          </li>
        </ol>
      </div>

      <div class="tlr__col tlr__col--later">
        <div class="tlr__col-head">
          <span class="tlr__dot" aria-hidden="true"></span>Later
          <span class="tlr__count">3</span>
        </div>
        <ol class="tlr__cards">
          <li class="tlr__task">
            <p class="tlr__task-title">AIによる自動要約</p>
            <span class="tlr__tag">AI</span>
          </li>
          <li class="tlr__task">
            <p class="tlr__task-title">チーム請求プラン</p>
            <span class="tlr__tag">Billing</span>
          </li>
          <li class="tlr__task">
            <p class="tlr__task-title">API公開</p>
            <span class="tlr__tag">Developer</span>
          </li>
        </ol>
      </div>
    </div>
  </div>
</section>

【CSS】
/* ロードマップ: Now / Next / Later のカンバン風ボード */
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 26px 16px;
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", system-ui, sans-serif;
  background: linear-gradient(160deg, #f4f5fa 0%, #e9ebf5 100%);
  color: #1e2233;
}

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

.tlr__card {
  width: min(860px, 100%);
  background: #fff;
  border-radius: 20px;
  padding: 22px 22px 20px;
  box-shadow: 0 26px 56px -28px rgba(24, 28, 60, .28), 0 2px 8px rgba(24, 28, 60, .05);
}

.tlr__head { margin-bottom: 16px; }
.tlr__title { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.tlr__sub { margin: 0; font-size: 12.5px; color: #8b90ab; }

.tlr__board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.tlr__col {
  border-radius: 14px;
  padding: 12px 12px 14px;
  background: #f6f7fb;
  border: 1px solid #eceef6;
}
.tlr__col--now { background: #eefaf3; border-color: #d9f2e3; }
.tlr__col--next { background: #fff8ec; border-color: #f6e8c9; }
.tlr__col--later { background: #f4f5f9; border-color: #e6e8f1; }

.tlr__col-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #454a63;
  margin-bottom: 10px;
}
.tlr__dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa0ba; flex: 0 0 auto; }
.tlr__col--now .tlr__dot { background: #34c17c; box-shadow: 0 0 0 3px rgba(52, 193, 124, .18); animation: tlrDotPulse 1.8s ease-in-out infinite; }
.tlr__col--next .tlr__dot { background: #eda63c; }
.tlr__col--later .tlr__dot { background: #9aa0ba; }
.tlr__count {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: #8b90ab;
  background: rgba(139, 144, 171, .14);
  border-radius: 999px;
  padding: 1px 7px;
}

.tlr__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.tlr__cards::-webkit-scrollbar { width: 5px; }
.tlr__cards::-webkit-scrollbar-thumb { background: rgba(139, 144, 171, .3); border-radius: 999px; }

.tlr__task {
  background: #fff;
  border-radius: 10px;
  padding: 10px 11px;
  box-shadow: 0 8px 18px -12px rgba(24, 28, 60, .3);
  opacity: 0;
  transform: translateY(10px);
  animation: tlrIn .5s cubic-bezier(.22, 1, .36, 1) forwards;
}
.tlr__cards > .tlr__task:nth-child(1) { animation-delay: .08s; }
.tlr__cards > .tlr__task:nth-child(2) { animation-delay: .18s; }
.tlr__cards > .tlr__task:nth-child(3) { animation-delay: .28s; }

.tlr__task-title { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: #23273a; }
.tlr__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #5a6ee0;
  background: rgba(90, 110, 224, .1);
  padding: 2px 8px;
  border-radius: 999px;
}
.tlr__col--now .tlr__tag { color: #1f9d63; background: rgba(31, 157, 99, .12); }
.tlr__col--next .tlr__tag { color: #c07f16; background: rgba(192, 127, 22, .12); }

.tlr__progress {
  margin-top: 8px;
  height: 5px;
  border-radius: 999px;
  background: #edeff6;
  overflow: hidden;
}
.tlr__progress-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #34c17c, #22d3ee);
  animation: tlrFill 1s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: .4s;
}

@keyframes tlrIn { to { opacity: 1; transform: translateY(0); } }
@keyframes tlrFill { to { width: var(--p, 0%); } }
@keyframes tlrDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(52, 193, 124, .18); }
  50% { box-shadow: 0 0 0 6px rgba(52, 193, 124, 0); }
}

@media (max-width: 640px) {
  .tlr__card { padding: 18px 16px 16px; border-radius: 16px; }
  .tlr__board { grid-template-columns: 1fr; }
  .tlr__cards { max-height: none; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .tlr__task { animation: none !important; opacity: 1; transform: none; }
  .tlr__progress-bar { animation: none !important; width: var(--p, 0%); }
  .tlr__col--now .tlr__dot { animation: none; }
}

【JavaScript】
// ロードマップ: 演出はCSSの読み込み時アニメーション（カード出現・進捗バー充填）のみで完結（JS不要）

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

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