.top {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.top-box {
  position: relative;
  background: radial-gradient(
    100% 721.31% at 0% 50%,
    #754aef 0%,
    #f140f5 25.84%,
    #754aef 100%
  );
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  padding-left: 0.9375rem;
  padding-bottom: 1.5rem;
  padding-top: 0.75rem;
  padding-right: 0.9375rem;
}
.top-box .d-flex {
  margin-left: -0.625rem;
  margin-right: -0.625rem;
  row-gap: 1.25rem;
}
.top-box .bx {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  flex: 0 0 100%;
  max-width: 100%;
}
.top-group {
  position: relative;
  width: 100%;
  background-color: #fff;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.top-group::before {
  content: '';
  display: block;
  position: absolute;
  width: 26px;
  height: 26px;
  background-color: #fff;
  border-bottom-left-radius: 5px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  bottom: -0.75rem;
  left: 50%;
}
.top-group .ttl {
  color: #392384;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.625rem;
}
.top-group p {
  font-weight: 500;
  font-size: 0.9375rem;
}
.top-group .page-btn {
  height: 45px;
  max-width: 170px;
  display: none;
}
.top-pos {
  position: relative;
  height: 100%;
}
.top-pos .image {
  position: relative;
  height: 100%;
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  justify-content: center;
}
.top-pos .image .lottie-animation {
  max-width: 43%;
  width: 100%;
  position: absolute;
  bottom: -45px;
  pointer-events: none;
}
.top-pos .image img {
  max-width: 444px;
  width: 100%;
  margin-bottom: -1rem;
}

@media (max-width: 859px) {
  .top-pos .image .lottie-animation {
    max-width: 200px;
    bottom: -30px;
  }
}

@media (max-width: 440px) {
  .top-pos .image .lottie-animation {
    max-width: 150px;
    bottom: -45px;
  }
}

@media (min-width: 576px) {
  .top-group p {
    margin-bottom: 0.875rem;
  }
  .top-group .page-btn {
    display: grid;
  }
}
@media (min-width: 768px) {
  .top {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .top-box {
    padding-bottom: 3.625rem;
    padding-top: 3.625rem;
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
  .top-group {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 2.375rem;
    padding-bottom: 2.375rem;
  }
}
@media (min-width: 860px) {
  .top-box {
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
  }
  .top-box .bx {
    flex: 0 0 45%;
    max-width: 45%;
  }
  .top-box .bx:first-child {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 0 0 49%;
    max-width: 49%;
  }
  .top-group {
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    width: calc(100% - 0.75rem);
  }
  .top-group::before {
    bottom: 2.5rem;
    left: -0.75rem;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 0;
  }
}
@media (min-width: 992px) {
  .top-group {
    padding-left: 2.5rem;
    padding-right: 3.125rem;
  }
  .top-group p {
    font-size: 1rem;
  }
  .top-group .ttl {
    font-size: 1.1875rem;
  }
}
@media (min-width: 1100px) {
  .top-box {
    padding-left: 3.3125rem;
    padding-right: 3.3125rem;
  }
} /*# sourceMappingURL=top.css.map */