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

.th01_bnr .th01_bnr_content {
  transition: box-shadow 0.3s;
}
@media (max-width: 767px) {
  .th01_bnr .th01_bnr_content {
    max-width: 500px;
    margin: auto;
  }
}
.th01_bnr .th01_bnr_img {
  position: relative;
  overflow: hidden;
  z-index: 1;
  text-align: center;
  display: block;
}
.th01_bnr .th01_bnr_img:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
  background: color-mix(in srgb, var(--color-primary) 30%, transparent);
  transform: rotateZ(45deg) scale(2, 3) translate(75%, 0);
  transition: 0.3s; color: var(--color-on-primary); }
.th01_bnr .th01_bnr_img .more {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  transform: translate(0, 0);
  text-align: center;
  line-height: 1.8;
  opacity: 0;
  z-index: 3;
  transition: transform 0.3s, opacity 0.3s;
}
.th01_bnr .th01_bnr_img .more span {
  display: block;
  border: 1px solid var(--color-primary);
  border-color: color-mix(in srgb, var(--color-on-primary) 30%, transparent);
  color: var(--color-on-primary);
  background: var(--color-primary);
  padding: 0.6em;
  margin: 0 auto 1px;
  max-width: 280px;
  width: 100%;
  text-align: center;
  text-decoration: none;
  transition: 0.3s;
  font-size: 0.875rem;
}
@media (min-width: 768px) {
  .th01_bnr .th01_bnr_img .more span {
    font-size: 1.125rem;
  }
}
.th01_bnr .th01_bnr_img .more span.inverse {
  border: 1px solid var(--color-primary);
  color: var(--color-heading-ink);
  background: var(--color-primary);
}
.th01_bnr .th01_bnr_img .more span:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 5%;
  margin: auto;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--color-primary);
  border-right: 1px solid var(--color-primary);
  transform: translate(0, -50%) rotate(45deg);
  transition: 0.2s;
}
.th01_bnr .th01_bnr_img .more span.inverse:after {
  border-top: 1px solid var(--color-primary);
  border-right: 1px solid var(--color-primary);
}
.th01_bnr .th01_bnr_img .more span.inverse:hover {
  border-color: var(--color-primary);
  color: var(--color-heading-ink);
  background: var(--color-primary);
}
.th01_bnr .th01_bnr_img .more span.inverse:hover:after {
  border-color: var(--color-primary);
}
.th01_bnr .th01_bnr_img .more span:hover {
  border: 1px solid var(--color-primary);
  color: var(--color-heading-ink);
  background: var(--color-primary);
}
.th01_bnr .th01_bnr_img .more span:hover:after {
  right: 4%;
  border-color: var(--color-primary);
}
@media (max-width: 480px) {
  .th01_bnr .th01_bnr_img .more span {
    width: calc(100% - 20px);
    max-width: none;
  }
}
.th01_bnr .th01_bnr_img .more span:after {
  border-color: var(--color-on-primary);
  right: 8%;
}
.th01_bnr .th01_bnr_img .more span:hover {
  color: var(--color-text);
}
.th01_bnr .th01_bnr_img .more span:hover:after {
  border-color: var(--color-text);
}
.th01_bnr .th01_bnr_img:hover:after {
  background: color-mix(in srgb, var(--color-primary) 80%, transparent);
  transform: rotateZ(45deg) scale(2, 3) translate(0, 0); color: var(--color-on-primary); }
.th01_bnr .th01_bnr_img:hover .more {
  transform: translate(0, -50%);
  opacity: 1;
}
@media (max-width: 767px) {
  .th01_bnr .th01_bnr_img:after {
    transform: rotateZ(45deg) scale(2, 3) translate(0, 0);
  }
  .th01_bnr .th01_bnr_img .more {
    transform: translate(0, -50%);
    opacity: 1;
  }
}
.th01_bnr img {
  max-width: 100%;
}
.th01_bnr .th01_bnr_title {
  margin: 0 0 1.5em;
  padding-bottom: 0.7em;
  color: var(--color-text);
  font-weight: normal;
  position: relative;
  text-align: center;
  margin-bottom: 0;
  padding: 1em 0 0.5em;
  font-size: 1.125rem;
}
.th01_bnr .th01_bnr_title:after {
  content: none;
}
.th01_bnr .th01_bnr_title + p {
  padding: 0 10px 10px 10px;
}

/* ============================================================================
   2026-08-21 実装（banner-cta-th01-bnr）
   計画: .company/engineering/plans/banner-cta-th01-bnr-plan.md
   受領時の構図（等幅3列 / 写真ぜんぶがリンク / 斜めマスクが走る / MORE が写真の中央に浮く /
   見出しと本文は写真の下 / SP は1列でマスクと MORE が常時表示）は変えない。
   実測で見つかった欠陥だけを直す。★このファイル冒頭の方針どおり、元の記述は消さず上書きで調整する。
   ========================================================================== */

.th01_bnr {
  /* 版面。受領時は .container が DOM に無く、1920px で写真1枚が 640px・画面端までベタだった */
  --th01-max: 1440px;
  --th01-edge: clamp(1rem, 3vw, 3rem);
  /* 列間。受領時は 0px で、3枚の写真が連続して「1枚の帯」に見えていた */
  --th01-gap: clamp(1.25rem, 3vw, 3rem);
  /* 写真枠。受領時は height:auto だったので 3枚の縦横比の差がそのまま段差になっていた */
  --th01-ratio: 3 / 2;
  --th01-ratio-sp: 16 / 9;
  /* 斜めマスクの濃度（rest は PC では枠外に逃げているので SP 専用の値） */
  --th01-mask-rest: 30%;
  --th01-mask-hover: 66%;
}

/* section.lgx{padding: … 0} は左右が 0。版面の余白をモジュール側で作る（詳細度 0-2-0 > 0-1-1） */
.lgx.th01_bnr {
  padding-left: var(--th01-edge);
  padding-right: var(--th01-edge);
}
.th01_bnr .row.tile {
  max-width: var(--th01-max);
  margin-left: auto;
  margin-right: auto;
}

/* ── PC: float 3列 → flex。
   module-base.css の .tile には PC 側の高さ揃えが無く（SP の height:auto だけが移植されている）、
   受領時はカードの下端が 39〜99px ずれていた（配色・キャッチ長・フォントを振っても同値＝構造欠陥）。
   .span_4 の 33.33% は gap を引く前の値なので、flex:1 1 0 で等分し直す。 */
@media (min-width: 769px) {
  .th01_bnr .row.tile {
    display: flex;
    align-items: stretch;
    gap: var(--th01-gap);
  }
  /* 土台の clearfix（.lgx .row:after{content:"";display:table}）は3つ目の flex アイテムになる */
  .th01_bnr .row.tile:after { display: none; }
  .th01_bnr .col.th01_bnr_content {
    float: none;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0;
  }
}

/* カードを縦 flex にし、本文に余りを吸わせて3枚の下端を揃える */
.th01_bnr .col.th01_bnr_content {
  display: flex;
  flex-direction: column;
}
.th01_bnr .col.th01_bnr_content:after { display: none; }
.th01_bnr .th01_bnr_title + p { flex: 1 1 auto; }

/* ── 写真枠。枠を先に決めて写真を cover で流し込む（案件ごとに縦横比が違う前提・規約 R-5） */
.th01_bnr .th01_bnr_img {
  width: 100%;
  aspect-ratio: var(--th01-ratio);
  max-height: min(60vh, 380px);
  /* 写真の読み込み前・透過 webp のときの地。テーマから作るので生値ではない */
  background: color-mix(in srgb, var(--color-text) 8%, var(--color-bg));
}
.th01_bnr .th01_bnr_img img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none;   /* common.css の img{max-height:800px} は intrinsic 高さの画像向け */
  object-fit: cover;
  object-position: center;
}

/* ── 斜めマスク。rest の逃がし方（枠外）は受領時のまま。
   ホバー時は MORE を不透明な面で読ませるので、写真を塗り潰さない濃度まで下げる。 */
.th01_bnr .th01_bnr_img:after {
  background: color-mix(in srgb, var(--color-primary) var(--th01-mask-rest), transparent);
  /* ★rest の逃がし量。受領時の translate(75%) は「枠が横長のときだけ」枠外へ出る量で、
     3枚目（1280x896）は受領時から右下に色の三角が残っていた（実測 1%）。
     枠を aspect-ratio で揃えると3枚とも同じ比になるため、比に依存しない量まで送る。
     必要量は T > 0.677 + 0.177 * (高さ/幅)。3/2 なら 79.5%、16/9 なら 77.7%、1/1 でも 85.4%。 */
  transform: rotateZ(45deg) scale(2, 3) translate(100%, 0);
}
.th01_bnr .th01_bnr_img:hover:after {
  background: color-mix(in srgb, var(--color-primary) var(--th01-mask-hover), transparent);
}

/* ── MORE。
   受領時は面 var(--color-primary) × 文字 var(--color-on-primary) で、
   common.css の a:hover{opacity:.8} がカードごと薄くするため実効コントラストが
   既定 6.06→4.30 / 高彩度 4.85→4.13 と AA(4.5) を割っていた（規約 R-7）。
   面をテーマの地色にすると、opacity 合成後も地色のままなので写真の明るさからも配色からも独立する。
   ★ホバー側は「元の :hover 指定より後ろ・同じ深さ」で書く（後付けパッチが :hover に勝つ罠の裏返し）。 */
.th01_bnr .th01_bnr_img .more {
  padding-left: var(--th01-gap);
  padding-right: var(--th01-gap);
}
.th01_bnr .th01_bnr_img .more span,
.th01_bnr .th01_bnr_img .more span:hover,
.th01_bnr .th01_bnr_img:hover .more span {
  background: var(--color-bg);
  color: var(--color-text);
  /* ★プレートの縁は「地色の面に対して」引く。写真やマスクの明るさに依存しないので、
     淡色プリセット × 明るい写真（プレートと地の輝度比が 1.39 まで落ちる最悪ケース）でも
     ボタンの矩形が消えない。 */
  border: 1px solid color-mix(in srgb, var(--color-text) 45%, transparent);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  max-width: 260px;
  padding: 0.75em 1.6em;
}
.th01_bnr .th01_bnr_img .more span:after,
.th01_bnr .th01_bnr_img .more span:hover:after,
.th01_bnr .th01_bnr_img:hover .more span:after {
  border-color: var(--color-text);
  right: 8%;
}
@media (min-width: 769px) {
  .th01_bnr .th01_bnr_img .more span,
  .th01_bnr .th01_bnr_img .more span:hover,
  .th01_bnr .th01_bnr_img:hover .more span { font-size: var(--fs-body); }
}

/* ── 見出しと本文。受領時は見出しが中央寄せ・本文が左寄せで揃いがバラバラだった。
   本文を100〜200字読ませる部品なので左揃えに統一する。文字サイズはトークン経由（規約 R-4）。 */
.th01_bnr .th01_bnr_title {
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--fs-mod-title);
  line-height: 1.35;
  color: var(--color-heading-ink, var(--color-text));
  padding: 1.1em 0 0;
  margin: 0 0 0.5em;
}
.th01_bnr .th01_bnr_title + p {
  padding: 0;
  margin: 0;
  text-align: left;
  color: var(--color-text);
  font-size: var(--fs-body);
}

/* ── SP。土台は min-width:768px で3列に切り替わるので、規約の BP(768px) に合わせて 768px を1列にする */
@media (max-width: 768px) {
  /* ★セレクタに .row.tile > を足して (0,3,0) → (0,4,0) にしている。理由:
     module-base.css の @media(min-width:768px) に
       .lgx :not(.reverse) > .col:first-child { margin-left: 0 }   ← (0,4,0)
     があり、768px ちょうど（土台の min-width:768px とこの max-width:768px が重なる 1px）でだけ
     1枚目の margin-left だけが 0 に上書きされ、2・3枚目は中央のまま1枚目だけ左へ 111px ずれていた。
     詳細度を同点にすれば後勝ちで取り返せる（このファイルは module-base.css より後に読まれる）。 */
  .th01_bnr .row.tile > .col.th01_bnr_content {
    float: none;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  .th01_bnr .row.tile > .col.th01_bnr_content + .th01_bnr_content { margin-top: var(--space-lg, 48px); }
  .th01_bnr .th01_bnr_img {
    aspect-ratio: var(--th01-ratio-sp);
    max-height: min(46vh, 300px);
  }
  /* 受領時は width:calc(100% - 20px) で、帯が写真を端から端まで横断していた */
  .th01_bnr .th01_bnr_img .more span,
  .th01_bnr .th01_bnr_img .more span:hover,
  .th01_bnr .th01_bnr_img:hover .more span {
    width: auto;
    max-width: 220px;
    padding: 0.7em 1.5em;
  }
  .th01_bnr .th01_bnr_title { font-size: var(--fs-h3); padding-top: 0.9em; }
  /* 受領時の「マスクと MORE を常時表示」は 767px 以下だった。BP を 768px に寄せるので揃える
     （それが無いと 768px だけ「1列なのにホバーしないと MORE が出ない」になる） */
  .th01_bnr .th01_bnr_img:after { transform: rotateZ(45deg) scale(2, 3) translate(0, 0); }
  .th01_bnr .th01_bnr_img .more { transform: translate(0, -50%); opacity: 1; }
  .th01_bnr .th01_bnr_title + p { font-size: var(--fs-small); }
}

/* ── 動きの停止（規約 R-9）。★元の transition と同じ深さのセレクタで書く（詳細度負けの罠） */
@media (prefers-reduced-motion: reduce) {
  .th01_bnr .th01_bnr_content,
  .th01_bnr .th01_bnr_img:after,
  .th01_bnr .th01_bnr_img .more,
  .th01_bnr .th01_bnr_img .more span,
  .th01_bnr .th01_bnr_img .more span:after { transition: none; }
}