.ui-datepicker {
      font-size: 2.5em; /* カレンダー全体のフォントサイズ */
    }
    .ui-datepicker td a {
      padding: 0.5em; /* 日付セルの内側余白 */
    }

    .ui-datepicker td {
      position: relative;
      height: 4.5em; /* すべてのセルの高さを統一 */
      vertical-align: top;
    }

.ui-datepicker td a {
      padding: 0.5em; /* 日付セルの内側余白 */
      display: block;
      height: 100%; /* 高さをセル全体に拡張 */
}

    /* リンクがない前後の月の日付用 */
    .ui-datepicker td span {
      padding: 0.5em;
      display: block;
      height: 100%; /* 高さをセル全体に拡張 */
    }

    /* 疑似要素で"1000円"を表示 */
    .ui-datepicker-calendar td[data-price]:after {
      content: attr(data-price);
      display: block;
      font-size: 10px;
      color: black;
      position: absolute;
      bottom: 1px;
      right: 5px;
    }

    /* カレンダーを画面中央に配置 */
    .ui-datepicker {
      position: fixed !important; /* 固定位置 */
      top: 50% !important; /* 縦方向の中央 */
      left: 50% !important; /* 横方向の中央 */
      transform: translate(-50%, -50%) !important; /* 中央揃えの調整 */
      z-index: 1000; /* 前面に表示 */
      background: white; /* 背景色 */
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* 影を追加 */
      border-radius: 8px; /* 角丸を追加 */
    }

    /* ページ全体の背景を少し暗くする */
    .ui-widget-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
//      background: rgba(0, 0, 0, 0.5);
      background: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }


.ui-datepicker {
  z-index: 1000; /* カレンダーがオーバーレイの上に表示されるよう設定 */
  background: white; /* 背景色の明示 */
}

  .custom-prev img,
  .custom-next img {
    width: 50% !important;  /* アイコンの幅を半分にする */
    height: auto; /* 縦横比を維持 */
    display: block;
    margin: 0 auto; /* センター揃え */
  }









	/* 土曜日のスタイル */
	.ui-datepicker td.saturday a {
		color: blue !important;
	}

	/* 日曜日と祝日のスタイル */
	.ui-datepicker td.holiday a {
		color: red !important;
	}

	.ui-datepicker td a {
		font-weight: bold !important;
		font-size:15px !important;
	}

  @media screen and (max-width: 768px) {
    .ui-datepicker td a {
      font-size:10px !important;
      padding:0 !important;
    }
  }

	.ui-datepicker td a.ui-state-default {
		border: 1px solid #ffffff !important;
		background: #ffffff !important;
	}

	/* 選択日のスタイル */
	.ui-datepicker td a.ui-state-active {
//		background: #CCFFFF !important;
		background: rgba(15, 158, 211, 0.1) !important;
//		color: green; !important;
		color: #454545; !important;
	}
	/* 該当月の日付以外 */
	.ui-datepicker td span.ui-state-default {
		border: 1px solid #ffffff !important;
		background: #ffffff !important;
	}

	/* 年月の部分の背景色を白にする */
	.ui-widget-header {
		border: 1px solid #ffffff;
		background: #ffffff;
	}

#ui-datepicker-div{
  width: 90% !important;
  font-size: 13px !important;
}
@media screen and (max-width: 1100px) {
#ui-datepicker-div{
  width: 99% !important;
}
}