header {
  width: 960px;
  min-width: 720px;
  @media (width >= 961px) {
    background: #fff;
    box-shadow: 0 .4rem 1rem 0 rgba(0, 0, 0, .05);
    height: 100px;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: calc(infinity);
  }

  > div {
    @media (width >= 961px) {
      align-items: center;
      display: flex;
      height: 10rem;
      flex-direction: row;
      justify-content: space-between;
      padding: 0 4rem;
      z-index: calc(infinity);
    }
    
    > a {
      display: block;
      height: auto;
      margin: 0;
      padding: 0;
      top: 2.9rem;
      position: fixed;
      z-index: calc(infinity);
      @media (width >= 961px) {
        position: static;
      }
      &.logo {
        left: 2rem;
        width: 15rem;
        @media (width >= 961px) {
          width: 26.3rem;
        }
      }
      &.mail {
        right: 7.4rem;
        width: 5rem;
        @media (width >= 961px) {
          display: none;
        }
      }

      img {
        width: 100%;
      }
    }

    .main-menu {
      display: none;
      @media (width >= 961px) {
        display: block;
        height: 4rem;
        line-height: 4rem;
        ul {
          display: flex;
          gap: 2.4rem;
          list-style: none;
          margin: 0;
          padding: 0;
          li {
            font-size: 1.5rem;
            font-weight: 500;
            line-height: 4rem;

            a {
              color: #333;
              text-decoration: none;
            }

            &:last-of-type {
              padding: 0 0 0 1rem;
              a {
                background: #40B7B7;
                border-radius: 2rem;
                color: #fff;
                display: block;
                height: 4rem;
                text-align: center;
                width: 12.6rem;
              }
            }
          }
        }
      }
    }

    input[type="checkbox"] {
      display: none;
    }

    label {
      background: #02754B;
      border-radius: 50%;
      cursor: pointer;
      height: 5rem;
      justify-content: center;
      position: fixed;
      right: 2rem;
      top: 2.9rem;
      width: 5rem;
      z-index: calc(infinity);
      @media (width >= 961px) {
        display: none;
      }

      span {
        background: #fff;
        display: block;
        height: .1rem;
        left: 50%;
        position: absolute;
        top: 1.5rem;
        transform: translateX(-50%);
        transition: .5s;
        width: 2rem;
        &:nth-of-type(2) {
          top: 2rem;
        }
        &:nth-of-type(3) {
          top: 2.5rem;
        }
      }

      &::after {
        color: #fff;
        content: "MENU";
        font-size: 1rem;
        font-weight: 500;
        left: 50%;
        line-height: 1.2;
        position: absolute;
        top: 2.8rem;
        transform: translateX(-50%);
      }
    }

    .hum-menu {
      background: #F7F6F3;
      height: 100%;
      position: fixed;
      right: -100%;
      top: 0;
      transition: .5s;
      width: 100%;
      z-index: 1000000000;
      @media (width >= 961px) {
        display: none;
      }
    }

    input.check:checked~.hum-menu {
      right: 0;
    }

  }
}