@charset "utf-8";

body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #fbfcf0;
}

/* ＝＝＝＝＝　FVスライダー　＝＝＝＝＝ */
.s_view {
    width: 100%;
    max-width: 2400px;
    margin: 0 auto;
    margin-top: 110px;
    height: auto;
    overflow-x: hidden;
    position: relative;
}
@media (min-width: 412px) {
    .s_view {
        margin-top: 96px;
    }
}
@media (min-width: 1100px) {
    .s_view {
        margin-top: 0;
    }
}

.s_view #s_wrap {
    display: grid;
    width: calc(100% * 4);
    grid-template-columns: repeat(4 ,1fr);
}
#s_wrap img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
#s_wrap #slide1 { object-position: 25% 50%; }
#s_wrap #slide2 { object-position: 18% 50%; }
#s_wrap #slide3 { object-position: 20% 50%; }
#s_wrap #slide4 { object-position: 50% 50%; }

@media (min-width: 580px) {
    #s_wrap img {
        width: 100%;
        aspect-ratio: auto;
    }    
}
@media (min-width: 960px) {
    .s_view #s_wrap {
        width: calc(83% * 4 + 1.5% * 3);
        grid-template-columns: repeat(4 ,1fr);
        gap: 0.4%;    
    }
}
/* スライド画像の位置 */
.pos0 { order: 0; }
.pos1 { order: 1; }
.pos2 { order: 2; }
.pos3 { order: 3; }

/* スライドショーラップ全体の位置 */
.wrappos_right {
    transform: translateX(-25%);
}
.wrappos_left {
    transform: translateX(-50%);    
}
@media (min-width: 960px) {
    .wrappos_right {
        transform: translateX(-22.6%);
    }
    .wrappos_left {
        transform: translateX(-47.7%);    
    }    
}


/* スライド上下の装飾 */
.s_cover .slide_top,
.s_cover .slide_bottom {
    position: absolute;
    width: 100%;
    height: 4%;
    z-index: 20;
    background-size: 100%;
    background-repeat: no-repeat;
}
.s_cover .slide_top { 
    background-image: url(img/slide_top.png);
    top: 0;
    background-position: top;
}
.s_cover .slide_bottom {
    background-image: url(img/slide_bottom.png);
    bottom: 0;
    background-position: bottom;
}


/* スライダーボタン */
#b_prev,
#b_next {
    position: absolute;
    top: calc(50% - 20px);
    width: 40px;
    height: 40px;
}
#b_prev { left: 3%; }
#b_next { right: 3% }

@media (min-width: 580px) {
    #b_prev,
    #b_next {
        top: calc(50% - 25px);
        width: 50px;
        height: 50px;
    }
}
@media (min-width: 960px) {
    #b_prev { left: 6.5%; }
    #b_next { right: 6.5% }
}