html {
  scroll-behavior: smooth;
  scroll-padding-top: 60px;
}

body {
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.swiper-slide:not(.swiper-slide-active) {
  filter: brightness(0.5);
}
.swiper-slide:not(.swiper-slide-active) p {
  opacity: 0;
}

.swiper-button-next,
.swiper-button-prev {
  top: 85%;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 28px;
}

.pattern {
  background: url(../img/pattern.png) no-repeat center/cover;
}

.simple-course::before,
.basic-course::before,
.premium-course::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  border: 2px solid transparent;
  border-top: 15px solid transparent;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: destination-out;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
          mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.simple-course::before {
  background: #808080;
}

.basic-course::before {
  background: #c4b400;
}

.premium-course::before {
  background: linear-gradient(90deg, #f0bf84, #e993aa 50%, #90a4ff) border-box border-box;
}

.elbrave-profile {
  background: url(../img/index_elbrave03.png) no-repeat top/100%;
}

.animate.is-fadein {
  opacity: 1;
}
.animate.is-slidein-sp {
  left: 0;
}
.animate.is-slidein-pc-left {
  left: 0;
}
.animate.is-slidein-pc-right {
  right: 0;
}

@media screen and (min-width: 1024px) {
  html {
    scroll-padding-top: 80px;
  }
  .swiper-slide {
    font-size: clamp(0.75rem, 0.244966443rem + 1.8791946309vw, 2.5rem);
  }
  .swiper-slide:not(.swiper-slide-active) {
    filter: none;
  }
  .swiper-slide:not(.swiper-slide-active) p {
    opacity: 1;
  }
  .simple-course::before,
  .basic-course::before,
  .premium-course::before {
    border-radius: 10px;
    border-top: 45px solid transparent;
  }
  .elbrave-profile {
    background: none;
  }
}