/* features-hux-05.css — 写真+特大キャッチの2分割。旧 features-th04 の置き換え。
 * 設計:
 *  - モバイルファースト(既定=縦積み / 768px以上で2カラム)
 *  - 写真は器を aspect-ratio で確定させ object-fit:cover で敷く
 *    (旧 th04 は figure{height:100%} が 0 に潰れて写真が消えていた。器の高さを
 *     行から貰わない作りにして同じ壊れ方を構造的に防ぐ)
 *  - .lgx を付けない = float グリッドを継承しない
 *  - 見出しサイズ/本文サイズ/写真上限/コンテナ幅は _base/hux-bind.css が束縛する
 *
 * ── 2026-09-16 調整 ──────────────────────────────────────────────────────
 * 構図（左に 4:3 の大写真／右にキャッチ・補足・CTA を縦中央／間に大きなガター）は受領時のまま。
 * 意匠は1つも足していない。実測で出た欠陥だけを直した。
 *  1. 写真の器に width:100% を明示。aspect-ratio を持つグリッド項目は justify-self:normal が
 *     【start として振る舞う】ため、max-height:460px に当たった瞬間に幅が高さから逆算され
 *     (460×4/3=613.33px)、列幅より細くなって左詰めになっていた。
 *     実測（受領時）: 767px で列 735px に対し写真 613.3px ＝右に 121.7px の白帯／
 *     1280〜1920px で列 633.6px に対し 613.3px ＝溝が 64px ではなく 84.3px。
 *     README の「大きな写真の横に」が 645〜767px で成立していなかった。
 *     ★これは【白帯を消す代わりに器の実効比を可変にする取引】であることを明記しておく
 *       （罠13番「aspect-ratio + max-height は max-height に当たった後、幅が広がるほど
 *        実効比が伸び続ける」と対で読むこと）。実測: 1.333 固定 → 645〜767px で最大 1.598 /
 *       1280〜1920px で 1.377。cover の残存率は README が「横長推奨」と書く 1.833:1 の素材で
 *       72.7%→87.2%（改善）、縦長 3:4 の素材で 56.2%→46.9%（767px）・54.5%（1440px）と悪化する。
 *       ★それでもこちらを採る理由: max-height を外して 4:3 を守ると、土台の .hux img{max-height:460px}
 *        が img だけを 460px で止めるため【器の下に白帯】が出る（実測 767px で 91.3px・セクション +91.2px）。
 *        器を 16:10 にする案も 1440px で写真が 64px 縮んで受領時の量が崩れる。
 *  2. CTA の下線の打ち消しを詳細度 (0,3,1) で書き直した。common.css の
 *     `.section p a:not(.btn){text-decoration:underline}` は :not() の中の .btn も数えるため
 *     (0,2,2) あり、素朴な `.features-hux-05 .hux05-btn{text-decoration:none}` (0,2,0) では
 *     負ける。実測（受領時）: computed text-decoration-line が underline ＝丸ボタンに下線が出ていた。
 *  3. ボタンのホバーを opacity → リング（box-shadow）へ。opacity は要素を合成単位にするので
 *     面と文字が一緒に薄まる。実描画（ボタン内側を切り出して測定）で 4配色すべて低下し、
 *     高彩度プリセットは 4.85:1 → 4.498:1 と AA を割っていた。実装後は4配色とも通常値と同値。
 *     リングの色は --color-heading-ink（素背景との対比の最小が 6.65:1。primary 34% だと 1.18:1 で見えない）。
 *  4. 角丸は受領時のまま（999px / .5rem）。--radius / --radius-btn は空文字で届くため、
 *     ここだけトークン経由にすると【このモジュールだけ角丸が消える】。同梱の .hux 全本が
 *     同じ直値で書かれているので、パッケージ全体の話として先方へ指摘に回す（計画 §9-3）。
 *  5. .max-w-7xl / .py-8 の再宣言は受領時のまま。★理由を正確に書く（実測 2026-09-16）:
 *     ・769px 以上: common.css の .section{padding: 0}（テンプレートの値が空のまま届いている）。
 *       このとき縦余白 32px を出しているのは .py-8 【だけ】。フックどおり 0 にすると余白が消える。
 *     ・768px 以下: common.css:479 の @media(max-width:768px){.section{padding:3.5rem 0}} が効くので
 *       56px + 32px = 88px の【二重取り】になっている（＝ hux-bind が防ごうとした状態そのもの）。
 *     つまり受領時の書き方は PC で必要・SP で過剰。どちらに寄せても片方が壊れるので、
 *     同梱の .hux 全本と同じ受領時の書き方のまま据え置き、先方への指摘に回す（計画 §9-3）。
 * ─────────────────────────────────────────────────────────────────────────
 */
.features-hux-05 .mx-auto { margin-inline: auto; }
.features-hux-05 .max-w-7xl { max-width: 80rem; }
.features-hux-05 .px-4 { padding-inline: 1rem; }
.features-hux-05 .py-8 { padding-block: 2rem; }

.features-hux-05 .hux05-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}

/* 写真: 器の高さを比率で確定 + cover。行の高さに依存しない。
   ★width:100% を明示する。aspect-ratio と max-height だけだと、max-height に当たった瞬間に
     ブラウザが「高さから比率で逆算した幅」を採り、列幅より細くなる。
     さらに aspect-ratio を持つグリッド項目は justify-self:normal が start 相当になるので、
     細くなったぶんが右側の白帯として残る（2026-08-28 banner-cta-th27 / 2026-09-15 features-hux-08）。*/
.features-hux-05 .hux05-media {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 460px;
  overflow: hidden;
  border-radius: 0.5rem;
}
.features-hux-05 .hux05-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.features-hux-05 .hux05-catch { margin: 0 0 0.75em; line-height: 1.3; text-wrap: balance; }
.features-hux-05 .hux05-lead { margin: 0 0 1.5rem; }
.features-hux-05 .hux05-more { margin: 0; }

/* CTA: タッチ端末の最小タップ領域 44px を確保する */
.features-hux-05 .hux05-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.85em 2.5em;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  text-decoration: none;
  font-weight: 600;
}
/* ★下線の打ち消しは詳細度 (0,4,1) で書く。common.css の
   `.section p a:not(.btn){text-decoration:underline}` は :not() の中の .btn も詳細度に
   数えられて (0,2,2) あり、`.features-hux-05 .hux05-btn`(0,2,0) では負ける。
   a を足した (0,3,1) でも勝てるが、余裕がクラス1つ分しかない。土台が
   `.hux .section p a:not(.btn)` のように1段深くなると【また下線が出る】ので、
   祖先の .hux05-body を1つ挟んで (0,4,1) ＝ クラス2つ分の余裕にしておく。!important は不要。 */
.features-hux-05 .hux05-body .hux05-more a.hux05-btn { text-decoration: none; }
/* ★ホバーは面と文字の組（--color-primary / --color-on-primary）を変えない。
   ブランド色の明暗方向へ振ると --color-on-primary との組み合わせが保証外になるため
   （2026-08-24 banner-cta-th18）。合図は色以外＝リングで出す。
   opacity:1 は土台 common.css の a:hover{opacity:.8} を打ち消すために必須。
   ★リングの色は --color-primary ではなく --color-heading-ink。
     リングは面の【外側】＝素背景の上に描かれるので、ブランド色が淡い案件では地に沈む。
     実測（ボタンの外周2pxを実描画で切り出し、素背景との対比）:
       color-mix(primary 34%)  既定 1.41 / 淡色 1.18 / 濃色 2.08 / 高彩度 1.87 … 最小 1.18（見えない）
       primary 100%            既定 3.12 / 淡色 1.66 / 濃色 15.6 / 高彩度 4.85 … 最小 1.66
       color-mix(ink 55%)      既定 3.46 / 淡色 2.46 / 濃色 3.65 / 高彩度 3.19 … 最小 2.46
       ★var(--color-heading-ink) 既定 14.45 / 淡色 6.65 / 濃色 15.6 / 高彩度 7.32 … 最小 6.65
     --color-heading-ink は「primary が淡くても読める濃色」として用意されたトークンなので、
     どの配色でも WCAG 1.4.11 の 3:1 を満たす。color-mix() を使わないので
     非対応環境での計算値時点無効（＝リングが消える）も起こらない。
   ★ただし【面との対比】は配色で変わる（実測 リング色 vs ボタン面色）:
     既定 4.63 / 淡色 4.02 / 濃色 1.00 / 高彩度 1.51。
     濃色プリセットは --color-heading-ink と --color-primary が同値（どちらも #16233f）になるため、
     ホバーは「面の外に別色の輪が出る」ではなく「ボタンが 3px 大きくなる」に見える。
     それでも素背景（白）との対比は 15.60 あるので合図としては成立する。
     ＝「合図は素背景に対して出す」という設計であり、面に対する輪郭ではない。
   ★var() にフォールバックを付ける。--color-heading-ink が未定義の環境では
     box-shadow ごと計算値時点で無効になり【リングが無言で消える】（実測: computed が none）。
     生成サイトの common.css に定義が無い経路があることは hux-bind.css 自身が明記している。
     var(--color-text) なら常に定義されている（R-1 に触れない・生 hex を書かない）。
   ★:hover と :focus-visible を【別のルールに分けて書く】。セレクタリストに
     解釈できない疑似クラスが1つでも混ざると、CSS はそのルールを丸ごと捨てる。
     1本にまとめると :focus-visible 未対応の環境（Safari 15.4 未満）で
     ホバーの合図まで一緒に消える。
   ★キーボードフォーカス時に実際に見えるリングは 3px ではなく 2px（実測）。
     common.css:87 の :focus-visible{outline:3px solid currentColor; outline-offset:2px} が
     ボタンの外 2〜5px に後から描かれ、このリング（0〜3px）の外側 1px を覆うため。
     しかも currentColor は --color-on-primary なので、濃色・高彩度プリセットでは
     【白い outline が白い素背景の上】に出て見えない。2px 残るリングが唯一の合図になる。
     土台側の問題なのでモジュールでは打ち消さず、先方への指摘に回す（計画 §9-7）。
   ★詳細度は (0,4,1)。common.css:397 の .section p a:not(.btn) は (0,2,2) なので
     クラス2つ分の余裕がある（下線の打ち消しと同じ理由で .hux05-body を1つ挟む）。 */
.features-hux-05 .hux05-body .hux05-more a.hux05-btn:hover {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--color-heading-ink, var(--color-text));
}
.features-hux-05 .hux05-body .hux05-more a.hux05-btn:focus-visible {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--color-heading-ink, var(--color-text));
}

/* ★強制配色(Windows ハイコントラスト)では box-shadow が仕様上 none に強制されるので、
 *   上のリングだけだと【ホバーの合図が消える】。実測(rest→hover の実描画差・エミュレーション):
 *   1440px で 修正前 0 / 0.0% ＝ 合図が完全に消えていた → 修正後 255 / 11.9%。
 *   (forced-colors:none 側は 228 / 11.3% で修正の前後とも同値＝通常環境には一切影響しない)
 *   outline は強制配色でも描かれるので、この環境でだけ補う。矩形は動かない。
 *   :focus-visible は common.css:87 の outline が強制配色でも出るので、ここでは足さない。 */
@media (forced-colors: active) {
  .features-hux-05 .hux05-body .hux05-more a.hux05-btn:hover {
    outline: 3px solid currentColor;
    outline-offset: 3px;
  }
}

@media (min-width: 768px) {
  .features-hux-05 .px-4 { padding-inline: 1.5rem; }
  .features-hux-05 .hux05-grid { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 2.5rem; }
}
@media (min-width: 1024px) {
  .features-hux-05 .px-4 { padding-inline: 2rem; }
  .features-hux-05 .hux05-grid { gap: 4rem; }
}