@charset "UTF-8";

/* ==========================================
   ヘッダー
   XD: 01_TOP_SP / 02_ハンバーガーメニュー_SP の header（375px）、01_TOP_PC の header（1366px）
   SP は全幅の白い帯、PC（768px〜）は白い角丸の帯。768〜1366px は --header-t（0〜598px）で寸法を線形に変える。
   計算式：下限 + --header-t × (上限 − 下限) ÷ 598。1366px で XD の値、768px で下限になる（DESIGN_POLICY §2）
   ========================================== */
.header {
  position: fixed;
  top: var(--admin-bar-h); /* ログイン時は管理バーの下 */
  left: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 50px; /* XD SP: 長方形 1091 y=0 h=50 */
  padding: 0 10px; /* XD SP: ロゴ x=10.47（ロゴの箱は x=10） */
  background-color: var(--color-white);
  box-shadow: var(--shadow-card); /* XD: x=0 y=3 blur=3（開発モードは 6）#00000029（SP・PC とも） */
  transition: transform 0.3s ease;

  --header-t: clamp(0px, calc(100vw - 768px), 598px);
}

.header.is-hidden {
  /* SP だけ、下スクロールで隠す（main.js が付け外す。QUESTIONS Q-3） */
  transform: translateY(-100%);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.header__logo {
  flex-shrink: 0;
  width: 117px; /* XD SP: logo w=116.17 h=19.95 */
  height: 20px;
}

.header__logo a {
  display: block;
  width: 100%;
  height: 100%;
}

.header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* PC のナビとお問い合わせは SP では出さない（メニューは .drawer） */
.global-nav,
.header__contact {
  display: none;
}

/* ハンバーガー。開いた状態（main.js が .is-open を付ける）は XD 02：
   hamburger x=337 w=28.1（CLOSE の幅）、×印（グループ 1909）x=341.94 y=15 w=18.13 h=8.45（長さ 20 の線を ±25° 回した外枠）、CLOSE のベースライン y=33.45 */
.hamburger {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-start;
  width: 24px; /* XD SP: hamburger x=341 w=24.14 */
  height: 50px;
  padding: 15px 0 0; /* XD SP: グループ 1909 y=15 */
  color: var(--color-main);

  --bars-width: 20px;
  --bars-height: 6.5px; /* XD SP: 線 15・16 の中心 y=15 / 21.5 を、箱の上端・下端に置く */
  --bar-top: none;
  --bar-bottom: none;
  --text-gap: 4px; /* XD SP: MENU のベースライン y=35.5 → 行の上端 25.5（line-height 13・ascent 10） */
}

.hamburger.is-open {
  width: 28px;

  --bars-width: 18.13px;
  --bars-height: 8.45px;
  --bar-top: translate(-0.94px, 4.23px) rotate(25deg); /* 線の中心を ×印の中心 y=19.225 に寄せ、幅 20 の線を箱の中心にそろえる */
  --bar-bottom: translate(-0.94px, -4.23px) rotate(-25deg);
  --text-gap: 0;
}

.hamburger__bars {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: var(--bars-width);
  height: var(--bars-height);
}

.hamburger__bar {
  display: block;
  width: 20px;
  height: 2px;
  margin: -1px 0;
  border-radius: 2px;
  background-color: var(--color-main);
  transition: transform 0.3s ease;
}

.hamburger__bar--top {
  transform: var(--bar-top);
}

.hamburger__bar--bottom {
  transform: var(--bar-bottom);
}

.hamburger__text {
  margin: var(--text-gap) 0 0;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3; /* 13px ÷ 10px */
  color: var(--color-main);
  text-transform: uppercase;
}

@media (width >= 768px) {
  .header {
    top: calc(20px + var(--admin-bar-h)); /* XD PC: 長方形 1091 x=37 y=20 w=1292 h=90 */
    right: 0;
    left: 0;
    width: calc(100% - 2 * (10px + var(--header-t) * 27 / 598));
    max-width: 1292px;
    height: calc(64px + var(--header-t) * 26 / 598);
    margin: 0 auto;
    padding: 0 calc(16px + var(--header-t) * 14 / 598) 0 calc(16px + var(--header-t) * 25 / 598); /* XD PC: 右 30（ボタンの右端 1299）・左 41（ロゴ x=77.95） */
    border-radius: 100px;
  }

  .header__logo {
    width: calc(120px + var(--header-t) * 49 / 598); /* XD PC: logo w=168.77 h=28.99 */
    height: auto;
    aspect-ratio: 169 / 29;
  }

  .hamburger {
    display: none;
  }

  .global-nav {
    /* XD PC: navigation の文字は YuGo-Bold 16px・#3b4043・letter-spacing 50（0.8px）、x=618 / 755 / 841 / 978 / 1064、ベースライン y=72 */
    display: block;
    margin: 0 calc(12px + var(--header-t) * 8 / 598) 0 auto; /* XD PC: ナビの右端 1130.4 → ボタン x=1151.11 */
  }

  .global-nav__list {
    display: flex;
    gap: calc(8px + var(--header-t) * 11 / 598); /* XD PC: 項目の間 約 19〜20 */
    align-items: center;
  }

  .global-nav__link {
    display: block;
    padding-top: 0.1875em; /* XD PC: ベースライン 72 は、帯の中央に置いた行より 1.5px 下 */
    font-family: var(--font-ja);
    font-size: calc(12px + var(--header-t) * 4 / 598);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: var(--color-text-nav);
    white-space: nowrap;
    transition: color 0.3s ease;
  }
}

@media (width >= 768px) and (any-hover: hover) {
  .global-nav__link:hover {
    color: var(--color-main);
  }
}

@media (width >= 768px) {
  .header__contact {
    /* XD PC: ボタン 長方形 1090 x=1151.11 y=41 w=148 h=48・#f7b560・角丸 24、文字は YuGo-Bold 16px の白 */
    display: block;
    flex-shrink: 0;
  }

  .header__contact .btn {
    /* flex をやめて行の高さ＝ボタンの高さにする（測定の probe が flex の中で別の項目になり、ベースラインが中央になるため。HANDOFF §1 の works のタブと同じ） */
    display: block;
    width: calc(110px + var(--header-t) * 38 / 598);
    height: calc(36px + var(--header-t) * 12 / 598);
    font-family: var(--font-ja);
    font-size: calc(12px + var(--header-t) * 4 / 598);
    font-weight: 700;
    line-height: 3; /* font-size の 3 倍（calc(36px + …) ÷ calc(12px + …) ＝ 3） */
    text-align: center;
  }
}