:root { --brand-orange: #C2410C; --brand-orange-light: #F97316; --brand-orange-bg: #FFF7ED; --brand-orange-border: #FDBA74; --text-primary: #1A1A1A; --text-secondary: #555555; --text-tertiary: #888888; --bg-white: #FFFFFF; --bg-cream: #FAFAF8; --bg-subtle: #F5F5F3; --border-light: #E8E8E5; --red-bg: #FEF2F2; --red-border: #FECACA; --red-text: #991B1B; --green-bg: #F0FDF4; --green-border: #BBF7D0; --green-text: #166534; --font-sans-en: 'DM Sans', sans-serif; --font-sans-jp: 'Noto Sans JP', sans-serif; --font-mono: 'JetBrains Mono', monospace; --content-width: 760px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { font-family: var(--font-sans-jp); color: var(--text-primary); background: var(--bg-white); line-height: 1.9; letter-spacing: 0.02em; } .breadcrumb { max-width: var(--content-width); margin: 0 auto; padding: 1.5rem 1.5rem 0; font-size: 0.75rem; color: var(--text-tertiary); } .breadcrumb a { color: var(--text-tertiary); text-decoration: none; } .breadcrumb a:hover { color: var(--brand-orange); } .breadcrumb span { margin: 0 0.375rem; } .article-hero { max-width: var(--content-width); margin: 0 auto; padding: 2.5rem 1.5rem 2rem; } .article-meta-top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .article-category { display: inline-block; font-family: var(--font-sans-en); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-orange); background: var(--brand-orange-bg); border: 1px solid var(--brand-orange-border); padding: 0.25rem 0.625rem; border-radius: 4px; } .article-date { font-size: 0.8125rem; color: var(--text-tertiary); font-family: var(--font-sans-en); } .article-read-time { font-size: 0.8125rem; color: var(--text-tertiary); } h1 { font-size: clamp(1.625rem, 4vw, 2.125rem); font-weight: 900; line-height: 1.45; letter-spacing: -0.01em; margin-bottom: 1rem; } .article-lead { font-size: 1.0625rem; color: var(--text-secondary); line-height: 1.85; border-left: 3px solid var(--brand-orange); padding-left: 1rem; } .toc-wrapper { max-width: var(--content-width); margin: 0 auto 2.5rem; padding: 0 1.5rem; } .toc { background: var(--bg-subtle); border: 1px solid var(--border-light); border-radius: 10px; padding: 1.5rem 1.75rem; } .toc-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); margin-bottom: 0.875rem; font-family: var(--font-sans-en); } .toc ol { list-style: none; counter-reset: toc-counter; } .toc ol li { counter-increment: toc-counter; margin-bottom: 0.375rem; } .toc ol li a { font-size: 0.9rem; color: var(--text-secondary); text-decoration: none; display: flex; align-items: baseline; gap: 0.5rem; transition: color 0.2s; line-height: 1.6; } .toc ol li a::before { content: counter(toc-counter, decimal-leading-zero); font-family: var(--font-sans-en); font-weight: 700; font-size: 0.75rem; color: var(--brand-orange); flex-shrink: 0; } .toc ol li a:hover { color: var(--brand-orange); } .article-body { max-width: var(--content-width); margin: 0 auto; padding: 0 1.5rem 3rem; } .article-body h2 { font-size: 1.375rem; font-weight: 900; margin: 3.5rem 0 1.25rem; padding-bottom: 0.625rem; border-bottom: 2px solid var(--brand-orange); line-height: 1.5; } .article-body h2:first-of-type { margin-top: 0; } .article-body h3 { font-size: 1.125rem; font-weight: 700; margin: 2.25rem 0 0.875rem; line-height: 1.55; padding-left: 0.875rem; border-left: 3px solid var(--brand-orange-light); } .article-body p { margin-bottom: 1.375rem; font-size: 1rem; color: var(--text-secondary); line-height: 1.95; } .article-body strong { color: var(--text-primary); font-weight: 700; } .highlight-box { background: var(--brand-orange-bg); border: 1px solid var(--brand-orange-border); border-radius: 10px; padding: 1.5rem 1.5rem 1.25rem; margin: 1.75rem 0; } .highlight-box .box-label { display: inline-block; font-family: var(--font-sans-en); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-orange); margin-bottom: 0.625rem; } .highlight-box p { margin-bottom: 0.5rem; color: var(--text-primary); } .highlight-box p:last-child { margin-bottom: 0; } .info-box { background: var(--bg-subtle); border: 1px solid var(--border-light); border-radius: 10px; padding: 1.5rem; margin: 1.75rem 0; } .info-box p { color: var(--text-secondary); margin-bottom: 0.5rem; } .info-box p:last-child { margin-bottom: 0; } .caution-box { background: var(--red-bg); border: 1px solid var(--red-border); border-radius: 10px; padding: 1.5rem; margin: 1.75rem 0; } .caution-box .box-label { display: inline-block; font-family: var(--font-sans-en); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--red-text); margin-bottom: 0.625rem; } .caution-box p { color: var(--tex