/* ===== 見出し案A: なみ線（2026-11-06 確定。docs/heading-design-spec.md） =====
 * 第1弾: お知らせ記事の本文（.nw-article）だけ。事例・固定ページ・トップ・右カラムの Latest News は変えない。
 * このファイルが無ければ、何も起きない（functions.php が、ファイルがあるときだけ読み込む）。戻すときは、このファイルを削除する。 */
:root {
	--ah-accent: #9a8e7a;
	--ah-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 7.2'%3E%3Cpath d='M0 3.6 C9 1.6 19 5.6 30 3.6 S51 2.04 62 3.82 S84 5.6 96 3.38 S118 1.82 130 3.6 S150 5.16 160 3.6' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
	--ah-wave-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 416 7.2'%3E%3Cpath d='M0 3.6 C23.4 1.6 49.4 5.6 78 3.6 S132.6 2.04 161.2 3.82 S218.4 5.6 249.6 3.38 S306.8 1.82 338 3.6 S390 5.16 416 3.6' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
	--ah-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 6'%3E%3Ccircle cx='3' cy='3.3' r='1.3' fill='black'/%3E%3Ccircle cx='10.5' cy='2.7' r='1.3' fill='black'/%3E%3Ccircle cx='18' cy='3.4' r='1.3' fill='black'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ah-accent: #b5aa94;
	}
}

:root[data-theme="dark"] {
	--ah-accent: #b5aa94;
}

/* design-v04.css の「html body h1〜h4」より強くするため、html body を付ける */
html body .nw-article h2,
html body .nw-article h3,
html body .nw-article h4,
html body .nw-article h5 {
	position: relative;
	line-height: 1.55;
	/* 本文と同じ横幅いっぱいまで使う（2026-11-09 の決定。balance にしない） */
	text-wrap: wrap;
}

html body .nw-article h2 {
	font-size: 28px;
	font-weight: 500;
	letter-spacing: 0.02em;
	padding: 0 0 17px;
	border: 0;
}

/* h2は波の間隔を「もっとゆるめ」（h5用の --ah-wave を横に2.6倍に引き延ばした --ah-wave-l） */
html body .nw-article h2::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 7.2px;
	background: var(--ah-accent);
	-webkit-mask: var(--ah-wave-l) repeat-x left center / 416px 7.2px;
	mask: var(--ah-wave-l) repeat-x left center / 416px 7.2px;
}

/* h3は点線（手描き風。フルカラム幅） */
html body .nw-article h3 {
	font-size: 22px;
	font-weight: 500;
	padding: 0 0 14px;
	border: 0;
}

html body .nw-article h3::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	/* extra.css の旧ブロックの width: 160px を打ち消し、フルカラム幅にする */
	width: auto;
	max-width: none;
	height: 6px;
	background: var(--ah-accent);
	-webkit-mask: var(--ah-dots) repeat-x left center / 21px 6px;
	mask: var(--ah-dots) repeat-x left center / 21px 6px;
}

/* h4は「B 縦のしるし」。左に少し傾けた短い縦線 */
html body .nw-article h4 {
	font-size: 18px;
	font-weight: 500;
	padding-left: 15px;
}

html body .nw-article h4::before {
	content: "";
	/* extra.css の旧ブロック（丸の h4）の display / height / margin を打ち消す */
	display: block;
	height: auto;
	margin: 0;
	position: absolute;
	left: 1px;
	top: 0.22em;
	bottom: 0.22em;
	width: 3px;
	border-radius: 2px;
	background: var(--ah-accent);
	transform: rotate(3deg);
}

html body .nw-article h5 {
	font-size: 15px;
	font-weight: 500;
	color: var(--c-text-sub, #5c5c5c);
	letter-spacing: 0.04em;
}

html body .nw-article h5::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 7.2px;
	margin-right: 8px;
	vertical-align: -1px;
	background: var(--ah-accent);
	-webkit-mask: var(--ah-wave) no-repeat left center / 160px 7.2px;
	mask: var(--ah-wave) no-repeat left center / 160px 7.2px;
}

@media (max-width: 480px) {
	html body .nw-article h2 {
		font-size: 24px;
	}

	html body .nw-article h3 {
		font-size: 20px;
	}
}