/*子階層以降共通*/
#header__nav li li {
    height: 0;
    overflow: hidden;
    transition: .5s;
}
#header__nav li li a {
    border-top: 1px solid #eee;
}
#header__nav li:hover > ul > li {
    height: 2rem;
    overflow: visible;
}
#header__nav li ul li ul {
    left: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
/*一番右のメニュー*/
#header__nav > li:nth-child(5) ul li ul {
    left: -100%;
}
#header__nav li{
    position: relative;
}
#header__nav li ul{
    display: none;
}

#header__nav li:hover > ul{
    display: block;
    position: absolute;
    bottom: -100%;
    width: 200%;
}
#header__nav li:nth-child(2):hover > ul{
    display: block;
    position: absolute;
    bottom: -100%;
    width: 300%;
}
#header__nav li:hover > ul li{
    width: 100%;
    margin-top: 5px;
}
#header__nav li:hover > ul li a{
    width: 100%;
    text-align-last: left;
    background-color: #fff;
    font-size: 13px;
    padding:10px;
}
/*リストに「▶︎」を付ける*/
#header__nav > li > ul:before{/*子階層*/
    border: 5px solid transparent;
    border-top: 5px solid #fff;
    content: "";
    right: 1rem;
    position: absolute;
    top: 1rem;
    transform: translateY(-40%);
}
/*子階層以降共通*/
#header__nav li li {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity .5s;
}
#header__nav li li a {
    border-top: 1px solid #eee;
}
#header__nav li:hover > ul > li {
    height: 2rem;
    opacity: 1;
    overflow: visible;
}
#header__nav li ul li ul {
    left: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
/*一番右のメニュー*/
#header__nav > li:nth-child(5) ul li ul {
    left: -100%;
}
/*hover*/  
#header__nav > li:hover > a {/*親階層*/
    background: #00305c;
}
     
#header__nav > li li > a {/*子階層*/
    background: #00305c;
}
#header__nav > li li:hover > a {
    background: #004789;
}

@media screen and (max-width: 1024px){
    #header__nav li:hover > ul{
    display: block;
    position: absolute;
    bottom: -100%;
    width: 300%;
}
#header__nav li:nth-child(2):hover > ul{
    display: block;
    position: absolute;
    bottom: -100%;
    width: 400%;
}   
}