/* ========================================================== TokunagaFarm - Global Header & Footer (PC/Smartphone) 対象: cart.html / checkout.html / gift.html / index.html / product.html / thanks.html ※ このCSSをの一番最後に読み込むと最優先で反映されます ========================================================== */ :root { --bg: #0b0b0b; --panel: #0e0e0e; --line: #2a2a2a; --text: #e7e7e7; --muted: #bdbdbd; --gold: #f2c230; --gold-d: #bb8e00; --maxw: 1080px; } /* ================= Header 共通（構造差異を吸収） ================= */ body > header, .site-header { position: sticky !important; top: 0 !important; z-index: 1000 !important; background: var(--panel) !important; border-bottom: 1px solid var(--line) !important; color: var(--text) !important; margin: 0 !important; font-family: "Yu Mincho", "Hiragino Mincho ProN", "Sawarabi Mincho", serif !important; } body > header .header-inner, body > header .container, body > header .inner, .site-header .header-inner, .site-header .container, .site-header .inner { max-width: var(--maxw) !important; margin: 0 auto !important; padding: 14px 12px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; } /* Brand */ body > header .brand, .site-header .brand { display: flex !important; align-items: baseline !important; gap: 10px !important; } body > header .brand-main, .site-header .brand-main { color: var(--gold) !important; font-size: 26px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0.02em !important; } body > header .brand-sub, .site-header .brand-sub { color: #ddd !important; font-size: 14px !important; opacity: 0.95 !important; } /* Nav */ body > header nav, body > header .nav, .site-header nav, .site-header .nav { display: flex !important; align-items: center !important; gap: 18px !important; } body > header nav a, body > header .nav a, .site-header nav a, .site-header .nav a { color: var(--text) !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 8px !important; border-radius: 10px !important; font-weight: 600 !important; } body > header nav a:hover, body > header .nav a:hover, body > header nav a.active, body > header .nav a.active, .site-header nav a:hover, .site-header .nav a:hover, .site-header nav a.active, .site-header .nav a.active { color: var(--gold) !important; } /* Cart link（class差異に対応） */ body > header a.cart, body > header a.cart-link, .site-header a.cart, .site-header a.cart-link { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 10px !important; border: 1px solid transparent !important; } body > header a.cart:hover, body > header a.cart-link:hover, .site-header a.cart:hover, .site-header a.cart-link:hover { border-color: var(--line) !important; } body > header a.cart svg, body > header a.cart-link svg, .site-header a.cart svg, .site-header a.cart-link svg { width: 22px !important; height: 22px !important; display: block !important; color: var(--text) !important; } #cart-count { font-weight: 800 !important; min-width: 1ch; text-align: right; color: var(--text) !important; } /* ================= Footer 共通 ================= */ body > footer, body > .footer, .site-header ~ .footer { color: var(--muted) !important; background: transparent !important; border-top: 1px solid var(--line) !important; text-align: center !important; padding: 24px 12px !important; margin-top: 20px !important; font-family: "Yu Mincho", "Hiragino Mincho ProN", "Sawarabi Mincho", serif !important; } /* ================= Smartphone（アイコンナビ） ================= */ @media (max-width: 640px) { /* ブランド縮尺 */ body > header .brand-main, .site-header .brand-main { font-size: 24px !important; } body > header .brand-sub, .site-header .brand-sub { font-size: 13px !important; } body > header nav, body > header .nav, .site-header nav, .site-header .nav { gap: 16px !important; } /* テキストを隠してアイコン化 */ body > header nav a, body > header .nav a, .site-header nav a, .site-header .nav a { font-size: 0 !important; padding: 0 !important; width: 36px !important; height: 36px !important; justify-content: center !important; position: relative !important; } body > header nav a::before, body > header .nav a::before, .site-header nav a::before, .site-header .nav a::before { content: "" !important; display: inline-block !important; width: 26px !important; height: 26px !important; background: currentColor !important; -webkit-mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; mask-size: contain !important; mask-repeat: no-repeat !important; opacity: 0.95 !important; } /* 商品（トップ/一覧） */ body > header a[href="/"]::before, body > header a[href="/index.html"]::before, body > header a[href*="products"]::before, .site-header a[href="/"]::before, .site-header a[href="/index.html"]::before, .site-header a[href*="products"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,') !important; mask-image: url('data:image/svg+xml;utf8,') !important; } /* ギフト */ body > header a[href*="gift"]::before, .site-header a[href*="gift"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,') !important; mask-image: url('data:image/svg+xml;utf8,') !important; } /* こだわり */ body > header a[href*="kodawari"]::before, .site-header a[href*="kodawari"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,') !important; mask-image: url('data:image/svg+xml;utf8,') !important; } /* 会社情報 */ body > header a[href*="company"]::before, body > header a[href*="#company"]::before, .site-header a[href*="company"]::before, .site-header a[href*="#company"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,') !important; mask-image: url('data:image/svg+xml;utf8,') !important; } /* カート（既存SVG + バッジ） */ body > header a.cart, body > header a.cart-link, .site-header a.cart, .site-header a.cart-link { width: 36px !important; height: 36px !important; padding: 0 !important; justify-content: center !important; position: relative !important; } body > header a.cart svg, body > header a.cart-link svg, .site-header a.cart svg, .site-header a.cart-link svg { width: 24px !important; height: 24px !important; } body > header a.cart #cart-count, body > header a.cart-link #cart-count, .site-header a.cart #cart-count, .site-header a.cart-link #cart-count { position: absolute !important; top: -6px !important; right: -7px !important; background: var(--gold) !important; color: #1a1200 !important; border-radius: 10px !important; font-size: 12px !important; padding: 0 5px !important; line-height: 18px !important; height: 18px !important; box-shadow: 0 0 0 1px var(--gold-d) inset !important; } } /* ============ タブレット密度調整 ============ */ @media (min-width: 641px) and (max-width: 980px) { body > header .header-inner, body > header .container, body > header .inner, .site-header .header-inner, .site-header .container, .site-header .inner { padding: 12px !important; } body > header .brand-main, .site-header .brand-main { font-size: 24px !important; } body > header nav, body > header .nav, .site-header nav, .site-header .nav { gap: 16px !important; } }