/* =====================================================================
   multi-item2 — ファーストビュー（.mi2-hero）・実績の帯（.mi2-stats）
   PC 1440px のデザイン値をそのまま置き、写真まわりは「616px 幅の箱」に対する
   cqw（コンテナ幅の %）で書いて、幅が縮んでも同じ比率のまま縮むようにしている。
     1101px〜   : デザインどおり（左 600px ／ 右 616px ／ 写真列だけ右の余白へはみ出す）
     768〜1100px: 見出しと写真は横並び、CTA と注記は下に全幅
     〜767px    : 写真を全幅で先に出し、上に食い込む白カードに見出し（CTA は下部固定バー）
   ===================================================================== */

/* ---------- ヒーロー ---------- */
.mi2 .mi2-hero {
	position: relative;
	overflow: hidden;
	overflow: clip;
	padding: 64px 0 80px;
}

.mi2 .mi2-hero__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-hero__head {
	grid-area: head;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}
.mi2 .mi2-hero__chip { align-self: flex-start; }
.mi2 .mi2-hero__chip-ic { display: inline-flex; color: var(--mi2-accent); }

.mi2 .mi2-hero__title {
	font-family: var(--mi2-display);
	font-size: 58px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .02em;
	color: var(--mi2-ink);
}
.mi2 .mi2-hero__lead {
	font-size: 21px;
	line-height: 1.9;
	color: var(--mi2-ink-2);
}

.mi2 .mi2-hero__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.mi2 .mi2-hero__check {
	height: 56px;
	padding: 0 20px 0 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--mi2-white);
	border: 1px solid var(--mi2-line-2);
	border-radius: 999px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mi2-ink);
	white-space: nowrap;
}
.mi2 .mi2-hero__check-sp { display: none; }

/* CTA（電話・LINE）と注記 */
.mi2 .mi2-hero__actions {
	grid-area: actions;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin-top: 36px;
	min-width: 0;
}
.mi2 .mi2-hero__cta {
	display: flex;
	gap: 16px;
}
.mi2 .mi2-hero__tel,
.mi2 .mi2-hero__line {
	min-height: 96px;
	border: 0;
	border-radius: var(--mi2-r-md);
	justify-content: flex-start;
	text-align: left;
	white-space: nowrap;
}
.mi2 .mi2-hero__tel {
	flex: 1 1 auto;
	padding: 0 24px;
	gap: 14px;
}
.mi2 .mi2-hero__tel-txt { gap: 4px; }
/* 2行（備考 13px／主文言 22px）が 600px 幅の列で LINE 260px と並んでも折り返さず収まる大きさ */
.mi2 .mi2-hero__tel .mi2-tel-txt__note {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	opacity: 1;
}
.mi2 .mi2-hero__tel .mi2-tel-txt__label {
	font-family: var(--mi2-display);
	font-size: 22px;
	line-height: 1.1;
}
.mi2 .mi2-hero__line {
	flex: 0 0 260px;
	padding: 0 22px;
	gap: 12px;
}
.mi2 .mi2-hero__line-txt {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.mi2 .mi2-hero__line-sub {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}
.mi2 .mi2-hero__line-main {
	font-size: 23px;
	font-weight: 700;
	line-height: 1.1;
}
.mi2 .mi2-hero__note {
	font-size: 16px;
	line-height: normal;
	color: var(--mi2-ink-3);
}

/* 写真まわり（デザインの 616×700 の箱。中身は cqw で比率ごと縮む） */
.mi2 .mi2-hero__visual {
	grid-area: visual;
	align-self: center;
	position: relative;
	width: 100%;
	aspect-ratio: 616 / 700;
	container-type: inline-size;
}
.mi2 .mi2-hero__blob {
	position: absolute;
	left: -4px;
	left: -.65cqw;
	top: -24px;
	top: -3.9cqw;
	width: 126.6%;
	width: 126.6cqw;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--mi2-blob);
	pointer-events: none;
}
.mi2 .mi2-hero__photo {
	position: absolute;
	top: 0;
	left: 7.79%;
	left: 7.79cqw;
	width: 84.42%;
	width: 84.42cqw;
	height: 91.43%;
	height: 103.9cqw;
	max-width: none;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: 260px 260px 48px 48px;
	border-radius: 42.21cqw 42.21cqw 7.79cqw 7.79cqw;
	background: var(--mi2-bg-sub);
}
.mi2 .mi2-hero__bubble {
	position: absolute;
	right: 0;
	top: 150px;
	top: 24.39cqw;
	padding: 18px 24px;
	padding: max(10px, 2.92cqw) max(14px, 3.9cqw);
	background: var(--mi2-white);
	border-radius: var(--mi2-r-md) var(--mi2-r-md) var(--mi2-r-md) 6px;
	box-shadow: var(--mi2-shadow);
	font-family: var(--mi2-display);
	font-size: 22px;
	font-size: max(14px, 3.57cqw);
	font-weight: 700;
	line-height: 1.5;
	color: var(--mi2-ink);
	white-space: nowrap;
}
.mi2 .mi2-hero__tag {
	position: absolute;
	left: 0;
	bottom: 20px;
	bottom: 3.25cqw;
	max-width: 370px;
	max-width: 60cqw;
	padding: 20px 28px;
	padding: max(12px, 3.25cqw) max(16px, 4.55cqw);
	background: var(--mi2-white);
	border-radius: var(--mi2-r);
	box-shadow: var(--mi2-shadow);
	font-size: 15px;
	font-size: max(12px, 2.44cqw);
	font-weight: 700;
	line-height: 1.5;
	color: var(--mi2-accent);
}
/* キャンペーンマーク（見た目と動きは camp.css。ここは写真の左上に置く位置と大きさだけ） */
.mi2 .mi2-hero__camp {
	left: -62px;
	left: -10cqw;
	top: 6px;
	top: 1cqw;
	width: 191px;
	width: max(128px, 31cqw);
}
.mi2 .mi2-hero__exterior {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 186px;
	width: 30.19cqw;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	gap: max(6px, 1.3cqw);
}
.mi2 .mi2-hero__exterior-img {
	width: 186px;
	width: 30.19cqw;
	height: 186px;
	height: 30.19cqw;
	max-width: none;
	object-fit: cover;
	border-radius: 50%;
	border: 8px solid var(--mi2-white);
	border: max(4px, 1.3cqw) solid var(--mi2-white);
	box-shadow: 0 8px 24px rgba(92, 64, 40, .12);
	background: var(--mi2-bg-sub);
}
.mi2 .mi2-hero__exterior-cap {
	width: max-content;
	max-width: 197px;
	max-width: 32cqw;
	font-size: 15px;
	font-size: max(12px, 2.44cqw);
	font-weight: 700;
	line-height: 1.4;
	color: var(--mi2-ink-2);
	text-align: center;
}

/* ---------- 実績の帯 ---------- */
.mi2 .mi2-stats {
	background: var(--mi2-white);
	border-top: 1px solid var(--mi2-line);
	border-bottom: 1px solid var(--mi2-line);
	padding: 36px 0;
}
.mi2 .mi2-stats__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mi2 .mi2-stats__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mi2 .mi2-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
	text-align: center;
	border-right: 1px solid var(--mi2-line);
}
.mi2 .mi2-stats__item:last-child { border-right: 0; }
.mi2 .mi2-stats__label {
	font-size: 18px;
	line-height: normal;
	color: var(--mi2-ink-3);
}
.mi2 .mi2-stats__num {
	font-family: var(--mi2-display);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--mi2-ink);
	white-space: nowrap;
}
.mi2 .mi2-stats__unit { font-size: 24px; }
.mi2 .mi2-stats__num--rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 10px;
}
.mi2 .mi2-stats__star { display: inline-flex; color: var(--mi2-star); }
.mi2 .mi2-stats__total {
	font-size: 22px;
	color: var(--mi2-ink-3);
}
.mi2 .mi2-stats__sp { display: none; }

/* ---------- 768〜1100px：横並びは維持して縮める／CTA は下に全幅 ---------- */
@media (max-width: 1100px) {
	.mi2 .mi2-hero { padding: 48px 0 64px; }
	.mi2 .mi2-hero__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-hero__head { gap: 20px; }
	/* 写真が小さくなる幅では、マークが縮みすぎて文字が詰まらないよう 128px を下限にし、
	   その分だけ左上（見出しとの間の余白側）へ逃がして顔にかからないようにする */
	.mi2 .mi2-hero__camp { left: -56px; top: -36px; width: max(128px, 31cqw); }
	.mi2 .mi2-hero__chip { font-size: 16px; padding: 8px 16px; }
	.mi2 .mi2-hero__title { font-size: clamp(32px, 4.2vw, 46px); }
	.mi2 .mi2-hero__lead { font-size: 17px; line-height: 1.8; }
	.mi2 .mi2-hero__checks { gap: 8px; }
	.mi2 .mi2-hero__check { height: 48px; padding: 0 16px 0 8px; gap: 8px; font-size: 16px; }
	.mi2 .mi2-hero__check-ic { width: 28px; height: 28px; }
	.mi2 .mi2-hero__actions { margin-top: 0; gap: 16px; }
	.mi2 .mi2-hero__tel,
	.mi2 .mi2-hero__line { min-height: 84px; justify-content: center; }
	.mi2 .mi2-hero__note { text-align: center; font-size: 15px; }

	.mi2 .mi2-stats { padding: 28px 0; }
	.mi2 .mi2-stats__item { gap: 6px; padding: 0 10px; }
	.mi2 .mi2-stats__label { font-size: 15px; }
	.mi2 .mi2-stats__num { font-size: 34px; }
	.mi2 .mi2-stats__unit { font-size: 19px; }
	.mi2 .mi2-stats__star .mi2-ic { width: 26px; height: 26px; }
	.mi2 .mi2-stats__total { font-size: 17px; }
}

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

	/* 写真（全幅・高さ 350px） */
	.mi2 .mi2-hero__visual {
		order: 1;
		align-self: stretch;
		aspect-ratio: auto;
		height: 350px;
	}
	.mi2 .mi2-hero__photo {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		object-position: 50% 20%;
		border-radius: 0;
	}
	.mi2 .mi2-hero__bubble {
		right: 16px;
		top: 30px;
		padding: 12px 16px;
		border-radius: 18px 18px 18px 4px;
		box-shadow: var(--mi2-shadow-sm);
		font-size: 13px;
	}
	.mi2 .mi2-hero__tag {
		left: auto;
		right: 16px;
		top: 250px;
		bottom: auto;
		max-width: calc(100% - 32px);
		padding: 8px 14px;
		background: rgba(255, 255, 255, .94);
		border-radius: var(--mi2-r-sm);
		box-shadow: none;
		font-size: 15px;
		line-height: normal;
		color: var(--mi2-ink-2);
	}
	/* キャンペーンマーク：顔にかからない左肩の位置 */
	.mi2 .mi2-hero__camp {
		left: 12px;
		top: 164px;
		width: 128px;
	}

	/* 写真に食い込む白カード */
	.mi2 .mi2-hero__head {
		order: 2;
		z-index: 1;
		margin: -36px 12px 0;
		padding: 24px 20px;
		background: var(--mi2-white);
		border-radius: var(--mi2-r-lg);
		box-shadow: 0 8px 24px rgba(92, 64, 40, .08);
		gap: 16px;
	}
	.mi2 .mi2-hero__chip {
		padding: 6px 14px;
		background: var(--mi2-bg-sub);
		border: 0;
		font-size: 15px;
	}
	.mi2 .mi2-hero__chip-ic { display: none; }
	.mi2 .mi2-hero__title {
		font-size: clamp(24px, 7.5vw, 29px);
		line-height: 1.5;
		letter-spacing: 0;
	}
	.mi2 .mi2-hero__title .mi2-mark { border-radius: 6px; padding: 0 4px; }

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

	/* 実績は1行の文に */
	.mi2 .mi2-stats {
		background: transparent;
		border: 0;
		padding: 16px 16px 24px;
	}
	.mi2 .mi2-stats__grid { display: none; }
	.mi2 .mi2-stats__sp {
		display: block;
		text-align: center;
		font-size: 15px;
		line-height: 1.6;
		color: var(--mi2-ink-2);
	}
	.mi2 .mi2-stats__sp-star {
		display: inline-block;
		margin: 0 1px;
		vertical-align: -2px;
		color: #B07A1F;
	}
}

@media (max-width: 359px) {
	.mi2 .mi2-hero__head { margin-inline: 8px; padding: 20px 14px; }
	.mi2 .mi2-hero__check { font-size: 14px; }
}