/* =====================================================================
   gold4 — ファーストビュー（.mi2-ghero）
   PC 1440px のデザイン値をそのまま置き、写真まわりは「616×720 の箱」に対する
   cqw（コンテナ幅の %）で書いて、幅が縮んでも同じ比率のまま縮むようにしている。
     1101px〜   : デザインどおり（左 600px ／ 右 616px）
     768〜1100px: 見出しと写真は横並び、CTA は下に全幅
     〜767px    : 写真を全幅で先に出し、上に食い込む白カードに見出し。その下に実績の1行と CTA
   キャンペーンマークの見た目と動きは camp.css（ここは位置と大きさだけ）。
   ===================================================================== */

.mi2 .mi2-ghero {
	position: relative;
	overflow: hidden;
	overflow: clip;
	padding: 56px 0 72px;
}
.mi2 .mi2-ghero__inner {
	/* 左端は他セクションの .mi2-container と揃え、右は写真の列のぶん（最大 80px）余白へはみ出す */
	width: min(1280px, calc(100% - 20px - max(20px, (100% - var(--mi2-w)) / 2)));
	margin-left: max(20px, (100% - var(--mi2-w)) / 2);
	margin-right: auto;
	display: grid;
	grid-template-columns: 600px minmax(0, 616px);
	grid-template-rows: 1fr auto auto 1fr;
	grid-template-areas:
		".       visual"
		"head    visual"
		"actions visual"
		".       visual";
	column-gap: clamp(40px, 4.45vw, 64px);
}

/* ---------- 見出しまわり ---------- */
.mi2 .mi2-ghero__head {
	grid-area: head;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}
.mi2 .mi2-ghero__chip { align-self: flex-start; border-color: var(--mi2-line-2); }
.mi2 .mi2-ghero__chip-ic { display: inline-flex; color: var(--mi2-accent); }
.mi2 .mi2-ghero__chip-part { display: inline-block; }

.mi2 .mi2-ghero__title {
	font-family: var(--mi2-display);
	font-size: 50px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .02em;
	color: var(--mi2-ink);
}
.mi2 .mi2-ghero__lead {
	font-size: 21px;
	line-height: 1.9;
	color: var(--mi2-ink-2);
}
/* スマホ用のリード文（PC・タブレットは見出しの下の .mi2-ghero__lead を使う） */
.mi2 .mi2-ghero__lead-sp { display: none; }

/* 本日の参考買取相場 */
.mi2 .mi2-ghero__rates {
	padding: 24px 28px;
	background: var(--mi2-white);
	border: 1px solid var(--mi2-line-2);
	border-radius: var(--mi2-r-md);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mi2 .mi2-ghero__rates-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	line-height: normal;
}
.mi2 .mi2-ghero__rates-ttl { font-size: 18px; font-weight: 700; color: var(--mi2-ink); }
.mi2 .mi2-ghero__rates-date { font-size: 16px; color: var(--mi2-ink-3); }
.mi2 .mi2-ghero__rates-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.mi2 .mi2-ghero__rate {
	padding: 14px 20px;
	background: var(--mi2-gold-tile);
	border-radius: 16px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	line-height: 1.2;
}
.mi2 .mi2-ghero__rate--plat { background: var(--mi2-plat-tile); }
.mi2 .mi2-ghero__rate dt { font-size: 19px; font-weight: 700; color: var(--mi2-ink); white-space: nowrap; }
.mi2 .mi2-ghero__rate dd {
	font-family: var(--mi2-display);
	font-size: 36px;
	font-weight: 700;
	color: var(--mi2-accent);
	white-space: nowrap;
}
.mi2 .mi2-ghero__rate--plat dd { color: var(--mi2-plat-ink); }
.mi2 .mi2-ghero__rate-unit { font-size: 18px; color: var(--mi2-ink-2); }

/* 3つのチェック */
.mi2 .mi2-ghero__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.mi2 .mi2-ghero__check {
	height: 52px;
	padding: 0 18px 0 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--mi2-white);
	border: 1px solid var(--mi2-line-2);
	border-radius: 999px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mi2-ink);
	white-space: nowrap;
}
.mi2 .mi2-ghero__check-ic { width: 30px; height: 30px; }

/* スマホだけの実績1行（PC・タブレットは下の実績の帯に出す） */
.mi2 .mi2-ghero__sp-stats { display: none; }
/* スマホだけの「見出し右の金製品の丸」（PC・タブレットは写真の下のカードで見せる） */
.mi2 .mi2-ghero__sp-items { display: none; }

/* ---------- CTA（電話・LINE） ---------- */
.mi2 .mi2-ghero__actions {
	grid-area: actions;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 24px;
	min-width: 0;
}
.mi2 .mi2-ghero__cta { display: flex; gap: 16px; }
.mi2 .mi2-ghero__tel,
.mi2 .mi2-ghero__line {
	min-height: 96px;
	border: 0;
	border-radius: var(--mi2-r-md);
	justify-content: flex-start;
	text-align: left;
	white-space: nowrap;
}
.mi2 .mi2-ghero__tel { flex: 1 1 auto; padding: 0 24px; gap: 14px; }
.mi2 .mi2-ghero__tel-txt { gap: 6px; }
.mi2 .mi2-ghero__tel .mi2-tel-txt__note {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	opacity: 1;
}
.mi2 .mi2-ghero__tel .mi2-tel-txt__label {
	font-family: var(--mi2-display);
	font-size: 23px;
	line-height: 1.1;
}
.mi2 .mi2-ghero__line { flex: 0 0 230px; padding: 0 22px; gap: 12px; }
.mi2 .mi2-ghero__line-txt { display: flex; flex-direction: column; gap: 4px; }
.mi2 .mi2-ghero__line-sub { font-size: 16px; font-weight: 700; line-height: 1.3; }
.mi2 .mi2-ghero__line-main { font-size: 23px; font-weight: 700; line-height: 1.1; }
/* 注記はスマホだけ（PC デザインには無い） */
.mi2 .mi2-ghero__note { display: none; }

/* ---------- 写真まわり（デザインの 616×720 の箱。中身は cqw で比率ごと縮む） ---------- */
.mi2 .mi2-ghero__visual {
	grid-area: visual;
	align-self: center;
	position: relative;
	width: 100%;
	aspect-ratio: 616 / 720;
	container-type: inline-size;
}
/* 右側の大きな淡い円（デザインでは 800px。写真の箱の少し左上から右の余白へはみ出す） */
.mi2 .mi2-ghero__blob {
	position: absolute;
	left: -4px;
	left: -.65cqw;
	top: -66px;
	top: -10.7cqw;
	width: 800px;
	width: 129.9cqw;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--mi2-blob);
	pointer-events: none;
}
.mi2 .mi2-ghero__photo {
	position: absolute;
	top: 0;
	left: 48px;
	left: 7.79cqw;
	width: 520px;
	width: 84.42cqw;
	height: 660px;
	height: 107.14cqw;
	max-width: none;
	object-fit: cover;
	object-position: 40% 30%;
	border-radius: 260px 260px 48px 48px;
	border-radius: 42.21cqw 42.21cqw 7.79cqw 7.79cqw;
	background: var(--mi2-bg-sub);
}
.mi2 .mi2-ghero__camp {
	left: 0;
	top: 24px;
	top: 3.9cqw;
	width: 180px;
	width: max(120px, 29.22cqw);
}
.mi2 .mi2-ghero__bubble {
	position: absolute;
	right: 0;
	top: 418px;
	top: 67.86cqw;
	padding: 18px 24px;
	padding: max(10px, 2.92cqw) max(14px, 3.9cqw);
	background: var(--mi2-white);
	border-radius: 24px 24px 6px 24px;
	border-radius: max(14px, 3.9cqw) max(14px, 3.9cqw) 6px max(14px, 3.9cqw);
	box-shadow: var(--mi2-shadow);
	font-family: var(--mi2-display);
	font-size: 22px;
	font-size: max(13px, 3.57cqw);
	font-weight: 700;
	line-height: 1.5;
	color: var(--mi2-ink);
	white-space: nowrap;
}
.mi2 .mi2-ghero__tag {
	position: absolute;
	left: 60px;
	left: 9.74cqw;
	bottom: 196px;
	bottom: 31.82cqw;
	padding: 10px 20px;
	padding: max(6px, 1.62cqw) max(12px, 3.25cqw);
	background: rgba(255, 255, 255, .94);
	border-radius: 14px;
	border-radius: max(10px, 2.27cqw);
	box-shadow: var(--mi2-shadow-sm);
	font-size: 18px;
	font-size: max(13px, 2.92cqw);
	font-weight: 700;
	line-height: normal;
	color: var(--mi2-ink-2);
}

/* お買取りしている貴金属の一例（写真の下端に重なる白いカード） */
.mi2 .mi2-ghero__examples {
	position: absolute;
	left: 8px;
	left: 1.3cqw;
	right: 8px;
	right: 1.3cqw;
	bottom: 0;
	padding: 16px 20px 14px;
	padding: max(10px, 2.6cqw) max(12px, 3.25cqw) max(8px, 2.27cqw);
	background: var(--mi2-white);
	border-radius: 24px;
	border-radius: max(16px, 3.9cqw);
	box-shadow: 0 10px 28px rgba(120, 80, 20, .14);
	display: flex;
	flex-direction: column;
	gap: 8px;
	gap: max(4px, 1.3cqw);
}
.mi2 .mi2-ghero__examples-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	line-height: normal;
}
.mi2 .mi2-ghero__examples-ttl {
	font-size: 17px;
	font-size: max(12px, 2.76cqw);
	font-weight: 700;
	color: var(--mi2-ink);
}
.mi2 .mi2-ghero__examples-pill {
	flex-shrink: 0;
	padding: 4px 14px;
	padding: max(2px, .65cqw) max(10px, 2.27cqw);
	background: var(--mi2-tint);
	border-radius: 999px;
	font-size: 15px;
	font-size: max(12px, 2.44cqw);
	font-weight: 700;
	color: var(--mi2-accent);
}
.mi2 .mi2-ghero__examples-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	gap: max(6px, 1.62cqw);
}
.mi2 .mi2-ghero__example {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	gap: max(2px, .65cqw);
	min-width: 0;
}
.mi2 .mi2-ghero__example img {
	width: 100%;
	height: 84px;
	height: 13.64cqw;
	object-fit: contain;
}
.mi2 .mi2-ghero__example-name {
	font-size: 15px;
	font-size: max(12px, 2.44cqw);
	font-weight: 700;
	line-height: normal;
	color: var(--mi2-ink);
	white-space: nowrap;
}

/* ---------- 768〜1100px：横並びは維持して縮める／CTA は下に全幅 ---------- */
@media (max-width: 1100px) {
	.mi2 .mi2-ghero { padding: 48px 0 64px; }
	.mi2 .mi2-ghero__inner {
		width: min(var(--mi2-w), calc(100% - 40px));
		margin-inline: auto;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		grid-template-rows: auto auto;
		grid-template-areas:
			"head    visual"
			"actions actions";
		column-gap: 32px;
		row-gap: 40px;
		align-items: center;
	}
	.mi2 .mi2-ghero__head { gap: 18px; }
	.mi2 .mi2-ghero__chip { font-size: 15px; padding: 8px 16px; }
	.mi2 .mi2-ghero__title { font-size: clamp(28px, 3.9vw, 42px); }
	.mi2 .mi2-ghero__lead { font-size: 17px; line-height: 1.8; }
	.mi2 .mi2-ghero__rates { padding: 16px 18px; gap: 10px; border-radius: var(--mi2-r); }
	.mi2 .mi2-ghero__rates-ttl { font-size: 16px; }
	.mi2 .mi2-ghero__rates-date { font-size: 14px; }
	.mi2 .mi2-ghero__rates-grid { gap: 10px; }
	.mi2 .mi2-ghero__rate { padding: 10px 14px; flex-direction: column; align-items: flex-start; gap: 2px; }
	.mi2 .mi2-ghero__rate dt { font-size: 16px; }
	.mi2 .mi2-ghero__rate dd { font-size: clamp(24px, 3vw, 32px); }
	.mi2 .mi2-ghero__rate-unit { font-size: 15px; }
	.mi2 .mi2-ghero__checks { gap: 8px; }
	.mi2 .mi2-ghero__check { height: 46px; padding: 0 14px 0 8px; gap: 8px; font-size: 16px; }
	.mi2 .mi2-ghero__check-ic { width: 26px; height: 26px; }
	.mi2 .mi2-ghero__actions { margin-top: 0; }
	.mi2 .mi2-ghero__tel,
	.mi2 .mi2-ghero__line { min-height: 84px; justify-content: center; }
	.mi2 .mi2-ghero__line { flex: 0 1 300px; }
	/* 写真が小さくなる幅では、マークが縮みすぎないよう下限を設け、左上の余白側へ逃がす */
	.mi2 .mi2-ghero__camp { left: -40px; top: -28px; width: max(120px, 29.22cqw); }
}

/* ---------- 〜767px：スマホのファーストビュー ---------- */
@media (max-width: 767px) {
	.mi2 .mi2-ghero { padding: 0; overflow: visible; }
	.mi2 .mi2-ghero__inner {
		width: 100%;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* 写真（全幅・高さ 290px） */
	.mi2 .mi2-ghero__visual {
		order: 1;
		align-self: stretch;
		aspect-ratio: auto;
		height: 290px;
		container-type: normal;
	}
	.mi2 .mi2-ghero__blob { display: none; }
	.mi2 .mi2-ghero__photo {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		object-position: 45% 25%;
		border-radius: 0;
	}
	/* マーク・吹き出しとも、写真の人物の頭にかからない大きさと位置（360〜430px で確認） */
	.mi2 .mi2-ghero__camp { left: 4px; top: 4px; width: clamp(100px, 28vw, 120px); }
	.mi2 .mi2-ghero__bubble {
		right: 10px;
		top: 14px;
		padding: 10px 14px;
		border-radius: 16px 16px 4px 16px;
		box-shadow: var(--mi2-shadow-sm);
		font-size: 13px;
	}
	.mi2 .mi2-ghero__tag {
		left: auto;
		right: 14px;
		bottom: 44px;   /* 写真の下端（白カードが重なる30px）のすぐ上 */
		padding: 6px 14px;
		border-radius: var(--mi2-r-sm);
		box-shadow: none;
		font-size: 15px;
	}
	/* 写真の下の「貴金属の一例」カードは出さず、見出しの右の丸（.mi2-ghero__sp-items）で見せる */
	.mi2 .mi2-ghero__examples { display: none; }

	/* 写真に食い込む白カード。見出しの右に金製品の丸を置くため、中はグリッドにする */
	.mi2 .mi2-ghero__head {
		/* 大きさはカードの内側の幅（cqw）で決める。画面幅（vw）だとスクロールバーの幅で見出しがはみ出すため */
		container-type: inline-size;
		/* 丸の大きさ（画面 360px で 88px ／ 390px で 97px ／ 475px で 122px ／ 最大 132px） */
		--gh-items: clamp(88px, 29.5cqw, 132px);
		order: 2;
		z-index: 1;
		margin: -30px 12px 0;
		padding: 20px 18px;
		background: var(--mi2-white);
		border-radius: var(--mi2-r-lg);
		box-shadow: 0 8px 24px rgba(92, 70, 30, .08);
		/* 見出し（文字の幅ぶん）｜丸｜余り。幅の広いスマホでも丸が見出しのすぐ右に付くように、余りは3列目へ */
		display: grid;
		grid-template-columns: minmax(0, max-content) auto minmax(0, 1fr);
		grid-template-areas:
			"chip   chip   chip"
			"title  items  ."
			"rates  rates  rates"
			"checks checks checks";
		column-gap: 0;
		row-gap: 14px;
		align-items: center;
	}
	.mi2 .mi2-ghero__chip   { grid-area: chip; justify-self: start; }
	/* リード文はカードの中では出さず、CTA の下（ファーストビューの外）に出す */
	.mi2 .mi2-ghero__lead   { display: none; }
	.mi2 .mi2-ghero__lead-sp {
		order: 5;
		display: block;
		margin: 0 12px 40px;
		padding: 16px 18px;
		background: var(--mi2-white);
		border-radius: var(--mi2-r-lg);
		box-shadow: 0 8px 24px rgba(92, 70, 30, .08);
		font-size: 16px;
		line-height: 1.9;
		color: var(--mi2-ink-2);
	}
	.mi2 .mi2-ghero__rates  { grid-area: rates; }
	.mi2 .mi2-ghero__checks { grid-area: checks; }

	/* 金製品の丸（2×2 で4点。下に「金・プラチナ」の札） */
	.mi2 .mi2-ghero__sp-items {
		grid-area: items;
		position: relative;
		display: grid;
		place-items: center;
		width: var(--gh-items);
		margin-left: 8px;
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--mi2-white);
		border: 3px solid var(--mi2-tint);
		box-shadow: 0 6px 16px rgba(120, 80, 20, .14);
	}
	.mi2 .mi2-ghero__sp-items-grid {
		width: 84%;
		aspect-ratio: 1;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(0, 1fr));
		gap: 2px;
	}
	.mi2 .mi2-ghero__sp-items-grid li { min-width: 0; min-height: 0; }
	/* 商品写真は白地なので、乗算で白を消して丸の縁に重なっても目立たないようにし、少し大きく見せる */
	.mi2 .mi2-ghero__sp-items-grid img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		mix-blend-mode: multiply;
		transform: scale(1.12);
	}
	.mi2 .mi2-ghero__sp-items-pill {
		position: absolute;
		left: 50%;
		bottom: -9px;
		transform: translateX(-50%);
		padding: 2px 8px;
		background: var(--mi2-tint);
		border-radius: 999px;
		font-size: 12px;
		font-weight: 700;
		line-height: 1.4;
		color: var(--mi2-accent);
		white-space: nowrap;
	}
	.mi2 .mi2-ghero__chip {
		padding: 5px 14px;
		background: var(--mi2-bg-sub);
		border: 0;
		border-radius: 16px;
		font-size: 15px;
		line-height: 1.5;
	}
	.mi2 .mi2-ghero__chip-ic,
	.mi2 .mi2-ghero__chip-sep { display: none; }
	.mi2 .mi2-ghero__chip-txt { display: flex; flex-wrap: wrap; column-gap: .5em; }
	/* 見出しは一番長い行（10文字＋マーカーの左右 8px）が丸の左に収まる大きさ。最大 27px
	   （カードの内側の幅 − 丸 − 丸との間 8px − マーカー 8px）÷ 10.3 */
	.mi2 .mi2-ghero__title {
		grid-area: title;
		font-size: min(27px, calc((100cqw - 16px - var(--gh-items)) / 10.3));
		line-height: 1.5;
		letter-spacing: 0;
	}
	.mi2 .mi2-ghero__title .mi2-mark { border-radius: 6px; padding: 0 4px; }

	.mi2 .mi2-ghero__rates {
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		gap: 8px;
	}
	.mi2 .mi2-ghero__rates-head { display: block; }
	.mi2 .mi2-ghero__rates-ttl,
	.mi2 .mi2-ghero__rates-date { font-size: 15px; font-weight: 700; color: var(--mi2-ink-2); }
	.mi2 .mi2-ghero__rates-grid { gap: 8px; }
	.mi2 .mi2-ghero__rate { padding: 8px 12px; border-radius: 14px; }
	.mi2 .mi2-ghero__rate dt { font-size: 15px; }
	.mi2 .mi2-ghero__rate dd { font-size: 25px; }
	.mi2 .mi2-ghero__rate-unit { font-size: 15px; }

	/* 3つのチェック → 3列のタイル */
	.mi2 .mi2-ghero__checks {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}
	.mi2 .mi2-ghero__check {
		height: auto;
		padding: 10px 4px;
		flex-direction: column;
		justify-content: flex-start;
		gap: 6px;
		background: var(--mi2-bg);
		border: 0;
		border-radius: 16px;
		font-size: 14px;
		line-height: 1.35;
		text-align: center;
		white-space: normal;
	}
	.mi2 .mi2-ghero__check-ic { width: 26px; height: 26px; }
	.mi2 .mi2-ghero__check-ic .mi2-ic { width: 15px; height: 15px; }

	/* 実績の1行 */
	.mi2 .mi2-ghero__sp-stats {
		order: 3;
		display: block;
		margin: 16px 16px 0;
		text-align: center;
		font-size: 15px;
		line-height: 1.6;
		color: var(--mi2-ink-2);
	}
	.mi2 .mi2-ghero__sp-star {
		display: inline-block;
		margin: 0 1px;
		vertical-align: -2px;
		color: #B07A1F;
	}

	/* CTA（縦に2つ）と注記 */
	.mi2 .mi2-ghero__actions {
		order: 4;
		margin: 0;
		padding: 20px 20px 24px;
		gap: 12px;
	}
	.mi2 .mi2-ghero__cta { flex-direction: column; gap: 12px; }
	.mi2 .mi2-ghero__tel,
	.mi2 .mi2-ghero__line {
		flex: 0 0 auto;
		justify-content: center;
		border-radius: 22px;
		padding: 0 16px;
		white-space: normal;
	}
	.mi2 .mi2-ghero__tel { min-height: 80px; gap: 12px; }
	.mi2 .mi2-ghero__tel .mi2-ic { width: 30px; height: 30px; }
	.mi2 .mi2-ghero__tel-txt { gap: 4px; }
	.mi2 .mi2-ghero__tel .mi2-tel-txt__note { font-size: 14px; }
	.mi2 .mi2-ghero__tel .mi2-tel-txt__label { font-size: 22px; line-height: 1.2; }
	.mi2 .mi2-ghero__line { min-height: 72px; gap: 12px; }
	.mi2 .mi2-ghero__line .mi2-ic { width: 28px; height: 28px; }
	.mi2 .mi2-ghero__line-sub { font-size: 14px; }
	.mi2 .mi2-ghero__line-main { font-size: 21px; line-height: 1.2; }
	.mi2 .mi2-ghero__note {
		display: block;
		text-align: center;
		font-size: 15px;
		line-height: 1.7;
		color: var(--mi2-ink-3);
	}
}

@media (max-width: 359px) {
	.mi2 .mi2-ghero__head { margin-inline: 8px; padding: 20px 14px; }
	.mi2 .mi2-ghero__rate dd { font-size: 22px; }
	.mi2 .mi2-ghero__tel .mi2-tel-txt__label { font-size: 19px; }
}