/* ========================================
   保証バンド（紺BG）／2箇所とも同一構成（Figma 2918:177・2026-08-01 全面統一）
   構成：吹き出し（-40px）→ 最長100日間 → 作業費無料で再施工します。→ サブ →（gap12）注記
   ※font-size は fluid.css の vw 指定＋main.js の自動フィットを維持（ユーザー指定）
   ======================================== */

.warranty {
  position: relative; /* 吹き出しの位置基準（2026-08-01） */
  z-index: 5; /* 直前セクション（heroの子はz3）より前面に吹き出しを出す */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* Figma primaryAxisAlignItems=MAX */
  gap: 12px; /* 内容ブロック↔注記（2026-08-02ユーザー指定・Figmaは20px） */
  padding: 72px 16px 40px; /* Figma 2918:177 p(72,16,40,16) */
  background: var(--c-navy);
  color: #fff;
  text-align: center;
}
/* 内容ブロック（Figma 2918:178 gap5・STRETCH） */
.warranty-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 5px;
}

/* ── 吹き出し（Figma 2918:181をベースに2026-08-01ユーザー指定で拡張） ──
   バンド上端から-40pxにはみ出す白カード＋尻尾を「1つの図形」として紺2pxで縁取り。
   ボックスの下辺（border）がそのまま尻尾の上辺を兼ねるため、尻尾側は斜辺2本だけを別レイヤーで描く
   （::before=白い塗りの三角／::after=斜辺のみのSVGストローク。上辺はボックスのborderと重なり継ぎ目なし） */
.warranty-bubble {
  position: absolute;
  top: -40px; /* Figma 2918:181 y-40（2026-08-01ユーザー指定と一致） */
  left: 26px; /* Figma x26（390基準で左右26px＝幅338） */
  right: 26px;
  display: flex;
  align-items: flex-end; /* Figma counterAxisAlignItems=MAX */
  justify-content: center;
  gap: 8px; /* Figma itemSpacing（2026-08-01再取得・旧4） */
  padding: 12px 16px; /* Figma p(12,16) */
  border: 2px solid var(--c-navy); /* 2026-08-01ユーザー指定：ボックス+尻尾を統一の紺2pxで縁取り */
  border-radius: 4px; /* Figma r4 */
  background: #fff;
  color: var(--c-navy);
  text-align: center;
}
/* 尻尾の白い塗り（20x12・下端中央）＝ボックス下辺の外側ぴったりに接続 */
.warranty-bubble::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid #fff;
  z-index: 1;
}
/* 尻尾の斜辺2本だけ紺2pxでストローク（上辺は描かない＝ボックスのborderと同じ位置で継ぎ目が出ない） */
.warranty-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M0 0L10 12L20 0' fill='none' stroke='%230E3A66' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
  z-index: 2;
}
/* 左右のダッシュ斜線（Figma 2918:183/184：紺3px・dash 4 4） */
.warranty-bubble-dash {
  flex-shrink: 0;
  width: 27px; /* Figma 2918:183 のノード実寸（SVGは線のはみ出し分だけ大きい） */
  height: 46.77px;
}
.warranty-bubble-text {
  flex: 1;
  min-width: 0;
  font-size: 20px; /* Figma 基準20px（実効値は fluid.css で幅に追従） */
  font-weight: 700;
  line-height: 1.5; /* Figma lh150% */
}
/* 強調はem比で親のスケールに追従させる（Figma 24px / 16px ÷ 20px） */
.warranty-bubble-text .xl { font-size: 1.2em; color: var(--c-coral); }
.warranty-bubble-text .sm { font-size: 0.8em; }

/* 3行とも「左右16pxパディングを保ったまま画面幅いっぱい」に自動スケール（2026-07-17）
   ・行ごとに文字数が違うため、fluid.css で行別の vw 係数を指定（実測から逆算）
   ・行内のサイズ差は em で比率指定 → 親の vw に追従して比率を保ったまま伸縮
   ・全角句読点(、。)の内蔵余白は palt で圧縮
   ※.warranty-line1（業界トップクラスの〜）は2026-08-01に両バンドとも撤去＝吹き出しと重複 */
.warranty-line2,
.warranty-line3,
.warranty-sub {
  font-feature-settings: "palt";
  white-space: nowrap;
}

.warranty-line2 {
  font-weight: 700;
  font-size: 54px;
  line-height: 1;
}
.warranty-line2 .num {
  font-family: var(--font-en);
  /* 「100」(Roboto)と「最長日間」(Noto)：1.244emで字面の高さが一致（実測49px=49px・2026-07-17） */
  font-size: 1.244em;
  letter-spacing: 0.02em; /* 字間を広げる */
  /* 2026-07-31再指摘：canvas ink計測でNotoの字面下端(descent≒4.7px@line53px)に対し
     Robotoの数字はdescent≒0で下端が浮く→numの等倍(em)で下げて字面の下を揃える */
  transform: translateY(0.066em);
}
.warranty-line3 {
  font-weight: 700;
  font-size: 27px;
  line-height: 1.15;
}
.warranty-line3 .accent { color: #8FCFD7; } /* 2026-08-10エアコン版：#7ABCE9→#8FCFD7（保証バンド1・2とも／症状カード「即日」と同色） */
.warranty-sub {
  align-self: stretch; /* Figma 2918:180：内容ブロック内で左寄せ */
  text-align: left;
  color: #fff; /* 2026-07-17ユーザー指定（旧--c-sky-accent） */
  font-size: 12px; /* 基準値（実効値は fluid.css の vw 指定） */
  font-weight: 700;
  line-height: 1.5; /* 行高統一 2026-07-31：JSが幅に合わせてfont-sizeを書き換えるため倍率指定 */
}
.warranty-note {
  align-self: stretch;
  text-align: left;
  color: #fff;
  font-size: 10px; /* Figma 2918:189（2026-08-01再取得・旧9px） */
  line-height: 1.5; /* Figma lh150% */
}

/* ========================================
   保証バンド1（--lead）専用
   2026-08-01：構成をバンド2（Figma 2918:177）と完全に統一。
   残す差分は vw のフォントサイズ指定のみ（ユーザー指定）
   ======================================== */
/* 大見出し 62.81px（Figma実測）＝62.81/390 = 16.11vw */
.warranty--lead .warranty-line2 { font-size: 16.11vw; }
.warranty--lead .warranty-sub { font-size: 4.62vw; } /* 18px */