
/* ページ固有のCSSスコープ (.l-wrap 内) */
	.l-wrap {
		--kids-sleep-primary: #1E3A8A; /* 深い夜空のネイビー */
		--kids-sleep-secondary: #E0F2FE; /* 柔らかい快眠ブルー */
		--kids-sleep-accent: #F59E0B; /* 温かみのあるイエローオレンジ */
		--kids-sleep-bg: #FFFBF7; /* 温かみのあるアイボリー */
		--kids-sleep-text: #334155;
		--kids-sleep-font-heading: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Yu Rounded", "Yu-Gothic", "Yu Gothic", -apple-system, BlinkMacSystemFont, sans-serif;
		--kids-sleep-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	}

	.l-wrap .p-kids-sleep-wrapper {
		background-color: var(--kids-sleep-bg);
		color: var(--kids-sleep-text);
		font-family: var(--kids-sleep-font-body);
		line-height: 1.8;
		letter-spacing: 0.05em;
		padding-bottom: 60px;
	}

	.l-wrap .p-kids-sleep-inner {
		max-width: 1216px;
		margin: 0 auto;
		padding: 0 20px;
	}

	.l-wrap .u-ib {
		display: inline-block;
	}

	@media screen and (max-width: 767px) {
		.l-wrap .p-kids-sleep-inner {
			padding: 0 12px;
		}
	}

	/* FV & 診断セクション */
	.l-wrap .p-kids-sleep-hero {
		position: relative;
		background-color: var(--kids-sleep-primary);
		background-image: url('https://pic2.bellemaison.jp/cpg/kids/kids-pajamas-cold-prevention/kids-pajamas-cold-prevention_image/hero-bg.jpg');
		background-size: cover;
		background-position: center;
		color: #fff;
		padding: 60px 20px 100px;
		text-align: center;
		margin-bottom: -60px; /* 診断枠を食い込ませる */
	}

	.l-wrap .p-kids-sleep-hero__inner {
		max-width: 900px;
		margin: 0 auto;
	}

	.l-wrap .p-kids-sleep-hero__title {
		font-family: var(--kids-sleep-font-heading);
		margin: 0 0 32px;
		letter-spacing: 0.05em;
	}

	.l-wrap .p-kids-sleep-hero__title-sub {
		display: block;
		font-size: clamp(16px, 3.5vw, 22px);
		font-weight: normal;
		line-height: 1.6;
		margin-bottom: 12px;
		opacity: 0.95;
	}

	.l-wrap .p-kids-sleep-hero__title-main {
		display: block;
		font-size: clamp(28px, 6.5vw, 44px);
		font-weight: bold;
		color: var(--kids-sleep-accent);
		line-height: 1.3;
		text-shadow: 0 2px 4px rgba(0,0,0,0.2);
	}

	.l-wrap .p-kids-sleep-hero__lead {
		margin: 0 0 40px;
		line-height: 1.6;
	}

	.l-wrap .p-kids-sleep-hero__lead-badge {
		display: inline-block;
		background: rgba(255, 255, 255, 0.15);
		border: 1px solid rgba(255, 255, 255, 0.3);
		padding: 4px 16px;
		border-radius: 999px;
		font-size: clamp(12px, 2.5vw, 14px);
		margin-bottom: 12px;
	}

	.l-wrap .p-kids-sleep-hero__lead-text {
		display: block;
		font-size: clamp(15px, 3.5vw, 18px);
		font-weight: bold;
	}

	.l-wrap .p-kids-sleep-diag {
		position: relative;
		background: #fff;
		border-radius: 24px;
		padding: 40px 32px;
		color: var(--kids-sleep-text);
		box-shadow: 0 12px 40px rgba(0,0,0,0.15);
		z-index: 2;
		margin: 0 auto 40px;
	}

	.l-wrap .p-kids-sleep-diag__title {
		font-family: var(--kids-sleep-font-heading);
		font-size: clamp(18px, 4vw, 22px);
		color: var(--kids-sleep-primary);
		margin: 0 0 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		text-align: center;
	}

	.l-wrap .p-kids-sleep-diag__title::before,
	.l-wrap .p-kids-sleep-diag__title::after {
		content: '';
		display: block;
		width: 40px;
		height: 2px;
		background: var(--kids-sleep-accent);
	}

	.l-wrap .p-kids-sleep-diag__list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.l-wrap .p-kids-sleep-diag__item a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding: 24px 16px;
		background: var(--kids-sleep-secondary);
		border-radius: 16px;
		text-decoration: none;
		color: var(--kids-sleep-primary);
		transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s, box-shadow 0.2s;
	}

	.l-wrap .p-kids-sleep-diag__item a:hover {
		background: #bae6fd;
		transform: translateY(-4px);
		box-shadow: 0 8px 16px rgba(0,0,0,0.05);
	}

	.l-wrap .p-kids-sleep-diag__icon {
		width: 64px;
		height: 64px;
		margin-bottom: 12px;
		border-radius: 50%;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		color: var(--kids-sleep-accent);
	}

	.l-wrap .p-kids-sleep-diag__text {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.l-wrap .p-kids-sleep-diag__worry {
		font-size: 13px;
		font-weight: normal;
		color: #475569;
		margin-bottom: 8px;
		line-height: 1.4;
	}

	.l-wrap .p-kids-sleep-diag__solution {
		font-size: 15px;
		font-weight: bold;
		color: var(--kids-sleep-primary);
		line-height: 1.4;
	}

	@media screen and (max-width: 767px) {
		.l-wrap .p-kids-sleep-hero { padding: 40px 12px 80px; margin-bottom: -50px; }
		.l-wrap .p-kids-sleep-diag { padding: 24px 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); margin-bottom: 40px; }
		.l-wrap .p-kids-sleep-diag__title::before,
		.l-wrap .p-kids-sleep-diag__title::after { width: 20px; }
		.l-wrap .p-kids-sleep-diag__list { grid-template-columns: 1fr; gap: 12px; }
		.l-wrap .p-kids-sleep-diag__item a { 
			flex-direction: row; 
			justify-content: flex-start; 
			padding: 16px; 
		}
		.l-wrap .p-kids-sleep-diag__icon { 
			margin-bottom: 0; 
			margin-right: 16px; 
			width: 48px; 
			height: 48px; 
			font-size: 20px; 
			flex-shrink: 0; 
		}
		.l-wrap .p-kids-sleep-diag__text {
			align-items: flex-start;
			text-align: left;
		}
		.l-wrap .p-kids-sleep-diag__worry {
			font-size: 12px;
			margin-bottom: 4px;
		}
		.l-wrap .p-kids-sleep-diag__solution {
			font-size: 14px;
		}
	}

	/* 共通セクションスタイル */
	.l-wrap .p-kids-sleep-sec {
		margin-bottom: 80px;
		scroll-margin-top: 40px; /* アンカーリンクのジャンプ位置調整 */
	}

	.l-wrap .p-kids-sleep-sec__header {
		text-align: center;
		margin-bottom: 40px;
	}

	.l-wrap .p-kids-sleep-sec__badge {
		display: inline-block;
		background: var(--kids-sleep-accent);
		color: #fff;
		padding: 4px 16px;
		border-radius: 999px;
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 12px;
	}

	.l-wrap .p-kids-sleep-sec__title {
		font-family: var(--kids-sleep-font-heading);
		font-size: clamp(20px, 3vw, 28px);
		color: var(--kids-sleep-primary);
		margin: 0 0 16px;
		line-height: 1.4;
	}

	.l-wrap .p-kids-sleep-sec__desc {
		font-size: 15px;
		color: #64748b;
		margin: 0;
	}

	/* 商品リスト (共通CSS仕様に従った独自クラス) */
	.l-wrap .p-kids-sleep-items {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 32px 24px;
		margin: 0 0 40px;
		padding: 0;
		list-style: none;
	}

	.l-wrap .p-kids-sleep-items__link {
		display: block;
		color: inherit;
		text-decoration: none;
		transition: opacity 0.2s ease-out;
	}

	.l-wrap .p-kids-sleep-items__link:hover {
		opacity: 0.7;
	}

	.l-wrap .p-kids-sleep-items__link:hover img {
		opacity: 1; /* 画像は二重に薄くならないように */
	}

	.l-wrap .p-kids-sleep-items__img-wrap {
		position: relative;
		margin-bottom: 12px;
		background: #f1f5f9;
		border-radius: 8px;
		overflow: hidden;
	}

	.l-wrap .p-kids-sleep-items__img-wrap img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}

	.l-wrap .p-kids-sleep-items__name {
		font-size: 14px;
		line-height: 1.5;
		margin: 0 0 8px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: var(--kids-sleep-text);
	}

	.l-wrap .p-kids-sleep-items__discount {
		font-size: 12px;
		color: #c72937;
		margin: 0 0 4px;
		font-weight: bold;
	}

	.l-wrap .p-kids-sleep-items__price {
		font-size: 16px;
		font-weight: bold;
		margin: 0 0 8px;
	}

	.l-wrap .p-kids-sleep-items__price span {
		font-size: 0.75em;
		font-weight: normal;
		color: #64748b;
	}

	.l-wrap .p-kids-sleep-items__review {
		margin: 0;
		display: flex;
		align-items: center;
	}

	@media screen and (max-width: 767px) {
		.l-wrap .p-kids-sleep-items {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 24px 12px;
		}
	}

	.l-wrap .p-kids-sleep-cta {
		text-align: center;
	}
 .l-wrap .p-kids-sleep-cta .m-fill {
     background-color: #F59E0B;
     color: #fff;
     border: none;
 }

 .l-wrap .p-kids-sleep-cta .button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 0.8em 2em;
     border-radius: 999px;
     text-decoration: none;
     font-weight: bold;
     cursor: pointer;
     transition: opacity 0.2s ease-out;
 }	

	/* レビューセクション */
	.l-wrap .p-kids-sleep-review {
		background: #fff;
		border-radius: 24px;
		padding: 48px 40px;
		box-shadow: 0 4px 24px rgba(0,0,0,0.05);
	}

	.l-wrap .p-kids-sleep-review__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}

	.l-wrap .p-kids-sleep-review__card {
		background: var(--kids-sleep-bg);
		border-radius: 16px;
		padding: 24px;
		border: 1px solid #fce7f3;
	}

	.l-wrap .p-kids-sleep-review__stars {
		color: #F59E0B;
		font-size: 18px;
		margin-bottom: 12px;
		letter-spacing: 2px;
	}

	.l-wrap .p-kids-sleep-review__text {
		font-size: 15px;
		font-weight: bold;
		margin: 0 0 12px;
		line-height: 1.6;
	}

	.l-wrap .p-kids-sleep-review__user {
		font-size: 12px;
		color: #64748b;
		margin: 0;
		text-align: right;
	}

	@media screen and (max-width: 767px) {
		.l-wrap .p-kids-sleep-review { padding: 32px 20px; }
		.l-wrap .p-kids-sleep-review__grid { grid-template-columns: 1fr; gap: 16px; }
	}

	/* FAQセクション (アコーディオン) */
	.l-wrap .p-kids-sleep-faq {
		max-width: 800px;
		margin: 0 auto;
	}

	.l-wrap .p-kids-sleep-faq__details {
		background: #fff;
		border-radius: 12px;
		margin-bottom: 16px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
		overflow: hidden;
	}

	.l-wrap .p-kids-sleep-faq__summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 24px;
		cursor: pointer;
		font-weight: bold;
		color: var(--kids-sleep-primary);
		list-style: none; /* Safari/Chrome */
	}

	.l-wrap .p-kids-sleep-faq__summary::-webkit-details-marker {
		display: none; /* 古いSafari */
	}

	.l-wrap .p-kids-sleep-faq__q {
		padding-right: 20px;
		line-height: 1.5;
	}

	.l-wrap .p-kids-sleep-faq__content {
		padding: 0 24px 24px;
		font-size: 15px;
		color: #475569;
	}

	/* アコーディオンの開閉アイコン制御 */
	.l-wrap details:not([open]) .p-kids-sleep-faq__close,
	.l-wrap details[open] .p-kids-sleep-faq__open {
		display: none;
	}

	/* 関連特集セクション */
	.l-wrap .p-kids-sleep-related {
		margin-top: 60px;
	}

	.l-wrap .p-kids-sleep-related__list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.l-wrap .p-kids-sleep-related__link {
		display: block;
		border-radius: 12px;
		overflow: hidden;
		transition: opacity 0.2s ease-out;
	}

	.l-wrap .p-kids-sleep-related__link:hover {
		opacity: 0.7;
	}

	.l-wrap .p-kids-sleep-related__link img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 5 / 4;
		object-fit: cover;
	}

	@media screen and (max-width: 767px) {
		.l-wrap .p-kids-sleep-related {
			margin-top: 40px;
		}
		.l-wrap .p-kids-sleep-related__list {
			grid-template-columns: 1fr;
			gap: 16px;
		}
	}

	/* CSSで作成した動物シルエットアイコン */
	.l-wrap .css-icon-bear {
		display: inline-block;
		width: 32px;
		height: 26px;
		background: currentColor;
		border-radius: 16px 16px 12px 12px;
		position: relative;
		margin-top: 4px;
	}
	.l-wrap .css-icon-bear::before,
	.l-wrap .css-icon-bear::after {
		content: '';
		position: absolute;
		top: -6px;
		width: 14px;
		height: 14px;
		background: currentColor;
		border-radius: 50%;
	}
	.l-wrap .css-icon-bear::before { left: -2px; }
	.l-wrap .css-icon-bear::after { right: -2px; }

	.l-wrap .css-icon-rabbit {
		display: inline-block;
		width: 28px;
		height: 24px;
		background: currentColor;
		border-radius: 14px 14px 10px 10px;
		position: relative;
		margin-top: 14px;
	}
	.l-wrap .css-icon-rabbit::before,
	.l-wrap .css-icon-rabbit::after {
		content: '';
		position: absolute;
		top: -16px;
		width: 10px;
		height: 22px;
		background: currentColor;
		border-radius: 50% 50% 0 0;
	}
	.l-wrap .css-icon-rabbit::before { left: 2px; }
	.l-wrap .css-icon-rabbit::after { right: 2px; }

	.l-wrap .css-icon-cat {
		display: inline-block;
		width: 30px;
		height: 24px;
		background: currentColor;
		border-radius: 15px 15px 12px 12px;
		position: relative;
		margin-top: 6px;
	}
	.l-wrap .css-icon-cat::before,
	.l-wrap .css-icon-cat::after {
		content: '';
		position: absolute;
		top: -8px;
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 12px solid currentColor;
	}
	.l-wrap .css-icon-cat::before { left: -4px; transform: rotate(-20deg); }
	.l-wrap .css-icon-cat::after { right: -4px; transform: rotate(20deg); }