@charset "UTF-8";
#topmenu {
    margin: 0 0 0 auto; /*ここを右寄せに変更済み*/
  }
  
.slider-box {
  max-width: 100%;
  margin: 30px auto;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.slider-box input[type="radio"] {
  display: none;
}
.slides {
  display: flex;
  width: 100%;
  transition: transform 0.5s;
}
.slide {
  width: 100%;
  flex-shrink: 0;
}
.slide img {
  width: 100%;
  display: block;
}

/* ラジオボタンでスライドを切り替える */
/* ここも変更しなければならない */
#slide1:checked ~ .slides { transform: translateX(0%); }
#slide2:checked ~ .slides { transform: translateX(-100%); }
#slide3:checked ~ .slides { transform: translateX(-200%); }
#slide4:checked ~ .slides { transform: translateX(-300%); }
#slide5:checked ~ .slides { transform: translateX(-400%); }

/* ナビボタン */
.nav {
  text-align: center;
  margin-top: 10px;
}
.nav label {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: #ccc;
  border-radius: 50%;
  margin: 5px;
  cursor: pointer;
}
input[type="radio"]:checked + label {
  background: #4caf50;
}
</style>