/* ==========================================================================
   かなさホーム — 施工事例は Instagram で公開している、という案内の帯（template-parts/kanasa/instagram.php。Figma p-kanasa-instagram 177:10355）
   - PC: 角丸 28px・内側 40px 48px。左に Instagram の丸（72px・濃い緑）と文、右に「Instagram で見る」
   - 地の色: 白（初期値。コラムの詳細）。トップの「役立つコラム」（白い欄）の中ではクリーム（project-top.css）
   - SP: 縦に（丸 56px → 題・文 → ボタンは幅いっぱい）
   ========================================================================== */

.p-kanasa-instagram {
	display: flex;
	gap: var(--space-2xl);
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--space-2xl) var(--space-3xl);
	background: var(--kanasa-bg-surface);
	border-radius: var(--kanasa-radius-card);
}

.p-kanasa-instagram__body {
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	min-width: 0;
}

.p-kanasa-instagram__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	color: var(--kanasa-text-on-green);
	background: var(--kanasa-bg-green-strong);
	border-radius: 50%;
}

.p-kanasa-instagram__icon .c-kanasa-icon {
	width: 34px;
	height: 34px;
}

.p-kanasa-instagram__text {
	display: flex;
	flex-direction: column;
	gap: 6px; /* Figma の値（トークンにない） */
}

.p-kanasa-instagram__title {
	font: var(--text-kanasa-h3);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-green);
}

/* 375px 未満は2行目「Instagram で公開しています」（折らない塊）が入るように小さく */
@media (max-width: 374px) {
	.p-kanasa-instagram__title {
		font-size: 17px;
	}
}

.p-kanasa-instagram__lead {
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
}

.p-kanasa-instagram__button {
	flex-shrink: 0;
}

@media (max-width: 1023px) {
	.p-kanasa-instagram {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (max-width: 767px) {
	.p-kanasa-instagram {
		gap: 20px;
		padding: 28px 20px;
	}

	.p-kanasa-instagram__body {
		flex-direction: column;
		gap: var(--space-md);
		align-items: center;
	}

	.p-kanasa-instagram__icon {
		width: 56px;
		height: 56px;
	}

	.p-kanasa-instagram__icon .c-kanasa-icon {
		width: 28px;
		height: 28px;
	}

	.p-kanasa-instagram__text {
		align-self: stretch;
	}
}