@charset "UTF-8";
@font-face {
	font-family: "HZ Noto Sans JP";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("./fonts/NotoSansJP-Regular.woff2") format("woff2");
}
@font-face {
	font-family: "HZ Noto Sans JP";
	font-style: normal;
	font-weight: 600 900;
	font-display: swap;
	src: url("./fonts/NotoSansJP-Bold.woff2") format("woff2");
}
@font-face {
	font-family: "HZ Noto Serif JP";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("./fonts/NotoSerifJP-Regular.woff2") format("woff2");
}
@font-face {
	font-family: "HZ Noto Serif JP";
	font-style: normal;
	font-weight: 600 900;
	font-display: swap;
	src: url("./fonts/NotoSerifJP-Bold.woff2") format("woff2");
}
/* ==========================================================================
   ホライズン法律事務所 LP
   Figma: 750px 幅 SP カンプ基準（実機 375px の 2 倍）
   Portable: classic, hybrid, and block themes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. キャンバス（PC 時の固定背景）
   -------------------------------------------------------------------------- */

.hz-lp-page {
	margin: 0 !important;
	padding: 0 !important;
	background: #fff;
}

/* #form などのアンカーリンク（href="#xxx"）クリック時にスムーススクロールさせる。
   このCSS自体 LP のページでしか読み込まれない（horizon-lp.php 側の制御）ため、
   他ページには影響しない。 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.hz-lp-page .hz-lp-canvas,
.hz-lp-canvas {
	position: relative;
	z-index: 0;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.hz-lp-canvas::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: #dbe9f7 var(--hz-bg) center / cover no-repeat;
	pointer-events: none;
}

@media (width <= 480px) {
	.hz-lp-canvas::before { display: none; }
}

/* --------------------------------------------------------------------------
   2. LP 本体 / スケーリング
   --u = カンプ上の 1px
   -------------------------------------------------------------------------- */

.hz-lp {
	--hz-lp-width: 430px;

	--hz-blue: #2992ef;
	--hz-blue-grad: linear-gradient(to left, #2c9dff, #1c70ba);
	--hz-text: #333;
	--hz-body: #555;
	--hz-note: #7d7d7d;
	--hz-gray: #d9d9d9;
	--hz-green: #4fa97a;
	--hz-green-sh: rgba(79, 169, 122, .6);
	--hz-green-tx: #479e44;
	--hz-red: #bb3b46;
	--hz-pink: #ff949f;

	--hz-serif: "HZ Noto Serif JP", "Yu Mincho", serif;
	--hz-sans: "HZ Noto Sans JP", "Yu Gothic", sans-serif;

	--hz-badge: none;
	--hz-icon-line: none;
	--hz-icon-arrow: none;
	--hz-conclusion-bg: none;

	container-type: inline-size;
	/* カンプ1px。750px を超えたら原寸で頭打ちにし、文字の肥大を防ぐ */
	--u: min(calc(100cqi / 750), 1px);
	/* PC コンテンツ幅 / 左右ガター */
	--hz-cw: 1200px;
	--hz-gut: clamp(16px, 4vw, 40px);
	/* 絵画的セクションの表示幅（PC で 1200px まで拡大） */
	--hz-art: min(100cqi, var(--hz-cw));
	/* 絵画的セクション内で使うカンプ1px（--hz-art 基準） */
	--hz-art-u: calc(var(--hz-art) / 750);

	box-sizing: border-box;
	width: 100%;
	max-width: none !important;
	margin-inline: auto;
	padding: 0;
	overflow-x: clip;
	background: #fff;
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 400;
}

.hz-lp,
.hz-lp *,
.hz-lp *::before,
.hz-lp *::after {
	box-sizing: border-box;
}

.hz-lp :where(h1, h2, h3, h4, h5, h6, p, figure, ul, ol) {
	margin-block: 0;
}

.hz-lp :where(img, svg, video) {
	max-width: 100%;
}

.hz-lp > .wp-block-group,
.hz-lp > .hz-sec {
	max-width: none;
	margin-inline: 0;
}

/* --------------------------------------------------------------------------
   3. セクション共通
   -------------------------------------------------------------------------- */

.hz-lp .hz-sec {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding-inline: calc(30 * var(--u));
	padding-block: calc(100 * var(--u));
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(52 / 28);
}

.hz-lp .hz-sec > * + * {
	margin-block-start: calc(40 * var(--u));
}

/* セクションごとのフェードイン演出。
   JS が .hz-lp--anim-ready を付けたときだけ有効にする
   （JS 無効・reduced motion のユーザーは常に最初から表示された状態のまま）。
   .hz-sec 自体（背景）は動かさず、直下の子要素（見出し・本文・画像など）
   だけを動かすことで、背景はそのままでコンテンツだけふわっと出てくるようにする。 */
.hz-lp--anim-ready .hz-sec > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease-out, transform .6s ease-out;
}

.hz-lp--anim-ready .hz-sec.is-inview > * {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.hz-lp--anim-ready .hz-sec > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* セクション左右の余白を突き抜けて全幅にする */
.hz-lp .hz-bleed {
	margin-inline: calc(-30 * var(--u));
}

/* --------------------------------------------------------------------------
   4. タイポグラフィ
   ※ 大きい数字の強調は <strong>=数字 / <em>=単位 の 2 タグで表現します。
      （Gutenberg は見出し・段落内の span を保存時に除去するため）
   -------------------------------------------------------------------------- */

.hz-lp .hz-h2 {
	margin: 0;
	color: var(--hz-blue);
	font-family: var(--hz-serif);
	font-weight: 600;
	font-size: max(14px, calc(56 * var(--u)));
	line-height: calc(80 / 56);
	letter-spacing: 0;
}

.hz-lp .hz-h2 strong {
	font-weight: 900;
	font-size: max(14px, calc(76 * var(--u)));
}

.hz-lp .hz-h2 em {
	font-style: normal;
	font-weight: 900;
	font-size: max(14px, calc(54 * var(--u)));
}

.hz-lp .hz-h2--green {
	color: var(--hz-green-tx);
}

.hz-lp .hz-lead {
	margin: 0;
	color: var(--hz-body);
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(52 / 32);
}

.hz-lp .hz-text {
	margin: 0;
	color: var(--hz-body);
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(52 / 28);
}

.hz-lp .hz-text strong {
	color: var(--hz-blue);
	font-weight: 700;
}

.hz-lp .hz-note {
	margin: 0;
	color: var(--hz-note);
	font-size: max(12px, calc(24 * var(--u)));
	line-height: calc(42 / 24);
}

.hz-lp .hz-green {
	margin: 0;
	color: var(--hz-green-tx);
	font-weight: 700;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(40 / 28);
	text-align: center;
}

/* --------------------------------------------------------------------------
   5. CTA ボタン
   カンプ実測: 690x160 / テキスト x=175 w=415 / LINEアイコン x=94 / 矢印 x=622
   -------------------------------------------------------------------------- */

.hz-lp .hz-cta {
	display: block;
	margin-block-start: calc(80 * var(--u));
}

.hz-lp .hz-cta .wp-block-button__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: calc(690 * var(--u));
	min-height: calc(160 * var(--u));
	margin-inline: auto;
	padding: 0 calc(130 * var(--u)) 0 calc(145 * var(--u));
	border: 0;
	border-radius: calc(80 * var(--u));
	background: var(--hz-green);
	box-shadow: 0 calc(12 * var(--u)) 0 var(--hz-green-sh);
	color: #fff;
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(34 * var(--u)));
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.hz-lp .hz-cta .wp-block-button__link::before,
.hz-lp .hz-cta .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	background: center / contain no-repeat;
}

.hz-lp .hz-cta .wp-block-button__link::before {
	left: calc(64 * var(--u));
	width: calc(70 * var(--u));
	height: calc(70 * var(--u));
	background-image: var(--hz-icon-line);
}

.hz-lp .hz-cta .wp-block-button__link::after {
	right: calc(21 * var(--u));
	width: calc(77 * var(--u));
	height: calc(77 * var(--u));
	background-image: var(--hz-icon-arrow);
}

/* フォーム導線（カンプ: 690x135 / テキスト x=88 w=509） */
.hz-lp .hz-cta.is-form .wp-block-button__link {
	min-height: calc(135 * var(--u));
	padding: 0 calc(120 * var(--u)) 0 calc(58 * var(--u));
	font-size: max(14px, calc(30 * var(--u)));
}

.hz-lp .hz-cta.is-form .wp-block-button__link::before {
	content: none;
}

/* ==========================================================================
   sec01 — その不安、ひとりで抱える必要はありません。
   ========================================================================== */

.hz-lp .hz-sec--worry {
	padding-block: 0;
	background: #f5faf5;
}

/* --- 写真 + 見出し ------------------------------------------------------ */

.hz-lp .hz-worryhead {
	position: relative;
	box-sizing: border-box;
	height: calc(698 * var(--u));
	margin: 0;
	overflow: hidden;
	background: #eef4ee;
}

.hz-lp .hz-worryhead .wp-block-image {
	position: absolute;
	top: calc(60 * var(--u));
	left: calc(-29 * var(--u));
	width: calc(912 * var(--u));
	height: calc(609 * var(--u));
	margin: 0;
}

.hz-lp .hz-worryhead .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hz-lp .hz-worryhead .hz-h2 {
	position: absolute;
	top: calc(34 * var(--u));
	left: calc(36 * var(--u));
	z-index: 1;
}

/* --- 中央リード --------------------------------------------------------- */

.hz-lp .hz-lead-center {
	position: relative;
	margin-block-start: calc(-109 * var(--u));
	padding-block-end: calc(48 * var(--u));
	color: var(--hz-text);
	font-family: var(--hz-serif);
	font-weight: 600;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(57 / 32);
	text-align: center;
}

.hz-lp .hz-lead-center strong {
	color: var(--hz-green-tx);
	font-weight: 700;
	font-size: max(14px, calc(38 * var(--u)));
}

/* カンプの区切り線（x=58 / w=621） */
.hz-lp .hz-lead-center::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: calc(28 * var(--u));
	width: calc(621 * var(--u));
	height: 1px;
	background: rgba(71, 158, 68, .35);
}

/* --- チェックリスト ------------------------------------------------------ */

.hz-lp .hz-checks {
	display: flex;
	flex-direction: column;
	gap: calc(20 * var(--u));
	margin-block-start: calc(48 * var(--u));
}

.hz-lp .hz-check {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: calc(122 * var(--u));
	margin: 0;
	padding: calc(18 * var(--u)) calc(30 * var(--u)) calc(18 * var(--u)) calc(122 * var(--u));
	border-radius: calc(100 * var(--u));
	background: #fff;
	box-shadow: 0 calc(5 * var(--u)) 0 var(--hz-green-sh);
}

/* 緑の丸 */
.hz-lp .hz-check::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(30 * var(--u));
	width: calc(56 * var(--u));
	height: calc(56 * var(--u));
	translate: 0 -50%;
	border-radius: 50%;
	background: var(--hz-green);
}

/* チェックマーク（CSS 描画・アセット不要） */
.hz-lp .hz-check::after {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(44 * var(--u));
	box-sizing: border-box;
	width: calc(28 * var(--u));
	height: calc(15 * var(--u));
	border-left: calc(5 * var(--u)) solid #fff;
	border-bottom: calc(5 * var(--u)) solid #fff;
	rotate: -45deg;
	translate: 0 -75%;
}

.hz-lp .hz-check__text {
	margin: 0;
	color: var(--hz-text);
	font-weight: 500;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(42 / 28);
}

/* --- 結び（ひとつでも当てはまったら…） --------------------------------- */

.hz-lp .hz-conclusion {
	position: relative;
	box-sizing: border-box;
	display: grid;
	place-content: center;
	min-height: calc(300 * var(--u));
	margin-block-start: calc(110 * var(--u));
	padding: calc(60 * var(--u)) calc(50 * var(--u));
	border: calc(3 * var(--u)) solid var(--hz-green-tx);
	border-radius: calc(30 * var(--u));
	background: #fff var(--hz-conclusion-bg) center / contain no-repeat;
}

/* チェックリストから結びへ落ちる矢印 */
.hz-lp .hz-conclusion::before {
	content: "";
	position: absolute;
	top: calc(-72 * var(--u));
	left: 50%;
	width: 0;
	height: 0;
	translate: -50% 0;
	border-inline: calc(24 * var(--u)) solid transparent;
	border-block-start: calc(50 * var(--u)) solid var(--hz-green-tx);
}

.hz-lp .hz-conclusion__text {
	margin: 0;
	color: var(--hz-text);
	font-family: var(--hz-serif);
	font-weight: 500;
	font-size: max(14px, calc(36 * var(--u)));
	line-height: calc(50 / 36);
	text-align: center;
}

.hz-lp .hz-conclusion__text strong {
	font-weight: 700;
}

/* ==========================================================================
   sec02 — 着手金も実費も ぜんぶ0円
   ========================================================================== */

.hz-lp .hz-sec--fee {
	background: #eef7ff;
}

/* --- 0円カード --------------------------------------------------------- */

.hz-lp .hz-zerocard {
	position: relative;
	box-sizing: border-box;
	margin-block-start: calc(140 * var(--u));
	padding: calc(133 * var(--u)) calc(35 * var(--u)) calc(60 * var(--u));
	border-radius: calc(30 * var(--u));
	background: #fff;
}

.hz-lp .hz-zerocard > * + * {
	margin-block-start: calc(30 * var(--u));
}

/* 0円バッジ（カンプ実測 203x209 / カード上端から -94px / 6.17deg） */
.hz-lp .hz-zerocard::before {
	content: "0円";
	position: absolute;
	top: calc(-94 * var(--u));
	left: 50%;
	display: grid;
	place-content: center;
	width: calc(203 * var(--u));
	height: calc(209 * var(--u));
	translate: -50% 0;
	rotate: 6.17deg;
	border-radius: 50%;
	background: var(--hz-badge), var(--hz-blue-grad);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 900;
	font-size: max(14px, calc(52 * var(--u)));
	line-height: 1;
	letter-spacing: -.02em;
}

.hz-lp .hz-zerocard__title {
	margin: 0;
	color: var(--hz-blue);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(42 * var(--u)));
	line-height: calc(56 / 42);
	text-align: center;
}

.hz-lp .hz-zerocard__title strong {
	font-weight: 900;
}

/* --- 手続きタイル ------------------------------------------------------- */

.hz-lp .hz-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: calc(29 * var(--u));
	justify-content: flex-start;
	margin-block-start: calc(50 * var(--u));
	padding-inline-start: calc(11 * var(--u));
}

.hz-lp .hz-tile {
	display: flex;
	flex-direction: column;
	gap: calc(21 * var(--u));
	align-items: center;
	width: calc(180 * var(--u));
	margin: 0;
}

.hz-lp .hz-tile .wp-block-image {
	display: grid;
	place-content: center;
	box-sizing: border-box;
	width: calc(180 * var(--u));
	height: calc(161 * var(--u));
	margin: 0;
	border-radius: calc(8 * var(--u));
	background: var(--hz-blue-grad);
}

.hz-lp .hz-tile .wp-block-image img {
	width: auto;
	max-width: calc(134 * var(--u));
	max-height: calc(125 * var(--u));
	object-fit: contain;
}

.hz-lp .hz-tile__label {
	margin: 0;
	color: var(--hz-text);
	font-weight: 500;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(38 / 28);
	text-align: center;
}

/* --- 費用タイミング比較 -------------------------------------------------- */

.hz-lp .hz-compare-lead {
	position: relative;
	margin-block-start: calc(90 * var(--u));
	color: var(--hz-blue);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(40 * var(--u)));
	line-height: calc(65 / 40);
	text-align: center;
}

.hz-lp .hz-compare-lead::before,
.hz-lp .hz-compare-lead::after {
	content: "";
	position: absolute;
	bottom: calc(10 * var(--u));
	width: calc(2 * var(--u));
	height: calc(86 * var(--u));
	background: currentColor;
}

.hz-lp .hz-compare-lead::before {
	left: calc(26 * var(--u));
	rotate: -29deg;
}

.hz-lp .hz-compare-lead::after {
	right: calc(26 * var(--u));
	rotate: 29deg;
}

.hz-lp .hz-compare {
	position: relative;
	box-sizing: border-box;
	margin-block-start: calc(60 * var(--u));
	padding: calc(80 * var(--u)) calc(31 * var(--u)) calc(45 * var(--u));
	border: calc(1 * var(--u)) solid var(--hz-note);
	border-radius: calc(30 * var(--u));
	background: #fff;
}

.hz-lp .hz-compare.is-ours {
	border-width: calc(8 * var(--u));
	border-color: var(--hz-blue);
}

.hz-lp .hz-compare__head {
	position: absolute;
	top: calc(-27 * var(--u));
	left: 50%;
	display: grid;
	place-content: center;
	box-sizing: border-box;
	min-width: calc(390 * var(--u));
	min-height: calc(54 * var(--u));
	translate: -50% 0;
	margin: 0;
	padding-inline: calc(40 * var(--u));
	border-radius: calc(30 * var(--u));
	background: var(--hz-gray);
	color: var(--hz-text);
	font-weight: 700;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: 1;
	text-align: center;
	white-space: nowrap;
}

.hz-lp .hz-compare.is-ours .hz-compare__head {
	background: var(--hz-blue-grad);
	color: #fff;
	font-weight: 900;
	font-size: max(14px, calc(36 * var(--u)));
}

.hz-lp .hz-compare__row {
	margin: 0;
	padding-block: calc(15 * var(--u)) calc(20 * var(--u));
	border-block-end: calc(1 * var(--u)) solid var(--hz-gray);
}

.hz-lp .hz-compare__row:last-child {
	border-block-end: 0;
}

.hz-lp .hz-compare__label {
	margin: 0;
	color: var(--hz-text);
	font-weight: 700;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(40 / 28);
}

.hz-lp .hz-compare__value {
	position: relative;
	margin: calc(14 * var(--u)) 0 0;
	padding-inline-start: calc(50 * var(--u));
	color: var(--hz-note);
	font-weight: 500;
	font-size: max(14px, calc(24 * var(--u)));
	line-height: calc(30 / 24);
}

.hz-lp .hz-compare__value::before {
	content: "";
	position: absolute;
	top: calc(14 * var(--u));
	left: calc(5 * var(--u));
	width: calc(18 * var(--u));
	height: calc(1 * var(--u));
	background: currentColor;
}

.hz-lp .hz-compare.is-ours .hz-compare__value strong {
	color: var(--hz-blue);
	font-weight: 900;
	font-size: max(14px, calc(32 * var(--u)));
}


/* ===== Frame 5: sec01 改訂（吹き出しコラージュ） ===== */
/* 旧チェックリスト・結び枠は Frame 5 で廃止 */
.hz-lp .hz-sec--worry .hz-checks,
.hz-lp .hz-sec--worry .hz-conclusion { display: none; }

/* 見出し帯：カンプ実測 x44 / y74 相対 */
.hz-lp .hz-worryhead { height: calc(693 * var(--u)); }
.hz-lp .hz-worryhead .hz-h2 { top: calc(74 * var(--u)); left: calc(44 * var(--u)); }

/* --- 吹き出しコラージュ（Group 198: x-5 y685 w829 h992） --- */
.hz-lp .hz-vos {
	position: relative;
	height: calc(992 * var(--u));
	margin: 0 calc(-30 * var(--u));
	overflow: hidden;
}

.hz-lp .hz-vo {
	position: absolute;
	box-sizing: border-box;
	margin: 0;
	background: center / 100% 100% no-repeat;
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 500;
	font-size: max(14px, calc(22 * var(--u)));
	line-height: calc(39 / 22);
	text-align: center;
}

/* 吹き出し内テキストは -12.4〜-12.7deg 傾く */
.hz-lp .hz-vo .hz-vo__text {
	position: absolute;
	display: grid;
	place-content: center;
	inset: 0;
	rotate: -12.66deg;
}

.hz-lp .hz-vo strong { color: #e36961; font-weight: 500; }

/* 1: 最初はきちんと払われて… */
.hz-lp .hz-vo--1 {
	left: calc(87 * var(--u)); top: 0;
	width: calc(489 * var(--u)); height: calc(362 * var(--u));
	background-image: url("./images/hz/sec01-bubble1.svg");
	background-size: 93.22% 100%;
	background-position: left center;
}
.hz-lp .hz-vo--1 .hz-vo__text { inset: 16.5% 20.22% 11.72% 7.74%; rotate: -12.44deg; }

/* 5: これくらいの金額で… */
.hz-lp .hz-vo--5 {
	left: calc(402 * var(--u)); top: calc(25 * var(--u));
	width: calc(487 * var(--u)); height: calc(364 * var(--u));
	background-image: url("./images/hz/sec01-bubble6.svg");
	background-size: 74.42% 79.83%;
	background-position: 0.68% -0.24%;
}
.hz-lp .hz-vo--5 .hz-vo__text { inset: 7.59% 24.67% 20.63% 3.29%; }

/* 2: 連絡しても既読のまま… */
.hz-lp .hz-vo--2 {
	left: calc(347 * var(--u)); top: calc(175 * var(--u));
	width: calc(483 * var(--u)); height: calc(361 * var(--u));
	background-image: url("./images/hz/sec01-bubble2.svg");
	background-size: 96.48% 103.5%;
	background-position: -3.26% -1.75%;
}
.hz-lp .hz-vo--2 .hz-vo__text { inset: 16.58% 10.69% 9.02% 9.67%; }

/* 4: 離婚を急いでしまい… */
.hz-lp .hz-vo--4 {
	left: calc(56 * var(--u)); top: calc(210 * var(--u));
	width: calc(411 * var(--u)); height: calc(307 * var(--u));
	background-image: url("./images/hz/sec01-bubble4.svg");
	background-size: 93.22% 100%;
	background-position: left center;
}
.hz-lp .hz-vo--4 .hz-vo__text { inset: 11.59% 16.98% 16.63% 10.97%; }

/* 3: 口約束のままで… */
.hz-lp .hz-vo--3 {
	left: calc(54 * var(--u)); top: calc(392 * var(--u));
	width: calc(440 * var(--u)); height: calc(329 * var(--u));
	background-image: url("./images/hz/sec01-bubble3.svg");
	background-size: 74.42% 79.83%;
	background-position: 0.68% -0.24%;
}
.hz-lp .hz-vo--3 .hz-vo__text { inset: 5.29% 24.8% 22.93% 3.15%; }

/* 6: 相手に強く言うのが怖くて… */
.hz-lp .hz-vo--6 {
	left: calc(455 * var(--u)); top: calc(399 * var(--u));
	width: calc(375 * var(--u)); height: calc(276 * var(--u));
	background-image: url("./images/hz/sec01-bubble5.svg");
	background-size: 87.5% 100%;
	background-position: left center;
}
.hz-lp .hz-vo--6 .hz-vo__text { inset: 19.43% 11.86% 4.86% 4.82%; rotate: -12.36deg; }

/* 人物シルエット（212x261 @ x278 y462） */
.hz-lp .hz-vo__figure {
	position: absolute;
	left: calc(283 * var(--u));
	top: calc(462 * var(--u));
	width: calc(212 * var(--u));
	height: calc(261 * var(--u));
	margin: 0;
	background: url("./images/hz/sec01-silhouette.svg") center / contain no-repeat;
}

/* --- 結びテキスト --- */
.hz-lp .hz-worry-lead {
	margin: calc(36 * var(--u)) 0 0;
	color: var(--hz-text);
	font-family: var(--hz-serif);
	font-weight: 600;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(57 / 32);
	text-align: center;
}

.hz-lp .hz-worry-lead strong { color: var(--hz-green-tx); font-weight: 700; font-size: max(14px, calc(38 * var(--u))); }

.hz-lp .hz-worry-close {
	position: relative;
	margin: calc(52 * var(--u)) 0 0;
	padding-block-start: calc(48 * var(--u));
	color: var(--hz-text);
	font-family: var(--hz-serif);
	font-weight: 600;
	font-size: max(14px, calc(34 * var(--u)));
	line-height: calc(56 / 34);
	text-align: center;
}

/* カンプの区切り線 x78 w587 */
.hz-lp .hz-worry-close::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(48 * var(--u));
	width: calc(587 * var(--u));
	height: 1px;
	background: rgba(71, 158, 68, .35);
}


/* ===== Frame 5: sec02 比較表（2カラム並列） ===== */
/* 2カラム並列：335px ×2、間 50px */
.hz-lp .hz-compares {
	display: grid;
	grid-template-columns: calc(335 * var(--u)) calc(335 * var(--u));
	justify-content: space-between;
	margin-block-start: calc(87 * var(--u));
}

.hz-lp .hz-compare {
	box-sizing: border-box;
	width: calc(335 * var(--u));
	min-height: calc(752 * var(--u));
	margin: calc(27 * var(--u)) 0 0;
	padding: calc(81 * var(--u)) calc(22 * var(--u)) calc(40 * var(--u));
	border: calc(8 * var(--u)) solid var(--hz-gray);
	border-radius: calc(30 * var(--u));
	background: #fff;
}

.hz-lp .hz-compare.is-ours { border-color: var(--hz-green-tx); }

/* 見出しピル：299x78 radius 80 */
.hz-lp .hz-compare__head {
	position: absolute;
	top: calc(-27 * var(--u));
	left: 50%;
	box-sizing: border-box;
	display: grid;
	place-content: center;
	width: calc(299 * var(--u));
	min-width: 0;
	min-height: calc(78 * var(--u));
	translate: -50% 0;
	margin: 0;
	padding: 0;
	border-radius: calc(80 * var(--u));
	background: var(--hz-gray);
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 900;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(37 / 28);
	white-space: normal;
}

.hz-lp .hz-compare.is-ours .hz-compare__head {
	background: var(--hz-green-tx);
	color: #fff;
	font-size: max(14px, calc(32 * var(--u)));
}

/* 行：区切り線は下罫（280px 幅） */
.hz-lp .hz-compare__row {
	position: relative;
	margin: 0;
	padding: 0 0 calc(25 * var(--u));
	border: 0;
	text-align: center;
}

.hz-lp .hz-compare__row + .hz-compare__row { padding-block-start: calc(25 * var(--u)); }

.hz-lp .hz-compare__row:not(:last-child)::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: calc(280 * var(--u));
	height: 1px;
	translate: -50% 0;
	background: var(--hz-gray);
}

.hz-lp .hz-compare__label {
	margin: 0;
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(26 * var(--u)));
	line-height: calc(32 / 26);
	text-align: center;
}

.hz-lp .hz-compare__label em {
	display: block;
	font-style: normal;
	font-size: max(14px, calc(24 * var(--u)));
}

.hz-lp .hz-compare__value {
	margin: calc(14 * var(--u)) 0 0;
	padding: 0;
	color: var(--hz-note);
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(14px, calc(20 * var(--u)));
	line-height: calc(32 / 20);
	text-align: center;
}

.hz-lp .hz-compare__value::before { content: none; }

.hz-lp .hz-compare__value strong {
	display: block;
	color: var(--hz-text);
	font-weight: 900;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(32 / 28);
}

/* 当事務所側は緑・0円は 32px Black */
.hz-lp .hz-compare.is-ours .hz-compare__value strong {
	color: var(--hz-green-tx);
	font-weight: 900;
	font-size: max(14px, calc(32 * var(--u)));
}


/* ===== Frame 5: sec02 実測反映（緑基調） ===== */
/* 背景は写真マスク。地色は白 */
.hz-lp .hz-sec--fee {
	background: #fff var(--hz-img-sec02-bg) center top / cover no-repeat;
}

/* 見出し：緑 #479e44 / Serif SemiBold 56 / 行間90 / 「0」76 Black・「円」54 Black */
.hz-lp .hz-sec--fee .hz-h2 {
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 600;
	font-size: max(14px, calc(56 * var(--u)));
	line-height: calc(90 / 56);
}

.hz-lp .hz-sec--fee .hz-h2 strong { font-weight: 900; font-size: max(14px, calc(76 * var(--u))); }
.hz-lp .hz-sec--fee .hz-h2 em { font-style: normal; font-weight: 900; font-size: max(14px, calc(54 * var(--u))); }

/* リード：#555 / 32px / 行間52 */
.hz-lp .hz-sec--fee .hz-lead {
	color: var(--hz-body);
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(52 / 32);
}

/* 0円カード：枠は SVG（690x864）。カード自体は地色なし */
.hz-lp .hz-zerocard {
	margin-block-start: calc(140 * var(--u));
	padding: calc(133 * var(--u)) calc(35 * var(--u)) calc(60 * var(--u));
	border-radius: 0;
	background: url("./images/hz/sec02-cardframe.svg") center bottom / 100% calc(864 * var(--u)) no-repeat;
}

/* 0円バッジ：画像実物 184x191 を 6.17deg 傾け、数字は Serif Black 80/56 */
.hz-lp .hz-zerocard::before {
	content: "";
	top: calc(-96 * var(--u));
	width: calc(184 * var(--u));
	height: calc(191 * var(--u));
	rotate: 6.17deg;
	border-radius: 0;
	background: url("./images/hz/sec02-badge.png") center / contain no-repeat;
}

.hz-lp .hz-zerocard__badge {
	position: absolute;
	top: calc(-19 * var(--u));
	left: 50%;
	z-index: 1;
	margin: 0;
	translate: -50% 0;
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 900;
	font-size: max(14px, calc(80 * var(--u)));
	line-height: calc(44 / 80);
	white-space: nowrap;
}

.hz-lp .hz-zerocard__badge em { font-style: normal; font-weight: 900; font-size: max(14px, calc(56 * var(--u))); }

/* カード見出し：緑 Serif Bold 42 / 行間52 / 「0円」は Black */
.hz-lp .hz-zerocard__title {
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(42 * var(--u)));
	line-height: calc(52 / 42);
	text-align: left;
}

.hz-lp .hz-zerocard__title strong { font-weight: 900; color: var(--hz-green-tx); }

/* 本文：#555 28/52。強調は緑 Bold */
.hz-lp .hz-sec--fee .hz-text {
	color: var(--hz-body);
	font-weight: 400;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(52 / 28);
	text-align: left;
}

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

/* タイル：地色は暗い青 #2d5e89・角丸なし。アイコンは金グラデ */
.hz-lp .hz-tiles {
	justify-content: center;
	gap: calc(50 * var(--u));
	padding: 0;
	margin-block-start: calc(60 * var(--u));
}

.hz-lp .hz-tile { width: calc(180 * var(--u)); gap: calc(25 * var(--u)); }

.hz-lp .hz-tile .wp-block-image {
	width: calc(180 * var(--u));
	height: calc(161 * var(--u));
	border-radius: 0;
	background: #2d5e89;
}

.hz-lp .hz-tile__label {
	color: var(--hz-text);
	font-weight: 500;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(38 / 28);
}

/* 費用タイミング見出しも緑へ */
.hz-lp .hz-compare-lead { color: var(--hz-green-tx); }
.hz-lp .hz-compare-lead::before,
.hz-lp .hz-compare-lead::after { background: var(--hz-green-tx); }

/* 注記・緑テキスト */
.hz-lp .hz-sec--fee .hz-green { color: var(--hz-green-tx); }


/* ===== Frame 5: sec02 Group 88（ヘッダー・背景マスク） ===== */
/* セクション地色は白。背景写真は2枚のブロブ形状でマスクされる */
.hz-lp .hz-sec--fee {
	background: #fff;
	overflow: hidden;
}

/* 上部ブロブ：902x1754.6 @ x-46 / y-7（セクション相対） */
.hz-lp .hz-sec--fee::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: calc(-46 * var(--u));
	top: calc(-7 * var(--u));
	width: calc(902 * var(--u));
	height: calc(1754.62 * var(--u));
	background: var(--hz-img-sec02-bg) center / cover no-repeat;
	-webkit-mask: url("./images/hz/sec02-mask-top.svg") 0 0 / 100% 100% no-repeat;
	mask: url("./images/hz/sec02-mask-top.svg") 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

/* 下部ブロブ：971x3238 @ x-84 / y1921 */
.hz-lp .hz-sec--fee::after {
	content: "";
	position: absolute;
	z-index: 0;
	left: calc(-84 * var(--u));
	top: calc(1921 * var(--u));
	width: calc(971 * var(--u));
	height: calc(3238 * var(--u));
	background: var(--hz-img-sec02-bg) center / cover no-repeat;
	-webkit-mask: url("./images/hz/sec02-mask-bottom.svg") 0 0 / 100% 100% no-repeat;
	mask: url("./images/hz/sec02-mask-bottom.svg") 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

/* 中身は背景より前面へ */
.hz-lp .hz-sec--fee > * { position: relative; z-index: 1; }

/* 見出し：左176px（セクション左端基準）/ top 99 */
.hz-lp .hz-sec--fee .hz-h2 {
	margin: calc(99 * var(--u)) 0 0 calc(146 * var(--u));
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 600;
	font-size: max(14px, calc(56 * var(--u)));
	line-height: calc(90 / 56);
	text-align: left;
}

/* 「ぶ」の字間16px */
.hz-lp .hz-sec--fee .hz-h2 b { font-weight: 600; letter-spacing: calc(16 * var(--u)); }

/* リード：left 31（≒セクション左端）/ 幅690 / top 507 */
.hz-lp .hz-sec--fee .hz-lead {
	margin: calc(174 * var(--u)) 0 0 calc(1 * var(--u));
	width: calc(690 * var(--u));
	color: var(--hz-body);
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(52 / 32);
	text-align: left;
}

/* セクション上下パディングは見出し側で持つ */
.hz-lp .hz-sec--fee { padding-block: 0 calc(100 * var(--u)); }


/* ===== Frame 5: sec01 実測反映（全要素） ===== */
/* セクション：白地 + 背景写真（不透明度40%） */
.hz-lp .hz-sec--worry {
	padding-block: 0;
	background: #fff;
	overflow: hidden;
}

.hz-lp .hz-sec--worry::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--hz-img-sec01-bg) center / cover no-repeat;
	opacity: .4;
	pointer-events: none;
}

.hz-lp .hz-sec--worry > * { position: relative; z-index: 1; }

/* ヘッダー：白帯466px + マスク写真912x609 @ y95 */
.hz-lp .hz-worryhead {
	position: relative;
	height: calc(693 * var(--u));
	margin: 0;
	overflow: visible;
	background: none;
}

.hz-lp .hz-worryhead::before {
	content: "";
	position: absolute;
	left: calc(8 * var(--u));
	top: 0;
	width: calc(750 * var(--u));
	height: calc(466 * var(--u));
	background: #fff;
}

.hz-lp .hz-worryhead::after {
	content: "";
	position: absolute;
	left: calc(-29 * var(--u));
	top: calc(95 * var(--u));
	width: calc(912 * var(--u));
	height: calc(609 * var(--u));
	background: var(--hz-img-sec01-photo) center / cover no-repeat;
	-webkit-mask: url("./images/hz/sec01-headmask.svg") calc(29 * var(--u)) calc(-40 * var(--u)) / calc(750 * var(--u)) calc(638 * var(--u)) no-repeat;
	mask: url("./images/hz/sec01-headmask.svg") calc(29 * var(--u)) calc(-40 * var(--u)) / calc(750 * var(--u)) calc(638 * var(--u)) no-repeat;
}

/* 見出し：緑 #479e44 Serif SemiBold 56/80 / 左44 / 上74 / 4行 */
.hz-lp .hz-worryhead .hz-h2 {
	position: absolute;
	z-index: 1;
	left: calc(44 * var(--u));
	top: calc(74 * var(--u));
	margin: 0;
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 600;
	font-size: max(14px, calc(56 * var(--u)));
	line-height: calc(80 / 56);
	white-space: nowrap;
}

/* --- 吹き出しコラージュ（Group 198: 829.3 x 992 @ x-5 y685） --- */
.hz-lp .hz-vos {
	position: relative;
	height: calc(992 * var(--u));
	margin: 0 calc(-30 * var(--u));
	overflow: visible;
}

/* 枠自体が +12.66deg 回転。テキストは逆回転で水平を保つ */
.hz-lp .hz-vo {
	position: absolute;
	box-sizing: border-box;
	margin: 0;
	rotate: 12.66deg;
	background: center / 100% 100% no-repeat;
}

.hz-lp .hz-vo__text {
	position: absolute;
	display: grid;
	place-content: center;
	margin: 0;
	rotate: -12.66deg;
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 500;
	font-size: max(14px, calc(22 * var(--u)));
	line-height: calc(39 / 22);
	text-align: center;
	white-space: nowrap;
}

.hz-lp .hz-vo__text strong { color: #e36961; font-weight: 500; }

/* 1: 最初はきちんと払われて… */
.hz-lp .hz-vo--1 {
	left: calc(51.55 * var(--u)); top: calc(44.91 * var(--u));
	width: calc(440.12 * var(--u)); height: calc(271.72 * var(--u));
	background-image: url("./images/hz/sec01-bubble1.svg");
	background-size: 93.22% 100%; background-position: left top;
}
.hz-lp .hz-vo--1 .hz-vo__text { inset: 16.5% 20.22% 11.72% 7.74%; rotate: -12.44deg; }

/* 5: これくらいの金額で… */
.hz-lp .hz-vo--5 {
	left: calc(374.81 * var(--u)); top: calc(69.54 * var(--u));
	width: calc(437.69 * var(--u)); height: calc(275.01 * var(--u));
	background-image: url("./images/hz/sec01-bubble6.svg");
	background-size: 74.42% 79.83%; background-position: 0.68% -0.24%;
}
.hz-lp .hz-vo--5 .hz-vo__text { inset: 7.59% 24.67% 20.63% 3.29%; }

/* 2: 連絡しても既読のまま… */
.hz-lp .hz-vo--2 {
	left: calc(312.34 * var(--u)); top: calc(219.62 * var(--u));
	width: calc(434.03 * var(--u)); height: calc(272.71 * var(--u));
	background-image: url("./images/hz/sec01-bubble2.svg");
	background-size: 96.48% 103.5%; background-position: -3.26% -1.75%;
}
.hz-lp .hz-vo--2 .hz-vo__text { inset: 16.58% 10.69% 9.02% 9.67%; }

/* 4: 離婚を急いでしまい… */
.hz-lp .hz-vo--4 {
	left: calc(25.94 * var(--u)); top: calc(247.58 * var(--u));
	width: calc(369.46 * var(--u)); height: calc(232.14 * var(--u));
	background-image: url("./images/hz/sec01-bubble4.svg");
	background-size: 93.22% 100%; background-position: left top;
}
.hz-lp .hz-vo--4 .hz-vo__text { inset: 11.59% 16.98% 16.63% 10.97%; }

/* 3: 口約束のままで… */
.hz-lp .hz-vo--3 {
	left: calc(22.40 * var(--u)); top: calc(432.21 * var(--u));
	width: calc(395.18 * var(--u)); height: calc(248.30 * var(--u));
	background-image: url("./images/hz/sec01-bubble3.svg");
	background-size: 74.42% 79.83%; background-position: 0.68% -0.24%;
}
.hz-lp .hz-vo--3 .hz-vo__text { inset: 5.29% 24.8% 22.93% 3.15%; }

/* 6: 相手に強く言うのが怖くて… */
.hz-lp .hz-vo--6 {
	left: calc(428.57 * var(--u)); top: calc(433.41 * var(--u));
	width: calc(337.61 * var(--u)); height: calc(206.93 * var(--u));
	background-image: url("./images/hz/sec01-bubble5.svg");
	background-size: 87.5% 100%; background-position: left top;
}
.hz-lp .hz-vo--6 .hz-vo__text { inset: 19.43% 11.86% 4.86% 4.82%; rotate: -12.36deg; }

/* 人物シルエット 212x261 @ x283 y461.93（回転なし） */
.hz-lp .hz-vo__figure {
	position: absolute;
	left: calc(283 * var(--u));
	top: calc(461.93 * var(--u));
	width: calc(212 * var(--u));
	height: calc(261 * var(--u));
	margin: 0;
	background: url("./images/hz/sec01-silhouette.svg") center / contain no-repeat;
}

/* 手描き矢印 72.77x100.02 @ x395 y434.93 / 24.34deg */
.hz-lp .hz-vos::after {
	content: "";
	position: absolute;
	left: calc(395.16 * var(--u));
	top: calc(434.93 * var(--u));
	width: calc(72.77 * var(--u));
	height: calc(100.02 * var(--u));
	rotate: 24.34deg;
	background: url("./images/hz/sec01-arrow.svg") center / contain no-repeat;
}

/* --- 結び --- */
/* 「こんな思いを、」#333 Serif Medium 36/56 ／ 2行目 Bold #e36961 */
.hz-lp .hz-worry-lead {
	margin: calc(0 * var(--u)) 0 0;
	color: var(--hz-text);
	font-family: var(--hz-serif);
	font-weight: 500;
	font-size: max(14px, calc(36 * var(--u)));
	line-height: calc(56 / 36);
	text-align: center;
}

.hz-lp .hz-worry-lead strong {
	color: #e36961;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(36 * var(--u)));
}

/* 「ひとつでも…」Serif Medium 36/56 #333 ／ 上に罫線 587px @ x78 */
.hz-lp .hz-worry-close {
	position: relative;
	margin: calc(114 * var(--u)) 0 0;
	padding-block-start: calc(18 * var(--u));
	color: var(--hz-text);
	font-family: var(--hz-serif);
	font-weight: 500;
	font-size: max(14px, calc(36 * var(--u)));
	line-height: calc(56 / 36);
	text-align: center;
}

.hz-lp .hz-worry-close::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(48 * var(--u));
	width: calc(587 * var(--u));
	height: calc(2 * var(--u));
	background: url("./images/hz/sec01-line15.svg") center / 100% 100% no-repeat;
}

/* ==========================================================================
   sec02 — Frame 9（767:202）実測
   ========================================================================== */

.hz-lp .hz-sec--fee {
	position: relative;
	padding: 0 calc(30 * var(--u)) calc(100 * var(--u));
	background: #fff;
	overflow: hidden;
}

.hz-lp .hz-sec--fee::before,
.hz-lp .hz-sec--fee::after {
	content: "";
	position: absolute;
	z-index: 0;
	background: var(--hz-img-sec02-bg) center / cover no-repeat;
	pointer-events: none;
}

.hz-lp .hz-sec--fee::before {
	left: calc(-46 * var(--u));
	top: calc(-7 * var(--u));
	width: calc(902 * var(--u));
	height: calc(1731 * var(--u));
	-webkit-mask: url("./images/hz/sec02-mask-top.svg") 0 0 / 100% 100% no-repeat;
	mask: url("./images/hz/sec02-mask-top.svg") 0 0 / 100% 100% no-repeat;
}

.hz-lp .hz-sec--fee::after {
	left: calc(-84 * var(--u));
	top: calc(1895 * var(--u));
	width: calc(971 * var(--u));
	height: calc(3532 * var(--u));
	-webkit-mask: url("./images/hz/sec02-mask-bottom.svg") 0 0 / 100% 100% no-repeat;
	mask: url("./images/hz/sec02-mask-bottom.svg") 0 0 / 100% 100% no-repeat;
}

.hz-lp .hz-sec--fee > * { position: relative; z-index: 1; }

/* 見出し @ (176,3271) 447x355 = セクション上端から 98px */
.hz-lp .hz-sec--fee .hz-h2 {
	width: calc(447 * var(--u));
	margin: calc(98 * var(--u)) 0 0 calc(146 * var(--u));
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 600;
	font-size: max(14px, calc(56 * var(--u)));
	line-height: calc(90 / 56);
	text-align: left;
}

.hz-lp .hz-sec--fee .hz-h2 strong { font-weight: 900; font-size: max(14px, calc(76 * var(--u))); }
.hz-lp .hz-sec--fee .hz-h2 em { font-style: normal; font-weight: 900; font-size: max(14px, calc(54 * var(--u))); }
.hz-lp .hz-sec--fee .hz-h2 b { font-weight: 600; letter-spacing: calc(16 * var(--u)); }

/* リード @ (31,3673) 690x257 */
.hz-lp .hz-sec--fee .hz-lead {
	width: calc(690 * var(--u));
	margin: calc(47 * var(--u)) 0 0 calc(1 * var(--u));
	color: var(--hz-body);
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(52 / 32);
	text-align: left;
}

/* --- 0円カード：690x932、枠は 690x838 @ +94 --- */
.hz-lp .hz-zerocards { margin-block-start: calc(39 * var(--u)); }

.hz-lp .hz-zerocard {
	position: relative;
	box-sizing: border-box;
	width: calc(690 * var(--u));
	margin: calc(40 * var(--u)) auto 0;
	padding: calc(227 * var(--u)) calc(35 * var(--u)) calc(60 * var(--u));
	border-radius: 0;
	background: none;
}

/* 枠は CSS で（白地・緑5px・角丸30px） */
.hz-lp .hz-zerocard::after {
	content: "";
	position: absolute;
	left: 0;
	top: calc(94 * var(--u));
	right: 0;
	bottom: 0;
	z-index: -1;
	border: calc(5 * var(--u)) solid var(--hz-green-tx);
	border-radius: calc(30 * var(--u));
	background: #fff;
}

.hz-lp .hz-zerocard > * + * { margin-block-start: calc(30 * var(--u)); }

/* 0円バッジ 203x210 @ x238、画像 184x191 を 6.17deg */
.hz-lp .hz-zerocard::before {
	content: "";
	position: absolute;
	left: calc(238 * var(--u));
	top: 0;
	width: calc(203 * var(--u));
	height: calc(210 * var(--u));
	translate: none;
	rotate: none;
	border-radius: 0;
	background: url("./images/hz/sec02-badge.png") center / calc(190 * var(--u)) auto no-repeat;
}

.hz-lp .hz-zerocard__badge {
	position: absolute;
	left: calc(293 * var(--u));
	top: calc(56 * var(--u));
	z-index: 1;
	width: calc(123 * var(--u));
	margin: 0;
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 900;
	font-size: max(14px, calc(80 * var(--u)));
	line-height: 1;
	text-align: center;
	white-space: nowrap;
}

.hz-lp .hz-zerocard__badge em { font-style: normal; font-weight: 900; font-size: max(14px, calc(56 * var(--u))); }

.hz-lp .hz-zerocard__title {
	margin: 0;
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(42 * var(--u)));
	line-height: calc(52 / 42);
	text-align: center;
}

.hz-lp .hz-zerocard__title strong { font-weight: 900; color: var(--hz-green-tx); }

.hz-lp .hz-sec--fee .hz-text {
	color: var(--hz-body);
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(52 / 28);
	text-align: left;
}

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

/* 注釈は 20px に縮小（Frame 9 で変更） */
.hz-lp .hz-sec--fee .hz-note {
	color: var(--hz-note);
	font-size: max(12px, calc(20 * var(--u)));
	line-height: calc(38 / 20);
	text-align: left;
}

/* --- タイル --- */
.hz-lp .hz-tiles {
	display: flex;
	justify-content: center;
	gap: calc(50 * var(--u));
	margin-block-start: calc(60 * var(--u));
	padding: 0;
}

.hz-lp .hz-tile {
	display: flex;
	flex-direction: column;
	gap: calc(25 * var(--u));
	align-items: center;
	width: calc(180 * var(--u));
	margin: 0;
}

.hz-lp .hz-tile .wp-block-image {
	display: grid;
	place-content: center;
	width: calc(180 * var(--u));
	height: calc(161 * var(--u));
	margin: 0;
	border-radius: 0;
	background: #2d5e89;
}

.hz-lp .hz-tile--mail .wp-block-image { background: #2d5e89 url("./images/hz/sec02-icon-mail.svg") center / calc(90 * var(--u)) auto no-repeat; }
.hz-lp .hz-tile--chotei .wp-block-image { background: #2d5e89 url("./images/hz/sec02-icon-chotei.svg") center / calc(141 * var(--u)) auto no-repeat; }

.hz-lp .hz-tile__label {
	margin: 0;
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 500;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(38 / 28);
	text-align: center;
	white-space: nowrap;
}

/* ==========================================================================
   費用比較（Frame 9 で中央ラベル型に変更）
   左：一般的な事務所（335x933）／ 右：当事務所（335x962）
   中央：ピンクのピル 290x85 を重ね、左右に罫線 201px
   ========================================================================== */

.hz-lp .hz-compares {
	position: relative;
	display: grid;
	grid-template-columns: calc(335 * var(--u)) calc(335 * var(--u));
	justify-content: space-between;
	gap: 0;
	margin-block-start: calc(87 * var(--u));
}

.hz-lp .hz-compare {
	box-sizing: border-box;
	width: calc(335 * var(--u));
	min-height: calc(933 * var(--u));
	margin: 0;
	padding: calc(120 * var(--u)) calc(22 * var(--u)) calc(40 * var(--u));
	border: 0;
	border-radius: calc(30 * var(--u));
	background: #fff;
}

.hz-lp .hz-compare.is-ours { min-height: calc(962 * var(--u)); }

/* 見出しピル：左 331x108 / 右 318x105 */
.hz-lp .hz-compare__head {
	position: absolute;
	top: calc(1 * var(--u));
	left: calc(2 * var(--u));
	box-sizing: border-box;
	display: grid;
	place-content: center;
	width: calc(331 * var(--u));
	min-width: 0;
	min-height: calc(108 * var(--u));
	translate: none;
	margin: 0;
	padding: 0;
	border-radius: calc(20 * var(--u));
	background: var(--hz-gray);
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(24 * var(--u)));
	line-height: calc(30 / 24);
	white-space: nowrap;
}

.hz-lp .hz-compare.is-ours .hz-compare__head {
	left: auto;
	right: calc(9 * var(--u));
	width: calc(318 * var(--u));
	min-height: calc(105 * var(--u));
	background: var(--hz-green-tx);
	color: #fff;
	font-size: max(14px, calc(32 * var(--u)));
}

/* 行：中央にラベル、左右に値 */
.hz-lp .hz-compare__row {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
}

.hz-lp .hz-compare__row:not(:last-child)::after { content: none; }

/* 中央の共通ラベル（ピンクのピル） */
.hz-lp .hz-comparerows {
	position: absolute;
	left: 50%;
	top: calc(84 * var(--u));
	z-index: 2;
	width: calc(684 * var(--u));
	translate: -50% 0;
	pointer-events: none;
}

.hz-lp .hz-comparelabel {
	position: relative;
	box-sizing: border-box;
	display: grid;
	place-content: center;
	width: calc(290 * var(--u));
	min-height: calc(85 * var(--u));
	margin: 0 auto;
	border: calc(3 * var(--u)) solid #fff;
	border-radius: calc(80 * var(--u));
	background: var(--hz-pink);
	color: #fff;
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(24 * var(--u)));
	line-height: calc(28 / 24);
	text-align: center;
}

.hz-lp .hz-comparelabel em { display: block; font-style: normal; font-size: max(14px, calc(18 * var(--u))); line-height: calc(28 / 18); }

/* 左右に伸びる罫線 201px */
.hz-lp .hz-comparelabel::before,
.hz-lp .hz-comparelabel::after {
	content: "";
	position: absolute;
	top: 50%;
	width: calc(201 * var(--u));
	height: calc(2 * var(--u));
	background: center / 100% 100% no-repeat;
}

.hz-lp .hz-comparelabel::before { right: calc(100% + 3 * var(--u)); background-image: url("./images/hz/sec02-line-l.svg"); }
.hz-lp .hz-comparelabel::after  { left: calc(100% + 3 * var(--u)); background-image: url("./images/hz/sec02-line-r.svg"); }

/* 左右の値 */
.hz-lp .hz-compare__value {
	position: absolute;
	top: calc(43 * var(--u));
	width: calc(282 * var(--u));
	margin: 0;
	padding: 0;
	color: var(--hz-note);
	font-family: var(--hz-sans);
	font-weight: 500;
	font-size: max(14px, calc(24 * var(--u)));
	line-height: calc(30 / 24);
	text-align: center;
}

.hz-lp .hz-compare__value::before { content: none; }
.hz-lp .hz-compare__value em { display: block; font-style: normal; font-size: max(14px, calc(20 * var(--u))); }

.hz-lp .hz-compare.is-ours .hz-compare__value {
	color: var(--hz-green-tx);
	font-family: var(--hz-sans);
	font-weight: 900;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(30 / 32);
}

.hz-lp .hz-compare.is-ours .hz-compare__value em {
	color: var(--hz-green-tx);
	font-weight: 500;
	font-size: max(14px, calc(20 * var(--u)));
}

.hz-lp .hz-compare__label { display: none; }