@charset "UTF-8";
/* =============================================================
   常設（オンデマンド）動画説明会ブロック
   テーマのスタイルシート末尾に追記してください。

   設計意図：
     リアルタイムの説明会・イベントへの参加を優先させたいため、
     このブロックは「あえて目立たせない」。
     カード型のグリッド・サムネイル・ブランドカラーの塗りは使わず、
     グレー基調の細いリストにとどめる。
   ============================================================= */

.sm-ondemand {
  margin: 40px 0 8px;
  padding: 20px 22px;
  background: #fafbfc;
  border: 1px solid #e3e8ee;
  border-radius: 6px;
}

.sm-ondemand__head {
  font-size: 15px;
  font-weight: 700;
  color: #1f2b38;
  margin: 0 0 4px;
}

.sm-ondemand__note {
  font-size: 12.5px;
  line-height: 1.6;
  color: #6b7785;
  margin: 0 0 14px;
}

.sm-ondemand__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sm-ondemand__list li {
  margin: 0;
  padding: 0;
  border-top: 1px dotted #dde3ea;
}
.sm-ondemand__list li:first-child { border-top: 0; }

.sm-ondemand__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  color: #1f2b38;
  text-decoration: none;
}
.sm-ondemand__item:hover {
  background: #f2f5f8;
  text-decoration: none;
}

/* バッジは塗らず枠線のみ。日時開催カードより弱く見せる */
.sm-ondemand__badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #6b7785;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #c8d2dc;
  border-radius: 3px;
}

.sm-ondemand__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
}

.sm-ondemand__arrow {
  flex: 0 0 auto;
  font-size: 12px;
  color: #6b7785;
}

.sm-ondemand__foot {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: #6b7785;
}

/* 0件時フォールバックは受け皿として機能させたいので、
   通常より少しだけ主張を強める（それでもカードにはしない） */
.sm-ondemand--empty {
  margin-top: 24px;
  background: #f4f8fb;
  border-color: #cfdce7;
}
.sm-ondemand--empty .sm-ondemand__head {
  font-size: 16px;
}

/* 詳細ページ：オンデマンド用バッジ */
.sm-badge--ondemand {
  background: #eef1f5;
  color: #4a5768;
}
.sm-badge--anytime {
  background: #fff;
  color: #6b7785;
  border: 1px solid #c8d2dc;
}

@media (max-width: 600px) {
  .sm-ondemand {
    margin-top: 32px;
    padding: 16px 14px;
  }
  .sm-ondemand__item {
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 10px 2px;
  }
  .sm-ondemand__title {
    flex: 1 1 100%;
    font-size: 13.5px;
  }
}

/* 形式で「動画（オンデマンド）」が選ばれたときは主役として表示する。
   自分から探しに来た人に対しては隠す理由がないため、
   通常状態より少し強く見せる（ただしカード型にはしない） */
.sm-ondemand.is-prominent {
  margin-top: 8px;
  padding: 24px 24px;
  background: #fff;
  border-color: #cfdce7;
}
.sm-ondemand.is-prominent .sm-ondemand__head {
  font-size: 18px;
  margin-bottom: 6px;
}
.sm-ondemand.is-prominent .sm-ondemand__note {
  font-size: 13px;
}
.sm-ondemand.is-prominent .sm-ondemand__item {
  padding: 14px 4px;
}
.sm-ondemand.is-prominent .sm-ondemand__title {
  font-size: 15.5px;
}

/* 個別カウンセリングへの導線は、受け皿として出しているときだけ見せる */
.sm-ondemand__counseling { display: none; }
.sm-ondemand.is-fallback .sm-ondemand__counseling,
.sm-ondemand.is-prominent .sm-ondemand__counseling { display: block; }

/* カード表示（タームアーカイブ等）でのオンデマンド表記 */
.sm-card__anytime {
  font-size: 13px;
  font-weight: 700;
  color: #6b7785;
}

/* =============================================================
   カード：国・地域チップのあふれ表示
   （カード共通の微調整。ondemand.css は説明会・体験談・ターム
     アーカイブで読み込まれるため、ここに置けば全カードに効く）
   ============================================================= */

/* 4件目以降を省略していることを示すチップ。
   通常の国チップより弱く見せ、数を稼いでいる印象を与えない */
.sm-chip--more {
  color: #6b7785;
  background: #f2f5f8;
  border-color: #dde3ea;
  cursor: default;
  letter-spacing: .08em;
}

/* チップが増えても行が破綻しないように */
.sm-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}