@charset "utf-8";

/* ---------------------------------------------
トップページ背景アニメーション
--------------------------------------------- */
.floating-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1200px;
  overflow-x: hidden;
  overflow-y: visible;
  pointer-events: none;
  z-index: -1;
  background: url('../images/nobeoka.svg') no-repeat calc(50% + 360px) 360px;
}

.floating-dots .dot {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  --float-offset: 80px;
  animation-name: dot-move-pc;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* サイズ */
.floating-dots .ring-180,
.floating-dots .fill-180 {
  width: 180px;
  height: 180px;
}

.floating-dots .ring-260,
.floating-dots .fill-260 {
  width: 260px;
  height: 260px;
}

.floating-dots .ring-360,
.floating-dots .fill-360 {
  width: 360px;
  height: 360px;
}

/* カラー */
.floating-dots .ring-180,
.floating-dots .ring-260,
.floating-dots .ring-360 {
  border: 1px solid #0F91FF;
  background: transparent;
}

.floating-dots .fill-180,
.floating-dots .fill-260,
.floating-dots .fill-360 {
  background: color-mix(in srgb, #0F91FF 10%, transparent);
}

/* 位置・速度・幅 */

/* 180px（上部） */
.floating-dots .dot:nth-child(1)  {
  top: 40px;
  animation-duration: 22s;
  animation-delay: -4s;
  --float-offset: 70px;
}
.floating-dots .dot:nth-child(2)  {
  top: 170px;
  animation-duration: 30s;
  animation-delay: -10s;
  --float-offset: 90px;
}

/* fill 180px */
.floating-dots .dot:nth-child(3)  {
  top: 110px;
  animation-duration: 26s;
  animation-delay: -16s;
  --float-offset: 80px;
}
.floating-dots .dot:nth-child(4)  {
  top: 240px;
  animation-duration: 34s;
  animation-delay: -7s;
  --float-offset: 100px;
}

/* 260px（中央） */
.floating-dots .dot:nth-child(5)  {
  top: 270px;
  animation-duration: 38s;
  animation-delay: -3s;
  --float-offset: 95px;
}
.floating-dots .dot:nth-child(6)  {
  top: 390px;
  animation-duration: 45s;
  animation-delay: -18s;
  --float-offset: 110px;
}

/* fill 260px */
.floating-dots .dot:nth-child(7)  {
  top: 330px;
  animation-duration: 32s;
  animation-delay: -20s;
  --float-offset: 105px;
}
.floating-dots .dot:nth-child(8)  {
  top: 460px;
  animation-duration: 50s;
  animation-delay: -12s;
  --float-offset: 120px;
}

/* 360px（下部） */
.floating-dots .dot:nth-child(9)  {
  top: 480px;
  animation-duration: 40s;
  animation-delay: -20s;
  --float-offset: 120px;
}
.floating-dots .dot:nth-child(10) {
  top: 580px;
  animation-duration: 55s;
  animation-delay: -15s;
  --float-offset: 130px;
}

/* fill 360px */
.floating-dots .dot:nth-child(11) {
  top: 530px;
  animation-duration: 48s;
  animation-delay: -25s;
  --float-offset: 135px;
}
.floating-dots .dot:nth-child(12) {
  top: 680px;
  animation-duration: 60s;
  animation-delay: -30s;
  --float-offset: 140px;
}

/* アニメーション */
@keyframes dot-move-pc {
  0% {
    transform: translate(-60vw, 0);
  }
  25% {
    transform: translate(-30vw, calc(var(--float-offset) * -1));
  }
  50% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(30vw, var(--float-offset));
  }
  100% {
    transform: translate(60vw, 0);
  }
}

/* ---------------------------------------------
レスポンシブ
--------------------------------------------- */
@media (max-width: 800px) {
  .floating-dots {
    height: 600px;
    background: none;
  }

  .floating-dots .ring-180,
  .floating-dots .fill-180 {
    width: 80px;
    height: 80px;
  }

  .floating-dots .ring-260,
  .floating-dots .fill-260 {
    width: 120px;
    height: 120px;
  }

  .floating-dots .ring-360,
  .floating-dots .fill-360 {
    width: 160px;
    height: 160px;
  }

  .floating-dots .dot {
    --float-offset: 25px;
    animation-name: dot-move-sp;
  }

  .floating-dots .dot:nth-child(1)  { top: 10px; }
  .floating-dots .dot:nth-child(2)  { top: 70px; }
  .floating-dots .dot:nth-child(3)  { top: 40px; }
  .floating-dots .dot:nth-child(4)  { top: 110px; }
  .floating-dots .dot:nth-child(5)  { top: 120px; }
  .floating-dots .dot:nth-child(6)  { top: 190px; }
  .floating-dots .dot:nth-child(7)  { top: 160px; }
  .floating-dots .dot:nth-child(8)  { top: 230px; }
  .floating-dots .dot:nth-child(9)  { top: 190px; }
  .floating-dots .dot:nth-child(10) { top: 260px; }
  .floating-dots .dot:nth-child(11) { top: 230px; }
  .floating-dots .dot:nth-child(12) { top: 310px; }

  @keyframes dot-move-sp {
    0%   { transform: translate(-40vw, 0); }
    50%  { transform: translate(0vw, var(--float-offset)); }
    100% { transform: translate(40vw, 0); }
  }
}