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

.th02_bnr .th02_bnr_parent {
  position: relative;
}
.th02_bnr .th02_bnr_parent:after, .th02_bnr .th02_bnr_parent:before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 2px;
  background: var(--color-text);
  z-index: 1;
  transition: 0.5s; color: var(--color-bg); }
.th02_bnr .th02_bnr_parent:before {
  top: 5px;
  left: 5px;
}
.th02_bnr .th02_bnr_parent:after {
  bottom: 5px;
  right: 5px;
}
.th02_bnr .th02_bnr_parent:hover:after, .th02_bnr .th02_bnr_parent:hover:before {
  width: calc(100% - 0);
}
@media (min-width: 768px) {
  .th02_bnr .th02_bnr_children {
    display: flex;
    height: 100%;
  }
}
.th02_bnr .th02_bnr_children {
  position: relative;
}
.th02_bnr .th02_bnr_children:after, .th02_bnr .th02_bnr_children:before {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 2px;
  background: var(--color-text);
  z-index: 1;
  transition: 0.5s; color: var(--color-bg); }
.th02_bnr .th02_bnr_children:before {
  left: 5px;
  bottom: 5px;
}
.th02_bnr .th02_bnr_children:after {
  right: 5px;
  top: 5px;
}
.th02_bnr .th02_bnr_children:hover:after, .th02_bnr .th02_bnr_children:hover:before {
  height: calc(100% - 0);
}
.th02_bnr .th02_bnr_text {
  padding: 0.5em;
}
@media (min-width: 768px) {
  .th02_bnr .th02_bnr_text {
    padding: 20px 20px 60px;
    position: relative;
  }
  .th02_bnr .th02_bnr_text .more {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: calc(100% - 40px);
  }
  .th02_bnr .th02_bnr_text .more a {
    padding: 0.3em 0.1em;
  }
}
@media (min-width: 768px) {
  .th02_bnr .th02_bnr_img figure {
    min-height: 300px;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
}
@media (min-width: 768px) {
  .th02_bnr .th02_bnr_img figure > img {
    display: block;
    position: absolute;
    top: -300%;
    left: -300%;
    right: -300%;
    bottom: -300%;
    margin: auto;
    height: 100%;
    max-width: none;
  }
}
.th02_bnr .row.reverse {
  flex-direction: row-reverse;
}
.th02_bnr h3 {
  margin-bottom: 0.5em;
  padding: 0;
}

/* ==========================================================================
   2026-08-21 実装（banner-cta-th02-bnr）
   計画: .company/engineering/plans/banner-cta-th02-bnr-plan.md
   ブリーフ: .company/creative/briefs/banner-cta-th02-bnr-brief.md

   受領時の構図は1つも変えない
   ―― 2列×3行の市松タイル／各枡は写真半分＋テキスト半分／写真の左右が交互／
      枡と枡の隙間ゼロ／版面 1000px（.lgx .container）／見出し下の全幅2px罫／
      ホバーで四隅から枠線が伸びる。
   実測で見つかった欠陥だけを直す。★上の受領時の記述は消さず、この下の上書きで調整する。

   ★ブレークポイントについて（規約 R-6 / lint の R6-bp を承知のうえで min-width:768px を使う）
     _shared/module-base.css は 767/768 で切り替わり（.lgx .col{float:left} は min-width:768、
     .tile > *{height:auto!important} は max-width:767）、受領時のこのファイルも min-width:768 で
     組まれている。ここだけ min-width:769 にすると 768px ちょうどで段組みが float に戻り、
     検収幅の1つ（768px）が受領時の崩れたままになる。境界を土台と一致させる。
   ========================================================================== */

.th02_bnr {
  /* 写真枠の比。受領時は min-height:300px の固定値で枠が縦長（比 0.60〜0.83）に潰れ、
     1.43／1.83 の横長写真が 32.9〜58.3% しか映っていなかった（R-5 違反） */
  --th02-ratio: 4 / 3;
  --th02-ratio-sp: 3 / 2;
  /* 枡の内側の余白 */
  --th02-pad: clamp(0.875rem, 1.5vw, 1.25rem);
}

/* ── 文字サイズを --fs-* へ戻す（R-4）。
   受領時は .lgx にスコープされた font-size:62.5% のせいで module-base.css の rem 指定が
   すべて 1.6 倍になり、h3=28.8px / 本文=22.4px / MORE=28.8px と
   「MORE の文字が本文より大きい」状態だった（主従が付かない）。 */
.th02_bnr .th02_bnr_text h3 {
  font-size: var(--fs-body);
  line-height: 1.5;
  padding-bottom: 0.5em;
  margin-bottom: 0.75em;
  /* 見出し1行の部品なので 2〜3行に割れたときの孤立行を避ける（非対応環境では素通り） */
  text-wrap: balance;
}
/* 見出し下の罫（受領時の意匠）。_shared は SP で 20px の短い破線状にしているが、
   受領時はそれが写真の回り込みの下に孤立した「—」として浮いていた。
   PC と同じ全幅にして、見出しと本文を分ける罫として機能させる。 */
.th02_bnr .th02_bnr_text h3:after {
  width: 100%;
}
.th02_bnr .th02_bnr_text > p {
  font-size: var(--fs-small);
  line-height: 1.75;
  margin: 0;
}
.th02_bnr .th02_bnr_text .more a {
  font-size: var(--fs-small);
  line-height: 1.4;
}

/* ── 枡の中身を flex 2列に（SP も PC も）。
   受領時の SP は .th02_bnr_img が float:left・幅 32% のサムネイルで、本文がその回り込みで
   ギザギザに字下げされ（1行目だけ 100px 下がる）、h3::after の 20px の罫が
   サムネイルの下に孤立した「—」として浮いていた。回り込みをやめて列にする。
   `sp_image_left`（写真は左）と `reverse`（PC で左右交互）はどちらも保つ。 */
.th02_bnr .th02_bnr_children {
  display: flex;
  align-items: stretch;
}
/* ★`!important` の理由（2026-08-21 実測）
   module-base.css の SM-FIX ブロックに
   `.lgx .row:has(> .col > figure:only-child):not(:has(.slider)) > .col:not(:has(> figure:only-child))
    { align-self: center }`
   があり、詳細度が **(0,7,2)** ある（`:has()` は引数の詳細度を持ち込む）。
   クラスを7つ重ねても届かないので、1プロパティだけ `!important` で受ける。
   縦中央だと、同じ行の2枚で見出しの上端と MORE の下端がそろわなくなる
   （枡の高さは行でそろうが、テキストの高さは枚ごとに違うため）。 */
.th02_bnr .th02_bnr_children > .col {
  float: none;
  margin: 0;
  min-width: 0;
  align-self: stretch !important;
}
/* 土台の clearfix（.lgx .col:after{content:"";display:table}）は
   列を flex にすると余分な子になる */
.th02_bnr .th02_bnr_img:after,
.th02_bnr .th02_bnr_text:after {
  display: none;
}

/* ★SP では _shared の `.lgx .sp_image_left .col:first-child`（0,4,0）が
   `display:inline-block; float:left; width:32%; margin-right:2%` を当ててくる。
   同じかそれ以上の詳細度で受けないと、写真列が回り込みのサムネイルに戻る。 */
.th02_bnr .th02_bnr_children.sp_image_left > .col.th02_bnr_img {
  display: flex;
  float: none;
  flex: 0 0 40%;
  width: 40%;
  max-width: 40%;
  margin: 0;
}
/* 写真枠。`aspect-ratio` が行の高さの下地を作り、テキストが伸びれば
   `height:100%` で枡の高さに追従する（＝写真の下に白い帯が出ない）。
   ★`max-height` は付けない。版面が 1000px 止まりで写真列は最大 250px 幅、
   高さは枡＝テキスト量で頭打ちになるので「広い画面で比が伸び続ける」事故は起きない。
   逆に vh の蓋を付けると、背の低いビューポート（横向きの端末）で
   蓋が当たって写真の下に白帯が出る。R-5 の趣旨は aspect-ratio で満たしている。 */
.th02_bnr .th02_bnr_img figure {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: var(--th02-ratio-sp);
  position: relative;
  overflow: hidden;
  margin: 0;
}
/* 受領時は top/left/right/bottom:-300% + margin:auto の中央寄せハック。
   object-fit へ置き換える（R-5 / 破綻ケース5） */
.th02_bnr .th02_bnr_img figure > img {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
}

/* ── テキスト側。受領時は padding-bottom:60px の固定領域＋ .more の絶対配置で、
   サンプル文言のままでも本文が MORE に 9.7px 食い込んでいた（768px で 8.2px）。
   通常フローへ戻し、MORE は margin-top:auto で下端へ寄せる。
   → 文章が伸びたら枡のほうが伸びる形になり、重なりが構造的に起きなくなる。 */
.th02_bnr .th02_bnr_text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--th02-pad);
}
.th02_bnr .th02_bnr_text .more {
  position: static;
  width: auto;
  margin-top: auto;
  padding-top: 0.9em;
}
.th02_bnr .th02_bnr_text .more a {
  padding: 0.5em 0.6em;
}

/* ── SP では枠線を常時表示する。
   ホバーはタッチ端末に存在しないため、受領時の SP は 6枚の枡の境界が1本も無く、
   6件の導線が1本の帯に溶けていた（「6つある」ことが伝わらない＝存在理由の欠落）。
   PC でホバー時に現れるのと同じ線をそのまま出す。 */
.th02_bnr .th02_bnr_parent:before,
.th02_bnr .th02_bnr_parent:after {
  width: calc(100% - 10px);
}
.th02_bnr .th02_bnr_children:before,
.th02_bnr .th02_bnr_children:after {
  height: calc(100% - 10px);
}

@media (min-width: 768px) {
  /* ── タイル行を grid に。
     受領時は .lgx .col{float:left} の float 段組みで、6枚の文字量がそろわないと
     列が入れ替わり、左列に 500×300 の空洞ができていた（1280px 実測。768px では
     右列に3枚が縦積みになる）。`.row_inline` は `.gutters` 配下にしか効かないので、
     受領時のこの行は実質ただの float だった。
     DOM は1文字も触らず、段組みだけ grid に置き換える。隙間は受領時どおり 0。 */
  .th02_bnr .row.row_inline.tile {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 土台の clearfix（.lgx .row:after{content:"";display:table}）は 7つ目の grid アイテムになる */
  .th02_bnr .row.row_inline.tile:after {
    display: none;
  }
  .th02_bnr .row.row_inline.tile > .col.th02_bnr_parent {
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
    min-width: 0;
  }

  /* 写真とテキストは受領時どおり半分ずつ */
  .th02_bnr .th02_bnr_children.sp_image_left > .col.th02_bnr_img,
  .th02_bnr .th02_bnr_children.sp_image_left > .col.th02_bnr_text {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
  }
  .th02_bnr .th02_bnr_img figure {
    aspect-ratio: var(--th02-ratio);
  }
  .th02_bnr .th02_bnr_text h3 {
    font-size: var(--fs-h3);
  }

  /* PC では枠線はホバー（とフォーカス）でだけ描く＝受領時の意匠 */
  .th02_bnr .th02_bnr_parent:before,
  .th02_bnr .th02_bnr_parent:after {
    width: 0;
  }
  .th02_bnr .th02_bnr_children:before,
  .th02_bnr .th02_bnr_children:after {
    height: 0;
  }
}

/* ── ホバーの枠線を生き返らせる。
   受領時は `width: calc(100% - 0)` / `height: calc(100% - 0)` と書かれていたが、
   calc() は <percentage> から単位なしの <number> を引けないため宣言ごと破棄される
   （Chrome 実測: el.style.width='calc(100% - 0)' → ""）。
   ＝ README が謳う「ホバーで枠線が四辺から描かれる」が受領時から一度も動いていなかった。
   併せて 5px のインセットぶん両端を引く（100% のままだと枠の外へ 5px はみ出し、
   枡の隙間が 0 なので隣の枡へ食い込む）。 */
.th02_bnr .th02_bnr_parent:hover:before,
.th02_bnr .th02_bnr_parent:hover:after,
.th02_bnr .th02_bnr_parent:focus-within:before,
.th02_bnr .th02_bnr_parent:focus-within:after {
  width: calc(100% - 10px);
}
.th02_bnr .th02_bnr_children:hover:before,
.th02_bnr .th02_bnr_children:hover:after,
.th02_bnr .th02_bnr_children:focus-within:before,
.th02_bnr .th02_bnr_children:focus-within:after {
  height: calc(100% - 10px);
}

/* ── MORE のホバー。
   _shared/module-base.css の `.lgx .add_arrow:hover` はボタンを
   「白地 ＋ color-mix(primary 68%, #000) の文字」へ反転させるが、淡色ベージュでは 3.52。
   さらに _shared/common.css:106 の `a:hover{opacity:.8}` がボタンごと地とブレンドして
   2.61 まで落ちる（既定でも 6.06 → 3.82）。どちらも編集不可なのでモジュール側で打ち消す。
   面と文字のトークンの組（--color-primary / --color-on-primary）を rest のまま保つので、
   どの配色プリセットでも rest と同じコントラストが保証される。
   ホバーの合図は「枠線が四隅から伸びる」＋「矢印が右へ寄る」（どちらも幾何）で取る。
   ★角丸・影のトークンは値が空で届くため box-shadow の「浮き」では合図できない（規約 §11-2）。 */
.th02_bnr .th02_bnr_text .more a.add_arrow:hover,
.th02_bnr .th02_bnr_text .more a.add_arrow:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  opacity: 1;
}
.th02_bnr .th02_bnr_text .more a.add_arrow:hover:after,
.th02_bnr .th02_bnr_text .more a.add_arrow:focus-visible:after {
  border-top-color: var(--color-on-primary);
  border-right-color: var(--color-on-primary);
}

/* ── 動きの停止（R-9）。
   ★元の transition が書かれているセレクタと同じ深さで書く（浅く書くと詳細度で負ける）。 */
@media (prefers-reduced-motion: reduce) {
  .th02_bnr .th02_bnr_parent:before,
  .th02_bnr .th02_bnr_parent:after,
  .th02_bnr .th02_bnr_children:before,
  .th02_bnr .th02_bnr_children:after,
  .th02_bnr .th02_bnr_text .more a.add_arrow,
  .th02_bnr .th02_bnr_text .more a.add_arrow:after {
    transition: none;
  }
}