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

#works-top{
     background-image:url("../img/works.jpg");
}

#news-top{
    background-image:url("../img/news.jpg");
}

.page-top-overlay h1:before{
    font-family:Arial, Helvetica, "sans-serif";
    font-size:64px;
    margin-bottom:20px;
    letter-spacing: 2px;
    content: 'Our Works';
    display: block;
} 

#news-top h1:before{
    font-family:Arial, Helvetica, "sans-serif";
    font-size:64px;
    margin-bottom:20px;
    letter-spacing: 2px;
    content: 'News';
    display: block;
} 

#archives{
    width:68vw;
    margin:80px auto;
}

#archives li,
#archives ul{
    color:inherit;
    text-decoration: none;
    display: inline-block;
}

.archives-header{
    text-align: center;
    position:relative;
    margin-bottom:40px;
}

.archives-header h2{
    font-weight:800;
    font-size:18px;
    letter-spacing: 1px;
}

.archives-header h2::before{
    border-bottom:1px solid #000;
    width:100px;
    content: '';
    display:inline-block;
    vertical-align: 6px;
    margin-right:20px;
}

.archives-header h2::after{
    border-bottom:1px solid #000;
    width:100px;
    content: '';
    display:inline-block;
    vertical-align: 6px;
    margin-left:20px;
}

.archive-list{
    width:100%;
    margin:20px 0;
    background-color:#fff;
}

.archive-title{
    width:100%;
    height:36px;
    background-color:#000;
    color:#fff;
}

.archive-title span a{
    height:24px;
    font-size:14px;
    font-weight:800;
	padding:0 8px;
    display:inline-block;
    background-color:#fff;
    color:#000!important;
    line-height:24px;
    text-align: center;
    border-radius: 5px;
    margin-top:6px;
    margin-left:24px;
}

.archive-title li,
.archive-title ul{
    display: inline;
}

.archive-title h3{
    display:inline-block;
    font-weight: 800;
    margin-left:20px;
    line-height: 36px;    
}

.archive-title p{
    display: inline-block;
    font-weight: 800;
    font-size:12px;
    margin-left:10px;
}

.archive-wrapper{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}

.news-content-wrapper{
    margin-bottom:80px;
}

.news-prev p{
    margin:20px;
}
.archive{
    margin: 10px 0;
}
.archive-img{
    width:30%;
    overflow: hidden;
    height: 200px;
}

.archive-img img{
    width:100%;
    height: 100%;
    object-fit: cover;
}

.archive-txt{
    width:70%; 
    position:relative;
    padding:20px;
}

.archive-txt .list{
    font-weight:800;
    margin-right:20px;
    width:100px;
    height:24px;
    display:inline-block;
}

.led-jirei{
    font-weight:800;
    margin-right:20px;
    width:200px;
    height:15px;
    display:inline-block;
}

.archive-txt h4{
    font-weight: 800;
    font-size:18px;
    color:#00BE3A;
}

.archive-txt h4 span{
    font-size:32px;
}

.archive-txt p{
    margin-top:16px;
}

.led-jirei{
    margin-top:8px;
}


.archive-txt .num{
    font-size:42px;
}

.archive-txt .btn-container{
    margin-top:20px;
    margin-bottom:0;
}

.more-archive{
    background:#fff;
    color:#000;
    height:50px;
    margin-bottom:80px;
    -webkit-transition:0.2s ease;
    -o-transition:0.2s ease;
    transition:0.2s ease;
}

.more-archive p{
    font-weight: 800;
    font-size:14px;
    text-align: center;
    line-height:50px;
    margin-right:40px;
}

.more-archive i{
    margin-left:20px;
}

.more-archive:hover{
    background-color:#00BE3A;
    color:#fff;
}

@media screen and (max-width:1600px){
    .archive-txt h4{
        margin-top:1.5vw;
    }

    .archive-txt p{
        margin-top:10px;
    }

    .btn-container{
        margin:10px 0;
    }
}

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

}

@media screen and (max-width:1200px){
    #archives{
        width:80vw;
    } 

}

@media screen and (max-width:1024px){
    #archives{
        width:88vw;
    } 

    .archive-txt .num{
        font-size:32px;
    }
}

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

    .archive-wrapper{
        display:block;
    }

    .archive-img,
    .archive-txt{
        width:100%;
    }

    .archive-txt .btn-container{
        position: static;
    }

    .archive-title{
        height:auto;
        padding:2px 0;
    }

    .archive-title span a{
        font-size:13px;
        height:21px;
        margin-left:14px;
    }
    
    .archive-title h3{
        margin-left:10px;
        line-height: 26px;
        font-size:14px;
    }

    .archives-header h2::before,
    .archives-header h2::after{
        width:60px;
    }  
    
}