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

/* サイドタイトル */
.side_box.custom_filter_nav_box .section_title h2 {
	margin-bottom: 10px;
}

/* フィルター大枠 */
.custom_filter_nav {
	padding: 0 10px 0;
}

/* 縦幅を制限してスクロール */
.inner_custom_filter_nav.vertical_limit {
	container-type: inline-size;
	max-height: 250px;
	overflow: auto;
	transition: .3s;
}

/* ul liリセット */
.custom_filter_list,
.custom_filter_list_item {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

/* フィルター一覧 */
.custom_filter_list {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

/* 各フィルター項目 */
.custom_filter_item {
	display: block;
	transition: .3s;
}
.inner_custom_filter_item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	position: relative;
	
}
.custom_filter_item:not(.custom_filter_color):hover {
	opacity: .5;
}

/* チェックボックス */
.custom_filter_item_box:has(.custom_filter_label) {
	width: calc(100% - 24px);
}
.custom_filter_item_box:has(input) {
	display: none;
}
.custom_filter_checkbox .inner_custom_filter_item::before {
	content: '';
	display: inline-block;
    width: 21px;
    height: 21px;
	border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, .2);
	white-space: nowrap;
	box-sizing: border-box;
	transition: .5s;
}
.custom_filter_checkbox .inner_custom_filter_item:has(:checked)::before {
    background-color: var(--template-color);
	border: 1.5px solid var(--template-color);
	transition: .5s;
}
.custom_filter_checkbox .inner_custom_filter_item:has(:checked)::after {
    position: absolute;
    top: 5px;
    left: 7px;
    transform: rotate(45deg);
    width: 6px;
    height: 9px;
    border: solid #FFF;
    border-width: 0 2px 2px 0;
    content: '';
	transition: .5s;
}

/* 黒背景：5,13 */
:is(.touch005,.touch013) .custom_filter_checkbox .inner_custom_filter_item::before,
html:not(.responsive):has(link[href*="layout005/style/template"],link[href*="layout013/style/template"]) .custom_filter_checkbox .inner_custom_filter_item::before {
	border-color: rgba(255, 255, 255, .3);
}

:is(.touch005,.touch013) .custom_filter_checkbox .inner_custom_filter_item:has(:checked)::before,
html:not(.responsive):has(link[href*="layout005/style/template"],link[href*="layout013/style/template"]) .custom_filter_checkbox .inner_custom_filter_item:has(:checked)::before {
    background-color: #F5F5F5;
	border-color: #F5F5F5;
}

:is(.touch005,.touch013) .custom_filter_checkbox .inner_custom_filter_item:has(:checked)::after,
html:not(.responsive):has(link[href*="layout005/style/template"],link[href*="layout013/style/template"]) .custom_filter_checkbox .inner_custom_filter_item:has(:checked)::after {
    border: solid #000;
	border-width: 0 2px 2px 0;
}

/* 背景あり：7,9,17,18,22,23 */
:is(.touch007,.touch009,.touch017,.touch018,.touch022,.touch023) .custom_filter_checkbox .inner_custom_filter_item::before,
html:not(.responsive):has(link[href*="layout007/style/template"],link[href*="layout009/style/template"],link[href*="layout017/style/template"],link[href*="layout018/style/template"],link[href*="layout022/style/template"],link[href*="layout023/style/template"]) .custom_filter_checkbox .inner_custom_filter_item::before {
	border: 1px solid rgba(0, 0, 0, .3);
}


.custom_filter_checkbox input {
    display: none;
}


/* フィルターラベル */
.custom_filter_item label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding: 5px 8px;
	font-weight: 500;
}

/* 商品数 */
.custom_filter_count {
	display: inline-block;
	margin-left: 5px;
	opacity: .9;
	font-size: 93%;
	font-weight: 400;
}

/* クリア/OKボタン /*/
.custom_filter_nav_box .custom_filter_action_buttons {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 15px 0 0;
}
.custom_filter_nav_box .custom_filter_nav:has(.custom_filter_ok_button) .custom_filter_action_buttons {
	justify-content: flex-end;
	inline-size: 100%;
}
.custom_filter_nav_box .custom_filter_clear_button,
.custom_filter_nav_box .custom_filter_ok_button {
	inline-size: var(--custom-filter-action-button-width, 64px);
	block-size: var(--custom-filter-action-button-height, 25px);
	padding: var(--custom-filter-action-button-padding, 0 10px);
	font-size: var(--custom-filter-action-button-font-size, 13px);
	box-sizing: border-box;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	line-height: 1;
	display: inline-flex
}


/* メインエリア   ============================ */
.item_search_custom_filter_box {
	gap: 4px;
}

.item_search_custom_filter_box.custom_toggle_box {
	display: block;
}

.sort_box .custom_filter_nav {
	padding: 0 0 5px;
}

.sort_box .custom_filter_nav:has(.custom_filter_selectbox) {
	padding: 5px;
}

.sort_box .custom_filter_list {
	gap: 5px;
	flex-direction: row;
	flex-wrap: wrap;
}

.sort_box .custom_filter_box_label {
	display: block;
}

.sort_box:has(.custom_filter_selectbox) .custom_filter_box_label {
	padding-top: 10px;
}
	
.responsive.ocnk022 .sort_box:has(.custom_filter_selectbox) .custom_filter_box_label {
	padding-top: 15px;
}

.sort_box .custom_filter_item {
	border-bottom: none;
}

.sort_box .custom_filter_item:not(.custom_filter_color):hover {
	background-color: transparent;
	opacity: .7;
}

.sort_item_label:not(.price_range_slider_separator,.price_range_slider_unit) {
	display: inline-block;
	min-width: 70px;
}

@media only screen and (width >= 840px)  {
	.sort_box .custom_filter_nav {
		padding: 5px;
		flex: 1;
	}
	
	.sort_box .custom_filter_box_label {
		padding-top: 10px;
	}
	
	.sort_item_label:not(.price_range_slider_separator,.price_range_slider_unit) {
		width: auto;
		min-width: 100px;
	}
}

/* 選択済みタグ一覧 */
.custom_filter_selected_box {
	padding: 15px 10px 10px;
}
.custom_filter_selected_list,
.custom_filter_selected_list_item {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.custom_filter_selected_list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.custom_filter_selected_list_item A {
	list-style-type: none;
	padding: 5px;
	margin: 0;
	background-color: #5555551A;
	border-radius: 5px;
}
:is(.touch005,.touch013) .custom_filter_selected_list_item A {
	background-color: #FFFFFF1A;
}
.use_hover .custom_filter_selected_list_item A:hover {
	opacity: .7;
}
.custom_filter_selected_list_item .fa {
	margin-left: 5px;
}


/* 開閉  ============================ */

/* サイド開閉時の余白調整 */
.responsive #container .side_box.custom_toggle_box,
.ocnk004.responsive #container .side_box.custom_toggle_box {
	margin-bottom: 10px;
}
.responsive #container .side_box.custom_toggle_box .custom_filter_nav {
	padding-bottom: 15px;
}
.ocnk004.responsive #container .side_box.custom_toggle_box .custom_filter_nav {
	padding-bottom: 30px;
}

.use_hover .side_box.custom_toggle_box .title_toggle_link:hover {
	opacity: .7;
}

/* メインエリア検索ソート開閉ボタン化 */
.sort_box.custom_toggle_box {
	padding: 2px 0 5px;
	margin-top: 0;
}
.sort_box.custom_toggle_box .title_toggle_link {
	position: relative;
	display: block;
	padding: 10px 5px;
}
.sort_box.custom_toggle_box .title_toggle_link:hover {
	opacity: .7;
	background-color: rgb(from var(--template-color) r g b / 0.05);
}
.sort_box .title_toggle_link .right_side_nav_icon {
	display: inline-block;
	position: absolute;
	top: 20px;
	right: 20px;
	bottom: auto;
}
.sort_box.custom_toggle_box .custom_filter_box_label {
	padding: 0;
}



/* html5のみ   ============================ */

/* チェックボックスチェック時サイズ */
html:not(.responsive) .custom_filter_checkbox .inner_custom_filter_item:has(:checked)::after {
    width: 4px;
    height: 8px;
	top: 4px;
}

/* チェックボックスラベル */
html:not(.responsive) .custom_filter_item label {
	font-weight: 600;
}

/* 開閉 */
/* サイドアイコン */
html:not(.responsive) .side_box .title_toggle_link .toggle_icon {
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 12px;
	margin-top: -12px;
}

/* sort内divの罫線リセット */
html:not(.responsive) .item_search_custom_filter_box :is(div:not(.color_block), li.custom_filter_list_item) {
	border: none!important;
}

/* 検索ソート各リスト */
html:not(.responsive) .item_search_custom_filter_box .custom_filter_list .custom_filter_list_item {
	width: calc((100% - 10px) / 3)!important;
}

@media only screen and (width >= 1400px)  {
	html:not(.responsive) .item_search_custom_filter_box .custom_filter_list .custom_filter_list_item {
		width: calc((100% - 15px) / 4)!important;
	}
}

/* sort内divの縦幅リセット */
html:not(.responsive) .sort:has(.item_search_custom_filter_box) div {
	min-height: unset!important;
}

/* sort内div商品数表示が小さすぎるため */
html:not(.responsive) .item_search_custom_filter_box .custom_filter_count {
	font-size: 12px;
	font-weight: 400;
	opacity: .9;
}

/* sort内タイトル、ソート項目左右並び */
html:not(.responsive) .sort.sort_vertical .inner_item_search_sort_box {
    grid-template-columns: max-content 1fr;
    align-items: start;
    column-gap: 0;
    display: grid;
	padding: 10px;
	padding-left: 15px;
	border: none;
}

/* sort内タイトル */
html:not(.responsive) .sort.sort_vertical .inner_item_search_sort_box .item_search_title {
	font-weight: 600;
	font-size: 108%;
	white-space: nowrap;
    align-items: center;
    min-block-size: 36px;
    display: inline-flex;
}

html:not(.responsive) .sort.sort_vertical .sort_box.custom_toggle_box .inner_item_search_sort_box {
    display: block;
	padding: 3px 5px 0;
	padding-left: 10px;
}

html:not(.responsive) .sort.sort_vertical .sort_box.custom_toggle_box .inner_item_search_sort_box .item_search_title {
    min-block-size: unset;
    display: inline-block;
}

/* sort内ボタンアイコン */
html:not(.responsive) .sort_box .title_toggle_link .toggle_icon {
	position: absolute;
    top: 10px;
    right: 10px;
}



/* commonに追加分   ============================ */

.inner_toggle_closed .custom_toggle_area {
	padding: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* アイコン動作 */
/* レスポンシブ */
.inner_toggle_closed .title_toggle_link .right_side_nav_icon {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    -webkit-transition: -webkit-transform 0.2s linear;
    transition: transform 0.2s linear;
}

.use_hover .inner_toggle_closed .title_toggle_link:hover .right_side_nav_icon {
    -webkit-transform: rotate(0deg) scale(1.2);
    transform: rotate(0deg) scale(1.2);
}

.inner_toggle_opened .title_toggle_link .right_side_nav_icon {
    -webkit-transform: rotate(180deg) scale(1);
    transform: rotate(180deg) scale(1);
    -webkit-transition: -webkit-transform 0.2s linear;
    transition: transform 0.2s linear;
}

.use_hover .inner_toggle_opened .title_toggle_link:hover .right_side_nav_icon {
    -webkit-transform: rotate(180deg) scale(1.2);
    transform: rotate(180deg) scale(1.2);
}

/* html5 */
.custom_toggle_closed .title_toggle_link .toggle_icon {
	 -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: -webkit-transform 0.2s linear;
    transition: transform 0.2s linear;
}

.use_hover .custom_toggle_closed .title_toggle_link:hover .toggle_icon {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.custom_toggle_opened .title_toggle_link .toggle_icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: -webkit-transform 0.2s linear;
    transition: transform 0.2s linear;
}

.use_hover .custom_toggle_opened .title_toggle_link:hover .toggle_icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}



/* テンプレ用  ============================ */

/* 開閉テンプレ調整 */

/* レスポンシブ32以降の開閉アイコン　+-に置き換え */
:is(.touch032,.touch_modern) .inner_toggle_closed .title_toggle_link .fa-chevron-down:before {
    content: "\e90a";
}
:is(.touch032,.touch_modern) .inner_toggle_opened .title_toggle_link .fa-chevron-down:before {
    content: "\e908";
}

/* レスポンシブ/html5　開閉アイコン色位置 */

/* レスポンシブ */
/* 21番 */
.responsive.touch021 .side_box .section_title .title_toggle_link .right_side_nav_icon {
	margin-top: -25px;
	right: 20px;
}
/* 22番 */
.responsive.touch022 .side_box .section_title .title_toggle_link .right_side_nav_icon {
	right: 15px;
}
/* 23番 */
.responsive.touch023 #container .side_box .section_title .title_toggle_link .right_side_nav_icon {
	margin-top: 5px;
	right: 15px;
	color: #FFF;
}
/* 33番 */
.responsive.touch033 #container .side_box .section_title .title_toggle_link .right_side_nav_icon {
	margin-top: 0px;
}
/* 36番 */
.responsive.touch036 #container .side_box .section_title .title_toggle_link .right_side_nav_icon {
	margin-top: -20px;
}

/* HTML5 */
/* 1番/2番/3番 */
html:not(.responsive):has(link[href*="layout001/style/template"]) .side_box .section_title .title_toggle_link .toggle_icon,
html:not(.responsive):has(link[href*="layout002/style/template"]) .side_box .section_title .title_toggle_link .toggle_icon,
html:not(.responsive):has(link[href*="layout003/style/template"]) .side_box .section_title .title_toggle_link .toggle_icon {
	filter: brightness(0) invert(1);
}
/* 7番 */
html:not(.responsive):has(link[href*="layout007/style/template"]) .side_box .section_title .title_toggle_link .toggle_icon {
	margin-top: -14px;
}
/* 8番 */
html:not(.responsive):has(link[href*="layout008/style/template"]) .side_box .section_title .title_toggle_link .toggle_icon {
	margin-top: -7px;
}
/* 12番 */
html:not(.responsive):has(link[href*="layout012/style/template"]) .side_box .section_title .title_toggle_link .toggle_icon {
	filter: brightness(0) invert(0);
	margin-top: -10px;
}
/* 17番/18番/ */
html:not(.responsive):has(link[href*="layout017/style/template"]) .title_toggle_link .toggle_icon,
html:not(.responsive):has(link[href*="layout017/style/template"]) .search_sort_title,
html:not(.responsive):has(link[href*="layout018/style/template"]) .title_toggle_link .toggle_icon,
html:not(.responsive):has(link[href*="layout018/style/template"]) .search_sort_title {
	filter: brightness(0) invert(0);
}
/* 21番 */
html:not(.responsive):has(link[href*="layout021/style/template"]) .side_box .section_title .title_toggle_link .toggle_icon {
	margin-top: -25px;
}
/* 23番 */
html:not(.responsive):has(link[href*="layout023/style/template"]) .side_box .section_title .title_toggle_link .toggle_icon {
	margin-top: 5px;
	filter: brightness(0) invert(1);
}



/* レスポンシブ/html5　6番/8番/9番/10番 余白調整、サイドエリア左右に5pxあるテンプレ */
:is(.touch006,.touch008,.touch009,.touch010) .side_box .custom_filter_nav,
:is(html:not(.responsive):has(link[href*="layout006/style/template"],link[href*="layout008/style/template"],link[href*="layout009/style/template"],link[href*="layout010/style/template"])) .side_box .custom_filter_nav {
	padding: 0 5px 0;
}

:is(html:not(.responsive):has(link[href*="layout006/style/template"],link[href*="layout008/style/template"],link[href*="layout009/style/template"],link[href*="layout010/style/template"])) .side_box .custom_filter_nav:has(.colorpicker_list) {
	padding: 0;
}


/* チェック時の色 */
.touch001,html:not(.responsive):has(link[href*="layout001/style/template"]) {
--template-color: #0166FF;
}
.touch002,html:not(.responsive):has(link[href*="layout002/style/template"]) {
--template-color: #785B4D;
}
.touch003,html:not(.responsive):has(link[href*="layout003/style/template"]) {
--template-color: #006CD8;
}
.touch004,html:not(.responsive):has(link[href*="layout004/style/template"]) {
--template-color: #000000;
}
.touch005,html:not(.responsive):has(link[href*="layout005/style/template"])  {
--template-color: #F5F5F5;
}
.touch006,html:not(.responsive):has(link[href*="layout006/style/template"])  {
--template-color: #87654E;
}
.touch007,html:not(.responsive):has(link[href*="layout007/style/template"])  {
--template-color: #971051;
}
.touch008,html:not(.responsive):has(link[href*="layout008/style/template"])  {
--template-color: #0088CC;
}
.touch009,html:not(.responsive):has(link[href*="layout009/style/template"])  {
--template-color: #008C00;
}
.touch010,html:not(.responsive):has(link[href*="layout010/style/template"])  {
--template-color: #0C68C4;
}
.touch011,html:not(.responsive):has(link[href*="layout011/style/template"])  {
--template-color: #000000;
}
.touch012,html:not(.responsive):has(link[href*="layout012/style/template"])  {
--template-color: #000000;
}
.touch013,html:not(.responsive):has(link[href*="layout013/style/template"])  {
--template-color: #F5F5F5;
}
.touch014,html:not(.responsive):has(link[href*="layout014/style/template"])  {
--template-color: #1D8BD9;
}
.touch015,html:not(.responsive):has(link[href*="layout015/style/template"])  {
--template-color: #FF2626;
}
.touch016,html:not(.responsive):has(link[href*="layout016/style/template"])  {
--template-color: #00BF60;
}
.touch017,html:not(.responsive):has(link[href*="layout017/style/template"])  {
--template-color: #4C1F10;
}
.touch018,html:not(.responsive):has(link[href*="layout018/style/template"])  {
--template-color: #000000;
}
.touch019,html:not(.responsive):has(link[href*="layout019/style/template"])  {
--template-color: #D713D7;
}
.touch020,html:not(.responsive):has(link[href*="layout020/style/template"])  {
--template-color: #000000;
}
.touch021,html:not(.responsive):has(link[href*="layout021/style/template"])  {
--template-color: #333333;
}
.touch022,html:not(.responsive):has(link[href*="layout022/style/template"])  {
--template-color: #949487;
}
.touch023,html:not(.responsive):has(link[href*="layout023/style/template"])  {
--template-color: #000000;
}
.touch024 {
--template-color: #000000;
}
.touch025 {
--template-color: #59493F;
}
.touch026 {
--template-color: #000000;
}
.touch027 {
--template-color: #000000;
}
.touch028 {
--template-color: #8EC5B9;
}
.touch029 {
--template-color: #000000;
}
.touch030 {
--template-color: #000000;
}
.touch031 {
--template-color: #000000;
}
.touch032 {
--template-color: #000000;
}
.touch033 {
--template-color: #000000;
}
.touch034 {
--template-color: #333333;
}
.touch035 {
--template-color: #000000;
}
.touch036 {
--template-color: #555555;
}
.touch037 {
--template-color: #000000;
}
.touch038 {
--template-color: #000000;
}