@charset "UTF-8";
/* ============================================================
   コーナーページ（お取り寄せグルメ／ホテル・旅館）
   モック fi-lo-renewal-mock.html の #view-oto / #view-hotel を移植したもの
   共通部品（.filo-card .filo-chip .filo-sechead 等）は 00-tokens.css 側にある
   ============================================================ */

.filo-page {
	background: var(--filo-bg);
	color: var(--filo-ink);
	font-family: var(--filo-sans);
}
.filo-page__main { display: block; }

/* ---------- ページヘッダー ---------- */
/* 背景画像が無くても単色で成立するよう、コーナー色を敷いてから重ねる */
.filo-pagehead {
	position: relative;
	color: #fff;
	padding: 66px 0 60px;
	overflow: hidden;
	background: var(--filo-ink);
}
.filo-pagehead--oto { background: var(--filo-c-oto); }
.filo-pagehead--hotel { background: var(--filo-c-hotel); }

.filo-pagehead__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.filo-pagehead::after {
	content: "";
	position: absolute;
	inset: 0;
}
.filo-pagehead--oto::after {
	background: linear-gradient(90deg, rgba(76, 38, 14, .94) 0%, rgba(76, 38, 14, .72) 100%);
}
.filo-pagehead--hotel::after {
	background: linear-gradient(90deg, rgba(20, 38, 50, .94) 0%, rgba(20, 38, 50, .7) 100%);
}
.filo-pagehead__inner {
	position: relative;
	z-index: 2;
	max-width: var(--filo-maxw);
	margin: 0 auto;
	padding: 0 24px;
}
.filo-pagehead__title {
	font-family: var(--filo-serif);
	font-size: 33px;
	margin: 0 0 14px;
	letter-spacing: .1em;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
}
.filo-pagehead__title small {
	display: block;
	font-family: var(--filo-sans);
	font-size: 10.5px;
	letter-spacing: .28em;
	opacity: .8;
	margin-bottom: 9px;
	font-weight: 700;
}
.filo-pagehead__lead {
	max-width: 640px;
	font-size: 13.5px;
	line-height: 2;
	margin: 0;
	opacity: .93;
}

/* パンくず（ヘッダー内は白抜き。テーマ側のパンくずを差し込んだ場合も色を合わせる） */
.filo-crumb {
	font-size: 11.5px;
	opacity: .72;
	margin: 0 0 14px;
	letter-spacing: .06em;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
}
.filo-crumb a { color: inherit; text-decoration: none; }
.filo-crumb a:hover { text-decoration: underline; }
.filo-crumb--theme,
.filo-crumb--theme * {
	color: #fff;
	background: none;
	font-size: 11.5px;
}

/* ---------- 絞り込みバー ---------- */
.filo-filterbar {
	background: var(--filo-card);
	border-bottom: 1px solid var(--filo-line);
	padding: 18px 0;
}
.filo-filter-row {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 6px 0;
	flex-wrap: wrap;
}
.filo-filter-row > b {
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--filo-ink-3);
	min-width: 76px;
	flex: none;
}
.filo-filterbar .filo-chip { text-decoration: none; }
.filo-filterbar .filo-chip--lead:hover { color: #fff; border-color: var(--filo-ink); }

/* ---------- 固定ページ本文（前置き） ---------- */
.filo-section--intro { padding-block: 40px 0; }
.filo-page__intro {
	font-size: 14px;
	line-height: 2;
	color: var(--filo-ink-2);
}
.filo-page__intro > *:first-child { margin-top: 0; }
.filo-page__intro > *:last-child { margin-bottom: 0; }

/* ---------- カード（リンク化に伴う調整） ---------- */
.filo-page .filo-card__thumb {
	display: block;
	text-decoration: none;
	color: inherit;
}
.filo-page .filo-card__thumb--empty {
	display: grid;
	place-items: center;
	background: var(--filo-gold-bg);
}
.filo-page .filo-card__thumb--empty::after {
	content: "NO IMAGE";
	font-size: 10.5px;
	letter-spacing: .18em;
	color: var(--filo-ink-3);
}
.filo-page .filo-card__title a {
	color: inherit;
	text-decoration: none;
}
.filo-page .filo-card__title a:hover { color: var(--filo-gold); }
.filo-page .filo-card__thumb img { transition: transform .5s ease; }
.filo-page .filo-card:hover .filo-card__thumb img { transform: scale(1.04); }
.filo-page .filo-sechead__more { text-decoration: none; }

/* ---------- 準備中 ---------- */
.filo-empty {
	background: var(--filo-card);
	border: 1px dashed var(--filo-line);
	border-radius: var(--filo-radius);
	padding: 46px 24px;
	text-align: center;
}
.filo-empty__title {
	font-family: var(--filo-serif);
	font-size: 18px;
	letter-spacing: .1em;
	margin: 0 0 10px;
}
.filo-empty__text {
	font-size: 13px;
	line-height: 1.95;
	color: var(--filo-ink-2);
	margin: 0 auto 18px;
	max-width: 34em;
}
.filo-empty__link {
	display: inline-block;
	border: 1px solid var(--filo-gold);
	color: var(--filo-gold);
	border-radius: 100px;
	padding: 8px 22px;
	font-size: 12.5px;
	text-decoration: none;
}
.filo-empty__link:hover {
	background: var(--filo-gold);
	color: #fff;
}

/* ---------- ページ送り ---------- */
.filo-pagenav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 34px;
}
.filo-pagenav .page-numbers {
	min-width: 38px;
	padding: 8px 12px;
	border: 1px solid var(--filo-line);
	border-radius: 2px;
	background: var(--filo-card);
	color: var(--filo-ink-2);
	font-size: 13px;
	text-align: center;
	text-decoration: none;
	line-height: 1.4;
}
.filo-pagenav .page-numbers.current {
	background: var(--filo-ink);
	border-color: var(--filo-ink);
	color: #fff;
}
.filo-pagenav a.page-numbers:hover {
	border-color: var(--filo-gold);
	color: var(--filo-gold);
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 640px) {
	.filo-pagehead { padding: 44px 0 40px; }
	.filo-pagehead__inner { padding: 0 16px; }
	.filo-pagehead__title { font-size: 25px; letter-spacing: .06em; }
	.filo-pagehead__lead { font-size: 13px; line-height: 1.95; }
	.filo-filter-row { gap: 8px 12px; }
	.filo-filter-row > b { min-width: 100%; }
	.filo-empty { padding: 34px 18px; }
}

/* ------------------------------------------------------------
   親テーマ（SWELL）が本文を中央寄せのコンテナで囲っている場合、
   ページヘッダーが全幅にならないことがある。そのときだけ下を有効にする。
   ※ 100vw はスクロールバー分だけ広くなるため、必ず .filo-page 側で
      はみ出しを止めてから使うこと（横スクロールの発生を防ぐ）。

.filo-page { overflow-x: hidden; }
.filo-pagehead,
.filo-filterbar {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
   ------------------------------------------------------------ */