/* Top-page works cards: restrained Japanese-modern treatment. */
.works .work-list {
  gap: 26px;
}

.works .work-item {
  min-width: 0;
}

.works .work-block {
  position: relative;
  gap: 0;
  color: #26302f;
  background: #f7f5ee;
  border: 1px solid #d7d2c4;
  border-radius: 0;
  padding: 10px;
  overflow: visible;
  box-shadow: 7px 7px 0 #0d292b73;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.works .work-block::before,
.works .work-block::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.works .work-block::before {
  width: 36px;
  height: 1px;
  background: #a99057;
  top: 5px;
  left: 5px;
}

.works .work-block::after {
  width: 1px;
  height: 36px;
  background: #a99057;
  top: 5px;
  left: 5px;
}

.works .work-block:hover {
  border-color: #a99057;
  transform: translateY(-4px);
  box-shadow: 10px 12px 0 #0d292b80;
}

.works .work-img {
  background: #e5e1d6;
  border: 1px solid #ded9cb;
  aspect-ratio: 2 / 1;
  margin: 7px 7px 0;
  position: relative;
}

.works .work-img::after {
  content: "施工事例";
  color: #f8f6ef;
  background: #173b3de8;
  padding: 5px 13px 4px;
  font-family: "Noto Serif JP", "Yu Mincho", YuMincho, serif;
  font-size: 11px;
  letter-spacing: .18em;
  position: absolute;
  right: 0;
  bottom: 0;
}

.works .work-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  filter: saturate(.84) contrast(.96);
}

.works .work-block:hover .work-image {
  transform: scale(1.025);
}

.works .div-block-20,
.works .work-block > div:not(.work-img) {
  padding: 17px 15px 14px;
}

.works .work-title {
  color: #183b3d;
  min-height: 0;
  margin: 0 0 9px;
  font-family: "Noto Serif JP", "Yu Mincho", YuMincho, serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .035em;
}

.works .single-text {
  color: #5a5c57;
  margin-bottom: 13px;
  font-size: 12px;
  line-height: 1.85;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.works .work-info {
  gap: 5px;
  color: #5d625f;
  border-top: 1px solid #d8d3c7;
  border-left: 0;
  margin-top: 0;
  padding: 13px 0 0 18px;
  position: relative;
}

.works .work-info::before {
  content: "";
  background: #a99057;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 17px;
  left: 0;
  transform: rotate(45deg);
}

@media screen and (max-width: 767px) {
  .works .work-list {
    gap: 22px;
  }

  .works .work-block {
    box-shadow: 5px 6px 0 #0d292b73;
  }
}