/*
 * brushup.css — FB #2「ボタン/アイコン/イラストがちゃっちい」対応
 * Phase 1-3 まとめて実装 (2026-08-25)
 *
 * 参考サイト hachi-hunter.net 分析データ + 実測サイズ比較から:
 *   - 参考サイトはカード幅 690px (2列) が主流、B案は 297px (3-5列)
 *   - 参考サイトはアイコン 40-46px、B案は SVG 22px
 *   - 参考サイトは色軸1本 (暖色オレンジ)、B案は 7色運用でノイズ
 *
 * 適用範囲:
 *   Phase 1: 主導線格差 (CTA サイズ拡大, ただし電話CTAは既に副CTAの2倍なので相対比率は保持)
 *   Phase 2: 情報密度抑制 (grid 列数削減)
 *   Phase 3: アイコン強化 + 装飾減衰
 *
 * 見送り (実装ノート):
 *   Phase 1.2 色分担 CTA — 画像実装のため新アセット必要 (要別途対応)
 *   Phase 1.3 FV 価格「1,980円〜」最大化 — hero-desktop-shimizu-calm-v2.png に焼込のため画像再生成必要
 */

/* ==============================================================
 * Phase 1: 主導線の格差化 — CTA 全体サイズ拡大 (比率は保持)
 * ============================================================== */

/* 電話CTA(メイン) 430→560 & 高さ比例 */
main.delivery-polish .image-cta-phone.image-cta-main img,
main.delivery-polish .cta-band .image-cta-phone-main img {
  max-width: 560px !important;
  width: 100% !important;
  height: auto !important;
}

/* サブCTA (写真相談/見積り) 190→280 */
main.delivery-polish .image-cta-photo.image-cta-main img,
main.delivery-polish .image-cta-quote.image-cta-main img,
main.delivery-polish .cta-band .image-cta-photo-main img,
main.delivery-polish .cta-band .image-cta-quote-main img {
  max-width: 280px !important;
  width: 100% !important;
  height: auto !important;
}

/* CTAバンド内でボタン間の余白確保 */
main.delivery-polish .cta-band-inner {
  gap: 20px !important;
}

/* ==============================================================
 * Phase 2: 情報密度の抑制 — grid 列数削減
 * ============================================================== */

/* .check-grid: 4列 → 2列 (お悩みチェック等、8項目を2列4行に) */
main.delivery-polish .check-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

/* .point-grid / .bee-grid: 4項目のため 2×2 に (3列だと最終行に1個孤立 orphan バグ発生) */
main.delivery-polish .point-grid,
main.delivery-polish .bee-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

/* 2×2 化に伴い各カード内で icon-left + text-right の横並びレイアウトに */
main.delivery-polish .point-card,
main.delivery-polish .bee-card {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 20px !important;
  align-items: start !important;
  padding: 28px 30px !important;
}

/* icon カラム: 大きなアイコンを目立たせる */
main.delivery-polish .point-card .point-icon,
main.delivery-polish .bee-card > svg,
main.delivery-polish .bee-card .bee-icon,
main.delivery-polish .bee-card > *:first-child {
  grid-column: 1 !important;
  align-self: start !important;
}

/* text ブロック: 見出し・本文を左端揃え、readable な文字サイズ */
main.delivery-polish .point-card h3,
main.delivery-polish .bee-card h3 {
  font-size: 22px !important;
  margin-bottom: 8px !important;
}
main.delivery-polish .point-card p,
main.delivery-polish .bee-card p {
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* .case-grid: 4列 → 2列 (相談事例は視覚的に大きく) */
main.delivery-polish .case-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

/* .photo-proof-grid / .place-grid / .voice-grid は既に 3列で妥当なため据置 */

/* ==============================================================
 * Phase 3: アイコン強化 + 装飾整理
 * ============================================================== */

/* SVG アイコン一律 22→40px (point-icon / check-item など) */
main.delivery-polish .point-icon svg,
main.delivery-polish .check-item svg,
main.delivery-polish .service-promise svg {
  width: 40px !important;
  height: 40px !important;
}

/* point-icon コンテナ (現状 56x50) を大きく */
main.delivery-polish .point-icon {
  width: 68px !important;
  height: 68px !important;
}

/* 装飾密度削減 — box-shadow を各カードで半減 */
main.delivery-polish .check-item,
main.delivery-polish .point-card,
main.delivery-polish .bee-card,
main.delivery-polish .voice-card,
main.delivery-polish .case-card,
main.delivery-polish .photo-proof-card,
main.delivery-polish .flow-item,
main.delivery-polish .price-row,
main.delivery-polish article {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06) !important;
  border-radius: 10px !important;
}

/* ==============================================================
 * 副次: カード内テキスト/パディングもサイズ増に合わせて拡大
 * ============================================================== */

/* check-item 内テキスト 2列化に伴い余白と文字を大きく */
main.delivery-polish .check-item {
  padding: 20px 24px !important;
  min-height: 90px !important;
}
main.delivery-polish .check-item p,
main.delivery-polish .check-item span {
  font-size: 17px !important;
  line-height: 1.55 !important;
}

/* point-card / bee-card 3列化に伴うパディング */
main.delivery-polish .point-card,
main.delivery-polish .bee-card {
  padding: 24px 22px !important;
}

/* case-card 2列化 — padding は画像除いたテキスト部分のみに (image edge-to-edge 化と両立) */
main.delivery-polish .case-card {
  padding: 0 !important;
}
main.delivery-polish .case-card > *:not(img) {
  padding: 24px 26px !important;
}

/* ==============================================================
 * 画像切れ修正: 幅維持で縦を実画像 aspect に合わせて全景表示
 * (元 CSS の object-fit:cover で強制トリミングされ、人物写真の意図が不明)
 * ============================================================== */

/* case-card: 実画像 627×627 (1:1 正方形) — 現状 470×150 で 75% カット */
/* 注: card 側の grid-template-rows: 150px 1fr が画像行を固定してるので同時に解除 */
main.delivery-polish .case-card {
  grid-template-rows: auto auto !important;
}
main.delivery-polish .case-card img {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* photo-proof-card: 実画像 627×418 (3:2) — 現状 341×190 で上下切れ */
/* 注: card 側の grid-template-rows: 190px 1fr が同じく行を固定してるので解除 */
main.delivery-polish .photo-proof-card {
  grid-template-rows: auto 1fr !important;
}
main.delivery-polish .photo-proof-card img {
  aspect-ratio: 3 / 2 !important;
  height: auto !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* place-card: 実画像 900×600 (3:2) — 現状 342×170 で上下切れ */
/* 注: 同じく grid-template-rows: 170px auto auto を全部 auto に */
main.delivery-polish .place-card {
  grid-template-rows: auto auto auto !important;
}
main.delivery-polish .place-card img {
  aspect-ratio: 3 / 2 !important;
  height: auto !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* ==============================================================
 * 画像 edge-to-edge 化 (card border 3px の余白を吸収)
 * 3 セクション共通: image を border 上に張り出し、視覚的に画像がカード外形と面一に
 * overflow:hidden により border 位置でクリップされる
 * ============================================================== */
main.delivery-polish .place-card > img:first-child,
main.delivery-polish .photo-proof-card > img:first-child,
main.delivery-polish .case-card > img:first-child {
  width: calc(100% + 6px) !important;
  max-width: none !important;
  margin: -3px -3px 0 -3px !important;
  border-radius: 5px 5px 0 0 !important;  /* 上角のみ丸め(card border-radius に合わせる)、下は角ばり */
}

/* 画像下と h3 見出しの間の 18px gap 除去 (画像下部にべた付きに) */
main.delivery-polish .place-card h3,
main.delivery-polish .photo-proof-card h3,
main.delivery-polish .case-card h3 {
  margin-top: 0 !important;
  padding-top: 18px !important;  /* margin を padding に付替 = 見た目の spacing は保持だが background との連続感が出る */
}

/* BADGE 付き wrapper div の余白削減 (photo-proof-card / case-card) */
/* 画像 → BADGE 間の空白帯 (元 22-24px の div padding-top) を 10px に削減、
   これで画像下 → BADGE の gap が視覚的に "余白" ではなく "詰め" に見える */
main.delivery-polish .photo-proof-card > div:not(.point-icon),
main.delivery-polish .case-card > div:not(.point-icon) {
  padding-top: 10px !important;
}

/* ==============================================================
 * 九州蜂ハンター ロゴ組込 (2026-08-26 FB #4 = v01 選定)
 * preview_hero/v01_classic_reference.html の overlay パターンを本番採用
 * 旧「清水住宅設備」ロゴ位置 (v1/v2 pixel diff で検出済 bbox) に精密配置
 * ============================================================== */
main.delivery-polish .hero.hero-generated {
  position: relative;
}
main.delivery-polish .hero-logo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 26.14%;
  height: 16.71%;
  z-index: 20;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
}
main.delivery-polish .hero-logo-overlay img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
}
/* SP hero (v2 は元から旧ロゴなし) — 一番上中央に配置 (tarou 指示 2026-08-28: 2倍 + 中央 + 上端)
 * ロゴを上げる代わりに HERO 画像を下にずらす方針 (tarou 追加指示) */
@media (max-width: 640px) {
  main.delivery-polish .hero-generated {
    background: #fff;
  }
  main.delivery-polish .hero-generated picture img {
    margin-top: 40px;
    /* 上端フェード (白背景に自然溶け込み · tarou 指示「ブラーみたいなの」) */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
  }
  main.delivery-polish .hero-logo-overlay {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 16%;
    padding: 0 12px;
    justify-content: center !important;
    align-items: flex-start !important;
  }
  main.delivery-polish .hero-logo-overlay img {
    object-position: center top !important;
  }
}
/* wrapper 内の h3 は既に padding-top:18px が付いてるが、BADGE がある場合は h3 前に BADGE margin-bottom があるので調整不要 */