/**
 * Component: hamburger.css
 * Usage: ハンバーガーメニューボタン
 * Source: base.css から分割
 */

/* ================================================
   ハンバーガーメニュー（モバイルファースト）
   ================================================ */
.el_humb {
  position: absolute;
  padding-top: 2px;
  top: 50%;
  right: 12px;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
  border-radius: 99px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1001;
  color: var(--color-white);
  background: linear-gradient(179.94deg, #86bf00 0.06%, #20ae4f 99.94%);
}

.el_humb small {
  font-size: 10px;
  line-height: 1;
}

.el_humb .close {
  display: none;
}

.el_humb.is_active .open {
  display: none;
}

.el_humb.is_active .close {
  display: block;
}

/* ================================================
   Tablet (768px〜1099px)
   ナビリンクが非表示の間はハンバーガー表示
   ================================================ */
@media screen and (min-width: 768px) {
  .el_humb {
    width: 60px;
    height: 60px;
  }

  .el_humb small {
    font-size: 16px;
  }
}

/* ================================================
   Wide PC (1100px〜)
   ナビリンクが表示されるのでハンバーガー非表示
   ================================================ */
@media screen and (min-width: 1100px) {
  .el_humb {
    display: none;
  }
}