@charset "UTF-8";
/* headerの高さ */
:root {
  --header-height: 88px;

  @media screen and (max-width:950px) {
    --header-height: 50px;
  }
}

header {
  position: fixed;
  left: 0;
  right: 0;
  /* overflow: hidden; */
  z-index: 1000;
  top: var(--gmoheader-height);
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.4, .0, .2, 1), opacity .3s ease;
  will-change: transform;
}

/* スクロールで隠す状態 */
header.is-hide {
  transform: translateY(calc(-1 * var(--header-height) - 10px));
  opacity: 0;
}


/* blur用の背景設定 */
header{
  .header_container {
    position: relative;
    z-index: 0;
    
    .header__inner {
      position: relative;
      z-index: 1000;
      background-color: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(10px);
    }
  }
  #header-navigation-sp {
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
  }
}
  

@media screen and (min-width:951px) {
  #header-navigation-sp {
    display: none!important;
  }
  #headerButtonToggle {
    display: none;
  }
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px var(--spacing-3);
  height: var(--header-height);

  #header-navigation-pc ul {
    display: flex;
    align-items: center;

    li {
      padding: 0 28px;
      position: relative;

      @media screen and (min-width:769px) {
        &+li::before {
          content: "";
          background-image: url(/10th-anniversary/img/common/gnav-line.svg);
          background-size: contain;
          background-repeat: no-repeat;
          display: block;
          width: 4px;
          height: 16px;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      a {
        color: var(--color-primary);
        line-height: 1;
        letter-spacing: 0;
        font-size: var(--typo-fz-14);
        opacity: 1;
        font-weight: 500;
        &.a-link .u-line {
            background: linear-gradient(var(--color-primary), var(--color-primary)) 0 100% / 0 1px no-repeat;
        }
        &.a-link:hover .u-line {
            background-size: 100% 1px;
        }
      }

      .nav-logo {
        width: 112px;
        display: grid;
        place-content: center;
      }

      @media screen and (max-width:1100px) {
        padding: 0 var(--spacing-2);
      }

      @media screen and (max-width:930px) {
        .nav-logo {
          width: 60px;
        }
      }
    }
  }

  .header-logo {
    width: 238px;
    display: grid;
    place-content: center;
  }

  @media screen and (max-width:830px) {
    .header-logo {
      width: 130px;
    }
  }

  @media screen and (max-width:950px) {
    padding: 6px 16px 6px 6px;

    .header-logo {
      width: 173px;
      min-width: 173px;
    }

    #header-navigation-pc {
      display: none;
    }

    #headerButtonToggle {
      display: block;
      appearance: none;
      border: none;
      background: none;
      padding: 0;
      margin: 0;
      cursor: pointer;
      min-width: 20px;
      width: 20px;
      height: 15px;
      transition: background .3s ease;

      &[aria-expanded="false"] {
        background: url(/10th-anniversary/img/common/menu-open.svg) no-repeat center / contain;
      }

      &[aria-expanded="true"] {
        background: url(/10th-anniversary/img/common/menu-close.svg) no-repeat center / contain;
      }
    }
  }
}

#header-navigation-sp {
  opacity: 0;
  visibility: hidden;
  display: none;

  &[aria-hidden="false"] {
    display: block;
    opacity: 1;
    visibility: visible;
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;

    ul {
      padding-top: var(--spacing-1);
      padding-bottom: var(--spacing-1);
      flex-direction: column;

      li {
        height: 60px;
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0 25px 0 20px;

        a {
          font-size: var(--typo-fz-16);
          position: relative;
          width: 100%;
          line-height: 1.2;
          color: var(--color-primary);

          &::after {
            content: "";
            position: absolute;
            top: 4px;
            right: 0;
            width: 10px;
            height: 8px;
            background-image: url(/10th-anniversary/img/common/menu-icon.svg);
            background-size: contain;
            background-repeat: no-repeat;
          }
        }

        .nav-logo {
          width: 170px;
        }
      }
    }
  }
}