/* features-th03-bnr.css — 写真重ね交互バナー
 *
 * 受領時の意匠（写真が片側の画面端へ抜け、その内辺にブランド色の面が重なる交互バナー）は変えていない。
 * 直したのは実測で出た欠陥だけ。詳細は
 *   .company/engineering/plans/features-th03-bnr-plan.md
 *   .company/creative/briefs/features-th03-bnr-brief.md
 *
 * ★受領時の致命欠陥（実測）
 *   figure{text-align:right} で写真を右寄せする設計だが、_shared/common.css の img{display:block}
 *   で <img> がブロック化し text-align が効かず、幅が写真列の2倍ある figure の左端に張り付いていた。
 *   結果、1920px の .reverse 側で写真とパネルの重なりが 0（167px の白い隙間）、
 *   非 .reverse 側では写真の右 857.3px が画面外へ捨てられていた（可視率 39%）。
 *   → 写真列そのものを「見せたい矩形」にして object-fit: cover で満たす方式へ作り直した。
 *
 * ★土台（_shared/module-base.css）の前提
 *   - .lgx .row:has(> .col > figure:only-child) が (0,7,2) で行を flex 化し float を無視する
 *     → 左右の振り分けは float ではなく margin-inline の auto で行う
 *   - .lgx{height:auto !important} があるので写真の高さは height ではなく inset-block で作る
 *   - .lgx .reverse>.col:last-child{margin-left:0} が (0,4,0)
 *     → パネルを右へ寄せる指定は (0,5,0) 以上で書く
 */
@charset "UTF-8";

/* ────────────────────────────────────────────────────────────────
   1. ルート
   ★メディアクエリ無しの宣言が「縦積み」になるように書く。
     max-width の問い合わせを作らないので、768.01〜768.99px のようなズーム時の小数幅でも
     必ず縦積みが残る（媒体クエリの穴で構図が消える事故の予防）。
   ──────────────────────────────────────────────────────────────── */
.lgx.th03_bnr {
  position: relative;
  padding-block: clamp(var(--space-lg), 5vw, 88px);
  /* 旧テーマの Arial 固定（module-base.css の .lgx{font-family:Arial,…}）を解いて
     サイトのフォント設定へ戻す（R-3）。
     ★実測（scratchpad/t03-font4.mjs）: 現在の common.css は --font-body が
       "'Noto Sans JP', 'Montserrat'," と【末尾カンマ】で終端しており CSS 的に不正な値なので、
       この宣言は IACVT となり unset（＝継承）に落ちる。
       それでも【カスケードでは .lgx の Arial に勝っている】ので unset＝継承となり、
       結果としてこの部品は body から降りてくる値を継承する。
       ★実測: この宣言があると computed は "Noto Sans JP"（＝ブラウザ既定。CSS 皆無のページと同値）、
         無いと土台の Arial, Roboto, ヒラギノ角ゴ, メイリオ… のスタック。
         つまり【土台の日本語フォントスタックを捨ててブラウザ既定へ落ちる】。
         ただし common.css の body{font-family:var(--font-body)} も同じ理由で無効なので、
         サイト本体も同じブラウザ既定で出ている＝この部品だけが浮くのではなく、
         むしろページ全体と揃う。R-3 も var() 経由を必須にしている。
       確認パネルのフォントプリセット（正常な値）を当てたときは素直に効く（実測で確認）。
     ★`var(--font-body) sans-serif` と書けば今すぐ効くが、先方がトークンを直した瞬間に
       "'A','B' sans-serif" という不正値になって壊れるので採らない。→ 先方への指摘事項。 */
  font-family: var(--font-body);
  /* 旧テーマは html{font-size:62.5%} 前提なので .lgx の 1.4em が 22.4px になっていた。
     R-4 に従いトークンへ戻す。 */
  font-size: var(--fs-body);
}

.lgx.th03_bnr + .lgx.th03_bnr {
  margin-top: var(--space-lg);
}

/* ────────────────────────────────────────────────────────────────
   2. 写真
   ──────────────────────────────────────────────────────────────── */
.th03_bnr .row > .col.th03_bnr_img {
  width: 100%;
  margin: 0;
  padding: 0;
}

.th03_bnr .th03_bnr_img figure {
  /* 器の寸法を写真の縦横比から切り離す（案件ごとに 1.43:1 も 1.83:1 も縦長も来る）。 */
  aspect-ratio: 16 / 10;
  margin: 0;
  overflow: hidden;
}

.th03_bnr .th03_bnr_img img {
  display: block;
  width: 100%;
  height: 100%;
  /* common.css の img{max-height:800px} は「高さが intrinsic な内容画像」向けの上限。
     ここは器が高さを決める cover 画像なので外す（外さないと器より小さく収まって隙間が出る）。 */
  max-height: none;
  object-fit: cover;
  object-position: center;
}

@supports not (aspect-ratio: 1 / 1) {
  .th03_bnr .th03_bnr_img img { height: auto; }
}

/* 写真をセクションの幅いっぱいへ抜く。
   ★100vw / 100dvw / calc(50% - 50vw) は使わない。
     スクロールバーの出る実ブラウザでのみ左右がはみ出して祖先の overflow に刈られるため
     （headless の --hide-scrollbars でも iframe の scrolling="no" でも再現しない）。
     100cqw はコンテナの content-box 基準なのでスクロールバーの影響を受けない。 */
@supports (container-type: inline-size) {
  /* ★width:100% を必ず添える。container-type: inline-size は inline 方向のサイズ拘束を掛けるので、
     shrink-to-fit な親（inline-block / flex アイテム）に入れられると幅が 0 に潰れる（実測）。 */
  .lgx.th03_bnr { container-type: inline-size; width: 100%; }
  .th03_bnr .row > .col.th03_bnr_img {
    /* ★width は auto にする。100% のままだと負のマージンが「箱を広げる」のではなく
       「箱をずらす」だけになり、左へ 10px ずれた非対称な写真になる（実測で踏んだ）。 */
    width: auto;
    margin-inline: calc(50% - 50cqw);
  }
}

/* ────────────────────────────────────────────────────────────────
   3. テキスト面（ブランド色パネル）
   ──────────────────────────────────────────────────────────────── */
.th03_bnr .row > .col.th03_bnr_text {
  position: relative;
  z-index: 1;
  width: calc(100% - var(--space-md));
  /* 縦積みでも「重なり」を残す。写真の下端へ食い込ませる。 */
  margin: calc(var(--space-md) * -1) auto 0;
  padding: clamp(var(--space-md), 3.2vw, 64px);
  color: var(--color-on-primary, #fff);
  /* R-7: 半透明の面は不透明度 80% 以上。受領時は 50% で、実描画コントラストが
     360パターン中 109件 AA 未達（最小 2.51）だった。
     ★濃度は「最も苦しい案件」から逆算している。律速は【高彩度レッド × 面が地の白の上に出る部分】で、
       primary(#e4002b) を白に N% で乗せたときの白文字とのコントラストは
       88% → 4.49（AA 未達）/ 90% → 4.56 / 92% → 4.63（実測）。
       余裕を見て 92% を採る。写真の寄与は 8% に収まるので、写真が真っ白でも真っ黒でも読める。 */
  /* color-mix が効かない経路（非対応ブラウザ／変数欠落）で地が消えないよう、先に不透明で置く。 */
  background: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 92%, transparent);
}

.th03_bnr .th03_bnr_text :is(h2:where(:not([data-sm-h])),:where([data-sm-h="h2"])) {
  margin: 0 0 var(--space-sm);
  padding: 0;
  font-family: var(--font-heading);
  /* 受領時は .lgx h2{font-size:2.4rem} が PC/SP とも 38.4px になり、
     R-6「モバイルは PC より小さく」に違反していた。
     --fs-h2 は clamp(1.5rem,4vw,2.2rem) なので SP 24px / PC 35.2px と自動で解決する。 */
  font-size: var(--fs-h2);
  line-height: 1.4;
  text-align: left;
  color: var(--color-on-primary, #fff);
}

/* 土台の中央 40×2px の下線飾りは、左寄せ組版の面の中では宙に浮くので出さない
   （受領時も content:none で消されており、実描画にも出ていなかった）。 */
.th03_bnr .th03_bnr_text :is(h2:where(:not([data-sm-h])),:where([data-sm-h="h2"]))::before,
.th03_bnr .th03_bnr_text :is(h2:where(:not([data-sm-h])),:where([data-sm-h="h2"]))::after {
  content: none;
}

.th03_bnr .th03_bnr_text p:not(.th03_bnr_button) {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.9;
  color: var(--color-on-primary, #fff);
}

/* ────────────────────────────────────────────────────────────────
   4. ボタン
   ★受領時は position:absolute; bottom:55px で、本文の下端と 4.7px 重なっていた
     （本文が1行増えると文字同士が重なる。triage R12b も検出）。通常フローへ戻す。
   ★width:280px 固定・display:block もやめ、ラベルの字数で伸びる形にした
     （README の「ラベルは全角8字程度まで」という制限が不要になる）。
   ──────────────────────────────────────────────────────────────── */
.th03_bnr .th03_bnr_text .th03_bnr_button.more {
  position: static;
  width: auto;
  max-width: 100%;
  margin: var(--space-md) 0 0;
  /* 土台の .lgx .more{overflow:hidden} はフォーカスリングの天地を刈るので戻す。 */
  overflow: visible;
}

.th03_bnr .th03_bnr_text .th03_bnr_button.more a.add_arrow {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0.85em 3.1em 0.85em 1.6em;
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  line-height: 1.4;
  text-align: left;
  /* 面がブランド色なので、ボタンをブランド色で塗ると面に埋もれる（受領時がこれ）。
     地と文字を「--color-on-primary × --color-primary」の対にすると、
     primary と on-primary の対はテーマ側が可読性を保証しているので
     どの配色でも 4.5:1 を必ず満たし、かつ面から最も分離する。 */
  background: var(--color-on-primary, #fff);
  color: var(--color-primary);
  border: 1px solid var(--color-on-primary, #fff);
  transition: outline-offset 0.2s ease;
}

.th03_bnr .th03_bnr_text .th03_bnr_button.more a.add_arrow::after {
  right: 1.35em;
  border-top-color: var(--color-primary);
  border-right-color: var(--color-primary);
  transition: right 0.2s ease;
}

/* ホバー／フォーカスで色を一切変えない。
   .lgx には .button:hover / .add_arrow:hover の独立したホバーパッチが複数あり、
   さらに common.css の a:hover{opacity:.8} が重なって「ブランド色 × ブランド色」に同化する
   （banner-cta で4例の再発。実測 1.14〜2.12）。色を動かさなければ原理的に起きない。
   合図は「矢印が右へ寄る」と「リングが外へ出る」の幾何だけで取る。 */
.th03_bnr .th03_bnr_text .th03_bnr_button.more a.add_arrow:hover,
.th03_bnr .th03_bnr_text .th03_bnr_button.more a.add_arrow:focus-visible {
  background: var(--color-on-primary, #fff);
  color: var(--color-primary);
  border-color: var(--color-on-primary, #fff);
  opacity: 1;
  filter: none;
}

.th03_bnr .th03_bnr_text .th03_bnr_button.more a.add_arrow:hover::after,
.th03_bnr .th03_bnr_text .th03_bnr_button.more a.add_arrow:focus-visible::after {
  right: 1.05em;
  border-top-color: var(--color-primary);
  border-right-color: var(--color-primary);
}

.th03_bnr .th03_bnr_text .th03_bnr_button.more a.add_arrow:hover {
  outline: 1px solid var(--color-on-primary, #fff);
  outline-offset: 4px;
}

/* common.css の :focus-visible は outline を currentColor にする。
   ここでは currentColor が --color-primary なので、ブランド色の面の上でリングが消える。 */
.th03_bnr .th03_bnr_text .th03_bnr_button.more a.add_arrow:focus-visible {
  outline: 3px solid var(--color-on-primary, #fff);
  outline-offset: 3px;
}

/* ────────────────────────────────────────────────────────────────
   5. PC — 重ねの構図
   ★閾値は min-width:769px（規約 R-6 の標準）。
     768px 以下は上の無条件ブロックが縦積みを作る。土台の flex 化・float は
     min-width:768px から効くが、768px では上の (0,4,0) の幅指定が勝つので崩れない。
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  .lgx.th03_bnr {
    /* キャッチが短い案件で写真が薄い帯にならないようにする下限。上限も付ける（R-5）。 */
    min-height: clamp(320px, 30vw, 520px);
  }

  /* 写真はセクションの片端から 45% 地点まで。
     高さは inset-block で作る（.lgx{height:auto!important} があるので height は効かない）。 */
  .th03_bnr .row > .col.th03_bnr_img {
    position: absolute;
    inset-block: 0;
    width: auto;
    margin: 0;
    z-index: 0;
  }

  /* ★物理プロパティ（left/right）ではなく論理プロパティで書く。
     パネルの左右振りを margin-inline（論理）で行っているので、写真を物理で書くと
     RTL のときだけ写真とパネルが同じ側へ寄って重なりが壊れる（実測: 重なり 123px → 563px）。 */
  .th03_bnr .row:not(.reverse) > .col.th03_bnr_img { inset-inline: 45% 0; }
  .th03_bnr .row.reverse > .col.th03_bnr_img { inset-inline: 0 45%; }

  .th03_bnr .th03_bnr_img figure {
    aspect-ratio: auto;
    height: 100%;
  }

  /* パネルは版面の反対側の端に接地させ、写真の内辺にだけ重ねる。
     ★左右の振り分けは margin-inline の auto。float は土台の :has() flex 化で無視される。
     ★.lgx .reverse>.col:last-child{margin-left:0} が (0,4,0) なので (0,5,0) で書く。 */
  .th03_bnr .row > .col.th03_bnr_text {
    flex: 0 0 56%;
    width: 56%;
    margin-block: 0;
  }

  .th03_bnr .row:not(.reverse) > .col.th03_bnr_text { margin-inline: 0 auto; }
  .th03_bnr .row.reverse > .col.th03_bnr_text { margin-inline: auto 0; }
}

/* ────────────────────────────────────────────────────────────────
   6. 出現演出
   ★transform は「搬送」だけに使い、レイアウトには一切使わない。
     受領時は .visible の状態でも translate(0,±33px) が残っており、位置決めが transform 依存だった。
     common.css の @media(prefers-reduced-motion:reduce){.fade-in{transform:none!important}} と
     組み合わさると構図ごと消える。
   ★開始状態（opacity:0）は (prefers-reduced-motion: no-preference) と (scripting: enabled) の
     両方が成り立つときだけ当てる。受領時はこの条件が無かったため、動きを減らす設定の環境でも
     JS が無効な環境でも【中身が opacity:0 のまま消えた】（実測で確認）。
     (scripting) 非対応のブラウザでもこのブロックごと無効になり、「最初から見える」側へ倒れる。
   ★ただし (scripting: enabled) は「JS が許可されている」しか意味しない。
     common.js が同梱されない／先行スクリプトの例外で止まる／CMS がスクリプトを落とす、といった
     【実際の JS 失敗】はすべてこの条件を素通りし、.visible が付かずセクションが丸ごと消える。
     そこで 4 秒の保険アニメーションを併走させ、.visible が来なくても必ず現れるようにする（原則7）。
     forwards なので遅延中は何も寄与せず、.visible が先に来れば animation:none で打ち切られる
     ＝通常時のスクロール演出は一切変わらない。
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .th03_bnr.fade-in .th03_bnr_img,
  .th03_bnr.fade-in .th03_bnr_text {
    opacity: 0;
    transition: opacity 0.9s ease 0.15s, transform 0.9s ease 0.15s;
  }
  .th03_bnr.fade-in .th03_bnr_img { transform: translateY(-24px); }
  .th03_bnr.fade-in .th03_bnr_text { transform: translateY(24px); }

  /* JS が .visible を付けなかったときの保険（原則7）。4 秒後に必ず現す。 */
  .th03_bnr.fade-in .th03_bnr_img,
  .th03_bnr.fade-in .th03_bnr_text {
    animation: features-th03-bnr-failsafe 0.01s linear 4s forwards;
  }

  .th03_bnr.visible .th03_bnr_img,
  .th03_bnr.visible .th03_bnr_text,
  .th03_bnr:not(.fade-in) .th03_bnr_img,
  .th03_bnr:not(.fade-in) .th03_bnr_text {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* @keyframes 名はグローバル空間なのでモジュール名を前置する（原則1）。 */
@keyframes features-th03-bnr-failsafe {
  to { opacity: 1; transform: none; }
}

/* ────────────────────────────────────────────────────────────────
   7. 動きを減らす設定 / 強制配色（★ファイル末尾。後勝ちで確実に効かせる）
   ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .th03_bnr .row > .col.th03_bnr_img,
  .th03_bnr .row > .col.th03_bnr_text {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* ★矢印（::after）に transform:none を当ててはいけない。
     土台の .lgx .add_arrow:after は transform: translate(0,-50%) rotate(45deg) で
     【グリフそのものを作っている】ので、消すと シェブロン「›」が回転しない角の記号になり、
     さらに天地中央から 3px ずれる（実測で確認）。止めるのは transition だけ。 */
  .th03_bnr .th03_bnr_text .th03_bnr_button.more a.add_arrow,
  .th03_bnr .th03_bnr_text .th03_bnr_button.more a.add_arrow::after {
    transition: none;
  }
}

@media (forced-colors: active) {
  /* 強制配色では背景・枠線の色指定が無効化され、ホバーの合図が消える。
     outline は forced-colors でも残るので、そちらへ振り替える。 */
  .th03_bnr .th03_bnr_text .th03_bnr_button.more a.add_arrow:hover,
  .th03_bnr .th03_bnr_text .th03_bnr_button.more a.add_arrow:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
  }
}