/* 今日のおすすめコース ウィジェット スタイル
   サイト既存の配色（青系ヘッダー／オレンジ系CTA）に寄せた仮スタイルです。
   実際の色コードは既存CSSに合わせて調整してください。 */

.today-course-card {
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
  font-family: inherit;
}

.today-course-heading {
  background: #d92b2b;      /* サイト内の赤い帯（例：「世界最高の海外大学講義を…」）に合わせた仮色 */
  color: #ffffff;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  padding: 8px 4px;
}

.today-course-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.today-course-thumb {
  display: block;
  width: 100%;
  height: auto;   /* 実画像本来の比率で表示。上下の余白（レターボックス）もクロップも発生しない */
  background: #eef1f5;   /* 読み込み中の背景 */
}

.today-course-thumb-fallback {
  /* サムネール画像がどのパスでも見つからなかった場合の代替表示（壊れた画像アイコンを防ぐ） */
  aspect-ratio: 3 / 1;   /* 16:9だと縦に間延びするため、横長のバナー寄りの比率に */
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  box-sizing: border-box;
  background: #eef1f5;   /* 薄い背景色 */
  color: #1a3c6e;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.today-course-title {
  padding: 8px 10px 4px;
  font-size: 13px;
  line-height: 1.4;
  color: #1a3c6e;
  font-weight: 600;
}

.today-course-link:hover .today-course-title {
  text-decoration: underline;
}

.today-course-shuffle {
  display: block;
  width: calc(100% - 20px);
  margin: 4px 10px 10px;
  padding: 6px 0;
  font-size: 12px;
  color: #1a3c6e;
  background: #eef1f5;
  border: 1px solid #cfd8e3;
  border-radius: 4px;
  cursor: pointer;
}

.today-course-shuffle:hover {
  background: #dfe6ee;
}