@charset "UTF-8";

/* ----------------------------------
 CategoryList
---------------------------------- */
[data-browse-mode="P"] .wrapper { background: #F4F5F6;}
[data-browse-mode="S"] .pane-main { background: #F4F5F6;}

#page_categorylist .pane-path { padding: 20px 0 0 0; margin: 0 0 40px 0; background: transparent;}
#page_categorylist .path-list { display: flex; flex-wrap: nowrap;}
#page_categorylist .path-list li { vertical-align: middle; font-size: 12px; color: #BBBBBB;}
#page_categorylist .path-list li a { color: #000;}
#page_categorylist .path-list li.path-item-home { padding: 0 5px 0 15px; position: relative; color: #707070;}
#page_categorylist .path-list li.path-item-home a { color: #707070;}
#page_categorylist .path-list li.path-item-home::before { content: ''; width: 12px; height: 12px; display: block; background: url("../../../img/usr/common/v02/icon_home.png") left center / 12px 12px no-repeat; position: absolute; top: calc(50% - 6px); left: 0;}

#page_categorylist { padding: 0 100px 100px;}
#page_categorylist .design-header { padding: 12px 0 0 12px; margin: 0 0 40px 0; font-size : clamp(1.563rem, 1.188rem + 0.47vw, 1.75rem); font-weight: bold; text-align: left; line-height: 1.0; color: #111111; position: relative;}
#page_categorylist .design-header::before { content: ''; width: 4px; height: 12px; border-top: #CC0000 4px solid; background: #C7B062; display: block; position: absolute; top: 14px; left: 0;}

#page_categorylist .category-list {margin: 0 auto;display: flex;justify-content: left;flex-wrap: wrap;}
#page_categorylist .category-list li {width: calc((100% - (40px * 3)) / 6);margin: 0 20px 20px 0;background: #fff;box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.05);}
/*#page_categorylist .category-list li:nth-child(6n) { margin-right: 0;}*/
#page_categorylist .category-list li figure { text-align: center;}
#page_categorylist .category-list li figure img { width: 100%; height: auto; vertical-align: top;}
#page_categorylist .category-list li .desc  { padding: 0.8em 0 10px 0;}
#page_categorylist .category-list li .title {height: 2em;margin: 0 0 10px 0;font-size: 20px;font-size: clamp(1.25rem, 0.8333rem + 0.5556vw, 1.5rem);font-weight: bold;text-align: center;line-height: 1.4;display: flex;justify-content: center;align-items: center;}
#page_categorylist .category-list li .text  {height: 3em;padding: 0 clamp(1.25rem, 0.8333rem + 0.5556vw, 1.5rem) 10px clamp(1.25rem, 0.8333rem + 0.5556vw, 1.5rem);font-size: 12px;font-weight: 500;text-align: center;line-height: 1.6;display: flex;justify-content: center;align-items: center;}

@media only screen and (max-width: 1600px) {
	#page_categorylist { padding: 0 60px 100px;}	
}
@media only screen and (max-width: 1420px) {
	#page_categorylist { padding: 0 40px 100px;}	
	#page_categorylist .category-list li { width: calc((100% - (20px * 3)) / 4); margin: 0 20px 40px 0;}
	#page_categorylist .category-list li:nth-child(4n) { margin-right: 0;}
}
@media only screen and (max-width: 1300px) {
	#page_categorylist { padding: 0 20px 100px;}
}
@media only screen and (max-width: 1200px) {
	#page_categorylist { padding: 0 20px 100px;}
}
@media only screen and (max-width: 1100px) {
	#page_categorylist { padding: 0 15px 50px;}
	#page_categorylist .category-list { justify-content: space-between;}
	#page_categorylist .category-list li { width: calc(50% - 10px); margin: 0 0 40px 0 !important;}
	#page_categorylist .category-list li .title { font-size: 3.1vw;}
	#page_categorylist .category-list li .text { padding: 0 15px 10px 15px;}
}
@media only screen and (max-width: 750px) {
	#page_categorylist .category-list { justify-content: space-between;}
	#page_categorylist .category-list li { width: calc(50% - 6px); margin: 0 0 20px 0 !important;}
	#page_categorylist .category-list li .text { padding: 0 10px 10px 10px;}
}