@charset "utf-8";

/* ============================================================================
   特番サイト（単体サイト版）  style.css
   ----------------------------------------------------------------------------
   ■ このファイルについて
     ・ヘッダー・フッターまで含めた、1ページで完結する特番サイト用のCSSです。
     ・テーマは「食の秋」。色・サイズ・飾りのイラストは「1. 設定」の変数にまとめています。
     ・動き（オープニング・スクロール表示など）は js/main.js（jQuery）と連動しています。

   ■ よくある変更と、触る場所
     ・色を変えたい              → 「1. 設定」の --tvsp-main / --tvsp-sub / --tvsp-accent など
     ・線の太さ・角丸             → 「1. 設定」
     ・セクションの上下余白       → 「1. 設定」の --tvsp-section-y
     ・ヘッダーの高さ             → 「1. 設定」の --tvsp-header-h
     ・各ブロックの見た目         → 「4. ヘッダー」「5. セクション」「6. フッター」の該当ブロック
                                   （SP → PC の順で、同じ場所にまとめて書いています）
     ・動きの速さ・タイミング     → 「7. 動き・演出」と js/main.js の CONFIG

   ■ フォント（index.html の <head> で Google Fonts を読み込み）
     ・日本語 … Noto Sans JP
     ・英字・数字の飾り … Poppins

   ■ ブレイクポイント（CSS変数はメディアクエリで使えないため数値で記載）
     ・640px 以上 … 改行 br.pc / br.sp の切り替え、キービジュアルのPC画像
     ・768px 以上 … PCレイアウト（2カラムなど）、出演者を3列に
     ・960px 以上 … ヘッダーのナビを表示（未満はハンバーガーメニュー）
                     （960〜1179px はヘッダーのサイト名を隠して、ナビの場所を確保）

   ■ 目次
     1. 設定（変数）
     2. ベース・リセット
     3. 共通パーツ（見出し／タグ／ボタン／マーカー／改行）
     4. ヘッダー（PCナビ／スマホメニュー）
     5. セクション
        5-1 HERO（キービジュアル・番組名・放送日）
        5-2 PHOTO TICKER（流れる写真の帯）
        5-3 INTRO（番組紹介）
        5-4 MOVIE（予告動画）
        5-5 CORNER（コーナー）
        5-6 LIVE（生中継）
        5-7 CAST（出演者）
        5-8 WATCH（配信案内）
     6. フッター
     7. 動き・演出（js/main.js と連動）
     8. 秋の飾り（イラスト・波形の境目）
   ============================================================================ */


/* ============================================================================
   1. 設定（変数）
   ============================================================================ */
.tvsp {
  /* --- 色：テーマは「食の秋」。柿・いちょう・栗・紅葉の色 --- */
  --tvsp-main:   #F28534;   /* メイン（明るい柿色）：ヘッダーのボタン／写真の帯／メニュー／ON AIR */
  --tvsp-sub:    #FFC93C;   /* サブ（いちょう色）：マーカー／丸タグ／予告動画の背景（薄めて使用） */
  --tvsp-accent: #FF9E7A;   /* アクセント（あんず色）：丸タグ／出演者写真の丸 */
  --tvsp-green:  #A8D06A;   /* 若草色：丸タグ／生中継 */
  --tvsp-sky:    #7FCBE0;   /* 秋空色：旗／生中継 */
  --tvsp-red:    #D93A24;   /* 紅葉色：シール */

  /* --- 色：メイン色まわりの文字色 --- */
  --tvsp-on-main:    #4A2C1E;   /* メイン色の背景にのせる文字（明るい柿色なので焦げ茶の文字に） */
  --tvsp-main-text:  #B84A14;   /* メイン色を「文字」に使うとき（番号・見出しの日本語）。読みやすい濃さに */

  /* --- 色：ベース --- */
  --tvsp-ink:   #4A2C1E;    /* 文字・線（黒ではなく、栗色に近い焦げ茶） */
  --tvsp-gray:  #7A5E4E;    /* 補足テキスト */
  --tvsp-white: #FFFFFF;    /* カードの背景 */
  --tvsp-bg:    #FFFBF2;    /* ページの背景（明るい生成り色） */
  --tvsp-tint:  #FFEFD6;    /* 淡い背景：出演者（かぼちゃ色を薄めた色） */
  --tvsp-live-bg: #E3F3F8;  /* 淡い背景：生中継（秋晴れの空の色） */
  --tvsp-footer-bg: #B8451C; /* フッター（深い柿色） */

  /* --- 飾りのイラスト。紅葉・いちょう・柿・栗は HERO、ほかは各見出しで使用 --- */
  --tvsp-icon-leaf:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='rotate(-18 20 20)'%3E%3Cpath d='M20 3C31 11 33 26 20 37C7 26 9 11 20 3Z' fill='%23D9532B'/%3E%3Cpath d='M20 9V34M20 17l-5-4M20 17l5-4M20 25l-6-4M20 25l6-4' stroke='%23A63A12' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --tvsp-icon-leaf2:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='rotate(35 20 20)'%3E%3Cpath d='M20 3C31 11 33 26 20 37C7 26 9 11 20 3Z' fill='%23D9532B'/%3E%3Cpath d='M20 9V34M20 17l-5-4M20 17l5-4M20 25l-6-4M20 25l6-4' stroke='%23A63A12' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --tvsp-icon-ginkgo:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='rotate(15 20 20)'%3E%3Cpath d='M20 24C11 23 5 16 6 7C10 9 16 10 19 9L20 13L21 9C24 10 30 9 34 7C35 16 29 23 20 24Z' fill='%23F4B731'/%3E%3Cpath d='M20 24V36' stroke='%23C98A12' stroke-width='2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --tvsp-icon-ginkgo2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='rotate(-30 20 20)'%3E%3Cpath d='M20 24C11 23 5 16 6 7C10 9 16 10 19 9L20 13L21 9C24 10 30 9 34 7C35 16 29 23 20 24Z' fill='%23F4B731'/%3E%3Cpath d='M20 24V36' stroke='%23C98A12' stroke-width='2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --tvsp-icon-kaki:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='23' r='13' fill='%23EE7A2E'/%3E%3Cpath d='M11 13c4 4 14 4 18 0c-2 5-16 5-18 0z' fill='%236E8B2E'/%3E%3Cpath d='M20 12V6' stroke='%235A3A1E' stroke-width='2.2' stroke-linecap='round'/%3E%3Cellipse cx='14.5' cy='20' rx='3' ry='2' fill='%23FFB27A'/%3E%3C/svg%3E");
  --tvsp-icon-movie:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='5' y='17' width='30' height='19' rx='3' fill='%234A2C1E'/%3E%3Crect x='5' y='15' width='30' height='5' fill='%23FFC93C'/%3E%3Cpath d='M11 15l3 5M18 15l3 5M25 15l3 5M32 15l3 5' stroke='%234A2C1E' stroke-width='2'/%3E%3Cg transform='rotate(-14 6 14)'%3E%3Crect x='5' y='8' width='30' height='5.5' rx='1.5' fill='%23FFC93C'/%3E%3Cpath d='M10 8l3 5.5M17 8l3 5.5M24 8l3 5.5M31 8l3 5.5' stroke='%234A2C1E' stroke-width='2'/%3E%3C/g%3E%3Cpath d='M17 23.5v9l8-4.5z' fill='%23F28534'/%3E%3C/svg%3E");
  --tvsp-icon-bento:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M8 8L33 4.5M8 10.5L33 7.5' stroke='%238A4B2A' stroke-width='1.8' stroke-linecap='round'/%3E%3Crect x='4' y='12' width='32' height='23' rx='5' fill='%23D93A24'/%3E%3Crect x='7' y='15' width='14' height='17' rx='2.5' fill='%23FFFFFF'/%3E%3Ccircle cx='14' cy='23.5' r='2.6' fill='%23D93A24'/%3E%3Crect x='23' y='15' width='10' height='7.5' rx='2' fill='%23FFC93C'/%3E%3Cpath d='M26.5 15v7.5M29.5 15v7.5' stroke='%23E8A21A' stroke-width='1'/%3E%3Crect x='23' y='24' width='10' height='8' rx='2' fill='%23FFFFFF'/%3E%3Ccircle cx='26' cy='28' r='2.6' fill='%237FB241'/%3E%3Ccircle cx='30.2' cy='27.6' r='2.3' fill='%23F28534'/%3E%3C/svg%3E");
  --tvsp-icon-live:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='5' fill='%23D93A24'/%3E%3Cpath d='M12.9 12.9a10 10 0 0 0 0 14.2M27.1 12.9a10 10 0 0 1 0 14.2' stroke='%23F28534' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M7.6 7.6a17.5 17.5 0 0 0 0 24.8M32.4 7.6a17.5 17.5 0 0 1 0 24.8' stroke='%23FFC93C' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --tvsp-icon-mic:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='14' y='4' width='12' height='19' rx='6' fill='%234A2C1E'/%3E%3Cpath d='M16.5 10h7M16.5 14h7' stroke='%23FFC93C' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M10 18.5a10 10 0 0 0 20 0' stroke='%23F28534' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 28.5v5.5M14 35h12' stroke='%23F28534' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M33 5l1 2.6 2.6 1-2.6 1-1 2.6-1-2.6-2.6-1 2.6-1z' fill='%23FFC93C'/%3E%3C/svg%3E");
  --tvsp-icon-spark:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2C21.5 13 27 18.5 38 20C27 21.5 21.5 27 20 38C18.5 27 13 21.5 2 20C13 18.5 18.5 13 20 2Z' fill='%23FFC93C'/%3E%3C/svg%3E");
  --tvsp-icon-spark2:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2C21.5 13 27 18.5 38 20C27 21.5 21.5 27 20 38C18.5 27 13 21.5 2 20C13 18.5 18.5 13 20 2Z' fill='%23F28534'/%3E%3C/svg%3E");
  --tvsp-icon-kuri:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='rotate(-12 20 20)'%3E%3Cpath d='M20 5C29 10 34 20 32 29C28 35 12 35 8 29C6 20 11 10 20 5Z' fill='%238A4B2A'/%3E%3Cpath d='M8.5 28C14 32 26 32 31.5 28C31 32 27 35.5 20 35.5C13 35.5 9 32 8.5 28Z' fill='%23D9B48A'/%3E%3Cellipse cx='15.5' cy='16' rx='2.5' ry='4.5' fill='%23A8653F'/%3E%3C/g%3E%3C/svg%3E");

  /* --- 色：HERO（キービジュアルまわり） --- */
  --tvsp-hero-bg:        var(--tvsp-bg);        /* 背景 */
  --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-red);       /* シールの背景 */
  --tvsp-sticker-text:   #FFFFFF;               /* シールの文字 */

  /* --- 色：MOVIE（予告動画の背景）。サブ色を白で薄めた、やわらかい色 --- */
  --tvsp-movie-bg: color-mix(in srgb, var(--tvsp-sub) 30%, #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;   /* ボタン右端の丸（中の矢印は白） */

  /* --- フォント --- */
  --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-wide:      1200px;  /* ヘッダー・フッターの最大幅 */
  --tvsp-gutter:    20px;    /* 左右の余白 */
  --tvsp-section-y: 72px;    /* セクションの上下余白 */

  /* --- ヘッダー・動き --- */
  --tvsp-header-h:  72px;    /* ヘッダーの高さ（960px以上は下の @media で 96px） */
  --tvsp-ease:      cubic-bezier(.22, 1, .36, 1);   /* 動きのなめらかさ（すっと動いて、ゆっくり止まる） */
}
@media screen and (min-width: 768px) {
  .tvsp {
    --tvsp-radius-l:  20px;
    --tvsp-radius-m:  16px;
    --tvsp-gutter:    40px;
    --tvsp-section-y: 128px;
  }
}
@media screen and (min-width: 960px) {
  .tvsp {
    --tvsp-header-h:  96px;
  }
}


/* ============================================================================
   2. ベース・リセット
   ============================================================================ */
html {
  scrollbar-gutter: stable;          /* メニューや拡大表示を開いたときに、画面が横にずれないように */
  -webkit-text-size-adjust: 100%;
}
html.is-locked { overflow: hidden; } /* メニュー・拡大表示中は、後ろのページをスクロールさせない */
body {
  margin: 0;
  background: #FFFBF2;
}

.tvsp {
  overflow-x: clip;                  /* 横はみ出し防止（hidden だと固定ヘッダーが効かなくなるため clip） */
  font-family: var(--tvsp-font-ja);
  font-size: 16px;
  line-height: 1.8;
  color: var(--tvsp-ink);
  text-align: left;
  background: var(--tvsp-bg);
}
.tvsp *,
.tvsp *::before,
.tvsp *::after { box-sizing: border-box; }

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

.tvsp h1,
.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-corner__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; }

.tvsp button { font: inherit; color: inherit; }

/* キーボード操作時のフォーカス枠 */
.tvsp a:focus-visible,
.tvsp button:focus-visible {
  outline: 3px solid var(--tvsp-main);
  outline-offset: 3px;
}

/* 固定ヘッダーの分、ページ内リンクの移動先を下げる（JSが動かないとき用） */
.tvsp [id] { scroll-margin-top: var(--tvsp-header-h); }

/* 読み上げ専用（画面には表示しない） */
.tvsp .tvsp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 「本文へスキップ」（キーボード操作のときだけ表示） */
.tvsp .tvsp-skip {
  position: fixed;
  top: -64px;
  left: 12px;
  z-index: 1100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--tvsp-ink);
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  transition: top .2s;
}
.tvsp .tvsp-skip:focus { top: 12px; }


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

/* ----------------------------------------------------------------------------
   3-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; }
}

/* ----------------------------------------------------------------------------
   3-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; }
}

/* ----------------------------------------------------------------------------
   3-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; }
}

/* ----------------------------------------------------------------------------
   3-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;
}

/* ----------------------------------------------------------------------------
   3-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; }
}


/* ============================================================================
   4. ヘッダー
   ・画面の上に固定。スクロールすると白い背景がつき、下にスクロール中は隠れます
     （上にスクロールすると、また出てきます）
   ・960px 以上：ナビを横並びで表示
     960px 未満：ハンバーガーボタン → 全画面メニュー
   ============================================================================ */
.tvsp .tvsp-main { padding-top: var(--tvsp-header-h); }   /* 固定ヘッダーの分だけ本文を下げる */

.tvsp .tvsp-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  height: var(--tvsp-header-h);
  transition: transform .5s var(--tvsp-ease), background-color .3s, box-shadow .3s;
}
.tvsp .tvsp-header.is-scrolled,
html.is-menu-open .tvsp .tvsp-header {   /* スクロール後・メニュー表示中は白背景 */
  background: rgba(255, 251, 242, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(74, 44, 30, .08);
}
.tvsp .tvsp-header.is-hidden { transform: translateY(-100%); }   /* 下スクロール中は隠す */
html.is-menu-open .tvsp .tvsp-header { transform: none; }

.tvsp .tvsp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--tvsp-wide);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--tvsp-gutter);
}

/* 番組ロゴ＋サイト名 */
.tvsp .tvsp-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}
.tvsp .tvsp-header__logo {   /* 番組ロゴ（縦幅のあるロゴでも見やすい高さに） */
  flex-shrink: 0;
  width: auto;
  max-width: 150px;            /* 横長すぎるロゴでもメニューボタンとぶつからないように */
  height: 52px;                /* ← ロゴの高さ（PCは下の @media で変更） */
  object-fit: contain;
  object-position: left center;
}
.tvsp .tvsp-header__name {
  overflow: hidden;
  padding-left: 12px;
  border-left: 1px solid rgba(74, 44, 30, .2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media screen and (max-width: 389px) {
  .tvsp .tvsp-header__name { display: none; }   /* 狭いスマホでは「…」で切れるので隠す（HEROに大きく出ているため） */
}

/* ----------------------------------------------------------------------------
   4-1 PCナビ（960px以上で表示）
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-gnav { display: none; }

/* ボタンの小さいサイズ・青いボタン（ヘッダーで使用） */
.tvsp .tvsp-btn--main {
  --tvsp-btn-bg:   var(--tvsp-main);
  --tvsp-btn-text: var(--tvsp-on-main);
  --tvsp-btn-icon: var(--tvsp-ink);
}
.tvsp .tvsp-btn.tvsp-btn--sm {
  min-height: 46px;
  padding: 0 5px 0 20px;
  font-size: 14px;
}
.tvsp .tvsp-btn--sm::after {
  width: 34px;
  height: 34px;
}

@media screen and (min-width: 960px) and (max-width: 1179px) {
  .tvsp .tvsp-header__name { display: none; }   /* ナビが入りきらない幅ではサイト名を隠す */
}
@media screen and (min-width: 960px) {
  .tvsp .tvsp-header__logo { height: 72px; max-width: 220px; }
  .tvsp .tvsp-header__name { font-size: 13px; }

  .tvsp .tvsp-gnav {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .tvsp .tvsp-gnav__list {
    display: flex;
    gap: 4px;
  }
  .tvsp .tvsp-gnav__list a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 14px 10px;
    text-decoration: none;
  }
  .tvsp .tvsp-gnav__list .en {   /* 上の小さい英字 */
    font-family: var(--tvsp-font-en);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .14em;
    color: var(--tvsp-main-text);
  }
  .tvsp .tvsp-gnav__list .ja {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
  }
  .tvsp .tvsp-gnav__list a::after {   /* 下線（マウスをのせた時・今いるセクション） */
    content: "";
    position: absolute;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--tvsp-main);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .45s var(--tvsp-ease);
  }
  .tvsp .tvsp-gnav__list a:hover::after,
  .tvsp .tvsp-gnav__list a.is-current::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* ----------------------------------------------------------------------------
   4-2 スマホメニュー（960px未満）
   ・右上のボタンから、円が広がるように開きます
   ---------------------------------------------------------------------------- */

/* ハンバーガーボタン */
.tvsp .tvsp-menu-btn {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tvsp-main);
  cursor: pointer;
}
.tvsp .tvsp-menu-btn span {   /* 3本線 */
  position: absolute;
  left: 14px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--tvsp-on-main);
  transition: transform .45s var(--tvsp-ease), opacity .2s;
}
.tvsp .tvsp-menu-btn span:nth-child(1) { top: 16px; }
.tvsp .tvsp-menu-btn span:nth-child(2) { top: 22px; }
.tvsp .tvsp-menu-btn span:nth-child(3) { top: 28px; }
html.is-menu-open .tvsp .tvsp-menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }   /* × にする */
html.is-menu-open .tvsp .tvsp-menu-btn span:nth-child(2) { opacity: 0; }
html.is-menu-open .tvsp .tvsp-menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* メニュー本体 */
.tvsp .tvsp-menu {
  position: fixed;
  top: var(--tvsp-header-h);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  overflow-y: auto;
  padding: 24px var(--tvsp-gutter) 48px;
  background: var(--tvsp-main);
  color: var(--tvsp-on-main);
  visibility: hidden;
  clip-path: circle(0 at calc(100% - var(--tvsp-gutter) - 23px) 0);
  transition: clip-path .7s var(--tvsp-ease), visibility 0s .7s;
}
html.is-menu-open .tvsp .tvsp-menu {
  visibility: visible;
  clip-path: circle(150% at calc(100% - var(--tvsp-gutter) - 23px) 0);
  transition: clip-path .8s var(--tvsp-ease), visibility 0s;
}

.tvsp .tvsp-menu__list li {   /* リンクが1つずつ下から出てくる */
  border-bottom: 1px solid rgba(74, 44, 30, .2);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .4s, transform .6s var(--tvsp-ease);
}
html.is-menu-open .tvsp .tvsp-menu__list li { opacity: 1; transform: none; }
html.is-menu-open .tvsp .tvsp-menu__list li:nth-child(1) { transition-delay: .15s; }
html.is-menu-open .tvsp .tvsp-menu__list li:nth-child(2) { transition-delay: .2s; }
html.is-menu-open .tvsp .tvsp-menu__list li:nth-child(3) { transition-delay: .25s; }
html.is-menu-open .tvsp .tvsp-menu__list li:nth-child(4) { transition-delay: .3s; }
html.is-menu-open .tvsp .tvsp-menu__list li:nth-child(5) { transition-delay: .35s; }
html.is-menu-open .tvsp .tvsp-menu__list li:nth-child(6) { transition-delay: .4s; }

.tvsp .tvsp-menu__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  text-decoration: none;
}
.tvsp .tvsp-menu__list .ja {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.4;
}
.tvsp .tvsp-menu__list .en {
  font-family: var(--tvsp-font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  opacity: .75;
}

/* メニュー下部（放送日） */
.tvsp .tvsp-menu__foot {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 32px;
  opacity: 0;
  transition: opacity .5s;
}
html.is-menu-open .tvsp .tvsp-menu__foot { opacity: 1; transition-delay: .45s; }
.tvsp .tvsp-menu__onair {
  font-size: 14px;
  font-weight: 700;
}

@media screen and (min-width: 960px) {
  .tvsp .tvsp-menu-btn,
  .tvsp .tvsp-menu { display: none; }
}


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

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

/* キービジュアル */
.tvsp .tvsp-hero__kv {
  /* ファーストビュー（最初の1画面）に放送日まで入るよう、画面の高さに合わせて大きさを調整
     --tvsp-kv-ratio      … キービジュアルの 横÷縦（SP画像 1280÷1200）
     --tvsp-hero-reserve  … キービジュアル以外に必要な高さ（ヘッダー・番組名・放送日など）
     ※ 画像は切り抜かず、比率そのまま縮小します */
  --tvsp-kv-ratio: 1.0667;
  --tvsp-hero-reserve: 376px;
  position: relative;
  max-width: max(200px, min(var(--tvsp-content), calc((100vh - var(--tvsp-hero-reserve)) * var(--tvsp-kv-ratio))));
  max-width: max(200px, min(var(--tvsp-content), calc((100svh - 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画像 2240÷1014 */
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .tvsp .tvsp-hero__kv { --tvsp-hero-reserve: 506px; }
}
@media screen and (min-width: 1024px) {
  .tvsp .tvsp-hero__kv { --tvsp-hero-reserve: 396px; }
}
.tvsp .tvsp-hero__kv-img {   /* 画像の枠（表示アニメーション用に角丸と切り抜きはここで） */
  overflow: hidden;
  border-radius: var(--tvsp-radius-l);
}
.tvsp .tvsp-hero__kv img {
  width: 100%;
}

/* シール（周年など。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-sticker-text);
  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: 16px;
  max-width: var(--tvsp-content);
  margin: 20px auto 0;
}
.tvsp .tvsp-hero__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  container-type: inline-size;   /* 番組名の文字サイズを、この幅に合わせて決めるため */
}

/* 番組名 */
.tvsp .tvsp-hero__title {
  margin-top: 4px;
  font-family: var(--tvsp-font-title);
  font-size: clamp(24px, 7.4vw, 60px);              /* 古いブラウザ用 */
  font-size: min(9.2cqi, 64px);                     /* 幅に合わせて、番組名（10文字）が1行に収まる大きさ */
  white-space: nowrap;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .04em;
}
.tvsp .tvsp-hero__title .tvsp-hl { color: var(--tvsp-hero-hl); }   /* 色を変える部分 */

/* サブタイトル */
.tvsp .tvsp-hero__sub {
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
}

/* 放送日のまとまり */
.tvsp .tvsp-hero__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 放送日ボックス（目立つように、柿色の太い枠＋大きな日付）
   ・スマホ  … 上に「ON AIR」の帯、その下に日付と時間
   ・タブレット … 横長の帯（ON AIR｜日付｜時間）
   ・PC（1024px〜）… 番組名の右に並べる */
.tvsp .tvsp-onair {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 3px solid var(--tvsp-main);
  border-radius: 16px;
  background: var(--tvsp-white);
  color: var(--tvsp-ink);
}
.tvsp .tvsp-onair__label {   /* 「ON AIR」 */
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--tvsp-main);
  font-family: var(--tvsp-font-en);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .16em;
  color: var(--tvsp-on-main);
}
.tvsp .tvsp-onair__label::after {   /* 赤い丸（点滅） */
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tvsp-red);
  box-shadow: 0 0 0 2px #FFFFFF;
  animation: tvsp-blink 1.4s ease-in-out infinite;
}
.tvsp .tvsp-onair__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 8px 14px 12px;
}
.tvsp .tvsp-onair__date {   /* 日付 */
  display: flex;
  align-items: baseline;
  column-gap: 6px;
  font-family: var(--tvsp-font-ja);
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tvsp .tvsp-onair__year {   /* 年 */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--tvsp-gray);
}
.tvsp .tvsp-onair__day {   /* 「10.31」 */
  font-family: var(--tvsp-font-en);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--tvsp-main-text);
}
.tvsp .tvsp-onair__dow {   /* 「（土）」 */
  font-size: 17px;
}
.tvsp .tvsp-onair__time {   /* 放送時間（1行） */
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.4;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tvsp .tvsp-onair__time::before {   /* 時計のマーク */
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F28534' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

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

  .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 { gap: 24px; margin-top: 32px; }
  .tvsp .tvsp-hero__text { gap: 8px; }

  /* 放送日：横長の帯（ON AIR｜日付｜時間） */
  .tvsp .tvsp-onair { flex-direction: row; border-width: 4px; border-radius: 22px; }
  .tvsp .tvsp-onair__label { flex-direction: column; padding: 0 24px; font-size: 13px; }
  .tvsp .tvsp-onair__body {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px 32px;
    padding: 14px 28px;
  }
  .tvsp .tvsp-onair__year { font-size: 15px; }
  .tvsp .tvsp-onair__day  { font-size: 56px; }
  .tvsp .tvsp-onair__dow  { font-size: 22px; }
  .tvsp .tvsp-onair__time { gap: 10px; font-size: clamp(20px, 2.4vw, 26px); }
  .tvsp .tvsp-onair__time::before { width: 22px; height: 22px; }
}

/* PC（1024px〜）：番組名（左）と放送日（右）を横並びにして、1画面に収める */
@media screen and (min-width: 1024px) {
  .tvsp .tvsp-hero__info {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
  }
  .tvsp .tvsp-hero__text  { flex: 1; min-width: 0; }
  .tvsp .tvsp-hero__title { font-size: min(9.2cqi, 56px); }
  .tvsp .tvsp-hero__side  { flex-shrink: 0; }
  .tvsp .tvsp-onair__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 26px 14px;
  }
  .tvsp .tvsp-onair__day  { font-size: 52px; }
  .tvsp .tvsp-onair__time { font-size: 21px; }
}

/* ----------------------------------------------------------------------------
   5-2 PHOTO TICKER（流れる写真の帯）
   ・小さい写真が右から左へ流れ続けます（マウスをのせると一時停止）
   ・HTMLで同じ <ul> を2つ並べると、途切れずにループします
   ・流れる速さは animation の秒数で調整（数字が大きいほどゆっくり）
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-ticker {
  overflow: hidden;
  padding: 14px 0;
  background: var(--tvsp-main);
}
.tvsp .tvsp-ticker__track {
  display: flex;
  width: max-content;
  animation: tvsp-ticker 60s linear infinite;   /* ← 速さ */
}
.tvsp .tvsp-ticker:hover .tvsp-ticker__track { animation-play-state: paused; }
.tvsp .tvsp-ticker ul {
  display: flex;
  flex-shrink: 0;
}
.tvsp .tvsp-ticker li {
  flex-shrink: 0;
  width: 168px;               /* ← 写真1枚の幅 */
  margin-right: 10px;         /* ← 写真の間隔（ループのずれ防止のため gap ではなく margin） */
}
.tvsp .tvsp-ticker img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}
@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     { padding: 20px 0; }
  .tvsp .tvsp-ticker li  { width: 248px; margin-right: 14px; }
  .tvsp .tvsp-ticker img { border-radius: 10px; }
}

/* ----------------------------------------------------------------------------
   5-3 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 {   /* イラスト｜Intro の横並び、その下に「番組紹介」 */
    grid-row: 1 / span 2;
    align-self: start;
    align-content: flex-start;
    align-items: center;
    margin: 0;
  }
  .tvsp .tvsp-intro .tvsp-head__ja { flex-basis: 100%; }
  .tvsp .tvsp-intro__lead { margin-bottom: 32px; font-size: 36px; }
  .tvsp .tvsp-intro__text { font-size: 17px; line-height: 2.15; }
}

/* ----------------------------------------------------------------------------
   5-4 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;
}

/* サムネイル（クリックするとJSで動画に差し替わる。JSが動かないときはYouTubeが開く） */
.tvsp .tvsp-movie__thumb {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
}
.tvsp .tvsp-movie__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--tvsp-ease);
}
.tvsp .tvsp-movie__thumb::after {   /* 文字を読みやすくする暗いグラデーション */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(74, 44, 30, .65), rgba(74, 44, 30, .05) 60%);
}
.tvsp .tvsp-movie__play {   /* 再生ボタン */
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  background: var(--tvsp-main) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23FFFFFF'/%3E%3C/svg%3E") 56% 50% / 28px no-repeat;
  transition: transform .4s var(--tvsp-ease);
}
.tvsp .tvsp-movie__play::before {   /* 広がる輪 */
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  animation: tvsp-ripple 2.2s ease-out infinite;
}
@keyframes tvsp-ripple {
  from { transform: scale(1);   opacity: .8; }
  to   { transform: scale(1.8); opacity: 0; }
}
.tvsp .tvsp-movie__label {   /* 「PLAY MOVIE」 */
  position: absolute;
  bottom: 14px;
  left: 18px;
  z-index: 1;
  font-family: var(--tvsp-font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
}
.tvsp .tvsp-movie__thumb:hover img                { transform: scale(1.05); }
.tvsp .tvsp-movie__thumb:hover .tvsp-movie__play  { transform: scale(1.08); }

@media screen and (min-width: 768px) {
  .tvsp .tvsp-movie__play {
    width: 104px;
    height: 104px;
    margin: -52px 0 0 -52px;
    background-size: 38px;
  }
  .tvsp .tvsp-movie__label { bottom: 24px; left: 32px; font-size: 13px; }
}

/* ----------------------------------------------------------------------------
   5-5 CORNER（コーナー）
   ・冒頭に、コーナー全体の概要（文章＋画像）
   ・各コーナーの頭は「番号｜丸タグ（1文字）」の横並び。番組ロゴはタイトルの下（1つ or 2つ）
   ・スマホは番号・文章が上、写真が下。PCは左右に並ぶ
   ・番号（01, 02 …）は CSS で自動で振られます
   ・PC では偶数番目が自動で左右反転します
   ・写真は1〜4枚。枚数に合わせて並び方が自動で切り替わります
       1枚 … 1枚を大きく
       2枚 … 大きい写真に、2枚目を右下に少し重ねる
       3枚 … 1枚目を大きく、下に2枚を横並び
       4枚 … 2×2 で同じ大きさに並べる
     （古いブラウザ対策として、HTMLに tvsp-corner__photos--枚数 も付けておくと確実）
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-corners {
  padding: var(--tvsp-section-y) var(--tvsp-gutter);
}

/* --- コーナー全体の概要（文章＋画像） --- */
.tvsp .tvsp-corners__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: var(--tvsp-content);
  margin: 0 auto 72px;
}
.tvsp .tvsp-corners__lead {   /* キャッチコピー */
  margin-bottom: 14px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: .02em;
  font-feature-settings: "palt";
}
.tvsp .tvsp-corners__text {
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
}
.tvsp .tvsp-corners__img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--tvsp-radius-l);
}

/* --- コーナーの一覧 --- */
.tvsp .tvsp-corners__list {
  display: flex;
  flex-direction: column;
  gap: 72px;   /* コーナー同士の間隔 */
  max-width: var(--tvsp-content);
  margin: 0 auto;
  counter-reset: tvsp-corner;
}
.tvsp .tvsp-corner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  counter-increment: tvsp-corner;
}

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

/* --- 写真2枚：1枚目を大きく、2枚目を右下に重ねる --- */
.tvsp .tvsp-corner__photos--2,
.tvsp .tvsp-corner__photos:has(> figure:nth-child(2):last-child) {
  display: block;
}
.tvsp .tvsp-corner__photos--2 figure:first-child,
.tvsp .tvsp-corner__photos:has(> figure:nth-child(2):last-child) figure:first-child {
  width: 88%;
}
.tvsp .tvsp-corner__photos--2 figure:nth-child(2),
.tvsp .tvsp-corner__photos:has(> figure:nth-child(2):last-child) figure:nth-child(2) {
  position: relative;
  width: 56%;
  margin: -16% 0 0 auto;   /* 1枚目に重ねる量 */
  padding: 5px;            /* 重なり部分のフチ（背景と同じ色） */
  border-radius: calc(var(--tvsp-radius-m) + 5px);
  background: var(--tvsp-bg);
}

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

/* --- テキスト --- */
.tvsp .tvsp-corner__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 頭の行：番号｜丸タグ（高さをそろえています） */
.tvsp .tvsp-corner__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  --tvsp-corner-h: 48px;   /* ← 番号・丸タグの高さ（PCは下の @media で変更） */
}
.tvsp .tvsp-corner__head::before {   /* 自動の番号 */
  content: counter(tvsp-corner, decimal-leading-zero);
  font-family: var(--tvsp-font-en);
  font-size: calc(var(--tvsp-corner-h) * 1.1);
  font-weight: 700;
  line-height: var(--tvsp-corner-h);
  color: var(--tvsp-main-text);
}
.tvsp .tvsp-corner__tag {   /* 丸の中に食材の文字（1〜2文字）。色は下の「食材ごとの色」で指定 */
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--tvsp-corner-h);
  height: var(--tvsp-corner-h);
  border-radius: 50%;
  background: var(--tvsp-sub);
  font-size: calc(var(--tvsp-corner-h) * .46);
  font-weight: 900;
  line-height: 1;
}
.tvsp .tvsp-corner:nth-child(3n+2) .tvsp-corner__tag { background: var(--tvsp-accent); }
.tvsp .tvsp-corner:nth-child(3n)   .tvsp-corner__tag { background: var(--tvsp-green); }

/* 2文字の言葉（野菜・果物など）は、文字を小さくして丸に収める */
.tvsp .tvsp-corner .tvsp-corner__tag--2 {
  font-size: calc(var(--tvsp-corner-h) * .32);
  letter-spacing: -.04em;
}

/* 食材ごとの色（言葉のイメージに合わせた色）。HTMLの丸に class を付けて使う */
.tvsp .tvsp-corner .tvsp-corner__tag.is-meat  { background: #FF9C8A; }   /* 肉：赤身のローズ色 */
.tvsp .tvsp-corner .tvsp-corner__tag.is-fish  { background: #8FD3EA; }   /* 魚：海の水色 */
.tvsp .tvsp-corner .tvsp-corner__tag.is-veg   { background: #A8D06A; }   /* 野菜：若草色 */
.tvsp .tvsp-corner .tvsp-corner__tag.is-rice  { background: #F7E3A1; }   /* 米：稲穂の淡い金色 */
.tvsp .tvsp-corner .tvsp-corner__tag.is-fruit { background: #FFA552; }   /* 果物：柿・みかんの色 */

/* 番組ロゴ（タイトルの下。1つ・2つのどちらでもOK） */
.tvsp .tvsp-corner__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.tvsp .tvsp-corner__logos li {
  display: flex;
  align-items: center;
  height: 44px;              /* ← ロゴの高さ（PCは下の @media で変更） */
}
.tvsp .tvsp-corner__logos img {
  width: auto;
  max-width: 150px;
  height: 100%;
  object-fit: contain;
}

.tvsp .tvsp-corner__title {
  font-size: 23px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
}
.tvsp .tvsp-corner__ttl {
  font-size: 17px;
  font-weight: 700;
  line-height: 2;
}

.tvsp .tvsp-corner__text {
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
}

@media screen and (max-width: 767px) {
  .tvsp .tvsp-corner__body { order: -1; }   /* スマホは番号・文章を上、写真を下に */
}

@media screen and (min-width: 768px) {
  /* 概要：文章（左）と画像（右）を横並びに */
  .tvsp .tvsp-corners__intro {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: 56px;
    margin-bottom: 128px;
  }
  .tvsp .tvsp-corners__lead { margin-bottom: 20px; font-size: 30px; }
  .tvsp .tvsp-corners__text { font-size: 16px; line-height: 2.05; }

  .tvsp .tvsp-corners__list { gap: 120px; }

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

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

  .tvsp .tvsp-corner__body        { gap: 20px; }
  .tvsp .tvsp-corner__head        { gap: 12px 16px; --tvsp-corner-h: 68px; }
  .tvsp .tvsp-corner__logos li    { height: 52px; }
  .tvsp .tvsp-corner__logos img   { max-width: 180px; }
  .tvsp .tvsp-corner__title       { font-size: clamp(24px, 2.6vw, 30px); }
  .tvsp .tvsp-corner__ttl        { font-size: 18px; line-height: 2.05; }
  .tvsp .tvsp-corner__text        { font-size: 16px; line-height: 2.05; }
}

/* ----------------------------------------------------------------------------
   5-6 LIVE（生中継）
   ・秋晴れの空のような明るい背景に、白いカードを縦に並べます
   ・カードの上の色帯と「LIVE」ラベルの色は、柿色 → 若草色 → 秋空色 の順で自動
   ・1つのカード：写真（1〜3枚）｜LIVE番号・番組ロゴ・場所と時間・タイトル・文章・リンクバナー
   ・スマホは番号・タイトルが上、写真が下。PCは写真が左、文章が右
   ・写真は1〜3枚。枚数に合わせて並び方が自動で切り替わります
       1枚 … 1枚を大きく
       2枚 … 2枚を同じ大きさで横に並べる
       3枚 … 1枚目を大きく、下に2枚を横並び
     （古いブラウザ対策として、HTMLに tvsp-live__photos--枚数 も付けておくと確実）
   ・「LIVE 01」の番号は自動で振られます
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-live {
  padding: var(--tvsp-section-y) var(--tvsp-gutter);
  background: var(--tvsp-live-bg);
}

.tvsp .tvsp-live__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: var(--tvsp-content);
  margin: 0 auto;
  counter-reset: tvsp-live;
}

/* カード */
.tvsp .tvsp-live__item {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px 12px 24px;
  border-radius: var(--tvsp-radius-l);
  background: var(--tvsp-white);
  box-shadow: inset 0 8px 0 var(--tvsp-live-color);   /* 上のカラー帯 */
  counter-increment: tvsp-live;
  --tvsp-live-color: var(--tvsp-main);
}
/* カードごとの色（柿色 → 若草色 → 秋空色 の順で自動） */
.tvsp .tvsp-live__item:nth-child(3n+2) { --tvsp-live-color: var(--tvsp-green); }
.tvsp .tvsp-live__item:nth-child(3n)   { --tvsp-live-color: var(--tvsp-sky); }

/* 写真：基本（1枚・3枚の並び：1枚目を全幅、残りを2列） */
.tvsp .tvsp-live__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.tvsp .tvsp-live__photos figure:first-child { grid-column: 1 / -1; }
/* 写真2枚：2枚を同じ大きさで横に並べる */
.tvsp .tvsp-live__photos--2 figure:first-child,
.tvsp .tvsp-live__photos:has(> figure:nth-child(2):last-child) figure:first-child {
  grid-column: auto;
}
.tvsp .tvsp-live__photos img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* テキスト */
.tvsp .tvsp-live__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 8px;
}
.tvsp .tvsp-live__head {   /* LIVE番号（左）と番組ロゴ（右） */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tvsp .tvsp-live__label {   /* 「● LIVE 01」 */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--tvsp-live-color);
  color: var(--tvsp-ink);
  font-family: var(--tvsp-font-en);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
}
.tvsp .tvsp-live__label::before {   /* 赤い点（点滅） */
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tvsp-red);
  box-shadow: 0 0 0 2px #FFFFFF;
  animation: tvsp-blink 1.4s ease-in-out infinite;
}
.tvsp .tvsp-live__label::after { content: counter(tvsp-live, decimal-leading-zero); }
@keyframes tvsp-blink {
  50% { opacity: .25; }
}
.tvsp .tvsp-live__logo img {   /* 番組ロゴ */
  width: auto;
  max-width: 140px;
  height: 36px;
  object-fit: contain;
}
.tvsp .tvsp-live__meta {   /* 場所・時間 */
  font-size: 13px;
  font-weight: 700;
  color: var(--tvsp-gray);
}
.tvsp .tvsp-live__title {
  font-size: 21px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
  font-feature-settings: "palt";
}
.tvsp .tvsp-live__text {
  font-size: 14px;
  font-weight: 500;
  line-height: 2;
}
.tvsp .tvsp-live__banner {   /* リンクバナー */
  display: block;
  overflow: hidden;
  margin-top: 6px;
  border-radius: var(--tvsp-radius-s);
  outline: 1px solid rgba(74, 44, 30, .12);
  outline-offset: -1px;
}
.tvsp .tvsp-live__banner img {
  width: 100%;
  transition: transform .6s var(--tvsp-ease);
}
.tvsp .tvsp-live__banner:hover img { transform: scale(1.03); }

@media screen and (max-width: 767px) {
  .tvsp .tvsp-live__body { order: -1; }   /* スマホは番号・タイトルを上、写真を下に */
}

@media screen and (min-width: 768px) {
  .tvsp .tvsp-live__list { gap: 32px; }
  .tvsp .tvsp-live__item {   /* 写真（左）とテキスト（右）を横並びに */
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
    gap: 40px;
    padding: 32px 40px 24px 24px;
  }
  .tvsp .tvsp-live__photos { gap: 8px; }
  .tvsp .tvsp-live__body   { gap: 16px; padding: 0; }
  .tvsp .tvsp-live__logo img { height: 44px; max-width: 170px; }
  .tvsp .tvsp-live__title  { font-size: clamp(22px, 2.4vw, 26px); }
  .tvsp .tvsp-live__text   { font-size: 15px; }
}

/* ----------------------------------------------------------------------------
   5-7 CAST（出演者）
   ・宣材写真はトリミングせず、元の比率のまま表示します
   ・写真右下の丸の色は 黄→オレンジ→メイン の順で自動
   ・列数：スマホ2列 → 768px以上で3列（6人で 3×2 にそろう）
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-cast {
  padding: var(--tvsp-section-y) var(--tvsp-gutter);
  background: var(--tvsp-tint);
}
.tvsp .tvsp-cast__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* ← 列数 */
  gap: 12px;
  max-width: var(--tvsp-content);
  margin: 0 auto;
}

/* カード */
.tvsp .tvsp-cast__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 8px 18px;
  border-radius: var(--tvsp-radius-m);
  background: var(--tvsp-white);
  transition: translate .4s var(--tvsp-ease), box-shadow .4s;
}
@media (hover: hover) {   /* マウスをのせると少し浮く（写真は切り抜かない） */
  .tvsp .tvsp-cast__item:hover {
    translate: 0 -6px;
    box-shadow: 0 16px 32px -14px rgba(74, 44, 30, .3);
  }
}

/* 写真 */
.tvsp .tvsp-cast__photo {
  position: relative;
  width: 100%;
  margin: 0 0 12px;
}
.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 6px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.45;
}
.tvsp .tvsp-cast__role {
  padding: 0 6px;
  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: 20px; }
  .tvsp .tvsp-cast__item          { padding: 10px 10px 22px; }
  .tvsp .tvsp-cast__photo         { margin-bottom: 16px; }
  .tvsp .tvsp-cast__photo::after  { right: 12px; bottom: -11px; width: 22px; height: 22px; }
  .tvsp .tvsp-cast__name          { padding: 0 8px; font-size: 19px; }
  .tvsp .tvsp-cast__role          { padding: 0 8px; font-size: 13px; }
}
@media screen and (min-width: 768px) {
  .tvsp .tvsp-cast__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* ← PCの列数 */
}

/* ----------------------------------------------------------------------------
   5-8 WATCH（配信案内）
   ・配信先（topo）に合わせた色
   ・色は「1. 設定」の --tvsp-watch-○○ で変更
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-watch {
  padding: var(--tvsp-section-y) var(--tvsp-gutter);
}
.tvsp .tvsp-watch__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: var(--tvsp-content);
  margin: 0 auto;
  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__body {
  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 {
  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);
  transition: transform .4s var(--tvsp-ease);
}
.tvsp .tvsp-watch__banner:hover { transform: scale(1.02); }
.tvsp .tvsp-watch__banner img {
  width: auto;
  max-height: 80px;
}

@media screen and (min-width: 768px) {
  .tvsp .tvsp-watch__card {   /* テキスト（左）とバナー（右）を横並びに */
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: center;
    gap: 48px;
    padding: 56px;
  }
  .tvsp .tvsp-watch__label { font-size: 12px; }
  .tvsp .tvsp-watch__title { font-size: clamp(26px, 3vw, 34px); }
  .tvsp .tvsp-watch__text  { font-size: 15px; }
}


/* ============================================================================
   6. フッター
   ============================================================================ */
.tvsp .tvsp-footer {
  position: relative;
  overflow: hidden;
  padding: 64px var(--tvsp-gutter) 28px;
  background: var(--tvsp-footer-bg);
  color: #FFFFFF;
}
.tvsp .tvsp-footer__inner {
  position: relative;
  z-index: 1;
  max-width: var(--tvsp-wide);
  margin: 0 auto;
}

/* 背景の大きな英字（飾り） */
.tvsp .tvsp-footer__deco {
  position: absolute;
  right: -.04em;
  bottom: -.2em;
  font-family: var(--tvsp-font-en);
  font-size: clamp(96px, 18vw, 240px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, .08);
  pointer-events: none;
}

/* 上段：番組情報（左）＋メニュー（右） */
.tvsp .tvsp-footer__top {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 48px;
}
.tvsp .tvsp-footer__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.tvsp .tvsp-footer__tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #FFE3A3;
}
.tvsp .tvsp-footer__title {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .04em;
  font-feature-settings: "palt";
}
.tvsp .tvsp-footer__title .tvsp-hl { color: #FFD36B; }   /* 柿色の背景でも読めるいちょう色 */
.tvsp .tvsp-footer__title small {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  opacity: .8;
}
.tvsp .tvsp-footer__onair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
}
.tvsp .tvsp-footer__onair span {   /* 「ON AIR」 */
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tvsp-sub);
  color: var(--tvsp-ink);
  font-family: var(--tvsp-font-en);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .14em;
}

/* フッターメニュー */
.tvsp .tvsp-footer__nav ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}
.tvsp .tvsp-footer__nav a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color .25s;
}
.tvsp .tvsp-footer__nav .en {
  font-family: var(--tvsp-font-en);
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .75);
}
.tvsp .tvsp-footer__nav a:hover { color: var(--tvsp-sub); }

/* 下段：局ロゴ・コピーライト */
.tvsp .tvsp-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.tvsp .tvsp-footer__station {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}
.tvsp .tvsp-footer__station img {
  width: auto;
  height: 30px;
}
.tvsp .tvsp-footer__copy {
  font-size: 11px;
  letter-spacing: .04em;
  opacity: .6;
}

@media screen and (min-width: 768px) {
  .tvsp .tvsp-footer { padding: 96px var(--tvsp-gutter) 32px; }
  .tvsp .tvsp-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 64px;
    padding-bottom: 72px;
  }
  .tvsp .tvsp-footer__title { font-size: 40px; }
  .tvsp .tvsp-footer__nav a { padding: 18px 0; font-size: 15px; }
  .tvsp .tvsp-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}


/* ============================================================================
   7. 動き・演出（js/main.js と連動）
   ----------------------------------------------------------------------------
   ・<html> に付くクラスで切り替えています
       js         … JSが使える（<head> の小さなスクリプトで付与）
       is-ready   … main.js が動き始めた
       is-locked  … メニュー・拡大表示中（スクロール停止）
       is-menu-open … スマホメニュー表示中
   ・万一JSが動かなくても、中身が見えなくならないように安全策を入れています
   ============================================================================ */

/* ----------------------------------------------------------------------------
   7-1 オープニング（ローディング画面）
   ・クリーム色の画面に、ロゴ・番組名・5色のドットがふわっと表示 → 上へすっと抜ける
   ・上下の細い5色のライン … コーナー（肉・魚・野菜・米・果物）の色
   ・文字や画像は「動かさず」透明度だけで表示 → がたつかない
   ・2回目以降（同じタブ）と「動きを減らす」設定の人には表示しない
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-loader { display: none; }
html.js .tvsp .tvsp-loader {
  --tvsp-loader-bg: #FFF7E8;     /* ← 背景色 */
  --tvsp-loader-line: linear-gradient(90deg, #FF9C8A 0 20%, #8FD3EA 0 40%, #A8D06A 0 60%, #F7D27A 0 80%, #FFA552 0);   /* ← 上下のライン */
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(60% 50% at 50% 48%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    var(--tvsp-loader-bg);
  color: var(--tvsp-ink);
  text-align: center;
  transition: transform .9s cubic-bezier(.76, 0, .24, 1) .25s;
  will-change: transform;
  animation: tvsp-loader-safety 0s 5s forwards;   /* 万一JSが止まっても5秒で消える */
}
html.js .tvsp .tvsp-loader::before,
html.js .tvsp .tvsp-loader::after {   /* 上下の5色ライン */
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 6px;
  background: var(--tvsp-loader-line);
}
html.js .tvsp .tvsp-loader::before { top: 0; }
html.js .tvsp .tvsp-loader::after  { bottom: 0; }
html.js .tvsp .tvsp-loader.is-done {   /* 中身が消えてから、画面ごと上へ抜ける */
  transform: translateY(-100%);
  pointer-events: none;
}
html.is-loader-skip .tvsp .tvsp-loader { display: none; }
@keyframes tvsp-loader-safety {
  to { visibility: hidden; }
}
.tvsp .tvsp-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 520px);
  transition: opacity .3s ease;
}
.tvsp .tvsp-loader.is-done .tvsp-loader__inner { opacity: 0; }
.tvsp .tvsp-loader__logo {   /* ロゴ（横長・縦幅のあるロゴ向け。比率はそのまま） */
  display: block;
  width: min(72vw, 400px);     /* ← ロゴの幅 */
  height: auto;
  aspect-ratio: 3 / 1;         /* ← ロゴの比率（画像の読み込み前から場所を確保して、がたつき防止） */
  max-height: 26vh;
  object-fit: contain;
  opacity: 0;
  animation: tvsp-loader-in .7s ease forwards;
}
.tvsp .tvsp-loader__tag {   /* ── 開局51周年 特別番組 ── */
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .16em;
  color: var(--tvsp-main-text);
  white-space: nowrap;
  opacity: 0;
  animation: tvsp-loader-in .7s ease .15s forwards;
}
.tvsp .tvsp-loader__tag::before,
.tvsp .tvsp-loader__tag::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}
.tvsp .tvsp-loader__title {
  margin-top: 12px;
  font-size: clamp(26px, 7.4vw, 48px);
  font-weight: 900;
  line-height: 1.3;
  height: 1.3em;               /* 高さを固定（フォントの読み込みで位置がずれない） */
  letter-spacing: .08em;
  font-feature-settings: "palt";
  white-space: nowrap;
  opacity: 0;
  animation: tvsp-loader-in .7s ease .25s forwards;
}
.tvsp .tvsp-loader__dots {   /* 5色のドットが順番にはねる（読み込み中のしるし） */
  display: flex;
  gap: 8px;
  height: 18px;                /* はねても全体が動かないように高さを固定 */
  align-items: flex-end;
  margin-top: 26px;
  opacity: 0;
  animation: tvsp-loader-in .5s ease .4s forwards;
}
.tvsp .tvsp-loader__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: tvsp-loader-dot 1.2s ease-in-out infinite;
}
.tvsp .tvsp-loader__dots i:nth-child(1) { background: #FF9C8A; }
.tvsp .tvsp-loader__dots i:nth-child(2) { background: #8FD3EA; animation-delay: .12s; }
.tvsp .tvsp-loader__dots i:nth-child(3) { background: #A8D06A; animation-delay: .24s; }
.tvsp .tvsp-loader__dots i:nth-child(4) { background: #F7D27A; animation-delay: .36s; }
.tvsp .tvsp-loader__dots i:nth-child(5) { background: #FFA552; animation-delay: .48s; }
@keyframes tvsp-loader-in {
  to { opacity: 1; }
}
@keyframes tvsp-loader-dot {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-9px); }
}

/* ----------------------------------------------------------------------------
   7-2 スクロールで表示（data-reveal）
   ・値なし … 下からふわっと
   ・mask  … 左から（偶数番目のコーナーは右から）めくれるように
   ・zoom  … 少し拡大した状態から戻る（キービジュアル）
   ・pop   … ポンと飛び出す（シール）
   ・split … 番組名を1文字ずつ（文字の動きは 7-3）
   ---------------------------------------------------------------------------- */
html.js .tvsp [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  animation: tvsp-reveal-safety .6s 3s forwards;   /* 万一JSが動かなくても3秒後に表示 */
}
html.js .tvsp [data-reveal="mask"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
}
html.js .tvsp .tvsp-corner:nth-child(even) [data-reveal="mask"]:not(.is-inview) {
  clip-path: inset(0 0 0 100%);
}
html.js .tvsp [data-reveal="zoom"] { transform: none; }
html.js .tvsp [data-reveal="zoom"] img {
  transform: scale(1.12);
  animation: tvsp-reveal-safety .6s 3s forwards;
}
html.js .tvsp [data-reveal="pop"] { transform: scale(.3) rotate(-40deg); }
html.js .tvsp [data-reveal="split"] {
  opacity: 1;
  transform: none;
  animation: none;
}
@keyframes tvsp-reveal-safety {
  to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}

/* main.js が動いたら、安全策を止めてアニメーションに切り替え */
html.is-ready .tvsp [data-reveal],
html.is-ready .tvsp [data-reveal="zoom"] img { animation: none; }
html.is-ready .tvsp [data-reveal] {
  transition:
    opacity 1s var(--tvsp-ease),
    transform 1.1s var(--tvsp-ease),
    clip-path 1.3s var(--tvsp-ease);
}
html.is-ready .tvsp [data-reveal="zoom"] img { transition: transform 2s var(--tvsp-ease); }
html.is-ready .tvsp [data-reveal="pop"] {
  transition:
    opacity .4s,
    transform .9s cubic-bezier(.34, 1.56, .64, 1);   /* 少し行き過ぎて戻る動き */
}
html.is-ready .tvsp .tvsp-cast__item[data-reveal] {   /* 出演者カードは、浮く動きも残す */
  transition:
    opacity 1s var(--tvsp-ease),
    transform 1.1s var(--tvsp-ease),
    translate .4s var(--tvsp-ease),
    box-shadow .4s;
}

/* 表示された状態 */
html.is-ready .tvsp [data-reveal].is-inview {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}
html.is-ready .tvsp [data-reveal="zoom"].is-inview img { transform: none; }
html.is-ready .tvsp [data-reveal="pop"].is-inview { transform: rotate(8deg); }

/* ----------------------------------------------------------------------------
   7-3 番組名を1文字ずつ表示（JSが文字を <span class="tvsp-char"> に分けます）
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-char { display: inline-block; }
html.is-ready .tvsp .tvsp-char {
  opacity: 0;
  transform: translateY(.6em) rotate(8deg);
  transition: opacity .5s ease, transform .9s var(--tvsp-ease);
}
html.is-ready .tvsp .is-inview .tvsp-char {
  opacity: 1;
  transform: none;
}

/* ----------------------------------------------------------------------------
   7-4 コーナー・生中継の写真の拡大（ライトボックス）
   ---------------------------------------------------------------------------- */

/* 写真のリンク（虫めがねアイコン付き）。コーナー・生中継の写真で使用 */
.tvsp .tvsp-zoom {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--tvsp-radius-m);
  cursor: zoom-in;
}
.tvsp .tvsp-zoom img { transition: transform .9s var(--tvsp-ease); }
.tvsp .tvsp-zoom:hover img { transform: scale(1.05); }
.tvsp .tvsp-zoom::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A2C1E' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8.2v5.6M8.2 11h5.6'/%3E%3C/svg%3E") center / 18px no-repeat;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s, transform .4s var(--tvsp-ease);
}
.tvsp .tvsp-zoom:hover::after,
.tvsp .tvsp-zoom:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none) {   /* スマホは常に表示（写真のじゃまにならないよう、小さく・うすく） */
  .tvsp .tvsp-zoom::after {
    right: 7px;
    bottom: 7px;
    width: 24px;               /* ← アイコンの大きさ */
    height: 24px;
    background-color: rgba(255, 255, 255, .6);   /* ← 丸の白さ（数字が小さいほど透ける） */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5E4E' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8.2v5.6M8.2 11h5.6'/%3E%3C/svg%3E");
    background-size: 13px;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    opacity: .85;
    transform: none;
  }
}

/* 拡大表示の画面 */
.tvsp .tvsp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 16px 104px;
  background: rgba(10, 16, 32, .94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s, visibility 0s .4s;
}
.tvsp .tvsp-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s;
}
.tvsp .tvsp-lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 1200px;
  transform: scale(.96);
  transition: transform .6s var(--tvsp-ease);
}
.tvsp .tvsp-lightbox.is-open .tvsp-lightbox__figure { transform: none; }
.tvsp .tvsp-lightbox__img {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 220px);
  max-height: calc(100dvh - 220px);
  border-radius: 12px;
  transition: opacity .25s;
}
.tvsp .tvsp-lightbox.is-changing .tvsp-lightbox__img { opacity: .15; }
.tvsp .tvsp-lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
}
.tvsp .tvsp-lightbox__count {
  font-family: var(--tvsp-font-en);
  font-size: 12px;
  letter-spacing: .12em;
  opacity: .7;
}
.tvsp .tvsp-lightbox__close,
.tvsp .tvsp-lightbox__nav {
  position: absolute;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .12);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  cursor: pointer;
  transition: background-color .2s;
}
.tvsp .tvsp-lightbox__close:hover,
.tvsp .tvsp-lightbox__nav:hover { background-color: rgba(255, 255, 255, .26); }
.tvsp .tvsp-lightbox__close {
  top: 14px;
  right: 14px;
  background-image: 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' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.tvsp .tvsp-lightbox__nav { bottom: 28px; }
.tvsp .tvsp-lightbox__nav--prev {
  left: calc(50% - 64px);
  background-image: 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='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
}
.tvsp .tvsp-lightbox__nav--next {
  right: calc(50% - 64px);
  background-image: 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='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
.tvsp .tvsp-lightbox.is-single .tvsp-lightbox__nav { display: none; }   /* 写真1枚のときは矢印なし */

@media screen and (min-width: 768px) {
  .tvsp .tvsp-lightbox { padding: 72px 104px; }
  .tvsp .tvsp-lightbox__img {
    max-height: calc(100vh - 170px);
    max-height: calc(100dvh - 170px);
  }
  .tvsp .tvsp-lightbox__close { top: 20px; right: 20px; }
  .tvsp .tvsp-lightbox__nav {
    top: 50%;
    bottom: auto;
    margin-top: -26px;
  }
  .tvsp .tvsp-lightbox__nav--prev { left: 28px; }
  .tvsp .tvsp-lightbox__nav--next { right: 28px; }
}

/* ----------------------------------------------------------------------------
   7-5 ページトップボタン
   ・外側のリングが、ページをどこまで読んだかを表します（JSで --tvsp-progress を更新）
   ---------------------------------------------------------------------------- */
.tvsp .tvsp-pagetop {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 80;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: conic-gradient(var(--tvsp-sub) calc(var(--tvsp-progress, 0) * 1turn), rgba(255, 255, 255, .9) 0);
  box-shadow: 0 6px 20px -8px rgba(74, 44, 30, .4);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s, transform .45s var(--tvsp-ease), visibility 0s .45s;
}
.tvsp .tvsp-pagetop.is-show {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .3s, transform .45s var(--tvsp-ease);
}
.tvsp .tvsp-pagetop__inner {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tvsp-main);
  color: var(--tvsp-on-main);
  transition: transform .35s var(--tvsp-ease);
}
.tvsp .tvsp-pagetop__inner svg { width: 18px; height: 18px; }
.tvsp .tvsp-pagetop:hover .tvsp-pagetop__inner { transform: translateY(-3px); }

@media screen and (min-width: 768px) {
  .tvsp .tvsp-pagetop { right: 24px; bottom: 24px; width: 64px; height: 64px; }
  .tvsp .tvsp-pagetop__inner { width: 56px; height: 56px; }
}

/* ----------------------------------------------------------------------------
   7-6 「動きを減らす」設定の人には、アニメーションをすべて止める
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js .tvsp [data-reveal],
  html.js .tvsp [data-reveal] img,
  html.is-ready .tvsp .tvsp-char {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
  }
  .tvsp *,
  .tvsp *::before,
  .tvsp *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ============================================================================
   8. 秋の飾り（にぎやかさの演出）
   ----------------------------------------------------------------------------
   ・HERO の背景に紅葉・いちょうの柄、各見出しの前にイラスト
     （イラストは「1. 設定」の --tvsp-icon-○○。差し替える場合はここを変更）
   ・見出しの前に、セクションに合わせたイラスト（紅葉・カチンコ・お弁当・電波・マイク）
   ・セクションの境目を、丸い泡が並んだような、ぽこぽこしたラインにしています
   ・51周年のお祭り感として、HERO の紅葉・いちょうの柄とキラキラ、生中継の上の旗（ガーランド）、ギザギザのシールを追加
   ・不要な場合は、このブロックごと削除すればシンプルな見た目に戻ります
   ============================================================================ */

/* --- HERO のまわりのイラスト・紙ふぶきは、このブロックの最後（51周年のお祭り感）で指定 --- */

/* --- 見出しの前のイラスト（セクションごとに変えています） --- */
.tvsp .tvsp-head::before {
  content: "";
  flex-shrink: 0;
  align-self: center;
  width: 34px;
  height: 34px;
  background: var(--tvsp-head-icon, var(--tvsp-icon-leaf)) center / contain no-repeat;
}
.tvsp .tvsp-intro   { --tvsp-head-icon: var(--tvsp-icon-leaf); }    /* 紅葉 */
.tvsp .tvsp-movie   { --tvsp-head-icon: var(--tvsp-icon-movie); }   /* カチンコ（動画） */
.tvsp .tvsp-corners { --tvsp-head-icon: var(--tvsp-icon-moon); }   /* 銀杏 */
.tvsp .tvsp-live    { --tvsp-head-icon: var(--tvsp-icon-live); }    /* 電波（生中継） */
.tvsp .tvsp-cast    { --tvsp-head-icon: var(--tvsp-icon-mic); }     /* マイク */
@media screen and (min-width: 768px) {
  .tvsp .tvsp-head::before { width: 48px; height: 48px; }
}

/* --- 見出しの英字の1文字目を柿色に --- */
.tvsp .tvsp-head__en::first-letter { color: var(--tvsp-main); }

/* --- セクションの境目：丸い泡が並んだような、ぽこぽこしたライン
       そのセクションの色で、上のセクションに少しはみ出して描いています
       --tvsp-edge … そのセクションの背景色 --- */
.tvsp .tvsp-movie,
.tvsp .tvsp-live,
.tvsp .tvsp-cast,
.tvsp .tvsp-watch { position: relative; }
.tvsp .tvsp-movie::before,
.tvsp .tvsp-live::before,
.tvsp .tvsp-cast::before,
.tvsp .tvsp-watch::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  height: 24px;
  background: var(--tvsp-edge);
  -webkit-mask: radial-gradient(circle at 20px 30px, #000 21.5px, transparent 22px) 0 0 / 40px 24px repeat-x;
          mask: radial-gradient(circle at 20px 30px, #000 21.5px, transparent 22px) 0 0 / 40px 24px repeat-x;
  pointer-events: none;
}
.tvsp .tvsp-movie::before,
.tvsp .tvsp-live::before,
.tvsp .tvsp-cast::before { top: -23px; }
.tvsp .tvsp-watch::after { bottom: -1px; }   /* フッターの境目は、1つ上の WATCH の下に描く */
.tvsp .tvsp-movie  { --tvsp-edge: var(--tvsp-movie-bg); }
.tvsp .tvsp-live   { --tvsp-edge: var(--tvsp-live-bg); }
.tvsp .tvsp-cast   { --tvsp-edge: var(--tvsp-tint); }
.tvsp .tvsp-watch  { --tvsp-edge: var(--tvsp-footer-bg); }


/* --- 51周年のお祭り感：旗（ガーランド）・ギザギザのシール --- */

/* 旗（ガーランド）：生中継の上に */
.tvsp {
  --tvsp-bunting:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='52' viewBox='0 0 200 52'%3E%3Cpath d='M0 6Q100 22 200 6' fill='none' stroke='%23D9A35B' stroke-width='1.6'/%3E%3Cg transform='translate(20 7.9) rotate(7.3)'%3E%3Cpath d='M-13 0H13L1.4 29.5Q0 32.5 -1.4 29.5Z' fill='%23F28534' stroke='%23F28534' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='0' cy='7' r='2.4' fill='%23fff' fill-opacity='.85'/%3E%3C/g%3E%3Cg transform='translate(60 11.7) rotate(3.7)'%3E%3Cpath d='M-13 0H13L1.4 29.5Q0 32.5 -1.4 29.5Z' fill='%23FFC93C' stroke='%23FFC93C' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='0' cy='7' r='2.4' fill='%23fff' fill-opacity='.85'/%3E%3C/g%3E%3Cg transform='translate(100 13.0) rotate(0.0)'%3E%3Cpath d='M-13 0H13L1.4 29.5Q0 32.5 -1.4 29.5Z' fill='%237FCBE0' stroke='%237FCBE0' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='0' cy='7' r='2.4' fill='%23fff' fill-opacity='.85'/%3E%3C/g%3E%3Cg transform='translate(140 11.7) rotate(-3.7)'%3E%3Cpath d='M-13 0H13L1.4 29.5Q0 32.5 -1.4 29.5Z' fill='%23FF9E7A' stroke='%23FF9E7A' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='0' cy='7' r='2.4' fill='%23fff' fill-opacity='.85'/%3E%3C/g%3E%3Cg transform='translate(180 7.9) rotate(-7.3)'%3E%3Cpath d='M-13 0H13L1.4 29.5Q0 32.5 -1.4 29.5Z' fill='%23A8D06A' stroke='%23A8D06A' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='0' cy='7' r='2.4' fill='%23fff' fill-opacity='.85'/%3E%3C/g%3E%3C/svg%3E");
}
.tvsp .tvsp-live::after {   /* ゆるくたるんだ紐に、5色の三角の旗。ゆらゆら揺れます */
  content: "";
  position: absolute;
  top: 6px;
  right: 0;
  left: 0;
  height: 52px;
  background: var(--tvsp-bunting) 0 0 / 160px 42px repeat-x;   /* ← 旗の大きさ（SP） */
  transform-origin: 50% 0;
  animation: tvsp-sway 3.2s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes tvsp-sway {
  from { transform: translateY(0)   rotate(-.4deg); }
  to   { transform: translateY(3px) rotate(.4deg); }
}
@media screen and (min-width: 768px) {
  .tvsp .tvsp-live::after { top: 10px; background-size: 200px 52px; }   /* ← 旗の大きさ（PC） */
}

/* HERO のにぎやかし（キービジュアルのまわり）
   ・後ろに、ゆっくり回るいちょう色の光の筋（お祝い感）
   ・右下にずらした水玉の板（写真を立体的に見せる）
   ・不要なら、このブロックを削除してください */
.tvsp .tvsp-hero__kv { isolation: isolate; }   /* 飾りを写真の後ろに置くため */
@property --tvsp-ray {   /* 光の筋を回すための角度（対応していないブラウザでは止まった状態で表示） */
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.tvsp .tvsp-hero__kv::before {   /* 光の筋（写真の左右・上下にのぞく） */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -2;
  width: 150%;                 /* ← 光の広がり（横） */
  height: 150%;                /* ← 光の広がり（縦） */
  translate: -50% -50%;
  background: repeating-conic-gradient(from var(--tvsp-ray), rgba(255, 201, 60, .32) 0 5deg, rgba(255, 201, 60, 0) 5deg 15deg);   /* ← 筋の色・太さ */
  -webkit-mask: radial-gradient(50% 50% at 50% 50%, #000 45%, transparent 95%);
          mask: radial-gradient(50% 50% at 50% 50%, #000 45%, transparent 95%);
  animation: tvsp-ray 80s linear infinite;   /* ← 回る速さ */
  pointer-events: none;
}
@keyframes tvsp-ray {
  to { --tvsp-ray: 360deg; }
}
.tvsp .tvsp-hero__kv::after {   /* 水玉の板 */
  content: "";
  position: absolute;
  inset: 10px -10px -10px 10px;   /* ← ずらす量（SP） */
  z-index: -1;
  border-radius: var(--tvsp-radius-l);
  background: radial-gradient(circle, rgba(255, 255, 255, .7) 2px, transparent 2.4px) 0 0 / 12px 12px, #FFC93C;   /* ← 水玉・板の色 */
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .tvsp .tvsp-hero__kv::before { width: 135%; height: 140%; }
  .tvsp .tvsp-hero__kv::after  { inset: 16px -16px -16px 16px; background-size: 14px 14px; }   /* ← ずらす量（PC） */
}
@media (prefers-reduced-motion: reduce) {
  .tvsp .tvsp-hero__kv::before { animation: none; }
}

@media screen and (max-width: 767px) {   /* スマホ：タグの横に金色のキラキラ */
  .tvsp .tvsp-hero__info {
    background:
      var(--tvsp-icon-spark)  right 18px top 2px / 22px no-repeat,
      var(--tvsp-icon-spark2) right 0 top 26px / 14px no-repeat;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tvsp .tvsp-live::after { animation: none; }
}

/* HERO の背景（キービジュアルの後ろ）
   ・紅葉といちょうを散らした「吹き寄せ」柄 … 和の文様のように落ち着いたにぎやかさ
   ・キービジュアルのまわりに、いちょう色のやわらかい光
   ・金色のキラキラ（PCのみ） … 周年のお祝い感
   ※ 柄は --tvsp-pattern-autumn（色の濃さは SVG 内の fill-opacity で調整） */
.tvsp {
  --tvsp-pattern-autumn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg transform='translate(30 34) rotate(-25) scale(0.75) translate(-20 -20)'%3E%3Cpath d='M20 3C31 11 33 26 20 37C7 26 9 11 20 3Z' fill='%23F28534' fill-opacity='0.2'/%3E%3C/g%3E%3Cg transform='translate(112 22) rotate(18) scale(0.8) translate(-20 -20)'%3E%3Cpath d='M20 24C11 23 5 16 6 7C10 9 16 10 19 9L20 13L21 9C24 10 30 9 34 7C35 16 29 23 20 24Z' fill='%23FFC93C' fill-opacity='0.45'/%3E%3C/g%3E%3Cg transform='translate(186 70) rotate(40) scale(0.6) translate(-20 -20)'%3E%3Cpath d='M20 3C31 11 33 26 20 37C7 26 9 11 20 3Z' fill='%23D93A24' fill-opacity='0.13'/%3E%3C/g%3E%3Cg transform='translate(64 108) rotate(-30) scale(0.65) translate(-20 -20)'%3E%3Cpath d='M20 24C11 23 5 16 6 7C10 9 16 10 19 9L20 13L21 9C24 10 30 9 34 7C35 16 29 23 20 24Z' fill='%23F28534' fill-opacity='0.18'/%3E%3C/g%3E%3Cg transform='translate(150 138) rotate(-60) scale(0.8) translate(-20 -20)'%3E%3Cpath d='M20 3C31 11 33 26 20 37C7 26 9 11 20 3Z' fill='%23FFC93C' fill-opacity='0.42'/%3E%3C/g%3E%3Cg transform='translate(28 176) rotate(10) scale(0.7) translate(-20 -20)'%3E%3Cpath d='M20 24C11 23 5 16 6 7C10 9 16 10 19 9L20 13L21 9C24 10 30 9 34 7C35 16 29 23 20 24Z' fill='%23D93A24' fill-opacity='0.12'/%3E%3C/g%3E%3Cg transform='translate(104 190) rotate(15) scale(0.55) translate(-20 -20)'%3E%3Cpath d='M20 3C31 11 33 26 20 37C7 26 9 11 20 3Z' fill='%23F28534' fill-opacity='0.18'/%3E%3C/g%3E%3Cg transform='translate(196 186) rotate(-12) scale(0.6) translate(-20 -20)'%3E%3Cpath d='M20 24C11 23 5 16 6 7C10 9 16 10 19 9L20 13L21 9C24 10 30 9 34 7C35 16 29 23 20 24Z' fill='%23FFC93C' fill-opacity='0.4'/%3E%3C/g%3E%3Ccircle cx='150' cy='60' r='2.5' fill='%23F28534' fill-opacity='.35'/%3E%3Ccircle cx='70' cy='60' r='2' fill='%23D93A24' fill-opacity='.25'/%3E%3Ccircle cx='18' cy='110' r='2.5' fill='%23FFC93C' fill-opacity='.6'/%3E%3Ccircle cx='120' cy='96' r='2' fill='%23F28534' fill-opacity='.3'/%3E%3Ccircle cx='176' cy='110' r='2' fill='%23D93A24' fill-opacity='.22'/%3E%3Ccircle cx='60' cy='150' r='2.5' fill='%23FFC93C' fill-opacity='.6'/%3E%3C/svg%3E");
}
.tvsp .tvsp-hero {
  background-color: var(--tvsp-hero-bg);
  background-image:
    radial-gradient(60% 45% at 50% 32%, rgba(255, 201, 60, .28), transparent 70%),
    var(--tvsp-pattern-autumn);
  background-repeat: no-repeat, repeat;
  background-position: 0 0, 0 0;
  background-size: 100% 100%, 220px 220px;
}
@media screen and (min-width: 768px) {
  .tvsp .tvsp-hero {
    background-image:
      var(--tvsp-icon-spark),
      var(--tvsp-icon-spark2),
      var(--tvsp-icon-spark),
      var(--tvsp-icon-spark2),
      radial-gradient(55% 50% at 50% 34%, rgba(255, 201, 60, .3), transparent 72%),
      var(--tvsp-pattern-autumn);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-position:
      left 5% top 140px,
      left 3% top 380px,
      right 4% top 190px,
      right 6% top 420px,
      0 0,
      0 0;
    background-size: 30px, 20px, 26px, 18px, 100% 100%, 260px 260px;
  }
}

/* シール：ギザギザの形にして、ゆっくり回転 */
.tvsp .tvsp-sticker {
  isolation: isolate;
  background: none;
}
.tvsp .tvsp-sticker::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background: var(--tvsp-sticker-bg);
  clip-path: polygon(50.0% 0.0%, 55.6% 7.4%, 62.9% 1.7%, 66.5% 10.3%, 75.0% 6.7%, 76.2% 15.9%, 85.4% 14.6%, 84.1% 23.8%, 93.3% 25.0%, 89.7% 33.5%, 98.3% 37.1%, 92.6% 44.4%, 100.0% 50.0%, 92.6% 55.6%, 98.3% 62.9%, 89.7% 66.5%, 93.3% 75.0%, 84.1% 76.2%, 85.4% 85.4%, 76.2% 84.1%, 75.0% 93.3%, 66.5% 89.7%, 62.9% 98.3%, 55.6% 92.6%, 50.0% 100.0%, 44.4% 92.6%, 37.1% 98.3%, 33.5% 89.7%, 25.0% 93.3%, 23.8% 84.1%, 14.6% 85.4%, 15.9% 76.2%, 6.7% 75.0%, 10.3% 66.5%, 1.7% 62.9%, 7.4% 55.6%, 0.0% 50.0%, 7.4% 44.4%, 1.7% 37.1%, 10.3% 33.5%, 6.7% 25.0%, 15.9% 23.8%, 14.6% 14.6%, 23.8% 15.9%, 25.0% 6.7%, 33.5% 10.3%, 37.1% 1.7%, 44.4% 7.4%);
  animation: tvsp-spin 24s linear infinite;
}
@keyframes tvsp-spin {
  to { transform: rotate(360deg); }
}
@media screen and (min-width: 768px) {
  .tvsp .tvsp-sticker { width: 124px; height: 124px; }
  .tvsp .tvsp-sticker b { font-size: 36px; }
}