/* =========================================================================
   ヒルトン名古屋「ファミリーで楽しむ」（room CPT・slug=family-kids）専用スタイル。
   特設デザイン。本文（特設LPブロック群）が出力する
   .family-kids-lp 配下にスコープする。内側コンテンツは 1000px 中央寄せ（狭幅は max-width で
   可変）。配色は橙 #EA5F36／#E8662B・ティール #62BEB4・地色 #FBF8F2。装飾画像 URL は子テーマ
   assets を参照する。区切り見出し（lp-sechead）・ページ内リンク（lp-nav）・カード（fs-card）・
   KV（lp-kv）の骨格は親ブロックCSS、ここは配色・背景画像・寸法だけを当てる。
   ========================================================================= */

/* 親 constrained（max-width:contentSize・margin auto を !important）を超えてセクション帯を全幅に。
   フロント（.single-main）と編集キャンバス（.editor-styles-wrapper）の両方で全幅化する。 */
.single-main .family-kids-lp {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
.editor-styles-wrapper .family-kids-lp {
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	left: 50%;
	transform: translateX(-50%);
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* 最終セクション（色帯）の下端に、下部パンくず帯と密着しないよう標準余白を入れる。
   余白はコンテンツ側（post-content の padding-bottom）に持たせ、他ページと縦リズムを揃える。 */
.single-main.family-kids-main > .wp-block-post-content { padding-bottom: var(--wp--preset--spacing--section); }

.family-kids-lp {
	position: relative;
	color: #3b3b3b;
	font-family: var(--wp--custom--brand-body, "Noto Sans JP", sans-serif);
	line-height: 1.8;
	overflow-x: clip;
}
.family-kids-lp img { max-width: 100%; height: auto; display: block; }
.family-kids-lp a { text-decoration: none; }
/* このページの見出しは sans（親テーマの serif 見出しを !important で確実に上書き）。 */
.family-kids-lp :is(h1, h2, h3, h4) {
	font-family: var(--wp--custom--brand-body, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif) !important;
}

/* PC/SP 出し分け（手動 br を SP で消す）。 */
@media (max-width: 768px) {
	.family-kids-lp .pcInline { display: none; }
}

/* 内側コンテンツの基準幅（1000px・中央寄せ）。 */
.family-kids-lp .fs-cards,
.family-kids-lp .fs-rec,
.family-kids-lp .fs-box-h,
.family-kids-lp .fs-box-c,
.family-kids-lp .fs-box-link,
.family-kids-lp .fs-sec > .wp-block-acf-fs-card {
	width: 1000px;
	max-width: calc(100% - var(--gutter, 16px) * 2);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* ===== トップ KV（acf/lp-kv）＝ヒーロー＋宿泊プラン画像（左上に重ね）＋下にリード ===== */
/* 宿泊プラン画像はヒーローの外（ラッパー直下）に出し、ラッパー（position:relative・先頭が KV）を
   基準に absolute で左上へ重ねる。左位置はヘッダー等と同じコンテンツ左端（左右ガター込み）に揃える：
   コンテンツ箱は 1320px 中央＋ガター 32px なので左端＝「中央 − 660px ＋ ガター」。狭い画面では
   ガター分だけ左に張り付ける。 */
.family-kids-lp .fs-to-plan {
	position: absolute;
	top: 10px;
	left: max(var(--gutter, 16px), calc(50% - 660px + var(--gutter, 16px)));
	width: min(9vw, 120px);
	margin: 0;
	z-index: 10;
}
.family-kids-lp .fs-to-plan img { width: 100%; }
/* リード文。KV の直下、本文幅で中央寄せ。 */
.family-kids-lp .fs-lead {
	font-size: 20px;
	font-weight: bold;
	color: #E8662B;
	text-align: center;
	line-height: 1.8;
	margin: 32px auto 56px;
	max-width: calc(100% - var(--gutter, 16px) * 2);
}
@media (max-width: 768px) {
	.family-kids-lp .fs-to-plan { width: 13vw; left: 16px; }
	.family-kids-lp .fs-lead { font-size: 15px; margin: 30px auto 30px; }
}

/* ===== ページ内リンク（自動目次 acf/lp-nav）→ 円形バッジ6個。親（lp.css）の帯装飾を打ち消す。
   目次は lp-nav.js が各セクションの lp-sechead（nav_label）から自動生成する。 ===== */
/* 円形バッジの帯はヘッダー追従しない（親 lp.css の sticky を解除）。スクロールで一緒に流す。 */
.family-kids-lp .lp-nav { position: static; background: none; margin-bottom: 56px; }
/* この帯は円形バッジ（折りたたみ対象外）。共通の SP/タブレット折りたたみを無効化し、
   バッジは常に表示する（トグルは出さない）。 */
.family-kids-lp .lp-nav__toggle { display: none !important; }
.family-kids-lp .lp-nav.is-collapsible .lp-nav__list { display: flex !important; }
/* 中央寄せ＋固定 gap（space-between だと列数が少ない幅で隙間が開きすぎるため）。
   親 lp-nav の SP（flex-direction:column・区切り線）も上書きして常に横並び・折返し。
   リスト幅を「N個ぶん（丸150px×N＋gap16×(N-1)）」に固定して中央寄せ。li はこの幅を均等割り
   するので、丸は最大150px・間隔は常に16pxで一定・グループは中央寄せになる。既定は6個。 */
.family-kids-lp .lp-nav__list {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	max-width: 982px;
	margin-inline: auto;
	padding: 0 16px;
}
/* 折返しは 6個 / 3個 / 2個 のみ（4・5個は禁止）。列数ごとに calc でぴったりの幅を与え、6個目が
   溢れて折り返すのを防ぐ。container-type で配下バッジの文字サイズを項目幅（=バッジ幅）基準（cqi）に
   連動させ、どの列数でも文字比率を一定に保つ（特定幅で文字だけ大小する破綻を防ぐ）。 */
.family-kids-lp .lp-nav__item {
	border: none !important;
	flex: 0 0 auto;
	width: calc((100% - 80px) / 6); /* リスト幅(6個ぶん)を均等割り＝丸150px */
	container-type: inline-size;
}
/* タブレット以下：3個/行（小さい6個帯を避け、早めに3個へ）。 */
@media (max-width: 820px) {
	.family-kids-lp .lp-nav__list { max-width: 482px; } /* 150×3＋16×2 */
	.family-kids-lp .lp-nav__item { width: calc((100% - 32px) / 3); }
}
/* スマホ（狭）：2個/行。 */
@media (max-width: 430px) {
	.family-kids-lp .lp-nav__list { max-width: 316px; } /* 150×2＋16 */
	.family-kids-lp .lp-nav__item { width: calc((100% - 16px) / 2); }
}
/* バッジは li 幅いっぱい＋自然比（300:343）。文字は項目幅連動（cqi）で常に同じ見た目比率。
   王冠ぶん上 padding を少しだけ取り、クリーム円の中央に上下中央で収める。 */
.family-kids-lp .lp-nav__item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 150px;
	margin-inline: auto;
	aspect-ratio: 300 / 343;
	padding: 13% 12% 0;
	box-sizing: border-box;
	color: #5F3D19 !important;
	font-size: clamp(10px, 9.3cqi, 14px);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.family-kids-lp .lp-nav__item a:hover { background-color: transparent; opacity: 0.85; }
/* 親 lp-nav は ≤1024px で a 内の br を display:none にする（縦1列レイアウト用）。
   バッジは改行位置（「キッズ」で改行）を活かしたいので、全幅で br を有効に戻す。 */
.family-kids-lp .lp-nav__item a br { display: inline; }
.family-kids-lp .lp-nav__item:nth-child(1) a { background-image: url("../images/family/nav_blank_1.png"); }
.family-kids-lp .lp-nav__item:nth-child(2) a { background-image: url("../images/family/nav_blank_2.png"); }
.family-kids-lp .lp-nav__item:nth-child(3) a { background-image: url("../images/family/nav_blank_3.png"); }
.family-kids-lp .lp-nav__item:nth-child(4) a { background-image: url("../images/family/nav_blank_4.png"); }
.family-kids-lp .lp-nav__item:nth-child(5) a { background-image: url("../images/family/nav_blank_5.png"); }
.family-kids-lp .lp-nav__item:nth-child(6) a { background-image: url("../images/family/nav_blank_6.png"); }

/* ===== セクション帯（薄い背景イラスト＋上下余白）。bg_gray は地色クリーム。 ===== */
.family-kids-lp .fs-sec {
	padding: 56px 0 40px;
	background-image: url("../images/family/contents_sec_bg.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center 270px;
}
.family-kids-lp .fs-sec.is-bg-gray { background-color: #FBF8F2; }
/* 最終セクションはパンくずとの間隔が空きすぎないよう下paddingを詰める。 */
.family-kids-lp .fs-sec:last-child { padding-bottom: 8px; }
@media (max-width: 768px) {
	.family-kids-lp .fs-sec { padding: 40px 0; }
}

/* ===== 区切り見出し（lp-sechead 内の h2.fs-sec__h ＋ ガーランド装飾） ===== */
.family-kids-lp .fs-sec__h.wp-block-heading {
	text-align: center;
	font-size: 36px;
	color: #EA5F36;
	line-height: 1.6;
	font-weight: 800;
	position: relative;
	margin: 0 0 150px;
}
.family-kids-lp .fs-sec__h.wp-block-heading span { display: block; font-size: 24px; }
/* タイトル下のガーランド（旗飾り）。 */
.family-kids-lp .fs-sec__h.wp-block-heading::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -110px;
	transform: translateX(-50%);
	width: 752px;
	max-width: 90%;
	height: 96px;
	background: url("../images/family/title_bg.png") center / contain no-repeat;
}
@media (max-width: 768px) {
	.family-kids-lp .fs-sec__h.wp-block-heading { font-size: 24px; margin: 0 0 92px; }
	.family-kids-lp .fs-sec__h.wp-block-heading span { font-size: 15px; }
	.family-kids-lp .fs-sec__h.wp-block-heading::after { bottom: -72px; height: 64px; }
}

/* ===== メイン写真＋キャプション（lp-sechead 内の fs-figtop）。セクションのビジュアルは
   ガター含めフル幅で、最大幅は KV（kv-main）と同じ 1320px。 ===== */
.family-kids-lp .fs-figtop {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto 85px;
}
.family-kids-lp .fs-figtop .main { margin: 0 0 40px; }
.family-kids-lp .fs-figtop .main img { width: 100%; }
.family-kids-lp .fs-figcap {
	font-size: 14px;
	text-align: center;
	background-color: #FBF8F2;
	padding: 30px 16px 30px;
	margin: 0;
	position: relative;
}
.family-kids-lp .is-bg-gray .fs-figcap { background-color: #fff; }
.family-kids-lp .fs-figcap span { font-size: 13px; }
/* キャプション下の名古屋イラスト帯（左＝城・右＝鶏/塔）。キャプション幅いっぱいに敷き、左右の
   図柄をキャプションの左右端に密着させる。background-size:contain は中央に縮むため 100% 100%＋
   aspect-ratio で自然比のまま幅いっぱいに広げる。 */
.family-kids-lp .fs-figcap::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -15px;
	width: auto;
	aspect-ratio: 1015 / 155;
	background: url("../images/family/main_img_icon.png") center bottom / 100% 100% no-repeat;
	pointer-events: none;
}
@media (max-width: 768px) {
	.family-kids-lp .fs-figtop { margin-bottom: 60px; }
	.family-kids-lp .fs-figcap { padding: 30px 10px; text-align: left; }
	.family-kids-lp .fs-figcap br { display: none; }
	/* SP では左右の装飾（名古屋イラスト帯）を出さない（他ページの区切り見出し装飾に準拠）。 */
	.family-kids-lp .fs-figcap::after { display: none; }
}

/* ===== ココがおすすめ！（fs-rec：ティールのピル＋背景の横線） ===== */
.family-kids-lp .fs-rec {
	position: relative;
	text-align: center;
	margin-bottom: 50px;
}
.family-kids-lp .fs-rec::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	border-top: 3px solid #62BEB4;
	z-index: 1;
}
/* 他の特設ページ（niseko 等）の rec ピルとサイズ感を合わせる：自動幅・PC20px/SP15px・上下中央。 */
.family-kids-lp .fs-rec h3 {
	position: relative;
	z-index: 2;
	display: inline-block;
	background: #62BEB4;
	color: #fff;
	border-radius: 30px;
	padding: 13px 56px;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0.1em;
	margin: 0;
}
@media (max-width: 768px) {
	.family-kids-lp .fs-rec h3 { font-size: 15px; padding: 9px 28px; }
}

/* ===== カード（acf/fs-card）。フロントは .fs-card が flex 子、エディタは .wp-block-acf-fs-card。 ===== */
.family-kids-lp .fs-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.family-kids-lp .fs-card,
.editor-styles-wrapper .family-kids-lp .wp-block-acf-fs-card {
	padding: 30px;
	box-sizing: border-box;
	background-color: #fff;
	box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.2);
}
/* InnerBlocks ラッパーを透過させ、写真・見出し・本文を card の直下扱いに。 */
.family-kids-lp .fs-card .acf-innerblocks-container { display: contents; }
.family-kids-lp .fs-card .wp-block-image { margin: 0 0 20px; }
.family-kids-lp .fs-card .wp-block-image img { width: 100%; }
.family-kids-lp .fs-card h4 {
	font-size: 15px;
	font-weight: bold;
	color: #EA5F36;
	text-align: center;
	margin: 0 0 5px;
}
.family-kids-lp .fs-card h4 span { display: block; font-size: 12px; color: #000; padding: 0 0 5px; }
.family-kids-lp .fs-card p { font-size: 14px; text-align: left; }
.family-kids-lp .fs-card p span { display: block; font-size: 11px; }

/* 2カラム（box_2 相当）。固定pxだとタブレット幅で2枚入らず1カラム化するため、可変幅で常に2列。 */
.family-kids-lp .fs-cards > .fs-card,
.editor-styles-wrapper .family-kids-lp .fs-cards > .wp-block-acf-fs-card {
	width: calc((100% - 40px) / 2);
	margin: 0 0 50px;
}
/* 3カラム（box_3 相当）。可変幅で常に3列。 */
.family-kids-lp .fs-cards--3 > .fs-card--third,
.editor-styles-wrapper .family-kids-lp .fs-cards--3 > .wp-block-acf-fs-card {
	width: calc((100% - 40px) / 3);
	padding: 20px 15px;
	margin: 0 0 35px;
}
/* 全幅（box_1 相当）。本文中央寄せ。要素間の間隔はセクションの blockGap(56px) に任せる
   （独自 margin-bottom は付けない＝70/56 混在による不揃いを避ける）。 */
.family-kids-lp .fs-card--full { width: 100%; }
.family-kids-lp .fs-card--full p { text-align: center; }

@media (max-width: 768px) {
	/* 1カラム化時、カードがビューポート幅いっぱいに広がらないよう 400px で頭打ち＋中央寄せ
	   （他ページと同じ方針）。 */
	.family-kids-lp .fs-cards,
	.family-kids-lp .fs-cards--3,
	.family-kids-lp .fs-sec > .wp-block-acf-fs-card.fs-card--full {
		max-width: 400px;
		margin-inline: auto;
	}
	.family-kids-lp .fs-cards > .fs-card,
	.editor-styles-wrapper .family-kids-lp .fs-cards > .wp-block-acf-fs-card,
	.family-kids-lp .fs-cards--3 > .fs-card--third,
	.editor-styles-wrapper .family-kids-lp .fs-cards--3 > .wp-block-acf-fs-card {
		width: 100%;
		padding: 15px;
		margin: 0 auto 30px;
	}
	.family-kids-lp .fs-card h4 { font-size: 14px; }
	.family-kids-lp .fs-card h4 span { font-size: 11px; }
	.family-kids-lp .fs-card p { font-size: 13px; }
	.family-kids-lp .fs-card--full p { text-align: left; }
}

/* ===== 横並びカード（box_h：画像左・本文右） ===== */
.family-kids-lp .fs-box-h {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	background-color: #fff;
	padding: 0;
	margin: 0 auto 70px;
	overflow: hidden;
}
.family-kids-lp .fs-box-h .acf-innerblocks-container,
.family-kids-lp .fs-box-h > .wp-block-group__inner-container { display: contents; }
.family-kids-lp .fs-box-h .fs-box-h__img { flex: 0 0 290px; margin: 0; }
.family-kids-lp .fs-box-h__body { flex: 1; padding: 40px 30px 40px 0; }
.family-kids-lp .fs-box-h__body h4 { text-align: center; font-size: 15px; font-weight: bold; color: #EA5F36; margin: 0 0 5px; }
.family-kids-lp .fs-box-h__body p { font-size: 14px; text-align: center; }
@media (max-width: 768px) {
	.family-kids-lp .fs-box-h { flex-direction: column; gap: 0; padding: 15px; max-width: 400px; }
	.family-kids-lp .fs-box-h .fs-box-h__img { flex: none; width: 100%; }
	.family-kids-lp .fs-box-h__body { padding: 15px 0 0; }
	.family-kids-lp .fs-box-h__body h4 { font-size: 14px; }
	.family-kids-lp .fs-box-h__body p { font-size: 13px; text-align: left; }
}

/* ===== キッズアクティビティ（box_c）：交互オーバーラップ。
   画像440px（絶対配置・上方向にずらす）＋白の本文パネル667pxが左右で入れ替わる。
   l_img は高さ410px・r_img は高さ210px。SP は積み重ね（静的・95%幅・400px上限）。 ===== */
.family-kids-lp .fs-box-c { position: relative; }
.family-kids-lp .fs-box-c--l { height: 410px; }
.family-kids-lp .fs-box-c--r { height: 210px; }
.family-kids-lp .fs-box-c--l .fs-box-c__img { position: absolute; left: 0; top: -50px; width: 440px; z-index: 1; margin: 0; }
.family-kids-lp .fs-box-c--r .fs-box-c__img { position: absolute; right: 0; top: -240px; width: 440px; z-index: 1; margin: 0; }
.family-kids-lp .fs-box-c__img img { width: 100%; height: auto; }
.family-kids-lp .fs-box-c--l .fs-box-c__text { position: absolute; right: 0; top: 0; width: 667px; background: #fff; padding: 40px 0 60px 50px; text-align: center; box-sizing: border-box; }
.family-kids-lp .fs-box-c--r .fs-box-c__text { position: absolute; left: 0; top: 0; width: 667px; background: #fff; padding: 40px 50px 60px 0; text-align: center; box-sizing: border-box; }
.family-kids-lp .fs-box-c h4 { font-size: 15px; font-weight: bold; color: #EA5F36; margin: 0 0 5px; }
.family-kids-lp .fs-box-c p { font-size: 14px; }
/* タブレット以下：コラージュ（絶対配置・1000px前提）は崩れるため、画像＋本文を縦に積む
   （狭幅では縦積み）。大きくなりすぎないよう 400px 上限・中央寄せ。
   ※ 画像の絶対配置解除は PC 側 `.fs-box-c--l .fs-box-c__img`(0,3,0) と同等の詳細度で上書きする。
   ※ margin-top は付けず、セクションの blockGap(56px) でキャプション下の間隔を確保する。 */
@media (max-width: 1024px) {
	.family-kids-lp .fs-box-c { position: static; }
	.family-kids-lp .fs-box-c--l,
	.family-kids-lp .fs-box-c--r { height: auto; max-width: 400px; margin-left: auto; margin-right: auto; margin-bottom: 40px; }
	.family-kids-lp .fs-box-c--l .fs-box-c__img,
	.family-kids-lp .fs-box-c--r .fs-box-c__img { position: static; width: 95%; margin: 0 auto; }
	.family-kids-lp .fs-box-c--l .fs-box-c__text,
	.family-kids-lp .fs-box-c--r .fs-box-c__text { position: static; width: 95%; margin: 0 auto; padding: 15px; box-sizing: border-box; }
	.family-kids-lp .fs-box-c h4 { font-size: 14px; }
	.family-kids-lp .fs-box-c p { font-size: 13px; text-align: left; }
}

/* ===== 観光スポットの写真ギャラリー（box_img_list） ===== */
.family-kids-lp .fs-gallery {
	display: flex;
	justify-content: space-between;
	gap: 2%;
	margin-top: 20px;
}
.family-kids-lp .fs-gallery .wp-block-image { margin: 0; flex: 1; }
.family-kids-lp .fs-gallery img { width: 100%; }
.family-kids-lp .fs-gallery.list_2 .wp-block-image { max-width: 49%; }
.family-kids-lp .fs-gallery.list_3 .wp-block-image { max-width: 32%; }

/* ===== CTA（橙のピル＋矢印） ===== */
.family-kids-lp .fs-cta { margin-top: 15px; }
.family-kids-lp .fs-cta .wp-block-button { margin: 0 auto; }
.family-kids-lp .fs-cta .wp-block-button__link {
	position: relative;
	display: inline-block;
	width: auto;
	max-width: 100%;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	color: #fff !important;
	background-color: #E8662B !important;
	padding: 10px 56px 10px 40px;
	border-radius: 20px;
	box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
}
.family-kids-lp .fs-cta .wp-block-button__link::before,
.family-kids-lp .fs-cta .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 15px;
	height: 1px;
	background: #fff;
	transform-origin: 100% 50%;
	transform: rotate(30deg);
}
.family-kids-lp .fs-cta .wp-block-button__link::after { transform: rotate(-30deg); }
.family-kids-lp .fs-cta .wp-block-button__link:hover { opacity: 0.7; }

/* リンク帯（box_link：複数ボタンを横並び＋注記）。 */
.family-kids-lp .fs-box-link {
	background: #fff;
	padding: 40px 60px;
	margin: 0 auto 50px;
}
.family-kids-lp .is-box-gray .fs-box-link { background-color: #FBF8F2; }
.family-kids-lp .is-box-gray .fs-card,
.editor-styles-wrapper .family-kids-lp .is-box-gray .wp-block-acf-fs-card,
.family-kids-lp .is-box-gray .fs-box-h,
.family-kids-lp .is-box-gray .fs-box-c__text { background-color: #FBF8F2; }
.family-kids-lp .fs-box-link.fs-box-link .fs-linkbox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 20px;
	margin: 0;
}
.family-kids-lp .fs-box-link .fs-linkbox .wp-block-button { margin: 0; }
.family-kids-lp .fs-box-link .note {
	font-size: 14px;
	text-align: center;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 768px) {
	.family-kids-lp .fs-box-link { padding: 30px 15px; max-width: 400px; }
	.family-kids-lp .fs-box-link.fs-box-link .fs-linkbox { flex-direction: column; }
	.family-kids-lp .fs-cta .wp-block-button__link { font-size: 14px; padding: 10px 44px 10px 32px; }
}