:root{
  --bg-beige:#F1EADD;
  --green:#B7D9CF;
  --g-555:#555555;
  --line:#EAEAEA;
  --white:#FFFFFF;
  --shadow:0 6px 24px rgba(0,0,0,.06);
}

/* 予約ページ全体 */
.calendar-page {
  padding-top: 56px;
  padding-bottom: 56px;
}

.calendar-title {
  text-align: center;
  margin: 0 0 10px;
  color: #596362;
}

/* レイアウト：中央寄せ */
.calendar-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 24px;
}

/* 1カラムなのでPCでも中央にふわっと */
.reservation-panel {
  background:#fff;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:18px 16px 20px;
  max-width:420px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

/* スマホでは縦並び（今は1カラムやけど念のため） */
@media (max-width: 959px) {
  .calendar-layout {
    flex-direction: column;
    align-items: stretch;
  }
}

/* タイトル */
.reservation-panel h2 {
  margin:0 0 10px;
  font-size:1.1rem;
  color:#596362;
  text-align:center;
}

/* 小ラベル */
.mini-label {
  margin:14px 0 4px;
  font-size:0.9rem;
  color:#596362;
  font-weight:600;
}

/* セレクト・インプット */
#menu-select,
#time-slot,
#user-name {
  width:100%;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  font-size:0.95rem;
  box-sizing:border-box;
}

/* 自作カレンダーエリア */
.calendar-widget {
  background:#f9f6ef;
  border-radius:16px;
  padding:10px 10px 14px;
  margin-top:4px;
}

/* カレンダー上部の月移動 */
.cal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}

.cal-title {
  font-weight:600;
  color:#596362;
  font-size:0.95rem;
}

.cal-nav-btn {
  border:0;
  background:transparent;
  cursor:pointer;
  padding:4px 8px;
  font-size:1.1rem;
  color:#6d7a75;
}

/* カレンダーグリッド */
.cal-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
}

/* 曜日ヘッダ */
.cal-weekdays span {
  text-align:center;
  font-size:0.8rem;
  color:#7c7c7c;
}

/* 日付セル */
.cal-cell {
  border:0;
  padding:6px 0;
  font-size:0.9rem;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  text-align:center;
  min-height:32px;
}

.cal-cell.empty {
  background:transparent;
  cursor:default;
}

/* 今日 */
.cal-cell.today {
  border:1px solid rgba(183,217,207,.9);
}

/* 選択中 */
.cal-cell.selected {
  background:var(--green);
  color:#fff;
}

/* 休診日（見た目を少しトーンダウン） */
.cal-cell.closed-day {
  background:#f2f0ec;
  color:#9a9a9a;
}

/* 選択内容表示 */
.selected-date-display {
  margin-top:8px;
  padding:8px 10px;
  border-radius:10px;
  background:#f7f5f0;
  font-size:0.9rem;
  color:#666;
}

/* ボタン幅 */
.full-width {
  width:100%;
  margin-top:14px;
  padding:10px 0;
  text-align:center;
  font-size:1rem;
}

/* 注釈テキスト */
.note-text {
  margin-top:10px;
  text-align: left;
}

/* ===== PC・タブレットでは全体を中央寄せ ===== */
@media (min-width: 768px) {
  .calendar-page .container {
    text-align:center;
  }
  .reservation-panel {
    text-align:left; /* 中身の文字は読みやすく左寄せ */
  }
}

/* ===== スマホでは本文は左寄せにしたい ===== */
@media (max-width: 767px) {
  .calendar-page .container {
    text-align:left;
  }
  .calendar-page .section-lead {
    text-align:left;
  }
  .reservation-panel {
    margin-left:0;
    margin-right:0;
  }
  .calendar-widget,
  .mini-label,
  #selected-date-display,
  .note-text {
    text-align:left;
  }
}