.section-fv {
  background-color: var(--color05);
  /* スクリーン中心の光を少しタイトに＆明るめに */
  background-image:
    radial-gradient(
      circle at 50% 22%,           /* 少し上寄せ（スクリーン位置） */
      rgba(170, 190, 230, 0.85),   /* スクリーンの中心の青白い光 */
      rgba(40, 55, 90, 0.5) 35%,
      transparent 60%
    );
  position: relative;
  overflow: hidden;
  z-index: 10;
}

.section-fv::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/wp-content/themes/TKS_EIGAKAN/assets/img/film_back.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.15;      /* 濃いときは 0.1〜0.12 にしてもOK */
  pointer-events: none;
  z-index: -1;
}

.section-fv {
  /* 既存の背景とかはそのまま */
  position: relative;
  overflow: hidden;

  /* ★ 初期位置（中央やや上） */
  --spot-x: 50%;
  --spot-y: 30%;
}

/* スポットライトレイヤー */
.fv-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4; /* テキストの下にしたければ 2〜3 に調整 */

  /* スポットライト用グラデーション */
  background-image: radial-gradient(
    circle at var(--spot-x) var(--spot-y),
    rgba(255, 255, 255, 0.23) 0%,
    rgba(210, 220, 255, 0.16) 18%,
    transparent 42%
  );

  mix-blend-mode: screen; /* 光っぽく重なる */
}

/* スマホなどでは重いのでオフ推奨 */
@media (pointer: coarse), (max-width: 768px) {
  .fv-spotlight {
    display: none;
  }
}

.hero-meta {
    transition: .4s ease-in-out;
}
.hero-meta:hover {
    transform: translateY(-4px) !important;
}
.film-wrapper {
  position: relative;
  z-index: 1; /* FVより下でOK */
}

/* 左右フィルム背景 */
/* 左右フィルム背景 */
.film-wrapper::before,
.film-wrapper::after {
  content: "";
  position: fixed;
  top: var(--header-height, 70px);
  bottom: 0;
  width: 120px;
  background-image: url('/wp-content/themes/TKS_EIGAKAN/assets/img/film.webp');
  background-repeat: repeat-y;
  background-size: contain;
  opacity: 0.15;
  pointer-events: none;
  z-index: -1;

  /* ★ 追加：フィルムが下から上へ流れるアニメーション */
  animation: film-scroll 20s linear infinite;
}

@keyframes film-scroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -800px; /* スクロール量。画像次第で調整 */
  }
}

/* 左側 */
.film-wrapper::before {
  left: 0;
}

/* 右側 */
.film-wrapper::after {
  right: 0;
}


@media screen and (max-width:630px) {
    .film-wrapper {
        display: none;
}
}