/* ドロワー内 WEB予約ボタン（本日の予約状況を確認する）
   カンプ: figma_coding/inspect_2002-135.txt ／ ref/2002-160@2x.png
   数値はカンプ(375幅・ドロワー300)の px × --jcc-du */

/* 既存の Web ボタンはドロワー内だけで消す（DB・PC ヘッダー・フッターには効かせない） */
#mobile_banner .header-btn.new a.header-btn-web {
  display: none;
}

#mobile_banner .jcc-rsv-drawer {
  --jcc-du: clamp(0.8533px, 100vw / 375, 1.2px);
  /* 固定px: 前後の .banner の margin 20px（固定）と相殺して上10・下16にするため */
  margin: -10px 0 -4px;
  padding: 0;
}

/* ID つきで書いて、サイト全体の a / a:hover の色・下線より強くする */
#mobile_banner .jcc-rsv-drawer__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--jcc-du));
  box-sizing: border-box;
  width: calc(244 / 300 * 100%);
  height: calc(46 * var(--jcc-du));
  margin: 0 auto;
  padding: 0;
  background: #FF7F0B;
  border: none;
  /* 固定px: 高さより十分大きい値で両端を半円にするため（カンプ r=100） */
  border-radius: 100px;
  color: #FFFFFF;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  opacity: 1;
}

#mobile_banner .jcc-rsv-drawer img {
  display: block;
  flex-shrink: 0;
  max-width: none;
  margin: 0;
}

#mobile_banner .jcc-rsv-drawer__icon {
  width: calc(33 * var(--jcc-du));
  height: calc(33 * var(--jcc-du));
}

#mobile_banner .jcc-rsv-drawer__arrow {
  width: calc(22 * var(--jcc-du));
  height: calc(22 * var(--jcc-du));
}

#mobile_banner .jcc-rsv-drawer__deco {
  position: absolute;
  /* カンプの描画範囲（13.58, -4.06）に合わせる */
  left: calc(13.5 * var(--jcc-du));
  top: calc(-4 * var(--jcc-du));
  width: calc(22 * var(--jcc-du));
  height: calc(18 * var(--jcc-du));
}

#mobile_banner .jcc-rsv-drawer__txt {
  display: block;
  font-size: calc(15 * var(--jcc-du));
  color: #FFFFFF;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

#mobile_banner .jcc-rsv-drawer__l1,
#mobile_banner .jcc-rsv-drawer__l2 {
  display: block;
  font-size: calc(13 * var(--jcc-du));
}

/* 1行目の行送りはカンプの基準 15 × 1.1 = 16.5（13 × 1.1 だと2行目が ref より1px上がる） */
#mobile_banner .jcc-rsv-drawer__l1 {
  line-height: calc(16.5 * var(--jcc-du));
}

#mobile_banner .jcc-rsv-drawer__lg {
  font-size: calc(16 * var(--jcc-du));
}