/* features-th14.css — 見出し帯付きコンセプト。土台は module-base.css（旧テーマ族）。
 *
 * ── 2026-09-15 調整 ──────────────────────────────────────────────────────
 * 構図（全幅の写真帯＋帯に食い込む 左写真 × 右の本文列＋MORE 1本）は受領時のまま。
 * 新しい意匠（罫・面・枠・角丸・影）は1つも足していない。実測で出た欠陥だけを直した。
 *
 *  1. README の定義文「帯に食い込むように左の大きな写真を上へずらして重ねる」が
 *     876px 以上で成立していなかった。土台が「写真だけの列」を縦中央寄せのフレックスにするため、
 *     写真は器の中で自然サイズのまま中央に置かれ、上下に白帯が出ていた
 *     （実測: 標準の文章量で 85.8px ずつ、長文で 206.8px ずつ、全1728パターンの最大 245.3px）。
 *     帯の下端から写真の見えている上端までの実距離は 50.8〜160px あり、食い込みが視覚的にマイナスだった。
 *     写真を器いっぱいの cover にし、器の高さは【器自身の幅】から決める。
 *  2. 768〜875px で写真の 85〜90% が捨てられていた。旧テーマの絶対配置（左へ 40% ずらす）＋
 *     高さ 480px 固定が残っていたため（実測の可視率 768px=10.3% / 875px=15.0%、
 *     器の外へ上下 144px ずつはみ出し）。規約 R-5 違反でもあるのでブロックごと削除した。
 *     README 自身が「画像の位置調整が不要なら該当CSSブロックごと削る運用」と書いている。
 *  3. 土台が旧テーマ族のルートへ Arial を直書きしており、案件のフォント設定を遮断していた。
 *     本文とボタンの実 font-family が 1728/1728 パターンで Arial だった（規約 R-3）。
 *     ルート配下で書体を明示して継承を取り戻す。見出し（h2/h3）は土台の要素規則で既に届いている。
 *  4. 帯の文字が明るい写真で読めなかった。帯に敷いていた黒のスクリムが薄く、
 *     真っ白な写真を入れると英字も和文も実描画で 3.28:1（配色4種すべて・AA未達）。
 *     和文は小さい文字なので 4.5:1 が要る。濃度を【真っ白な写真】から逆算して引き上げた
 *     （実測: 0.42→3.28 / 0.50→4.29 / 0.54→4.61 / 0.56→4.95。0.56 を採用）。
 *     README のファイル表は images/ を「本番は自動生成写真に置換」と明記しているので明るい写真は必ず来る。
 *  5. MORE のホバーが実描画で AA を割っていた（既定 6.06→3.86 / 淡色 11.40→2.64）。
 *     土台がリンクのホバーに不透明度 .8 を掛け、さらにこの種のボタンのホバーで面を白へ反転させるため。
 *     面と文字の組は変えず、合図をリング（box-shadow）で出す。
 *  6. 文字サイズが全幅固定で、タイポスケールを経由していなかった（規約 R-4・R-6）。
 *     帯の英字 32px（375px でも 1920px でも同値）／帯の和文 14px ／小見出し 18・24px ／
 *     本文 22.4px ／ボタン 22.4・28.8px。すべてトークンへ載せ替えた。
 *  7. MORE ボタンが過大だった（PC で 150×65.3px・文字 28.8px）。旧テーマ族のルートの 1.4em と
 *     このボタンの 1.8rem が積み上がるため。本文サイズに揃え、タップ目標 44px を確保する。
 *  8. 版面が 1000px で頭打ちになり、1920px では左右に 460px ずつ余る「孤島」だった。
 *     写真が 480px しかなく「大きな写真」に見えない。★独自の幅は発明せず、
 *     サイト共通 common.css の .container と同じ数値にそろえる（他セクションと左右が1pxもズレない）。
 *  9. 768〜1080px で写真だけが痩せていた。本文列が 500px 固定・写真列が「残り全部」なので、
 *     版面のほうが先に狭くなると残り物である写真から削られる（実測: 768px で写真 206.6px に対し
 *     本文 500px ＝ 写真の取り分 29.2%）。受領時はこの帯域だけ写真を絶対配置で切り抜いて糊塗していた（欠陥2）。
 *     本文列に割合の下限を持たせ、広い側では README どおり 500px に落ち着かせる。
 * 10. 帯の左右に余白が1つも無く、長いキャッチが 375px で画面の端に触れていた（左右余白 0.1px）。
 *     帯は全幅のままにして、文字だけをサイト共通の版面の余白と同じ量だけ内側へ寄せた。
 * 11. ブレークポイントは 767px までのまま据え置く。土台の「写真だけの列を含む行」のフレックス化が
 *     768px 以上で効くので、768px へ寄せると 1px だけ両方が効いて崩れるため。
 * ─────────────────────────────────────────────────────────────────────────
 */
@charset "UTF-8";

.type02 :is(h2:where(:not([data-sm-h])),:where([data-sm-h="h2"])) {
  background: url(images/th14-bg-1.webp) no-repeat left top;
  background-size: cover;
  position: relative;
  text-align: center;
  display: block;
  color: var(--color-on-primary);
  padding: 65px 0;
  margin-bottom: 1em;
  font-size: 2rem;
}
.type02 :is(h2:where(:not([data-sm-h])),:where([data-sm-h="h2"])) span {
  display: block;
  font-size: 0.875rem;
}
.type02 :is(h2:where(:not([data-sm-h])),:where([data-sm-h="h2"])):before {
  content: "";
  display: block;
  border-bottom: solid 1px var(--color-primary);
  width: 30px;
  height: 1px;
  position: absolute;
  left: 50%;
  top: inherit;
  bottom: 25%;
  transform: translateX(-50%);
}
.type02 :is(h2:where(:not([data-sm-h])),:where([data-sm-h="h2"])):after {
  display: none;
}
.type02 .row {
  transform: translate(0, -55px);
  -webkit-transform: translate(0, -55px);
}
.type02 .row h3 {
  color: var(--color-heading-ink);
  padding-bottom: 0.3em;
  margin-bottom: 1em;
  font-size: 1.125rem;
}
.type02 .row h3:after {
  height: 1px;
  width: 100%;
  background: var(--color-text-muted);
}
.type02 .row .more {
  width: 100%;
}
.type02 .row .more a {
  width: 100%;
  text-align: center;
  padding: 0.8em 1.3em 0.8em 1em;
}
.type02 .row .type02_left_img {
  text-align: center;
}

@media (min-width: 768px) {
  .type02 :is(h2:where(:not([data-sm-h])),:where([data-sm-h="h2"])) {
    padding: 84px 0;
  }
  .type02 .row {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    padding: 0 1%;
  }
  .type02 .row h3 {
    font-size: 1.5rem;
  }
  .type02 .row .more {
    max-width: 150px;
    margin-left: 0;
  }
  .type02 .row .more a {
    padding: 0.2em 1.3em 0.2em 1em;
  }
  .type02 .row .type02_left_img {
    overflow: hidden;
    width: calc(100% - 500px);
    transform: translate(0, -75px);
    -webkit-transform: translate(0, -75px);
  }
  .type02 .row .type02_left_img img {
    max-width: none;
  }
  .type02 .row .type02_right_text {
    width: 500px;
    padding-left: 40px;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
  }
}
/* ★2026-09-15 削除: 768〜875px の「写真を絶対配置で左へ 40% ずらし、器の高さを 480px に固定する」
   ブロックを丸ごと外した。実測で写真の可視率が 10.3〜15.0% しかなく（器の外へ上下 144px ずつはみ出し）、
   高さの固定 px は規約 R-5 にも反していた。README 自身が「画像の位置調整が不要なら
   該当CSSブロックごと削る運用」と書いている箇所。 */

/* SM-FIX2-20260819 */
/* 2026-08-19: 見出し h2 の背景が写真(url)なのに、文字が var(--color-on-primary)
   （実サイトの大半で #111111）で写真に埋もれていた。
   inset box-shadow をスクリムに使う（背景画像の上・文字の下に描かれるので、
   マークアップを変えずに写真だけを暗くできる）。 */
.type02 :is(h2:where(:not([data-sm-h])),:where([data-sm-h="h2"])){
  color: #fff;
  background-size: cover; background-position: center;
  /* ★2026-09-15: 濃度を 0.42 から引き上げた。真っ白な写真で英字も和文も実描画 3.28:1 しか出ず、
     小さい和文（4.5:1 が必要）が配色4種すべてで AA 未達だった。
     最悪ケース（真っ白な写真）から逆算した実測値: .42→3.28 / .50→4.29 / .54→4.61 / .56→4.95。 */
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,.56);
}
.type02 :is(h2:where(:not([data-sm-h])),:where([data-sm-h="h2"])) span{ color: #fff; }
.type02 :is(h2:where(:not([data-sm-h])),:where([data-sm-h="h2"])):before{ border-bottom-color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   2026-09-15 調整（ファイル冒頭のコメントに対応）
   ══════════════════════════════════════════════════════════════════════════ */

/* ① フォント遮断の解除（欠陥3）
   土台が旧テーマ族のルートへ Arial を直書きしているため、案件の書体設定が本文とボタンへ
   1文字も届いていなかった。ルート自身で本文書体を明示して継承を取り戻す（規約 R-3）。
   見出し（h2 / h3）はサイト共通CSSの要素規則で既に見出し書体が届いているので触らない。 */
.lgx.type02 {
  font-family: var(--font-body);
}

/* ② 文字サイズをタイポスケールへ載せ替える（欠陥6・7 / 規約 R-4・R-6）
   受領時は帯の英字が 375px でも 1920px でも 32px、本文が 22.4px、ボタンが 28.8px だった。 */
.lgx.type02 :is(h2:where(:not([data-sm-h])),:where([data-sm-h="h2"])) {
  font-size: var(--fs-h2);
  /* 帯の左右に余白が1つも無く、長いキャッチが 375px で画面の端に触れていた
     （実測の左右余白: 受領時 0.1px / 文字サイズを載せ替えた直後も 0.0px）。
     帯は全幅のままにして、文字だけをサイト共通の版面の余白と同じ量だけ内側へ寄せる。 */
  padding-inline: clamp(1rem, 4vw, 3rem);
}
.lgx.type02 :is(h2:where(:not([data-sm-h])),:where([data-sm-h="h2"])) span {
  font-size: var(--fs-small);
}
.lgx.type02 .row h3 {
  font-size: var(--fs-mod-title);
}
.lgx.type02 .type02_right_text p {
  font-size: var(--fs-body);
}

/* ③ MORE ボタン（欠陥5・7）
   サイズは本文に揃え、タップ目標 44px を確保する（WCAG 2.5.8 の 24px より実務基準の 44px を採る）。
   lint の R5-height 警告を許容する: これは写真枠の高さではなくタップ目標の下限であり、
   器の縦横比に影響しないので aspect-ratio では書けない。 */
/* 土台はこの器を「はみ出しを刈る箱」にしている（旧テーマの回り込み解除の名残）。
   中身はフロートを1つも持たないので刈る必要がなく、刈ったままだとホバーのリングが
   器の縁で切り落とされて合図が出ない。 */
.lgx.type02 .row .more {
  overflow: visible;
}
.lgx.type02 .row .more a {
  font-size: var(--fs-body);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
}
/* ★ホバー・フォーカスで面と文字の組（primary / on-primary）を変えない。
   不透明度と明度フィルタの打ち消しは、土台のリンクホバー（不透明度 .8）と
   この種のボタンのホバー（面を白へ反転）を無効化するために必須。
   どちらも面と文字を一緒に薄くするので、実描画のコントラストが落ちていた
   （既定 6.06→3.86 / 淡色 11.40→2.64）。合図は色以外＝リングで出す。 */
.lgx.type02 .row .more a:hover,
.lgx.type02 .row .more a:focus-visible {
  opacity: 1;
  filter: none;
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 34%, transparent);
}
/* 矢印は土台が右へ 1% 動かす微小な合図を持っている（矩形は動かない）。受領時の挙動なので残し、
   色だけ面に合う可読色へ戻す（土台はブランド色の暗い版に振るため、面の上でほぼ見えなくなる）。 */
.lgx.type02 .row .more a:hover:after,
.lgx.type02 .row .more a:focus-visible:after {
  border-top-color: var(--color-on-primary);
  border-right-color: var(--color-on-primary);
}

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

@media (prefers-reduced-motion: reduce) {
  .lgx.type02 .row .more a,
  .lgx.type02 .row .more a:after {
    transition: none;
  }
}

/* ④ 版面をサイト共通のものにそろえる（欠陥8）
   土台の旧テーマ版面は 1000px で頭打ちになり、1920px では左右に 460px ずつ余る「孤島」だった。
   ★独自の幅は発明しない。数値はサイト共通CSSの .container（最大 1440px ／
   左右 clamp(1.25rem, 4vw, 3rem)）と同値にそろえてあるので、他セクションと左右が1pxもズレない。
   行の 1% は版面の余白と二重取りになるので外す。
   ★SP（767px以下）へ漏らさない。旧テーマは SP 側に別の余白を持っている。 */
@media (min-width: 768px) {
  .type02 .container {
    max-width: 1440px;
    padding-left: clamp(1.25rem, 4vw, 3rem);
    padding-right: clamp(1.25rem, 4vw, 3rem);
  }
  .type02 .row {
    padding: 0;
  }
}

/* ⑥ 2カラムの分け方（欠陥1の続き）
   受領時は本文列が 500px 固定・写真列が「残り全部」だった。版面が広い側ではこれで成立するが、
   768〜1080px では版面のほうが先に狭くなるので、残り物である写真だけが痩せる
   （実測: 768px で写真 206.6px に対し本文 500px ＝ 写真の取り分 29.2%。README が言う「大きな写真」に
   ならない）。受領時はこの帯域だけ写真を絶対配置で 480px の縦長に切り抜いて糊塗していた（欠陥2）。
   ★下限を割合で持たせ、広い側では README どおり 500px に落ち着かせる。
   写真の取り分は 1080px 未満で 54% 一定になり、以降は版面の拡大がそのまま写真に乗る
   （実測の写真幅: 768px=381.5 → 876px=435.2 → 1024px=508.7 → 1280px=684 → 1440px以上=844。単調増加）。 */
.lgx.type02 {
  --th14-text-col: min(500px, 46%);
}
@media (min-width: 768px) {
  .lgx.type02 .row .type02_right_text {
    width: var(--th14-text-col);
  }
  .lgx.type02 .row .type02_left_img {
    width: calc(100% - var(--th14-text-col));
  }
}

/* ⑦ 写真を器いっぱいに満たす（欠陥1）
   ★器の高さは【器自身の幅】から決める。本文量に追従させると、文章が長い案件で器が縦長へ倒れ、
   中央クロップが写真の左右を大きく捨てる（既知の罠）。比率を固定すれば実効比は幅によらず一定になり、
   どの案件でも同じ見え方になる。
   16:9 を採るのは、受領時の実効比 1.833 にいちばん近く（差 3%）、かつサイト共通CSSが
   写真に使っている比率と同じだから。「白帯を消す」以外の見た目の変化を持ち込まない。 */
@media (min-width: 768px) {
  .type02 .row .type02_left_img {
    /* 器を行の高さまで引き伸ばさない。写真は帯の下端からぶら下がる（＝食い込みが見える）。 */
    align-self: flex-start;
  }
  .type02 .row .type02_left_img img {
    width: 100%;
    height: auto;
    /* サイト共通CSSが内容画像へ掛けている高さ上限は「高さが intrinsic な画像」向け。
       器の比率で高さが決まる cover 画像では器より先に蓋が当たるので外す。 */
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    /* README が「横長で中央に主題の無い素材が向く」と書いているので中央のまま。 */
    object-position: center;
  }
}

/* ⑧ SP（縦積み）
   ★768px へ寄せない。土台の「写真だけの列を含む行」のフレックス化が 768px 以上で効くので、
   境界を 768px にすると 768px ちょうどで両方が効いて 1px の窓で崩れる。 */
@media (max-width: 767px) {
  .type02 .row .type02_left_img img {
    width: 100%;
    height: auto;
    max-height: none;
    /* 縦位置の写真が割り当てられても帯が伸び続けないよう、SP でも器の比率を決めておく
       （受領時の実効比 1.833 に最も近い 16:9 を採るので、見た目はほぼ変わらない）。 */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
  }
}