@font-face {
  font-family: "Oakes Grotesk";
  src: url(../fonts/OakesGroteskRegular.ttf);
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Oakes Grotesk";
  src: url(../fonts/OakesGroteskMedium.ttf);
  font-style: normal;
  font-weight: 500;
}

.font-en {
  font-family: "Oakes Grotesk", sans-serif;
}

h2 {
  font-family: "Oakes Grotesk", sans-serif;
  font-weight: 400;
}

.header {
  max-width: 100%;
}
/* .main {
  background: url(../img/main-bg.jpg) no-repeat center/cover;
  position: relative;
}
.main::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #a8a8a82d;
  z-index: 1;
} */

.main-inner {
  max-width: 1640px;
  padding-left: 2%;
  padding-right: 2%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  height: 100%;
  position: relative;
  z-index: 2;
}

.main-inner .main-text {
  width: 65%;
}

.main-inner .main-img {
  width: 35%;
}

.main-inner .main-text h1 {
  white-space: normal;
}

.color1 {
  color: #1d95d8;
}

.color2 {
  color: #f57e2d;
}

.text-en {
  font-size: clamp(22px, -2.13px + 3.14vw, 45px);
}

.main-inner .main-text .ja {
  opacity: 1;
}

.main-inner .main-text .ja1 span,
.main-inner .main-text .ja2 span {
  opacity: 1;
}

.service-list_item img {
  border-radius: 1em;
  box-shadow: 0px 0px 5px 0px #bbbbbb;
}

@media screen and (max-width: 767px) {
  .main-inner {
    padding-top: 38%;
    padding-left: 20px;
    padding-right: 20px;
    display: block;
  }

  .main-inner .main-text,
  .main-inner .main-img {
    width: 100%;
  }

  .main h1 .ja {
    font-size: 7vw;
  }

  .main h1 .large {
    font-size: 6.69vw;
  }
}