@charset "UTF-8";
/* =========================================================
   fs-cta.css — 追従の予約ボタン（電話予約／WEB予約）
   マークアップは inc/clean-parts.php の otani_clean_cta()。全モードで読む。
   PC：画面右下に縦書きのタブ2枚／SP（600px以下）：画面下に高さ60pxの横並び2ボタン。
   ※ 本番はこの部品のCSSが壊れていて（CSS内のHTMLコメントで無効化）、フッター下に白文字で
     表示されていた。ここでは本番CSSが意図していた見た目（色・寸法）で実装している。
   ========================================================= */
.fixed-reservation-buttons { position: fixed; right: 0; bottom: 0; z-index: 1100; display: flex; flex-direction: column; opacity: .9; }
.fixed-reservation-buttons .reservation-button {
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; text-orientation: upright;
  padding: 50px 18px; border-right: 1px solid var(--fs-white);
  font-family: serif; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--fs-white);
  transition: color .3s;
}
.fixed-reservation-buttons .reservation-button.tel { background: var(--fs-primary-fill); }
.fixed-reservation-buttons .reservation-button.web { background: var(--fs-accent); color: var(--fs-on-accent); }
.fixed-reservation-buttons .reservation-button.line { background: var(--fs-line-color); }

@media only screen and (max-width: 600px) {
  .fixed-reservation-buttons { left: 0; flex-direction: row; height: 60px; }
  .fixed-reservation-buttons .reservation-button { width: 50%; flex: 1; padding: 0; writing-mode: horizontal-tb; border-right: none; border-bottom: 1px solid var(--fs-white); }
  body { padding-bottom: 60px; } /* 下部固定ボタンの分、フッターが隠れないように */
}
@media (hover: hover) {
  .fixed-reservation-buttons .reservation-button:hover { filter: brightness(1.1); } /* 本番CSSの「文字を黒に」は濃い緑の上で読めなくなるので、明るさの変化にした */
}