/*メニューバー*/
ul.menu{
text-align: center;
list-style-type: none;
margin: 0 auto;
padding-bottom: 10px;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: nowrap;
align-items:flex-end;
width:85%; 
max-width: 1800px;
}
ul.menu li{
max-width: calc(1200px/5);
position: relative;
padding:0;
display: block;
cursor: pointer;
color: #44a044;
transition:1s all;
white-space: nowrap;
background: #cff473;
border-radius: 70% 80% 70% 80%/100% 90% 100% 90%;
}
ul.menu li:hover{
background: #FFF500;
}
ul.menu li a{
color: #44a044;
}
.menu>li{
margin: 1px;
display: inline;
padding: 0;
font-weight: bold;
}
ul.menu li a:hover{
color: #2a602c;
}
.menu i{
font-size: 150%;
}
.toplogo{
margin: 0 auto;
padding: 0;
}
ul.menu li.toplogo{
background: #ffffff;
}
.toplogo img{
width: 100%;
}
/*ドロップダウン*/
.drow_box{
width: 100%;
display: none;
position: absolute;
margin: 5px auto 0;
padding: 0;
z-index: 10;
left:-5px;
font-size: 90%;
}
.drow_box li{
width: 100%;
margin: auto;
border-bottom: dotted 2px #0B6700;
background-color: transparent;
}
.drow_box li a{
display: block;
}
ul.drow_box li a:hover{
color: #ffffff;
background: #44a044;
}
ul.drow_box li:hover{
color: #159C0A;
}

.menu-checkbox {
display: none;
}
.drawer-menu{
display: none;
}
@media screen and (max-width: 768px){ 
    ul.menu{
        display:none;
    }
.drawer-menu{
display: block;
}
/* メニューボタンの装飾 */
.menu-button {
display: block;
position:absolute;
top: 10px;
right: 10px;
z-index: 200;
height: 20px;
width: 30px;
cursor: pointer;
}
.menu-button::before,
.menu-button::after {
content: '';
transition: .3s;
}
.menu-button::before,
.menu-button::after,
.menu-button span {
display: block;
position: absolute;
left: 0;
height: 4px;
width: 100%;
margin-top: -1px;
background-color: #cff473;
}
.menu-button::before {
top: 0;
}
.menu-button::after {
bottom: 0;
content: 'menu';
color: #cff473;
font-size: 70%;
text-align: center;
}
.menu-button span {
top: 43%;
}
/* メニューボタンのアニメーション */
.menu-checkbox:checked ~ .menu-button::before {
top: 50%;
transform: rotate(45deg);
}
.menu-checkbox:checked ~ .menu-button::after {
display: none;
}
.menu-checkbox:checked ~ .menu-button span {
top: 50%;
transform: rotate(-45deg);
}

/* ドロワーメニューの装飾 */
.drawer-menu {
position: fixed;
top: 0;
left: 0;
z-index: 200;
height: 100%;
width: 250px;
transform: translateX(-100%);
transition: .6s;
background-color: #fff;
}
.drawer-menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.drawer-menu li {
border-bottom: 1px dotted #cff473;
}
.drawer-menu a {
display: block;
padding: 15px;
color: #000000;
text-decoration: none;
}
.drawer-menu a:hover{
background: #cff473;
color: #2a602c;
font-weight: bold;
}
/* ドロワーメニューの開閉 */
.menu-checkbox:checked ~ .drawer-menu {
transform: translateX(0);
}
/* ドロワーメニューの背景 */
.menu-background {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 100;
height: 100%;
width: 100%;
background-color: rgba(207,244,115,0.49);
cursor: pointer;
}
.menu-checkbox:checked ~ .menu-background {
display: block;
}
}