/* mv-fade — メインビジュアル: フェード切替
 * 出典: 社内モジュール main/_mod_21(旧WPテーマ)を機械変換したもの。
 *
 * ★この部品の定義は「写真をゆっくり重ねながら切り替える。静かで上質な印象」(README)。
 *   受領時は次の3点で、その定義がまったく成立していなかった(いずれも実測):
 *     1) data-variant="fade" が無く、実際は横送り(slide)で動いていた
 *     2) スライド幅が画像の自然幅 1280px 固定だったため、1440px 以上で slider.js の
 *        maxIndex() が 0 に落ち、ドット1個・自動送りゼロで【写真が1枚しか出ない】状態
 *     3) コピーが写真の【下】に置かれ、「写真に重ねる」構図になっていなかった
 * ★受領時は .hero-title / .hero-lead に var(--color-on-primary) を当てていたが、
 *   この部品には「ブランド色でベタ塗りした面」が存在しない。濃色/高彩度テーマでは
 *   --color-on-primary が #ffffff になり、白背景に白文字(コントラスト 1.00)で
 *   見出しもリードも完全に消えていた(24パターン中12件)。
 * ★可読性はスクリムではなく【不透明の題箋プレート】で取っている。
 *   同梱 mod-21-1.webp は左下の相対輝度が 0.602 で、白文字 4.5:1 には黒スクリム α≧0.70 が必要。
 *   それでは写真が沈み「静かで上質」という部品の性格が壊れるため、面で取り直した。
 *   結果、可読性が【写真の明るさから独立】する(01/02 が原理的にできないこと)。
 * ★セレクタはすべて .mod_21_section 配下に閉じている。
 *   .hero-title / .hero-lead は参考型9本と common.css が、.slider-* は6本が同じ名前を使うため、
 *   無スコープだと同一ページに2本載ったときに互いを壊す。
 * ★slider.js は改変不可。契約クラス(.slider[data-slider] / -viewport / -track / -slide /
 *   -dots / -prev / -next)はすべて維持している。
 *   ★fade にするからといってスライドを CSS で重ねてはいけない。maxIndex() は
 *     トラック内の実位置で送り先を決めるので、全スライドを同じ位置に重ねると
 *     trackWidth() − vpWidth() = 0 になり、上の 2) と同じ理由で送りが死ぬ。
 *     → スライドは横並びのまま(width:100%)で位置を保ち、重ねるのは中の img を
 *       .slider-viewport に対して絶対配置することで行う。 */

/* ── 器: 地の面で写真を額装する(マット) ──
 * 地は色相を持ち込まず明度だけ一段落とす。ブランド色を薄める方式は
 * 淡色案件で消え、高彩度案件で立ちすぎるため採らない。
 * --mv-edge: 外側の器を 1200px で頭打ちにして、余りをマットに回す。
 * ★これが無いと 1920px で枠が 1797px まで広がり、max-height に当たった後の
 *   実効比率が 3.1:1 まで伸びて写真の上下を 54% 捨てる(実測)。1200px 頭打ちで 20% まで下がる。
 * ★マットの太さは 6案をレンダリングして選定した。3.5rem/1440頭打ち では
 *   「余白を取り損ねた写真」にしか見えず、額装として読めなかった(⑤-2)。 */
.mod_21_section.main_visual {
  /* ★ユーザー確定(このバージョン): 額装(マット)を廃止し、写真をセクション全幅・縁なしで表示する。
     --mv-edge/--mv-mat は 0 にして枠を消すが、題箋プレートの位置基準として変数自体は残す。 */
  --mv-mat: 0px;
  --mv-edge: 0px;
  --mv-off: clamp(.9rem, 2.2vw, 2.5rem);
  --mv-pad: clamp(1.1rem, 2vw, 1.9rem);
  --mv-ink: var(--color-heading-ink, color-mix(in srgb, var(--color-text) 78%, #000));

  position: relative;
  padding: 0;
  background: none;
}
/* ヘッダーをメインビジュアルの写真に重ねて透過させる (TOPページ限定)。
   ヘッダーの実高さぶん写真を上へ食い込ませ、見た目の写真の大きさは変えない。 */
.mv-single--under-header {
  margin-top: -69px;
}
.mv-single--under-header .mv-single-media {
  padding-top: 69px;
  box-sizing: border-box;
}
@media (max-width: 1200px) {
  .mv-single--under-header { margin-top: -68px; }
  .mv-single--under-header .mv-single-media { padding-top: 68px; }
}

/* ── 1枚構成: 写真枠 ──
 * スライダーを廃し、単一の大きな写真を敷く。
 * width:100% を明示するのは、aspect-ratio と min-height が競合したときに
 * 比率から幅が逆算されて器を突き抜けるのを止めるため。 */
.mod_21_section .mv-single-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* ★aspect-ratio 固定(16/9)を廃止し、画像自身の縦横比に高さを追従させる。
     器は静的配置(absoluteで敷いていた img を通常フローの block 画像に戻す)にし、
     min/max-height だけで極端な縦長・横長を抑える安全網を残す。 */
  max-height: min(92vh, 1040px);
  min-height: min(48vh, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mod_21_section .mv-single-media img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-height: min(92vh, 1040px);
  object-fit: contain;
  max-width: none;
}

/* ── 題箋プレート: 写真の左下に重ねる不透明の面 ──
 * 受領時はコピーが写真の下に置かれ、構図が成立していなかった。
 * 面が不透明なので、文字色はテーマのインクをそのまま使える(写真に依存しない)。 */
.mod_21_section .main_visual_copy {
  position: absolute;
  z-index: 3;
  left: calc(var(--mv-edge) + var(--mv-off));
  bottom: calc(var(--mv-mat) + var(--mv-off));
  /* ★36rem。46rem 案は枠の 68% を覆って「帯」に見え、題箋として読めなかった(⑤-2 で並置)。
     34rem まで絞ると 1920px で見出しが3行に割れたので、2行に収まる最小幅に戻した。 */
  width: min(46rem, calc(100% - 2 * (var(--mv-edge) + var(--mv-off))));
  padding: var(--mv-pad);
  /* 下端は指標(縦ティック)のぶんを空けておく。
     ティックの下端は面の下端から --mv-pad の位置にあるので、pad + ティック高 + 行間ぶん。 */
  padding-bottom: calc(var(--mv-pad) + 1.75rem + .7rem);
  background: none;
  border-radius: var(--radius);
}

.mod_21_section .hero-title {
  font-family: var(--font-heading);
  /* ★--fs-hero-lg ではなく --fs-hero-md(40〜48px)。R-4 の表では hero-md が
     「MVキャッチ 29字以上」の段であり、この部品はキャッチ長を選べない
     (生成時に 8字も 30字も入る)ので、最長ケースが成立する段に合わせる。 */
  font-size: var(--fs-hero-md);
  line-height: 1.32;
  letter-spacing: 0.01em;
  color: var(--mv-ink);
  margin: 0 0 .6rem;
  text-wrap: balance;
}

.mod_21_section .hero-lead {
  font-size: var(--fs-lead);
  line-height: 1.85;
  color: var(--color-text);
  margin: 0;
  max-width: 42rem;
}

/* ── 指標: 縦ティック。プレートの内側に置く ──
 * 写真の上に置くと明るい写真で消えるため、面の上に置く。
 * 01=横線 / 02=数字カウンタ / 03=縦ティック で、指標だけでも見分けが付く。
 * align-items:flex-end なので、アクティブの丈が変わっても他のティックは動かない。 */
.mod_21_section .slider-dots {
  position: absolute;
  z-index: 4;
  left: calc(var(--mv-off) + var(--mv-pad));
  bottom: calc(var(--mv-off) + var(--mv-pad));
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: .45rem;
  margin: 0;
}

.mod_21_section .slider-dot {
  width: 3px;
  height: 1.1rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  /* ★2px / 22% 案は面の上でほとんど読めず「指標」に見えなかった(実描画で確認)。
     18番の教訓どおり、効いていない意匠は足さずに振り切る。 */
  background: color-mix(in srgb, var(--color-text) 32%, transparent);
  transition: background-color .3s ease;
}

/* ホバーは色だけ変える(レイアウトを動かさない) */
.mod_21_section .slider-dot:hover { background: color-mix(in srgb, var(--color-text) 50%, transparent); }

/* アクティブは色＋丈。align-items:flex-end の flex なので、丈が変わっても
   他のティックの位置は動かない(ホバーではなく状態表示なので可)。 */
.mod_21_section .slider-dot.is-active {
  height: 1.75rem;
  background: var(--mv-ink);
}

.mod_21_section .slider-dot:focus-visible {
  outline: 2px solid var(--mv-ink);
  outline-offset: 3px;
}

/* ── 前後ボタン: 枠の【右上】に2つ並べる ──
 * ★左右中央に置くと、左のボタンが題箋プレート(左下・z-index 3)の裏に入って
 *   押せなくなる(実描画で発覚)。プレートの対角に逃がすと、どの幅でも重ならない。
 * 面はテーマ追従。R-7 の「半透明の面は不透明度 80% 以上」を満たす 88%。 */
.mod_21_section .slider-prev,
.mod_21_section .slider-next {
  position: absolute;
  top: var(--mv-off);
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  color: var(--color-text);
  z-index: 2;
  transition: background-color .3s ease;
}

.mod_21_section .slider-prev { right: calc(var(--mv-off) + 2.9rem); }
.mod_21_section .slider-next { right: var(--mv-off); }

.mod_21_section .slider-prev:hover,
.mod_21_section .slider-next:hover { background: var(--color-bg); }

.mod_21_section .slider-prev::before,
.mod_21_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_21_section .slider-prev::before { transform: rotate(-135deg); }
.mod_21_section .slider-next::before { transform: rotate(45deg); }

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

/* slider.js は reduce のとき自動再生しない。クロスフェードもここで止める。 */
@media (prefers-reduced-motion: reduce) {
  .mod_21_section .slider-slide,
  .mod_21_section .slider-dot,
  .mod_21_section .slider-prev,
  .mod_21_section .slider-next { transition: none; }
}

/* ── モバイル(受領時は 767px / 1220px の混在。規約の 768px に統一) ── */
@media (max-width: 768px) {
  .mod_21_section.main_visual {
    --mv-off: clamp(.6rem, 2.4vw, .9rem);
    --mv-pad: 1rem;
  }

  /* ★1/1。4/5 案は横位置の写真から 44% を横に捨てるが、1/1 なら 30% で済む。
     それでいて 30字コピーの題箋が枠に収まる高さを確保できる(実測)。
     2026-09 ユーザー確定: モバイルの写真をより高く見せたいため 4/5 縦長へ変更し、
     上限/下限も引き上げる。 */
  .mod_21_section .slider-viewport {
    aspect-ratio: 4 / 5;
    max-height: min(78vh, 640px);
    min-height: min(56vh, 440px);
  }

  .mod_21_section .mv-single-media {
    aspect-ratio: 4 / 5;
    max-height: min(78vh, 640px);
    min-height: min(56vh, 440px);
  }

  .mod_21_section .mv-single-media img {
    height: 100%;
    object-fit: cover;
  }

  .mod_21_section .main_visual_copy {
    padding: 1.5rem;
    /* モバイル限定: メインビジュアルの中央にテキストを配置する。
       PCの左下配置(left/bottom)と、PC用インラインtransformの両方を
       打ち消し、絶対配置のまま上下左右中央へ寄せる。 */
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 2rem);
    text-align: center;
  }

  /* design.md No.5: モバイル h1 は固定的に絞る。
     2026-09 ユーザー確定: 画像を高くした分、文字は一段小さくして余白を確保。
     可読性向上: 行間を広げ、text-shadowで背景写真からの浮きを保証する。 */
  .mod_21_section .hero-title {
    font-size: clamp(1.15rem, 5vw, 1.5rem);
    line-height: 1.5;
    margin-bottom: .6rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.7);
  }

  .mod_21_section .hero-lead {
    font-size: 0.8rem;
    line-height: 1.85;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.65);
  }

  /* 題箋の背後に暗いスクリムを敷き、写真の明暗に関わらず文字を読みやすくする */
  .mod_21_section .main_visual_copy {
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.55) 100%);
    padding: 1.25rem 1rem 1.5rem;
    border-radius: 4px;
  }

  .mod_21_section .hero-lead {
    font-size: var(--fs-body);
    line-height: 1.75;
  }

  .mod_21_section .slider-dot { height: .95rem; }
  .mod_21_section .slider-dot.is-active { height: 1.5rem; }

}

/* 更に狭い画面(小型スマホ)では、もう一段階だけ文字を絞る */
@media (max-width: 400px) {
  .mod_21_section .hero-title {
    font-size: clamp(1rem, 4.6vw, 1.3rem);
  }
  .mod_21_section .hero-lead {
    font-size: 0.72rem;
  }
}