#main{
	position:relative;
	padding:20px 0 0 0;
}

#subNavi li.active{
	color:#C3D600;
}

#subNavi li label{
	cursor:pointer;
}

#subNavi input[type="radio"] {
  display:none; 
}

#worksArea{
	width:94%;
	margin:0 auto 0 auto;
	padding:0 0 0 5px;
}

#worksArea li{
	float:left;
	width:220px;
	background-color:#fff;
	margin:0 10px 15px 0;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	box-shadow:rgba(0, 0, 0, 0.2) 1px 1px 3px 1px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.2) 1px 1px 3px 1px;
	-moz-box-shadow:rgba(0, 0, 0, 0.2) 1px 1px 3px 1px;
	cursor:pointer;
}
#worksArea li:last-child{
	margin:0 0 15px 0;
}
#worksArea li img{
	display:inline-block;
	backface-visibility: hidden;
	width:100%;
	margin:0;
	padding:0;
	border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;
	background:#fff;
}
#worksArea li p{
	text-align:left;
	margin:-6px 0 0 0;
	padding:8px;
	font-size:11px;
	letter-spacing:1px;
	line-height:1.4;
	border-radius:0 0 5px 5px ;
	-webkit-border-radius:0 0 5px 5px;
	-moz-border-radius:0 0 5px 5px;
}

#popupLayer{
	display:none;
	position:fixed;
	top:89px;
	left:0;
	width:100%;
	height:100%;
	background-color:#000;
	opacity:90;
	filter: alpha(opacity=86);
	-ms-filter: "alpha( opacity=86)";
	background:rgba(0,0,0,0.86);
	z-index:5;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}

.popup{
	cursor:pointer;
}
#popup{
	position:relative;
	width:80%;
	top:5%;
	left:50%;
	margin:0 0 0 -40%;
	padding:10px 15px 30px 15px;
	z-index:100;
	color:#fff;
}
.popup_close{
	float:right;
	margin:3px 0 10px 0;
	cursor:pointer;
}

#photoLeft{
	display:none;
	clear:both;
	float:left;
	width:7%;
	margin:25% 0 0px 0;
	padding:0px;
}
#photoLeft img{
	cursor:pointer;
	}
#photoArea{
	float:left;
	width:86%;
	margin:40px 0 0 7%;
}
#photo img{
	width:auto;
	max-width:800px;
}
#title{
	line-height:1.5;
	margin:10px auto 5px auto;
}
#text{
/*	position:absolute;
	top:0;*/
	width:86%;
	margin:0 auto 15px auto;
	line-height:1.5;
	letter-spacing:1px;
	text-align:center;
	-webkit-font-smoothing: antialiased;
}


#photoRight{
	display:none;
	float:left;
	width:7%;
	margin:25% 0px 10px 0;
	padding:0px;
}
#photoRight img{
	cursor:pointer;	
}

#youtube{
	width:86%;
}


/*スマホ----------------------------------------------*/

@media screen and (max-width: 640px) {
	#worksArea li{
		clear:both;
		width:98%;
	}
	
	
	#popup{
		width:100%;
		top:3%;
		left:0;
		margin:0;
		padding:15px 0 15px 0;
		z-index:100;
		color:#fff;
	}
	.popup_close{
		margin:0 1% 10px 0;
	}
	
	
	#photoLeft{
		display:none;
		float:none;
	}
	#photoArea{
		clear:both;
		float:none;
		width:100%;
		margin:80px 0 0 0;
	}
	#photo{
		margin:90px auto 0 auto;
		/*overflow-y:hidden;*/
	}
	#photo img{
		width:100%;
		height:auto;
		display:inline;
		margin:0 0 20px 0;
	}
	#photo img:last-child{
		margin:0 0 10px 0;
	}
	#youtube{
		width:100%;
		height:auto;
		margin:0;
		padding:0;
	}
	#text{
		width:100%;
	}
	
	#photoRight{
		display:none;
		float:none;
	}
	#popup_back{
		width:100%;
		height:20px;
		margin:0 auto 20px auto;
		text-align:center;
		color:#fff;
	}

	
}