/* ===== Eterlens Homepage Hero Banner — Slideshow ===== */
.etl-hero * { margin: 0; padding: 0; box-sizing: border-box; }
.etl-hero {
  width: 100%; position: relative;
  background: linear-gradient(135deg, #e8f4f8 0%, #f5f0e8 100%);
  padding: 72px 5%;
  font-family: 'Noto Sans JP', sans-serif;
  overflow: hidden;
}

/* Slides container */
.etl-hero .eh-slides { position: relative; }
.etl-hero .eh-slide {
  display: none;
  max-width: 1200px; margin: 0 auto;
  flex-wrap: wrap; justify-content: space-between; gap: 40px;
}
.etl-hero .eh-slide:first-child { display: flex; }
.etl-hero .eh-slide.eh-active { display: flex; }
.etl-hero .eh-slide.eh-hide { display: none; }

/* Text column */
.etl-hero .eh-text {
  flex: 1 1 450px;
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
}
.etl-hero .eh-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #f3e7d3 0%, #e8d0a9 100%);
  color: #7a5818; font-size: 13px; font-weight: 700;
  padding: 6px 16px; border-radius: 20px;
  margin-bottom: 24px; letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(201,169,110,0.15);
}
.etl-hero .eh-badge svg {
  width: 15px; height: 15px; stroke: currentColor;
  stroke-width: 2.5; fill: none;
}
.etl-hero .eh-title {
  font-size: 42px; font-weight: 600; line-height: 1.4;
  color: #1a3a4a; margin-bottom: 20px;
  font-family: 'Noto Serif JP', 'Noto Sans JP', serif;
}
.etl-hero .eh-sub {
  font-size: 18px; color: #4b5563;
  margin-bottom: 40px; line-height: 1.9;
}
.etl-hero .eh-btns {
  display: flex; gap: 16px; flex-wrap: wrap;
}
.etl-hero .eh-btn-primary {
  background: #1a3a4a; color: #fff;
  padding: 18px 36px; border-radius: 8px;
  font-size: 17px; font-weight: 600;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.2s;
}
.etl-hero .eh-btn-primary:hover { background: #244d5f; }
.etl-hero .eh-btn-primary svg {
  width: 18px; height: 18px; stroke: currentColor;
  stroke-width: 2; fill: none;
}
.etl-hero .eh-btn-secondary {
  background: transparent;
  border: 2px solid #1a3a4a; color: #1a3a4a;
  padding: 16px 36px; border-radius: 8px;
  font-size: 17px; font-weight: 600;
  text-decoration: none;
  display: inline-flex; align-items: center;
  transition: all 0.2s;
}
.etl-hero .eh-btn-secondary:hover {
  background: #1a3a4a; color: #fff;
}

/* Image column */
.etl-hero .eh-image {
  flex: 1 1 500px; height: 440px;
  border-radius: 20px; overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 48px rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
}
.etl-hero .eh-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Dots */
.etl-hero .eh-dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 28px;
}
.etl-hero .eh-dot {
  width: 10px; height: 10px;
  border-radius: 50%; background: rgba(26,58,74,0.2);
  cursor: pointer; border: none;
  transition: all 0.3s;
}
.etl-hero .eh-dot.eh-active {
  background: #1a3a4a; width: 28px; border-radius: 5px;
}
/* Hide dots if only 1 slide */
.etl-hero .eh-dots-single { display: none; }

/* ========== Mobile ========== */
@media (max-width: 768px) {
  .etl-hero { padding: 24px 5% 20px; }
  .etl-hero .eh-slide {
    flex-direction: column-reverse !important;
    gap: 20px !important;
  }
  .etl-hero .eh-text {
    flex: none; width: 100%;
    align-items: center; text-align: center;
  }
  .etl-hero .eh-image {
    flex: none; width: 100%; height: 200px;
    box-shadow: none; background: transparent;
    border-radius: 12px;
  }
  .etl-hero .eh-title {
    font-size: clamp(16px, 5.5vw, 22px);
    white-space: nowrap;
  }
  .etl-hero .eh-title br.eh-hide-m { display: none; }
  .etl-hero .eh-sub {
    font-size: clamp(12px, 3.6vw, 15px);
    white-space: nowrap;
    margin-bottom: 24px;
  }
  .etl-hero .eh-btns {
    flex-direction: column; align-items: center;
    gap: 10px; width: 100%;
  }
  .etl-hero .eh-btn-primary,
  .etl-hero .eh-btn-secondary {
    width: 88%; max-width: 320px;
    justify-content: center;
    padding: 12px; font-size: 15px;
  }
  .etl-hero .eh-dots { margin-top: 18px; }
}