/* ===============================
   standing-cta: ページ固有CTAカード
   =============================== */

.standing-cta {
	padding-block: var(--space-9);
}

/* ---- カード（SP: 左に縦帯写真＋右にコンテンツ） ---- */

.standing-cta__card {
	display: grid;
	grid-template-columns: 25% 1fr;
	grid-template-areas:
		"media heading"
		"media note"
		"media actions"
		"media tel";
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.standing-cta__media {
	grid-area: media;
	position: relative;
}

.standing-cta__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

/* 右へフェードしてカード地色に馴染ませる */
.standing-cta__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 55%, var(--color-bg-card) 100%);
}

.standing-cta__heading {
	grid-area: heading;
	padding: var(--space-6) var(--space-5) 0;
	font-size: var(--fs-h3);
	font-weight: var(--fw-medium);
	letter-spacing: 0.02em;
	line-height: var(--lh-tight);
}

.standing-cta__note {
	grid-area: note;
	padding: var(--space-3) var(--space-5) 0;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body);
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
}

.standing-cta__actions {
	grid-area: actions;
	display: grid;
	gap: var(--space-3);
	padding: var(--space-5) var(--space-5) 0;
}

.standing-cta__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	letter-spacing: 0.08em;
	line-height: var(--lh-tight);
	transition: opacity var(--duration-fast), background-color var(--duration-fast);
}

.standing-cta__btn::after {
	content: "";
	position: absolute;
	right: var(--space-4);
	width: var(--space-2);
	height: var(--space-2);
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

.standing-cta__btn--fill {
	background: var(--color-primary);
	color: var(--color-text-inverse);
}

.standing-cta__btn--fill:hover {
	background: var(--color-primary-hover);
}

.standing-cta__btn--outline {
	border: 1px solid var(--color-primary);
	color: var(--color-primary);
}

.standing-cta__btn--outline:hover {
	opacity: 0.75;
}

/* カレンダーアイコン（CSS mask + currentColor） */
.standing-cta__btn-icon {
	flex: none;
	width: var(--space-4);
	height: var(--space-4);
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 2.5v5M16 2.5v5'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='8' cy='14.5' r='1'/%3E%3Ccircle cx='12' cy='14.5' r='1'/%3E%3Ccircle cx='16' cy='14.5' r='1'/%3E%3Ccircle cx='8' cy='17.5' r='1'/%3E%3Ccircle cx='12' cy='17.5' r='1'/%3E%3Ccircle cx='16' cy='17.5' r='1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 2.5v5M16 2.5v5'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='8' cy='14.5' r='1'/%3E%3Ccircle cx='12' cy='14.5' r='1'/%3E%3Ccircle cx='16' cy='14.5' r='1'/%3E%3Ccircle cx='8' cy='17.5' r='1'/%3E%3Ccircle cx='12' cy='17.5' r='1'/%3E%3Ccircle cx='16' cy='17.5' r='1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- 電話番号 ---- */

.standing-cta__tel {
	grid-area: tel;
	padding: var(--space-5);
	text-align: center;
}

.standing-cta__tel a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-h2-mobile);
	font-weight: var(--fw-medium);
	letter-spacing: 0.06em;
	line-height: var(--lh-tight);
}

/* 金色の受話器アイコン（丸枠つき） */
.standing-cta__tel-icon {
	flex: none;
	width: var(--space-6);
	height: var(--space-6);
	color: var(--color-accent);
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15.2' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' transform='translate(8 8) scale(0.67)' d='M6.8 4.2c.5-.5 1.3-.4 1.7.1l1.7 2.2c.3.5.3 1.1-.1 1.5l-1 1.1a12.8 12.8 0 0 0 5.8 5.8l1.1-1c.4-.4 1-.4 1.5-.1l2.2 1.7c.5.4.6 1.2.1 1.7l-1.2 1.2c-.5.5-1.2.7-1.9.5-5.4-1.6-9.6-5.8-11.2-11.2-.2-.7 0-1.4.5-1.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15.2' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' transform='translate(8 8) scale(0.67)' d='M6.8 4.2c.5-.5 1.3-.4 1.7.1l1.7 2.2c.3.5.3 1.1-.1 1.5l-1 1.1a12.8 12.8 0 0 0 5.8 5.8l1.1-1c.4-.4 1-.4 1.5-.1l2.2 1.7c.5.4.6 1.2.1 1.7l-1.2 1.2c-.5.5-1.2.7-1.9.5-5.4-1.6-9.6-5.8-11.2-11.2-.2-.7 0-1.4.5-1.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 768px) {
	.standing-cta {
		padding-block: var(--space-11);
	}

	/* 横長カード: 左端写真 / 中央テキスト＋電話 / 右ボタン縦積み */
	.standing-cta__card {
		grid-template-columns: 20% 1fr 30%;
		grid-template-rows: 1fr auto auto auto 1fr;
		grid-template-areas:
			"media .       actions"
			"media heading actions"
			"media note    actions"
			"media tel     actions"
			"media .       actions";
		column-gap: var(--space-8);
	}

	.standing-cta__heading {
		padding: 0;
		font-size: var(--fs-h2-mobile);
		letter-spacing: 0.08em;
		line-height: var(--lh-body);
	}

	.standing-cta__note {
		padding: var(--space-4) 0 0;
		font-size: var(--fs-body);
	}

	.standing-cta__actions {
		align-self: center;
		padding: var(--space-6) var(--space-8) var(--space-6) 0;
	}

	.standing-cta__btn {
		padding: var(--space-4) var(--space-6);
	}

	.standing-cta__tel {
		padding: var(--space-6) 0 var(--space-9);
		text-align: left;
	}

	.standing-cta__tel a {
		font-size: var(--fs-h2);
		gap: var(--space-3);
	}

	.standing-cta__tel-icon {
		width: var(--space-8);
		height: var(--space-8);
	}

	.standing-cta__heading {
		padding-top: var(--space-9);
	}
}