ul#works {
	list-style : none;
	overflow : hidden;
	width : 1250px;
	margin-bottom : 15px;
}

ul#works li {
	float : left;
	position : relative;
	margin : 0 24px 24px 0;
}

ul#works li:nth-child(4n) {
	margin : 0 0 24px 0;
}

ul#works li p {
	position : relative;
	width : 293px;
	border-radius : 10px;
}

ul#works li p:after {
	position : absolute;
	content : "";
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	background : -webkit-linear-gradient(top,rgba(0,0,0,0)40%,rgba(0,0,0,0.5)80%);
	border-radius : 10px;
}

.thumbnail {
	width : 293px;
	background-size : cover;
	background-position : center center;
	padding-top : 350px;
}

ul#works li h3 {
	position : absolute;
	width : 250px;
	font-size : 100%;
	font-weight : 600;
	line-height : 1.3em;
	color : #ffffff;
	text-align : center;
	left : 20px;
	bottom : 30px;
	z-index : 1;
}

ul#works li h3 span {
	display : block;
}

ul#works li a:hover p {
	opacity : 0.6;
	filter : alpha(opacity=60);
}

/*----------PAGE_NAVI----------*/

ul#pnavi {
	clear : both;
	list-style : none;
	width : 950px;
}

ul#pnavi li {
	display : inline;
	margin : 0 3px 0 0;
	font-size : 120%;
	font-style : normal;
}

ul#pnavi li a {
	text-decoration : none;
	padding : 4px 14px 6px 14px;
	color : #ffffff;
	background : #2d9bf5;
	border-radius : 6px;
}

ul#pnavi li a:hover {
	padding : 4px 14px 6px 14px;
	color : #ffffff;
	background : #0546af;
	border-radius : 6px;
}

ul#pnavi span.current_page {
	padding : 4px 14px 6px 14px;
	color : #282828;
	background-color : #e6e6e6;
	border-radius : 6px;
}

/*----------GALLERY----------*/

ul#gallery {
	list-style : none;
	overflow : hidden;
	width : 780px;
}

ul#gallery li {
	float : left;
	width : 375px;
	margin : 0 30px 30px 0;
}

ul#gallery li:nth-child(2n) {
	margin : 0 0 30px 0;
}

.thumbnail {
	position : relative;
	width : 100%;
	background-size : cover;
	background-position : center center;
	padding-top : 330px;
	border-radius : 10px;
}

ul#gallery li a:hover {
	opacity : 0.6;
	filter : alpha(opacity=60);
}

.thumbnail p {
	position : absolute;
	width : 32px;
	right : 15px;
	bottom : 15px;
}

.thumbnail img {
	width : 100%;
	height : 100%;
}

/*----------DATA----------*/

#boxR {
	position : absolute;
	width : 420px;
	top : 0;
	right : 0;
}

#data {
	width : 350px !important;
	width /**/: 420px;
	margin-bottom : 35px;
	padding : 25px 25px 30px 25px;
	background : #e6e6e6;
	border-radius : 12px;
}

#data h3 {
	margin-bottom : 20px;
	font-size : 110%;
	font-weight : 700;
	text-align : center;
}

#data dl {
	padding-top : 7px;
	border-top : solid 6px #b4b4b4;
}

#data dl dt {  
	float: left;
	width : 100px;
	padding : 9px 0 10px 0;
}

#data dl dt {   
	clear : left;
}

#data dl dd {
	padding : 9px 0 10px 0;
	border-bottom : solid 1px #aaaaaa;
}

#data dl dd a {
	color : #323232;
	text-decoration : underline;
}

#data dl dd a:hover {
	color : #323232;
	text-decoration : none;
}

#boxR p {
	width : 220px;
	margin : 0 auto 0 auto;
	text-align : center;
}

#boxR p a {
	display : block;
	padding : 9px 0 10px 0;
	color : #282828;
	border : solid 3px #cccccc;
	background : #ffffff;
	border-radius : 30px;
	text-decoration : none;
}

#boxR p a:hover {
	display : block;
	padding : 9px 0 10px 0;
	color : #ffffff;
	border : solid 3px #999999;
	background : #999999;
	border-radius : 30px;
	text-decoration : none;
}