/* ==========================================================================
   PinRich logo — mark (rounded square with 'P') + wordmark.
   --------------------------------------------------------------------------
   2 color variants only, sourced from tokens:

     • Default (corporate)  — mark = --primary (navy), wordmark = --foreground.
                              Use on white / muted / card backgrounds.
     • Inverse (white-out)  — mark = --primary-foreground (white) on primary,
                              wordmark = --primary-foreground.
                              Use on --primary backgrounds (top-page header,
                              hero, dark CTA, footer top-strip).

   No mono / black variant exists. The two variants above cover every brand
   surface; black-only output is intentionally not supported.

   The brand name in the wordmark is fixed: `PinRich` (PascalCase). In
   running copy use the katakana 「ピンリッチ」 instead. Never mix
   `PINRICH` / `Pinrich` / `Pin Rich` anywhere in the wordmark or text.
   ========================================================================== */

.pr-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.pr-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  flex-shrink: 0;
}
.pr-logo-text {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--foreground);
  white-space: nowrap;
  line-height: 1;
}

/* Sizes — md is the header default; lg/xl appear in footer/hero */
.pr-logo--sm { gap: 6px; }
.pr-logo--sm .pr-logo-mark { width: 16px; height: 16px; border-radius: var(--radius-sm); font-size: 10px; }
.pr-logo--sm .pr-logo-text { font-size: var(--text-body-md); }

.pr-logo--md { gap: 8px; }
.pr-logo--md .pr-logo-mark { width: 22px; height: 22px; border-radius: var(--radius-sm); font-size: 14px; }
.pr-logo--md .pr-logo-text { font-size: var(--text-body-lg); }

.pr-logo--lg { gap: 10px; }
.pr-logo--lg .pr-logo-mark { width: 32px; height: 32px; border-radius: var(--radius); font-size: 18px; }
.pr-logo--lg .pr-logo-text { font-size: var(--text-display-sm); }

.pr-logo--xl { gap: 12px; }
.pr-logo--xl .pr-logo-mark { width: 48px; height: 48px; border-radius: var(--radius-lg); font-size: 28px; }
.pr-logo--xl .pr-logo-text { font-size: var(--text-display-md); }

/* Color variants — only the inverse (white-out) is supported.
   The default appearance above already uses corporate navy (--primary). */
.pr-logo--inverse .pr-logo-mark { background: var(--primary-foreground); color: var(--primary); }
.pr-logo--inverse .pr-logo-text { color: var(--primary-foreground); }

/* ==========================================================================
   v4.4（2026-10-26）コーポレートサイト実装からの反映。
   サイト側で部品の値を変えていた箇所を、DS の正として元の順番どおりに取り込んだもの（v4.4.2 で順番を修正）。
   ========================================================================== */
.pr-logo-mark { display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:var(--primary-foreground);font-family:var(--font-sans);font-weight:var(--font-weight-bold);line-height:1;flex-shrink:0 }
.pr-logo-text { font-family:var(--font-sans);font-weight:var(--font-weight-bold);letter-spacing:var(--tracking-tight);color:var(--foreground);white-space:nowrap;line-height:1 }
.pr-logo--sm { gap:8px }
.pr-logo--sm .pr-logo-mark { width:20px;height:20px;border-radius:var(--radius-sm);font-size:12px }
.pr-logo--sm .pr-logo-text { font-size:var(--text-body-md) }
.pr-logo--md { gap:10px }
.pr-logo--md .pr-logo-mark { width:24px;height:24px;border-radius:var(--radius-sm);font-size:14px }
.pr-logo--md .pr-logo-text { font-size:var(--text-body-lg) }
.pr-logo--lg { gap:12px }
.pr-logo--lg .pr-logo-mark { width:32px;height:32px;border-radius:var(--radius-md);font-size:18px }
.pr-logo--lg .pr-logo-text { font-size:var(--text-display-sm) }
.pr-logo--xl { gap:14px }
.pr-logo--xl .pr-logo-mark { width:48px;height:48px;border-radius:var(--radius-md);font-size:26px }
.pr-logo--xl .pr-logo-text { font-size:var(--text-display-md) }
.pr-logo--inverse .pr-logo-mark { background:var(--primary-foreground);color:var(--primary) }
.pr-logo--inverse .pr-logo-text { color:var(--primary-foreground) }
@media (max-width:640px) {
.pr-logo--md { gap:8px }
.pr-logo--md .pr-logo-mark { width:22px;height:22px;font-size:13px }
.pr-logo--md .pr-logo-text { font-size:var(--text-body-md) }
}
html body .pr-logo--sm .pr-logo-mark { border-radius:2px }
html body .pr-logo--md .pr-logo-mark { border-radius:2.67px }
html body .pr-logo--inverse .pr-logo-mark, html body.is-top-page .site-header .pr-logo .pr-logo-mark { background:var(--background) !important;color:var(--primary) !important }
html body .pr-logo--inverse .pr-logo-text, html body.is-top-page .site-header .pr-logo .pr-logo-text { color:var(--primary-foreground) !important }