/* ─────────────────────────────────────────────────────────
   ひとまずWeb — theme.json で表現できない部分のみを持つ。
   色・寸法は必ず theme.json のプリセット変数から取ること。
   ───────────────────────────────────────────────────────── */

/* ── ヘッダー ───────────────────────────────────────────── */
.hz-header { position: sticky; top: 0; z-index: 100; }

.hz-header__inner {
	min-height: 76px;
	gap: var(--wp--preset--spacing--50);
}

.hz-header__brand { gap: 12px; }
.hz-header__brand .wp-block-site-title a { text-decoration: none; }

.hz-header__right { gap: 30px; }

.hz-header .hz-nav a {
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
	transition: color .15s ease;
}
.hz-header .hz-nav a:hover,
.hz-header .hz-nav a:focus-visible { color: var(--wp--preset--color--base); }

/* 現在地表示（正本 2a/2c）。works のアーカイブ・個別ページはどちらも
   body class に post-type-works が付くため、判定はこれ1つで足りる。
   コラムは home（body.blog）・タグ一覧（body.tag）・記事（body.single-post）。
   FAQ は固定ページ25（body.page-id-25）。 */
body.post-type-works .hz-header .hz-nav-works a,
body.blog .hz-header .hz-nav-column a,
body.tag .hz-header .hz-nav-column a,
body.single-post .hz-header .hz-nav-column a,
body.page-id-25 .hz-header .hz-nav-faq a {
	color: var(--wp--preset--color--base);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	padding-bottom: 3px;
}

.hz-header__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 20px;
}

/* ヘッダーCTA：600px以上はボタン、600px未満はハンバーガーの中。
   600px はコアのナビがオーバーレイに畳まれる境界（navigation/style.min.css）。
   コアが .wp-block-navigation .wp-block-navigation-item に display:flex を
   当てており(0,2,0)、クラス1つでは負ける。祖先を2つ足して(0,3,0)で勝つ。 */
.hz-header .hz-nav .hz-nav-cta { display: none; }

@media (max-width: 599px) {
	/* wp:buttons は is-layout-flex を持ち、コアが body .is-layout-flex(0,1,1) で
	   display:flex を当てる。クラス1つでは負けるため祖先を足す。 */
	.hz-header .hz-header__cta { display: none; }
	.hz-header .hz-nav .hz-nav-cta { display: flex; }
}

/* ── フッター ───────────────────────────────────────────── */
.hz-footer__top { gap: var(--wp--preset--spacing--50); }
.hz-footer__brand { gap: 12px; }
.hz-footer__nav a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.hz-footer__nav a:hover { color: #fff; }

/* ── LP セクションの土台 ───────────────────────────────────
   各パターンは .hz-section を纏い、内側に .hz-container を持つ。
   全幅の背景色はセクションが、内容幅はコンテナが受け持つ。

   背景色つき wp:group は core の :where(.wp-block-group.has-background)
   により横38pxのパディングを持つ。詳細度0なので上書きは容易だが、
   宣言そのものが無いと負けるため、内容幅を持たないセクション側は
   padding-inline を明示的に0にする（内容幅の責務は .hz-container のみ）。 */
.hz-section {
	padding-block: var(--wp--preset--spacing--90);
	padding-inline: 0;
}
/* ヘッダーは sticky で 76px。アンカーで飛んだときに見出しが隠れないよう逃がす。 */
.hz-section,
.hz-hero,
.hz-stat-strip,
.hz-cta-band { scroll-margin-top: 92px; }
/* wp:post-content が出す .entry-content は is-layout-flow のため、LPの各セクションに
   24px の上マージンが付く。セクションは自前で padding を持ち、隙間は不要。 */
.hz-main--lp > .entry-content > * { margin-block-start: 0; }
/* テンプレート直下（header / main / footer）は自前で padding を持つ。
   コアの is-layout-flow が付ける 24px は、フッター前の白い帯や
   ヘッダー直下の隙間になるだけなので全ページで打ち消す。 */
.wp-site-blocks > * { margin-block-start: 0; }
/* 104px版（正本1bで7回・104pxが2回使われるセクション用の狭い縦余白）。 */
.hz-section--narrow {
	padding-block: var(--wp--preset--spacing--85);
	padding-inline: 0;
}
.hz-container {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
}
/* CTAセクション用の920px版。実績Bで先に生まれていた .hz-cta-band__inner と
   幅の責務が重複していたため、box-model はここへ集約する（テンプレートの
   クラス名は変更していない。.hz-cta-band__inner 側は flex 固有の指定のみ残す）。 */
.hz-container--narrow,
.hz-cta-band__inner {
	max-width: 920px;
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
}

/* セクション見出しのアイブロウ（ISSUES / PRICING など） */
.hz-eyebrow {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--wp--preset--color--accent);
	margin-block-end: 12px;
}

/* セクション見出しの共通形（中央寄せアイブロウ＋H2＋リード文）。
   正本の下マージンは 48/52/56px とばらつくため、既定を52pxにし
   （ISSUES・COMPARISON）、外れ値は修飾クラスで振る。 */
.hz-section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 52px;
}
.hz-section-head--tight { margin-bottom: 48px; } /* WORKS */
.hz-section-head--loose { margin-bottom: 56px; } /* PRICING */

/* ── ボタン ───────────────────────────────────────────── */
.wp-element-button,
.wp-block-button__link { transition: background-color .15s ease, color .15s ease; }

/* 白抜きのセカンダリ（ヒーロー・料金行で使用）。3-0 で追加した overlay トークンから取る。 */
.hz-btn--outline .wp-block-button__link,
.wp-block-button.hz-btn--outline .wp-block-button__link {
	background: var(--wp--custom--overlay--white-10);
	border: 2px solid var(--wp--custom--overlay--white-60);
	color: var(--wp--preset--color--base);
}
.hz-btn--outline .wp-block-button__link:hover { background: var(--wp--custom--overlay--white-20); }

/* 紺の枠線ボタン（実績「すべて見る」） */
.hz-btn--navy-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.hz-btn--navy-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface-alt);
}

/* ── FAQ（core/details） ───────────────────────────────── */
.hz-faq details {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--note);
	padding: 24px 28px;
	background: var(--wp--preset--color--base);
}
.hz-faq summary {
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	font-size: 17px;
	color: var(--wp--preset--color--primary);
}
.hz-faq summary::-webkit-details-marker { display: none; }

/* ── アクセシビリティ ─────────────────────────────────── */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── 実績一覧（archive-works） ─────────────────────────────
   正本: ひとまずWeb 実績ページ.dc.html アートボード 2a（PC）/ 2d（SP） */
/* .hz-works-header* / .hz-works-main* は実績一覧とコラム一覧（home / tag）の
   共有クラス。変更したら /works/ と /column/ の両方を確認すること。 */

/* レイアウトは以下の CSS が持つため、WP の flow レイアウトが子に付ける
   margin-block-start（blockGap）を打ち消す。gap と二重になるのを防ぐ。 */
.hz-works-header__inner > *,
.hz-works-header__main > *,
.hz-works-count > *,
.hz-works-main__inner > *,
.hz-works-list > *,
.hz-work-card > *,
.hz-work-card__body > *,
.hz-work-card__tags > *,
.hz-works-fill > *,
.hz-works-fill__placeholder > *,
.hz-works-fill__cta > * {
	margin-block: 0;
}

/* ページヘッダー：白地・左寄せ。
   紺帯にしないのは、サイトヘッダーの primary-deep と帯が二重になるため（正本コメント）。 */
.hz-works-header {
	padding-block: 64px 48px;
	padding-inline: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.hz-works-header__inner {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}
.hz-works-header__main {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hz-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-muted);
}
.hz-breadcrumb a { color: var(--wp--preset--color--text-muted); }
.hz-breadcrumb__current {
	color: var(--wp--preset--color--text-strong);
	font-weight: 700;
}

.hz-works-header .hz-eyebrow { margin: 0; }

/* 正本は 40px / ls -.02em。h2 プリセット（1440px で 40px）を CSS から参照する。
   ブロック側に fontSize を持たせると .has-h-2-font-size が !important 付きで
   出力され、SP の上書きが不可能になるため、プリセットクラスは使わない。
   要素セレクタを足してグローバルの h1（62px / ls -.035em）に勝たせる。 */
h1.hz-works-header__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-2);
	letter-spacing: -.02em;
}
.hz-works-header__lead {
	margin: 0;
	max-width: 640px;
	font-size: var(--wp--preset--font-size--md);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--text-body);
	text-wrap: pretty;
}

.hz-works-count {
	flex: none;
	text-align: right;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.hz-works-count__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-muted);
}
/* core/shortcode の出力は p で包まれるため、既定マージンを打ち消す */
.hz-works-count p { margin: 0; }
.hz-works-count__num {
	font-size: 32px;
	font-weight: 900;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--primary);
}
.hz-works-count__unit {
	margin-left: 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--text-muted);
}

/* 一覧本体 */
.hz-works-main { padding-block: 64px 96px; padding-inline: 0; }
.hz-works-main__inner {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.hz-works-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* ワイド横型カード。カード全体がリンク（タイトルの ::after で覆う）。 */
.hz-work-card {
	position: relative;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
	transition: box-shadow .15s ease;
}
.hz-work-card:hover { box-shadow: var(--wp--preset--shadow--raised); }

.hz-work-card__media {
	height: 400px;
	overflow: hidden;
	background: var(--wp--preset--color--surface-image);
}
.hz-work-card__media figure { margin: 0; height: 100%; }
.hz-work-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hz-work-card__body {
	padding: 44px 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: center;
}

/* タグは span（[hitomazu_work_terms] が出力）。core/shortcode の p も並びを担う。 */
.hz-work-card__tags,
.hz-work-card__tags p {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}
.hz-work-card__tag {
	display: inline-block;
	padding: 5px 10px;
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--tag);
	font-size: var(--wp--preset--font-size--xxs);
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted);
}

.hz-work-card__title {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: normal;
	text-wrap: pretty;
}
.hz-work-card__title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
/* カード全面をクリック領域にする。タグのリンクより上に置く。 */
.hz-work-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hz-work-card__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--text-body);
	text-wrap: pretty;
}
.hz-work-card__excerpt p { margin: 0; }

.hz-work-card__more {
	margin: 8px 0 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.hz-work-card__more svg {
	flex: none;
	color: var(--wp--preset--color--accent);
}

/* 実績が1件以下のときだけ出す補い枠（正本 2a）。件数判定は functions.php。 */
.hz-works-fill {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: stretch;
}
body:not(.hz-works-few) .hz-works-fill { display: none; }

.hz-works-fill__placeholder {
	border: 2px dashed var(--wp--preset--color--line-dashed);
	border-radius: var(--wp--custom--radius--card);
	padding: 36px 34px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	justify-content: center;
	background: var(--wp--preset--color--surface-alt);
}
.hz-works-fill__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.hz-works-fill__text {
	margin: 0;
	font-size: 14px;
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--text-body);
}

.hz-works-fill__cta {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	padding: 36px 34px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: center;
	background: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--raised);
}
.hz-works-fill__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--wp--preset--color--on-navy-label);
}
.hz-works-fill__heading {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--base);
}
.hz-works-fill__lead {
	margin: 0;
	font-size: 14px;
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--on-navy);
}
.hz-works-fill__buttons { margin-top: 4px; }
.hz-works-fill__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	height: 52px;
	padding: 0 28px;
	box-shadow: var(--wp--preset--shadow--cta);
}

/* ── レスポンシブ ─────────────────────────────────────────
   .dc.html は PC 1440px のみの提供。以下はこちらの設計判断。 */
@media (max-width: 781px) {
	.hz-header__inner { min-height: 64px; }
	.hz-header__right { gap: 14px; }
	.hz-header__cta .wp-block-button__link { min-height: 38px; padding: 0 14px; font-size: 13px; }
}
/* ナビ3項目＋CTAボタンは 600px 幅で内容幅（552px）を2px超え、CTAが2行目に落ちる
   （コラム追加時に実測）。ナビ項目間の 30px（blockGap）を詰めて余裕を持たせる。
   599px以下はハンバーガーのオーバーレイ内の縦並びにも効くため、範囲を絞る。 */
@media (min-width: 600px) and (max-width: 781px) {
	.hz-header .hz-nav .wp-block-navigation__container { gap: 20px; }
}

/* 実績一覧の崩し方は正本 2d の指定に従う（ブレークポイント 768px）。 */
@media (max-width: 768px) {
	.hz-works-header { padding-block: 32px 24px; }
	.hz-works-header__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	h1.hz-works-header__title { font-size: 28px; }
	.hz-works-count {
		text-align: left;
		flex-direction: row;
		align-items: baseline;
		gap: 6px;
	}

	.hz-works-main { padding-block: 32px 48px; }
	.hz-works-main__inner { gap: 24px; }
	.hz-works-list { gap: 20px; }

	/* 1.4fr + 1fr の非対称は解除し、画像は 16:9 で高さを揃える */
	.hz-work-card { grid-template-columns: 1fr; }
	.hz-work-card__media {
		height: auto;
		aspect-ratio: 16 / 9;
	}
	.hz-work-card__body {
		padding: 20px;
		gap: 10px;
	}
	.hz-work-card__title {
		font-size: 18px;
		line-height: 1.5;
	}

	.hz-works-fill { grid-template-columns: 1fr; }
}

/* ── 実績詳細（single-works） ───────────────────────────────
   正本: ひとまずWeb 実績ページ.dc.html アートボード 2c（PC）/ 2d 詳細（SP） */

.hz-work-detail__title-inner,
.hz-plan-card,
.hz-work-detail__aside,
.hz-cta-band__inner {
	margin-block: 0;
}
.hz-work-detail__title-inner > *,
.hz-plan-card > *,
.hz-work-detail__related-head > * {
	margin-block: 0;
}

/* 背景色つき wp:group（main/section）は全て core の 38px 横パディングを持つため、
   ここでゼロにする。内容幅の責務は .hz-container のみが持つ（差し戻し対応）。 */
.hz-work-detail,
.hz-work-detail__title,
.hz-work-detail__eyecatch,
.hz-work-detail__body,
.hz-work-detail__related,
.hz-cta-band {
	padding-inline: 0;
}

/* タイトルブロック */
.hz-work-detail__title { padding-block: 56px 40px; }
.hz-work-detail__title-inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.hz-breadcrumb p {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-muted);
}
.hz-breadcrumb p a { color: var(--wp--preset--color--text-muted); }
.hz-breadcrumb__current {
	color: var(--wp--preset--color--text-strong);
	font-weight: 700;
}

/* H1 は h2 プリセット（最大40px）とは別の44px。プリセットに無い値のため
   fontSize 属性を付けずここで直接指定する。SP（26px・正本2d）とは clamp() で繋ぐ。 */
h1.hz-work-detail__heading {
	margin: 0;
	max-width: 1000px;
	font-size: clamp(26px, 4.6vw + 9px, 44px);
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: -.025em;
	color: var(--wp--preset--color--primary);
	text-wrap: pretty;
}

/* アイキャッチ：コンテナ内 16:9。全幅にすると 1920×1080 が上下トリミングされるため（正本注記）。
   高さは固定値ではなく aspect-ratio で持たせ、レスポンシブで崩れないようにする。 */
.hz-work-detail__eyecatch { padding-block: 0 64px; }
.hz-work-detail__eyecatch-frame {
	aspect-ratio: 16 / 9;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	background: var(--wp--preset--color--surface-image);
	box-shadow: var(--wp--preset--shadow--card);
}
.hz-work-detail__eyecatch-frame .wp-block-post-featured-image { margin: 0; height: 100%; }
.hz-work-detail__eyecatch-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 本文＋サイドバー */
.hz-work-detail__body { padding-block: 0 96px; }
.hz-work-detail__grid {
	display: grid;
	grid-template-columns: 720px 1fr;
	gap: 80px;
	align-items: start;
}

/* post_content は編集者が書くため、テンプレートではなくここで受ける。
   blockGap による自動マージンを打ち消し、セクション間隔は h2 側の margin で持たせる。
   .hz-column-detail__content はコラム記事（single）。実績詳細と本文の意匠を共有するため
   セレクタを足すだけで値は変えない。変更したら /works/ と /column/ の記事の両方を確認すること。 */
.hz-work-detail__content .wp-block-post-content,
.hz-column-detail__content .wp-block-post-content {
	--wp--style--blockGap: 0px;
}
.hz-work-detail__content .wp-block-post-content > *,
.hz-column-detail__content .wp-block-post-content > * { margin: 0; }
.hz-work-detail__content .wp-block-post-content h2,
.hz-column-detail__content .wp-block-post-content h2 {
	margin-top: 64px;
	margin-bottom: 20px;
	font-size: 32px;
	font-weight: 900;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--primary);
}
.hz-work-detail__content .wp-block-post-content h2:first-child,
.hz-column-detail__content .wp-block-post-content h2:first-child { margin-top: 0; }
.hz-work-detail__content .wp-block-post-content p,
.hz-column-detail__content .wp-block-post-content p {
	font-size: 17px;
	line-height: 1.95;
	color: var(--wp--preset--color--text-body);
}

/* core/quote：テーマが未定義だったため wp-block-styles の既定（濃いグレーの
   4px 縦棒）が出ていた。サイトのカードの語彙に合わせ、地色のブロックにする。 */
.hz-work-detail__content blockquote.wp-block-quote,
.hz-column-detail__content blockquote.wp-block-quote {
	margin: 28px 0;
	padding: 20px 24px;
	border: none;
	border-radius: var(--wp--custom--radius--note);
	background: var(--wp--preset--color--surface-alt);
}
.hz-work-detail__content blockquote.wp-block-quote p,
.hz-column-detail__content blockquote.wp-block-quote p {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--text-body);
}

/* 前後ナビ：実績が1件以下のときは body.hz-works-few で置き換える（実績Aの仕組みを再利用）。 */
.hz-work-detail__nav { margin-top: 64px; }
.hz-work-detail__nav-grid,
.hz-work-detail__nav-fallback {
	padding-top: 8px;
	border-top: 1px solid var(--wp--preset--color--line);
}
.hz-work-detail__nav-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.hz-work-detail__nav-fallback { display: flex; justify-content: center; }
body.hz-works-few .hz-work-detail__nav-grid { display: none; }
body:not(.hz-works-few) .hz-work-detail__nav-fallback { display: none; }

.hz-work-detail__nav-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--note);
	text-decoration: none;
	transition: background-color .15s ease;
}
.hz-work-detail__nav-card:hover { background: var(--wp--preset--color--surface-alt); }
.hz-work-detail__nav-card--next { text-align: right; }
.hz-work-detail__nav-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--wp--preset--color--text-muted);
}
.hz-work-detail__nav-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--wp--preset--color--primary);
}

/* サイドバー：本タスクはプランカードのみ。目次カードの位置は実績Cが上に差し込む。 */
.hz-work-detail__aside {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.hz-plan-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px 24px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
}
.hz-plan-card__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--wp--preset--color--text-muted);
}
/* [hitomazu_work_plan_summary] は wp:shortcode の p 1個に包まれる。
   中の span をそのまま親の flex(gap:14px) に乗せ、説明文が無いときは
   name の span だけになり「行ごと消える」を実現する。 */
.hz-plan-card > p:not(.hz-plan-card__label) { display: contents; }
.hz-plan-card__name {
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--primary);
}
.hz-plan-card__desc {
	font-size: 14px;
	line-height: 1.8;
	color: var(--wp--preset--color--text-body);
}
.hz-plan-card__divider {
	width: 100%;
	height: 1px;
	border: none;
	background: var(--wp--preset--color--line);
}
.hz-plan-card__buttons { gap: 14px; }
.hz-plan-card__buttons .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
}
.hz-plan-card__buttons .wp-block-button:first-child .wp-block-button__link {
	box-shadow: var(--wp--preset--shadow--cta);
}

/* 関連実績：同じ work_plan の他の実績（0件・実績が少ないときは非表示）。 */
.hz-work-detail__related {
	padding-block: 96px;
	border-block: 1px solid var(--wp--preset--color--line);
}
body.hz-works-few .hz-work-detail__related { display: none; }

.hz-work-detail__related-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 36px;
}
.hz-work-detail__related-title {
	margin: 0;
	font-size: 36px;
	font-weight: 900;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--primary);
}
.hz-work-detail__related-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 0 28px;
}

.hz-work-detail__related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
/* [hitomazu_related_works] も wp:shortcode の p 1個に包まれるため、
   中の a をそのままグリッドの子として扱う。 */
.hz-work-detail__related-grid > p { display: contents; }

.hz-related-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow .15s ease;
}
.hz-related-card:hover { box-shadow: var(--wp--preset--shadow--card); }
.hz-related-card__media {
	height: 210px;
	background: var(--wp--preset--color--surface-image);
	overflow: hidden;
}
.hz-related-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hz-related-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
}
.hz-related-card__meta {
	font-size: 11px;
	font-weight: 700;
	color: var(--wp--preset--color--text-muted);
}
.hz-related-card__title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--primary);
}

/* 末尾CTA：LP と同一意匠。再利用クラス .hz-cta-band（フェーズ3で LP 側にも使用予定）。 */
.hz-cta-band { padding-block: 104px; }
/* 幅920pxの box-model は .hz-container--narrow と共通化済み（LPセクション土台を参照）。
   ここでは flex/gap/text-align だけを持つ。 */
.hz-cta-band__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	text-align: center;
}
.hz-cta-band__heading {
	margin: 0;
	font-size: 42px;
	font-weight: 900;
	line-height: 1.28;
	letter-spacing: -.02em;
}
.hz-cta-band__lead {
	margin: 0;
	font-size: 17px;
	line-height: 1.8;
}
.hz-cta-band__buttons {
	justify-content: center;
	margin-top: 6px;
}
.hz-cta-band__btn-primary .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	height: 62px;
	padding: 0 36px;
	font-size: 18px;
	box-shadow: var(--wp--preset--shadow--cta);
}
.hz-cta-band__btn-secondary .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	height: 62px;
	padding: 0 30px;
	font-size: 18px;
}

/* SP固定CTAバー（768px以下のみ）。 */
.hz-work-detail__fixed-cta { display: none; }

/* 実績詳細の崩し方は正本 2d の指定に従う（ブレークポイント 768px）。 */
@media (max-width: 768px) {
	h1.hz-work-detail__heading { line-height: 1.4; letter-spacing: -.02em; }

	.hz-work-detail__title { padding-block: 32px 24px; }
	.hz-work-detail__eyecatch { padding-block: 0 32px; }
	.hz-work-detail__body { padding-block: 0 48px; }

	.hz-work-detail__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.hz-work-detail__aside { position: static; top: auto; }

	.hz-work-detail__content .wp-block-post-content h2,
	.hz-column-detail__content .wp-block-post-content h2 { margin-top: 40px; }

	.hz-work-detail__nav-grid { grid-template-columns: 1fr; gap: 16px; }
	.hz-work-detail__nav-card--next { text-align: left; }

	.hz-work-detail__related { padding-block: 48px; }
	.hz-work-detail__related-head { flex-direction: column; align-items: flex-start; gap: 16px; }
	.hz-work-detail__related-grid { grid-template-columns: 1fr; gap: 20px; }

	.hz-cta-band { padding-block: 64px; }
	.hz-cta-band__heading { font-size: 28px; }
	.hz-cta-band__buttons { flex-direction: column; width: 100%; }
	.hz-cta-band__btn-primary .wp-block-button__link,
	.hz-cta-band__btn-secondary .wp-block-button__link { width: 100%; }

	/* サイドバー分の余白を打ち消した分、固定CTAバーとの重なりを避ける */
	.hz-work-detail { padding-bottom: 64px; }
	.hz-work-detail__fixed-cta {
		display: block;
		position: fixed;
		inset-block-end: 0;
		inset-inline: 0;
		z-index: 50;
	}
	.hz-work-detail__fixed-cta-link {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 64px;
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--base);
		font-size: 15px;
		font-weight: 700;
		text-decoration: none;
	}
}

/* ── 実績詳細のブロックパターン（4716への適用はしない） ──────── */

/* 案件情報テーブル（patterns/works-spec-table.php） */
.hz-spec-table {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--note);
	overflow: hidden;
}
.hz-spec-table__row { display: grid; grid-template-columns: 180px 1fr; }
.hz-spec-table__row + .hz-spec-table__row {
	border-top: 1px solid var(--wp--preset--color--line);
}
.hz-spec-table__label {
	margin: 0;
	padding: 20px 24px;
	background: var(--wp--preset--color--surface-alt);
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.hz-spec-table__value {
	margin: 0;
	padding: 20px 24px;
	font-size: 16px;
	line-height: 1.8;
	color: var(--wp--preset--color--text-body);
}

/* 本文中CTAバー（patterns/works-inline-cta.php） */
.hz-inline-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 28px 32px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--note);
	background: var(--wp--preset--color--surface-alt);
}
.hz-inline-cta__text { display: flex; flex-direction: column; gap: 6px; }
.hz-inline-cta__heading {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.hz-inline-cta__lead {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--wp--preset--color--text-body);
}
.hz-inline-cta__button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	height: 52px;
	padding: 0 26px;
	font-size: 15px;
	font-weight: 700;
}

@media (max-width: 768px) {
	.hz-spec-table__row { grid-template-columns: 1fr; }
	.hz-inline-cta { flex-direction: column; align-items: flex-start; }
}

/* ── コラム一覧（home / tag） ───────────────────────────────
   ページ見出し・本体の器は .hz-works-header* / .hz-works-main*（実績一覧と共有）。
   カードは新設の .hz-column-card。値は実績カード（枠・角丸・影・hover）と
   関連実績カード（縦型の構造）の組み合わせで、新しい値は作らない。 */

/* wp:post-template は is-layout-flow を持ち、2枚目以降のカードに
   24pxの上マージンが付く（CLAUDE.md「自前で grid / flex にしたコンテナの
   直下には、WP の flow マージンが残る」）。レイアウトは grid/flex が持つため、
   ここで打ち消す。 */
.hz-column-list > *,
.hz-column-card > *,
.hz-column-card__body > * {
	margin-block: 0;
}

.hz-column-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 縦型カード。カード全体がリンク（タイトルの ::after で覆う）。
   枠・角丸・地・影・hover・transition は .hz-work-card と同じ変数。 */
.hz-column-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
	transition: box-shadow .15s ease;
}
.hz-column-card:hover { box-shadow: var(--wp--preset--shadow--raised); }

.hz-column-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wp--preset--color--surface-image);
}
.hz-column-card__media figure { margin: 0; height: 100%; }
.hz-column-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hz-column-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
}

/* タグは core/post-terms（<a> になる）。実績のタグ（span）とは別物。
   カード全面リンクの上に出して押せるようにする。 */
.hz-column-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	position: relative;
	z-index: 2;
}
.hz-column-card__tags a {
	display: inline-block;
	padding: 5px 10px;
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--tag);
	font-size: var(--wp--preset--font-size--xxs);
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
}
.hz-column-card__tags a:hover {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}
.hz-column-card__tags .wp-block-post-terms__separator { display: none; }

.hz-column-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--card-title-lg);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: normal;
	text-wrap: pretty;
}
.hz-column-card__title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
/* カード全面をクリック領域にする。タグのリンクより上に置く。 */
.hz-column-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hz-column-card__date {
	margin-top: auto;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-muted);
}

/* .wp-block-query の子（is-layout-flow）に付く24pxの上マージンに負けないよう、
   祖先を足して詳細度を上げる。 */
.wp-block-query .hz-column-pagination {
	margin-block-start: 56px;
	gap: 8px;
}
.hz-column-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--button);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.hz-column-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary);
}
.hz-column-pagination .page-numbers.dots { border: none; }
.hz-column-pagination .wp-block-query-pagination-previous,
.hz-column-pagination .wp-block-query-pagination-next {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

@media (max-width: 1024px) {
	.hz-column-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.hz-column-list { grid-template-columns: 1fr; gap: 20px; }
	.hz-column-card__body { padding: 20px; }
}

/* ── コラム記事（single） ─────────────────────────────────
   サイドバー無しの1カラム。本文幅760px（17px × 約45字。和文の読みやすい上限）。
   本文（h2・p・blockquote）の意匠は実績詳細のルールをセレクタ追加で共有する
   （上の「実績詳細（single-works）」節を参照）。ここでは実績詳細に無い
   h3・リスト・画像・表・リンクだけを .hz-column-detail__content 配下に足す。 */

.hz-column-detail > *,
.hz-column-detail__head .hz-column-detail__inner > * {
	margin-block: 0;
}

.hz-column-detail__inner {
	max-width: calc(760px + var(--wp--custom--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
}

.hz-column-detail__head { padding-block: 56px 32px; }
.hz-column-detail__head .hz-column-detail__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
h1.hz-column-detail__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-2-sm);
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--primary);
	text-wrap: pretty;
}
.hz-column-detail__date {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-muted);
}

/* アイキャッチ：実績詳細の .hz-work-detail__eyecatch-frame と同じ値。 */
.hz-column-detail__eyecatch { padding-block: 0 48px; }
.hz-column-detail__eyecatch-frame {
	aspect-ratio: 16 / 9;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	background: var(--wp--preset--color--surface-image);
	box-shadow: var(--wp--preset--shadow--card);
}
.hz-column-detail__eyecatch-frame .wp-block-post-featured-image { margin: 0; height: 100%; }
.hz-column-detail__eyecatch-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* アイキャッチ無しの記事では灰色の枠を出さない。 */
.hz-column-detail__eyecatch:not(:has(img)) { display: none; }

.hz-column-detail__body { padding-block: 0 96px; }

/* 本文（コラムにだけ足す部分）。実績は段落間0だが、コラムは長文のため開ける。
   h2 の margin-top:64px（実績詳細と共有）の方が詳細度が高く優先される。 */
.hz-column-detail__content .wp-block-post-content > * + * {
	margin-top: 28px;
}
.hz-column-detail__content .wp-block-post-content h3 {
	margin-top: 48px;
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--primary);
}
.hz-column-detail__content .wp-block-post-content ul,
.hz-column-detail__content .wp-block-post-content ol {
	padding-left: 1.5em;
}
.hz-column-detail__content .wp-block-post-content li {
	font-size: 17px;
	line-height: 1.95;
	color: var(--wp--preset--color--text-body);
}
.hz-column-detail__content .wp-block-post-content li + li {
	margin-top: 6px;
}
/* 本文リンクにオレンジは使わない規則のため、theme.json のリンクhover（accent）を上書きする。 */
.hz-column-detail__content .wp-block-post-content a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: .2em;
}
.hz-column-detail__content .wp-block-post-content a:hover {
	color: var(--wp--preset--color--primary-deep);
}
.hz-column-detail__content .wp-block-post-content figure img {
	max-width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--note);
}
.hz-column-detail__content .wp-block-post-content figcaption {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-muted);
	text-align: center;
	margin-top: 8px;
}
/* 表だけ横スクロール。ページを横にあふれさせない。 */
.hz-column-detail__content .wp-block-post-content figure.wp-block-table {
	overflow-x: auto;
}
.hz-column-detail__content .wp-block-post-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--base);
}
.hz-column-detail__content .wp-block-post-content th,
.hz-column-detail__content .wp-block-post-content td {
	border: 1px solid var(--wp--preset--color--line);
	padding: 12px 16px;
	text-align: left;
	vertical-align: top;
}
.hz-column-detail__content .wp-block-post-content th {
	background: var(--wp--preset--color--surface-alt);
	font-weight: 700;
	color: var(--wp--preset--color--text-strong);
}

/* コラム一覧へ戻るボタン。祖先を足して (0,2,0) にし、flow の margin-block-start
   （:root :where(.is-layout-flow) > *、(0,1,0)）に読み込み順で負けないようにする。 */
.hz-column-detail__content .hz-column-detail__back {
	margin-top: 64px;
}

@media (max-width: 768px) {
	.hz-column-detail__head { padding-block: 32px 24px; }
	.hz-column-detail__eyecatch { padding-block: 0 32px; }
	.hz-column-detail__body { padding-block: 0 48px; }
	.hz-column-detail__content .wp-block-post-content p,
	.hz-column-detail__content .wp-block-post-content li {
		font-size: 16px;
	}
	.hz-column-detail__content .hz-column-detail__back {
		margin-top: 48px;
	}
}

/* ── LP：ヒーロー（patterns/lp-hero.php） ──────────────────
   正本: ひとまずWeb LP.dc.html アートボード1b、491〜509行。 */
.hz-hero {
	position: relative;
	height: 620px;
	overflow: hidden;
	background: var(--wp--preset--color--primary-deep);
}
/* 背景写真は未調達。CSSカスタムプロパティ1つで後から差し替えられるようにし、
   未設定の間は地色（primary-deep）だけが見える。 */
.hz-hero__bg {
	position: absolute;
	inset: 0;
	background-image: var(--hz-hero-image, none);
	background-size: cover;
	background-position: center;
}
.hz-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--gradient--hero-veil);
	pointer-events: none;
}
.hz-hero__inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	pointer-events: none;
}
/* flexアイテムはデフォルトで内容にshrink-to-fitするため、max-widthだけでは
   1280pxまで伸びない（実測: 1440pxでleft 352/width 784になる差し戻し）。
   width:100%で親いっぱいに広げたうえで max-width+margin-inline:auto に
   中央寄せさせる。正本は width:1280px の実寸指定のため縮まない。 */
.hz-hero__inner > .hz-container { width: 100%; }
.hz-hero__content {
	max-width: 780px;
	display: flex;
	flex-direction: column;
	gap: 26px;
}
.hz-hero__badge {
	align-self: flex-start;
	margin: 0;
	padding: 8px 16px;
	background: color-mix(in srgb, var(--wp--preset--color--sky) 22%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sky) 50%, transparent);
	border-radius: var(--wp--custom--radius--tag);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	color: var(--wp--preset--color--sky-light);
}
/* h1 の font-size/line-height/letter-spacing/font-weight は theme.json の
   styles.elements.h1（3-0で是正済み）から既に来る。ここでは色とmarginのみ。 */
.hz-hero__heading {
	margin: 0;
	color: var(--wp--preset--color--base);
}
.hz-hero__lead {
	margin: 0;
	max-width: 640px;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.8;
	color: var(--wp--preset--color--on-navy-lead);
	text-wrap: pretty;
}
.hz-hero__buttons {
	display: flex;
	gap: 14px;
	margin-top: 8px;
	pointer-events: auto;
}
.hz-hero__cta-primary .wp-block-button__link,
.hz-hero__cta-secondary .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	height: 62px;
	font-size: var(--wp--preset--font-size--lg);
}
.hz-hero__cta-primary .wp-block-button__link {
	padding: 0 36px;
	box-shadow: var(--wp--preset--shadow--cta);
}
.hz-hero__cta-secondary .wp-block-button__link { padding: 0 30px; }

/* ── LP：スタットストリップ（patterns/lp-stat-strip.php） ──────
   正本: 同ファイル 510〜519行。ヒーロー直下。 */
.hz-stat-strip { padding-inline: 0; }
.hz-stat-strip__grid {
	padding-block: 24px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.hz-stat-strip__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.hz-stat-strip__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--custom--overlay--white-85);
}
.hz-stat-strip__value {
	margin: 0;
	font-size: 24px;
	font-weight: 900;
	color: var(--wp--preset--color--base);
}

/* 正本1bはPC 1440pxのみでSP指定がないため、以下は管理者の設計判断（実装ルール§3-4）。 */
@media (max-width: 768px) {
	.hz-hero {
		height: auto;
		min-height: 480px;
		padding-block: 48px;
	}
	.hz-hero__inner { position: relative; inset: auto; }
	.hz-hero__buttons { flex-direction: column; }
	.hz-hero__cta-primary,
	.hz-hero__cta-secondary { width: 100%; }
	.hz-hero__cta-primary .wp-block-button__link,
	.hz-hero__cta-secondary .wp-block-button__link { width: 100%; justify-content: center; }

	.hz-stat-strip__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── LP：課題3カード（patterns/lp-issues.php） ──────────────
   正本: ひとまずWeb LP.dc.html 520〜568行。 */
.hz-issues { padding-inline: 0; }
.hz-issues__heading {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 900;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--primary);
}
.hz-issues__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--text-muted);
}
.hz-issues__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
/* 上段・下段は隙間なく接する（gapを入れない）。角丸を上下で分けるための構造。 */
.hz-issue-card { display: flex; flex-direction: column; }
/* WP コアの :root :where(.is-layout-flow) > * { margin-block-start: 24px } を、
   自前で grid / flex にしたコンテナの直下で打ち消す。
   コアは :first-child だけ 0 にするため、放置すると 2番目以降だけが 24px 下がり、
   グリッドの行内で先頭カードとそれ以降の高さ・位置がずれる。gap ではなく margin で
   開くので、CSS を読むだけでは気づけない。
   レイアウトコンテナを新設したら、必ずこの一覧に追加すること。 */
.hz-stat-strip__grid > *,
.hz-hero > *,
.hz-issues__grid > *,
.hz-issue-card > *,
.hz-comparison__grid > *,
.hz-compare-card > *,
.hz-compare-card__rows > *,
.hz-section-head > *,
.hz-estimator__grid > *,
.hz-estimator__intro > *,
.hz-estimator__bullets > *,
.hz-pricing__rows > *,
.hz-pricing__row > *,
.hz-pricing__plan > *,
.hz-pricing__price > *,
.hz-pricing__tags > *,
.hz-lp-works__grid > *,
.hz-lp-works__side > *,
.hz-flow__grid > *,
.hz-flow__steps > *,
.hz-flow__step > *,
.hz-flow__step-body > *,
.hz-support__grid > *,
.hz-support-card > *,
.hz-support-card__head > *,
.hz-support-card__list > * {
	/* コアが付けるのは margin-block-start だけ。margin-block（上下）を消すと
	   アイブロウや見出しの意図的な下マージン（正本の margin:0 0 12px）まで
	   失われるため、打ち消すのは start のみに限る。 */
	margin-block-start: 0;
}

.hz-issue-card__problem,
.hz-issue-card__solution {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 30px;
}
.hz-issue-card__problem > *,
.hz-issue-card__solution > * { margin: 0; }
.hz-issue-card__problem {
	background: var(--wp--preset--color--surface-grey);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px 16px 0 0;
}
.hz-issue-card__solution {
	background: var(--wp--preset--color--primary);
	border-radius: 0 0 16px 16px;
}
.hz-issue-card__label {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .1em;
}
.hz-issue-card__problem .hz-issue-card__label { color: var(--wp--preset--color--text-soft); }
.hz-issue-card__solution .hz-issue-card__label { color: var(--wp--preset--color--accent); }
.hz-issue-card__title {
	font-size: var(--wp--preset--font-size--card-title-lg);
	font-weight: 700;
	line-height: 1.5;
}
.hz-issue-card__problem .hz-issue-card__title { color: var(--wp--preset--color--text-heading-soft); }
.hz-issue-card__solution .hz-issue-card__title { color: var(--wp--preset--color--base); }
.hz-issue-card__text {
	font-size: var(--wp--preset--font-size--sm-plus);
	line-height: 1.85;
}
.hz-issue-card__problem .hz-issue-card__text { color: var(--wp--preset--color--text-muted); }
.hz-issue-card__solution .hz-issue-card__text { color: var(--wp--preset--color--on-navy); }

/* ── LP：比較2カード（patterns/lp-comparison.php） ──────────
   正本: 同ファイル 596〜626行。 */
.hz-comparison { padding-inline: 0; }
.hz-comparison__heading {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 900;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--primary);
}
.hz-comparison__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--text-muted);
}
.hz-comparison__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}
.hz-compare-card {
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding: 40px;
	border-radius: var(--wp--custom--radius--card);
}
.hz-compare-card--primary {
	background: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--raised);
}
.hz-compare-card--plain {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
}
.hz-compare-card__header {
	display: flex;
	align-items: center;
	gap: 12px;
}
.hz-compare-card__header > * { margin: 0; }
.hz-compare-card__logo { display: flex; }
.hz-compare-card__logo img { display: block; border-radius: 0; }
.hz-compare-card__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 4px;
	background: var(--wp--preset--color--surface-grey);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm-plus);
	font-weight: 700;
}
.hz-compare-card__brand { font-size: var(--wp--preset--font-size--h-4-lg); font-weight: 700; }
.hz-compare-card--primary .hz-compare-card__brand { color: var(--wp--preset--color--base); }
.hz-compare-card--plain .hz-compare-card__brand { color: var(--wp--preset--color--text-muted); }

.hz-compare-card__rows {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.hz-compare-card__rows > * { margin: 0; }
.hz-compare-row {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-bottom: 20px;
}
.hz-compare-row > * { margin: 0; }
.hz-compare-row:last-child { padding-bottom: 0; }
.hz-compare-card--primary .hz-compare-row { border-bottom: 1px solid var(--wp--custom--overlay--white-18); }
.hz-compare-card--primary .hz-compare-row:last-child { border-bottom: none; }
.hz-compare-card--plain .hz-compare-row { border-bottom: 1px solid var(--wp--preset--color--line); }
.hz-compare-card--plain .hz-compare-row:last-child { border-bottom: none; }

.hz-compare-row__label { font-size: var(--wp--preset--font-size--xs); font-weight: 700; }
.hz-compare-card--primary .hz-compare-row__label { color: var(--wp--preset--color--on-navy-label); }
.hz-compare-card--plain .hz-compare-row__label { color: var(--wp--preset--color--text-soft); }

.hz-compare-row__value { font-size: var(--wp--preset--font-size--card-title); }
.hz-compare-card--primary .hz-compare-row__value { font-weight: 700; color: var(--wp--preset--color--base); }
.hz-compare-card--plain .hz-compare-row__value { font-weight: 400; color: var(--wp--preset--color--text-muted); }

/* 入れ子の注記。左は明示的に14px/400/on-navy、右は14pxのみで色・ウェイトは親を継承（正本609/618行）。 */
.hz-compare-card--primary .hz-compare-row__note {
	font-size: var(--wp--preset--font-size--sm-plus);
	font-weight: 400;
	color: var(--wp--preset--color--on-navy);
}
.hz-compare-card--plain .hz-compare-row__note { font-size: var(--wp--preset--font-size--sm-plus); }

/* 正本1bはPC 1440pxのみでSP指定がないため、以下は管理者の設計判断。 */
@media (max-width: 768px) {
	.hz-issues__grid { grid-template-columns: 1fr; gap: 20px; }
	.hz-issue-card__problem,
	.hz-issue-card__solution { padding: 28px; }

	.hz-comparison__grid { grid-template-columns: 1fr; gap: 20px; }
	.hz-compare-card { padding: 28px; }
}

/* ── LP：かんたん見積もり（patterns/lp-estimator.php） ──────
   正本: ひとまずWeb LP.dc.html 569〜595行。 */
.hz-estimator {
	padding-inline: 0;
	border-block: 1px solid var(--wp--preset--color--line);
}
.hz-estimator__grid {
	display: grid;
	grid-template-columns: 400px 1fr;
	gap: 56px;
	align-items: center;
}
.hz-estimator__intro {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
/* 正本はアイブロウの下マージンをgapに任せている。グローバル定義（12px）を打ち消す。 */
.hz-estimator__intro .hz-eyebrow { margin-block-end: 0; }
.hz-estimator__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-2-sm);
	font-weight: 900;
	line-height: 1.28;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--primary);
}
.hz-estimator__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.85;
	color: var(--wp--preset--color--text-body);
	text-wrap: pretty;
}
.hz-estimator__bullets {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 4px;
}
.hz-estimator__bullet {
	margin: 0;
	display: flex;
	gap: 10px;
	align-items: center;
}
.hz-estimator__bullet-dot { color: var(--wp--preset--color--accent); font-weight: 700; }
.hz-estimator__bullet-text {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--text-strong);
}
/* 右カラム：器はウィジェットに合わせる（§4-A）。ウィジェットは Shadow DOM 内で
   自前の max-width:520px; margin:0 auto; を持つため、器を100%幅にしておけば
   自動的に中央寄せされる。テーマCSSからは Shadow DOM の内側に到達できない。 */
.hz-estimator__widget {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	padding: 24px;
	box-shadow: var(--wp--preset--shadow--card);
}

/* ── LP：料金プラン（patterns/lp-pricing.php） ──────────────
   正本: 同ファイル 627〜662行。 */
.hz-pricing { padding-inline: 0; }
.hz-pricing__heading {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 900;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--base);
}
.hz-pricing__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--on-navy);
}
.hz-pricing__rows {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.hz-pricing__row {
	position: relative;
	display: grid;
	grid-template-columns: 260px 240px 1fr 200px;
	gap: 32px;
	align-items: center;
	padding: 32px 36px;
	border-radius: var(--wp--custom--radius--card);
}
.hz-pricing__row--normal {
	background: var(--wp--custom--overlay--white-06);
	border: 1px solid var(--wp--custom--overlay--white-18);
}
.hz-pricing__row--featured {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--dark);
}
.hz-pricing__badge {
	position: absolute;
	top: -13px;
	left: 36px;
	margin: 0;
	padding: 6px 14px;
	background: var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--tag);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	color: var(--wp--preset--color--base);
}
.hz-pricing__plan { display: flex; flex-direction: column; gap: 6px; }
.hz-pricing__plan-name {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-4-lg);
	font-weight: 700;
}
.hz-pricing__plan-desc { margin: 0; font-size: var(--wp--preset--font-size--sm); }

.hz-pricing__price { display: flex; align-items: baseline; gap: 4px; }
.hz-pricing__price-amount {
	margin: 0;
	font-size: var(--wp--preset--font-size--price);
	font-weight: 900;
	letter-spacing: -.02em;
}
.hz-pricing__price-prefix,
.hz-pricing__price-suffix { margin: 0; font-size: var(--wp--preset--font-size--sm-plus); }

.hz-pricing__row--normal .hz-pricing__plan-name,
.hz-pricing__row--normal .hz-pricing__price-amount { color: var(--wp--preset--color--base); }
.hz-pricing__row--normal .hz-pricing__plan-desc,
.hz-pricing__row--normal .hz-pricing__price-prefix,
.hz-pricing__row--normal .hz-pricing__price-suffix { color: var(--wp--preset--color--on-navy); }
.hz-pricing__row--featured .hz-pricing__plan-name,
.hz-pricing__row--featured .hz-pricing__price-amount { color: var(--wp--preset--color--primary); }
.hz-pricing__row--featured .hz-pricing__plan-desc,
.hz-pricing__row--featured .hz-pricing__price-prefix,
.hz-pricing__row--featured .hz-pricing__price-suffix { color: var(--wp--preset--color--text-muted); }

.hz-pricing__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.hz-pricing__tag {
	margin: 0;
	padding: 7px 13px;
	border-radius: var(--wp--custom--radius--tag);
	font-size: var(--wp--preset--font-size--sm);
}
.hz-pricing__row--normal .hz-pricing__tag {
	background: var(--wp--custom--overlay--white-10);
	color: var(--wp--preset--color--base);
}
.hz-pricing__row--featured .hz-pricing__tag {
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--text-strong);
}

.hz-pricing__cta-wrap { margin: 0; }
/* .hz-pricing__cta は .wp-block-button 自身に付くクラスのため、子孫セレクタでは
   マッチしない（.hz-lp-works__all は wp-block-buttons 側に付くので事情が違う）。
   親が shrink-to-fit のままだと、既存の __link の width:100% が内容幅を基準にしてしまう。 */
.hz-pricing__cta { width: 100%; }
.hz-pricing__cta .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 50px;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
}
.hz-pricing__cta--outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--custom--overlay--white-60);
	color: var(--wp--preset--color--base);
}
.hz-pricing__cta--outline .wp-block-button__link:hover { background: var(--wp--custom--overlay--white-12); }
.hz-pricing__cta--solid .wp-block-button__link:hover { background: var(--wp--preset--color--accent-hover); }

/* 資産譲渡の注記バー。ボタンは実装しない決定（§6-3）のため、テキストが幅いっぱいを使う。
   地・枠は accent トークンからの color-mix（直書き禁止）。 */
.hz-pricing__note {
	margin-top: 36px;
	padding: 26px 32px;
	border-radius: var(--wp--custom--radius--note);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
}
.hz-pricing__note-text {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.7;
	color: var(--wp--preset--color--base);
}

/* 正本1bはPC 1440pxのみでSP指定がないため、以下は管理者の設計判断。 */
/* 料金行は固定列だけで 796px 必要なため、768px を待たずに崩す。
   1024px でもタグ列が106pxまで潰れ、820pxでは縦1文字＋横あふれになる。 */
@media (max-width: 1024px) {
	.hz-pricing__row {
		grid-template-columns: 1fr;
		gap: 16px;
		align-items: start;
		padding: 28px;
	}
	.hz-pricing__cta-wrap { width: 100%; }
	.hz-estimator__grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
	/* 器の padding 24px と枠線がウィジェットから 50px 奪っており、
	   選択肢のカードが1文字ずつ折り返す。SPでは器を外して全幅を渡す。 */
	.hz-estimator__widget {
		padding: 0;
		border: none;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}
}

/* ── LP：導入事例・制作実績（patterns/lp-works.php） ─────────
   正本: ひとまずWeb LP.dc.html 663〜701行。 */
.hz-lp-works { padding-inline: 0; }
.hz-lp-works__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 900;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--primary);
}
.hz-lp-works__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 28px;
}
/* [hitomazu_lp_works] は wp:shortcode の p 1個に包まれる。中の a をそのまま
   グリッド/flexの子として扱う（前例: .hz-work-detail__related-grid）。 */
.hz-lp-works__grid > p,
.hz-lp-works__side > p { display: contents; }
.hz-lp-works__side {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* カード本体はショートコードが吐く生HTMLのため is-layout-flow は付かない
   （flowマージンの打ち消しは不要）。 */
.hz-lp-work {
	display: flex;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow .15s ease;
}
.hz-lp-work:hover { box-shadow: var(--wp--preset--shadow--card); }

.hz-lp-work--feature { flex-direction: column; }
.hz-lp-work--feature .hz-lp-work__media { height: 340px; }
.hz-lp-work--feature .hz-lp-work__body { padding: 32px; gap: 12px; }

.hz-lp-work--compact { flex-direction: row; align-items: stretch; }
.hz-lp-work--compact .hz-lp-work__media { width: 180px; flex: none; }
.hz-lp-work--compact .hz-lp-work__body { padding: 24px; gap: 8px; justify-content: center; }

.hz-lp-work__media { background: var(--wp--preset--color--surface-image); }
.hz-lp-work__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hz-lp-work__body { display: flex; flex-direction: column; }
.hz-lp-work__body > * { margin: 0; }

.hz-lp-work__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hz-lp-work__meta {
	font-size: var(--wp--preset--font-size--xxs);
	font-weight: 700;
	color: var(--wp--preset--color--text-muted);
}
.hz-lp-work--feature .hz-lp-work__title {
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 700;
	line-height: 1.45;
	color: var(--wp--preset--color--primary);
}
.hz-lp-work--compact .hz-lp-work__title {
	font-size: var(--wp--preset--font-size--card-title);
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--primary);
}
.hz-lp-work--feature .hz-lp-work__excerpt {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.85;
	color: var(--wp--preset--color--text-body);
}
.hz-lp-work--compact .hz-lp-work__excerpt {
	font-size: var(--wp--preset--font-size--sm-plus);
	line-height: 1.8;
	color: var(--wp--preset--color--text-body);
}

/* 穴埋めCTAカード（.hz-works-fill__cta を再利用）。既存CSSは変更せず、
   側カラムの残り高さを埋めるための1行だけを追加する。 */
.hz-lp-work--cta { flex: 1; }

.hz-lp-works__all { margin: 0; }
.hz-lp-works__all .wp-block-button { width: 100%; }
.hz-lp-works__all .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 0;
	font-size: var(--wp--preset--font-size--base);
}

/* ── LP：制作の流れ（patterns/lp-flow.php） ─────────────────
   正本: 同ファイル 703〜723行。 */
.hz-flow {
	padding-inline: 0;
	border-block: 1px solid var(--wp--preset--color--line);
}
.hz-flow__grid {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 64px;
	align-items: start;
}
/* 中央寄せの .hz-section-head は使わない（正本は左寄せ）。
   各要素が個別に margin を持つため、このコンテナ自体は打ち消し一覧に含めない。 */
.hz-flow__heading,
.hz-faq__heading {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--h-2-xs);
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--primary);
}
.hz-flow__lead,
.hz-faq__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.85;
	color: var(--wp--preset--color--text-body);
}

.hz-flow__steps { display: flex; flex-direction: column; }
.hz-flow__step {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 24px;
	padding: 22px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.hz-flow__step:last-child { border-bottom: none; }
.hz-flow__step-label {
	margin: 0;
	padding-top: 3px;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--teal);
}
.hz-flow__step:last-child .hz-flow__step-label { color: var(--wp--preset--color--accent); }
.hz-flow__step-body { display: flex; flex-direction: column; gap: 5px; }
.hz-flow__step-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--card-title);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.hz-flow__step-text {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm-plus);
	line-height: 1.8;
	color: var(--wp--preset--color--text-body);
}

/* ── LP：サポート／保守メニュー（patterns/lp-support.php） ─────
   正本: 同ファイル 725〜769行。 */
.hz-support { padding-inline: 0; }
.hz-support__heading {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 900;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--primary);
}
.hz-support__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--text-muted);
}
.hz-support__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.hz-support-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 34px 30px;
	border-radius: var(--wp--custom--radius--card);
}
.hz-support-card--plain {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
}
.hz-support-card--featured {
	background: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--raised-soft);
}
.hz-support-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.hz-support-card__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 700;
}
.hz-support-card--plain .hz-support-card__name { color: var(--wp--preset--color--primary); }
.hz-support-card--featured .hz-support-card__name { color: var(--wp--preset--color--base); }
.hz-support-card__badge {
	flex: none;
	margin: 0;
	padding: 5px 11px;
	background: var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--tag);
	font-size: var(--wp--preset--font-size--xxs);
	font-weight: 700;
	color: var(--wp--preset--color--base);
}
.hz-support-card__desc { margin: 0; font-size: var(--wp--preset--font-size--sm); }
.hz-support-card--plain .hz-support-card__desc { color: var(--wp--preset--color--text-muted); }
.hz-support-card--featured .hz-support-card__desc { color: var(--wp--preset--color--on-navy); }

/* 区切り線は空divではなく list 側の border-top + padding-top で作る
   （親の gap:16px と合わせて正本の上下16pxになる）。 */
.hz-support-card__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--line);
}
.hz-support-card--featured .hz-support-card__list { border-top-color: var(--wp--custom--overlay--white-20); }
.hz-support-card__item {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm-plus);
	line-height: 1.7;
}
.hz-support-card--plain .hz-support-card__item { color: var(--wp--preset--color--text-strong); }
.hz-support-card--featured .hz-support-card__item { color: var(--wp--preset--color--base); }

.hz-support__note {
	margin: 24px 0 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-muted);
}

/* ── FAQ・お問い合わせ（依頼書3-5） ───────────────────────── */
/* 正本772行の border-top:1px solid #e2e8f0。直前のサポートセクションが白地のため、
   この線が無いと surface-alt との境界が出ない。padding-inline は .hz-section が持つ。 */
.hz-faq { border-top: 1px solid var(--wp--preset--color--line); }

.hz-faq__grid {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 64px;
	align-items: start;
}
/* .hz-faq__intro は各要素が個別に margin を持つため打ち消し一覧に含めない（.hz-flow__intro と同じ手口）。 */
.hz-faq__more { margin: 20px 0 0; }
.hz-faq__more a {
	display: inline-block;
	padding-bottom: 2px;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	border-bottom: 1px solid currentColor;
}
.hz-faq__more a:hover { color: var(--wp--preset--color--accent); }

.hz-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* .hz-faq__answer は wp:details 内部の is-layout-flow が付ける margin-block-start(24px) を
   明示マージンで打ち消す。打ち消し一覧（1093行目付近）には入れない
   （このファイル末尾のほうが後になるため、一覧に入れると 14px の意図が読めなくなる）。 */
.hz-faq__answer {
	margin: 14px 0 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.9;
	color: var(--wp--preset--color--text-body);
}
.hz-faq__item > summary {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}
.hz-faq__item > summary::after {
	content: "＋";
	font-weight: 400;
	color: var(--wp--preset--color--accent);
}
.hz-faq__item[open] > summary::after { content: "−"; }

/* .hz-cta-band__inner は既に明示マージンを持つ子要素のみで構成されるため
   打ち消し一覧には入れない（注記も margin:0 を明示すれば足りる）。 */
.hz-cta-band__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--on-navy-label);
}

/* 正本1bはPC 1440pxのみでSP指定がないため、以下は管理者の設計判断。 */
@media (max-width: 768px) {
	.hz-lp-works__grid { grid-template-columns: 1fr; gap: 20px; }
	.hz-lp-work--compact { flex-direction: column; }
	.hz-lp-work--compact .hz-lp-work__media {
		width: auto;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.hz-flow__grid { grid-template-columns: 1fr; gap: 40px; }
	.hz-flow__step {
		grid-template-columns: 1fr;
		gap: 6px;
	}
	.hz-flow__step-label { padding-top: 0; }

	.hz-support__grid { grid-template-columns: 1fr; gap: 20px; }

	.hz-faq__grid { grid-template-columns: 1fr; gap: 40px; }
	.hz-faq details { padding: 20px 22px; }
}

/* ── Contact Form 7 の応急処置 ──────────────────────────────
   フォームは VK のテーブルブロックで組まれており、<th> が無いため
   vk-table--th--width25 が効かず列幅が内容任せになる。列幅を直すのではなく
   セルを縦積みにしてテーブルであることをやめさせる。
   投稿4543/4598 と固定ページ19/4599 には触っていない（CSSのみ）。
   フォームの構成（CF7を続けるか他へ移すか）は2026-09-07時点で未定。
   移す判断が出たら、このブロックは丸ごと不要になる。 */

/* 幅：フォームを含むページだけ内容幅を絞る（本文と同じ幅に揃える） */
.hz-main:has(.wpcf7) > .entry-content { max-width: 720px; margin-inline: auto; }
.wpcf7 { max-width: 720px; margin-inline: auto; }

/* 表 → 縦積み。VK の罫線も消す */
.wpcf7 figure.wp-block-table,
.wpcf7 .wp-block-table table,
.wpcf7 .wp-block-table tbody,
.wpcf7 .wp-block-table tr,
.wpcf7 .wp-block-table td {
	display: block;
	width: 100%;
	border: none;
	padding: 0;
	margin: 0;
}
.wpcf7 .wp-block-table { margin: 0; }
.wpcf7 .wp-block-table tr { margin-bottom: 20px; }

/* ラベル側の td */
.wpcf7 .wp-block-table td:first-child {
	margin-bottom: 8px;
	font-size: var(--wp--preset--font-size--sm-plus);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.wpcf7 .wp-block-table td p { margin: 0; }
.wpcf7 small { font-size: var(--wp--preset--font-size--xs); margin-inline-start: 4px; }

/* 入力欄 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	padding: 0 14px;
	height: 48px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--text-strong);
}
.wpcf7 textarea { height: auto; min-height: 140px; padding: 12px 14px; line-height: 1.7; }
.wpcf7 input:focus,
.wpcf7 textarea:focus { border-color: var(--wp--preset--color--primary); }
.wpcf7 .wpcf7-form-control-wrap { display: block; }

/* チェックボックス */
.wpcf7 .wpcf7-checkbox { display: flex; flex-direction: column; gap: 10px; }
.wpcf7 .wpcf7-list-item { margin: 0; }
.wpcf7 .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.wpcf7 .wpcf7-list-item-label { font-size: var(--wp--preset--font-size--base); line-height: 1.6; }

/* 送信ボタン：Bootstrap の .btn-primary / .btn-block を上書きする */
.wpcf7 p.center { text-align: center; margin-top: 28px; }
.wpcf7 input[type="submit"] {
	width: auto;
	min-width: 260px;
	height: 56px;
	padding: 0 32px;
	border: none;
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--wp--preset--shadow--cta);
	transition: background-color .15s ease;
}
.wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--accent-hover); }

/* 検証メッセージ */
.wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; font-size: var(--wp--preset--font-size--xs); }
.wpcf7 .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 16px 20px;
	border-radius: var(--wp--custom--radius--note);
	font-size: var(--wp--preset--font-size--base);
}