.nf-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg"><defs><style>@keyframes p{0%,100%{opacity:0.8}50%{opacity:1.4}}@keyframes a{0%,100%{r:3;opacity:0.8}50%{r:6;opacity:0.3}}.n{animation:p 2.5s ease-in-out infinite}.na{animation:a 2.5s ease-in-out infinite;fill:none;stroke:%23ffd966}</style></defs><rect width="1200" height="400" fill="url(%23g1)"/><defs><linearGradient id="g1" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%230d5a43"/><stop offset="100%25" style="stop-color:%231D9E75"/></linearGradient></defs><circle class="na" cx="150" cy="80" r="3" stroke="%23ffd966" stroke-width="1"/><circle class="n" cx="150" cy="80" r="3" fill="%23ffd966"/><circle class="na" cx="280" cy="120" r="2.5" stroke="%23ffd966" stroke-width="1"/><circle class="n" cx="280" cy="120" r="2.5" fill="%23ffd966"/><circle class="na" cx="420" cy="90" r="3.5" stroke="%23ffd966" stroke-width="1"/><circle class="n" cx="420" cy="90" r="3.5" fill="%23ffd966"/><circle class="na" cx="560" cy="150" r="2" stroke="%23ffd966" stroke-width="1"/><circle class="n" cx="560" cy="150" r="2" fill="%23ffd966"/><circle class="na" cx="720" cy="110" r="3" stroke="%23ffd966" stroke-width="1"/><circle class="n" cx="720" cy="110" r="3" fill="%23ffd966"/><circle class="na" cx="850" cy="200" r="2.8" stroke="%23ffd966" stroke-width="1"/><circle class="n" cx="850" cy="200" r="2.8" fill="%23ffd966"/><circle class="na" cx="1000" cy="130" r="3.2" stroke="%23ffd966" stroke-width="1"/><circle class="n" cx="1000" cy="130" r="3.2" fill="%23ffd966"/><circle class="na" cx="200" cy="280" r="3" stroke="%23ffd966" stroke-width="1"/><circle class="n" cx="200" cy="280" r="3" fill="%23ffd966"/><circle class="na" cx="500" cy="290" r="3" stroke="%23ffd966" stroke-width="1"/><circle class="n" cx="500" cy="290" r="3" fill="%23ffd966"/><circle class="na" cx="680" cy="310" r="2.5" stroke="%23ffd966" stroke-width="1"/><circle class="n" cx="680" cy="310" r="2.5" fill="%23ffd966"/><line x1="150" y1="80" x2="280" y2="120" stroke="%23e8c547" stroke-width="0.8" opacity="0.3"/><line x1="280" y1="120" x2="420" y2="90" stroke="%23e8c547" stroke-width="0.8" opacity="0.35"/><line x1="420" y1="90" x2="560" y2="150" stroke="%23e8c547" stroke-width="0.8" opacity="0.25"/><line x1="560" y1="150" x2="720" y2="110" stroke="%23e8c547" stroke-width="0.8" opacity="0.28"/><line x1="720" y1="110" x2="850" y2="200" stroke="%23e8c547" stroke-width="0.8" opacity="0.32"/></svg>');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

.nf-hero {
  position: relative;
}

.nf-hero__inner {
  position: relative;
  z-index: 1;
}
.nf-hero::after {
  ...
  z-index: 3 !important;  ← 5から3に変更
  ...
}