.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,
    #0a1628 0%, #0d2244 40%, #0a3d6b 70%, #0f5a8a 100%
  );
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 15%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 40% 8%, rgba(255,220,100,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 30%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 12%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 25%, rgba(255,220,100,0.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 92% 8%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 65%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 80%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 72%, rgba(255,220,100,0.6) 0%, transparent 100%),
    radial-gradient(2px 2px at 78% 85%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,0.6) 0%, transparent 100%);
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(ellipse,
    rgba(0,120,220,0.25) 0%,
    rgba(0,200,180,0.12) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(100,200,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,200,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
}

.hero-blocks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hblock {
  position: absolute;
  border-radius: 4px;
  opacity: 0.15;
  animation: heroBlockFloat linear infinite;
}
.hblock-1 { width: 28px; height: 28px; background: #4CAF50; left: 8%;  top: 20%; animation-duration: 8s;  animation-delay: 0s;  }
.hblock-2 { width: 20px; height: 20px; background: #8B6914; left: 14%; top: 55%; animation-duration: 12s; animation-delay: -3s; }
.hblock-3 { width: 36px; height: 36px; background: #64B5F6; left: 82%; top: 18%; animation-duration: 10s; animation-delay: -2s; }
.hblock-4 { width: 24px; height: 24px; background: #FFD54F; left: 88%; top: 62%; animation-duration: 9s;  animation-delay: -5s; }
.hblock-5 { width: 16px; height: 16px; background: #EF9A9A; left: 5%;  top: 75%; animation-duration: 11s; animation-delay: -1s; }
.hblock-6 { width: 32px; height: 32px; background: #80CBC4; left: 92%; top: 40%; animation-duration: 7s;  animation-delay: -4s; }

@keyframes heroBlockFloat {
  0%   { transform: translateY(0px)   rotate(0deg);  opacity: 0.15; }
  25%  { transform: translateY(-16px) rotate(5deg);  opacity: 0.25; }
  50%  { transform: translateY(-8px)  rotate(0deg);  opacity: 0.18; }
  75%  { transform: translateY(-20px) rotate(-5deg); opacity: 0.22; }
  100% { transform: translateY(0px)   rotate(0deg);  opacity: 0.15; }
}

.hero > *:not(.hero-grid):not(.hero-blocks) {
  position: relative;
  z-index: 1;
}

/* ヒーロー内テキストを白系に（白カード・ボタン内は除外） */
.hero > .max-w-6xl h1 {
  color: #ffffff;
}

.hero > .max-w-6xl > div > div > p {
  color: rgba(200, 230, 255, 0.9);
}

.hero-accent {
  color: #00e5b0;
}

/* 導入文内の text-primary / text-secondary span を白に */
.hero > .max-w-6xl > div > div > p > span.text-primary,
.hero > .max-w-6xl > div > div > p > span.text-secondary {
  color: #ffffff;
}

/* お悩みカード見出しをミントグリーンに */
.hero .bg-white > p.font-bold.text-gray-800 {
  color: #00c896;
}

.hero .text-gray-700 { color: #ffffff !important; }