/* 会員ヘッダー + グローバルナビ (Figma: header/lite, Lite_global-nav)
 * 旧 img_logo_white.png は使わない
 */

.navbar-menu.yb-nav-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  height: 48px;
  padding: 8px 48px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: none;
  box-shadow: 0 0 2px 0 rgba(29, 24, 7, 0.1);
}

.navbar-menu.yb-nav-header .page-header__menu {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.navbar-menu.yb-nav-header .page-header__burger {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}

.navbar-menu.yb-nav-header .page-header__burger-line {
  position: absolute;
  left: 0;
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 4px;
  background: #5c5647;
}

.navbar-menu.yb-nav-header .page-header__burger-line:nth-child(1) {
  top: 2px;
}

.navbar-menu.yb-nav-header .page-header__burger-line:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.navbar-menu.yb-nav-header .page-header__burger-line:nth-child(3) {
  bottom: 2px;
}

.navbar-menu.yb-nav-header .page-header__title {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  color: #5c5647;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  word-break: break-word;
}

.navbar-tabs.yb-nav-member {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  background: #fff;
  box-shadow: 0 0 2px 0 rgba(29, 24, 7, 0.1);
}

.navbar-tabs.yb-nav-member .navbar-item {
  border: none;
  color: #b9b2a0;
  position: relative;
  display: flex;
  padding: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  flex: 1 0 0;
  align-self: stretch;
  min-width: 0;
  box-sizing: border-box;
}

.navbar-tabs.yb-nav-member .navbar-item .icon.yb-icon {
  width: 20px;
  height: 20px;
  margin: 0;
}

.navbar-tabs.yb-nav-member .navbar-tab-label {
  color: var(--color-text-light-brown, #b9b2a0);
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;
  font-size: 8px;
  font-style: normal;
  font-weight: 500;
  line-height: 8px;
}

.navbar-tabs.yb-nav-member .navbar-item.is-active {
  color: #f1873d;
  background: transparent;
}

.navbar-tabs.yb-nav-member .navbar-item.is-active .navbar-tab-label {
  color: var(--color-text-orange, #f1873d);
}

.navbar-tabs.yb-nav-member .navbar-item .icon.is-badge {
  top: 0.05rem;
  right: calc(50% - 2.35rem);
}

.icon .yb.yb-nav-search,
.icon .yb.yb-nav-talk,
.icon .yb.yb-nav-message,
.icon .yb.yb-nav-like,
.icon .yb.yb-nav-footprint,
.icon .yb.yb-nav-mypage {
  width: 20px;
  height: 20px;
  background-color: #b9b2a0;
  background-image: none;
  background-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.navbar-item.is-tab.is-active .yb.yb-nav-search,
.navbar-item.is-tab.is-active .yb.yb-nav-talk,
.navbar-item.is-tab.is-active .yb.yb-nav-message,
.navbar-item.is-tab.is-active .yb.yb-nav-like,
.navbar-item.is-tab.is-active .yb.yb-nav-footprint,
.navbar-item.is-tab.is-active .yb.yb-nav-mypage {
  background-color: #f1873d;
}

.icon .yb.yb-nav-search {
  -webkit-mask-image: url(/img/common/nav/ico_nav_search.svg);
  mask-image: url(/img/common/nav/ico_nav_search.svg);
}

.icon .yb.yb-nav-talk {
  -webkit-mask-image: url(/img/common/nav/ico_nav_gather.svg);
  mask-image: url(/img/common/nav/ico_nav_gather.svg);
}

.icon .yb.yb-nav-message {
  -webkit-mask-image: url(/img/common/nav/ico_nav_message.svg);
  mask-image: url(/img/common/nav/ico_nav_message.svg);
}

.icon .yb.yb-nav-like {
  -webkit-mask-image: url(/img/common/nav/ico_nav_like.svg);
  mask-image: url(/img/common/nav/ico_nav_like.svg);
}

.icon .yb.yb-nav-footprint {
  -webkit-mask-image: url(/img/common/nav/ico_nav_footprint.svg);
  mask-image: url(/img/common/nav/ico_nav_footprint.svg);
}

.icon .yb.yb-nav-mypage {
  -webkit-mask-image: url(/img/common/nav/ico_nav_home.svg);
  mask-image: url(/img/common/nav/ico_nav_home.svg);
}