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

.mod_14_section {
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .mod_14_section {
    background: url(images/mod-14-bg-1.webp) no-repeat center center;
    background-size: cover;
  }
}

/* 2026-08-28: オーナー指摘(3案が同じ背景で見分けづらい)。画像スロットは仕様上1枚
   (本番は自動生成写真に置換)のため画像自体は増やさず、blend-modeで色調差を付ける。
   セクション自体にはtypeA/typeB相当の判別クラスがないため、箱の位置(nth-of-type)で判定する。
   本番では3案のうち1つだけが残る運用のため、実運用への影響はない。 */
@media (min-width: 768px) {
  .mod_14_section:nth-of-type(2) {
    background-color: rgba(0, 0, 0, 0.4);
    background-blend-mode: multiply;
  }
  .mod_14_section:nth-of-type(3) {
    background-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    background-blend-mode: multiply;
  }
}
.mod_14_section .container {
  margin-top: 0;
}
.mod_14_section .container > .row {
  margin-bottom: 0;
}
.mod_14_section .mod_14_content .mod_14_title small {
  font-size: 0.875rem;
  display: block;
}
.mod_14_section .mod_14_content {
  background: var(--color-primary);
  padding: 5% 2%; color: var(--color-on-primary); }

/* SM-FIX5-20260819 */
/* 2026-08-19: パネルが background:var(--color-primary) なのに、.inverse により
   本文が #fff 固定になっており、中間トーンのブランド色だと比 3.12 で読みにくかった。
   面がブランド色なのだから、サイトが輝度から自動決定している --color-on-primary を使う。 */
.mod_14_section .mod_14_content:not(.inverse){ --inverse-ink: var(--color-on-primary, #fff); }
.mod_14_section .mod_14_content.inverse{ --inverse-ink: #fff; }

/* SM-FIX-20260824(1): 土台 .lgx{font-family:Arial,…} がテーマのフォント設定を1文字も
   届かせていなかった(anti-patterns.md 既知の罠。th02/th25/mod-12でも既出)。
   見出し・本文・CTAボタンに明示する。 */
.mod_14_section .mod_14_content .mod_14_title { font-family: var(--font-heading); }
.mod_14_section .mod_14_content .mod_14_title small,
.mod_14_section .mod_14_content > p,
.mod_14_section .mod_14_content .more a { font-family: var(--font-body); }

/* 2026-08-28: オーナー指摘(ボタン文字が大きい)。土台 `.lgx .more a` が768px以上で
   1.8rem(28.8px)にしており、本文(1rem前後)に対して不釣り合いに大きかった。
   トークン経由でボタンサイズに寄せる。767px以下は土台の1.4rem(小さめ)のまま触らない。
   2026-08-28(2): 文字を縮めた分、土台のpadding(0.6em)がem連動で一緒に縮んで
   窮屈になったため(28.8px×0.6em→16px×0.6em)、paddingを明示して余白を確保し直す。 */
@media (min-width: 768px) {
  .mod_14_section .mod_14_content .more a {
    font-size: var(--fs-body);
    padding: 0.9em 1.6em;
  }
}

/* SM-FIX-20260824(2): 左案(offset無し・<a>に.inverseが付く)の通常時コントラスト崩壊。
   土台の `.lgx .more a.inverse{ color: color-mix(in srgb, var(--color-primary) 68%, #000) }`
   （白地の上）は、primaryが淡いベージュ系だと実測 3.51 でAA未達だった。
   --color-heading-ink は「primaryが淡くても白地で読める」ことが保証された濃色なので、
   これに置き換えれば配色4種すべてでAAを満たす。 */
.mod_14_section .mod_14_content .more a.add_arrow.inverse {
  color: var(--color-heading-ink);
  border-color: var(--color-heading-ink);
}

/* SM-FIX-20260824(3): CTAボタン(「詳しく見る」)のホバー時コントラスト崩壊。banner-cta-mod-12で
   実測確定・記録済みの欠陥が本モジュールでも再発している(anti-patterns.md参照)。
   ①左案は `.lgx .add_arrow.inverse:hover{ background:primary; color:#fff }` で、
     primaryが淡いベージュ系だと実測 1.66。
   ②中央/右案(offset_3 / offset_6・<a>は.inverseなし)は土台の `.lgx .button:hover`(背景=primary)と
     `.lgx .add_arrow:hover`(文字=color-mix(primary 68%,#000))が同一要素に競合適用され、
     「primary由来の背景」に「primary由来の暗いトーンの文字」が乗る組み合わせになり、
     配色4種すべてで実測 1.14〜2.12(文字がほぼ消える)。
   _shared/ は変えず、モジュールのスコープ(詳細度 0,5,1)で3案共通の安全な色に統一する
   (mod-12で実測確定した40%ラインを踏襲。近白primaryでも白文字が4.5を割らない)。 */
.mod_14_section .mod_14_content .more a.add_arrow:hover,
.mod_14_section .mod_14_content .more a.add_arrow:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 40%, #000);
  border-color: color-mix(in srgb, var(--color-primary) 40%, #000);
  color: #fff;
  opacity: 1;
  filter: none;
}