/* アコーディオン */
.ac-container{
width: 50%;
margin:0 auto;
z-index:100;
position:fixed;
top:0;
right:0;
}
.ac-container label{
width: 60px;
text-align: center;
background: #2a4268;/*ボタン背景色*/
margin:0 auto;
padding: 0;
position: relative;
display: block;
height: 50px;
cursor: pointer;
color: #fff;
float:right;
}
.ac-container label:before {
content:url(http://camp.n-plus.work/wp-content/themes/pekecamp/img/menu002.png) ;
margin:0;
padding:0;
}
p.menu-btn-on {
width:50px;
height:50px;
margin:0;
padding:0;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
}

p.menu-btn-on:hover {
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
-ms-transition: 0.8s;
transition: 0.8s;
}

/*-- ▼ メニュー項目ブロック ▼ --*/
dl#menu-block001 {
width:100%;
height:auto;
margin:0;
padding:0;
background:#fcfcfc;
}
dl#menu-block001 > dd {
width:48%;
height:auto;
margin:1%;
padding:0;
background:#fcfcfc;
float:left;
}

dl#menu-block001 > dd > a {
height:10vh;
color:#000;
display:block;
margin:0;
padding:0 5% 5% 5%;
}

dl#menu-block001 > dd > a:hover {
color:#fd8127 !important;

}

dl#menu-block001 > dd > a > aside {
width:20%;
height:auto;
margin:0;
padding:4% 0 0 5%;
float:left;
}
dl#menu-block001 > dd > a > p {
width:70%;
height:auto;
font-family: 'Ubuntu';
text-align:center;
margin:0;
padding:4vh 0 0 0;
float:left;
}

/*-- ボタン背景色をホバーで変更：非表示-----
.ac-container label:hover{
background: rgba( 255, 155, 155, 100 );
-webkit-transition: all .3s;
transition: all .3s;
}
---------------------------------------*/
.ac-container label:after{
color: #fff;
font-family:"FontAwesome";
}
.ac-container input:checked ~ label::before{
color: #fff;
font-family:"FontAwesome";
content:url(http://camp.n-plus.work/wp-content/themes/pekecamp/img/menu003.png) ;
}
.ac-container input{
display: none;
}
.ac-container div{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
transition:
height 0.3s ease-in-out,
box-shadow 0.6s linear;
}
.ac-container input:checked ~ div{
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
-ms-transition: 0.8s;
transition: 0.8s;
height 0.5s ease-in-out,
box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
/*transition: */
}
.ac-container div p{
color: #777;
line-height: 23px;
font-size: 14px;
padding: 0px;
}
/* 高さの定義 */
.ac-container input:checked ~ div.ac-small{
height: auto;
background:#ccc;
}
.ac-container input:checked ~ div.ac-medium{
height: 200px;
}
.ac-container input:checked ~ div.ac-large{
height: 300px;
}

<div class="ac-container">
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1"><p class="menu-btn-on"></p></label>
<div class="ac-small">
<dl id="menu-block001">
<dd><a href="http://camp.n-plus.work/"><aside><img src="http://camp.n-plus.work/wp-content/themes/pekecamp/img/icon-home.png"></aside><p>HOME</p></a></dd>
<dd><a href="http://camp.n-plus.work/category/news/"><aside><img src="http://camp.n-plus.work/wp-content/themes/pekecamp/img/icon-news.png"></aside><p>NEWS</p></a></dd>
<dd><a href="http://camp.n-plus.work/category/camp/"><aside><img src="http://camp.n-plus.work/wp-content/themes/pekecamp/img/icon-blog.png"></aside><p>CAMP BLOG</p></a></dd>
<dd><a href="http://camp.n-plus.work/category/item/"><aside><img src="http://camp.n-plus.work/wp-content/themes/pekecamp/img/icon-item.png"></aside><p>Item / X-trail</p></a></dd>
<dd><a href="http://camp.n-plus.work/gallary/"><aside><img src="http://camp.n-plus.work/wp-content/themes/pekecamp/img/icon-gallary.png"></aside><p>Gallary</p></a></dd>
<dd><a href="#contact"><aside><img src="http://camp.n-plus.work/wp-content/themes/pekecamp/img/icon-contact.png"></aside><p>Contact</p></a></dd>
</dl>
</div>
</div>