/* ------------------------------------------------------------------
   スマートフォンの固定予約ボタン
   2026-09-04 コラレイトデザイン

   テーマ標準の footer-sticky-nav は、白地に小さな文字が3つ並ぶだけで
   主役がどれか分からない。訪問の8割がスマートフォンで、ここが予約への
   入口なので、押すものが一目で分かる形にする。

   色はサイトの実物から取った。#0096ca はロゴとボタンで使われている
   ブランド色（トップページ内で8回）。新しい色を足していない。

   並びは手数料の安い順ではなく、人が最初に知りたい順にしている。
   空室と料金を見たい人に電話を強いると、その人は離れる。
   電話とLINE（手数料0%）は同じ列に常に見える形で残す。
   ------------------------------------------------------------------ */

.p-footer-sticky-nav {
	background: #fff;
	border-top: 1px solid #e0e0e0;
	/* iPhone のホームバーに隠れないようにする */
	padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -1px 0 rgba(0, 0, 0, .04);
}

.p-footer-sticky-nav .c-navbar {
	display: flex;
	align-items: stretch;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-footer-sticky-nav .c-navbar__item {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border: none;
}

.p-footer-sticky-nav .c-navbar__item > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	/* 指で押せる大きさ。44px は一般的な下限 */
	min-height: 48px;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	color: #313131;
	text-decoration: none;
	white-space: nowrap;
	background: #fff;
	border: 1px solid #d8d8d8;
	border-radius: 8px;
}

/* アイコンの箱を固定する。
   これを書かないと箱だけが横に約200px広がり、絵柄が箱の中央に置かれるため、
   文字との間が大きく空く（2026-09-04 に本番の画素を数えて確認）。
   手元でファイルを開いた描画では再現しなかったので、本番の画像で判断すること。 */
.p-footer-sticky-nav .c-navbar__item > a > i,
.p-footer-sticky-nav .c-navbar__item > a > svg {
	flex: 0 0 auto !important;
	width: 19px !important;
	height: 19px !important;
	min-width: 0 !important;
	max-width: 19px !important;
}

/* LINE は緑で覚えられているので、その色のまま出す */
.p-footer-sticky-nav .cta-sticky-line > a > .fa-line {
	background-color: #06c755;
}

/* 主ボタン。残りの幅を全部使う */
.p-footer-sticky-nav .cta-sticky-book {
	flex: 1 1 auto;
	min-width: 0;
}

.p-footer-sticky-nav .cta-sticky-book > a {
	flex-direction: row;
	gap: 7px;
	font-size: 15px;
	color: #fff;
	background: #0096ca;
	border-color: #0096ca;
}

.p-footer-sticky-nav .cta-sticky-book > a > i,
.p-footer-sticky-nav .cta-sticky-book > a > svg {
	width: 18px !important;
	height: 18px !important;
	max-width: 18px !important;
}

/* 画面の一番下の内容が固定ボタンに隠れないようにする */
@media (max-width: 639px) {
	body {
		padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
	}
}