@charset "UTF-8";
/* =========================================================
   fs-cta.css — 追従まわり（本番と同じ構成）
     SP : 画面下の固定ナビ（アクセス／問合せ／電話予約／LINE予約）
     PC : 右下の LINE 予約バナーとチャットボット呼び出し
     共通: ページトップへ戻る
   マークアップは inc/clean-parts.php の asabu_clean_cta()。
   ========================================================= */

/* ---------- SP 固定ボトムナビ ---------- */
.fixed-bottom-nav { display: none; }

@media screen and (max-width: 768px) {
  .fixed-bottom-nav {
    position: fixed; left: 0; bottom: 0; z-index: 9999; display: flex; justify-content: space-between;
    width: 100%; background: var(--fs-spbar); border-top: 1px solid var(--fs-spbar-2);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .fixed-bottom-nav .nav-item {
    flex: 1; padding: 10px 0; text-align: center; font-size: 12px; line-height: 1.4;
    color: #444; text-decoration: none; transition: background .3s;
  }
  .fixed-bottom-nav .nav-item i { display: block; font-size: 18px; margin-bottom: 3px; }
  .fixed-bottom-nav .nav-item:hover,
  .fixed-bottom-nav .nav-item:active { background: var(--fs-spbar-2); color: var(--fs-white); }
  body { padding-bottom: 56px; } /* バー分の余白 */
}

/* ---------- PC 右下の追従バナー ---------- */
.fs-float-banner { position: fixed; right: 0; bottom: 22%; z-index: 100; display: block; line-height: 0; }
.fs-float-banner img { width: 250px; height: auto; }
.fs-chatbot { position: fixed; right: 0; bottom: 12%; z-index: 100; padding: 0; background: none; border: 0; cursor: pointer; line-height: 0; }
.fs-chatbot img { width: 250px; height: auto; }

@media screen and (max-width: 430px) {
  .fs-float-banner { display: none; }
  .fs-chatbot { bottom: 90px; }
  .fs-chatbot img { width: 200px; }
}

/* ---------- ページトップへ戻る（200px スクロールで表示：fs-theme.js） ---------- */
.fs-pagetop {
  position: fixed; right: 0; bottom: 43px; z-index: 9999;
  width: 48px; height: 48px; padding: 0; border: 0;
  background: var(--fs-accent); color: #41474f; font-size: 20px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .1); transition: opacity .3s;
}
.fs-pagetop[hidden] { display: none; }
.fs-pagetop:hover { opacity: .85; }

@media screen and (max-width: 768px) {
  .fs-pagetop { bottom: 100px; width: 42px; height: 42px; font-size: 18px; }
}