*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --navy: #0a1628;
    --accent: #0ea5e9;
    --accent-dim: rgba(14,165,233,0.12);
    --accent-border: rgba(14,165,233,0.3);
    --serif: 'Noto Serif JP', serif;
    --sans: 'Noto Sans JP', sans-serif;
    --en: 'Space Grotesk', sans-serif;
  }
  html { scroll-behavior: smooth; }
  body { font-family: var(--sans); background: #0f172a; color: rgba(255,255,255,0.87); line-height: 1.7; font-size: 15px; }

  /* NAV */
  nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10,22,40,0.97); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: space-between; padding: 0 6%; height: 58px; }
  .nav-logo { font-family: var(--en); font-weight: 600; font-size: 18px; color: #fff; letter-spacing: 0.05em; text-decoration: none; }
  .nav-logo span { color: var(--accent); }
  .nav-links { display: flex; gap: 28px; list-style: none; }
  .nav-links a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 12px; letter-spacing: 0.08em; transition: color 0.2s; }
  .nav-links a:hover, .nav-links a.active { color: var(--accent); }
  .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
  .nav-hamburger span { display: block; width: 22px; height: 1.5px; background: rgba(255,255,255,0.7); transition: 0.3s; }

  /* BREADCRUMB */
  .breadcrumb { padding: 80px 6% 0; max-width: 800px; margin: 0 auto; font-size: 12px; color: rgba(255,255,255,0.4); }
  .breadcrumb a { color: rgba(255,255,255,0.4); text-decoration: none; }
  .breadcrumb a:hover { color: var(--accent); }
  .breadcrumb span { margin: 0 6px; }

  /* ARTICLE HERO */
  .article-hero { padding: 24px 6% 40px; max-width: 800px; margin: 0 auto; }
  .article-tag { display: inline-block; font-size: 11px; letter-spacing: 0.08em; color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-border); padding: 3px 10px; border-radius: 4px; font-family: var(--en); margin-bottom: 16px; }
  .article-hero h1 { font-family: var(--serif); font-size: clamp(20px, 3.5vw, 28px); font-weight: 600; line-height: 1.5; margin-bottom: 16px; }
  .article-meta { display: flex; gap: 20px; font-size: 12px; color: rgba(255,255,255,0.4); font-family: var(--en); }
  .article-hero-img { width: 100%; border-radius: 8px; margin-top: 24px; display: block; background: rgba(255,255,255,0.04); }

  /* ARTICLE BODY */
  .article-body { max-width: 800px; margin: 0 auto; padding: 0 6% 60px; }
  .article-body h2 { font-family: var(--serif); font-size: clamp(17px, 2.5vw, 21px); font-weight: 600; margin: 48px 0 16px; padding-left: 16px; border-left: 3px solid var(--accent); line-height: 1.5; }
  .article-body p { margin-bottom: 20px; line-height: 1.9; color: rgba(255,255,255,0.8); }
  .article-body ul { margin: 0 0 20px 20px; }
  .article-body li { margin-bottom: 10px; line-height: 1.8; color: rgba(255,255,255,0.8); }
  .article-body strong { color: #fff; font-weight: 500; }

  /* CTA */
  .article-cta { max-width: 800px; margin: 0 auto; padding: 0 6% 60px; }
  .cta-box { background: rgba(14,165,233,0.08); border: 1px solid var(--accent-border); border-radius: 8px; padding: 32px; text-align: center; }
  .cta-box p { color: rgba(255,255,255,0.7); margin-bottom: 20px; font-size: 14px; }
  .btn-primary { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; padding: 14px 32px; border-radius: 4px; font-size: 14px; letter-spacing: 0.06em; font-weight: 500; transition: background 0.2s; }
  .btn-primary:hover { background: #0284c7; }

  /* POST NAV */
  .post-nav { max-width: 800px; margin: 0 auto; padding: 0 6% 80px; display: flex; justify-content: space-between; }
  .post-nav a { color: rgba(255,255,255,0.5); text-decoration: none; font-size: 13px; transition: color 0.2s; }
  .post-nav a:hover { color: var(--accent); }

  /* FOOTER */
  footer { background: var(--navy); text-align: center; padding: 32px 6%; font-size: 11px; color: rgba(255,255,255,0.3); border-top: 1px solid rgba(255,255,255,0.06); }
  footer a { color: rgba(255,255,255,0.4); text-decoration: none; }

  /* RESPONSIVE */
  @media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-hamburger { display: flex; }
    .nav-links.open { display: flex; flex-direction: column; gap: 0; position: fixed; top: 58px; left: 0; right: 0; background: rgba(10,22,40,0.98); padding: 16px 0; }
    .nav-links.open li a { padding: 14px 6%; display: block; font-size: 14px; }
  }