/* CSS Document */
.swiper-button-next,
.swiper-button-prev {
    --swiper-navigation-color: #80CEFF; //ここに変更する色を指定
}
/*---------------------------------------------
  General Settings
  ---------------------------------------------*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.swiper-container {
  padding: 30px 0 50px;
  background: #eeeeee;
}

/*---------------------------------------------
  Swiper tips Sample01
  ---------------------------------------------*/
.s-fade-wrap {
  position: relative;
  max-width: 640px; /* もとは640px */
  margin: 0 auto;
}

.s-fade-text {
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 5vw;
}

.swiper-slide-active .s-fade-text {
  animation: slideTextFade 1.75s ease 0s 1 normal;
}

@keyframes slideTextFade {
  0%, 25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*---------------------------------------------
  Swiper tips Sample02
  ---------------------------------------------*/
.s-right-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}

.s-right-text {
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 5vw;
}

.swiper-slide-active .s-right-text {
  animation: slideFromRight 1.5s ease 0s 1 normal;
}

@keyframes slideFromRight {
  0%, 25% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
/*---------------------------------------------
  Swiper tips Sample03
  ---------------------------------------------*/
.s-right2-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}

.s-right2-text,
.s-right2-sub {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  color: white;
}

.s-right2-text {
  top: 20%;
  font-size: 5vw;
}

.s-right2-sub {
  top: 55%;
  font-size: 2vw;
}

.swiper-slide-active .s-right2-text {
  animation: slideFromRight 1.5s ease 0s 1 normal;
}

.swiper-slide-active .s-right2-sub {
  animation: slideFromRightSub 2.0s ease 0s 1 normal;
}

@keyframes slideFromRightSub {
  0%, 45% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
/*---------------------------------------------
  Style End
  ---------------------------------------------*/