@charset "utf-8";

/* ---------- list-filter v3 Grid 縦並び仕様 ------------ */

#select {
	display: grid;
	justify-content: center;
	grid-auto-flow: column;
	grid-template-rows: repeat(5, auto);
	/* grid-template-columns: 5.5rem; */

	/* justify-items: center; */
	gap: 5px;
	/* ↓：指定pxのアイテムをできるだけ敷き詰める方法 */ 
	/* grid-template-columns: repeat(auto-fill, 5.5rem); */
	
    margin: 1rem 0;
	/* padding: 1rem 0.25rem; */
	/* border-bottom: 1px solid #ddd; */
}
#select label {
	padding: 0.2rem 0.2rem;
	font-size: 0.8em;
	border-radius: 5px;
	box-shadow: 0 0 2px #000000cc;
	background: linear-gradient(345deg, #e8e0ff57, #ffffff4a);
	width: 100%;
	text-align: center;
	user-select: none;
	/* 文字を丸める */
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
/* 選択中のラベルのスタイルを変更 #fcc*/
#select label.selected {
	/* background-color: #81bbff; */
	background: linear-gradient(320deg, #ff9f79 0%, #ff181894);
	color: white;
}
/* チェックボックスは非表示に */
#select label input {
	display:none;
}

/* 非選択要素を隠す */
#result [class*="hidden-"] {display: none;}