@charset "UTF-8";
@import url("../common/common.css");
@import url("../common/sub.css");
@import url("../common/base.css");


/*----- WORKS 設定 ----------------------------------------------------*/

section#works { width:94%; padding:30px 3%; overflow:hidden; }

section#works > p{ width:96%; padding:20px 2%; color:#333; }

section.case { width:96%; padding:20px 2%; overflow:hidden; }
section.case h4{ width:100%; padding:10px 0 0 0; font-size:2.0em; font-family:'Oswald', sans-serif; font-weight:300; color:#222; border-bottom:dotted 1px #aaa; }
section.case h5{ width:100%; padding:5px 0 0 0; font-size:1.0em; font-weight:normal; color:#888; }

ul.case_list { width:100%; padding:20px 0; }
ul.case_list li{ /* width:200px; */ min-height:190px; padding:0 20px; margin:0 0 40px 0; text-align:center; /* background:url(/img/works/arrow.png) right 50% no-repeat; */ border-right:dotted 1px #aaa; float:left; }
ul.case_list li img{ max-width:200px; max-height:148px; }

ul.case_list li img{
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  filter: gray;
  -webkit-filter: grayscale(100%);
  filter:alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}
ul.case_list li img:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
  filter:alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
}
ul.case_list li a{ width:100%; font-size:0.9em; color:#333; display:block; }


/*----- 900px以下の画面設定 ----------------------------------------------------*/

@media screen and (max-width:900px) {



}


/*----- 650px以下の画面設定 ----------------------------------------------------*/

@media screen and (max-width:650px) {

	ul.case_list li{ width:46%; padding:0 1%; margin:0 1% 10px 1%; background:none; border:none; }
	ul.case_list li img{ width:90%; }
	ul.case_list li p{ width:100%; overflow:hidden; white-space:nowrap; -o-text-overflow:ellipsis; text-overflow:ellipsis; }

	ul.case_list li img{
	  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
	  filter: none;
	  -webkit-filter: grayscale(0%);
	  filter:alpha(opacity=100);
	  -moz-opacity: 1;
	  opacity: 1;
	}

}