/*-------------------大枠-----------------------*/
.ui-datepicker {
 width: 90%;
 max-width: 500px;
 font-family: "Mplus 1p" !important;
 text-align: center;
 background: #FAFAFA;
 margin: 0 0 10px 0;
 border: solid 2px #CCCCCC;
 box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
 -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
/* 年月表示タイトル部 */
.ui-widget-header {
 background: #FAFAFA;
 border: none;
}
.ui-datepicker-title {
 letter-spacing: 0;
 color: #3D3D3D;
 font-weight: 600;
}
/* 前へ次へ */
.ui-datepicker-prev-hover, .ui-datepicker-next-hover {
 background: none !important;
 border: none !important;
}
.ui-datepicker .ui-datepicker-next {
 top: 2px !important;
 right: 2px !important;
 cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev {
 top: 2px !important;
 left: 2px !important;
 cursor: pointer;
}
.ui-datepicker .ui-datepicker-next span {
 background: url(../img/next.png) no-repeat left top !important;
}
.ui-datepicker .ui-datepicker-prev span {
 background: url(../img/prev.png) no-repeat left top !important;
}
/*-------------------日付-----------------------*/
/* 曜日表示箇所 */
.ui-datepicker-calendar thead th {
 color: #434343;
 font-size: 17px;
 font-weight: 400 !important;
}
.ui-datepicker-week-end span[title*="日"] {
 color: #DD0000 !important;
}
.ui-datepicker-week-end span[title*="土"] {
 color: #284DC3 !important;
}
/* 各日付 */
a.ui-state-default, span.ui-state-default {
 font-weight: 400 !important;
 display: block;
 padding: 13px 5px;
 text-align: center !important;
 font-size: 16px !important;
}
.ui-state-default {
 background: #EAEAEA !important;
 border: solid 1px #E7E7E7 !important;
 color: #333333 !important;
 font-size: 16px !important;
}
/* 選択中の日付 */
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
 border: solid 3px #3360A7 !important;
}
/* 土曜日 */
.saturday .ui-state-default {
 color: #284DC3 !important;
 background: #CAD4E9 !important;
}
/* 日曜日 */
.sunday .ui-state-default {
 color: #DD0000 !important;
 background: #EBD5D6 !important;
}
/* 各日付 hover */
.ui-state-default:hover {
 background: #fff1b6 !important;
 color: #513C19 !important;
}
span.ui-state-default:hover {
 background: #EAEAEA !important;
 color: #333333 !important;
}
.saturday span.ui-state-default:hover {
 color: #284DC3 !important;
 background: #CAD4E9 !important;
}
.sunday span.ui-state-default:hover {
 color: #DD0000 !important;
 background: #EBD5D6 !important;
}
/*-------------------閉じるボタン-----------------------*/
.ui-datepicker .ui-datepicker-buttonpane {
 border: dotted 1px #CCCCCC !important;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
 display: none;
}
.ui-datepicker .ui-datepicker-buttonpane button {
 font-size: 13px !important;
 font-weight: 300 !important;
}
/*-------------------- 
  width  - 960px
--------------------*/
@media screen and (max-width:960px) {
 /*-------------------大枠-----------------------*/
 .ui-datepicker {
  width: 84%;
  max-width: 460px;
  font-family: "Mplus 1p" !important;
  text-align: center;
  background: #FAFAFA;
  margin: 0 0 10px 0;
  border: solid 2px #CCCCCC;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
 }
 /* 年月表示タイトル部 */
 .ui-widget-header {
  background: #FAFAFA;
  border: none;
  padding: 3px 0 !important;
 }
 .ui-datepicker-title {
  letter-spacing: 0;
  color: #3D3D3D;
  font-weight: 600;
 }
 /* 前へ次へ */
 .ui-datepicker-prev-hover, .ui-datepicker-next-hover {
  background: none !important;
  border: none !important;
 }
 .ui-datepicker .ui-datepicker-next {
  top: 2px !important;
  right: 2px !important;
  cursor: pointer;
 }
 .ui-datepicker .ui-datepicker-prev {
  top: 2px !important;
  left: 2px !important;
  cursor: pointer;
 }
 .ui-datepicker .ui-datepicker-next span {
  background: url(../img/next.png) no-repeat left top !important;
 }
 .ui-datepicker .ui-datepicker-prev span {
  background: url(../img/prev.png) no-repeat left top !important;
 }
 /*-------------------日付-----------------------*/
 /* 曜日表示箇所 */
 .ui-datepicker-calendar thead th {
  font-size: 16px;
  padding: 3px 0;
 }
 .ui-datepicker-week-end span[title*="日"] {
  color: #DD0000 !important;
 }
 .ui-datepicker-week-end span[title*="土"] {
  color: #284DC3 !important;
 }
 /* 各日付 */
 a.ui-state-default, span.ui-state-default {
  font-weight: 400 !important;
  display: block;
  padding: 3px;
  text-align: center !important;
  font-size: 15px !important;
 }
 .ui-state-default {
  background: #EAEAEA !important;
  border: solid 1px #E7E7E7 !important;
  color: #333333 !important;
  font-size: 15px !important;
 }
 /* 選択中の日付 */
 .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  border: solid 3px #3360A7 !important;
 }
 /* 土曜日 */
 .saturday .ui-state-default {
  color: #284DC3 !important;
  background: #CAD4E9 !important;
 }
 /* 日曜日 */
 .sunday .ui-state-default {
  color: #DD0000 !important;
  background: #EBD5D6 !important;
 }
 /* 各日付 hover */
 .ui-state-default:hover {
  background: #fff1b6 !important;
  color: #513C19 !important;
 }
 span.ui-state-default:hover {
  background: #EAEAEA !important;
  color: #333333 !important;
 }
 .saturday span.ui-state-default:hover {
  color: #284DC3 !important;
  background: #CAD4E9 !important;
 }
 .sunday span.ui-state-default:hover {
  color: #DD0000 !important;
  background: #EBD5D6 !important;
 }
 /*-------------------閉じるボタン-----------------------*/
 .ui-datepicker .ui-datepicker-buttonpane {
  border: dotted 1px #CCCCCC !important;
 }
 .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  display: none;
 }
 .ui-datepicker .ui-datepicker-buttonpane button {
  font-size: 13px !important;
  font-weight: 300 !important;
 }
}
/*-------------------- 
  width  - 480px
--------------------*/
@media screen and (max-width:480px) {
 /*-------------------大枠-----------------------*/
 .ui-datepicker {
  width: 84%;
  max-width: auto;
  font-family: "Mplus 1p" !important;
  text-align: center;
  background: #FAFAFA;
  margin: 0 0 10px 0;
  border: solid 2px #CCCCCC;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
 }
 /* 年月表示タイトル部 */
 .ui-widget-header {
  background: #FAFAFA;
  border: none;
  padding: 2px 0 !important;
 }
 .ui-datepicker-title {
  letter-spacing: 0;
  color: #3D3D3D;
  font-weight: 600;
 }
 /* 前へ次へ */
 .ui-datepicker-prev-hover, .ui-datepicker-next-hover {
  background: none !important;
  border: none !important;
 }
 .ui-datepicker .ui-datepicker-next {
  top: 2px !important;
  right: 2px !important;
  cursor: pointer;
 }
 .ui-datepicker .ui-datepicker-prev {
  top: 2px !important;
  left: 2px !important;
  cursor: pointer;
 }
 .ui-datepicker .ui-datepicker-next span {
  background: url(../img/next.png) no-repeat left top !important;
 }
 .ui-datepicker .ui-datepicker-prev span {
  background: url(../img/prev.png) no-repeat left top !important;
 }
 /*-------------------日付-----------------------*/
 /* 曜日表示箇所 */
 .ui-datepicker-calendar thead th {
  font-size: 14px !important;
  padding: 2px 0;
 }
 .ui-datepicker-week-end span[title*="日"] {
  color: #DD0000 !important;
 }
 .ui-datepicker-week-end span[title*="土"] {
  color: #284DC3 !important;
 }
 /* 各日付 */
 a.ui-state-default, span.ui-state-default {
  font-weight: 400 !important;
  display: block;
  padding: 3px;
  text-align: center !important;
  font-size: 14px !important;
 }
 .ui-state-default {
  background: #EAEAEA !important;
  border: solid 1px #E7E7E7 !important;
  color: #333333 !important;
  font-size: 14px !important;
 }
 /* 選択中の日付 */
 .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  border: solid 3px #3360A7 !important;
 }
 /* 土曜日 */
 .saturday .ui-state-default {
  color: #284DC3 !important;
  background: #CAD4E9 !important;
 }
 /* 日曜日 */
 .sunday .ui-state-default {
  color: #DD0000 !important;
  background: #EBD5D6 !important;
 }
 /* 各日付 hover */
 .ui-state-default:hover {
  background: #fff1b6 !important;
  color: #513C19 !important;
 }
 span.ui-state-default:hover {
  background: #EAEAEA !important;
  color: #333333 !important;
 }
 .saturday span.ui-state-default:hover {
  color: #284DC3 !important;
  background: #CAD4E9 !important;
 }
 .sunday span.ui-state-default:hover {
  color: #DD0000 !important;
  background: #EBD5D6 !important;
 }
 /*-------------------閉じるボタン-----------------------*/
 .ui-datepicker .ui-datepicker-buttonpane {
  border: dotted 1px #CCCCCC !important;
 }
 .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  display: none;
 }
 .ui-datepicker .ui-datepicker-buttonpane button {
  font-size: 13px !important;
  font-weight: 300 !important;
 }
}