body {
  background-color: #ffffff;
  background-image: 
    repeating-linear-gradient(30deg, rgba(51,63,232,0.04) 0, rgba(51,63,232,0.04) 1px, transparent 1px, transparent 30px),
    repeating-linear-gradient(150deg, rgba(51,63,232,0.04) 0, rgba(51,63,232,0.04) 1px, transparent 1px, transparent 30px),
    repeating-linear-gradient(90deg, rgba(51,63,232,0.04) 0, rgba(51,63,232,0.04) 1px, transparent 1px, transparent 30px);
  background-size: 60px 60px;
  background-attachment: fixed;
  overflow-x: hidden;
}

.floating-circles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(51, 63, 232, 0.12) 0%, transparent 70%);
  animation: float 20s ease-in-out infinite;
  will-change: transform;
  mix-blend-mode: screen;
}

.circle:nth-child(1) { width: 240px; height: 240px; top: 5%;   left: 10%;  animation-delay: 0s; }
.circle:nth-child(2) { width: 180px; height: 180px; top: 60%;  left: 15%;  animation-delay: 4s; }
.circle:nth-child(3) { width: 300px; height: 300px; top: 20%;  left: 75%;  animation-delay: 8s; }
.circle:nth-child(4) { width: 120px; height: 120px; top: 80%;  left: 70%;  animation-delay: 12s; }
.circle:nth-child(5) { width: 200px; height: 200px; top: 30%;  left: 35%;  animation-delay: 16s; }
.circle:nth-child(6) { width: 160px; height: 160px; top: 50%;  left: 85%;  animation-delay: 20s; }
.circle:nth-child(7) { width: 220px; height: 220px; top: 70%;  left: 40%;  animation-delay: 24s; }
.circle:nth-child(8) { width: 140px; height: 140px; top: 15%;  left: 55%;  animation-delay: 28s; }

@keyframes float {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  25%  { transform: translate(30px, -40px) scale(1.05) rotate(5deg); }
  50%  { transform: translate(-40px, 30px) scale(1.03) rotate(-3deg); }
  75%  { transform: translate(20px, -20px) scale(1.08) rotate(2deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}


@media (max-width: 768px) {
  .circle {
    display: none; /* モバイルでは軽量化のため非表示 */
  }
}


/*
body {
  background-color: #ffffff;
  background-image: 
    repeating-linear-gradient(30deg, rgba(51,63,232,0.05) 0, rgba(51,63,232,0.05) 1px, transparent 1px, transparent 30px),
    repeating-linear-gradient(150deg, rgba(51,63,232,0.05) 0, rgba(51,63,232,0.05) 1px, transparent 1px, transparent 30px),
    repeating-linear-gradient(90deg, rgba(51,63,232,0.05) 0, rgba(51,63,232,0.05) 1px, transparent 1px, transparent 30px);
  background-size: 60px 60px;
  background-attachment: fixed;
}
*/