/*
 * WordPress テーマで足した見た目。承認済みの試作の CSS（cafe.css）は変えず、ここで次だけを足す。
 * 見本の内容のときは、試作と同じ見た目になる（足したものは、文字が長いとき・件数が違うときだけ効く）。
 * - TOP の写真・動画の焦点（写真と動画、PC・タブレット・スマートフォンで別）
 * - 長い店名・見出し・住所・URL の折り返し（横スクロールを出さない）
 * - 文字が増えたときに欄を伸ばす（PC は完成図の寸法が最小の高さ）
 * - おすすめのメニューの件数が見本（3品）と違うときの並び
 * - フッターのページへのリンク、公開トップ以外のページ
 */

/* 長い言葉や URL も枠の中で折り返す */
.cf-page {
	overflow-wrap: anywhere;
}

/* TOP の焦点（スマートフォン） */
.cf-hero__media img {
	object-position: var(--cf-image-focus-sp, 50% 50%);
}

.cf-hero__media .cf-hero__video {
	object-position: var(--cf-video-focus-sp, 100% 50%);
}

/* 店名が長いときは、縦書きのロゴを小さくする */
.cf-logo {
	font-size: calc(clamp(66px, 20cqw, 112px) * var(--cf-logo-scale, 1));
}

.cf-hero__caption {
	max-width: calc(100% - 40px);
}

/* ひとことが見本より長いとき：写真の下の端から上へ積む */
.cf-hero--caption .cf-hero__caption {
	top: calc(125cqw - 18px);
	transform: translateY(-100%);
}

/* おすすめのメニュー：4品目からは下にまとめて並べる（スマートフォン1列、タブレット2列、PC 3列） */
.cf-today__more {
	display: grid;
	gap: 44px;
	margin-top: 48px;
}

.cf-dish--more .cf-frame {
	aspect-ratio: 242 / 187;
}

/* フッターのページへのリンク */
.cf-footer__legal {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 8px;
}

.cf-footer__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 8px;
	font-size: 12px;
	letter-spacing: 0.08em;
}

.cf-footer:has(.cf-footer__legal) .cf-footer__sprig {
	opacity: 0.35;
}

/* 外部予約リンク・ボタンの長い表示名 */
.cf-btn > span,
.cf-reserve__link {
	min-width: 0;
}

/* タブレット（600〜1024px） */
@media (min-width: 600px) and (max-width: 1024px) {
	.cf-hero__media img {
		object-position: var(--cf-image-focus-tablet, 50% 50%);
	}

	.cf-hero__media .cf-hero__video {
		object-position: var(--cf-video-focus-tablet, 50% 50%);
	}

	.cf-logo {
		font-size: calc(min(10cqw, 112px) * var(--cf-logo-scale, 1));
	}

	.cf-hero__caption {
		max-width: calc(58% - 40px);
	}

	.cf-hero--caption .cf-hero__caption {
		top: calc(58cqw - 18px);
	}

	.cf-today__more {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 28px;
	}

	.cf-dish.cf-dish--more {
		display: block;
	}

	.cf-dish--more .cf-dish__text {
		margin-top: 14px;
	}

	.cf-today--one .cf-dish--drip .cf-frame,
	.cf-today--two .cf-dish--drip .cf-frame {
		margin-left: calc(var(--cf-gutter) * -1);
	}
}

/* PC（1025px 以上） */
@media (min-width: 1025px) {
	.cf-hero__media img {
		object-position: var(--cf-image-focus-pc, 50% 50%);
	}

	.cf-hero__media .cf-hero__video {
		object-position: var(--cf-video-focus-pc, 50% 50%);
	}

	.cf-logo {
		font-size: calc(var(--u) * 100 * var(--cf-logo-scale, 1));
	}

	.cf-hero__caption {
		max-width: calc(var(--u) * 450);
	}

	.cf-hero--caption .cf-hero__caption {
		top: calc(var(--u) * 478);
	}

	/* TOP：文字が増えたら欄を伸ばす（完成図の高さ 492 が最小） */
	.cf-hero {
		display: flow-root;
		height: auto;
		min-height: calc(var(--u) * 492);
	}

	.cf-hero__copy {
		position: relative;
		top: auto;
		left: auto;
		margin: calc(var(--u) * 158) 0 calc(var(--u) * 20) calc(var(--u) * 522);
	}

	/* 見本より長い行があるときだけ、枠の幅で折り返す */
	.cf-hero--wrap .cf-hero__title,
	.cf-hero--wrap .cf-hero__lead {
		white-space: normal;
	}

	/* 写真・飾りに文字が重ならない幅 */
	.cf-time__title,
	.cf-time__text {
		max-width: calc(var(--u) * 306);
	}

	.cf-today__head {
		height: auto;
		min-height: calc(var(--u) * 64);
	}

	.cf-today__note {
		max-width: calc(var(--u) * 330);
	}

	.cf-today__body {
		grid-template-rows: minmax(calc(var(--u) * 190), auto) auto;
	}

	/* 1品だけのとき：写真の右に文章を置く */
	.cf-today--one .cf-dish--drip {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: calc(var(--u) * 277) minmax(0, calc(var(--u) * 300));
		column-gap: calc(var(--u) * 35);
		align-items: start;
	}

	.cf-today--one .cf-dish--drip .cf-dish__text {
		margin-top: calc(var(--u) * 41);
	}

	.cf-today__more {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: calc(var(--u) * 24) calc(var(--u) * 11);
		margin-top: calc(var(--u) * 28);
	}

	.cf-dish--more .cf-frame {
		width: 100%;
		margin: 0;
	}

	.cf-dish--more .cf-dish__text {
		margin-top: calc(var(--u) * 13);
		padding-left: calc(var(--u) * 3);
	}

	.cf-season__copy {
		max-width: calc(var(--u) * 400);
	}

	.cf-daily__copy {
		max-width: calc(var(--u) * 543);
	}

	/* 見本と違う営業時間・住所のときは、欄の幅で折り返す */
	.cf-shop--wrap .cf-shop__list dd {
		white-space: normal;
		padding-block: calc(var(--u) * 4.5);
		line-height: calc(var(--u) * 16);
	}

	.cf-footer {
		height: auto;
		min-height: calc(var(--u) * 82);
	}

	.cf-footer:has(.cf-footer__legal) {
		padding-bottom: calc(var(--u) * 6);
	}

	.cf-footer__legal a {
		font-size: max(11px, calc(var(--u) * 7));
	}
}

/* 公開トップ以外のページ（プライバシーポリシーなど） */
.cf-subhead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 8px var(--cf-gutter);
	border-bottom: 1px solid var(--cf-cream-deep);
}

.cf-subhead__logo {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--cf-ink);
	font-family: var(--cf-sans);
	font-size: 20px;
	letter-spacing: 0.06em;
	text-decoration: none;
}

.cf-subhead__logo span {
	margin-right: 0.3em;
	font-family: var(--cf-display);
	font-variation-settings: "opsz" 20;
	letter-spacing: 0.12em;
}

.cf-subhead__nav {
	display: flex;
	flex-wrap: wrap;
}

.cf-subhead__nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	min-height: 44px;
	padding: 0 8px;
	color: #4f473f;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-decoration: none;
}

.cf-content__inner {
	max-width: 760px;
	margin-inline: auto;
	padding: 44px var(--cf-gutter) 56px;
}

.cf-content__title {
	color: var(--cf-ink);
	font-family: var(--cf-serif);
	font-size: clamp(24px, 6vw, 32px);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.5;
}

.cf-content__subtitle {
	margin-top: 28px;
	color: var(--cf-ink);
	font-family: var(--cf-serif);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
}

.cf-content__subtitle a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.cf-content__date {
	margin-top: 6px;
	font-size: 13px;
}

.cf-content__body {
	margin-top: 18px;
	font-size: 15px;
	line-height: 1.95;
}

.cf-content__body > * + * {
	margin-top: 1em;
}

.cf-content__body h2,
.cf-content__body h3 {
	margin-top: 1.8em;
	color: var(--cf-ink);
	font-family: var(--cf-serif);
	font-weight: 500;
	line-height: 1.5;
}

.cf-content__body h2 {
	font-size: 21px;
}

.cf-content__body h3 {
	font-size: 18px;
}

.cf-content__body ul,
.cf-content__body ol {
	padding-left: 1.5em;
}

.cf-content__body ul {
	list-style: disc;
}

.cf-content__body ol {
	list-style: decimal;
}

.cf-content__body a {
	color: var(--cf-red);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.cf-content__body img {
	height: auto;
}

.cf-content__back {
	max-width: 280px;
	margin-top: 32px;
}

.cf-content .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 28px;
}

.cf-content .nav-links a,
.cf-content .nav-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--cf-line);
}

/* フッターの枝：枠は試作と同じ 120:136。枝の SVG（400:440）は枠の中に収める */
.cf-footer__sprig {
	aspect-ratio: 120 / 136;
	object-fit: contain;
	object-position: 100% 100%;
}