/* ============================================================
   サイトヘッダー 着せ替え（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,
#fix_header.l-fixHeader,
.l-fixHeader {
    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,
.l-fixHeader__inner,
.l-fixHeader__inner.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,
.l-fixHeader__logo .c-headLogo.-txt .c-headLogo__link,
.l-fixHeader__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,
.l-fixHeader__logo .c-headLogo.-txt .c-headLogo__link::after {
    content: var(--cardgame-shop-badge, "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,
.l-fixHeader__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,
.l-fixHeader__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;
}

/* ============================================================
   2026-08-25 Card Value compact navigation override
   既存CSSを残したまま末尾で上書きする、即時ロールバック可能な共通契約。
   通常・検索・404を分岐しないため、素のSWELLへ戻るページを作らない。
   ============================================================ */
:root{
    --cgh-ink:#111720;--cgh-ink-2:#4a5461;--cgh-ink-3:#8b95a3;
    --cgh-soft:#f4f6f9;--cgh-line:#d3d9e2;--cgh-line-2:#ebeef3;
    --cgh-accent:#16325c;
    --cgh-sans:"IBM Plex Sans JP","Zen Kaku Gothic New",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --cgh-mono:"IBM Plex Mono",ui-monospace,monospace;
}
#header.l-header,.l-header{
    position:sticky!important;z-index:1000!important;top:0!important;
    background:rgba(255,255,255,.96)!important;color:var(--cgh-ink)!important;
    border-bottom:1px solid var(--cgh-line)!important;box-shadow:none!important;
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    --color_header_bg:transparent;--color_header_text:var(--cgh-ink);
    font-family:var(--cgh-sans)!important;
}
body.admin-bar #header.l-header,body.admin-bar .l-header{top:32px!important}
#fix_header.l-fixHeader,.l-fixHeader{display:none!important}
.l-header__bar{display:none!important}
.l-header__inner,.l-header__inner.l-container,.l-header__barInner,.l-header__barInner.l-container{
    width:min(1080px,calc(100% - 40px))!important;height:60px!important;min-height:60px!important;margin-inline:auto!important;
    padding:0!important;background:transparent!important;
}
.l-header__logo{height:60px!important;padding-top:0!important;padding-bottom:0!important}
.l-header__logo .c-headLogo.-txt .c-headLogo__link,.l-header__logo .c-headLogo.-txt a{
    display:inline-flex;align-items:center;gap:8px;color:var(--cgh-ink)!important;
    -webkit-text-fill-color:var(--cgh-ink);background:none!important;
    font-family:var(--cgh-sans)!important;font-size:17px!important;font-weight:700!important;
    letter-spacing:-.035em!important;line-height:1.25!important;
}
.l-header__logo .c-headLogo.-txt .c-headLogo__link::after{
    padding:2px 6px;color:var(--cgh-ink-2);border:1px solid var(--cgh-line);border-radius:999px;
    content:var(--cardgame-shop-badge,"5 SHOPS");font-family:var(--cgh-mono);font-size:9px;font-weight:600;
    letter-spacing:.04em;line-height:1.4;white-space:nowrap;
}
.l-header__gnav .c-gnav,.c-gnavWrap .c-gnav{display:flex;align-items:stretch;gap:18px}
.l-header__gnav,.l-header__gnav .c-gnav,.c-gnavWrap,.c-gnavWrap .c-gnav{height:60px!important;min-height:60px!important}
.l-header__gnav .c-gnav>li>a,.c-gnavWrap .c-gnav>li>a{
    min-height:60px;padding:0!important;color:var(--cgh-ink-2)!important;
    font-size:13px!important;font-weight:500!important;line-height:60px!important;white-space:nowrap;
}
.l-header__gnav .c-gnav>li>a .ttl,.c-gnavWrap .c-gnav>li>a .ttl{color:inherit!important}
.l-header__gnav .c-gnav>li:hover>a,.l-header__gnav .c-gnav>li.-current>a,.c-gnavWrap .c-gnav>li:hover>a{color:var(--cgh-accent)!important}
.l-header__gnav .c-gnav>li>a::after,.c-gnavWrap .c-gnav>li>a::after{height:2px!important;background:var(--cgh-accent)!important}
.c-gnav .sub-menu{
    min-width:230px;padding:6px;background:#fff!important;color:var(--cgh-ink-2)!important;
    border:1px solid var(--cgh-line)!important;box-shadow:0 16px 40px rgba(17,23,32,.16)!important;
}
.c-gnav .sub-menu a{padding:10px 12px!important;color:var(--cgh-ink-2)!important;border-bottom:1px solid var(--cgh-line-2);font-size:13px!important}
.c-gnav .sub-menu li:last-child>a{border-bottom:0}
.c-gnav .sub-menu a:hover{color:var(--cgh-accent)!important;background:var(--cgh-soft)!important}
.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-ink)!important}
.l-header .c-iconList__item.-search .c-iconList__link{padding:7px 11px!important;background:#fff;border:1px solid var(--cgh-line);border-radius:999px}
.l-header .c-searchForm__input,.l-header input[type="search"]{background:#fff!important;color:var(--cgh-ink)!important;border:1px solid var(--cgh-line)!important;border-radius:999px!important}
.l-header .c-searchForm__input:focus,.l-header input[type="search"]:focus{outline:2px solid rgba(22,50,92,.18);border-color:var(--cgh-accent)!important;box-shadow:none!important}

.p-spMenu{color:var(--cgh-ink)!important;font-family:var(--cgh-sans)!important}
.p-spMenu__inner{
    display:flex!important;flex-direction:column;height:100vh!important;height:100dvh!important;min-height:0!important;
    overflow:hidden!important;background:#fff!important;overscroll-behavior:contain
}
.p-spMenu__inner::before{background:#fff!important;opacity:1!important}
.p-spMenu__closeBtn{flex:0 0 48px!important}
.p-spMenu__body{
    flex:1 1 auto!important;height:auto!important;min-height:0!important;max-height:none!important;
    overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;touch-action:pan-y;
    overscroll-behavior-y:contain;padding-bottom:calc(28px + env(safe-area-inset-bottom))!important;background:#fff!important
}
/*
 * The custom footer is rendered after #body_wrap and both normally use z-index:1.
 * On short 404/search pages that later sibling could therefore cover the bottom
 * of SWELL's fixed drawer. Raise the wrapper only while the drawer is open.
 */
html[data-spmenu="opened"] #body_wrap{z-index:2!important}
.p-spMenu__closeBtn .c-iconBtn__icon{color:var(--cgh-ink)!important}
.p-spMenu .c-widget__title.-spmenu{
    margin-bottom:8px!important;padding:12px 14px!important;background:#fff!important;color:var(--cgh-ink)!important;
    border:0!important;border-bottom:2px solid var(--cgh-ink)!important;font-size:12px!important;letter-spacing:.12em!important;
}
.p-spMenu .c-spnav.c-listMenu>li>a,.p-spMenu .c-listMenu>li>a{
    display:flex;align-items:center;min-height:48px;padding:11px 14px!important;color:var(--cgh-ink)!important;
    background:#fff;border-bottom:1px solid var(--cgh-line-2)!important;font-size:14px;font-weight:600;
}
.p-spMenu .c-spnav.c-listMenu>li>a:hover,.p-spMenu .c-listMenu>li>a:hover{color:var(--cgh-accent)!important;background:var(--cgh-soft)!important}
.p-spMenu__overlay{background:var(--cgh-ink)!important;opacity:.52!important}
.p-spMenu .cg-spnav-section{margin:18px 12px 0!important;padding:0!important;border:0!important;list-style:none!important}
.p-spMenu .cg-spnav-section+.cg-spnav-section{margin-top:16px!important}
.cg-spnav-heading,.cg-spnav-sites summary{
    display:flex;align-items:center;justify-content:space-between;padding:0 2px 8px;color:var(--cgh-ink-3);
    font-size:10px;font-weight:700;letter-spacing:.12em;line-height:1.3;list-style:none;cursor:pointer;
}
.cg-spnav-sites summary::-webkit-details-marker{display:none}
.cg-spnav-sites summary::after{width:6px;height:6px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);content:""}
.cg-spnav-sites details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.cg-spnav-grid{display:grid;grid-template-columns:1fr;gap:0;overflow:hidden;background:#fff;border:1px solid var(--cgh-line);border-radius:11px}
.p-spMenu .cg-spnav-grid>a{
    display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:9px 12px!important;color:var(--cgh-ink)!important;
    background:#fff!important;border:0!important;border-bottom:1px solid var(--cgh-line-2)!important;border-radius:0;
    font-size:12px;font-weight:600;line-height:1.35;
}
.p-spMenu .cg-spnav-grid>a:last-child{border-bottom:0!important}
.p-spMenu .cg-spnav-grid>a::after{margin-left:12px;color:var(--cgh-ink-3);content:"›";font-family:var(--cgh-mono);font-size:16px;font-weight:500}
.p-spMenu .cg-spnav-grid>a:hover{color:var(--cgh-accent)!important;background:var(--cgh-soft)!important}
.cg-spnav-social-links{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.p-spMenu .cg-spnav-social-links>a{
    display:flex;gap:8px;align-items:center;justify-content:center;min-height:44px;padding:9px 12px!important;
    background:var(--cgh-soft);border-radius:9px;color:var(--cgh-ink)!important;font-size:12px;font-weight:700;
}
.cg-spnav-social-links svg{width:18px;height:18px}
.p-spMenu .cg-spnav-social-links .cg-spnav-youtube{color:#b91c1c!important;background:#fdf2f2}
@media(max-width:959px){
    #header.l-header,.l-header{min-height:60px!important}
    .l-header__inner,.l-header__inner.l-container{width:min(100% - 28px,1080px)!important;min-height:60px!important}
    .l-header__logo .c-headLogo.-txt .c-headLogo__link::after{display:none}
}
@media(max-width:782px){body.admin-bar #header.l-header,body.admin-bar .l-header{top:46px!important}}
@media(max-width:420px){.l-header__logo .c-headLogo.-txt .c-headLogo__link{font-size:15px!important}}