/*
 * /category/0004/ リニューアル用スタイル
 * 配置先: themes/living-service202209/assets/category-0004/css/category-0004.css
 *
 * 参照Figma: GG6xJqaSe7hrgssaPFgxBW / 編集_サービスPR【新】 (node 244:82)
 */

.cat-0004 {
	color: #1a1a1a;
	font-family: YuGothic, "Yu Gothic", "Hiragino Kaku Gothic Pro", sans-serif;
	line-height: 1.5;
	letter-spacing: 0;
	font-feature-settings: normal; /* base.css の palt を一旦無効化 */
	font-kerning: none;
}
@media (max-width: 768px) {
	.cat-0004 { overflow-x: hidden; }
}

/* 暮らしのサービスバナー (.pgh-pc/.pgh-sp) は theme 標準の表示切替を尊重するため除外 */
.cat-0004 img:not(.pgh-pc):not(.pgh-sp) {
	display: block;
	max-width: 100%;
	height: auto;
}


/* ===== 共通: 幅1132px、上30px ===== */
.cat-0004__sec-feat01-heading,
.cat-0004__sec-feat02-heading,
.cat-0004__sec-feat03-heading,
.cat-0004__sec-feat01-body,
.cat-0004__sec-feat02-body,
.cat-0004__cta,
.cat-0004__points,
.cat-0004__worries,
.cat-0004__flow,
.cat-0004__safety {
	max-width: 1132px;
	margin: 30px auto 0;
}
/* 業者リストカードグリッド — 共通クラスから外して個別指定 */
.cat-0004__sec-movers-list {
	max-width: 1154px;
	margin: 0 auto;
	padding-top: 24px;
}

/* 見出しセクション — 個別に max-width/margin/padding を持ち、共通クラスは使わない */
.cat-0004__sec-points-heading {
	max-width: 1131px;
	margin: 30px auto 0;
	padding-top: 128px;
	padding-bottom: 50px;
}
.cat-0004__sec-worries-heading {
	max-width: 1131px;
	margin: 30px auto 0;
	padding-top: 35px;
	padding-bottom: 50px;
}
.cat-0004__sec-flow-heading {
	max-width: 1131px;
	margin: 116px auto 0;
	padding-top: 35px;
	padding-bottom: 50px;
}
.cat-0004__sec-pickup-heading {
	max-width: 1131px;
	margin: 115px auto 0;
	padding-top: 35px;
	padding-bottom: 50px;
}

.cat-0004__sec-points-cards {
	margin-top: 38px;
	padding: 0;
}

.cat-0004__sec-feat01-heading {
	padding-top: 24px;
}
.cat-0004__sec-feat02-heading {
	padding-top: 62px;
	padding-bottom: 20px;
}
.cat-0004__sec-feat03-heading {
	padding-top: 88px;
	padding-bottom: 56px;
}

/* feature-body は共通スタイルを持たない。各セクション固有クラスで個別指定 */
.cat-0004__sec-feat01-body {
	padding-top: 37px;
}
.cat-0004__sec-feat02-body {
	padding-top: 37px;
}

.cat-0004__points,
.cat-0004__worries,
.cat-0004__flow,
.cat-0004__pickup,
.cat-0004__safety,
.cat-0004__movers {
	padding-top: 0;
	padding-bottom: 0;
}

.cat-0004__cta {
	padding-top: 24px;
	padding-bottom: 50px;
}

/* .cat-0004__livero の padding は下部 LIVERO ルールで個別指定 */

/* ===== FV — Figma: 1172px幅 ===== */
.cat-0004__fv {
	padding: 0;
	margin-top: 30px;
}
@media (max-width: 768px) {
	.cat-0004__fv {
		padding: 0 21px;
		box-sizing: border-box;
		margin-top: 9px;
	}
}
.cat-0004__fv-inner {
	max-width: 1172px;
	margin: 0 auto;
	padding: 0;
}
/* FV 下 データ元注記 — Figma 2005:116（x=57, y=614 / FV 下） */
.cat-0004__fv-note {
	margin: 6px 0 0 57px;
	padding: 0;
	font-family: 'YuGothic', sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: #045A9F;
	letter-spacing: 0;
}

/* ===== CTA ボタン（Figma: 244:291 / 244:988 - 1000x150 #fe581a） ===== */
.cat-0004__cta {
	text-align: center;
}
.cat-0004__cta-btn,
.cat-0004__cta-btn:link,
.cat-0004__cta-btn:visited,
.cat-0004__cta-btn:hover,
.cat-0004__cta-btn:active {
	text-decoration: none !important;
	border-bottom: none !important;
}
.cat-0004__cta-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 62px;
	width: 100%;
	max-width: 1000px;
	height: 150px;
	margin: 0 auto;
	background: #fe581a;
	border: 1px solid #ffffff;
	border-radius: 30px;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
	color: #ffffff;
	box-sizing: border-box;
	transition: opacity 0.2s;
}
.cat-0004__cta-btn:hover {
	opacity: 0.9;
}
/* Figma: YuGothic Bold 48px line-height 70px 白 中央揃え */
.cat-0004__cta-text {
	font-family: YuGothic, "Yu Gothic", sans-serif;
	font-size: 48px;
	font-weight: 700;
	line-height: 70px;
	color: #ffffff;
	letter-spacing: 0;
	margin: 0;
}
/* 矢印 — Figma: 60x60 円形矢印、テキストと gap 62px で中央寄せ */
.cat-0004__cta-arrow {
	width: 60px;
	height: 60px;
	flex: 0 0 60px;
	display: block;
}
@media (max-width: 768px) {
	/* SP CTA: Figma 321:1266 — テキスト上 / 矢印下 の縦積みレイアウト */
	.cat-0004__cta-btn {
		flex-direction: column;
		height: 85px;
		border-radius: 12px;
		gap: 0;
	}
	.cat-0004__cta-text {
		font-size: 21px;
		line-height: 32px;
	}
	.cat-0004__cta-arrow {
		width: 27px;
		height: 27px;
		flex: 0 0 27px;
	}
	/* 円: 白塗り、矢印: オレンジ */
	.cat-0004__cta-arrow circle {
		fill: #ffffff;
		stroke: none;
	}
	.cat-0004__cta-arrow path {
		stroke: #fe581a;
	}
}

/* ===== 見出し ===== */
.cat-0004__heading {
	font-size: 45px;
	font-weight: 700;
	text-align: center;
	color: #045A9F;
	line-height: 1.5;
	letter-spacing: 0;
}
.cat-0004__heading--lg {
	font-family: YuGothic, "Yu Gothic", sans-serif;
	font-size: 48px;
	font-weight: 700;
	line-height: 72px;
	letter-spacing: 0;
	white-space: nowrap;
}
.cat-0004__heading--pickup {
	font-family: "Hiragino Kaku Gothic Pro", YuGothic, "Yu Gothic", sans-serif;
	font-weight: 600;
}
/* PICKUP 見出しの em space セパレータ — PC 表示、SP 非表示 */
.cat-0004__pickup-sep { display: inline; }
@media (max-width: 768px) {
	.cat-0004__pickup-sep { display: none; }
}
.cat-0004__heading--movers {
	font-size: 45px;
	font-weight: 700;
}
@media (max-width: 768px) {
	.cat-0004__heading {
		font-size: 26px;
		line-height: 1.5;
	}
	.cat-0004__heading--lg {
		font-size: 26px;
		white-space: normal;
		line-height: 1.5;
	}
	.cat-0004__heading--movers {
		font-size: 26px;
		line-height: 1.5;
	}
	/* ===== セクション個別の SP パディング
	 *   DevTools でセクション単位に個別調整できるようセレクタを分離。
	 *   全て .cat-0004__sec-* の個別クラスで指定（共通クラスは使わない）。
	 *   PC 無改修、SP のみ有効。 */
	.cat-0004__sec-points-heading   { padding-left: 39px; padding-right: 39px; padding-top: 28px; padding-bottom: 0; box-sizing: border-box; }
	.cat-0004__sec-points-cards     { padding-top: 27px; box-sizing: border-box; }
	.cat-0004__sec-feat01-heading   { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
	.cat-0004__sec-feat01-body      { padding-left: 32px; padding-right: 32px; padding-top: 33px; box-sizing: border-box; }
	.cat-0004__sec-before-after     { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
	.cat-0004__sec-cta-1            { padding-left: 16px; padding-right: 16px; padding-top: 0; box-sizing: border-box; }
	.cat-0004__sec-feat02-heading   { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
	.cat-0004__sec-feat02-body      { padding-left: 16px; padding-right: 16px; padding-top: 55px; box-sizing: border-box; }
	.cat-0004__sec-feat03-heading   { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
	.cat-0004__sec-safety           { padding-left: 22px; padding-right: 22px; box-sizing: border-box; }
	.cat-0004__sec-worries-heading  { padding-left: 16px; padding-right: 16px; padding-top: 54px; padding-bottom: 46px; box-sizing: border-box; }
	.cat-0004__sec-worries-cards    { padding-left: 16px; padding-right: 16px; margin-top: 0 !important; box-sizing: border-box; }
	.cat-0004__sec-voice            { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
	.cat-0004__sec-flow-heading     { padding-left: 16px; padding-right: 16px; padding-top: 0; padding-bottom: 44px !important; box-sizing: border-box; }
	.cat-0004__sec-flow-chart       { padding-inline: 40px; box-sizing: border-box; }
	.cat-0004__sec-pickup-heading   { max-width: 1131px; margin: 0 auto; padding: 17px 16px 45px; box-sizing: border-box; }
	.cat-0004__pickup               { padding-top: 0; padding-bottom: 0; padding-inline: 3px; box-sizing: border-box; }
	.cat-0004__sec-pickup-cards     { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
	.cat-0004__sec-movers-heading   { padding-left: 40px; padding-right: 40px; box-sizing: border-box; }
	.cat-0004__sec-movers-list      { padding-left: 4px; padding-right: 4px; padding-top: 9px; box-sizing: border-box; }
	.cat-0004__sec-cta-bottom       { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
	.cat-0004__sec-livero           { padding-left: 25px; padding-right: 25px; box-sizing: border-box; }
	.cat-0004__movers-note          { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
	.cat-0004__price-compare-note   { box-sizing: border-box; }
	/* FV 下注記（PC は margin-left:57px 固定、SP は Figma 準拠） */
	.cat-0004__fv-note {
		margin-left: 1px;
		margin-top: 13px;
		font-size: 12px;
		line-height: 18px;
	}
}

/* ===== 3ポイントカード（Figma: 244:104 - 番号+タイトル+円形画像） ===== */
.cat-0004__points-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 83px;
	letter-spacing: 0;
}
.cat-0004__point {
	text-align: center;
}
/* 番号 — Figma: 80px Helvetica Bold rgba(4,90,159,0.3) */
.cat-0004__point-num {
	font-size: 80px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;
	color: rgba(4, 90, 159, 0.3);
	line-height: 1.15;
	margin: 0;
}
/* タイトル — Figma: 26px YuGothic Bold #045A9F */
.cat-0004__point-title {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.5;
	color: #045A9F;
	margin: 10px 0 0;
}
/* 円形画像 — Figma: 321x321 */
.cat-0004__point-illust {
	display: block;
	margin: 28px auto 0;
	width: 100%;
	max-width: 321px;
}
.cat-0004__point-illust img {
	width: 100%;
	height: auto;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
@media (max-width: 768px) {
	.cat-0004__points-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.cat-0004__point-num { font-size: 60px; line-height: 1.15; }
	.cat-0004__point-title { font-size: 21px; line-height: 1.5; margin-top: 6px; }
	.cat-0004__point-illust { margin-top: 23px; padding-inline: 100px; }
}

/* ===== 各フィーチャー見出し（PC 共通レイアウト、SP override は per-section で） ===== */
.cat-0004__sec-feat01-heading,
.cat-0004__sec-feat02-heading,
.cat-0004__sec-feat03-heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 58px;
	white-space: nowrap;
}
.cat-0004__sec-feat01-body,
.cat-0004__sec-feat02-body {
	text-align: center;
}
.cat-0004__feature-num {
	font-size: 100px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;
	color: rgba(4, 90, 159, 0.3);
	line-height: 1.15;
}
.cat-0004__feature-title {
	font-size: 45px;
	font-weight: 700;
	color: #045A9F;
	line-height: normal;
	margin: 0;
}
/* 各セクション独立（DevTools で個別調整可）。PC/SP ともそれぞれ独立 */
.cat-0004__feature-lead--feat01,
.cat-0004__feature-lead--feat02 {
	font-size: 36px;
	font-weight: 600;
	color: #045A9F;
	line-height: 1.5;
}
.cat-0004__feature-desc {
	font-size: 24px;
	font-weight: 300;
	line-height: 1.5;
	margin-top: 23px;
}
/* 独立クラス（base `.cat-0004__feature-desc` に依存しないフル定義）。
 * HTML 側も `--emphasis` / `--lg` 単独で付与する（ペア指定しない）。 */
.cat-0004__feature-desc--emphasis {
	font-size: 24px;
	font-weight: 300;
	line-height: 1.5;
	margin-top: 36px;
}
.cat-0004__feature-desc--lg {
	font-size: 28px;
	font-weight: 300;
	line-height: 1.5;
	margin-top: 52px;
}
@media (max-width: 768px) {
	/* 各セクション独立（DevTools で一つずつ触れる） */
	.cat-0004__sec-feat01-heading {
		flex-direction: column;
		gap: 19px;
		white-space: normal;
		text-align: center;
		padding-top: 37px;
	}
	.cat-0004__sec-feat02-heading {
		flex-direction: column;
		gap: 23px;
		white-space: normal;
		text-align: center;
		padding-top: 18px;
		padding-bottom: 0;
	}
	.cat-0004__sec-feat03-heading {
		flex-direction: column;
		gap: 20px;
		white-space: normal;
		text-align: center;
		padding-top: 37px;
		padding-bottom: 0;
	}
	.cat-0004__feature-num { font-size: 60px; line-height: 1.15; }
	.cat-0004__feature-title { font-size: 26px; line-height: 1.5; }
	.cat-0004__feature-lead--feat01 { font-size: 21px; line-height: 1.5; }
	.cat-0004__feature-lead--feat02 { font-size: 21px; line-height: 1.5; padding-inline: 40px; }
	.cat-0004__feature-desc { font-size: 16px; line-height: 1.5; margin-top: 33px; padding-inline: 3px; }
	.cat-0004__feature-desc--emphasis { font-size: 16px; line-height: 1.5; margin-top: 24px; }
	.cat-0004__feature-desc--lg { font-size: 16px; line-height: 1.5; padding-inline: 24px; margin-top: 30px; }
}

/* ===== #7 BEFORE/AFTER 図解 ===== */
.cat-0004__sec-before-after {
	max-width: 1150px;
	margin: 59px auto 0;
	text-align: center;
}
/* PC は 2 枚目（SP 用 AFTER）を非表示、SP のみ縦積みで表示 */
.cat-0004__before-after-sp2 { display: none; }
@media (max-width: 768px) {
	.cat-0004__sec-before-after {
		margin-top: 41px;
		margin-bottom: -6px !important;
	}
	.cat-0004__before-after-sp1 {
		display: block;
		padding-inline: 6px;
		box-sizing: border-box;
	}
	.cat-0004__before-after-sp2 {
		display: block;
		margin-top: 11px;
		padding-inline: 6px;
		box-sizing: border-box;
	}
}

/* 申込フロー: SP は 2 枚画像を縦積み（gap 10px）、PC は 1 枚画像 */
.cat-0004__flow-sp2 { display: none; }
@media (max-width: 768px) {
	.cat-0004__flow-sp1 { display: block; }
	.cat-0004__flow-sp2 {
		display: block;
		margin-top: 80px;
	}
}

/* ===== #10 料金比較図 2分割 ===== */
.cat-0004__sec-price-compare {
	max-width: 1150px;
	margin: 52px auto 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 44px;
}
.cat-0004__sec-price-compare > picture {
	display: block;
	min-width: 0;
}
.cat-0004__sec-price-compare > picture img {
	width: 100%;
	height: auto;
}
@media (max-width: 768px) {
	.cat-0004__sec-price-compare {
		grid-template-columns: 1fr;
		row-gap: 9px;
		column-gap: 0;
		margin-top: 41px;
		margin-inline: 22px;
	}
}
/* 料金比較注記 — Figma: 24px YuGothic Medium */
.cat-0004__price-compare-note {
	max-width: 1150px;
	margin: 0 auto;
	padding: 10px 16px 0 0;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
	color: #1a1a1a;
	letter-spacing: 0;
}
@media (max-width: 768px) {
	.cat-0004__price-compare-note {
		font-size: 14px;
		margin-left: 24px;
	}
}

/* ===== 安心訴求 2カードレイアウト（Figma: 244:476） ===== */
.cat-0004__safety {
	max-width: 1151px;
}
.cat-0004__safety-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 83px;
	letter-spacing: 0;
}
@media (max-width: 768px) {
	.cat-0004__safety-grid {
		grid-template-columns: 1fr;
		gap: 38px;
	}
}
.cat-0004__safety-card {
	background: #fff;
	border-radius: 10px;
	border: 1px solid #EEF4FF;
	/* Figma: 右+9px 下+7px にオフセットされた青矩形（ソリッドシャドウ） */
	box-shadow: 9px 7px 0 0 #045A9F;
	overflow: hidden;
}
.cat-0004__safety-photo {
	display: block;
	aspect-ratio: 534 / 374;
	overflow: hidden;
}
.cat-0004__safety-photo img {
	/* `.cat-0004 img:not(...)` の height:auto (specificity 0,3,1) に勝つため !important 付与 */
	width: 100% !important;
	height: 100% !important;
	display: block;
	object-fit: cover;
	object-position: right center;
}
.cat-0004__safety-body {
	padding: 39px 27px 22px;
	text-align: center;
}
/* Figma: 26px YuGothic Bold #045A9F tracking -1.3px (<br>指定の改行を守るため nowrap)
 * タイトルは左カード3行 / 右カード2行 — 本文開始位置を揃えるため min-height で3行分（26px*1.5*3=117px）確保 */
.cat-0004__safety-title {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.5;
	color: #045A9F;
	letter-spacing: -1.3px;
	margin: 0;
	min-height: calc(26px * 1.5 * 3);
	white-space: nowrap;
}
/* Figma: 24px YuGothic Medium */
.cat-0004__safety-desc {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
	margin-top: 29px;
	text-align: left;
	color: #1a1a1a;
}
/* Figma: 20px YuGothic Medium */
.cat-0004__safety-note {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	margin-top: 34px;
	text-align: left;
	color: #1a1a1a;
}
@media (max-width: 768px) {
	.cat-0004__safety-body { padding: 34px 11px 20px; }
	.cat-0004__safety-title { font-size: 18px; letter-spacing: 0; white-space: normal; min-height: 10px; }
	.cat-0004__safety-desc { font-size: 14px; margin-top: 19px; padding-inline: 23px; }
	.cat-0004__safety-note { font-size: 12px; margin-top: 0; margin-inline: 22px; }
}

/* ===== お悩み3カード（Figma: 244:490 - 番号+タイトル+写真 縦並び） ===== */
.cat-0004__worries {
	max-width: 1151px;
	margin-top: 93px;
}
.cat-0004__worries-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	letter-spacing: 0;
}
.cat-0004__worry {
	text-align: center;
}
/* Figma: 80px Helvetica Bold rgba(4,90,159,0.3) */
.cat-0004__worry-num {
	font-size: 80px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;
	color: rgba(4, 90, 159, 0.3);
	line-height: 1.15;
	margin: 0;
}
/* Figma: 24px YuGothic Bold #045A9F */
.cat-0004__worry-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	color: #045A9F;
	margin: 13px 0 0;
}
/* 写真 — Figma: 373x280 角丸 10px (Figmaで事前クロップ済み画像を使用) */
.cat-0004__worry-illust {
	display: block;
	margin-top: 47px;
}
.cat-0004__worry-illust img {
	width: 100%;
	height: auto;
	border-radius: 10px;
}
/* worry-03 はタイトルが3行あるため画像の margin-top を詰める */
.cat-0004__worry:nth-child(3) .cat-0004__worry-illust {
	margin-top: 7px;
}
@media (max-width: 768px) {
	.cat-0004__worries-grid {
		grid-template-columns: 1fr;
		gap: 45px;
	}
	.cat-0004__worry-num { font-size: 60px; line-height: 1.15; }
	.cat-0004__worry-title { font-size: 21px; line-height: 1.5; margin-top: 34px; }
	/* Figma 321:xxx — 画像 187x140 中央寄せ */
	.cat-0004__worry-illust { width: 187px; max-width: 100%; margin-left: auto; margin-right: auto; margin-top: 33px; }
	.cat-0004__worry-illust img { width: 187px; height: 140px; object-fit: cover; }
	.cat-0004__worry:nth-child(3) .cat-0004__worry-illust { margin-top: 47px; }
}

/* ===== お客様の声（Figma: 244:503 - 背景 #EEF4FF 全面、内側で見出し+カード+注記） ===== */
.cat-0004__voice {
	max-width: none;
	margin: 48px 0 0;
	padding: 76px 110px 29px;
	background: #EEF4FF;
	letter-spacing: 0;
}
/* 見出し — Figma: 45px YuGothic Bold #045A9F */
.cat-0004__voice-heading {
	font-family: YuGothic, "Yu Gothic", sans-serif;
	font-size: 45px;
	font-weight: 700;
	color: #045A9F;
	text-align: center;
	margin: 0;
	letter-spacing: 0;
}
.cat-0004__voice-grid {
	max-width: 1178px;
	margin: 80px auto 0;
	display: flex;
	flex-direction: column;
	gap: 86px;
	letter-spacing: 0; /* theme grid.css の [class*='grid'] -0.4em を無効化 */
}
/* テーマの clearfix ::after が flex item となり最後の card 直後に gap 91px を挿入するため無効化 */
.cat-0004__voice::after,
.cat-0004__voice-grid::after,
.cat-0004__livero::after,
.cat-0004__livero::before,
.cat-0004__livero-desc::after,
.cat-0004__livero-desc::before {
	content: none !important;
}
/* カード — Figma: portrait 200px + text 914px, column-gap 63px */
.cat-0004__voice-card {
	display: grid;
	grid-template-columns: 200px 914px;
	column-gap: 63px;
	align-items: flex-start;
	margin: 0;
}
/* ポートレート — Figma: 200x200 円形 */
.cat-0004__voice-avatar {
	display: block;
	width: 200px;
	height: 200px;
}
.cat-0004__voice-avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
/* 名前 — Figma: 36px YuGothic Bold */
.cat-0004__voice-name {
	font-family: YuGothic, "Yu Gothic", sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 54px;
	color: #000000;
	margin: 0;
}
/* 本文 — Figma: 26px YuGothic Medium #000 lh=39, margin-top 27px */
.cat-0004__voice-text {
	font-family: YuGothic, "Yu Gothic", sans-serif;
	font-size: 26px;
	font-weight: 500;
	line-height: 39px;
	color: #000000;
	margin: 27px 0 0;
}
/* 注記 — Figma: 18px YuGothic Medium #000 左寄せ, margin-top 69px / 左マージン 330px */
.cat-0004__voice-note {
	font-family: YuGothic, "Yu Gothic", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: #000000;
	text-align: left;
	margin: 69px 0 0 330px;
}
@media (max-width: 768px) {
	.cat-0004__voice {
		padding: 80px 38px 59px;
		margin: 54px 22px 0;
	}
	.cat-0004__voice-heading { font-size: 26px; line-height: 1.5; }
	.cat-0004__voice-grid { margin-top: 40px; gap: 64px; }
	.cat-0004__voice-card {
		grid-template-columns: 1fr;
		gap: 16px;
		text-align: center;
	}
	.cat-0004__voice-avatar {
		width: 152px;
		height: 152px;
		margin: 0 auto;
	}
	.cat-0004__voice-name { font-size: 26px; line-height: 1.5; margin-top: 14px; }
	.cat-0004__voice-text { font-size: 16px; line-height: 1.5; margin-top: 46px; text-align: left; }
	.cat-0004__voice-note { font-size: 12px; text-align: left; margin: 24px 0 0; }
}

/* ===== 業者リスト（Figma: 244:749 見出し + 244:751 ボックス + 244:986 注記） ===== */
.cat-0004__sec-movers-heading {
	max-width: 1131px;
	margin: 0 auto;
	padding-top: 66px;
	padding-bottom: 40px;
}
/* ===== 業者カードグリッド (Figma 244:751) — 4列 x 4行、カード 262x281 ===== */
.cat-0004__movers-grid {
	max-width: 1160px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 262px);
	column-gap: 37px;
	row-gap: 32px;
	justify-content: center;
	list-style: none;
	padding: 0;
	letter-spacing: 0;
}
.cat-0004__mover-card {
	width: 262px;
	height: 281px;
	border: 2px solid #045A9F;
	border-radius: 10px;
	background: #EEF4FF;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	list-style: none;
	box-sizing: border-box;
}
.cat-0004__mover-head {
	flex: 0 0 96px;
	background: #045A9F;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cat-0004__mover-name {
	margin: 0;
	color: #fff;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W6", sans-serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 36px;
	text-align: center;
	letter-spacing: 0;
}
.cat-0004__mover-body {
	flex: 1 1 auto;
	padding: 12px 18px 19px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
}
.cat-0004__mover-desc {
	margin: 0;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	color: #000;
	letter-spacing: 0;
}
.cat-0004__mover-note {
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 12px;
	line-height: 18px;
	color: #000;
}
.cat-0004__mover-areas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin: 0 0 0 5px;
}
.cat-0004__mover-area {
	width: 66px;
	height: 24px;
	background: #fff;
	border-radius: 10px;
	font-family: "Hiragino Kaku Gothic Pro", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: #045A9F;
	text-align: center;
	box-sizing: border-box;
	letter-spacing: 0;
}
@media (max-width: 768px) {
	.cat-0004__movers-grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 12px;
		row-gap: 16px;
		padding: 0 16px;
	}
	.cat-0004__mover-card {
		width: 100%;
		height: auto;
		min-height: 204px;
	}
	.cat-0004__mover-head { flex: 0 0 54px; padding: 0; }
	.cat-0004__mover-name { font-size: 16px; line-height: 21px; }
	.cat-0004__mover-body { padding: 10px 12px 12px; }
	.cat-0004__mover-desc { font-size: 12px; line-height: 18px; }
	.cat-0004__mover-note { font-size: 10px; line-height: 15px; }
	.cat-0004__mover-areas { gap: 6px; margin-left: 0; justify-content: flex-start; }
	.cat-0004__mover-area {
		width: 45px;
		height: 15px;
		font-size: 10px;
		line-height: 15px;
	}
}

/* 業者リスト注記 — Figma: 24px YuGothic Bold #045A9F 中央揃え */
.cat-0004__movers-note {
	max-width: 1131px;
	margin: -33px auto 0;
	padding: 0 16px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	color: #045A9F;
	text-align: center;
	letter-spacing: 0;
}
@media (max-width: 768px) {
	.cat-0004__movers-note {
		font-size: 14px;
	}
}

/* ===== PICKUP 業者カード ===== */
.cat-0004__pickup {
	max-width: 1163px;
	margin: 30px auto 0;
	padding-top: 0;
	padding-bottom: 0;
}
/* CSS Grid 3 列固定。4 件目（最終行に1件のみ）が中央列に来るよう nth セレクタで配置 */
.cat-0004__pickup-grid {
	display: grid;
	grid-template-columns: 366px 366px 366px;
	gap: 27px;
	justify-content: center;
	letter-spacing: 0;
}
/* テーマ grid system の .col-4 width / float 干渉を無効化、カード幅固定 */
.cat-0004__pickup-grid > .col-4 {
	width: 366px;
	max-width: none;
	float: none;
	margin: 0;
	padding: 0;
}
/* 最終行が1枚だけの場合 中央列に配置 */
.cat-0004__pickup-grid > .col-4:last-child:nth-child(3n+1) {
	grid-column: 2;
}
/* 最終行が2枚の場合 中央寄りの2,3列に配置（左にズレる現象防止） */
.cat-0004__pickup-grid > .col-4:nth-last-child(2):nth-child(3n+1) {
	grid-column: 1 / span 2;
	justify-self: end;
}
@media (max-width: 768px) {
	.cat-0004__pickup-grid {
		grid-template-columns: 1fr;
		justify-items: center;
		max-width: 100%;
		padding: 0 3px;
		gap: 24px;
		box-sizing: border-box;
	}
	.cat-0004__pickup-grid > .col-4 {
		width: 100%;
		max-width: 366px;
	}
	/* PC用の最終行中央寄せ nth ルールを SP では解除 */
	.cat-0004__pickup-grid > .col-4:last-child:nth-child(3n+1),
	.cat-0004__pickup-grid > .col-4:nth-last-child(2):nth-child(3n+1) {
		grid-column: auto;
		justify-self: center;
	}
	.cat-0004__pickup .box-thum-01,
	.cat-0004__pickup .box-thum-inner {
		width: 100% !important;
		max-width: 366px;
		height: auto;
	}
	.cat-0004__pickup .box-thum-inner {
		min-height: 404px;
	}
}

/* ===== Figma (244:662) 準拠: カード 366x404 flex縦並び ===== */
.cat-0004__pickup .box-thum-01 {
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	padding-bottom: 0;
	width: 366px;
	height: 404px;
}
.cat-0004__pickup .box-thum-inner {
	display: flex;
	flex-direction: column;
	width: 366px;
	height: 404px;
	border-radius: 10px;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	background: #fff;
}
.cat-0004__pickup .box-thum-inner > a {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
/* Figma 新デザインではカード下部のキャプションは非表示 */
.cat-0004__pickup .ttl-ct,
.cat-0004__pickup .thum-inner {
	display: none !important;
}

/* 青ヘッダー: 88px 高さ */
.cat-0004__pickup .box-thum-inner .benefits_img {
	flex: 0 0 88px;
	width: 100%;
	height: 88px;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.cat-0004__pickup .box-thum-inner .benefits_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ロゴ: 白スペース 70px 内で flex center 配置。ロゴ画像 208x48
   テーマ grid.css の [class*='grid'] letter-spacing:-0.4em が flex item 位置を狂わせるため明示的に 0 */
.cat-0004__pickup .box-thum-inner .img-logo {
	flex: 0 0 70px;
	width: 100%;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	background: transparent;
	letter-spacing: 0;
	font-size: 0;
}
.cat-0004__pickup .box-thum-inner .img-logo img {
	position: static;
	width: 208px;
	height: 48px;
	object-fit: contain;
	display: block;
	max-height: none;
	max-width: 208px;
	margin: 0 !important;
	padding: 0 !important;
	top: auto;
	left: auto;
	transform: none !important; /* テーマの translate(-50%,-50%) を無効化 */
}

/* 本体画像: 246px 高さ、下角丸 — テーマの height:248!important 対策 */
.cat-0004__pickup .box-thum-inner .img-serv {
	flex: 0 0 246px !important;
	width: 100% !important;
	height: 246px !important;
	display: block !important;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.cat-0004__pickup .box-thum-inner .img-serv img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/* ===== LIVERO (Figma 244:990) — 横並び: ロゴ左 340x100, テキスト右 766幅 24px, 上に 1183px border ===== */
.cat-0004__livero {
	max-width: 1183px;
	margin: -26px auto 0 !important;
	padding: 65px 0 60px;
	border-top: 1px solid #000 !important;
	display: flex;
	align-items: flex-start;
	gap: 77.75px;
	letter-spacing: 0;
}
.cat-0004__livero-logo {
	flex: 0 0 340px;
	width: 342px !important;
	height: 72px !important;
	padding: 22px 0 0 25px !important;
	max-width: none !important;
	object-fit: contain;
	object-position: left center;
}
.cat-0004__livero-desc {
	flex: 1 1 auto;
	max-width: 766px;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
	font-size: 24px;
	font-weight: 300;
	line-height: normal;
	color: #000;
	margin: 0 !important;
	padding: 0 !important;
	letter-spacing: 0;
}
.cat-0004__livero-para {
	margin: 0 0 35px !important;
	padding: 0 !important;
}
.cat-0004__livero-para:last-child {
	margin-bottom: 0 !important;
}
@media (max-width: 768px) {
	.cat-0004__livero {
		flex-direction: column;
		align-items: center;
		gap: 61px;
		padding: 38px 25px 71px;
	}
	.cat-0004__livero-logo {
		flex: none;
		width: 321px !important;
		height: auto !important;
		max-width: 100% !important;
		padding-inline: 14px !important;
		object-fit: contain;
		object-position: center;
	}
	.cat-0004__livero-desc {
		font-weight: 300;
		font-size: 16px;
		line-height: 24px;
		max-width: 100%;
	}
	.cat-0004__livero-para {
		margin: 0 0 24px !important;
		padding: 0 !important;
	}
}

/* ===== 暮らしのサービス バナー: PC/SP 画像切り替え（category.php のインライン style と同値） =====
 * 構造は .wrap-01 > .wrap-inner に揃える（category.php 準拠）。
 * `.cat-0004 img` は :not(.pgh-pc):not(.pgh-sp) で除外済みのため !important 不要。 */
.service_link { text-align: center; }
.service_link a img { max-width: 100%; }
.pgh-pc { display: block; }
.pgh-sp { display: none; }
@media only screen and (max-width: 768px) {
	.pgh-pc { display: none; }
	.pgh-sp { display: block; }
}