/* Home Page Specific Styles */

/* Top page */
.top-page {
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  background: linear-gradient(
    to bottom,
    #98bee3 0%,
    #1685df 0%,
    #0b86e3 0%,
    #1288df 0%,
    #1085e2 0%,
    #1385de 0%,
    #0c88e8 1%,
    #1286db 1%,
    #1086e0 1%,
    #0f86e0 7%,
    #1188e2 9%,
    #0f86e0 9%,
    #0f86e0 10%,
    #1188e2 10%,
    #1288e0 11%,
    #1087e5 21%,
    #1087e5 22%,
    #0f86e2 22%,
    #1087e3 31%,
    #1283e1 38%,
    #1081df 38%,
    #117cda 42%,
    #107bd9 43%,
    #0f7bd6 43%,
    #1178d7 44%,
    #0e77d3 45%,
    #1175d3 46%,
    #0a6dca 51%,
    #0d6cca 53%,
    #0c6bc7 53%,
    #0f6ac7 53%,
    #0e69c2 54%,
    #0f68c4 54%,
    #0d66c2 55%,
    #0e65c2 55%,
    #0b64c0 56%,
    #0e5fbb 59%,
    #0d5eb9 60%,
    #0a5bb6 61%,
    #0c5bb7 62%,
    #0a5ab3 62%,
    #0a5ab3 63%,
    #0c59b1 63%,
    #0751a8 67%,
    #0a51a9 67%,
    #0a51a9 67%,
    #084ea4 68%,
    #0b4ea5 68%,
    #084ea4 68%,
    #084aa0 70%,
    #07479e 70%,
    #08499b 71%,
    #0a4b9d 71%,
    #07489a 72%,
    #0a489b 72%,
    #0a4999 73%,
    #084699 73%,
    #084797 73%,
    #094092 75%,
    #083f91 77%,
    #093e8e 77%,
    #083d8d 78%,
    #083986 79%,
    #083683 82%,
    #0a3681 82%,
    #07367e 82%,
    #0a347e 83%,
    #08327a 84%,
    #07337c 84%,
    #09307b 84%,
    #0a3278 84%,
    #092f76 86%,
    #082d74 86%,
    #072c73 88%,
    #082d74 89%,
    #0b2d74 89%,
    #082b6d 91%,
    #092c6e 92%,
    #072a6a 93%,
    #052b6a 94%,
    #082c68 94%,
    #092b6a 96%,
    #062867 96%,
    #082a69 96%,
    #082a69 98%,
    #062867 98%,
    #082a69 98%,
    #072968 100%
  );
  background-image: url("../img/top/top_pc.webp");
  background-repeat: no-repeat;
  background-size: cover;
}

@media (max-width: 750px) {
  .top-page {
    background-image: url("../img/top/top_sp.webp");
  }
}

.hexagon {
  position: absolute;
  z-index: -1;
}

.hex2 {
  top: min(190px, 8vw);
  right: calc(40% - 900px);
  width: 900px;
  height: 685px;
}

.hex1 {
  left: calc(3vw - 552px);
  bottom: -2vw;
  width: 552px;
  height: 485px;
}

.container-wrap {
  overflow: hidden;
}
.top-page .container {
  min-height: 100vh;
}

.top-page .main {
  /* padding: 190px 0 300px; */
  padding: min(190px, 10vw) 0 min(300px, 16vw);
}

.top-page .main-title {
  font-size: clamp(76px, calc(82 / 1280 * 100vw), 82px);
  font-weight: normal;
  margin-bottom: 60px;
  line-height: 1.3;
  font-family: "Lato", sans-serif;
  opacity: 0;
  transition: all 1s;
  transition-delay: 1s;
  color: #fff;
  white-space: nowrap;
}
@media (max-width: 1000px) {
  .top-page .main-title {
    white-space: normal;
  }
}
.top-page.pageLoaded .main-title {
  opacity: 1;
}

.top-page .main-text {
  font-size: 34px;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  opacity: 0;
  transition: all 1s;
  transition-delay: 1.75s;
  line-height: 1.7;
}

.top-page.pageLoaded .main-text {
  opacity: 1;
}

.top-page .contact-btn {
  position: absolute;
  bottom: 60px;
  right: min(160px, 10%);
  text-decoration: none;
  transform: translateX(50%);
  transition: all 0.3s ease;
  z-index: 1;
}

.top-page .contact-btn img {
  width: 140px;
  height: auto;
}

.top-page .contact-btn:hover {
  transform: translateX(50%) scale(1.05);
}

@media (max-width: 750px) {
  .top-page .contact-btn img {
    width: calc(72 / 375 * 100vw);
    height: auto;
  }

  .top-page .main {
    padding: calc((130 / 375) * 100vw) 0 calc((260 / 375) * 100vw);
  }

  .top-page .main-title {
    font-size: calc((43 / 375) * 100vw);
    margin-bottom: calc((42 / 375) * 100vw);
    line-height: 1.17;
  }

  .top-page .main-text {
    font-size: calc((18 / 375) * 100vw);
  }

  .top-page .contact-btn {
    width: calc((70 / 375) * 100vw);
    bottom: calc((70 / 375) * 100vw);
    right: calc((60 / 375) * 100vw);
  }

  .top-page .hex2 {
    top: calc((80 / 375) * 100vw);
    right: calc(38vw - ((270 / 375) * 100vw));
    width: calc((270 / 375) * 100vw);
    height: calc((210 / 375) * 100vw);
  }

  .top-page .hex1 {
    left: -20vw;
    bottom: calc((85 / 375) * 100vw);
    width: calc((165 / 375) * 100vw);
    height: calc((145 / 375) * 100vw);
  }

  /* .top-page .hamburger span {
    opacity: 1!important;
    background: #fff!important;
  }

  .top-page .hamburger span.text {
    background: none!important;;
  } */
}

/* Top page */

/* Business Page Styles */

/* Business Page Styles */

/* Company Page Styles */

/* Company Page Styles */