@charset "UTF-8";
/* auto slider ベース設定 */
.js-auto-slider-wrap {
  overflow: hidden;
}
.js-auto-slider {
  display: flex;
}
.js-auto-slider-elm-inner {
  overflow: hidden;
  position: relative;
	z-index: 1;
  flex-shrink: 0;
  
  height: 50vw;
  width: 76vw;
}
.js-auto-slider-img {
  position: absolute;
  top: 0;
  left: 0;
	right: -45%;
  bottom: 0;
}
.js-auto-slider-img img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover;';
}


/* auto slider 表示エリア */
.js-auto-slider-inner {
  width: 77vw;
  margin-left: auto;
  margin-right: auto;
}
/* auto slider スライド要素 */
.js-auto-slider-elm {
  width: 76vw;
  margin-right: 4.8vw;
  
 
}
@media only screen and (min-width: 768px) {
  .js-auto-slider-inner {
    width: 60vw;
  }
  .js-auto-slider-elm {
    
    width: 20vw;
    margin-right: 5vw;
   
  }
  .js-auto-slider-elm-inner {
    overflow: hidden;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    
    height: 30vw;
    width: 20vw;
  }
}

/* ページャー */
.js-auto-slider-pager {
  display: flex;
  justify-content: flex-start;
  margin-top: 40px;
  list-style: none;
}
.js-auto-slider-pager-elm {
  margin: 0 20px;
}
.js-auto-slider-pager-btn {
  display: block;
  height: 10px;
  width: 100px;
  padding: 0;
  font-size: 0;
  border: none;
  
  cursor: pointer;
  transition: background .3s;
}
.js-auto-slider-pager-btn {
  background: rgba(255,255,255,0.6);
}
.js-auto-slider-pager-btn:hover,
.js-auto-slider-pager-btn.is-active {
  background: #fff;
}