@charset "UTF-8";

/* /artificial-turf/residential-facility/ 住宅・施設向け人工芝専用 */

/* ===== 03_artificial-turf_03_residential-facility（/artificial-turf/residential-facility/ 住宅・施設向け人工芝） ===== */

/* -- 03_artificial-turf_03_residential-facility / 00（ヒーロー） -- */

.eg-turf-residential-hero {
	max-width: 960px;
	margin: 0 auto;
	padding: 30px 0 50px 0;
}

.eg-turf-residential-hero__inner {
	display: grid;
	grid-template-columns: 1fr 404px;
	column-gap: 40px;
	padding: 0 50px 0 56px;
	background-color: #f5f2f1;
}

/* 見出し1行目の文字（インク）上端がパネル上端から65px（行ボックス上端では56px。for-golfと同じ） */
.eg-turf-residential-hero__body {
	padding: 56px 0 50px;
}

/* 見出し・リストの共通margin／paddingを打ち消す */
h2.eg-turf-residential-hero__catch {
	margin: 0 0 46px !important;
	padding: 0;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	font-weight: 500;
	font-size: 28px;
	line-height: 44px;
	color: var(--eg-green-deep, #004e37);
}

/* 本文 */
p.eg-turf-residential-hero__text {
	margin: 0 0 11px;
	color: #333;
	font-size: 16px;
	line-height: 26px;
}

p.eg-turf-residential-hero__text:last-child {
	margin-bottom: 0;
}

/* 5項目のリスト */
ul.eg-turf-residential-hero__list {
	margin: 0 0 11px !important;
	padding: 0;
	list-style: none;
}

/* ゴシック体を!importantで指定 */
ul.eg-turf-residential-hero__list li.eg-turf-residential-hero__item {
	position: relative;
	margin: 0;
	padding: 0 0 0 17px;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "メイリオ", "Yu Gothic", sans-serif !important;
	font-size: 16px;
	line-height: 28px;
	color: #333;
}

/* 「・」は文字枠の中央にあるため、枠を5px左にずらして点を本文の左端に揃える（for-golfと同じ） */
ul.eg-turf-residential-hero__list li.eg-turf-residential-hero__item::before {
	content: "・";
	position: absolute;
	top: 0;
	left: -5px;
}

/* 写真はパネルの上下とも50px（テキストの方が短いため、パネルの高さは写真で決まる） */
.eg-turf-residential-hero__photo {
	align-self: start;
	margin: 50px 0;
}

img.eg-turf-residential-hero__img {
	display: block;
	width: 100%;
	aspect-ratio: 404 / 500;
	object-fit: cover;
	object-position: right center;
}

/* タブレット以下：左右2分割→上下分割（写真が上） */
@media screen and (max-width: 1023px) {
	.eg-turf-residential-hero__inner {
		grid-template-columns: 1fr;
		padding: 0;
	}
	.eg-turf-residential-hero__photo {
		order: -1;
		margin: 0;
	}
	img.eg-turf-residential-hero__img {
		aspect-ratio: 3 / 2;
		object-position: center;
	}
	.eg-turf-residential-hero__body {
		padding: 36px 40px 44px;
	}
	h2.eg-turf-residential-hero__catch {
		margin-bottom: 32px !important;
		font-size: 26px;
		line-height: 1.57;
	}
}

/* スマホ：改行を解除して左寄せにする */
@media screen and (max-width: 768px) {
	.eg-turf-residential-hero {
		padding: 0 0 40px;
	}
	.eg-turf-residential-hero__body {
		padding: 28px 20px 36px;
	}
	h2.eg-turf-residential-hero__catch {
		margin-bottom: 20px !important;
		font-size: 22px;
		line-height: 1.6;
	}
	h2.eg-turf-residential-hero__catch br {
		display: none;
	}
	p.eg-turf-residential-hero__text,
	ul.eg-turf-residential-hero__list li.eg-turf-residential-hero__item {
		line-height: 1.8;
	}
}

/* 右寄りの建物が切れすぎないよう、4:3は右寄せでトリミングする */
@media screen and (max-width: 540px) {
	img.eg-turf-residential-hero__img {
		aspect-ratio: 4 / 3;
		object-position: 70% center;
	}
	h2.eg-turf-residential-hero__catch {
		font-size: 21px;
	}
}


/* -- 03_artificial-turf_03_residential-facility / 01（住宅向け人工芝施工） -- */

.eg-turf-residential-home {
	max-width: 1044px;
	margin: 0 auto;
	padding: 80px 0 80px;
}

/* style.cssの見出しpadding・共通margin-top(20px !important)を打ち消す */
h2.eg-turf-residential-home__title {
	margin: 0 0 54px !important; /* 03と同じ間隔 */
	padding: 0;
	text-align: center;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	font-weight: 500;
	font-size: 42px;
	line-height: 1.4;
	color: var(--eg-green-deep, #004e37);
}

.eg-turf-residential-home__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 500px;
	align-items: start;
}

.eg-turf-residential-home__body {
	padding: 18px 0 0 46px;
}

p.eg-turf-residential-home__text {
	margin: 0;
	color: #333;
	font-size: 16px;
	line-height: 28px;
}

/* 本文〜タイルは16px、タイル〜本文は28px */
ul.eg-turf-residential-home__list {
	display: grid;
	grid-template-columns: repeat(3, 120px);
	gap: 8px;
	margin: 16px 0 28px !important;
	padding: 0;
	list-style: none;
}

/* ゴシック体を!importantで指定 */
ul.eg-turf-residential-home__list li.eg-turf-residential-home__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	min-height: 125px;
	margin: 0;
	padding: 12px 2px 14px;
	border: 1px solid #cfc29d;
	background-color: #f5f2f1;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "メイリオ", "Yu Gothic", sans-serif !important;
	color: #333;
}

/* 隣のラベルと意味が重なる装飾アイコンのため、背景画像＋aria-hiddenで表示する */
.eg-turf-residential-home__icon {
	display: block;
	flex-shrink: 0;
	width: 60px;
	height: 50px;
	background: center / contain no-repeat;
}
.eg-turf-residential-home__icon--weed        { background-image: url(/2026/wp-content/uploads/2026/09/turf-residential-facility-01-icon-weed.webp); }
.eg-turf-residential-home__icon--kids        { background-image: url(/2026/wp-content/uploads/2026/09/turf-residential-facility-01-icon-kids.webp); }
.eg-turf-residential-home__icon--pet         { background-image: url(/2026/wp-content/uploads/2026/09/turf-residential-facility-01-icon-pet.webp); }
.eg-turf-residential-home__icon--landscape   { background-image: url(/2026/wp-content/uploads/2026/09/turf-residential-facility-01-icon-landscape.webp); }
.eg-turf-residential-home__icon--mud         { background-image: url(/2026/wp-content/uploads/2026/09/turf-residential-facility-01-icon-mud.webp); }
.eg-turf-residential-home__icon--maintenance { background-image: url(/2026/wp-content/uploads/2026/09/turf-residential-facility-01-icon-maintenance.webp); }

.eg-turf-residential-home__label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: 3px;
	text-align: center;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: 0;
}

img.eg-turf-residential-home__img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* タブレット：左右2分割→上下分割（写真が上） */
@media screen and (max-width: 1023px) {
	.eg-turf-residential-home {
		padding: 40px 0 40px;
	}
	h2.eg-turf-residential-home__title {
		margin-bottom: 32px !important;
		font-size: 34px;
	}
	.eg-turf-residential-home__layout {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}
	.eg-turf-residential-home__photo {
		order: -1;
	}
	img.eg-turf-residential-home__img {
		aspect-ratio: 3 / 2;
	}
	.eg-turf-residential-home__body {
		padding: 0;
	}
}

/* スマホ：本文の改行を解除。タイルは画面幅いっぱいに3列で広げる */
@media screen and (max-width: 768px) {
	.eg-turf-residential-home {
		padding: 50px 0 50px;
	}
	h2.eg-turf-residential-home__title {
		margin-bottom: 24px !important;
		font-size: 26px;
	}
	.eg-turf-residential-home__layout {
		row-gap: 24px;
	}
	p.eg-turf-residential-home__text {
		line-height: 1.8;
	}
	p.eg-turf-residential-home__text br {
		display: none;
	}
	ul.eg-turf-residential-home__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
		margin: 16px 0 20px !important;
	}
}

/* 3列だと1枠が約110pxになり「ペットスペース」（16px×7文字）が収まらないため2列×3行にする */
@media screen and (max-width: 540px) {
	ul.eg-turf-residential-home__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	img.eg-turf-residential-home__img {
		aspect-ratio: 4 / 3;
	}
}

@media screen and (max-width: 360px) {
	h2.eg-turf-residential-home__title {
		font-size: 24px;
	}
}

/* -- 03_artificial-turf_03_residential-facility / 02（施設向け人工芝施工） -- */

.eg-turf-residential-facility {
	max-width: 1044px;
	margin: 0 auto;
	padding: 80px 0 80px;
}

/* style.cssの見出しpadding・共通margin-top(20px !important)を打ち消す */
h2.eg-turf-residential-facility__title {
	margin: 0 0 54px !important; /* 03と同じ間隔（04も共用） */
	padding: 0;
	text-align: center;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	font-weight: 500;
	font-size: 42px;
	line-height: 1.4;
	color: var(--eg-green-deep, #004e37);
}

.eg-turf-residential-facility__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 500px;
	align-items: start;
}

.eg-turf-residential-facility__body {
	padding: 16px 0 0 46px;
}

p.eg-turf-residential-facility__text {
	margin: 0;
	color: #333;
	font-size: 16px;
	line-height: 28px;
}

p.eg-turf-residential-facility__text--lead {
	margin-top: 10px;
}

/* style.cssの ul[class^="eg-"]（margin-top:20px !important）を打ち消す */
ul.eg-turf-residential-facility__list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 398px;
	margin: 16px 0 29px -9px !important;
	padding: 0;
	list-style: none;
}

/* 明朝はli[class^="eg-"]の共通指定を使う */
ul.eg-turf-residential-facility__list li.eg-turf-residential-facility__item {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 46px;
	margin: 0;
	padding: 8px 24px;
	background-color: #f5f2f1;
	color: #000;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 0.2em;
}

img.eg-turf-residential-facility__img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* タブレット：左右2分割→上下分割（写真が上） */
@media screen and (max-width: 1023px) {
	.eg-turf-residential-facility {
		padding: 40px 0 40px;
	}
	h2.eg-turf-residential-facility__title {
		margin-bottom: 32px !important;
		font-size: 34px;
	}
	.eg-turf-residential-facility__layout {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}
	.eg-turf-residential-facility__photo {
		order: -1;
	}
	img.eg-turf-residential-facility__img {
		aspect-ratio: 3 / 2;
	}
	.eg-turf-residential-facility__body {
		padding: 0;
	}
	ul.eg-turf-residential-facility__list {
		max-width: none;
		margin: 16px 0 24px !important;
	}
}

/* スマホ：本文の改行を解除。項目は18pxに縮小 */
@media screen and (max-width: 768px) {
	.eg-turf-residential-facility {
		padding: 50px 0 50px;
	}
	h2.eg-turf-residential-facility__title {
		margin-bottom: 24px !important;
		font-size: 26px;
	}
	.eg-turf-residential-facility__layout {
		row-gap: 24px;
	}
	p.eg-turf-residential-facility__text {
		line-height: 1.8;
	}
	p.eg-turf-residential-facility__text br {
		display: none;
	}
	ul.eg-turf-residential-facility__list {
		margin: 16px 0 20px !important;
	}
	ul.eg-turf-residential-facility__list li.eg-turf-residential-facility__item {
		padding: 8px 16px;
		font-size: 18px;
		letter-spacing: 0.12em;
	}
}

/* 写真は4:3 */
@media screen and (max-width: 540px) {
	img.eg-turf-residential-facility__img {
		aspect-ratio: 4 / 3;
	}
}

@media screen and (max-width: 360px) {
	h2.eg-turf-residential-facility__title {
		font-size: 24px;
	}
}

/* -- 03_artificial-turf_03_residential-facility / 03（対応可能な施設施工） -- */

.eg-turf-residential-types {
	max-width: 800px;
	margin: 0 auto;
	padding: 80px 0 80px;
}

/* style.cssの見出しpadding・共通margin-top(20px !important)を打ち消す */
h2.eg-turf-residential-types__title {
	margin: 0 0 54px !important;
	padding: 0;
	text-align: center;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	font-weight: 500;
	font-size: 42px;
	line-height: 1.4;
	color: var(--eg-green-deep, #004e37);
}

.eg-turf-residential-types__photo {
	margin: 0;
}

img.eg-turf-residential-types__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 8 / 5;
	object-fit: cover;
}

/* 写真下端から項目ボックス上端まで75px */
ul.eg-turf-residential-types__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 34px;
	max-width: 750px;
	margin: 75px auto 0 !important;
	padding: 0;
	list-style: none;
}

/* Cocoonの.article ul li（margin 0.2em）に勝つため親ulのクラスも含める */
ul.eg-turf-residential-types__list li.eg-turf-residential-types__item {
	margin: 0;
	padding: 0 20px 0 40px;
	background-color: #f5f2f1;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	font-weight: 600;
	font-size: 22px;
	line-height: 50px;
	letter-spacing: 0.15em;
	color: #111;
}

/* タブレット：余白はPCの半分。項目は2列のまま、文字の開始位置を詰める */
@media screen and (max-width: 1023px) {
	.eg-turf-residential-types {
		padding: 40px 0 40px;
	}
	h2.eg-turf-residential-types__title {
		margin-bottom: 32px !important;
		font-size: 34px;
	}
	ul.eg-turf-residential-types__list {
		gap: 8px 16px;
		margin-top: 40px !important;
	}
	ul.eg-turf-residential-types__list li.eg-turf-residential-types__item {
		padding: 0 16px 0 24px;
	}
}

/* スマホ：項目は1列・18px */
@media screen and (max-width: 768px) {
	.eg-turf-residential-types {
		padding: 50px 0 50px;
	}
	h2.eg-turf-residential-types__title {
		margin-bottom: 24px !important;
		font-size: 26px;
	}
	ul.eg-turf-residential-types__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
		margin-top: 24px !important;
	}
	ul.eg-turf-residential-types__list li.eg-turf-residential-types__item {
		padding: 9px 18px;
		font-size: 18px;
		line-height: 24px;
		letter-spacing: 0.11em;
	}
}

@media screen and (max-width: 540px) {
	img.eg-turf-residential-types__img {
		aspect-ratio: 3 / 2;
	}
}

@media screen and (max-width: 360px) {
	h2.eg-turf-residential-types__title {
		font-size: 24px;
	}
}

/* -- 03_artificial-turf_03_residential-facility / 04（外構と組み合わせた提案） -- */

/* 行ピッチが02（28px）より2px狭いぶん、文字の上端を写真上端から約22px下に保つため上paddingを1px足す */
.eg-turf-residential-combo .eg-turf-residential-facility__body {
	padding-top: 17px;
}

p.eg-turf-residential-combo__text {
	margin: 10px 0 0;
	color: #333;
	font-size: 16px;
	line-height: 26px;
}

p.eg-turf-residential-combo__text:first-child {
	margin-top: 0;
}

/* 見出し・リストの共通margin／paddingを打ち消す */
ul.eg-turf-residential-combo__list {
	margin: 10px 0 0 !important;
	padding: 0;
	list-style: none;
}

/* Cocoonの .article ul li のmarginに勝つため詳細度を上げる */
ul.eg-turf-residential-combo__list li.eg-turf-residential-combo__item {
	position: relative;
	margin: 0;
	padding: 0 0 0 18px;
	font-family: inherit !important;
	font-weight: 600;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: normal;
	color: #333;
}

/* 箇条書きの「•」。Cocoonの li::before（あれば）を打ち消して自前で置く */
ul.eg-turf-residential-combo__list li.eg-turf-residential-combo__item::before {
	content: "•";
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* タブレット：02と同じく上下分割（写真が上） */
@media screen and (max-width: 1023px) {
	.eg-turf-residential-combo .eg-turf-residential-facility__body {
		padding-top: 0;
	}
	ul.eg-turf-residential-combo__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(4, auto);
		grid-auto-flow: column;
		column-gap: 16px;
	}
}

/* スマホ：本文（line-height 1.8）と行ピッチを揃え、改行を解除 */
@media screen and (max-width: 768px) {
	p.eg-turf-residential-combo__text,
	ul.eg-turf-residential-combo__list li.eg-turf-residential-combo__item {
		line-height: 1.8;
	}
	p.eg-turf-residential-combo__text br {
		display: none;
	}
	/* 2列の右下も左下と同じく下線を付ける */
	.has-category-nav .entry-content ul.eg-turf-residential-combo__list li.eg-turf-residential-combo__item:last-child {
		border-bottom: 2px dotted #b3b3b3;
	}
}