@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;
    }
  }
}