/* スライド表示用CSS */

.slider {
position: relative;
max-width: 800px;
margin: 4rem auto;
overflow: hidden;
}
.slides {
display: flex;
transition: transform 0.5s ease;
}
.slide {
min-width: 100%;
height: 400px;
}

/* スライドを増やすときは、HTML側の表示部分も修正すること */
.slide:nth-child(1) { background: url('../img/slide000_trimmed.png') center/cover no-repeat; }
.slide:nth-child(2) { background: url('../img/slide001.png') center/cover no-repeat; }
.slide:nth-child(3) { background: url('../img/slide002_trimmed.png') center/cover no-repeat; }
.slide:nth-child(4) { background: url('../img/slide003_trimmed.png') center/cover no-repeat; }
.slide:nth-child(5) { background: url('../img/slide004_trimmed.png') center/cover no-repeat; }
.slide:nth-child(6) { background: url('../img/slide005_trimmed.png') center/cover no-repeat; }
.slide:nth-child(7) { background: url('../img/slide006_trimmed.png') center/cover no-repeat; }
.slide:nth-child(8) { background: url('../img/slide007_trimmed.png') center/cover no-repeat; }
.slide:nth-child(9) { background: url('../img/slide008_trimmed.png') center/cover no-repeat; }

.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: url('https://lh3.googleusercontent.com/ZMARmveTg1geksYKXZKdh71KW09XrhDLg8N-XrfXCGsDBEHnuKwhmYpHd55Y2-NwuwLX8qsyx26JNyJWtr1jEcxD') no-repeat center/contain;
cursor: pointer;
z-index: 2;
}
.arrow.right {
right: 10px;
transform: translateY(-50%) rotate(180deg);
}
.arrow.left {
left: 10px;
}
.dots {
text-align: center;
margin-top: 1rem;
}
.dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px;
background: #ccc;
border-radius: 50%;
cursor: pointer;
}
.dot.active {
background: #333;
}