/* banner-cta-hux-02.css — ★自動生成 (scripts/convert-tailwind.js)。手で編集しない。
 * 出自: ctas/4.html (HyperUI, MIT License, Copyright (c) Mark Mead)
 * Tailwind v4 のユーティリティを素のCSSへ焼き、.banner-cta-hux-02 にスコープし、
 * 色/本文サイズ/角丸/フォントをテーマ変数へ束縛したもの(生hex禁止=契約C3)。
 * ★@layer は意図的に剥がしてある。common.css が無レイヤーのため、レイヤー内に置くと常に負ける。 */
.banner-cta-hux-02 {
  --spacing: 0.25rem;
  --breakpoint-2xl: 96rem;
  --container-xl: 36rem;
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.banner-cta-hux-02 .mx-auto {
  margin-inline: auto;
}
.banner-cta-hux-02 .mt-4 {
  margin-top: calc(var(--spacing) * 4);
}
.banner-cta-hux-02 .grid {
  display: grid;
}
.banner-cta-hux-02 .hidden {
  display: none;
}
.banner-cta-hux-02 .inline-block {
  display: inline-block;
}
.banner-cta-hux-02 .h-40 {
  height: calc(var(--spacing) * 40);
}
.banner-cta-hux-02 .w-full {
  width: 100%;
}
.banner-cta-hux-02 .max-w-screen-2xl {
  max-width: var(--breakpoint-2xl);
}
.banner-cta-hux-02 .max-w-xl {
  max-width: var(--container-xl);
}
.banner-cta-hux-02 .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.banner-cta-hux-02 .grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.banner-cta-hux-02 .gap-4 {
  gap: calc(var(--spacing) * 4);
}
.banner-cta-hux-02 .rounded-sm {
  border-radius: var(--radius);
}
.banner-cta-hux-02 .border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.banner-cta-hux-02 .border-blue-600 {
  border-color: var(--color-primary);
}
.banner-cta-hux-02 .bg-blue-600 {
  background-color: var(--color-primary);
}
.banner-cta-hux-02 .bg-gray-100 {
  background-color: var(--color-surface);
}
.banner-cta-hux-02 .object-cover {
  object-fit: cover;
}
.banner-cta-hux-02 .p-8 {
  padding: calc(var(--spacing) * 8);
}
.banner-cta-hux-02 .px-4 {
  padding-inline: calc(var(--spacing) * 4);
}
.banner-cta-hux-02 .px-12 {
  padding-inline: calc(var(--spacing) * 12);
}
.banner-cta-hux-02 .py-3 {
  padding-block: calc(var(--spacing) * 3);
}
.banner-cta-hux-02 .py-8 {
  padding-block: calc(var(--spacing) * 8);
}
.banner-cta-hux-02 .text-center {
  text-align: center;
}
.banner-cta-hux-02 .text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.banner-cta-hux-02 .text-sm {
  font-size: var(--fs-small);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.banner-cta-hux-02 .font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.banner-cta-hux-02 .font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.banner-cta-hux-02 .text-gray-700 {
  color: var(--color-text);
}
.banner-cta-hux-02 .text-gray-900 {
  color: var(--color-heading-ink);
}
.banner-cta-hux-02 .text-white {
  color: var(--color-on-primary);
}
.banner-cta-hux-02 .transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
  .banner-cta-hux-02 .hover\:bg-transparent:hover {
    background-color: transparent;
  }
  .banner-cta-hux-02 .hover\:text-blue-600:hover {
    color: var(--color-primary);
  }
}
@media (width >= 40rem) {
  .banner-cta-hux-02 .sm\:mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .banner-cta-hux-02 .sm\:block {
    display: block;
  }
  .banner-cta-hux-02 .sm\:h-56 {
    height: calc(var(--spacing) * 56);
  }
  .banner-cta-hux-02 .sm\:px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
}
@media (width >= 48rem) {
  .banner-cta-hux-02 .md\:mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .banner-cta-hux-02 .md\:h-full {
    height: 100%;
  }
  .banner-cta-hux-02 .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .banner-cta-hux-02 .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .banner-cta-hux-02 .md\:p-12 {
    padding: calc(var(--spacing) * 12);
  }
  .banner-cta-hux-02 .md\:text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
}
@media (width >= 64rem) {
  .banner-cta-hux-02 .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .banner-cta-hux-02 .lg\:px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .banner-cta-hux-02 .lg\:px-16 {
    padding-inline: calc(var(--spacing) * 16);
  }
  .banner-cta-hux-02 .lg\:py-24 {
    padding-block: calc(var(--spacing) * 24);
  }
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
  .banner-cta-hux-02 *, .banner-cta-hux-02 ::before, .banner-cta-hux-02 ::after, .banner-cta-hux-02 ::backdrop {
    --tw-border-style: solid;
    --tw-font-weight: initial;
  }
}

/* ============================================================================
   ★ここから下が改修（2026-09-17 / banner-cta-hux-02-plan.md）。
     上の自動生成ブロックは1行も触っていない。
     直したのは実測で出た欠陥だけで、意匠は1つも足していない
     （線・枠・影・スクリム・角丸・連番・ブリード・面のいずれも追加なし）。
     構図・版面 1536px・ガター 16px・面色・内側余白・文字の中央寄せは受領時のまま。
   ★兄弟の banner-cta-hux-01 と【同じ直し方をしていない】箇所が2つある（2 と 3）。
     理由はそれぞれのブロックのコメントに実測値つきで書いた。
   ============================================================================ */

/* ────────────────────────────────────────────────────────────────
   1. 出現演出の保険
   ★ルート要素が .fade-in を持つので common.css の .fade-in の opacity:0 が当たる。
     本番で .visible を付けるのは common.js なので、同梱されない・先行スクリプトの例外で
     止まる・CMS がスクリプトを落とす といった実失敗で【帯が丸ごと消える】。
     実測（PREVIEW-ONLY 抜き・JS なしのハーネス / 受領時）: t=6000ms でも opacity 0。
   ★順序が要。「見える」を無条件で先に置き、条件が揃ったときだけ opacity:0 へ戻す。
     (scripting) は Safari<=16 / Chrome<=119 / Firefox<=112 が未対応で、そこでは
     条件付きブロックごと無効になる。逆向きに書くと非対応ブラウザで中身が消える。
   ★保険は 4秒。同バンドルの features-th03-bnr / th12 / th23 / banner-cta-hux-01 と値をそろえてある。
     forwards なので遅延中は何も寄与せず、正常時の演出は一切変わらない。
     トレードオフ: 読み込みから 4秒より後にこの帯へ到達した読者にはフェードが再生されない。
     ページ中程〜末尾の部品なので「確実に見える」を優先する。
   ──────────────────────────────────────────────────────────────── */
.banner-cta-hux-02.section.fade-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .banner-cta-hux-02.section.fade-in {
    opacity: 0;
    transform: translateY(20px);
    /* transition: all は visibility まで遷移させるのでプロパティを明示する */
    transition: opacity 0.6s ease, transform 0.6s ease;
    animation: banner-cta-hux-02-failsafe 0.01s linear 4s forwards;
  }

  .banner-cta-hux-02.section.fade-in.visible {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* @keyframes 名はグローバル空間なのでモジュール名を前置する */
@keyframes banner-cta-hux-02-failsafe {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ────────────────────────────────────────────────────────────────
   2. CTA のホバー — ★受領時の「ゴースト反転」は残す。リングに置き換えない
   ★受領時の機序: hover:bg-transparent が面を消し、hover:text-blue-600 が文字を
     --color-primary にする。＝【素背景（--color-surface）の上にブランド色の文字】。
     これは C-1（ブランド色を素背景の文字色に使う）そのもので、
     さらに common.css の a:hover{opacity:.8} が重なって薄くなる。
     実測（実描画画素・1440px / 390px とも同値・CSS.forcePseudoState で :hover を強制）:
       既定   6.06 -> 2.33  ← AA 未達
       淡色   11.4 -> 1.47  ← ラベルがほぼ見えない
       濃色   15.6 -> 7.80
       高彩度 4.85 -> 3.83  ← AA 未達
     （既定の文字色は 130,148,166 -> 153,168,182 と opacity のぶんさらに薄まっている）
   ★対処: 反転という意匠はそのまま、【素背景の上に出る2つのブランド色】＝ 文字色と輪郭色だけを
     --color-heading-ink へ差し替える。C-1 の定石そのもの。
   ★兄弟の banner-cta-hux-01 は「面と文字を据え置いて box-shadow のリングを足す」方式を採ったが、
     本件では採らない。受領時の反転は意匠として成立しており、素背景の上に出る2色を
     差し替えるだけで AA を満たせるので、新しい図形を足す理由が無い。
     （兄弟部品と合図の作法までそろえると、並んだときの差別化も削る。）
   ★★強制配色（Windows ハイコントラスト）の扱いは下の 2-2 に分けて書いた。
     当初「面の塗りを消す方式は強制配色に強いので補修は要らない」と考えたが、
     【自分の実装を実測したら合図が 0 になっていた】。対照実験で原因まで特定してある。
   ★var() にフォールバックを付ける。--color-heading-ink が未定義の環境では
     宣言ごと計算値時点で無効になり、【受領時の --color-primary に戻る＝直っていない】状態になる。
     ★現在の土台では到達しない（hux-bind.css 末尾の SM-FIX-20260819 が
       html{--color-heading-ink: var(--color-text,#222)} を無条件に置いている）。
       土台が差し替わったときの保険として残す。
   ★濃色ネイビーのプリセットでは --color-heading-ink と --color-primary が同値（#16233f）なので、
     このホバーで実際に動くのは opacity の打ち消しだけ（文字色は rgb(22,35,63) のまま）。
     それでもコントラストは 1.23 -> 14.3 に上がる（opacity が原因だったため）。
   ★:hover と :focus-visible は別のルールに分けて書く。セレクタリストに解釈できない
     疑似クラスが1つ混ざると CSS はそのルールを丸ごと捨てるので、
     1本にまとめると :focus-visible 未対応の環境でホバーの合図まで一緒に消える。
   ★詳細度は (0,4,1)。土台が1段深くなっても勝てるようクラス2つ分の余裕を持たせてある。
   ──────────────────────────────────────────────────────────────── */
/* ★opacity の打ち消しは【無条件】。common.css の a:hover{opacity:.8} は
     タッチ端末でも（タップ後の残留ホバーで）当たるので、hover: hover の中に入れてはいけない。 */
.banner-cta-hux-02 .max-w-xl .mt-4 a.inline-block:hover {
  opacity: 1;
}

/* ★色の差し替えは @media (hover: hover) の中だけ。受領時の hover:bg-transparent /
     hover:text-blue-600 も同じ媒体クエリに包まれて出力されている（＝タッチでは発火しない）。
     ここだけ無条件にすると、タッチ端末でタップ後に「文字色だけインクに変わったボタン」が
     残留して、受領時と違う見え方になる。囲いごと引き継ぐ。 */
@media (hover: hover) {
  .banner-cta-hux-02 .max-w-xl .mt-4 a.inline-block:hover {
    color: var(--color-heading-ink, var(--color-text));
    border-color: var(--color-heading-ink, var(--color-text));
  }
}

/* ────────────────────────────────────────────────────────────────
   2-2. 強制配色（Windows ハイコントラスト）でのホバーの合図
   ★★ここは「受領時に有った合図を、自分の修正で壊した」箇所。対照実験で原因を確定させた。
     rest -> hover の実描画差（1440px・ボタン矩形 +8px の窓・forced-colors: active）:
       受領時                         50 / 7.0%
       受領時から opacity:.8 だけを無効化   0 / 0.0%   ← これが原因
       受領時から面の透明化だけを無効化      50 / 7.0%   ← 反転は合図に寄与していない
       上の 2 を当てただけの実装          0 / 0.0%
     ＝ 強制配色では background-color も color も border-color も UA のシステム色へ
     強制されるので、「面を消して文字色を変える」反転は【1画素も変化を作らない】。
     受領時に見えていた合図は common.css の a:hover{opacity:.8} だけで、
     opacity は強制配色でも効く数少ないプロパティだった。
     その opacity は AA を割る原因そのものなので打ち消さざるを得ず、結果として合図が消えた。
   ★outline は強制配色でも描かれるので、この環境でだけ補う。矩形は動かない
     （outline は場所を取らない）。通常環境（forced-colors: none）には一切影響しない。
   ★:hover と :focus-visible はここでも別ルールに分ける（上と同じ理由）。
     フォーカス側は common.css の :focus-visible{outline} が強制配色でも描かれるので補修不要。
   ──────────────────────────────────────────────────────────────── */
@media (forced-colors: active) and (hover: hover) {
  .banner-cta-hux-02 .max-w-xl .mt-4 a.inline-block:hover {
    outline: 3px solid currentColor;
    outline-offset: 3px;
  }
}

/* ────────────────────────────────────────────────────────────────
   3. CTA のフォーカス — ★outline の【色だけ】を直す。box-shadow は使わない
   ★本件は focus:ring-* も focus:outline-hidden も持たない（兄弟の hux-01 とはここが違う）。
     つまり common.css の :focus-visible{outline:3px solid currentColor; outline-offset:2px} が
     生きている（実測 computed: solid 3px）。壊れているのは【色】だけ。
     currentColor はボタンの文字色 ＝ --color-on-primary なので、
     濃色ネイビー・高彩度レッドのプリセットでは #ffffff になり、
     【白い枠を白に近い面タイルの上に描く】。
     実測（輪郭の実描画画素 vs 面タイルの地）:
       既定 18.07 / 淡色 18.43 / 濃色 1.10 / 高彩度 1.09  ← 後2者は WCAG 1.4.11 の 3:1 未達
   ★だから outline-color を1行差し替えるだけでよい。box-shadow のリングを新設しない。
     outline は強制配色でも描かれるので、【フォーカス側は】@media (forced-colors) の補修が
     最初から不要になる（hux-01 は box-shadow にしたぶん、フォーカスにも補修が要った）。
     実測（forced-colors: active / 1440px）: 本ルールの有無にかかわらず computed は
     solid 3px のまま ＝ 輪郭は描かれる。
   ★opacity の打ち消しはフォーカス側にも要る。キーボード操作でも
     :hover が同時に立つ（マウスを置いたままタブ移動した場合など）ことがあるため。
   ──────────────────────────────────────────────────────────────── */
.banner-cta-hux-02 .max-w-xl .mt-4 a.inline-block:focus-visible {
  outline-color: var(--color-heading-ink, var(--color-text));
  opacity: 1;
}

/* ────────────────────────────────────────────────────────────────
   4. 写真を器の下端まで届かせる
   ★この部品は「面タイル1枚 × 写真タイル2枚が同じガターで並ぶ」割り付けなので、
     写真側の高さが面タイルに揃わないと割り付けそのものが崩れる。
     ところが土台 hux-bind.css の .hux img{max-height:460px} は img だけを 460px で止めるのに、
     行の高さは面タイル側で決まる。実測（器の下端 - 写真の下端 / 同梱写真）:
       本文 6行  1024px  38.42px   1100px  39.78px
       本文12行  1024px 291.31px   1280px 176.58px   1440px 118.98px
     ＝ 本文が長いほど広がる。README に本文の字数上限は無い。
     （兄弟の hux-01 は同じ事象で 7.6px。面タイルの内側余白が lg:py-24 で厚いぶん本件は桁が違う）
   ★min-height は仕様上 max-height に優先する。行の高さを決める段階では百分率が未定なので、
     【行の高さを決める材料としての写真】には土台の 460px 上限がそのまま効く
     （＝ この宣言でセクションが背高になることはない。実測: 本文12行でも
      セクション高は 1024px 815.3 / 1280px 700.6 / 1440px 643.0 と受領時に 0.0px 差）。
     ただし【描画される写真の高さ】は行の高さに従うので 460px を超える
     （実測・本文12行: 1024px で 751.3px ＝ 土台の上限を 63% 超過）。
     土台が全 .hux に掛けている写真の上限を、このモジュールだけ実質的に外していることになる。
     「器の下に隙間を残す」か「上限を超えさせる」かの二択で後者を選んだ結果であり、
     土台側で img だけに上限を掛けている設計の問題として先方指摘に回してある（計画 §9-1-2）。
   ★取引を明記する: 器が縦に伸びるぶん object-fit: cover が余分に刈る。
     実測（同梱写真 1.833:1 / 受領時 -> 実装後）:
       本文 6行  1024px 27.0% -> 25.0%
       本文12行  1024px 27.0% -> 16.6%   1280px 34.6% -> 25.0%   1440px 39.4% -> 31.3%
     隙間を残すほうが「割り付けが崩れて見える」ので、刈られる側を採る。
     ★敵対的レビューの HIGH 指摘（2026-09-17）で数値を取り直した。当初は本文6行までしか
       振っておらず、代償を 3〜5倍過小に見積もっていた。
   ★媒体クエリを付けずに書き、縦積み側（下の 5）で min-height: 0 に戻している。
     以前は @media (min-width: 769px) で囲っていたが、その px と受領時の md:(48rem) が
     【ブラウザの既定フォントサイズを変えた環境でずれる】ので、打ち消し方式に変えた。
     こう書けば2つのブロックは定義上つねに厳密な補集合になる。
   ──────────────────────────────────────────────────────────────── */
.banner-cta-hux-02 .grid.grid-cols-2 img.w-full {
  min-height: 100%;
}

/* ────────────────────────────────────────────────────────────────
   5. 48rem（＝既定設定で 768px）以下 — ブレークポイントを統一し、必ず縦積みにする（R-6）
   ★受領時は md:(48rem = 768px) で2列化するので、768px【ちょうど】だけが
     「2列なのに .section の余白はモバイル側（3.5rem）」という状態になっていた。
     実測: 768px で主グリッドが 352px 352px の2列、テキスト列の内側は 256px、
     CTA ラベルの収容力は 10.6字で、14字のラベルが2行に折れる。
     ★兄弟の hux-01 は sm:(640px) 始まりで違反帯が 128px ぶんあったが、
       本件の違反は 768px の1点だけ。それでも 768px は規約の代表検査幅なので直す。
   ★媒体クエリの単位は px ではなく rem。48rem は既定設定では 768px ちょうどで、
     R-6 の「max-width: 768px に統一」と値は同じ。rem にしてあるのは、受領時の BP が
     全部 rem（sm: 40rem / md: 48rem / lg: 64rem）で、
     【メディアクエリの rem はブラウザの既定フォントサイズで解決される】ため。
     px で書くと、既定 20px の利用者の環境で md: が 960px から効くのに
     こちらは 768px で切れ、769〜959px が【どちらのブロックも当たらない帯】になる。
     実測（既定20px / px 版）: 768px は本文 block・比 1.500 なのに
     769px で本文が display:none に戻り比 2.253 へ飛んでいた（受領時はこの境界で連続）。
     rem にすると 768〜959px までこのブロックが伸びて連続する。
     敵対的レビューの MEDIUM 指摘（2026-09-17）を実測で確認して単位を変えた。
   ★写真グリッドは【2列のまま】にする。受領時は md: で1列（縦積み）に切り替わるので、
     ここを触らないと 767px（横2枚）→ 768px（縦2枚）で見え方が飛ぶ。
     ★ただし「767px の見え方をそのまま伸ばす」わけではない: 列数は 767px と同じになるが、
       面タイルの内側余白（md:p-12 = 48px / 767px は p-8 = 32px）と
       CTA 包みの margin-top（md:mt-8 = 32px / 767px は mt-4 = 16px）は md: 側のまま。
       ＝ 768px は「縦積みなのに余白は PC 側」という混成になる。
       実測で見比べて破綻していないので余白は受領時のままにした（意匠を動かさない）。
       敵対的レビューの MEDIUM 指摘（2026-09-17）を受けて記述を実測に合わせた。
   ★あわせて本文 p を見せる。受領時は class に hidden が付いており、
     639px 以下で computed display が none ＝ 顧客がフォームに入力した本文が
     スマホで1文字も出ない（実測 96/276 パターン）。README は本文を差し替え要素として明記している。
     ★境界は 639px だが、打ち消しは 768px の1本の媒体クエリにまとめてある
       （640〜768px では sm:block と同じ結果になるだけで害が無く、R-6 の
        「ブレークポイントは 768px に統一」に沿うため）。
   ★写真の固定高さ（h-40 = 160px / sm:h-56 = 224px）もここで比に置き換える（R-5）。
     固定 px だと器の実効比が幅の関数になり、実測で 320px の 0.850 から 639px の 1.847 まで
     動いたうえ 640px で 1.286 へ折り返す（＝ 幅を変えるだけで写真の切られ方が2度変わる）。
   ★aspect-ratio と max-height を併記したら width を必ず明示する。
     書かないと高さの上限が【幅の側】を縮めて構図が横にずれる。
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 48rem) {
  /* 主グリッドを1列に。(0,3,0) で @media (width >= 48rem) の .md\:grid-cols-2 (0,2,0) に勝つ。
     ★掴むクラスに【コロンを含むエスケープ名】を選ばない。
       triage の死にセレクタ判定は擬似クラスを剥がす正規表現を生の文字列に当てるので、
       .md\:grid-cols-2 のようなエスケープ名は無条件に「死にセレクタ」へ化ける。 */
  .banner-cta-hux-02 .grid.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  /* 写真グリッドは2列のまま（.md\:grid-cols-1 の打ち消し）。767px と同じ見え方を 768px まで伸ばす */
  .banner-cta-hux-02 .grid.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 本文を見せる。天の間隔は sm:mt-4 と同じ 16px にそろえる */
  .banner-cta-hux-02 .max-w-xl p.hidden {
    display: block;
    margin-top: calc(var(--spacing) * 4);
    /* ★折り返せない文字列（URL・ローマ字の社名/製品名）で【無音の切り落とし】が起きるのを防ぐ。
       土台 common.css の html,body{overflow-x:hidden; max-width:100%} のせいで
       document.scrollWidth は常に innerWidth と一致するので、横あふれの検査では出ない。
       実測（overflow-x:hidden のまま Range で実描画テキストの右端を測る / 本文にURL）:
         320px  +104.0px   390px  +34.0px
       65字の英単語では 320px +255.6px / 390px +185.6px。
       受領時は display:none だったので構造上起こり得なかった
       ＝【本文を出した結果、自分が新しく持ち込んだ欠陥】。敵対的レビューの HIGH 指摘。
       anywhere は min-content 幅も縮めるので、グリッド列を押し広げない
       （同バンドルの features-th23 / th28 と書き癖をそろえてある）。 */
    overflow-wrap: anywhere;
  }

  /* 写真: 固定高さをやめて比 + 上限へ。width を明示するのが要。
     ★比は 3/2。候補5案を 写真4比 × 幅12種 × ビューポート高11種 で総当たりして選んだ
       （object-fit: cover の残存率の【最悪値】で比較。平均ではなく最悪値を採る）:
         受領時  21.3%（パノラマ素材 × 320px）
         4/3     33.3%
         3/2     36.4%   ← 採用
         16/9    30.7%
         1/1     25.0%
       素材別の最悪値（3/2）: 横長 81.8% / パノラマ 37.5% / 縦長 36.4% / 正方 66.7%。
       3/2 は【器の比が全幅・全ビューポート高で 1.500 固定】になる唯一の案でもある
       （4/3 と 1/1 は 768px で max-height に当たって 1.467 へずれる）。
     ★max-height に vh を混ぜない。混ぜると器の実効比がビューポート高の関数になり、
       横向きスマホ（高さ 360〜430px）で受領時より悪い比を新しく作る
       （R-5 / 2026-09-17 追記。第一画面に収める要件はメインビジュアル限定で、
        ページ中程〜末尾のこの部品には掛からない）。受領時も vh を1つも持たない。
     ★240px は安全弁。768px 幅でも列は 352px なので高さは 234.7px にしかならず、
       この帯域では当たらない（＝実効比を動かさない）。R-5 の「上限を付ける」を
       満たしつつ比を固定するために、当たらない最小値の側に置いてある。 */
  .banner-cta-hux-02 .grid.grid-cols-2 img.w-full {
    width: 100%;
    height: auto;
    /* 上の min-height: 100% を打ち消す（縦積みでは器の高さが内容で決まるため） */
    min-height: 0;
    aspect-ratio: 3 / 2;
    max-height: 240px;
    object-fit: cover;
  }
}

/* ────────────────────────────────────────────────────────────────
   6. 動きを減らす設定
   ★止めるのは【動き】だけ。transform: none を広く当てない
     （transform で形を作っている擬似要素をグリフごと壊す事故の型）。
     この部品は擬似要素を1つも持たない（実測: 12要素 × ::before/::after すべて content: none）が、
     書き方はそろえる。
   ★出現演出の opacity は上の無条件宣言と common.css の reduce ブロックが
     どちらも「見える」側に倒してあるので、ここでは触らない。
   ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .banner-cta-hux-02.section.fade-in {
    transition: none;
    animation: none;
  }

  .banner-cta-hux-02 .max-w-xl .mt-4 a.inline-block {
    transition: none;
  }
}

/* ────────────────────────────────────────────────────────────────
   7. 印刷
   ★banner-cta-hux-02.css / _shared/common.css / _shared/hux-bind.css の3ファイルとも
     @media print が1件も無い（受領時からの持ち越し）。
     既定の print-color-adjust は economy なので背景の塗りが落ちる。
     この帯の CTA はブランド色ベタ塗りのボタンで、文字は --color-on-primary。
     濃色ネイビー・高彩度レッドのプリセットでは #ffffff なので、
     面が落ちると【白い紙に白いラベル】が残って CTA が丸ごと消える。
   ★やることは2つだけで、新しい意匠は足さない。
     (1) 前景を紙の色の対へ倒す。#fff / #000 の生値は【このバンドル共通の運用判断】
         （R-1 が明文で挙げている例外は「写真の上に乗る文字」と「黒スクリム」だけで、
          印刷の白黒は書かれていない。lint はベースライン差分判定なので通る）
     (2) 面が消えるぶんの輪郭を 1px の罫で補って、ボタンをボタンに見せる
   ★輪郭は border ではなく outline で描く。border だとボタンの矩形が膨らみ、
     「矩形は rest / hover / focus で完全に一致する」という本モジュールの性質が印刷だけ崩れる。
     outline は場所を取らない。
   ★ここで animation を打ち切らない。打ち切ると印刷プレビューを閉じて画面へ戻った瞬間に
     アニメーションが付け直され、4秒の遅延が最初から始まる（hux-01 で実測済み）。
     opacity 1 をここで宣言しておけば紙では必ず見えるので、animation は触らなくてよい。
   ──────────────────────────────────────────────────────────────── */
@media print {
  .banner-cta-hux-02.section.fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .banner-cta-hux-02 .bg-gray-100 {
    background-color: #fff;
  }

  .banner-cta-hux-02 .max-w-xl .text-gray-900,
  .banner-cta-hux-02 .max-w-xl .text-gray-700 {
    color: #000;
  }

  .banner-cta-hux-02 .max-w-xl .mt-4 a.inline-block {
    background-color: #fff;
    color: #000;
    border-color: #000;
    outline: 1px solid #000;
  }
}