/* ============================================================
   KAGVYA v3 ちゃぶ台返し — Hero + Header 再設計
   北極星: Perfume(perfume-web.jp) のヘッダー寸法/様式 + chanmina 式の
   奥レイヤー・アー写 + スクロール parallax。
   theme-kagvya.css の後に読み込み、旧 faketype ヘッダー挙動を上書きする。
   Perfume 実測: .c-header{height:90px; padding:0 45px; position:fixed; logo img 35px}
   ============================================================ */

/* ============================================================
   HEADER — chanmina 式スクロール挙動 (生コード実測に準拠)
   chanmina official-service.js: page--home で header を transparent 開始し、
   scroll > keyvisual.innerHeight-60 で solid化。KAGVYA では「Hero上は非表示 →
   Hero高-60px 越えで solid で降臨(is-revealed)」に翻案 (kagvya-enhance.js が制御)。
   ロゴ以外の要素(nav/JP-EN/SNS)のサイズ・余白は v3(theme-kagvya)踏襲=nav 16px /
   SNS 18px、密度は v3 スクロール後のヘッダーに寄せる。ロゴは大きめ。
   ============================================================ */
/* 表示/非表示 (全viewport共通)。Hero上=隠す, is-revealed=降りてくる */
.page-header{
  transform:translateY(-100%)!important; opacity:0!important; pointer-events:none!important;
  transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .3s ease!important;
}
.page-header.is-revealed{transform:translateY(0)!important; opacity:1!important; pointer-events:auto!important;}
/* HANA の is-insert reveal に依存させない(ヘッダー自体を出し入れするので子は常に可視)。
   ★base.css は reveal を <li>(.header-nav/aside ul li:nth-of-type)に opacity:0;translate:100px で
   掛けるので、a だけ上書きでは親 li の opacity:0 で全消えになる → li を直接可視化する。 */
.page-header .header-logo a span,
.page-header .header-nav ul li,
.page-header .header-nav li a,
.page-header .header-lang,
.page-header .header-lang a,
.page-header .header-aside ul li,
.page-header .header-aside li a{opacity:1!important; translate:0 0!important;}

@media (min-width:961px){
  .page-header{
    display:flex!important; align-items:center!important;
    height:64px!important; padding:0 56px!important;   /* ゆとりを持たせて side padding 拡大(40→56) */
    position:fixed!important; top:0!important; left:0!important; width:100%!important;
    background:rgba(8,9,11,.94)!important;
    box-shadow:0 1px 0 rgba(236,231,221,.08)!important;
    backdrop-filter:blur(12px) saturate(1.08)!important; -webkit-backdrop-filter:blur(12px) saturate(1.08)!important;
    z-index:8888!important; mix-blend-mode:normal!important;
  }
  .page-header::before,.page-header::after{display:none!important;content:none!important;}

  /* --- logo (左端, 金ワードマーク, 大きめ) ---
     base.css の span:height124px / img:position:absolute 罠を解除。外側 .header-logo(flex)で縦中央化。 */
  .page-header .header-logo{position:static!important;transform:none!important;scale:none!important;
    top:auto!important;left:auto!important;right:auto!important;margin:0!important;
    width:auto!important;height:64px!important;line-height:0!important;display:flex!important;align-items:center!important;}
  .page-header .header-logo h1,
  .page-header .header-logo h1 a,
  .page-header .header-logo h1 a span{
    display:flex!important;align-items:center!important;height:auto!important;width:auto!important;
    margin:0!important;padding:0!important;line-height:0!important;position:static!important;top:auto!important;left:auto!important;transform:none!important;}
  .page-header .header-logo img{position:static!important;top:auto!important;left:auto!important;
    height:42px!important;width:auto!important;display:block!important;filter:brightness(1.62) saturate(1.08)!important;}

  /* --- nav (v3準拠: font 16px / gap ~) ---
     大文字テキストは line-height:1 + flex中央だと descender 空間ぶん視覚中央がヘッダー中央より
     ~2px 上に浮く。translateY(2px)で SNS/ヘッダー中央に几帳面に揃える。 */
  /* 並び順(左→右): logo | [余白] | nav(TOP~FANCLUB) | SNS | JP/EN(右端)。order で並べ替え。
     nav の margin-right(56)で nav を少し左へ寄せ、全体にゆとり。 */
  .page-header .header-nav{position:static!important;transform:translateY(1px)!important;top:auto!important;right:auto!important;left:auto!important;
    order:1!important;margin:0 56px 0 auto!important;width:auto!important;height:auto!important;}
  .page-header .header-nav ul{display:flex!important;align-items:center!important;gap:34px!important;margin:0!important;padding:0!important;list-style:none!important;}
  .page-header .header-nav ul li{height:auto!important;margin:0!important;overflow:visible!important;}
  /* ★font-family/weight/letter-spacing は上書きしない=v3と同じ継承フォント(Times系serif)。size のみ v3(32pv=16px)に合わせる。 */
  .page-header .header-nav ul li a{display:block!important;position:static!important;
    font-size:15px!important;line-height:1!important;
    color:#fff!important;opacity:.9!important;transform:none!important;transition:opacity .25s ease,color .25s ease!important;}
  .page-header .header-nav ul li a:hover{color:var(--kg-gold)!important;opacity:1!important;}
  .page-header .header-nav a.is-active{color:#fff!important;opacity:1!important;font-style:normal!important;}
  .page-header .header-nav a.is-active:hover{color:var(--kg-gold)!important;}

  /* --- JP/EN (nav と同じフォントに明示統一 = v3継承の ff-carina, serif) / 15px --- */
  .page-header .header-lang,
  .page-header .header-lang a,
  .page-header .header-lang span{font-family:ff-carina, serif!important;}
  .page-header .header-lang{display:flex!important;align-items:center!important;gap:5px!important;order:3!important;margin:0 -10px 0 34px!important;
    font-size:15px!important;line-height:1!important;transform:translateY(1px)!important;}   /* 右端(margin-right -10で少し端に寄せ)。nav と同寸(15px) + 同じ縦補正 */
  .page-header .header-lang a{color:rgba(255,255,255,.5)!important;transition:color .25s ease!important;}
  .page-header .header-lang a:hover,.page-header .header-lang a.is-active{color:#fff!important;}
  .page-header .header-lang span{color:rgba(255,255,255,.35)!important;}

  /* --- SNS icons (v3準拠: 18px)。JP/EN の左に配置(order:2) --- */
  .page-header .header-aside{position:static!important;transform:translateY(0.5px)!important;top:auto!important;right:auto!important;left:auto!important;
    order:2!important;margin:0!important;width:auto!important;height:auto!important;}   /* 縦中央: +1px=低い/0=わずかに高い → 0.5px(ボス微調整) */
  .page-header .header-aside ul{display:flex!important;align-items:center!important;gap:20px!important;margin:0!important;padding:0!important;list-style:none!important;}
  .page-header .header-aside ul li{height:auto!important;margin:0!important;}
  .page-header .header-aside a{display:block!important;line-height:0!important;}
  .page-header .header-aside img{width:18px!important;height:18px!important;opacity:.65!important;transition:opacity .25s ease!important;}
  .page-header .header-aside a:hover img{opacity:1!important;}
}

/* mobile: 旧 hamburger(.page-nav) を維持。header は logo + JP/EN のみ表示。同じく Hero上は非表示。 */
@media (max-width:960px){
  .page-header{height:calc(108*(100vw/828));padding:0 6%!important;display:flex!important;align-items:center!important;
    background:rgba(8,9,11,.94)!important;box-shadow:0 1px 0 rgba(236,231,221,.08)!important;
    backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;}
  .page-header::before,.page-header::after{display:none!important;}
  .page-header .header-logo{position:static!important;transform:none!important;scale:none!important;margin:0!important;height:calc(108*(100vw/828))!important;display:flex!important;align-items:center!important;}   /* ★scale:0.3(base) を解除。これがロゴ縮小の正体だった */
  .page-header .header-logo h1,.page-header .header-logo h1 a{display:flex!important;align-items:center!important;height:100%!important;margin:0!important;line-height:0!important;position:static!important;transform:none!important;}
  .page-header .header-logo a span{display:none!important;}
  .page-header .header-logo a span:first-child{display:flex!important;align-items:center!important;}
  /* ★base の固定span(780x330 vw/828 absolute)+ img(width:100% absolute)を解除して、img実サイズで縦中央に(=ロゴ拡大) */
  .page-header .header-logo span{position:static!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;translate:none!important;opacity:1!important;}
  .page-header .header-logo span img{position:static!important;left:auto!important;top:auto!important;width:auto!important;height:calc(90*(100vw/828))!important;filter:brightness(1.62) saturate(1.08)!important;}
  .page-header .header-nav{display:none!important;}      /* nav は hamburger overlay に */
  .page-header .header-lang{display:flex!important;align-items:center!important;gap:4px;margin-left:auto!important;margin-right:calc(96*(100vw/828));font-size:14px;letter-spacing:.06em;}
  .page-header .header-lang a{color:rgba(255,255,255,.6)!important;}
  .page-header .header-lang a.is-active{color:#fff!important;}
  .page-header .header-lang span{color:rgba(255,255,255,.4)!important;}
  .page-header .header-aside{display:none!important;}     /* SNS は overlay に (page-nav) */

  /* ===== Perfume モバイルヘッダー踏襲(2026-07-03): 常に表示 / logo・JP-EN・ハンバーガーの3要素のみ ===== */
  .page-header{transform:translateY(0)!important;opacity:1!important;pointer-events:auto!important;}   /* Hero上でも隠さない=常時表示 */
  /* JP/EN のフォントだけ PC版KAGVYAヘッダー(ff-carina, serif)に合わせる(ボス指示) */
  .page-header .header-lang,
  .page-header .header-lang a,
  .page-header .header-lang span{font-family:ff-carina, serif!important;}
  /* JP/EN = ハンバーガーの左に絶対配置(margin方式だと画面外に溢れる)・縦中央 */
  .page-header .header-lang{position:absolute!important;top:0!important;right:calc(6% + 44px)!important;left:auto!important;
    height:calc(108*(100vw/828))!important;margin:0!important;display:flex!important;align-items:center!important;}
  /* ハンバーガー(メニュー展開マーク): 常時表示・ヘッダー右端・縦中央・ヘッダーより上。3本線→✕(Perfume式) */
  .nav-button{position:fixed!important;top:0!important;right:6%!important;left:auto!important;
    height:calc(108*(100vw/828))!important;display:flex!important;align-items:center!important;justify-content:center!important;
    opacity:1!important;translate:0 0!important;z-index:8895!important;mix-blend-mode:normal!important;}
  /* ★メニュー透過バグ修正: nav-main が z:2 でコンテンツ(.cm-section z:2)に負けて後ろに回っていた
     → コンテンツ/ヘッダー(8888)より上へ(grain 9000 より下=grainは全面維持)。button(X)はさらに上(8895)。 */
  .page-nav .nav-main{z-index:8890!important;}
  /* メニュー文字revealを少しきびきびに(2026-07-03): パネル0.5→0.42s / 文字 開始.55→.28s・stagger+.05→+.04・尺0.5→0.42s。アニメ自体は維持 */
  .page-nav .nav-main{transition:right 0.42s cubic-bezier(0.215,0.61,0.355,1),visibility 0s linear 0.42s!important;}
  .page-nav .nav-main ul li{transition:all 0.0s linear 0.42s!important;}
  .page-nav.is-active .nav-main{transition:right 0.42s cubic-bezier(0.215,0.61,0.355,1),visibility 0s linear 0s!important;}
  .page-nav.is-active .nav-main ul li:nth-of-type(1){transition:all 0.42s cubic-bezier(0.215,0.61,0.355,1) .28s!important;}
  .page-nav.is-active .nav-main ul li:nth-of-type(2){transition:all 0.42s cubic-bezier(0.215,0.61,0.355,1) .32s!important;}
  .page-nav.is-active .nav-main ul li:nth-of-type(3){transition:all 0.42s cubic-bezier(0.215,0.61,0.355,1) .36s!important;}
  .page-nav.is-active .nav-main ul li:nth-of-type(4){transition:all 0.42s cubic-bezier(0.215,0.61,0.355,1) .40s!important;}
  .page-nav.is-active .nav-main ul li:nth-of-type(5){transition:all 0.42s cubic-bezier(0.215,0.61,0.355,1) .44s!important;}
  .nav-button button{position:relative!important;width:26px!important;height:auto!important;
    display:flex!important;flex-direction:column!important;justify-content:center!important;}
  .nav-button button span{position:static!important;left:auto!important;top:auto!important;
    width:26px!important;height:2px!important;background:var(--kg-ink)!important;margin:3.5px 0!important;
    rotate:none!important;translate:none!important;scale:1!important;
    transition:transform .4s cubic-bezier(.215,.61,.355,1),opacity .3s ease!important;}
  /* ★is-active は script.min.js が button 要素に付ける(div ではない) → button.is-active で✕化 */
  .nav-button button.is-active span:nth-of-type(1){transform:translateY(9px) rotate(45deg)!important;background:var(--kg-ink)!important;}
  .nav-button button.is-active span:nth-of-type(2){opacity:0!important;}
  .nav-button button.is-active span:nth-of-type(3){transform:translateY(-9px) rotate(-45deg)!important;background:var(--kg-ink)!important;}
}

/* ============================================================
   HERO — chanmina 式: アー写を奥レイヤー(最背面) + scroll parallax で若干追従
   仕組み: #visual を 100vh。 .hero-bg を絶対配置でオーバースキャン、
   Locomotive の data-scroll-speed(負値) で本文より遅く動かす=「若干ついてくる」。
   後続セクション(.cm-section#news 以降)は不透明 --kg-bg + z-index 上 で
   スクロール時にアー写の上へせり上がる=「NEWS より奥レイヤー」。
   ============================================================ */
.main-video#visual{
  position:relative!important; z-index:0!important;
  height:108vh!important; min-height:600px!important;   /* Hero に与える面積を少し拡大 */
  margin:0!important; padding:0!important; overflow:hidden!important;
  background:#1a060c!important;   /* カーテンの赤に近い最背面地色(万一の隙間対策) */
}
/* アー写レイヤー(最背面)。オーバースキャンで parallax の隙間を防ぐ */
.hero-bg{
  position:absolute!important; left:0!important; top:-8%!important;
  width:100%!important; height:116%!important; z-index:0!important;
  will-change:transform; pointer-events:none;
}
.hero-bg img,.hero-bg picture{
  display:block!important; width:100%!important; height:100%!important;
  object-fit:cover!important; object-position:center 58%!important;  /* 4人の顔をぐぐっと持ち上げ */
}
/* ★veil(下部フェード/上部翳り/ヴィネット)は撤去。chanmina/Perfume はHero画像に fade を掛けない。 */
/* 旧 .main-video::after / .video-still は使わない */
.main-video#visual::after{display:none!important;content:none!important;}
.main-video#visual::before{display:none!important;content:none!important;}
.video-info{display:none!important;}   /* 旧キャプションは一旦非表示(必要なら復帰) */

/* ★scroll cue(白い動く線)も撤去。踏襲元(chanmina/Perfume)に無い要素は足さない。 */

/* 後続コンテンツをアー写の上に重ねる(奥レイヤー化) */
.cm-section,.kg-fc-section{position:relative;z-index:2;}
#news.cm-section{position:relative;z-index:2;background:var(--kg-bg)!important;}

@media (max-width:960px){
  /* Hero 顔見切れ対策(2026-07-03): height を画面幅基準(vw)にして ≤133vw に収める
     = box が画像(3:4=0.75)より横広アスペクトになり top/bottom crop → 4人フル幅が全員入る。
     parallax の overscan(top:-8%/height116%)は mobile では crop を縦に歪める(=横切れ)ので解除。 */
  .main-video#visual{height:120vw!important;min-height:0!important;}
  .hero-bg{top:0!important;height:100%!important;}
  .hero-bg img,.hero-bg picture{object-position:center 60%!important;}
}