/* =========================================================================
   ヒルトン沖縄北谷リゾート｜朝食ビュッフェ「スリユン」特設ページ
   （restaurant CPT・slug=breakfast）専用スタイル。.breakfast-lp スコープ。

   特設デザイン:
   - 各区画は幅 1000px の中に 880px の二重罫線フレーム（#3B281E 2px）を敷く
   - 区画見出しは title_bg（淡い背景画像）＋アイコン画像＋下線（title_area_line）で構成
   - 導入はコーラル帯（#F8C7B6）＋装飾イラスト、中段はクリーム→ティールのグラデ帯、
     店舗情報・特徴はパターン背景（blue_bg_2）の上のティールフレーム
   配色: 地 #F6EEE3／文字 #3B281E／コーラル #F8C7B6／ティール rgba(0,116,150,.8)。
   ========================================================================= */

:root {
	--bf-brown: #3B281E;
	--bf-cream: #F6EEE3;
	--bf-coral: #F8C7B6;
	--bf-teal: rgba(0, 116, 150, 0.8);
	--bf-line: 2px solid #3B281E;
}

/* ============ ページ地 ============ */
.breakfast-lp {
	background-color: var(--bf-cream);
	color: var(--bf-brown);
	/* 全幅 KV/帯のビューポート中央寄せで出る横はみ出しを抑える。 */
	overflow-x: clip;
}
.breakfast-lp :is(h1, h2, h3, h4, p, li, dt, dd, td) {
	color: var(--bf-brown);
}
/* 見出し色は LP のブラウンに統一する。親テーマ blocks.css の .wp-block-heading{color:var(--aureate)}
   （ヒルトンブルー・詳細度 0,2,0）に勝つよう、同詳細度＋後勝ち（または .lp-area スコープ）で上書き。
   店舗系の白文字は別ルール（高詳細度）が上書きする。 */
.breakfast-lp .wp-block-heading,
.breakfast-lp .lp-area :is(h1, h2, h3, h4).wp-block-heading,
.breakfast-lp .lp-section :is(h3, h4) {
	color: var(--bf-brown);
	font-family: var(--wp--custom--brand-body);
}

/* 全幅要素（KV・帯）をビューポート幅いっぱいに広げる共通指定。
   親テーマ blocks.css は .single-main 配下の .alignfull を 1256px キャップ＋中央寄せする
   （除外クラス .hilton-kv 等のみ 100vw）。当 LP の帯は除外対象外で詳細度も極めて高い（0,9,0）ため、
   100vw ブレイクアウトを確実に効かせるべく width/margin を !important で上書きする。
   margin の calc(50% - 50vw) は親コンテナ幅に依らずビューポート全幅へ広げる。 */
.breakfast-lp .breakfast-nav,
.breakfast-lp .breakfast-intro.alignfull,
.breakfast-lp .breakfast-blue-bg,
.breakfast-lp .breakfast-blue-bg-2 {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	box-sizing: border-box;
}

/* ============ KV（親 hilton-kv 構造を流用・ぼかし有り）============
   他ホテルの KV と同じ親 hilton-kv 系（100vw・kv-bg ぼかし・kv-main 中央 contain・最大1320）で表示する。
   位置/サイズ/ぼかしは親 lp.css が担う。タイトル画像（BREAKFAST）は kv-main の中央に重ねる。 */
.breakfast-lp .hilton-kv.breakfast-kv {
	position: relative;
	margin-bottom: 0;
}
.breakfast-lp .hilton-kv.breakfast-kv .kv-main {
	position: relative;
}
/* KV 下部のフェード（画像をページ地のクリームへなじませる）。最前面に重ねる。 */
.breakfast-lp .hilton-kv.breakfast-kv::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(80px, 12vw, 160px);
	background: linear-gradient(180deg, rgba(246, 238, 227, 0) 0%, var(--bf-cream) 100%);
	pointer-events: none;
	z-index: 4;
}
.breakfast-lp .chatan-kv__title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	width: 40%;
	max-width: 468px;
	margin: 0;
	line-height: 1;
}
.breakfast-lp .chatan-kv__title img {
	display: block;
	width: 100%;
	height: auto;
}
/* KV 画像の下に置くリード。 */
.breakfast-lp .chatan-kv__caption {
	margin: 0;
	padding: 36px 16px;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	color: var(--bf-brown);
}

/* ============ 画像ナビ（ページ内リンク・4点）============
   nav_bg.png の帯に重ね、上方へ -40px ずらす。各画像 240px・ドロップシャドウ。 */
.breakfast-lp .breakfast-nav {
	position: relative;
	z-index: 3;
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0;
	box-sizing: border-box;
	/* 波の帯（nav_bg）は左右いっぱい。波は上下中央に置き、ページ内リンク（ダイヤ）の中心と揃える。
	   下層＝コーラル帯を下側に敷き、波の下がピンクになるようにする（intro のコーラルへ連続）。 */
	background-image:
		url("../images/breakfast/nav_bg.png"),
		linear-gradient(var(--bf-coral), var(--bf-coral));
	background-repeat: no-repeat, no-repeat;
	background-position: center center, center bottom;
	background-size: 100% 200px, 100% 55%;
}
.breakfast-lp .breakfast-nav__list {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.breakfast-lp .breakfast-nav__list > li {
	width: 240px;
	margin: 0;
}
.breakfast-lp .breakfast-nav__list > li > a {
	display: block;
	transition: opacity 0.2s ease;
}
.breakfast-lp .breakfast-nav__list > li > a:hover {
	opacity: 0.85;
}
.breakfast-lp .breakfast-nav__list img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.16));
}

/* ============ 導入（コーラル帯＋装飾イラスト＋スライダー）============
   全幅コーラル、上に 3 つの装飾画像、見出し＋リード、下に写真スライダー。 */
.breakfast-lp .breakfast-intro {
	position: relative;
	/* ナビ（波＋ピンク帯）の直下にコーラルを連続させ、隙間なくくっつける。 */
	top: -96px;
	margin-bottom: -96px;
	padding: 160px 0 50px;
	background-color: var(--bf-coral);
	background-image:
		url("../images/breakfast/intro_img_1.png"),
		url("../images/breakfast/intro_img_2.png"),
		url("../images/breakfast/intro_img_3.png");
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position:
		calc(50% - 290px) 50px,
		center 60px,
		right 16px top 26px;
	background-size: 228px auto, 123px auto, 222px auto;
}
.breakfast-lp .breakfast-intro > * {
	position: relative;
	z-index: 1;
}
.breakfast-lp .breakfast-intro__title {
	max-width: 1010px;
	margin: 0 auto 20px;
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
}
.breakfast-lp .breakfast-intro__lead {
	/* 幅・中央寄せは alignwide（constrained レイアウト）が持つ。ここは文字組みのみ。 */
	padding: 0 16px;
	text-align: center;
	font-size: 14px;
	line-height: 1.9;
}
/* 導入の自動スクロール（マーキー）は導入とシグネチャーの間。上下マージンは付けない。 */
.breakfast-lp .lp-slider {
	margin-top: 0;
	margin-bottom: 0;
}

/* ============ 背景帯 ============ */
.breakfast-lp .breakfast-blue-bg {
	background: linear-gradient(180deg, var(--bf-cream) 0%, rgb(62, 174, 195) 100%);
	/* 導入（コーラル帯）と最初の区画の間に上余白を取る。 */
	padding: 56px 0 0;
}
.breakfast-lp .breakfast-blue-bg-2 {
	background-image: url("../images/breakfast/blue_bg_2.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
	/* 最後の区画の下に余白を取り、ティール地＋装飾がパンくず手前まで自然に続くようにする。 */
	padding: 0 0 64px;
}
/* 帯内の最後の区画の下マージン(70px)は帯の padding-bottom と二重になるため打ち消す。 */
.breakfast-lp .breakfast-blue-bg-2 > .breakfast-card.lp-area:last-child {
	margin-bottom: 0;
}
/* 下の余白はティールの帯(blue_bg_2)側で持たせ、本文下のクリーム余白は出さない（パンくず手前まで青）。 */
.breakfast-lp.single-main > .wp-block-post-content {
	padding-bottom: 0;
}

/* ============ 区画フレーム（共通）============
   各 lp-area を幅 1000px に収め、内側に 880px の二重罫線フレームを敷く。 */
/* .alignfull を含めて親テーマの全幅キャップ（1256px）より高い詳細度で 1000px に収める。 */
.breakfast-lp .breakfast-card.lp-area.alignfull {
	position: relative;
	max-width: 1000px;
	width: 100%;
	margin: 0 auto 70px;
	/* 上下=見出し上(50)/本文下(56)。左右=9.5% を全幅で確保し、本文を常にフレーム(88%相当)の内側に
	   収める（タブレット幅でも 810px 固定の本文が枠からはみ出さないように）。 */
	padding: 50px 9.5% 56px;
	box-sizing: border-box;
}
/* 880px 二重罫線フレーム（背景塗りはクリーム、店舗系はティール）。 */
.breakfast-lp .breakfast-card.lp-area::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 880px;
	max-width: 90%;
	height: 100%;
	border: var(--bf-line);
	background-color: var(--bf-cream);
	z-index: 0;
}
/* 見出し・本文はフレームより前面。 */
.breakfast-lp .breakfast-card.lp-area > * {
	position: relative;
	z-index: 1;
}

/* ============ 区画見出し（title_bg ＋ アイコン ＋ 下線）============
   親テーマ lp.css の「連続エリア区切り」 .single-main .lp-area + .lp-area > h2:first-child
   （mt56/pt56＋::before 罫線。詳細度 0,5,1〜0,5,2）に勝つよう、当 LP の見出しは
   .single-main 接頭辞＋.alignfull 接尾辞（0,6,1〜0,7,2）で上書きする。各区画は独立フレームなので
   区切り線・上余白は出さず、上余白は区画(lp-area)の padding-top(30px) のみが持つ。 */
.breakfast-lp.single-main .breakfast-card.lp-area > h2.wp-block-heading.alignfull {
	position: relative;
	z-index: 1;
	/* 幅は最大364px・コンテナ内に収める（親テーマの 1256px キャップを上書き）。 */
	width: min(364px, 100%);
	max-width: 100% !important;
	margin: 0 auto 60px;
	padding: 0 0 12px;
	border: 0;
	text-align: center;
	/* 画面幅に応じて縮小（固定25pxにしない）。 */
	font-size: clamp(17px, 2.4vw, 25px);
	font-weight: 700;
	line-height: 1.6;
	background-image: url("../images/breakfast/title_area_line.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: auto 6px;
	overflow-wrap: anywhere;
}
/* 見出し上のアイコン画像。親の区切り線 ::before（position:absolute＋罫線）を打ち消して通常フローの
   ブロックにし、見出しテキストの上に積む（個別画像・サイズは区画別ルールで指定）。 */
.breakfast-lp.single-main .breakfast-card.lp-area > h2.wp-block-heading.alignfull::before {
	content: "";
	position: static;
	inset: auto;
	transform: none;
	display: block;
	margin: 0 auto 8px;
	border: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
/* アイコンを持たない区画（プラン・ギャラリー・店舗情報）は ::before を出さない。 */
.breakfast-lp.single-main .breakfast-card:is(.breakfast-plan, .breakfast-gallery, .breakfast-shop) > h2.wp-block-heading.alignfull::before {
	display: none;
}
/* 見出し背後の淡い title_bg（区画 lp-area の ::before）。親の区切りとは別要素で競合しない。 */
.breakfast-lp .breakfast-card.lp-area::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
	pointer-events: none;
}

/* --- 区画別 title_bg（lp-area::before）＋ アイコン（h2::before・0,7,2 で親罫線に勝つ） --- */
.breakfast-lp .breakfast-popular::before {
	top: 40px;
	width: 1000px;
	max-width: 100%;
	height: 166px;
	background-image: url("../images/breakfast/popular_title_bg.png");
}
.breakfast-lp.single-main .breakfast-card.breakfast-popular > h2.wp-block-heading.alignfull::before {
	width: 76px;
	height: 69px;
	background-image: url("../images/breakfast/popular_title.png");
}
.breakfast-lp .breakfast-recommend::before {
	top: 30px;
	width: 940px;
	max-width: 100%;
	height: 233px;
	background-image: url("../images/breakfast/recommend_title_bg.png");
}
.breakfast-lp.single-main .breakfast-card.breakfast-recommend > h2.wp-block-heading.alignfull::before {
	width: 111px;
	height: 60px;
	background-image: url("../images/breakfast/recommend_title.png");
}
.breakfast-lp .breakfast-cuisine::before {
	top: 40px;
	width: 1000px;
	max-width: 100%;
	height: 166px;
	background-image: url("../images/breakfast/popular_title_bg.png");
}
.breakfast-lp.single-main .breakfast-card.breakfast-cuisine > h2.wp-block-heading.alignfull::before {
	width: 70px;
	height: 56px;
	background-image: url("../images/breakfast/cuisine_title.png");
}
.breakfast-lp .breakfast-terrace::before {
	top: 80px;
	width: 940px;
	max-width: 100%;
	height: 108px;
	background-image: url("../images/breakfast/terrace_title_bg.png");
}
.breakfast-lp.single-main .breakfast-card.breakfast-terrace > h2.wp-block-heading.alignfull::before {
	width: 60px;
	height: 71px;
	background-image: url("../images/breakfast/terrace_title.png");
}
/* plan / gallery の title_bg は無し。 */
.breakfast-lp .breakfast-plan::before,
.breakfast-lp .breakfast-gallery::before {
	display: none;
}

/* ============ 店舗系（ティールフレーム・白文字）============ */
.breakfast-lp .breakfast-shop.lp-area::after,
.breakfast-lp .breakfast-feature.lp-area::after {
	background-color: var(--bf-teal);
}
.breakfast-lp .breakfast-shop :is(h2, h3, p, li, dt, dd),
.breakfast-lp .breakfast-feature :is(h2, h3, p, li) {
	color: #fff;
}
/* 白い下線・白文字（0,6,1 でクリーム区画の下線より後勝ち）。 */
.breakfast-lp.single-main .breakfast-card:is(.breakfast-shop, .breakfast-feature) > h2.wp-block-heading.alignfull {
	color: #fff;
	background-image: url("../images/breakfast/title_area_line_w.png");
}
.breakfast-lp .breakfast-shop::before {
	top: -5px;
	width: 940px;
	max-width: 100%;
	height: 108px;
	background-image: url("../images/breakfast/shop_title_bg.png");
}
.breakfast-lp .breakfast-feature::before {
	top: -10px;
	width: 940px;
	max-width: 100%;
	height: 114px;
	background-image: url("../images/breakfast/feature_title_bg.png");
}
.breakfast-lp.single-main .breakfast-card.breakfast-feature > h2.wp-block-heading.alignfull::before {
	width: 67px;
	height: 65px;
	background-image: url("../images/breakfast/feature_title.png");
}

/* ============ 本文の内側幅（810px 中央）============ */
.breakfast-lp .breakfast-card .lp-area__body {
	max-width: 810px;
	margin: 0 auto;
}
/* 店舗情報・特徴は「表→見出し→リスト」の縦積み。これらの中身は .lp-section カードではなく
   素のブロック（table/h3/ul）なので、template_1 の flex（2カラムカード）を解除して縦に並べる。 */
.breakfast-lp :is(.breakfast-shop, .breakfast-feature) .lp-sections {
	display: block;
}

/* ============ 人気アイテム／各種お料理：画像＋テキストの左右ペア ============ */
.breakfast-lp :is(.breakfast-popular, .breakfast-cuisine) .lp-sections {
	display: block;
	margin: 0;
}
.breakfast-lp :is(.breakfast-popular, .breakfast-cuisine) .lp-section--media {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 810px;
	margin: 0 auto;
	/* 区切り罫線の上下余白を揃える（pb と次行の pt を同程度に）。 */
	padding: 0 0 30px;
}
.breakfast-lp :is(.breakfast-popular, .breakfast-cuisine) .lp-section--media + .lp-section--media {
	border-top: var(--bf-line);
	padding-top: 30px;
}
/* 最後のボックスはフレームの padding-bottom が下余白を持つので、box 側の下余白は付けない（二重化防止）。 */
.breakfast-lp :is(.breakfast-popular, .breakfast-cuisine) .lp-section--media:last-child {
	padding-bottom: 0;
}
.breakfast-lp :is(.breakfast-popular, .breakfast-cuisine) .lp-section--media > :first-child {
	margin: 0;
}
.breakfast-lp :is(.breakfast-popular, .breakfast-cuisine) .lp-section__text h3 {
	margin: 0;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
}
.breakfast-lp :is(.breakfast-popular, .breakfast-cuisine) .lp-section__text p {
	font-size: 14px;
	line-height: 1.8;
}
/* 人気: 画像 50% / 本文 50%。既定は画像左（row）、2 番目（偶数）を左右反転。
   親テーマ lp.css の is-template-3 ルール（既定 odd 反転）より高い詳細度で上書きする。 */
.breakfast-lp .breakfast-popular .lp-sections.is-template-3 .lp-section--media {
	flex-direction: row;
}
.breakfast-lp .breakfast-popular .lp-sections.is-template-3 .lp-section--media:nth-child(even) {
	flex-direction: row-reverse;
}
.breakfast-lp .breakfast-popular .lp-sections.is-template-3 .lp-section--media > :first-child {
	flex: 0 0 50%;
	width: 50%;
}
.breakfast-lp .breakfast-popular .lp-sections.is-template-3 .lp-section__text {
	flex: 1 1 0;
	width: 50%;
}
/* 各種お料理: 画像を少し大きく（48%）。本文は残り。左右間隔はテンプレートの flex gap が持つ
   （固定 px の左右パディングは付けない）。 */
.breakfast-lp .breakfast-cuisine .lp-sections.is-template-3 .lp-section--media > :first-child {
	flex: 0 0 48%;
	width: 48%;
}
.breakfast-lp .breakfast-cuisine .lp-sections.is-template-3 .lp-section__text {
	flex: 1 1 0;
	width: 52%;
}

/* ============ おすすめの沖縄料理：メイン画像＋3列グリッド ============
   メイン画像の下余白は core のスペーシング属性（ブロック側 style.spacing）で持たせる。 */
.breakfast-lp .breakfast-recommend .lp-area__body > .wp-block-image img {
	width: 100%;
	height: auto;
}
.breakfast-lp .breakfast-recommend .lp-sections.is-template-2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/* 行間(y)・列間(x)はグリッドの gap で持たせる（各カードに上下padは付けない）。 */
	gap: 40px 60px;
	max-width: 810px;
	margin: 0 auto;
}
.breakfast-lp .breakfast-recommend .lp-sections.is-template-2 .lp-section {
	position: relative;
	/* 3列。固定230pxではなく列gap(60px×2)を引いた残りを3等分し、タブレット幅でも収まるよう可変に。 */
	flex: 0 0 calc((100% - 120px) / 3);
	max-width: calc((100% - 120px) / 3);
	padding: 0;
	box-sizing: border-box;
}
/* 列の間に縦罫線（3 列目を除く）。gap の中央に置く。 */
.breakfast-lp .breakfast-recommend .lp-section:not(:nth-child(3n))::after {
	content: "";
	position: absolute;
	top: 0;
	left: calc(100% + 30px);
	width: 1px;
	height: 100%;
	background-color: var(--bf-brown);
}
.breakfast-lp .breakfast-recommend .lp-section--media {
	display: block;
}
/* 画像の下に余白（メニュー名が画像にくっつかないように）。親テーマ lp.css の
   .lp-sections.is-template-2 .lp-section > .wp-block-image{margin:0}（0,4,0）に勝つ詳細度で上書き。 */
.breakfast-lp .breakfast-recommend .lp-sections.is-template-2 .lp-section--media > :first-child {
	margin: 0 0 16px;
	text-align: center;
}
.breakfast-lp .breakfast-recommend .lp-section--media > :first-child img {
	width: 100%;
	height: auto;
}
.breakfast-lp .breakfast-recommend .lp-section__text {
	width: auto;
	padding: 0;
}
.breakfast-lp .breakfast-recommend .lp-section__text h3 {
	margin: 0 0 10px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
}
.breakfast-lp .breakfast-recommend .lp-section__text p {
	font-size: 14px;
	line-height: 1.3;
}

/* ============ テラス席：スライダー＋キャプション ============ */
.breakfast-lp .breakfast-terrace .lp-area__body > * {
	max-width: 810px;
	margin-left: auto;
	margin-right: auto;
}
.breakfast-lp .breakfast-terrace .lp-area__body p {
	/* 左右・下の固定px余白は付けない（幅は本文コンテナ 810、左右はフレーム padding が持つ）。
	   スライダーとの間に上余白を取る。 */
	margin-top: 32px;
	padding: 0;
	font-size: 14px;
	line-height: 1.8;
	text-align: left;
}

/* ============ プラン／ギャラリー：グラデーション CTA バー ============ */
.breakfast-lp :is(.breakfast-plan, .breakfast-gallery) .lp-area__body {
	max-width: 810px;
}
.breakfast-lp .breakfast-plan .wp-block-image {
	width: 500px;
	max-width: 80%;
	margin: 0 auto 20px;
}
.breakfast-lp .breakfast-plan .wp-block-image img {
	width: 100%;
	height: auto;
}
.breakfast-lp :is(.breakfast-plan, .breakfast-gallery) .wp-block-buttons {
	display: block;
	margin: 0 auto;
}
.breakfast-lp :is(.breakfast-plan, .breakfast-gallery) .wp-block-button {
	display: block;
	width: 100%;
}
.breakfast-lp :is(.breakfast-plan, .breakfast-gallery) .wp-block-button__link {
	display: block;
	width: 100%;
	padding: 15px 0 10px;
	border-radius: 0;
	background: linear-gradient(90deg, rgba(255, 190, 126, 1) 0%, rgba(245, 87, 79, 1) 100%);
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	line-height: 1.5;
}
.breakfast-lp :is(.breakfast-plan, .breakfast-gallery) .wp-block-button__link:hover {
	opacity: 0.7;
}

/* ============ 店舗情報：dl 風の表（コーラル見出し列／白値列）============ */
.breakfast-lp .breakfast-shop .breakfast-shop-info {
	max-width: 810px;
	margin: 0 auto;
}
.breakfast-lp .breakfast-shop .breakfast-shop-info table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 3px;
	/* 親テーマ .wp-block-table table の上罫線を当区画では消す。 */
	border: 0;
}
.breakfast-lp .breakfast-shop .breakfast-shop-info td {
	border: 0;
	padding: 15px;
	font-size: 14px;
}
.breakfast-lp .breakfast-shop .breakfast-shop-info td:first-child {
	width: 250px;
	background-color: var(--bf-coral);
	color: var(--bf-brown);
	text-align: center;
	vertical-align: middle;
}
.breakfast-lp .breakfast-shop .breakfast-shop-info td:last-child {
	background-color: #fff;
	color: var(--bf-brown);
}

/* ============ 店舗の特徴：白い箇条書き ============ */
.breakfast-lp .breakfast-feature ul.wp-block-list {
	max-width: 810px;
	margin: 0 auto;
	padding-left: 30px;
	font-size: 14px;
	font-weight: 700;
}
.breakfast-lp .breakfast-feature ul.wp-block-list li {
	margin: 0;
	list-style: disc outside none;
}

/* ============ スライダー（共通の体裁）============ */
.breakfast-lp .breakfast-card .wp-block-gallery {
	width: 100%;
	margin: 0;
}

/* =========================================================================
   おすすめ: タブレット幅は 2 列（3 列だと各カードが窮屈になるため、1 列化の前に
   2 列を挟む）。列 gap は 60px のまま、(100% - 60px)/2 で 2 等分する。
   下限は縦積みブレークポイント(781px)に合わせ、782px 以上で 2 列にする。
   ========================================================================= */
@media (min-width: 782px) and (max-width: 960px) {
	.breakfast-lp .breakfast-recommend .lp-sections.is-template-2 .lp-section {
		flex: 0 0 calc((100% - 60px) / 2);
		max-width: calc((100% - 60px) / 2);
	}
	/* 3 列前提の縦罫線を解除し、2 列の右端（偶数番目）以外に縦罫線を引き直す。 */
	.breakfast-lp .breakfast-recommend .lp-section:not(:nth-child(3n))::after {
		display: none;
	}
	.breakfast-lp .breakfast-recommend .lp-section:not(:nth-child(2n))::after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: calc(100% + 30px);
		width: 1px;
		height: 100%;
		background-color: var(--bf-brown);
	}
	/* 奇数個のとき最終行に 1 枚だけ残る末尾カードは右隣が無いので縦罫線を出さない。 */
	.breakfast-lp .breakfast-recommend .lp-section:last-child::after {
		display: none;
	}
}

/* =========================================================================
   レスポンシブ（縦積みは親テーマ lp.css の is-template-3 と同じ 781px で切替え、
   769〜781px の隙間でスライダーが左寄せになる不整合を解消する）
   ========================================================================= */
@media (max-width: 781px) {
	.breakfast-lp .chatan-kv__inner {
		width: 60%;
		max-width: 60%;
		padding: 10% 0;
	}
	.breakfast-lp .chatan-kv__caption {
		padding: 40px 10%;
	}

	/* ナビ: nav_bg_sp の上にダイヤ配置（4 点）。 */
	.breakfast-lp .breakfast-nav {
		background-image: url("../images/breakfast/nav_bg_sp.png");
		background-size: contain;
	}
	.breakfast-lp .breakfast-nav__list {
		display: block;
		position: relative;
		height: 90vw;
		width: 95%;
		margin: 0 auto;
	}
	.breakfast-lp .breakfast-nav__list > li {
		position: absolute;
		width: 46%;
		margin: 0;
	}
	.breakfast-lp .breakfast-nav__list > li:nth-child(1) {
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.breakfast-lp .breakfast-nav__list > li:nth-child(2) {
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	.breakfast-lp .breakfast-nav__list > li:nth-child(3) {
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
	.breakfast-lp .breakfast-nav__list > li:nth-child(4) {
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	/* 導入: 装飾画像を縮小配置。見出し・リードが装飾画像と重ならないよう上余白と左右余白を確保。 */
	.breakfast-lp .breakfast-intro {
		padding: 132px 0 50px;
		background-position:
			left 0 top 10vw,
			center 10vw,
			right 6px top 24vw;
		background-size: 26% auto, 19% auto, 30% auto;
	}
	.breakfast-lp .breakfast-intro__title {
		font-size: 4.6vw;
		padding: 0 24px;
	}
	.breakfast-lp .breakfast-intro__lead {
		padding: 0 24px;
	}

	/* 店舗系の背景パターンはスマホ用画像に差し替え（狭幅で装飾が見えるように）。 */
	.breakfast-lp .breakfast-blue-bg-2 {
		background-image: url("../images/breakfast/blue_bg_2_sp.png");
	}

	/* フレームは幅 90%。本文は lp-area の左右パディング(9%)でフレーム内側に収め、枠からはみ出さない。
	   個別要素の左右パディングは付けず、この 1 か所で内側余白を管理する。 */
	.breakfast-lp .breakfast-card.lp-area.alignfull {
		padding: 36px 9% 40px;
	}
	.breakfast-lp .breakfast-card.lp-area::after {
		width: 90%;
		max-width: 90%;
	}
	/* 見出しサイズ・幅は基本ルール（clamp/min）で全幅対応済み。背後の装飾(title_bg)だけ
	   フレーム内側に収め、横にはみ出さないようにする。 */
	.breakfast-lp .breakfast-card.lp-area::before {
		max-width: 84%;
	}

	/* 左右ペアは縦積み（左右余白は lp-area パディングが持つ）。カード幅は奇数・偶数とも
	   480px に揃えて中央寄せする。親 lp.css の汎用 .lp-section--media(0,3,0) は子の基本
	   max-width:810px(0,3,0・後勝ち)に負け、:nth-child(odd)(0,4,0) だけが 480px になるため、
	   ここで全 media に 480px を当てて偶数も揃える。 */
	.breakfast-lp :is(.breakfast-popular, .breakfast-cuisine) .lp-sections.is-template-3 .lp-section--media {
		display: block;
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
		padding: 0 0 28px;
	}
	/* 区切り罫線の直後（2番目以降のボックス）は上余白を取り、画像が罫線にくっつかないように。 */
	.breakfast-lp :is(.breakfast-popular, .breakfast-cuisine) .lp-sections.is-template-3 .lp-section--media + .lp-section--media {
		padding-top: 28px;
	}
	.breakfast-lp :is(.breakfast-popular, .breakfast-cuisine) .lp-sections.is-template-3 .lp-section--media > :first-child {
		width: 100%;
		max-width: 480px;
		margin: 0 auto 12px;
	}
	.breakfast-lp :is(.breakfast-popular, .breakfast-cuisine) .lp-sections.is-template-3 .lp-section__text {
		width: 100%;
	}

	/* おすすめ: 1 列・縦罫線なし。カードは中央寄せで最大 400px。 */
	.breakfast-lp .breakfast-recommend .lp-sections.is-template-2 {
		display: block;
		max-width: none;
	}
	.breakfast-lp .breakfast-recommend .lp-sections.is-template-2 .lp-section {
		flex: none;
		width: 100%;
		max-width: 400px;
		margin: 0 auto 24px;
		padding: 0;
	}
	.breakfast-lp .breakfast-recommend .lp-section:not(:nth-child(3n))::after {
		display: none;
	}

	.breakfast-lp .breakfast-terrace .lp-area__body p {
		padding: 0;
	}

	/* 店舗情報: スマホは縦積み（ラベル＝コーラル → 値＝白 を縦に）。背景のティール＋装飾はそのまま。 */
	.breakfast-lp .breakfast-shop .breakfast-shop-info table,
	.breakfast-lp .breakfast-shop .breakfast-shop-info tbody,
	.breakfast-lp .breakfast-shop .breakfast-shop-info tr,
	.breakfast-lp .breakfast-shop .breakfast-shop-info td {
		display: block;
		width: auto;
	}
	.breakfast-lp .breakfast-shop .breakfast-shop-info tr {
		margin-bottom: 8px;
	}
	.breakfast-lp .breakfast-shop .breakfast-shop-info td {
		padding: 10px 14px;
		word-break: break-word;
	}
	.breakfast-lp .breakfast-shop .breakfast-shop-info td:first-child {
		width: auto;
	}
	/* 縦積み時は行間の境界線を消す（行は margin で分ける）。 */
	.breakfast-lp .breakfast-shop .breakfast-shop-info tr:not(:last-child) td {
		border-bottom: 0;
	}
}