@charset "utf-8";
@import url(base.css);


		#contenttitle{
			background-image:url(../works/images/img_content.jpg);
		}



/********************************** index **********************************/



@media screen and (max-width:980px){
#globalheader{border-bottom:none;}
}


	#contenttitle{
		margin-bottom:-25px;
	}
	



			#workslist .inner{
				max-width:1000px;
				width:96%;
				margin:0 auto;
				padding:50px 0;
			}

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

			#workslist .inner{
				margin:30px auto;
			}

		}

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

			#workslist .inner{
				margin:20px auto;
			}

		}


			#workslist ul{
				width:100%;
				margin:30px 0;
			}

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

			#workslist ul{
				margin:10px 0;
			}

		}

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

			#workslist ul{
				margin:0;
			}

		}
		

			#workslist li{
				width:18%;
				padding:1%;
				list-style:none;
				text-align:center;
				float:left;
			}

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

			#workslist li{
				width:calc(92% / 4);
				padding:1%;
			}

		}

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

			#workslist li{
				width:calc(88% / 3);
				padding:2%;
			}

		}

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

			#workslist li{
				width:calc(92% / 2);
				padding:2%;
			}

		}
		
		
		
#workslist li{zoom:1;}
#workslist li:after{
  content: ""; 
  display: block; 
  clear: both;
}


			#workslist li a{
				display:block;
				text-decoration:none;
			}

			#workslist li a:hover{
				text-decoration:underline;
			}

				#workslist li img{
					max-width:160px;
					width:90%;
				}

				#workslist li .date{
					margin:0;
					font-size:0.9em;
					text-align:center;
				}