:root {
  --base-width-sp: 375;
  --base-width-pc: 1440;

  --menu-height-sp: calc(60 / var(--base-width-sp) * 100vw);
  --menu-height-pc: calc(65 / var(--base-width-pc) * 100vw);
}

/* -------------------------
   共通（縦長モバイル基準）
-------------------------- */
.global-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(60 / 375 * 100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  transition: transform 0.3s ease;
  background-color: #ffffff;
}

.header-inner {
  width: calc(325 / var(--base-width-sp) * 100vw);
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  width: calc(119 / var(--base-width-sp) * 100vw);
  height: calc(40 / var(--base-width-sp) * 100vw);
  background-image: url("../assets/images/logo/new-site-logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center left;
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(5 / var(--base-width-sp) * 100vw);
  width: calc(34 / var(--base-width-sp) * 100vw);
  height: calc(20 / var(--base-width-sp) * 100vw);
}

.menu-toggle .bar {
  width: 100%;
  height: 0;
  border-top: calc(2 / var(--base-width-sp) * 100vw) solid #000;
}

/* ナビは縦長モバイルでは非表示 */
.header-nav {
  display: none;
}

/* -------------------------
   横長モード（PC向け上書き）
-------------------------- */
@media (min-aspect-ratio: 1/1) {
  .global-header {
    height: var(--menu-height-pc);
  }

  .header-inner {
    width: calc(1100 / var(--base-width-pc) * 100vw);
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(495 / var(--base-width-pc) * 100vw);
  }

  .logo {
    width: calc(139 / var(--base-width-pc) * 100vw);
    height: calc(47 / var(--base-width-pc) * 100vw);
    background-image: url("../assets/images/logo/new-site-logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
  }

  .header-nav {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: calc(30 / var(--base-width-pc) * 100vw);
  }

  .header-nav .nav-item {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: calc(14 / var(--base-width-pc) * 100vw);
    line-height: calc(17 / var(--base-width-pc) * 100vw);
    color: #231815;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }

  .menu-toggle {
    display: none;
  }
}