@charset "utf-8";

/* トップのメインスライダーで、静止画の背後に動画をうっすら流すスライド（2026-09-24）。
   使うのは shore-tiprun のスライドだけ。**共有の splide/style.css と keystone2024.css は触らない**
   （どちらもサイト全体が読むので、?v= の付け直しが全ページに波及する）。

   仕組み: .slide-media の子は既に position:absolute / object-fit:cover で重なるので、
   動画を先に置き、写真をその上に透かして重ねる。動画は音なし・自動再生・ループで、
   装飾なので読み上げの対象から外す（aria-hidden）。 */

.slide-bgvideo__v {
  z-index: 0;
  filter: saturate(1.05) brightness(1.02);
}

.slide-bgvideo__img {
  z-index: 1;
  /* **まず opacity で透かす。** iOS Safari では mask が効かないことがあり、
     mask だけに頼ると「動画がまったく見えない」になる（2026-09-24 に iPhone で実測）。
     opacity はどの環境でも効くので、これを土台にする。 */
  opacity: 0.62;
  /* 対応する環境では、さらに左側（海と空の空き）を強く透かして動画を見せる。
     右側の被写体（人物とエギ）は不透明のまま残る。 */
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 30%, #000 52%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 30%, #000 52%);
}

/* スマホは正方形で被写体が中央に寄る。上だけ透かすと人物の暗い部分に重なって
   何も見えないので、**全体を一様に透かす**（mask は使わない）。 */
@media only screen and (max-width: 750px) {
  .slide-bgvideo__img {
    opacity: 0.58;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* 見出しは写真より前。動画が透けても読めるように、下側だけ軽く沈める */
.slide-bgvideo .slide-title-overlay {
  z-index: 2;
}

.slide-bgvideo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 20, 32, 0) 0%, rgba(10, 20, 32, 0.45) 100%);
  pointer-events: none;
}

/* 動きを減らす設定の人には、動画を止めて写真だけ見せる */
@media (prefers-reduced-motion: reduce) {
  .slide-bgvideo__v { display: none !important; }
  .slide-bgvideo__img { opacity: 1; -webkit-mask-image: none; mask-image: none; }
}

/* ── このスライドだけ、見出しを大きく張り出す（文言は変えない） ───────────────
   共有の keystone2024.css は触らず、.slide-bgvideo の中だけ上書きする。      */
.slide-bgvideo .slide-title-overlay {
  background: linear-gradient(transparent, rgba(6, 14, 24, 0.86));
  padding: 44px 28px 26px;
  /* 見出しと副題はどちらも inline-block（帯を文字幅に合わせるため）。
     横に回り込まないよう、縦に積む。 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.slide-bgvideo .slide-main-title {
  position: relative;
  display: inline-block;
  font-size: clamp(22px, 4.6vw, 54px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 0 0 12px;
  padding: 0 0 0 20px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 10px 26px rgba(0, 0, 0, 0.55);
}

/* 見出しの頭に赤い縦棒 */
.slide-bgvideo .slide-main-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.12em;
  width: 7px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ff3b2f 0%, #E0211A 100%);
  box-shadow: 0 0 18px rgba(224, 33, 26, 0.7);
}

/* 副題は赤い帯に白抜き */
.slide-bgvideo .slide-sub-title {
  display: inline-block;
  font-size: clamp(13px, 2.3vw, 19px);
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 1;
  color: #fff;
  background: linear-gradient(90deg, rgba(224, 33, 26, 0.95) 0%, rgba(224, 33, 26, 0.78) 88%, rgba(224, 33, 26, 0.35) 100%);
  padding: 8px 30px 8px 20px;
  line-height: 1.7;
  border-left: 7px solid #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

@media (max-width: 768px) {
  .slide-bgvideo .slide-title-overlay { padding: 26px 16px 16px; }
  .slide-bgvideo .slide-main-title { padding-left: 14px; margin-bottom: 9px; }
  .slide-bgvideo .slide-main-title::before { width: 5px; }
  .slide-bgvideo .slide-sub-title { padding: 5px 16px 5px 12px; border-left-width: 5px; }
}

/* 自動再生が止まった環境（iOS の省電力モードなど）でも背景が出るように、
   動画の背面に同じ絵のポスターを敷いておく。 */
.slide-bgvideo__poster {
  z-index: -1;
}