@charset 'UTF-8';

/*おすすめ商品部*/
  /*タブ関連*/

.wbonus-v {
    background: var(--bk-lblue);
    padding: 50px;
    border-radius: 10px;
    margin: 0 0 120px;

    @media screen and (max-width: 1050px) {
      padding: 50px 10px;
    }

    .sp_com {
        max-width: 1000px;
        width: 100%;
        margin: 0 auto 20px;
    }

    .tab_btn {
        display: none;

        @media screen and (max-width: 1050px) {
            display: flex;
            flex-wrap: wrap;
            gap: 3px;
        }

        .tabbtn {
            width: 50%;
            background: var(--bk-ksred);
            border: solid 2px var(--bk-ksred);
            border-radius: 10px 10px 0 0;
            
            &.js-active {
              background: var(--bk-white);
              color: var(--fc-ksred)!important;
              border-bottom: none;
            }
        }
    }

    .tab_cont {
        padding: 0;

        @media screen and (max-width: 1050px) {
          padding: 30px 5px;
          background: var(--bk-white);
          border-left: solid 2px var(--bk-ksred);
          border-right: solid 2px var(--bk-ksred);
          border-bottom: solid 2px var(--bk-ksred);
          border-radius: 0 0 10px 10px;
        }

        .tab_cont_in {
            display: block; 

            @media screen and (max-width: 1050px) {
                display: none;
            } 
  
            &.js-active {
            display: block;
            }
        }
    }
}

/*商品部*/

.wbonus-v {
  .sp_wrapper_item {
    margin: 0 0 15px;
  
    @media screen and (max-width: 1050px) {
      gap: 10px;
    }
  
    .itembox {
      background: var(--bk-white);
      border-radius: 10px;
      padding: 3% 8px;
      border: solid 1px var(--bk-lblue);
      box-shadow: 5px 5px 5px #005b46;
    
      @media screen and (max-width: 1050px) {
        width: calc((100% - 10px) / 2);
        box-shadow: none;
      }

      @media screen and (max-width: 767px) {
        padding: 50px 8px;
      }

      @media screen and (max-width: 378px) {
        width: 100%;
      }
    
      .catename {
        > span {
          background-color: var(--bk-ksblue);
          color: var(--fc-white) !important;
          position: relative;
          padding: 0 20px 0 50px;
        
          &:before {
            position: absolute;
            content: "";
            background: url(/excludes/KEC/img/special/bonus/winter/wbonus-icon.png) no-repeat;
            background-size: 80px;
            width: 80px;
            height: 79px;
            top: 50%;
            left: -14px;
            transform: translate(0, -50%);
          
            @media screen and (max-width: 1050px) {
              background-size: 60px;
              width: 60px;
              height: 58px;
            }
          }
        }
      }
    }
  }
}

.sp_wrapper_anc_v4 {
    background-color: var(--bk-lblue);
    padding: 0 5% 5%;
    margin: 0;

    .anc_box {
        max-width: 100%;

        > a {
            background-color: var(--bk-white);
            position: relative;
            height: 100px;
            padding: 10px 30px 10px 105px;
            color: var(--fc-ksblue) !important;

            @media screen and (max-width: 1050px) {
                width: calc((100% - 10px) / 2);
            }

            @media screen and (max-width: 767px) {
                width: 100%;
                height: 70px;
                padding: 10px 30px 10px 85px;
                justify-content: left;
            }


            &:after {
                content: "";
                background: url(/excludes/KEC/common/img/noimage/mk_noImage_11_m.jpg) no-repeat;
                background-size: 100px;
                width: 100px;
                height: 100px;
                top: 0;
                left: 0;
                right: unset;
                transform: none;
                border-radius: 5px 0 0 5px;
                position: absolute;

                @media screen and (max-width: 767px) {
                    background-size: 70px;
                    width: 70px;
                    height: 70px;
                }
            }
        }

        > a.beauty {

            &:after {
                content: "";
                background: url(/excludes/KEC/common/img/noimage/mk_noImage_11_m.jpg) no-repeat;
                background-size: 100px;

                @media screen and (max-width: 767px) {
                    background-size: 70px;
                }
            }
        }

        > a.helth {

            &:after {
                content: "";
                background: url(/excludes/KEC/common/img/noimage/mk_noImage_11_m.jpg) no-repeat;
                background-size: 100px;

                @media screen and (max-width: 767px) {
                    background-size: 70px;
                }
            }
        }

        > a.apple {

            &:after {
                content: "";
                background: url(/excludes/KEC/common/img/noimage/mk_noImage_11_m.jpg) no-repeat;
                background-size: 100px;

                @media screen and (max-width: 767px) {
                    background-size: 70px;
                }
            }
        }

        > a.pc {

            &:after {
                content: "";
                background: url(/excludes/KEC/common/img/noimage/mk_noImage_11_m.jpg) no-repeat;
                background-size: 100px;

                @media screen and (max-width: 767px) {
                    background-size: 70px;
                }
            }
        }

        > a.fragrance {

            &:after {
                content: "";
                background: url(/excludes/KEC/common/img/noimage/mk_noImage_11_m.jpg) no-repeat;
                background-size: 100px;

                @media screen and (max-width: 767px) {
                    background-size: 70px;
                }
            }
        }

        > a.cookitem {

            &:after {
                content: "";
                background: url(/excludes/KEC/common/img/noimage/mk_noImage_11_m.jpg) no-repeat;
                background-size: 100px;

                @media screen and (max-width: 767px) {
                    background-size: 70px;
                }
            }
        }
    }
}

.cat_com {
    max-width: 1000px;
    width: 100%;
    margin: 100px auto 20px;
}

.tit7 {

    > h3 {
        background-color: var(--bk-ksblue);
        border-bottom: solid 5px rgb(0 22 59);
        color: white;
    }
}

.wbonus-v {
  .sp_wrapper_item {
      .itembox {
          .i-com {
              .i-com-in {
                  > span {

                      @media screen and (max-width: 767px) {
                        width: 100%;
                      }

                      @media screen and (max-width: 378px) {
                        width: 93%;
                      }
                  }
              }
          }
      }
  }
}

    /*アイテム数による切り替え*/
        /*PCで表示させない場合の*/
.pc_none {
    display: none;

    @media screen and (max-width: 1050px) {
        display: block;
    }
}
        /*10枠（PC：3段（3-3-4） / SP：3タブ）*/
.type10 {
    .tab_btn {

        .tabbtn {
            width: calc((100% - 6px) / 3);
            height: 65px;
        }

        .tbcont1 {

            .sp_wrapper_item {

                .itembox {
                    width: calc((100% - 30px) / 3);
                }
            }
        }

        .tbcont2 {

            .sp_wrapper_item {

                .itembox {
                    width: calc((100% - 30px) / 3);
                }
            }
        }
    }
}