@charset "UTF-8";

.spSearchBtn {
	display: none;
}

.fs-c-heading--page,
.fs-c-heading {
	margin: 0;
	padding: 25px 0 15px;
	text-align: left;
	font-size: 20px;
	display: none;

	&+ .fs-c-heading--page {
		display: block;
	}
}

#search {
	margin: 0 auto 40px;
	width: 100%;
	font-size: 14px;

	div,
	h2,
	p,
	img {
		margin: 0;
		padding: 0;
	}

	h2 {
		margin: 60px 0 20px;
		font-weight: bold;
		font-size: 16px;
	}

	.searchOption {
		flex-wrap: wrap;
		align-items: center;
		display: flex;

		input[type='checkbox'] {
			display: none;
		}

		label {
			position: relative;
			margin: 0 20px 0 0;
			padding: 19px 0 17px;
			width: calc((100% - 80px) / 5);
			line-height: 0.9em;
			text-align: center;
			border: 1px solid #999999;
			border-radius: 4px;

			&:nth-of-type(5n) {
				margin: 0;
			}
		}

		input:checked + label {
			color: #fff;
			background-color: #e4d1a7;
			border: 1px solid #e4d1a7;
		}
	}

	.colorSearch {
		margin: 0 auto -15px;

		label {
			margin: 0 20px 15px 0;
			padding: 16px 0 16px 55px;
			text-align: left;
			letter-spacing: 0.023em;
			border: none;
			border-radius: 0;

			&:nth-of-type(5n) {
				margin: 0 0 15px;
			}

			&::before {
				position: absolute;
				top: 5px;
				left: 6px;
				width: 36px;
				height: 36px;
				content: '';
				background-color: #999;
				border-radius: 50%;
				display: inline-block;
			}

			&::after {
				position: absolute;
				top: -1px;
				left: 0;
				width: 44px;
				height: 44px;
				content: '';
				border: 2px solid #999;
				border-radius: 50%;
				display: none;
			}

			&.black::before {
				background-color: #353535;
			}
			&.black::after {
				border-color: #353535;
			}

			&.gray::before {
				background-color: #d7d7d5;
			}
			&.gray::after {
				border-color: #d7d7d5;
			}

			&.white::before {
				background-color: #f3f3f3;
			}
			&.white::after {
				border-color: #f3f3f3;
			}

			&.almondmilk::before {
				background-color: #f3ebe0;
			}
			&.almondmilk::after {
				border-color: #f3ebe0;
			}

			&.ecru::before {
				background-color: #f5f5f5;
			}
			&.ecru::after {
				border-color: #f5f5f5;
			}

			&.brown::before {
				background-color: #8b7462;
			}
			&.brown::after {
				border-color: #8b7462;
			}

			&.warmgray::before {
				background-color: #786868;
			}
			&.warmgray::after {
				border-color: #786868;
			}

			&.camel::before {
				background-color: #cdafa4;
			}
			&.camel::after {
				border-color: #cdafa4;
			}

			&.navy::before {
				background-color: #2b364c;
			}
			&.navy::after {
				border-color: #2b364c;
			}

			&.blue::before {
				background-color: #b2d0da;
			}
			&.blue::after {
				border-color: #b2d0da;
			}

			&.water::before {
				background-color: #cdd8ea;
			}
			&.water::after {
				border-color: #cdd8ea;
			}

			&.mint::before {
				background-color: #b2c1a4;
			}
			&.mint::after {
				border-color: #b2c1a4;
			}

			&.red::before {
				background-color: #de414a;
			}
			&.red::after {
				border-color: #de414a;
			}

			&.pink::before {
				background-color: #e1b5c6;
			}
			&.pink::after {
				border-color: #e1b5c6;
			}

			&.yellow::before {
				background-color: #f9f0d3;
			}
			&.yellow::after {
				border-color: #f9f0d3;
			}

			&.orange::before {
				background-color: #dd917a;
			}
			&.orange::after {
				border-color: #dd917a;
			}

			&.muscat::before {
				background-color: #d4e2bf;
			}
			&.muscat::after {
				border-color: #d4e2bf;
			}
		}

		input:checked + label {
			color: #3c3c3c;
			background-color: transparent;
			border: none;
		}

		input:checked + label::after {
			display: inline-block;
		}
	}

	.priceSearch {
		align-items: flex-end;

		input[type='text'] {
			margin: 0 8px 0 0;
			padding: 19px 0 17px;
			width: calc((100% - 80px) / 5);
			text-align: center;
			background-color: #ededed;
			border: none;
			border-radius: 4px;
			display: inline-block;
			vertical-align: bottom;

			&::placeholder {
				color: #8c8c8c;
			}
		}

		span {
			margin: 0 10px;
			padding: 19px 0 17px;
			display: inline-block;
		}
	}

	.itemtagSearch {
		label {
			padding: 14px 0 12px;
		}
	}

	.sortSearch {
		label {
			margin: 0 40px 0 0;
			width: auto;
			text-align: left;
			border: none;

			input[type='radio'] {
				position: relative;
				margin: 0 10px 0 0;
				width: 30px;
				height: 30px;
				border: 2px solid #e4d1a7;
				border-radius: 50%;
				vertical-align: -10px;
				appearance: none;

				&:checked::before {
					position: absolute;
					top: 50%;
					left: 50%;
					width: 20px;
					height: 20px;
					content: '';
					background: #e4d1a7;
					border-radius: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}
	}

	.button {
		margin: 90px auto 0;
		text-align: center;

		button {
			margin: 0 10px;
			padding: 19px 0 17px;
			width: 200px;
			line-height: 0.9em;
			background-color: transparent;
			border: 1px solid #999;
			border-radius: 4px;

			+ button {
				color: #fff;
				background-color: #e4d1a7;
				border-color: #e4d1a7;
			}
		}
	}
}

@media only screen and (max-width: 48.0625em) {
	.fs-c-heading--page,
	.fs-c-heading {
		margin: 0 auto -10px;
		padding: 0 0 10px;
		font-size: 16px;
	}

	#search {
		margin: 0 auto 20px;
		font-size: 13px;

		h2 {
			margin: 40px 0 10px;
			font-size: 15px;
		}

		.searchOption {
			label {
				margin: 0 17px 12px 0;
				padding: 16px 0 13px;
				width: calc((100% - 17px) / 2);
				line-height: 0.4em;
				border-radius: 2px;

				&:nth-of-type(5n) {
					margin: 0 17px 12px 0;
				}

				&:nth-of-type(2n) {
					margin: 0 0 12px;
				}
			}
		}

		.colorSearch {
			margin: 0 auto -15px;

			label {
				margin: 0 17px 15px 0;
				padding: 13px 0 13px 51px;

				&:nth-of-type(5n) {
					margin: 0 17px 9px 0;
				}

				&:nth-of-type(2n) {
					margin: 0 0 9px;
				}

				&::before {
					top: 0;
					left: 6px;
					width: 31px;
					height: 31px;
				}

				&::after {
					top: -6px;
					width: 39px;
					height: 39px;
				}
			}
		}

		.priceSearch {
			align-items: flex-end;

			input[type='text'] {
				margin: 0 6px 0 0;
				padding: 16px 0 12px;
				width: 35%;
			}

			span {
				margin: 0 9px;
				padding: 16px 0 12px;
			}
		}

		.itemtagSearch {
			label {
				margin: 0 9px 0 0;
				padding: 12px 0 10px;
				width: calc((100% - 18px) / 3);

				&:nth-of-type(2n) {
					margin: 0 9px 0 0;
				}

				&:nth-of-type(3n) {
					margin: 0;
				}
			}
		}

		.sortSearch {
			label {
				margin: 0 17px 12px 0;
				padding: 0;
				width: 42%;
			}
		}

		.button {
			margin: 40px auto 0;
			text-align: center;

			button {
				margin: 0 17px 0 0;
				padding: 16px 0 12px;
				width: calc((100% - 23px) / 2);
				line-height: 0.4em;

				+ button {
					margin: 0;
				}
			}
		}
	}
}