@charset "UTF-8";

/* コンテンツ
------------------------------------------------ */
#contents h2{
  margin-top: 20px;
  margin-bottom: 20px;
}

#works_list {
  overflow: hidden;
}

#works_list ul {
  display: grid;
  width: 100%;
  column-gap: 2.5%;
  grid-template-columns: repeat(auto-fit, 152px);
  justify-content: space-between
}

@media (min-width: 768px) {
  #works_list ul {
    grid-row-gap: 2em;
  }
}

#works_list li {
  max-width: 150px;
  min-height: 150px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /*
  display: inline-block;
  width: 46%;
  max-width: 152px;
  min-height: 152px;
  margin: 0 1.5% 1.5%;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  */
}

#works_list li:hover {
  background: url(../image/common/bg_dots.gif) repeat;
  border-radius: 8px;
}

#works_list img {
  /*
  border: 1px solid #CDC6B5;
  */
  border-radius: 8px;
}

/*
#works_list img:hover {
  border: 1px solid #65573E;
}
*/

#works_list h3 {
  font-size: 10px;
  color: #776B55;
  border-left: 2px solid #AAA08B;
  padding-left: 3px;
  margin-top: 5px;
}

#works_list h3:hover {
  border-left: 2px solid #776B55;
}

.category {
  font-size: 10px;
  padding-left: 5px;
}

.date {
  font-size: 9px;
  padding-left: 5px;
}

.comingsoon {
  width: 150px;
  height: 80px;
  display: block;
  color: #988d7a;
  text-align: center;
  line-height: 80px;
  background: url(../image/common/bg_dots.gif) repeat;
}