/* ========================================
   S04 作業料金表（背景=タイル写真予定・2×2カードグリッド）
   2026-07-16：Figma実データ（node 2159:57）で全面突合。
   カード1-3（エラー表示/分解修理/クリーニング）＝旧デザインのまま残存（価格=中央寄せ絶対配置・リスト=下パディング）
   カード4（排水トラブル）だけ先行リニューアル済み（価格=左右端寄せ・リスト=上パディング）→クラス修飾子で区別
   ======================================== */

.pricing {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  /* 2026-08-12：背景素材が別物（モザイクタイル）だったため差し替え。
     Figma 2159:57 fill＝壁紙テクスチャ opacity100%（旧：白57%オーバーレイは不要） */
  background-color: #fff;
  background-image: url("../../images/s04_pricing/bg-tile.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: left;
}
.pricing-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px; /* 統一 2026-07-31（旧30） */
  width: 100%;
}
.pricing-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px; /* バッジ↔見出し 統一 2026-07-31 */
  width: 100%;
  padding: 40px 0 40px; /* 2026-07-31ユーザー指定：上40px（旧20） */
  background: var(--c-navy);
}
.pricing-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;
  color: var(--c-navy);
}
.pricing-title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: #fff;
  text-align: center;
}

.pricing-content { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; padding: 0 16px; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 296px; /* 2026-07-31：実コンテンツ高(292.6px)に合わせて拡張（旧288pxだとflex-shrinkで画像が縮み4枚の高さがバラつく） */
  column-gap: 16px;
  row-gap: 20px;
  width: 100%;
}
.pricing-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-card); /* 2026-08-12：シャドウ統一（旧4px 4px 0 青） */
}
.pricing-card-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px; /* 統一 2026-07-31（旧10/6） */
  background: var(--c-navy);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}
.pricing-card-img { width: 100%; height: 120px; flex-shrink: 0; object-fit: cover; }

/* リスト：全カード「排水トラブル」書式に統一（2026-07-16ユーザー指定） */
.pricing-card-list {
  display: flex;
  flex-direction: column;
  gap: 4px; /* Figma 2522:71（排水トラブルカードの仕様に4枚統一・2026-07-30） */
  /* 2026-08-02：360pxでクリーニングの「・洗濯槽の汚れ・カビ」等が2行に折り返す問題への対応。
     左を4pxに詰めて可用幅を+8px（必要量ぴったり）、右も8pxにして4pxの余裕を確保 */
  padding: 12px 8px 0 4px;
  color: var(--c-navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.pricing-card-list li {
  display: flex;
  align-items: center;
}

/* 価格：4枚とも共通（Figma 2522:66・下端揃え・p12/16・青#1E7FC2） */
.pricing-card-price {
  display: flex;
  /* 数字(Roboto)と「円〜」(Noto)は字面の位置が違うため、箱の下端(flex-end)で揃えると
     「円」が約5.9px はみ出す。ベースライン揃え＋残差1.4pxの微調整で字面の下を合わせる */
  align-items: baseline;
  /* 2026-08-02ユーザー指定：数字と「円〜」を離さない
     （旧 space-between だとカード幅いっぱいに引き離されて間隔が空いていた） */
  justify-content: center;
  gap: 1px;
  height: 54px;
  flex-shrink: 0;
  padding: 12px 16px;
  font-family: var(--font-en);
  font-weight: 700;
  color: var(--c-primary);
}
.pricing-card-price .num { font-size: 40px; line-height: 28px; }
.pricing-card-price .comma { font-size: 30px; line-height: 28px; } /* Figma 2522:68 */
.pricing-card-price .unit {
  font-family: var(--font-jp);
  font-size: 20px;
  font-weight: 900; /* 1段太く（2026-07-31ユーザー指定・旧700／読込ウェイトは400/500/700/900） */
  line-height: 16px;
  /* 漢字はベースラインより下に字面が出るぶんを戻す（Roboto数字との差分・実測1.4px） */
  transform: translateY(-1.4px);
}


.pricing-wave { display: block; width: 100%; height: auto; }

/* 2026-08-11：価格を復活させたため、リスト下12pxパディングと高さ自動化を撤回
   → リスト padding:12px 8px 0 4px／価格 padding:12px 16px・高さ54px＝洗濯機v2のまま */

/* ── カード高さ：Figma実測287px（label40+画像120+list75+price52）に合わせる（2026-08-11） ── */
.pricing-grid { grid-template-rows: 287px 287px; }
.pricing-card-label { height: 40px; padding: 10px 6px; box-sizing: border-box; }
.pricing-card-price { height: 52px; padding: 13px 15px; }
/* ※listは洗濯機v2の padding:12px 8px 0 4px・gap4px のまま（360px時の折返し対策済み）＝ここで上書きしない */

/* ── CTAリード：罫線付き（2026-08-11・Figma 2925:314／線は黒1px・20px） ── */
.cta-lead--rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.cta-lead--rule::before,
.cta-lead--rule::after {
  content: "";
  width: 20px;
  height: 1px;
  background: #000;
  flex-shrink: 0;
}
.cta-lead--rule::before { transform: rotate(60deg); }
.cta-lead--rule::after { transform: rotate(-60deg); }