@charset "utf-8";

.portfoilo{padding: 0;}
.portfoilo h2{text-align:center;font-size:2.5em;margin-bottom:10px}
.portfoilo h2 a{padding: 0;}
.portfoilo ul{;margin:0 auto;max-width:1400px;padding:0; }
.portfoilo ul:after {display:block;visibility:hidden;clear:both;content:""; }
.portfoilo li{float:left;width:20%;padding:8px}
.portfoilo li .lt_img{display:block;width:100%}
.portfoilo li .lt_img img{vertical-align:top;width:100%;height:auto}
.portfoilo li .lt_tit{font-size:1.2em;font-weight:600;margin:10px 0;display:block;line-height:1.0em;color:#fff; 0; }
.portfoilo li .lt_detail{font-size:1.077em;color:#ddd;line-height:1.5em}

.portfoilo .empty_li  {width:100%;padding:100px 0;text-align:center;color:#aaa}    

.portfoilo .card{background: white;position: relative;height:100%;display: flex;align-items: flex-end;transition: 0.4s ease-out;}
.portfoilo .card:before {; content: ""; position: absolute;top: 0; left: 0; display: block; width: 100%; height: 100%;;z-index: 2;transition: 0.5s;opacity: 0.8;
background:rgba(0,0,0,0.5);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 40%, rgba(255,255,255,0.01) 41%, rgba(0,0,0,0.64) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(40%, rgba(255,255,255,0)), color-stop(41%, rgba(255,255,255,0.01)), color-stop(100%, rgba(0,0,0,0.64)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 40%, rgba(255,255,255,0.01) 41%, rgba(0,0,0,0.64) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 40%, rgba(255,255,255,0.01) 41%, rgba(0,0,0,0.64) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 40%, rgba(255,255,255,0.01) 41%, rgba(0,0,0,0.64) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 40%, rgba(255,255,255,0.01) 41%, rgba(0,0,0,0.64) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 )}
.portfoilo .card:hover:before { opacity: 1;}
.portfoilo .card:hover { -webkit-transform: translateY(20px); transform: translateY(15px);}
.portfoilo .card .info {position: absolute;bottom:0;left:0;width:100%;z-index: 3; color: #fff;opacity: 0;-webkit-transform: translateY(20px); transform: translateY(20px); transition: 0.5s;padding:25px;}
.portfoilo .card:hover .info {opacity: 1;-webkit-transform: translateY(30px);transform: translateY(10px); }

 @media (max-width: 969px){
    .portfoilo{padding:0 0;}
    .portfoilo h2{font-size:1.0em;margin-bottom:20px; }
    .portfoilo li{width:50%;}
    .portfoilo .card:before{}
    .portfoilo .card .info{opacity: 1;-webkit-transform: translateY(-50px);transform: translateY(0px);padding:0; letter-spacing:-0.08em; font-size:11px; background:rgba(0,0,0,0.5); padding-left:3px }
 
 
 
 
 }