@charset "utf-8";


#top .top_bg { background-image: url(../images/works/fv_bg.jpg); }

#works { }
#works ul { display: flex; flex-wrap: wrap;}
#works li { width: 320px; margin-bottom: 50px; margin-right: 70px;}
#works li:nth-child(3n) { margin-right: 0;}
#works li a { }
#works li h3 { font-size: 26px; font-family: 'NotoSansJP-Bold'; color: #003597;}
#works li h3:before { display: inline-block; content: ""; width: 4px; height: 40px; background-color: #003597; margin-right: 17px; vertical-align: -11px;}
#works li .work_img { position: relative; margin-bottom: 14px;}
#works li .work_img img { width: 100%; height: auto;}
#works li .area { position: absolute; bottom: 20px; left: 0; display: flex; background-color: #fff; border: 2px solid #003597; border-radius: 0 15px 15px 0;}
#works li .area .area_name { font-size: 14px; padding: 4px 20px 6px 15px; line-height: 1.3;}
#works li .area .place { font-size: 14px; width: 70px; color: #fff; padding: 6px 0; text-align: center; background-color: #003597;}

#works li h4 { padding-left: 1em; font-size: 16px; line-height: 1.6;}
#works li .request { padding-left: 1em; display: block; font-family: 'NotoSansJP-Regular'; margin-bottom: 10px; background: url(../images/works/icn_01.svg) no-repeat;   background-position: 0em 0.25em;background-size: 10px 10px;}




/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	
	#top .top_bg { background-image: url(../images/works/fv_bg_sp.jpg); }
	
	#works { }
	#works ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
	#works li { width: 48%; margin-bottom: 30px; margin-right: 0;}
	#works li a { }
	#works li h3 { font-size: 15px;}
	#works li h3:before { width: 3px; height: 25px; margin-right: 7px; vertical-align: -8px;}
	#works li .work_img { margin-bottom: 7px;}
	#works li .area { bottom: 8px;}
	#works li .area .area_name { width: 90px; font-size: 9px; padding: 4px 0 4px 6px;}
	#works li .area .place { width: 40px; font-size: 9px;}
	#works li h4 { padding-left: 10px; font-size: 12px;}
	#works li .request { padding-left: 10px; font-size: 10px; margin-bottom: 5px; background-position: 0em 0.3em; background-size: 5px 5px;}
	
	
	
}