@charset "UTF-8";
/*=========================================================================
  teloff.css  ―  電話番号の削除にともなうレイアウト・デザイン調整（gas）

  ・index.css は他ページ（form 等）でも使用しているため、電話番号削除に
    ともなう調整はこのファイルに分離しています。
  ・index.html の index.css の直後に読み込んでいます。
  ・電話番号を元に戻す場合は、index.html のこのファイルへの link 1行を
    削除するだけで、CSSは完全に元の状態に戻ります。

  【設計方針】
  電話ブロックが抜けた片側を無理に埋めず、メール導線1本の中央1カラムに
  再構成して「意図した余白」に見せる方向で調整しています。
=========================================================================*/


/*=========================================================================
  1. ヘッダー（.header__inner）
     旧：ロゴ（左）｜ 電話（右）の space-between 2カラム
     新：ロゴのみ。右カラムが消えた分、SP と同じく中央寄せに揃える。
=========================================================================*/
.header__inner {
  justify-content: center;
}


/*=========================================================================
  2. 本文CTA（.cta__btns）※4箇所共通
     旧：電話ボタン ＋ メールボタン の grid 2カラム
     新：メールボタン1本の中央1カラム。
     ・PCは 1カラムでも小さく見えないよう、ボタン幅の上限を 360px → 460px
       に広げています（テキストボタンなので拡大による画質劣化はなし）。
     ・.cta__img（女性の画像）は position:absolute のため影響を受けません。
=========================================================================*/
.cta__btns {
  grid-template-columns: 1fr;
  justify-items: center;
}

@media screen and (min-width: 768px) {
  .cta__btns .btn-mail {
    max-width: 460px;
  }
}


/*=========================================================================
  3. 追従バナー（.banner）
     PC：電話 ＋ メールの 2カラム → メール1本を中央寄せ。
     SP：電話 ＋ メールの 2カラム → メール1本を全幅。
         .btn-mail2 は width:100% のため、1カラム化するだけで
         そのまま全幅に収まります（画像ではないため変形は発生しません）。
=========================================================================*/
.banner__btns-pc {
  grid-template-columns: 1fr;
  justify-items: center;
}

@media screen and (min-width: 768px) {
  .banner__btns-pc .btn-mail {
    max-width: 460px;
  }
}

@media screen and (max-width: 767px) {
  .banner__btns-sp {
    grid-template-columns: 1fr;
  }
}