@charset "UTF-8";

/*  content-title */
.content-title {
  padding-top: 5vw;
}


/* works */
.works-inner img {
  width: 100%;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
}

.works-text-content {
  margin: clamp(30px, 5vw, 50px) 0;
}

.works-text-content dt {
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 600;
}

.works-text-content dd {
  font-size: clamp(12px, 2vw, 16px);
  margin: clamp(20px, 4vw, 40px) 0;
  white-space: pre-wrap;
}

.works-text-content dd.color-anim {
  color: #b8b8b8;
}

.responsibility span {
  font-size: clamp(11px, 1.5vw, 12px);
  font-weight: 500;
}

.responsibility span.color-anim {
  color: #b8b8b8;
}


.responsibility span:not(:last-of-type)::after {
  content: "/";
  margin: 0 5px;
}


/* btn */
.single-btn-back {
  width: 120px;
  height: 40px;
  border-radius: 25px;
  background-color: #e6e6e6;
}

.single-btn-back.color-anim{
  background-color: #525252;
}


.common-btn {
  width: 100%;
  height: 100%;
  border-radius: 25px;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
  filter: saturate(0.9);
  transition: transform .5s ease;
  animation: right-slide 5s ease-in-out infinite;
}

@keyframes right-slide {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(15%);
  }

  12% {
    transform: translateX(0);
  }

  14% {
    transform: translateX(4%);
  }

  15% {
    transform: translateX(0%);
  }

  16% {
    transform: translateX(2%);
  }

  17% {
    transform: translateX(0%);
  }
  18% {
    transform: translateX(1%);
  }
  19% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(0);
  }
}

.common-btn:hover {
  animation: none;
  transform: translateX(15%);
}

.common-btn a {
  display: block;
  width: 100%;
  height: 100%;
  color: #FCFCFC;
  position: relative;
}

.common-btn a span {
  margin-left: 7px;
}



.common-btn a p {
  font-weight: 500;
  font-size: 12px;
  width: max-content;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



@media(max-width: 770px) {

  /* common */
  .contents {
    margin: 60px auto;
  }



  .content-title {
    padding-top: calc(5vw + 80px);
  }
}