@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Poppins:wght@600;700&display=swap");

/* ============================================================================
   特番サイト 共通テンプレート  tvsp-common.css
   ----------------------------------------------------------------------------
   ■ 目次
     1. 設定（変数）
     2. CMSのレイアウト調整
     3. ベース・リセット
     4. 共通パーツ（見出し／タグ／ボタン／マーカー／改行）
     5. セクション
        5-1 HERO（キービジュアル・番組名・放送日）
        5-2 TICKER（流れるテロップ帯）
        5-3 NAV（ページ内リンク）／MENU（帯のメニュー）
        5-4 INTRO（番組紹介）
        5-5 MOVIE（予告動画）
        5-6 POINT（見どころ）
        5-7 CAST（出演者）
        5-8 WATCH（配信案内）
   ============================================================================ */


/* ============================================================================
   1. 設定（変数）
   ============================================================================ */
.tvsp {
  /* --- 色：テーマCSSで上書きする 3色（ここは初期値） --- */
  --tvsp-main:   #1F5FD6;   /* メイン：テロップ帯／番号／配信カード */
  --tvsp-sub:    #FFD23F;   /* サブ　：マーカー／シール／予告動画の背景（薄めて使用） */
  --tvsp-accent: #FF8A6B;   /* アクセント：タグ／出演者写真の丸 */

  /* --- 色：メイン色まわりの文字色（テーマCSSで調整） --- */
  --tvsp-on-main:    #FFFFFF;            /* メイン色の背景にのせる文字（テロップ帯・ON AIR） */
  --tvsp-main-text:  var(--tvsp-main);   /* メイン色を「文字」に使うとき（番号・見出しの日本語） */

  /* --- 色：基本は共通のまま --- */
  --tvsp-ink:   #14213D;    /* 文字・線 */
  --tvsp-gray:  #555D73;    /* 補足テキスト */
  --tvsp-white: #FFFFFF;
  --tvsp-tint:  color-mix(in srgb, var(--tvsp-main) 8%, #FFFFFF);   /* 淡い背景：出演者（メイン色から自動） */

  /* --- 色：HERO（キービジュアルまわり）。テーマCSSで調整 --- */
  --tvsp-hero-bg:        #FFFFFF;               /* 背景 */
  --tvsp-hero-text:      var(--tvsp-ink);       /* 番組名・サブタイトル */
  --tvsp-hero-hl:        var(--tvsp-main-text); /* 番組名の色を変える部分 */
  --tvsp-hero-tag-line:  var(--tvsp-ink);       /* タグの枠線・文字 */
  --tvsp-hero-tag-bg:    #FFFFFF;               /* タグの背景 */
  --tvsp-hero-tag2-bg:   var(--tvsp-ink);       /* 塗りタグ（tvsp-tag--dark）の背景 */
  --tvsp-hero-tag2-text: #FFFFFF;               /* 塗りタグの文字 */
  --tvsp-sticker-bg:     var(--tvsp-sub);       /* シールの背景 */

  /* --- 色：MOVIE（予告動画の背景）。サブ色を白で薄めた、やわらかい色 --- */
  --tvsp-movie-bg: color-mix(in srgb, var(--tvsp-sub) 26%, #FFFFFF);

  /* --- 色：WATCH（配信案内）。配信先 topo のロゴに合わせた黄緑のグラデーション。全テーマ共通 --- */
  --tvsp-watch-from:     #D6EA3C;   /* グラデーションの始まり（左上・明るい黄緑） */
  --tvsp-watch-to:       #74C043;   /* グラデーションの終わり（右下・緑寄り） */
  --tvsp-watch-bg:       linear-gradient(120deg, var(--tvsp-watch-from), var(--tvsp-watch-to));
  --tvsp-watch-text:     #16220E;   /* 文字（黄緑の上でも読める濃い緑黒） */
  --tvsp-watch-em:       #16220E;   /* 「WATCH AGAIN」 */
  --tvsp-watch-btn-bg:   #16220E;   /* ボタン背景 */
  --tvsp-watch-btn-text: #FFFFFF;   /* ボタン文字 */
  --tvsp-watch-btn-icon: #5FA634;   /* ボタン右端の丸（中の矢印は白） */

  /* --- 色：WATCH の TVer カード（tvsp-watch__card--tver）。全テーマ共通 --- */
  --tvsp-tver-from:      #47B9F2;   /* グラデーションの始まり（左上） */
  --tvsp-tver-to:        #1F7FD8;   /* グラデーションの終わり（右下） */
  --tvsp-tver-text:      #FFFFFF;   /* 文字 */
  --tvsp-tver-btn-bg:    #FFFFFF;   /* ボタン背景 */
  --tvsp-tver-btn-text:  #0F3E73;   /* ボタン文字 */
  --tvsp-tver-btn-icon:  #1F7FD8;   /* ボタン右端の丸 */

  /* --- フォント --- */
  --tvsp-font-ja:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --tvsp-font-title: var(--tvsp-font-ja);   /* 番組名 */
  --tvsp-font-en:    "Poppins", var(--tvsp-font-ja);   /* 英字・数字の飾り */

  /* --- 線・角丸（SP の値。PC は下の @media で上書き） --- */
  --tvsp-line:      2px;     /* 枠線の太さ */
  --tvsp-radius-l:  14px;    /* 大きい角丸：キービジュアル／動画／配信カード */
  --tvsp-radius-m:  12px;    /* 中くらいの角丸：見どころ写真／出演者カード */
  --tvsp-radius-s:  6px;     /* 小さい角丸：出演者写真 */

  /* --- 余白・幅 --- */
  --tvsp-content:   1040px;  /* 中身の最大幅 */
  --tvsp-gutter:    20px;    /* 左右の余白 */
  --tvsp-section-y: 72px;    /* セクションの上下余白 */
}
@media screen and (min-width: 768px) {
  .tvsp {
    --tvsp-radius-l:  20px;
    --tvsp-radius-m:  16px;
    --tvsp-gutter:    40px;
    --tvsp-section-y: 128px;
  }
}


/* ============================================================================
   2. CMSのレイアウト調整（従来の設定を引き継ぎ）
   ============================================================================ */
article.nonav .contents { padding: 0 !important; }
@media screen and (min-width: 640px) {
  article.nonav .contents section { max-width: 1120px; }
}


/* ============================================================================
   3. ベース・リセット
   ※ CMS側の p / h2 / ul などのスタイルが混ざらないように打ち消しています
   ============================================================================ */
.tvsp {
  overflow: hidden;
  font-family: var(--tvsp-font-ja);
  font-size: 16px;
  line-height: 1.8;
  color: var(--tvsp-ink);
  text-align: left;
  background: var(--tvsp-white);
}
.tvsp *,
.tvsp *::before,
.tvsp *::after { box-sizing: border-box; }

.tvsp p,
.tvsp h2,
.tvsp h3,
.tvsp ul,
.tvsp li,
.tvsp figure { margin: 0; padding: 0; }

.tvsp h2,
.tvsp h3 {
  position: static;
  width: auto;
  border: 0;
  background: none;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: inherit;
}
.tvsp h2::before, .tvsp h2::after,
.tvsp h3::before, .tvsp h3::after { content: none; }

/* 見出しだけ約物（「」！？）を詰める。本文は読みやすさ優先で詰めない */
.tvsp .tvsp-hero__title,
.tvsp .tvsp-intro__lead,
.tvsp .tvsp-point__title,
.tvsp .tvsp-watch__title { font-feature-settings: "palt"; }

.tvsp ul  { list-style: none; }
.tvsp img { display: block; max-width: 100%; height: auto; }

.tvsp a,
.tvsp a:link,
.tvsp a:visited,
.tvsp a:active { color: inherit; }
.tvsp a:hover  { opacity: 1; }


/* ============================================================================
   4. 共通パーツ
   ============================================================================ */

/* ----------------------------------------------------------------------------
   4-1 セクション見出し（英字＋日本語）
   HTML：<h2 class="tvsp-head"> … </h2>
   ・左揃え。英字は大きく、日本語は小さく横に添える
   ・tvsp-head--fill：色付き背景の上で使う（日本語ラベルが黒になる）
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  max-width: var(--tvsp-content);
  margin: 0 auto 28px;
}
.tvsp .tvsp-head__en {
  font-family: var(--tvsp-font-en);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--tvsp-ink);
}
.tvsp .tvsp-head__ja {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
  color: var(--tvsp-main-text);
}
.tvsp .tvsp-head__ja::before {   /* 英字と日本語の間の短い線 */
  content: "";
  width: 20px;
  height: 2px;
  background: currentColor;
}
.tvsp .tvsp-head--fill .tvsp-head__ja { color: var(--tvsp-ink); }

@media screen and (min-width: 768px) {
  .tvsp .tvsp-head     { gap: 6px 20px; margin-bottom: 48px; }
  .tvsp .tvsp-head__en { font-size: 68px; }
  .tvsp .tvsp-head__ja { font-size: 15px; }
}

/* ----------------------------------------------------------------------------
   4-2 タグ（丸いラベル）
   HTML：<li class="tvsp-tag">…</li>  ／ 黒地：tvsp-tag--dark
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tvsp .tvsp-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 1px 12px;
  border: 1.5px solid var(--tvsp-hero-tag-line);
  border-radius: 999px;
  background: var(--tvsp-hero-tag-bg);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--tvsp-hero-tag-line);
}
.tvsp .tvsp-tag--dark {
  border-color: var(--tvsp-hero-tag2-bg);
  background: var(--tvsp-hero-tag2-bg);
  color: var(--tvsp-hero-tag2-text);
}
@media screen and (min-width: 768px) {
  .tvsp .tvsp-tag { min-height: 32px; padding: 1px 14px; font-size: 13px; }
}

/* ----------------------------------------------------------------------------
   4-3 ボタン
   HTML：<a class="tvsp-btn" href="…">ボタン名</a>（矢印は自動で付きます）
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 0 10px 0 26px;
  border-radius: 999px;
  background: var(--tvsp-btn-bg, var(--tvsp-sub));
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--tvsp-btn-text, var(--tvsp-ink)) !important;
  text-decoration: none;
  transition: background-color .2s;
}
.tvsp .tvsp-btn::after {   /* 右端の丸い矢印 */
  content: "";
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tvsp-btn-icon, var(--tvsp-ink)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h12M13 7l5 5-5 5'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .2s;
}
.tvsp .tvsp-btn:hover         { opacity: .85; }
.tvsp .tvsp-btn:hover::after  { transform: translateX(3px); }

@media screen and (min-width: 768px) {
  .tvsp .tvsp-btn { min-height: 60px; font-size: 16px; }
}

/* ----------------------------------------------------------------------------
   4-4 マーカー（黄色の下線）
   HTML：<span class="tvsp-mark">強調したい文字</span>
   ※ 従来の .line / .st も同じ見た目で使えます
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-mark,
.tvsp .line,
.tvsp .st {
  background: linear-gradient(transparent 62%, var(--tvsp-sub) 62%);
  color: inherit;
}

/* ----------------------------------------------------------------------------
   4-5 改行の出し分け
   HTML：<br class="pc" /> … PCだけ改行 ／ <br class="sp" /> … スマホだけ改行
   ---------------------------------------------------------------------------- */
.tvsp br.pc { display: none; }
@media screen and (min-width: 640px) {
  .tvsp br.pc { display: inline; }
  .tvsp br.sp { display: none; }
}


/* ============================================================================
   5. セクション
   ============================================================================ */

/* ----------------------------------------------------------------------------
   5-1 HERO（キービジュアル・番組名・放送日）
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-hero {   /* 色は「1. 設定」の --tvsp-hero-○○（テーマCSSで変更） */
  padding: 20px var(--tvsp-gutter) 44px;
  background: var(--tvsp-hero-bg);
  color: var(--tvsp-hero-text);
}

/* キービジュアル */
.tvsp .tvsp-hero__kv {
  /* ファーストビュー（最初の1画面）に放送日まで入るよう、画面の高さに合わせて大きさを調整
     --tvsp-cms-header   … CMSのサイトヘッダー（局ロゴやメニュー）の高さ【実際の高さに合わせて調整】
     --tvsp-hero-reserve … キービジュアル以外に必要な高さ（番組名・放送日・余白）
     --tvsp-kv-ratio     … キービジュアルの 横÷縦（SP画像 640÷600／PC画像 1120÷507）
     ※ 画像は切り抜かず、比率そのまま縮小します（小さくなりすぎないよう最小220px） */
  --tvsp-cms-header:   64px;
  --tvsp-hero-reserve: 330px;
  --tvsp-kv-ratio:     1.0667;
  position: relative;
  max-width: max(220px, min(var(--tvsp-content), calc((100vh  - var(--tvsp-cms-header) - var(--tvsp-hero-reserve)) * var(--tvsp-kv-ratio))));
  max-width: max(220px, min(var(--tvsp-content), calc((100svh - var(--tvsp-cms-header) - var(--tvsp-hero-reserve)) * var(--tvsp-kv-ratio))));
  margin: 0 auto;
}
@media screen and (min-width: 640px) {
  .tvsp .tvsp-hero__kv { --tvsp-kv-ratio: 2.209; }        /* PC画像 1120÷507 */
}
@media screen and (min-width: 768px) {
  .tvsp .tvsp-hero__kv { --tvsp-cms-header: 80px; --tvsp-hero-reserve: 270px; }
}
.tvsp .tvsp-hero__kv img {
  width: 100%;
  border-radius: var(--tvsp-radius-l);
}

/* シール（周年など。HTMLで不要なら削除） */
.tvsp .tvsp-sticker {
  position: absolute;
  top: -10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--tvsp-sticker-bg);
  color: var(--tvsp-ink);
  font-size: 7px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .1em;
  text-align: center;
  transform: rotate(8deg);
}
.tvsp .tvsp-sticker b {
  font-family: var(--tvsp-font-en);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

/* 番組名と放送日の並び */
.tvsp .tvsp-hero__info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: var(--tvsp-content);
  margin: 28px auto 0;
}
.tvsp .tvsp-hero__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  container-type: inline-size;   /* 番組名の文字サイズを、この幅に合わせるため */
}

/* 番組名 */
.tvsp .tvsp-hero__title {
  margin-top: 6px;
  font-family: var(--tvsp-font-title);
  font-size: clamp(38px, 6.6vw, 66px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .04em;
}
.tvsp .tvsp-hero__title .tvsp-hl { color: var(--tvsp-hero-hl); }   /* 色を変える部分 */
/* 番組名を、スマホ・PCとも1行に収める【任意】
   ・番組名の文字数を --tvsp-title-chars に入れると、その文字数がぴったり1行に入る大きさになります（最大66px）
   ・文字数を変えたいときは、下の 11 を書き換える */
.tvsp .tvsp-hero__title.tvsp-hero__title--fit {
  --tvsp-title-chars: 11;   /* ← 番組名の文字数 */
  font-size: min(66px, calc(100cqi / var(--tvsp-title-chars) / 1.15));   /* 1.15 … フォントの違いに備えた余裕 */
  white-space: nowrap;      /* 途中で改行しない */
}
/* サブタイトル */
.tvsp .tvsp-hero__sub {
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
}

/* 放送日ボックス */
.tvsp .tvsp-onair {
  display: inline-flex;
  align-items: stretch;
  align-self: flex-start;
  overflow: hidden;
  border: var(--tvsp-line) solid var(--tvsp-ink);
  border-radius: 14px;
  background: var(--tvsp-white);
  color: var(--tvsp-ink);
}
.tvsp .tvsp-onair__label {   /* 左の「ON AIR」 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--tvsp-main);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
  color: var(--tvsp-on-main);
}
.tvsp .tvsp-onair__label::after {   /* 黄色の丸 */
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tvsp-sub);
}
.tvsp .tvsp-onair__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 18px 10px;
}
.tvsp .tvsp-onair__date {   /* 日付（読みやすさ優先でゴシック体） */
  font-family: var(--tvsp-font-ja);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.tvsp .tvsp-onair__date small {   /* 曜日 */
  margin-left: 4px;
  font-size: 14px;
  font-weight: 700;
}
.tvsp .tvsp-onair__time {   /* 時間 */
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--tvsp-gray);
}

@media screen and (min-width: 768px) {
  .tvsp .tvsp-hero { padding: 40px var(--tvsp-gutter) 64px; }

  .tvsp .tvsp-sticker {
    top: -24px;
    right: 28px;
    width: 112px;
    height: 112px;
    font-size: 9px;
  }
  .tvsp .tvsp-sticker b { font-size: 32px; }

  .tvsp .tvsp-hero__info {   /* 番組名（左）と放送日（右）を横並びに */
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-top: 32px;
  }
  .tvsp .tvsp-hero__text  { flex: 1; min-width: 0; }
  .tvsp .tvsp-hero__title {
    font-size: clamp(30px, 4.2vw, 56px);   /* 古いブラウザ用（下の cqi が使えないとき） */
    font-size: min(66px, 8cqi);            /* ← 横幅に収まる大きさ（最大66px）。1文字だけ改行されるときは 8cqi を小さく */
  }
  .tvsp .tvsp-onair {
    flex-shrink: 0;
    align-self: auto;
    border-radius: 16px;
  }
  .tvsp .tvsp-onair__label      { padding: 14px 18px; font-size: 11px; }
  .tvsp .tvsp-onair__body       { padding: 10px 24px 12px; }
  .tvsp .tvsp-onair__date       { font-size: 36px; }
  .tvsp .tvsp-onair__date small { font-size: 16px; }
  .tvsp .tvsp-onair__time       { font-size: 13px; }
}

/* ----------------------------------------------------------------------------
   5-2 TICKER（流れるテロップ帯）
   ・HTMLで同じ <ul> を2つ並べると、途切れずにループします
   ・流れる速さは animation の秒数で調整（数字が大きいほどゆっくり）
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-ticker {
  display: flex;
  align-items: center;
  height: 44px;
  overflow: hidden;
  background: var(--tvsp-main);
  color: var(--tvsp-on-main);
}
.tvsp .tvsp-ticker__track {
  display: flex;
  width: max-content;
  animation: tvsp-ticker 40s linear infinite;   /* ← 速さ */
}
.tvsp .tvsp-ticker ul {
  display: flex;
  flex-shrink: 0;
}
.tvsp .tvsp-ticker li {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
}
.tvsp .tvsp-ticker li::after {   /* 区切りの丸 */
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 24px;
  border-radius: 50%;
  background: var(--tvsp-sub);
}
@keyframes tvsp-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {   /* 動きを減らす設定の人には止める */
  .tvsp .tvsp-ticker__track { animation: none; }
}

@media screen and (min-width: 768px) {
  .tvsp .tvsp-ticker           { height: 52px; }
  .tvsp .tvsp-ticker li        { font-size: 16px; }
  .tvsp .tvsp-ticker li::after { margin: 0 32px; }
}

/* ----------------------------------------------------------------------------
   5-3 NAV（ページ内リンク）※任意
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: var(--tvsp-content);
  margin: 0 auto;
  padding: 20px var(--tvsp-gutter) 0;
}
.tvsp .tvsp-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--tvsp-ink);
  border-radius: 999px;
  background: var(--tvsp-white);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s;
}
.tvsp .tvsp-nav a:hover { background: var(--tvsp-sub); }

@media screen and (min-width: 768px) {
  .tvsp .tvsp-nav ul { gap: 8px; padding-top: 28px; }
  .tvsp .tvsp-nav a  { padding: 0 22px; font-size: 14px; }
}

/* ----------------------------------------------------------------------------
   5-3 MENU（帯のメニュー）※任意
   ・HERO のすぐ下に置く、メイン色の帯のページ内リンク
   ・TICKER（流れるテロップ帯）や NAV（丸いボタンのリンク）のかわりに使えます
   ・項目は4つまでがおすすめ（スマホで1列に収まる数）
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-menu {
  background: var(--tvsp-main);
  color: var(--tvsp-on-main);
}
.tvsp .tvsp-menu ul {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;   /* 項目の数だけ均等に並ぶ */
  max-width: var(--tvsp-content);
  margin: 0 auto;
}
.tvsp .tvsp-menu li + li { border-left: 1px solid color-mix(in srgb, var(--tvsp-on-main) 30%, transparent); }   /* 区切り線 */
.tvsp .tvsp-menu a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 64px;
  padding: 8px 4px;
  text-decoration: none;
  transition: background-color .2s;
}
.tvsp .tvsp-menu a:hover { background: color-mix(in srgb, var(--tvsp-ink) 14%, transparent); }
.tvsp .tvsp-menu__en {   /* 英字（小さく） */
  font-family: var(--tvsp-font-en);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  opacity: .8;
}
.tvsp .tvsp-menu__ja {   /* 日本語 */
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
}
@media screen and (min-width: 768px) {
  .tvsp .tvsp-menu a       { min-height: 80px; gap: 5px; }
  .tvsp .tvsp-menu__en     { font-size: 12px; }
  .tvsp .tvsp-menu__ja     { font-size: 15px; }
  .tvsp .tvsp-menu a::after {   /* 下向きの矢印 */
    content: "";
    width: 8px;
    height: 8px;
    margin-top: 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .6;
    transition: transform .2s, opacity .2s;
  }
  .tvsp .tvsp-menu a:hover::after { transform: translateY(3px) rotate(45deg); opacity: 1; }
}

/* ----------------------------------------------------------------------------
   5-4 INTRO（番組紹介）
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-intro {
  padding: var(--tvsp-section-y) var(--tvsp-gutter);
}
.tvsp .tvsp-intro__inner {
  max-width: var(--tvsp-content);
  margin: 0 auto;
}
.tvsp .tvsp-intro__lead {   /* キャッチコピー */
  margin-bottom: 24px;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: .02em;
}
.tvsp .tvsp-intro__text {   /* 本文 */
  font-size: 15px;
  font-weight: 500;
  line-height: 2.05;
}

@media screen and (min-width: 768px) {
  .tvsp .tvsp-intro__inner {   /* 見出し（左）と本文（右）の2カラム */
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: 48px;
  }
  .tvsp .tvsp-intro .tvsp-head {
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
  }
  .tvsp .tvsp-intro__lead { margin-bottom: 32px; font-size: 36px; }
  .tvsp .tvsp-intro__text { font-size: 17px; line-height: 2.15; }
}

/* INTRO の写真【任意】大きい写真1枚＋小さい写真2〜3枚
   ・1枚目が大きい写真。2枚目以降が小さい写真
   ・写真の枚数に合わせて並び方が自動で変わります
       3枚（大1＋小2）… スマホ：大きい写真の下に2枚／PC：大きい写真の右に2枚を縦に
       4枚（大1＋小3）… スマホ・PC：大きい写真の下に3枚を横に
   ・はみ出た部分は切れます（大きい写真の比率は aspect-ratio で調整） */
.tvsp .tvsp-intro__photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 小さい写真3枚 */
  gap: 8px;
  margin-top: 40px;
}
.tvsp .tvsp-intro__photos:has(> figure:nth-child(3):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* 小さい写真2枚 */
}
.tvsp .tvsp-intro__photos figure:first-child { grid-column: 1 / -1; }   /* 大きい写真は全幅 */
.tvsp .tvsp-intro__photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--tvsp-radius-m);
}
.tvsp .tvsp-intro__photos figure:first-child img { aspect-ratio: 16 / 10; }   /* ← 大きい写真の比率 */

@media screen and (min-width: 768px) {
  .tvsp .tvsp-intro__photos {
    grid-column: 1 / -1;           /* 見出し・本文の下に、全幅で */
    gap: 16px;
    margin-top: 64px;
  }
  .tvsp .tvsp-intro__photos figure:first-child img { aspect-ratio: 16 / 7; }   /* ← PCの大きい写真の比率（大1＋小3） */

  /* 大1＋小2：大きい写真（左）と、小さい写真2枚（右に縦並び） */
  .tvsp .tvsp-intro__photos:has(> figure:nth-child(3):last-child) {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .tvsp .tvsp-intro__photos:has(> figure:nth-child(3):last-child) figure:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .tvsp .tvsp-intro__photos:has(> figure:nth-child(3):last-child) figure:first-child img { aspect-ratio: 4 / 3; }
  .tvsp .tvsp-intro__photos:has(> figure:nth-child(3):last-child) figure:not(:first-child) {
    position: relative;   /* 小さい写真は、大きい写真の高さに合わせて上下に2等分 */
  }
  .tvsp .tvsp-intro__photos:has(> figure:nth-child(3):last-child) figure:not(:first-child) img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* ----------------------------------------------------------------------------
   5-5 MOVIE（予告動画）
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-movie {
  padding: var(--tvsp-section-y) var(--tvsp-gutter);
  background: var(--tvsp-movie-bg);   /* 色は「1. 設定」の --tvsp-movie-bg */
}
.tvsp .tvsp-movie__frame {   /* 16:9 の枠。中の iframe は自動で全面に広がる */
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: var(--tvsp-content);
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--tvsp-radius-l);
  background: var(--tvsp-ink);
}
.tvsp .tvsp-movie__frame iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* ----------------------------------------------------------------------------
   5-6 POINT（見どころ）
   ・番号（01, 02 …）は CSS で自動で振られます
   ・PC では偶数番目が自動で左右反転します
   ・写真は1〜4枚。枚数に合わせて並び方が自動で切り替わります
       1枚 … 1枚を大きく
       2枚 … 大きい写真に、2枚目を右下に少し重ねる
       3枚 … 1枚目を大きく、下に2枚を横並び
       4枚 … 2×2 で同じ大きさに並べる
     （古いブラウザ対策として、HTMLに tvsp-point__photos--枚数 も付けておくと確実）
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-points {
  padding: var(--tvsp-section-y) var(--tvsp-gutter);
}
.tvsp .tvsp-points__list {
  display: flex;
  flex-direction: column;
  gap: 72px;   /* 見どころ同士の間隔 */
  max-width: var(--tvsp-content);
  margin: 0 auto;
  counter-reset: tvsp-point;
}
.tvsp .tvsp-point {
  display: flex;
  flex-direction: column;
  gap: 24px;
  counter-increment: tvsp-point;
}

/* --- 写真：基本（3枚の並び：1枚目を全幅、残りを2列） --- */
.tvsp .tvsp-point__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.tvsp .tvsp-point__photos figure:first-child { grid-column: 1 / -1; }
.tvsp .tvsp-point__photos img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--tvsp-radius-m);
}

/* --- 写真2枚：1枚目を大きく、2枚目を右下に重ねる --- */
.tvsp .tvsp-point__photos--2,
.tvsp .tvsp-point__photos:has(> figure:nth-child(2):last-child) {
  display: block;
}
.tvsp .tvsp-point__photos--2 figure:first-child,
.tvsp .tvsp-point__photos:has(> figure:nth-child(2):last-child) figure:first-child {
  width: 88%;
}
.tvsp .tvsp-point__photos--2 figure:nth-child(2),
.tvsp .tvsp-point__photos:has(> figure:nth-child(2):last-child) figure:nth-child(2) {
  position: relative;
  width: 56%;
  margin: -16% 0 0 auto;   /* 1枚目に重ねる量 */
}
.tvsp .tvsp-point__photos--2 figure:nth-child(2) img,
.tvsp .tvsp-point__photos:has(> figure:nth-child(2):last-child) figure:nth-child(2) img {
  border: 5px solid var(--tvsp-white);   /* 重なり部分の白フチ */
  border-radius: calc(var(--tvsp-radius-m) + 5px);
}

/* --- 写真4枚：2×2 で同じ大きさ --- */
.tvsp .tvsp-point__photos--4 figure:first-child,
.tvsp .tvsp-point__photos:has(> figure:nth-child(4)) figure:first-child {
  grid-column: auto;
}

/* --- テキスト（番号・タグ・見出し・本文） --- */
.tvsp .tvsp-point__body {
  display: grid;
  grid-template-columns: auto 1fr;   /* 1行目：番号｜タグ、2行目以降：全幅 */
  align-items: end;
  gap: 14px 12px;
}
.tvsp .tvsp-point__body::before {   /* 自動の番号 */
  content: counter(tvsp-point, decimal-leading-zero);
  font-family: var(--tvsp-font-en);
  font-size: 52px;
  font-weight: 700;
  line-height: .9;
  color: var(--tvsp-main-text);
}
.tvsp .tvsp-point__body > :not(.tvsp-point__tag) { grid-column: 1 / -1; }

.tvsp .tvsp-point__tag {   /* 番号の横のタグ（色は 黄→アクセント→淡色 の順で自動） */
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 26px;
  padding: 1px 12px;
  border-radius: 999px;
  background: var(--tvsp-sub);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.tvsp .tvsp-point:nth-child(3n+2) .tvsp-point__tag { background: var(--tvsp-accent); }
.tvsp .tvsp-point:nth-child(3n)   .tvsp-point__tag { background: var(--tvsp-tint); }

.tvsp .tvsp-point__title {
  font-size: 23px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
}
.tvsp .tvsp-point__text {
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
}

@media screen and (min-width: 768px) {
  .tvsp .tvsp-points__list { gap: 120px; }

  /* 写真（左・広め）とテキスト（右）を横並びに。写真が小さくならないよう 7:5 */
  .tvsp .tvsp-point {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: 48px;
  }
  /* 偶数番目は左右反転 */
  .tvsp .tvsp-point:nth-child(even) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .tvsp .tvsp-point:nth-child(even) .tvsp-point__photos { order: 2; }

  .tvsp .tvsp-point__photos { gap: 12px; }

  .tvsp .tvsp-point__body         { gap: 20px 14px; }
  .tvsp .tvsp-point__body::before { font-size: 80px; }
  .tvsp .tvsp-point__tag          { min-height: 28px; padding: 1px 14px; font-size: 13px; }
  .tvsp .tvsp-point__title        { font-size: clamp(24px, 2.6vw, 30px); }
  .tvsp .tvsp-point__text         { font-size: 16px; line-height: 2.05; }
}

/* ----------------------------------------------------------------------------
   5-7 CAST（出演者）
   ・宣材写真はトリミングせず、元の比率のまま表示します
   ・写真右下の丸の色は 黄→オレンジ→メイン の順で自動
   ・列数：スマホ2列 → 768px以上で3列 → 960px以上で4列
     2人・3人のときは自動で大きめのカードになり、どの人数でも中央にそろいます
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-cast {
  padding: var(--tvsp-section-y) var(--tvsp-gutter);
  background: var(--tvsp-tint);
}
.tvsp .tvsp-cast__list {
  /* 中央ぞろえで折り返し。人数が少ないときも左に寄らない */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 14px;               /* ← カードの間隔（縦 横） */
  max-width: var(--tvsp-content);
  margin: 0 auto;
}
.tvsp .tvsp-cast__item {
  width: calc((100% - 14px) / 2);   /* スマホ：2列 */
}

/* カード */
.tvsp .tvsp-cast__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 12px 22px;
  border-radius: var(--tvsp-radius-m);
  background: var(--tvsp-white);
}

/* 写真 */
.tvsp .tvsp-cast__photo {
  position: relative;
  width: 100%;
  margin: 0 0 14px;
}
.tvsp .tvsp-cast__photo img {
  width: 100%;
  height: auto;   /* 比率そのまま・切り抜きなし */
  border-radius: var(--tvsp-radius-s);
}
.tvsp .tvsp-cast__photo::after {   /* 右下の丸（写真には重ねるだけで切り抜かない） */
  content: "";
  position: absolute;
  right: 8px;
  bottom: -9px;
  width: 18px;
  height: 18px;
  border: 3px solid var(--tvsp-white);
  border-radius: 50%;
  background: var(--tvsp-sub);
}
.tvsp .tvsp-cast__item:nth-child(3n+2) .tvsp-cast__photo::after { background: var(--tvsp-accent); }
.tvsp .tvsp-cast__item:nth-child(3n)   .tvsp-cast__photo::after { background: var(--tvsp-main); }

/* 名前・肩書き */
.tvsp .tvsp-cast__name {
  padding: 0 4px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.45;
}
.tvsp .tvsp-cast__role {
  padding: 0 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--tvsp-gray);
}

@media screen and (min-width: 768px) {
  .tvsp .tvsp-cast__list          { gap: 36px 28px; }
  .tvsp .tvsp-cast__item          { width: calc((100% - 28px * 2) / 3); padding: 16px 16px 28px; }   /* タブレット：3列 */
  .tvsp .tvsp-cast__photo         { margin-bottom: 20px; }
  .tvsp .tvsp-cast__photo::after  { right: 14px; bottom: -11px; width: 22px; height: 22px; }
  .tvsp .tvsp-cast__name          { padding: 0 6px; font-size: 19px; }
  .tvsp .tvsp-cast__role          { padding: 0 6px; font-size: 13px; }

  /* 2人のとき：大きめのカードで、間をゆったり */
  .tvsp .tvsp-cast__list:has(> li:nth-child(2):last-child) { gap: 56px; }
  .tvsp .tvsp-cast__list:has(> li:nth-child(2):last-child) > li { width: min(340px, calc((100% - 56px) / 2)); }   /* ← 2人のときのカード幅 */
}
@media screen and (min-width: 960px) {
  .tvsp .tvsp-cast__item { width: calc((100% - 28px * 3) / 4); }   /* PC：4列 */

  /* 3人のとき：3列で少し大きく */
  .tvsp .tvsp-cast__list:has(> li:nth-child(3):last-child) > li { width: min(300px, calc((100% - 28px * 2) / 3)); }
}

/* ----------------------------------------------------------------------------
   5-8 WATCH（配信案内）
   ・配信先ごとのカード（topo／TVer）。色は全テーマ共通
     topo  … 「1. 設定」の --tvsp-watch-○○
     TVer  … 「1. 設定」の --tvsp-tver-○○（カードに tvsp-watch__card--tver）
   ・カードは何枚でも、HTMLで消す／足すだけでOK（数を書き換える場所はありません）
     1枚 … 全幅で、テキスト（左）とバナー（右）を横並び
     2枚 … PCでは2枚を横並び。カードの幅がせまくなると、中身は自動で縦積みに
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-watch {
  padding: var(--tvsp-section-y) var(--tvsp-gutter);
}
.tvsp .tvsp-watch__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: var(--tvsp-content);
  margin: 0 auto;
}
.tvsp .tvsp-watch__card {
  /* カード：幅が足りないと自動で折り返し（1枚なら全幅、2枚ならPCで半分ずつ） */
  flex: 1 1 400px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: space-between;   /* 縦積みのとき、ボタンをカードの下にそろえる */
  gap: 24px 48px;
  min-width: 0;
  padding: 32px 22px 24px;
  border-radius: var(--tvsp-radius-l);
  background: var(--tvsp-watch-bg);
  color: var(--tvsp-watch-text);

  /* カード内のボタンの色 */
  --tvsp-btn-bg:   var(--tvsp-watch-btn-bg);
  --tvsp-btn-text: var(--tvsp-watch-btn-text);
  --tvsp-btn-icon: var(--tvsp-watch-btn-icon);
}
.tvsp .tvsp-watch__card--tver {   /* TVer の色に切り替え */
  --tvsp-watch-bg:       linear-gradient(120deg, var(--tvsp-tver-from), var(--tvsp-tver-to));
  --tvsp-watch-text:     var(--tvsp-tver-text);
  --tvsp-watch-em:       var(--tvsp-tver-text);
  --tvsp-watch-btn-bg:   var(--tvsp-tver-btn-bg);
  --tvsp-watch-btn-text: var(--tvsp-tver-btn-text);
  --tvsp-watch-btn-icon: var(--tvsp-tver-btn-icon);
}

/* 以前のHTML（tvsp-watch__list で囲んでいない書き方）でも、幅をそろえて中央に */
.tvsp .tvsp-watch > .tvsp-watch__card {
  max-width: var(--tvsp-content);
  margin: 0 auto;
}

/* テキスト */
.tvsp .tvsp-watch__body {
  flex: 3 1 340px;   /* ← この幅より狭くなると、バナーが下に回る */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tvsp .tvsp-watch__label {   /* 「WATCH AGAIN」 */
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .16em;
  color: var(--tvsp-watch-em);
}
.tvsp .tvsp-watch__title {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
}
.tvsp .tvsp-watch__text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.9;
}

/* バナーとボタン */
.tvsp .tvsp-watch__links {
  flex: 2 1 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tvsp .tvsp-watch__banner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-radius: var(--tvsp-radius-m);
  background: var(--tvsp-white);
}
.tvsp .tvsp-watch__banner img {
  width: auto;
  max-height: 80px;
}

@media screen and (min-width: 768px) {
  .tvsp .tvsp-watch__list  { gap: 24px; }
  .tvsp .tvsp-watch__card  { gap: 28px 48px; padding: 44px 40px 40px; }
  .tvsp .tvsp-watch__label { font-size: 12px; }
  .tvsp .tvsp-watch__title { font-size: clamp(24px, 2.6vw, 32px); }
  .tvsp .tvsp-watch__text  { font-size: 15px; }
}