/* 幅は置き場所ごとにページ側のクラス（.w-mv__badges など）で決める。
   このCSSはページのCSSより後に読まれるため、同じ詳細度だと width: 100% が勝って
   バッジが親幅いっぱいに広がってしまう。:where() で詳細度を 0 にして既定値扱いにする */
:where(.mh-badges) {
	width: 100%;
}

.mh-badges .mh-badges__list {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 2.2%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mh-badges .mh-badges__item {
	flex: 1 1 0;
	min-width: 0;
	max-width: 380px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}

.mh-badges .mh-badges__item::before,
.mh-badges .mh-badges__item::marker {
	content: none;
}

.mh-badges .mh-badge {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .18));
}

.mh-badges .mh-badge__t {
	fill: #3c3c3c;
	font-family: inherit;
	font-weight: 700;
	letter-spacing: .01em;
}

.mh-badges .mh-badges__note {
	margin: clamp(8px, 1.5vw, 16px) 0 0;
	padding: 0;
	font-size: clamp(10px, 1vw, 13px);
	font-weight: 500;
	line-height: 1.7;
	text-align: center;
}