/* select.css */
@charset "UTF-8";

/* ----- cls_sel ----- */
.cls_sel {
	/* background-color:	#FDF9F3; */
	background-color:	var(--color-background);
	border:				solid 1px gray;
	box-sizing:			border-box;
	display:			inline-block;;
	max-width:			100%;
	overflow-x:			hidden;
	overflow-y:			auto;
	text-overflow:		ellipsis;
	white-space:		nowrap;
	width:				100%;
}
.cls_sel ul {
	margin:				0px;
	padding:			0px;
	list-style-type:	none;
}
.cls_sel li {
	margin:				0px;
	padding:			5px 0px;
	cursor:				pointer;
	list-style-type:	none;
}
@media screen and (min-width:1px) and (max-width:800px) {
	.cls_sel li {
		font-size:		0.875rem;
		padding:		0.75rem 0;
	}
}

.cls_sel > ul > ul { text-indent:1rem; }
.cls_sel > ul > ul > ul { text-indent:2rem; }
.cls_sel > ul > ul > ul > ul { text-indent:3rem; }
.cls_sel > ul > ul > ul > ul > ul { text-indent:4rem; }

.cls_sel .selected {
	/* background-color:	#EEE7D1; */
	background-color:	var(--color-gray-200);
}
/* スマホでこれをすると選択したところが濃くなったまま
.cls_sel li:hover, .cls_sel .selected:hover {
	background-color:	#B1A694;
}
*/

/* ----- cls_selmn ----- */
.cls_selmn {
	box-sizing:			border-box;
	border:				solid 2px gray;
	display:			inline-block;
	overflow-x:			hidden;
	overflow-y:			auto;
	white-space:		nowrap;
	background-color:	white;
	left:				15px;
	width:				100%;
	padding:			5px;
	min-width:			240px;
}

.cls_selmn ul {
	margin:				0px;
	padding:			0px;
	list-style-type:	none;
}
.cls_selmn li {
	margin:				0px;
	padding:			5px 0px;
	list-style-type:	none;
}

.cls_selmn > ul { text-indent:0rem; }
.cls_selmn > ul > ul { text-indent:1.5rem; }
.cls_selmn > ul > ul > ul { text-indent:3rem; }
.cls_selmn > ul > ul > ul > ul { text-indent:4.5rem; }