/* 月刊スパカレンダー（2026-10-10 帯の表示に変更） */
.cal-limited{--cal:#b4475a}.cal-new{--cal:#2f7db5}.cal-change{--cal:#c3922e}.cal-closure{--cal:#4a525c}.cal-reopen{--cal:#22894e}.cal-regular{--cal:#9aa1a8}
.spa-tl{--tl-name:240px;--tl-left:84px;margin:8px 0 40px}
.tl-lead{font-size:16px;color:var(--muted);margin:0 0 14px}
.tl-filter{display:flex;gap:8px;margin:0 0 14px}
.tl-filter button{min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:15px;color:var(--muted);cursor:pointer}
.tl-filter button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff;font-weight:600}
.tl-filter button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tl-axis,.tl-row{display:grid;grid-template-columns:var(--tl-name) minmax(0,1fr) var(--tl-left);gap:16px;align-items:center}
.tl-axis{font-size:13px;color:var(--muted);padding:0 0 6px;border-bottom:2px solid var(--ink)}
.tl-axis-months{position:relative;height:20px}
.tl-axis-months span{position:absolute;top:0;padding-left:4px;border-left:1px solid var(--line);white-space:nowrap}
.tl-axis-left{text-align:right}
.tl-list{list-style:none;margin:0;padding:0}
.tl-row{align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.tl-row .tl-track{margin-top:1px}
.tl-row[hidden]{display:none}
.tl-name{min-width:0;line-height:1.5}
.tl-name a{font-size:16px;font-weight:600;color:var(--ink);text-decoration:none}
@media(hover:hover){.tl-name a:hover{text-decoration:underline;text-underline-offset:3px}}
.tl-badge{display:inline-block;margin-left:6px;padding:0 6px;border:1px solid #b4475a;border-radius:3px;font-size:13px;line-height:1.6;color:#8f2f42;vertical-align:1px;white-space:nowrap}
.tl-period{display:block;font-size:14px;color:var(--muted)}
.tl-track{position:relative;height:22px;border-radius:3px;background:var(--mist)}
.tl-mline{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.spa-tl:not(.is-ready) .tl-track,.spa-tl:not(.is-ready) .tl-axis{display:none}
.tl-bar{position:absolute;top:4px;height:14px;border-radius:3px;background:#d98a98}
.tl-bar.is-open{border-top-left-radius:0;border-bottom-left-radius:0;background:linear-gradient(90deg,rgba(217,138,152,.35),#d98a98 28px)}
.tl-bar.is-cut{border-top-right-radius:0;border-bottom-right-radius:0}
.tl-bar.is-cut::after{content:'';position:absolute;right:-7px;top:0;border:7px solid transparent;border-right:0;border-left-color:#d98a98}
.has-today .tl-track::after{content:'';position:absolute;left:var(--today);top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:var(--ink)}
.spa-tl .tl-left{margin:0;line-height:24px;text-align:right;font-size:15px;color:var(--muted);white-space:nowrap}
.tl-row.is-soon .tl-bar{background:#a8344b}.tl-row.is-soon .tl-bar.is-cut::after{border-left-color:#a8344b}
.tl-row.is-soon .tl-left{color:#a8344b;font-weight:600}
.tl-row.is-ended{opacity:.5}
.tl-row.is-ended .tl-bar{background:#bfc3c8}
.tl-note{font-size:14px;color:var(--muted);margin:10px 0 0}
/* その月に始まる・終わる・変わること */
.cal-dates{list-style:none;margin:0 0 32px;padding:0;border-top:1px solid var(--line)}
.cd-day{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.cd-date{margin:0;font-size:15px;color:var(--muted);white-space:nowrap}
.cd-date strong{font-size:17px;color:var(--ink)}
.cd-items{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cd-item{padding-left:10px;border-left:3px solid var(--cal);font-size:16px;line-height:1.6}
.cd-tag{display:inline-block;margin-right:8px;font-size:14px;font-weight:600;color:var(--cal)}
.cd-day.is-past .cd-date{opacity:.6}
.cd-day.is-today .cd-date strong::after{content:'今日';margin-left:6px;padding:1px 6px;border-radius:3px;background:#b4475a;color:#fff;font-size:13px;vertical-align:2px}
@media(max-width:720px){
  .tl-axis{grid-template-columns:1fr}
  .tl-axis-name,.tl-axis-left{display:none}
  .tl-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'name left' 'track track';gap:6px 12px;padding:14px 0}
  .tl-name{grid-area:name}.tl-left{grid-area:left;align-self:start;padding-top:2px}.tl-track{grid-area:track;height:14px}
  .tl-bar{top:3px;height:8px}
  .tl-bar.is-cut::after{right:-4px;border-width:4px}
  .has-today .tl-track::after{top:-3px;bottom:-3px}
  .tl-filter button{flex:1}
  .cd-day{grid-template-columns:1fr;gap:6px}
}