/* 限定正社員 採用サイト 構築 v7 用 CSS（v6.css のあとに読む）。本人 10/08「トップの動画に文字が被りすぎ」。
   動画を画面いっぱいに見せ、白いもやをやめて下と左だけを暗くし、見出しとボタンだけを左下に白い文字で置く。説明文は動画の下の帯（.v7-intro）へ。
   場面の名前の札（.v7-scene）は動画に合わせて切り替える（JS）。動きを減らす設定・動画が流れていない時は札を出さない。 */
.v7-hero { min-height: min(880px, 100svh); align-items: flex-end; padding-bottom: 64px; }
.v7-hero .hero__veil { background: linear-gradient(0deg, rgba(6, 30, 34, 0.80) 0%, rgba(6, 30, 34, 0.42) 34%, rgba(6, 30, 34, 0) 62%),
                                  linear-gradient(90deg, rgba(6, 30, 34, 0.50) 0%, rgba(6, 30, 34, 0) 48%); }
.v7-hero .hero__blob { display: none; }
.v7-hero .hero__in > div { max-width: 640px; }
.v7-hero .hero__eyebrow { color: #bdf1f2; }
.v7-hero .hero__title { color: #fff; font-size: clamp(26px, 3.6vw, 46px); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.v7-hero .hero__cta { margin-top: 22px; }
.v7-hero .btn--tel { background: rgba(255, 255, 255, 0.92); }
.v7-hero .hero__note { top: calc(var(--h-header) + 16px); bottom: auto; right: 16px; color: #1d3c40; }
.v7-hero .v6-pause { bottom: 24px; right: 24px; top: auto; }
.v7-scene { position: absolute; right: 24px; bottom: 76px; z-index: 4; display: flex; align-items: baseline; gap: 10px; max-width: 46%; padding: 8px 16px; border-radius: 12px;
            background: rgba(6, 30, 34, 0.55); color: #fff; opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; }
.v7-scene.is-on { opacity: 1; transform: none; }
.v7-scene__no { font-family: var(--f-en, sans-serif); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; color: #bdf1f2; white-space: nowrap; }
.v7-scene__t { font-weight: 700; font-size: clamp(14px, 1.4vw, 18px); line-height: 1.4; }
/* 動画の下の帯（説明文・相談の文・【案】） */
.v7-intro { padding: 40px 0 8px; }
.v7-intro__lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.9; margin: 0; max-width: 860px; }
.v7-intro__sub { margin: 10px 0 0; font-size: 14px; color: var(--c-ink2); }
.v7-intro .v7-intro__fields { margin: 14px 0 0; font-size: 14px; color: var(--c-ink2); }
.v7-intro + .features { margin-top: 0; padding-top: 24px; }
@media (max-width: 760px) {
  .v7-hero { min-height: min(760px, 100svh); padding-bottom: 56px; }
  .v3-hero.v6-hero.v7-hero { padding-top: calc(var(--h-header) + 72px); }
  .v7-hero .hero__veil { background: linear-gradient(0deg, rgba(6, 30, 34, 0.86) 0%, rgba(6, 30, 34, 0.50) 42%, rgba(6, 30, 34, 0.10) 70%, rgba(6, 30, 34, 0.25) 100%); }
  .v7-hero .v6-pause { top: calc(var(--h-header) + 12px); bottom: auto; right: 12px; }
  .v7-scene { top: calc(var(--h-header) + 12px); bottom: auto; left: 12px; right: auto; max-width: calc(100% - 170px); padding: 6px 12px; }
  .v7-scene__t { font-size: 13px; }
  .v7-hero .hero__note { top: auto; bottom: 14px; right: 12px; left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .v7-scene { display: none !important; }
}