✏️ 编辑：_navi.scss

路径：/virtual/emerald/public_html/emerald.jpn.com/wp2020/wp-content/themes/cocoon-master/scss/_navi.scss

大小：2.59 KB · 修改：2026-06-11 17:11:56 · 权限：0747 · 可写

@use "sass:math";
/************************************
** グローバルメニュー
************************************/
$menu_height: 60px;
$sub_menu_width: 240px;
$icon_height: 16px;

.navi{
  background-color: var(--cocoon-white-color);

.item-label,
  .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;
  }

>ul{
    @include list_cancel;

display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;

li{
      display: block;
      width: 176px;
      height: $menu_height;
      position: relative;

&:hover{
        >ul{
          display: block;
        }
      }
    }

.caption-wrap{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      align-content: center;
      width: 100%;

>div{
        width: 100%;
      }
    }

/*サブメニュー*/
    .sub-menu{
      display: none;
      position: absolute;
      margin: 0;
      width: $sub_menu_width;
      list-style: none;
      padding: 0;
      background-color: var(--cocoon-xxx-thin-color);
      z-index: 99;
      text-align: left;
      li{
        width: auto;
      }

a{
        padding-left: 16px;
        padding-right: 16px;
      }

/*サブメニューのサブメニュー*/
      ul{
        top: -$menu_height;
        left: $sub_menu_width;
        position: relative;
      }
    }

}

a{
    position: relative;
    @include link_cancel;
    display: flex;
    font-size: 16px;
    transition: $bgc_hover_anime;
    width: 100%;
    height: 100%;
    &:hover{
      @include bgc_hover;
    }
  }
}

/************************************
** モバイルメニュー
************************************/
.navi-in > .menu-mobile{
  display: none;
  .sub-menu{
    display: none;
  }
}

/************************************
** フッターメニュー
************************************/
.navi-footer-in{
  >.menu-footer{
    @include list_cancel;

display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    text-align: center;

li{
      width: 120px;
      border-left: 1px solid var(--cocoon-thin-color);

&:last-child{
        border-right: 1px solid var(--cocoon-thin-color);
      }
    }

}

a{
    @include link_cancel;
    display: block;
    font-size: 14px;
    transition: $bgc_hover_anime;
    &:hover{
      @include bgc_hover;
    }
  }
}

404 NOT FOUND | 人工芝販売・施工【大阪・近畿】人工芝エメラルド

404 NOT FOUND

お探しのページは見つかりませんでした。