@charset "utf-8";

/*============================
#works
============================*/

#works > .flex:nth-of-type(n+2) {
  margin-top: 30px;
}

#works img {
  width: 260px;
  border-radius: 3px;
}

#works .detail {
  width: 480px;
}

#works .detail dl {
  padding: 20px;
  display: flex;
  width: 100%;
  background-color: #f8f8f8;
  border-radius: 3px;
}

#works .detail dl:nth-of-type(n+2) {
  margin-top: 8px;
}

#works .detail dl dt {
  width: 85px;
  font-weight: 700;
  line-height: 1;
  margin-right: 20px;
  border-right: 1px solid #10348f;
}

#works .detail dl dd {
  line-height: 1;
}

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

  #works > .flex:nth-of-type(n+2) {
    margin-top: 30px;
  }

  #works img {
    width: 100%;
    margin-bottom: 10px;
  }

  #works .detail {
    width: 100%;
  }

  #works .detail dl {
    padding: 15px 10px;
  }

  #works .detail dl:nth-of-type(n+2) {
    margin-top: 10px;
  }

  #works .detail dl dt {
    width: 70px;
    margin-right: 10px;
  }

  #works .detail dl dt,
  #works .detail dl dd {
    font-size: 14px;
  }
}