.worksimage {
    width: 270px;
    height: 210px;
    overflow: hidden;
    margin: 25px 8px;
    position: relative;
    float: left;
    text-align: center;
    border-radius: 3px;
    padding: 9px 0 0 0;
    background-color: #dbdbdb;
}
.worksimage a{
  display: block;
  color: #fff;
  text-decoration: underline;
}
.worksimage .caption {
  font-size:    14px;
  color:      #fff;
  padding-top:    80px;
  border-radius: 3px;
}
.worksimage .mask {
  width:      100%;
  height:     190px;
  position:   absolute;
  top:      9px;
  left:     0;
  background-color: rgba(0,0,0,0.7);
  -webkit-transition: all 0.4s ease;
  transition:   all 0.4s ease;
  -webkit-transform:  scale(0); /* 大きさを０にして表示しない */
  transform:    scale(0);
}
.worksimage:hover .mask {
  -webkit-transform:  scale(1); /* 大きさを１にして表示する */
  transform:    scale(1);
}

.works-tag-baibai {
  font-size: 0.7em;
  margin: 30px auto;
  background-color: #2ebd1d;
  color: #fff;
  line-height: 2em;
  width:50px;
  border-radius: 30px;
}

.works-tag-chintai {
  font-size: 0.7em;
  margin: 30px auto;
  background-color: #2340ab;
  color: #fff;
  line-height: 2em;
  width:50px;
  border-radius: 30px;
}

.works-tag-syueki {
  font-size: 0.7em;
  margin: 30px auto;
  background-color: #981C9E;
  color: #fff;
  line-height: 2em;
  width:100px;
  border-radius: 30px;
}

@media screen and (max-width:768px) {

.worksimage {
    text-align: center;
    width: 100%;
    height: 235px;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    position: relative;
    float: left;
    background-color: #fff;
}
.worksimage .mask {
  width:      100%;
  height:     190px;
  position:   absolute;
  top:      0;
  left:     0;
  background-color: rgba(0,0,0,0.7);
  -webkit-transition: all 0.4s ease;
  transition:   all 0.4s ease;
  -webkit-transform:  scale(0); /* 大きさを０にして表示しない */
  transform:    scale(0);
}
.worksimage:hover .mask {
  -webkit-transform:  scale(1); /* 大きさを１にして表示する */
  transform:    scale(1);
}

  }