html {
  scroll-behavior: smooth;
}

.background-image-top {
  position: absolute;
  z-index: -1;
  width: 100%;
  top: 50px;
}

.background-image-top-sp {
  display: none;
}

.container {
  position: relative;
  background: none;
}

.content {
  padding: 80px 12.7% 120px;
}

.title-container {
  height: 398px;
  padding: 120px 0 0 0;
  margin-left: 12.7%;
}

.title-container span {
  font-family: "Noto Sans JP", Helvetica, serif;
}

.title-container h2 {
  font-family: "Inter", Helvetica, serif;
  color: var(--blackheading);
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 115%;
  letter-spacing: 2.56px;
}

.article-header {
  margin-bottom: 40px;
}

.solution-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

.solution-wrapper {
  display: flex;
  border: 1px solid var(--grayline);
  background: var(--white);
}

.solution-wrapper a {
  width: 100%;
}

.solution-wrapper a:hover {
  text-decoration: none;
}

.solution-image {
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
  width: 130px;
  height: 130px;
  flex: 0 0 auto;
  border-right: 1px solid var(--grayline);
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon_arrow {
  flex: 0 0 auto;
}

.solution-description {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 8px;
  height: 100%;
}

.solution-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  gap: 10px;
}

.solution-title {
  color: var(--blackheading);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 0.72px;
}

.solution-content {
  color: var(--graybody);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
}

.product-sales {
  background-image: url(/service/solution/img/product-sales.png);
}

.systena-cloud-market {
  background-image: url(/service/solution/img/systena-cloud-market.png);
}

.super-micro-computer {
  background-image: url(/service/solution/img/super-micro-computer.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.multi-cloud-azo {
  background-image: url(/service/solution/img/multi-cloud-azo.png);
}

.oci-support-service {
  background-image: url(/service/solution/img/oci-support-service.png);
}

.microsoft-azure {
  background-image: url(/service/solution/img/microsoft-azure.png);
}

.microsoft-office365 {
  background-image: url(/service/solution/img/microsoft-office365.svg);
}

.aws-support-service {
  background-image: url(/service/solution/img/aws-support-service.svg);
}

.network-support-service {
  background-image: url(/service/solution/img/network-support-service.png);
}

.car-system {
  background-image: url(/service/solution/img/car-system.png);
}

.public-infra {
  background-image: url(/service/solution/img/public-infra.png);
}

.internet-service {
  background-image: url(/service/solution/img/internet-service.png);
}

.robot-ai {
  background-image: url(/service/solution/img/robot-ai.png);
}

.smart-device {
  background-image: url(/service/solution/img/smart-device.png);
}

.btob-service {
  background-image: url(/service/solution/img/btob-service.png);
}

.financial-service {
  background-image: url(/service/solution/img/financial-service.png);
}

.quality-service {
  background-image: url(/service/solution/img/quality-service.png);
}

.offshore-service {
  background-image: url(/service/solution/img/offshore-service.png);
}

.winactor-service {
  background-image: url(/service/solution/img/winactor-service.png);
}

.helpdesk-service {
  background-image: url(/service/solution/img/helpdesk-service.png);
}

.system-service {
  background-image: url(/service/solution/img/system-service.png);
}

.ui-path-service {
  background-image: url(/service/solution/img/ui-path-service.png);
}

.kaonavi-service {
  background-image: url(/service/solution/img/kaonavi.png);
}

.hennge-one-service{
  background-image: url(/service/solution/img/hennge-one-service.svg);
}

.bizrobo-service {
  background-image: url(/service/solution/img/bizrobo-service.png);
}

.argos-rpa-plus {
  background-image: url(/service/solution/img/argos-rpa-plus.png);
}

.spa-service {
  background-image: url(/service/solution/img/spa-service.png);
}

.invoice-agent {
  background-image: url(/service/solution/img/invoice-agent.png);
}

.major-flow {
  background-image: url(/service/solution/img/major-flow.png?v=20250303_1630);
}

.asteria-warp {
  background-image: url(/service/solution/img/asteria-warp.png);
}

.ocr-rpa-service {
  background-image: url(/service/solution/img/ocr-rpa-service.png);
}

.smm-rpa-service {
  background-image: url(/service/solution/img/smm-rpa-service.png);
}

.roboware-service {
  background-image: url(/service/solution/img/roboware-service.png);
}

.microsoft-teams {
  background-image: url(/service/solution/img/microsoft-teams.svg);
}

.online-service {
  background-image: url(/service/solution/img/online-service.png);
}

.platio-service {
  background-image: url(/service/solution/img/platio-service.png);
}

.azure-service {
  background-image: url(/service/solution/img/azure-service.png);
}

.security-service {
  background-image: url(/service/solution/img/security-service.png);
}

.elearning-service {
  background-image: url(/service/solution/img/elearning-service.png);
}

.scroll-item {
  position: absolute;
  margin-top: -110px;
}

.case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navigation-wrapper {
  flex-flow: wrap;
}

@media screen and (max-width: 1280px) {
  .background-image-top {
    position: absolute;
    z-index: -1;
    width: 100%;
    top: 100px;
  }
  
  .background-image-top-sp {
    display: none;
  }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
  .solution-image {
    height: auto;
  }
}

@media screen and (max-width: 1024px) {
  .background-image-top {
    position: absolute;
    z-index: -1;
    width: 100%;
    top: 150px;
  }
  
  .background-image-top-sp {
    display: none;
  }
}

@media screen and (min-width: 769px) and (max-width: 1280px) {
  .solution-wrapper {
    flex-direction: column;
  }

  .solution-image {
    width: 100%;
    height: 250px;
  }

  .solution-image {
    border-right: 0;
    border-bottom: 1px solid var(--grayline);
  }
}

@media screen and (max-width: 768px) {
  .background-image-top {
    position: absolute;
    z-index: -1;
    width: 100%;
    top: 200px;
  }
  
  .background-image-top-sp {
    display: none;
  }

  .hidden-mobile {
    display: none;
  }

  .solution-container {
    grid-template-columns: 1fr;
  }

  .solution-description {
    padding: 12px;
  }

  .solution-title {
    font-size: 16px;
  }

  .solution-content {
    font-size: 13px;
  }

  .solution-image {
    height: auto;
  }
}

@media screen and (max-width: 600px) {
  .background-image-top {
    display: none;
  }

  .background-image-top-sp {
    position: absolute;
    z-index: -1;
    width: 100%;
    top: 47px;
    display: block;
  }

  .title-container {
    min-height: 335px;
    padding-top: 80px;
    margin-left: 20px;
    height: auto;
  }

  .title-container h2 {
    font-size: 52px;
    line-height: 115%;
    letter-spacing: 2.08px;
  }

  .title-container .text-bold-orange {
    font-size: 16px;
    letter-spacing: 1.6px;
  }

  .content {
    padding: 60px 20px 80px;
  }

  .solution-wrapper {
    height: auto;
  }

  .solution-description {
    padding: 14px;
    gap: 4px;
  }

  .solution-title {
    font-size: 16px;
    letter-spacing: 0.64px;
  }

  .solution-content {
    font-size: 13px;
  }

  .solution-image {
    height: auto;
    min-height: 130px;
  }
}