@charset "UTF-8";

/* ------------------------------------------------------------------
  id_01083 記事固有
  施設ごとの調光比較写真：1グループ（.trendnews__equip-items）内の
  写真を枚数に応じて等分する。2枚・3枚・4枚が混在するため flex で等分し、
  グループごとに幅を書き分けないようにしている
------------------------------------------------------------------ */
#terasu-contents .trendnews__equip-items figure {
  flex: 1 1 0;
  min-width: 0;
}

/* Figma指定：氏名の行を1ブロックにして上に6px空ける（会社名・部署と分ける）
   親の `p span{font-size:18px;font-weight:bold}` を受けてしまうので、
   囲みだけ本文と同じ字面に戻す（内側の span は18px太字のまま）。id_01084 と同じ扱い */
#terasu-contents .trendnews-profile__item p .profile-name {
  display: block;
  margin-top: 6px;
  font-size: inherit;
  font-weight: normal;
}

@media screen and (min-width: 641px) {

  /* お施主様の声：見出しが2行のとき下の余白が詰まって見えるため
     写真の上を20pxあける（ユーティリティの mt-10 は外してここで指定）。
     SPはデザインどおり26px（figure の padding 16px ＋ 10px）のままにする */
  #terasu-contents .trendnews__comment-flex01 figure {
    margin-top: 20px;
  }

  /* 議会棟議場：Figma修正後フレーム（8023:19177 → 8048:15939）を忠実に再現する。
     3カラムの幅は 350 / 350 / 224（gap 18・合計960＝本文幅ちょうど）。
     左2枚は Figma と同じ `flex-grow:471 / basis:0` で等分、右カラムは 224px 固定。

     ★写真は object-fit: cover で枠に合わせて切り取る。
       Figma も fill（引き伸ばし）ではなく cover だった
       （ノード書き出し 8048:15941 と照合：cover＝平均差3.57／引き伸ばし＝33.0）。
         ・引き写真   350 : 314.156 ＝ 1.1141（左右を約26％トリミング）
         ・器具アップ 224 : 126     ＝ 16:9  （上下を約16％トリミング）
       これで左カラムと右カラムの下端がほぼ揃う（Figma上の差も9px）。

     ※「写真は素の比率で使う」という原則の例外。デザイン再現を優先するユーザー判断
       （2026-08-25）。`aspect-ratio` で持たせているので本文幅976pxでも同じ画角になる。
     ※SPは対象外（下のSPブロックで display:contents のまま2列×2段）。
       SPでは切り取らず写真全体を出すため、**画像ファイル側を切るのではなくCSSで切る**。
     ※`shoot.js` がPCで「比率崩れ 4件」を報告するが、これは
       表示枠の比と naturalWidth/Height の比を比べているためで、**意図どおり**。
       object-fit:cover なので写真自体は歪んでいない（SPは OK と出る） */
  #terasu-contents .jirei__gijo > figure {
    flex: 471 0 0;
    min-width: 0;
  }

  #terasu-contents .jirei__gijo > figure img {
    aspect-ratio: 350 / 314.156;
    object-fit: cover;
  }

  #terasu-contents .jirei__gijo-sub {
    flex: 0 0 224px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  /* 親（.trendnews__equip-items figure）の `flex:1 1 0` が縦積みにも効いてしまい
     カラムの高さで分配されるため、中身なりの高さに戻す。
     上余白はHTML側のユーティリティ（mt-pc-0）に任せるので margin は書かない */
  #terasu-contents .jirei__gijo-sub figure {
    flex: 0 0 auto;
    margin: 0;
  }

  #terasu-contents .jirei__gijo-sub img {
    aspect-ratio: 224 / 126;
    object-fit: cover;
  }

  /* 安芸区の器具4枚：画像の高さを175pxで揃え、幅は実寸比にまかせる。
     262 + 262 + 263 + 117 ＋ gap18×3 ＝ 960 に収まる */
  #terasu-contents .jirei__equip-h > figure {
    flex: 0 0 auto;
  }

  #terasu-contents .jirei__equip-h > figure img {
    width: auto;
    height: 175px;
  }
}

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

  /* SPは指示どおり現状のまま（2列×2段）。包みを透過させて figure を直接並べる */
  #terasu-contents .jirei__gijo-sub {
    display: contents;
  }

  /* 社内FB（2026-08-25）「安芸区総合福祉センターのリモコン画像の天地を揃えたい」への対応。
     器具4枚のうちシーン選択リモコン（253x379＝縦長）だけが2列レイアウトで幅50%まで
     引き伸ばされ、高さ245pxと隣のスポットライト写真（109px）に対して136px下にはみ出していた。
     PC（高さ175pxで揃える）と同じ考え方で「高さを揃えて幅は実寸比まかせ」にする。
     隣と同じ高さになる幅 ＝ 隣の幅 ×（リモコンの比 253/379 ÷ 隣の比 687/458）＝ ×0.445。
     画像自体は width:100% / height:auto のままなので縦横比は崩れない */
  #terasu-contents .section .jirei__equip-h > figure:nth-child(4) {
    flex: 0 0 calc((50% - 5px) * 0.445);
  }

  /* SPの余白はデザインどおり10px（figure の padding 16px と合わせて26px） */
  #terasu-contents .trendnews__comment-flex01 figure {
    margin-top: 10px;
  }
}

/* Figma指定：図版キャプションの上余白は 5px（common_hint の
   `.trendnews .c-sect figure figcaption{margin-top:15px}` に詳細度で負けるため
   `#terasu-contents .section` スコープで書く）。
   修正後デザインでは sect3・議会棟議場が 5px、安芸区・東区が 15px と混在しているが、
   id_01080〜01082 で確定した値は 5px なので全ブロックに適用する */
#terasu-contents .section .trendnews__equip-items figure figcaption {
  margin-top: 5px;
}

@media screen and (min-width: 641px) {

  /* Figma指定：リード文の区切り線と最初の見出しの間を広げる（60px → 120px）。
     `.trendnews-lead` は margin-bottom:60px ＋ padding-bottom:60px（区切り線は
     ::after で padding-box の下端）なので、下の余白は margin-bottom 側で足す。
     兄弟の `.c-sect` とマージンは相殺されるため加算にはならない */
  #terasu-contents .section .trendnews-lead {
    margin-bottom: 120px;
  }
}