/* 公開ページのヒーローに敷く色帯と白い膜。置く面は position: relative と overflow: hidden を持つこと。 */
/* 色帯。細長い楕円を回してぼかし、輪郭を消す */
._ribbon_5xyiw_3 {
  position: absolute;
  z-index: 0;
  inset: -26% -10% -30% 30%;
  pointer-events: none;
}

._band_5xyiw_10 {
  position: absolute;
  border-radius: 50%;
  transform: rotate(-24deg);
  /* 位置だけを 26 秒以上でゆっくり動かす。形は変えない */
  animation: _drift_5xyiw_1 26s ease-in-out infinite alternate;
  will-change: translate;
}

._band_5xyiw_10:nth-child(1) {
  left: 10%;
  top: -8%;
  width: 17%;
  height: 134%;
  filter: blur(44px);
  background: rgba(245, 176, 74, 0.92);
}

._band_5xyiw_10:nth-child(2) {
  left: 30%;
  top: -14%;
  width: 13%;
  height: 140%;
  filter: blur(40px);
  background: rgba(242, 165, 47, 0.8);
  animation-duration: 34s;
  animation-delay: -6s;
}

._band_5xyiw_10:nth-child(3) {
  left: 47%;
  top: -4%;
  width: 15%;
  height: 132%;
  filter: blur(46px);
  background: rgba(0, 91, 211, 0.46);
  animation-duration: 30s;
  animation-delay: -13s;
}

._band_5xyiw_10:nth-child(4) {
  left: 66%;
  top: 4%;
  width: 12%;
  height: 128%;
  filter: blur(50px);
  background: rgba(14, 30, 58, 0.32);
  animation-duration: 38s;
  animation-delay: -3s;
}

@keyframes _drift_5xyiw_1 {
  from {
    translate: 0 0;
    scale: 1;
  }
  to {
    translate: -6% 3%;
    scale: 1.08;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._band_5xyiw_10 {
    animation: none;
  }
}

/* 白へ溶かす膜。帯のぼかしは容器の外へはみ出すので、面の全幅に敷かないと縁が線になる */
._veil_5xyiw_79 {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #fff 40%,
    rgba(255, 255, 255, 0.82) 54%,
    rgba(255, 255, 255, 0) 74%
  );
}

@media (max-width: 720px) {
  /* 帯は縦に流す。面の overflow で切ると横一直線の縁が出るので、上下も白へ溶かす */
  ._ribbon_5xyiw_3 {
    inset: 16% -18% 10% 4%;
  }

  ._band_5xyiw_10 {
    transform: rotate(-22deg);
  }

  ._band_5xyiw_10:nth-child(1) {
    left: 6%;
    width: 26%;
    height: 130%;
    filter: blur(34px);
  }

  ._band_5xyiw_10:nth-child(2) {
    left: 30%;
    width: 20%;
    height: 136%;
    filter: blur(32px);
  }

  ._band_5xyiw_10:nth-child(3) {
    left: 52%;
    width: 22%;
    height: 130%;
    filter: blur(36px);
  }

  ._band_5xyiw_10:nth-child(4) {
    left: 74%;
    width: 18%;
    height: 126%;
    filter: blur(40px);
  }

  ._veil_5xyiw_79 {
    background: linear-gradient(
      #fff 0%,
      #fff 30%,
      rgba(255, 255, 255, 0.8) 46%,
      rgba(255, 255, 255, 0.05) 70%,
      rgba(255, 255, 255, 0.75) 90%,
      #fff 100%
    );
  }
}