@charset "utf-8";
/* CSS Document */

.custom_filter_list:has(.colorpicker_list) {
	display: block;
}

/* カラーピッカー一覧 */
.colorpicker_list,
.search_sort .sort_vertical .colorpicker_list {
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
	gap: 5px;
	min-height: unset;
}

.custom_filter_color {
	cursor: pointer;
}

/* カラーブロック */
.custom_filter_list:has(.colorpicker_list) .custom_filter_item {
	width: calc((100% - 20px) / 5);
	border: none;
}
html:not(.responsive) .side_box .custom_filter_list:has(.colorpicker_list) .custom_filter_item {
	width: calc((100% - 15px) / 4);
}

.sort_box .custom_filter_list:has(.colorpicker_list) .custom_filter_item {
	padding: 5px;
}

/* 各カラーブロック */
.color_block,
.search_sort .sort_vertical .colorpicker_list .color_block {
    width: 80%;
	margin: auto;
	min-height: unset;
	aspect-ratio: 1/1;
    background-color: var(--custom-bg-color, #000000);
    background-image: var(--custom-bgr-color, none);
    color: var(--custom-txt-color, #000000);
    border: 1px solid #FFF;
    border-radius: 100vmax;
    cursor: pointer;
    box-sizing: border-box;
	position: relative;
}

.custom_filter_color:hover .color_block,
.search_sort .sort_vertical .custom_filter_color:hover .color_block {
    border: 1px solid #000;
}

/* 白ブロック */
.colorpicker_list .custom-bgcolor-white,
.search_sort .sort_vertical .colorpicker_list .custom-bgcolor-white {
    border: 1px solid #E0DFE3;
    background-color: #FFFFFF;
}
.colorpicker_list .custom_filter_color:hover .custom-bgcolor-white,
.search_sort .sort_vertical .colorpicker_list .custom_filter_color:hover .custom-bgcolor-white {
    border: 1px solid #000;
}

/* 黒背景：5,13 */
:is(.touch005,.touch013) .color_block,
:is(html:not(.responsive):has(link[href*="layout005/style/template"]),html:not(.responsive):has(link[href*="layout013/style/template"])) .color_block {
	border: 1px solid #000!important;
}
:is(.touch005,.touch013) .custom_filter_color:hover .color_block,
:is(html:not(.responsive):has(link[href*="layout005/style/template"]),html:not(.responsive):has(link[href*="layout013/style/template"])) .custom_filter_color:hover .color_block {
	border: 1px solid #FFF!important;
}

/* 黒背景5,13の白ブロック */
:is(.touch005,.touch013) .colorpicker_list .custom-bgcolor-white,
:is(html:not(.responsive):has(link[href*="layout005/style/template"]),html:not(.responsive):has(link[href*="layout013/style/template"])) .colorpicker_list .custom-bgcolor-white {
	border: 1px solid #000!important;
	background-color: var(--custom-bg-color);
}
:is(.touch005,.touch013) .colorpicker_list .custom_filter_color:hover .custom-bgcolor-white,
:is(html:not(.responsive):has(link[href*="layout005/style/template"]),html:not(.responsive):has(link[href*="layout013/style/template"])) .colorpicker_list .custom_filter_color:hover .custom-bgcolor-white {
	border: 1px solid #FFF!important;
}

/* 黒背景5,13の黒ブロック */
:is(.touch005,.touch013) .colorpicker_list .custom-bgcolor-black,
:is(html:not(.responsive):has(link[href*="layout005/style/template"]),html:not(.responsive):has(link[href*="layout013/style/template"])) .colorpicker_list .custom-bgcolor-black {
	border: 1px solid #555!important;
    background-color: transparent;
}
:is(.touch005,.touch013) .colorpicker_list .custom_filter_color:hover .custom-bgcolor-black,
:is(html:not(.responsive):has(link[href*="layout005/style/template"]),html:not(.responsive):has(link[href*="layout013/style/template"])) .colorpicker_list .custom_filter_color:hover .custom-bgcolor-black {
	border: 1px solid #FFF!important;
}

/* チェック時 */
.colorpicker_list .color_block.current::after {
    position: absolute;
	top: 50%;
	left: 40%;
	transform: rotate(45deg) translate(-50%,-50%);
    width: 6px;
    height: 9px;
    border: solid #FFF;
    border-width: 0 2px 2px 0;
    content: '';
}


html:not(.responsive) .colorpicker_list .color_block.current::after {
	width: 4px;
	height: 8px;
	left: 35%;
}

html .sort_box .colorpicker_list .color_block.current::after {
	left: 30%;
}

/* 白ブロック */
.colorpicker_list .custom-bgcolor-white.current::after {
    filter: brightness(0);
    opacity: .7;
}

/* ラベル */
.custom_filter_color .custom_filter_label {
	display: block;
	margin: 5px 0 8px;
	text-align: center;
	font-size: 10px;
}
.custom_filter_color:hover .custom_filter_label {
	opacity: .7;
}


/* メインエリア開閉絞込み */

.sort_box .custom_filter_list .custom_filter_list_item {
	width: calc((100% - 5px) / 2);
}

.sort_box .custom_filter_list:has(.colorpicker_list) .custom_filter_item {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 5px;
	width: auto;
	min-width: 100px;
	border: none;
}
.sort_box .custom_filter_list:has(.colorpicker_list) .custom_filter_item .color_block {
	width: 22px;
	margin: 0;
}
.sort_box .custom_filter_label {
	margin: 0;
	font-size: 14px;
}

@media only screen and (width >= 600px)  {
	.responsive .sort_box .custom_filter_list .custom_filter_list_item {
		width: calc((100% - 10px) / 3);
	}
}

@media only screen and (width >= 840px)  {
	.responsive:not(.ocnk038).column_layout .sort_box .custom_filter_list .custom_filter_list_item {
		width: calc((100% - 5px) / 2);
	}
}

@media only screen and (width >= 1200px)  {
	.responsive.wide_layout .sort_box .custom_filter_list .custom_filter_list_item,
	.responsive.single_layout.ocnk028 .sort_box .custom_filter_list .custom_filter_list_item{
		width: calc((100% - 15px) / 4);
	}
	.responsive.single_layout .sort_box .custom_filter_list .custom_filter_list_item,
	.responsive:not(.ocnk038).column_layout .sort_box .custom_filter_list .custom_filter_list_item {
		width: calc((100% - 10px) / 3);
	}
}

@media only screen and (width >= 1400px)  {
	.responsive.ocnk028:not(.ocnk038).column_layout .sort_box .custom_filter_list .custom_filter_list_item {
		width: calc((100% - 15px) / 4);
	}
}



/* 色指定 */
.custom-bgcolor-white {
    --custom-bg-color: #FFFFFF;
}

.custom-bgcolor-black {
    --custom-bg-color: #000000;
}

.custom-bgcolor-gray {
    --custom-bg-color: #CCCCCC;
}

.custom-bgcolor-brown {
    --custom-bg-color: #9BA272;
}

.custom-bgcolor-beige{
    --custom-bg-color: #E0D1AD;
}

.custom-bgcolor-green {
    --custom-bg-color: #0AA055;
}

.custom-bgcolor-blue {
    --custom-bg-color: #277DFE;
}

.custom-bgcolor-purple {
    --custom-bg-color: #CB6CE5;
}

.custom-bgcolor-yellow {
    --custom-bg-color: #F7F710;
}

.custom-bgcolor-pink {
    --custom-bg-color: #FE7FCD;
}

.custom-bgcolor-red {
    --custom-bg-color: #FF2805;
}

.custom-bgcolor-orange {
    --custom-bg-color: #FFB932;
}

.custom-bgcolor-silver {
    --custom-bg-color: #000000;
	--custom-bgr-color: linear-gradient(45deg, #DADADA 0%, #ABABAB 50%, #DADADA 100%);
}

.custom-bgcolor-gold {
    --custom-bg-color: #000000;
	--custom-bgr-color: linear-gradient(45deg, #F4E5A4 0%, #DBB925 50%, #F4E5A4 100%);
}

.custom-bgcolor-other {
    --custom-bg-color: #000000;
    --custom-bgr-color: linear-gradient(45deg, #F77156 0%, #FFBE40 20%, #44FB5D 40%, #3BD4F8 65%, #B72FFF 100%);
}