/* =========================================================
   全ページ共通ヘッダー（トップバー＋メインヘッダー）
   ---------------------------------------------------------
   使い方：
     1. <head> で vendor/css/styles.css の後に読み込む
          <link rel="stylesheet" href="css/site-header.css?v=1">
          （サブディレクトリのページは ../css/site-header.css）
     2. 本文側は index.php と同じ構造で
          <div class="site-header-fixed" id="siteHeaderFixed">
            <div class="top-bar">…</div>
            <header class="header header-sticky" id="header">…</header>
          </div>
     3. 「初回ロードで隠してスクロール後に表示」(index.php) か
        「最初から表示」(サブページ) かは、各ページ側で
        .site-header-fixed の transform / opacity を指定する。

   サイズ：PC   トップバー 36px ＋ メインヘッダー 66px ＝ 102px
           SP   トップバー 36px ＋ メインヘッダー 53px ＝ 89px
   ここを変えれば全ページに反映される。
   ========================================================= */

/* アンカー移動時にヘッダーの下に見出しが隠れないための余白 */
html { scroll-padding-top: 110px; }
@media (max-width: 1199.98px) { html { scroll-padding-top: 100px; } }

/* トップバー＋ヘッダーを常に画面上部に固定 */
.site-header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(6, 18, 26, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header-fixed .top-bar {
    position: relative;
    z-index: 2;
}
.site-header-fixed #header.header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
    z-index: 1;
}
.site-header-fixed #header.header.is-fixed {
    position: relative !important;
    top: auto !important;
}

/* 薄いサイズ（テンプレート既定値：トップバー余白 18px、メニュー行高 90px、ロゴ 50px、ボタン余白 20px） */
.site-header-fixed .top-bar .top-bar-inner {
    padding: 10px 0;
}
.site-header-fixed #header .logo-header img {
    max-height: 38px !important;
}
.site-header-fixed #header .menu-primary-menu .item-link {
    line-height: 64px;
}
.site-header-fixed #header .nav-btn .tf-btn {
    padding: 12px 28px;
}

/* ヘッダーは固定オーバーレイなので、コンテンツ上部の余白は不要 */
.wrapper.position-relative {
    padding-top: 0;
}

/* メニュー内の「NEW」バッジ */
.menu-new {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.5;
    color: #24254B;
    background: #FDD65B;
    border-radius: 999px;
    vertical-align: middle;
}