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

/*-------------------------------------------------------------------
	wslide
-------------------------------------------------------------------*/

#wslide {
	width:100%;
	height:100%;
	background-position: right bottom !important;
	position: relative;
	background-size: auto 100%;
}

#wslide h2 {
	font-size: 5.0em;
	position: absolute;
	top: 5%;
	left: 5%;
}


/*-------------------------------------------------------------------
	works
-------------------------------------------------------------------*/

#works {
	width:830px;
	font-size: 1.1em;
	line-height: 2.0;
}

#works h3 {
	margin: 0 0 30px;
}

#works .read {
	margin: 0 0 80px;
}


#works .works {
	border-bottom: 1px solid #32aa38;
	margin: 0 0 40px;
	padding: 0 0 40px;
}

#works .works img {
	max-width: 100%;
}

#works .works .same {
	overflow: hidden;
	zoom:1;
}

#works .works .same .photo {
	float: left;
	width: 410px;
}

#works .works .same .texts {
	float: right;
	width: 400px;
}

#works .works .same dl dt {
	color: #32aa38;
	font-size: 1.2em;
	line-height: 1.4;
	margin: 0 0 10px;
}

#works .works .imgbox {
	overflow: hidden;
	zoom:1;
}

#works .works .imgbox li {
	float: left;
	width: 200px;
	margin: 10px 10px 0 0;
}

#works .works .imgbox li:nth-child(4n),
#works .works .imgbox li:last-child {
	margin: 10px 0 0;
}

/** wp-pagenavi **/
.wp-pagenavi{
	font-size: 15px;
	line-height: 1em;
	letter-spacing: 0;
	text-align: center;
	padding:10px 0 0;
}
.wp-pagenavi .pages{
	display: none;
}
.wp-pagenavi .first{
	display: none;
}
.wp-pagenavi .last{
	display: none;
}

.wp-pagenavi .current{
  display: inline-block;
	line-height: 18px;
  text-align: center;
  margin: 0 5px;
}

.wp-pagenavi .current,
.wp-pagenavi a.page:hover {
	color: #32aa38;
}

.wp-pagenavi a.page {
  display: inline-block;
	line-height: 18px;
  text-align: center; 
  margin: 0 5px;
}

.wp-pagenavi a.previouspostslink,
.wp-pagenavi a.nextpostslink {
	display: inline-block;
	color:#fff;
	background: #32aa38;
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	font-size: 12px;
}

.wp-pagenavi a.previouspostslink {
	margin-right: 10px;
}

.wp-pagenavi a.nextpostslink {
	margin-left: 10px;
}


.wp-pagenavi .extend{
	margin: 0 4px;
}
.wp-pagenavi a:hover{
	text-decoration: none;
}



/*===============================================
  画面の横幅が1024px以下に適用
===============================================*/
@media screen and (max-width: 1024px){
	
	/* works */

	#works {
		width:auto;
	}
	
	

}

/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px){
	
	#works .read {
		margin: 0 0 60px;
	}

	#works .works {
		margin: 0 0 30px;
		padding: 0 0 30px;
	}

	#works .works img {
		max-width: inherit;
		width: 100%;
	}

	#works .works .same .photo {
		float: none;
		width: auto;
		margin-top: 20px;
	}

	#works .works .same .texts {
		float: none;
		width: auto;
	}

	#works .works .imgbox li {
		float: left;
		width: 49%;
		margin: 10px 0 0;
	}

	#works .works .imgbox li:nth-child(4n),
	#works .works .imgbox li:last-child {
		margin: 10px 0 0;
	}
	
	#works .works .imgbox li:nth-child(even) {
		float: right;
	}
	
}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	


}

/*===============================================
  画面の横幅が380px以下に適用
===============================================*/
@media screen and (max-width: 380px){
}