@charset "utf-8";
.logo {
    width: 150px;
}
.user-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 1.7rem;
    
}

.user-wrap header {
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #C6C6C6;
    position: relative;
    z-index: 2;
    margin-bottom: 3rem;
    
}

.user-wrap header.company-header {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    z-index: 2;
    border-bottom: 1px solid #aaa;
}
.header-wrap{
    width: 1400px;
     margin: 0 auto;}
.company-sub-menu {
    background-color: rgba(0, 0, 0, 0.5)
}

.company-sub-menu li>a,
.company-sub-menu li>p {
    border: 1px solid #fff;
    color: #fff;
}

.msub-menu {
    display: none;
}

.msub-menu li>a,
.msub-menu li>p {
    display: block;
    width: 100%;
    border: 0;
    padding: 1rem;
    font-size: 1.6rem;
    text-align: left;
}

.msub-menu.show,
.sub-menu.show {
    display: block;
}

.msub-menu.show {
    border-bottom: 1px solid #eee;
}
.main-menu{
   
    &:hover{

        &::before{
            content: '';
            position: absolute;
            display: block;
            top: 61px;
            left: 0;
            width: 100%;
            height: 150px;
            background: #fff;
            z-index: 50;
        }
    }
    
}
.main-menu>li>a,
.main-menu>li>p {
    display: block;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    height: 6rem;
    line-height: 6rem;
}
.main-menu > li {
    position: relative; 
    min-width: 160px;
    &:hover {
        &::after {
            position: absolute;
            bottom: calc(var(--krds-spacer-4) * -1);
            left: 50%;
            bottom: 0;
            content: "";
            transition: width 0.4s ease-in-out, height 0.4s ease-in-out; 
            width: 0;
            height: 0.4rem;
            background-color: var(--green);
            transform: translateX(-50%);
        }
    }

    &:hover::after {
        width: 100%; 
    }
}
header.company-header .main-menu>li>a,
header.company-header .main-menu>li>p {
    color: var(--white);
}



.main-menu>li:hover>a,
.main-menu>li:hover>p,
.user-wrap header.company-header .main-menu>li:hover>a,
.user-wrap header.company-header .main-menu>li:hover>p {
    color: var(--green);
}

.pc-menu{

}

.sub-menu {
    width: 100%;
    height: 150px;
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    z-index: 50;
    display: none;
    padding: 0 !important;
    left: 0;
    bottom: -2px;
    transform: translateY(100%);
}

.sub-menu-inner{
    display: block;
    width: 100%;
}

.sub-menu li>a,
.sub-menu li>p {
    display: block;
    width: 100%;
    border-radius: 0 10px 0 10px;
    padding: 1.3rem 0;
    font-size: 1.6rem;
    text-align: center;
    font-weight: 700;
    &:hover{
        color: var(--green);
    }
}
.mobile-menu{display: none;}