//  下層ページ
.header{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10;
  height: 70px;
  padding: 0 30px;
  .nav-bar{
    width: 100%;
    transition: 0.5s;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .logo{
      flex-shrink: 0;
      width: 150px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      @include mediaS{
        width: 120px;
      }
      a{
        width: 66px;
        display: block;
        transition:0.5s;
        @include mediaS{
          width: 53px;
        }
        img{
          width: 100%;
          object-fit: cover;
        }
        &:hover{
          opacity: 0.5;
        }
      }
      &__text{
        font-size: .9375rem;
        font-weight: 700;
        color: $white;
        @include mediaS{
          font-size: 0.8125rem;
        }
      }
    }
    .global-menu {
      width: calc(100% - 115px);
      @include mediaS{
        transition: all .3s ease-out;
        margin-top: inherit;
        position: fixed;
        height: 0;
        top: 0;
        left: 0;
        background-color: $white;
        width: 100%;
        z-index: 105;
      }
      .menu-list {
        position: relative;
        display: flex;
        width: 100%;
        justify-content: center;
        @include mediaS{
          display: none!important;
        }
        li{
          &:nth-of-type(n+2){
            margin-left: 24px;
            @include mediaL{
              margin-left: 16px;
            }
            @include mediaS{
              margin-left: 0;
            }
          }
          a{
            display: block;
            position: relative;
            color: $white;
            font-size: .8125rem;
            // &:before {
            //   position: absolute;
            //   content: "";
            //   width: 0;
            //   height: 2px;
            //   bottom: -4px;
            //   left: 50%;
            //   background-color: $blue;
            //   transform: translateX(-50%);
            //   transition: all 0.3s ease;
            // }
            // &:hover {
            //   &:before {
            //     width: 80%;
            //   }
            // }
          }
        }
      }
      //グローバルナビの表示非表示
      &.show {
        height: 100vh;
        overflow: scroll;
        .menu-list {
          width: 100%;
          position: absolute;
          z-index: 110;
          top: 0;
          left: 50%;
          transform: translate(-50%, 0);
          display: flex !important;
          opacity: 0;
          animation: menuFadein .5s forwards;
          animation-delay: .5s;
          flex-direction: column;
          align-items: flex-start;
          padding-top: 15%;
          li {
            margin: 0 auto 20px;
            a {
              border: none;
              color: $blue;
              font-size: 1.25rem;
              position: relative;
              @include mediaXS{
                font-size: 1.125rem;
              }
              &:before {
                position: absolute;
                content: "";
                width: 0;
                height: 2px;
                bottom: -4px;
                left: 50%;
                background-color: $white;
                transform: translateX(-50%);
                transition: all 0.3s ease;
              }
              &:hover {
                &:before {
                  width: 80%;
                }
              }
            }
          }
        }
      }
    }
    .header__menu{
      display: flex;
      align-items: center;
      .mypage{
        display: block;
        width: 20px;
        margin-right: 20px;
        img{
          display: block;
          width: 100%;
        }
      }
    }
  }
}
//グローバルメニュー表示のアニメーション
@keyframes menuFadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.toggle-hamburger {
  display: block;
  cursor: pointer;
  width: 30px;
  height: 25px;
  padding: 5px;
  z-index: 120;
  span {
    position: relative;
    display: block;
    &::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 2px;
      background-color: $white;
      top: 0px;
      left: 0;
      transform: translateY(0) rotate(0);
      transition: all .3s;
    }

    &:nth-of-type(2) {
      &::before {
        transform: translateY(7px);
        width: 100%;
      }
    }
    &:nth-of-type(3) {
      &::before {
        transform: translateY(14px);
        width: 100%;
        opacity: 1;
      }
    }
  }
  &.close {
    span {
      &:before {
        top: 7px;
      }
      &:nth-of-type(1) {
        &::before {
          transform: rotate(-45deg);
        }
      }

      &:nth-of-type(2) {
        &::before {
          width: 100%;
          transform: rotate(45deg) translateY(0);
        }
      }
      &:nth-of-type(3) {
        &::before {
          opacity: 0;
        }
      }
    }
  }
}