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

.th25_module a:not(.add_arrow) {
  text-decoration: none;
  border: none;
  display: block;
  width: 100%;
  height: 100%;
}
.th25_module .th25_module_bnr {
  position: relative;
  max-width: 960px;
  margin: auto;
}
/* 2026-08-24: 大小タイルの高さを写真の自然比率から切り離す。
   受領時は aspect-ratio 未指定で、タイル高さ=写真の自然比率まかせだった。
   同梱サンプルはたまたま3枚とも同一比率(1.833)だったので偶然「524px×3」に揃っていたが、
   案件写真は縦横比が一定でない(規約R-5)。小タイル2枚の合計高さが大タイルの高さと噛み合わないと、
   1024px以上の2カラム時に短い方の列の下に白い空白が残る(README も「揃わないと右列が余る」と警告)。
   小タイルのアスペクト比を大タイルの厳密2倍にしておけば、両カラムは常に同じ幅を持つ(.col.span_6)ため、
   写真の比率に関わらず「小タイル2枚の高さ合計=大タイルの高さ」が常に成立する。 */
.th25_module .th25_module_bnr.bnr1 {
  aspect-ratio: 16 / 9;
}
.th25_module .th25_module_bnr.bnr2,
.th25_module .th25_module_bnr.bnr3 {
  aspect-ratio: 32 / 9;
}
.th25_module .th25_module_bnr figure {
  height: 100%;
}
.th25_module .th25_module_bnr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.th25_module .th25_module_bnr:after {
  content: "";
  position: absolute;
  background: color-mix(in srgb, #000 50%, transparent);
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.3s;
}
.th25_module .th25_module_bnr:hover:after {
  opacity: 1;
}
.th25_module .th25_module_bnr:hover .more .add_arrow {
  color: var(--color-text);
  border-color: #fff !important;
}
.th25_module .th25_module_bnr:hover .more .add_arrow:before {
  height: 100%;
  width: 135%;
}
.th25_module .th25_module_bnr:hover .more .add_arrow:after {
  border-color: #000;
}
.th25_module .more {
  width: 175px;
}
.th25_module .more .add_arrow {
  width: 175px;
  padding: 0.1em 1.3em 0.1em 1em;
  transition: 0.3s;
  display: inline-block;
  letter-spacing: normal;
  border: 1px solid #fff;
  color: var(--color-on-primary);
  margin-bottom: 1px;
  text-decoration: none;
  font-size: 0.875rem;
  /* 2026-08-24: 同上（土台の .lgx{font-family:Arial…} 対策）。more は補助的な短いラベルなので本文トークンを使う。 */
  font-family: var(--font-body);
}
@media (min-width: 768px) {
  .th25_module .more .add_arrow {
    font-size: 1.125rem;
  }
}
.th25_module .more .add_arrow:before {
  content: "";
  height: 100%;
  left: -35%;
  top: 0;
  transform: skew(50deg);
  transition-duration: 0.3s;
  transform-origin: top left;
  width: 0;
  position: absolute;
  background-color: #fff;
  z-index: -1;
}
.th25_module .more .add_arrow:after {
  border-color: #fff;
  right: 8%;
  width: 5px;
  height: 5px;
  transition: 0.3s;
}
.th25_module .more .add_arrow:hover {
  color: var(--color-text) !important;
}
.th25_module .more .add_arrow:hover:after {
  right: 5%;
}
.th25_module .th25_module_txt {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: auto;
  text-align: center;
  z-index: 1;
}
.th25_module .th25_module_txt.twrap1 {
  top: 73%;
}
.th25_module .th25_module_txt.twrap2, .th25_module .th25_module_txt.twrap3 {
  top: 50%;
}
/* 2026-08-25: 1023px以下は3枚とも100%幅で縦積みになる。
   ①bnr2/bnr3の32:9はbnr1(16/9)の半分の高さになる比率で、2カラム時専用の調整だった。
     縦積みでそのまま使うと大タイルだけ高さがあり小タイル2枚が薄く潰れて見える。
     縦積み域では3枚とも同じ比率(16/9)に揃える。
   ②twrap1のtop:73%も2カラム時（大タイルが横長）向けの調整で、縦積みだと1枚目だけ
     テキストが下寄りに見える。縦積み域はtwrap2/3と同じ50%（中央）に揃える。
   宣言はすべて通常時の宣言より後ろに置く（詳細度が同じセレクタはソース順で決まるため）。
   .col の縦積み化もここに統合する（既存の @media(max-width:1023px) の出現数を増やさないため）。 */
@media (max-width: 1023px) {
  .th25_module .col {
    width: 100%;
    margin-bottom: 0;
  }
  .th25_module .th25_module_bnr.bnr2,
  .th25_module .th25_module_bnr.bnr3 {
    aspect-ratio: 16 / 9;
  }
  .th25_module .th25_module_txt.twrap1 {
    top: 50%;
  }
}
.th25_module img {
  max-width: 100%;
}
.th25_module .th25_module_p {
  color: var(--color-on-primary);
  margin-bottom: 0;
  padding-bottom: 0.3em;
  font-size: 1.875rem;
  /* 2026-08-24: 土台 .lgx{font-family:Arial,…}(0,1,0) が common.css の body{font-family:var(--font-body)}
     (0,0,1) に詳細度で勝ち、フォントプリセットを振っても文字が1pxも変わらない罠がある
     (anti-patterns.md「土台の.lgx{font-family:Arial…}が…」/ banner-cta-th02 で既出)。
     ラベルは見出し相当のテキストなので --font-heading を明示する。 */
  font-family: var(--font-heading);
}
@media (max-width: 1023px) {
  .th25_module .th25_module_p {
    font-size: 1.375rem;
  }
}

/* 2026-08-24: 受領時にあった body #page_block3 .th25_module .more a:hover は削除。
   .more の中身は span.add_arrow のみで <a> を持たず、常に0要素にしか当たらない死にセレクタだった
   (triage.mjs R10)。加えて body 直下からの指定は R-8/R-10 のスコープ規約にも反していた。 */
@media (min-width: 1024px) and (max-width: 1200px) {
  body.two_column #page_block3 .th25_module_p {
    font-size: 1.375rem;
  }
}

/* SM-FIX-20260819 */
/* 2026-08-19: 文字が写真に埋もれて読めない。暗幕 .th25_module_bnr:after は
   opacity:0（ホバーで初めて出る）ため静止時は写真に直乗りで、しかも文字色が
   --color-on-primary（実サイトの大半で #111111）だった。
   静止時から下端にグラデのスクリムを敷き、文字は白に固定する。 */
.th25_module .th25_module_bnr:after{
  opacity: 1;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.25) 55%, rgba(0,0,0,.05));
}
.th25_module .th25_module_bnr:hover:after{ opacity: 1; background: color-mix(in srgb, #000 55%, transparent); }
.th25_module .th25_module_p{ color: #fff; }
.th25_module .more .add_arrow{ color: #fff; }

/* 2026-08-24: R-9 対応。ホバーのスクリム濃度変化と more ボタンの白ピル伸長は
   transition だけで動く演出（レイアウトは動かない）だが、prefers-reduced-motion:reduce では
   アニメーションを止める。色/表示自体は保つ（hoverの結果は変わらず、変化が瞬時になるだけ）。 */
@media (prefers-reduced-motion: reduce) {
  .th25_module .th25_module_bnr:after,
  .th25_module .more .add_arrow,
  .th25_module .more .add_arrow:before,
  .th25_module .more .add_arrow:after {
    transition: none;
  }
}