@charset "utf-8";
/* ------------------------------------------------------------ common */

#header #right ul li.works { border-bottom: 2px solid #1a478b;}

/* ------------------------------------------------------------  */

#fv { background: url(../images/works/fv.jpg) center center no-repeat; background-size: cover;}

#works { background: #f7fbfe; padding: 0 0 105px; margin: 0 0 10px;}
#works #w_nav { padding: 30px 0 0; margin: 0 0 90px -18px;}
#works #w_nav li { float: left; text-align: center; width: 205px; border: 1px solid #eeeeee; box-sizing: border-box; -webkit-box-sizing: border-box; margin: 0 0 0 18px; position: relative;}
#works #w_nav li::before { content: ""; width: 150px; height: 5px; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto;}
#works #w_nav li.school::before { background: #00a5a8;}
#works #w_nav li.building::before { background: #e65c9c;}
#works #w_nav li.hospital::before { background: #f8870e;}
#works #w_nav li.house::before { background: #eec523;}
#works #w_nav li.shop::before { background: #dd0102;}
#works #w_nav li a { display: block; font-size: 18px; color: #004f99; font-weight: bold; background: url(../images/works/arw.gif) center 170px no-repeat #fff; padding: 30px 0 50px;}
#works #w_nav li a img  { padding: 0 0 20px;}
#works h3 { color: #fff; font-size: 30px; font-weight: bold; background: #004f99; padding: 25px 30px; border-radius: 0 0 15px 15px; -moz-border-radius: 0 0 15px 15px; -webkit-border-radius: 0 0 15px 15px; margin: 0 20px;}
#works h3 img { padding: 0 15px 0 0; vertical-align: bottom;}
#works .box { background: #fff; margin: 0 0 105px;}
#works .box .p_list { padding: 40px 0 0; margin: 0 0 0 25px;}
#works .box .p_list li { float: left; width: 300px; margin: 0 25px;}

/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
	
/* ------------------------------------------------------------  */

#fv { background: url(../images/works/fv.jpg) center center no-repeat; background-size: cover;}

#works { background: #f7fbfe; padding: 0 0 55px; margin: 0 ;}
#works #w_nav { padding: 30px 0 0; margin: 0 0 40px; text-align: center;}
#works #w_nav li { float: none; text-align: center; width: 90%; border: 1px solid #eeeeee; box-sizing: border-box; -webkit-box-sizing: border-box; margin: 0 auto 15px; position: relative; text-align: left;}
#works #w_nav li::before { content: ""; width: 80%; height: 3px; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto;}
#works #w_nav li a { display: block; font-size: 18px; font-weight: bold; background: url(../images/works/arw.gif) 94% center no-repeat #fff; padding: 20px 4%;}
#works #w_nav li a img  { padding: 0 10px 0 0; height: 40px; width: auto;}
#works h3 { font-size: 18px; padding: 15px 5%; border-radius: 0 0 15px 15px; -moz-border-radius: 0 0 15px 15px; -webkit-border-radius: 0 0 15px 15px; margin: 0;}
#works h3 img { padding: 0 10px 0 0; vertical-align: middle; height: 40px; width: auto;}
#works .box { background: #fff; margin: 0 0 25px;}
#works .box .p_list { padding: 20px 0 0; margin: 0 0 0 -3%;}
#works .box .p_list li { float: left; width: 47%; margin: 0 0 15px 3%;}
#works .box .p_list li img { width: 100%; height: auto;}
}