/* 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.mod_20_static .mv-static-img-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: min(70vh, 700px);
  min-height: min(54vh, 440px);
}

.mod_20_section.mod_20_static .mv-static-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-height: none;
}

/* ── 字幕帯: 写真の下端に重なる【矩形】の面 ──
 * 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;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(28, 24, 20, .52);
  padding: clamp(1.5rem, 3.2vh, 2.4rem) clamp(1.25rem, 4vw, 3rem);
  color: #fff;
  text-align: center;
  letter-spacing: 0.01em;
}

.mod_20_section .hero-title {
  font-family: var(--font-heading);
  font-size: var(--fs-hero-md);
  line-height: 1.35;
  letter-spacing: 0.06em;
  font-weight: 400; /* 細めのウェイトで上品に */
  color: #f5f0eb;   /* 純白より少し温かみのあるオフホワイト */
  max-width: min(1000px, 100%);
  margin: 0 auto .65rem;
  text-wrap: balance;
}

.mod_20_section .hero-lead {
  font-size: var(--fs-body);
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: rgba(240, 232, 220, .80); /* 温かみのある薄いクリーム色 */
  max-width: min(640px, 100%);
  margin: 0 auto;
}

/* スライダー操作UIは静止画モードでは不要 */
.mod_20_section.mod_20_static .slider-dots,
.mod_20_section.mod_20_static .slider-prev,
.mod_20_section.mod_20_static .slider-next { display: none; }

/* ── モバイル（受領時は 767px と 768px が混在。規約の 768px に統一） ── */
@media (max-width: 768px) {
  .mod_20_section.mod_20_static .mv-static-img-wrap {
    height: min(60vh, 460px);
    min-height: 200px;
  }

  .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; }
}