/* ============================================================================
   Navigator — Design Polish 2026
   Theme: 透明感のある実務派 WordPress 技術ブログ

   Applied on top of main.css. Changes ONLY visual treatment of EXISTING
   elements (no new sections, no new content). Adds:
   - Subtle gradient backgrounds behind glass-eligible sections
   - Glassmorphism on selected cards (service/case/profile/cta/sidebar/faq/pricing)
   - Unified hover / focus / transition system
   - Refined typography & spacing for readability
   - Consistent mobile breathing room
   ============================================================================ */

:root {
  /* Glass tokens */
  --glass-bg:           rgba(255, 255, 255, 0.62);
  --glass-bg-strong:    rgba(255, 255, 255, 0.82);
  --glass-bg-mute:      rgba(255, 255, 255, 0.46);
  --glass-border:       rgba(255, 255, 255, 0.78);
  --glass-border-soft:  rgba(255, 255, 255, 0.48);
  --glass-blur:         18px;
  --glass-blur-light:   10px;
  --glass-shadow:       0 18px 45px rgba(15, 23, 42, 0.10);
  --glass-shadow-hover: 0 22px 55px rgba(15, 23, 42, 0.16);

  /* Refined ink palette for polish layer */
  --ink-90:    rgba(15, 30, 90, 0.92);
  --ink-70:    rgba(15, 30, 90, 0.72);
  --ink-50:    rgba(15, 30, 90, 0.50);

  /* Unified radius */
  --pol-r-sm:  10px;
  --pol-r:     16px;
  --pol-r-lg:  22px;
  --pol-r-xl:  28px;

  /* Unified transition */
  --pol-ease:  cubic-bezier(.22, .61, .36, 1);
  --pol-dur:   .26s;

  /* Background gradient stops — WHITE-dominant canvas with whisper of brand tones */
  --bg-grad-1: #FBFCFE;        /* near-white, hint of cool */
  --bg-grad-2: #F4F7FC;        /* slightly cooler */
  --bg-grad-3: #FFFBEA;        /* near-white, hint of warm yellow */
  --bg-grad-4: #EAF1FC;        /* selective light sky */
}

/* ============================================================================
   1. Subtle gradient background — white canvas with sparse brand-color radials
   ============================================================================ */
body.navigator {
  background-image:
    /* Sparse yellow halo top-right, blue halo bottom-left, otherwise white */
    radial-gradient(45% 35% at 100% 0%, rgba(254, 216, 0, .07) 0%, transparent 70%),
    radial-gradient(40% 45% at 0% 100%, rgba(61, 91, 191, .05) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg-grad-1) 0%, #FFFFFF 30%, #FFFFFF 70%, var(--bg-grad-3) 100%);
  background-attachment: fixed;
}

/* The main reading column stays pure white for readability */
.layout__main { background: transparent; }

/* ============================================================================
   2. Hero — keep the existing background but add a soft glass overlay halo
   ============================================================================ */
.wn-hero,
.archive-hero {
  background-color: transparent;
  position: relative;
}
.wn-hero { background-image:
    /* Sparse, low-opacity radials — the canvas stays white-dominant */
    radial-gradient(50% 35% at 90% 0%, rgba(254, 216, 0, .10), transparent 70%),
    radial-gradient(50% 60% at 5% 100%, rgba(97, 139, 217, .06), transparent 65%);
}
.archive-hero {
  background-image:
    linear-gradient(180deg, rgba(238, 243, 255,0) 0%, rgba(238, 243, 255,.45) 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ============================================================================
   3. Trust bar — subtle glass treatment for the numbers panel
   ============================================================================ */
.wn-trust {
  background: var(--glass-bg-mute);
  border: 1px solid var(--glass-border-soft);
  border-radius: var(--pol-r-lg);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur-light));
  -webkit-backdrop-filter: blur(var(--glass-blur-light));
  /* The 1px-gap inner-grid technique stays — but we recolor the seam. */
  background-color: rgba(219, 227, 244, 0.4);
}
.wn-trust-item {
  background: var(--glass-bg-strong);
}

/* ============================================================================
   4. Service cards — Glass with subtle border-top accent
   ============================================================================ */
.wn-svc,
.wn-service-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--pol-r-xl);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition:
    transform var(--pol-dur) var(--pol-ease),
    box-shadow var(--pol-dur) var(--pol-ease),
    background var(--pol-dur) var(--pol-ease),
    border-color var(--pol-dur) var(--pol-ease);
}
.wn-svc:hover,
.wn-service-card:hover {
  transform: translateY(-4px);
  background: var(--glass-bg-strong);
  border-color: rgba(255,255,255,.92);
  box-shadow: var(--glass-shadow-hover);
}
.wn-svc-icon, .wn-service-icon {
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ============================================================================
   5. Case cards — softer glass, refined corner accent
   ============================================================================ */
.wn-case {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--pol-r);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(var(--glass-blur-light));
  -webkit-backdrop-filter: blur(var(--glass-blur-light));
  transition:
    transform var(--pol-dur) var(--pol-ease),
    box-shadow var(--pol-dur) var(--pol-ease),
    background var(--pol-dur) var(--pol-ease),
    border-color var(--pol-dur) var(--pol-ease);
}
.wn-case:hover {
  transform: translateY(-3px);
  background: var(--glass-bg-strong);
  border-color: rgba(255,255,255,.92);
  box-shadow: var(--glass-shadow);
}
.wn-case-tag {
  background: rgba(249, 229, 216, 0.75);
  border: 1px solid rgba(255, 111, 61, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ============================================================================
   6. Profile card
   ============================================================================ */
.wn-profile {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--pol-r-xl);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.wn-profile-avatar {
  /* lift the avatar above the glass surface */
  box-shadow:
    0 10px 24px rgba(15, 23, 42, .18),
    0 1.5px 0 rgba(255,255,255,.5) inset;
}
.wn-profile-meta span {
  background: rgba(255,255,255,.65);
  border-color: rgba(255,255,255,.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ============================================================================
   7. CTA blocks — emergency / high / mid / low
   We KEEP the strong dark CTA opaque (it's the visual anchor), but
   add glass to the soft variants.
   ============================================================================ */
.wn-cta-mid, .cta--mid {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--pol-r-xl);
  box-shadow: var(--glass-shadow);
}
.wn-cta-low, .cta--low {
  background: var(--glass-bg-mute);
  border: 1px solid var(--glass-border-soft);
  backdrop-filter: blur(var(--glass-blur-light));
  -webkit-backdrop-filter: blur(var(--glass-blur-light));
  border-radius: var(--pol-r-xl);
  box-shadow: var(--glass-shadow);
}
.wn-cta-emergency, .cta--emergency {
  background:
    linear-gradient(135deg, rgba(251,238,236,.85) 0%, rgba(253,246,244,.92) 100%);
  border: 1px solid rgba(255, 226, 210, 0.6);
  backdrop-filter: blur(var(--glass-blur-light));
  -webkit-backdrop-filter: blur(var(--glass-blur-light));
  border-radius: var(--pol-r-xl);
  box-shadow: 0 18px 45px rgba(155, 45, 45, 0.08);
}
.wn-cta-high, .cta--high {
  /* keep opaque ink for anchoring */
  border-radius: var(--pol-r-xl);
  box-shadow:
    0 24px 60px rgba(15, 30, 90, 0.32),
    0 4px 12px rgba(15, 30, 90, 0.16);
}

/* ============================================================================
   8. FAQ
   ============================================================================ */
.wn-faq details {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--pol-r);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(var(--glass-blur-light));
  -webkit-backdrop-filter: blur(var(--glass-blur-light));
  transition: border-color var(--pol-dur) var(--pol-ease),
              box-shadow   var(--pol-dur) var(--pol-ease),
              background   var(--pol-dur) var(--pol-ease);
}
.wn-faq details:hover {
  background: var(--glass-bg-strong);
}
.wn-faq details[open] {
  background: var(--glass-bg-strong);
  border-color: rgba(255, 111, 61, 0.32);
  box-shadow: 0 14px 36px rgba(255, 111, 61, 0.10);
}

/* ============================================================================
   9. Pricing
   ============================================================================ */
.wn-price-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--pol-r-xl);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.wn-price-card.is-featured {
  background: var(--glass-bg-strong);
  border: 2px solid var(--c-ink);
  box-shadow:
    0 26px 64px rgba(15, 30, 90, 0.16),
    0 0 0 6px rgba(255, 111, 61, 0.06);
}

/* Flow & Compare cards — light glass */
.wn-flow-step,
.wn-compare-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--pol-r);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(var(--glass-blur-light));
  -webkit-backdrop-filter: blur(var(--glass-blur-light));
}
.wn-compare-card.is-recommended {
  background: var(--c-ink); /* keep recommended opaque */
}

/* ============================================================================
   10. Post-card (archive lists) — subtle glass + refined hover
   ============================================================================ */
.post-card {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--pol-r-lg);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(var(--glass-blur-light));
  -webkit-backdrop-filter: blur(var(--glass-blur-light));
  transition:
    transform var(--pol-dur) var(--pol-ease),
    box-shadow var(--pol-dur) var(--pol-ease),
    border-color var(--pol-dur) var(--pol-ease);
}
.post-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.9);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}
.post-card__cat {
  background: rgba(249, 229, 216, 0.80);
  border: 1px solid rgba(255, 111, 61, 0.18);
  backdrop-filter: blur(6px);
}

/* Related posts */
.related__card {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--pol-r);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
  transition:
    transform var(--pol-dur) var(--pol-ease),
    box-shadow var(--pol-dur) var(--pol-ease);
}
.related__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
}

/* ============================================================================
   11. Sidebar — glass treatment for cards (NOT the dark CTA which stays bold)
   ============================================================================ */
.widget {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--pol-r-lg);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(var(--glass-blur-light));
  -webkit-backdrop-filter: blur(var(--glass-blur-light));
}
/* Keep the primary CTA card opaque - it's the anchor */
.widget--cta-primary,
.wn-sidebar-cta {
  background: var(--c-ink);
  border: 0;
  box-shadow:
    0 18px 45px rgba(15, 30, 90, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ============================================================================
   12. Forms (search / contact) — soft glass
   ============================================================================ */
.search-form__input,
.search-form input[type="search"],
.search-form input[type="text"] {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--pol-r-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .15s var(--pol-ease), box-shadow .15s var(--pol-ease);
}
.search-form__input:focus,
.search-form input[type="search"]:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(255, 111, 61, 0.15);
  outline: none;
}
.site-search { background: rgba(238, 243, 255, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ============================================================================
   13. Buttons — unified hover & focus polish (does not change palette)
   ============================================================================ */
.btn,
.wn-btn {
  border-radius: var(--pol-r-sm);
  transition:
    transform var(--pol-dur) var(--pol-ease),
    box-shadow var(--pol-dur) var(--pol-ease),
    background var(--pol-dur) var(--pol-ease),
    color var(--pol-dur) var(--pol-ease),
    border-color var(--pol-dur) var(--pol-ease);
  letter-spacing: 0.012em;
}
.btn--primary,
.wn-btn-primary {
  box-shadow: 0 8px 22px -8px rgba(15, 30, 90, 0.35);
}
.btn--primary:hover,
.wn-btn-primary:hover {
  box-shadow: 0 14px 30px -10px rgba(15, 30, 90, 0.45);
}
.btn--ghost,
.wn-btn-ghost {
  background: var(--glass-bg-mute);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--ghost:hover,
.wn-btn-ghost:hover {
  background: var(--glass-bg-strong);
  border-color: var(--c-ink);
}

/* ============================================================================
   14. Header polish — refined glass top
   The header already uses backdrop-filter; we adjust its color stack slightly.
   ============================================================================ */
.site-header {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
/* 2026-05-24: スクロール時のすりガラス感を強化（佑輔さん指示）
   - 背景 .88 → .55 で後ろがしっかり透ける
   - blur 20px → 32px / saturate 180% → 200% / brightness 1.05 で
     ガラス越しの彩度と明度を引き上げ
   - inset shadow と border の白さでガラスの縁の輝きを強調 */
.site-header[data-scrolled="true"] {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: saturate(200%) blur(32px) brightness(1.05);
  -webkit-backdrop-filter: saturate(200%) blur(32px) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 16px 40px -16px rgba(15, 30, 90, 0.22),
    0 6px 12px -6px rgba(15, 30, 90, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(15, 30, 90, 0.04);
}
/* backdrop-filter 非対応ブラウザは @supports 外で fallback */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header[data-scrolled="true"] {
    background: rgba(255, 255, 255, 0.94); /* ガラス効果効かない時は不透明寄りに戻す */
  }
}

/* Header CTA gets a soft glow on focus */
.site-header__cta:focus-visible {
  box-shadow: 0 0 0 4px rgba(255, 111, 61, 0.20);
}

/* Nav primary item hover refinement (replaces hard background change) */
.nav-primary__list li > a {
  transition:
    background var(--pol-dur) var(--pol-ease),
    color var(--pol-dur) var(--pol-ease);
}
.nav-primary__list li > a:hover {
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--c-ink);
}
.nav-primary__list li.current-menu-item > a,
.nav-primary__list li.current-page-ancestor > a {
  background: var(--c-ink);
}

/* ============================================================================
   15. Footer signal band — tone shift to feel "warm transition" not "cold cream"
   ============================================================================ */
.footer-signal {
  background: linear-gradient(
    135deg,
    rgba(238, 243, 255, 0.90) 0%,
    rgba(221, 230, 250, 0.94) 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ============================================================================
   16. Breadcrumbs — pill links
   ----------------------------------------------------------------------------
   ライト時は薄い lavender 透過で「ヘッダー直下の細い帯」を出す。
   ダーク時は同じ透過率で navy(--c-paper 系) に切り替え、本文と地続きに
   見えるようにする。`html[data-theme="dark"]` と OS prefers-color-scheme:
   dark の両方に対応（toggle 未操作のユーザーも追従）。
   ============================================================================ */
.breadcrumb-wrap {
  background: rgba(238, 243, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--glass-border-soft);
}
.breadcrumbs__link:hover {
  color: var(--c-accent);
  text-decoration: none;
}

/* Dark mode — flat top-level rule (nested syntax in §54 dark block was not
   reliably picked up across selectors, so we declare here explicitly). */
html[data-theme="dark"] .breadcrumb-wrap {
  background: rgba(15, 22, 38, 0.85) !important;
  border-bottom-color: var(--c-border-soft, rgba(120, 140, 180, 0.18)) !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .breadcrumb-wrap {
    background: rgba(15, 22, 38, 0.85) !important;
    border-bottom-color: var(--c-border-soft, rgba(120, 140, 180, 0.18)) !important;
  }
}
/* Pill 内テキスト / 矢印 — dark でも読み切れるよう CSS 変数で確実に */
html[data-theme="dark"] .breadcrumbs__item,
html[data-theme="dark"] .breadcrumbs__link {
  color: var(--c-text-mute);
}
html[data-theme="dark"] .breadcrumbs__item:not(:last-child)::after {
  color: var(--c-text-dim);
}
html[data-theme="dark"] .breadcrumbs__current,
html[data-theme="dark"] .breadcrumbs__item:last-child {
  color: var(--c-text);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .breadcrumbs__item,
  html:not([data-theme="light"]) .breadcrumbs__link {
    color: var(--c-text-mute);
  }
  html:not([data-theme="light"]) .breadcrumbs__item:not(:last-child)::after {
    color: var(--c-text-dim);
  }
  html:not([data-theme="light"]) .breadcrumbs__current,
  html:not([data-theme="light"]) .breadcrumbs__item:last-child {
    color: var(--c-text);
  }
}

/* ============================================================================
   17. Single post — refined article readability
   The article reading area stays opaque (white) so reading is comfortable,
   but we add subtle hover refinement to embedded interactive elements.
   ============================================================================ */
.post-single,
.page-default {
  background: rgba(255, 255, 255, 0.96);
  border-radius: var(--pol-r-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 18px 50px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--glass-border-soft);
}

.post-single__title {
  letter-spacing: -0.01em;
}

.prose blockquote {
  background: var(--glass-bg);
  border-left: 4px solid var(--c-accent);
  border-radius: 0 var(--pol-r) var(--pol-r) 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.prose code {
  background: rgba(238, 243, 255, 0.9);
  border: 1px solid rgba(219, 227, 244, 0.6);
  padding: 0.15em 0.45em;
}

/* Code blocks — minimal flat dark, no heavy drop shadow.
   Previously we used a dark glass gradient with inset highlight + heavy navy
   shadow (rgba(15,30,90,.18)). That decoration was too heavy and on posts
   that wrapped body in <pre>, the dark gradient bg made entire articles
   invisible. Reduce to flat ink background with tiny lift only. */
.prose pre {
  background: var(--c-ink, #0F1626);
  border: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
  border-radius: var(--pol-r);
}

/* Tables refinement */
.prose table {
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--pol-r);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.prose th {
  background: var(--c-mist);
  color: var(--c-ink);
  font-weight: 700;
}
.prose td, .prose th {
  border-bottom: 1px solid var(--c-border-soft);
  border-right: 1px solid var(--c-border-soft);
}
.prose td:last-child, .prose th:last-child { border-right: 0; }
.prose tr:last-child td { border-bottom: 0; }

/* Tags */
.post-tags__item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-soft);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Share buttons — DO NOT apply glass over brand-color buttons.
   X / Facebook buttons must keep their brand colors (defined in main.css):
     .share__btn--x  { background: #000;    color: #fff; }
     .share__btn--fb { background: #1877F2; color: #fff; }
   The previous glass override was washing both buttons out to a
   semi-transparent white background, making the white SVG icons + labels
   invisible. We intentionally do NOT restyle `.share__btn` here. */
.share__btn--x,
.share__btn--fb {
  /* Cancel any glass / backdrop carryover and lock brand colors. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.share__btn--x {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
}
.share__btn--x:hover {
  background: #1f1f1f !important;
  border-color: #1f1f1f !important;
  color: #fff !important;
}
.share__btn--fb {
  background: #1877F2 !important;
  color: #fff !important;
  border: 1px solid #1877F2 !important;
}
.share__btn--fb:hover {
  background: #166FE5 !important;
  border-color: #166FE5 !important;
  color: #fff !important;
}
/* SVG icons inside the buttons inherit color so they pop as white. */
.share__btn--x .share__icon,
.share__btn--x svg,
.share__btn--fb .share__icon,
.share__btn--fb svg {
  color: #fff !important;
  fill: currentColor !important;
}
/* Compact (top) variant uses icon-only; ensure focus ring stays visible
   against the pure black/blue fills. */
.share--compact .share__btn--x:focus-visible,
.share--compact .share__btn--fb:focus-visible {
  outline: 2px solid var(--c-accent, #FF6F3D);
  outline-offset: 3px;
}

/* Post nav (prev / next) */
.post-nav a {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--pol-r);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--pol-dur), border-color var(--pol-dur), transform var(--pol-dur);
}
.post-nav a:hover {
  background: var(--glass-bg-strong);
  border-color: var(--c-ink);
  transform: translateY(-2px);
}

/* ============================================================================
   18. 404 / Search "no results" — friendly glass
   ============================================================================ */
.error-404,
.no-results {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--pol-r-xl);
  padding: clamp(2rem, 1.5rem + 4vw, 5rem);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.error-404__code {
  background: linear-gradient(135deg, var(--c-accent) 0%, #FFB088 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 12px rgba(255, 111, 61, 0.18));
}

/* ============================================================================
   19. Comments (when activated)
   ============================================================================ */
.comment-list .comment,
.comment-list .pingback,
.comment-respond {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--pol-r);
  padding: clamp(1rem, .8rem + .6vw, 1.5rem);
  margin-bottom: 1rem;
  backdrop-filter: blur(var(--glass-blur-light));
  -webkit-backdrop-filter: blur(var(--glass-blur-light));
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--pol-r-sm);
  padding: 0.85rem 1rem;
  width: 100%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color var(--pol-dur), box-shadow var(--pol-dur);
}
.comment-form input:focus, .comment-form textarea:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(255, 111, 61, 0.15);
  outline: none;
}

/* ============================================================================
   20. Speech bubble (existing wn/speech block) — keep readable + glass-ish
   ============================================================================ */
.speech__bubble {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.speech__avatar-img,
.speech__face-fallback {
  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

/* ============================================================================
   21. Callout boxes refinement
   ============================================================================ */
.callout {
  border-radius: var(--pol-r);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ============================================================================
   22. Bottom-nav mobile — frosted glass
   ============================================================================ */
.bottom-nav {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 -2px 16px rgba(15, 23, 42, 0.06);
}
.bottom-nav__item--emergency .bottom-nav__emergency-mark {
  box-shadow:
    0 6px 14px -4px rgba(155, 45, 45, .6),
    0 0 0 6px rgba(155, 45, 45, .08);
}

/* ============================================================================
   23. Unified focus visible (accessibility polish)
   ============================================================================ */
*:focus-visible {
  outline: 3px solid rgba(255, 111, 61, 0.72);
  outline-offset: 3px;
  border-radius: var(--pol-r-sm);
}

/* ============================================================================
   24. Typography refinement (subtle readability boost — no size change for
   body text; only optical adjustments for headings)
   ============================================================================ */
h1, h2, h3, h4 {
  letter-spacing: -0.012em;
  font-feature-settings: "palt" 1;
}
.prose h2 {
  border-bottom: 0;
  position: relative;
  padding-left: 0;
}
.prose h2::before {
  /* refined accent under h2 instead of full border */
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35em;
  width: 2.6em;
  height: 3px;
  background: linear-gradient(90deg, var(--c-accent), rgba(255, 111, 61, 0.0));
  border-radius: 2px;
}
.prose h3 {
  padding-left: 0.85em;
  border-left: 3px solid var(--c-accent);
  border-radius: 2px;
}

/* ============================================================================
   25. Mobile breathing room (does NOT change layout, only spacing)
   ============================================================================ */
@media (max-width: 640px) {
  .post-single,
  .page-default {
    padding: 1.25rem;
    border-radius: var(--pol-r);
  }
  .layout { padding-block: 1.5rem 2.5rem; }
  .wn-section { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem); }
  .footer-signal__inner { gap: 1.25rem; }
  .post-card__body { padding: 1.25rem; }
  .widget { padding: 1rem 1.1rem; border-radius: var(--pol-r); }
}

/* Stronger backdrop-filter behavior on touch / narrow screens — reduce blur
   intensity to keep performance smooth on mid-range Android devices. */
@media (max-width: 768px) {
  .wn-svc, .wn-service-card,
  .wn-case, .wn-profile, .wn-price-card,
  .wn-cta-mid, .cta--mid, .wn-cta-low, .cta--low,
  .wn-faq details,
  .widget, .related__card, .post-card,
  .post-single, .page-default {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: var(--glass-bg-strong); /* heavier opacity for mobile readability */
  }
  .wn-trust {
    background: rgba(238, 243, 255, 0.85);
  }
}

/* Reduce-motion users get instant transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================================
   26. Print — strip all glass effects (always)
   ============================================================================ */
@media print {
  *, *::before, *::after {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
  body.navigator { background-image: none !important; }
}

/* ============================================================================
   27a. パンくず — pill 形のソフトな仕上げ
   ============================================================================ */
.breadcrumbs__list { gap: .4rem .55rem; }
.breadcrumbs__link {
  padding: .15rem .55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .15s var(--pol-ease), border-color .15s var(--pol-ease), color .15s var(--pol-ease);
}
.breadcrumbs__link:hover {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border);
  color: var(--c-ink);
  text-decoration: none;
}
.breadcrumbs__current {
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
}

/* 27b. タグラベル — 統一の pill / ホバー時の浮き */
.post-tags__item,
.post-meta__cat,
.post-row__cat {
  transition:
    background .15s var(--pol-ease),
    border-color .15s var(--pol-ease),
    color .15s var(--pol-ease),
    transform .15s var(--pol-ease);
}
.post-tags__item:hover {
  background: var(--glass-bg-strong);
  border-color: var(--c-ink);
  color: var(--c-ink);
  transform: translateY(-1px);
}

/* 27c. リンク（本文内）— アクセント下線の見え方を統一 */
.prose a:not(.btn):not(.wp-block-button__link):not(.wn-btn) {
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255, 111, 61, 0.50);
  text-underline-offset: 4px;
  transition: text-decoration-color .15s var(--pol-ease), color .15s var(--pol-ease);
}
.prose a:not(.btn):not(.wp-block-button__link):not(.wn-btn):hover {
  color: var(--c-accent);
  text-decoration-color: var(--c-accent);
}

/* 27d. 引用 — ガラス感とアクセント線の調和 */
.prose blockquote {
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 3rem;
}
.prose blockquote::before {
  content: """;
  position: absolute;
  left: 0.85rem; top: 0.5rem;
  font-family: Georgia, serif;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--c-accent);
  opacity: 0.45;
  font-weight: 700;
}

/* 27e. コードブロック — 行頭にアクセントバー */
.prose pre {
  position: relative;
  overflow-x: auto;
  padding-left: 1.5rem;
}
/* Removed: orange 3px gradient bar on the left of .prose pre.
   It was bleeding through to articles that wrapped body text in <pre>
   (e.g. post 11021), painting the entire prose with an orange left line.
   Real code blocks (.wp-block-code) get visual emphasis from dark bg alone. */

/* 27f. 表（記事本文）— 上品なヘッダー */
.prose table { border-radius: var(--pol-r); }
.prose thead th:first-child { border-top-left-radius: var(--pol-r); }
.prose thead th:last-child  { border-top-right-radius: var(--pol-r); }
.prose tbody tr:last-child td:first-child { border-bottom-left-radius: var(--pol-r); }
.prose tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--pol-r); }
.prose tbody tr:hover td { background: rgba(238, 243, 255, 0.5); transition: background .15s var(--pol-ease); }

/* 27g. 画像（記事本文）— 統一の角丸 & 微影 */
.prose img,
.prose .wp-block-image img {
  border-radius: var(--pol-r);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.prose .wp-block-image figcaption {
  font-size: .8125rem;
  color: var(--c-text-mute);
  text-align: center;
  margin-top: .5rem;
}

/* 27h. リスト（本文内）— マーカー揃え */
.prose ul li { padding-left: 1.6em; }
.prose ul li::before {
  background: var(--c-accent);
  box-shadow: none;
}

/* 27i. アーカイブの「Recommend」など外部 widget も浮かないように */
.related, .post-nav {
  /* 既存のレイアウトを維持しつつ、上の余白を控えめに */
  margin-top: clamp(2.5rem, 1.8rem + 2vw, 4rem);
}

/* 27j. ボトムナビのアクセント polish */
.bottom-nav__item {
  font-weight: 600;
  letter-spacing: .02em;
}
.bottom-nav__item[aria-current="page"] {
  color: var(--c-accent);
  font-weight: 700;
}

/* 27k. ヘッダー utility bar の脈動ドットをよりブランド色に */
.site-topbar__cta { color: #FFB088; }
.site-topbar__cta:hover { color: #fff; }

/* 27l. SNS リンクボタン — ホバー時のしっかりした手応え */
.site-footer__sns-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
}
.site-footer__sns-link svg { width: 18px; height: 18px; }

/* 27l-2. ワードマーク (coconala / webnala) を含む SNS リンクは
   正方形 40x40 を解除して横長 capsule 形に。
   - 両ボタンを「同一の固定幅」で揃えて視覚的なズレをゼロに
   - 中身 (SVG) は中央寄せで、テキスト幅差 (coconala 8 文字 vs webnala 7 文字) を吸収
   - flex-basis 100% で単独行を占有し、縦並び (coconala の下に webnala)
   currentColor で fill しているのでダーク/ライト切替は自動。 */
.site-footer__sns { flex-wrap: wrap; }
.site-footer__sns-link:has(.site-footer__sns-wordmark) {
  flex: 0 0 auto;          /* 単独行を占有 → 縦並び */
  width: 160px;            /* 両ボタンを完全に同一幅で固定 */
  height: 40px;
  justify-content: center; /* 中身を水平中央に */
  padding: 0;
  border-radius: 22px;
  gap: 0;
}
.site-footer__sns { flex-direction: column; align-items: flex-start; }
.site-footer__sns-link .site-footer__sns-wordmark {
  width: auto;
  height: 22px;
  display: block;
}
.mobile-drawer__sns-link {
  font-weight: 600;
}

/* 27m. ボタン アクセシブル — focus-visible 上の色を一段強める */
.btn:focus-visible,
.wn-btn:focus-visible {
  outline: 3px solid rgba(255, 111, 61, 0.85);
  outline-offset: 3px;
}

/* ============================================================================
   27. 固定ページでは目次を非表示
   - rich-table-of-content プラグインの本文内 / サイドバー目次
   - Navigator テーマ自前の自動目次（念のため。テンプレ側でも is_singular('post')
     ガードしていますが、保険として CSS でも非表示にします）
   body.is-page は template-functions.php の body_class フィルタで全 page に付与済
   ============================================================================ */
body.is-page .rtoc-mokuji-content,
body.is-page [id^="rtoc-mokuji"],
body.is-page [class*="rtoc-"],
body.is-page .toc,
body.is-page .post-single__toc,
body.is-page .widget--toc {
  display: none !important;
}

/* ============================================================================
   29. ボタン .wn-btn 系のベーススタイル（main.css に未定義だったため補完）
   .btn と同等のベース挙動を持たせて、Hero / LP 内の wn-btn 要素も
   ちゃんとボタンとして表示されるようにする
   ============================================================================ */
.wn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.012em;
  border: 1.5px solid transparent;
  border-radius: var(--pol-r-sm);
  cursor: pointer;
  transition: background var(--pol-dur) var(--pol-ease),
              color var(--pol-dur) var(--pol-ease),
              border-color var(--pol-dur) var(--pol-ease),
              box-shadow var(--pol-dur) var(--pol-ease),
              transform var(--pol-dur) var(--pol-ease);
  white-space: nowrap;
  text-decoration: none !important;
  min-height: 3rem;
}
.wn-btn::after {
  content: "→";
  font-weight: 400;
  transition: transform var(--pol-dur) var(--pol-ease);
  margin-left: .25rem;
}
.wn-btn:hover::after { transform: translateX(3px); }

.wn-btn-primary {
  background: var(--c-ink);
  color: #fff !important;
  border-color: var(--c-ink);
  box-shadow: 0 8px 22px -8px rgba(15, 30, 90, 0.35);
}
.wn-btn-primary:hover {
  background: var(--c-ink-soft);
  border-color: var(--c-ink-soft);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(15, 30, 90, 0.45);
}

.wn-btn-secondary {
  background: #fff;
  color: var(--c-ink) !important;
  border-color: var(--c-ink);
}
.wn-btn-secondary:hover {
  background: var(--c-ink);
  color: #fff !important;
}

.wn-btn-ghost {
  background: var(--glass-bg-mute);
  color: #fff;
  border-color: var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wn-btn-ghost:hover {
  background: var(--glass-bg-strong);
  border-color: var(--c-ink);
}

.wn-btn-emergency {
  background: var(--c-crimson);
  color: #fff !important;
  border-color: var(--c-crimson);
  box-shadow: 0 8px 22px -8px rgba(155, 45, 45, 0.45);
}
.wn-btn-emergency:hover {
  background: #7E1F1F;
  border-color: #7E1F1F;
  transform: translateY(-2px);
}

@media (max-width: 480px) {
  .wn-btn { width: 100%; }
}

/* ============================================================================
   30. 記事内目次（rich-table-of-content プラグイン）の可読性改善
   プラグインの濃灰背景＋白文字は本サイトのトーンに合わないため、
   明色背景＋ハイコントラスト文字に上書き
   ============================================================================ */
.rtoc-mokuji-content,
.rtoc-mokuji-content.frame4,
.rtoc-mokuji-content.frame1,
.rtoc-mokuji-content.frame2,
.rtoc-mokuji-content.frame3,
.rtoc-mokuji-content.frame5,
.rtoc-mokuji-content.frame6,
#rtoc-mokuji-widget-wrapper {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--pol-r-lg) !important;
  color: var(--c-text) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(var(--glass-blur-light)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-light)) !important;
  padding: 1.5rem 1.75rem !important;
}

/* 「目次」タイトル */
.rtoc-mokuji-content .rtoc-mokuji-title,
.rtoc-mokuji-content > .rtoc-toggle-title,
#rtoc-mokuji-widget-wrapper .rtoc-mokuji-title,
.rtoc-mokuji-content .rtoc-title,
.rtoc-mokuji-content .center-rtoc {
  color: var(--c-ink) !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  font-size: 1rem !important;
}

/* 目次内のリンク */
.rtoc-mokuji-content a,
.rtoc-mokuji-content li a,
.rtoc-mokuji-content ol li a,
.rtoc-mokuji-content ul li a,
#rtoc-mokuji-widget-wrapper a {
  color: var(--c-text) !important;
  text-decoration: none !important;
  line-height: 1.7 !important;
  transition: color .15s var(--pol-ease) !important;
}
.rtoc-mokuji-content a:hover,
#rtoc-mokuji-widget-wrapper a:hover {
  color: var(--c-accent) !important;
  text-decoration: none !important;
}

/* リスト項目 */
.rtoc-mokuji-content li,
.rtoc-mokuji-content ol li,
.rtoc-mokuji-content ul li,
#rtoc-mokuji-widget-wrapper li {
  color: var(--c-text) !important;
  border-color: rgba(15, 30, 90, 0.08) !important;
  padding: .35rem 0 !important;
}

/* 番号（h2 連番）— アクセント色 */
.rtoc-mokuji-content ol > li::marker,
.rtoc-mokuji-content > ol > li::marker {
  color: var(--c-accent) !important;
  font-weight: 800 !important;
}

/* 「CLOSE / 開く」トグルボタン */
.rtoc-mokuji-content .rtoc-mokuji-btn,
.rtoc-mokuji-content .rtoc-toggle,
.rtoc-mokuji-content button {
  background: var(--c-mist) !important;
  color: var(--c-ink) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--pol-r-sm) !important;
  padding: .35rem .85rem !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
}
.rtoc-mokuji-content button:hover {
  background: var(--c-mist-2) !important;
  border-color: var(--c-ink) !important;
}

/* サイドバー追従目次 */
.rtoc-sidebar-content {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--pol-r) !important;
  color: var(--c-text) !important;
  padding: 1rem 1.1rem !important;
}
.rtoc-sidebar-content a {
  color: var(--c-text) !important;
}
.rtoc-sidebar-content a:hover {
  color: var(--c-accent) !important;
}
.rtoc-sidebar-content .rtoc-sidebar-title,
.rtoc-sidebar-content .rtoc-title {
  color: var(--c-ink) !important;
  font-weight: 800 !important;
}

/* プラグインが出す装飾ドット類のカラーも統一 */
.rtoc-mokuji-content .rtoc-li-style,
.rtoc-mokuji-content .number1,
.rtoc-mokuji-content .round {
  color: var(--c-accent) !important;
}

/* ============================================================================
   31. カードデザインの仕上げ強化（CAPABILITIES / 比較カード / 料金 / FAQ）
   ============================================================================ */
/* CAPABILITIES（プロフィール内サービスカード）— アイコン地と縁取りを統一 */
.wn-svc-icon, .wn-service-icon {
  /* サイズと余白を強化 */
  width: 52px; height: 52px;
}
.wn-svc-icon svg { width: 26px; height: 26px; stroke-width: 1.8; }

/* 比較カード（直接相談 vs ココナラ）— is-recommended と通常の差をはっきり */
.wn-compare-card {
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2rem) !important;
}
.wn-compare-card.is-recommended {
  background: var(--c-ink) !important;
  color: #fff !important;
  border-color: var(--c-ink) !important;
  box-shadow: 0 22px 50px -14px rgba(15, 30, 90, 0.32) !important;
  position: relative;
}
.wn-compare-card.is-recommended .wn-compare-title { color: #fff !important; }
.wn-compare-card.is-recommended ul li {
  color: rgba(255, 255, 255, .92) !important;
  border-color: rgba(255, 255, 255, .15) !important;
}
.wn-compare-tag {
  background: var(--c-accent) !important;
  color: #fff !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 999px !important;
  font-weight: 800;
  font-size: .75rem !important;
  letter-spacing: .12em;
}

/* 比較カード — ダークモード対応
   ライト時の `.is-recommended` は bg: var(--c-ink) で濃紺。
   ダーク時は --c-ink が反転して明色になるため白文字が白地になり白飛び。
   ダーク時は accent でハイライトしつつ、bg は dark token で保つ。 */
html[data-theme="dark"] .wn-compare-card.is-recommended,
html[data-theme="dark"] .wn-compare-card.is-recommended:hover {
  background: linear-gradient(180deg, rgba(242, 107, 34, 0.14), rgba(242, 107, 34, 0.06)) !important;
  border-color: var(--c-accent) !important;
  color: var(--c-text) !important;
  box-shadow:
    0 22px 50px -14px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(242, 107, 34, 0.45) inset !important;
}
html[data-theme="dark"] .wn-compare-card.is-recommended .wn-compare-title {
  color: var(--c-text) !important;
}
html[data-theme="dark"] .wn-compare-card.is-recommended ul li {
  color: var(--c-text) !important;
  border-color: rgba(232, 238, 247, 0.18) !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .wn-compare-card.is-recommended,
  html:not([data-theme="light"]) .wn-compare-card.is-recommended:hover {
    background: linear-gradient(180deg, rgba(242, 107, 34, 0.14), rgba(242, 107, 34, 0.06)) !important;
    border-color: var(--c-accent) !important;
    color: var(--c-text) !important;
    box-shadow:
      0 22px 50px -14px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(242, 107, 34, 0.45) inset !important;
  }
  html:not([data-theme="light"]) .wn-compare-card.is-recommended .wn-compare-title {
    color: var(--c-text) !important;
  }
  html:not([data-theme="light"]) .wn-compare-card.is-recommended ul li {
    color: var(--c-text) !important;
    border-color: rgba(232, 238, 247, 0.18) !important;
  }
}

/* 料金プラン featured の差別化を強化 */
.wn-price-card.is-featured {
  border: 2px solid var(--c-ink) !important;
  box-shadow:
    0 26px 60px rgba(15, 30, 90, 0.18),
    0 0 0 6px rgba(255, 111, 61, 0.06);
}
.wn-price-card.is-featured::before {
  background: var(--c-accent) !important;
  font-weight: 800;
  letter-spacing: .12em;
  font-size: .75rem;
  padding: .4rem 1.1rem !important;
  box-shadow: 0 6px 16px -4px rgba(255, 111, 61, 0.5);
}

/* FAQ — open 状態をもっと印象的に
   ※ !important は使わない。225行目の `.wn-faq details[open]` を specificity で
   上書きする目的なら、ここでも同じセレクタなのでカスケード順（後勝ち）で十分。
   ダーク対応は 7197 行付近で html[data-theme="dark"] を前置することで specificity を上げて上書きする。 */
.wn-faq details[open] {
  background: #fff;
  border-color: var(--c-accent);
  box-shadow: 0 14px 36px rgba(255, 111, 61, 0.12);
}
.wn-faq summary { padding-right: 2.5rem; }

/* ============================================================================
   32. 余白の全体見直し — セクション・ギャップ・カード内部
   ============================================================================ */
:root {
  /* やや tighter にする */
  --section-y: clamp(3rem, 2rem + 4.5vw, 5.5rem);
  --section-y-tight: clamp(2rem, 1.5rem + 3vw, 3.5rem);
}

/* セクション間のリズム */
.wn-section { padding-block: var(--section-y); }
.wn-section + .wn-section { padding-top: 0; } /* 連続セクションは詰める */
.wn-section + .wn-section-compact { padding-top: 0; }

/* グリッドの gap を統一 */
.wn-services,
.wn-cases,
.wn-pricing,
.wn-flow,
.wn-compare,
.related__grid,
.post-list {
  gap: clamp(0.9rem, 0.7rem + 0.6vw, 1.25rem);
}

/* カード内 padding を少し詰める */
.wn-svc, .wn-service-card,
.wn-case,
.wn-price-card,
.wn-flow-step,
.wn-compare-card {
  padding: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem);
}

/* hero 内部上下マージンを引き締める */
.wn-hero {
  padding-block: clamp(3rem, 2.4rem + 4vw, 5.5rem);
}
.wn-hero-body { margin-bottom: 1.5rem; }
.wn-hero-actions { margin-top: 1rem; }

/* セクションタイトル下の余白を統一 */
.wn-section-title { margin-bottom: 0.75rem; }
.wn-section-lede {
  margin-bottom: clamp(1.5rem, 1.2rem + 0.8vw, 2.25rem);
}

/* container 上下マージン軽減 */
.layout {
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

/* モバイル時の余白タイト化 */
@media (max-width: 640px) {
  .wn-section { padding-block: clamp(2rem, 1.4rem + 3vw, 3rem); }
  .wn-hero { padding-block: clamp(2.5rem, 1.8rem + 4vw, 4rem); }
  .post-single, .page-default { padding: 1.1rem 1.2rem; }
  .container { padding-inline: 1rem; }
}

/* ============================================================================
   32b. フッターレイアウトの再バランス（左ブランド 1fr / 右リンク 2.5fr）
   ============================================================================ */
@media (min-width: 900px) {
  .site-footer__inner {
    grid-template-columns: 1fr 2.5fr !important;
    gap: 3rem !important;
  }
}
.site-footer__cols { gap: 1.5rem 2.5rem !important; }
.site-footer__col-title {
  font-size: .8125rem !important;
  letter-spacing: .16em !important;
  color: var(--c-accent) !important;
}
.site-footer__col-links a {
  font-size: .9rem !important;
  padding: .15rem 0 !important;
}
.site-footer__col-links a:hover {
  padding-left: .35rem !important;
}

/* SNS 領域が空のとき、見た目に違和感を残さない */
.site-footer__sns:empty { display: none; }

/* フッター タイポ refinement */
.site-footer__desc {
  font-size: .9rem !important;
  line-height: 1.85 !important;
  color: rgba(255, 255, 255, 0.62) !important;
}

/* ============================================================================
   33. プロフィールカード — 連結リンクをボタン風に整える
   ============================================================================ */
.wn-profile .wn-btn-ghost.wn-btn-sm,
.wn-profile .btn--ghost.btn--sm,
.wn-profile a.btn--ghost,
.wn-profile a.wn-btn-ghost {
  margin-top: 1rem;
  align-self: flex-start;
}

/* ============================================================================
   34. Browsers that don't support backdrop-filter — graceful fallback
   ============================================================================ */
@supports not (backdrop-filter: blur(2px)) {
  .wn-svc, .wn-service-card,
  .wn-case, .wn-profile, .wn-price-card, .wn-flow-step, .wn-compare-card,
  .wn-cta-mid, .cta--mid, .wn-cta-low, .cta--low,
  .wn-faq details,
  .widget, .related__card, .post-card,
  .post-single, .page-default,
  .footer-signal, .breadcrumb-wrap, .site-search,
  .error-404, .no-results,
  .comment-list .comment, .comment-respond {
    background: #FFFFFF;
    border-color: var(--c-border);
  }
  .wn-trust, .wn-trust-item { background: #FFFFFF; }
}

/* ============================================================================
   35. プライス「お見積」表示 — [要記入] 撤去後の代替表示
   ============================================================================ */
.wn-price-onask {
  font-size: .92em;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--c-ink);
  border-bottom: 2px solid var(--c-accent);
  padding-bottom: .12em;
  display: inline-block;
  line-height: 1.2;
}
.wn-price-card.is-featured .wn-price-onask { color: #fff; border-color: var(--c-cream); }

/* ============================================================================
   36. trust-bar — placeholder クラス除去後の整え
   ============================================================================ */
.wn-trust-num {
  white-space: nowrap;
  letter-spacing: -.01em;
}
.wn-trust-item {
  /* 短いテキストでも縦のリズムが崩れないように最低高さを確保 */
  min-height: 6.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
}
.wn-trust-label {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink-70);
  text-align: center;
  max-width: 26ch;
}

/* ============================================================================
   37. CTA "対応事例を見る" の outline ボタン — 視認性向上
   ============================================================================ */
.btn--ghost-light,
.btn--ghost.btn--ghost-light {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.62) !important;
  color: #FFFFFF !important;
  backdrop-filter: blur(6px);
}
.btn--ghost-light:hover,
.btn--ghost.btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* ============================================================================
   38. コメントセクション — テーマトーンに揃える
   ============================================================================ */
.comments {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--c-border);
}
.comments__title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--c-ink);
  margin-bottom: 1.5rem;
  padding-left: .75rem;
  border-left: 3px solid var(--c-accent);
  line-height: 1.4;
}
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
}
.comment-list__item {
  margin: 0 0 1.25rem;
  list-style: none;
}
.comment-list .children {
  list-style: none;
  padding-left: 1.5rem;
  margin: 1rem 0 0;
  border-left: 2px solid var(--c-border);
}
.comment-body {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-light));
  -webkit-backdrop-filter: blur(var(--glass-blur-light));
  border: 1px solid var(--glass-border);
  border-radius: var(--pol-r);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--glass-shadow);
}
.comment-body__head {
  display: flex;
  gap: .85rem;
  align-items: center;
  margin-bottom: .85rem;
}
.comment-body__avatar img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: block;
  border: 2px solid #FFF;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}
.comment-body__meta {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.comment-body__author {
  font-weight: 700;
  font-style: normal;
  color: var(--c-ink);
  font-size: .98rem;
}
.comment-body__author a {
  color: inherit;
  text-decoration: none;
}
.comment-body__author a:hover { color: var(--c-accent); }
.comment-body__date {
  font-size: .8rem;
  color: var(--ink-50);
  font-variant-numeric: tabular-nums;
}
.comment-body__text {
  color: var(--c-text);
  line-height: 1.85;
  font-size: .96rem;
}
.comment-body__text p:last-child { margin-bottom: 0; }
.comment-body__pending {
  color: var(--c-accent);
  font-size: .85rem;
  margin-bottom: .5rem;
}
.comment-body__foot {
  margin-top: .85rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: .82rem;
}
.comment-body__reply,
.comment-reply-link {
  display: inline-flex;
  align-items: center;
  padding: .35rem .85rem;
  border: 1px solid var(--c-border);
  border-radius: 100px;
  color: var(--c-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .82rem;
  background: rgba(255, 255, 255, .5);
  transition: all var(--pol-dur) var(--pol-ease);
}
.comment-body__reply:hover,
.comment-reply-link:hover {
  background: var(--c-ink);
  color: #fff;
  border-color: var(--c-ink);
}
.comments__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2rem 0;
  gap: 1rem;
}
.comments__closed {
  color: var(--ink-70);
  font-size: .9rem;
  padding: .85rem 1rem;
  background: var(--c-mist);
  border-radius: var(--pol-r-sm);
  text-align: center;
}

/* ---------- コメントフォーム ---------- */
.comment-form {
  margin-top: 2rem;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--pol-r-lg);
  padding: 1.85rem 1.85rem 1.5rem;
  box-shadow: var(--glass-shadow);
}
.comment-form__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--c-ink);
  margin-bottom: .85rem;
}
.comment-form__title small {
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-50);
  margin-left: .5rem;
}
.comment-form__notes {
  color: var(--ink-70);
  font-size: .85rem;
  margin-bottom: 1.25rem;
}
.comment-form__req {
  color: var(--c-accent);
  font-weight: 700;
}
.comment-form__field {
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.comment-form__field label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--c-ink);
}

/* ---------- 共通フォーム要素 ---------- */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.search-form input[type="search"],
.wp-block-search__input,
input[type="text"]:not(.is-hidden):not(.exclude-polish),
input[type="email"]:not(.is-hidden):not(.exclude-polish),
input[type="url"]:not(.is-hidden):not(.exclude-polish),
input[type="tel"]:not(.is-hidden):not(.exclude-polish),
input[type="number"]:not(.is-hidden):not(.exclude-polish),
input[type="password"]:not(.is-hidden):not(.exclude-polish),
textarea:not(.is-hidden):not(.exclude-polish),
select:not(.is-hidden):not(.exclude-polish) {
  width: 100%;
  padding: .7rem .95rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--c-text);
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--pol-r-sm);
  transition: border-color var(--pol-dur) var(--pol-ease), box-shadow var(--pol-dur) var(--pol-ease);
  font-family: inherit;
  box-sizing: border-box;
}
textarea:not(.exclude-polish) { resize: vertical; min-height: 7rem; }
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(255, 111, 61, .14);
}
.comment-form .form-submit { margin-top: 1rem; }
.comment-form .submit {
  /* Use .btn already declared in main.css */
  cursor: pointer;
}

/* ============================================================================
   39. Contact Form 7 — 既存フォームに合わせて整える（既存仕様変更なし）
   ============================================================================ */
.wpcf7 form { display: flex; flex-direction: column; gap: 1rem; }
.wpcf7 label { display: flex; flex-direction: column; gap: .35rem; font-size: .88rem; font-weight: 600; color: var(--c-ink); }
.wpcf7-response-output {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--pol-r-sm) !important;
  padding: .85rem 1rem !important;
  font-size: .92rem !important;
}
.wpcf7-not-valid-tip {
  color: var(--c-accent) !important;
  font-size: .85rem !important;
  margin-top: .25rem;
}
.wpcf7-submit { cursor: pointer; }

/* ============================================================================
   40. 表 (table) — 統一トーン
   ============================================================================ */
.prose table,
.page-default__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: .94rem;
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--pol-r-sm);
  overflow: hidden;
}
.prose table th,
.page-default__content table th {
  background: var(--c-mist);
  color: var(--c-ink);
  font-weight: 700;
  text-align: left;
  padding: .75rem 1rem;
  border-bottom: 2px solid var(--c-border);
  font-size: .92rem;
}
.prose table td,
.page-default__content table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.prose table tr:last-child td,
.page-default__content table tr:last-child td { border-bottom: none; }
.prose table tr:nth-child(even) td { background: rgba(238, 243, 255, .35); }

/* ============================================================================
   41. コードブロック & インラインコード — 読みやすさ
   ============================================================================ */
.prose code:not(pre code),
.page-default__content code:not(pre code) {
  background: rgba(15, 30, 90, .06);
  color: var(--c-ink);
  padding: .12em .4em;
  border-radius: 4px;
  font-size: .88em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  border: 1px solid rgba(15, 30, 90, .08);
}
.prose pre,
.page-default__content pre,
pre.wp-block-code {
  background: var(--c-ink);
  color: #DDE6FA;
  padding: 1.1rem 1.25rem;
  border-radius: var(--pol-r-sm);
  overflow-x: auto;
  font-size: .88rem;
  line-height: 1.65;
  margin: 1.25rem 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
}
.prose pre code,
pre.wp-block-code code {
  background: transparent;
  color: inherit;
  padding: 0;
  border: none;
  font-size: inherit;
}

/* ============================================================================
   42. アーカイブ／検索ヒーロー — 統一の Eyebrow → 大見出し → リード構造
   ============================================================================ */
.archive-hero {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(180deg, rgba(238, 243, 255, .65) 0%, transparent 100%);
}
.archive-hero__eyebrow {
  display: inline-block;
  padding: .25rem .85rem;
  background: rgba(255, 111, 61, .12);
  color: var(--c-accent);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .18em;
  border-radius: 100px;
  text-transform: uppercase;
  margin-bottom: .85rem;
}
.archive-hero__title {
  font-size: clamp(1.5rem, 3.4vw, 2.15rem);
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1.35;
  letter-spacing: -.01em;
  margin: 0 0 .65rem;
}
.archive-hero__title em {
  font-style: normal;
  color: var(--c-accent);
  font-weight: 800;
}
.archive-hero__lede {
  color: var(--ink-70);
  font-size: .98rem;
  line-height: 1.85;
  max-width: 56ch;
}
.archive-hero__search {
  max-width: 36rem;
  margin-top: 1.25rem;
}

/* ============================================================================
   43. ページネーション — 統一トーン
   ============================================================================ */
.navigator-pagination,
.wp-block-query-pagination,
.nav-links {
  display: flex;
  gap: .5rem;
  justify-content: center;
  align-items: center;
  margin: 2.5rem 0;
  flex-wrap: wrap;
}
.navigator-pagination a,
.navigator-pagination span,
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 .85rem;
  border: 1px solid var(--c-border);
  border-radius: var(--pol-r-sm);
  background: rgba(255, 255, 255, .65);
  color: var(--c-ink);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--pol-dur) var(--pol-ease);
  font-size: .92rem;
}
.navigator-pagination a:hover,
.page-numbers:hover {
  background: var(--c-ink);
  color: #fff;
  border-color: var(--c-ink);
  transform: translateY(-1px);
}
.navigator-pagination .current,
.page-numbers.current {
  background: var(--c-ink);
  color: #fff;
  border-color: var(--c-ink);
  cursor: default;
}

/* ============================================================================
   44. post-card プレースホルダー — 画像未設定時のフォールバック
   ============================================================================ */
.post-card__media--placeholder {
  background: linear-gradient(135deg, var(--c-mist) 0%, var(--c-mist-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.post-card__media--placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 111, 61, .04) 0, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(15, 30, 90, .04) 0, transparent 50%);
}
.post-card__placeholder-mark {
  position: relative;
  font-size: 2.25rem;
  font-weight: 800;
  color: rgba(15, 30, 90, .22);
  letter-spacing: -.02em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ============================================================================
   45. post-nav (前後の記事) — 統一トーン
   ============================================================================ */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2.5rem 0;
}
.post-nav__prev,
.post-nav__next {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur-light));
  -webkit-backdrop-filter: blur(var(--glass-blur-light));
  border: 1px solid var(--glass-border);
  border-radius: var(--pol-r);
  padding: 1rem 1.25rem;
  transition: all var(--pol-dur) var(--pol-ease);
}
.post-nav__prev:hover,
.post-nav__next:hover {
  background: var(--glass-bg-strong);
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow-hover);
}
.post-nav__next { text-align: right; }
.post-nav a {
  color: var(--c-ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.post-nav__label {
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--c-accent);
  font-weight: 700;
}
.post-nav__title {
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 640px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav__next { text-align: left; }
}

/* ============================================================================
   46. Glass 過剰適用の是正 — 本文・コンテンツエリア・全カード一律は禁止
   原典プロンプト「Glassmorphism は既存要素の一部だけに限定」を厳守
   ============================================================================ */
.prose,
.post-single__content,
.page-default__content {
  /* 本文エリアには Glass を付けない */
  background: transparent !important;
  backdrop-filter: none !important;
}
.post-single__content > p,
.post-single__content > h2,
.post-single__content > h3,
.post-single__content > ul,
.post-single__content > ol {
  /* 本文中の素のブロックには Glass を絶対適用しない */
  background: transparent;
  backdrop-filter: none;
}

/* ============================================================================
   47. Brand palette application — 2026-05 banner-derived colors
   New brand: deep navy (ink) / vibrant blue / gold / coral.
   ============================================================================ */

/* Topbar: deep navy with subtle gold accent (matches banner top strip) */
.site-topbar {
  background: linear-gradient(180deg, #0F1E5A 0%, #142565 100%) !important;
}
.site-topbar__cta { color: var(--c-yellow) !important; }
.site-topbar__cta:hover { color: #FFD550 !important; }

/* Eyebrow chips (BEFORE YOU TOUCH / CHANNELS / SERVICES / etc.) — keep coral
   for action sections, switch to blue for informational sections */
.archive-hero__eyebrow,
.wn-hero__eyebrow,
.wn-svc-eyebrow,
.wn-eyebrow {
  background: var(--c-accent-soft) !important;
  color: var(--c-accent-deep) !important;
}

/* Section eyebrows (small caps lines) — match banner energy */
.wn-section__eyebrow,
.section-eyebrow,
[class*="__eyebrow"]:not(.archive-hero__eyebrow):not(.wn-hero__eyebrow) {
  color: var(--c-accent) !important;
}

/* Trust bar stars become real gold */
.wn-trust-num,
.wn-trust .wn-trust-num {
  color: var(--c-ink);
}
.wn-trust-num:has(:contains("★")),
.wn-trust-item:nth-child(3) .wn-trust-num { /* Not perfectly targetable, use stars in actual chars */
  color: var(--c-ink);
}

/* Links inside body get a hint of brand blue, keeping coral for action affordances */
.prose a:not(.btn):not(.wn-btn):not([class*="card"]) {
  color: var(--c-blue);
  text-decoration-color: rgba(37, 98, 221, .35);
}
.prose a:not(.btn):not(.wn-btn):not([class*="card"]):hover {
  color: var(--c-blue-deep);
  text-decoration-color: var(--c-blue);
}

/* Primary CTA stays coral (matches banner's orange "症状だけ送ってOK" button) */
.btn--primary,
.wn-btn-primary {
  background: var(--c-ink) !important;
  color: #FFFFFF !important;
}
.btn--primary:hover,
.wn-btn-primary:hover {
  background: var(--c-blue) !important;
  transform: translateY(-1px);
}

/* "Action" coral button variant — for high-energy CTAs */
.btn--accent,
.wn-btn-accent {
  background: var(--c-accent) !important;
  color: #FFFFFF !important;
  border-color: var(--c-accent) !important;
}
.btn--accent:hover,
.wn-btn-accent:hover {
  background: var(--c-accent-deep) !important;
  border-color: var(--c-accent-deep) !important;
}

/* WordPress mentions in body get a brand blue tint when wrapped in <strong>WordPress</strong>
   (only when explicitly tagged — kept conservative) */
.prose strong.wp-brand,
.post-single__content strong.wp-brand {
  color: var(--c-blue) !important;
  background: transparent !important;
  padding: 0;
}

/* Tag/category badges — use blue tint for variety against coral accents */
.post-card__cat,
.post-single__cat a,
.post-card .wn-tag {
  background: var(--c-blue-soft) !important;
  color: var(--c-blue-deep) !important;
}

/* Sidebar CTA top tile — keep dark, but accent the action with gold */
.widget.cta--top .btn,
.widget.cta--top .wn-btn {
  background: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
}

/* Emergency band: stays warm coral on cream-warm bg (matches banner red exclamation) */
.emergency-band {
  background: linear-gradient(90deg, #FFE2D2 0%, #FFEFE5 100%) !important;
  border-left: 3px solid var(--c-accent) !important;
}
.emergency-band__icon {
  background: var(--c-accent) !important;
  color: #FFF !important;
}
.emergency-band__btn {
  background: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  color: #FFF !important;
}

/* Highlights / strong tags get gold underline (subtle, matches banner highlight bar) */
.prose strong:not(.wp-brand):not(.no-mark),
.post-single__content strong:not(.wp-brand):not(.no-mark) {
  background: linear-gradient(transparent 65%, rgba(242, 177, 0, 0.30) 65%);
}

/* Pagination current — blue instead of coral for nav indicators */
.page-numbers.current,
.navigator-pagination .current {
  background: var(--c-blue) !important;
  border-color: var(--c-blue) !important;
}

/* Hero accent line above headline — keep coral but slightly brighter */
.wn-hero::before,
.archive-hero__eyebrow::before {
  background: var(--c-accent);
}

/* Footer signal — near-white canvas, yellow marker accent under the title */
.footer-signal {
  background:
    radial-gradient(40% 45% at 100% 100%, rgba(254, 216, 0, .10) 0%, transparent 65%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%) !important;
  color: var(--c-ink) !important;
  border-top: 1px solid rgba(27, 37, 71, .08);
}
.footer-signal__eyebrow {
  color: var(--c-accent-deep, #D45417) !important;
  letter-spacing: .18em;
}
.footer-signal__title,
.footer-signal__body {
  color: var(--c-ink) !important;
}
/* Yellow highlighter under the title — banner の WordPress 下線と同じ印象。
   旧実装は `background-image` + `display: inline` で、ブロック化すると
   背景が全幅まで伸びる問題が出る。`text-decoration` underline を
   太く・テキスト直下にオフセットして、ブロック要素でも常に文字幅に
   ぴったり収まる highlighter を実現する。 */
.footer-signal__title {
  background: none !important;
  padding-inline: 0;
  text-decoration: underline rgba(254, 216, 0, .55);
  text-decoration-thickness: .45em;
  text-decoration-skip-ink: none;
  text-underline-offset: -.18em;
}

/* ============================================================================
   BRAND DECORATION UTILITIES (banner-style title decoration)
   ============================================================================ */
/* .brand-marker — yellow highlighter stroke under text (use on <span>) */
.brand-marker {
  background-image: linear-gradient(
    transparent 60%,
    rgba(254, 216, 0, .65) 60%,
    rgba(254, 216, 0, .65) 92%,
    transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-inline: .12em;
}
.brand-marker--soft {
  background-image: linear-gradient(
    transparent 68%,
    rgba(254, 216, 0, .45) 68%,
    rgba(254, 216, 0, .45) 92%,
    transparent 92%);
}
/* .brand-keyword — blue underline + slightly bolder feel for keyword "WordPress" */
.brand-keyword {
  color: var(--c-blue, #3D5BBF);
  font-weight: 800;
  position: relative;
  padding-inline: 2px;
}
/* .brand-pill — small navy badge-style accent (for prefix labels) */
.brand-pill {
  display: inline-block;
  padding: .15em .55em;
  background: var(--c-ink, #1B2547);
  color: #fff;
  font-size: .82em;
  font-weight: 700;
  border-radius: 6px;
  margin-right: .35em;
  vertical-align: .08em;
}

/* Auto-apply marker to hero title's <em> on the photo hero pages.
   The <em> element is already used for "触る前に、正しく見極める。" — give it a marker */
.wn-hero--with-photo .wn-hero-title em {
  display: inline;
  background-image: linear-gradient(
    transparent 65%,
    rgba(254, 216, 0, .55) 65%,
    rgba(254, 216, 0, .55) 95%,
    transparent 95%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-inline: .1em;
  /* color of <em> is still accent orange from main.css, but now with yellow marker beneath */
}
.footer-signal .btn--ghost-light,
.footer-signal .btn--ghost.btn--ghost-light {
  background: rgba(255, 255, 255, .85) !important;
  border-color: rgba(11, 27, 56, .25) !important;
  color: var(--c-ink) !important;
}
.footer-signal .btn--ghost-light:hover,
.footer-signal .btn--ghost.btn--ghost-light:hover {
  background: #FFFFFF !important;
  border-color: var(--c-ink) !important;
  color: var(--c-ink) !important;
}

/* Site footer — DEEP NAVY base (matches banner's bottom band) */
.site-footer {
  background: linear-gradient(180deg, #1B2547 0%, #131B36 100%) !important;
  color: rgba(255, 255, 255, .85) !important;
  border-top: 0 !important;
}
.site-footer .site-footer__desc {
  color: rgba(255, 255, 255, .68) !important;
}
.site-footer__name,
.site-footer__brand .site-footer__logo {
  color: #FFFFFF !important;
}
.site-footer a,
.site-footer__col-links a {
  color: rgba(255, 255, 255, .82) !important;
}
.site-footer a:hover,
.site-footer__col-links a:hover {
  color: var(--c-yellow, #FED800) !important;
}
.site-footer__col-title {
  color: var(--c-yellow, #FED800) !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
}
.site-footer__sns-link {
  color: rgba(255, 255, 255, .82) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  background: rgba(255, 255, 255, .06) !important;
}
.site-footer__sns-link:hover {
  color: var(--c-ink) !important;
  border-color: var(--c-yellow, #FED800) !important;
  background: var(--c-yellow, #FED800) !important;
}
.site-footer__base {
  border-top: 1px solid rgba(255, 255, 255, .10) !important;
  color: rgba(255, 255, 255, .58) !important;
  background: rgba(0, 0, 0, .12);
}
.site-footer__base a {
  color: rgba(255, 255, 255, .58) !important;
}
.site-footer__base a:hover {
  color: var(--c-yellow, #FED800) !important;
}
.site-footer__base strong {
  color: #FFFFFF !important;
}
/* Footer wordmark: needs to read on navy — invert the dark text wordmark via filter */
.site-footer .site-brand__wordmark,
.site-footer__brand .site-brand__wordmark {
  filter: invert(1) brightness(1.05);
}

/* Bottom-nav: deep navy for cohesion */
.bottom-nav {
  background: rgba(15, 30, 90, 0.94) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #FFFFFF;
}
.bottom-nav__item { color: rgba(255, 255, 255, .72) !important; }
.bottom-nav__item:hover,
.bottom-nav__item.is-active { color: var(--c-yellow) !important; }
.bottom-nav__item--emergency .bottom-nav__emergency-mark {
  background: var(--c-accent) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(255, 111, 61, .25);
}

/* TOC widget — keep light glass, hint blue accent for the active number */
.rtoc-item.is-active,
.rtoc-mokuji .level-1 > .rtoc-item:first-child {
  color: var(--c-blue-deep);
}

/* Mobile drawer: deep navy + gold hover
   2026-05-26 修正: 旧アーキテクチャ(.mobile-drawer が直接スライド要素)時代の
   遺物として .mobile-drawer に navy 背景がついていた。新方式では .mobile-drawer は
   position:fixed; inset:0 の全画面コンテナで、ここに navy を塗ると drawer が
   閉じている状態でも全画面 navy になってしまうため、navy 背景を __panel に移動。 */
.mobile-drawer__panel {
  background: linear-gradient(180deg, #0F1E5A 0%, #0A1545 100%) !important;
  color: #FFFFFF;
}
.mobile-drawer__list a,
.mobile-drawer a { color: rgba(255, 255, 255, .88) !important; }
.mobile-drawer__list a:hover,
.mobile-drawer a:hover { color: var(--c-yellow) !important; }

/* ============================================================================
   48. V3 ブラッシュアップ — PDF 16 冊深掘り知見の実装
   原典: PDF_BRUSHUP_PLAYBOOK_V3.md
   ============================================================================ */

/* ---- 48.1 文字底上げ（見えにくい・読みにくい 3-2 対応）
   12-13px 帯の小さな文字を 13-14px に上げて、文子さん（72歳）でも読める底値に */
.post-card__meta,
.post-card__date,
.post-card__rt,
.post-single__meta time,
.post-single__meta .post-single__cat,
.comment-body__date,
.site-footer__col-links a,
.site-topbar,
.site-topbar__hours,
.site-topbar__phone,
.comment-form__notes,
.bottom-nav__label,
.breadcrumb-wrap,
small,
.wn-trust-label {
  font-size: max(13px, .82rem) !important;
  line-height: 1.55;
}
.site-topbar__cta { font-size: max(13px, .85rem) !important; font-weight: 600; }

/* ---- 48.2 「対比」原則 — STANDARD カードの強調（バナー教科書 4 原則）
   料金 STANDARD / 推奨カードを 5% 強く見せる、影もぐっと深く */
.wn-price-card.is-featured,
.wn-svc.is-recommended,
.wn-compare-card.is-recommended {
  transform: scale(1.03);
  box-shadow:
    0 28px 60px rgba(15, 30, 90, 0.18),
    0 8px 20px rgba(255, 111, 61, 0.10);
  border: 2px solid var(--c-accent);
  position: relative;
  z-index: 2;
}
.wn-price-card.is-featured:hover,
.wn-svc.is-recommended:hover {
  transform: scale(1.04) translateY(-3px);
}
.wn-price-card.is-featured::before,
.wn-svc.is-recommended::before {
  content: "おすすめ";
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--c-accent);
  color: #FFFFFF;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  padding: .35rem 1rem;
  border-radius: 100px;
  box-shadow: 0 4px 12px rgba(255, 111, 61, 0.35);
  white-space: nowrap;
}

/* ---- 48.3 CTA ボタンの「対比」強化
   プライマリと ghost の視覚重量差を明確に */
.btn--primary,
.wn-btn-primary,
.btn.btn--primary,
.btn--lg.btn--primary {
  font-weight: 800 !important;
  letter-spacing: .02em;
  box-shadow: 0 6px 18px rgba(15, 30, 90, 0.25);
}
.btn--primary:hover,
.wn-btn-primary:hover {
  box-shadow: 0 10px 28px rgba(15, 30, 90, 0.35);
  transform: translateY(-2px);
}
.btn--ghost,
.wn-btn-ghost {
  font-weight: 600 !important;
  letter-spacing: 0;
  /* Slightly smaller to create hierarchy */
}
@media (min-width: 768px) {
  /* On wider screens, make hero primary clearly biggest */
  .wn-hero .btn--primary,
  .wn-hero .wn-btn-primary {
    padding: 1rem 1.85rem;
    font-size: 1.05rem;
    min-height: 3.4rem;
  }
  .wn-hero .btn--ghost,
  .wn-hero .wn-btn-ghost {
    padding: .9rem 1.5rem;
    font-size: .98rem;
  }
}

/* ---- 48.4 SVG アイコン a11y — :hover での title 表示で意味補強 */
[aria-label]:hover {
  /* Don't override default title — just visual cue */
}
.site-header__cta svg,
.bottom-nav__icon,
.site-footer__sns-link svg,
.btn svg,
.wn-btn svg {
  pointer-events: none; /* SVG が tooltip を奪わない */
}

/* ---- 48.5 専門用語 abbr — 略語に下線でクリッカブル感 */
abbr[title] {
  text-decoration: underline dotted var(--c-accent);
  text-underline-offset: 3px;
  cursor: help;
  -webkit-text-decoration: underline dotted var(--c-accent);
}
abbr[title]:hover {
  background: var(--c-accent-soft);
  border-radius: 3px;
  padding: 0 .15em;
}

/* ---- 48.6 エラー表現（UI アイデア帳 #07）— CF7 エラー文言の存在感 */
.wpcf7-not-valid-tip {
  display: inline-flex !important;
  align-items: center;
  gap: .3rem;
  padding: .35rem .75rem !important;
  background: var(--c-accent-soft) !important;
  border: 1px solid var(--c-accent) !important;
  border-radius: var(--pol-r-sm) !important;
  color: var(--c-accent-deep) !important;
  margin-top: .35rem !important;
  font-weight: 600 !important;
  font-size: .85rem !important;
}
.wpcf7-not-valid-tip::before {
  content: "⚠";
  font-size: 1rem;
  flex-shrink: 0;
}
.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-response-output.wpcf7-acceptance-missing {
  background: var(--c-accent-soft) !important;
  border-color: var(--c-accent) !important;
  color: var(--c-accent-deep) !important;
  font-weight: 600;
}
.wpcf7-response-output.wpcf7-mail-sent-ok {
  background: rgba(95, 175, 95, 0.10) !important;
  border-color: rgb(95, 175, 95) !important;
  color: rgb(50, 120, 50) !important;
}

/* ---- 48.7 クリック範囲拡張（UI アイデア帳 #16）— card 全体がリンク領域 */
.post-card { position: relative; }
.post-card a.post-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Maintain visual layout but expand hitbox */
}
.post-card a.post-card__link > * { position: relative; z-index: 2; }
.post-card:hover { cursor: pointer; }

.wn-svc { position: relative; }
.wn-svc a:not(.btn):not(.wn-btn) {
  /* Service card detail link — make full card clickable on mobile */
}
@media (hover: hover) {
  .wn-svc:hover {
    transform: translateY(-3px);
    transition: transform var(--pol-dur) var(--pol-ease);
  }
}

/* ---- 48.8 :focus-visible の徹底 — 思考法・操作性向上 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--c-accent) !important;
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-offset .12s ease;
}
/* キーボード以外（マウス）では出さない */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* ---- 48.9 数字を大きく見せる（バナー教科書 #08 インパクト） */
.wn-trust-num {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem) !important;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.post-meta__rt strong,
.post-single__meta__rt strong,
.wn-stat__num {
  font-size: 1.4em;
  font-weight: 800;
  color: var(--c-accent);
}

/* ---- 48.10 hero の余白とリズム（思考法 審美性） */
.wn-hero__eyebrow,
.archive-hero__eyebrow {
  margin-bottom: 1rem;
}
.wn-hero__title,
.archive-hero__title {
  margin-bottom: .85rem;
}
.wn-hero__lede {
  margin-bottom: 1.85rem;
}
.wn-hero__actions {
  gap: 1rem;
}

/* ---- 48.11 サイドバーウィジェット 整理（UI アイデア帳 #05 削る） */
.widget {
  margin-bottom: 1.5rem;
}
.widget--toc {
  /* Already polished in §30; keep prominent */
}

/* ---- 48.12 「同じ場所に戻れる」(操作性 + 学習しやすさ) — sticky bottom nav の hit area */
.bottom-nav__item {
  padding: .5rem .25rem .65rem;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  font-size: .72rem;
  letter-spacing: .04em;
  transition: color var(--pol-dur) var(--pol-ease);
}

/* ---- 48.13 自己同一性 — キャラクター・アバター登録時の表示準備
   wn_speaker のアバターがプロフィールカードで使える受け皿 */
.wn-profile__avatar img {
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-mist);
}
.wn-profile__avatar.is-character img {
  /* キャラクター画像の場合は背景透過＋影で浮かせる */
  background: linear-gradient(135deg, #FFF8E5, #FFEFC2);
  padding: .5rem;
  box-shadow: 0 8px 24px rgba(242, 177, 0, 0.18);
}

/* ============================================================================
   49. V3 コンテンツ追加分のスタイル
   ============================================================================ */

/* ---- 49.1 hero Affinity 一行 — リードの直下、運営者の声として浮かせる */
.wn-hero__affinity {
  margin: 1.5rem 0 1.85rem !important;
  padding: 1rem 1.25rem;
  background: var(--c-mist);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--pol-r-sm) var(--pol-r-sm) 0;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--c-ink);
  max-width: 36em;
  position: relative;
}
.wn-hero__affinity strong {
  color: var(--c-accent-deep);
  background: linear-gradient(transparent 65%, rgba(242, 177, 0, 0.30) 65%);
  padding: 0 .1em;
  font-weight: 700;
}
.wn-hero__affinity::before {
  content: "—";
  display: inline-block;
  color: var(--c-accent);
  margin-right: .4em;
  font-weight: 700;
}
@media (max-width: 640px) {
  .wn-hero__affinity {
    font-size: .94rem;
    padding: .85rem 1rem;
  }
}

/* ---- 49.2 wp-maintenance STANDARD 推奨バナー — 4 つの ONE 原則の実装 */
.wn-plan-recommend {
  background: linear-gradient(135deg, var(--c-accent-soft) 0%, var(--c-yellow-soft) 100%);
  border: 1.5px solid var(--c-accent);
  border-radius: var(--pol-r);
  padding: 1rem 1.5rem;
  text-align: center;
  margin: 1.5rem auto 2rem;
  max-width: 36em;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--c-ink);
  box-shadow: 0 6px 18px rgba(255, 111, 61, 0.10);
}
.wn-plan-recommend strong {
  display: inline-block;
  font-size: 1.15em;
  font-weight: 800;
  color: var(--c-accent-deep);
  margin-right: .3em;
}
.wn-plan-recommend small {
  display: block;
  font-size: .8rem;
  color: var(--c-text-mute);
  margin-top: .35rem;
  line-height: 1.6;
}


/* ============================================================================
   50. ブランド画像の実表示適用 — footer/drawer/profile/post-card
   ============================================================================ */

/* ---- 50.1 footer ロゴ画像（custom_logo） */
.site-footer__logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--pol-r-sm);
  padding: 6px;
}
.site-footer__logo { gap: .75rem; align-items: center; }

/* ---- 50.2 mobile-drawer ロゴ画像 */
.mobile-drawer__logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}
.mobile-drawer__brand { gap: .75rem; align-items: center; }

/* ---- 50.3 プロフィールアバター（キャラクター画像版） */
.wn-profile__avatar.is-character {
  background: linear-gradient(135deg, var(--c-yellow-soft) 0%, #FFE5C2 100%);
  border-radius: 50%;
  padding: 8px;
  box-shadow:
    0 10px 30px rgba(242, 177, 0, 0.18),
    0 4px 10px rgba(255, 111, 61, 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
}
.wn-profile__avatar.is-character img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wn-profile__avatar-img {
  border-radius: 50%;
  width: 160px;
  height: 160px;
  object-fit: cover;
  background: var(--c-yellow-soft);
  padding: 6px;
  box-shadow: 0 10px 30px rgba(242, 177, 0, 0.18);
}

/* ---- 50.4 post-card プレースホルダーをロゴ画像に */
.post-card__placeholder-logo {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain;
  opacity: 0.65;
  filter: saturate(0.85);
}
.post-card__media--placeholder {
  /* 背景は §44 で既に定義済（mist グラデ） */
  padding: 0;
}

/* ============================================================================
   50b. プロフィールアバター キャラ化のクラス名揃え（ハイフン式実装）
   ============================================================================ */
.wn-profile-avatar.is-character {
  background: linear-gradient(135deg, var(--c-yellow-soft) 0%, #FFE5C2 100%) !important;
  border-radius: 50% !important;
  padding: 8px !important;
  box-shadow:
    0 10px 30px rgba(242, 177, 0, 0.18),
    0 4px 10px rgba(255, 111, 61, 0.10) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: clamp(140px, 18vw, 180px) !important;
  height: clamp(140px, 18vw, 180px) !important;
  font-size: 0 !important;
  overflow: hidden;
  color: transparent;
}
.wn-profile-avatar.is-character img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #FFFFFF;
}


/* ============================================================================
   51. LP hero キャラクター装飾
   ============================================================================ */

/* wn-hero を relative にしてキャラを絶対配置できるように */
.wn-hero {
  position: relative;
  overflow: hidden;
}

.wn-hero__char-decor {
  margin: 0;
  position: absolute;
  right: 2vw;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(120px, 18vw, 220px);
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 8px 24px rgba(15, 30, 90, 0.18));
}
.wn-hero__char-decor img {
  width: 100%;
  height: auto;
  display: block;
}
.wn-hero__char-bubble {
  position: absolute;
  top: -10%;
  left: -8%;
  background: #FFFFFF;
  color: var(--c-ink);
  font-weight: 800;
  font-size: clamp(.85rem, 1.2vw, 1rem);
  padding: .45rem 1rem;
  border-radius: 100px;
  border: 2px solid var(--c-accent);
  box-shadow: 0 6px 16px rgba(255, 111, 61, 0.25);
  white-space: nowrap;
  transform: rotate(-8deg);
  animation: charBubblePulse 2.2s ease-in-out infinite;
}
@keyframes charBubblePulse {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(-8deg) scale(1.05); }
}

/* hero テキストエリアにマージンを取って、キャラとの重なり回避 */
@media (min-width: 768px) {
  .wn-hero__title,
  .wn-hero__lede,
  .wn-hero__actions,
  .wn-hero__affinity,
  .wn-hero__eyebrow {
    max-width: calc(100% - clamp(140px, 22vw, 260px));
  }
}

/* モバイル: キャラを下に小さく */
@media (max-width: 767px) {
  .wn-hero__char-decor {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: clamp(90px, 30vw, 140px);
    margin: 1rem auto 0;
  }
  .wn-hero__char-bubble {
    font-size: .8rem;
    padding: .35rem .75rem;
  }
}


/* ============================================================================
   52. セクション内余白の正規化 — 全固定ページ共通
   
   原則:
   - section の上下 padding は --section-y で統一
   - section 内部の縦リズムは 5 段階スケール
     · eyebrow → title:           .65rem
     · title   → lede:           1rem
     · lede    → grid/cards:     2rem
     · cards   → 末尾 CTA:        2.5rem
     · section の末尾 → 次の section: --section-y
   ============================================================================ */

:root {
  --sec-eyebrow-to-title: clamp(.5rem, .35rem + .5vw, .85rem);
  --sec-title-to-lede:    clamp(.75rem, .5rem + .65vw, 1.1rem);
  --sec-lede-to-grid:     clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  --sec-grid-to-cta:      clamp(2rem, 1.5rem + 1.8vw, 3rem);
  --sec-cta-bottom:       clamp(1rem, .5rem + 1vw, 2rem);
  --sec-inner-stack:      clamp(1.25rem, .85rem + 1.2vw, 2rem);
}

/* 共通: section ラッパー (front-page LP 内の各セクション) */
.wn-section,
section.wn-section,
.wn-services,
.wn-cases,
.wn-flow,
.wn-pricing-section,
.wn-faq-section,
.wn-trust-section,
.wn-cta-section,
section[class*="wn-"]:not(.wn-hero) {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* eyebrow → title */
.wn-section__eyebrow,
.wn-eyebrow,
section [class*="__eyebrow"]:not(.archive-hero__eyebrow),
section .eyebrow {
  margin-bottom: var(--sec-eyebrow-to-title) !important;
}

/* title → lede / 次の要素 */
.wn-section__title,
.wn-section-title,
section h2:not(.post-single__title):not(.archive-hero__title),
.wn-services h2,
.wn-cases h2,
.wn-pricing h2,
.wn-faq h2,
.wn-flow h2 {
  margin-bottom: var(--sec-title-to-lede) !important;
}

/* lede / 説明文 → grid / cards */
.wn-section__lede,
.wn-section-lede,
.wn-lede,
section > p:first-of-type,
section .container > p:first-of-type {
  margin-bottom: var(--sec-lede-to-grid) !important;
}

/* lede の連続段落（2 行目）はインライン感を保つ */
.wn-section__lede + .wn-section__lede,
.wn-lede + .wn-lede,
section > p + p {
  margin-top: -.5rem !important;
  margin-bottom: var(--sec-lede-to-grid) !important;
}

/* grid / cards 共通 — 内部の card 間 gap を統一 */
.wn-services,
.wn-cases,
.wn-pricing,
.wn-flow-list,
.wn-faq-list,
.wn-compare,
.wn-trust,
[class*="-grid"] {
  gap: clamp(1rem, .75rem + .8vw, 1.5rem) !important;
}

/* grid / cards → 末尾 CTA */
.wn-services + .wn-cta-mid,
.wn-cases + .wn-cta-mid,
.wn-services + a.btn,
.wn-cases + a.btn,
.wn-pricing + a.btn,
section .container > .btn:last-child,
section .container > a.btn:last-child {
  margin-top: var(--sec-grid-to-cta) !important;
}

/* 「全事例を見る」など center align の末尾リンクボタン */
.wn-section__more,
section .center-link,
section > .text-center:last-child {
  margin-top: var(--sec-grid-to-cta);
  text-align: center;
}

/* container 内の縦スタック - 統一リズム */
section .container > * + *,
.wn-section .container > * + * {
  margin-top: var(--sec-inner-stack);
}
/* ただし上記既定義の特定要素間スペースは尊重 */
section .container > [class*="__eyebrow"] + h2,
section .container > [class*="__eyebrow"] + [class*="__title"] {
  margin-top: var(--sec-eyebrow-to-title) !important;
}

/* セクション内のリスト → 適切な余白 */
section ul,
section ol {
  margin-bottom: var(--sec-inner-stack);
}

/* card 内の余白 — 統一 padding */
.wn-svc,
.wn-case,
.wn-flow-step,
.wn-price-card,
.wn-faq-item details,
.wn-compare-card,
.wn-profile {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

/* card 内のヘッダ → 本文 */
.wn-svc-title,
.wn-case-title,
.wn-price-tier,
.wn-flow-step-title,
.wn-compare-card-title,
[class*="-card-title"],
[class*="card__title"] {
  margin-bottom: clamp(.5rem, .35rem + .35vw, .85rem) !important;
}

/* card 内の本文 → 次の要素（リスト/ボタン） */
.wn-svc-desc,
.wn-case-desc,
.wn-price-note,
.wn-flow-step-desc,
[class*="-card-desc"],
[class*="card__desc"] {
  margin-bottom: clamp(.75rem, .5rem + .65vw, 1.1rem);
}

/* hero と最初のセクションの境界 — 余白を半分にして連続感 */
.wn-hero + section,
.wn-hero + .wn-section,
.wn-hero + .wn-services,
.wn-hero + .wn-trust {
  padding-top: calc(var(--section-y) * 0.85);
}

/* 最後のセクション → footer-signal の境界 — 余白を縮める */
section:last-of-type,
.wn-section:last-of-type,
.page-lp > *:last-child:not(.footer-signal) {
  padding-bottom: calc(var(--section-y) * 0.9);
}

/* article (page-lp) の親コンテナ — 横余白を統一 */
.page-lp section,
.page-lp .container,
article.page-lp > section {
  padding-left: var(--container-pad, clamp(1rem, .5rem + 2vw, 2rem));
  padding-right: var(--container-pad, clamp(1rem, .5rem + 2vw, 2rem));
}

/* 「BEFORE YOU TOUCH」フッターサイン帯前の余白 — 統一 */
.footer-signal {
  margin-top: 0 !important;
}

/* セクション間に hr を入れる場合の余白吸収 */
section + section,
.wn-section + .wn-section {
  border-top: none;
}

/* default page (記事以外固定ページ) の本文側 padding */
.page-default__content > * + * {
  margin-top: var(--sec-inner-stack);
}
.page-default__content h2 { margin-top: calc(var(--sec-inner-stack) * 1.5); }
.page-default__content h3 { margin-top: calc(var(--sec-inner-stack) * 1.2); }
.page-default__content h2 + p,
.page-default__content h3 + p {
  margin-top: var(--sec-title-to-lede);
}


/* ============================================================================
   53. グリッド自動適応 — カード枚数に応じた列数調整
   :has() で子要素数を判定し、空きセルが出ないようにする
   modern browser 対応 (Chrome 105+, Safari 15.4+, Firefox 121+)
   ============================================================================ */

/* 共通: 各種カードグリッドの max-width を超えない範囲で auto-fit を優先する */
@media (min-width: 700px) {
  /* 2 枚: 2 列 */
  .wn-services:has(> :nth-child(2):last-child),
  .wn-cases:has(> :nth-child(2):last-child),
  .wn-flow:has(> :nth-child(2):last-child),
  .wn-pricing:has(> :nth-child(2):last-child),
  .wn-compare:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
  }
  /* 3 枚: 3 列 */
  .wn-services:has(> :nth-child(3):last-child),
  .wn-cases:has(> :nth-child(3):last-child),
  .wn-flow:has(> :nth-child(3):last-child),
  .wn-pricing:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 900px) {
  /* 4 枚: 4 列（流れの場合） */
  .wn-flow:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  /* 4 枚以上のサービス・事例: 2x2 にする（4 列だと窮屈なので） */
  .wn-services:has(> :nth-child(4):last-child),
  .wn-cases:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
  }
  /* 5 枚以上: auto-fit */
  .wn-services:has(> :nth-child(5)),
  .wn-cases:has(> :nth-child(5)),
  .wn-flow:has(> :nth-child(5)) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
  }
}

/* タブレット中間域: 3 枚は 2+1 にせず横一列 or 2x2 維持 */
@media (min-width: 700px) and (max-width: 899px) {
  .wn-flow:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* モバイル: すべて 1 列 (main.css のデフォルトを尊重) */

/* ============================================================================
   Case cards with featured-image thumbnails
   Used by [wn_case] shortcode on /case-studies/
   ============================================================================ */
.wn-cases--with-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 1.5vw, 1.5rem);
  margin-top: var(--sp-7, 2rem);
}
.wn-case--with-thumb {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--c-paper, #fff);
  border: 1px solid var(--c-border, #E1E7F2);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none !important;
  color: var(--c-text, var(--c-ink)) !important;
  transition: transform .25s var(--ease, cubic-bezier(.2,.7,.2,1)),
              box-shadow .25s ease,
              border-color .25s ease;
  position: relative;
  padding: 0;
}
.wn-case--with-thumb::after { display: none; }
.wn-case--with-thumb:hover {
  transform: translateY(-3px);
  border-color: var(--c-ink, #1B2547);
  box-shadow: 0 18px 40px -18px rgba(27, 37, 71, .28);
}
.wn-case--with-thumb:hover .wn-case__thumb img {
  transform: scale(1.04);
}
.wn-case__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, var(--c-blue-soft, #B0DBF7), var(--c-yellow-soft, #FFF8C2));
  flex: none;
}
.wn-case__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.wn-case__thumb--fallback img {
  object-fit: contain;
  padding: 12px;
  filter: drop-shadow(0 6px 12px rgba(27, 37, 71, .12));
}
.wn-case__body {
  padding: clamp(1rem, .85rem + .6vw, 1.4rem);
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.wn-case--with-thumb .wn-case-tag {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-accent-deep, #D45417);
  background: var(--c-accent-soft, #FFE2D2);
  padding: .3rem .7rem;
  border-radius: 999px;
  align-self: flex-start;
}
.wn-case--with-thumb .wn-case-title {
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: 700;
  margin: 0;
  color: var(--c-ink, #1B2547);
  letter-spacing: -.005em;
}
.wn-case--with-thumb .wn-case-symptom {
  font-size: .92rem;
  line-height: 1.75;
  color: var(--c-text-mute, #5F6B89);
  margin: 0;
}
@media (max-width: 768px) {
  .wn-cases--with-thumbs {
    grid-template-columns: 1fr;
  }
  .wn-case__thumb {
    aspect-ratio: 21 / 9;
  }
}

/* :has() 非対応ブラウザ向けフォールバック — auto-fit でカード幅をベースに */
@supports not (selector(:has(*))) {
  .wn-services,
  .wn-cases,
  .wn-flow,
  .wn-pricing,
  .wn-compare {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  }
}

/* ============================================================================
   50. Brand wordmark logo — larger header logo using brand-wordmark.webp
   ============================================================================ */
:root {
  --header-h: 92px;
  --header-h-compact: 68px;
  --logo-h: 64px;
  --logo-h-compact: 44px;
  --logo-h-mobile: 48px;
}
.site-header__inner { gap: clamp(1rem, 1vw + .5rem, 1.6rem); }

/* ─────────────────────────────────────────────────────────────
   Brand combo: logo (left) + wordmark (right), horizontal.
   Stays horizontal on every breakpoint, including mobile.
   ───────────────────────────────────────────────────────────── */
.site-brand,
.site-logo .site-brand,
.site-logo .custom-logo-link,
a.site-brand {
  /* 2026-05-30: !important を削除。mu-plugin の com-header-subcopy.php が
     display: inline-grid で 2 段レイアウト（ロゴ + ワードマーク / キャッチコピー全幅）
     に切り替えるため、ここでの inline-flex は specificity 同等→後勝ちで上書きされる。 */
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  /* 2026-05-24: ロゴ画像とワードマークを密着させる（佑輔さん指示） */
  gap: 0;
  line-height: 0;
  text-decoration: none;
  white-space: nowrap;
  flex-wrap: nowrap;
  min-width: 0;
}
.site-brand .site-brand__logo,
.site-brand .site-brand__wordmark {
  display: block;
  width: auto !important;
  flex: 0 0 auto;
}
.site-brand .site-brand__logo {
  height: 56px !important;
  max-height: 56px !important;
}
.site-brand .site-brand__wordmark {
  height: 44px !important;
  max-height: 44px !important;
}
.site-brand .site-brand__logo,
.site-brand .site-brand__wordmark {
  transition: height .25s var(--ease, ease), max-height .25s var(--ease, ease);
}

/* Scrolled state — shrink both proportionally */
.site-header[data-scrolled="true"] .site-brand .site-brand__logo {
  height: 40px !important; max-height: 40px !important;
}
.site-header[data-scrolled="true"] .site-brand .site-brand__wordmark {
  height: 32px !important; max-height: 32px !important;
}

/* Mobile — keep horizontal, just downsize a hair */
@media (max-width: 768px) {
  .site-brand { gap: 0; } /* 2026-05-24: 密着 */
  .site-brand .site-brand__logo {
    height: 42px !important; max-height: 42px !important;
  }
  .site-brand .site-brand__wordmark {
    height: 32px !important; max-height: 32px !important;
  }
  .site-header[data-scrolled="true"] .site-brand .site-brand__logo {
    height: 36px !important; max-height: 36px !important;
  }
  .site-header[data-scrolled="true"] .site-brand .site-brand__wordmark {
    height: 28px !important; max-height: 28px !important;
  }
}
@media (max-width: 380px) {
  .site-brand { gap: 0; } /* 2026-05-24: 密着 */
  .site-brand .site-brand__logo {
    height: 36px !important; max-height: 36px !important;
  }
  .site-brand .site-brand__wordmark {
    height: 28px !important; max-height: 28px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   2026-05-24: ヘッダーロゴを水平中央に配置（佑輔さん指示）
   tier1 grid を 1fr auto 1fr に変更し、grid-column を明示指定。
   - 左セル (col 1): 空（スペーサー）
   - 中央セル (col 2): ロゴ2枚（site-brand）
   - 右セル (col 3): アクション群（検索/テーマ切替/CTA/ハンバーガー）

   ※ 1024px 以上限定。1023px 以下は tier2 メニューが非表示になり
     tier1 だけで完結するため、伝統的な「ロゴ左 + アクション右」の
     モバイル定石レイアウト（main.css の auto 1fr）に戻す。
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .site-header__inner--tier1 {
    grid-template-columns: 1fr auto 1fr;
  }
  .site-header__inner--tier1 .site-header__brand {
    grid-column: 2;
    justify-self: center;
  }
  .site-header__inner--tier1 .site-header__actions {
    grid-column: 3;
    justify-self: end;
  }
}

/* ─────────────────────────────────────────────────────────────
   2026-05-24: スクロール時、3段目(tier2 メニュー)を完全非表示から
   「少し縮む」に変更（佑輔さん指示）。
   main.css の元設計は max-height:0 でフェードアウトだったが、
   メニューは常時表示の方がナビゲーション性が高いため表示維持し、
   padding / font-size / gap を縮約して高さを節約する。
   ───────────────────────────────────────────────────────────── */
/* 2026-05-24: tier2 の白背景 (.6) と上罫線を撤去し、tier1 と完全に
   シームレス統合（佑輔さん指示）。ヘッダー全体が一枚ガラスに見える。 */
.site-header__inner--tier2 {
  background: rgba(255, 255, 255, .15);
  border-top: none;
}
html[data-theme="dark"] .site-header__inner--tier2 {
  background: transparent;
  border-top: none;
}
.site-header[data-scrolled="true"] .site-header__inner--tier2 {
  padding-block: .15rem; /* 2026-05-24 二次調整: さらに詰める */
  max-height: none;
  overflow: visible;
  background: transparent; /* ガラス感を最大化 */
  border-top: none;
}
.site-header[data-scrolled="true"] .nav-primary__list {
  gap: .2rem; /* 2026-05-24 二次調整 */
}
.site-header[data-scrolled="true"] .nav-primary__list li > a {
  padding: .25rem .75rem;     /* 2026-05-24 二次調整 */
  font-size: .8125rem;        /* 13px — デスクトップで読める最小目安 */
  transition: padding .25s var(--ease), font-size .25s var(--ease),
              background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Mobile drawer brand — also horizontal */
.site-brand--drawer {
  gap: 8px;
}
.site-brand--drawer .site-brand__logo {
  height: 44px !important; max-height: 44px !important;
}
.site-brand--drawer .site-brand__wordmark {
  height: 34px !important; max-height: 34px !important;
}

/* Footer brand — slightly bigger logo than wordmark mirrors header */
.site-brand--footer {
  margin-bottom: .75rem;
}
.site-brand--footer .site-brand__logo {
  height: 48px !important; max-height: 48px !important;
}
.site-brand--footer .site-brand__wordmark {
  height: 38px !important; max-height: 38px !important;
}

/* Legacy single-image fallbacks — still safe */
.site-logo,
.site-logo .custom-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.site-logo > img:not(.site-brand__logo):not(.site-brand__wordmark),
.site-logo .custom-logo:not(.site-brand__logo):not(.site-brand__wordmark),
.site-title__wordmark-img {
  height: var(--logo-h) !important;
  width: auto !important;
  max-height: var(--logo-h) !important;
  max-width: 280px;
  display: block;
}
.site-header[data-scrolled="true"] .site-logo > img:not(.site-brand__logo):not(.site-brand__wordmark),
.site-header[data-scrolled="true"] .site-logo .custom-logo:not(.site-brand__logo):not(.site-brand__wordmark),
.site-header[data-scrolled="true"] .site-title__wordmark-img {
  height: var(--logo-h-compact) !important;
  max-height: var(--logo-h-compact) !important;
}
.site-title.site-title--wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  min-width: 0;
  padding: 4px 0;
}
.site-title.site-title--wordmark .site-title__tagline {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-text-mute, #6b6b6b);
  margin-top: 2px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.site-header[data-scrolled="true"] .site-title.site-title--wordmark .site-title__tagline { display: none; }

@media (max-width: 768px) {
  :root { --header-h: 72px; --header-h-compact: 60px; }
  .site-logo img,
  .site-logo .custom-logo,
  .site-title__wordmark-img {
    height: var(--logo-h-mobile) !important;
    max-height: var(--logo-h-mobile) !important;
    max-width: 200px;
  }
  .site-header[data-scrolled="true"] .site-logo img,
  .site-header[data-scrolled="true"] .site-logo .custom-logo,
  .site-header[data-scrolled="true"] .site-title__wordmark-img {
    height: 40px !important;
    max-height: 40px !important;
  }
  .site-title.site-title--wordmark .site-title__tagline { display: none; }
}

/* Mobile drawer logo — larger and crisper */
.mobile-drawer__brand { gap: 0 !important; }
.mobile-drawer__brand .mobile-drawer__logo-img {
  height: 44px;
  width: auto;
  max-width: 200px;
  display: block;
}

/* ============================================================================
   51. 「これまでの対応」セクション — リッチ化（trust-bar の再設計）
   ============================================================================ */
.wn-section--track-record {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.wn-section--track-record::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at top right, rgba(91, 138, 255, .10), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(255, 175, 122, .10), transparent 55%);
  z-index: -1;
}
.wn-track-record__hero {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.2fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  margin: 0 auto 2.5rem;
  max-width: 1080px;
}
.wn-track-record__photo {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(11, 27, 56, .35), 0 6px 18px -10px rgba(11, 27, 56, .18);
  aspect-ratio: 16 / 11;
  background: linear-gradient(135deg, #eef2fa, #f7f5f0);
}
.wn-track-record__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.wn-track-record__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 27, 56, .22));
  pointer-events: none;
}
.wn-track-record__lede {
  display: flex; flex-direction: column; gap: .9rem;
}
.wn-track-record__lede p {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink-80, #2a2f3a);
  margin: 0;
}
.wn-track-record__lede p strong {
  color: var(--c-ink, #0b1b38);
  background: linear-gradient(transparent 65%, rgba(255, 198, 120, .42) 65%);
  padding: 0 2px;
  font-weight: 700;
}

/* Stats grid */
.wn-track-record__stats {
  /* 旧: auto-fit 1fr で 4 枚が 1080px 幅に均等分割 → 1 枚 ~270px と過大、
     ラベル文字数の違いでカード内の "数字 + 単位" 比率が崩れて見える。
     新: flex + 固定上限 width 220px + justify-content: center で
     カードを均一サイズに揃え、行幅 < 全幅 でも中央寄せ。
     モバイルでは flex-wrap で自動的に 2 列→1 列に折り返す。 */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  max-width: 1080px;
  margin: 0 auto;
}
.wn-track-record__stat {
  flex: 0 1 clamp(180px, 22vw, 220px);
  min-width: 0;
}
@media (max-width: 900px) {
  .wn-track-record__stat { flex: 1 1 calc(50% - .75rem); }
}
@media (max-width: 480px) {
  .wn-track-record__stat { flex: 1 1 100%; }
}
.wn-track-record__stat {
  position: relative;
  display: flex; flex-direction: column;
  gap: .35rem;
  padding: 1.4rem 1.25rem 1.25rem;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 20px;
  box-shadow: 0 16px 40px -22px rgba(11, 27, 56, .28), 0 2px 6px -2px rgba(11, 27, 56, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.wn-track-record__stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px -22px rgba(11, 27, 56, .35), 0 4px 10px -4px rgba(11, 27, 56, .12);
}
.wn-track-record__stat-icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #eaf0ff, #fff5e9);
  color: #3a5bd9;
  font-size: 1.15rem;
  margin-bottom: .35rem;
}
.wn-track-record__stat-num {
  font-size: clamp(2.1rem, 1.2rem + 2.4vw, 2.85rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  /* Brand orange — banner uses this exact color for "600件超 / 4.9以上 / 8年". */
  color: var(--c-accent, #F26B22);
  display: flex; align-items: baseline; gap: 4px;
  font-feature-settings: "tnum";
}
.wn-track-record__stat-num small {
  font-size: .95rem;
  font-weight: 700;
  color: var(--c-ink, #1B2547);   /* unit suffix stays navy for readability */
}
/* Special case: "★5.0" — star stays yellow, number stays orange */
.wn-track-record__stat-num:has(> :first-child:not(small)) {
  /* keep orange */
}
.wn-track-record__stat-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-70, #444a5a);
  line-height: 1.5;
}
.wn-track-record__stat-note {
  font-size: .72rem;
  color: var(--c-text-mute, #6b6b6b);
  margin-top: .25rem;
}

/* Numbers disclosure note — 景表法対応の脚注 */
.wn-track-record__stats[data-disclosure="numbers"]::after {
  content: "※ 数値はココナラの公開実績ベース／2026年5月時点・自社集計";
  display: block;
  grid-column: 1 / -1;
  font-size: .72rem;
  color: var(--c-text-mute, #5F6B89);
  margin-top: .35rem;
  text-align: right;
  letter-spacing: .01em;
}

/* Server / vendor chips */
.wn-track-record__servers {
  margin: 2.5rem auto 0;
  max-width: 1080px;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, .55);
  border: 1px dashed rgba(11, 27, 56, .18);
  border-radius: 16px;
}
.wn-track-record__servers-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink-70, #444a5a);
  letter-spacing: .04em;
  margin: 0 0 .65rem;
}
.wn-track-record__server-chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.wn-track-record__server-chip {
  display: inline-block;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(11, 27, 56, .1);
  color: var(--c-ink, #0b1b38);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
}

@media (max-width: 720px) {
  .wn-track-record__hero {
    grid-template-columns: 1fr;
  }
  .wn-track-record__photo { aspect-ratio: 16 / 10; }
  .wn-track-record__stats { grid-template-columns: repeat(2, 1fr); }
  .wn-track-record__stat { padding: 1.1rem 1rem; }
}
@media (max-width: 420px) {
  .wn-track-record__stats { grid-template-columns: 1fr; }
}

/* ============================================================================
   52. Profile avatar — 顔写真への差し替え対応（photo-smile-portrait）
   ============================================================================ */
.wn-profile {
  display: grid;
  grid-template-columns: minmax(160px, 200px) 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}
.wn-profile-avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, #eaf0ff, #fff5e9);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 2rem;
  color: var(--c-ink, #0b1b38);
  box-shadow: 0 20px 50px -24px rgba(11, 27, 56, .35);
}
.wn-profile-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 640px) {
  .wn-profile { grid-template-columns: 1fr; justify-items: center; text-align: left; }
  .wn-profile-avatar { max-width: 160px; }
}

/* ============================================================================
   53. Hero photo banner — top-page / lp emergency hero に画像を組み込み
   ============================================================================ */
.wn-hero--with-photo {
  position: relative;
  overflow: hidden;
  /* The photo now sits on the right half only (same pattern as character
     heroes), so the container aspect ratio no longer fights the 1.91:1
     photo aspect. The woman is always fully visible. */
  min-height: clamp(420px, 38vw, 600px);
  padding-block: clamp(1.75rem, 1rem + 2.5vw, 3.25rem) !important;
}
.wn-hero--with-photo .wn-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--container, 1200px) !important;
  margin-inline: auto;
  padding-block: 0 !important;
  /* reserve right half for the photo on PC */
  padding-right: clamp(280px, 42vw, 580px) !important;
}
.wn-hero--with-photo .wn-hero-title {
  max-width: 32ch;
  font-size: clamp(1.85rem, 1.2rem + 2.4vw, 3.15rem) !important;
  margin-bottom: 1rem !important;
}
.wn-hero--with-photo .wn-hero-body {
  max-width: 52ch;
  margin-bottom: 1.25rem !important;
  line-height: 1.75 !important;
}
.wn-hero--with-photo .wn-hero-tag {
  margin-bottom: .6rem !important;
}
/* Photo wrapper — right half of the viewport (full-bleed to the right) */
.wn-hero__photo {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  /* width = right half of viewport, capped */
  width: clamp(320px, 55vw, 880px);
  z-index: 0;
  overflow: hidden;
  /* Multiply blends the entire photo (including its baked-in background
     color) against the hero's background gradient. Subject stays visible
     because dark colors × any = dark. */
  mix-blend-mode: multiply;
  /* Soft fade on the LEFT edge only — kills the vertical seam where the
     photo container meets the content side of the hero. Top and bottom
     are NOT masked so the subject (centered) is never trimmed. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0, 0, 0, .35) 6%,
    rgba(0, 0, 0, .85) 18%,
    #000 32%, #000 100%);
  mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0, 0, 0, .35) 6%,
    rgba(0, 0, 0, .85) 18%,
    #000 32%, #000 100%);
}
.wn-hero__photo img {
  width: 100%;
  height: 100%;
  /* cover → the photo fills the container without internal whitespace.
     The subject (woman) is centered in the source so a mild horizontal
     crop preserves her fully. Vertical crop is zero at this container
     aspect (880×600 ≈ 1.47) for the 1200×628 (1.91) sources. */
  object-fit: cover;
  object-position: center center;
  display: block;
  /* No mask-image here — multiply on .wn-hero__photo already blends the
     photo's own background into the hero gradient, so an extra edge mask
     would just clip the subject. */
}
/* Per-page subject framing — only object-position tweaks below.
   With cover at 880×600 we get ~133px horizontal crop each side; we
   re-center on the woman's vertical band of the photo. */
body.home .wn-hero__photo img {
  /* photo-joy-portrait: subject centered, slight upper bias keeps the face
     in the visual sweet-spot. */
  object-position: center 38%;
}
.is-slug-wp-emergency .wn-hero__photo img {
  /* photo-troubled: anchor a bit higher so the troubled face is fully in
     the sweet-spot rather than the lower body. */
  object-position: center 32%;
}
/* The ::after cream veil is no longer needed — the left-edge mask on
   .wn-hero__photo already produces a clean fade, and the redundant
   cream tint was washing out the photo's mid-tones. Kept as a no-op
   so any cached CSS doesn't break. */
.wn-hero__photo::after { content: none; }
/* Mobile (≤768px) — photo becomes a faded backdrop behind text, like the
   character heroes, so it doesn't fight with the content area. */
@media (max-width: 768px) {
  .wn-hero--with-photo {
    min-height: clamp(340px, 70vw, 480px);
    padding-block: 1.5rem !important;
  }
  .wn-hero--with-photo .wn-hero-inner {
    max-width: 100% !important;
    padding-right: var(--gutter, 1.5rem) !important;
    padding-bottom: 1rem !important;
  }
  .wn-hero__photo {
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    opacity: .35;
  }
  .wn-hero__photo img {
    object-fit: cover;
    object-position: right center;
  }
  .wn-hero__photo::after {
    background: linear-gradient(180deg,
      rgba(247, 245, 240, .55) 0%,
      rgba(247, 245, 240, .35) 60%,
      rgba(247, 245, 240, .12) 100%);
  }
  .is-slug-wp-emergency .wn-hero__photo::after,
  .wn-hero--with-photo[data-tone="emergency"] .wn-hero__photo::after {
    background: linear-gradient(180deg,
      rgba(254, 242, 242, .55) 0%,
      rgba(254, 242, 242, .35) 60%,
      rgba(254, 226, 226, .12) 100%);
  }
}
@media (max-width: 480px) {
  .wn-hero__photo { opacity: .25; }
}
/* 2026-05-24: SP で home / wp-emergency の女性写真だけ object-position を
   中央揃えに上書き（佑輔さん指示）。
   背景化 (opacity .35) はそのまま維持。他のページ (.wn-hero__photo 一般)
   には影響させず、ページクラス指定の高 specificity で限定。 */
@media (max-width: 768px) {
  body.home .wn-hero__photo img,
  .is-slug-wp-emergency .wn-hero__photo img {
    object-position: center center;
  }
}

/* ============================================================================
   53b. Hero with character mascot — dh-me.com style
   PC : character occupies the right half of FV (large, full-bleed)
   SP : character is placed BEHIND the text, faded to ~30% opacity as backdrop
   ============================================================================ */
.wn-hero--with-character {
  position: relative;
  overflow: hidden;
  min-height: clamp(420px, 42vw, 600px);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) !important;
}
/* Content fills the LEFT half; right half is reserved for the character */
.wn-hero--with-character .wn-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--container, 1200px) !important;
  margin-inline: auto;
  padding-block: 0 !important;
  /* Reserve right half of the container for the character on PC */
  padding-right: clamp(280px, 42vw, 600px) !important;
}
.wn-hero--with-character .wn-hero-title {
  max-width: none !important;
  font-size: clamp(1.85rem, 1.05rem + 2.4vw, 3rem) !important;
  line-height: 1.32 !important;
  margin-bottom: 1.1rem !important;
}
.wn-hero--with-character .wn-hero-body {
  max-width: 56ch !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.8 !important;
}
.wn-hero--with-character .wn-hero-tag {
  margin-bottom: .65rem !important;
}
/* Per-page title sizing for natural <br>-wrapped headlines */
.is-slug-wp-recovery-service .wn-hero--with-character .wn-hero-title,
.is-slug-wp-maintenance .wn-hero--with-character .wn-hero-title {
  font-size: clamp(1.95rem, 1.2rem + 2.2vw, 3rem) !important;
}

/* --------------------------------------------------------------------------
   Modifier: .wn-hero--character-left
   Reverses the layout so the character sits on the LEFT and content on the
   RIGHT. Used when the character's directional cue (gesture, speech bubble)
   naturally points toward the right — recovery「グッ」/ case-studies「連絡ください」.
   Image is NOT flipped, preserving any baked-in Japanese text inside the art.
   -------------------------------------------------------------------------- */
.wn-hero--character-left .wn-hero-inner {
  padding-right: var(--gutter, 1.5rem) !important;
  padding-left: clamp(280px, 42vw, 600px) !important;
}
.wn-hero--character-left .wn-hero__character {
  right: auto !important;
  left: 0 !important;
  /* Inside its container, push the artwork toward the inner edge (=right side
     of the container) so it sits adjacent to the content column. */
  justify-content: flex-end !important;
}
.wn-hero--character-left .wn-hero__character img {
  object-position: right bottom !important;
}
/* Reverse the white veil — now the readable side is on the RIGHT */
.wn-hero--character-left.wn-hero--with-character::after {
  background: linear-gradient(260deg,
    rgba(255, 255, 255, .72) 0%,
    rgba(255, 255, 255, .55) 30%,
    rgba(255, 255, 255, .15) 55%,
    rgba(255, 255, 255, 0)   72%) !important;
}
/* Reverse the radial accents to feel balanced on the new layout */
.wn-hero--character-left.wn-hero--with-character[data-tone="recovery"]::before {
  background:
    radial-gradient(ellipse at 10% 0%, rgba(91, 138, 255, .18), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(255, 198, 120, .16), transparent 60%) !important;
}
.wn-hero--character-left.wn-hero--with-character[data-tone="cases"]::before {
  background:
    radial-gradient(ellipse at 10% 0%, rgba(255, 175, 122, .20), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(91, 138, 255, .12), transparent 60%) !important;
}
/* Mobile: keep the existing backdrop behavior, but mirror the white veil */
@media (max-width: 768px) {
  .wn-hero--character-left .wn-hero-inner {
    padding-left: var(--gutter, 1.5rem) !important;
    padding-right: var(--gutter, 1.5rem) !important;
  }
  .wn-hero--character-left .wn-hero__character {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .wn-hero--character-left .wn-hero__character img {
    object-position: left center !important;
  }
}

/* Character — large hero illustration on the right, full hero height */
.wn-hero__character {
  position: absolute;
  /* sit flush with the right edge of the viewport (full-bleed) */
  right: 0;
  bottom: 0;
  top: 0;
  /* width = right half of the viewport, capped */
  width: clamp(300px, 50vw, 720px);
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  /* flex-start → character image aligns to the LEFT of its container,
     pulling it visually toward the center of the FV instead of hugging
     the viewport's right edge. */
  justify-content: flex-start;
}
.wn-hero__character img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(0 24px 36px rgba(11, 27, 56, .12));
  animation: wn-char-float 6.5s ease-in-out infinite;
}
@keyframes wn-char-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Soft white-to-transparent veil over the left half ensures text legibility */
.wn-hero--with-character::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, .72) 0%,
    rgba(255, 255, 255, .55) 30%,
    rgba(255, 255, 255, .15) 55%,
    rgba(255, 255, 255, 0)   72%);
}

/* tone variants — radial wash over the whole hero */
.wn-hero--with-character[data-tone="recovery"]::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 90% 0%, rgba(91, 138, 255, .18), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(255, 198, 120, .16), transparent 60%);
}
.wn-hero--with-character[data-tone="maintenance"]::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 90% 0%, rgba(135, 200, 165, .20), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(91, 138, 255, .14), transparent 60%);
}
.wn-hero--with-character[data-tone="cases"]::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 90% 0%, rgba(255, 175, 122, .20), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(91, 138, 255, .12), transparent 60%);
}

/* Mobile (≤768px) — character becomes a faded backdrop behind the text */
@media (max-width: 768px) {
  .wn-hero--with-character {
    min-height: clamp(360px, 80vw, 520px);
    padding-block: 1.5rem !important;
  }
  .wn-hero--with-character .wn-hero-inner {
    max-width: 100% !important;
    padding-right: var(--gutter, 1.5rem) !important;
    padding-bottom: 1rem !important;
  }
  .wn-hero--with-character .wn-hero-body {
    max-width: 100% !important;
  }
  .wn-hero__character {
    /* full-bleed backdrop */
    top: 0; right: 0; bottom: 0; left: auto;
    width: 100%;
    max-width: 100%;
    opacity: .28;            /* ← 薄く表示 */
    justify-content: flex-end;
  }
  .wn-hero__character img {
    height: 100%;
    max-height: 100%;
    width: auto;
    object-position: right center;
    filter: none;            /* shadow muddies things at low opacity */
  }
  /* soften the white veil so backdrop reads, but keep text legible */
  .wn-hero--with-character::after {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, .55) 0%,
      rgba(255, 255, 255, .35) 60%,
      rgba(255, 255, 255, .10) 100%);
  }
}
@media (max-width: 480px) {
  .wn-hero__character { opacity: .22; }
}

/* ============================================================================
   54. Trouble-empathy block — photo-troubled で悩み訴求
   ============================================================================ */
.wn-trouble {
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(260px, 1.1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
.wn-trouble__photo {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 24px 60px -28px rgba(11, 27, 56, .35);
}
.wn-trouble__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wn-trouble__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(11, 27, 56, .12), rgba(11, 27, 56, 0) 60%);
}
.wn-trouble__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .65rem;
}
.wn-trouble__item {
  padding-left: 2rem;
  position: relative;
  font-size: .98rem;
  line-height: 1.7;
  color: var(--ink-80, #2a2f3a);
}
.wn-trouble__item::before {
  content: "";
  position: absolute;
  left: 0; top: .55rem;
  width: 22px; height: 22px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffe2c8, #ffd1b5);
  box-shadow: inset 0 0 0 1px rgba(255, 138, 76, .35);
}
.wn-trouble__item::after {
  content: "?";
  position: absolute;
  left: 6px; top: .35rem;
  width: 10px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: #c25a16;
  font-weight: 800;
  font-size: .9rem;
}
@media (max-width: 720px) {
  .wn-trouble { grid-template-columns: 1fr; }
  .wn-trouble__photo { aspect-ratio: 16 / 10; max-width: 480px; margin: 0 auto; }
}

/* ============================================================================
   55. CTA finale — photo-joy-arms-up で「相談したらどうなる」訴求
   ============================================================================ */
.wn-cta-finale {
  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;
  /* Brand-aligned: W-logo navy → mid-blue (was generic #1e3a8a / #2554c7 / #3a72e6) */
  background: linear-gradient(125deg, #1B2547 0%, #3D5BBF 45%, #618BD9 100%);
  box-shadow: 0 36px 70px -36px rgba(27, 37, 71, .55);
}
.wn-cta-finale::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--wn-cta-finale-bg, none);
  background-size: cover;
  background-position: right center;
  opacity: .35;
  mix-blend-mode: lighten;
}
.wn-cta-finale::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(27, 37, 71, .92) 0%, rgba(61, 91, 191, .82) 45%, rgba(97, 139, 217, .35) 100%);
}
.wn-cta-finale__inner {
  position: relative; z-index: 2;
  max-width: 640px;
}
.wn-cta-finale__eyebrow {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .9;
  margin: 0 0 .6rem;
}
.wn-cta-finale__title {
  font-size: clamp(1.55rem, 1.1rem + 1.4vw, 2.15rem);
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 .8rem;
  letter-spacing: -.01em;
  /* Force white on gradient navy→blue bg (theme h2 default would otherwise be --c-ink). */
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}
.wn-cta-finale__body {
  font-size: 1rem;
  line-height: 1.85;
  margin: 0 0 1.5rem;
  color: #fff;
  opacity: .94;
}
.wn-cta-finale__actions {
  display: flex; flex-wrap: wrap; gap: .75rem;
}
.wn-cta-finale__btn {
  display: inline-flex;
  align-items: center;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wn-cta-finale__btn--primary {
  background: #fff;
  color: #1e3a8a;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .35);
}
.wn-cta-finale__btn--ghost {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .55);
  color: #fff;
  backdrop-filter: blur(8px);
}
.wn-cta-finale__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -10px rgba(0, 0, 0, .4);
}

/* =========================================================
   JIN:R iconbox compat — .wn-callout
   Pre-navigator articles wrapped notice blocks in
   [jinr_simple_iconbox{1-9}]…[/jinr_simple_iconbox{1-9}].
   The shim in inc/shortcodes.php renders to .wn-callout--{variant}.
   ========================================================= */
/* .wn-callout — soft inline notice block.
   Replaces the legacy JIN:R [jinr_simple_iconbox*] which was a low-key
   tinted box, NOT a heavy colored sidebar. The previous design (4px solid
   border-left + colored badge pill) was overpowering and the client
   specifically asked to remove the prominent borders. We keep only a
   subtle background tint per variant; the "INFO/NOTICE/POINT…" pill is
   demoted to a small inline tag at top-left of the box. */
.wn-callout {
  border: 0;
  background: var(--c-mist, #F6F9FE);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-size: .95rem;
  line-height: 1.85;
  color: var(--c-ink, #1B2547);
}
.wn-callout__body > :first-child { margin-top: 0; }
.wn-callout__body > :last-child  { margin-bottom: 0; }
.wn-callout__body p { margin: 0 0 .5em; }
.wn-callout__body p:last-child { margin-bottom: 0; }

/* Variant tints — light-only, no chunky border. */
.wn-callout--info    { background: #f0f7ff; }
.wn-callout--memo    { background: #fffce6; }
.wn-callout--star    { background: #fff7f0; }
.wn-callout--check   { background: #f0fff5; }
.wn-callout--warning { background: #fff5f5; }
.wn-callout--good    { background: #f0fff5; }
.wn-callout--bad     { background: #fff5f5; }
.wn-callout--mail    { background: #f0f7ff; }
.wn-callout--point   { background: #fff7f0; }

/* ============================================================================
   WP palette pale-color safety net
   ============================================================================
   WordPress core auto-generates `.has-{slug}-color { color: var(...) }` rules
   for every palette color (theme.json + Gutenberg core defaults). When the
   palette includes pale or yellow values (border #E5E1D6, paper #FFFFFF,
   mist #F7F5F0, amber #FCB900 from Gutenberg core, etc.), applying any of
   them as TEXT color makes the content unreadable on a light background.
   Gutenberg's editor will set this class whenever the author picks the color
   from the color picker — even if their intent was a border or highlight.

   We override the unwanted text-color side effect while leaving inline
   `style="border-color:..."` / `background-color:..."` intact. For <mark>
   elements that historically used amber as a highlighter, we restore the
   highlighter look via a background overlay so emphasis is preserved.
   ============================================================================ */
/* Use full class selectors (not :where) so we beat WP's compound selectors
   like `.has-inline-color.has-luminous-vivid-amber-color` (specificity 0,2,0). */
html .has-paper-color,
html .has-mist-color,
html .has-mist-2-color,
html .has-border-color,
html .has-accent-soft-color,
html .has-crimson-bg-color,
html .has-luminous-vivid-amber-color,
html .has-pale-cyan-blue-color,
html .has-pale-pink-color,
html .has-light-green-cyan-color,
html .has-light-yellow-color,
html .has-vivid-yellow-color,
html .has-yellow-color,
html .has-inline-color.has-luminous-vivid-amber-color,
html .has-inline-color.has-pale-cyan-blue-color,
html .has-inline-color.has-pale-pink-color,
html .has-inline-color.has-light-yellow-color,
html .has-inline-color.has-vivid-yellow-color,
html .has-inline-color.has-yellow-color,
html .has-inline-color.has-light-green-cyan-color,
html .has-inline-color.has-mist-color,
html .has-inline-color.has-mist-2-color,
html .has-inline-color.has-border-color,
html .has-inline-color.has-paper-color,
html .has-inline-color.has-accent-soft-color {
    color: inherit !important;
}

/* <mark> with amber/yellow palette colors → restore as marker highlight
   (yellow background under text) so the author's emphasis intent survives. */
html mark.has-luminous-vivid-amber-color,
html mark.has-vivid-yellow-color,
html mark.has-yellow-color,
html mark.has-light-yellow-color {
    background-image: linear-gradient(transparent 62%, rgba(252, 185, 0, .35) 62%) !important;
    background-color: transparent !important;
}
html mark.has-pale-cyan-blue-color {
    background-image: linear-gradient(transparent 62%, rgba(142, 209, 252, .35) 62%) !important;
    background-color: transparent !important;
}
html mark.has-pale-pink-color {
    background-image: linear-gradient(transparent 62%, rgba(247, 200, 215, .35) 62%) !important;
    background-color: transparent !important;
}

/* ===== <mark> readability blanket guarantee =====
   Browser default for <mark> is yellow background + black text. Authors
   commonly applied palette colors to mark text via Gutenberg's color picker
   (orange, amber, yellow, etc.), producing orange-on-yellow combos that
   the user reported as "リンクの色が黄色で見にくい". Two-layer fix:

   1) For <mark>, ALWAYS keep text in --c-ink (navy) so the highlight
      remains the emphasis cue rather than the text color. The yellow
      under-line / yellow background still survives — we only override
      text color when an unsafe palette class is present.
   2) Convert the default solid-yellow bg to a softer marker-style
      under-line so prose flows naturally and links inside are readable.

   Specificity uses `html` prefix to beat WP's compound `.has-inline-color
   .has-luminous-vivid-*-color` selectors (0,2,0). */
html .prose mark,
html .post-single__content mark,
html .page-default__content mark {
    color: var(--c-ink, #1B2547) !important;
    background-color: transparent !important;
    background-image: linear-gradient(transparent 62%, rgba(252, 185, 0, .38) 62%) !important;
    padding: 0 .08em;
    border-radius: 0;
}
/* Even if author set <mark class="has-*-color"> (orange, amber, etc.),
   force readable navy on the highlighter under-line. */
html .prose mark.has-luminous-vivid-orange-color,
html .prose mark.has-luminous-vivid-amber-color,
html .prose mark.has-vivid-orange-color,
html .prose mark.has-vivid-red-color,
html .prose mark.has-vivid-yellow-color,
html .prose mark.has-yellow-color,
html .prose mark.has-light-yellow-color,
html .prose mark.has-accent-color,
html .prose mark.has-accent-deep-color,
html .prose mark.has-inline-color.has-luminous-vivid-orange-color,
html .prose mark.has-inline-color.has-luminous-vivid-amber-color,
html .prose mark.has-inline-color.has-vivid-orange-color,
html .prose mark.has-inline-color.has-vivid-red-color,
html .prose mark.has-inline-color.has-vivid-yellow-color,
html .prose mark.has-inline-color.has-yellow-color,
html .prose mark.has-inline-color.has-light-yellow-color,
html .prose mark.has-inline-color.has-accent-color,
html .prose mark.has-inline-color.has-accent-deep-color {
    color: var(--c-ink, #1B2547) !important;
}
/* Links inside <mark> — always navy w/ accent underline so they pop
   against the yellow highlight rather than disappearing into it. */
html .prose mark a,
html .post-single__content mark a {
    color: var(--c-ink, #1B2547) !important;
    text-decoration-color: var(--c-accent, #FF6F3D) !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

/* ============================================================================
   JIN:R 由来 wp-block-columns / wp-block-jinr-* の 2 カラム潰し回避
   ----------------------------------------------------------------------------
   /12990/ など旧 JIN:R 記事で「まとめ」セクションが 139px 幅に潰れる原因:
     .wp-block-columns (display:flex)
       > .wp-block-column (flex 子)
         > .wp-block-jinr-blocks-designtitle.b--jinr-h2rich
           > .c--h2rich-contents
             > <h2>まとめ</h2>
   JIN:R の意図は h2 をリッチ装飾するための左カラム表示だったが、テーマを
   外した今、ただ「文字が縦長に潰れる」だけになる。
   wp-block-columns 内に JIN:R 系ブロックが含まれる場合は強制的に block 化。
   ============================================================================ */
html .post-single__content .wp-block-columns:has(.b--jinr-block, [class*="wp-block-jinr"], [class*="c--h2rich"]),
html .post-single__content .wp-block-columns:has(.wp-block-jinr-blocks-designtitle) {
  display: block !important;
  gap: 0 !important;
}
html .post-single__content .wp-block-columns:has(.b--jinr-block, [class*="wp-block-jinr"], [class*="c--h2rich"]) > .wp-block-column,
html .post-single__content .wp-block-columns:has(.wp-block-jinr-blocks-designtitle) > .wp-block-column {
  flex-basis: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}
/* JIN:R h2rich 系の装飾コンテナを通常の見出しブロックに落とす */
html .post-single__content .wp-block-jinr-blocks-designtitle,
html .post-single__content .b--jinr-h2rich,
html .post-single__content .c--h2rich-contents,
html .post-single__content .a--h2rich-maincopy {
  all: unset;
  display: block;
}
html .post-single__content .a--h2rich-maincopy {
  /* h2 の体裁を navigator 既定に戻す */
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 800;
  line-height: 1.45;
  color: var(--c-ink, #1B2547);
  margin: 2.5rem 0 1rem;
  padding-bottom: .35em;
  border-bottom: 3px solid var(--c-accent, #FF6F3D);
  border-image: linear-gradient(90deg, var(--c-accent, #FF6F3D) 0%, var(--c-accent, #FF6F3D) 60px, transparent 60px) 1;
  display: block;
}

/* ===== ココナラ等の oEmbed / iframe / blockquote カードの高さ自動化 ===== */
/* WordPress oEmbed が出力する blockquote.wp-embedded-content や、
   coconala カードが固定高で切れる問題への対応。max-height を解除。 */
html .post-single__content iframe[src*="coconala"],
html .post-single__content iframe[src*="oembed"],
html .post-single__content .wp-embedded-content,
html .post-single__content blockquote.wp-embedded-content {
  max-height: none !important;
  height: auto !important;
  min-height: 180px;
  width: 100%;
  overflow: visible !important;
}
/* WordPress 自動 oEmbed の link preview */
html .post-single__content .wp-block-embed iframe,
html .post-single__content figure.wp-block-embed iframe {
  max-height: none !important;
  height: auto !important;
  aspect-ratio: 16 / 9;  /* デフォルトの安全な比率 */
}
/* coconala 専用カード（クラスを使った独自実装の場合） */
html .post-single__content a[href*="coconala.com"][class*="card"],
html .post-single__content .coconala-card,
html .post-single__content [class*="coconala"] {
  display: block;
  min-height: 200px;
  height: auto !important;
  overflow: visible !important;
}

/* ============================================================================
   Roadmap 100 点パック (2026-05-18)
   ----------------------------------------------------------------------------
   (Marketer) wn-voices に Before/After + イニシャルアバター
   (Marketer) 保証バッジ wn-guarantee
   (Marketer) Exit-intent modal wn-exit-modal
   (Designer) セクションテンプレ繰返し回避用 wn-section--split / --overlap / --numbered
   (Responsive) drawer 完全 UI 化 (.mobile-drawer)
   ============================================================================ */

/* ---------- お客様の声: イニシャルアバター ---------- */
.wn-voices__head {
  display: flex !important;
  align-items: center;
  gap: .75rem;
}
.wn-voices__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: hsl(var(--avatar-hue, 210) 60% 92%);
  color: hsl(var(--avatar-hue, 210) 50% 35%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0;
  border: 2px solid hsl(var(--avatar-hue, 210) 60% 88%);
}
.wn-voices__head-meta {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  flex: 1;
  min-width: 0;
}
.wn-voices__head-meta .wn-voices__tag { align-self: flex-start; }

/* ---------- お客様の声: Before/After 2 行表記 ---------- */
.wn-voices__ba {
  margin: 0 0 .85rem;
  padding: 0;
  display: grid;
  gap: .35rem;
  border: 1px solid var(--c-border, #E5E1D6);
  border-radius: 8px;
  background: var(--c-mist, #F7F5F0);
  overflow: hidden;
}
.wn-voices__ba-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: .5rem;
  align-items: start;
  padding: .55rem .75rem;
  font-size: .82rem;
  line-height: 1.55;
}
.wn-voices__ba-row dt {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .15em .5em;
  border-radius: 999px;
  text-align: center;
}
.wn-voices__ba-row dd { margin: 0; color: var(--c-ink, #1B2547); }
.wn-voices__ba-row--before {
  background: rgba(143, 36, 36, .04);
}
.wn-voices__ba-row--before dt {
  background: rgba(143, 36, 36, .12);
  color: #8F2424;
}
.wn-voices__ba-row--after {
  background: rgba(56, 142, 60, .04);
}
.wn-voices__ba-row--after dt {
  background: rgba(56, 142, 60, .14);
  color: #2E7D32;
}
.wn-voices__industry {
  font-size: .78rem;
  font-weight: 500;
  color: var(--c-text-mute, #4A5570);
  margin-left: .25em;
}

/* ---------- 保証バッジ wn-guarantee ---------- */
.wn-guarantees {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}
.wn-guarantee {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .55rem .85rem;
  background: rgba(255, 111, 61, .08);
  border: 1px solid rgba(255, 111, 61, .25);
  color: var(--c-ink, #1B2547);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.4;
}
.wn-guarantee__icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: var(--c-accent, #FF6F3D);
}
.wn-guarantee strong {
  color: var(--c-accent, #FF6F3D);
  font-weight: 900;
}

/* ---------- Exit-intent modal ---------- */
.wn-exit-modal[hidden] { display: none; }
.wn-exit-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 30, 90, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.wn-exit-modal.is-shown {
  opacity: 1;
  pointer-events: auto;
}
.wn-exit-modal__card {
  background: #fff;
  border-radius: 16px;
  max-width: 480px;
  width: 100%;
  padding: 2rem 1.75rem 1.75rem;
  box-shadow: 0 20px 60px rgba(15, 30, 90, .35);
  position: relative;
  transform: translateY(20px);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.wn-exit-modal.is-shown .wn-exit-modal__card { transform: translateY(0); }
.wn-exit-modal__close {
  position: absolute;
  top: .6rem; right: .6rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c-mist, #F7F5F0);
  border: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-text-mute, #4A5570);
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wn-exit-modal__close:hover { background: var(--c-mist-2, #E5E1D6); }
.wn-exit-modal__eyebrow {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent, #FF6F3D);
  margin: 0 0 .5rem;
}
.wn-exit-modal__title {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.45;
  margin: 0 0 .65rem;
  color: var(--c-ink, #1B2547);
  text-wrap: balance;
}
.wn-exit-modal__body {
  font-size: .9rem;
  line-height: 1.75;
  color: var(--c-text-mute, #4A5570);
  margin: 0 0 1.25rem;
}
.wn-exit-modal__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.wn-exit-modal__cta .btn { flex: 1 1 auto; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .wn-exit-modal, .wn-exit-modal__card { transition: none !important; }
}

/* ---------- セクション差別化: split-text-image ---------- */
.wn-section--split .wn-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 900px) {
  .wn-section--split .wn-wrap {
    grid-template-columns: 5fr 7fr;
    gap: 3.5rem;
  }
  .wn-section--split[data-reverse="true"] .wn-wrap {
    grid-template-columns: 7fr 5fr;
  }
  .wn-section--split[data-reverse="true"] .wn-wrap > :first-child {
    order: 2;
  }
}

/* ---------- セクション差別化: numbered (大きな数字付きリスト) ---------- */
.wn-section--numbered .wn-numbered-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  counter-reset: wn-num;
  display: grid;
  gap: 1.5rem;
}
.wn-section--numbered .wn-numbered-list > li {
  counter-increment: wn-num;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
}
.wn-section--numbered .wn-numbered-list > li::before {
  content: counter(wn-num, decimal-leading-zero);
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
  color: var(--c-accent, #FF6F3D);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* ---------- セクション差別化: wn-flow を自動採番 ---------- */
.wn-section--flow-numbered .wn-flow {
  counter-reset: wn-flow;
}
.wn-section--flow-numbered .wn-flow-step {
  counter-increment: wn-flow;
  position: relative;
  padding-left: clamp(48px, 4vw, 72px);
}
.wn-section--flow-numbered .wn-flow-step::before {
  content: counter(wn-flow, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -.1em;
  font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  color: var(--c-accent, #FF6F3D);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* ---------- セクション差別化: overlap (オーバーラップ画像) ---------- */
.wn-section--overlap .wn-wrap {
  position: relative;
}
.wn-section--overlap .wn-overlap-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 111, 61, .04) 0%, rgba(15, 30, 90, .04) 100%);
  border-radius: 24px;
  z-index: 0;
}
.wn-section--overlap .wn-overlap-content {
  position: relative;
  z-index: 1;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* ---------- Mobile drawer 完全 UI ---------- */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
}
.mobile-drawer[hidden] { display: block; }  /* CSS で hidden を解除（JS で本体制御）*/
.mobile-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 30, 90, .55);
  opacity: 0;
  transition: opacity .3s ease;
}
.mobile-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 380px);
  background: #fff;
  box-shadow: -8px 0 32px rgba(15, 30, 90, .18);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  display: flex;
  flex-direction: column;
  /* iOS safe-area: 縦向き notch + ホームインジケータ + 横向きノッチ右側 */
  padding-top: max(env(safe-area-inset-top, 0), 0px);
  padding-bottom: max(env(safe-area-inset-bottom, 0), 0px);
  padding-right: env(safe-area-inset-right, 0);
  /* drawer は右端から滑り込むので、横向き時の右ノッチに被らないよう
     パネル幅自体を inset-right ぶん拡張せず padding 側で吸収。 */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-drawer.is-open { pointer-events: auto; }
.mobile-drawer.is-open .mobile-drawer__overlay { opacity: 1; }
.mobile-drawer.is-open .mobile-drawer__panel { transform: translateX(0); }
.mobile-drawer__close {
  align-self: flex-end;
  margin: 1rem;
  background: var(--c-mist, #F7F5F0);
  border: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 旧 mobile-drawer__list スタイル (2026-05-19 までの実装) は廃止。
   2026-05-21 のリデザイン (この CSS の末尾「MOBILE DRAWER — 全面リデザイン」ブロック) に統合。 */
.mobile-drawer__list .mobile-drawer__sub {
  display: block;
  font-size: .75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .65);
  margin-top: .15rem;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-drawer__overlay, .mobile-drawer__panel { transition: none !important; }
}

/* drawer アクティブページのハイライト(2026-05-26 追加)
   JS が現在ページに .is-current を付与。WordPress の current-menu-item とも整合。
   左にアクセントバー + 背景を僅かに明るく。 */
.mobile-drawer .is-current,
.mobile-drawer__list li.current-menu-item > a,
.mobile-drawer__list li.current-menu-ancestor > a,
.mobile-drawer__list li > a[aria-current="page"] {
  position: relative;
  background: rgba(255, 255, 255, .08) !important;
  font-weight: 700 !important;
}
.mobile-drawer .is-current::before,
.mobile-drawer__list li.current-menu-item > a::before,
.mobile-drawer__list li > a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  background: var(--c-accent, #F26B22);
  border-radius: 0 2px 2px 0;
}
.mobile-drawer .is-current-ancestor {
  color: rgba(255, 255, 255, .95) !important;
}

/* ============================================================================
   2026-05-19 — ユーザー指摘 3 件への修正
   ----------------------------------------------------------------------------
   (1) 日本語見出しの不自然な改行
       例: 「WordPress 復旧サービ／ス」「WordPress 復／旧・トラブル対応の」
       原因: 既定の word-break が単語境界を尊重せずに途中で折り返す
       対策: word-break: keep-all + line-break: strict + text-wrap: pretty
   (2) ヘッダーカレントメニューがダサい（dark navy 全塗りピル）
       原因: .nav-primary__list li.current-menu-item > a { background: var(--c-ink); color:#fff; }
       対策: 全塗りやめ → underline + accent ドットで上品に
   (3) FV の横幅が狭く H1 が途中で折り返す
       原因: .wn-hero--with-character .wn-hero-inner の padding-right が 42vw
              キャラに広く取りすぎ
       対策: 文字エリアを広げる（content max-width 拡大／キャラ予約幅縮小）
   ========================================================================== */

/* ---------- (1) 日本語見出しの改行制御 ---------- */
html h1, html h2, html h3, html h4,
.wn-hero-title,
.wn-section-title,
.wn-svc-title,
.wn-flow-step-title,
.wn-voices__title,
.wn-cta-finale__title,
.wn-case-title,
.post-single__title,
.post-title,
.entry-title {
  /* CJK では keep-all が必須 (英単語のみハイフネーション可) */
  word-break: keep-all !important;
  line-break: strict !important;
  /* progressive: 対応ブラウザではバランス良く改行 */
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* H1 / 大見出しはバランス優先で塊感を出す */
.wn-hero-title,
.wn-section-title,
.wn-cta-finale__title,
.post-single__title {
  text-wrap: balance;
}

/* サービスカードのタイトル：
   text-wrap: balance に統一。nowrap は廃止（脆く運用に耐えないため）。
   コピー側を短く（緊急復旧（24h 以内）/ 復旧サービス / 月額保守プラン）
   することで自然に 1 行に収まる前提。
   ブレークポイントは既存 grid（700px / 1000px）に合わせる。 */
.wn-svc-title, .wn-service-title {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none;
  text-wrap: balance;
}

/* ---------- (2) ヘッダーカレントメニュー再設計 ---------- */
/* 旧: solid Ink fill — モダンさが欠ける。新: 細いアンダーライン＋accent ドット */
html .nav-primary__list li.current-menu-item > a,
html .nav-primary__list li.current-page-ancestor > a,
html .nav-primary__list li.current-menu-parent > a {
  background: transparent !important;
  color: var(--c-ink) !important;
  font-weight: 800;
  position: relative;
}
html .nav-primary__list li.current-menu-item > a::after,
html .nav-primary__list li.current-page-ancestor > a::after,
html .nav-primary__list li.current-menu-parent > a::after {
  content: "";
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: 4px;
  height: 2px;
  background: var(--c-accent, #FF6F3D);
  border-radius: 2px;
  transition: background .2s ease;
}
html .nav-primary__list li.current-menu-item > a::before,
html .nav-primary__list li.current-page-ancestor > a::before {
  content: "";
  position: absolute;
  top: 4px; right: 6px;
  width: 5px; height: 5px;
  background: var(--c-accent, #FF6F3D);
  border-radius: 50%;
}
/* 通常ホバー時も微妙に違いを出す */
html .nav-primary__list li > a:hover {
  background: var(--c-mist, #F7F5F0) !important;
}
html[data-theme="dark"] .nav-primary__list li > a:hover {
  background: rgba(255, 255, 255, .06) !important;
}
html[data-theme="dark"] .nav-primary__list li.current-menu-item > a,
html[data-theme="dark"] .nav-primary__list li.current-page-ancestor > a,
html[data-theme="dark"] .nav-primary__list li.current-menu-parent > a,
html[data-theme="dark"] .nav-primary__list li > a[aria-current="page"] {
  background: transparent !important;
}

/* ---------- (3) FV の content エリア拡大（character hero）----------
   ユーザー指定値（2026-05-19）:
   - トップ photo hero: .wn-hero__photo { width: clamp(320px, 55vw, 920px) }
   - recovery / case-studies (character-left): padding-left: clamp(240px, 36vw, 450px)
   - maintenance (character-right): padding-right: clamp(240px, 36vw, 450px)
   - キャラ画像本体（width）は復元: clamp(240px, 36vw, 520px)（=padding より +70px）
     → コンテンツ列との微小なオーバーラップで奥行き演出

   2026-05-19 追加修正：キャラを inner-anchor に
   ----------------------------------------------------------------------------
   現状の問題: .wn-hero__character が `right: 0` でセクション右端に固定。
   inner 幅 1200px を超えるビューポートで (vw - 1200) / 2 の空白が生まれ、
   キャラとコンテンツが離れて見える（1920px で 360px の空白）。

   対策: max(0, calc(50vw - 600px)) で「inner の右端」に張り付かせる。
   - vw <= 1200px: 50vw - 600 <= 0 → max で 0 → 従来通り viewport 右端
   - vw  > 1200px: max は正 → inner の右端と一致 → 空白消滅
   character-left は left に同じロジック。 */

@media (min-width: 900px) {
  /* トップの photo hero 幅指定
     2026-05-24: 元々メディアクエリの外にあり、html prefix + !important で
     全画面幅に effecting していた → SP で破綻していた問題を、@media 内に
     移動 + html prefix と !important を除去して整理。
     specificity (0,0,2,0) で .wn-hero__photo の元定義 (line 3692, 0,0,1,0)
     に確実に勝つため、!important も html prefix も不要。 */
  .wn-hero--with-photo .wn-hero__photo {
    width: clamp(320px, 55vw, 920px);
  }

  /* character right（既定）: 例 maintenance */
  html .wn-hero--with-character .wn-hero-inner {
    padding-right: clamp(240px, 36vw, 450px) !important;
  }
  /* character left（反転）: recovery / case-studies */
  html .wn-hero--character-left .wn-hero-inner {
    padding-right: var(--gutter, 1.5rem) !important;
    padding-left: clamp(240px, 36vw, 450px) !important;
  }
  /* キャラ画像本体は padding と同じ 450px キャップに揃える。
     520px を維持すると character-left（recovery / case-studies）で
     吹き出しが H1 と衝突する（1680px 超でとくに顕著）。
     padding=450 / 画像幅=450 で **オーバーラップなし**にする。 */
  html .wn-hero--with-character .wn-hero__character,
  html .wn-hero--character-left .wn-hero__character {
    width: clamp(240px, 36vw, 450px) !important;
  }
  /* ★ キャラ画像を inner（max-width 1200px）の右端に張り付かせる */
  html .wn-hero--with-character .wn-hero__character {
    right: max(0px, calc(50vw - 600px)) !important;
    left: auto !important;
  }
  html .wn-hero--character-left .wn-hero__character {
    left: max(0px, calc(50vw - 600px)) !important;
    right: auto !important;
  }
  /* H1 は max-width を撤回し、コラム幅を最大活用 */
  html .wn-hero--with-character .wn-hero-title {
    max-width: none !important;
    font-size: clamp(1.95rem, 1.05rem + 2.2vw, 2.85rem) !important;
    text-wrap: balance;
  }
  html .wn-hero--with-character .wn-hero-body {
    max-width: 60ch !important;
  }
}

/* photo hero（トップ）は viewport-anchor に戻す。
   写真は背景的役割（ヒーロー全体の右半分を埋める）なので、
   inner-anchor だとワイド画面で右側に暗い帯が出る。
   character hero（キャラはコンテンツに寄り添う）とは方針を分ける。
   2026-05-19 v3+: ワイド画面の暗帯対策
   2026-05-24: html prefix と !important を除去。specificity (0,0,2,0)
   で .wn-hero__photo (0,0,1,0) に勝つため安易な強制は不要。 */
@media (min-width: 900px) {
  .wn-hero--with-photo .wn-hero__photo {
    right: 0;        /* viewport 右端まで */
    left: auto;
  }
}

/* photo hero の本文は max-width を緩和して、不自然な分断を避ける */
html .wn-hero--with-photo .wn-hero-body {
  max-width: clamp(40ch, 50vw, 70ch) !important;
}

/* hero 本文全般に keep-all を適用（「実 / 際」のような mid-word break を防ぐ）。
   見出しは別途 keep-all 済み。本文はこれまで normal で broken word が発生していた */
html .wn-hero-body,
html .wn-section-lede,
html .wn-svc-body {
  word-break: keep-all !important;
  line-break: strict !important;
  text-wrap: pretty;
}

/* ---------- iOS safe-area-inset for all sticky / fixed UI ----------
   Notch / home-indicator areas on iPhone 11+ overlap with our fixed header,
   bottom nav, SOS FAB, and the mobile drawer. Add padding via env() so we
   never sit underneath the system UI. */
.site-header {
  padding-top: env(safe-area-inset-top, 0);
}
.wn-mobile-bottom-nav,
.wn-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.wn-sos-fab {
  bottom: calc(env(safe-area-inset-bottom, 0) + 16px);
}
/* .mobile-drawer__panel の safe-area 設定は主ブロック (line ~4686) に統合済み (2026-05-26)。
   ここの重複定義は削除。 */
.wn-exit-modal__card {
  margin-bottom: env(safe-area-inset-bottom, 0);
}

/* ============================================================================
   Layout & icon polish (2026-05-18) — ユーザー指摘修正
   ----------------------------------------------------------------------------
   (1) .footer-signal__title が display: inline と判定され、eyebrow と
       タイトルが 1 行に並ぶ問題 → block 強制で改行を復活
   (2) wn-track-record__stat-icon の wrapper 40×40 / SVG 20×20 が小さい
       → wrapper 64×64 / SVG 32×32 に拡大、accent tint で目立たせる
   (3) wn-service-icon / wn-svc-icon の絵文字が wrapper 56×56 に対して
       字サイズ未指定で控えめに見える → font-size を 1.9rem に拡大
   ============================================================================ */

/* (1) footer-signal: eyebrow と title を確実に縦に並べる */
html .footer-signal__eyebrow {
  display: block !important;
  margin-bottom: .85rem !important;
}
html .footer-signal__title {
  display: block !important;
  margin-top: 0 !important;
}

/* (2) wn-track-record の統計アイコンを拡大 */
html .wn-track-record__stat-icon {
  width: 64px !important;
  height: 64px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 111, 61, .12);
  color: var(--c-accent, #FF6F3D);
  margin-bottom: .5rem;
  flex-shrink: 0;
}
html .wn-track-record__stat-icon svg {
  width: 32px !important;
  height: 32px !important;
}

/* (3) サービスカード / 対応領域カードのアイコン（絵文字含む） */
html .wn-service-icon,
html .wn-svc-icon {
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;       /* 絵文字を大きく見せる */
  line-height: 1;
  border-radius: 16px;
  background: rgba(255, 111, 61, .1);
  margin-bottom: .25rem;
}
html .wn-service-icon svg,
html .wn-svc-icon svg {
  width: 36px !important;
  height: 36px !important;
  stroke-width: 1.75;
}
/* tone 別 tint をやや濃く（アイコンが映える） */
html .wn-svc[data-tone="emergency"] .wn-svc-icon { background: rgba(143, 36, 36, .12); }
html .wn-svc[data-tone="recovery"]  .wn-svc-icon { background: rgba(255, 111, 61, .15); }
html .wn-svc[data-tone="maintain"]  .wn-svc-icon { background: rgba(56, 142, 60, .12); }

/* ============================================================================
   お客様の声 (wn-voices) — Tips 55 / Webサイト分析改善 Ch2-§5 反映
   ============================================================================
   ココナラ評価から実コメントを抜粋した 2×2 のカードグリッド。
   コンテキスト: 抽象的な褒め言葉ではなく "リピート" "改ざん復旧" "即日復旧"
   などの具体タグでサービス種別を示し、★評価＋出典で透明性を担保する。
   ============================================================================ */
.wn-voices {
  max-width: var(--container, 1180px);
  margin-inline: auto;
  padding: clamp(2.5rem, 2rem + 3vw, 5rem) var(--gutter, 1rem);
  text-align: center;
}
.wn-voices__eyebrow {
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-accent, #FF6F3D);
  margin: 0 0 .5rem;
}
.wn-voices__title {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 900;
  line-height: 1.35;
  margin: 0 0 1rem;
  color: var(--c-ink, #1B2547);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.wn-voices__lede {
  max-width: 56ch;
  margin: 0 auto 2.5rem;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--c-text-mute, #4A5570);
}
.wn-voices__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  text-align: left;
}
@media (min-width: 720px) {
  .wn-voices__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
.wn-voices__card {
  background: var(--c-paper, #fff);
  border: 1px solid var(--c-border, #E5E1D6);
  border-top: 3px solid var(--c-accent, #FF6F3D);
  border-radius: var(--r-lg, 12px);
  padding: 1.5rem 1.6rem 1.35rem;
  position: relative;
  box-shadow: 0 2px 8px rgba(15, 30, 90, .04);
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s cubic-bezier(.2,.7,.2,1);
}
.wn-voices__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 30, 90, .08), 0 2px 6px rgba(15, 30, 90, .04);
}
.wn-voices__card::before {
  /* 大きな引用符 — 「これは引用です」と一目で分かる視覚記号 */
  content: """;
  position: absolute;
  top: .35rem;
  right: 1rem;
  font-size: 4rem;
  line-height: 1;
  color: rgba(255, 111, 61, .15);
  font-family: Georgia, "Times New Roman", serif;
  pointer-events: none;
}
.wn-voices__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}
.wn-voices__rating {
  font-size: .9rem;
  letter-spacing: .05em;
  color: #F5A623;
  font-weight: 800;
}
.wn-voices__tag {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--c-accent, #FF6F3D);
  background: rgba(255, 111, 61, .1);
  padding: .25rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.wn-voices__body {
  font-size: .9375rem;
  line-height: 1.85;
  color: var(--c-ink, #1B2547);
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  font-style: normal;
  font-feature-settings: "palt" 1;
  letter-spacing: .015em;
}
.wn-voices__foot {
  border-top: 1px dashed var(--c-border, #E5E1D6);
  padding-top: .75rem;
  margin: 0;
}
.wn-voices__attribution {
  font-size: .875rem;
  margin: 0 0 .15rem;
  color: var(--c-ink, #1B2547);
}
.wn-voices__meta {
  font-size: .75rem;
  color: var(--c-text-mute, #4A5570);
  margin: 0;
  line-height: 1.5;
}
.wn-voices__cta {
  margin: 2rem 0 0;
  text-align: center;
}
.wn-voices__cta-link {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: .9375rem;
  font-weight: 800;
  color: var(--c-accent, #FF6F3D);
  text-decoration: none;
  padding: .65rem 1.25rem;
  border: 1.5px solid var(--c-accent, #FF6F3D);
  border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}
.wn-voices__cta-link:hover {
  background: var(--c-accent, #FF6F3D);
  color: #fff;
}

/* ============================================================================
   Typography & Hierarchy v2 (2026-05-18, PDF 3冊由来)
   ============================================================================
   抽出原則:
     - 数字は大きく、助詞・単位は小さく（ジャンプ率）— Process Book Ch6-9
     - そろえるべき部分はすべてそろえる — Ch6-6
     - メニュー周りの余白は広めに — Ch6-10
     - 読みやすさ = 可読性 + 視認性 + 判読性 — Ch6-9
     - 配色 70:25:5 法則 — Ch6-8
     - センターぞろえは最終行に注意 — Ch6-9
     - 白文字 over 写真 は「黒半透明 + 白文字」が読みやすい — Ch6-9
   ============================================================================ */

/* ---------- 数字のジャンプ率（統計表示） ---------- */
/* 625<small>件</small> パターン: 数字を最大化、単位を半分以下に。
   小さな数字 (★4.9) も同じ原則で「★」と「数字」を別 weight に。 */
html .wn-track-record__stat-num {
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent, #FF6F3D);
  display: inline-flex;
  align-items: baseline;
  gap: .15em;
}
html .wn-track-record__stat-num small,
html .wn-track-record__stat-num .unit {
  font-size: .42em;
  font-weight: 700;
  color: var(--c-text-mute, #4A5570);
  letter-spacing: 0;
}
html .wn-track-record__stat-label {
  font-size: .85rem;
  font-weight: 700;
  color: var(--c-ink, #1B2547);
  margin-top: .35rem;
  line-height: 1.5;
}
html .wn-track-record__stat-note {
  font-size: .72rem;
  color: var(--c-text-mute, #4A5570);
  line-height: 1.5;
  margin-top: .15rem;
}

/* ---------- セクションヘッダーの 3 層階層 (eyebrow → title → lede) ---------- */
/* PDF: 「メリハリがあるか」「見出しは興味をもってもらえる内容か」
   eyebrow (12-14px, 全角字間広め, accent) → title (clamp 28-44, navy)
   → lede (16-18px, line-height 1.85, mute) という階層を全 wn-section* に。 */
html .wn-section-sub,
html .wn-hero-tag,
html .footer-signal__eyebrow,
html .widget__title,
html .wn-author-card__eyebrow,
html .wn-series-nav__eyebrow,
html .error-404__panel-title,
html .site-footer__col-title {
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  /* メリハリ確保: eyebrow と直下 title の間に視覚的呼吸 */
}
html .wn-section-title {
  margin-top: .15rem;
}
html .wn-section-lede {
  max-width: 56ch;     /* 推奨: 読みやすい一行 = 全角 28〜35字 */
  margin-inline: auto;
  line-height: 1.85;
}

/* ---------- ナビメニュー: 余白を広めに（Ch6-10）---------- */
@media (min-width: 900px) {
  html .nav-primary__list {
    gap: clamp(1.1rem, .6rem + .8vw, 1.6rem) !important;
  }
  html .nav-primary__list > li > a {
    padding: .5rem .25rem;   /* タップ領域確保＋誤クリック回避 */
  }
}

/* ---------- 写真上の白文字オーバーレイ — REVERTED (2026-05-18) ----------
   ユーザー指示でトップ FV の背景色を元に戻すため、PDF Ch6-9 由来の
   navy 半透明グラデを撤回。元の wn-hero--with-photo の透過設計を維持。
   今後ヒーローの文字可読性が問題になった場合は、画像 srcset 側で
   コントラストを担保するか、別 class を切るほうが副作用が少ない。 */

/* ---------- アイコン+テキストのベースライン揃え統一 ---------- */
/* PDF Ch6-6「そろえるべき部分はすべてそろえる」アイコンとテキストの高さ */
html .btn,
html .wn-btn,
html .nav-primary__list a,
html .bottom-nav__item,
html .post-meta,
html .share__btn {
  /* SVG が文字より少しだけ上にズレる典型問題への対策 */
  align-items: center;
}
html .btn > svg,
html .wn-btn > svg {
  flex-shrink: 0;
  vertical-align: middle;
}

/* ---------- prose 本文: 読みやすさ 3 要素を仕上げる ---------- */
/* 可読性 = line-height 1.85、letter-spacing .015em で長文耐性
   視認性 = 本文と背景のコントラスト確保（.prose の color は --c-ink ベース）
   判読性 = 助詞「は」「を」が連続しないよう、CSS は介入できない（文章レベル）
            だが、本文の hanging-punctuation で読点の位置を最適化 */
html .prose,
html .post-single__content {
  line-height: 1.85;
  letter-spacing: .015em;
  hanging-punctuation: allow-end;
  text-spacing-trim: trim-start;
  font-feature-settings: "palt" 1;  /* 約物半角化で日本語の詰まり感を解消 */
}
html .prose p,
html .post-single__content p {
  text-wrap: pretty;   /* 段落最終行の孤児（widows）を最小化 */
}
html .prose h2,
html .post-single__content h2 {
  /* 見出しは padding-top を多く取り、グループの区切りを明確化 (Ch6-3) */
  margin-top: 3rem;
  scroll-margin-top: calc(var(--header-h, 64px) + 1rem);
}
html .prose h3,
html .post-single__content h3 {
  margin-top: 2rem;
  scroll-margin-top: calc(var(--header-h, 64px) + 1rem);
}

/* ---------- コードブロックのコントラスト最適化 ---------- */
/* PDF: 視認性は明度・コントラストで決まる。コードブロックの行内コードと
   通常コードのコントラストを上げて、読み飛ばしを減らす。 */
html .prose code:not(pre code),
html .post-single__content code:not(pre code) {
  background: #FFF4ED;   /* accent の超薄 tint */
  color: #5B2410;        /* accent-deep よりも更に濃い茶でハイコントラスト */
  padding: .15em .4em;
  border-radius: 4px;
  font-size: .92em;
  border: 1px solid rgba(255, 111, 61, .18);
  font-feature-settings: normal;  /* 等幅をキープ */
}

/* ---------- センターぞろえの最終行対策 (Ch6-9) ---------- */
/* hero / footer-signal / cta finale 系の中央ぞろえテキストで、
   最後の 1〜2 字が孤立しないように text-wrap:balance を強制。 */
html .wn-hero-body,
html .footer-signal__body,
html .wn-cta-finale__lede,
html .error-404__cta-lede {
  text-wrap: balance;
}

/* ---------- リスト項目の視覚リズム (Ch6-3「配置が単調」対策) ---------- */
/* prose ul で全アイテムが同じ高さで並ぶと単調。最初の項目だけ強調色の
   ドットにすることで、リズムを生む。 */
html .prose ul > li::marker {
  color: var(--c-accent, #FF6F3D);
}

/* ============================================================================
   UX polish layer (2026-05-18) — motion / a11y / mobile / micro-interactions
   ============================================================================
   この section は「気持ちよく触れる」ための小さな調整の集合体。
   Lighthouse / Core Web Vitals に影響しない範囲で、ブランド ink + accent の
   一貫性を保ちながら追加。すべて prefers-reduced-motion を尊重する。
   ============================================================================ */

/* ---------- a11y: skip link ---------- */
.skip-link {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  padding: .75rem 1.25rem;
  background: var(--c-ink, #1B2547);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  border-bottom-right-radius: 8px;
  transform: translateY(-100%);
  transition: transform .18s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--c-accent, #FF6F3D);
  outline-offset: 0;
}

/* ---------- a11y: brand-consistent focus ring ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--c-accent, #FF6F3D);
  outline-offset: 2px;
  border-radius: 4px;
  transition: outline-offset .12s ease;
}
/* インライン要素のリンクは下線で意図を示し、focus ring は控えめに */
.prose a:focus-visible,
.post-single__content a:focus-visible {
  outline-offset: 3px;
}
/* ボタンは既に shadow を持つので focus 時に oultline-offset を増やす */
.btn:focus-visible,
.share__btn:focus-visible,
.linkbox-tile:focus-visible,
.wn-case:focus-visible {
  outline-offset: 3px;
}

/* ---------- Reading progress bar ---------- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9998;
  background: transparent;
  pointer-events: none;
}
/* ログイン中（管理バー表示時）は admin bar の下に出す */
body.admin-bar .reading-progress { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .reading-progress { top: 46px; }
}
.reading-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--c-accent, #FF6F3D) 0%, #FFB088 100%);
  box-shadow: 0 1px 4px rgba(255, 111, 61, .35);
  transition: width .08s linear;
  will-change: width;
}

/* ---------- Scroll reveal — opacity + translateY のみ ---------- */
.reveal-init {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal-init.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- Card hover unification ---------- */
.wn-case,
.related__card,
.linkbox-tile,
.error-404__panel a {
  transition: transform .22s cubic-bezier(.2,.7,.2,1),
              box-shadow .22s cubic-bezier(.2,.7,.2,1),
              border-color .22s ease,
              background .22s ease;
}
.wn-case:hover,
.related__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 30, 90, .10), 0 2px 6px rgba(15, 30, 90, .04);
}
.wn-case:active,
.related__card:active,
.linkbox-tile:active {
  transform: translateY(-1px);
  transition-duration: .08s;
}

/* ---------- Button micro-interaction ---------- */
.btn {
  transition: background .18s ease,
              color .18s ease,
              transform .15s cubic-bezier(.2,.7,.2,1),
              box-shadow .2s ease,
              border-color .18s ease;
  will-change: transform;
}
.btn:active { transform: translateY(1px); transition-duration: .06s; }

/* ---------- Floating SOS CTA (mobile-first) ---------- */
.sos-fab {
  position: fixed;
  right: 16px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .7rem 1.05rem .7rem .85rem;
  border-radius: 999px;
  background: var(--c-accent, #FF6F3D);
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
  font-size: .875rem;
  letter-spacing: .02em;
  box-shadow: 0 8px 24px rgba(255, 111, 61, .35), 0 2px 6px rgba(15, 30, 90, .12);
  opacity: 0;
  transform: translateY(12px) scale(.96);
  transition: opacity .25s cubic-bezier(.2,.7,.2,1),
              transform .25s cubic-bezier(.2,.7,.2,1),
              background .18s ease;
}
.sos-fab[hidden] { display: none; }
.sos-fab.is-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.sos-fab:hover {
  background: var(--c-accent-deep, #E5552A);
  color: #fff !important;
}
.sos-fab__ring {
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid rgba(255, 111, 61, .35);
  animation: sos-fab-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes sos-fab-pulse {
  0%   { transform: scale(.92); opacity: .65; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.2);  opacity: 0; }
}
.sos-fab__icon { flex-shrink: 0; }
/* PC では FAB を消す（ヘッダー CTA が同等機能を提供） */
@media (min-width: 900px) {
  .sos-fab { display: none !important; }
}

/* ---------- Bottom nav: タップ領域 + active 強化 ---------- */
@media (max-width: 899px) {
  .bottom-nav__item {
    min-height: 56px;          /* WCAG タッチ 44 を超える */
    transition: background .18s ease, color .18s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav__item:active {
    background: rgba(255, 111, 61, .08);
    transform: scale(.97);
    transition-duration: .06s;
  }
  /* 現在ページのナビ項目を accent に */
  body.is-page.is-slug-wp-emergency .bottom-nav__item[data-key="emergency"],
  body.is-page.is-slug-wp-recovery-service .bottom-nav__item[data-key="recovery"],
  body.is-page.is-slug-wp-maintenance .bottom-nav__item[data-key="maintenance"],
  body.is-page.is-slug-case-studies .bottom-nav__item[data-key="cases"],
  body.home .bottom-nav__item[data-key="home"] {
    color: var(--c-accent, #FF6F3D);
  }
}

/* ---------- Reduced motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-init {
    opacity: 1 !important;
    transform: none !important;
  }
  .sos-fab__ring { animation: none !important; }
}

/* ============================================================================
   404 page "総合案内所" (Tips 61)
   ============================================================================
   行き止まりではなく「ここから 4 つの入口で目的のページにたどり着ける」
   panel を 3 列で提示。クイック導線 / 人気記事 / カテゴリ + 最後に
   ヒアリング窓口の CTA。 */
.error-404--rich {
  text-align: left;
  max-width: var(--container-narrow, 920px);
  margin-inline: auto;
  padding: clamp(2rem, 1.5rem + 3vw, 4rem) 0;
}
.error-404--rich .error-404__code {
  font-size: clamp(4rem, 3rem + 5vw, 7rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--c-accent, #FF6F3D) 0%, #FFB088 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 .5rem;
}
.error-404--rich .error-404__title {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 .85rem;
  color: var(--c-ink, #1B2547);
}
.error-404--rich .error-404__lede {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--c-text-mute, #4A5570);
  margin: 0 0 2rem;
}
.error-404--rich .error-404__search { margin: 0 0 1.5rem; }
.error-404--rich .error-404__search-hint {
  font-size: .8125rem;
  color: var(--c-text-mute, #4A5570);
  margin: .5rem 0 0;
}
.error-404__sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 0 0 2rem;
}
@media (min-width: 720px) {
  .error-404__sections { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.error-404__panel {
  background: var(--c-mist, #F7F5F0);
  border: 1px solid var(--c-border, #E5E1D6);
  border-top: 3px solid var(--c-accent, #FF6F3D);
  border-radius: var(--r, 8px);
  padding: 1.1rem 1.25rem 1.25rem;
}
.error-404__panel-title {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent, #FF6F3D);
  margin: 0 0 .75rem;
}
.error-404__panel-links, .error-404__panel-cats {
  list-style: none;
  padding: 0;
  margin: 0;
}
.error-404__panel-links li, .error-404__panel-cats li {
  font-size: .875rem;
  line-height: 1.55;
  border-top: 1px dashed var(--c-border, #E5E1D6);
}
.error-404__panel-links li:first-child, .error-404__panel-cats li:first-child {
  border-top: 0;
}
.error-404__panel-links a, .error-404__panel-cats a {
  display: block;
  padding: .55rem 0;
  color: var(--c-ink, #1B2547);
  text-decoration: none;
  transition: color .18s ease;
}
.error-404__panel-links a:hover, .error-404__panel-cats a:hover {
  color: var(--c-accent, #FF6F3D);
}
.error-404__cat-count {
  font-size: .75rem;
  color: var(--c-text-mute, #4A5570);
  margin-left: .25em;
}
.error-404__cta {
  background: linear-gradient(135deg, var(--c-blue, #3D5BBF) 0%, var(--c-ink, #1B2547) 100%);
  color: #fff;
  padding: 1.75rem 1.5rem;
  border-radius: var(--r-lg, 12px);
  text-align: center;
}
.error-404__cta-lede {
  font-size: .9375rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, .92);
  margin: 0 0 1.25rem;
}
.error-404__cta .error-404__links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}
.error-404__cta .btn--primary {
  background: var(--c-accent, #FF6F3D) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.error-404__cta .btn--primary:hover {
  background: var(--c-accent-deep, #E5552A) !important;
}
.error-404__cta .btn--ghost {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
}
.error-404__cta .btn--ghost:hover {
  background: rgba(255, 255, 255, .1) !important;
  border-color: #fff !important;
}

/* ============================================================================
   Author card (記事末尾) — Tips 52「『誰が書いたか』は信頼の鍵」
   ============================================================================
   匿名の発信ではなく、顔写真＋名前＋肩書＋実績＋関連リンク をパックして
   コンテンツの権威性を補強する。レイアウトはモバイル縦／PC 横の自然な
   レスポンシブで、写真は丸枠 + 軽い影 + 上辺アクセント。 */
.wn-author-card {
  margin: 2.5rem 0 0;
  padding: 1.5rem;
  background: var(--c-mist, #F7F5F0);
  border: 1px solid var(--c-border, #E5E1D6);
  border-top: 3px solid var(--c-accent, #FF6F3D);
  border-radius: var(--r-lg, 12px);
  color: var(--c-ink, #1B2547);
}
.wn-author-card__eyebrow {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-accent, #FF6F3D);
  margin: 0 0 1rem;
}
.wn-author-card__inner {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 600px) {
  .wn-author-card__inner { grid-template-columns: 120px 1fr; gap: 1.5rem; }
}
.wn-author-card__photo {
  margin: 0;
  width: 96px; height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-paper, #fff);
  box-shadow: 0 4px 14px rgba(15, 30, 90, .12);
  border: 3px solid var(--c-paper, #fff);
}
.wn-author-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 600px) {
  .wn-author-card__photo { width: 120px; height: 120px; }
}
.wn-author-card__body { min-width: 0; }
.wn-author-card__name {
  font-size: 1.0625rem;
  font-weight: 800;
  margin: 0 0 .35rem;
  line-height: 1.4;
}
.wn-author-card__role {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--c-text-mute, #4A5570);
  margin-left: .25em;
}
.wn-author-card__bio {
  font-size: .9375rem;
  line-height: 1.85;
  margin: 0 0 .85rem;
  color: var(--c-ink, #1B2547);
}
.wn-author-card__creds {
  list-style: none;
  padding: 0;
  margin: 0 0 .85rem;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--c-text-mute, #4A5570);
}
.wn-author-card__creds li { position: relative; padding-left: 1.2em; }
.wn-author-card__creds li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-accent, #FF6F3D);
  font-weight: 800;
}
.wn-author-card__links {
  display: flex; flex-wrap: wrap; gap: .25rem 1.25rem;
  margin: 0;
  font-size: .875rem;
  font-weight: 700;
}
.wn-author-card__link {
  color: var(--c-accent, #FF6F3D);
  text-decoration: none;
}
.wn-author-card__link:hover {
  color: var(--c-accent-deep, #E5552A);
  text-decoration: underline;
}

/* ============================================================================
   Series navigation (連載記事の冒頭) — Tips 47
   ============================================================================
   検索/SNS から特定回に着地した読者に、連載の全体像と現在地を即提示。
   .wn-series-nav__list は番号付き ol で「第N回」を強調する縦リスト。 */
.wn-series-nav {
  margin: 1.5rem 0 2.25rem;
  padding: 1.25rem 1.5rem 1.5rem;
  background: linear-gradient(180deg, rgba(255, 111, 61, .06) 0%, rgba(255, 111, 61, 0) 100%);
  border: 1px solid var(--c-border, #E5E1D6);
  border-left: 4px solid var(--c-accent, #FF6F3D);
  border-radius: var(--r, 8px);
}
.wn-series-nav__eyebrow {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-accent, #FF6F3D);
  margin: 0 0 .25rem;
  display: flex; align-items: baseline; gap: .75em;
}
.wn-series-nav__count {
  font-size: .6875rem;
  color: var(--c-text-mute, #4A5570);
  letter-spacing: .04em;
  text-transform: none;
}
.wn-series-nav__title {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 .85rem;
  color: var(--c-ink, #1B2547);
  letter-spacing: -.005em;
}
.wn-series-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: series;
  display: grid;
  gap: 0;
}
.wn-series-nav__item {
  border-top: 1px dashed var(--c-border, #E5E1D6);
}
.wn-series-nav__item:first-child { border-top: 0; }
.wn-series-nav__item a,
.wn-series-nav__item > span:first-of-type {
  /* fallback for current row span */
}
.wn-series-nav__item a,
.wn-series-nav__item.is-current > .wn-series-nav__num {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .65rem 0;
  text-decoration: none;
  color: var(--c-ink, #1B2547);
  transition: color .18s ease;
}
.wn-series-nav__item a:hover {
  color: var(--c-accent, #FF6F3D);
}
.wn-series-nav__item.is-current {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .65rem 0;
  background: rgba(255, 111, 61, .08);
  margin: 0 -1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.wn-series-nav__num {
  font-size: .8125rem;
  font-weight: 800;
  color: var(--c-accent, #FF6F3D);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.wn-series-nav__ep-title {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.5;
}
.wn-series-nav__here {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--c-accent, #FF6F3D);
  padding: .25rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.wn-series-nav__item:not(.is-current) a:hover .wn-series-nav__num {
  color: var(--c-accent-deep, #E5552A);
}

/* ============================================================================
   Sidebar "DEV RESOURCES" link-box widget (2×3 tile grid)
   ============================================================================
   外部の一次情報（公式環境要件・リリースノート・脆弱性DB・PHP EOL・
   PageSpeed・W3Techs 統計）に 1 タップで飛べるタイル UI。
   読者が記事の裏取りで離脱→他サイト経由で戻らない…という導線喪失を
   防ぐため "信頼の貯金箱" として配置する。タイルは brand 配色の
   濃淡で 2 段階（mist 背景 / accent border-top）にし、widget--cta-study
   等の濃色 widget と差別化する。 */
.widget--linkbox { padding-bottom: 1rem; }
.widget--linkbox__lede {
  font-size: .8125rem;
  color: var(--c-text-mute, #4A5570);
  line-height: 1.55;
  margin: 0 0 .9rem;
}
.linkbox-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.7rem, .75rem + .8vw, 1.0rem) !important;
}
.linkbox-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: .35rem;
  padding: .85rem .35rem .7rem;
  background: var(--c-mist, #F7F5F0);
  border: 1px solid var(--c-border, #E5E1D6);
  border-top: 3px solid var(--c-accent, #FF6F3D);
  border-radius: var(--r, 8px);
  color: var(--c-ink, #1B2547);
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  min-height: 88px;
}
.linkbox-tile:hover,
.linkbox-tile:focus-visible {
  background: var(--c-paper, #fff);
  border-color: var(--c-ink, #1B2547);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 30, 90, .08);
  color: var(--c-ink, #1B2547);
  text-decoration: none;
}
.linkbox-tile__icon {
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--c-border, #E5E1D6);
  color: var(--c-accent, #FF6F3D);
  margin-bottom: .1rem;
  flex-shrink: 0;
}
.linkbox-tile__label {
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  word-break: keep-all;
  text-wrap: balance;
  color: var(--c-ink, #1B2547);
}
.linkbox-tile__sub {
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--c-text-mute, #4A5570);
  letter-spacing: 0;
}
/* PC では sticky な TOC の下にタイルが続き、scroll-spy で TOC active が
   流れているので、Linkbox 自身は sticky にしない（自然な流れに任せる）。 */

/* ============================================================================
   JIN:R simplebox / headbox block residue shim
   ============================================================================
   JIN:R was deactivated but `<!-- wp:jinr-blocks/simplebox -->`,
   `wp:jinr-blocks/headbox` 等の Gutenberg ブロック markup は 30+ 投稿
   (合計 150+ インスタンス) の post_content に残っている。元の JIN:R CSS
   が無いと、これらは無味乾燥な div として崩れ、最悪の場合 9000px 級の
   空の領域を作る。コンテンツ非破壊で navigator theme の wn-callout 風に
   再スタイリングする shim。
   ----------------------------------------------------------------------------
   対象クラス:
     .wp-block-jinr-blocks-simplebox  ← <section> ラッパー
     .wp-block-jinr-blocks-headbox    ← <section> ラッパー（見出し付き）
     .b--jinr-block-container         ← <section>
     .b--jinr-block                   ← <div>
     .b--jinr-box                     ← <div>
     [class*="d--simple-box"]         ← デザインバリアント (d--simple-box1..9)
     [class*="d--heading-box"]        ← デザインバリアント (d--heading-box1..9)
     .c--simple-box-inner             ← <div> 内側
   ============================================================================ */

/* 全 JIN:R ブロックをリセット — 空でなければ wn-callout として表示 */
html .wp-block-jinr-blocks-simplebox,
html .wp-block-jinr-blocks-headbox,
html .b--jinr-block-container {
  display: block;
  margin: 1.75em 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

html .b--jinr-block,
html .b--jinr-box,
html [class*="d--simple-box"],
html [class*="d--heading-box"] {
  position: relative;
  background: var(--c-mist, #F7F5F0);
  border: 1px solid var(--c-border, #E5E1D6);
  border-left: 4px solid var(--c-accent, #FF6F3D);
  border-radius: var(--r, 8px);
  padding: 1.25rem 1.5rem;
  margin: 0;
  color: var(--c-ink, #1B2547);
  box-shadow: none;
  font-size: 1rem;
  line-height: 1.85;
}

html .c--simple-box-inner,
html .b--jinr-block > .b--jinr-box,
html .b--jinr-box > .c--simple-box-inner {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

/* JIN:R headbox の "ラベル/見出し" → 太字キャプション扱い */
html [class*="d--heading-box"]::before,
html .b--jinr-headbox__title {
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-accent, #FF6F3D);
  display: block;
  margin-bottom: .5em;
}

/* JIN:R の見出し要素を打ち消し（多重スタイルがあった場合の予防） */
html .b--jinr-block h1,
html .b--jinr-block h2,
html .b--jinr-block h3,
html .b--jinr-block h4,
html .b--jinr-block h5,
html .b--jinr-block h6 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-ink, #1B2547);
  margin: 0 0 .4em;
}

/* 中身が空の JIN:R ボックスは完全に非表示 — レイアウト崩れの主犯 */
html .wp-block-jinr-blocks-simplebox:has(.c--simple-box-inner:empty),
html .wp-block-jinr-blocks-simplebox:has(p:only-child:empty),
html .b--jinr-block-container:has(.b--jinr-box:empty) {
  display: none;
}

/* paragraph-only / empty-p の中身は ::has() 互換のないブラウザ向けに、
   空 <p> を持つ b--jinr-block も縮める fallback。 */
html .b--jinr-block:empty,
html .b--jinr-box:empty,
html .c--simple-box-inner:empty {
  display: none;
}

/* ===== Sidebar TOC — sticky + scroll-spy =====
   Sticky positioning so the目次 follows the reader down the article.
   Scroll-spy JS (assets/js/app.js #5) already toggles `.is-active` on
   the link matching the currently-visible h2/h3.

   CRITICAL: position:sticky only works within the BLOCK of its scrolling
   ancestor. If the sidebar (.sidebar) is shorter than the article body,
   sticky stops working once the sidebar's natural height is exhausted.
   The .layout--with-sidebar grid uses the article column's height as the
   row height, but .sidebar (grid item) doesn't auto-stretch its content.
   Fix: stretch .sidebar to fill the grid row, AND make TOC sticky.

   PC only — mobile drops sidebar below article so sticky is irrelevant. */
@media (min-width: 1000px) {
  /* Stretch sidebar to fill the full grid row height (= article column).
     Without this, sticky has nowhere to stick after the sidebar's content
     runs out. We additionally pack the inner grid rows at the TOP with
     align-content:start, and force grid-auto-rows:max-content so individual
     widgets keep their natural heights instead of stretching to fill the
     enormous row tracks the grid would otherwise create. */
  html .layout--with-sidebar > .sidebar {
    align-self: stretch;
    height: auto;
    grid-auto-rows: max-content;   /* widgets keep natural sizes */
    align-content: start;          /* pack rows at top of stretched sidebar */
  }
  html .widget--toc {
    position: sticky;
    top: calc(var(--header-h, 64px) + 1rem);
    max-height: calc(100vh - var(--header-h, 64px) - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--c-mist-2, #E5E1D6) transparent;
    /* The widget must be a direct grid item of .sidebar AND .sidebar must
       be stretched. align-self:start prevents the widget from inheriting
       row stretch which would defeat sticky behavior. */
    align-self: start;
  }
  html .widget--toc::-webkit-scrollbar { width: 6px; }
  html .widget--toc::-webkit-scrollbar-thumb {
    background: var(--c-mist-2, #E5E1D6);
    border-radius: 3px;
  }
}
/* Active-link emphasis — already wired by JS toggling .is-active.
   Make it visually pop with accent color + left bar so the user always
   knows "where am I in this article". */
html .toc__link.is-active,
html .toc__item--h2 > .toc__link.is-active,
html .toc__item--h3 > .toc__link.is-active {
  color: var(--c-accent, #FF6F3D) !important;
  font-weight: 800;
}
html .toc__item--h2.is-active-item,
html .toc__item--h3.is-active-item {
  position: relative;
}
/* Provide a subtle accent bar to mark the active item even when the
   counter pseudo-element occupies the left margin. */
html .toc__link.is-active::before {
  color: var(--c-accent, #FF6F3D) !important;
}

/* Smooth scroll for anchor clicks (header-aware offset via CSS) */
html { scroll-padding-top: calc(var(--header-h, 64px) + 1rem); }

/* ===== Sidebar "study" CTA button — invisible-on-same-color fix =====
   .widget--cta-study has bg = var(--c-ink) (navy). The default
   .btn--primary ALSO has bg = var(--c-ink), so the button shape
   disappears into the widget. Override to accent orange so the button
   reads as a distinct CTA against the dark widget. */
html .widget--cta-study .btn--primary {
    background: var(--c-accent, #FF6F3D) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 18px rgba(255, 111, 61, .35);
}
html .widget--cta-study .btn--primary:hover {
    background: var(--c-accent-deep, #E5552A) !important;
    color: #fff !important;
}
html .widget--cta-study .widget__sub-link {
    color: rgba(255, 255, 255, .85) !important;
}
html .widget--cta-study .widget__sub-link:hover {
    color: #fff !important;
}

/* ===== <pre class="wp-block-preformatted"> used for PROSE (not code) =====
   Some legacy posts wrapped the entire article body in a Preformatted block
   (Gutenberg's <pre>). The theme correctly styles real code blocks as dark
   background + pale-blue text, but applied to prose it makes the body
   unreadable and overflowing. We re-style `.wp-block-preformatted` so it
   renders as normal prose (white-space: pre-wrap preserves line breaks
   without horizontal scroll). Real code uses `.wp-block-code` / `<code>`
   which keeps the dark style. */
html .post-single__content .wp-block-preformatted,
html .page-default__content .wp-block-preformatted {
    background: transparent !important;
    color: var(--c-ink, #1B2547) !important;
    padding: 0 !important;
    border-radius: 0;
    white-space: pre-wrap;
    overflow-x: visible;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.85;
    margin: 1.25em 0;
}

/* ============================================================================
   50.5  ROOT overflow guard — prevent off-screen drawers / fixed
   elements (e.g. .mobile-drawer at transform:translateX(100vw))
   from contributing to document scrollWidth.

   - overflow-x: clip ではスクロール起点にならず、子の position:fixed が
     その内側で動ける（hidden は scroll コンテナを作るので不可）。
   - body 側にも保険として同じ設定。
   ============================================================================ */
html, body {
	overflow-x: clip;
}

/* ============================================================================
   51. Mobile header right-edge alignment
   ----------------------------------------------------------------------------
   従来の grid (auto 1fr auto) は PC でナビが入る前提のため、ナビが
   display:none になるモバイルでは中央 1fr が 0px に潰れ、actions
   側の auto トラックが内容より余分に伸びて 33px の死空きを生じる。

   モバイルでは grid を (1fr auto) に簡素化して actions を右端に
   ピン留めする。さらに safe-area-inset を尊重しつつ padding を
   詰めて、ハンバーガーと「相談する」ボタンの右端が画面右端と
   ほぼ揃うようにする。
   ============================================================================ */
@media (max-width: 1023.98px) {

	.site-header__inner {
		grid-template-columns: 1fr auto;
		padding-inline:
			max(12px, env(safe-area-inset-left))
			max(12px, env(safe-area-inset-right));
		gap: 12px;
	}

	/* nav-primary はモバイルで display:none だが grid トラックを
	   占有しないように grid からも外す */
	.nav-primary {
		display: none !important;
		grid-column: auto;
	}

	.site-header__actions {
		justify-self: end;          /* grid セル内で右端に張り付ける */
		justify-content: flex-end;  /* 子要素も右詰め */
		gap: 8px;
		margin-inline-start: auto;
	}

	/* search トグルはモバイルで非表示のままだが、display:none で
	   grid/flex の auto-track 計算から完全に外す */
	.site-header__search-toggle {
		display: none !important;
	}

	/* 「相談する」ボタンを再表示。スペース効率のため左右パディング
	   を僅かに詰める */
	.site-header__cta {
		display: inline-flex !important;
		padding: .5rem .8rem;
		min-height: 40px;
		font-size: .875rem;
	}
	.site-header__cta-text { white-space: nowrap; }

	/* ハンバーガー は元から 44×44 円形。size はそのまま */
	.nav-toggle {
		flex: 0 0 auto;
	}
}

/* 360px 以下の狭小端末では「相談する」を文字小さめに */
@media (max-width: 360px) {
	.site-header__cta {
		padding: .45rem .65rem;
		font-size: .8125rem;
	}
}

/* ============================================================================
   51.acc. Accessibility & Hierarchy (2026-05-21 refinement pass)
   ----------------------------------------------------------------------------
   - focus-visible: キーボード操作時の輪郭明示 (Tab で見える)
   - 本文 line-height 強化 (日本語可読性)
   - リンクのコントラスト保証
   ============================================================================ */
.wn-pillar-card a:focus-visible,
.wn-legal-card:focus-visible,
.wn-sitemap-list a:focus-visible,
.wn-sitemap-toc a:focus-visible {
	outline: 3px solid var(--c-accent, #F26B22);
	outline-offset: 3px;
	border-radius: 4px;
}
.wn-legal-card p,
.wn-sitemap-section p {
	line-height: 1.8;
}

/* ============================================================================
   51.toc. Sticky TOC for troubleshooting-guide (desktop only)
   ============================================================================ */
.wn-pillar-toc {
	display: none;
}
@media (min-width: 1100px) {
	body.page-id-13907 .layout__main--full {
		position: relative;
	}
	.wn-pillar-toc {
		display: block;
		position: sticky;
		top: 88px;
		float: right;
		margin: 0 0 1.5rem 2rem;
		width: 240px;
		/* すりガラス: 半透明白 + 後方ぼかし + 微細な内側ハイライト */
		background: rgba(255, 255, 255, .55);
		-webkit-backdrop-filter: blur(18px) saturate(180%);
		backdrop-filter: blur(18px) saturate(180%);
		border: 1px solid rgba(255, 255, 255, .55);
		border-radius: 14px;
		padding: 1rem 1.1rem 1.1rem;
		font-size: .85rem;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		z-index: 5;
		box-shadow:
			0 1px 0 rgba(255, 255, 255, .9) inset,         /* 上辺ハイライト */
			0 -1px 0 rgba(255, 255, 255, .35) inset,        /* 下辺の柔らかい光 */
			0 10px 30px rgba(27, 37, 71, .08),              /* 浮遊感の影 */
			0 2px 6px rgba(27, 37, 71, .04);
	}
	/* backdrop-filter 非対応ブラウザ向けフォールバック */
	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.wn-pillar-toc {
			background: rgba(255, 255, 255, .92);
		}
	}
	.wn-pillar-toc__title {
		font-size: .7rem;
		font-weight: 800;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--c-accent, #F26B22);
		margin: 0 0 .6rem;
		padding-bottom: .4rem;
		border-bottom: 1px solid var(--c-border, #E5E1D6);
	}
	.wn-pillar-toc__list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: .25rem;
	}
	.wn-pillar-toc__list li::before { content: none !important; }
	/* グローバル .prose a:not(.btn):not(.wn-btn):not([class*="card"]) の color/transition を
	   完全に上書き。color の transition が CSSTransition の停止状態で描画バグを引き起こす
	   ため、transition から color を明示的に除外して bg/transform のみ補間する */
	aside.wn-pillar-toc .wn-pillar-toc__list a,
	.wn-pillar-toc .wn-pillar-toc__list a {
		display: block;
		padding: .35rem .55rem;
		color: #1B2547 !important;
		text-decoration: none !important;
		border-radius: 6px;
		line-height: 1.45;
		font-weight: 600;
		letter-spacing: .005em;
		transition-property: background-color, transform !important;
		transition-duration: .15s !important;
		transition-timing-function: ease !important;
	}
	aside.wn-pillar-toc .wn-pillar-toc__list a:hover,
	.wn-pillar-toc .wn-pillar-toc__list a:hover {
		background: rgba(242, 107, 34, .12);
		color: #C24A00 !important;
	}
	html[data-theme="dark"] .wn-pillar-toc {
		/* glass を少し濃くして背景ノイズを抑制 → 文字のコントラスト確保 */
		background: rgba(15, 20, 36, .72);
		-webkit-backdrop-filter: blur(22px) saturate(160%);
		backdrop-filter: blur(22px) saturate(160%);
		border-color: rgba(255, 255, 255, .18);
		box-shadow:
			0 1px 0 rgba(255, 255, 255, .14) inset,
			0 -1px 0 rgba(255, 255, 255, .04) inset,
			0 10px 30px rgba(0, 0, 0, .45),
			0 2px 8px rgba(0, 0, 0, .28);
	}
	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		html[data-theme="dark"] .wn-pillar-toc {
			background: rgba(22, 28, 48, .96);
		}
	}
	/* ダーク時のリンク: 純白 #fff (コントラスト比 ≧ 12:1) + text-shadow で
	   glass を透過して見える背景に対しても可読性を維持。
	   別の !important ルール (.prose a:not(...) など) を確実に上回るため、
	   aside.wn-pillar-toc を明示してチェーン specificity を最大化 */
	html[data-theme="dark"] aside.wn-pillar-toc .wn-pillar-toc__list a,
	html[data-theme="dark"] .wn-pillar-toc .wn-pillar-toc__list a {
		color: #FFFFFF !important;
		text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 1px rgba(0, 0, 0, .4);
		font-weight: 700;
	}
	html[data-theme="dark"] aside.wn-pillar-toc .wn-pillar-toc__list a:hover,
	html[data-theme="dark"] .wn-pillar-toc .wn-pillar-toc__list a:hover {
		background: rgba(255, 176, 112, .22);
		color: #FFD9B5 !important; /* 高明度アクセント — 黒背景比 11.6:1 */
		text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
	}
	/* prefers-color-scheme: dark の場合も同じ処理を確実に適用 */
	@media (prefers-color-scheme: dark) {
		html:not([data-theme="light"]) aside.wn-pillar-toc .wn-pillar-toc__list a,
		html:not([data-theme="light"]) .wn-pillar-toc .wn-pillar-toc__list a {
			color: #FFFFFF !important;
			text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 1px rgba(0, 0, 0, .4);
			font-weight: 700;
		}
		html:not([data-theme="light"]) aside.wn-pillar-toc .wn-pillar-toc__list a:hover,
		html:not([data-theme="light"]) .wn-pillar-toc .wn-pillar-toc__list a:hover {
			background: rgba(255, 176, 112, .22);
			color: #FFD9B5 !important;
			text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
		}
		html:not([data-theme="light"]) .wn-pillar-toc .wn-pillar-toc__title {
			color: #FFB070 !important;
			text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
			border-bottom-color: rgba(255, 255, 255, .15);
		}
	}
	/* ダーク時のタイトル "目次" — 別の !important ルール (--c-ink 系の global blanket)
	   を確実に上回るため明示的に !important + specificity 強化 */
	html[data-theme="dark"] .wn-pillar-toc .wn-pillar-toc__title {
		color: #FFB070 !important;
		text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
		border-bottom-color: rgba(255, 255, 255, .15);
	}
}

/* ============================================================================
   51.sec. Pillar section color theming (troubleshooting-guide)
   ----------------------------------------------------------------------------
   各セクションを <section class="wn-pillar-section" data-section="..."> でラップし、
   カードの hover ホバー時グロー色をセクションテーマに合わせる。
   ============================================================================ */
.wn-pillar-section[data-section="emergency"] .wn-pillar-card a:hover { box-shadow: 0 10px 26px rgba(216, 33, 27, .22), 0 2px 6px rgba(0,0,0,.06); border-color: #D8211B; }
.wn-pillar-section[data-section="cause"]     .wn-pillar-card a:hover { box-shadow: 0 10px 26px rgba(128, 136, 160, .25), 0 2px 6px rgba(0,0,0,.06); border-color: #5A6580; }
.wn-pillar-section[data-section="series"]    .wn-pillar-card a:hover { box-shadow: 0 10px 26px rgba(122, 184, 232, .25), 0 2px 6px rgba(0,0,0,.06); border-color: #4A8AC8; }
.wn-pillar-section[data-section="tools"]     .wn-pillar-card a:hover { box-shadow: 0 10px 26px rgba(255, 169, 77, .25), 0 2px 6px rgba(0,0,0,.06); border-color: #C88A30; }
.wn-pillar-section[data-section="ui"]        .wn-pillar-card a:hover { box-shadow: 0 10px 26px rgba(138, 130, 182, .28), 0 2px 6px rgba(0,0,0,.06); border-color: #5A6BA0; }
.wn-pillar-section[data-section="ops"]       .wn-pillar-card a:hover { box-shadow: 0 10px 26px rgba(42, 143, 69, .25), 0 2px 6px rgba(0,0,0,.06); border-color: #2A8F45; }
/* 各セクションの H2 に左色帯 */
.wn-pillar-section > h2 { padding-left: 1rem; border-left: 6px solid var(--c-accent, #F26B22); }
.wn-pillar-section[data-section="emergency"] > h2 { border-left-color: #D8211B; }
.wn-pillar-section[data-section="cause"]     > h2 { border-left-color: #5A6580; }
.wn-pillar-section[data-section="series"]    > h2 { border-left-color: #4A8AC8; }
.wn-pillar-section[data-section="tools"]     > h2 { border-left-color: #C88A30; }
.wn-pillar-section[data-section="ui"]        > h2 { border-left-color: #5A6BA0; }
.wn-pillar-section[data-section="ops"]       > h2 { border-left-color: #2A8F45; }
.wn-pillar-section[data-section="decision"]  > h2 { border-left-color: #F26B22; }

/* ============================================================================
   51.y. Legal hub cards (/legal/) — 3 文書を 3 列カード表示
   ============================================================================ */
.wn-legal-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 1.25rem 0 2rem;
}
@media (min-width: 700px) { .wn-legal-cards { grid-template-columns: 1fr 1fr 1fr; } }
.wn-legal-card {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.25rem 1.3rem 1.1rem;
	background: var(--c-paper, #fff);
	border: 1px solid var(--c-border, #E5E1D6);
	border-top: 3px solid var(--c-accent, #F26B22);
	border-radius: 10px;
	text-decoration: none !important;
	color: var(--c-ink, #1B2547);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* ドキュメント別 上部アクセントカラー (色だけでなくアイコンでも識別可能) */
.wn-legal-card[data-doc="terms"]    { border-top-color: #C88A30; }
.wn-legal-card[data-doc="tokushou"] { border-top-color: #3A6BA0; }
.wn-legal-card[data-doc="privacy"]  { border-top-color: #3A8F45; }
/* アイコン */
.wn-legal-card__icon {
	display: inline-flex;
	margin: 0 0 .35rem;
}
.wn-legal-card__icon svg { display: block; }
/* メタ (最終更新日) */
.wn-legal-card__meta {
	font-size: .72rem;
	color: var(--c-text-mute, #5a6273);
	margin-top: auto;
	padding-top: .5rem;
	border-top: 1px dashed var(--c-border, #E5E1D6);
	letter-spacing: .04em;
}
html[data-theme="dark"] .wn-legal-card__meta {
	color: rgba(255,255,255,.55);
	border-top-color: rgba(255,255,255,.12);
}
.wn-legal-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
	border-color: var(--c-accent-deep, #C24A00);
}
.wn-legal-card h3 {
	font-size: 1.05rem; font-weight: 800; margin: 0 0 .25rem;
	color: var(--c-ink, #1B2547);
}
.wn-legal-card p {
	font-size: .9rem; line-height: 1.7; color: var(--c-text-mute, #5a6273); margin: 0;
	flex: 1;
}
.wn-legal-card__cta {
	font-size: .85rem; font-weight: 700; color: var(--c-accent, #F26B22);
	margin-top: .5rem;
}
html[data-theme="dark"] .wn-legal-card {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .12);
	border-top-color: var(--c-accent, #F26B22);
}
html[data-theme="dark"] .wn-legal-card h3 { color: #fff; }
html[data-theme="dark"] .wn-legal-card p { color: rgba(255, 255, 255, .68); }

/* ============================================================================
   51.z. Sitemap (/sitemap/) — v3 構造再設計 (指南書 7 軸対応 2026-05-21)
   ----------------------------------------------------------------------------
   構造:
   .wn-sitemap (vertical stack)
     ├ .wn-sitemap-stats (4 stat tiles, 統計バナー)
     ├ .wn-sitemap-grid (2×2 grid: services/content/categories/ops)
     └ .wn-sitemap-section--full (recent: 2 列リスト)
   ============================================================================ */
.wn-sitemap {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	margin: 1.5rem 0;
}

/* --- 統計バナー (Tip 1: 数字で説得) -------------------------------- */
.wn-sitemap-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .75rem;
	padding: 1.1rem;
	background: linear-gradient(135deg, rgba(242, 107, 34, .06), rgba(58, 107, 160, .05));
	border: 1px solid var(--c-border, #E5E1D6);
	border-radius: 12px;
}
@media (min-width: 700px) { .wn-sitemap-stats { grid-template-columns: repeat(4, 1fr); } }
.wn-sitemap-stat {
	display: flex; flex-direction: column; align-items: center;
	padding: .5rem .25rem;
	text-align: center;
}
.wn-sitemap-stat__num {
	font-size: 2rem; font-weight: 800; line-height: 1.1;
	color: var(--c-accent-deep, #C24A00);
	font-feature-settings: "tnum";
	letter-spacing: -.02em;
}
.wn-sitemap-stat__lbl {
	font-size: .75rem; color: var(--c-text-mute, #5a6273);
	margin-top: .15rem; letter-spacing: .04em;
}
html[data-theme="dark"] .wn-sitemap-stats {
	background: linear-gradient(135deg, rgba(242, 107, 34, .10), rgba(74, 138, 200, .08));
	border-color: rgba(255, 255, 255, .12);
}
html[data-theme="dark"] .wn-sitemap-stat__num { color: #FFB070; }
html[data-theme="dark"] .wn-sitemap-stat__lbl { color: rgba(255, 255, 255, .65); }

/* --- 3 大エントリー (Hero 約束「症状/カテゴリ/新着」と整合) --------------- */
.wn-sitemap-entries {
	background: var(--c-paper, #fff);
	border: 1px solid var(--c-border, #E5E1D6);
	border-radius: 12px;
	padding: 1.4rem 1.4rem 1.5rem;
}
.wn-sitemap-entries__lead {
	font-size: .92rem;
	color: var(--c-text-mute, #5a6273);
	margin: 0 0 1rem;
	text-align: center;
	letter-spacing: .02em;
}
.wn-sitemap-entries__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 720px) { .wn-sitemap-entries__grid { grid-template-columns: repeat(3, 1fr); } }
.wn-sitemap-entry {
	position: relative;
	display: flex; flex-direction: column;
	gap: .4rem;
	padding: 1.4rem 1.25rem 1.25rem;
	background: linear-gradient(180deg, rgba(255,255,255,1), rgba(245,245,250,.7));
	border: 2px solid var(--c-border, #E5E1D6);
	border-radius: 12px;
	text-decoration: none !important;
	color: var(--c-ink, #1B2547);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	overflow: hidden;
}
.wn-sitemap-entry::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(216, 33, 27, .04), transparent 60%);
	opacity: 0;
	transition: opacity .18s ease;
	pointer-events: none;
}
.wn-sitemap-entry[data-entry="symptom"]  { border-top: 4px solid #D8211B; }
.wn-sitemap-entry[data-entry="category"] { border-top: 4px solid #2A8F45; }
.wn-sitemap-entry[data-entry="recent"]   { border-top: 4px solid #C88A30; }
.wn-sitemap-entry[data-entry="symptom"]::before  { background: linear-gradient(135deg, rgba(216, 33, 27, .07), transparent 60%); }
.wn-sitemap-entry[data-entry="category"]::before { background: linear-gradient(135deg, rgba(42, 143, 69, .07), transparent 60%); }
.wn-sitemap-entry[data-entry="recent"]::before   { background: linear-gradient(135deg, rgba(200, 138, 48, .08), transparent 60%); }
.wn-sitemap-entry:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .09), 0 2px 6px rgba(0, 0, 0, .04);
	border-color: var(--c-accent, #F26B22);
}
.wn-sitemap-entry:hover::before { opacity: 1; }
.wn-sitemap-entry__icon {
	display: inline-flex;
	margin-bottom: .35rem;
}
.wn-sitemap-entry__icon svg { display: block; }
.wn-sitemap-entry__num {
	position: absolute;
	top: 12px; right: 14px;
	font-size: 2.4rem;
	font-weight: 900;
	color: rgba(0, 0, 0, .06);
	font-feature-settings: "tnum";
	line-height: 1;
	letter-spacing: -.04em;
	user-select: none;
}
.wn-sitemap-entry__title {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--c-ink, #1B2547);
	margin: 0;
	line-height: 1.35;
	letter-spacing: -.005em;
}
.wn-sitemap-entry__desc {
	font-size: .82rem;
	color: var(--c-text-mute, #5a6273);
	margin: 0 0 .6rem;
	line-height: 1.6;
	flex: 1 1 auto;
}
.wn-sitemap-entry__cta {
	display: inline-flex;
	align-self: flex-start;
	color: var(--c-accent-deep, #C24A00);
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .01em;
	margin-top: auto;
	padding-top: .4rem;
	border-top: 1px dashed var(--c-border, #E5E1D6);
	width: 100%;
}
html[data-theme="dark"] .wn-sitemap-entries {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .12);
}
html[data-theme="dark"] .wn-sitemap-entries__lead { color: rgba(255, 255, 255, .65); }
html[data-theme="dark"] .wn-sitemap-entry {
	background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
	border-color: rgba(255, 255, 255, .12);
	color: #fff;
}
html[data-theme="dark"] .wn-sitemap-entry__title { color: #fff; }
html[data-theme="dark"] .wn-sitemap-entry__desc { color: rgba(255, 255, 255, .68); }
html[data-theme="dark"] .wn-sitemap-entry__num { color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .wn-sitemap-entry__cta {
	color: #FFB070;
	border-top-color: rgba(255, 255, 255, .12);
}

/* スムーススクロール (3 大エントリーのアンカークリック対応) */
html { scroll-behavior: smooth; }
#wn-sitemap-categories,
#wn-sitemap-recent { scroll-margin-top: 88px; }

/* --- 2×2 グリッド (services/content/categories/ops) ---------------- */
.wn-sitemap-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
@media (min-width: 720px) { .wn-sitemap-grid { grid-template-columns: 1fr 1fr; } }

.wn-sitemap-section {
	display: flex;
	flex-direction: column;
	background: var(--c-paper, #fff);
	border: 1px solid var(--c-border, #E5E1D6);
	border-left: 4px solid var(--c-accent, #F26B22);
	border-radius: 10px;
	padding: 1.1rem 1.25rem 1.1rem;
	position: relative;
}
/* セクション別 左帯カラー (色覚多様性配慮: 形=4px ストライプで識別可) */
.wn-sitemap-section[data-cat="services"]   { border-left-color: #D8211B; }
.wn-sitemap-section[data-cat="content"]    { border-left-color: #4A8AC8; }
.wn-sitemap-section[data-cat="categories"] { border-left-color: #2A8F45; }
.wn-sitemap-section[data-cat="recent"]     { border-left-color: #C88A30; }
.wn-sitemap-section[data-cat="ops"]        { border-left-color: #5A6580; }

.wn-sitemap-section__title {
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: .01em;
	color: var(--c-ink, #1B2547);
	margin: 0 0 .25rem;
	padding-bottom: 0;
	border-bottom: 0;
	line-height: 1.4;
}
.wn-sitemap-section__desc {
	font-size: .8rem;
	color: var(--c-text-mute, #5a6273);
	margin: 0 0 .85rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--c-border, #E5E1D6);
	line-height: 1.55;
}
html[data-theme="dark"] .wn-sitemap-section__title { color: #fff; }
html[data-theme="dark"] .wn-sitemap-section__desc { color: rgba(255,255,255,.65); border-bottom-color: rgba(255,255,255,.12); }

.wn-sitemap-list {
	list-style: none; padding: 0; margin: 0 0 .8rem;
	display: flex; flex-direction: column; gap: .15rem;
	flex: 1 1 auto; /* CTA を底に固定 */
}
.wn-sitemap-list li { list-style: none; margin: 0; padding: 0; }
.wn-sitemap-list li::before { content: none !important; }
.wn-sitemap-list a {
	display: block;
	padding: .35rem 0;
	font-size: .9rem; line-height: 1.5;
	color: var(--c-ink, #1B2547);
	text-decoration: none;
	transition: color .15s ease, padding-left .15s ease;
}
.wn-sitemap-list a:hover {
	color: var(--c-accent, #F26B22);
	padding-left: .25rem;
}
.wn-sitemap-list time {
	font-size: .72rem; color: var(--c-text-mute, #5a6273); margin-left: .5em;
}
.wn-sitemap-count {
	display: inline-block; margin-left: .4em;
	font-size: .72rem; color: var(--c-text-mute, #5a6273); font-weight: 400;
}
.wn-sitemap-list--cats a { display: inline-flex; align-items: center; gap: .4em; }

/* --- セクション末 CTA (Tip 8 + Tip 20: 次アクション明示) -------------- */
.wn-sitemap-section__cta {
	display: inline-flex;
	align-items: center;
	margin-top: auto;
	padding: .55rem .9rem;
	background: rgba(242, 107, 34, .08);
	color: var(--c-accent-deep, #C24A00) !important;
	font-size: .82rem;
	font-weight: 700;
	text-decoration: none !important;
	border-radius: 8px;
	border: 1px solid rgba(242, 107, 34, .25);
	transition: background .15s ease, border-color .15s ease, transform .15s ease;
	align-self: flex-start;
	line-height: 1.4;
}
.wn-sitemap-section__cta:hover {
	background: rgba(242, 107, 34, .15);
	border-color: var(--c-accent, #F26B22);
	transform: translateX(2px);
}
.wn-sitemap-section__cta--lg {
	padding: .75rem 1.4rem;
	font-size: .9rem;
	align-self: center;
	margin-top: 1.2rem;
}
html[data-theme="dark"] .wn-sitemap-section__cta {
	background: rgba(242, 107, 34, .15);
	color: #FFB070 !important;
	border-color: rgba(242, 107, 34, .35);
}
html[data-theme="dark"] .wn-sitemap-section__cta:hover {
	background: rgba(242, 107, 34, .25);
	border-color: #FFB070;
}

/* --- フル幅セクション (recent) ------------------------------------- */
.wn-sitemap-section--full {
	background: var(--c-paper, #fff);
	border: 1px solid var(--c-border, #E5E1D6);
	border-left: 4px solid var(--c-accent, #F26B22);
	border-radius: 10px;
	padding: 1.25rem 1.4rem 1.5rem;
	display: flex;
	flex-direction: column;
}
/* 最新記事リスト: 2 列グリッド (>= 720px) */
.wn-sitemap-list--posts {
	display: grid;
	grid-template-columns: 1fr;
	gap: .3rem 1.5rem;
	margin-bottom: 0;
}
@media (min-width: 720px) { .wn-sitemap-list--posts { grid-template-columns: 1fr 1fr; } }
.wn-sitemap-list--posts li {
	border-bottom: 1px dashed var(--c-border, #E5E1D6);
}
.wn-sitemap-list--posts li:last-child { border-bottom: 0; }
.wn-sitemap-list--posts a {
	display: flex; flex-direction: column;
	gap: .15rem;
	padding: .5rem 0;
}
.wn-sitemap-post__title {
	font-size: .9rem; line-height: 1.45; font-weight: 500;
}
.wn-sitemap-list--posts time {
	font-size: .7rem; margin-left: 0;
	color: var(--c-text-mute, #5a6273);
	letter-spacing: .03em;
}
html[data-theme="dark"] .wn-sitemap-section--full {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .12);
}
html[data-theme="dark"] .wn-sitemap-list--posts li {
	border-bottom-color: rgba(255, 255, 255, .12);
}

/* 全リスト共通: prose ul li::before のオレンジマーカーを打ち消し */
.prose .wn-sitemap-list > li::before { content: none !important; }
.prose ul.wn-sitemap-list { padding-left: 0 !important; }
.prose .wn-sitemap-list > li { padding-left: 0 !important; }

html[data-theme="dark"] .wn-sitemap-section {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .12);
}
html[data-theme="dark"] .wn-sitemap-list a { color: #fff; }
html[data-theme="dark"] .wn-sitemap-list a:hover { color: var(--c-accent, #F26B22); }

/* ============================================================================
   51.x. Pillar page wide layout (troubleshooting-guide のみ広く)
   ----------------------------------------------------------------------------
   既定 .layout__main--full: clamp(720px, 56vw + 200px, 920px) → 920px 最大。
   ピラーページは 3 列カードグリッドが詰まるので、約 +200px 拡張。
   page-id-13907 = /troubleshooting-guide/ にのみ適用。
   ============================================================================ */
body.page-id-13907 .layout__main--full {
	max-width: clamp(840px, 64vw + 260px, 1120px);
}

/* ============================================================================
   52. Pillar page (troubleshooting-guide) — Modern card redesign (2026-05-21)
   ----------------------------------------------------------------------------
   - 4px 左アクセントストライプ (オレンジグラデ) → ホバーで太く
   - 右端に常時 chevron 矢印 → ホバーで右スライド + 濃色化
   - 背景に微細なグラデで深み
   - ホバー: lift + 影 + ボーダー強調
   ============================================================================ */
.wn-pillar-list {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 2.25rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: .85rem;
}
/* main.css の .prose ul li::before (オレンジ円マーカー) を打ち消す。
   .wn-pillar-card 自体は左ストライプ ::before を持つので、それも保護する */
.prose ul.wn-pillar-list,
.prose .wn-pillar-list {
	padding-left: 0 !important;
}
.prose .wn-pillar-list > li.wn-pillar-card,
.prose .wn-pillar-list > .wn-pillar-card {
	padding-left: 0 !important;
}
.prose .wn-pillar-list > li.wn-pillar-card::before,
.prose .wn-pillar-list > .wn-pillar-card::before {
	content: none !important;
	display: none !important;
	background: none !important;
}
@media (min-width: 600px) {
	.wn-pillar-list { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
@media (min-width: 1024px) {
	.wn-pillar-list { grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
}
.wn-pillar-card {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}
.wn-pillar-card a {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	background: linear-gradient(135deg, var(--c-paper, #fff) 0%, var(--c-mist, #F7F5F0) 100%);
	border: 1px solid var(--c-border, #E5E1D6);
	border-radius: 12px;
	color: var(--c-ink, #1B2547);
	text-decoration: none !important;
	transition:
		transform .22s cubic-bezier(.22, .61, .36, 1),
		box-shadow .22s ease,
		border-color .22s ease;
	position: relative;
	height: 100%;
	overflow: hidden;
}
/* アイキャッチ画像 (上部フルブリード) */
.wn-pillar-card__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--c-mist, #F7F5F0);
	margin: 0;
}
/* フォールバック画像 (困り顔キャラ) はポートレート画像なので、cover で
   上部 (顔・上半身) を見せる切り方 + クリーム背景で「困っている」雰囲気 */
.wn-pillar-card__thumb--fallback {
	object-fit: cover;
	object-position: center 20%;
	background: linear-gradient(135deg, #FFF0DC 0%, #FFD9B8 100%);
}
html[data-theme="dark"] .wn-pillar-card__thumb--fallback {
	background: linear-gradient(135deg, rgba(255, 169, 77, .22) 0%, rgba(242, 107, 34, .1) 100%);
}
/* テキストブロック (padding を担当) */
.wn-pillar-card__body {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: 1rem 2.4rem 1rem 1.2rem;
	flex: 1;
}
/* タイトル: マーカー highlight 解除 + 下線解除 */
.wn-pillar-card strong,
.wn-pillar-card a strong {
	background: none !important;
	background-image: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}
/* 左アクセントストライプは撤去 (2026-05-21 ユーザー指示) */
.wn-pillar-card a::before { content: none; }
/* 右 chevron 矢印 */
.wn-pillar-card a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1.1rem;
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--c-accent, #F26B22);
	border-right: 2px solid var(--c-accent, #F26B22);
	transform: translateY(-50%) rotate(45deg);
	transition: right .22s ease, border-color .22s ease;
	opacity: .65;
}
.wn-pillar-card a:hover,
.wn-pillar-card a:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(242, 107, 34, .15), 0 2px 6px rgba(0, 0, 0, .06);
	border-color: var(--c-accent, #F26B22);
	outline: none;
}
.wn-pillar-card a:hover::before,
.wn-pillar-card a:focus-visible::before {
	width: 6px;
}
.wn-pillar-card a:hover::after,
.wn-pillar-card a:focus-visible::after {
	right: .65rem;
	opacity: 1;
	border-color: var(--c-accent-deep, #C24A00);
}
.wn-pillar-card strong {
	font-size: 1.02rem;
	line-height: 1.45;
	letter-spacing: .01em;
	color: var(--c-ink, #1B2547);
	font-weight: 800;
	display: block;
}
.wn-pillar-card__sub {
	font-size: .82rem;
	line-height: 1.6;
	color: var(--c-text-mute, #5a6273);
	font-weight: 400;
	display: block;
}
/* ダークモード */
html[data-theme="dark"] .wn-pillar-card a {
	background: linear-gradient(135deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, .02) 100%);
	border-color: rgba(255, 255, 255, .12);
}
html[data-theme="dark"] .wn-pillar-card a:hover,
html[data-theme="dark"] .wn-pillar-card a:focus-visible {
	background: linear-gradient(135deg, rgba(242, 107, 34, .14) 0%, rgba(242, 107, 34, .03) 100%);
	border-color: var(--c-accent, #F26B22);
	box-shadow: 0 10px 26px rgba(242, 107, 34, .25), 0 2px 6px rgba(0, 0, 0, .25);
}
html[data-theme="dark"] .wn-pillar-card strong {
	color: #fff;
}
html[data-theme="dark"] .wn-pillar-card__sub {
	color: rgba(255, 255, 255, .68);
}
/* 320px 適応 */
@media (max-width: 359px) {
	.wn-pillar-card a { padding: .9rem 2.1rem .9rem 1rem; }
	.wn-pillar-card strong { font-size: .96rem; }
	.wn-pillar-card__sub { font-size: .78rem; }
}

/* ============================================================================
   53. View Transitions API — cross-document page navigation
   ---------------------------------------------------------------------------
   Chrome 126+ / Safari 18+ で動作。記事間遷移をネイティブにフェード化。
   未対応ブラウザは通常の遷移（無害な progressive enhancement）。

   View Transitions の "cross-document" モードは @view-transition で有効化
   する。SPA を作らず通常の MPA リンク遷移のまま、ブラウザ側がスナップショット
   を撮って補間してくれる。
   ============================================================================ */
@view-transition {
	navigation: auto;
}

/* デフォルト遷移：全体フェード（180ms） */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: .18s;
	animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* prefers-reduced-motion 対応：アニメ無効化 */
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
}

/* 個別の名前付きトランジション例：ヘッダーロゴ・ヒーロー画像など
   同名要素をページ間でモーフィングさせたい場合に使う。
   現状は全体フェードのみ採用。必要に応じて拡張。 */
.site-header__brand {
	view-transition-name: brand;
}
.post-thumb img,
.entry-thumb {
	view-transition-name: var(--vt-thumb, none);
}

/* ============================================================================
   54.1  Dark Mode — light-dark() + manual toggle + OS auto-detect
   ---------------------------------------------------------------------------
   - <html data-theme="dark">      → ダーク強制
   - <html data-theme="light">     → ライト強制
   - data-theme 未指定 + OS dark   → ダーク自動
   - data-theme 未指定 + OS light  → ライト（既定）
   ============================================================================ */

/* color-scheme で OS のスクロールバー・フォーム配色も追従 */
:root { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) { color-scheme: dark; }
}

/* ダーク色の上書き定義（共通） */
html[data-theme="dark"],
html[data-theme="dark"] :root {
	--c-paper:       #0F1626;
	--c-mist:        #1A2238;
	--c-mist-2:      #243149;
	--c-mist-yellow: #2A2515;
	--c-ink:         #E8EEF7;
	--c-ink-soft:    #C9D2E3;
	--c-ink-mute:    #95A0BA;
	--c-text:        #E8EEF7;
	--c-text-mute:   #98A4BE;
	--c-text-dim:    #6F7A93;
	--c-border:      #2A3550;
	--c-border-soft: #1F2940;
	--c-accent-soft: #4A2814;
	--c-blue-soft:   #2A3D6F;
	--c-yellow-soft: #3A331A;
	--c-sage-bg:     #1B2A1F;
	--c-crimson-bg:  #2C1A18;
	--c-warn-bg:     #2D2812;
	--c-cream:       #0F1626;
	/* Glass tokens — light の rgba(255,255,255,*) を navy rgba(26,34,56,*) に置換。
	   .wn-profile / .wn-profile-meta span / 任意の .glass 系カードがダーク背景に
	   そのまま追従する。border は薄いネイビーで縁取り、shadow は深めに。 */
	--glass-bg:           rgba(26, 34, 56, .62);
	--glass-bg-strong:    rgba(26, 34, 56, .82);
	--glass-bg-mute:      rgba(26, 34, 56, .46);
	--glass-border:       rgba(120, 140, 180, .22);
	--glass-border-soft:  rgba(120, 140, 180, .14);
	--glass-shadow:       0 18px 45px rgba(0, 0, 0, .42);
	--glass-shadow-hover: 0 22px 55px rgba(0, 0, 0, .55);
	/* Ink palette — light は navy 透過、dark は ink-white 透過に逆転。
	   .wn-track-record__lede p などが「ink-80 で読めない」状態を解消。 */
	--ink-90:    rgba(232, 238, 247, .94);
	--ink-80:    rgba(232, 238, 247, .86);
	--ink-70:    rgba(232, 238, 247, .76);
	--ink-50:    rgba(232, 238, 247, .54);
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		--c-paper:       #0F1626;
		--c-mist:        #1A2238;
		--c-mist-2:      #243149;
		--c-mist-yellow: #2A2515;
		--c-ink:         #E8EEF7;
		--c-ink-soft:    #C9D2E3;
		--c-ink-mute:    #95A0BA;
		--c-text:        #E8EEF7;
		--c-text-mute:   #98A4BE;
		--c-text-dim:    #6F7A93;
		--c-border:      #2A3550;
		--c-border-soft: #1F2940;
		--c-accent-soft: #4A2814;
		--c-blue-soft:   #2A3D6F;
		--c-yellow-soft: #3A331A;
		--c-sage-bg:     #1B2A1F;
		--c-crimson-bg:  #2C1A18;
		--c-warn-bg:     #2D2812;
		--c-cream:       #0F1626;
		--glass-bg:           rgba(26, 34, 56, .62);
		--glass-bg-strong:    rgba(26, 34, 56, .82);
		--glass-bg-mute:      rgba(26, 34, 56, .46);
		--glass-border:       rgba(120, 140, 180, .22);
		--glass-border-soft:  rgba(120, 140, 180, .14);
		--glass-shadow:       0 18px 45px rgba(0, 0, 0, .42);
		--glass-shadow-hover: 0 22px 55px rgba(0, 0, 0, .55);
		--ink-90:    rgba(232, 238, 247, .94);
		--ink-80:    rgba(232, 238, 247, .86);
		--ink-70:    rgba(232, 238, 247, .76);
		--ink-50:    rgba(232, 238, 247, .54);
	}
}

/* 明示的に白固定の場所を上書き（dark でも適切な背景に） */
html[data-theme="dark"] body,
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) body { background: var(--c-paper); color: var(--c-text); }
}
html[data-theme="dark"] body { background: var(--c-paper); color: var(--c-text); }

/* 要点ボックス・テーブル・画像などダーク向け補正 */
html[data-theme="dark"] .wn-tldr {
	background: rgba(255, 111, 61, .08);
}
html[data-theme="dark"] .wp-block-image img {
	filter: brightness(.92);
}
html[data-theme="dark"] .wp-block-table table {
	background: var(--c-mist);
}

/* FAQ open 状態のダーク対応 — 1318行目で `background: #fff` のままだとダークで白文字×白背景になるため
   `--c-mist`（dark時 #1A2238）に置換。オレンジ枠は維持しつつ、shadow も dark 向けに調整。
   ※ !important は使わない。`html[data-theme="dark"]` を前置することで specificity が
   (0,2,1) → (0,3,2) に上がり、上流の `.wn-faq details[open]` を自然に上書きする。 */
html[data-theme="dark"] .wn-faq details[open] {
	background: var(--c-mist);
	box-shadow: 0 14px 36px rgba(0, 0, 0, .32);
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .wn-faq details[open] {
		background: var(--c-mist);
		box-shadow: 0 14px 36px rgba(0, 0, 0, .32);
	}
}

/* ヘッダー上のテーマ切替トグル */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--c-border);
	background: var(--c-mist);
	color: var(--c-ink);
	border-radius: 50%;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease, color .18s ease;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
	background: var(--c-ink);
	color: var(--c-paper);
	outline: none;
	transform: scale(1.06);
}
.theme-toggle__icon-sun,
.theme-toggle__icon-moon {
	width: 18px;
	height: 18px;
}
/* Icon visibility — convention "show what the next click yields".
   In light mode: show MOON (click → dark). In dark mode: show SUN (click → light). */
html[data-theme="dark"] .theme-toggle__icon-moon,
html:not([data-theme="dark"]) .theme-toggle__icon-sun {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.theme-toggle { transition: none; }
}

/* ============================================================================
   54.2  Dark Mode — component-level adjustments
   ---------------------------------------------------------------------------
   変数で吸収しきれない、明示色を持つコンポーネントの個別補正。
   ライト時に「白背景＋影」で立体感を出していたカードは、ダーク時には
   「やや浮いた紺面＋細ボーダー」で代替する。
   ============================================================================ */
html[data-theme="dark"] {
	/* サービスカード（トップ・LP 共通） */
	.wn-service-card,
	.wn-service-tile,
	.wn-case,
	.related__card,
	.linkbox-tile,
	.wn-pillar-card a,
	.widget,
	.post-card {
		background: var(--c-mist);
		border-color: var(--c-border);
		color: var(--c-text);
	}
	.linkbox-tile:hover,
	.linkbox-tile:focus-visible,
	.wn-pillar-card a:hover,
	.wn-pillar-card a:focus-visible {
		background: var(--c-mist-2);
		border-color: var(--c-ink-soft);
	}

	/* 統計数値カード */
	.wn-trust__stat,
	.wn-stat-card {
		background: var(--c-mist);
		color: var(--c-ink);
	}

	/* CTA Finale / ダーク背景の上に乗るホワイト系ブロック */
	.wn-cta-finale {
		background: linear-gradient(180deg, #0a1020 0%, #1a2238 100%);
	}

	/* 表ヘッダー */
	.wp-block-table table th {
		background: var(--c-mist-2);
		color: var(--c-ink);
	}
	.wp-block-table table td {
		border-color: var(--c-border);
	}

	/* コードブロック — ライト時の薄背景はダーク時に逆転 */
	.wp-block-code,
	pre.wp-block-code {
		background: #06101e;
		color: #c9d2e3;
		border: 1px solid var(--c-border);
	}
	:not(pre) > code {
		background: var(--c-mist-2);
		color: var(--c-accent);
	}

	/* お客様の声カード（明示的な白背景があれば） */
	.wn-voice-card {
		background: var(--c-mist);
		border-color: var(--c-border);
	}

	/* 旧 JIN:R 互換シム .wn-callout */
	.wn-callout {
		background: var(--c-mist);
		border-color: var(--c-border);
	}

	/* TOC */
	.post-single__toc,
	.sidebar__toc {
		background: var(--c-mist);
		border-color: var(--c-border);
	}

	/* 上級者シリーズ・ナビゲーション */
	.wn-series-nav {
		background: var(--c-mist);
		border-color: var(--c-border);
	}

	/* 緊急バンド — 明度を抑えつつ視認性を保つ */
	.emergency-band {
		background: #2C1A18;
		color: #FFB4AF;
		border-bottom-color: var(--c-border);
	}

	/* フッター */
	.site-footer {
		background: #06101e;
		color: var(--c-text-mute);
	}
	/* BEFORE YOU TOUCH 帯（footer-signal）
	   light 側で background / color に !important を打っているため、ダーク側も
	   !important で殴り返す。タイトル下の黄ライン、ボディテキスト、白塗りの
	   ghost ボタンまで一式 dark に。 */
	.footer-signal {
		background:
			radial-gradient(40% 45% at 100% 100%, rgba(254, 216, 0, .06) 0%, transparent 65%),
			linear-gradient(180deg, #0a1020 0%, #06101e 100%) !important;
		color: var(--c-text) !important;
		border-top-color: var(--c-border) !important;
	}
	.footer-signal__eyebrow {
		color: var(--c-accent, #F26B22) !important;
	}
	.footer-signal__title,
	.footer-signal__body,
	.footer-signal__copy,
	.footer-signal h2,
	.footer-signal p {
		color: var(--c-text) !important;
	}
	.footer-signal__title {
		text-decoration-color: rgba(254, 216, 0, .42);
	}
	.footer-signal .btn--ghost-light,
	.footer-signal .btn--ghost.btn--ghost-light {
		background: rgba(255, 255, 255, .08) !important;
		border-color: rgba(255, 255, 255, .35) !important;
		color: #fff !important;
	}
	.footer-signal .btn--ghost-light:hover,
	.footer-signal .btn--ghost.btn--ghost-light:hover {
		background: rgba(255, 255, 255, .18) !important;
		border-color: #fff !important;
		color: #fff !important;
	}
	.footer-signal .btn--accent,
	.footer-signal .btn--primary,
	.footer-signal a.btn--primary,
	.footer-signal .wn-btn--primary,
	.footer-signal a.btn--accent {
		background: var(--c-accent, #F26B22) !important;
		color: #fff !important;
		border-color: var(--c-accent, #F26B22) !important;
		box-shadow: 0 10px 28px -10px rgba(242, 107, 34, .55) !important;
	}
	/* footer-signal 内のお問い合わせアイコン行 */
	.footer-signal__meta,
	.footer-signal__contact,
	.footer-signal .wn-contact-icons {
		color: var(--c-text-mute);
	}

	/* ハイライト（マーカー）─ 黄系を暗色寄りに */
	.has-yellow-mark,
	mark,
	.wn-marker {
		background: linear-gradient(transparent 60%, rgba(254, 216, 0, .35) 60%);
		color: inherit;
	}

	/* 入力フィールド */
	input[type="text"], input[type="email"], input[type="search"], input[type="url"],
	textarea, select {
		background: var(--c-mist);
		color: var(--c-ink);
		border-color: var(--c-border);
	}
	input::placeholder, textarea::placeholder {
		color: var(--c-text-dim);
	}

	/* 強制色 (skeumorphic shadow) を弱める */
	.wn-service-card,
	.wn-case,
	.related__card,
	.linkbox-tile,
	.wn-pillar-card a,
	.post-card,
	.wn-voice-card {
		box-shadow: 0 1px 3px rgba(0,0,0,.4);
	}

	/* 半透明白の上書き（インラインスタイル/旧 CSS のホワイトオパシティを克服） */
	.wn-svc {
		background: rgba(26, 34, 56, .85) !important;
		border-color: var(--c-border) !important;
		color: var(--c-text) !important;
	}
	.wn-svc:hover {
		background: var(--c-mist-2) !important;
	}
	/* 実績カード本体（個別の 1 枚）は navy 透過で残す。
	   ※ 以前は `[class*="__stat"]` で広く塗っていたが、これだと
	      - `.wn-track-record__stats`（カードを内包する flex/grid コンテナ）
	      - `.wn-track-record__stat-icon` / `__stat-num` / `__stat-label` / `__stat-note`
	      - `c-live__status` / `wps-audit-card__status*` / `wps-privacy-audit__status*`
	      といった「__stat を部分一致で含むが趣旨は別物」のクラスにも
	      navy 背景が乗ってしまい、ダーク時に「カード in カード」化していた。
	      明示クラス列挙に置き換え、過剰マッチを止める。 */
	.wn-track-record__stat,
	.wn-trust__stat,
	.wn-hours-banner {
		background: rgba(26, 34, 56, .92) !important;
		color: var(--c-text) !important;
		border-color: var(--c-border) !important;
	}
	/* カード群を内包するコンテナ／カード内のテキスト span は背景を持たない。
	   既存実装で background-color が漏れている場合があるので明示的に透過化。 */
	.wn-track-record__stats,
	.wn-track-record__stat-num,
	.wn-track-record__stat-label,
	.wn-track-record__stat-note {
		background: transparent !important;
		border-color: transparent !important;
		box-shadow: none !important;
	}
	/* アイコン台座はライト時の淡いグラデを残すと暗背景でも accent として効く。
	   ただし白すぎる箱は浮くので、navy mist にトーンダウンして縁取りを足す。 */
	.wn-track-record__stat-icon {
		background: linear-gradient(135deg, rgba(91, 138, 255, .22), rgba(255, 175, 122, .18)) !important;
		border: 1px solid rgba(120, 140, 180, .22) !important;
		color: var(--c-text) !important;
	}
	.wn-track-record__num,
	.wn-stat__num,
	.wn-stat-card__num {
		color: var(--c-accent) !important;
	}

	/* お客様の声カード上のテキスト */
	.wn-voice,
	.wn-voice-row,
	[class*="voice"] {
		background-color: var(--c-mist) !important;
		color: var(--c-text);
	}

	/* CTA Finale title 白文字をそのまま維持 */
	.wn-cta-finale__title {
		color: #ffffff;
	}

	/* 記事・固定ページの本文コンテナ（明示的に白を持つ） */
	.post-single,
	.page-default {
		background: rgba(26, 34, 56, .96) !important;
		border-color: var(--c-border) !important;
		box-shadow:
			0 1px 0 rgba(255, 255, 255, .04) inset,
			0 18px 50px rgba(0, 0, 0, .3) !important;
	}

	/* タイトル・本文の文字色を明示 */
	.post-single__title,
	.page-default h1,
	.page-default h2,
	.page-default h3,
	.page-default h4,
	.page-default p,
	.page-default li,
	.post-single__content p,
	.post-single__content li {
		color: var(--c-text);
	}

	/* 要点ボックスを暗色にきちんと（half-opacity orange → solid mist 系） */
	.wn-tldr {
		background: var(--c-mist) !important;
		border-left-color: var(--c-accent) !important;
		color: var(--c-text);
	}
	.wn-tldr p, .wn-tldr li, .wn-tldr strong {
		color: var(--c-text);
	}

	/* 緊急 CTA ブロックの白下地 */
	[class*="wn-cta"][class*="emergency"],
	.wn-cta-emergency {
		background: linear-gradient(180deg, rgba(220, 38, 38, .15) 0%, rgba(220, 38, 38, .08) 100%);
		border-color: rgba(220, 38, 38, .3);
		color: var(--c-text);
	}

	/* 黄色マーカー（タイトルや見出しに使われる highlight）— 暗背景で控えめに */
	.has-yellow-mark,
	.wn-marker,
	mark,
	[style*="background:#FED800"],
	[style*="background: #FED800"] {
		background: linear-gradient(transparent 65%, rgba(254, 216, 0, .25) 65%) !important;
		color: inherit !important;
	}

	/* テーブル ─ ピラーページの「3 つのサービス使い分け」 */
	.page-default table,
	.post-single__content table {
		background: var(--c-mist);
		color: var(--c-text);
	}
	.page-default table th,
	.post-single__content table th {
		background: var(--c-mist-2);
		color: var(--c-text);
		border-color: var(--c-border);
	}
	.page-default table td,
	.post-single__content table td {
		border-color: var(--c-border);
		color: var(--c-text);
	}

	/* ========================================================================
	   54.2.W  停止指摘の dark 残課題 一括修正
	   ------------------------------------------------------------------------
	   (1) 吹き出し（.speech）に dark override がなく、話者個別の白 bg + navy 文字が
	       dark ページ上で「白カードが浮く」状態だった。dark でブランド mist へ。
	   (2) callout variant（.wn-callout--info / --memo / --star / --check / --warning
	       / --good / --bad / --mail / --point）が light tint のまま。
	   (3) ショートコード [wn_cta] の出力先（.wn-cta-* / .cta-* の細部）が薄れる。
	   (4) 記事末尾の執筆者プロフィールカード（.wn-author-card / .post-author）が
	       ダーク非対応。
	   (5) JIN:R アコーディオン (.wp-block-jinr-blocks-accordion) のダーク色。
	   (6) 「次回...」予告ボックス（.callout--next, .next-preview 系）も。
	   ======================================================================== */

	/* (1) 吹き出し（speech） — 話者個別色は維持しつつ、ダーク時は navy mist に強制 */
	.speech,
	.speech__body,
	.speech .speech__body {
		--bubble-bg: var(--c-mist) !important;
		--bubble-color: var(--c-text) !important;
	}
	.speech__body {
		background: var(--c-mist) !important;
		color: var(--c-text) !important;
		border: 1px solid var(--c-border);
	}
	.speech__avatar,
	.speech__avatar-img {
		background: var(--c-mist-2);
		border-color: var(--c-border) !important;
	}
	.speech__avatar-fallback {
		background: var(--c-accent, #F26B22);
		color: #fff;
	}
	.speech__name {
		color: var(--c-text-mute);
	}
	/* テール（三角形）の色も navy 系に */
	.speech__body::before,
	.speech__body::after {
		border-color: transparent var(--c-mist) transparent transparent !important;
	}
	.speech--right .speech__body::before,
	.speech--right .speech__body::after {
		border-color: transparent transparent transparent var(--c-mist) !important;
	}

	/* (2) callout variant — dark で目立たないトーンに */
	.wn-callout {
		background: var(--c-mist) !important;
		color: var(--c-text);
	}
	.wn-callout--info    { background: rgba(91, 138, 255, .12) !important; }
	.wn-callout--memo    { background: rgba(254, 216, 0, .08) !important; }
	.wn-callout--star    { background: rgba(255, 175, 122, .10) !important; }
	.wn-callout--check,
	.wn-callout--good    { background: rgba(86, 196, 138, .12) !important; }
	.wn-callout--warning,
	.wn-callout--bad     { background: rgba(220, 38, 38, .15) !important; }
	.wn-callout--mail    { background: rgba(91, 138, 255, .10) !important; }
	.wn-callout--point   { background: rgba(255, 175, 122, .12) !important; }

	/* (3) ショートコード [wn_cta] / .wn-cta-* / .cta-* の細部 */
	.wn-cta,
	.wn-cta-inner,
	.wn-cta-mid,
	.wn-cta-low,
	.cta,
	.cta__inner {
		background: var(--c-mist) !important;
		border-color: var(--c-border) !important;
		color: var(--c-text) !important;
	}
	.wn-cta-title,
	.wn-cta-body,
	.cta__title,
	.cta__body {
		color: var(--c-text) !important;
	}
	.wn-cta .btn--primary,
	.wn-cta-inner .btn--primary,
	.cta .btn--primary {
		background: var(--c-accent, #F26B22) !important;
		color: #fff !important;
		border-color: var(--c-accent, #F26B22) !important;
	}
	.wn-cta .btn--secondary,
	.wn-cta-inner .btn--secondary,
	.cta .btn--secondary {
		background: var(--c-mist-2) !important;
		color: var(--c-text) !important;
		border-color: rgba(255, 255, 255, .55) !important;
	}

	/* (4) 執筆者プロフィールカード — 記事末尾 */
	.wn-author-card,
	.author-card,
	.post-author,
	.entry-author,
	.post-single__author,
	.post-single__after .wn-profile {
		background: var(--c-mist) !important;
		border-color: var(--c-border) !important;
		color: var(--c-text) !important;
	}
	.wn-author-card *,
	.author-card *,
	.post-author *,
	.post-single__author * {
		color: inherit;
	}
	.wn-author-card a,
	.author-card a,
	.post-author a {
		color: var(--c-accent, #F26B22);
	}

	/* (5) JIN:R アコーディオン残骸（shim 起動後） */
	.wp-block-jinr-blocks-accordion,
	.b--jinr-accordion-item,
	.wp-block-jinr-blocks-accordionchild {
		background: var(--c-mist) !important;
		border-color: var(--c-border) !important;
		color: var(--c-text) !important;
	}
	.a--accordion-title,
	.a--acc-question {
		color: var(--c-text) !important;
		background: transparent !important;
	}
	.a--accordion-toggle span {
		background: var(--c-text) !important;
	}
	.c--accordion-contents {
		background: var(--c-mist-2) !important;
		color: var(--c-text) !important;
		border-color: var(--c-border) !important;
	}
	/* shim 由来の閉状態は display:none で隠れるので追加色付け不要 */

	/* (6) 「次回...」予告 / .post-next 系 */
	.post-next,
	.wn-post-next,
	.next-preview,
	.callout--next {
		background: var(--c-mist) !important;
		border-color: var(--c-accent, #F26B22) !important;
		color: var(--c-text) !important;
	}
	.post-next *,
	.wn-post-next *,
	.next-preview * { color: inherit; }

	/* ========================================================================
	   (7) 記事本文（post-single__content）の <a> リンク色を navy 背景でも読める
	       色に強制。WP 既定の青 (#0073aa) は navy 上でほぼ見えなくなる。
	   ======================================================================== */
	.post-single__content a,
	.entry-content a,
	.wn-callout a,
	.b--jinr-block a,
	.wp-block-jinr-blocks-simplebox a,
	.wp-block-jinr-blocks-headbox a,
	.c--simple-box-inner a,
	.wn-cta a,
	.cta__inner a,
	.speech__body a {
		color: var(--c-accent, #F26B22) !important;
		text-decoration-color: rgba(242, 107, 34, .5) !important;
	}
	.post-single__content a:hover,
	.entry-content a:hover,
	.wn-callout a:hover,
	.b--jinr-block a:hover,
	.wp-block-jinr-blocks-simplebox a:hover {
		color: #ff7d33 !important;
		text-decoration-color: #ff7d33 !important;
	}

	/* ========================================================================
	   (8) パレット系 has-*-color text-color の dark 修正
	   ライトモード前提で <p class="has-white-color"> 等が記事内に直書きされて
	   おり、dark でも光らずに dark paper 同色になって消える。
	   テキストカラーの palette class は dark では全て var(--c-text) に強制。
	   ======================================================================== */
	.has-text-color.has-white-color,
	.has-text-color.has-paper-color,
	.has-text-color.has-mist-color,
	.has-text-color.has-mist-2-color,
	.has-text-color.has-cream-color,
	.has-white-color,
	.has-paper-color,
	.has-mist-color {
		color: var(--c-text) !important;
	}

	/* ========================================================================
	   (9) JIN:R simplebox / headbox 内の段落・リスト・コードは全て c-text に。
	       元コードが var(--c-ink) や直書きで暗色を当ててくる場合の保険。
	   ======================================================================== */
	.b--jinr-block,
	.b--jinr-box,
	.c--simple-box-inner,
	.wp-block-jinr-blocks-simplebox,
	.wp-block-jinr-blocks-headbox {
		color: var(--c-text) !important;
		background: var(--c-mist) !important;
		border-color: var(--c-border) !important;
		border-left-color: var(--c-accent, #F26B22) !important;
	}
	.b--jinr-block p,
	.b--jinr-block li,
	.b--jinr-block strong,
	.b--jinr-block em,
	.b--jinr-box p,
	.b--jinr-box li,
	.c--simple-box-inner p,
	.c--simple-box-inner li,
	.wp-block-jinr-blocks-simplebox p,
	.wp-block-jinr-blocks-simplebox li {
		color: var(--c-text) !important;
	}
	.b--jinr-block h1, .b--jinr-block h2, .b--jinr-block h3,
	.b--jinr-block h4, .b--jinr-block h5, .b--jinr-block h6,
	.b--jinr-box h1, .b--jinr-box h2, .b--jinr-box h3,
	.b--jinr-box h4, .b--jinr-box h5, .b--jinr-box h6 {
		color: var(--c-text) !important;
	}
	/* JIN:R headbox の見出しラベル（::before 由来）はアクセントオレンジ維持 */
	[class*="d--heading-box"]::before,
	.b--jinr-headbox__title {
		color: var(--c-accent, #F26B22) !important;
	}
	/* インラインコード — navy 上で読める色に。
	   p / li / dd の中だけでなく、h2/h3/td/dt など本文中のあらゆる場所に普及。
	   ただし code-block-pro の <pre> ブロックは別ハンドリングなので除外。 */
	.post-single__content code,
	.entry-content code,
	.b--jinr-block code,
	.b--jinr-box code,
	.wp-block-jinr-blocks-simplebox code,
	.c--simple-box-inner code,
	.wn-callout code {
		background: rgba(255, 255, 255, .08) !important;
		color: #FFE4B0 !important;
		border-color: rgba(255, 111, 61, .25) !important;
	}
	.post-single__content pre code,
	.entry-content pre code,
	.code-block-pro code {
		background: transparent !important;
		color: inherit !important;
	}

	/* ========================================================================
	   (10) Voice カード Before/After ラベル — light の crimson は dark で沈む
	   ======================================================================== */
	.wn-voice dt,
	.wn-voice-card dt,
	.wn-voices dt,
	dl[class*="voice"] dt {
		color: #FF9F8A !important; /* salmon-pink、navy 上で読める */
	}

	/* ========================================================================
	   (11) skip-link（A11y） — focus 時に white-on-white にならないよう
	   ======================================================================== */
	.skip-link,
	a.skip-link {
		background: var(--c-mist-2, #243149) !important;
		color: #fff !important;
		border: 2px solid var(--c-accent, #F26B22) !important;
	}

	/* ========================================================================
	   (12) `.wn-hero-tag` — emergency 系で light red pill が残る
	   ======================================================================== */
	.wn-hero-tag {
		background: rgba(242, 107, 34, .15) !important;
		color: var(--c-accent, #F26B22) !important;
		border: 1px solid rgba(242, 107, 34, .35) !important;
	}

	/* ========================================================================
	   54.2.X  TOP ページ残存ホワイト系の blanket cleanup（screenshots ベース）
	   ------------------------------------------------------------------------
	   - .wn-profile / .wn-profile-meta span: 元コードが rgba(255,255,255,.*) を
	     直書きしており dark でも白いままだった → navy 透過に。
	   - .wn-track-record__photo / __servers: light グラデと白透過 → 暗版に。
	   - .wn-track-record__lede strong: 黄ハイライト線が白下地で潰れる → 暗版。
	   - .wn-cta-finale / .wn-section--track-record の薄黄/薄橙 radial → 抑制。
	   - .has-paper-background-color など WP パレット bg：c-mist に強制。
	   ======================================================================== */
	.wn-profile {
		background: var(--c-mist) !important;
		border-color: var(--c-border) !important;
		box-shadow: 0 18px 45px rgba(0, 0, 0, .42) !important;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.wn-profile-name,
	.wn-profile-role,
	.wn-profile-bio { color: var(--c-text); }
	.wn-profile-meta span {
		background: var(--c-mist-2) !important;
		border-color: var(--c-border) !important;
		color: var(--c-text);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.wn-profile-avatar {
		box-shadow:
			0 10px 24px rgba(0, 0, 0, .55),
			0 1.5px 0 rgba(255, 255, 255, .04) inset;
	}

	/* Track record (=「プロフィール／実績」セクション) */
	.wn-section--track-record::before {
		background:
			radial-gradient(ellipse at top right, rgba(91, 138, 255, .07), transparent 55%),
			radial-gradient(ellipse at bottom left, rgba(255, 175, 122, .04), transparent 55%);
	}
	.wn-track-record__photo {
		background: linear-gradient(135deg, #1a2238, #243149);
		box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .55), 0 6px 18px -10px rgba(0, 0, 0, .45);
	}
	.wn-track-record__photo::after {
		background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .35));
	}
	.wn-track-record__lede p { color: var(--c-text); }
	.wn-track-record__lede p strong {
		color: #FFE4B0;
		background: linear-gradient(transparent 65%, rgba(255, 198, 120, .25) 65%);
	}
	.wn-track-record__stat-num small { color: var(--c-text); }
	.wn-track-record__stat-label { color: var(--c-text-mute); }
	.wn-track-record__stat-note  { color: var(--c-text-dim); }
	.wn-track-record__servers {
		background: var(--c-mist-2);
		border-color: var(--c-border);
	}
	.wn-track-record__servers-label { color: var(--c-text-mute); }
	.wn-track-record__server-chip {
		background: var(--c-mist);
		border-color: var(--c-border);
		color: var(--c-text);
	}
	.wn-track-record__stats[data-disclosure="numbers"]::after {
		color: var(--c-text-dim);
	}

	/* CTA finale の "BEFORE YOU TOUCH / 触る前に" 変種:
	   light 時にクリーム＋オレンジのグラデを使っているケースがある（modifier 不明）
	   ので、wn-cta-finale 系の clear background-image / linear-gradient 直書きを
	   ダーク navy グラデに強制上書き。 */
	.wn-cta-finale,
	.wn-cta-finale.is-light,
	.wn-cta-finale--soft,
	.wn-cta-finale[style*="linear-gradient"] {
		background: linear-gradient(180deg, #0a1020 0%, #1a2238 100%) !important;
	}
	.wn-cta-finale__eyebrow { color: rgba(255, 255, 255, .82) !important; }
	.wn-cta-finale__body    { color: rgba(255, 255, 255, .92) !important; }
	.wn-cta-finale__btn--primary {
		background: var(--c-accent, #F26B22);
		color: #fff;
		box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .55);
	}
	.wn-cta-finale__btn--ghost {
		background: rgba(255, 255, 255, .08);
		border-color: rgba(255, 255, 255, .35);
		color: #fff;
	}

	/* WordPress palette background-color クラスのダーク変換
	   （ライトでは "paper / mist / cream / pale-cyan-blue" などを背景に使うが
	   ダークでは白いブロックになり読みづらい）。 */
	.has-paper-background-color,
	.has-mist-background-color,
	.has-mist-2-background-color,
	.has-cream-background-color,
	.has-accent-soft-background-color,
	.has-pale-cyan-blue-background-color,
	.has-pale-pink-background-color,
	.has-light-yellow-background-color,
	.has-vivid-yellow-background-color,
	.has-yellow-background-color,
	.has-white-background-color {
		background-color: var(--c-mist) !important;
		color: var(--c-text);
	}

	/* インラインで真っ白を指定しているブロック（旧記事互換）— navy mist に。 */
	[style*="background:#fff"],
	[style*="background: #fff"],
	[style*="background:#FFFFFF"],
	[style*="background: #FFFFFF"],
	[style*="background-color:#fff"],
	[style*="background-color: #fff"],
	[style*="background-color:#FFFFFF"],
	[style*="background-color: #FFFFFF"],
	[style*="background: rgba(255,255,255"],
	[style*="background-color: rgba(255,255,255"] {
		background-color: var(--c-mist) !important;
		color: var(--c-text);
	}

	/* 「プロフィールの詳細」等の CTA / ghost ボタン白下地 → ネイビー ghost に */
	.wn-btn--outline,
	.wn-btn--ghost,
	.wn-link-cta,
	a.wn-btn--outline,
	a.wn-btn--ghost {
		background: var(--c-mist-2);
		border-color: var(--c-border);
		color: var(--c-text);
	}
	.wn-btn--outline:hover,
	.wn-btn--ghost:hover,
	.wn-link-cta:hover {
		background: var(--c-mist);
		border-color: var(--c-ink-mute);
		color: var(--c-ink);
	}

	/* FV / wn-hero の primary ボタン: 元コードは bg=var(--c-ink) を当てており、
	   ダークでは --c-ink が #E8EEF7（light-ink）に逆転 → 白塗りで白文字となり
	   ボタンが消える。アクセントオレンジに切り替えてダーク背景で立つようにする。 */
	.wn-btn-primary,
	.wn-btn.wn-btn-primary,
	.wn-btn--primary,
	a.wn-btn-primary,
	a.wn-btn--primary {
		background: var(--c-accent, #F26B22) !important;
		color: #fff !important;
		border-color: var(--c-accent, #F26B22) !important;
		box-shadow: 0 8px 22px -10px rgba(242, 107, 34, .55);
	}
	.wn-btn-primary:hover,
	.wn-btn--primary:hover {
		background: #ff7d33 !important;
		border-color: #ff7d33 !important;
	}
	/* wn-btn-ghost — ガラス透過は ok。border / color を明示でダーク対応 */
	.wn-btn-ghost,
	.wn-btn--ghost {
		background: rgba(255, 255, 255, .08) !important;
		border-color: rgba(255, 255, 255, .35) !important;
		color: #fff !important;
	}
	.wn-btn-ghost:hover,
	.wn-btn--ghost:hover {
		background: rgba(255, 255, 255, .18) !important;
		border-color: #fff !important;
	}

	/* ========================================================================
	   54.2.Y  Page hero / photo hero / character hero のダーク追従
	   ------------------------------------------------------------------------
	   /wp-emergency/, /wp-recovery/, /case-studies/, /profile/ などの FV は
	   pages の本文側で wn-hero に inline style="background: linear-gradient(...)"
	   を直書きしているため、テーマ CSS の dark 切替が効かない。
	   inline style に勝つには CSS で !important を打つしかないので、ここで
	   wn-hero 系を一律にダーク navy グラデへ強制する。
	   ヒーロー写真は light で multiply（暗い色 × 何でも = 暗い）でブレンドしているが、
	   dark 背景上では multiply にすると被写体がほぼ黒つぶれするので screen に切替。
	   ======================================================================== */
	.wn-hero,
	.wn-hero--with-photo,
	.wn-hero--with-character,
	.wn-hero--character-left,
	.wn-hero[style],
	.wn-hero--with-photo[style] {
		background:
			radial-gradient(50% 35% at 90% 0%, rgba(254, 216, 0, .06), transparent 70%),
			radial-gradient(50% 60% at 5% 100%, rgba(97, 139, 217, .06), transparent 65%),
			linear-gradient(180deg, var(--c-paper) 0%, var(--c-mist) 100%) !important;
	}
	.wn-hero .wn-hero-title,
	.wn-hero .wn-hero-body,
	.wn-hero-title,
	.wn-hero-body,
	.wn-hero-tag,
	.archive-hero__title,
	.archive-hero__lede {
		color: var(--c-text);
	}
	/* Hero 写真／キャラ画像のトーン合わせ
	   screen blend は被写体だけでなく明るい背景まで持ち上げてしまい、
	   「dark なテキスト側 vs 明るい photo 側」の二色分割が起きていた。
	   normal blend + opacity + filter で全体を navy に寄せる。
	   ::before で左→右に navy フェードを敷き、テキスト側の可読性を確保。 */
	.wn-hero__photo {
		mix-blend-mode: normal !important;
		opacity: .65 !important;
		filter: brightness(.72) saturate(.85) contrast(1.05);
	}
	.wn-hero__photo img {
		filter: brightness(.95);
	}
	/* キャラ画像はブランド・マスコットなので彩度を保ったまま暗めに。
	   実写写真ほどは沈めない。 */
	.wn-hero__character {
		mix-blend-mode: normal !important;
		opacity: .9 !important;
		filter: brightness(.92) saturate(.95);
	}
	.wn-hero__photo::after {
		background: linear-gradient(90deg,
			rgba(15, 22, 38, .92) 0%,
			rgba(15, 22, 38, .55) 28%,
			rgba(15, 22, 38, .18) 60%,
			rgba(15, 22, 38, .35) 100%) !important;
		content: "" !important;
		position: absolute !important;
		inset: 0 !important;
		pointer-events: none;
	}
	/* tone 別のクリーム ::after も dark では navy オーバーレイに */
	.wn-hero--with-photo[data-tone="emergency"] .wn-hero__photo::after,
	.is-slug-wp-emergency .wn-hero__photo::after,
	.wn-hero--with-photo[data-tone="recovery"] .wn-hero__photo::after {
		background: linear-gradient(90deg,
			rgba(15, 22, 38, .92) 0%,
			rgba(15, 22, 38, .55) 28%,
			rgba(15, 22, 38, .18) 60%,
			rgba(15, 22, 38, .35) 100%) !important;
	}
	/* character hero (recovery / case-studies / maintain) — キャラが左／右どちらでも
	   全体トーンを揃えるための共通オーバーレイ */
	.wn-hero--with-character::after,
	.wn-hero--character-left.wn-hero--with-character::after {
		background: linear-gradient(180deg,
			rgba(15, 22, 38, 0) 0%,
			rgba(15, 22, 38, .25) 70%,
			rgba(15, 22, 38, .45) 100%) !important;
	}

	/* ========================================================================
	   54.2.Z  .cta / .wn-cta バリアント（LP 用 CONSULT ボックス）の dark 対応
	   ------------------------------------------------------------------------
	   .cta--high は light で `background: var(--c-ink)` を使っているので、
	   dark で --c-ink が #E8EEF7（light navy）に逆転 → ボックスが白くなり、
	   中の白文字＋透明 .btn--secondary が全て沈む。dark 専用にブランド
	   navy グラデへ強制し直す。.btn--secondary もここで solid にする。 */
	.wn-cta-high,
	.cta--high {
		background: linear-gradient(125deg, #1B2547 0%, #2E4A99 45%, #4A6FBA 100%) !important;
		color: #fff !important;
	}
	.wn-cta-high .wn-cta-title,
	.wn-cta-high .cta__title,
	.cta--high .wn-cta-title,
	.cta--high .cta__title { color: #fff !important; }
	.wn-cta-high .wn-cta-body,
	.wn-cta-high .cta__body,
	.cta--high .wn-cta-body,
	.cta--high .cta__body { color: rgba(255, 255, 255, .92) !important; }
	.wn-cta-high .btn--primary,
	.cta--high .btn--primary {
		background: var(--c-accent, #F26B22) !important;
		color: #fff !important;
		border-color: var(--c-accent, #F26B22) !important;
	}
	.wn-cta-high .btn--secondary,
	.cta--high .btn--secondary {
		background: rgba(255, 255, 255, .12) !important;
		color: #fff !important;
		border-color: rgba(255, 255, 255, .65) !important;
	}
	.wn-cta-high .btn--secondary:hover,
	.cta--high .btn--secondary:hover {
		background: rgba(255, 255, 255, .22) !important;
		border-color: #fff !important;
	}

	/* .cta--mid / --low — light は mist/paper を使っているのでダーク変数で
	   自然に追従するが、design-polish の glass-bg override が rgba(255,…) を
	   当てているので念のため navy mist に固定 */
	.wn-cta-mid,
	.cta--mid,
	.wn-cta-low,
	.cta--low {
		background: var(--c-mist) !important;
		border-color: var(--c-border) !important;
		color: var(--c-text) !important;
	}
	.wn-cta-emergency,
	.cta--emergency {
		background: linear-gradient(135deg, #2C1A18 0%, #1A2238 100%) !important;
		border-color: rgba(220, 38, 38, .3) !important;
		color: var(--c-text) !important;
	}

	/* .btn--secondary 単独でも、ライト時 `background: var(--c-paper); color: var(--c-ink)`
	   が dark で「白文字 on white」と逆転して読めなくなるので強制 */
	.btn--secondary,
	a.btn--secondary {
		background: var(--c-mist-2, #243149) !important;
		color: #fff !important;
		border-color: rgba(255, 255, 255, .55) !important;
	}
	.btn--secondary:hover,
	a.btn--secondary:hover {
		background: var(--c-mist, #1A2238) !important;
		border-color: #fff !important;
	}

	/* Exit-intent ポップアップ (.wn-exit-modal) — light で card=#fff、title=ink、
	   body=text-mute を直書きしているため、dark では bg が白いまま残り、
	   white-on-white で本文がほぼ消える。card / title / body / close ボタンを
	   一式ダーク向けに上書き。 */
	.wn-exit-modal__card {
		background: var(--c-mist, #1A2238) !important;
		box-shadow: 0 20px 60px rgba(0, 0, 0, .55) !important;
		border: 1px solid var(--c-border);
	}
	.wn-exit-modal__title { color: var(--c-text) !important; }
	.wn-exit-modal__body { color: var(--c-text-mute) !important; }
	.wn-exit-modal__close {
		background: var(--c-mist-2, #243149) !important;
		color: var(--c-text) !important;
	}
	.wn-exit-modal__close:hover {
		background: var(--c-ink-mute, #4A5570) !important;
		color: var(--c-paper, #0F1626) !important;
	}
	/* CTA 内の primary / secondary は他の dark override（.btn--primary, .btn--secondary）
	   が拾うので追加指定は不要 */

	/* パンくず帯 ── light で rgba(238,243,255,.85) を直書きしているため、
	   dark でも薄い水色のまま残って浮く。navy 透過に切替 + リンク／矢印も
	   ダーク向けの色味に。 */
	.breadcrumb-wrap {
		background: rgba(26, 34, 56, .55) !important;
		border-bottom-color: var(--c-border-soft) !important;
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}
	.breadcrumb-wrap a,
	.breadcrumbs__item a {
		color: var(--c-text-mute);
	}
	.breadcrumb-wrap a:hover,
	.breadcrumbs__item a:hover {
		color: var(--c-text);
	}
	.breadcrumbs__item {
		color: var(--c-text-mute);
	}
	.breadcrumbs__item:not(:last-child)::after {
		color: var(--c-text-dim);
	}
	/* 最後の現在ページ表記 — 視認性を上げる */
	.breadcrumbs__item:last-child,
	.breadcrumbs__item:last-child a {
		color: var(--c-text);
	}

	/* ヘッダー bar — light は rgba(255,255,255,.78) の白透過で、ダーク背景の
	   ページに乗ると「白の靄」になり、白文字メニューが沈む。navy 透過に切替。 */
	.site-header {
		background: rgba(15, 22, 38, .82) !important;
		border-bottom-color: rgba(120, 140, 180, .18) !important;
		box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset,
		            0 4px 18px rgba(0, 0, 0, .35);
	}
	.site-header a,
	.site-header .nav-menu a,
	.site-header__logo {
		color: var(--c-text);
	}
	/* current-menu-item の下線オレンジは light/dark 共通でそのまま */

	/* CONSULT ボックス (wn-cta-finale)
	   先の override で 0a1020→1a2238 にしたため page bg と同化していた。
	   ブランドの navy→mid-blue を保ってボックスを浮かせ、写真も活かす。 */
	.wn-cta-finale,
	.wn-cta-finale.is-light,
	.wn-cta-finale--soft,
	.wn-cta-finale[style*="linear-gradient"] {
		background: linear-gradient(125deg, #1B2547 0%, #2E4A99 45%, #4A6FBA 100%) !important;
		box-shadow: 0 36px 70px -36px rgba(0, 0, 0, .55),
		            0 1px 0 rgba(255, 255, 255, .06) inset;
	}
	.wn-cta-finale::after {
		background: linear-gradient(110deg,
			rgba(27, 37, 71, .82) 0%,
			rgba(46, 74, 153, .68) 45%,
			rgba(74, 111, 186, .30) 100%);
	}
	.wn-cta-finale__btn--primary {
		background: var(--c-accent, #F26B22) !important;
		color: #fff !important;
		border-color: var(--c-accent, #F26B22) !important;
		box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .55);
	}
	.wn-cta-finale__btn--ghost {
		background: rgba(255, 255, 255, .12) !important;
		border-color: rgba(255, 255, 255, .55) !important;
		color: #fff !important;
		backdrop-filter: blur(6px);
	}

	/* FV / wn-hero のボタン群 — ダーク時の可読性最終調整
	   - Primary: 旧 = #F26B22 + 白文字 → 2.86:1 で WCAG AA 不適合。
	     ダーク時のみ「白文字」を navy ink (--c-ink) に切替えると 4.16:1 で AA pass。
	     ブランドの「オレンジ × ネイビー」の組み合わせとも一致する。
	   - Ghost: 半透過 navy は hero と同化していたので、ダーク時は solid な
	     mist-2 (#243149) ＋ ボーダー 70% 白 ＋ 軽い影でカードとして自立させる。 */
	.wn-hero .wn-btn-primary,
	.wn-hero .wn-btn--primary,
	.wn-hero a.wn-btn-primary,
	.wn-hero .btn--primary {
		background: var(--c-accent, #F26B22) !important;
		color: #1B2547 !important;
		border-color: var(--c-accent, #F26B22) !important;
		font-weight: 800;
		text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
		box-shadow: 0 14px 32px -12px rgba(242, 107, 34, .55),
		            0 0 0 1px rgba(0, 0, 0, .08) inset;
	}
	.wn-hero .wn-btn-primary:hover,
	.wn-hero .wn-btn--primary:hover {
		background: #ff7d33 !important;
		color: #1B2547 !important;
	}
	/* primary の中の矢印 → / ボタン全体の svg / span も親色を継承させる */
	.wn-hero .wn-btn-primary *,
	.wn-hero .wn-btn--primary *,
	.wn-hero .btn--primary * { color: inherit; }

	.wn-hero .wn-btn-ghost,
	.wn-hero .wn-btn--ghost,
	.wn-hero .wn-btn-secondary,
	.wn-hero .btn--ghost {
		background: #243149 !important;
		border-color: rgba(255, 255, 255, .65) !important;
		color: #fff !important;
		box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55),
		            0 0 0 1px rgba(255, 255, 255, .06) inset;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.wn-hero .wn-btn-ghost:hover,
	.wn-hero .wn-btn--ghost:hover,
	.wn-hero .wn-btn-secondary:hover,
	.wn-hero .btn--ghost:hover {
		background: #2E3C58 !important;
		border-color: #fff !important;
	}

	/* グローバル .wn-btn-secondary（hero 外でも使用される白アウトラインボタン）
	   light は white bg + navy border。dark では同じく白 bg のままなので
	   ページの dark カードやセクションに乗ったとき判別不能になる。 */
	.wn-btn-secondary,
	a.wn-btn-secondary {
		background: var(--c-mist-2, #243149) !important;
		color: #fff !important;
		border-color: rgba(255, 255, 255, .55) !important;
	}
	.wn-btn-secondary:hover,
	a.wn-btn-secondary:hover {
		background: var(--c-mist, #1A2238) !important;
		border-color: #fff !important;
	}

	/* ============================================================================
	   ヘッダーロゴ — brand-wordmark は webp 画像（黒寄りインク）なので
	   navy ヘッダーに乗ると見えない。filter で白く反転させる。
	   brand-logo（カラーアイコン）は invert しない。 */
	.site-brand__wordmark,
	.site-header img.site-brand__wordmark,
	.site-header [class*="wordmark"] img,
	img[src*="brand-wordmark"] {
		filter: brightness(0) invert(1) !important;
	}

	/* Emergency band — light で #FFE2D2/#FFEFE5 を !important 直書きしている
	   ので、ダーク側も !important で殴り返す */
	.emergency-band {
		background: linear-gradient(90deg, #2C1A18 0%, #1A2238 100%) !important;
		border-left-color: var(--c-accent) !important;
		color: #FFB4AF !important;
	}
	.emergency-band a,
	.emergency-band__link {
		color: var(--c-accent, #F26B22) !important;
	}
	.emergency-band__text,
	.emergency-band span,
	.emergency-band p {
		color: #E8C9C7;
	}
	.emergency-band__icon {
		color: var(--c-accent, #F26B22) !important;
		background: rgba(242, 107, 34, .15) !important;
	}

	/* ヘッダー右上「相談する」ボタンも同じ問題（薄い背景・白文字で読めない）
	   実クラスは btn btn--primary btn--sm site-header__cta。
	   global の .btn--primary も var(--c-ink) を bg に当てて dark で破綻するので
	   ここで dark 専用にアクセントオレンジへ強制。 */
	.btn.btn--primary,
	.btn--primary,
	.site-header__cta,
	.site-header .btn--primary,
	.cta-rail-trigger,
	.cta-rail-trigger.cta-rail-trigger--popover,
	.header-cta,
	.site-header .wn-btn-primary {
		background: var(--c-accent, #F26B22) !important;
		color: #fff !important;
		border-color: var(--c-accent, #F26B22) !important;
	}
	.btn.btn--primary:hover,
	.btn--primary:hover,
	.site-header__cta:hover {
		background: #ff7d33 !important;
		border-color: #ff7d33 !important;
	}
}

/* OS auto-dark でも同じ補正を適用 */
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		.wn-service-card, .wn-service-tile, .wn-case, .related__card,
		.linkbox-tile, .wn-pillar-card a, .widget, .post-card,
		.wn-voice-card, .wn-callout, .post-single__toc, .sidebar__toc,
		.wn-series-nav {
			background: var(--c-mist);
			border-color: var(--c-border);
			color: var(--c-text);
		}
		.wp-block-code, pre.wp-block-code {
			background: #06101e;
			color: #c9d2e3;
			border: 1px solid var(--c-border);
		}
		.site-footer { background: #06101e; color: var(--c-text-mute); }
		.emergency-band { background: #2C1A18; color: #FFB4AF; }

		/* BEFORE YOU TOUCH 帯 (footer-signal) — light の !important を打ち返す */
		.footer-signal {
			background:
				radial-gradient(40% 45% at 100% 100%, rgba(254, 216, 0, .06) 0%, transparent 65%),
				linear-gradient(180deg, #0a1020 0%, #06101e 100%) !important;
			color: var(--c-text) !important;
			border-top-color: var(--c-border) !important;
		}
		.footer-signal__eyebrow { color: var(--c-accent, #F26B22) !important; }
		.footer-signal__title,
		.footer-signal__body,
		.footer-signal__copy,
		.footer-signal h2,
		.footer-signal p { color: var(--c-text) !important; }
		.footer-signal__title { text-decoration-color: rgba(254, 216, 0, .42); }
		.footer-signal .btn--ghost-light,
		.footer-signal .btn--ghost.btn--ghost-light {
			background: rgba(255, 255, 255, .08) !important;
			border-color: rgba(255, 255, 255, .35) !important;
			color: #fff !important;
		}
		.footer-signal .btn--ghost-light:hover,
		.footer-signal .btn--ghost.btn--ghost-light:hover {
			background: rgba(255, 255, 255, .18) !important;
			border-color: #fff !important;
			color: #fff !important;
		}
		.footer-signal .btn--accent,
		.footer-signal .btn--primary,
		.footer-signal a.btn--primary,
		.footer-signal .wn-btn--primary {
			background: var(--c-accent, #F26B22) !important;
			color: #fff !important;
			border-color: var(--c-accent, #F26B22) !important;
		}

		/* TOP ページ残存ホワイト系 — html[data-theme="dark"] と同じ blanket */
		.wn-profile {
			background: var(--c-mist) !important;
			border-color: var(--c-border) !important;
			box-shadow: 0 18px 45px rgba(0, 0, 0, .42) !important;
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
		}
		.wn-profile-name, .wn-profile-role, .wn-profile-bio { color: var(--c-text); }
		.wn-profile-meta span {
			background: var(--c-mist-2) !important;
			border-color: var(--c-border) !important;
			color: var(--c-text);
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
		}
		.wn-track-record__photo {
			background: linear-gradient(135deg, #1a2238, #243149);
			box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .55), 0 6px 18px -10px rgba(0, 0, 0, .45);
		}
		.wn-track-record__photo::after {
			background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .35));
		}
		.wn-track-record__lede p { color: var(--c-text); }
		.wn-track-record__lede p strong {
			color: #FFE4B0;
			background: linear-gradient(transparent 65%, rgba(255, 198, 120, .25) 65%);
		}
		.wn-track-record__servers {
			background: var(--c-mist-2);
			border-color: var(--c-border);
		}
		.wn-track-record__server-chip {
			background: var(--c-mist);
			border-color: var(--c-border);
			color: var(--c-text);
		}
		.wn-cta-finale,
		.wn-cta-finale.is-light,
		.wn-cta-finale--soft,
		.wn-cta-finale[style*="linear-gradient"] {
			background: linear-gradient(180deg, #0a1020 0%, #1a2238 100%) !important;
		}
		.has-paper-background-color,
		.has-mist-background-color,
		.has-cream-background-color,
		.has-white-background-color,
		[style*="background:#fff"],
		[style*="background: #fff"],
		[style*="background-color:#fff"],
		[style*="background-color: #fff"],
		[style*="background: rgba(255,255,255"],
		[style*="background-color: rgba(255,255,255"] {
			background-color: var(--c-mist) !important;
			color: var(--c-text);
		}
		.wn-btn--outline, .wn-btn--ghost, .wn-link-cta {
			background: var(--c-mist-2);
			border-color: var(--c-border);
			color: var(--c-text);
		}
		.wn-btn-primary, .wn-btn.wn-btn-primary, .wn-btn--primary,
		a.wn-btn-primary, a.wn-btn--primary {
			background: var(--c-accent, #F26B22) !important;
			color: #fff !important;
			border-color: var(--c-accent, #F26B22) !important;
		}
		.wn-btn-ghost, .wn-btn--ghost {
			background: rgba(255, 255, 255, .08) !important;
			border-color: rgba(255, 255, 255, .35) !important;
			color: #fff !important;
		}
		.cta-rail-trigger, .header-cta, .site-header .wn-btn-primary,
		.btn.btn--primary, .btn--primary, .site-header__cta {
			background: var(--c-accent, #F26B22) !important;
			color: #fff !important;
			border-color: var(--c-accent, #F26B22) !important;
		}

		/* Page / Photo / Character hero blanket — inline-style に !important で勝つ */
		.wn-hero,
		.wn-hero--with-photo,
		.wn-hero--with-character,
		.wn-hero[style],
		.wn-hero--with-photo[style] {
			background:
				radial-gradient(50% 35% at 90% 0%, rgba(254, 216, 0, .06), transparent 70%),
				radial-gradient(50% 60% at 5% 100%, rgba(97, 139, 217, .06), transparent 65%),
				linear-gradient(180deg, var(--c-paper) 0%, var(--c-mist) 100%) !important;
		}
		.wn-hero-title, .wn-hero-body, .wn-hero-tag,
		.archive-hero__title, .archive-hero__lede { color: var(--c-text); }
		.wn-hero__photo {
			mix-blend-mode: normal !important;
			opacity: .65 !important;
			filter: brightness(.72) saturate(.85) contrast(1.05);
		}
		.wn-hero__character {
			mix-blend-mode: normal !important;
			opacity: .9 !important;
			filter: brightness(.92) saturate(.95);
		}
		.wn-hero__photo::after {
			background: linear-gradient(90deg,
				rgba(15, 22, 38, .92) 0%,
				rgba(15, 22, 38, .55) 28%,
				rgba(15, 22, 38, .18) 60%,
				rgba(15, 22, 38, .35) 100%) !important;
		}
		.wn-hero--with-character::after {
			background: linear-gradient(180deg,
				rgba(15, 22, 38, 0) 0%,
				rgba(15, 22, 38, .25) 70%,
				rgba(15, 22, 38, .45) 100%) !important;
		}

		/* Exit-intent modal — html[data-theme="dark"] と同じ blanket */
		.wn-exit-modal__card {
			background: var(--c-mist, #1A2238) !important;
			box-shadow: 0 20px 60px rgba(0, 0, 0, .55) !important;
			border: 1px solid var(--c-border);
		}
		.wn-exit-modal__title { color: var(--c-text) !important; }
		.wn-exit-modal__body { color: var(--c-text-mute) !important; }
		.wn-exit-modal__close {
			background: var(--c-mist-2, #243149) !important;
			color: var(--c-text) !important;
		}

		/* Breadcrumb — html[data-theme="dark"] と同じ blanket */
		.breadcrumb-wrap {
			background: rgba(26, 34, 56, .55) !important;
			border-bottom-color: var(--c-border-soft) !important;
		}
		.breadcrumb-wrap a, .breadcrumbs__item a { color: var(--c-text-mute); }
		.breadcrumb-wrap a:hover { color: var(--c-text); }
		.breadcrumbs__item { color: var(--c-text-mute); }
		.breadcrumbs__item:not(:last-child)::after { color: var(--c-text-dim); }
		.breadcrumbs__item:last-child,
		.breadcrumbs__item:last-child a { color: var(--c-text); }

		/* Header / CONSULT / FV ghost — html[data-theme="dark"] と同じ blanket */
		.site-header {
			background: rgba(15, 22, 38, .82) !important;
			border-bottom-color: rgba(120, 140, 180, .18) !important;
			box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset,
			            0 4px 18px rgba(0, 0, 0, .35);
		}
		.site-header a, .site-header__logo { color: var(--c-text); }
		.wn-cta-finale,
		.wn-cta-finale.is-light,
		.wn-cta-finale--soft,
		.wn-cta-finale[style*="linear-gradient"] {
			background: linear-gradient(125deg, #1B2547 0%, #2E4A99 45%, #4A6FBA 100%) !important;
		}
		.wn-cta-finale::after {
			background: linear-gradient(110deg,
				rgba(27, 37, 71, .82) 0%,
				rgba(46, 74, 153, .68) 45%,
				rgba(74, 111, 186, .30) 100%);
		}
		.wn-cta-finale__btn--primary {
			background: var(--c-accent, #F26B22) !important;
			color: #fff !important;
			border-color: var(--c-accent, #F26B22) !important;
		}
		.wn-cta-finale__btn--ghost {
			background: rgba(255, 255, 255, .12) !important;
			border-color: rgba(255, 255, 255, .55) !important;
			color: #fff !important;
		}
		.wn-hero .wn-btn-primary, .wn-hero .wn-btn--primary, .wn-hero .btn--primary {
			background: var(--c-accent, #F26B22) !important;
			color: #1B2547 !important;
			border-color: var(--c-accent, #F26B22) !important;
			font-weight: 800;
		}
		.wn-hero .wn-btn-primary *, .wn-hero .wn-btn--primary *, .wn-hero .btn--primary * { color: inherit; }
		.wn-hero .wn-btn-ghost, .wn-hero .wn-btn--ghost,
		.wn-hero .wn-btn-secondary, .wn-hero .btn--ghost {
			background: #243149 !important;
			border-color: rgba(255, 255, 255, .65) !important;
			color: #fff !important;
		}
		.wn-btn-secondary, a.wn-btn-secondary,
		.btn--secondary, a.btn--secondary {
			background: var(--c-mist-2, #243149) !important;
			color: #fff !important;
			border-color: rgba(255, 255, 255, .55) !important;
		}
		.wn-cta-high, .cta--high {
			background: linear-gradient(125deg, #1B2547 0%, #2E4A99 45%, #4A6FBA 100%) !important;
			color: #fff !important;
		}
		.wn-cta-high .cta__title, .cta--high .cta__title { color: #fff !important; }
		.wn-cta-high .cta__body, .cta--high .cta__body { color: rgba(255, 255, 255, .92) !important; }
		.wn-cta-high .btn--primary, .cta--high .btn--primary {
			background: var(--c-accent, #F26B22) !important;
			color: #fff !important;
			border-color: var(--c-accent, #F26B22) !important;
		}
		.wn-cta-high .btn--secondary, .cta--high .btn--secondary {
			background: rgba(255, 255, 255, .12) !important;
			color: #fff !important;
			border-color: rgba(255, 255, 255, .65) !important;
		}
		.wn-cta-mid, .cta--mid, .wn-cta-low, .cta--low {
			background: var(--c-mist) !important;
			border-color: var(--c-border) !important;
			color: var(--c-text) !important;
		}
		.site-brand__wordmark,
		.site-header img.site-brand__wordmark,
		img[src*="brand-wordmark"] {
			filter: brightness(0) invert(1) !important;
		}

		/* Emergency band — light の !important を打ち返す */
		.emergency-band {
			background: linear-gradient(90deg, #2C1A18 0%, #1A2238 100%) !important;
			border-left-color: var(--c-accent) !important;
			color: #FFB4AF !important;
		}
		.emergency-band a { color: var(--c-accent, #F26B22) !important; }
		.emergency-band__text, .emergency-band span, .emergency-band p { color: #E8C9C7; }
		.emergency-band__icon {
			color: var(--c-accent, #F26B22) !important;
			background: rgba(242, 107, 34, .15) !important;
		}

		/* 停止指摘の追加 dark 対応 — html[data-theme="dark"] と同じ blanket */
		.speech, .speech__body {
			--bubble-bg: var(--c-mist) !important;
			--bubble-color: var(--c-text) !important;
		}
		.speech__body {
			background: var(--c-mist) !important;
			color: var(--c-text) !important;
			border: 1px solid var(--c-border);
		}
		.speech__avatar, .speech__avatar-img {
			background: var(--c-mist-2);
			border-color: var(--c-border) !important;
		}
		.speech__name { color: var(--c-text-mute); }
		.wn-callout { background: var(--c-mist) !important; color: var(--c-text); }
		.wn-callout--info    { background: rgba(91, 138, 255, .12) !important; }
		.wn-callout--memo    { background: rgba(254, 216, 0, .08) !important; }
		.wn-callout--star    { background: rgba(255, 175, 122, .10) !important; }
		.wn-callout--check, .wn-callout--good { background: rgba(86, 196, 138, .12) !important; }
		.wn-callout--warning, .wn-callout--bad { background: rgba(220, 38, 38, .15) !important; }
		.wn-callout--mail    { background: rgba(91, 138, 255, .10) !important; }
		.wn-callout--point   { background: rgba(255, 175, 122, .12) !important; }
		.wn-cta, .wn-cta-inner, .wn-cta-mid, .wn-cta-low, .cta, .cta__inner {
			background: var(--c-mist) !important;
			border-color: var(--c-border) !important;
			color: var(--c-text) !important;
		}
		.wn-cta-title, .wn-cta-body, .cta__title, .cta__body { color: var(--c-text) !important; }
		.wn-author-card, .author-card, .post-author, .post-single__author,
		.post-single__after .wn-profile {
			background: var(--c-mist) !important;
			border-color: var(--c-border) !important;
			color: var(--c-text) !important;
		}
		.wp-block-jinr-blocks-accordion,
		.b--jinr-accordion-item,
		.wp-block-jinr-blocks-accordionchild {
			background: var(--c-mist) !important;
			border-color: var(--c-border) !important;
			color: var(--c-text) !important;
		}
		.a--accordion-title, .a--acc-question { color: var(--c-text) !important; }
		.a--accordion-toggle span { background: var(--c-text) !important; }
		.c--accordion-contents { background: var(--c-mist-2) !important; color: var(--c-text) !important; }
		.post-next, .wn-post-next, .next-preview, .callout--next {
			background: var(--c-mist) !important;
			border-color: var(--c-accent, #F26B22) !important;
			color: var(--c-text) !important;
		}

		/* OS auto-dark でも記事内リンク色 + has-*-color + JIN:R simplebox を統一 */
		.post-single__content a, .entry-content a, .wn-callout a,
		.b--jinr-block a, .wp-block-jinr-blocks-simplebox a,
		.c--simple-box-inner a, .wn-cta a, .speech__body a {
			color: var(--c-accent, #F26B22) !important;
			text-decoration-color: rgba(242, 107, 34, .5) !important;
		}
		.has-text-color.has-white-color, .has-text-color.has-paper-color,
		.has-text-color.has-mist-color, .has-white-color {
			color: var(--c-text) !important;
		}
		.b--jinr-block, .b--jinr-box, .c--simple-box-inner,
		.wp-block-jinr-blocks-simplebox, .wp-block-jinr-blocks-headbox {
			color: var(--c-text) !important;
			background: var(--c-mist) !important;
			border-color: var(--c-border) !important;
			border-left-color: var(--c-accent, #F26B22) !important;
		}
		.b--jinr-block p, .b--jinr-block li, .b--jinr-box p, .b--jinr-box li,
		.c--simple-box-inner p, .c--simple-box-inner li,
		.wp-block-jinr-blocks-simplebox p, .wp-block-jinr-blocks-simplebox li {
			color: var(--c-text) !important;
		}
		.b--jinr-block code, .b--jinr-box code, .c--simple-box-inner code,
		.wp-block-jinr-blocks-simplebox code, .wn-callout code,
		.post-single__content code, .entry-content code {
			background: rgba(255, 255, 255, .08) !important;
			color: #FFE4B0 !important;
		}
		.post-single__content pre code, .entry-content pre code, .code-block-pro code {
			background: transparent !important;
			color: inherit !important;
		}
		.wn-voice dt, .wn-voice-card dt, .wn-voices dt { color: #FF9F8A !important; }
		.skip-link, a.skip-link {
			background: var(--c-mist-2, #243149) !important;
			color: #fff !important;
			border: 2px solid var(--c-accent, #F26B22) !important;
		}
		.wn-hero-tag {
			background: rgba(242, 107, 34, .15) !important;
			color: var(--c-accent, #F26B22) !important;
			border: 1px solid rgba(242, 107, 34, .35) !important;
		}
	}
}

/* ============================================================================
   54.2.x  Embedded tools (.wn-tool) — dark-mode safety net
   ---------------------------------------------------------------------------
   page-tool.php がインラインする単体 HTML ツールは独自の :root 変数を
   持つが、サイト側 [data-theme] と同期しないケースがある（Vue 等が
   独自トグルを持つ + 自前 CSS で `:root[data-theme]` を見ているが、
   var() の解決タイミングがズレるなど）。
   テーマ側で「絶対に白飛びさせない」最終ガードを敷く。
   ============================================================================ */
html[data-theme="dark"] .wn-tool select,
html[data-theme="dark"] .wn-tool input[type="text"],
html[data-theme="dark"] .wn-tool input[type="number"],
html[data-theme="dark"] .wn-tool input[type="email"],
html[data-theme="dark"] .wn-tool input[type="search"],
html[data-theme="dark"] .wn-tool input[type="url"],
html[data-theme="dark"] .wn-tool textarea {
  background: var(--c-mist) !important;
  color: var(--c-text) !important;
  border-color: var(--c-border) !important;
  color-scheme: dark !important;
}
html[data-theme="dark"] .wn-tool .themeToggle,
html[data-theme="dark"] .wn-tool button.themeToggle,
html[data-theme="dark"] .wn-tool .stickyHead .themeToggle,
html[data-theme="dark"] .wn-tool .themeCtl .themeToggle {
  background-color: var(--c-mist) !important;
  background-image: none !important;
  color: var(--c-text) !important;
  border-color: var(--c-border) !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .wn-tool select,
  html:not([data-theme="light"]) .wn-tool input[type="text"],
  html:not([data-theme="light"]) .wn-tool input[type="number"],
  html:not([data-theme="light"]) .wn-tool input[type="email"],
  html:not([data-theme="light"]) .wn-tool input[type="search"],
  html:not([data-theme="light"]) .wn-tool input[type="url"],
  html:not([data-theme="light"]) .wn-tool textarea {
    background: var(--c-mist) !important;
    color: var(--c-text) !important;
    border-color: var(--c-border) !important;
    color-scheme: dark !important;
  }
  html:not([data-theme="light"]) .wn-tool .themeToggle {
    background: var(--c-mist) !important;
    color: var(--c-text) !important;
    border-color: var(--c-border) !important;
  }
}

/* ============================================================================
   54.3  Header auto-hide on scroll-down
   ---------------------------------------------------------------------------
   下スクロールで .site-header--hidden 付与 → translateY(-100%)。
   上スクロール or 最上部 で外して元に戻る。JS は header-hide.js。
   ============================================================================ */
.site-header {
	transition: transform .25s cubic-bezier(.2, .8, .2, 1);
	will-change: transform;
}
.site-header--hidden {
	transform: translateY(-100%) !important;
	pointer-events: none;
}

/* read mode 中は hide 機構を無効化（既に display:none） */
body.is-reading-mode .site-header { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
	.site-header { transition: none; }
	.site-header--hidden { transform: none; }
}

/* ============================================================================
   54. Reading Mode — distraction-free article reading
   ---------------------------------------------------------------------------
   Substack / Medium 風の集中モード。記事右上の「読書モード」ボタンで body に
   .is-reading-mode が付き、ヘッダー・サイドバー・フッターを退避させて本文を
   最大化する。Esc / 再クリックで通常表示に戻る。
   ============================================================================ */
.reading-mode-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--c-mist, #F7F5F0);
	border: 1px solid var(--c-border, #E5E1D6);
	color: var(--c-ink, #1B2547);
	font-size: .82rem;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.reading-mode-toggle:hover,
.reading-mode-toggle:focus-visible {
	background: var(--c-ink, #1B2547);
	color: #fff;
	border-color: var(--c-ink, #1B2547);
	outline: none;
}
.reading-mode-toggle svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* Reading mode active state */
body.is-reading-mode .site-topbar,
body.is-reading-mode .site-header,
body.is-reading-mode .breadcrumb-wrap,
body.is-reading-mode .emergency-band,
body.is-reading-mode .sidebar,
body.is-reading-mode .post-single__share-end,
body.is-reading-mode .post-single__after,
body.is-reading-mode .site-footer,
body.is-reading-mode .footer-signal,
body.is-reading-mode .cta-rail,
body.is-reading-mode #cta-popover,
body.is-reading-mode .bottom-nav,
body.is-reading-mode .reading-progress,
body.is-reading-mode #wpadminbar {
	display: none !important;
}

/* Single column, comfortable reading width */
body.is-reading-mode .layout--with-sidebar {
	grid-template-columns: 1fr !important;
	max-width: 760px;
	margin-inline: auto;
	padding-top: 2rem;
}
body.is-reading-mode .post-single {
	background: transparent;
}
body.is-reading-mode .post-single__content {
	font-size: clamp(17px, 1.05rem + .2vw, 19px);
	line-height: 1.9;
}

/* Floating exit button (top-right of viewport while in reading mode) */
body.is-reading-mode .reading-mode-toggle {
	position: fixed;
	top: max(16px, env(safe-area-inset-top));
	right: max(16px, env(safe-area-inset-right));
	z-index: 9998;
	background: var(--c-paper, #fff);
	border-color: var(--c-ink, #1B2547);
	color: var(--c-ink, #1B2547);
	box-shadow: 0 4px 14px rgba(15, 30, 90, .14);
}

/* 元のボタンは position:fixed で右上に浮かぶ。display:none で消さない。 */

@media (prefers-reduced-motion: reduce) {
	.reading-mode-toggle { transition: none; }
}

/* ============================================================================
   HowTo ブロック (Navigator) — wn/howto + wn/howto-step
   ---------------------------------------------------------------------------
   Google リッチリザルト用の手順ブロック。視覚的にも「ガイド感」を出す。
   ============================================================================ */
.wn-howto {
	background: linear-gradient(180deg, rgba(91, 138, 255, .06), rgba(91, 138, 255, .02));
	border: 1px solid rgba(91, 138, 255, .18);
	border-radius: 14px;
	padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
	margin: 2.5rem 0;
}
.wn-howto__head { margin-bottom: 1.25rem; }
.wn-howto__eyebrow {
	display: inline-block;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .15em;
	color: var(--c-accent, #F26B22);
	background: rgba(242, 107, 34, .12);
	padding: .35rem .85rem;
	border-radius: 999px;
	margin-bottom: .75rem;
}
.wn-howto__intro p {
	margin: 0 0 .5em;
	color: var(--c-text, #1B2547);
	font-size: 1rem;
	line-height: 1.7;
}
.wn-howto__meta {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: .35rem 1rem;
	margin: 1rem 0 0;
	padding: .85rem 1rem;
	background: rgba(91, 138, 255, .08);
	border-radius: 8px;
	font-size: .9rem;
}
.wn-howto__meta dt { font-weight: 700; color: var(--c-ink, #1B2547); margin: 0; }
.wn-howto__meta dd { margin: 0; color: var(--c-text, #1B2547); }

.wn-howto__steps {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: howto-step;
	display: grid;
	gap: 1.25rem;
}
.wn-howto-step {
	counter-increment: howto-step;
	background: #fff;
	border: 1px solid var(--c-border, #dde6f2);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	position: relative;
	padding-left: 4rem;
}
.wn-howto-step::before {
	content: counter(howto-step);
	position: absolute;
	left: 1rem;
	top: 1rem;
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c-accent, #F26B22);
	color: #fff;
	border-radius: 50%;
	font-weight: 800;
	font-size: 1rem;
	line-height: 1;
}
.wn-howto-step__title {
	margin: 0 0 .5rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--c-ink, #1B2547);
	line-height: 1.4;
}
.wn-howto-step__image {
	margin: .75rem 0;
	border-radius: 8px;
	overflow: hidden;
}
.wn-howto-step__image img {
	max-width: 100%;
	height: auto;
	display: block;
}
.wn-howto-step__text p {
	margin: 0 0 .5em;
	font-size: .95rem;
	line-height: 1.75;
	color: var(--c-text, #1B2547);
}
.wn-howto-step__text p:last-child { margin-bottom: 0; }

/* Dark mode */
html[data-theme="dark"] .wn-howto {
	background: linear-gradient(180deg, rgba(91, 138, 255, .10), rgba(91, 138, 255, .03));
	border-color: rgba(91, 138, 255, .25);
}
html[data-theme="dark"] .wn-howto-step {
	background: var(--c-mist, #1A2238);
	border-color: var(--c-border, #2A3550);
}
html[data-theme="dark"] .wn-howto-step__title { color: var(--c-text, #E8EEF7); }
html[data-theme="dark"] .wn-howto-step__text p { color: var(--c-text, #E8EEF7); }
html[data-theme="dark"] .wn-howto__intro p { color: var(--c-text, #E8EEF7); }
html[data-theme="dark"] .wn-howto__meta { background: rgba(91, 138, 255, .12); }
html[data-theme="dark"] .wn-howto__meta dt,
html[data-theme="dark"] .wn-howto__meta dd { color: var(--c-text, #E8EEF7); }

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .wn-howto {
		background: linear-gradient(180deg, rgba(91, 138, 255, .10), rgba(91, 138, 255, .03));
		border-color: rgba(91, 138, 255, .25);
	}
	html:not([data-theme="light"]) .wn-howto-step {
		background: var(--c-mist, #1A2238);
		border-color: var(--c-border, #2A3550);
	}
	html:not([data-theme="light"]) .wn-howto-step__title,
	html:not([data-theme="light"]) .wn-howto-step__text p,
	html:not([data-theme="light"]) .wn-howto__intro p { color: var(--c-text, #E8EEF7); }
	html:not([data-theme="light"]) .wn-howto__meta { background: rgba(91, 138, 255, .12); }
	html:not([data-theme="light"]) .wn-howto__meta dt,
	html:not([data-theme="light"]) .wn-howto__meta dd { color: var(--c-text, #E8EEF7); }
}

/* ============================================================================
   wn-codepen-demo — Skeleton + 遅延ロード + 自動高さ調整 (P1+P2+P3)
   ----------------------------------------------------------------------------
   新版設計:
   - スケルトン: ロード前は背景グラデ + シマー + "Loading demo…" 表示
   - ロード後: iframe をフェードイン (wn-cpdemo--loaded クラス)
   - 高さ: min-height のみで固定。JS が style.height で実 demo に追随
   - codepen-demos.js が制御する (assets/js/codepen-demos.js)
   ============================================================================ */
.wn-codepen-demo {
	margin: 1.5em 0;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(242, 107, 34, .04), rgba(58, 107, 160, .04));
	min-height: 380px;
}
/* スケルトン: ロード前のグラデ + シマー + ラベル */
.wn-codepen-demo:not(.wn-cpdemo--has-loaded)::before {
	content: "Loading demo…";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(27, 37, 71, .35);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	pointer-events: none;
	z-index: 0;
}
.wn-codepen-demo:not(.wn-cpdemo--has-loaded)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, .5) 50%,
		rgba(255, 255, 255, 0) 70%);
	background-size: 200% 100%;
	animation: wn-cpdemo-shimmer 1.6s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}
@keyframes wn-cpdemo-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.wn-codepen-demo iframe {
	width: 100%;
	height: 540px;        /* 初期高さ (JS で実 demo に追随) */
	min-height: 360px;
	max-height: 640px;    /* デスクトップ型キャップ — 超える demo は iframe 内スクロール */
	border: 1px solid var(--c-border, #ddd);
	border-radius: 10px;
	display: block;
	background: #fff;
	position: relative;
	z-index: 1;
	opacity: 0;
	transition: opacity .35s ease, height .25s ease;
}
.wn-codepen-demo iframe.wn-cpdemo--loaded,
.wn-codepen-demo.wn-cpdemo--has-loaded iframe {
	opacity: 1;
}
/* レスポンシブ最小高さ */
@media (max-width: 600px) {
	.wn-codepen-demo { min-height: 320px; }
	.wn-codepen-demo iframe { height: 400px; }
}
/* ダーク対応 */
html[data-theme="dark"] .wn-codepen-demo {
	background: linear-gradient(135deg, rgba(255, 176, 112, .06), rgba(74, 138, 200, .06));
}
html[data-theme="dark"] .wn-codepen-demo:not(.wn-cpdemo--has-loaded)::before {
	color: rgba(255, 255, 255, .5);
}
html[data-theme="dark"] .wn-codepen-demo:not(.wn-cpdemo--has-loaded)::after {
	background: linear-gradient(110deg,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, .08) 50%,
		rgba(255, 255, 255, 0) 70%);
	background-size: 200% 100%;
}
html[data-theme="dark"] .wn-codepen-demo iframe {
	border-color: rgba(255, 255, 255, .14);
}

/* ============================================================================
   RESPONSIVE HARDENING — iPhone 5S (320px) safety net
   ----------------------------------------------------------------------------
   320px viewport で発生する overflow / アニメ起動不全を吸収。
   - .wn-fx-reveal が opacity:0 で固まる事故への fallback (animation-timeline 未発火環境)
   - shiki / コードブロックの横スクロール許容
   - インライン長文 (strong / code / a) の word-break
   - .wn-author-card, .wn-svc, .wn-voices の窮屈緩和
   - .wn-track-record__hero / .wn-trouble / .linkbox-grid / .wn-pillar-list の 1 列化
   - .wn-series-nav 子要素の改行許容
   ============================================================================ */

/* --- (1) .wn-fx-reveal フェールセーフ -------------------------------------- */
/* animation-timeline: view() が未サポート、または何らかの理由で発火しなかった
   ブラウザでは、要素を即時表示する。reduced-motion を尊重しつつ、
   「永遠に opacity:0」を防ぐ。 */
@supports not (animation-timeline: view()) {
	.wn-fx-reveal,
	.reveal-init.wn-fx-reveal {
		opacity: 1 !important;
		transform: none !important;
		visibility: visible !important;
	}
}
/* 強制セーフティ: ロード後 4 秒経過 + html.wn-motion-on が無い場合 → 即時表示 */
html:not(.wn-motion-on) .wn-fx-reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* --- (2) コードブロック横スクロール許容 ------------------------------------ */
.shiki,
pre.shiki,
pre[class*="language-"],
.wp-block-code,
.wp-block-code pre,
.prose pre {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}
.shiki code,
.wp-block-code pre code {
	display: block;
	min-width: max-content;
}

/* --- (3) インライン長文の折り返し ------------------------------------------ */
.entry-content strong,
.entry-content code,
.entry-content a,
.prose strong,
.prose code,
.prose a {
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* ============================================================================
   iPhone 5S 専用 — 320px 〜 359px
   ============================================================================ */
@media (max-width: 359px) {

	/* 多列 grid の 1 列化 */
	.wn-track-record__hero,
	.wn-trouble,
	.linkbox-grid,
	.wn-pillar-list,
	.wn-voices__grid,
	.error-404__sections {
		grid-template-columns: 1fr !important;
		gap: .75rem !important;
	}
	.wn-track-record__stats {
		grid-template-columns: 1fr 1fr !important;
		gap: .5rem !important;
	}

	/* author-card の窮屈緩和 + role を改行 */
	.wn-author-card {
		padding: 1rem !important;
		margin: 2rem 0 0 !important;
	}
	.wn-author-card__inner {
		grid-template-columns: 72px 1fr !important;
		gap: .75rem !important;
	}
	.wn-author-card__photo {
		width: 72px !important;
		height: 72px !important;
	}
	.wn-author-card__name {
		font-size: .95rem !important;
		line-height: 1.45 !important;
	}
	.wn-author-card__role {
		display: block !important;
		margin: .2em 0 0 !important;
		font-size: .7rem !important;
	}
	.wn-author-card__bio {
		font-size: .85rem !important;
		line-height: 1.7 !important;
	}
	.wn-author-card__creds {
		font-size: .75rem !important;
	}
	.wn-author-card__links {
		font-size: .8rem !important;
		gap: .25rem .75rem !important;
	}

	/* services / voices カードの padding 緩和 */
	.wn-svc,
	.wn-voices__card {
		padding: 1rem !important;
	}
	.wn-svc-title { font-size: .95rem !important; }
	.wn-svc-body  { font-size: .82rem !important; line-height: 1.65 !important; }
	.wn-voices__head,
	.wn-voices__head-meta,
	.wn-voices__rating,
	.wn-voices__ba,
	.wn-voices__body,
	.wn-voices__foot {
		max-width: 100% !important;
	}

	/* 連載ナビ: 長文タイトルを改行可に */
	.wn-series-nav,
	.wn-series-nav__list,
	.wn-series-nav__item,
	.wn-series-nav__ep-title,
	.wn-series-nav__here {
		word-break: break-word !important;
		overflow-wrap: anywhere !important;
	}
	.wn-series-nav { padding: 1rem 1.1rem 1.15rem !important; }

	/* CTA ボタン / バッジの nowrap 緩和 */
	.wn-btn,
	.wn-trust-num,
	.wn-svc.is-recommended::before,
	.wn-voices__tag,
	.wn-series-nav__here {
		white-space: normal !important;
	}

	/* 本文系: 長い英字単語 / URL を強制改行 */
	.entry-content,
	.prose {
		word-break: break-word;
		overflow-wrap: anywhere;
	}

	/* 大きな装飾フォントを縮小 */
	.prose blockquote::before { font-size: 2.4rem !important; }
	.wn-voices__card::before  { font-size: 2.8rem !important; }

	/* compare/pricing カード系: 既に has(:nth-child) で repeat(2/3) 指定があるが、
	   320px では 1 列に統一 */
	.wn-compare:has(> :nth-child(2):last-child),
	.wn-pricing:has(> :nth-child(2):last-child),
	.wn-pricing:has(> :nth-child(3):last-child),
	.wn-flow:has(> :nth-child(2):last-child),
	.wn-flow:has(> :nth-child(3):last-child),
	.wn-flow:has(> :nth-child(4):last-child),
	.wn-cases:has(> :nth-child(2):last-child),
	.wn-cases:has(> :nth-child(3):last-child),
	.wn-cases:has(> :nth-child(4):last-child) {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================================
   ハンバーガー前 (主流 360-480px) でも保険として弱適用
   ============================================================================ */
@media (max-width: 480px) {
	/* author-card は 480px 以下でも grid 1列の方が読みやすい場合あり */
	.wn-track-record__hero,
	.wn-trouble {
		grid-template-columns: 1fr !important;
	}
	/* インライン要素の折り返し (480 以下全般) */
	.entry-content strong,
	.entry-content code,
	.entry-content a {
		word-break: break-word;
		overflow-wrap: anywhere;
	}
}

/* ============================================================================
   ヘッダー CTA「相談する→」: スマホ (≤ 767px) で非表示
   ----------------------------------------------------------------------------
   PC (≥ 1024px) とタブレット (768-1023px) では表示。
   スマホでは ハンバーガーメニュー + 固定 CTA バーで代替するため、
   ヘッダー右上の「相談する→」は外す。
   既存の @media (max-width: 1023.98px) ブロックで !important 強制表示
   されているため、より狭い max-width: 767px で !important 上書きする。
   ============================================================================ */
@media (max-width: 767px) {
	.site-header__cta {
		display: none !important;
	}
}

/* ============================================================================
   FOOTER B 案: 4 列構成 (2026-05-21)
   - 解決する / 学ぶ・探す / WEB先案内ネットワーク / サイト情報
   - 外部リンク (.com / .store) に「↗」マーカー + 説明文
   - 「WEB先案内ネットワーク」列はアクセントで戦略強調
   ============================================================================ */
.site-footer__col-link-label {
	display: inline-block;
	font-weight: 600;
}
.site-footer__col-link-ext {
	font-size: .85em;
	opacity: .7;
	margin-left: .15em;
}
.site-footer__col-link-desc {
	display: block;
	font-size: .75rem;
	color: rgba(255, 255, 255, .55);
	margin-top: .15rem;
	line-height: 1.45;
}

/* WEB先案内ネットワーク列だけ: 戦略強調 */
.site-footer__col:has(.site-footer__col-link-desc) .site-footer__col-title {
	color: var(--c-accent, #FF6F3D);
}
.site-footer__col:has(.site-footer__col-link-desc) .site-footer__col-links a {
	padding: .55rem .75rem;
	border-radius: 8px;
	border: 1px solid rgba(255, 209, 63, .18);
	background: linear-gradient(135deg, rgba(242, 107, 34, 0.12), rgba(242, 107, 34, 0.03));
	transition: background .15s ease, border-color .15s ease, transform .15s ease;
	display: block;
}
.site-footer__col:has(.site-footer__col-link-desc) .site-footer__col-links a:hover {
	background: linear-gradient(135deg, rgba(242, 107, 34, 0.22), rgba(242, 107, 34, 0.08));
	border-color: rgba(255, 209, 63, .4);
	transform: translateY(-1px);
	padding-left: .75rem;
}

/* 1024+ で 4 列にしたとき、gap を調整 */
@media (min-width: 1024px) {
	.site-footer__cols { gap: 1.5rem 1.75rem !important; }
}

/* ============================================================================
   MOBILE DRAWER — 全面リデザイン (2026-05-21)
   ----------------------------------------------------------------------------
   - 3D カラーアイコンを全項目に配置 (inc/menus.php の navigator_menu_icon で注入)
   - 親 / 子のタイポ階層分離 (font-size, weight, indent, left border)
   - CTA を緊急 1 強 + ヒアリングは控えめテキストリンクに
   - 運営者ブロック (アバター + 名前 + 肩書き + プロフィールリンク)
   - アクティブステート (current-menu-item) はオレンジ左ボーダー + 背景グラデ
   - 外部リンク ↗ 表示 (.mobile-drawer__ext)
   - サブメニューをアコーディオン化 (.menu-item-has-children.is-open で展開)
   ============================================================================ */

/* === メニュー項目の構造 === */
.mobile-drawer__list {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: .1rem;
}
.mobile-drawer__list li { list-style: none; }
.mobile-drawer__list li > a {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: .85rem !important;
	padding: .8rem .9rem !important;
	color: rgba(255,255,255,.92) !important;
	text-decoration: none;
	font-size: 1rem; font-weight: 600;
	border-radius: 10px;
	transition: background .15s ease, color .15s ease, transform .15s ease;
	position: relative;
	min-height: 48px;
	border: none !important;
	border-bottom: none !important;
	border-top: none !important;
}
/* main.css の "→" 矢印を非親項目のみで打ち消し (親項目には別途 chevron を適用) */
.mobile-drawer__list li:not(.menu-item-has-children) > a::after { content: none !important; }
/* 旧 li 罫線を打ち消し */
.mobile-drawer__list li,
.mobile-drawer__list li:first-child {
	border-top: none !important;
	border-bottom: none !important;
}
.mobile-drawer__list li > a:hover,
.mobile-drawer__list li > a:focus-visible {
	background: rgba(242, 107, 34, 0.14);
	color: #FFD23F !important;
	outline: none;
}
/* 親項目: 太く・少し大きく */
.mobile-drawer__list > li > a {
	font-size: 1.05rem; font-weight: 700;
}

/* === 子項目 (sub-menu) === */
.mobile-drawer__list .sub-menu {
	list-style: none; padding: 0;
	margin: .1rem 0 .4rem 1.2rem;
	border-left: 2px solid rgba(255, 209, 63, .25);
	padding-left: .6rem;
	max-height: 0; overflow: hidden;
	transition: max-height .28s ease, opacity .2s ease;
	opacity: 0;
}
.mobile-drawer__list .menu-item-has-children.is-open > .sub-menu {
	max-height: 720px;
	opacity: 1;
}
.mobile-drawer__list .sub-menu li > a {
	font-size: .9rem; font-weight: 500;
	padding: .55rem .7rem;
	min-height: 40px;
	color: rgba(255,255,255,.78) !important;
}
.mobile-drawer__list .sub-menu li > a:hover {
	color: #FFD23F !important;
	background: rgba(242, 107, 34, 0.09);
}

/* === 3D カラーアイコン === */
.wn-menu-icon {
	flex: 0 0 28px;
	width: 28px; height: 28px;
	display: inline-block;
}
.wn-menu-icon--dot {
	flex: 0 0 8px;
	width: 8px; height: 8px;
	background: rgba(255, 209, 63, .55);
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(255, 209, 63, .15);
	margin-left: .25rem; margin-right: .35rem;
}
.mobile-drawer__list .sub-menu .wn-menu-icon { width: 22px; height: 22px; flex: 0 0 22px; }

/* === アクティブステート === */
.mobile-drawer__list .current-menu-item > a,
.mobile-drawer__list .current-menu-ancestor > a,
.mobile-drawer__list .current_page_item > a {
	background: linear-gradient(90deg, rgba(242, 107, 34, 0.22), rgba(242, 107, 34, 0));
	color: #fff !important;
	box-shadow: inset 3px 0 0 #F26B22;
	font-weight: 700;
}

/* === 親項目の chevron (アコーディオン開閉インジケータ) === */
.mobile-drawer__list .menu-item-has-children > a::after {
	content: '';
	margin-left: auto;
	width: 14px; height: 14px;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></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='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center/contain no-repeat;
	transition: transform .22s ease;
	opacity: .65;
}
.mobile-drawer__list .menu-item-has-children.is-open > a::after {
	transform: rotate(180deg);
	opacity: 1;
}
/* 旧 "→" 矢印を打ち消す */
.mobile-drawer__list li > a::before { content: none; }
.mobile-drawer__list li:not(.menu-item-has-children) > a::after { content: none !important; }

/* === 運営者ブロック === */
.mobile-drawer__operator {
	display: flex; align-items: center; gap: .9rem;
	padding: .9rem 1rem;
	background: linear-gradient(135deg, rgba(242, 107, 34, 0.20), rgba(242, 107, 34, 0.05));
	border: 1px solid rgba(242, 107, 34, 0.4);
	border-radius: 14px;
	text-decoration: none;
	margin: 1rem 0 .8rem;
	transition: transform .15s, box-shadow .15s, border-color .15s;
}
.mobile-drawer__operator:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0,0,0,.22);
	border-color: rgba(242, 107, 34, 0.7);
}
.mobile-drawer__operator-photo {
	width: 56px; height: 56px; border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 2px 8px rgba(0,0,0,.22);
	flex-shrink: 0;
	border: 2px solid rgba(255,255,255,.18);
}
.mobile-drawer__operator-text {
	flex: 1; display: flex; flex-direction: column; gap: 2px;
	min-width: 0;
}
.mobile-drawer__operator-eyebrow {
	font-size: .68rem; font-weight: 700; letter-spacing: .14em;
	color: #F26B22; text-transform: uppercase;
}
.mobile-drawer__operator-name { font-size: 1.05rem; font-weight: 800; color: #fff; }
.mobile-drawer__operator-role { font-size: .76rem; color: rgba(255,255,255,.72); line-height: 1.4; }
.mobile-drawer__operator-chev {
	color: #F26B22; font-weight: 700;
	font-size: 1.25rem;
	flex-shrink: 0;
}

/* === CTA: 緊急復旧 主 / ヒアリング 副 === */
.mobile-drawer__cta {
	display: flex; flex-direction: column; gap: .5rem;
	margin: .25rem 0 1rem;
}
.mobile-drawer__cta-primary {
	display: flex; align-items: center; gap: .85rem;
	padding: .95rem 1.1rem;
	background: linear-gradient(135deg, #E12A22 0%, #8C0303 100%);
	border-radius: 12px;
	text-decoration: none;
	color: #fff !important;
	box-shadow: 0 4px 16px rgba(216, 33, 27, 0.42);
	transition: transform .15s, box-shadow .15s;
	border: 1px solid rgba(255,255,255,.14);
}
.mobile-drawer__cta-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 22px rgba(216, 33, 27, 0.58);
	color: #fff !important;
}
.mobile-drawer__cta-icon { flex-shrink: 0; display: inline-flex; }
.mobile-drawer__cta-text {
	display: flex; flex-direction: column; gap: 2px;
	flex: 1; min-width: 0;
}
.mobile-drawer__cta-text strong {
	font-size: .98rem; font-weight: 800; line-height: 1.25;
}
.mobile-drawer__cta-text small {
	font-size: .72rem; font-weight: 500; opacity: .92; line-height: 1.4;
}

.mobile-drawer__cta-secondary {
	display: inline-block; text-align: center;
	padding: .55rem .8rem;
	color: rgba(255,255,255,.85) !important;
	font-size: .9rem; font-weight: 600;
	text-decoration: underline; text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	margin: 0 auto;
}
.mobile-drawer__cta-secondary:hover { color: #FFD23F !important; }

/* === 外部リンク矢印 === */
.mobile-drawer__ext {
	font-size: .85em; opacity: .65; margin-left: .15em;
	display: inline-block;
}

/* === 検索バー === */
.mobile-drawer__search input[type="search"]::placeholder {
	color: rgba(255,255,255,.55);
	font-size: .92em;
}

/* === ロゴ脇のワードマーク画像を白く (navy 背景での可読性) === */
.mobile-drawer__brand .site-brand__wordmark,
.site-brand--drawer .site-brand__wordmark {
	filter: brightness(0) invert(1);
}

/* === SNS リンクのうち、ワードマーク表示するもの (coconala / webnala) は
       フッターと同じ navy 160×40 capsule に統一 === */
.mobile-drawer__sns {
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: .55rem !important;
	padding-top: 1rem;
	border-top: 1px solid rgba(255,255,255,.12);
	margin-top: 1rem;
}
.mobile-drawer__sns-link--wordmark {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 160px !important;
	height: 40px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 22px !important;
	background: linear-gradient(180deg, #4A5570 0%, #2D3548 100%) !important;
	color: #fff !important;
	gap: 0;
	transition: background .15s ease, transform .15s ease;
}
.mobile-drawer__sns-link--wordmark:hover,
.mobile-drawer__sns-link--wordmark:focus-visible {
	background: linear-gradient(180deg, #5A6580 0%, #3D4558 100%) !important;
	color: #fff !important;
	transform: translateY(-1px);
}
.mobile-drawer__sns-link--wordmark svg {
	width: auto !important;
	height: 22px;
	fill: currentColor;
}
.mobile-drawer__sns-link--wordmark .mobile-drawer__ext { display: none; }

/* === 320px 適応 === */
@media (max-width: 359px) {
	.mobile-drawer__list li > a { padding: .7rem .7rem; font-size: .95rem; gap: .65rem; }
	.mobile-drawer__list > li > a { font-size: 1rem; }
	.wn-menu-icon { width: 24px; height: 24px; flex: 0 0 24px; }
	.mobile-drawer__operator { padding: .75rem .85rem; gap: .7rem; }
	.mobile-drawer__operator-photo { width: 48px; height: 48px; }
	.mobile-drawer__operator-name { font-size: 1rem; }
	.mobile-drawer__operator-role { font-size: .72rem; }
	.mobile-drawer__cta-primary { padding: .85rem .95rem; gap: .7rem; }
	.mobile-drawer__cta-text strong { font-size: .92rem; }
	.mobile-drawer__cta-text small { font-size: .68rem; }
}


/* ============================================================================
   Layout safety net (2026-05-26 追加)
   ---------------------------------------------------------------------------
   .layout--with-sidebar が 1fr + 350px の grid なのに、article 列の中の
   要素 (特に旧JIN:R simplebox を置き換えた wp:group 内の code-block-pro)
   が硬く幅を主張して grid を崩し、サイドバーを下に押し落とすケースを防ぐ。

   対策:
   1. 記事列に overflow-x: clip — 横はみ出しがあっても列の幅を超えない
   2. 記事列内の主要ブロックに max-width: 100% — 親より広くならない
   3. <pre> / code-block-pro は overflow-x: auto で横スクロールを許す
   ============================================================================ */
.layout__main {
    min-width: 0;
    overflow-x: clip;
}
.layout__main .wp-block-group,
.layout__main .wp-block-kevinbatdorf-code-block-pro,
.layout__main figure.wp-block-table,
.layout__main figure.wp-block-image,
.layout__main pre {
    max-width: 100%;
}
.layout__main .wp-block-kevinbatdorf-code-block-pro,
.layout__main pre {
    overflow-x: auto;
}
/* code-block-pro の内部 code 要素の min-width 強制を打ち消す
   (デフォルトで --cbp-block-width: 100% だが、計算が破綻するケースがある) */
.layout__main .wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre code {
    min-width: 0;
}

/* Off-canvas drawer should not contribute to mobile document width while closed. */
.mobile-drawer {
    overflow: hidden;
}

/* ============================================================================
   Grid placement 強制 (2026-05-26 追加 / 第5・6回のサイドバー回り込み修復)
   ---------------------------------------------------------------------------
   .layout--with-sidebar 内に layout__main / sidebar 以外の直接子要素が
   入り込んだ場合、grid auto-placement で sidebar が下の row に押される。
   layout__main を col1 row1、sidebar を col2 row1 に明示固定し、想定外の
   余計な直接子要素は row2 以降に流す（auto に任せる）。
   ============================================================================ */
@media (min-width: 1024px) {
  .layout--with-sidebar > .layout__main {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
  }
  .layout--with-sidebar > .sidebar {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
  }
  /* 想定外の余計な grid item は非表示（HTML 構造破綻による「迷子」要素対策） */
  .layout--with-sidebar > :not(.layout__main):not(.sidebar) {
    display: none !important;
  }
}

/* ============================================================================
   Recovery pricing decision UI (2026-05-28 art-direction audit)
   ---------------------------------------------------------------------------
   復旧料金の中核セクションを、横スクロール表ではなく意思決定カードとして見せる。
   モバイルでも価格・対応範囲・備考が同時に読めることを優先する。
   ============================================================================ */
#recovery-pricing,
#emergency-vs-recovery,
#emergency-pricing {
  scroll-margin-top: clamp(96px, 12vw, 156px);
}

.wn-recovery-pricing-section .wn-section-lede {
  max-width: 760px;
  word-break: normal;
  overflow-wrap: anywhere;
}

#emergency-vs-recovery .wn-section-lede,
#emergency-pricing .wn-section-lede {
  word-break: normal;
  overflow-wrap: anywhere;
}

.wn-recovery-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 280px));
  justify-content: center;
  gap: clamp(.85rem, 1vw, 1.15rem);
  margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}

.wn-recovery-option {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  padding: clamp(1.05rem, .9rem + .7vw, 1.45rem);
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(15, 30, 90, .07);
}

.wn-recovery-option.is-standard {
  border: 2px solid rgba(27, 37, 71, .72);
  box-shadow: 0 18px 44px rgba(15, 30, 90, .14);
}

.wn-recovery-option.is-urgent {
  border-color: rgba(242, 107, 34, .45);
  background:
    linear-gradient(180deg, rgba(255, 246, 239, .9), rgba(255, 255, 255, .98));
}

.wn-recovery-option__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: .35rem 1rem;
  border-radius: 100px;
  background: var(--c-accent);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(242, 107, 34, .28);
  white-space: nowrap;
}

.wn-recovery-option__head {
  display: grid;
  gap: .65rem;
  margin-bottom: 1rem;
}

.wn-recovery-option__kicker {
  margin: 0 0 .28rem;
  color: var(--c-accent);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.4;
}

.wn-recovery-option__title {
  margin: 0;
  color: var(--c-ink);
  font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem);
  line-height: 1.35;
}

.wn-recovery-option__price {
  margin: 0;
  color: var(--c-ink);
  font-size: clamp(1.55rem, 1.18rem + 1.35vw, 2.15rem);
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.wn-recovery-scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin: .35rem 0 1rem;
}

.wn-scope-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 44px;
  padding: .58rem .65rem;
  border: 1px solid var(--c-border-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, .74);
  color: var(--c-text);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.35;
}

.wn-scope-chip > span:first-child {
  white-space: nowrap;
  word-break: keep-all;
}

.wn-scope-chip__mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 1.65rem;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 900;
  line-height: 1;
}

.wn-scope-chip[data-state="yes"] .wn-scope-chip__mark {
  background: rgba(53, 122, 90, .12);
  color: #256347;
}

.wn-scope-chip[data-state="partial"] .wn-scope-chip__mark {
  background: rgba(220, 38, 38, .10);
  color: #B42318;
}

.wn-scope-chip[data-state="no"] .wn-scope-chip__mark {
  background: rgba(220, 38, 38, .10);
  color: #B42318;
}

.wn-recovery-option__note {
  margin: auto 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--c-border-soft);
  color: var(--c-text);
  font-size: .92rem;
  line-height: 1.75;
}

.wn-recovery-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem .9rem;
  width: min(100%, 900px);
  margin: 1.15rem auto 0;
  color: var(--c-text-mute);
  font-size: .9rem;
  line-height: 1.7;
  text-align: center;
}

.wn-recovery-legend strong {
  color: var(--c-ink);
}

@media (max-width: 1120px) {
  .wn-recovery-options {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 280px));
  }
}

@media (max-width: 680px) {
  .wn-recovery-pricing-section .wn-wrap {
    width: min(100% - 2rem, var(--wrap, 1120px));
  }

  .wn-recovery-options {
    grid-template-columns: 1fr;
    gap: .9rem;
  }

  .wn-recovery-option {
    padding: 1.05rem;
    border-radius: 12px;
  }

  .wn-recovery-option__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: .45rem;
  }

  .wn-recovery-option__price {
    text-align: left;
    white-space: nowrap;
    font-size: clamp(1.42rem, 8vw, 1.9rem);
  }

  .wn-scope-chip {
    font-size: .84rem;
  }

  body.is-page.is-slug-wp-emergency .sos-fab,
  body.is-page.is-slug-wp-recovery-service .sos-fab {
    display: none !important;
  }
}

@media (max-width: 389px) {
  .wn-recovery-scope {
    grid-template-columns: 1fr;
  }

  .wn-recovery-option__price { white-space: normal; }
}

html[data-theme="dark"] .wn-recovery-option {
  background: var(--c-mist);
  border-color: var(--c-border);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .wn-recovery-option.is-standard {
  border-color: rgba(232, 238, 247, .6);
}

html[data-theme="dark"] .wn-recovery-option.is-urgent {
  background:
    linear-gradient(180deg, rgba(37, 45, 67, .98), rgba(26, 34, 56, .98));
  border-color: rgba(242, 107, 34, .55);
}

html[data-theme="dark"] .wn-scope-chip {
  background: rgba(255, 255, 255, .045);
  border-color: var(--c-border);
}

html[data-theme="dark"] .wn-scope-chip[data-state="partial"] .wn-scope-chip__mark,
html[data-theme="dark"] .wn-scope-chip[data-state="no"] .wn-scope-chip__mark {
  background: rgba(255, 126, 103, .14);
  color: #FF9B8A;
}

/* ============================================================================
   Advanced guide support CTA
   The block is embedded in multiple articles. Keep it readable inside the
   narrow post column by using a featured first card + two compact options.
   ============================================================================ */
.wn-series-cta {
  container-type: inline-size;
  margin-top: clamp(2.25rem, 1.75rem + 1.8vw, 3.25rem) !important;
  padding: clamp(1.25rem, 1rem + 1.4vw, 1.8rem) !important;
  background:
    linear-gradient(180deg, rgba(247, 250, 255, .98), rgba(255, 255, 255, .96)) !important;
  border: 1px solid rgba(196, 210, 236, .9) !important;
  border-radius: 8px !important;
  box-shadow: 0 16px 38px rgba(15, 30, 90, .08);
}

.wn-series-cta__title,
.wn-series-cta > h2,
.wn-series-cta > h3 {
  margin: 0 0 .55rem !important;
  color: var(--c-ink);
  font-size: clamp(1.18rem, 1rem + .7vw, 1.5rem);
  line-height: 1.38;
  letter-spacing: 0;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.wn-series-cta > p {
  max-width: 46rem;
  margin: 0 !important;
  color: var(--c-text-mute);
  font-size: .94rem;
  line-height: 1.85;
  letter-spacing: 0;
}

.wn-series-cta__cols,
.wn-series-cta > .wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem !important;
  align-items: stretch !important;
  margin: 1.15rem 0 0 !important;
}

.wn-series-cta__cols > .wp-block-column,
.wn-series-cta > .wp-block-columns > .wp-block-column {
  flex-basis: auto !important;
  flex-grow: initial !important;
  min-width: 0;
}

.wn-series-cta__col,
.wn-series-cta > .wp-block-columns > .wp-block-column {
  position: relative;
  display: grid !important;
  grid-template-rows: auto 1fr auto;
  gap: .62rem;
  min-height: 100%;
  padding: 1rem !important;
  overflow: hidden;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(205, 217, 238, .9) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 24px rgba(15, 30, 90, .06);
}

.wn-series-cta__col::before,
.wn-series-cta > .wp-block-columns > .wp-block-column::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #5C7FD8;
}

.wn-series-cta__col--emergency,
.wn-series-cta > .wp-block-columns > .wp-block-column:nth-child(1) {
  grid-column: 1 / -1;
  background:
    linear-gradient(180deg, rgba(255, 248, 246, .98), rgba(255, 255, 255, .96)) !important;
  border-color: rgba(237, 171, 159, .75) !important;
}

.wn-series-cta__col--emergency::before,
.wn-series-cta > .wp-block-columns > .wp-block-column:nth-child(1)::before {
  background: #B33A33;
}

.wn-series-cta__col--maintenance::before,
.wn-series-cta > .wp-block-columns > .wp-block-column:nth-child(3)::before {
  background: #3B7B5A;
}

.wn-series-cta__col > p,
.wn-series-cta > .wp-block-columns > .wp-block-column > p {
  margin: 0 !important;
  letter-spacing: 0 !important;
}

.wn-series-cta__col > p:first-of-type,
.wn-series-cta > .wp-block-columns > .wp-block-column > p:first-of-type {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 1.9rem;
  padding-left: .2rem;
  color: var(--c-ink) !important;
  font-size: .98rem !important;
  font-weight: 800 !important;
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: normal;
}

.wn-series-cta__col--emergency > p:first-of-type,
.wn-series-cta > .wp-block-columns > .wp-block-column:nth-child(1) > p:first-of-type {
  color: #A8342E !important;
}

.wn-series-cta__col > p:nth-of-type(2),
.wn-series-cta > .wp-block-columns > .wp-block-column > p:nth-of-type(2) {
  color: var(--c-text);
  font-size: .91rem !important;
  line-height: 1.72;
  word-break: normal;
  overflow-wrap: break-word;
}

.wn-series-cta__col--emergency > p:nth-of-type(2) br,
.wn-series-cta > .wp-block-columns > .wp-block-column:nth-child(1) > p:nth-of-type(2) br {
  display: none;
}

.wn-series-cta__col > p:last-of-type,
.wn-series-cta > .wp-block-columns > .wp-block-column > p:last-of-type {
  align-self: end;
  padding-top: .2rem;
}

.wn-series-cta__col a,
.wn-series-cta > .wp-block-columns > .wp-block-column a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.45rem;
  max-width: 100%;
  padding: .58rem .82rem;
  border-radius: 8px;
  background: rgba(15, 30, 90, .06);
  color: var(--c-ink) !important;
  font-size: .88rem;
  font-weight: 800 !important;
  line-height: 1.35;
  text-align: center;
  text-decoration: none !important;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.wn-series-cta__col a:hover,
.wn-series-cta > .wp-block-columns > .wp-block-column a:hover {
  background: var(--c-ink);
  color: #fff !important;
}

.wn-series-cta__col--emergency a,
.wn-series-cta > .wp-block-columns > .wp-block-column:nth-child(1) a {
  background: rgba(179, 58, 51, .1);
  color: #A8342E !important;
}

.wn-series-cta__col--emergency a:hover,
.wn-series-cta > .wp-block-columns > .wp-block-column:nth-child(1) a:hover {
  background: #A8342E;
  color: #fff !important;
}

@container (min-width: 860px) {
  .wn-series-cta__cols,
  .wn-series-cta > .wp-block-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wn-series-cta__col--emergency,
  .wn-series-cta > .wp-block-columns > .wp-block-column:nth-child(1) {
    grid-column: auto;
  }
}

@container (max-width: 560px) {
  .wn-series-cta__cols,
  .wn-series-cta > .wp-block-columns {
    grid-template-columns: 1fr;
  }

  .wn-series-cta__col--emergency,
  .wn-series-cta > .wp-block-columns > .wp-block-column:nth-child(1) {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .wn-series-cta {
    padding: 1rem !important;
  }

  .wn-series-cta__cols,
  .wn-series-cta > .wp-block-columns {
    grid-template-columns: 1fr;
  }

  .wn-series-cta__col--emergency,
  .wn-series-cta > .wp-block-columns > .wp-block-column:nth-child(1) {
    grid-column: auto;
  }
}

html[data-theme="dark"] .wn-series-cta {
  background:
    linear-gradient(180deg, rgba(28, 36, 58, .98), rgba(21, 28, 48, .98)) !important;
  border-color: rgba(232, 238, 247, .16) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .wn-series-cta > p {
  color: rgba(232, 238, 247, .78);
}

html[data-theme="dark"] .wn-series-cta__col,
html[data-theme="dark"] .wn-series-cta > .wp-block-columns > .wp-block-column {
  background: rgba(255, 255, 255, .055) !important;
  border-color: rgba(232, 238, 247, .16) !important;
}

html[data-theme="dark"] .wn-series-cta__col > p:nth-of-type(2),
html[data-theme="dark"] .wn-series-cta > .wp-block-columns > .wp-block-column > p:nth-of-type(2) {
  color: rgba(232, 238, 247, .86);
}

html[data-theme="dark"] .wn-series-cta__col a,
html[data-theme="dark"] .wn-series-cta > .wp-block-columns > .wp-block-column a {
  background: rgba(255, 255, 255, .08);
  color: #F4F7FF !important;
}

html[data-theme="dark"] .wn-series-cta__col a:hover,
html[data-theme="dark"] .wn-series-cta > .wp-block-columns > .wp-block-column a:hover {
  background: #F4F7FF;
  color: #11182A !important;
}

/* ============================================================================
   WEB Navigator network footer
   Mirrors the cross-site footer strip used on the official site and webnala.
   ============================================================================ */
.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);
}

.wn-network-footer__inner {
  display: grid;
  gap: .85rem;
  max-width: var(--container);
  margin-inline: auto;
  padding: 1.1rem var(--gutter);
}

.wn-network-footer__eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, .58);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.wn-network-footer__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wn-network-footer__list a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "icon desc";
  gap: .15rem .7rem;
  min-height: 4.15rem;
  padding: .78rem .9rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
  color: #fff;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.wn-network-footer__list a:hover,
.wn-network-footer__list a:focus-visible {
  border-color: rgba(255, 210, 63, .55);
  background: rgba(255, 210, 63, .1);
  transform: translateY(-1px);
  outline: none;
}

.wn-network-footer__list a[aria-current="page"] {
  border-color: rgba(242, 107, 34, .72);
  background: rgba(242, 107, 34, .13);
}

.wn-network-footer__icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1.25rem;
}

.wn-network-footer__title {
  grid-area: title;
  align-self: end;
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.35;
}

.wn-network-footer__desc {
  grid-area: desc;
  color: rgba(255, 255, 255, .62);
  font-size: .78rem;
  line-height: 1.5;
}

@media (min-width: 760px) {
  .wn-network-footer__inner {
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .wn-network-footer__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .wn-network-footer {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  }
}