/* Mirai / ① 光の循環 */
/* 既存サイトのCSSより後ろに読み込む。 */
/* 2026-09-14：タブレットは列が画面いっぱいになるため、背景を出すのはPC（1024px以上）だけにした */
@media screen and (min-width: 1024px) {
  body.mirai-light-cycle-enabled {
    /* WebGL が使えない時の静止背景。光の循環と同じく、白をばらけさせ、青はロゴに寄せて明るく・ゆるやかに（2026-09-17） */
    background:
      radial-gradient(ellipse at 50% 12%, rgba(255, 255, 255, .62), transparent 60%),
      radial-gradient(ellipse at 45% 88%, rgba(255, 255, 255, .5), transparent 62%),
      radial-gradient(ellipse at 78% 92%, rgba(255, 255, 255, .45), transparent 58%),
      linear-gradient(140deg, #EEF9FC 0%, #DDF1F8 55%, #E0F4F7 100%);
    background-attachment: fixed;
  }

  /* 確認時のサイトで使われている、背景の丸い装飾だけを無効化。 */
  body.mirai-light-cycle-enabled::before,
  body.mirai-light-cycle-enabled::after {
    display: none;
  }
}

#mirai-light-cycle-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0;
}

#mirai-light-cycle-canvas[data-ready="true"] {
  opacity: 1;
}

/* .deviceのposition:relative / z-index:1、
   .brandmarkと.sidenavのz-index:30は、既存の指定を維持する。 */

@media screen and (max-width: 1023px) {
  #mirai-light-cycle-canvas {
    display: none;
  }
}

@media print {
  #mirai-light-cycle-canvas {
    display: none;
  }
}