/* ========================================
   追従CTAバー（画面下固定・白）
   2026-08-03 Figma 全深度反映：2159:374＝電話版／2966:471＝フォーム版
   ・ボタンは常に1つだけ表示（受付時間内=電話／時間外=フォーム を js/main.js が出し分け）
   ・右上のキャッチイメージはバー上端から-28pxにはみ出す（clipsContent:false）
   ======================================== */

.cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Figma counterAxisAlignItems=MIN */
  gap: 8px; /* Figma 2159:374 itemSpacing */
  padding: 12px 16px; /* Figma 2159:374 p(12,16) */
  background: #fff;
  /* Locofy上は上辺影なし＝要確認。視認性のため暫定付与 */
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(0);
  transition: transform 0.25s ease;
}
/* ⚠️キャッチイメージがバー上端から28pxはみ出すため、バー高さ基準の110%では隠しきれない
   （98px×110%＝107.8px移動でも画像の下端が約18px残る）→ はみ出し分を足して確実に画面外へ */
.cta-bar.is-hidden { transform: translateY(calc(100% + 32px)); }

/* キャッチイメージ（Figma 2966:467）：100x65・右から27px・上へ28pxはみ出す。
   ⚠️「右からの位置で固定」＝画面幅が変わっても右端からの距離を一定にする（left基準にしない） */
.cta-bar-catch {
  position: absolute;
  top: -28px;
  right: 27px; /* Figma x263+w100=363 → 390−363 */
  width: 100px;
  height: 65px;
  pointer-events: none;
}

/* ボタン（Figma 2159:375／2159:378）：h52・p(8,20)・gap8 */
.cta-bar-btn {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 8px 20px;
  border-radius: 999px;
  overflow: hidden;
  color: #fff;
  text-align: center;
}
.cta-bar-btn[hidden] { display: none; } /* hidden属性をflexより優先させる */
.cta-bar-btn--form { background: var(--c-primary); } /* Figma 2159:378 #1E7FC2（旧グリーン） */
.cta-bar-btn--tel { background: var(--c-cta-tel); } /* 2026-08-12：電話CTAは#FF5C5C */
/* アイコン（Figma 2966:469）：24x24・縦中央・左22px。
   ⚠️Figmaのrotationは反時計回りが正、CSSは時計回りが正なので符号が反転する（-5 → +5deg） */
.cta-bar-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%) rotate(5deg);
  width: 24px;
  height: auto;
}
.cta-bar-icon--form { transform: translateY(-50%); } /* フォーム側は回転なし */
.cta-bar-sub {
  font-size: 12px;
  line-height: 12px;
  font-weight: 700; /* Figma Bold */
}
.cta-bar-main {
  font-size: 16px;
  line-height: 16px;
  font-weight: 900; /* Figma Black */
}

/* 上部の時刻テキスト（Figma 2925:320／2966:473）：12px Bold・紺＋強調コーラル。
   幅はキャッチイメージ（右127px分）に潜り込まないよう制限する */
.cta-bar-notice {
  max-width: 244px; /* Figma 2925:320 実測 */
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-navy);
  text-align: center;
  /* Figma stroke #FFFFFF 2px OUTSIDE → CSSは中央基準のため2倍。
     白背景では見えないが、はみ出したキャッチイメージに重なった際の可読性を担保 */
  -webkit-text-stroke: 4px #fff;
  paint-order: stroke fill;
}
.cta-bar-notice .em { color: var(--c-primary); } /* 2026-08-03ユーザー指定：青（旧コーラル） */
.cta-bar-notice:empty { display: none; }
.cta-bar-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}