@charset "utf-8";

/*==================================================
スライダー共通
===================================*/

/* -------------------- 戻る、次へ矢印 -------------------- *
/* ----- script.jsにて書き換えた矢印画像 ----- */
/* 左右矢印共有クラス */
.slide-arrow {
    width: 60px;
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto 0;
    cursor: pointer;
}

/* 右矢印 */
.next-arrow {
    right: 0;
}

@media screen and (max-width: 1200px) {

    /* 左矢印 */
    .prev-arrow {
        left: 15%;
    }

    .next-arrow {
        right: 15%;
    }
}

@media screen and (max-width: 768px) {

    .slide-arrow {
        width: 40px;
    }

    .prev-arrow {
        left: 26%;
    }

    .next-arrow {
        right: 26%;
    }
}

@media screen and (max-width: 498px) {

    .prev-arrow {
        left: 30%;
    }

    .next-arrow {
        right: 30%;
    }
}

/* ---------- ドットナビゲーションの設定 ---------- */
#case-pick .slick-dots,
#column-pick .slick-dots {
    display: none !important;
    /* 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: 8px;
    display: block;
    border-radius: 50%;
    background: #ccc;
}

.slick-dots .slick-active button {
    background: #00428b;
}

/*==================================================
case(事例一覧)スライダー
===================================*/

#case-pick .slider {
    /*横幅98%で左右に余白を持たせて中央寄せ*/
    width: 98%;
    margin: 0 auto;
    position: relative;
}

.slick-slide img {
    width: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1200px) {
    #case-pick .slider {
        width: 140%;
        left: -20%;
    }
}

@media screen and (max-width: 768px) {
    #case-pick .slider {
        width: 200%;
        left: -50%;
    }
}

@media screen and (max-width: 498px) {
    #case-pick .slider {
        width: 240%;
        left: -70%;
    }

    .slick-slide img {
        height: 200px;
    }
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
#case-pick .slider .slick-slide {
    margin: 10px 10px;
}


/* ----- 元からある矢印のcss(書き換えているので表示されてない) ----- */
#case-pick .slick-prev,
#case-pick .slick-next {
    position: absolute;
    /*絶対配置にする*/
    top: 50%;
    cursor: pointer;
    /*マウスカーソルを指マークに*/
    outline: none;
    /*矢印の色*/
    height: 15px;
    width: 15px;
    z-index: auto;
}

#case-pick .slick-prev {
    left: -0.5%;
    z-index: 1;
}

#case-pick .slick-next {
    right: 3%;
}

@media screen and (max-width: 1200px) {
    #case-pick .slick-prev {
        left: 15%;
    }

    #case-pick .slick-next {
        right: 17.5%;
    }
}

@media screen and (max-width: 768px) {
    #case-pick .slick-prev {
        left: 26%;
    }

    #case-pick .slick-next {
        right: 29%;
    }
}


@media screen and (max-width: 498px) {
    #case-pick .slick-prev {
        left: 30%;
    }

    #case-pick .slick-next {
        right: 34%;
    }
}

#case-pick .slick-prev:before,
#case-pick .slick-next:before {
    opacity: 1;
    font-size: 60px;
}

#case-pick .slick-prev:before {
    content: '';
    display: inline-block;
    background-image: url(../images/left-btn.png);
    background-size: contain;
    width: 60px;
    height: 60px;
}

#case-pick .slick-next:before {
    content: '';
    display: inline-block;
    background-image: url(../images/right-btn.png);
    background-size: contain;
    width: 60px;
    height: 60px;
}

@media screen and (max-width: 1200px) {

    #case-pick .slick-prev:before {
        content: '';
        display: inline-block;
        background-image: url(../images/left-btn.png);
        background-size: contain;
        width: 50px;
        height: 50px;
    }

    #case-pick .slick-next:before {
        content: '';
        display: inline-block;
        background-image: url(../images/right-btn.png);
        background-size: contain;
        width: 50px;
        height: 50px;
    }

}

@media screen and (max-width: 768px) {}

/*==================================================
case(事例一覧)スライダー
===================================*/
#column-pick .slide-arrow {
    display: none !important;
}

@media screen and (max-width: 1200px) {
    #column-pick .slider {
        margin: 0 auto;
        width: 150%;
        left: -25%;
    }
}

@media screen and (max-width: 768px) {
    #column-pick .slider {
        width: 200%;
        left: -50%;
    }
}

@media screen and (max-width: 498px) {
    #column-pick .slider {
        width: 250%;
        left: -75%;
    }
}