@import url(https://fonts.googleapis.com/css?family=Handlee);




*{
	margin:0;
	padding:0;
}
body{
	background-color:#ffffff;
	box-sizing:border-box;
}

h1{
	margin:0;
}

p{
	line-height:1.5;
	padding:10px;
	font-size:14px;
}
nav{
	width:900px;
	margin:0 auto 10px;
	overflow:hidden;
/*	height:200px;*/
/*	background-color:#cccccc;*/
}

ul{
	padding:0;

}

ul li{
	padding:0;
	float:left;
	width:225px;
	box-sizing:border-box;
	list-style:none;
	font-family: 'Handlee', cursive;
}

ul li a{
	display:block;
	height:150px;
	padding-top:50px;
	background:red;
	border-radius:0 0 150px 150px/ 0 0 100px 100px;
	border-top:solid 10px #8e7878;
	box-sizing:border-box;
	text-align:center;
	color:#333333;
	text-decoration:none;
	font-size:32px;

}
/* メニュー部 */
li:nth-child(1) a{
	background: #ffa0e2; /* Old browsers */
	background: -moz-linear-gradient(top, #ffa0e2 0%, #f7e6f1 5%, #fcb3e4 101%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ffa0e2 0%,#f7e6f1 5%,#fcb3e4 101%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ffa0e2 0%,#f7e6f1 5%,#fcb3e4 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
li:nth-child(1) a:hover{
	background: #f832ff; /* Old browsers */
	background: -moz-linear-gradient(top, #f832ff 0%, #ffbff5 5%, #f832ff 101%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #f832ff 0%,#ffbff5 5%,#f832ff 101%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #f832ff 0%,#ffbff5 5%,#f832ff 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

li:nth-child(2) a{
	background: #a3ffdb; /* Old browsers */
	background: -moz-linear-gradient(top, #a3ffdb 0%, #edfbfc 5%, #b7ffdb 101%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #a3ffdb 0%,#edfbfc 5%,#b7ffdb 101%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #a3ffdb 0%,#edfbfc 5%,#b7ffdb 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
li:nth-child(2) a:hover{
	background: #32ffaa; /* Old browsers */
	background: -moz-linear-gradient(top, #32ffaa 0%, #bfffdb 5%, #32ffaa 101%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #32ffaa 0%,#bfffdb 5%,#32ffaa 101%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #32ffaa 0%,#bfffdb 5%,#32ffaa 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

li:nth-child(3) a{
	background: #b69ffc; /* Old browsers */
	background: -moz-linear-gradient(top, #b69ffc 0%, #eff1ff 5%, #b7bdff 101%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #b69ffc 0%,#eff1ff 5%,#b7bdff 101%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #b69ffc 0%,#eff1ff 5%,#b7bdff 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
li:nth-child(3) a:hover{
	background: #327dff; /* Old browsers */
	background: -moz-linear-gradient(top, #327dff 1%, #c6d4ff 5%, #327dff 101%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #327dff 1%,#c6d4ff 5%,#327dff 101%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #327dff 1%,#c6d4ff 5%,#327dff 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

li:nth-child(4) a{
	background: #ffa959; /* Old browsers */
	background: -moz-linear-gradient(top, #ffa959 0%, #fff0e2 5%, #ffa959 101%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ffa959 0%,#fff0e2 5%,#ffa959 101%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ffa959 0%,#fff0e2 5%,#ffa959 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
li:nth-child(4) a:hover{
	background: #ff7c00; /* Old browsers */
	background: -moz-linear-gradient(top, #ff7c00 1%, #ffd3ad 5%, #ff7c00 101%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ff7c00 1%,#ffd3ad 5%,#ff7c00 101%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ff7c00 1%,#ffd3ad 5%,#ff7c00 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

/* ヘッダー */
header{
	background-color:#e0b3b3;
	height:50px;
	margin-bottom:0px;
}
.headerbox{
	width:900px;
	margin:0 auto;
}

.headerbox p{
	font-family: 'Handlee', cursive;
	font-size:24px;
	color:#333333;
}

/* 記事 */
article{
	background-color:#ffffe0;
	border:1px solid #e7e7e7;
	border-radius:20px;
	width:900px;
	height:300px;
	margin:0px auto 20px;;
	overflow:hidden;
}


/* フッター */
footer{
	clear:both;
	width:900px;
	background-color:#e0b3b3;
	margin-left:auto;
	margin-right:auto;
	border-radius:10px;
}
footer p{
	text-align:right;
	padding-right:20px;
	color:#333333;
	font-family: 'Handlee', cursive;
}