@charset 'UTF-8';

#search{
	background:#F8F1EB;
	padding:30px 0;
}
@media only screen and (max-width: 1023px){
	#search{
		background:#F8F1EB;
		padding:110px 0 50px 0;
	}
}
.search_area_list{
	width:100%;
	display:flex;
    flex-wrap: wrap;
	align-items:flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 25px; /* li同士の間隔 */
}
.search_box{
	margin:30px 0;
}
.search_box h2{
	text-align:center;
	font-weight:bold;
	font-size:18px;
	margin:0 0 20px 0;
}

.search_area{
    width: calc((100% - 50px) / 3);
    box-sizing: border-box;
	background:#FFF;
    border-radius: 10px;
}

@media only screen and (max-width: 767px){
	.search_area_list{
		width:100%;
		display:block;
	    gap:0;
	}
	.search_area{
	    width: 100%;
		margin:0 0 10px 0;
	}
}

.search_area h3{
	font-weight:bold;
	font-size:16px;
	padding:20px 25px;
	margin:0;
	position:relative;
}
.search_area h3::before{
	content:"";
	width:22px;
	height:22px;
	background:#4e3230;
    border-radius: 50%;
	position:absolute;
	right:20px;
	top:20px;
}
.search_area h3::after{
	content: '';
	width: 8px;
	height: 8px;
	border-top: solid 1px #FFF;
	border-right: solid 1px #FFF;
	transform: rotate(135deg);
	position: absolute;
	right:27px;
	top:25px;
}
.search_area h3.close::after{
	transform: rotate(-45deg);
	top:28px;
}
.search_area ul{
	border-top:1px solid #B5A582;
	padding:10px 25px;
	margin:0;
}
.search_area ul li{
	margin:10px 0;
}
.checkboxItem {
	align-items: center;
	line-height: 1.2;
	cursor: pointer;
	position:relative;
	padding:0 0 0 25px;
}

.checkboxItem:not(:last-of-type) {
  margin-bottom: 16px;
}

.checkboxItem input[type='checkbox']{
	appearance: none;
	position: absolute;
	left:0;
	top:0;
	bottom:0;
	margin:auto;
	width: 18px;
	height: 18px;
	border: 1px solid #A7A7A7;
	border-radius: 50%;
	cursor: pointer;
}

.checkboxItem input[type='checkbox']:checked {
  border: 1px solid #df6d10;
  background-color: #df6d10;
}

.checkboxItem input[type='checkbox']:checked::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 3px;
  width: 10px;
  height: 6px;
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  transform: rotate(-45deg);
}


.search_area_btn{
	text-align:center;
	margin:20px 0 0 0;
}
.search_area_btn input[type='button']{
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background:#4e3230;
	color:#FFF;
    border-radius: 30px;
	padding:8px 40px;
	font-weight:bold;
	font-size:16px;
	margin:0 0 10px 0;
}
.search_area_btn a{
	font-size:14px;
	text-decoration: none;
	font-weight:bold;
}



.search_filters{
}
.search_filters_btn{
	width:100%;
	text-align:right;
	margin:20px 0 30px 0;
}
.search_filters_btn a{
	text-decoration: none;
}
.search_filters_btn .btn1{
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background:#4e3230;
	color:#FFF;
    border-radius: 30px;
	padding:10px 40px 10px 45px;
	font-weight:bold;
	font-size:16px;
	margin:0 0 0 15px;
	position:relative;
}
.search_filters_btn .btn1:after{
	content: '';
	width: 8px;
	height: 8px;
	border-top: solid 2px #FFF;
	border-right: solid 2px #FFF;
	transform: rotate(-135deg);
	position: absolute;
	left:20px;
	top:15px;
}
.search_filters_btn .btn1{
}

.search_filters_detail{
}
.search_filters_detail ul{
	display:flex;
	flex-wrap: wrap;
	gap:15px;
}
.search_filters_detail ul li{
	background:#FFF;
	padding:5px 20px 5px 30px;
    border-radius: 30px;
	position:relative;
	color: #4e3230;
	border:1px solid #4e3230;
}
@media only screen and (max-width: 767px){
	.search_filters_btn{
		text-align:center;
	}
	.search_filters_btn .btn1{
		display:block;
		width:60%;
		margin:0px auto 10px auto;
	}
}

.dli-close {
  display: block;
  vertical-align: middle;
  color: #4e3230;
  width: 10px;
  height: 1px;
  background: currentColor;
  border-radius: 0.1em;
  transform: rotate(45deg);
  position: absolute;
	left:15px;
	top:16px;
	cursor: pointer;
}

.dli-close::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}

.search_filters_detail ul li p{
	margin:0;
}


.search_list{
	margin:50px 0;
}
.search_list .subtitle{
	text-align:center;
	margin:0 0 5px 0;
	font-weight:bold;
	font-size:18px;
}

.search_list ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 25px; /* li同士の間隔 */
}

.search_list ul li {
    width: calc((100% - 50px) / 3);
    box-sizing: border-box;
}
@media only screen and (max-width: 767px){
	.search_list{
		margin:30px 0;
	}
	.search_list ul {
	    display: block;
	    gap: 0;
	    margin: 0;
	    padding: 0;
	    list-style: none;
	}

	.search_list ul li {
	    width: 100%;
	    box-sizing: border-box;
		margin:0 0 30px 0;
	}
}

.search_list_box{
	background:#FFF;
	padding:20px;
    border-radius: 10px;
}
.search_list_box_title{
	margin:10px 0;
	display:flex;
	align-items:flex-start;
}
.search_list_box_title span{
	background:#4e3230;
	color:#FFF;
	font-size:12px;
	padding:2px 10px;
	width:50px;
    border-radius: 3px;
	text-align:center;
}
.search_list_box_title h2{
	font-weight:bold;
	font-size:20px;
	margin:0 0 0 10px;
	flex:1;
}
.search_list_box_p{
	font-size:12px;
}
.search_list_box_btnarea{
	display:flex;
	justify-content:center;
	align-items:center;
	border-bottom:1px solid #B5A582;
	padding:0 0 15px 0;
}
.search_list_box_btnarea .btn1{
	background:#FFF;
	color:#4e3230;
	border:1px solid #4e3230;
    border-radius: 30px;
	padding:5px 20px;
	font-weight:bold;
	font-size:16px;
	text-decoration: none;
	width:40%;
	text-align:center;
	margin:0 5px;
}
.search_list_box_btnarea .btn2{
	background:#4EC622;
	color:#FFF;
	border:2px solid #FFF;
	box-shadow:0 3px 3px rgba(0, 0, 0, .1);
    border-radius: 30px;
	padding:7px 20px;
	font-weight:bold;
	font-size:16px;
	text-decoration: none;
	width:40%;
	text-align:center;
	margin:0 5px;
}
.search_list_box_detail{
	padding:10px 0;
	border-bottom:1px solid #B5A582;
}
.search_list_box_detail h3{
	font-size:16px;
	font-weight:bold;
	margin:0;
	position:relative;
}
.search_list_box_detail h3::after{
	content: '';
	width: 8px;
	height: 8px;
	border-top: solid 2px #4e3230;
	border-right: solid 2px #4e3230;
	transform: rotate(135deg);
	position: absolute;
	right:15px;
	top:5px;
}
.search_list_box_detail h3.close::after{
	transform: rotate(-45deg);
	top:5px;
}

.search_list_box_detail .search_list_box_over{
	display:none;
	margin:10px 0 0 0;
	padding:0;
}
.search_list_box_detail .search_list_box_over p{
	font-size:14px;
	margin:0 0 5px 0;
}
.search_list_box_detail .search_list_box_over ul{
	display:block;
	font-size:14px;
}
.search_list_box_detail .search_list_box_over ul li{
	width:100%;
}
