/* =====================================================================
   multi-item2 — ヘッダー・フッター・スマホ固定バー
   _parts/mi2/header.php / footer.php / mobilebar.php
   ===================================================================== */

/* ---------- ヘッダー（PC：1101px〜） ---------- */
.mi2 .mi2-hd {
	position: relative;
	z-index: 50;
	background: var(--mi2-white);
	/* 下罫線は内側に描き、PC では罫線込みで高さ 104px にそろえる */
	box-shadow: inset 0 -1px 0 #EFE4D4;
}
.mi2 .mi2-hd__in {
	width: min(1440px, 100%);
	min-height: 104px;
	margin-inline: auto;
	padding: 0 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

/* ロゴ｜店舗名 */
.mi2 .mi2-hd__brand { display: flex; align-items: center; gap: 24px; min-width: 0; }
.mi2 .mi2-hd__logo { display: flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.mi2 .mi2-hd__logo img { width: auto; height: 48px; }
.mi2 .mi2-hd__rule { flex-shrink: 0; width: 1px; height: 40px; background: #E6D9C7; }
.mi2 .mi2-hd__shop {
	min-width: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mi2-ink-2);
	text-wrap: balance;
}

/* ページ内ナビ */
.mi2 .mi2-hd__nav { display: flex; align-items: center; gap: 36px; flex-shrink: 0; }
.mi2 .mi2-hd__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--mi2-ink);
	white-space: nowrap;
}
.mi2 .mi2-hd__nav a:hover { color: var(--mi2-accent); }

/* 電話・LINE */
.mi2 .mi2-hd__act { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.mi2 .mi2-hd__tel {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	min-height: 44px;
	text-align: right;
	color: var(--mi2-accent);
}
.mi2 .mi2-hd__tel:hover { color: var(--mi2-accent-dk); }
.mi2 .mi2-hd__tel-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mi2-display);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
}
.mi2 .mi2-hd__tel-note {
	font-size: 15px;
	line-height: 1.2;
	color: var(--mi2-ink-3);
	white-space: nowrap;
}
.mi2 .mi2-hd__line {
	height: 60px;
	padding: 0 26px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: 999px;
	background: var(--mi2-green);
	color: var(--mi2-white);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	transition: background-color .15s;
}
.mi2 .mi2-hd__line:hover { background: var(--mi2-green-dk); color: var(--mi2-white); }

/* スマホ用の丸ボタン・メニュー（PC・タブレットでは出さない） */
.mi2 .mi2-hd__circle {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 50%;
	display: none;
	align-items: center;
	justify-content: center;
}
.mi2 .mi2-hd__circle--tel { background: var(--mi2-tint); color: var(--mi2-accent); }
.mi2 .mi2-hd__circle--tel:hover { color: var(--mi2-accent-dk); }
.mi2 .mi2-menu { display: none; }

/* 1101〜1439px：ナビを残したまま少しずつ詰める */
@media (max-width: 1439px) {
	.mi2 .mi2-hd__in { padding: 0 32px; gap: 24px; }
	.mi2 .mi2-hd__brand { gap: 16px; }
	.mi2 .mi2-hd__logo img { height: 42px; }
	.mi2 .mi2-hd__rule { height: 36px; }
	.mi2 .mi2-hd__shop { font-size: 16px; }
	.mi2 .mi2-hd__nav { gap: 24px; }
	.mi2 .mi2-hd__nav a { font-size: 16px; }
	.mi2 .mi2-hd__act { gap: 16px; }
	.mi2 .mi2-hd__tel-label { font-size: 19px; gap: 6px; }
	.mi2 .mi2-hd__tel-label .mi2-ic { width: 22px; height: 22px; }
	.mi2 .mi2-hd__tel-note { font-size: 13px; }
	.mi2 .mi2-hd__line { height: 52px; padding: 0 20px; gap: 8px; font-size: 16px; }
	.mi2 .mi2-hd__line .mi2-ic { width: 22px; height: 22px; }
}

@media (max-width: 1279px) {
	.mi2 .mi2-hd__in { padding: 0 24px; gap: 20px; }
	.mi2 .mi2-hd__brand { gap: 14px; }
	.mi2 .mi2-hd__shop { font-size: 15px; }
	.mi2 .mi2-hd__nav { gap: 20px; }
	.mi2 .mi2-hd__act { gap: 12px; }
	.mi2 .mi2-hd__line { padding: 0 18px; }
}

/* ---------- タブレット（768〜1100px）：ナビを隠す ---------- */
@media (max-width: 1100px) {
	.mi2 .mi2-hd__in { min-height: 88px; padding: 0 24px; gap: 20px; }
	.mi2 .mi2-hd__nav { display: none; }
	.mi2 .mi2-hd__logo img { height: 40px; }
	.mi2 .mi2-hd__rule { height: 32px; }
}

/* ---------- スマホ（〜767px） ---------- */
@media (max-width: 767px) {
	.mi2 .mi2-hd { box-shadow: none; } /* スマホは下罫線なし */
	.mi2 .mi2-hd__in { min-height: 64px; height: 64px; padding: 0 12px 0 16px; gap: 12px; }
	.mi2 .mi2-hd__logo img { height: 32px; }
	.mi2 .mi2-hd__rule,
	.mi2 .mi2-hd__shop,
	.mi2 .mi2-hd__tel,
	.mi2 .mi2-hd__line { display: none; }
	.mi2 .mi2-hd__act { gap: 8px; }
	.mi2 .mi2-hd__circle { display: flex; }
	.mi2 .mi2-menu { display: block; }
}

/* メニュー（<details>） */
.mi2 .mi2-menu__toggle {
	list-style: none;
	cursor: pointer;
	background: var(--mi2-bg-sub);
	color: var(--mi2-ink);
	-webkit-tap-highlight-color: transparent;
}
.mi2 .mi2-menu__toggle::-webkit-details-marker { display: none; }
.mi2 .mi2-menu__toggle::marker { content: ''; }
.mi2 .mi2-menu[open] .mi2-menu__toggle { background: var(--mi2-line-2); }
.mi2 .mi2-menu__ic { display: block; }
.mi2 .mi2-menu__ic--close,
.mi2 .mi2-menu[open] .mi2-menu__ic--open { display: none; }
.mi2 .mi2-menu[open] .mi2-menu__ic--close { display: block; }

.mi2 .mi2-menu__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	/* 下の固定バー（92px＋セーフエリア）に隠れないぶんだけ */
	max-height: calc(100vh - 156px - env(safe-area-inset-bottom, 0px));
	max-height: calc(100dvh - 156px - env(safe-area-inset-bottom, 0px));
	overflow-y: auto;
	padding: 8px 16px 20px;
	background: var(--mi2-white);
	border-radius: 0 0 var(--mi2-r) var(--mi2-r);
	box-shadow: var(--mi2-shadow);
}
.mi2 .mi2-menu__list li + li { border-top: 1px solid var(--mi2-line); }
.mi2 .mi2-menu__link {
	min-height: 56px;
	padding: 0 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--mi2-ink);
}
.mi2 .mi2-menu__link .mi2-ic { color: var(--mi2-accent); }
.mi2 .mi2-menu__cta { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.mi2 .mi2-menu__cta .mi2-btn { width: 100%; padding: 0 16px; }

/* ---------- フッター ---------- */
.mi2 .mi2-ft {
	padding: 48px 0;
	background: var(--mi2-footer);
	color: var(--mi2-line);
}
.mi2 .mi2-ft__in {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}
.mi2 .mi2-ft__name {
	font-family: var(--mi2-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--mi2-white);
}
.mi2 .mi2-ft__name span { display: inline-block; } /* 店名の途中で折り返さない */
.mi2 .mi2-ft__info {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 1em;
	font-size: 16px;
	line-height: normal;
}
.mi2 .mi2-ft__links { font-size: 15px; line-height: normal; }
.mi2 .mi2-ft__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--mi2-line);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mi2 .mi2-ft__links a:hover { color: var(--mi2-white); }
.mi2 .mi2-ft__sep { margin: 0 .5em; color: var(--mi2-line-3); }
.mi2 .mi2-ft__copy { font-size: 15px; line-height: normal; color: #CDBBA3; }
.mi2 .mi2-ft__copy small { font-size: inherit; }
.mi2 .mi2-ft :focus-visible { outline-color: var(--mi2-white); }

@media (max-width: 767px) {
	.mi2 .mi2-ft { padding: 40px 0; }
	.mi2 .mi2-ft__name { font-size: 18px; }
	.mi2 .mi2-ft__info { font-size: 14px; }
	.mi2 .mi2-ft__links,
	.mi2 .mi2-ft__copy { font-size: 14px; }
}

/* ---------- スマホ下部の固定ボタン ---------- */
.mi2 .mi2-mbar { display: none; }

@media (max-width: 767px) {
	.mi2 { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

	.mi2 .mi2-mbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		display: flex;
		gap: 10px;
		padding: 10px 12px calc(18px + env(safe-area-inset-bottom, 0px));
		background: var(--mi2-white);
		box-shadow: 0 -6px 18px rgba(92, 64, 40, .10);
	}
	.mi2 .mi2-mbar__btn {
		flex: 1 1 0;
		min-width: 0;
		height: 64px;
		padding: 0 8px;
		border-radius: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		color: var(--mi2-white);
		-webkit-tap-highlight-color: transparent;
	}
	.mi2 .mi2-mbar__btn--tel  { background: var(--mi2-accent); }
	.mi2 .mi2-mbar__btn--line { background: var(--mi2-green); }
	.mi2 .mi2-mbar__btn--tel:hover  { background: var(--mi2-accent-dk); color: var(--mi2-white); }
	.mi2 .mi2-mbar__btn--line:hover { background: var(--mi2-green-dk); color: var(--mi2-white); }
	.mi2 .mi2-mbar__txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
	.mi2 .mi2-mbar__main { font-size: 18px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
	.mi2 .mi2-mbar__sub  { font-size: 13px; line-height: 1.1; white-space: nowrap; }
	.mi2 .mi2-mbar :focus-visible { outline-offset: -5px; outline-color: var(--mi2-white); border-radius: 18px; }
}

/* 幅 390px 未満の端末（360〜375px 等）：2行目「平日 10:00〜19:00」がボタンからはみ出すため詰める */
@media (max-width: 389px) {
	.mi2 .mi2-mbar { gap: 8px; padding-left: 10px; padding-right: 10px; }
	.mi2 .mi2-mbar__btn { padding: 0 6px; gap: 6px; }
	.mi2 .mi2-mbar__btn .mi2-ic { width: 22px; height: 22px; }
	.mi2 .mi2-mbar__sub { font-size: 12px; }
}

/* 幅 360px 未満の端末：アイコンを外して2ボタンの文字を収める */
@media (max-width: 359px) {
	.mi2 .mi2-mbar { gap: 8px; padding-left: 8px; padding-right: 8px; }
	.mi2 .mi2-mbar__btn { padding: 0 6px; }
	.mi2 .mi2-mbar__btn .mi2-ic { display: none; }
	.mi2 .mi2-mbar__txt { align-items: center; text-align: center; }
	.mi2 .mi2-mbar__main { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
	.mi2 .mi2-hd__line { transition: none; }
}

@media print {
	.mi2 .mi2-mbar,
	.mi2 .mi2-menu { display: none !important; }
	.mi2 { padding-bottom: 0; }
}