@charset "UTF-8";
/* banner-cta-th24 — 色面+写真の4枚ブロック
   骨格確定型。class 名・DOM 構造は変えず、CSS だけで直している。

   受領時の実測（headless Chrome / transition・animation を切って計測）と、直した点:
   1) 4色が旧テーマ由来の固定 hex（#1f9bbe / #3861a3 / #0e558d / #1992b4）で、配色プリセットを
      4種振っても 1280px のスクリーンショットがバイト単位で同一だった。さらに 6ペアの色差は
      ΔE 35.3 / 33.7 / 3.4 / 9.4 / 33.3 / 31.0 で、bg_01 と bg_04 が ΔE 3.4 ＝ ほぼ同色。
      「4色を使い分ける前提の意匠」（README）が受領時から成立していなかった。
      → テーマの --color-primary / --color-heading-ink から【4段の面色】を作る（下の --th24-face-*）。
   2) ホバーで 4枚中3枚が AA 未達（5.84→4.06 / 6.16→3.97 / 5.23→3.74）。
      原因は _shared/common.css の a:hover｛opacity:.8｝（帯全体が <a>）。→ モジュール側で opacity:1 に戻す。
   3) 写真が 960〜1919px で 29.8〜40.6% しか見えていなかった（height:100%+width:auto の中央トリミング。
      1408x768 の写真が幅 788px に伸び、235〜320px の枠で切られていた）。1920px 以上でだけ
      object-fit:cover に切り替わり、1919px と 1920px で描画が別物だった。
      → 全幅で object-fit:cover に統一し、枠の縦横比を写真寄りへ戻す（min-height を下げる）。
   4) 説明文が長いと MORE（絶対配置）に 24.6〜26.6px 重なっていた（README も警告している既知の欠陥）。
      → MORE を通常フローへ戻し、flex の margin-top:auto で下端に置く。
   5) 見出しが 26→16→20→26px と画面幅に対して非単調だった（960〜1199px では本文 14px との差が 2px）。
      → --fs-* トークン ＋ コンテナクエリで単調に。
   6) min-height:430px の固定（R-5 違反）。中身が少ないと 960px で約 250px の空洞ができていた。
   7) 本文が .lgx｛font-family:Arial…｝(0,1,0) に捕まり、フォントプリセット4種すべてで Arial 固定だった
      （見出しだけ common.css の h1..h4｛font-family:var(--font-heading)｝ で追従するので書体が割れていた）。
   8) @media(max-width:767px)｛ ._th24_module_wrap｛padding:0 2em｝ ｝ は module-base の
      section.lgx｛padding:clamp(56px,7vw,96px) 0｝(0,1,1) に詳細度で負けて一度も効いていなかった。→ 削除。

   構図（2×2・隙間ゼロ・色面半分＋写真半分・写真の左右が交互・色面から刺さる菱形・下端の MORE）は
   受領時のまま。原則8「欠陥は直す、構図は変えない」。 */

/* ───────────────────────────────────────────────── トークン */

._th24_module_wrap {
  /* 面色の元。--color-heading-ink は「明背景で読める濃色」＝ 白文字とのコントラストが
     テーマ側で保証されている唯一の濃色トークン。そこへ primary を 15% だけ差してブランドの色相を残す
     （15% を超えると淡色プリセットで白文字が 4.5 を割る。実測: 30% で 3.9）。 */
  --th24-ink: color-mix(in srgb, var(--color-primary) 15%, var(--color-heading-ink));

  /* 4段の面。受領時の力関係（明・濃・最濃・中明）をそのまま踏襲する。
     4配色プリセットでの実測: 文字コントラスト 5.58〜18.79 / 6ペアの最小 ΔE 9.1
     （受領時は最小 5.23 / ΔE 3.4）。 */
  --th24-face-1: color-mix(in srgb, var(--th24-ink) 40%, var(--color-bg)); /* 明   */
  --th24-face-2: color-mix(in srgb, var(--th24-ink) 86%, #000);           /* 濃   */
  --th24-face-3: color-mix(in srgb, var(--th24-ink) 50%, #000);           /* 最濃 */
  --th24-face-4: color-mix(in srgb, var(--th24-ink) 56%, var(--color-bg));/* 中明 */

  /* 面の上の文字。明段は黒・濃段は白（R-1 が生値を認めている #000 / #fff）。
     面の明度を我々の側で保証しているので、テーマの --color-on-* の当たり外れに依存しない。 */
  --th24-on-light: #000;
  --th24-on-dark: #fff;

  /* 色面の内側の余白と最小高さ。受領時は 3em / 2em / 1em の3段と min-height:430px の固定だった。 */
  --th24-pad: clamp(1.25rem, 2.6vw, 3rem);
  --th24-face-min: clamp(14rem, 22vw, 21rem);
}

/* ───────────────────────────────────────────────── 版面 */

/* 受領時どおり全幅（.lgx .container の 1000px 上限を外し、4枡を隙間ゼロで敷き詰める）。 */
._th24_module_wrap .container {
  max-width: none;
}

/* .lgx h3 が持つ下線と擬似要素を止める（受領時から）。 */
._th24_module_wrap .container h3::after,
._th24_module_wrap .container h3::before {
  content: none;
}
._th24_module_wrap .container h3 {
  border-bottom: none;
}

/* ───────────────────────────────────────────────── 4枡の色 */

._th24_module_wrap .container .bg_01 { background: var(--th24-face-1); }
._th24_module_wrap .container .bg_02 { background: var(--th24-face-2); }
._th24_module_wrap .container .bg_03 { background: var(--th24-face-3); }
._th24_module_wrap .container .bg_04 { background: var(--th24-face-4); }

/* 色面から写真へ刺さる菱形は、その枡の面色と同じ色。 */
._th24_module_wrap .container .bg_01 ._th10_txt_bnr::before { background: var(--th24-face-1); }
._th24_module_wrap .container .bg_02 ._th10_txt_bnr::before { background: var(--th24-face-2); }
._th24_module_wrap .container .bg_03 ._th10_txt_bnr::before { background: var(--th24-face-3); }
._th24_module_wrap .container .bg_04 ._th10_txt_bnr::before { background: var(--th24-face-4); }

/* 明段（bg_01 / bg_04）は黒文字、濃段（bg_02 / bg_03）は白文字。 */
._th24_module_wrap .container .bg_01 h3,
._th24_module_wrap .container .bg_01 p,
._th24_module_wrap .container .bg_04 h3,
._th24_module_wrap .container .bg_04 p {
  color: var(--th24-on-light);
}
._th24_module_wrap .container .bg_02 h3,
._th24_module_wrap .container .bg_02 p,
._th24_module_wrap .container .bg_03 h3,
._th24_module_wrap .container .bg_03 p {
  color: var(--th24-on-dark);
}

/* MORE ボタン（文字・枠・矢印）。枠は面に対して 3:1 以上を確保する濃度。 */
._th24_module_wrap .container .bg_01 ._th10_txt_inner ._th10_more span,
._th24_module_wrap .container .bg_04 ._th10_txt_inner ._th10_more span {
  color: var(--th24-on-light);
  border-color: color-mix(in srgb, var(--th24-on-light) 75%, transparent);
}
._th24_module_wrap .container .bg_02 ._th10_txt_inner ._th10_more span,
._th24_module_wrap .container .bg_03 ._th10_txt_inner ._th10_more span {
  color: var(--th24-on-dark);
  border-color: color-mix(in srgb, var(--th24-on-dark) 85%, transparent);
}
._th24_module_wrap .container .bg_01 ._th10_txt_inner ._th10_more span::after,
._th24_module_wrap .container .bg_04 ._th10_txt_inner ._th10_more span::after {
  border-color: var(--th24-on-light);
}
._th24_module_wrap .container .bg_02 ._th10_txt_inner ._th10_more span::after,
._th24_module_wrap .container .bg_03 ._th10_txt_inner ._th10_more span::after {
  border-color: var(--th24-on-dark);
}

/* ホバー時の枠と写真の暗幕も、その枡の面色から作る。 */
._th24_module_wrap ._th10_block.bg_01::before { border-color: color-mix(in srgb, var(--th24-face-1) 78%, #000); }
._th24_module_wrap ._th10_block.bg_02::before { border-color: color-mix(in srgb, var(--th24-face-2) 78%, #000); }
._th24_module_wrap ._th10_block.bg_03::before { border-color: color-mix(in srgb, var(--th24-face-3) 78%, #000); }
._th24_module_wrap ._th10_block.bg_04::before { border-color: color-mix(in srgb, var(--th24-face-4) 78%, #000); }
._th24_module_wrap ._th10_block.bg_01 figure::before { background: color-mix(in srgb, var(--th24-face-1) 78%, #000); }
._th24_module_wrap ._th10_block.bg_02 figure::before { background: color-mix(in srgb, var(--th24-face-2) 78%, #000); }
._th24_module_wrap ._th10_block.bg_03 figure::before { background: color-mix(in srgb, var(--th24-face-3) 78%, #000); }
._th24_module_wrap ._th10_block.bg_04 figure::before { background: color-mix(in srgb, var(--th24-face-4) 78%, #000); }

/* ───────────────────────────────────────────────── 枡の骨格 */

._th24_module_wrap ._th10_block {
  position: relative;
  cursor: pointer;
}

/* ★common.css の a:hover｛opacity:.8｝ を打ち消す。
   帯全体が <a> なので、これが効くと面ごと 80% で白と合成され、
   受領時は 4枚中3枚がホバー時 AA 未達（4.06 / 3.97 / 3.74）だった。 */
._th24_module_wrap ._th10_block > a {
  display: block;
  height: 100%;
  /* ★中身を絶対配置から通常フローへ戻すと module-base の .lgx a｛text-decoration:underline｝ の
     伝播が復活して見出しに下線が生えるので、ここで明示的に止める。 */
  text-decoration: none;
}
._th24_module_wrap ._th10_block > a:hover,
._th24_module_wrap ._th10_block > a:focus,
._th24_module_wrap ._th10_block > a:focus-visible {
  opacity: 1;
}

@media (min-width: 768px) {
  ._th24_module_wrap ._th10_block > a {
    display: flex;
    align-items: stretch;
  }
}

/* 写真の左右を交互にする（受領時の割り当てをそのまま維持）。 */
@media (min-width: 960px) {
  ._th24_module_wrap .container ._th10_block_wrap {
    display: flex;
  }
  ._th24_module_wrap .container ._th10_block_wrap:last-child ._th10_block > a {
    flex-direction: row-reverse;
  }
}
@media (min-width: 768px) and (max-width: 959px) {
  /* タブレット幅は 1列4段。色面と写真は左右のまま。 */
  ._th24_module_wrap .container > .row > .col {
    float: none;
    width: 100%;
  }
  ._th24_module_wrap .container ._th10_block_wrap ._th10_block:last-child > a {
    flex-direction: row-reverse;
  }
}

/* ホバー時の枠。矩形は動かさない（border-box で内側に描く）。 */
._th24_module_wrap ._th10_block::before {
  position: absolute;
  inset: 0;
  display: block;
  content: "";
  z-index: 1;
  border-width: 5px;
  border-style: solid;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
._th24_module_wrap ._th10_block:hover::before,
._th24_module_wrap ._th10_block:focus-within::before {
  opacity: 0.8;
}

/* ───────────────────────────────────────────────── 色面 */

._th24_module_wrap ._th10_block ._th10_txt_bnr {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding: var(--th24-pad);
  font-family: var(--font-body);
}

@media (min-width: 768px) {
  ._th24_module_wrap ._th10_block ._th10_txt_bnr {
    /* 受領時は min-height:430px の固定。R-5 に沿って上限つきの可変にし、
       同時に「写真の枠が縦長になりすぎて 70% 切れる」原因を取り除いている。 */
    min-height: var(--th24-face-min);
  }
}

._th24_module_wrap ._th10_block ._th10_txt_bnr ._th10_txt_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  /* コンテナクエリの基準。見出しを「列の幅」に連動させる（画面幅ではなく列幅で決める）。 */
  container-type: inline-size;
}

._th24_module_wrap ._th10_block ._th10_txt_inner h3 {
  margin: 0 0 0.5em;
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.45;
}
._th24_module_wrap ._th10_block ._th10_txt_inner p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.8;
}

/* MORE。受領時は position:absolute; bottom:0 で、説明文が長いと 24.6〜26.6px 重なっていた。
   通常フローへ戻し、余った高さを margin-top:auto が吸うので下端は揃ったまま重ならない。 */
._th24_module_wrap ._th10_block ._th10_txt_inner p._th10_more {
  position: static;
  width: 100%;
  margin: auto 0 0;
  padding-top: var(--space-sm);
  line-height: 1;
  text-align: right;
}
._th24_module_wrap ._th10_block ._th10_txt_inner p._th10_more span {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.7em 1em;
  border: 1px solid;
  background: transparent;
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
}
._th24_module_wrap ._th10_block ._th10_txt_inner p._th10_more span::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 6%;
  width: 6px;
  height: 6px;
  margin: auto;
  border-top: 1px solid;
  border-right: 1px solid;
  /* ★位置決めに transform を使わない（inset + margin:auto で取り、回転だけ独立プロパティで当てる）。
     ★module-base の .lgx .add_arrow:after｛transform:translate(0,-50%) rotate(45deg)｝ を明示的に切る。
     独立プロパティの rotate は transform より先に適用されるので、切らないと 45+45=90度 回って
     矢印が「」の形になる（実測。受領時は transform 側に 45度 が入っていたので気づけない）。 */
  transform: none;
  rotate: 45deg;
}

@media (min-width: 768px) {
  ._th24_module_wrap ._th10_block ._th10_txt_inner h3 {
    /* 列幅に連動。受領時は 26→16→20→26px と画面幅に対して非単調だった。 */
    font-size: clamp(var(--fs-h3), 9.5cqw, var(--fs-mod-title));
  }
  ._th24_module_wrap ._th10_block ._th10_txt_inner p {
    font-size: var(--fs-body);
  }
  ._th24_module_wrap ._th10_block ._th10_txt_inner p._th10_more span {
    font-size: var(--fs-body);
  }
}

/* ───────────────────────────────────────────────── 菱形（色面から写真へ刺さる） */

._th24_module_wrap ._th10_block ._th10_txt_bnr::before {
  position: absolute;
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  /* 縦中央。transform ではなく inset + margin:auto で取る。 */
  inset-block: 0;
  margin-block: auto;
  rotate: 45deg;
  z-index: 2;
}
._th24_module_wrap ._th10_block ._th10_txt_bnr.arrow_r::before {
  right: -9px;
  left: auto;
}
._th24_module_wrap ._th10_block ._th10_txt_bnr.arrow_l::before {
  left: -9px;
  right: auto;
}
@media (min-width: 768px) and (max-width: 959px) {
  ._th24_module_wrap ._th10_block ._th10_txt_bnr.arrow_r.tab_arrow_reverse::before {
    left: -9px;
    right: auto;
  }
  ._th24_module_wrap ._th10_block ._th10_txt_bnr.arrow_l.tab_arrow_reverse::before {
    left: auto;
    right: -9px;
  }
}

/* ───────────────────────────────────────────────── 写真 */

._th24_module_wrap ._th10_block ._th10_img_bnr {
  position: relative;
  overflow: hidden;
}
._th24_module_wrap ._th10_block ._th10_img_bnr figure {
  margin: 0;
  height: 100%;
  overflow: hidden;
}
._th24_module_wrap ._th10_block ._th10_img_bnr figure img {
  /* 受領時は inset:-300% + margin:auto + width:auto の中央トリミングで、
     960〜1919px では写真の 29.8〜40.6% しか見えていなかった。
     枠に合わせて cover で切るだけにし、1920px 専用の分岐（そこだけ object-fit:cover）も廃止した。 */
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  vertical-align: bottom;
  transition: transform 0.4s ease-out;
}

/* 写真の上に敷くホバーの暗幕。 */
._th24_module_wrap ._th10_block figure::before {
  position: absolute;
  display: block;
  content: "";
  inset: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.4s ease-out;
  pointer-events: none;
}
._th24_module_wrap ._th10_block:hover figure::before,
._th24_module_wrap ._th10_block:focus-within figure::before {
  opacity: 0.5;
}
._th24_module_wrap ._th10_block:hover figure img,
._th24_module_wrap ._th10_block:focus-within figure img {
  transform: scale(1.15);
}

/* ───────────────────────────────────────────────── SP（〜767px） */

@media (max-width: 767px) {
  ._th24_module_wrap .container ._th10_block .col {
    margin-bottom: 0;
  }
  ._th24_module_wrap .container ._th10_block {
    margin-bottom: 4%;
  }
  ._th24_module_wrap .container ._th10_block:last-child {
    margin-bottom: 0;
  }
  /* 縦積みなので写真の枠は自分で比率を持つ。既出の banner-cta が使っていない 16/9。 */
  ._th24_module_wrap ._th10_block ._th10_img_bnr figure {
    aspect-ratio: 16 / 9;
    height: auto;
  }
  /* 菱形は色面の下端の中央へ。 */
  ._th24_module_wrap ._th10_block ._th10_txt_bnr.arrow_l::before,
  ._th24_module_wrap ._th10_block ._th10_txt_bnr.arrow_r::before {
    inset-block: auto -9px;
    left: 0;
    right: 0;
    margin-block: 0;
    margin-inline: auto;
  }
}

/* ───────────────────────────────────────────────── 動きの抑制 */

@media (prefers-reduced-motion: reduce) {
  ._th24_module_wrap ._th10_block figure img,
  ._th24_module_wrap ._th10_block:hover figure img,
  ._th24_module_wrap ._th10_block:focus-within figure img {
    transform: none;
    transition: none;
  }
  ._th24_module_wrap ._th10_block::before,
  ._th24_module_wrap ._th10_block figure::before {
    transition: none;
  }
}