/* ===============================
   features: 安心ポイント（4アイコン）
   SP: 2×2の枠付きカード / PC: 白帯1段4カラム + 縦罫線
   =============================== */

.features {
	padding-block: 0 var(--space-2);
}

.features__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-1);
}

.features__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-2);
	text-align: center;
	border: 1px solid var(--color-border);
	background: var(--color-bg-card);
	padding: var(--space-1) var(--space-2);
}

.features__label {
	font-size: var(--fs-body-sm);
	line-height: var(--lh-tight);
}

/* ---- 金色の線画アイコン（CSS mask + currentColor方式。global.cssと同じ手法） ---- */

.features__icon {
	width: var(--space-8);
	height: var(--space-8);
	background-color: var(--color-accent);
}

.features__icon--door {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M5.5 20.5V3.5h13v17'/%3E%3Cpath d='M9.5 5.8l5.5 1.6v13.1l-5.5-1.6z'/%3E%3Cpath d='M2.5 20.5h19'/%3E%3Ccircle cx='13.4' cy='13.4' r='0.8' fill='%23000' stroke='none'/%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' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M5.5 20.5V3.5h13v17'/%3E%3Cpath d='M9.5 5.8l5.5 1.6v13.1l-5.5-1.6z'/%3E%3Cpath d='M2.5 20.5h19'/%3E%3Ccircle cx='13.4' cy='13.4' r='0.8' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

.features__icon--people {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='12' cy='7' r='2.7'/%3E%3Cpath d='M7 20.5v-2.2c0-2.6 2.2-4.6 5-4.6s5 2 5 4.6v2.2'/%3E%3Ccircle cx='5' cy='9' r='2.1'/%3E%3Cpath d='M1.5 19.5v-1.6c0-2 1.6-3.6 3.7-3.6'/%3E%3Ccircle cx='19' cy='9' r='2.1'/%3E%3Cpath d='M22.5 19.5v-1.6c0-2-1.6-3.6-3.7-3.6'/%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' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='12' cy='7' r='2.7'/%3E%3Cpath d='M7 20.5v-2.2c0-2.6 2.2-4.6 5-4.6s5 2 5 4.6v2.2'/%3E%3Ccircle cx='5' cy='9' r='2.1'/%3E%3Cpath d='M1.5 19.5v-1.6c0-2 1.6-3.6 3.7-3.6'/%3E%3Ccircle cx='19' cy='9' r='2.1'/%3E%3Cpath d='M22.5 19.5v-1.6c0-2-1.6-3.6-3.7-3.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.features__icon--projector {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='2' y='7.5' width='20' height='9.5' rx='2'/%3E%3Ccircle cx='9' cy='12.2' r='2.7'/%3E%3Ccircle cx='9' cy='12.2' r='1.1'/%3E%3Ccircle cx='16.5' cy='12.2' r='1.6'/%3E%3Cpath d='M5.5 19.5V21M18.5 19.5V21'/%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' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='2' y='7.5' width='20' height='9.5' rx='2'/%3E%3Ccircle cx='9' cy='12.2' r='2.7'/%3E%3Ccircle cx='9' cy='12.2' r='1.1'/%3E%3Ccircle cx='16.5' cy='12.2' r='1.6'/%3E%3Cpath d='M5.5 19.5V21M18.5 19.5V21'/%3E%3C/svg%3E") center / contain no-repeat;
}

.features__icon--train {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='5' y='2.5' width='14' height='15' rx='3'/%3E%3Cpath d='M5 10.5h14'/%3E%3Cpath d='M9 2.5h6v3H9z'/%3E%3Ccircle cx='9' cy='14' r='1' fill='%23000' stroke='none'/%3E%3Ccircle cx='15' cy='14' r='1' fill='%23000' stroke='none'/%3E%3Cpath d='M8.5 17.5 6 21.5M15.5 17.5l2.5 4'/%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' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='5' y='2.5' width='14' height='15' rx='3'/%3E%3Cpath d='M5 10.5h14'/%3E%3Cpath d='M9 2.5h6v3H9z'/%3E%3Ccircle cx='9' cy='14' r='1' fill='%23000' stroke='none'/%3E%3Ccircle cx='15' cy='14' r='1' fill='%23000' stroke='none'/%3E%3Cpath d='M8.5 17.5 6 21.5M15.5 17.5l2.5 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 768px) {
	.features {
		background: var(--color-bg-card);
		padding-block: var(--space-7) var(--space-8);
	}

	/* 参考画像のカラム領域(約1295px)に合わせ、このセクションのみガターを詰める */
	.features .container {
		padding-inline: var(--space-3);
	}

	.features__list {
		grid-template-columns: repeat(4, 1fr);
		gap: 0;
	}

	.features__item {
		border: 0;
		background: transparent;
		padding: 0 var(--space-4);
		gap: var(--space-2);
	}

	/* カラム間の細い縦罫線（3本） */
	.features__item + .features__item {
		border-left: 1px solid var(--color-border);
	}

	.features__label {
		font-size: var(--fs-h2-mobile);
		font-weight: var(--fw-medium);
	}

	.features__icon {
		width: var(--space-10);
		height: var(--space-10);
	}
}