body {
  margin: 0;
  background: #f0f0f0;
}

.menu {
  height: auto;
  width: 60 0px;
  float : right;
  margin: 0px auto;
  padding: 0px;
#  background: #fff;
}

label {
#  background: #333;
#  color: #fff;
  padding: 5px;
  display: block;
#  width: 274px;
  float : right;
#  border: 1px solid #fff;
  cursor: pointer;
}

label:hover {
#  background: #555;
}

input[type="checkbox"].on-off{
  display: none;
}

.menu ul {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  float : right;
  margin: 0 0 120px;
  padding: 0;
  list-style: none;
}

.menu li {
#  text-align: right;
  height: auto;
  width: 120px : right;
  margin: 0px margin-right: auto;
  float : top;
  padding: 5px;
  background: #fff;
}

@media screen and (min-width:0px) and ( max-width:480px) {
    .menuicon{
      max-width: 300px;
      height: auto;      
    }
}

@media screen and (min-width:480px) { 
    /*　画面サイズが480pxからはここを読み込む　*/
    .menuicon{
      max-width: 300px;
      height: auto;      
    }
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/
    .menuicon{
      max-width: 250px;
      height: auto;      
    }
}
@media screen and (min-width:1024px) {
    /*　画面サイズが1024pxからはここを読み込む　*/
    .menuicon{
      max-width: 150px;
      height: auto;      
    } 
}


input[type="checkbox"].on-off + ul{
  display: none;
}

input[type="checkbox"].on-off:checked + ul{
  display: block;
}