@charset "UTF-8";
section {
  position: relative;
}
section.kv {
  overflow: hidden;
}
section.kv .kv-splide {
  animation: zoom 1s ease-in-out forwards;
}
section.kv .kv-txt {
  position: absolute;
  bottom: calc(70 / var(--pc));
  left: calc(120 / var(--pc));
  z-index: 2;
}
section.kv .kv-txt img {
  width: calc(1358 / var(--pc));
}
section.kv .kv-txt p {
  font-size: calc(20 / var(--pc));
  font-weight: 300;
  line-height: 150%;
  letter-spacing: 0.02em;
  color: #fff;
  margin-top: calc(40 / var(--pc));
}
section.customer {
  margin-top: calc(140 / var(--pc));
}
section.customer .scroll-wrapper {
  position: relative;
}
section.customer .scroll-wrapper .scroll-container {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
section.customer .scroll-wrapper .scroll-container .scroll-row {
  display: flex;
  overflow: hidden;
  margin-bottom: calc(20 / var(--pc));
}
section.customer .scroll-wrapper .scroll-container .scroll-row .image-track {
  display: flex;
  gap: calc(20 / var(--pc));
  width: max-content;
  will-change: transform;
}
section.customer .scroll-wrapper .scroll-container .scroll-row .image-track img {
  width: auto;
  height: calc(91 / var(--pc));
  flex-shrink: 0;
  user-select: none;
  pointer-events: none;
}
section.customer #trackRight {
  animation: marqueeLeft 30s linear infinite;
}
section.customer #trackLeft {
  animation: marqueeRight 30s linear infinite;
}
@keyframes marqueeLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes marqueeRight {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
section.works {
  margin-top: calc(60 / var(--pc));
  text-align: center;
}
section.works canvas {
  display: block;
  width: 100vw !important;
  height: auto !important;
  margin: 0 auto;
}
section.works #caption {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
section.works #caption img {
  height: calc(35 / var(--pc));
}
section.feature {
  margin-top: calc(160 / var(--pc));
}
section.feature .scroll-section {
  position: relative;
}
section.feature .scroll-section .background-fixed {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: background-image 0.6s ease-in-out;
}
section.feature .scroll-section .steps {
  position: relative;
  z-index: 1;
}
section.feature .scroll-section .steps .step {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
}
section.feature .scroll-section .steps .step .txt-box {
  width: calc(582 / var(--pc));
  height: 100vh;
  position: absolute;
  padding-left: calc(99 / var(--pc));
}
section.feature .scroll-section .steps .step .txt-box .num {
  font-size: calc(18 / var(--pc));
  font-weight: 500;
  letter-spacing: -0.04em;
  position: absolute;
  top: 0;
  left: 0;
}
section.feature .scroll-section .steps .step .txt-box dl dt {
  font-size: calc(60 / var(--pc));
  font-weight: 700;
  line-height: 100%;
  letter-spacing: calc(2.4 / var(--pc));
}
section.feature .scroll-section .steps .step .txt-box dl dd {
  font-size: calc(12 / var(--pc));
  margin-top: calc(17 / var(--pc));
  font-weight: 300;
  line-height: 140%;
  letter-spacing: calc(0.48 / var(--pc));
}
section.feature .scroll-section .steps .step .txt-box .eng {
  margin-top: calc(50 / var(--pc));
  font-size: calc(18 / var(--pc));
  line-height: 160%;
  letter-spacing: 0.04em;
  font-weight: 400;
}
section.feature .scroll-section .steps .step:nth-of-type(odd) .txt-box {
  left: calc(120 / var(--pc));
}
section.feature .scroll-section .steps .step:nth-of-type(even) .txt-box {
  right: calc(192 / var(--pc));
}
section.service {
  margin-top: calc(160 / var(--pc));
}
section.service::before, section.service::after {
  display: block;
  content: "";
  position: absolute;
}
section.service::before {
  width: 0;
  height: 1px;
  border-top: 1px solid #A0A0A0;
  top: 0;
  transition: 3s;
}
section.service::after {
  width: 1px;
  height: 0;
  border-left: 1px solid #000;
  top: 0;
  left: 50%;
  transition: 4s;
}
section.service.active::before {
  width: 100%;
}
section.service.active::after {
  height: calc(1035 / var(--pc));
}
section.service .service-container {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  justify-content: space-between;
}
section.service .service-container::after {
  display: block;
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  border-top: 1px solid #000;
  bottom: 0;
  transition: 3s;
}
section.service .service-container.active::after {
  width: 100%;
}
section.service .service-container .service-item {
  width: 50%;
  height: calc(345 / var(--pc));
  display: flex;
  align-items: center;
  padding-left: calc(70 / var(--pc));
}
section.service .service-container .service-item:nth-of-type(1) {
  justify-content: flex-end;
  padding-right: calc(70 / var(--pc));
}
section.service .service-container .service-item .service-item-inner {
  width: calc(610 / var(--pc));
  position: relative;
}
section.service .service-container .service-item .service-item-inner:hover .arrow {
  transform: translateX(5px);
}
section.service .service-container .service-item .service-item-inner .arrow {
  position: absolute;
  top: 0;
  right: 0;
}
section.service .service-container .service-item .service-item-inner h3 {
  font-size: calc(45 / var(--pc));
  font-weight: 700;
  line-height: 120%;
  letter-spacing: calc(0.9 / var(--pc));
}
section.service .service-container .service-item .service-item-inner h3 span {
  display: block;
  font-size: calc(12 / var(--pc));
  font-weight: 300;
  line-height: 140%;
  letter-spacing: calc(0.48 / var(--pc));
}
section.service .service-container .service-item .service-item-inner ul {
  display: flex;
  flex-wrap: wrap;
  gap: calc(5 / var(--pc)) calc(12 / var(--pc));
  margin-top: calc(30 / var(--pc));
  padding-top: calc(30 / var(--pc));
  border-top: 1px solid #8F8F8F;
}
section.service .service-container .service-item .service-item-inner ul li {
  display: flex;
  gap: 0 calc(5 / var(--pc));
  align-items: center;
  font-size: calc(15 / var(--pc));
  font-weight: 600;
  line-height: 165%;
  letter-spacing: calc(0.6 / var(--pc));
}
section.service .service-container .service-item .service-item-inner ul li::before {
  display: inline-block;
  content: "";
  width: calc(8 / var(--pc));
  height: calc(8 / var(--pc));
  background: #000;
}
section.service .service-container .service-item .service-item-inner a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
section.service .flexbx {
  width: calc(1360 / var(--pc));
  margin: calc(70 / var(--pc)) auto 0;
  background: #414141;
  display: flex;
  align-items: center;
  padding: calc(42 / var(--pc)) calc(70 / var(--pc)) calc(45 / var(--pc));
  position: relative;
}
section.service .flexbx::after {
  display: block;
  content: "";
  width: calc(37 / var(--pc));
  height: calc(36 / var(--pc));
  background: url(../img/home/link-blank.webp) no-repeat;
  background-size: cover;
  position: absolute;
  top: calc(50 / var(--pc));
  right: calc(70 / var(--pc));
  transition: 0.6s;
}
section.service .flexbx:hover::after {
  transform: translate(5px, -5px);
}
section.service .flexbx img {
  width: calc(260 / var(--pc));
  margin-left: calc(139 / var(--pc));
}
section.service .flexbx .flexbx-txt {
  width: calc(538 / var(--pc));
  color: #fff;
  margin-left: calc(284 / var(--pc));
}
section.service .flexbx .flexbx-txt dl dt {
  font-size: calc(28 / var(--pc));
  font-weight: 700;
  line-height: 150%;
  letter-spacing: calc(0.56 / var(--pc));
}
section.service .flexbx .flexbx-txt dl dd {
  font-size: calc(18 / var(--pc));
  font-weight: 500;
  line-height: 160%;
  letter-spacing: calc(0.72 / var(--pc));
  margin-top: calc(30 / var(--pc));
}
section.service .flexbx a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
section.aboutus {
  width: 100%;
  height: 130vh;
  margin-top: calc(160 / var(--pc));
}
section.aboutus .aboutus-inner {
  width: 100%;
  height: calc(884 / var(--pc));
  padding: calc(9 / var(--pc)) 0 0 calc(20 / var(--pc));
  background: url(../img/home/aboutus-img.webp) no-repeat;
  background-size: cover;
  position: sticky;
  top: 0;
}
section.aboutus .aboutus-inner .aboutus-txt {
  display: flex;
  flex-direction: column; /* 縦方向の配置 */
}
section.aboutus .aboutus-inner .aboutus-txt .line {
  display: flex;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: calc(80 / var(--pc));
  font-weight: 600;
  line-height: 110%;
  letter-spacing: 0.038em;
}
section.aboutus .aboutus-inner .aboutus-txt .line:nth-of-type(2) .char:nth-of-type(1).active, section.aboutus .aboutus-inner .aboutus-txt .line:nth-of-type(2) .char:nth-of-type(2).active, section.aboutus .aboutus-inner .aboutus-txt .line:nth-of-type(2) .char:nth-of-type(3).active, section.aboutus .aboutus-inner .aboutus-txt .line:nth-of-type(2) .char:nth-of-type(4).active {
  color: #10C4AE;
}
section.aboutus .aboutus-inner .aboutus-txt .line .char {
  color: #000;
  transition: color 0.25s ease;
}
section.aboutus .aboutus-inner .aboutus-txt .line .char.active {
  color: #fff;
}
section.aboutus .aboutus-inner a {
  line-height: 100%;
  display: block;
  width: calc(132 / var(--pc));
  margin: calc(39 / var(--pc)) calc(120 / var(--pc)) 0 auto;
  font-size: calc(15 / var(--pc));
  letter-spacing: 0.04em;
}
section.aboutus .aboutus-inner a:hover span {
  transform: translateX(5px);
}
section.news {
  margin-top: calc(160 / var(--pc));
  width: 100%;
}
section.news .news-container {
  position: relative;
}
section.news .news-container::before {
  display: block;
  content: "";
  width: 0;
  height: 1px;
  border-top: 1px solid #000;
  position: absolute;
  top: 0;
  left: 0;
  transition: 2s;
}
section.news .news-container.active::before {
  width: 100%;
}
section.news .news-container .news-item {
  display: flex;
  padding: calc(62 / var(--pc)) calc(120 / var(--pc)) calc(59 / var(--pc));
  text-align: left;
  position: relative;
  transition: 0.6s;
}
section.news .news-container .news-item::after {
  display: block;
  content: "";
  width: 0;
  height: 1px;
  border-top: 1px solid #000;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: width 1.2s ease-in-out;
}
section.news .news-container .news-item.active::after {
  width: 100%;
}
section.news .news-container .news-item:hover {
  padding-left: calc(140 / var(--pc));
}
section.news .news-container .news-item .date {
  width: calc(368 / var(--pc));
  font-size: calc(20 / var(--pc));
  font-weight: 600;
  line-height: 150%;
}
section.news .news-container .news-item .news-content {
  font-size: calc(15 / var(--pc));
  font-weight: 300;
  line-height: 150%;
  letter-spacing: calc(0.3 / var(--pc));
}
section.news .news-container .news-item a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  section.kv .kv-txt {
    bottom: calc(41 / var(--sp));
    left: calc(26 / var(--sp));
  }
  section.kv .kv-txt img {
    width: calc(285 / var(--sp));
  }
  section.kv .kv-txt p {
    font-size: calc(10 / var(--sp));
    font-weight: 400;
    letter-spacing: 0.04em;
    margin-top: calc(20 / var(--sp));
  }
  section.customer {
    margin-top: calc(70 / var(--sp));
  }
  section.customer .scroll-wrapper .scroll-container .scroll-row {
    margin-bottom: calc(20 / var(--pc));
  }
  section.customer .scroll-wrapper .scroll-container .scroll-row .image-track {
    display: flex;
    gap: calc(6 / var(--sp)) 0;
    will-change: transform;
  }
  section.customer .scroll-wrapper .scroll-container .scroll-row .image-track img {
    height: calc(61 / var(--sp));
  }
  section.customer #trackRight {
    animation: marqueeLeft 10s linear infinite;
  }
  section.customer #trackLeft {
    animation: marqueeRight 10s linear infinite;
  }
  section.works {
    margin-top: calc(70 / var(--sp));
  }
  section.works canvas {
    margin-bottom: calc(20 / var(--sp));
  }
  section.works #caption img {
    height: calc(21 / var(--sp));
  }
  section.feature {
    margin-top: calc(70 / var(--sp));
  }
  section.feature .scroll-section .steps .step {
    min-height: 100vh;
  }
  section.feature .scroll-section .steps .step .txt-box {
    width: calc(323 / var(--sp));
    padding-left: calc(86 / var(--sp));
  }
  section.feature .scroll-section .steps .step .txt-box .num {
    font-size: calc(9 / var(--sp));
    top: calc(5 / var(--sp));
  }
  section.feature .scroll-section .steps .step .txt-box dl dt {
    font-size: calc(30 / var(--sp));
    line-height: 110%;
    letter-spacing: 0;
  }
  section.feature .scroll-section .steps .step .txt-box dl dd {
    font-size: calc(8 / var(--sp));
    margin-top: calc(10 / var(--sp));
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0;
  }
  section.feature .scroll-section .steps .step .txt-box .eng {
    margin-top: calc(25 / var(--sp));
    font-size: calc(15 / var(--sp));
    line-height: 140%;
    letter-spacing: 0;
    font-weight: 500;
  }
  section.feature .scroll-section .steps .step:nth-of-type(odd) .txt-box {
    left: calc(23 / var(--sp));
  }
  section.feature .scroll-section .steps .step:nth-of-type(even) .txt-box {
    right: calc(29 / var(--sp));
  }
  section.service {
    margin-top: calc(80 / var(--sp));
  }
  section.service::before {
    border-top: 1px solid #000;
    transition: 1.2s;
  }
  section.service::after {
    display: none;
  }
  section.service .service-container::before, section.service .service-container::after {
    display: none;
  }
  section.service .service-container .service-item {
    width: 100%;
    height: auto;
    padding: calc(25 / var(--sp)) 0;
    padding-left: calc(45 / var(--sp));
    position: relative;
  }
  section.service .service-container .service-item::before {
    display: block;
    content: "";
    width: 0;
    height: 1px;
    border-top: 1px solid #000;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 1.2s;
  }
  section.service .service-container .service-item.active::before {
    width: 100%;
  }
  section.service .service-container .service-item:nth-of-type(1) {
    justify-content: flex-start;
    padding-right: calc(45 / var(--sp));
  }
  section.service .service-container .service-item .service-item-inner {
    width: calc(285 / var(--sp));
  }
  section.service .service-container .service-item .service-item-inner h3 {
    font-size: calc(26 / var(--sp));
    line-height: 115%;
    letter-spacing: 0.02em;
  }
  section.service .service-container .service-item .service-item-inner h3 span {
    font-size: calc(12 / var(--sp));
    line-height: 100%;
    letter-spacing: 0.04em;
    margin-top: calc(5 / var(--sp));
  }
  section.service .service-container .service-item .service-item-inner ul {
    gap: calc(3 / var(--sp)) calc(10 / var(--sp));
    margin-top: calc(15 / var(--sp));
    padding-top: calc(15 / var(--sp));
  }
  section.service .service-container .service-item .service-item-inner ul li {
    gap: 0 calc(5 / var(--sp));
    font-size: calc(14 / var(--sp));
    letter-spacing: 0;
    align-items: flex-start;
  }
  section.service .service-container .service-item .service-item-inner ul li::before {
    width: calc(4 / var(--sp));
    height: calc(4 / var(--sp));
    margin-top: calc(10 / var(--sp));
  }
  section.service .flexbx {
    width: calc(335 / var(--sp));
    margin-top: calc(30 / var(--sp));
    flex-direction: column;
    align-items: flex-start;
    padding: calc(30 / var(--sp));
  }
  section.service .flexbx::after {
    width: calc(26 / var(--sp));
    height: calc(25 / var(--sp));
    top: calc(30 / var(--sp));
    right: calc(30 / var(--sp));
  }
  section.service .flexbx img {
    width: calc(105 / var(--sp));
    margin-left: 0;
  }
  section.service .flexbx .flexbx-txt {
    width: 100%;
    margin-left: 0;
    margin-top: calc(12 / var(--sp));
  }
  section.service .flexbx .flexbx-txt dl dt {
    font-size: calc(17 / var(--sp));
    line-height: 100%;
    letter-spacing: 0.02em;
  }
  section.service .flexbx .flexbx-txt dl dd {
    font-size: calc(14 / var(--sp));
    font-weight: 300;
    line-height: 140%;
    letter-spacing: 0;
    margin-top: calc(20 / var(--sp));
  }
  section.aboutus {
    height: 140vh;
    margin-top: calc(70 / var(--sp));
  }
  section.aboutus .aboutus-inner {
    height: calc(541 / var(--sp));
    background: url(../img/home/aboutus-img_sp.webp) no-repeat;
    background-size: cover;
    padding: calc(8 / var(--sp));
  }
  section.aboutus .aboutus-inner .aboutus-txt .line {
    font-size: calc(36 / var(--sp));
    letter-spacing: 0;
    flex-wrap: wrap;
  }
  section.aboutus .aboutus-inner .aboutus-txt .line:nth-of-type(2) .char:nth-of-type(1).active, section.aboutus .aboutus-inner .aboutus-txt .line:nth-of-type(2) .char:nth-of-type(2).active, section.aboutus .aboutus-inner .aboutus-txt .line:nth-of-type(2) .char:nth-of-type(3).active, section.aboutus .aboutus-inner .aboutus-txt .line:nth-of-type(2) .char:nth-of-type(4).active {
    color: #10C4AE;
  }
  section.aboutus .aboutus-inner a {
    line-height: 100%;
    display: block;
    width: calc(92 / var(--sp));
    margin: calc(25 / var(--sp)) calc(20 / var(--sp)) 0 auto;
    font-size: calc(11 / var(--sp));
    color: #fff;
  }
  section.aboutus .aboutus-inner a .arrow {
    border: 1px solid #fff;
  }
  section.aboutus .aboutus-inner a .arrow::after {
    filter: invert(100%);
  }
  section.news {
    margin-top: calc(70 / var(--sp));
  }
  section.news .news-container .news-item {
    display: flex;
    padding: calc(30 / var(--sp)) calc(20 / var(--sp)) calc(32 / var(--sp));
  }
  section.news .news-container .news-item .date {
    width: calc(105 / var(--sp));
    font-size: calc(10 / var(--sp));
    line-height: 160%;
  }
  section.news .news-container .news-item .news-content {
    font-size: calc(12 / var(--sp));
    font-weight: 400;
    line-height: 160%;
    letter-spacing: 0;
  }
}/*# sourceMappingURL=home.css.map */letter-spacing: 0;
  }
}