/* デザートバー（mudae.by Justin Lee）の作り込みLP。
   モーヴ(#76545e)のダーク基調を踏襲しつつ、hilton テーマの構成（constrained 本文＋全幅帯）で
   再構成する。配色・装飾はこのLP専用のため .dessert-bar-lp にスコープする。
   コース＝1枚目を大きく単独表示、2枚目以降（1品ずつ）は左右スクロールのカードで見せる。 */

.dessert-bar-lp {
	--db-bg: #76545e;
	--db-text: #f7eff2;
	--db-muted: #e7dadf;
	--db-accent: #e9c7cd;
	--db-line: rgba(247, 239, 242, 0.24);
	--db-line-accent: rgba(233, 199, 205, 0.5);

	background: var(--db-bg);
	color: var(--db-text);
	font-family: var(--wp--custom--brand-body, var(--sans));
}

/* 本文要素の文字色をダーク背景に合わせて明色へ。 */
.dessert-bar-lp :is(h1, h2, h3, h4, p, li, dt, dd, address, figcaption) {
	color: var(--db-text);
}
.dessert-bar-lp a {
	color: var(--db-accent);
}

/* ── ヒーロー（動画＋ロゴ）。画面幅いっぱい(100vw)に広げる。 ── */
.dessert-bar-lp .db-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
	background: #3a2a30;
}
/* 前景動画は全体を見せる（最大幅で中央・縦横はそのまま）。最大幅の外側は同じ動画のぼかしを敷く。 */
.dessert-bar-lp .db-hero .local-video {
	position: relative;
	margin: 0;
}
.dessert-bar-lp .db-hero .local-video__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(24px);
	transform: scale(1.12);
	z-index: 0;
}
.dessert-bar-lp .db-hero .local-video__fg {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	max-width: 1320px;
	height: auto;
	margin: 0 auto;
}
/* ロゴの可読性のため、動画の上にわずかな暗幕を敷く。 */
.dessert-bar-lp .db-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(40, 28, 33, 0.22);
	pointer-events: none;
}
.dessert-bar-lp .db-hero__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	margin: 0;
	width: min(58vw, 360px);
}
.dessert-bar-lp .db-hero__logo img {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.35));
}
/* スマホでは前景動画が低くなり、正方形ロゴが縦にはみ出すため小さくする。 */
@media (max-width: 700px) {
	.dessert-bar-lp .db-hero__logo {
		width: min(42vw, 220px);
	}
}

/* ── セクション共通 ── */
.dessert-bar-lp .db-section {
	/* 上下は同じ余白。左右パディングで本文が画面縁に貼り付かないようにする。カルーセルの
	   トラックラッパーは margin で 100vw に抜けるため、この padding の影響を受けない。 */
	padding: 56px 24px;
}
/* セクション間の区切り罫線は画面幅いっぱい(100vw)に伸ばす（コンテンツ幅で切らない）。 */
.dessert-bar-lp .db-section + .db-section {
	position: relative;
}
.dessert-bar-lp .db-section + .db-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	border-top: 1px solid var(--db-line);
}
.dessert-bar-lp .db-en-head {
	text-align: center;
	font-family: var(--wp--custom--brand-heading, var(--serif));
	font-weight: 600;
	font-size: clamp(13px, 1.4vw, 15px);
	letter-spacing: 0.32em;
	color: var(--db-accent);
	margin: 0 0 clamp(28px, 4vw, 44px);
}

/* ── コンセプト ── */
.dessert-bar-lp .db-concept {
	text-align: center;
}
.dessert-bar-lp .db-concept h2 {
	font-family: var(--wp--custom--brand-heading, var(--serif));
	font-weight: 700;
	font-size: clamp(19px, 2.4vw, 28px);
	line-height: 1.7;
	letter-spacing: 0.04em;
	color: #fff;
	margin: 0;
}
/* 見出し下のアクセントの細線（装飾）。 */
.dessert-bar-lp .db-concept h2::after {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	margin: clamp(18px, 2.4vw, 26px) auto 0;
	background: var(--db-accent);
}
.dessert-bar-lp .db-concept p {
	max-width: 720px;
	margin: clamp(12px, 1.5vw, 18px) auto 0;
	font-size: 15px;
	line-height: 2.1;
	color: var(--db-muted);
}

/* ── コース ── */
.dessert-bar-lp .db-course__head {
	text-align: center;
	margin: 0 0 clamp(24px, 3.5vw, 40px);
}
.dessert-bar-lp .db-course__head h2 {
	font-family: var(--wp--custom--brand-heading, var(--serif));
	font-weight: 700;
	font-size: clamp(22px, 2.8vw, 34px);
	letter-spacing: 0.06em;
	line-height: 1.4;
	color: #fff;
	margin: 0;
}
.dessert-bar-lp .db-course__head .db-price {
	display: block;
	margin-top: 12px;
	font-size: clamp(14px, 1.6vw, 17px);
	letter-spacing: 0.08em;
	color: var(--db-accent);
}
/* コース見出し下のアクセントの細線（装飾）。 */
.dessert-bar-lp .db-course__head::after {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	margin: clamp(20px, 2.6vw, 28px) auto 0;
	background: var(--db-accent);
}

/* コースの1枚目（合成イメージ）は単独で大きく見せる。 */
.dessert-bar-lp .db-lead {
	margin: 0 auto clamp(28px, 4vw, 48px);
	max-width: 880px;
}
.dessert-bar-lp .db-lead img {
	width: 100%;
	height: auto;
	display: block;
}

/* 品目は共通の hilton/carousel ブロック（.peek-carousel）で表示する。ここでは各スライド
   （.db-dish）の見た目だけを定義する。カード幅・列送り・見切れ表示・左右ボタンの中央配置は
   共通カルーセル（carousel.css の --peek-card / carousel.js）に委ね、ここでは上書きしない
   （独自のカード幅を持たせると列幅とギャップが食い違い、右端がコンテンツ幅からはみ出すため）。 */
.dessert-bar-lp .db-dish {
	margin: 0;
}

/* 狭幅では1列カードが広がりすぎないよう 400px で抑える（中央寄せは共通カルーセル側で処理）。 */
@media (max-width: 600px) {
	.dessert-bar-lp .db-dish {
		max-width: 400px;
	}
}
.dessert-bar-lp .db-dish img {
	width: 100%;
	aspect-ratio: 10 / 7;
	object-fit: cover;
	display: block;
}
.dessert-bar-lp .db-dish h3 {
	font-family: var(--wp--custom--brand-heading, var(--serif));
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.04em;
	color: #fff;
	margin: 14px 0 0;
}
.dessert-bar-lp .db-dish p {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.85;
	color: var(--db-muted);
}

/* コース末尾の季節メニュー一覧。 */
.dessert-bar-lp .db-springmenu {
	max-width: 720px;
	margin: clamp(28px, 4vw, 44px) auto 0;
}
.dessert-bar-lp .db-springmenu > p {
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--db-accent);
	margin: 0 0 10px;
}
/* リストの直後に来る小見出し（カクテルペアリング各種／ワインペアリング等）は上に余白を取る。 */
.dessert-bar-lp .db-springmenu .wp-block-list + p {
	margin-top: clamp(20px, 3vw, 32px);
}
.dessert-bar-lp .db-springmenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.dessert-bar-lp .db-springmenu li {
	font-size: 14px;
	line-height: 1.9;
	padding: 8px 0 8px 18px;
	border-bottom: 1px solid var(--db-line);
	position: relative;
	color: var(--db-muted);
}
.dessert-bar-lp .db-springmenu li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 17px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--db-accent);
}
.dessert-bar-lp .db-springmenu li.no-dot {
	padding-left: 0;
}
.dessert-bar-lp .db-springmenu li.no-dot::before {
	display: none;
}

/* ── 動画セクション ── */
.dessert-bar-lp .db-movie {
	text-align: center;
}
.dessert-bar-lp .db-movie .local-video--inline {
	max-width: 900px;
	margin: 0 auto;
}
.dessert-bar-lp .db-movie .local-video--inline video {
	width: 100%;
	height: auto;
	display: block;
}

/* ── 店舗情報 ── */
.dessert-bar-lp .db-info {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}
.dessert-bar-lp .db-info h2 {
	font-family: var(--wp--custom--brand-heading, var(--serif));
	font-weight: 700;
	font-size: clamp(18px, 2.2vw, 24px);
	line-height: 1.6;
	color: #fff;
	margin: 0 0 8px;
}
/* 「40F 12席限定」は見出しの補足。アクセント色で1段下に。 */
.dessert-bar-lp .db-info__sub {
	margin: 0;
	font-size: 14px;
	letter-spacing: 0.12em;
	color: var(--db-accent);
}
/* 見出し下のアクセントの細線（コース見出しと同じ装飾）。 */
.dessert-bar-lp .db-info__sub::after {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	margin: clamp(20px, 2.6vw, 28px) auto 0;
	background: var(--db-accent);
}
/* 店舗情報冒頭の写真。 */
.dessert-bar-lp .db-info__img {
	max-width: 560px;
	margin: 0 auto clamp(28px, 4vw, 44px);
}
.dessert-bar-lp .db-info__img img {
	width: 100%;
	height: auto;
	display: block;
}
/* オープン案内。 */
.dessert-bar-lp .db-info__open {
	margin: clamp(20px, 2.6vw, 28px) 0 0;
	font-size: 15px;
	line-height: 1.95;
	color: var(--db-text);
}
.dessert-bar-lp .db-info__hours {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 2;
	color: var(--db-muted);
}
/* コース料金は罫線で区切った行（コース名＋詳細）に。長い金額表記でも崩れないよう縦積みにする。
   コアブロック（段落の組）で表現するため、コース名＝.db-course-name、詳細＝.db-course-detail、
   末尾の注記＝.db-course-note を当てる。 */
.dessert-bar-lp .db-courses {
	max-width: 560px;
	margin: 30px auto 0;
	padding-top: 30px;
	border-top: 1px solid var(--db-line-accent);
	text-align: left;
}
.dessert-bar-lp .db-course-name {
	margin: 16px 0 0;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--db-accent);
}
.dessert-bar-lp .db-courses > .db-course-name:first-child {
	margin-top: 0;
}
.dessert-bar-lp .db-course-detail {
	margin: 4px 0 0;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--db-line);
	font-size: 14px;
	line-height: 1.85;
	color: var(--db-muted);
}
.dessert-bar-lp .db-course-note {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.85;
	color: var(--db-muted);
}

/* ── パティシエ紹介 ── */
.dessert-bar-lp .db-patissier__grid {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: clamp(28px, 4vw, 48px);
	align-items: start;
	max-width: 1000px;
	margin: 0 auto;
}
.dessert-bar-lp .db-patissier__grid figure {
	margin: 0;
}
.dessert-bar-lp .db-patissier__grid img {
	width: 100%;
	height: auto;
	display: block;
}
/* セクション見出し「パティシエの紹介」は中央のサブタイトル。 */
.dessert-bar-lp .db-patissier > h3 {
	text-align: center;
	font-family: var(--wp--custom--brand-heading, var(--serif));
	font-weight: 600;
	font-size: clamp(15px, 1.8vw, 18px);
	letter-spacing: 0.16em;
	color: var(--db-accent);
	margin: 0 0 clamp(28px, 4vw, 44px);
}
/* 氏名ブロック: 役職（小）／英字氏名（大）／日本語氏名（中）の3行。 */
.dessert-bar-lp .db-patissier__name {
	margin: 0 0 22px;
}
.dessert-bar-lp .db-patissier__name .db-role {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--db-accent);
}
.dessert-bar-lp .db-patissier__name h3 {
	font-family: var(--wp--custom--brand-heading, var(--serif));
	font-weight: 700;
	font-size: clamp(24px, 2.6vw, 32px);
	letter-spacing: 0.06em;
	line-height: 1.2;
	color: #fff;
	margin: 8px 0 0;
}
.dessert-bar-lp .db-patissier__name .db-name-ja {
	margin: 8px 0 0;
	font-size: 14px;
	letter-spacing: 0.1em;
	color: var(--db-muted);
}
.dessert-bar-lp .db-patissier p {
	font-size: 14px;
	line-height: 2;
	color: var(--db-muted);
	margin: 0;
}

/* ── 予約CTA ──
   予約CTAは共通コンポーネント（.restaurant-reserve-cta / hilton_reserve_cta）に統一した。
   旧 .db-cta / .db-reserve の独自スタイルは未使用のため削除。dessert-bar 固有の配色（地・ボタン）が
   必要な場合は CTA に bar_bg / button_bg / button_fg を渡して指定する。 */

/* ── レスポンシブ ── */
@media (max-width: 781px) {
	.dessert-bar-lp .db-patissier__grid {
		grid-template-columns: 1fr;
		max-width: 480px;
	}
	.dessert-bar-lp .db-lead {
		max-width: 480px;
	}
}