.sp-cta{
	display: none;
}

/* rem は 550px 以下で 0.18vw になり 320px 幅では押せない大きさまで縮むため、寸法と文字は px の下限を持たせる */
@media (max-width: 550px) {
	:root{
		--sp-cta-h: max(78rem, 54px);
	}
	body.has-sp-cta{
		padding-bottom: calc(var(--sp-cta-h) + env(safe-area-inset-bottom));
	}
	.sp-cta{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1050;
		display: flex;
		height: var(--sp-cta-h);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
		background-color: #fff;
		border-top: 1px solid #e2dedc;
		font-feature-settings: "palt" 1;
	}
	.sp-cta a{
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}
	.sp-cta a:active{
		opacity: 0.7;
	}
	.sp-cta .sp-cta__sub{
		flex: 0 0 max(80rem, 50px);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: max(6rem, 4px);
		color: var(--text_color);
		font-size: max(15rem, 10px);
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.04em;
	}
	.sp-cta__sub + .sp-cta__sub{
		border-left: 1px solid #ece9e7;
	}
	.sp-cta__icon{
		width: max(25rem, 18px);
		height: max(25rem, 18px);
		fill: none;
		stroke: currentColor;
		stroke-width: 1.7;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	.sp-cta__sub--line .sp-cta__icon{
		fill: var(--color8);
		stroke: none;
	}
	.sp-cta .sp-cta__main{
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 max(10rem, 6px);
		background-color: var(--text_color);
		color: #fff;
		font-size: max(21rem, 13px);
		font-weight: 700;
		letter-spacing: 0.04em;
		white-space: nowrap;
	}
	.sp-cta--cocoro .sp-cta__main{
		background-color: var(--color2);
	}
	/* ブランド緑 #00a844 は白文字とのコントラストが 3.1 で足りないため一段濃くする */
	.sp-cta--veil .sp-cta__main{
		background-color: #007f33;
	}

	.has-sp-cta .vhp-sticky-cta{
		display: none;
	}
	.has-sp-cta .vhp-fab{
		bottom: calc(var(--sp-cta-h) + env(safe-area-inset-bottom) + 14px);
	}
}

@media (max-width: 340px) {
	.sp-cta .sp-cta__main{
		letter-spacing: 0;
	}
}