@charset "utf-8";



/**  workslist **/


#workslist{
background:#ffff;
margin:2em auto;
padding-bottom:2em;
}
@media only screen and (min-width: 1170px) { /*pc*/
#workslist{
max-width:1150px;
}

}

@media only screen and (max-width: 767px) {/*sp*/
#workslist{
margin:0em 0px 2em;
max-width:100%;
}

}

#main #workslist h2{
margin-bottom:0.5em;
}


#workslist a{
text-decoration:none;
color:#333;
}



.flex-workcontainer{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
align-content:space-between;
margin-top:3em;
}

.flex-work {
background:#fff;
border:1px solid #E3E3E3;
}


.flex-work a{
padding:12px;
display:block;
height:100%;
-moz-transition: 0.5s ease;
-webkit-transition:  0.5s ease;
-o-transition:  0.5s ease;
-ms-transition:  0.5s ease;
transition: 0.5s ease;
}

.flex-work a:hover{
display:block;
height:100%;
background:#DBEDF2;
}



@media only screen and (min-width: 768px) {/*pc*/


.flex-work figure{
width:100%;
height:0;
padding-top:100%;
overflow:hidden;
position:relative;

-moz-transition: -moz-transform 0.3s ease;
-webkit-transition: -webkit-transform 0.3s ease;
-o-transition: -o-transform 0.3s ease;
-ms-transition: -ms-transform 0.3s ease;
transition: transform 0.3s ease;
background:url(img/over_02.png);

}

.flex-work figure:hover{
-webkit-transform: scale(0.95);
-moz-transform: scale(0.95);
-o-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}

.flex-work figure img{
max-width:100%;
max-height:100%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin:0;
}

.flex-work figure:after{
width:100%;
height:100%;
content:"";
background-color:rgba(0, 0, 0, 0);
-moz-transition: 1s ease;
-webkit-transition:  1s ease;
-o-transition:  1s ease;
-ms-transition:  1s ease;
transition: 1s ease;
background-size: cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
color:#fff;
padding-top:50%;

}

.flex-work figure:hover:after{
width:100%;
height:100%;
content:"";/*詳細を見る*/
background-color:rgba(0, 0, 0, 0.2);
background-size: cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
color:#fff;
padding-top:50%;
text-align:center;
}



}

@media only screen and (max-width: 767px) {/*sp*/


.flex-work figure{
width:100%;
position:relative;
-moz-transition: -moz-transform 0.3s ease;
-webkit-transition: -webkit-transform 0.3s ease;
-o-transition: -o-transform 0.3s ease;
-ms-transition: -ms-transform 0.3s ease;
transition: transform 0.3s ease;
padding:0;
overflow:hidden;}

.flex-work figure:hover{
-webkit-transform: scale(0.95);
-moz-transform: scale(0.95);
-o-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}

.flex-work figure img{
width:100%;
max-width:100%;
height:auto;
margin:0;
padding:0;}



}




.flex-work figcaption{
padding:0.5em 0.5em 0.5em 1em;
background:url(img/ic_01.png) 0 0.7em no-repeat;
text-decoration:underline;
}

.flex-work a:hover figcaption{
color:#cc0000;
}







@media only screen and (min-width: 768px) {/*pc*/


.flex-work {
flex-basis:24%;
max-width:24%;/*win7　flex+boxsizing　対応*/
margin:0.5%;


}



}


@media only screen and (max-width: 767px) {/*sp*/

.flex-work {
flex-basis:100%;
}

.flex-work{
margin-top:10px;
}


}





.pager{
margin:2em 1em 0;
text-align:center;
background:#F3F5F5;
padding:1em;

}


.pager a{
text-decoration:underline!important;
color:#069!important;
}

.pager a:hover{
color:#cc0000!important;
}