/* ヘッダー */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: 80px;
  background: var(--c-blue-gray);
  box-sizing: border-box;
}
.site-header .header-inner { position: relative; height: 100%; }

.site-header .logo {
  position: absolute;
  left: 16px; top: 12px;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.site-header.is-scrolled .logo,
.site-header.is-static-logo .logo { opacity: 1; pointer-events: auto; }
.site-header .logo img { display: block; }
.site-header .logo .logo-pc { width: 181.495px; height: 56.41px; }
.site-header .logo .logo-sp { display: none; width: 141.567px; height: 44px; }

.site-header .anchor-nav,
.site-header .page-nav {
  position: absolute;
  right: 24px; top: 50%;
  transform: translateY(-50%);
}
.site-header .anchor-nav ul,
.site-header .page-nav ul { display: flex; align-items: center; gap: 32px; }
.site-header .anchor-nav a,
.site-header .page-nav a {
  display: block;
  font-size: 14px; font-weight: 700; line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--c-pony-blue);
  white-space: nowrap;
}

.site-header .page-nav a { display: flex; align-items: center; gap: 4px; }
.site-header .page-nav a img {
  width: 11.485px; height: 10.063px;
  margin: 1.97px 1.257px;
  transform: rotate(90deg);
}

.site-header .menu-toggle { display: none; }

@media (max-width: 767px) {
  .site-header {
    height: 92px;
    padding-top: 40px;
    padding-bottom: 8px;
  }
  .site-header .header-inner { height: 44px; }
  .site-header .logo { left: 8px; top: 0; }
  .site-header .logo .logo-pc { display: none; }
  .site-header .logo .logo-sp { display: block; }
  .site-header .anchor-nav,
  .site-header .page-nav { display: none; }

  .site-header .menu-toggle {
    display: block;
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    width: 52px; height: 52px;
    border-radius: 32px;
    overflow: hidden;
  }

  .site-header .menu-toggle .icon-menu {
    position: absolute; left: 50%; top: 50%;
    width: 32px; height: 32px;
    margin: -16px 0 0 -16px;
  }
  .site-header .menu-toggle .icon-menu i {
    position: absolute;
    left: 3.333px;
    width: 25.333px; height: 0;
    border-top: 2.67px solid var(--c-pony-blue);
    border-radius: 2px;
    margin-top: -1.335px;
  }
  .site-header .menu-toggle .icon-menu i:nth-child(1) { top: 10px; }
  .site-header .menu-toggle .icon-menu i:nth-child(2) { top: 18px; }
  .site-header .menu-toggle .icon-menu i:nth-child(3) { top: 26px; }
  .site-header .menu-toggle .icon-close {
    display: none;
    position: absolute; left: 50%; top: 50%;
    width: 32px; height: 32px;
    margin: -16px 0 0 -16px;
  }
  .site-header .menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
  .site-header .menu-toggle[aria-expanded="true"] .icon-close { display: block; }

  body.menu-open .site-header .logo { opacity: 1; pointer-events: auto; }
}

body[data-page="items"], body[data-page="support"] { padding-top: 80px; }
@media (max-width: 767px) {
  body[data-page="items"], body[data-page="support"] { padding-top: 92px; }
}

@media (max-width: 767px) {
  body[data-page="index"] .site-header .menu-toggle { display: none; }
}