@charset "UTF-8";
/* =========================================================
   fs-cta.css — 追従の予約ボタン（WEB予約/電話予約/LINE）＋ページトップ
   マークアップは inc/clean-parts.php の kagoshima_clean_cta()。全モードで読む。
   本番（Brizy版）に合わせ、PC は画面右端に「丸アイコン＋縦書きラベル」の縦長ボタン。
   SP は下部に全幅の横並び（本番SPも同様の下部固定）。
   ========================================================= */
.fixed-reservation-buttons { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 1100; display: flex; flex-direction: column; gap: 5px; }
.fixed-reservation-buttons .reservation-button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  width: 78px; padding: 26px 0; color: var(--fs-white); background: var(--fs-btn-web);
  transition: filter .2s, transform .2s;
}
.fixed-reservation-buttons .reservation-button.tel  { background: var(--fs-btn-tel); }
.fixed-reservation-buttons .reservation-button.line { background: var(--fs-line-color); }
.fixed-reservation-buttons .reservation-button:hover { filter: brightness(1.06); transform: translateX(-3px); }

/* 丸いアイコン（白フチの円） */
.reservation-button__icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.28); }
.reservation-button__icon i { font-size: 17px; color: var(--fs-white); }

/* 縦書きラベル */
.reservation-button__label { writing-mode: vertical-rl; text-orientation: upright; font-family: var(--fs-font-sans); font-size: 13px; letter-spacing: .22em; line-height: 1; }

/* ページトップへ戻る（400px スクロールで表示：fs-theme.js） */
.fs-pagetop { border: 0; padding: 0; position: fixed; right: 20px; bottom: 28px; z-index: 1050; width: 44px; height: 44px; border-radius: 50%; background: var(--fs-primary); color: var(--fs-white); display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: filter .2s, transform .2s; }
.fs-pagetop[hidden] { display: none; }
.fs-pagetop:hover { filter: brightness(1.1); transform: translateY(-2px); }

@media screen and (max-width: 768px) {
  .fixed-reservation-buttons { right: 0; left: 0; bottom: 0; top: auto; transform: none; flex-direction: row; gap: 0; }
  .fixed-reservation-buttons .reservation-button { flex: 1; width: auto; flex-direction: row; gap: 8px; padding: 13px 4px; min-height: 48px; }
  .fixed-reservation-buttons .reservation-button:hover { transform: none; }
  .reservation-button__icon { width: 24px; height: 24px; }
  .reservation-button__icon i { font-size: 13px; }
  .reservation-button__label { writing-mode: horizontal-tb; text-orientation: mixed; font-size: 13px; letter-spacing: .08em; }
  .fs-pagetop { left: 12px; right: auto; bottom: 62px; width: 42px; height: 42px; }
  body { padding-bottom: 48px; } /* 下部固定CTAの分、フッターが隠れないように */
}