@charset "UTF-8";

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

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


/* ===== 04_tf_00（/tf/ TFウォール・TFフロア カテゴリトップ） ===== */

/* -- 04_tf_00 / 00（ヒーロー） -- */

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

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

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

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

p.eg-tf-top-hero__intro {
	margin: 0 0 24px;
	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-tf-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-tf-top-hero__label,
p.eg-tf-top-hero__lead {
	margin: 0 0 16px;
	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-tf-top-hero__body ul.eg-tag-list {
	margin: 12px 0 32px !important;
	gap: 10px 34px;
}

.eg-tf-top-hero__body ul.eg-tag-list li.eg-tag-list__item {
	line-height: 1.4;
	letter-spacing: 0.15em;
	text-align: center;
}

p.eg-tf-top-hero__lead {
	margin: 0 0 50px;
}

/* 注記：3行を左揃えにしたまま、ブロック全体を中央に置いている */
p.eg-tf-top-hero__note {
	width: fit-content;
	margin: 0 auto;
	color: #333;
	font-size: 16px;
	line-height: 1.875;
	text-align: left;
}

/* タブレット以下：左右paddingは.main側に任せる */
@media screen and (max-width: 768px) {
	.eg-tf-top-hero {
		padding: 0;
	}
	.eg-tf-top-hero__photo {
		margin: 0 0 40px;
	}
	.eg-tf-top-hero__body {
		padding-left: 0;
		padding-right: 0;
	}
	p.eg-tf-top-hero__label,
	p.eg-tf-top-hero__lead {
		padding-left: 0;
	}
	.eg-tf-top-hero__body ul.eg-tag-list {
		margin: 12px 0 16px !important;
		gap: 4px;
	}
	p.eg-tf-top-hero__lead {
		margin: 0 0 32px;
	}
	.eg-tf-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-tf-top-hero__photo {
		margin: 0 0 28px;
	}
	img.eg-tf-top-hero__img {
		aspect-ratio: 4 / 3;
	}
	.eg-tf-top-hero__body {
		padding-bottom: 40px;
	}
	p.eg-tf-top-hero__intro {
		margin: 0 0 16px;
		font-size: 16px;
		text-align: left;
		line-height: 1.7;
	}
	h2.eg-tf-top-hero__catch {
		margin: 0 0 24px;
		font-size: 20px;
		text-align: left;
	}
	p.eg-tf-top-hero__intro br,
	h2.eg-tf-top-hero__catch br,
	p.eg-tf-top-hero__label br,
	p.eg-tf-top-hero__note br {
		display: none;
	}
	p.eg-tf-top-hero__label {
		margin: 0 0 12px;
		font-size: 16px;
	}
	p.eg-tf-top-hero__lead {
		margin: 0 0 24px;
		font-size: 16px;
	}
	p.eg-tf-top-hero__note {
		width: auto;
		font-size: 15px;
		line-height: 1.7;
	}
}


/* -- 04_tf_00 / 01（TFウォール・TFフロア 仕様概要） -- */

.eg-tf-top-spec {
	max-width: 1080px;
	margin: 0 auto;
	padding: 30px 0 80px;
}

.eg-tf-top-spec__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	column-gap: 40px;
	align-items: start;
	padding: 40px 40px 40px 42px;
	background: #f5f2f1;
}

.eg-tf-top-spec__card + .eg-tf-top-spec__card {
	margin-top: 50px;
}

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

dl.eg-tf-top-spec__list {
	display: grid;
	grid-template-columns: 154px minmax(0, 1fr);
	margin: 0;
	padding: 0;
}

dt.eg-tf-top-spec__term,
dd.eg-tf-top-spec__desc {
	margin: 0;
	padding: 8px 0;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

dt.eg-tf-top-spec__term {
	color: #111;
	font-weight: 700;
}

dd.eg-tf-top-spec__desc {
	color: #333;
}

/* 下層ページへのリンク（eg-page-linksの小型版） */
a.eg-tf-top-spec__more {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 320px;
	max-width: 100%;
	min-height: 56px;
	margin-top: 32px;
	padding: 8px 44px 8px 20px;
	background-color: #fff;
	border: 1px solid #8b7124;
	border-radius: 3px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: #004e37;
	transition: opacity 0.2s;
}
a.eg-tf-top-spec__more:hover {
	opacity: 0.8;
	text-decoration: none;
	color: #004e37;
}
a.eg-tf-top-spec__more::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 22px;
	width: 8px;
	height: 8px;
	border-top: 2px solid #004e37;
	border-right: 2px solid #004e37;
	transform: translateY(-50%) rotate(45deg);
}

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

/* タブレット以下：左右2分割→上下分割（写真が上）。セクション間の余白はPCの半分 */
@media screen and (max-width: 1023px) {
	.eg-tf-top-spec {
		padding: 15px 0 40px;
	}
	.eg-tf-top-spec__card {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
		padding: 28px;
	}
	.eg-tf-top-spec__photo {
		order: -1;
	}
	img.eg-tf-top-spec__img {
		aspect-ratio: 3 / 2;
	}
}

/* スマホ：.mainが左右16pxのpaddingを持つため、カード外側の余白は追加しない */
@media screen and (max-width: 768px) {
	.eg-tf-top-spec {
		padding: 40px 0 60px;
	}
	.eg-tf-top-spec__card {
		row-gap: 20px;
		padding: 20px;
	}
	.eg-tf-top-spec__card + .eg-tf-top-spec__card {
		margin-top: 24px;
	}
	h2.eg-tf-top-spec__title {
		margin: 0 0 12px !important;
		font-size: 24px;
	}
	dl.eg-tf-top-spec__list {
		grid-template-columns: minmax(0, 1fr);
	}
	dt.eg-tf-top-spec__term {
		padding: 10px 0 0;
	}
	dd.eg-tf-top-spec__desc {
		padding: 2px 0 10px;
		border-bottom: 2px dotted #b3b3b3;
	}
	dd.eg-tf-top-spec__desc:last-child {
		padding-bottom: 0;
		border-bottom: none;
	}
	a.eg-tf-top-spec__more {
		width: 100%;
		margin-top: 20px;
		font-size: 16px;
	}
}

/* -- 04_tf_00 / 02（施工イメージ） -- */

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

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

/* 見出し・リストの共通margin／paddingを打ち消す */
h2.eg-tf-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-tf-top-image__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
	column-gap: 24px;
	align-items: start;
}

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

p.eg-tf-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-tf-top-image__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Cocoon本体の .article ul li { margin:0.2em } に勝つため親ulのクラスも含める */
ul.eg-tf-top-image__list li.eg-tf-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-tf-top-image__list li.eg-tf-top-image__item::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 20px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: #222;
}

.eg-tf-top-image__photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}

.eg-tf-top-image__photo {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.eg-tf-top-image__photo--main {
	grid-column: 1 / -1;
}

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

/* タブレット：上下分割（写真が上）、余白はPCの半分、<br>は解除（施工実績・施工イメージの共通対応） */
@media screen and (min-width: 768.02px) and (max-width: 1023px) {
	.eg-tf-top-image {
		padding: 25px 0 30px;
	}
	.eg-tf-top-image__body {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.eg-tf-top-image__photos {
		order: -1;
	}
	.eg-tf-top-image__text {
		padding-left: 0;
	}
}

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

/* ===== 04_tf_01_wall（/tf/wall/ TFウォール） ===== */

/* -- 04_tf_01_wall / 00（ヒーロー） -- */

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

.eg-tf-wall-hero__panel {
	padding: 50px 38px 49px;
	background-color: #f5f2f1;
}

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

/* 見出しの文字の上端が写真の上端から17px下 */
.eg-tf-wall-hero__body {
	padding-top: 8px;
}

/* 見出し・リストの共通margin／paddingを打ち消す */
h2.eg-tf-wall-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-tf-wall-hero__text {
	margin: 0;
	color: #333;
	font-size: 16px;
	line-height: 1.875;
}

/* 箇条書きは本文と同じ行ピッチ（30px）で、前後に1行分（30px）の空き */
ul.eg-tf-wall-hero__points {
	margin: 0 0 30px !important;
	padding: 0;
	list-style: none;
}

/* Cocoonの .article ul li のmarginに勝つため詳細度を上げる */
ul.eg-tf-wall-hero__points li.eg-tf-wall-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-tf-wall-hero__points li.eg-tf-wall-hero__point::before {
	content: "\2022";
	position: absolute;
	left: 0;
	top: 0;
}

.eg-tf-wall-hero__photo {
	margin: 0;
}

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

/* 下段の4項目：写真の下端から62px */
ul.eg-tf-wall-hero__features {
	display: grid;
	grid-template-columns: repeat(4, auto);
	justify-content: space-between;
	margin: 62px 0 0 !important;
	padding: 0;
	list-style: none;
}

ul.eg-tf-wall-hero__features li.eg-tf-wall-hero__feature {
	margin: 0;
	padding: 0 27px;
	border-left: 1px solid #ccc;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "メイリオ", "Yu Gothic", sans-serif !important;
}

ul.eg-tf-wall-hero__features li.eg-tf-wall-hero__feature:first-child {
	padding-left: 0;
	border-left: none;
}

ul.eg-tf-wall-hero__features li.eg-tf-wall-hero__feature:last-child {
	padding-right: 0;
}

.eg-tf-wall-hero__feature-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* 隣に見出し文字があり意味が重複する装飾アイコンのため、imgではなく背景画像（150px→50px表示） */
.eg-tf-wall-hero__icon {
	flex: none;
	width: 50px;
	height: 50px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.eg-tf-wall-hero__icon--light {
	background-image: url("/2026/wp-content/uploads/2026/09/tf-wall-00-icon-light.webp");
}

.eg-tf-wall-hero__icon--strength {
	background-image: url("/2026/wp-content/uploads/2026/09/tf-wall-00-icon-strength.webp");
}

.eg-tf-wall-hero__icon--design {
	background-image: url("/2026/wp-content/uploads/2026/09/tf-wall-00-icon-design.webp");
}

.eg-tf-wall-hero__icon--freedom {
	background-image: url("/2026/wp-content/uploads/2026/09/tf-wall-00-icon-freedom.webp");
}

/* 項目見出しはh3ではなくp（Cocoonのh3装飾を避けるため） */
p.eg-tf-wall-hero__feature-title {
	margin: 0;
	padding: 0;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.4;
	color: #111;
}

p.eg-tf-wall-hero__feature-text {
	margin: 10px 0 0;
	color: #333;
	font-size: 16px;
	line-height: 1.625;
}

/* タブレット以下：左右2分割→上下分割（写真が上・パネルいっぱい） */
@media screen and (max-width: 1023px) {
	.eg-tf-wall-hero__panel {
		padding: 0;
	}
	.eg-tf-wall-hero__main {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
		padding: 0;
	}
	.eg-tf-wall-hero__photo {
		order: -1;
	}
	img.eg-tf-wall-hero__img {
		aspect-ratio: 3 / 2;
		object-position: center 55%;
	}
	.eg-tf-wall-hero__body {
		padding: 36px 40px 8px;
	}
	h2.eg-tf-wall-hero__catch {
		margin-bottom: 28px !important;
		font-size: 26px;
	}
	ul.eg-tf-wall-hero__features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 40px;
		margin: 0 !important;
		padding: 0 40px 24px;
	}
	ul.eg-tf-wall-hero__features li.eg-tf-wall-hero__feature,
	ul.eg-tf-wall-hero__features li.eg-tf-wall-hero__feature:first-child,
	ul.eg-tf-wall-hero__features li.eg-tf-wall-hero__feature:last-child {
		padding: 24px 0;
		border-left: none;
		border-top: 2px dotted #b3b3b3;
	}
}

/* スマホ：改行を解除して左寄せにする */
@media screen and (max-width: 768px) {
	.eg-tf-wall-hero {
		padding: 0 0 40px;
	}
	.eg-tf-wall-hero__body {
		padding: 28px 20px 4px;
	}
	h2.eg-tf-wall-hero__catch {
		margin-bottom: 20px !important;
		font-size: 22px;
		line-height: 1.6;
	}
	h2.eg-tf-wall-hero__catch br,
	p.eg-tf-wall-hero__feature-text br {
		display: none;
	}
	ul.eg-tf-wall-hero__features {
		column-gap: 24px;
		padding: 0 20px 12px;
	}
	p.eg-tf-wall-hero__feature-title {
		font-size: 20px;
	}
}

@media screen and (max-width: 540px) {
	img.eg-tf-wall-hero__img {
		aspect-ratio: 4 / 3;
	}
	h2.eg-tf-wall-hero__catch {
		font-size: 21px;
	}
	ul.eg-tf-wall-hero__features {
		grid-template-columns: minmax(0, 1fr);
	}
	ul.eg-tf-wall-hero__features li.eg-tf-wall-hero__feature,
	ul.eg-tf-wall-hero__features li.eg-tf-wall-hero__feature:first-child,
	ul.eg-tf-wall-hero__features li.eg-tf-wall-hero__feature:last-child {
		padding: 20px 0;
	}
}


/* -- 04_tf_01_wall / 01（TFウォールの特徴：POINT01〜04） -- */

.eg-tf-wall-feature {
	max-width: 1044px;
	margin: 0 auto;
	padding: 80px 0 50px;
}

/* 見出し直下は写真の上端まで（行ボックス中心から94px） */
h2.eg-tf-wall-feature__title {
	margin: 0 0 66px !important;
	padding: 0;
	text-align: center;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	font-weight: 500;
	font-size: 40px;
	line-height: 1.4;
	color: var(--eg-green-deep, #004e37);
}

.eg-tf-wall-feature__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
	align-items: start;
	margin: 0 0 100px;
}

.eg-tf-wall-feature__item:last-child {
	margin-bottom: 0;
}

/* 番号の上端が写真の上端から63px下 */
.eg-tf-wall-feature__body {
	padding: 54px 0 0 46px;
}

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

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

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

/* h3の余白を打ち消す */
h3.eg-tf-wall-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.4;
	color: #111;
}

/* 本文は見出しより6px内側から始まる */
p.eg-tf-wall-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-tf-wall-feature__text:last-child {
	margin-bottom: 0;
}

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

/* Cocoonの .article ul li のmarginに勝つため詳細度を上げる */
ul.eg-tf-wall-feature__points li.eg-tf-wall-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-tf-wall-feature__points li.eg-tf-wall-feature__point::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 12px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: #333;
}

.eg-tf-wall-feature__photo {
	margin: 0;
}

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

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

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


/* -- 04_tf_01_wall / 02（TFウォール施工で重要なポイント） -- */

.eg-tf-wall-point {
	max-width: 1044px;
	margin: 0 auto;
	padding: 80px 0 50px;
}

/* 見出しの行ボックス中心から写真の上端まで83px */
h2.eg-tf-wall-point__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-tf-wall-point__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
	align-items: start;
}

/* 1行目の文字の位置が写真の上端より4px上 */
.eg-tf-wall-point__body {
	margin-top: -4px;
	padding-left: 37px;
}

p.eg-tf-wall-point__text {
	margin: 0 0 30px;
	padding: 0 0 0 10px;
	color: #333;
	font-size: 16px;
	line-height: 30px;
}

p.eg-tf-wall-point__text:first-child {
	margin-bottom: 0;
}

p.eg-tf-wall-point__text:last-child {
	margin-bottom: 0;
}

/* 見出し・リストの共通margin／paddingを打ち消す */
ul.eg-tf-wall-point__list {
	display: grid;
	gap: 6px;
	max-width: 398px;
	margin: 20px 0 30px !important;
	padding: 0;
	list-style: none;
}

/* Cocoonの .article ul li のmarginに勝つため詳細度を上げる */
ul.eg-tf-wall-point__list li.eg-tf-wall-point__item {
	margin: 0;
	padding: 0 26px;
	background-color: #f5f2f1;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	font-weight: 600;
	font-size: 20px;
	line-height: 46px;
	letter-spacing: 0.11em;
	color: #111;
}

/* 写真は500×264の横長を縦に2枚（間4px） */
.eg-tf-wall-point__photos {
	display: grid;
	gap: 4px;
}

img.eg-tf-wall-point__img {
	display: block;
	width: 100%;
	aspect-ratio: 500 / 264;
	object-fit: cover;
}

/* タブレット：左右2分割→上下分割（写真が上）、余白はPCの半分 */
@media screen and (max-width: 1023px) {
	.eg-tf-wall-point {
		padding: 40px 0 30px;
	}
	h2.eg-tf-wall-point__title {
		margin-bottom: 36px !important;
		font-size: 34px;
	}
	.eg-tf-wall-point__layout {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}
	.eg-tf-wall-point__photos {
		order: -1;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
	.eg-tf-wall-point__body {
		margin-top: 0;
		padding-left: 0;
	}
	p.eg-tf-wall-point__text {
		padding-left: 0;
	}
	ul.eg-tf-wall-point__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(3, auto);
		grid-auto-flow: column;
		gap: 6px 8px;
		max-width: none;
		margin: 16px 0 24px !important;
	}
}

/* スマホ：写真は縦積み、項目は1列。改行を解除して左寄せで自然に折り返す。区切り線は共通ルール（style.css）が入る */
@media screen and (max-width: 768px) {
	.eg-tf-wall-point {
		padding: 56px 0 20px;
	}
	h2.eg-tf-wall-point__title {
		margin-bottom: 28px !important;
		font-size: 26px;
	}
	.eg-tf-wall-point__layout {
		row-gap: 28px;
	}
	.eg-tf-wall-point__photos {
		grid-template-columns: minmax(0, 1fr);
	}
	ul.eg-tf-wall-point__list {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-flow: row;
		margin: 14px 0 22px !important;
	}
	ul.eg-tf-wall-point__list li.eg-tf-wall-point__item {
		padding: 0 18px;
		font-size: 18px;
		line-height: 42px;
	}
	p.eg-tf-wall-point__text {
		margin-bottom: 22px;
		line-height: 1.8;
	}
	p.eg-tf-wall-point__text br {
		display: none;
	}
}

@media screen and (max-width: 360px) {
	h2.eg-tf-wall-point__title {
		font-size: 24px;
	}
}

/* ===== 04_tf_02_floor（/tf/floor/ TFフロア） ===== */

/* -- 04_tf_02_floor / 00（ヒーロー） -- */

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

.eg-tf-floor-hero__panel {
	padding: 50px 38px;
	background-color: #f5f2f1;
}

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

/* 見出しの文字の上端が写真の上端から17px下 */
.eg-tf-floor-hero__body {
	padding-top: 8px;
}

/* 見出し・リストの共通margin／paddingを打ち消す */
h2.eg-tf-floor-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-tf-floor-hero__text {
	margin: 0;
	color: #333;
	font-size: 16px;
	line-height: 1.875;
}

/* 箇条書きは本文と同じ行ピッチ（30px）で、後ろに1行分（30px）の空き */
ul.eg-tf-floor-hero__points {
	margin: 0 0 30px !important;
	padding: 0;
	list-style: none;
}

/* Cocoonの .article ul li のmarginに勝つため詳細度を上げる */
ul.eg-tf-floor-hero__points li.eg-tf-floor-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-tf-floor-hero__points li.eg-tf-floor-hero__point::before {
	content: "\2022";
	position: absolute;
	left: 0;
	top: 0;
}

.eg-tf-floor-hero__photo {
	margin: 0;
}

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

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

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

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


/* -- 04_tf_02_floor / 01（TFフロアの特徴：POINT01〜03） -- */

.eg-tf-floor-feature {
	max-width: 1044px;
	margin: 0 auto;
	padding: 80px 0 50px;
}

/* 見出し直下は写真の上端まで（行ボックス中心から94px） */
h2.eg-tf-floor-feature__title {
	margin: 0 0 66px !important;
	padding: 0;
	text-align: center;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	font-weight: 500;
	font-size: 40px;
	line-height: 1.4;
	color: var(--eg-green-deep, #004e37);
}

.eg-tf-floor-feature__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
	align-items: start;
	margin: 0 0 100px;
}

.eg-tf-floor-feature__item:last-child {
	margin-bottom: 0;
}

/* 番号の上端が写真の上端から63px下 */
.eg-tf-floor-feature__body {
	padding: 54px 0 0 46px;
}

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

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

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

/* h3の余白を打ち消す */
h3.eg-tf-floor-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.4;
	color: #111;
}

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

p.eg-tf-floor-feature__text + p.eg-tf-floor-feature__text {
	margin-top: 26px;
}

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

/* Cocoonの .article ul li のmarginに勝つため詳細度を上げる */
ul.eg-tf-floor-feature__points li.eg-tf-floor-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-tf-floor-feature__points li.eg-tf-floor-feature__point::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 12px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: #333;
}

.eg-tf-floor-feature__photo {
	margin: 0;
}

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

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

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


/* -- 04_tf_02_floor / 02（TFフロア施工で重要なポイント） -- */

.eg-tf-floor-point {
	max-width: 1044px;
	margin: 0 auto;
	padding: 80px 0 50px;
}

/* 見出しの行ボックス中心から写真の上端まで83px */
h2.eg-tf-floor-point__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-tf-floor-point__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
	align-items: start;
}

/* 1行目の文字の位置が写真の上端より4px上 */
.eg-tf-floor-point__body {
	margin-top: -4px;
	padding-left: 37px;
}

p.eg-tf-floor-point__text {
	margin: 0 0 30px;
	padding: 0 0 0 10px;
	color: #333;
	font-size: 16px;
	line-height: 30px;
}

p.eg-tf-floor-point__text:first-child,
p.eg-tf-floor-point__text:last-child {
	margin-bottom: 0;
}

/* 見出し・リストの共通margin／paddingを打ち消す */
ul.eg-tf-floor-point__list {
	display: grid;
	gap: 6px;
	max-width: 398px;
	margin: 20px 0 30px !important;
	padding: 0;
	list-style: none;
}

/* Cocoonの .article ul li のmarginに勝つため詳細度を上げる */
ul.eg-tf-floor-point__list li.eg-tf-floor-point__item {
	margin: 0;
	padding: 0 26px;
	background-color: #f5f2f1;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	font-weight: 600;
	font-size: 20px;
	line-height: 46px;
	letter-spacing: 0.11em;
	color: #111;
}

.eg-tf-floor-point__photo {
	margin: 0;
}

img.eg-tf-floor-point__img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* タブレット：左右2分割→上下分割（写真が上）、余白はPCの半分 */
@media screen and (max-width: 1023px) {
	.eg-tf-floor-point {
		padding: 40px 0 30px;
	}
	h2.eg-tf-floor-point__title {
		margin-bottom: 36px !important;
		font-size: 34px;
	}
	.eg-tf-floor-point__layout {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}
	.eg-tf-floor-point__photo {
		order: -1;
	}
	img.eg-tf-floor-point__img {
		aspect-ratio: 3 / 2;
	}
	.eg-tf-floor-point__body {
		margin-top: 0;
		padding-left: 0;
	}
	p.eg-tf-floor-point__text {
		padding-left: 0;
	}
	ul.eg-tf-floor-point__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(3, auto);
		grid-auto-flow: column;
		gap: 6px 8px;
		max-width: none;
		margin: 16px 0 24px !important;
	}
}

/* スマホ：項目は1列。改行を解除して左寄せで自然に折り返す。区切り線は共通ルール（style.css）が入る */
@media screen and (max-width: 768px) {
	.eg-tf-floor-point {
		padding: 56px 0 20px;
	}
	h2.eg-tf-floor-point__title {
		margin-bottom: 28px !important;
		font-size: 26px;
	}
	.eg-tf-floor-point__layout {
		row-gap: 28px;
	}
	img.eg-tf-floor-point__img {
		aspect-ratio: 4 / 3;
	}
	ul.eg-tf-floor-point__list {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-flow: row;
		margin: 14px 0 22px !important;
	}
	ul.eg-tf-floor-point__list li.eg-tf-floor-point__item {
		padding: 0 18px;
		font-size: 18px;
		line-height: 42px;
	}
	p.eg-tf-floor-point__text {
		margin-bottom: 22px;
		line-height: 1.8;
	}
	p.eg-tf-floor-point__text br {
		display: none;
	}
}

@media screen and (max-width: 360px) {
	h2.eg-tf-floor-point__title {
		font-size: 24px;
	}
}

/* ===== TFカテゴリ共通：こんな方におすすめ（写真背景セクション） ===== */
/* 構造は eg-golf-recommend と同じ。全幅化は .main の padding 分の負マージン */
.eg-tf-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-tf-recommend__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 16px;
	text-align: center;
}

h2.eg-tf-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-tf-recommend__list {
	gap: 20px 32px;
}

ul.eg-tag-list.eg-tf-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-tf-recommend {
		margin-left: -16px;
		margin-right: -16px;
	}
}

@media screen and (max-width: 768px) {
	.eg-tf-recommend {
		padding: 40px 0 64px;
	}
	h2.eg-tf-recommend__title {
		margin: 0 0 28px;
	}
	ul.eg-tag-list.eg-tf-recommend__list {
		gap: 8px;
	}
	ul.eg-tag-list.eg-tf-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;
	}
}

/* スマホ：施工イメージとの間が空きすぎるため下余白を詰める */
@media screen and (max-width: 480px) {
	.eg-tf-top-spec {
		padding-bottom: 16px;
	}
}