/* 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: 16 / 9;
  max-height: min(88vh, 860px);
  min-height: min(64vh, 560px);
}

.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: transparent;
  padding: clamp(1.15rem, 2.6vh, 1.9rem) clamp(1.25rem, 4vw, 3rem);
  /* 背景を外したぶん、写真の上でも文字が読めるよう影で可読性を確保 */
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.7);
  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 {
  display: none;
}

.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 は横長のままだと写真が細くなりすぎる。縦長寄りにして「迫力」を保つ。
     ★4/5 にすると 375px でも写真枠に十分な高さを確保でき、字幕帯が写真を覆う割合を抑えられる。 */
  .mod_20_section .slider-viewport {
    aspect-ratio: 4 / 5;
    max-height: min(72vh, 560px);
    min-height: min(58vh, 440px);
  }

  .mod_20_section .main_visual_copy {
    padding: 1.5rem 1.25rem 2.75rem;
  }

  /* design.md No.5: モバイル h1 は固定的に絞る。行間・余白も詰めて窮屈さを軽減 */
  .mod_20_section .hero-title {
    font-size: clamp(1.5rem, 6.5vw, 2rem);
    line-height: 1.3;
    margin-bottom: .5rem;
  }

  .mod_20_section .hero-lead {
    font-size: clamp(0.85rem, 3.4vw, 1rem);
    line-height: 1.6;
  }

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

@media (max-width: 480px) {
  /* さらに小さい画面(iPhone SE等)では見出しサイズをもう一段抑える */
  .mod_20_section .slider-viewport {
    aspect-ratio: 3 / 4;
    max-height: min(68vh, 520px);
  }

  .mod_20_section .hero-title {
    font-size: clamp(1.3rem, 6vw, 1.6rem);
  }
}