/* ==========================================================================
   Product landing page - additions
   Scope : every rule is prefixed with .lp-page (the body class of the page
           that uses this file) and every custom class uses the lp- prefix,
           so this file can be dropped next to any product page and will
           never touch the existing theme styles.
           No existing CSS is modified.

   Theme : TVer logo gradient (glowing cyan -> brand blue)
             #02F3FA  グローシアン  (glow / accent only)
             #00CAE6  シアン
             #03A9DB  アジュール
             #0271C0  ブランドブルー
   Rule  : 白文字は #0271C0 より暗い面にのみ置く（コントラスト 5:1 以上）。
           明るいシアンは「光」「アクセント」専用。本文の下には敷かない。

   Note  : layout / typography come from the theme
           (display-4 / h3 / h5 / font-size-lg / list-unstyled /
            bg-faded-primary / bg-faded-light / nav-tabs-2 / accordion /
            btn-market / btn-download-mac / features-upgrade.css).
           This file only holds what the theme does not provide.
   ========================================================================== */

.lp-page {
  --lp-cyan: #02f3fa;
  --lp-cyan-2: #00cae6;
  --lp-azure: #03a9db;
  --lp-blue: #0271c0;
  --lp-blue-dark: #05507c;
  --lp-ink: #024a83;      /* blue text on white */
  --lp-soft: #e6fafd;
  --lp-ring: 0 0 0 1px rgba(2, 243, 250, 0.4),
               0 16px 32px -18px rgba(2, 34, 60, 0.6);
  --lp-faq: #3c92e2;      /* FAQ accents - one shade lighter than --lp-blue */
  /* TVer の「シアン → 濃い青」。カテゴリチップ選択中と STEP バッジで共有する。
     幅の狭い要素に載るので、青側へ寄る位置（72%）で振り切る。 */
  --lp-grad-tab: linear-gradient(108deg, #2cc3e3 0%, #2e5ab1 72%);
}

/* --------------------------------------------------------------------------
   0. Brand surfaces
   Deep blue carries the text, the cyan end of the gradient carries the glow.
   -------------------------------------------------------------------------- */
.lp-page .bg-gradient {
  background-color: #025b9e;
  background-image:
    radial-gradient(620px 400px at 94% 88%, rgba(2, 243, 250, 0.46),
      rgba(2, 243, 250, 0) 68%),
    linear-gradient(100deg, #05507c 0%, #025b9e 20%, #0271c0 46%,
      #0392c8 72%, #00c2de 100%) !important;
}

.lp-page .bg-faded-light {
  background-color: rgba(2, 38, 66, 0.32) !important;
  box-shadow: inset 0 0 0 1px rgba(2, 243, 250, 0.45);
}

.lp-page .bg-faded-primary {
  background-color: rgba(3, 169, 219, 0.12) !important;
}

/* use-case tabs sit on the blue band: cyan indicator, brighter labels */
.lp-page .nav-tabs-2 {
  border-bottom-color: rgba(255, 255, 255, 0.26);
}

.lp-page .nav-tabs-2 .nav-link-2 {
  color: rgba(255, 255, 255, 0.78);
}

.lp-page .nav-tabs-2 .nav-link-2:hover,
.lp-page .nav-tabs-2 .nav-link-2.active {
  color: #fff;
}

.lp-page .nav-tabs-2 .nav-link-2.active::after {
  background: linear-gradient(90deg, var(--lp-cyan), var(--lp-cyan-2));
  box-shadow: 0 4px 16px -4px rgba(2, 243, 250, 0.95);
}

/* white copy on the blue bands: drop the 70% opacity that hurt readability */
.lp-page .bg-gradient .text-light.opacity-70,
.lp-final .text-light.opacity-70 {
  color: rgba(255, 255, 255, 0.86);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
/* Hero の下地は tver.co.jp のキービジュアルを CSS だけで再現したもの。
   実画像は使わない（読み込み 0KB で済む）。
   2026-11-02 に「もっと透き通ったオーロラ感」へ作り直し。参考画像の実測値：
     左上 #3db0f7 / 左下 #483cf1（紫）/ 中央 #5497eb
     右中 #23ebf0（発光するシアン）/ 右下 #00c6ac（ミント）
   つまり「左下に紫 → 左上に空色 → 右へ行くほど明るいシアン → 右下ミント」。
   前版は左下が濃紺（#0033e8）で全体が沈み、オーロラではなく“深い海”に見えた。
   今回は発光帯（radial）を 4 枚重ねて、面ではなく“光”で色を置いている。
   最上層の紺ベールは白文字の可読性のためだけに残す（左 0.34 → 右 0）。
   ベールを濃くすると一気に曇るので、0.4 以上にはしない。 */
.lp-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: #3d8df3;
  background-image:
    /* テキスト帯（左）だけを少し沈ませる局所スクリム。
       放射状にすると縦方向の減衰が紫の減衰と干渉して、左下に
       「急に暗くなる／急に止まる」継ぎ目が出るので、**横方向の線形**にする
       （y 方向は一様＝縦の色の流れを乱さない）。右 55% から先は無塗布。 */
    linear-gradient(96deg, rgba(20, 24, 110, 0.13) 0%, rgba(20, 24, 110, 0.06) 24%,
      rgba(20, 24, 110, 0.015) 44%, rgba(20, 24, 110, 0) 58%),
    /* 天面の空色（参考画像の上端は #3db0f7 でほぼ一様に明るい） */
    radial-gradient(150% 78% at 32% -14%, rgba(64, 182, 250, 0.92) 0%,
      rgba(64, 182, 250, 0) 76%),
    /* 左下：紫（オーロラの色味の主役）。
       中心は画面外（-18% / 116%）に置き、半径を大きく取って
       「紫 → 青紫 → 青」と色相も alpha も同時に薄める。
       ストップは 4 つだけの単調減少。段を細かく刻むと、かえって
       alpha の曲率が変わるところが“帯”として見える。 */
    radial-gradient(112% 156% at -16% 112%,
      rgba(86, 44, 242, 0.98) 0%,
      rgba(80, 52, 240, 0.72) 26%,
      rgba(70, 84, 241, 0.34) 52%,
      rgba(64, 128, 243, 0.09) 74%,
      rgba(64, 146, 244, 0) 90%),
    /* 右下：ミント */
    radial-gradient(46% 62% at 102% 102%, #00d6b0 0%, rgba(0, 214, 176, 0) 68%),
    /* 右下寄り：発光するシアン */
    radial-gradient(44% 58% at 80% 78%, rgba(56, 242, 246, 0.85) 0%,
      rgba(56, 242, 246, 0) 66%),
    linear-gradient(106deg, #5699f6 0%, #58a8f7 26%, #42cbef 58%, #17e0e0 82%,
      #03d1b6 100%);
}

/* 明るい下地でも白い本文が沈まないよう、本文にだけ淡い影を落とす
   （この 1 本があるだけで、背景を一段明るくしても読める）。 */
.lp-hero p.font-size-lg {
  text-shadow: 0 1px 3px rgba(2, 22, 58, 0.28);
}

/* eyebrow above the product name */
.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 7px 16px 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(2, 243, 250, 0.5);
  background: rgba(2, 46, 78, 0.3);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 4px rgba(2, 243, 250, 0.07);
}

.lp-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lp-cyan);
  box-shadow: 0 0 10px 2px rgba(2, 243, 250, 0.9);
  animation: lp-pulse 2.8s ease-in-out infinite;
}

/* long one-line tagline variant: keeps the pill look but is allowed to wrap
   (a 30-character Japanese sentence would otherwise spill out on phones) */
.lp-badge--wide {
  gap: 10px;
  max-width: 100%;
  padding: 9px 16px 9px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.55;
  white-space: normal;
  text-align: left;
  letter-spacing: 0.01em;
}

.lp-badge--wide .lp-badge__dot {
  flex: 0 0 auto;
}

.lp-badge__t {
  flex: 1 1 auto;
}

/* the product name is long, let the browser balance the two lines
   instead of leaving "Downloader" alone on the second row */
.lp-hero h1 {
  text-wrap: balance;
}

/* Feature headings must wrap like every other product page (all-in-one etc.):
   fill the line, then break. Do NOT use text-wrap:balance (= pulls both lines to
   an equal, shorter width) or word-break:auto-phrase (= only breaks on phrase
   boundaries) — both leave a visible gap at the right edge. */
.lp-page h2.h3 {
  text-wrap: wrap;
  word-break: normal;
}

/* 機能ポイントの挿絵の枠（旧 inline style="max-width:525px"）。
   中の <img> は width/height 属性どおりに縮む。 */
.lp-feat__frame {
  max-width: 525px;
}

/* 機能ポイント行の 7:5 分割（1200px 以上のみ）。
   60px 幅が足りないと見出しが 2 文字だけ折り返す（「保存」「安心」）。
   テキスト列を 7/12 に広げると 1 行に収まる。画像列は 5/12 で
   イラストは 525 → 495px（-6%、肉眼では分からない差）。
   992〜1199px は 6:6 のまま（7:12 にすると逆に 1〜2 文字の孤立行が出る）。 */
@media (min-width: 1200px) {
  .lp-feat__text {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }
  .lp-feat__img {
    flex: 0 0 41.6667%;
    max-width: 41.6667%;
  }
}

/* inline emphasis: cyan underline bar that never changes the line box.
   weight stays inherited — bolding inside a paragraph makes the line look
   jumpy next to the other product pages, the underline alone reads fine. */
.lp-mark {
  font-weight: inherit;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--lp-cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
}

@keyframes lp-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.7); opacity: 0.55; }
}

/* --------------------------------------------------------------------------
   Hero visual: floating poster wall
   The stage keeps a fixed ratio and every poster is positioned in percentages,
   so swapping a poster for a different aspect ratio never breaks the layout.
   Per-poster geometry lives in the data-slot rules below:
     --x / --y  anchor point (%)      --w  width (%)      --r  rotation
     --dur / --delay  float timing
   -------------------------------------------------------------------------- */
.lp-hero__visual {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
}

.lp-wall {
  position: relative;
  aspect-ratio: 100 / 98;
  margin: 0 auto;
}

/* cyan halo behind the logo */
.lp-wall::before {
  content: "";
  position: absolute;
  inset: 16% 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(2, 243, 250, 0.46),
    rgba(2, 243, 250, 0) 72%);
  filter: blur(30px);
  pointer-events: none;
}

/* ---- centre: TVer logo on a glass hub + download badge ---- */
.lp-wall__core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 23%;
  transform: translate(-50%, -50%);
}

/* the hub disc pulls the eye away from the posters and gives the cyan logo
   something dark to sit on */
.lp-wall__core::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 145%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #ffffff 0%, #eefaff 62%, #dff5fd 100%);
  box-shadow: 0 0 0 1px rgba(2, 243, 250, 0.5),
    0 0 0 10px rgba(255, 255, 255, 0.1),
    0 0 46px rgba(2, 243, 250, 0.42),
    0 26px 52px -20px rgba(1, 16, 30, 0.8);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease;
}

/* hovering any poster also lifts the hub — the disc reads as the "parent" of the
   posters, so it brightens with them instead of staying flat. Deliberately
   weaker than the disc's own hover below (no badge here, no scale up to 1.04).
   The disc and the posters are siblings, so the pointer can only hover one of
   them at a time — these two rules never fight. Where :has() is unsupported the
   whole rule is simply ignored and nothing breaks. */
.lp-wall:has(.lp-wall__item:hover) .lp-wall__core::before,
.lp-wall:has(.lp-wall__item:focus-visible) .lp-wall__core::before {
  transform: translate(-50%, -50%) scale(1.02);
  box-shadow: 0 0 0 1px rgba(2, 243, 250, 0.64),
    0 0 0 12px rgba(255, 255, 255, 0.12),
    0 0 58px rgba(2, 243, 250, 0.54),
    0 26px 52px -20px rgba(1, 16, 30, 0.8);
}

.lp-wall:has(.lp-wall__item:hover) .lp-wall__logo,
.lp-wall:has(.lp-wall__item:focus-visible) .lp-wall__logo {
  filter: drop-shadow(0 2px 5px rgba(2, 40, 70, 0.26)) saturate(1.06) brightness(1.04);
}

/* hovering the disc lights it up: the only feedback that the hub is clickable,
   because the badge itself stays hidden until then */
.lp-wall__core:hover::before,
.lp-wall__core:focus-within::before {
  transform: translate(-50%, -50%) scale(1.04);
  box-shadow: 0 0 0 1px rgba(2, 243, 250, 0.72),
    0 0 0 14px rgba(255, 255, 255, 0.13),
    0 0 64px rgba(2, 243, 250, 0.58),
    0 26px 52px -20px rgba(1, 16, 30, 0.8);
}

.lp-wall__logo {
  display: block;
  position: relative;
  width: 78%;
  margin: 0 auto;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(2, 40, 70, 0.22));
  transition: filter 0.32s ease;
}

.lp-wall__core-dl {
  position: absolute;
  left: 99%;
  top: 99%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--lp-cyan) 0%, var(--lp-azure) 55%,
    var(--lp-blue) 100%);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 0 0 3px rgba(2, 62, 109, 0.6),
    0 10px 22px -8px rgba(1, 20, 38, 0.9);
  /* hidden by default, same idea as the poster veil */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.65);
  pointer-events: none;
  transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.25),
    box-shadow 0.2s ease, opacity 0.2s ease;
}

/* ポスターと同じ「矢印＋一横」の SVG をバッジ用に小さく使う。
   フォントアイコン＋CSS の横棒だと線幅が揃わず二本に見えるため、SVG に統一。 */
.lp-wall__core-dl svg {
  display: block;
  width: 15px;
  height: 15px;
}

/* differs from the posters on purpose: no full-cover veil, no dimming of the
   logo — only a cyan badge sliding out of the disc's bottom-right corner */
.lp-wall__core:hover .lp-wall__core-dl,
.lp-wall__core:focus-within .lp-wall__core-dl {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

/* the disc's own hover is the strongest state, so the logo brightens a bit
   further than it does when a poster is hovered */
.lp-wall__core:hover .lp-wall__logo,
.lp-wall__core:focus-within .lp-wall__logo {
  filter: drop-shadow(0 2px 6px rgba(2, 40, 70, 0.3)) saturate(1.1) brightness(1.07);
}

.lp-wall__core:hover .lp-wall__core-dl:hover,
.lp-wall__core:focus-within .lp-wall__core-dl:focus-visible {
  color: #fff;
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 0 0 4px rgba(2, 243, 250, 0.3),
    0 12px 26px -8px rgba(1, 20, 38, 0.95);
}

/* ---- posters ---- */
.lp-wall__item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: var(--w);
  animation: lp-wall-float var(--dur, 7s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}

/* 5 枚の固定配置。HTML は data-slot だけ持ち、座標はここで完結させる
   （inline style をやめたので、位置調整はこの 5 行だけ見ればよい）。
   枚数を増やすときは data-slot="6" を足す。 */
.lp-wall__item[data-slot="1"] {
  --x: 25%; --y: 26%; --w: 26%; --r: 0deg; --dur: 7.4s; --delay: -0.4s;
}
.lp-wall__item[data-slot="2"] {
  --x: 75%; --y: 16%; --w: 36%; --r: 0deg; --dur: 8.1s; --delay: -1.6s;
}
.lp-wall__item[data-slot="3"] {
  --x: 84%; --y: 46%; --w: 30%; --r: 0deg; --dur: 7.8s; --delay: -3.9s;
}
.lp-wall__item[data-slot="4"] {
  --x: 24%; --y: 73%; --w: 34%; --r: 0deg; --dur: 8.6s; --delay: -5.1s;
}
.lp-wall__item[data-slot="5"] {
  --x: 74%; --y: 80%; --w: 35%; --r: 0deg; --dur: 7.1s; --delay: -6.3s;
}

@keyframes lp-wall-float {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(var(--r, 0deg)) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) rotate(var(--r, 0deg)) translateY(-9px);
  }
}

/* poster rotation swap (driven by product-media-wall.js): only opacity/transform,
   so the swap never triggers layout */
.lp-wall__item.is-swapping .lp-wall__card {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.42s ease, transform 0.42s ease;
}

.lp-wall__card {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(2, 34, 60, 0.35);
  box-shadow: 0 18px 34px -16px rgba(1, 20, 38, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.16);
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.28s ease, opacity 0.42s ease;
}

.lp-wall__card img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- category caption on the poster --------------------------------------
   The posters are intentionally blurred, so the label carries the meaning.
   It lives as a sibling of the <img> instead of being baked into the file:
   copy and colours stay editable, and the label re-flows at any card size.
   Font size follows the card width through container units, so the narrow
   portrait card gets a slightly smaller label than the wide ones.
   Colour is per-card via --cap (default dark ink). */
.lp-wall__card {
  container-type: inline-size;
}

.lp-wall__cap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 7%;
  font-size: 15px;
  /* container units are ignored by old browsers, the px above is the fallback.
     --cap-k is a per-card multiplier: keep the base proportional to the card
     and only tweak the ratio, so the size differences survive any retune. */
  font-size: clamp(11px, 9.2cqw, 22px);
  font-size: calc(clamp(11px, 9.2cqw, 22px) * var(--cap-k, 1));
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: 0.01em;
  text-align: center;
  text-wrap: balance;
  color: var(--cap, #14202c);
  /* the posters are pale and unevenly lit → a soft white halo keeps the
     label legible on both the light and the slightly tinted areas */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 10px rgba(255, 255, 255, 0.92), 0 0 22px rgba(255, 255, 255, 0.72);
  transition: opacity 0.22s ease;
  pointer-events: none;
}

/* カードごとの色と倍率。秋の新アニメは番組カードの .lp-season--autumn と同じ楓の橙赤、
   秋の新ドラマは寒色寄りのティール。 */
.lp-wall__cap--drama {
  --cap: #038bb3;
  --cap-k: 1.34;
}

.lp-wall__cap--anime {
  --cap: #dd5b28;
}

.lp-wall__cap--variety {
  --cap: #3c2876;
}

.lp-wall__cap--music {
  --cap: #000;
  --cap-k: 1.26;
}

/* 「報道・ドキュメンタリー」は ・ の位置で 2 行に割る。
   自動折返しだと「ドキ／ュメンタリー」で切れて読みにくいため、
   HTML 側で 2 つの span に分け、ここで縦積みにする。 */
.lp-wall__cap--docu {
  --cap: #0132a1;
  flex-direction: column;
  line-height: 1.22;
}

/* hover veil */
.lp-wall__veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 30, 54, 0.58);
  opacity: 0;
  transition: opacity 0.22s ease;
}

/* 円形のダウンロードボタン。アイコンは参照実装と同じ SVG（矢印＋下の一横）で、
   フォントアイコン＋CSS の横棒のように線幅が揃わない問題を避ける。 */
.lp-wall__dl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--lp-blue);
  box-shadow: 0 10px 22px -10px rgba(1, 20, 38, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.6);
  transform: scale(0.62);
  transition: transform 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.25),
    box-shadow 0.24s ease;
}

.lp-wall__dl svg {
  display: block;
  width: 21px;
  height: 21px;
}

/* 「SameMovieでダウンロード」はポスターに描き込まず、
   ボタンの上に浮き上がる独立したツールチップとして出す
   （番組カードの .lp-dl のヒントと同じ扱い）。
   カードは overflow:hidden なので、必ずカード内に収まる位置に置く。
   left/right:0 + margin:auto で中央寄せにするのは、left:50% だけだと
   利用可能幅がカードの半分になり、折返しが早く起きるため。 */
.lp-wall__tip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(50% + 24px);
  width: max-content;
  max-width: calc(100% - 10px);
  margin: 0 auto;
  padding: 4px 8px;
  border-radius: 6px;
  background: #fff;
  color: #0e2a44;
  font-size: 10.5px;
  font-size: clamp(8.5px, 5.9cqw, 10.5px);
  font-weight: 700;
  line-height: 1.28;
  text-align: center;
  box-shadow: 0 10px 20px -10px rgba(1, 20, 38, 0.85);
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity 0.18s ease, transform 0.2s ease;
}

/* 「SameMovieで」「ダウンロード」はそれぞれ固まりとして扱い、
   折り返すときは必ずこの境目で切る（ダウンロー／ド を防ぐ）。 */
.lp-wall__tip > span {
  display: inline-block;
}

.lp-wall__item:hover,
.lp-wall__item:focus-visible {
  z-index: 5;
}

.lp-wall__item:hover .lp-wall__card,
.lp-wall__item:focus-visible .lp-wall__card {
  transform: scale(1.07);
  box-shadow: 0 24px 44px -18px rgba(1, 20, 38, 0.95),
    0 0 0 1px rgba(2, 243, 250, 0.5);
}

.lp-wall__item:hover .lp-wall__veil,
.lp-wall__item:focus-visible .lp-wall__veil {
  opacity: 1;
}

.lp-wall__item:hover .lp-wall__tip,
.lp-wall__item:focus-visible .lp-wall__tip {
  opacity: 1;
  transform: translateY(0);
}

/* the veil is dark, so the dark label would disappear under it —
   fade the label out first and let the download badge take over */
.lp-wall__item:hover .lp-wall__cap,
.lp-wall__item:focus-visible .lp-wall__cap {
  opacity: 0;
}

.lp-wall__item:hover .lp-wall__dl,
.lp-wall__item:focus-visible .lp-wall__dl {
  transform: scale(1);
}

/* スマホのカードは高さが 70〜160px しかなく、ボタン上のツールチップは
   上端で切れる。小さい画面ではボタンの下に縦積みにして、重なりも防ぐ。 */
@media (max-width: 767.98px) {
  .lp-wall__veil {
    flex-direction: column;
    gap: 5px;
  }

  .lp-wall__dl {
    width: 30px;
    height: 30px;
  }

  .lp-wall__dl svg {
    width: 15px;
    height: 15px;
  }

  .lp-wall__tip {
    position: static;
    width: auto;
    max-width: calc(100% - 12px);
    margin: 0;
    padding: 3px 6px;
    font-size: 9px;
    line-height: 1.25;
    transform: translateY(4px);
  }

  .lp-wall__item:hover .lp-wall__tip,
  .lp-wall__item:focus-visible .lp-wall__tip {
    transform: none;
  }
}

/* floating spec chips */
.lp-hero__chip {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(2, 243, 250, 0.55);
  background: rgba(255, 255, 255, 0.95);
  color: var(--lp-ink);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--lp-ring);
}

.lp-hero__chip i {
  font-size: 14px;
  color: var(--lp-azure);
}

.lp-hero__chip--tl {
  top: 1%;
  left: 0;
}

.lp-hero__chip--br {
  right: 0;
  bottom: 1%;
}

@media (prefers-reduced-motion: reduce) {
  .lp-wall__item {
    animation: none;
    transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  }

  /* poster hover still brightens the hub, just without the scale pop */
  .lp-wall:has(.lp-wall__item:hover) .lp-wall__core::before,
  .lp-wall:has(.lp-wall__item:focus-visible) .lp-wall__core::before {
    transform: translate(-50%, -50%);
  }
}

/* legal fine print — a full-bleed band on the hero's bottom edge.
   It used to be a card inside the left column, which boxed the headline in from
   both sides (badge on top, card at the bottom) and made the whole column feel
   compressed. As a band it reads as the section's footnote and leaves the
   copy / CTA stack free. The translucent plate is required: the hero gradient
   turns near-white cyan on the right, where 55% white text would disappear. */
.lp-hero__legal {
  padding: 13px 0 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(1, 24, 42, 0.38);
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.01em;
  text-align: left;
}

.lp-hero__legal p {
  margin: 0;
}

.lp-hero__legal i {
  margin-right: 7px;
  color: var(--lp-cyan);
  font-size: 13px;
  vertical-align: -1px;
  opacity: 0.8;
}

@media (max-width: 767.98px) {
  .lp-hero__legal {
    padding: 11px 0 12px;
    font-size: 11.5px;
    line-height: 1.75;
  }
}

/* hint text sits under the buttons
   the injected platform-toggle CSS makes .btn-groups a full-width flex (so the
   button hugs the left) while the hint stays inline-flex (so it gets centred by
   the parent's text-align). Pin both to the same alignment. */
.lp-page .platform-switch-hint {
  display: flex;
  margin-left: 0;
  font-size: 14px;
  line-height: 1.4;
}

@media (max-width: 767.98px) {
  .lp-page .btn-groups.show {
    justify-content: center;
    gap: 10px;
  }

  /* .mr-4 is !important in the theme; drop it so the button group is centred on
     the same axis as the hint underneath */
  .lp-page .btn-groups.show > a {
    margin-right: 0 !important;
  }

  .lp-page .platform-switch-hint {
    justify-content: center;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .lp-page .platform-switch-hint {
    justify-content: flex-start;
  }
}

/* white copy for the hint on the blue surfaces */
.lp-hero .platform-switch-hint,
.lp-page .bg-gradient .platform-switch-hint,
.lp-final .platform-switch-hint {
  color: rgba(255, 255, 255, 0.92);
}

/* the shared OS icon is near-black: invert it on blue */
.lp-hero .platform-switch-hint img,
.lp-page .bg-gradient .platform-switch-hint img,
.lp-final .platform-switch-hint img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.lp-hero .features-upgrade {
  margin: 26px 0 8px;
}

/* keep the three selling points on one line on desktop */
.lp-hero .feature-item {
  flex: 1 1 0;
  min-width: 0;
}

/* tablet / small desktop: the left column gets narrow -> stack the points */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .lp-hero .features-upgrade {
    flex-direction: column;
    gap: 12px;
    margin: 22px 0 8px;
  }

  .lp-hero .feature-item {
    flex: 0 0 auto;
    min-width: 0;
  }
}

@media (max-width: 991.98px) {
  .lp-hero .features-upgrade {
    justify-content: space-between;
  }

  .lp-hero__visual {
    max-width: 480px;
    margin-top: 20px;
  }
}

@media (max-width: 767.98px) {
  .lp-hero .features-upgrade {
    justify-content: space-between;
    gap: 12px 8px;
  }

  .lp-hero .feature-item {
    flex: 1 1 30%;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }

  .lp-hero .feature-item img {
    flex: 0 0 auto;
    width: 26px;
    height: auto;
  }

  .lp-hero .feature-item .text {
    align-items: center;
  }

  .lp-hero .feature-item .text strong {
    font-size: 12px;
    line-height: 1.35;
  }

  .lp-hero .feature-item .text span {
    display: none;
  }

  .lp-hero__visual {
    max-width: 370px;
    margin-top: 18px;
  }

  .lp-hero__chip {
    padding: 6px 12px;
    font-size: 11px;
  }

  .lp-hero__chip i {
    font-size: 12px;
  }

  /* the gaps between posters get too narrow on phones, so the chips move
     back to the outer corners instead of sitting inside the wall */
  .lp-hero__chip--tl {
    top: 0;
    left: 0;
    transform: none;
  }

  .lp-hero__chip--br {
    left: auto;
    right: 0;
    bottom: 0;
    transform: none;
  }

  /* the stage is much smaller here: nudge every poster up so the artwork is
     still readable */
  .lp-wall__item {
    width: calc(var(--w) + 4%) !important;
  }

  .lp-wall__core {
    width: 27%;
  }
}

/* --------------------------------------------------------------------------
   3. Use-case visuals
   (image assets pending -> inline SVG line art keeps the layout)
   -------------------------------------------------------------------------- */
/* タブ内の 1 行（旧 inline style="padding:20px"）。 */
.lp-scene__row {
  padding: 20px;
}

.lp-scene__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(2, 243, 250, 0.45);
  background:
    radial-gradient(circle at 30% 18%, #ffffff, rgba(255, 255, 255, 0) 62%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.97) 0%,
      rgba(222, 247, 253, 0.94) 100%);
  box-shadow: 0 28px 50px -32px rgba(1, 26, 48, 0.8);
}

.lp-scene__visual svg {
  width: 72%;
  height: auto;
}

/* 真实配图：4:3 原图 + 4:3 容器，cover 即等比铺满，不裁切 */
.lp-scene__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.lp-scene__visual.is-photo {
  background: none;
  border: 0;
  box-shadow: none;
}

.lp-scene__visual.is-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* rating strip above the customer reviews */
.lp-rating {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}

.lp-rating__stars {
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1;
  color: #f6a11a;
}

.lp-rating__score {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--lp-ink);
}

.lp-rating__note {
  font-size: 13px;
  color: #737491;
}

/* --------------------------------------------------------------------------
   4. Final CTA
   -------------------------------------------------------------------------- */
.lp-final {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: #0271c0;
  background-image:
    radial-gradient(640px 400px at 92% 0%, rgba(2, 243, 250, 0.4),
      rgba(2, 243, 250, 0) 66%),
    radial-gradient(560px 360px at 2% 104%, rgba(0, 202, 230, 0.3),
      rgba(0, 202, 230, 0) 68%),
    linear-gradient(100deg, #05507c 0%, #025b9e 22%, #0271c0 50%,
      #0392c8 76%, #00c2de 100%);
}

.lp-final__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.lp-final__dl {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.lp-final__actions .btn-market,
.lp-final__actions .btn-download-mac {
  margin: 0;
}

/* purchase button.
   The theme's .btn-download-mac already gives the download buttons their
   geometry, icon slot and two-line type. Reuse it and only change the fill, so
   the pair reads as one family on the blue band. */
.lp-final__actions .lp-buy {
  margin-left: 30px;
  background-color: #023e6d;
  border: 1px solid rgba(2, 243, 250, 0.55);
  box-shadow: 0 0 0 4px rgba(2, 243, 250, 0.13),
    0 18px 34px -20px rgba(1, 18, 34, 0.85);
  transition: background-color 0.2s ease, box-shadow 0.2s ease,
    transform 0.2s ease;
}

.lp-final__actions .lp-buy:hover {
  background-color: #012f55;
  transform: translateY(-1px);
  box-shadow: 0 0 0 5px rgba(2, 243, 250, 0.2),
    0 22px 38px -20px rgba(1, 18, 34, 0.9);
}

@media (max-width: 767.98px) {
  .lp-final__actions .lp-buy {
    margin-left: 0;
    margin-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-final__actions .lp-buy {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   5. Use-case tabs: body copy + CTA row
   The scene copy used to be one dense paragraph; it is now split into 2-3
   paragraphs, so give them a steady rhythm instead of the theme's 1rem gap.
   -------------------------------------------------------------------------- */
.lp-scene__text p {
  margin: 0 0 12px;
  line-height: 1.9;
}

.lp-scene__text p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .lp-scene__text p {
    margin-bottom: 10px;
    line-height: 1.85;
  }
}

.lp-scene__cta {
  margin-top: 30px;
}

.lp-scene__cta .btn-groups.show {
  justify-content: flex-start;
}

@media (max-width: 991.98px) {
  .lp-scene__cta {
    margin-top: 24px;
  }

  .lp-scene__cta .btn-groups.show {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   5.5 使い方 step label  (.lp-step)
   The old version stacked a badge with a 24px number above the sentence, which
   read as two unrelated blocks. Now it is a single row: a compact "STEP 1"
   chip and the sentence share one baseline.
   -------------------------------------------------------------------------- */
/* 使い方カルーセルの外枠（旧 inline style="max-width:780px"）。 */
.lp-howto {
  max-width: 780px;
  margin-right: auto;
  margin-left: auto;
}

.lp-step {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.lp-step__badge {
  flex: 0 0 auto;
  padding: 5px 14px 6px;
  border-radius: 7px;
  /* カテゴリチップ選択中と同じグラデ（--lp-grad-tab） */
  background-image: var(--lp-grad-tab);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  white-space: nowrap;
  box-shadow: 0 6px 14px -10px rgba(46, 90, 177, 0.95);
}

.lp-step__text {
  margin: 0;
  color: #4a4b65;
  font-size: 15px;
  line-height: 1.75;
  text-align: left;
}

@media (max-width: 575.98px) {
  .lp-step {
    gap: 8px;
    margin-bottom: 14px;
  }

  .lp-step__badge {
    padding: 4px 10px 5px;
    font-size: 11.5px;
    letter-spacing: 0.06em;
  }

  .lp-step__text {
    font-size: 14px;
    line-height: 1.7;
  }
}

/* --------------------------------------------------------------------------
   6. "further instructions" callout under the step carousel
   -------------------------------------------------------------------------- */
.lp-guide-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid rgba(3, 169, 219, 0.26);
  background: rgba(230, 250, 253, 0.8);
  font-size: 14px;
  line-height: 1.5;
  color: #4a4b65;
}

.lp-guide-note i {
  font-size: 17px;
  color: var(--lp-azure);
}

.lp-guide-note a {
  color: var(--lp-blue);
  font-weight: 600;
  text-decoration: underline;
}

.lp-guide-note a:hover {
  color: var(--lp-ink);
}

@media (max-width: 419.98px) {
  .lp-hero .feature-item .text strong {
    font-size: 10.5px;
    white-space: nowrap;
  }
}

@media (max-width: 575.98px) {
  .lp-final__actions {
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-badge__dot {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   7. FAQ accordion  (.lp-faq)
   The theme only outlines the *middle* cards of an accordion — the first and
   last lose their border / radius — and zeroes the answer's top padding.
   Every question is its own card here, so all of them get the same outline.
   The indicator is a "+" that rotates into "x" instead of swapping glyphs.
   -------------------------------------------------------------------------- */
.lp-page .lp-faq .accordion > .card,
.lp-page .lp-faq .accordion > .card:first-of-type,
.lp-page .lp-faq .accordion > .card:last-of-type,
.lp-page .lp-faq .accordion > .card:not(:first-of-type),
.lp-page .lp-faq .accordion > .card:not(:last-of-type) {
  margin-bottom: 12px;
  border: 1px solid rgba(60, 146, 226, 0.2);
  border-radius: 14px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(2, 34, 60, 0.05);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

/* No :last-child margin reset on purpose. The two columns stack on phones,
   and a zeroed margin left the last card of column A glued to the first card
   of column B (Q5 + Q6). Keeping the gap on every card fixes that. */

/* opened card: a slightly stronger edge, nothing more */
.lp-page .lp-faq .lp-faq__item:has(.collapse.show) {
  border-color: rgba(60, 146, 226, 0.55);
  box-shadow: 0 6px 18px -14px rgba(2, 34, 60, 0.4);
}

.lp-page .lp-faq .accordion-heading {
  font-size: 1rem;
  line-height: 1.65;
}

.lp-page .lp-faq .accordion-heading > a,
.lp-page .lp-faq .accordion-heading > a.collapsed {
  display: flex;
  align-items: flex-start;
  padding: 16px 54px 16px 16px;
  color: #3a3d52;
  font-weight: 600;
}

.lp-page .lp-faq .accordion-heading > a:hover,
.lp-page .lp-faq .accordion-heading > a[aria-expanded="true"] {
  color: var(--lp-ink);
  text-decoration: none;
}

/* Q1 / Q2 ... chip */
.lp-page .lp-faq__q {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-right: 12px;
  border-radius: 10px;
  background-color: rgba(60, 146, 226, 0.12);
  color: var(--lp-faq);
  font-size: 13px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
  letter-spacing: 0.01em;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.lp-page .lp-faq .accordion-heading > a[aria-expanded="true"] .lp-faq__q {
  background-color: var(--lp-faq);
  color: #fff;
}

.lp-page .lp-faq__qt {
  flex: 1 1 auto;
  padding-top: 3px;
}

.lp-page .lp-faq .accordion .accordion-indicator {
  top: 15px;
  right: 14px;
  width: 26px;
  height: 26px;
  margin-top: 0;
  border-radius: 50%;
  background-color: rgba(60, 146, 226, 0.1);
  color: var(--lp-faq);
  font-size: 17px;
  line-height: 24px;
  transition: transform 0.28s ease, background-color 0.25s ease, color 0.25s ease;
}

.lp-page .lp-faq .accordion-heading > a:hover .accordion-indicator {
  background-color: rgba(60, 146, 226, 0.2);
}

.lp-page .lp-faq .accordion .accordion-indicator::before,
.lp-page .lp-faq .accordion .collapsed .accordion-indicator::before {
  content: "+";
}

.lp-page .lp-faq .accordion .accordion-heading > a[aria-expanded="true"] .accordion-indicator {
  transform: rotate(45deg);
  background-color: var(--lp-faq);
  color: #fff;
}

.lp-page .lp-faq .accordion > .card .card-body {
  padding: 2px 20px 18px 60px;
  color: #5a5d73;
}

@media (max-width: 575.98px) {
  .lp-page .lp-faq .accordion-heading {
    font-size: 0.9375rem;
  }

  .lp-page .lp-faq .accordion-heading > a,
  .lp-page .lp-faq .accordion-heading > a.collapsed {
    padding: 14px 46px 14px 14px;
  }

  .lp-page .lp-faq__q {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    font-size: 12px;
    line-height: 28px;
  }

  .lp-page .lp-faq .accordion .accordion-indicator {
    top: 12px;
    right: 10px;
    width: 24px;
    height: 24px;
    font-size: 16px;
    line-height: 22px;
  }

  .lp-page .lp-faq .accordion > .card .card-body {
    padding: 0 16px 16px 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-page .lp-faq .accordion .accordion-indicator,
  .lp-page .lp-faq .accordion > .card,
  .lp-page .lp-faq__q {
    transition: none;
  }
}

/* ==========================================================================
   8. 番組カード「TVerの注目番組」  — 2026-11-02
   左：カテゴリチップ .lp-cat（内容幅に合わせて流れる／選択中は TVer グラデ）
   右：番組リスト .lp-prog__list（常に2列。スマホも2列）
   季節タグ .lp-season は「秋」1文字の正方形バッジ。li は flex なので
   タイトルが2行になっても秋バッジは縦中央に来る（文字の前に張り付かない）。
   ========================================================================== */

/* ---- 見出し直下のリード文（ベタ置き・中央寄せ） ----
   2026-11-02：ガラスパネル（.lp-prog__intro）は廃止した。白パネルだと
   セクション内の他の要素（チップ／リスト／注記）と質感が揃わず重かったため、
   元のベタ流しに戻している。パネル版の CSS は
   assets/css/lab/prog-intro-panel.css に保管（使うときだけ追加読み込み）。
   文は 1 文だけ。→ 注記 → CTA の順で上から読ませる。 */
.lp-page .lp-prog__lead {
  max-width: 860px;
  margin: 0 auto;
  color: #5a6d82;
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
  text-wrap: pretty;
  /* 日本語を文節単位で折る（対応ブラウザのみ。未対応でも従来どおり） */
  word-break: auto-phrase;
}

/* ---- 注記（セクション最下部） ----
   番組リストの下に置く「但し書き」。本文・リストより 1 段落弱く見せる。
   行頭に fe-info のアイコンを必ず添える（文字だけだと“別の段落”に見える）。
   中央寄せのベタ置きだが、長文なので字面は左揃えのまま。 */
.lp-page .lp-prog__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 860px;
  margin: 28px auto 0;
  color: #8494a8;
  font-size: 12.5px;
  line-height: 1.75;
  text-align: left;
  text-wrap: pretty;
}

.lp-page .lp-prog__note i {
  flex: 0 0 auto;
  margin-top: 1px;
  color: #9db0c4;
  font-size: 13px;
  line-height: 1.6;
}

/* ---- 締めの CTA（セクション最下部・注記の下） ----
   このセクションで唯一の“押せる面”。カテゴリのグラデ
   （#2cc3e3 → #2e5ab1／シアン→濃紺）とは別系統にして、
   「濃い青 → TVer のアクセント青」で塗る（同じ青でも向きが逆なので
   カテゴリの選択中チップと取り違えない）。
   ツヤ（内側ハイライト）は載せない＝フラットな塗りだけ。 */
.lp-page .lp-prog__cta-row {
  margin-top: 20px;
  text-align: center;
}

.lp-page .lp-prog__cta {
  display: inline-block;
  padding: 17px 44px;
  border-radius: 999px;
  background-image: linear-gradient(102deg, #0a63c8 0%, #0288e4 48%,
    #02b1ff 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(9, 39, 84, 0.3);
  box-shadow: 0 14px 26px -20px rgba(2, 90, 160, 0.9);
  transition: transform 0.22s cubic-bezier(0.22, 0.9, 0.3, 1),
    filter 0.2s ease;
}

/* hover は「浮く」のではなく「少し大きくなる」だけ。
   影を強めたり translateY で持ち上げると、下に注記があるぶん
   位置がずれて見えるため。 */
.lp-page .lp-prog__cta:hover,
.lp-page .lp-prog__cta:focus-visible {
  color: #fff;
  text-decoration: none;
  filter: brightness(1.04);
  transform: scale(1.035);
}

.lp-page .lp-prog__cta i {
  display: inline-block;
  margin-left: 11px;
  font-size: 13px;
  vertical-align: -1px;
  opacity: 0.9;
}

@media (max-width: 575.98px) {
  .lp-page .lp-prog__lead {
    font-size: 14px;
    line-height: 1.85;
  }
  .lp-page .lp-prog__cta {
    /* スマホは HTML 側の <br class="d-sm-none"> で 2 行に割る。
       折り返しに任せると「SameMovie／で…」と助詞の前で切れるため。 */
    white-space: normal;
    padding: 15px 28px;
    font-size: 13.5px;
  }
}

/* ---- ユーザーガイドボタン（半透明カプセル・フラット） ----
   参考：tver.co.jp の「お問い合わせはこちら」ボタン。
   ガラス質感（上端のハイライト／内側の屈折影／彩度アップ）は使わない。
   半透明の面 1 枚だけを敷く。参考図の面は白 20% なので、白背景では
   同程度の“差”が出るブランド青 7% に置き換えている。
   枠線は引かない（細い線が入るとカプセルの輪郭が二重に見えて安っぽい）。
   アローは常に同じ位置。hover でもボタンもアローも動かさない（色だけ）。 */
.lp-page .lp-guide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 38px;
  padding: 5px 5px 5px 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(2, 113, 192, 0.07);
  color: #14314c;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color 0.24s ease, color 0.24s ease;
}

.lp-page .lp-guide-btn:hover,
.lp-page .lp-guide-btn:focus-visible {
  background: rgba(2, 113, 192, 0.12);
  color: #07304f;
  text-decoration: none;
}

/* 右端の青い丸。TVer のアクセント色 #02b1ff。影も動きも付けない。 */
.lp-page .lp-guide-btn__go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #02b1ff;
  color: #fff;
  font-size: 15px;
  line-height: 1;
}

/* ---- カテゴリ（2 列グリッド・枠線なし） ----
   2026-11-02 後半：いったん「内容幅に合わせて流れるチップ」にしたが、
   行ごとに列が揃わず一覧として読みにくいため 2 列グリッドに戻した。
   幅は揃うが、文字と矢羽根が離れすぎるので矢羽根は文字の直後に置く
   （justify-content で右端に飛ばさない）。
   枠線は引かない：淡い青の面だけで十分に輪郭が出るうえ、
   1px の線が 7 枚並ぶと格子に見えてうるさい。 */
.lp-cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin: 0;
  border: 0;
}

/* 2 列 4 行になるので、右の内容パネル（4 行）とほぼ同じ高さになる。
   デスクトップでは念のため縦センターに置く。 */
@media (min-width: 992px) {
  .lp-page .lp-prog > .col-lg-6:first-child {
    display: flex;
    align-items: center;
  }
}

.lp-page .lp-cats .nav-item {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.lp-page .lp-cats .nav-link.lp-cat {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 50px;
  padding: 10px 14px 10px 18px;
  border: 0;
  border-radius: 999px;
  /* 白背景では「白 20%」が効かないので、ブランド青で同じ“差”を作る。
     ユーザーガイドボタンと同じレシピ（半透明 1 枚だけ）。 */
  background: rgba(2, 113, 192, 0.08);
  color: #2b425a;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px -6px rgba(18, 60, 110, 0.35);
  transition: color 0.22s ease, background-color 0.22s ease,
    box-shadow 0.22s ease;
}

/* 選択時の塗り。opacity でフェードさせたいので擬似要素の面として持つ。
   色は TVer の「シアン → 濃い青」（参考ボタンの実測 #2cc3e3 → #2e5ab1）。
   STEP バッジと共有（--lp-grad-tab は .lp-page 側で定義）。 */
.lp-cat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-image: var(--lp-grad-tab);
  opacity: 0;
  transition: opacity 0.26s ease;
}

.lp-cat__name {
  position: relative;
  z-index: 1;
  /* 2 列だと内法が狭い。flex:0 0 auto のままだと text が縮まず、
     「報道・ドキュメンタリー」が右端で切れる（320px で実測）。
     1 1 auto + min-width:0 にして、<wbr> の位置で折り返させる。 */
  flex: 1 1 auto;
  min-width: 0;
  /* 日本語は本来どこでも折れる。keep-all で「・」や <wbr> の位置だけに絞り、
     「報道・ドキュメンタリ／ー」のような語中折れを防ぐ。 */
  word-break: keep-all;
}

.lp-cat__arrow {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  font-size: 10px;
  opacity: 0.3;
  transition: opacity 0.18s ease;
}

.lp-page .lp-cats .nav-link.lp-cat:hover {
  background: rgba(2, 113, 192, 0.13);
  color: #0b344f;
}

.lp-page .lp-cats .nav-link.lp-cat:hover .lp-cat__arrow {
  opacity: 0.55;
}

/* 選択中：TVer グラデで塗る。白文字が乗るので文字側にだけ淡い影を落とす。 */
.lp-page .lp-cats .nav-link.lp-cat.active {
  background-color: #2e5ab1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(9, 39, 84, 0.25);
  box-shadow: 0 10px 20px -14px rgba(46, 90, 177, 0.9);
}

.lp-page .lp-cats .nav-link.lp-cat.active::before {
  opacity: 1;
}

.lp-page .lp-cats .nav-link.lp-cat.active .lp-cat__arrow {
  color: #fff;
  opacity: 0.9;
}

/* カテゴリ固有色（既定値は .lp-cat 側。ここは同特異性なので順序で上書きする）
   ※ .lp-page 付きの詳細セレクタで --c を書くと、ここの指定が負けるので注意。 */
.lp-cat { --c: #6f7a88; --c2: #838e9d; }
.lp-cat--drama { --c: #b0473d; --c2: #cb5b4c; }   /* ドラマ：煉瓦色の赤 */
.lp-cat--variety { --c: #7a4fbf; --c2: #9469d7; } /* バラエティ・音楽：紫 */
.lp-cat--anime { --c: #b44a84; --c2: #ce619e; }   /* アニメ：洋紅 */
.lp-cat--docu { --c: #2a6fa8; --c2: #3787c6; }    /* 報道：深い青 */
.lp-cat--station { --c: #23795c; --c2: #2f9571; } /* テレビ局：深緑 */
.lp-cat--sports { --c: #b5611c; --c2: #d07826; }  /* スポーツ：琥珀 */
.lp-cat--other { --c: #6f7a88; --c2: #838e9d; }   /* その他：灰青 */

/* ---- 季節タグ（1文字の正方形バッジ） ----
   色は --season を差し替えるだけ。data-year は HTML 側に保持（非表示）。 */
.lp-season {
  --season: #dd5b28;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  background: var(--season);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.lp-season--spring { --season: #d9648b; } /* 春：桜 */
.lp-season--summer { --season: #1f8fbf; } /* 夏：海 */
.lp-season--autumn { --season: #dd5b28; } /* 秋：楓の橙赤 */
.lp-season--winter { --season: #4a76a8; } /* 冬：凍て色 */
/* ---- 右：内容パネル（左のカテゴリと職能を分ける） ---- */
.lp-page #tver-programs .lp-prog__panel {
  height: 100%;
  padding: 18px 22px 20px;
  border: 1px solid #e6eef8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 48px -38px rgba(2, 52, 90, 0.55);
}

/* 項目が4件以上のカテゴリは2列（列優先で手割り済み） */
.lp-page .lp-prog__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
}

/* タブ切り替えは display の同期切り替えで行う。
   Bootstrap の .fade は「transitionend が来たら古い pane の active を外す」
   作りなので、150ms 以内に別タブを続けて押すとイベントが来ず、
   古い pane が active のまま残って別カテゴリの一覧が同時に見えてしまう。
   fade を外したぶんの淡入は自前のアニメーションで補う。 */
.lp-page .tab-content > .tab-pane {
  display: none;
}

.lp-page .tab-content > .tab-pane.active {
  display: block;
  animation: lpProgIn 0.22s ease both;
}

@keyframes lpProgIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* 4件未満は1列 */
.lp-page .lp-prog__cols--one {
  grid-template-columns: minmax(0, 1fr);
}

.lp-page .lp-prog__col {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-page .lp-prog__col > li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 8px 0;
  border-bottom: 1px solid #eef3f9;
  background: transparent;
  color: #33415c;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}

.lp-page .lp-prog__col > li:last-child {
  border-bottom: 0;
}

.lp-prog__t {
  flex: 1 1 auto;
  min-width: 0;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ---- 各行のダウンロードボタン ----
   下向き矢印だけの最小構成（円も枠も影もなし）。アイコンは疑似要素で描くので
   HTML 側は <a class="lp-dl"></a> のみ。 */
.lp-dl {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --dl-x: 0px; /* ヒントの横位置（JS が画面端で補正） */
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #a6b7ca;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.lp-dl::before {
  font-family: 'feather';
  content: "\e90f"; /* fe-arrow-down */
  line-height: 1;
}

.lp-dl:hover,
.lp-dl:focus-visible {
  z-index: 7;
  background: rgba(3, 169, 219, 0.1);
  color: var(--lp-blue);
  text-decoration: none;
}

/* ヒントはボタンの右側に出す（左だと作品名に重なる）。
   行の右端にボタンがあるため、1行のままだと画面幅 1440 前後で
   作品名の末尾に重なる。2行に折って幅を 85px 程度に抑えている。 */
.lp-dl::after {
  content: "SameMovieで\A ダウンロード";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 6px;
  padding: 5px 9px;
  border-radius: 6px;
  background: #22334a;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  white-space: pre;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(calc(var(--dl-x) - 4px));
  transition: opacity 0.16s ease, transform 0.16s ease;
  box-shadow: 0 10px 20px -12px rgba(2, 52, 90, 0.9);
}

.lp-dl:hover::after,
.lp-dl:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(var(--dl-x));
}

/* ヒントをボタンの左側へ反転する。
   ボタンは行の右端にあるため、右側に出すと 100px 近くビューポートを越え、
   opacity:0 のままでも scrollWidth に入って**横スクロール**が出ていた
   （390px で +73px 実測）。収まらない幅では左へ出してパネル内に納める。
   反転の判定は JS（tver-prog.js）が実際の幅で行い .lp-dl--tip-left を付ける。
   下のメディアクエリは JS が無効なときのフォールバック。 */
.lp-dl--tip-left::after {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 6px;
  /* 反転時はアニメの向きも逆に（右から寄ってくる） */
  transform: translateY(-50%) translateX(calc(var(--dl-x) + 4px));
}

.lp-dl--tip-left:hover::after,
.lp-dl--tip-left:focus-visible::after {
  transform: translateY(-50%) translateX(var(--dl-x));
}

@media (max-width: 1199.98px) {
  .lp-dl::after {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 6px;
    transform: translateY(-50%) translateX(calc(var(--dl-x) + 4px));
  }

  .lp-dl:hover::after,
  .lp-dl:focus-visible::after {
    transform: translateY(-50%) translateX(var(--dl-x));
  }
}

/* ---- もっと見る（外部リンク） ---- */
.lp-page .lp-prog__col > li.lp-prog-more {
  min-height: 0;
  padding: 12px 0 2px;
  border-bottom: 0;
}

.lp-prog-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #19adf4;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.lp-prog-more a:hover,
.lp-prog-more a:focus-visible {
  color: var(--lp-blue);
  text-decoration: underline;
}

.lp-prog-more i {
  font-size: 13px;
  transition: transform 0.18s ease;
}

.lp-prog-more a:hover i {
  transform: translate(1px, -1px);
}

/* ---- レスポンシブ（列数は変えず、寸法だけ調整） ---- */
@media (min-width: 992px) {
  /* 左のカテゴリと右のパネルを離して、職能の違いを出す */
  .lp-page #tver-programs .lp-prog > .col-lg-6:first-child {
    padding-right: 36px;
  }
}

@media (max-width: 991.98px) {
  .lp-page #tver-programs .lp-prog__panel {
    height: auto;
    padding: 16px 18px 18px;
    border-radius: 16px;
  }

  .lp-page .lp-cats {
    margin-bottom: 22px;
  }
}

/* 576〜991px は上下に積む。チップは幅に合わせて流れるので列指定は不要
   （以前は grid 3 列に割り直していた名残を削除）。 */

@media (max-width: 767.98px) {
  .lp-page .lp-cats .nav-link.lp-cat {
    gap: 7px;
    padding: 8px 11px 8px 14px;
    font-size: 13px;
  }

  .lp-page .lp-prog__cols {
    column-gap: 20px;
  }

  .lp-page .lp-prog__col > li {
    min-height: 50px;
    gap: 8px;
    padding: 8px 0;
    font-size: 14px;
  }

  .lp-dl {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }

  .lp-season {
    width: 22px;
    height: 22px;
    font-size: 14px;
    border-radius: 2px;
  }
}

@media (max-width: 575.98px) {
  .lp-page .lp-cats {
    gap: 8px;
  }

  /* 2 列を保つと 1 枚の内法は約 130px。「報道・ドキュメンタリー」は
     1 行に収まらないので、ここからは折り返しを許可する
     （<wbr> の位置＝「報道・／ドキュメンタリー」で割れる）。 */
  .lp-page .lp-cats .nav-link.lp-cat {
    min-height: 46px;
    padding: 8px 10px 8px 13px;
    font-size: 12.8px;
    white-space: normal;
  }

  .lp-page .lp-prog__lead {
    font-size: 14px;
    line-height: 1.85;
  }

  /* 2列のまま文字を大きく見せるため、余白とボタンを詰める */
  .lp-page #tver-programs .lp-prog__panel {
    padding: 13px 12px 14px;
  }

  .lp-page .lp-prog__cols {
    column-gap: 10px;
  }

  .lp-page .lp-prog__col > li {
    min-height: 46px;
    gap: 6px;
    font-size: 14px;
  }

  .lp-dl {
    width: 22px;
    height: 22px;
    font-size: 13.5px;
  }

  .lp-season {
    width: 21px;
    height: 21px;
    font-size: 13.5px;
  }

  .lp-page .lp-prog__col > li.lp-prog-more {
    padding: 10px 0 0;
  }

  .lp-prog-more a {
    font-size: 13px;
  }
}

/* 360px 未満（321〜359）は2列を保ったまま、余白とボタンを最小化する */
@media (max-width: 359.98px) {
  /* 見出しのバッジが「チェッ／ク！」で割れるのを防ぐ。
     keep-all だと日本語に空白が無いので丸ごと溢れる。auto-phrase なら
     文節（「見逃し配信を」「チェック！」）で折れる。未対応ブラウザは従来どおり。
     このセクションだけの指定（他ページの h2 には影響させない）。 */
  .lp-page #tver-programs h2 span {
    word-break: auto-phrase;
  }

  .lp-page .lp-cats .nav-link.lp-cat {
    min-height: 44px;
    padding: 7px 9px 7px 11px;
    font-size: 12.2px;
  }

  .lp-page .lp-cats .nav-link.lp-cat--docu .lp-cat__name {
    font-size: 11.4px;
  }

  /* CTA：ここまで狭いと「ダウンロ／ード」で語中折れするので一段落とす */
  .lp-page .lp-prog__cta {
    padding: 13px 18px;
    font-size: 12.2px;
  }

  .lp-page #tver-programs .lp-prog__panel {
    padding: 11px 10px 12px;
  }

  .lp-page .lp-prog__cols {
    column-gap: 8px;
  }

  .lp-page .lp-prog__col > li {
    gap: 5px;
    font-size: 13.5px;
  }

  .lp-season {
    width: 20px;
    height: 20px;
    font-size: 13px;
  }

  .lp-dl {
    width: 20px;
    height: 20px;
    font-size: 13px;
  }
}

/* タッチ端末はホバーが無いので、色だけ濃くして押せることを示す */
@media (hover: none) {
  .lp-dl {
    color: #7f97b0;
  }

  .lp-dl::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-page .lp-cats .nav-link.lp-cat,
  .lp-cat::before,
  .lp-cat__arrow,
  .lp-dl,
  .lp-dl::after,
  .lp-prog-more i {
    transition: none;
  }
}

/* 320px 級の極小画面。チップは nowrap なので、ここだけ一段落とす。 */
@media (max-width: 359.98px) {
  .lp-page .lp-cats .nav-link.lp-cat {
    font-size: 12px;
    padding: 7px 10px;
  }
}

/* --------------------------------------------------------------------------
   8. 旧 inline style の置き換え（ページ固有の小さなユーティリティ）
   HTML 側から style="" を消すために切り出したもの。値は移しただけ。
   -------------------------------------------------------------------------- */
/* アンカー移動時に固定ヘッダー分を空ける（#review / #faq） */
.lp-page #review,
.lp-page #faq {
  scroll-margin-top: 100px;
}

/* フッター上部の 4 アイコン（旧 style="font-size:2.125rem"） */
.lp-foot-ico {
  font-size: 2.125rem;
}

/* フッターのロゴリンク（旧 style="width:153px"） */
.lp-foot-brand {
  width: 153px;
}

/* 人気記事カルーセル：掲載が 2 件だけのとき用。
   カード幅は 3 列表示のときと同じ（コンテナ幅の 1/3）に保ち、
   2 枚を中央寄せにする。横幅いっぱいには広げない。 */
@media (min-width: 850px) {
  .lp-pick--duo {
    max-width: 66.6667%;
    margin-left: auto;
    margin-right: auto;
  }
}