@charset "utf-8";

/*--------------------------------
 背景演出 いろいろ
---------------------------------*/

/* 斜めのカラー背景 */
.slant-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 80%; /*--デモのため、高さは調整--*/
    z-index: 0;
    background: #fecf3f;
    transform: skewY(-4deg) translateY(-90px); /*--傾斜を指定 上下を切るかどうかを指定--*/
    transform-origin: top right /*--中心点を指定--*/
  }
  
  .start_slant-bg {
    position: absolute;
    top: 50%;
    bottom: 0;
    right: 0;
    left: 0;
    width: 60%; /*--デモのため、横幅は調整--*/
    margin: 0 auto;
    position: absolute;
    z-index: 1;
    text-align: center;
  }
  
  .circle-bg {
    width: 100%;
    height: 100％;
    background: url(../img/common/bg_circle.png);
    background-repeat: no-repeat;
    background-position:center top; /* 横中央/上部に固定 */
    background-size: 100%; /* 横幅いっぱいに表示 */
    background-attachment: fixed;
  }







/* ////////////////////////////////////
// 色を変えつつ動くアニメーション背景用
//////////////////////////////////// */

:root {
    --dark-color: hsl(var(--hue), 100%, 9%);
    --light-color: hsl(var(--hue), 95%, 98%);
    --base: hsl(var(--hue), 95%, 50%);
    --complimentary1: hsl(var(--hue-complimentary1), 95%, 50%);
    --complimentary2: hsl(var(--hue-complimentary2), 95%, 50%);
  
    --bg-gradient: linear-gradient(
      to bottom,
      hsl(var(--hue), 95%, 99%),
      hsl(var(--hue), 95%, 84%)
    );
  }
  
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  body {
    max-width: 1920px;
    min-height: 100vh;
    color: var(--dark-color);
    background: var(--bg-gradient);
  }
  
  .orb-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
  }