.swiper-container {
  overflow: hidden;
  position: relative;
}
.d-demo {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding-bottom: 1px;
  z-index: 10;
}
.d-demo__heading {
  width: 20%;
  position: relative;
}
.d-demo__ttl {
  width: 20%;
  max-width: 55px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.d-demo__ttl__mini{
font-size: 40%;
 margin:0;}

.d-demo__slider {
  width: 100%;
  margin: 0 auto;
}
.d-demo__slide {
  width: 100%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.d-demo__slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.swiper-container-main {
  /*height: calc(100vh - 0px);*/
  height:100vh;
  transition: opacity 0.6s ease, transform 0.3s ease;
}

.d-demo__slide-heading {
  position: absolute;
  top: 20%;
  left: 18%;
  width: 60%;
  padding-left: 5%;
  color: #000;
}

.d-demo__slide-ttl{
  font-size: 35px;
  font-weight: 800;
  margin-bottom: 10px;
  color:#000;
  /*text-shadow:
            3px 3px 3px #fff, -3px -3px 3px #fff,
           -3px 3px 3px #fff,  3px -3px 3px #fff;
    margin: 0;*/
}

.d-demo__slide-txt {
  font-size: 15px;
  font-weight: 400;
  line-height: 2;
  width: 100%;
  /*transform: translateX(50px);*/
}

/*.swiper-container-nav {
  width: 40%;
  height: 10%;
  position: absolute;
  right: 0;
  bottom: 100px;
  z-index: 10;
}*/

.swiper-container-nav {
  width: 100%;
  height: 60%;
  position:absolute;
  right: 0;
  bottom: 100px;
  z-index: 10;
}

.d-demo__nav {cursor: pointer;}

.d-demo__nav-ttl{color: #000;}

.d-demo__nav-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.d-demo__nav:before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /*background-color: rgba(0, 0, 0, 0.55);*/
  transition: background-color 0.3s ease;
  content: '';
  z-index: 1;
  transform:translateZ(1px); //safari対策
}
.swiper-slide-active.d-demo__nav:before {
  background-color: rgba(0, 0, 0, 0);
}
.d-demo__nav:hover:before {
  background-color: rgba(0, 0, 0, 0);
}
.d-demo__nav-heading {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  /*color: #fff;*/
  font-size: 15px;
}
.swiper-container-nav
.swiper-button-prev{
    --swiper-navigation-size: 30px;
    /*background-color: #fff;*/
    border-radius: 50%;
    width: 25px;
    height: 25px;
}

.swiper-container-nav
.swiper-button-next {
    --swiper-navigation-size: 30px;
    /*background-color: #fff;*/
    border-radius: 50%;
    width: 25px;
    height: 25px;
}


@media screen and (max-width: 980px) {
.d-demo__slide-ttl{font-size: 21px;
text-align: center;
}
.d-demo__slide-heading {
  position: absolute;
  top: 13%;
  left: 5%;
  width: 90%;
  padding: 10%;
  /*color: #000;*/
  /*background-color:rgba( 255, 255, 255, 0.80 );*/
  }

.d-demo__slide-txt {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  width: 100%;
  transform: translateX(50px);
  }
  
.swiper-container-nav {
  /*width: 40%;
  height: 10%;*/
  position: absolute;
  right: 0;
  bottom: 15%;
  z-index: 10;}
}