/* =========================================================
   G.B.S サイトリニューアル: 記事ページの見た目
   （ブログ・コラム・現場ブログ・施工実績の詳細ページ）
   body.gbsr-article が付いている時だけ効く（公開スイッチ前は管理者だけ）
   ========================================================= */

.gbsr-article {
	--gbsr-red: #c8161d;
	--gbsr-red-soft: #fbeeee;
	--gbsr-ink: #1b1b1b;
	--gbsr-line: #e7e3dd;
	--gbsr-bg: #f7f4f0;
}

/* ---------- H1（記事タイトル） ---------- */
.gbsr-article #post_title_area {
	margin-bottom: 44px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--gbsr-line);
	position: relative;
}
.gbsr-article #post_title_area::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 88px;
	height: 3px;
	background: var(--gbsr-red);
}
.gbsr-article #post_title_area .title {
	font-weight: 600;
	letter-spacing: 0.02em;
}
.gbsr-article #post_title_area .date {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--gbsr-bg);
	color: #777;
	font-size: 12px;
	letter-spacing: 0.08em;
}
/* 施工実績のタイトル */
.gbsr-article #single_work_title_area .title {
	position: relative;
	padding-bottom: 22px;
}
.gbsr-article #single_work_title_area .title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 56px;
	height: 3px;
	margin-left: -28px;
	background: var(--gbsr-red);
}

/* ---------- H2 ---------- */
.gbsr-article .post_content h2 {
	position: relative;
	margin: 60px 0 26px;
	padding: 16px 20px 16px 26px;
	border-radius: 0 8px 8px 0;
	background: var(--gbsr-bg);
	color: var(--gbsr-ink);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: 0.02em;
}
.gbsr-article .post_content h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	background: var(--gbsr-red);
}

/* ---------- H3（と、既存コラムの「1. ○○」太字見出し） ---------- */
.gbsr-article .post_content h3,
.gbsr-article .post_content p.gbsr-h {
	position: relative;
	margin: 48px 0 20px;
	padding: 0 0 12px 22px;
	border-bottom: 2px solid var(--gbsr-line);
	color: var(--gbsr-ink);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.55;
}
.gbsr-article .post_content h3::after,
.gbsr-article .post_content p.gbsr-h::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 80px;
	height: 2px;
	background: var(--gbsr-red);
}
.gbsr-article .post_content p.gbsr-h strong {
	background: none;
	font-weight: 700;
}

/* H3 の頭に赤い菱形のマーク */
.gbsr-article .post_content h3::before,
.gbsr-article .post_content p.gbsr-h::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.5em;
	width: 11px;
	height: 11px;
	background: var(--gbsr-red);
	transform: rotate(45deg);
	box-shadow: 4px -4px 0 -1px rgba(200, 22, 29, 0.28);
}

/* ---------- H4 ---------- */
.gbsr-article .post_content h4 {
	margin: 36px 0 14px;
	padding: 2px 0 2px 14px;
	border-left: 4px solid var(--gbsr-red);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
}

/* ---------- 本文の太字＝やわらかいマーカー ---------- */
.gbsr-article .post_content strong {
	background: linear-gradient(transparent 62%, rgba(200, 22, 29, 0.16) 62%);
	font-weight: 700;
}

/* ---------- 箇条書き ---------- */
.gbsr-article .post_content ul {
	margin: 20px 0 28px;
	padding: 18px 22px 18px 20px;
	border-radius: 10px;
	background: #fcfbf9;
	border: 1px solid var(--gbsr-line);
	list-style: none;
}
.gbsr-article .post_content ul li {
	position: relative;
	padding-left: 26px;
	line-height: 1.9;
}
.gbsr-article .post_content ul li + li {
	margin-top: 8px;
}
.gbsr-article .post_content ul li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--gbsr-red);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}
.gbsr-article .post_content ol {
	margin: 20px 0 28px;
	padding: 18px 22px 18px 20px;
	border-radius: 10px;
	background: #fcfbf9;
	border: 1px solid var(--gbsr-line);
	list-style: none;
	counter-reset: gbsr-ol;
}
.gbsr-article .post_content ol li {
	position: relative;
	padding-left: 36px;
	line-height: 1.9;
	counter-increment: gbsr-ol;
}
.gbsr-article .post_content ol li + li {
	margin-top: 10px;
}
.gbsr-article .post_content ol li::before {
	content: counter(gbsr-ol);
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--gbsr-red);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
}
/* CTA の中の箇条書きは対象外 */
.gbsr-article .post_content .gbsr-cta ul {
	margin: 14px 0 0;
	padding: 0;
	border: 0;
	background: none;
}
.gbsr-article .post_content .gbsr-cta ul li {
	padding-left: 10px;
}
.gbsr-article .post_content .gbsr-cta ul li::before {
	display: none;
}
.gbsr-article .post_content .gbsr-cta strong {
	background: none;
}

/* ---------- 写真 ---------- */
.gbsr-article .post_content figure.wp-block-image img,
.gbsr-article .single_work_desc img {
	border-radius: 10px;
}
.gbsr-article .post_content figcaption {
	margin-top: 8px;
	color: #777;
	font-size: 12.5px;
	text-align: center;
}

/* ---------- 表 ---------- */
.gbsr-article .post_content table {
	border-collapse: collapse;
	width: 100%;
}
.gbsr-article .post_content table th {
	background: var(--gbsr-bg);
	font-weight: 700;
}
.gbsr-article .post_content table th,
.gbsr-article .post_content table td {
	border: 1px solid var(--gbsr-line);
	padding: 10px 14px;
}

/* ---------- 施工実績の見出し（TCD のキャッチ） ---------- */
.gbsr-article .single_work_catch {
	position: relative;
	padding-bottom: 20px;
}
.gbsr-article .single_work_catch::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 40px;
	height: 3px;
	margin-left: -20px;
	background: var(--gbsr-red);
}

/* ---------- スマホ ---------- */
@media (max-width: 767px) {
	.gbsr-article .post_content h2 {
		margin: 44px 0 20px;
		padding: 13px 14px 13px 20px;
		font-size: 18.5px;
	}
	.gbsr-article .post_content h3,
	.gbsr-article .post_content p.gbsr-h {
		margin: 38px 0 16px;
		font-size: 17.5px;
	}
	.gbsr-article .post_content h4 {
		font-size: 16px;
	}
	.gbsr-article .post_content ul,
	.gbsr-article .post_content ol {
		padding: 14px 14px 14px 12px;
	}
}

/* ---------- 画面左下の電話・メール固定バナー（PC）が本文の左端に被らないように ---------- */
/* 本文は幅800pxの中央寄せ。デザインはそのままで、左の余白に収まる幅まで縮める（最大350px＝元の大きさ、最小200px） */
@media (min-width: 768px) {
	.gbsr-article .pcTelBanner-inner {
		width: clamp(200px, calc((100vw - 800px) / 2 - 16px), 350px);
	}
	.gbsr-article .fotter-form {
		padding: clamp(12px, calc((100vw - 800px) / 2 * 0.07), 25px) 10px;
		font-size: clamp(15px, calc((100vw - 800px) / 2 * 0.068), 24px);
	}
}