@charset "UTF-8";
/* =========================================================
   fs-cta.css — 追従の予約ボタン（電話予約/WEB予約の縦書きサイドバー）＋LINEアイコン＋ページトップ
   マークアップは inc/clean-parts.php の shirokane_clean_cta()。全モードで読む。
   本番（_recon/pages/index.html の #sp-fixed-menu / #custom-sidebar / .pagetop）準拠。
   PC：右端に縦書き2段＋LINEアイコン／SP(〜1024px)：下部に横並び2段、LINEアイコンは非表示。
   ========================================================= */
.fixed-reservation-buttons { position: fixed; right: 0; bottom: 10%; z-index: 1100; font-size: 0; opacity: .9; }
.fixed-reservation-buttons ul { list-style: none; margin: 0; padding: 0; width: 100%; }
.fixed-reservation-buttons li {
  writing-mode: vertical-rl; text-orientation: upright; display: flex; justify-content: flex-start; align-items: center;
  margin: 0; padding: 40px 8px; font-size: 14px; border-right: 1px solid var(--fs-white);
}
.fixed-reservation-buttons li:first-child { background: #96857B; }
.fixed-reservation-buttons li:last-child { background: #B6AAA3; }
.fixed-reservation-buttons .reservation-button {
  display: block; width: 100%; padding: 10px; color: var(--fs-white); font-weight: 700; font-family: var(--fs-font-serif);
  text-align: center; text-decoration: none; transition: opacity .2s;
}
.fixed-reservation-buttons .reservation-button:hover { opacity: .85; }

/* LINE相談バナー（PCのみ。本番画像 assets/img/line-side.webp を使用） */
.fs-line-side { position: fixed; right: 0; bottom: calc(30% + 180px); z-index: 1100; opacity: .95; transition: transform .3s ease, opacity .3s ease; }
.fs-line-side img { width: 60px; height: auto; display: block; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,.2); transition: transform .3s ease; }
.fs-line-side a:hover img { transform: scale(1.1); }

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

/* AIチャットボタン（nomoca-ai、本番準拠） */
#open-chatbot { position: fixed; bottom: 20px; right: 70px; z-index: 1000; background: none; border: none; padding: 0; cursor: pointer; outline: none; }
.chat-icon.desktop { width: 230px; height: auto; display: block; }
.chat-icon.mobile { width: 110px; height: auto; display: none; }

@media (max-width: 768px) {
  .chat-icon.desktop { display: none; }
  .chat-icon.mobile { display: block; width: 120px; height: auto; }
  #open-chatbot { bottom: 80px; left: 40px; right: auto; transform: scale(1.5); }
}

@media screen and (max-width: 1024px) {
  .fs-line-side { display: none; }
  .fixed-reservation-buttons { right: 0; left: 0; bottom: 0; width: 100%; height: 60px; }
  .fixed-reservation-buttons ul { display: flex; flex-direction: row; height: 100%; }
  .fixed-reservation-buttons li { width: 50%; padding: 0; border-right: none; border-bottom: 1px solid var(--fs-white); display: flex; justify-content: center; align-items: center; writing-mode: horizontal-tb; }
  .fixed-reservation-buttons .reservation-button { padding: 0; line-height: 1.4; }
  .fs-pagetop { bottom: 100px; }
  body { padding-bottom: 60px; } /* 下部固定CTAの分、フッターが隠れないように */
}