/* ====================================================================
		 * カラーパレット: 既存サイト (https://room-cutie.com/babysitter/)
		 * WordPress Lightning テーマのカラー変数から取得 (2026-06-23)
		 * ==================================================================== */
		:root {
			--c-primary: #FF9633;       /* Lightning vk-color-primary オレンジ */
			--c-primary-dark: #F28C28;  /* primary-dark */
			--c-primary-vivid: #FFD36A; /* primary-vivid */
			--c-bg-soft: #FFF8EE;       /* オレンジ薄 (アクセント背景) */
			--c-bg-soft2: #FFF0DF;      /* オレンジ薄2 */
			--c-text: #2B2927;          /* body text */
			--c-text-header: #2B2927;   /* header text */
			--c-text-light: #736B65;    /* meta/link */
			--c-highlight: #e05b66;     /* ピンク強調 (原サイトpの色) */
			--c-border: #E8DED3;        /* vk-color-border-image */
			--c-border-light: rgba(0,0,0,0.07);
			--c-bg: #ffffff;
			--c-footer-bg: #f5f5f5;
			--font-jp: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
			--font-round: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
		}
		* { box-sizing: border-box; margin: 0; padding: 0; }
		body {
			font-family: var(--font-jp);
			color: var(--c-text);
			line-height: 1.8;
			background: var(--c-bg);
			font-size: 15px;
			font-weight: 400;
		}
		.material-symbols-outlined {
			font-family: "Material Symbols Outlined";
			font-weight: normal;
			font-style: normal;
			font-size: 22px;
			line-height: 1;
			letter-spacing: normal;
			text-transform: none;
			display: inline-block;
			white-space: nowrap;
			word-wrap: normal;
			direction: ltr;
			-webkit-font-feature-settings: 'liga';
			-webkit-font-smoothing: antialiased;
			vertical-align: middle;
			font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
		}
		/* シーンカードのアイコン (大きめ・プライマリ色) */
		.scene-card .scene-icon .material-symbols-outlined {
			font-size: 40px;
			color: var(--c-primary);
		}
		.scene-card .scene-icon {
			display: block;
			line-height: 1;
			margin-bottom: 12px;
		}
		/* ボタン内アイコン */
		.btn .material-symbols-outlined { font-size: 20px; margin-right: 6px; }
		img { max-width: 100%; height: auto; display: block; }
		a { color: var(--c-text-light); text-decoration: none; }
		a:hover { color: var(--c-primary-dark); }

		.container { max-width: 960px; margin: 0 auto; padding: 0 15px; }
		section { padding: 60px 0; }
		h2 {
			font-size: 28px;
			color: var(--c-text-header);
			text-align: center;
			margin-bottom: 12px;
			font-weight: 500;
			letter-spacing: 0.02em;
		}
		h2::after {
			content: "";
			display: block;
			width: 48px;
			height: 2px;
			background: var(--c-primary);
			margin: 16px auto 0;
		}
		.section-lead {
			text-align: center;
			color: var(--c-text-light);
			margin-bottom: 40px;
			font-size: 15px;
		}

		/* === Header === */
		header {
			background: #fff;
			border-bottom: 1px solid var(--c-border);
			position: sticky;
			top: 0;
			z-index: 100;
		}
		header .container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 12px;
			padding-bottom: 12px;
		}
		header .logo { font-size: 20px; font-weight: 700; color: var(--c-primary-dark); }
		header nav a {
			margin-left: 16px;
			color: var(--c-text);
			font-size: 14px;
		}
		header nav a:hover { color: var(--c-primary); }
		header .header-cta {
			background: var(--c-primary);
			color: #fff;
			padding: 8px 16px;
			border-radius: 0;
			font-size: 13px;
			font-weight: 600;
		}
		header .header-cta:hover { background: var(--c-primary-dark); color: #fff; }

		/* === Hero === */
		.hero {
			background: #ffefe0;
			text-align: center;
			padding: 80px 0 70px;
		}
		.hero h1 {
			font-size: 34px;
			color: var(--c-text-header);
			margin-bottom: 16px;
			line-height: 1.5;
			font-weight: 500;
			letter-spacing: 0.02em;
		}
		.hero h1 .accent { color: var(--c-primary-dark); }
		.hero .lead { font-size: 17px; color: var(--c-text); margin-bottom: 16px; }

		.hero-image {
			display: block;
			margin: 28px auto 8px;
			max-width: 880px;
		}
		.hero-image img {
			width: 100%;
			height: auto;
			border-radius: 24px;
			object-fit: cover;
			display: block;
		}

		/* === CTA buttons === */
		.btn {
			display: inline-block;
			padding: 14px 32px;
			border-radius: 999px;
			font-family: var(--font-round);
			font-weight: 700;
			margin: 6px;
			transition: all 0.2s;
			font-size: 15px;
		}
		.btn:hover { opacity: 0.85; transform: translateY(-1px); }
		.btn-primary { background: var(--c-primary); color: #fff; }
		.btn-primary:hover { background: var(--c-primary-dark); color: #fff; }
		.btn-line { background: #06c755; color: #fff; }
		.btn-line:hover { color: #fff; }
		.btn-tel {
			background: #fff;
			color: var(--c-primary-dark);
			border: 2px solid var(--c-primary);
		}

		/* === Numbers (実績数値) === */
		.numbers { background: var(--c-bg-soft); }
		.number-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
			gap: 16px;
			margin-top: 30px;
		}
		.number-card {
			background: #fff;
			border-radius: 0;
			padding: 24px 16px;
			text-align: center;
			border-top: 4px solid var(--c-primary);
		}
		.number-card .value {
			font-size: 32px;
			font-weight: 700;
			color: var(--c-primary-dark);
			line-height: 1.2;
		}
		.number-card .unit { font-size: 16px; color: var(--c-text); }
		.number-card .label { font-size: 13px; color: var(--c-text-light); margin-top: 8px; }

		/* === About === */
		.about { background: #fff; text-align: center; }
		.about p { font-size: 16px; line-height: 1.9; }

		/* === Strengths === */
		.strengths { background: var(--c-bg-soft); }
		.strengths-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
			gap: 16px;
			margin-top: 30px;
		}
		.strength-card {
			background: #fff;
			border: 1px solid var(--c-border);
			border-radius: 0;
			padding: 22px;
			text-align: left;
		}
		.strength-card h3 {
			color: var(--c-primary-dark);
			font-size: 16px;
			margin-bottom: 8px;
			font-weight: 600;
		}
		.strength-card p { font-size: 14px; color: var(--c-text-light); }

		/* === Scenes === */
		.scenes { background: #fff; }
		.scene-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 20px;
			margin-top: 30px;
		}
		.scene-card {
			background: var(--c-bg-soft);
			border-radius: 0;
			padding: 20px;
			text-align: center;
		}
		.scene-card .scene-title {
			font-weight: 600;
			color: var(--c-primary-dark);
			margin-bottom: 6px;
			font-size: 15px;
		}
		.scene-card p { font-size: 13px; color: var(--c-text); line-height: 1.6; }

		/* === Safety (安心の数値化) === */
		.safety { background: #fff; }
		.safety-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
			gap: 16px;
			margin-top: 30px;
		}
		.safety-card {
			background: var(--c-bg-soft);
			border-radius: 0;
			padding: 24px;
			text-align: center;
		}
		.safety-card .safety-value {
			font-size: 26px;
			font-weight: 700;
			color: var(--c-primary-dark);
			margin-bottom: 6px;
		}
		.safety-card .safety-label {
			font-size: 14px;
			color: var(--c-text);
			font-weight: 600;
			margin-bottom: 8px;
		}
		.safety-card p { font-size: 13px; color: var(--c-text-light); }

		/* === Sitters === */
		.sitters { background: var(--c-bg-soft); }
		.sitter-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 20px;
			margin-top: 30px;
		}
		.sitter-card {
			background: #fff;
			border: 1px solid var(--c-border);
			border-radius: 0;
			padding: 20px;
			text-align: center;
		}
		.sitter-photo {
			width: 120px;
			height: 120px;
			border-radius: 50%;
			background: var(--c-bg-soft);
			margin: 0 auto 12px;
			border: 2px dashed var(--c-primary);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 11px;
			color: var(--c-text-light);
			text-align: center;
			padding: 8px;
		}
		.sitter-name { font-weight: 700; margin-bottom: 4px; }
		.sitter-cert { font-size: 12px; color: var(--c-text-light); margin-bottom: 8px; }
		.sitter-comment { font-size: 13px; color: var(--c-text); text-align: left; }

		/* === Subsidy === */
		.subsidy { background: #fff; }
		.subsidy-sim {
			background: #fff3e0;
			border: 2px solid var(--c-primary);
			border-radius: 0;
			padding: 28px;
			margin: 24px 0;
		}
		.subsidy-sim h3 {
			color: var(--c-primary-dark);
			font-size: 19px;
			text-align: center;
			margin-bottom: 16px;
		}
		.sim-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 0;
			border-bottom: 1px dashed var(--c-border);
			font-size: 15px;
		}
		.sim-row.total {
			border-bottom: none;
			border-top: 2px solid var(--c-primary);
			padding-top: 14px;
			margin-top: 6px;
			font-weight: 700;
			font-size: 18px;
		}
		.sim-row.total .sim-price { color: var(--c-primary-dark); font-size: 24px; }
		.sim-price { font-weight: 700; }
		.sim-strike { text-decoration: line-through; color: var(--c-text-light); margin-right: 8px; }
		.subsidy-table {
			width: 100%;
			border-collapse: collapse;
			margin-top: 20px;
			font-size: 14px;
		}
		.subsidy-table th, .subsidy-table td {
			border: 1px solid var(--c-border);
			padding: 12px;
			text-align: center;
		}
		.subsidy-table thead { background: var(--c-bg-soft); }
		.subsidy-table th { color: var(--c-primary-dark); font-weight: 700; }

		/* === Flow === */
		.flow { background: var(--c-bg-soft); }
		.flow-steps {
			margin-top: 30px;
			counter-reset: step;
		}
		.flow-step {
			background: #fff;
			border-radius: 0;
			padding: 22px 22px 22px 90px;
			margin-bottom: 12px;
			position: relative;
		}
		.flow-step::before {
			counter-increment: step;
			content: counter(step);
			position: absolute;
			left: 20px;
			top: 50%;
			transform: translateY(-50%);
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: var(--c-primary);
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			font-weight: 700;
		}
		.flow-step h3 {
			color: var(--c-primary-dark);
			margin-bottom: 4px;
			font-size: 17px;
		}
		.flow-step p { font-size: 14px; color: var(--c-text-light); }

		/* === Pricing === */
		.pricing { background: #fff; }
		.pricing-table {
			width: 100%;
			border-collapse: collapse;
			margin-top: 30px;
			font-size: 15px;
		}
		.pricing-table th, .pricing-table td {
			border: 1px solid var(--c-border);
			padding: 14px;
			text-align: center;
		}
		.pricing-table thead {
			background: var(--c-bg-soft);
			color: var(--c-primary-dark);
		}
		.pricing-table .price { font-weight: 700; color: var(--c-primary-dark); }
		.pricing-notes { font-size: 13px; color: var(--c-text-light); margin-top: 12px; }
		.campaign-banner {
			background: var(--c-primary);
			color: #fff;
			border-radius: 0;
			padding: 18px;
			text-align: center;
			margin: 24px 0;
		}
		.campaign-banner strong { font-size: 20px; }

		/* === Voice === */
		.voice { background: var(--c-bg-soft); }
		.voice-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
			gap: 20px;
			margin-top: 30px;
		}
		.voice-card {
			background: #fff;
			border: 1px solid var(--c-border);
			border-radius: 0;
			padding: 22px;
		}
		.voice-card .voice-meta { font-size: 12px; color: var(--c-text-light); margin-bottom: 8px; }
		.voice-card .voice-text { font-size: 14px; line-height: 1.7; }
		.voice-card .voice-text::before { content: "「"; color: var(--c-primary); font-size: 24px; vertical-align: top; }
		.voice-card .voice-text::after { content: "」"; color: var(--c-primary); font-size: 24px; }
		.voice-card .voice-scene {
			display: inline-block;
			background: var(--c-bg-soft);
			color: var(--c-primary-dark);
			padding: 4px 10px;
			border-radius: 0;
			font-size: 12px;
			margin-bottom: 8px;
		}

		/* === FAQ === */
		.faq { background: #fff; }
		.faq-category-label {
			color: var(--c-primary-dark);
			font-weight: 700;
			margin-top: 24px;
			padding-bottom: 8px;
			border-bottom: 2px solid var(--c-primary);
			font-size: 15px;
		}
		.faq-list { margin-top: 12px; }
		.faq-item {
			border-bottom: 1px solid var(--c-border);
			padding: 18px 0;
		}
		.faq-q {
			font-weight: 700;
			color: var(--c-primary-dark);
			margin-bottom: 6px;
		}
		.faq-q::before { content: "Q. "; color: var(--c-primary); }
		.faq-a { color: var(--c-text); font-size: 15px; line-height: 1.8; }
		.faq-a::before { content: "A. "; color: var(--c-primary); font-weight: 700; }

		/* === Company === */
		.company { background: var(--c-bg-soft); }
		.company-table {
			max-width: 600px;
			margin: 30px auto 0;
			width: 100%;
			border-collapse: collapse;
		}
		/* セルは背景を敷かず、横罫線だけで区切る。
		   クリーム地（.company）に白を乗せると面が浮いて見えるため。 */
		.company-table th, .company-table td {
			padding: 16px 14px;
			text-align: left;
			background: transparent;
			border-bottom: 1px solid var(--c-border);
			font-size: 14px;
			line-height: 1.9;
		}
		.company-table tr:first-child th,
		.company-table tr:first-child td { border-top: 1px solid var(--c-border); }
		.company-table th {
			color: var(--c-primary-dark);
			width: 30%;
			font-weight: 700;
			white-space: nowrap;
		}
		@media (max-width: 767px) {
			.company-table th { white-space: normal; width: 34%; }
			.company-table th, .company-table td { padding: 14px 10px; }
		}

		/* === Final CTA === */
		.final-cta {
			background: var(--c-primary);
			color: #fff;
			text-align: center;
		}
		.final-cta h2 { color: #fff; }
		.final-cta h2::after { background: #fff; }
		.final-cta p { font-size: 17px; margin-bottom: 24px; }
		.final-cta .btn { background: #fff; color: var(--c-primary-dark); }
		.final-cta .btn-line { background: #06c755; color: #fff; }

		footer {
			background: var(--c-footer-bg);
			color: var(--c-text);
			padding: 30px 0;
			text-align: center;
			font-size: 13px;
		}
		footer a { color: var(--c-text); margin: 0 8px; }

		@media (max-width: 640px) {
			h2 { font-size: 22px; }
			.hero h1 { font-size: 24px; }
			section { padding: 40px 0; }
			.btn { display: block; margin: 8px 0; }
			header nav { display: none; }
		}
	h1,h2,h3,h4{font-family:var(--font-round);}
body{font-size:17px;}
@media(min-width:768px){body{font-size:18px;}}
	
/* --- デザインガイド Ver.1.0 余白基準（8/16/24/40/64）への整合 --- */
section{padding:64px 0;}
.container{padding:0 24px;}
h2{margin-bottom:16px;}
.section-lead{margin-bottom:40px;}
.card,.strength-card,.scene-card,.safety-card,.sitter-card,.number-card{border-radius:16px;}
@media(max-width:767px){section{padding:40px 0;}.container{padding:0 20px;}}
	
/* ============================================================
   スマートフォン最適化（2026-08-06 Playwrightレビューにもとづく）
   ・日本語の折り返しを文節単位にして「泣き別れ」を防ぐ
   ・PC用に入れた行長調整の <br> をSPでは無効化
   ・4列テーブルはSPでカード型に組み替える
   ============================================================ */

/* 見出し・リード文は文節で折り返す（対応ブラウザのみ適用され、非対応でも劣化しない） */
h1, h2, h3, .hero .lead, .section-lead, .badge, .label, .safety-label {
	word-break: auto-phrase;
	overflow-wrap: anywhere;
}

@media (max-width: 767px) {
	/* PC向けの行長調整の改行は無効化（SPでは不自然な位置で切れるため） */
	br.br-pc { display: none; }

	/* 1文字だけ次行に落ちるのを防ぐためサイズを詰める */
	.hero h1 { font-size: 22px; letter-spacing: 0; line-height: 1.6; }
	.hero .lead { font-size: 15.5px; }
	h2 { font-size: 20px; line-height: 1.6; }
	h3 { font-size: 17px; }
	.section-lead { font-size: 14.5px; }

	/* 実績数値は2列に（1列だと縦に間延びする） */
	.number-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; margin-top: 20px; }
	.number-card { padding: 18px 10px; }
	.number-card .value { font-size: 30px; }
	.number-card .label { font-size: 12.5px; line-height: 1.6; }

	/* カード類の余白を圧縮 */
	.safety-grid, .strength-grid, .scene-grid, .sitter-grid { gap: 12px; }
	.safety-card, .strength-card, .scene-card, .sitter-card { padding: 20px 16px; }

	/* 助成テーブル：4列を詰め込むと1〜2文字で改行されるためカード型にする */
	.subsidy-table thead { display: none; }
	.subsidy-table, .subsidy-table tbody, .subsidy-table tr, .subsidy-table td { display: block; width: 100%; }
	.subsidy-table { border: 0; margin-top: 16px; }
	.subsidy-table tr {
		border: 1px solid var(--c-border);
		border-radius: 16px;
		background: #fff;
		padding: 8px 4px;
		margin-bottom: 14px;
	}
	.subsidy-table td {
		border: 0;
		border-bottom: 1px solid var(--c-border);
		text-align: left;
		padding: 10px 14px;
		display: flex;
		gap: 12px;
		align-items: baseline;
		font-size: 14px;
	}
	.subsidy-table tr td:last-child { border-bottom: 0; }
	.subsidy-table td::before {
		content: attr(data-label);
		flex: 0 0 6.6em;
		color: var(--c-text-light);
		font-size: 12.5px;
	}

	/* タップ領域の確保（最低44px） */
	header .btn, .header-cta { min-height: 44px; display: inline-flex; align-items: center; }
	footer a { display: inline-block; padding: 8px 4px; }

	/* 日本語の禁則処理（長音・小書き文字が行頭に来るのを防ぐ） */
	body { line-break: strict; }
	.subsidy-table td::before { flex: 0 0 6.6em; font-size: 12px; line-height: 1.5; }
	/* 極小文字の底上げ */

	footer p { font-size: 12.5px; }
}

	


.cf-wrap{max-width:680px;margin:0 auto;}
.cf-field{margin-bottom:20px;}
.cf-field label{display:block;font-weight:700;margin-bottom:6px;font-size:15px;}
.cf-req{background:var(--c-primary);color:#fff;font-size:11px;padding:2px 7px;margin-left:8px;vertical-align:middle;}
.cf-any{background:#bbb;color:#fff;font-size:11px;padding:2px 7px;margin-left:8px;vertical-align:middle;}
.cf-field input[type=text],.cf-field input[type=email],.cf-field input[type=tel],.cf-field select,.cf-field textarea{
 width:100%;padding:13px 14px;border:1px solid #ccc;font-size:16px;font-family:inherit;background:#fff;box-sizing:border-box;}
.cf-field textarea{min-height:120px;resize:vertical;}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{outline:2px solid var(--c-primary);border-color:var(--c-primary);}
.cf-hint{font-size:13px;color:#777;margin-top:5px;}
.cf-radio{display:inline-flex;align-items:center;margin-right:18px;font-weight:400;font-size:15px;}
.cf-radio input{margin-right:6px;}
.cf-consent{background:#f7f7f7;padding:16px;font-size:14px;line-height:1.8;}
.cf-submit{display:block;width:100%;padding:18px;font-size:18px;font-weight:700;color:#fff;background:var(--c-primary);border:0;border-radius:0;cursor:pointer;font-family:inherit;}
.cf-submit:hover{background:var(--c-primary-dark);}
.cf-submit:disabled{background:#bbb;cursor:not-allowed;}
.cf-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important;}
.cf-msg{padding:18px;margin-bottom:20px;line-height:1.8;display:none;}
.cf-msg.ok{background:#e8f5e9;border:1px solid #66bb6a;color:#2e7d32;display:block;}
.cf-msg.ng{background:#fdecea;border:1px solid #ef5350;color:#c62828;display:block;}

/* === SP 最終調整（他ルールより後に置いて確実に適用させる・2026-08-06） === */
@media (max-width: 767px) {
	.scene-card p, .strength-card p, .safety-card p { font-size: 14px !important; line-height: 1.85; }
	.faq-q { font-size: 15px !important; line-height: 1.7; }
	.cf-hint { font-size: 13px !important; line-height: 1.8; }
	footer, footer p, footer small, footer * { font-size: 12.5px !important; }
	footer p:last-child { font-size: 12px !important; }
	/* 短い説明文は行長を均等化して、最終行に1〜2文字だけ残るのを防ぐ */
	.scene-card p, .strength-card p, .safety-card p, .sitter-comment,
	.faq-a, .cf-hint, .section-lead, .hero .lead {
		text-wrap: pretty;
		text-wrap: balance;
		word-break: auto-phrase;
	}
}
.hero-copy {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
	padding: 6% 6% 0;
	text-align: center;
	/* 白い壁側に文字を置くため、上部だけ明るさを足して可読性を確保 */
	background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 42%, rgba(255,255,255,0) 72%);
	border-radius: 24px;
	pointer-events: none;
}
.hero-copy h1 { margin: 0 0 12px; }
.hero-copy .lead { margin: 0 0 6px; }
.hero-copy .lead-sub { font-size: 15px; color: var(--c-text-light); }

/* ① ヘッダーCTAをLINEカラーに揃える */
header .btn-primary, .header-cta, header .btn { background: #06c755 !important; color: #fff !important; }
header .btn-primary:hover, header .btn:hover { background: #05a948 !important; }

/* ④ 実績数値カード：角丸と上の枠線をなくす */
.number-card { border-radius: 0 !important; border-top: 0 !important; }

/* ⑤ 在籍シッターのイラストアイコンをなくす */
.sitter-card .sitter-photo { display: none !important; }

/* ⑥ エリアカードの説明文を削除（HTML側で対応） */

/* ⑦ 箇条書きのマーカーがはみ出さないようにする */
.pricing-notes, .pricing-notes ul, .price-note, section ul {
	list-style-position: inside;
	padding-left: 0;
	margin-left: 0;
}
.pricing-notes li, .price-note li { text-indent: 0; }

/* ⑧ ご利用者様の声：声が集まるまで非表示 */
#voice, .voice, section.voice { display: none !important; }

/* ⑨ 回答が未確定のFAQは削除せず非表示にする */
/* 非表示にするが、HTMLには残す（条件が整ったら is-hidden を外して復活させる） */
.is-hidden { display: none !important; }
.faq-item.is-hidden { display: none !important; }

	
/* ============================================================
   AUN 修正依頼（SP）反映 2026-08-11
   ============================================================ */

/* ② カード見出しの左にアイコンを置く（PC・SP共通） */
.strength-card { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; row-gap: 4px; align-items: center; }
.strength-icon { display: block; width: 56px; height: 56px; grid-row: 1 / span 2; }
.strength-card h3 { margin: 0; align-self: end; }
.strength-card p { margin: 0; align-self: start; grid-column: 2; }

/* ④ 在籍シッターの説明文を中央揃えに */
.sitters .container > p { text-align: center; }

@media (max-width: 767px) {
	/* ① ヒーロー：文字を濃くし、背景に色を敷いて可読性を上げる */
	.hero-copy {
		background: linear-gradient(180deg, rgba(255,248,238,.97) 0%, rgba(255,248,238,.93) 55%, rgba(255,248,238,.55) 80%, rgba(255,248,238,0) 100%);
		padding: 7% 6% 0;
	}
	.hero-copy h1 { color: var(--c-text); text-shadow: 0 1px 2px rgba(255,255,255,.7); }
	.hero-copy .lead { color: var(--c-text) !important; font-weight: 500; }
	.hero-copy .lead-sub { color: var(--c-text) !important; font-weight: 400; }

	/* ②SP: アイコンを少し小さく */
	.strength-card { grid-template-columns: 48px 1fr; column-gap: 12px; }
	.strength-icon { width: 48px; height: 48px; }

	/* ⑤⑥ 助成シミュレーション：ラベルと金額を改行して積み、1段小さく */
	.sim-row { display: block !important; font-size: 14px !important; line-height: 1.7; }
	.sim-row > span { display: block; }
	.sim-row .sim-price { display: block; text-align: right; margin-top: 2px; font-size: 15px; }
	.sim-row.total .sim-price { font-size: 20px; }
	.sim-row.total .sim-strike { font-size: 13px; }
}

	
/* ① SPヒーロー：写真を活かしつつ文字の背後だけ薄く敷く（2026-08-11 調整） */
@media (max-width: 767px) {
	.hero-copy {
		background: none !important;
		padding: 5% 4% 0 !important;
	}
	.hero-copy h1 { text-shadow: none; }
}

	
/* ① SPヒーロー：縦長画像の上部余白にテキストを載せる（2026-08-11 再調整） */
@media (max-width: 767px) {
	.hero-copy { justify-content: flex-start; padding: 4% 4% 0 !important; }
	.hero-copy h1 { font-size: 20px; }
	.hero-copy .lead { font-size: 14.5px; }
	.hero-copy .lead-sub { font-size: 13px; }
}

	
/* ============================================================
   2026-08-11 修正: 画像への重ねを取りやめ、テキストは画像の上に戻す
   （顔が隠れてしまうため。PC・SP共通）
   ============================================================ */
.hero-copy {
	position: static !important;
	inset: auto !important;
	display: block !important;
	background: none !important;
	backdrop-filter: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	pointer-events: auto !important;
	text-align: center;
	margin-bottom: 24px;
}
.hero-copy h1 { text-shadow: none !important; color: var(--c-text-header); }
.hero-copy .lead { color: var(--c-text) !important; }
.hero-copy .lead-sub { color: var(--c-text-light) !important; font-size: 15px; }
.hero-image { display: block; margin: 0 auto; max-width: 880px; }
.hero-image img { width: 100%; height: auto; max-height: none !important; border-radius: 24px; object-fit: cover; }

/* 在籍シッターの説明文を中央揃えに（SP依頼④） */
.sitters p { text-align: center !important; }

@media (max-width: 767px) {
	.hero-copy { margin-bottom: 20px; }
	.hero-copy h1 { font-size: 22px; }
	.hero-copy .lead { font-size: 15px; }
	.hero-copy .lead-sub { font-size: 13.5px; }
	.hero-image img { max-height: 58vh !important; object-position: center 60%; }
}

	
/* ============================================================
   シッタープロフィール（2026-08-11 追加）
   実名・実写は使わず、イニシャル＋イラストで紹介する
   ============================================================ */
.profile-heading { text-align: center; margin: 56px 0 8px; font-size: 22px; color: var(--c-text-header); }
.profile-lead { text-align: center; color: var(--c-text-light); font-size: 14.5px; margin: 0 0 28px; }
.profile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px;
	max-width: 1000px;
	margin: 0 auto;
}
.profile-card {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 20px;
	padding: 20px 18px 22px;
	text-align: center;
}
.profile-photo {
	width: 128px; height: 128px;
	display: block; margin: 0 auto 12px;
	border-radius: 50%;
	background: var(--c-bg-soft);
	object-fit: cover;
}
.profile-name { font-family: var(--font-round); font-size: 19px; font-weight: 700; margin: 0 0 4px; color: var(--c-text-header); }
.profile-meta { font-size: 14px; color: var(--c-primary-dark); margin: 0 0 14px; }
.profile-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 0; text-align: left; font-size: 13.5px; line-height: 1.7; }
.profile-dl dt { color: var(--c-text-light); white-space: nowrap; }
.profile-dl dd { margin: 0; }

@media (max-width: 767px) {
	.profile-heading { margin: 40px 0 8px; font-size: 19px; }
	.profile-lead { font-size: 14px; margin-bottom: 20px; }
	.profile-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.profile-card { padding: 16px 12px 18px; }
	.profile-photo { width: 92px; height: 92px; }
	.profile-name { font-size: 16px; }
	.profile-meta { font-size: 12.5px; margin-bottom: 10px; }
	.profile-dl { grid-template-columns: 1fr; gap: 2px; font-size: 12.5px; }
	.profile-dl dt { font-size: 11.5px; margin-top: 4px; }
}