@charset "utf-8";
/* CSS Document */
.container:has(.slick-img){
    position: relative;
}

.slider {
    margin: 30px auto 0;
    max-width: 500px;
    width: 80%;
}

.slick-img img {
    height: auto;
    width: 100%;
}

.slick-prev:before,
.slick-next:before {
    color: #000000;
}

.slider {
    width:calc(100% - 100px);
    max-width: none;
    margin-bottom: 30px;
}
.arrow_box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.prev-arrow,
.next-arrow {
    display: block;
    width: 40px;
    height: 40px;
    background: var(--color-orange);
    border-radius: 50%;
    transition: all .3s ease;
    cursor: pointer;
    position:relative;
}

.prev-arrow {
    transform: rotate(180deg);
    margin-right: 20px;
}

.prev-arrow::before,
.next-arrow::before{
    position:absolute;
    content: "";
    width:10px;
    height:10px;
    border-right: 2px solid #FFF;
    border-top: 2px solid #FFF;
    top:0;
    bottom:0;
    left:-3px;
    right:0;
    margin:auto;
    transform:rotate(45deg);
}