@charset "utf-8";
/* CSS Document */
:root {
  --maincolor: #416577;
  --maincolor_gray: #5b7f95;
  --subcolor: #b7c9d3;
}
.swiper {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}
.swiper-wrapper {}
.swiper-slide {
  max-height: 450px;
}
/* 画像のスタイル */
.swiper-slide img {
  width: 100%;
  height: auto;
  /*object-fit: cover;
  position: relative;*/
}
/* 文字のスタイル */
.swiper-slide #slide_main_maintext {
  padding: 1%;
  background-color: rgba(255, 255, 255, 0.60);
  text-indent: 0;
  color: var(--maincolor);
  font-size: 2.5vw;
  font-weight: 700;
  text-align: center;
  position: absolute;
  top: 5%;
  left: 20%;
}
.swiper-slide #slide_main_subtext {
  position: absolute;
  top: 80%;
  left: 0%;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
.swiper-slide #slide_main_subtext p {
  font-size: 1.2vw;
  padding: 0 1%;
  text-indent: 0;
  background-color: rgba(255, 255, 255, 0.60);
  color: var(--maincolor);
  width: fit-content;
}
/* アニメーションのキーフレーム設定 */
@keyframes fade-text {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
.swiper-slide-active .slide_zoom,
.swiper-slide-duplicate-active .slide_zoom,
.swiper-slide-prev .slide_zoom {
  animation: zoomUp 9s linear 0s normal both;
}
/* テキストのアニメーション設定 */
.swiper-slide-active p {
  animation-name: fade-text;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-fill-mode: both;
}