html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  background-color: #110800;
  line-height: 1;
  letter-spacing: 0;
  word-break: keep-all;
  color: #fff;
}

a {
  text-decoration: none;
  color: #fff;
  -webkit-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
}

a:hover {
  opacity: 0.7;
}

li {
  list-style: none;
}

.top-wrap {
  background-image: url("../img/service-bg.jpeg");
  background-size: cover;
  background-position: 50%;
  position: relative;
  z-index: 0;
  width: 100%;
  height: 60vh;
}
@media screen and (max-width: 1024px) {
  .top-wrap {
    height: 50vh;
  }
}
@media screen and (max-width: 768px) {
  .top-wrap {
    height: 35vh;
  }
}
@media screen and (max-width: 480px) {
  .top-wrap {
    height: 60vh;
  }
}
.top-wrap__ttl {
  position: absolute;
  top: 50%;
  left: 7.5%;
  -webkit-transform: translateY(-25%);
      -ms-transform: translateY(-25%);
          transform: translateY(-25%);
}
@media screen and (max-width: 768px) {
  .top-wrap__ttl {
    top: 67.5%;
  }
}
@media screen and (max-width: 480px) {
  .top-wrap__ttl {
    top: 77.5%;
    left: 10%;
  }
}
.top-wrap__ttl h1 {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: 0;
  font-size: clamp(1.25rem, 0.636rem + 2.73vw, 3.5rem);
  letter-spacing: clamp(-0.019rem, -0.01rem - 0.04vw, -0.052rem);
}

.case {
  margin-bottom: 0;
}
.case-wrap__con__block {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 7.5% 0;
}
@media screen and (max-width: 480px) {
  .case-wrap__con__block {
    margin: 18% 0 10%;
  }
}
@media screen and (max-width: 768px) {
  .case-wrap__con__block__body.__inner2 {
    width: 80%;
  }
}
@media screen and (max-width: 480px) {
  .case-wrap__con__block__body.__inner2 {
    width: 87.5%;
  }
}
.case-wrap__con__block.__first::before {
  content: "blockchain";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 4%;
  left: 0;
  z-index: -10;
  font-size: clamp(3rem, -0.784rem + 16.82vw, 16.875rem);
  background: -webkit-gradient(linear, left top, right bottom, from(rgba(254, 205, 34, 0.1)), to(rgba(254, 77, 2, 0.1)));
  background: -o-linear-gradient(top left, rgba(254, 205, 34, 0.1), rgba(254, 77, 2, 0.1));
  background: linear-gradient(to bottom right, rgba(254, 205, 34, 0.1), rgba(254, 77, 2, 0.1));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  overflow: hidden;
}
@media screen and (max-width: 480px) {
  .case-wrap__con__block.__first::before {
    font-size: clamp(3.5rem, 0.5rem + 13.33vw, 4.5rem);
    letter-spacing: clamp(-0.052rem, -0.007rem - 0.2vw, -0.068rem);
    top: 6%;
  }
}
.case-wrap__con__block.__second::before {
  content: "quantum\a computer";
  position: absolute;
  width: 100%;
  bottom: -10.5%;
  right: 1%;
  z-index: -10;
  text-align: right;
  font-size: clamp(3rem, -0.784rem + 16.82vw, 16.875rem);
  background: -webkit-gradient(linear, left top, right bottom, from(rgba(254, 205, 34, 0.1)), to(rgba(254, 77, 2, 0.1)));
  background: -o-linear-gradient(top left, rgba(254, 205, 34, 0.1), rgba(254, 77, 2, 0.1));
  background: linear-gradient(to bottom right, rgba(254, 205, 34, 0.1), rgba(254, 77, 2, 0.1));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  overflow: hidden;
  white-space: pre;
}
@media screen and (max-width: 1024px) {
  .case-wrap__con__block.__second::before {
    bottom: -10%;
  }
}
@media screen and (max-width: 768px) {
  .case-wrap__con__block.__second::before {
    bottom: -8%;
  }
}
@media screen and (max-width: 480px) {
  .case-wrap__con__block.__second::before {
    bottom: 9%;
  }
}
.case-wrap__con__block__ttl {
  position: relative;
}
@media screen and (max-width: 480px) {
  .case-wrap__con__block__ttl {
    margin-left: 5.5%;
  }
}
.case-wrap__con__block__ttl h2 {
  font-size: clamp(1rem, 0.864rem + 0.61vw, 1.5rem);
  letter-spacing: clamp(-0.015rem, -0.013rem - 0.01vw, -0.022rem);
  margin-left: 7.5%;
}
@media screen and (max-width: 480px) {
  .case-wrap__con__block__ttl h2 {
    margin-left: 10.5%;
  }
}
.case-wrap__con__block__ttl::before {
  position: absolute;
  content: "";
  width: 5%;
  height: 4px;
  top: 50%;
  background-color: #fff;
}
@media screen and (max-width: 480px) {
  .case-wrap__con__block__ttl::before {
    width: 8%;
  }
}
.case-wrap__con__block__head {
  margin: 6% 0 4%;
}
.case-wrap__con__block__head h3 {
  font-size: clamp(1.25rem, 1.114rem + 0.61vw, 1.75rem);
  letter-spacing: clamp(-0.019rem, -0.017rem - 0.01vw, -0.026rem);
}
@media screen and (max-width: 480px) {
  .case-wrap__con__block__head {
    text-align: center;
    margin: 12% 0;
  }
}
.case-wrap__con__block__txt {
  margin: 4% 0;
}
.case-wrap__con__block__txt p {
  font-size: clamp(0.625rem, 0.455rem + 0.76vw, 1.25rem);
  letter-spacing: clamp(-0.009rem, -0.007rem - 0.01vw, -0.019rem);
  font-weight: 500;
  line-height: 2;
}
@media screen and (max-width: 480px) {
  .case-wrap__con__block__txt {
    margin: 7.5% 0;
  }
}
.case-wrap__con__block__img {
  width: 100%;
  aspect-ratio: 51/19;
}
.case-wrap__con__block__img img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
.case-wrap__con__block__img .__second {
  -o-object-position: center top;
     object-position: center top;
}
.case-wrap__con__block__head2 {
  margin: 4% 0;
}
.case-wrap__con__block__head2 h3 {
  font-size: clamp(1.25rem, 1.114rem + 0.61vw, 1.75rem);
  letter-spacing: clamp(-0.019rem, -0.017rem - 0.01vw, -0.026rem);
}
@media screen and (max-width: 480px) {
  .case-wrap__con__block__head2 {
    text-align: center;
    margin: 12% 0;
  }
}
.case-wrap__con__block__txt2 p {
  font-size: clamp(0.625rem, 0.455rem + 0.76vw, 1.25rem);
  letter-spacing: clamp(-0.009rem, -0.007rem - 0.01vw, -0.019rem);
  font-weight: 500;
  line-height: 2;
}

.w-btn2 {
  margin-top: 5%;
}
@media screen and (max-width: 480px) {
  .w-btn2 {
    margin-top: 15%;
  }
}