@charset "utf-8";
/* */


.cases_wap {
    width: 100%;
    padding: 2rem 0;
    background-color: #d3deeb33;
}

.slider {
    width: 95%;
    margin: 0 auto;
    padding-left: 0;
}

.slider img {/* スライダー内の画像を100％ */
    width: 100%;
    /*height: 28rem;*/
    object-fit: cover;
}

/* スリックのJavaで書かれるタグ内、スライドの余白 */
.slider .slick-slide {
    margin: 0 3rem;
}

/* 矢印の設定 */
.slick-prev,
.slick-next {
    position: absolute;
    top: 42%;
    cursor: pointer;/* カーソルを指 */
    outline: none;/* クリック時の枠線 */
    border-top: 2px solid #666;/* 矢印の色 */
    border-right: 2px solid #666;
    height: 15px;
    width: 15px;
}

/* 戻る矢印の位置 */
.slick-prev {
    left: -1.5%;
    transform: rotate(-135deg);
}

/* 次へ矢印の位置 */
.slick-next {
    right: -1.5%;
    transform: rotate(45deg);
}

/* ドットナビの設定 */
.slick-dots {
    text-align: center;
    margin: 20px 0 0 0;
}

.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width: 8px;/* ドットボタンのサイズ */
    height: 12px;
    display: block;
    border-radius: 50%;
    background: #ccc;/* ドットボタンの色 */
    border: none;
}

.slick-dots .slick-active button {
    background: #333;/* ドットボタンの現在地表示の色 */
}

.slider li {
    position: relative;
    
    figure {
        aspect-ratio: 15 / 10;
        border-radius: 10px;
        overflow: hidden;
        transition: .3s;
    }
    p {
        /*position: absolute;
        bottom: 0;*/
        margin: 1rem;
        font-size: 1.5rem;
        color: #333;
    }
    span {
        margin: 0 .5rem;
    }
    h4 {
        font-size: 1.8rem;
        margin: 1rem;
    }
}


/* スマートフォンのスタイル */
@media screen and (max-width: 430px) {
    .cases_wap {
        padding: 1rem 2rem;
    }

    /* 矢印の設定 */
    .slick-prev,
    .slick-next {
        top: 30%;
    }
}