@charset "UTF-8";

html,body{
  height: 100vh;
}

.mv{
  padding-bottom: 30px;
}
.swiper{
  height: calc(100vh - 220px);
  font-size: 0;
  line-height: 0;
  color: transparent;
}
.swiper-wrapper .swiper-slide{
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  height: calc(100vh - 220px);
  overflow: hidden;
  backface-visibility: hidden;
}
.swiper-wrapper .mv3{
  background-position: bottom;
}
.swiper-wrapper .mv4{
  background-position: center 70%;
}
.swiper-wrapper .mv5{
  background-position: top;
}
/* 選択されたpaginationカラー */
.swiper-pagination-bullet.swiper-pagination-bullet-active{
  background-color: rgba(255, 255, 255, .7);
}
/* spだとpagination選択時に丸のラインが青くなるので消した */
.swiper-pagination-bullet:focus{
  outline: none;
}
/* 左右の＜＞消した */
.swiper-button-prev::after,.swiper-button-next::after{
  display: none;
}

@media screen and (max-width: 768px) {

  html,body{
    height: auto;
  }
  .swiper,.swiper-wrapper .swiper-slide{
    height: calc(100vh - 80px);
  }
  /* MV */
  .swiper-wrapper .mv5{
    background-position: 87% 100%;
  }
  .swiper-pagination{
    display: none;
  }
  .swiper-button-prev::after,.swiper-button-next::after{
    display: block;
    color: rgba(255, 255, 255, .7);
  }
  .swiper-button-prev:focus,.swiper-button-next:focus{
    outline: none;/* spだとbuttonの後ろが四角く青くなるので消した */
  }
}