/* =====================================================================
   キャンペーンマーク「今なら対象品が 最大35%UP」（multi-item2 / gold4 共通）
   マークアップは _parts/mi2/camp.php。
   星形の縁がゆっくり回り、数秒おきに弾み、外側に波紋が広がる。
   中の文字はマーク自身の幅に対する cqw で決めるので、幅を変えるだけで全体が縮む。
   ※ 置き場所（left / top）と大きさ（width）は、各ヒーローの CSS で指定する。
   ===================================================================== */
.mi2 .mi2-camp {
	position: absolute;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	container-type: inline-size;
	color: #fff;
	font-family: var(--mi2-display);
	font-weight: 700;
	line-height: 1;
	text-align: center;
	transform: rotate(-8deg);
	animation: mi2-camp-pop 3.6s ease-in-out infinite;
}
.mi2 .mi2-camp::before {
	content: "";
	position: absolute;
	inset: 4%;
	border: 3px solid var(--mi2-accent);
	border-radius: 50%;
	opacity: 0;
	animation: mi2-camp-ripple 2.4s ease-out infinite;
	pointer-events: none;
}
.mi2 .mi2-camp__burst {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: var(--mi2-accent);
	stroke: var(--mi2-accent);
	stroke-width: 4;
	stroke-linejoin: round;
	filter: drop-shadow(0 6px 12px rgba(92, 64, 40, .28));
	transform-origin: 50% 50%;
	animation: mi2-camp-spin 18s linear infinite;
}
.mi2 .mi2-camp__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.mi2 .mi2-camp__pre {
	font-size: 12px;
	font-size: max(10px, 7cqw);
	letter-spacing: .02em;
	white-space: nowrap;
}
.mi2 .mi2-camp__row {
	display: flex;
	align-items: baseline;
	gap: 2px;
	gap: 1.2cqw;
	margin-top: 4px;
	margin-top: 2.4cqw;
	white-space: nowrap;
}
.mi2 .mi2-camp__max {
	font-size: 16px;
	font-size: 9.3cqw;
}
.mi2 .mi2-camp__num {
	font-size: 56px;
	font-size: 32.5cqw;
	line-height: .9;
	letter-spacing: -.02em;
	color: #FFE3A3;
}
.mi2 .mi2-camp__pct {
	font-size: 24px;
	font-size: 14cqw;
	margin-left: 1px;
}
.mi2 .mi2-camp__up {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	gap: 1.2cqw;
	margin-top: 2px;
	margin-top: 1.2cqw;
	font-size: 24px;
	font-size: 14cqw;
	letter-spacing: .06em;
}
.mi2 .mi2-camp__up svg {
	width: .72em;
	height: .72em;
	fill: #FFE3A3;
}
@keyframes mi2-camp-spin {
	to { transform: rotate(360deg); }
}
@keyframes mi2-camp-pop {
	0%, 70%, 100% { transform: rotate(-8deg) scale(1); }
	76%           { transform: rotate(-2deg) scale(1.1); }
	82%           { transform: rotate(-13deg) scale(.97); }
	88%           { transform: rotate(-6deg) scale(1.04); }
	94%           { transform: rotate(-9deg) scale(1); }
}
@keyframes mi2-camp-ripple {
	0%   { transform: scale(.92); opacity: .5; }
	100% { transform: scale(1.3); opacity: 0; }
}

/* 金色の縁どり（gold4）。線が枠の外へはみ出すぶんは SVG の overflow で見せる */
.mi2 .mi2-camp--gold .mi2-camp__burst {
	overflow: visible;
	stroke: #F7C548;
	stroke-width: 11;
}

/* 動きを減らす設定の端末では、止めて静止表示にする */
@media (prefers-reduced-motion: reduce) {
	.mi2 .mi2-camp,
	.mi2 .mi2-camp__burst,
	.mi2 .mi2-camp::before { animation: none; }
}