/* banner-cta-th02.css — ベースライン(自動読込・module-base.css前提)。編集せず上書きで調整。 */
@charset "UTF-8";

._th02_module .container .row .col ._th02_module_text p a {
  text-decoration: none;
  position: relative;
  display: inline-block;
}
._th02_module .container .row .col ._th02_module_text p a:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 5%;
  margin: auto;
  width: 4px;
  height: 4px;
  border-top: 1px solid var(--color-primary);
  border-right: 1px solid var(--color-primary);
  -webkit-transform: translate(0, -50%) rotate(45deg);
  transform: translate(0, -50%) rotate(45deg);
  transition: 0.2s;
}
._th02_module .container .row .col:hover ._th02_module_text a:after {
  right: 0;
}
@media (min-width: 768px) {
  ._th02_module .container .row figure {
    position: relative;
  }
  ._th02_module .container .row figure:after {
    transition: 0.3s;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
    opacity: 0;
    z-index: -1; color: var(--color-on-primary); }
  ._th02_module .container .row figure:hover:after {
    transition: 0.3s;
    opacity: 1;
  }
  ._th02_module .container .row figure a {
    height: 100%;
    display: block;
  }
  ._th02_module .container .row figure a img {
    position: relative;
    z-index: -1;
  }
  ._th02_module .container .row ._th02_module_text p {
    padding: 0.8em 0 0;
  }
  ._th02_module .container .row ._th02_module_text p a {
    padding: 0 23px 0 0;
  }
}
@media (max-width: 999px) and (min-width: 768px) {
  ._th02_module .container {
    padding: 0 4%;
  }
}
@media (max-width: 767px) {
  ._th02_module .container {
    padding: 0 4%;
  }
  ._th02_module .container .row .col {
    background: var(--color-surface);
    height: 80px;
    position: relative;
  }
  ._th02_module .container .row .col figure {
    height: 100%;
    float: left;
  }
  ._th02_module .container .row .col figure a {
    height: 100%;
    width: 100%;
    position: absolute;
    text-align: left;
  }
  ._th02_module .container .row .col figure a:after {
    transition: 0.3s;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
    opacity: 0;
    z-index: -1; color: var(--color-on-primary); }
  ._th02_module .container .row .col figure a:hover:after {
    opacity: 1;
    transition: 0.3s;
  }
  ._th02_module .container .row .col figure a img {
    height: 100%;
    position: relative;
    transition: 0.5s;
    z-index: 0;
  }
  ._th02_module .container .row .col ._th02_module_text {
    min-height: 100% !important;
    float: left;
    display: table;
  }
  ._th02_module .container .row .col ._th02_module_text p {
    display: table-cell;
    vertical-align: middle;
    padding: 0 1em 0 150px;
  }
  ._th02_module .container .row .col ._th02_module_text p a {
    position: static !important;
  }
  ._th02_module .container .row .col:hover ._th02_module_text a:after {
    right: 1% !important;
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  body.two_column ._th02_module .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0;
  }
}

/* SM-FIX4-20260819 */
/* 2026-08-19: 768px 以上で【写真が1枚も表示されない】。
   .row figure a img に z-index:-1 が入っており、figure(position:relative / z-index:auto)は
   スタッキングコンテキストを作らないため、img が祖先(section/body)の背景の【裏】へ回り、
   完全に隠れていた。元テーマの意図はホバー時の色被せ(figure:after)を画像より前に出すこと
   だが、その :after も z-index:-1 なので同じ理由で成立していない。
   img を通常の重なり順に戻し、色被せを画像の上へ置く。 */
@media (min-width: 768px){
  ._th02_module .container .row figure{ overflow: hidden; }
  ._th02_module .container .row figure a img{ position: relative; z-index: auto; }
  ._th02_module .container .row figure:after{ z-index: 1; }
}

/* SM-FIX6-20260819 */
/* 2026-08-19(2): 写真は出るようになったが 4 枚の縦横比がバラバラで、
   ラベルの位置が段違いになっていた。比率を揃える。 */
._th02_module .container .row figure{ margin: 0; }
._th02_module .container .row figure a img{
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}

/* SM-FIX9-20260819 */
/* 2026-08-19(E2E): aspect-ratio を足した img が高さ0になる。
   common.css の `main img:not([class]){height:100%}` が効いており、
   【明示 height は aspect-ratio に勝つ】ため、親の高さが決まらない場面で 0px に解決される。
   実害: news-post-th34 で写真6枚が 212x0 になり消えた(実生成サイトで検出)。
   aspect-ratio を使う画像には必ず height:auto を併記する。 */
@media (min-width: 768px){ ._th02_module .container .row figure a img{ height: auto; } }

/* ============================================================================
   SM-DESIGN-20260821 — デザイン実装（04_banner-cta-th02）
   計画: .company/engineering/plans/banner-cta-th02-plan.md
   ブリーフ: .company/creative/briefs/banner-cta-th02-brief.md
   骨格確定型のため CSS のみ。class 名・DOM 構造・要素の増減・並べ替えは一切していない。
   既存行は1行も書き換えず、この末尾ブロックだけで上書きする。

   受領時の実測（6幅 × 配色4 × フォント4 × ラベル長3 = 288 パターン）で見つけた欠陥:
     1. SP(767px以下)で【カテゴリ名が1文字も描画されない】…48/48 パターン
     2. PC の列間ギャップが 0px で、4枚の写真が1枚の横長写真に見える
     3. 土台の .lgx｛font-family:Arial…｝ が勝ち、サイトのフォント設定が1度も届かない
        ※このブロックのコメント内の CSS 例は、検査ツールがコメント本文を「セレクタ」として
          拾ってしまうため、波かっこを全角にしてある。
     4. モジュール名が謳う「正方形写真」がどの幅でも正方形でない（4:3 / 4.3:1 / 8.8:1）
     5. シェブロン(唯一のリンク合図)が淡色プリセットで 1.66:1 になり消える
     6. 1920px で版面 1000px の孤島になり、左右に 460px ずつ余る
     7. ホバーのマスクが淡色 × 明るい写真で読めない（README 自身の注意書き）
     8. prefers-reduced-motion の指定が無い
   ============================================================================ */

/* --- 地の面と寸法のトークン --------------------------------------------------
   ★地は【色相ではなく明度】で作る。ブランド色を薄めた面(--color-surface = primary 5%)は
     淡色ベージュ案件でほぼ白に沈み、高彩度レッド案件では逆にピンクが立つ
     （anti-patterns「ブランド色を薄めたティント面は、案件によって『消える』か『立ちすぎる』」）。
     --color-text は本文が読める必要から --color-bg と必ず十分な明度差を持つので、
     そこから混ぜれば【どの配色でも地より一段だけ落ちた面】になる。
   ★角丸・影は使わない。--radius / --shadow は値が空で届くため（規約 §11-2）、
     生値で書くと「1社だけ角丸が違う」事故になる。意匠は面と余白だけで作る。         */
._th02_module{
  /* 濃度は ⑤-2 で 0% / 7% / 11% / 16% を 1920px に並べて選んだ。0% は受領時と同じ「白い虚無」に戻り、
     16% は灰色の箱になって写真と競る。11% がガターを「地が見えている」と読ませる最小の量。 */
  --th02-ground: color-mix(in srgb, var(--color-text) 11%, var(--color-bg));
  /* ガターは列幅の約10%（design-patterns「『3枚である』ことは、ガターを列幅の約10%にすると伝わる」
     の4列版）。実測: 1920px で 32/312 = 10.3% / 1280px で 32/278 = 11.5% / 768px で 15/166 = 9.0%。 */
  --th02-gap:    clamp(0.875rem, 2vw, 2rem);
  /* ホバーのマスク: ブランド色をいったん黒側へ寄せてから敷く。素の primary 50% だと
     淡色プリセット(#d9c7a7)を明るい写真に重ねてもほとんど変化が出ない（欠陥7）。 */
  --th02-veil:   color-mix(in srgb, var(--color-primary) 58%, #000);
  /* 帯はセクション全幅。版面(.lgx .container の 1000px)を広げずに 1920px の間延びを解く。
     ※本番で engine がこの section に .bg-alt を付けた場合は common.css の
       main > section.bg-alt｛background:var(--color-surface)!important｝ が勝つが、
       その場合も「地の帯に正方形の窓が抜ける」構図は保たれる。 */
  background: var(--th02-ground);
}

/* --- ラベル（カテゴリ名1語）------------------------------------------------- */
/* 欠陥3: 土台 .lgx｛font-family:Arial,…｝(0,1,0) が body｛font-family:var(--font-body)｝(0,0,1)に
   勝ち、モジュールは Arial 22.4px 固定で描画されていた（288 パターンで不変）。
   1語のカテゴリ名は「モジュール内の小見出し」なので --font-heading / --fs-mod-title を当てる。 */
._th02_module .container .row .col ._th02_module_text p a{
  font-family: var(--font-heading);
  font-size: var(--fs-mod-title);
  line-height: 1.35;
  color: var(--color-text);
}
/* 欠陥5: シェブロンは唯一のリンク合図なのに border-color:var(--color-primary) で、
   淡色プリセットでは白地に対し 1.66:1（WCAG 1.4.11 の非テキスト基準 3:1 に未達）。
   「見出し・下線・リンクの濃色」である --color-heading-ink へ寄せると
   4配色で 14.45 / 6.65 / 15.60 / 7.32 となり全て 3:1 を超える。 */
._th02_module .container .row .col ._th02_module_text p a:after{
  border-top-color:   var(--color-heading-ink);
  border-right-color: var(--color-heading-ink);
}

/* --- PC: 正方形4枡の一列 ----------------------------------------------------
   ★ブレークポイントは【土台と受領時の CSS に合わせて 767/768】を使う。
     lint の R6-bp は ⚠ 止まり。ここで min-width:769px を使うと、受領時の
     @media(min-width:768px) だけが当たる 768px ちょうど（検収幅の1つ）で
     段組みが float に戻り、ガターと正方形が消える。理由があって 768 を使う。   */
@media (min-width: 768px){
  /* 欠陥6: 版面が .lgx .container の 1000px 固定で、1920px では左右に 460px ずつ余り、
     写真1枚が 250px しかない「孤島」になっていた（写真が主役の部品なのに写真が小さい）。
     ★数値は common.css の .container（max-width:1440px / padding:0 clamp(1.25rem,4vw,3rem)）に
       そろえる。サイトの他セクションと左右の版面が1pxもズレないのが狙いで、
       独自の幅を発明しているわけではない。768〜999px では 4vw = 受領時の 4% と実測で同値。
     実測: 正方形1枚 1920px で 250 → 312px / 1280px で 232 → 278px。 */
  ._th02_module .container{
    max-width: 1440px;
    padding-left:  clamp(1.25rem, 4vw, 3rem);
    padding-right: clamp(1.25rem, 4vw, 3rem);
  }
  /* 欠陥2: .lgx は .gutters が付いていないとガターを持たない（列間 0.0px 実測）。
     DOM を触らずに float グリッドを flex へ置き換える定型
     （design-patterns「float グリッド（.lgx）の列の高さを、DOM を触らずに揃える」）。 */
  ._th02_module .container .row{
    display: flex;
    align-items: stretch;
    gap: var(--th02-gap);
  }
  /* 土台の clearfix .lgx .row:after｛content:"";display:table｝ は5個目の flex アイテムになる */
  ._th02_module .container .row:after{ display: none; }
  ._th02_module .container .row > .col{
    float: none;
    flex: 1 1 0;     /* .span_3 の 25% は gap を引く前の値なので、等分し直す */
    width: auto;
    min-width: 0;
  }
  /* 欠陥4: モジュール名が謳う「正方形写真」を実装する（受領時は SM-FIX6 の aspect-ratio:4/3）。
     height を必ず明示する — 本番では common.css の main img:not([class])｛height:100%｝ が
     効くため、height を書かないと親の高さが不定な場面で 0px に解決される（SM-FIX9 と同型）。 */
  ._th02_module .container .row figure a img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  /* 欠陥7: マスクを黒側へ寄せた色で敷き直す。濃度は白い写真・黒い写真の両極 × 配色4種で逆算した値。 */
  ._th02_module .container .row figure:after{
    background-color: color-mix(in srgb, var(--th02-veil) 42%, transparent);
  }
  /* 受領時はマスクの引き金が figure:hover だけで、ラベルに乗せても写真が反応しなかった
     （矢印は .col:hover で動くので、同じカードなのに反応がちぐはぐ）。カード単位にそろえる。
     :focus-within でキーボード操作にも合図を出す（R-9）。 */
  ._th02_module .container .row .col:hover figure:after,
  ._th02_module .container .row .col:focus-within figure:after{ opacity: 1; }
  /* ラベルの上の余白を余白スケールから取る（受領時は 0.8em の相対値） */
  ._th02_module .container .row ._th02_module_text p{ padding: var(--space-sm) 0 0; }
}

/* --- SP: 写真左・文字右の横並びリスト（README の定義文を実装する）--------------
   欠陥1: 受領時は figure a｛position:absolute;width:100%;height:100%｝ がカード全面へ広がり、
   その中の img｛position:relative;z-index:0｝ がスタッキングコンテキストを作るため、
   非配置のインライン内容であるラベル文字より【後】に描画されていた。
   結果、375px / 767px の 48/48 パターンでカテゴリ名が1文字も見えない
   （elementsFromPoint の先頭が常に <img>）。さらに .col｛height:80px｝ の固定と
   メディアクエリ外の width:100% が噛み合い、写真は 4.31:1 / 8.82:1 の帯へ潰れていた。 */
@media (max-width: 767px){
  ._th02_module .container .row .col{
    display: flex;
    align-items: center;
    gap: var(--th02-gap);
    height: auto;             /* 受領時の height:80px を外す（R-5。写真が潰れる原因） */
    background: transparent;  /* 面は「地」1枚だけにする。札を足さない */
    position: relative;
  }
  /* .col を flex にすると土台の clearfix .lgx .col:after が3つ目の flex アイテムになる */
  ._th02_module .container .row .col:after{ display: none; }
  ._th02_module .container .row .col:not(:last-child){ margin-bottom: var(--th02-gap); }

  ._th02_module .container .row .col figure{
    float: none;
    height: auto;
    margin: 0;
    flex: 0 0 clamp(4.5rem, 26%, 9rem);   /* 正方形サムネイル。72〜144px。行幅に追従させる */
    position: relative;
  }
  ._th02_module .container .row .col figure a{
    position: relative;     /* 受領時の absolute を解除。マスクの基準をサムネイルに戻す */
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  ._th02_module .container .row .col figure a img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    z-index: auto;          /* z-index:0 がスタッキングコンテキストを作るのをやめる */
  }
  /* 受領時の SP マスクは z-index:-1 で祖先の背景の裏へ回り、一度も描かれていなかった */
  ._th02_module .container .row .col figure a:after{
    z-index: 1;
    background-color: color-mix(in srgb, var(--th02-veil) 42%, transparent);
  }

  ._th02_module .container .row .col ._th02_module_text{
    float: none;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    /* 受領時の min-height:100% !important を打ち消す。同一詳細度・同一ファイル内の
       !important 同士なので、後勝ちにするためこちらにも !important が要る。 */
    min-height: 0 !important;
  }
  ._th02_module .container .row .col ._th02_module_text p{
    display: block;                 /* 受領時の display:table-cell を解除 */
    width: 100%;
    padding: 0 1.25rem 0 0;         /* 受領時の padding-left:150px（旧テーマの固定値）を廃止 */
  }
  /* シェブロンは【行の右端】に置く（受領時の構図を保つ）。ラベルの a は受領時のまま
     position:static なので、::after の基準は position:relative の .col ＝ 行そのものになり、
     モバイルの一覧項目としてよくある「右端の >」になる。
     ★受領時は right:5%（＝行幅の5%）だったため、ホバーで 17.25px → 3.45px と 14px も飛んでいた。
       幅に依存しない固定の逃げに置き換えて、移動量を 8px に抑える。
       ⑤-2 で「シェブロンをラベルの直後に置く案」も試したが、767px では行の右側が
       500px 近く空いて、行が押せる範囲に見えなくなったので採らなかった。 */
  ._th02_module .container .row .col ._th02_module_text p a:after{
    right: 0.75rem;
  }
  ._th02_module .container .row .col:hover ._th02_module_text p a:after{ right: 0.25rem !important; }
}

/* --- 動きの停止（R-9）--------------------------------------------------------
   受領時はモジュール側に prefers-reduced-motion の指定が無かった（lint ⚠ R9-motion）。
   ★元の transition と【同じ深さ】で書く。浅く書いた停止指定は、後から足された
     深いセレクタのパッチに詳細度で負ける（anti-patterns の既知パターン）。
     ここでは受領時の各 transition と同じかそれ以上の深さで指定したうえで、
     common.css の reduce ブロックと同じく !important を添えて確実に止める。      */
@media (prefers-reduced-motion: reduce){
  ._th02_module .container .row .col ._th02_module_text p a:after,
  ._th02_module .container .row figure:after,
  ._th02_module .container .row figure:hover:after,
  ._th02_module .container .row .col figure a:after,
  ._th02_module .container .row .col figure a img{
    transition: none !important;
  }
}