/*
 * JavaScriptでも同じ境界値を使用する。
 * @mediaではCSS変数を使わず、PHPから直接値を出力する。
 */
:root {
    --menu-breakpoint: 990px;
}

.header_top {
    background-color: #fff;
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: solid 1px #dfdfdf;
}

.global-nav-header {
    height: 50px;
}

.nav-list {
    margin: 0;
    display: flex;
}

.nav-item {
    list-style: none;
    position: relative;
}

.nav-item a {
    text-decoration: none;
}

.submenu_list li {
    list-style: none;
    font-size: 16px;
}

.nav-item:hover {
    cursor: default;
    border-bottom: solid 3px #ff6400;
}

.inner ul li:hover {
    background-color: #ff6400;
}

.inner ul li a:hover {
    color: #fff;
}

.global-nav{
    display: block;
}

#head-yasumi{                   /* #head-yasumi 臨時休業日のお知らせのCSS */
    color: red;
    font-size: 13px;            /* フォント高さ 変更前 font-size: 15px; */
    /*line-height: 1.2;*/       /* 行間 必要な時に記載する 、 変更前 空行　→ コメントアウトした上で適当な値を設定 */
    margin: 50px 0 0 30px;      /* マージン、順序は上右下左（上から時計回り） 変更前 margin: 35px 0 0 75px; */
}

#head-info{                     /* ##head-info 臨時休業日のお知らせのCSS */
    /* color: red; */
    font-size: 15px;            /* フォント高さ */
    /*line-height: 1.2;*/       /* 行間 必要な時に記載する 、 変更前 空行　→ コメントアウトした上で適当な値を設定 */
    margin: 12px 0 0 0px;      /* マージン、順序は上右下左（上から時計回り） 変更前 margin: 35px 0 0 75px; */
}

@media screen and (min-width:990px) {
    .nav-list {
        position: absolute;
        right: 0;
        height: 60px;
        max-width: 1000px;
    }

    .nav-item {
        height: 18px;
        padding: 20px 12px 5px 10px;
        margin-bottom: 11px;
    }

    .nav-item a {
        font-size: 12px;
        display: block;
        color: #3f3f3f;
    }

    .submenu_list {
        visibility: hidden;
        opacity: 0;
        z-index: 1;
        position: absolute;
        padding-left: 0px;
        border: solid 1px #fff;
        top: 46px;
        left: 0px;
        line-height: 2;
        background: #fff;
    }

    .submenu_list li a {
        font-size: 15px;
    }

    .nav-item:hover .submenu_list {
        visibility: visible;
        opacity: 1;
    }

    #menu_system {
        width: 215px;
    }

    #menu_dataprocess {
        width: 285px;
    }

    #nav-itemboutFIS {
        width: 120px;
    }

    #menu_companyprofile {
        width: 123px;
    }

    .nav-item:hover {
        border-bottom: solid 3px #ff6400;
    }

    .global-nav-icon {
        display: none;
    }
}

@media screen and (max-width:990px) {
    .nav-list {
        background: #3e3e3ee6;
        display: none;
        left: 50%;
        padding: 10px;
        position: absolute;
        transform: translate(-50%, 0%);
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .nav-item a {
        display: block;
        border-bottom: 1px solid #ccc;
        color: #fff;
        padding: 1rem 1rem;
        margin: 0 10px;
        text-align: left;
    }

    .nav-item:last-child a {
        border-bottom: none;
    }

    .nav-item:hover {
        border-bottom: none;
    }

    .nav-item a:hover {
        border-bottom: solid 3px #ff6400;
    }

    .global-nav-icon {
        font-family: FontAwesome6;
        font-weight: 900;
        color: #ff6400;
        cursor: pointer;
        display: inline-block;
        font-size: 28px;
        position: absolute;
        right: 15px;
        top: 5px;
        z-index: 2;
    }

    .nav-item_sub {
        display: none;
    }

    .global-nav {
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
    }

    #head-info {
        color: red;
        font-size: 11px;
        margin: 45px 0 0 -221px;
    }

    /*
        .submenu_list {
            visibility: hidden;
            opacity: 0;
            z-index: 1;
            position: absolute;
            padding: 6px;
            border-radius: 5px;
            top: 30px;
            background: #3f3f3f;
            -webkit-transition: all .2s ease;
            transition: all .2s ease;
        }
    
        .submenu_list::before {
            content: "";
            display: block;
            top: -5px;
            border-top: 5px solid #3f3f3f;
            border-right: 5px solid #3f3f3f;
            width: 7px;
            height: 7px;
            left: 10px;
            position: absolute;
            transform: rotate(-45deg);
        }*/
}