/* ===================== 店舗一覧 ページ =====================
   ※ このファイルは shop.html だけが読み込むため、汎用セレクタ(.cta/.shop-grid 等)を
      上書きしても他ページ(index 等)には影響しない。 */
.shop-sec { padding: 80px 0 90px; }

/* 説明とエリアは設計では同サイズ。エリアを説明に合わせて揃える */
.shop-card__area { font-size: 18px; }

/* CTA(事業に対するお問い合わせ): 設計は見出し中央 */
.cta h2 { text-align: center; font-size: clamp(22px, 2vw, 24px); }

@media (max-width: 768px) {
  .shop-sec { padding: 50px 0 56px; }

  /* ヒーロー(設計SP): 見出しは左から約73pxインデント・24px、罫線は右寄り(x161→365) */
  .page-hero h1 { font-size: 24px; margin-left: 52px; }
  .page-hero .rule { margin-left: 139px; margin-right: -12px; width: auto; }

  /* 不要な左右マージン(max-width:360 + margin-inline:auto)を除去しコンテナ幅いっぱいに */
  .shop-grid { max-width: none; margin-inline: 0; }

  /* CTA: SPも中央(共有の右寄せ・大きめ指定を上書き) */
  .cta h2 { font-size: 16px; }
  .cta .btn-mail { margin-left: auto; margin-right: auto; }

  /* 店舗カードのボタンを1行に収める(設計は1行)。字間・余白・矢印を詰める */
  .shop-card .btn { padding: 12px 14px; gap: 12px; white-space: nowrap; }
  .shop-card .btn .arrow { width: 48px; }
}