body{
  font-family: 'Raleway', sans-serif;
  color: #000;
  font-size: 0.85rem;
  background: #fff;
  position: relative;
}
header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 3% 30px 3%;
  height: 90px;
  background: #fff;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
}
.navList{
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  color: #fff;
  padding: 36px 50px;
  transition: all 0.5s;
  z-index: 20;
  opacity: 0;
}
.navList li{
  margin-bottom: 15px;
  color: white;
  text-decoration: none;
}
.navList li a{
  color: white;
  text-decoration: none;
}

.open .navList{
  left: 0;
  opacity: 1;
}
.toggle_btn{
  width: 30px;
  height: 30px;
  position: relative;
  z-index: 20;
}
.toggle_btn span:first-of-type{
  display: block;
  width: 100%;
  height: 2px;
  background: #000;
  top: 40%;
  position: absolute;
}
.toggle_btn span:last-of-type{
  display: block;
  width: 100%;
  height: 3px;
  background: #000;
  top: 60%;
  position: absolute;
}
.open .toggle_btn span:first-of-type{
  transform: translateY(3px) rotate(-45deg);
  background: #fff;
}
.open .toggle_btn span:last-of-type{
  transform: translateY(-3px) rotate(45deg);
  height: 2px;
  background: #fff;
}
.logoBox{
  width: 200px;
}
.logoBox img{
  width: 100%;
}
#mask{
  display: none;
}
.open #mask{
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  cursor: pointer;
}
#top .product,
#product .product{
  padding: 0 40px 150px 40px; 
}
#top .imgBox,
#product .imgBox{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
#top .productBox,
#product .productBox{
  width: 23%;
  margin-bottom: 40px;
}
#top img,
#product img{
  width: 100%;
}
#top .productBox img,
#product .productBox img{
  margin-bottom: 10px;
}
.product .ViewMore{
  text-align: center;
}
.product .ViewMore span{
  font-size: 16px;
}
@media screen and (max-width: 1023px) {
  #top .product,
  #product .product{
    padding: 0 6% 150px 6%;
}
  #top .productBox,
  #product .productBox{
    width: 48%;
    margin-bottom: 40px;
  } 
}
/* footer */
footer{
  display: flex;
  padding: 0px 3% 25px 3%;
  justify-content: space-between;
}
.snsList{
  display: flex;
  justify-content: space-between;
  margin-right: auto;
}
.snsList li{
  margin-right: 30px;
}
@media screen and (max-width: 1023px) {
  footer{
    flex-direction: column;
  }
}
#top .product{
  padding-top: 60px;
  
}
.pagetitle{
  margin-bottom: 30px;
}
.pagelist{
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagelist li{
  margin-right: 30px;
}
/* itemページ */
#item .product .productInfo{
  display: flex;

}