/*
 * トップのヒーロー部分だけに、15秒の紹介動画を重ねる（2026年10月4日・案件 #1 ホームページ構成再構築）
 * 終わったら溶けるように消え、下の今のトップが現れる。ナビ（z-index 50）は動画より上に出る。
 */
.hero-intro {
  position: absolute; inset: 0; z-index: 4;
  background: #0E0D14;
  opacity: 1; transition: opacity .9s ease;
}
.hero-intro video {
  width: 100%; height: 100%; display: block;
  /* 画面の大きさにかかわらず、切らずに全体を収める。余白は動画と同じ黒地（2026年10月5日） */
  object-fit: contain; object-position: center;
}
.hero-intro.is-done { opacity: 0; pointer-events: none; }
.hero-intro-skip {
  position: absolute; right: clamp(16px, 4vw, 48px); bottom: clamp(16px, 4vh, 40px);
  padding: 10px 22px; border-radius: 999px;
  border: 1px solid rgba(236, 232, 245, .45); background: rgba(14, 13, 20, .55);
  color: #ECE8F5; font: 600 14px/1 "Hiragino Sans", "Yu Gothic", sans-serif; letter-spacing: .08em;
  cursor: pointer; backdrop-filter: blur(4px);
}
.hero-intro-skip:hover, .hero-intro-skip:focus-visible { background: rgba(110, 91, 230, .85); border-color: transparent; }
/* 動きを減らす設定の人には流さない */
@media (prefers-reduced-motion: reduce) { .hero-intro { display: none; } }