/* 右側の追従メニュー（オリジナル）: ブログ / X / Instagram / Web予約 / ページ先頭へ */
:root { --sf-ink: #280400; --sf-accent: #f08a00; --sf-accent2: #ffb84d; }

/* 旧テーマのトップへ戻るボタンは使わない（追従メニューに統合） */
#page_top, .page_top_btn { display: none !important; }

.sf {
  position: fixed; right: 14px; top: 50%; z-index: 900;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 58px; padding: 8px 6px; border-radius: 30px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 10px 30px rgba(40, 4, 0, .16), 0 1px 0 rgba(255, 255, 255, .8) inset, 0 0 0 1px rgba(40, 4, 0, .05);
  transform: translate(90px, -50%); opacity: 0;
  transition: transform .7s cubic-bezier(.2, .9, .25, 1.15), opacity .5s ease;
}
.sf.is-in { transform: translate(0, -50%); opacity: 1; }

.sf__btn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 100%; padding: 6px 0 5px; border: 0; border-radius: 22px; background: transparent; cursor: pointer;
  color: var(--sf-ink); text-decoration: none; font: inherit; -webkit-tap-highlight-color: transparent;
  transition: background .2s, transform .2s, color .2s;
}
.sf__ico { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.sf__ico svg { width: 22px; height: 22px; }
.sf__txt { font-size: 9.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.1; }
.sf__btn:hover, .sf__btn:focus-visible { background: rgba(240, 138, 0, .12); transform: translateX(-2px); }
.sf__btn:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 1px; }

/* Web予約: 主役のボタン */
.sf__btn--booking {
  padding: 9px 0 8px; margin-bottom: 0; color: #fff;
  background: linear-gradient(160deg, var(--sf-accent2), var(--sf-accent));
  box-shadow: 0 6px 14px rgba(240, 138, 0, .38);
}
.sf__btn--booking:hover, .sf__btn--booking:focus-visible { background: linear-gradient(160deg, #ffc266, #e57f00); transform: translateX(-2px) scale(1.04); }
.sf__btn--booking::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--sf-accent);
  opacity: 0; animation: sf-pulse 3.2s ease-out 2s infinite; pointer-events: none;
}
@keyframes sf-pulse { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.35); } }

.sf__sep { width: 26px; height: 1px; margin: 4px 0; background: rgba(40, 4, 0, .14); }

/* ブランド色のホバー */
.sf__btn--x:hover { background: #111; color: #fff; }
.sf__btn--ig:hover { background: linear-gradient(45deg, #f9a03f, #dd2a7b 55%, #8134af); color: #fff; }
.sf__btn--blog:hover { background: var(--sf-ink); color: #fff; }

/* ページ先頭へ（スクロール後に、同じメニューの下へせり出す） */
.sf__btn--top {
  max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; opacity: 0; overflow: hidden; pointer-events: none;
  transition: max-height .35s ease, opacity .3s ease, padding .35s ease, background .2s, transform .2s, color .2s;
}
.sf.has-top .sf__btn--top { max-height: 52px; padding: 6px 0 5px; opacity: 1; pointer-events: auto; border-top: 1px solid rgba(40, 4, 0, .1); border-radius: 0 0 22px 22px; }
.sf__btn--top:hover { background: var(--sf-ink); color: #fff; }
.sf__btn--top .sf__ico svg { width: 20px; height: 20px; }

/* ホバー時に左へ出るラベル */
.sf__tip {
  position: absolute; right: calc(100% + 12px); top: 50%; padding: 6px 12px; border-radius: 10px; white-space: nowrap;
  background: var(--sf-ink); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.3;
  opacity: 0; transform: translate(6px, -50%); pointer-events: none; transition: opacity .18s, transform .18s;
  box-shadow: 0 6px 16px rgba(40, 4, 0, .25);
}
.sf__tip small { display: block; font-size: 10px; font-weight: 500; opacity: .75; }
.sf__tip::after { content: ''; position: absolute; left: 100%; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left-color: var(--sf-ink); }
.sf__btn:hover .sf__tip, .sf__btn:focus-visible .sf__tip { opacity: 1; transform: translate(0, -50%); }

/* スマホ：画面下に浮かぶバー */
@media (max-width: 768px) {
  .sf {
    top: auto; right: 12px; left: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto;
    flex-direction: row; justify-content: space-between; gap: 2px; padding: 6px; border-radius: 26px;
    transform: translateY(120px);
  }
  .sf.is-in { transform: none; }
  .sf__btn { flex: 1; padding: 6px 0 4px; border-radius: 20px; }
  .sf__btn--booking { flex: 1.7; flex-direction: row; gap: 6px; padding: 0 10px; }
  .sf__btn--booking .sf__txt { font-size: 13px; }
  .sf__btn--booking .sf__txt::before { content: 'Web'; }
  .sf__sep { width: 1px; height: 28px; margin: 0 2px; align-self: center; }
  .sf__tip { display: none; }
  .sf__btn--top { max-height: none; max-width: 0; padding: 0; border: 0; flex: 0 0 auto; border-radius: 20px; }
  .sf.has-top .sf__btn--top { max-width: 52px; max-height: none; padding: 6px 0 4px; border-top: 0; border-radius: 20px; flex: 0 0 48px; }
  body { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf, .sf__btn, .sf__tip { transition: none; }
  .sf__btn--booking::after { animation: none; }
}
@media print { .sf { display: none !important; } }