/* 開発側で修正するCSSファイル */

:root {
  --header-headbar-height: 36px;
}

/*-----------------------------------------------
  header
  -----------------------------------------------*/
.header .headbar {
  display: block;
  height: var(--header-headbar-height);
  padding: 0.4em 0.8em;
  background: #ecedee;
  border-bottom: 1px solid #d5d7d8;
}

.header .headbar .headbar-links {
  display: flex;
  justify-content: flex-start;
  font-size: 0.8em;
}

.header .headbar .headbar-item {
  display: flex;
  align-items: center;
  flex-grow: 0;
}

.header .headbar .headbar-item img {
  margin: 0;
  height: 24px;
}

@media screen and (min-width: 1024px) {
  .header .user-navbar,
  .header .user-navbar.is-active {
    top: var(--header-headbar-height);
    height: calc(60px - 1px);
    justify-content: center;
  }

  .header .user-navbar.is-active {
    overflow: visible;
  }

  .header .user-navbar .menu-label-contents {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
  }
}

@media screen and (max-width: 1023px) {
  .layout-no-sidebar {
    padding-top: var(--header-headbar-height);
  }

  .header .user-navbar,
  .header .user-navbar.is-active {
    top: calc(60px + var(--header-headbar-height));
  }

  .layout-fullwidth .main,
  .layout-print .main {
    margin-top: calc(61px + var(--header-headbar-height));
  }

  .layout-login-fullwidth .main {
    margin-top: calc(61px + var(--header-headbar-height));
  }

  .layout-login-fullwidth .main.is-login {
    margin-top: calc(110px + var(--header-headbar-height));
  }
}