small, .small {
	font-size: 80%;
	font-weight: 500;
}

/*********** List *************/
.portfolioList{display:flex; flex-wrap:wrap; max-width:1350px;margin:0 auto;}
.portfolioList dl{position:relative; margin:0 30px 30px 0; width:calc((100% - 90px)/4); border-radius:10px; background:rgba(255,255,255,.05); box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.08); overflow:hidden;}
.portfolioList dl:nth-child(4n){margin-right:0;}
.portfolioList dl .checkbox{display:inline-block; position:absolute; left:5px; top:5px; z-index:5;}
.portfolioList dl a{display:block; position:relative;}
.portfolioList dl dt{position:relative; aspect-ratio: 3 / 2; overflow: hidden;}
.portfolioList dl dt p.c_tit{position:absolute; color:#ffffff; font-size:15px; line-height:35px; text-align:center; width:110px; height:35px; border-bottom-right-radius:10px; opacity:0.8; background:#5479ca;}
.portfolioList dl dt img{display: block; width:100%; height:100%; object-fit:cover; transition:all .3s linear;}
.portfolioList dl:hover dt img{transform:scale(1.1);}
.portfolioList dl dd{box-sizing:border-box; padding:20px 20px; text-align:center; background: #fff;}
.portfolioList dl dd .cate{display: block; font-size:14px; font-weight:700; color:#6EA91C; line-height: 120%; letter-spacing:-0.35pt; margin:0 0 8px;}
.portfolioList dl dd h4{font-size:1.111rem; letter-spacing:-0.5pt; line-height:120%; color:#000; font-weight:600; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}

.portfolioList dl dd.hover{position: absolute; left: 0; top:0; width: 100%; height:100%; display: flex; align-items:center; flex-direction: column; justify-content: center; opacity: 0; transition:all .3s linear; padding: 10px; box-sizing:border-box;}
.portfolioList dl:hover dd.hover{opacity: 1; transition:all .3s .1s linear;background:rgba(36, 41, 92, 0.5);}
.portfolioList dl dd.hover:before{content:''; display:block; width:0; height:0; opacity: 0.6; position: absolute; left: 0; top:0; background:rgba(36, 41, 92, 0.5);  transition:all .3s linear;}
.portfolioList dl dd.hover:hover:before{width: 100%; height: 100%; transition:all .3s linear;}
.portfolioList dl dd.hover h4{position: relative; z-index: 2; color:#fff; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; width: 100%;}
.portfolioList dl dd.hover .cate{position: relative; z-index: 2; color:#fff; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
.portfolioList dl dd.hover .homepage{display: inline-block; margin: 25px 0 0; position: relative; z-index: 2; width: 130px; height:45px; line-height: 45px; transition:all .3s  linear; font-size:14px; font-weight:700; color:#6EA91C; border-radius:5px; background:#fff; text-align:center;}
.portfolioList dl dd.hover .homepage span{display: inline-block; vertical-align: middle; font-size:18px; margin:-2px 5px 0 0;}
.portfolioList dl dd.hover .homepage.linknone{background:#fff; color:#000;}

.portfolioList a dd small {
    display: block;
    font-size: 15px;
    color: #000;
    font-weight: 400;
    letter-spacing: -0.35pt;
    line-height: 120%;
    margin: 0 0 8px;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: normal !important;
    display: block;
}

.portfolioList dl dd h4{color:#000;}









/*******************************************************************************
    @media 1350px
*******************************************************************************/
@media all and (max-width:1350px){



}

/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1280px){



}

/*******************************************************************************
    @media  ~980px              
*******************************************************************************/
@media all and (max-width:980px){


/*********** List *************/
.portfolioList{}
.portfolioList dl{margin:0 20px 20px 0; width:calc((100% - 20px)/2);}
.portfolioList dl:nth-child(4n){margin-right:20px;}
.portfolioList dl:nth-child(2n){margin-right:0;}
.portfolioList dl dd{padding:25px 15px;}
.portfolioList dl dd .cate{font-size:13px; margin:0 0 6px;}


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/*********** List *************/
.portfolioList{}
.portfolioList dl{margin:0 15px 15px 0; width:calc((100% - 15px)/2);}
.portfolioList dl:nth-child(4n){margin-right:15px;}
.portfolioList dl:nth-child(2n){margin-right:0;}
.portfolioList dl dd{padding:20px 10px;}
.portfolioList dl dd .cate{font-size:12px;}

.portfolioList dl dd.hover .homepage{margin: 20px 0 0; width: 120px; height:40px; line-height: 40px; font-size:12px;}
.portfolioList dl dd.hover .homepage span{font-size:16px;}


}
/*******************************************************************************
    @media ~480px            
*******************************************************************************/
@media all and (max-width:480px){

/*********** List *************/
.portfolioList{}
.portfolioList dl{margin:0 0 15px 0; width:100%;}
.portfolioList dl:nth-child(4n){margin-right:0;}
.portfolioList dl:nth-child(2n){margin-right:0;}




}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){




}