@charset "utf-8";
/*==================================================
スライダーのためのcss
===================================*/
.swiper {
    width: 100%;
    height: 100%;
}

.mySwiper2 {
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.8)
}
.mySwiper2 .swiper-wrapper{
    height: 100%;
    width: 100%;
}
.mySwiper2 .swiper-slide {
    text-align: center;
    font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
    opacity: .5; /* 左右のスライドを薄くする */
    transform: scale(.8); /* 左右のスライドを小さくする */
    transition: .7s; /* ゆっくり小さくさせる */border:3px solid #f702a0;
}




.mySwiper2 .swiper-slide img {
    width: 100%;
    height:80%;
    object-fit: cover;
}
.mySwiper2 .swiper-slide-active {
    opacity: 1; /* 中央のスライドは薄くしない */
    transform: scale(1); /* 中央のスライドは小さくしない */
    z-index: 1; /* 中央のスライドを一番上にする */
}
.mySwiper {
    height:5%;
    box-sizing: border-box;
    padding: 10px 0;margin-top: 30px;
}

.mySwiper .swiper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.mySwiper .swiper-slide {
    background-size: cover;
    background-position: center;
    height: 100%;border:1px solid #333;
    opacity: 0.4;
}


.mySwiper .swiper-slide img {
    display: block;margin: auto;text-align: center;
    width:80%;
    height:80%;
    object-fit: cover;
}
.mySwiper .swiper-slide-thumb-active {
    opacity: 1;
}

.swiper-button-next, .swiper-button-prev {swiper-navigation-color: #f702a0;
}

.swiper-navWrap{
    display: flex;
    position: absolute;
    width:100%;

}

.swiper-button-next, .swiper-wrapper .swiper-button-prev {
    right: 30px;
    left: auto;
    padding-top: 20%;
}

.swiper-button-prev, .swiper-wrapper .swiper-button-next {
    left: 30px;
    right: auto;
    padding-top:20%;
}
/*==================================================
ボタン
===================================*/

.mySwiper2 .swiper-slide p{
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0; /*余計な隙間を除く*/
  color: #fff;/*文字を白に*/
 /*text-shadow:
    1px 1px 0 #000,
    -1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000;*/
  font-size: 14px;font-weight: 600;
  line-height: 1;/*行高は1に*/
  padding: 5px 10px 8px;/*文字周りの余白*/
    text-align: center;
    background: #000;
}


.button-play {
 position: relative;
  display: block;
  text-decoration: none;
}
/*.button-play:before {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    border-radius: 50%;
  border: 2px solid #fff;
  width:60px;
  height:60px;
    background-color: rgba(0,0,0,0.2);
}*/

/*.button-play:after {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-color: transparent transparent transparent #f702a0;
  border-width: 10px 0 10px 15px;
}*/


.button-play:hover {
    transition: .6s;opacity: 0.3;color: #fff;overflow: hidden;
}

@media screen and (max-width:992px) {
.mySwiper2 .swiper-slide {padding:10px 0 15px;
border:none;background: #f702a0;
}

 .mySwiper2 .swiper-slide p{
  top: 90%;
}
   
    
    .button-play {
    width: 80%;
}
   
 
} /**/