@charset "UTF-8";

/*---------- CARD WORKS ----------*/
.c-card-works {
  position: relative;
  box-sizing: border-box;
  background-color: #ffffff;
  box-shadow: 0 0 12px rgba(77, 77, 77, .1);
}

.c-card-works::after {
  position: absolute;
  z-index: -1;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #dfdfdf;
}

.c-card-works__link {
  text-decoration: none;
}

.c-card-works__heading {
  margin-bottom: 15px;
}

.c-card-works__title,
.c-card-works__job {
  line-height: 1.5;
  font-weight: 700;
}

.c-card-works__title {
  /* white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; */
  margin: 0 0 10px 0;
  padding-bottom: 10px;
  border-bottom: 1px dashed #4d4d4d;
  color: #000000;
  font-size: 1.125em;
}

.c-card-works__job {
  margin: 0;
  color: #1d5b87;
}

.c-card-works__desc {
  margin: 0;
  line-height: 1.8;
  color: #4d4d4d;
}

.c-card-works__desc p {
  margin: 0;
}

.c-card-works .m-taglist {
  margin-top: 7px;
}

@media (max-width: 743px) {
  .c-card-works {
    padding: 25px 20px;
  }

  .c-card-works::after {
    top: 5px;
    left: 5px;
  }
}

@media (min-width: 744px) {
  .c-card-works {
    padding: 30px 25px;
  }

  .c-card-works::after {
    top: 8px;
    left: 8px;
  }
}

@media (hover: hover) {
  .c-card-works__title {
    transition: color 0.2s linear;
  }

  .c-card-works__link:hover .c-card-works__title {
    color: #00a0e9;
  }

  .c-card-works__link:hover .c-card-works__desc {
    text-decoration: underline;
  }
}

/*---------- LIST CARD WORKS ----------*/
.c-list-card-works {
  margin: 0 0 -96px 0;
  padding: 0;
  transform: translateY(-96px);
  list-style: none;
}

@media (max-width: 743px) {
  .c-list-card-works .c-card-works:not(:first-child) {
    margin-block-start: 30px;
  }
}

@media (min-width: 744px) {
  .c-list-card-works {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 28px;
  }

  .c-list-card-works .c-card-works {
    width: calc(50% - 1.4rem);
  }
}

/*---------- SECTION WORKS ----------*/
.p-works {
  background-color: #f5f5f5;
}

@media (max-width: 743px) {
  .p-works {
    padding-block-end: 45px;
  }
}

@media (min-width: 744px) {
  .p-works {
    padding-block-end: 70px;
  }
}