@charset "UTF-8";

/* ------------------------------------------------------------------
  id_01080 記事固有
  採用設備一覧：写真ごとに横幅の上限を決め、画像の比率は保つ
------------------------------------------------------------------ */

/* 上段2段は4列、写真2枚組の段は3列（2026-08-24 Figma指示で 185px→205px / 265px→280px）
   878（枠の内寸）から gap 18px を引いて等分した値 */
#terasu-contents .trendnews__equip-items figure {
  flex: 0 0 auto;
  max-width: calc(25% - 13.5px);
}

#terasu-contents .trendnews__equip-items figure.pair {
  max-width: calc(33.333% - 12px);
}

/* 写真2枚組は枠幅ぴったりに収まる高さにする。
   写真の実寸比の合計は約 2.168 なので (280 - gap4) / 2.168 ≒ 127px。
   幅を伸ばして揃えると縦横比が崩れるため、高さで合わせる */
#terasu-contents .trendnews__equip-items figure.pair .pair__imgs img {
  height: 127px;
}

@media screen and (max-width: 640px) {
  #terasu-contents .trendnews__equip-items figure {
    max-width: calc(50% - 5px);
  }

  #terasu-contents .trendnews__equip-items figure.pair {
    max-width: 100%;
  }

  /* 【社内FB 2026-08-25】SPの狭い幅で2枚目の写真が枠からはみ出す件の修正。
     もとは Figma SP修正後（8059:16005・幅390px）の枠内寸319pxを基準に
     (319 - gap4) / 2.166 ≒ 145px と高さを固定していたが、
     枠の内寸は端末幅で変わる（375px→305.5px／360px→292px／320px→256px）。
     高さを固定すると写真の横幅も318pxのまま残るため、2枚目が枠外へ出ていた
     （320pxでは62pxはみ出し、ページごと30px横スクロールしていた）。
     高さの固定をやめ、枠幅から gap 4px を引いた残りを2枚の実寸比で配分する。
     配分は「横÷縦 ÷ 2枚の合計」。高さは比率まかせになるので2枚とも揃う */
  #terasu-contents .section .trendnews__equip-items figure.pair .pair__imgs img {
    width: auto;
    height: auto;
    min-width: 0;
  }

  /* 9枚目：434x290 ＋ 194x290 → 1.4966 : 0.6690 */
  #terasu-contents .section .trendnews__equip-items figure.pair:nth-of-type(9) .pair__imgs img:first-child {
    width: calc((100% - 4px) * 0.6911);
  }

  #terasu-contents .section .trendnews__equip-items figure.pair:nth-of-type(9) .pair__imgs img:last-child {
    width: calc((100% - 4px) * 0.3089);
  }

  /* 10枚目：432x288 ＋ 243x364 → 1.5000 : 0.6676 */
  #terasu-contents .section .trendnews__equip-items figure.pair:nth-of-type(10) .pair__imgs img:first-child {
    width: calc((100% - 4px) * 0.6920);
  }

  #terasu-contents .section .trendnews__equip-items figure.pair:nth-of-type(10) .pair__imgs img:last-child {
    width: calc((100% - 4px) * 0.3080);
  }

  /* 11枚目：210x283 ＋ 428x298 → 0.7420 : 1.4362
     （先方FB 2026-08-28「多回路EM・エマネージ 順番、トリミングなるべく合わせる
       （横が足りないのは仕方ないので、少し引きでもOK）」への対応。
       紙面どおり 多回路EM を左・エマネージを右にし、多回路EMは紙面の画角に合わせた。
       エマネージは紙面の画角（286x284・比1.007）だと枠幅が226pxで他2組の280pxに届かない。
       表示幅は比だけで決まる（高さ127px固定）ので、比を1.4366に保ったまま切り出し範囲を縮め、
       天地は紙面＋5%・横だけ扉のぶん広い画角にしている。枠幅と天地は他2組と揃う） */
  #terasu-contents .section .trendnews__equip-items figure.pair:nth-of-type(11) .pair__imgs img:first-child {
    width: calc((100% - 4px) * 0.3406);
  }

  #terasu-contents .section .trendnews__equip-items figure.pair:nth-of-type(11) .pair__imgs img:last-child {
    width: calc((100% - 4px) * 0.6594);
  }
}

/* Figma指定：見出しと写真の間 15px ／ figcaption の上 5px ／ 段間 25px。
   common_hint の `.trendnews .c-sect figure{margin-top:50px}` /
   `… figure figcaption{margin-top:15px}` に詳細度で負けるため
   `#terasu-contents .section` スコープで書く（id_01081 と同じ形） */
#terasu-contents .section .trendnews__equip-ttl {
  margin-bottom: 15px;
}

#terasu-contents .section .trendnews__equip-items {
  row-gap: 25px;
}

#terasu-contents .section .trendnews__equip-items figure {
  margin-top: 0;
}

#terasu-contents .section .trendnews__equip-items figure figcaption {
  margin-top: 5px;
}

@media screen and (max-width: 640px) {
  #terasu-contents .section .trendnews__equip-ttl {
    margin-bottom: 9px;
  }

  #terasu-contents .section .trendnews__equip-items {
    row-gap: 20px;
  }

  #terasu-contents .section .trendnews__equip-items figure figcaption {
    margin-top: 5px;
  }
}

/* Figma指定：ZEB Ready の2枚並びは 680 : 240（gap 40px）。
   common.css の .terasu__img_flex は 1fr 1fr / gap 25px なので上書きする */
#terasu-contents .section .jirei__zeb-figs {
  grid-template-columns: 680fr 240fr;
  gap: 0 40px;
}

/* SPは common.css と同じく縦積みに戻す（2列のままだとBELSのキャプションが
   240px幅で5行に折り返してしまう）。縦長のBELS写真は幅を絞って中央に置く */
@media screen and (max-width: 640px) {
  #terasu-contents .section .jirei__zeb-figs {
    grid-template-columns: 1fr;
    gap: 20px 0;
  }

  #terasu-contents .section .jirei__zeb-figs figure:last-child {
    max-width: 240px;
    margin: 0 auto;
  }
}

/* Figma指定：ESCO事業の仕組みは見出しごと枠で囲む（見出しの ■ はHTMLに直書き）。
   figure に既定の margin-top:50px が付かない要素なので、枠側に余白を持たせる */
#terasu-contents .section .jirei__fig_box {
  margin-top: 50px;
  padding: 15px 30px;
  border: 1px solid #8b8c91;
}

#terasu-contents .section .jirei__fig_box .jirei__fig_box_ttl {
  margin: 0;
  padding-bottom: 5px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.6;
}

#terasu-contents .section .jirei__fig_box figure {
  max-width: 636px;
  margin: 0 auto;
}

#terasu-contents .section .jirei__fig_box figure img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 640px) {
  #terasu-contents .section .jirei__fig_box {
    margin-top: 80px;
    padding: 15px 15px 23px;
  }

  #terasu-contents .section .jirei__fig_box .jirei__fig_box_ttl {
    font-size: 14px;
  }
}

/* Figmaアノテーション指定：2つ目の「お施主様の声」の上余白を詰める（80px → 40px）
   1つ目は80pxのまま（修正後デザインも80px）。id_01081 と同じ形 */
#terasu-contents .section .c-bg > .c-sect:last-child {
  margin-top: 40px;
}

/* Figma指定：注記は独立段落をやめ、2つ目の声の本文末尾に置く */
#terasu-contents .section .trendnews__comment-text .trendnews__note {
  display: block;
  margin-top: 20px;
}