/* 予約モーダル（フロントエンド）のスタイル。 */

.msb-rv-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, .6 );
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.msb-rv-overlay[hidden] {
	display: none;
}

.msb-rv-card {
	position: relative;
	background: #fff;
	width: 100%;
	max-width: min( 560px, 92vw );
	border-radius: 12px;
	padding: 32px 28px 28px;
	max-height: 92vh;
	overflow: auto;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, .25 );
	box-sizing: border-box;
}

.msb-rv-close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	color: #555;
	cursor: pointer;
	padding: 4px 8px;
}

.msb-rv-close:hover {
	color: #DB4F11;
}

.msb-rv-heading {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	color: #2b2723;
}

.msb-rv-desc {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.6;
	color: #666;
}

.msb-rv-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .05em;
	color: #DB4F11;
	margin: 16px 0 6px;
}

.msb-rv-label:first-of-type {
	margin-top: 0;
}

.msb-rv-input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	font-size: 15px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #fff;
	color: #2b2723;
}

.msb-rv-input:focus {
	outline: none;
	border-color: #DB4F11;
}

.msb-rv-error {
	margin: 14px 0 0;
	font-size: 14px;
	color: #c0392b;
	background: #fdecea;
	border-radius: 6px;
	padding: 10px 12px;
}

.msb-rv-error[hidden] {
	display: none;
}

.msb-rv-submit {
	display: block;
	width: 100%;
	margin-top: 24px;
	padding: 14px 16px;
	background: #DB4F11;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .05em;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color .2s ease;
}

.msb-rv-submit:hover {
	background: #c34410;
}

@media ( max-width: 480px ) {
	.msb-rv-card {
		padding: 26px 18px 22px;
	}
	.msb-rv-heading {
		font-size: 18px;
	}
}

/* ===================== 画面右下の円形「予約する」ボタン ===================== */

/* 旧ヘッダー内のインライン予約ボタンを非表示（円形固定ボタンへ移行）。
   Booking.com リンク等はヘッダー外なので影響しない。 */
header nav button.bg-coral,
header nav a.bg-coral {
	display: none !important;
}

.msb-reserve-fab {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9990; /* ヘッダー(z-50)より上、モーダル(9998)より下 */
	width: 140px;
	height: 140px;
	border-radius: 50%;
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #db4f11;
	color: #fff;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
	letter-spacing: .1em;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, .3 );
	transition: background-color .3s, transform .3s, box-shadow .3s;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
}

.msb-reserve-fab:hover {
	background: #b83f0c;
	color: #fff;
	transform: translateY( -2px );
	box-shadow: 0 10px 26px rgba( 0, 0, 0, .35 );
}

/* PC表示のときだけ、ぽよ〜んと柔らかく弾む（目立たせつつ、常時は落ち着かせるため時々だけ跳ねる）。
   1周7秒のうち前半3秒ほどかけてゆっくり跳ね、残りは静止。
   縦横をわずかに伸び縮みさせて（やわらかさ）、着地は下端を軸に潰れるようにしている。 */
@media ( min-width: 1024px ) {
	.msb-reserve-fab {
		transform-origin: center bottom;
		animation: msb-fab-bounce 7s linear 1.2s infinite;
	}
	/* マウスを載せている間は既存の浮き上がり表現を優先する */
	.msb-reserve-fab:hover {
		animation: none;
	}
}

@keyframes msb-fab-bounce {
	/* ためる（少しだけ潰れる） */
	0%   { transform: translateY( 0 ) scale( 1, 1 ); animation-timing-function: cubic-bezier( .4, 0, .5, 1 ); }
	4%   { transform: translateY( 0 ) scale( 1.05, .95 ); animation-timing-function: cubic-bezier( .2, .6, .35, 1 ); }
	/* ゆっくり浮き上がる（伸びる） */
	18%  { transform: translateY( -26px ) scale( .97, 1.03 ); animation-timing-function: cubic-bezier( .5, 0, .7, .5 ); }
	/* やわらかく降りて、下端で潰れる */
	30%  { transform: translateY( 0 ) scale( 1.06, .94 ); animation-timing-function: cubic-bezier( .2, .6, .35, 1 ); }
	/* 2回目の小さなぽよん */
	40%  { transform: translateY( -11px ) scale( .99, 1.01 ); animation-timing-function: cubic-bezier( .5, 0, .7, .5 ); }
	48%  { transform: translateY( 0 ) scale( 1.035, .965 ); animation-timing-function: cubic-bezier( .2, .6, .35, 1 ); }
	/* 3回目のごく小さな余韻 */
	54%  { transform: translateY( -4px ) scale( 1, 1 ); animation-timing-function: cubic-bezier( .5, 0, .7, .5 ); }
	59%  { transform: translateY( 0 ) scale( 1.015, .985 ); animation-timing-function: cubic-bezier( .3, .5, .4, 1 ); }
	64%  { transform: translateY( 0 ) scale( 1, 1 ); }
	/* 次の周まで静止 */
	100% { transform: translateY( 0 ) scale( 1, 1 ); }
}

/* セール中にボタンの真上へ出るマイクロコピー（＼ 秋のセール中 ／）も、
   ボタンと一緒に跳ねさせる。要素はセールプラグインが body 直下に作る別物なので、
   同じ長さ・同じ待ち時間のアニメーションを当てて動きを合わせている。

   数値は msb-fab-bounce から導いたもので、「ボタンの上端」と同じ動きになるようにしてある。
   ボタンは transform-origin:center bottom で伸び縮みするため、上端の位置は
   translateY だけでなく縦の伸縮ぶんも動く（上端のずれ ＝ 高さ140px ×(1 − 倍率)）。
   マイクロコピー自身は文字なので伸び縮みはさせない（つぶれて読みにくくなるため）。
   ★ msb-fab-bounce を変えたときは、こちらの数値も合わせて直すこと。 */
@media ( min-width: 1024px ) {
	#msale-fab-micro {
		animation: msale-fab-micro-bounce 7s linear 1.2s infinite;
	}
	/* ボタンにマウスを載せている間は、ボタン側と同じく動きを止める */
	body:has( .msb-reserve-fab:hover ) #msale-fab-micro {
		animation: none;
	}
}

@keyframes msale-fab-micro-bounce {
	/* translateX(50%) は横位置の基準（中央そろえ）なので、どのコマでも必ず付ける */
	0%   { transform: translateX( 50% ) translateY( 0 ); animation-timing-function: cubic-bezier( .4, 0, .5, 1 ); }
	4%   { transform: translateX( 50% ) translateY( 7px ); animation-timing-function: cubic-bezier( .2, .6, .35, 1 ); }
	18%  { transform: translateX( 50% ) translateY( -30px ); animation-timing-function: cubic-bezier( .5, 0, .7, .5 ); }
	30%  { transform: translateX( 50% ) translateY( 8px ); animation-timing-function: cubic-bezier( .2, .6, .35, 1 ); }
	40%  { transform: translateX( 50% ) translateY( -12px ); animation-timing-function: cubic-bezier( .5, 0, .7, .5 ); }
	48%  { transform: translateX( 50% ) translateY( 5px ); animation-timing-function: cubic-bezier( .2, .6, .35, 1 ); }
	54%  { transform: translateX( 50% ) translateY( -4px ); animation-timing-function: cubic-bezier( .5, 0, .7, .5 ); }
	59%  { transform: translateX( 50% ) translateY( 2px ); animation-timing-function: cubic-bezier( .3, .5, .4, 1 ); }
	64%  { transform: translateX( 50% ) translateY( 0 ); }
	100% { transform: translateX( 50% ) translateY( 0 ); }
}

/* コンセプト没入モード中（ボタンをフェードアウトさせる演出）は跳ねさせない。
   マイクロコピーも同様（没入中は transform でフェードアウトさせるため、動かすと打ち消される）。 */
body.v5-immersive .msb-reserve-fab,
body.v5-immersive #msale-fab-micro {
	animation: none;
}

/* OS側で「視差効果を減らす」を選んでいる人には動きを止める */
@media ( prefers-reduced-motion: reduce ) {
	.msb-reserve-fab,
	#msale-fab-micro {
		animation: none !important;
	}
}

@media ( max-width: 640px ) {
	.msb-reserve-fab {
		right: 16px;
		bottom: 16px;
		width: 110px;
		height: 110px;
		font-size: 14px;
	}
}