CSS
div.hako, div.hako2{
  background-color:#a7c7e0;
  position: relative;
}

.slide {
 position: relative;
 width: 100%; height: auto;
 aspect-ratio: 5;
 vertical-align:bottom;
 overflow: hidden;
}

.slide figure {
 position: absolute;
 top:50%; left:50%;
 width: 100%; height: auto;
 background-color:gray;
 transform: translate(-50%, -50%); opacity: 0; visibility: hidden; 

}
.slide figure a {
 display:block; width:100%; height:auto;
}
.slide figure a  img{
 width:100%; height:auto;
}


@keyframes thumb1 {
 0%  { filter: grayscale(0%); }
 6%  { filter: grayscale(100%); }
 10% { filter: grayscale(100%); }
 28% { filter: grayscale(100%); }
 37% { filter: grayscale(0%); }
 100%{ filter: grayscale(0%); }
}
@keyframes thumb2 {
 0%  { filter: grayscale(0%); }
 6%  { filter: grayscale(100%); }
 10% { filter: grayscale(100%); }
 28% { filter: grayscale(100%); }
 37% { filter: grayscale(0%); }
 100%{ filter: grayscale(0%); }
}
@keyframes thumb3 {
 0%  { filter: grayscale(0%); }
 6%  { filter: grayscale(100%); }
 10% { filter: grayscale(100%); }
 28% { filter: grayscale(100%); }
 37% { filter: grayscale(0%); }
 100%{ filter: grayscale(0%); }
}
@keyframes slideshow1 {
 0%  { opacity: 0; visibility: hidden; }
 10% { opacity: 1; visibility: visible; }
 28% { opacity: 1; visibility: visible; }
 38% { opacity: 0; visibility: hidden; }
 100%{ opacity: 0; visibility: hidden; }
}
 
@keyframes slideshow2 {
 0%  { opacity: 0; visibility: hidden; }
 10% { opacity: 1; visibility: visible; }
 28% { opacity: 1; visibility: visible; }
 38% { opacity: 0; visibility: hidden; }
 100%{ opacity: 0; visibility: hidden; }
}
@keyframes slideshow3 {
 0%  { opacity: 0; visibility: hidden; }
 10% { opacity: 1; visibility: visible; }
 28% { opacity: 1; visibility: visible; }
 38% { opacity: 0; visibility: hidden; }
 100%{ opacity: 0; visibility: hidden; } 
}

/* ラジオボタン */
.thumbnail {
 list-style: none;
 display: flex; justify-content: center;
 position: absolute; bottom:0; left:10px; z-index:99;
}
input[type="radio"] { display: none; }
.thumbnail img {
 display: block;
 width: 0px; height: 0px; border-radius:15px; object-fit: cover; margin: 5px; cursor: pointer;
}

/*ページを開いたとき＆一つ目のサムネイルをクリックしたとき*/
#img1:checked ~ .thumbnail label[for="img1"] figure {
 animation: thumb1 24s linear infinite both;
 animation-delay: 0s;
 cursor: auto;
}
#img1:checked ~ .thumbnail label[for="img2"] figure {
 animation: thumb1 24s linear infinite both;
 animation-delay: 8s;
}
#img1:checked ~ .thumbnail label[for="img3"] figure {
 animation: thumb1 24s linear infinite both;
 animation-delay: 16s;
}
#img1:checked ~ .slide figure {
 animation: slideshow1 24s linear infinite;
}
#img1:checked ~ .slide figure:nth-child(1) {
 animation-delay: 0s;
}
#img1:checked ~ .slide figure:nth-child(2) {
 animation-delay: 8s;
}
#img1:checked ~ .slide figure:nth-child(3) {
 animation-delay: 16s;
}
/*二つ目のサムネイルをクリックしたとき*/
#img2:checked ~ .thumbnail label[for="img1"] figure {
 animation: thumb2 24s linear infinite both;
 animation-delay: 16s;
}
#img2:checked ~ .thumbnail label[for="img2"] figure {
 animation: thumb2 24s linear infinite both;
 animation-delay: 0s;
 cursor: auto;
}
#img2:checked ~ .thumbnail label[for="img3"] figure {
 animation: thumb2 24s linear infinite both;
 animation-delay: 8s;
}
#img2:checked ~ .slide figure {
 animation: slideshow2 24s linear infinite;
}
#img2:checked ~ .slide figure:nth-child(1) {
 animation-delay: 16s;
}
#img2:checked ~ .slide figure:nth-child(2) {
 animation-delay: 0s;
}
#img2:checked ~ .slide figure:nth-child(3) {
 animation-delay: 8s;
}
/*二つ目のサムネイルをクリックしたとき*/
#img3:checked ~ .thumbnail label[for="img1"] figure {
 animation: thumb3 24s linear infinite both;
 animation-delay: 8s;
}
#img3:checked ~ .thumbnail label[for="img2"] figure {
 animation: thumb3 24s linear infinite both;
 animation-delay: 16s;
}
#img3:checked ~ .thumbnail label[for="img3"] figure {
 animation: thumb3 24s linear infinite both;
 animation-delay: 0s;
 cursor: auto;
}
#img3:checked ~ .slide figure {
 animation: slideshow3 24s linear infinite;
 animation-delay: 8s;
}
#img3:checked ~ .slide figure:nth-child(1) {
 animation-delay: 8s;
}
#img3:checked ~ .slide figure:nth-child(2) {
 animation-delay: 16s;
}
#img3:checked ~ .slide figure:nth-child(3) {
 animation-delay: 0s;
}