/* features-th04.css — 左写真+特大見出し2分割。土台は module-base.css（旧テーマ族）。
 *
 * ── 2026-09-15 調整 ──────────────────────────────────────────────────────
 * 構図（左右 50/50・隙間ゼロ・左が写真・右がコピー縦中央・丸ボタン1本）は受領時のまま。
 * 新しい意匠（罫・面・枠・影・スクリム）は1つも足していない。実測で出た欠陥だけを直した。
 *
 *  1. 写真が器を満たさず、上下に白帯が出ていた（768px で 215.6px ずつ / 1280px で 126px ずつ /
 *     1830px 未満の全幅で発生）。旧テーマの top:-300%/bottom:-300% 中央クロップは
 *     「画像が器より大きい」前提だが、土台 common.css が画像を器幅まで縮める指定（最大幅 100%・高さ自動）を持つため
 *     成立していなかった。器を満たす cover へ置き換える。
 *     README の定義文「縁まで届く大きな写真」はこれで初めて実装される。
 *  2. テキスト列の height:700px 固定をやめた。中身が絶対配置で列の内容高が 0 だったため、
 *     文章が増えても器が伸びず、768px＋長いキャッチ＋和文本文で上下 52.5px ずつはみ出し、
 *     逆に短いキャッチでは上下 142.7px ずつが空いていた（規約 R-5）。
 *     中身を通常フローへ戻し、列を flex で縦中央にして min-height で背の低さだけを防ぐ。
 *  3. 実効テキスト幅が版面の 36.5%（列の 73% を絶対配置）しかなく、11字のキャッチが
 *     1280px でも 2行に割れていた。TECH_STACK が明記する下限 44% 割れ。列の padding で作り直す。
 *  4. キャッチが全幅で 42px 固定だった（375px でも 1920px でも同じ／規約 R-4・R-6）。
 *     列幅に追従する clamp にし、上限はタイポスケールのトークンに預ける。
 *  5. ボタンのホバーが実描画で AA を割っていた（既定 6.06→3.87 / 高彩度 4.85→3.93）。
 *     土台がリンクのホバーに不透明度 .8 を、ボタンのホバーに明度 .9 のフィルタを掛けており、面と文字を一緒に
 *     薄くするため。面と文字の組は変えず、合図をリング（box-shadow）で出す。
 *  6. 土台が旧テーマ族のルートへ Arial を直書きしており、案件のフォント設定を遮断していた。4プリセットすべてで
 *     実 font-family が Arial だった（規約 R-3）。ルート配下で書体を明示して継承を取り戻す。
 *  7. ボタンが 332.8×76.8px・文字 25.6px と過大だった（旧テーマ族のルートが 1.4em、大ボタンが 1.6rem を持つための膨張）。本文サイズに揃え、
 *     タップ目標 44px を確保する。角丸は README が「丸ボタン」と定義しているので維持する
 *     （角丸トークンは空文字で届くため、経由すると角丸が消えて定義文が満たせない）。
 *  8. ブレークポイントは 767px までのまま据え置く。土台が「写真だけの列を含む行」を
 *     768px 以上でフレックス化しており、768px へ寄せると 1px だけ両方が効いて崩れるため。
 * ─────────────────────────────────────────────────────────────────────────
 */
@charset "UTF-8";

/* ★土台 module-base.css が旧テーマ族のルートへ Arial を直書きし、案件のフォント設定を遮断する。
   ルート配下で本文書体を明示して、テーマからの継承を取り戻す（規約 R-3）。 */
._th04_module {
  font-family: var(--font-body);
}

/* ── 左: 写真 ─────────────────────────────────────────────────────────── */
._th04_module ._th04_module_img {
  position: relative;
}
._th04_module ._th04_module_img figure {
  position: relative;
  /* ★高さ 100% を明示する。列は土台のフレックス化で行の高さいっぱいに伸びるので、
     ここが auto だと絶対配置の写真が高さを失う。 */
  height: 100%;
  overflow: hidden;
}
._th04_module ._th04_module_img figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 土台 common.css が画像へ掛けている 800px の高さ上限は「高さが intrinsic な内容画像」向け。
     器の高さで決まる cover 画像では器より先に蓋が当たるので外す。 */
  max-height: none;
  object-fit: cover;
  /* README が「主題が中央にある素材を渡すこと」と明記しているので中央のまま。 */
  object-position: center;
}

/* ── 右: テキスト ─────────────────────────────────────────────────────── */
._th04_module ._th04_module_text {
  position: relative;
  /* ★固定 height をやめる。文章量が増えたら列のほうが伸びる（規約 R-5）。
     min-height は「文章が短い案件で写真が痩せすぎない」ための下限だけを担う。 */
  height: auto;
  /* 下限は器の幅に連動させる。固定の 600px だと狭い画面で列が縦長になりすぎ、
     写真の実効比が 0.64（縦長）まで倒れて中央クロップで左右が大きく切れた。 */
  min-height: min(72vh, clamp(400px, 44vw, 620px));
  display: flex;
  align-items: center;
  padding-block: clamp(28px, 3.2vw, 56px);
  /* 実効テキスト幅はここで作る。受領時の「列の 73% を絶対配置」は版面の 36.5% にしかならず、
     TECH_STACK の下限 44% を割っていた。 */
  padding-inline: clamp(20px, 3vw, 100px);
}
._th04_module ._th04_module_text_inner {
  /* 通常フローへ戻す。縦の中央揃えは列側の flex が取る。 */
  position: static;
  transform: none;
  width: 100%;
  /* 広い画面では受領時と同じくらいの行長に留めて中央に置く（受領時の実効幅 1920px=700.8px）。
     狭い画面では列の padding だけが効くので、ここは頭打ちの役だけを担う。 */
  max-width: 44rem;
  margin-inline: auto;
}
._th04_module ._th04_module_text_inner p {
  line-height: 1.3;
  font-size: var(--fs-body);
}
._th04_module ._th04_module_text_inner p.text-xlarge {
  font-family: var(--font-heading);
  /* 列幅は常に版面の半分なので vw で追従できる。上限はタイポスケールのトークンに預ける。 */
  font-size: clamp(1.6rem, 3.4vw, var(--fs-hero-md));
}
._th04_module ._th04_module_text_inner p a.button {
  display: inline-block;
  /* 余白はスケールから選ぶ（受領時は margin-top:8% で、器の幅しだいに 26.6〜56px と振れていた）。 */
  margin-top: var(--space-lg);
  padding: 0.95em 3.4em;
  /* lint R5-height の警告を許容する: これは写真枠の高さではなく、タップ目標の下限
     （WCAG 2.5.8 / 24px 以上、実務基準 44px）。器の比率に影響しないので aspect-ratio では書けない。 */
  min-height: 44px;
  /* README が「丸ボタン」と定義している。角丸トークンは空文字で届くため経由しない。 */
  border-radius: 25px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--fs-body);
  line-height: 1.5;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}
/* ★ホバー・フォーカスで面と文字の組（primary / on-primary）を変えない。
   opacity と filter の打ち消しは、土台のリンクホバー（不透明度 .8）とボタンホバー（明度 .9）を
   無効化するために必須。どちらも要素を合成単位にするので、面と文字が一緒に薄くなり
   実描画のコントラストが落ちていた。合図は色以外＝リングで出す。 */
._th04_module ._th04_module_text_inner p a.button:hover,
._th04_module ._th04_module_text_inner p a.button:focus-visible {
  opacity: 1;
  filter: none;
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 34%, transparent);
}

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

@media (prefers-reduced-motion: reduce) {
  ._th04_module ._th04_module_text_inner p a.button {
    transition: none;
  }
}

/* ── SP: 縦積み ───────────────────────────────────────────────────────── */
/* ★768px へ寄せない。土台のフレックス化が 768px 以上で効くので、境界を 768px にすると
   768px ちょうどで両方が効いて 1px の窓で崩れる。 */
@media (max-width: 767px) {
  ._th04_module ._th04_module_img,
  ._th04_module ._th04_module_img figure {
    position: relative;
    width: 100%;
    height: auto;
  }
  ._th04_module ._th04_module_img figure {
    /* 縦位置の写真が来ても帯が伸び続けないよう、SP は器の比率を決めておく
       （受領時の実効比 1.429 に近い 1.5 を採り、見た目は変えない）。 */
    aspect-ratio: 3 / 2;
  }
  ._th04_module ._th04_module_text {
    min-height: 0;
    display: block;
    padding: 8% 6%;
  }
  ._th04_module ._th04_module_text_inner {
    width: 100%;
  }
  ._th04_module ._th04_module_text_inner p.text-xlarge {
    /* ★モバイルは PC より小さく（規約 R-6）。受領時は 375px でも 42px のままだった。 */
    font-size: clamp(1.6rem, 6.6vw, 2.2rem);
  }
  ._th04_module ._th04_module_text_inner p a.button {
    margin-top: var(--space-md);
    padding: 0.95em 2.6em;
  }
}