.notice-card {
	display: flex;
	flex-direction: column;
	border-width: 1px;
	border-style: solid;
	border-radius: var(--b-radius--24);
	overflow: hidden;
}

.notice-card__header,
.notice-card__main {
	padding: 20px var(--sp-16-24);
}

.notice-card__header {
	display: flex;
	flex-direction: row;
	gap: 16px;
	flex-wrap: wrap;
}
.notice-card__header__icon {
	display: flex;
}
.notice-card__header__icon__img {
	width: 24px;
	min-width: 24px;
	height: auto;
}

.notice-card__main {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.notice-card__main__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.notice-card.--white {
	border-color: var(--gray-300, #d1d5db);
	background: #fff;
}
.notice-card.--white .notice-card__header {
	border-bottom: 1px solid var(--gray-200, #e5e7eb);
}

.notice-card.--yellow {
	border-color: var(--orange-300, #c4b5fd);
	background: var(--orange-50, #F5F3FF);
}
.notice-card.--yellow .notice-card__header {
	border-bottom: 1px solid var(--orange-200, #fed7aa);
	color: var(--orange-700, #BD4210);
}

.notice-card.--violet {
	border-color: var(--violet-300, #c4b5fd);
	background: var(--violet-50, #F5F3FF);
}
.notice-card.--violet .notice-card__header {
	border-bottom: 1px solid var(--blue-200, #bfdbfe);
	color: var(--violet-700, #6d28d9);
}

.notice-card.--pink {
	border-color: var(--orchid-100, #E5BDDA);
	background: var(--orchid-50, #F7EAF3);
}
.notice-card.--pink .notice-card__header {
	border-bottom: 1px solid var(--orchid-200, #d99dc8);
	color: var(--orchid-700, #7a1f60);
}

.notice-card.--blue {
	background: var(--blue-50, #F5F3FF);
	border-color: var(--blue-300, #93C5FD);
}
.notice-card.--blue .notice-card__header {
	border-bottom: 1px solid var(--blue-200, #bfdbfe);
	color: var(--blue-700, #1d4ed8);
}

.notice-card.--green {
	border-color: var(--green-300, #86efac);
	background: var(--green-50, #f0fdf4);
}
.notice-card.--green .notice-card__header {
	border-bottom-color: var(--green-200, #bbf7d0);
	color: var(--green-700, #15803d);
}