File name
Commit message
Commit date
05-22
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
@charset "utf-8";
.logo {
width: 150px;
}
.user-wrap {
display: flex;
flex-direction: column;
min-height: 100vh;
font-size: 1.7rem;
.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;}
}
.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;
}