.search-box {
	padding: 0 3% 10%;
}
.page .search-box {
	padding-left: 0;
	padding: right: 0;
}
.search-field {
 	margin-bottom: 2%;
    position: relative;
    line-height: 0;
    margin-top: 1.6em;
}

.search-field::after {
	content: "";
    width: 26px;
    height: 26px;
    background: url(./images/icon_search.png) no-repeat right center;
    padding: 0px;
    background-size: 26px;
    position: absolute;
    right: 20px;
    bottom: 0;
    margin: auto;
    top: 0;
}

.search-input {
	padding: 20px;
    border-radius: 10px;
}

.search-input::placeholder {
	color: #454545;
}

.category-checkboxes {
	display: flex;
	gap: 2%;
	flex-wrap: wrap;
}

.category-checkboxes > input[type=checkbox] {
	display: none;
} 
.category-checkboxes > label {
    display: block;    
    width: calc(92% / 5);
    height: 70px;
    text-align: center;
    line-height: 70px; 
    cursor: pointer;
    color: #4b4b4b;   
    border: none;
    border-radius: 10px;
    background-color: #d0d0d0;
	margin-bottom: 1em;
}

.category-checkboxes input[type="checkbox"]:checked + label {
	position: relative;
	background: rgb(204,0,0);
	background: linear-gradient(180deg, rgba(204,0,0,1) 0%, rgba(130,9,9,1) 100%);
	color: #fff;
	border: none;
}

.category-checkboxes input[type="checkbox"]:checked + label::before {
    content: "";
    width: 20px;
    height: 20px;
    background: url(./images/icon_checkbox.png) no-repeat;
    padding: 0px;
    background-size: 20px;
    position: absolute;
    left: 15px;
    top: 5px;
    bottom: 0;
    margin: auto;
}

.search-button {
	display: flex;
	justify-content: space-between;
	margin: 1% auto 0;
}

.search-button > p {
	color: #808080;
}

.search-button > button[type="submit"] {
	position: relative;
    display: block;    
    width: 210px;
    height: 60px;
    text-align: center;
    line-height: 60px; 
    cursor: pointer;
	background: rgb(204,0,0);
	background: linear-gradient(180deg, rgba(204,0,0,1) 0%, rgba(130,9,9,1) 100%);
	color: #fff;
	border: none;
    border-radius: 10px;
}
.search-button > button[type="submit"]::after {
    content: "";
    width: 26px;
    height: 26px;
    background: url(./images/icon_search_wh.png) no-repeat;
    padding: 0px;
    background-size: 26px;
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
}

/* レスポンシブ対応（小さい画面サイズ用） */
@media (max-width: 768px) {
	.search-field {
    	margin-bottom: 5%;
	}
	.category-checkboxes {
		justify-content: center;
	}
	.category-checkboxes > label {
    	width: calc(98% / 2);
	}
	.search-button {
		display: block;
	}
	.search-button > button[type="submit"] {
		width: 100%;
	}
	/* 検索結果のカテゴリ表示を調整 */
}