/* 日付ピッカーが前面に表示されるようにする。
 * ui-datepicker-div の z-index は jquery-ui.js 内でインラインスタイルとして指定されているため、
 * !important を付与して上書きする必要がある。
 */
#ui-datepicker-div {
  z-index: 100 !important;
}

/* 日付ピッカー内の .ui-widget-content のデザイン */
.ui-datepicker.ui-widget-content,
.ui-datepicker .ui-widget-content {
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
}

/* 角を丸めないようにする。 */
.ui-datepicker.ui-corner-all,
.ui-datepicker .ui-corner-all {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

/* 日付ピッカーのヘッダーのデザイン */
.ui-datepicker-header {
  border: none;
  background: #d4d3c8;
  color: #333333;
  font-weight: normal;
}

/* 日付ピッカーのヘッダー内のリンクのデザイン */
.ui-datepicker-header a {
  color: #333333;
}

/* 前月へ移動するボタンのアイコンのデザイン */
.ui-datepicker .ui-datepicker-prev span {
  background: url(/common/img/arrow_05_l.png) center center no-repeat;
  background-size: 1em;
}

/* 次月へ移動するボタンのアイコンのデザイン */
.ui-datepicker .ui-datepicker-next span {
  background: url(/common/img/arrow_05_r.png) center center no-repeat;
  background-size: 1em;
}

/* 年数の後に「年」を追加 */
.ui-datepicker-year:after {
  content: "年";
}

/* 月数の後に「月」を追加 */
.ui-datepicker-month:after {
  content: "月";
}

/* 曜日ヘッダーのデザイン */
.ui-datepicker th {
  box-sizing: border-box;
  width: 14.28%;
  padding: 0.5em 0.3em;
  text-align: center;
  font-weight: bold;
  border: 1px solid #dcdbd1;
}

/* 「日」の文字色を赤色に変更 */
.ui-datepicker th span[title="Sunday"] {
  color: #e94c3d;
}

/* 「土」の文字色を青色に変更 */
.ui-datepicker th span[title="Saturday"] {
  color: #09C;
}

/* テーブルの日付セルに枠線をつける */
.ui-datepicker td {
  border: 1px solid #dcdbd1;
  padding: 0px;
}

/* 日付セル内のデザイン（日付セルの中にはspanかaが入っている） */
.ui-datepicker td span.ui-state-default,
.ui-datepicker td a.ui-state-default {
  border: none;
  background: #FFF;
  font-weight: normal;
  color: #333;
  display: block;
  padding: 0.3em;
  text-align: center;
  text-decoration: none;
}

/* 日曜の日付セルのデザイン（薄い赤にする） */
.ui-datepicker td.ui-datepicker-week-end,
.ui-datepicker td.ui-datepicker-week-end .ui-state-default,
.ui-datepicker td.holiday .ui-state-default {
  background: #fdefee;
}

/* 土曜の日付セルのデザイン（薄い青にする） */
.ui-datepicker td+td.ui-datepicker-week-end,
.ui-datepicker td+td.ui-datepicker-week-end .ui-state-default {
  background: #ebf7fb;
}

/* 無効化された日付セルのデザイン */
.ui-datepicker td.ui-state-disabled {
  opacity: .35;
  filter: Alpha(Opacity=35);
}

/* 別の月の日付セルのデザイン */
.ui-datepicker td.ui-datepicker-other-month span,
.ui-datepicker td.ui-datepicker-week-end:first-child.ui-datepicker-other-month span,
.ui-datepicker td+td.ui-datepicker-week-end.ui-datepicker-other-month span {
  background-color: #edede3;
}

/* マウスホバー時の日付セルのデザイン */
.ui-datepicker td a.ui-state-hover {
  background: #ededed;
  font-weight: normal;
  color: #2b2b2b;
}

/* 選択中の日付セルのデザイン */
.ui-datepicker td a.ui-state-active {
  background: #09C !important;
  font-weight: normal;
  color: #ffffff;
}

/* 今日の日付セルのデザイン */
.ui-datepicker td a.ui-state-highlight {
  background: #96ca1f;
  color: #ffffff;
}

/* ボタンペインのデザイン */
.ui-datepicker .ui-datepicker-buttonpane {
  border: none;
  text-align: center;
  background: none;
}


/* ボタンペイン内の閉じるボタンのデザイン */
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close {
  background: #FFF;
  color: #333;
  display: inline-block;
  border: none;
  margin: .5em .2em .4em;
  cursor: pointer;
  font-weight: normal;
  font-size: 0.86rem;
  float: none;
}

/* ボタンペイン内の閉じるボタンのデザイン（アイコン指定） */
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close:before {
  content: "";
  display: inline-block;
  border: 1px solid #666;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  background: url(/common/img/icon_close_01.png) center center no-repeat;
  background-size: 1em;
}

/* ボタンペイン内の閉じるボタンのホバー時のデザイン */
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close:hover {
  background: none;
  text-decoration: underline;
}

/* ボタンペイン内の「今日」ボタンを非表示にする */
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  display: none;
}