.slider { 
    width: 100%; 
    max-width: 1200px; 
    margin: 0 auto; 
}

.slides { 
    position: relative; 
    height: 700px; /* 画像高さ */
}

.slide { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    transition: opacity 1s ease; 
}
.slide.active { opacity: 1; }

.slider img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
}

/* ボタンを画像下に移動 */
.prev, .next {
    position: relative;
    margin-top: 10px;
    background: #ffffff;  /* 背景白 */
    color: #000000;       /* 文字色黒 */
    border: 1px solid #000000; /* ←黒枠線を追加 */
    padding: 0.5em 1em;
    cursor: pointer;
    display: inline-block;
    transition: all 0.3s ease;
}

/* ボタン左右端に配置 */
.prev { float: left; }
.next { float: right; }

/* ホバー時 */
.prev:hover, .next:hover {
    background: #af3131; /* 赤背景 */
    color: white;    /* 文字を白に */
}

/* ドットも画像下に */
.dots {
    clear: both;        /* ボタンの下に来る */
    text-align: center; /* 中央寄せ */
    margin-top: 10px;   /* ボタンとの間隔 */
}

.dots button {
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    border: none;           /* 枠線なし */
    background: #ccc;       /* 通常は灰色 */
    cursor: pointer; 
    margin: 0 3px;
    box-sizing: border-box; /* 安定して丸を維持 */
}

.dots button.active { 
    background: #af3131;       /* アクティブは黒 */
}