/* =========================================================================
   ダブルツリー by ヒルトン沖縄北谷リゾート｜朝食ビュッフェ特設ページ
   （restaurant CPT・slug=breakfast）専用スタイル。
   - テンプレート: single-restaurant-breakfast.html（.breakfast-lp スコープ）
   - 特設デザイン（地色・背景画像・セクションカード・緑/橙の交互パネル等）。
   - 区画レイアウト（lp-area / lp-section / スライダー / keyvalue 表）は親テーマの lp.css・blocks.css に委ね、
     ここでは地色・背景画像・配色・カード化など当 LP 固有の体裁を上書きする。
   - すべて .breakfast-lp 配下にスコープし他ページへ影響させない。

   配色: 地 #F6EEE3（クリーム）／文字 #09194E（ネイビー）／パネル 緑 #A3CD39・橙 #F4AC45。
   ========================================================================= */

/* ============ ページ地（地色＋背景画像・固定）============ */
.breakfast-lp {
	background-color: #F6EEE3;
	background-image: url(../images/breakfast/bg_main.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	color: #09194E;
	/* 全幅 KV やカードのビューポート中央寄せ（left:50%+transform）で出る横はみ出しを抑え、横スクロールを
	   出さない。パララックス（sticky）は廃止したので clip が固定配置を壊す心配はない。 */
	overflow-x: clip;
}
/* 本文テキストはネイビーに統一（見出し・段落・リスト）。 */
.breakfast-lp .lp-area :is(h1, h2, h3, h4, p, li) {
	color: #09194E;
}
/* タイトル類はブランドのサンセリフ（brand-body）に。既定の見出しはセリフ(brand-heading)のため上書き。 */
.breakfast-lp .wp-block-heading,
.breakfast-lp .breakfast-intro__title {
	font-family: var(--wp--custom--brand-body);
}

/* ============ KV（親 hilton-kv 構造を流用・ぼかし無しオプション）============
   100vw 全幅・kv-main 中央 contain（最大1320中央寄せ）は親 lp.css（.hilton-kv 系）が担う。これにより
   画像の位置・サイズはぼかし有り版と完全に同一。ぼかし無し版（hilton-kv--no-blur）は kv-bg を出さず、
   .hilton-kv の地を透明にして、左右および画像下端の透過部分からページ地のクリームを見せる。 */
.breakfast-lp .hilton-kv.breakfast-kv {
	margin-bottom: 0;
}
.breakfast-lp .hilton-kv--no-blur {
	background: transparent;
}
.breakfast-lp .hilton-kv--no-blur .kv-bg {
	display: none;
}

/* ============ 画像ナビ（ページ内リンク）============
   コンテナ約950・アイコン約200・両端を少し上げる段差・影付き。KV の下端カーブに
   上へ重ねる（位置を上げる）。 */
.breakfast-lp .breakfast-nav {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 950px;
	margin: clamp(-120px, -9vw, -72px) auto 0;
	padding: 0 16px;
	box-sizing: border-box;
}
.breakfast-lp .breakfast-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(16px, 4vw, 60px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.breakfast-lp .breakfast-nav__list > li {
	margin: 0;
	flex: 0 1 200px;
	max-width: 200px;
}
/* 両端のアイコンを少し上げて段差を付ける（上げ量は控えめ）。 */
.breakfast-lp .breakfast-nav__list > li:first-child,
.breakfast-lp .breakfast-nav__list > li:last-child {
	transform: translateY(clamp(-18px, -1.3vw, -8px));
}
.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));
}
@media (max-width: 600px) {
	.breakfast-lp .breakfast-nav {
		margin-top: clamp(-72px, -14vw, -40px);
	}
	.breakfast-lp .breakfast-nav__list {
		gap: 16px;
	}
	.breakfast-lp .breakfast-nav__list > li {
		flex: 0 1 45%;
		max-width: 45%;
	}
	/* 狭幅では段差をなくす。 */
	.breakfast-lp .breakfast-nav__list > li:first-child,
	.breakfast-lp .breakfast-nav__list > li:last-child {
		transform: none;
	}
}

/* ============ 導入（白の角丸ボックス＋背景画像）============
   下のセクションカードと同じ幅（1040・ビューポート中央寄せ）に揃える。下端に intro_sec_bg を敷く。
   見出し・リードは中央。 */
.breakfast-lp .breakfast-intro {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: min(1040px, calc(100vw - 32px));
	max-width: none;
	margin-top: clamp(24px, 4vw, 48px);
	margin-bottom: clamp(24px, 4vw, 48px);
	background-color: #fff;
	background-image: url(../images/breakfast/intro_sec_bg.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 20px;
	/* 影は下のセクションカードと同じ。 */
	box-shadow: 0 3px 6px rgba(9, 25, 78, 0.35);
	/* テキストを上下中央に。上下パディングを対称にし、縦方向も中央寄せ。 */
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(220px, 26vw, 340px);
	padding: clamp(40px, 6vw, 80px) clamp(16px, 3vw, 40px);
	box-sizing: border-box;
}
.breakfast-lp .breakfast-intro__title,
.breakfast-lp .breakfast-intro__lead {
	text-align: center;
}
.breakfast-lp .breakfast-intro__title.wp-block-heading {
	font-size: clamp(24px, 3.1vw, 34px);
	font-weight: 700;
	margin: 0 0 clamp(16px, 2vw, 24px);
}
.breakfast-lp .breakfast-intro__lead {
	line-height: 1.9;
	font-weight: 600;
	margin: 0;
}
/* カードの見出しは区切り上罫線（::before）を出さない。連続エリア間の 100vw 区切り線・全幅ラインを抑制。
   親 lp.css の `.single-main .lp-area + .lp-area > h2:first-child::before` 等に勝つよう詳細度を上げる。 */
.breakfast-lp.single-main .breakfast-card.lp-area > h2.wp-block-heading::before,
.breakfast-lp.single-main .breakfast-card.lp-area > .acf-innerblocks-container > h2.wp-block-heading::before {
	display: none;
	content: none;
}

/* ============ セクション＝白い角丸カード＋上の丸アイコン ============
   白・最大1000・角丸20・ネイビー影。タイトル上にセクションアイコン（200px）。
   alignfull のキャップ（max-width:1256）には width で勝つ（max-width を上書きせず幅を絞って中央寄せ）。 */
/* 親の投稿本文（constrained・幅760）より広いカード幅にするため、ビューポート中央寄せで取り出す
   （左端を親中央に置き transform で半幅戻す＝親幅に依存せずビューポート中央に最大1040で配置）。 */
.breakfast-lp .breakfast-card.lp-area {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: min(1040px, calc(100vw - 32px));
	max-width: none;
	margin-top: clamp(80px, 9vw, 120px);
	margin-bottom: clamp(24px, 4vw, 48px);
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 0 3px 6px rgba(9, 25, 78, 0.35);
	padding: clamp(40px, 5vw, 64px) clamp(16px, 3vw, 40px) clamp(28px, 4vw, 40px);
	box-sizing: border-box;
}
/* セクション見出し（ネイビー・中央）。連続エリアの区切り mt/pt(56+56) は出さず、下の本文との間隔は
   この padding-bottom 1つだけにする（lp-area__body の mt は下で 0 に上書き）。詳細度を上げて親に勝つ。 */
.breakfast-lp.single-main .breakfast-card.lp-area > h2.wp-block-heading,
.breakfast-lp.single-main .breakfast-card.lp-area > .acf-innerblocks-container > h2.wp-block-heading {
	margin: 0;
	padding: 0 0 clamp(20px, 2.5vw, 32px);
	border: 0;
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: 700;
	text-align: center;
}
/* カード内：エリア本文の上マージン（h2 下と二重になる分）を消す。
   ※ ボックス内の先頭 mt / 末尾 mb のリセットは親 blocks.css の共通ルールに集約（重複させない）。 */
.breakfast-lp .breakfast-card .lp-area__body {
	margin-block-start: 0;
}
/* タイトル上の丸アイコン（背景画像）。 */
.breakfast-lp .breakfast-card.lp-area::before {
	content: "";
	position: absolute;
	top: clamp(-66px, -6vw, -48px);
	left: 50%;
	transform: translateX(-50%);
	width: clamp(96px, 12vw, 136px);
	aspect-ratio: 1;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.breakfast-lp .breakfast-popular::before { background-image: url(../images/breakfast/popular_icon.png); }
.breakfast-lp .breakfast-cuisine::before { background-image: url(../images/breakfast/cuisine_icon.png); }
.breakfast-lp .breakfast-ocean::before { background-image: url(../images/breakfast/ocean_icon.png); }
.breakfast-lp .breakfast-plan::before { background-image: url(../images/breakfast/plan_icon.png); }
.breakfast-lp .breakfast-shop::before { background-image: url(../images/breakfast/shop_icon.png); }

/* ============ 人気アイテム／各種お食事コーナー：緑・橙の交互テキストパネル ============
   is-template-3（画像＋テキストの左右ペア）の __text を緑／橙で交互に塗り、box_txt_bg を右下に敷く。
   文字はネイビー、見出しは中央。 */
/* 画像とテキストパネルは隙間なく左右をくっつける。 */
.breakfast-lp .lp-sections.is-template-3 .lp-section--media {
	gap: 0;
}
.breakfast-lp :is(.breakfast-popular, .breakfast-cuisine) .lp-section__text {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(20px, 3vw, 32px);
	background-color: #A3CD39;
	background-image: url(../images/breakfast/box_txt_bg.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 30%;
}
.breakfast-lp :is(.breakfast-popular, .breakfast-cuisine) .lp-sections .lp-section:nth-child(even) .lp-section__text {
	background-color: #F4AC45;
}
.breakfast-lp :is(.breakfast-popular, .breakfast-cuisine) .lp-section__head h3 {
	text-align: center;
	margin-top: 0;
}
.breakfast-lp :is(.breakfast-popular, .breakfast-cuisine) .lp-section__text :is(h3, p) {
	color: #09194E;
}

/* 海が目の前／朝食付き宿泊プランの中身は本文幅 760 で中央寄せ（店舗情報のリスト等と同じ幅に揃える）。 */
.breakfast-lp :is(.breakfast-ocean, .breakfast-plan) .acf-innerblocks-container > * {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* ============ 朝食付き宿泊プラン：ネイビーの角丸 CTA（矢印付き）============
   ネイビー地・白文字・角丸30・右に矢印を core/button で表現。左右に余白を確保。 */
.breakfast-lp .breakfast-plan .wp-block-button__link {
	background-color: #09194E;
	color: #fff;
	font-weight: 700;
	border-radius: 30px;
	padding: 16px 56px 16px 40px;
	background-image: url(../images/breakfast/to_link_arrow.png);
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 16px;
}
.breakfast-lp .breakfast-plan .wp-block-button__link:hover {
	opacity: 0.85;
}

/* ============ 店舗情報：緑のカード＋背景画像、表はネイビー見出し／白セル ============ */
.breakfast-lp .breakfast-shop.lp-area {
	background-color: #A3CD39;
	background-image: url(../images/breakfast/shop_sec_bg.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100%;
}
/* 店舗情報は「表→見出し→リスト」の縦積み。中身は .lp-section カードではなく素のブロック
   （table/h3/ul）なので、template_1 の flex（2カラムカード）を解除して縦に並べる。 */
.breakfast-lp .breakfast-shop .lp-sections {
	display: block;
}
.breakfast-lp .breakfast-shop :is(h2, h3, li) {
	color: #09194E;
}
.breakfast-lp .breakfast-shop h3.wp-block-heading {
	text-align: center;
	font-size: clamp(22px, 3vw, 34px);
	font-weight: 700;
	margin: clamp(20px, 3vw, 40px) 0 clamp(16px, 2vw, 28px);
}
/* keyvalue 表：先頭列＝ネイビー地・白文字、値列＝白地・ネイビー文字。 */
.breakfast-lp .breakfast-shop .wp-block-table.breakfast-shop-info {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
.breakfast-lp .breakfast-shop .breakfast-shop-info table {
	border-collapse: separate;
	border-spacing: 0;
}
.breakfast-lp .breakfast-shop .breakfast-shop-info td {
	border: 0;
	padding: 14px 16px;
	color: #09194E;
	background-color: #fff;
}
.breakfast-lp .breakfast-shop .breakfast-shop-info td:first-child {
	width: 38%;
	background-color: #09194E;
	color: #fff;
	font-weight: 700;
	text-align: center;
}
.breakfast-lp .breakfast-shop .breakfast-shop-info tr:not(:last-child) td {
	border-bottom: 2px solid #A3CD39;
}
.breakfast-lp .breakfast-shop .breakfast-shop-info tr:first-child td:first-child { border-top-left-radius: 16px; }
.breakfast-lp .breakfast-shop .breakfast-shop-info tr:first-child td:last-child { border-top-right-radius: 16px; }
.breakfast-lp .breakfast-shop .breakfast-shop-info tr:last-child td:first-child { border-bottom-left-radius: 16px; }
.breakfast-lp .breakfast-shop .breakfast-shop-info tr:last-child td:last-child { border-bottom-right-radius: 16px; }
/* 店舗の特徴リストはディスク・ネイビー。 */
.breakfast-lp .breakfast-shop ul.wp-block-list {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.2em;
	list-style: disc;
}

/* ============ レスポンシブ（カード・パネルの1カラム化）============ */
@media (max-width: 781px) {
	.breakfast-lp :is(.breakfast-popular, .breakfast-cuisine) .lp-section__text {
		background-size: 36%;
	}
	.breakfast-lp .breakfast-shop .breakfast-shop-info td:first-child {
		width: 34%;
	}
}