/* =====================================================================
   multi-item2 — お買取り品目（items）／こんな状態でもOK ＋ 買取例（condition）
   パーツ: _parts/mi2/items.php, _parts/mi2/condition.php
   ===================================================================== */

/* ---------- お買取り品目 ---------- */
.mi2 .mi2-items__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.mi2 .mi2-items__card {
	padding: 28px;
	background: var(--mi2-bg);
	border-radius: var(--mi2-r-md);
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}
.mi2 .mi2-items__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--mi2-white);
	color: var(--mi2-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}
.mi2 .mi2-items__name {
	font-family: var(--mi2-display);
	font-size: 23px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--mi2-ink);
}
.mi2 .mi2-items__desc {
	font-size: 17px;
	line-height: 1.7;
	color: var(--mi2-ink-3);
}
.mi2 .mi2-items__more {
	margin-top: 56px;
	font-size: 20px;
	font-weight: 700;
	line-height: normal;
	text-align: center;
	color: var(--mi2-ink);
}

/* ---------- こんな状態でもOK ---------- */
.mi2 .mi2-cond__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
/* 一覧の下の注記（カテゴリで cond_note を指定したときだけ出る） */
.mi2 .mi2-cond__note { margin-top: 56px; text-align: center; font-size: 17px; line-height: 1.7; color: var(--mi2-ink-3); }
.mi2 .mi2-cond__pill {
	min-height: 80px;
	padding: 0 24px;
	background: var(--mi2-white);
	border-radius: var(--mi2-r);
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--mi2-ink);
	min-width: 0;
}
.mi2 .mi2-cond__pill .mi2-check {
	width: 36px;
	height: 36px;
}

/* 狭い幅で折り返すときは「・」の後で折る（1文字だけ次の行に落ちるのを防ぐ） */
.mi2 .mi2-items__name,
.mi2 .mi2-cond__pill {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* ---------- 実際のお買取り例 ---------- */
.mi2 .mi2-cases__ttl {
	margin: 72px 0 56px;
	font-family: var(--mi2-display);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	color: var(--mi2-ink);
}
.mi2 .mi2-cases__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}
.mi2 .mi2-case {
	background: var(--mi2-white);
	border-radius: var(--mi2-r-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.mi2 .mi2-case__img {
	width: 100%;
	height: 270px;
	object-fit: cover;
}
.mi2 .mi2-case__body {
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex-grow: 1;
}
.mi2 .mi2-case__tag {
	align-self: flex-start;
	padding: 6px 14px;
	background: var(--mi2-tint);
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	line-height: normal;
	color: var(--mi2-accent-dk);
}
.mi2 .mi2-case__brand {
	font-size: 16px;
	line-height: normal;
	color: var(--mi2-ink-3);
}
.mi2 .mi2-case__name {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--mi2-ink);
}
.mi2 .mi2-case__worry {
	font-size: 17px;
	line-height: 1.8;
	color: var(--mi2-ink-2);
}
.mi2 .mi2-case__price {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--mi2-line);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
}
/* 価格の行はカードの下端にそろえる（直前との最小余白はデザインの 4px＋gap） */
.mi2 .mi2-case__body > :has(+ .mi2-case__price) { margin-bottom: 4px; }
.mi2 .mi2-case__price-label {
	font-size: 16px;
	line-height: normal;
	color: var(--mi2-ink-3);
}
.mi2 .mi2-case__price-num {
	font-family: var(--mi2-display);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mi2-accent);
	white-space: nowrap;
}
.mi2 .mi2-case__price-num span {
	font-size: 20px;
}
.mi2 .mi2-cases__note {
	margin-top: 56px;
	font-size: 16px;
	line-height: normal;
	text-align: center;
	color: var(--mi2-ink-3);
}

/* ---------- 768〜1100px ---------- */
@media (min-width: 768px) and (max-width: 1100px) {
	.mi2 .mi2-items,
	.mi2 .mi2-cond { padding: 88px 0; }

	.mi2 .mi2-items__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.mi2 .mi2-items__card { padding: 24px; gap: 12px; }
	.mi2 .mi2-items__name { font-size: 21px; }
	.mi2 .mi2-items__desc { font-size: 16px; }
	.mi2 .mi2-items__more { margin-top: 44px; font-size: 18px; }

	.mi2 .mi2-cond__grid { gap: 12px; }
	.mi2 .mi2-cond__pill { min-height: 72px; padding: 10px 18px; gap: 10px; font-size: 17px; }
	.mi2 .mi2-cond__pill .mi2-check { width: 32px; height: 32px; }
	.mi2 .mi2-cond__pill .mi2-ic { width: 18px; height: 18px; }

	.mi2 .mi2-cases__ttl { margin: 60px 0 40px; font-size: 27px; }
	.mi2 .mi2-cases__grid { gap: 16px; }
	.mi2 .mi2-case { border-radius: var(--mi2-r-md); }
	.mi2 .mi2-case__img { height: 210px; }
	.mi2 .mi2-case__body { padding: 22px; gap: 10px; }
	.mi2 .mi2-case__tag { padding: 5px 12px; font-size: 14px; }
	.mi2 .mi2-case__brand { font-size: 15px; }
	.mi2 .mi2-case__name { font-size: 19px; }
	.mi2 .mi2-case__worry { font-size: 16px; line-height: 1.7; }
	.mi2 .mi2-case__price-label { font-size: 15px; }
	.mi2 .mi2-case__price-num { font-size: 28px; }
	.mi2 .mi2-case__price-num span { font-size: 17px; }
	.mi2 .mi2-cases__note { margin-top: 40px; font-size: 15px; }
}

/* 4列のピルが窮屈になる幅は2列に */
@media (min-width: 768px) and (max-width: 960px) {
	.mi2 .mi2-cond__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mi2 .mi2-case__price { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* ---------- 767px以下 ---------- */
@media (max-width: 767px) {
	.mi2 .mi2-items__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.mi2 .mi2-items__card { padding: 16px; gap: 8px; border-radius: 18px; }
	.mi2 .mi2-items__icon { width: 48px; height: 48px; }
	.mi2 .mi2-items__icon .mi2-ic { width: 26px; height: 26px; }
	.mi2 .mi2-items__name { font-size: clamp(15px, 4.4vw, 18px); line-height: 1.35; }
	.mi2 .mi2-items__desc { font-size: 14px; line-height: 1.6; }
	.mi2 .mi2-items__more { margin-top: 32px; font-size: 16px; }

	.mi2 .mi2-cond__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.mi2 .mi2-cond__note { margin-top: 28px; font-size: 14px; text-align: left; }
	.mi2 .mi2-cond__pill {
		min-height: 64px;
		padding: 10px 12px;
		gap: 8px;
		border-radius: 16px;
		font-size: clamp(14px, 3.9vw, 16px);
		line-height: 1.35;
	}
	.mi2 .mi2-cond__pill .mi2-check { width: 28px; height: 28px; }
	.mi2 .mi2-cond__pill .mi2-ic { width: 16px; height: 16px; }

	.mi2 .mi2-cases__ttl { margin: 48px 0 24px; font-size: 24px; }
	.mi2 .mi2-cases__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		max-width: 520px;
		margin-inline: auto;
	}
	.mi2 .mi2-case { border-radius: var(--mi2-r-md); }
	.mi2 .mi2-case__img { height: auto; aspect-ratio: 4 / 3; }
	.mi2 .mi2-case__body { padding: 20px; gap: 10px; }
	.mi2 .mi2-case__tag { padding: 5px 12px; font-size: 14px; }
	.mi2 .mi2-case__brand { font-size: 14px; }
	.mi2 .mi2-case__name { font-size: 19px; }
	.mi2 .mi2-case__worry { font-size: 15px; line-height: 1.7; }
	.mi2 .mi2-case__price { padding-top: 14px; }
	.mi2 .mi2-case__price-label { font-size: 14px; }
	.mi2 .mi2-case__price-num { font-size: 30px; }
	.mi2 .mi2-case__price-num span { font-size: 17px; }
	.mi2 .mi2-cases__note { margin-top: 24px; font-size: 14px; }
}

/* 360px未満はピルが2列だと文字が途中で折れるので1列に */
@media (max-width: 359px) {
	.mi2 .mi2-cond__grid { grid-template-columns: minmax(0, 1fr); }
}