@charset "UTF-8";
/* ------------------------------------------------------------------

  納入事例（hint）記事テンプレート用モジュール集

  ・対象は「新規記事」のみ。既存記事のCSSには手を入れていない
  ・読み込み順： sub_style → common_hint → common → hint-templates → 記事CSS
  ・common_hint.css / common.css に既にあるモジュール（trend-point、
    trendnews-profile、terasu__mv、terasu__img_wrapper など）は
    重複を避けるためここには含めない

  ・号ごとの名前空間（vol73__ など）で作られていたものは
    汎用名を新設し、旧クラス名もセレクタに併記して互換を保っている

------------------------------------------------------------------ */
/* ==================================================================
   1. 汎用ユーティリティ
   ================================================================== */
.ali-C {
  text-align: center;
}

.ali-L {
  text-align: left;
}

.ali-R {
  text-align: right;
}

.fwb {
  font-weight: bold;
}

.inline-b {
  display: inline-block;
}

.wid100Per {
  width: 100%;
  max-width: 100%;
}

.maxWidth600 {
  max-width: 600px;
  margin: 0 auto;
}

.maxWidth800 {
  max-width: 800px;
  margin: 0 auto;
}

.maxWidth1000 {
  max-width: 1000px;
  margin: 0 auto;
}

.font-14 {
  font-size: 14px;
}

.font-16 {
  font-size: 16px;
}

.listStyle01 > li {
  position: relative;
  padding-left: 16px;
}
.listStyle01 > li::before {
  content: "";
  position: absolute;
  display: block;
  height: 12px;
  width: 12px;
  top: 10px;
  left: 0;
  border-radius: 9999px;
  background: #333;
}

.ttl-before {
  display: inline-block;
  background-color: #444;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 50px;
  margin-bottom: 10px;
  padding: 6px 20px;
}
@media screen and (max-width: 640px) {
  .ttl-before {
    font-size: 16px;
    padding: 5px 16px;
  }
}

@media screen and (min-width: 641px) {
  .PcNodisplay {
    display: none !important;
  }
  .SpNodisplay {
    display: block !important;
  }
}
@media screen and (max-width: 640px) {
  .PcNodisplay {
    display: block !important;
  }
  .SpNodisplay {
    display: none !important;
  }
  .img-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .img-scroll-wrapper figure {
    min-width: 1000px;
    margin: 0;
  }
}
/* ==================================================================
   2. 受賞事例記事のラッパー（.jirei01）
   ================================================================== */
.jirei01 {
  width: 100% !important;
  display: block !important;
}
.jirei01 figure p {
  line-height: 1.6 !important;
}
.jirei01 .profile__item {
  display: block !important;
}
.jirei01 .profile__item span {
  font-size: 20px;
}
.jirei01 .profile__item figure {
  height: auto;
  width: 100%;
}
.jirei01 .trendnews-profile__item p {
  font-weight: normal;
  display: block;
  margin: 0 0 0 20px;
}
@media screen and (max-width: 640px) {
  .jirei01 .trendnews-profile__item p {
    margin-left: 12px;
  }
}

/* ==================================================================
   3. お施主様の声
   ================================================================== */
.jirei01 .trendnews__comment {
  padding: 32px 40px 24px;
  background-color: #f7f7f7;
}
@media screen and (max-width: 640px) {
  .jirei01 .trendnews__comment {
    padding: 20px;
  }
}
@media screen and (max-width: 640px) {
  .jirei01 .trendnews__comment-box {
    max-width: 960px;
    margin: 48px auto 24px;
    width: 93%;
  }
  .jirei01 .trendnews__comment-box .trendnews__ttl--01 {
    font-size: 24px;
  }
}
.jirei01 .trendnews__comment-flex01 {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 640px) {
  .jirei01 .trendnews__comment-flex01 {
    flex-direction: column;
  }
}
.jirei01 .trendnews__comment-flex01 figure {
  width: 23%;
}
@media screen and (max-width: 640px) {
  .jirei01 .trendnews__comment-flex01 figure {
    width: 100%;
    padding: 16px 24px;
  }
}
.jirei01 .trendnews__comment-flex01 figure p {
  font-weight: normal;
  margin: auto;
  display: block;
  padding-top: 16px;
  margin-top: 0 !important;
  line-height: 1.6 !important;
}
@media screen and (max-width: 640px) {
  .jirei01 .trendnews__comment-flex01 figure p {
    padding-top: 12px;
  }
}
.jirei01 .trendnews__comment-text {
  width: calc(77% - 24px);
}
@media screen and (max-width: 640px) {
  .jirei01 .trendnews__comment-text {
    width: 100%;
  }
}

/* ==================================================================
   4. 採用設備一覧
   ・写真を実寸の比率のまま並べる（引き伸ばさない）
   ・figure ごとの横幅上限は記事側CSSで指定する
   ・旧クラス（vol73__point_box / vol73__shisetsu_items）も併記
   ================================================================== */
.trendnews__equip,
.vol73__point_box {
  border: 1px solid #978554;
  padding: 20px 40px;
  margin-top: 60px;
}
@media screen and (max-width: 640px) {
  .trendnews__equip,
  .vol73__point_box {
    padding: 5px 15px 20px;
    margin-top: 45px;
  }
}

.trendnews__equip-ttl,
.vol73__point_box_ttl {
  font-size: 20px !important;
  color: #978554;
}
@media screen and (max-width: 640px) {
  .trendnews__equip-ttl,
  .vol73__point_box_ttl {
    font-size: 18px !important;
    text-align: center;
  }
}

.trendnews__equip-items,
.vol73__shisetsu_items {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}
@media screen and (max-width: 640px) {
  .trendnews__equip-items,
  .vol73__shisetsu_items {
    gap: 0 10px;
  }
}
.trendnews__equip-items figure,
.vol73__shisetsu_items figure {
  margin: 20px 0 0;
}
@media screen and (max-width: 640px) {
  .trendnews__equip-items figure,
  .vol73__shisetsu_items figure {
    margin: 14px 0 0;
  }
}
.trendnews__equip-items figure img,
.vol73__shisetsu_items figure img {
  width: 100%;
  height: auto;
  display: block;
}
.trendnews__equip-items figure figcaption,
.vol73__shisetsu_items figure figcaption {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
}
@media screen and (max-width: 640px) {
  .trendnews__equip-items figure figcaption,
  .vol73__shisetsu_items figure figcaption {
    font-size: 11px;
    margin-top: 3px;
  }
}
.trendnews__equip-items figure.pair .pair__imgs,
.vol73__shisetsu_items figure.pair .pair__imgs {
  display: flex;
  gap: 0 4px;
  align-items: flex-start;
}
.trendnews__equip-items figure.pair .pair__imgs img,
.vol73__shisetsu_items figure.pair .pair__imgs img {
  width: auto;
  height: 120px;
}
@media screen and (max-width: 640px) {
  .trendnews__equip-items figure.pair .pair__imgs img,
  .vol73__shisetsu_items figure.pair .pair__imgs img {
    height: 100px;
  }
}
.trendnews__equip-items figure.spot .spot__imgs,
.vol73__shisetsu_items figure.spot .spot__imgs {
  position: relative;
  display: block;
}
.trendnews__equip-items figure.spot .spot__sub,
.vol73__shisetsu_items figure.spot .spot__sub {
  position: absolute;
  top: 0;
  right: 0;
  width: 40.25%;
  outline: 2px solid #fff;
  outline-offset: -2px;
}
.trendnews__equip-items figure.beforeafter .beforeafter__imgs,
.vol73__shisetsu_items figure.beforeafter .beforeafter__imgs {
  display: flex;
  align-items: center;
  gap: 0 8px;
}
.trendnews__equip-items figure.beforeafter .beforeafter__item,
.vol73__shisetsu_items figure.beforeafter .beforeafter__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
.trendnews__equip-items figure.beforeafter .beforeafter__label,
.vol73__shisetsu_items figure.beforeafter .beforeafter__label {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 1px 4px;
  background-color: #231815;
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
}
@media screen and (max-width: 640px) {
  .trendnews__equip-items figure.beforeafter .beforeafter__label,
  .vol73__shisetsu_items figure.beforeafter .beforeafter__label {
    font-size: 11px;
  }
}
.trendnews__equip-items figure.beforeafter .beforeafter__arrow,
.vol73__shisetsu_items figure.beforeafter .beforeafter__arrow {
  flex: 0 0 27px;
  height: 40px;
  background-color: #231815;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
@media screen and (max-width: 640px) {
  .trendnews__equip-items figure.beforeafter .beforeafter__arrow,
  .vol73__shisetsu_items figure.beforeafter .beforeafter__arrow {
    flex-basis: 18px;
    height: 26px;
  }
}

/* ==================================================================
   5. 画像の比率保持
   img に width / height 属性（CLS対策）を書いても縦横比が崩れないようにする
   ================================================================== */
.jirei01 .trendnews-profile__item figure img,
.jirei01 .trendnews__comment-flex01 figure img {
  height: auto;
}

.terasu__img_box_content img {
  height: auto;
}

/* ==================================================================
   6. 注釈
   ================================================================== */
.trendnews__note {
  font-size: 12px;
  margin-top: 10px;
}
@media screen and (max-width: 640px) {
  .trendnews__note {
    font-size: 11px;
  }
}

/* ==================================================================
   7. ESCO事業・発注方式の説明ボックス

   ・図版（比較表など）に説明を添えて囲むボックス
   ・id_01073 の記事固有CSSにあったものを汎用化して昇格
   ・見出しは .terasu__esco_ttl で、ボックス直下と 2カラム内の
     どちらにも置ける（同じクラスを使い回す）
   ・SPで収まらない横長の表は .terasu__esco_img_scroll で包むと
     横スクロールになる（img の width 属性で実寸を指定しておくこと）
   ・入れ子で書いているのは詳細度のため。
     common_hint.css の `.trendnews .c-sect p`（font-size）と
     `.trendnews .c-sect p + p`（margin-top）に負けないようにしている
   ================================================================== */
.jirei01 .terasu__esco_wrapper {
  border: 2px solid #00a9a0;
  padding: 20px;
}
.jirei01 .terasu__esco_wrapper .terasu__esco_ttl {
  color: #00a9a0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  padding-left: 15px;
  margin-bottom: 10px;
  position: relative;
}
.jirei01 .terasu__esco_wrapper .terasu__esco_ttl::before {
  display: block;
  content: "";
  width: 7px;
  height: 100%;
  background-color: #00a9a0;
  position: absolute;
  top: 0;
  left: 0;
}
.jirei01 .terasu__esco_wrapper .terasu__esco_lead {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.5;
}
@media screen and (max-width: 640px) {
  .jirei01 .terasu__esco_wrapper .terasu__esco_img_scroll {
    overflow-x: auto;
  }
  .jirei01 .terasu__esco_wrapper .terasu__esco_img_scroll > .terasu__esco_img {
    width: 600px;
  }
}
.jirei01 .terasu__esco_wrapper .terasu__esco_flex_wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  max-width: 890px;
}
@media screen and (max-width: 640px) {
  .jirei01 .terasu__esco_wrapper .terasu__esco_flex_wrapper {
    display: block;
  }
  .jirei01 .terasu__esco_wrapper .terasu__esco_flex_wrapper .terasu__esco_flex {
    margin-top: 20px;
  }
}

/* ==================================================================
   8. 登壇写真のMV（リニューアルコンテスト受賞事例）

   ・受賞事例発表の登壇写真を1枚で敷き、所属・氏名を写真の上に重ねる
   ・写真は 960x480（2:1）。**文字は画像に焼き込まず HTML で持つ**
     （SPで字が潰れる／代替テキストが取れないため）
   ・話者が1名のときは話者プロフィール枠（trendnews-profile）を置かず、
     このMVに寄せる（2026-08-24 Figma指示 id_01081）
   ================================================================== */
.terasu__mv_speaker figure {
  position: relative;
  margin: 0;
  overflow: hidden;
}
.terasu__mv_speaker img {
  display: block;
  width: 100%;
  height: auto;
}
.terasu__mv_speaker figure::after {
  content: "";
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 75%);
  pointer-events: none;
}
.terasu__mv_speaker figcaption {
  position: absolute;
  left: 40px;
  bottom: 40px;
  z-index: 1;
  color: #fff;
  font-weight: bold;
}
@media screen and (max-width: 640px) {
  .terasu__mv_speaker figcaption {
    left: 20px;
    bottom: 16px;
  }
}
.terasu__mv_speaker .terasu__mv_speaker-org {
  display: block;
  font-size: 24px;
  line-height: 1.17;
}
@media screen and (max-width: 640px) {
  .terasu__mv_speaker .terasu__mv_speaker-org {
    font-size: 17px;
    line-height: 1.4;
  }
}
.terasu__mv_speaker .terasu__mv_speaker-post {
  display: block;
  font-size: 18px;
  line-height: 1.56;
}
@media screen and (max-width: 640px) {
  .terasu__mv_speaker .terasu__mv_speaker-post {
    font-size: 13px;
    line-height: 1.4;
  }
}
.terasu__mv_speaker .terasu__mv_speaker-name {
  display: block;
  margin-top: 16px;
  font-size: 22px;
  line-height: 1;
}
.terasu__mv_speaker .terasu__mv_speaker-name span {
  margin-right: 9px;
  font-size: 30px;
}
@media screen and (max-width: 640px) {
  .terasu__mv_speaker .terasu__mv_speaker-name {
    margin-top: 8px;
    font-size: 15px;
  }
  .terasu__mv_speaker .terasu__mv_speaker-name span {
    margin-right: 6px;
    font-size: 21px;
  }
}