body {
  position: relative;
  z-index: 1;
  background-color: #ffffff;
}
@media screen and (min-width: 720px) {
  body::before, body::after {
    position: fixed;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    content: "";
    background-repeat: no-repeat;
    background-position: center;
  }
  body::before {
    left: 0;
    background-image: url("https://sleep.itembox.design/item/free-page/img/lp/makuake/gkl/body_bg-1.jpg");
    transform: translateX(-35%);
  }
  body::after {
    right: 0;
    background-image: url("https://sleep.itembox.design/item/free-page/img/lp/makuake/gkl/body_bg-2.jpg");
    transform: translateX(35%);
  }
}

.fs-l-page {
  background-color: initial;
}

.teaser__image {
  position: relative;
}
.teaser__image-contents {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.teaser__video {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16/9;
  margin: 0 auto;
  overflow: hidden;
}
.teaser__video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.teaser__video::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  visibility: visible;
  content: "";
  background-color: #232832;
  opacity: 1;
}
.teaser__video::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  width: 40px;
  height: 40px;
  visibility: visible;
  content: "";
  border: 4px solid #ffffff;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 1;
  transform: translate(-50%, -50%);
  animation-name: loading;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes loading {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.teaser__video.loaded::before, .teaser__video.loaded::after {
  visibility: hidden;
  opacity: 0;
}
.teaser__line {
  position: relative;
  padding-inline: 0;
}
.teaser__line-add-button {
  position: absolute;
  bottom: 9%;
  left: 50%;
  display: block;
  width: 80%;
  max-width: 480px;
  padding: 5% 2rem;
  font-size: clamp(1.2rem, 0.4rem + 3.556vw, 2rem);
  font-weight: bold;
  line-height: 1;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  background-color: #01cc5e;
  border-radius: calc(infinity * 1px);
  transform: translateX(-50%);
  animation-name: shake;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes shake {
  0%, 60%, 100% {
    transform: translateX(-50%);
  }
  20% {
    transform: translateX(-51%);
  }
  40% {
    transform: translateX(-49%);
  }
}
.teaser__line-add-button::after {
  position: absolute;
  top: 50%;
  right: 1rem;
  display: block;
  flex-shrink: 0;
  width: 1.75em;
  height: 1.75em;
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="%23ffffff"><g><path d="M6.41 6L5 7.41L9.58 12L5 16.59L6.41 18l6-6z"/><path d="m13 6l-1.41 1.41L16.17 12l-4.58 4.59L13 18l6-6z"/></g></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform: translateY(-50%);
}

.ib-target {
  opacity: 0;
  transition: 1s;
  transform: translateY(50px);
}
.loaded .ib-target.inview {
  opacity: 1;
  transform: translateY(0);
}/*# sourceMappingURL=makuake_gkl.css.map */