@charset "UTF-8";
/* ***********************************************************************
    Ko Hosokawa Photograph Office - <Works>
*********************************************************************** */
/*
	01 : WORKS
*/


/* ***********************************************************************
	01 : WORKS
*********************************************************************** */
/* SP */
div.list {
	width : 88%;
	margin: 0 auto;
}
#gallery ul#box-container {
	margin : 0;
	padding: 0;
}
#gallery ul#box-container li.box {
	list-style-type: none;
	float          : left;
	margin-top     : 1%;
	margin-left    : 1%;
	width          : 49.5%;
}
#gallery ul#box-container .box:nth-child(2n+1) {
	clear      : both;
	margin-left: 0;
}
#gallery ul#box-container .box a {
	display: block;
	width  : 100%;
	height : auto;
}
#gallery ul#box-container .box a img {
	-webkit-back-visibility: hidden;
	display                : block;
	width                  : 100%;
	height                 : auto;
	vertical-align         : bottom;
}

/***  POST PAGER ***/
#post_pager {
	position: relative;
	width   : 94%;
	height  : 56px;
	margin  : 56px auto 0;
}
#post_pager ul {
	width : 100%;
	height: 56px;
}
#post_pager ul li {
	display: block;
	height : 56px;
}
#post_pager ul li.next {
	position: absolute;
	right   : 0;
	top     : 0;
	width   : 56px;
	height  : 56px;
	z-index : 10;
}
#post_pager ul li.prev {
	position: absolute;
	left    : 0;
	top     : 0;
	width   : 56px;
	height  : 56px;
	z-index : 10;
}
#post_pager ul li.next a,
#post_pager ul li.prev a {
	display         : block;
	background-color: #efefef;
	width           : 56px;
	height          : 56px;
	text-align      : center;
}
#post_pager ul li.next a img,
#post_pager ul li.prev a img {
	display: inline-block;
	width  : 25px;
	height : 25px;
	margin : 15px auto;
}


@media (min-width:896px) {
/* PC */
	div.list {
		width : 100%;
		margin: 0;
	}
	#gallery ul#box-container {
		margin : 0;
		padding: 0;
	}
	#gallery ul#box-container li.box {
		margin-top     : 30px;
		margin-left    : 30px;
		width          : 340px;
	}
	#gallery ul#box-container .box:nth-child(2n+1) {
		clear      : none;
		margin-left: 30px;
	}
	#gallery ul#box-container .box:nth-child(3n+1) {
		clear      : both;
		margin-left: 0;
	}
	#gallery ul#box-container .box a {
		display: block;
		width  : 340px;
		height : 340px;
	}
	#gallery ul#box-container .box a img {
		-webkit-back-visibility: hidden;
		display                : block;
		width                  : 340px;
		height                 : 340px;
		vertical-align         : bottom;
	}

	/***  POST PAGER ***/
	#post_pager ul li.next a img,
	#post_pager ul li.prev a img {
		display: none;
	}
	#post_pager {
		width : 1080px;
		margin: 64px auto 0;
	}
	#post_pager ul li.next,
	#post_pager ul li.prev {
		min-width : 45px;
		max-width : 240px;
		width     : auto;
	}
	#post_pager ul li.next a,
	#post_pager ul li.prev a {
		background-color: inherit;
		min-width       : 45px;
		max-width       : 240px;
		width           : auto;
		height          : 45px;
		color           : #000;
		font: 20px/45px 'Roboto Condensed', sans-serif;
	}
	#post_pager ul li.next a:hover,
	#post_pager ul li.prev a:hover {
		text-decoration: none;
		opacity        : 0.6;
		filter         : alpha(opacity=60);
	}
	#post_pager ul li.next a {
		background   : url(../images/next_p.gif) right center no-repeat;
		padding-right: 56px;
		text-align   : right;
	}
	#post_pager ul li.prev a {
		background  : url(../images/prev_p.gif) left center no-repeat;
		padding-left: 56px;
		text-align  : left;
	}
}