Written by Anonymous
.hlt-tm-small .navi-in > ul li,
.cl-slim .navi-in > ul li {
height: 40px;
}
.hlt-tm-small .navi-in > ul li .sub-menu ul,
.cl-slim .navi-in > ul li .sub-menu ul {
top: -40px;
}
.hlt-tm-small .navi-in > ul li.menu-item-has-description > a > .caption-wrap,
.cl-slim .navi-in > ul li.menu-item-has-description > a > .caption-wrap {
height: 40px;
line-height: 16px;
}
/************************************
** グローバルメニュー
************************************/
.navi {
background-color: var(--cocoon-white-color);
}
.navi .item-label,
.navi .item-description {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.navi-in .has-icon {
position: absolute;
right: 6px;
top: 0;
display: flex;
opacity: 0.7;
font-size: 11px;
height: 100%;
align-items: center;
}
.navi-in > ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
/*サブメニュー*/
}
.navi-in > ul li {
display: block;
width: 176px;
height: 60px;
position: relative;
}
.navi-in > ul li:hover > ul {
display: block;
}
.navi-in .caption-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
width: 100%;
}
.navi-in .caption-wrap > div {
width: 100%;
}
.navi-in > ul .sub-menu {
display: none;
position: absolute;
margin: 0;
width: 240px;
list-style: none;
padding: 0;
background-color: var(--cocoon-xxx-thin-color);
z-index: 99;
text-align: left;
/*サブメニューのサブメニュー*/
}
.navi-in > ul .sub-menu li {
width: auto;
}
.navi-in > ul .sub-menu a {
padding-left: 16px;
padding-right: 16px;
}
.navi-in > ul .sub-menu ul {
top: -60px;
left: 240px;
position: relative;
}
.navi-in a {
position: relative;
color: var(--cocoon-text-color);
text-decoration: none;
display: flex;
font-size: 16px;
transition: all 0.3s ease-in-out;
height: 100%;
}
.navi-in a:hover {
background-color: #f5f8fa;
transition: all 0.3s ease-in-out;
color: var(--cocoon-text-color);
}