/* リーガリスト デザインシステム v1 — 信頼性重視のエディトリアル */
:root {
  --navy: #16233b;
  --navy-2: #21375e;
  --accent: #b8933e;      /* 抑制されたゴールド */
  --ink: #1e2430;
  --ink-2: #4a5468;
  --line: #dfe3ea;
  --bg: #ffffff;
  --bg-alt: #f5f6f8;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", -apple-system, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.85; font-size: 16px; }
a { color: var(--navy-2); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 760px; }

/* header */
.site-header { border-bottom: 1px solid var(--line); background: #fff; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: .05em; }
.logo-en { font-size: 10px; letter-spacing: .3em; color: var(--accent); margin-left: 8px; vertical-align: middle; }
.global-nav a { margin-left: 22px; font-size: 14px; color: var(--ink); }
.nav-soon { color: var(--ink-2); opacity: .55; cursor: default; pointer-events: none; }

/* hero */
.hero { background: var(--navy); color: #fff; padding: 72px 0; }
.hero h1 { font-family: var(--serif); font-size: 34px; letter-spacing: .04em; margin-bottom: 16px; }
.hero-desc { max-width: 620px; color: #c9d2e2; font-size: 15px; }

/* sections */
.section { padding: 56px 0; }
.section.alt { background: var(--bg-alt); }
.section-title { font-family: var(--serif); font-size: 24px; color: var(--navy); margin-bottom: 28px; border-left: 4px solid var(--accent); padding-left: 14px; }
.more { margin-top: 24px; text-align: right; }

/* suite cards */
.suite-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.suite-card { border: 1px solid var(--line); border-top: 3px solid var(--navy); padding: 24px; background: #fff; }
.suite-card.inactive { opacity: .6; }
.suite-card h3 { font-size: 16px; color: var(--navy); margin-bottom: 8px; }
.suite-card p { font-size: 13.5px; color: var(--ink-2); margin-bottom: 14px; }
.btn { display: inline-block; background: var(--navy); color: #fff; padding: 8px 22px; font-size: 13px; border-radius: 2px; }
.btn:hover { background: var(--navy-2); text-decoration: none; }
.coming-soon { display: inline-block; font-size: 12px; color: var(--accent); border: 1px solid var(--accent); padding: 4px 12px; border-radius: 2px; }

/* article cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.card { border: 1px solid var(--line); background: #fff; padding: 22px; }
.card-meta { font-size: 12px; color: var(--ink-2); margin-bottom: 10px; }
.badge { display: inline-block; background: var(--bg-alt); color: var(--navy); font-size: 11px; padding: 2px 10px; margin-right: 8px; border: 1px solid var(--line); }
.card-title { font-size: 16.5px; line-height: 1.6; margin-bottom: 10px; }
.card-title a { color: var(--ink); }
.card-desc { font-size: 13px; color: var(--ink-2); }

/* list page */
.page-head { background: var(--bg-alt); padding: 44px 0 28px; border-bottom: 1px solid var(--line); }
.page-head h1 { font-family: var(--serif); font-size: 28px; color: var(--navy); }
.lede { color: var(--ink-2); font-size: 14px; margin: 10px 0 20px; }
.cat-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.cat-link { font-size: 13px; border: 1px solid var(--line); background: #fff; padding: 5px 14px; border-radius: 20px; }
.cat-link.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* article */
.article { padding: 48px 0 64px; }
.breadcrumb { font-size: 12.5px; color: var(--ink-2); margin-bottom: 18px; }
.article-title { font-family: var(--serif); font-size: 30px; line-height: 1.5; color: var(--navy); margin-bottom: 14px; }
.article-meta { font-size: 13px; color: var(--ink-2); }
.supervisor { font-size: 13px; color: var(--ink-2); background: var(--bg-alt); display: inline-block; padding: 4px 14px; margin-top: 10px; border-left: 3px solid var(--accent); }
.article-body { margin-top: 36px; }
.article-body h2 { font-family: var(--serif); font-size: 22px; color: var(--navy); margin: 44px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--line); }
.article-body h3 { font-size: 17px; color: var(--navy); margin: 32px 0 12px; }
.article-body p { margin-bottom: 18px; }
.article-body ul, .article-body ol { margin: 0 0 18px 24px; }
.article-body table { border-collapse: collapse; width: 100%; margin-bottom: 18px; font-size: 14px; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.article-body th { background: var(--bg-alt); }
.article-body blockquote { border-left: 3px solid var(--accent); padding: 4px 18px; color: var(--ink-2); margin-bottom: 18px; }
.article-disclaimer { margin-top: 40px; font-size: 12.5px; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 16px; }

/* related products */
.related-products { margin-top: 48px; background: var(--bg-alt); padding: 24px; }
.related-products h2 { font-size: 17px; color: var(--navy); margin-bottom: 16px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.product-card { background: #fff; border: 1px solid var(--line); padding: 18px; }
.product-name { font-size: 14.5px; font-weight: 600; color: var(--navy); }
.product-price { font-size: 13px; color: var(--accent); margin: 6px 0; }
.product-desc { font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; }

/* product page */
.product-price-lg { font-size: 24px; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.product-price-lg .tax { font-size: 13px; color: var(--ink-2); font-weight: 400; margin-left: 4px; }
.positions { margin-bottom: 10px; }
.purchase-box { background: var(--bg-alt); border: 1px solid var(--line); padding: 24px; margin-top: 32px; text-align: center; }
.btn-buy { font-size: 15px; padding: 12px 40px; }
.purchase-note { font-size: 12.5px; color: var(--ink-2); margin-top: 12px; }

/* footer */
.site-footer { background: var(--navy); color: #aeb9cd; margin-top: 40px; padding: 36px 0; font-size: 12.5px; }
.disclaimer { max-width: 720px; margin-bottom: 18px; }
.footer-nav a { color: #d5dce8; margin-right: 18px; }
.copyright { margin-top: 16px; color: #7484a0; }

@media (max-width: 640px) {
  .global-nav a { margin-left: 12px; font-size: 12px; }
  .hero h1 { font-size: 24px; }
  .article-title { font-size: 24px; }
}