/**
 * ALMOND CLINIC GUIDE 記事ページ（single.php 専用。記事ページでだけ読み込む）
 * 試作の styles.css・guide-pages.css・workspace.css・article-headings.css から記事ページの指定を、試作と同じ順で抜き出したもの。
 *   - セレクタはすべて .acg-main 付き（guide-common.css の見出し・段落の margin: 0 に負けないように。全部に付けているので試作どうしの優先関係は変わらない）
 *   - 色・書体の変数は --acg-*（guide-common.css）に置き換えた
 *   - 本文の見出し（.article-prose の h2〜h4）は直下だけに効かせている（流れのリストなど、パーツの中の見出しに掛けないため）
 * 記事パーツ（.acg-part）は guide-parts.css。末尾の「WordPress の本文」は試作に無い補足。
 */

/* 本文の見出しの大きさと色（試作の article-headings.css の :root） */
:root {
	--article-h2-size: 25px;
	--article-h3-size: 19px;
	--article-h4-size: 16px;
	--article-heading-accent: #a7552c;
	--article-heading-tint: #f5f0e7;
}

@media (max-width: 760px) {
	:root {
		--article-h2-size: 22px;
		--article-h3-size: 17px;
		--article-h4-size: 15px;
	}
}

/* ----- 試作の styles.css から ----- */

.acg-main .article-layout {
	display: grid;
	grid-template-columns: minmax(0,760px) 250px;
	gap: 70px;
	margin-top: 20px;
	margin-bottom: 80px;
	align-items: start;
}

.acg-main .article-header .eyebrow {
	font-family: var(--acg-sans);
	font-size: 11px;
}

.acg-main .article-header h1 {
	font-size: 29px;
	line-height: 1.8;
	letter-spacing: .04em;
	margin: 13px 0 20px;
}

.acg-main .article-details {
	display: flex;
	gap: 16px;
	font-size: 10px;
	color: var(--acg-muted);
	border-bottom: 1px solid var(--acg-line);
	padding-bottom: 20px;
}

.acg-main .article-header .article-visual {
	height: 235px;
	margin-top: 28px;
	padding: 36px;
}

.acg-main .article-header .article-visual>span {
	font-size: 31px;
}

.acg-main .article-lead {
	font-size: 13px;
	line-height: 2.25;
	margin: 28px 0;
}

.acg-main .article-toc {
	border: 1px solid var(--acg-line);
	padding: 25px 30px;
	background: var(--acg-cream);
	margin-block: 30px;
}

.acg-main .article-toc h2 {
	font-family: var(--acg-sans);
	font-size: 13px;
	margin-bottom: 14px;
}

.acg-main .article-toc ol {
	margin: 0;
	padding-left: 20px;
	font-size: 12px;
	line-height: 2.5;
}

.acg-main .article-section {
	margin-top: 46px;
}

.acg-main .article-section h2 {
	font-size: 23px;
	line-height: 1.7;
	border-bottom: 1px solid var(--acg-line);
	padding-bottom: 15px;
	margin-bottom: 21px;
	letter-spacing: .04em;
}

.acg-main .article-section p {
	font-size: 13px;
	line-height: 2.2;
	margin-bottom: 18px;
}

.acg-main .sidebar {
	position: sticky;
	top: 30px;
}

.acg-main .sidebar h2 {
	font-size: 17px;
	margin-bottom: 15px;
}

.acg-main .sidebar-article {
	display: block;
	border-top: 1px solid var(--acg-line);
	padding: 16px 0;
	font-size: 11px;
	line-height: 1.9;
}

.acg-main .sidebar-article small {
	display: block;
	color: var(--acg-brand);
	font-size: 9px;
	margin-bottom: 4px;
}

.acg-main .sidebar-category {
	background: var(--acg-cream);
	padding: 22px;
	margin-top: 25px;
}

.acg-main .sidebar-category p {
	font-size: 11px;
	margin: 10px 0;
}

.acg-main .article-related {
	padding-block: 60px;
	background: var(--acg-cream);
}

@media (max-width:1000px) {
	.acg-main .article-layout {
		grid-template-columns: minmax(0,1fr) 215px;
		gap: 35px;
	}
}

@media (max-width:760px) {
	.acg-main .article-layout {
		display: block;
		margin-top: 10px;
		margin-bottom: 40px;
	}

	.acg-main .sidebar {
		display: none;
	}

	.acg-main .article-header h1 {
		font-size: 24px;
		line-height: 1.75;
	}

	.acg-main .article-details {
		font-size: 9px;
		gap: 10px;
		flex-wrap: wrap;
	}

	.acg-main .article-header .article-visual {
		height: 190px;
		padding: 25px;
	}

	.acg-main .article-header .article-visual>span {
		font-size: 28px;
	}

	.acg-main .article-lead {
		font-size: 12px;
	}

	.acg-main .article-toc {
		padding: 20px;
	}

	.acg-main .article-toc ol {
		font-size: 11px;
	}

	.acg-main .article-section {
		margin-top: 35px;
	}

	.acg-main .article-section h2 {
		font-size: 21px;
	}

	.acg-main .article-section p {
		font-size: 12px;
	}

	.acg-main .article-related {
		padding-block: 40px;
	}
}

/* ----- 試作の guide-pages.css から ----- */

.acg-main .guide-article {
	margin-top: 24px;
}

.acg-main .article-tags {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 10px;
	flex-wrap: wrap;
}

.acg-main .article-tags>a {
	background: var(--acg-brand);
	color: white;
	padding: 3px 14px;
}

.acg-main .article-header .article-visual {
	position: relative;
}

.acg-main .article-art-icon {
	position: absolute;
	width: 115px;
	height: 130px;
	right: 35px;
	bottom: 26px;
	opacity: .55;
}

.acg-main .article-art-icon svg {
	height: 100%;
	width: 100%;
}

.acg-main .article-header .article-visual>span {
	max-width: 75%;
}

.acg-main .article-toc h2 {
	font-family: Georgia,serif;
	color: var(--acg-brand);
	font-size: 12px;
	letter-spacing: .12em;
}

.acg-main .section-number {
	font-family: Georgia,serif;
	font-size: 10px;
	color: var(--acg-brand);
	letter-spacing: .12em;
}

.acg-main .article-section .section-number+h2 {
	margin-top: 7px;
}

.acg-main .detail-table {
	min-width: 620px;
	font-size: 11px;
}

.acg-main .detail-table th,
.acg-main .detail-table td {
	padding: 15px 13px;
}

.acg-main .detail-table th:first-child {
	width: 20%;
}

.acg-main .table-hint {
	font-size: 9px!important;
	color: var(--acg-muted);
	margin-top: 7px;
}

.acg-main .inline-related {
	display: block;
	border: 1px solid var(--acg-line);
	padding: 20px 23px;
	margin-top: 25px;
}

.acg-main .inline-related span {
	display: block;
	color: var(--acg-brand);
	font-size: 9px;
	margin-bottom: 7px;
}

.acg-main .inline-related strong {
	font-size: 12px;
	font-weight: 500;
}

.acg-main .flow-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.acg-main .flow-list li {
	display: flex;
	gap: 23px;
	padding: 20px 0;
	border-bottom: 1px solid var(--acg-line);
	align-items: flex-start;
}

.acg-main .flow-number {
	font-family: Georgia,serif;
	font-size: 27px;
	color: #b3957c;
	line-height: 1.5;
}

.acg-main .flow-list h3 {
	font-size: 14px;
	margin: 0 0 8px;
}

.acg-main .flow-list p {
	font-size: 12px;
	color: var(--acg-muted);
	margin: 0;
}

.acg-main .article-editorial {
	padding: 25px;
	background: var(--acg-cream);
	border: 1px solid var(--acg-line);
}

.acg-main .article-editorial h2 {
	font-size: 18px;
	margin: 10px 0;
	border: 0;
	padding: 0;
}

.acg-main .article-editorial p {
	font-size: 11px;
	margin-bottom: 10px;
	color: var(--acg-muted);
}

.acg-main .category-return {
	display: flex;
	justify-content: space-between;
	border-block: 1px solid var(--acg-line);
	padding: 18px 0;
	margin-top: 30px;
	font-size: 12px;
	color: var(--acg-brand);
}

.acg-main .sidebar .sidebar-category {
	margin: 0 0 25px;
}

.acg-main .sidebar-category h2 {
	font-family: var(--acg-serif);
	margin: 10px 0;
	font-size: 22px;
}

.acg-main .sidebar-toc {
	padding-bottom: 28px;
}

.acg-main .sidebar-toc>a {
	display: block;
	font-size: 11px;
	padding: 9px 0;
	border-bottom: 1px solid var(--acg-line);
}

.acg-main .sidebar-toc .eyebrow {
	margin-bottom: 10px;
}

@media (max-width:1000px) {
	.acg-main .article-art-icon {
		width: 85px;
		right: 20px;
	}
}

@media (max-width:760px) {
	.acg-main .article-tags {
		font-size: 9px;
		gap: 8px;
	}

	.acg-main .guide-article {
		margin-top: 12px;
	}

	.acg-main .article-art-icon {
		width: 65px;
		height: 90px;
		bottom: 32px;
		right: 15px;
	}

	.acg-main .article-header .article-visual>span {
		font-size: 25px;
		max-width: 78%;
	}

	.acg-main .article-header .article-visual>small {
		font-size: 7px;
	}

	.acg-main .section-number {
		font-size: 9px;
	}

	.acg-main .detail-table {
		min-width: 550px;
		font-size: 10px;
	}

	.acg-main .flow-list li {
		gap: 18px;
		padding: 19px 0;
	}

	.acg-main .flow-list h3 {
		font-size: 13px;
	}

	.acg-main .flow-list p {
		font-size: 11px;
	}

	.acg-main .article-editorial {
		padding: 22px;
	}

	.acg-main .category-return {
		font-size: 11px;
	}

	.acg-main .article-related .section-heading {
		flex-wrap: wrap;
	}

	.acg-main .article-related .section-link {
		margin: 0;
	}
}

.acg-main .article-header h1 {
	text-wrap: wrap;
	line-break: strict;
	word-break: normal;
	letter-spacing: .02em;
	font-size: 27px;
	line-height: 1.75;
}

/* ----- 試作の workspace.css から ----- */

.acg-main .article-header h1 {
	max-width: none;
}

.acg-main .article-edit-link {
	font-size: 10px;
	margin-left: auto;
	color: var(--acg-brand);
	border-bottom: 1px solid #c9ad97;
}

.acg-main .article-toc a:hover {
	text-decoration: underline;
}

@media (max-width:760px) {
	.acg-main .article-header h1 {
		font-size: 24px;
		line-height: 1.7;
		letter-spacing: .015em;
		text-wrap: wrap;
	}

	.acg-main .article-edit-link {
		font-size: 9px;
	}
}

.acg-main .article-tags>a.article-edit-link {
	background: transparent;
	color: var(--acg-brand);
	padding: 0;
}

.acg-main .article-header .article-toc {
	margin: 22px 0 28px;
	border: 1px solid #cbb49e;
	background: #f5f0e7;
	padding: 20px 25px;
}

.acg-main .toc-heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	margin-bottom: 11px;
}

.acg-main .article-toc .toc-heading h2 {
	font: 500 15px/1.7 var(--acg-sans);
	color: var(--acg-ink);
	letter-spacing: .03em;
	margin: 0;
}

.acg-main .toc-toggle {
	font-size: 10px;
	color: var(--acg-brand);
	padding: 5px 0;
	white-space: nowrap;
}

.acg-main .article-toc ol {
	font-size: 12px;
	line-height: 2.3;
	margin: 0;
	padding-left: 22px;
}

.acg-main .article-toc ol[hidden] {
	display: none;
}

/* 目次の h3（2026-10-26 先方依頼。single.php の .toc-sub）：h2 の下に一段下げ、文字を一回り小さく淡く */
.acg-main .article-toc .toc-sub {
	margin: 0 0 4px;
	padding-left: 1.4em;
	font-size: 11px;
	line-height: 1.9;
	color: var(--acg-muted);
}

.acg-main .article-toc .toc-sub li {
	padding-block: 1px;
}

.acg-main .toc-return {
	position: fixed;
	right: 24px;
	bottom: 22px;
	z-index: 15;
	background: var(--acg-paper);
	border: 1px solid #c5a68a;
	box-shadow: 0 3px 14px #4d361517;
	color: var(--acg-brand);
	padding: 10px 18px;
	border-radius: 25px;
	font-size: 11px;
}

.acg-main .toc-return:hover {
	background: var(--acg-brand);
	color: white;
}

@media (max-width:760px) {
	.acg-main .article-header .article-toc {
		padding: 18px 19px;
		margin-block: 20px;
	}

	.acg-main .article-toc .toc-heading h2 {
		font-size: 14px;
	}

	.acg-main .article-toc ol {
		font-size: 11px;
		line-height: 2.25;
	}

	.acg-main .article-toc .toc-sub {
		font-size: 10.5px;
		line-height: 1.9;
	}

	.acg-main .toc-toggle {
		font-size: 9px;
	}

	.acg-main .toc-return {
		right: 14px;
		bottom: 15px;
		padding: 9px 14px;
		font-size: 10px;
	}
}

.acg-main .article-eyecatch {
	margin: 28px 0;
}

.acg-main .article-eyecatch .article-visual {
	margin: 0;
	aspect-ratio: 16/9;
	height: auto;
	min-height: 235px;
}

.acg-main .article-eyecatch figcaption {
	font-size: 10px;
	color: var(--acg-muted);
	margin-top: 8px;
	text-align: center;
}

.acg-main .article-cover-image {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16/9;
	object-fit: cover;
}

.acg-main .card-eyecatch>.article-cover-image {
	height: 172px;
	object-fit: cover;
}

@media (max-width:760px) {
	.acg-main .article-eyecatch .article-visual {
		min-height: 180px;
		padding: 22px;
	}

	.acg-main .article-eyecatch .article-visual>small {
		font-size: 8px;
	}

	.acg-main .card-eyecatch>.article-cover-image {
		height: 130px;
	}
}

/* ----- 試作の article-headings.css から ----- */

.acg-main .guide-article article .article-section:not(.article-editorial)>h2,
.acg-main .guide-article article .article-prose > h2 {
	font-family: var(--acg-serif);
	font-size: var(--article-h2-size);
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: .035em;
	color: var(--acg-ink);
	background: var(--article-heading-tint);
	border: 0;
	border-left: 4px solid var(--article-heading-accent);
	border-radius: 0;
	padding: 17px 22px;
	margin: 10px 0 25px;
	text-wrap: wrap;
	overflow-wrap: anywhere;
}

.acg-main .guide-article article .article-section>h3,
.acg-main .guide-article article .article-prose > h3 {
	position: relative;
	font-family: var(--acg-sans);
	font-size: var(--article-h3-size);
	font-weight: 600;
	line-height: 1.75;
	letter-spacing: .015em;
	color: var(--acg-brand-dark);
	border: 0;
	border-bottom: 1px solid var(--acg-line);
	background: transparent;
	padding: 0 0 12px;
	margin: 34px 0 17px;
	text-wrap: wrap;
	overflow-wrap: anywhere;
}

.acg-main .guide-article article .article-section>h3::after,
.acg-main .guide-article article .article-prose > h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 54px;
	height: 2px;
	background: var(--article-heading-accent);
}

.acg-main .guide-article article .article-section>h4,
.acg-main .guide-article article .article-prose > h4 {
	font-family: var(--acg-sans);
	font-size: var(--article-h4-size);
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: .01em;
	color: var(--acg-ink);
	border: 0;
	border-left: 2px solid #b98b69;
	background: transparent;
	padding: 0 0 0 13px;
	margin: 26px 0 13px;
	text-wrap: wrap;
	overflow-wrap: anywhere;
}

.acg-main .guide-article article .article-section>h2+h3,
.acg-main .guide-article article .article-prose > h2+h3 {
	margin-top: 25px;
}

.acg-main .guide-article article .article-section>h3+h4,
.acg-main .guide-article article .article-prose > h3+h4 {
	margin-top: 20px;
}

@media (max-width:760px) {
	.acg-main .guide-article article .article-section:not(.article-editorial)>h2,
	.acg-main .guide-article article .article-prose > h2 {
		padding: 14px 17px;
		margin-bottom: 21px;
		letter-spacing: .02em;
	}

	.acg-main .guide-article article .article-section>h3,
	.acg-main .guide-article article .article-prose > h3 {
		margin: 28px 0 15px;
		padding-bottom: 10px;
	}

	.acg-main .guide-article article .article-section>h4,
	.acg-main .guide-article article .article-prose > h4 {
		margin: 22px 0 12px;
		padding-left: 11px;
	}
}

/* ----- 試作の guide-pages.css の .article-tags>span:not(.sample-tag)（試作専用の .sample-tag を外して書いたもの） ----- */
.acg-main .article-tags > span {
	color: var(--acg-muted);
}

/* ----- JIN の打ち消し：JIN は header 要素に letter-spacing: 1px を付けている（記事の見出し部分 <header> にも掛かる） ----- */
.acg-main .article-header {
	letter-spacing: normal;
}

/* ----- JIN の打ち消し：JIN は #wrapper に overflow: hidden を付けている。hidden の祖先がスクロールの基準になり、サイドバーの position: sticky が効かない。
   clip は hidden と同じくはみ出しを切るが、スクロールの基準にはならない（未対応の古い Safari 15 以前は今までどおり追従しないだけ） ----- */
#wrapper {
	overflow: clip;
}

/* ----- WordPress の本文（試作に無い補足） ----- */
/* 本文の段落と箇条書きは、試作の .article-section の本文と同じ文字組みにする */
.acg-main .article-prose > p {
	font-size: 13px;
	line-height: 2.2;
	margin-bottom: 18px;
}

.acg-main .article-prose > :is(ul, ol):not(.flow-list) {
	margin: 0 0 18px;
	padding-left: 1.6em;
	font-size: 13px;
	line-height: 2.2;
}

/* 箇条書きの記号と番号（JIN の style.css のリセット ol, ul { list-style: none } の打ち消し。エディタの箇条書き・番号付きリストのボタンで作るもの）
   流れ（.flow-list）は除く。試作では章の中に置かれ、番号も字下げも付かない */
.acg-main .article-prose > ul {
	list-style: disc;
}

.acg-main .article-prose > ol:not(.flow-list) {
	list-style: decimal;
}

/* よくある疑問（.faq）の回答。試作では .faq details p が .article-section p に勝つ（12px・下の余白なし）。
   ここの指定に .acg-main を付けたことで .article-section p の方が強くなっていたので、章の中でも試作どおりにする */
.acg-main .article-section .faq details p {
	margin: 16px 0 0;
	font-size: 12px;
}

/* 本文の直下に置いたパーツは、試作の記事の直下のパーツ（article > .acg-part）と同じ間隔に */
.acg-main .guide-article .article-prose > .acg-part {
	margin-top: 30px;
}

/* リード文（本文の最初の h2 より前。single.php の .article-intro）：アイキャッチの下・目次の上。上下の間隔は試作のリード文（.article-lead）と同じ 28px */
.acg-main .article-header .article-intro {
	margin: 28px 0;
}

.acg-main .article-header .article-intro > :first-child {
	margin-top: 0;
}

.acg-main .article-header .article-intro > :last-child {
	margin-bottom: 0;
}

@media (max-width: 760px) {
	.acg-main .article-prose > p,
	.acg-main .article-prose > :is(ul, ol):not(.flow-list) {
		font-size: 12px;
	}
}