/* ==========================================================================
   Gallery Css
   ========================================================================== */
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900);

/* ==========================================================================
   BackGround
========================================================================== */
#background{
	background:url(../img/bg_gallery.jpg);
}

#contents{
	z-index:3;
	font-weight:bold;
	box-shadow:none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
}

#contents li{
	margin-bottom:30px;
	z-index:3;
	font-weight:bold;
	/*box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 15px 3px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 15px 3px;
	-moz-box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 15px 3px;*/
	text-align: center;
}
#contents li img{
	box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 15px 3px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 15px 3px;
	-moz-box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 15px 3px;
	text-align: center;
}

#contents .indexList,
#contents .naviList{
	overflow: hidden;
}
#contents .indexList img,
#contents .naviList img{
	width: 100%;
	height: auto;
	box-shadow:none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
}
#contents .indexList li{
	float: left;
	margin: 0 1% 15px 1%;
	width:48%;
	background: #fff;
	box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 15px 3px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 15px 3px;
	-moz-box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 15px 3px;
}
#contents .indexList .ttlSet{
	padding: 20px 0;
}
#contents .indexList h3{
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
	font-size: 18px;
}
#contents .indexList p{
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	margin: 5px 0 0;
}
#contents .indexList a:link {
	color:#462d0a;
	text-decoration : none;
	}
#contents .indexList a:visited {
	color: #462d0a;
	text-decoration : none;
	}
#contents .indexList a:hover {
	color:#a31e10;
	text-decoration : none;
	}

#contents .naviList{
	margin-top: 60px;
}
#contents .naviList li{
	float: left;
	margin: 0 0.5% 15px 0.5%;
	width:24%;
	background: #fff;
	box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 15px 3px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 15px 3px;
	-moz-box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 15px 3px;
}
#contents .naviList .ttlSet{
	padding: 15px 0;
}
#contents .naviList h3{
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
	font-size: 16px;
}
#contents .naviList p{
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	margin: 5px 0 0;
	font-size: 13px;
}
#contents .naviList a:link {
	color:#462d0a;
	text-decoration : none;
	}
#contents .naviList a:visited {
	color: #462d0a;
	text-decoration : none;
	}
#contents .naviList a:hover {
	color:#a31e10;
	text-decoration : none;
	}


@media only screen and (max-width: 480px) {
	#contents{
		width: 95%;
		margin: 0 auto;
	}
	#contents img{
		max-width:100%;
		height:auto;
	}
	#contents .indexList li{
		float: none;
		margin: 0 0 15px 0;
		width:100%;
	}
	#contents .naviList{
		margin-top: 30px;
	}
	#contents .naviList li{
		margin: 0 1% 15px 1%;
		width:48%;
		box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 5px 3px;
		-webkit-box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 5px 3px;
		-moz-box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 5px 3px;
	}
}