@charset "utf-8";

*{
	margin: 0;
	padding: 0;
}

a{
	text-decoration: none;
	outline: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
}
a img{
	border: none;
}

table{
	border-collapse: separate;
	border-spacing:0;
}

ul{
	list-style-type: none;
}
	
/*
共通スタイル*/

#wrapper{
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}

header{
	width: 100%;
		background: -webkit-linear-gradient(top, #fd8f9b 0%, #f55 50%, #f60000 50%, #ffa7b0 100%);

}

header h1{
	text-align: center;
	padding: 5px 0;	
	color: #FFF;
	text-shadow: 2px 2px 3px #333,-1px -1px 1px #333;
}

header h1 a{
	color: #FFF;
}

nav{
	width: 850px;
	margin:15px auto 0 auto;
}


footer{
	width: 900px;
	clear: both;
	padding-top: 20px;
}

.btm{
	position: absolute;
	bottom:0;
}

div.pr{
	clear:both;
	padding: 20px 10px;
	color: #666;
}

footer p{
	padding: 3px 0;
	text-align: center;
}

.portfolio{
	width: 25%;
	margin: 0 auto;
}

.portfolio img{
	width: 100%;
	height: auto;
}


footer p a{
	color: #333;
}

/* 601px以上 */
/*
nav ul{
	width: 850px;
	margin: auto;
}
*/
	nav ul li{
		width: 250px;
		margin: 16px;
		overflow: hidden;
		float: left;
	}

	nav ul a{
		display: block;
		height: 130px;
		color: #FFF;
		font-size: 24px;
		border-radius: 10px;
		text-shadow: 2px 2px 3px #333,-1px -1px 1px #333;
		box-sizing: border-box;
	}

	nav ul #shopping a,nav ul #category3 a{
		padding: 19% 5% 21% 50%;/* １段文字位置 */
		background: url("../img/shopping_l.png"), -webkit-linear-gradient(top, #fd8f9b 0%, #f55 50%, #f60000 50%, #ffa7b0 100%);
		background: url("../img/shopping_l.png"), -ms-linear-gradient(top, #fd8f9b 0%, #f55 50%, #f60000 50%, #ffa7b0 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul #bank a,nav ul #category9 a{
		padding: 13.5% 5% 14% 50%;/* ２段文字位置 */
		background: url("../img/bank_l.png"), -webkit-linear-gradient(top, #82bcea 0%, #408fd3 50%, #1375ca 50%, #82bcea 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul #hospital a,nav ul #category10 a{
		padding: 13.5% 5% 14% 50%;/* ２段文字位置 */
		background: url("../img/hospital_l.png"),  -webkit-linear-gradient(top,#b3fffe 0%,#4ffffd 50%,#0df8f2 50%,#b3fffe 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul #culture a,nav ul #category11 a{
		padding: 13.5% 5% 14% 50%;/* ２段文字位置 */
		background: url("../img/culture_l.png"),  -webkit-linear-gradient(top,#bcffbe 0%,#3ad33d 50%,#26b92a 50%,#7dff7d 100%);
		background-repeat: no-repeat;
		background-position: 15% center;
	}

	nav ul #restaurant a,nav ul #category2 a{
		padding: 19% 5% 21% 50%;/* １段文字位置 */
		background: url("../img/restaurant_l.png"), -webkit-linear-gradient(top, #feceb4 0%, #feceb4 50%, #f17431 50%, #feceb4 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul #government a,nav ul #category5 a{
		padding: 13.5% 5% 14% 50%;/* ２段文字位置 */
		background: url("../img/government_l.png"),  -webkit-linear-gradient(top,#8fabfd 0%,#5581ff 50%,#0040f6 50%,#a7baff 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul #fashion a,nav ul #category8 a{
		padding: 19% 5% 21% 50%;/* １段文字位置 */
		background: url("../img/fashion_l.png"), -webkit-linear-gradient(top,#fd8fe4 0%,#ff55d7 50%,#f600bd 50%,#ffa7ea 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul #other a,nav ul #category7 a{
		padding: 19% 5% 21% 50%;/* １段文字位置 */
		background: url("../img/other_l.png"),  -webkit-linear-gradient(top,#fdf98f 0%,#fff955 50%,#f6ee00 50%,#fffca7 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul li.p2dan a{
		padding: 13.5% 5% 14% 10%;/* ２段文字位置 */
	}




/* 600px以下のスタイル ----*/
@media (max-width: 600px){
	#wrapper{
		width: 100%;
	}

	nav{
		width: 100%;
		margin:15px auto 0 auto;
	}


	nav ul li{
		width: 46%;
		margin: 2%;
		overflow: hidden;
		float: left;
	}

	nav ul a{
		display: block;
		height: 130px;
		color: #FFF;
		font-size: 24px;
		border-radius: 10px;
		text-shadow: 2px 2px 3px #333,-1px -1px 1px #333;
		box-sizing: border-box;
	}

	nav ul #shopping a,nav ul #category3 a{
		padding: 19% 5% 21% 50%;/* １段文字位置 */
		background: url("../img/shopping_l.png"), -webkit-linear-gradient(top, #fd8f9b 0%, #f55 50%, #f60000 50%, #ffa7b0 100%);
		background: url("../img/shopping_l.png"), -ms-linear-gradient(top, #fd8f9b 0%, #f55 50%, #f60000 50%, #ffa7b0 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul #bank a,nav ul #category9 a{
		padding: 13.5% 5% 14% 50%;/* ２段文字位置 */
		background: url("../img/bank_l.png"), -webkit-linear-gradient(top, #82bcea 0%, #408fd3 50%, #1375ca 50%, #82bcea 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul #hospital a,nav ul #category10 a{
		padding: 13.5% 5% 14% 50%;/* ２段文字位置 */
		background: url("../img/hospital_l.png"),  -webkit-linear-gradient(top,#b3fffe 0%,#4ffffd 50%,#0df8f2 50%,#b3fffe 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul #culture a,nav ul #category11 a{
		padding: 13.5% 5% 14% 50%;/* ２段文字位置 */
		background: url("../img/culture_l.png"),  -webkit-linear-gradient(top,#bcffbe 0%,#3ad33d 50%,#26b92a 50%,#7dff7d 100%);
		background-repeat: no-repeat;
		background-position: 15% center;
	}

	nav ul #restaurant a,nav ul #category2 a{
		padding: 19% 5% 21% 50%;/* １段文字位置 */
		background: url("../img/restaurant_l.png"), -webkit-linear-gradient(top, #feceb4 0%, #feceb4 50%, #f17431 50%, #feceb4 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul #government a,nav ul #category5 a{
		padding: 13.5% 5% 14% 50%;/* ２段文字位置 */
		background: url("../img/government_l.png"),  -webkit-linear-gradient(top,#8fabfd 0%,#5581ff 50%,#0040f6 50%,#a7baff 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul #fashion a,nav ul #category8 a{
		padding: 19% 5% 21% 50%;/* １段文字位置 */
		background: url("../img/fashion_l.png"), -webkit-linear-gradient(top,#fd8fe4 0%,#ff55d7 50%,#f600bd 50%,#ffa7ea 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul #other a,nav ul #category7 a{
		padding: 19% 5% 21% 50%;/* １段文字位置 */
		background: url("../img/other_l.png"),  -webkit-linear-gradient(top,#fdf98f 0%,#fff955 50%,#f6ee00 50%,#fffca7 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul li.p2dan a{
		padding: 13.5% 5% 14% 10%;/* ２段文字位置 */
	}

	footer{
		width: 100%;
	}
}/*↑↑ 600px以下 ---*/

/* 360px以下のスタイル ----*/
@media (max-width: 360px){
	#wrapper{
		width: 100%;
	}

	nav ul li{
		width: 46%;
		margin: 2%;
		float: left;
	}

	nav ul a{
		display: block;
		color: #FFF;
		font-size: 18px;
		border-radius: 5px;
		text-shadow: 2px 2px 3px #333,-1px -1px 1px #333;
		height: auto;
	}

	nav ul #shopping a,nav ul #category3 a{
		padding: 20% 5% 20% 50%;/* １段文字位置 */
		background: url("../img/shopping.png"), -webkit-linear-gradient(top, #fd8f9b 0%, #f55 50%, #f60000 50%, #ffa7b0 100%);
		background: url("../img/shopping.png"), -ms-linear-gradient(top, #fd8f9b 0%, #f55 50%, #f60000 50%, #ffa7b0 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul #bank a,nav ul #category9 a{
		padding: 14% 5% 13.5% 50%;/* ２段文字位置 */
		background: url("../img/bank.png"), -webkit-linear-gradient(top, #82bcea 0%, #408fd3 50%, #1375ca 50%, #82bcea 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul #hospital a,nav ul #category10 a{
		padding: 14% 5% 13.5% 50%;/* ２段文字位置 */
		background: url("../img/hospital.png"),  -webkit-linear-gradient(top,#b3fffe 0%,#4ffffd 50%,#0df8f2 50%,#b3fffe 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul #culture a,nav ul #category11 a{
		padding: 14% 0 13.5% 42%;/* ２段文字位置 */
		background: url("../img/culture.png"),  -webkit-linear-gradient(top,#bcffbe 0%,#3ad33d 50%,#26b92a 50%,#7dff7d 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul #restaurant a,nav ul #category2 a{
		padding: 20% 5% 20% 50%;/* １段文字位置 */
		background: url("../img/restaurant.png"), -webkit-linear-gradient(top, #feceb4 0%, #feceb4 50%, #f17431 50%, #feceb4 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul #government a,nav ul #category5 a{
		padding: 14% 5% 13.5% 50%;/* ２段文字位置 */
		background: url("../img/government.png"),  -webkit-linear-gradient(top,#8fabfd 0%,#5581ff 50%,#0040f6 50%,#a7baff 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul #fashion a,nav ul #category8 a{
		padding: 20% 5% 20% 50%;/* １段文字位置 */
		background: url("../img/fashion.png"), -webkit-linear-gradient(top,#fd8fe4 0%,#ff55d7 50%,#f600bd 50%,#ffa7ea 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}

	nav ul #other a,nav ul #category7 a{
		padding: 20% 5% 20% 50%;/* １段文字位置 */
		background: url("../img/other.png"),  -webkit-linear-gradient(top,#fdf98f 0%,#fff955 50%,#f6ee00 50%,#fffca7 100%);
		background-repeat: no-repeat;
		background-position: 8% center;
	}


	nav ul li.p2dan a{
		padding: 8.5% 5% 8% 10%;/* ２段文字位置 */
	}

	footer{
		width: 100%;
	}

}/*↑↑ 360px以下 ---*/