@charset "utf-8";
/* 予約モジュール */
@media screen and (max-width: 767px) {
	#js-page-header {
		margin-bottom: 0;
	}
	body:not(.home, .single) #reserve {
		margin-bottom: 33px;
	}
}
input[type="button"] {
	cursor: pointer;
}
#reserve {
	position: relative;
	background: #f7f4ef;
	width: 100%;
	margin: 0;
	padding: 20px 0;
}
#reserve .inner {
	width: 340px;
	margin: 0 auto;
	padding: 15px 25px;
}
#reserve .inner p {
	line-height: 1.8;
}
h2.reserve {
	padding: 10px;
	font-size: 20px;
	font-weight: 500;
	text-align: center;
}
h4.style_subhead{
	display: none !important;
}
.ruby {
	margin: 0;
	padding-left: 3px;
	font-size: 14px;
}
.ruby span {
	display: none;
}
span.bookingDate {
	position: relative;
	height: 42px;
	padding: 0;	/* フォーム内ボタン以外の項目 */
}
span.dynDate {
	display: inline-block;
	margin-top: -20px;
}
span.dynDate:first-letter {
	font-size: 0;
}
#dynSearchreserve_jn input[type="text"],
#dynSearchreserve_jn select,
#dynSearchreserve_en input[type="text"],
#dynSearchreserve_en select {
	padding: 5px 12px 3px;
	border: solid 1px #ddd;
	border-radius: 0;
	font-size: 14px;
}
input.cmbARRY.style_inputArea {
	display: none;
	width: 36%;
	height: 28px;
}
input.cmbARRM.style_inputArea,
input.cmbARRD.style_inputArea {
	width: 65px;
	height: 31px;
}
input.cmbARRM.style_inputArea {
	margin-right: 6px;
}
input.cmbARRD.style_inputArea {
	margin-left: 5px;
}
#reserve table {
	margin: 0;
}
span.bookingNights {	/* 宿泊数 */
	display: inline-block;
	position: absolute;
	top: -5px;
	left: 170px;
	width: 140px;
	height: 32px;
}
select.cmbNights.style_inputArea {	/* 宿泊数 input */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #fff;
	width: 60px;
	height: 32px;
}
select.cmbRooms.style_inputArea {	/* 部屋数のセレクトボックス */
	display: none;
}
#dynSearchreserve_jn label.undecided,
#dynSearchreserve_en label.undecided {	/* 日程未定ラジオボタン */
	position: absolute;
	top: 33px;
	left: 50%;
}
span.dynSubmit.style_block_area {	/* ボタンエリア */
	width: 100%;
	margin-top: 8px;
	padding: 0;
}
input.buttonSubmit.style_inputButton {	/* 秋室確認ボタン */
	display: inline-block;
	background: #043552;
	width: 100%;
	height: 32px;
	margin-bottom: 6px;
	padding-top: 1px;
	border: none;
	border-radius: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #fff;
	line-height: 32px;
	vertical-align: bottom;
	-webkit-transition: .3s;
	transition: .3s;
}
input.buttonSubmit.style_inputButton:hover {
	background: #fff;
	border: solid 1px #043552;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #043552;
}
input.buttonCancel.style_inputButton {	/* デフォルトの確認・キャンセルボタン */
	display: none;
}
#reserve .link {
	margin-top: 95px;
}
#reserve .link p {	/* 予約モジュールテキストリンク */
	margin: 0;
	text-align: center;
	font-size: 14px;
}
#reserve .link p::before {
	position: relative;
	content: "≫";
}
#reserve .link p a {
	color: #043552;
	text-decoration: underline;
}
#reserve .link p a:hover {
	color: #777;
}
@media screen and (min-width: 768px) {
	#reserve {
		position: fixed;
		bottom: 60px;
		right: 20px;
		background: rgba(255, 255, 255, .8);
		width: 300px;
		padding: 10px 0;
		margin: 0;
		z-index: 100;
		box-shadow: 0 0 2px rgba(0, 53, 83, .3);
	}
	#reserve .inner {
		width: 300px;
	}
	h2.reserve {
		padding: 10px 10px 5px;
		font-size: 18px;
	}
	.ruby {
		padding-top: 10px;
	}
	span.bookingNights {
		top: 9px;
	}
	.ruby span {
		display: inline;
	}
	span.bookingDate {
		height: 70px;
	}
	span.dynDate {	/* 年・月・日枠 */
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		margin-top: 0;
		align-items: baseline;
	}
	span.dynDate:first-letter {	
		font-size: unset;
	}
	span.dynDate br {
		display: none;
	}
	input.cmbARRY.style_inputArea {
		display: inline;
		width: 36%;
		height: 28px;
	}
	input.cmbARRM.style_inputArea,
	input.cmbARRD.style_inputArea {
		width: 24%;
		margin: 2px 0;
	}
	span.bookingNights {	/* 宿泊数 */
		position: static;
	}
	#dynSearchreserve_jn label.undecided,
	#dynSearchreserve_en label.undecided {	/* 日程未定ラジオボタン */
		position: absolute;
		top: 38px;
		left: 50%;
	}
}
@media screen and (min-width: 1200px) {
	#reserve {
		right: 30px;
	}
}