/* =============================================================================
 * /rifbar-mixpro/  RIFBAR × MyMoods「MixPro」紹介LP（v8: EC モック v4.5 の意匠）
 *
 * 背景・装飾・見出し画像は本国 rifbar.com/product-mixpro の 3DCG 素材。
 * 機体はシーンごとに本国と同じ角度で描いたレンダー（r-*.webp）。
 * 座標は「本国プレートの幅 = 100」の単位（.mm-rmx-scene の --cx0 / --cw / --ch で切り出す）。
 *
 * 購入ブロック（.mm-rmx-purchase）だけは PDP と同じ DOM なので、既存部品の見た目を白いカードに寄せる。
 * ========================================================================== */

.mm-rmx {
	--rmx-pink: #f0489a;
	--rmx-magenta: #d92f8f;
	--rmx-blue: #3d84d6;
	--rmx-violet: #8b5cf0;
	--rmx-lav: #b9a3f2;
	--rmx-ink: #2b2260;
	--rmx-ink-2: #5a4f8c;
	--rmx-navy: #0e0b2e;
	--rmx-glass: rgba(255, 255, 255, 0.58);
	--rmx-glass-line: rgba(255, 255, 255, 0.85);
	--rmx-grad-cta: linear-gradient(135deg, #ff6bb3 0%, #c65cf0 55%, #7a7bff 100%);
	--rmx-radius: 26px;
	--rmx-f-jp: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
	--rmx-f-en: "Fredoka", "M PLUS Rounded 1c", sans-serif;
	--rmx-f-disp: "Titan One", "Fredoka", "M PLUS Rounded 1c", sans-serif;
	position: relative;
	font-family: var(--rmx-f-jp);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.8;
	color: var(--rmx-ink);
	background: var(--rmx-navy);
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}
.mm-rmx *,
.mm-rmx *::before,
.mm-rmx *::after { box-sizing: border-box; }
/* リセットは :where() で詳細度を 0 にして、部品側の margin を上書きしない */
:where(.mm-rmx) :where(h1, h2, h3, h4, p, ul, ol, dl, dd) { margin: 0; padding: 0; }
:where(.mm-rmx) :where(ul, ol) { list-style: none; }
:where(.mm-rmx) :where(img, video) { display: block; max-width: 100%; height: auto; }
:where(.mm-rmx) button { font: inherit; }
:where(.mm-rmx) a { color: inherit; text-decoration: none; }
/* モックの .wrap（min(1160px, 100% - 40px)）に合わせる。LP の中だけに効かせる */
.mm-rmx .mmv2-container {
	width: min(1160px, calc(100% - 40px));
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
}
.mm-rmx-center { text-align: center; }
.mm-rmx-pc-only { display: revert; }
.mm-rmx-sp-only { display: none; }

/* ---------- 部品 ---------- */
.mm-rmx-kicker {
	margin: 0;
	font-family: var(--rmx-f-en);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--rmx-pink);
}
.mm-rmx-tag {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 99px;
	background: #fff;
	color: var(--rmx-violet);
	font-family: var(--rmx-f-en);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.16em;
	box-shadow: 0 2px 0 rgba(139, 92, 240, 0.25);
}
/* 本国のバブル見出し（白縁＋塗り＋発光）。画像タイトルが無い見出し用 */
.mm-rmx-bubble {
	display: block;
	font-family: var(--rmx-f-disp);
	font-weight: 400;
	font-size: clamp(30px, 4.4vw, 58px);
	line-height: 1.12;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fill, var(--rmx-pink));
	-webkit-text-stroke: 7px #fff;
	paint-order: stroke fill;
	filter: drop-shadow(0 3px 0 rgba(90, 60, 170, 0.22)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.75));
}
.mm-rmx-bubble[lang="ja"] { font-family: var(--rmx-f-jp); font-weight: 800; letter-spacing: 0.04em; }
.mm-rmx-bubble--violet { --fill: #8b5cf0; }
.mm-rmx-bubble--white { --fill: #fff; -webkit-text-stroke: 0; filter: drop-shadow(0 0 16px rgba(190, 140, 255, 0.9)); }
.mm-rmx-ttl-img { width: min(var(--tw, 560px), 100%); height: auto; }
/* 中央揃えのブロック（FLAVORS 見出しなど）では画像タイトルも中央に置く。img は block なので text-align が効かない */
.mm-rmx-center .mm-rmx-ttl-img { margin-inline: auto; }
.mm-rmx-sub { margin-top: 14px; font-weight: 800; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5; }
.mm-rmx-sub--light { color: #e6dcff; }
.mm-rmx-lead { margin-top: 10px; max-width: 36em; font-size: 15.5px; color: var(--rmx-ink); }
.mm-rmx-lead--center { margin-inline: auto; }
.mm-rmx-glass {
	background: var(--rmx-glass);
	border: 1.5px solid var(--rmx-glass-line);
	border-radius: var(--rmx-radius);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	backdrop-filter: blur(16px) saturate(1.3);
	box-shadow: 0 18px 50px rgba(70, 40, 150, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.mm-rmx .mm-rmx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 34px;
	border: 2px solid rgba(255, 255, 255, 0.75);
	border-radius: 99px;
	background: var(--rmx-grad-cta);
	color: #fff;
	font-family: var(--rmx-f-jp);
	font-weight: 800;
	font-size: 16px;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: 0 10px 26px rgba(198, 92, 240, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.45);
	transition: transform 0.2s, box-shadow 0.2s;
	cursor: pointer;
}
.mm-rmx .mm-rmx-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(198, 92, 240, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45); color: #fff; }
.mm-rmx .mm-rmx-btn--ghost { background: rgba(255, 255, 255, 0.7); color: var(--rmx-ink); box-shadow: 0 8px 20px rgba(60, 40, 140, 0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mm-rmx .mm-rmx-btn--ghost:hover { color: var(--rmx-ink); }
.mm-rmx-section { position: relative; padding: 96px 0; overflow: hidden; }

/* ---------- シーン（本国 3DCG 背景＋レンダー） ----------
   --cx0 / --cw は横の切り出し。PC は 5 / 90（本国が 1440 幅で横 1600 の原寸を中央で切り出すのと同じ見え方）。
   SP はシーンごと。1 単位 = 1440 幅で 16px */
.mm-rmx-vis {
	position: relative;
	display: grid;
	max-width: 1920px;
	margin-inline: auto;
	overflow: hidden;
	background: var(--flow, #cbbfe0);
}
.mm-rmx-scene {
	--cx0: 5;
	--cy0: 0;
	--cw: 90;
	grid-area: 1 / 1;
	position: relative;
	width: 100%;
	aspect-ratio: calc(var(--cw) / var(--ch));
	overflow: hidden;
}
.mm-rmx-scene__bg { display: block; }
.mm-rmx-scene > picture.mm-rmx-scene__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm-rmx-dev, .mm-rmx-ice, .mm-rmx-deco {
	--X: var(--px);
	--Y: var(--py);
	--W: var(--pw);
	--R: var(--pr, 0deg);
	position: absolute;
	left: calc((var(--X) - var(--cx0)) / var(--cw) * 100%);
	top: calc((var(--Y) - var(--cy0)) / var(--ch) * 100%);
	width: calc(var(--W) / var(--cw) * 100%);
	rotate: var(--R);
	margin: 0;
}
.mm-rmx-dev { z-index: 3; }
.mm-rmx-dev > img { position: relative; width: 100%; }
/* Blender で本国と同じ角度・そのシーンの環境光で描いた機体（影は画像に入っている）。CSS では色を触らない */
.mm-rmx-dev--r > img { filter: none; }
.mm-rmx-dev--r.mm-rmx-dev--float > img { filter: drop-shadow(0 34px 30px rgba(70, 50, 150, 0.2)); }
.mm-rmx-dev--r.mm-rmx-dev--cast > img { filter: drop-shadow(5px 8px 5px rgba(20, 40, 120, 0.38)) drop-shadow(22px 30px 26px rgba(20, 40, 130, 0.32)); }
.mm-rmx-dev--r.mm-rmx-dev--stand::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 4%;
	right: -6%;
	bottom: -1.5%;
	height: 7%;
	background: radial-gradient(ellipse at 45% 50%, rgba(16, 10, 60, 0.55), rgba(16, 10, 60, 0.18) 45%, transparent 70%);
	filter: blur(5px);
	opacity: 0.8;
}
.mm-rmx-dev--float { animation: mm-rmx-bob 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes mm-rmx-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.2%; } }
.mm-rmx-deco { z-index: 4; pointer-events: none; }
.mm-rmx-deco--bob { animation: mm-rmx-bob 5s ease-in-out infinite; }
video.mm-rmx-deco, picture.mm-rmx-deco { display: block; }
.mm-rmx-scene > picture.mm-rmx-deco img { position: static; inset: auto; width: 100%; height: auto; object-fit: fill; }
/* レンダー上の液晶の四隅に、平面の画面（352×440）を射影変換で貼る。倍率（表示幅 / w0）は JS が transform に掛ける。
   will-change が無いと Chrome が縮小時に中身を小さく描く */
.mm-rmx-lcdq {
	position: absolute;
	left: 0;
	top: 0;
	width: 352px;
	height: 440px;
	transform-origin: 0 0;
	pointer-events: none;
	will-change: transform;
}
.mm-rmx-lcd-layer { position: absolute; inset: 0; visibility: hidden; background: #06060c; border-radius: 9% / 7%; }
.mm-rmx-lcd-layer.is-on { visibility: visible; }
.mm-rmx-lcdq picture { display: contents; }
.mm-rmx-lcdq img, .mm-rmx-lcdq video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 9% / 7%; }
/* 氷片（本国と同じ：氷のシーンにだけ浮かせ、マウスとスクロールで視差） */
.mm-rmx-ice { z-index: 2; pointer-events: none; will-change: transform; }
.mm-rmx-ice--front { z-index: 5; }
.mm-rmx-ice img { width: 100%; animation: mm-rmx-drift var(--dur, 9s) ease-in-out infinite; animation-delay: var(--d, 0s); filter: drop-shadow(0 10px 14px rgba(90, 70, 170, 0.18)); }
@keyframes mm-rmx-drift { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9%) rotate(4deg); } }
/* 重ねるコピー。margin の % はシーン幅に対する割合＝PC ではプレート単位そのまま */
.mm-rmx-ov {
	grid-area: 1 / 1;
	z-index: 6;
	justify-self: start;
	align-self: start;
	width: var(--w);
	margin-left: var(--l);
	margin-top: var(--t);
}
.mm-rmx-ov--c { justify-self: center; margin-left: 0; }
.mm-rmx-ov.mm-rmx-glass { padding: 28px 30px; }

/* ---------- HERO ---------- */
.mm-rmx-hero .mm-rmx-scene { --cx0: 0; --cw: 100; --ch: 68.5; --cy0: 20; }
/* KV のリング：正面 n 色 → 背面 n 色を周回させて 24 台・15° 刻み。位置と大きさは JS が毎フレーム計算 */
.mm-rmx-ring {
	position: absolute;
	inset: 0;
	z-index: 3;
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	outline-offset: -4px;
}
.mm-rmx-ring.is-drag { cursor: grabbing; }
.mm-rmx-ring__card {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	transform-origin: 50% 100%;
	will-change: transform, opacity;
	-webkit-tap-highlight-color: transparent;
}
.mm-rmx-ring__card img {
	position: absolute;
	left: 50%;
	bottom: 0;
	height: 100%;
	width: auto;
	max-width: none;
	translate: -50% 0;
	filter: saturate(1.2) contrast(1.1) brightness(0.97) drop-shadow(0 3px 2px rgba(8, 4, 40, 0.5)) drop-shadow(16px 8px 16px rgba(8, 4, 40, 0.34));
	pointer-events: none;
	-webkit-user-drag: none;
}
.mm-rmx-ring__card::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: -10%;
	right: -34%;
	bottom: -3.5%;
	height: 11%;
	background: radial-gradient(ellipse at 42% 50%, rgba(10, 6, 50, 0.72), rgba(10, 6, 50, 0.3) 42%, transparent 70%);
	filter: blur(6px);
}
.mm-rmx-ring__hint {
	position: absolute;
	z-index: 4;
	left: 50%;
	translate: -50% 0;
	margin: 0;
	padding: 4px 14px;
	border-radius: 99px;
	background: rgba(22, 18, 63, 0.6);
	color: #fff;
	font-family: var(--rmx-f-en);
	font-weight: 700;
	font-size: clamp(10px, 0.95vw, 13px);
	letter-spacing: 0.14em;
	white-space: nowrap;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	pointer-events: none;
}
.mm-rmx-hero__copy {
	grid-area: 1 / 1;
	z-index: 6;
	justify-self: center;
	align-self: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: clamp(12px, 1.5vw, 24px);
	text-align: center;
	color: #fff;
	pointer-events: none;
}
.mm-rmx-hero__copy .mm-rmx-kicker { color: #fff; font-size: 14px; text-shadow: 0 2px 10px rgba(0, 0, 40, 0.4); }
.mm-rmx-hero__title { margin-top: 4px; line-height: 0; }
.mm-rmx-hero__logo { width: clamp(200px, 20vw, 300px); filter: drop-shadow(0 10px 24px rgba(20, 0, 80, 0.45)); }
.mm-rmx-hero__title .mm-rmx-bubble { line-height: 1; }
.mm-rmx-hero__sub { margin-top: 2px; font-weight: 800; font-size: clamp(17px, 1.8vw, 25px); letter-spacing: 0.12em; text-shadow: 0 2px 12px rgba(0, 0, 50, 0.55); }
.mm-rmx-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(10px, 1.2vw, 18px); pointer-events: auto; }
.mm-rmx-hero__cta .mm-rmx-btn { padding: 12px 30px; font-size: 15px; }
.mm-rmx-price-pill {
	position: absolute;
	z-index: 6;
	right: 4%;
	top: 6%;
	display: grid;
	place-content: center;
	width: clamp(86px, 9vw, 124px);
	aspect-ratio: 1;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--rmx-grad-cta);
	color: #fff;
	font-family: var(--rmx-f-en);
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	box-shadow: 0 10px 26px rgba(30, 0, 90, 0.4);
	rotate: 8deg;
}
.mm-rmx-price-pill b { font-size: clamp(17px, 1.9vw, 26px); }
.mm-rmx-price-pill b .woocommerce-Price-amount { font-family: inherit; }
.mm-rmx-price-pill small { font-family: var(--rmx-f-jp); font-size: 10px; letter-spacing: 0.06em; }

/* ---------- 特徴 3 カード：ヒーロー下端に重なるガラスカード ---------- */
.mm-rmx-feats-sec { position: relative; z-index: 7; margin-top: -104px; padding-bottom: 30px; background: linear-gradient(transparent 104px, #c9a4e4 104px, #a797ce); }
.mm-rmx-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mm-rmx-feat { position: relative; padding: 26px 24px 22px 92px; background: rgba(255, 255, 255, 0.34); border-color: rgba(255, 255, 255, 0.7); }
.mm-rmx-feat__num {
	position: absolute;
	left: 16px;
	top: 16px;
	font-family: var(--rmx-f-disp);
	font-size: 58px;
	line-height: 1;
	color: var(--c, var(--rmx-pink));
	-webkit-text-stroke: 5px #fff;
	paint-order: stroke fill;
	filter: drop-shadow(0 3px 0 rgba(90, 60, 170, 0.2));
}
.mm-rmx-feat h3 { margin-top: 8px; font-size: 19px; font-weight: 800; line-height: 1.4; color: #1d1650; }
.mm-rmx-feat p { margin-top: 4px; font-size: 13.5px; line-height: 1.65; color: var(--rmx-ink); }
.mm-rmx-feat .mm-rmx-tag { padding: 3px 11px; font-size: 10px; }
.mm-rmx-feat .mm-rmx-feat__big { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; line-height: 1.1; color: #1d1650; }
.mm-rmx-feat__big b { font-family: var(--rmx-f-disp); font-weight: 400; font-size: 38px; letter-spacing: 0.01em; }
.mm-rmx-feat__big span { font-weight: 800; font-size: 16px; }
.mm-rmx-feat__big, .mm-rmx-feat__big * { white-space: nowrap; }

/* ---------- 帯 ---------- */
.mm-rmx-marquee { overflow: hidden; border-block: 2px solid #fff; background: var(--rmx-grad-cta); color: #fff; }
.mm-rmx-marquee__track { display: flex; width: max-content; animation: mm-rmx-mq 28s linear infinite; }
.mm-rmx-marquee__track span { padding: 10px 26px; font-family: var(--rmx-f-disp); font-size: 20px; letter-spacing: 0.1em; white-space: nowrap; }
.mm-rmx-marquee__track span::after { content: "✦"; margin-left: 52px; opacity: 0.8; }
@keyframes mm-rmx-mq { to { transform: translateX(-50%); } }

/* ---------- MEET（本国の縦長構図。床に ABOUT RIFBAR） ---------- */
#rmx-meet { --flow: #d480bf; }
.mm-rmx-meet__ttl { --t: 2.6%; --w: 39%; margin-top: 2.6%; }
.mm-rmx-meet__ttl .mm-rmx-ttl-img { width: 100%; }
.mm-rmx-meet__intro { --t: 10.2%; --w: 50%; text-align: center; color: #fff; text-shadow: 0 2px 12px rgba(60, 30, 130, 0.55); }
.mm-rmx-meet__intro .mm-rmx-sub { margin-top: 0; font-size: 19px; }
.mm-rmx-meet__intro .mm-rmx-lead { max-width: 44em; margin: 2px auto 0; font-size: 13.5px; line-height: 1.65; color: #fff; }
.mm-rmx-specs-wrap { display: contents; }
.mm-rmx-specs { grid-area: 1 / 1; z-index: 6; align-self: start; display: grid; gap: 14px; width: 27%; margin-top: 20.4%; }
.mm-rmx-specs--l { justify-self: start; margin-left: 4.5%; }
.mm-rmx-specs--r { justify-self: end; margin-right: 4.5%; }
.mm-rmx-spec { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; padding: 8px 16px 8px 10px; border-radius: 20px; }
.mm-rmx-spec img, .mm-rmx-spec > span { width: 48px; height: 48px; object-fit: contain; }
.mm-rmx-spec__en { font-family: var(--rmx-f-en); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; color: var(--rmx-violet); }
.mm-rmx-spec__v { font-weight: 800; font-size: 15px; line-height: 1.35; }
/* 特に見せたい 3 点（ADJUSTMENT / PUFFS / COIL。inc の feature フラグ）。色面・大きさ・発光で他の 7 枚と差をつける */
.mm-rmx-spec.is-key {
	position: relative;
	z-index: 1;
	grid-template-columns: 60px 1fr;
	padding: 13px 20px 13px 12px;
	background: linear-gradient(120deg, #ff4fa6 0%, #c655f0 58%, #7a6bff 100%);
	border: 2.5px solid #fff;
	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.32), 0 16px 38px rgba(210, 70, 230, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	animation: mm-rmx-keyglow 2.6s ease-in-out infinite;
}
.mm-rmx-specs--l .mm-rmx-spec.is-key { transform: scale(1.09); transform-origin: 0 50%; }
.mm-rmx-specs--r .mm-rmx-spec.is-key { transform: scale(1.09); transform-origin: 100% 50%; }
.mm-rmx-spec.is-key img { width: 60px; height: 60px; filter: drop-shadow(0 3px 6px rgba(80, 10, 120, 0.45)); }
.mm-rmx-spec.is-key .mm-rmx-spec__en { color: #fff; font-size: 12px; text-shadow: 0 1px 3px rgba(90, 20, 130, 0.5); }
.mm-rmx-spec.is-key .mm-rmx-spec__v { color: #fff; font-size: 18.5px; text-shadow: 0 2px 6px rgba(90, 20, 130, 0.55); }
.mm-rmx-spec.is-key::after {
	content: "POINT";
	position: absolute;
	right: 14px;
	top: -12px;
	padding: 2px 11px;
	border: 2px solid #fff;
	border-radius: 99px;
	background: #ffe14d;
	color: #3b1d6b;
	font-family: var(--rmx-f-disp);
	font-size: 11px;
	letter-spacing: 0.14em;
	box-shadow: 0 3px 8px rgba(60, 20, 110, 0.35);
}
@keyframes mm-rmx-keyglow {
	0%, 100% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.32), 0 16px 38px rgba(210, 70, 230, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
	50% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2), 0 18px 50px rgba(255, 80, 170, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
}
.mm-rmx-about { --t: 60.6%; --w: 86%; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 30px; align-items: center; padding: 22px 34px !important; }
.mm-rmx-about .mm-rmx-bubble { margin-top: 2px; font-size: clamp(24px, 2.6vw, 36px); }
.mm-rmx-about .mm-rmx-lead { max-width: none; margin-top: 8px; font-size: 14px; }
.mm-rmx-stat { padding-left: 30px; border-left: 2px solid rgba(255, 255, 255, 0.9); text-align: center; }
.mm-rmx-stat__label { font-weight: 800; font-size: 15px; letter-spacing: 0.1em; }
.mm-rmx-stat__n {
	font-family: var(--rmx-f-disp);
	font-size: clamp(34px, 4.2vw, 60px);
	line-height: 1.1;
	white-space: nowrap;
	background: linear-gradient(180deg, #ff6bb3, #8b5cf0);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 3px 0 rgba(255, 255, 255, 0.9));
}
.mm-rmx-stat__n small { font-family: var(--rmx-f-jp); font-weight: 800; font-size: 0.38em; color: var(--rmx-violet); -webkit-text-fill-color: var(--rmx-violet); }

/* ---------- 紹介動画 ---------- */
/* SP のみ出す MEET のカード置き場（PC は MEET の画像に重ねて表示） */
.mm-rmx-meet-sp { display: none; }
.mm-rmx-vidsec { background: #120d3a center / cover no-repeat; color: #fff; text-align: center; }
.mm-rmx-vidsec .mm-rmx-bubble { margin-top: 14px; }
.mm-rmx-video__frame { position: relative; max-width: 920px; margin: 36px auto 0; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 28px; overflow: hidden; box-shadow: 0 0 0 8px rgba(185, 163, 242, 0.22), 0 30px 80px rgba(120, 60, 255, 0.45); }
.mm-rmx-video__player { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.mm-rmx-video__sound {
	position: absolute;
	right: 14px;
	bottom: 14px;
	padding: 8px 14px;
	border: 1.5px solid #fff;
	border-radius: 99px;
	background: rgba(20, 10, 60, 0.6);
	color: #fff;
	font-family: var(--rmx-f-en);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	cursor: pointer;
}

/* ---------- SMART DISPLAY ---------- */
.mm-rmx-copy--display { --l: 5%; --t: 3.5%; --w: 35%; }
.mm-rmx-copy h2 { margin-top: 14px; }
.mm-rmx-screens { --l: 64%; --t: 15%; --w: 30%; padding: 20px 22px 14px !important; }
.mm-rmx-screens__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 18px; }
.mm-rmx-screen { padding: 0; border: 0; background: none; color: inherit; text-align: center; cursor: pointer; transition: transform 0.25s; }
.mm-rmx-screen img { width: 100%; border-radius: 22%; box-shadow: 0 10px 22px rgba(90, 60, 190, 0.3); transition: box-shadow 0.25s; }
.mm-rmx-screen span { display: block; margin-top: 6px; font-family: var(--rmx-f-en); font-weight: 700; font-size: 11.5px; letter-spacing: 0.1em; }
.mm-rmx-screen:hover, .mm-rmx-screen.is-on { transform: translateY(-6px); }
.mm-rmx-screen.is-on img { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--rmx-pink), 0 14px 26px rgba(240, 72, 154, 0.4); }
.mm-rmx-screens p { margin-top: 8px; font-size: 12.5px; color: var(--rmx-ink-2); text-align: center; }

/* ---------- PUFFS ---------- */
.mm-rmx-copy--puffs { --l: 56%; --t: 2%; --w: 39%; }
.mm-rmx-anchor { margin-top: 16px; padding: 12px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.75); font-weight: 800; font-size: 15.5px; color: #2a63b8; }
.mm-rmx-anchor small { display: block; font-weight: 500; font-size: 11.5px; color: var(--rmx-ink-2); }

/* ---------- BATTERY ---------- */
#rmx-battery { --flow: #bfc6d3; }
.mm-rmx-copy--battery { --l: 57%; --t: 26%; --w: 37%; }
.mm-rmx-dev--plain > img { filter: saturate(0.92) brightness(1.03) drop-shadow(10px 18px 14px rgba(90, 50, 110, 0.35)); }

/* ---------- COIL ---------- */
#rmx-coil { --flow: #b47cc7; }
.mm-rmx-copy--coil { --l: 4%; --t: 4%; --w: 30%; }
.mm-rmx-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mm-rmx-points li { padding: 6px 14px; border-radius: 99px; background: #fff; color: #2a63b8; font-weight: 800; font-size: 13.5px; box-shadow: 0 3px 0 rgba(61, 132, 214, 0.25); }
.mm-rmx-coil-img { filter: drop-shadow(0 0 18px rgba(255, 150, 70, 0.75)) drop-shadow(0 14px 16px rgba(40, 60, 120, 0.3)); }

/* ---------- CONTROL ---------- */
#rmx-control { --flow: #c8bbd1; }
#rmx-control .mm-rmx-scene::after { content: ""; position: absolute; inset: auto 0 0; z-index: 1; height: 16%; background: linear-gradient(rgba(205, 192, 212, 0), #cdc0d4); }
.mm-rmx-copy--control { --l: 66%; --t: 34%; --w: 30%; }
.mm-rmx-dials { display: grid; gap: 10px; margin-top: 18px; }
.mm-rmx-dial { display: grid; grid-template-columns: 34px 118px 1fr; align-items: center; gap: 10px; font-family: var(--rmx-f-en); font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; }
.mm-rmx-dial img, .mm-rmx-dial > span:first-child { width: 34px; height: 34px; object-fit: contain; }
.mm-rmx-dial__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.mm-rmx-dial__bar i { height: 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.9); box-shadow: inset 0 1px 2px rgba(60, 40, 140, 0.2); }
.mm-rmx-dial__bar i.on { background: var(--c); box-shadow: 0 0 10px var(--c); }

/* ---------- FLAVORS ＋ 購入（本国キャンディ背景を 2 セクションで共有） ---------- */
.mm-rmx-candy { position: relative; max-width: 1920px; margin-inline: auto; background: #cdc0d4 var(--bg-pc, none) center bottom / 111.12% auto no-repeat; }
.mm-rmx-candy::before { content: ""; position: absolute; inset: 0 0 auto; height: 220px; background: linear-gradient(#cdc0d4, rgba(205, 192, 212, 0)); }
.mm-rmx-flavors { position: relative; padding: 70px 0 40px; }
.mm-rmx-flv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 76px; }
.mm-rmx-flv-grid[data-count="6"] { grid-template-columns: repeat(3, 1fr); gap: 74px 24px; max-width: 900px; margin-inline: auto; }
.mm-rmx-flv { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 16px 20px; text-align: center; }
.mm-rmx-flv__img { height: 250px; width: auto; margin-top: -48px; filter: saturate(1.14) contrast(1.04) drop-shadow(0 18px 18px rgba(60, 30, 130, 0.35)); transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.mm-rmx-purchase .mm-rmx-buyall { width: 100%; margin-top: 12px; padding-inline: 8px; white-space: nowrap; letter-spacing: 0; font-size: clamp(12px, 3.7vw, 15px); }
.mm-rmx-buyall[disabled] { opacity: 0.7; cursor: wait; }
/* カスタマイズ：「その先へ」の説明と FLAVOR CONTROL を 1 枚に統合したブロック */
.mm-rmx-custom { padding: 56px 0 48px; background: #cdc0d4; }
.mm-rmx-custom__card { max-width: 640px; margin-inline: auto; padding: 28px 28px 26px; text-align: center; color: var(--rmx-ink); }
.mm-rmx-custom__card h2 { margin-top: 14px; }
.mm-rmx-custom__card .mm-rmx-ttl-img { margin-inline: auto; }
.mm-rmx-custom__card .mm-rmx-sub { margin-top: 18px; }
.mm-rmx-custom__card .mm-rmx-lead { margin-inline: auto; }
.mm-rmx-custom__card .mm-rmx-dials { max-width: 440px; margin: 20px auto 0; text-align: left; }
/* 購入フォーム: 「全6種を1本ずつ」を選んだときだけ、通常のカートボタンを一括購入のボタンに差し替える */
.mm-variation-pills #mm-rmx-all + label { font-weight: 700; }
.mm-rmx-buyall-form { display: none; }
.mm-rmx-purchase.is-allmode .mm-rmx-buyall-form { display: block; }
.mm-rmx-purchase.is-allmode .woocommerce-variation-add-to-cart,
.mm-rmx-purchase.is-allmode .single_variation { display: none; }
/* 案件 LP はフッターの手前に余白（共通の margin-top）を作らない。ページの色が途切れて見える */
.content-for-layout:has(> .mm-rmx) + .mmv2-footer { margin-top: 0; }
/* 案件 LP 専用ドロワー（ヘッダーの共通ドロワーの中身を差し替えたもの） */
.mmv2-drawer__lp { display: grid; padding-block: 26px; }
.mmv2-drawer__lp + .mmv2-drawer__lp { border-top: 1px solid #3f3f3f; }
.mmv2-drawer__lp a { display: block; font-size: 15px; font-weight: 700; line-height: 2.5; color: #fff; }
.mmv2-drawer__lp a:hover { color: var(--mmv2-green-ink); }
.mmv2-drawer__lp--sub a { font-size: 14px; font-weight: 400; }
/* 公式トップを押したときの案内（この製品は LP でしか買えない） */
.mm-rmx-topmodal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(14, 11, 46, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mm-rmx-topmodal[hidden] { display: none; }
.mm-rmx-topmodal__box { position: relative; width: min(440px, 100%); padding: 30px 26px 24px; border: 2px solid #fff; border-radius: 26px; background: linear-gradient(160deg, #fff, #f3e9ff); color: var(--rmx-ink); text-align: center; box-shadow: 0 30px 90px rgba(10, 0, 60, 0.6); }
.mm-rmx-topmodal__close { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(43, 34, 96, 0.08); color: var(--rmx-ink); font-size: 22px; line-height: 1; cursor: pointer; }
.mm-rmx-topmodal__badge { display: inline-block; padding: 3px 12px; border-radius: 99px; background: #ffe14d; color: #3b1d6b; font-weight: 800; font-size: 12px; }
.mm-rmx-topmodal__title { margin-top: 12px; font-weight: 800; font-size: 20px; line-height: 1.5; }
.mm-rmx-topmodal__lead { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--rmx-ink-2); }
.mm-rmx .mm-rmx-topmodal__stay, .mm-rmx-topmodal .mm-rmx-topmodal__stay { width: 100%; margin-top: 18px; }
.mm-rmx-topmodal__go { display: inline-block; margin-top: 12px; padding: 6px; color: var(--rmx-ink-2); font-weight: 700; font-size: 13px; text-decoration: underline; }
/* 案件ページ着地時のニコチン店案内（topmodal の見た目を流用） */
.mm-rmx-nicpop__stay { border: 0; background: none; font-family: inherit; cursor: pointer; }
.mm-rmx-nicpop__note { margin-top: 6px; font-size: 11px; color: var(--rmx-ink-2); }
.mm-rmx-flv__imgbtn { position: relative; display: block; margin: -48px 0 0; padding: 0; border: 0; background: none; cursor: pointer; }
.mm-rmx-flv__imgbtn .mm-rmx-flv__img { margin-top: 0; }
.mm-rmx-flv__imgbtn::after { content: "360°"; position: absolute; right: -6px; bottom: 6px; padding: 3px 9px; border: 2px solid #fff; border-radius: 99px; background: rgba(255, 255, 255, 0.75); color: var(--rmx-ink); font-family: var(--rmx-f-en); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; pointer-events: none; }
.mm-rmx-flv:hover .mm-rmx-flv__img { transform: translateY(-10px) rotate(-3deg); }
.mm-rmx-flv__en {
	margin-top: 14px;
	padding: 6px 18px;
	border: 2px solid #fff;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--a), var(--b));
	color: #fff;
	font-family: var(--rmx-f-disp);
	font-size: 17px;
	letter-spacing: 0.06em;
	text-shadow: 0 1px 2px rgba(40, 20, 90, 0.45);
	box-shadow: 0 6px 14px rgba(60, 30, 130, 0.22);
}
.mm-rmx-flv__jp { margin-top: 8px; font-weight: 800; }
.mm-rmx-flv__ed { margin-top: 4px; padding: 2px 10px; border-radius: 99px; font-family: var(--rmx-f-en); font-weight: 700; font-size: 10.5px; letter-spacing: 0.16em; }
.mm-rmx-flv__ed--sweet { background: #ffe0f0; color: var(--rmx-magenta); }
.mm-rmx-flv__ed--cool { background: #dff1ff; color: #2a6fc4; }
.mm-rmx-flv p { flex: 1; margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--rmx-ink-2); }
.mm-rmx-flv__act { display: grid; gap: 8px; width: 100%; margin-top: 14px; }
.mm-rmx-flv .mm-rmx-btn { padding: 10px 12px; font-size: 14px; }
.mm-rmx-v360 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 12px;
	border: 2px solid #fff;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.55);
	color: var(--rmx-ink);
	font-family: var(--rmx-f-en);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.12em;
	cursor: pointer;
	transition: background 0.2s;
}
.mm-rmx-v360:hover { background: #fff; }
.mm-rmx-v360::before { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; rotate: -30deg; }

/* ---------- 購入（PDP と同一 DOM。白いカード） ---------- */
.mm-rmx-purchase { position: relative; padding: 50px 0 130px; }
.mm-rmx-purchase__title { margin-bottom: 40px; }
/* 見出しの行。ノンニコ店ではニコチン製品への導線を右端に置く（見出しは中央のまま） */
.mm-rmx-purchase__head { position: relative; margin-bottom: 40px; }
.mm-rmx-purchase__head .mm-rmx-purchase__title { margin-bottom: 0; }
.mm-rmx .mm-rmx-niclink {
	position: absolute;
	right: 0;
	top: 50%;
	translate: 0 -50%;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px 7px 7px;
	border: 1.5px solid #fff;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.82);
	color: var(--rmx-ink);
	font-weight: 800;
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(40, 10, 80, 0.22);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: transform 0.2s, background 0.2s;
}
.mm-rmx .mm-rmx-niclink:hover { background: #fff; transform: translateY(-2px); color: var(--rmx-ink); }
.mm-rmx-niclink__note { padding: 3px 7px; border-radius: 99px; background: var(--rmx-ink); color: #fff; font-family: var(--rmx-f-en); font-weight: 700; font-size: 9.5px; letter-spacing: 0.06em; white-space: nowrap; }
.mm-rmx-niclink__label { white-space: nowrap; }
.mm-rmx-niclink__arrow { color: var(--rmx-pink); font-size: 15px; transition: translate 0.2s; }
.mm-rmx .mm-rmx-niclink:hover .mm-rmx-niclink__arrow { translate: 3px 0; }
/* 見出しとリンクが重なる幅では、見出しの直下に中央揃えで置く */
@media (max-width: 1240px) {
	.mm-rmx-purchase__head { display: grid; justify-items: center; gap: 14px; }
	.mm-rmx .mm-rmx-niclink { position: static; translate: none; }
}
.mm-rmx-purchase__card { color: var(--rmx-ink); }
/* .mymoods-pdp は max-width:120rem と padding を持つ（mymoods-overrides.css）。カードの中では打ち消す */
.mm-rmx-purchase__card .mm-rmx-purchase__pdp { max-width: none; margin: 0; padding: 0; }
.mm-rmx-purchase__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.mm-rmx-purchase__media { position: relative; }
.mm-rmx-purchase__info {
	padding: 30px 30px 26px;
	border-radius: var(--rmx-radius);
	background: #fff;
	box-shadow: 0 18px 50px rgba(40, 10, 80, 0.3);
}
.mm-rmx-purchase__info .product__brand { margin: 0; font-family: var(--rmx-f-en); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; color: var(--rmx-violet); }
.mm-rmx-purchase__info .product__title { margin-top: 4px; font-family: var(--rmx-f-jp); font-weight: 800; font-size: 24px; line-height: 1.35; color: var(--rmx-ink); }
.mm-rmx-purchase__lead { margin: 6px 0 0; font-size: 14px; color: var(--rmx-ink-2); }
/* 価格（モック: .price）。金額そのものは WooCommerce の設定どおりに出力されたものを、見た目だけ寄せる */
.mm-rmx-purchase__info .price { margin-top: 6px; font-family: var(--rmx-f-en); font-weight: 700; font-size: 38px; line-height: 1.2; color: var(--rmx-ink); }
.mm-rmx-purchase__info .price s { opacity: 0.5; }
.mm-rmx-purchase__info .product__price-shipping-incl,
.mm-rmx-purchase__info .mymoods-pdp__shipping,
.mm-rmx-purchase__info .mymoods-shipping-progress { font-family: var(--rmx-f-jp); font-weight: 700; font-size: 13px; color: var(--rmx-ink-2); }
/* 送料（料金表から） */
.mm-rmx-ship { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #f6f3ff; font-size: 13px; line-height: 1.7; }
.mm-rmx-ship__title { margin: 0; font-family: var(--rmx-f-en); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; color: var(--rmx-violet); }
.mm-rmx-ship__rule { margin: 2px 0 0; font-weight: 800; font-size: 13px; }
.mm-rmx-ship__rows { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mm-rmx-ship__rows li { display: flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: 99px; background: #fff; border: 1.5px solid #e2dcf3; font-size: 13px; }
.mm-rmx-ship__rows li span { font-weight: 700; }
.mm-rmx-ship__rows li b { font-family: var(--rmx-f-en); font-weight: 700; font-size: 14px; }
.mm-rmx-ship__rows li.is-deal { background: #ffe14d; border-color: #ffe14d; }
.mm-rmx-ship__deal { margin: 8px 0 0; font-weight: 800; font-size: 13px; line-height: 1.6; color: var(--rmx-magenta); }
.mm-rmx-ship__note { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--rmx-ink-2); }
/* 信頼バッジ（モック: .trust） */
.mm-rmx-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.mm-rmx-trust li { padding: 8px 4px; border-radius: 12px; background: #f1edff; font-size: 12px; font-weight: 800; text-align: center; color: var(--rmx-ink); }
/* フォームの部品（variation pills / 数量 / ボタン）は既存。見た目だけモックに寄せる */
.mm-rmx-purchase__info .variations { margin-top: 16px; }
.mm-rmx-purchase__info .variations th,
.mm-rmx-purchase__info .variations label { font-family: var(--rmx-f-en); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; color: var(--rmx-ink-2); }
.mm-rmx-purchase__info .single_add_to_cart_button {
	margin-top: 18px;
	border: 2px solid rgba(255, 255, 255, 0.75);
	border-radius: 99px;
	background: var(--rmx-grad-cta);
	color: #fff;
	font-family: var(--rmx-f-jp);
	font-weight: 800;
	box-shadow: 0 10px 26px rgba(198, 92, 240, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.45);
	transition: transform 0.2s, box-shadow 0.2s;
}
.mm-rmx-purchase__info .single_add_to_cart_button:hover { background: var(--rmx-grad-cta); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(198, 92, 240, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
/* テーマの PDP（mymoods-overrides.css）がボタンを !important で緑にしているので、LP の中だけ「購入する」と同じグラデーションに戻す */
.mm-rmx .mymoods-pdp form.cart .single_add_to_cart_button,
.woocommerce .mm-rmx .mymoods-pdp form.cart button.single_add_to_cart_button {
	background: var(--rmx-grad-cta) !important;
	border-color: rgba(255, 255, 255, 0.75) !important;
	color: #fff !important;
}
/* 注意書き（モック: .notes） */
.mm-rmx-notes { margin-top: 16px; padding-left: 1.2em; font-size: 11.5px; line-height: 1.7; color: var(--rmx-ink-2); }
.mm-rmx-notes li { list-style: disc; margin: 2px 0; }
.mm-rmx-purchase__fallback { margin: 0; padding: 32px 0; font-size: 15px; line-height: 1.8; text-align: center; }
.mm-rmx-purchase__fallback--admin { padding-top: 0; font-size: 12px; color: #c0392b; }
/* ギャラリー（既存 EC と同じ：選択中フレーバーの角度カット＋「3D で見る」） */
.mm-rmx-gallery { position: relative; width: 100%; }
.mm-rmx-gallery__stage {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	border: 1.5px solid rgba(255, 255, 255, 0.85);
	border-radius: var(--rmx-radius);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.34);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	backdrop-filter: blur(18px) saturate(1.2);
	box-shadow: 0 18px 50px rgba(40, 10, 80, 0.3);
}
.mm-rmx-gallery__stage::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 9%; height: 5%; background: radial-gradient(ellipse, rgba(40, 10, 90, 0.4), transparent 70%); filter: blur(6px); }
.mm-rmx .mm-rmx-gallery__main {
	position: absolute;
	z-index: 1;
	left: 11%;
	top: 9%;
	width: 78%;
	height: 80%;
	max-height: none;
	aspect-ratio: auto;
	object-fit: contain;
	border-radius: 0;
	background: none;
	filter: saturate(1.14) contrast(1.05) drop-shadow(0 18px 16px rgba(40, 10, 90, 0.35));
}
.mm-rmx-gallery__3d {
	position: absolute;
	z-index: 2;
	right: 14px;
	bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border: 2px solid #fff;
	border-radius: 99px;
	background: var(--rmx-grad-cta);
	color: #fff;
	font-family: var(--rmx-f-jp);
	font-weight: 800;
	font-size: 13px;
	box-shadow: 0 8px 18px rgba(150, 60, 220, 0.4);
	cursor: pointer;
}
.mm-rmx-gallery__thumbs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-top: 12px; }
.mm-rmx-gallery__thumbs button { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 14px; background: rgba(255, 255, 255, 0.78); overflow: hidden; cursor: pointer; }
.mm-rmx-gallery__thumbs button.is-on { border-color: var(--rmx-pink); background: #fff; box-shadow: 0 6px 14px rgba(240, 72, 154, 0.3); }
.mm-rmx-gallery__thumbs img { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; object-fit: contain; }
/* 購入フォームを出せないとき（商品が未登録・未公開など） */
.mm-rmx-purchase__card--soon { padding: 40px 24px; border-radius: var(--rmx-radius); background: #fff; text-align: center; box-shadow: 0 18px 50px rgba(40, 10, 80, 0.3); }
.mm-rmx-soon__badge { display: inline-block; margin: 0; padding: 5px 16px; border-radius: 99px; background: #ffe14d; color: #3b1d6b; font-family: var(--rmx-f-disp); font-size: 11px; letter-spacing: 0.16em; }
.mm-rmx-soon__title { margin: 14px 0 0; font-family: var(--rmx-f-disp); font-size: clamp(36px, 6vw, 56px); line-height: 1; color: var(--rmx-pink); -webkit-text-stroke: 5px #fff; paint-order: stroke fill; filter: drop-shadow(0 3px 0 rgba(90, 60, 170, 0.22)); }
.mm-rmx-soon__lead { margin: 12px 0 0; font-weight: 800; font-size: 15px; }
.mm-rmx-soon__flavors { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.mm-rmx-soon__flavors li { width: 96px; }
.mm-rmx-soon__flavors img { height: 110px; width: auto; margin: 0 auto; filter: drop-shadow(0 10px 10px rgba(40, 10, 90, 0.3)); }
.mm-rmx-soon__flavors span { display: block; margin-top: 6px; font-size: 11px; font-weight: 800; line-height: 1.3; }
.mm-rmx-soon__note { margin: 22px 0 0; font-size: 14px; font-weight: 700; }
.mm-rmx-soon__cta { margin: 16px 0 0; }

/* ---------- 仕様 / 説明（本国 b-02 のボール背景。本国の最下部と同じ丸い下端） ---------- */
.mm-rmx-specsec {
	position: relative;
	max-width: 1920px;
	min-height: calc(min(100vw, 1920px) * 0.6388);
	margin-inline: auto;
	padding: 80px 0 90px;
	border-bottom: 5px solid var(--rmx-pink);
	border-radius: 0 0 44px 44px;
	background: #3a2350 var(--bg-pc, none) center top / 111.12% auto no-repeat;
	overflow: hidden;
	color: #fff;
}
.mm-rmx-specsec::before { content: ""; position: absolute; left: 0; right: 0; top: calc(min(100vw, 1920px) * 0.6388 - 180px); height: 181px; background: linear-gradient(rgba(58, 35, 80, 0), #3a2350); }
.mm-rmx-specsec .mmv2-container { position: relative; max-width: 980px; }
.mm-rmx-tabs { text-align: left; }
.mm-rmx-tabs__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mm-rmx-tabs__nav button { padding: 12px; border: 2px solid transparent; border-radius: 10px; background: rgba(70, 35, 120, 0.34); color: #fff; font-weight: 700; font-size: 17px; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mm-rmx-tabs__nav button.is-on { border-color: #fff; background: rgba(70, 35, 120, 0.55); }
.mm-rmx-tabs h3 { margin: 30px 0 14px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; text-shadow: 0 2px 12px rgba(60, 20, 110, 0.4); }
.mm-rmx-tabs dl { display: grid; gap: 9px; }
.mm-rmx-tabs dl > div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 24px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 12px; background: rgba(70, 35, 120, 0.34); font-weight: 700; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mm-rmx-tabs dd { text-align: right; }
.mm-rmx-tabs__desc { display: grid; gap: 12px; }
.mm-rmx-tabs__desc > div { padding: 18px 24px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 12px; background: rgba(70, 35, 120, 0.34); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mm-rmx-tabs__desc h4 { font-size: 16px; font-weight: 800; }
.mm-rmx-tabs__desc p { margin-top: 4px; font-size: 14.5px; }
.mm-rmx-tabs [hidden] { display: none; }

/* ---------- USER REVIEW（購入ブロックと紹介動画のあいだ。淡いラベンダー地） ---------- */
.mm-rmx-reviews { background: linear-gradient(180deg, #f6eeff 0%, #e9defd 100%); }
.mm-rmx-reviews__score { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; }
.mm-rmx-reviews__avg { font-family: var(--rmx-f-disp); font-size: 48px; line-height: 1; color: var(--rmx-violet); }
.mm-rmx-reviews__count { font-weight: 800; font-size: 15px; color: var(--rmx-ink-2); }
/* 星 5 つの上に、平均の割合（--rate）だけ色の付いた星を重ねる */
.mm-rmx-stars { position: relative; display: inline-block; font-size: 26px; line-height: 1; letter-spacing: 2px; color: rgba(139, 92, 240, 0.22); }
.mm-rmx-stars::before { content: "★★★★★"; }
.mm-rmx-stars::after { content: "★★★★★"; position: absolute; inset: 0; width: var(--rate, 0%); overflow: hidden; white-space: nowrap; color: #ffb43c; }
/* PC・SP とも横スライド。PC は 3 枚＋次がのぞく幅に絞り、左右の矢印でも 1 枚ずつ送れる */
.mm-rmx-reviews__rail { position: relative; max-width: 1010px; margin: 40px auto 0; }
.mm-rmx-reviews__list { display: flex; gap: 24px; padding: 6px 4px 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scroll-behavior: smooth; scrollbar-width: none; text-align: left; }
.mm-rmx-reviews__list::-webkit-scrollbar { display: none; }
.mm-rmx-reviews__nav { position: absolute; top: 150px; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid #fff; border-radius: 50%; background: var(--rmx-grad-cta); color: #fff; font-size: 20px; box-shadow: 0 8px 20px rgba(139, 92, 240, 0.35); cursor: pointer; transition: opacity 0.2s; }
.mm-rmx-reviews__nav--prev { left: -20px; }
.mm-rmx-reviews__nav--next { right: -20px; }
.mm-rmx-reviews__nav:disabled { opacity: 0; pointer-events: none; }
.mm-rmx-review { display: flex; flex: 0 0 300px; flex-direction: column; overflow: hidden; scroll-snap-align: start; }
.mm-rmx-review__img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.mm-rmx-review__body { display: flex; flex: 1; flex-direction: column; padding: 16px 18px 18px; }
.mm-rmx-review__flv { align-self: flex-start; padding: 3px 12px; border-radius: 99px; background: linear-gradient(90deg, var(--a, var(--rmx-pink)), var(--b, var(--rmx-violet))); color: #fff; font-family: var(--rmx-f-en); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; }
.mm-rmx-review__body p { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--rmx-ink); }
.mm-rmx-review__by { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--rmx-ink-2); }
.mm-rmx-reviews__note { margin-top: 20px; font-size: 12px; color: var(--rmx-ink-2); }

/* ---------- FAQ（濃紺地） ---------- */
.mm-rmx-faq { color: #fff; }
.mm-rmx-faq__inner { max-width: 820px; }
.mm-rmx-faq__list { margin-top: 26px; }
.mm-rmx-faq details { margin-top: 12px; padding: 0 22px; border: 1.5px solid rgba(255, 255, 255, 0.18); border-radius: 18px; background: rgba(255, 255, 255, 0.06); }
.mm-rmx-faq summary { position: relative; padding: 18px 28px 18px 0; font-weight: 800; list-style: none; cursor: pointer; }
.mm-rmx-faq summary::-webkit-details-marker { display: none; }
.mm-rmx-faq summary::after { content: "＋"; position: absolute; right: 0; top: 50%; translate: 0 -50%; color: var(--rmx-pink); font-size: 20px; }
.mm-rmx-faq details[open] summary::after { content: "－"; }
.mm-rmx-faq details p { padding: 0 0 18px; font-size: 14.5px; color: #d5cdf5; }
.mm-rmx-faq details a { color: #fff; text-decoration: underline; }

/* ---------- 追従する購入バー ---------- */
.mm-rmx-buybar {
	position: fixed;
	left: 50%;
	bottom: 16px;
	z-index: 60;
	translate: -50% 0;
	transition: translate 0.35s, opacity 0.35s;
}
.mm-rmx-buybar[hidden] { display: block; translate: -50% 140%; opacity: 0; pointer-events: none; }
.mm-rmx-buybar__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 12px 10px 22px;
	border: 1.5px solid #fff;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.9);
	color: var(--rmx-ink);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 14px 40px rgba(50, 30, 120, 0.3);
	white-space: nowrap;
}
.mm-rmx-buybar__name { font-family: var(--rmx-f-en); font-weight: 700; font-size: 15px; }
.mm-rmx-buybar__name small { display: none; }
.mm-rmx-buybar__price { font-family: var(--rmx-f-en); font-weight: 700; font-size: 15px; }
.mm-rmx-buybar__price small { margin-left: 4px; font-family: var(--rmx-f-jp); font-size: 11px; font-weight: 700; }
.mm-rmx-buybar__cta.mm-rmx-btn { padding: 10px 24px; font-size: 14px; }

/* ---------- 360° ビューア ---------- */
.mm-rmx-viewer { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(14, 11, 46, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mm-rmx-viewer[hidden] { display: none; }
.mm-rmx-viewer__box { width: min(720px, 100%); padding: 20px 22px 22px; border: 2px solid #fff; border-radius: 30px; background: linear-gradient(160deg, #f3e9ff, #dfeeff); box-shadow: 0 30px 90px rgba(10, 0, 60, 0.6); color: var(--rmx-ink); }
.mm-rmx-viewer__head { display: flex; justify-content: space-between; align-items: center; }
.mm-rmx-viewer__name { margin: 0; font-family: var(--rmx-f-disp); font-size: 24px; letter-spacing: 0.04em; color: var(--rmx-violet); }
.mm-rmx-viewer__name small { margin-left: 10px; font-family: var(--rmx-f-jp); font-weight: 800; font-size: 13px; color: var(--rmx-ink-2); }
.mm-rmx-viewer__close { width: 42px; height: 42px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: rgba(255, 255, 255, 0.7); color: var(--rmx-ink); font-size: 24px; line-height: 1; cursor: pointer; }
.mm-rmx-viewer__stage { position: relative; height: min(58vh, 520px); margin-top: 12px; border-radius: 22px; background: radial-gradient(circle at 50% 38%, #fff, #e6dcff 60%, #cfe4ff); overflow: hidden; }
.mm-rmx-viewer__stage model-viewer { width: 100%; height: 100%; --poster-color: transparent; }
.mm-rmx-viewer__loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-weight: 800; color: var(--rmx-ink-2); }
.mm-rmx-viewer__hint { margin-top: 10px; font-family: var(--rmx-f-en); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-align: center; color: var(--rmx-ink-2); }
.mm-rmx-viewer__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.mm-rmx-viewer__tabs button { padding: 7px 15px; border: 2px solid #fff; border-radius: 99px; background: rgba(255, 255, 255, 0.6); color: var(--rmx-ink); font-weight: 800; font-size: 13px; cursor: pointer; }
.mm-rmx-viewer__tabs button.is-on { border-color: var(--rmx-ink); background: var(--rmx-ink); color: #fff; }

/* ---------- SP ---------- */
@media (max-width: 860px) {
	.mm-rmx-section { padding: 64px 0; }
	.mm-rmx-bubble { -webkit-text-stroke-width: 5px; }
	.mm-rmx-bubble--white { -webkit-text-stroke-width: 0; }
	.mm-rmx-pc-only { display: none !important; }
	.mm-rmx-sp-only { display: revert; }
	.mm-rmx-dev, .mm-rmx-ice, .mm-rmx-deco { --X: var(--sx, var(--px)); --Y: var(--sy, var(--py)); --W: var(--sw, var(--pw)); --R: var(--sr, var(--pr, 0deg)); }
	.mm-rmx-vis { grid-template-columns: 100%; }
	.mm-rmx-ov { width: var(--sww, 90%); margin-left: var(--sl, 5%); margin-top: var(--st, 5%); }
	.mm-rmx-ov--c { margin-left: 0; }
	.mm-rmx-ov.mm-rmx-glass { padding: 20px 20px; }
	/* 下に流すコピー（上下のシーンと色でつながる箇所だけ） */
	.mm-rmx-ov--flow { grid-area: auto; position: relative; justify-self: stretch; width: auto; margin: -34px 16px 26px; }
	.mm-rmx-hero .mm-rmx-scene { --cx0: 24; --cw: 52; --cy0: 4; --ch: 84.5; }
	.mm-rmx-hero__copy { margin-top: 20px; }
	.mm-rmx-hero__logo { width: 210px; }
	.mm-rmx-hero__cta .mm-rmx-btn { padding: 11px 24px; font-size: 14px; }
	.mm-rmx-price-pill { top: 1.5%; right: 2%; width: 66px; border-width: 2px; }
	.mm-rmx-price-pill b { font-size: 17px; }
	.mm-rmx-price-pill small { font-size: 8px; }
	.mm-rmx-feats-sec { margin-top: 0; padding: 28px 0 30px; background: linear-gradient(#b7a0dc, #a797ce); }
	.mm-rmx-feats { grid-template-columns: 1fr; gap: 12px; }
	.mm-rmx-marquee__track span { padding: 8px 16px; font-size: 15px; }
	#rmx-meet .mm-rmx-scene { --cx0: 22; --cw: 56; }
	.mm-rmx-meet__ttl { --st: 4%; --sww: 84%; margin-top: 4%; }
	.mm-rmx-meet__intro { grid-area: auto; position: relative; justify-self: stretch; width: auto; margin: -40px 16px 12px; padding: 16px 18px; color: var(--rmx-ink); text-shadow: none; background: var(--rmx-glass); border: 1.5px solid var(--rmx-glass-line); border-radius: var(--rmx-radius); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
	.mm-rmx-meet__intro .mm-rmx-sub { font-size: 16px; }
	.mm-rmx-meet__intro .mm-rmx-lead { color: var(--rmx-ink); }
	.mm-rmx-specs-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 16px 12px; }
	.mm-rmx-specs { display: contents; }
	.mm-rmx-spec { grid-template-columns: 34px 1fr; gap: 8px; padding: 8px 10px; border-radius: 16px; }
	.mm-rmx-spec img, .mm-rmx-spec > span { width: 34px; height: 34px; }
	.mm-rmx-spec__en { font-size: 9.5px; }
	.mm-rmx-spec__v { font-size: 12.5px; }
	.mm-rmx-spec.is-key { grid-column: 1 / -1; grid-template-columns: 50px 1fr; margin: 6px 0; padding: 12px 16px 12px 12px; transform: none !important; }
	.mm-rmx-spec.is-key img { width: 50px; height: 50px; }
	.mm-rmx-spec.is-key .mm-rmx-spec__en { font-size: 11px; }
	.mm-rmx-spec.is-key .mm-rmx-spec__v { font-size: 17px; }
	.mm-rmx-meet-sp { display: block; padding: 30px 0 4px; background: #cdc0d4; }
	.mm-rmx-custom { padding: 40px 0; }
	.mm-rmx-custom__card { padding: 24px 18px 22px; }
	.mm-rmx-meet-sp .mm-rmx-meet__intro { margin: 0 16px 12px; }
	.mm-rmx-about { grid-area: auto; justify-self: stretch; width: auto; margin: 0 16px 30px; grid-template-columns: 1fr; gap: 14px; padding: 20px !important; }
	.mm-rmx-stat { padding: 12px 0 0; border-left: 0; border-top: 2px solid rgba(255, 255, 255, 0.9); }
	#rmx-display .mm-rmx-scene { --cx0: 25; --cw: 50; }
	.mm-rmx-copy--display { --st: 5%; }
	.mm-rmx-copy--display .mm-rmx-ttl-img { --tw: 270px; }
	.mm-rmx-copy--display .mm-rmx-lead { padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.55); font-size: 13.5px; line-height: 1.65; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
	.mm-rmx-screens { --st: 176%; padding: 14px 12px 10px !important; }
	.mm-rmx-screens__row { grid-template-columns: repeat(4, 1fr); gap: 8px; }
	.mm-rmx-screen span { font-size: 9px; }
	.mm-rmx-screens p { font-size: 11px; }
	#rmx-puffs .mm-rmx-scene { --cx0: 25; --cw: 50; }
	.mm-rmx-copy--puffs .mm-rmx-lead { font-size: 14px; }
	#rmx-battery { margin-top: -46px; background: linear-gradient(to bottom, transparent 129.4vw, #bfc6d3 129.4vw); }
	#rmx-battery .mm-rmx-scene { --cx0: 8; --cw: 50; -webkit-mask-image: linear-gradient(transparent, #000 46px); mask-image: linear-gradient(transparent, #000 46px); }
	#rmx-coil .mm-rmx-scene { --cx0: 38; --cw: 40; }
	#rmx-control .mm-rmx-scene { --cx0: 28; --cw: 44; }
	.mm-rmx-dial { grid-template-columns: 30px 112px 1fr; }
	.mm-rmx-candy { background-image: var(--bg-sp, none); background-size: 100% auto; background-position: center bottom; }
	.mm-rmx-flavors { padding: 50px 0 30px; }
	.mm-rmx-flv-grid, .mm-rmx-flv-grid[data-count="6"] { grid-template-columns: 1fr 1fr; gap: 64px 12px; margin-top: 64px; }
	.mm-rmx-flv { padding: 0 10px 16px; }
	.mm-rmx-flv__img { height: 170px; }
	.mm-rmx-flv__imgbtn { margin-top: -48px; }
	/* USER REVIEW は横スクロール（1 枚＋次がのぞく幅） */
	.mm-rmx-reviews__rail { margin: 32px -16px 0; }
	.mm-rmx-reviews__list { gap: 14px; padding: 4px 16px 18px; scroll-padding-inline: 16px; }
	.mm-rmx-review { flex-basis: 78%; }
	.mm-rmx-reviews__nav { display: none; }
	.mm-rmx-reviews__avg { font-size: 40px; }
	.mm-rmx-feat__big b { font-size: 34px; }
	.mm-rmx-flv__en { padding: 5px 12px; font-size: 13px; }
	.mm-rmx-purchase { padding: 40px 0 90px; }
	.mm-rmx-purchase__grid { grid-template-columns: 1fr; }
	.mm-rmx-purchase__info { padding: 24px 20px; }
	.mm-rmx-specsec { min-height: 0; padding: 56px 0 60px; border-radius: 0 0 28px 28px; background-image: var(--bg-sp, none); background-size: 100% auto; }
	.mm-rmx-specsec::before { top: calc(100vw * 1.1498 - 180px); }
	.mm-rmx-tabs__nav { gap: 10px; }
	.mm-rmx-tabs__nav button { font-size: 15px; }
	.mm-rmx-tabs dl > div { padding: 11px 16px; font-size: 14px; }
	.mm-rmx-buybar { width: calc(100% - 24px); }
	.mm-rmx-buybar__inner { justify-content: space-between; gap: 8px; padding: 8px 8px 8px 16px; }
	.mm-rmx-buybar__name, .mm-rmx-buybar__price { font-size: 13px; }
	.mm-rmx-buybar__price small { margin-left: 2px; font-size: 10px; }
	.mm-rmx-buybar__cta.mm-rmx-btn { flex-shrink: 0; padding: 10px 16px; font-size: 13px; }
	.mm-rmx-buybar-on .mmv2-line-float { display: none; }
}

/* ---------- 動きを減らす ---------- */
@media (prefers-reduced-motion: reduce) {
	.mm-rmx *, .mm-rmx *::before, .mm-rmx *::after { animation: none !important; }
	.mm-rmx .mm-rmx-btn, .mm-rmx-screen, .mm-rmx-flv__img, .mm-rmx-buybar { transition: none; }
}

/* ---------- キャンペーンページ（/rifbar-mixpro/<key>/。YouTube 案件など） ---------- */
.mm-rmx-camp-badge {
	position: absolute;
	z-index: 7;
	left: 3.5%;
	top: 6%;
	display: grid;
	justify-items: center;
	gap: 2px;
	width: clamp(150px, 15vw, 210px);
	padding: 14px 12px 12px;
	border: 3px solid #fff;
	border-radius: 22px;
	background: linear-gradient(160deg, #ffe14d 0%, #ffb23f 100%);
	color: #3b1d6b;
	text-align: center;
	box-shadow: 0 12px 30px rgba(30, 0, 90, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.7);
	rotate: -6deg;
	line-height: 1.2;
}
.mm-rmx-camp-badge__who { display: grid; }
.mm-rmx-camp-badge__who b { font-family: var(--rmx-f-jp); font-weight: 800; font-size: clamp(17px, 1.6vw, 22px); letter-spacing: 0.04em; }
.mm-rmx-camp-badge__who small { font-weight: 800; font-size: clamp(10px, 0.9vw, 12px); opacity: 0.85; }
.mm-rmx-camp-badge__lead { margin-top: 4px; padding: 2px 10px; border-radius: 99px; background: #3b1d6b; color: #fff; font-weight: 800; font-size: clamp(10px, 0.95vw, 13px); }
.mm-rmx-camp-badge__from { margin-top: 2px; font-weight: 800; font-size: clamp(10px, 0.95vw, 13px); color: #3b1d6b; }
.mm-rmx-camp-badge__off { font-family: var(--rmx-f-disp); font-size: clamp(16px, 1.6vw, 22px); color: #e3266f; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; }
.mm-rmx-camp-badge__off b { font-size: clamp(44px, 4.8vw, 70px); font-weight: 400; line-height: 1; }
.mm-rmx-price-pill--campaign { width: clamp(96px, 10vw, 136px); }
.mm-rmx-price-pill--campaign > span { display: grid; justify-items: center; }
.mm-rmx-price-pill--campaign s { font-size: clamp(9px, 0.85vw, 12px); opacity: 0.85; white-space: nowrap; }
.mm-rmx-price-pill--campaign b { font-size: clamp(15px, 1.55vw, 22px); line-height: 1.15; white-space: nowrap; }
.mm-rmx-campaign-price .price__sale { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.mm-rmx-campaign-price s { font-size: 0.55em; opacity: 0.55; }
.mm-rmx-campaign-price .price-item--sale { color: #e3266f; }
.mm-rmx-campaign-price__off { padding: 2px 10px; border-radius: 99px; background: #e3266f; color: #fff; font-family: var(--rmx-f-jp); font-weight: 800; font-size: 13px; }
/* キャンペーンページの 3 段階価格（通常価格 → 新発売記念 → 案件限定） */
.mm-rmx-campaign-price--tiers .price__container { display: grid; gap: 6px; font-family: var(--rmx-f-jp); }
.mm-rmx-tiers__eyebrow { margin: 0; justify-self: start; padding: 2px 12px; border-radius: 99px; background: var(--rmx-ink); color: #fff; font-family: var(--rmx-f-en); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; }
.mm-rmx-tiers__steps { display: flex; align-items: stretch; gap: 8px; }
.mm-rmx-tiers__arrow { align-self: center; color: var(--rmx-violet); font-weight: 800; font-size: 18px; }
.mm-rmx-tier { display: grid; align-content: center; gap: 2px; padding: 8px 12px; border-radius: 14px; background: rgba(139, 92, 240, 0.08); }
.mm-rmx-tier__label { font-weight: 800; font-size: 11.5px; color: var(--rmx-ink-2); }
.mm-rmx-tier--regular s { font-size: 15px; font-weight: 700; opacity: 0.55; }
.mm-rmx-tier--sale { flex: 1; background: #fff3c4; }
.mm-rmx-tier--sale .mm-rmx-tier__label { color: #5a3a00; }
.mm-rmx-tier--sale b { font-family: var(--rmx-f-en); font-weight: 700; font-size: 20px; line-height: 1.2; color: #3b1d6b; }
.mm-rmx-tier--final { position: relative; margin-top: 12px; padding: 14px 14px 12px; border: 2px solid #fff; border-radius: 20px; background: var(--rmx-grad-cta); color: #fff; box-shadow: 0 10px 24px rgba(198, 92, 240, 0.35); }
.mm-rmx-tier--final::before { content: "↓"; position: absolute; left: 50%; top: -19px; translate: -50% 0; color: var(--rmx-violet); font-weight: 800; font-size: 18px; line-height: 1; }
.mm-rmx-tier__coupon { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 800; font-size: 13px; }
.mm-rmx-tier__coupon > span:first-child { padding: 2px 10px; border-radius: 99px; background: #ffe14d; color: #3b1d6b; }
.mm-rmx-tier__coupon em { font-style: normal; font-size: 18px; color: #fff176; }
.mm-rmx-tier__now { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.mm-rmx-campaign-price--tiers .price-item--sale { font-family: var(--rmx-f-en); font-weight: 700; font-size: 40px; line-height: 1.1; color: #fff; text-shadow: 0 2px 0 rgba(122, 28, 120, 0.35); }
.mm-rmx-tier__total { display: grid; justify-items: center; padding: 3px 12px; border-radius: 14px; background: #fff; color: #e3266f; font-family: var(--rmx-f-en); font-weight: 700; font-size: 15px; line-height: 1.2; }
.mm-rmx-tier__total small { font-family: var(--rmx-f-jp); font-weight: 800; font-size: 10px; }
.mm-rmx-nb { display: inline-block; }
.mm-rmx-campaign-note b,
.mm-rmx-campaign-note span { display: block; }
.mm-rmx-campaign-note small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 700; opacity: 0.8; }
.mm-rmx-campaign-note span.mm-rmx-nb { display: inline-block; }
.mm-rmx-tier__coupon span:first-child { white-space: nowrap; }
.mm-rmx-tier__coupon .mm-rmx-nb { white-space: nowrap; }
.mm-rmx-tier__total { flex-shrink: 0; white-space: nowrap; }
.mm-rmx-price-pill--campaign small { font-family: var(--rmx-f-en); font-weight: 700; font-size: clamp(10px, 0.9vw, 12px); }
.mm-rmx-campaign-note { margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: #fff3c4; color: #5a3a00; font-size: 12.5px; font-weight: 700; line-height: 1.6; }
.mm-rmx-buybar__price s { font-size: 12px; opacity: 0.6; }
@media (max-width: 860px) {
	/* SP は上端に MIXPRO のロゴがあるので、左下（床の上）に置く */
	.mm-rmx-camp-badge { left: 3%; top: auto; bottom: 4%; width: 112px; padding: 8px 6px 7px; border-width: 2px; border-radius: 16px; }
	.mm-rmx-price-pill--campaign { width: 78px; }
	.mm-rmx-price-pill--campaign b { font-size: 15px; }
	.mm-rmx-price-pill--campaign s { font-size: 9px; }
	.mm-rmx-camp-badge__who b { font-size: 15px; }
	/* スマホは左右の中央に揃え、折り返しは文節の単位にする */
	.mm-rmx-purchase__info .product__title,
	.mm-rmx-purchase__lead,
	.mm-rmx-campaign-note,
	.mm-rmx-ship,
	.mm-rmx-ship__deal,
	.mm-rmx-ship__note,
	.mm-rmx-purchase__info .product__price-shipping-incl { text-align: center; }
	.mm-rmx-purchase__info .product__price-shipping-incl { display: block; }
	.mm-rmx-campaign-price--tiers .price__container { justify-items: center; }
	.mm-rmx-tiers__eyebrow { justify-self: center; }
	.mm-rmx-tiers__steps { justify-content: center; width: 100%; }
	.mm-rmx-tier { text-align: center; }
	.mm-rmx-tier--final { width: 100%; box-sizing: border-box; justify-items: center; text-align: center; }
	.mm-rmx-tier__coupon { flex-direction: column; justify-content: center; gap: 4px; }
	.mm-rmx-tier__now { justify-content: center; }
	.mm-rmx-ship__rows { justify-content: center; }
	.mm-rmx-campaign-price--tiers .price-item--sale { font-size: 34px; }
	.mm-rmx-camp-badge__from { font-size: 10px; }
	.mm-rmx-camp-badge__off b { font-size: 38px; }
}