@charset "utf-8";

.sbTtl, .logo {
  position: absolute;
  right: calc(50% - 80vw/2);
  width: 80vw;
}

.sbTtl {
  top: 7vw;
}

.logo {
  top: 25vw;
}

.firstView img {
  width: 100vw;
  height: 100svh;
  object-fit: cover;
}

.gray__bg {
  position: absolute;
  bottom: 30vw;
  left: -5vw;
  width: 70vw;
  height: 70vw;
  border-radius: 50%;
  background-color: #3a3a3a;
  opacity: 0.4;
  z-index: 1;
}

.catch {
  position: absolute;
  bottom: 42vw;
  left: 5vw;
  text-align: center;
  z-index: 2;
}

.catch__ttl, .catch__txt {
  color: #ffffff;
  margin: 3vw 0;
  line-height: 1.4;
}

.catch__ttl {
  font-weight: 600;
  font-size: 5vw;
}

.catch__txt {
  font-weight: 500;
  font-size: 3.5vw;
}

.character {
  position: absolute;
  bottom: 40vw;
  right: 0;
  width: 40vw;
  z-index: 2;
}

.swiper__bg {
  background-color: #ffffff;
  width: 100vw;
  height: 50vw;
  position: absolute;
  bottom: -9vw;
  left: 0;
  z-index: 2;

}

.swiper__container {
  position: absolute;
  max-width: 100vw;
  margin: 0 auto;
  overflow: hidden;
  z-index: 3;
  bottom: -9vw;
}

.swiper-wrapper {
  transition-timing-function: linear;
}

.swiper-slide {
  height: 50vw !important;
  width: auto !important;
}

.catalog__cover {
  height: 100%;
  width: auto;
  box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.4);
}

/* --------------------------------------pc----------------------------------------- */

@media only screen and (min-width: 960px) {
.sbTtl, .logo {
  right: 10vw;
  width: 35vw;
}

.sbTtl {
  top: 5vw;
}

.logo {
  top: 8vw;
}

.gray__bg {
  top: 25vw;
  left: 0;
  width: 100vw;
  height: 12vw;
  border-radius: 0;
}

.catch {
  position: absolute;
  top: 22vw;
  left: 2vw;
  text-align: left;
  width: 100vw;
}

.catch__ttl, .catch__txt {
  position: absolute;
  margin: 3vw 0;
  line-height: 1.4;
}

.catch__ttl {
  font-size: 2vw;
  left: 30vw;
  top: 3vw;
}

.catch__txt {
  font-weight: 400;
  font-size: 1vw;
  left: 50vw;
  top: 3vw;
}

.character {
  top: 28vw;
  right: 5vw;
  width: 18vw;
}

.swiper__bg {
    width: 100vw;
    height: 0;
    position: absolute !important;
    bottom: -100px;
    left: 0;
    z-index: 2;
}

.swiper__container {
  position: absolute;
  top: 0;
  left: 5vw;
  height: 100vh;
  margin: 0 auto;
  z-index: 5;

}

.swiper-slide {
  height: 25vw !important;
  width: auto !important;
}

.catalog__cover {
  height: 100%;
  width: auto;
  max-width: none;
  box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.4);
}
}