
:root:not([data-kmv-mobile]) {

/*! KMV Hero Player v1 CSS — always-mounted / opacity-switch (黒画面回避) */

/* レイヤ構造 */
.kmv-hero-vid{ position: relative; width: 100%; height: 100%; }
.kmv-hero-stage{ position: absolute; inset: 0; background:#000; border-radius: inherit; overflow: hidden; }

/* 常時 mount（display:none は使わない） */
.kmv-hero-media{ position:absolute; inset:0; display:block; opacity:0; visibility:hidden; transition:opacity .25s ease; }
.kmv-hero-media.active{ opacity:1; visibility:visible; }

/* 子要素を全面フィット */
.kmv-hero-media > *{ position:absolute; inset:0; width:100%; height:100%; }
.kmv-hero-media video{ display:block; width:100%; height:100%; object-fit:cover; }

/* ドット＆オーディオ */
.kmv-hero-dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:14px; display:flex; gap:10px; z-index:3; }
.kmv-hero-dot{ width:10px; height:10px; border-radius:50%; background:#fff9; border:0; opacity:.55; cursor:pointer; }
.kmv-hero-dot[aria-selected="true"]{ opacity:1; background:#fff; }

.kmv-hero-audio{
  position:absolute; right:10px; bottom:10px; z-index:3;
  padding:6px 10px; border:0; border-radius:999px;
  background:rgba(0,0,0,.4); color:#fff; font-weight:700; line-height:1;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor:pointer;
}
.kmv-hero-audio:focus-visible{ outline:2px solid #7cc4ff; outline-offset:2px; }

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .kmv-hero-media{ transition:none; }
}
/* --- YouTube レイヤの最前面固定＆可視強制（スロット2が黒い対策） --- */
#kmvHeroVideo .kmv-hero-media { position:absolute; inset:0; display:block !important; }
#kmvHeroVideo .kmv-hero-media.active {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 3 !important;
}
#kmvHeroVideo .kmv-hero-media:not(.active) {
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 1 !important;
}
#kmvHeroVideo iframe,
#kmvHeroVideo video {
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  opacity:1 !important;
  visibility:visible !important;
}
/* 万一の親の目隠し（透明/背面化）対策。 */
#kmvHeroVideo, #kmvHeroVideo * {
  backface-visibility: visible !important;
  transform-style: flat !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}
/* === Hero overlay fix: put video above bg/overlay === */
#heroSlot { position: relative; z-index: 3 !important; }

#kmvHeroVideo { position: relative; z-index: 2147483643 !important; }
#kmvHeroVideo .kmv-hero-stage { position: absolute; inset: 0; z-index: 2147483644 !important; }
#kmvHeroVideo .kmv-hero-media.active { z-index: 2147483645 !important; }
#kmvHeroVideo .kmv-hero-media:not(.active) { z-index: 1 !important; }

/* 背景オーバーレイは常に動画の下へ＆クリック無効化 */
.kmv-hero-bg { z-index: 0 !important; pointer-events: none !important; }

/* 念のため video/iframe を可視・全面フィットで固定 */
#kmvHeroVideo video,
#kmvHeroVideo iframe {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  opacity: 1 !important;
  visibility: visible !important;
}
/* === Hero overlay fix: put video above bg/overlay === */
#heroSlot { position: relative; z-index: 3 !important; }

#kmvHeroVideo { position: relative; z-index: 2147483643 !important; }
#kmvHeroVideo .kmv-hero-stage { position:absolute; inset:0; z-index: 2147483644 !important; }
#kmvHeroVideo .kmv-hero-media.active { z-index: 2147483645 !important; }
#kmvHeroVideo .kmv-hero-media:not(.active) { z-index: 1 !important; }

.kmv-hero-bg { z-index: 0 !important; pointer-events: none !important; }

#kmvHeroVideo video,
#kmvHeroVideo iframe {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  opacity: 1 !important;
  visibility: visible !important;
}

/* === UIを動画レイヤの上へ（安全最小修正） === */
#kmvHeroVideo .kmv-hero-dots,
#kmvHeroVideo .kmv-hero-audio{
  z-index: 2147483650 !important; /* ← 動画(active: 2147483645)より上 */
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
}