@charset "utf-8";
/* CSS Document */
#ocMenu{overflow: hidden; margin-bottom: 50px;}
#ocMenu:last-child{border-bottom: 1px solid #eee;}
#ocMenu .content {width: 100%}
#ocMenu .content ul li a{text-decoration: none;}
#ocMenu .content ul li label{display: block;}
#ocMenu dt{box-sizing: border-box; padding: 15px 5px 12px; border-top: 1px solid #eee; font-weight: bold; position: relative; cursor: pointer; font-size: 14px;}
#ocMenu dd{display:block; margin-bottom: 20px;}/*すべて開く*/
#ocMenu .search_title_category,#ocMenu .search_title_filter{padding: 10px 5px 10px 0; font-size: 15px;}
/* button */
.content .usc_button,.content .button{display: block; cursor: pointer; color: #004385; padding: 9px 10px 5px;}
.content .usc_button:hover,.content .button:hover{text-decoration: underline;}
/*list_itemnumber*/
.side_search{background-color: #efefef; border-radius: 3px; padding: 15px; margin-bottom: 20px;}
.side_column .list_itemnumber {float: none; padding-bottom: 10px; text-align: center; border-bottom: 1px solid #ddd; margin-bottom: 15px;}
.side_search .list_itemnumber div{height: 24px; text-align: left;}
.side_column .list_itemnumber span{font-size: 30px; color: #333;}
/*keyword*/ 
.side_search_keyword{position: relative; display: flex; height: 40px; border-radius: 3px; padding-left: 8px; background-color: #fff; align-items: center; box-shadow: 0 2px 12px rgba(0, 0, 0, .08);}
.text_seach_btn input{cursor: pointer; border: none; width: 40px; height: 40px; background-position: left 13px bottom 50%; background-size: 15px; background-image: url(/user_data/packages/default/img/hns/icon_search1.png); background-repeat: no-repeat; background-color: #555; border-radius: 0 3px 3px 0; opacity: 0.7; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}	
.text_seach_btn input:hover,#ocMenu .price_seach_btn input:hover{opacity: 1;}	
#txtSearchWord{outline: none; height: 40px; width: 100%; box-sizing: border-box; font-size: 11px; padding: 2px 30px 2px 0; border: 0; background: unset;}
#txtSearchWordClearButton{position: absolute; display: none; background: url(/user_data/packages/default/img/icon/delete_arrow.gif) no-repeat; background-size: 15px 15px; width: 15px; height: 15px; right:50px; top: 0; bottom: 0; margin: auto 0; cursor: pointer;}
#txtSearchWord::placeholder{color: #999;}
/*category*/
.search_title_bg::after{content: ""; transition: transform 0.3s ease; position: absolute; right: 5px; top: 0; bottom: 0; margin: auto 0; width: 8px; height: 8px; border:2px solid #333; border-left: 0; border-bottom: 0; box-sizing: border-box; transform: translateY(25%) rotate(-45deg);}
#ocMenu .active {font-weight: normal;}
#ocMenu .active::after{transform: translateY(-25%) rotate(135deg); border-color: #999;}
#ocMenu .search_title_category{border-top: 0; border-bottom: 1px solid #eee;}
#ocMenu .search_title_category.active{font-weight: bold;}
#all_cat_0 a{text-decoration: none; display: block; letter-spacing: 0.2px; border-bottom: 1px solid #eee; box-sizing: border-box; line-height: 1.4; padding: 12px 5px 9px 5px;}
ul.usc_parent {margin-left: 5px;}
ul.usc_children{margin-left: 3px;}
ul .usc_parent span{position: relative; display: inline-block; width: 100%;}
ul .usc_parent li a{text-decoration: none; display: block; letter-spacing: 0.2px; padding: 15px 5px 12px 46px; border-bottom: 1px solid #eee; box-sizing: border-box; line-height: 1.4;}
ul .usc_children span a{padding: 12px 5px 9px 5px;}
#all_cat_0 a:hover,ul .usc_parent span a:hover,#ocMenu .checkbox-parts:hover{background-color: #f8f8f8; color: #000; display: block;}
ul .usc_parent li small{padding-left: 3px; color: #999;}	
ul .usc_parent span a::before,.usc_parent .usc_selected_unlinked::before{content: ""; position: absolute; left: 5px; background-image: url(/user_data/packages/default/img/common/ocs_nav/ocs_lnav.png); background-repeat: no-repeat; width: 37px; height: 37px; background-size: 367px 142px; top: 50%; transform: translateY(-50%); background-position: 0px 2px;}
ul #list5071 a::before, ul #list5071 .usc_selected_unlinked::before { background-position: -333px -75px; } /* デスク・机 */
ul #list5092 span a::before, ul #list5092 .usc_selected_unlinked::before { background-position: -37px 2px; } /* デスク周辺用品 */
ul #list5072 span a::before, ul #list5072 .usc_selected_unlinked::before { background-position: -74px 1px; } /* 椅子・チェア */
ul #list4970 span a::before, ul #list4970 .usc_selected_unlinked::before { background-position: -111px 0; } /* オフィス収納・棚 */
ul #list62 span a::before, ul #list62 .usc_selected_unlinked::before { background-position: -222px 0; } /* パーテーション・間仕切り */
ul #list65 span a::before, ul #list65 .usc_selected_unlinked::before { background-position: -258px 0; } /* ホワイトボード */
ul #list57 span a::before, ul #list57 .usc_selected_unlinked::before { background-position: -293px 0; } /* 金庫・耐火金庫 */
ul #list67 span a::before, ul #list67 .usc_selected_unlinked::before { background-position: -333px 0; } /* 受付カウンター・受付台・ハイカウンター */
ul #list5064 span a::before, ul #list5064 .usc_selected_unlinked::before { background-position: 0px -37px; } /* 応接・ソファ・ベンチ */
ul #list5075 span a::before, ul #list5075 .usc_selected_unlinked::before { background-position: -37px -37px; } /* オフィスインテリア */
ul #list5087 span a::before, ul #list5087 .usc_selected_unlinked::before { background-position: -74px -37px; } /* 事務機器・家電 */
ul #list5200 span a::before, ul #list5200 .usc_selected_unlinked::before { background-position: -111px -37px; } /* 文房具・オフィス用品 */
ul #list4451 span a::before, ul #list4451 .usc_selected_unlinked::before { background-position: -148px -37px; } /* 郵便・梱包用品 */
ul #list4431 span a::before, ul #list4431 .usc_selected_unlinked::before { background-position: -185px -37px; } /* 店舗用品・販促用品 */
ul #list5041 span a::before, ul #list5041 .usc_selected_unlinked::before { background-position: -222px -37px; } /* 日用品・雑貨 */
ul #list4810 span a::before, ul #list4810 .usc_selected_unlinked::before { background-position: -297px -37px; } /* 防災用品・災害用品 */
ul #list4483 span a::before, ul #list4483 .usc_selected_unlinked::before { background-position: -333px -37px; } /* パソコン周辺機器・PCサプライ */
ul #list5847 span a::before, ul #list5847 .usc_selected_unlinked::before { background-position: -37px -74px; } /* テーブル */
ul #list5688 span a::before, ul #list5688 .usc_selected_unlinked::before { background-position: -74px -74px; } /* 医療・整体・エステ */
ul #list5621 span a::before, ul #list5621 .usc_selected_unlinked::before { background-position: -111px -74px; } /* 工場・物流・作業現場用品 */
ul #list7255 span a::before, ul #list7255 .usc_selected_unlinked::before { background-position: -185px -74px; } /* 個室ブース・集中ブース・web会議ブース */
ul #list7533 span a::before, ul #list7533 .usc_selected_unlinked::before { background-position: -259px -74px; } /* 介護福祉用品・家具 */
ul #list4939 span a::before, ul #list4939 .usc_selected_unlinked::before { background-position: -222px -74px; } /* 児童・教育施設用家具 */
ul #list6042 span a::before, ul #list6042 .usc_selected_unlinked::before { background-position: 0px -110px; } /* オフィス家具 メーカー一覧 */
ul #list7592 span a::before, ul #list7592 .usc_selected_unlinked::before { background-position: -37px -109px; } /* リプロダクト 家具・インテリア */
ul #list5966 span a::before, ul #list5966 .usc_selected_unlinked::before { background-position: -74px -111px; } /* 合鍵  */
ul #list8659 span a::before, ul #list8659 .usc_selected_unlinked::before { background-position: -185px -111px; } /* インテリアテーブル  */
ul #list41 span a::before, ul #list41 .usc_selected_unlinked::before { background-position: -185px 0px; } /* 会議用テーブル・ミーティングテーブル  */
ul #list4057 span a::before, ul #list4057 .usc_selected_unlinked::before { background-position: -37px -74px; } /* 作業台・ワークテーブル・作業机 */
ul #list5021 span a::before, ul #list5021 .usc_selected_unlinked::before { background-position: -222px -109px; } /* ソファ */
ul .usc_children span a::before{content: none;}
.usc_parent .usc_selected_unlinked{font-weight: bold; background-color: #efefef; display: block;}
.usc_children .usc_selected_unlinked::before{content: none;}
/*stock_filter*/
.stock_filter{box-sizing: border-box; padding: 12px 5px 9px 5px; border-top: 1px solid #eee; font-weight: bold; position: relative; font-size: 14px; display: flex; justify-content: space-between; align-items: center;}
.toggle-switch {position: relative; display: inline-block; width: 50px; height: 30px;}
.toggle-switch input {display: none;}
.stock_slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ddd; transition: 0.4s; border-radius: 30px;}
.stock_slider:hover{opacity: 0.8;}
.stock_slider::before {content: "OFF"; position: absolute; height: 24px; width: 24px; left: 3px; bottom: 3px; background-color: white; transition: 0.4s; border-radius: 50%; font-size: 8px; display: flex; color: #ddd; box-sizing: border-box; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(255, 255, 255, 0.3),0 3px 8px rgba(0, 0, 0, 0.3);}
.stock_filter input:checked + .stock_slider { background-color: #000;}
.stock_filter input:checked + .stock_slider::before {content: "ON";color: #000; transform: translateX(20px); box-shadow: 0 3px 12px rgba(255, 255, 255, 0.4),0 3px 10px rgba(0, 0, 0, 0.5);}
/*price_seach_box*/
#ocMenu .search_title_filter{border-top: 0; pointer-events: none; margin-top: 30px;}
#ocMenu .price_seach_box{margin-left: 5px;}
#ocMenu .price_seach_box p input{width:88px; height: 35px; padding: 3px; border-radius: 3px; border: 1px solid #bbb; box-sizing: border-box; outline: none;}
#ocMenu .price_seach_box p input::placeholder {color: #ddd;}
#ocMenu .price_seach_btn input{border-radius: 3px; padding: 5px; font-size: 11px; border: none; width: 100%; height: 30px; color: #fff; background-size: 13px; background-image: url(/user_data/packages/default/img/hns/icon_search1.png); background-repeat: no-repeat; cursor: pointer; background-color: #555; opacity: 0.7; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; background-position: left 50px bottom 50%; margin-top: 8px;}
/*colorlist*/
ul.colorlist{margin-left: 5px;}
#ocMenu .colorlist li{float: left; margin-right: 3px; margin-bottom: 3px; width: 33px; height: 33px; border-radius: 50px; display: flex; align-items: center; justify-content: center;}
#ocMenu .colorlist li:nth-child(6n) {margin-right: 0px;}
#ocMenu .colorlabel{cursor: pointer; border: 0; width: 30px; height: 30px; position: relative; border-radius: 50%; box-sizing: border-box;}
#ocMenu .colorlist input[type=checkbox] {display: none;}
#ocMenu .btn_black {background-color:#000;}
#ocMenu .btn_white {background-color:#FFF; border: 1px solid #ccc;}
#ocMenu .btn_gray {background-color:#888;}
#ocMenu .btn_brown {background-color:#7D4926;}
#ocMenu .btn_natural {background-color:#D6B683;}
#ocMenu .btn_blue {background-color:#1D60DE;}
#ocMenu .btn_purple {background-color:#5522AE;}
#ocMenu .btn_green {background-color:#0A8115;}
#ocMenu .btn_red {background-color:#E80002;}
#ocMenu .btn_pink {background-color:#FCAAC1;}
#ocMenu .btn_orange {background-color:#FF6D4B;}
#ocMenu .btn_yellow {background-color:#FFFB49;}
#ocMenu .btn_silver {background: linear-gradient(-45deg, #dddddd ,20%, #ffffff); border: 1px solid #ccc;}
#ocMenu .btn_clear {background: linear-gradient(-45deg, #DDFFF3 ,20%, #ffffff); border: 1px solid #ccc;}
#ocMenu .btn_gold {background: linear-gradient(-45deg, #B79919 ,20%, #F4D630);}
#ocMenu .btn_multicolor {background: conic-gradient(#E5007C 90deg, #777777 90deg 180deg, #F9F13B 180deg 270deg, #19CDFD 270deg);}
#cliblack:hover{background:#7F7F7F;}
#cliwhite:hover{background:#999999;}
#cligray:hover{background:#CCCCCC;}
#clibrown:hover{background:#BDA392;}
#clinatural:hover{background:#EADAC1;}
#cliblue:hover{background:#7FA0DE;}
#clipurple:hover{background:#A990D6;}
#cligreen:hover{background:#84C089;}
#clired:hover{background:#F37F80;}
#clipink:hover{background:#F7C7D4;}
#cliorange:hover{background:#FFA894;}
#cliyellow:hover{background:#FFF349;}
#clisilver:hover{background:#E6E6E6;}
#cliclear:hover{background:#CFFEED;}
#cligold:hover{background:#F2E394;}
#climulticolor:hover{background:#CCCCCC;}
#ocMenu .colorlabel span{display: none;}
#ocMenu .colorlist label:hover span{position: absolute; font-size: 8px; width: max-content; background: #000000db; color: #fff; border-radius: 5px; top: -25px; padding: 1px 5px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); display: block!important;}
#ocMenu .colorlist li:nth-child(6n+1) label:hover span{left: 0; transform: none;}
#ocMenu .colorlist li:nth-child(6n) label:hover span{transform: none; left: auto; right: 0;}
#ocMenu .colorlist input[type=checkbox]:checked+label::before{content: ""; position: absolute; left: 0; right: 0; margin: 0 auto; top: 5px; width: 7px; height: 14px; transform: rotate(40deg); border-bottom: 3px solid #fff; border-right: 3px solid #fff;}
.colorlist #cliwhite input[type=checkbox]:checked+label::before, .colorlist #cliyellow input[type=checkbox]:checked+label::before, .colorlist #clisilver input[type=checkbox]:checked+label::before, .colorlist #cliclear input[type=checkbox]:checked+label::before, .colorlist #climulticolor input[type=checkbox]:checked+label::before{border-color: #333;}
/*checkbox*/
.checkbox-input{display: none;}
.checkbox-parts{line-height: 140%; position:relative; display: block; padding: 8px 5px 8px 35px; cursor: pointer; box-sizing: border-box;}	
.checkbox-parts::before{content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50px; border: 1px solid #ddd; top: 5px; left: 5px;}	
.checkbox-parts::after{content: ""; position: absolute; top: 9px; left: 12px; transform: rotateZ(45deg); width: 5px; height: 8px; border-top-width: 0; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 0; border-style: solid; border-color: #ddd;}
.checkbox-input:checked + .checkbox-parts::before{background-color: #000;}
.checkbox-input:checked + .checkbox-parts::after{border-color: #fff;}
/*商品件数の表示*/
#undercolumn .oc_listbox{display: flex; align-items: center; font-size: 14px; margin-bottom: 6px; margin-top: 25px;}
#undercolumn .list_itemnumber span{color: #333; font-size: 16px;}
/* ページナビゲーション */
.list_pagenavi{display: flex; flex-direction: row-reverse; width: 100%; justify-content: space-between; align-items: center;}
#page_navi_top{flex: 1;}
#page_navi_top .list_sortbox{float: none; display: flex; justify-content: space-between; align-items: center;}
.list_pager li{border-radius: 3px; height: 24px; box-sizing: border-box;}
.list_pager li a{padding: 3px 8px!important; height: 100%; box-sizing: border-box;}
.list_pager li a:hover{opacity: 0.5}
.pageactive{background: #000; padding: 3px 8px;}
.list_pager li.list_pager_prev a img, .list_pager li.list_pager_next a img{padding: 5px 2px 5px !important;}
.list_sortbox select{height: 24px; border-radius: 3px;}
.list_pagenavi .display, .list_pagenavi .display_m {padding-left: 0;}
.list_pagenavi2 .list_sortbox{display: flex; justify-content: flex-end; align-items: center;}