/* ===================================================================
   header.css — TENDEUCE header (revised + scroll-fix)
   ・固定ヘッダー（背景ブラー）
   ・PC: ロゴ左 / メニュー右
   ・SP: ハンバーガー + ドロワー
   ・ホームはスクロールで出現（JSが .header--show を付与）
   ・非ホームは常時表示（JSで .header--show を初期付与）
   =================================================================== */

   :root { --header-h: 64px; }
   @media (max-width: 782px){ :root { --header-h: 56px; } }
   
   /* ========== 基本 ========== */
   .site-header{
     position: fixed; top: 0; left: 0; right: 0;
     background: rgba(0,0,0,.6);
     backdrop-filter: saturate(120%) blur(4px);
     -webkit-backdrop-filter: saturate(120%) blur(4px);
     z-index: 1000;
     display: flex; align-items: center;
     padding: 0;
     transition: transform .4s ease, opacity .4s ease;
     will-change: transform, opacity;
     isolation: isolate;
   }
   
   /* インナー（幅管理 & 両端寄せ） */
   .site-header-inner,
   .site-header > .wp-block-group,
   .site-header > .wp-block-group.alignfull,
   .site-header > .wp-block-group.alignwide,
   .site-header > .container,
   .site-header > div{
     width: 100%;
     max-width: 100vw;
     margin: 0 auto;
     padding: 20px;
     box-sizing: border-box;
     display: flex; align-items: center; justify-content: flex-start;
     gap: 20px;
   }
   
   /* 管理バー押し下げ */
   body.admin-bar .site-header { top: 32px; }
   @media (max-width: 782px){ body.admin-bar .site-header { top: 46px; } }
   
   /* ========== ホーム：スクロールで出す（JSが .header--show を制御） ========== */
   body.home .site-header,
   body.front-page .site-header{
     transform: translateY(-120%); opacity: 0; pointer-events: none;
   }
   body.home .site-header.header--show,
   body.front-page .site-header.header--show{
     transform: translateY(0); opacity: 1; pointer-events: auto;
   }
   
   /* 非ホームは本文をヘッダー分押し下げ（トップが隠れないように） */
   body.page:not(.front-page):not(.home) .wp-site-blocks,
   body.single .wp-site-blocks{
     padding-top: var(--header-h);
   }
   
   /* ========== ブランド（ロゴ） ========== */
   .brand{
     display: flex; align-items: center; gap: 8px;
     text-decoration: none; color: #fff; white-space: nowrap;
   }
   .brand img,
   .brand-mark, .brand-text,
   .site-header .site-logo img,
   .site-header .wp-block-site-logo img{
     display: block; height: auto; width: auto;
   }
   
   /* ========== PCナビ ========== */
   .pc-nav{ margin-left: auto; }
   .pc-nav ul{ display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
   .pc-nav a{
     color: #fff; text-decoration: none;
     display: block; line-height: 1; padding: 10px 0;
     font-weight: 700; letter-spacing: .04em;
   }
   
   /* WPブロックナビ併用時 */
   .site-header .wp-block-navigation{ margin-left: auto; }
   .site-header .wp-block-navigation__container{ gap: 24px; }
   .site-header .wp-block-navigation a{ padding: 0; line-height: 1; }
   
   /* ========== ハンバーガー & SPドロワー ========== */
   .nav-toggle, #navToggle{
     display: none; /* PCでは非表示 */
     margin-left: auto;
     width: 42px; height: 42px;
     align-items: center; justify-content: center;
     border: 1px solid rgba(255,255,255,.15);
     border-radius: 10px; background: transparent; color: #fff;
   }
   .nav-toggle .bar, #navToggle .bar{
     width: 20px; height: 2px; background: currentColor; position: relative; display: block;
   }
   .nav-toggle .bar::before, .nav-toggle .bar::after,
   #navToggle .bar::before, #navToggle .bar::after{
     content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
   }
   .nav-toggle .bar::before, #navToggle .bar::before{ top: -6px; }
   .nav-toggle .bar::after,  #navToggle .bar::after{ top:  6px; }
   
   /* モバイルメニュー土台（PC時は無効） */
   .mobile-nav{ display: none; }
   
   /* ========== レスポンシブ切替 ========== */
   @media (max-width: 768px){
     /* PCメニューだけを隠す（mobile-nav は除外） */
     .pc-nav,
     .site-header > nav:not(.mobile-nav),
     .site-header .wp-block-navigation{
       display: none !important;
     }
   
     /* ハンバーガー表示 */
     .nav-toggle, #navToggle{ display: inline-flex; }
   
     /* ドロワー本体（SP時のみ表示制御） */
     .site-header > nav.mobile-nav{
       display: block !important;
       position: fixed; inset: 0; z-index: 1100;
       background: rgba(0,0,0,.9);
       backdrop-filter: blur(4px);
       opacity: 0; pointer-events: none; transition: opacity .25s ease;
     }
     .site-header > nav.mobile-nav.is-open{ opacity: 1; pointer-events: auto; }
   
     .mobile-nav .panel{
       position: absolute; right: 0; top: 0; bottom: 0;
       width: min(82vw, 360px);
       background: var(--bg, #0B0F12);
       border-left: 1px solid rgba(255,255,255,.1);
       padding: 18px 16px 24px; overflow: auto;
     }
     .mobile-nav .menu a{
       display: block; padding: 12px 6px;
       border-bottom: 1px solid rgba(255,255,255,.1);
       color: var(--text, #E6EBEF); text-decoration: none;
     }
     .mobile-nav .sns{ margin-top: 14px; display: flex; gap: 12px; flex-wrap: wrap; }
     .mobile-nav .sns a{
       display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px;
       border: 1px solid rgba(255,255,255,.15); border-radius: 10px;
       color: var(--text, #E6EBEF); text-decoration: none;
     }
   }
   
/* ========== ロゴサイズ調整 ========== */
.brand .brand-mark,
.brand img,
.site-header .site-logo img,
.site-header .wp-block-site-logo img {
  max-height: 40px;        /* PCでの最大高さ */
  width: auto;             /* アスペクト比維持 */
  max-width: 200px;        /* PCでの最大幅（必要に応じて調整） */
  object-fit: contain;     /* 画像の縦横比を保持 */
}

/* スマホでのロゴサイズ調整 */
@media (max-width: 768px) {
  .brand .brand-mark,
  .brand img,
  .site-header .site-logo img,
  .site-header .wp-block-site-logo img {
    max-height: 32px;      /* スマホでの最大高さ */
    max-width: 160px;      /* スマホでの最大幅 */
  }
}

/* より小さいスマホ画面 */
@media (max-width: 480px) {
  .brand .brand-mark,
  .brand img,
  .site-header .site-logo img,
  .site-header .wp-block-site-logo img {
    max-height: 28px;      /* 小さいスマホでの最大高さ */
    max-width: 140px;      /* 小さいスマホでの最大幅 */
  }
}