.st-slider-wrap {
    width:80%;
    margin: auto;
}

.st-slider-wrap .st-slider-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

    .st-slider-wrap .st-slider-top .title{
       text-align: left;
       font-size: 1.3rem;
       font-weight: 700;
    }

    .st-slider-wrap .st-slider-top .readmore {
        margin: 5px 5px 5px auto;
    }

.st-slider {
    text-align:center;
}

.st-img-wrap {
    margin: 15px;
    font-weight:700;
}

    .st-img-wrap img {
        width: auto;
        height: 180px;
    }

.st-word-warp {
    display: inline-block; /* 幅制御のため */
    max-width: 320px; /* 表示幅を制限（ここで調整） */
    white-space: normal; /* 折り返しを許可 */
    word-wrap: break-word; /* 長い単語も折り返す */
    overflow-wrap: break-word; /* 推奨：新しい仕様 */
}
/*
    スライダーの設定
*/
.st-slider .slick-prev {
    /* デフォルトでは-25px(= スライダーの外側) */
    left: -30px;
}

.st-slider .slick-next {
    /* デフォルトでは-25px(= スライダーの外側) */
    right: -30px;
}

    .st-slider .slick-prev:before,
    .st-slider .slick-next:before {
        color: black;
    }

.st-slider .slick-prev,
.st-slider .slick-next {
    /* スライド画像の後ろに隠れないようにする */
    z-index: 100;
}

    .st-slider .slick-prev::before,
    .st-slider .slick-next::before {
        /* フォントと色の設定はbefore内で行う */
        /* font-size: 28px; */
        /* color: black; */
    }

@media screen and (max-width: 1500px) {
    .st-slider-wrap {
        width: 90%;
    }
}

@media screen and (max-width: 1200px) {
    .st-slider-wrap {
        width: 95%;
    }
}

@media screen and (max-width: 768px) {
    /*.st-slider-wrap {
        width: 88%;
    }*/

    .st-slider .slick-prev {
        /* デフォルトでは-25px(= スライダーの外側) */
        left: -20px;
    }

    .st-slider .slick-next {
        /* デフォルトでは-25px(= スライダーの外側) */
        right: -20px;
    }
}