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

/*-------------------------------------------------------------------
	#product
-------------------------------------------------------------------*/
#product {
	overflow: hidden;
 /zoom: 1;
 	margin-bottom:5px;
}
#product dl {
	float: left;
	width: 31.2%;
	margin: 0 3% 15px 0;
}
@media screen and (max-width: 480px) {
  #product dl {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
  }
}
#product dl.none {
	margin: 0 0 15px 0;
}
#product dl dt {
	margin-top: 7px;
	line-height:1.6;
	font-weight:bold;
}
#product dl dd.img {
  border: 1px solid #E5D7C6;
  position: relative;
  width: 100%;
  max-width: 200px;
  padding-top: 100%;
}
@media screen and (max-width: 680px) {
  #product dl dd.img {
    padding-top: 200px;
  }
}
#product dl dd.img a {
	width: 100%;
	height: 100%;
  position: absolute;
  top: 0;
  left: 0;
	display: block;
}
#product dl dd.img a img {
  padding: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 100%;
  max-height: 100%;
}

#product dl dd.comment {
	font-size: 0.85em;
}
@media screen and (max-width: 480px) {
  #product dl dd.comment {
    max-width: 350px;
  }
}