/* ========================================
   S02 お悩み共感（青帯見出し＋症状カード＋エラーカード＋悪徳業者注意喚起）
   ======================================== */

.empathy {
  text-align: center;
  /* Figma 2522:113（2026-07-30）：#E5EAF0のベタ＋下へ向かう白フェード
     （旧：本体側にコンクリ写真＋青→白グラデ→撤回） */
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 53.8%, #fff 86.5%),
    #E5EAF0;
}

/* 見出し帯（青） */
.empathy-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px; /* バッジ↔見出し 統一 2026-07-31 */
  padding: 40px 16px 32px;
  background: var(--c-primary); /* Figma 2522:115（2026-07-30：写真とスレート地は撤回・青ベタへ） */
}

.empathy-badge {
  /* 2026-08-12ユーザー指定：全セクションのバッジを 16px / 行高16px / pad4px16px に統一 */
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff; /* 2026-07-16ユーザー指定：白塗り・紺文字（枠線なし） */
  color: var(--c-navy);
}
.empathy-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* Figma 2522:118 itemSpacing（2026-08-01全深度再取得） */
  font-size: 32px;
  font-weight: 700; /* Figma Bold（旧900） */
  line-height: 0.975; /* Figma lh31.2px / 32px */
  color: #fff;
}
/* 1行目：「こんな」＋タイル4枚（Figma 2911:169 gap3・中央揃え） */
.empathy-title-row {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
/* 「トラブル」タイル（Figma 2911:157 gap2／各タイル36x36・白地・紺枠1px INSIDE・紺文字28px） */
.empathy-title-tiles {
  display: inline-flex;
  gap: 2px;
}
.empathy-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #fff;
  border: 1px solid var(--c-navy);
  color: var(--c-navy);
  font-size: 28px;
  line-height: 1;
}


/* 本体（背景=グレーコンクリ調テクスチャ・2026-07-16書き出し） */
.empathy-body {
  position: relative;
  /* Figma 2522:124 は背景なし（2026-07-30：コンクリ写真＋青グラデは撤回・地はセクション側へ） */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 16px 20px;
}
.empathy-body > * { position: relative; z-index: 1; }

/* 症状カード×4（しっぽなし角丸カード） */
.empathy-cards {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.empathy-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px; /* 統一 2026-07-31（旧5） */
  padding: 12px 40px; /* 統一 2026-07-31（旧10） */
  border-radius: 8px; /* Figma 2026-07-30（旧12） */
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.05; /* Figma 2026-07-30：sub行=18px/19（mainは1.33で上書き） */
}
.empathy-card .sub { color: var(--c-charcoal); }
.empathy-card .sub .red { color: var(--c-coral); }
.empathy-card .sub .navy { color: var(--c-navy); }
.empathy-card .main { color: var(--c-charcoal); line-height: 1.33; }
.empathy-card .main .red { color: var(--c-coral); }

/* ========================================
   2026-08-10 エアコン福岡v1：S02新デザイン（Figma 2989:629 / 2989:646）
   タイトル=「こんな[お悩み]ありませんか？」（お悩みタイル=白地・コーラル文字・枠なし）
   本体=青ベタ背景に可変幅センタリングの共感カード4枚（イラスト・エラーブロック廃止）
   ======================================== */
/* セクション背景：Figma 2989:628 GRADIENT_LINEAR（上→下）
   #EAF5FC 31.25% → #C2CED7 66.83%（青ベタはタイトル部分=.empathy-headのみ） */
.empathy {
  background: linear-gradient(180deg,
    #EAF5FC 0%,
    #EAF5FC 31.25%,
    #C2CED7 66.83%,
    #C2CED7 100%);
}
/* セクション余白：Figma 2989:629 pad[40,20,32,20]・gap16 */
.empathy-head {
  padding: 40px 20px 32px;
  gap: 16px;
}
/* ※基本指定（16px/16px/4px16px）へ統一済みのため個別上書きは不要 */
/* 見出しブロック：Figma 2989:632 VERTICAL gap8・MIN/MIN（左揃え）・lh31.2px */
.empathy-title {
  gap: 8px;
  align-items: flex-start;
  line-height: 31.2px;
}
.empathy-title-row { gap: 3px; } /* Figma 2989:633 gap3 */
.empathy-title-tiles { gap: 2px; } /* Figma 2989:635 gap2 */
.empathy-tile {
  width: 36px;
  height: 36px;
  border: none; /* Figma 2989:636：枠なし */
  color: var(--c-navy, #0E3A66); /* Figma最新＝紺（2026-08-10コーラルから戻し） */
  font-size: 28px;
  letter-spacing: 0.05em; /* Figma ls 5% */
  line-height: 1;
}
.empathy-cards--v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px; /* Figmaカード間隔実測 */
  padding: 24px 16px;
}
.empathy-cards--v2 .empathy-card {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 12px 40px; /* Figmaオートレイアウト確定値：縦12・横40 */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Figma DROP_SHADOW(0,0,b5) */
  gap: 8px; /* sub↔main間（旧.empathy-cardのgap4pxを上書き） */
}
.empathy-cards--v2 .empathy-card .sub {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-navy);
  line-height: 16px; /* Figma確定：行間16（=1.0） */
}
.empathy-cards--v2 .empathy-card .main {
  font-size: 16px; /* Figma：subと同サイズ */
  font-weight: 700;
  color: var(--c-navy);
  line-height: 16px; /* Figma確定：行間16（=1.0） */
  margin-top: 0; /* 間隔はカードのgap8px（Figma確定値）に一本化 */
}
.empathy-cards--v2 .empathy-card .red,
.empathy-cards--v2 .empathy-card .sub .red {
  color: var(--c-coral);
}

/* 困り顔の家族イラスト（2026-08-10・Figma 2989:670透過ベイク・カード群直下） */
.empathy-family {
  display: block;
  width: 300px; /* Figma実寸（600px@2x） */
  height: auto;
  margin: 0 auto; /* Figma 2989:669：カード群の直後（間隔0・カード群のpadding-bottom24pxが余白） */
}