/* ============================================================
   サイトヘッダー 着せ替え（SWELL テーマ非改変・CSSのみ）
   正本: docs/superpowers/specs/assets/2026-07-18-homepage-design-AUTHORITATIVE.html
   - 和紙/クラフト紙 + 墨(#15151c) + ネオンピンク(#ff2d6f) のエディトリアル。
   - ヘッダー: 紙地の半透明 sticky + blur、明朝(Zen Antique)ロゴ + 「5 SHOPS」バッジ、
     ネオンのホバー下線ナビ、RSS 撤去。
   - ロゴのテキストは実サイト名のまま（リネームしない）。質感のみ正本に寄せる。
   - フッターは独自フッター (public/css/footer.css / includes/cardgame-footer.php) に
     全面置換したため、ここでは扱わない（SWELL 既定 .l-footer は footer.css で非表示）。
   - 機能・マークアップ・JS は一切変更しない（見た目のみ）。
   ============================================================ */

/* ===== ヘッダー用トークン（正本 :root と同値） ===== */
:root {
    --cgh-sumi:   #15151c;
    --cgh-sumi70: rgba(21,21,28,.62);
    --cgh-paper:  #f7f5ef;
    --cgh-glass:  rgba(247,245,239,.9);
    --cgh-panel:  #ffffff;
    --cgh-rule:   rgba(21,21,28,.14);
    --cgh-neon:   #ff2d6f;
    --cgh-disp:   "Zen Antique", "Yu Mincho", "YuMincho", serif;
    --cgh-num:    "Oswald", "Zen Kaku Gothic New", sans-serif;
}

/* ===== ヘッダー全体：紙地の半透明 + blur + 墨の下辺罫 ===== */
#header.l-header,
.l-header {
    background: var(--cgh-glass) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--cgh-rule) !important;
    box-shadow: none !important;
    --color_header_bg: transparent;
    --color_header_text: var(--cgh-sumi);
}

/* 内側ラッパは透過させ、上の紙地を見せる */
.l-header__inner,
.l-header__barInner,
.l-header__inner.l-container,
.l-header__barInner.l-container {
    background: transparent !important;
}

/* 上部バー（SWELL 既定は teal 塗り）：淡い紙ガラスに */
.l-header__bar {
    background: rgba(247,245,239,.72) !important;
    color: var(--cgh-sumi70) !important;
    border-bottom: 1px solid var(--cgh-rule) !important;
    box-shadow: none !important;
}
.l-header__bar .c-catchphrase { color: var(--cgh-sumi70) !important; }

/* ===== RSS アイコン撤去 ===== */
.l-header .c-iconList__item.-rss { display: none !important; }

/* ===== ロゴ：明朝テキスト + 「5 SHOPS」バッジ ===== */
.l-header__logo .c-headLogo.-txt .c-headLogo__link,
.l-header__logo .c-headLogo.-txt a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--cgh-disp) !important;
    font-weight: 400 !important;
    font-size: 21px !important;
    letter-spacing: .04em;
    color: var(--cgh-sumi) !important;
    -webkit-text-fill-color: var(--cgh-sumi);
    background: none !important;
}
/* 「5 SHOPS」バッジ（正本の .logo span） */
.l-header__logo .c-headLogo.-txt .c-headLogo__link::after {
    content: "5 SHOPS";
    font-family: var(--cgh-num);
    font-size: 10px;
    letter-spacing: .16em;
    font-weight: 600;
    color: var(--cgh-sumi);
    border: 1.5px solid var(--cgh-sumi);
    border-radius: 2px;
    padding: 2px 6px;
    transform: translateY(-1px);
    white-space: nowrap;
}
.l-header__logo .c-headLogo.-txt .c-headLogo__link:hover { color: var(--cgh-sumi) !important; -webkit-text-fill-color: var(--cgh-sumi); }
.l-header__logo .c-catchphrase { color: var(--cgh-sumi70) !important; }
.l-header__logo .c-headLogo:not(.-txt) img { filter: none; }

/* ===== グローバルナビ：墨70 → hover/current で墨、ネオンの下線 ===== */
.l-header__gnav .c-gnav > li > a,
.l-header__gnav .c-gnav > li > a .ttl,
.c-gnavWrap .c-gnav > li > a,
.c-gnavWrap .c-gnav > li > a .ttl {
    color: var(--cgh-sumi70) !important;
    font-weight: 500;
}
.l-header__gnav .c-gnav > li:hover > a,
.l-header__gnav .c-gnav > li:hover > a .ttl,
.l-header__gnav .c-gnav > li.-current > a,
.l-header__gnav .c-gnav > li.-current > a .ttl,
.c-gnavWrap .c-gnav > li:hover > a,
.c-gnavWrap .c-gnav > li:hover > a .ttl {
    color: var(--cgh-sumi) !important;
}
/* ホバー下線はネオン */
.l-header__gnav .c-gnav > li > a::after,
.c-gnavWrap .c-gnav > li > a::after {
    background: var(--cgh-neon) !important;
    height: 2px !important;
}

/* ドロップダウン（サブメニュー）：白パネル + 墨罫 */
.c-gnav .sub-menu {
    background: var(--cgh-panel) !important;
    color: var(--cgh-sumi70) !important;
    border: 1px solid var(--cgh-rule);
    box-shadow: 0 12px 30px rgba(21,21,28,.14);
}
.c-gnav .sub-menu a,
.c-gnav .sub-menu a .ttl { color: var(--cgh-sumi70) !important; }
.c-gnav .sub-menu a:hover,
.c-gnav .sub-menu a:hover .ttl { color: var(--cgh-sumi) !important; }

/* ===== アイコン（検索・ハンバーガー等）：墨、hover ネオン ===== */
.l-header .c-iconList__link,
.l-header .c-iconList__icon,
.l-header .c-iconBtn,
.l-header .c-iconBtn__icon,
.l-header__customBtn .c-iconBtn__icon,
.l-header__menuBtn .c-iconBtn__icon {
    color: var(--cgh-sumi) !important;
}
.l-header .c-iconList__link:hover,
.l-header .c-iconBtn:hover { color: var(--cgh-neon) !important; }

/* 検索トグルはピル形の淡いボタンに */
.l-header .c-iconList__item.-search .c-iconList__link {
    border: 1px solid var(--cgh-rule);
    border-radius: 999px;
    padding: 6px 12px !important;
    background: rgba(255,255,255,.6);
    transition: border-color .15s ease, background .15s ease;
}
.l-header .c-iconList__item.-search .c-iconList__link:hover {
    border-color: var(--cgh-sumi);
    background: var(--cgh-panel);
}

/* ===== モバイル SP ドロワー（#sp_menu）：紙地で清潔に ===== */
.p-spMenu { color: var(--cgh-sumi) !important; }
.p-spMenu__inner::before { background: var(--cgh-paper) !important; opacity: 1 !important; }
.p-spMenu__closeBtn .c-iconBtn__icon { color: var(--cgh-sumi) !important; }
.p-spMenu .c-widget__title.-spmenu {
    background: var(--cgh-panel) !important;
    color: var(--cgh-sumi) !important;
    border: 1px solid var(--cgh-rule);
}
.p-spMenu .c-spnav.c-listMenu a,
.p-spMenu .c-listMenu a {
    color: var(--cgh-sumi70) !important;
    border-bottom: 1px solid var(--cgh-rule) !important;
}
.p-spMenu .c-spnav.c-listMenu a:hover,
.p-spMenu .c-listMenu a:hover { color: var(--cgh-sumi) !important; }
.p-spMenu__overlay { background: var(--cgh-sumi) !important; opacity: .45 !important; }

/* 検索ドロワー（トグル表示）も紙地に */
.l-header .w-header,
.l-header .p-searchWrap,
.l-header .c-searchForm { color: var(--cgh-sumi); }
.l-header .c-searchForm__input,
.l-header input[type="search"] {
    background: var(--cgh-panel) !important;
    color: var(--cgh-sumi) !important;
    border: 1px solid var(--cgh-rule) !important;
    border-radius: 999px !important;
}
.l-header .c-searchForm__input::placeholder,
.l-header input[type="search"]::placeholder { color: rgba(21,21,28,.38) !important; }
.l-header .c-searchForm__input:focus,
.l-header input[type="search"]:focus {
    outline: none;
    border-color: var(--cgh-neon) !important;
    box-shadow: 0 0 0 3px rgba(255,45,111,.16) !important;
}