ミニアジェンダ

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

# 追加してほしい効果
ミニアジェンダ（カレンダー & ステップ）
本日、2026年7月15日の予定を時刻順に並べ、カテゴリごとに色分けした帯とチェックで完了・未完了を切り替えられる、シンプルなミニアジェンダです。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- ミニアジェンダ: 2026年7月15日(水)の予定を時刻順に並べ、カテゴリごとに色分けした一覧です -->
<div class="cma-stage">
  <section class="cma-card" aria-label="本日の予定">
    <header class="cma-head">
      <p class="cma-eyebrow">本日の予定</p>
      <h2 class="cma-date">2026年7月15日（水）</h2>
    </header>

    <ul class="cma-list" id="cmaList">
      <li class="cma-item cma-item--done" data-cat="health">
        <button type="button" class="cma-check" aria-pressed="true" aria-label="「ラジオ体操」の完了/未完了を切り替え">
          <span class="cma-check__mark" aria-hidden="true">✓</span>
        </button>
        <span class="cma-item__bar" aria-hidden="true"></span>
        <div class="cma-item__body">
          <p class="cma-item__time">08:30–09:00</p>
          <p class="cma-item__title">ラジオ体操</p>
        </div>
      </li>

      <li class="cma-item cma-item--done" data-cat="work">
        <button type="button" class="cma-check" aria-pressed="true" aria-label="「朝会 / デイリースタンドアップ」の完了/未完了を切り替え">
          <span class="cma-check__mark" aria-hidden="true">✓</span>
        </button>
        <span class="cma-item__bar" aria-hidden="true"></span>
        <div class="cma-item__body">
          <p class="cma-item__time">09:30–10:30</p>
          <p class="cma-item__title">朝会 / デイリースタンドアップ</p>
        </div>
      </li>

      <li class="cma-item cma-item--done" data-cat="work">
        <button type="button" class="cma-check" aria-pressed="true" aria-label="「デザインレビュー」の完了/未完了を切り替え">
          <span class="cma-check__mark" aria-hidden="true">✓</span>
        </button>
        <span class="cma-item__bar" aria-hidden="true"></span>
        <div class="cma-item__body">
          <p class="cma-item__time">11:00–12:00</p>
          <p class="cma-item__title">デザインレビュー</p>
        </div>
      </li>

      <li class="cma-item cma-item--done" data-cat="personal">
        <button type="button" class="cma-check" aria-pressed="true" aria-label="「ランチ休憩」の完了/未完了を切り替え">
          <span class="cma-check__mark" aria-hidden="true">✓</span>
        </button>
        <span class="cma-item__bar" aria-hidden="true"></span>
        <div class="cma-item__body">
          <p class="cma-item__time">12:00–13:00</p>
          <p class="cma-item__title">ランチ休憩</p>
        </div>
      </li>

      <li class="cma-now" aria-hidden="true">
        <span class="cma-now__dot"></span>
        <span class="cma-now__label">現在 13:20</span>
        <span class="cma-now__line"></span>
      </li>

      <li class="cma-item cma-item--next" data-cat="work">
        <button type="button" class="cma-check" aria-pressed="false" aria-label="「クライアント打ち合わせ」の完了/未完了を切り替え">
          <span class="cma-check__mark" aria-hidden="true">✓</span>
        </button>
        <span class="cma-item__bar" aria-hidden="true"></span>
        <div class="cma-item__body">
          <p class="cma-item__time">13:30–14:30 <span class="cma-badge">NEXT</span></p>
          <p class="cma-item__title">クライアント打ち合わせ</p>
        </div>
      </li>

      <li class="cma-item" data-cat="personal">
        <button type="button" class="cma-check" aria-pressed="false" aria-label="「誕生日プレゼント発送」の完了/未完了を切り替え">
          <span class="cma-check__mark" aria-hidden="true">✓</span>
        </button>
        <span class="cma-item__bar" aria-hidden="true"></span>
        <div class="cma-item__body">
          <p class="cma-item__time">17:00–17:30</p>
          <p class="cma-item__title">誕生日プレゼント発送</p>
        </div>
      </li>

      <li class="cma-item" data-cat="health">
        <button type="button" class="cma-check" aria-pressed="false" aria-label="「ヨガクラス」の完了/未完了を切り替え">
          <span class="cma-check__mark" aria-hidden="true">✓</span>
        </button>
        <span class="cma-item__bar" aria-hidden="true"></span>
        <div class="cma-item__body">
          <p class="cma-item__time">19:00–20:00</p>
          <p class="cma-item__title">ヨガクラス</p>
        </div>
      </li>
    </ul>
  </section>
</div>

【CSS】
/* ミニアジェンダ: カテゴリ色の帯とチェックで並ぶ、本日の予定一覧カード */
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 20px;
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(79, 70, 229, .10) 0%, transparent 50%),
    radial-gradient(circle at 88% 94%, rgba(184, 134, 63, .12) 0%, transparent 50%),
    #f7f5f1;
  color: #26232c;
}

.cma-stage { width: 100%; max-width: 380px; }

.cma-card {
  background: #fff;
  border: 1px solid #e9e5df;
  border-radius: 22px;
  padding: 24px 22px 20px;
  box-shadow: 0 26px 60px -30px rgba(38, 35, 44, .35), 0 2px 10px rgba(38, 35, 44, .05);
}

.cma-head { margin-bottom: 16px; }
.cma-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #b8863f;
  text-transform: uppercase;
}
.cma-date { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .02em; color: #26232c; }

.cma-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.cma-item {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 9px 10px 9px 6px;
  border-radius: 14px;
  background: #fbfaf8;
  transition: background .15s ease, opacity .15s ease;
}

.cma-check {
  flex: none;
  align-self: center;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1.6px solid #ddd7cd;
  border-radius: 50%;
  background: #fff;
  color: transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cma-check:hover { border-color: #4f46e5; }
.cma-check:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
.cma-check__mark { font-size: 12px; line-height: 1; }
.cma-check[aria-pressed="true"] { background: #4f46e5; border-color: #4f46e5; color: #fff; }

.cma-item__bar { flex: none; width: 4px; border-radius: 3px; background: #a29d8f; }
.cma-item[data-cat="work"] .cma-item__bar { background: #4f46e5; }
.cma-item[data-cat="personal"] .cma-item__bar { background: #c2515f; }
.cma-item[data-cat="health"] .cma-item__bar { background: #0f9d84; }

.cma-item__body { flex: 1; min-width: 0; }
.cma-item__time {
  margin: 0 0 2px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: #8f8a80;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cma-item__title { margin: 0; font-size: 13.5px; color: #34303a; font-weight: 600; }

.cma-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
  background: #b8863f;
  padding: 1.5px 6px;
  border-radius: 999px;
}

.cma-item--done { opacity: .55; }
.cma-item--done .cma-item__title { text-decoration: line-through; text-decoration-color: #b6b1a8; }

.cma-item--next { background: #eef0fb; box-shadow: inset 0 0 0 1.4px rgba(79, 70, 229, .35); }

/* 「現在時刻」の区切り線 */
.cma-now {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0;
  padding: 0 2px;
}
.cma-now__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b8863f;
  box-shadow: 0 0 0 3px rgba(184, 134, 63, .18);
  animation: cma-pulse 2.2s ease-in-out infinite;
}
.cma-now__label {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #b8863f;
}
.cma-now__line { flex: 1; height: 1px; background: repeating-linear-gradient(to right, #d9c8a8 0 5px, transparent 5px 9px); }

@keyframes cma-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(184, 134, 63, .18); }
  50% { box-shadow: 0 0 0 6px rgba(184, 134, 63, .06); }
}

@media (max-width: 380px) {
  .cma-card { padding: 20px 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cma-now__dot { animation: none; }
  .cma-item, .cma-check { transition: none; }
}

【JavaScript】
// ミニアジェンダ: 各予定のチェックをクリックすると完了/未完了を切り替える(見た目上の演出)
(() => {
  const list = document.getElementById('cmaList');
  if (!list) return; // null安全

  const items = Array.from(list.querySelectorAll('.cma-item'));
  if (!items.length) return;

  items.forEach((item) => {
    const check = item.querySelector('.cma-check');
    if (!check) return;
    check.addEventListener('click', () => {
      const wasDone = check.getAttribute('aria-pressed') === 'true';
      check.setAttribute('aria-pressed', wasDone ? 'false' : 'true');
      item.classList.toggle('cma-item--done', !wasDone);
    });
  });
})();

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

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