body{
  margin:0;
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  background:#fafafa;
}

/* =========================
   日付切替
========================= */
.date-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 15px 0 25px;
}

.date-link {
  padding: 8px 16px;
  border-radius: 20px;
  background: #fdf8f4; /* サイトに馴染む薄いベージュ */
  border: 1px solid #e0d0c0;
  text-decoration: none;
  color: #555;
  font-size: 13px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.date-link:hover {
  background: #96514d; /* あずき色 */
  color: #fff;
  border-color: #96514d;
}

.date-current {
  font-size: 24px; /* 日付を大幅に大きく */
  font-weight: 700;
  color: #333;
  letter-spacing: 0.05em;
  font-family: 'Zen Maru Gothic', sans-serif;
}

/* 土日色（最終） */
.date-current.is-sun { color: #c33 !important; }
.date-current.is-sat { color: #2b6cb0 !important; }

/* スマホ用調整 */
@media screen and (max-width: 480px) {
  .date-switch {
    gap: 12px;
  }
  .date-current {
    font-size: 20px; /* スマホでは少し抑える */
  }
  .date-link {
    padding: 6px 12px;
    font-size: 12px;
  }
}
/* =========================
   キャスト一覧
========================= */
.cast-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  padding:12px;
}

@media (max-width:768px){
  .cast-list{
    grid-template-columns:repeat(2,1fr);
  }
}

/* カード */
.cast-card{
  background:#fff;
  border-radius:14px;
  padding:10px;
  text-align:center;
  box-shadow:0 4px 10px rgba(0,0,0,0.06);
}

/* 写真（拡大なし・枠強調） */
.cast-card img{
  width:93px;
  height:140px;
  object-fit:cover;
  display:block;
  margin:0 auto;

  padding:4px;
  background:linear-gradient(180deg,#fff,#f3f3f3);
  border-radius:12px;
  border:2px solid #ddd;
  box-shadow:0 6px 14px rgba(0,0,0,0.18);
}

/* 名前 */
.name{
  margin-top:8px;
  padding-top:6px;
  border-top:1px solid #eee;
  font-size:15px;
  font-weight:600;
  letter-spacing:0.05em;
}

/* 時間 */
.time{
  margin-top:2px;
  font-size:13px;
  color:#555;
}

/* ステータス */
.status{
  margin-top:8px;
  font-size:12px;
  font-weight:600;
}
.status.on{ color:#c33; }
.status.off{ color:#777; }

/* ===== 週間ボード：デバイス別切り替え ＋ 土日色完全対応 ===== */

.cast-box {
    display: inline-block;
    width: 65px; 
    margin: 0 1px;
    vertical-align: top;
    text-align: center;
}

.cast-box img {
    width: 58px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
    margin-bottom: 3px;
}

/* --- PC版の設定（チルダで1行） --- */
@media screen and (min-width: 769px) {
    .cast-box { width: 90px; } /* PCは少し広く */
    .cast-box img { width: 85px; height: 120px; }
    
    .cast-time {
        display: block;
        font-size: 12px;
    }
    .cast-time .divider {
        display: none; /* 縦線を隠す */
    }
    .cast-time .tilde {
        display: inline; /* チルダを表示 */
    }
}

/* --- スマホ版の設定（縦線で3段） --- */
@media screen and (max-width: 768px) {
    .cast-time {
        display: flex;
        flex-direction: column; /* 縦に積む */
        align-items: center;
        line-height: 1.1;
    }
    .cast-time span {
        display: block; /* 強制改行 */
        font-size: 10px;
        font-weight: bold;
    }
    .cast-time .divider {
        display: block; /* 縦線を表示 */
        font-size: 9px;
        color: #ccc;
        margin: -1px 0;
    }
    .cast-time .tilde {
        display: none; /* チルダを隠す */
    }
}

/* --- 土日色の強制適用（セレクタを長くして最優先にする） --- */

/* 日曜日（赤） */
.weekly-table td.sun,
.weekly-table td.sun .cast-name,
.weekly-table td.sun .cast-time span,
.weekly-table td.sun .cast-time .tilde,
.weekly-table th.sun {
    color: #c33 !important;
}

/* 土曜日（青） */
.weekly-table td.sat,
.weekly-table td.sat .cast-name,
.weekly-table td.sat .cast-time span,
.weekly-table td.sat .cast-time .tilde,
.weekly-table th.sat {
    color: #2b6cb0 !important;
}

/* 縦線（|）の色は薄いグレーのままにするか、曜日色に合わせるか選べます。
   曜日色に合わせる場合は以下の行を有効にしてください */
.weekly-table td.sun .cast-time .divider { color: #ffcccc !important; }
.weekly-table td.sat .cast-time .divider { color: #ccddee !important; }

/* その他、枠幅などの調整（再掲） */
.cast-box {
    display: inline-block;
    width: 62px;
    text-align: center;
}
.cast-box img {
    width: 58px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}
@media screen and (max-width: 768px) {
    .cast-time { display: flex; flex-direction: column; align-items: center; }
    .cast-time .tilde { display: none; }
    .cast-time .divider { display: block; }
}
@media screen and (min-width: 769px) {
    .cast-time .tilde { display: inline; }
    .cast-time .divider { display: none; }
}

/* 共通：名前の装飾 */
.cast-name {
    display: block;
    font-weight: 700;
    font-size: 10px;
    margin-bottom: 2px;
}

/* テーブル全体のレイアウトを固定にする */
.weekly-table {
  width: 100%;
  table-layout: fixed; /* これにより、中身の量に関わらず列幅を固定します */
  border-collapse: collapse;
}

/* キャスト名（左端固定列）の幅 */
.weekly-table th.cast-head,
.weekly-table td.cast-cell {
  width: 120px;     /* PCでの幅を固定 */
  min-width: 120px;
}

/* 日付セルの幅を均等に維持 */
.weekly-table th:not(.cast-head),
.weekly-table td:not(.cast-cell) {
  width: 100px;     /* すべての日付列を同じ幅に固定 */
  min-width: 100px;
  word-break: break-all; /* 中身が長い場合に突き抜けないようにする */
}

/* 「-」の時でも高さを維持する */
.no-shift {
  display: block;
  width: 100%;
  line-height: 40px; /* shift-contentがある時と同じくらいの高さを確保 */
  color: #ccc;
}