@charset "utf-8";



/**  works top **/




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

}

@media only screen and (max-width: 767px) {/*sp*/
#works{
margin:2em 10px;
max-width:auto;
}

}

#works h2{
color:#417084;
text-align:center;
margin-bottom:1em;
padding-top:0.7em;
font-size:220%;
letter-spacing:0.2em;
}

#works h2 span{
display:inline-block;
border-bottom:3px solid #417084;
padding:0 0.3em 0 0.5em;
}


#works h2 span span{
border-bottom:none;
padding:0 0.5em;
font-size:60%;
letter-spacing:0em;
}


#works a{
text-decoration:none;
color:#333;

}



.flex-workcontainer{
display:-webkit-box;
display:flex;
-webkit-flex-wrap:wrap;
flex-wrap: wrap;
flex-direction:row ;

}



.flex-work .data{
}


.flex-work h3{
letter-spacing:0.1em;
margin:1em;
padding:0.5em;
border-bottom:1px solid #0F8BA6;
font-size:140%;
-moz-transition: 0.5s ease;
-webkit-transition:  0.5s ease;
-o-transition:  0.5s ease;
-ms-transition:  0.5s ease;
transition: 0.5s ease;
line-height:120%;
}

.flex-work a:hover h3{
color:#C00;
}

@media only screen and (min-width: 768px) {/*pc*/
.flex-work h3{
height:3.5em;
font-size:120%;
}
}


@media only screen and (max-width: 767px) {/*sp*/
.flex-work h3{
margin:1em 0;
padding:0.5em;
height:2.5em;
text-align:center;
}

}


.flex-work p{
margin:0 2em 1em;
text-align:left;
}

@media only screen and (max-width: 767px) {/*sp*/
.flex-work p{
margin:0 0.5em 1em;
}

}

.flex-work figure{
width:100%;
text-align:center;
overflow:hidden;

}

.flex-work figure img{
max-width:80%;
height:auto;
margin:1em auto;

}

.flex-work {
-moz-transition: 0.5s ease;
-webkit-transition:  0.5s ease;
-o-transition:  0.5s ease;
-ms-transition:  0.5s ease;
transition: 0.5s ease;
background:#fff;
border-radius:0;
margin-top:1em;
}
.flex-work:hover{
background:#DBEDF2;
border-radius:40px;
}

@media only screen and (max-width: 1169px) { /*pc*/
.flex-work:hover{
border-radius:30px;

}

}

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

.flex-work:hover{
border-radius:20px;

}
}


#main #works figure img{
-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;
}
#main #works figure img: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);
}




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


.flex-work {
flex: 0 1 33%;
border-right:1px solid #ccc;
}

.flex-work:nth-child(3n){
border-right:none;
}



}


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

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

.flex-work{
border-bottom:1px solid #ccc;

}
}







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

.flex-container{
display: flex;
display: -webkit-flex;
flex-flow: row;
align-content: space-between;
}

.flex-item {
flex: 1 0 30%;
padding:10px 15px;

display: flex; 
align-items:stretch;

text-align:center;
}

.flex-item2 {
display: flex; 
flex-flow: column;
flex-direction: column;

text-align:center;
height:100%;

}

.flex-item2 p.come1:after{
content:"　　　　　　　　　　";
}

.flex-item2 figure{
margin:auto 0 0;
}

}



#news{
margin:5em 4em 0;
position:relative;
}



#news:before{
position: absolute;
top:0;
right: 0;
content:'';
width: 33px;
height: 33px;
border: 1px solid;
border-color: rgba(187, 187, 187, 1) rgba(187, 187, 187, 1) transparent transparent ;
}


#news:after{
display:inline-block; 
position: absolute;
left:0;
bottom: 0;
left: 0;
content:'';
width: 33px;
height: 33px;
border: 1px solid;
border-color: transparent transparent rgba(187, 187, 187, 1) rgba(187, 187, 187, 1) ;
}



#news h2{
font-size:150%;
font-weight:400!important;
padding:0.5em;
text-align:center;
margin-bottom:1em;
}

#news h2:after{
content:"";
display:block;
height:2px;
background: linear-gradient(to right, rgba(255,64,0,0.2) 20%,rgba(255,64,0,1) 48%,rgba(255,64,0,0.2) 100%);
margin-top:5px;
}


#news .entry{
display:block;
margin:0 1em;
padding:1em;

}


.newsbox{
position:relative;
}

.newsbox:after {content:"";}

#news .entry:after {content:"";}


.newsbox:before{
position: absolute;
top:0;
left: 0;
right: 0;
content:'';
width: 33px;
height: 33px;
border: 1px solid;
border-color: rgba(187, 187, 187, 1) transparent transparent rgba(187, 187, 187, 1);
}




.newsbox:after{
display:inline-block; 
position: absolute;
right:0;
bottom: 0;
right: 0;
content:'';
width: 33px;
height: 33px;
border: 1px solid;
border-color: transparent rgba(187, 187, 187, 1) rgba(187, 187, 187, 1) transparent ;
}