@charset "UTF-8";
/*
 * jQuery UI Datepicker — smoothness 再現版（画像不要）
 * ============================================================
 * 意図:
 *   jQuery UI 1.14.1 の smoothness テーマから datepicker に関わる定義だけを
 *   抜き出し、画像ファイルへの依存を取り除いたもの。
 *   Google CDN が 1.14.2 を配信しておらず404になる問題の代替として、
 *   従来の見た目を保ったまま自サイト内で完結させる。
 *
 * 本家と同一の部分:
 *   配色（#aaaaaa / #cccccc / #e6e6e6 / #dadada / #fbf9ee 等）、
 *   寸法（width 17em、padding、font-size .9em）、角丸4px、
 *   日付を右寄せにするレイアウト、Verdana ベースのフォント指定。
 *
 * 近似した部分（本家は画像を使っている箇所）:
 *   1. グラデーション
 *      本家は ui-bg_glass_*.png / ui-bg_highlight-soft_*.png を
 *      背景画像として敷いている。これを linear-gradient で置き換えた。
 *      ごく淡いグラデーションなので、並べて比べない限り差は分からない。
 *   2. 前月・次月の矢印
 *      本家は ui-icons_222222_256x240.png のスプライトから
 *      circle-triangle-w / -e を切り出している。
 *      これを「円＋三角」のCSS描画で代替した。
 *      形状がわずかに異なるのはこの部分のみ。
 *
 * 完全一致が必要な場合:
 *   https://jqueryui.com/download/ から 1.14.1 の smoothness を取得し、
 *   images/ フォルダごと配置して、そちらを読み込むこと。
 */

:root {
	/* 本家のベースカラー（画像の下地色＝そのまま同じ値） */
	--dp-content-bg:     #ffffff;
	--dp-content-border: #aaaaaa;
	--dp-content-text:   #222222;

	--dp-header-bg:      #cccccc;
	--dp-header-border:  #aaaaaa;
	--dp-header-text:    #222222;

	--dp-default-bg:     #e6e6e6;
	--dp-default-border: #d3d3d3;
	--dp-default-text:   #555555;

	--dp-hover-bg:       #dadada;
	--dp-hover-border:   #999999;
	--dp-hover-text:     #212121;

	--dp-active-bg:      #ffffff;
	--dp-active-border:  #aaaaaa;
	--dp-active-text:    #212121;

	--dp-highlight-bg:     #fbf9ee;
	--dp-highlight-border: #fcefa1;
	--dp-highlight-text:   #363636;

	/* 画像グラデーションの代替。上端を明るく、下端を下地色寄りにする */
	--dp-grad-header:    linear-gradient(to bottom, #e0e0e0 0%, #cccccc 100%);
	--dp-grad-default:   linear-gradient(to bottom, #f5f5f5 0%, #e6e6e6 50%, #dfdfdf 100%);
	--dp-grad-hover:     linear-gradient(to bottom, #ececec 0%, #dadada 50%, #d2d2d2 100%);
	--dp-grad-active:    linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #f4f4f4 100%);
	--dp-grad-highlight: linear-gradient(to bottom, #fefdf8 0%, #fbf9ee 50%, #f7f3e0 100%);

	--dp-icon:   #222222;  /* 矢印の色（本家 ui-icons_222222 と同値） */
	--dp-radius: 4px;      /* 本家 .ui-corner-all と同値 */
}

/* ------------------------------------------------------------
 * カレンダー本体（.ui-datepicker .ui-widget .ui-widget-content .ui-corner-all）
 * ------------------------------------------------------------ */

/* display:none は必須。jQuery UI は表示時に inline style で
   display:block を付けるため、これが無いと常時表示されてしまう。
   位置と z-index も inline style で指定されるのでここでは書かない。 */
.ui-datepicker {
	display: none;
	width: 17em;
	padding: .2em .2em 0;
	background: var(--dp-content-bg);
	border: 1px solid var(--dp-content-border);
	border-radius: var(--dp-radius);
	color: var(--dp-content-text);
	font-family: Verdana, Arial, sans-serif;
	font-size: 1.1em;
}

/* 固定ヘッダー等の背後に隠れる場合の保険。
   問題が出ていなければこのブロックは削除してよい。 */
#ui-datepicker-div {
	z-index: 10000 !important;
}

/* .ui-helper-clearfix の代替。本家は jQuery UI core CSS 側で定義している */
.ui-datepicker::after,
.ui-datepicker .ui-datepicker-header::after,
.ui-datepicker .ui-datepicker-buttonpane::after {
	content: "";
	display: block;
	clear: both;
}

/* ------------------------------------------------------------
 * ヘッダー（.ui-datepicker-header .ui-widget-header .ui-corner-all）
 * ------------------------------------------------------------ */

.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
	background: var(--dp-header-bg) var(--dp-grad-header);
	border: 1px solid var(--dp-header-border);
	border-radius: var(--dp-radius);
	color: var(--dp-header-text);
	font-weight: bold;
}

.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;          /* 左右の矢印ボタンの幅を避ける */
	line-height: 1.8em;
	text-align: center;
}

/* changeMonth / changeYear を有効にした場合のセレクトボックス */
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 45%;
}

.ui-datepicker select.ui-datepicker-month-year {
	width: 100%;
}

/* ------------------------------------------------------------
 * 前月・次月ボタン
 * ------------------------------------------------------------ */

/* 本家では通常時は枠なし、ホバー時に ui-state-hover が付いて
   ボタンの枠が現れる。その挙動を踏襲する。 */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
	border-radius: var(--dp-radius);
	cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev { left: 2px; }
.ui-datepicker .ui-datepicker-next { right: 2px; }

/* ホバー時に 1px の枠が増えるぶん、位置を1px戻して見た目のズレを防ぐ。
   本家の .ui-datepicker-prev-hover / -next-hover と同じ処置。 */
.ui-datepicker .ui-datepicker-prev-hover { left: 1px; }
.ui-datepicker .ui-datepicker-next-hover { right: 1px; }

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	background: var(--dp-hover-bg) var(--dp-grad-hover);
	border: 1px solid var(--dp-hover-border);
}

/* 矢印アイコン本体。
   <span class="ui-icon"> は「前」「次」というテキストを持つため、
   text-indent で画面外へ送り、円と三角をCSSで描く。 */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	box-sizing: border-box;
	border: 1px solid var(--dp-icon);
	border-radius: 50%;
	overflow: hidden;
	text-indent: -9999px;
}

.ui-datepicker .ui-datepicker-prev span::after,
.ui-datepicker .ui-datepicker-next span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border: 3px solid transparent;
	text-indent: 0;
}

.ui-datepicker .ui-datepicker-prev span::after {
	margin: -3px 0 0 -5px;
	border-right-color: var(--dp-icon);
}

.ui-datepicker .ui-datepicker-next span::after {
	margin: -3px 0 0 -2px;
	border-left-color: var(--dp-icon);
}

/* ------------------------------------------------------------
 * 日付テーブル
 * ------------------------------------------------------------ */

.ui-datepicker table {
	width: 100%;
	margin: 0 0 .4em;
	border-collapse: collapse;
	font-size: .9em;
}

/* テーマ側の table スタイル（枠線・ストライプ等）を打ち消す */
.ui-datepicker th {
	padding: .7em .3em;
	border: 0;
	background: none;
	text-align: center;
	font-weight: bold;
}

.ui-datepicker td {
	padding: 1px;
	border: 0;
	background: none;
}

/* 日付は右寄せ。これが smoothness の特徴的なレイアウト */
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}

/* 通常の日付（すべての日付セルに ui-state-default が付く） */
.ui-datepicker td span,
.ui-datepicker td a {
	background: var(--dp-default-bg) var(--dp-grad-default);
	border: 1px solid var(--dp-default-border);
	color: var(--dp-default-text);
	font-weight: normal;
}

/* ホバー */
.ui-datepicker td a:hover,
.ui-datepicker td a.ui-state-hover {
	background: var(--dp-hover-bg) var(--dp-grad-hover);
	border: 1px solid var(--dp-hover-border);
	color: var(--dp-hover-text);
}

/* 今日（ui-state-highlight） */
.ui-datepicker td a.ui-state-highlight,
.ui-datepicker td span.ui-state-highlight {
	background: var(--dp-highlight-bg) var(--dp-grad-highlight);
	border: 1px solid var(--dp-highlight-border);
	color: var(--dp-highlight-text);
}

/* 選択中の日（ui-state-active）。今日より優先させたいので後ろに置く */
.ui-datepicker td a.ui-state-active,
.ui-datepicker td span.ui-state-active {
	background: var(--dp-active-bg) var(--dp-grad-active);
	border: 1px solid var(--dp-active-border);
	color: var(--dp-active-text);
}

/* 選択不可（前後月・minDate/maxDate の範囲外）。
   本家と同じく不透明度を落とし、グラデーションを外す。 */
.ui-datepicker .ui-state-disabled {
	opacity: .35;
	background-image: none;
	cursor: default;
}

.ui-datepicker .ui-state-disabled:hover {
	border-color: var(--dp-default-border);
	background: var(--dp-default-bg);
	color: var(--dp-default-text);
}

/* ------------------------------------------------------------
 * 下部ボタンパネル（showButtonPanel 使用時のみ表示）
 * ------------------------------------------------------------ */

.ui-datepicker .ui-datepicker-buttonpane {
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-top: 1px solid var(--dp-content-border);
	background-image: none;
}

.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	width: auto;
	margin: .5em .2em .4em;
	padding: .2em .6em .3em;
	overflow: visible;
	background: var(--dp-default-bg) var(--dp-grad-default);
	border: 1px solid var(--dp-default-border);
	border-radius: var(--dp-radius);
	color: var(--dp-default-text);
	cursor: pointer;
	font-family: inherit;
	font-size: .9em;
}

.ui-datepicker .ui-datepicker-buttonpane button:hover {
	background: var(--dp-hover-bg) var(--dp-grad-hover);
	border-color: var(--dp-hover-border);
	color: var(--dp-hover-text);
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}

/* ------------------------------------------------------------
 * 任意: 日曜・土曜の色分け
 * ------------------------------------------------------------
 * 本家 smoothness には曜日の色分けが無い。元の見た目を保つなら
 * このブロックは有効にしないこと。日本語サイトで色を付けたい場合のみ
 * コメントを外す。
 *
 * 注意: jQuery UI は日曜と土曜の両方に同じ ui-datepicker-week-end を
 * 付けるため、区別は列の位置で行う。WordPress の「週の始まり」設定が
 * 月曜だと左端が月曜になるので、その場合は nth-child で調整すること。

.ui-datepicker th:first-child { color: #c00; }
.ui-datepicker th:last-child  { color: #06c; }
.ui-datepicker td:first-child a,
.ui-datepicker td:first-child span { color: #c00; }
.ui-datepicker td:last-child a,
.ui-datepicker td:last-child span  { color: #06c; }

 */