.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--charcoal);
    color: var(--charcoal);
    background: transparent;
    padding: 15px 34px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: background .25s ease, color .25s ease;
  }
  .btn-ghost:hover { background: var(--charcoal); color: var(--white); }
  .btn-ghost svg { width: 14px; height: 14px; stroke-width: 1.8; transition: transform .25s var(--ease); }
  .btn-ghost:hover svg { transform: translateX(-4px); }

  /* ---------- Breadcrumb ---------- */
  .breadcrumb {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 12px; letter-spacing: 0.04em; color: var(--ink-faint); margin-bottom: 28px;
  }
  .breadcrumb a { color: var(--ink-soft); transition: color .2s ease; }
  .breadcrumb a:hover { color: var(--cta); }

  /* ---------- Article ---------- */
  .article-hero { background: var(--paper); }
  .article-hero-inner { max-width: 760px; margin: 0 auto; padding: 56px 24px 64px; text-align: center; }
  .article-meta {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-bottom: 22px; flex-wrap: wrap;
  }
  .article-date { font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
  .article-tag {
    display: inline-block;
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em;
    padding: 6px 16px; border-radius: 999px;
    background: var(--white); border: 1px solid var(--line-soft); color: var(--taupe-dark);
  }
  .article-hero h1 {
    font-size: 23px; font-weight: 500; letter-spacing: 0.03em; line-height: 1.7;
    color: var(--charcoal); margin: 0;
  }

  /*
    .article-body 配下の p / ul / ol は the_content() がそのまま出力するタグに対して
    当たるよう、クラス名なしの汎用セレクタにしています。スタッフがブロックエディタで
    段落や箇条書きを書くだけで、このデザインが自動適用されます。
  */
  .article-body { max-width: 680px; margin: 0 auto; }
  .article-body p {
    font-size: 15px; letter-spacing: 0.02em; line-height: 2.1;
    color: var(--ink-soft); margin: 0 0 32px;
  }
  .article-body ul, .article-body ol {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    padding: 28px 26px;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .article-body li {
    font-size: 14.5px; letter-spacing: 0.01em; line-height: 1.9;
    color: var(--charcoal);
  }
  .article-body ul li { padding-left: 20px; position: relative; list-style: none; }
  .article-body ul li::before { content: "—"; position: absolute; left: 0; color: var(--taupe-dark); }
  .article-body ol { padding-left: 44px; }
  .article-body ol li { padding-left: 4px; }

  .article-footer {
    max-width: 680px; margin: 56px auto 0;
    padding-top: 40px;
    border-top: 1px solid var(--line-soft);
    text-align: center;
  }

  @media (min-width: 860px) {
    .article-hero-inner { padding: 72px 40px 88px; }
    .article-hero h1 { font-size: 28px; }
  }