/**
 * 「赤ちゃん・お子様向けサービス・施設」特設ページ（room CPT・slug=kids_service）専用スタイル。
 * すべて .kids-service-lp スコープ。
 *
 * レイアウト方針:
 * - 内容は通常フロー（中央寄せ・左右ガターは親 .single-main の padding-inline が一律に与える）。
 * - 全幅の背景帯（地色・地紋）は ::before（100vw・内容の背後）で敷く＝内容は動かさないので
 *   スクロールバー幅による左右ズレやガターの二重掛けが起きない（親 .title-band と同じ手法）。
 * - 等幅カラムは CSS grid＋gap（崩れない）。PC / タブレット(≤1024) / スマホ(≤600) の3段階。
 * 装飾画像は子テーマ assets/images/kids/ を CSS から参照する。
 */

/* LP は最大1256で中央寄せ。左右ガターは LP 自身の padding-inline で一律に与える
   （main/post-content はフロー全幅なので、幅・ガターはここで一元管理。全幅背景は ::before）。 */
.kids-service-lp {
	max-width: 1256px;
	margin-inline: auto;
	padding-inline: var(--gutter, 32px);
	box-sizing: border-box;
	line-height: 1.8;
	color: #333;
}
.kids-service-lp figure.wp-block-image { margin: 0; }
.kids-service-lp p { margin: 0; }
/* エディタのルートコンテナは align 無しブロックを contentSize(760) に締め付ける。LP をフロント同様
   1256 で見せるため上書き（このセレクタはエディタ専用なのでフロントには影響しない）。 */
.block-editor-block-list__layout.is-root-container > .kids-service-lp { max-width: 1256px; }
@media (max-width: 768px) { .kids-service-lp .pcInline { display: none; } }

/* ===== 全幅背景（::before で 100vw・内容は通常幅のまま中央） ===== */
.kids-service-lp .kids-top,
.kids-service-lp .kids-lead-band,
.kids-service-lp .fs-sec { position: relative; }
.kids-service-lp .kids-lead-band > *,
.kids-service-lp .fs-sec > * { position: relative; z-index: 1; }
.kids-service-lp .kids-lead-band::before,
.kids-service-lp .fs-kids-rooms::before,
.kids-service-lp .fs-kids-activity::before,
.kids-service-lp .fs-kids-service::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: 0;
}
.kids-service-lp .fs-kids-rooms::before { background: url(../images/kids/rooms_bg.jpg) center top repeat; }
.kids-service-lp .fs-kids-activity::before { background: url(../images/kids/activity_bg.jpg) center top repeat; }
.kids-service-lp .fs-kids-service::before { background: #C9EBF3; }
.kids-service-lp .kids-lead-band::before {
	border-top: 3px solid #fff;
	border-bottom: 3px solid #fff;
	background: linear-gradient(90deg, #FCD495 0%, #fff 50%, #fff 51%, #FCD495 100%);
}

/* セクション縦余白（PC56 / タブレット40 / SP32 相当）。 */
.kids-service-lp .fs-sec { padding: 50px 0; }
.kids-service-lp .fs-kids-amenity,
.kids-service-lp .fs-kids-facility { padding: 36px 0; }

/* セクション見出し（テキストで表現）。丸ゴシック＋白フチ＋2色。 */
.kids-service-lp .kids-secttl {
	text-align: center;
	margin: 0 0 30px;
	line-height: 1.4;
	font-family: "M PLUS Rounded 1c", sans-serif;
	text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
		2px 2px #fff, -2px -2px #fff, 2px -2px #fff, -2px 2px #fff;
}
.kids-service-lp .fs-sec .kids-secttl { font-size: 30px; font-weight: 800; }
.kids-service-lp .kids-secttl .is-o { color: #f2863e; }
.kids-service-lp .kids-secttl .is-d { color: #5e3818; }
/* 各見出し h3 は本文と同じゴシック体（フロント既定のセリフ見出しを上書き）。 */
.kids-service-lp .fs-sec h3.wp-block-heading { font-family: inherit; }

/* ===== トップ（左右2枚の写真ヒーロー＋タイトル） ===== */
.kids-service-lp .kids-top { width: 100vw; margin-left: calc(50% - 50vw); }
.kids-service-lp .kids-top__hero {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
}
/* 左右2分割の写真は実画像（core/image）。エディタで差し替え可能。
   designed KV バナー（タイトルを重ねる）のため object-fit:cover でのトリミングは許容。 */
.kids-service-lp .kids-top__photos {
	display: flex;
	aspect-ratio: 1450 / 500;
}
.kids-service-lp .kids-top__photo { width: 50%; margin: 0; }
.kids-service-lp .kids-top__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kids-service-lp .kids-top__title { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; z-index: 1; }
.kids-service-lp .kids-top__title img { max-width: 520px; width: 70%; }

/* リード（グラデ帯は ::before で全幅、文字は内側で中央） */
.kids-service-lp .kids-lead-band { padding: 20px 0; }
.kids-service-lp .kids-top__txt {
	font-size: 16px;
	letter-spacing: 0.3em;
	text-align: center;
	line-height: 1.6;
	color: #603813;
	text-shadow: 1px 1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff;
}

/* ===== お子様向け客室（画像左・本文右の枠付きボックス） ===== */
.kids-service-lp .kids-roombox {
	max-width: 1020px;
	height: 365px;
	box-sizing: border-box;
	margin: 0 auto 10px;
	padding: 45px 30px 0;
	background: url(../images/kids/rooms_box_bg.png) center top no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	/* 画像（435固定）と本文（残り幅）を grid＋gap で配置。間隔は gap で固定するので、
	   箱幅が変わっても画像〜本文の間が space-between のように伸び縮みしない。 */
	display: grid;
	grid-template-columns: 435px 1fr;
	gap: 45px;
	align-items: start;
}
.kids-service-lp .kids-roombox::before { content: ""; display: none; }
.kids-service-lp .kids-roombox__img { min-width: 0; }
.kids-service-lp .kids-roombox__img img { width: 100%; height: auto; }
.kids-service-lp .kids-roombox__info { min-width: 0; box-sizing: border-box; padding-right: 20px; }
.kids-service-lp .kids-roombox .kids-roombox__h3 {
	font-size: 25px;
	white-space: nowrap;
	text-align: center;
	color: #FF801E;
	background: url(../images/kids/line_bg.png) center bottom no-repeat;
	padding: 0 0 10px;
	margin: 10px 0;
}
.kids-service-lp .kids-roombox__txt { font-size: 16px; line-height: 1.6; }

/* ===== アクティビティ（白の内枠ボックス＋title_bg プレート見出し） ===== */
.kids-service-lp .kids-act__inner {
	max-width: 1000px;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 30px 0;
	background: #fff;
	box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, .3);
}
.kids-service-lp .kids-act-item { margin: 0 0 40px; }
.kids-service-lp .kids-act-item:last-child { margin-bottom: 0; }
.kids-service-lp .kids-act-item .kids-plate {
	width: 360px;
	max-width: 100%;
	height: 50px;
	box-sizing: border-box;
	background: url(../images/kids/title_bg.png) left top no-repeat;
	background-size: 100% 100%;
	font-size: 24px;
	line-height: 1;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px 0 0;
	margin: 0 0 20px;
}
/* 円形写真（キッズルーム） */
.kids-service-lp .kids-round { display: inline-block; margin: 0 6px; }
.kids-service-lp .kids-round img { border-radius: 50%; width: 300px; height: 300px; object-fit: cover; }
.kids-service-lp .kids-act-room__imgs { text-align: center; margin: 0 0 18px; }
.kids-service-lp .kids-act-room__txt { font-size: 16px; text-align: left; margin: 0 145px; }
/* 横並び写真（アリーナ／アミューズメント）＝2列グリッド */
.kids-service-lp .kids-act-arena__imgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: center; justify-items: center; margin: 0 0 14px; }
.kids-service-lp .kids-act-arena__imgs .kids-round { margin: 0; }
.kids-service-lp .kids-act-arena__imgs .kids-round img { border-radius: 0; width: 100%; max-width: 460px; height: auto; }
.kids-service-lp .kids-act-arena__txt { font-size: 16px; text-align: center; }
/* 画像左・本文右（バーデ／アミューズ）。本文側に左右35pxの余白。 */
.kids-service-lp .kids-media { display: flex; gap: 35px; align-items: center; margin: 0 35px; }
.kids-service-lp .kids-media__img { flex: 0 0 450px; max-width: 450px; }
.kids-service-lp .kids-media__img img { width: 100%; height: auto; }
.kids-service-lp .kids-media__body { flex: 1 1 0; min-width: 0; font-size: 16px; }
/* 2カラム（ゴルフ／多目的広場）＝grid */
/* 2カラム（ゴルフ／多目的広場）。プレートはカラム端に密着（左右マージン無し）、本文だけ内側へ 35px、
   画像は左カラム＝右寄せ・右カラム＝左寄せで中央を向かせる。 */
.kids-service-lp .kids-act-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin: 0 0 40px; }
.kids-service-lp .kids-act-col { min-width: 0; }
.kids-service-lp .kids-act-col__img { margin: 14px 0; text-align: center; }
.kids-service-lp .kids-act-cols .kids-act-col:first-child .kids-act-col__img { text-align: right; }
.kids-service-lp .kids-act-cols .kids-act-col:last-child .kids-act-col__img { text-align: left; }
.kids-service-lp .kids-act-cols .kids-act-col:first-child p { margin-left: 35px; }
.kids-service-lp .kids-act-cols .kids-act-col:last-child p { margin-right: 35px; }
.kids-service-lp .kids-act-col__img img { width: auto; max-width: 100%; height: auto; }
.kids-service-lp .kids-act-col p { font-size: 16px; }

/* ===== 黄色の角丸カード（貸出アメニティ・施設）＝3列グリッド ===== */
.kids-service-lp .kids-ygrid {
	max-width: 1000px;
	box-sizing: border-box;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.kids-service-lp .kids-ycard {
	box-sizing: border-box;
	background: #F7B52B;
	border: 1px solid #F7B52B;
	border-radius: 10px;
	padding: 0 0 10px;
	overflow: hidden;
}
.kids-service-lp .kids-ycard .kids-ycard__h3 {
	background: url(../images/kids/facilities_title_bg.png) left center repeat-x;
	min-height: 49px;
	box-sizing: border-box;
	font-size: 21px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	border-radius: 10px 10px 0 0;
	padding: 12px 8px 0;
	margin: 0;
}
.kids-service-lp .kids-ycard__img { text-align: center; line-height: 1; margin: 0 0 5px; }
.kids-service-lp .kids-ycard__img img { width: 100%; height: auto; }
.kids-service-lp .kids-ycard__txt { font-size: 14px; margin: 0 10px 10px; min-height: 130px; }

/* ===== 「詳細はこちら」ボタン（金〜茶グラデのピル） ===== */
.kids-service-lp .kids-detail { justify-content: center; margin-top: 16px; }
.kids-service-lp .kids-detail .wp-block-button__link {
	background: linear-gradient(180deg, #b59a6a 0%, #9a7c4c 48%, #6e5230 100%);
	color: #fff;
	border-radius: 999px;
	padding: 10px 34px;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 0.18em;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.kids-service-lp .kids-detail .wp-block-button__link::after { content: " \203A"; font-weight: normal; }
.kids-service-lp .kids-detail .wp-block-button__link:hover { opacity: 0.85; }

/* ===== キッズサービス（水色地・専用ボックス＋四隅イラスト・2カラム） ===== */
.kids-service-lp .kids-servicebox {
	max-width: 1000px;
	min-height: 386px;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 50px 0 0;
	background: url(../images/kids/service_box_bg.png) center top no-repeat;
	background-size: 100% 100%;
	position: relative;
	display: flex;
	justify-content: flex-start;
}
.kids-service-lp .kids-servicebox::before,
.kids-service-lp .kids-servicebox::after,
.kids-service-lp .kids-servicebox__l::before,
.kids-service-lp .kids-servicebox__r::before {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}
.kids-service-lp .kids-servicebox::before { left: -56px; top: -86px; width: 108px; height: 108px; background-image: url(../images/kids/service_bg_illust_1.png); }
.kids-service-lp .kids-servicebox::after { right: 120px; top: -80px; width: 100px; height: 100px; background-image: url(../images/kids/service_bg_illust_2.png); }
.kids-service-lp .kids-servicebox__l::before { left: -24px; bottom: 40px; width: 88px; height: 88px; background-image: url(../images/kids/service_bg_illust_4.png); }
.kids-service-lp .kids-servicebox__r::before { right: -26px; top: 150px; width: 88px; height: 88px; background-image: url(../images/kids/service_bg_illust_3.png); }
.kids-service-lp .kids-servicebox__l { flex: 0 0 295px; max-width: 295px; margin-left: 100px; }
.kids-service-lp .kids-servicebox__r { flex: 0 0 425px; max-width: 425px; margin-left: auto; margin-right: 60px; }
.kids-service-lp .kids-svc { margin: 0 0 45px; }
.kids-service-lp .kids-servicebox__r .kids-svc,
.kids-service-lp .kids-servicebox__l .kids-svc:last-child { margin-bottom: 0; }
.kids-service-lp .kids-servicebox .kids-svc__h3 { font-size: 21px; font-weight: bold; color: #41A8B2; text-align: center; margin: 0 0 16px; }
.kids-service-lp .kids-servicebox .kids-svc__h3 span { background: url(../images/kids/service_h3_bg.png) left bottom repeat-x; padding: 0 3px; }
.kids-service-lp .kids-svc__txt { font-size: 14px; line-height: 1.7; }
.kids-service-lp .kids-svc__logo { text-align: center; margin: 0 0 12px; }
.kids-service-lp .kids-svc__logo img { max-width: 100%; height: auto; }
.kids-service-lp .kids-servicebox__r .kids-svc__txt { margin: 0; }

/* 本文(LP)はフル幅バンド主体のため、main の上下余白とパンくず上の空白を詰める。 */
.kids-service-main { padding-top: 0; padding-bottom: 0; }
.kids-service-main > .wp-block-post-content { margin: 0; padding-top: 0; padding-bottom: 0; }

/* ===================== タブレット（≤1024px） ===================== */
@media (max-width: 1024px) {
	.kids-service-lp .fs-sec { padding: 40px 0; }
	.kids-service-lp .fs-sec .kids-secttl { font-size: 24px; }
	/* タブレットでは見出し下の各コンテンツボックスに max-width を掛け、間延びを防いで中央寄せ。 */
	.kids-service-lp .kids-act__inner,
	.kids-service-lp .kids-servicebox { max-width: 560px; margin-inline: auto; }

	/* 客室: 縦積み（白箱＋ピン）、画像は max480 中央 */
	.kids-service-lp .fs-kids-rooms { padding: 28px 0; }
	.kids-service-lp .kids-roombox {
		display: block; height: auto; overflow: visible;
		background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.12);
		position: relative; max-width: 520px; margin: 0 auto 24px; padding: 30px 18px 18px;
	}
	.kids-service-lp .kids-roombox::before {
		display: block; position: absolute; top: -11px; left: 0; right: 0; height: 28px;
		background: url(../images/kids/rooms_box_pin.png) center top no-repeat; background-size: contain;
	}
	.kids-service-lp .kids-roombox .kids-roombox__img { flex: none; max-width: 480px; margin: 0 auto 14px; }
	.kids-service-lp .kids-roombox__info { flex: none; max-width: none; padding-right: 0; }
	.kids-service-lp .kids-roombox .kids-roombox__h3 { white-space: normal; font-size: 20px; }

	/* アクティビティ: 内枠の左右余白、プレートは橙バー、メディア/カラムは縦積み、画像 max480 中央 */
	.kids-service-lp .fs-kids-activity { padding: 28px 0; }
	/* 内枠は左右パディング 0。プレート（橙バー）は箱の左右いっぱいに伸ばし、本文側に side margin を持たせる。 */
	.kids-service-lp .kids-act__inner { padding: 24px 0; }
	/* 各項目の縦間隔はブロック単位の gap で統一（末尾要素の margin 有無に左右されない）。 */
	.kids-service-lp .kids-act-item { display: flex; flex-direction: column; gap: 16px; margin: 0 0 28px; }
	.kids-service-lp .kids-act-item:last-child { margin-bottom: 0; }
	.kids-service-lp .kids-act-item.kids-act-cols { display: grid; grid-template-columns: 1fr; gap: 28px; margin: 0 0 28px; }
	.kids-service-lp .kids-act-col { display: flex; flex-direction: column; gap: 14px; margin: 0; min-width: 0; }
	.kids-service-lp .kids-act-item > *,
	.kids-service-lp .kids-act-col > * { margin-top: 0; margin-bottom: 0; }
	/* プレートは箱の左右いっぱいの橙バー。上下の白い破線は ::before/::after で回す（破線は span 不要）。 */
	.kids-service-lp .kids-act-item .kids-plate { position: relative; width: 100%; height: auto; background: #FF801E; font-size: 17px; padding: 9px 0; text-align: center; }
	.kids-service-lp .kids-act-item .kids-plate::before,
	.kids-service-lp .kids-act-item .kids-plate::after {
		content: ""; position: absolute; left: 0; right: 0; height: 0;
		border-top: 1px dashed rgba(255, 255, 255, 0.5);
	}
	.kids-service-lp .kids-act-item .kids-plate::before { top: 3px; }
	.kids-service-lp .kids-act-item .kids-plate::after { bottom: 3px; }
	/* 本文・画像はプレートと違い side margin 16px で内側へ寄せる（プレートだけ箱いっぱい）。 */
	.kids-service-lp .kids-act-room__txt,
	.kids-service-lp .kids-act-arena__txt,
	.kids-service-lp .kids-act-col p { margin-inline: 16px; }
	.kids-service-lp .kids-act-room__imgs { margin-inline: 16px; }
	.kids-service-lp .kids-act-arena__imgs { grid-template-columns: 1fr; margin-inline: 16px; }
	.kids-service-lp .kids-act-arena__imgs .kids-round img { max-width: 480px; }
	.kids-service-lp .kids-media { display: block; margin-inline: 16px; }
	.kids-service-lp .kids-media .kids-media__img { flex: none; max-width: 480px; margin: 0 auto 12px; }
	.kids-service-lp .kids-act-col__img { margin: 0; }
	.kids-service-lp .kids-act-col__img img { max-width: 480px; }

	/* 黄色カード: 2列 */
	.kids-service-lp .fs-kids-amenity,
	.kids-service-lp .fs-kids-facility { padding: 28px 0; }
	.kids-service-lp .kids-ygrid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.kids-service-lp .kids-ycard__txt { min-height: 0; }
	.kids-service-lp .kids-ycard .kids-ycard__h3 { font-size: 18px; }

	/* サービス: 縦積み・四隅イラストは隠す */
	.kids-service-lp .kids-servicebox {
		display: block; min-height: 0; background: #fff; border-radius: 8px; padding: 18px;
	}
	.kids-service-lp .kids-servicebox::before,
	.kids-service-lp .kids-servicebox::after,
	.kids-service-lp .kids-servicebox__l::before,
	.kids-service-lp .kids-servicebox__r::before { display: none; }
	.kids-service-lp .kids-servicebox__l { flex: none; max-width: none; margin: 0; }
	.kids-service-lp .kids-servicebox__r { flex: none; max-width: none; margin: 24px 0 0; }
	.kids-service-lp .kids-svc { margin: 0 0 24px; }
	.kids-service-lp .kids-servicebox .kids-svc__h3 { text-align: center; font-size: 18px; }
	.kids-service-lp .kids-servicebox .kids-svc__logo { max-width: 320px; margin-left: auto; margin-right: auto; }

	/* タイトル画像 */
	.kids-service-lp .kids-top__title img { max-width: 440px; }
}

/* ===================== スマホ（≤600px） ===================== */
@media (max-width: 600px) {
	.kids-service-lp .fs-sec { padding: 28px 0; }
	.kids-service-lp .fs-sec .kids-secttl { font-size: 20px; }
	/* SP は専用の1枚バナー（top_title_sp.jpg・写真＋タイトル一体の designed バナー）を KV として
	   全幅表示。PC 用の左右2分割写真とタイトル画像は隠す。 */
	.kids-service-lp .kids-top__hero { aspect-ratio: 960 / 320; }
	.kids-service-lp .kids-top__photos { display: none; }
	.kids-service-lp .kids-top__hero::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url(../images/kids/top_title_sp.jpg) center / cover no-repeat;
	}
	.kids-service-lp .kids-top__title { display: none; }
	.kids-service-lp .kids-top__txt { font-size: 14px; text-align: left; letter-spacing: 0.08em; }
	.kids-service-lp .kids-top__txt br.pcInline { display: none; }

	.kids-service-lp .kids-roombox .kids-roombox__img { max-width: 400px; }
	.kids-service-lp .kids-roombox .kids-roombox__h3 { font-size: 18px; }
	.kids-service-lp .kids-roombox__txt { font-size: 14px; }

	.kids-service-lp .kids-act-item .kids-plate { font-size: 16px; }
	.kids-service-lp .kids-round img { width: 220px; height: 220px; }
	.kids-service-lp .kids-act-room__txt,
	.kids-service-lp .kids-act-arena__txt,
	.kids-service-lp .kids-media__body,
	.kids-service-lp .kids-act-col p { font-size: 14px; }
	.kids-service-lp .kids-act-arena__imgs .kids-round img,
	.kids-service-lp .kids-media .kids-media__img,
	.kids-service-lp .kids-act-col__img img { max-width: 400px; }

	.kids-service-lp .kids-ygrid { grid-template-columns: 1fr; gap: 16px; max-width: 400px; }
	.kids-service-lp .kids-ycard__txt { min-height: 0; }

	.kids-service-lp .kids-svc__txt { font-size: 14px; }
}
