/*
 * 店舗ページと店舗一覧ページで共通の見た目。
 */

/*
 * 右上のメニュー（テーマの drawer.js）を、すりガラスのパネルに。
 * 店舗ページと、一覧（machinavi_shops）を置いたページでだけ読み込む。ほかのページのメニューはテーマのまま。
 * 項目の並び（トップ・食べる・お買いもの・キレイになる・暮らす・求人・掲載店募集・問い合わせ）はテーマの header.php に合わせている。
 */
.drawer-overlay {
	background: rgba(0, 0, 0, .28);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.drawer-nav {
	--mn-drawer-w: min(340px, 86vw);
	box-sizing: border-box;
	width: var(--mn-drawer-w);
	padding: 84px 16px 32px;
	overflow-y: auto;
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: saturate(180%) blur(30px);
	backdrop-filter: saturate(180%) blur(30px);
	box-shadow: -24px 0 60px rgba(0, 0, 0, .14);
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
	-webkit-font-smoothing: antialiased;
}
/* 閉じているときは影まで画面の外へ */
.drawer--right .drawer-nav {
	right: calc(-1 * var(--mn-drawer-w) - 80px);
}
.drawer--right.drawer-open .drawer-nav {
	right: 0;
}

.drawer-menu li {
	opacity: 0;
	transform: translateX(18px);
	transition: opacity .45s ease, transform .6s cubic-bezier(.32, .72, 0, 1);
}
.drawer-open .drawer-menu li {
	opacity: 1;
	transform: none;
}
.drawer-open .drawer-menu li:nth-child(2) { transition-delay: .04s; }
.drawer-open .drawer-menu li:nth-child(3) { transition-delay: .08s; }
.drawer-open .drawer-menu li:nth-child(4) { transition-delay: .12s; }
.drawer-open .drawer-menu li:nth-child(5) { transition-delay: .16s; }
.drawer-open .drawer-menu li:nth-child(6) { transition-delay: .2s; }
.drawer-open .drawer-menu li:nth-child(7) { transition-delay: .24s; }
.drawer-open .drawer-menu li:nth-child(8) { transition-delay: .28s; }

.drawer-menu .drawer-brand,
.drawer-menu .drawer-menu-item {
	--mn-dot: #1d1d1f;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	border-radius: 14px;
	color: #1d1d1f;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .2s ease;
}
.drawer-menu .drawer-brand:hover,
.drawer-menu .drawer-menu-item:hover {
	background: rgba(0, 0, 0, .05);
	color: #1d1d1f;
	text-decoration: none;
}
.drawer-menu .drawer-brand:active,
.drawer-menu .drawer-menu-item:active {
	background: rgba(0, 0, 0, .09);
}
/* 左の色の点（上のメニューのジャンル色と同じ） */
.drawer-menu .drawer-brand::before,
.drawer-menu .drawer-menu-item::before {
	content: "";
	flex: 0 0 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--mn-dot);
}
/* 右の小さな矢印 */
.drawer-menu .drawer-brand::after,
.drawer-menu .drawer-menu-item::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-left: auto;
	border-top: 2px solid #c7c7cc;
	border-right: 2px solid #c7c7cc;
	transform: rotate(45deg);
}
.drawer-menu li:nth-child(2) a { --mn-dot: #f08300; }
.drawer-menu li:nth-child(3) a { --mn-dot: #ee6d8a; }
.drawer-menu li:nth-child(4) a { --mn-dot: #2ea7e0; }
.drawer-menu li:nth-child(5) a { --mn-dot: #b5891c; }
.drawer-menu li:nth-child(6) a { --mn-dot: #13a596; }
/* 掲載店募集・問い合わせは、区切り線の下に小さめのグレーで */
.drawer-menu li:nth-child(7) {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba(0, 0, 0, .08);
}
.drawer-menu li:nth-child(n+7) .drawer-menu-item {
	padding: 10px 14px;
	color: #6e6e73;
	font-size: 15px;
	font-weight: 500;
}
.drawer-menu li:nth-child(n+7) .drawer-menu-item::before {
	display: none;
}

/* ハンバーガーボタン：すりガラスの丸ボタン。開くと × に変わり、パネルの右上に残る */
.drawer-hamburger,
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-hamburger {
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .78);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	box-shadow: 0 2px 12px rgba(0, 0, 0, .14);
}
.drawer-hamburger:hover {
	background: rgba(255, 255, 255, .95);
}
.drawer-open .drawer-hamburger {
	box-shadow: none;
	background: rgba(0, 0, 0, .06);
}
.drawer-hamburger .m_tp_15 {
	display: none;
}
.drawer-hamburger-icon,
.drawer-hamburger-icon::before,
.drawer-hamburger-icon::after {
	width: 18px;
	height: 2px;
	margin: 0;
	border-radius: 1px;
	background-color: #1d1d1f;
}
.drawer-hamburger-icon::before {
	top: -6px;
}
.drawer-hamburger-icon::after {
	top: 6px;
}
.drawer-open .drawer-hamburger-icon {
	background-color: transparent;
}
.drawer-open .drawer-hamburger-icon::before,
.drawer-open .drawer-hamburger-icon::after {
	top: 0;
}
@media (prefers-reduced-motion: reduce) {
	.drawer-menu li {
		transition: none;
	}
}