@charset "utf-8";

/*----------------------------------------------------------------
 ./member/
 -----------------------------------------------------------------
 c/p
 <link href="./css/style.css" rel="stylesheet" type="text/css" media="screen,print" />
----------------------------------------------------------------*/

/*----------------------------------------------------------------
 optional
----------------------------------------------------------------*/
/*-----------------------------------------------------
 contents
-----------------------------------------------------*/

/* masonry
-----------------------------------------------------*/
#contents .masonry {
	position			: relative;
	overflow			: hidden;
	clear				: both;
	padding				: 0 0 8px 0;
}
#contents .masonry .box{
	float				: left;
	-moz-box-shadow		: 1px 1px 4px #999;
	-webkit-box-shadow	: 1px 1px 4px #999;
	box-shadow			: 1px 1px 4px #999;
	margin				: 0 0 8px 0;
	background			: #FFF;
}
#contents .masonry .size-l{
	width				: 295px;
}
#contents .masonry .size-s{
	width				: 145px;
}
#contents .masonry .box dt{
	padding				: 5px;
	text-align			: center;
	border				: none;
	background			: none;
}
#contents .masonry .box dd{
	padding				: 0 5px 5px 5px;
	text-align			: center;
	font-size			: 85%;
	border				: none;
	background			: none;
}
/* member
-----------------------------------------------------*/
#contents .member{
}
#contents .member ul{
	position			: relative;
	overflow			: hidden;
	clear				: both;
	width				: 270px;
}
#contents .member ul li{
	float				: left;
	margin				: 0 30px 0 0;
}
/* under 768px(iPad/tabs)
----------------------------------------------------------------*/
@media screen and (max-width: 768px){
/*-----------------------------------------------------
 block
-----------------------------------------------------*/
#side{
	margin				: 0 auto;
	border-top			: none;
	padding				: 0 0 0 0;
}
/*-----------------------------------------------------
 contents
-----------------------------------------------------*/
#contents .container{
	padding				: 20px 0px 10px 0px;
}

/* member
-----------------------------------------------------*/
#contents .member ul{
	width				: 600px;
}
#contents .member ul li{
	width				: 210px;
}

}

/* under 600px(smartphone)
----------------------------------------------------------------*/
@media screen and (max-width: 600px){
/*-----------------------------------------------------
 masonry
-----------------------------------------------------*/
#contents .masonry {
	margin				: 0 auto 20px auto;
	width				: 310px;
	padding				: 2px 0;
}
#contents .masonry img{
	max-width			: 285px;
}

/*-----------------------------------------------------
 contents
-----------------------------------------------------*/
/* member
-----------------------------------------------------*/
#contents .member ul{
	width				: 280px;
}
#contents .member ul li{
	width				: 140px;
}


}