/* ===== ボックス全体 ===== */
.ui-datepicker.ui-widget {
  font-family: "Noto Sans JP", sans-serif !important;
  border: 1px solid #d9dfe5 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  padding: 8px 10px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
  width: 280px !important;
  z-index: 9999;                /* モーダルより上に */
}
@media (max-width: 480px) {
  .ui-datepicker.ui-widget {
    width:     90%  !important;
    min-width: 280px !important;
}
}
/* ===== ヘッダー（月切替） ===== */
.ui-datepicker-header.ui-widget-header {
  color:#004a70;
  background: none;
  border: none !important;
  border-radius: 0 !important;
  padding: 7px 0 0 !important;
}
/* ===== 曜日ヘッダー ===== */
.ui-datepicker th {
  color: #8a97a4 !important;
  font-size: 1.00rem !important;
  padding-bottom: 4px !important;
}
/* 本日 */
.ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  background: #ec92a0 !important;
  border-color: #ec92a0 !important;
  color: #fff !important;
}
/* 選択中 */
.ui-state-active,
.ui-widget-content .ui-state-active {
  background: #004a70 !important;
  border-color: #004a70 !important;
  color: #fff !important;
}

/* ----------------------------------------------------------------------------
   1) カレンダー全体：マウスオーバーで opacity が落ちないように
---------------------------------------------------------------------------- */
.ui-datepicker .ui-state-hover {
  opacity: 1 !important;
}

/* ----------------------------------------------------------------------------
   2) 日付セルホバー時の文字色を #004a70（ブランドブルー）に変更
---------------------------------------------------------------------------- */
/* jQuery UI はホバー時に .ui-state-hover を付与します */
.ui-datepicker .ui-state-default.ui-state-hover:not(.ui-state-highlight) {
  border-color: #004a70 !important;
  background:   #004a70 !important;
  color:        #fff     !important;
}

/* 1) コンテナ自体の背景・ボーダーを透明化 */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  background: transparent !important;
  border:     none        !important;
  padding:0;
}


/* ───────────────────────────────────
   矢印アイコンがホバーで動かないようにする
─────────────────────────────────── */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-prev:focus,
.ui-datepicker .ui-datepicker-prev:active,
.ui-datepicker .ui-datepicker-prev.ui-state-hover,
.ui-datepicker .ui-datepicker-prev.ui-state-active {
  margin: -5px 3px 0 0 !important;  /* ← 通常時とまったく同じ数字 */
  top:    5px     !important;      /* 念のため位置リセット */
  left:  0px     !important;      /* あなたのレイアウトに合わせて調整 */
  transform: none !important;       /* 回転や移動が入らないように */
}

.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker .ui-datepicker-next:focus,
.ui-datepicker .ui-datepicker-next:active,
.ui-datepicker .ui-datepicker-next.ui-state-hover,
.ui-datepicker .ui-datepicker-next.ui-state-active {
  margin: -5px 0 0 0 !important;  /* ← 通常時とまったく同じ数字 */
  top:    5px     !important;      /* 念のため位置リセット */
  right:  3px     !important;      /* あなたのレイアウトに合わせて調整 */
  transform: none !important;       /* 回転や移動が入らないように */
}
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  cursor:pointer !important;
}
/* ------------------------------------------------------
   1) スプライト背景を消す
------------------------------------------------------ */
.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon {
  background-image: none !important;
}

/* ------------------------------------------------------
   2) 自前アイコンを当てる
   ─────────────────────────────────────────────────────
   ・プロトコル省略（//…）で混在コンテンツ対応
   ・background-size で拡大縮小
------------------------------------------------------ */
/* ← アイコン全般の大きさを揃える */
.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon {
  display: inline-block !important;
  width: 24px  !important;
  height: 24px !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 24px 24px !important;
  text-indent: -9999px !important; /* 中の文字列を隠す */
}

/* ← 左矢印 */
.ui-datepicker-prev .ui-icon {
  background-image: url('../images/consultation/calender_arrow_left.png') !important;
}
/* ← 右矢印 */
.ui-datepicker-next .ui-icon {
  background-image: url('../images/consultation/calender_arrow_right.png') !important;
}

/* ------------------------------------------------------
   3) ホバー時も背景・枠なし
------------------------------------------------------ */
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
  background: transparent !important;
  border:     none        !important;
}

/* ───────────────────────────────────
   日付セル周りの余白を拡大
─────────────────────────────────── */
/* セル(td)自体のパディングを増やす */
.ui-datepicker td {
  padding: 3px !important;   /* デフォルト2px→6pxに変更 */
}
/* 1. ボタンパネルを flex 化し、両端に配置 */
.ui-datepicker-buttonpane {
  display: flex !important;
  justify-content: space-between !important;
  padding:0 !important;   /* 必要に応じて調整 */
  margin:0 !important;
}
/* 2. 標準の「決定」（Close）ボタンを非表示に */
.ui-datepicker-buttonpane .ui-datepicker-close {
  display: none !important;
}

/* ───────────────────────────────────
   「本日」「日付未定」ボタンをブランドカラーに統一
─────────────────────────────────── */
/* ボタン要素をピンポイントで指定 */
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker .ui-datepicker-buttonpane button#undecided-btn {
  background: #ec92a0 !important;
  color: #fff     !important;
  border: none    !important;
  opacity:1 !important;
  padding:5px 10px 3px;
}

/* ホバーやフォーカスでスタイルが変わらないように上書き */
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:hover,
.ui-datepicker .ui-datepicker-buttonpane button#undecided-btn:hover,
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current.ui-state-hover,
.ui-datepicker .ui-datepicker-buttonpane button#undecided-btn.ui-state-hover {
  background: #ec92a0 !important;
  color: #fff     !important;
  border: none    !important;
  opacity:1 !important;
}


/* ───────────────────────────────────
   「日付未定」ボタンをブランドカラーに固定
─────────────────────────────────── */
/* 通常状態 */
.ui-datepicker .ui-datepicker-buttonpane button#undecided-btn-start-date,
.ui-datepicker .ui-datepicker-buttonpane button#undecided-btn-start-date.ui-state-default,
.ui-datepicker .ui-datepicker-buttonpane button#undecided-btn-end-date,
.ui-datepicker .ui-datepicker-buttonpane button#undecided-btn-end-date.ui-state-default {
  background: #004a70 !important;
  color:      #fff     !important;
  border:     none     !important;
  box-shadow: none     !important;
  opacity:    1 !important;
  border-radius:3px !important;
  padding:5px 10px 3px;
}

/* ホバー・フォーカス状態も同じ見た目 */
.ui-datepicker .ui-datepicker-buttonpane button#undecided-btn-start-date:hover,
.ui-datepicker .ui-datepicker-buttonpane button#undecided-btn-start-date:focus,
.ui-datepicker .ui-datepicker-buttonpane button#undecided-btn-start-date.ui-state-hover,
.ui-datepicker .ui-datepicker-buttonpane button#undecided-btn-end-date:hover,
.ui-datepicker .ui-datepicker-buttonpane button#undecided-btn-end-date:focus,
.ui-datepicker .ui-datepicker-buttonpane button#undecided-btn-end-date.ui-state-hover {
  background: #004a70 !important;
  color:      #fff     !important;
  border:     none     !important;
  box-shadow: none     !important;
  opacity:1 !important;
  border-radius:3px !important;
}