/* ========== Hero (fade / full-bleed / image-link) ========== */
.heroMain{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  color: var(--c-fg-inverse);
}

/* スライド（重ね置きフェード） */
.heroMain__slides{
  position: relative;
  width: 100%;
  height: clamp(440px, 70vh, 720px);
  overflow: hidden;
}
.heroMain__slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur, 300ms) var(--ease, cubic-bezier(.25,.8,.25,1));
}
.heroMain__slide.is-active{ opacity: 1; z-index: 1; }

/* 画像/テキスト層 */
.heroMain__link{ position: absolute; inset: 0; display: block; }
.heroMain__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.heroMain__overlay{
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg,
    rgba(0,0,0,.65) 0%,
    rgba(0,0,0,.30) 35%,
    rgba(0,0,0,.15) 55%,
    rgba(0,0,0,0) 100%
  );
}

/* テキスト */
.heroMain__content{
  position: absolute;
  left: 10%;
  bottom: 14%;
  max-width: 420px;
  color: var(--c-fg-inverse);
}
.heroMain__label{
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--fs-2xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  background-color: rgba(255,255,255,.14);
  backdrop-filter: blur(4px);
}
.heroMain__title{
  margin: 0 0 var(--space-4);
  font-size: clamp(24px, 3vw, var(--fs-2xl));
  line-height: 1.4;
  font-weight: var(--fw-regular);
}
.heroMain__lead{
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-loose);
  color: rgba(255,255,255,.9);
}

/* ===== 画像の外・下：コントロール行（ドットのみ） ===== */
.heroMain__controls{
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  max-width: var(--container-max, 1200px);
  margin: var(--space-8) auto 0;
  padding: var(--space-2) 0;
  pointer-events: none; /* 行全体はヒット不可（子のみ許可） */
}
.heroMain__dots{ display: flex; align-items: center; gap: var(--space-4); }
.heroMain__dot{
  pointer-events: auto;
  width: 8px; height: 8px; border: 0; border-radius: var(--radius-full);
  cursor: pointer; outline: none; background: #ddd;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.heroMain__dot:hover{ transform: scale(1.05); }
.heroMain__dot.is-active{
  background: #cfe7d8;
  box-shadow: 0 0 0 6px #fff, 0 0 0 7px rgba(0,0,0,.08);
}

/* ===== PC: 見出し1行固定／コピーは下段 ===== */
@media (min-width: 960px){
  .heroMain__content{ max-width: 68vw; }
  .heroMain__title{
    white-space: nowrap; display: block;
    line-height: 1.25; letter-spacing: .01em;
  }
  .heroMain__lead{
    display: block; white-space: normal;
    margin-top: var(--space-2);
    max-width: 46vw;
    font-size: var(--fs-15);
  }
}

/* ===== Tablet & Mobile（label / title / text を必ず縦並び） ===== */
@media (max-width: 959px){
  .heroMain__slides{ height: clamp(260px, 55vh, 420px); }
  .heroMain__content{ left: 8%; right: 8%; bottom: 12%; max-width: none; }

  /* ★ 確実に“改行（縦並び）”にする */
  .heroMain__label{
    display: block;          /* 行ボックス化 */
    width: fit-content;      /* バッジの幅は内容ぶんだけ */
    margin: 0 0 var(--space-2);
  }
  .heroMain__title{
    display: block;
    margin: 0 0 var(--space-2);
    white-space: normal;     /* 折り返し許可 */
    line-height: 1.45;
  }
  .heroMain__lead{
    display: block;
    margin: 0;               /* 直下に続ける */
    white-space: normal;
    font-size: var(--fs-sm); /* 13px 相当 */
    line-height: 1.9;
    text-wrap: balance;      /* 長い和文の折り返し最適化（対応ブラウザで有効） */
  }

  .heroMain__controls{ gap: var(--space-3); }
  .heroMain__dots{ gap: var(--space-3); }
}

@media (max-width: 480px){
  .heroMain__content{ bottom: 10%; }
  .heroMain__title{ font-size: var(--fs-xl); }
  .heroMain__lead{ font-size: var(--fs-xs); line-height: 1.85; }
}

/* 簡易モーションを尊重 */
@media (prefers-reduced-motion: reduce){
  .heroMain__slide{ transition: none; }
}

/* 見出しの太さ（全端末で細め） */
.heroMain__title{ font-weight: var(--fw-regular); }