@charset "UTF-8";

/* ----- cls_sel ----- */
.cls_sel {
	box-sizing:			border-box;
	border:				solid 1px gray;
	display:			inline-block;
	overflow-x:			hidden;
	overflow-y:			auto;
	white-space:		nowrap;
	background-color:	#FDF9F3;
	width:				100%;
}
.cls_sel li {
	cursor:				pointer;
}
.cls_sel ul {
	margin:				0px;
	padding:			0px;
	list-style-type:	none;
}
.cls_sel li {
	margin:				0px;
	padding:			5px 0px;
	list-style-type:	none;
}

.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;
}
/* スマホでこれをすると選択したところが濃くなったまま
.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; }