/* =====================================================================
   multi-item2 — 土台（デザイントークン・共通パーツ）
   デザイン方針：やわらかく、読みやすく。アイボリー地・焦げ茶の文字・テラコッタの差し色。
   ※ このCSSは multi-item2 のページだけで読み込まれる（head.php の own_css / extra_css）。
   ===================================================================== */

:root {
	/* 地色 */
	--mi2-bg:          #FBF6EE;   /* アイボリー（ページの地） */
	--mi2-bg-sub:      #F4ECDF;   /* ベージュ（区切りのセクション） */
	--mi2-white:       #FFFFFF;
	--mi2-blob:        #F3E6D5;   /* 飾りの円・写真の影の板 */
	--mi2-tint:        #F7E6D8;   /* 差し色の淡色（アイコンの丸地・タグ） */
	--mi2-mark:        #F6DCC7;   /* 見出しのマーカー */
	/* 文字 */
	--mi2-ink:         #3B3129;   /* 本文・見出し */
	--mi2-ink-2:       #54473D;   /* リード文 */
	--mi2-ink-3:       #6B5D52;   /* 補足・注記 */
	/* 罫線 */
	--mi2-line:        #EFE4D4;
	--mi2-line-2:      #EADCC9;
	--mi2-line-3:      #D9C9B4;
	/* 差し色 */
	--mi2-accent:      #A94F2A;   /* テラコッタ（電話・強調） */
	--mi2-accent-dk:   #7E3A1E;
	--mi2-green:       #00833A;   /* LINE */
	--mi2-green-dk:    #006B30;
	--mi2-green-tint:  #E3F1E8;
	--mi2-star:        #D9982B;
	--mi2-footer:      #3B3129;
	/* 書体 */
	--mi2-display: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
	--mi2-body:    'BIZ UDPGothic', 'Hiragino Sans', 'Noto Sans JP', 'Meiryo', sans-serif;
	/* 角丸・影 */
	--mi2-r-sm: 12px;
	--mi2-r:    20px;
	--mi2-r-md: 24px;
	--mi2-r-lg: 28px;
	--mi2-r-xl: 40px;
	--mi2-shadow:    0 8px 24px rgba(92, 64, 40, .10);
	--mi2-shadow-sm: 0 6px 18px rgba(92, 64, 40, .12);
	/* レイアウト */
	--mi2-w: 1200px;
}

/* ---------- ページの土台 ---------- */
body { margin: 0; background: var(--mi2-bg); }
.mi2 {
	background: var(--mi2-bg);
	color: var(--mi2-ink);
	font-family: var(--mi2-body);
	font-size: 17px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	overflow-x: clip;
}
.mi2 *, .mi2 *::before, .mi2 *::after { box-sizing: border-box; }
.mi2 h1, .mi2 h2, .mi2 h3, .mi2 h4, .mi2 p, .mi2 figure, .mi2 ul, .mi2 ol, .mi2 dl, .mi2 dd { margin: 0; }
.mi2 ul, .mi2 ol { padding: 0; list-style: none; }
.mi2 img { max-width: 100%; display: block; }
.mi2 a { color: var(--mi2-accent); text-decoration: none; }
.mi2 a:hover { color: var(--mi2-accent-dk); }
.mi2 .mi2-ic { flex-shrink: 0; display: block; }
.mi2 :focus-visible { outline: 3px solid var(--mi2-accent); outline-offset: 3px; border-radius: 8px; }

/* ---------- 横幅 ---------- */
.mi2-container { width: min(var(--mi2-w), calc(100% - 40px)); margin-inline: auto; }

/* ---------- セクション ---------- */
.mi2-section { padding: 104px 0; }
.mi2-section--sub   { background: var(--mi2-bg-sub); }
.mi2-section--white { background: var(--mi2-white); }

/* セクション見出し（小見出し → 見出し → リード） */
.mi2-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-bottom: 56px; }
.mi2-eyebrow { font-size: 18px; font-weight: 700; letter-spacing: .1em; line-height: normal; color: var(--mi2-accent); }
.mi2-h2 { font-family: var(--mi2-display); font-size: 42px; font-weight: 700; line-height: 1.4; color: var(--mi2-ink); }
.mi2-lead { font-size: 20px; line-height: 1.8; color: var(--mi2-ink-2); }

/* 折り返すときは文節ごとに（見出しやタイルで「…でき／ます」のように1〜2文字だけ落ちるのを防ぐ） */
.mi2-ph { display: inline-block; }

/* 見出し内のマーカー */
.mi2-mark { background: var(--mi2-mark); border-radius: 8px; padding: 0 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- ボタン ---------- */
.mi2-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 64px; padding: 0 32px;
	border-radius: 999px; border: 2px solid transparent;
	font-family: var(--mi2-body); font-size: 19px; font-weight: 700; line-height: 1.3;
	text-align: center; cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.mi2 .mi2-btn:hover { transform: translateY(-1px); }
.mi2 .mi2-btn--accent  { background: var(--mi2-accent); color: #fff; }
.mi2 .mi2-btn--accent:hover  { background: var(--mi2-accent-dk); color: #fff; }
.mi2 .mi2-btn--line    { background: var(--mi2-green); color: #fff; }
.mi2 .mi2-btn--line:hover    { background: var(--mi2-green-dk); color: #fff; }
.mi2 .mi2-btn--outline { background: var(--mi2-white); border-color: var(--mi2-accent); color: var(--mi2-accent); }
.mi2 .mi2-btn--outline:hover { background: var(--mi2-tint); color: var(--mi2-accent-dk); }
.mi2 .mi2-btn--ghost   { background: transparent; border-color: var(--mi2-line-3); color: var(--mi2-ink); }
.mi2 .mi2-btn--ghost:hover   { background: var(--mi2-white); color: var(--mi2-ink); }

/* 電話ボタンの2行表示（電話でのお問い合わせ／査定担当直通｜平日 10:00〜19:00） */
.mi2-tel-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
.mi2-tel-txt__label { font-weight: 700; line-height: 1.2; }
.mi2-tel-txt__note  { font-size: .72em; font-weight: 400; line-height: 1.2; opacity: .95; }

/* ---------- 丸いチェック・ラベル ---------- */
.mi2-check { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--mi2-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.mi2-check--soft { background: var(--mi2-tint); color: var(--mi2-accent); }
.mi2-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--mi2-white); border: 1px solid var(--mi2-line-2); border-radius: 999px; font-size: 18px; font-weight: 700; color: var(--mi2-ink-2); line-height: normal; }

/* ---------- スマホ ---------- */
@media (max-width: 767px) {
	.mi2 { font-size: 16px; }
	.mi2-container { width: calc(100% - 32px); }
	.mi2-section { padding: 64px 0; }
	.mi2-head { gap: 10px; margin-bottom: 36px; }
	.mi2-eyebrow { font-size: 15px; }
	.mi2-h2 { font-size: 27px; line-height: 1.45; }
	.mi2-lead { font-size: 16px; }
	.mi2-btn { min-height: 58px; padding: 0 24px; font-size: 17px; }
	.mi2-chip { font-size: 15px; padding: 7px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.mi2 .mi2-btn, .mi2 .mi2-btn:hover { transition: none; transform: none; }
}