/* ********** banner ********** */
.banner-container { position: relative; }
.banner-text-wrap { text-align: center; padding: 40px 0; }
.banner-text-wrap h2 { font-size: 2.3rem; font-weight: 500; }
.banner-text-wrap img.logo-img { width: 375px; height: auto; margin: 15px auto 20px; display: block; }
.banner-text-wrap h3 { font-size: 1.9rem; font-weight: 400; }
.banner-visual-wrap { position: relative; }
.banner-visual-wrap .visual-list { position: relative; padding-top: 40px; }
.banner-visual-wrap .visual-list .item { text-align: center; }
.banner-visual-wrap .visual-list .item .bn-img { display: inline-block; max-width: 100%; }
.banner-visual-wrap .visual-list .slick-dots { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; }
.banner-visual-wrap .visual-list .slick-dots li { cursor: pointer; }
.banner-visual-wrap .visual-list .slick-dots li a { display: block; padding: 5px 20px; border-radius: 40px; font-size: 1.2rem; color: #6F7080; font-weight: 500; background: #F0F0F0; transition: background .15s; }
.banner-visual-wrap .visual-list .slick-dots li.slick-active a { color: #fff; background: #000; }
.banner-visual-wrap .visual-list .slick-dots li:not(.slick-active):hover a { background: #e3e3e3; }

@media (max-width: 675px) {
  .banner-text-wrap { padding: 30px 20px; }
  .banner-text-wrap h2 { font-size: 2rem; }
  .banner-text-wrap h3 { font-size: 1.5rem; }
  .banner-text-wrap img.logo-img { width: 275px; max-width: 60%; margin: 15px auto; }

  .banner-visual-wrap .visual-list { padding: 0; }
  .banner-visual-wrap .visual-list .slick-dots { position: relative; top: unset; left: unset; transform: unset; margin-top: 10px; }
  .banner-visual-wrap .visual-list .slick-dots li a { padding: 5px 15px; }
}