/* =====================================================================
   gold4 — 金・プラチナ版の色と、金専用セクションの見た目
   ・multi-item2 と同じ部品（base / chrome / benefit / items / method / store …）を使い、
     ここで色のトークンを金色系に差し替える（このCSSは gold4 のページだけで、最後に読む）
   ・金専用: 参考買取価格（prices.php）／ごあいさつの理由（greeting-gold.php）／お客様の声（voices-gold.php）
            実績の帯の4列目（stats.php の stats_payment）
   ===================================================================== */

:root {
	--mi2-bg:        #FFFBF2;   /* クリーム（ページの地） */
	--mi2-bg-sub:    #FFF1D6;   /* 淡い山吹（区切りのセクション） */
	--mi2-blob:      #FFE9B8;   /* 飾りの円・写真の影の板 */
	--mi2-tint:      #FFEDC2;   /* 差し色の淡色（アイコンの丸地・タグ） */
	--mi2-mark:      #FFDF85;   /* 見出しのマーカー */
	--mi2-line:      #F1E3C8;
	--mi2-line-2:    #F3DDB0;
	--mi2-line-3:    #D8C8AE;
	--mi2-accent:    #8A6420;   /* 金茶（電話・強調）。白文字で 5.2:1 */
	--mi2-accent-dk: #664915;
	/* 相場のタイル */
	--mi2-gold-tile: #FFEFC4;
	--mi2-plat-tile: #EEF2F6;
	--mi2-plat-ink:  #4A4F57;
}

/* ---------- PC だけ／スマホだけ ---------- */
.mi2 .mi2-sp,
.mi2 .mi2-br-sp { display: none; }

/* ---------- 実績の帯：4列目「お支払い／その場で現金」 ---------- */
.mi2 .mi2-stats__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mi2 .mi2-stats__num--text { font-size: 36px; line-height: 1.25; }

/* ---------- 参考買取価格 ---------- */
.mi2 .mi2-prices__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.mi2 .mi2-prices__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--mi2-bg);
	border-radius: var(--mi2-r-md);
	overflow: hidden;
}
.mi2 .mi2-prices__img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	background: var(--mi2-white);
}
.mi2 .mi2-prices__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 24px 24px;
}
.mi2 .mi2-prices__name { font-size: 22px; font-weight: 700; line-height: 1.4; color: var(--mi2-ink); }
.mi2 .mi2-prices__label { font-size: 15px; line-height: normal; color: var(--mi2-ink-3); }
.mi2 .mi2-prices__num {
	font-family: var(--mi2-display);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--mi2-accent);
	white-space: nowrap;
}
.mi2 .mi2-prices__num--text { font-size: 20px; line-height: 1.3; white-space: normal; }
.mi2 .mi2-prices__unit { font-size: 18px; }
.mi2 .mi2-prices__note {
	margin-top: 56px;
	text-align: center;
	font-size: 17px;
	line-height: 1.7;
	color: var(--mi2-ink-3);
}

/* ---------- ごあいさつ（高く買える理由） ---------- */
.mi2 .mi2-greeting--gold .mi2-greeting__inner { align-items: flex-start; }
.mi2 .mi2-greeting__reasons {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.mi2 .mi2-greeting__reasons li {
	word-break: auto-phrase;   /* 対応ブラウザでは文節で折り返す */
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--mi2-ink);
}
.mi2 .mi2-greeting__reasons .mi2-check { width: 32px; height: 32px; }

/* ---------- お客様の声（評価のカード ＋ 口コミ1件） ---------- */
.mi2 .mi2-gvoices__body {
	display: flex;
	align-items: stretch;
	gap: 28px;
}
.mi2 .mi2-gvoices__score {
	flex: 0 0 340px;
	padding: 40px;
	background: var(--mi2-white);
	border-radius: var(--mi2-r-lg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
}
.mi2 .mi2-gvoices__score-label { font-size: 18px; line-height: normal; color: var(--mi2-ink-3); }
.mi2 .mi2-gvoices__score-num {
	font-family: var(--mi2-display);
	font-size: 64px;
	font-weight: 700;
	line-height: 1;
	color: var(--mi2-ink);
}
.mi2 .mi2-gvoices__score-total { font-size: 18px; line-height: normal; color: var(--mi2-ink-2); }
/* 星は白地で読める濃さ（デザインの #F0A531 より少し濃く） */
.mi2 .mi2-gvoices__stars { font-size: 26px; line-height: 1.2; letter-spacing: .1em; color: #B7791F; }
.mi2 .mi2-gvoices__stars-off { color: #C9B79E; }
.mi2 .mi2-gvoices__quote {
	flex: 1 1 0;
	min-width: 0;
	padding: 44px 48px;
	background: var(--mi2-white);
	border-radius: var(--mi2-r-lg);
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.mi2 .mi2-gvoices__quote .mi2-gvoices__stars { font-size: 24px; }
.mi2 .mi2-gvoices__text { margin: 0; }
.mi2 .mi2-gvoices__text p {
	font-family: var(--mi2-display);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.8;
	color: var(--mi2-ink);
	overflow-wrap: anywhere;
}
.mi2 .mi2-gvoices__meta { font-size: 16px; line-height: normal; color: var(--mi2-ink-3); }
.mi2 .mi2-gvoices__author { margin-left: 12px; }

/* ---------- 768〜1100px ---------- */
@media (max-width: 1100px) {
	.mi2 .mi2-stats__num--text { font-size: 26px; line-height: 1.3; }

	.mi2 .mi2-prices__grid { gap: 12px; }
	.mi2 .mi2-prices__img { height: 150px; }
	.mi2 .mi2-prices__body { padding: 14px 16px 18px; gap: 6px; }
	.mi2 .mi2-prices__name { font-size: 18px; }
	.mi2 .mi2-prices__label { font-size: 14px; }
	.mi2 .mi2-prices__num { font-size: clamp(20px, 2.4vw, 26px); }
	.mi2 .mi2-prices__unit { font-size: 15px; }
	.mi2 .mi2-prices__note { margin-top: 40px; font-size: 15px; }

	.mi2 .mi2-greeting__reasons li { font-size: 17px; align-items: flex-start; }
	.mi2 .mi2-greeting__reasons .mi2-check { width: 28px; height: 28px; margin-top: 1px; }

	.mi2 .mi2-gvoices__body { gap: 16px; }
	.mi2 .mi2-gvoices__score { flex-basis: 240px; padding: 28px 20px; }
	.mi2 .mi2-gvoices__score-num { font-size: 52px; }
	.mi2 .mi2-gvoices__stars { font-size: 22px; }
	.mi2 .mi2-gvoices__score-label,
	.mi2 .mi2-gvoices__score-total { font-size: 16px; }
	.mi2 .mi2-gvoices__quote { padding: 32px; gap: 16px; }
	.mi2 .mi2-gvoices__text p { font-size: 21px; }
}

/* ---------- 〜767px ---------- */
@media (max-width: 767px) {
	.mi2 .mi2-pc { display: none; }
	.mi2 .mi2-sp,
	.mi2 .mi2-br-sp { display: inline; }

	/* 実績はヒーローの中に1行で出すので、帯は出さない */
	.mi2 .mi2-stats { display: none; }

	.mi2 .mi2-prices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.mi2 .mi2-prices__card { border-radius: var(--mi2-r); }
	.mi2 .mi2-prices__img { height: 128px; }
	.mi2 .mi2-prices__body { padding: 12px 14px 16px; gap: 4px; }
	.mi2 .mi2-prices__name { font-size: 17px; }
	.mi2 .mi2-prices__label { font-size: 13px; }
	.mi2 .mi2-prices__num { font-size: 21px; line-height: 1.2; }
	.mi2 .mi2-prices__num--text { font-size: 16px; }
	.mi2 .mi2-prices__unit { font-size: 14px; }
	.mi2 .mi2-prices__note { margin-top: 28px; font-size: 14px; text-align: left; }

	.mi2 .mi2-greeting__reasons li { font-size: 17px; gap: 10px; }

	.mi2 .mi2-gvoices__body { flex-direction: column; gap: 14px; }
	.mi2 .mi2-gvoices__score {
		flex: 0 0 auto;
		padding: 24px;
		border-radius: var(--mi2-r-md);
		display: grid;
		grid-template-columns: auto auto auto;
		grid-template-areas:
			"num stars stars"
			"num label total";
		justify-content: center;
		align-items: center;
		column-gap: 6px;
		row-gap: 4px;
		text-align: left;
	}
	.mi2 .mi2-gvoices__score-num { grid-area: num; margin-right: 10px; font-size: 48px; }
	.mi2 .mi2-gvoices__score > .mi2-gvoices__stars { grid-area: stars; font-size: 20px; letter-spacing: .08em; }
	.mi2 .mi2-gvoices__score-label { grid-area: label; font-size: 15px; color: var(--mi2-ink-2); }
	.mi2 .mi2-gvoices__score-total { grid-area: total; font-size: 15px; }
	.mi2 .mi2-gvoices__quote { padding: 28px 24px; gap: 14px; border-radius: var(--mi2-r-md); }
	.mi2 .mi2-gvoices__quote .mi2-gvoices__stars { font-size: 20px; letter-spacing: .08em; }
	.mi2 .mi2-gvoices__text p { font-size: 19px; }
	.mi2 .mi2-gvoices__meta { font-size: 14px; }
}