@charset "utf-8";
/* CSS Document */

@media only screen and (max-width: 640px){
.sp{
	display:block;
}
.pc{
	display:none;
}

#illustration{
	float:right;
	}
	
#logo{
	height:0;
	}

#logo figure img.sp{
    display: inline;
    position: relative;
    top: 20px;
    width: 100%;
	}

#gnavi ul li{
	box-sizing:border-box;
	border-right:1px solid #fff;
    background-color: #8bcb37;
    float: left;
    height: 55px;
    text-align: center;
    width: 20%;
}
	
	
header{
	background-repeat:no-repeat;
	background-position:center center;
	height:111px;
	width:100%;
}

figure {
    margin: auto;
    text-align: center;
    width: 27%;
}

/* ここからmain */	

main{
	width:96%;
	margin:0 auto 0 auto;
	overflow:hidden;
}

.vertical_pic{
	margin-top:10%;
}
.horizontal_center{
	margin:5% auto 10%;
}

.vertical_center{
	margin:5% auto 10%;
}

.horizontal_center p{
	text-align:center;
	width:80%;
	margin:10px auto;
}

.vertical_center p{
	text-align:center;
	width:80%;
	margin:10px auto;
}

img {
	width:100%;
	height:auto;

}
	
	
h1{
	text-align:center;
	color:#503e28;
	margin:25px auto;
	padding-top: 7%;
}


#button {
	text-align:center;
	font-size:20px;
}


#back a {
    color:#8ECD3B;	
}

#back a:hover {
	color:#b6f169;
}

#next a {
    color:#8ECD3B;	
}

#next a:hover {
	color:#b6f169;
}

#back {
	width:30%;
	float:left;
	margin:0 0 25px;
}

#next {
	width:30%;
	float:right;
	margin:0 0 25px;

}

/* ここからfooterのCSS */
/* footer内のmargin-top:100px; とclear: both;は入力の際、消す。 */

#footerInner img,
header img
{
	width:100%;
	height:auto;
	}
	
#copyright{
	text-align:center;
    font-size: 100%;
	margin:auto auto;
    width:79%;
	padding-top:10px;
	}

	
#gnavi ul li a:link{
	color:#FFFFFF;
	}
	

footer {
    background-color: #8ecd3b;
    height: 100px;
    width: auto;
	padding-top:20px;
	color: #53371e;
}
	
}

@media only screen and (max-width: 370px){
	#logo figure img.sp{
		top: 10px;
	}
}