@charset "utf-8";
/* CSS Document */
.main-works{
  padding-top:30px;
}
.scrolldown4 span {
  color: #333 !important;
}

.works-title {
  font-size: 42vw;
  font-family: Century;
  font-weight: 400;
  color: #A29F9F;
  opacity: 0.2;
  letter-spacing: 0.3rem;
  right: 20px;
  top: 20rem;
  position: fixed;
  z-index: -1;
  /*-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  margin: 30px;
  position: absolute;
  right: 80px;
  top: 40px;*/
}
.works-contents {
  position: relative;
  margin: 10rem 5rem 20rem;
}
.works-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.works-list a{
  text-decoration: none;
}
.works-list img {
  height: 400px;
  border-radius: 10px;
  width: auto;
  border: solid 1px #e8e8e8;
}
.works-list li {
  list-style: none;
  margin: 25rem 7rem;
}
.works-letter p {
  display: inline-block;
  padding-top: 3rem;
}
.date {
  color:#292929;
  font-size: 1.5rem;
  padding-right: 5rem;
}
.title {
  color:#292929;
  font-size: 3rem;
}
.fadeIn {
  transform: translate(0, 20px);
  transition: 3s;
  opacity: 0;
}
.fadeIn.animated {
  transform: translate(0, 0);
  opacity: 1;
}
@media only screen and (max-width:820px) {
  .works-list li {
  margin: 15rem 7rem;
  }
}
@media only screen and (max-width:532px){
  .works-list li {
  margin: 10rem 7rem;
}
.fadeIn {
  transform: translate(0, 20px);
  transition: 3s;
  opacity: 1;
}
}