@charset "UTF-8";
/* CSS Document */
/* Y・PiECE EC 商品一覧ページ専用 */


/******************************************************

PC設定 1200px以上の場合に適用

*******************************************************/

.yp-listlayout {
	display: grid;
	grid-template-columns: 240px 1fr;
	}

/* ===== サイドバー ===== */

.yp-sidebar {
	border-right: 1px solid #e7eaf0;
	padding: 32px 24px 32px 0;
	}

.yp-filter {
	margin-bottom: 30px;
	}

.yp-filter:last-child {
	margin-bottom: 0;
	}

.yp-filter__title {
	font-weight: 600;
	color: #1A2A5E;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid #F5CD1A;
	}

.yp-catselect {
	display: none;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #e7eaf0;
	border-radius: 2px;
	background: #fff;
	color: #1A2A5E;
	}

.yp-catfilter__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	color: #555;
	border-bottom: 1px solid #f0f2f5;
	text-decoration: none;
	}

.yp-catfilter__item--active {
	color: #1A2A5E;
	font-weight: 600;
	}

.yp-catfilter__count {
	font-size: 11px;
	color: #9aa3b2;
	background: #f5f7fa;
	padding: 1px 7px;
	border-radius: 10px;
	}

.yp-catfilter__item--active .yp-catfilter__count {
	color: #F5CD1A;
	background: #1A2A5E;
	}

.yp-searchbox {
	display: flex;
	gap: 8px;
	}

.yp-searchbox__input {
	flex: 1;
	height: 38px;
	border: 1px solid #e7eaf0;
	border-radius: 2px;
	padding: 0 10px;
	font-size: 13px;
	background: #f5f7fa;
	}

.yp-searchbox__btn {
	height: 38px;
	width: 38px;
	background: #1A2A5E;
	color: #fff;
	border: none;
	border-radius: 2px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	}

/* ===== 商品エリア ===== */

.yp-listmain {
	padding: 24px 32px;
	}

.yp-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e7eaf0;
	flex-wrap: wrap;
	gap: 12px;
	}

.yp-toolbar__count {
	color: #666;
	}

.yp-toolbar__count strong {
	color: #1A2A5E;
	font-weight: 600;
	}

.yp-toolbar__select {
	height: 38px;
	padding: 0 14px;
	border: 1px solid #e7eaf0;
	border-radius: 2px;
	color: #555;
	background: #fff;
	cursor: pointer;
	}

/* ===== 空状態 ===== */

.yp-empty {
	text-align: center;
	padding: 60px 0;
	}

.yp-empty__icon {
	font-size: 40px;
	margin-bottom: 16px;
	}

.yp-empty__title {
	font-weight: 600;
	color: #1A2A5E;
	margin-bottom: 8px;
	}

.yp-empty__txt {
	font-size: 13px;
	color: #9aa3b2;
	}

.yp-empty__btn {
	display: inline-block;
	margin-top: 20px;
	height: 44px;
	padding: 0 28px;
	background: #1A2A5E;
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	border-radius: 2px;
	line-height: 44px;
	text-decoration: none;
	}



/******************************************************

タブレットの設定 960px〜1199pxの場合に適用

*******************************************************/

@media screen and (max-width: 1199px){



}



/******************************************************

タブレットの設定 768px〜959pxの場合に適用

*******************************************************/

@media screen and (max-width: 959px){

.yp-listlayout {
	grid-template-columns: 1fr;
	}

.yp-sidebar {
	border-right: none;
	border-bottom: 1px solid #e7eaf0;
	}

.yp-listmain {
	padding: 24px 0;
	}

}



/******************************************************

SPの設定 767px以下の場合に適用

*******************************************************/

@media screen and (max-width: 767px){

.yp-sidebar {
	padding: 24px 0;
	}

.yp-catfilter__item {
	display: none;
	}

.yp-catselect {
	display: block;
	}

.container--list {
	padding-top: 30px;
	}

}