@charset "UTF-8";

/* ==========================================================================
   2026夏 今期スケジュール専用ダッシュボード スタイル（外部独立ファイル版）
   ========================================================================== */
/* --- セクション表示設定 --- */
.anime-section {
  max-width: 1200px;
  width: 95%;
  margin: 20px auto;
}

/* 今期セクション全体の配置調整 */
.current-season-section {
  margin-bottom: 30px !important;
}

/* ラベルの文字色を既存の黒に固定 */
.current-season-label {
  color: #000000 !important;
}

/* ダッシュボードのレイアウト（スマホ環境では縦に積み重ねる） */
.dashboard-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  width: 100% !important;
}

/* カレンダー全体の囲み（白背景・グレーの1px細線） */
.dashboard-calendar {
  flex: 1.2 !important;
  background-color: #ffffff !important;
  border: 1px solid #cccccc !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}


/* 曜日ごとの行（グレーのドット点線で区切り） */
.calendar-row {
  display: flex !important;
  align-items: center !important;
  padding: 6px 0 !important;
  border-bottom: 1px dotted #999999 !important;
}

.calendar-row:last-child {
  border-bottom: none !important;
}

/* 曜日バッジ（枠線を廃止し、文字だけで綺麗に揃える設定） */
.day-badge {
  display: inline-block !important;   /* 横幅を指定できるようにインラインブロック化 */
  width: 20px !important;              /* 曜日の文字幅を統一し、縦のラインをきっちり揃える */
  text-align: center !important;       /* 文字をその幅内の中央に配置 */
  font-weight: bold !important;
  font-size: 14px !important;          /* アニメタイトル（14px）と大きさを揃えて自然に */
  margin-right: 12px !important;
  background: none !important;         /* 背景色を透明にリセット */
  border: none !important;             /* 枠線を完全に削除 */
  flex-shrink: 0 !important;
}

/* 土日の文字色（背景をなくした分、文字色だけでシンプルに表現） */
.day-badge.sun {
  color: #cc0000 !important;           /* 落ち着いた赤文字 */
}
.day-badge.sat {
  color: #0000cc !important;           /* 落ち着いた青文字 */
}

/* アニメタイトルの文字サイズと装飾リセット */
.anime-title {
  font-size: 14px !important;
  color: #333333 !important;
  text-align: left !important;
}

/* 右側の今期視聴リストエリア */
.dashboard-list {
  flex: 1 !important;
  background-color: #ffffff !important;
  border: 1px solid #cccccc !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}

/* リストの見出し */
.list-headline {
  font-weight: bold !important;
  margin-bottom: 8px !important;
  font-size: 13px !important;
  color: #000000 !important;
}


/* ==========================================================================
   【PC向けレイアウト制御】画面幅が768px以上の場合に横並び（2列）にする
   ========================================================================== */
@media (min-width: 768px) {
  .dashboard-container {
    flex-direction: row !important;
    align-items: flex-start !important;
  }
}