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

._th10_module {
  background: var(--color-surface);
  padding: 2em 0;
}
@media (min-width: 1000px) {
  ._th10_module {
    padding: 4em 0;
  }
}
._th10_module .bnr_box {
  background: #fff;
  border: solid 1px var(--color-text-muted);
  font-weight: bold;
  font-size: 1rem;
}
._th10_module .bnr_box a {
  text-decoration: none;
}
._th10_module .text_arrow {
  display: block;
  position: relative;
}
._th10_module .text_arrow:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 8%;
  margin: auto;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--color-text);
  border-right: 1px solid var(--color-text);
  transform: translate(0, -50%) rotate(45deg);
  transition: 0.2s;
}
._th10_module .text_arrow:hover:after {
  right: 5%;
}

@media (min-width: 768px) {
  ._th10_module .textbox {
    position: relative;
  }
  ._th10_module .textbox p {
    position: absolute;
    top: 50%;
    left: 0;
    right: auto;
    width: 100%;
    transform: translateY(-50%);
  }
}
@media (max-width: 767px) {
  ._th10_module {
    padding: 2em 1em;
  }
  ._th10_module .col {
    margin-bottom: 0 !important;
  }
  ._th10_module .bnr_box {
    position: relative;
  }
  ._th10_module .bnr_box.first {
    border-bottom: none;
  }
  ._th10_module .bnr_box.last {
    border-top: none;
  }
  ._th10_module .bnr_box .textbox {
    position: absolute;
    top: 50%;
    left: 110px;
    transform: translateY(-50%);
  }
}

/* SM-FIX4-20260819 */
/* 2026-08-19: 767px 以下でテキストが切れる。.bnr_box .textbox が
   position:absolute + left:110px で【右端が指定されていない】ため、
   本文が器の右へはみ出して読めなくなっていた（実測 375px で3件とも切れる）。
   右端を止めて折り返させる。あわせてサムネの比率を揃える
   （実測: 3枚の縦横比がバラバラでカードの高さが不揃いになっていた）。 */
._th10_module .bnr_box img{ display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 767px){
  ._th10_module .bnr_box .textbox{ left: 110px; right: 2.2em; }
  ._th10_module .bnr_box .textbox p{ margin: 0; }
}

/* SM-FIX6-20260819 */
/* 2026-08-19(2): 767px 以下のカードは、サムネ(float)の隣にテキストを
   position:absolute + left:110px で置く作りで、幅が中身任せになり文字が欠けていた。
   横並びを flex で確定させ、テキストは通常フローに戻して折り返させる。 */
@media (max-width: 767px){
  ._th10_module .bnr_box{ display: flex; align-items: center; }
  ._th10_module .bnr_box > .col:first-child{
    flex: 0 0 100px; width: 100px; float: none; margin: 0;
  }
  ._th10_module .bnr_box .textbox{
    position: static; transform: none; float: none;
    flex: 1 1 auto; width: auto; min-width: 0;
    padding: .6em 2.2em .6em .8em;
  }
}

/* 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 を併記する。 */
._th10_module .bnr_box img{ height: auto; }

/* ============================================================
   SM-TH10-20260821 — 受領時の構図はそのままに、実測で出た欠陥だけを直す
   意匠は1つも足していない（面・帯・影・角丸・斜めマスク・三角・地の一段のいずれも無し）。
   ★ブレークポイントに 767 / 768 を使っている理由:
     土台 module-base.css の `.lgx .col` の float と、
     `.lgx .row:has(> .col > img:only-child)` の flex 化が
     どちらも min-width:768px で切り替わる。ここで 769 を使うと
     768px ちょうどで段組みと高さ揃えが割れる。lint の R6-bp(warn) は承知のうえ。
   ============================================================ */

/* --- 1) サイトのフォント設定をモジュールへ届かせる ---------------------
   土台の `.lgx` が font-family に Arial 系を直書きしており(0,1,0)、
   `--font-body` が遮断されていた。
   実測: フォントプリセット4種 × 6幅 × 配色4 の全パターンで Arial / 16px 固定で、
   確認パネルを振っても 1px も変わらなかった。 */
._th10_module .bnr_box {
  font-family: var(--font-body);
  font-size: var(--fs-body);
}

/* --- 2) 受領時の死にセレクタを、当たる形で置き換える -------------------
   受領時の `._th10_module .bnr_box a` は、a が .bnr_box の【祖先】なので
   1要素にも当たらない（triage R10）。指定されていた text-decoration:none は
   一度も効いていなかった。
   下の 3) でラベルを通常フローへ戻すと、土台の `.lgx a` の underline が
   伝播して下線が生えるため（out-of-flow の子孫には伝播しない性質）、
   ここで当たるセレクタに置き換えておく。 */
._th10_module .col > a { text-decoration: none; }

/* --- 3) ラベルの器が高さ 0 に潰れている（triage R12b） ------------------
   受領時は PC でラベルを position:absolute + top:50% で中央に置いていたため、
   器（.col.span_8）が高さを 1px も持たない。
   実測 768px では 2行 57.6px のラベルが 59px のカードに上下 0.7px の余白で詰まり、
   README が上限とする 24字のラベルでは【カードの外へ溢れる】（12/48 パターン）。
   通常フローへ戻すと器がラベルの行数ぶん伸びる。垂直中央は土台の
   `.lgx .row:has(> .col > img:only-child) > .col:not(:has(> img:only-child))` の
   align-self:center がそのまま担うので、こちらで flex を組み直す必要はない。 */
@media (min-width: 768px) {
  ._th10_module .bnr_box .textbox p { position: static; transform: none; }
}

/* --- 4) ラベルが行末の矢印に食い込む -----------------------------------
   README 自身が「長いラベルは矢印と重なる」と書いている既知の欠陥。
   実測 96/384 パターン・最大 31.2px（1280px の12字ラベルでは矢印が字の下に隠れて消える）。
   矢印は .text_arrow の ::after が right:8%【カードの幅の 8%】に置かれている。
   .textbox は flex アイテムなので padding の % も同じくカードの内容幅に解決される。
   → calc(8% + 1.4em) にすると、どの画面幅でも矢印との間隔が一定に保たれる。
   矢印そのものの位置（行の右端）は受領時のまま動かさない。
   ★SP も同じ構造の問題を持つ: 受領時の padding-right は固定の 2.2em(35.2px) だが、
     矢印は 8% なのでカードが広がるほど内側へ入ってくる。
     実測（320〜767px × フォント4 × ラベル長4 = 80パターン）で
     414px の 21字ラベルのとき間隔が【0.2px】しか残っていなかった。
     PC と同じ式にして、幅によらず間隔が一定になるようにする。 */
@media (min-width: 768px) {
  ._th10_module .bnr_box .textbox { padding: 0.65em calc(8% + 1.4em) 0.65em 0.9em; }
}
@media (max-width: 767px) {
  ._th10_module .bnr_box .textbox { padding: 0.6em calc(8% + 1.4em) 0.6em 0.8em; }
}

/* --- 5) 3枚のカードの高さと上端をそろえる -------------------------------
   3) でラベルが高さを持つと、外側の float 3列は
   【ラベルの行数が違うとカードの高さも上端もバラバラになる】。
   受領時は「3枚が必ず同じ高さで横に並ぶ」姿だったので、その構図を維持する。
   土台の clearfix（.row の ::after が display:table）は 4つ目の flex アイテムに
   なるので止める。.span_4 の width(32%) と .gutters の margin-left(2%) は
   flex でもそのまま効くので、列比とガターは受領時から 1px も動かない。 */
@media (min-width: 768px) {
  ._th10_module > .container > .row { display: flex; align-items: stretch; }
  ._th10_module > .container > .row:after { display: none; }
  ._th10_module > .container > .row > .col { float: none; flex: 0 0 auto; min-width: 0; }
  ._th10_module > .container > .row > .col > a,
  ._th10_module > .container > .row > .col > a > .text_arrow,
  ._th10_module .text_arrow > .bnr_box { height: 100%; }
}

/* --- 6) README が定義する「98px × 98px の正方形」に戻す -----------------
   受領時のパッチ SM-FIX4 が aspect-ratio を 4/3 にしており、README の
   「画像は 98px × 98px の正方形を前提とする」と食い違っていた。
   正方形のロゴ・ピクトグラムが割り当たると object-fit:cover が上下 25% を切り、
   「大きな写真が用意できない案件の逃げ道」という存在理由に直撃する。
   SM-FIX4 の狙い（3枚の比率をそろえる）と SM-FIX9（height:auto の併記）は
   どちらも保ったまま、比率だけを 1:1 へ戻す。 */
._th10_module .bnr_box > .col > img { aspect-ratio: 1 / 1; }

/* --- 7) prefers-reduced-motion（R-9） ----------------------------------
   受領時の矢印の transition は .text_arrow の ::after に書かれている。
   同じ深さで書かないと詳細度で負けるので、同じ形で止める。 */
@media (prefers-reduced-motion: reduce) {
  ._th10_module .text_arrow:after { transition: none; }
}