/* ===============================
   contact-select: お問い合わせ内容の選択
   SP: 中央見出し + 2×2ボタングリッド + 注記
   PC: 1行4列
   =============================== */

.contact-select {
	padding-block: var(--space-8) var(--space-7);
}

/* ---- 見出し（線 + 菱形 + テキスト + 菱形 + 線） ---- */

.contact-select__heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-size: var(--fs-h3);
	color: var(--color-primary);
	letter-spacing: 0.02em;
	text-align: center;
	white-space: nowrap;
}

.contact-select__heading::before,
.contact-select__heading::after {
	content: "";
	flex: none;
	width: var(--space-5);
	border-top: 1px solid var(--color-accent);
}

.contact-select__heading span {
	position: relative;
	padding-inline: var(--space-4);
}

.contact-select__heading span::before,
.contact-select__heading span::after {
	content: "";
	position: absolute;
	top: 50%;
	width: var(--space-2);
	height: var(--space-2);
	border: 1px solid var(--color-accent);
	transform: translateY(-50%) rotate(45deg);
}

.contact-select__heading span::before {
	left: 0;
}

.contact-select__heading span::after {
	right: 0;
}

/* ---- ボタングリッド ---- */

.contact-select__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
	margin-top: var(--space-5);
}

.contact-select__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	min-height: var(--space-9);
	padding: var(--space-3) var(--space-2);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body);
	letter-spacing: 0;
	line-height: var(--lh-tight);
	color: var(--color-text);
	white-space: nowrap;
	transition: border-color var(--duration-fast), background-color var(--duration-fast);
}

.contact-select__btn:hover {
	border-color: var(--color-accent);
}

.contact-select__btn--selected {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-inverse);
}

.contact-select__btn--selected:hover {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
}

/* ---- アイコン（mask + 金色） ---- */

.contact-select__icon {
	flex: none;
	width: var(--space-6);
	height: var(--space-6);
	background-color: var(--color-accent);
}

/* 椅子 */
.contact-select__btn--seat .contact-select__icon {
	-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' stroke-linejoin='round'%3E%3Cpath d='M8 3v9M16 3v9M8 7.5h8'/%3E%3Cpath d='M5 12h14M6.5 12v9M17.5 12v9M6.5 16.5h11'/%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' stroke-linejoin='round'%3E%3Cpath d='M8 3v9M16 3v9M8 7.5h8'/%3E%3Cpath d='M5 12h14M6.5 12v9M17.5 12v9M6.5 16.5h11'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* 人物グループ */
.contact-select__btn--banquet .contact-select__icon {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='12' cy='6.5' r='3'/%3E%3Ccircle cx='5.2' cy='8.5' r='2.1'/%3E%3Ccircle cx='18.8' cy='8.5' r='2.1'/%3E%3Cpath d='M12 10.5c-3.1 0-5.6 2.1-5.6 4.7V21h11.2v-5.8c0-2.6-2.5-4.7-5.6-4.7z'/%3E%3Cpath d='M5.2 11.6c-2.3 0-4.2 1.6-4.2 3.6V19h3.4v-3.5c0-1.5.6-2.8 1.6-3.8-.3-.06-.5-.1-.8-.1z'/%3E%3Cpath d='M18.8 11.6c2.3 0 4.2 1.6 4.2 3.6V19h-3.4v-3.5c0-1.5-.6-2.8-1.6-3.8.3-.06.5-.1.8-.1z'/%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='%23000'%3E%3Ccircle cx='12' cy='6.5' r='3'/%3E%3Ccircle cx='5.2' cy='8.5' r='2.1'/%3E%3Ccircle cx='18.8' cy='8.5' r='2.1'/%3E%3Cpath d='M12 10.5c-3.1 0-5.6 2.1-5.6 4.7V21h11.2v-5.8c0-2.6-2.5-4.7-5.6-4.7z'/%3E%3Cpath d='M5.2 11.6c-2.3 0-4.2 1.6-4.2 3.6V19h3.4v-3.5c0-1.5.6-2.8 1.6-3.8-.3-.06-.5-.1-.8-.1z'/%3E%3Cpath d='M18.8 11.6c2.3 0 4.2 1.6 4.2 3.6V19h-3.4v-3.5c0-1.5-.6-2.8-1.6-3.8.3-.06.5-.1.8-.1z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* クラッカー */
.contact-select__btn--event .contact-select__icon {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 21l5.5-13.5L17 16z'/%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12.5 4.5L14 6.5M17 3v2.5M20.5 6.5l-2 1.5M21.5 10.5H19'/%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%3Cpath fill='%23000' d='M3 21l5.5-13.5L17 16z'/%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12.5 4.5L14 6.5M17 3v2.5M20.5 6.5l-2 1.5M21.5 10.5H19'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* 吹き出し */
.contact-select__btn--other .contact-select__icon {
	-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-linejoin='round'%3E%3Cpath d='M12 4C6.9 4 3 7.2 3 11.1c0 2.2 1.2 4.1 3.2 5.4-.2 1.1-.7 2.3-1.4 3.2 1.7-.3 3.2-.9 4.4-1.7.9.2 1.8.3 2.8.3 5.1 0 9-3.2 9-7.1S17.1 4 12 4z'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='8.5' cy='11' r='1.1'/%3E%3Ccircle cx='12' cy='11' r='1.1'/%3E%3Ccircle cx='15.5' cy='11' r='1.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-linejoin='round'%3E%3Cpath d='M12 4C6.9 4 3 7.2 3 11.1c0 2.2 1.2 4.1 3.2 5.4-.2 1.1-.7 2.3-1.4 3.2 1.7-.3 3.2-.9 4.4-1.7.9.2 1.8.3 2.8.3 5.1 0 9-3.2 9-7.1S17.1 4 12 4z'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='8.5' cy='11' r='1.1'/%3E%3Ccircle cx='12' cy='11' r='1.1'/%3E%3Ccircle cx='15.5' cy='11' r='1.1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- 注記 ---- */

.contact-select__note {
	margin-top: var(--space-5);
	font-size: var(--fs-body-sm);
	color: var(--color-text-muted);
	text-align: center;
	letter-spacing: 0.05em;
}

@media (max-width: 767px) {
	.contact-select__heading {
		font-size: var(--fs-h2-mobile);
		line-height: var(--lh-tight);
		white-space: normal;
	}

	.contact-select__heading span {
		max-width: 100%;
		padding-inline: var(--space-3);
	}

	.contact-select__btn {
		min-height: var(--space-9);
	}

	.contact-select__note {
		font-size: var(--fs-body-pc);
		line-height: var(--lh-body);
	}
}

/* ===============================
   md: 768px〜（1行4列。アイコンはPC参考画像に無いため非表示）
   =============================== */

@media (min-width: 768px) {
	.contact-select {
		padding-block: var(--space-10) var(--space-8);
	}

	.contact-select__heading {
		font-size: var(--fs-h2-mobile);
		letter-spacing: 0.1em;
	}

	.contact-select__heading::before,
	.contact-select__heading::after {
		width: var(--space-11);
	}

	.contact-select__list {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-4);
		margin-top: var(--space-7);
	}

	.contact-select__btn {
		justify-content: center;
		min-height: var(--space-11);
		font-size: var(--fs-body-pc);
		letter-spacing: 0.1em;
	}

	.contact-select__icon {
		display: none;
	}

	.contact-select__note {
		margin-top: var(--space-6);
		font-size: var(--fs-body);
	}
}