/* mv-slide-wide — メインビジュアル: 全幅写真スライド
 * 出典: 社内モジュール main/_mod_20 を機械変換したもの。
 *
 * ★この部品の定義は「画面幅いっぱいの写真を切り替える。**写真の迫力**で見せる」(README)。
 *   受領時は ①コピーが写真の【下】にあり ②PC の高さが 580px 固定 ③SP は旧テーマの
 *   縦横比ハック(padding-top:129%)が flex コンテナに残って写真の上に 484px の空白ができ、
 *   セクションが 187vh になっていた。構図を定義どおりに戻し、高さをトークン化した。
 * ★受領時は .hero-title / .hero-lead が var(--color-on-primary) を使っていたが、
 *   この部品には「ブランド色でベタ塗りした面」が無い。濃色/高彩度テーマでは #ffffff になり、
 *   白背景に白文字(コントラスト 1.00)で消えていた。写真の上に重ねる構図に直して白文字にした。
 * ★01番(mv-slide-basic)との差別化: 01 は「第一画面を埋める全面スライド + 左下グラデーション」。
 *   02 は「横長のワイドバンド + 下端の【矩形の】字幕帯 + 数字カウンタ」。
 *   グラデーション(境界が溶ける)と矩形(境界が立つ)が最大の見分け。
 * ★セレクタはすべて .mod_20_section 配下に閉じている(.hero-title / .slider-* は
 *   参考型どうしで名前が衝突するため)。!important は使わない。 */

.mod_20_section.main_visual {
  position: relative;
  overflow: hidden;
}

.mod_20_section .slider { position: relative; }

/* ワイドバンド。実測で 21/9 + 上限 min(70vh,700px) を選定
   （最大 70vh で 01番の 78vh より明確に低く「帯」に見える。写真の捨て率も最小級の 33%）。
   狭い側で帯が薄くなりすぎないよう下限も置く。 */
.mod_20_section .slider-viewport {
  position: relative;
  overflow: hidden;
  /* ★width を明示しないと、min-height が効く幅で【アスペクト比から幅が逆算されて】
     器を突き抜ける（実測: 769px の画面で枠が 1008px になっていた）。
     横スクロールは html の overflow-x:hidden に隠れて検査をすり抜けるので、必ず幅を固定する。 */
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: min(70vh, 700px);
  /* ★下限は「字幕帯が写真枠を覆いすぎない」ことで決まる。
     min(46vh,380px) だと 769px で枠 368px に対し帯が 177px（48%）を覆った。
     min(54vh,440px) にすると 41% に収まり、写真の捨て率もむしろ下がる（21% → 3%）。 */
  min-height: min(54vh, 440px);
}

.mod_20_section .slider-track {
  display: flex;
  height: 100%;
  transition: transform .45s ease;
  will-change: transform;
}

/* 1スライド = ビューポート全幅。受領時は画像の自然幅 1408px で固定され、
   375px では 375%(写真の左27%しか見えない)、1920px では 73%(隣が見切れる)だった。 */
.mod_20_section .slider-slide {
  flex: none;
  width: 100%;
  height: 100%;
}

.mod_20_section .slider-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── 字幕帯: 写真の下端に重なる【矩形】の面 ──
 * 01番のグラデーションと違い、境界を直線で見せる（＝この部品の意匠の主役）。
 * ★濃さは実測で決めた。帯領域の【平均】輝度から出した 0.66 では、
 *   リードが実際に乗る細い帯（局所的に明るい）で 3.25:1 まで落ちた。
 *   R-7 の「半透明の帯は不透明度 80% 以上」に合わせて 0.80 にすると、
 *   同梱4枚すべてで 見出し 6.6:1 / リード 4.9:1 を確保できる。
 *   写真の上に敷く黒スクリムの生値は R-1 の明示的な例外。 */
.mod_20_section .main_visual_copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0, 0, 0, .80);
  padding: clamp(1.15rem, 2.6vh, 1.9rem) clamp(1.25rem, 4vw, 3rem);
  /* 写真の上に乗る文字なので生値可(R-1 の明示的な例外) */
  color: #fff;
  text-align: center;
}

.mod_20_section .hero-title {
  font-family: var(--font-heading);
  /* ★--fs-hero-md(40〜48px)。R-4 の表で「MVキャッチ 29字以上」の段。
     この部品はキャッチ長を選べない(8字も30字も来る)ので最長ケースに合わせる。 */
  font-size: var(--fs-hero-md);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: #fff;
  max-width: min(1000px, 100%);
  margin: 0 auto .4rem;
  text-wrap: balance;
}

.mod_20_section .hero-lead {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: rgba(255, 255, 255, .9);
  max-width: min(720px, 100%);
  margin: 0 auto;
}

/* ── 進行インジケータ: 数字カウンタ ──
 * 受領時は .slider-dots が opacity:0 で、4枚あるのに指標が見えなかった。
 * 01番は「線」なので、こちらは「数字」で分ける（大胆・グラフィカルなトーンにも合う）。
 * slider.js が .slider-dot を生成するだけなので、CSS counter で連番を出せる（DOM 追加なし）。 */
.mod_20_section .slider-dots {
  position: absolute;
  z-index: 3;
  right: clamp(1.25rem, 4vw, 3rem);
  bottom: clamp(1.15rem, 2.6vh, 1.9rem);
  display: flex;
  gap: .55rem;
  align-items: baseline;
  counter-reset: mv-slide-wide-dot;
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, .5);
}

.mod_20_section .slider-dot {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  counter-increment: mv-slide-wide-dot;
  transition: color .3s ease;
}

.mod_20_section .slider-dot::before {
  content: counter(mv-slide-wide-dot, decimal-leading-zero);
}

.mod_20_section .slider-dot.is-active { color: #fff; }

.mod_20_section .slider-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ── 前後ボタン: 受領時のまま(テーマ追従)。位置だけ器に合わせる ── */
.mod_20_section .slider-prev,
.mod_20_section .slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: color-mix(in srgb, var(--color-bg) 80%, transparent);
  color: var(--color-text);
  z-index: 3;
}

.mod_20_section .slider-prev { left: clamp(.5rem, 1.5vw, 1.25rem); }
.mod_20_section .slider-next { right: clamp(.5rem, 1.5vw, 1.25rem); }

.mod_20_section .slider-prev::before,
.mod_20_section .slider-next::before {
  content: "";
  display: block;
  width: .6rem;
  height: .6rem;
  margin: 0 auto;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.mod_20_section .slider-prev::before { transform: rotate(-135deg); }
.mod_20_section .slider-next::before { transform: rotate(45deg); }

.mod_20_section .slider-prev:focus-visible,
.mod_20_section .slider-next:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* slider.js は reduce のとき自動再生しない。送りのアニメーションもここで止める。 */
@media (prefers-reduced-motion: reduce) {
  .mod_20_section .slider-track { transition: none; }
  .mod_20_section .slider-dot { transition: none; }
}

/* ── モバイル（受領時は 767px と 768px が混在。規約の 768px に統一） ── */
@media (max-width: 768px) {
  /* SP は横長のままだと写真が細くなりすぎる。縦長寄りにして「迫力」を保つ。
     受領時の縦横比ハック(129% ≒ 1:1.29 の縦長)も、意図としては同じ方向だった。
     ★4/3 だと 375px で写真枠が 281px しかなく、字幕帯(約134px)が枠の 48% を覆ってしまう。
       1/1 なら 375px で帯は 36% に収まり、写真の捨て率も 45%（4/5 の 56% より小さい）。 */
  .mod_20_section .slider-viewport {
    aspect-ratio: 1 / 1;
    max-height: min(60vh, 460px);
    min-height: 0;
  }

  .mod_20_section .main_visual_copy {
    padding: 1.1rem 1.25rem;
  }

  /* design.md No.5: モバイル h1 は固定的に絞る */
  .mod_20_section .hero-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    margin-bottom: .35rem;
  }

  .mod_20_section .hero-lead { font-size: var(--fs-body); }

  /* ★SP は帯の幅が狭く、中央寄せのリードが右端まで届くのでカウンタと重なる（実測）。
     右下ではなく「帯の下端中央」に置き、帯側に下 padding を確保して行を分ける。 */
  .mod_20_section .main_visual_copy {
    padding-bottom: 2.5rem;
  }

  .mod_20_section .slider-dots {
    left: 0;
    right: 0;
    bottom: .85rem;
    justify-content: center;
  }

  /* 前後ボタンは SP で隠す。写真に重なるうえ、スワイプ(slider.js が対応)で送れる。 */
  .mod_20_section .slider-prev,
  .mod_20_section .slider-next { display: none; }
}