:root {
  --woo-a-c: #000;
  --woo-a-hover-c: #dcdcdc;
  --woo-button-c: #B66700;
  --woo-button-hover-c: #333;
  --woo-accent-c: #333;
  --woo-price-c: #000;
  --woo-max-width: 1200px;
  --woo-sidebar-width: 22%;
  @media (width < 960px){
    --woo-sidebar-width: 100%;
  }
}
.elementor-widget-off-canvas {
	--e-off-canvas-animation-duration: 500ms !important;
}

body.woocommerce-page{
  a{color: var(--woo-a-c) ;
    &:hover{
      color: var(--woo-a-hover-c) ;
    }
  }
  .price{color: var(--woo-price-c) !important;}
  #primary{
    max-width: var(--woo-max-width);
    margin:0 auto;
    div&{
      display: flex;
      flex-wrap: wrap;}
      #sidebar{
        width: var(--woo-sidebar-width);
        max-width: var(--woo-max-width);
        margin: 0 auto;
        padding-right:20px;
        .widget_product_search{
          form{
            display: flex;
            justify-content: space-between;
            input.search-field{
              width: 80%;
            }
            button{
              width: 10%;
            }
          }
        }
        .widget_product_categories{
          ul{
            list-style-type: none;
            display:flex;
            justify-content: space-between;
            margin:0;
            padding:0;
            li{
              padding: 10px;
              a{
                text-decoration: none;
              }
            }
          }
        }
      }
      main{flex: 1;
        div.product_upper_area{
          position: relative;
          display: flex;
          justify-content: space-between;
          height: 100%;
          @media (width < 960px){
            flex-wrap:wrap;
            flex-direction:column;
          }
          .woocommerce-product-gallery{
            position: sticky;
            top: 0;
            height: 100%;
            min-height: 500px;
            float: none;
            width: 55%;
            @media (width < 960px){
              width: 100%;
              padding:0 2%;
              position:relative;
            }
          }
          .entry-summary{
            width: 45%;
            padding-left: 4%;
            @media (width < 960px){
              width: 100%;
              padding:0 2%;
            }
            .woocommerce-product-details__short-description{
              font-size: 14px;
            }
            .product_meta span{
              font-size: 14px;
              display: block;
              padding:0.2em 0;
              span{display: inline;}
            }
            table.shop_attributes{
              border-top:none;
              border-collapse:collapse;
              border-spacing:0;
              th,td{border:none;}
            }
          }
        }
        p.woocommerce-verification-required{
          background-color: #fbfbfb;
          padding: 1em;
          border-radius: 10px;
          font-size: 12px;
        }
      }
    }
  /*Single-バリエーションなし*/
  form.cart:not(.variations_form){
    display: flex;
    align-items: center;
    input{
      height: 50px;
      border:2px solid #f5f5f5
    }
    button{
      width: 100%;
      height:50px
    }
  }
  /*Single-バリエーションあり*/
  form.cart.variations_form{
    .woocommerce-variation-add-to-cart{
      display: flex;
      align-items: center;
      input{
        height: 50px;
        border:2px solid #f5f5f5;
      }
      button{
        width: 100%;
        height:50px;
      }
    }
    .variations select{
      margin-right: inherit;
      padding: 5px 5px 5px 15px;
      border-radius: 60px;
    }
    th.label{
      text-align: left;
      vertical-align: middle;
    }
    td.value{
      text-align: right;
    }
    a.reset_variations{
      display: none !important;
    }
  }
  div.wc-block-cart__submit{
    a.wc-block-cart__submit-button{
      background-color: var(--woo-button-c);
      color:#ffffff;
      text-decoration: none;
      border-radius: 5px;
      &:hover{
        background-color: var(--woo-button-hover-c);
      }
    }
  }
  a.wc-block-components-checkout-return-to-cart-button{
    display: none;
  }
  button.wc-block-components-checkout-place-order-button{
    width: 100% !important;
    background-color: var(--woo-button-c);
    color: #ffffff;
    border:inherit;
    &:hover{
      background-color: var(--woo-button-hover-c);
    }
  }
  nav.woocommerce-MyAccount-navigation{
    ul{
      list-style-type: none;
      display: flex;
      flex-direction: column;
      li a{
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        text-align: center;
        height: 40px;
        border:1px solid #dcdcdc;
        border-radius: 5px;
        margin: 5px;
      }
    }
  }
}

/*reset*/
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt{
  background-color: var(--woo-button-c) !important;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:hover{
  background-color: var(--woo-button-hover-c) !important;
}
table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th,table tbody tr:hover>td, table tbody tr:hover>th{background-color:inherit !important;}
/*-------------------サイドバーカテゴリーフロート-------------------*/
.category_menu{
  position:relative;
  label {
    display: none;
    @media (width < 960px){
      font-size:13px;
      display: block;
      color: #000000;
      padding: 10px;
      margin: 0;
      border: 0px solid #fff;
    }
  }
  input[type="checkbox"].on-off{
    display: none;
    @media (width < 960px){
      & + ul{
          max-height: 0;
          overflow: hidden;
      }
      &:checked + ul{
          -webkit-transition: all 1s;
          transition: all 1s;
          max-height: 100vh;
      }
    }
  }

  ul{list-style-type: none;padding:0;margin: 0;}
  ul.cat_list {
    li{
      height:40px;
      line-height:40px;
      width:100%;
      position:relative;
      font-size:13px;
      &.cat_parent{
        border-bottom:1px solid rgba(242,242,242,0.9);
        z-index:1;
        &:hover + label + input + .cat_children_area {
          display: block;
        }
        a{
          display:block;
          text-decoration:none;
          &:hover{
            background-color:rgba(242,242,242,0.5);
          }
          @media (width < 960px){
            display:none;
            &:hover{
              background-color:#ff2626;
            }
          }
        }
        @media (width < 960px){
          border-bottom:1px #f2f2f2 solid;
          z-index:1;
          display:none;
          &:hover + .cat_children_area {
            display: block;
          }
        }
      }
      &.cat_children{
        height:40px;
        line-height:40px;
        font-size:12px;
        &:hover{
          display: block;
        }
        @media (width < 960px){
          &:hover{
            display: block;
          }
          a{
            text-indent:20px !important;
            text-decoration:none;
            font-size:12px;
          }
        }
      }
    }
    .cat_children_area{
      display:none;
      opacity:1;
      position:absolute;
      margin-left:90%;
      margin-top:-50px;
      width:200px;
      height:auto;
      z-index:9999;
      padding:5px 10px 5px;
      box-shadow:0 2px 8px rgba(77,77,77,0.2);
      -webkit-transition: all 1s;transition: all 1s;
      opacity: 1;
      border-radius:2px;
      background-color:#ffffff;
      &:hover{
        display: block;
        width:200px;
        height:auto;
        opacity: 1;
      }
      a{display: block;text-decoration:none;}
      @media (width < 960px){
        display:block;
        background-color:#ffffff;
        position:static;
        margin-left:0px;
        margin-top:0px;
        width:100%;
        padding:0px 0px 0px 0px;
        box-shadow:0 0px 0px rgba(77,77,77,0.2);
        margin: 0;
        border-radius:0px;
        &:hover{
          display:block;
          width:100%;
          height:auto;
          opacity: 1;
        }
      }
    }
  }
}


/*-------------------サイドバーカテゴリーフロート-------------------*/