/* ======== Reset & Variables ======== */ :root { --color-primary: #C2410C; --color-primary-light: #EA580C; --color-primary-pale: #FFF7ED; --color-primary-glow: rgba(194, 65, 12, 0.08); --color-dark: #1A1A1A; --color-body: #555555; --color-muted: #888888; --color-border: #E5E5E5; --color-bg: #FFFFFF; --color-bg-subtle: #FAFAFA; --color-bg-warm: #FFFBF5; --color-accent-blue: #1E40AF; --color-accent-green: #059669; --color-accent-amber: #D97706; --color-accent-red: #DC2626; --font-heading: 'DM Sans', 'Noto Sans JP', sans-serif; --font-body: 'Noto Sans JP', 'DM Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; --max-width: 780px; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; } *, *::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-body); color: var(--color-body); background: var(--color-bg); line-height: 1.85; letter-spacing: 0.02em; } img { max-width: 100%; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--color-primary-light); } /* ======== Layout ======== */ .article { max-width: var(--max-width); margin: 0 auto; padding: var(--space-xl) var(--space-md); } /* ======== Hero ======== */ .article-hero { margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border); } .article-hero__badge { display: inline-flex; align-items: center; gap: 8px; background: var(--color-primary-pale); color: var(--color-primary); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; padding: 6px 16px; border-radius: 100px; margin-bottom: var(--space-md); } .article-hero__badge::before { content: ''; width: 8px; height: 8px; background: var(--color-primary); border-radius: 50%; } .article-hero h1 { font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 2.4rem); font-weight: 700; color: var(--color-dark); line-height: 1.35; letter-spacing: -0.01em; margin-bottom: var(--space-md); } .article-hero__lead { font-size: 1.05rem; color: var(--color-body); line-height: 1.9; margin-bottom: var(--space-md); } .article-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; } .article-hero__meta-item { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-size: 0.85rem; color: var(--color-muted); } .article-hero__meta-item svg { width: 14px; height: 14px; } /* ======== Headings ======== */ h2 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--color-dark); line-height: 1.4; margin-top: var(--space-2xl); margin-bottom: var(--space-md); padding-bottom: var(--space-xs); border-bottom: 3px solid var(--color-primary); } h3 { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; color: var(--color-dark); line-height: 1.45; margin-top: var(--space-lg); margin-bottom: var(--space-sm); padding-left: 14px; border-left: 4px solid var(--color-primary); } /* ======== Body Text ======== */ p { font-size: 1rem; margin-bottom: var(--space-md); } strong { color: var(--color-dark); font-weight: 700; } ul, ol { margin: var(--space-sm) 0 var(--space-md) var(--space-md); } li { font-size: 0.95rem; margin-bottom: var(--space-xs); line-height: 1.85; } /* ======== Target Reader Card ======== */ .target-readers { background: linear-gradient(135deg, var(--color-primary-pale), #FEF3E2); border-radius: var(--radius-lg); padding: var(--space-lg); margin: var(--space-lg) 0; } .target-readers__header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); } .target-readers__icon { width: 48px; height: 48px; background: var(--color-primary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; } .target-readers__icon svg { width: 24px; height: 24px; fill: white; } .target-readers__title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--color-dark); margin: 0; border: none; padding: 0; } .target-readers__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); } .target-readers__item { display: flex; align-items: flex-start; gap: var(--space-sm); background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); transition: transform 0.2s, box-shadow 0.2s; } .target-readers__item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .target-readers__item-icon { width: 28px; height: 28px; min-width: 28px; background: var(--color-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.78rem; font-we