@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{
	margin-top: 15px;
	width: 850px;
	margin:15px auto 0 auto;
}


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

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

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

footer p a{
	color: #333;
}

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

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

	nav ul li{
		width: 250px;
		margin: 16px;
		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;
		box-sizing: border-box;
	}

	nav ul li.base a{
		padding: 10% 0 10% 0;/* １段文字位置 */
		text-align: center;
	}

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

/*買い物*/
	nav ul li.sub3 a{
		background: -webkit-linear-gradient(top, #fd8f9b 0%, #f55 50%, #f60000 50%, #ffa7b0 100%);
	}

/*銀行ATM*/
	nav ul li.sub9 a{
		background: -webkit-linear-gradient(top, #82bcea 0%, #408fd3 50%, #1375ca 50%, #82bcea 100%);
	}

/*病院*/
	nav ul li.sub10 a{
		background: -webkit-linear-gradient(top,#b3fffe 0%,#4ffffd 50%,#0df8f2 50%,#b3fffe 100%);
	}

/*趣味*/
	nav ul li.sub11 a{
		background: -webkit-linear-gradient(top,#bcffbe 0%,#3ad33d 50%,#26b92a 50%,#7dff7d 100%);
	}

/*役所・公共施設*/
	nav ul li.sub5 a{
		background: -webkit-linear-gradient(top,#8fabfd 0%,#5581ff 50%,#0040f6 50%,#a7baff 100%);
	}

/*お洒落*/
	nav ul li.sub8 a{
		background: -webkit-linear-gradient(top,#fd8fe4 0%,#ff55d7 50%,#f600bd 50%,#ffa7ea 100%);
	}

/*食事*/
	nav ul li.sub2 a{
		background: -webkit-linear-gradient(top, #feceb4 0%, #feceb4 50%, #f17431 50%, #feceb4 100%);
	}

/*その他*/
	nav ul li.sub7 a{
		background: -webkit-linear-gradient(top,#fdf98f 0%,#fff955 50%,#f6ee00 50%,#fffca7 100%);
	}



/* 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: 70px;
		color: #FFF;
		font-size: 24px;
		border-radius: 10px;
		text-shadow: 2px 2px 3px #333,-1px -1px 1px #333;
		box-sizing: border-box;
	}

/*-- サブカテゴリの背景 --*/
	nav ul li.base a{
		padding: 10% 0 10% 0;/* １段文字位置 */
		text-align: center;
	}

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

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

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

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

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

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


	nav ul li.base a{
		padding: 10% 0 10% 0;/* １段文字位置 */
		text-align: center;
	}


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

	footer{
		width: 100%;
	}

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