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

.comp_info {
  background-image: url(images/comp-info-bg-1.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.comp_info .container {
  margin-right: auto;
  margin-left: auto;
  padding: 0 1% 1%;
}
.comp_info .comp_img > .row {
  padding: 5% 0;
}
.comp_info .comp_wrap {
  background: rgba(0, 0, 0, 0.7);
  /* ★黒オーバーレイ(上のrgba)前提なので文字は白で固定する(2026-07-24)。
     元は var(--color-on-primary) だったが、これは「primary色の面に乗る文字」用で、
     primaryが明るい金色のサイトでは #111(黒) に解決され、黒オーバーレイ上に黒文字=
     読めない(実測 比1.11)。濃色primaryのサイトでは偶然白=バグが露見しなかった。
     暗面の文字なので #fff 固定(白/黒は意図明確=契約C3の温存対象)。 */
  color: #fff;
  padding: 5%;
  /* 2026-08-25: 土台 .lgx{font-family:Arial,…}(0,1,0) が common.css の body{font-family:var(--font-body)}
     (0,0,1) に詳細度で勝ち、フォントプリセットを振っても文字が1文字も変わらない罠がある
     (anti-patterns.md「土台の.lgx{font-family:Arial…}が…」/ banner-cta-th02 等で既出)。
     .comp_wrap(0,2,0)で明示して勝たせる。 */
  font-family: var(--font-body);
}
/* module-base の dt/dd 既定色(#111)が【直接指定】で継承(.comp_wrap の白)を破るため、
   子孫にも明示展開して詳細度で勝たせる。 */
/* !important が要る: 同ファイルの .comp_info_read/.comp_info_text が heading-ink を
   !important で当てており(白背景前提のルール)、黒オーバーレイ上では白が正しい。 */
.comp_info .comp_wrap dt,
.comp_info .comp_wrap dd,
.comp_info .comp_wrap p,
.comp_info .comp_wrap .comp_info_read,
.comp_info .comp_wrap .comp_info_text,
.comp_info .comp_wrap .comp_info_address dt,
.comp_info .comp_wrap .comp_info_address dd { color: #fff !important; }
/* 2026-08-25: R-5対応。width/height属性のみだと案件写真の縦横比が変わったとき歪む余地が残るため、
   figure側にaspect-ratioを明示し、imgはobject-fit:coverで安定させる。比率は受領時サンプル(1408x768)
   に合わせる。 */
.comp_info .comp_info_img {
  aspect-ratio: 11 / 6;
}
.comp_info .comp_info_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.comp_info .comp_info_text {
  margin-top: 5%;
}
.comp_info .comp_info_address {
  border-top: 1px solid #fff;
}
/* 2026-08-25: .comp_info_wrap（写真+テキスト）と .comp_map_wrap（地図）は独立した float 列で、
   高さが揃う仕組みがない。地図は iframe height="450" 固定、写真+テキスト側は内容量で伸縮するため、
   2カラム時（768px以上）は常に地図側が短く、下に123〜281pxの空白ができていた（実測）。
   モバイルファーストで基本値を「縦積み用（aspect-ratio可変）」にしておき、
   768px以上でだけ flex 化して高さを一致させ、iframe の高さを 100% に上書きする
   （height の明示指定は aspect-ratio に優先するので、この1点で両立する）。
   ★ブレークポイントは module-base.css の2カラム化と同じ `min-width:768px` に厳密に合わせる必要がある
   （769pxにすると768pxちょうどで「2カラムなのに高さが揃わない」状態が1px幅だけ残ってしまう）。
   非標準ブレークポイントだが、この理由により768pxを維持する（lintのR6-bp警告は許容）。 */
.comp_info .comp_map_canvas {
  width: 100%;
  overflow: hidden;
}
.comp_info .comp_map_canvas iframe {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  height: auto;
}
@media (min-width: 768px) {
  .comp_info .comp_wrap > .row {
    display: flex;
    align-items: stretch;
  }
  .comp_info .comp_map_wrap {
    display: flex;
  }
  .comp_info .comp_map_canvas {
    flex: 1;
  }
  .comp_info .comp_map_canvas iframe {
    height: 100%;
  }
}