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

/* 2-3-4-plp start */

main {
    max-width: 1260px;
    margin: auto;
}

.filter_wrap li.filter,
.refinement.sp.condition_category {
    display: block !important;
}

.off_rate {
    display: none;
}
.off_cross_out {
    display: none;
}

main .thumbnail .qview {
    display: inline-block;
    position: static;
    bottom: auto;
    left: auto;
}

.thumbnail_under_label {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 0 4px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.thumbnail_label_promotion {
    background-color: #899E2C;
}

.thumbnail_label_sale {
    background-color: #BD5B00;
}

.thumbnail_label_web {
    background-color: #0c5641;
}


/*価格部分ラジオボタン*/

aside .filter_wrap .filter .filter_option li .refinement-link input[type=checkbox]+label:before {
    border-radius: 50% 50%;
}

aside .filter_wrap .filter .filter_option li input[type=checkbox]+label {
    padding-left: 30px !important;
}

.refinement-link input[type=checkbox]:checked+label:before {
    background-color: #fff;
    border-color: #a9a9a9;
}

aside .filter_wrap .filter .filter_option li .refinement-link input[type=checkbox]:checked+label:after {
    width: 12px;
    height: 12px;
    top: 3px;
    left: 4px;
    margin-top: 0;
    border-radius: 50% 50%;
    background-color: #3b5343;
    transform: none;
    border-left: none;
    border-width: 0;
}

@media screen and (max-width: 767px) {
    main .thumbnail .qview {
        display: none;
    }
    .thumbnail_under_label {
        margin-bottom: 5px;
        font-size: 10px;
    }
    /*タブ*/
    .tab_wrap {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
    }
    .tab_label {
        color: #0c5641;
        background: LightGray;
        font-weight: bold;
        white-space: nowrap;
        text-align: center;
        padding: 10px .5em;
        order: -1;
        position: fixed !important;
        z-index: 1;
        cursor: pointer;
        border: 1px solid #0c5641;
        flex: 1;
    }
    .tab_label_1 {
        left: 5%;
        width: 44.5%;
        z-index: 10;
    }
    .tab_label_2 {
        right: 5%;
        width: 44.5%;
        z-index: 10;
    }
    /*
.tab_label:not(:last-of-type) {
  margin-right: 5px;
}
*/
    .tab_content {
        width: 100%;
        height: 0;
        padding: 5px 0 0;
        overflow: hidden;
        opacity: 0;
    }
    /* アクティブなタブ */
    .tab_switch:checked+.tab_label {
        background: #899E2C;
        border: 1px solid #899E2C;
        color: #fff;
    }
    .tab_switch:checked+.tab_label+.tab_content {
        height: auto;
        overflow: auto;
        margin-top: 55px;
        padding: 0;
        opacity: 1;
        transition: .5s opacity;
        box-shadow: 0 0 3px rgba(0, 0, 0, .2);
    }
    /* ラジオボタン非表示 */
    .tab_switch {
        display: none !important;
    }
    .tab_wrap input[type="radio"]+label:before,
    .tab_wrap input[type="radio"]:checked+label:after {
        display: none !important;
    }
    /*追記*/
    .bg_filter.active {
        background-color: rgba(255, 255, 255, 0.9);
    }
    input[type=radio]+label {
        padding: 12px !important;
        border-radius: 0;
        background-color: white;
        color: #869e2c;
        font-size: 15px;
        border: 1px solid #869e2c;
        line-height: 1;
    }
    .tab_switch:checked+.tab_label {
        background: #869e2c;
        border-radius: 0;
        color: white;
    }
    .tab_wrap:after {
        background: #869e2c;
        display: none;
    }
    .tab_content div.category-refinement h2 {
        font-size: 15px;
        border-bottom: 1px solid #d0d0d0;
    }
    .sp.category-refinement li,
    .sp.category-refinement li {
        border-bottom: 1px solid #d0d0d0;
        font-size: 15px;
    }
    .tab_wrap .sp.category-refinement {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: 0 !important;
    }
    .tab_wrap .sp.category-refinement li a {
        padding: 15px 0 15px 30px !important;
    }
    .tab_wrap .sp.category-refinement h2 a {
        padding: 15px;
    }
    .tab_wrap .sp.category-refinement li li:last-child,
    .sp.category-refinement li li:last-child {
        border-bottom: 0;
    }
    #main #category-level-2 a {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        font-size: 15px !important;
    }
    .bg_filter .filter_wrap {
        border: none !important;
    }
    .bg_filter .filter_wrap .filter .filter_name {
        background-color: white;
        padding: 12px 18px 9px 15px;
    }
    .bg_filter .filter_wrap .filter .filter_option li input[type=checkbox]+label {
        padding: 15px 0 15px 35px;
    }
    .bg_filter .filter_wrap .filter .filter_name {
        background-color: #fafafa !important;
    }
    .filter_header button.btn_filter_cansel {
        display: none !important;
    }
    .filter_header button.close_btn:first-child {
        display: block !important;
        position: absolute;
        right: 12px;
        width: 20px;
        height: 20px;
        text-indent: -9999px;
        background: none;
        border: none;
    }
    .filter_header .close_btn:before,
    .close_btn:after {
        position: absolute;
        right: 5px;
        content: ' ';
        height: 25px;
        width: 2px;
        background-color: #666;
        top: -3px;
    }
    .filter_header .close_btn:before {
        transform: rotate(45deg);
    }
    .filter_header .close_btn:after {
        transform: rotate(-45deg);
    }
    button.btn_filter_cansel.btn_filter_apply {
        display: block;
    }
    .bg_filter .filter_header {
        border: 1px solid #d0d0d0;
        border-bottom: 1px solid #d0d0d0 !important;
    }
    div.bg_filter .filter_header p {
        color: #333;
    }
    .filter_wrap li.filter,
    .refinement.sp.condition_category {
        margin-bottom: 0;
    }
    .bg_filter .filter_wrap {
        height: 75% !important;
    }
    #main .bg_filter .filter_wrap .filter .filter_name {
        font-size: 15px;
    }
    #main .bg_filter .filter_wrap .filter .filter_option li input[type=checkbox]+label {
        font-size: 15px;
    }
    /*価格部分ラジオボタン*/
    .bg_filter .filter_wrap .filter .filter_option li .refinement-link input[type=checkbox]+label:before {
        border-radius: 50% 50%;
    }
    .bg_filter .filter_wrap .filter .filter_option li input[type=checkbox]+label {
        padding: 15px 0 15px 35px !important;
    }
    .bg_filter .filter_wrap .filter .filter_option li .refinement-link input[type=checkbox]:checked+label:after {
        width: 13px;
        height: 13px;
        top: 3px;
        left: 5px;
        margin-top: 16px;
        border-radius: 50% 50%;
        background-color: #3b5343;
        transform: none;
        border-left: none;
        border-width: 0;
    }
}

@media screen and (max-width:767px) {
    #primary article.feature .feature_inner {
        position: relative;
        padding-top: 40px;
    }
    #primary article.feature .feature_inner input[type="checkbox"] {
        top: 0;
    }
    #primary .search-result-options {
        position: relative;
    }
    #primary .search-result-options input[type=checkbox] {
        -webkit-appearance: none;
        appearance: none;
    }
    #primary article input[type=checkbox]+label {
        padding: 0;
        width: 55%;
        max-height: 100px;
    }
    #primary article .sort dt {
        display: none;
    }
    #primary article .sort dd {
        width: 100%;
        padding: 0;
        position: relative;
    }
    dl#grid-sort-header.sort {
        margin-left: 0;
        width: 50%;
        align-items: self-start;
        position: absolute;
        top: 0;
        max-height: 31px;
        overflow: hidden;
        z-index: 9;
        -moz-transition-property: max-height;
        -o-transition-property: max-height;
        -webkit-transition-property: max-height;
        transition-property: max-height;
        -moz-transition-duration: 0.2s;
        -o-transition-duration: 0.2s;
        -webkit-transition-duration: 0.2s;
        transition-duration: 0.2s;
        -moz-transition-timing-function: ease-in;
        -o-transition-timing-function: ease-in;
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    #primary article .sort dd button {
        width: 100%;
        display: block;
        text-align: left;
        border-top: 0;
        padding: 7px 10px;
        background-color: white;
    }
    #primary .search-result-options {
        display: flex;
        align-items: self-start;
        margin-bottom: 36px;
    }
    #primary article .sort dd:first-child button {
        border-top: 1px solid #ccc;
    }
    #primary article input:checked~#grid-sort-header {
        max-height: 270px;
    }
    #primary article .sort dd:first-of-type {
        pointer-events: none;
        border-top: 1px solid #ccc;
    }
    #primary article .sort dd:first-of-type:before {
        content: "\f107";
        position: absolute;
        top: -1px;
        right: 8px;
        font-size: 20px;
        font-family: 'FontAwesome';
        font-weight: 900;
    }
    #primary article input[type="checkbox"]:checked {
        background-color: transparent;
    }
    #primary article input[type="checkbox"]:checked+label {
        background-color: #d4d1d1;
    }
    #primary article input[type="checkbox"] {
        position: absolute;
        width: 50%;
        height: 30px;
        display: block;
        z-index: 9999999;
        background: transparent;
    }
    #primary .sp_filter {
        position: absolute;
        right: 10px;
    }
    #primary .sp_filter button {
        padding: 7px 10px;
    }
    #primary .sp_filter_conditions {
        width: 100%;
    }
    #primary .sp_filter_conditions ul.breadcrumb {
        width: 100%;
        margin-top: 50px;
        margin-left: 0;
        padding-bottom: 8px !important;
    }
    #primary .sp_filter_conditions ul.breadcrumb li {
        padding-right: 10px;
    }
    #primary dl#grid-sort-header dd>a {
        text-decoration: none;
    }
}

@media screen and (max-width:370px) {
    #primary dl#grid-sort-header.sort {
        width: 43%;
    }
}

/* 2-3-4-plp end */