@charset "utf-8";

body {
	position: relative;
}

.select_hidden {
	visibility: hidden !important;
}

.custom-select {
	display: inline-block;
	padding-left: 0;
	width: 100%;
	height: 100%;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	position: relative;
	cursor: pointer;
}

.custom-select::before {
	content: "";
	display: block;
	position: absolute;
	top: 46%;
	right: 6%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 2;
	width: 10px;
	height: 10px;
	border: 3px solid #fff;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateY(-25%) rotate(135deg);
	color: #fff;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

.custom-select span {
	position: absolute;
	top: 50%;
	left: 40px;
	transform: translateY(-50%);
}

.select_list_box {
	display: none;
	border: 1px solid #777;
	position: absolute;
	z-index: 9999;
}

.sort_box,
.filter_box {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex-flow: column;
	gap: 0 !important;
	width: 100%;
}

.list_items {
	height: auto !important;
	border-radius: 0 !important;
	width: 100%;
}

.list_items a {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "ＭＳ Ｐゴシック", sans-serif;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	padding: 5px 0 5px 40px;
	min-width: 100%;
	font-size: 18px;
	color: #000;
	background: #fff !important;
	transition: none;
	animation: none;
	position: relative;
}

.list_items a.active::before {
	content: '';
	display: block;
	position: absolute;
	top: 45%;
	left: 1em;
	width: 12px;
	height: 7px;
	border-left: 2px solid #0053D6;
	border-bottom: 2px solid #0053D6;
	transform: rotate(-45deg) translateY(-45%);
}

.list_items a.active:hover::before {
	content: '';
	display: block;
	position: absolute;
	top: 45%;
	left: 1em;
	width: 12px;
	height: 7px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translateY(-45%);
}

@media all and (min-width: 768px) {
	.custom-select:hover {
		opacity: 0.7;
	}
	
	.list_items a:hover {
		color: #fff;
		background: #ec1855!important;
		opacity: 1;
	}
}

@media all and (max-width: 767px) {
	.custom-select {
		font-size: max(calc(42vw / 12), 12px);
		border-bottom: none;
	}
	
	.custom-select::before {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		right: 6%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		z-index: 2;
		width: 10px;
		height: 10px;
		border: 2px solid currentColor;
		border-left: 0;
		border-bottom: 0;
		box-sizing: border-box;
		transform: translateY(-70%) rotate(135deg);
		color: #fff;
		font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	}
	
	.custom-select span {
		left: max(6vw, 25px);
	}
	
	#select_reset02 {
		left: 24%;
	}
	
	.select_list_box {
		border: none;
		background-color: rgba(250, 250, 250, 0.9) !important;
		backdrop-filter: blur(10px);
		border-radius: 10px;
	}
	
	.list_items {
		border-bottom: 1px solid #ccc;
	}
	
	.list_items:last-of-type {
		border-bottom: none;
	}

	.list_items a.active::before {
		left: 7%;
		border-left: 3px solid #000;
		border-bottom: 3px solid #000;
		transform: rotate(-45deg) translate(-7%, -45%);
	}

	.list_items a.active:hover::before {
		border-left: 3px solid #fff;
		border-bottom: 3px solid #fff;
	}
	
	
	.list_items a {
		padding: 5% 0 5% max(calc(42vw / 12), 32px);
		background-color: transparent !important;
		font-size: max(calc(42vw / 12), 16px);
		font-weight: bold;
	}
}