@charset 'UTF-8';

/* iOSで文字サイズ大きくならないようにする */
body {-webkit-text-size-adjust: 100%;}


/* ========================================

Arrows

======================================== */
.slick-prev:before,
.slick-next:before {
content: "";
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    width: 7px;
    height: 7px;
    display: inline-block;
    top: 22px;
    position: absolute;
}
.slick-prev:before {
transform: rotate(135deg);
left: 24px;
}
.slick-next:before {
transform: rotate(-45deg);
left: 19px;
}
.slick-prev,
.slick-next {
transition: all 0.2s ease;
position: absolute;
bottom: 0;
width: 50px;
height: 50px;
border:none;
outline:none;
cursor:pointer;
font-size:0;
padding: 0;
margin: 0;
background: var(--slick-btn-color);
}
.slick-prev:hover,
.slick-next:hover {
opacity: 0.8;
}

.slick-prev{
left: 0;
z-index: 10;
}
.slick-next{
left: 60px;
z-index: 10;
}


/* ========================================

Dots

======================================== */
.slick-dots {
    display: flex !important;
    justify-content: flex-end;
    position: absolute;
    bottom: 18px;
    left: 150px;
}
.slick-dots .slick-active {
}
.slick-dots li {
line-height: 0;
}
.slick-dots li button {
    font-size: 0;
    cursor: pointer;
    outline: none;
    border: 1px solid var(--slick-btn-color);
    height: 14px;
    width: 13px;
    background: none;
    margin: 0 10px 0 0;
transition: all 500ms cubic-bezier(0.215,0.610,0.355,1.000);
}
.slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover {
background: var(--slick-btn-color);
}
.slick-dots .slick-active button {
background: var(--main-color);
border: 1px solid var(--main-color);
pointer-events: none;
}