p,h4 {
 visibility: hidden;
}
.wf-active p,.wf-active h4 {
 visibility: visible;
}
*{
  box-sizing: border-box;
}
body{
  position: relative;
  margin: 0px;
  font-family: "Noto Sans JP", "ヒラギノ角ゴシック Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
p{
  font-weight: 500;
  font-size: 14px;
  color: #010101;
}
h1,h2,h4,h6,p{
  margin: 0;
}
ul{
  margin: 0;
  padding: 0;
}
li{
  list-style:none;
}
a {
  text-decoration: none;
}
.brandLogo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: 100%;
  background-image: url(/jeandubost/images/logo/brandlogo.svg);
  background-repeat: no-repeat;
  background-position: center;
  z-index: 10;
}
.companyLogo{
  position: absolute;
  top: 20px;
  left: 40px;
  width: 122px;
  height: 29px;
  background-image: url("/images/logo/zakkaworkslogo_w.svg");
  background-position: center;
  background-repeat: no-repeat;
  z-index: 10;
}
.companyLogo.-black{
  top: 32px;
  background-image: url("/images/logo/zakkaworkslogo.svg");
}
.container{
  max-width: 1940px;
  width: 100%;
  margin: auto;
}
.topimageWrapp{
  position: relative;
}
.topImage{
  display: block;
  width: 100%;
}
.topImage.-sp,.topImage.-sp2{
  display: none;
}
.textBlock{
  max-width: 50%;
  width: 100%;
  margin: auto;
  padding: 168px 0 199px;
  text-align: center;
}
.textBlock p.title{
  font-family: 'Outfit',"Noto Sans JP", sans-serif;
  text-align: center;
  margin-bottom: 37px;
  line-height: 2;
}
.textBlock p.text{
  line-height: 2;
  text-align: justify;
  margin-bottom: 40px;
}
.textBlock p.bottom{
  font-family: 'Outfit',"Noto Sans JP", sans-serif;
  text-align: right;
}
.textBlock img{
  width: 40px;
  margin: 0 0 40px;
}
.content{
  max-width: 1880px;
  padding: 0 50px 220px;
  margin: auto;
}
.content.-item{
  padding: 0 93px 220px;
}
.content.-product_color{
  padding: 0 14px 220px;
}
.item_grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 14px;
  row-gap: 58px;
}
.products {
  position: relative;
  text-align: center;
}
.item_grid img{
  width: 100%;
  margin-bottom: 20px;
  border-radius: 12px;
  display: none;
}
.item_grid_product img{
  width: 100%;
  border-radius: 10px;
  display: block;
}
.item_grid img.selected{
  display: block;
}
.item_color{
  margin: 17px 0 6px;
  padding: 0 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.colorchip{
  position: relative;
  height: 24px;
  width: 24px;
  margin: 0 6px 8px;
  border-radius: 50%;
  border: 1px solid #fff;
  cursor: pointer;
}
.colorchip.milk{
  border: 1px solid #dfdfdf;
}
.colorchip:hover::before{
  position: absolute;
  content: "";
  top: -4px;
  left: -4px;
  width: 26px;
  height: 26px;
  border: 2px solid #dcdcdc;
  border-radius: 50%;
}
.colorchip.selected::before{
  position: absolute;
  content: "";
  top: -4px;
  left: -4px;
  width: 26px;
  height: 26px;
  border: 2px solid #72a7e9;
  border-radius: 50%;
}
.colorchip.milk{
  background-color: #fff;
}
.colorchip.cafeole{
  background-color: #978a80;
}
.colorchip.mandarin{
  background-color: #eb6e00;
}
.colorchip.blueberry{
  background-color: #2f3170;
}
.colorchip.black{
  background-color: #010101;
}
.colorchip.pistachio{
  background-color: #b9c400;
}
.colorchip.peach{
  background-color: #df3d85;
}
.colorchip.parisred{
  background-color: #d0102e;
}
.colorchip.parisblue{
  background-color: #005fa4;
}
.colorchip.banana{
  background-color: #f3c700;
}
.colorchip.chocolate{
  background-color: #503833;
}
.colorchip.stainless{
  background-color: #bfbdc4;
}
.colorchip.matcha{
  background-color: #676e44;
}
.colorchip.caviar{
  background-color: #5f5c5b;
}
.colorchip.olive{
  background-color: #746a60;
}
.colorchip.aqua{
  background-color: #00afdd;
}
.brandLogo.-product {
  top: 20px;
  width: 143px;
  height: 100px;
}
.item_grid p.name{
  font-size: 16px;
  font-family: 'Outfit',"Noto Sans JP", sans-serif;
  margin-top: 8px;
  margin-bottom: 6px;
}
.item_grid p.spec,.item_grid p.size,.item_grid p.text{
  font-family: 'Outfit',"Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 300;
}
.item_grid p.size span,.item_grid p.text{
  font-size: 12px;
}
.item_grid p.size.-title{
  margin-bottom: 4px;
}
.item_grid p.text{
  margin-bottom: 10px;
}
.item_grid .button{
  margin-top: 20px;
}
.color_name_area p{
  display: none;
}
.color_name_area p.selected{
  display: block;
}
.productTopWrap {
  max-width: 1880px;
  position: relative;
  padding: 94px;
}
.productTopGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin: auto;
}
.productTopGrid img{
  width: 100%;
  margin: auto;
}
.productTopGrid_text{
  text-align: center;
}
.item_grid_product{
  display: grid;
  grid-template-columns: repeat(8,1fr);
  column-gap: 14px;
  row-gap: 14px;
}
.item_grid_product.-large{
  grid-template-columns: repeat(3,1fr);
}
.productTopGrid_text .name{
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 24px;
  margin-bottom: 8px;
  letter-spacing: .025em;
}
.productTopGrid_text .nameJan {
  font-weight: 500;
  font-size: 14px;
}
.productTopGrid_text .explain {
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
  margin: 17px 0;
}
.productTopGrid_text .size{
  font-family: 'Outfit',"Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 300;
}
.productTopGrid_text .size span{
  font-size: 13px;
}
.productTopGrid_text .button {
  font-family: 'Outfit',"Noto Sans JP", sans-serif;
  letter-spacing: .025em;
  font-size: 15px;
  color: #fff;
  display: inline-flex;
  height: 37px;
  width: 180px;
  border-radius: 20px;
  background-color: #191c1f;
  align-items: center;
  justify-content: space-evenly;
  margin-top: 37px;
}
.colorName{
  font-size: 12px;
  color: #555;
  position: absolute;
  bottom: 4%;
  width: 100%;
}

@media screen and (max-width:1300px){
.content {
  padding: 0 30px 220px;
}
.companyLogo {
  left: 28px;
  top: 25px;
}
.content.-item {
    padding: 0 40px 220px;
}
.item_grid, {
  grid-template-columns: 1fr 1fr 1fr;
}
.productTopWrap {
  padding: 94px 40px;
}
.companyLogo.-black {
    top: 32px;
    left: 40px;
}
}
@media screen and (max-width:1024px){
.textBlock {
  max-width: none;
  padding: 120px 40px 128px;
}
.item_grid{
  grid-template-columns: 1fr 1fr;
  row-gap: 48px;
}
.productTopGrid img{
  max-width: 600px;
}
.brandLogo.-product {
  top: 10px;
  width: 143px;
  height: 100px;
}
.productTopGrid_text {
  padding: 0 50px;
}
.productTopGrid_text br{
  display: none;
}
.item_grid_product{
  grid-template-columns: repeat(6,1fr);
}
}
@media screen and (max-width:920px){
.productTopWrap {
  padding: 0;
}
.productTopGrid {
  grid-template-columns: 1fr;
  background-color: #f6f6f6;
}
.productTopWrap.-tablespoon .productTopGrid{
  background-color: #f6d1b8;
}
.productTopWrap.-tablefork .productTopGrid{
  background-color: #bedd92;
}
.productTopWrap.-steakknife .productTopGrid{
  background-color: #c8bb9c;
}
.productTopWrap.-englishknife .productTopGrid{
  background-color: #eee2d5;
}
.productTopWrap.-teaspoon .productTopGrid{
  background-color: #c1ad94;
}
.productTopWrap.-desertfork .productTopGrid{
  background-color: #f7f38e;
}
.productTopWrap.-cocktailfork .productTopGrid{
  background-color: #ecf1e2;
}
.productTopWrap.-specialityknife .productTopGrid{
  background-color: #f6ecef;
}
.productTopWrap.-butterknife .productTopGrid{
  background-color: #ceab8e;
}
.productTopWrap.-minicheeseknife .productTopGrid{
  background-color: #fed329;
}
.productTopWrap.-jamspoon .productTopGrid{
  background-color: #f3b9af;
}
.productTopWrap.-breadknife .productTopGrid{
  background-color: #c9ddc4;
}
.productTopWrap.-minicheeseknifeboardset .productTopGrid {
    background-color: #edceb4;
}
.productTopWrap.-cheeseboardset .productTopGrid {
    background-color: #6babd0;
}
.productTopGrid_text {
  padding: 80px 40px 100px;
  background-color: #fff;
}
.productTopGrid_text br{
  display: block;
}
.brandLogo.-product {
  top: 20px;
  width: 143px;
  height: 100px;
}
.companyLogo.-black {
  left: 30px;
  top: 30px;
  width: 96px;
  height: 22px;
  background-image: url(/images/logo/zakkaworkslogo.svg);
}
}
@media screen and (max-width:768px){
.textBlock p.text{
  margin-bottom: 30px;
}
.textBlock img {
    width: 34px;
    margin: 0 0 30px;
}
.content.-item {
  padding: 0 20px 220px;
}
.item_grid_product{
  grid-template-columns: repeat(4,1fr);
}
.item_grid_product.-large {
    grid-template-columns: repeat(2,1fr);
}
.productTopGrid_text br{
  display: none;
}
}
@media screen and (max-width:667px){
.topImage.-pc{
  display: none;
}
.topImage.-sp{
  display: block;
}
.brandLogo {
  width: 54%;
}
.companyLogo {
  left: 12px;
  top: 20px;
  width: 96px;
  height: 22px;
  background-image: url(/images/logo/zakkaworkslogo.svg);
}
}
@media screen and (max-width:430px){
  .topImage.-sp{
    display: none;
  }
  .topImage.-sp2{
    display: block;
  }
  .brandLogo {
    width: 65%;
  }
  .textBlock {
    padding: 80px 28px 100px;
  }
  .textBlock p.bottom {
    text-align: left;
    margin-top: 12px;
  }
  .item_grid{
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  .item_grid_product {
      grid-template-columns: repeat(3,1fr);
  }
  .item_grid_product.-large {
    grid-template-columns: repeat(1,1fr);
  }
  .item_grid p.name {
    padding: 0 4px;
  }
  .item_grid p.spec, .item_grid p.size, .item_grid p.text {
    padding: 0 4px;
  }
  .button {
    width: 100%;
    height: 44px;
    border-radius: 22px;
  }
  .companyLogo.-black {
    left: 20px;
    top: 20px;
}
.brandLogo.-product {
    top: 10px;
    width: 110px;
    height: 77px;
    left: auto;
    right: 20px;
    transform: translateX(0);
}
.productTopGrid_text {
    padding: 80px 30px 100px;
}
}