@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url(common.css);

 @charset 'UTF-8';
  .box {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
 }
 
  .article {
   width: 23.2%;
   margin: 0 calc((100% - 23.2% * 4) / 3) 50px 0;
 }
 
  .article:nth-child(4n) {
   margin-right: 0;
 }
 .square {
    width: 100%;
}

.square a,
.square span {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  background:#FFFAF8;
  padding-top: calc(100% - 2px);
  border: none;
  outline: none;
}
.square img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

  .title {
   margin-top: 15px;
   line-height: 1.4;
 }
 .price {
	color:#CC4B5A;
}
#product dl dd.noimage img{
	max-width: 100%;
	max-height: 100%;
}
 @media screen and (max-width: 480px) {
    .article {
     width: 49%;
     margin: 0 2% 30px 0;
   }
    .article:nth-child(2n) {
     margin-right: 0;
   }
 }
/*-------------------------------------------------------------------
	#product
-------------------------------------------------------------------*/
/*
#product {
	overflow: hidden;
/zoom: 1;
}
#product dl {
	float: left;
	width: 180px;
	margin-right: 30px;
	margin-bottom: 40px;
}
#product dl:nth-child(4n) {
	margin-right: 0;
}
#product dl dt {
	margin-top: 15px;
	margin-bottom: 3px;
}
#product dl dt a{
	font-size: 1em;
    font-weight: bold;
	text-decoration: none;

}
#product dl dt a:hover{
	text-decoration: underline;
}
#product dl dd.image a {
	width: 180px;
	height: 180px;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
	background:#FFFAF8;
}
#product dl dd.price {
	color:#CC4B5A;
}

#product dl dd.noimage a{
	width: 180px;
	height: 180px;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
	background:#FFFAF8;
}
#product dl dd.noimage img{
	max-width:180px;
	max-height:180px;
}
@media screen and (max-width: 768px){
    #product  {
        width: 100%;
    }
    #product dl {
        float: left;
        width: 30%;
    }
	#product dl:nth-child(4n) {
		margin-right: 30px;
	}
	#product dl:nth-child(3n) {
		margin-right: 0px;
	}
}
@media screen and (max-width: 680px){
      #product  {
       
        min-width: auto;
    }
    #product dl {
        float: none;
        width: max-content;
        margin: 0 auto 30px;
    }
	#product dl:nth-child(4n) {
		margin-right: auto;
	}
	#product dl:nth-child(3n) {
		margin-right: auto;
	}
	#product dl:nth-child(2n) {
		margin-right: auto;
	}
  
}
@media screen and (max-width: 480px){
    #product  {
        min-width: auto;
    }
    #product dl {
        float: none;
        width: max-content;
        margin: 0 auto 30px;
    }
	#product dl:nth-child(4n) {
		margin-right: auto;
	}
	#product dl:nth-child(3n) {
		margin-right: auto;
	}
	#product dl:nth-child(2n) {
		margin-right: auto;
	}
}
*/