/* hero-split-slider.css — ベースライン(自動読込)。最低限の見た目を保証する。
   上書き・拡張はページ側/custom側で行い、このファイルと同名クラスをゼロから書き直さないこと。
   色・フォントは必ず var(--color-*) / var(--font-*) を参照。装飾はサイトに合わせて足す。
   最小要件: grid 2カラム / 画像は object-fit:cover / 高さを第一画面に収める / モバイルは縦積み。

   ── 2026-08-17 改訂の意図（参考型なので変更点をここに残す） ────────────────────
   意匠: 「左右分割 + 地に浮く写真パネルのスライド」。写真を断ち落とさず四辺に地の余白を残し、
         影で持ち上げる。可読性は写真の明るさから独立させる（文字を写真に重ねないのがこの部品の全部）。
   修正: ① .slider-track が flex でなかったためスライドが縦積みになり、slider.js の maxIndex() が
            0 に落ちて【全画面幅でドット1個・自動送りゼロ・3枚中2枚が一度も表示されない】状態だった。
            → track を flex、スライドを width:100% にして送りの幾何を復元。
         ② fade は「スライドは横並びのまま、重ねるのは中の img」で実現する
            （スライド自体を重ねると trackWidth − vpWidth = 0 になり、また送りが死ぬ）。
         ③ 見出しのフォールバックが --color-primary で、既定テーマのコントラストが 3.12 だった。
            --color-heading-ink は common.css の :root に無いので、フォールバックを --color-text に。
         ④ eyebrow / SCROLL の --color-text-muted は定義上どのテーマでも 3.1〜3.7 にしかならない。
            eyebrow は --color-text にし、主従はサイズと字送りで作る。
         ⑤ SCROLL 誘導は写真の上に載って読めず、18番の意匠とも重複するため削除（README で任意）。
   ────────────────────────────────────────────────────────────────────────── */

/* ══ セクション ══════════════════════════════════════════════════════════════
   SP は 1カラム(写真が上 / コピーが下)。PC は下の @media (min-width:769px) で 2カラム。 */
.hero-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(1.1rem, 4vw, 1.5rem);
  padding: clamp(1rem, 4vw, 1.5rem) clamp(1.25rem, 5vw, 1.75rem) clamp(1.75rem, 6vw, 2.25rem);
  background: var(--color-bg);
}

/* ══ 写真スライド ════════════════════════════════════════════════════════════
   .slider / .slider-viewport / .slider-track / .slider-slide / .slider-dots は
   slider.js との契約クラス。見た目だけをここで決める。 */
.hero-split-media { min-width: 0; }

/* 指標(ドット)を写真の外へ出すため、.slider を縦のフレックスにする。
   ★.slider-viewport の外に置くことで、ドットが写真に重ならない
   （＝ドットの可読性が写真の明るさに依存しない）。 */
.hero-split-media .slider {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 1.6vw, 1.3rem);
}

/* 写真パネル。地の上に「置いた板」として浮かせる（この部品のアクセント）。
   ★width:100% を明示する。aspect-ratio と max-height を併用すると、
     インラインサイズが未確定な場合に幅が比率から逆算されて器を突き抜ける。 */
.hero-split-media .slider-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: min(40vh, 340px);
  overflow: hidden;
  /* ★角丸はテーマの --radius-card にそのまま従う（既定 2px ＝ ほぼ直角）。
     角丸を"意匠として"大きくする手は 15_hero-dual-photo-split が既に使っているので取らない。
     この部品のアクセントは【影ひとつ】に絞り、その量を振り切る。
     （影を弱めた案・影を消した案・角丸を足した案を並べて比較した結果。⑤-2） */
  border-radius: var(--radius-card);
  box-shadow: 0 30px 58px rgba(0, 0, 0, 0.24), 0 5px 12px rgba(0, 0, 0, 0.09);
}

/* ★トラックは必ず横並び。slider.js は「トラック内の実位置」で送り先を決めるので、
   ここが block だと全スライドの offset が 0 になり maxIndex() が 0 に落ちて送りが死ぬ。 */
.hero-split-media .slider-track {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}

/* ★fade でもスライドは横並びのまま（幅 100%）にして位置を保つ。重ねるのは中の img。
   スライド自体を absolute / grid で重ねると trackWidth − vpWidth = 0 になり送りが死ぬ。 */
.hero-split-media .slider-slide {
  flex: none;
  width: 100%;
  opacity: 0;                      /* JS が未実行でも 1枚目は見える（下の :first-child） */
  transition: opacity 0.6s ease;
}
.hero-split-media .slider-slide:first-child { opacity: 1; }

.hero-split-media .slider-slide img {
  position: absolute;              /* 包含ブロックは .slider-viewport */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 指標: 輪郭線の丸ドット。アクティブのときだけ塗る。 */
.hero-split-media .slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.55rem, 1vw, 0.8rem);
}
.hero-split-media .slider-dot {
  position: relative;
  width: clamp(10px, 0.9vw, 13px);
  height: clamp(10px, 0.9vw, 13px);
  flex: none;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
/* タップ領域だけを広げる（見た目の大きさ・レイアウトは変えない）。
   左右は隣のドットと食い合わないよう控えめに。 */
.hero-split-media .slider-dot::after {
  content: "";
  position: absolute;
  inset-block: -13px;
  inset-inline: -3px;
}
.hero-split-media .slider-dot:hover { border-color: var(--color-primary); }
.hero-split-media .slider-dot.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.3);           /* ホバーではなく状態変化。レイアウトは動かない */
}

/* ══ コピー ══════════════════════════════════════════════════════════════════
   写真に重ねないので、可読性が写真の明るさから独立する（この部品の存在理由）。 */
.hero-split-copy {
  min-width: 0;
  padding: 0;
  max-width: none;
}

/* eyebrow は「ピル型の線枠ラベル」。muted 色は使わない
   （--color-text-muted は定義上どのテーマでも地に対して 3.1〜3.7 にしかならない）。
   見出しとの主従は色ではなくサイズと字送りで作る。 */
.hero-split-eyebrow {
  display: inline-block;
  margin: 0 0 clamp(0.85rem, 1.6vw, 1.2rem);
  padding: 0.42em 1.15em;
  border: 1px solid color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  color: var(--color-text);
}

/* 見出し。列幅連動タイポ（cqw）で、分割比が変わっても行数が破綻しないようにする。
   上限は必ずトークン。--color-heading-ink は未定義の環境があるので --color-text へ落とす。 */
.hero-split-title {
  margin: 0 0 clamp(0.9rem, 1.8vw, 1.3rem);
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4.2vw, var(--fs-hero-md));
  line-height: 1.28;
  letter-spacing: 0.02em;
  color: var(--color-heading-ink, var(--color-text));
  text-wrap: balance;              /* 孤立行対策。非対応環境は素の折り返しに戻るだけ */
}

/* CTA。面は common.css の .btn（--color-primary ＋ --color-on-primary）をそのまま使う。
   ★ホバーだけ上書きする理由: common.css の .btn:hover は
     「面を --color-primary-dark にして文字を #fff にする」ため、
     淡色ベージュのプリセットで【白文字 × 明るいベージュ = 2.59:1】になり読めなくなる（実測）。
     面と文字の組（--color-primary / --color-on-primary）は変えず、
     ホバーの合図はこの部品の意匠と同じ【浮き】で出す。矩形は動かない。 */
.hero-split-copy .btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.hero-split-lead {
  margin: 0 0 clamp(1.4rem, 2.6vw, 2rem);
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.9;
  color: var(--color-text);
  text-wrap: pretty;
}

/* ══ PC（769px 以上）═════════════════════════════════════════════════════════
   ★min-width:769px は max-width:768px と同一の境界を反対側から書いたもの。
     無条件の指定を後ろに書くと SP へ漏れるため、PC 専用の指定はここに閉じる。 */
@media (min-width: 769px) {
  .hero-split {
    /* 写真 54% / テキスト 46%（規約の「テキスト列 44% 以上」を満たす）。
       写真の側を大きく取るのは、12_hero-split-image-right が「コピーが主役・写真は説明」
       という力関係を担っているため。こちらは【回る写真】が主役。
       DOM 順が 写真 → コピー なので、1列目が写真・2列目がコピー。
       min-width はテキスト列に置く。狭い側だけ効く下限で、広い側では比率に戻る
       （固定幅ではないので R-5 に反しない）。 */
    grid-template-columns: minmax(0, 54fr) minmax(336px, 46fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 4rem);
    /* 769〜1024px では列が痩せて写真も文章も短くなり、主役区画として薄くなる。
       固定 px ではなく vh 側に上限を持つ下限で「見せ場」を確保する。
       サイトヘッダー(76px)を足しても第一画面に収まる値にとどめる（60vh + 76px < 800px）。 */
    min-height: min(60vh, 620px);
  }
  /* 写真を左・コピーを右に置く（DOM 順のまま）。写真パネルは断ち落とさない。 */
  .hero-split-media .slider-viewport {
    aspect-ratio: 3 / 2;
    max-height: min(58vh, 540px);
  }
  .hero-split-media .slider {
    gap: clamp(1rem, 1.6vw, 1.4rem);
  }
  .hero-split-title {
    letter-spacing: 0.03em;
  }
}

/* 列幅連動タイポ。列そのものの幅を基準にするので、分割比を変えても行数が破綻しない。
   N = 100 ÷ 1行に入れたい字数 ≒ 9（8〜9字/行を狙う）。上限は --fs-hero-md（40〜48px）。 */
@supports (container-type: inline-size) {
  .hero-split-copy { container-type: inline-size; }
  .hero-split-title { font-size: clamp(1.75rem, 9cqw, var(--fs-hero-md)); }
}

/* ══ SP（768px 以下）═════════════════════════════════════════════════════════
   縦積みは必須要件。文字は PC より小さく。 */
@media (max-width: 768px) {
  .hero-split-title {
    font-size: clamp(1.5rem, 6.4vw, 2rem);
    letter-spacing: 0.01em;
  }
  .hero-split-lead {
    font-size: var(--fs-body);
    line-height: 1.8;
  }
  /* PC 用の改行位置を SP に持ち込むと、1セグメントが2行に割れて孤立行が出る。 */
  .hero-split-lead br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-split-media .slider-slide,
  .hero-split-media .slider-dot { transition: none; }
}

/* SM-FIX hero-split-slider/slideshow 同居 2026-09-23 (codex-generator 91cee0a と同内容) */
/* slideshow.css の .slider[data-variant="fade"] … (詳細度 0,3,0) に負けて 1枚目の高さが 0 になり
   写真が白抜けしていた。この部品の配置(トラック横並び・img を viewport に重ねる)を詳細度で守る。 */
.hero-split-media .slider[data-slider] .slider-track {
  display: flex;
  flex-wrap: nowrap;
  position: static;
  width: 100%;
  height: 100%;
}
.hero-split-media .slider[data-slider] .slider-slide {
  position: static;
  inset: auto;
  flex: none;
  width: 100%;
}
.hero-split-media .slider[data-slider] .slider-slide:not(:first-child) { opacity: 0; }
.hero-split-media .slider[data-slider] .slider-slide:first-child { opacity: 1; }
/* /SM-FIX */