@charset "UTF-8";
.bsbt-wrapper {
  position: relative;
}

.bsbt-loading {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 12px;
}

.bsbt-hero {
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 100% !important;
  inset-block-start: 0 !important;
  margin-top: 0 !important;
}
.bsbt-hero.animated {
  display: none;
}

.bsbt-siteTitle {
  padding-inline: 40px;
  position: absolute;
  left: 0;
  z-index: 2;
}
@media (max-width: 1024px) {
  .bsbt-siteTitle {
    width: 39.466667%;
    padding-inline: 5.866667%;
  }
}
.bsbt-siteTitle img {
  width: 100%;
  height: auto;
  display: block;
}

.bsbt-hero__catch {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 2;
}
.bsbt-hero__catchInner {
  position: relative;
  width: 50.763889%;
  height: auto;
  margin-left: 6px;
}
@media (max-width: 1024px) {
  .bsbt-hero__catchInner {
    width: 83.733333%;
  }
}
.bsbt-hero__catchFilter {
  content: "";
  width: 200%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(94deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgb(255, 255, 255) 40%, rgb(255, 255, 255) 100%);
  pointer-events: none;
  transform: translateX(10%);
}
.bsbt-hero__catchImage {
  width: 100%;
  height: auto;
  display: block;
}
.bsbt-hero__slide {
  position: absolute;
  width: 48.3%;
  right: 0;
  transform: translateX(100%);
}
@media (max-width: 1024px) {
  .bsbt-hero__slide {
    transform: none;
    width: 100%;
    bottom: 15.4%;
  }
}
@media (max-width: 640px) {
  .bsbt-hero__slide {
    bottom: 0;
  }
}
.bsbt-hero__slide img {
  display: block;
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 1025px) {
  .bsbt-hero__slide img {
    clip-path: none !important;
  }
}
@media (max-width: 1024px) {
  .bsbt-hero__slide img {
    aspect-ratio: 768/215;
    clip-path: inset(0 0 100% 0); /* 最初は下を100%カットして非表示 */
    animation: reveal 2s ease forwards;
  }
}
@media (max-width: 640px) {
  .bsbt-hero__slide img {
    aspect-ratio: 375/140;
  }
}
.bsbt-hero__scroll {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 39px;
  height: 36px;
  opacity: 0;
  z-index: 2;
}
.bsbt-hero__scroll img {
  width: 100%;
  height: auto;
  display: block;
}

.bsbt-canvas {
  display: block;
  position: relative;
  width: 107%;
  margin-right: -7%;
  height: auto;
  aspect-ratio: 1542/669;
  z-index: 1;
}
@media (max-width: 1024px) {
  .bsbt-canvas {
    aspect-ratio: 375/670;
    width: 100%;
    margin-right: 0;
  }
}

.bsbt-staticCanvas {
  opacity: 0;
  z-index: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 107%;
  aspect-ratio: 1542/669;
}

.bsbt-video {
  width: 100%;
  position: relative;
  z-index: 1;
}
.bsbt-video iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  pointer-events: none;
}
.bsbt-video__controller {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
@media (max-width: 640px) {
  .bsbt-video__controller {
    bottom: 13.75px;
  }
}
.bsbt-video__buttons {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  gap: 15px;
  padding-right: 40px;
}
@media (max-width: 640px) {
  .bsbt-video__buttons {
    padding-right: 20px;
    gap: 10.75px;
  }
}
.bsbt-video__button {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  width: 45px;
  height: 45px;
}
@media (max-width: 640px) {
  .bsbt-video__button {
    width: 24px;
    height: 24px;
  }
}
.bsbt-video__button svg {
  width: 100%;
  height: auto;
}
.bsbt-video__body {
  width: 100%;
}
.bsbt-video__body video {
  width: 100%;
  height: auto;
}

.bsbt-next {
  position: relative;
  background-color: #fff;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}