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

.comp_info {
  background: var(--color-bg);
}
.comp_info .container {
  margin-right: auto;
  margin-left: auto;
  padding: 0 1% 1%;
}
.comp_info .comp_img > .row {
  padding: 5% 0;
}
.comp_info .comp_section_title {
  text-align: center;
  padding: 0 1% 2%;
}
.comp_info .comp_eyebrow {
  color: var(--color-primary);
  letter-spacing: 0.2em;
  font-weight: 600;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.comp_info .comp_title {
  color: var(--color-primary);
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.7;
  letter-spacing: 0.03em;
}
.comp_info .comp_wrap {
  background: transparent;
  color: var(--color-text);
  padding: 0 5% 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: 'Noto Serif JP', serif;
}
.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: var(--color-text) !important; }
.comp_info .comp_info_read { line-height: 2.2; margin-bottom: 1.5rem; }
.comp_info .comp_info_address { border-top-color: var(--color-primary-light); }
/* 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%;
  }
}