*{
  margin: 0;
}

header{
  padding-top: 30px;
  padding-bottom: 30px;
  background: cyan;
  text-align: center;
}

section{
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 30%;
}

main{
  width: 300px;
  margin: 0 auto;
}

img{
  vertical-align: bottom;
}

ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

nav{
  margin-bottom: 8px;
}

nav ul{
  display: flex;
  justify-content: space-between;
}

nav li{
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  padding: 4px;
  text-align: center;
  cursor:pointer;
  user-select: none;
}

nav li:hover{
  background: #f8f8f8;
}

#play{
  width: 140px;
}

#next,
#prev{
  width: 60px;
}

#main{
  width: 300px;
  height: 200px;
  margin-bottom: 8px;
}

.thumbnails{
  display: grid;/*css gridを使用し、画像を横並びに*/
  grid-template-columns: repeat(5,56px);/*画像を56pxで5列に並べる為のメソッドrepeat()*/
  gap: 5px;/*余白*/
}

.thumbnails li{
  cursor: pointer;
  opacity: 0.4;
}

.thumbnails li:hover,
.thumbnails li.current{
  opacity: 1;
}

.thumbnails img{
  width: 56px;
}