@charset "UTF-8";
/* CSS Document */

/*-------------
navi
-------------*/
/* #navi{
width:900px;
text-align:left;
z-index: 1000;
position: relative;
padding: 25px 0 5px 0;
}
#navi ul {
background: #FFF;
width: 100%;
border-radius: 3px 3px 0 0;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
justify-content: flex-start;
align-items: center;
}
#navi ul li {
list-style-type: none;
box-sizing: border-box;
position: relative;
-webkit-flex-grow: 1;
flex-grow: 1;
vertical-align: middle;
}
#navi ul li:hover {
background: #ebf5fe;
border-radius: 3px 3px 0 0;
}
#navi ul li:first-child {
width: 146px;
}
#navi ul li:after {
content: "";
position: absolute;
display: inline-block;
background: #7aa0c7;
width: 1px;
height: 20px;
top: calc(50% - 10px);
left: 0;
}
#navi ul li:first-child:after {
content: "";
display: none;
}
#navi ul li ul.child li:first-child,
#navi ul li ul.child li ul.schild li:first-child {
width: 100%;
}
#navi ul li ul li {
width: 100%;
border: none;
border-left: 1px solid #7aa0c7;
border-right: 1px solid #7aa0c7;
border-top: 1px solid #7aa0c7;
box-sizing: border-box;
display: block;
}
#navi ul li ul li:after {
display: none;
}
#navi ul li a {
color: #4780b3;
}
#navi ul li a,
#navi ul li ul li a {
display: block;
box-sizing: border-box;
font-size: 12px;
padding: 10px 5px;
text-align: center;
text-decoration: none;
line-height: 1rem;
}
#navi ul li:nth-child(4) a {
padding: 18px 5px;
}
#navi ul li ul.child,
#navi ul li ul.child li ul.schild {
display: none;
position: absolute;
background: rgba(54,119,175,0.9);
}
#navi ul li ul.child li:last-child {
border-bottom: 1px solid #7aa0c7;
}
#navi ul li ul.child li a,
#navi ul li ul.child li ul.schild li a {
text-align: left;
color: #FFF;
padding: 8px 5px 8px 20px;
box-sizing: border-box;
background: url("../../images/arr_white.png") left 6px top 50% no-repeat;
}
#navi ul li ul.child {
left: 0;
/*top: 55px;*/
/*z-index: 10;
width: 250px;
}
#navi ul li:nth-child(1) ul.child {
width: 360px;
}
#navi ul li ul.child li ul.schild {
left: 100%;
top: 0;
z-index: 10;
width: 100%;
}
#navi ul li.bn {
width: 178px;
}
#navi ul li.bn a {
padding: 0;
}
#navi ul li ul.child li a:hover,
#navi ul li ul.child li ul.schild li a:hover{
background: rgba(140,186,226,0.5) url("../images/arr_white.png") left 6px top 50% no-repeat;
}
#navi ul li ul.child li:hover,
#navi ul li ul.child li ul.schild li:hover {
background: none;
border-radius: 0;
}
 */

@charset "UTF-8";
/* CSS Document */

/*-------------
navi
-------------*/
#navi {
    width: 900px;
    text-align: left;
    z-index: 1000;
    position: relative;
    padding: 25px 0 5px 0;
}

#navi ul {
    background: #FFF;
    width: 100%;
    border-radius: 3px 3px 0 0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    align-items: center;
}

#navi ul li {
    position: relative;
    display: table;
    list-style-type: none;
    box-sizing: border-box;
    position: relative;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    vertical-align: middle;
}

#navi ul li:hover {
    background: #ebf5fe;
    border-radius: 3px 3px 0 0;
}

#navi ul li.bn:hover {
    background: #FFF;
    opacity: 0.7;
}

#navi ul li:first-child {
    width: 146px;
}

#navi ul li:after {
    content: "";
    position: absolute;
    display: inline-block;
    background: #7aa0c7;
    width: 1px;
    height: 20px;
    top: calc(50% - 10px);
    left: 0;
}

#navi ul li:first-child:after {
    content: "";
    display: none;
}

#navi ul li ul.child li:first-child,
#navi ul li ul.child li ul.schild li:first-child {
    width: 100%;
}

#navi ul li ul li {
    width: 100%;
    border: none;
    border-left: 1px solid #7aa0c7;
    border-right: 1px solid #7aa0c7;
    border-top: 1px solid #7aa0c7;
    box-sizing: border-box;
    display: block;
}

#navi ul li ul li:after {
    display: none;
}

#navi ul li a {
    color: #4780b3;
}

#navi ul li a,
#navi ul li ul li a {
    display: table-cell;
    vertical-align: middle;
    height: 62px;
    box-sizing: border-box;
    font-size: 12px;
    padding: 7px 5px;
    text-align: center;
    text-decoration: none;
    line-height: 1rem;
}

#navi ul li:nth-child(4) a {
    padding: 18px 5px;
}

#navi ul li ul.child,
#navi ul li ul.child li ul.schild {
    display: none;
    position: absolute;
    background: rgba(54, 119, 175, 0.9);
}

#navi ul li ul.child li:last-child {
    border-bottom: 1px solid #7aa0c7;
}

#navi ul li ul.child li a,
#navi ul li ul.child li ul.schild li a {
    text-align: left;
    color: #FFF;
    padding: 8px 5px 8px 20px;
    box-sizing: border-box;
    background: url("../images/arr_white.png") left 6px top 50% no-repeat;
    height: auto;
    display: block;
    width: 100%;
}

#navi ul li ul.child {
    left: 0;
    /*top: 55px;*/
    z-index: 10;
    width: 250px;
}

#navi ul li:nth-child(1) ul.child {
    width: 360px;
}

#navi ul li ul.child li ul.schild {
    left: 100%;
    top: 0;
    z-index: 10;
    width: 100%;
}

#navi ul li.bn {
    width: 178px;
}

#navi ul li.bn a {
    padding: 0;
}

#navi ul li ul.child li a:hover,
#navi ul li ul.child li ul.schild li a:hover {
    background: rgba(140, 186, 226, 0.5) url("../images/arr_white.png") left 6px top 50% no-repeat;
}

#navi ul li ul.child li:hover,
#navi ul li ul.child li ul.schild li:hover {
    background: none;
    border-radius: 0;
}