@charset "UTF-8";
/* ==========================================================================
   ホライズン法律事務所 LP — PC レイアウト（1200px で組み直し）
   hz-lp.css / hz-lp-sections.css の後に読み込む

   【重要】PC 版カンプが存在しないため、本ファイルのレイアウトは
   実装側の設計です。Figma に実測の裏付けはありません。

   設計方針
   - SP（〜750px）: hz-lp.css / hz-lp-sections.css の 750px カンプ拡縮。
     本ファイルは無効。
   - PC（751px〜）: カンプの比例拡大はしない。
     コンテンツ列 1200px の中で、実寸の px 値でレイアウトし直す。
     文字サイズはカンプの原寸（見出し 60px / 本文 28px など）を維持。
   ========================================================================== */

/* ----------------------------------------------------------------------
   0. 共通トークン（PC 実寸）
   .hz-lp 自身がコンテナなので、@container の中に書くと .hz-lp 自体には
   マッチせず未定義になる(= var(--pc-gut) を含む padding が丸ごと無効になる)。
   必ずコンテナクエリの外で定義する。PC 用ルールからしか参照しないので SP には影響しない。
   ---------------------------------------------------------------------- */

.hz-lp {
	--pc-cw: 1200px;          /* コンテンツ列 */
	--pc-gut: clamp(24px, 4vw, 48px);
	--pc-gap: 40px;
	--pc-radius: 30px;
}

@container (min-width: 751px) {

	/* ----------------------------------------------------------------------
	   1. セクション骨格：全幅の地、中身は 1200px 中央
	   ---------------------------------------------------------------------- */

	.hz-lp .hz-sec,
	.hz-lp .hz-foot {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		max-width: none;
		height: auto;
		min-height: 0;
		padding: 100px var(--pc-gut);
	}

	.hz-lp .hz-sec > * {
		width: 100%;
		max-width: var(--pc-cw);
		margin-inline: auto;
	}

	.hz-lp .hz-bleed {
		width: calc(100% + var(--pc-gut) * 2);
		max-width: none;
		margin-inline: calc(var(--pc-gut) * -1);
	}

	/* お客様の声の背景をセクション下端まで広げる。 */
	.hz-lp .hz-sec--voice { padding-block-end: 0; }
	.hz-lp .hz-voice-results { padding-inline: var(--pc-gut); }

	/* 本文の行長 */
	.hz-lp .hz-lead,
	.hz-lp .hz-text,
	.hz-lp .hz-note,
	.hz-lp .hz-quote,
	.hz-lp .hz-quote2,
	.hz-lp .hz-closing { max-width: 40em; }

	/* ======================================================================
	   2. KV — 1200px の 2 カラムヒーロー
	   左：見出し・バッジ・実績・訴求帯・補足
	   右：弁護士の切り抜き写真
	   下：0円 3 カラム → 補足行 → CTA 2 つ
	   ====================================================================== */

	.hz-lp .hz-sec--kv {
		position: relative;
		display: block;
		height: auto;
		padding: 0;
		background: #fff;
		overflow: hidden;
	}

	/* 背景写真は全幅 */
	.hz-lp .hz-kv__photo {
		position: absolute;
		inset: 0;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		translate: none;
		background: var(--hz-img-kv-bg) center / cover no-repeat;
	}

	/* ロゴは左上に控えめに */
	.hz-lp .hz-kv__logo {
		left: max(-120px, calc(50% - 720px));
		top: -160px;
		width: 460px;
		height: 460px;
	}

	.hz-lp .hz-kv__logo::after {
		left: 26px;
		top: 172px;
		width: 136px;
		height: 136px;
	}

	.hz-lp .hz-kv__inner {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		grid-template-areas:
			"head   figure"
			"zeros  zeros"
			"sub    sub"
			"cta    cta";
		column-gap: var(--pc-gap);
		align-items: start;
		width: 100%;
		max-width: var(--pc-cw);
		height: auto;
		margin-inline: auto;
		padding: 72px var(--pc-gut) 80px;
		box-sizing: border-box;
	}

	/* --- 左カラム --- */
	.hz-lp .hz-kv__head {
		grid-area: head;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		max-width: none;
		margin: 0;
	}

	.hz-lp .hz-kv__title {
		position: static;
		display: inline-block;
		margin: 0;
		padding: 8px 24px;
		background: #fff;
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
		font-size: 60px;
		line-height: 1.5;
	}

	.hz-lp .hz-kv__title::before,
	.hz-lp .hz-kv__title::after { content: none; }

	/* バッジ：見出しの下に横並び */
	.hz-lp .hz-kv__badges {
		position: static;
		display: flex;
		gap: 12px;
		margin: 24px 0 0;
	}

	.hz-lp .hz-kv__badge {
		width: 129px;
		height: 128px;
		margin: 0;
		font-size: 34px;
		line-height: 37px;
		letter-spacing: 4px;
	}

	.hz-lp .hz-kv__badge:nth-child(2) {
		margin-inline-start: 0;
		font-size: 22px;
		line-height: 21px;
		letter-spacing: 1px;
	}

	.hz-lp .hz-kv__badge:nth-child(2) strong { font-size: 34px; line-height: 35px; }


	/* 実績バー */
	.hz-lp .hz-kv__card {
		position: static;
		width: 100%;
		max-width: 637px;
		margin: 40px 0 0;
		padding: 0;
	}

	.hz-lp .hz-kv__stats {
		display: grid;
		grid-template-columns: 404px 1fr;
		width: 100%;
		height: 113px;
		margin: 0;
		background: url("./images/hz/kv-statline.svg") center / 100% 100% no-repeat;
	}

	.hz-lp .hz-kv__stat { font-size: 36px; line-height: 46px; letter-spacing: 3px; }
	.hz-lp .hz-kv__stat strong { font-size: 42px; }

	/* ピンクの訴求帯 */
	.hz-lp .hz-kv__band {
		position: static;
		width: 100%;
		max-width: 690px;
		min-height: 120px;
		margin: 28px 0 0;
		padding: 0 32px;
		translate: none;
		border-radius: 80px;
		font-size: 34px;
		line-height: 42px;
	}

	.hz-lp .hz-kv__note {
		position: static;
		width: 100%;
		max-width: none;
		margin: 28px 0 0;
		translate: none;
		font-size: 26px;
		line-height: 36px;
		text-align: left;
	}

	/* --- 弁護士写真（右カラム） --- */
	.hz-lp .hz-kv__figure {
		position: relative;
		grid-area: figure;
		left: auto;
		top: auto;
		width: 340px;
		height: 578px;
		margin: 0;
		align-self: end;
		-webkit-mask: none;
		mask: none;
		background: var(--hz-img-kv-lawyer) center bottom / contain no-repeat;
	}

	.hz-lp .hz-kv__badge-name {
		left: 50%;
		top: auto;
		bottom: 16px;
		translate: -50% 0;
		width: 225px;
		height: 70px;
	}

	/* --- 0円 3 カラム --- */
	.hz-lp .hz-kv__zeros {
		position: static;
		grid-area: zeros;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
		width: 100%;
		margin: 56px 0 0;
	}

	.hz-lp .hz-kv__zero {
		width: 100%;
		padding-block-end: 130px;
	}

	.hz-lp .hz-kv__zero .hz-kv__zero-cap {
		width: 100%;
		height: 38px;
		border-radius: 9px 0 0 0;
		font-size: 20px;
		line-height: 1.2;
	}

	.hz-lp .hz-kv__zero .hz-kv__zero-label {
		width: 152px;
		height: 154px;
		margin: 24px auto 0;
		background-size: 126px auto;
		font-size: 22px;
		line-height: 25px;
	}

	.hz-lp .hz-kv__zero .hz-kv__zero-num {
		bottom: 24px;
		font-size: 108px;
		line-height: 0.9;
	}

	.hz-lp .hz-kv__zero .hz-kv__zero-num em { font-size: 30px; }

	/* --- 補足行 / CTA --- */
	.hz-lp .hz-kv__sub {
		position: static;
		grid-area: sub;
		width: 100%;
		margin: 40px 0 0;
		font-size: 24px;
		line-height: 1.6;
		text-align: center;
	}

	.hz-lp .hz-kv__cta {
		position: static;
		grid-area: cta;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 380px));
		justify-content: center;
		gap: 24px;
		width: 100%;
		margin: 24px 0 0;
	}

	.hz-lp .hz-kv__cta .wp-block-button__link {
		width: 100%;
		min-height: 104px;
		padding: 46px 16px 16px;
		border-radius: 80px;
		font-size: 24px;
		line-height: 29px;
	}

	.hz-lp .hz-kv__cta .wp-block-button__link strong { font-size: 30px; }
}

/* ==========================================================================
   タブレット（751〜1023px）
   ========================================================================== */

@container (min-width: 751px) and (max-width: 1023px) {

	/* KV は 1 カラムに戻す */
	.hz-lp .hz-kv__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "head" "figure" "zeros" "sub" "cta";
	}

	.hz-lp .hz-kv__figure { justify-self: center; margin-top: 24px; }
}


/* ==========================================================================
   KV — PC: 完成画像(kv_pc.jpg)+ 補足文 / CTA / スクロール誘導(コーディング)
   画像の差し替えは HTML 側の <picture><source media="(min-width: 751px)"> で行う。

   kv_pc.jpg = Figma 幅 1920 × 高さ 1270 を 2 倍書き出し(3840×2540)。
   --kvu = デザイン 1px(画像の表示幅 / 1920)。以下の座標はすべてデザイン px。
   実測(元画像 / 1.5):
     0円の段の下端 y=643 / 下段(費用ゼロ)の上端 y=932(間 289)
     0円・ボタン列の横中心 x=980
     中身全体の左端 = 見出しの白ボックス x=152(画像中心 960 から 808)
   ︾ まで含めてファーストビューに収めるのが要件。
   上の「2. KV」は旧マークアップ(.hz-kv__inner 等)用で、現行 HTML には効かない。
   ========================================================================== */

@container (min-width: 751px) {

	/* 画像の表示倍率
	   - 基本は全幅(100cqi / 1920)
	   - 狭い PC では中身が小さくなりすぎないよう 0.7 倍を下限にし、左右をトリミング
	     (ただし左端の白ボックス x=152 が切れない倍率まで。画像中心 960 から 808 + 余白 52
	      = 片側 860 → 1720 が画面に収まる倍率)
	   - ︾までファーストビューに収めるため、︾の下端(y=862、アニメーション込み)が
	     画面下に収まる倍率を上限にする

	   画像の左位置 --kv-left: 常に画像中心 = 画面中央(左右を均等にトリミング)。
	   デザイン上の余白バランス(ロゴ側が広い)を崩さないため、中身の中心には寄せない。 */
	.hz-lp .hz-sec--kv {
		--kvu: min(
			max(100cqi / 1920, min(100cqi / 1720, 0.7px)),
			(100svh - 16px) / 862
		);
		--kv-left: calc(50cqi - 960 * var(--kvu));
		position: relative;
		display: block;
		padding: 0;
		background: #cce7b2;
		overflow: hidden;
		isolation: isolate;
	}

	/* wp:group の .wp-block-group__inner-container が挟まるので、
	   子セレクタ(>)は使わず、inner-container は全幅・非配置のままにする */
	.hz-lp .hz-sec--kv > .wp-block-group__inner-container {
		position: static;
		width: 100%;
		max-width: none;
		margin: 0;
	}

	/* 画面より広いときは左右がはみ出して切れる(位置は --kv-left) */
	.hz-lp .hz-sec--kv .hz-kv__visual {
		position: relative;
		left: var(--kv-left);
		width: calc(1920 * var(--kvu));
		max-width: none;
		margin: 0;
	}

	.hz-lp .hz-kv__visual picture { display: block; }

	/* 画面が極端に横長で画像が全幅に届かないとき用の保険:
	   画像の左端/右端の1列を横に引き伸ばして埋める */
	.hz-lp .hz-sec--kv::before,
	.hz-lp .hz-sec--kv::after {
		content: "";
		position: absolute;
		top: -40px;
		bottom: -40px;
		z-index: -1;
		width: 50%;
		background-image: url("./images/hz/kv_pc.jpg");
		background-repeat: no-repeat;
		background-size: 100000% calc(100% - 80px);
		filter: blur(6px);
	}

	.hz-lp .hz-sec--kv::before { left: 0;  background-position: left 0 top 40px; }
	.hz-lp .hz-sec--kv::after  { right: 0; background-position: right 0 top 40px; }

	/* 補足文: y=680〜708 / 0円・ボタン列の中心(x=980)揃え */
	.hz-lp .hz-sec--kv .hz-kv__subcopy {
		position: absolute;
		z-index: 1;
		top: calc(680 * var(--kvu));
		left: calc(var(--kv-left) + 980 * var(--kvu));
		width: auto;
		max-width: none;
		margin: 0;
		padding-inline: calc(31 * var(--kvu));
		translate: -50% 0;
		font-size: calc(20 * var(--kvu));
		line-height: 1.4;
		white-space: nowrap;
	}

	.hz-lp .hz-kv__subcopy::before,
	.hz-lp .hz-kv__subcopy::after {
		width: max(1px, calc(2 * var(--kvu)));
		height: calc(22 * var(--kvu));
		background: #4fa97a;
	}

	.hz-lp .hz-kv__subcopy::before { left: calc(7 * var(--kvu)); }
	.hz-lp .hz-kv__subcopy::after  { right: calc(7 * var(--kvu)); }

	/* CTA: y=722〜802 / 430×80 のピル 2 つ(間隔 16) */
	.hz-lp .hz-sec--kv .hz-kv__ctagroup {
		position: absolute;
		z-index: 1;
		top: calc(722 * var(--kvu));
		left: calc(var(--kv-left) + 980 * var(--kvu));
		flex-wrap: nowrap;
		gap: calc(16 * var(--kvu));
		width: calc(876 * var(--kvu));
		max-width: none;
		margin: 0;
		translate: -50% 0;
	}

	.hz-lp .hz-kv__ctagroup .wp-block-button__link {
		flex-direction: row;
		gap: calc(10 * var(--kvu));
		min-height: 0;
		height: calc(80 * var(--kvu));
		padding: 0 calc(59 * var(--kvu)) 0 calc(24 * var(--kvu));
		font-size: calc(21 * var(--kvu));
		line-height: 1;
		letter-spacing: .02em;
		box-shadow: 0 calc(5 * var(--kvu)) calc(10 * var(--kvu)) rgba(0, 0, 0, .16);
		transition: opacity .2s, translate .2s;
	}

	/* ボタン下の二重シェブロン(スクロール誘導)
	   ボタン上端から 100(y=822〜850、アニメーションで +12。下段 y=932 に被らない) */
	.hz-lp .hz-sec--kv .hz-kv__ctagroup::after {
		content: "";
		position: absolute;
		top: calc(100 * var(--kvu));
		left: 50%;
		width: calc(48 * var(--kvu));
		height: calc(28 * var(--kvu));
		translate: -50% 0;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16' fill='none' stroke='%234fa97a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l12 6 12-6M2 8l12 6 12-6'/%3E%3C/svg%3E") center / contain no-repeat;
		pointer-events: none;
		animation: hz-kv-scroll 1.8s ease-in-out infinite;
	}

	.hz-lp .hz-kv__ctagroup .wp-block-button__link:hover {
		opacity: .85;
		translate: 0 calc(2 * var(--kvu));
	}

	/* PC カンプでは「無料」を強調サイズにしない */
	.hz-lp .hz-kv__ctagroup .wp-block-button__link strong { font-size: inherit; }

	.hz-lp .hz-kv__ctagroup-icon {
		width: calc(36 * var(--kvu));
		height: calc(36 * var(--kvu));
	}

	.hz-lp .hz-kv__ctagroup .wp-block-button:first-child .hz-kv__ctagroup-icon {
		width: calc(40 * var(--kvu));
	}

	/* 右端の白丸矢印(矢印色はボタン地色) */
	.hz-lp .hz-kv__ctagroup-arrow {
		position: absolute;
		top: 50%;
		right: calc(21 * var(--kvu));
		display: grid;
		place-items: center;
		width: calc(29 * var(--kvu));
		height: calc(29 * var(--kvu));
		border-radius: 50%;
		background: #fff;
		color: #4fa97a;
		translate: 0 -50%;
	}

	.hz-lp .hz-kv__ctagroup .wp-block-button:first-child .hz-kv__ctagroup-arrow { color: #ff949f; }

	.hz-lp .hz-kv__ctagroup-arrow svg {
		display: block;
		width: 70%;
		height: 70%;
	}
}

/* KV のスクロール誘導シェブロン: 下へ動きながらフェード */
@keyframes hz-kv-scroll {
	0%   { translate: -50% 0;                          opacity: 0; }
	30%  {                                             opacity: 1; }
	70%  { translate: -50% calc(7 * var(--kvu, 1px));  opacity: 1; }
	100% { translate: -50% calc(12 * var(--kvu, 1px)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hz-lp .hz-sec--kv .hz-kv__ctagroup::after { animation: none; }
}


/* ==========================================================================
   sec01(その不安、ひとりで抱える必要はありません。) — PC
   Figma(幅 1920)の配置に合わせる:
   - 見出しは中央
   - イラスト sec01_img_pc.png(1092×850)は画面の左端にぴったり付け、
     下端をセクション下端に揃える。1920 時に幅 1092(= 画面の 56.875%)
   - イラストの右の余白に「右向き矢印 → 結びの文」(文の列は最低 400 確保)
   - 751〜1023px: 1 カラム(イラスト → 下向き矢印 → 文)
   画像の出し分けは HTML 側の <picture><source media="(min-width: 751px)">。
   sec01_img_pc.png は写真の右端・上端が透明にフェードしているので、薄緑の地に置いても四角は浮かない。
   セクションの上下 padding は他所の指定に負けていたため、詳細度を上げて指定する。
   ========================================================================== */

@container (min-width: 751px) {

	.hz-lp .hz-sec.hz-sec--worry {
		--worry-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234fa97a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5l6 7-6 7M12 5l6 7-6 7'/%3E%3C/svg%3E");
		padding-block: 120px 100px;
		padding-inline: 0;
		/* SP の sec01_bg.png と同系の薄緑。写真側(左上)は白を残し、文の側と下側に広げる */
		background:
			radial-gradient(ellipse 48% 60% at 76% 62%, rgba(214, 240, 225, .9) 0, rgba(214, 240, 225, 0) 70%),
			linear-gradient(to bottom, #fff 0, #fff 22%, #eff7ee 70%, #f2f8f0 100%);
	}

	.hz-lp .hz-sec--worry > .wp-block-group__inner-container {
		width: 100%;
		max-width: none;
		margin: 0;
	}

	.hz-lp .hz-sec--worry .hz-h2 {
		padding-inline: var(--pc-gut);
		font-size: 44px;
		line-height: 1.5;
	}

	.hz-lp .hz-sec--worry .hz-worry__visual {
		width: 100%;
		max-width: 1092px;
		margin: 48px auto 0;
	}

	.hz-lp .hz-worry__visual picture { display: block; }

	.hz-lp .hz-sec--worry .hz-worry-lead,
	.hz-lp .hz-sec--worry .hz-worry-close {
		max-width: none;
		padding-inline: var(--pc-gut);
		font-size: 28px;
		line-height: 1.8;
		text-align: center;
	}

	.hz-lp .hz-sec--worry .hz-worry-lead strong {
		font-size: 28px;
		white-space: nowrap;
	}

	.hz-lp .hz-worry-lead__gap { padding-bottom: 12px; }

	/* 1 カラム時: イラストと文の間に下向き矢印 */
	.hz-lp .hz-sec--worry .hz-worry-lead {
		position: relative;
		margin-top: 32px;
		padding-top: 72px;
	}

	.hz-lp .hz-sec--worry .hz-worry-lead::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 44px;
		height: 44px;
		translate: -50% 0;
		rotate: 90deg;
		background: var(--worry-arrow) center / contain no-repeat;
	}

	.hz-lp .hz-sec--worry .hz-worry-close { margin-top: 40px; }

	.hz-lp .hz-sec--worry .hz-worry-close strong {
		color: var(--hz-green-tx);
		font-weight: 700;
	}
}

@container (min-width: 1024px) {

	/* イラストは左端・下端にぴったり付けるので下 padding なし */
	.hz-lp .hz-sec.hz-sec--worry { padding-bottom: 0; }

	/* wp:group の inner-container が挟まる場合はそちらを、無い場合はセクション自体をグリッドにする */
	.hz-lp .hz-sec--worry > .wp-block-group__inner-container,
	.hz-lp .hz-sec--worry:not(:has(> .wp-block-group__inner-container)) {
		display: grid;
		/* イラストの右の余白の中で「矢印 + 文(最大 640)」を中央に置く(広い画面で文が離れすぎない) */
		grid-template-columns: min(1092px, 56.875cqi, 100cqi - 536px) minmax(0, 1fr) 88px minmax(0, 640px) minmax(0, 1fr);
		grid-template-rows: auto 1fr auto auto 1fr;
		grid-template-areas:
			"head   head head  head  head"
			"visual .    .     .     ."
			"visual .    arrow lead  ."
			"visual .    arrow close ."
			"visual .    .     .     .";
	}

	/* 右向き矢印(グリッドの疑似要素アイテム) */
	.hz-lp .hz-sec--worry > .wp-block-group__inner-container::after,
	.hz-lp .hz-sec--worry:not(:has(> .wp-block-group__inner-container))::after {
		content: "";
		grid-area: arrow;
		align-self: center;
		justify-self: center;
		width: 60px;
		height: 60px;
		background: var(--worry-arrow) center / contain no-repeat;
	}

	.hz-lp .hz-sec--worry .hz-h2 { grid-area: head; }

	.hz-lp .hz-sec--worry .hz-worry__visual {
		grid-area: visual;
		align-self: end;
		max-width: none;
		margin: 48px 0 0;
	}

	.hz-lp .hz-sec--worry .hz-worry-lead,
	.hz-lp .hz-sec--worry .hz-worry-close {
		padding-inline: 0 var(--pc-gut);
		font-size: clamp(22px, 1.75cqi, 34px);
	}

	.hz-lp .hz-sec--worry .hz-worry-lead strong { font-size: inherit; }

	.hz-lp .hz-sec--worry .hz-worry-lead {
		grid-area: lead;
		margin: 0;
		padding-top: 0;
	}

	.hz-lp .hz-sec--worry .hz-worry-lead::before { content: none; }

	.hz-lp .hz-sec--worry .hz-worry-close { grid-area: close; }
}


/* ==========================================================================
   追従 CTA — PC
   .hz-stickycta は hz-lp.js で body 直下に移されるため .hz-lp のコンテナクエリが
   効かない。ここだけ @media で出し分ける。
   KV 下部(補足文 + 緑/ピンクのピルボタン 2 つ)をそのまま帯にして追従させる。
   地は「左が薄ピンク → 中央白 → 右が薄緑」のグラデーション(左メール / 右 LINE のボタン色に合わせる)。
   補足文は 2 列のボタンの上に全幅で置く(グリッドの 1 行目)。
   ========================================================================== */

@media (min-width: 751px) {

	.hz-stickycta {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 360px));
		justify-content: center;
		column-gap: 16px;
		row-gap: 10px;
		padding: 12px 24px calc(14px + env(safe-area-inset-bottom));
		background:
			linear-gradient(90deg, #fde9eb 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 68%, #dff1e3 100%),
			#fff;
		box-shadow: 0 -2px 12px rgba(0, 0, 0, .1);
	}

	/* 補足文: KV と同じく両脇に緑の斜め線 */
	.hz-stickycta__sub {
		position: relative;
		display: block;
		grid-column: 1 / -1;
		justify-self: center;
		margin: 0;
		padding-inline: 26px;
		color: #333;
		font-family: "HZ Noto Sans JP", "Yu Gothic", sans-serif;
		font-weight: 700;
		font-size: 14px;
		line-height: 1.4;
		white-space: nowrap;
	}

	.hz-stickycta__sub::before,
	.hz-stickycta__sub::after {
		content: "";
		position: absolute;
		top: 50%;
		width: 2px;
		height: 16px;
		background: #4fa97a;
		translate: 0 -50%;
	}

	.hz-stickycta__sub::before { left: 6px;  rotate: -20deg; }
	.hz-stickycta__sub::after  { right: 6px; rotate: 20deg; }

	/* ボタン: 全幅の半分ずつではなく、KV と同じ独立したピル */
	.hz-stickycta__btn {
		position: relative;
		gap: 9px;
		min-height: 52px;
		padding-block: 0;
		padding-right: 52px;
		padding-left: 20px;
		border-radius: 999px;
		font-size: 15px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, .14);
		transition: opacity .2s;
	}

	.hz-stickycta__icon { width: 22px; }

	/* KV ボタンと同じ丸矢印パーツを流用する */
	.hz-stickycta__arrow {
		position: absolute;
		top: 50%;
		right: 20px;
		display: grid;
		place-items: center;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: #fff;
		color: #4fa97a;
		translate: 0 -50%;
	}

	.hz-stickycta__btn--pink .hz-stickycta__arrow { color: #ff94a0; }

	.hz-stickycta__arrow svg { display: block; width: 70%; height: 70%; }
}


/* ==========================================================================
   sec02(着手金も実費もぜんぶ0円。) — PC
   PC カンプなし(実装側の設計)。
   SP のパーツ(0円カード・タイル・比較表画像・CTA)は --u(カンプ1px)基準で組まれており、
   PC では --u が 1px で頭打ちになる = SP カンプの 2 倍スケールで描かれて大きすぎる。
   そこでセクション内の --u を下げて全体を縮め、配置だけ PC 用に組み替える。
   - 見出しは 2 行(「着手金も実費もぜんぶ0円。/ お金の不安で、あきらめないで。」)
   - 0円カード 3 枚: 1024px〜 は横 3 列(カード内はさらに縮小)、751〜1023px は縦 1 列
   - 比較表(sec02_table.png 1035×1400)は 620px 幅で中央
   旧 PC ルール(グリッド 2 カラムのカード等)は現行マークアップと合わないため削除済み。
   ========================================================================== */

@container (min-width: 751px) {

	.hz-lp .hz-sec.hz-sec--fee {
		--u: .62px;
		padding-block: 120px;
		padding-inline: var(--pc-gut);
	}

	/* 見出し: 1 本目と 3 本目の <br> を消して 2 行に */
	.hz-lp .hz-sec--fee .hz-h2 {
		width: auto;
		max-width: none;
		margin: 0 auto;
		font-size: 48px;
		line-height: 1.6;
		text-align: center;
	}

	.hz-lp .hz-sec--fee .hz-h2 br:nth-of-type(1),
	.hz-lp .hz-sec--fee .hz-h2 br:nth-of-type(3) { display: none; }

	.hz-lp .hz-sec--fee .hz-h2 strong { font-size: 66px; }
	.hz-lp .hz-sec--fee .hz-h2 em { font-size: 46px; }
	.hz-lp .hz-sec--fee .hz-h2 b { letter-spacing: 6px; }

	.hz-lp .hz-sec--fee .hz-lead {
		width: auto;
		max-width: 760px;
		margin: 40px auto 0;
		font-size: 18px;
		line-height: 1.9;
		text-align: center;
	}

	/* --- 0円カード --- */
	.hz-lp .hz-zerocards {
		width: 100%;
		max-width: 1200px;
		margin: 56px auto 0;
	}

	.hz-lp .hz-zerocard {
		--u: .75px;
		width: min(100%, calc(690 * var(--u)));
		margin: 32px auto 0;
	}

	/* --- 費用タイミング比較 --- */
	/* 斜め線は段落の両端に付くので、段落を文字幅に縮めて文字のすぐ両脇に置く */
	.hz-lp .hz-sec--fee .hz-compare-lead {
		box-sizing: border-box;
		width: fit-content;
		max-width: 100%;
		margin: 120px auto 0;
		padding-inline: 56px;
		font-size: 34px;
		line-height: 1.6;
	}

	.hz-lp .hz-sec--fee .hz-compare-lead::before,
	.hz-lp .hz-sec--fee .hz-compare-lead::after { height: 64px; bottom: 8px; }

	.hz-lp .hz-sec--fee .hz-compare-lead::before { left: 14px; }
	.hz-lp .hz-sec--fee .hz-compare-lead::after  { right: 14px; }

	/* PC 用の比較表(sec02_table_pc.png)は横長なので、SP 用の縦長前提の幅から広げる */
	.hz-lp .hz-sec--fee .hz-compare__visual {
		width: min(100%, 1000px);
		margin: 48px auto 0;
	}

	.hz-lp .hz-sec--fee .hz-compare__visual + .hz-note {
		width: min(100%, 1000px);
		max-width: none;
		margin: 20px auto 0;
		font-size: 14px;
	}

	.hz-lp .hz-sec--fee .hz-green {
		margin-top: 64px;
		font-size: 24px;
		line-height: 1.6;
	}

	/* wp:buttons は flex になるため、ボタンが左に寄らないよう中央揃えにする */
	.hz-lp .hz-sec--fee .hz-cta {
		display: flex;
		justify-content: center;
		margin-top: 24px;
	}

	.hz-lp .hz-sec--fee .hz-cta .wp-block-button { width: min(100%, 520px); margin: 0; }

	.hz-lp .hz-sec--fee .hz-cta .wp-block-button__link {
		width: 100%;
		min-height: 96px;
		font-size: 24px;
	}
}

@container (min-width: 1024px) {

	/* 0円カードを横 3 列。wp:group の inner-container が挟まる場合はそちらを flex にする */
	.hz-lp .hz-zerocards:not(:has(> .wp-block-group__inner-container)),
	.hz-lp .hz-zerocards > .wp-block-group__inner-container {
		display: flex;
		align-items: stretch;
		gap: 28px;
	}

	/* 3 列に収めるためカード内をさらに縮める(690u × .55 ≒ 380px) */
	.hz-lp .hz-zerocard {
		--u: .55px;
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		margin: 0;
	}

	/* カード内を縦 flex にし、タイルをカード下端に揃える */
	.hz-lp .hz-zerocard:not(:has(> .wp-block-group__inner-container)),
	.hz-lp .hz-zerocard > .wp-block-group__inner-container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.hz-lp .hz-zerocard .hz-tiles {
		margin-top: auto;
		padding-top: 24px;
	}

	/* 3 列時の本文(28u × .55 ≒ 15px)は少しだけ上げて読みやすく */
	.hz-lp .hz-zerocard .hz-text { font-size: 16px; }
}


/* ==========================================================================
   PC: スクロールでふわっと表示(要素単位)
   hz-lp.js の setupItemReveal() が PC(751px〜)のときだけ
   .hz-lp--reveal-items と各要素の .hz-reveal / .is-inview を付ける。
   SP はこれまでどおりセクション単位(hz-lp.css の .hz-lp--anim-ready)。
   要素自身の transform を上書きしないよう、表示後は animation を外して元に戻す
   (fill-mode: backwards = 待機中だけ開始状態を保持し、終了後は通常スタイル)。
   ========================================================================== */

.hz-lp--reveal-items .hz-reveal { opacity: 0; }

.hz-lp--reveal-items .hz-reveal.is-inview {
	opacity: 1;
	animation: hz-reveal .9s cubic-bezier(.22, .61, .36, 1) backwards;
}

@keyframes hz-reveal {
	from { opacity: 0; transform: translateY(36px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.hz-lp--reveal-items .hz-reveal { opacity: 1; }
	.hz-lp--reveal-items .hz-reveal.is-inview { animation: none; }
}


/* ==========================================================================
   PC: ボタンのホバー演出
   ========================================================================== */

@media (hover: hover) and (min-width: 751px) {

	/* 緑の立体ボタン(.hz-cta): 押し込むように沈み、右の矢印が右へ */
	.hz-lp .hz-cta .wp-block-button__link {
		transition: translate .25s ease, box-shadow .25s ease, filter .25s ease;
	}

	.hz-lp .hz-cta .wp-block-button__link::after { transition: translate .25s ease; }

	.hz-lp .hz-cta .wp-block-button__link:hover {
		translate: 0 calc(6 * var(--u));
		box-shadow: 0 calc(6 * var(--u)) 0 var(--hz-green-sh);
		filter: brightness(1.05);
	}

	.hz-lp .hz-cta .wp-block-button__link:hover::after { translate: 6px -50%; }

	/* KV の 2 ボタン: ふわっと浮き上がり、丸矢印が右へ */
	.hz-lp .hz-kv__ctagroup .wp-block-button__link {
		transition: translate .25s ease, box-shadow .25s ease, filter .25s ease;
	}

	.hz-lp .hz-kv__ctagroup-arrow { transition: translate .25s ease; }

	.hz-lp .hz-kv__ctagroup .wp-block-button__link:hover {
		opacity: 1;
		translate: 0 calc(-3 * var(--kvu, 1px));
		box-shadow: 0 calc(10 * var(--kvu, 1px)) calc(20 * var(--kvu, 1px)) rgba(0, 0, 0, .2);
		filter: brightness(1.05);
	}

	.hz-lp .hz-kv__ctagroup .wp-block-button__link:hover .hz-kv__ctagroup-arrow {
		translate: calc(4 * var(--kvu, 1px)) -50%;
	}

	/* 追従ボタン: 下端に貼り付いているので、動かさず色を暗くしつつ矢印を送って分かりやすくする */
	.hz-stickycta__btn { transition: filter .2s ease; }
	.hz-stickycta__arrow { transition: translate .2s ease; }

	.hz-stickycta__btn:hover {
		opacity: 1;
		filter: brightness(.9);
	}

	.hz-stickycta__btn:hover .hz-stickycta__arrow { translate: 4px -50%; }
}


/* ==========================================================================
   sec03(その相談、先延ばしにしないでください。) — PC
   PC カンプなし(実装側の設計)。sec02 と同じく SP パーツは --u 基準なので、
   セクション内の --u を下げて全体を縮め、配置だけ PC 用に組み替える。
   - 見出しは SP 用の改行(.hz-br-sp)を消して 2 行
   - 「取り決めがない方 / ある方」の 2 枠は 1100px〜 で横並び(高さを揃える)。
     2 枠の合計幅は sec02 の 0円カードと同じ --pc-cw(1200)に揃え、
     ピルは 2 枚とも 1 行・枠の中央・同じ高さにする
   - 吹き出し画像は PC 用 sec03-fukidashi_pc.png(1920×539)を全幅で。下端をセクション下端に揃える
   - 上部のピンクのぼかし(sec03_bg_top.png)は画面幅いっぱいに
   ========================================================================== */

@container (min-width: 751px) {

	.hz-lp .hz-sec.hz-sec--delay {
		--u: .8px;
		padding-block: 120px 0;
		padding-inline: var(--pc-gut);
		background: #fff url("./images/hz/sec03_bg_top.png") top center / 100% auto no-repeat;
	}

	.hz-lp .hz-sec--delay .hz-h2 {
		width: auto;
		margin-inline: auto;
		font-size: 44px;
		line-height: 1.5;
		text-align: center;
	}

	.hz-lp .hz-sec--delay .hz-h2 strong { font-size: 56px; }
	.hz-lp .hz-sec--delay .hz-h2 .hz-br-sp { display: none; }

	.hz-lp .hz-sec--delay .hz-lead {
		box-sizing: border-box;
		width: min(100%, 760px);
		max-width: none;
		margin: 40px auto 0;
		font-size: 20px;
		line-height: 1.9;
	}

	/* リード下の罫線をリード中央に */
	.hz-lp .hz-sec--delay .hz-lead::after {
		left: 50%;
		translate: -50% 0;
	}

	/* 枠: 1 列時は SP の比率(690u)で中央 */
	.hz-lp .hz-sec--delay .hz-casebox {
		width: min(100%, calc(690 * var(--u)));
		margin-inline: auto;
	}

	/* 枠内の本文は PC の本文サイズに。表は <figure> の既定マージンを消して枠内に収める */
	.hz-lp .hz-sec--delay .hz-casebox .hz-text { font-size: 17px; line-height: 1.9; }

	.hz-lp .hz-sec--delay .hz-table { margin-inline: 0; }

	.hz-lp .hz-sec--delay .hz-casebox + .hz-note {
		width: min(100%, calc(690 * var(--u)));
		max-width: none;
		margin-inline: auto;
		font-size: 14px;
	}

	/* 吹き出し画像(PC は sec03-fukidashi_pc.png 1920×539・左右透明の全幅画像)
	   - 画面中央基準で表示。幅は画面幅に合わせ、1920 で頭打ち(原寸)
	   - 狭い画面では吹き出しの文字が小さくなりすぎないよう 1300 を下限にし、
	     透明な左右をはみ出させて切る(.hz-lp は overflow-x: clip)
	   - 下端はセクション下端(padding-bottom: 0)に付ける */
	.hz-lp .hz-sec--delay .hz-bubble {
		position: relative;
		left: 50%;
		width: min(1920px, max(100cqi, 1300px));
		max-width: none;
		margin: 48px 0 0;
		translate: -50% 0;
	}

	.hz-lp .hz-sec--delay .hz-bubble picture { display: block; }

	/* 吹き出し / 弁護士の 2 層(共通ルールは hz-lp-sections.css)の PC 用上書き。
	   sec03-fukidashi_pc.png 1920×539 の実測:
	   吹き出し右端 max x=1016 / しっぽ先 (941, 371)、弁護士左端 頭 x≈1035 / 体 x≈963
	   折れ線 = x1025(y0〜300) → x955(y375) → x955(〜y539) */
	.hz-lp .hz-sec--delay .hz-bubble {
		--bubble-clip: polygon(0 0, 53.385% 0, 53.385% 55.66%, 49.74% 69.57%, 49.74% 100%, 0 100%);
		--lawyer-clip: polygon(53.385% 0, 100% 0, 100% 100%, 49.74% 100%, 49.74% 69.57%, 53.385% 55.66%);
		--bubble-origin: 49.01% 68.83%;
		--lawyer-img: url("./images/hz/sec03-fukidashi_pc.png");
		/* 画像が 1920 幅と広いので、スライド量(画像幅に対する割合)は SP の半分 */
		--lawyer-shift: 8%;
	}
}

@container (min-width: 1100px) {

	/* コンテンツ幅は sec02 と同じ 1200 */
	.hz-lp .hz-sec--delay > .wp-block-group__inner-container {
		width: 100%;
		max-width: var(--pc-cw);
		margin-inline: auto;
	}

	/* 枠は横長にして縦に 2 枚並べる。
	   枠どうしを横に並べると、表のある側に高さが引っ張られて
	   もう一方の中に大きな空白ができるため、枠は全幅にして中身を 2 列にする */
	.hz-lp .hz-sec--delay .hz-casebox {
		width: 100%;
		margin: 56px 0 0;
	}

	/* 枠の中身: 左に注意喚起〜図、右に説明文。表だけは幅を使うので下に全幅で置く。
	   wp:group は中身が inner-container に包まれるため、そちらをグリッドにする */
	.hz-lp .hz-sec--delay .hz-casebox:not(:has(> .wp-block-group__inner-container)),
	.hz-lp .hz-sec--delay .hz-casebox > .wp-block-group__inner-container {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-content: start;
		column-gap: 56px;
	}

	.hz-lp .hz-sec--delay .hz-casebox .hz-alert    { grid-area: 1 / 1; }
	.hz-lp .hz-sec--delay .hz-casebox .hz-emph     { grid-area: 2 / 1; }
	.hz-lp .hz-sec--delay .hz-casebox .hz-timeline { grid-area: 3 / 1; }

	/* 説明文は右列。左列の 3 行ぶんを使う */
	.hz-lp .hz-sec--delay .hz-casebox .hz-text {
		grid-area: 1 / 2 / 4 / 3;
		margin-block-start: 0;
	}

	/* 表は説明文と同じ右列の、そのすぐ下に。
	   説明文を上 2 行・表を 3 行目に割り当てると、左列は上 2 つが詰まったまま、
	   右列は説明文と表が続けて並ぶ */
	.hz-lp .hz-sec--delay .hz-casebox:nth-of-type(2) .hz-text { grid-area: 1 / 2 / 3 / 3; }

	.hz-lp .hz-sec--delay .hz-casebox .hz-table {
		grid-area: 3 / 2 / 4 / 3;
		align-self: start;
		width: 100%;
		margin-block: 0;
	}

	/* 左列は行が表の高さに引っ張られるので、上詰めにして間延びを防ぐ */
	.hz-lp .hz-sec--delay .hz-casebox .hz-alert,
	.hz-lp .hz-sec--delay .hz-casebox .hz-emph,
	.hz-lp .hz-sec--delay .hz-casebox .hz-timeline { align-self: start; }

	.hz-lp .hz-sec--delay .hz-casebox + .hz-note { width: 100%; }

	/* ピル: 2 枚とも 1 行・枠の中央・同じ高さ(2 枚目の改行と 2 行用の高さ/位置を解除) */
	.hz-lp .hz-sec--delay .hz-casebox .hz-pill,
	.hz-lp .hz-sec--delay .hz-casebox .hz-pill--2 {
		left: 50%;
		top: 0;
		translate: -50% 0;
		width: max-content;
		min-width: calc(526 * var(--u));
		min-height: calc(75 * var(--u));
		padding-inline: 32px;
		font-size: 28px;
		line-height: 1;
	}

	.hz-lp .hz-sec--delay .hz-casebox .hz-pill strong { font-size: 32px; }

	.hz-lp .hz-sec--delay .hz-casebox .hz-pill br { display: none; }

	/* 時系列の帯(600u 固定)は枠の中央に */
	.hz-lp .hz-sec--delay .hz-timeline {
		width: calc(600 * var(--u));
		max-width: 100%;
		margin-inline: auto;
	}
}



/* ==========================================================================
   sec04(相談は、LINEで。全国どこからでも。) — PC
   PC カンプなし(実装側の設計)。
   SP はスマホモック(.hz-linemock)を画面幅いっぱい・縦横比 750:1096 で敷くため、
   PC ではそのままだと巨大になる。モックと中のチャット UI は --u 基準なので、
   セクション内の --u を下げてモックを原寸比のまま縮め、配置を組み替える。
   - 見出し帯: PC は画面幅いっぱい・1 行・中央揃え
   - 1024px〜: 左にスマホモック(約 480px)、右に「スマホひとつで完結」+ 特徴 2 つ
   - PC ではモック上部を帯の裏に潜らせず、ノッチまで含めたスマホ全体を見せる
     (チャット UI はノッチの下から始める)
   - 751〜1023px: 1 カラム(モック約 600px を中央)
   ========================================================================== */

@container (min-width: 751px) {

	.hz-lp .hz-sec.hz-sec--line {
		--u: .8px;
		padding-block: 0 80px;
		padding-inline: var(--pc-gut);
	}

	/* 見出し帯: PC は画面幅いっぱい・1 行・中央揃え */
	.hz-lp .hz-sec--line .hz-band {
		z-index: 2;
		left: calc((100% - 100cqi) / 2);
		width: 100cqi;
		white-space: nowrap;
		text-align: center;
		max-width: none;
		min-height: 0;
		padding: 24px var(--pc-gut);
		font-size: 40px;
		line-height: 1.5;
	}

	.hz-lp .hz-sec--line .hz-band br { display: none; }

	/* スマホモック: 全幅ブリードをやめ、750u 幅(原寸比)で中央。
	   帯の裏には潜らせず、上部の緑地・ノッチまで見せる。
	   縦横比は SP と同じ 750:1096(メッセージ 4 件 + 注記が収まる高さ) */
	.hz-lp .hz-sec--line .hz-linemock {
		z-index: 1;
		width: calc(750 * var(--u));
		max-width: 100%;
		margin: 64px auto 0;
		border-radius: 32px;
		overflow: hidden;
	}

	/* チャット UI はノッチ(下端 180u)の下から。上の角丸はノッチ下の画面の形に合わせて小さく */
	.hz-lp .hz-sec--line .hz-chat {
		top: calc(186 * var(--u));
		border-start-start-radius: calc(16 * var(--u));
		border-start-end-radius: calc(16 * var(--u));
	}

	/* ヘッダーは SP では帯に隠れる分の上余白(96u)を持つが、PC は隠れないので詰める */
	.hz-lp .hz-sec--line .hz-chat__head { padding-top: calc(26 * var(--u)); }

	/* 注記は絶対配置だとメッセージに重なるので、チャット下端の通常フローに置く */
	.hz-lp .hz-sec--line .hz-chat__note {
		position: static;
		flex: none;
		padding: calc(8 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u));
		text-align: right;
	}

	.hz-lp .hz-sec--line .hz-emph {
		--u: .8px;
		margin: 64px auto 0;
	}

	.hz-lp .hz-sec--line .hz-features {
		width: min(100%, 600px);
		margin: 56px auto 0;
	}
}

@container (min-width: 1024px) {

	/* スマホ 480px(1280 幅では少し小さく) */
	.hz-lp .hz-sec.hz-sec--line { --u: clamp(.56px, calc((100cqi - 700px) / 900), .64px); }

	/* wp:group の inner-container が挟まる場合はそちらを、無い場合はセクション自体をグリッドにする */
	.hz-lp .hz-sec--line > .wp-block-group__inner-container,
	.hz-lp .hz-sec--line:not(:has(> .wp-block-group__inner-container)) {
		display: grid;
		grid-template-columns: calc(750 * var(--u)) minmax(0, 560px);
		grid-template-rows: auto 1fr auto auto auto 1fr;
		grid-template-areas:
			"band band"
			"mock ."
			"mock emph"
			"mock feat"
			"mock cta"
			"mock .";
		justify-content: center;
		column-gap: 80px;
	}

	.hz-lp .hz-sec--line > .wp-block-group__inner-container {
		width: 100%;
		max-width: none;
		margin: 0;
	}

	.hz-lp .hz-sec--line .hz-band { grid-area: band; }

	.hz-lp .hz-sec--line .hz-linemock {
		grid-area: mock;
		margin: 72px 0 0;
	}

	/* 下のブロックへつなぐ縦の点線は、横並びでは不要 */
	.hz-lp .hz-sec--line .hz-linemock::after { content: none; }

	.hz-lp .hz-sec--line .hz-emph {
		grid-area: emph;
		margin: 72px 0 0;
		justify-self: start;
	}

	/* 特徴: アイコン 120px / 見出し 26px / 本文 16px 程度に */
	.hz-lp .hz-sec--line .hz-features {
		--u: .7px;
		grid-area: feat;
		width: 100%;
		margin: 56px 0 0;
	}

	/* LINE無料相談ボタン: 右カラムの特徴の下に置く。右カラム幅いっぱい */
	.hz-lp .hz-sec--line .hz-line-cta {
		--u: .7px;
		grid-area: cta;
		display: flex;
		margin: 72px 0 0;
	}

	.hz-lp .hz-sec--line .hz-line-cta .wp-block-button { width: 100%; }

	.hz-lp .hz-sec--line .hz-feature__title { font-size: 26px; line-height: 1.45; }
	.hz-lp .hz-sec--line .hz-feature__body { font-size: 16px; line-height: 1.8; }
}



/* ==========================================================================
   sec05〜フッター — PC
   PC カンプなし(実装側の設計)。これまでのセクションと同じく、
   SP のパーツは --u(カンプ1px)基準なので、セクションごとに --u を下げて全体を縮め、
   配置だけ PC 用に組み替える。
   wp:group の .wp-block-group__inner-container が挟まる場合に備え、グリッド/フレックスは
   「inner-container があればそれ、無ければ要素自身」の 2 通りのセレクタで当てる。
   ========================================================================== */

@container (min-width: 751px) {

	/* ---------- sec05: どんな人に相談するのか ---------- */
	/* 帯写真を画面幅いっぱいで見せるので、上は余白なしで始める
	   (sec04 側の下余白 80px がそのまま帯の上の余白になる)。
	   下は次の sec06 が 120px の上余白を持つので 80px に抑える。 */
	.hz-lp .hz-sec.hz-sec--who {
		--u: .8px;
		padding-block: 0 80px;
		padding-inline: var(--pc-gut);
	}

	/* sec05_message_pc.png は見出しラベルを含んだワイドな帯写真なので、
	   コンテンツ幅に収めず、画面幅いっぱいのバナーにする。
	   親(inner-container)は 1200 に絞られているので、hz-bleed の「親 + ガター」ではなく
	   画面幅(100cqi)基準で左右に持ち出す(sec06 の緑帯と同じ手法) */
	.hz-lp .hz-sec--who .hz-whohead__visual {
		width: 100cqi;
		max-width: none;
		margin-inline: calc((100% - 100cqi) / 2);
		margin-block: 0;
	}

	.hz-lp .hz-sec--who .hz-whohead__visual img { border-radius: 0; }

	/* 幅は動画と揃える。auto-phrase で文節の途中(「安心してご相/談」など)で
	   折り返さないようにする(非対応ブラウザでは通常の折り返しになるだけ) */
	.hz-lp .hz-sec--who .hz-text {
		width: min(100%, 800px);
		max-width: none;
		margin: 56px auto 0;
		font-size: 18px;
		line-height: 1.9;
		text-align: center;
		word-break: auto-phrase;
	}

	/* 全幅の帯写真に対して動画が小さく見えないよう、本文より一回り広く取る */
	.hz-lp .hz-sec--who .hz-video {
		width: min(100%, 800px);
		margin: 40px auto 0;
		border-radius: 20px;
	}

	/* ---------- sec06: お客様の声 ---------- */
	.hz-lp .hz-sec.hz-sec--voice {
		--u: .8px;
		padding-block: 120px 0;
		padding-inline: var(--pc-gut);
	}

	.hz-lp .hz-sec--voice .hz-h2 { font-size: 44px; line-height: 1.5; }

	.hz-lp .hz-sec--voice .hz-h2 + .hz-text {
		width: min(100%, 800px);
		max-width: none;
		margin: 40px auto 0;
		font-size: 18px;
		line-height: 1.9;
		text-align: center;
	}

	/* 実績の数字は PC 用の高解像度画像(990px 幅)に差し替えたので、
	   広い画面でも小さく見えないよう一回り大きく置く */
	.hz-lp .hz-sec--voice .hz-stats {
		width: min(100%, 880px);
		margin: 48px auto 0;
	}

	/* 緑の事例エリアは画面幅いっぱい、中身を中央 1200 に。
	   親(inner-container)は 1200 に絞られているので、hz-bleed の「親 + ガター」ではなく
	   画面幅(100cqi)基準で左右に持ち出す */
	.hz-lp .hz-sec--voice .hz-voice-results {
		width: 100cqi;
		max-width: none;
		margin-inline: calc((100% - 100cqi) / 2);
		margin-top: 64px;
		/* 上端の波(高さ136u)より内側に食い込ませて、SPと同じようにカードが
		   波の境目に重なって見える「層になった」バランスにする */
		padding: 56px var(--pc-gut) 100px;
	}

	.hz-lp .hz-sec--voice .hz-cases {
		width: 100%;
		max-width: var(--pc-cw);
		margin: 0 auto;
	}

	.hz-lp .hz-sec--voice .hz-case {
		width: min(100%, calc(690 * var(--u)));
		margin-inline: auto;
	}

	.hz-lp .hz-sec--voice .hz-voice-results .hz-note {
		max-width: var(--pc-cw);
		margin: 40px auto 0;
		font-size: 14px;
		text-align: center;
	}

	/* ---------- sec07: 弁護士費用 ---------- */
	.hz-lp .hz-sec.hz-sec--fee2 {
		--u: .8px;
		padding-block: 120px;
		padding-inline: var(--pc-gut);
	}

	.hz-lp .hz-sec--fee2 .hz-h2,
	.hz-lp .hz-sec--fee2 .hz-h2 strong { font-size: 44px; line-height: 1.5; }

	.hz-lp .hz-sec--fee2 .hz-lead {
		width: min(100%, 760px);
		max-width: none;
		margin: 32px auto 0;
		font-size: 18px;
		line-height: 1.9;
	}

	/* PC は縦長の 1 枚写真(sec07-photo-_pc.jpg)に差し替える。
	   SP のマスク合成(::before/::after の 2 枚重ね)は使わない。
	   角丸は画像に焼き込み済みなので border-radius は足さない */
	.hz-lp .hz-sec--fee2 .hz-photo {
		width: min(100%, 420px);
		max-width: none;
		height: auto;
		aspect-ratio: 1348 / 1706;
		margin: 72px auto 0;
		background: url("./images/hz/sec07-photo-_pc.jpg") center / contain no-repeat;
	}

	.hz-lp .hz-sec--fee2 .hz-photo::before,
	.hz-lp .hz-sec--fee2 .hz-photo::after { content: none; }

	.hz-lp .hz-sec--fee2 .hz-feecards {
		width: min(100%, calc(690 * var(--u)));
		margin: 0 auto;
	}

	.hz-lp .hz-sec--fee2 .hz-feecards + .hz-note {
		width: min(100%, calc(690 * var(--u)));
		max-width: none;
		margin-inline: auto;
		font-size: 14px;
	}

	/* ---------- sec08: 相談から解決まで ---------- */
	.hz-lp .hz-sec.hz-sec--step {
		--u: .75px;
		padding-block: 0 120px;
		padding-inline: var(--pc-gut);
	}

	/* 見出し帯: sec04 と同じく画面幅いっぱい・1 行・中央 */
	.hz-lp .hz-sec--step .hz-band {
		position: relative;
		left: calc((100% - 100cqi) / 2);
		width: 100cqi;
		max-width: none;
		min-height: 0;
		margin: 0;
		padding: 24px var(--pc-gut);
		font-size: 40px;
		line-height: 1.5;
		white-space: nowrap;
		text-align: center;
	}

	.hz-lp .hz-sec--step .hz-band br { display: none; }

	.hz-lp .hz-sec--step .hz-steps {
		width: min(100%, 880px);
		margin: 72px auto 0;
	}

	.hz-lp .hz-sec--step .hz-step { padding-block: calc(120 * var(--u)) calc(64 * var(--u)); }
	.hz-lp .hz-sec--step .hz-step__title { font-size: 22px; }
	.hz-lp .hz-sec--step .hz-step__body { font-size: 17px; line-height: 1.8; }

	/* ---------- sec09a: 受け取って、終わりにしない。 ---------- */
	.hz-lp .hz-sec.hz-sec--after {
		--u: .8px;
		padding-block: 120px 100px;
		padding-inline: var(--pc-gut);
	}

	/* PC は縦長の sec09-head_pc.png。
	   SP 画像の比率(1125/1008)のままだと object-fit: cover で上の見出しが切れるので、
	   PC 画像の比率に入れ替える。角丸は画像に焼き込み済み(透過)なので付けない */
	.hz-lp .hz-sec--after .hz-photo {
		width: min(100%, 600px);
		max-width: none;
		aspect-ratio: 1229 / 1437;
		margin: 0 auto;
		border-radius: 0;
	}

	/* 水玉の背景。SP は本文ブロック(.hz-afterblocks)の上下に敷いているが、
	   PC は写真と本文が横並びなので、セクション全体の上下を挟む形にする。
	   PC 用の sec09-bg_pc.png(2886x1779)を画面幅いっぱいに 1 枚で表示(繰り返しなし)。
	   本文の高さで中央が伸び縮みしても模様がちぎれないよう、上下を別々の帯として
	   同じ画像の上端・下端だけを見せる。
	   帯の高さは画像内の模様の範囲(上 0〜572px / 下 1237〜1779px)を幅で割った比率。 */
	.hz-lp .hz-sec--after .hz-afterblocks::before,
	.hz-lp .hz-sec--after .hz-afterblocks::after { content: none; }

	.hz-lp .hz-sec--after {
		position: relative;
		isolation: isolate;
	}

	.hz-lp .hz-sec--after::before,
	.hz-lp .hz-sec--after::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		z-index: -1;
		pointer-events: none;
		background-image: url("./images/hz/sec09-bg_pc.png");
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.hz-lp .hz-sec--after::before {
		top: 0;
		height: 19.9cqi;
		background-position: top center;
	}

	.hz-lp .hz-sec--after::after {
		bottom: 0;
		height: 18.9cqi;
		background-position: bottom center;
	}

	.hz-lp .hz-sec--after .hz-afterblocks {
		width: min(100%, 600px);
		margin: 48px auto 0;
		padding: 0;
	}

	.hz-lp .hz-sec--after .hz-afterblock__body { font-size: 18px; line-height: 1.9; }

	/* ---------- sec09b: よくあるご質問 ---------- */
	.hz-lp .hz-sec.hz-sec--faq {
		--u: .7px;
		padding-block: 100px 120px;
		padding-inline: var(--pc-gut);
	}

	.hz-lp .hz-sec--faq .hz-h2 { font-size: 44px; line-height: 1.5; }

	.hz-lp .hz-sec--faq .hz-faq {
		width: min(100%, 900px);
		margin: 48px auto 0;
	}

	.hz-lp .hz-sec--faq .hz-faq summary {
		width: 100%;
		font-size: 20px;
		cursor: pointer;
	}

	/* ---------- sec10: ひとり親家庭を支える仲間たち ---------- */
	.hz-lp .hz-sec.hz-sec--partner {
		--u: .8px;
		padding-block: 100px;
		padding-inline: var(--pc-gut);
	}

	/* 見出しの上下の罫線は固定長(690u)・左寄せで描かれているので、見出しの幅に合わせて中央に */
	.hz-lp .hz-sec--partner .hz-ribbon {
		width: min(100%, 760px);
		margin-inline: auto;
		padding-block: 8px;
		background-size: 100% 1px, 100% 1px;
		font-size: 36px;
	}

	.hz-lp .hz-sec--partner .hz-lead {
		max-width: none;
		margin-top: 32px;
		font-size: 18px;
		line-height: 1.9;
	}

	.hz-lp .hz-sec--partner .hz-partner-carousel {
		width: 100%;
		max-width: var(--pc-cw);
		margin: 40px auto 0;
		border-radius: 24px;
	}

	.hz-lp .hz-sec--partner .hz-text {
		max-width: none;
		margin-top: 40px;
		font-size: 22px;
		line-height: 1.7;
	}

	/* ---------- sec11: 相談する前に、知っておいてほしいこと。 ---------- */
	.hz-lp .hz-sec.hz-sec--before {
		--u: .8px;
		padding-block: 100px 120px;
		padding-inline: var(--pc-gut);
	}

	/* PC 用画像(1920px 幅)に差し替えたので、下のチェック 4 項目(1000px)と幅を揃える */
	.hz-lp .hz-sec--before .hz-before-visual {
		width: min(100%, 1000px);
		max-width: none;
		margin: 0 auto;
	}

	.hz-lp .hz-sec--before .hz-checks {
		width: min(100%, 640px);
		margin: 40px auto 0;
	}

	.hz-lp .hz-sec--before .hz-check__text { font-size: 20px; line-height: 1.8; }

	.hz-lp .hz-sec--before .hz-quote,
	.hz-lp .hz-sec--before .hz-quote2,
	.hz-lp .hz-sec--before .hz-closing {
		max-width: none;
		margin-inline: auto;
	}

	.hz-lp .hz-sec--before .hz-before-family {
		width: min(100%, 640px);
		margin: 40px auto 0;
	}

	/* wp:buttons は flex になるため、ボタンが左に寄らないよう中央揃えにする */
	.hz-lp .hz-sec--before .hz-before-cta {
		display: flex;
		justify-content: center;
	}

	.hz-lp .hz-sec--before .hz-before-cta .wp-block-button { width: min(100%, 600px); }

	/* ---------- sec12: フォーム ---------- */
	.hz-lp .hz-sec.hz-sec--form {
		--u: .8px;
		padding-block: 200px 120px;
		padding-inline: var(--pc-gut);
	}

	.hz-lp .hz-sec--form .hz-h2 { font-size: 40px; line-height: 1.5; }

	.hz-lp .hz-sec--form .hz-lead {
		max-width: none;
		font-size: 18px;
		line-height: 1.9;
	}

	/* コンテンツ幅は sec02 / sec03 と同じ 1200 に揃える。
	   項目名・入力欄は SP カンプの原寸だと PC では大きいので --u を下げる
	   (ラベル 22.4→19px / 入力 20.8→17.7px)。
	   横に広いぶん、左右の内余白は px で取り直す */
	.hz-lp .hz-sec--form .hz-form {
		--u: .68px;
		width: 100%;
		max-width: var(--pc-cw);
		margin: 48px auto 0;
		padding: 56px 48px;
	}

	/* 送信ボタン下の注記: 横 1200 の中で左寄せだと間延びするので、
	   少し小さくして中央に置く */
	.hz-lp .hz-sec--form .hz-form__note {
		font-size: 15px;
		line-height: 1.8;
		text-align: center;
	}

	.hz-lp .hz-sec--form .hz-form__recaptcha {
		font-size: 13px;
		line-height: 1.7;
		text-align: center;
	}

	/* ---------- フッター ---------- */
	.hz-lp .hz-foot {
		--u: .8px;
		/* PC の追従バー(補足文 + ボタンで高さ約 110px)にフッターが隠れないよう下を逃がす */
		padding: 60px var(--pc-gut) 150px;
	}

	/* 縦に長くなりすぎるので、ロゴを横組みの footer_logo_pc.png に差し替えて詰める。
	   【制約】ロゴは白地の上でしか使えないため、カードの外(ピンクの地)には出さないこと */
	.hz-lp .hz-foot > .wp-block-group__inner-container,
	.hz-lp .hz-foot__card {
		width: min(100%, 940px);
		margin-inline: auto;
	}

	.hz-lp .hz-foot__card {
		padding: 48px 56px;
		border-radius: 30px;
	}

	.hz-lp .hz-foot .hz-photo {
		width: min(100%, 440px);
		margin: 0 auto;
	}

	.hz-lp .hz-foot__name {
		margin: 28px 0 0;
		font-size: 19px;
		line-height: 1.6;
	}

	.hz-lp .hz-foot__addr {
		margin: 12px 0 0;
		font-size: 17px;
		line-height: 1.9;
	}
}

@container (min-width: 1024px) {

	/* sec05: 帯写真が画面幅いっぱいになったので、テキスト・動画は 1024px 以上でも
	   751px と同じ中央揃えの縦積みのまま(左右2カラムには分けない) */

	/* ---------- sec06: 事例カードを横 3 列 ---------- */
	.hz-lp .hz-sec--voice .hz-cases:not(:has(> .wp-block-group__inner-container)),
	.hz-lp .hz-sec--voice .hz-cases > .wp-block-group__inner-container {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: stretch;
		gap: 28px;
	}

	/* 3 列に収めるためカード内をさらに縮める(690u × .55 ≒ 380px) */
	.hz-lp .hz-sec--voice .hz-case {
		--u: .55px;
		width: auto;
		margin: 0;
	}

	/* カード内を縦 flex にし、「コメントを見る」をカード下端に揃える */
	.hz-lp .hz-sec--voice .hz-case:not(:has(> .wp-block-group__inner-container)),
	.hz-lp .hz-sec--voice .hz-case > .wp-block-group__inner-container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.hz-lp .hz-sec--voice .hz-case details { margin-top: auto; }

	/* ---------- sec07: 左に写真 / 右に費用カード 2 枚 ---------- */
	.hz-lp .hz-sec--fee2 > .wp-block-group__inner-container,
	.hz-lp .hz-sec--fee2:not(:has(> .wp-block-group__inner-container)) {
		display: grid;
		grid-template-columns: minmax(0, 600px) minmax(0, 552px);
		grid-template-areas:
			"h2    h2"
			"lead  lead"
			"photo cards"
			"photo note";
		justify-content: center;
		column-gap: 48px;
	}

	.hz-lp .hz-sec--fee2 .hz-h2   { grid-area: h2; }
	.hz-lp .hz-sec--fee2 .hz-lead { grid-area: lead; }

	/* 縦長写真は左列いっぱい。600 幅なら高さ約 759px で、右列のカード 2 枚とほぼ同じ高さになる */
	.hz-lp .hz-sec--fee2 .hz-photo {
		grid-area: photo;
		align-self: center;
		width: 100%;
		margin: 0;
	}

	.hz-lp .hz-sec--fee2 .hz-feecards { grid-area: cards; width: 100%; margin: 0; }
	.hz-lp .hz-sec--fee2 .hz-feecards + .hz-note { grid-area: note; width: 100%; }

	/* ---------- sec08: STEP カードを横 2 列 ---------- */
	/* 縦に 5 枚並ぶと間延びするので 2 列にする。
	   矢印は「カードごとに真下へ」ではなく「1 行読み終えたら次の行へ」を示すものに変える。
	   各行の右端のカードにだけ出し、位置は 2 列の中央(＝列間の余白の中心)に寄せる。
	   5 枚目はその矢印の真下に置くので、1 枚だけ余っているのではなく
	   流れの終着点として収まる。 */
	.hz-lp .hz-sec--step {
		--step-gap-x: 40px;
		--step-gap-y: 92px;
		--step-arrow-h: calc(66 * var(--u));
	}

	.hz-lp .hz-sec--step .hz-steps { width: min(100%, var(--pc-cw)); }

	.hz-lp .hz-sec--step .hz-steps:not(:has(> .wp-block-group__inner-container)),
	.hz-lp .hz-sec--step .hz-steps > .wp-block-group__inner-container {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--step-gap-x);
		row-gap: var(--step-gap-y);
	}

	/* 補足画像のある STEP01/03 に合わせて隣のカードも伸びるので、
	   余白が下にまとめて出ないよう中身を上下中央に置く */
	.hz-lp .hz-sec--step .hz-step {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 0;
	}

	.hz-lp .hz-sec--step .hz-step::after { content: none; }

	/* 行の終わり(2 枚目・4 枚目)のみ矢印。列間の余白の中心が 2 列全体の中心になる */
	.hz-lp .hz-sec--step .hz-step:nth-child(2n)::after {
		content: "";
		bottom: calc((var(--step-gap-y) + var(--step-arrow-h)) / -2);
		left: calc(var(--step-gap-x) / -2);
		translate: -50% 0;
	}

	/* 最後の 1 枚は 2 列ぶち抜きの中央。幅は 1 列ぶんより少し広げる */
	.hz-lp .hz-sec--step .hz-step--last {
		grid-column: 1 / -1;
		width: min(100%, 760px);
		margin-inline: auto;
	}

	/* ---------- sec09a: 左に写真 / 右に 2 ブロック ---------- */
	.hz-lp .hz-sec--after > .wp-block-group__inner-container,
	.hz-lp .hz-sec--after:not(:has(> .wp-block-group__inner-container)) {
		display: grid;
		grid-template-columns: minmax(0, 560px) minmax(0, 580px);
		justify-content: center;
		align-items: center;
		column-gap: 64px;
	}

	.hz-lp .hz-sec--after .hz-photo { width: 100%; }

	.hz-lp .hz-sec--after .hz-afterblocks {
		width: 100%;
		margin: 0;
	}

	.hz-lp .hz-sec--after .hz-afterblock:first-child { margin-top: 0; }

	/* ---------- sec11: チェック 4 項目を 2×2 ---------- */
	.hz-lp .hz-sec--before .hz-checks {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 48px;
		width: min(100%, 1000px);
	}

	/* ---------- フッター: 左にロゴ / 右に事務所名・住所 ---------- */
	/* これより狭いと右のテキストが詰まりすぎるので、横並びは 1024px 以上だけ */
	.hz-lp .hz-foot__card:not(:has(> .wp-block-group__inner-container)),
	.hz-lp .hz-foot__card > .wp-block-group__inner-container {
		display: grid;
		grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
		align-items: center;
		column-gap: 48px;
		text-align: left;
	}

	.hz-lp .hz-foot .hz-photo {
		grid-row: 1 / 3;
		width: 100%;
		margin: 0;
	}

	.hz-lp .hz-foot__name { margin: 0; }
}


/* ==========================================================================
   PC 仕上げ
   ========================================================================== */

@container (min-width: 1024px) {

	/* sec04: 右の飾りのぼかし円が本文にかぶらないよう、列の外側へ逃がす */
	.hz-lp .hz-sec--line .hz-features::after {
		right: -200px;
		top: 200px;
	}
}

@media (hover: hover) and (min-width: 751px) {

	/* FAQ・「コメントを見る」: 押せることが伝わるよう軽く明るく+少し沈む */
	.hz-lp .hz-faq summary,
	.hz-lp .hz-case summary {
		cursor: pointer;
		transition: filter .2s ease, translate .2s ease, box-shadow .2s ease;
	}

	.hz-lp .hz-faq summary:hover {
		filter: brightness(1.06);
		translate: 0 3px;
		box-shadow: 0 5px 0 rgba(79, 169, 122, .5);
	}

	.hz-lp .hz-case summary:hover { filter: brightness(1.08); }

	/* フォームの送信ボタン: 下に影を持つ立体ボタンなので、.hz-cta と同じく押し込む */
	.hz-lp .hz-form__submit input[type="submit"],
	.hz-lp .hz-form__submit button {
		cursor: pointer;
		transition: translate .25s ease, box-shadow .25s ease, filter .25s ease;
	}

	.hz-lp .hz-form__submit input[type="submit"]:hover,
	.hz-lp .hz-form__submit button:hover {
		translate: 0 calc(6 * var(--u));
		box-shadow: 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, .75);
		filter: brightness(1.05);
	}
}


/* ==========================================================================
   FAQ 回答モーダル — PC
   .hz-modal は --u を画面幅(100vw / 750)基準で独自に取っており、PC の広い画面では
   1px で頭打ちになる(= SP カンプの原寸 = 実機の2倍相当)ため、文字・カードとも
   SP の2倍サイズのまま表示されていた。PC 用に --u を上書きし、幅も読みやすい
   固定値にする。
   ========================================================================== */

@media (min-width: 751px) {

	/* 幅・余白・文字サイズは全部 --u 基準の計算式に揃えているので、
	   --u だけ上書きすれば比率を崩さずカード全体を拡大縮小できる */
	.hz-lp .hz-modal { --u: .85px; }

	.hz-lp .hz-modal__inner {
		max-width: 90vw;
	}

	/* カードの大きさ(--u)はそのままに、文字サイズだけ一回り控えめにする */
	.hz-lp .hz-modal__label { font-size: max(18px, calc(56 * .68px)); }
	.hz-lp .hz-modal__body,
	.hz-lp .hz-modal__body p { font-size: max(13px, calc(28 * .68px)); }
}