@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");
.slider-area { width: 100%; overflow-x: hidden; }
.slider-area img { display: block; width: 100%; height: auto; }
.slider-area .inner { padding-top: 6rem; }
.slider-area .slick-list .img .cap { color: #fff; font-size: 2rem; letter-spacing: .05em; line-height: 1; position: absolute; bottom: 0; right: 0; z-index: 2; display: block; padding: 10px; width: 100%; color: #fff; text-shadow: 0 0 10px #000,0 0 5px #000; }
.slider-area .slick-list .img .cap.cap1, .slider-area .slick-list .img .cap.cap2 { width: 50%; }
.slider-area .slick-list .img .cap.cap2 { right: auto; left: 0; text-align: left; }
.slider-area .slick-dots { margin-top: 1rem; position: static; display: grid; gap: 1rem; grid-template-columns: repeat(9, 1fr); }
.slider-area .slick-dots li { width: auto; height: auto; margin: auto; background: #000; }
.slider-area .slick-dots li img { opacity: 0.4; transition: .3s; }
.slider-area .slick-dots li:hover img, .slider-area .slick-dots li.slick-active img { opacity: 1; }
@media screen and (max-width: 768px) { .slider-area .slick-list .img .cap { font-size: 1rem; padding: 5px; text-shadow: 0 0 5px #000,0 0 3px #000; }
  .slider-area .slick-dots { gap: .5rem; grid-template-columns: repeat(5, 1fr); } }