@charset "UTF-8";
/**************************************************************/
/* メインイメージの動き */
/**************************************************************/
/* PC */
.top-img-slide-pc {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
    opacity: 1;
    pointer-events: auto;
}

.top-img-slide-pc img {
    width:100%;
}

/* 初期状態：すべてのスライドを右端に配置（画面外） */
.top-img-slide-pc {
    transform: translateX(100%); 
}

/*中央に表示*/
.top-img-slide-pc.active {
    transform: translateX(0);
    z-index: -99; 
}

/* 抜けていくスライドのアニメ */
.top-img-slide-pc.leaving-prev{
    transform: translateX(100%);
}

.top-img-slide-pc.leaving-next {
    transform: translateX(-100%);
}

/* 入ってくるスライドを左右どちらかの画面外へ移動 */
.top-img-slide-pc.leaving-prev-com {
    transform: translateX(-100%);
}

.top-img-slide-pc.leaving-next-com {
    transform: translateX(100%);
}

/*　sp　*/
.top-img-slide-sp {
    position: absolute;
    top: 0%;
    left: 50%;
    /*transform: translate(-50%, 0%);*/
    transform: translateX(50%); 
    width:600px;
    height:600px;
    z-index: -102;
    opacity: 0;
    pointer-events: none;
}

.top-img-slide-sp img {
    width:100%;
}

/* 中央に表示 */
.top-img-slide-sp.active-sp {
    transform: translateX(-50%);
     z-index: -101; 
}

/* 抜けていくスライドのアニメ */
.top-img-slide-sp.leaving-sp-prev {
    transform: translateX(50%);
}

.top-img-slide-sp.leaving-sp-next {
    transform: translateX(-150%);
}

/* 入ってくるスライドを左右どちらかの画面外へ移動 */
.top-img-slide-sp.leaving-sp-prev-com {
    transform: translateX(-150%);
}

.top-img-slide-sp.leaving-sp-next-com {
    transform: translateX(50%);
}

/* スライド1秒 */
.top-img-slide-pc.active ,
.top-img-slide-pc.leaving-prev ,
.top-img-slide-pc.leaving-next ,
.top-img-slide-sp.active-sp ,
.top-img-slide-sp.leaving-sp-prev ,
.top-img-slide-sp.leaving-sp-next {
    transition: transform 1s ease;
}

/* アニメさせない */
.top-img-slide-pc.leaving-prev-com,
.top-img-slide-pc.leaving-next-com,
.top-img-slide-sp.leaving-sp-prev-com,
.top-img-slide-sp.leaving-sp-next-com {
    transition: transform 0s !important;
}

/* next、prevボタン */
.slide-next-btn,
.slide-prev-btn {
    width: 50px;
    height: 50px;
    background: #000;/*#37d7ec;*/
    border:solid 2px #fff;
    border-radius: 50%;
    z-index: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);*/
}

.slide-next-btn:hover,
.slide-prev-btn:hover {
    background:#4c4c4c;
}

.slide-next-btn {
    left:20px;
}

.slide-prev-btn {
    right:20px;
}

.slide-next-btn img,
.slide-prev-btn img {
    width:30px;
}

.slide-next-btn img{
    margin-right:5px;
}

/* PC / SP表示入れ替え */
@media screen and (max-width: 599px) {
    .slide-next-btn,
    .slide-prev-btn {
        width: 40px;
        height: 40px;
        border:solid 1px #fff;
        top: calc(50% + 65px);
    }

    .slide-next-btn:hover,
    .slide-prev-btn:hover {
        background:#000;
    }

    .slide-next-btn img{
        margin-right:2px;
    }

    .slide-next-btn img,
    .slide-prev-btn img {
        width:15px;
    }

    .slide-next-btn {
        left:10px;
    }

    .slide-prev-btn {
        right:10px;
    }

    .top-img-slide-pc {
        opacity: 0;
        pointer-events: none;
    }

    .top-img-slide-sp {
        opacity: 1;
        pointer-events: auto;
    }
}