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

.mod_12_section {
  background: url(images/mod-12-bg-1.webp) no-repeat center center;
  background-size: cover;
  padding: 5% 0;
}

/* 2026-08-28: オーナー指摘(3案が同じ背景で見分けづらい)。画像スロットは仕様上1枚
   (本番は自動生成写真に置換)のため画像自体は増やさず、blend-modeで色調差を付ける。
   本番では3案のうち1つだけが残る運用のため、実運用への影響はない。 */
.mod_12_section.typeA.inverse {
  background-color: rgba(0, 0, 0, 0.45);
  background-blend-mode: multiply;
}
.mod_12_section.typeB {
  background-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
  background-blend-mode: multiply;
}

/* ── フォント継承(R-3)。土台 .lgx{font-family:Arial,…} が全文字を固定しており、
   確認パネルのフォントプリセット(ゴシック/明朝/丸ゴシック/欧文)を振っても
   タイトル・本文とも Arial のまま1文字も変わらなかった(実測)。
   common.css の h1,h2,h3,h4{font-family:var(--font-heading)} は h タグにしか効かず、
   このモジュールは <p class="mod_12_title"> なので恩恵を受けていなかった。 */
.mod_12_section .mod_12_title,
.mod_12_section .mod_12_title a {
  font-family: var(--font-heading);
  font-weight: bold;
}
.mod_12_section .mod_12_title small {
  font-family: var(--font-body);
  font-weight: normal;
  font-size: 1rem;
  display: block;
}
.mod_12_section p.text-center:not(.mod_12_title),
.mod_12_section .more a {
  font-family: var(--font-body);
}
@media (max-width: 1020px) {
  .mod_12_section .mod_12_content_wrap {
    max-width: 96%;
    padding: 5% 2%;
  }
}
.mod_12_section.typeA .mod_12_content_wrap {
  background: var(--color-bg);
  padding: 5%;
}
.mod_12_section.typeA.inverse .mod_12_content_wrap {
  background: var(--color-text); color: var(--color-bg); }
.mod_12_section.typeB {
  position: relative;
}
.mod_12_section.typeB .mod_12_content_wrap {
  padding: 2.5%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  transition: 0.4s;
}
.mod_12_section.typeB .mod_12_content_wrap:hover {
  background: var(--mod12-hover-surface);
  transition: 0.75s; color: #fff; }
.mod_12_section.typeB .mod_12_title a {
  text-decoration: none;
  color: var(--color-on-primary);
}
.mod_12_section.typeB .mod_12_title a:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

/* ── ホバー時のコントラスト是正(R-7) ─────────────────────────────────────
   受領時の実測(配色4種 × コントラスト計算):
   (1) typeB: ホバーで背景が var(--color-primary-dark) に変わるが文字は var(--color-on-primary) の
       まま(primary基準で選ばれた色で、primary-darkの明度とはズレる)。さらに共通CSS
       (a:hover{opacity:.8})がリンク文字を追加で薄める。実測(既定配色)で 通常6.06→ホバー3.32、
       AA(4.5)を大きく割っていた。
   (2) MOREボタン(typeA/typeA inverse): 土台の .lgx .button:hover(bg=primary, filter:brightness(.9))
       と .lgx .add_arrow:hover(color: color-mix(primary 68%, #000)) が同じ<a>に同時に効き、
       「primary由来の背景」に「primary由来の暗いトーンの文字」が乗る組み合わせになっていた。
       a:hover{opacity:.8}も重なり、実測コントラストは配色4種すべてで 1.14〜1.70 (文字がほぼ消える)。
   対処: ホバー面を独自トークンにし(--color-primary を 40% まで黒側へ混ぜる。近白に近い
   ブランド色でも実測でコントラスト 4.5 を割らない安全域として確定)、文字は白固定にする。
   opacity/filter は土台の値をこのモジュールのスコープ内で明示的に打ち消す。 */
.mod_12_section {
  --mod12-hover-surface: color-mix(in srgb, var(--color-primary) 40%, #000);
}
.mod_12_section.typeB .mod_12_title a:hover {
  color: #fff;
  opacity: 1;
}
.mod_12_section .more a:hover {
  background: var(--mod12-hover-surface);
  border-color: var(--mod12-hover-surface);
  color: #fff;
  opacity: 1;
  filter: none;
}
.mod_12_section .more a:hover:after {
  border-color: #fff;
}
.mod_12_section.fade-in .mod_12_content_wrap {
  opacity: 0;
  transform: translateY(20px);
}
.mod_12_section.visible .mod_12_content_wrap {
  opacity: 1;
  transition: 1s;
  transform: translateY(0);
}