@charset "UTF-8";
/* カテゴリー css */
/*------------------------------------------------------------------------
Basic Layout (PC Layout)
------------------------------------------------------------------------*/
#header{
	border-bottom: none;
}
.search-header{
	background: #DCEEFE;
	position: relative;
	margin: 32px 0 0;
}
.search-header::before{
	content: "";
	display: block;
	height: 32px;
	width: 100vw;
	position: absolute;
	transform: rotate(180deg);
	top: -32px;
	left: 0;
	background: url(../img/after_wave01.svg) no-repeat top left/100% 100%;
}
/* .search-header-title{
	display: none;
} */
.search-header-mv img{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
}
.prodlist-brand{
	display: none;
}

/* ----------------------------------------------------------
カテゴリーナビ
---------------------------------------------------------- */
.category_nav ul{
	max-width: 1040px;
	display: flex;
	justify-content: space-between;
	padding: 20px;
	margin: 0 auto;
}
	.category_nav ul li{
		width: 24%;
		display: table;
		height: 50px;
		font-size: 16px;
		text-align: center;
	}

	.category_nav ul li a{
		background: #fff;
		border: 1px solid #0d5daa;
		border-radius: 5px;
		display: table-cell;
		vertical-align: middle;
		padding: 0 10px;
		line-height: 1.3;
	}
	.category_nav ul li.now a,
	.category_nav ul li:hover a,
	.category_nav ul li:active a{
		background: #0d5daa;
		color: #fff;
	}
	.category_nav ul li:first-child:hover a{
		background: #fff;
		color: #0d5daa;
		opacity: .7;
	}

.category_nav.col4 ul li{
	width: 23%;
}
	.category_nav.col4 ul li:first-child a{
		position: relative;
	}
	.category_nav.col4 ul li:first-child a::before,
	.category_nav.col4 ul li:first-child a::after{
		content: "";
		display: inline-block;
		vertical-align: middle;
		position: relative;
	}
	.category_nav.col4 ul li:first-child a:visite{
		color: #0d5daa;
	}
	.category_nav.col4 ul li:first-child a::before{
		background: url('../img/search_icon.png') no-repeat center/100%;
		width: 20px;
		height: 20px;
		position: absolute;
		transform: translateY(-50%);
		top: 50%;
		left: 20px;
	}
	.category_nav.col4 ul li:first-child a::after{
		margin: auto;
		width: 7px;
		height: 7px;
		border-top: 1px solid #d55151;
		border-right: 1px solid #d55151;
		-webkit-transform: rotate(45deg)translateY(-50%);
		transform: rotate(45deg)translateY(-50%);
		position: absolute;
		top: 50%;
		right: 20px;
	}
	.category_nav.col4 ul li a span.red{
		display: block;
		color: #d55151;
		text-indent: 0;
		text-align: center;
	}



/*================================ BREAK POINT ==================================
Tablet Layout
================================== BREAK POINT ==================================*/
@media screen and (max-width: 768px) {
	/* ----------------------------------------------------------
	カテゴリーナビ
	---------------------------------------------------------- */
	.category_nav ul{
		flex-wrap: wrap;
		padding: 20px 15px;
		margin-top: -10px;
	}
		.category_nav ul li{
			width: 47%;
			height: 45px;
			font-size: 1.3rem;
			line-height: 1.2;
			margin: 10px 0 0;
		}
		.category_nav ul li span{
			display: block;
		}
	.category_nav.col4 ul li:first-child a::before{
		position: absolute;
		transform: translateY(-50%);
		top: 50%;
		left: 3%;
		margin: 0;
	}
	.category_nav.col4 ul li:first-child a{
		padding: 0 25px;
	}
	.category_nav.col4 ul li:first-child a::after{
		position: absolute;
		top: 50%;
		right: 10px;
	}

}





/*================================ BREAK POINT ==================================
SP Layout
================================== BREAK POINT ==================================*/
@media screen and (max-width: 480px) {

	/* ----------------------------------------------------------
	カテゴリーナビ
	---------------------------------------------------------- */
	.category_nav.col4 ul{
		flex-wrap: wrap;
		margin-top: -8px;
	}
	.category_nav.col4 ul li{
		width: 49%;
		height: 40px;
		margin: 8px 0 0;
		font-size: 1.3rem;
	}
	.category_nav.col4 ul li:first-child a::after{
		width: 5px;
		height: 5px;
	}
}
/*================================ BREAK POINT ==================================
SP Layout
================================== BREAK POINT ==================================*/
@media screen and (max-width: 340px) {
	/* ----------------------------------------------------------
	カテゴリーナビ
	---------------------------------------------------------- */
	.category_nav.col4 ul li{
		font-size: 1.2rem;
	}
	.category_nav.col4 ul li:first-child a::before{
		width: 18px;
		height: 18px;
		left: 8px;
	}
}