html {
  background: #21252a;
}

body {
  background: #f6f6f9;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
}

:root {
  --main-color:#3655f1;
  --key-color:#7370f5;
  --sub-color:#bbbcd6;
  --lady-color:#ff95b9;
  --lady-light-color:#ffe7f1;
}

.min-vh-80 {
  min-height: 80vh !important;
}

.nav-link {
  color: var(--sub-color);
}

.nav-link.active {
  color: var(--key-color);
}

.border-sub {
  border-color: var(--sub-color) !important;
}

.border-key {
  border-color: var(--key-color) !important;
}

.border-dark {
  border-color: #25282d !important;
}

.border-dark-more {
  border-color: #030304 !important;
}

.bg-sub {
  background-color: var(--sub-color);
}

.bg-key {
  background-color: var(--key-color);
}

.bg-dark {
  background-color: #0c121f !important;
}

.text-sub {
  color: var(--sub-color);
}

.text-key {
  color: var(--key-color);
}

.btn-key {
  background-color: var(--key-color);
  color: #fff;
}

.btn-sub {
  background-color: var(--sub-color);
}

.btn-lady {
  background-color: #fb6682;
  color: #fff;
}

.ripple {
  -webkit-animation: ripple 2s linear infinite;
          animation: ripple 2s linear infinite;
}

@-webkit-keyframes ripple {
  0% {
    -webkit-box-shadow: 0 0 0 0rem rgba(115, 112, 245, 0.4), 0 0 0 0.15rem rgba(115, 112, 245, 0.2), 0 0 0 0.25rem rgba(115, 112, 245, 0.2);
            box-shadow: 0 0 0 0rem rgba(115, 112, 245, 0.4), 0 0 0 0.15rem rgba(115, 112, 245, 0.2), 0 0 0 0.25rem rgba(115, 112, 245, 0.2);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0.15rem rgba(115, 112, 245, 0.4), 0 0 0 0.25rem rgba(115, 112, 245, 0.2), 0 0 0 0.45rem rgba(115, 112, 245, 0);
            box-shadow: 0 0 0 0.15rem rgba(115, 112, 245, 0.4), 0 0 0 0.25rem rgba(115, 112, 245, 0.2), 0 0 0 0.45rem rgba(115, 112, 245, 0);
  }
}

@keyframes ripple {
  0% {
    -webkit-box-shadow: 0 0 0 0rem rgba(115, 112, 245, 0.4), 0 0 0 0.15rem rgba(115, 112, 245, 0.2), 0 0 0 0.25rem rgba(115, 112, 245, 0.2);
            box-shadow: 0 0 0 0rem rgba(115, 112, 245, 0.4), 0 0 0 0.15rem rgba(115, 112, 245, 0.2), 0 0 0 0.25rem rgba(115, 112, 245, 0.2);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0.15rem rgba(115, 112, 245, 0.4), 0 0 0 0.25rem rgba(115, 112, 245, 0.2), 0 0 0 0.45rem rgba(115, 112, 245, 0);
            box-shadow: 0 0 0 0.15rem rgba(115, 112, 245, 0.4), 0 0 0 0.25rem rgba(115, 112, 245, 0.2), 0 0 0 0.45rem rgba(115, 112, 245, 0);
  }
}
/*# sourceMappingURL=style.css.map */