.c-main-sidebar {
  $root: &;

  height: 100%;
  left: 0;
  position: fixed;
  // NOTE: $zindex-modal より小さな値にしないとモーダルを開いたときサイドバーが全面に出てしまう
  z-index: $zindex-fixed;

  &__background {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    display: none;
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
  }

  &__background.active {
    display: block;
  }

  &__content {
    background-color: var(--ann-color-sidebar-bg);
    display: none;
    font-size: 0.95rem;
    height: 100%;
    left: 0;
    position: fixed;
    overflow-y: auto;
    width: 240px;

    #{$root}__logo {
      background-color: $ann-mizuho-color;
      height: $ann-navbar-height;
      line-height: $ann-navbar-height - 4px;
    }

    #{$root}__icon {
      width: 25px;
    }

    a {
      color: var(--ann-body-color);
    }

    input {
      font-size: 0.95rem;
    }
  }

  &__content.active {
    display: block;
  }
}

@include media-breakpoint-up(lg) {
  .c-main-sidebar {
    &__content {
      display: block !important;
    }
  }
}
