.modal__button {
  box-shadow: 2px 2px 2px rgba(#000);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 10px 20px;
}


.modal__button--open {/* モーダルを開くボタン */
  @extend .modal__button;
  padding: 0px;
  cursor: pointer;
}
.fas.fa-times {
	font-size: 24px;
	color: #fff;
	padding-top: 4px;
}

.modal__button--close {
  @extend .modal__button;
  margin: 10px;
  cursor: pointer;
}
.modal__item{
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
  overflow-y: scroll;
  z-index: 20;
}
.modal__bg{
  background: rgba(#000);
  min-height: 100vh;
  position: absolute;
  width: 100%;
}

.modal__content{
  background: #fff;
  margin: 0 auto;
  max-width: 100%;
  padding: 0;
  position: relative;
  width: 100%;
	min-height: 800px;/* 下の背景が見えてしまうかもしれないので念のため入れた */
  z-index: 1;
}

.modal__item .head {
	width: 90%; color: #fff; background-color: #5d62aa; padding: 1% 5%;
}
.modal__item .head .left {
	float: left;
}
.modal__item .head .right {
	float: right;
}
.modal__item .content {
	width: 95%; margin: 20px auto 0; padding-bottom: 160px;
}

.modal__item .bt_modal_bg {
	width: 100%; padding: 20px 0; background-color: #fff; position: fixed; bottom:0; left: 0; z-index: 30;
	border-top: solid 1px #5d62aa;
}
.modal__item .bt_modal_bg .bt_clear a {
	display: block;
	padding: 2%;
	margin-left: 5px;
	width: 42.5%;
	color: #fff;
	background-color: #5d62aa;
	border-radius: 5px;
	float: left;
	text-align: center;
	text-decoration: none;
}
.modal__item .bt_modal_bg .bt_search a {
	display: block;
	padding: 2%;
	margin-right: 5px;
	width: 42.5%;
	height: 30px;
	color: #fff;
	background-color: #5d62aa;
	border-radius: 5px;
	float: right;
	text-align: center;
	text-decoration: none;
	position: relative;
}


.modal__content .content .title_cate {
	font-weight: bold;
	margin-bottom: 15px;
}
.modal__content .content .title_cate_sub {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 15px;
}
.modal__content .content .select_sp .box {
	margin-bottom: 20px;
}
.modal__content .content .select_sp .box .selectbox_text {
	width: 200px;
}


.modal__content .content ul {
	margin-bottom: 30px;
}
.modal__content .content ul li {
	font-size: 14px;
	padding-bottom: 5px;
	margin-bottom: 10px;
	list-style-type: none;
}

.modal__content .content.area ul li , .tab-content.listarea ul li {
	float: left;
	width: 48%;
}
.modal__content .content.area .ac-child:after , .tab-content.listarea  .ac-child:after {
   content: "";
   display: block;
   clear: both;
}


/* 条件を変える（一覧下部）タブ */

.tab-area_splist {
	width: 100%;
	margin: 0 auto;
}
.tab-area_splist .tab-btn{
	display:none; /*タブの切り替えを制御するラジオボタンを非表示に*/
}
.tab-area_splist .tab-list-wrap{
	padding:0; /*デフォルトの値をクリア*/
	margin: 0; /*デフォルトの値をクリア*/
	list-style-type:none; /*デフォルトの値をクリア*/
	display:flex; /*ボタンを横並びに*/
	justify-content:space-between; /*ボタンを横幅いっぱいに配置*/
}
 
.tab-area_splist .tab-list{
	display:block;
	width: 100%;
	padding: 8px 0;
	text-align:center;
	border-top:1px solid #5c63ab;
	border-left:1px solid #5c63ab;
	border-right:1px solid #5c63ab;
	border-bottom: solid 0px #ff0000;
	border-radius: 4px 4px 0 0;
	color: #333;
	background:#ffffff;
	box-sizing:border-box; /*borderの値を横幅に含める*/
	cursor:pointer; /*オンマウス時にカーソルを指の形に*/
}
 
.tab-area_splist #tab-btn1:checked ~ .tab-list-wrap #tab-list1,
.tab-area_splist #tab-btn2:checked ~ .tab-list-wrap #tab-list2,
.tab-area_splist #tab-btn3:checked ~ .tab-list-wrap #tab-list3{


	color: #fff;
	background: #5c63ab;

}
.tab-area_splist .tab-content{
	padding:20px 0;
	display:none; /*初期状態を非表示に*/
}
.tab-area_splist #tab-btn1:checked ~ .tab-content-wrap #tab-content1,
.tab-area_splist #tab-btn2:checked ~ .tab-content-wrap #tab-content2,
.tab-area_splist #tab-btn3:checked ~ .tab-content-wrap #tab-content3{
	display: block;/*対応するボタンにチェックが入ったときに表示*/
}

.tab-area_splist ul.tab-list-wrap {
	margin: 0;
	padding: 0;
}
.tab-area_splist ul.tab-list-wrap li {
	margin: 0;
	padding: 0;
	width: 32%;
}
/* 条件を変える（一覧下部）タブ end */