/* ========================================
   タブレット（768px〜）
   SP(390基準)のレイアウトを中央寄せ＋余白拡大で崩れなく見せる
   （FigmaはSPのみ＝TB/PC専用デザインは洗濯機v1/v2と同じ「中央カラム」方式）
   2026-08-12：エアコン版の現行DOM（ベイク画像・vw追従化済み要素）に合わせて全面改訂
   ======================================== */

@media (min-width: 768px) {

  /* ── ヒーロー：左右パディングでコンテンツ列を480pxに固定 ──
     メインコピーの%スピル相殺・3バッジのflex拡大・お約束/症状カードのwidth:100%が
     すべて「コンテンツ幅」基準なので、列を絞るだけでモバイルと同じ比率で描画される */
  .hero {
    padding-left: calc(50% - 240px);
    padding-right: calc(50% - 240px);
  }
  /* エリアバッジ：480px列の左端から-24px（モバイルの画面端はみ出しを列基準で再現） */

  /* ── S03クロージング：見出し・カードを480px列に ── */
  .omakase-heading,
  .omakase-card { max-width: 480px; }
  /* 絶対配置の装飾はセクション左端基準→中央基準に換算（モバイル390px時と同じ相対位置） */
  .omakase-deco { left: calc(50% + 18px); }        /* 390時: 213px = 195+18 */
  .omakase-area-badge { left: calc(50% - 203px); } /* 390時: -8px = 195-203 */

  /* ── 縦積みコンテンツの最大幅を絞って中央へ ── */
  .pledge-cards,
  .empathy-cards,
  .flow-steps,
  .faq-list,
  .contact-form-body,
  .area-card,
  .reason-cards { max-width: 680px; align-self: center; }
  .pricing-inner { max-width: 640px; }
  .cta-stack { max-width: 480px; align-self: center; }

  /* ── 追従バーもコンテンツ幅に ── */
  .cta-bar { padding: 10px 24px; justify-content: center; }
  .cta-bar-btn { max-width: 360px; }
}