.banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* 共用設定 */
.banner img {
  position: absolute;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  display: block;
}

.banner img.active {
  opacity: 1;
}

/* PC Banner */
.banner-pc {
  display: block;
  height: 500px;
}

/* Mobile Banner */
.banner-mobile {
  display: none;
  height: 631px;

  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}

/* RWD 切換 */
@media (max-width: 810px) {
  .banner-pc {
	display: block;
	height: 236px;
  }
  .btn-default {
    width: clamp(50px, 8vw, 52px)!important;
  }
  .float-buttons {
	top: 50% !important;
  }
}
@media (max-width: 768px) {
  .banner-pc {
    display: none;	
  }
  .banner-mobile {
    display: block;
	height: 680px;
  }
  .float-buttons {
	top: auto !important;
  }
}
@media (max-width: 428px) {
  .banner-mobile {
    display: block;
    height: 704px;
  }
  .float-buttons {
	top: auto !important;
  }
}
@media (max-width: 414px) {
  .banner-mobile {
    display: block;
    height: 682px;
  }
  .float-buttons {
	top: auto !important;
  }
}
@media (max-width: 412px) {
  .banner-mobile {
    display: block;
    height: 678px;
  }
  .float-buttons {
	top: auto !important;
  }
}
@media (max-width: 390px) {
  .banner-mobile {
    display: block;
    height: 642px;
  }
  .float-buttons {
	top: auto !important;
  }
}
@media (max-width: 384px) {
  .banner-mobile {
    display: block;
    height: 634px;
  }
  .float-buttons {
	top: auto !important;
  }
}
@media (max-width: 375px) {
  .banner-mobile {
    display: block;
	height: 618px;
  }
  .float-buttons {
	top: auto !important;
  }
}
@media (max-width: 360px) {
  .banner-mobile {
    display: block;
	height: 594px;
  }
  .float-buttons {
	top: auto !important;
  }
}