/* =========================================================================
   ヒルトン名古屋｜朝食ビュッフェ特設ページ（restaurant CPT・slug=breakfast）専用スタイル
   - テンプレート: single-restaurant-breakfast.html（.breakfast-lp スコープ）
   - KV は親テーマの hilton-kv をそのまま流用（100vw 全幅・kv-bg ぼかし・kv-main 中央 contain）。
     ここでは中央タイトル画像の重ねと、ページ内リンク・導入の装飾のみを追加する。
   - すべて .breakfast-lp 配下にスコープし他ページへ影響させない。
   ========================================================================= */

/* 地色（ページ全体）。 */
.breakfast-lp {
	background: #FFE554;
}
/* KV を main の constrained ガターより前に 100vw 全幅化する（親 .single-main > .hilton-kv と同じ）。
   親の margin-bottom:56px は打ち消す。直後のページ内リンクを画像の半分だけ KV に被せるため、
   KV と nav の間に隙間を作らない（被せ量は nav 側の負マージンで厳密に制御する）。 */
.breakfast-lp > .hilton-kv {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 0;
}

/* ============ KV 中央タイトル画像（top_title）============
   KV 本体（背景ぼかし・実画像中央）は親の .hilton-kv が担う。ここは kv-main に重ねる
   タイトル画像の位置・サイズだけ。kv-main は max-width:1320 中央なので、その中で中央に置く。 */
.breakfast-lp .hilton-kv .kv-main {
	position: relative;
}
.breakfast-lp .hilton-kv .breakfast-kv-title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(34%, 420px);
	height: auto;
	margin: 0;
	z-index: 2;
}

/* ============ ページ内リンク（画像ナビ・PC4列／SP2列）============
   列数は 4 か 2 のみ（grid 固定）で 3 列に折り返さない。各タイルは最大 180px に抑えて中央寄せ。
   画像は 480x480 の正方なので、4 列時だけ「画像の半分（＝タイル高さの 1/2）」を KV に被せるよう
   負マージンで持ち上げる。タイル幅 = min(180, (nav 内容幅 - 3*gap)/4)、
   nav 内容幅 = min(1224, 100vw - 96)（96 = main の padding-inline 32*2 + nav の padding 16*2）。 */
.breakfast-lp .breakfast-nav {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1256px;
	margin-left: auto;
	margin-right: auto;
	margin-top: calc(-0.5 * min(180px, (min(1224px, 100vw - 96px) - 48px) / 4));
	padding: 0 16px;
	box-sizing: border-box;
}
.breakfast-lp .breakfast-nav__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 180px));
	justify-content: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.breakfast-lp .breakfast-nav__list > li {
	margin: 0;
}
.breakfast-lp .breakfast-nav__list > li > a {
	display: block;
}
.breakfast-lp .breakfast-nav__list img {
	width: 100%;
	height: auto;
	display: block;
}

/* ============ 導入（h1＋リード）＝最初の lp-area（.breakfast-intro）============
   背景に intro_img_1（全体表示・中央）。装飾の吹き出し（intro_fukidashi）と右イラスト
   （intro_img_2）は breakfast.php が実 <img> として注入し、ここで絶対配置する。
   見出し・タイトル上文言・リードはゴシック（brand-ui / Noto Sans JP 系）、文字色は #333。 */
.breakfast-lp .breakfast-intro {
	position: relative;
}
/* この導入ブロックでは lp-area__body 既定の上マージン（margin-block-start）を使わない。 */
.breakfast-lp .breakfast-intro .lp-area__body {
	margin-block-start: 0;
}
/* テキストボックス（タイトル上文言＋h1＋リードを内包する group）。
   背景に地紋 intro_img_1 を全体表示し、文字の上下へ均等の余白を与える。 */
.breakfast-lp .breakfast-intro__textbox {
	position: relative;
	background: url(../images/breakfast/intro_img_1.png) no-repeat center center;
	/* 地紋は実画像(456x404)を上限に全体表示。contain は箱に収まるよう縮小はするが拡大はせず
	   （ここでは常に自然サイズ以下）、上下が切れない。スマホ（縦長ボックス）での過大化は @media で抑制。 */
	background-size: contain;
	padding-block: clamp(48px, 8vw, 96px); /* 文字の上下に均等の内側余白（py） */
	margin-block: clamp(40px, 6vw, 72px); /* ボックスの上下に均等の外側余白（my） */
}
.breakfast-lp .breakfast-intro > h2.wp-block-heading,
.breakfast-lp .breakfast-intro h1,
.breakfast-lp .breakfast-intro .breakfast-intro__eyebrow,
.breakfast-lp .breakfast-intro .lp-area__lead {
	font-family: var(--wp--custom--brand-ui, "Noto Sans JP", sans-serif);
}
/* 見出しブロック（タイトル上文言＋h1）は中央寄せ・最大 1080px（wide 相当）。 */
.breakfast-lp .breakfast-intro .breakfast-intro__head {
	position: relative;
	max-width: 1080px;
	margin-inline: auto;
	text-align: center;
}
.breakfast-lp .breakfast-intro__eyebrow {
	font-weight: 600;
	font-size: clamp(15px, 2vw, 18px);
	letter-spacing: 0.04em;
	margin: 0 0 12px;
	line-height: 1.6;
	color: #333;
}
/* h1（タイトル）も本文と同じ色。見出し既定のブランド色を打ち消す。 */
.breakfast-lp .breakfast-intro h1,
.breakfast-lp .breakfast-intro .wp-block-post-title {
	font-weight: 600;
	font-size: clamp(24px, 3.4vw, 34px);
	letter-spacing: 0.04em;
	line-height: 1.4;
	margin: 0;
	color: #333;
}
/* 吹き出し「Have a good day!」（304x159）＝H1 を起点に、その左上へ少しかぶせて配置。
   H1 はテキストボックス幅いっぱい（左端＝ボックス左）なので、ボックス左基準で少し外側・H1 の高さ
   あたりに置く。core/image ブロック（figure）を絶対配置。 */
.breakfast-lp .breakfast-intro__fukidashi {
	position: absolute;
	/* 下端を H1 の下端あたりに（高さ約131px、H1 下端は box から約184px）。 */
	top: clamp(28px, 6vw, 53px);
	/* 右端を H1「ヒルトン」の「ヒ」の右あたりに合わせる（テキストは box 中央寄せ＝50%基準）。
	   オフセットは見出しフォント clamp(24,3.4vw,34) と同率で増減させ、狭幅でも「ヒ」に追随する
	   （= テキスト幅/2 − 1文字幅 ≒ フォント×6.76）。画像は右端を起点に左へ広がる。 */
	right: calc(50% + clamp(162px, 23vw, 230px));
	width: clamp(160px, 20vw, 250px);
	margin: 0;
	z-index: 1;
	pointer-events: none;
}
/* 右イラスト（216x168）＝full(1256) 帯の右端（左右ガターを除いた content 右端）に右端を揃える。
   テキストボックスは constrained(760) 幅なので、(760 - 帯幅)/2 だけ右へ張り出させて右端を合わせる。
   帯幅 = min(1256, 100vw - 32)（狭幅では左右 16px のガターを残す）。幅を変えても右端基準で動かない。 */
.breakfast-lp .breakfast-intro__deco-right {
	position: absolute;
	/* 上下中央に配置。 */
	top: 50%;
	transform: translateY(-50%);
	/* 右端を full(1256) 帯の content 右端に合わせる。50% は実際の textbox 幅基準なので、760 固定で
	   生じる狭幅のズレが出ない。帯幅/2 = min(628, 50vw - 32)（左右ガター 32px）。狭幅では textbox に
	   一致して右端フラッシュ、広幅では帯右端まで張り出す。 */
	right: calc(50% - min(628px, 50vw - 32px));
	width: clamp(96px, 12vw, 160px);
	margin: 0;
	z-index: 1;
	pointer-events: none;
}
/* 装飾の core/image は figure 幅に合わせて中の img を 100% 表示（余白なし）。 */
.breakfast-lp .breakfast-intro__fukidashi img,
.breakfast-lp .breakfast-intro__deco-right img {
	display: block;
	width: 100%;
	height: auto;
}
/* リード文。中央寄せ・本文サイズ。<br> 改行は原文どおり保持し各行は折り返さない。
   lp.css の「.lp-area > p を 760 に絞る」ルールに勝つ詳細度で max-width を解除する。 */
.breakfast-lp .breakfast-intro .lp-area__body .lp-area__lead,
.breakfast-lp .breakfast-intro .lp-area__lead.wp-block-paragraph {
	max-width: none;
	width: fit-content;
	margin-inline: auto;
	text-align: center;
	font-size: clamp(14px, 1.6vw, 16px);
	line-height: 1.9;
	color: #333;
}
.breakfast-lp .breakfast-intro .lp-area__lead {
	white-space: nowrap;
	margin-bottom: 0; /* リード下の余白は不要（ボックスの均等 padding に委ねる） */
}

/* 小さな情報アイコン（アレルギー表示等）は LP 既定の幅 100% を打ち消し、実寸付近で中央に置く。 */
.breakfast-lp .lp-section .wp-block-image.breakfast-icon {
	text-align: center;
}
.breakfast-lp .lp-section .wp-block-image.breakfast-icon img {
	width: auto;
	max-width: 200px;
	margin-inline: auto;
}

/* セクション見出し（h2）の横に置く装飾画像。point/service＝右、corner/restaurant＝左。
   ::before はセクション区切り無効化で使用済みのため、装飾画像は ::after に統一（左右は left/right で切替）。
   見出しは中央寄せの fit-content なので、その左右に絶対配置で添える。狭幅では隠す。 */
.breakfast-lp :is(#point, #corner, #service, #restaurant) > h2.wp-block-heading.alignfull::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: clamp(56px, 8vw, 92px);
	background: no-repeat center / contain;
	pointer-events: none;
}
.breakfast-lp #point > h2.wp-block-heading.alignfull::after {
	left: 100%;
	margin-left: clamp(8px, 2vw, 28px);
	aspect-ratio: 251 / 235;
	background-image: url(../images/breakfast/point_top_img.png);
}
.breakfast-lp #service > h2.wp-block-heading.alignfull::after {
	left: 100%;
	margin-left: clamp(8px, 2vw, 28px);
	aspect-ratio: 185 / 245;
	background-image: url(../images/breakfast/service_top_img.png);
}
.breakfast-lp #corner > h2.wp-block-heading.alignfull::after {
	right: 100%;
	margin-right: clamp(8px, 2vw, 28px);
	aspect-ratio: 332 / 251;
	background-image: url(../images/breakfast/corner_top_img.png);
}
.breakfast-lp #restaurant > h2.wp-block-heading.alignfull::after {
	right: 100%;
	margin-right: clamp(8px, 2vw, 28px);
	aspect-ratio: 208 / 218;
	background-image: url(../images/breakfast/restaurant_top_img.png);
}
@media (max-width: 768px) {
	.breakfast-lp :is(#point, #corner, #service, #restaurant) > h2.wp-block-heading.alignfull::after {
		display: none;
	}
}

/* ============ こだわりポイント以降のセクション（lp-area） ============
   各ブロックを白背景にして地色（黄）から浮かせ、左右に内側余白を空ける。導入(breakfast-intro)は対象外。 */
.breakfast-lp .lp-area:not(.breakfast-intro) {
	background: #fff;
	padding-inline: clamp(20px, 5vw, 56px);
	padding-block: clamp(28px, 4vw, 48px);
	margin-block: clamp(20px, 3vw, 32px); /* ブロック間に地色を見せて分離 */
}
/* セクション見出し（lp-area 直下の h2）：#13AEC3・sans 系・下罫線（テキスト幅）・サイズは h1 と同程度。
   親の「セクション区切り（h2.alignfull）」が付ける上罫線(::before)・上 margin/padding は無効化する。
   .alignfull を含めて blocks.css のセクション区切りより高い詳細度で確実に上書きする。 */
.breakfast-lp .lp-area:not(.breakfast-intro) > h2.wp-block-heading.alignfull {
	color: #13AEC3;
	font-family: var(--wp--custom--brand-ui, "Noto Sans JP", sans-serif);
	font-weight: 700;
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1.3;
	width: fit-content;     /* 下線をテキスト幅に合わせる */
	margin-top: 0;          /* セクション区切りの上余白を無効化 */
	margin-inline: auto;    /* 中央寄せ */
	padding-top: 0;         /* セクション区切りの上 padding を無効化 */
	border-bottom: 2px solid #13AEC3;
	padding-bottom: 0.4em;
}
/* セクション区切りの上罫線（::before の 100vw ライン）は出さない。 */
.breakfast-lp .lp-area:not(.breakfast-intro) > h2.wp-block-heading.alignfull::before {
	content: none;
}
/* セクション内の小見出し（h3）も h2 と同じ文字色（#13AEC3）・sans 系フォントに揃える。 */
.breakfast-lp .lp-area:not(.breakfast-intro) h3.wp-block-heading {
	color: #13AEC3;
	font-family: var(--wp--custom--brand-ui, "Noto Sans JP", sans-serif);
	font-size: clamp(20px, 2.6vw, 26px);
	line-height: 1.4;
}
/* こだわりポイントの「POINT N」ラベル画像。head_image として見出し(__head)の先頭に出る。
   中央寄せは aligncenter（ブロックの align 設定）で行う。ここでは大きさ（h3 と同じ高さ）だけ
   指定し、template-4 既定の width:100% を上書きする。 */
.breakfast-lp .lp-section__head-image img {
	display: block;
	height: clamp(22px, 2.2vw, 28px);
	width: auto;
}
/* aligncenter はフロントでは core が margin:auto で中央寄せするが、編集キャンバスでは
   その指定が当たらず左寄せになる。編集時も本番と同じく中央に見せる（エディター限定）。 */
.editor-styles-wrapper .lp-section__head-image.aligncenter {
	margin-left: auto;
	margin-right: auto;
}
/* こだわり以降のセクション群（lp-sections）は flex で gap 0 のため、各セクション間に余白を空ける。
   template-4 既定の半幅カラム（2カラム用）ではなく、白ボックスの内容幅いっぱいに広げる。 */
.breakfast-lp .lp-area:not(.breakfast-intro) .lp-sections {
	gap: clamp(32px, 5vw, 56px);
}
.breakfast-lp .lp-area:not(.breakfast-intro) .lp-sections.is-template-4 {
	width: 100%;
	max-width: 560px; /* 単一カラムの読みやすい幅。template-4 既定の半幅式は使わない */
	margin-inline: auto;
}
/* スライダー（1枚送りギャラリー）は直前の本文（テキスト箱）から間隔を空ける。
   画像全体表示・キャプション下・端に半分重なる左右ボタン・画像内インジケーターは
   共通CSS／JS（gallery-slider.css・gallery-slider.js）が担う。 */
.breakfast-lp .wp-block-gallery.is-style-hilton-slider {
	margin-top: clamp(10px, 1.5vw, 16px);
}

/* こだわりポイント／おすすめコーナー／お子様：見出し(h3)はインラインのマーカーにするため親を中央に。 */
.breakfast-lp :is(#point, #corner, #service) .lp-section__body {
	text-align: center;
}
/* ただしリスト（注記 ※ など）は中央寄せだと読みづらいので左揃えに戻す。 */
.breakfast-lp :is(#point, #corner, #service) .lp-section__body ul.wp-block-list {
	text-align: left;
}
/* 本文（説明文＋リスト等）は 1 つのテキスト箱（.breakfast-textbox）にまとめ、#d9f0ed の下地を付ける。
   箱の中身は左寄せ（リストの中央寄せを解消）。見出し・スライダー・画像は箱の外。 */
.breakfast-lp .breakfast-textbox {
	background: #d9f0ed;
	padding-block: clamp(10px, 1.6vw, 16px);
	padding-inline: clamp(16px, 3vw, 28px);
	text-align: left;
}
.breakfast-lp .breakfast-textbox > * {
	margin-block: 0;
}
.breakfast-lp .breakfast-textbox > * + * {
	margin-block-start: 0.8em;
}
.breakfast-lp .breakfast-textbox ul {
	margin: 0;
	padding-left: 1.4em;
	text-align: left;
}
/* テキスト箱内のリストは行間を詰める。 */
.breakfast-lp .breakfast-textbox ul li {
	margin-top: 2px;
}
.breakfast-lp .breakfast-textbox ul li:first-child {
	margin-top: 0;
}
/* 注記(※)項目は本文を通常項目(・)の本文左端に揃え、※マーカーをバレットと同じ
   インデント位置へ寄せる（親テーマの padding-left:1.5em / ::before left:0 を上書き）。 */
.breakfast-lp .breakfast-textbox ul li.is-style-note {
	padding-left: 0;
}
.breakfast-lp .breakfast-textbox ul li:not(.is-style-note) + li.is-style-note,
.breakfast-lp .breakfast-textbox ul li.is-style-note + li.is-style-note {
	margin-top: 6px;
}
.breakfast-lp .breakfast-textbox ul li.is-style-note::before {
	left: -1.2em;
}
/* タイトル（h3）は文字の下半分にだけ #d9f0ed を重ねる（蛍光ペン風マーカー）。
   インライン＋box-decoration-break で複数行でも各行の下半分に掛かる。親で中央寄せ。 */
.breakfast-lp :is(#point, #corner, #service) h3.wp-block-heading {
	display: inline-block; /* マーカーをテキスト幅にしつつ margin-bottom を効かせる */
	background: linear-gradient(transparent 60%, #d9f0ed 60%); /* 塗りは半分より少し下（下 40%）から */
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
/* 見出し(h3)は上下マージンを持たせない（間隔は本文・スライダー側で取る）。 */
.breakfast-lp h3.wp-block-heading {
	margin-top: 0;
	margin-bottom: 0;
}

/* 1階 インプレイス3-3：説明文＋営業時間＋動画を 1 つの #d9f0ed ボックスに。動画は左右中央。 */
.breakfast-lp #restaurant .breakfast-rest-info {
	background: #d9f0ed;
	padding: clamp(20px, 4vw, 40px);
}
.breakfast-lp #restaurant .breakfast-rest-info > * {
	margin-block: 0;
}
.breakfast-lp #restaurant .breakfast-rest-info > * + * {
	margin-block-start: clamp(12px, 2vw, 20px);
}
.breakfast-lp #restaurant .breakfast-rest-info .wp-block-video {
	max-width: 720px;
	margin-inline: auto; /* 左右中央 */
}
.breakfast-lp #restaurant .breakfast-rest-info .wp-block-video video {
	width: 100%;
	height: auto;
	display: block;
}

/* CTA ボタン：このテンプレート内のボタンは全て共通でこのスタイルにする（クラス指定不要）。
   背景 #13AEC3・完全角丸・右に黄色の三角・左上に「Check!」の吹き出し。 */
/* 吹き出しが上に出るぶんの余白は buttons ラッパーに持たせる（内側の .wp-block-button に
   margin を当てるとエディターでは効かず間隔が食い違うため）。 */
.breakfast-lp .wp-block-buttons {
	margin-top: clamp(40px, 5vw, 64px);
}
.breakfast-lp .wp-block-button {
	position: relative;
}
.breakfast-lp .wp-block-button__link {
	position: relative;
	background-color: #13AEC3;
	color: #fff;
	border-radius: 9999px; /* 完全な角丸 */
	padding-right: 3.4em;  /* 右の三角ぶん＋左右の余白 */
	padding-left: 2.6em;
}
.breakfast-lp .wp-block-button__link::after {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 15px;
	border-color: transparent transparent transparent #ffe136;
	content: "";
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
}
/* 左上の吹き出し（259x168）。ボタン左端から画像幅の半分ほど左へはみ出して配置。 */
.breakfast-lp .wp-block-button::before {
	--fukidashi-width: clamp(74px, 11vw, 104px);
	content: "";
	position: absolute;
	left: calc(var(--fukidashi-width) * -0.5);
	bottom: calc(100% - 12px);
	width: var(--fukidashi-width);
	aspect-ratio: 259 / 168;
	background: url(../images/breakfast/chef_btn_fukidashi.png) no-repeat center / contain;
	pointer-events: none;
	z-index: 1;
}
/* lp-area（白ボックス）内のボタンは、白い「Check!」吹き出しが白地で見えなくなるため、
   黄色の吹き出し画像に差し替える（白ボックス外＝地色の上のボタンは白のまま視認できる）。 */
.breakfast-lp .wp-block-acf-lp-area .wp-block-button::before {
	background-image: url(../images/breakfast/restaurant_btn_fukidashi.png);
}

/* 狭幅：ナビ 2 列（KV に被せない）、リードは折り返し可、装飾は隠す。 */
@media (max-width: 768px) {
	.breakfast-lp .breakfast-nav__list {
		grid-template-columns: repeat(2, minmax(0, 180px));
	}
	.breakfast-lp .breakfast-nav {
		margin-top: clamp(16px, 4vw, 32px);
	}
	/* 狭幅も装飾は絶対配置のまま（box の高さ計算に含めない）。ただし文字に被らないよう、装飾は
	   テキストボックスの「外」の上下余白ゾーンに逃がす：吹き出し＝box の上、右イラスト＝box の下。
	   その分、上下マージン（my）を画像が収まる量で上下同じだけ確保する。 */
	.breakfast-lp .breakfast-intro__textbox {
		margin-block: clamp(100px, 24vw, 120px); /* 上下同量。装飾画像を収める余白 */
		/* 地紋を過大化させない（実画像 456px 未満）。 */
		background-size: min(300px, 64%) auto;
	}
	.breakfast-lp .breakfast-intro__fukidashi {
		position: absolute;
		top: auto;
		bottom: calc(100% - 24px); /* box の上余白に置きつつ少し下げてテキストへ寄せる（被らせない） */
		left: clamp(0px, 1.5vw, 10px);
		right: auto; /* デスクトップの右アンカーを解除 */
		width: clamp(130px, 34vw, 175px);
	}
	.breakfast-lp .breakfast-intro__deco-right {
		position: absolute;
		top: calc(100% - 24px); /* box の下余白に置きつつ少し上げてテキストへ寄せる（被らせない） */
		bottom: auto;
		right: clamp(0px, 1.5vw, 10px);
		transform: none;
		width: clamp(100px, 26vw, 130px); /* 小さめ */
	}
}
@media (max-width: 700px) {
	.breakfast-lp .breakfast-intro .lp-area__lead {
		white-space: normal;
	}
}