@charset "UTF-8";

/* /exterior/ 配下のページでのみ読み込まれます */

/* ===== ここから下に、exteriorカテゴリ配下の各ページのスタイルを追記していく ===== */


/* ===== 05_exterior_00（/exterior/ 外構・エクステリア カテゴリトップ） ===== */

/* -- 05_exterior_00 / 00（ヒーロー） -- */

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

.eg-exterior-top-hero__photo {
	margin: 0 0 68px;
}

img.eg-exterior-top-hero__img {
	display: block;
	width: 100%;
	aspect-ratio: 960 / 600;
	object-fit: cover;
}

.eg-exterior-top-hero__body {
	max-width: 750px;
	margin: 0 auto;
	padding: 0 0 40px;
	text-align: center;
}

p.eg-exterior-top-hero__intro {
	margin: 0 0 18px;
	color: #000;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: 0.04em;
}

h2.eg-exterior-top-hero__catch {
	margin: 0 0 40px;
	padding: 0;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	font-weight: 500;
	font-size: clamp(28px, 3vw, 36px);
	line-height: 1.6;
	color: var(--eg-green-deep, #004e37);
}

p.eg-exterior-top-hero__label,
p.eg-exterior-top-hero__lead {
	margin: 0 0 20px;
	padding-left: 10px;
	color: #000;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.03em;
	text-align: left;
}

/* 項目リストはpages_common.cssのeg-tag-list */
.eg-exterior-top-hero__body ul.eg-tag-list {
	margin: 20px 0 28px !important;
	gap: 10px 34px;
}

/* 明朝体 */
.eg-exterior-top-hero__body ul.eg-tag-list li.eg-tag-list__item {
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	color: #000;
	line-height: 1.4;
	letter-spacing: 0.15em;
	text-align: center;
}

p.eg-exterior-top-hero__lead {
	margin: 0;
}

/* タブレット以下：左右paddingは.main側に任せる */
@media screen and (max-width: 768px) {
	.eg-exterior-top-hero {
		padding: 0;
	}
	.eg-exterior-top-hero__photo {
		margin: 0 0 40px;
	}
	.eg-exterior-top-hero__body {
		padding-left: 0;
		padding-right: 0;
	}
	p.eg-exterior-top-hero__label,
	p.eg-exterior-top-hero__lead {
		padding-left: 0;
	}
	p.eg-exterior-top-hero__label {
		margin: 0 0 12px;
	}
	.eg-exterior-top-hero__body ul.eg-tag-list {
		margin: 12px 0 16px !important;
		gap: 4px;
	}
	.eg-exterior-top-hero__body ul.eg-tag-list li.eg-tag-list__item {
		letter-spacing: 0.1em;
		text-align: left;
	}
}

/* スマホ：PC/タブレットでは中央寄せ＋任意位置で改行している文章を、改行解除＋左寄せにする */
@media screen and (max-width: 540px) {
	.eg-exterior-top-hero__photo {
		margin: 0 0 28px;
	}
	img.eg-exterior-top-hero__img {
		aspect-ratio: 4 / 3;
	}
	.eg-exterior-top-hero__body {
		padding-bottom: 40px;
	}
	p.eg-exterior-top-hero__intro {
		margin: 0 0 16px;
		font-size: 16px;
		text-align: left;
		line-height: 1.7;
	}
	h2.eg-exterior-top-hero__catch {
		margin: 0 0 24px;
		font-size: 20px;
		text-align: left;
	}
	p.eg-exterior-top-hero__intro br,
	h2.eg-exterior-top-hero__catch br,
	p.eg-exterior-top-hero__label br,
	p.eg-exterior-top-hero__lead br {
		display: none;
	}
	p.eg-exterior-top-hero__label {
		margin: 0 0 12px;
		font-size: 16px;
	}
	p.eg-exterior-top-hero__lead {
		font-size: 16px;
	}
}



/* -- 05_exterior_00 / 01（対応可能な外構工事） -- */
/* コンテンツ幅978、タイル間6px */

.eg-exterior-top-menu {
	max-width: 978px;
	margin: 0 auto;
	padding: 50px 0 60px;
}

/* 見出し・リストの共通margin／paddingを打ち消す */
h2.eg-exterior-top-menu__title {
	margin: 0 0 60px !important;
	padding: 0;
	text-align: center;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	font-weight: 500;
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.4;
	color: var(--eg-green-deep, #004e37);
}

.eg-exterior-top-menu__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
}

figure.eg-exterior-top-menu__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	background-color: #093224;
}

/* 先頭の1枚だけ2列×2行。高さは隣の小タイル2行ぶんに合わせて伸ばす（写真は残りの高さを使う） */
figure.eg-exterior-top-menu__item--large {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

img.eg-exterior-top-menu__img {
	display: block;
	width: 100%;
	aspect-ratio: 240 / 168;
	object-fit: cover;
}

figure.eg-exterior-top-menu__item--large img.eg-exterior-top-menu__img {
	flex: 1 1 0;
	min-height: 0;
	height: 0;
	aspect-ratio: auto;
}

figcaption.eg-exterior-top-menu__label {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 48px;
	margin: 0;
	padding: 0 8px;
	color: #fff;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-align: center;
}

/* タブレット：セクション余白はPCの半分。グリッドはそのまま（列幅は約230px以上あり、ラベルは1行に収まる） */
@media screen and (min-width: 768.02px) and (max-width: 1023px) {
	.eg-exterior-top-menu {
		padding: 25px 0 30px;
	}
	h2.eg-exterior-top-menu__title {
		margin-bottom: 40px !important;
	}
}

/* スマホ：2列グリッド、「人工芝施工」だけ全幅 */
@media screen and (max-width: 768px) {
	.eg-exterior-top-menu {
		padding: 28px 0 40px;
	}
	h2.eg-exterior-top-menu__title {
		margin-bottom: 28px !important;
		font-size: 26px;
	}
	.eg-exterior-top-menu__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px;
	}
	figure.eg-exterior-top-menu__item--large {
		grid-column: 1 / -1;
		grid-row: auto;
	}
	figure.eg-exterior-top-menu__item--large img.eg-exterior-top-menu__img {
		flex: 0 0 auto;
		height: auto;
		aspect-ratio: 486 / 390;
	}
	figcaption.eg-exterior-top-menu__label {
		min-height: 44px;
		padding: 0 4px;
		font-size: 16px;
		letter-spacing: 0.02em;
	}
	/* 狭い機種で「ゴルフ練習設備施工」が2行になっても、同じ行のタイルとラベル帯の高さが揃うようにする */
	figure.eg-exterior-top-menu__item:not(.eg-exterior-top-menu__item--large) figcaption.eg-exterior-top-menu__label {
		flex: 1 0 auto;
	}
}

@media screen and (max-width: 360px) {
	figcaption.eg-exterior-top-menu__label {
		letter-spacing: 0;
	}
}


/* -- 05_exterior_00 / 02（外構施工の特徴：POINT01〜03） -- */

.eg-exterior-top-feature {
	max-width: 1044px;
	margin: 0 auto;
	padding: 50px 0 60px;
}

/* style.cssの見出しpadding・共通margin-top(20px !important)を打ち消す */
h2.eg-exterior-top-feature__title {
	margin: 0 0 65px !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-exterior-top-feature__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
	align-items: start;
	margin: 0 0 100px;
}

.eg-exterior-top-feature__item:last-child {
	margin-bottom: 0;
}

/* 番号の上端が写真の上端から64px下 */
.eg-exterior-top-feature__body {
	padding: 55px 0 0 46px;
}

/* POINTバッジの番号サイズ調整 */
.eg-exterior-top-feature__badge {
	align-items: center;
	margin-left: 2px;
}

.eg-exterior-top-feature__badge .eg-point-badge__label {
	margin-right: 8px;
	font-size: 18px;
}

.eg-exterior-top-feature__badge .eg-point-badge__number {
	top: 0;
	left: 0;
	margin-right: 0;
	font-size: 46px;
}

/* h3の余白を打ち消す */
h3.eg-exterior-top-feature__heading {
	margin: 2px 0 32px;
	padding: 0;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	font-weight: 500;
	font-size: 34px;
	line-height: 1.35;
	color: #111;
}

/* 本文は見出しより6px内側から始まる */
p.eg-exterior-top-feature__text {
	margin: 0 0 26px;
	padding: 0 0 0 6px;
	color: #333;
	font-size: 16px;
	line-height: 1.625;
	letter-spacing: 0.05em;
}

p.eg-exterior-top-feature__text:last-child {
	margin-bottom: 0;
}

/* 見出し・リストの共通margin／paddingを打ち消す */
ul.eg-exterior-top-feature__points {
	margin: 6px 0 12px !important;
	padding: 0 0 0 6px;
	list-style: none;
}

/* Cocoonの .article ul li のmarginに勝つため詳細度を上げる */
ul.eg-exterior-top-feature__points li.eg-exterior-top-feature__point {
	position: relative;
	margin: 0;
	padding: 0 0 0 18px;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "メイリオ", "Yu Gothic", sans-serif !important;
	color: #333;
	font-size: 16px;
	line-height: 1.625;
	letter-spacing: 0.05em;
}

ul.eg-exterior-top-feature__points li.eg-exterior-top-feature__point::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 12px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: #333;
}

.eg-exterior-top-feature__photo {
	margin: 0;
}

img.eg-exterior-top-feature__img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* POINT02：メイン写真（500×366）の下にサムネイル3枚（165×130）を並べる */
img.eg-exterior-top-feature__img--main {
	aspect-ratio: 500 / 366;
}

.eg-exterior-top-feature__thumbs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
	margin-top: 4px;
}

img.eg-exterior-top-feature__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 165 / 130;
	object-fit: cover;
}

/* タブレット：左右2分割→上下分割（写真が上）、余白はPCの半分 */
@media screen and (max-width: 1023px) {
	.eg-exterior-top-feature {
		padding: 25px 0 30px;
	}
	h2.eg-exterior-top-feature__title {
		margin-bottom: 36px !important;
		font-size: 34px;
	}
	.eg-exterior-top-feature__item {
		grid-template-columns: minmax(0, 1fr);
		margin-bottom: 50px;
	}
	.eg-exterior-top-feature__photo {
		order: -1;
	}
	img.eg-exterior-top-feature__img {
		aspect-ratio: 3 / 2;
	}
	.eg-exterior-top-feature__body {
		padding: 28px 0 0;
	}
	h3.eg-exterior-top-feature__heading {
		margin-bottom: 20px;
		font-size: 30px;
	}
}

/* スマホ：改行を解除して左寄せで自然に折り返す。区切り線は共通ルール（style.css）が入る */
@media screen and (max-width: 768px) {
	.eg-exterior-top-feature {
		padding: 56px 0 20px;
	}
	h2.eg-exterior-top-feature__title {
		margin-bottom: 28px !important;
		font-size: 26px;
	}
	.eg-exterior-top-feature__item {
		margin-bottom: 44px;
	}
	img.eg-exterior-top-feature__img {
		aspect-ratio: 4 / 3;
	}
	.eg-exterior-top-feature__body {
		padding-top: 22px;
	}
	.eg-exterior-top-feature__badge .eg-point-badge__number {
		font-size: 40px;
	}
	h3.eg-exterior-top-feature__heading {
		margin-bottom: 16px;
		font-size: 24px;
	}
	h3.eg-exterior-top-feature__heading br,
	p.eg-exterior-top-feature__text br {
		display: none;
	}
	p.eg-exterior-top-feature__text,
	ul.eg-exterior-top-feature__points {
		padding-left: 0;
	}
	.eg-exterior-top-feature__thumbs {
		gap: 3px;
		margin-top: 3px;
	}
}



/* -- 05_exterior_00 / 03（施工イメージ） -- */
/* コンテンツ幅1106、左テキスト＋右に写真540幅 */

.eg-exterior-top-image {
	margin-left: -30px;
	margin-right: -30px;
	background-color: #e6e6e6;
	padding: 50px 0 60px;
}

.eg-exterior-top-image__inner {
	max-width: 1106px;
	margin: 0 auto;
	padding: 0 16px;
}

/* 見出し・リストの共通margin／paddingを打ち消す */
h2.eg-exterior-top-image__title {
	margin: 0 0 48px !important;
	padding: 0;
	text-align: center;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	font-weight: 500;
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.4;
	color: var(--eg-green-deep, #004e37);
}

.eg-exterior-top-image__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
	column-gap: 24px;
	align-items: start;
}

.eg-exterior-top-image__text {
	padding-left: clamp(0px, 3vw, 40px);
}

p.eg-exterior-top-image__lead {
	margin: 0 0 24px;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.75;
	color: var(--eg-green-deep, #004e37);
}

ul.eg-exterior-top-image__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Cocoon本体の .article ul li { margin:0.2em } に勝つため親ulのクラスも含める */
ul.eg-exterior-top-image__list li.eg-exterior-top-image__item {
	position: relative;
	margin: 0;
	padding: 8px 0 8px 20px;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.5;
	color: #111;
}

ul.eg-exterior-top-image__list li.eg-exterior-top-image__item::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 20px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: #222;
}

/* 6分割グリッド：上段は2枚（各3列ぶん）、中段・下段は3枚（各2列ぶん） */
.eg-exterior-top-image__photos {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 2px;
}

img.eg-exterior-top-image__photo {
	display: block;
	grid-column: span 2;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

img.eg-exterior-top-image__photo--wide {
	grid-column: span 3;
	aspect-ratio: 3 / 2;
}

/* .mainのpaddingが834px以下で16pxになる分の負マージン調整 */
@media screen and (max-width: 834px) {
	.eg-exterior-top-image {
		margin-left: -16px;
		margin-right: -16px;
	}
}

/* タブレット：上下分割（写真が上）、余白はPCの半分 */
@media screen and (min-width: 768.02px) and (max-width: 1023px) {
	.eg-exterior-top-image {
		padding: 25px 0 30px;
	}
	.eg-exterior-top-image__body {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.eg-exterior-top-image__photos {
		order: -1;
	}
	.eg-exterior-top-image__text {
		padding-left: 0;
	}
}

@media screen and (max-width: 768px) {
	/* 前セクション（写真とテキストの特徴ブロック）と背景色が変わるため、共通の区切り線は不要 */
	.eg-exterior-top-image {
		border-top: none !important;
		padding: 28px 0 40px;
	}
	/* セクション自体は負マージンで全幅に広げているため、テキストは.mainの左右16pxと同じ位置に揃える */
	.eg-exterior-top-image__inner {
		padding: 0 16px;
	}
	h2.eg-exterior-top-image__title {
		margin-bottom: 28px !important;
		font-size: 26px;
	}
	.eg-exterior-top-image__body {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.eg-exterior-top-image__text {
		padding-left: 0;
	}
	p.eg-exterior-top-image__lead {
		font-size: 20px;
		text-align: left;
	}
	p.eg-exterior-top-image__lead br {
		display: none;
	}
	ul.eg-exterior-top-image__list li.eg-exterior-top-image__item {
		border-bottom: 2px dotted #b3b3b3;
		font-size: 17px;
		font-weight: 600;
	}
	ul.eg-exterior-top-image__list li.eg-exterior-top-image__item:last-child {
		border-bottom: none;
	}
}


/* ===== 05_exterior_01_examples（/exterior/examples/ 外構施工事例） ===== */

/* -- 05_exterior_01_examples / 00（ヒーロー） -- */

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

.eg-exterior-examples-hero__panel {
	padding: 50px 38px 68px;
	background-color: #f5f2f1;
}

.eg-exterior-examples-hero__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 404px;
	column-gap: 40px;
	padding: 0 12px 0 18px;
}

/* 見出しの文字の上端が写真の上端から15px下 */
.eg-exterior-examples-hero__body {
	padding-top: 6px;
}

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

p.eg-exterior-examples-hero__text {
	margin: 0;
	color: #333;
	font-size: 16px;
	line-height: 1.875;
}

/* 「弊社では、」の前は1行分（30px）空ける */
p.eg-exterior-examples-hero__text--plan {
	margin-top: 30px;
}

/* 箇条書きは本文と同じ行ピッチ（30px）で、前後の本文に詰めて続ける */
ul.eg-exterior-examples-hero__points {
	margin: 0 !important;
	padding: 0;
	list-style: none;
}

/* Cocoonの .article ul li のmarginに勝つため詳細度を上げる */
ul.eg-exterior-examples-hero__points li.eg-exterior-examples-hero__point {
	position: relative;
	margin: 0;
	padding: 0 0 0 17px;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "メイリオ", "Yu Gothic", sans-serif !important;
	color: #333;
	font-size: 16px;
	line-height: 1.875;
}

ul.eg-exterior-examples-hero__points li.eg-exterior-examples-hero__point::before {
	content: "\2022";
	position: absolute;
	left: 0;
	top: 0;
}

.eg-exterior-examples-hero__photo {
	margin: 0;
}

img.eg-exterior-examples-hero__img {
	display: block;
	width: 100%;
	aspect-ratio: 404 / 500;
	object-fit: cover;
}

/* タブレット以下：左右2分割→上下分割（写真が上・パネルいっぱい）。縦長写真は横長にトリミング */
@media screen and (max-width: 1023px) {
	.eg-exterior-examples-hero__panel {
		padding: 0;
	}
	.eg-exterior-examples-hero__main {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
		padding: 0;
	}
	.eg-exterior-examples-hero__photo {
		order: -1;
	}
	img.eg-exterior-examples-hero__img {
		aspect-ratio: 3 / 2;
		object-position: center 65%;
	}
	.eg-exterior-examples-hero__body {
		padding: 36px 40px 40px;
	}
	h2.eg-exterior-examples-hero__catch {
		margin-bottom: 28px !important;
		font-size: 26px;
	}
}

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

@media screen and (max-width: 540px) {
	img.eg-exterior-examples-hero__img {
		aspect-ratio: 4 / 3;
	}
	h2.eg-exterior-examples-hero__catch {
		font-size: 21px;
	}
}



/* -- 05_exterior_01_examples / 01（人気の組み合わせ施工：PLAN01〜05） -- */

.eg-exterior-examples-plan {
	max-width: 1044px;
	margin: 0 auto;
	padding: 50px 0 60px;
}

/* style.cssの見出しpadding・共通margin-top(20px !important)を打ち消す */
h2.eg-exterior-examples-plan__title {
	margin: 0 0 65px !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-exterior-examples-plan__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
	align-items: start;
	margin: 0 0 100px;
}

.eg-exterior-examples-plan__item:last-child {
	margin-bottom: 0;
}

/* 番号の上端が写真の上端から64px下 */
.eg-exterior-examples-plan__body {
	padding: 55px 0 0 46px;
}

/* POINTバッジの番号サイズ調整 */
.eg-exterior-examples-plan__badge {
	align-items: center;
	margin-left: 2px;
}

.eg-exterior-examples-plan__badge .eg-point-badge__label {
	margin-right: 8px;
	font-size: 18px;
}

.eg-exterior-examples-plan__badge .eg-point-badge__number {
	top: 0;
	left: 0;
	margin-right: 0;
	font-size: 46px;
}

/* h3の余白を打ち消す。バッジ直下。2行時の行ピッチは46px */
h3.eg-exterior-examples-plan__heading {
	margin: 2px 0 32px;
	padding: 0;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	font-weight: 500;
	font-size: 34px;
	line-height: 1.35;
	color: #111;
}

/* 本文は見出しより6px内側から始まる */
p.eg-exterior-examples-plan__text {
	margin: 0;
	padding: 0 0 0 6px;
	color: #333;
	font-size: 16px;
	line-height: 1.625;
	letter-spacing: 0.05em;
}

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

/* Cocoonの .article ul li のmarginに勝つため詳細度を上げる */
ul.eg-exterior-examples-plan__points li.eg-exterior-examples-plan__point {
	position: relative;
	margin: 0;
	padding: 0 0 0 18px;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "メイリオ", "Yu Gothic", sans-serif !important;
	color: #333;
	font-size: 16px;
	line-height: 1.625;
	letter-spacing: 0.05em;
}

ul.eg-exterior-examples-plan__points li.eg-exterior-examples-plan__point::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 12px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: #333;
}

.eg-exterior-examples-plan__photo {
	margin: 0;
}

img.eg-exterior-examples-plan__img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* タブレット：左右2分割→上下分割（写真が上）、余白はPCの半分 */
@media screen and (max-width: 1023px) {
	.eg-exterior-examples-plan {
		padding: 25px 0 30px;
	}
	h2.eg-exterior-examples-plan__title {
		margin-bottom: 36px !important;
		font-size: 34px;
	}
	.eg-exterior-examples-plan__item {
		grid-template-columns: minmax(0, 1fr);
		margin-bottom: 50px;
	}
	.eg-exterior-examples-plan__photo {
		order: -1;
	}
	img.eg-exterior-examples-plan__img {
		aspect-ratio: 3 / 2;
	}
	.eg-exterior-examples-plan__body {
		padding: 28px 0 0;
	}
	h3.eg-exterior-examples-plan__heading {
		margin-bottom: 20px;
		font-size: 30px;
	}
}

/* スマホ：改行を解除して左寄せで自然に折り返す。区切り線は共通ルール（style.css）が入る */
@media screen and (max-width: 768px) {
	.eg-exterior-examples-plan {
		padding: 56px 0 20px;
	}
	h2.eg-exterior-examples-plan__title {
		margin-bottom: 28px !important;
		font-size: 26px;
	}
	.eg-exterior-examples-plan__item {
		margin-bottom: 44px;
	}
	img.eg-exterior-examples-plan__img {
		aspect-ratio: 4 / 3;
	}
	.eg-exterior-examples-plan__body {
		padding-top: 22px;
	}
	.eg-exterior-examples-plan__badge .eg-point-badge__number {
		font-size: 40px;
	}
	h3.eg-exterior-examples-plan__heading {
		margin-bottom: 16px;
		font-size: 24px;
	}
	h3.eg-exterior-examples-plan__heading br,
	p.eg-exterior-examples-plan__text br {
		display: none;
	}
	p.eg-exterior-examples-plan__text,
	ul.eg-exterior-examples-plan__points {
		padding-left: 0;
	}
}



/* -- 05_exterior_01_examples / 02（施工イメージ） -- */

.eg-exterior-examples-scene {
	max-width: 1106px;
	margin: 0 auto;
	padding: 50px 0 60px;
}

/* style.cssの見出しpadding・共通margin-top(20px !important)を打ち消す */
h2.eg-exterior-examples-scene__title {
	margin: 0 0 50px !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-exterior-examples-scene__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
	align-items: start;
}

.eg-exterior-examples-scene__body {
	padding: 0 0 0 42px;
}

p.eg-exterior-examples-scene__lead {
	margin: -6px 0 26px;
	padding: 0;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.73;
	letter-spacing: 0.03em;
	color: var(--eg-green-deep, #004e37);
}

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

/* Cocoonの .article ul li のmarginに勝つため詳細度を上げる */
ul.eg-exterior-examples-scene__list li.eg-exterior-examples-scene__item {
	position: relative;
	margin: 0;
	padding: 0 0 0 17px;
	font-weight: 600;
	font-size: 20px;
	line-height: 46px;
	letter-spacing: 0.03em;
	color: #111;
}

ul.eg-exterior-examples-scene__list li.eg-exterior-examples-scene__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -2px;
	border-radius: 50%;
	background-color: #111;
}

.eg-exterior-examples-scene__gallery {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 2px;
}

.eg-exterior-examples-scene__photo {
	grid-column: span 2;
	margin: 0;
}

.eg-exterior-examples-scene__photo:nth-child(-n+2) {
	grid-column: span 3;
}

img.eg-exterior-examples-scene__img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.eg-exterior-examples-scene__photo:nth-child(-n+2) img.eg-exterior-examples-scene__img {
	aspect-ratio: 3 / 2;
}

/* タブレット：左右2分割→上下分割（写真が上）、余白はPCの半分 */
@media screen and (max-width: 1023px) {
	.eg-exterior-examples-scene {
		padding: 25px 0 30px;
	}
	h2.eg-exterior-examples-scene__title {
		margin-bottom: 30px !important;
		font-size: 34px;
	}
	.eg-exterior-examples-scene__main {
		grid-template-columns: minmax(0, 1fr);
	}
	.eg-exterior-examples-scene__gallery {
		order: -1;
	}
	.eg-exterior-examples-scene__body {
		padding: 28px 0 0;
	}
	p.eg-exterior-examples-scene__lead {
		margin-top: 0;
	}
}

/* スマホ：改行を解除して左寄せで自然に折り返す。区切り線は共通ルール（style.css）が入る */
@media screen and (max-width: 768px) {
	.eg-exterior-examples-scene {
		padding: 56px 0 20px;
	}
	h2.eg-exterior-examples-scene__title {
		margin-bottom: 28px !important;
		font-size: 26px;
	}
	.eg-exterior-examples-scene__body {
		padding-top: 22px;
	}
	p.eg-exterior-examples-scene__lead {
		margin-bottom: 16px;
		font-size: 19px;
	}
	p.eg-exterior-examples-scene__lead br {
		display: none;
	}
	ul.eg-exterior-examples-scene__list li.eg-exterior-examples-scene__item {
		font-size: 17px;
		line-height: 38px;
	}
}


/* ===== 外構カテゴリ共通：こんな方におすすめ（写真背景セクション） ===== */
/* 構造は eg-golf-recommend と同じ。全幅化は .main の padding 分の負マージン */
.eg-exterior-recommend {
	margin-left: -30px;
	margin-right: -30px;
	background-color: #14200f;
	background-image:
		linear-gradient(to bottom, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.04)),
		url(/2026/wp-content/uploads/2026/09/golf-recommend-bg.webp);
	background-size: cover;
	background-position: center, center 62%;
	padding: 64px 0 140px;
}

.eg-exterior-recommend__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 16px;
	text-align: center;
}

h2.eg-exterior-recommend__title {
	margin: 0 0 48px;
	padding: 0;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	font-weight: 500;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.4;
	color: #d6c43c;
}

ul.eg-tag-list.eg-exterior-recommend__list {
	gap: 20px 32px;
}

ul.eg-tag-list.eg-exterior-recommend__list li.eg-tag-list__item {
	background-color: rgba(255, 255, 255, 0.75);
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	color: #111;
}

@media screen and (max-width: 834px) {
	.eg-exterior-recommend {
		margin-left: -16px;
		margin-right: -16px;
	}
}

@media screen and (max-width: 768px) {
	.eg-exterior-recommend {
		padding: 40px 0 64px;
	}
	h2.eg-exterior-recommend__title {
		margin: 0 0 28px;
	}
	ul.eg-tag-list.eg-exterior-recommend__list {
		gap: 8px;
	}
	ul.eg-tag-list.eg-exterior-recommend__list li.eg-tag-list__item {
		font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "メイリオ", "Yu Gothic", sans-serif !important;
		font-size: 14px;
		color: #222;
	}
}