@charset "utf-8";


/* ============================================================================
   1. 色
   ============================================================================ */
:root .tvsp {

  /* --- 3色 ------------------------------------------------------------- */
  --tvsp-main:   #C4307A;   /* メイン：メニューの帯／放送日の「ON AIR」（ロゴのマゼンタ） */
  --tvsp-sub:    #F7EC8F;   /* サブ　：マーカー／シール／見どころのタグ（ロゴの淡いイエロー） */
  --tvsp-accent: #E8A9B8;   /* アクセント：見どころのタグ／出演者写真の丸（ハートのくすみピンク） */

  /* --- メイン色まわりの文字色 ----------------------------------------- */
  --tvsp-on-main:    #FFFFFF;   /* マゼンタの上の文字 */
  --tvsp-main-text:  #C4307A;   /* 見どころの番号／見出しの日本語 */

  /* --- ベース ----------------------------------------------------------- */
  --tvsp-ink:   #2A2226;    /* 文字・線（ロゴの黒に近いチャコール） */
  --tvsp-gray:  #6A6066;    /* 補足テキスト */
  --tvsp-tint:  #F7F0F2;    /* 淡い背景（出演者）。ほんのりピンクのグレー */

  /* --- MOVIE：予告動画の背景 -------------------------------------------- */
  --tvsp-movie-bg: #FBF6E4;   /* 淡いクリーム（ロゴのイエローを薄めた色） */

  /* --- HERO：淡いスモーキーピンク ------------------------------------- */
  --tvsp-hero-bg:        #EBD3DC;       /* ← 背景色 */
  --tvsp-hero-text:      #2A2226;
  --tvsp-hero-hl:        #B02A6C;       /* 番組名の色部分（背景の上でも読める濃いマゼンタ） */
  --tvsp-hero-tag-line:  #2A2226;
  --tvsp-hero-tag-bg:    #FFFFFF;
  --tvsp-hero-tag2-bg:   #C4307A;       /* 塗りタグはマゼンタ */
  --tvsp-hero-tag2-text: #FFFFFF;
  --tvsp-sticker-bg:     #F7EC8F;       /* シールは淡いイエロー */

  /* --- 飾りの色（2. で使用） ------------------------------------------- */
  --tvsp-halftone: rgba(196, 48, 122, .22);   /* HERO の網点（ロゴのドット柄） */
  --tvsp-check-line: rgba(255, 255, 255, .45);   /* HERO のチェックの線の色（白を透かして重ねる） */
  --tvsp-check-size: 36px;                        /* HERO のチェックの大きさ（1マス分） */
  --tvsp-shadow:   rgba(42, 34, 38, .12);     /* 写真・カードの影 */
}


/* ============================================================================
   2. ピンクテーマだけの飾り
   ・ほかのテーマには影響しません。不要なものはブロックごと削除してOK
   ============================================================================ */

/* HERO：ギンガムチェック（白の縦じま＋横じまを重ねる）＋右上と左下に網点 */
:root .tvsp .tvsp-hero {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(90deg, var(--tvsp-check-line) 50%, transparent 50%) 0 0 / var(--tvsp-check-size) var(--tvsp-check-size),
    linear-gradient(0deg,  var(--tvsp-check-line) 50%, transparent 50%) 0 0 / var(--tvsp-check-size) var(--tvsp-check-size),
    var(--tvsp-hero-bg);
}
:root .tvsp .tvsp-hero::before {   /* 網点 */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle, var(--tvsp-halftone) 1.6px, transparent 2px) 0 0 / 14px 14px;   /* ← 網点の大きさ・間隔 */
  -webkit-mask:
    radial-gradient(55% 50% at 100% 0%, #000, transparent 70%),
    radial-gradient(50% 45% at 0% 100%, #000, transparent 70%);
          mask:
    radial-gradient(55% 50% at 100% 0%, #000, transparent 70%),
    radial-gradient(50% 45% at 0% 100%, #000, transparent 70%);
  pointer-events: none;
}

/* キービジュアル：ロゴと同じ「白フチ＋マゼンタの線」 */
:root .tvsp .tvsp-hero__kv img {
  border: 5px solid #FFFFFF;
  box-shadow: 0 0 0 3px var(--tvsp-main), 0 12px 28px rgba(122, 40, 80, .2);
}
@media screen and (min-width: 768px) {
  :root .tvsp .tvsp-hero__kv img {
    border-width: 8px;
    box-shadow: 0 0 0 4px var(--tvsp-main), 0 18px 40px rgba(122, 40, 80, .2);
  }
}

/* 放送日ボックス：枠をマゼンタに */
:root .tvsp .tvsp-onair {
  border-color: var(--tvsp-main);
  box-shadow: 0 6px 18px rgba(122, 40, 80, .12);
}

/* 見出しの英字：先頭の1文字をマゼンタに */
:root .tvsp .tvsp-head__en::first-letter { color: var(--tvsp-main-text); }

/* 見どころのタグ：3番目ごとの色を、白地でも見えるくすみピンクの濃い色に（イエロー→ピンク→ローズの順） */
:root .tvsp .tvsp-point:nth-child(3n) .tvsp-point__tag { background: #E2B4D2; }

/* 写真・カード：やわらかい影 */
:root .tvsp .tvsp-intro__photos img,
:root .tvsp .tvsp-point__photos img { box-shadow: 0 8px 22px var(--tvsp-shadow); }
:root .tvsp .tvsp-cast__item        { box-shadow: 0 6px 18px var(--tvsp-shadow); }