@charset "utf-8";



/***************************************************************************
* トリプラ予約バー フォント変更 ("Shippori Mincho")
***************************************************************************/
.barWrap,
.barWrap *,
[class*="search-widget-search-container"],
[class*="search-widget-search-container"] * {
	font-family: "Shippori Mincho", serif !important;
	font-weight: 400 !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale !important; 
}

.barWrap input::placeholder,
.barWrap select::placeholder {
	font-family: "Shippori Mincho", serif !important;
}

/* 予約バー全体の背景と位置調整 */
.barWrap {
	width: 100%;
	background: #F0EFEA;
	text-align: center;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 !important;      /* ← 0 にして余白を完全にゼロにします */
	max-height: 80px !important; /* ← バーの最大縦幅を強制的に制限します */
	}
}

#search-bar-container,
#tripla-searching-app {
	width: 100%;
	margin: 0 auto;
}

/* 検索コンテナ：1行に横並びにする設定 */
form[class*="search-widget-search-container"] {
	box-shadow: none !important;
	background: transparent !important;
	width: 100% !important;
	max-width: 1300px !important;
	margin: 0 auto !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important; /* 絶対に折り返さない */
	justify-content: center !important;
	align-items: center !important;
	padding: 15px 10px !important;
	gap: 12px !important; /* 要素間の適度な隙間 */
	box-sizing: border-box !important;
}

/* 入力エリア全体の横並び調整 */
form[class*="search-widget-search-container"] > div {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 12px !important;
}

/* .search-widget-two-picker-wrapper-4ca735 {
display: flex; */

/* .input-container-input-container-da40af {
 width: 0; 

} */

/* ★「日付未定」テキスト・スイッチ・および周辺要素を強制的に完全非表示 */
/* [class*="toggle"], 
[class*="switch"],
[class*="search-widget-date-unfixed"],
[class*="dateUnfixed"],
[class*="date-unfixed-wrapper"],
form[class*="search-widget-search-container"] > span,
form[class*="search-widget-search-container"] > div:last-child {
	display: none !important;
} */

/* 各入力ブロックのラベルと入力欄を横並びにする */
[class*="input-container-container"],
[class*="search-widget-input-wrapper"] {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	margin: 0 !important;
	gap: 6px !important;
}

/* ラベルテキスト（チェックイン日、ご利用人数など）の上部配置バグを防ぎ、横に並べる */
[class*="input-container-title"] {
	font-size: 0.9rem !important;
	white-space: nowrap !important;
	margin: 0 !important;
	line-height: 1 !important;
	color: #333 !important;
}

/* ★修正ポイント：2重枠線のリセット（元のシステム枠を1つの綺麗な白枠に統合） */
[class*="input-container-slot"] {
	/* background-color: #ffffff !important;
	border: 1px solid #ccc !important; */
	border-radius: 4px !important;
	height: 42px !important;
	display: flex !important;
	align-items: center !important;
	padding: 0 10px !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
}

/* 内側についていた不要なボーダーや影を完全に消し去って1重にする */
[class*="dropdown-selector-input"],
[class*="search-widget-two-picker-wrapper"],
[class*="search-widget-date-picker"],
input[class*="input-container-input"] {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	height: 100% !important;
}

/* 検索ボタンを2枚目の写真（黒背景・白文字・カチッとした四角）に固定 */
form[class*="search-widget-search-container"] button[type="submit"],
form[class*="search-widget-search-container"] [class*="search-widget-button"] button {
	background: #000000 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 0px !important; /* 四角形にする */
	width: 110px !important;
	height: 42px !important;
	font-size: 0.95rem !important;
	cursor: pointer !important;
	transition: opacity 0.2s !important;
	display: block !important;
}

.dropdown-selector-container-ef1ce2 {
position: relative;
height: 100% !important;
}

form[class*="search-widget-search-container"] button[type="submit"]:hover {
	opacity: 0.8 !important;
}


/************ お知らせ ************/
.atentionBox {
	width: 100%;
	margin: 30px auto;
	box-sizing: border-box;
}
.atentionBoxInner {
	width: 90%;
	max-width: 800px;
	margin: 0 auto;
	padding: 35px 20px;
	text-align: center;
	border: 1px solid #000000;
	box-sizing: border-box;
}
.atentionBoxInner > span {
	display: block;
	font-size: 120%;
	font-weight: bold;
	margin-bottom: 20px;
	color: #000000;
}
.atentionBoxText {
	font-size: 100%;
	line-height: 2;
	text-align: center;
}
.atentionBoxText a {
	display: inline-block;
	margin-top: 10px;
	font-size: 95%;
	color: #000000;
	text-decoration: underline;
}


/************ ヘッダー・バー固定設定 ************/
#header,
.barWrap {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 1000;
}
#header {
	top: 0;
}
.barWrap {
	top: var(--header-height, 80px);
}
body.has-fixed-bar {
	padding-top: var(--total-fixed-height, 160px);
}


/************ チャットbotアイコン ************/
.triplabot-icon-circle {
	background: #ffffff !important;
}

@media screen and (max-width: 1100px) and (min-width: 769px) {
	.barWrap {
		overflow: hidden;
	}
	#search-bar-container {
		transform-origin: top center;
		transform: scale(calc(100vw / 1100));
		width: 950px;
	}
}


/************ SP STYLE (スマホ対応) ************/
@media (max-width: 768px) {
	.barWrap {
		display: none;
	}
	.barWrap .wrapMenuLang {
		display: block !important;
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		z-index: 9999 !important;
	}
	.wrapMenuLang.sp {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		z-index: 9999 !important;
		width: auto !important;
	}
	.wrapMenuLang.sp .maiMenu a {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		background: #064157 !important;
		color: #fff !important;
		height: 44px !important;
		padding: 0 55px !important;
		font-size: 14px !important;
		white-space: nowrap !important;
		text-decoration: none !important;
	}
	.wrapMenuLang.sp ul.menuLang {
		position: fixed !important;
		right: 0 !important;
		top: 44px !important;
		width: 160px !important;
		background: transparent !important;
	}
	.wrapMenuLang.sp ul.menuLang li {
		background: #d3d3d3 !important;
		margin-bottom: 4px !important;
	}
	.wrapMenuLang.sp ul.menuLang li a {
		display: block !important;
		padding: 10px 20px !important;
		color: #333 !important;
		text-align: center !important;
		font-size: 14px !important;
	}
	.triplabot-icon-circle {
		width: 65px !important;
		height: 65px !important;
	}
	.triplabot-icon-circle img,
	.triplabot-icon-circle svg {
		width: 65px !important;
		height: 61px !important;
	}
}


@media only screen and (max-width: 992px) {
	.search-widget-search-container-bf1818 .search-widget-input-wrapper-eaf5bf,
	.search-widget-two-picker-wrapper-4ca735 {
		display: flex !important;
		flex-direction: row !important;
	}
	
	[class*="dropdown-selector-container-ef1ce2"] {
		width: 150px !important;
		margin-top: 28px !important;
	} 
	
	[class*="input-container-input-container-da40af"] {
		margin-top: 7px;
		} 
	
}

@media only screen and (max-width: 1098px) {
.search-widget-two-picker-wrapper-4ca735 {
display: flex !important;
vertical-align: bottom !important;
}

 [class*="dropdown-selector-container-ef1ce2"] {
	margin-top: 28px !important;
}

 }