/* ============================================================================================
	MENU LIST / PATTERN
============================================================================================ */

.hhobar-section-menu-list {
	container-type: inline-size;

	flex: 1;
	min-width: 0;
}
.hhobar-section-menu-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3em;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--contrast-grade-3)
}
.hhobar-section-menu-icon img {
	width: 45%;
	height: 45%;
	object-fit: contain;
	border-radius: 0
}
.hhobar-section-menu-title {
	flex: 1;
	min-width: 0
}

.hhobar-section-menu-annotation {
	padding: .2em 1em;
	border-radius: 999px;
	background: rgb(230,230,230)
}
.hhobar-section-menu-no-1-rel {
	position: relative
}
.hhobar-section-menu-no-1 {
	display: inline-block !important;
	position: absolute !important;
	top: -4.5em;
	right: 100%;
	padding: 1em 1.5em;
	border-radius: 50%;
	border: 1px solid currentColor;
	white-space: nowrap !important;
	transform: rotate(-8deg)
}
.hhobar-section-menu-no-1::before {
	content: "";
	display: block;
	position: absolute;
	top: 4em;
	left: 62%;
	width: 44%;
	height: 1px;
	background: currentColor;
	transform: rotate(47deg)
}

.hhobar-section-menu-title-wrapper {
	flex-flow: column
}
.hhobar-section-menu-title-inner {
	flex-flow: column;
	align-items: center !important;
	position: relative;
	white-space: nowrap
}
.hhobar-section-menu-item-detail {
	gap: .4em !important
}
.hhobar-section-menu-price {
	margin-left: auto !important
}

@container (min-width: 668px) {
	.hhobar-section-menu-title-wrapper {
		flex-flow: row
	}
	.hhobar-section-menu-title-inner {
		flex-flow: row nowrap
	}
	.hhobar-section-menu-item-detail {
		padding-left: 4em
	}
	.hhobar-section-menu-title-inner {
		flex-flow: row;
		align-items: flex-end !important
	}
}