/* ========================================
   注意喚起バンド（Figma 2732:401・2026-07-31）
   S02内のカードから独立セクション化し、安心サポート宣言の直前へ移動。
   全幅バンド（左右パディングなし・角丸はカード側のみ）
   ======================================== */

.scam-band { width: 100%; }

/* ── 悪徳業者にご注意ください！（2026-07-21 画像→コード実装化・Figma 2732:401） ── */
.scam-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 0 0 80px; /* 2026-08-13 Figma 2989:925 pad[0,0,80,0]（DIYブロック内包に伴い60→80px） */
  overflow: hidden;
  /* Figma 2732:401：#E5EAF0 の上に紙目テクスチャを FILL（＝cover）で重ねる
     2026-07-31：旧scam-texture-tile.webpは別柄（革調ドット）の誤ファイルだったと判明。
     実際のFigma画像（クロスハッチの布目・imageHash 1ede27b4...）を再書き出しして差し替え */
  background: #E5EAF0 url("../../images/s02_empathy/scam-texture.webp") center / cover no-repeat;
  text-align: left;
}
.scam-head {
  width: 100%;
  padding: 20px 0; /* Figma 2732:402 */
  background: #333333;
  color: #F1C40F;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2; /* Figma lhauto */
  text-align: center;
}
.scam-body {
  display: flex;
  flex-direction: column;
  gap: 0; /* Figma 2732:404 */
  padding: 0 16px;
}
.scam-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px; /* 統一 2026-07-31（旧10） */
}
/* イラストはFigmaのクロップ枠(100x96)を再現。画像は表示域を3xで切り出し済み */
.scam-illust {
  flex-shrink: 0;
  width: 100px; /* Figma 2732:406 */
  height: 96px;
}
.scam-illust img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scam-lead {
  /* Figma 2732:407：テキスト幅211px・行全体は中央寄せ（旧flex:1で全幅に伸びていた） */
  flex: 0 1 211px;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5; /* Figma 2732:407 lh150% */
  color: #333;
  text-wrap: pretty; /* 「す。」だけの孤立行を防ぐ（非対応ブラウザは通常折返し） */
}
.scam-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 16px; /* Figma 2732:409（旧12/8） */
  list-style: none;
  background: #fff; /* Figma 2732:409 fill:#FFFFFF（旧#F5F5F5） */
}
.scam-list li {
  display: flex;
  align-items: center;
  gap: 8px; /* Figma 2732:410（旧10） */
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #333;
}
.scam-list li + li {
  padding-top: 8px; /* Figma：区切り線の上下はgap8 */
  border-top: 1px dashed #BFBFBF; /* Figma Line93/94（dash 6,6） */
}
.scam-warn {
  flex-shrink: 0;
  width: 22px;
  height: 19px; /* Figma 2732:411 */
}
.scam-list em {
  font-style: normal;
  font-weight: 700; /* 2026-08-03ユーザー指定：色は周りの本文と同じ#333のまま＝太字のみで強調（旧コーラル） */
}
/* ※.nw（nowrap）は 2026-08-03 に撤去＝各項目を1つの文章として自然に折り返させる方針に変更 */

/* ── DIY危険の注意喚起（Figma 2989:645：注意喚起カード内の末尾） ──
   2026-08-17 Figma全深度で再取得：
     2989:645  VERTICAL gap20 pad[24,32,0,32]
       3020:1633 Frame465  VERTICAL gap16
         3020:1639 TEXT「また､エアコン設備の故障を」20px/lh100%   ※旧「これらのトラブルを」＋⚠アイコンは廃止
         3020:1640 Frame466 pad下2 → 3020:1641 TEXT 20px/lh100%/ls5%（黄マーカー）
       3020:1645 イラスト 300x101
   親（.scam-card）は gap12 なので、リスト↔本ブロックの見た目の間隔は 12+24=36px */
.diy-danger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* Figma 2989:645 itemSpacing */
  padding: 24px 32px 0; /* Figma 2989:645 padding */
  width: 100%;
  box-sizing: border-box;
}
.diy-danger-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px; /* Figma 3020:1633 itemSpacing */
}
.diy-danger-lead,
.diy-danger-main {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1; /* Figma lh 100% */
  color: var(--c-navy, #0E3A66);
  text-align: center;
  white-space: nowrap;
}
.diy-danger-main {
  padding-bottom: 2px; /* Figma 3020:1640 paddingBottom */
  letter-spacing: 0.05em; /* Figma 3020:1641 letterSpacing 5% */
}
/* 黄マーカー（Figma 3020:1640：縦グラデ・66%でハードストップ＝下線イメージ） */
.diy-danger-main .hl {
  background: linear-gradient(180deg, rgba(241, 196, 15, 0) 66%, #F1C40F 66%);
  padding: 0 2px;
}
.diy-danger-illust {
  display: block;
  width: 300px; /* Figma 3020:1645 実寸300x101 */
  max-width: 100%;
  height: auto;
}