.mySwiper{
  position: relative;
  height: 100%;	
}
.swiper {
  width: 100%;
  height: 1070px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.main_visual_bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
}
.mySwiper .swiper-slide-active .main_visual_bg {
    -webkit-animation: scl1 1.6s ease forwards;
    animation: scl1 1.6s ease forwards;
}
.visual01 .main_visual_bg{
	background: url(../img/main_visual01.jpg) 75% / cover no-repeat;
}
.visual02 .main_visual_bg{
   background: url(../img/main_visual02.jpg) 75% / cover no-repeat;
}

@-webkit-keyframes scl1 {
    0% {
        transform: translate(-50%,-50%) scale(1.1)
    }

    to {
        transform: translate(-50%,-50%) scale(1)
    }
}

@keyframes scl1 {
    0% {
        transform: translate(-50%,-50%) scale(1.1)
    }

    to {
        transform: translate(-50%,-50%) scale(1)
    }
}



/* Swiper Elements */
.swiper-slide {
  position: relative;
}
.swiper-catch {
	max-width: 1560px;
	margin: 0 auto;	
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	text-align:left;  
}
.swiper-catch .visual_txt{}
.swiper-catch * {
  flex-shrink: 0;
}
.swiper-catch p {font-size:30px; margin: 0; line-height: 1.75; color:#fff}
.swiper-catch h2 {
    font-weight: 300;
    font-size: 40px;
    color: #fff;
    padding-top: 40px;
    line-height: 1.4;
}
.swiper-catch h2 span.mp_txt {font-weight: 600; font-size: 45px;}
.mv_br{display:none;}

@keyframes swiperCatchAnimation1 {
  0% {
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    opacity: 1;
    transform: translateX(20px);
  }
}
.swiper-slide .swiper-catch .txt_an1 {
  opacity: 0;
}
.swiper-slide-active .swiper-catch .txt_an1{
  animation-name: swiperCatchAnimation1;
  animation-duration: 0.4s;
  animation-delay: 0.6s;
  animation-fill-mode: both;
}

@keyframes swiperCatchAnimation2 {
  0% {
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    opacity: 1;
    transform: translateX(20px);
  }
}
.swiper-slide .swiper-catch .txt_an2 {
  opacity: 0;
}
.swiper-slide-active .swiper-catch .txt_an2{
  animation-name: swiperCatchAnimation2;
  animation-duration: 0.6s;
  animation-delay: 0.8s;
  animation-fill-mode: both;
}

@media (max-width: 1300px){
	.swiper {height: 730px;}	
}

@media (max-width: 960px){
	.swiper{height: 540px;}
	.swiper-catch p {font-size: 18px;}	
	.swiper-catch h2{font-size: 23px; padding-top: 25px;}	
	.swiper-catch h2 span.mp_txt{font-size: 23px;}	
}

@media (max-width: 680px){
	.swiper{height: 450px;}
	.mv_br{display:block;}	

}


.mainBanner .swiper-pagination{position:absolute;left:50%;bottom:40px;z-index:101;transform:translateX(-50%);width:max-content}
.mainBanner .swiper-pagination span{opacity:.3;position:relative;width:29px;height:29px;margin:0 5px;background-color:transparent;transition:all .3s}
.mainBanner .swiper-pagination span.on{opacity:1}
.mainBanner .swiper-pagination span:before{opacity:0;display:block;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:45px;height:45px;border:1px solid rgba(255,255,255,.3);border-radius:50%;transition:all .3s}
.mainBanner .swiper-pagination span.on:before{opacity:1;width:24px;height:24px}
.mainBanner .swiper-pagination span:after{display:block;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;background:#fff}