@charset "utf-8";

/*================================================================================================

* タイトルヘッダー下見画面の個別スタイル *

================================================================================================*/
h1.page-title .btn-content {
    position: relative;
    top: 4px;
}
/*================================================================================================

* 検索 *

================================================================================================*/

body.buyer-page.preview .accordion-row {
    font-size: 1rem;
    border: none;
    padding: 0;
    margin: 0;
}
body.buyer-page.preview .accordion-row::after,
body.buyer-page.preview .accordion-row::before {
    display: none;
}
body.buyer-page.preview .accordion-content {
    /* width: calc(100% - 1% - 60px); */
    width: 100%;
    display: flex;
}
body.buyer-page.preview .search-wrap .custom .accordion-row {
    width: 5%;
    display: flex;
    align-items: center;
}
body.buyer-page.preview .accordion-content.search-content {
    padding: 10px 0px 10px 0;
    align-items: center;
}



body.buyer-page.preview .search-content .input input {
    background: #fff !important;
}
body.buyer-page.preview .search-content .input .search-conditions {
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    border-radius: 2px;
    top: 9px;
    right: 10px;
}
body.buyer-page.preview .search-content .input .search-conditions:hover {
    background: #eee;
}
body.buyer-page.preview .search-content .input .search-conditions:after{
    width: 10px;
    height: 10px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    content: "";
    margin: auto;
    position: absolute;
    top: -4px;
    right: 9px;
    bottom: 0;
    transform: rotate(45deg);
    pointer-events: none;
}
body.buyer-page.preview .search-content .search-pc.pc {
    background-color: var(--link-m);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 97%;
}
body.buyer-page.preview .search-content .search-pc.pc .search-btn span::after{
    color: #fff;
}
body.buyer-page.preview .search-content .input input {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
body.buyer-page.preview .search-content .conditions-warp {
    padding-left: 5px;
    padding-right: 5px;
    /* width: 30%; */
}
body.buyer-page.preview .search-content .conditions-warp .conditions {
    position: relative;
    display: block;
    cursor: pointer;
    /* width: 33%; */
}

/* FB670 */
@media (min-width: 1280px) {
    body.buyer-page.preview .search-wrap .row.sort.in-mobile {
        display: none;
    }
    body.buyer-page.preview .search-wrap .row.bidding-status-select.in-mobile {
        display: none;
    }
    body.buyer-page.preview .search-wrap .row.btn.in-mobile {
        display: none;
    }
    body.buyer-page.preview .search-content .conditions-warp {
        padding-left: 5px;
        padding-right: 15px;
        /* width: 30%; */
    }

    body.buyer-page.preview .search-content .conditions-warp .conditions.brand {
        width: 90px;
    }

    body.buyer-page.preview .search-content .conditions-warp .conditions.category {
        width: 125px;
    }

    body.buyer-page.preview .search-content .conditions-warp .conditions.status {
        width: 90px;
    }

    body.buyer-page.preview .search-content .input {
        position: relative;
        width: calc(50% - 325px);
    }

    body.buyer-page.preview .search-wrap .row.sort.in-pc {
        width: 50%;
    }
        body.buyer-page.preview .search-wrap .row.sort.in-pc .input-wrap .input.select {
            width: calc(50% - 160px);
        }

        body.buyer-page.preview .search-wrap .row.sort.in-pc .input-wrap .input.radio {
            width: 200px;
            padding-left: 10px;
        }
        body.buyer-page.preview .search-wrap .row.sort.in-pc .input-wrap .submit {
            width: 70px;
        }

}

@media (min-width: 768px) and (max-width: 1279px) {
    body.buyer-page.preview .search-wrap .row.sort.in-mobile {
        display: none;
    }
    body.buyer-page.preview .search-wrap .row.bidding-status-select.in-mobile {
        display: none;
    }
    body.buyer-page.preview .search-wrap .row.btn.in-mobile {
        display: none;
    }
    body.buyer-page.preview .search-content .conditions-warp {
        padding-left: 5px;
        padding-right: 15px;
        /* width: 30%; */
    }

    body.buyer-page.preview .search-content .conditions-warp .conditions.brand {
        width: 90px;
    }

    body.buyer-page.preview .search-content .conditions-warp .conditions.category {
        width: 125px;
    }

    body.buyer-page.preview .search-content .conditions-warp .conditions.status {
        width: 90px;
    }

    body.buyer-page.preview .search-content .input {
        position: relative;
        width: 440px;
        max-width: calc(100% - 325px);
    }

    body.buyer-page.preview .search-wrap .row.sort.in-pc {
        width: 100%;
    }
        body.buyer-page.preview .search-wrap .row.sort.in-pc .input-wrap .input.select {
            width: 220px;
            max-width: calc(50% - 160px);
        }

        body.buyer-page.preview .search-wrap .row.sort.in-pc .input-wrap .input.radio {
            width: 200px;
            padding-left: 10px;
        }
        body.buyer-page.preview .search-wrap .row.sort.in-pc .input-wrap .submit {
            width: 70px;
        }

}

@media (max-width: 767px) {
    body.buyer-page.preview .search-wrap .row.sort.in-pc {
        display: none;
    }

    /* body.buyer-page.preview .search-wrap .row.sort.in-mobile {
        display: none;
    }
    */
}


body.buyer-page.preview .search-content .conditions-warp .conditions:not(:first-child) {
    border-left: 1px solid #dadada;
    padding-left: 17px;
}
body.buyer-page.preview .search-content .conditions-warp .conditions .con-select{
    position: absolute;
    top: 11px;
    margin-left: 15px;
}
body.buyer-page.preview .search-content .conditions-warp .conditions .con-select:after{
    width: 10px;
    height: 10px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    content: "";
    margin: auto;
    position: absolute;
    top: -4px;
    bottom: 0;
    transform: rotate(45deg);
    pointer-events: none;
}

/* body.buyer-page.preview .accordion-content.search-content .group-wrap input {
    width: calc(50% - 0px);
} */

body.buyer-page.preview .search-wrap {
    margin-bottom: 2rem;
}






@media only screen and (max-width: 767px) {
body.buyer-page.preview .search-wrap {
    margin-bottom: 1rem;
}
body.buyer-page.preview .accordion-row {
    font-size: 1.25rem;
    border-bottom: 1px solid var(--border-m);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
body.buyer-page.preview .accordion-row::after,
body.buyer-page.preview .accordion-row::before {
    display: block;
}
body.buyer-page.preview .on + .accordion-content {
    width: 100%;
    display: flex;
}
/********************/}


body.buyer-page.preview .section-wrap {
    margin-bottom: 1rem;
}
/* ソーセージ ================================================*/
body.buyer-page.preview .search-wrap .row.radio-switch {
    width: calc(50% - 0px);
}
body.buyer-page.preview .search-wrap .row.radio-switch:lang(en) {
    width: 100%;
}
.search-pc{
    width: 50px;
    float: left;
    z-index:99;
    height: 44px;
}
.search-pc .search-btn{
    height: 100%;
    z-index: 99;
}
.pc{
    display: block !important;
}
.sp{
    display: none!important;
}

@media only screen and (max-width: 1240px) {
body.buyer-page.preview .search-wrap .row.radio-switch {
    width: calc(100% - 0px);
}
/********************/}

/* セレクトボックス / ラジオボタン ================================================*/
body.buyer-page.preview .search-wrap .row.sort {
    width: 30%;
}


body.buyer-page.preview .search-wrap .row.bidding-status-select{
    width:15%;
    padding-right:10px;
    box-sizing: border-box;
}
body.buyer-page.preview .block-search {
    width: 20%;
    position: relative;
    font-weight: 700;
    opacity: 0;
}

body.buyer-page.preview .webkit-box-block {
    display: flex;
}

body.buyer-page.preview .button-align-right {
    margin-left: auto;
}

body.buyer-page.preview .block-search.on {
    opacity: 1;
}
body.buyer-page.preview .block-search > select {
    cursor: default;
}
body.buyer-page.preview .block-search.on > select {
    cursor: pointer;
}
body.buyer-page.preview .search-wrap .row.bidding-status-select select,
body.buyer-page.preview .block-search select{
    background: #FFFFFF;
}

body.buyer-page.preview .search-wrap .input-wrap {
    width: 100%;
}
    body.buyer-page.preview .search-wrap .input-wrap .input.select {
        width: calc(95% - 195px);
    }
    body.buyer-page.preview .search-wrap .input-wrap .input.radio {
        width: 120px;
        padding-left: 2rem;
    }
    body.buyer-page.preview .search-wrap .input-wrap .input.radio:lang(en) {
        width: 130px;
        padding-left: 0rem;
    }
    body.buyer-page.preview .search-wrap .input-wrap .input select {
        background: #fff;
    }
    body.buyer-page.preview .search-wrap .input-wrap .input input[type=radio] + label {
        margin-right: 0 !important;
    }

    /* 決定ボタン ================================================*/
    body.buyer-page.preview .search-wrap .input-wrap .submit {
        width: 20%;
    }
    body.buyer-page.preview .search-wrap .input-wrap .submit .ghost-btn.block:lang(en) {
        padding: 0.5rem 0;
    }
.swal2-actions{
    width: auto !important;
}
.swal2-styled{
    padding: .3em 2em !important;
}

@media only screen and (max-width: 1240px) {
body.buyer-page.preview .search-wrap .row.sort {
    width: calc(100% - 20%);
}
/********************/}

@media only screen and (max-width: 768px) {
body.buyer-page.preview .search-wrap .input-wrap .input.select,
body.buyer-page.preview .search-wrap .input-wrap .input.radio,
body.buyer-page.preview .search-wrap .input-wrap .submit,
body.buyer-page.preview .search-wrap .row.sort {
    width: calc(100% - 0%);
    padding: 0;
    margin-bottom: 1rem;
}
body.buyer-page.preview .search-wrap .row.sort {
    margin-bottom: 0rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-m);
}
.pc{
    display: none !important;
}
.sp{
    display: block!important;
}
/********************/}


/* 検索ボタン / リスト切り替えボタン ================================================*/
body.buyer-page.preview .search-wrap .row.btn {
    width: calc(1% + 60px);
}

@media only screen and (max-width: 1240px) {
body.buyer-page.preview .search-wrap .row.btn {
    width: calc(20% + 0px);
}
/********************/}

@media only screen and (max-width: 768px) {
body.buyer-page.preview .row.btn .icon span::after,
body.buyer-page.preview .row.btn .search-btn span::after {
    left: auto;
}
body.buyer-page.preview .search-wrap .row.btn {
    width: calc(100% + 0px);
}
/********************/}

/*================================================================================================

* カード *

================================================================================================*/
body.buyer-page.preview .tender-card-wrap:not(.list) .product-item-custom.card {
    padding-bottom: 16px;
}

body.buyer-page.preview .tender-card-wrap .card a.ovl {
    display: none;
}

body.buyer-page.preview .tender-card-wrap ul.is_buyer_preview li.auction-num > div:nth-child(1) {
    width: 80px !important;
}

.tender-card-wrap.list.custom ul.is_buyer_preview.buyer li.auction-num > div:nth-child(1) {
    width: 125px !important;
}

body.buyer-page.preview .tender-card-wrap ul.common-list li.auction-num > div:nth-child(2) {
    text-align: right;
    width: calc(100% - 80px) !important;
}

.tender-card-wrap.list.custom ul.is_buyer_preview.buyer li.auction-num  > div:nth-child(2) {
    text-align: left;
    width: calc(100% - 125px) !important;
}

body.buyer-page.preview .tender-card-wrap ul.common-list li.auction-num > div:nth-child(2) span {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    display: -webkit-box;
}

/* リンク用OVL ================================================*/
.tender-card-wrap .card a.ovl-visible {
    width: 100%;
    height: calc(100% - 60px);
    margin: auto;position: absolute;top: 0;right: 0;left: 0;
    z-index: 150;
}

.tender-card-wrap .product-item-custom.card a.ovl-visible {
    height: calc(100% - 100px);
}

body.buyer-page.preview .tender-wrap .my-group-product {
    display: inline-block;
    width: 100%;
    border-radius: 4px;
    background: #7f7f7fbf;
    padding: 0.4rem;
    text-align: center;
    color: #FFF;
    font-size: 0.9rem;
    position: relative;
    top: 3px;
}
body.buyer-page.preview .tender-wrap.modal-in .my-group-product {
    top: 0px;
}

body.buyer-page.preview .product-item-custom .my-group-product.product-bid-confirmed {
    margin-bottom: 0.4rem;
}

body.buyer-page.preview .product-item-custom .my-group-product.product-bid-confirmed.active {
    color: var(--text-m);
    background: var(--main-l);
    cursor: pointer;
}

/*================================================================================================

* 入札確認アラート MODAL *

================================================================================================*/
body.buyer-page.preview .modal-container.delete.bid-alert button.add-class-on {
    margin-bottom: 2rem;
}
body.buyer-page.preview .modal-container.delete.bid-alert button.add-class-on span::after {
    content: "規約を確認する";
}
body.buyer-page.preview .modal-container.delete.bid-alert button.add-class-on span:lang(en):after {
    content: "Check the terms";
}
body.buyer-page.preview .modal-container.delete.bid-alert button.add-class-on.on span::after {
    content: "閉じる";
}
body.buyer-page.preview .modal-container.delete.bid-alert button.add-class-on.on span:lang(en):after {
    content: "Close";
}

/*================================================================================================

* 一括入札 MODAL *

================================================================================================*/

body.buyer-page.preview .modal-container.bulk-modal table {
    width: 100%;
    border-collapse: collapse;
}
body.buyer-page.preview .modal-container.bulk-modal table tr {
    border-bottom: 1px solid #ddd;
}
body.buyer-page.preview .modal-container.bulk-modal table tr th {
    white-space: nowrap;
}
body.buyer-page.preview .modal-container.bulk-modal table tr td {
    border-left: 1px solid #ddd;
    padding: 4px 8px;
    line-height: 1.5;
}
body.buyer-page.preview .modal-container.bulk-modal table tr td:last-child {
    border-right: 1px solid #ddd;
}
body.buyer-page.preview .modal-container.bulk-modal table tr td.price {
    text-align: right;
}
body.buyer-page.preview .modal-container.bulk-modal table tr td.success {
    color: green;
}
body.buyer-page.preview .modal-container.bulk-modal table tr td.error {
    color: red;
}
body.buyer-page.preview .modal-container.bulk-modal table tr td.text-nowrap {
    white-space: nowrap;
}
body.buyer-page.preview .text-nowrap:lang(en) {
    white-space: initial;
    word-break: break-word;
}
body.buyer-page.preview .text-nowrap > div:nth-child(2):lang(en) {
    word-break: break-word;
}
body.buyer-page.preview .modal-container.bulk-modal .btn-full {
    width: 100% !important;
}

/*================================================================================================

* ステップ検索モーダル *

================================================================================================*/
#searchStepContainer .modal-container .modal-wrap .modal-window .btn-wrap button.col3 {
    width: 33.333%;
}
#searchStepContainer .modal-container .modal-wrap .modal-window .btn-wrap label.col3 {
    width: 33.333%;
}
#searchStepContainer .modal-container .modal-wrap .modal-window .btn-wrap .col3:last-child {
    border-right: none;
}
#searchStepContainer .modal-container .modal-wrap .modal-window .input.keyword-search {
    display: flex;
}
#searchStepContainer .modal-container .modal-wrap .modal-window .input.keyword-search,
#searchStepContainer .modal-container .modal-wrap .modal-window .input.keyword-search .vs--searchable {
    width: 100%;
}
#searchStepContainer .modal-container .modal-wrap .modal-window .input.keyword-search .vs__dropdown-toggle {
    border: none;
    border-bottom: 1px solid var(--border-m);
    border-radius: unset;
    color: var(--text-m);
    padding: 0;
}
#searchStepContainer .modal-container .modal-wrap .modal-window .input.keyword-search .vs__dropdown-option li {
    display: block;
}
#searchStepContainer .modal-container .modal-wrap .modal-window .input.keyword-search .vs__selected-options {
    align-items: center;
}
#searchStepContainer .modal-container .modal-wrap .modal-window .input.keyword-search .vs__selected-options span.vs__selected{
    color: var(--text-m);
}
#searchStepContainer .modal-container .modal-wrap .modal-window .input.keyword-search .vs__selected-options input[type="search"] {
    padding: 0 10px;
    background: none;
    border: none;
    width: unset;
    height: 44px;
}
#searchStepContainer .modal-container .modal-wrap .modal-window .input.keyword-search .vs__selected-options input[type="search"]:focus {
    border: none;
}
#searchStepContainer .modal-container .modal-wrap .modal-window .input.keyword-search span.search-icon {
    display: flex;
    height: 47px;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 10px;
    z-index: 2;
}
#searchStepContainer .modal-container .modal-wrap .modal-window .input.keyword-search .vs__actions .vs__clear {
    display: none;
}
#searchStepContainer .modal-container .modal-wrap .modal-window .input.keyword-search span.search-icon::after {
    font-family: "Material Icons Outlined";
    content: "search";
    font-size: 34px;
    color: var(--text-l);
}
#searchStepContainer .modal-container .modal-wrap .modal-window .input.keyword-search .vs--open span.search-icon{
    transform: unset;
}
#searchStepContainer .modal-container .modal-wrap .modal-window .input.keyword-search .vs__dropdown-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    background: #fff;
    z-index: 11;
    width: 100%;
    box-shadow: 0 2px 5px -1px rgb(30 30 56 / 10%);
}
#searchStepContainer .modal-container .modal-wrap .modal-window .input.keyword-search .vs__dropdown-menu li {
    padding: 0 10px;
    color: var(--text-m);
}
/*================================================================================================

* メディアクエリ *

================================================================================================*/
@media only screen and (max-width: 1024px) {
/********************/}
@media only screen and (max-width: 768px) {
/********************/}
@media only screen and (max-width: 480px) {
/********************/}

.product-item-custom {
    overflow: hidden;
}

.product-item-custom .sold-out,
/* .product-item-custom .bid-end, */
.product-item-custom .buy-it-now {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    height: 20px;
    width: 100px;
    transform: rotate(-45deg);
    position: absolute;
    top: 16px;
    left: -22px;
    font-size: 12px;
    letter-spacing: -1px;
    z-index: 1;
}

.product-item-custom .bid-end {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    height: 20px;
    width: 100px;
    transform: rotate(-45deg);
    position: absolute;
    bottom: 84px;
    right: -22px;
    font-size: 12px;
    letter-spacing: -1px;
    z-index: 1;
    clip-path: polygon(0% 0%, 100% 0, 100% 50%, 100% 100%, 20% 100%);
}

.product-item-custom .sold-out {
    background-color: #A32CC4;
}

.product-item-custom .bid-end {
    background-color: var(--price-high);
    z-index: 9999;
}

.product-item-custom .buy-it-now {
    background-color: #FFCA0A;
}

#preview-page .tender-wrap label.disabled {
    background-color: #7f7f7fbf;
}

#preview-page .tender-card-wrap .product-item-custom.card ul.common-list li:last-of-type > div:nth-child(2) {
    font-weight: unset;
}

#preview-page .search-wrap .custom {
    position: relative;
}

#preview-page .search-wrap .custom .condition-category,
#preview-page .search-wrap .custom .condition-status,
#preview-page .search-wrap .custom .condition-brand {
    display: none;
    width: 100%;
    background: #fdfdfd;
    padding: 12px;
    border-radius: 5px;
    position: absolute;
    top: 67px;
    z-index: 999;
}

#preview-page .search-wrap .custom .condition-category.on {
    display: flex;
}

#preview-page .search-wrap .custom .condition-category .category-list {
    width: 18%;
}

#preview-page .search-wrap .custom .condition-category .category-list li {
    display: block;
    cursor: pointer;
    line-height: 40px;
}

#preview-page .search-wrap .custom .condition-category .category-list li a {
    width: 100%;
    float: left;
    padding: 0 10px;
    border-radius: 3px;
    background: #efefef;
    color: #000;
    margin-bottom: 6px;
}

#preview-page .search-wrap .custom .condition-category .category-list li a.active {
    background-color: #000;
    color: #fff;
}

#preview-page .search-wrap .custom .condition-category .category-content {
    width: 81%;
    border: 1px solid #eaeaea;
    border-radius: 3px;
    background-color: #fff;
    margin-left: 5px;
}

#preview-page .search-wrap .custom .condition-category .category-content ul{
    margin: 10px 20px;
    display: flex;
    flex-wrap: wrap;
}

#preview-page .search-wrap .custom .condition-category .category-content li {
    width: calc((100%-80px)/3);
    cursor: pointer;
    padding: 0 5px;
}

#preview-page .search-wrap .custom .condition-category .category-content li a{
    border-bottom: 1px dotted #dadada;
    display: block;
    padding: 3px 0;
    height: 100%;
}

#preview-page .search-wrap .custom .condition-category .category-content li a span {
    color: #000;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    padding: 10px 5px;
}

#preview-page .search-wrap .custom .condition-category .category-content li a.active span {
    background-color: #000;
    color: #fff;
}

#preview-page .search-wrap .custom .condition-category .category-content .btn-content {
    justify-content: flex-end;
    padding: 10px 20px;
}

#preview-page .search-wrap .condition-list {
    width: 100%;
    justify-content: flex-start;
    align-items: center;
}
/* FB663 */
@media (min-width: 768px){
    #preview-page .search-wrap .custom.row .conditions.filtering {
        display: none;
    }
    #preview-page .search-wrap .custom.row .condition-list {
        display: none;
    }
}

@media (max-width: 768px) {
    #preview-page .search-wrap .condition-list {
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        display: none;
        background: #fdfdfd;
        padding: 12px;
        border-radius: 5px;
        position: absolute;
        top: 228px;
        z-index: 999;
    }
    #preview-page .search-wrap .condition-list.on {
        display: block;
    }
}

#preview-page .search-wrap .condition-list .title {
    color: #333;
    font-size: 13px;
    margin-right: 16px;
}

#preview-page .search-wrap .condition-list .item-list .item {
    display: inline-flex;
    background-color: #fff;
    align-items: center;
    padding: 4px 8px;
    margin: 0 8px 8px 0;
    border: 1px solid #bebebe;
    border-radius: 2px;
    transition: all .3s ease 0s;
}

#preview-page .search-wrap .condition-list .item-list .item .type {
    font-size: 10px;
    color: #888;
    display: inline-block;
    margin-right: 3px;
    font-weight: 700;
}

#preview-page .search-wrap .condition-list .item-list .item .name {
    color: #404040;
    font-size: 12px;
    max-width: 650px;
    width: auto;
    word-break: break-all;
    margin-right: 3px;
}

#preview-page .search-wrap .condition-list .item-list .close {
    color: white;
    background-color: #bebebe;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
}

#preview-page .search-wrap .condition-list .item-list .close:hover {
    background-color: #000;
}

#preview-page .search-wrap .custom .condition-status.on,
#preview-page .search-wrap .custom .condition-brand.on {
    display: block;
}

#preview-page .search-wrap .custom .condition-status .status-content {
    width: 100%;
}

#preview-page .search-wrap .custom .condition-status .status-content p {
    margin-bottom: 10px;
}

#preview-page .search-wrap .custom .condition-status .status-content ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

#preview-page .search-wrap .custom .condition-status .status-content ul li {
    background: #f6f6f6;
    border-radius: 2px;
    color: #444;
    margin: 0 5px 5px 0;
    cursor: pointer;
    text-align: center;
    width: calc((100% - 15px)/3);
    height: 53px;
}

#preview-page .search-wrap .custom .condition-status .status-content li a {
    color: var(--text-m);
    padding: 6px 8px;
    width: 100%;
    height: 100%;
    display: flex;
    border-radius: 2px;
    font-size: 17px;
}

#preview-page .search-wrap .custom .condition-status .status-content li a.active {
    background-color: #000;
    color: #fff;
}

#preview-page .search-wrap .custom .condition-brand .brand-content {
    width: 100%;
}

#preview-page .search-wrap .custom .condition-brand .brand-content ul.alphabet-wrap {
    border-bottom: 1px solid #dadada;
    padding-bottom: 9px;
}

#preview-page .search-wrap .custom .condition-brand .brand-content ul.alphabet-wrap li {
    padding: 0 10px;

}
#preview-page .search-wrap .custom .condition-brand .brand-content ul.alphabet-wrap li a {
    color: var(--text-m);
    padding: 0 7px;
}

#preview-page .search-wrap .custom .condition-brand .brand-content ul.brand-wrap li a {
    color: var(--text-m);
}

#preview-page .search-wrap .custom .condition-brand .brand-content ul.alphabet-wrap li:not(:last-child) {
    border-right: 1px solid #888;
    line-height: 12px;
}

#preview-page .search-wrap .custom .condition-brand .brand-content ul.alphabet-wrap a.active {
    background-color: #000;
    color: #fff;
}

#preview-page .search-wrap .custom .condition-brand .brand-content ul.brand-wrap {
    margin: 30px 5px;
    height: 400px;
    overflow: auto;
}

#preview-page .search-wrap .custom .condition-brand .brand-content ul.brand-wrap li.active {
    background-color: #000 !important;
}

#preview-page .search-wrap .custom .condition-brand .brand-content ul.brand-wrap li.active a {
    color: #fff;
}

#preview-page .search-wrap .custom .condition-brand .brand-content ul.brand-wrap li {
    cursor: pointer;
    width: calc((100% - 15px)/3);
    background-color: #efefef;
    border-radius: 3px;
    margin-right: 5px;
    margin-bottom: 5px;
}

#preview-page .search-wrap .custom .condition-brand .brand-content ul.brand-wrap .en-name {
    font-size: 17px;
    margin-left: 10px;
}

#preview-page .search-wrap .custom .condition-brand .brand-content ul.brand-wrap .ja-name {
    font-size: 11px;
    margin-left: 10px;
}

#product-item .infinite-loading-container {
    width: 100%;
}

@media only screen and (max-width: 768px) {
    body.buyer-page.preview h1.page-title .btn-content {
        display: none;
    }
    body.buyer-page.preview .accordion-content {
        width: calc(100% - 0%);
        margin-top: 10px;
    }
    body.buyer-page.preview .search-wrap .row.bidding-status-select {
        width: 100%;
        padding-right: 0;
        margin-bottom: 10px;
    }

    body.buyer-page.preview .search-wrap .input-wrap .input.radio {
        display: flex;
    }

    body.buyer-page.preview .radio-switch .saucisse {
        display: flex;
        align-items: center;
        font-size: 0.8em;
    }

    body.buyer-page.preview .radio-switch .saucisse > div {
        padding: 0.7rem;
        margin-left: 5px;
        margin-right: 5px;
    }
    body.buyer-page.preview .radio-switch .saucisse > div.bookmark-wrap {
        padding: 0.5em 0;
        width: auto;
        position: unset;
        pointer-events: auto;
    }

    body.buyer-page.preview .search-wrap .row.radio-switch {
        width: 100%;
    }

    body.buyer-page.preview .tab-content-on.bookmark-wrap .icon {
        width: 41px;
        height: 30px;
    }

    body.buyer-page.preview .tab-content-on.bookmark-wrap .icon > div.before {
        opacity: 1;
        background: url(../../../img/icon/star-after.svg)no-repeat center / auto 100%;
        width: 100%;
        height: 100%;
        content: "";
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    body.buyer-page.preview .tab-content-on.bookmark-wrap .icon span::after {
        font-size: 0.85rem;
        top: -5px;
    }
}


/* FB659 */
@media only screen and (max-width: 768px) {
    body.buyer-page.preview .accordion-content.search-content {
        padding: 0px 0px 0px 0;
        align-items: center;
    }
    body.buyer-page.preview .search-content .input {
        position: relative;
        width: 100%;
    }
    body.buyer-page.preview .search-content .conditions-warp {
        margin-left: 0;
        width: 100%;
    }
    body.buyer-page.preview .search-content .conditions-warp .conditions {
        position: relative;
        display: block;
        cursor: pointer;
        width: 100%;
        padding: 10px 0px;
        border-bottom: 1px solid #dadada;
        font-weight: 700;
    }
    body.buyer-page.preview .search-content .conditions-warp .conditions:not(:first-child) {
        border-left: 0px solid #dadada;
        border-bottom: 1px solid #dadada;
        padding-left: 0px;
    }
    body.buyer-page.preview .search-content .conditions-warp .conditions .con-select{
        position: relative;
        top: 11px;
        margin-right: 15px;
        float:right
    }
    body.buyer-page.preview .search-content .conditions-warp .conditions .con-select:after{
        width: 10px;
        height: 10px;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
        content: "";
        margin: auto;
        position: absolute;
        top: 0px;
        bottom: 0;
        transform: rotate(45deg);
        pointer-events: none;
    }
    .condition-category{
        top: 138px !important;
    }
    .condition-brand{
        top: 92px !important;
    }
    .condition-status {
        top: 185px !important;
    }

    #preview-page .search-wrap .custom .condition-category .category-list {
        width: 100%;
    }

    #preview-page .search-wrap .custom .condition-category .category-list li {
        line-height: 30px;
    }

    #preview-page .search-wrap .custom .condition-category .category-list li a {
        width: 100%;
        padding: 0 5px;
        margin-bottom: 2px;
        letter-spacing: 0px;
    }

    #preview-page .search-wrap .custom .condition-category .category-content {
        width: 100%;
        border-radius: 3px;
        margin-left: 0px;
    }

    #preview-page .search-wrap .custom .condition-category .category-content ul{
        margin: 10px 20px;
    }

    #preview-page .search-wrap .custom .condition-category .category-content li {
        width: 100%;
        padding: 0 5px;
    }

    #preview-page .search-wrap .custom .condition-category .category-content li a{
        padding: 0px 0;
        height: 100%;
    }

    #preview-page .search-wrap .custom .condition-category .category-content li a span {
        width: 100%;
        padding: 2px 2px;
        letter-spacing: 0px;
    }

    #preview-page .search-wrap .custom .condition-category .category-content .btn-content {
        padding: 10px 20px;
    }


    #preview-page .search-wrap .custom .condition-brand .brand-content ul.brand-wrap li a {
        color: var(--text-m);
        letter-spacing: 0px;
    }

    #preview-page .search-wrap .custom .condition-brand .brand-content ul.brand-wrap {
        margin: 10px 5px;
        height: 400px;
    }

    #preview-page .search-wrap .custom .condition-brand .brand-content ul.brand-wrap li {
        width: 98%;
        margin-right: 5px;
        margin-bottom: 2px;
    }

    #preview-page .search-wrap .custom .condition-brand .brand-content ul.brand-wrap .en-name {
        font-size: 14px;
    }

    #preview-page .search-wrap .custom .condition-brand .brand-content ul.brand-wrap .brand-br {
        display: None;
    }

    #preview-page .search-wrap .custom .condition-brand .brand-content ul.alphabet-wrap li:not(:last-child) {
        line-height: 20px;
    }

    /* For grade */
    #preview-page .search-wrap .custom .condition-status .status-content {
        width: 100%;
    }

    #preview-page .search-wrap .custom .condition-status .status-content p {
        margin-bottom: 10px;
    }

    #preview-page .search-wrap .custom .condition-status .status-content ul {
        width: 100%;
    }

    #preview-page .search-wrap .custom .condition-status .status-content ul li {
        margin-bottom: 2px;
        width: 100%;
        height: 30px;
    }

    #preview-page .search-wrap .custom .condition-status .status-content li a {
        padding: 2px 8px;
        width: 100%;
        height: 100%;
        font-size: 14px;
    }

    #preview-page .search-wrap .custom .condition-status .status-content li a span {
        letter-spacing: 0px;
    }

}


/* Loading status when click search button in bidding page */
#preview-page .loading-bidding .design .circle-shadow {
    width: 50px;
    height: 50px;
    background: #00B0FF;
    margin: 0 auto;
    border-radius: 100%;
    content: "";
    opacity: 0.9;
    transform: scale(1.5);
    margin: auto;
    animation-duration: 0.85s;
    animation-name: design-shadow;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes design-shadow {
    0% {
        opacity: 0.2;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
    }
    100% {
        opacity: 0.6;
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }
}

#preview-page .show_blank {
    opacity: 0;
}

#preview-page .no-login {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}
#preview-page .no-login .login-alert {
    display: flex;
    position: relative;
}

#preview-page .no-login .login-alert .alert-wrapper{
    margin: auto;
    background: white;
    padding: 32px;
    border-radius: 10px;
    position: absolute;
    top: 10vh;
    left:50%;
    transform: translateX(-50%);
}

#preview-page .no-login .login-alert .alert-wrapper p {
    text-align: center;
}

#preview-page .no-login .login-alert .alert-wrapper .button-wrap {
    text-align: center;
    display: flex;
    z-index: 1;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 1.25em auto 0;
}

#preview-page .no-login .login-alert .alert-wrapper .button-wrap .btn {
    border: 0;
    border-radius: 0.25em;
    font-size: 1.0625em;
    margin: .3125em;
    font-weight: 500;
    padding:.3em 2em
}

#preview-page .no-login .login-alert .alert-wrapper .button-wrap .btn.btn-secondary {
    background-color: #3085d6;
    color: #fff;
}