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

._th26_module a {
  display: block;
  text-decoration: none;
}
._th26_module a ._th26_module_wrap {
  background: none;
}
._th26_module a .row {
  background: var(--color-text);
  color: var(--color-on-primary);
  text-align: center;
}
._th26_module a .row ._th26_module_text_wrap {
  position: relative;
}
._th26_module a .row ._th26_module_text_wrap ._th26_module_text {
  padding: 2em;
}
._th26_module a .row ._th26_module_text_wrap ._th26_module_text h3 {
  color: var(--color-on-primary);
  font-weight: bold;
  font-size: 1.5rem;
  position: relative;
}
._th26_module a .row ._th26_module_text_wrap ._th26_module_text h3:after {
  content: "";
  position: absolute;
  bottom: -0.5em;
  left: calc(50% - 20px);
  display: block;
  width: 40px;
  height: 4px;
  background: #fff;
}
._th26_module a .row ._th26_module_text_wrap ._th26_module_text .more {
  font-size: 1rem;
  display: inline-block;
  border: #fff solid 2px;
  padding: 0.8em 4em;
}

@media (min-width: 768px) {
  ._th26_module a {
    display: block;
  }
  ._th26_module a img {
    opacity: 0;
    width: 1200px;
    height: 380px;
  }
  ._th26_module a:nth-child(1) ._th26_module_wrap {
    background: url(images/upload-1790907592037.webp) no-repeat center center;
    background-size: cover;
    transition: all 0.6s 0s ease;
  }
  ._th26_module a:nth-child(2) ._th26_module_wrap {
    background: url(images/upload-1790907620374.webp) no-repeat center center;
    background-size: cover;
    transition: all 0.6s 0s ease;
  }
  ._th26_module a:nth-child(odd) ._th26_module_text_wrap:after {
    content: "";
    position: absolute;
    top: calc(50% - 15px);
    left: -42px;
    transform: rotate(-90deg);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 30px 25px 30px;
    border-color: transparent transparent var(--color-text) transparent;
  }
  ._th26_module a:nth-child(even) ._th26_module_text_wrap:after {
    content: "";
    position: absolute;
    top: calc(50% - 15px);
    right: -42px;
    transform: rotate(90deg);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 30px 25px 30px;
    border-color: transparent transparent var(--color-text) transparent;
  }
  ._th26_module a:hover ._th26_module_wrap {
    transform: scale(1.05);
    transition: all 0.6s 0s ease;
  }
  ._th26_module a:hover .more {
    background: #fff;
    color: var(--color-text);
    transition: all 0.6s 0s ease;
  }
  ._th26_module a .row .span_8 {
    overflow: hidden;
  }
  ._th26_module a .row ._th26_module_text_wrap {
    position: relative;
  }
  ._th26_module a .row ._th26_module_text_wrap ._th26_module_text {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  ._th26_module a .row ._th26_module_text_wrap ._th26_module_text h3 {
    color: var(--color-on-primary);
    font-weight: bold;
    font-size: 1.5rem;
    position: relative;
  }
  ._th26_module a .row ._th26_module_text_wrap ._th26_module_text h3:after {
    content: "";
    position: absolute;
    bottom: -0.5em;
    left: calc(50% - 20px);
    display: block;
    width: 40px;
    height: 4px;
    background: #fff;
  }
  ._th26_module a .row ._th26_module_text_wrap ._th26_module_text .more {
    font-size: 1rem;
    display: inline-block;
    border: #fff solid 2px;
    padding: 0.8em 4em;
    transition: all 0.6s 0s ease;
  }
}
@media (min-width: 768px) and (max-width: 1000px) {
  ._th26_module a {
    display: block;
  }
  ._th26_module a img {
    opacity: 0;
    width: 1200px;
    height: 380px;
  }
  ._th26_module a:nth-child(1) ._th26_module_wrap {
    background: url(images/upload-1790907592037.webp) no-repeat center center;
    background-size: cover;
    transition: all 0.6s 0s ease;
  }
  ._th26_module a:nth-child(2) ._th26_module_wrap {
    background: url(images/upload-1790907620374.webp) no-repeat center center;
    background-size: cover;
    transition: all 0.6s 0s ease;
  }
  ._th26_module a .span_8 {
    width: 60%;
  }
  ._th26_module a .span_4 {
    width: 40%;
  }
  ._th26_module a .more {
    display: block !important;
    padding: 0.8em 0 !important;
  }
}
@media (max-width: 767px) {
  ._th26_module a .col {
    margin-bottom: 0;
  }
  ._th26_module a img {
    opacity: 1;
    width: 100%;
  }
  ._th26_module a ._th26_module_text_wrap {
    position: relative;
  }
  ._th26_module a ._th26_module_text_wrap:after {
    content: "";
    position: absolute;
    top: -25px;
    left: calc(50% - 30px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 30px 25px 30px;
    border-color: transparent transparent var(--color-text) transparent;
  }
}

/* SM-FIX2-20260819 */
/* 2026-08-19: 濃色パネルの上の文字が読めない（実測コントラスト比 1.41）。
   パネルは background: var(--color-text)（＝本文インク色。濃茶/濃紺）なのに、文字が
   var(--color-on-primary)（＝ブランド色ベタ面専用の文字色。実サイトの大半で #111111）
   だった。h3 の下線も .more の枠も #fff 固定＝白文字前提の設計。 */
._th26_module a .row,
._th26_module a .row ._th26_module_text_wrap ._th26_module_text h3,
._th26_module a .row ._th26_module_text_wrap ._th26_module_text p,
._th26_module a .row ._th26_module_text_wrap ._th26_module_text .more{ color: #fff; }
/* 768px 以上は .row の背景が写真差し替えになるので、文字が写真に直乗りする。
   パネル側にスクリムを敷いて、写真の明暗にかかわらず読めるようにする。 */
._th26_module a .row ._th26_module_text_wrap ._th26_module_text{
  background: rgba(0,0,0,.42);
}

/* ===== SM-FIX-20260821 ここから =====================================================
   受領時の崩れ: 768px 以上の全幅・全プリセットで、テキスト面が自分の帯から上下 174〜223px
   はみ出していた（1本目は section の上端より外へ出て見出しが切れ、2本目は前の写真に重なる）。
   原因は土台 module-base.css の `.tile` に【PC 側の高さ揃えが無い】こと。
   SP 用の `height:auto !important` だけが移植されており、`.lgx .col{float:left}` の float 列は
   中身が絶対配置だけだと高さ 0 に潰れる。その 0 高の器を基準に top:50% + translateY(-50%) で
   中央揃えしていたため、中身は器の上端を中心に上下へ半分ずつ出ていた。
   `_shared/` は編集不可のため、モジュール側で回避する。
   ★構図（8:4 / 左右交互 / 三角の刺し込み / 2本積み）は受領時のまま。欠陥だけ直す（原則8）。
   ================================================================================== */

/* ★lint の R6-bp（ブレークポイントは max-width:768px に統一）を承知のうえで
   `min-width: 768px` を使う理由:
   このモジュールは受領時から `min-width:768px` / `(min-width:768px) and (max-width:1000px)` /
   `max-width:767px` の3段で組まれている（768〜1000px はテキスト面 40% の独自段。README にも明記）。
   ここだけ 769px に寄せると【768px ちょうどで PC 側の指定が抜ける】ため、
   既存の境界に合わせる。規約 R-6 の「触った箇所は 768px に寄せる／全面的な書き直しは不要」に従う。 */
@media (min-width: 768px) {
  /* --- 1) 帯の高さ揃えを復元する（本丸） -------------------------------------------
     float をやめて flex にすることで、テキスト列が帯の高さまで伸びる。
     `.span_*` の width はそのまま flex の基準幅として効く（66.66% + 33.33% = 約100%）。 */
  ._th26_module a .row {
    display: flex;
    align-items: stretch;
  }
  /* `.reverse` は元は float:right で左右を入れ替えていた。flex では float が効かないので
     同じ見え方を row-reverse で作る（DOM 順は写真 → テキストのまま。付け外しもしない）。 */
  ._th26_module a .row.reverse {
    flex-direction: row-reverse;
  }
  /* 土台の clearfix（`.lgx .row:after{content:"";display:table;clear:both}`）は
     flex コンテナでは【余分な3つ目の列】になるため、このモジュール内でだけ止める。 */
  ._th26_module a .row:after {
    display: none;
  }
  ._th26_module a .row > .col {
    float: none;
    flex: 0 0 auto;
    min-width: 0;
  }

  /* --- 2) テキスト面: 絶対配置をやめ、帯の中で上下中央に置く ------------------------
     絶対配置のままだと中身が高さを作らないので、説明が3行に増えたときに帯から溢れる。
     通常フローに戻すことで【文章量が増えたら帯のほうが伸びる】形になる。 */
  ._th26_module a .row ._th26_module_text_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  ._th26_module a .row ._th26_module_text_wrap ._th26_module_text {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 90%;
  }

  /* --- 3) 写真枠: 固定 px をやめる（R-5） -------------------------------------------
     受領時は img に width:1200px / height:380px の固定値が入っていた。
     帯の比率（1200:380 ≒ 3.16:1）は構図なので維持し、上限だけ px で付ける。
     ★max-height は「広い画面で帯が伸び続けないための蓋」。vh を使わないのは、
       banner-cta がページ中程の部品で第一画面の制約を受けないため（規約 R-5 / 2026-08-21）。 */
  ._th26_module a .row > .span_8 {
    display: flex;
  }
  ._th26_module a ._th26_module_wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1200 / 380;
    max-height: 460px;
    overflow: hidden;
  }
  /* PC では写真は祖先の background-image 側。img は高さを作るためのスペーサなので、
     絶対配置にして流し込みから外す（opacity:0 は受領時のまま）。 */
  ._th26_module a ._th26_module_wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

}

/* --- 4) スクリムを外す（R-7） --------------------------------------------------------
   テキストが帯の中に収まれば写真に重ならないため不要（実測: 全幅で交差 0）。
   地は `.row` の var(--color-text)（全プリセットで暗色）で、#fff との比は 10.98〜15.91:1。
   受領時の rgba(0,0,0,.42) は不透明度 42% で R-7（半透明の面は 80% 以上）にも違反していた。
   ★SP も縦積みで写真とは重ならないため、media の外で外す。 */
._th26_module a .row ._th26_module_text_wrap ._th26_module_text {
  background: none;
}

/* --- 5) 文字サイズ・フォントをトークン経由にする（R-3 / R-4） ---------------------- */
._th26_module a .row ._th26_module_text_wrap ._th26_module_text h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-mod-title);
}
._th26_module a .row ._th26_module_text_wrap ._th26_module_text .more {
  font-size: var(--fs-body);
}

/* --- 6) ★ホバーでボタンの文字が消える（受領時からの欠陥） --------------------------
   受領時は `._th26_module a:hover .more{ background:#fff; color:var(--color-text) }` で
   地と文字を反転させる設計だった。ところが 2026-08-19 に先方が足した SM-FIX2 の
   `._th26_module a .row ._th26_module_text_wrap ._th26_module_text .more{ color:#fff }` が
   詳細度 (0,5,1) で、ホバー側 (0,3,1) に勝ってしまう。
   結果、ホバーすると【白地に白文字】になり文字が消えていた（実測コントラスト 1.00:1）。
   ホバー側を同じ深さで書き直して、反転を復活させる。 */
._th26_module a:hover .row ._th26_module_text_wrap ._th26_module_text .more {
  color: var(--color-text);
}

/* --- 7) アニメーションの停止（R-9） ------------------------------------------------
   ★`_shared/common.css` が `*{ transition-duration:0.01ms !important }` で
   トランジションは既に潰している（実測: reduce 時 1e-05s）。ここで止める必要があるのは
   **common.css が触らない `transform`**（写真の scale(1.05)）のほう。
   transition 側の指定は common.css がパッケージごとに変わりうる（規約 §11-2）ための保険で、
   元の指定と詳細度を合わせてある（合わせないと負ける）。 */
@media (prefers-reduced-motion: reduce) {
  ._th26_module a:nth-child(1) ._th26_module_wrap,
  ._th26_module a:nth-child(2) ._th26_module_wrap,
  ._th26_module a:hover ._th26_module_wrap {
    transition: none;
  }
  ._th26_module a:hover ._th26_module_wrap {
    transform: none;
  }
  ._th26_module a .row ._th26_module_text_wrap ._th26_module_text .more,
  ._th26_module a:hover .row ._th26_module_text_wrap ._th26_module_text .more {
    transition: none;
  }
}
/* ===== SM-FIX-20260821 ここまで ===== */

/* --- 7) 「詳細はこちら」が狭い列で2行に折り返す欠陥 -----------------------------------
   受領時は `padding: 0.8em 4em` 固定。1001px で列が 33.3% に戻ると内寸が 236px しかなく、
   左右 4em（128px）の余白に押されてボタンの文字が2行になり、帯が 123px 跳ねていた（実測）。
   横の余白を列幅に追従させ、ボタンが列からはみ出さないようにする。 */
._th26_module a .row ._th26_module_text_wrap ._th26_module_text .more {
  max-width: 100%;
  padding: 0.8em min(4em, 10%);
}

/* ===== SM-FIX-20260821 ここまで（追補） ===== */