/*
 * ハウスクリーニング版 公開トップ（承認済みの静的試作の CSS。確認用のダイアログだけを除いた）。
 * PC（1025px 以上）は完成図（幅 864px）の1px を --u として寸法を写す（1440px で 1u = 1.667px）。
 * 1024px 以下は、完成図の部品と順番のまま縦に積む。
 * 色は :root のトークンだけで指定する。テーマで足した見た目は theme.css にある。
 */

:root {
	--hc-bg: #FCFAF8;          /* 地の白 */
	--hc-paper: #FFFFFF;
	--hc-sand: #F5F0EB;        /* 場所から選ぶの面 */
	--hc-gray: #F1EFED;        /* 対応できない作業の見出し */
	--hc-line: #E9E3DE;
	--hc-line-strong: #DCD5CF;
	--hc-peach: #F9E5DB;       /* ご利用の流れ・見積もり依頼の帯 */
	--hc-peach-deep: #F7DFD3;
	--hc-pink: #FDF0EC;        /* 対応範囲の見出し */
	--hc-coral: #D9604A;       /* 完成図のコーラル（レール・ボタン・番号・印） */
	--hc-coral-text: #B54A34;  /* 小さな白い文字を載せるボタン（スマートフォン）・小さなコーラルの文字 */
	--hc-coral-line: #EBB7AB;
	--hc-ink: #262827;         /* チャコール */
	--hc-text: #3A3634;
	--hc-muted: #6E6762;
	--hc-line-green: #06C755;  /* LINE ボタンだけ */
	--hc-font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
}

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--hc-bg);
	color: var(--hc-text);
	font-family: var(--hc-font);
	font-size: 15px;
	line-height: 1.8;
	letter-spacing: 0.03em;
	overflow-wrap: anywhere;
	line-break: strict;
}

img {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

svg {
	width: 1em;
	height: 1em;
	flex: none;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 3px solid var(--hc-ink);
	outline-offset: 3px;
}

.hc-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.hc-skip {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 100;
	padding: 12px 18px;
	border-radius: 8px;
	background: var(--hc-ink);
	color: var(--hc-paper);
}

.hc-skip:focus {
	top: 12px;
}

.hc-page {
	container-type: inline-size;
}

.hc-br-pc,
.hc-chip__dot {
	display: none;
}

/* ---------- 共通の部品 ---------- */

.hc-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 0;
	border-radius: 999px;
	background: var(--hc-coral-text);
	color: var(--hc-paper);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 6px 14px -8px rgba(160, 60, 40, 0.55);
	transition: filter 0.2s;
}

.hc-pill:hover {
	filter: brightness(0.94);
}

.hc-eyebrow {
	color: var(--hc-coral-text);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1.4;
}

.hc-title {
	color: var(--hc-ink);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.4;
}

.hc-slash {
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--hc-coral);
	transform: rotate(-28deg);
	transform-origin: left center;
}

.hc-go {
	display: grid;
	place-items: center;
	border: 1px solid #F0C9BE;
	border-radius: 50%;
	background: var(--hc-paper);
	color: var(--hc-coral);
}

.hc-no-mail [data-hc-mail],
.hc-no-line [data-hc-line] {
	display: none !important;
}

/* =========================================================
 * 1024px 以下：完成図の部品と順番のまま縦に積む
 * ========================================================= */

@media (max-width: 1024px) {
	body {
		padding-bottom: 72px;
	}

	.hc-frame {
		width: min(100% - 32px, 960px);
		margin-inline: auto;
	}

	/* TOP */
	.hc-hero {
		padding-bottom: 6px;
	}

	.hc-hero__photo {
		width: 100%;
		height: clamp(220px, 60vw, 520px);
		object-fit: cover;
		object-position: 66% 35%;
	}

	.hc-hero__panel {
		position: relative;
		margin: -40px 16px 0;
		padding: 24px 20px 20px;
		border-radius: 14px;
		background: rgba(253, 250, 248, 0.97);
		box-shadow: 0 14px 30px -18px rgba(60, 40, 30, 0.35);
	}

	.hc-hero__title {
		color: var(--hc-ink);
		font-size: clamp(25px, 7vw, 38px);
		font-weight: 700;
		letter-spacing: 0.03em;
		line-height: 1.38;
	}

	.hc-hero__lead {
		margin-top: 10px;
		font-size: 14.5px;
		line-height: 1.8;
	}

	.hc-hero__button {
		width: 100%;
		min-height: 56px;
		margin-top: 16px;
		padding: 8px 16px;
		font-size: 19px;
		letter-spacing: 0.02em;
	}

	.hc-hero__button svg {
		width: 18px;
		height: 18px;
	}

	.hc-rail {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin: 12px 16px 0;
	}

	.hc-rail__link {
		display: flex;
		align-items: center;
		gap: 8px;
		min-height: 56px;
		padding: 8px 10px 8px 14px;
		border-radius: 12px;
		background: var(--hc-coral-text);
		color: var(--hc-paper);
		font-size: 15px;
		font-weight: 700;
		line-height: 1.35;
	}

	.hc-rail__link--line {
		background: var(--hc-coral-text);
	}

	.hc-rail__icon {
		width: 22px;
		height: 22px;
	}

	.hc-rail__badge {
		display: grid;
		place-items: center;
		flex: none;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: var(--hc-paper);
		color: var(--hc-coral-text);
		font-size: 7px;
		font-weight: 800;
		letter-spacing: 0;
	}

	.hc-rail__text {
		flex: 1;
	}

	.hc-rail__go {
		display: grid;
		place-items: center;
		flex: none;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: var(--hc-paper);
		color: var(--hc-coral-text);
	}

	.hc-rail__go svg {
		width: 14px;
		height: 14px;
	}

	/* 信頼帯 */
	.hc-trust {
		margin-top: 18px;
		border-top: 1px solid var(--hc-line);
		border-bottom: 1px solid var(--hc-line);
		background: var(--hc-bg);
	}

	.hc-trust__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: min(100% - 16px, 960px);
		margin-inline: auto;
	}

	.hc-trust__list li {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 72px;
		padding: 12px 10px;
		color: var(--hc-text);
		font-size: 13.5px;
		font-weight: 500;
		line-height: 1.55;
	}

	.hc-trust__list li:nth-child(2n) {
		border-left: 1px solid var(--hc-line);
	}

	.hc-trust__list li:nth-child(n + 3) {
		border-top: 1px solid var(--hc-line);
	}

	.hc-trust__list svg {
		width: 30px;
		height: 30px;
		color: var(--hc-coral);
	}

	/* 場所から選ぶ */
	.hc-places {
		padding: 44px 0 40px;
		background: linear-gradient(180deg, #F8F4F1, var(--hc-sand));
	}

	.hc-places__title {
		margin-top: 8px;
		font-size: clamp(24px, 6.6vw, 32px);
	}

	.hc-slash {
		margin: 16px 0 6px;
	}

	.hc-places__text {
		margin-top: 12px;
		color: var(--hc-text);
	}

	.hc-map {
		margin-top: 22px;
	}

	.hc-map__plan {
		width: 100%;
		max-width: 560px;
		height: auto;
		margin: 0 auto 18px;
		border-radius: 8px;
	}

	.hc-map__plant,
	.hc-map__wire {
		display: none;
	}

	.hc-map__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.hc-chip button {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-height: 74px;
		padding: 8px 8px 8px 8px;
		border: 2px solid transparent;
		border-radius: 12px;
		background: var(--hc-paper);
		text-align: left;
		cursor: pointer;
		box-shadow: 0 6px 16px -12px rgba(80, 50, 30, 0.4);
	}

	.hc-chip img {
		width: 56px;
		height: 56px;
		flex: none;
		border: 2px solid var(--hc-paper);
		border-radius: 50%;
		object-fit: cover;
		box-shadow: 0 2px 8px -2px rgba(80, 50, 30, 0.3);
	}

	.hc-chip__name {
		flex: 1;
		color: var(--hc-ink);
		font-size: 15px;
		font-weight: 600;
		line-height: 1.4;
	}

	.hc-chip__name small {
		font-size: 12px;
		font-weight: 500;
	}

	.hc-chip .hc-go {
		width: 28px;
		height: 28px;
	}

	.hc-chip .hc-go svg {
		width: 14px;
		height: 14px;
	}

	.hc-chip button[aria-pressed="true"] {
		border-color: var(--hc-coral);
	}

	/* 作業前後＋対応範囲 */
	.hc-work {
		padding: 40px 0;
	}

	.hc-ba img {
		width: 100%;
		height: auto;
		border-radius: 12px;
	}

	.hc-ba__note {
		margin-top: 8px;
		color: var(--hc-muted);
		font-size: 12px;
	}

	.hc-scope {
		margin-top: 32px;
	}

	.hc-scope__title {
		display: flex;
		align-items: center;
		color: var(--hc-ink);
		font-size: 21px;
		font-weight: 600;
		letter-spacing: 0.06em;
	}

	.hc-slash--inline {
		display: inline-block;
		width: 18px;
		margin: 0 0 0 12px;
	}

	.hc-scope__cols {
		display: grid;
		gap: 12px;
		margin-top: 16px;
	}

	.hc-scope__col {
		overflow: hidden;
		border: 1px solid var(--hc-line);
		border-radius: 10px;
		background: var(--hc-paper);
	}

	.hc-scope__head {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 50px;
		padding: 8px 16px;
		background: var(--hc-pink);
		color: var(--hc-ink);
		font-size: 16px;
		font-weight: 700;
		line-height: 1.4;
	}

	.hc-scope__head svg {
		width: 24px;
		height: 24px;
		color: var(--hc-coral);
	}

	.hc-scope__col--extra .hc-scope__head {
		color: var(--hc-coral-text);
	}

	.hc-scope__col--out .hc-scope__head {
		background: var(--hc-gray);
	}

	.hc-scope__col--out .hc-scope__head svg {
		color: var(--hc-ink);
	}

	.hc-scope__list {
		padding: 12px 16px 14px;
	}

	.hc-scope__list li {
		position: relative;
		padding-left: 16px;
		font-size: 14.5px;
		line-height: 1.95;
	}

	.hc-scope__list li::before {
		content: "";
		position: absolute;
		top: 0.85em;
		left: 2px;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: var(--hc-ink);
	}

	/* 料金の目安 */
	.hc-price {
		padding: 8px 0 40px;
	}

	.hc-price__title {
		margin-top: 6px;
		font-size: clamp(23px, 6vw, 30px);
	}

	.hc-price__note {
		margin-top: 8px;
		color: var(--hc-muted);
		font-size: 12.5px;
		line-height: 1.7;
	}

	.hc-price__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		margin-top: 16px;
	}

	.hc-card a {
		display: block;
		height: 100%;
		overflow: hidden;
		border: 2px solid transparent;
		border-radius: 10px;
		background: var(--hc-paper);
		box-shadow: 0 6px 16px -12px rgba(80, 50, 30, 0.4);
	}

	.hc-card.is-selected a {
		border-color: var(--hc-coral);
	}

	.hc-card img {
		width: 100%;
		aspect-ratio: 2 / 1;
		object-fit: cover;
	}

	.hc-card__name {
		display: block;
		padding: 10px 12px 0;
		color: var(--hc-ink);
		font-size: 14.5px;
		font-weight: 700;
		line-height: 1.45;
	}

	.hc-card__price {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 6px;
		padding: 4px 10px 12px 12px;
		color: var(--hc-coral-text);
		font-size: 15px;
		font-weight: 600;
		letter-spacing: 0.02em;
	}

	.hc-card__go {
		display: grid;
		place-items: center;
		flex: none;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: var(--hc-coral);
		color: var(--hc-paper);
	}

	.hc-card__go svg {
		width: 15px;
		height: 15px;
	}

	/* ご利用の流れ */
	.hc-flow {
		padding-top: 44px;
		border-top: 1px solid var(--hc-coral-line);
		background: linear-gradient(90deg, #F8E2D7, #FAEAE2);
	}

	.hc-flow__title {
		margin-top: 8px;
		font-size: clamp(23px, 6vw, 30px);
	}

	.hc-flow__text {
		margin-top: 12px;
	}

	.hc-steps {
		margin-top: 26px;
	}

	.hc-steps li {
		position: relative;
		display: grid;
		grid-template-columns: 42px minmax(0, 1fr);
		gap: 14px;
		padding-bottom: 20px;
	}

	.hc-steps li:not(:last-child)::before {
		content: "";
		position: absolute;
		top: 42px;
		bottom: 0;
		left: 20px;
		width: 2px;
		background: var(--hc-coral);
	}

	.hc-steps__no {
		display: grid;
		place-items: center;
		width: 42px;
		height: 42px;
		border-radius: 50%;
		background: var(--hc-coral-text);
		color: var(--hc-paper);
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0.02em;
	}

	.hc-steps h3 {
		color: var(--hc-ink);
		font-size: 17px;
		font-weight: 700;
		line-height: 1.5;
	}

	.hc-steps p {
		margin-top: 2px;
		color: var(--hc-text);
		font-size: 14px;
		line-height: 1.7;
	}

	.hc-flow__photo {
		width: 100%;
		height: clamp(170px, 44vw, 320px);
		object-fit: cover;
		object-position: 60% 50%;
		-webkit-mask-image: linear-gradient(180deg, transparent, #000 35%);
		mask-image: linear-gradient(180deg, transparent, #000 35%);
	}

	/* スタッフ紹介＋よくあるご質問 */
	.hc-staff-faq {
		padding: 44px 0 36px;
	}

	.hc-staff-faq__frame {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 18px 16px;
	}

	.hc-staff__intro,
	.hc-faq {
		grid-column: 1 / -1;
	}

	.hc-staff__title {
		margin-top: 6px;
		font-size: clamp(23px, 6vw, 30px);
	}

	.hc-staff__text {
		margin-top: 12px;
	}

	.hc-staff__photo img {
		width: 120px;
		height: 152px;
		object-fit: cover;
		border-radius: 12px;
	}

	.hc-staff__lead {
		color: var(--hc-ink);
		font-size: 16px;
		font-weight: 700;
		line-height: 1.6;
	}

	.hc-staff__body {
		margin-top: 8px;
		font-size: 14px;
		line-height: 1.75;
	}

	.hc-faq {
		margin-top: 18px;
	}

	.hc-faq__title {
		display: flex;
		align-items: baseline;
		gap: 16px;
		color: var(--hc-ink);
		font-size: clamp(22px, 5.8vw, 28px);
		font-weight: 600;
		letter-spacing: 0.06em;
		line-height: 1.4;
	}

	.hc-faq__list {
		display: grid;
		gap: 8px;
		margin-top: 14px;
	}

	.hc-qa {
		border: 1px solid var(--hc-line);
		border-radius: 8px;
		background: var(--hc-paper);
	}

	.hc-qa summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 52px;
		padding: 8px 14px;
		color: var(--hc-ink);
		font-size: 14.5px;
		line-height: 1.5;
		cursor: pointer;
		list-style: none;
	}

	.hc-qa summary svg {
		width: 18px;
		height: 18px;
		transition: transform 0.2s;
	}

	.hc-qa p {
		padding: 0 14px 14px;
		color: var(--hc-text);
		font-size: 14px;
		line-height: 1.75;
	}

	/* 見積もり依頼の帯 */
	.hc-cta {
		padding: 4px 0 28px;
	}

	.hc-cta__band {
		display: grid;
		grid-template-columns: 76px minmax(0, 1fr);
		gap: 16px 14px;
		align-items: center;
		padding: 16px;
		border-radius: 14px;
		background: linear-gradient(90deg, #F8E0D5, #FAE8DF);
	}

	.hc-cta__plant {
		width: 76px;
		height: 64px;
		object-fit: cover;
		border-radius: 10px;
	}

	.hc-cta__title {
		color: var(--hc-ink);
		font-size: 17px;
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: 0.04em;
	}

	.hc-cta__sub {
		margin-top: 4px;
		font-size: 13.5px;
		line-height: 1.7;
	}

	.hc-cta__sub.is-set {
		color: var(--hc-ink);
		font-weight: 700;
	}

	.hc-cta__button {
		grid-column: 1 / -1;
		min-height: 58px;
		padding: 8px 16px;
		font-size: 19px;
		letter-spacing: 0.02em;
	}

	.hc-cta__button svg {
		width: 18px;
		height: 18px;
	}

	/* 下部の追尾CTA */
	.hc-bar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 40;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
		border-top: 1.5px solid var(--hc-coral-line);
		background: rgba(252, 250, 248, 0.97);
	}

	.hc-bar__inner {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		max-width: 960px;
		margin-inline: auto;
	}

	.hc-bar__label {
		display: none;
	}

	.hc-bar__button {
		gap: 6px;
		min-height: 52px;
		padding: 6px 10px;
		font-size: 15px;
		letter-spacing: 0.02em;
	}

	.hc-bar__button svg {
		width: 14px;
		height: 14px;
	}

	.hc-bar__button .hc-bar__icon {
		width: 20px;
		height: 20px;
	}

	.hc-bar__button--line {
		background: var(--hc-line-green);
		box-shadow: 0 6px 14px -8px rgba(0, 120, 50, 0.5);
	}

	.hc-bar__badge {
		display: grid;
		place-items: center;
		flex: none;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: var(--hc-paper);
		color: var(--hc-line-green);
		font-size: 6.5px;
		font-weight: 800;
		letter-spacing: 0;
	}

	.hc-no-mail .hc-bar__inner,
	.hc-no-line .hc-bar__inner,
	.hc-no-mail .hc-rail,
	.hc-no-line .hc-rail {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* タブレット（768〜1024px）：部品の列を増やす */
@media (min-width: 768px) and (max-width: 1024px) {
	.hc-hero__panel {
		width: min(640px, 100% - 64px);
		margin: -72px 0 0 32px;
		padding: 30px 32px 26px;
	}

	.hc-rail {
		margin: 14px 32px 0;
	}

	.hc-trust__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.hc-trust__list li:nth-child(n) {
		border-top: 0;
		border-left: 1px solid var(--hc-line);
	}

	.hc-trust__list li:first-child {
		border-left: 0;
	}

	.hc-map__list,
	.hc-scope__cols,
	.hc-price__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hc-staff-faq__frame {
		grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1.2fr);
	}

	.hc-staff__intro {
		grid-column: auto;
	}

	.hc-staff__photo img {
		width: 150px;
		height: 190px;
	}

	.hc-cta__band {
		grid-template-columns: 92px minmax(0, 1fr) auto;
	}

	.hc-cta__plant {
		width: 92px;
		height: 76px;
	}

	.hc-cta__button {
		grid-column: auto;
		padding: 8px 24px;
	}

	.hc-bar__inner {
		grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: 12px;
	}

	.hc-bar__label {
		display: block;
		padding-right: 14px;
		border-right: 1px solid var(--hc-line-strong);
		color: var(--hc-ink);
		font-size: 15px;
		font-weight: 600;
	}

	.hc-no-mail .hc-bar__inner,
	.hc-no-line .hc-bar__inner {
		grid-template-columns: auto minmax(0, 1fr);
	}
}

/* スマートフォンの狭い幅：場所・レールは1列、追尾CTA の矢印は出さない */
@media (max-width: 559px) {
	.hc-rail,
	.hc-map__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.hc-map__plan {
		aspect-ratio: 287 / 96;
		object-fit: cover;
		object-position: top;
	}

	.hc-chip button {
		min-height: 64px;
		padding: 6px 10px 6px 6px;
	}

	.hc-chip img {
		width: 50px;
		height: 50px;
	}

	.hc-chip__name br {
		display: none;
	}

	.hc-chip__dot {
		display: inline;
	}

	.hc-bar__button {
		font-size: 14px;
	}

	.hc-bar__button > svg:last-child {
		display: none;
	}
}

@media (max-width: 359px) {
	.hc-bar__button {
		font-size: 13.5px;
	}

	.hc-bar__button .hc-bar__icon,
	.hc-bar__badge {
		display: none;
	}

	.hc-trust__list li {
		gap: 8px;
		padding: 10px 6px;
		font-size: 12.5px;
	}

	.hc-trust__list svg {
		width: 26px;
		height: 26px;
	}

	.hc-rail__link {
		padding: 8px 8px 8px 10px;
		font-size: 14px;
	}

	.hc-card__price {
		font-size: 13.5px;
		padding-left: 10px;
	}

	.hc-bar__button {
		font-size: 14px;
		padding: 6px 8px;
	}
}

/* =========================================================
 * PC（1025px 以上）：完成図の寸法を --u で写す
 * ========================================================= */

@media (min-width: 1025px) {
	.hc-page {
		--u: calc(min(100cqw, 1440px) / 864);
		padding-bottom: calc(var(--u) * 91);
	}

	.hc-br-pc {
		display: inline;
	}

	.hc-frame {
		position: relative;
		width: calc(var(--u) * 864);
		margin-inline: auto;
	}

	.hc-eyebrow {
		color: var(--hc-coral-text);
		font-size: calc(var(--u) * 9);
		font-weight: 500;
		letter-spacing: 0.25em;
		line-height: 1;
	}

	.hc-slash {
		width: calc(var(--u) * 17);
		height: calc(var(--u) * 1.1);
	}

	/* TOP（高さ 435） */
	.hc-hero {
		position: relative;
		height: calc(var(--u) * 435);
		overflow: hidden;
		background: #E9E1D8;
	}

	.hc-hero__photo {
		position: absolute;
		top: 0;
		left: 0;
		width: calc(100% - var(--u) * 56);
		height: 100%;
		object-fit: cover;
		object-position: 50% 2%;
	}

	.hc-hero__panel {
		position: absolute;
		top: calc(var(--u) * 84);
		left: max(calc(var(--u) * 27), calc(50% - var(--u) * 405));
		width: calc(var(--u) * 343);
		height: calc(var(--u) * 213);
		padding: calc(var(--u) * 18) calc(var(--u) * 20) 0 calc(var(--u) * 22);
		border-radius: calc(var(--u) * 12);
		background: rgba(253, 250, 248, 0.9);
		box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(60, 40, 30, 0.08);
	}

	.hc-hero__title {
		color: var(--hc-ink);
		font-size: calc(var(--u) * 28.6);
		font-weight: 700;
		letter-spacing: 0.07em;
		line-height: calc(var(--u) * 37);
	}

	.hc-hero__lead {
		margin-top: calc(var(--u) * 7);
		color: var(--hc-text);
		font-size: calc(var(--u) * 12);
		font-weight: 500;
		letter-spacing: 0.1em;
		line-height: calc(var(--u) * 20);
	}

	.hc-hero__button {
		position: relative;
		width: calc(var(--u) * 301);
		height: calc(var(--u) * 42);
		margin-top: calc(var(--u) * 12);
		background: var(--hc-coral);
		font-size: calc(var(--u) * 14.2);
		letter-spacing: 0.12em;
	}

	.hc-hero__button svg {
		position: absolute;
		right: calc(var(--u) * 16);
		width: calc(var(--u) * 13);
		height: calc(var(--u) * 13);
	}

	.hc-rail {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		width: calc(var(--u) * 56);
		background: var(--hc-coral);
		color: var(--hc-paper);
	}

	.hc-rail__link {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: var(--hc-paper);
	}

	.hc-rail__link--mail {
		height: calc(var(--u) * 258);
		padding-top: calc(var(--u) * 21);
	}

	.hc-rail__link--mail::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: calc(var(--u) * 10);
		right: calc(var(--u) * 10);
		height: 1px;
		background: rgba(255, 255, 255, 0.6);
	}

	.hc-rail__link--line {
		flex: 1;
		padding-top: calc(var(--u) * 20);
	}

	.hc-rail__icon {
		width: calc(var(--u) * 22);
		height: calc(var(--u) * 26);
	}

	.hc-rail__badge {
		display: grid;
		place-items: center;
		width: calc(var(--u) * 26);
		height: calc(var(--u) * 24);
		border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
		background: var(--hc-paper);
		color: var(--hc-coral-text);
		font-size: calc(var(--u) * 6.6);
		font-weight: 800;
		letter-spacing: 0;
	}

	.hc-rail__text {
		margin-top: calc(var(--u) * 11);
		font-size: calc(var(--u) * 12.6);
		font-weight: 700;
		letter-spacing: 0.1em;
		line-height: 1;
		writing-mode: vertical-rl;
		text-orientation: upright;
	}

	.hc-rail__link--line .hc-rail__text {
		margin-top: calc(var(--u) * 12);
		text-orientation: mixed;
		letter-spacing: 0.06em;
	}

	.hc-rail__go {
		display: grid;
		place-items: center;
		width: calc(var(--u) * 22);
		height: calc(var(--u) * 22);
		margin-top: calc(var(--u) * 13);
		border-radius: 50%;
		background: var(--hc-paper);
		color: var(--hc-coral);
	}

	.hc-rail__link--line .hc-rail__go {
		margin-top: calc(var(--u) * 10);
	}

	.hc-rail__go svg {
		width: calc(var(--u) * 11);
		height: calc(var(--u) * 11);
	}

	/* 信頼帯（高さ 72） */
	.hc-trust {
		height: calc(var(--u) * 72);
		background: var(--hc-bg);
	}

	.hc-trust__list {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		width: calc(var(--u) * 830);
		height: 100%;
		margin-inline: auto;
	}

	.hc-trust__list li {
		position: relative;
		display: flex;
		align-items: center;
		gap: calc(var(--u) * 19);
		padding-left: calc(var(--u) * 41);
		color: var(--hc-text);
		font-size: calc(var(--u) * 10.8);
		font-weight: 600;
		letter-spacing: 0.12em;
		line-height: calc(var(--u) * 16.5);
	}

	.hc-trust__list li + li::before {
		content: "";
		position: absolute;
		top: calc(var(--u) * 17);
		bottom: calc(var(--u) * 17);
		left: 0;
		width: 1px;
		background: var(--hc-line-strong);
	}

	.hc-trust__list svg {
		width: calc(var(--u) * 35);
		height: calc(var(--u) * 35);
		margin-left: calc(var(--u) * -3);
		color: var(--hc-coral);
	}

	/* 場所から選ぶ（高さ 293） */
	.hc-places {
		background: linear-gradient(180deg, #F8F4F1 0%, var(--hc-sand) 60%, #F3EDE7 100%);
	}

	.hc-places__frame {
		height: calc(var(--u) * 293);
	}

	.hc-places__intro {
		position: absolute;
		top: calc(var(--u) * 37);
		left: calc(var(--u) * 38);
	}

	.hc-places__title {
		margin-top: calc(var(--u) * 15);
		font-size: calc(var(--u) * 26);
		font-weight: 600;
		line-height: calc(var(--u) * 35);
		letter-spacing: 0.1em;
	}

	.hc-places .hc-slash {
		margin-top: calc(var(--u) * 26);
	}

	.hc-places__text {
		margin-top: calc(var(--u) * 24);
		color: var(--hc-text);
		font-size: calc(var(--u) * 12.4);
		font-weight: 500;
		letter-spacing: 0.08em;
		line-height: calc(var(--u) * 23);
	}

	.hc-map {
		position: absolute;
		inset: 0;
	}

	.hc-map__plan {
		position: absolute;
		top: calc(var(--u) * 103);
		left: calc(var(--u) * 360);
		width: calc(var(--u) * 287);
		height: calc(var(--u) * 110);
	}

	.hc-map__plant {
		position: absolute;
		-webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent);
		mask-image: radial-gradient(closest-side, #000 70%, transparent);
	}

	.hc-map__plant--left {
		top: calc(var(--u) * 99);
		left: calc(var(--u) * 228);
		width: calc(var(--u) * 74);
		height: calc(var(--u) * 98);
	}

	.hc-map__plant--right {
		top: calc(var(--u) * 73);
		left: calc(var(--u) * 792);
		width: calc(var(--u) * 72);
		height: calc(var(--u) * 125);
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
		mask-image: linear-gradient(90deg, transparent, #000 40%);
	}

	.hc-map__wire {
		position: absolute;
		background: #2E2B29;
	}

	.hc-map__wire--kitchen {
		top: calc(var(--u) * 85);
		left: calc(var(--u) * 413.5);
		width: calc(var(--u) * 1.2);
		height: calc(var(--u) * 19);
	}

	.hc-map__wire--wash-v {
		top: calc(var(--u) * 96);
		left: calc(var(--u) * 691.5);
		width: calc(var(--u) * 1.2);
		height: calc(var(--u) * 37);
	}

	.hc-map__wire--wash-h {
		top: calc(var(--u) * 131.5);
		left: calc(var(--u) * 646);
		width: calc(var(--u) * 46.5);
		height: calc(var(--u) * 1.2);
	}

	.hc-chip {
		position: absolute;
		height: calc(var(--u) * 63);
	}

	.hc-chip--kitchen { top: calc(var(--u) * 24.5); left: calc(var(--u) * 302); width: calc(var(--u) * 140); }
	.hc-chip--bath { top: calc(var(--u) * 26.5); left: calc(var(--u) * 507); width: calc(var(--u) * 139); }
	.hc-chip--wash { top: calc(var(--u) * 33.5); left: calc(var(--u) * 706); width: calc(var(--u) * 134); }
	.hc-chip--toilet { top: calc(var(--u) * 206.5); left: calc(var(--u) * 288); width: calc(var(--u) * 127); }
	.hc-chip--window { top: calc(var(--u) * 209.5); left: calc(var(--u) * 470); width: calc(var(--u) * 140); }
	.hc-chip--empty { top: calc(var(--u) * 206.5); left: calc(var(--u) * 688); width: calc(var(--u) * 154); }

	.hc-chip button {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 53);
		border: 0;
		border-radius: calc(var(--u) * 8);
		background: var(--hc-paper);
		text-align: left;
		cursor: pointer;
		box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(90, 60, 40, 0.07);
	}

	.hc-chip img {
		position: absolute;
		top: 50%;
		left: calc(var(--u) * -40);
		width: calc(var(--u) * 80);
		height: calc(var(--u) * 80);
		border: calc(var(--u) * 2.5) solid var(--hc-paper);
		border-radius: 50%;
		object-fit: cover;
		box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(90, 60, 40, 0.12);
		transform: translateY(-50%);
	}

	.hc-chip__name {
		flex: 1;
		color: var(--hc-ink);
		font-size: calc(var(--u) * 12.4);
		font-weight: 700;
		letter-spacing: 0.08em;
		line-height: calc(var(--u) * 18);
	}

	.hc-chip__name small {
		font-size: calc(var(--u) * 11);
		font-weight: 500;
	}

	.hc-chip__name .hc-chip__note {
		font-size: calc(var(--u) * 7.4);
		letter-spacing: 0;
	}

	.hc-chip .hc-go {
		width: calc(var(--u) * 19);
		height: calc(var(--u) * 19);
	}

	.hc-chip .hc-go svg {
		width: calc(var(--u) * 11);
		height: calc(var(--u) * 11);
	}

	.hc-chip button[aria-pressed="true"] {
		box-shadow: inset 0 0 0 calc(var(--u) * 1.6) var(--hc-coral), 0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(90, 60, 40, 0.07);
	}

	/* 作業前後＋対応範囲（高さ 250） */
	.hc-work {
		background: var(--hc-bg);
	}

	.hc-work__frame {
		display: grid;
		grid-template-columns: calc(var(--u) * 350) calc(var(--u) * 443);
		gap: calc(var(--u) * 26);
		height: calc(var(--u) * 250);
		padding: calc(var(--u) * 18) 0 0 calc(var(--u) * 24);
	}

	.hc-ba img {
		width: calc(var(--u) * 350);
		height: calc(var(--u) * 210);
		border-radius: calc(var(--u) * 9);
	}

	.hc-ba__note {
		margin-top: calc(var(--u) * 7);
		color: var(--hc-muted);
		font-size: calc(var(--u) * 7.6);
		letter-spacing: 0.06em;
		line-height: 1.4;
	}

	.hc-scope {
		padding-top: calc(var(--u) * 4);
	}

	.hc-scope__title {
		display: flex;
		align-items: center;
		color: var(--hc-ink);
		font-size: calc(var(--u) * 15.6);
		font-weight: 500;
		letter-spacing: 0.08em;
		line-height: calc(var(--u) * 18);
	}

	.hc-slash--inline {
		display: inline-block;
		width: calc(var(--u) * 13);
		margin-left: calc(var(--u) * 12);
		transform-origin: center;
	}

	.hc-scope__cols {
		display: grid;
		grid-template-columns: 132fr 142fr 140fr;
		gap: calc(var(--u) * 14);
		margin-top: calc(var(--u) * 16);
	}

	.hc-scope__col {
		height: calc(var(--u) * 184);
		overflow: hidden;
		border: 1px solid #F0EAE6;
		border-radius: calc(var(--u) * 5);
		background: var(--hc-paper);
		box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 8) rgba(90, 60, 40, 0.04);
	}

	.hc-scope__head {
		display: flex;
		align-items: center;
		gap: calc(var(--u) * 7);
		height: calc(var(--u) * 36);
		padding: 0 calc(var(--u) * 9);
		background: var(--hc-pink);
		color: var(--hc-ink);
		font-size: calc(var(--u) * 9.8);
		font-weight: 700;
		letter-spacing: 0.02em;
		white-space: nowrap;
	}

	.hc-scope__head svg {
		width: calc(var(--u) * 17);
		height: calc(var(--u) * 17);
		color: var(--hc-coral);
	}

	.hc-scope__col--extra .hc-scope__head {
		color: var(--hc-coral-text);
	}

	.hc-scope__col--out .hc-scope__head {
		background: var(--hc-gray);
	}

	.hc-scope__col--out .hc-scope__head svg {
		color: var(--hc-ink);
	}

	.hc-scope__list {
		padding: calc(var(--u) * 11) calc(var(--u) * 8) 0 calc(var(--u) * 15);
	}

	.hc-scope__list li {
		position: relative;
		padding-left: calc(var(--u) * 12);
		color: var(--hc-text);
		font-size: calc(var(--u) * 10.2);
		font-weight: 500;
		letter-spacing: 0.04em;
		line-height: calc(var(--u) * 22.2);
	}

	.hc-scope__list li::before {
		content: "";
		position: absolute;
		top: calc(var(--u) * 9.5);
		left: 0;
		width: calc(var(--u) * 3.6);
		height: calc(var(--u) * 3.6);
		border-radius: 50%;
		background: var(--hc-ink);
	}

	/* 料金の目安（高さ 195） */
	.hc-price {
		background: var(--hc-bg);
	}

	.hc-price .hc-frame {
		height: calc(var(--u) * 195);
		padding: calc(var(--u) * 17) 0 0 calc(var(--u) * 31);
	}

	.hc-price__head {
		display: flex;
		align-items: flex-end;
		gap: calc(var(--u) * 21);
	}

	.hc-price__title {
		margin-top: calc(var(--u) * 9);
		font-size: calc(var(--u) * 19);
		font-weight: 500;
		line-height: calc(var(--u) * 22);
		letter-spacing: 0.06em;
	}

	.hc-price__note {
		position: absolute;
		top: calc(var(--u) * 30);
		left: calc(var(--u) * 152);
		color: var(--hc-muted);
		font-size: calc(var(--u) * 7.3);
		letter-spacing: 0.04em;
	}

	.hc-price__list {
		display: grid;
		grid-template-columns: repeat(6, calc(var(--u) * 120.5));
		gap: calc(var(--u) * 16.5);
		margin: calc(var(--u) * 9) 0 0 calc(var(--u) * -1);
	}

	.hc-card a {
		display: block;
		height: calc(var(--u) * 114);
		border-radius: calc(var(--u) * 6);
		background: var(--hc-paper);
		box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(90, 60, 40, 0.07);
	}

	.hc-card.is-selected a {
		outline: calc(var(--u) * 1.6) solid var(--hc-coral);
		outline-offset: 0;
	}

	.hc-card img {
		width: 100%;
		height: calc(var(--u) * 62);
		object-fit: cover;
		border-radius: calc(var(--u) * 6) calc(var(--u) * 6) 0 0;
	}

	.hc-card__name {
		display: block;
		padding: calc(var(--u) * 8) 0 0 calc(var(--u) * 9);
		color: var(--hc-ink);
		font-size: calc(var(--u) * 11);
		font-weight: 700;
		letter-spacing: 0.06em;
		line-height: calc(var(--u) * 14);
	}

	.hc-card__price {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: calc(var(--u) * 7) calc(var(--u) * 7) 0 calc(var(--u) * 8);
		color: var(--hc-coral-text);
		font-size: calc(var(--u) * 11.4);
		font-weight: 500;
		letter-spacing: 0;
		white-space: nowrap;
		line-height: calc(var(--u) * 17);
	}

	.hc-card__go {
		display: grid;
		place-items: center;
		width: calc(var(--u) * 17);
		height: calc(var(--u) * 17);
		border-radius: 50%;
		background: var(--hc-coral);
		color: var(--hc-paper);
	}

	.hc-card__go svg {
		width: calc(var(--u) * 11);
		height: calc(var(--u) * 11);
	}

	/* ご利用の流れ（高さ 210） */
	.hc-flow {
		position: relative;
		overflow: hidden;
		border-top: 1px solid #F3D9CE;
		background: linear-gradient(90deg, #F8E2D8 0%, #F9E7DE 55%, #FAEBE4 100%);
	}

	.hc-flow__frame {
		z-index: 1;
		display: grid;
		grid-template-columns: calc(var(--u) * 220) 1fr;
		height: calc(var(--u) * 210);
		padding-left: calc(var(--u) * 40);
	}

	.hc-flow__intro {
		padding-top: calc(var(--u) * 35);
	}

	.hc-flow__title {
		margin-top: calc(var(--u) * 15);
		font-size: calc(var(--u) * 20);
		line-height: calc(var(--u) * 24);
		letter-spacing: 0.08em;
	}

	.hc-flow .hc-slash {
		margin-top: calc(var(--u) * 22);
	}

	.hc-flow__text {
		margin-top: calc(var(--u) * 14);
		color: var(--hc-text);
		font-size: calc(var(--u) * 12.2);
		letter-spacing: 0.06em;
		line-height: calc(var(--u) * 22);
	}

	.hc-steps {
		padding-top: calc(var(--u) * 16);
	}

	.hc-steps li {
		position: relative;
		display: grid;
		grid-template-columns: calc(var(--u) * 30) 1fr;
		gap: calc(var(--u) * 22);
		height: calc(var(--u) * 50);
	}

	.hc-steps li:not(:last-child)::before {
		content: "";
		position: absolute;
		top: calc(var(--u) * 30);
		left: calc(var(--u) * 14.2);
		width: calc(var(--u) * 1.6);
		height: calc(var(--u) * 20);
		background: var(--hc-coral);
	}

	.hc-steps__no {
		display: grid;
		place-items: center;
		width: calc(var(--u) * 30);
		height: calc(var(--u) * 30);
		border-radius: 50%;
		background: var(--hc-coral);
		color: var(--hc-paper);
		font-size: calc(var(--u) * 11.2);
		font-weight: 700;
		letter-spacing: 0.02em;
	}

	.hc-steps h3 {
		margin-top: calc(var(--u) * 5);
		color: var(--hc-ink);
		font-size: calc(var(--u) * 12.8);
		font-weight: 700;
		letter-spacing: 0.1em;
		line-height: calc(var(--u) * 16);
	}

	.hc-steps p {
		margin-top: calc(var(--u) * 5);
		color: var(--hc-text);
		font-size: calc(var(--u) * 9.6);
		font-weight: 500;
		letter-spacing: 0.06em;
		line-height: calc(var(--u) * 13);
	}

	.hc-flow__photo {
		position: absolute;
		top: 0;
		right: max(0px, calc(50% - var(--u) * 432));
		width: calc(var(--u) * 304);
		height: 100%;
		object-fit: cover;
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
		mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
	}

	/* スタッフ紹介＋よくあるご質問（高さ 190） */
	.hc-staff-faq {
		background: #FAF9F7;
	}

	.hc-staff-faq__frame {
		display: grid;
		grid-template-columns: calc(var(--u) * 168) calc(var(--u) * 118) calc(var(--u) * 177) calc(var(--u) * 287);
		gap: 0 calc(var(--u) * 17.5);
		align-items: start;
		min-height: calc(var(--u) * 190);
		padding: calc(var(--u) * 22) 0 calc(var(--u) * 12) calc(var(--u) * 32);
	}

	.hc-staff__intro {
		padding-top: calc(var(--u) * 10);
	}

	.hc-staff__title {
		margin-top: calc(var(--u) * 7);
		font-size: calc(var(--u) * 18.6);
		line-height: calc(var(--u) * 22);
		letter-spacing: 0.08em;
	}

	.hc-staff-faq .hc-slash {
		margin-top: calc(var(--u) * 20);
	}

	.hc-staff__text {
		margin-top: calc(var(--u) * 15);
		font-weight: 500;
		color: var(--hc-text);
		font-size: calc(var(--u) * 10.6);
		letter-spacing: 0.06em;
		line-height: calc(var(--u) * 19.3);
	}

	.hc-staff__photo img {
		width: calc(var(--u) * 118);
		height: calc(var(--u) * 148);
		object-fit: cover;
		border-radius: calc(var(--u) * 9);
	}

	.hc-staff__message {
		padding-top: calc(var(--u) * 22);
	}

	.hc-staff__lead {
		color: var(--hc-ink);
		font-size: calc(var(--u) * 11.6);
		font-weight: 700;
		letter-spacing: 0.08em;
		line-height: calc(var(--u) * 21);
	}

	.hc-staff__body {
		margin-top: calc(var(--u) * 15);
		color: var(--hc-text);
		font-size: calc(var(--u) * 10.2);
		letter-spacing: 0.06em;
		line-height: calc(var(--u) * 19.3);
	}

	.hc-faq__title {
		display: flex;
		align-items: center;
		gap: calc(var(--u) * 22);
		height: calc(var(--u) * 18);
		color: var(--hc-ink);
		font-size: calc(var(--u) * 16.6);
		font-weight: 600;
		letter-spacing: 0.08em;
	}

	.hc-eyebrow--inline {
		font-size: calc(var(--u) * 9);
	}

	.hc-faq__list {
		display: grid;
		gap: calc(var(--u) * 2);
		margin-top: calc(var(--u) * 10);
	}

	.hc-qa {
		border: 1px solid #ECE7E3;
		border-radius: calc(var(--u) * 3);
		background: var(--hc-paper);
	}

	.hc-qa summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: max(44px, calc(var(--u) * 24));
		padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 11);
		color: var(--hc-text);
		font-size: calc(var(--u) * 9.2);
		letter-spacing: 0.06em;
		cursor: pointer;
		list-style: none;
	}

	.hc-qa summary svg {
		width: calc(var(--u) * 11);
		height: calc(var(--u) * 11);
		color: var(--hc-ink);
		transition: transform 0.2s;
	}

	.hc-qa p {
		padding: 0 calc(var(--u) * 11) calc(var(--u) * 8);
		color: var(--hc-text);
		font-size: calc(var(--u) * 9.2);
		line-height: calc(var(--u) * 15);
	}

	/* 見積もり依頼の帯 */
	.hc-cta .hc-frame {
		padding: calc(var(--u) * 2) 0 0 calc(var(--u) * 30);
	}

	.hc-cta__band {
		position: relative;
		display: flex;
		align-items: center;
		width: calc(var(--u) * 805);
		height: calc(var(--u) * 78);
		padding-left: calc(var(--u) * 108);
		border-radius: calc(var(--u) * 10);
		background: linear-gradient(90deg, #F7DFD4 0%, #F9E5DB 50%, #FAE7DE 100%);
	}

	.hc-cta__plant {
		position: absolute;
		top: calc(var(--u) * 3);
		left: calc(var(--u) * 2);
		width: calc(var(--u) * 92);
		height: calc(var(--u) * 76);
		border-radius: calc(var(--u) * 10) 0 0 calc(var(--u) * 10);
		object-fit: cover;
		-webkit-mask-image: linear-gradient(90deg, #000 60%, transparent);
		mask-image: linear-gradient(90deg, #000 60%, transparent);
	}

	.hc-cta__title {
		color: var(--hc-ink);
		font-size: calc(var(--u) * 17.2);
		font-weight: 700;
		letter-spacing: 0.1em;
		line-height: calc(var(--u) * 20);
	}

	.hc-cta__sub {
		margin-top: calc(var(--u) * 7);
		color: var(--hc-text);
		font-size: calc(var(--u) * 10.8);
		font-weight: 500;
		letter-spacing: 0.08em;
		line-height: calc(var(--u) * 15);
	}

	.hc-cta__sub.is-set {
		color: var(--hc-ink);
		font-weight: 700;
	}

	.hc-cta__button {
		position: absolute;
		top: calc(var(--u) * 13);
		right: calc(var(--u) * 11);
		width: calc(var(--u) * 297);
		height: calc(var(--u) * 53);
		background: var(--hc-coral);
		font-size: calc(var(--u) * 14);
		letter-spacing: 0.12em;
	}

	.hc-cta__button svg {
		position: absolute;
		right: calc(var(--u) * 21);
		width: calc(var(--u) * 13);
		height: calc(var(--u) * 13);
	}

	/* 下部の追尾CTA（高さ 71） */
	.hc-bar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 40;
		height: calc(var(--u) * 71);
		border-top: 1.5px solid var(--hc-coral-line);
		background: rgba(252, 250, 248, 0.97);
	}

	.hc-bar__inner {
		display: flex;
		align-items: center;
		width: calc(var(--u) * 864);
		height: 100%;
		margin-inline: auto;
		padding-left: calc(var(--u) * 55);
	}

	.hc-bar__label {
		width: calc(var(--u) * 221);
		color: var(--hc-ink);
		font-size: calc(var(--u) * 13.2);
		font-weight: 700;
		letter-spacing: 0.1em;
	}

	.hc-bar__button {
		position: relative;
		height: calc(var(--u) * 46);
		font-size: calc(var(--u) * 14);
		letter-spacing: 0.1em;
	}

	.hc-bar__button--mail {
		width: calc(var(--u) * 269);
		margin-left: calc(var(--u) * 27);
		background: var(--hc-coral);
	}

	.hc-bar__button--mail::before {
		content: "";
		position: absolute;
		top: calc(var(--u) * 7);
		bottom: calc(var(--u) * 7);
		left: calc(var(--u) * -27);
		width: 1px;
		background: var(--hc-line-strong);
	}

	.hc-bar__button--line {
		width: calc(var(--u) * 264);
		margin-left: calc(var(--u) * 12);
		background: var(--hc-line-green);
		box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 10) -6px rgba(0, 120, 50, 0.5);
	}

	.hc-bar__button > svg:last-child {
		position: absolute;
		right: calc(var(--u) * 18);
		width: calc(var(--u) * 12);
		height: calc(var(--u) * 12);
	}

	.hc-bar__button .hc-bar__icon {
		width: calc(var(--u) * 18);
		height: calc(var(--u) * 22);
		margin-right: calc(var(--u) * 6);
	}

	.hc-bar__badge {
		display: grid;
		place-items: center;
		width: calc(var(--u) * 23);
		height: calc(var(--u) * 21);
		margin-right: calc(var(--u) * 6);
		border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
		background: var(--hc-paper);
		color: var(--hc-line-green);
		font-size: calc(var(--u) * 5.6);
		font-weight: 800;
		letter-spacing: 0;
	}

	.hc-no-mail .hc-bar__button--line {
		margin-left: calc(var(--u) * 27);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	* {
		transition: none !important;
	}
}