/*
 * 予約フォームのカレンダー(jQuery UI Datepicker)の表示補正
 *
 * jQuery UI 本来のCSSが読み込まれない/一部しか当たらない場合に、
 * 背景が透けたり、「Prev」「Next」の文字が出たりするのを防ぐ。
 * jQuery UI のCSSが正常に読み込まれている場合も、見た目が大きく変わらないようにしてある。
 */
#ui-datepicker-div,
.ui-datepicker {
	display: none;
	box-sizing: border-box;
	width: 17em;
	max-width: 100%;
	padding: 8px;
	background: #fff !important;
	border: 1px solid #aaa;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
	color: #333;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	z-index: 10000 !important;
}

/* 見出し(年月・前後ボタン) */
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: 4px 0;
	background: #eef3e8;
	border: 1px solid #d5dfc9;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 30px;
	line-height: 1.9;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
	display: inline-block;
	width: auto !important;
	max-width: 45%;
	margin: 2px;
	padding: 2px;
	font-size: 13px;
	background: #fff;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 4px;
	width: 26px;
	height: 26px;
	cursor: pointer;
	overflow: hidden;
}
.ui-datepicker .ui-datepicker-prev { left: 4px; }
.ui-datepicker .ui-datepicker-next { right: 4px; }
/* 「Prev」「Next」の文字は隠して、矢印を表示する */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	overflow: hidden;
	background: none !important;
}
.ui-datepicker .ui-datepicker-prev:before,
.ui-datepicker .ui-datepicker-next:before {
	position: absolute;
	top: 0;
	width: 100%;
	line-height: 26px;
	text-align: center;
	font-size: 12px;
	color: #3a6b1c;
}
.ui-datepicker .ui-datepicker-prev:before { content: "\25C0"; }
.ui-datepicker .ui-datepicker-next:before { content: "\25B6"; }
.ui-datepicker .ui-datepicker-prev.ui-state-disabled,
.ui-datepicker .ui-datepicker-next.ui-state-disabled { opacity: .35; cursor: default; }

/* 日付の表 */
.ui-datepicker table {
	width: 100%;
	margin: 6px 0 0;
	border-collapse: collapse;
	font-size: 13px;
}
.ui-datepicker th,
.ui-datepicker td {
	padding: 1px;
	border: 0;
	background: none;
	text-align: center;
}
.ui-datepicker th { padding: 4px 0; font-weight: bold; }
.ui-datepicker td a,
.ui-datepicker td span {
	display: block;
	padding: 5px 0;
	text-align: center;
	text-decoration: none;
}
.ui-datepicker td a { background: #f6f6f6; color: #333; border: 1px solid #e0e0e0; }
.ui-datepicker td a:hover { background: #5e9d37; border-color: #5e9d37; color: #fff; }
.ui-datepicker td .ui-state-highlight { background: #fff3c4; border-color: #e6c84e; }
.ui-datepicker td .ui-state-active { background: #5e9d37; border-color: #5e9d37; color: #fff; }
.ui-datepicker td.ui-datepicker-unselectable span { color: #aaa; background: none; border: 0; }
.ui-datepicker td.ui-datepicker-other-month a,
.ui-datepicker td.ui-datepicker-other-month span { color: #aaa; }

/* 閉じるボタン等がある場合 */
.ui-datepicker .ui-datepicker-buttonpane { margin-top: 6px; }

/* スクリーンリーダー用の非表示テキスト(画面に出さない) */
.ui-helper-hidden-accessible {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}
