/*グラデ背景*/
.main-bg{
    width:100vw;
    padding-bottom:10.42vw;
    background: linear-gradient(-180deg,#001929 0%,#263B48 85%,#F0EEE9 100%);
}

.post-wrapper{
    width:83.33vw;
    margin:17.5vw auto 0 auto;
}

/*タイトル*/
.post-title{
    color: white;
}
.post-title h2{
    font-size: 2.08vw;
    font-weight: normal;
}
.post-title .gallery-cat{
    margin-top:1.56vw;
}


/*スライドと説明*/
.post-info{
    display: flex;
    justify-content: space-between;
    margin-top:7.29vw;
}


/*サムネ付きスライド*/
.works-img{
    width:46.88vw;
}
.slider .swiper-slide{
    width:46.88vw;
    height:28.65vw;
}
.slider .swiper-slide img{
    width:100%;
    height:100%;
    object-fit: cover;
}

/*サムネイル*/
.slider-thumbnail{
    margin-top:2.08vw;
}
.slider-thumbnail .swiper-slide{
    width:10.16vw;
    height:10.16vw;
    opacity: .5;
    transition: opacity .5s;
    cursor: pointer;
}
.slider-thumbnail .swiper-slide img{
    width:100%;
    height:100%;
    object-fit: cover;
}

.slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
    opacity: 1;
}

/*矢印の色*/
.swiper-button-next, .swiper-button-prev{
    color:white;
}
.swiper-button-next::after,
.swiper-button-prev::after{
    font-size:2.08vw;
}



.works-info{
    color: white;
    width:32.29vw;
}
.works-info .works-text{
    line-height:2.5vw;
}

.parts{
    width:100%;
    margin-top:3.91vw;
}
.parts-title{
    border-bottom:solid white 0.05vw;
    padding-bottom:1.04vw;
    margin-bottom:1.04vw;
}
.parts-text{
    line-height:2.5vw;
}


/*関連する事例*/
.connection-wrapper{
    width:83.33vw;
    margin:10.42vw auto 0 auto;
}
.connection-wrapper h3{
    color: white;
    font-size: 2.08vw;
    font-weight: normal;
    text-align: center;
}

.connection-no{
    width:100%;
    color: white;
    text-align: center;
    margin-top:2.08vw;
}


/*投稿*/

.connection-content{
    width:83.33vw;
    margin:7.29vw auto 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.connection-content::after{
    content:"";
    display: block;
    width:25.52vw;
}
article{
    width:25.52vw;
}
article:nth-of-type(n+4){
    margin-top:3.13vw;
}
article a{
    text-decoration: none;
    color:white;
}
article a:hover .post-img::after,
article a:hover .cat-img .post-img .hover-more{
    opacity: 1;
}

.cat-img{
    display: flex;
    justify-content: space-between;
}
.cat-img .post-img{
    width:23.44vw;
    height:100%;
    position: relative;
}
.cat-img .post-img::after{
    content:"";
    display: block;
    width:23.44vw;
    height:15.63vw;
    background-color: rgba(0,0,0,.6);
    position: absolute;
    top:0;
    opacity: 0;
    transition: .3s;
}
.cat-img .post-img img{
    width:100%;
    height:15.63vw;
    object-fit: cover;
}
.cat-img .post-img .hover-more{
    font-family: "Cormorant", serif;
    font-size: 1.3vw;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    color:white;
    z-index: 2;
    opacity: 0;
    transition: .3s;
}

.cat-img .cat{
    -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}



/*----------------------------------------------------------------------------
                                レスポンシブ
-----------------------------------------------------------------------------*/
@media(max-width:768px){

    .post-wrapper{
        width:89.74vw;
        margin:32.56vw auto 0 auto;
    }

    /*タイトル*/

    .post-title h2{
        font-size: 5.13vw;
    }
    .post-title .gallery-cat{
        margin-top:5.13vw;
    }


    /*スライドと説明*/
    .post-info{
        flex-flow: column;
        margin-top:10.26vw;
    }


    /*サムネ付きスライド*/
    .works-img{
        width:100%;
    }
    .slider .swiper-slide{
        width:100%;
        height:61.54vw;
    }


    /*サムネイル*/
    .slider-thumbnail{
        margin-top:5.13vw;
    }
    .slider-thumbnail .swiper-slide{
        width:20.51vw;
        height:20.51vw;
    }

    /*矢印の色*/

    .swiper-button-next::after,
    .swiper-button-prev::after{
        font-size:2.08vw;
    }



    .works-info{
        width:100%;
        margin-top:10.26vw;
    }
    .works-info .works-text{
        line-height:8vw;
    }

    .parts{
        margin-top:10.26vw;
    }
    .parts-title{
        border-bottom:solid white 0.26vw;
        padding-bottom:5.13vw;
        margin-bottom:5.13vw;
    }
    .parts-text{
        line-height:8vw;
    }


    /*関連する事例*/
    .connection-wrapper{
        width:100%;
        margin:25.64vw auto 0 auto;
    }
    .connection-wrapper h3{
        font-size: 5.13vw;
    }

    .connection-no{
        margin-top:10.26vw;
    }


    /*投稿*/
    article{
        width:100%;
    }
    article:nth-of-type(n+2){
        margin-top: 10.26vw;
    }

    .cat-img .post-img{
        width:83.08vw;
        height:100%;
        position: static;
    }
    .cat-img .post-img::after{
        display: none;
    }
    .cat-img .post-img img{
        width:100%;
        height:53.85vw;
        object-fit: cover;
    }
    .cat-img .post-img .hover-more{
        display: none;
    }
    article .post-title{
        margin-top:2.56vw;
    }

}