@charset "UTF-8";

:root {
    --bg: #FF5EDF0;
    --nav-bg: #3D2C2E;
    --nav-bg-hover: #886F68;
    --nav-color: #F5EDF0;
    --childnav-bg: #424C55;
}

body {
    /*    margin: 0;*/
    padding: 0;
    background-color: var(--bg);
}

.content {
    padding: 0px 20px 40px 20px;
}

ul, li, a {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.main-content {
    flex: 1;
}

.wrapper {
    flex: 1 0 auto;
    background-color: var(--nav-bg);
}

.nav {
    /*background: var(--nav-bg);*/
    color: var(--nav-color);
    font-size: 18px;
    line-height: 1;
}

    .nav a {
        /*color: var(--nav-color);*/
        text-decoration: none;
    }

    .nav .menu-item-has-submenu::after {
        content: "▽";
        font-family: FontAwesome;
        display: inline-block;
        margin-right: 5px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 11px;
    }

    .nav .menu-item-has-submenu .menu-item-has-submenu::after {
        content: "▽";
    }

.menu {
    display: flex;
    /* サブメニューのstyle */
}

    .menu > li {
        flex-grow: 1;
        position: relative;
        min-width: max-content;
    }

    .menu a {
        display: block;
        padding: 10px 20px;
        color: #fff;
    }

        .menu a:hover {
            background-color: var(--nav-bg-hover);
        }

    .menu li:hover > ul {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .menu ul {
        z-index: 100; /* 最前面 */
        position: absolute;
        top: 100%;
        left: 0;
        background-color: var(--childnav-bg);
        width: 100%;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out;
        min-width: max-content;
    }

        .menu ul li {
            display: block;
        }

        .menu ul a {
            padding: 10px;
        }

.sysname {
    width: 300px;
}

/* 位置ずれ調整 */
.oi {
    margin-top: 5px;
}