/* 全体ラッパー */
main {background-color: #fff;}

.hero-slider {
  position: relative;
  height: 70vh;
  /*min-height: 520px;*/
  overflow: hidden;
  background: radial-gradient(circle at top, #0b1220 0%, #020617 40%, #000 75%);
  color: #0ff;
}

/* 背景のうっすらグリッド */
.hero-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.85) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.85) 1px, transparent 1px);
  background-size: 40px 40px;
  mix-blend-mode: soft-light;
  opacity: 0.4;
  pointer-events: none;
}

.hero-slider::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from 120deg,
    rgba(59, 130, 246, 0.1),
    rgba(14, 165, 233, 0.35),
    rgba(56, 189, 248, 0.25),
    rgba(8, 47, 73, 0.1),
    transparent
  );
  filter: blur(60px);
  opacity: 0.8;
  pointer-events: none;
}

.slides {
  position: relative;
  height: 100%;
}

/* 各スライド */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity 0.9s ease,
    transform 1.6s ease;
  display: flex;
  align-items: stretch;
  justify-content: center;
  pointer-events: none;
}

.slide.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* 背景メディア（img / video 共通） */
.slide-bg {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.slide-bg img,
.slide-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9) contrast(1.1);
  transform: scale(1.04);
  transition: transform 3s ease, filter 1s ease;
}

.slide.active .slide-bg img,
.slide.active .slide-bg video {
  transform: scale(1.02);
}

/* 下からの暗いグラデーション */
.slide-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 40%);
}

/* --------------------led dots ----------*/
/* LEDのドットオーバーレイ（ドットくっきり版） */
.slide-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  /* 大きめドット + うっすら外側の光 */
  background-image:
    radial-gradient(circle,
      rgba(255, 255, 255, 0.8) 0,
      rgba(255, 255, 255, 0.8) 4px,
      transparent 2px),
    radial-gradient(circle,
      rgba(56, 189, 248, 0.5) 0,
      rgba(56, 189, 248, 0.0) 4px);
  background-size: 13px 13px;
  background-position: 0 0, 13px 13px;

  /* 少しだけ青くフィルム感 */
  background-color: rgba(8, 47, 73, 0.25);

  mix-blend-mode: screen;
  opacity: 0.6;

  animation: ledDotsDrift 10s linear infinite;
}

/* ドットをゆっくり流すアニメーション */
@keyframes ledDotsDrift {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 30px 24px;
  }
  100% {
    background-position: 0 0;
  }
}
/*^^^^^^^^^^^^^^^^^^^^^ led dots end ^^^^^^^^^^^^^^^^^^^^^*/

/* テキストオーバーレイ */
.led-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: clamp(24px, 5vw, 48px) clamp(20px, 8vw, 80px);
  z-index: 5;
}

.led-heading {
  font-size: clamp(26px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e0faff;
  text-shadow:
    0 0 4px #22d3ee,
    0 0 12px #06b6d4,
    0 0 28px #0ea5e9;
  margin: 0 0 12px;
  position: relative;
}

.led-heading::before {
  content: "";
  position: absolute;
  left: -3.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6ee7b7, #22d3ee);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.8);
}

.led-caption {
  max-width: 520px;
  font-size: clamp(1.3rem, 1.1vw, 1.6rem);
  line-height: 1.9;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(15, 23, 42, 1);
  margin: 0;
  z-index:9
}

/* 既存の led-text クラスも残す（互換用） */
.led-text {
  font-weight: 700;
}

/* ナビ矢印 */
.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color: #67e8f9;
  cursor: pointer;
  padding: 18px 14px;
  text-shadow:
    0 0 6px #22d3ee,
    0 0 16px #0ea5e9;
  transition: 0.25s ease;
  user-select: none;
  z-index: 5;
}

.nav::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0));
  opacity: 0;
  transition: opacity 0.25s ease;
}

.nav:hover {
  color: #e0f2fe;
  text-shadow:
    0 0 10px #7dd3fc,
    0 0 20px #0ea5e9;
}

.nav:hover::before {
  opacity: 1;
}

.prev { left: 18px; }
.next { right: 18px; }

/* ページネーション（ドット） */
.led-pagination {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 6;
}

.led-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.9), transparent);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.7);
  cursor: pointer;
  transition: 0.25s ease;
}

.led-dot.active {
  background: radial-gradient(circle at center, #22d3ee, #0ea5e9);
  box-shadow:
    0 0 8px rgba(34, 211, 238, 0.9),
    0 0 18px rgba(14, 165, 233, 0.9);
  border-color: transparent;
}

/* SP 調整 */
@media (max-width: 768px) {
  .hero-slider {
    height: 82vh;
    min-height: 460px;
  }

  .led-overlay {
    justify-content: flex-end;
    align-items: flex-start;
    padding: 24px 18px 28px;
  }

  .led-heading {
    letter-spacing: 0.16em;
  }

  .led-heading::before {
    display: none;
  }

  .led-caption {
    max-width: 100%;
  }

  .nav {
    font-size: 2.4rem;
    padding: 12px 10px;
  }
}