/* 限定正社員 採用サイト 構築 v6 用 CSS（v5.css のあとに読む）。トップの最初の画面を動画にする。
   動画は台帳の自社生成のイメージ写真から作った音なしの飾り（video/hero-video.json）。止め絵（poster と同じ 1 コマ）が先に出て、
   再生が始まったら動画を重ねる。止めるボタンあり。動きを減らす設定・通信を減らす設定では動画を読み込まない。 */
.v6-hero .hero__photo picture img { animation: none; }
.v6-hero .hero__photo img { object-position: 70% 40%; }
.v6-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; opacity: 0; transition: opacity 0.8s ease; }
.v6-hero__video.is-playing { opacity: 1; }
.v6-pause { position: absolute; right: 16px; bottom: 196px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.9); background: rgba(15, 63, 68, 0.72); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.v6-pause:hover { background: rgba(15, 63, 68, 0.9); }
.v6-pause svg { width: 14px; height: 14px; fill: currentColor; }
.v6-pause[hidden] { display: none; }
@media (max-width: 600px) {
  .v6-hero .hero__photo img, .v6-hero__video { object-position: 50% 40%; }
}
/* サイトがスマホの並びになる幅（site.css の 760px 以下）: 本文が横いっぱいになるので、上に 1 段（44px）の余白を足し、
   止めるボタン（右）と注記（左）をその段に並べる。下寄せだと【案】の札や本文と、狭い幅では見出しと重なる */
@media (max-width: 760px) {
  .v6-pause { top: calc(var(--h-header) + 12px); bottom: auto; right: 12px; min-height: 34px; padding: 4px 12px; font-size: 12px; }
  .v3-hero.v6-hero { padding-top: calc(var(--h-header) + 72px); }
  .v6-hero .hero__note { top: calc(var(--h-header) + 19px); bottom: auto; left: 16px; right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .v6-hero__video { display: none !important; }
  .v6-pause { display: none !important; }
}