@charset "UTF-8";
/* ==========================================================================
   ホライズン法律事務所 LP — KV / sec03〜sec12 / footer
   hz-lp.css の後に読み込む
   実測済み: KV / sec08 / sec01 / sec02
   推定値  : sec03〜sec07 / sec09〜sec12（色・級数は要突き合わせ）
   ========================================================================== */

/* 追加トークン（実測で判明した LP のメインパレット） */
.hz-lp {
	--hz-pink: #ff949f;
	--hz-pink-2: #ff94a0;
	--hz-pink-lt: #ffdadb;
	--hz-ink: #111;
}

/* --------------------------------------------------------------------------
   共通コンポーネント
   -------------------------------------------------------------------------- */

.hz-lp .hz-photo {
	position: relative;
	box-sizing: border-box;
	margin: 0;
	overflow: hidden;
	background: #e6ebef;
}

.hz-lp .hz-photo .wp-block-image,
.hz-lp .hz-photo img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

/* 白帯見出し */
.hz-lp .hz-band {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: inline-block;
	margin: 0;
	padding: calc(20 * var(--u)) calc(48 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u));
	background: rgba(255, 255, 255, .92);
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(56 * var(--u)));
	line-height: calc(80 / 56);
}

.hz-lp .hz-pill {
	box-sizing: border-box;
	display: grid;
	place-content: center;
	min-height: calc(75 * var(--u));
	margin: 0 auto;
	padding: calc(12 * var(--u)) calc(40 * var(--u));
	border-radius: calc(50 * var(--u));
	background: var(--hz-green);
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(36 * var(--u)));
	line-height: 1.4;
	text-align: center;
}

.hz-lp .hz-card {
	position: relative;
	box-sizing: border-box;
	margin: 0;
	padding: calc(50 * var(--u)) calc(45 * var(--u));
	border-radius: calc(30 * var(--u));
	background: #fff;
}

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

/* 注意見出し（！三角） */
.hz-lp .hz-alert {
	position: relative;
	margin: 0;
	padding-inline-start: calc(96 * var(--u));
	min-height: calc(76 * var(--u));
	display: flex;
	align-items: center;
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(33 * var(--u)));
	line-height: 1.3;
}

.hz-lp .hz-alert::before {
	content: "!";
	position: absolute;
	top: 50%;
	left: 0;
	display: grid;
	place-content: center;
	width: calc(76 * var(--u));
	height: calc(76 * var(--u));
	translate: 0 -50%;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	background: var(--hz-green);
	color: #fff;
	font-weight: 900;
	font-size: max(14px, calc(30 * var(--u)));
	padding-block-start: calc(20 * var(--u));
}

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

/* 円アイコン + 見出し + 本文 */
.hz-lp .hz-feature {
	display: grid;
	grid-template-columns: calc(170 * var(--u)) 1fr;
	gap: calc(43 * var(--u));
	align-items: start;
	margin: 0;
}

.hz-lp .hz-feature .wp-block-image {
	display: grid;
	place-content: center;
	width: calc(170 * var(--u));
	height: calc(170 * var(--u));
	margin: 0;
	border-radius: 50%;
	background: #d5ece0;
	overflow: hidden;
}

.hz-lp .hz-feature .wp-block-image img { width: calc(100 * var(--u)); height: auto; }

.hz-lp .hz-feature__title {
	margin: 0;
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(40 * var(--u)));
	line-height: calc(48 / 40);
}

.hz-lp .hz-feature__body {
	margin-block-start: calc(16 * var(--u));
	color: var(--hz-body);
	font-size: max(14px, calc(26 * var(--u)));
	line-height: calc(38 / 26);
}

/* 吹き出し */
.hz-lp .hz-bubble {
	position: relative;
	box-sizing: border-box;
	margin: calc(60 * var(--u)) 0 0;
	padding: calc(40 * var(--u)) calc(50 * var(--u));
	border: calc(3 * var(--u)) solid var(--hz-green);
	border-radius: calc(40 * var(--u));
	background: #fff;
	color: var(--hz-text);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(34 * var(--u)));
	line-height: calc(47 / 34);
	text-align: center;
}

.hz-lp .hz-bubble::after {
	content: "";
	position: absolute;
	bottom: calc(-30 * var(--u));
	left: calc(120 * var(--u));
	width: 0;
	height: 0;
	border-inline: calc(20 * var(--u)) solid transparent;
	border-block-start: calc(30 * var(--u)) solid var(--hz-green);
}

/* ==========================================================================
   KV — ファーストビュー【実測反映済み】
   ========================================================================== */

.hz-lp .hz-sec--kv {
	padding: 0 0 calc(60 * var(--u));
	background: #eaf3ee;
}

.hz-lp .hz-kv__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	background: #dbe9e0;
}

.hz-lp .hz-kv__photo .wp-block-image,
.hz-lp .hz-kv__photo img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.hz-lp .hz-kv__inner {
	position: relative;
	z-index: 1;
	padding: calc(164 * var(--u)) calc(30 * var(--u)) 0;
}

/* 見出し：緑 60/90、行ごとに白帯 */
.hz-lp .hz-kv__title {
	margin: 0 0 0 calc(-30 * var(--u));
	padding: 0;
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(60 * var(--u)));
	line-height: calc(90 / 60);
}

.hz-lp .hz-kv__title strong {
	background: #fff;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	padding: calc(8 * var(--u)) calc(28 * var(--u)) calc(8 * var(--u)) calc(30 * var(--u));
	color: var(--hz-green-tx);
	font-weight: 700;
}

/* 丸バッジ（全国対応 / スマホのみで完結）※カンプは 129x128 で一部重なる */
.hz-lp .hz-kv__badges {
	display: flex;
	gap: calc(21 * var(--u));
	margin: calc(72 * var(--u)) 0 0 calc(7 * var(--u));
}

.hz-lp .hz-kv__badge {
	display: grid;
	place-content: center;
	width: calc(129 * var(--u));
	height: calc(128 * var(--u));
	margin: 0;
	border-radius: 50%;
	background: var(--hz-green);
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(26 * var(--u)));
	line-height: calc(30 / 26);
	text-align: center;
}

/* 白カード（650幅・左寄せ）＋ 実績バー */
.hz-lp .hz-kv__card {
	position: relative;
	box-sizing: border-box;
	width: calc(650 * var(--u));
	margin: calc(230 * var(--u)) 0 0 calc(-1 * var(--u));
	padding: calc(34 * var(--u)) calc(24 * var(--u)) calc(30 * var(--u));
	border-radius: calc(16 * var(--u));
	background: rgba(255, 255, 255, .95);
}

.hz-lp .hz-kv__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0;
	border-block: calc(2 * var(--u)) solid var(--hz-green);
}

.hz-lp .hz-kv__stat {
	margin: 0;
	padding: calc(14 * var(--u)) calc(10 * var(--u));
	color: var(--hz-green);
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(36 * var(--u)));
	line-height: calc(46 / 36);
	letter-spacing: calc(3 * var(--u));
	text-align: center;
}

.hz-lp .hz-kv__stat + .hz-kv__stat {
	border-inline-start: calc(2 * var(--u)) solid var(--hz-green);
	letter-spacing: 0;
}

.hz-lp .hz-kv__stat strong { font-weight: 700; font-size: max(14px, calc(42 * var(--u))); }

/* ピンクの訴求帯（690幅・カードに重ねる） */
.hz-lp .hz-kv__band {
	position: relative;
	box-sizing: border-box;
	display: grid;
	place-content: center;
	width: calc(690 * var(--u));
	min-height: calc(136 * var(--u));
	margin: calc(-30 * var(--u)) 0 0 calc(-1 * var(--u));
	border-radius: calc(80 * var(--u));
	background: var(--hz-pink);
	box-shadow: 0 calc(5 * var(--u)) 0 var(--hz-pink-lt);
	color: #fff;
	font-weight: 700;
	font-size: max(14px, calc(36 * var(--u)));
	line-height: calc(42 / 36);
	letter-spacing: calc(2 * var(--u));
	text-align: center;
}

.hz-lp .hz-kv__name {
	margin: calc(20 * var(--u)) 0 0;
	color: var(--hz-text);
	font-size: max(14px, calc(26 * var(--u)));
	text-align: right;
}

.hz-lp .hz-kv__note {
	margin: calc(30 * var(--u)) 0 0;
	color: var(--hz-text);
	font-weight: 600;
	font-size: max(14px, calc(26 * var(--u)));
	line-height: calc(36 / 26);
	text-align: center;
}

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

/* 0円 3カラム（ピンク） */
.hz-lp .hz-kv__zeros {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(0 * var(--u));
	margin-block-start: calc(40 * var(--u));
}

.hz-lp .hz-kv__zero {
	box-sizing: border-box;
	margin: 0;
	padding: 0 calc(2 * var(--u));
	text-align: center;
}

.hz-lp .hz-kv__zero > p { margin: 0; }

.hz-lp .hz-kv__zero .hz-kv__zero-cap {
	box-sizing: border-box;
	display: grid;
	place-content: center;
	min-height: calc(30 * var(--u));
	padding: calc(4 * var(--u)) calc(6 * var(--u));
	border-start-start-radius: calc(9 * var(--u));
	background: var(--hz-pink-2);
	color: #fff;
	font-weight: 700;
	font-size: max(14px, calc(18 * var(--u)));
	line-height: calc(22 / 18);
}

/* ピンクの筆あしらい上の白文字 */
.hz-lp .hz-kv__zero .hz-kv__zero-label {
	display: grid;
	place-content: center;
	width: calc(152 * var(--u));
	height: calc(110 * var(--u));
	margin: calc(24 * var(--u)) auto 0;
	rotate: -6deg;
	border-radius: 50% 50% 48% 52% / 60% 58% 42% 40%;
	background: var(--hz-pink-2);
	color: #fff;
	font-weight: 700;
	font-size: max(14px, calc(22 * var(--u)));
	line-height: calc(25 / 22);
	text-align: center;
}

.hz-lp .hz-kv__zero .hz-kv__zero-num {
	margin-block-start: calc(6 * var(--u));
	color: var(--hz-pink-2);
	font-family: var(--hz-serif);
	font-weight: 400;
	font-size: max(14px, calc(108 * var(--u)));
	line-height: calc(90 / 108);
}

.hz-lp .hz-kv__zero .hz-kv__zero-num em {
	font-style: normal;
	color: var(--hz-text);
	font-size: max(14px, calc(30 * var(--u)));
}

/* 補足行 */
.hz-lp .hz-kv__sub {
	position: relative;
	margin-block-start: calc(44 * var(--u));
	color: var(--hz-text);
	font-weight: 500;
	font-size: max(14px, calc(24 * var(--u)));
	text-align: center;
}

.hz-lp .hz-kv__sub::before,
.hz-lp .hz-kv__sub::after {
	content: "";
	position: absolute;
	top: 50%;
	width: calc(2 * var(--u));
	height: calc(36 * var(--u));
	background: currentColor;
	translate: 0 -50%;
}

.hz-lp .hz-kv__sub::before { left: 0; rotate: -20deg; }
.hz-lp .hz-kv__sub::after  { right: 0; rotate: 20deg; }

/* KV 下部 2分割 CTA（緑 / ピンク） */
.hz-lp .hz-kv__cta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: calc(22 * var(--u)) calc(-30 * var(--u)) 0;
}

.hz-lp .hz-kv__cta .wp-block-button { margin: 0; }

.hz-lp .hz-kv__cta .wp-block-button__link {
	display: grid;
	place-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: calc(104 * var(--u));
	padding: calc(16 * var(--u)) calc(10 * var(--u));
	border: 0;
	border-radius: 0;
	background: var(--hz-green);
	color: #fff;
	font-weight: 700;
	font-size: max(14px, calc(26 * var(--u)));
	line-height: calc(29 / 26);
	text-align: center;
	text-decoration: none;
}

.hz-lp .hz-kv__cta .wp-block-button__link strong {
	font-weight: 900;
	font-size: max(14px, calc(30 * var(--u)));
}

.hz-lp .hz-kv__cta .wp-block-button:last-child .wp-block-button__link {
	background: var(--hz-pink-2);
	font-size: max(14px, calc(27 * var(--u)));
}

/* ==========================================================================
   sec03 — その相談、先延ばしにしないでください。
   ========================================================================== */

.hz-lp .hz-sec--delay { background: #f3faf5; }

.hz-lp .hz-sec--delay .hz-lead {
	padding-block-end: calc(30 * var(--u));
	border-block-end: calc(1 * var(--u)) solid var(--hz-gray);
	text-align: center;
}

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

.hz-lp .hz-sec--delay .hz-photo {
	height: calc(330 * var(--u));
	margin-block-start: calc(60 * var(--u));
	border-radius: calc(20 * var(--u));
}

.hz-lp .hz-casebox {
	position: relative;
	box-sizing: border-box;
	margin-block-start: calc(120 * var(--u));
	padding: calc(90 * var(--u)) calc(48 * var(--u)) calc(50 * var(--u));
	border-radius: calc(24 * var(--u));
	background: #fff;
}

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

.hz-lp .hz-casebox .hz-pill {
	position: absolute;
	top: calc(-38 * var(--u));
	left: 50%;
	translate: -50% 0;
	width: max-content;
	max-width: calc(600 * var(--u));
}

.hz-lp .hz-table {
	width: 100%;
	margin-block-start: calc(40 * var(--u));
	border-collapse: collapse;
	font-size: max(14px, calc(24 * var(--u)));
	line-height: calc(34 / 24);
}

.hz-lp .hz-table th,
.hz-lp .hz-table td {
	box-sizing: border-box;
	padding: calc(16 * var(--u)) calc(20 * var(--u));
	border: calc(1 * var(--u)) solid var(--hz-gray);
	text-align: left;
	vertical-align: middle;
}

.hz-lp .hz-table th { background: var(--hz-green); color: #fff; font-weight: 700; }
.hz-lp .hz-table tbody th { background: #eef7f0; color: var(--hz-text); font-weight: 500; }

/* ==========================================================================
   sec04 — 相談は、LINEで。全国どこからでも。
   ========================================================================== */

.hz-lp .hz-sec--line { background: #eaf7ef; }

.hz-lp .hz-linemock {
	box-sizing: border-box;
	height: calc(600 * var(--u));
	margin-block-start: calc(50 * var(--u));
	border-radius: calc(20 * var(--u));
	background: #dfeee6;
}

.hz-lp .hz-linemock__cap {
	margin-block-start: calc(12 * var(--u));
	color: var(--hz-note);
	font-size: max(12px, calc(20 * var(--u)));
	text-align: right;
}

.hz-lp .hz-features {
	display: flex;
	flex-direction: column;
	gap: calc(70 * var(--u));
	margin-block-start: calc(80 * var(--u));
}

/* ==========================================================================
   sec05 — どんな人に相談するのか
   ========================================================================== */

.hz-lp .hz-sec--who { padding-block: 0; background: #fff; }

.hz-lp .hz-whohead__visual { margin-block: 0; }
.hz-lp .hz-whohead__visual img { display: block; width: 100%; height: auto; }

.hz-lp .hz-whohead {
	position: relative;
	box-sizing: border-box;
	min-height: calc(484 * var(--u));
	margin: 0;
	padding-block: calc(109 * var(--u));
	background: #e6ebef;
}

.hz-lp .hz-whohead .wp-block-image { position: absolute; inset: 0; margin: 0; }
.hz-lp .hz-whohead .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }

.hz-lp .hz-whohead__labels {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(6 * var(--u));
}

.hz-lp .hz-whohead__labels > p {
	box-sizing: border-box;
	margin: 0;
	padding: calc(10 * var(--u)) calc(23 * var(--u));
	background: rgba(255, 255, 255, .92);
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(40 * var(--u)));
	line-height: calc(36 / 40);
}

.hz-lp .hz-whohead__labels > p:first-child {
	background: var(--hz-green);
	color: #fff;
	font-size: max(14px, calc(28 * var(--u)));
}

.hz-lp .hz-video {
	position: relative;
	box-sizing: border-box;
	height: calc(388 * var(--u));
	margin-block-start: calc(90 * var(--u));
	border-radius: calc(16 * var(--u));
	background: #24303a;
	overflow: hidden;
}

.hz-lp .hz-video::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	translate: -35% -50%;
	border-block: calc(38 * var(--u)) solid transparent;
	border-inline-start: calc(62 * var(--u)) solid rgba(255, 255, 255, .9);
}

.hz-lp .hz-video__cap {
	position: absolute;
	top: calc(30 * var(--u));
	left: calc(36 * var(--u));
	z-index: 1;
	margin: 0;
	padding-inline-start: calc(102 * var(--u));
	color: #fff;
	font-size: max(12px, calc(26 * var(--u)));
	line-height: calc(32 / 26);
}

.hz-lp .hz-video__cap::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: calc(69 * var(--u));
	height: calc(69 * var(--u));
	border-radius: 50%;
	background: #7b8b99;
}

/* ==========================================================================
   sec06 — お客様の声
   ========================================================================== */

.hz-lp .hz-sec--voice { background: #f3faf5; }
.hz-lp .hz-sec--voice .hz-h2 { color: var(--hz-green-tx); }

.hz-lp .hz-stats {
	display: flex;
	flex-direction: column;
	gap: calc(12 * var(--u));
	margin-block-start: calc(50 * var(--u));
}

.hz-lp .hz-stat {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: calc(55 * var(--u));
	min-height: calc(157 * var(--u));
	margin: 0;
	padding: calc(20 * var(--u)) calc(46 * var(--u));
	border-radius: calc(20 * var(--u));
	background: #fff;
}

.hz-lp .hz-stat::before {
	content: "";
	flex: none;
	width: calc(70 * var(--u));
	height: calc(70 * var(--u));
	border-radius: 50%;
	background: var(--hz-green);
}

.hz-lp .hz-stat__text {
	margin: 0;
	color: var(--hz-text);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(30 * var(--u)));
	line-height: calc(48 / 30);
}

.hz-lp .hz-stat__text strong {
	color: var(--hz-green-tx);
	font-weight: 900;
	font-size: max(14px, calc(48 * var(--u)));
}

.hz-lp .hz-case {
	box-sizing: border-box;
	margin-block-start: calc(45 * var(--u));
	padding: calc(50 * var(--u)) calc(45 * var(--u));
	border-radius: calc(20 * var(--u));
	background: #fff;
}

.hz-lp .hz-case__no {
	margin: 0;
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 900;
	font-size: max(12px, calc(34 * var(--u)));
	line-height: 1;
}

.hz-lp .hz-case__amount {
	margin: calc(34 * var(--u)) 0 0;
	padding-block: calc(28 * var(--u));
	border-block: calc(1 * var(--u)) solid var(--hz-gray);
	color: var(--hz-text);
	font-size: max(14px, calc(22 * var(--u)));
	line-height: calc(30 / 22);
}

.hz-lp .hz-case__amount strong {
	display: inline-block;
	margin-inline-end: calc(16 * var(--u));
	color: var(--hz-pink-2);
	font-family: var(--hz-serif);
	font-weight: 900;
	font-size: max(14px, calc(52 * var(--u)));
	line-height: 1.2;
}

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

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

.hz-lp .hz-case details,
.hz-lp .hz-faq details { margin: calc(30 * var(--u)) 0 0; }

.hz-lp .hz-case summary {
	box-sizing: border-box;
	display: grid;
	place-content: center;
	width: calc(355 * var(--u));
	min-height: calc(57 * var(--u));
	margin-inline: auto;
	border-radius: calc(30 * var(--u));
	background: #eaf7ef;
	color: var(--hz-green-tx);
	font-weight: 700;
	font-size: max(14px, calc(26 * var(--u)));
	cursor: pointer;
	list-style: none;
}

.hz-lp .hz-case summary::-webkit-details-marker { display: none; }

/* ==========================================================================
   sec07 — 弁護士費用は「受け取れたとき」だけ
   ========================================================================== */

.hz-lp .hz-sec--fee2 { background: #fff; }
.hz-lp .hz-sec--fee2 .hz-h2 { color: var(--hz-green-tx); }

.hz-lp .hz-sec--fee2 .hz-photo {
	height: calc(467 * var(--u));
	margin-block-start: calc(50 * var(--u));
	border-start-end-radius: calc(240 * var(--u));
	border-end-end-radius: calc(240 * var(--u));
}

.hz-lp .hz-feecard {
	position: relative;
	box-sizing: border-box;
	margin-block-start: calc(110 * var(--u));
	padding: calc(90 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u));
	border-radius: calc(20 * var(--u));
	background: #f3faf5;
	text-align: center;
}

.hz-lp .hz-feecard__head {
	position: absolute;
	top: calc(-42 * var(--u));
	left: 50%;
	box-sizing: border-box;
	display: grid;
	place-content: center;
	width: calc(521 * var(--u));
	min-height: calc(84 * var(--u));
	translate: -50% 0;
	margin: 0;
	border-radius: calc(42 * var(--u));
	background: var(--hz-green);
	box-shadow: 0 calc(5 * var(--u)) 0 rgba(79, 169, 122, .35);
	color: #fff;
	font-weight: 700;
	font-size: max(14px, calc(30 * var(--u)));
	line-height: 1.3;
	text-align: center;
}

.hz-lp .hz-feecard__main {
	margin: 0;
	padding-block-end: calc(24 * var(--u));
	border-block-end: calc(1 * var(--u)) solid var(--hz-gray);
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 900;
	font-size: max(14px, calc(42 * var(--u)));
	line-height: calc(56 / 42);
}

.hz-lp .hz-feecard__main strong {
	color: var(--hz-pink-2);
	font-size: max(14px, calc(64 * var(--u)));
	font-weight: 900;
}

.hz-lp .hz-feecard__note {
	margin: calc(24 * var(--u)) 0 0;
	color: var(--hz-body);
	font-size: max(14px, calc(26 * var(--u)));
	line-height: calc(38 / 26);
}

.hz-lp .hz-split { margin-block-start: calc(90 * var(--u)); }

.hz-lp .hz-split__cap {
	box-sizing: border-box;
	display: grid;
	place-content: center;
	width: calc(392 * var(--u));
	min-height: calc(41 * var(--u));
	margin: 0 auto;
	border-radius: calc(21 * var(--u));
	background: var(--hz-green);
	color: #fff;
	font-weight: 700;
	font-size: max(12px, calc(24 * var(--u)));
	text-align: center;
}

.hz-lp .hz-split__bar {
	display: grid;
	grid-template-columns: 510fr 195fr;
	gap: calc(15 * var(--u));
	margin-block-start: calc(40 * var(--u));
}

.hz-lp .hz-split__bar > p {
	box-sizing: border-box;
	display: grid;
	place-content: center;
	min-height: calc(310 * var(--u));
	margin: 0;
	border-radius: calc(16 * var(--u));
	color: #fff;
	font-weight: 700;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(44 / 28);
	text-align: center;
}

.hz-lp .hz-split__bar > p:first-child { background: var(--hz-green); }
.hz-lp .hz-split__bar > p:last-child  { background: var(--hz-pink-2); }

.hz-lp .hz-infobar {
	box-sizing: border-box;
	display: grid;
	place-content: center;
	min-height: calc(63 * var(--u));
	margin: calc(70 * var(--u)) 0 0;
	border-radius: calc(32 * var(--u));
	background: var(--hz-green);
	color: #fff;
	font-weight: 700;
	font-size: max(12px, calc(26 * var(--u)));
	text-align: center;
}

/* ==========================================================================
   sec08 — 相談から解決まで、ひとつずつ。【実測反映済み】
   ========================================================================== */


/* ==========================================================================
   sec09a — 受け取って、終わりにしない。
   ========================================================================== */

.hz-lp .hz-sec--after { padding-block: 0 calc(100 * var(--u)); background: #fff; }

.hz-lp .hz-sec--after .hz-photo { height: calc(560 * var(--u)); margin: 0; }

.hz-lp .hz-sec--after .hz-band {
	position: absolute;
	top: calc(217 * var(--u));
	left: calc(37 * var(--u));
}

.hz-lp .hz-afterblock { margin-block-start: calc(90 * var(--u)); text-align: center; }

.hz-lp .hz-afterblock__cap,
.hz-lp .hz-afterblock__title {
	box-sizing: border-box;
	display: inline-grid;
	place-content: center;
	min-height: calc(70 * var(--u));
	margin: 0 auto;
	padding: calc(10 * var(--u)) calc(30 * var(--u));
	border-radius: calc(10 * var(--u));
	font-family: var(--hz-serif);
	font-weight: 700;
	line-height: 1.3;
}

.hz-lp .hz-afterblock__cap {
	background: var(--hz-green);
	color: #fff;
	font-size: max(14px, calc(34 * var(--u)));
}

.hz-lp .hz-afterblock__title {
	margin-block-start: calc(10 * var(--u));
	background: #eaf7ef;
	color: var(--hz-green-tx);
	font-size: max(14px, calc(38 * var(--u)));
}

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

/* ==========================================================================
   sec09b — よくあるご質問
   ========================================================================== */

.hz-lp .hz-sec--faq { background: #f3faf5; }
.hz-lp .hz-sec--faq .hz-h2 { color: var(--hz-green-tx); }

.hz-lp .hz-faq details {
	box-sizing: border-box;
	margin-block-start: calc(30 * var(--u));
	border-radius: calc(16 * var(--u));
	background: #fff;
	overflow: hidden;
}

.hz-lp .hz-faq summary {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: calc(20 * var(--u));
	min-height: calc(136 * var(--u));
	padding: calc(24 * var(--u)) calc(70 * var(--u)) calc(24 * var(--u)) calc(40 * var(--u));
	color: var(--hz-text);
	font-weight: 700;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(40 / 28);
	cursor: pointer;
	list-style: none;
}

.hz-lp .hz-faq summary::-webkit-details-marker { display: none; }

.hz-lp .hz-faq summary::before {
	content: "Q";
	flex: none;
	display: grid;
	place-content: center;
	width: calc(52 * var(--u));
	height: calc(52 * var(--u));
	border-radius: 50%;
	background: var(--hz-green);
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 900;
	font-size: max(14px, calc(28 * var(--u)));
}

.hz-lp .hz-faq details > p {
	margin: 0;
	padding: 0 calc(40 * var(--u)) calc(36 * var(--u)) calc(112 * var(--u));
	color: var(--hz-body);
	font-size: max(14px, calc(26 * var(--u)));
	line-height: calc(42 / 26);
}

/* ==========================================================================
   sec10 — ひとり親家庭を、社会の側からも支えたい。
   ※ カンプは全面写真 + オーバーレイ
   ========================================================================== */

.hz-lp .hz-sec--partner {
	padding-block: calc(150 * var(--u)) calc(100 * var(--u));
	background: #2f4f3f var(--hz-partner-bg, none) center / cover no-repeat;
	color: #fff;
}

.hz-lp .hz-sec--partner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(30, 60, 45, .55);
	pointer-events: none;
}

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

.hz-lp .hz-sec--partner .hz-h2 { color: #fff; }
.hz-lp .hz-sec--partner .hz-lead,
.hz-lp .hz-sec--partner .hz-text { color: rgba(255, 255, 255, .92); }

.hz-lp .hz-ribbon {
	position: absolute;
	top: 0;
	left: 50%;
	box-sizing: border-box;
	display: grid;
	place-content: center;
	width: calc(759 * var(--u));
	min-height: calc(90 * var(--u));
	translate: -50% 0;
	margin: 0;
	background: var(--hz-green);
	color: #fff;
	font-weight: 700;
	font-size: max(14px, calc(24 * var(--u)));
	text-align: center;
}

.hz-lp .hz-logos {
	display: flex;
	flex-direction: column;
	gap: calc(22 * var(--u));
	margin-block-start: calc(70 * var(--u));
}

.hz-lp .hz-logo {
	box-sizing: border-box;
	display: grid;
	place-content: center;
	min-height: calc(120 * var(--u));
	margin: 0;
	border-radius: calc(10 * var(--u));
	background: rgba(255, 255, 255, .92);
	color: var(--hz-note);
	font-weight: 700;
	font-size: max(14px, calc(30 * var(--u)));
	text-align: center;
}

/* ==========================================================================
   sec11 — 相談する前に、知っておいてほしいこと。
   ========================================================================== */

.hz-lp .hz-sec--before { padding-block: 0 calc(90 * var(--u)); background: #eaf7ef; }

.hz-lp .hz-sec--before .hz-photo { height: calc(390 * var(--u)); margin: 0; }

.hz-lp .hz-sec--before .hz-beforehead {
	position: absolute;
	top: calc(134 * var(--u));
	left: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(7 * var(--u));
}

.hz-lp .hz-sec--before .hz-beforehead > p {
	box-sizing: border-box;
	margin: 0;
	padding: calc(10 * var(--u)) calc(28 * var(--u));
	background: rgba(255, 255, 255, .92);
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(50 * var(--u)));
	line-height: calc(60 / 50);
}

.hz-lp .hz-quote {
	margin-block-start: calc(90 * var(--u));
	padding-block: calc(40 * var(--u));
	border-block: calc(1 * var(--u)) solid var(--hz-green);
	color: var(--hz-text);
	font-family: var(--hz-serif);
	font-weight: 500;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(58 / 32);
	text-align: center;
}

.hz-lp .hz-closing {
	margin-block-start: calc(70 * var(--u));
	color: var(--hz-text);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(54 / 32);
	text-align: center;
}

/* ==========================================================================
   sec12 — お問い合わせフォーム
   ========================================================================== */

.hz-lp .hz-sec--form { background: #fff; }
.hz-lp .hz-sec--form .hz-h2 { color: var(--hz-green-tx); }

.hz-lp .hz-form {
	box-sizing: border-box;
	margin-block-start: calc(70 * var(--u));
	padding: calc(74 * var(--u)) calc(46 * var(--u));
	border-radius: calc(20 * var(--u));
	background: #eaf7ef;
}

.hz-lp .hz-form__field + .hz-form__field { margin-block-start: calc(36 * var(--u)); }

.hz-lp .hz-form label {
	display: block;
	margin-block-end: calc(17 * var(--u));
	color: var(--hz-text);
	font-weight: 700;
	font-size: max(14px, calc(26 * var(--u)));
}

.hz-lp .hz-form input,
.hz-lp .hz-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: calc(26 * var(--u)) calc(21 * var(--u));
	border: calc(1 * var(--u)) solid var(--hz-gray);
	border-radius: calc(10 * var(--u));
	background: #fff;
	color: var(--hz-text);
	font-family: inherit;
	font-size: max(14px, calc(26 * var(--u)));
	line-height: 1.4;
}

.hz-lp .hz-form textarea { min-height: calc(493 * var(--u)); resize: vertical; }

.hz-lp .hz-form__submit {
	position: relative;
	width: 100%;
	margin-block-start: calc(56 * var(--u));
}

.hz-lp .hz-form__submit input[type="submit"],
.hz-lp .hz-form__submit button {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: calc(120 * var(--u));
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: calc(60 * var(--u));
	background: var(--hz-green);
	box-shadow: 0 calc(9 * var(--u)) 0 var(--hz-green-sh);
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: max(14px, calc(30 * var(--u)));
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	text-align: center;
}

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

/* ==========================================================================
   footer
   ========================================================================== */

.hz-lp .hz-foot {
	position: relative;
	box-sizing: border-box;
	padding: calc(80 * var(--u)) calc(30 * var(--u)) calc(90 * var(--u));
	background: #2f4f3f var(--hz-foot-bg, none) center / cover no-repeat;
	color: #fff;
	text-align: center;
}

.hz-lp .hz-foot::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(30, 60, 45, .55);
}

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

.hz-lp .hz-foot .hz-photo {
	height: calc(360 * var(--u));
	margin-block-end: calc(50 * var(--u));
	border-radius: calc(16 * var(--u));
	background: rgba(255, 255, 255, .12);
}

.hz-lp .hz-foot__name {
	margin: 0;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(12px, calc(34 * var(--u)));
	line-height: calc(48 / 34);
}

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


/* ===== 実測反映オーバーライド sec03 / sec06 / sec07 ===== */
/* ---- sec03: 枠は緑の5px破線・地色なし ---- */
.hz-lp .hz-casebox {
	border: calc(5 * var(--u)) dashed var(--hz-green);
	border-radius: calc(30 * var(--u));
	background: transparent;
	padding: calc(80 * var(--u)) calc(45 * var(--u)) calc(50 * var(--u));
}

/* ピル: 526x75 / 左上・右下だけ角丸30 */
.hz-lp .hz-casebox .hz-pill {
	top: calc(-38 * var(--u));
	width: calc(526 * var(--u));
	max-width: none;
	min-height: calc(75 * var(--u));
	padding: calc(10 * var(--u)) calc(20 * var(--u));
	border-radius: calc(30 * var(--u)) 0 calc(30 * var(--u)) 0;
	background: var(--hz-green);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(40 * var(--u)));
	line-height: calc(50 / 40);
}

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

/* アラート: 文字は赤 #bb3b46 / 三角76px */
.hz-lp .hz-alert {
	padding-inline-start: calc(102 * var(--u));
	min-height: calc(76 * var(--u));
	color: var(--hz-red);
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(32.4 / 32);
}

.hz-lp .hz-alert::before {
	width: calc(76 * var(--u));
	height: calc(76 * var(--u));
	background: var(--hz-red);
	font-size: max(14px, calc(32 * var(--u)));
	padding-block-start: calc(22 * var(--u));
}

/* 強調1行: 黒 Bold 28 中央 */
.hz-lp .hz-emph {
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(42 / 28);
	text-align: center;
}

.hz-lp .hz-casebox .hz-text { font-size: max(14px, calc(28 * var(--u))); line-height: calc(52 / 28); }
.hz-lp .hz-casebox .hz-text strong { color: var(--hz-green-tx); font-weight: 600; }

/* ---- sec06: Case カード ---- */
.hz-lp .hz-case {
	padding: calc(50 * var(--u)) calc(45 * var(--u));
	border-radius: calc(30 * var(--u));
	background: #fff;
	box-shadow: 0 calc(4 * var(--u)) calc(25 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .15);
}

.hz-lp .hz-case__no {
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(12px, calc(50 * var(--u)));
	line-height: 1;
}

.hz-lp .hz-case__result {
	margin-block-start: calc(34 * var(--u));
	padding-block: calc(24 * var(--u));
	border-block: calc(1 * var(--u)) solid var(--hz-gray);
}

.hz-lp .hz-case__label {
	margin: 0;
	color: var(--hz-note);
	font-weight: 500;
	font-size: max(14px, calc(28 * var(--u)));
}

.hz-lp .hz-case__amount {
	margin: calc(10 * var(--u)) 0 0;
	padding: 0;
	border: 0;
	color: var(--hz-note);
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(14px, calc(24 * var(--u)));
	line-height: calc(30 / 24);
}

.hz-lp .hz-case__amount strong {
	margin: 0;
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(100 * var(--u)));
	line-height: calc(96 / 100);
	letter-spacing: calc(3 * var(--u));
}

.hz-lp .hz-case__amount em {
	font-style: normal;
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(48 * var(--u)));
	margin-inline-end: calc(16 * var(--u));
}

.hz-lp .hz-case__meta {
	color: var(--hz-text);
	font-weight: 400;
	font-size: max(12px, calc(28 * var(--u)));
	line-height: calc(42 / 28);
}

.hz-lp .hz-case summary {
	width: calc(355 * var(--u));
	min-height: calc(57 * var(--u));
	border-radius: calc(30 * var(--u));
	background: var(--hz-green);
	color: #fff;
	font-weight: 500;
	font-size: max(14px, calc(28 * var(--u)));
}

/* ---- sec07: 費用カードは青グラデ地 + ピンクのピル ---- */
.hz-lp .hz-feecard {
	margin-block-start: calc(120 * var(--u));
	padding: calc(100 * var(--u)) calc(30 * var(--u)) calc(45 * var(--u));
	border-radius: 0;
	background: var(--hz-blue-grad);
	color: #fff;
}

.hz-lp .hz-feecard__head {
	top: calc(-42 * var(--u));
	width: calc(521 * var(--u));
	min-height: calc(84 * var(--u));
	border-radius: calc(30 * var(--u)) 0 calc(30 * var(--u)) 0;
	background: var(--hz-pink-2);
	box-shadow: 0 calc(5 * var(--u)) 0 rgba(255, 255, 255, .8);
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(34 * var(--u)));
}

.hz-lp .hz-feecard__main {
	padding-block-end: calc(28 * var(--u));
	border-block-end: calc(2 * var(--u)) solid rgba(255, 255, 255, .85);
	color: #fff;
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(50 * var(--u)));
	line-height: calc(70 / 50);
}

.hz-lp .hz-feecard__main strong {
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(80 * var(--u)));
	line-height: calc(90 / 80);
}

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

.hz-lp .hz-feecard__note {
	color: #fff;
	font-weight: 400;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(48 / 28);
}


/* ===== 実測反映オーバーライド sec04 / sec05 / sec09 / sec10 / sec11 / sec12 ===== */
/* ---- sec04: 3特徴（見出しは黒 Serif Medium 40 / 本文 #444 24px） ---- */
.hz-lp .hz-feature { grid-template-columns: calc(170 * var(--u)) 1fr; gap: calc(43 * var(--u)); }

.hz-lp .hz-feature .wp-block-image {
	width: calc(170 * var(--u));
	height: calc(170 * var(--u));
	background: #d5ece0;
}

.hz-lp .hz-feature__title {
	color: var(--hz-text);
	font-family: var(--hz-serif);
	font-weight: 500;
	font-size: max(14px, calc(40 * var(--u)));
	line-height: 1;
}

.hz-lp .hz-feature__body {
	margin-block-start: calc(20 * var(--u));
	color: #444;
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(14px, calc(24 * var(--u)));
	line-height: calc(38 / 24);
}

/* ---- sec05: 白帯ラベルは黒 Serif SemiBold 44。1行目のみ緑 32 ---- */
.hz-lp .hz-whohead { min-height: calc(484 * var(--u)); padding-block: calc(109 * var(--u)); }

.hz-lp .hz-whohead__labels { gap: calc(6 * var(--u)); }

.hz-lp .hz-whohead__labels > p {
	padding: calc(12 * var(--u)) calc(23 * var(--u));
	background: #fff;
	color: var(--hz-text);
	font-family: var(--hz-serif);
	font-weight: 600;
	font-size: max(14px, calc(44 * var(--u)));
	line-height: calc(32 / 44);
}

.hz-lp .hz-whohead__labels > p:first-child {
	background: #fff;
	color: var(--hz-green-tx);
	font-weight: 700;
	font-size: max(14px, calc(32 * var(--u)));
}

/* 動画カード：写真 + 上下グラデ + 角丸30 */
.hz-lp .hz-video {
	height: calc(388 * var(--u));
	border-radius: calc(30 * var(--u));
	background: #4a5560 linear-gradient(to bottom, rgba(0,0,0,.3), rgba(97,97,97,.3) 25%, rgba(255,255,255,.3));
}

.hz-lp .hz-video__cap {
	top: calc(30 * var(--u));
	left: calc(36 * var(--u));
	padding-inline-start: calc(102 * var(--u));
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(12px, calc(34 * var(--u)));
	line-height: calc(30 / 34);
}

.hz-lp .hz-video__cap::before { width: calc(69 * var(--u)); height: calc(69 * var(--u)); }

/* ---- sec09a: 見出しは「緑ベタ + 50%緑を右下にずらす」二重帯・角丸なし ---- */
.hz-lp .hz-afterblock__cap,
.hz-lp .hz-afterblock__title {
	position: relative;
	min-height: calc(70 * var(--u));
	padding: calc(9 * var(--u)) calc(24 * var(--u));
	border-radius: 0;
	background: var(--hz-green);
	box-shadow: calc(4 * var(--u)) calc(5 * var(--u)) 0 rgba(79, 169, 122, .5);
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(38 * var(--u)));
	line-height: calc(52 / 38);
}

.hz-lp .hz-afterblock__title { margin-block-start: calc(12 * var(--u)); }

.hz-lp .hz-afterblock__body {
	margin-block-start: calc(40 * var(--u));
	color: var(--hz-text);
	font-weight: 400;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(48 / 28);
}

/* ---- sec10: 全面写真（opacity .8）/ 見出し56・白 / ロゴ枠は白ベタ角丸なし ---- */
.hz-lp .hz-sec--partner {
	padding-block: calc(160 * var(--u)) calc(100 * var(--u));
	background: #3d6b52 var(--hz-partner-bg, none) center / cover no-repeat;
}

.hz-lp .hz-sec--partner::before { background: rgba(20, 50, 35, .25); }

.hz-lp .hz-sec--partner .hz-h2 {
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(56 * var(--u)));
	line-height: calc(80 / 56);
	text-align: center;
}

.hz-lp .hz-sec--partner .hz-lead,
.hz-lp .hz-sec--partner .hz-text {
	color: #fff;
	font-weight: 400;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(48 / 28);
	text-align: center;
}

.hz-lp .hz-sec--partner .hz-text { font-weight: 700; font-size: max(14px, calc(32 * var(--u))); }

.hz-lp .hz-ribbon {
	min-height: calc(122 * var(--u));
	padding-block-end: calc(32 * var(--u));
	background: var(--hz-green);
	clip-path: polygon(0 0, 100% 0, 100% 74%, 59% 74%, 50% 100%, 41% 74%, 0 74%);
	font-weight: 700;
	font-size: max(14px, calc(32 * var(--u)));
}

.hz-lp .hz-logos { gap: calc(22 * var(--u)); margin-block-start: calc(70 * var(--u)); }

.hz-lp .hz-logo {
	min-height: calc(120 * var(--u));
	border-radius: 0;
	background: #fff;
	color: var(--hz-note);
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(48 * var(--u)));
}

/* ---- sec11: 見出しは白帯 / 「相談する前に、」黒42、以降 緑56・「こと。」だけ黒 ---- */
.hz-lp .hz-sec--before .hz-beforehead { top: calc(58 * var(--u)); gap: calc(7 * var(--u)); }

.hz-lp .hz-sec--before .hz-beforehead > p {
	padding: calc(10 * var(--u)) calc(30 * var(--u));
	background: #fff;
	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--before .hz-beforehead > p:first-child {
	color: var(--hz-text);
	font-size: max(14px, calc(42 * var(--u)));
	line-height: calc(68 / 42);
}

.hz-lp .hz-sec--before .hz-beforehead > p em {
	font-style: normal;
	color: var(--hz-text);
	font-weight: 600;
}

/* ---- sec12: フォームは緑ベタ・角丸30 / ラベル白 / 送信はピンク ---- */
.hz-lp .hz-form {
	margin-block-start: calc(70 * var(--u));
	padding: calc(74 * var(--u)) calc(46 * var(--u));
	border-radius: calc(30 * var(--u));
	background: var(--hz-green);
}

.hz-lp .hz-form label {
	margin-block-end: calc(17 * var(--u));
	color: #fff;
	font-weight: 700;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(25.2 / 28);
}

.hz-lp .hz-form input,
.hz-lp .hz-form textarea {
	min-height: calc(88 * var(--u));
	padding: calc(26 * var(--u)) calc(21 * var(--u));
	border: 0;
	border-radius: calc(10 * var(--u));
	background: #fff;
	color: var(--hz-text);
	font-size: max(14px, calc(26 * var(--u)));
}

.hz-lp .hz-form input::placeholder,
.hz-lp .hz-form textarea::placeholder { color: #afafaf; }

.hz-lp .hz-form textarea { min-height: calc(493 * var(--u)); }

.hz-lp .hz-form__submit {
	width: calc(612 * var(--u));
	max-width: 100%;
	margin: calc(56 * var(--u)) auto 0;
}

.hz-lp .hz-form__submit input[type="submit"],
.hz-lp .hz-form__submit button {
	border-radius: calc(80 * var(--u));
	background: var(--hz-pink-2);
	box-shadow: 0 calc(9 * var(--u)) 0 rgba(255, 255, 255, .75);
	font-weight: 700;
	font-size: max(14px, calc(34 * var(--u)));
}

.hz-lp .hz-form__note {
	margin-block-start: calc(40 * var(--u));
	color: #fff;
	font-weight: 400;
	font-size: max(12px, calc(26 * var(--u)));
	line-height: calc(42 / 26);
	text-align: left;
}

.hz-lp .hz-form__note a {
	color: #fff;
	text-decoration: underline;
}

/* reCAPTCHA の必須表記（バッジ非表示にする代わりにこちらを表示） */
.hz-lp .hz-form__recaptcha {
	margin-block-start: calc(20 * var(--u));
	color: rgba(255, 255, 255, .85);
	font-weight: 400;
	font-size: max(11px, calc(20 * var(--u)));
	line-height: calc(34 / 20);
	text-align: left;
}

.hz-lp .hz-form__recaptcha a {
	color: rgba(255, 255, 255, .85);
	text-decoration: underline;
}

/* 上記の文言を表示する代わりに、Google reCAPTCHA の右下バッジは非表示にする */
.grecaptcha-badge {
	visibility: hidden;
}

/* 確認画面であることを示す一文（MW WP Form は確認画面のとき、
   フォームの外枠に .mw_wp_form_confirm クラスを付ける仕様を利用する） */
.hz-lp .hz-form__confirm-notice {
	display: none;
}

.hz-lp .mw_wp_form_confirm .hz-form__confirm-notice {
	display: block;
	margin-block-end: calc(36 * var(--u));
	color: #fff;
	font-weight: 700;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(44 / 28);
	text-align: center;
}

/* 確認画面の「入力し直す」ボタン。送信ボタンと違い、控えめなテキストリンク調にする */
.hz-lp .hz-form__back {
	display: none;
}

.hz-lp .mw_wp_form_confirm .hz-form__back {
	display: block;
	text-align: center;
	margin-block-start: calc(36 * var(--u));
}

/* 確認画面: ラベルと入力値の区別がつくよう、
   ラベルは小さく控えめに、値は白文字で大きく見せる。
   MW WP Form が値をどんなタグで出力しても効くよう、
   ラベル以外の中身（テキストノード含む）は .hz-form__field 側の
   継承スタイルで拾う。 */
.hz-lp .mw_wp_form_confirm .hz-form__field {
	padding-block: calc(28 * var(--u));
	border-bottom: calc(2 * var(--u)) solid rgba(255, 255, 255, .35);
	color: #fff;
	font-weight: 700;
	font-size: max(17px, calc(34 * var(--u)));
	line-height: calc(48 / 34);
}

.hz-lp .mw_wp_form_confirm .hz-form__field:first-of-type {
	padding-block-start: 0;
}

.hz-lp .mw_wp_form_confirm .hz-form__field label {
	display: block;
	width: fit-content;
	margin-block-end: calc(14 * var(--u));
	padding: calc(12 * var(--u)) calc(18 * var(--u));
	border-radius: calc(20 * var(--u));
	background: #fff;
	color: var(--hz-green-tx);
	font-weight: 700;
	font-size: max(12px, calc(22 * var(--u)));
}

/* ご相談内容は文章量が多いので、太字・大きい文字だと読みにくい。
   ここだけ通常の文字サイズ・ウェイトに戻す */
.hz-lp .mw_wp_form_confirm .hz-form__field--memo {
	font-weight: 400;
	font-size: max(14px, calc(26 * var(--u)));
	line-height: calc(44 / 26);
}

/* 完了画面: 既定だと本文の色（濃色）が緑背景に乗って見えづらいので白文字にする */
.hz-lp .mw_wp_form_complete {
	color: #fff;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(48 / 28);
}

.hz-lp .hz-form__back input[type="submit"],
.hz-lp .hz-form__back button {
	display: inline-block;
	border: 0;
	background: none;
	padding: 0;
	color: #fff;
	text-decoration: underline;
	font-family: inherit;
	font-weight: 700;
	font-size: max(13px, calc(24 * var(--u)));
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

/* MW WP Form のバリデーションエラー文言（[mwform_error] / .error クラス） */
.hz-lp .hz-form .error {
	display: block;
	margin-block-start: calc(10 * var(--u));
	color: #ffe1a8;
	font-weight: 700;
	font-size: max(12px, calc(22 * var(--u)));
	line-height: 1.5;
}


/* ===== 実測反映オーバーライド table / FAQ / footer ===== */
/* ---- sec03 時効テーブル: 3列均等 / ヘッダー緑 / 罫線 #b3b3b3 ---- */
.hz-lp .hz-table {
	margin-block-start: calc(70 * var(--u));
}

/* .hz-table は <figure> に付いているクラスなので、border-collapse や
   table-layout のような table 専用プロパティは <figure> に書いても効かない。
   実際の <table> 要素に対して明示的に当てる。 */
.hz-lp .hz-table table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.hz-lp .hz-table th,
.hz-lp .hz-table td {
	box-sizing: border-box;
	min-height: calc(80 * var(--u));
	padding-block: max(14px, calc(18 * var(--u)));
	padding-inline: max(10px, calc(13.5 * var(--u)));
	border: calc(1 * var(--u)) solid #b3b3b3;
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 500;
	font-size: max(14px, calc(24 * var(--u)));
	line-height: 1.4;
	text-align: center;
	vertical-align: middle;
}

/* 列1(方法)は短い語句、列2(将来分)は注釈の折り返しがあるぶん広めに、
   列3(過去分)は「5年」だけなので少し狭めに、と均等33%をやめて配分する。 */
.hz-lp .hz-table th:nth-child(1),
.hz-lp .hz-table td:nth-child(1) { width: 28%; }
.hz-lp .hz-table th:nth-child(2),
.hz-lp .hz-table td:nth-child(2) { width: 38%; }
.hz-lp .hz-table th:nth-child(3),
.hz-lp .hz-table td:nth-child(3) { width: 34%; }

.hz-lp .hz-table thead th {
	min-height: calc(56 * var(--u));
	border-color: #b3b3b3;
	background: var(--hz-green);
	color: #fff;
	font-weight: 700;
}

/* border-collapse で thead 側の下線と tbody 側の上線が重なって
   太く見えていたので、tbody 最初の行の上線を明示的に消して
   境界線を thead 側の 1 本だけにする */
.hz-lp .hz-table tbody tr:first-child th,
.hz-lp .hz-table tbody tr:first-child td {
	border-top: 0;
}

.hz-lp .hz-table tbody th { background: #fff; font-weight: 500; }

/* 1列目(取決めの方法: 夫婦間の合意/公正証書/調停・審判・判決)のセルだけ背景色を付ける。 */
.hz-lp .hz-table tbody td:nth-child(1) { background: rgba(227, 105, 97, .15); }

.hz-lp .hz-table td small,
.hz-lp .hz-table th small {
	display: block;
	color: var(--hz-note);
	font-size: max(12px, calc(18 * var(--u)));
	font-weight: 500;
}

/* ---- sec09b FAQ: 緑のピル（角丸80）+ 50%緑を5px下に / Q は Serif 68 / +は円 ---- */
.hz-lp .hz-faq details {
	margin-block-start: calc(30 * var(--u));
	border-radius: calc(80 * var(--u));
	background: transparent;
	overflow: visible;
}

.hz-lp .hz-faq summary {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: calc(24 * var(--u));
	min-height: calc(131 * var(--u));
	padding: calc(20 * var(--u)) calc(120 * var(--u)) calc(20 * var(--u)) calc(42 * var(--u));
	border-radius: calc(80 * var(--u));
	background: var(--hz-green);
	box-shadow: 0 calc(8 * var(--u)) 0 rgba(79, 169, 122, .5);
	color: #fff;
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(46 / 32);
	text-align: left;
}

.hz-lp .hz-faq summary::before {
	content: "Q";
	flex: none;
	display: block;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(68 * var(--u)));
	line-height: calc(42 / 68);
}

/* 右端の「＋」（開いたら「−」） */
.hz-lp .hz-faq summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: calc(24 * var(--u));
	display: grid;
	place-content: center;
	width: calc(88 * var(--u));
	height: calc(88 * var(--u));
	translate: 0 -50%;
	border-radius: 50%;
	background: #fff;
	color: var(--hz-green);
	font-weight: 700;
	font-size: max(14px, calc(60 * var(--u)));
	line-height: 1;
	padding-block-end: calc(6 * var(--u));
}

.hz-lp .hz-faq details[open] summary::after { content: "\2212"; }

.hz-lp .hz-faq details > p {
	margin: 0;
	padding: calc(30 * var(--u)) calc(46 * var(--u)) calc(36 * var(--u)) calc(46 * var(--u));
	color: var(--hz-body);
	font-size: max(14px, calc(26 * var(--u)));
	line-height: calc(42 / 26);
}

/* ---- footer: ピンクの放射グラデ（緑ではない） ---- */
.hz-lp .hz-foot {
	padding: calc(80 * var(--u)) calc(30 * var(--u)) calc(90 * var(--u));
	background: radial-gradient(ellipse 37.5% 123% at 50% 50%, #ffadaf 49%, #ff949f 100%);
	color: #fff;
	text-align: center;
}

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

.hz-lp .hz-foot .hz-photo {
	height: calc(500 * var(--u));
	margin-block-end: calc(30 * var(--u));
	border-radius: 0;
	background: transparent;
}

.hz-lp .hz-foot__name {
	font-family: var(--hz-sans);
	font-weight: 500;
	font-size: max(12px, calc(26 * var(--u)));
	line-height: calc(48 / 26);
}

.hz-lp .hz-foot__addr {
	margin-block-start: calc(18 * var(--u));
	font-family: var(--hz-sans);
	font-weight: 500;
	font-size: max(12px, calc(24 * var(--u)));
	line-height: calc(40 / 24);
}


/* ===== アセット組み込み（実測で用途特定済みのもの） ===== */
/* 相対パスなので、本番サーバーでもそのまま動作します
   （themes/unitone-child/assets/ → var(--hz-uploads)/） */
.hz-lp {
	--hz-icon-arrow: url("./images/hz/icon-arrow-green.svg");
	--hz-icon-line: url("./images/hz/icon-line_white.svg");
	--hz-partner-bg: var(--hz-img-sec11-bg);
}

/* sec04: 円背景 + アイコン（3つ目「来所不要」のアイコンのみ実測特定済み） */
.hz-lp .hz-feature .wp-block-image {
	background: url("./images/hz/sec04-circle.svg") center / contain no-repeat;
}

.hz-lp .hz-features > .hz-feature:nth-child(2) .wp-block-image {
	background:
		url("./images/hz/sec04-icon-mobile.png") center / calc(63 * var(--u)) auto no-repeat,
		url("./images/hz/sec04-circle.svg") center / contain no-repeat;
}

/* sec05: ヘッダー写真 */
.hz-lp .hz-whohead {
	background: #e6ebef var(--hz-img-sec05-head) center 20% / cover no-repeat;
}

/* sec05: 動画サムネ + 再生ボタン */
.hz-lp .hz-video {
	background:
		linear-gradient(to bottom, rgba(0,0,0,.3), rgba(97,97,97,.3) 25%, rgba(255,255,255,.3)),
		var(--hz-img-sec05-video-thumb) center / cover no-repeat;
}

.hz-lp .hz-video::after {
	width: calc(177 * var(--u));
	height: calc(108 * var(--u));
	translate: -50% -50%;
	border: 0;
	background: url("./images/hz/sec05-play.svg") center / contain no-repeat;
}

.hz-lp .hz-video__cap::before {
	background: var(--hz-img-sec05-avatar) center / cover no-repeat;
}

/* sec10: リボン（SVG 実物に差し替え・clip-path 解除） */
.hz-lp .hz-ribbon {
	min-height: calc(122 * var(--u));
	padding-block-end: calc(32 * var(--u));
	background: url("./images/hz/sec11-ribbon.svg") center top / 100% 100% no-repeat;
	clip-path: none;
}

/* sec11: 写真 */
.hz-lp .hz-sec--before .hz-photo {
	background: #e6ebef var(--hz-img-sec12-photo) center 30% / cover no-repeat;
}

/* footer: 写真 */
.hz-lp .hz-foot .hz-photo {
	background: var(--hz-img-footer-photo) center / contain no-repeat;
}

/* sec12: 送信ボタンの矢印
   （--hz-icon-arrow は .hz-cta の緑ボタン用に緑矢印で共有定義されているため、
   ここでは使わず、ピンクの矢印を個別に持たせる。
   MW WP Form は button ではなく input[type=submit] を出すことがあり、
   input 系要素には ::after が使えないため、矢印は button/input 本体ではなく
   一回り外側の .hz-form__submit に重ねて表示する） */
.hz-lp .hz-form__submit input[type="submit"],
.hz-lp .hz-form__submit button {
	position: relative;
	padding-inline-end: calc(90 * var(--u));
}

.hz-lp .hz-form__submit::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(18 * var(--u));
	width: calc(68 * var(--u));
	height: calc(68 * var(--u));
	translate: 0 -50%;
	border-radius: 50%;
	pointer-events: none;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff949f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 5l7 7-7 7'/%3E%3C/svg%3E") center / 46% no-repeat,
		#fff;
}


/* ===== アセット組み込み 第2弾: KV / sec01 / sec03 ===== */
/* ---- KV ---- */
.hz-lp .hz-sec--kv {
	background: #eaf3ee var(--hz-img-kv-bg) center top / cover no-repeat;
}

.hz-lp .hz-kv__photo {
	background: var(--hz-img-kv-oval) right calc(-98 * var(--u)) top calc(272 * var(--u)) / calc(976 * var(--u)) auto no-repeat;
}

/* 弁護士切り抜き（白カードの左に重なる / カンプ: 273x463 @ x-17 y831） */
.hz-lp .hz-kv__card::before {
	content: "";
	position: absolute;
	left: calc(-46 * var(--u));
	bottom: calc(-104 * var(--u));
	width: calc(273 * var(--u));
	height: calc(463 * var(--u));
	background: var(--hz-img-kv-lawyer) center bottom / contain no-repeat;
	pointer-events: none;
}

.hz-lp .hz-kv__card { overflow: visible; }

/* 実績バーは切り抜き写真を避けて右寄せ */
.hz-lp .hz-kv__stats { margin-inline-start: calc(54 * var(--u)); }

/* 0円3カラムのラベル背景をピンク筆の実物に */
.hz-lp .hz-kv__zero .hz-kv__zero-label {
	width: calc(152 * var(--u));
	height: calc(154 * var(--u));
	rotate: none;
	border-radius: 0;
	background: url("./images/hz/kv-brush.png") center / contain no-repeat;
	align-content: center;
	padding-block-end: calc(30 * var(--u));
}

/* ---- sec01 ---- */
.hz-lp .hz-worryhead {
	background: #eef4ee var(--hz-img-sec01-photo) center top / cover no-repeat;
}

/* ---- sec03 ---- */
.hz-lp .hz-sec--delay .hz-photo {
	background: #e6ebef var(--hz-img-sec03-photo-a) center 35% / cover no-repeat;
}

/* アラート三角を実物 SVG に */
.hz-lp .hz-alert::before {
	content: "";
	clip-path: none;
	background: url("./images/hz/sec03-alert.svg") center / contain no-repeat;
	padding: 0;
}

/* 吹き出しを実物 SVG に */
.hz-lp .hz-bubble {
	border: 0;
	border-radius: 0;
	background: url("./images/hz/sec03-bubble.svg") center / 100% 100% no-repeat;
	padding: calc(56 * var(--u)) calc(60 * var(--u)) calc(78 * var(--u));
}

.hz-lp .hz-bubble::after { content: none; }


/* ===== Frame 5: KV 改訂 ===== */
/* 実績バー：637x113 / 緑 #4fa97a / 中央に縦罫（SVG） */
.hz-lp .hz-kv__card {
	width: auto;
	margin: calc(230 * var(--u)) 0 0;
	padding: 0;
	border-radius: 0;
	background: none;
	overflow: visible;
}

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

.hz-lp .hz-kv__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: calc(637 * var(--u));
	height: calc(113 * var(--u));
	margin: 0 auto;
	border: 0;
	background: url("./images/hz/kv-statline.svg") center / 100% 100% no-repeat;
}

.hz-lp .hz-kv__stat {
	display: grid;
	place-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--hz-green);
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(36 * var(--u)));
	line-height: calc(46 / 36);
	letter-spacing: calc(3 * var(--u));
	text-align: center;
}

.hz-lp .hz-kv__stat + .hz-kv__stat {
	border: 0;
	letter-spacing: 0;
	line-height: calc(50 / 36);
}

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

/* 弁護士切り抜き＋名前バッジ（白カードは Frame 5 で廃止） */
.hz-lp .hz-kv__figure {
	position: relative;
	width: calc(276 * var(--u));
	height: calc(469 * var(--u));
	margin: calc(-20 * var(--u)) 0 calc(-300 * var(--u)) calc(-35 * var(--u));
	background: var(--hz-img-kv-lawyer) center / cover no-repeat;
	-webkit-mask: url("./images/hz/kv-cardmask.svg") 6px 47px / calc(749 * var(--u)) calc(314 * var(--u)) no-repeat;
	mask: url("./images/hz/kv-cardmask.svg") 6px 47px / calc(749 * var(--u)) calc(314 * var(--u)) no-repeat;
}

.hz-lp .hz-kv__badge-name {
	position: absolute;
	left: calc(36 * var(--u));
	bottom: calc(-8 * var(--u));
	box-sizing: border-box;
	display: grid;
	place-content: center;
	width: calc(225 * var(--u));
	height: calc(70 * var(--u));
	margin: 0;
	background: linear-gradient(270deg, rgba(18,33,54,0) 0%, rgba(39,50,64,.6) 6.73%, rgb(39,50,64) 50.96%, rgba(39,50,64,.6) 85.58%, rgba(18,33,54,0) 100%);
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 500;
	font-size: max(14px, calc(18 * var(--u)));
	line-height: calc(27 / 18);
	text-align: center;
	text-shadow: 0 calc(4 * var(--u)) calc(20 * var(--u)) #273240;
}

.hz-lp .hz-kv__badge-name strong { font-weight: 500; font-size: max(14px, calc(20 * var(--u))); line-height: calc(28 / 20); }

/* ピンク帯：690x120 radius 80 / 影 5px下 / テキストは右寄り中央 x486 */
.hz-lp .hz-kv__band {
	width: calc(690 * var(--u));
	min-height: calc(120 * var(--u));
	margin: calc(-118 * var(--u)) 0 0;
	padding-inline-start: calc(222 * var(--u));
	border-radius: calc(80 * var(--u));
	background: var(--hz-pink);
	box-shadow: 0 calc(5 * var(--u)) 0 var(--hz-pink-lt);
	font-size: max(14px, calc(34 * var(--u)));
	line-height: calc(42 / 34);
	letter-spacing: calc(2 * var(--u));
}

/* 補足文：強調が緑から赤系 #e36961 に変更 */
.hz-lp .hz-kv__note {
	margin-block-start: calc(78 * var(--u));
	color: var(--hz-text);
	font-weight: 600;
	font-size: max(14px, calc(26 * var(--u)));
	line-height: calc(36 / 26);
	text-align: center;
}

.hz-lp .hz-kv__note strong { color: #e36961; font-weight: 600; }

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

/* CTA：360x104 の角丸ピル2つを両端揃え（12px 内側） */
.hz-lp .hz-kv__cta {
	display: flex;
	justify-content: space-between;
	gap: 0;
	margin: calc(22 * var(--u)) calc(-18 * var(--u)) 0;
}

.hz-lp .hz-kv__cta .wp-block-button__link {
	width: calc(360 * var(--u));
	min-height: calc(104 * var(--u));
	padding: calc(46 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u));
	border-radius: calc(80 * var(--u));
	background: var(--hz-green);
	font-size: max(14px, calc(24 * var(--u)));
	line-height: calc(28.8 / 24);
}

.hz-lp .hz-kv__cta .wp-block-button__link strong { font-weight: 900; font-size: max(14px, calc(30 * var(--u))); }

.hz-lp .hz-kv__cta .wp-block-button:last-child .wp-block-button__link {
	background: var(--hz-pink-2);
	font-size: max(14px, calc(24 * var(--u)));
}


/* ===== Frame 5: sec03 時効図解 ===== */
.hz-lp .hz-timeline { margin-block-start: calc(48 * var(--u)); }

.hz-lp .hz-timeline__bar {
	display: grid;
	margin: 0;
}

/* 2分割（離婚〜調停申立て前 / 調停申立て後） */
.hz-lp .hz-timeline--2 .hz-timeline__bar { grid-template-columns: calc(300 * var(--u)) calc(300 * var(--u)); }
/* 3分割（5年前分 / 3年前分 / 直近の分） */
.hz-lp .hz-timeline--3 .hz-timeline__bar { grid-template-columns: repeat(3, calc(200 * var(--u))); }

.hz-lp .hz-timeline__bar > p {
	box-sizing: border-box;
	display: grid;
	place-content: center;
	min-height: calc(75 * var(--u));
	margin: 0;
	color: #fff;
	font-family: var(--hz-sans);
	font-weight: 500;
	font-size: max(14px, calc(24 * var(--u)));
	line-height: calc(52 / 24);
	text-align: center;
}

.hz-lp .hz-timeline__bar > p:first-child {
	border-start-start-radius: calc(10 * var(--u));
	border-end-start-radius: calc(10 * var(--u));
	background: var(--hz-red);
}

.hz-lp .hz-timeline__bar > p:last-child {
	border-start-end-radius: calc(10 * var(--u));
	border-end-end-radius: calc(10 * var(--u));
	background: var(--hz-green);
	font-weight: 700;
}

/* 3分割の中間は黄色60% + 黒文字 */
.hz-lp .hz-timeline--3 .hz-timeline__bar > p:nth-child(2) {
	background: rgba(235, 230, 90, .6);
	color: #000;
}

/* 矢印（SVG 実物） */
.hz-lp .hz-timeline__arrows {
	display: grid;
	margin: calc(18 * var(--u)) 0 0;
	height: calc(12 * var(--u));
}

.hz-lp .hz-timeline--2 .hz-timeline__arrows {
	grid-template-columns: calc(296 * var(--u)) calc(296 * var(--u));
}

.hz-lp .hz-timeline--2 .hz-timeline__arrows::before,
.hz-lp .hz-timeline--2 .hz-timeline__arrows::after {
	content: "";
	background: center / 100% auto no-repeat;
}

.hz-lp .hz-timeline--2 .hz-timeline__arrows::before { background-image: url("./images/hz/sec03-arrow-red.svg"); }
.hz-lp .hz-timeline--2 .hz-timeline__arrows::after  { background-image: url("./images/hz/sec03-arrow-green.svg"); }

.hz-lp .hz-timeline--3 .hz-timeline__arrows {
	background: url("./images/hz/sec03-arrow-full.svg") center / 100% auto no-repeat;
}

/* 矢印下のラベル */
.hz-lp .hz-timeline__legend {
	display: flex;
	justify-content: space-between;
	margin: calc(4 * var(--u)) 0 0;
}

.hz-lp .hz-timeline__legend p {
	margin: 0;
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(24 * var(--u)));
	line-height: calc(52 / 24);
}

.hz-lp .hz-timeline__legend p:first-child { color: var(--hz-red); }
.hz-lp .hz-timeline__legend p:last-child  { color: var(--hz-green); }

/* 2分割はラベルが内寄り（x80 / x387） */
.hz-lp .hz-timeline--2 .hz-timeline__legend { justify-content: flex-start; gap: calc(163 * var(--u)); padding-inline-start: calc(80 * var(--u)); }



/* ===== Frame 5: sec10 ロゴ横3列 / sec12 LINE導線 ===== */
/* sec10: 210x91 の横3列 */
.hz-lp .hz-logos {
	display: grid;
	grid-template-columns: repeat(3, calc(210 * var(--u)));
	justify-content: space-between;
	gap: 0;
	margin-block-start: calc(32 * var(--u));
}

.hz-lp .hz-logo {
	min-height: calc(91 * var(--u));
	border-radius: 0;
	background: #fff;
	color: var(--hz-note);
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(32 * var(--u)));
}

/* sec10 見出しは上下罫のみ（リボンではない） */
.hz-lp .hz-ribbon {
	position: static;
	width: auto;
	min-height: auto;
	translate: none;
	margin: 0 0 calc(30 * var(--u));
	padding-block: calc(14 * var(--u));
	border-block: 1px solid rgba(255, 255, 255, .8);
	background: none;
	clip-path: none;
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(40 * var(--u)));
	line-height: calc(56 / 40);
}

/* sec12: LINE 導線ボタン（137px高・ピンク・上に補足文） */
.hz-lp .hz-cta.is-line {
	margin-block-start: calc(50 * var(--u));
}

.hz-lp .hz-cta.is-line .wp-block-button__link {
	width: calc(690 * var(--u));
	min-height: calc(137 * var(--u));
	padding: 0 calc(120 * var(--u)) 0 calc(140 * var(--u));
	border-radius: calc(80 * var(--u));
	background: var(--hz-green);
	box-shadow: 0 calc(12 * var(--u)) 0 var(--hz-green-sh);
	font-size: max(14px, calc(30 * var(--u)));
}

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


/* ===== Frame 5: sec07 / sec08 実測反映 ===== */
/* ---------- sec07: 費用カード ---------- */
/* ヘッダーピル：ピンク #ff94a0 / 左上・右下だけ角丸30 / 白80%の影を5px下 / Serif Black 38 */
.hz-lp .hz-feecard {
	margin-block-start: calc(120 * var(--u));
	padding: calc(98 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u));
	border-radius: 0;
	background: var(--hz-blue-grad);
	color: #fff;
}

.hz-lp .hz-feecard__head {
	top: calc(-42 * var(--u));
	width: calc(595 * var(--u));
	min-height: calc(84 * var(--u));
	border-radius: calc(30 * var(--u)) 0 calc(30 * var(--u)) 0;
	background: var(--hz-pink-2);
	box-shadow: 0 calc(5 * var(--u)) 0 rgba(255, 255, 255, .8);
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 900;
	font-size: max(14px, calc(38 * var(--u)));
	line-height: 1.2;
	white-space: nowrap;
}

/* 2枚目（受け取れたとき）は 521px 幅 */
.hz-lp .hz-feecard + .hz-feecard .hz-feecard__head { width: calc(521 * var(--u)); }

/* 「ご負担は 0円」: 本文60 / 数字 Serif 120 / 単位 Serif 60
   下線は金グラデ(C9A24A → C39742 → FFE4A4)。片側だけの border に
   グラデーションを付けたいので、border-bottom + border-image を使う。 */
.hz-lp .hz-feecard__main {
	display: inline-block;
	margin: 0;
	margin-block-start: calc(-30 * var(--u));
	padding: 0;
	padding-block-end: calc(8 * var(--u));
	border: 0;
	border-bottom: calc(4 * var(--u)) solid transparent;
	border-image: linear-gradient(90deg, #c9a24a 0%, #c39742 50%, #ffe4a4 100%) 1;
	color: #fff;
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(60 * var(--u)));
	line-height: calc(80 / 60);
}

.hz-lp .hz-feecard__main strong {
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(120 * var(--u)));
}

.hz-lp .hz-feecard__main em {
	font-style: normal;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(60 * var(--u)));
}

/* 2枚目は「成功報酬のみ / 回収額の 15〜30%(税別)」の多段組み。
   下線(金グラデ)は共通の .hz-feecard__main のものをそのまま使う。 */
.hz-lp .hz-feecard--rate .hz-feecard__main {
	font-size: max(14px, calc(50 * var(--u)));
	line-height: calc(70 / 50);
}

.hz-lp .hz-feecard--rate .hz-feecard__main b {
	font-weight: 700;
	font-size: max(14px, calc(40 * var(--u)));
}

.hz-lp .hz-feecard--rate .hz-feecard__main strong {
	font-size: max(14px, calc(80 * var(--u)));
	line-height: calc(100 / 80);
}

.hz-lp .hz-feecard--rate .hz-feecard__main em {
	font-size: max(14px, calc(50 * var(--u)));
	letter-spacing: calc(10 * var(--u));
}

.hz-lp .hz-feecard--rate .hz-feecard__main i {
	font-style: normal;
	font-weight: 500;
	font-size: max(14px, calc(28 * var(--u)));
}

.hz-lp .hz-feecard__note {
	margin: calc(26 * var(--u)) 0 0;
	color: #fff;
	font-weight: 400;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(48 / 28);
}

/* カード外の注記（黒文字・20px） */
/* カードの外(2枚のカードの直後)に置く注記 */
.hz-lp .hz-sec--fee2 .hz-feecards + .hz-note {
	margin-block-start: calc(24 * var(--u));
	color: var(--hz-text);
	font-size: max(12px, calc(20 * var(--u)));
	line-height: calc(30 / 20);
	text-align: center;
}


/* ===== Frame 5: sec03 実測反映（全要素） ===== */
.hz-lp .hz-sec--delay { background: #fff; }

/* 見出し：緑 Serif */
.hz-lp .hz-sec--delay .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(80 / 56);
}

/* リード：#333 32/52 中央。最終行のみ赤 #e36961 Bold。下に罫線569px @x70 */
.hz-lp .hz-sec--delay .hz-lead {
	position: relative;
	width: calc(690 * var(--u));
	margin-inline: auto;
	padding-block-end: calc(48 * var(--u));
	border: 0;
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(52 / 32);
	text-align: center;
}

.hz-lp .hz-sec--delay .hz-lead strong {
	color: #e36961;
	font-weight: 700;
}

.hz-lp .hz-sec--delay .hz-lead::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: calc(40 * var(--u));
	width: calc(569 * var(--u));
	height: calc(2 * var(--u));
	background: url("./images/hz/sec03-line5.svg") center / 100% 100% no-repeat;
}

/* カード枠：緑5px破線・角丸30・地色なし */
.hz-lp .hz-casebox {
	margin-block-start: calc(120 * var(--u));
	padding: calc(90 * var(--u)) calc(45 * var(--u)) calc(55 * var(--u));
	border: calc(5 * var(--u)) dashed var(--hz-green);
	border-radius: calc(30 * var(--u));
	background: transparent;
}

/* ピル：526x75 / 左上・右下だけ角丸30 / Serif Bold 40・「ない」は Black 46 */
.hz-lp .hz-casebox .hz-pill {
	top: calc(-38 * var(--u));
	width: calc(526 * var(--u));
	max-width: none;
	min-height: calc(75 * var(--u));
	padding: 0;
	border-radius: calc(30 * var(--u)) 0 calc(30 * var(--u)) 0;
	background: var(--hz-green);
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(40 * var(--u)));
	line-height: 1;
	white-space: nowrap;
}

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

/* 注意見出し：三角SVG 76px + 赤 #bb3b46 Bold 32 */
.hz-lp .hz-alert {
	justify-content: flex-start;
	padding-inline-start: calc(86 * var(--u));
	min-height: calc(76 * var(--u));
	color: var(--hz-red);
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(32.4 / 32);
}

.hz-lp .hz-alert::before {
	content: "";
	width: calc(76 * var(--u));
	height: calc(76 * var(--u));
	clip-path: none;
	padding: 0;
	background: url("./images/hz/sec03-alert.svg") center / contain no-repeat;
}

/* 強調：黒 #333 Bold 28。行間は詰め気味（20px） */
.hz-lp .hz-emph {
	margin-block-start: calc(36 * var(--u));
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(48 / 28);
	text-align: center;
}

/* 本文：#333 28/52。末尾の強調は緑 SemiBold */
.hz-lp .hz-casebox .hz-text {
	color: var(--hz-text);
	font-weight: 400;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(52 / 28);
	text-align: left;
}

/* 図解(タイムライン)のすぐ下の本文は、詰まって見えないよう間隔を広げる。 */
.hz-lp .hz-casebox .hz-timeline + .hz-text { margin-block-start: calc(60 * var(--u)); }

.hz-lp .hz-casebox .hz-text strong { color: var(--hz-green-tx); font-weight: 600; }

/* 吹き出し：SVG実物 + 切り抜き写真254x431 */
/* sec03-fukidashi.png は吹き出し+テキスト+弁護士写真を1枚に合成済みの
   画像なので、以前のような SVG吹き出し背景+テキスト+マスク済み写真の
   3層構成ではなく、単純な <img> として表示する。 */
.hz-lp .hz-bubble {
	display: block;
	/* 祖先のパディング量(実測で60u)に依存せず確実にページ幅いっぱいにする。
	   100% = 親の幅、100cqi = ページ(.hz-lp)の幅。左右の内側余白は対称なので、
	   その差の半分ずつを負のマージンにすると、ちょうどページの端から端まで広がる。 */
	margin: 0 calc((100% - 100cqi) / 2);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.hz-lp .hz-bubble img {
	display: block;
	width: 100%;
	height: auto;
}

/* 弁護士が右からスライドイン → 吹き出しがしっぽからポンと出る(SP / PC 共通)。
   画像は吹き出しと弁護士が 1 枚に合成されているので、同じ画像を 2 層に切り分ける。
   - <img>   : 吹き出し(折れ線より左)
   - ::after : 弁護士 + 右のぼかし(折れ線より右)
   sec03-fukidashi.png 750×432 の実測:
   吹き出し右端 max x=496 / しっぽ先 (440, 305)、弁護士左端 頭 x≈515 / 体 x≈455
   折れ線 = x505(y0〜245) → x448(y300) → x448(〜y432)
   PC は hz-lp-pc.css で画像・折れ線・しっぽ位置を上書きする。
   ::after には旧デザインの「しっぽの三角」(width/height:0 + border)が残っているので打ち消す。
   演出は hz-lp.js の setupBubbleAnim() が .hz-bubble--anim / .is-inview を付けたときだけ。 */
.hz-lp .hz-sec--delay .hz-bubble {
	--bubble-clip: polygon(0 0, 67.333% 0, 67.333% 56.71%, 59.733% 69.44%, 59.733% 100%, 0 100%);
	--lawyer-clip: polygon(67.333% 0, 100% 0, 100% 100%, 59.733% 100%, 59.733% 69.44%, 67.333% 56.71%);
	--bubble-origin: 58.67% 70.6%;
	--lawyer-img: url("./images/hz/sec03-fukidashi.png");
	--lawyer-shift: 16%;
	position: relative;
}

.hz-lp .hz-sec--delay .hz-bubble img {
	clip-path: var(--bubble-clip);
	transform-origin: var(--bubble-origin);
}

.hz-lp .hz-sec--delay .hz-bubble::after {
	content: "";
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	margin: 0;
	border: 0;
	rotate: none;
	translate: none;
	background: var(--lawyer-img) center / 100% 100% no-repeat;
	clip-path: var(--lawyer-clip);
	pointer-events: none;
}

.hz-lp .hz-sec--delay .hz-bubble--anim:not(.is-inview) img,
.hz-lp .hz-sec--delay .hz-bubble--anim:not(.is-inview)::after { opacity: 0; }

.hz-lp .hz-sec--delay .hz-bubble--anim.is-inview::after {
	animation: hz-lawyer-in .9s cubic-bezier(.22, .61, .36, 1) .1s backwards;
}

.hz-lp .hz-sec--delay .hz-bubble--anim.is-inview img {
	animation: hz-bubble-pop .5s cubic-bezier(.34, 1.56, .64, 1) .85s backwards;
}

@keyframes hz-lawyer-in {
	from { opacity: 0; transform: translateX(var(--lawyer-shift, 16%)); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes hz-bubble-pop {
	from { opacity: 0; transform: scale(.6); }
	to   { opacity: 1; transform: scale(1); }
}


/* ===== Frame 5: sec03 ピル2行 / sec04 実測反映 ===== */
/* sec03: 2枚目のピル。
   ※このルールは削除済み。理由: `.hz-casebox:nth-of-type(2) .hz-pill` という
   セレクタの詳細度(0,4,0)が、後方の Frame 9 実測ルール `.hz-casebox .hz-pill`
   (0,3,0, top:0 を指定)より高いため、ここにあった top:-75u が記述順を無視して
   2枚目のピルにだけ効いてしまい、上にずれて浮いて見えるバグの原因になっていた。
   width / min-height / line-height は下の .hz-pill--2(単純セレクタ版)に
   同じ値で残っているのでここでは不要。 */

/* ==========================================================================
   sec04 — 相談は、LINEで。全国どこからでも。
   ========================================================================== */

.hz-lp .hz-sec--line {
	padding-block: 0 calc(100 * var(--u));
	background: #fff;
	overflow: hidden;
}

/* 見出し帯：614x205 の赤い放射グラデ／白 Serif Bold 56/80 */
.hz-lp .hz-sec--line .hz-band {
	display: block;
	box-sizing: border-box;
	width: calc(614 * var(--u));
	min-height: calc(205 * var(--u));
	margin: 0 0 0 calc(-30 * var(--u));
	padding: calc(17 * var(--u)) calc(30 * var(--u)) calc(17 * var(--u)) calc(92 * var(--u));
	background: radial-gradient(circle at 50% 50%, #d25a67 0%, #bc424f 50%, #a72937 100%);
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(56 * var(--u)));
	line-height: calc(80 / 56);
}

/* LINE モック：緑ヘッダー + 画面 */
.hz-lp .hz-linemock {
	position: relative;
	box-sizing: border-box;
	width: calc(598 * var(--u));
	height: calc(752 * var(--u));
	margin: calc(28 * var(--u)) 0 0 calc(48 * var(--u));
	border-radius: 0;
	background: none;
}

.hz-lp .hz-linemock::before {
	content: "ホライズン法律事務所";
	position: absolute;
	left: calc(-26 * var(--u));
	top: 0;
	display: grid;
	place-content: center;
	width: calc(626 * var(--u));
	height: calc(156 * var(--u));
	padding-block-start: calc(42 * var(--u));
	border-start-start-radius: calc(80 * var(--u));
	border-start-end-radius: calc(80 * var(--u));
	background: var(--hz-green);
	color: #fff;
	font-family: var(--hz-sans);
	font-weight: 500;
	font-size: max(14px, calc(26 * var(--u)));
	line-height: calc(21 / 26);
}

.hz-lp .hz-linemock::after {
	content: "";
	position: absolute;
	left: calc(12 * var(--u));
	top: calc(175 * var(--u));
	width: calc(573 * var(--u));
	height: calc(572 * var(--u));
	background: #fcfbf8 var(--hz-img-sec04-mock) center top / cover no-repeat;
}

.hz-lp .hz-linemock__cap {
	margin: calc(12 * var(--u)) calc(133 * var(--u)) 0 0;
	color: #444;
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(12px, calc(12 * var(--u)));
	line-height: calc(18 / 12);
	text-align: right;
}

/* 縦の区切り線 97px */
.hz-lp .hz-sec--line .hz-emph {
	position: relative;
	box-sizing: border-box;
	width: calc(602 * var(--u));
	min-height: calc(138 * var(--u));
	margin: calc(140 * var(--u)) 0 0 calc(50 * var(--u));
	padding: calc(21 * var(--u)) calc(26 * var(--u)) calc(21 * var(--u)) calc(82 * var(--u));
	background: url("./images/hz/sec04-emphframe.svg") center / 100% 100% no-repeat;
	color: var(--hz-green-tx);
	font-family: var(--hz-sans);
	font-weight: 500;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(45 / 28);
	letter-spacing: calc(3 * var(--u));
	text-align: center;
}

/* 2行目「スマホひとつで完結」は赤 #e36961 Bold 42 */
.hz-lp .hz-sec--line .hz-emph strong {
	display: block;
	color: #e36961;
	font-weight: 700;
	font-size: max(14px, calc(42 * var(--u)));
	line-height: calc(50 / 42);
}

/* スマホアイコン */
.hz-lp .hz-sec--line .hz-emph::before {
	content: "";
	position: absolute;
	left: calc(56 * var(--u));
	top: calc(33 * var(--u));
	width: calc(48 * var(--u));
	height: calc(75 * var(--u));
	background: url("./images/hz/sec04-sp.svg") center / contain no-repeat;
}

/* 縦線 */
.hz-lp .hz-sec--line .hz-linemock__cap::after {
	content: "";
	position: absolute;
	left: 50%;
	margin-block-start: calc(26 * var(--u));
	width: calc(2 * var(--u));
	height: calc(97 * var(--u));
	background: url("./images/hz/sec04-vline.svg") center / 100% 100% no-repeat;
}

/* 特徴：円170px + 見出し Serif Medium 40/48 #333 + 本文 #444 24/38 */
.hz-lp .hz-features {
	display: flex;
	flex-direction: column;
	gap: calc(64 * var(--u));
	margin-block-start: calc(69 * var(--u));
}

.hz-lp .hz-feature {
	grid-template-columns: calc(170 * var(--u)) 1fr;
	gap: calc(48 * var(--u));
	align-items: center;
}

.hz-lp .hz-feature .wp-block-image {
	width: calc(170 * var(--u));
	height: calc(170 * var(--u));
	border-radius: 0;
	background: url("./images/hz/sec04-circle.svg") center / contain no-repeat;
}

.hz-lp .hz-feature__title {
	color: var(--hz-text);
	font-family: var(--hz-serif);
	font-weight: 500;
	font-size: max(14px, calc(40 * var(--u)));
	line-height: calc(48 / 40);
}

.hz-lp .hz-feature__body {
	margin-block-start: calc(19 * var(--u));
	color: #444;
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(14px, calc(24 * var(--u)));
	line-height: calc(38 / 24);
}

/* 背景の装飾円 */
.hz-lp .hz-sec--line::before,
.hz-lp .hz-sec--line::after {
	content: "";
	position: absolute;
	z-index: 0;
	background: center / contain no-repeat;
	pointer-events: none;
}

.hz-lp .hz-sec--line::before {
	left: calc(-71 * var(--u));
	top: calc(1161 * var(--u));
	width: calc(284 * var(--u));
	height: calc(284 * var(--u));
	background-image: url("./images/hz/sec04-ellipse-l.svg");
}

.hz-lp .hz-sec--line::after {
	left: calc(531 * var(--u));
	top: calc(1413 * var(--u));
	width: calc(297 * var(--u));
	height: calc(297 * var(--u));
	background-image: url("./images/hz/sec04-ellipse-r.svg");
}

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


/* ===== Frame 5: sec05 実測反映（全要素） ===== */
.hz-lp .hz-sec--who {
	padding-block: 0;
	background: #fff;
	overflow: hidden;
}

/* ヘッダー：483.5px。写真はマスク付き（1254x837 @ x-215 y-129） */
.hz-lp .hz-whohead {
	position: relative;
	box-sizing: border-box;
	min-height: calc(483.5 * var(--u));
	height: calc(483.5 * var(--u));
	margin: 0 calc(-30 * var(--u));
	padding: 0;
	background: none;
}

.hz-lp .hz-whohead::before {
	content: "";
	position: absolute;
	left: calc(-215 * var(--u));
	top: calc(-129 * var(--u));
	width: calc(1254 * var(--u));
	height: calc(837 * var(--u));
	background: var(--hz-img-sec05-head) center / cover no-repeat;
	-webkit-mask: url("./images/hz/sec05-headmask.svg") calc(215 * var(--u)) calc(129 * var(--u)) / calc(750 * var(--u)) calc(483.5 * var(--u)) no-repeat;
	mask: url("./images/hz/sec05-headmask.svg") calc(215 * var(--u)) calc(129 * var(--u)) / calc(750 * var(--u)) calc(483.5 * var(--u)) no-repeat;
}

/* 白帯ラベル群：左端0から。1本目のみ緑32px、以降は黒44px */
.hz-lp .hz-whohead__labels {
	position: absolute;
	left: 0;
	top: calc(109 * var(--u));
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.hz-lp .hz-whohead__labels > p {
	box-sizing: border-box;
	display: grid;
	align-content: center;
	margin: 0;
	padding: 0 calc(20 * var(--u)) 0 calc(23 * var(--u));
	background: #fff;
	color: var(--hz-text);
	font-family: var(--hz-serif);
	font-weight: 600;
	font-size: max(14px, calc(44 * var(--u)));
	line-height: calc(32 / 44);
	white-space: nowrap;
}

/* 1本目：398x46 / 緑 Serif Bold 32 / 上マージン0 */
.hz-lp .hz-whohead__labels > p:nth-child(1) {
	width: calc(398 * var(--u));
	height: calc(46 * var(--u));
	padding-inline-start: calc(28 * var(--u));
	color: var(--hz-green-tx);
	font-weight: 700;
	font-size: max(14px, calc(32 * var(--u)));
}

/* 2本目：258x56 @ +17px */
.hz-lp .hz-whohead__labels > p:nth-child(2) {
	width: calc(258 * var(--u));
	height: calc(56 * var(--u));
	margin-block-start: calc(17 * var(--u));
}

/* 3本目：305x56 @ +6px */
.hz-lp .hz-whohead__labels > p:nth-child(3) {
	width: calc(305 * var(--u));
	height: calc(56 * var(--u));
	margin-block-start: calc(6 * var(--u));
}

/* 4本目：449x56 @ +7px */
.hz-lp .hz-whohead__labels > p:nth-child(4) {
	width: calc(449 * var(--u));
	height: calc(56 * var(--u));
	margin-block-start: calc(7 * var(--u));
	padding-inline-start: calc(25 * var(--u));
}

/* リード：#333 28/48 左揃え */
.hz-lp .hz-sec--who .hz-text {
	margin-block-start: calc(28 * var(--u));
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(48 / 28);
	text-align: left;
}

/* 動画カード：690x388 角丸30 / 写真 + 縦グラデ */
.hz-lp .hz-video {
	position: relative;
	box-sizing: border-box;
	height: calc(388 * var(--u));
	margin-block-start: calc(28 * var(--u));
	border-radius: calc(30 * var(--u));
	background:
		linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(97,97,97,.3) 25%, rgba(255,255,255,.3) 100%),
		var(--hz-img-sec05-video-thumb) center / cover no-repeat;
	overflow: hidden;
}

/* YouTube 埋め込み：画面幅に合わせて16:9を維持 */
.hz-lp .hz-video--embed {
	height: auto;
	aspect-ratio: 16 / 9;
	background: #000;
}

.hz-lp .hz-video.hz-video--embed::after { content: none; }

.hz-lp .hz-video--embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* 再生ボタン：177x108 中央 */
.hz-lp .hz-video::after {
	content: "";
	position: absolute;
	left: calc(257 * var(--u));
	top: calc(143 * var(--u));
	width: calc(177 * var(--u));
	height: calc(108 * var(--u));
	translate: none;
	border: 0;
	background: url("./images/hz/sec05-play.svg") center / contain no-repeat;
}

/* キャプション：アバター69px + 白 Bold 34 / サブ Regular 16 */
.hz-lp .hz-video__cap {
	position: absolute;
	left: calc(36 * var(--u));
	top: calc(33 * var(--u));
	z-index: 1;
	margin: 0;
	padding-inline-start: calc(102 * var(--u));
	color: #fff;
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(12px, calc(34 * var(--u)));
	line-height: calc(30 / 34);
}

.hz-lp .hz-video__cap em {
	display: block;
	margin-block-start: calc(8 * var(--u));
	font-style: normal;
	font-weight: 400;
	font-size: max(12px, calc(16 * var(--u)));
	line-height: calc(30 / 16);
}

.hz-lp .hz-video__cap::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: calc(69 * var(--u));
	height: calc(69 * var(--u));
	border-radius: 50%;
	background: var(--hz-img-sec05-avatar) center / 168% no-repeat;
	background-position: -13px -48px;
}


/* ===== Frame 5: sec04 強調ブロック修正 / sec06 実測反映 ===== */
/* ---------- sec04 強調ブロック（602x138 / テキスト幅550 中央+26px） ---------- */
.hz-lp .hz-sec--line .hz-emph {
	position: relative;
	box-sizing: border-box;
	width: calc(602 * var(--u));
	height: calc(138 * var(--u));
	margin: calc(140 * var(--u)) 0 0 calc(50 * var(--u));
	padding: calc(21 * var(--u)) 0 0 calc(72 * var(--u));
	background: url("./images/hz/sec04-emphframe.svg") center / 100% 100% no-repeat;
	color: var(--hz-green-tx);
	font-family: var(--hz-sans);
	font-weight: 500;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(45 / 28);
	letter-spacing: calc(3 * var(--u));
	text-align: center;
}

.hz-lp .hz-sec--line .hz-emph strong {
	display: block;
	margin-block-start: calc(-2 * var(--u));
	color: #e36961;
	font-weight: 700;
	font-size: max(14px, calc(42 * var(--u)));
	line-height: calc(50 / 42);
	letter-spacing: calc(3 * var(--u));
}

/* スマホアイコン 48x75 @ x136(=枠から+56) y+33 */
.hz-lp .hz-sec--line .hz-emph::before {
	content: "";
	position: absolute;
	left: calc(56 * var(--u));
	top: calc(33 * var(--u));
	width: calc(48 * var(--u));
	height: calc(75 * var(--u));
	background: url("./images/hz/sec04-sp.svg") center / contain no-repeat;
}

/* きらめき 23.6x23.5 @ 枠から+28.8 / +15.2（169.06deg・上下反転） */
.hz-lp .hz-sec--line .hz-emph::after {
	content: "";
	position: absolute;
	left: calc(28.81 * var(--u));
	top: calc(15.17 * var(--u));
	width: calc(23.66 * var(--u));
	height: calc(23.53 * var(--u));
	transform: rotate(169.06deg) scaleY(-1);
	background: var(--hz-img-sec04-spark) center / contain no-repeat;
}

/* ==========================================================================
   sec06 — 養育費を実際に回収できたお客様の声
   ========================================================================== */

.hz-lp .hz-sec--voice {
	background: #fff url("./images/hz/sec06-bg.png") top center / 100% auto no-repeat;
	padding-block-end: 0;
}

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

/* 見出し：緑 Serif SemiBold 52/80 中央 */
.hz-lp .hz-sec--voice .hz-h2 {
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 600;
	font-size: max(14px, calc(52 * var(--u)));
	line-height: calc(80 / 52);
	text-align: center;
}

/* 回収実績・調停件数：月桂樹と数字を含む画像2枚を横並び */
.hz-lp .hz-sec--voice .hz-h2 + .hz-text {
	margin-block-start: calc(60 * var(--u));
}

.hz-lp .hz-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	justify-content: space-between;
	gap: calc(30 * var(--u));
	margin-block-start: calc(46 * var(--u));
}

/* WordPress が追加するラッパー越しでも画像2枚をグリッドに配置する。 */
.hz-lp .hz-stats > .wp-block-group__inner-container {
	display: contents;
}

.hz-lp .hz-stats .hz-stat__visual {
	min-width: 0;
	margin: 0;
}

.hz-lp .hz-stat__visual img {
	display: block;
	width: 100%;
	height: auto;
}

.hz-lp .hz-stat {
	display: block;
	min-height: calc(121.73 * var(--u));
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	color: #2d5e89;
	font-family: var(--hz-serif);
	font-weight: 500;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(41 / 32);
	text-align: center;
}

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

.hz-lp .hz-stat__text {
	margin: 0;
	color: #2d5e89;
	font-family: var(--hz-serif);
	font-weight: 500;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(57 / 32);
	text-align: center;
}

.hz-lp .hz-stat__text strong {
	color: #2d5e89;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(48 * var(--u)));
	line-height: calc(57 / 48);
}

.hz-lp .hz-stat__text em {
	display: block;
	font-style: normal;
	font-weight: 500;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(41 / 32);
}

/* 事例背景：上端だけSVGで成形し、本文の高さに合わせて下の面を伸ばす。 */
.hz-lp .hz-voice-results {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	margin-block-start: calc(68 * var(--u));
	padding: calc(64 * var(--u)) calc(30 * var(--u)) calc(64 * var(--u));
}

.hz-lp .hz-voice-results::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: var(--hz-green-tx);
	opacity: .7;
	-webkit-mask:
		url("./images/hz/sec06-cases-wave.svg") top / 100% calc(136 * var(--u)) no-repeat,
		linear-gradient(#000, #000) bottom / 100% calc(100% - 135 * var(--u)) no-repeat;
	mask:
		url("./images/hz/sec06-cases-wave.svg") top / 100% calc(136 * var(--u)) no-repeat,
		linear-gradient(#000, #000) bottom / 100% calc(100% - 135 * var(--u)) no-repeat;
}

.hz-lp .hz-voice-results .hz-cases { margin: 0; }
.hz-lp .hz-voice-results .hz-case:first-child { margin-block-start: 0; }
.hz-lp .hz-voice-results .hz-note {
	margin-block-start: calc(32 * var(--u));
	color: #fff;
}

/* Case カード：690x538 角丸30 + ドロップシャドウ */
.hz-lp .hz-case {
	margin-block-start: calc(62 * var(--u));
	padding: calc(51 * var(--u)) calc(43 * var(--u)) calc(45 * var(--u));
	border-radius: calc(30 * var(--u));
	background: #fff;
	box-shadow: 0 calc(4 * var(--u)) calc(25 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .15);
}

/* Case.1 : 緑 Serif Bold 50 */
.hz-lp .hz-case__no {
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(12px, calc(50 * var(--u)));
	line-height: calc(29 / 50);
}

/* 成功金額ブロック：上下に600px罫 */
.hz-lp .hz-case__result {
	margin-block-start: calc(39 * var(--u));
	padding-block: calc(29 * var(--u)) calc(26 * var(--u));
	border-block: 0;
	background:
		url("./images/hz/sec06-line.svg") left top / calc(600 * var(--u)) calc(1 * var(--u)) no-repeat,
		url("./images/hz/sec06-line.svg") left bottom / calc(600 * var(--u)) calc(1 * var(--u)) no-repeat;
}

/* 「成功金額」：グレー Medium 28 左寄せ */
.hz-lp .hz-case__label {
	margin: 0;
	color: var(--hz-note);
	font-family: var(--hz-sans);
	font-weight: 500;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(19.8 / 28);
	text-align: left;
}

/* 金額：緑 Serif Bold 100 / 単位48 / 括弧書きはグレー24 */
.hz-lp .hz-case__amount {
	position: relative;
	margin: calc(54 * var(--u)) 0 0;
	color: var(--hz-note);
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(14px, calc(24 * var(--u)));
	line-height: calc(19.8 / 24);
	text-align: left;
}

.hz-lp .hz-case__amount strong {
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(100 * var(--u)));
	line-height: calc(28 / 100);
	letter-spacing: calc(3 * var(--u));
}

.hz-lp .hz-case__amount em {
	margin-inline-end: calc(8 * var(--u));
	font-style: normal;
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(48 * var(--u)));
	letter-spacing: calc(3 * var(--u));
}

/* Case.3 の補足文は金額と行を分け、文字サイズに依存しない余白を確保する。 */
.hz-lp .hz-case__amount-note {
	display: block;
	margin-block-start: max(8px, calc(16 * var(--u)));
	line-height: 1.5;
}

/* お子様情報：#333 28/42 */
.hz-lp .hz-case__meta {
	margin-block-start: calc(23 * var(--u));
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(12px, calc(28 * var(--u)));
	line-height: calc(42 / 28);
	text-align: left;
}

/* コメントを見る：355x57 緑 radius30 / 白 Medium 28 / 右に▼SVG */
.hz-lp .hz-case summary {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: max(6px, calc(12 * var(--u)));
	width: calc(355 * var(--u));
	max-width: 100%;
	min-height: calc(57 * var(--u));
	padding-inline: calc(16 * var(--u));
	margin: calc(47 * var(--u)) auto 0;
	border-radius: calc(30 * var(--u));
	background: var(--hz-green);
	color: #fff;
	font-family: var(--hz-sans);
	font-weight: 500;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(48 / 28);
}

.hz-lp .hz-case summary::after {
	content: "";
	flex: 0 0 auto;
	width: calc(32 * var(--u));
	height: calc(32 * var(--u));
	rotate: 180deg;
	background: url("./images/hz/sec06-accordion.svg") center / contain no-repeat;
	transition: rotate .3s ease;
}

.hz-lp .hz-case details[open] summary::after { rotate: 0deg; }

.hz-lp .hz-case summary[aria-expanded="false"]::after { rotate: 180deg; }
.hz-lp .hz-case details { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
	.hz-lp .hz-case summary::after { transition: none; }
}

.hz-lp .hz-case__body {
	margin-block-start: calc(28 * var(--u));
	color: #555;
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(48 / 28);
	text-align: left;
}


/* ===== Frame 5: sec07 実測反映（見出し・リード・写真） ===== */
.hz-lp .hz-sec--fee2 {
	padding-block: calc(100 * var(--u));
	background: #fff;
	overflow: hidden;
}

/* 見出し：青 #2992ef Serif SemiBold 52/80（title_m）中央。「「受け取れたとき」」のみ Bold */
.hz-lp .hz-sec--fee2 .hz-h2 {
	margin-block-start: calc(0 * var(--u));
	color: var(--hz-blue);
	font-family: var(--hz-serif);
	font-weight: 600;
	font-size: max(14px, calc(52 * var(--u)));
	line-height: calc(80 / 52);
	text-align: center;
	white-space: nowrap;
}

.hz-lp .hz-sec--fee2 .hz-h2 strong {
	color: var(--hz-blue);
	font-weight: 700;
	font-size: max(14px, calc(52 * var(--u)));
}

/* リード：#333 28/48 中央 */
.hz-lp .hz-sec--fee2 .hz-lead {
	margin-block-start: calc(25 * var(--u));
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(48 / 28);
	text-align: center;
}

/* 写真：674x467 のマスク領域に2枚重ね（背面 740x493 / 前面 824x549） */
.hz-lp .hz-sec--fee2 .hz-photo {
	position: relative;
	width: calc(674 * var(--u));
	height: calc(467 * var(--u));
	margin: calc(37 * var(--u)) 0 0 calc(-30 * var(--u));
	border-radius: 0;
	background: none;
	overflow: visible;
}

.hz-lp .hz-sec--fee2 .hz-photo::before,
.hz-lp .hz-sec--fee2 .hz-photo::after {
	content: "";
	position: absolute;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: calc(674 * var(--u)) calc(467 * var(--u));
	mask-size: calc(674 * var(--u)) calc(467 * var(--u));
	-webkit-mask-image: url("./images/hz/sec07-photomask.svg");
	mask-image: url("./images/hz/sec07-photomask.svg");
}

.hz-lp .hz-sec--fee2 .hz-photo::before {
	left: calc(-25 * var(--u));
	top: calc(-12 * var(--u));
	width: calc(740 * var(--u));
	height: calc(493 * var(--u));
	background: var(--hz-img-sec07-photo-a) center / cover no-repeat;
	-webkit-mask-position: calc(25 * var(--u)) calc(12 * var(--u));
	mask-position: calc(25 * var(--u)) calc(12 * var(--u));
}

.hz-lp .hz-sec--fee2 .hz-photo::after {
	left: calc(-74 * var(--u));
	top: calc(-44 * var(--u));
	width: calc(824 * var(--u));
	height: calc(549 * var(--u));
	background: var(--hz-img-sec07-photo-b) center / cover no-repeat;
	-webkit-mask-position: calc(74 * var(--u)) calc(44 * var(--u));
	mask-position: calc(74 * var(--u)) calc(44 * var(--u));
}


/* ===== Frame 5: sec08 実測反映（見出し・各STEP） ===== */
/* セクション地：sec04 と同じ赤い放射グラデの見出し帯 */
.hz-lp .hz-sec--step {
	padding-block: 0 calc(100 * var(--u));
	background: var(--hz-green);
}

.hz-lp .hz-sec--step .hz-band {
	display: block;
	box-sizing: border-box;
	width: calc(614 * var(--u));
	min-height: calc(205 * var(--u));
	margin: 0 0 0 calc(-30 * var(--u));
	padding: calc(17 * var(--u)) calc(30 * var(--u)) calc(17 * var(--u)) calc(60 * var(--u));
	background: radial-gradient(circle at 50% 50%, #d25a67 0%, #bc424f 50%, #a72937 100%);
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(56 * var(--u)));
	line-height: calc(80 / 56);
}

/* STEP カード共通（写真つき STEP1/3 以外は同じサイズ感で統一） */
.hz-lp .hz-step {
	position: relative;
	box-sizing: border-box;
	margin-block-start: calc(56 * var(--u));
	padding: calc(150 * var(--u)) calc(44 * var(--u)) calc(90 * var(--u));
	border-radius: calc(30 * var(--u));
	background: #fff;
}

.hz-lp .hz-step + .hz-step { margin-block-start: calc(90 * var(--u)); }

/* 番号バッジ：緑・右下角丸30。STEP02 のみ 275x94、他は 258x73 */
.hz-lp .hz-step__no {
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	display: grid;
	place-content: center start;
	min-width: calc(258 * var(--u));
	min-height: calc(73 * var(--u));
	margin: 0;
	padding-inline: calc(31 * var(--u));
	border-radius: 0 0 calc(30 * var(--u)) 0;
	background: var(--hz-green);
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(12px, calc(48 * var(--u)));
	line-height: calc(73 / 48);
}

.hz-lp .hz-step:nth-of-type(2) .hz-step__no {
	min-width: calc(275 * var(--u));
	min-height: calc(94 * var(--u));
	padding-inline: calc(48 * var(--u));
	line-height: calc(94 / 48);
}

/* アイコン + タイトル/本文を横並びに（絶対配置ではなく実 HTML + flex） */
.hz-lp .hz-step__row {
	display: flex;
	align-items: center;
	gap: calc(24 * var(--u));
}

/* アイコンの実サイズは素材ごとに違うが、列の幅・高さは全STEP共通にしてテキストの開始位置を揃える */
.hz-lp .hz-step__icon {
	flex: 0 0 auto;
	width: calc(177 * var(--u));
	height: calc(170 * var(--u));
	object-fit: contain;
}

.hz-lp .hz-step__text {
	flex: 1 1 auto;
	min-width: 0;
}

.hz-lp .hz-step__title {
	margin: 0;
	white-space: nowrap;
	color: var(--hz-ink);
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(42 / 32);
}

.hz-lp .hz-step__body {
	margin-block-start: calc(22 * var(--u));
	color: var(--hz-body);
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(42 / 28);
}

/* 下向き矢印 99x66（SVG） */
.hz-lp .hz-step::after {
	content: "";
	position: absolute;
	bottom: calc(-56 * var(--u));
	left: 50%;
	width: calc(99 * var(--u));
	height: calc(66 * var(--u));
	translate: -50% 0;
	rotate: 180deg;
	border: 0;
	background: url("./images/hz/sec08-arrow.svg") center / contain no-repeat;
}

/* 補足：写真+ピンクの吹き出しを一体化した画像（sec08-asousama01/02.png）を差し込む */
.hz-lp .hz-step__extra {
	position: relative;
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: calc(601 * var(--u));
	min-height: 0;
	margin: calc(20 * var(--u)) auto 0;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-align: left;
}

.hz-lp .hz-step__extra-img {
	display: block;
	width: 100%;
	height: auto;
}

/* STEP 05：最終ステップなので下向き矢印だけなし。カードの大きさは他と共通 */
.hz-lp .hz-step--last::after { content: none; }


/* ===== Frame 5: sec09a / sec09b 実測反映 ===== */
/* ---------- sec09a: 受け取って、終わりにしない。 ---------- */
.hz-lp .hz-sec--after {
	padding-block: 0 calc(40 * var(--u));
	background: #fff;
}

/* sec09-bg.png は上下2箇所に水玉模様があり、中央は余白だけの縦長画像。
   写真の裏に隠れないよう、2つの hz-afterblock をまとめた hz-afterblocks の
   上端・下端（実測: 上280px・下262px / 全体1779px, 幅1125px）に敷き込む。
   本文の長さで高さが変わっても模様がちぎれないよう、上下は別々の帯にする。 */
.hz-lp .hz-afterblocks {
	position: relative;
	z-index: 1;
	margin-block-start: calc(-60 * var(--u));
	padding-block: calc(120 * var(--u)) calc(100 * var(--u));
}

/* .hz-afterblocks 自体はセクションの内側パディング分だけ狭いので、
   left/width は calc((100% - 100cqi) / 2) で真の画面幅まで持ち出す */
.hz-lp .hz-afterblocks::before,
.hz-lp .hz-afterblocks::after {
	content: "";
	position: absolute;
	left: calc((100% - 100cqi) / 2);
	z-index: -1;
	width: 100cqi;
	background-image: var(--hz-img-sec09-bg);
	background-repeat: no-repeat;
	background-size: calc(750 * var(--u)) calc(1186 * var(--u));
}

.hz-lp .hz-afterblocks::before {
	top: 0;
	height: calc(187 * var(--u));
	background-position: top center;
}

.hz-lp .hz-afterblocks::after {
	bottom: 0;
	height: calc(175 * var(--u));
	background-position: bottom center;
}

/* ヘッダー写真：sec09-head.png は波形の縁が画像自体に描き込み済みなので、
   マスクで切り抜かず実 img を等倍表示するだけでよい（alt で読み上げ・SEO用テキストを確保） */
.hz-lp .hz-sec--after .hz-photo {
	position: relative;
	height: auto;
	aspect-ratio: 1125 / 1008;
	margin: 0 calc(-30 * var(--u));
	background: none;
	overflow: hidden;
}

.hz-lp .hz-sec--after .hz-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 見出し：白帯ではなく素の黒 Serif SemiBold 56/80（title_l）@ x67 y192 */
.hz-lp .hz-sec--after .hz-band {
	position: absolute;
	left: calc(67 * var(--u));
	top: calc(192 * var(--u));
	z-index: 1;
	padding: 0;
	background: none;
	color: var(--hz-text);
	font-family: var(--hz-serif);
	font-weight: 600;
	font-size: max(14px, calc(56 * var(--u)));
	line-height: calc(80 / 56);
	white-space: nowrap;
}

/* リード：#333 / 4行 */
.hz-lp .hz-sec--after .hz-lead {
	margin-block-start: calc(33 * var(--u));
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(52 / 32);
	text-align: left;
}

/* 見出し帯：緑ベタ + 緑50%を右下(3〜5px)にずらす二重帯・角丸なし */
.hz-lp .hz-afterblock { margin-block-start: calc(56 * var(--u)); text-align: center; }

.hz-lp .hz-afterblock__cap,
.hz-lp .hz-afterblock__title {
	position: relative;
	box-sizing: border-box;
	display: grid;
	place-content: center;
	min-height: calc(70 * var(--u));
	margin: 0 auto;
	padding: 0 calc(30 * var(--u));
	border-radius: 0;
	background: var(--hz-green);
	box-shadow: calc(4 * var(--u)) calc(5 * var(--u)) 0 rgba(79, 169, 122, .5);
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(38 * var(--u)));
	line-height: calc(52 / 38);
	white-space: nowrap;
}

.hz-lp .hz-afterblock__cap { width: calc(289 * var(--u)); }
.hz-lp .hz-afterblock__title { width: calc(405 * var(--u)); margin-block-start: calc(11 * var(--u)); }

/* 2ブロック目は幅が異なる */
.hz-lp .hz-afterblock:nth-of-type(2) .hz-afterblock__cap { width: calc(429 * var(--u)); }
.hz-lp .hz-afterblock:nth-of-type(2) .hz-afterblock__title { width: calc(523 * var(--u)); }

.hz-lp .hz-afterblock__body {
	margin-block-start: calc(37 * var(--u));
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(48 / 28);
	text-align: left;
}

/* ---------- sec09b: よくあるご質問 ---------- */
.hz-lp .hz-sec--faq {
	padding-block-start: calc(20 * var(--u));
	background: #fff;
}

.hz-lp .hz-faq__icon {
	margin: 0 auto;
	width: calc(160 * var(--u));
}

.hz-lp .hz-faq__icon img {
	display: block;
	width: 100%;
	height: auto;
}

/* 見出し：緑 Serif SemiBold 56/80 中央寄せ */
.hz-lp .hz-sec--faq .hz-h2 {
	margin-block-start: calc(24 * 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(80 / 56);
	text-align: center;
}

.hz-lp .hz-sec--faq .hz-faq {
	margin-block-start: calc(60 * var(--u));
}

/* 各項目：690x136 の緑ピル（radius 80）+ 緑50%を8px下 */
.hz-lp .hz-faq details {
	margin-block-start: calc(30 * var(--u));
	border-radius: calc(80 * var(--u));
	background: transparent;
	overflow: visible;
}

.hz-lp .hz-faq summary {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: calc(28 * var(--u));
	width: calc(690 * var(--u));
	min-height: calc(131 * var(--u));
	padding: calc(20 * var(--u)) calc(150 * var(--u)) calc(20 * var(--u)) calc(42 * var(--u));
	border-radius: calc(80 * var(--u));
	background: var(--hz-green);
	box-shadow: 0 calc(8 * var(--u)) 0 rgba(79, 169, 122, .5);
	color: #fff;
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(46 / 32);
	text-align: left;
}

/* Q：Serif Bold 68 白 */
.hz-lp .hz-faq summary::before {
	content: "Q";
	flex: none;
	display: block;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(68 * var(--u)));
	line-height: calc(42 / 68);
}

/* ＋：白丸88px + 緑の「+」72px */
.hz-lp .hz-faq summary::after {
	content: "+";
	position: absolute;
	right: calc(24 * var(--u));
	top: calc(24 * var(--u));
	display: grid;
	place-content: center;
	width: calc(88 * var(--u));
	height: calc(88 * var(--u));
	translate: none;
	border-radius: 50%;
	background: url("./images/hz/sec10-plus.svg") center / contain no-repeat;
	color: var(--hz-green);
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(72 * var(--u)));
	line-height: calc(46 / 72);
	padding-block-end: calc(10 * var(--u));
}

.hz-lp .hz-faq details[open] summary::after { content: "\2212"; }

.hz-lp .hz-faq details > p {
	margin: 0;
	padding: calc(30 * var(--u)) calc(46 * var(--u)) calc(36 * var(--u));
	color: var(--hz-body);
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(48 / 28);
}

/* JS が動く場合はアコーディオンではなくモーダルで回答を出すので、
   details の中身はページ上には出さない（JS 無効時はそのまま開閉できる）。 */
.hz-lp .hz-faq.is-modal details > :not(summary) { display: none; }

/* ---------- sec10: 回答モーダル ----------
   背景は sec10-modal.png。画像にはダミー文言が焼き込まれているため、
   白いカード部分は CSS で作り、画像は下側（ピンクの吹き出し + 弁護士）だけを
   bottom 合わせで見せている。画像は 1.5 倍書き出し（869 / 1.5 = 579u）。 */
.hz-lp .hz-modal {
	/* top layer に出るので、コンテナ基準ではなくビューポート基準で単位を取り直す */
	--u: min(calc(100vw / 750), 1px);
	position: fixed;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	inset: 0;
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	overflow: visible;
}

.hz-lp .hz-modal:not([open]) { display: none; }

.hz-lp .hz-modal::backdrop {
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity .32s ease;
}

.hz-lp .hz-modal.is-visible::backdrop { opacity: 1; }

.hz-lp .hz-modal__inner {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: calc(579 * var(--u));
	max-width: 88vw;
	max-height: 86vh;
	translate: 0 calc(60 * var(--u));
	opacity: 0;
	transition: translate .32s cubic-bezier(.22, 1, .36, 1), opacity .32s ease;
}

.hz-lp .hz-modal.is-visible .hz-modal__inner {
	translate: 0 0;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.hz-lp .hz-modal::backdrop,
	.hz-lp .hz-modal__inner { transition: none; }
}

.hz-lp .hz-modal__card {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: calc(50 * var(--u)) calc(43 * var(--u)) calc(8 * var(--u)) calc(41 * var(--u));
	border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
	background: #fff;
}

.hz-lp .hz-modal__label {
	margin: 0 0 calc(24 * var(--u));
	color: var(--hz-pink);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(20px, calc(56 * var(--u)));
	line-height: 1;
}

.hz-lp .hz-modal__body,
.hz-lp .hz-modal__body p {
	margin: 0;
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(13px, calc(28 * var(--u)));
	line-height: calc(48 / 28);
	text-align: left;
}

.hz-lp .hz-modal__body p + p { margin-block-start: calc(28 * var(--u)); }

/* 下端：画像の下 402px 分（弁護士の頭から下）だけを見せる */
.hz-lp .hz-modal__foot {
	flex: none;
	width: 100%;
	aspect-ratio: 869 / 402;
	background: url("./images/hz/sec10-modal.png") bottom center / 100% auto no-repeat;
}

.hz-lp .hz-modal__close {
	position: absolute;
	z-index: 1;
	top: calc(16 * var(--u));
	right: calc(16 * var(--u));
	box-sizing: border-box;
	display: grid;
	place-content: center;
	width: calc(62 * var(--u));
	height: calc(62 * var(--u));
	padding: 0 0 calc(4 * var(--u));
	border: 0;
	border-radius: 50%;
	background: rgba(51, 51, 51, .07);
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-size: max(16px, calc(36 * var(--u)));
	line-height: 1;
	cursor: pointer;
}


/* ===== Frame 5: sec10 実測反映 ===== */
/* 協賛団体：背景をセクション全体に敷く */
.hz-lp .hz-sec--partner {
	position: relative;
	padding-block: calc(70 * var(--u)) calc(60 * var(--u));
	background: #fff;
	overflow: hidden;
	color: #fff;
}

.hz-lp .hz-sec--partner::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: var(--hz-img-sec11-bg) center / cover no-repeat;
	opacity: .8;
	rotate: none;
	transform: none;
	-webkit-mask: none;
	mask: none;
	pointer-events: none;
}

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

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

.hz-lp .hz-sec--partner .hz-ribbon {
	inset: auto;
	width: 100%;
	max-width: 100%;
}

.hz-lp .hz-partner-carousel {
	position: relative;
	margin-block-start: calc(32 * var(--u));
	padding-block: calc(52 * var(--u));
	border-radius: calc(30 * var(--u));
	background: #fff;
	overflow: hidden;
}
.hz-lp .hz-partner-carousel__row { overflow-x: auto; }
.hz-lp .hz-partner-carousel__row + .hz-partner-carousel__row {
	margin-block-start: calc(40 * var(--u));
}
.hz-lp .hz-partner-carousel__track,
.hz-lp .hz-partner-carousel__group {
	display: flex;
	align-items: center;
	width: max-content;
}
.hz-lp .hz-partner-carousel__group { flex: none; }
.hz-lp .hz-partner-carousel__group img {
	flex: none;
	width: calc(150 * var(--u));
	height: calc(130 * var(--u));
	margin: 0 calc(16 * var(--u));
	object-fit: contain;
}
.hz-lp .hz-partner-carousel.is-ready .hz-partner-carousel__row { overflow: hidden; }
.hz-lp .hz-partner-carousel.is-ready .hz-partner-carousel__track {
	animation: hz-partner-scroll 35s linear infinite;
}
.hz-lp .hz-partner-carousel__row:nth-child(2) .hz-partner-carousel__track { animation-direction: reverse; }
@keyframes hz-partner-scroll { to { transform: translateX(-50%); } }

/* 見出し：白 Serif Bold 48/80 中央、上下に690px罫（SVG） */
.hz-lp .hz-ribbon {
	position: relative;
	width: calc(690 * var(--u));
	min-height: auto;
	margin: 0 auto;
	padding-block: calc(2 * var(--u));
	translate: none;
	border: 0;
	background:
		url("./images/hz/sec11-line.svg") left top / calc(690 * var(--u)) calc(1 * var(--u)) no-repeat,
		url("./images/hz/sec11-line.svg") left bottom / calc(690 * var(--u)) calc(1 * var(--u)) no-repeat;
	clip-path: none;
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(48 * var(--u)));
	line-height: calc(80 / 48);
	text-align: center;
	white-space: nowrap;
}

/* リード：白 Regular 28/48 中央（2行） */
.hz-lp .hz-sec--partner .hz-lead {
	margin-block-start: calc(30 * var(--u));
	color: #fff;
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(48 / 28);
	text-align: center;
}

/* 締め文：白 Bold 32/48 中央（2行） */
.hz-lp .hz-sec--partner .hz-text {
	margin-block-start: calc(36 * var(--u));
	color: #fff;
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(48 / 32);
	text-align: center;
}

/* ロゴ枠：210x91 グレー #d9d9d9 / 文字 #5b5b5b Bold 32 */
.hz-lp .hz-logos {
	display: grid;
	grid-template-columns: repeat(3, calc(210 * var(--u)));
	justify-content: space-between;
	gap: 0;
	margin-block-start: calc(64 * var(--u));
}

.hz-lp .hz-logo {
	box-sizing: border-box;
	display: grid;
	place-content: center;
	width: calc(210 * var(--u));
	min-height: calc(91 * var(--u));
	margin: 0;
	border-radius: 0;
	background: var(--hz-gray);
	color: #5b5b5b;
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(48 / 32);
	text-align: center;
}


/* ===== Frame 5: sec11 実測反映 ===== */
.hz-lp .hz-sec--before {
	padding-block: calc(60 * var(--u)) calc(90 * var(--u));
	background: #f5fcf8 url("./images/hz/sec12-bg.png") center top / 100% 100% no-repeat;
	overflow: hidden;
}

.hz-lp .hz-sec--before .hz-before-visual {
	width: calc(100% + 30 * var(--u));
	max-width: none;
	margin: 0 0 0 calc(-30 * var(--u));
}
.hz-lp .hz-sec--before .hz-before-visual img,
.hz-lp .hz-sec--before .hz-before-family img {
	display: block;
	width: 100%;
	height: auto;
}
.hz-lp .hz-sec--before .hz-before-family {
	width: 90%;
	margin: calc(36 * var(--u)) auto 0;
}
.hz-lp .hz-sec--before .hz-checks > .wp-block-group__inner-container {
	display: contents;
}

/* ヘッダー写真：878x585 をマスク切り抜き（760x390 の枠） */
.hz-lp .hz-sec--before .hz-photo {
	position: relative;
	height: calc(390 * var(--u));
	margin: 0 calc(-30 * var(--u));
	background: none;
	overflow: visible;
}

.hz-lp .hz-sec--before .hz-photo::before {
	content: "";
	position: absolute;
	left: calc(19 * var(--u));
	top: calc(-100 * var(--u));
	width: calc(878 * var(--u));
	height: calc(585 * var(--u));
	background: var(--hz-img-sec12-photo) center / cover no-repeat;
	-webkit-mask: url("./images/hz/sec12-headmask.svg") calc(-19 * var(--u)) calc(100 * var(--u)) / calc(760 * var(--u)) calc(390 * var(--u)) no-repeat;
	mask: url("./images/hz/sec12-headmask.svg") calc(-19 * var(--u)) calc(100 * var(--u)) / calc(760 * var(--u)) calc(390 * var(--u)) no-repeat;
}

/* 見出し：白帯3本。1本目は黒42px、2〜3本目は緑56px（「こと。」だけ黒） */
.hz-lp .hz-sec--before .hz-beforehead {
	position: absolute;
	left: 0;
	top: calc(58 * var(--u));
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.hz-lp .hz-sec--before .hz-beforehead > p {
	box-sizing: border-box;
	display: grid;
	align-content: center;
	margin: 0;
	padding: 0;
	background: #fff;
	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: center;
	white-space: nowrap;
}

/* 1本目：325x68 / 黒42px */
.hz-lp .hz-sec--before .hz-beforehead > p:nth-child(1) {
	width: calc(325 * var(--u));
	height: calc(68 * var(--u));
	color: var(--hz-text);
	font-size: max(14px, calc(42 * var(--u)));
	line-height: calc(80 / 42);
}

/* 2本目：384x87 @ +6px */
.hz-lp .hz-sec--before .hz-beforehead > p:nth-child(2) {
	width: calc(384 * var(--u));
	height: calc(87 * var(--u));
	margin-block-start: calc(6 * var(--u));
}

/* 3本目：384x87 @ +7px */
.hz-lp .hz-sec--before .hz-beforehead > p:nth-child(3) {
	width: calc(384 * var(--u));
	height: calc(87 * var(--u));
	margin-block-start: calc(7 * var(--u));
}

.hz-lp .hz-sec--before .hz-beforehead > p em {
	font-style: normal;
	color: var(--hz-text);
	font-weight: 600;
}

/* チェックリスト：丸56px（SVG）+ 本文 #333 28/48・強調は緑 Medium */
.hz-lp .hz-sec--before .hz-checks {
	display: flex;
	flex-direction: column;
	gap: calc(24 * var(--u));
	margin-block-start: calc(39 * var(--u));
}

.hz-lp .hz-sec--before .hz-check {
	position: relative;
	box-sizing: border-box;
	display: block;
	min-height: auto;
	margin: 0;
	padding: 0 0 0 calc(107 * var(--u));
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.hz-lp .hz-sec--before .hz-check::before {
	content: "";
	position: absolute;
	left: calc(22 * var(--u));
	top: calc(17 * var(--u));
	width: calc(56 * var(--u));
	height: calc(56 * var(--u));
	translate: none;
	border-radius: 0;
	background: url("./images/hz/sec12-check.svg") center / contain no-repeat;
}

.hz-lp .hz-sec--before .hz-check::after {
	content: "";
	position: absolute;
	top: calc(34 * var(--u));
	left: calc(37 * var(--u));
	width: calc(27 * var(--u));
	height: calc(15 * var(--u));
	border-left: calc(5 * var(--u)) solid #fff;
	border-bottom: calc(5 * var(--u)) solid #fff;
	rotate: none;
	transform: rotate(-45deg);
	translate: none;
}

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

.hz-lp .hz-sec--before .hz-check__text strong {
	color: var(--hz-green-tx);
	font-weight: 500;
}

/* 引用1：緑 Serif SemiBold 40/72、「大切な権利」のみ Bold 50/84。下に罫線2本 */
.hz-lp .hz-quote {
	position: relative;
	margin-block-start: calc(126 * var(--u));
	padding-block: 0 calc(96 * var(--u));
	border: 0;
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 600;
	font-size: max(14px, calc(40 * var(--u)));
	line-height: calc(72 / 40);
	text-align: center;
}

.hz-lp .hz-quote b { font-weight: 700; }

.hz-lp .hz-quote strong {
	font-weight: 700;
	font-size: max(14px, calc(50 * var(--u)));
	line-height: calc(84 / 50);
}

.hz-lp .hz-quote::before,
.hz-lp .hz-quote::after {
	content: "";
	position: absolute;
	height: calc(1 * var(--u));
	background: url("./images/hz/sec12-line31.svg") center / 100% 100% no-repeat;
}

.hz-lp .hz-quote::before { left: calc(27 * var(--u)); bottom: calc(86 * var(--u)); width: calc(597 * var(--u)); }
.hz-lp .hz-quote::after  { left: calc(163 * var(--u)); bottom: 0; width: calc(248 * var(--u)); }

.hz-lp .hz-sec--before .hz-quote {
	margin-block-start: calc(24 * var(--u));
	padding-block: calc(110 * var(--u)) 0;
}
.hz-lp .hz-sec--before .hz-quote::before {
	inset: 0 auto auto 50%;
	width: 0;
	height: calc(88 * var(--u));
	border-left: calc(4 * var(--u)) dotted var(--hz-green-tx);
	background: none;
}
.hz-lp .hz-sec--before .hz-quote::after { content: none; }
.hz-lp .hz-sec--before .hz-quote span {
	border-bottom: 1px solid #acd39b;
}

/* 引用2：黒 Serif Medium 38/58 中央（3行） */
.hz-lp .hz-quote2 {
	margin-block-start: calc(37 * var(--u));
	color: var(--hz-text);
	font-family: var(--hz-serif);
	font-weight: 500;
	font-size: max(14px, calc(38 * var(--u)));
	line-height: calc(58 / 38);
	text-align: center;
}

/* 写真2点：左（315.7x279）と右（362.9x323.8） */
.hz-lp .hz-beforephotos {
	position: relative;
	height: calc(396 * var(--u));
	margin: calc(34 * var(--u)) calc(-30 * var(--u)) 0;
}

.hz-lp .hz-beforephotos::before,
.hz-lp .hz-beforephotos::after {
	content: "";
	position: absolute;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.hz-lp .hz-beforephotos::before {
	left: calc(-37 * var(--u));
	top: calc(117 * var(--u));
	width: calc(569 * var(--u));
	height: calc(379 * var(--u));
	background: var(--hz-img-sec12-photo-l) center / cover no-repeat;
	-webkit-mask-image: url("./images/hz/sec12-photomask-l.svg");
	mask-image: url("./images/hz/sec12-photomask-l.svg");
	-webkit-mask-position: calc(116 * var(--u)) calc(13 * var(--u));
	mask-position: calc(116 * var(--u)) calc(13 * var(--u));
	-webkit-mask-size: calc(315.68 * var(--u)) calc(279 * var(--u));
	mask-size: calc(315.68 * var(--u)) calc(279 * var(--u));
}

.hz-lp .hz-beforephotos::after {
	left: calc(234 * var(--u));
	top: calc(-4 * var(--u));
	width: calc(528.85 * var(--u));
	height: calc(352.61 * var(--u));
	background: var(--hz-img-sec12-photo-r) center / cover no-repeat;
	-webkit-mask-image: url("./images/hz/sec12-photomask-r.svg");
	mask-image: url("./images/hz/sec12-photomask-r.svg");
	-webkit-mask-position: calc(90.68 * var(--u)) calc(4.42 * var(--u));
	mask-position: calc(90.68 * var(--u)) calc(4.42 * var(--u));
	-webkit-mask-size: calc(362.89 * var(--u)) calc(323.84 * var(--u));
	mask-size: calc(362.89 * var(--u)) calc(323.84 * var(--u));
}

/* 結び文 */
.hz-lp .hz-closing {
	margin-block-start: calc(28 * var(--u));
	color: var(--hz-text);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(36 * var(--u)));
	line-height: calc(54 / 36);
	text-align: center;
}


.hz-lp .hz-sec--before .hz-closing {
	font-family: var(--hz-sans);
	font-size: max(12px, calc(28 * var(--u)));
	font-weight: 400;
	line-height: 1.8;
}
.hz-lp .hz-sec--before .hz-closing strong {
	color: var(--hz-green-tx);
	font-weight: 700;
	font-size: max(15px, calc(34 * var(--u)));
}
.hz-lp .hz-before-prompt {
	position: relative;
	width: calc(56 * var(--u));
	height: calc(44 * var(--u));
	margin: calc(28 * var(--u)) auto calc(80 * var(--u));
	animation: hz-before-nudge 1.8s ease-in-out infinite;
}
.hz-lp .hz-before-prompt::before,
.hz-lp .hz-before-prompt::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: calc(52 * var(--u));
	height: calc(20 * var(--u));
	margin-left: calc(-26 * var(--u));
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 11' fill='none' stroke='%234fa97a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,2 13,9 24,2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hz-lp .hz-before-prompt::after { top: calc(20 * var(--u)); }
@keyframes hz-before-nudge {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(calc(12 * var(--u))); }
}
@media (prefers-reduced-motion: reduce) {
	.hz-lp .hz-before-prompt { animation: none; }
}
.hz-lp .hz-sec--before .hz-before-cta { margin-block-start: 0; }
.hz-lp .hz-before-cta .wp-block-button { display: block; width: 100%; }
.hz-lp .hz-before-cta .wp-block-button__link {
	width: 100%;
	min-height: calc(160 * var(--u));
	padding: 0 calc(112 * var(--u)) 0 calc(145 * var(--u));
	align-items: center;
	font-size: max(13px, calc(34 * var(--u)));
	overflow: visible;
}
.hz-lp .hz-before-cta__caption {
	position: absolute;
	top: calc(-24 * var(--u));
	left: 50%;
	display: block;
	width: 88%;
	height: auto;
	transform: translateX(-50%);
}

/* ===== Frame 5: footer 実測反映 =====
   footer_logo.png（アイコン＋事務所名＋キャッチコピーの一枚絵）を
   ピンクのカード（footer-bg.svg）の上に白い角丸カードを重ねて表示する。
   背景SVGは preserveAspectRatio="none" で作られている（＝箱に合わせて
   伸縮する前提）ため、background-size は 100% 100% で高さをコンテンツに
   追従させる。高さを固定していたのが、下に白い余白が出ていた原因。 */
.hz-lp .hz-foot {
	position: relative;
	box-sizing: border-box;
	padding: calc(40 * var(--u));
	/* 下部固定CTAバー(.hz-stickycta)の高さぶん、フッターが隠れないよう余分に確保する */
	padding-block-end: calc(40 * var(--u) + 96px);
	background: url("./images/hz/footer-bg.svg") center / 100% 100% no-repeat;
	color: var(--hz-red);
	text-align: center;
}

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

.hz-lp .hz-foot__card {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	padding: calc(60 * var(--u)) calc(40 * var(--u)) calc(70 * var(--u));
	border-radius: calc(40 * var(--u));
	background: #fff;
}

.hz-lp .hz-foot .hz-photo {
	position: static;
	left: auto;
	top: auto;
	z-index: auto;
	width: calc(500 * var(--u));
	height: auto;
	margin: 0 auto;
	border-radius: 0;
	background: none;
}

.hz-lp .hz-foot .hz-photo::before { content: none; }

.hz-lp .hz-foot .hz-photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* 事務所名：赤 #bb3b46 Medium 26/48 */
.hz-lp .hz-foot__name {
	position: relative;
	z-index: 1;
	margin: calc(50 * var(--u)) 0 0;
	padding: 0;
	color: var(--hz-red);
	font-family: var(--hz-sans);
	font-weight: 500;
	font-size: max(12px, calc(26 * var(--u)));
	line-height: calc(48 / 26);
	white-space: pre-wrap;
}

/* 住所：赤 Medium 24/40・3行 */
.hz-lp .hz-foot__addr {
	position: relative;
	z-index: 1;
	margin: calc(17 * var(--u)) 0 0;
	color: var(--hz-red);
	font-family: var(--hz-sans);
	font-weight: 500;
	font-size: max(12px, calc(24 * var(--u)));
	line-height: calc(40 / 24);
}

/* ==========================================================================
   KV — Frame 9（767:1497）実測
   ========================================================================== */

.hz-lp { --hz-logo-red: #e36961; }

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

/* 背景写真 image 8: 2552x1914 @ (-926,-169) */
.hz-lp .hz-kv__photo {
	position: absolute;
	left: calc(-926 * var(--u));
	top: calc(-169 * var(--u));
	width: calc(2552 * var(--u));
	height: calc(1914 * var(--u));
	margin: 0;
	background: var(--hz-img-kv-bg) center / cover no-repeat;
}

/* ロゴ群 Group 227: 706x590 @ (-169,-212) */
.hz-lp .hz-kv__logo {
	position: absolute;
	left: calc(-169 * var(--u));
	top: calc(-212 * var(--u));
	z-index: 1;
	width: calc(706 * var(--u));
	height: calc(590 * var(--u));
	margin: 0;
	background: var(--hz-img-kv-logo-mark) center / contain no-repeat;
	pointer-events: none;
}

.hz-lp .hz-kv__logo::after {
	content: "";
	position: absolute;
	left: calc(116 * var(--u));
	top: calc(258 * var(--u));
	width: calc(208 * var(--u));
	height: calc(208 * var(--u));
	background: var(--hz-img-kv-logo) center / contain no-repeat;
}

.hz-lp .hz-kv__inner { position: relative; z-index: 2; height: 100%; padding: 0; }
.hz-lp .hz-kv__head { display: contents; }

/* 見出し Group 47 @ (0,134)。白帯 437x89@136 / 593x86@231 / 252x86@323 */
.hz-lp .hz-kv__title {
	position: absolute;
	left: calc(30 * var(--u));
	top: calc(134 * var(--u));
	margin: 0;
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(60 * var(--u)));
	line-height: calc(90 / 60);
	white-space: nowrap;
}

.hz-lp .hz-kv__title::before {
	content: "";
	position: absolute;
	left: calc(-30 * var(--u));
	top: calc(2 * var(--u));
	width: calc(437 * var(--u));
	height: calc(89 * var(--u));
	z-index: -1;
	background: #fff;
	box-shadow:
		calc(156 * var(--u)) calc(95 * var(--u)) 0 0 #fff,
		calc(-93 * var(--u)) calc(187 * var(--u)) 0 0 #fff;
}

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

/* バッジ Group 60: 129x128 @ (63,433) / (176,433) */
.hz-lp .hz-kv__badges {
	position: absolute;
	left: calc(63 * var(--u));
	top: calc(433 * var(--u));
	display: flex;
	gap: calc(-16 * var(--u));
	margin: 0;
	z-index: 2;
}

.hz-lp .hz-kv__badge {
	display: grid;
	place-content: center;
	width: calc(129 * var(--u));
	height: calc(128 * var(--u));
	margin: 0;
	border-radius: 0;
	background: url("./images/hz/kv9-badge-circle.svg") center / contain no-repeat;
	color: #fff;
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(34 * var(--u)));
	line-height: calc(37 / 34);
	letter-spacing: calc(4 * var(--u));
	text-align: center;
}

.hz-lp .hz-kv__badge:nth-child(2) {
	margin-inline-start: calc(-16 * var(--u));
	font-size: max(14px, calc(22 * var(--u)));
	line-height: calc(21 / 22);
	letter-spacing: calc(1 * var(--u));
}

.hz-lp .hz-kv__badge:nth-child(2) strong { display: block; font-weight: 700; font-size: max(14px, calc(34 * var(--u))); line-height: calc(35 / 34); }

/* 実績バー Group 63 @ (190,780) 513x114。赤ピル2つ + 下線画像 */
.hz-lp .hz-kv__card {
	position: absolute;
	left: calc(190 * var(--u));
	top: calc(780 * var(--u));
	width: calc(513 * var(--u));
	margin: 0;
	padding: 0;
	background: none;
	overflow: visible;
}

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

.hz-lp .hz-kv__stats {
	display: grid;
	grid-template-columns: calc(235 * var(--u)) calc(255 * var(--u));
	gap: calc(23 * var(--u));
	width: 100%;
	height: calc(114 * var(--u));
	margin: 0;
	border: 0;
	background: none;
}

.hz-lp .hz-kv__stat {
	position: relative;
	margin: 0;
	padding-block-start: calc(2 * var(--u));
	color: #fff;
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(20 * var(--u)));
	line-height: calc(50 / 20);
	letter-spacing: calc(1 * var(--u));
	text-align: center;
	background: url("./images/hz/kv9-statline.png") center bottom / 100% calc(37 * var(--u)) no-repeat;
}

/* 上段ラベルの赤ピル */
.hz-lp .hz-kv__stat::before {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(11 * var(--u));
	width: calc(179 * var(--u));
	height: calc(30 * var(--u));
	translate: -50% 0;
	z-index: -1;
	border-radius: calc(80 * var(--u));
	background: var(--hz-logo-red);
}

.hz-lp .hz-kv__stat:nth-child(2)::before { width: calc(183 * var(--u)); }

.hz-lp .hz-kv__stat strong {
	display: block;
	color: var(--hz-logo-red);
	font-weight: 900;
	font-size: max(14px, calc(38 * var(--u)));
	line-height: calc(50 / 38);
}

.hz-lp .hz-kv__stat:nth-child(2) strong { font-size: max(14px, calc(46 * var(--u))); }
.hz-lp .hz-kv__stat:nth-child(2) strong em { font-style: normal; font-weight: 900; font-size: max(14px, calc(28 * var(--u))); letter-spacing: calc(4 * var(--u)); }
.hz-lp .hz-kv__stat:nth-child(2) strong i { font-style: normal; font-weight: 400; font-size: max(14px, calc(28 * var(--u))); }

/* 弁護士切り抜き 257x437 @ (-5,713) */
.hz-lp .hz-kv__figure {
	position: absolute;
	left: calc(-5 * var(--u));
	top: calc(713 * var(--u));
	width: calc(257 * var(--u));
	height: calc(437 * var(--u));
	margin: 0;
	background: var(--hz-img-kv9-lawyer) center / cover no-repeat;
	-webkit-mask: url("./images/hz/kv9-cardmask.svg") calc(6 * var(--u)) calc(15 * var(--u)) / calc(749 * var(--u)) calc(314 * var(--u)) no-repeat;
	mask: url("./images/hz/kv9-cardmask.svg") calc(6 * var(--u)) calc(15 * var(--u)) / calc(749 * var(--u)) calc(314 * var(--u)) no-repeat;
}

/* 名前バッジ：白75% 183x53 radius8 @ (41,969) */
.hz-lp .hz-kv__badge-name {
	position: absolute;
	left: calc(46 * var(--u));
	top: calc(256 * var(--u));
	display: grid;
	place-content: center;
	width: calc(183 * var(--u));
	height: calc(53 * var(--u));
	margin: 0;
	border-radius: calc(8 * var(--u));
	background: rgba(255, 255, 255, .75);
	color: var(--hz-text);
	font-family: var(--hz-serif);
	font-weight: 500;
	font-size: max(14px, calc(14 * var(--u)));
	line-height: calc(24 / 14);
	text-align: center;
	text-shadow: none;
}

.hz-lp .hz-kv__badge-name strong { font-weight: 500; font-size: max(14px, calc(18 * var(--u))); }

/* ピンク帯 690x120 @ y917 + 影 5px下 */
.hz-lp .hz-kv__band {
	position: absolute;
	left: 50%;
	top: calc(917 * var(--u));
	box-sizing: border-box;
	display: grid;
	place-content: center;
	width: calc(690 * var(--u));
	min-height: calc(120 * var(--u));
	translate: -50% 0;
	margin: 0;
	padding: 0 0 0 calc(209 * var(--u));
	border-radius: calc(80 * var(--u));
	background: var(--hz-pink);
	box-shadow: 0 calc(5 * var(--u)) 0 var(--hz-pink-lt);
	color: #fff;
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(34 * var(--u)));
	line-height: calc(46 / 34);
	letter-spacing: calc(2 * var(--u));
	text-align: center;
}

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

/* 補足文 @ y1066 */
.hz-lp .hz-kv__note {
	position: absolute;
	left: 50%;
	top: calc(1066 * var(--u));
	width: calc(690 * var(--u));
	translate: -50% 0;
	margin: 0;
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 600;
	font-size: max(14px, calc(26 * var(--u)));
	line-height: calc(36 / 26);
	text-align: center;
}

.hz-lp .hz-kv__note strong { color: var(--hz-logo-red); font-weight: 600; }

/* 0円 3カラム Group 80: 690x314 @ (30,1169) */
.hz-lp .hz-kv__zeros {
	position: absolute;
	left: calc(30 * var(--u));
	top: calc(1169 * var(--u));
	display: grid;
	grid-template-columns: repeat(3, calc(230 * var(--u)));
	gap: 0;
	width: calc(690 * var(--u));
	height: calc(314 * var(--u));
	margin: 0;
	background: url("./images/hz/kv9-zeros-bg.png") center / 100% 100% no-repeat;
}

.hz-lp .hz-kv__zero {
	position: relative;
	box-sizing: border-box;
	width: calc(230 * var(--u));
	margin: 0;
	padding: 0;
	text-align: center;
}

/* キャプション 230x75（2行）。左端は左上角丸9px、右端は右上角丸9px */
.hz-lp .hz-kv__zero .hz-kv__zero-cap {
	box-sizing: border-box;
	display: grid;
	place-content: center;
	width: calc(230 * var(--u));
	height: calc(75 * var(--u));
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: var(--hz-logo-red);
	color: #fff;
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(22 * var(--u)));
	line-height: calc(30 / 22);
}

.hz-lp .hz-kv__zero:first-child .hz-kv__zero-cap { border-start-start-radius: calc(9 * var(--u)); }
.hz-lp .hz-kv__zero:last-child .hz-kv__zero-cap { border-start-end-radius: calc(9 * var(--u)); }

/* ラベル：白 Bold 20、下地は SVG の赤リボン */
.hz-lp .hz-kv__zero .hz-kv__zero-label {
	position: absolute;
	left: 50%;
	top: calc(92 * var(--u));
	display: grid;
	place-content: center;
	width: calc(190 * var(--u));
	height: calc(55 * var(--u));
	translate: -50% 0;
	margin: 0;
	rotate: none;
	border-radius: 0;
	background: url("./images/hz/kv9-label-l.svg") center top / calc(190 * var(--u)) auto no-repeat;
	color: #fff;
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(20 * var(--u)));
	line-height: calc(25.2 / 20);
	text-align: center;
}

.hz-lp .hz-kv__zero:nth-child(2) .hz-kv__zero-label { background-image: url("./images/hz/kv9-label-c.svg"); }

/* 0円：Serif Black 188px（影付き2枚重ね） + 円 30px */
.hz-lp .hz-kv__zero .hz-kv__zero-num {
	position: absolute;
	left: 50%;
	top: calc(158 * var(--u));
	translate: -50% 0;
	margin: 0;
	color: var(--hz-logo-red);
	font-family: var(--hz-serif);
	font-weight: 900;
	font-size: max(14px, calc(188 * var(--u)));
	line-height: calc(120 / 188);
	white-space: nowrap;
	text-shadow: calc(7 * var(--u)) 0 0 rgba(227, 105, 97, .4);
}

.hz-lp .hz-kv__zero .hz-kv__zero-num em {
	font-style: normal;
	color: var(--hz-logo-red);
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(30 * var(--u)));
	text-shadow: none;
}

/* きらめき 42x42 @ 各カラム左上 */
.hz-lp .hz-kv__zero .hz-kv__zero-num::before {
	content: "";
	position: absolute;
	left: calc(-72 * var(--u));
	top: calc(-38 * var(--u));
	width: calc(42 * var(--u));
	height: calc(42 * var(--u));
	transform: rotate(168.61deg) scaleY(-1);
	background: url("./images/hz/kv9-spark.png") center / contain no-repeat;
}

/* 補足行 @ (30,1538) */
.hz-lp .hz-kv__sub {
	position: absolute;
	left: calc(30 * var(--u));
	top: calc(1538 * var(--u));
	width: calc(690 * var(--u));
	margin: 0;
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 500;
	font-size: max(14px, calc(24 * var(--u)));
	line-height: calc(32 / 24);
	text-align: center;
}

/* CTA 360x104 ×2 @ (12,1587) gap6 */
.hz-lp .hz-kv__cta {
	position: absolute;
	left: calc(12 * var(--u));
	top: calc(1587 * var(--u));
	display: grid;
	grid-template-columns: calc(360 * var(--u)) calc(360 * var(--u));
	gap: calc(6 * var(--u));
	width: calc(726 * var(--u));
	margin: 0;
}

.hz-lp .hz-kv__cta .wp-block-button__link {
	width: 100%;
	min-height: calc(104 * var(--u));
	padding: calc(46 * var(--u)) calc(10 * var(--u)) calc(16 * var(--u));
	border-radius: calc(80 * var(--u));
	background: var(--hz-green);
	font-size: max(14px, calc(24 * var(--u)));
	line-height: calc(29 / 24);
}


/* ===== sec03 — Frame 9 実測 ===== */
.hz-lp .hz-sec--delay { background: #fff; }

/* 見出し @ (30,8479) = セクション上端から 72px */
.hz-lp .hz-sec--delay .hz-h2 {
	margin-block-start: 0;
	color: var(--hz-green-tx);
	font-family: var(--hz-serif);
	font-weight: 600;
	font-size: max(14px, calc(46 * var(--u)));
	line-height: calc(66 / 46);
	text-align: center;
}

/* 汎用 .hz-h2 strong は数字強調用に font-size:76u が付いているため
   見出し本来のサイズに戻す。
   自前でセルフホストしている Noto Serif JP は 600〜900 が同一の Bold
   ファイルにまとまっており太さで差別化できないため、この4文字だけ
   Google Fonts から真の Black(900) を読み込んで使う
   (inc/horizon-lp.php の hz_lp_google_fonts_url() で読み込み設定)。 */
.hz-lp .hz-sec--delay .hz-h2 strong {
	font-size: inherit;
	font-family: "Noto Serif JP", var(--hz-serif);
	font-weight: 900;
}

/* 「先延ばし」の後ろの改行は 390px 以下でのみ有効にする
   (それより広い画面では「先延ばしにしないでください。」を1行で表示する) */
.hz-lp .hz-sec--delay .hz-h2 .hz-br-sp { display: none; }

/* 390px以下は無理に2行に収めず、実測どおりの文字サイズで3行に折り返してよい */
@container (max-width: 390px) {
	.hz-lp .hz-sec--delay .hz-h2 {
		font-size: max(14px, calc(56 * var(--u)));
		line-height: calc(80 / 56);
	}

	.hz-lp .hz-sec--delay .hz-h2 .hz-br-sp { display: inline; }
}

/* リード @ (30,8690) 690x213・罫線 569px @ y8905 */
.hz-lp .hz-sec--delay .hz-lead {
	position: relative;
	width: calc(690 * var(--u));
	margin: calc(48 * var(--u)) auto 0;
	padding-block-end: calc(48 * var(--u));
	border: 0;
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(52 / 32);
	text-align: center;
}

.hz-lp .hz-sec--delay .hz-lead strong { color: #e36961; font-weight: 700; }

.hz-lp .hz-sec--delay .hz-lead::after {
	content: "";
	position: absolute;
	bottom: calc(33 * var(--u));
	left: calc(40 * var(--u));
	width: calc(569 * var(--u));
	height: calc(2 * var(--u));
	background: url("./images/hz/sec03-line5.svg") center / 100% 100% no-repeat;
}

/* カード：緑5px破線・角丸30・地色なし。枠は上端から 23px */
.hz-lp .hz-casebox {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	margin-block-start: calc(89 * var(--u));
	padding: calc(140 * var(--u)) calc(45 * var(--u)) calc(56 * var(--u));
	border: 0;
	border-radius: 0;
	background: none;
}

/* 2枚目のカードは中のピルが2行(top:-30u)で上にはみ出す分が増えるので、
   1枚目のカードとぶつからないよう間隔を広げる。 */
.hz-lp .hz-casebox:nth-of-type(2) {
	margin-block-start: calc(150 * var(--u));
}

/* 枠線カードの直後に続く、枠の外の補足文との間隔。 */
.hz-lp .hz-casebox + .hz-note {
	margin-block-start: calc(30 * var(--u));
}

.hz-lp .hz-casebox::after {
	content: "";
	position: absolute;
	left: 0;
	top: calc(23 * var(--u));
	right: 0;
	bottom: 0;
	z-index: -1;
	border: calc(5 * var(--u)) dashed var(--hz-green);
	border-radius: calc(30 * var(--u));
}

/* ピル 526x75 @ x77・左上と右下だけ角丸30
   ※中身が「地の文 + <strong> + 地の文」のように要素混在のテキストだと、
   grid(flexも同様)は各ランを別々のアイテム=別々の行として扱ってしまい、
   3行に分割される原因になっていた(0円バッジのときと同じ問題)。
   table-cell は縦中央にできるが、position:absolute の要素では仕様上
   自動的に display:block に変換されてしまい(いわゆる blockification)、
   vertical-align が効かなくなるため使えない。
   flex/grid は absolute でも blockify されず使えるので、
   grid 自体は残し、中身を1つの <span> でまとめてアイテムを1個だけにする
   ことで分割を防ぐ(HTML側: .hz-pill__inner を追加)。 */
.hz-lp .hz-casebox .hz-pill {
	position: absolute;
	left: calc(77 * var(--u));
	top: 0;
	box-sizing: border-box;
	display: grid;
	place-content: center;
	text-align: center;
	width: calc(526 * var(--u));
	max-width: none;
	min-height: calc(75 * var(--u));
	translate: none;
	margin: 0;
	padding: 0;
	border-radius: calc(30 * var(--u)) 0 calc(30 * var(--u)) 0;
	background: var(--hz-green);
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(40 * var(--u)));
	line-height: 1;
	white-space: nowrap;
}

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

/* 2枚目のピル 547x150（2行）
   .hz-lp .hz-casebox .hz-pill (3クラス, 詳細度0,3,0) より詳細度が低いと
   width/min-height/line-height が無視されてしまうため、
   同じ詳細度になるよう .hz-casebox を含めておく。 */
.hz-lp .hz-casebox .hz-pill--2 {
	width: calc(547 * var(--u));
	min-height: calc(150 * var(--u));
	line-height: calc(56 / 40);
	/* 2行ぶん背が高い分、top:0のままだと下の本文側に食い込むので
	   少し上にずらして逃がす。 */
	top: calc(-60 * var(--u));
}

/* アラート：三角SVG 76px + 赤 #bb3b46 Bold 32
   アイコン+テキストをまとめて中央寄せしたいので、flexではなく
   .hz-alert 自体は text-align:center のブロックにし、
   アイコンは中の .hz-alert__inner (inline-block) 側に付けて、
   テキストと一緒に中央へ移動するようにする。 */
.hz-lp .hz-alert {
	position: relative;
	display: block;
	text-align: center;
	min-height: calc(76 * var(--u));
	margin: 0;
	padding-inline-start: 0;
	color: var(--hz-red);
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(32.4 / 32);
}

/* アイコンは .hz-alert__inner::before に付け替えたので、
   古いパスに残っている .hz-alert::before (本体側) は無効化する。 */
.hz-lp .hz-alert::before {
	content: none;
}

.hz-lp .hz-alert__inner {
	position: relative;
	display: inline-block;
	padding-inline-start: calc(86 * var(--u));
}

.hz-lp .hz-alert__inner::before {
	content: "！";
	display: grid;
	place-content: center;
	position: absolute;
	left: 0;
	top: 50%;
	width: calc(76 * var(--u));
	height: calc(76 * var(--u));
	translate: 0 -50%;
	clip-path: none;
	padding: 0;
	background: url("./images/hz/sec03-alert.svg") center / contain no-repeat;
	color: #fff;
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(32.4 / 32);
	padding-block-start: calc(14 * var(--u));
}

/* 強調：黒 Bold 28 中央 */
.hz-lp .hz-emph {
	margin-block-start: calc(30 * var(--u));
	color: var(--hz-text);
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(44 / 28);
	text-align: center;
}

/* 本文：#333 28/52・強調は緑 SemiBold */
.hz-lp .hz-casebox .hz-text {
	color: var(--hz-text);
	font-weight: 400;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(52 / 28);
	text-align: left;
}

.hz-lp .hz-casebox .hz-text strong { color: var(--hz-green-tx); font-weight: 600; }

/* --- 時効図解：2分割（赤/緑・角丸は外側のみ） --- */
.hz-lp .hz-timeline { margin-block-start: calc(58 * var(--u)); }

.hz-lp .hz-timeline__bar { display: grid; margin: 0; }

/* wp:group はレンダリング時に .wp-block-group__inner-container で1段ラップされるため、
   .hz-timeline__bar > p は実際には子ではなく孫になりマッチしない。
   inner-container を display:contents で消して、<p> が直接 grid アイテムになるようにする。 */
.hz-lp .hz-timeline__bar > .wp-block-group__inner-container,
.hz-lp .hz-timeline__legend > .wp-block-group__inner-container {
	display: contents;
}

/* .hz-timeline__arrows の中身は "&nbsp;" だけの空ラッパーだが、
   これも grid アイテムとして数えられてしまい、::before(赤矢印)・
   inner-container(空)・::after(緑矢印)の3つが2列グリッドに並ぼうとして
   ::after が次の行にあふれて非表示になる。中身がないので丸ごと消す。 */
.hz-lp .hz-timeline__arrows > .wp-block-group__inner-container {
	display: none;
}

.hz-lp .hz-timeline--2 .hz-timeline__bar { grid-template-columns: calc(300 * var(--u)) calc(300 * var(--u)); justify-content: space-between; }
.hz-lp .hz-timeline--3 .hz-timeline__bar { grid-template-columns: calc(200 * var(--u)) calc(200 * var(--u)) calc(200 * var(--u)); justify-content: space-between; }

.hz-lp .hz-timeline__bar p {
	box-sizing: border-box;
	display: grid;
	place-content: center;
	min-height: calc(75 * var(--u));
	margin: 0;
	border-radius: 0;
	color: #fff;
	font-family: var(--hz-sans);
	font-weight: 500;
	font-size: max(14px, calc(24 * var(--u)));
	line-height: calc(52 / 24);
	text-align: center;
}

.hz-lp .hz-timeline__bar p:first-child {
	border-start-start-radius: calc(10 * var(--u));
	border-end-start-radius: calc(10 * var(--u));
	background: var(--hz-red);
}

.hz-lp .hz-timeline__bar p:last-child {
	border-start-end-radius: calc(10 * var(--u));
	border-end-end-radius: calc(10 * var(--u));
	background: var(--hz-green);
	font-weight: 700;
}

.hz-lp .hz-timeline--3 .hz-timeline__bar p:nth-child(2) { background: rgba(235, 230, 90, .6); color: #000; }

/* 矢印：296px ×2 を SVG 実物で */
.hz-lp .hz-timeline__arrows {
	display: grid;
	height: calc(12 * var(--u));
	margin: calc(11 * var(--u)) 0 0;
}

.hz-lp .hz-timeline--2 .hz-timeline__arrows { grid-template-columns: calc(296 * var(--u)) calc(296 * var(--u)); }

.hz-lp .hz-timeline--2 .hz-timeline__arrows::before,
.hz-lp .hz-timeline--2 .hz-timeline__arrows::after { content: ""; background: center / 100% auto no-repeat; }
.hz-lp .hz-timeline--2 .hz-timeline__arrows::before { background-image: url("./images/hz/sec03-arrow-red.svg"); }
.hz-lp .hz-timeline--2 .hz-timeline__arrows::after  { background-image: url("./images/hz/sec03-arrow-green.svg"); }
.hz-lp .hz-timeline--3 .hz-timeline__arrows { background: url("./images/hz/sec03-arrow-full.svg") center / 100% auto no-repeat; }

/* 凡例は固定 gap でラベルを狭い箱に押し込めていたせいで
   「古い分(時効で消滅)」のようなテキストが括弧の途中で折り返されていた。
   バーと同じく space-between にして、1つ目は左端・2つ目は右端に置き、
   間の余白は固定せず、それぞれ最大限の幅をとれるようにする。
   .hz-timeline--2 側にだけ残っていた古い gap/padding の上書きも無効化する。 */
.hz-lp .hz-timeline--2 .hz-timeline__legend,
.hz-lp .hz-timeline--3 .hz-timeline__legend {
	justify-content: space-between;
	gap: 0;
	padding-inline-start: 0;
}

.hz-lp .hz-timeline__legend {
	display: flex;
	justify-content: space-between;
	gap: 0;
	padding-inline-start: 0;
	margin: 0;
}

.hz-lp .hz-timeline__legend p {
	margin: 0;
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(24 * var(--u)));
	line-height: calc(52 / 24);
}

.hz-lp .hz-timeline__legend p:first-child { color: var(--hz-red); }
.hz-lp .hz-timeline__legend p:last-child  { color: var(--hz-green); }


/* ===== sec04 — Frame 9 実測 ===== */
.hz-lp .hz-sec--line {
	position: relative;
	padding-block: 0 calc(100 * var(--u));
	background: #fff;
	overflow: hidden;
}

/* 装飾円 284px @ (-71,+1161) / 297px @ (531,+1413) */
.hz-lp .hz-sec--line::before,
.hz-lp .hz-sec--line::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	background: rgba(79, 169, 122, .12);
	pointer-events: none;
}

/* 装飾円はセクション上端からの絶対位置(top:1161u/1413u)で置かれていたため、
   スマホモックの作り直しで位置がずれてしまった。特徴ブロック側に
   sec04-ellipse-l/r.svg で置き直すので、こちらは使わない。 */
.hz-lp .hz-sec--line::before,
.hz-lp .hz-sec--line::after { content: none; }

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

/* 見出し帯：左端は画面の端まで突き抜け、右側は614uの位置で切る。
   負のマージンも固定値(-30u)のズラしも効かなかったので、祖先のパディング量に
   依存しない計算にする。100% = 親(インナーコンテナ)の幅、100cqi = ページ(.hz-lp)の幅。
   親はページ内で左右対称に配置されているので、その差の半分だけ左にずらすと
   ちょうどページの左端に揃う。テキストの左端は本文と揃えたいので padding-left は 60u。 */
.hz-lp .hz-sec--line .hz-band {
	position: relative;
	left: calc((100% - 100cqi) / 2);
	display: block;
	box-sizing: border-box;
	width: calc(614 * var(--u));
	min-height: calc(205 * var(--u));
	margin: 0;
	padding: calc(17 * var(--u)) calc(30 * var(--u)) calc(17 * var(--u)) calc(60 * var(--u));
	background: radial-gradient(circle at 50% 50%, #d25a67 0%, #bc424f 50%, #a72937 100%);
	color: #fff;
	font-family: var(--hz-serif);
	font-weight: 700;
	font-size: max(14px, calc(56 * var(--u)));
	line-height: calc(80 / 56);
}

/* LINE モック：sec04-chat_bg.png(750x886のスマホ枠)を敷き、
   画面の白い部分(x84-674 / y139-下端、ノッチ下端はy180)にチャットUIを重ねる。
   中身は静止画やGIFではなく実テキスト + hz-chat.js のアニメーション。 */
.hz-lp .hz-linemock {
	position: relative;
	box-sizing: border-box;
	width: auto;
	height: auto;
	/* 画像は750x886。上を210u帯に隠すぶん、下に210u足して画面を長く見せる */
	aspect-ratio: 750 / 1096;
	/* 左右: 祖先のパディングを打ち消してページ幅いっぱいに敷く
	   上: 見出しの帯の後ろにスマホの上部が潜り込むよう引き上げる
	   (帯は z-index:1 を持っているのでスマホより前面に出る) */
	margin: calc(-210 * var(--u)) calc((100% - 100cqi) / 2) 0;
	border-radius: 0;
	/* 1枚目=スマホ枠の画像(上端ぞろえ)。画像の下端より下は、画像の最下行と
	   同じ色構成(緑→ベゼル→白い画面→ベゼル→緑)のグラデーションで継ぎ足し、
	   スマホの本体がそのまま下に伸びているように見せる。 */
	background:
		url("./images/hz/sec04-chat_bg.png") top center / 100% auto no-repeat,
		linear-gradient(
			90deg,
			#b3ddb4 0 6.27%,
			#000 6.27% 6.67%,
			#858585 6.67% 7.33%,
			#000 7.33% 8%,
			#464646 8% 8.8%,
			#0c0c0c 8.8% 11.07%,
			#454545 11.07% 11.2%,
			#fff 11.2% 90%,
			#000 90% 91.33%,
			#1d1d1d 91.33% 92.27%,
			#3d3d3d 92.27% 93.2%,
			#000 93.2% 93.87%,
			#8e8e8e 93.87% 94.53%,
			#060606 94.53% 94.93%,
			#a3d796 94.93% 100%
		);
}

/* 旧デザイン(緑ヘッダー帯)の擬似要素は使わない */
.hz-lp .hz-linemock::before { content: none; }

/* 下のブロックへつなぐ点線。スマホ画面の上に少し重なるところから始まり、
   下は「スマホひとつで完結」の枠(margin-top:118u)の上端で終わる。
   長さを変えても破線の間隔が崩れないよう、SVGではなくCSSで描いている
   (色と破線の刻みは sec04-vline.svg と同じ #479E44 / 6・6)。 */
.hz-lp .hz-linemock::after {
	content: "";
	position: absolute;
	left: 50%;
	/* 古いパスの top:175u が残っていると bottom が無視されるので明示的に消す */
	top: auto;
	bottom: calc(-118 * var(--u));
	translate: -50% 0;
	width: calc(5 * var(--u));
	height: calc(240 * var(--u));
	background: repeating-linear-gradient(
		to bottom,
		var(--hz-green-tx) 0 calc(6 * var(--u)),
		transparent calc(6 * var(--u)) calc(12 * var(--u))
	);
}

.hz-lp .hz-chat {
	position: absolute;
	left: calc(84 * var(--u));
	/* 画面の白い部分(上端138u・左端84u・角丸58u)にぴったり重ねる。
	   上端〜210uは見出しの帯の裏に隠れるので、ノッチを覆っても問題ない。 */
	top: calc(138 * var(--u));
	width: calc(591 * var(--u));
	bottom: 0;
	border-start-start-radius: calc(58 * var(--u));
	border-start-end-radius: calc(58 * var(--u));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fcfbf8;
	font-family: var(--hz-sans);
	/* スマホの画面内の模型なので、本文の下限(14px)は適用しない */
	text-align: left;
}

.hz-lp .hz-chat__head {
	flex: none;
	margin: 0;
	/* 上側(〜210u)は見出しの帯に隠れるので、文字が帯の下に出るよう上を厚めに取る */
	padding: calc(96 * var(--u)) calc(24 * var(--u)) calc(26 * var(--u));
	background: var(--hz-green);
	color: #fff;
	font-weight: 500;
	font-size: calc(26 * var(--u));
	line-height: 1.4;
	text-align: center;
}

.hz-lp .hz-chat__thread {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: calc(24 * var(--u));
	padding: calc(28 * var(--u)) calc(24 * var(--u));
	overflow: hidden;
}

.hz-lp .hz-chat__row {
	display: flex;
	gap: calc(14 * var(--u));
	align-items: flex-start;
}

.hz-lp .hz-chat__row--user {
	flex-direction: column;
	align-items: flex-end;
	gap: 0;
}

.hz-lp .hz-chat__avatar {
	flex: none;
	width: calc(70 * var(--u));
	height: calc(70 * var(--u));
	border-radius: calc(20 * var(--u));
	/* 152% / 50% 14% で顔から肩までが収まるようトリミングしている */
	background: #fff url("./images/hz/chat_image.jpg") 50% 14% / 152% auto no-repeat;
}

.hz-lp .hz-chat__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.hz-lp .hz-chat__bubble {
	box-sizing: border-box;
	max-width: calc(430 * var(--u));
	margin: 0;
	padding: calc(16 * var(--u)) calc(22 * var(--u));
	border-radius: calc(18 * var(--u));
	background: #fff;
	border: calc(1 * var(--u)) solid #ececec;
	box-shadow: calc(1 * var(--u)) calc(2 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .04);
	color: var(--hz-text);
	font-weight: 400;
	font-size: calc(24 * var(--u));
	line-height: 1.65;
}

.hz-lp .hz-chat__row--user .hz-chat__bubble {
	border-color: transparent;
	background: var(--hz-green);
	box-shadow: calc(1 * var(--u)) calc(2 * var(--u)) calc(8 * var(--u)) rgba(79, 169, 122, .2);
	color: #fff;
}

.hz-lp .hz-chat__meta {
	margin: calc(6 * var(--u)) 0 0;
	color: #a3a3a3;
	font-weight: 400;
	font-size: calc(16 * var(--u));
	line-height: 1.4;
}

/* 「※架空の相談例です」はスマホ画面の右下に置く */
.hz-lp .hz-chat__note {
	position: absolute;
	right: calc(24 * var(--u));
	bottom: calc(22 * var(--u));
	margin: 0;
	color: #9a9a9a;
	font-weight: 400;
	font-size: calc(16 * var(--u));
	line-height: 1.4;
}

/* --- アニメーション（hz-chat.js が付け外しするクラス） --- */
@keyframes hz-chat-pop {
	0%   { opacity: 0; transform: translateY(calc(16 * var(--u))) scale(.4, .4); }
	35%  { opacity: 1; transform: translateY(calc(-4 * var(--u))) scale(1.15, .75); }
	55%  { opacity: 1; transform: translateY(calc(2 * var(--u))) scale(.9, 1.12); }
	75%  { opacity: 1; transform: translateY(calc(-1 * var(--u))) scale(1.04, .97); }
	100% { opacity: 1; transform: translateY(0) scale(1, 1); }
}

@keyframes hz-chat-dot {
	0%, 60%, 100% { transform: translateY(0); opacity: .4; }
	30%           { transform: translateY(calc(-6 * var(--u))); opacity: 1; }
}

@keyframes hz-chat-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* JSが動いている間だけ隠す。JS無効時は通常表示のまま */
.hz-chat.is-anim .hz-chat__row[hidden] { display: none; }

.hz-chat.is-anim .hz-chat__row .hz-chat__bubble {
	animation: hz-chat-pop .55s cubic-bezier(.32, .1, .35, 1) both;
	transform-origin: bottom center;
}

.hz-chat.is-anim .hz-chat__row--user .hz-chat__bubble { transform-origin: bottom right; }

.hz-chat.is-anim .hz-chat__row .hz-chat__meta {
	animation: hz-chat-fade .3s ease .45s both;
}

.hz-lp .hz-chat__dots {
	display: flex;
	gap: calc(6 * var(--u));
	align-items: center;
	padding: calc(20 * var(--u)) calc(22 * var(--u));
}

.hz-lp .hz-chat__dots span {
	width: calc(10 * var(--u));
	height: calc(10 * var(--u));
	border-radius: 50%;
	background: #b7b7b7;
	animation: hz-chat-dot .9s ease-in-out infinite;
}

.hz-lp .hz-chat__row--user .hz-chat__dots span { background: rgba(255, 255, 255, .85); }

@media (prefers-reduced-motion: reduce) {
	.hz-chat.is-anim .hz-chat__row .hz-chat__bubble,
	.hz-chat.is-anim .hz-chat__row .hz-chat__meta,
	.hz-lp .hz-chat__dots span { animation: none; }
}

.hz-lp .hz-linemock__cap {
	position: relative;
	margin: calc(12 * var(--u)) calc(133 * var(--u)) 0 0;
	color: #444;
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(12px, calc(18 * var(--u)));
	line-height: calc(18 / 18);
	text-align: right;
}

/* 縦線 97px @ x378 */
.hz-lp .hz-linemock__cap::after {
	content: "";
	position: absolute;
	left: calc(348 * var(--u));
	top: calc(26 * var(--u));
	width: calc(2 * var(--u));
	height: calc(97 * var(--u));
	background: url("./images/hz/sec04-vline.svg") center / 100% 100% no-repeat;
}

/* 強調ブロック 602x138 / テキスト幅550・中心+26px */
.hz-lp .hz-sec--line .hz-emph {
	position: relative;
	box-sizing: border-box;
	width: calc(602 * var(--u));
	height: calc(138 * var(--u));
	margin: calc(118 * var(--u)) 0 0 calc(50 * var(--u));
	padding: calc(21 * var(--u)) 0 0 calc(72 * var(--u));
	background: url("./images/hz/sec04-emphframe.svg") center / 100% 100% no-repeat;
	color: var(--hz-green-tx);
	font-family: var(--hz-sans);
	font-weight: 500;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(45 / 28);
	letter-spacing: calc(3 * var(--u));
	text-align: center;
}

.hz-lp .hz-sec--line .hz-emph strong {
	display: block;
	color: #e36961;
	font-weight: 700;
	font-size: max(14px, calc(42 * var(--u)));
	line-height: calc(50 / 42);
	letter-spacing: calc(3 * var(--u));
}

/* スマホアイコン 48x75 @ +56/+33 */
.hz-lp .hz-sec--line .hz-emph::before {
	content: "";
	position: absolute;
	left: calc(56 * var(--u));
	top: calc(33 * var(--u));
	width: calc(48 * var(--u));
	height: calc(75 * var(--u));
	background: url("./images/hz/sec04-sp.svg") center / contain no-repeat;
}

/* きらめき 23.7x23.5 @ +28.8/+15.2（169.06deg・上下反転） */
.hz-lp .hz-sec--line .hz-emph::after {
	content: "";
	position: absolute;
	left: calc(28.81 * var(--u));
	top: calc(15.17 * var(--u));
	width: calc(23.66 * var(--u));
	height: calc(23.53 * var(--u));
	transform: rotate(169.06deg) scaleY(-1);
	background: var(--hz-img-sec04-spark) center / contain no-repeat;
}

/* 特徴：円170px + 見出し 黒 Serif Medium 40/48 + 本文 #444 24/38 */
.hz-lp .hz-features {
	position: relative;
	/* ぼかし円(z-index:-1)がセクションの背景の裏に回り込まないよう、
	   ここで独自の重なり順の基準をつくる */
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: calc(100 * var(--u));
	margin-block-start: calc(69 * var(--u));
}

/* 背景のぼかし円。左はアイコンの後ろ、右は少し下げて右端からはみ出させる */
.hz-lp .hz-features::before,
.hz-lp .hz-features::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

.hz-lp .hz-features::before {
	left: calc(-70 * var(--u));
	top: calc(-70 * var(--u));
	width: calc(284 * var(--u));
	height: calc(284 * var(--u));
	background: url("./images/hz/sec04-ellipse-l.svg") center / contain no-repeat;
}

.hz-lp .hz-features::after {
	right: calc(-120 * var(--u));
	top: calc(120 * var(--u));
	width: calc(297 * var(--u));
	height: calc(297 * var(--u));
	background: url("./images/hz/sec04-ellipse-r.svg") center / contain no-repeat;
}

.hz-lp .hz-feature {
	display: grid;
	grid-template-columns: calc(170 * var(--u)) 1fr;
	gap: calc(48 * var(--u));
	align-items: center;
	margin: 0;
}

/* アイコンは緑の円 + 白いピクトグラム。円は sec04-circle.svg */
.hz-lp .hz-feature__icon {
	position: relative;
	width: calc(170 * var(--u));
	height: calc(170 * var(--u));
	background: url("./images/hz/sec04-circle.svg") center / contain no-repeat;
}

.hz-lp .hz-feature__icon--time {
	background:
		var(--hz-img-sec04-icon-time) center / calc(104 * var(--u)) auto no-repeat,
		url("./images/hz/sec04-circle.svg") center / contain no-repeat;
}

.hz-lp .hz-feature__icon--area {
	background:
		url("./images/hz/sec04_mapicon.svg") center / calc(95 * var(--u)) auto no-repeat,
		url("./images/hz/sec04-circle.svg") center / contain no-repeat;
}

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

.hz-lp .hz-feature__body {
	margin-block-start: calc(15 * var(--u));
	color: #444;
	font-family: var(--hz-sans);
	font-weight: 400;
	font-size: max(14px, calc(24 * var(--u)));
	line-height: calc(38 / 24);
	text-align: left;
}


/* ==========================================================================
   KV — Frame 9 補正（写真・ロゴ・イラスト）
   座標は PDF から抽出した実測値（750px 基準）。
   ========================================================================== */

/* メイン写真 1126x751 @ (-119,30)。.hz-kv__photo は (-926,-169) 基準。
   右上を残し、左下だけを楕円でフェードさせる。 */
.hz-lp .hz-kv__photo::after {
	content: "";
	position: absolute;
	left: calc(807 * var(--u));
	top: calc(199 * var(--u));
	width: calc(1126 * var(--u));
	height: calc(751 * var(--u));
	background: var(--hz-img-f9-kv-photo) center / cover no-repeat;
	-webkit-mask: radial-gradient(ellipse 56% 49% at 83% 4%, #000 62%, rgba(0, 0, 0, 0) 100%);
	mask: radial-gradient(ellipse 56% 49% at 83% 4%, #000 62%, rgba(0, 0, 0, 0) 100%);
}

/* ロゴピル：白 412x73 @ (-14,47)。丸ロゴ 58x53 @ (37,57) + ワードマーク 298x30 @ (102,72)。 */
.hz-lp .hz-kv__logo {
	left: calc(-14 * var(--u));
	top: calc(47 * var(--u));
	width: calc(412 * var(--u));
	height: calc(73 * var(--u));
	border-radius: calc(40 * var(--u));
	background: #fff var(--hz-img-f9-logo-mark) calc(51 * var(--u)) calc(10 * var(--u)) / calc(58 * var(--u)) auto no-repeat;
	box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .08);
}

.hz-lp .hz-kv__logo::after {
	left: calc(116 * var(--u));
	top: calc(25 * var(--u));
	width: calc(298 * var(--u));
	height: calc(30 * var(--u));
	background: var(--hz-img-f9-logo-text) left center / contain no-repeat;
}

/* 日本地図 134x133 @ (57,600) / スマホ 123x150 @ (213,573)。
   .hz-kv__badges は (63,433) 基準。 */
.hz-lp .hz-kv__badges::before,
.hz-lp .hz-kv__badges::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.hz-lp .hz-kv__badges::before {
	left: calc(-6 * var(--u));
	top: calc(167 * var(--u));
	width: calc(134 * var(--u));
	height: calc(133 * var(--u));
	background: var(--hz-img-f9-kv-japan) center / contain no-repeat;
}

.hz-lp .hz-kv__badges::after {
	left: calc(150 * var(--u));
	top: calc(140 * var(--u));
	width: calc(123 * var(--u));
	height: calc(150 * var(--u));
	background: var(--hz-img-f9-kv-phone) center / contain no-repeat;
}

/* 弁護士（スーツ）232x430 @ (22,729)。マスクなしの切り抜き PNG。 */
.hz-lp .hz-kv__figure {
	left: calc(22 * var(--u));
	top: calc(729 * var(--u));
	width: calc(232 * var(--u));
	height: calc(430 * var(--u));
	background: var(--hz-img-f9-kv-lawyer) center bottom / contain no-repeat;
	-webkit-mask: none;
	mask: none;
}

.hz-lp .hz-kv__badge-name {
	left: calc(38 * var(--u));
	top: calc(267 * var(--u));
	width: calc(170 * var(--u));
	height: calc(50 * var(--u));
	border: calc(2 * var(--u)) solid #c8a55b;
	border-radius: calc(6 * var(--u));
	background: #fff;
	font-size: max(14px, calc(15 * var(--u)));
	line-height: calc(22 / 15);
}

.hz-lp .hz-kv__badge-name strong { font-weight: 600; font-size: max(14px, calc(17 * var(--u))); }

/* 帯 610x127 @ (105,923)。カンプは緑。左側は弁護士写真分を空ける。 */
.hz-lp .hz-kv__band {
	display: block;
	left: calc(105 * var(--u));
	top: calc(923 * var(--u));
	width: calc(610 * var(--u));
	min-height: calc(127 * var(--u));
	translate: none;
	padding: calc(18 * var(--u)) calc(24 * var(--u)) calc(18 * var(--u)) calc(128 * var(--u));
	border-radius: calc(64 * var(--u));
	background: var(--hz-green);
	box-shadow: none;
	text-align: center;
	white-space: nowrap;
}


/* ==========================================================================
   sec02 比較表 — Frame 9 実測
   表 690 幅。ヘッダー 105 / 行 156・207・206・248。
   旧実装は値を position:absolute で重ねていたため 4 行が同じ位置に潰れていた。
   ========================================================================== */

.hz-lp .hz-compares {
	position: relative;
	display: grid;
	grid-template-columns: calc(340 * var(--u)) calc(340 * var(--u));
	justify-content: space-between;
	width: calc(690 * var(--u));
	margin: calc(46 * var(--u)) auto 0;
}

.hz-lp .hz-compare {
	display: grid;
	grid-template-rows: calc(105 * var(--u)) calc(156 * var(--u)) calc(207 * var(--u)) calc(206 * var(--u)) calc(248 * var(--u));
	box-sizing: border-box;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: calc(1 * var(--u)) solid #e0e0e0;
	border-radius: calc(20 * var(--u));
	background: #fff;
	overflow: hidden;
}

.hz-lp .hz-compare.is-ours {
	min-height: 0;
	border: calc(3 * var(--u)) solid var(--hz-green-tx);
}

.hz-lp .hz-compare__head {
	position: static;
	display: grid;
	place-content: center;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: var(--hz-note);
	color: #fff;
	font-family: var(--hz-sans);
	font-weight: 700;
	font-size: max(14px, calc(26 * var(--u)));
	line-height: calc(34 / 26);
}

.hz-lp .hz-compare.is-ours .hz-compare__head {
	right: auto;
	width: auto;
	min-height: 0;
	background: var(--hz-green-tx);
	font-size: max(14px, calc(34 * var(--u)));
}

.hz-lp .hz-compare__row {
	position: relative;
	display: grid;
	place-content: center;
	box-sizing: border-box;
	min-height: 0;
	padding: 0 calc(20 * var(--u));
	text-align: center;
}

.hz-lp .hz-compare__row + .hz-compare__row::before {
	content: "";
	position: absolute;
	left: calc(24 * var(--u));
	right: calc(24 * var(--u));
	top: 0;
	height: calc(1 * var(--u));
	background: #dcdcdc;
}

.hz-lp .hz-compare__value {
	position: static;
	width: auto;
	margin: 0;
}

/* ピンクのピルは 2 列の境界に重ねる。行高に合わせた 4 行グリッド。 */
.hz-lp .hz-comparerows {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(105 * var(--u));
	z-index: 2;
	display: grid;
	grid-template-rows: calc(156 * var(--u)) calc(207 * var(--u)) calc(206 * var(--u)) calc(248 * var(--u));
	justify-items: center;
	width: auto;
	margin: 0;
	translate: none;
}

.hz-lp .hz-comparelabel {
	align-self: start;
	width: auto;
	min-width: calc(190 * var(--u));
	min-height: 0;
	margin: calc(12 * var(--u)) 0 0;
	padding: calc(14 * var(--u)) calc(36 * var(--u));
	border: 0;
	border-radius: calc(40 * var(--u));
	font-size: max(14px, calc(22 * var(--u)));
	line-height: calc(28 / 22);
}

.hz-lp .hz-comparelabel em { font-size: max(14px, calc(16 * var(--u))); line-height: calc(22 / 16); }

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


/* ==========================================================================
   sec12 フォーム — Frame 9 実測
   ========================================================================== */

.hz-lp .hz-sec--form {
	padding-block-start: calc(180 * var(--u));
}

/* 見出しの上に緑のメールバルーン 122x127 @ (306,-70) */
.hz-lp .hz-sec--form .hz-h2 {
	position: relative;
	margin-block-start: calc(80 * var(--u));
	color: var(--hz-green-tx);
	font-size: max(14px, calc(46 * var(--u)));
	line-height: calc(66 / 46);
}

.hz-lp .hz-sec--form .hz-h2::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(100% + 18 * var(--u));
	width: calc(160 * var(--u));
	height: calc(164 * var(--u));
	translate: -50% 0;
	background: url("./images/hz/sec13-lcon.svg") center / contain no-repeat;
}

.hz-lp .hz-sec--form .hz-lead {
	margin-block-start: calc(28 * var(--u));
	font-size: max(14px, calc(26 * var(--u)));
	line-height: calc(44 / 26);
}

.hz-lp .hz-form input,
.hz-lp .hz-form textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
}


/* ==========================================================================
   KV — SP: 完成画像を暫定表示 + 補足文 / CTA(コーディング)
   見出し・バッジ・弁護士写真・0円カードは kv_sp.jpg に焼き込み済みのため、
   ここでは画像 + 補足文 + CTA ボタン2つのみをコーディングする。

   注意: .hz-kv__sub / .hz-kv__cta という名前は上の Frame 9(実測)で
   position: absolute; top/left/width 付きの別レイアウトとして既に使われている。
   同名だと position だけ上書きしても top/left/width が残ってズレるため、
   このブロックでは .hz-kv__subcopy / .hz-kv__ctagroup という新しい名前を使う。
   .hz-kv__visual も同じ理由で新規クラス。
   ========================================================================== */

.hz-lp .hz-sec--kv {
	position: relative;
	height: auto;
	padding: 0 0 calc(36 * var(--u));
	overflow: visible;
	/* kv_sp.jpg の一番下の地色(#cce7b2 実測)に合わせて継ぎ目を消す */
	background: #cce7b2;
}

.hz-lp .hz-kv__visual {
	display: block;
	margin: 0;
}

.hz-lp .hz-kv__visual img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

/* 補足文(画像下・両脇に斜めの小線)
   kv_sp.jpg は 0円カードの下に約 258u 分の緑グラデーションの余白を含んでいる
   (実測: 画像高さ 1736u 中、カード下端が約 1478u)。
   その余白に重ねて表示するため、マイナスマージンで引き上げる。 */
.hz-lp .hz-kv__subcopy {
	position: relative;
	margin: calc(-210 * var(--u)) auto 0;
	padding-inline: calc(60 * var(--u));
	color: #333;
	font-weight: 700;
	font-size: max(14px, calc(26 * var(--u)));
	line-height: calc(36 / 26);
	text-align: center;
}

.hz-lp .hz-kv__subcopy::before,
.hz-lp .hz-kv__subcopy::after {
	content: "";
	position: absolute;
	top: 50%;
	width: calc(2 * var(--u));
	height: calc(32 * var(--u));
	background: currentColor;
	translate: 0 -50%;
}

.hz-lp .hz-kv__subcopy::before { left: calc(30 * var(--u)); rotate: -20deg; }
.hz-lp .hz-kv__subcopy::after  { right: calc(30 * var(--u)); rotate: 20deg; }

/* CTA:緑 / ピンクの独立した2つのピルボタン。アイコンは上、文字は下。 */
.hz-lp .hz-kv__ctagroup {
	display: flex;
	gap: calc(16 * var(--u));
	margin: calc(24 * var(--u)) calc(24 * var(--u)) 0;
}

.hz-lp .hz-kv__ctagroup .wp-block-button {
	flex: 1 1 0;
	margin: 0;
	min-width: 0;
}

.hz-lp .hz-kv__ctagroup .wp-block-button__link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(4 * var(--u));
	box-sizing: border-box;
	width: 100%;
	min-height: calc(112 * var(--u));
	padding: calc(16 * var(--u)) calc(10 * var(--u));
	border: 0;
	border-radius: calc(999 * var(--u));
	background: #4fa97a;
	color: #fff;
	font-weight: 700;
	font-size: calc(23 * var(--u));
	line-height: calc(28 / 23);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, .16);
}

/* このボタンだけは折り返すと見苦しいので、可読性の下限(14px)より
   1行に収まることを優先し、あえてフロアなしの元スケールに戻す。 */
.hz-lp .hz-kv__ctagroup .wp-block-button__link strong { font-weight: 900; font-size: calc(29 * var(--u)); }

.hz-lp .hz-kv__ctagroup .wp-block-button:last-child .wp-block-button__link {
	background: #ff949f;
}

.hz-lp .hz-kv__ctagroup-icon {
	display: inline-flex;
	flex: none;
	width: calc(42 * var(--u));
	height: calc(42 * var(--u));
}

.hz-lp .hz-kv__ctagroup-icon svg,
.hz-lp .hz-kv__ctagroup-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hz-lp .hz-kv__ctagroup-text { display: inline-block; }

/* 右端の丸矢印は PC 専用(hz-lp-pc.css で表示) */
.hz-lp .hz-kv__ctagroup-arrow { display: none; }


/* ==========================================================================
   sec01(その不安...) — SP: 完成イラスト(sec01_img.png) + 背景(sec01_bg.png)

   吹き出し6つ・人物写真は sec01_img.png に統合済みのため、
   個別パーツ(.hz-worryhead / .hz-vos / .hz-vo / .hz-vo__figure)は使わず
   新規クラス(.hz-worry__visual)で組む。
   .hz-sec--worry 自体は hz-lp.css に複数の実測パスが積み重なっており、
   その ::before(旧背景写真オーバーレイ)を content:none で無効化する。
   ========================================================================== */

.hz-lp .hz-sec--worry {
	position: relative;
	overflow: visible;
	padding-block: calc(80 * var(--u)) calc(100 * var(--u));
	background: #fff url("./images/hz/sec01_bg.png") bottom center / cover no-repeat;
}

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

.hz-lp .hz-sec--worry .hz-h2 {
	margin: 0;
	text-align: center;
}

.hz-lp .hz-sec--worry .hz-worry__visual {
	display: block;
	margin-block: calc(56 * var(--u)) 0;
}

.hz-lp .hz-worry__visual img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

/* 点線は「ひとつでも…」側の独立した区切り線(旧: ::before 587u 固定幅)ではなく、
   「ひとりで背負おうとしていませんか？」の下線として span に持たせる。
   こうすると線幅がテキスト幅に自動で一致し、間隔もテキスト基準で決まる。 */
.hz-lp .hz-worry-close::before { content: none; }

/* 2 行目の <strong> は PC 用の強調フック。SP では見た目を変えない */
.hz-lp .hz-worry-close strong { font-weight: inherit; }

.hz-lp .hz-worry-close {
	margin-top: calc(32 * var(--u));
	padding-block-start: 0;
}

.hz-lp .hz-worry-lead__gap {
	position: relative;
	display: inline-block;
	padding-bottom: calc(16 * var(--u));
}

/* 破線: sec01-line15.svg と同じ 8/8 のダッシュを幅に依存せず再現する */
.hz-lp .hz-worry-lead__gap::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: calc(2 * var(--u));
	background: repeating-linear-gradient(
		to right,
		#e36961 0 calc(8 * var(--u)),
		transparent calc(8 * var(--u)) calc(16 * var(--u))
	);
}


/* ==========================================================================
   sec02(着手金も実費も…) — SP: 背景を sec02_bg.png の1枚に差し替え

   旧デザインは sec02-bg.png を ::before / ::after の2枚に分け、
   SVG マスクで上下の水彩を切り出していたが、
   新しい sec02_bg.png は上下の水彩を含む1枚絵なので擬似要素は止める。
   セクションの高さは中身で変わるため、上下の水彩が必ず残るよう
   background-size: 100% 100% で伸縮させる(中間はほぼ均一なので目立たない)。
   ========================================================================== */

.hz-lp .hz-sec--fee {
	background-color: #fff;
	background-image: url("./images/hz/sec02_bg.png");
	background-position: center top;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

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

/* 見出し: 左寄せ+左マージン146u だったものを中央揃えに。
   行送りは em 基準(90/56)だと <strong>0</strong>(76u)の行だけ広がって
   行間がバラつくため、u 固定にして 4 行を等間隔にする。 */
.hz-lp .hz-sec--fee .hz-h2 {
	width: auto;
	margin: calc(98 * var(--u)) auto 0;
	line-height: calc(78 * var(--u));
	text-align: center;
}

.hz-lp .hz-sec--fee .hz-h2 b { letter-spacing: calc(8 * var(--u)); }

.hz-lp .hz-sec--fee .hz-lead {
	margin-inline: auto;
}

/* 0円バッジ: 旧デザインは金の吹き出しを ::before、文字を別の要素として
   それぞれ絶対座標で置いていたため必ずズレる。
   吹き出しを文字要素自身の背景にして、中身を中央寄せする。
   画像は 1131x1181(円+尻尾)。幅190u で描くと高さ 198u、下 8u が尻尾。
   円は 0〜190u なので中心は 95u。文字(80u / line-height:1)の行ボックスを
   そこに合わせるため padding-top は 95 - 40 = 55u。
   ※ display:grid にすると "0" と <em>円</em> が別々のグリッドアイテムになり
     縦積みになるので、通常のインライン組み(text-align)で中央寄せする。 */
.hz-lp .hz-zerocard::before { content: none; }

.hz-lp .hz-zerocard__badge {
	left: 50%;
	top: 0;
	translate: -50% 0;
	box-sizing: border-box;
	width: calc(190 * var(--u));
	height: calc(198 * var(--u));
	padding-top: calc(55 * var(--u));
	background: url("./images/hz/sec02-badge.png") center top / 100% auto no-repeat;
	line-height: 1;
	text-align: center;
}

/* タイルのアイコン: 旧デザインは CSS 背景で描いていたが、
   中の <img> が WordPress のプレースホルダー画像のままで二重に出るため、
   <img> を実アイコンに差し替えて背景側のアイコンは止める。 */
.hz-lp .hz-tile .wp-block-image {
	background: #2d5e89;
}

/* アイコンは SVG ごとに原寸も縦横比もまちまち(縦長・横長・正方形)なので、
   幅を個別に指定せず「収まる箱」で制御する。
   width/height を auto にしたうえで max-width / max-height を与えると、
   ブラウザが縦横比を保ったまま箱に収まるよう縮小してくれる。
   箱は 141x112u。180x161u の四角に対して上下左右に余白が残る。 */
.hz-lp .hz-tile .wp-block-image img {
	width: auto;
	height: auto;
	max-width: calc(141 * var(--u));
	max-height: calc(112 * var(--u));
	object-fit: contain;
}

/* 封筒のみカンプ実測どおり他より小さく(90u)。 */
.hz-lp .hz-tile--mail .wp-block-image img { width: calc(90 * var(--u)); }

/* カード内テキストの可読性調整
   ・見出し(h3)直下に余白が無く本文とくっついていたので margin-block-end を持たせる
   ・本文は行間・字間が詰まって見えるので少し緩める
   ・注釈は 20u = 実寸 9px 前後で小さすぎるため 26u まで上げる */
.hz-lp .hz-zerocard__title {
	margin-block-end: calc(28 * var(--u));
}

.hz-lp .hz-zerocard .hz-text {
	line-height: calc(56 / 28);
	letter-spacing: .04em;
}

.hz-lp .hz-zerocard .hz-note {
	margin-block-start: calc(26 * var(--u));
	font-size: max(12px, calc(26 * var(--u)));
	line-height: calc(44 / 26);
	letter-spacing: .02em;
}

/* タイル: 旧デザインはタイル幅を 180u に固定していたため、
   「養育費調停申立て」のように 180u より長いラベルが左右にはみ出し、
   隣のラベルとぶつかって配置が破綻していた。
   タイル幅を中身なり(アイコン180u とラベルの広い方)にして、
   アイコンとラベルが常に同じ中心線に乗るようにする。
   ※ font-weight:500 は @font-face が 400 と 600-900 の2本しか無いため
     Regular(400)で描画される。太くするなら 600 以上を指定する。 */
.hz-lp .hz-tiles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: calc(90 * var(--u));
	padding: 0;
}

/* タイルが3つ並ぶカードは 180u×3 + 90u×2 = 720u でカード内幅(620u)を
   超えて折り返すため、間隔を詰める(180u×3 + 36u×2 = 612u)。 */
.hz-lp .hz-tiles:has(.hz-tile:nth-child(3)) {
	gap: calc(36 * var(--u));
}

/* タイル幅は四角と同じ 180u。ラベルが四角より長い場合は左右へ均等に
   はみ出させる(タイル幅をラベルなりにすると、長いラベル側だけ四角が
   内側にずれて2つの四角が左右対称にならないため)。

   中央寄せは flex の align-items に頼らない。WordPress がブロックに付ける
   is-layout-flow / wp-block-group-is-layout-* のスタイルと競合して効かず、
   四角とラベルが左揃えになっていたため、
   ブロック要素の margin:auto と text-align だけで揃える。 */
.hz-lp .hz-tile {
	display: block;
	flex: none;
	width: calc(180 * var(--u));
	margin: 0;
	text-align: center;
}

/* 紺の四角は 180x161u で固定(中身の画像サイズに引きずられないよう flex:none)。
   タイルが display:block なので margin-inline:auto で中央に置く。 */
.hz-lp .hz-tile .wp-block-image {
	display: grid;
	place-content: center;
	box-sizing: border-box;
	flex: none;
	width: calc(180 * var(--u));
	height: calc(161 * var(--u));
	margin: 0 auto;
	border-radius: 0;
	background: #2d5e89;
}

/* ラベルはタイル(180u)より広い 280u の箱にして、左右対称の負マージンで
   タイル中央に置く。こうすると一番長い「養育費調停申立て」(224u)でも
   箱からはみ出さないので、中央寄せがはみ出し時のブラウザ挙動に左右されない。
   タイルが display:block なので flex の gap は使えず、上の間隔は margin で作る。 */
.hz-lp .hz-tile__label {
	display: block;
	box-sizing: border-box;
	width: calc(280 * var(--u));
	margin: calc(24 * var(--u)) calc(-50 * var(--u)) 0;
	font-weight: 600;
	font-size: max(14px, calc(28 * var(--u)));
	line-height: calc(40 / 28);
	text-align: center;
	white-space: nowrap;
}


/* ==========================================================================
   sec02 費用比較表(違いのポイントは「費用が発生するタイミング」) — SP
   ピンクのピルが中央の緑罫線をまたぐレイアウトはコードで組むよりズレの
   リスクが大きいため sec02_table.png の1枚絵にする。
   旧デザイン(.hz-compares/.hz-compare/.hz-comparerows)は使わない。
   ========================================================================== */

.hz-lp .hz-compare__visual {
	display: block;
	width: calc(690 * var(--u));
	margin: calc(48 * var(--u)) auto 0;
}

.hz-lp .hz-compare__visual img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

/* 表の下の補足(※他事務所の費用は…)は 20u(実寸9px前後)で小さすぎるため
   ゼロ円カード内の注釈と同じ値まで上げる。
   表との間隔は、表側の margin-bottom を廃止してこちらの margin-top だけで
   決める(表の直後の hz-note だけを狙うため隣接セレクタにして、
   同じセクション内にある他の hz-note には影響させない)。 */
.hz-lp .hz-sec--fee .hz-note {
	font-size: max(12px, calc(26 * var(--u)));
	line-height: calc(44 / 26);
	letter-spacing: .02em;
}

.hz-lp .hz-compare__visual + .hz-note {
	margin-top: calc(24 * var(--u));
}

/* 「私の場合はいくらかかる？」も少し拡大。
   上の補足文とは間隔をあけ、下のボタンとは詰める。 */
.hz-lp .hz-sec--fee .hz-green {
	margin-top: calc(56 * var(--u));
	font-size: max(14px, calc(32 * var(--u)));
	line-height: calc(46 / 32);
}

.hz-lp .hz-sec--fee .hz-cta {
	margin-block-start: calc(28 * var(--u));
}

/* CTA ボタンの LINE アイコン: --hz-icon-line が未設定(none)で何も
   表示されていなかったので icon-line_white.svg(白塗り)を指定。
   白アイコンなので緑ボタンにそのまま乗せて問題ない。 */

/* 矢印アイコン(icon-arrow.svg)がピンク(#ff94a0)だったのを緑に変更済み。
   (画像ファイル自体を修正。ここでの追加指定はなし) */


/* ==========================================================================
   sec03(その相談、先延ばしにしないでください) — SP
   セクション上部にピンクのぼかし(sec03_bg_top.png)を追加。
   画像は 750x473(コンプ原寸)。伸縮させず上端に張り付け、
   それより下は既存どおり白地のまま(画像自体が下端で透明にフェードする)。
   ========================================================================== */

.hz-lp .hz-sec--delay {
	background: #fff url("./images/hz/sec03_bg_top.png") top center / calc(750 * var(--u)) auto no-repeat;
	padding-block-end: 0;
}


/* ==========================================================================
   KVスクロール後に追従する下部固定CTAバー

   .hz-lp は --u のスケール用に container-type: inline-size（= contain: layout）
   を持っており、これがある要素の内部では position: fixed の基準がコンテナ自身に
   なってしまい、画面に対して本当の意味で「固定」されない。そのため hz-lp.js の
   setupStickyCta() が、このバーを document.body 直下に移動させてから表示する。
   .hz-lp の外に出るので、.hz-lp のカスタムプロパティ（--u や --hz-green など）を
   継承できない → ここだけ独立して単位・色を持たせる（.hz-lp を頭に付けない）。 */
.hz-stickycta {
	--u: min(calc(100vw / 750), 1px);
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	width: 100%;
	box-shadow: 0 calc(-2 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .12);
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
	transition: transform .4s ease-out, opacity .4s ease-out;
}

.hz-stickycta[hidden] { display: none; }

.hz-stickycta.is-visible {
	transform: none;
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.hz-stickycta { transition: none; }
}

.hz-stickycta__btn {
	display: flex;
	flex: 1 1 50%;
	align-items: center;
	justify-content: center;
	gap: calc(12 * var(--u));
	box-sizing: border-box;
	min-height: 68px;
	padding-block: calc(36 * var(--u));
	padding-block-end: calc(36 * var(--u) + env(safe-area-inset-bottom));
	color: #fff;
	font-family: "HZ Noto Sans JP", "Yu Gothic", sans-serif;
	font-weight: 700;
	font-size: max(12px, calc(24 * var(--u)));
	text-align: center;
	text-decoration: none;
	line-height: 1.3;
}

.hz-stickycta__btn--green { background: #4fa97a; }
.hz-stickycta__btn--pink { background: #ff94a0; }

.hz-stickycta__icon {
	display: block;
	width: calc(36 * var(--u));
	flex: none;
}

.hz-stickycta__icon svg,
.hz-stickycta__icon img {
	display: block;
	width: 100%;
	height: auto;
}

/* KV の丸矢印と同じパーツ。PC 専用(hz-lp-pc.css で表示) */
.hz-stickycta__arrow { display: none; }

/* KV と同じ補足文。PC 専用(hz-lp-pc.css で表示) */
.hz-stickycta__sub { display: none; }