@charset "utf-8";
/* CSS Document */

/* ===============================
   Z-indexルール
=============================== */

:root{
  --z-background: 0;
  --z-animation: 1;
  --z-content: 2;
  --z-header: 10;
  --z-nav: 20;
}

/* ===============================
   背景レイヤー
=============================== */

.l-bg{
  overflow: hidden;
}

/* ===============================
   背景動画
=============================== */

.l-bg__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ===============================
   アニメーションレイヤー
=============================== */


.l-bg__animation::before {
    content: "";
    position: absolute;
    inset: 0;
   /* background: rgb(2 5 29 / 50%);*/
    z-index: 1;
    pointer-events: none;
}

/* ===============================
   Canvas
=============================== */

.animation-canvas{
  width: 100%;
  height: 100%;
  display: block;
}

/* ===============================
   コンテンツ層（保険）
=============================== */

.l-section{
  position: relative;
  z-index: var(--z-content);
}

/* ===============================
   reduced motion
=============================== */

@media (prefers-reduced-motion: reduce){
  .l-bg__animation{
    display: none;
  }
}