@charset "utf-8";
/* 返礼品一覧のcss */

#pagettl_wrap {
	background: url(../img/common/ttlbg-item.jpg) no-repeat center;
	background-size: cover;
}

/*=========================================
		絞り込み検索
=========================================*/
#refine_wrap dl { vertical-align: top; }
#refine_wrap dt {
	border-bottom: 1px solid #141414;
    padding: 1.5rem 1rem;
    font-weight: bold;
    text-align: center;
	width: 100%;
}
#refine_wrap dd {
    padding: 1rem 0;
}
#refine_wrap #refine-items li {
    display: inline-block;
    float: left;
}
#refine_wrap #refine-items dd ul li a {
	font-weight: bold;
    text-align: center;
    padding: 0.8rem;
    border-radius: 50px;
}
#refine_wrap #refine-pri dd ul li a,
#refine_wrap #refine-pro dd ul li a { position: relative; }

/* 検索した条件 */
#conditions {
	padding: 1.5rem;
    border: 1px solid #ccc;
	margin-top: 3rem;
	font-size: 14px;
    font-size: 1.4rem;
}
#conditions dl:first-of-type {
	border-left: 0;
	padding-left: 0;
}
#conditions dl dt,
#conditions dl dd {
	display: inline-block;
	float: left;
}
#conditions dl dt { margin-right: 5px; }

@media screen and (min-width: 1000px) {
	/*#pagettl_wrap { background-attachment: fixed; }*/
	
	/*=========================================
			絞り込み検索
	=========================================*/
	#refine_wrap #refine-items li { 
		width: calc(25% - 8px);
		margin: 0.5rem 0 0.5rem 1rem;
	}
	#refine_wrap #refine-items li:nth-of-type(4n+1) { margin-left: 0; }
	#refine-pro, #refine-pri { padding-left: 30px; }
	
	/* 検索条件 */
	#conditions dl {
		display: inline-block;
		float: left;
		margin-right: 10px;
		border-left: 1px solid #ccc;
		padding-left: 10px;
		line-height: 1;
	}
	#conditions p {
		display: inline-block;
		float: left;
		line-height: 1;
	}
}

@media screen and (max-width: 999px) {
	/*=========================================
			絞り込み検索
	=========================================*/	
	#refine_wrap #refine-items li { 
		min-width: calc(50% - 5px);
		margin-top: 1rem; 
	}
	#refine_wrap #refine-items li:nth-of-type(odd) { margin-right: 10px; }
	
	/* 検索条件 */
	#conditions dl {
		clear: both;
		overflow: hidden;
		margin-top: 0.5rem;
	}
	#conditions dl:first-of-type { margin-top: 0; }
	#conditions p { margin-top: 0.5rem; }
}

@media screen and (min-width: 481px) {
	/*=========================================
			絞り込み検索
	=========================================*/	
	#refine_wrap #refine-items { width: 50% }
	#refine-pro, #refine-pri { padding-left: 20px; }
	#refine-pro dd ul, #refine-pri dd ul {
		overflow-y: scroll;
		height: 20rem;
		padding: 0 1rem;
	}
	#refine_wrap #refine-pri dd ul,
	#refine_wrap #refine-pro dd ul {
		font-size: 14px;
		font-size: 1.4rem;
	}
	#refine_wrap #refine-pri dd ul li,
	#refine_wrap #refine-pro dd ul li { line-height: 1.2; }
	#refine_wrap #refine-pri dd ul li,
	#refine_wrap #refine-pro dd ul li {
		margin: 1.5rem 0;
	}	
	#refine_wrap #refine-pri dd ul li a,
	#refine_wrap #refine-pro dd ul li a { padding-left: 10px; }	
	#refine_wrap #refine-pri dd ul li a:before,
	#refine_wrap #refine-pro dd ul li a:before {
		font-family: "Font Awesome 5 Pro";
		content: "\f105";
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		line-height: 1;
		font-size: 14px;
		font-size: 1.4rem;
		color: #141414;
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		font-weight: 500;
	}
}

@media screen and (max-width: 480px) {
	/*=========================================
			絞り込み検索
	=========================================*/
	#refine_wrap dl:first-of-type dt { border-top: 1px solid #ccc; }
	#refine_wrap dd { 
		border-bottom: 1px solid #ccc;
		padding: 1rem 0 2rem;
	}	
	#refine_wrap dl ul { background: none; }
	#refine_wrap #refine-pri dd ul li,
	#refine_wrap #refine-pro dd ul li {
		width: 100%;
		display: block;
		border-radius: 50px;
	}
	#refine_wrap #refine-pri dd ul li a,
	#refine_wrap #refine-pro dd ul li a { 
		border-radius: 50px;
		font-weight: bold;
	}
	#refine_wrap #refine-items li a { padding: 1rem; }
	#refine_wrap #refine-pri li a,
	#refine_wrap #refine-pro li a { padding: 1rem 1.5rem; }
	#refine_wrap #refine-pri dd ul li::before,
	#refine_wrap #refine-pro dd ul li::before { 
		left: inherit;
		right: 20px;
	}
	#refine_wrap #refine-pri dd ul li::before,
	#refine_wrap #refine-pro dd ul li::before {
		width: 6px;
		height: 6px;
	}
	#refine_wrap #refine-pri ul li,
	#refine_wrap #refine-pro ul li { margin: 1rem 0; }
	#refine_wrap #refine-pri ul li:first-of-type,
	#refine_wrap #refine-pro ul li:first-of-type { margin-top: 1rem; }
	#refine_wrap #refine-pri dd ul li a:after,
	#refine_wrap #refine-pro dd ul li a:after {
		font-family: "Font Awesome 5 Pro";
		content: "\f105";
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		line-height: 1;
		font-size: 14px;
		font-size: 1.4rem;
		color: #fff;
		position: absolute;
		z-index: 2;
		top: 50%;
		right: 15px;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		font-weight: 500;
	}
}

/*=========================================
		cssハック
=========================================*/
@media all and (-ms-high-contrast: none) { /* IE10,11用 */
    #pagettl_wrap {
		/*background: url(../img/common/ttlbg-item.jpg) no-repeat top 34% center;*/
		background: url(../img/common/ttlbg-item.jpg) no-repeat center 34% center;
		background-attachment: none;
	}
}