@charset "utf-8";

/*-- icon menu --*/
/*--  @media screen and (max-width: 720px) --*/

#icon-nav-top,
#icon-nav {
    border-top: 1px solid white;
    background-color: #008cff;
    border-bottom: 1px solid #999;
}

#icon-nav-inner {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    display: -webkit-flex;
    display: flex;
    color: white;
}

#icon-1st,
#icon-2nd {
    flex: 1 1 50%;
    display: table;
    width: 50%;
}

.icon-item {
    display: table-cell;
    border-left: 1px solid white;
    text-align: center;
    height: 70px;
    background-color: #008cff;
    transition: background-color 0.1s linear;
}

#icon-nth8 {
    border-right: 1px solid white;
}

.icon-item div {
    margin: 0px auto 0px auto;
    max-width: 100px;
}

.icon-item img {
    margin: 0px auto 0px auto;
}

.icon-item a {
    display: block;
    width: 100%;
    height: 64px;
    color: white;
    padding-top: 6px;
}

.icon-item a:hover {
    background-color: #1d2087;
    transition: background-color 0.3s linear;
}

.icon-item span {
    white-space: nowrap;
    text-align: center;
    display: inline-block;
    margin: 0px auto 0px auto;
    width: 78px;
    font-size: 12px;
}

@media screen and (max-width: 720px) {
    #icon-nav {
        display: none;
    }
    #icon-nav-inner {
        /*-- 折り返し --*/
        display: block;
    }
    #icon-1st,
    #icon-2nd {
        width: 100%;
    }
    /*-- おり返したとボーダー処理 --*/
    #icon-nth8 {
        border-right: none;
    }
    #icon-nth1 {
        border-left: none;
    }
    #icon-nth5 {
        border-left: none;
    }
    #icon-2nd {
        border-top: 1px solid white;
    }
    .icon-item span {
        font-size: 11px;
    }
}