@charset "UTF-8";

/*
========================================
		div.filter-wrapper (絞込み機能)
========================================
*/

div.filter-wrapper {
	box-sizing: border-box;
	padding: .65em .15em .85em .65em;
	border-bottom: 1px solid #efefefff;
	overflow-x: scroll;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	/* scrollbar off => IE, Edge */
	-ms-overflow-style: none;
	/* scrollbar off =>Firefox */
	scrollbar-width: none;
}

div.filter-wrapper::-webkit-scrollbar {
	/* scrollbar off => Chrome, Safari */
	display: none;
}

@media screen and (min-width:701px) {
	div.filter-wrapper {
		box-sizing: border-box;
		padding: 1.2em;
		overflow-x: visible;
	}
}

div.filter-box {
	width: fit-content;
	padding: 0 .4em;
	position: relative;
	z-index: 1;
}

@media screen and (min-width:701px) {
	div.filter-box {
		box-sizing: border-box;
		padding: 0 .4em;
		margin: 0 auto;
		border: 2px solid #d0d0d2ff;
		border-radius: 4px;
		overflow-x: visible;
	}
}

div.filter-box>div.filter-box-title {
	width: fit-content;
	padding: 0 .5em 0 .2em;
	color: #888;
	font-size: 12px;
	position: absolute;
	top: -12px;
	left: 0;
	z-index: 10;
	background: #fff;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;
}

@media screen and (min-width:701px) {
	div.filter-box>div.filter-box-title {
		padding: .2em .5em 0;
		left: .95em;
	}
}

/* ###### 絞込みボタンリスト####### */
div.filter-box>ul {
	margin: 0;
	padding: .8em 0 0;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.85em 1.15em;
}

@media screen and (min-width:701px) {
	div.filter-box>ul {
		margin: 0 auto;
		padding: 1.4em .6em 1.0em;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		gap: 0.85em 1.15em;
	}
}

div.filter-box>ul>li {
	width: fit-content;
	height: 45px;
	padding: .2em .2em .2em .4em;
	border-radius: 3px;
	overflow: hidden;
	flex-shrink: 0;
}

div.filter-box>ul>li:not(:has(input:checked)):not(:last-child) {
	border: 1px solid #ccc;
	outline: none;
	color: #555;
	text-shadow: none;
	background: none;
}

div.filter-box>ul>li:has(input:checked) {
	border: 1px solid #10967d;
	outline: 3px solid #10967d;
	color: #10967d;
	text-shadow: 0px 1px 0px #666;
	box-shadow:0px 4px 8px 1px #666;
	background: rgba(16, 153, 144, 0.10);
}

div.filter-box>ul>li:hover {
	opacity: .5;
}

div.filter-box>ul>li>label {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

div.filter-box>ul>li>label>input[type="checkbox"] {
	display: none;
}

div.filter-box>ul>li>label>picture>img {
	display: block;
	margin: 0 auto;
	width: 30px;
	height: 30px;
	object-fit: cover;
}

div.filter-box>ul>li>label>p {
	width: 100%;
	padding: .35em;
	font-size: clamp(8px, 1.12vw, 9px);
	line-height: 1.05em;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 解除ボタン・ */
div.filter-box>ul>li.filter-opr-btn>button#switch-clear-btn {
	padding: .4em .9em .5em .5em;
	border: 3px solid #007f95fc;
	border-radius: 3px;
	background: rgba(0, 128, 163, 0.75);
	font-size: 13px;
	color: #fff;
	font-weight: 600;
	letter-spacing: .12em;
	text-shadow: 0 1px 1px #010630ab;
	white-space: nowrap;
	cursor: pointer;
}

div.filter-box>ul>li.filter-opr-btn>button#switch-clear-btn:hover {
	background: #fefefeff;
	color: rgba(0, 128, 163, 1);
	text-shadow: none;
}