@charset "UTF-8";

.index-above .slider {
  --slider-navigation-position: 4.2%;
}

.index-above .swiper-slide .img {
  width: 100%;
}

.index-above-slide-1 .slider-item {
  position: absolute;
  top: 5.9210526316%;
  left: 11.2%;
  max-width: 77.3333333333%;
}

.index-above-slide-1 .slider-btn {
  position: absolute;
  top: 66.7763157895%;
  right: 2.6rem;
  left: 2.6rem;
  text-align: center;
}

.index-above-slide-1 .btn {
  width: 100%;
  max-width: 32.3rem;
  margin: 0.6rem auto;
  font-size: 1.8rem;
}

.index-above-slide-2 .slider-item {
  position: absolute;
  top: 6.25%;
  left: 5.3333333333%;
  max-width: 89.0666666667%;
}

.index-above-slide-2 .slider-logo {
  display: none;
}

.index-above-slide-2 .slider-btn {
  position: absolute;
  top: 66.1184210526%;
  right: 2.6rem;
  left: 2.6rem;
  text-align: center;
}

.index-above-slide-2 .btn {
  width: 100%;
  max-width: 32.3rem;
  margin: 0.6rem auto;
  font-size: 1.8rem;
}

.index-above-slide-3 .slider-item {
  position: absolute;
  top: 3.7828947368%;
  left: 6.6666666667%;
  max-width: 86.6666666667%;
}

.index-above-slide-3 .slider-btn {
  position: absolute;
  top: 66.1184210526%;
  right: 2.6rem;
  left: 2.6rem;
  text-align: center;
}

.index-above-slide-3 .btn {
  width: 100%;
  max-width: 32.3rem;
  margin: 0.6rem auto;
  font-size: 1.8rem;
}

.index-above-slide-4 .slider-item {
  position: absolute;
  top: 8.2236842105%;
  left: 12.2666666667%;
  max-width: 75.4666666667%;
}

.index-above-slide-4 .slider-btn {
  position: absolute;
  top: 66.1184210526%;
  right: 2.6rem;
  left: 2.6rem;
  text-align: center;
}

.index-above-slide-4 .btn {
  width: 100%;
  max-width: 32.3rem;
  margin: 0.6rem auto;
  font-size: 1.8rem;
}

.index-concept {
  padding: 3.2rem 0 5rem;
}

.index-concept .section {
  position: relative;
}

.index-concept-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  letter-spacing: 0.02em;
}

.index-concept-heading {
  display: inline-block;
  background: linear-gradient(269deg, #9538a2 0%, #3a5db3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-4);
  font-weight: bolder;
  font-size: 2.6rem;
  line-height: 1.2;
}

.index-concept .heading-border {
  margin-top: 4rem;
}

.index-concept-text {
  margin-top: 2.4rem;
  font-weight: bolder;
  font-size: 1.4rem;
  line-height: 1.7;
}

.index-concept-text p + p {
  margin-top: 1em;
}

.index-concept-img {
  margin: 4.6rem auto 0;
  width: 75.5417956656%;
  max-width: 38.2rem;
}

.index-concept-btn {
  position: relative;
  z-index: 1;
  margin-top: 4rem;
  text-align: center;
}

.index-concept-btn .btn {
  width: 100%;
  max-width: 28rem;
}

.index-service {
  padding: 4rem 0;
}

.index-service .box-service {
  margin-top: 3rem;
}

.index-service-btn {
  text-align: center;
}

.index-service-btn .btn {
  width: 100%;
  max-width: 28rem;
}

.index-introduction-companies {
  padding: 3.2rem 0 8.4rem;
}

.index-introduction-companies-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  margin: 3.2rem auto 0;
}

.index-introduction-companies-row .img {
  flex: 0 0 auto;
  max-width: calc(var(--company-logo-size) / 4 * 0.1rem);
  margin: 0.4rem;
}

.page-index .section-useful {
  background-color: var(--color-7);
}

.index-information {
  padding: 6.8rem 0 7.2rem;
}

.index-information .info-list {
  margin-top: 4rem;
}

.index-information-btn {
  text-align: center;
}

.index-information-btn .btn {
  width: 100%;
  max-width: 28rem;
}

@media (min-width: 768px) {
  .index-above .slider {
    --slider-navigation-position: 11%;
  }

  .index-above-slide-1 .slider-item {
    top: 19.3227091633%;
    left: 16.7642752562%;
    max-width: 28.4040995608%;
  }

  .index-above-slide-1 .slider-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    top: 70.3187250996%;
    right: auto;
    left: 16.1054172767%;
  }

  .index-above-slide-1 .btn {
    flex: 1 1 auto;
    height: 3.513909224vw;
    min-height: 1.8rem;
    margin: 0.6rem;
    padding: 0 0.878477306vw;
    font-size: clamp(10px, 1.1713030747vw, 16px);
  }

  .index-above-slide-1 .btn-main {
    width: 13.17715959vw;
  }

  .index-above-slide-1 .btn-primary-outline {
    width: 12.5915080527vw;
  }

  .index-above-slide-2 .slider-item {
    top: 6.5737051793%;
    left: 24.2313323572%;
    max-width: 51.9765739385%;
  }

  .index-above-slide-2 .slider-logo {
    display: block;
    position: absolute;
    top: 84.6613545817%;
    left: 25.0366032211%;
    max-width: 30.0146412884%;
  }

  .index-above-slide-2 .slider-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    top: 82.6693227092%;
    right: auto;
    left: 56.3689604685%;
  }

  .index-above-slide-2 .btn {
    flex: 1 1 auto;
    height: 3.513909224vw;
    min-height: 1.8rem;
    margin: 0.6rem;
    padding: 0 0.878477306vw;
    font-size: clamp(10px, 1.1713030747vw, 16px);
  }

  .index-above-slide-2 .btn-main {
    width: 13.17715959vw;
  }

  .index-above-slide-2 .btn-primary-outline {
    width: 12.5915080527vw;
  }

  .index-above-slide-3 .slider-item {
    top: 18.1274900398%;
    left: 17.0571010249%;
    max-width: 34.9926793558%;
  }

  .index-above-slide-3 .slider-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    top: 70.3187250996%;
    right: auto;
    left: 16.6178623719%;
  }

  .index-above-slide-3 .btn {
    flex: 1 1 auto;
    height: 3.513909224vw;
    min-height: 1.8rem;
    margin: 0.6rem;
    padding: 0 0.878477306vw;
    font-size: clamp(10px, 1.1713030747vw, 16px);
  }

  .index-above-slide-3 .btn {
    width: 12.5915080527vw;
  }

  .index-above-slide-4 .slider-item {
    top: 26.0956175299%;
    left: 16.5446559297%;
    max-width: 23.7920937042%;
  }

  .index-above-slide-4 .slider-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    top: 70.5179282869%;
    right: auto;
    left: 16.1054172767%;
  }

  .index-above-slide-4 .btn {
    flex: 1 1 auto;
    height: 3.513909224vw;
    min-height: 1.8rem;
    margin: 0.6rem;
    padding: 0 0.878477306vw;
    font-size: clamp(10px, 1.1713030747vw, 16px);
  }

  .index-above-slide-4 .btn {
    width: 12.5915080527vw;
  }

  .index-concept {
    padding: 10.2rem 0 14.8rem;
  }

  .index-concept-heading {
    font-size: 4.6rem;
  }

  .index-concept .heading-border {
    margin-top: 6.8rem;
  }

  .index-concept-text {
    margin-top: 8.4rem;
    font-size: 1.8rem;
  }

  .index-concept-img {
    position: absolute;
    right: 0;
    bottom: -13.2%;
    z-index: 0;
    width: 34%;
    margin-top: 0;
  }

  .index-concept-btn {
    margin-top: 10rem;
  }

  .index-concept-btn .btn {
    max-width: 23.5rem;
  }

  .index-service .box-service {
    margin-top: 5rem;
  }

  .index-service .box-service.service-realnet-mansion-summary {
    margin-top: 6.4rem;
  }

  .index-service-btn .btn {
    max-width: 33rem;
  }

  .index-introduction-companies {
    padding: 10rem 0 17.2rem;
  }

  .index-introduction-companies-row {
    justify-content: space-between;
    max-width: 97.6rem;
    margin-top: 7.2rem;
  }

  .index-introduction-companies-row .img {
    max-width: calc(var(--company-logo-size) / 2 * 0.1rem);
    margin: 1.4rem 0.8rem;
  }

  .page-index .section-useful {
    padding-bottom: 6rem;
  }

  .index-information {
    padding: 6.4rem 0 8.8rem;
  }

  .index-information .info-list {
    margin-top: 4.4rem;
  }

  .index-information-btn .btn {
    max-width: 23.6rem;
  }
}

@media (min-width: 1180px) {
  .index-concept-img {
    right: 1.2rem;
    bottom: -1.8rem;
    width: 100%;
  }
}

@media (min-width: 1366px) {
  .index-above-slide-1 .btn {
    height: 4.8rem;
    padding: 0 1.2rem;
  }

  .index-above-slide-1 .btn-main {
    width: 18rem;
  }

  .index-above-slide-1 .btn-primary-outline {
    width: 17.2rem;
  }

  .index-above-slide-2 .btn {
    height: 4.8rem;
    padding: 0 1.2rem;
  }

  .index-above-slide-2 .btn-main {
    width: 18rem;
  }

  .index-above-slide-2 .btn-primary-outline {
    width: 17.2rem;
  }

  .index-above-slide-3 .btn {
    width: 17.2rem;
    height: 4.8rem;
    padding: 0 1.2rem;
  }

  .index-above-slide-4 .btn {
    width: 17.2rem;
    height: 4.8rem;
    padding: 0 1.2rem;
  }
}

@media (max-width: 767.98px) {
  .index-introduction-companies .heading-border-text-notes {
    display: block;
    margin-top: 4rem;
  }
}