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

/* ================================================================= */
/* サイド/メイン共通  */
/* ================================================================= */

/* スクロール設定時 */

.item_search_scroll_box .inner_custom_filter_nav {
	display: flex;
	flex-direction: column;
    max-height: 250px;
    overflow: auto;
    transition: .3s;
	scrollbar-width: thin;
	scrollbar-color: #00000066 #00000008;
}

.side_box .custom_filter_nav.item_search_scroll_box {
	padding-right: 0;
}

.side_box .custom_filter_nav.item_search_scroll_box .inner_custom_filter_nav {
	padding-right: 10px;
}


/* スクロールヒント */
@media only screen and (width <= 839px)  {
	
	/* 矢印ヒント配置基準 */
	.responsive .item_search_scroll_box.custom_filter_nav,
	.responsive .item_search_scroll_box .custom_filter_nav {
		scroll-timeline-name: --y;
		position: relative;
	}
	.responsive .item_search_scroll_box .inner_custom_filter_nav {
		scroll-behavior: smooth;
		/* スクロール進捗タイムライン */
		scroll-timeline-name: --y;
		scroll-timeline-axis: y;
	}
	
	/* 矢印ヒント */
	.filter_scroll_hint {
		position: absolute;
		width: 100%;
		height: 25px;
		top: 225px;
		right: 0;
		display: flex;
		justify-content: center;
		pointer-events: none;
		color: #333;
		opacity: 0; /* タイムライン未対応 or 非スクロール時は非表示 */
		background-color: rgb(from var(--template-side-color,#FFFFFF) r g b / 0.5);
	}
	
	/* メインエリア矢印ヒント */
	.sort_box .filter_scroll_hint {
		background-color: rgb(from var(--template-sort-color,#FFFFFF) r g b / 0.5);
	}
	
	/* 矢印アイコン */
	.filter_scroll_hint::before {
		content: "\e906";
		font-family: ocnkiconf !important;
		speak: never;
		font-style: normal;
		font-weight: 400;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-size: 20px;
		line-height: 1;
		animation: updown 1.6s ease-in-out infinite;
	}
	@keyframes updown {
		0%, 100% { 
			transform: translateY(2px);
			opacity: .9;
		}
		50% {
			transform: translateY(6px);
			opacity: 1;
		}
	}
	@media (prefers-reduced-motion: reduce) {
		.filter_scroll_hint::before {
			animation: none;
		}
	}
	
	/* Scroll-Driven Animations に対応している場合だけ有効化 */
	@supports (animation-timeline: scroll()) or (scroll-timeline-name: --dummy) {
		.filter_scroll_hint {
			/* スクロール進捗に同期して可視状態→不可視へ */
			animation-name: fadeHint;
			/* .scroller のスクロール進捗 */
			animation-timeline: --y;
			
			/* 0%→96%の間は 0% キーフレーム（=表示）を維持し、96%→100% で 1 まで進んでフェードアウト。範囲外は fill:bothで状態を保持。 */
			animation-range: 0% 96%;
			animation-duration: 1ms;
			animation-timing-function: linear;
			animation-fill-mode: both;
		}
		
		@keyframes fadeHint {
			/* まだ下に余地あり → 表示 */
			0% {
				opacity: 1;
			} 
			/* 末尾付近/末尾 → 消える */
			100% {
				opacity: 0;
			}
		}
	}
}

/* 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_list:has(.colorpicker_list) {
	padding: 5px 0;
}

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

}
/* マウスオーバー */
.use_hover .custom_filter_item:not(.custom_filter_color) .inner_custom_filter_item_label:hover :is(.custom_filter_label, .custom_filter_count),
html:not(.responsive) .custom_filter_item:not(.custom_filter_color) .inner_custom_filter_item_label:hover :is(.custom_filter_label, .custom_filter_count) {
    opacity: .7;
}

/* チェックボックス/ラベル */

/* 各チェックボックス：選択エリア */
.custom_filter_item label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding: 5px;
    font-weight: 500;
}

/* チェックボックス：通常背景 */
.custom_filter_checkbox .inner_custom_filter_item::before {
    content: '';
    display: inline-block;
    width: 21px;
	min-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-checkbox-color);
    border: 1px solid var(--template-checkbox-color);
    transition: .5s;
}

/* チェックボックス：チェックマーク */
.custom_filter_checkbox .inner_custom_filter_item:has(:checked)::after {
    position: absolute;
    top: 5px;
    left: 8px;
    transform: rotate(45deg);
    width: 6px;
    height: 9px;
    border: solid #FFF;
    border-width: 0 2px 2px 0;
    content: '';
    /*transition: .5s;*/
}

/* 各チェックボックス：フィルターラベル */
.custom_filter_item_box .custom_filter_label {
	line-height: 1.6;
}
.custom_filter_item_box:has(.custom_filter_label) {
    width: calc(100% - 24px);
}

/* 各チェックボックス：inputチェックボックスがある場合 */
.custom_filter_item_box:has(input) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}
.custom_filter_checkbox input {
    display: inline-block;
}

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

/* ================================================================= */
/* サイドエリア  */
/* ================================================================= */

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

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

/* 選択済みフィルタータグ一覧 */

/* 枠 */
.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;
}
/* 黒背景：5,13 */
:is(.layout005,.layout013) .custom_filter_selected_list_item A {
    background-color: #FFFFFF1A;
}
.use_hover .custom_filter_selected_list_item A:hover,
html:not(.responsive) .custom_filter_selected_list_item A:hover{
    opacity: .7;
}

/* アイコン */
.custom_filter_selected_list_item .fa {
    margin-left: 5px;
}


/* ================================================================= */
/* カテゴリ/グループチェックボックス表示  */
/* ================================================================= */

/* カテゴリ/グループ */
.custom_filter_nav .has_image_nav_label .custom_filter_item_box:has(.itemlist_categoryimage) {
	display: flex;
	gap: 5px;
	align-self: center;
	justify-content: flex-start;
}

/* カテゴリ/グループ画像 */
.custom_filter_nav .itemlist_categoryimage {
	width: 30px;
	height: 30px;
	min-width: 30px;
	margin: 0;
}

/* サブメニュー */
.custom_filter_nav .has_sub_menu .custom_filter_list {
	margin-left: 20px;
}
.custom_filter_nav .has_sub_menu.toggle_menu .custom_filter_list {
	overflow: hidden;
	opacity: 0;
	max-height: 0;
	transition: max-height 0.3s ease, opacity 0.2s ease;
}

.custom_filter_nav .has_sub_menu.toggle_menu.active .custom_filter_list {
	opacity: 1;
	max-height: inherit;
	margin-top: 5px;
	margin-bottom: 10px;
}

/* 各サブメニュー　※アイコン用に右に余白 */
.custom_filter_nav .has_sub_menu .custom_filter_item {
	position: relative;
	padding-right: 20px;
}

/* トグルアイコン */
.custom_filter_nav .has_sub_menu .right_side_nav_icon {
	position: absolute;
	top: 15px;
	right: 0;
}
.custom_filter_nav .has_sub_menu:has(.has_image_nav_label) .right_side_nav_icon {
	top: 20px;
}

/* 下部絞込みボタン */

.filter_btn_box :is(.form_btn, .global_btn) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

/* 順番をクリア｜絞込みに変更 */
.filter_btn_box .global_btn .btn_color_emphasis,
.filter_btn_box .global_btn:has(.btn_color_emphasis) {
	order: 2;
}

.filter_btn_box .global_btn .btn_color_common,
.filter_btn_box .global_btn:has(.btn_color_common) {
	order: 1;
}

/* 絞込みボタン枠 */
.filter_btn_box .inner_filter_btn_box {
	padding: 10px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	background-color: #FFFFFFE6;
}

/* 絞込みボタン：初期は非表示でsticky表示 */
.side_box.filter_btn_box {
	display: none;
	position: sticky;
	bottom: 0;
}

/* PCでも格納パーツ/HTML5固定幅：初期表示 */
.ocnk038.responsive .side_box.filter_btn_box {
	display: block;
}


/* 839px以下 */
@media only screen and (width <= 839px)  {
	
	/* スマートフォン、タブレットでは表示 */
	.side_box.filter_btn_box {
		display: block;
	}
	
	/* メインエリアは下部fixed */
	.sort_item .filter_btn_box {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
	}
}

/* 840px以上 */
@media only screen and (width >= 840px)  {
	
	.sort_item .filter_btn_box .inner_filter_btn_box {
		background-color: transparent;
	}

}

/* 画像有：チェックボックス/ラベル枠を5px下部 */
.has_image_nav_label .custom_filter_label {
	padding-top: 5px;
}

.custom_filter_checkbox:has(.has_image_nav_label) .inner_custom_filter_item:has(:checked)::after {
	top: 10px;
}

.custom_filter_checkbox:has(.has_image_nav_label) .inner_custom_filter_item::before,
.custom_filter_checkbox:has(.has_image_nav_label) .inner_custom_filter_item:has(:checked)::before {
	position: relative;
	top: 5px;
}

/* ================================================================= */
/* メインエリア  */
/* ================================================================= */

/* キーワード検索の余白調整 */
.sort_box.sort_category #sort_search {
	margin: 5px;
}

/* 各枠 ※marginをリセットしpaddingに追加 */
.sort_item:has(.item_search_custom_filter_box) .sort_box:not(.custom_toggle_box) {
	padding: 8px 5px;
	margin: 0;
}

.sort_item:has(.item_search_custom_filter_box) .global_btn {
	padding-top: 15px;
}

/* 各フィルター外側枠 */
.item_search_custom_filter_box {
    gap: 4px;
}

/* 各フィルター外側枠：開閉表示あり */
.item_search_custom_filter_box.custom_toggle_box {
    display: block;
}

/* フィルター枠：左右10pxをリセット下部に5px */
.sort_box .custom_filter_nav {
	width: 100%;
    padding: 0 0 5px;
	box-sizing: border-box;
}
.sort_box .custom_filter_nav:has(.custom_filter_selectbox) {
	width: auto;
}

/* フィルター枠：selectの場合 */
.sort_box .custom_filter_nav:has(.custom_filter_selectbox) {
    padding: 5px;
}

/* フィルタータイトルラベル */
.sort_box .custom_filter_box_label {
    display: block;
}
/* フィルタータイトルラベル：selectタグの場合 */
.sort_box:has(.custom_filter_selectbox) .custom_filter_box_label {
    padding-top: 10px;
}
/* フィルタータイトルラベル：カスタムパーツ22番指定時　※セレクトボックスが大きくなる */
.responsive.ocnk022 .sort_box:has(.custom_filter_selectbox) .custom_filter_box_label {
    padding-top: 15px;
}
/* フィルタータイトルラベル：価格絞込み以外 */
.sort_item_label:not(.price_range_slider_separator,.price_range_slider_unit) {
    display: inline-block;
    min-width: 70px;
}

/* フィルター一覧：縦積みを横並びに変更 */
.sort_box .custom_filter_list {
    gap: 5px;
    flex-direction: row;
    flex-wrap: wrap;
}
/*  フィルター一覧：各フィルター横幅 */
.responsive .sort_box .custom_filter_list .custom_filter_list_item {
    width: calc((100% - 5px) / 2);
}
/* 839px以下 */
@media only screen and (width <= 839px)  {
	.sort_item:has(.item_search_custom_filter_box) .sort_box:not(.custom_toggle_box) {
		padding: 10px 5px;
	}
	/* 最小1カラム */
	.responsive .sort_box .custom_filter_list.min_column1 .custom_filter_list_item {
		width: 100%;
	}
	/* 最小3カラム */
	.responsive .sort_box .custom_filter_list.min_column3 .custom_filter_list_item {
		width: calc((100% - 10px) / 3);
	}
}

/* 600px以上：3列 */
@media only screen and (width >= 600px)  {
    .responsive .sort_box .custom_filter_list .custom_filter_list_item {
        width: calc((100% - 10px) / 3);
    }
}
/* 840px以上：2列　※サイド有の場合、メインエリア横幅が狭い */
@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);
    }
}
/* 1000px以上：カスタムパーツ利用次第、サイド有無などで3列または4列 */
@media only screen and (width >= 1000px)  {
    .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);
    }
}
/* 1200px以上：カスタムパーツ利用次第で4列 */
@media only screen and (width >= 1200px)  {
	.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,
    .responsive.ocnk028:not(.ocnk038).column_layout .sort_box .custom_filter_list .custom_filter_list_item {
        width: calc((100% - 15px) / 4);
    }
}

/* 1400px以上：カスタムパーツ利用次第で5列 */
@media only screen and (width >= 1400px)  {
	.responsive.wide_layout.single_layout .sort_box .custom_filter_list .custom_filter_list_item,
	.responsive.wide_layout.ocnk038 .sort_box .custom_filter_list .custom_filter_list_item,
	.responsive.ocnk028:not(.ocnk038).column_layout .sort_box .custom_filter_list .custom_filter_list_item {
        width: calc((100% - 20px) / 5);
    }
}

/* touch_fullscreen用/1600px以上(※1カラム+ocnk028、ocnk028+ocnk038の場合のみ) */
@media only screen and (width >= 1600px)  {
	
	.responsive.single_layout.ocnk028 .sort_box .custom_filter_list .custom_filter_list_item,
	.responsive.wide_layout.ocnk028.ocnk038 .sort_box .custom_filter_list .custom_filter_list_item {
		width: calc((100% - 25px) / 6);
	}
	
	/* touch_fullscreen */
	.responsive:is(.single_layout, .wide_layout).touch_modern.touch_fullscreen .sort_box .custom_filter_list .custom_filter_list_item {
        width: calc((100% - 25px) / 6);
    }
}

@media only screen and (width >= 1800px)  {
	/* touch_fullscreen */
	.responsive:is(.single_layout, .wide_layout).touch_modern.touch_fullscreen .sort_box .custom_filter_list .custom_filter_list_item {
        width: calc((100% - 30px) / 7);
    }
}

@media only screen and (width >= 2000px)  {
	/* touch_fullscreen */
	.responsive:is(.single_layout, .wide_layout).touch_modern.touch_fullscreen .sort_box .custom_filter_list .custom_filter_list_item {
        width: calc((100% - 35px) / 8);
    }
}

/* 各フィルターラベル */
.sort_box .custom_filter_list .custom_filter_label {
    margin: 0;
    font-size: 14px;
}

@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;
    }
}


/* ================================================================= */
/* フィルター開閉処理  */
/* ================================================================= */

/* サイドエリア */
/* 閉じている時に余白が空きすぎる点を調整 */
.responsive:not(.touch020) #container .side_box.custom_toggle_box,
.ocnk004.responsive:not(.touch020) #container .side_box.custom_toggle_box {
    margin-bottom: 10px;
}
/* 開いている時の余白調整 */
.responsive #container .side_box.custom_toggle_box .custom_filter_nav {
    padding-bottom: 15px;
}
/* カスタムパーツ004「サイド/メインエリアのコンテンツ間余白変更」の時は30px */
.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: 1;
}
.use_hover .side_box.custom_toggle_box .title_toggle_link:hover .right_side_nav_icon {
	opacity: .5;
}

/* メインエリア */
/* 余白を調整 */
.sort_box.custom_toggle_box {
    padding: 2px 0;
    margin: 0;
}
.sort_box.custom_toggle_box .custom_toggle_area {
    padding: 0 5px 13px;
}
/* 開閉ボタン */
.sort_box.custom_toggle_box .title_toggle_link {
    position: relative;
    display: block;
    padding: 10px 5px;
}
.use_hover .sort_box.custom_toggle_box .title_toggle_link:hover,
html:not(.responsive) .sort_box.custom_toggle_box .title_toggle_link:hover {
    opacity: .7;
    background-color: rgb(from var(--template-checkbox-color) r g b / 0.05);
}

/* フィルタータイトルラベル */
.sort_box.custom_toggle_box .custom_filter_box_label {
    padding: 0;
}

/* アイコン */
.sort_box .title_toggle_link .right_side_nav_icon {
    display: inline-block;
    position: absolute;
    top: 22px;
    right: 10px;
    bottom: auto;
}


/* ================================================================= */
/* 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: 5px;
    margin-top: -10px;
}

html:not(.responsive) .side_box.custom_toggle_box .title_toggle_link:hover .toggle_icon {
	opacity: .5;
}

html:not(.responsive) .side_box .custom_filter_nav.item_search_scroll_box {
	padding-right: 0;
	padding-left: 3px;
}

/* カテゴリ/グループ */
/* アイコン位置 */
html:not(.responsive) .custom_filter_nav .has_sub_menu .right_side_nav_icon {
	top: 8px;
}

/* 画像有：アイコン位置 */
html:not(.responsive) .custom_filter_nav .has_sub_menu:has(.has_image_nav_label) .right_side_nav_icon {
	top: 13px;
}

/* 画像有：チェックボックス位置 */
html:not(.responsive) .custom_filter_checkbox:has(.has_image_nav_label) .inner_custom_filter_item:has(:checked)::after {
	top: 9px;
}

/* 下部絞込みボタン：初期表示 */
html:not(.responsive) .side_box.filter_btn_box {
	display: block;
}

/* メインエリア   ========================================= */

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

/* 各フィルターliタグ横幅 */
html:not(.responsive) .item_search_custom_filter_box .custom_filter_list .custom_filter_list_item {
    width: calc((100% - 10px) / 3);
}
html:not(.responsive) #maincol1 .item_search_custom_filter_box .custom_filter_list .custom_filter_list_item {
    width: calc((100% - 15px) / 4);
}

/* 一覧100%設定時　※レスポンシブ対応 */
@media only screen and (width >= 1400px)  {
	html:not(.responsive) .widemode .item_search_custom_filter_box .custom_filter_list .custom_filter_list_item {
		width: calc((100% - 15px) / 4);
	}
	
	html:not(.responsive) .widemode #maincol1 .item_search_custom_filter_box .custom_filter_list .custom_filter_list_item {
		width: calc((100% - 20px) / 5);
	}
}

@media only screen and (width >= 1600px)  {
	html:not(.responsive) .widemode .item_search_custom_filter_box .custom_filter_list .custom_filter_list_item {
		width: calc((100% - 20px) / 5);
	}
	
	html:not(.responsive) .widemode #maincol1 .item_search_custom_filter_box .custom_filter_list .custom_filter_list_item {
		width: calc((100% - 25px) / 6);
	}
}

@media only screen and (width >= 1800px)  {
	html:not(.responsive) .widemode .item_search_custom_filter_box .custom_filter_list .custom_filter_list_item {
		width: calc((100% - 25px) / 6);
	}
	
	html:not(.responsive) .widemode #maincol1 .item_search_custom_filter_box .custom_filter_list .custom_filter_list_item {
		width: calc((100% - 30px) / 7);
	}
}

@media only screen and (width >= 2000px)  {
	html:not(.responsive) .widemode .item_search_custom_filter_box .custom_filter_list .custom_filter_list_item {
		width: calc((100% - 30px) / 7);
	}
	
	html:not(.responsive) .widemode #maincol1 .item_search_custom_filter_box .custom_filter_list .custom_filter_list_item {
		width: calc((100% - 35px) / 8);
	}
}


/* 各フィルターラベル */
html:not(.responsive) .sort_box .custom_filter_list .custom_filter_label {
    font-size: 13px;
	line-height: 1.6;
}

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

/* 各フィルター：フィルタータイトルとフィルター項目欄を左右並び */
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;
}

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

/* 各フィルター開閉処理   ========================================= */

html:not(.responsive) .sort_box.custom_toggle_box.custom_toggle_opened .custom_toggle_area {
	display: block;
}

/* div最小縦幅リセット */
html:not(.responsive) .sort.sort_vertical .sort_box.custom_toggle_box {
	min-height: unset;
}

/* 開閉ボタン */
html:not(.responsive) .sort.sort_vertical .sort_box.custom_toggle_box .inner_item_search_sort_box {
    display: block;
    padding: 3px 10px;
    /*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;
}

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


/* ================================================================= */
/* 開閉アイコンアニメーション  */
/* ================================================================= */

.responsive .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 */
html:not(.responsive) .custom_toggle_closed:not(.item_sort_form) .title_toggle_link .toggle_icon {
	 -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: -webkit-transform 0.2s linear;
    transition: transform 0.2s linear;
}

html:not(.responsive) .custom_toggle_closed:not(.item_sort_form) .title_toggle_link:hover .toggle_icon {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

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

html:not(.responsive) .custom_toggle_opened:not(.item_sort_form) .title_toggle_link:hover .toggle_icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* ================================================================= */
/* カラーピッカー  */
/* ================================================================= */

/* カラーピッカーの場合 */
.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;
}
/* labelタグマウスカーソル */
.colorpicker_list .custom_filter_color {
    cursor: pointer;
}

/* 各カラーブロック横幅 */
.custom_filter_list:has(.colorpicker_list) .custom_filter_item {
    width: calc((100% - 15px) / 4);
    border: none;
}
:is(.touch032,.touch_modern) .custom_filter_list:has(.colorpicker_list) .custom_filter_item {
    width: calc((100% - 20px) / 5);
}
@media only screen and (width >= 980px)  {
    .custom_filter_list:has(.colorpicker_list) .custom_filter_item {
        width: calc((100% - 20px) / 5);
    }
    .responsive.ocnk038 .side_box .custom_filter_list:has(.colorpicker_list) .custom_filter_item {
        width: calc((100% - 50px) / 8);
    }
}

html:not(.responsive) .side_box .custom_filter_list:has(.colorpicker_list) .custom_filter_item {
    width: calc((100% - 15px) / 4);
}

/* 各カラーブロック */
.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-radius: 100vmax;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
	transition: .3s;
}

/* 白ブロック */
.colorpicker_list .custom-bgcolor-white {
    box-shadow: 0 0 0 1px #E0DFE3;
    background-color: #FFFFFF;
}

/* マウスオーバー */
/* マウスオーバー用初期指定 */
.colorpicker_list .color_block::before {
	content: "";
	display: block;
	position: absolute;
	top: -2px;
	left: -2px;
	box-shadow: 0 0 0 1px transparent;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	border-radius: 100vmax;
	transition: .3s;
}
/* マウスオーバー時 */
.use_hover .custom_filter_color:hover .color_block::before,
html:not(.responsive) .custom_filter_color:hover .color_block::before {
	box-shadow: 0 0 0 1px #333;
}
.use_hover .custom_filter_color:hover .custom-bgcolor-white,
html:not(.responsive) .custom_filter_color:hover .custom-bgcolor-white {
    box-shadow: 0 0 0 1px transparent;
}

/* チェック時 */
.colorpicker_list :is(.custom_filter_color,.custom_filter_color_box):has(input[type="checkbox"]:checked) .color_block::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 .sort_box .colorpicker_list :is(.custom_filter_color,.custom_filter_color_box):has(input[type="checkbox"]:checked) .color_block::after {
    left: 33%;
}
html .sort_box .colorpicker_list.disabled_color_label :is(.custom_filter_color,.custom_filter_color_box):has(input[type="checkbox"]:checked) .color_block::after {
    left: 35%;
}
/* 白ブロック */
.colorpicker_list :is(.custom_filter_color,.custom_filter_color_box):has(input[type="checkbox"]:checked) :is(.custom-bgcolor-yellow, .custom-bgcolor-gray, .custom-bgcolor-beige, .custom-bgcolor-white)::after {
    filter: brightness(0);
    opacity: .7;
}
/* HTML5固定幅のみ */
html:not(.responsive) .colorpicker_list :is(.custom_filter_color,.custom_filter_color_box):has(input[type="checkbox"]:checked) .color_block::after {
    width: 4px;
    height: 8px;
    left: 35%;
}
html:not(.responsive) .sort_box .colorpicker_list :is(.custom_filter_color,.custom_filter_color_box):has(input[type="checkbox"]:checked) .color_block::after {
    left: 30%;
}
html:not(.responsive) .sort_box .colorpicker_list.disabled_color_label :is(.custom_filter_color,.custom_filter_color_box):has(input[type="checkbox"]:checked) .color_block::after {
    left: 33%;
}

/* カラーピッカーラベル */
.custom_filter_color .custom_filter_label {
    display: block;
    margin: 5px 0 8px;
    text-align: center;
    font-size: 10px;
}
.use_hover .custom_filter_color:hover .custom_filter_label,
html:not(.responsive) .custom_filter_color:hover .custom_filter_label {
    opacity: .7;
}

html:not(.responsive) .side_box .custom_filter_color .custom_filter_label {
	font-size: 9px;
}

/* メインエリア   ========================================= */

/* 横並びメニューに変更 */
.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.disabled_color_label) .custom_filter_item {
    min-width: unset;
}
/* カラーブロックサイズを小さく */
.sort_box .custom_filter_list:has(.colorpicker_list) .custom_filter_item .color_block {
    width: 22px;
    margin: 0;
}
.sort_box .custom_filter_list:has(.colorpicker_list.disabled_color_label) .custom_filter_item .color_block {
    width: 26px;
}

/* スマホ調整 */
/* 400px以下：3列 */
@media only screen and (width <= 430px) {
	.responsive .sort_box .custom_filter_list:has(.colorpicker_list:not(.disabled_color_label)) .custom_filter_color_box {
		width: calc((100% - 10px) / 3);
	}
}
/* 400～600px：4列 */
@media only screen and (430px <= width <= 600px) {
	.responsive .sort_box .custom_filter_list:has(.colorpicker_list:not(.disabled_color_label)) .custom_filter_color_box {
		width: calc((100% - 15px) / 4);
	}
}
/* 600px以下：改行用に上寄せとflex:1で横幅固定 */
@media only screen and (width <= 600px) {
	.responsive .sort_box .custom_filter_list:has(.colorpicker_list) .custom_filter_color_box .custom_filter_item {
		align-items: flex-start;
		min-width: unset;
	}
	
	.responsive .sort_box .custom_filter_list:has(.colorpicker_list) .custom_filter_color_box .custom_filter_label {
		flex: 1;
		text-align: left;
	}
}

/* HTML5固定幅のみ */
html:not(.responsive) .sort_box .custom_filter_list:has(.colorpicker_list:not(.disabled_color_label)) .custom_filter_item {
    min-width: 90px;
}

/* 色指定   ========================================= */
.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%);
}