@charset "UTF-8";
/* ==========================================================
   飛騨ほおのき平スキー場 — header.css（下層ページ共通）
   TOPの hero_top.css からヘッダー／SPハンバーガー部を抽出した複製。
   TOPは従来どおり hero_top.css を使用（本ファイルは下層専用）。
   .header は直近の position:relative 祖先（.page-hero）基準で絶対配置。
   ========================================================== */

.header {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 38px 0 35px;
  z-index: 20;
}
.header__logo { margin-top: 35px; }
/* 【2026-09-03 A-1c/shared R2】spec ロゴ群 182.5×58.3 @x34.8,y35.2（カンプ ink 182×57 @x35,y36）。
   旧 240px は ink 238×74 ＝ +31%。TOP（hero_top.css）が実測で合わせた 184px と同値にする
   （184px の実描画 ink は 182×57 @x36,y36 でカンプと一致することを画素実測で確認）。
   ※ hour_pc の spec だけロゴ群が 240.5×76.9 でカンプ内が不整合。top_pc / slop_pc の 182.5 を採用。 */
.header__logo img { width: 184px; height: auto; filter: brightness(0) invert(1); }

.header__nav {
  /* 修正内容1.pdf(2026-07-29): ナビ拡大＋ページ中央揃え（TOPと共通変更） */
  display: flex;
  align-items: center;
  gap: 15px; /* 実効値は base.css の `.header .header__nav { gap: 18.4px }`（詳細度が上）が正 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 38px;
}
.header__nav a {
  font-family: var(--font-jp);
  /* 【2026-09-02 A-1c】spec実値 18px / ls 0.01em（旧 17px / 0.02em）。
     7/6「文字を80%に」は 8/31 版に吸収済み＝spec の size をそのまま使う。 */
  font-size: 18px;
  /* 【2026-08-16】下層だけ600のままでTOP（hero_top.css＝500）より太かった。
     2026-08-01の「グローバルメニューが太すぎる／ゲレンデの濁点が潰れる」修正が
     TOP側にしか入っていなかったため、下層もTOPと同じ500に揃える。 */
  font-weight: 500;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* 【2026-09-03 A-1c/shared R2】.nakaguro（中黒の負トラッキング）は撤去した。
   BRIEF §6-7 のとおり中点「・」は fonts/ShipporiAntiqueB1-palt.woff2 側で 0.5em に
   焼き込み済み（tools/bake_yakumono.py）＝ CSS で詰めると二重に詰まる。
   ナビ塊の幅はここではなく base.css の .header .header__nav の gap で作る。
   HTML の <span class="nakaguro"> は全12ページに残るが、対応する宣言が無いので無害。 */

.header__en {
  /* 【2026-09-03 A-1c/shared R2】spec 図形: 36×36 @x1365.6,y29.5・線 0.6px #ffffff
     （旧 38×38 ＋ border 1px）。.header の padding-right 38px との組み合わせで
     x=1366 / y=29.5 になる。 */
  margin-top: 29.5px;
  width: 36px; height: 36px;
  border: 0.6px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 【2026-09-02 A-1c】spec は Bebas ではなく Shippori 13px / ls 0.01em。
     旧実装は Bebas Kai 13.5px / 0.04em だった＝書体からの取り違え。 */
  font-family: var(--font-jp);
  font-feature-settings: "palt";
  font-size: 13px;
  letter-spacing: 0.01em;
  color: #fff;
}

/* ============================ SPハンバーガー ============================ */
.nav-toggle { display: none; }
.sp-menu { display: none; }

@media (max-width: 768px) {
  .header {
    padding: 14px 16px 24px;
    align-items: center;
    background: linear-gradient(180deg, rgba(9,47,84,0.55) 0%, rgba(9,47,84,0.3) 60%, rgba(9,47,84,0) 100%);
    z-index: 60; /* ドロワー(z50)より前面＝開いた状態でも閉じられる */
  }
  /* ロゴを116pxに縮めると align-items:center のぶん 2px 下がるので上端で固定して戻す
     （カンプ ink 上端 y18／ハンバーガーは動かさない） */
  .header__logo { margin-top: 3.3px; align-self: flex-start; }
  /* 【2026-09-03 A-1c/shared R2】SPも下層だけ大きかった（カンプ ink 116×36 @x15,y18 に対し
     138px＝ink 136×41）。TOP（hero_top.css SP＝116px）と同値にする。 */
  .header__logo img { width: 116px; }
  .header__nav { display: none; }
  /* 【2026-09-24】水島さん仕様「日本語／English の切替ボタンは常時表示」→ SPもヘッダーに出す（旧: ドロワー内だけ）。
     ハンバーガー（38px・margin-top 10px・スクロール後 -2px）と同じ margin-top にすると縦中心が揃う（.header は align-items:center）。
     見た目32px・押せる範囲44px（::after）。ドロワーを開いている間はドロワー内の切替と重複するので隠す。 */
  .header a.header__en {
    display: flex;
    position: relative;
    width: 32px; height: 32px;
    margin: 10px 6px 0 auto;
    border-width: 1px;
    font-size: 12px;
  }
  .header a.header__en::after { content: ""; position: absolute; inset: -6px; }
  .js .header.is-fixed.is-scrolled a.header__en { margin-top: -2px; }
  body.is-menu-open .header a.header__en { visibility: hidden; }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 8px;
    position: relative;
    margin-top: 10px;
  }
  .nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
  }
  .nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ドロワー: top_sp_2.pdf 実測（右寄せパネル 幅277・高578・#primary・右からスライドイン）
     hero_top.css と同一定義（TOP/下層で複製） */
  .sp-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s 0.45s;
  }
  .sp-menu.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }
  .sp-menu__panel {
    position: absolute;
    top: 0; right: 0;
    width: 277px;
    max-width: 88vw;
    background: var(--color-primary);
    padding: 112px 26px 25px 44px;
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sp-menu.is-open .sp-menu__panel { transform: none; }
  .sp-menu__logo { display: block; width: 116px; height: auto; filter: brightness(0) invert(1); }
  .sp-menu__list { margin-top: 39px; }
  .sp-menu__list li + li { margin-top: 20px; }
  .sp-menu__list a {
    display: block;
    color: #fff;
    font-size: 15.3px;
    line-height: 1;
    letter-spacing: 0.04em;
  }
  .sp-menu__en {
    margin-top: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.04em;
  }
  .sp-menu__follow {
    margin-top: 33px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
  }
  .sp-menu__follow-label {
    color: #fff;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.02em;
  }
  .sp-menu__sns { display: flex; }
  .sp-menu__sns svg { width: 23px; height: 23px; }
  body.is-menu-open { overflow: hidden; }
}