/*
 * 全ページ共通のタイポグラフィ。
 *
 * ページ固有CSSの後に読み込み、レイアウトやアニメーションを変更せず、
 * 見出し色・サイズとコンテンツ内の文字の強弱を統一する。
 */

/*
 * h1〜h4はサイト共通のタイポグラフィスケールを使う。
 * ページ固有CSSで同じ役割の見出しサイズを再定義しない。
 * カード名・料金名など、文書見出しとは別のUI役割だけコンポーネント側で例外を持てる。
 */
main h1 {
	font-size: var(--font-size-h1);
	line-height: 1.45;
	letter-spacing: -0.025em;
}

main h2 {
	font-size: var(--font-size-h2);
	line-height: 1.5;
	letter-spacing: -0.02em;
}

main h3 {
	font-size: var(--font-size-h3);
	line-height: 1.6;
}

main h4 {
	font-size: var(--font-size-h4);
	line-height: 1.65;
}

/*
 * h1〜h3だけをブランドの見出し色に統一する。
 * --color-heading 自体は黒のまま残すことで、strong・dt・ラベルなど
 * 見出し要素ではない文字まで青くならないようにする。
 * ページCSSで color: var(--color-heading) としている既存見出しも、
 * 要素上で変数を差し替えることで同じルールに揃う。
 */
main :is(h1, h2, h3) {
	--color-heading: var(--color-primary-dark);
	color: var(--color-heading);
}

/* FAQ本文用の色指定より詳細度を上げ、eyebrowだけ共通の青を維持する。 */
main .p-service-detail__faq-grid > div:first-child > p.c-eyebrow {
	color: var(--color-primary);
}

/* 共通の濃色セクションとCTAでは、見出しを白へ反転する。 */
main :is(.l-section--dark, .p-cta) :is(h1, h2, h3) {
	--color-heading: var(--color-text-inverse);
	color: var(--color-heading);
}

/* 本文は通常ウェイトを維持する。PCは16px、スマホは共通トークンで14pxにする。 */
main :is(p, li, dd, td, blockquote, figcaption) {
	font-weight: 400 !important;
}

/* 見出し・項目名・補助見出し・強調リンクは500に統一する。 */
main :is(h1, h2, h3, h4, h5, h6, strong, b, dt, th, label, summary),
main :is(.c-eyebrow, .c-section-title, .c-text-link, .p-detail-fit__item-title),
main :is([class*="price"], [class*="process"], [class*="flow"], [class*="faq"]),
main :is([class*="price"], [class*="process"], [class*="flow"], [class*="faq"]) :is(strong, b, dt, summary, span),
main :is([class*="label"], [class$="__name"], [class$="__number"]) {
	font-weight: 500 !important;
}

/* 料金ページの説明文と注記は、クラス名に price を含んでも本文として400を維持する。 */
main .p-price-detail-block__lead,
main .p-price-note {
	font-weight: 400 !important;
}

/* FAQのQ/A表示も質問・回答の見出しと同じウェイトにする。 */
main .c-faq summary::before,
main .c-faq__answer::before {
	font-weight: 500 !important;
}

/* CTAを含むボタンは、操作要素として判別できる強さを残す。 */
main :is(.c-button, button, input[type="button"], input[type="submit"], .wpcf7-submit) {
	font-weight: 600 !important;
}

/*
 * 通常の情報セクションは、同じ親要素内の .l-section だけを数えて背景を交互にする。
 * 標準は薄い背景のヒーローを前提に「白 → 薄背景」で開始する。
 * 白いヒーローを持つトップ（.p-front）と共通詳細（.p-service-detail）だけ
 * 開始色の変数を反転し、「薄背景 → 白」で開始する。
 * ヒーロー・CTA・無料診断など .l-section ではない強調ブロックは数えない。
 * 濃色セクションは除外し、独自背景を維持したい場合は .l-section--tone-exempt を付ける。
 * 非対応ブラウザでは既存の .l-section--subtle がフォールバックとして機能する。
 */
main {
	--section-tone-first: var(--color-background);
	--section-tone-second: var(--color-background-subtle);
}

main.p-front,
main .p-service-detail {
	--section-tone-first: var(--color-background-subtle);
	--section-tone-second: var(--color-background);
}

@supports selector(:nth-child(1 of *)) {
	main section.l-section:not(.l-section--dark):not(.l-section--tone-exempt):nth-child(
		odd of section.l-section:not(.l-section--dark):not(.l-section--tone-exempt)
	) {
		background-color: var(--section-tone-first);
	}

	main section.l-section:not(.l-section--dark):not(.l-section--tone-exempt):nth-child(
		even of section.l-section:not(.l-section--dark):not(.l-section--tone-exempt)
	) {
		background-color: var(--section-tone-second);
	}
}

@media (max-width: 768px) {
	/*
	 * スマホでは本文・リスト・通常リンクを14pxへ統一する。
	 * h1〜h3はtokens.cssのモバイル用見出しスケールへ切り替える。
	 * h4とeyebrow、ヘッダー／フッターのカテゴリ見出しはそれぞれの既存ルールを維持する。
	 * フォーム入力欄はiOSの自動ズームを避けるため対象に含めない。
	 */
	main :is(p:not(.c-eyebrow):not([class*="eyebrow"]), li, dd, td, blockquote, figcaption),
	main a:not(.c-button),
	.l-mobile-nav__links a {
		font-size: var(--font-size-body-mobile);
	}

	main .c-button {
		font-size: var(--font-size-body-mobile);
	}

	main .p-cta .c-eyebrow,
	main .p-cta h2 {
		text-align: center;
	}
}