/*
 * self-override.css — clone 側の差分修正レイヤー
 * 原本 style.css を編集せず、この後読み CSS で上書きする（KB reference-site-local-clone-parallel-compare 準拠）
 * task-010.1 用（九州水道レスキュー branding · logo aspect 保持等）
 */

/* ===== logo aspect 保持（native 1195x187 = 6.39:1 · 参考は ~2.7:1 想定） ===== */
.l-header .c-logo {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}
.l-header .c-logo__link {
  width: auto !important;
  max-width: none !important;
  height: 60px !important;
  display: inline-flex !important;
  align-items: center !important;
}
.l-header .c-logo__link img {
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* SP 幅では若干コンパクトに + ロゴが CTA を圧迫しないよう高さ縮小 (CTA 用スペース確保) */
@media (max-width: 767px) {
  .l-header .c-logo__link {
    height: 28px !important;
  }
}

/* ===== service card 画像を中央クロップで表示（aspect 差分の変倍歪みを防ぐ） ===== */
.p-top-service__card img,
.p-service-card img {
  object-fit: cover !important;
}

/* ===== header PC 「出張費・見積もり費 0円」バッジ CSS 化 ===== */
.p-header-pcMenu__imgArea {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.c-header-badge {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FDE74C, #F2B701 70%);
  color: #02479D;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 700;
  line-height: 1;
  padding: 4px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  gap: 2px;
}
.c-header-badge__row {
  font-size: 10px;
  line-height: 1.15;
}
.c-header-badge__zero {
  font-size: 26px;
  color: #D30004;
  margin-top: 2px;
  line-height: 1;
}
.c-header-badge__unit {
  font-size: 12px;
  color: #02479D;
}

/* ===== 悪徳業者バナー：aspect mismatch を object-fit contain で吸収 ===== */
img[src*="alert-banner"] {
  object-fit: contain !important;
  background: #000;
}

/* ===== 選ばれる6つの理由 CSS 化（画像 reason1〜6.png から差替）===== */
.p-top-reason__circle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.c-reason-badge {
  width: 152px;
  height: 152px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #0F8FEA, #02479D 75%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  font-family: "LINE Seed JP", sans-serif;
  box-shadow: 0 4px 12px rgba(2, 71, 157, 0.35);
  border: 3px solid #FDE74C;
  position: relative;
}
.c-reason-badge::before,
.c-reason-badge::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 46px;
  background: radial-gradient(ellipse at center, #FDE74C 30%, transparent 65%);
  transform: translateY(-50%) rotate(-25deg);
  pointer-events: none;
  opacity: 0.6;
}
.c-reason-badge::before { left: -6px; }
.c-reason-badge::after { right: -6px; transform: translateY(-50%) rotate(25deg); }
.c-reason-badge__num {
  font-size: 26px;
  font-weight: 700;
  color: #FDE74C;
  line-height: 1;
  font-style: italic;
}
.c-reason-badge__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

/* ===== 4 つの安心 promise-medal CSS 化（画像 promise-medal1〜4.png から差替） ===== */
.p-promise-card__medal {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.c-promise-medal {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FFDC55, #C89818 70%, #8B6900);
  color: #4A2C00;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.15;
  padding: 4px;
  box-shadow: 0 3px 8px rgba(139, 105, 0, 0.35), inset 0 -2px 4px rgba(0,0,0,0.15);
  border: 2px solid #A67C00;
}
.c-promise-medal span {
  display: block;
}

/* ===== Voice 3 名詳細カードのアバター CSS 化（picture タグから CSS 円形へ差替） ===== */
.p-voice-card__avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.c-voice-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 32px;
  font-family: "LINE Seed JP", sans-serif;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(2, 71, 157, 0.15);
}
.c-voice-avatar--pink { background: #E85A9B; }
.c-voice-avatar--navy { background: #02479D; }
.c-voice-avatar--teal { background: #0E7E83; }

/* ===== Flow STEP 番号バッジ CSS 化（画像 flow-number1〜5.png から CSS 描画へ差替） ===== */
.c-step-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #02479D;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: "LINE Seed JP", sans-serif;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(2, 71, 157, 0.25);
}
.c-step-badge__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}
.c-step-badge__number {
  font-size: 22px;
  font-weight: 700;
}

/* ===== WEB 口コミ Swiper: CSS review card component（画像 baked から CSS 描画へ差替） ===== */
.c-review-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px 20px 24px;
  box-shadow: 0 2px 12px rgba(2, 71, 157, 0.08);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.c-review-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.c-review-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
  font-family: "LINE Seed JP", sans-serif;
}
.c-review-card__avatar--green  { background: #2AC602; }
.c-review-card__avatar--purple { background: #9A5FD6; }
.c-review-card__avatar--navy   { background: #02479D; }
.c-review-card__avatar--orange { background: #F46600; }
.c-review-card__avatar--blue   { background: #0F8FEA; }
.c-review-card__avatar--red    { background: #FB4D3D; }
.c-review-card__avatar--teal   { background: #0E7E83; }
.c-review-card__avatar--pink   { background: #E85A9B; }
.c-review-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.c-review-card__name {
  font-weight: 700;
  color: #2A2B2E;
  font-size: 16px;
  line-height: 1.3;
  margin: 0;
}
.c-review-card__stars {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1;
}
.c-review-card__stars-icons {
  color: #FFC107;
  letter-spacing: 1px;
  font-size: 16px;
}
.c-review-card__score {
  color: #2A2B2E;
  font-weight: 400;
  font-size: 14px;
}
.c-review-card__body {
  font-size: 14px;
  line-height: 1.7;
  color: #2A2B2E;
  margin: 0;
  flex-grow: 1;
}

/* ===== promise 見出しイラスト（::after）をテキストの下レイヤーに ===== */
.p-top-promise__heading {
  position: relative !important;
  isolation: isolate !important;
}
.p-top-promise__heading span {
  position: relative !important;
  z-index: 2 !important;
}
.p-top-promise__heading::after {
  z-index: 1 !important;
}

/* ===== 悪徳業者 modal 透過対策：内側に solid white 背景を明示 ===== */
.p-modal__inner {
  background-color: #ffffff !important;
}
.p-modal {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

/* ===== modal 閉じるボタン: 画像 icon-close.png を CSS × 印に置換 ===== */
.p-modal__inner {
  position: relative !important;
}
.p-modal__close {
  position: absolute !important;
  top: 32px !important; /* SP: 黄黒ハザードテープ (24px) の下 */
  right: 12px !important;
  left: auto !important;
  width: 32px !important;
  z-index: 3 !important; /* edge (z-index:2) より上 */
  height: 32px !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  z-index: 10 !important;
}
.p-modal__close img {
  display: none !important;
}
.p-modal__close::before,
.p-modal__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 3px;
  background: #333;
  border-radius: 2px;
  transform-origin: center;
}
.p-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.p-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.p-modal__close:hover::before,
.p-modal__close:hover::after {
  background: #000;
}
/* PC: ハザードテープ 32px 下に配置 */
@media (min-width: 768px) {
  .p-modal__close {
    top: 44px !important;
  }
}

/* ===== solution 3D 円柱チャートは logo 焼き込み済で overlay 不要（削除済） ===== */

/* ===== 本番 contact form の v2-submit-btn 強制スタイル (specificity + !important) ===== */
.p_top .contact button.v2-submit-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 260px !important;
  width: fit-content !important;
  padding: 18px 32px !important;
  margin: 21px auto 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #FB7A2A 0%, #E85E10 100%) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  box-shadow: 0 6px 16px rgba(232, 94, 16, 0.25) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.p_top .contact button.v2-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(232, 94, 16, 0.35) !important;
}
.p_top .contact button.v2-submit-btn::before {
  content: '' !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  margin-right: 10px !important;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2zm0 4l8 5 8-5V6l-8 5-8-5v2z'/></svg>") center/contain no-repeat !important;
}
@media (max-width: 768px) {
  .p_top .contact button.v2-submit-btn {
    min-width: unset !important;
    width: 100% !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
  }
}

/* ===== Footer CTA (PC) 分離型 CSS 実装（Session 2 composite 画像廃止・女性画像は placeholder） ===== */
/* 構成: 黄 starburst (SVG + 焼込みテキスト CSS) + 女性 placeholder + 白吹き出し */
.p-footer-cta--pc .p-footer-cta__imgArea {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative !important;
  flex: 0 3 564px !important;
}
/* 黄色 starburst 12 ポイント · narrow (900-1199px) ではコンパクト · wide (1200+) で拡大 */
.p-footer-cta--pc .p-footer-cta__starburst {
  flex: 0 0 100px;
  width: 100px;
  height: 100px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50,2 L59.3,15.2 L74,8.4 L75.5,24.5 L91.6,26 L84.8,40.7 L98,50 L84.8,59.3 L91.6,74 L75.5,75.5 L74,91.6 L59.3,84.8 L50,98 L40.7,84.8 L26,91.6 L24.5,75.5 L8.4,74 L15.2,59.3 L2,50 L15.2,40.7 L8.4,26 L24.5,24.5 L26,8.4 L40.7,15.2 Z' fill='%23FFD21A'/></svg>") no-repeat center / contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #0B253B;
  font-weight: 700;
  line-height: 1.1;
  gap: 2px;
  padding: 0 8px;
  transform: rotate(-6deg);
}
.p-footer-cta--pc .p-footer-cta__starburst-l1 { font-size: 9px; letter-spacing: -0.02em; white-space: nowrap; }
.p-footer-cta--pc .p-footer-cta__starburst-l2 {
  font-size: 20px;
  letter-spacing: -0.04em;
  line-height: 1;
}
.p-footer-cta--pc .p-footer-cta__starburst-l2 .pct { font-size: 13px; }
.p-footer-cta--pc .p-footer-cta__starburst-l3 { font-size: 10px; letter-spacing: 0.02em; }
@media (min-width: 1200px) {
  .p-footer-cta--pc .p-footer-cta__starburst {
    flex: 0 0 140px;
    width: 140px;
    height: 140px;
    gap: 3px;
    padding: 0 10px;
    margin-top: -8px;
    margin-bottom: -8px;
  }
  .p-footer-cta--pc .p-footer-cta__starburst-l1 { font-size: 11px; }
  .p-footer-cta--pc .p-footer-cta__starburst-l2 { font-size: 26px; }
  .p-footer-cta--pc .p-footer-cta__starburst-l2 .pct { font-size: 18px; }
  .p-footer-cta--pc .p-footer-cta__starburst-l3 { font-size: 12px; }
}

/* 女性画像 (user 配置 · 底辺アンカーで頭が bar 上辺に届くサイズ) */
/* narrow range は小さめ · wide (1200+) で大きく */
.p-footer-cta--pc .p-footer-cta__womanWrap {
  flex: 0 0 115px;
  align-self: stretch;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}
.p-footer-cta--pc .p-footer-cta__woman {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: bottom center;
}
@media (min-width: 1200px) {
  .p-footer-cta--pc .p-footer-cta__womanWrap {
    flex: 0 0 155px;
  }
}

/* 白吹き出し (左向き三角 pointer) · narrow range で font 縮小 */
.p-footer-cta--pc .p-footer-cta__bubble {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  position: relative;
  color: #0B253B;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.45;
}
@media (min-width: 1200px) {
  .p-footer-cta--pc .p-footer-cta__bubble {
    padding: 12px 18px;
    font-size: 15px;
    line-height: 1.5;
  }
}
.p-footer-cta--pc .p-footer-cta__bubble::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -11px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-right: 11px solid #fff;
}
.p-footer-cta--pc .p-footer-cta__bubble p { margin: 0; }

/* ===== Footer CTA (SP) 分離型 starburst CSS 実装 ===== */
/* SP は電話ボタン内の小型 starburst (56×56) 単体 */
.p-footer-cta--sp .p-footer-cta__btnTel__starburst {
  width: 56px;
  height: 56px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50,2 L59.3,15.2 L74,8.4 L75.5,24.5 L91.6,26 L84.8,40.7 L98,50 L84.8,59.3 L91.6,74 L75.5,75.5 L74,91.6 L59.3,84.8 L50,98 L40.7,84.8 L26,91.6 L24.5,75.5 L8.4,74 L15.2,59.3 L2,50 L15.2,40.7 L8.4,26 L24.5,24.5 L26,8.4 L40.7,15.2 Z' fill='%23FFD21A'/></svg>") no-repeat center / contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #0B253B;
  font-weight: 700;
  line-height: 1;
  gap: 1px;
  padding: 0 4px;
  transform: rotate(-6deg);
}
.p-footer-cta--sp .p-footer-cta__btnTel__starburst-l1 { font-size: 7px; letter-spacing: -0.04em; white-space: nowrap; }
.p-footer-cta--sp .p-footer-cta__btnTel__starburst-l2 {
  font-size: 14px;
  letter-spacing: -0.04em;
  line-height: 1;
}
.p-footer-cta--sp .p-footer-cta__btnTel__starburst-l2 .pct { font-size: 9px; }
.p-footer-cta--sp .p-footer-cta__btnTel__starburst-l3 { font-size: 8px; letter-spacing: 0; }

/* ===== Alert Modal 上下装飾: 黄黒ハザードテープを CSS で再現 ===== */
/* 参考は modal-edge-pc/sp.png 画像実装 · 現物は空 placeholder のため CSS で置換 */
.p-modal__edge--top,
.p-modal__edge--bottom {
  background: repeating-linear-gradient(
    -45deg,
    #FFD21A 0,
    #FFD21A 22px,
    #1A1A1A 22px,
    #1A1A1A 44px
  ) !important;
  background-size: auto !important;
  background-repeat: repeat !important;
  background-position: 0 0 !important;
}
/* 下端は縞方向を反転させて上下対称のハザードテープ感を出す */
.p-modal__edge--bottom {
  background: repeating-linear-gradient(
    45deg,
    #FFD21A 0,
    #FFD21A 22px,
    #1A1A1A 22px,
    #1A1A1A 44px
  ) !important;
}

/* ===== 全 LP プレースホルダーアイコン CSS 化（本セッション棚卸→一括） ===== */

/* FAQ Q アイコン (青丸 + 白 Q) */
.p-top-qa__questionList-icon img[src*="qa-q-icon"] {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><circle cx='14' cy='14' r='14' fill='%230F8FEA'/><text x='14' y='20' text-anchor='middle' font-family='Arial,sans-serif' font-size='18' font-weight='700' fill='white'>Q</text></svg>") !important;
}

/* FAQ A アイコン (濃紺丸 + 白 A) */
.p-top-qa__answerList-icon img[src*="qa-a-icon"] {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><circle cx='14' cy='14' r='14' fill='%230B253B'/><text x='14' y='20' text-anchor='middle' font-family='Arial,sans-serif' font-size='18' font-weight='700' fill='white'>A</text></svg>") !important;
}

/* Page top (goTop) — 青丸 + 白い上向き chevron */
.c-goTop img,
.c-goTop picture img {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><circle cx='22' cy='22' r='22' fill='%230F8FEA'/><path d='M12 26 L22 16 L32 26' stroke='white' stroke-width='3.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}

/* Simulation 「より詳細な見積もりを確認」ボタン内の下矢印 */
.p-result__detail img[src*="icon-arrow-bottom"] {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B253B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,9 12,16 18,9'/></svg>") !important;
}

/* Flow STEP 間の右矢印 */
.p-flow-card:first-of-type::after,
.p-flow-card:nth-of-type(2)::after,
.p-flow-card:nth-of-type(3)::after,
.p-flow-card:nth-of-type(4)::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F8FEA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9,6 15,12 9,18'/></svg>") no-repeat center center !important;
  background-size: contain !important;
}

/* Header PC menu の narrow range (900-1023px) 対応 · nowrap + font 縮小 */
.p-header-pcMenu__textArea .p-header-pcMenu__left .p-header-pcMenu__text {
  white-space: nowrap !important;
}
.p-header-pcMenu__textArea .p-header-pcMenu__left .p-header-pcMenu__tel {
  white-space: nowrap !important;
}
@media (max-width: 1023px) {
  .p-header-pcMenu {
    gap: 6px !important;
  }
  .p-header-pcMenu__textArea {
    gap: 10px !important;
  }
  .p-header-pcMenu__textArea .p-header-pcMenu__left .p-header-pcMenu__text {
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
  }
  .p-header-pcMenu__textArea .p-header-pcMenu__left .p-header-pcMenu__tel {
    font-size: 28px !important;
    padding-left: 26px !important;
    margin-top: -8px !important;
  }
  .p-header-pcMenu__textArea .p-header-pcMenu__left .p-header-pcMenu__tel::before {
    width: 22px !important;
    height: 22px !important;
  }
  .p-header-pcMenu__textArea .p-header-pcMenu__right {
    width: 170px !important;
  }
  .p-header-pcMenu__textArea .p-header-pcMenu__right span {
    white-space: nowrap !important;
  }
  .p-header-pcMenu__imgArea img {
    width: 60px !important;
    height: 60px !important;
  }
}

/* Header PC menu 電話アイコン (cobalt blue #02479D · テキスト色に合わせる) */
.p-header-pcMenu__tel::before {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2302479D'><path d='M9.42694 2.6961C8.84026 1.86531 8.02794 1.49094 7.16638 1.50017C6.34893 1.50837 5.55301 1.85813 4.88838 2.32378C4.21048 2.80104 3.63244 3.40626 3.1868 4.10537C2.76628 4.77103 2.46269 5.55772 2.50371 6.32594C2.70167 10.0214 4.78069 13.9703 7.70075 16.8924C10.6188 19.8115 14.5153 21.8402 18.4497 21.4525C19.221 21.3766 19.9503 20.9838 20.5462 20.4833C21.1625 19.9612 21.6661 19.3191 22.0262 18.596C22.3749 17.8863 22.5831 17.0678 22.4683 16.2708C22.3493 15.44 21.8847 14.6975 21.0303 14.2051C20.8533 14.1024 20.6782 13.9964 20.5051 13.8872C20.3513 13.7918 20.1872 13.6882 19.9882 13.5692C19.5818 13.3186 19.1529 13.1064 18.7071 12.9354C18.2487 12.7682 17.7246 12.6584 17.1789 12.7333C16.6138 12.8113 16.0886 13.0779 15.6343 13.5559C15.2845 13.9251 14.7696 14.04 14.0455 13.8308C13.3091 13.6174 12.4803 13.0882 11.7603 12.3723C11.0403 11.6584 10.4957 10.8235 10.2629 10.0696C10.0331 9.32295 10.1346 8.77422 10.4936 8.39575C10.9788 7.88496 11.2372 7.31674 11.2916 6.7157C11.3449 6.13107 11.1993 5.58131 10.9911 5.10129C10.6793 4.38435 10.15 3.67151 9.73567 3.1156C9.63149 2.97661 9.52891 2.83643 9.42797 2.69507'/></svg>") no-repeat center center !important;
  background-size: contain !important;
}

/* Footer CTA (PC) 電話アイコン (白 · 濃紺帯上) */
.p-footer-cta--pc .p-footer-cta__tel::before {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9.42694 2.6961C8.84026 1.86531 8.02794 1.49094 7.16638 1.50017C6.34893 1.50837 5.55301 1.85813 4.88838 2.32378C4.21048 2.80104 3.63244 3.40626 3.1868 4.10537C2.76628 4.77103 2.46269 5.55772 2.50371 6.32594C2.70167 10.0214 4.78069 13.9703 7.70075 16.8924C10.6188 19.8115 14.5153 21.8402 18.4497 21.4525C19.221 21.3766 19.9503 20.9838 20.5462 20.4833C21.1625 19.9612 21.6661 19.3191 22.0262 18.596C22.3749 17.8863 22.5831 17.0678 22.4683 16.2708C22.3493 15.44 21.8847 14.6975 21.0303 14.2051C20.8533 14.1024 20.6782 13.9964 20.5051 13.8872C20.3513 13.7918 20.1872 13.6882 19.9882 13.5692C19.5818 13.3186 19.1529 13.1064 18.7071 12.9354C18.2487 12.7682 17.7246 12.6584 17.1789 12.7333C16.6138 12.8113 16.0886 13.0779 15.6343 13.5559C15.2845 13.9251 14.7696 14.04 14.0455 13.8308C13.3091 13.6174 12.4803 13.0882 11.7603 12.3723C11.0403 11.6584 10.4957 10.8235 10.2629 10.0696C10.0331 9.32295 10.1346 8.77422 10.4936 8.39575C10.9788 7.88496 11.2372 7.31674 11.2916 6.7157C11.3449 6.13107 11.1993 5.58131 10.9911 5.10129C10.6793 4.38435 10.15 3.67151 9.73567 3.1156C9.63149 2.97661 9.52891 2.83643 9.42797 2.69507'/></svg>") no-repeat center center !important;
  background-size: contain !important;
}

/* Simulation condition の下矢印 (青 chevron down) */
.p-amount-show .p-condition__itemWrap .p-condition__item:not(:last-of-type)::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F8FEA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,9 12,16 18,9'/></svg>") no-repeat center center !important;
  background-size: contain !important;
}

/* Simulation condition が active になった時の上矢印 (青 chevron up) */
.p-amount-show .p-condition__itemWrap .p-condition__item:not(:last-of-type).is-active::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F8FEA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,15 12,8 18,15'/></svg>") no-repeat center center !important;
  background-size: contain !important;
}

/* Price 詳細トグルの下矢印 (濃紺 chevron down · 既存 rotate transition 継承) */
.p-price::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B253B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,9 12,16 18,9'/></svg>") no-repeat center center !important;
  background-size: contain !important;
}

/* Simulation Result MC 左右の line 装飾 (小さな縦線) */
.p-amount-show .p-condition__selectWrap .p-condition__result .p-result__mc::before {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13' fill='none' stroke='%230B253B' stroke-width='1.5' stroke-linecap='round'><line x1='6' y1='1' x2='2' y2='6.5'/><line x1='2' y1='6.5' x2='6' y2='12'/></svg>") no-repeat center center !important;
  background-size: contain !important;
}
.p-amount-show .p-condition__selectWrap .p-condition__result .p-result__mc::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13' fill='none' stroke='%230B253B' stroke-width='1.5' stroke-linecap='round'><line x1='2' y1='1' x2='6' y2='6.5'/><line x1='6' y1='6.5' x2='2' y2='12'/></svg>") no-repeat center center !important;
  background-size: contain !important;
}

/* ===== CTA セクション 電話番号横アイコン CSS 化 ===== */
/* 参考は icon-tel-blue.png 画像実装 · 現物は空 placeholder のため参考 SVG パスを CSS 化 */
.p-top-cta__tel::before {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230F8FEA'><path d='M9.42694 2.6961C8.84026 1.86531 8.02794 1.49094 7.16638 1.50017C6.34893 1.50837 5.55301 1.85813 4.88838 2.32378C4.21048 2.80104 3.63244 3.40626 3.1868 4.10537C2.76628 4.77103 2.46269 5.55772 2.50371 6.32594C2.70167 10.0214 4.78069 13.9703 7.70075 16.8924C10.6188 19.8115 14.5153 21.8402 18.4497 21.4525C19.221 21.3766 19.9503 20.9838 20.5462 20.4833C21.1625 19.9612 21.6661 19.3191 22.0262 18.596C22.3749 17.8863 22.5831 17.0678 22.4683 16.2708C22.3493 15.44 21.8847 14.6975 21.0303 14.2051C20.8533 14.1024 20.6782 13.9964 20.5051 13.8872C20.3513 13.7918 20.1872 13.6882 19.9882 13.5692C19.5818 13.3186 19.1529 13.1064 18.7071 12.9354C18.2487 12.7682 17.7246 12.6584 17.1789 12.7333C16.6138 12.8113 16.0886 13.0779 15.6343 13.5559C15.2845 13.9251 14.7696 14.04 14.0455 13.8308C13.3091 13.6174 12.4803 13.0882 11.7603 12.3723C11.0403 11.6584 10.4957 10.8235 10.2629 10.0696C10.0331 9.32295 10.1346 8.77422 10.4936 8.39575C10.9788 7.88496 11.2372 7.31674 11.2916 6.7157C11.3449 6.13107 11.1993 5.58131 10.9911 5.10129C10.6793 4.38435 10.15 3.67151 9.73567 3.1156C9.63149 2.97661 9.52891 2.83643 9.42797 2.69507'/></svg>") no-repeat center center !important;
  background-size: contain !important;
}

/* ===== CTA セクション「安心してお任せください」チェックアイコン CSS 化 ===== */
/* 参考は cta-icon-check.png 画像実装 · 現物は空 placeholder のため CSS で青丸+白チェックに置換 */
/* SVG は inline data URI · 単一要素完結 · 追加ファイル不要 */
.p-top-cta__textArea ul li::before,
.p-top-cta__textArea .p-top-cta__textLeft ul li::before {
  content: "" !important;
  background: #0F8FEA url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='4,12 10,18 20,7'/></svg>") no-repeat center center !important;
  background-size: 70% 70% !important;
  border-radius: 50% !important;
}

/* ===== CTA セクション: 男性 + 20%OFF クーポン baked 1 枚画像（user 焼込み） ===== */
/* 参考 quick-home 同型 · cta-man-cutout_edit.png (1141×1536) をそのまま表示 */
/* bottom: -32px で .p-top-cta__box (padding 32px) の外側下辺に画像底辺を揃える */
.p-top-cta__imgWrap {
  position: absolute !important;
  bottom: -32px !important;
  right: -24px !important;
  width: 253px !important;
}
.p-top-cta__imgWrap .p-top-cta__manCutout {
  display: block !important;
  width: 253px !important;
  height: auto !important;
  aspect-ratio: 1141 / 1536 !important;
  object-fit: contain !important;
  object-position: bottom center !important;
}

/* SP: .p-top-cta__imgArea 内に baked 画像を配置 */
.p-top-cta__imgArea {
  position: relative !important;
}
.p-top-cta__imgArea .p-top-cta__manCutout {
  display: block !important;
  width: 124px !important;
  height: auto !important;
  aspect-ratio: 1141 / 1536 !important;
  object-fit: contain !important;
  object-position: bottom center !important;
}

/* ===== payment frame: 参考風 横長 flex + 左青バー + 右白 3 列 ===== */
.p-payment-frame {
  display: flex !important;
  align-items: stretch !important;
  background: #fff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 18px rgba(15, 56, 104, 0.12) !important;
  border: 1px solid rgba(15, 56, 104, 0.08) !important;
  width: 100% !important;
  padding: 0 !important;
  /* 参考サイトの natural aspect 1469:144 ≒ 10.2:1 を固定 · 幅に応じて高さ比例スケール */
  aspect-ratio: 1469 / 144 !important;
}
.p-payment-frame__lead {
  flex: 0 0 26% !important;
  background: #29A6E9 !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 10px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  text-align: center !important;
}
.p-payment-frame__lead span {
  display: block !important;
}
.p-payment-frame__methods {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1.6fr 1fr !important;
  gap: 0 !important;
  padding: 4px 8px !important;
  min-width: 0 !important;
}
.p-payment-frame__method {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 2px 6px !important;
  border-right: 1px solid #E0E7EE !important;
  min-width: 0 !important;
}
.p-payment-frame__method:last-child {
  border-right: none !important;
}
.p-payment-frame__label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0F3868 !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}
.p-payment-frame__placeholder {
  width: 100% !important;
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px dashed #B0BEC8 !important;
  border-radius: 4px !important;
  background: #F5F9FC !important;
  color: #6E7477 !important;
  font-size: 9px !important;
  text-align: center !important;
  padding: 2px 4px !important;
  line-height: 1.2 !important;
}
@media (max-width: 767px) {
  .p-payment-frame {
    flex-direction: column !important;
    aspect-ratio: auto !important;
  }
  .p-payment-frame__lead {
    flex: 0 0 auto !important;
    font-size: 15px !important;
    padding: 12px 12px !important;
  }
  .p-payment-frame__lead span {
    display: inline !important;
  }
  .p-payment-frame__methods {
    grid-template-columns: 1fr 2fr 1fr !important;
    padding: 12px 8px !important;
  }
  .p-payment-frame__label {
    font-size: 11px !important;
  }
  .p-payment-frame__placeholder {
    min-height: 40px !important;
    font-size: 9px !important;
  }
}

/* ===== payment icon: 画像入り slot（財布・通帳）· dashed border なし ===== */
.p-payment-frame__icon {
  width: 100% !important;
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 4px !important;
}
.p-payment-frame__icon img {
  max-height: 34px !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ===== FV 内 payment overlay：hero 画像の下部に absolute 配置 · サイズは CTA セクションの .p-payment-frame と同一 ===== */
.p-fv__inner {
  position: relative !important;
}
.p-fv__payment.p-payment-frame {
  position: absolute !important;
  left: 50% !important;
  bottom: 2% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 734px !important;
  z-index: 5 !important;
  box-shadow: 0 4px 14px rgba(15, 56, 104, 0.25) !important;
}
@media (max-width: 767px) {
  /* SP: payment は HERO 画像の外（下側）に通常フロー配置 */
  .p-fv__payment.p-payment-frame {
    position: static !important;
    transform: none !important;
    max-width: 90% !important;
    margin: 10px auto 24px !important;
    left: auto !important;
    bottom: auto !important;
    aspect-ratio: auto !important;
  }
  .p-fv__payment .p-payment-frame__methods {
    grid-template-columns: 1fr 2fr 1fr !important;
  }
}

/* ===== area セクション: 地図を親フレームに収めつつ拡大 + 左右・下部クリップ ===== */
.p-top-area__imgArea {
  flex: 0 0 290px !important;
  width: 290px !important;
  aspect-ratio: 290 / 230 !important;
  height: auto !important;
  max-width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}
.p-top-area__imgArea img {
  width: 115% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  margin-left: -7.5% !important;
  margin-top: 0 !important;
}
@media (max-width: 767px) {
  .p-top-area__imgArea {
    flex: 0 0 auto !important;
    width: 100% !important;
    aspect-ratio: 290 / 230 !important;
  }
}

/* ===== Solution Compare: 2 panel 比較 CSS component (旧 solution-description image 置換) ===== */
.p-solution-compare {
  display: flex;
  gap: 16px;
  align-items: stretch;
  width: 100%;
  margin: 0 auto;
}
.p-solution-compare__panel {
  flex: 1 1 50%;
  min-width: 0;
  background: #fff;
  border-radius: 12px;
  border: 2px solid #e0e5ea;
  padding: 16px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.p-solution-compare__panel--general {
  background: #f5f6f8;
  border-color: #d4d8dd;
}
.p-solution-compare__panel--ours {
  background: #eff8ff;
  border-color: #0F8FEA;
}
.p-solution-compare__title {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #2a2b2e;
  padding: 8px 4px;
  background: #fff;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.p-solution-compare__brand {
  background: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
}
.p-solution-compare__brand img {
  max-height: 32px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.p-solution-compare__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.p-solution-compare__items li {
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  color: #2a2b2e;
  padding: 2px 0;
  position: relative;
}
.p-solution-compare__items--strike li {
  position: relative;
  color: #555;
}
.p-solution-compare__items--strike li:not(.is-highlight)::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 2px;
  background: #e53935;
  transform: rotate(-6deg);
}
.p-solution-compare__items--strike li.is-highlight {
  color: #e53935;
  font-weight: 700;
  font-size: 15px;
}
.p-solution-compare__reason {
  background: #eceef0;
  border-radius: 6px;
  padding: 10px 10px 8px;
  position: relative;
  margin-top: 4px;
}
.p-solution-compare__reason--ours {
  background: #d8ecfb;
}
.p-solution-compare__reason-label {
  position: absolute;
  top: -8px;
  left: 10px;
  background: #868a90;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: 1.2;
}
.p-solution-compare__reason--ours .p-solution-compare__reason-label {
  background: #0F8FEA;
}
.p-solution-compare__reason-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.p-solution-compare__reason-list li {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 13px;
  font-weight: 700;
  color: #2a2b2e;
  line-height: 1.3;
  white-space: nowrap;
}
.p-solution-compare__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 14px;
  font-weight: 900;
  flex-shrink: 0;
  margin-right: 6px;
}
.p-solution-compare__mark--x {
  color: #e53935;
}
.p-solution-compare__mark--check {
  color: #0F8FEA;
}

/* PC: 大きめの表示 + 横幅を 2/3 + だから box テキストセンター */
@media (min-width: 768px) {
  .p-solution-compare {
    max-width: 66.67%;
    margin: 0 auto;
  }
  .p-solution-compare__title { font-size: 18px; }
  .p-solution-compare__items li { font-size: 15px; }
  .p-solution-compare__items--strike li.is-highlight { font-size: 16px; }
  .p-solution-compare__reason-list li {
    font-size: 14px;
    justify-content: center;
  }
  .p-solution-compare__brand img { max-height: 38px; }
}

/* SP: コンパクトに */
@media (max-width: 767px) {
  .p-solution-compare { gap: 10px; }
  .p-solution-compare__panel { padding: 12px 8px 10px; gap: 10px; }
  .p-solution-compare__title { font-size: 13px; padding: 6px 2px; }
  .p-solution-compare__items li { font-size: 12px; }
  .p-solution-compare__items--strike li.is-highlight { font-size: 13px; }
  .p-solution-compare__reason-list li { font-size: 11px; }
  .p-solution-compare__brand img { max-height: 26px; }
  .p-solution-compare__mark { width: 15px; height: 15px; font-size: 12px; }
}

/* ===== modal bg: SP版は dedicated 画像 (figure 右下配置済) · CSS override 不要 ===== */
/* modal-bg-sp.png は PIL で figure を右下に oriented 済なので bg-size: cover + center で OK */

/* ===== service セクション: 独自の service-bg-pc.png 背景を解除し、メイン白ベースに統一 ===== */
.l-top__service.p-top-service,
.p-top-service {
  background-image: none !important;
  background-color: transparent !important;
}

/* ===== voice swiper SP版: container の height 272px 固定が card の実高 415-463 を切り詰めて overlap 事故 → height auto 化 ===== */
@media (max-width: 767px) {
  .swiper-container {
    height: auto !important;
    min-height: 480px !important;
  }
}

/* ===== c-goTop: 元 static で contact ↔ footer 間に 60px の白エリア産む → fixed 化 (overlay) ===== */
.c-goTop {
  position: fixed !important;
  bottom: 16px !important;
  right: 16px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  z-index: 90 !important;
}
.c-goTop__inner {
  display: block !important;
}
.c-goTop a {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15) !important;
}
@media (max-width: 767px) {
  .c-goTop {
    bottom: 110px !important; /* SP sticky CTA の上に出す */
    right: 10px !important;
  }
}