@charset "UTF-8";

/**************************************************************************************
itokin_detail_search.css /  詳細検索・商品一覧SP表示絞り込み
#PC表示（min-1188px）
#タブレット表示（min-991px）
#スマホ表示（min-767px）

*************************************************************************************/
.modal-header {
    border-bottom: 1px solid #707070;
}
#modal-search-menu .modal-header {
    padding: 10px;
}
.modal-header .close {
    margin-top:  3px;
    opacity: 1;
    font-weight: normal;
}
.modal-title {
    font-weight: normal;
}
#modal-search-menu .modal-body {
    padding: 0;
}
.detail-search-conditions {
    font-size: 12px;
    line-height: 1.4;
}
.detail-search-conditions input[type="text"] {
    border: none;
}
.detail-search-conditions select,
.detail-search-conditions input[type="tel"],
.detail-search-conditions input[type="password"] {
    padding: 0;
    border: 1px solid #e1e1e1;
    border-radius: 2px;
    display: inline-block;
    width: 100%;
    background-color: transparent;
}

.detail-search-conditions p {
    margin: 0;
}
.detail-search-conditions a {
    text-decoration: none;
}
.detail-search-conditions .detail-search-conditions-box {
    padding: 10px;
    border-bottom: 1px solid #e1e1e1;
}
@media (max-width: 991px){
    .item-list .sort-sp .select-gender.detail-search-conditions-box {
        padding: 10px;
        margin-bottom: 0;
    }
    .modal-header .close {
        margin-top: 2px;
    }
}
.arrow::after {
    content: '';
    width: 8px;
    height: 8px;
    border-bottom: solid 1px #000000;
    border-right: solid 1px #000000;
    transition: 0.2s;
    transform: rotate(45deg);
    transform-origin: center;
    margin-top: 15px;
    margin-right: 5px;
}
.arrow.active::after {
    transform: rotate(225deg);
}
.detail-search-conditions .btn-group {
    margin: 10px 0 5px 0px;
}
.detail-search-conditions .multi-select .flexbox.js-collapse {
    justify-content: space-between;
}
.detail-search-conditions .multi-select a,
.detail-search-conditions .multi-select a:hover,
.detail-search-conditions .multi-select a:active {
    color: inherit;
}
.sub-title-outer{
    justify-content: space-between;
}
.detail-search-conditions .sub-title {
    color: #333333;
    font-weight: bold;
    padding: 10px 0;
}
.detail-search-conditions .btn-collapse {
    font-size: 11px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    padding: 0px 10px;
    height: 23px;
    line-height: 22px;
}
.detail-search-conditions .btn-collapse.active,
.detail-search-conditions .btn-collapse:hover,
.detail-search-conditions .btn-collapse:active,
.detail-search-conditions .btn-collapse:link {
    background: #fff;
}
.detail-search-conditions .collapse-panel label {
    padding: 0;
    margin: 0;
}
.detail-search-conditions .collapse-panel .js-category span::after {
    content:attr(data-category-item-total);
    margin: 0 0 0 5px;
}
.detail-search-conditions .collapse-panel .js-brand span::after {
    content:attr(data-brand-item-total);
    margin: 0 0 0 5px;

}
.detail-search-conditions .collapse-panel ul li {
    position: relative;
}
/* カテゴリから探す */
.detail-search-conditions .collapse-category ul {
    justify-content: space-between;
    overflow-x: hidden;
}
.detail-search-conditions .collapse-panel ul li.scc-opened {
    width: 100%;
}
.detail-search-conditions .collapse-category a.collapse-small-category {
    display: block;
    padding: 10px;
}
.detail-search-conditions .collapse-category a.collapse-small-category::after {
    content: '';
     display: block;
    width: 8px;
    height: 8px;
    border-bottom: solid 1px #000000;
    border-right: solid 1px #000000;
    transition: 0.2s;
    transform: rotate(45deg);
    transform-origin: center;
    margin-top: -5px;
    margin-left: 3px;
}
.detail-search-conditions .collapse-category a.collapse-small-category.close-arrow::after {
    transform: rotate(225deg);
}
.detail-search-conditions .collapse-category .small-category ul {
    margin-left: 25px;
}
.detail-search-conditions .collapse-size ul li {
    min-width: 33.33333333%;
}
.detail-search-conditions .slider-select {
    margin: 0 auto;
}
.detail-search-conditions .slider-select .off-rate-slider,
.detail-search-conditions .slider-select .price-slider {
    margin: 0;
    width: 100%;
}
.detail-search-conditions .text-keyword input[type="text"]{
    padding: 0 50px 0 5px;
    border: 1px solid #e1e1e1;
    position: relative;
    background-color: transparent;
    height: 42px;
}
.detail-search-conditions .text-keyword .input-text-outer {
    position: relative;
    margin-top: 10px;
}
.detail-search-conditions .text-keyword .input-text-outer::after{
    content: "";
    position: absolute;
    right: 15px;
    top: calc(22px/2);
    width: 22px;
    height: 22px;
    background: url("/assets/images/common/icn_search_black.png") right no-repeat;
    background-size: 22px;
}
.detail-search-conditions .select-gender select,
.detail-search-conditions .select-stock select {
    padding: 5px 10px;
    box-sizing: border-box;
    height: 50px;
    background-image: none;
}
.detail-search-conditions-box.select-stock,
.detail-search-conditions-box.select-gender {
    position: relative;
}
.detail-search-conditions-box.select-stock::after,
.detail-search-conditions-box.select-gender::after {
    display: block;
    position: absolute;
    bottom: 30px;
    right: 20px;
    border-bottom: solid 1px gray;
    border-right: solid 1px gray;
    pointer-events: none;
}
.detail-search-conditions .collapse-color .flexbox > * {
    margin-right: 15px;
    margin-bottom: 15px;
    flex: 0 1 auto;
}
.detail-search-conditions .collapse-color input[type="checkbox"] {
    z-index: 1;
    width: 45px;
    height: 45px;
    display: none;
}
.detail-search-conditions .collapse-color input[type="checkbox"]:checked {
    border: 5px solid black;
}
.color-label {
    width: 45px;
    height: 45px;
}
/* ピンク */
.color-label-1 {
    background-color: #FF6AB4;
}
/* レッド */
.color-label-2 {
    background-color: #FF0200;
}
/* オレンジ */
.color-label-3 {
    background-color: #FF8C02;
}
/* イエロー */
.color-label-4 {
    background-color: #FFDE01;
}
/* グリーン */
.color-label-5 {
    background-color: #3DB371;
}
/* ブルー */
.color-label-6 {
    background-color: #0066E4;
}
/* ネイビー */
.color-label-7 {
    background-color: #1A4070;
}
/* パープル */
.color-label-8 {
    background-color: #9A32CC;
}
/* ベージュ */
.color-label-9 {
    background-color: #F5A460;
}
/* ブラウン */
.color-label-a {
    background-color: #D3691E;
}
/* ホワイト */
.color-label-b {
    background-color: #FFFFFF;
    border: 1px solid #e1e1e1;
}
/* グレー */
.color-label-c {
    background-color: #A9A9A9;
}
/* ブラック */
.color-label-d {
    background-color: #000000;
}
/* エトセトラ */
.color-label-e {
    border: 1px solid#e1e1e1;
    background: repeating-linear-gradient(135deg, #e1e1e1, #e1e1e1 2px, white 2px, white 8px);
}
#modal-search-menu .modal-footer {
    padding: 0;
}
.btn-group {
    display: flex;
    padding: 10px;
}
.btn-group .sp-search,
.btn-group .sp-clear,
.search-menu .detail-search .btn-group button.search,
.search-menu .detail-search .btn-group button.clear {
    flex: 0 1 50%;
    width: auto;
    height: auto;
    line-height: 1;
    border-radius: 4px;
    background-color: transparent;
    border: 1px solid #e1e1e1;
    padding: 20px 0;
    margin: 0;
    color: #000000;
    font-weight: normal;
}
.btn-group .sp-search,
.search-menu .detail-search .btn-group button.search {
    margin-right: 5px;
    background-color: #333333;
    color: #FFFFFF;
}
.btn-group .sp-clear,
.search-menu .detail-search .btn-group button.clear {
    margin-left: 5px;
}
.multi-select .collapsePanelItem {
    display: flex;
    align-items: center;
    line-height: 3;
    background-image: none;
}
.multi-select .collapsePanel-category .collapsePanelItem {
    flex-wrap: wrap;
}
.multi-select input[type="checkbox"].collapsePanelItemCheckbox {
    background-image: none;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #e1e1e1;
    position: static;
    margin-right: 5px;
    background-image: none;
    outline: none;
}
.multi-select input[type="checkbox"].collapsePanelItemCheckbox:checked {
    background-color: black;
}
.multi-select input[type="checkbox"].collapsePanelItemCheckbox:checked + label::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border-bottom: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transition: 0.2s;
    transform: rotate(45deg);
    transform-origin: center;
    position: absolute;
    top: 12px;
    left:-17px;
}
.multi-select .collapse-color input[type="checkbox"].collapsePanelItemCheckbox:checked + label::after {
    content: '';
    display: block;
    width: 45px;
    height: 45px;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: none;
    border: 2px solid #333333;
}
.collapsePanel-color {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}
.collapsePanel-color .collapsePanelItem {
    margin-right: 15px;
    margin-bottom: 15px;
}
.collapsePanel-category .child-category {
    display: flex;
    width: 70vw !important;
    align-items: center;
}
.DetailSearchParts__sale-type-checkbox-list,
.multi-select .collapsePanel-button,
.multi-select .collapsePanel-size {
    display: flex;
    flex-wrap: wrap;
    margin-left: -5px;
}
.DetailSearchParts__sale-type-checkbox,
.detail-search-conditions .multi-select .collapsePanel-button > *,
.detail-search-conditions .multi-select .collapsePanel-size > * {
    flex: 0 1 50%;
    line-height: 1;
}
.DetailSearchParts__sale-type-checkbox--label,
.multi-select .collapsePanel-button label,
.multi-select .collapsePanel-size label {
    width: 100%;
    margin: 7px 5px;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    text-align: center;
    padding: 15px 0;
    cursor: pointer;
}
.DetailSearchParts__sale-type-checkbox--label {
    width: 97% !important;
    margin: 5px;
}
.DetailSearchParts__sale-type-checkbox--input:checked + label::after,
.multi-select .collapsePanel-button input[type="checkbox"].collapsePanelItemCheckbox:checked + label::after,
.multi-select .collapsePanel-size input[type="checkbox"].collapsePanelItemCheckbox:checked + label::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    border: 2px solid #333333;
    transform: none;
    position: absolute;
    top: 0px;
    left: 0;
}
.DetailSearchParts__sale-type-checkbox--input,
.multi-select .collapsePanel-button input[type="checkbox"].collapsePanelItemCheckbox,
.multi-select .collapsePanel-size input[type="checkbox"].collapsePanelItemCheckbox {
    display: none !important;
}

.range-text-to,
.range-text-from {
    flex: 0 1 47% !important;
}
.range-text-to > input,
.range-text-from > input {
    padding: 5px !important;
    margin: 0 5px;
}
.range-text-center {
    flex: 0 1 6%;
    justify-content: center;
}

@media (max-width: 991px){
    #modal-search-menu .modal-body {
        padding: 0;
        height: calc(85vh - 170px);
    }
}

.detail-search-conditions .ui-widget.ui-widget-content {
    margin-top: 10px;
}

.hover-invalid {
    cursor: text;
    pointer-events: none;
}

.hover-invalid:hover {
    opacity: 1;
}

.review-modal-header {
    display: flex;
    justify-content: center;
    position: relative;
    height: 60px;
}
#review-modal-close-btn {
    position: absolute;
    right: 10px;
}