/* =========================================================
   sections/cta-bar.css — SP専用・画面下部固定CTAバー（index のみ）
   ★既定は display:none（全ビューポート非表示）。表示は @media(max-width:767px) 内でのみ。
     → PC(≥1024)/狭PC(1024–1370)/タブレット(768–1023) の見た目は1pxも変わらない。
   ★既存CSSファイルは編集せず、本ファイルに分離。
   ========================================================= */

/* 既定：全ビューポートで非表示（PC/狭PC/タブレット 影響ゼロ） */
.cta-bar { display: none; }

/* ---- SP（≤767）でのみ表示 ---- */
@media (max-width: 767px) {
  .cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;                 /* 本文より前面 */
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-16);      /* 上下・左右16px */
    background: var(--color-white);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12); /* 上方向に軽い影で本文から浮かせる */
    /* 出入りトランジション（初期は下へ隠す） */
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .cta-bar.is-visible {
    transform: translateY(0);
    opacity: 1;
  }

  /* 左：電話ブロック（内容幅・縦積み左寄せ・コンパクト） */
  .cta-bar__tel {
    flex: 0 0 auto;                /* 内容幅（コンパクト） */
    display: flex;
    flex-direction: column;
    align-items: center;           /* 3行を中央寄せ */
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
  }
  .cta-bar__tel-label { font-size: var(--fs-xs); color: var(--color-text); }                    /* 12px 小見出し */
  .cta-bar__tel-num   { font-size: var(--fs-md); font-weight: 700; color: var(--color-text); }  /* 20px 番号（tel:リンク） */
  .cta-bar__tel-hours { font-size: var(--fs-xs); color: var(--color-text); }                    /* 12px 受付時間 */

  /* 右ボタン：残り幅を埋める・黄ピル・中央揃え */
  .cta-bar__btn {
    flex: 1 1 auto;                /* 左の電話ブロック以外の残り幅を埋める */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-16);
    border-radius: var(--space-96); /* ピル型（高さ以上の半径） */
    background: var(--color-primary);
    box-shadow: var(--shadow-btn);
    font-weight: 700;
    font-size: var(--fs-sm);       /* 16px */
    line-height: 1.3;
    text-align: center;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
  }

  /* 固定バーが最下部の本文（フッター等）を隠さないよう、SPのみ下部に余白を確保 */
  body { padding-bottom: var(--space-88); }
}