.pika-lendar th:first-child,
.pika-lendar td:first-child .pika-button {
	color: #f00;
}
.pika-lendar th:last-child,
.pika-lendar td:last-child .pika-button {
	color: #00f;
}
.has-event .pika-button {
	color: #f00;
	font-weight: normal;
	background: #f5f5f5;
	box-shadow:none;
}
.is-selected .pika-button {
	color: #fff;
	font-weight: bold;
	background: #33aaff;
	box-shadow: inset 0 1px 3px #178fe5;
	border-radius: 3px;
}
.pika-button:hover,
.pika-row.pick-whole-week:hover .pika-button {
	color: #fff;
	background: #ff8000;
	box-shadow: none;
	border-radius: 3px;
}
.is-disabled .pika-button{
	background: #D5E9F7 !important;
}

/* #rsv_i(ホームページ本体の大きい検索パネル)と#f_rsv(ヘッダー常設のコンパクトな
   検索バー)は同じOPTIMAウィジェット(include/reserve.php)を使い回すため、
   フォーム部品の基本スタイルは:is()でまとめて当てている。
   レイアウトの違い(カード状/1行バー)はそれぞれ別ブロックで上書きする。 */
:is(#rsv_i, #f_rsv) #ZenSearchFrom { display: flex; align-items: stretch; box-sizing: border-box; border: 6px double #00736e; }
:is(#rsv_i, #f_rsv) h3 { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
:is(#rsv_i, #f_rsv) #searchBox { display: flex; flex-wrap: wrap; align-items: flex-end; }
:is(#rsv_i, #f_rsv) #searchBox fieldset { position: relative; border: 0; margin: 0 20px 10px 0; padding: 0; }
:is(#rsv_i, #f_rsv) #searchBox legend { padding: 0; font-size: 13px; }
/* ウィジェットが自動挿入する子供人数欄。文言が長くレイアウトが崩れるため非表示にする */
:is(#rsv_i, #f_rsv) #searchBox fieldset.children { display: none !important; }
:is(#rsv_i, #f_rsv) #searchBox input[type="text"],
:is(#rsv_i, #f_rsv) #searchBox select {
	height: 40px;
	background-color: #eeeeee;
	border: 0;
	font-size: 1.0rem;
	padding-left: 1rem;
}
:is(#rsv_i, #f_rsv) .field-button { margin: 0 0 10px; }

/* チェックイン日入力欄のカレンダーアイコン */
:is(#rsv_i, #f_rsv) #searchBox .checkin_field { position: relative; display: inline-block; }
:is(#rsv_i, #f_rsv) #searchBox .checkin_field input[type="text"] { padding-right: 32px; }
:is(#rsv_i, #f_rsv) #searchBox .checkin_field::after {
	content: "\f133";
	font-family: FontAwesome;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #666;
	font-size: 14px;
	pointer-events: none;
}

/* 泊数・室数・大人・並び順など、vendorが生成するselectの下向き矢印 */
:is(#rsv_i, #f_rsv) #searchBox select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 26px;
}
:is(#rsv_i, #f_rsv) #searchBox fieldset:not(.checkin)::after {
	content: "\f107";
	font-family: FontAwesome;
	position: absolute;
	right: 8px;
	bottom: 0;
	height: 40px;
	line-height: 40px;
	color: #666;
	font-size: 14px;
	pointer-events: none;
}

/* 「日付指定なし」チェックボックス。静的に1つ用意しておき、vendorスクリプトが
   同じ#no_checkinへ重ねて自動挿入する分(2つ目以降のlabel)は表示だけ消す。
   #no_date_checkinのidはこちらが先にDOMへ存在するため、getElementByIdは
   常にこの静的な要素を返す(=vendor側の検証・値取得もこちらを見る)。 */
:is(#rsv_i, #f_rsv) #searchBox .checkin #no_checkin { margin-left: 10px; font-size: 13px; }
:is(#rsv_i, #f_rsv) #searchBox .checkin #no_checkin label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
:is(#rsv_i, #f_rsv) #searchBox .checkin #no_checkin label:not(:first-of-type) { display: none; }
/* サイト共通リセットでinput類がappearance:noneにされている場合でも
   チェックボックスの見た目(四角+チェック)を必ず表示させる */
:is(#rsv_i, #f_rsv) #searchBox .checkin #no_checkin input[type="checkbox"] {
	-webkit-appearance: checkbox;
	-moz-appearance: checkbox;
	appearance: checkbox;
	width: 16px;
	height: 16px;
	min-width: 16px;
	margin: 0;
	opacity: 1;
	position: static;
}

/* ヘッダー常設バー(#f_rsv)専用のコンパクトレイアウト。PCのみ表示(for_pc)。
   #fnavは高さ100pxで固定表示されるため1行に収めるようにし、ホームページ本体
   (#rsv_i)にある会員メニューやプラン導線などはここでは表示しない。 */
#f_rsv .mainw { height: 100%; }
#f_rsv #ZenSearchFrom {
	height: 100%;
	align-items: center;
	border: 0;
	padding: 0 20px;
}
#f_rsv h3 {
	font-size: 14px;
	font-weight: normal;
	margin-right: 15px;
	white-space: nowrap;
}
#f_rsv .rsvInner { display: flex; align-items: center; }
#f_rsv #searchBox { flex-wrap: nowrap; align-items: center; }
#f_rsv #searchBox fieldset { margin: 0 10px 0 0; }
#f_rsv #searchBox .checkin_field input[type="text"] { width: 120px; }
#f_rsv #searchBox .checkin #no_checkin { display: none; }
/* ヘッダー常設バーでは室数のみ表示し、大人・子供などの人数欄は非表示にしてコンパクトさを保つ */
#f_rsv #searchBox fieldset:not(.checkin):not(.nights):not(.rooms) { display: none; }
#f_rsv .field-button { margin: 0; }
#f_rsv .field-button .cbtn {
	display: inline-block;
	width: auto;
	height: 40px;
	line-height: 40px;
	padding: 0 34px 0 16px;
}
#f_rsv .member_o,
#f_rsv .rsvTypeLink {
	display: none;
}
/* reserve.php側で.telに固定されているfor_sp(SP限定)指定を、#f_rsv内では上書きして表示する */
#f_rsv .tel.for_sp {
	display: flex !important;
	align-items: center;
	margin-left: 20px;
	white-space: nowrap;
}
#f_rsv .tel a { color: #666; font-weight: normal; }
/* ヘッダー常設バーではお知らせ文は不要(ホームページ本体の#rsv_iのみ表示) */
#f_rsv .rsv_notice { display: none; }

@media (max-width: 750px) {

	/* カード自体の見た目(幅・余白・枠線)は、本番トップページの#rsv_i formに
	   合わせている(css/index.css参照)。新ウィジェットはformにid="ZenSearchFrom"が
	   付いているためタグ名セレクタでは効かず、ここで同じ値を明示的に当てている。 */
	#rsv_i #ZenSearchFrom {
		display: block;
		width: 77vw;
		margin: 0 auto;
		box-sizing: border-box;
		background-color: #fff;
		border: rgba(0, 0, 0, 0.2) 2vw solid;
		padding: 6vw;
	}
	#rsv_i h3 {
		display: block;
		text-align: center;
		font-size: 6vw;
		padding: 0 0 4vw;
	}
	#rsv_i .rsvInner {
		display: flex;
		flex-direction: column;
	}
	/* 表示順は本番トップ(#rsv_i .rsv_ul→.rsvTypeLink→.member相当)に合わせ、
	   検索→プラン/お部屋タイプ→各種リンクの順にflexboxのorderで並べ替える。
	   .rsvTypeLinkのorder:5はcss/index.css側の共通ルールが既に付与している。 */
	#rsv_i #searchBox { order: 1; display: block; }
	/* 泊数はSPでは非表示のまま。チェックイン日は必須項目でバリデーションに
	   引っかかるため、検索ボタンの上に表示して入力できるようにする。 */
	#rsv_i #searchBox fieldset.nights { display: none; }
	#rsv_i #searchBox fieldset.checkin {
		display: block;
		width: 100%;
		margin: 0 0 4vw;
	}
	#rsv_i #searchBox legend {
		font-size: 3.4vw;
		margin-bottom: 1.5vw;
	}
	#rsv_i #searchBox .checkin_field {
		display: block;
		width: 100%;
	}
	#rsv_i #searchBox input[type="text"] {
		width: 100%;
		box-sizing: border-box;
		height: 12vw;
		line-height: 12vw;
		font-size: 4vw;
		padding-left: 4vw;
	}
	#rsv_i #searchBox .checkin_field input[type="text"] { padding-right: 10vw; }
	#rsv_i #searchBox .checkin_field::after {
		right: 4vw;
		font-size: 4vw;
	}
	#rsv_i #searchBox .checkin #no_checkin {
		display: block;
		margin: 2vw 0 0;
		font-size: 3.4vw;
	}
	/* 室数・大人・並び順など、vendorスクリプトが動的に追加するselect群。
	   チェックイン欄と同じ高さ・余白に揃え、下向き矢印もボックス内に収まるよう調整。 */
	#rsv_i #searchBox fieldset:not(.checkin):not(.nights) {
		display: block;
		width: 100%;
		margin: 0 0 4vw;
	}
	#rsv_i #searchBox select {
		width: 100%;
		box-sizing: border-box;
		height: 12vw;
		line-height: 12vw;
		font-size: 4vw;
		padding-left: 4vw;
		padding-right: 10vw;
	}
	#rsv_i #searchBox fieldset:not(.checkin)::after {
		right: 4vw;
		height: 12vw;
		line-height: 12vw;
		font-size: 4vw;
	}
	#rsv_i #searchBox p.field-button { display: block; }
	#rsv_i .field-button { width: 100%; margin: 0 0 4vw; text-align: center; }
	#rsv_i .field-button .cbtn { display: inline-block; width: 61vw; box-sizing: border-box; margin-bottom: 0; }
	#rsv_i .member_o { display: block; width: auto; margin: 0 0 4vw; order: 10; }
	#rsv_i .member_o li { margin: 0 0 2.6vw; }
	#rsv_i .member_o li:last-child { margin-bottom: 0; }
	#rsv_i .member_o a { display: block; position: relative; font-size: 4vw; line-height: 4.8vw; padding-left: 3.1vw; }
	#rsv_i .member_o a::before {
		content: "\f105";
		font-family: FontAwesome;
		color: #a2a2a2;
		font-size: 3vw;
		position: absolute;
		left: 0;
	}
	#rsv_i .rsvTypeLink { display: block; margin: 0 0 5vw; }
	#rsv_i .rsvTypeLink li { width: 100%; margin-bottom: 4vw; }
	#rsv_i .rsvTypeLink li:last-child { margin-bottom: 0; }
	#rsv_i .rsvTypeLink li a { display: block; width: 100%; border-color: #00736e; color: #00736e; }
	#rsv_i .tel { width: 100%; text-align: center; margin-top: 4vw; }
	#rsv_i .tel a { display: inline-flex; align-items: center; justify-content: center; font-size: 5vw; font-weight: bold; color: #00736e; }
}

.rsv_notice {
    text-align: center;
    margin: 1.0rem auto;
    text-decoration: underline;
    background-color: #00736e;
    color: #fff;
    font-weight: bold;
    font-size: 1.3rem;
    padding: 0.8rem 0;
}