#slider-area {
    cursor: move;
}
.slick-slides:hover .slick-arrow {
    opacity: 1;
}

.slick-next:before {
    content: "";
}
.slick-prev:before {
    content: "";
}
.slick-arrow {
    transition: opacity 0.5s;
    opacity: 0;

    /* background-color: #333; */
    /* bottom: 0;
    height: 0;
    margin: auto;
    position: absolute;
    top: 0;
    width: 0; */
    z-index: 10;
}
/* .slick-prev {
    border-bottom: 10px solid #333;
    border-left: 0;
    border-right: 10px solid #fff;
    border-top: 10px solid #333;
    left: 0px;
}
.slick-next {
    border-bottom: 10px solid #333;
    border-left: 10px solid #fff;
    border-right: 0;
    border-top: 10px solid #333;
    right: 0px;
} */
/* button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
} */

/* Arrows
--------------------------------------------------*/
.slick-arrow {
    position: absolute;
    display: block;
    width: 20px;
    height: 30px;
    cursor: pointer;
}

.slick-prev {
    left: 20px;
    right: auto;
}

.slick-next {
    right: 20px;
    left: auto;
}

.slick-prev:before,
.slick-prev:after,
.slick-next:before,
.slick-next:after {
    content: "";
    position: absolute;
    width: 50%;
    height: 50%;
    background-color: #fff;
    /* opacity: .75; */
    opacity: 1;
}

.slick-arrow:before {
    left: 30%;
    top: 0;
    -webkit-transform: skew(145deg, 0deg);
    -ms-transform: skew(145deg, 0deg);
    transform: skew(145deg, 0deg);
}

.slick-arrow:after {
    left: 30%;
    top: 50%;
    -webkit-transform: skew(-145deg, 0deg);
    -ms-transform: skew(-145deg, 0deg);
    transform: skew(-145deg, 0deg);
}

.slick-next {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* ---------------------------------------------------------- */

.slick-slides,
.slick-thumbnails {
    opacity: 0;
    transition: opacity 0.1s linear;
}
.slick-slides.slick-initialized,
.slick-thumbnails.slick-initialized {
    opacity: 1;
}

#slider-area {
    max-width: 800px !important;
    margin: 0 auto !important;
}
#slider-area .slick-slides .slick-image {
    border-radius: 10px;
    /* overflow: hidden; */
}
.slick-image,.slick-thumbnail-image {
    width: 100%;
    object-fit: cover;
}

.slick-slide {
    padding: 3px;
}
.slick-slides .slick-slide {
    padding-bottom: 0px;
}

.slick-thumbnails .slick-slide {
    padding-top: 13px;
}
.slick-track {
    max-height: 120px;
}
.slick-thumbnails .slick-thumbnail img {
    /* max-height: 120px; */
}

/* 現在のスライドのサムネイル */
.slick-thumbnail.slick-current img {
    /* box-sizing: border-box; */
    /* border-top: 3px solid #c7c7c7; */
    outline: 3px solid #e5e7eb;
}
.slick-thumbnail.slick-current:before {
    /* border-color: #c7c7c7; */
}
/* .slick-thumbnail.slick-current:before {
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: 5px solid #e5e7eb;
    top: 0;
    margin-top: 13px;
} */

.slick-thumbnail.slick-current:after {
    border-bottom: 13px solid #c7c7c7;
}
.slick-thumbnail:after {
}
.slick-thumbnail.slick-current:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    /* left: 50%; */
    top: 0;
    margin-left: -8px;
    border-bottom: 13px solid #e5e7eb;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.slick-thumbnails {
    margin: 0 auto;
    width: 90% !important;
}

/* slickのサムネイル、1～3個のとき中央寄せするおまじない slick-unset */
.slick-thumbnails.slick-unset .slick-track {
    transform: unset !important;
}

/*サムネイルのポインターの色を変える*/
.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before,
.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
    border-color: #c7c7c7;
}
.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
    border-bottom: 13px solid #c7c7c7;
}
.sp-slide p {
    font-size: 18px !important;
}
.sp-previous-arrow:before,
.sp-previous-arrow:after,
.sp-next-arrow:before,
.sp-next-arrow:after {
    /* background-color: #6d6666; */
}

.img-slider-pro {
    max-width: 600px !important;
    margin: 0 auto !important;
}

.sp-image-container {
    border-radius: 10px;
}

#slider-area .thumbnail-div {
    width: 100%;
    height: 90%;
    text-align: center;
    /* border: solid 1px #bbbbbb; */
}
img {
    max-width: 100%;
}