.works .visual {
  background: url("/assets/images/works/bg_visual.jpg") 50% 50%/cover no-repeat;
  text-align: center;
  color: var(--white-color);
}
.works .visual .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
.works .section1 ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
}
.works .section1 ul li {
  flex: 1;
}
.works .section1 ul li a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.works .section1 ul li strong {
  position: absolute;
  top: 2.2917vw;
  left: 2.0833vw;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.875vw;
  text-align: left;
  color: var(--white-color);
}
.works .section1 ul li strong::after {
  background-color: var(--white-color);
  -webkit-mask-image: url("/assets/images/icons/icon_arrow_support.svg");
          mask-image: url("/assets/images/icons/icon_arrow_support.svg");
  -webkit-mask-position: 50% 50%;
          mask-position: 50% 50%;
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  content: "";
  width: 4rem;
  height: 4rem;
}
.works .section1 ul li .btn {
  position: absolute;
  right: 2.0833vw;
  bottom: 2.2917vw;
  padding: 0.8333vw 1.1979vw;
}

.system-dev .section1 .title {
  margin-top: 3.2rem;
}
.system-dev .section1 img {
  display: block;
  max-width: 139rem;
  margin: 17.1rem auto 0;
}
.system-dev .section2 .inner {
  padding-bottom: 7.2rem;
}
.system-dev .section2 .info {
  background-color: var(--gray-color);
}
.system-dev .section2 .info .inner {
  padding: 6.4rem 2rem;
}
.system-dev .section2 .info ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  -moz-column-gap: 6.1rem;
       column-gap: 6.1rem;
  row-gap: 2.4rem;
  margin-top: 5.6rem;
}
.system-dev .section2 .info ul li:nth-child(odd) .circle {
  background-color: #D9D9D9;
}
.system-dev .section2 .info ul li:nth-child(even) .circle {
  background-color: #E14848;
  color: var(--white-color);
}
.system-dev .section2 .info ul li:nth-child(even) .circle::before {
  border-left-color: #E14848;
}
.system-dev .section2 .info ul li:last-child .circle::before {
  display: none;
}
.system-dev .section2 .info ul .circle {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  position: relative;
  width: 23rem;
  height: 23rem;
  margin: 0 auto;
}
.system-dev .section2 .info ul .circle::before {
  position: absolute;
  right: -1.4rem;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 1.2rem solid transparent;
  border-bottom: 1.2rem solid transparent;
  border-left: 2.4rem solid #D9D9D9;
}
.system-dev .section2 .info ul .circle strong {
  font-size: 2.4rem;
  line-height: 150%;
}
.system-dev .section2 .info ul p {
  margin-top: 4rem;
  text-align: center;
}

.system-manage .section1 .title {
  margin-top: 3.2rem;
}
.system-manage .section1 img {
  display: block;
  max-width: 139rem;
  margin: 16.8rem auto 0;
}
.system-manage .section2 .inner {
  padding-bottom: 7.2rem;
}
.system-manage .section2 .info {
  background-color: var(--gray-color);
}
.system-manage .section2 .info .inner {
  padding: 6.4rem 2rem;
}
.system-manage .section2 .info img {
  margin-top: 11.6rem;
}

.system-dev-support .section1 .title {
  margin-top: 3.2rem;
}
.system-dev-support .section1 img {
  display: block;
  margin: 20.9rem auto 0;
}
.system-dev-support .section2 .inner {
  padding-bottom: 0;
}

.works-links {
  display: flex;
  gap: 2rem;
}
.works-links li {
  flex: 1;
}
.works-links li a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.works-links li .txt-group {
  position: absolute;
  top: 2.9167vw;
  right: 2.5vw;
  bottom: 2.9167vw;
  left: 2.5vw;
  display: flex;
  flex-flow: column;
}
.works-links li .txt-group strong {
  font-size: 3.6rem;
  color: var(--white-color);
}
.works-links li .txt-group p {
  font-size: 2.4rem;
  margin-top: 1.2vw;
  color: rgba(255, 255, 255, 0.8);
}
.works-links li .txt-group .btn {
  width: -moz-max-content;
  width: max-content;
  margin-top: 2.9167vw;
}

@media screen and (min-width: 1921px) {
  .works .section1 ul li strong {
    position: absolute;
    top: 4.4rem;
    right: 4rem;
    left: 4rem;
    font-size: 3.6rem;
  }
  .works .section1 ul li .btn {
    position: absolute;
    right: 4rem 4.4rem;
    padding: 1.6rem 2.3rem;
  }
  .works-links li .txt-group {
    position: absolute;
    top: 5.6rem;
    right: 4.8rem;
    left: 4.8rem;
  }
  .works-links li .txt-group p {
    margin-top: 2.4rem;
  }
  .works-links li .txt-group .btn {
    margin-top: 5.6rem;
  }
}
@media screen and (max-width: 768px) {
  .works .section1 {
    height: auto !important;
  }
  .works .section1 ul {
    flex-flow: column;
  }
  .works .section1 ul li strong {
    top: 2.4rem;
    left: 2rem;
    font-size: 2.4rem;
  }
  .works .section1 ul li strong::after {
    width: 2rem;
    height: 2rem;
  }
  .works .section1 ul li .btn {
    right: 2rem;
    bottom: 2.4rem;
    padding: 1.6rem 2.3rem;
  }
  .works-links li .txt-group {
    top: 2.4rem;
    left: 2rem;
  }
  .works-links li .txt-group strong {
    font-size: 1.6rem;
  }
  .works-links li .txt-group p {
    font-size: 1.4rem;
  }
  .works-links li .txt-group .btn.large {
    min-width: 16rem;
    margin-top: 1.2rem;
    padding: 1.5rem 2rem;
  }
}