.wrap__fv-about {
  background: linear-gradient(180deg, #e8eef7 0%, #e8eef7 50%, #ffffff 100%);
  overflow: clip;
  padding-bottom: 200px;
  padding-top: 100px;
  position: relative;
}
.wrap__fv-about .top-about__deco {
  bottom: 130px;
  height: 68px;
  position: absolute;
  right: 15px;
  width: 70px;
  z-index: 1;
}

.top-fv {
  overflow-anchor: none;
  position: relative;
}

.top-fv__body {
  margin-inline: auto;
  padding: 0 calc(10 / 375 * 100vw) calc(20 / 375 * 100vw);
  pointer-events: none;
  position: relative;
  width: 100%;
  z-index: 2;
}

.top-fv__contents {
  animation: fv-bubble-rise 2s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.22s;
  opacity: 0;
  padding: calc(24 / 375 * 100vw) calc(10 / 375 * 100vw) calc(16 / 375 * 100vw);
  pointer-events: visible;
  position: relative;
  z-index: 3;
}

.top-fv__bg {
  -webkit-text-stroke-color: #fff;
  -webkit-text-stroke-width: 1px;
  color: transparent;
  font-family: "Manrope", sans-serif;
  font-size: clamp(3.75rem, 1.2667129162rem + 10.595358224vw, 10.3125rem);
  font-weight: 500;
  left: 50%;
  letter-spacing: 0.03em;
  line-height: calc(180 / 165);
  max-width: none;
  pointer-events: visible;
  position: absolute;
  text-align: center;
  top: 29.5790671217%;
  transform: translateX(-50%);
  white-space: nowrap;
  width: -moz-max-content;
  width: max-content;
}

.top-fv__label {
  color: #47a5e9;
  font-family: "Manrope", sans-serif;
  font-size: clamp(0.875rem, 0.8276992936rem + 0.2018163471vw, 1rem);
  font-weight: 500;
  line-height: calc(25 / 16);
}

.top-fv__title {
  color: #1b58cd;
  font-size: clamp(1.5rem, 1.3107971746rem + 0.8072653885vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: calc(51 / 32);
}
.top-fv__title + .top-fv__title {
  margin-top: 0;
}

.top-fv__label + .top-fv__title {
  margin-top: calc(14 / 375 * 100vw);
}

.top-fv__visual {
  aspect-ratio: 1290/728;
  overflow: visible;
  pointer-events: none;
  position: relative;
  width: 100%;
  z-index: 2;
}

.top-fv__visual-inner {
  inset: 0;
  position: absolute;
}

@keyframes fv-bubble-rise {
  from {
    opacity: 0;
    transform: translateY(48px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.top-fv__visual-item {
  animation: fv-bubble-rise 2s cubic-bezier(0.22, 1, 0.36, 1) both;
  opacity: 0;
  overflow: visible;
  pointer-events: visible;
  position: absolute;
}
.top-fv__visual-item--main {
  animation-delay: 0.12s;
  height: 96.2912087912%;
  left: 22.3255813953%;
  top: 0%;
  width: 55.8914728682%;
}
.top-fv__visual-item--sub-01 {
  animation-delay: 0.55s;
  height: 37.5%;
  left: 78.2170542636%;
  top: 2.1615472127%;
  width: 21.7829457364%;
}
.top-fv__visual-item--sub-01::before {
  animation-delay: -3s;
}
.top-fv__visual-item--sub-02 {
  animation-delay: 0.28s;
  height: 33.7912087912%;
  left: 4.2635658915%;
  top: 54.835039818%;
  width: 19.6124031008%;
}
.top-fv__visual-item--sub-02::before {
  animation-delay: -7s;
}
.top-fv__visual-item--accent-01 {
  animation-delay: 0.4s;
  height: 48.0769230769%;
  left: -1.8604651163%;
  top: 0%;
  width: 27.1317829457%;
}
.top-fv__visual-item--accent-02 {
  animation-delay: 0.68s;
  height: 41.2087912088%;
  left: 78.6821705426%;
  top: 59.9544937429%;
  width: 23.2558139535%;
}

.top-fv__main-slide {
  border-radius: 50%;
  pointer-events: visible;
}
.top-fv__main-slide::after {
  aspect-ratio: 1/1;
  background: transparent;
  border-radius: 50%;
  box-shadow: inset 0 0 1vw 2.5vw #ffffff;
  content: "";
  height: 110%;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  z-index: 1;
}
.top-fv__main-slide .swiper-wrapper {
  border-radius: 50%;
  height: 100%;
  overflow: hidden;
}
.top-fv__main-slide .swiper-slide {
  height: 100%;
}
.top-fv__main-slide .swiper-slide img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: static;
  transform: scale(1);
  transition: transform 6.5s linear;
  width: 100%;
}
.top-fv__main-slide .swiper-slide-active img,
.top-fv__main-slide .swiper-slide-prev img {
  transform: scale(1.15);
}

.top-about {
  padding-inline: 20px;
  padding-top: 40px;
  position: relative;
  z-index: 2;
}

.top-about__inner {
  margin-inline: auto;
  max-width: 1044px;
}

.top-about__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.top-about__left {
  flex: 0 0 auto;
  width: 100%;
}

.top-about__lead {
  font-size: 22px;
  font-weight: 700;
  line-height: calc(42 / 26);
  margin-top: 26px;
}

.top-about__right {
  flex: 1;
  min-width: 0;
}

.top-service {
  background: linear-gradient(180deg, #c4d7f2 0%, #eff3fb 14.904%, #eff3fb 100%);
  border-radius: 40px 40px 0 0;
  margin-top: -118px;
  padding: 64px 20px 80px;
  position: relative;
  z-index: 2;
}

.top-service .c-title {
  margin-bottom: 40px;
}

.top-service__cards {
  display: grid;
  gap: 40px;
}

.top-service__card {
  color: inherit;
  display: block;
  margin-inline: auto;
  max-width: 450px;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.top-service__card-visual {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.top-service__card-visual img {
  aspect-ratio: 542/524;
  display: block;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
  width: 100%;
}

.top-service__card-bar {
  align-items: center;
  bottom: 0;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  left: 0;
  min-height: 80px;
  overflow: hidden;
  padding: 10px;
  position: absolute;
  right: 0;
}
.top-service__card-bar--01 {
  background-color: #3dbeed;
}
.top-service__card-bar--02 {
  background-color: #47a5e9;
}

.top-service__card-bar-body {
  color: #ffffff;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.top-service__card-label {
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: calc(20 / 14);
}

.top-service__card-arrow {
  position: relative;
  z-index: 1;
}

.top-service__card-desc {
  font-size: 13px;
  font-weight: 600;
  line-height: calc(32 / 14);
  margin-top: 16px;
  padding-inline: 10px;
}
.top-service__banner {
  align-items: start;
  background-color: #3b7dda;
  border-radius: 10px;
  color: #ffffff;
  -moz-column-gap: 12px;
       column-gap: 12px;
  display: grid;
  grid-template-columns: 20px 1fr 44px;
  margin-top: 48px;
  overflow: hidden;
  padding: 24px 20px;
  position: relative;
  row-gap: 8px;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.top-service__banner-quotation {
  align-self: start;
  flex-shrink: 0;
  grid-column: 1;
  grid-row: 1/3;
  height: 23px;
  padding-top: 2px;
  width: 20px;
}
.top-service__banner-quotation img {
  display: block;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
}

.top-service__banner-body {
  display: contents;
}
.top-service__banner-body .c-desc {
  margin-top: 8px;
}

.top-service__banner-label {
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 700;
  grid-column: 2;
  grid-row: 1;
  letter-spacing: 0.03em;
  line-height: calc(20 / 14);
}

.top-service__banner-body .c-label {
  color: #ffffff;
  grid-column: 2;
  grid-row: 2;
}

.top-service__banner-body .c-desc {
  grid-column: 1/-1;
  grid-row: 3;
}

.top-service__banner-arrow {
  align-self: center;
  grid-column: 3;
  grid-row: 1/3;
  position: relative;
  transition: transform 0.3s ease;
  z-index: 1;
}

.top-service__slide {
  overflow: hidden;
  width: 100%;
}
.top-service__slide .swiper {
  overflow: visible;
}

.top-service__slide-swiper .swiper-slide {
  aspect-ratio: 550/500;
  overflow: hidden;
  width: 280px;
}
.top-service__slide-swiper .swiper-slide img {
  display: block;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

.bg-wrapper {
  background-color: #ffffff;
  overflow: hidden;
  padding-bottom: 200px;
  position: relative;
}
.top-works {
  overflow: visible;
  padding: 64px 20px 0px;
  position: relative;
  z-index: 2;
}
.top-works .c-title {
  margin-bottom: 40px;
}

.top-works__bg {
  inset: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.top-works__bg-item {
  border-radius: 50%;
  height: 180px;
  position: absolute;
  width: 180px;
}
.top-works__bg-item--1, .top-works__bg-item--3 {
  background-color: rgba(108, 177, 227, 0.3);
  box-shadow: 0 2px 54px 87px rgba(108, 177, 227, 0.3);
}
.top-works__bg-item--2 {
  background-color: rgba(205, 224, 253, 0.7);
  box-shadow: 0 2px 54px 87px rgba(205, 224, 253, 0.7);
}
.top-works__bg-item--1 {
  left: -5%;
  top: -6%;
}
.top-works__bg-item--2 {
  left: 83%;
  top: 42%;
}
.top-works__bg-item--3 {
  bottom: 0;
  left: -4.5%;
}

.top-works__inner {
  position: relative;
  z-index: 2;
}

.top-works__action {
  margin-top: 48px;
  text-align: center;
}

.top-partner {
  overflow: visible;
  padding-inline: 20px;
  padding-top: 120px;
  position: relative;
  z-index: 2;
}

.top-partner__inner {
  position: relative;
  z-index: 1;
}

.top-partner__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.top-partner__card {
  color: inherit;
  display: block;
  max-width: 600px;
  text-decoration: none;
  transition: opacity 0.3s ease;
  width: 100%;
}

.top-partner__card-visual {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.top-partner__card-visual img {
  aspect-ratio: 606/462;
  display: block;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
  width: 100%;
}
.top-partner__card--company .top-partner__card-visual img {
  aspect-ratio: 620/462;
}

.top-partner__card--partner .top-partner__card-visual {
  box-shadow: 14px 14px 40px rgba(105, 204, 225, 0.5);
}

.top-partner__card--company .top-partner__card-visual {
  box-shadow: 14px 14px 40px rgba(71, 165, 233, 0.5);
}

.top-partner__card-bar {
  align-items: center;
  border-radius: 0 10px 10px 0;
  bottom: clamp(0.625rem, -0.0845105954rem + 3.0272452069vw, 2.5rem);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  left: 0;
  max-width: 362px;
  min-height: 80px;
  overflow: hidden;
  padding: 16px 20px;
  position: absolute;
  width: 90%;
}
.top-partner__card-bar--partner {
  background-color: #45bfec;
}
.top-partner__card-bar--company {
  background-color: #47a5e9;
}

.top-partner__card-bar-body {
  color: #ffffff;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.top-partner__card-label {
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: calc(20 / 14);
}

.top-partner__card-bar .c-label {
  color: #ffffff;
  font-size: 20px;
  line-height: calc(42 / 26);
}

.top-partner__card-arrow {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.top-partner__accent {
  pointer-events: none;
  position: absolute;
  z-index: 3;
}
.top-partner__accent--left {
  animation-delay: -1.5s;
  aspect-ratio: 154/150;
  bottom: -135px;
  height: auto;
  left: 2vw;
  transform: translateY(40%);
  width: clamp(100px, 26vw, 154px);
}
.top-partner__accent--right {
  animation-delay: -2s;
  aspect-ratio: 200/206;
  height: auto;
  right: -2vw;
  top: 1vw;
  transform: translateY(-45%);
  width: clamp(100px, 20vw, 200px);
}
.top-partner__accent--right .c-bubble-visual-img {
  height: 67.9611650485%;
  left: 15%;
  top: 16.0194174757%;
  width: 70%;
}

.top-news {
  background: linear-gradient(180deg, #c4d7f2 0%, #eff3fb 14.9%, #eff3fb 100%);
  border-radius: 40px 40px 0 0;
  margin-top: -40px;
  padding: 64px 0px 0px;
  position: relative;
  z-index: 3;
}
.top-news .news__data {
  margin-top: 30px;
}

.top-news__inner {
  margin-inline: auto;
  max-width: 1186px;
  padding-inline: 20px;
}

.top-news__action {
  margin-top: 48px;
  padding-bottom: 100px;
  text-align: center;
}

@media (min-width: 768px) {
  .wrap__fv-about {
    padding-bottom: 257px;
    padding-top: 48px;
  }
  .wrap__fv-about .top-about__deco {
    bottom: 185px;
    height: 135px;
    left: 55px;
    right: auto;
    width: 139px;
  }
  .top-fv__body {
    aspect-ratio: calc(1366 / 879);
    display: block;
    padding: 0;
  }
  .top-fv__contents {
    left: 13.6896046852%;
    padding: 0;
    position: absolute;
    top: 62.5711035267%;
  }
  .top-fv__label + .top-fv__title {
    margin-top: 12px;
  }
  .top-fv__visual {
    aspect-ratio: auto;
    inset: 0;
    position: absolute;
    width: auto;
  }
  .top-fv__visual-item--main {
    height: 79.7497155859%;
    left: 25.4026354319%;
    top: 10.9215017065%;
    width: 52.7818448023%;
  }
  .top-fv__visual-item--sub-01 {
    height: 31.0580204778%;
    left: 78.1844802343%;
    top: 13.0830489192%;
    width: 20.5710102489%;
  }
  .top-fv__visual-item--sub-02 {
    height: 27.9863481229%;
    left: 8.345534407%;
    top: 65.7565415245%;
    width: 18.5212298682%;
  }
  .top-fv__visual-item--accent-01 {
    height: 17.0648464164%;
    left: 2.5622254758%;
    top: 19.9089874858%;
    width: 11.2737920937%;
  }
  .top-fv__visual-item--accent-02 {
    height: 23.6632536974%;
    left: 78.6237188873%;
    top: 59.9544937429%;
    width: 15.2269399707%;
  }
  .top-about__content {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }
  .top-about__left {
    max-width: 39.46%;
    width: 393px;
  }
  .top-about__lead {
    font-size: 24px;
  }
  .top-about__right {
    max-width: 511px;
  }
  .top-service {
    padding: 80px 20px 100px;
  }
  .top-service .c-title {
    margin-bottom: 52px;
  }
  .top-service__cards {
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 542px));
    justify-content: center;
  }
  .top-service__card {
    max-width: 100%;
  }
  .top-service__card-label {
    font-size: 14px;
  }
  .top-service__card-desc {
    font-size: 14px;
    margin-top: 27px;
    padding-inline: 30px;
  }
  .top-service__banner {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-top: 60px;
    padding: 40px 48px;
  }
  .top-service__banner-quotation {
    grid-column: auto;
    grid-row: auto;
    height: 23px;
    margin-bottom: auto;
    padding-top: 0;
    width: 30px;
  }
  .top-service__banner-body {
    color: #ffffff;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    position: relative;
    z-index: 1;
  }
  .top-service__banner-body .c-desc {
    margin-top: 15px;
    max-width: 653px;
  }
  .top-service__banner-label {
    font-size: 14px;
    grid-column: auto;
    grid-row: auto;
  }
  .top-service__banner-body .c-label {
    grid-column: auto;
    grid-row: auto;
  }
  .top-service__banner-body .c-desc {
    grid-column: auto;
    grid-row: auto;
  }
  .top-service__banner-arrow {
    align-self: auto;
    grid-column: auto;
    grid-row: auto;
  }
  .top-service__slide-swiper .swiper-slide {
    width: 400px;
  }
  .bg-wrapper {
    padding-bottom: 195px;
  }
  .top-works {
    padding: 80px 20px 0px;
  }
  .top-works .c-title {
    margin-bottom: 48px;
  }
  .top-works__bg-item {
    height: 240px;
    width: 240px;
  }
  .top-works__bg-item--1, .top-works__bg-item--3 {
    box-shadow: 0 3px 72px 116px rgba(108, 177, 227, 0.3);
  }
  .top-works__bg-item--2 {
    box-shadow: 0 3px 72px 116px rgba(205, 224, 253, 0.7);
  }
  .top-works__action {
    margin-top: 60px;
  }
  .top-partner__cards {
    gap: 30px;
  }
  .top-partner__card--company {
    margin-top: 50px;
  }
  .top-partner__card-bar {
    min-height: 105px;
    padding: 15px 32px;
    width: min(100%, 362px);
  }
  .top-partner__card-label {
    font-size: 14px;
  }
  .top-partner__card-bar .c-label {
    font-size: 26px;
  }
  .top-partner__accent--left {
    bottom: -150px;
  }
  .top-partner__accent--right {
    right: 1vw;
    top: -4%;
  }
  .top-news {
    padding: 80px 0px 0px;
  }
}

@media (min-width: 1024px) {
  .top-about__content {
    gap: 40px;
    padding-left: 50px;
  }
  .top-service__cards {
    gap: 60px;
  }
  .top-service__card-bar {
    min-height: 105px;
    padding: 17px 30px;
  }
  .top-service__slide-swiper .swiper-slide {
    width: 550px;
  }
  .top-works__bg-item--3 {
    bottom: auto;
    top: 79%;
  }
  .top-partner__cards {
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(2, minmax(0, 542px));
  }
  .top-partner__card {
    max-width: 100%;
  }
  .top-partner__accent--left {
    bottom: -25%;
    left: 1vw;
  }
  .top-partner__accent--right {
    top: -9%;
  }
  .top-news .news__data {
    margin-top: 48px;
  }
  .top-news__action {
    margin-top: 60px;
    padding-bottom: 118px;
  }
}

@media (min-width: 1366px) {
  .wrap__fv-about {
    padding-top: 0;
  }
  .top-about {
    padding-top: 7px;
  }
  .top-about__lead {
    font-size: 26px;
  }
  .top-service {
    padding: 110px 20px 120px;
  }
  .top-service__banner {
    margin-inline: auto;
    margin-top: 100px;
    max-width: 1025px;
    padding: 54px 56px 50px;
  }
  .top-works {
    padding: 127px 20px 0px;
  }
  .top-works__bg-item {
    height: 311px;
    width: 311px;
  }
  .top-works__bg-item--1, .top-works__bg-item--3 {
    box-shadow: 0 4px 94px 150px rgba(108, 177, 227, 0.3);
  }
  .top-works__bg-item--2 {
    box-shadow: 0 4px 94px 150px rgba(205, 224, 253, 0.7);
  }
  .top-partner {
    padding-top: 135px;
  }
  .top-partner__cards {
    grid-template-columns: 1fr 1fr;
    min-height: 627px;
    position: relative;
  }
  .top-partner__card--company {
    margin-top: 0;
  }
  .top-partner__card {
    position: absolute;
  }
  .top-partner__card--partner {
    left: 0;
    top: 0;
    width: 606px;
    z-index: 2;
  }
  .top-partner__card--company {
    right: 0;
    top: 165px;
    width: 620px;
    z-index: 1;
  }
  .top-partner__accent--left {
    bottom: -11%;
    height: 150px;
    left: 12%;
    transform: none;
    width: 154px;
  }
  .top-partner__accent--right {
    height: 206px;
    right: 5%;
    top: 0%;
    transform: none;
    width: 200px;
  }
  .top-news {
    padding: 127px 0px 0px;
  }
}

@media (hover: hover) {
  .top-service__card:hover {
    opacity: 1;
  }
  .top-service__card:hover .top-service__card-visual img {
    transform: scale(1.1);
  }
  .top-service__banner:hover {
    opacity: 1;
  }
  .top-service__banner:hover .top-service__banner-arrow {
    transform: translateX(10px);
  }
  .top-partner__card:hover {
    opacity: 1;
  }
  .top-partner__card:hover .top-partner__card-visual img {
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-fv__contents {
    animation: none;
    opacity: 1;
  }
  .top-fv__visual-item {
    animation: none;
    opacity: 1;
  }
}