@charset "utf-8";

/*resetcss*/
html,body,h1,p,ul,li,img {
  margin:0;
  padding:0;
  line-height:1.0;
  font-family:"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

ul {list-style:none;}
a {text-decoration:none;
  color:inherit;}
img {vertical-align:bottom;}


/*body*/
body {
  font-size:16px;
}

body.home {
  background-color:#D9D9D9;
}

body.home li:nth-child(1){
  height:50px;
  line-height:50px;
  border-left:1px solid #aaa;
  border-bottom:3px solid #72bb2b;
  box-sizing:border-box; 
}


body.drink {
  background-color:#fee1db;
}

body.drink li:nth-child(2){
  height:50px;
  line-height:50px;
  border-left:1px solid #aaa;
  border-bottom:3px solid #72bb2b;
  box-sizing:border-box; 
}


body.food {
  background-color:#fefddb;
}

body.food li:nth-child(3){
  height:50px;
  line-height:50px;
  border-left:1px solid #aaa;
  border-bottom:3px solid #72bb2b;
  box-sizing:border-box; 
}


body.info {
  background-color:#dbfee3;
}

body.info li:nth-child(4){
  height:50px;
  line-height:50px;
  border-left:1px solid #aaa;
  border-bottom:3px solid #72bb2b;
  box-sizing:border-box; 
}


body.contact {
  background-color:#c6f2fb;
}

body.contact li:nth-child(5){
  height:50px;
  line-height:50px;
  border-left:1px solid #aaa;
  border-right:1px solid #aaa;
  border-bottom:3px solid #72bb2b;
  box-sizing:border-box; 
}


/*container*/
.container {
  width:800px;
  margin:0 auto;
  padding:0 20px;
  background-color:#fff;
}

/*header*/
.header {
  position:relative;
  display: block;
  margin:0 0 20px;
  padding:20px 0 0 0;
}/*headerと、marginをいれたら、nav1が下にきた！*/

.header h1 {
  position:absolute;
  left:20px;
  top:-45px;
  z-index:10;
}

.header img {
  padding-top:70px;
}

/*nav*/
.nav {
width:800px;
margin:0 auto;
padding:0 0 80px;
}

.nav ul {
  width:800px;
  margin-bottom:20px;
  font-weight:bold;
}

.nav li {
  width:160px;
  float:left;
  text-align:center;
}

.nav li a {
  display:block;
  height:50px;
  line-height:50px;
  border-left:1px solid #aaa;
  box-sizing:border-box;
}

.nav li:last-child a {
  border-right:1px solid #aaa;
}

.nav li a:hover {
   border-bottom:3px solid #72bb2b;
}

/*wrapper*/

.wrapper {
  overflow:hidden;
}/*overflow:hiddenをかけると、footerが食い込んでくるのをやめられる*/

/*main*/
.main {
  float:left;
  width:460px;    
  height:290px;
  margin-right:20px;
  background-color:#daeff3;
  margin-bottom:30px;
  padding:20px;
}

/*aside*/
.aside {
  float:right;
  width:240px;    
  height:290px;
  background-color:#daeff3;
  margin-bottom:30px;
  padding:20px;
}

/*footer*/
.footer {
  height:300px;
  padding:25px 0 50px;
  color:#fff;
  background-color:#444;
  text-align:center;
}