/* ============================================================================
   Navigator Theme — Main CSS
   Mobile-first, fluid typography. html font-size 100% (16px base, NOT 62.5%).
   ============================================================================ */

:root {
  /* === Brand palette — aligned to the official banner & W-logo PSD (2026-05).
     Source colors:
       Logo W (light/mid/deep blue): #B0DBF7 / #618BD9 / #3D5BBF
       Logo lower yellow base:       #FED800
       Logo top arrows (red):        #DA2F38   ← reserved for emergency only
       Banner numbers / CTA orange:  #F26B22   ← used as --c-accent
       Banner deep navy band:        #1B2547   ← used as --c-ink
   */
  --c-ink:         #1B2547;   /* brand navy — body & dark CTAs (was #0F1E5A) */
  --c-ink-soft:    #283464;
  --c-ink-mute:    #4A546A;
  --c-paper:       #FFFFFF;
  --c-mist:        #F6F9FE;   /* near-white with whisper of blue */
  --c-mist-2:      #EAF1FC;   /* light sky tint for selective sections */
  --c-mist-yellow: #FFF8E1;   /* rare warm-cream for yellow-tinted callouts */
  --c-border:      #E1E7F2;
  --c-border-soft: #EEF2FA;
  --c-text:        #1B2547;
  --c-text-mute:   #5F6B89;
  --c-text-dim:    #8A93B1;
  /* Brand action accent — warm orange from banner numbers + CTA button */
  --c-accent:      #F26B22;
  --c-accent-soft: #FFE2D2;
  --c-accent-deep: #D45417;
  /* Brand primary blue — W-logo mid/deep blue */
  --c-blue:        #3D5BBF;   /* W deep — primary action blue */
  --c-blue-soft:   #B0DBF7;   /* W light sky — badges / tag bg */
  --c-blue-deep:   #1B2547;   /* same as ink — deepest accent */
  --c-blue-mid:    #618BD9;   /* W mid — secondary blue */
  /* Brand gold — bright yellow from W lower-base + banner stars/markers */
  --c-yellow:      #FED800;
  --c-yellow-soft: #FFF8C2;
  --c-yellow-mid:  #E5BC53;   /* mustard shadow — secondary yellow */
  /* Brand red — RESERVED for W-logo arrows / emergency band ONLY */
  --c-brand-red:      #DA2F38;
  --c-brand-red-soft: #FBEEEC;
  /* Status palette (kept) */
  --c-sage:        #5C7556;
  --c-sage-bg:     #EAF0E5;
  --c-crimson:     #9B2D2D;
  --c-crimson-bg:  #FBEEEC;
  --c-warn-bg:     #FFF8C2;
  /* Aliases for transition compatibility */
  --c-cream:       #FBFCFE;   /* near-white */

  /* Fluid type scale — Heading 全面圧縮 (2026-05-21 リーダビリティ重視) */
  --fs-xs:      .8125rem;
  --fs-sm:      .9375rem;
  --fs-base:    clamp(1rem,    .98rem + .15vw, 1.0625rem);
  --fs-lede:    clamp(1.0625rem, 1rem + .35vw, 1.25rem);   /* 本文リード (h4 と独立) */
  --fs-h6:      clamp(.875rem, .87rem + .05vw, .9375rem);  /* 14→15px */
  --fs-h5:      clamp(.9375rem, .92rem + .05vw, 1rem);     /* 15→16px */
  --fs-h4:      clamp(1rem, .95rem + .15vw, 1.125rem);     /* 16→18px */
  --fs-h3:      clamp(1.125rem, 1.05rem + .3vw, 1.375rem); /* 18→22px */
  --fs-h2:      clamp(1.375rem, 1.15rem + 1.0vw, 1.875rem);/* 22→30px */
  --fs-h1:      clamp(1.625rem, 1.25rem + 1.4vw, 2.25rem); /* 26→36px */
  --fs-display: clamp(2.125rem, 1.5rem + 2.4vw, 3.75rem);

  /* Lines */
  --lh-display: 1.18;
  --lh-h2:      1.35;
  --lh-h3:      1.5;
  --lh-body:    1.95;

  /* Spacing */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 2rem;
  --sp-8: 3rem;
  --sp-9: 4.5rem;
  --sp-10: 7rem;
  --sp-11: 10rem;

  --section-y: clamp(3.5rem, 2.4rem + 5.5vw, 7rem);
  --section-y-tight: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);

  /* Radius / shadows / motion */
  --r-sm: 4px;
  --r:   10px;
  --r-lg: 18px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(15, 30, 90,.06);
  --shadow-2: 0 6px 14px -6px rgba(15, 30, 90,.10), 0 2px 4px -2px rgba(15, 30, 90,.06);
  --shadow-3: 0 14px 30px -10px rgba(15, 30, 90,.14), 0 4px 10px -4px rgba(15, 30, 90,.08);
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .22s;

  /* Layout */
  --container: 1200px;
  --container-narrow: clamp(720px, 56vw + 200px, 920px);  /* fluid: 720→920 across viewports */
  --gutter: clamp(1rem, .6rem + 2vw, 2rem);
  --header-h: 72px;
}

/* ============================================================================
   Reset / Base
   ============================================================================ */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
html, body { height: auto; }

body {
  font-family: "M PLUS 1", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-paper);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* color-scheme は :root と html[data-theme="dark"] で制御する（design-polish.css）。
   ここでの * 一括宣言はダーク時に form/scrollbar のダーク UA defaults を阻害するため撤去。 */

h1, h2, h3, h4, h5, h6 { color: var(--c-ink); font-weight: 800; line-height: 1.35; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: -.015em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; }
h4 { font-size: var(--fs-h4); font-weight: 700; }
h5 { font-size: var(--fs-h5); font-weight: 700; }
h6 { font-size: var(--fs-h6); font-weight: 700; }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.5em; }
li { margin-bottom: .35em; }

a { color: var(--c-ink); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--c-accent); }

img, video { max-width: 100%; height: auto; }
button { color: inherit; }

::selection { background: var(--c-accent); color: #fff; }

/* Accessibility */
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; word-wrap: normal !important; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--c-ink); color: #fff; padding: .75rem 1.25rem; z-index: 9999; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; border-radius: 3px; }

/* Container */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }

/* ============================================================================
   Topbar (utility row above header)
   ============================================================================ */
.site-topbar {
  background: var(--c-ink);
  color: rgba(255,255,255,.85);
  font-size: .75rem;
  line-height: 1.5;
  /* 2026-05-22 監査修正: フローティングヘッダー (.site-header に margin-top:12px) と整合させるため、
     スクロール時は topbar が画面外に出るのを許容しつつ、最上端時はピル下に見える navy 帯としては「ヒーロー直下」位置で固定。
     ピル背後に透けて見える問題を回避するため、topbar 自体は通常フロー上に維持し、margin で 0 のままにする。
     (sticky 化はしない: ピルが上に乗ったときの視覚競合を避ける) */
  position: relative;
  z-index: 1;
}
.site-topbar__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: .45rem var(--gutter);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.site-topbar__hours { display: inline-flex; align-items: center; gap: .35rem; color: rgba(255,255,255,.75); }
.site-topbar__hours svg { color: var(--c-accent); }
.site-topbar__phone { display: inline-flex; align-items: center; gap: .35rem; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.site-topbar__phone:hover { color: var(--c-accent); }
.site-topbar__cta {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .4rem;
  /* Banner-style: orange pill on navy bar pops as the emergency entry point */
  background: var(--c-accent);
  color: #fff !important;
  font-weight: 700;
  padding: .3rem .85rem;
  border-radius: 999px;
  transition: background .2s ease, transform .2s ease;
}
.site-topbar__cta .site-topbar__dot { background: #fff; }
.site-topbar__cta:hover {
  background: var(--c-accent-deep, #D45417);
  color: #fff !important;
  transform: translateY(-1px);
}
.site-topbar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 0 currentColor; animation: wn-pulse 1.4s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes wn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 111, 61, .8); } 50% { box-shadow: 0 0 0 6px rgba(255, 111, 61, 0); } }
@media (max-width: 640px) {
  .site-topbar { font-size: .6875rem; }
  .site-topbar__inner { padding: .35rem var(--gutter); gap: .65rem; }
  .site-topbar__phone { display: none; }
}

/* ============================================================================
   Header (main row, sticky, shrinks on scroll)
   ============================================================================ */
:root {
  --header-h: 80px;
  --header-h-compact: 64px;
}
/* 2026-05-22: フローティングピル + Glassmorphism 2.0 (Linear/Vercel inspired)
   監査修正: backdrop-filter 非対応ブラウザでは不透明白に fallback。
              transition 対象を limited にしてスクロール jank 抑制。 */
.site-header {
  position: sticky;
  top: 12px;
  z-index: 100;
  margin: 12px 16px 0;
  border-radius: 20px;
  background: rgba(255,255,255,.94); /* fallback: 不透明寄りに */
  border: 1px solid rgba(255,255,255,.5);
  box-shadow:
    0 10px 30px -12px rgba(15, 30, 90, .15),
    0 4px 10px -4px rgba(15, 30, 90, .08),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition:
    top .3s var(--ease),
    margin .3s var(--ease),
    border-radius .3s var(--ease),
    background .3s var(--ease),
    box-shadow .3s var(--ease),
    transform .3s var(--ease);
}
/* backdrop-filter 対応ブラウザでのみ Glassmorphism を有効化 */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(255,255,255,.72);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
  }
}
.site-header[data-scrolled="true"] {
  top: 8px;
  margin: 8px 24px 0;
  border-radius: 16px;
  background: rgba(255,255,255,.96); /* fallback: scrolled 時は更に不透明寄り */
  box-shadow:
    0 16px 40px -16px rgba(15, 30, 90, .22),
    0 6px 12px -6px rgba(15, 30, 90, .10),
    inset 0 1px 0 rgba(255,255,255,.65);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header[data-scrolled="true"] { background: rgba(255,255,255,.85); }
}
/* 2026-05-22: data-hidden / hide-on-scroll は撤去 (Stripe/Linear 型に統一) */
/* モバイル: 余白を縮める */
@media (max-width: 768px) {
  .site-header { margin: 8px 8px 0; top: 8px; border-radius: 16px; }
  .site-header[data-scrolled="true"] { margin: 6px 12px 0; }
}
/* 2026-05-22: 二段ヘッダー (B+C ハイブリッド) — 1段目はロゴ+アクション、2段目はメニュー */
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--container); margin: 0 auto;
  padding: 1rem var(--gutter);
  min-height: var(--header-h);
  transition: min-height .25s var(--ease), padding .25s var(--ease);
}
/* 1 段目: ロゴ + アクション。メニュー行を分離したため 2 カラム grid に変更 */
.site-header__inner--tier1 {
  grid-template-columns: auto 1fr;
  min-height: 64px;
}
.site-header__inner--tier1 .site-header__actions { justify-self: end; }
/* 2 段目: プライマリメニュー (中央寄せ)。1024px 未満は非表示 (ハンバーガーへ) */
.site-header__inner--tier2 {
  display: none;
  grid-template-columns: 1fr;
  justify-items: center;
  padding-top: 0;
  padding-bottom: .6rem;
  min-height: 0;
  border-top: 1px solid var(--c-border-soft);
  background: rgba(255,255,255,.6);
}
@media (min-width: 1024px) {
  .site-header__inner--tier2 { display: grid; }
}
/* スクロール時は 2 段目を縮約 (高さゼロでフェードアウト) */
.site-header[data-scrolled="true"] .site-header__inner--tier2 {
  padding-block: 0;
  max-height: 0;
  overflow: hidden;
  border-top-color: transparent;
  transition: padding .25s var(--ease), max-height .25s var(--ease);
}
.site-header[data-scrolled="true"] .site-header__inner--tier1 {
  min-height: var(--header-h-compact);
}

.site-header[data-scrolled="true"] .site-header__inner {
  min-height: var(--header-h-compact);
  padding-block: .65rem;
}

/* Brand */
.site-header__brand { min-width: 0; }
.site-logo img { max-height: 48px; width: auto; transition: max-height .25s var(--ease); }
.site-header[data-scrolled="true"] .site-logo img { max-height: 36px; }
.site-title {
  display: inline-flex; align-items: center; gap: .7rem;
  font-weight: 800; color: var(--c-ink); letter-spacing: -.012em; text-decoration: none;
  min-width: 0;
}
.site-title__mark {
  width: 44px; height: 44px;
  color: var(--c-ink); /* used by svg currentColor */
  flex-shrink: 0;
  transition: width .25s var(--ease), height .25s var(--ease);
}
.site-header[data-scrolled="true"] .site-title__mark { width: 36px; height: 36px; }
.site-title__mark svg { width: 100%; height: 100%; }
.site-title__wordmark { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.site-title__text { font-size: 1.0625rem; font-weight: 800; color: var(--c-ink); letter-spacing: -.005em; }
.site-title__tagline {
  font-size: .6875rem; font-weight: 500; color: var(--c-text-mute);
  letter-spacing: .04em; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch;
}
.site-header[data-scrolled="true"] .site-title__tagline { display: none; }
@media (max-width: 768px) { .site-title__tagline { display: none; } }

/* Primary nav (desktop) */
.nav-primary {
  display: none;
  justify-content: center;
}
@media (min-width: 1024px) {
  .nav-primary { display: flex; }
}
.nav-primary__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: .35rem; align-items: center;
  /* 2026-05-22: 文字単位の自動改行を防止 + 2 段目で中央寄せ */
  flex-wrap: nowrap;
  justify-content: center;
}
.nav-primary__list li { position: relative; flex-shrink: 0; }
.nav-primary__list li > a {
  display: inline-flex; align-items: center;
  padding: .55rem 1rem; border-radius: 999px;
  font-size: .9375rem; font-weight: 600; color: var(--c-ink);
  position: relative;
  /* 各メニュー項目は 1 行に保つ */
  white-space: nowrap;
  word-break: keep-all;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* ============================================================================
   2026-05-22 B+C ハイブリッド: プログレッシブ非表示
   2 段目メニュー行で、画面幅に応じて優先度の低い項目を順次隠す
   優先順 (隠す順): 運営者 → ツール/学習 → 事例 → 緊急 (常時表示)
   ============================================================================ */
/* 中間 (1024-1280px): 運営者プロフィールを隠す */
@media (max-width: 1279px) {
  .nav-primary__list > li > a[href*="/profile"] { display: none; }
  .nav-primary__list > li:has(> a[href*="/profile"]) { display: none; }
}
/* 狭いノート PC (1024-1100px): リソース親項目を隠す */
@media (max-width: 1099px) {
  .nav-primary__list > li > a[href*="/top/"]:not([href*="/top/basic"]):not([href*="/top/practice"]) { display: none; }
  .nav-primary__list > li:has(> a[href$="/top/"]) { display: none; }
}
/* 2026-05-22 修正: 緊急復旧 (URL=/wp-emergency/) を赤強調 — 位置に依存しない実装 */
.nav-primary__list > li > a[href*="/wp-emergency"] {
  color: var(--c-crimson, #B33);
  font-weight: 700;
}
.nav-primary__list > li > a[href*="/wp-emergency"]:hover {
  background: rgba(179, 51, 51, .08);
}
/* 緊急アイコン (オプション: 文字の前に🚨絵文字を疑似要素で挿入) */
.nav-primary__list > li > a[href*="/wp-emergency"]::before {
  content: "🚨 ";
  margin-right: 2px;
}
.nav-primary__list li > a:hover { background: var(--c-mist); color: var(--c-ink); }
/* 現在地強調 — 2026-05-22 拡張:
   - current-menu-item / current-page-ancestor / current-menu-ancestor / aria-current=page
   - 中央寄りで下線アクセント (ink塗りつぶしは強すぎたため変更) */
.nav-primary__list li.current-menu-item > a,
.nav-primary__list li.current-menu-ancestor > a,
.nav-primary__list li.current-page-ancestor > a,
.nav-primary__list li > a[aria-current="page"] {
  color: var(--c-ink);
  background: var(--c-mist);
}
.nav-primary__list li.current-menu-item > a::after,
.nav-primary__list li.current-menu-ancestor > a::after,
.nav-primary__list li.current-page-ancestor > a::after,
.nav-primary__list li > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--c-accent);
  border-radius: 1px;
}
/* Submenu */
.nav-primary__list .sub-menu {
  position: absolute; top: 100%; left: 0;
  min-width: 220px; background: var(--c-paper);
  border: 1px solid var(--c-border); border-radius: var(--r);
  padding: .35rem;
  box-shadow: var(--shadow-3);
  list-style: none; margin: .25rem 0 0;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, visibility 0s .15s, transform .15s;
}
.nav-primary__list li:hover > .sub-menu,
.nav-primary__list li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .15s, visibility 0s, transform .15s;
}
.nav-primary__list .sub-menu li > a {
  padding: .5rem .75rem; border-radius: 6px; font-size: .875rem; display: block;
}

/* Header actions */
.site-header__actions {
  display: flex; align-items: center; gap: .5rem;
}
.site-header__search-toggle {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--c-mist); color: var(--c-ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.site-header__search-toggle:hover { background: var(--c-mist-2); }
.site-header__cta { padding: .55rem 1.1rem; min-height: 42px; font-size: .9375rem; }
@media (max-width: 768px) {
  .site-header__search-toggle { display: none; }
  .site-header__cta { display: none; }
}

/* Hamburger (mobile) */
.nav-toggle {
  display: inline-flex; flex-direction: column; gap: 5px;
  width: 44px; height: 44px;
  padding: 0; align-items: center; justify-content: center;
  background: var(--c-mist); border-radius: 50%; color: var(--c-ink);
  transition: background var(--dur) var(--ease);
}
.nav-toggle:hover { background: var(--c-mist-2); }
.nav-toggle__bar { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease), opacity .15s var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
}

/* Search bar (dropdown beneath header) */
.site-search {
  border-top: 1px solid var(--c-border-soft);
  background: var(--c-mist);
}
.site-search__inner {
  max-width: var(--container); margin: 0 auto;
  padding: .85rem var(--gutter);
}

/* ============================================================================
   Mobile drawer (overlay + right-slide panel)
   ----------------------------------------------------------------------------
   2026-05-26 修正: 旧 .mobile-drawer[data-open="true"] 方式(drawer 全体を
   translateX で動かす)は廃止。新方式(.mobile-drawer.is-open + __overlay +
   __panel)に統合済み。.mobile-drawer 自体の position / pointer-events /
   その他の挙動は design-polish.css line 4679+ で完備。
   ここでは __inner サブパーツの余白指定のみ残す。
   ============================================================================ */
.mobile-drawer__inner {
  padding: 1.25rem var(--gutter) 6rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  min-height: 100%;
}
.mobile-drawer__head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 1rem; border-bottom: 1px solid var(--c-border-soft);
}
.mobile-drawer__brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--c-ink); }
.mobile-drawer__brand .site-title__mark { width: 32px; height: 32px; color: var(--c-ink); }
.mobile-drawer__close {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-mist); color: var(--c-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.mobile-drawer__close:hover { background: var(--c-mist-2); }

.mobile-drawer__search .search-form { width: 100%; }

.mobile-drawer__nav { flex: 1; }
.mobile-drawer__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0;
}
.mobile-drawer__list li > a {
  display: flex; flex-direction: column; gap: 4px;
  padding: 1rem 0;
  font-size: 1.125rem; font-weight: 700; color: var(--c-ink);
  border-bottom: 1px solid var(--c-border-soft);
  transition: color var(--dur) var(--ease);
  position: relative;
}
.mobile-drawer__list li > a::after {
  content: "→"; position: absolute; right: 4px; top: 1.05rem;
  font-size: 1rem; color: var(--c-text-dim);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mobile-drawer__list li > a:hover { color: var(--c-accent); }
.mobile-drawer__list li > a:hover::after { color: var(--c-accent); transform: translateX(3px); }
.mobile-drawer__sub {
  font-size: .8125rem; color: var(--c-text-mute); font-weight: 500;
}

/* === 2026-05-22 mobile drawer accordion (デスクトップとの階層一貫) === */
/* <details> / <summary> ベースで JS 不要、a11y は OS が担保 */
.mobile-drawer__details { display: block; }
.mobile-drawer__details > summary { list-style: none; cursor: pointer; }
.mobile-drawer__details > summary::-webkit-details-marker { display: none; }
.mobile-drawer__summary {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--c-border-soft);
}
/* 親リンクは通常の a として中身を埋める。::after の "→" を出さないため別セレクタ */
.mobile-drawer__list .mobile-drawer__summary .mobile-drawer__summary-link {
  flex: 1; padding: 1rem 0; border-bottom: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 1.125rem; font-weight: 700; color: var(--c-ink);
}
.mobile-drawer__list .mobile-drawer__summary .mobile-drawer__summary-link::after {
  display: none; /* 親は子展開シェブロンで方向を示すため "→" を消す */
}
.mobile-drawer__chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; color: var(--c-text-mute);
  transition: transform var(--dur) var(--ease);
}
.mobile-drawer__details[open] > .mobile-drawer__summary .mobile-drawer__chev {
  transform: rotate(180deg); color: var(--c-accent);
}
.mobile-drawer__sublist {
  list-style: none; padding: 0; margin: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--c-mist);
  margin: .25rem 0 .5rem;
}
.mobile-drawer__sublist li > a {
  padding: .75rem 0;
  font-size: 1rem;
  border-bottom: 1px dashed var(--c-border-soft);
}
.mobile-drawer__sublist li:last-child > a { border-bottom: 0; }

.mobile-drawer__cta { display: grid; gap: .65rem; }
.mobile-drawer__cta .btn { font-size: 1rem; padding: 1rem 1.5rem; }
.mobile-drawer__sns {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-top: 1rem; border-top: 1px solid var(--c-border-soft);
}
.mobile-drawer__sns-link {
  font-size: .75rem; color: var(--c-text-mute);
  padding: .5rem .85rem; border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
}
.mobile-drawer__sns-link:hover { color: var(--c-ink); border-color: var(--c-ink); }

/* When drawer open, lock background scroll */
body.has-drawer-open { overflow: hidden; }

/* Emergency band */
.emergency-band {
  display: flex; align-items: center; gap: 1rem;
  background: linear-gradient(90deg, var(--c-crimson-bg), #FFF6F4);
  border-bottom: 1px solid #F5D0CB;
  padding: .85rem var(--gutter);
  font-size: .9375rem;
}
.emergency-band__icon { background: var(--c-crimson); color: #fff; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.emergency-band__text { flex: 1; line-height: 1.6; color: var(--c-ink); }
.emergency-band__text strong { color: var(--c-crimson); }
.emergency-band__btn { background: var(--c-crimson); color: #fff; padding: .55rem 1rem; border-radius: var(--r-sm); font-weight: 700; font-size: .8125rem; white-space: nowrap; flex-shrink: 0; }
.emergency-band__btn:hover { background: #7E1F1F; color: #fff; }
@media (max-width: 640px) {
  .emergency-band { flex-direction: column; align-items: flex-start; }
  .emergency-band__btn { width: 100%; text-align: center; }
}

/* Breadcrumbs */
.breadcrumb-wrap { background: var(--c-mist); border-bottom: 1px solid var(--c-border-soft); padding: .85rem 0; font-size: .8125rem; }
.breadcrumbs__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem .55rem; align-items: center; }
.breadcrumbs__item { display: inline-flex; align-items: center; gap: .55rem; color: var(--c-text-mute); }
.breadcrumbs__item:not(:last-child)::after { content: "›"; color: var(--c-text-dim); margin-left: .35rem; }
.breadcrumbs__link { color: var(--c-text-mute); }
.breadcrumbs__link:hover { color: var(--c-accent); }
.breadcrumbs__current { color: var(--c-ink); font-weight: 600; }

/* ============================================================================
   Layouts
   ============================================================================ */
.layout { padding-block: var(--sp-8) var(--sp-9); }
@media (min-width: 1024px) {
  .layout--with-sidebar { display: grid; grid-template-columns: 1fr 350px; gap: 1.0rem; align-items: start; }
}
.layout__main { min-width: 0; }
.layout__main--full { max-width: var(--container-narrow); margin-inline: auto; }

/* ============================================================================
   Archive hero
   ============================================================================ */
.archive-hero {
  padding: clamp(3rem, 2.4rem + 4vw, 6rem) 0 clamp(2rem, 1.6rem + 2vw, 3.5rem);
  background: var(--c-mist);
  border-bottom: 1px solid var(--c-border-soft);
}
.archive-hero__eyebrow {
  display: inline-block; font-size: .8125rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--c-accent); margin: 0 0 .75rem; padding-left: 2.25rem; position: relative;
}
.archive-hero__eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 1.5rem; height: 1px; background: currentColor; transform: translateY(-50%); }
.archive-hero__title { font-size: var(--fs-h1); margin: 0 0 .5rem; }
.archive-hero__lede { color: var(--c-text-mute); font-size: var(--fs-lede); max-width: 64ch; margin: 0; }
.archive-hero__search { margin-top: 1.5rem; max-width: 480px; }

/* ============================================================================
   Post cards (archive)
   ============================================================================ */
.post-list { display: grid; gap: var(--sp-6); }
@media (min-width: 700px) { .post-list { grid-template-columns: repeat(2, 1fr); } }

.post-card { background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.post-card:hover { transform: translateY(-2px); border-color: var(--c-ink); box-shadow: var(--shadow-2); }
.post-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.post-card__link:hover { color: inherit; }
.post-card__media { aspect-ratio: 16/9; background: var(--c-mist); overflow: hidden; position: relative; }
.post-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.post-card:hover .post-card__img { transform: scale(1.03); }
.post-card__media--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--c-mist), var(--c-mist-2)); }
.post-card__placeholder-mark { font-size: 2.5rem; font-weight: 800; color: var(--c-border); letter-spacing: -.02em; }

.post-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.post-card__cat { display: inline-block; font-size: .6875rem; font-weight: 800; letter-spacing: .14em; color: var(--c-accent); background: var(--c-accent-soft); padding: .25rem .65rem; border-radius: var(--r-sm); align-self: flex-start; text-transform: uppercase; }
.post-card__title { font-size: 1.125rem; line-height: 1.55; font-weight: 700; color: var(--c-ink); margin: 0; letter-spacing: -.005em; }
.post-card__excerpt { font-size: var(--fs-sm); line-height: 1.85; color: var(--c-text-mute); margin: 0; flex: 1; }
.post-card__meta { display: flex; gap: 1rem; font-size: .75rem; color: var(--c-text-dim); margin-top: auto; padding-top: .5rem; border-top: 1px dashed var(--c-border-soft); }

/* Search row */
.post-row { padding: 1.25rem 0; border-bottom: 1px solid var(--c-border-soft); }
.post-row__link { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 600px) {
  .post-row__link { grid-template-columns: 160px 1fr; }
  .post-row__media { aspect-ratio: 16/9; }
}
.post-row__media { background: var(--c-mist); overflow: hidden; border-radius: var(--r); }
.post-row__title { font-size: 1.0625rem; margin: 0; }
.post-row__cat { font-size: .75rem; color: var(--c-accent); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.post-row__excerpt { font-size: var(--fs-sm); color: var(--c-text-mute); }
.post-row__meta { font-size: .75rem; color: var(--c-text-dim); }

/* No results */
.no-results { padding: var(--sp-8) 0; text-align: center; }
.no-results__title { margin-bottom: .5rem; }
.no-results__lede { color: var(--c-text-mute); margin-bottom: 1.5rem; }

/* Pagination */
.navigation.pagination { margin-top: var(--sp-7); }
.nav-links { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }
.nav-links .page-numbers { display: inline-flex; min-width: 44px; height: 44px; padding: 0 .85rem; align-items: center; justify-content: center; border: 1px solid var(--c-border); border-radius: var(--r-sm); color: var(--c-ink); font-weight: 600; font-size: .9375rem; transition: var(--dur) var(--ease); }
.nav-links .page-numbers:hover { border-color: var(--c-ink); }
.nav-links .page-numbers.current { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

/* ============================================================================
   Single post
   ============================================================================ */
.post-single { padding: var(--sp-7) 0 0; }
.post-single__header { margin-bottom: var(--sp-6); }
.post-single__cat { margin: 0 0 .75rem; }
.post-single__cat a { display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .14em; color: var(--c-accent); background: var(--c-accent-soft); padding: .35rem .85rem; border-radius: var(--r-sm); text-transform: uppercase; }
.post-single__title {
	font-size: var(--fs-h1);
	line-height: 1.3;
	margin: 0 0 .9rem;
	/* text-wrap: balance keeps line-length variance low across lines.
	   word-break: keep-all prevents Japanese line-breaks inside compound nouns,
	   so "セキュリティ・フォレンジック" doesn't break mid-word. */
	text-wrap: balance;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.post-meta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; font-size: .8125rem; color: var(--c-text-mute); }
/* Category is already shown via breadcrumb + the post-single__cat pill.
   Hide the meta-line duplicate to cut cognitive load (3x → 2x display). */
.post-meta__cat { display: none; }
/* Published date: neutral. Updated date: ACCENT (signals freshness — the highest-
   value UX signal in this column; we promote it above category and reading time). */
.post-meta__date { color: var(--c-text-mute); }
.post-meta__updated { color: var(--c-accent); font-weight: 700; }
/* Reading time: was orange/loud. Demote to muted — it's a friction signal that
   shouldn't get more visual weight than freshness. Prefix with "◇" separator. */
.post-meta__rt { color: var(--c-text-mute); font-weight: 400; }
.post-meta__rt::before { content: "◇ "; color: var(--c-text-dim); margin-right: .1em; }

.post-thumb {
	margin: 0 0 var(--sp-6);
	border-radius: var(--r-lg);
	overflow: hidden;
	aspect-ratio: 16/9;
	background: var(--c-mist);
	position: relative;
	/* Soft fade at the bottom to bridge KV → body. The fade is created on the
	   container, not the image, so the image stays crisp at the focal area. */
	-webkit-mask-image: linear-gradient(to bottom, black 0%, black 78%, transparent 100%);
	mask-image: linear-gradient(to bottom, black 0%, black 78%, transparent 100%);
}
.post-thumb__img { width: 100%; height: 100%; object-fit: cover; }

/* 要点ボックス — used early in long posts to give readers a 3-line summary
   so they can decide whether to commit. Render via [wn_tldr]…[/wn_tldr] shortcode
   or as a Gutenberg group with class "wn-tldr" (class name kept for backward compat). */
.wn-tldr {
	background: var(--c-mist, #F6F9FE);
	border-left: 4px solid var(--c-accent, #F26B22);
	border-radius: 10px;
	padding: 1.1rem 1.4rem;
	margin: 1.5rem 0 2rem;
	font-size: .95rem;
	line-height: 1.85;
	position: relative;
}
/* 自動バッジは撤去。ボックス内タイトル「📌 この記事の要点」を唯一のラベルとする。
   既存 [wn_tldr title=""] の title 属性が空の場合のみフォールバック表示する。 */
.wn-tldr:not(:has(.wn-tldr__title)):not(:has(strong))::before {
	content: "📌 この記事の要点";
	display: block;
	font-weight: 700;
	color: var(--c-ink, #1B2547);
	margin-bottom: .35rem;
	font-size: .95rem;
}
.wn-tldr__title { display: block; font-weight: 700; color: var(--c-ink, #1B2547); margin-bottom: .35rem; }
.wn-tldr ul { margin: .25rem 0 0; padding-left: 1.2rem; }
.wn-tldr li { margin: .15rem 0; }
.wn-tldr p { margin: 0 0 .5em; }
.wn-tldr p:last-child { margin-bottom: 0; }

.post-single__toc { margin: var(--sp-6) 0; }
.post-single__content { font-size: var(--fs-base); line-height: var(--lh-body); }
.post-single__footer { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--c-border); }

.post-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--sp-4); }
.post-tags__item { font-size: .8125rem; color: var(--c-text-mute); background: var(--c-mist); padding: .35rem .75rem; border-radius: var(--r-pill); border: 1px solid var(--c-border); }
.post-tags__item:hover { color: var(--c-ink); border-color: var(--c-ink); }

.post-nav { display: grid; gap: var(--sp-3); margin-top: var(--sp-8); }
@media (min-width: 700px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav a { display: block; padding: 1.25rem; background: var(--c-mist); border-radius: var(--r); transition: var(--dur) var(--ease); }
.post-nav a:hover { background: var(--c-mist-2); }
.post-nav__label { display: block; font-size: .75rem; color: var(--c-text-mute); margin-bottom: .25rem; }
.post-nav__title { display: block; font-weight: 700; color: var(--c-ink); }
.post-nav__next { text-align: right; }

/* Prose (article content typography) */
.prose { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--c-text); }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { margin-top: 2.5em; margin-bottom: 1em; padding-bottom: .4em; border-bottom: 2px solid var(--c-mist-2); position: relative; }
.prose h2::before { content: ""; position: absolute; left: 0; bottom: -2px; width: 3rem; height: 2px; background: var(--c-accent); }
.prose h3 { margin-top: 2em; margin-bottom: .75em; padding-left: .9em; border-left: 3px solid var(--c-accent); }
.prose h4 { margin-top: 1.75em; }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose ul li { list-style: none; position: relative; padding-left: 1.5em; }
.prose ul li::before { /* content: ""; */ position: absolute; left: 0; top: .85em; width: .6em; height: .6em; background: var(--c-accent); border-radius: 50%; }
.prose ol { list-style-position: outside; }
.prose ol li { padding-left: .5em; }
.prose img { border-radius: var(--r); }
.prose a:not(.btn):not(.wp-block-button__link):not(.wn-btn) { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.prose a:not(.btn):not(.wp-block-button__link):not(.wn-btn):hover { color: var(--c-accent); }
.prose blockquote {
  padding: 1.25rem 1.5rem; background: var(--c-mist); border-left: 4px solid var(--c-accent);
  border-radius: 0 var(--r) var(--r) 0; margin-block: 1.5em;
}
.prose code { background: var(--c-mist); padding: .15em .4em; border-radius: 4px; font-size: .9em; }
.prose pre { background: var(--c-ink); color: #DDE6FA; padding: 1.25rem; border-radius: var(--r); overflow-x: auto; font-size: .875rem; line-height: 1.7; }
.prose pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }
.prose table { width: 100%; border-collapse: collapse; margin-block: 1.5em; font-size: .9375rem; }
.prose th, .prose td { padding: .85rem 1rem; border: 1px solid var(--c-border); vertical-align: top; }
.prose th { background: var(--c-mist); font-weight: 700; text-align: left; }

/* Share buttons */
/* ============================================================================
   SNS Share — X / Facebook only, brand-coloured solid buttons
   ============================================================================
   Three variants:
   - .share--top    : icons-only chip, placed before content. "保存目的" の即時アクション。
   - .share--mid    : in-content section with heading + note. ピーク感情捕捉。
   - .share--bottom : full footer block with heading + note. 読了直後の合意瞬間。
   ============================================================================ */
.share {
	margin: 1.5rem 0;
}
.share__heading {
	margin: 0 0 .35rem;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--c-ink);
}
.share__note {
	margin: 0 0 .75rem;
	font-size: .8125rem;
	color: var(--c-text-mute);
	line-height: 1.6;
}
.share__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}
.share__btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .65rem 1.15rem;
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .02em;
	border-radius: 999px;
	border: 0;
	text-decoration: none;
	color: #fff;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
	cursor: pointer;
	line-height: 1;
}
.share__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, .14);
	filter: brightness(1.05);
	color: #fff;
}
.share__btn:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 2px;
}
.share__icon { flex: none; }
.share__label { white-space: nowrap; }
.share__btn--x { background: #000; color: #fff; }
.share__btn--x:hover { background: #000; }
.share__btn--fb { background: #1877F2; color: #fff; }
.share__btn--fb:hover { background: #1877F2; }

/* ----- Variant: top (compact, icons only) -------------------------------- */
.share--top {
	margin: -.25rem 0 1.25rem;
}
.share--top .share__buttons { gap: .4rem; }
.share--compact .share__btn {
	padding: .5rem .9rem;
	font-size: .75rem;
}
.share--compact .share__btn .share__icon {
	width: 16px;
	height: 16px;
}

/* ----- Variant: mid (in-content emphasised section) ---------------------- */
.share--mid {
	background: var(--c-mist);
	border-radius: 12px;
	padding: 1.1rem 1.4rem 1.25rem;
	margin: 2rem 0;
	border-left: 3px solid var(--c-accent);
}
.share--mid .share__heading { font-size: 1rem; }

/* ----- Variant: bottom (full footer block) ------------------------------- */
.share--bottom {
	margin: 2.25rem 0 1.5rem;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--c-border-soft, #E5E1D6);
}
.share--bottom .share__heading { font-size: 1rem; }

/* The bottom-share container lives outside the 2-col grid, so we constrain
   its inner width to match the article body for visual continuity. */
.post-single__share-end {
	max-width: var(--container-narrow, clamp(720px, 56vw + 200px, 920px));
	margin-inline: auto;
	padding-inline: clamp(1rem, 2.5vw, 1.75rem);
}
.post-single__after {
	max-width: var(--container-narrow, clamp(720px, 56vw + 200px, 920px));
	margin-inline: auto;
	padding-inline: clamp(1rem, 2.5vw, 1.75rem);
}

/* Related posts */
.related { margin-top: var(--sp-9); padding-top: var(--sp-7); border-top: 1px solid var(--c-border); }
.related__title { font-size: var(--fs-h3); margin: 0 0 var(--sp-5); }
.related__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 700px) { .related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .related__grid { grid-template-columns: repeat(3, 1fr); } }
.related__card { background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r); overflow: hidden; transition: var(--dur) var(--ease); color: inherit; display: block; }
.related__card:hover { transform: translateY(-2px); border-color: var(--c-ink); box-shadow: var(--shadow-2); color: inherit; }
.related__media { aspect-ratio: 16/9; background: var(--c-mist); overflow: hidden; }
.related__media img { width: 100%; height: 100%; object-fit: cover; }
.related__media--placeholder { background: linear-gradient(135deg, var(--c-mist), var(--c-mist-2)); }
.related__body { padding: 1rem 1.1rem 1.1rem; }
.related__cat { font-size: .6875rem; color: var(--c-accent); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.related__title-text { font-size: .9375rem; line-height: 1.55; margin: .35rem 0 .4rem; font-weight: 700; }
.related__date { font-size: .75rem; color: var(--c-text-dim); }

/* ============================================================================
   Sidebar
   ============================================================================ */
.sidebar { display: grid; gap: var(--sp-5); }
.sidebar__sticky { position: sticky; top: calc(var(--header-h) + 1rem); }

.widget { background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 1.0rem; }
.widget__title { font-size: .75rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 .85rem; padding-bottom: .5rem; border-bottom: 1.5px solid var(--c-mist-2); }
.widget__body { font-size: .875rem; color: var(--c-text-mute); line-height: 1.75; margin: 0 0 .85rem; }
.widget__links { list-style: none; padding: 0; margin: 0; }
.widget__links li a { display: block; padding: .55rem 0; font-size: .875rem; line-height: 1.55; color: var(--c-ink); border-bottom: 1px dashed var(--c-border-soft); transition: var(--dur) var(--ease); }
.widget__links li:last-child a { border-bottom: 0; }
.widget__links li a:hover { color: var(--c-accent); padding-left: .35rem; }
.widget__link--more { color: var(--c-accent) !important; font-weight: 700; }

.widget--cta-primary {
  background: var(--c-ink); color: #fff; border: 0; position: relative; overflow: hidden;
}
.widget--cta-primary::before { content: ""; position: absolute; width: 200px; height: 200px; top: -80px; right: -60px; background: radial-gradient(circle, rgba(255, 111, 61,.22), transparent 70%); pointer-events: none; }
.widget--cta-primary .widget__title { color: #fff; font-size: 1rem; letter-spacing: -.005em; text-transform: none; border-bottom: 0; padding-bottom: 0; line-height: 1.55; font-weight: 700; }
.widget--cta-primary .widget__body { color: rgba(255,255,255,.85); position: relative; }
.widget--cta-primary .btn { width: 100%; }
.widget--cta-primary .widget__sub-link {
	display: block;
	margin-top: .75rem;
	color: rgba(255,255,255,.78);
	font-size: .8125rem;
	text-align: center;
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}
.widget--cta-primary .widget__sub-link:hover { color: #fff; text-decoration: underline; }
/* Study/Maintenance variant — softer accent so learners aren't pushed by emergency tone */
.widget--cta-study {
	background: linear-gradient(135deg, var(--c-blue, #3D5BBF) 0%, var(--c-ink, #1B2547) 100%);
}

/* TOC widget */
.toc { font-size: .9375rem; }
.toc__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.toc__title { font-weight: 800; letter-spacing: .04em; }
.toc__toggle { background: var(--c-mist); padding: .25rem .75rem; border-radius: var(--r-sm); font-size: .75rem; color: var(--c-text-mute); }
.toc__list { list-style: none; padding-left: 0; margin: 0; counter-reset: toc-h2; }
.toc__sublist { list-style: none; padding-left: 0; margin: .25rem 0 .5rem; counter-reset: toc-h3; }
.toc__item { padding: .25rem 0; line-height: 1.55; }
/* h2: numeric "01, 02..." in accent color, scoped via > .toc__link so children don't inherit */
.toc__item--h2 { counter-increment: toc-h2; padding-left: 0; }
.toc__item--h2 > .toc__link::before {
	content: counter(toc-h2, decimal-leading-zero);
	color: var(--c-accent);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	margin-right: .5em;
	font-size: .75rem;
	letter-spacing: -.01em;
}
/* h3: tree-style indent + lower-alpha counter. Direct-child selector prevents
   the h2 counter pseudo-element from leaking onto nested links. */
.toc__item--h3 { counter-increment: toc-h3; padding-left: 1.5em; font-size: .875rem; position: relative; }
.toc__item--h3 > .toc__link { color: var(--c-text-mute); }
.toc__item--h3 > .toc__link::before {
	content: counter(toc-h3, lower-alpha) ".";
	color: var(--c-text-mute);
	font-weight: 700;
	margin-right: .5em;
	font-size: .7rem;
	letter-spacing: .02em;
}
.toc__item--h3::after {
	content: "";
	position: absolute;
	left: .5em; top: 0; bottom: 50%;
	border-left: 1px solid var(--c-border, #e5e7eb);
	border-bottom: 1px solid var(--c-border, #e5e7eb);
	width: .8em;
	border-bottom-left-radius: 4px;
	pointer-events: none;
}
.toc__link { display: inline-block; color: var(--c-ink); text-decoration: none; transition: color var(--dur) var(--ease); }
.toc__link:hover, .toc__link.is-active { color: var(--c-accent); }

/* ============================================================================
   Footer signal band — big CTA above the footer
   ============================================================================ */
.footer-signal {
  background: linear-gradient(135deg, var(--c-mist) 0%, var(--c-mist-2) 100%);
  position: relative; overflow: hidden;
  border-top: 1px solid var(--c-border);
}
.footer-signal::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(60% 70% at 100% 0%, rgba(255, 111, 61,.12), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(15, 30, 90,.08), transparent 60%);
  pointer-events: none;
}
.footer-signal__inner {
  position: relative; max-width: var(--container);
  margin-inline: auto; padding: clamp(3rem, 2.4rem + 4vw, 6rem) var(--gutter);
  display: grid; gap: var(--sp-6); align-items: center;
}
@media (min-width: 900px) {
  .footer-signal__inner { grid-template-columns: 1.4fr 1fr; gap: var(--sp-8); }
  .footer-signal__actions { justify-content: flex-end; }
}
.footer-signal__eyebrow {
  display: inline-block; font-size: .8125rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--c-accent); margin-bottom: .75rem;
}
.footer-signal__title {
  font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
  font-weight: 800; line-height: 1.3; letter-spacing: -.015em;
  color: var(--c-ink); margin: 0 0 1rem; text-wrap: balance;
}
.footer-signal__body {
  font-size: var(--fs-lede); line-height: 1.85; color: var(--c-text-mute);
  margin: 0; max-width: 56ch;
}
.footer-signal__actions {
  display: flex; flex-wrap: wrap; gap: .75rem;
}
.btn--lg { padding: 1.1rem 1.85rem; font-size: 1.0625rem; min-height: 3.75rem; }
.btn--ghost-light { background: rgba(255,255,255,.6); }
.btn--ghost-light:hover { background: #fff; }

/* ============================================================================
   Footer — main
   ============================================================================ */
/* 2026-05-22: PC では bottom-nav が表示されないため padding-bottom を 0 に。
   モバイル (<= 900px) でのみ bottom-nav 高さ分 (5rem) の余白を確保。 */
.site-footer { background: var(--c-ink); color: rgba(255,255,255,.85); padding-bottom: 0; }
@media (max-width: 900px) {
  .site-footer { padding-bottom: 5rem; /* room for fixed bottom-nav */ }
}
.site-footer__inner {
  max-width: var(--container); margin-inline: auto;
  padding: clamp(3rem, 2.4rem + 4vw, 5rem) var(--gutter);
  display: grid; gap: var(--sp-8);
}
@media (min-width: 900px) {
  .site-footer__inner { grid-template-columns: 1.3fr 2fr; align-items: start; }
}

.site-footer__brand .site-footer__logo {
  display: inline-flex; align-items: center; gap: .6rem;
  color: #fff; font-weight: 800; font-size: 1.25rem; letter-spacing: -.005em;
  margin-bottom: .75rem;
}
.site-footer__brand .site-footer__logo .site-title__mark {
  width: 36px; height: 36px; color: #fff;
}
.site-footer__brand .site-footer__logo .site-title__mark svg rect { fill: #fff; }
.site-footer__brand .site-footer__logo .site-title__mark svg path { stroke: var(--c-ink); }
.site-footer__name { color: #fff; }

.site-footer__desc {
  color: rgba(255,255,255,.65);
  font-size: .9375rem; line-height: 1.85;
  margin: 0 0 1.5rem;
}

.site-footer__sns { display: flex; flex-wrap: wrap; gap: .5rem; }
.site-footer__sns-link {
  width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.85);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.site-footer__sns-link:hover {
  background: var(--c-accent); border-color: var(--c-accent); color: #fff;
  transform: translateY(-2px);
}

/* Columns — 4 列構成 (B 案 2026-05-21):
   モバイル: 1 列 (details で開閉)
   タブレット 700-1023: 2 列
   PC 1024+: 4 列 */
.site-footer__cols {
  display: grid; gap: 1rem;
}
@media (min-width: 700px) {
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (min-width: 1024px) {
  .site-footer__cols { grid-template-columns: repeat(4, 1fr); gap: 2rem 1.75rem; }
}

.site-footer__col {
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-bottom: 1rem;
}
@media (min-width: 700px) {
  .site-footer__col { border-bottom: 0; padding-bottom: 0; }
  /* On desktop, force-open <details> so all columns are visible. */
  .site-footer__col > .site-footer__col-links { display: grid !important; padding-bottom: 0; }
}
.site-footer__col[open] .site-footer__col-title::after { transform: rotate(45deg); }
.site-footer__col-title {
  font-size: .75rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--c-accent);
  list-style: none; cursor: pointer; position: relative;
  padding: 1rem 0;
  display: flex; align-items: center;
}
.site-footer__col-title::-webkit-details-marker { display: none; }
.site-footer__col-title::after {
  content: "+"; margin-left: auto;
  font-size: 1.25rem; color: #fff; font-weight: 400; line-height: 1;
  transition: transform .2s var(--ease);
}
@media (min-width: 700px) {
  .site-footer__col-title {
    cursor: default; padding: 0 0 1rem;
    border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 1rem;
  }
  .site-footer__col-title::after { display: none; }
}
.site-footer__col-links {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .55rem;
  padding-bottom: 1rem;
}
@media (min-width: 700px) {
  .site-footer__col-links { padding-bottom: 0; }
}
.site-footer__col-links a {
  color: rgba(255,255,255,.75); font-size: .9375rem; line-height: 1.55;
  transition: color .15s, padding-left .15s;
  display: inline-block;
}
.site-footer__col-links a:hover { color: var(--c-accent); padding-left: .25rem; }

/* Widget-rendered cols (when sidebar-1/2/3 active) */
.site-footer__col .widget__title { color: var(--c-accent); border-bottom-color: rgba(255,255,255,.1); }
.site-footer__col .widget__links li a { color: rgba(255,255,255,.75); border-bottom-color: rgba(255,255,255,.08); }
.site-footer__col .widget__links li a:hover { color: var(--c-accent); }

/* Base row */
.site-footer__base {
  border-top: 1px solid rgba(255,255,255,.08);
  background: #0A1545;
}
.site-footer__base-inner {
  max-width: var(--container); margin-inline: auto;
  padding: 1.5rem var(--gutter);
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem;
  justify-content: space-between; align-items: center;
  font-size: .75rem; color: rgba(255,255,255,.5);
}
.site-copyright { margin: 0; }
.site-copyright strong { color: rgba(255,255,255,.85); font-weight: 700; }
.site-footer__utility-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 1rem;
}
.site-footer__utility-list a { color: rgba(255,255,255,.65); font-size: .75rem; transition: color .15s; }
.site-footer__utility-list a:hover { color: #fff; }
.site-footer__built { margin: 0; font-size: .6875rem; letter-spacing: .04em; color: rgba(255,255,255,.4); }

@media (max-width: 640px) {
  .site-footer__base-inner { flex-direction: column; align-items: flex-start; gap: .8rem; }
}

/* ============================================================================
   Bottom nav (mobile only)
   ============================================================================ */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--c-border-soft);
  padding-bottom: env(safe-area-inset-bottom, 0);
  transition: transform .25s var(--ease);
}
@media (max-width: 900px) {
  /* 6 tabs aligned with PC nav labels. On phones <400px we use 11px label
     fallback to keep tap targets >= 44px while preventing label wrap. */
  .bottom-nav { display: grid; grid-template-columns: repeat(6, 1fr); }
}
.bottom-nav[data-hidden="true"] {
  transform: translateY(100%);
}
.bottom-nav__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: .55rem .25rem .45rem;
  color: var(--c-text-mute);
  font-size: .625rem; font-weight: 600; letter-spacing: .04em;
  position: relative;
  transition: color .15s var(--ease);
  min-height: 56px;
}
.bottom-nav__item:hover, .bottom-nav__item:focus { color: var(--c-ink); }
.bottom-nav__icon { display: block; }
.bottom-nav__label { line-height: 1; }
/* Emergency tab: low-noise neutral state. Crimson appearance was constantly
   pushing anxiety on readers in calm educational contexts. Now it matches the
   other tabs visually until the page itself indicates an emergency context. */
.bottom-nav__item--emergency {
  color: var(--c-text-mute);
}
.bottom-nav__item--emergency .bottom-nav__emergency-mark {
  width: 24px; height: 24px;
  background: transparent; color: currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0;
  border: 0;
  box-shadow: none;
}
.bottom-nav__item--emergency .bottom-nav__label { color: inherit; font-weight: 600; }

/* On pages where emergency context is real (front page, emergency LP, recovery LP,
   case studies), restore the crimson "FAB" visual. The body class is set by WP
   based on the slug. */
.home .bottom-nav__item--emergency,
.page-id-emergency .bottom-nav__item--emergency,
.single-post.category-emergency .bottom-nav__item--emergency,
body[class*="page-template-emergency"] .bottom-nav__item--emergency,
body.page[class*="wp-emergency"] .bottom-nav__item--emergency,
body.page[class*="wp-recovery"] .bottom-nav__item--emergency,
body.page[class*="case-studies"] .bottom-nav__item--emergency {
  color: var(--c-crimson);
}
.home .bottom-nav__item--emergency .bottom-nav__emergency-mark,
body.page[class*="wp-emergency"] .bottom-nav__item--emergency .bottom-nav__emergency-mark,
body.page[class*="wp-recovery"] .bottom-nav__item--emergency .bottom-nav__emergency-mark,
body.page[class*="case-studies"] .bottom-nav__item--emergency .bottom-nav__emergency-mark {
  width: 48px; height: 48px;
  background: var(--c-crimson); color: #fff;
  border-radius: 50%;
  margin-top: -18px; margin-bottom: 2px;
  box-shadow: 0 6px 14px -4px rgba(155,45,45,.5);
  border: 3px solid var(--c-paper);
}
.home .bottom-nav__item--emergency .bottom-nav__label,
body.page[class*="wp-emergency"] .bottom-nav__item--emergency .bottom-nav__label,
body.page[class*="wp-recovery"] .bottom-nav__item--emergency .bottom-nav__label,
body.page[class*="case-studies"] .bottom-nav__item--emergency .bottom-nav__label {
  color: var(--c-crimson); font-weight: 700;
}

/* Extra body padding when bottom nav is visible */
@media (max-width: 900px) {
  body { padding-bottom: 64px; }
}

/* Back to top (still kept, but moves up to clear bottom nav) */
.back-to-top {
  position: fixed; right: 1rem; bottom: 1rem;
  width: 44px; height: 44px;
  background: var(--c-ink); color: #fff;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-2); z-index: 89;
  opacity: 0; transform: translateY(8px);
  transition: var(--dur) var(--ease);
}
.back-to-top:not([hidden]) { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--c-accent); color: #fff; }
@media (max-width: 900px) {
  .back-to-top { bottom: calc(64px + env(safe-area-inset-bottom, 0) + 1rem); right: .8rem; width: 40px; height: 40px; }
}

/* ============================================================================
   Buttons
   ============================================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.5rem; font-size: 1rem; font-weight: 700; line-height: 1; letter-spacing: .01em; border: 1.5px solid transparent; border-radius: var(--r); cursor: pointer; transition: var(--dur) var(--ease); white-space: nowrap; text-decoration: none !important; }
.btn::after { content: "→"; font-weight: 400; transition: transform var(--dur) var(--ease); }
.btn:hover::after { transform: translateX(3px); }
.btn--sm { padding: .55rem .9rem; font-size: .875rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--c-ink); color: #fff !important; box-shadow: var(--shadow-2); }
.btn--primary:hover { background: var(--c-ink-soft); transform: translateY(-2px); box-shadow: var(--shadow-3); }
.btn--secondary { background: var(--c-paper); color: var(--c-ink) !important; border-color: var(--c-ink); }
.btn--secondary:hover { background: var(--c-ink); color: #fff !important; }
.btn--ghost { background: transparent; color: var(--c-ink) !important; border-color: var(--c-border); }
.btn--ghost:hover { border-color: var(--c-ink); background: var(--c-mist); }
.btn--emergency { background: var(--c-crimson); color: #fff !important; }
.btn--emergency:hover { background: #7E1F1F; }

/* ============================================================================
   Search form
   ============================================================================ */
.search-form { display: flex; gap: .5rem; align-items: stretch; max-width: 100%; }
.search-form__input { flex: 1; padding: .85rem 1rem; border: 1px solid var(--c-border); border-radius: var(--r); font-size: 1rem; background: var(--c-paper); color: var(--c-ink); min-height: 48px; }
.search-form__input:focus { outline: none; border-color: var(--c-ink); }
.search-form__submit { padding: .85rem 1.25rem; min-height: 48px; }

/* ============================================================================
   404 page
   ============================================================================ */
.error-404 { padding: var(--sp-9) 0; text-align: center; }
.error-404__code { font-size: clamp(5rem, 4rem + 6vw, 9rem); font-weight: 800; color: var(--c-accent); letter-spacing: -.04em; line-height: 1; margin: 0 0 1rem; font-variant-numeric: tabular-nums; }
.error-404__title { font-size: var(--fs-h2); margin: 0 0 .75rem; }
.error-404__lede { color: var(--c-text-mute); margin: 0 0 2rem; }
.error-404__search { margin-bottom: 2rem; max-width: 480px; margin-inline: auto; }
.error-404__links { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ============================================================================
   Page LP (front-page / landing pages — full bleed)
   ============================================================================ */
.page-lp { display: block; }

/* The LP HTML uses .wn-* class names from before; map them to the new tokens. */
.wn-hero { position: relative; padding-block: clamp(4rem, 3rem + 5vw, 7.5rem); background: var(--c-mist); overflow: hidden; }
.wn-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--c-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: .15;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 70%);
}
.wn-hero-inner { max-width: 1100px; margin-inline: auto; padding-inline: var(--gutter); position: relative; }
.wn-hero-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-accent); background: var(--c-accent-soft);
  padding: .45rem 1rem; border-radius: var(--r-pill); margin-bottom: 1.5rem;
}
.wn-hero-tag::before { content: ""; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.wn-hero-title { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 800; color: var(--c-ink); margin: 0 0 1.5rem; letter-spacing: -.018em; text-wrap: balance; max-width: 26ch; }
.wn-hero-title em { font-style: normal; color: var(--c-accent); display: block; margin-top: .25em; }
.wn-hero-body { font-size: var(--fs-lede); line-height: 1.9; color: var(--c-text-mute); max-width: 58ch; margin: 0 0 2rem; }
.wn-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

.wn-section { padding-block: var(--section-y); }
.wn-section-compact { padding-block: var(--section-y-tight); }
.wn-wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wn-wrap-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.wn-band-mist { background: var(--c-mist); }
.wn-band-mist-2 { background: var(--c-mist-2); }
.wn-band-ink { background: var(--c-ink); color: #fff; }

.wn-section-center { text-align: center; }
.wn-section-eyebrow {
  display: inline-block; font-size: .8125rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--c-accent); position: relative; padding-left: 2.25rem; margin: 0 0 1rem;
}
.wn-section-center .wn-section-eyebrow { padding-left: 0; }
.wn-section-eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 1.5rem; height: 1px; background: currentColor; transform: translateY(-50%); }
.wn-section-center .wn-section-eyebrow::before { content: none; }
.wn-section-title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 800; color: var(--c-ink); margin: 0 0 1rem; text-wrap: balance; }
.wn-section-title em { font-style: normal; color: var(--c-accent); }
.wn-section-lede { font-size: var(--fs-lede); line-height: 1.85; color: var(--c-text-mute); max-width: 64ch; margin: 0 0 var(--sp-8); }
.wn-section-center .wn-section-lede { margin-inline: auto; }

/* Trust bar */
.wn-trust { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; margin-top: var(--sp-7); }
.wn-trust-item { background: var(--c-paper); padding: 1.5rem 1.25rem; text-align: center; }
.wn-trust-num { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); font-weight: 800; color: var(--c-ink); line-height: 1.05; margin-bottom: .35rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.wn-trust-num--placeholder { color: var(--c-border); font-weight: 600; font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); }
.wn-trust-label { font-size: .9375rem; font-weight: 600; color: var(--c-text-mute); }
@media (min-width: 640px) { .wn-trust { grid-template-columns: repeat(3, 1fr); } }

/* Services */
.wn-services { display: grid; gap: 1.25rem; margin-top: var(--sp-7); }
@media (min-width: 700px) { .wn-services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .wn-services { grid-template-columns: repeat(3, 1fr); } }
.wn-svc, .wn-service-card { position: relative; background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); display: flex; flex-direction: column; gap: 1rem; transition: var(--dur) var(--ease); text-decoration: none !important; color: var(--c-text) !important; }
.wn-svc:hover, .wn-service-card:hover { transform: translateY(-3px); border-color: var(--c-ink); box-shadow: var(--shadow-3); color: var(--c-text) !important; }
.wn-svc-icon, .wn-service-icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r); background: var(--c-mist); color: var(--c-ink); }
.wn-svc-icon svg { width: 30px; height: 30px; stroke-width: 1.75; }
.wn-svc[data-tone="emergency"] .wn-svc-icon { background: var(--c-crimson-bg); color: var(--c-crimson); }
.wn-svc[data-tone="recovery"]  .wn-svc-icon { background: var(--c-accent-soft); color: var(--c-accent); }
.wn-svc[data-tone="maintain"]  .wn-svc-icon { background: var(--c-sage-bg); color: var(--c-sage); }
.wn-svc-title, .wn-service-title { font-size: var(--fs-h3); font-weight: 700; margin: 0; color: var(--c-ink); line-height: 1.45; letter-spacing: -.005em; }
.wn-svc-body, .wn-service-body { font-size: var(--fs-base); line-height: 1.85; color: var(--c-text-mute); margin: 0; flex: 1; }
.wn-svc-link, .wn-service-link { margin-top: auto; font-size: .9375rem; font-weight: 700; color: var(--c-ink) !important; display: inline-flex; align-items: center; gap: .35rem; border-bottom: 2px solid var(--c-accent); padding-bottom: .25rem; align-self: flex-start; text-decoration: none !important; }
.wn-svc-link::after { content: "→"; transition: transform var(--dur) var(--ease); }
.wn-svc:hover .wn-svc-link::after { transform: translateX(3px); }

/* Cases */
.wn-cases { display: grid; gap: 1.25rem; margin-top: var(--sp-7); }
@media (min-width: 700px) { .wn-cases { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .wn-cases { grid-template-columns: repeat(3, 1fr); } }
.wn-case { display: flex; flex-direction: column; gap: .75rem; background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r); padding: clamp(1.25rem, .9rem + 1vw, 1.75rem); text-decoration: none !important; color: var(--c-text) !important; transition: var(--dur) var(--ease); position: relative; overflow: hidden; }
.wn-case::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 28px 28px 0; border-color: transparent var(--c-border-soft) transparent transparent; transition: border-color var(--dur) var(--ease); }
.wn-case:hover { transform: translateY(-2px); border-color: var(--c-ink); box-shadow: var(--shadow-2); color: var(--c-text) !important; }
.wn-case:hover::after { border-color: transparent var(--c-accent) transparent transparent; }
.wn-case-tag { display: inline-flex; align-items: center; font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent); background: var(--c-accent-soft); padding: .3rem .7rem; border-radius: var(--r-sm); align-self: flex-start; }
.wn-case-title { font-size: 1.0625rem; line-height: 1.55; font-weight: 700; margin: 0; color: var(--c-ink); letter-spacing: -.005em; }
.wn-case-symptom { font-size: .9375rem; line-height: 1.85; color: var(--c-text-mute); margin: 0; }

/* CTA */
.wn-cta, .cta { margin-block: var(--sp-8) 0; border-radius: var(--r-lg); overflow: hidden; }
.wn-cta-inner, .cta__inner { padding: clamp(1.75rem, 1rem + 3vw, 3rem); display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.wn-cta-title, .cta__title { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem); font-weight: 800; line-height: 1.35; margin: 0; text-wrap: balance; }
.wn-cta-body, .cta__body { font-size: var(--fs-base); line-height: 1.9; margin: 0; }
.wn-cta-actions, .cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }

.wn-cta-emergency, .cta--emergency { background: linear-gradient(135deg, var(--c-crimson-bg), #FDF6F4); border: 1px solid #F5D0CB; }
.wn-cta-emergency .wn-cta-title, .cta--emergency .cta__title { color: var(--c-crimson); }
.wn-cta-emergency .wn-cta-body, .cta--emergency .cta__body { color: #5C2222; }
.wn-cta-emergency .btn--primary, .cta--emergency .btn--primary { background: var(--c-crimson); }
.wn-cta-emergency .btn--primary:hover, .cta--emergency .btn--primary:hover { background: #7E1F1F; }

.wn-cta-high, .cta--high { background: var(--c-ink); color: #fff; position: relative; overflow: hidden; }
.wn-cta-high::before, .cta--high::before { content: ""; position: absolute; width: 320px; height: 320px; background: radial-gradient(circle, rgba(255, 111, 61,.22), transparent 70%); top: -120px; right: -80px; pointer-events: none; }
.wn-cta-high .wn-cta-title, .cta--high .cta__title { color: #fff; }
.wn-cta-high .wn-cta-body,  .cta--high .cta__body  { color: rgba(255,255,255,.85); }
.wn-cta-high .btn--primary, .cta--high .btn--primary { background: var(--c-accent); }
.wn-cta-high .btn--primary:hover, .cta--high .btn--primary:hover { background: var(--c-accent-deep); }
.wn-cta-high .btn--secondary, .cta--high .btn--secondary { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.4); }
.wn-cta-high .btn--secondary:hover, .cta--high .btn--secondary:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff !important; }

.wn-cta-mid, .cta--mid { background: var(--c-mist); border: 1px solid var(--c-border); }
.wn-cta-low, .cta--low { background: var(--c-paper); border: 1px solid var(--c-border); }

/* Profile */
.wn-profile { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); box-shadow: var(--shadow-1); }
@media (min-width: 700px) { .wn-profile { grid-template-columns: 200px 1fr; gap: 2rem; } }
.wn-profile-avatar { width: 140px; height: 140px; border-radius: 50%; background: linear-gradient(135deg, var(--c-ink), var(--c-ink-soft)); color: var(--c-mist); display: flex; align-items: center; justify-content: center; font-size: 3.5rem; font-weight: 800; letter-spacing: -.04em; margin-inline: auto; box-shadow: var(--shadow-2); }
@media (min-width: 700px) { .wn-profile-avatar { width: 180px; height: 180px; font-size: 4.5rem; } }
.wn-profile-name { font-size: 1.25rem; font-weight: 700; color: var(--c-ink); margin: 0 0 .35rem; }
.wn-profile-role { font-size: .9375rem; color: var(--c-text-mute); margin: 0 0 1rem; font-weight: 500; }
.wn-profile-bio { font-size: var(--fs-base); line-height: 1.95; color: var(--c-text); margin: 0 0 1rem; }
.wn-profile-meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.wn-profile-meta span { font-size: .8125rem; background: var(--c-mist); border: 1px solid var(--c-border); color: var(--c-text); padding: .3rem .7rem; border-radius: var(--r-pill); font-weight: 500; }

/* FAQ */
.wn-faq details { background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r); padding: 1.1rem 1.4rem; margin-bottom: .75rem; transition: border-color var(--dur) var(--ease); }
.wn-faq details[open] { border-color: var(--c-ink); }
.wn-faq summary { font-weight: 700; font-size: 1rem; cursor: pointer; list-style: none; position: relative; padding-right: 2rem; color: var(--c-ink); line-height: 1.6; }
.wn-faq summary::-webkit-details-marker { display: none; }
.wn-faq summary::after { content: ""; position: absolute; right: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: linear-gradient(var(--c-accent), var(--c-accent)) center/100% 2px no-repeat, linear-gradient(var(--c-accent), var(--c-accent)) center/2px 100% no-repeat; transition: transform var(--dur) var(--ease); }
.wn-faq details[open] summary::after { transform: rotate(90deg); background: linear-gradient(var(--c-accent), var(--c-accent)) center/100% 2px no-repeat; }
.wn-faq details > div { font-size: var(--fs-base); line-height: 1.9; color: var(--c-text-mute); padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--c-border); }

/* Pricing */
.wn-pricing { display: grid; gap: 1.25rem; margin-top: var(--sp-7); }
@media (min-width: 720px) { .wn-pricing { grid-template-columns: repeat(3, 1fr); } }
.wn-price-card { background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); position: relative; display: flex; flex-direction: column; }
.wn-price-card.is-featured { border: 2px solid var(--c-ink); }
@media (min-width: 720px) { .wn-price-card.is-featured { transform: scale(1.03); box-shadow: var(--shadow-3); } }
.wn-price-card.is-featured::before { content: "おすすめ"; position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); background: var(--c-accent); color: #fff; padding: .35rem 1.1rem; border-radius: var(--r-pill); font-size: .8125rem; font-weight: 700; }
.wn-price-tier { font-size: .8125rem; font-weight: 800; color: var(--c-accent); letter-spacing: .18em; text-transform: uppercase; margin-bottom: .5rem; }
.wn-price-amount { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; color: var(--c-ink); margin: 0; }
.wn-price-amount small { font-size: .9375rem; font-weight: 500; color: var(--c-text-mute); margin-left: .4rem; }
.wn-price-term { display: grid; gap: .25rem; margin: .85rem 0 1rem; padding: .75rem .9rem; border: 1px solid rgba(242,107,34,.28); border-radius: 12px; background: rgba(242,107,34,.1); color: var(--c-accent-deep); font-weight: 900; line-height: 1.35; }
.wn-price-term span { display: block; font-size: clamp(1rem, .95rem + .3vw, 1.18rem); white-space: nowrap; }
.wn-price-term small { display: block; color: var(--c-ink); font-size: .78rem; font-weight: 800; }
html[data-theme="dark"] .wn-price-term { background: rgba(242,107,34,.16); border-color: rgba(242,107,34,.42); color: #FFB076; }
html[data-theme="dark"] .wn-price-term small { color: rgba(232,238,247,.9); }
.wn-price-note { font-size: .9375rem; color: var(--c-text-mute); margin: .5rem 0 1.25rem; line-height: 1.7; }
.wn-price-multi-note { max-width: 760px; margin: 1.25rem auto 0; padding: .85rem 1rem; border-left: 3px solid rgba(242,107,34,.45); border-radius: 10px; background: rgba(242,107,34,.08); color: var(--c-text-mute); font-size: .9rem; line-height: 1.75; }
html[data-theme="dark"] .wn-price-multi-note { background: rgba(242,107,34,.13); color: rgba(232,238,247,.88); }
.wn-price-features { list-style: none; padding: 0; margin: 0 0 1.25rem; flex: 1; }
.wn-price-features li { padding: .6rem 0 .6rem 1.5rem; font-size: .9375rem; line-height: 1.65; border-bottom: 1px solid var(--c-border-soft); color: var(--c-text); position: relative; }
.wn-price-features li:last-child { border-bottom: 0; }
.wn-price-features li::before { content: ""; position: absolute; left: 0; top: 1.1rem; width: .85rem; height: .45rem; border-left: 2px solid var(--c-sage); border-bottom: 2px solid var(--c-sage); transform: rotate(-45deg); }

/* Flow */
.wn-flow { display: grid; gap: 1.25rem; margin-top: var(--sp-7); counter-reset: wn-step; }
@media (min-width: 700px) { .wn-flow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .wn-flow { grid-template-columns: repeat(4, 1fr); } }
.wn-flow-step { background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); position: relative; counter-increment: wn-step; }
.wn-flow-step::before { content: counter(wn-step, decimal-leading-zero); display: block; font-size: 1.5rem; font-weight: 800; color: var(--c-accent); font-variant-numeric: tabular-nums; margin-bottom: .75rem; line-height: 1; letter-spacing: -.02em; }
.wn-flow-step-title { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; color: var(--c-ink); }
.wn-flow-step-body { font-size: .9375rem; line-height: 1.85; color: var(--c-text-mute); margin: 0; }

/* Compare */
.wn-compare { display: grid; gap: 1.25rem; margin-top: var(--sp-7); }
@media (min-width: 700px) { .wn-compare { grid-template-columns: repeat(2, 1fr); } }
.wn-compare-card { background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.wn-compare-card.is-recommended { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.wn-compare-card.is-recommended .wn-compare-title { color: #fff; }
.wn-compare-card.is-recommended li { color: rgba(255,255,255,.92); border-color: rgba(255,255,255,.18); }
.wn-compare-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 .5rem; color: var(--c-ink); }
.wn-compare-tag { display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .12em; padding: .3rem .75rem; border-radius: var(--r-pill); margin-bottom: 1rem; background: var(--c-accent); color: #fff; }
.wn-compare-card ul { list-style: none; padding: 0; margin: 0; }
.wn-compare-card ul li { padding: .65rem 0; font-size: .9375rem; line-height: 1.7; border-bottom: 1px solid var(--c-border-soft); }
.wn-compare-card ul li:last-child { border-bottom: 0; }

/* ============================================================================
   Speech bubble (Navigator block / shortcode)
   Style variants: bubble / think / shout / card
   Expression variants: normal / smile / troubled / surprised / sad
   ============================================================================ */
.speech {
  --bubble-bg: var(--c-mist);
  --bubble-color: var(--c-text);
  display: flex; gap: 1rem;
  margin: 1.75rem 0;
  align-items: flex-start;
}
.speech--right { flex-direction: row-reverse; }
.speech__avatar { flex-shrink: 0; width: 84px; text-align: center; }
.speech__avatar-img,
.speech__face-fallback {
  width: 76px; height: 76px; margin: 0 auto;
  border-radius: 50%; overflow: hidden;
  background: var(--c-mist); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(15, 30, 90,.08);
}
.speech__avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.speech__avatar-fallback, .speech__face-fallback {
  background: var(--c-ink); color: var(--c-mist);
  font-weight: 800; font-size: 1.6rem;
}
.speech__name {
  display: inline-block; margin-top: .45rem;
  font-size: .8125rem; font-weight: 600; color: var(--c-text-mute);
}

.speech__bubble {
  flex: 1; position: relative;
  background: var(--bubble-bg); color: var(--bubble-color);
  padding: 1.1rem 1.3rem;
  border-radius: var(--r-lg);
  min-width: 0;  /* flex shrink ok */
}
.speech__text { line-height: 1.85; }
.speech__text p:last-child { margin-bottom: 0; }

/* Tail (bubble default) */
.speech--style-bubble.speech--left  .speech__bubble::before,
.speech--style-bubble.speech--right .speech__bubble::before {
  content: ""; position: absolute; top: 1.2rem; width: 0; height: 0; border-style: solid;
}
.speech--style-bubble.speech--left  .speech__bubble::before { left: -10px;  border-width: 9px 12px 9px 0; border-color: transparent var(--bubble-bg) transparent transparent; }
.speech--style-bubble.speech--right .speech__bubble::before { right: -10px; border-width: 9px 0 9px 12px; border-color: transparent transparent transparent var(--bubble-bg); }

/* Style: think (cloud) */
.speech--style-think .speech__bubble {
  border-radius: 32px;
  padding: 1.25rem 1.6rem;
}
.speech--style-think .speech__bubble::before { content: none !important; }
.speech--style-think .speech__bubble::after {
  content: ""; position: absolute; top: 100%; margin-top: 6px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--bubble-bg);
  box-shadow:
    -18px 8px 0 -5px var(--bubble-bg),
    -32px 14px 0 -8px var(--bubble-bg);
}
.speech--style-think.speech--left  .speech__bubble::after { left: 16px; }
.speech--style-think.speech--right .speech__bubble::after {
  right: 16px;
  box-shadow:
    18px 8px 0 -5px var(--bubble-bg),
    32px 14px 0 -8px var(--bubble-bg);
}

/* Style: shout (jagged star-ish) */
.speech--style-shout .speech__bubble {
  border-radius: 6px;
  padding: 1.4rem 1.6rem;
  clip-path: polygon(
    0% 6%, 6% 0%, 14% 6%, 22% 0%, 30% 6%, 40% 0%, 50% 6%, 60% 0%, 70% 6%, 80% 0%, 90% 6%, 100% 0%,
    96% 50%,
    100% 100%, 90% 94%, 80% 100%, 70% 94%, 60% 100%, 50% 94%, 40% 100%, 30% 94%, 22% 100%, 14% 94%, 6% 100%, 0% 94%,
    4% 50%
  );
}
.speech--style-shout .speech__bubble::before,
.speech--style-shout .speech__bubble::after { content: none !important; }

/* Style: card (rounded rectangle, no tail) */
.speech--style-card .speech__bubble {
  border-radius: 12px;
  border: 1px solid rgba(15, 30, 90,.08);
  box-shadow: var(--shadow-1);
}
.speech--style-card .speech__bubble::before,
.speech--style-card .speech__bubble::after { content: none !important; }

/* Subtle expression flair (animation on hover; reduced-motion safe) */
@media (prefers-reduced-motion: no-preference) {
  .speech--exp-surprised .speech__avatar-img { animation: wnPulse 1.6s ease-in-out infinite; }
  @keyframes wnPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
  }
}

/* Mobile collapse */
@media (max-width: 520px) {
  .speech { gap: .75rem; }
  .speech__avatar { width: 64px; }
  .speech__avatar-img, .speech__face-fallback { width: 56px; height: 56px; }
  .speech__bubble { padding: .9rem 1.05rem; font-size: .9375rem; }
}

/* Legacy shortcode classes for backward compat */
.speech--left .speech__bubble::before, .speech--right .speech__bubble::before {
  content: ""; position: absolute; top: 1rem; width: 0; height: 0; border-style: solid;
}
.speech--left:not(.speech--style-think):not(.speech--style-shout):not(.speech--style-card) .speech__bubble::before { left: -8px; border-width: 8px 10px 8px 0; border-color: transparent var(--bubble-bg) transparent transparent; }
.speech--right:not(.speech--style-think):not(.speech--style-shout):not(.speech--style-card) .speech__bubble::before { right: -8px; border-width: 8px 0 8px 10px; border-color: transparent transparent transparent var(--bubble-bg); }

/* ============================================================================
   Design heading block (wn/design-heading)
   ============================================================================ */
.dh { margin: 2rem 0 1.5rem; }
.dh__eyebrow {
  display: inline-block; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 800; color: var(--c-accent); margin-bottom: .5rem;
}
.dh__text { color: var(--c-ink); font-weight: 800; line-height: 1.35; letter-spacing: -.005em; margin: 0; }
.dh--lv2 .dh__text { font-size: var(--fs-h2); }
.dh--lv3 .dh__text { font-size: var(--fs-h3); }
.dh--lv4 .dh__text { font-size: var(--fs-lede); }

/* Variant: number (with auto-numbering via counter) */
.dh--number {
  counter-reset: dh-count;
  padding-left: 4.2rem;
  position: relative;
}
.dh--number::before {
  content: counter(dh-counter, decimal-leading-zero);
  counter-increment: dh-counter;
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-size: clamp(2rem, 1.6rem + 1vw, 2.75rem);
  font-weight: 800; color: var(--c-accent);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1;
}
/* Use a single counter across the page for design heading numbers */
.prose, .page-lp { counter-reset: dh-counter; }

/* Variant: rule (left vertical line) */
.dh--rule { border-left: 4px solid var(--c-accent); padding-left: 1rem; }

/* Variant: tag (filled background) */
.dh--tag .dh__text {
  display: inline-block;
  background: var(--c-ink); color: #fff;
  padding: .35em .85em; border-radius: 6px;
  font-size: 1.25rem;
}

/* Variant: card (boxed) */
.dh--card {
  background: var(--c-mist);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--c-accent);
  border-radius: var(--r);
  padding: 1.25rem 1.5rem;
}
.dh--card .dh__eyebrow { color: var(--c-accent); }

/* Editor-inside parity hint */
.editor-styles-wrapper .dh--number { padding-left: 4.2rem; }
.editor-styles-wrapper .dh--number::before { content: "01"; }

/* Callout / Box */
.callout { border-radius: var(--r); padding: 1rem 1.25rem; margin: 1.5rem 0; border-left: 4px solid var(--c-ink); background: var(--c-mist); }
.callout__title { font-weight: 800; margin: 0 0 .5rem; color: var(--c-ink); }
.callout__body { font-size: var(--fs-sm); line-height: 1.85; color: var(--c-text); }
.callout--info  { border-left-color: var(--c-ink); }
.callout--tip   { border-left-color: var(--c-sage); background: var(--c-sage-bg); }
.callout--warn  { border-left-color: #E6B800; background: var(--c-warn-bg); }
.callout--danger{ border-left-color: var(--c-crimson); background: var(--c-crimson-bg); }
.callout--danger .callout__title { color: var(--c-crimson); }

/* Time annotation banner */
.wn-time-annotation { background: linear-gradient(135deg, var(--c-warn-bg), #FCF8E0); border-left: 4px solid #E6B800; border-radius: var(--r); padding: 1rem 1.25rem; margin-bottom: var(--sp-6); font-size: .9375rem; line-height: 1.85; }
.wn-time-annotation strong { color: #8C6B00; }

/* Sidebar legacy */
.wn-sidebar-cta { background: var(--c-ink); color: #fff; padding: 1.25rem; border-radius: var(--r-lg); margin-bottom: 1.25rem; position: relative; overflow: hidden; }
.wn-sidebar-cta::before { content: ""; position: absolute; width: 200px; height: 200px; top: -80px; right: -60px; background: radial-gradient(circle, rgba(255, 111, 61,.22), transparent 70%); }
.wn-sidebar-cta-title { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; color: #fff; line-height: 1.55; position: relative; }
.wn-sidebar-cta-body { font-size: .875rem; line-height: 1.75; color: rgba(255,255,255,.85); margin: 0 0 1rem; position: relative; }
.wn-sidebar-cta .wn-btn, .wn-sidebar-cta .btn { width: 100%; background: var(--c-accent); color: #fff !important; }
.wn-sidebar-cta .wn-btn:hover, .wn-sidebar-cta .btn:hover { background: var(--c-accent-deep); }
.wn-sidebar-card { background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r); padding: 1rem; margin-bottom: 1rem; }
.wn-sidebar-card-title { font-size: .75rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 .75rem; border-bottom: 1.5px solid var(--c-mist-2); padding-bottom: .55rem; }
.wn-sidebar-card ul { list-style: none; margin: 0; padding: 0; }
.wn-sidebar-card li a { display: block; padding: .55rem 0; font-size: .875rem; line-height: 1.55; color: var(--c-text); text-decoration: none; border-bottom: 1px dashed var(--c-border-soft); }
.wn-sidebar-card li:last-child a { border-bottom: 0; }
.wn-sidebar-card li a:hover { color: var(--c-accent); }

/* Checklist */
.wn-checklist { list-style: none; padding: 0; margin: var(--sp-5) auto 0; max-width: 720px; display: grid; gap: .75rem; }
.wn-checklist li { background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r); padding: .9rem 1.1rem .9rem 2.6rem; font-size: var(--fs-base); line-height: 1.7; color: var(--c-text); position: relative; }
.wn-checklist li::before { content: ""; position: absolute; left: 1rem; top: 1.2rem; width: .95rem; height: .55rem; border-left: 2.5px solid var(--c-sage); border-bottom: 2.5px solid var(--c-sage); transform: rotate(-45deg); }
.wn-checklist.is-negative li { background: var(--c-crimson-bg); border-color: #F5D0CB; }
.wn-checklist.is-negative li::before { border: none; width: 14px; height: 14px; left: 1rem; top: 1.05rem; background: linear-gradient(45deg, transparent 45%, var(--c-crimson) 45%, var(--c-crimson) 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--c-crimson) 45%, var(--c-crimson) 55%, transparent 55%); transform: none; }

/* Print */
@media print {
  .site-header, .site-footer, .sidebar, .breadcrumb-wrap, .post-nav, .related, .cta, .wn-cta, .nav-toggle, .back-to-top, .emergency-band { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}