body, .t-title, .t-text, .t-btn {
  font-family: 'Roboto', 'Noto Sans JP', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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.085) 0%,
    rgba(141, 180, 255, 0.045) 38%,
    transparent 72%
  );

  animation: float 28s ease-in-out infinite;
  will-change: transform;

  /* screenは白背景で消えやすいため削除 */
  mix-blend-mode: normal;
}

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

@keyframes float {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  33% {
    transform: translate3d(24px, -28px, 0) scale(1.04);
  }
  66% {
    transform: translate3d(-28px, 20px, 0) scale(1.02);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 768px) {
  body {
    /* iPhoneなどでfixed背景が重くなるのを防ぐ */
    background-attachment: scroll;
  }

  .circle,
  #neural-canvas {
    display: none !important;
  }
}

/* OSで「視差効果を減らす」が設定されている場合 */
@media (prefers-reduced-motion: reduce) {
  .circle {
    animation: none !important;
  }

  #neural-canvas {
    display: none !important;
  }
}

#neural-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

#recorddiv2839854803 {
  background-color: #F4F7FC !important;
}