@charset "UTF-8";
/* ============================================================
   さくの美食手帖 — デザイントークンと共通部品
   モック fi-lo-renewal-mock.html の設計をそのまま移植したもの
   このファイルが最初に読み込まれる（00-）。他のCSSはここの変数を使う
   ============================================================ */

:root {
	--filo-ink: #17130F;
	--filo-ink-2: #4A423A;
	--filo-ink-3: #7C7168;
	--filo-line: #E2DAD0;
	--filo-line-2: #EFE9E1;
	--filo-bg: #FBF8F4;
	--filo-card: #FFFFFF;
	--filo-gold: #A6763F;
	--filo-gold-2: #C99B62;
	--filo-gold-bg: #F6EEE3;

	/* コーナー識別色 */
	--filo-c-rest: #7A2E2E;   /* レストラン：臙脂 */
	--filo-c-oto: #8A4B1F;    /* お取り寄せ：赤茶 */
	--filo-c-hotel: #2A4658;  /* ホテル：藍 */

	--filo-radius: 4px;
	--filo-maxw: 1180px;

	--filo-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
	--filo-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP", sans-serif;
}

/* ---------- 汎用レイアウト ---------- */
.filo-wrap {
	max-width: var(--filo-maxw);
	margin-inline: auto;
	padding-inline: 24px;
}
.filo-section { padding-block: 56px; }
.filo-section--tint {
	background: var(--filo-card);
	border-block: 1px solid var(--filo-line-2);
}
.filo-grid { display: grid; gap: 26px; }
.filo-grid--2 { grid-template-columns: repeat(2, 1fr); }
.filo-grid--3 { grid-template-columns: repeat(3, 1fr); }
.filo-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- セクション見出し ---------- */
.filo-sechead {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 26px;
	flex-wrap: wrap;
}
.filo-sechead__title {
	font-family: var(--filo-serif);
	font-size: 24px;
	font-weight: 600;
	margin: 0;
	letter-spacing: .1em;
	line-height: 1.3;
}
.filo-sechead__title small {
	display: block;
	font-family: var(--filo-sans);
	font-size: 10.5px;
	letter-spacing: .22em;
	color: var(--filo-gold);
	font-weight: 700;
	margin-bottom: 6px;
}
.filo-sechead__lead {
	margin: 0;
	font-size: 13px;
	color: var(--filo-ink-3);
	flex: 1 1 260px;
}
.filo-sechead__more {
	margin-left: auto;
	font-size: 12.5px;
	color: var(--filo-ink-2);
	border-bottom: 1px solid var(--filo-line);
	padding-bottom: 2px;
	white-space: nowrap;
}

/* ---------- 記事カード（共通） ---------- */
.filo-card {
	background: var(--filo-card);
	border: 1px solid var(--filo-line-2);
	border-radius: var(--filo-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.filo-card__thumb {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #EDE7DF;
}
.filo-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.filo-card__tags {
	position: absolute;
	left: 9px;
	top: 9px;
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}
.filo-tag {
	background: rgba(23, 19, 15, .82);
	color: #fff;
	font-size: 10.5px;
	padding: 2px 8px;
	border-radius: 2px;
	letter-spacing: .06em;
	line-height: 1.6;
}
.filo-tag--rest { background: rgba(122, 46, 46, .9); }
.filo-tag--oto { background: rgba(138, 75, 31, .92); }
.filo-tag--hotel { background: rgba(42, 70, 88, .92); }

.filo-card__body {
	padding: 14px 16px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.filo-card__title {
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0 0 8px;
	font-weight: 700;
}
.filo-card__excerpt {
	font-size: 12.5px;
	color: var(--filo-ink-2);
	margin: 0 0 10px;
	line-height: 1.75;
}
.filo-card__meta {
	margin-top: auto;
	padding-top: 8px;
	font-size: 11.5px;
	color: var(--filo-ink-3);
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* 予算・席数などの小さな仕様バッジ */
.filo-spec {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}
.filo-spec li {
	font-size: 11px;
	border: 1px solid var(--filo-line);
	border-radius: 2px;
	padding: 1px 7px;
	color: var(--filo-ink-2);
	background: #FCFAF7;
}

/* ---------- チップ（エリア・ジャンルの絞り込み） ---------- */
.filo-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.filo-chip {
	border: 1px solid var(--filo-line);
	background: var(--filo-card);
	border-radius: 100px;
	padding: 7px 16px;
	font-size: 13px;
	color: var(--filo-ink-2);
	text-decoration: none;
	line-height: 1.6;
}
.filo-chip .filo-chip__count {
	color: var(--filo-ink-3);
	font-size: 11px;
	margin-left: 5px;
}
.filo-chip:hover { border-color: var(--filo-gold); color: var(--filo-gold); }
.filo-chip--lead {
	background: var(--filo-ink);
	color: #fff;
	border-color: var(--filo-ink);
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 1000px) {
	.filo-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.filo-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.filo-wrap { padding-inline: 16px; }
	.filo-section { padding-block: 40px; }
	.filo-grid { gap: 18px; }
	.filo-grid--2,
	.filo-grid--4 { grid-template-columns: 1fr; }
	.filo-sechead__title { font-size: 20px; }
}

/* ============================================================
   SWELL 親テーマとの噛み合わせ
   ============================================================ */

/* SWELL の #content.l-content.l-container が幅を絞るため、
   自作テンプレートのページだけ制約を外して全幅で見せる */
.filo-fullwidth #content.l-content,
.filo-fullwidth .l-content > .l-container {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}
.filo-fullwidth #content.l-content {
	padding-top: 0;
	padding-bottom: 0;
	/* SWELL は本文＋サイドバーを flex で並べる。そのままだと中身が
	   フレックスアイテムとして内容幅に縮むため、1カラムの自作ページでは block に戻す */
	display: block;
}
.filo-fullwidth .filo-front,
.filo-fullwidth .filo-page {
	width: 100%;
}

/* サイト名（ヘッダーロゴ）は明朝体にする。モックの設計に合わせたもの */
.c-headLogo,
.c-headLogo__link,
.l-header__logo .c-headLogo,
.l-fixHeader__logo .c-headLogo,
.l-footer .c-headLogo {
	font-family: var(--filo-serif);
	font-weight: 600;
	letter-spacing: .08em;
}

/* 見出しも明朝体にする（サイト名と揃えて、モックのトーンに合わせる） */
.c-pageTitle,
.c-postTitle__ttl,
.c-secTitle,
.c-widget__title,
.post_content h2,
.post_content h3,
.post_content h4,
.post_content h5,
.p-postList__title {
	font-family: var(--filo-serif);
	font-weight: 600;
	letter-spacing: .06em;
}

/* 本文の見出しサイズ
   既定は h2=22.4px / h3=20.8px で差が1.6pxしかなく、階層が伝わりにくい。
   h3を上げるぶん h2 も上げて、大小関係を保つ */
.post_content h2 {
	font-size: 1.5em;      /* 24px */
	margin: 4em 0 1.5em;   /* 章の区切りとして、前を大きく空ける */
}
.post_content h3 { font-size: 1.375em; } /* 22px */

/* スマホでは見出し帯の余白を詰める（既定の .75em 1em では大きすぎる） */
@media (max-width: 640px) {
	.post_content h2 { padding: .5em 1em; }
}

/* サイドバーのプロフィールアイコン
   SWELLはメディアライブラリのID経由で画像タグを出すため、
   ライブラリに登録していないテーマ同梱の画像は img が出力されない。
   （テスト環境はメディアの参照先を本番へ向けているため、テストにアップロードできない）
   本番でメディアに登録したら、この指定は外してよい */
.p-profileBox__icon {
	width: 120px;
	height: 120px;
	margin-inline: auto;
	border-radius: 50%;
	overflow: hidden;
	background: url("../img/sakumogu.jpg") center / cover no-repeat;
}