@charset "UTF-8";
/* ==========================================================================
   予約フォーム「カウンセリング希望日」カレンダー（flatpickr）の見た目調整
   読み込み順: flatpickr.min.css・style.css の後（functions/scripts.php で登録）
   ========================================================================== */

/* --- 入力欄：カレンダーアイコンを表示し、タップできる見た目に --- */
.contact__form-contents .wpcf7 input.datepicker {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a75ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6em center;
  background-size: 1.3em;
  padding-right: 2.4em;
  cursor: pointer;
}

/* --- カレンダー本体：サイトのメインカラー（#1a75ff）に合わせる --- */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: #1a75ff;
  border-color: #1a75ff;
}
.flatpickr-day.today {
  border-color: #45b8ff;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  background: #45b8ff;
  border-color: #45b8ff;
  color: #fff;
}

/* 曜日見出し：日曜は赤、土曜は青 */
.flatpickr-weekday:nth-child(1) {
  color: #ff0000;
}
.flatpickr-weekday:nth-child(7) {
  color: #1a75ff;
}