/* ==========================================================================
   scene-hero — 全幅シネマティック画像ヒーロー（Ocean Quest風・fde-quest下層ページ）
   使い方: <section class="sh" style="--sh-img:url(/img/scenes/xxx.jpg)"> …
   ・fixedヘッダー（.header, 高さ62px + padding10px）の直下に置く。
     .header-gap は置かず、.sh-in の上paddingでクリアランスを確保する。
   ・background-attachment:fixed は使わない（iOSでカクつくため）。
   ========================================================================== */

.sh {
  position: relative;
  width: 100%;
  padding: 0;               /* style.css の section{padding:96px 0} を打ち消す */
  margin: 0;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background-color: #070D1E;
  background-image: var(--sh-img);
  background-size: cover;
  background-position: var(--sh-pos, 50% 50%);
  background-repeat: no-repeat;
}

/* 左を濃くする横グラデ（可読性優先） */
.sh::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(6, 12, 30, .94) 0%,
      rgba(6, 12, 30, .86) 26%,
      rgba(6, 12, 30, .62) 56%,
      rgba(6, 12, 30, .34) 78%,
      rgba(6, 12, 30, .26) 100%);
}

/* 下端の締め（本文へのつなぎ） */
.sh::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(6, 12, 30, 0) 0%, rgba(6, 12, 30, .55) 100%);
}

.sh-in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(146px, 17vh, 190px) 24px clamp(48px, 7vh, 80px);
}

/* ---- キッカー ---- */
.sh-kick {
  display: block;
  margin: 0 0 18px;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1.7;
  color: rgba(255, 255, 255, .74);
  text-transform: uppercase;
}
.sh-kick em,
.sh-kick .sh-kick-sub {
  font-style: normal;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .56);
}

/* ---- 見出し ---- */
.sh-h1 {
  margin: 0;
  max-width: 21em;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800;
  line-height: 1.52;
  letter-spacing: .035em;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
}
.sh-h1 em {
  font-style: normal;
  color: #7DD8EC;
}
.sh-h1 small {
  display: block;
  margin-top: 12px;
  font-size: 48%;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .8);
}

/* ---- リード ---- */
.sh-lead {
  margin: 22px 0 0;
  max-width: 46em;
  font-size: clamp(13.5px, 1.05vw, 15px);
  line-height: 2.05;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .84);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .5);
}
.sh-lead b {
  font-weight: 700;
  color: #fff;
}

/* ---- メタ情報（白版） ---- */
.sh-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin: 30px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.sh-meta > div,
.sh-meta > li {
  list-style: none;
  min-width: 0;
}
.sh-meta dt,
.sh-meta > li > span:first-child {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 5px;
}
.sh-meta dd,
.sh-meta > li > b {
  display: block;
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
}
.sh-meta small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, .62);
}
.sh-meta b {
  font-weight: 700;
  color: #fff;
}
.sh-meta span b {
  color: #fff;
}

/* ---- SP ---- */
@media (max-width: 768px) {
  .sh {
    min-height: 52vh;
    background-position: var(--sh-pos-sp, var(--sh-pos, 50% 50%));
  }
  .sh::before {
    background:
      linear-gradient(168deg,
        rgba(6, 12, 30, .82) 0%,
        rgba(6, 12, 30, .72) 34%,
        rgba(6, 12, 30, .84) 74%,
        rgba(6, 12, 30, .93) 100%);
  }
  .sh-in {
    padding: max(122px, 16vh) 20px clamp(34px, 5vh, 48px);
  }
  .sh-h1 { line-height: 1.55; letter-spacing: .02em; }
  .sh-lead { margin-top: 18px; line-height: 1.95; }
  .sh-meta { gap: 14px 22px; margin-top: 24px; padding-top: 16px; }
}

/* ==========================================================================
   ヒーロー動画レイヤー — 承認済み現場6カットのループ（/img/hero-loop.mp4）
   ・.sh の background-image はそのままフォールバック兼初期表示として残す
   ・data-hero-offset（秒）でページごとに始まるカットを変える（scene-hero.js）
   ・::before / ::after のスクリム（z-index:1）より下＝可読性の設計は不変
   ========================================================================== */
.sh-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--sh-pos, 50% 50%);
  display: block;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  /* 動画を出さず、.sh の背景画像（各ページの scenes/*.jpg）を見せる */
  .sh-video { display: none; }
}