/* =========================================
   企画紹介（色凡例）: ページに挿しやすい軽量CSS
   ======================================= */
:root{ --ink:#111827; --card:#fff; }

.schedule-legend{
  width:min(520px, 92vw);
  margin:22px auto 10px;
  background:var(--card);
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:16px 18px 20px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.legend-title{
  margin:0 0 12px;
  text-align:center;
  font-size:1.28rem;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--ink);
}
.legend-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:12px;
}
.legend-item{ display:flex; justify-content:center; }
.legend-pill{
  display:inline-block;
  min-width: 280px;
  padding:12px 18px;
  border-radius:14px;
  border:4px solid transparent; /* JSが色を入れる */
  font-weight:800; letter-spacing:.02em; text-align:center;
  box-shadow:0 2px 3px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.55);
}

/* 親カードの横幅と干渉しないようにだけ軽く調整 */
@media (max-width:720px){
  .legend-pill{ min-width: 200px; }
}