/* =====================
   CF7 Stock Reservation Calendar Styles
   変更したい場合は以下の CSS 変数 or 各セクションを編集してください。
   ===================== */
:root{
  /* --- カラーバリエーション ----------------- */
  --cf7sr-date-bg: #f9f9f9;       /* 平日ヘッダー背景 */
  --cf7sr-sat-header-bg:#e8f4ff;  /* 土曜ヘッダー背景 */
  --cf7sr-sun-header-bg:#ffecec;  /* 日曜ヘッダー背景 */
  --cf7sr-time-bg: #F9F9F9;       /* 左側時間列背景 */
  --cf7sr-open-bg: #eafbe7;       /* ◯ の背景色 */
  --cf7sr-few-bg:  #fffbe6;       /* △ の背景色 */
  --cf7sr-full-bg: #F9F9F9;       /* ✕ の背景色 */
  --cf7sr-none-bg: #ffffff;       /* - の背景色 */
  --cf7sr-past-bg: #F9F9F9;       /* 過去枠背景色 */
  --cf7sr-active-bg: #cfe2ff;     /* 選択中枠背景色 */
  --cf7sr-border-color: #dddddd;  /* 罫線色 */
  --cf7sr-border-width: 1px;      /* 罫線太さ */
}

/* ========== ベーステーブルレイアウト ========= */
.cf7sr-cal{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:14px;
margin-bottom: 30px;
}
.cf7sr-cal th,
.cf7sr-cal td{
  border:var(--cf7sr-border-width) solid var(--cf7sr-border-color);
  text-align:center;
  padding:.6em;
}
/* 平日ヘッダー */
.cf7sr-cal thead th{background:var(--cf7sr-date-bg);}
.wday-sat{background:var(--cf7sr-sat-header-bg) !important;}
.wday-sun{background:var(--cf7sr-sun-header-bg) !important;}
/* 左側時間列 */
.cf7sr-cal tbody th{background:var(--cf7sr-time-bg); font-weight:normal;}

/* ========== ナビゲーション ========== */
.cf7sr-cal-nav{display:flex;gap:.6em;margin:.4em 0}
.cf7sr-cal-nav a{border:var(--cf7sr-border-width) solid var(--cf7sr-border-color);padding:.2em .6em;text-decoration:none}

/* ========== ステータス別セル背景 ========== */
.status-open  {background:var(--cf7sr-open-bg);}  /* 残席あり ◯ */
.status-few   {background:var(--cf7sr-few-bg);}   /* 残りわずか △ */
.status-full  {background:var(--cf7sr-full-bg);}  /* 満席 ✕ */
.status-empty {background:var(--cf7sr-none-bg);}  /* 予約枠なし - */
.status-past  {background:var(--cf7sr-past-bg);}  /* 過去枠 */

/* 選択中（アクティブ）枠 */
.cf7sr-cell.is-selected{background:var(--cf7sr-active-bg) !important;}

.cf7sr-cell .cf7sr-pick{border:0;background:transparent;cursor:pointer;font:inherit}

/* ========== モバイル調整 ========== */
.cf7sr-calendar-wrap{overflow-x:auto;}
@media(max-width:640px){
  .cf7sr-cal{font-size:12px;min-width:600px; margin-bottom: 3vw;}
}