/* ============================================================
   body-background-image.css
   円形メニューのページ(index)の背景
   四隅のパーツ(img/bg-*.svg)+ 方眼 + グラデーションを、画面に固定して表示する

   ※ url() の相手先は、このCSSファイルのある場所が基準です。
      img フォルダは、このファイルと同じ階層に置いてください。
   ※ --navbar-h は、ページ側のJavaScriptがナビバーの実際の高さを設定します
      (未設定のときは 60px を使います)。
   ============================================================ */
body {
  --u: max(min(1vw, calc((100vh - var(--navbar-h, 60px)) * 0.0188)), 5.5px);   /* 画面幅と(ナビバーを除いた)高さに合わせた縮尺の基準 */
  background-color: #e6eef7;
  background-image:
    url("img/bg-science-surface.svg"),
    url("img/bg-atom.svg"),
    url("img/bg-economy.svg"),
    url("img/bg-law.svg"),
    url("img/bg-wave.svg"),
    radial-gradient(ellipse at 50% 52%, rgba(255,255,255,.85) 0, rgba(255,255,255,0) 38%),
    repeating-linear-gradient(0deg, rgba(30,58,95,.05) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, rgba(30,58,95,.05) 0 1px, transparent 1px 60px),
    linear-gradient(135deg, #f8fafc 0%, #e6eef7 55%, #cfdcec 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, no-repeat, repeat, repeat, no-repeat;
  background-position:
    left 0 top calc(var(--navbar-h, 60px) + 4px),
    right 0 top calc(var(--navbar-h, 60px) + 4px),
    left 0 bottom 0, right 0 bottom 0, left 0 bottom 0,
    center, 0 0, 0 0, 0 0;
  background-size:
    calc(var(--u) * 27.08) auto, calc(var(--u) * 23.44) auto, calc(var(--u) * 25) auto,
    calc(var(--u) * 22.4) auto, calc(var(--u) * 25) auto,
    auto, auto, auto, auto;
  background-attachment: fixed;
}