@charset "utf-8";

/* ==========================================

  “works” CSS
		
========================================== */
#works .list li		{	border:1px solid #1e2a5e; padding:10px; margin-top:30px; width:100%; overflow:hidden;}

#works .list h3		{	font-size:1.200em; color:#1e2a5e; text-align:center; border-bottom:1px solid #1e2a5e; padding-bottom:10px;}

#works .list dl		{	zoom:1; overflow:hidden; margin:10px 0 20px; border-top:1px dotted #ccc;}
#works .list dt 	{	clear:both; float:left; width:3em; padding:5px 0; }
#works .list dd		{	border-bottom:1px dotted #ccc; padding:5px 0 5px 3em;} 

#works .list .beforeAfter			{	display:table; width:100%;}
#works .list .beforeAfter div		{	display:table-cell;}
#works .list .beforeAfter div h4	{	text-align:center; padding-bottom:5px;}
#works .list .beforeAfter div a		{	position:relative; display:block;}
#works .list .beforeAfter div a:after
		{	content:""; width:20%; height:50%; background:url(../../_common/_img/icon_finder.svg) no-repeat center bottom;
			background-size:100% auto;
			position:absolute; bottom:10px; right:10px;
			opacity:0.7;}
#works .list .beforeAfter div a img	{	width:100%;}
#works .list .beforeAfter div a:hover img	{	opacity:0.7;}
#works .list .beforeAfter div:first-child	{	padding-right:10px;}
#works .list .beforeAfter div:last-child	{	padding-left:10px;}

@media print, screen and (min-width:600px) {
#works .list li	{	padding:20px;}
#works .list dl	{	float:left; width:48%;}
#works .list .beforeAfter	{	float:right; width:48%;}
}

@media print, screen and (min-width:768px) {
#works .list 	{	display:flex; flex-wrap:wrap; flex-direction:row; justify-content:space-between;}
#works .list li	{	flex-basis:48%; max-width:48%;}					
}