/* ========================================
BOOKING 489BAN
======================================== */

.booking-489ban{
	position:fixed;
	z-index:900;
	right:0;
	bottom:0;
	left:0;
	width:100%;
	background:#111;
	color:#fff;
	border-top:1px solid #444;
}

.booking-489ban,
.booking-489ban *{
	box-sizing:border-box;
}

.booking-489ban-inner{
	display:flex;
	align-items:stretch;
	width:100%;
	max-width:1600px;
	min-height:56px;
	margin:0 auto;
}


/* ========================================
BOOKING TITLE
======================================== */

.booking-489ban-title{
	display:flex;
	flex:0 0 150px;
	align-items:center;
	justify-content:center;
	padding:0 25px;
	border-right:1px solid #444;
}

.booking-489ban-title strong{
	font-size:18px;
	font-weight:400;
	line-height:1.4;
	white-space:nowrap;
}


/* ========================================
BOOKING FORM
======================================== */

.booking-489ban-form{
	flex:1;
	min-width:0;
}

.booking-489ban #search_489ban{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

.booking-489ban #search_489ban form{
	display:flex;
	align-items:center;
	width:100%;
	height:100%;
	min-height:56px;
	margin:0;
	padding:7px 14px 7px 24px;
}


/* ========================================
489BAN RESET
======================================== */

.booking-489ban #search_489ban dl,
.booking-489ban #search_489ban dt,
.booking-489ban #search_489ban dd,
.booking-489ban #search_489ban p{
	margin:0;
	padding:0;
}

.booking-489ban #search_489ban dl{
	display:flex;
	align-items:center;
}

.booking-489ban #search_489ban dt{
	width:auto;
	margin-right:10px;
	color:#fff;
	font-size:14px;
	font-weight:400;
	line-height:1.4;
	white-space:nowrap;
}

.booking-489ban #search_489ban dd{
	display:flex;
	align-items:center;
	width:auto;
}

.booking-489ban #search_489ban label{
	color:#fff;
	white-space:nowrap;
}


/* ========================================
DATE
======================================== */

.booking-489ban #search_489ban .date_489ban{
	flex:1 1 auto;
	min-width:365px;
	margin-right:28px;
}

.booking-489ban #search_489ban .date_489ban dd{
	gap:8px;
}

.booking-489ban #search_489ban .date_489ban dd label{
	display:flex;
	align-items:center;
	margin-left:6px;
	font-size:14px;
}


/* ========================================
STAY / ROOM
======================================== */

.booking-489ban #search_489ban .inbox_489ban{
	display:flex;
	flex:0 0 auto;
	align-items:center;
	margin-right:22px;
}

.booking-489ban #search_489ban .stay_489ban,
.booking-489ban #search_489ban .room_489ban{
	flex:0 0 auto;
}


/* ========================================
PERSON
======================================== */

.booking-489ban #search_489ban .person_489ban{
	flex:0 0 auto;
	margin-right:22px;
}

.booking-489ban #search_489ban .person_489ban:last-of-type{
	margin-right:0;
}


/* ========================================
FORM PARTS
======================================== */

.booking-489ban #search_489ban select,
.booking-489ban #search_489ban input{
	height:32px;
	margin:0;
	padding:0 8px;
	border:1px solid #666;
	border-radius:0;
	background:#222;
	color:#fff;
	font-family:inherit;
	font-size:14px;
	line-height:32px;
	box-shadow:none;
}

.booking-489ban #search_489ban select{
	min-width:62px;
}

.booking-489ban #search_489ban input[type="checkbox"]{
	width:15px;
	height:15px;
	min-width:15px;
	margin:0 7px 0 0;
	padding:0;
	background:#fff;
	accent-color:#222;
}

.booking-489ban #search_489ban .guests_input.child_count{
	width:45px;
	min-width:45px;
	text-align:center;
}


/* ========================================
CUSTOM DATE FIELD
======================================== */

.booking-489ban .booking-date-field{
	position:relative;
	display:flex;
	align-items:center;
	width:210px;
	height:36px;
	padding:0 42px 0 14px;
	border:1px solid #777;
	background:#222;
	color:#fff;
	font-size:15px;
	line-height:34px;
	cursor:pointer;
	user-select:none;
}

.booking-489ban .booking-date-field::before,
.booking-489ban .booking-date-field::after{
	content:"";
	position:absolute;
	right:15px;
	width:8px;
	height:1px;
	background:#ddd;
	transition:transform .25s ease;
}

.booking-489ban .booking-date-field::before{
	transform:translateX(-3px) rotate(45deg);
}

.booking-489ban .booking-date-field::after{
	transform:translateX(3px) rotate(-45deg);
}

.booking-489ban .booking-date-field.is-open::before{
	transform:translateX(-3px) rotate(-45deg);
}

.booking-489ban .booking-date-field.is-open::after{
	transform:translateX(3px) rotate(45deg);
}

.booking-489ban .booking-date-value{
	display:block;
	white-space:nowrap;
}


/* ========================================
ORIGINAL DATE SELECT
======================================== */

.booking-489ban #search_489ban .date_489ban select[name="date_ym"],
.booking-489ban #search_489ban .date_489ban select[name="date_d"]{
	position:absolute !important;
	width:1px !important;
	height:1px !important;
	margin:-1px !important;
	padding:0 !important;
	overflow:hidden !important;
	clip:rect(0 0 0 0) !important;
	clip-path:inset(50%) !important;
	white-space:nowrap !important;
	border:0 !important;
}


/* ========================================
CALENDAR
======================================== */

.booking-489ban-calendar{
	position:fixed;
	z-index:1200;
	display:none;
	width:440px;
	padding:24px 26px 26px;
	border:1px solid #c9c5ba;
	background:#f5f3ee;
	color:#222;
	box-shadow:0 10px 35px rgba(0,0,0,.15);
}

.booking-489ban-calendar.is-open{
	display:block;
}

.booking-calendar-head{
	display:grid;
	grid-template-columns:40px 1fr 40px;
	align-items:center;
	margin-bottom:22px;
}

.booking-calendar-title{
	margin:0;
	font-size:23px;
	font-weight:400;
	line-height:1.4;
	text-align:center;
}

.booking-calendar-prev,
.booking-calendar-next{
	display:flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	margin:0;
	padding:0;
	border:0;
	background:transparent;
	color:#222;
	font-family:inherit;
	font-size:24px;
	line-height:1;
	cursor:pointer;
}

.booking-calendar-prev:disabled,
.booking-calendar-next:disabled{
	color:#ccc;
	cursor:default;
}

.booking-calendar-weekdays,
.booking-calendar-days{
	display:grid;
	grid-template-columns:repeat(7,1fr);
}

.booking-calendar-weekdays{
	margin-bottom:8px;
}

.booking-calendar-weekdays span{
	display:flex;
	align-items:center;
	justify-content:center;
	height:38px;
	font-size:13px;
	font-weight:400;
}

.booking-calendar-day{
	display:flex;
	align-items:center;
	justify-content:center;
	aspect-ratio:1 / 1;
	margin:0;
	padding:0;
	border:1px solid transparent;
	background:transparent;
	color:#222;
	font-family:inherit;
	font-size:15px;
	line-height:1;
	cursor:pointer;
}

.booking-calendar-day:hover{
	border-color:#999;
}

.booking-calendar-day.is-empty{
	pointer-events:none;
}

.booking-calendar-day.is-disabled{
	color:#c7c7c7;
	pointer-events:none;
}

.booking-calendar-day.is-today{
	border-color:#999;
}

.booking-calendar-day.is-selected{
	border-color:#222;
	background:#222;
	color:#fff;
}


/* ========================================
SEARCH BUTTON
======================================== */

.booking-489ban #search_489ban button[name="searchButton489ban"]{
	flex:0 0 150px;
	height:36px;
	margin:0 0 0 auto;
	padding:0 20px;
	border:1px solid #aaa;
	border-radius:0;
	background:#111;
	color:#fff;
	font-family:inherit;
	font-size:15px;
	line-height:34px;
	text-align:center;
	cursor:pointer;
	transition:
		background .3s ease,
		color .3s ease;
}

@media(hover:hover) and (pointer:fine){

	.booking-489ban #search_489ban button[name="searchButton489ban"]:hover{
		background:#fff;
		color:#111;
	}

}


/* ========================================
CHILD INPUT
======================================== */

.booking-489ban #search_489ban .child_input{
	position:absolute;
	right:20px;
	bottom:62px;
	z-index:10;
	width:300px;
	padding:20px;
	border:1px solid #c9c5ba;
	background:#fff;
	color:#222;
	box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.booking-489ban #search_489ban .child_input *{
	color:#222;
}


/* ========================================
TABLET / MOBILE
通常セクションへ変更
======================================== */

@media(max-width:1100px){

	.booking-489ban{
		position:relative;
		z-index:1;
		right:auto;
		bottom:auto;
		left:auto;
		width:100%;
		padding:55px 0;
		border-top:0;
		background:#111;
		overflow:visible;
	}

	.booking-489ban-inner{
		display:block;
		width:calc(100% - 80px);
		max-width:900px;
		min-height:0;
		margin:0 auto;
	}

	.booking-489ban-title{
		display:block;
		width:100%;
		margin:0 0 38px;
		padding:0;
		border-right:0;
		text-align:center;
	}

	.booking-489ban-title strong{
		font-size:24px;
		line-height:1.5;
	}

	.booking-489ban-form{
		width:100%;
	}

	.booking-489ban #search_489ban form{
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:26px 36px;
		width:100%;
		min-height:0;
		padding:0;
	}

	.booking-489ban #search_489ban dl{
		display:block;
		width:100%;
	}

	.booking-489ban #search_489ban dt{
		display:block;
		width:100%;
		margin:0 0 9px;
		font-size:14px;
		line-height:1.5;
	}

	.booking-489ban #search_489ban dd{
		display:flex;
		width:100%;
	}

	.booking-489ban #search_489ban .date_489ban{
		grid-column:1 / -1;
		width:100%;
		min-width:0;
		margin:0;
	}

	.booking-489ban #search_489ban .date_489ban dd{
		display:flex;
		align-items:center;
		width:100%;
		gap:15px;
	}

	.booking-489ban .booking-date-field{
		flex:1;
		width:auto;
		height:48px;
		padding-right:45px;
		padding-left:16px;
		font-size:15px;
		line-height:46px;
	}

	.booking-489ban #search_489ban .date_489ban dd label{
		flex:0 0 auto;
		margin:0;
		font-size:14px;
	}

	.booking-489ban #search_489ban .inbox_489ban{
		display:contents;
		margin:0;
	}

	.booking-489ban #search_489ban .stay_489ban,
	.booking-489ban #search_489ban .room_489ban,
	.booking-489ban #search_489ban .person_489ban{
		width:100%;
		margin:0;
	}

	.booking-489ban #search_489ban select,
	.booking-489ban #search_489ban input{
		width:100%;
		height:48px;
		padding:0 15px;
		font-size:15px;
		line-height:48px;
	}

	.booking-489ban #search_489ban input[type="checkbox"]{
		width:18px;
		height:18px;
		min-width:18px;
		padding:0;
	}

	.booking-489ban #search_489ban .guests_input.child_count{
		width:100%;
		min-width:0;
	}

	.booking-489ban #search_489ban button[name="searchButton489ban"]{
		grid-column:1 / -1;
		width:100%;
		height:52px;
		margin:10px 0 0;
		padding:0 20px;
		font-size:16px;
		line-height:50px;
	}

	.booking-489ban #search_489ban .child_input{
		position:relative;
		right:auto;
		bottom:auto;
		grid-column:1 / -1;
		width:100%;
	}

}


/* ========================================
MOBILE
======================================== */

@media(max-width:768px){

	.booking-489ban{
		padding:50px 0;
	}

	.booking-489ban-inner{
		width:calc(100% - 44px);
	}

	.booking-489ban-title{
		margin-bottom:34px;
	}

	.booking-489ban-title strong{
		font-size:22px;
	}

	.booking-489ban #search_489ban form{
		gap:24px 18px;
	}

	.booking-489ban #search_489ban dt{
		margin-bottom:8px;
		font-size:14px;
	}

	.booking-489ban #search_489ban .date_489ban dd{
		gap:12px;
	}

	.booking-489ban .booking-date-field{
		height:46px;
		line-height:44px;
	}

	.booking-489ban #search_489ban select,
	.booking-489ban #search_489ban input{
		height:46px;
		line-height:46px;
	}

	.booking-489ban #search_489ban button[name="searchButton489ban"]{
		height:52px;
		line-height:50px;
	}

}


/* ========================================
SMALL MOBILE
完全1カラム
======================================== */

@media(max-width:480px){

	.booking-489ban{
		padding:45px 0;
	}

	.booking-489ban-inner{
		width:calc(100% - 30px);
	}

	.booking-489ban-title{
		margin-bottom:32px;
	}

	.booking-489ban-title strong{
		font-size:21px;
	}

	.booking-489ban #search_489ban form{
		display:block;
	}

	.booking-489ban #search_489ban .date_489ban,
	.booking-489ban #search_489ban .stay_489ban,
	.booking-489ban #search_489ban .room_489ban,
	.booking-489ban #search_489ban .person_489ban{
		width:100%;
		margin:0 0 22px;
	}

	.booking-489ban #search_489ban .date_489ban dd{
		display:grid;
		grid-template-columns:minmax(0,1fr) auto;
		gap:12px;
	}

	.booking-489ban .booking-date-field{
		width:100%;
		min-width:0;
	}

	.booking-489ban #search_489ban .date_489ban dd label{
		align-self:center;
	}

	.booking-489ban #search_489ban button[name="searchButton489ban"]{
		display:block;
		width:100%;
		margin:8px 0 0;
	}

	.booking-489ban #search_489ban .child_input{
		margin-top:22px;
	}

}


/* ========================================
CALENDAR RESPONSIVE
======================================== */

@media(max-width:768px){

	.booking-489ban-calendar{
		width:min(440px,calc(100vw - 30px));
		padding:22px 20px 24px;
	}

	.booking-calendar-title{
		font-size:21px;
	}

	.booking-calendar-day{
		font-size:14px;
	}

}

@media(max-width:380px){

	.booking-489ban-calendar{
		width:calc(100vw - 20px);
		padding:20px 14px 22px;
	}

	.booking-calendar-head{
		grid-template-columns:34px 1fr 34px;
		margin-bottom:16px;
	}

	.booking-calendar-title{
		font-size:19px;
	}

	.booking-calendar-prev,
	.booking-calendar-next{
		width:34px;
		height:34px;
		font-size:20px;
	}

	.booking-calendar-weekdays span{
		height:32px;
		font-size:12px;
	}

	.booking-calendar-day{
		font-size:13px;
	}

}

@media(min-width:1101px){

	.booking-489ban-title{
		display:none;
	}

	.booking-489ban .booking-date-field{
		width:175px;
		min-width:175px;
		height:30px;
		padding:0 30px 0 10px;
		font-size:14px;
	}

	.booking-489ban #search_489ban select{
		width:auto;
		min-width:0;
		height:28px;
		padding:0 20px 0 7px;
		font-size:13px;
		line-height:28px;
	}

	.booking-489ban #search_489ban .stay_489ban select,
	.booking-489ban #search_489ban .room_489ban select,
	.booking-489ban #search_489ban .person_489ban select{
		width:58px;
		min-width:58px;
	}
	
	
/* プルダウンと単位の間隔 */
.booking-489ban #search_489ban select+span{
	margin-left:8px;
}

/* 各予約項目の間隔 */
.booking-489ban #search_489ban dl{
	margin-right:18px;
}

	/* 宿泊日ブロックを内容幅まで圧縮 */
	.booking-489ban #search_489ban .date_489ban{
		flex:0 0 auto;
		width:auto;
		min-width:0;
		margin-right:10px;
	}

	/* 検索ボタンは150pxを死守 */
	.booking-489ban #search_489ban button[name="searchButton489ban"]{
		flex:0 0 150px;
		width:150px;
		min-width:150px;
		white-space:nowrap;
	}


}