/* ═══════════════════════════════════════════════════
   HERO V2 — 左右分割レイアウト
   左: ソリッドブルーパネル（テキスト）
   右: スライドショー（オーバーレイなし）
   （元 index.html の <head> インライン <style> を分離）
═══════════════════════════════════════════════════ */

.hero2 {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

/* ── 左パネル：空の背景画像 + 青オーバーレイ ── */
.hero2-panel {
  flex: 0 0 48%;
  /* オーバーレイ + 空画像を fixed で重ねる */
  background:
    linear-gradient(185deg,
      rgba(8, 35, 80, 0.78) 0%,
      rgba(15, 60, 130, 0.58) 50%,
      rgba(20, 80, 170, 0.30) 100%
    ),
    url('../img/slide1.png') center top / cover fixed;
  display: flex;
  /*align-items: center;*/
  position: relative;
  z-index: 2;
}

/* 右端の斜めウェッジ：fixed で同じ空画像をシームレスに継続 */
.hero2-panel::after {
  content: '';
  position: absolute;
  right: -56px;
  top: 0;
  width: 80px;
  height: 100%;
  background:
    linear-gradient(155deg,
      rgba(8, 35, 80, 0.78) 0%,
      rgba(15, 60, 130, 0.58) 50%,
      rgba(20, 80, 170, 0.30) 100%
    ),
    url('../img/slide1.png') center top / cover fixed;
  clip-path: polygon(0 0, 40% 0, 100% 100%, 0 100%);
  z-index: 1;
}

.hero2-panel-inner {
  position: relative;
  z-index: 2;
  padding: 5rem 3.5rem 3.5rem 3rem;
  width: 100%;
}

/* eyebrow はそのまま流用 */
.hero2-panel-inner .hero-eyebrow {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.32);
}

.hero2-headline {
  font-size: clamp(1.45rem, 2.8vw, 2.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 0.875rem;
  font-family: 'Noto Sans JP', sans-serif;
}

.hero2-emphasis {
  color: #7EC8F5;
}

.hero2-sub {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: rgba(255,255,255,0.95);
  font-weight: 700;
  margin-bottom: 1rem;
  padding-left: 0.875rem;
  border-left: 3px solid #7EC8F5;
  line-height: 1.5;
}

.hero2-lead {
  font-size: 0.975rem;
  color: rgba(255,255,255,0.86);
  line-height: 1.9;
  margin-bottom: 1.75rem;
}

/* CTA はそのまま流用 */

/* ── バッジ帯 ── */
.hero2-badges {
  display: flex;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.76);
}

.hero2-badge {
  flex: 1;
  text-align: center;
  padding: 0 0.5rem;
}

.hero2-badge + .hero2-badge {
  border-left: 1px solid rgba(255,255,255,0.76);
}

.hero2-badge-num {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 1.75rem;
  font-weight: 900;
  /*color: #7EC8F5;*/
  color:#fff;
  line-height: 1;
  margin-bottom: 0.3rem;
}

.hero2-badge-label {
  display: block;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.03em;
}

.hero2-badge-unit {
  font-size: 1rem;
  font-weight: 700;
}

/* ── 右: 画像エリア ── */
.hero2-visual {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.hero2-slideshow {
  position: absolute;
  inset: 0;
}

.hero2-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.hero2-slide.active {
  opacity: 1;
}

/* スライドインジケーター */
.hero2-indicators {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  gap: 0.45rem;
  z-index: 10;
}

.hero2-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: 1.5px solid rgba(255,255,255,0.6);
  transition: background 0.35s, transform 0.35s;
}

.hero2-dot.active {
  background: #fff;
  transform: scale(1.4);
}

/* ── モバイル ── */
@media (max-width: 900px) {
  .hero2 {
    flex-direction: column;
  }

  .hero2-panel {
    flex: none;
  }

  .hero2-panel::after {
    display: none;
  }

  .hero2-panel-inner {
    padding: 5.5rem 1.5rem 2.5rem;
  }

  .hero2-visual {
    flex: none;
    height: 56vw;
    min-height: 260px;
    max-height: 440px;
  }

  .hero2-indicators {
    bottom: 1rem;
    right: 1rem;
  }

  .hero2-badges {
    gap: 0;
  }

  .hero2-badge-num {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .hero2-visual {
    height: 65vw;
    min-height: 220px;
  }
}