@charset "UTF-8";

/* ------------------------------------------------------------------
  id_01081 記事固有
  屋外照明の一覧：紙面どおり3列。写真の比率は保つ
------------------------------------------------------------------ */
#terasu-contents .trendnews__equip-items figure {
  flex: 0 0 auto;
  max-width: calc(33.333% - 12px);
}

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

/* Figmaアノテーション指定：見出しと写真の間を詰める（50px → 15px。「margin-bottom:15px に詰める」）
   写真の上の余白は hint-templates の figure margin ではなく
   「見出しの margin-bottom」＋「段間の row-gap」で作る（修正後デザインの構成に合わせた）。
   common_hint の `.trendnews .c-sect figure{margin-top:50px}` /
   `… figure figcaption{margin-top:15px}` に詳細度で負けるため
   `#terasu-contents .section` スコープで書く */
#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;
}

/* SPは id_01080 のFigma SP修正後（8059:16005）の実測値に合わせる */
@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アノテーション指定：2つ目の「お施主様の声」の上余白を詰める（80px → 40px）
   1つ目は80pxのまま（修正後デザインも80px） */
#terasu-contents .section .c-bg > .c-sect:last-child {
  margin-top: 40px;
}

/* 【社内FB 2026-08-25】SP：見出しの行間を詰める。
   `.trendnews__equip-ttl` は <p> なので common_hint の
   `.trendnews .c-sect p { line-height: 2.2 }` を受けて 39.6px（18px×2.2）になっていた。
   参考指定された id_01084 の同等見出し（.terasu__img_box_ttl）は
   common.css のSP指定が `line-height: 1.4` なので、同じ値に揃える。
   PCは参考側も 2.2 のままなのでSP限定にする */
@media screen and (max-width: 640px) {
  #terasu-contents .section .trendnews__equip-ttl {
    line-height: 1.4;
  }
}

/* 【社内FB 2026-08-25】SP：QQポール（Before/After）の天地を隣の写真に合わせる。
   隣は3:2の写真なので高さ＝枠幅×2/3。縦写真（240x379）で同じ高さにするには
   1枚の幅＝枠幅 × (2/3) × (240/379) ＝ 42.22%。
   残り（矢印18px＋余り5px）は space-between で左右に配る。
   ※ 高さをpxで固定すると width:auto の写真は幅も固定され、狭い端末で
      枠からはみ出す（id_01080 で実際に起きた）。必ず%で持たせる */
@media screen and (max-width: 640px) {
  #terasu-contents .section .beforeafter__imgs {
    gap: 0;
    justify-content: space-between;
  }

  #terasu-contents .section .beforeafter__item {
    flex: 0 0 42.22%;
  }
}