.slider img {
    width: 100%; /* スライダー内の画像を横幅100%に */
    height: auto; /* 画像の縦横比を維持して高さを自動調整 */
    transition: transform 0.3s ease, opacity 0.3s ease; /* 0.3秒のスムーズなトランジション */
}

.slider img:hover {
    opacity: 0.8; /* 透明度を少し下げる */
  }

.slider .slick-slide {
    margin: 5px 5px 0 5px; /* 上に5px、右に5px、下に0px、左に0pxの余白を設定 */
}


/*==========================================================
スライダーの矢印のスタイル（テスト中）
===========================================================*/
.slider1, .slider2 {
    position: relative; /* スライダーの親要素を相対的に配置 */
}


.slick-prev, .slick-next {
    width: 14px; /* 矢印の幅を設定 */
    height: 14px; /* 矢印の高さを設定 */
    font-size: 11px; /* フォントサイズを大きく設定 */
    position: absolute; /* 矢印の位置を絶対配置 */
    bottom: -15px; /* 小さくしたら下に */
    background-color: #dcd6d2; /* 背景色を#dcd6d2に変更 */
    z-index: 1; /* 他の要素の上に表示 */
    border: none; /* 枠線を消す */
    border-radius: 50%; /* 背景の角を丸くする */
    font-weight: bold; /* フォントを太くする */
    color: black; /* 矢印の色を濃いグレー(#555)に設定 */
    transition: background-color 0.3s ease; /* ホバー時のスムーズなトランジション */
    display: flex; /* フレックスボックスを使用 */
    align-items: center; /* 垂直方向に中央揃え */
    justify-content: center; /* 水平方向に中央揃え */
}

.slick-prev:hover, .slick-next:hover {
    background-color: #B3ADAA; /* ホバー時の色を変更 */
}

.slick-prev {
    left: 55px; /* 左側に配置 */
}

.slick-next {
    right: 55px; /* 小さくしたら外側に */
}

/*========================================================== 
スライダーのインジケーター（ドットナビゲーション）のスタイル
============================================================*/
.slick-dots {
    position: static; /* インジケーターを画像の下に配置 */
    display: flex !important; /* インジケーターをフレックスボックスで整列 */
    justify-content: center; /* ドットを中央に配置 */
    align-items: center; /* 縦方向の整列を中央に */
    list-style: none; /* ドットのリストスタイルを無効化 */
    padding: 0; /* 余白を削除 */
    margin: 0; /* 上、右、下、左の余白を設定 */
    height: 7px !important; /* インジケーターの親要素の高さを強制的に統一 */
}

.slick-dots li {
    margin: 0 2.5px; /* ドット間のスペース */
}

.slick-dots li button {
    background-color: #CCC6C2; /* ドットの色 */
    border: none; /* ボタンの境界線を削除 */
    width: 22px; /* ドットの幅を設定 */
    height: 3px; /* ドットの高さを設定 */
    padding: 0; /* ボタン内の余白を削除 */
    margin: 0; /* ボタンの周囲の余白を削除 */
    line-height: 2px; /* ボタン内のドットを垂直方向で中央に配置 */
    text-indent: -9999px; /* ドット内の数字を画面外に移動して非表示に */
}

.slick-dots li.slick-active button {
    background-color: #d4621c; /* アクティブなドットの色 */
}

/*========================================================== 
スライダーの一時停止ボタンのスタイル
============================================================*/
#pauseButton2 {
    width: 80px; /* ボタンの幅を調整 */
    height: 14px; /* ボタンの高さを指定（例: 30px） */
    background-color: #dcd6d2; /* ボタンの色 */
    color: black; /* テキストの色を黒に */
    border: none; /* ボタンの境界線を削除 */
    padding: 0; /* ボタン内の余白を設定 */
    margin: 2px 0 0 0; /* 上、右、下、左の余白を設定 */
    cursor: pointer; /* カーソルをポインターに */
    transition: background-color 0.3s ease; /* ホバー時のスムーズなトランジション */
    font-size: 10px; /* 文字の大きさを設定（例: 12px） */
    font-weight: bold; /* または 700 */
    text-align: center; /* テキストを中央に配置 */
    border-radius: 15px; /* 背景の角を丸くする */
}

#pauseButton2:hover {
    background-color: #B3ADAA; /* ホバー時の色を変更 */
}

/*==========================================================
モバイル用のレスポンシブ調整（画面幅768px以下）
==========================================================*/
@media (max-width: 768px) {
    /* 矢印の位置調整 */
    .slick-prev {
        left: 3px; /* 左側の位置を広げる */
    }

    .slick-next {
        right: 3px; /* 右側の位置を広げる */
    }

    .slick-dots li button {
        width: 9px; /* ドットの幅を設定 */
    }
}