@charset "UTF-8";
/* ==========================================================================
   WEB予約 SP 画面下ボタンと予約パネル（template-parts/footer-bar2.php）
   カンプ: Figma 2002-33（閉 375x667）/ 2002-55（開）
   数値はすべて calc(カンプpx * var(--jcc-su))。線は固定 px。
   footer-bar2.php の <style> が本文より後に出るため、上書きは .jcc-rsv-sp から書いて強さで勝つ
   ========================================================================== */

.jcc-rsv-sp {
  --jcc-su: clamp(0.8533px, 100vw / 375, 1.2px);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  /* 左右の余白部分でページのタップを塞がないため */
  pointer-events: none;
}

html.open_menu .jcc-rsv-sp {
  display: none;
}

/* ページ最下部のコピーライトがボタンに隠れないよう、ボタンの高さ 60 ぶん空ける */
#body.show_footer_bar #container {
  padding-bottom: calc(clamp(51.2px, 16vw, 72px) + 1px); /* +1px＝文書高さの端数で最下部の帯がボタンに0.2〜0.5px潜るのを防ぐ */
}

/* 既存の電話・LINE・HOT PEPPER の画像には当てない */
.jcc-rsv-sp .jcc-rsv-sp__open img,
.jcc-rsv-sp .jcc-rsv-sp__close img,
.jcc-rsv-sp .jcc-rsv-sp__today img {
  display: block;
  flex-shrink: 0;
  max-width: none;
  margin: 0;
}

/* ---------- ご予約はコチラ（閉じた時・パネルのヘッダー共通の文字） ---------- */
.jcc-rsv-sp .jcc-rsv-sp__label {
  display: block;
  flex-shrink: 0;
  color: #FF7F0B;
  font-size: calc(20 * var(--jcc-su));
  font-weight: 700;
  line-height: calc(26 * var(--jcc-su));
  letter-spacing: calc(1.28 * var(--jcc-su));
  text-align: center;
  white-space: nowrap;
}
.jcc-rsv-sp .jcc-rsv-sp__label-a {
  letter-spacing: calc(1.6 * var(--jcc-su));
}
.jcc-rsv-sp .jcc-rsv-sp__label-s {
  font-size: calc(14 * var(--jcc-su));
  line-height: 1.3;
}

/* ---------- 閉じた時のボタン ---------- */
.jcc-rsv-sp .jcc-rsv-sp__open {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--jcc-su));
  width: calc(350 * var(--jcc-su));
  height: calc(60 * var(--jcc-su));
  margin: 0 auto;
  padding: 0;
  /* 線はカンプ 2px のまま（固定 px） */
  border: 2px solid #FF7F0B;
  border-radius: calc(30 * var(--jcc-su));
  background: #FFFAF4;
  font: inherit;
  color: #FF7F0B;
  cursor: pointer;
  pointer-events: auto;
}
.jcc-rsv-sp .jcc-rsv-sp__open-icon {
  width: calc(50 * var(--jcc-su));
  height: calc(50 * var(--jcc-su));
}
.jcc-rsv-sp .jcc-rsv-sp__open-arrow {
  width: calc(30 * var(--jcc-su));
  height: calc(30 * var(--jcc-su));
}
/* あしらい: 外形の左上から (43.5, -11)（ref/2002-35@2x.png に重ねて確定）。絶対配置の基準は線の内側なので線 2px を引く */
.jcc-rsv-sp .jcc-rsv-sp__open-deco {
  position: absolute;
  left: calc(43.5 * var(--jcc-su) - 2px);
  top: calc(-11 * var(--jcc-su) - 2px);
  width: calc(41 * var(--jcc-su));
  height: calc(30 * var(--jcc-su));
}
.jcc-rsv-sp.is-open .jcc-rsv-sp__open {
  visibility: hidden;
}

/* ---------- 開いた時のパネル ---------- */
.jcc-rsv-sp .jcc-rsv-sp__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 0 calc(4 * var(--jcc-su)) calc(4 * var(--jcc-su));
  /* 線はカンプ 2px のまま（固定 px） */
  border: 2px solid #FF7F0B;
  border-radius: calc(30 * var(--jcc-su)) calc(30 * var(--jcc-su)) 0 0;
  background: #FFF7F2;
  transform: translateY(100%);
  visibility: hidden;
  /* 閉じる時は下がり切ってから隠す */
  transition: transform 0.35s, visibility 0s linear 0.35s;
  pointer-events: auto;
}
.jcc-rsv-sp.is-open .jcc-rsv-sp__panel {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.35s;
}

/* ヘッダー行（閉じるボタン） */
.jcc-rsv-sp .jcc-rsv-sp__close {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--jcc-su));
  width: 100%;
  height: calc(48 * var(--jcc-su));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: #FF7F0B;
  cursor: pointer;
}
.jcc-rsv-sp .jcc-rsv-sp__close-icon {
  width: calc(44 * var(--jcc-su));
  height: calc(44 * var(--jcc-su));
}
.jcc-rsv-sp .jcc-rsv-sp__close-x {
  width: calc(30 * var(--jcc-su));
  height: calc(30 * var(--jcc-su));
}

/* 2x2 */
.jcc-rsv-sp .fixed-footer-btn-wrap {
  margin-top: calc(6 * var(--jcc-su));
}

/* ---------- 本日の予約状況を確認する（2x2 の右上） ---------- */
.jcc-rsv-sp .jcc-rsv-sp__today,
.jcc-rsv-sp .jcc-rsv-sp__today:hover {
  position: relative;
  /* 2x2 の列幅を中身で広げず兄弟と同じ幅に保つ */
  min-width: 0;
  gap: calc(4 * var(--jcc-su));
  /* 左右は線の内側から 5 / 6。上下はカンプの余白差（上5・下6）を下 1 で再現して縦中央 */
  padding: 0 calc(6 * var(--jcc-su)) calc(1 * var(--jcc-su)) calc(5 * var(--jcc-su));
  /* 線はカンプ 2px のまま（固定 px） */
  border: 2px solid #DF6D05;
  background: #FF7F0B;
  /* 影はカンプの px 指定のまま（兄弟ボタンの影も固定 px） */
  box-shadow: inset -4px -5px 4px rgba(0, 0, 0, 0.12), inset 6px 5px 4px rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  text-decoration: none;
}
.jcc-rsv-sp .jcc-rsv-sp__today-icon {
  width: calc(26 * var(--jcc-su));
  height: calc(26 * var(--jcc-su));
}
.jcc-rsv-sp .jcc-rsv-sp__today-arrow {
  width: calc(16 * var(--jcc-su));
  height: calc(16 * var(--jcc-su));
}
.jcc-rsv-sp .jcc-rsv-sp__today-txt {
  display: block;
  flex-shrink: 0;
  color: #FFFFFF;
  font-size: calc(10 * var(--jcc-su));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}
.jcc-rsv-sp .jcc-rsv-sp__today-row {
  display: block;
}
.jcc-rsv-sp .jcc-rsv-sp__today-lg {
  font-size: calc(14 * var(--jcc-su));
}
/* あしらい: アイコンの左上から (-4, -9)（375 で外形の左上から (3.5, -2)。ref/2002-57@2x.png に重ねて確定）
   ボタンの幅・高さはグリッドで伸びるため、中央寄せした中身（幅164・高さ26＋下余白1）の位置から逆算してアイコンに付ける */
.jcc-rsv-sp .jcc-rsv-sp__today-deco {
  position: absolute;
  left: calc(50% - 86.5 * var(--jcc-su));
  top: calc(50% - 22.5 * var(--jcc-su));
  width: calc(22 * var(--jcc-su));
  height: calc(18 * var(--jcc-su));
}

/* HOT PEPPER の2行目「ご予約」を下へ2（カンプ＝1行目の下端から1空く。現行は1重なる）。行の高さは変えず見た目だけ動かす */
.jcc-rsv-sp .fixed-footer-btn-hotpepper .text-lg {
  position: relative;
  top: calc(2 * var(--jcc-su));
}

/* 2×2 の4つをカンプどおり高さ41（×su）に揃える。既存の min-height 41px 固定・padding 10px 7px・LINE アイコン21px のままだと、下段が45になり幅によって上段と下段の高さがずれるため */
.jcc-rsv-sp .fixed-footer-btn-wrap > .fixed-footer-btn {
  box-sizing: border-box;
  height: calc(41 * var(--jcc-su));
  min-height: 0;
}
.jcc-rsv-sp .fixed-footer-btn.fixed-footer-btn-tel,
.jcc-rsv-sp .fixed-footer-btn.fixed-footer-btn-line,
.jcc-rsv-sp .fixed-footer-btn.fixed-footer-btn-hotpepper {
  padding-top: 0;
  padding-bottom: 0;
}