/*-----navigator-----*/
nav {
    width: 100%;
    height: 8%;
    position: fixed;
    /*border-top: 15px solid #316745;
    border-bottom: 5px solid #316745;
    */
    background: #98b98e;
    margin: 0;
}

.main-menu {
    overflow: hidden;
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.main-menu li {
    box-sizing: border-box;
    float: left;
    /*border-right: 0.5px solid #316745;
    border-left: 0.5px solid #316745; */
    width: 20%;
}

.main-menu li a {
    display: block;
    padding: 9% 0 8% 0;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    transition: 0.5s;
}

.main-menu li a.kokomap {
    background: #316745;
}

.main-menu li a.kokomap:hover {
    background-image: url("../Map/birder/material/navpic1.JPG");
    background-size: 100%;
    animation: fadeIn 1s;
}

.main-menu li a.kokohome:hover {
    background-image: url("../Map/birder/material/navpic2.JPG");
    background-size: 100%;
    animation: fadeIn 1s;
}

.main-menu li a.kokozukan:hover {
    background-image: url("../Map/birder/material/navpic3.JPG");
    background-size: 100%;
    animation: fadeIn 1s;
}

.main-menu li a.kokovr:hover {
    background-image: url("../Map/birder/material/navpic4.JPG");
    background-size: 100%;
    animation: fadeIn 1s;
}

.main-menu li a.kokolink:hover {
    background-image: url("../Map/birder/material/navpic5.JPG");
    background-size: 100%;
    animation: fadeIn 1s;
}

.main-menu li a.imazukan {
    background: #00aa6e;
  }
  
.main-menu li a.imazukan:hover {
    background-image: url("../Map/birder/material/navpic1.JPG");
    background-size: 100%;
    animation: fadeIn 1s;
  }

/*メインメニューの色が変化するホバー*/
.main-menu li:hover > a {
    background: #316745;
    transition: 0.5s; /*check*/
}

/*ここがサブを表示させるホバー*/
.main-menu li:hover ul li {
    overflow: visible;
    height: 100%;
    transition: 0.5s;
    animation: fadeIn 1s;
}

/*特別ですよ*/
@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

/*ここがサブ表示にホバーした時のアクション*/
.main-menu li ul li:hover a {
    background: #98b98e;
}

/*
.main-menu li:hover ul li:first-child {
    border-top: 0;
}

.main-menu li:hover ul li:last-child {
    border-bottom: 0;
}*/


.main-menu li:last-child {
    border-right: none;
}

.main-menu li ul {
    margin: 0;
    padding: 0;
}

.main-menu li ul li{
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    width: 100%;
    height: 0;
    background: #316745;
    transition: 0.5s;
    -moz-transition: .2s; /*古い機種にも対応させる*/
    -webkit-transition: .2s;
    -o-transition: .2s;
    -ms-transition: .2s; /*ここまで*/
    animation: fadeOut 1s;
}

/*特別ですよPart.2*/
@keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}


.main-menu li ul li a{
    margin: 0;
    padding: 5px 0;
    background: #316745;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
}

.main-menu li ul li a.imakokonokoko {
    background: #00533f;
}