@charset "UTF-8";
/* ============================================================
   記事末の予約ブロック（inc/71-booking.php が出力）
   ============================================================ */

.filo-booking {
	margin: 3.2em 0 1.6em;
	border: 1px solid var(--filo-line);
	border-radius: var(--filo-radius);
	background: var(--filo-card);
	overflow: hidden;
}
.filo-booking__head {
	margin: 0;
	padding: 16px 20px 14px;
	background: var(--filo-gold-bg);
	border-bottom: 1px solid var(--filo-line);
}
.filo-booking__title {
	display: block;
	font-family: var(--filo-serif);
	font-size: 1.05em;
	font-weight: 600;
	color: var(--filo-ink);
	letter-spacing: .04em;
}
.filo-booking__shop {
	display: block;
	margin-top: 4px;
	font-size: .88em;
	color: var(--filo-ink-2);
}
.filo-booking__area::before {
	content: "／";
	margin: 0 .3em;
	color: var(--filo-ink-3);
}

.filo-booking__list { margin: 0; padding: 0; list-style: none; }
.filo-booking__item {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "name btn" "note btn";
	align-items: center;
	gap: 2px 18px;
	padding: 15px 20px;
	border-bottom: 1px solid var(--filo-line-2);
}
.filo-booking__item:last-child { border-bottom: 0; }
.filo-booking__name {
	grid-area: name;
	font-weight: 600;
	font-size: .95em;
	color: var(--filo-ink);
}
.filo-booking__note {
	grid-area: note;
	font-size: .8em;
	line-height: 1.75;
	color: var(--filo-ink-3);
}
.filo-booking__btn {
	grid-area: btn;
	display: inline-block;
	padding: 9px 22px;
	border-radius: 18px;
	background: var(--filo-gold);
	color: #fff;
	font-size: .84em;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity .2s;
}
.filo-booking__btn:hover { opacity: .85; color: #fff; }


/* コーナーごとの色 */
.filo-booking--hotel .filo-booking__btn { background: var(--filo-c-hotel); }
.filo-booking--otoriyose .filo-booking__btn { background: var(--filo-c-oto); }

@media (max-width: 600px) {
	.filo-booking__item {
		grid-template-columns: 1fr;
		grid-template-areas: "name" "note" "btn";
		gap: 4px;
		padding: 14px 16px 16px;
	}
	.filo-booking__btn { justify-self: stretch; text-align: center; margin-top: 8px; }
	.filo-booking__head { padding: 14px 16px 12px; }
}