/* ============================================================================
   .store ウェブナラ — WEB先案内 直営マーケットプレイス
   2026-05-29 リニューアル版
   - 親 listinghive + HivePress + WooCommerce にブランド適用
   - !important 禁止、specificity と body.wn-store プレフィックスで上書き
   ============================================================================ */

/* Body baseline */
body.wn-store {
    font-family: var(--ff-sans);
    color: var(--c-text);
    background: var(--c-paper);
    line-height: 1.85;
}
body.wn-store h1,
body.wn-store h2,
body.wn-store h3 {
    color: var(--c-ink);
    line-height: 1.35;
    letter-spacing: -0.005em;
    font-weight: 800;
}

/* ----------------------------------------------------------------------------
   Section primitives（home コンテンツで使用）
   ---------------------------------------------------------------------------- */
.wn-section {
    padding-block: var(--section-y);
}
.wn-section + .wn-section {
    padding-top: 0;
}
.wn-section--band {
    background: var(--c-mist);
}
.wn-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
/* ユーザー指定値: navigator token (--container / --gutter) に完全整合 */
.wn-wrap-narrow {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.wn-section-eyebrow {
    display: inline-block;
    font-size: var(--fs-xs);
    letter-spacing: .12em;
    color: var(--c-accent);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: .75rem;
}
.wn-section-title {
    font-size: var(--fs-h2);
    margin: 0 0 1rem;
}
.wn-section-lede {
    font-size: var(--fs-lede);
    color: var(--c-text-mute);
    margin: 0 0 2rem;
    line-height: 1.85;
    max-width: var(--measure);
}

/* ----------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------------- */
.wn-store-hero {
    padding: clamp(3rem, 4vw, 5rem) 0 clamp(2rem, 3vw, 3.5rem);
    background: linear-gradient(180deg, var(--c-mist) 0%, var(--c-paper) 100%);
}
.wn-store-hero__eyebrow {
    color: var(--c-accent);
    font-size: var(--fs-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 1rem;
}
.wn-store-hero__title {
    font-size: var(--fs-h1);
    margin: 0 0 1rem;
    color: var(--c-ink);
}
.wn-store-hero__lede {
    font-size: var(--fs-lede);
    color: var(--c-text-mute);
    max-width: var(--measure);
    margin: 0 0 1.5rem;
}
.wn-status-bar {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: .75rem 1.1rem;
    background: var(--c-accent-soft);
    border: 1px solid var(--c-accent);
    border-radius: var(--r);
    font-size: var(--fs-sm);
    color: var(--c-ink);
    margin: 1.5rem 0;
}
.wn-store-hero__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* ----------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------------- */
.wn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    padding: .85rem 1.6rem;
    border-radius: var(--r-sm);
    font-weight: 700;
    font-size: var(--fs-base);
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition:
        background var(--dur) var(--ease),
        color var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        transform var(--dur-fast) var(--ease);
    line-height: 1.4;
}
.wn-btn--primary {
    background: var(--c-accent);
    color: #fff;
    border-color: var(--c-accent);
}
.wn-btn--primary:hover {
    background: var(--c-accent-deep);
    border-color: var(--c-accent-deep);
    transform: translateY(-1px);
}
.wn-btn--ghost {
    background: transparent;
    color: var(--c-ink);
    border-color: var(--c-border);
}
.wn-btn--ghost:hover {
    background: var(--c-mist-2);
    border-color: var(--c-ink);
}
/* .com/.blog 同型: navy/黒塗りボタン (ヘッダー CTA「無料で見積もりを相談する →」用)
   listinghive 親の a { color: var(--c-ink) } が specificity 同等で先に勝ち
   color が navy on navy で不可視になっていたため、body.wn-store + a.wn-btn--dark 三重指定で勝つ。
   テキスト span も white を保証する。 */
body.wn-store a.wn-btn--dark,
body.wn-store .wn-btn--dark,
.wn-btn--dark {
    background: var(--c-brand-navy, #1B2547);
    color: #fff;
    border-color: var(--c-brand-navy, #1B2547);
}
body.wn-store .wn-btn--dark span,
.wn-btn--dark span {
    color: inherit;
}
body.wn-store a.wn-btn--dark:hover,
body.wn-store .wn-btn--dark:hover,
.wn-btn--dark:hover {
    background: var(--c-brand-navy-deep, #131B36);
    color: #fff;
    border-color: var(--c-brand-navy-deep, #131B36);
    transform: translateY(-1px);
}

/* ----------------------------------------------------------------------------
   Trust ribbon
   ---------------------------------------------------------------------------- */
.wn-store-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.wn-store-trust__item {
    padding: 1rem 1.25rem;
    background: var(--c-paper);
    border: 1px solid var(--c-border);
    border-radius: var(--r);
    font-size: var(--fs-sm);
    line-height: 1.7;
}
.wn-store-trust__item strong {
    display: block;
    color: var(--c-ink);
    font-size: var(--fs-base);
    margin-bottom: .35rem;
}

/* ----------------------------------------------------------------------------
   Final CTA — ユーザー指定値
   navy → blue 3 段グラデ + 角丸 28px + ソフトシャドウ
   ---------------------------------------------------------------------------- */
.wn-store-cta-final {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: clamp(2rem, 3vw, 3rem) clamp(1.5rem, 4vw, 3rem);
    max-width: 1080px;
    margin: 0 auto;
    color: #fff;
    background: linear-gradient(125deg, #1B2547 0%, #3D5BBF 45%, #618BD9 100%);
    box-shadow: 0 36px 70px -36px rgba(27, 37, 71, .55);
    text-align: center;
}
/* body.wn-store h2 と同一 specificity でも順序勝ちさせるため body プレフィックス強化 */
body.wn-store .wn-store-cta-final h2,
.wn-store-cta-final > h2,
.wn-store-cta-final h2.wn-store-cta-final__title {
    color: #fff;
    margin: 0 0 1rem;
    font-size: var(--fs-h2);
}
body.wn-store .wn-store-cta-final p {
    color: rgba(255, 255, 255, .9);
    max-width: var(--measure);
    margin: 0 auto 1.5rem;
}

/* ============================================================================
   HivePress UI のブランド適用
   ============================================================================ */

/* Listing カード */
body.wn-store .hp-listing,
body.wn-store .hp-listings__item {
    padding: 1rem;
    background: var(--c-paper);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
body.wn-store .hp-listing:hover,
body.wn-store .hp-listings__item:hover {
    border-color: var(--c-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
body.wn-store .hp-listing__title,
body.wn-store .hp-listing__title a {
    color: var(--c-ink);
    font-weight: 700;
    text-decoration: none;
}
body.wn-store .hp-listing__title a:hover {
    color: var(--c-accent-deep);
}
body.wn-store .hp-listing__details,
body.wn-store .hp-listing__attribute {
    color: var(--c-text-mute);
    font-size: var(--fs-sm);
}

/* HivePress 検索バー */
body.wn-store .hp-search-form,
body.wn-store .hp-form--listing-search {
    background: var(--c-mist);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 1rem;
}
body.wn-store .hp-search-form input[type="text"],
body.wn-store .hp-search-form input[type="search"],
body.wn-store .hp-form__field {
    background: var(--c-paper);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    color: var(--c-text);
    padding: .7rem .9rem;
    font-family: var(--ff-sans);
}
body.wn-store .hp-search-form input[type="text"]:focus,
body.wn-store .hp-search-form input[type="search"]:focus {
    border-color: var(--c-accent);
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* HivePress ボタン */
body.wn-store .hp-button,
body.wn-store .hp-form__button,
body.wn-store button.hp-button--primary {
    background: var(--c-accent);
    color: #fff;
    border: 2px solid var(--c-accent);
    border-radius: var(--r-sm);
    padding: .75rem 1.5rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
body.wn-store .hp-button:hover,
body.wn-store .hp-form__button:hover {
    background: var(--c-accent-deep);
    transform: translateY(-1px);
}

/* HivePress バッジ */
body.wn-store .hp-listing__category,
body.wn-store .hp-badge {
    background: var(--c-accent-soft);
    color: var(--c-accent-deep);
    border-radius: var(--r-xs);
    padding: .15em .6em;
    font-size: var(--fs-xs);
    font-weight: 700;
}

/* ============================================================================
   WooCommerce UI のブランド適用
   ============================================================================ */

/* 商品カード */
body.wn-store ul.products li.product,
body.wn-store .woocommerce ul.products li.product {
    background: var(--c-paper);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 1rem;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.wn-store ul.products li.product:hover {
    border-color: var(--c-accent);
    box-shadow: var(--shadow-md);
}
body.wn-store .woocommerce .price,
body.wn-store .woocommerce span.amount,
body.wn-store .woocommerce-Price-amount {
    color: var(--c-accent-deep);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* WooCommerce ボタン */
body.wn-store .woocommerce a.button,
body.wn-store .woocommerce button.button,
body.wn-store .woocommerce input.button,
body.wn-store .woocommerce #respond input#submit,
body.wn-store .woocommerce a.button.alt,
body.wn-store .woocommerce button.button.alt {
    background: var(--c-accent);
    color: #fff;
    border-radius: var(--r-sm);
    font-weight: 700;
    padding: .75rem 1.5rem;
    border: 2px solid var(--c-accent);
    transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
body.wn-store .woocommerce a.button:hover,
body.wn-store .woocommerce button.button:hover {
    background: var(--c-accent-deep);
    border-color: var(--c-accent-deep);
    transform: translateY(-1px);
}

/* カート・チェックアウト */
body.wn-store .woocommerce-cart-form,
body.wn-store .woocommerce-checkout {
    background: var(--c-paper);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 1.5rem;
}
body.wn-store .cart_totals,
body.wn-store .woocommerce-checkout-review-order {
    background: var(--c-mist);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 1.5rem;
}

/* フォーム入力 */
body.wn-store .woocommerce form .form-row input.input-text,
body.wn-store .woocommerce form .form-row textarea {
    background: var(--c-mist);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    color: var(--c-text);
    padding: .7rem .9rem;
}
body.wn-store .woocommerce form .form-row input.input-text:focus,
body.wn-store .woocommerce form .form-row textarea:focus {
    border-color: var(--c-accent);
    background: var(--c-paper);
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* メッセージ */
body.wn-store .woocommerce-message,
body.wn-store .woocommerce-info {
    background: var(--c-info-bg);
    border-color: var(--c-info);
    color: var(--c-info);
    border-radius: var(--r);
}
body.wn-store .woocommerce-error {
    background: var(--c-danger-bg);
    border-color: var(--c-danger);
    color: var(--c-danger);
    border-radius: var(--r);
}

/* ============================================================================
   listinghive 親テーマのナビ・ヘッダー要素ブランド適用
   ============================================================================ */

/* メインヘッダー */
body.wn-store .site-header,
body.wn-store .lh-header,
body.wn-store header.site-header {
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-border);
}
body.wn-store .site-header a,
body.wn-store .lh-header a,
body.wn-store header.site-header a {
    color: var(--c-ink);
}
body.wn-store .site-header a:hover {
    color: var(--c-accent);
}

/* サイトタイトル — listinghive の様々なクラス命名を吸収 */
body.wn-store .site-title,
body.wn-store .site-title a,
body.wn-store .site-branding .site-title,
body.wn-store .site-branding .site-title a,
body.wn-store h1.site-title,
body.wn-store h1.site-title a,
body.wn-store p.site-title,
body.wn-store p.site-title a {
    color: var(--c-ink);
    font-weight: 800;
    text-decoration: none;
}
body.wn-store .site-description {
    color: var(--c-text-mute);
}

/* ナビゲーション項目 — listinghive のデフォルト色（金/黄）を抑え、ブランドトーン適用 */
body.wn-store .site-header .menu a,
body.wn-store .site-header nav a,
body.wn-store .main-navigation a {
    color: var(--c-ink);
    font-weight: 600;
    transition: color var(--dur-fast) var(--ease);
}
body.wn-store .site-header .menu a:hover,
body.wn-store .site-header nav a:hover,
body.wn-store .main-navigation a:hover,
body.wn-store .site-header .menu li.current-menu-item > a,
body.wn-store .main-navigation li.current-menu-item > a {
    color: var(--c-accent);
}

/* ============================================================================
   listinghive デフォルトホーム要素を非表示
   （webnala 本来のホームに戻したので、空 listing 等は隠す）
   ============================================================================ */
body.home.wn-store .hp-listings-block:empty,
body.home.wn-store .home-listings-section:empty {
    display: none;
}

/* listinghive 親由来の 重複 floating chip（「無料診断！」青チップ）を非表示
   navigator-like の右側 rail は #cta-rail (navigator 構造) で実装済み */
body.wn-store .hp-favorites-toggle,
body.wn-store .hp-favorites,
body.wn-store .floating-cta,
body.wn-store .vfb-popup,
body.wn-store .vegas-overlay,
body.wn-store [class*="fixed-right"],
body.wn-store [id*="floating-banner"] {
    display: none;
}

/* HivePress が wp_nav_menu_items に注入する両端の「webnavi」アカウントメニュー LI を非表示
   サーバ側で mu-plugins/wn-store-header-cleanup.php が除去するが、二重防御として CSS 側でも隠す。
   ※ !important は使わない — wn-store + theme_location 由来の class で specificity を稼ぐ */
body.wn-store .wn-primary-menu > li.menu-item--user-account,
body.wn-store .wn-primary-menu > li.menu-item--user-login {
    display: none;
}

/* mu-plugin が消し損ねた古い .wn-cta-rail__chip 残骸も念のため抑止 */
body.wn-store .wn-cta-rail {
    display: none;
}

/* ============================================================================
   footer 外部リンク矢印 — emoji ↗ を SVG ライクに統一
   ============================================================================ */
.site-footer__col-links a[target="_blank"]::after,
.site-footer__col-links a[href^="https://web-navigator."]::after {
    content: "";
    display: inline-block;
    width: .65em;
    height: .65em;
    margin-left: .35em;
    vertical-align: -.05em;
    background-color: var(--c-accent);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg>') center/contain no-repeat;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg>') center/contain no-repeat;
    transition: transform var(--dur-fast) var(--ease);
}
.site-footer__col-links a:hover::after {
    transform: translate(2px, -2px);
}
/* footer.php 内のテキスト ↗ を視覚的に削除（::after で代替表示） */
.site-footer__col-links a > span[aria-hidden="true"] {
    display: none;
}

/* ============================================================================
   navigator 流 footer-signal CTA バンド
   ============================================================================ */
.footer-signal {
    /* ユーザー指定値: bg を --c-mist (#F6F9FE 冷たい青白) に */
    background: var(--c-mist);
    color: var(--c-ink);
    padding: clamp(2.5rem, 4vw, 4rem) 0;
}
.footer-signal__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
}
.footer-signal__eyebrow {
    display: inline-block;
    font-size: var(--fs-xs);
    letter-spacing: .14em;
    color: var(--c-accent);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: .75rem;
}
/* bg が --c-mist (薄白) に変わったため、文字色を navy 系に戻す。
   body.wn-store + h2 タグまで含めた specificity で listinghive 親の h2 color を上書き。 */
body.wn-store h2.footer-signal__title,
body.wn-store .footer-signal .footer-signal__title,
.footer-signal__title {
    font-size: var(--fs-h2);
    margin: 0 0 .75rem;
    color: var(--c-ink);
    line-height: 1.35;
    font-weight: 800;
}
body.wn-store .footer-signal__body,
.footer-signal__body {
    color: var(--c-text-mute, rgba(27, 37, 71, .72));
    margin: 0;
    line-height: 1.85;
}
body.wn-store .footer-signal__eyebrow,
.footer-signal__eyebrow {
    /* 薄白 bg 上でもオレンジ accent はそのまま映える */
    color: var(--c-accent, #FF6F3D);
}
.footer-signal__actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: stretch;
}
.footer-signal__actions .wn-btn {
    justify-content: center;
}
.footer-signal__actions .wn-btn--ghost {
    /* 薄白 bg 上のゴーストボタン: navy 枠 + navy 文字 */
    background: transparent;
    color: var(--c-ink);
    border-color: var(--c-border);
}
.footer-signal__actions .wn-btn--ghost:hover {
    background: var(--c-mist-2);
    border-color: var(--c-ink);
}
@media (max-width: 800px) {
    .footer-signal__inner {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   navigator 流 site-footer (4 列 + brand)
   .com の共有 CSS を参考に、navy 上→下グラデで深みを出す。
   listinghive Customizer が inline <style> で .site-footer { #2B2B2B } を注入してくるため、
   body.wn-store + 要素タグ footer まで含めた specificity で勝つ（!important は使わない — メモリ:css_no_important 厳守）。
   border-top 0 / padding-bottom 0 で wn-network-footer と隙間なく連続させる。
   ============================================================================ */
body.wn-store footer.site-footer,
body.wn-store .site-footer {
    background: linear-gradient(180deg, #1B2547 0%, #131B36 100%);
    color: rgba(255, 255, 255, .85);
    border-top: 0;
    padding-bottom: 0;
}
/* .com (公式サイト) の navigator footer 実装に合わせ、grid 比率を `1fr 2.5fr` / gap 3rem に統一。
   モバイル (< 900px) は縦並びにフォールバック。
   body.wn-store の specificity で listinghive 親に勝つため !important 不使用。 */
.site-footer__inner {
    /* ユーザー指定値: padding clamp(3rem, 2.4rem + 4vw, 5rem) var(--gutter)
       上下 = 48-80px の流動値、左右 = navigator gutter 変数 (.store fallback 2rem)。 */
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(3rem, 2.4rem + 4vw, 5rem) var(--gutter, 2rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 900px) {
    body.wn-store .site-footer__inner,
    .site-footer__inner {
        grid-template-columns: 1fr 2.5fr;
        gap: 3rem;
    }
}
/* .com 共有 CSS 移植: ブランド領域の文字色を invariant の白に固定 */
body.wn-store .site-footer__name,
body.wn-store .site-footer__brand .site-footer__logo,
.site-footer__name,
.site-footer__brand .site-footer__logo {
    color: #FFFFFF;
}
.site-footer__brand .wn-brand {
    color: #fff;
}
.site-footer__brand .wn-brand__name {
    color: #fff;
    font-size: var(--fs-lede);
}
.site-footer__brand .wn-brand__mark {
    background: rgba(255, 255, 255, .12);
    color: var(--c-accent);
}
.site-footer__desc {
    /* navigator .blog 実測基準: fz 14.4px / color rgba(255,255,255,.68) / 1 行収まる max-width
       Numeric Auditor V2 で 1 行 (h=26.6px) 化が残課題のため、max-width を拡張して 1 行化。 */
    margin: 1rem 0 1.5rem;
    color: rgba(255, 255, 255, .68);
    font-size: 14.4px;
    line-height: 1.85;
    max-width: 42ch;
}
.site-footer__sns {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    align-items: flex-start;
}
/* .com (公式サイト) の navigator footer 実装と完全一致:
   SNS ピル (coconala / webnala) は 160×40 / radius 22 / padding 0 で固定。
   :has() でワードマーク SVG を持つ link のみに適用し、その他のテキスト link は影響しない。 */
body.wn-store .site-footer__sns-link:has(.site-footer__sns-wordmark),
.site-footer__sns-link:has(.site-footer__sns-wordmark) {
    flex: 0 0 auto;
    width: 160px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 22px;
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.site-footer__sns-link:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
}
/* .com 共有 CSS: wordmark SVG はピル内で高さ 22px に固定、幅は auto でアスペクト維持 */
body.wn-store .site-footer__sns-link .site-footer__sns-wordmark,
.site-footer__sns-link .site-footer__sns-wordmark {
    width: auto;
    height: 22px;
    display: block;
}

.site-footer__cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2vw, 2rem);
}
.site-footer__col {
    /* details element */
}
/* navigator .blog 実測基準: 列見出し fz 13px / fw 800 / padding 0 0 16px / border-bottom 1px rgba(.14)
   ※前回 fz=15 / fw=700 / border-top=#FED800 で当てていたが、再計測で .blog は黄色見出しに上線ではなく
   見出し下端の白系細ボーダーで段組を区切る方式と判明したため巻き戻し。 */
body.wn-store .site-footer__col-title,
.site-footer__col-title {
    display: block;
    margin: 0 0 1rem;
    padding: 0 0 16px;
    color: var(--c-yellow, #FED800);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    cursor: default;
    list-style: none;
}
.site-footer__col-title::-webkit-details-marker { display: none; }
.site-footer__col-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
/* navigator .blog 実測基準: a fz 13.12px / display inline-block / padding 2.4px 0 / line-height ~1.55
   inline-block + padding が長リンクの 1 行収まりを担保する。
   さらに white-space: nowrap で「WordPress 復旧サービス↗」等の 2 行折返しを抑止。
   超狭幅 (max-width 380px) のみテキスト wrap を許容して横スクロール暴発を防ぐ。 */
body.wn-store .site-footer__col-links a,
.site-footer__col-links a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    font-size: 13.12px;
    line-height: 1.55;
    display: inline-block;
    padding: 2.4px 0;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease);
}
@media (max-width: 380px) {
    body.wn-store .site-footer__col-links a,
    .site-footer__col-links a {
        white-space: normal;
    }
}
.site-footer__col-links a:hover {
    color: var(--c-accent);
}

.site-footer__base {
    background: rgba(0, 0, 0, .25);
    border-top: 1px solid rgba(255, 255, 255, .08);
}
/* ユーザー指定値: navigator 完全準拠の base-inner */
.site-footer__base-inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: 1.5rem var(--gutter);
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.5rem;
    justify-content: space-between;
    align-items: center;
    font-size: .75rem;
    color: rgba(255, 255, 255, .5);
}
/* navigator .blog 実測基準: copyright fz 12 / color rgba(.5) / margin 0 */
body.wn-store .site-copyright,
.site-copyright {
    margin: 0;
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
}
.site-copyright strong { color: rgba(255, 255, 255, .9); }
.site-footer__utility-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.site-footer__utility-list a {
    /* .com 実測: rgba(255,255,255,0.58) */
    color: rgba(255, 255, 255, .58);
    text-decoration: none;
    font-size: 12px;
}
.site-footer__utility-list a:hover {
    color: #fff;
}
/* navigator .blog 実測基準: built fz 11 / color rgba(.4) */
body.wn-store .site-footer__built,
.site-footer__built {
    margin: 0;
    color: rgba(255, 255, 255, .4);
    font-size: 11px;
    font-style: italic;
}

@media (max-width: 900px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
    }
    .site-footer__cols {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 540px) {
    .site-footer__cols {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   WEB先案内ネットワーク フッター — ユーザー指定値（navigator 完全準拠）
   ============================================================================ */
body.wn-store .wn-network-footer,
.wn-network-footer {
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, #11182A 0%, #0B1020 100%);
    color: rgba(255, 255, 255, .84);
}
/* .com 実測一致: eyebrow ラベルは rgb(255,139,77) = #FF8B4D
   ※ var(--c-accent) は .store 側で #FF8A65 に評価されてしまい R±0 / G+1 / B+24 ズレが発生。
   .com と完全一致のため直接 hex で固定する。
   font-size / font-weight も .com 実測 (11.52px / 800 / letter-spacing .14em) に揃え、
   eyebrow 列幅を 148px (= .com 値) に再現。 */
body.wn-store .wn-network-footer__eyebrow,
.wn-network-footer__eyebrow {
    color: #FF8B4D;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}
/* .com / .blog (navigator) 仕様に統一:
   ・基本値はモバイル想定（縦並び 1 列 / gap .85rem / padding 1.1rem 横 2rem）。
   ・760px 以上で `auto 1fr` に切替 + align-items: center で eyebrow とカードを横並び。
   .store だけ padding 上下 0 / gap 1.5rem / 常時 auto 1fr 強制で乖離していた件を是正。
   横 padding は .com 実測 32px に合わせて 2rem に統一。 */
body.wn-store .wn-network-footer__inner,
.wn-network-footer__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding: 1.1rem 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: .85rem;
}
@media (min-width: 760px) {
    body.wn-store .wn-network-footer__inner,
    .wn-network-footer__inner {
        grid-template-columns: auto 1fr;
        align-items: center;
    }
}
.wn-network-footer__eyebrow {
    font-size: var(--fs-sm);
    letter-spacing: .12em;
    color: var(--c-accent);
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
}
.wn-network-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .85rem;
}
.wn-network-footer__list a {
    /* .blog/.com 仕様: 通常カードは白薄塗り (.045) + 細白枠 (.12)。
       同色オレンジで全部塗ると「このサイト」強調と差別化できないため、
       無彩色ベース → aria-current のみオレンジ強調の 2 段構成にする。 */
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    column-gap: .75rem;
    row-gap: .15rem;
    padding: .78rem .9rem;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    text-decoration: none;
    color: #fff;
    font-size: 17px;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.wn-network-footer__list a .wn-network-footer__icon { grid-row: 1 / span 2; }
.wn-network-footer__list a .wn-network-footer__title { grid-column: 2; }
.wn-network-footer__list a .wn-network-footer__desc  { grid-column: 2; }
.wn-network-footer__list a:hover {
    /* hover は薄白を少し濃く + 境界線をオレンジ寄り */
    border-color: rgba(255, 169, 77, .55);
    background: rgba(255, 255, 255, .08);
    transform: translateY(-2px);
}
/* .com mu-plugin 側で「自サイト＝今ここ」をより明示するため bg .22 に上書きしているのと同じ運用。
   .blog は変更しない（メモリ:.blog 不変ルール厳守）。
   通常カードが白薄塗りになったので、ここのオレンジ強調がしっかり差別化される。 */
body.wn-store .wn-network-footer__list a[aria-current="page"],
.wn-network-footer__list a[aria-current="page"] {
    border-color: rgba(242, 107, 34, .85);
    background: rgba(242, 107, 34, .22);
}
.wn-network-footer__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .08);
    border-radius: var(--r-sm);
    font-size: 1.05rem;
}
/* navigator .blog 実測基準: title fz 15.2px / fw 800、desc fz 12.48px / color rgba(.62) */
.wn-network-footer__title {
    display: block;
    font-weight: 800;
    color: #fff;
    font-size: 15.2px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wn-network-footer__desc {
    display: block;
    font-size: 12.48px;
    color: rgba(255, 255, 255, .62);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 狭幅では2行折り返しを許容 */
@media (max-width: 1100px) {
    .wn-network-footer__title,
    .wn-network-footer__desc {
        white-space: normal;
    }
}
/* .com/.blog 同仕様: 760px 未満では eyebrow を中央寄せにし、3 カードも 1 列縦並びに。
   __inner 自体は基本値 (grid-template-columns: 1fr) を継承するので明示不要。 */
@media (max-width: 759px) {
    body.wn-store .wn-network-footer__eyebrow,
    .wn-network-footer__eyebrow { text-align: center; }
    body.wn-store .wn-network-footer__list,
    .wn-network-footer__list { grid-template-columns: 1fr; }
}

/* ============================================================================
   navigator 流 3 段ヘッダー（listinghive-child カスタム header.php）
   ============================================================================ */

/* listinghive 親のデフォルト .site-header の冗長部分を隠す（万一残った場合）*/
body.wn-store .site-header.wn-store-header { background: transparent; border: 0; }

/* --- Tier 0: Topbar ---------------------------------------------------- */
.wn-topbar {
    background: var(--c-brand-navy);
    color: var(--c-on-brand-navy);
    font-size: var(--fs-sm);
}
.wn-topbar__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: .55rem 1.25rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.wn-topbar__hours {
    margin: 0;
    color: rgba(255, 255, 255, .9);
    line-height: 1.5;
}
.wn-topbar__hours strong { color: #fff; }
.wn-topbar__sep { margin: 0 .5em; color: rgba(255, 255, 255, .4); }
.wn-topbar__chip {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .35rem .9rem;
    background: var(--c-accent);
    color: #fff;
    border-radius: var(--r-full);
    text-decoration: none;
    font-weight: 700;
    font-size: var(--fs-sm);
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.wn-topbar__chip:hover {
    background: var(--c-accent-deep);
    transform: translateY(-1px);
}

/* --- Tier 1: Brand + Actions ----------------------------------------- */
.wn-header-tier1 {
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-border-soft);
}
/* .com/.blog (navigator) 仕様: Tier 1 は grid 3 列 (1fr auto 1fr)
   左空セル + 中央ブランド + 右アクション群 で、ブランドが完全に中央寄せされる。
   元は flex/space-between で左端にへばりついていた件を是正。 */
.wn-header-tier1__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: .85rem 1.25rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}
/* 1 列目は空セル (placeholder)。ブランドは中央 (2列目)、アクションは右 (3列目) */
.wn-header-tier1__inner > .wn-header__brand {
    grid-column: 2;
    justify-self: center;
}
.wn-header-tier1__inner > .wn-header__actions {
    grid-column: 3;
    justify-self: end;
}
@media (max-width: 600px) {
    /* モバイルは brand 左 / actions 右の 2 列に再構成 */
    .wn-header-tier1__inner {
        grid-template-columns: auto 1fr;
    }
    .wn-header-tier1__inner > .wn-header__brand {
        grid-column: 1;
        justify-self: start;
    }
    .wn-header-tier1__inner > .wn-header__actions {
        grid-column: 2;
        justify-self: end;
    }
}
/* navigator (.blog/.com) と同じ WEB先案内 マスコット + ワードマーク画像レイアウト */
.wn-header__brand .wn-brand,
.wn-header__brand .wn-brand--store {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    color: var(--c-ink);
}
.wn-brand__logo-img {
    display: block;
    height: 52px;
    width: auto;
    flex-shrink: 0;
}
.wn-brand__wordmark-img {
    display: block;
    height: 40px;
    width: auto;
}
.wn-brand__wm-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    line-height: 1;
}
.wn-brand__sub {
    font-size: var(--fs-xs);
    color: var(--c-text-mute);
    letter-spacing: .04em;
    line-height: 1.2;
}
/* ヘッダー: dark mode 時のみワードマーク画像 (黒文字版) を反転して白文字に。
   マスコットは元々カラフルなので filter なし。
   .wn-header__brand スコープに限定して、フッターには影響させない。 */
html[data-theme="dark"] .wn-header__brand .wn-brand__wordmark-img {
    filter: brightness(0) invert(1);
}
html[data-theme="dark"] .wn-header__brand .wn-brand__logo-img {
    filter: none;
}
@media (max-width: 600px) {
    .wn-brand__logo-img { height: 42px; }
    .wn-brand__wordmark-img { height: 32px; }
    .wn-brand__sub { display: none; }
}

/* ============================================================================
   フッターブランド (.wn-brand--footer) — navigator (.blog/.com) と同じ
   「マスコット + ワードマーク 横並び 1 段」配置を強制する。
   親 listinghive のグローバル style が縦並び (flex-direction: column) を当てて
   くる可能性があるため、specificity を確保した上で row + nowrap を明示。
   サイズも navigator 実値 (48 / 38) で固定し、footer.php の width/height 属性と一致。
   ============================================================================ */
body.wn-store .site-footer__logo.wn-brand--footer,
.site-footer__logo.wn-brand--footer,
.wn-brand--footer {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: #fff;
    margin: 0 0 .5rem;
}
/* navigator (.com) 現行実測基準: logo 64×48 / wordmark 103×38
   specificity を上げて header 用 .wn-brand__logo-img { height: 52 } を上書き。
   .com フッターと並べた時にサイズ感が完全一致。 */
body.wn-store .wn-brand--footer .wn-brand__logo-img,
.wn-brand--footer .wn-brand__logo-img {
    height: 48px;
    width: auto;
    flex-shrink: 0;
    /* マスコットはカラフル (黄+青) なので navy bg 上でもそのまま視認 OK */
    filter: none;
}
/* フッターは常時 navy bg なので、黒文字版ワードマークを常時白反転して視認性を確保。
   .com (navigator) が filter: brightness(0) invert(1) を当てているのと同仕様。
   ライト/ダーク両モードで footer は同じ navy 帯のため、theme 条件は付けない。 */
body.wn-store .wn-brand--footer .wn-brand__wordmark-img,
.wn-brand--footer .wn-brand__wordmark-img {
    height: 38px;
    width: auto;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.wn-header__actions {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
}
.wn-header__hp-actions {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.wn-header__hp-actions a {
    color: var(--c-ink);
    text-decoration: none;
    padding: .4rem .55rem;
    border-radius: var(--r-sm);
}
.wn-header__hp-actions a:hover {
    background: var(--c-mist);
}
.wn-header__cta {
    padding: .65rem 1.1rem;
    font-size: var(--fs-sm);
    border-radius: var(--r-sm);
}
/* listinghive 親が a 全般に color: var(--c-ink) を後ろから当てて勝ってしまうため、
   ヘッダー CTA は html body + 親 4 階層 + 自身 = 最大 specificity (0,5,3) で確実に白文字化。
   span (矢印) も inherit で同色保証。!important は使わない。 */
html body.wn-store .wn-header-tier1__inner .wn-header__actions a.wn-header__cta,
html body.wn-store .wn-header-tier1__inner .wn-header__actions a.wn-btn--dark {
    color: #ffffff;
    background: var(--c-brand-navy, #1B2547);
    border-color: var(--c-brand-navy, #1B2547);
}
html body.wn-store .wn-header-tier1__inner .wn-header__actions a.wn-header__cta:hover,
html body.wn-store .wn-header-tier1__inner .wn-header__actions a.wn-btn--dark:hover {
    color: #ffffff;
    background: var(--c-brand-navy-deep, #131B36);
    border-color: var(--c-brand-navy-deep, #131B36);
}
html body.wn-store .wn-header-tier1__inner .wn-header__actions a.wn-header__cta *,
html body.wn-store .wn-header-tier1__inner .wn-header__actions a.wn-btn--dark * {
    color: inherit;
}

/* .com/.blog 同型: Tier 1 アイコンボタン（検索 + テーマトグル）
   円形・透過 bg・ホバーで薄塗り */
.wn-header__search-toggle,
.wn-header__theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: transparent;
    border: 1px solid var(--c-border, rgba(0,0,0,.12));
    border-radius: 50%;
    color: var(--c-ink);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.wn-header__search-toggle:hover,
.wn-header__theme-toggle:hover {
    background: var(--c-mist, rgba(0,0,0,.04));
    border-color: var(--c-ink);
    transform: scale(1.04);
}
.wn-header__search-toggle:focus-visible,
.wn-header__theme-toggle:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}
/* テーマトグル内の sun/moon SVG 切替 — light:moon 表示 / dark:sun 表示 */
.wn-header__theme-toggle .theme-toggle__icon-sun,
.wn-header__theme-toggle .theme-toggle__icon-moon {
    width: 20px;
    height: 20px;
    display: block;
}
html[data-theme="dark"] .wn-header__theme-toggle .theme-toggle__icon-moon,
html:not([data-theme="dark"]) .wn-header__theme-toggle .theme-toggle__icon-sun {
    display: none;
}
/* dark mode ではアイコンボタンも navy 系のボーダーに */
html[data-theme="dark"] .wn-header__search-toggle,
html[data-theme="dark"] .wn-header__theme-toggle {
    border-color: rgba(255, 255, 255, .25);
    color: var(--c-on-brand-navy, #fff);
}
html[data-theme="dark"] .wn-header__search-toggle:hover,
html[data-theme="dark"] .wn-header__theme-toggle:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .5);
}
/* モバイルではアイコンを縮小 */
@media (max-width: 600px) {
    .wn-header__search-toggle,
    .wn-header__theme-toggle { width: 34px; height: 34px; }
}
.wn-header__burger {
    display: none;
    background: transparent;
    border: 1px solid var(--c-border);
    color: var(--c-ink);
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.wn-header__burger svg { width: 22px; height: 22px; }

/* --- Tier 2: Primary nav --------------------------------------------- */
.wn-header-tier2 {
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-border);
}
.wn-header-tier2__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
.wn-primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: center;
}
.wn-primary-menu li {
    margin: 0;
}
.wn-primary-menu a {
    display: inline-block;
    padding: 1rem 1.25rem;
    color: var(--c-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--fs-sm);
    position: relative;
    transition: color var(--dur-fast) var(--ease);
}
.wn-primary-menu a:hover,
.wn-primary-menu .current-menu-item > a,
.wn-primary-menu .current-menu-parent > a {
    color: var(--c-accent);
}
.wn-primary-menu .current-menu-item > a::after,
.wn-primary-menu a:hover::after {
    content: "";
    position: absolute;
    left: 1.25rem; right: 1.25rem; bottom: .55rem;
    height: 2px;
    background: var(--c-accent);
    border-radius: 2px;
}

/* Mobile ---------------------------------------------------- */
@media (max-width: 900px) {
    .wn-topbar__hours { font-size: var(--fs-xs); }
    .wn-topbar__sep { display: none; }
    .wn-header__cta { display: none; }
    .wn-header__burger { display: inline-flex; }
    .wn-header-tier2 {
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--dur) var(--ease);
        border-bottom: 0;
    }
    .wn-header-tier2.is-open {
        max-height: 600px;
        border-bottom: 1px solid var(--c-border);
    }
    .wn-primary-menu {
        flex-direction: column;
        padding: .5rem 0;
    }
    .wn-primary-menu a {
        padding: .85rem 1.25rem;
        display: block;
    }
}

/* ============================================================================
   右側 CTA rail（navigator 流の chip + トグル）
   ============================================================================ */
.wn-cta-rail {
    position: fixed;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: .55rem;
    z-index: 9000;
    align-items: center;
}
.wn-cta-rail__chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 56px;
    min-height: 180px;
    padding: 1.25rem .4rem;
    border-radius: var(--r-md);
    text-decoration: none;
    color: #fff;
    box-shadow: var(--shadow-lg);
    transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease);
    writing-mode: vertical-rl;
    -webkit-tap-highlight-color: transparent;
    border: none;
}
.wn-cta-rail__chip:hover {
    transform: translateX(-3px);
}
.wn-cta-rail__chip-icon {
    writing-mode: horizontal-tb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}
.wn-cta-rail__chip-icon svg { width: 26px; height: 26px; }
.wn-cta-rail__chip-label {
    font-size: var(--fs-base);
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.3;
}
/* .blog (navigator cta-rail) と同じ色相: 1段目=ブルー、2段目=赤 */
.wn-cta-rail__chip--primary {
    background: linear-gradient(180deg, #3D5BBF 0%, #2C46A3 100%);
    color: #fff;
}
.wn-cta-rail__chip--primary:hover {
    background: linear-gradient(180deg, #4D6FE0 0%, #3753C3 100%);
}
.wn-cta-rail__chip--chat {
    background: linear-gradient(180deg, #DC2E3A 0%, #B71C2C 100%);
    color: #fff;
}
.wn-cta-rail__chip--chat:hover {
    background: linear-gradient(180deg, #E64550 0%, #C72836 100%);
}

/* トグルは rail の最下部、アイコンのみ */
.wn-cta-rail__toggle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    background: var(--c-paper);
    border: 1px solid var(--c-border);
    color: var(--c-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease);
}
.wn-cta-rail__toggle:hover {
    transform: translateY(-2px) translateX(-2px);
    background: var(--c-mist);
}
.wn-cta-rail__toggle:focus-visible {
    outline: var(--focus-ring-width) solid var(--c-accent);
    outline-offset: var(--focus-ring-offset);
}
.wn-cta-rail__toggle svg { width: 22px; height: 22px; }
.wn-cta-rail__toggle .wn-theme-toggle__sun  { display: none; }
.wn-cta-rail__toggle .wn-theme-toggle__moon { display: block; }
html[data-theme="dark"] .wn-cta-rail__toggle .wn-theme-toggle__sun  { display: block; }
html[data-theme="dark"] .wn-cta-rail__toggle .wn-theme-toggle__moon { display: none; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .wn-cta-rail__toggle .wn-theme-toggle__sun  { display: block; }
    html:not([data-theme="light"]) .wn-theme-toggle__moon { display: none; }
}

/* HivePress account menu のサブメニューは hover 時のみ展開（既定で常時 open になっているケースを抑制）*/
body.wn-store .wn-header__hp-actions .hp-menu__items,
body.wn-store .wn-header__hp-actions ul.hp-menu__items,
body.wn-store .wn-header__hp-actions .hp-menu .hp-menu__items {
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--c-paper);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    padding: .5rem 0;
    min-width: 200px;
    display: none;
    list-style: none;
    margin: 0;
    z-index: 100;
}
body.wn-store .wn-header__hp-actions .hp-menu__items li { display: block; }
body.wn-store .wn-header__hp-actions .hp-menu__items li a {
    padding: .6rem 1rem;
    display: block;
    color: var(--c-ink);
    text-decoration: none;
    font-size: var(--fs-sm);
}
body.wn-store .wn-header__hp-actions .hp-menu__items li a:hover {
    background: var(--c-mist);
    color: var(--c-accent);
}
body.wn-store .wn-header__hp-actions .hp-menu {
    position: relative;
}
body.wn-store .wn-header__hp-actions .hp-menu:hover .hp-menu__items,
body.wn-store .wn-header__hp-actions .hp-menu:focus-within .hp-menu__items,
body.wn-store .wn-header__hp-actions .hp-menu--expanded .hp-menu__items {
    display: block;
}

/* Tier 2 のメニュー直下にも hp-menu のサブメニュー（ハンバーガー展開分）が漏れていたら隠す */
body.wn-store .wn-header-tier2 .hp-menu__items,
body.wn-store .wn-header-tier2 + ul.hp-menu__items,
body.wn-store .wn-header-tier2 ul.sub-menu,
body.wn-store .wn-header-tier2 ul ul,
body.wn-store .wn-primary-menu ul.sub-menu,
body.wn-store .wn-primary-menu ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--c-paper);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    padding: .5rem 0;
    min-width: 200px;
    list-style: none;
    margin: 0;
    z-index: 100;
}
body.wn-store .wn-primary-menu li {
    position: relative;
}
body.wn-store .wn-primary-menu li:hover > ul.sub-menu,
body.wn-store .wn-primary-menu li:focus-within > ul.sub-menu,
body.wn-store .wn-primary-menu li:hover > ul ul,
body.wn-store .wn-primary-menu li:focus-within > ul ul {
    display: block;
}
body.wn-store .wn-primary-menu ul.sub-menu li a,
body.wn-store .wn-primary-menu ul ul li a {
    padding: .55rem 1rem;
    display: block;
    font-size: var(--fs-sm);
}

/* モバイル時は rail を下端に水平配置 */
@media (max-width: 768px) {
    .wn-cta-rail {
        right: auto;
        left: 50%;
        top: auto;
        bottom: 1rem;
        transform: translateX(-50%);
        flex-direction: row;
        gap: .5rem;
        background: var(--c-paper);
        padding: .5rem;
        border-radius: var(--r-full);
        box-shadow: var(--shadow-lg);
    }
    .wn-cta-rail__chip {
        writing-mode: horizontal-tb;
        min-height: 0;
        height: 44px;
        width: auto;
        padding: 0 1rem;
        flex-direction: row;
        gap: .4rem;
    }
    .wn-cta-rail__chip-label {
        font-size: var(--fs-xs);
        letter-spacing: .04em;
    }
    .wn-cta-rail__toggle {
        width: 44px;
        height: 44px;
    }
}

/* ============================================================================
   Edge-Case Hunter 指摘対応:
   タブレット帯 (768〜1024) で CTA rail が footer の右側 column を遮蔽する。
   1025px 以上のみ rail を表示する方針に切替（!important 不使用）。
   モバイル (≤ 767) は元から cta-rail.css 側で非表示済み。
   ============================================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    body.wn-store #cta-rail,
    body.wn-store #cta-popover {
        display: none;
    }
}

/* ============================================================================
   検索モーダル (wn-search-modal) — .com/.blog の wn-cmdk-modal 簡素版
   - native <dialog> + showModal() + ::backdrop
   - 入力フィールド + 人気リンク 4 件 + close ボタン
   ============================================================================ */
.wn-search-modal {
    border: 0;
    padding: 0;
    margin: auto;
    max-width: 640px;
    width: calc(100% - 2rem);
    background: var(--c-paper, #fff);
    color: var(--c-ink, #1B2547);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    position: fixed;
    inset: 0;
}
.wn-search-modal::backdrop {
    background: rgba(15, 22, 38, .55);
    backdrop-filter: blur(4px);
}
.wn-search-modal[open] {
    animation: wn-search-modal-in .18s ease-out;
}
@keyframes wn-search-modal-in {
    from { opacity: 0; transform: scale(.96) translateY(-8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.wn-search-modal__form {
    display: grid;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1.5rem;
}
.wn-search-modal__input-wrap {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .25rem .85rem;
    border: 1px solid var(--c-border, rgba(0,0,0,.12));
    border-radius: 8px;
    background: var(--c-mist, rgba(0,0,0,.02));
}
.wn-search-modal__icon {
    color: var(--c-text-mute, rgba(0,0,0,.55));
    flex-shrink: 0;
}
.wn-search-modal__input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 1rem;
    padding: .6rem 0;
    color: inherit;
}
.wn-search-modal__esc {
    font-size: 11px;
    padding: 2px 8px;
    border: 1px solid var(--c-border, rgba(0,0,0,.18));
    border-radius: 4px;
    color: var(--c-text-mute, rgba(0,0,0,.55));
    background: rgba(255,255,255,.5);
}
.wn-search-modal__quick-label {
    font-size: .72rem;
    font-weight: 800;
    color: var(--c-accent, #FF6F3D);
    margin: 0 0 .5rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.wn-search-modal__quick-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem .6rem;
}
.wn-search-modal__quick-list a {
    display: block;
    padding: .55rem .75rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--c-ink, #1B2547);
    background: var(--c-mist, rgba(0,0,0,.03));
    font-size: .9rem;
    transition: background .18s ease;
}
.wn-search-modal__quick-list a:hover {
    background: rgba(242, 107, 34, .12);
}
.wn-search-modal__close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--c-text-mute, rgba(0,0,0,.55));
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}
.wn-search-modal__close:hover {
    background: var(--c-mist-2, rgba(0,0,0,.06));
}
html[data-theme="dark"] .wn-search-modal {
    background: var(--c-brand-navy-soft, #2A3556);
    color: #fff;
}
html[data-theme="dark"] .wn-search-modal__input-wrap {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.18);
}
html[data-theme="dark"] .wn-search-modal__quick-list a {
    background: rgba(255,255,255,.06);
    color: #fff;
}