// ==================================================
// refine
// ==================================================
.refine {
	margin: 40px 0;
  background: #fff;
  position: relative;
	* {
		// @include fs(14);
		user-select: none;
	}
	.lead {
		@include fs(14);
	}
	.inputbox {
		background: #F4F4F4;
		padding: 10px 20px;
		margin-bottom: 10px;
		text-align: center;
	}
	table {
		margin-bottom: 0.8em;
	}
	th, td {
		border-color: #e9e9e9;
		border-left: none;
		border-right: none;
	}
	th {
		background: $silver;
		min-width: 10em;
	}
	td {
		padding-left: 2em;
		padding-right: 0;
		ul {
			@include clearfix;
		}
		li {
			width: 20%;
			margin-bottom: 20px;
			margin: 0.4em 0;
			float: left;

		}
		hr {
			margin: 0.4em 0;
		}
	}

	b {
		color: $darkgrey;
	}
	small {
		@include fs(12);
	}
	// form parts
	// ----------------------------------------
	.btn {
		display: inline-block;
		cursor: pointer;
		text-align: center;
		background: $grey;
		padding: 0.3em 1em 0.2em;
		@include fs(16);
		font-weight: bold;
		border: none;
		border-radius: 0.2em;
		color: $white;
		@include Ease;
		@include fontAwesome('\f00d',rgba($white,0.5),1.8rem);
		&:hover {
			background: $lightgrey;
		}
		&_submit {
			background: LightSeaGreen;
			@include fontAwesome('\f002',rgba($white,0.5),1.8rem);
			&:hover {
				background: MediumTurquoise;
			}
		}
	}
	input[type='checkbox'],
	input[type='radio'] {
		@include opacity(0);
		position: absolute;
		outline: none;
		cursor: pointer;
		zoom: 1;
		width: 22px;
		height: 22px;
		& + label {
			line-height: 22px;
			display: inline-block;
			vertical-align: middle;
			padding-left: 30px;
			cursor: pointer;
			background-repeat: no-repeat;
			background-size: 22px auto;
			background-position: 0 -100px;

			color: $darkgrey;
			cursor: pointer;
			&:hover {
				background-position: 0 -400px;
			}
		}
		&:checked + label {
			background-position: 0 0;
		}
		&:disabled + label {
			background-position: 0 -200px;
			cursor: no-drop;
			color: #CCCCCC;
		}
		&:disabled:checked + label {
			background-position: 0 -300px;
		}
	}
	input[type='checkbox'] + label {
		background-image: url(/user_data/packages/default/img/common/_part-checkbox.png);
	}
	input[type='radio'] + label {
		background-image: url(/user_data/packages/default/img/common/_part-radio.png);
	}
	select {
		cursor: pointer;
		-webkit-appearance: button;
		-moz-appearance: button;
		appearance: button;
		border-radius: 3px;
		border: 1px solid #D9D9D9;
		font-size: 12px;
		padding: 0.4em 0.8em;
		background-image: url(/user_data/packages/default/img/common/_part-select.png);
		background-size: 18px auto;
		background-repeat: no-repeat;
		background-position: right center;
		margin-bottom: 0;
	}
	select::-ms-expand {
		display: none;
	}
}
// tabswitch
// ----------------------------------------
.tabswitch {
	margin-top: 40px;
	ul {
		@include clearfix;
		border-bottom: 2px solid LightSeaGreen;
	}
	li {
		cursor: pointer;
		float: left;
		background: $silver;
		color: $grey;
		font-weight: bold;
		border-bottom: none;
		padding: 0.2em 2em 0;
		margin-right: 2px;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		@include fs(16);
		@include Ease;
		&:hover {
			background: MediumTurquoise;
			color: $white;
		}
		&.active {
			background: LightSeaGreen;
			color: $white;
			cursor: default;
		}
	}
}
#detail_butsudan,
#detail_butsugu,
#detail_chouchin {
	margin-top: 10px;
	.lead {
		margin-bottom: 10px;
	}
}

#detail_butsugu,#detail_chouchin {
	// display: none;
}
@include ltMD {};
@include ltSM {
	.refine {
		td {
			li {
				width: 25%;
			}
		}
	}
};
@include ltXS {};
@include ltXXS {};
// ==================================================
// search erea
// ==================================================
#detail_butsudan label:before{
	content: "";
    background-size: contain;
    background-repeat: no-repeat;
    width: 140px;
    height: 70px;
    display: block;
    position: absolute;
	left: 25px;
	top: -24px;
}
#detail_butsugu tr:first-child label:before,#detail_chouchin label:before{
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    width: 150px;
    height: 75px;
    display: block;
    position: absolute;
	left: 30px;
	top: -26px;
}

#detail_butsudan td li{
		height:70px;
}

#detail_butsudan td li input[type='checkbox']{
	margin-top: 24px;
}

#detail_butsugu tr:first-child td li input[type='radio'],#detail_chouchin td li input[type='radio']{
	margin-top: 26px;
}


#detail_butsugu tr:first-child td li,#detail_chouchin td li{
	width: 20%;
	margin-bottom: 10px;
	height: 75px;
}





#detail_butsudan label,#detail_butsugu label,#detail_chouchin label{
	position: relative;
}
	
#detail_butsudan input[type='checkbox']+label, #detail_butsudan input[type='radio']+label{
	padding-left: 30px;
	margin-top: 24px;
}

#detail_butsugu tr:first-child input[type='checkbox']+label, #detail_butsugu tr:first-child input[type='radio']+label{
	padding-left: 30px;
	margin-top: 34px;
}

#detail_chouchin input[type='checkbox']+label, #detail_chouchin input[type='radio']+label{
	padding-left: 30px;
	margin-top: 34px;
}


#detail_butsugu {
	width: 100%;
	overflow: hidden;
}

.items_list_grid_wrap {
	padding:0 4%;
	.category_title {
		font-size: 18px;
		font-weight: bold;
	}
}
.items_list_grid_wrap ul{
	margin: 10px 0 0 0;
	display: grid;
	gap: 3vw;
	grid-template-columns: repeat(auto-fill, minmax(calc(50% - 3vw), auto));
	max-width: none;
}
.items_list_grid_wrap ul li {
	position: relative;
	border-radius: 4px;
	.label_flex{
		display: flex;
		align-items: center;
		background: #F4F4F4;
		border-radius: 4px;
		transition: background-color 250ms ease;
		&:hover{
			background: #20b2aa;
			> label{
				color: #fff;
				font-weight: bold;
			}
		}
	}
	&.active {
		> .label_flex{
			background: #20b2aa;
			> label{
				color: #fff;
				font-weight: bold;
			}
		}
	}

	.childrens_wrap {
		position: absolute;
		top:-9999px;
		left: 0;
		width: 100%;
		z-index: 1;
		padding: 15px 4vw;
		margin: 0;
		display: grid;
		opacity: 0;
    transition: opacity .4s ease;
		&.active {
			top:50px;
			opacity: 1;
			background: #20b2aa;
		}
		li {
			.label_flex {
				border: 1px solid #CECECE;
				background: #fff;
			}
			&:hover {
				background: #E1F2F1;
				label {
					color:#333333;
					opacity: .8;
				}
			}
		}
	}
}
.items_list_grid_wrap ul li input[type="radio"] {
	position: absolute;
	opacity: 0;
	+ label {
		width: 100%;
		background-image: none;
		padding:0;
		display: flex;
		align-items: center;
		height:50px;
		padding: 0 4% 0 6%;
		span {
			flex-shrink: 0;
		}
		.radio_icon_wrap + span {
			flex-shrink: 1;
			font-size: 10px;
			line-height: 1.4;
			font-size: 10px !important;
		}
		.radio_icon_wrap{
			width:26%;
			max-width: 50px;
			margin: 0 6px;
		}
		img {
			width: 100%;
			height: auto;
		}
		.radio_style_circle {
			background-image: none !important;
			background: #cecece;
			border-radius: 100%;
			border: 1px solid darken(#f4f4f4, 25%);
			box-shadow: inset 0 0 0 2px #f4f4f4;
			display: block;
			width: 13px;
			height: 13px;
			position: relative;
			cursor: pointer;
			transition: background-color 250ms ease;
		}
	}
	&:checked,
	&:hover {
		+ label {
			.radio_style_circle {
				background-color: #20b2aa;
				box-shadow: inset 0 0 0 2px #f4f4f4;
			}
		}
	}
	&:focus {
		+ label {
			.radio_style_circle {
				outline: none;
				border-color: #20b2aa;
			}
		}
	}
}

.refine .shuuha_wrap {
	background: #F4F4F4;
	margin: 15px 0 10px;
	padding: 2rem 3vw 4rem;
  ul li {
    padding: 0 22px 0 0;
  }
  label {
    font-size: 16px;
  }
  .refine input[type='checkbox']+label, 
  .refine input[type='radio']+label {
    line-height: 22px;
    display: inline-block;
    vertical-align: middle;
    padding-left: 30px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 22px auto;
    background-position: 0 -100px;
    color: #333;
    cursor: pointer;
  }
  .ui-fullsize .ui-btn-inner, .ui-fullsize .ui-btn-inner{
    padding: 0 20px 0 45px;
  }
	.shuuha_title {
		font-size: 18px;
		font-weight: bold;
		padding:0 0 .5em;
	}
	.shuha_subtittle {
		font-size: 16px;
	}
	.east_west, .shuuha_checks ul {
		display: flex;
	}
  .es_wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
	.east_west {
		padding: 0 0 0 1em;
		align-items: center;
	}
	.shuuha_checks {
		border-top: 1px solid #666666;
		margin: .5em 0 0;
		padding: .5em 0 0;
	}
	.shuuha_checks ul {
		flex-wrap: wrap;
		width:100%;
	}
	.shuuha_checks ul li {
		display: flex;
		align-items: center;
		position: relative;
    margin: 2em 0 0 0;
	}
}

.refine {
  .inputbox {
		background: #E1F2F1;
		padding: 10px 0;
		margin-bottom: 0;
		text-align: center;
	}
  .btn_area{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(50% - 3vw), auto));
    gap: 3vw;
    .btn_clear_white,
      .btn_search_green {
      height: 45px;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
    }
    .btn_search_green {
      background: #20B2AA;
      color: #fff;
    }
    .btn_clear_white {
      background: #fff;
    }
  }
	.search_bar_wrap {
		height: 80px;
	}
	.search_bar_sticky.active {
		position: fixed;
		bottom:0;
		left:0;
		width: 100%;
		z-index: 500;
		background: rgba(225,242,241,.7);
	}
}


// Text here
// ----------------------------------------
@include ltMD {
	#detail_butsudan label:before{
		width: 100px;
		top:-13px;
	}
	#detail_butsugu tr:first-child label:before, #detail_chouchin label:before{
		width: 100px;
		top: -20px;
	}
};
@include ltSM {};
@include ltXS {};
@include ltXXS {};



/* top アコーディオンの中のスタイル調整 */
#category_area {
	.detail_butsudan {
		margin-bottom:0;
	}
	.items_list_grid_wrap ul {
		gap:0;
		li {
			border-radius: 0;
		}
		li:nth-child(2n) {
			border-left: 1px solid #e9e9e9;
		}
		li .label_flex,
		li .label_flex:hover {
			background: #fff;
			font-weight: normal;
		}
		li .label_flex:hover>label{
			font-weight: normal;
		}
	}
	#detail_butsugu .items_list_grid_wrap {
		padding: 0;
	}

	.cat_list li{
		#js_butsugu_items a:before{
			display: none;
		}
		#js_butsugu_items a {
			padding:0;
			cursor: pointer;
		}
		#js_butsugu_items img {
			position: relative;
			margin:0;
		}
		#js_butsugu_items span.radio_style_circle {
			padding: 0;
			background: #b4b4b4;
			border: 1px solid #b4b4b4;
			display: none;
		}
		#js_butsugu_items span.radio_icon_wrap {
			padding: 0;
			border: none;
			margin: 0 6px 0 0;
		}
		#js_butsugu_items span.radio_icon_wrap+span {
			padding: 0;
			background:inherit;
			border: none;
			padding:0 1.5em 0 0;
		}
		#detail_butsugu span::after {
			display: none;
		}
	}

}