@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@400;500;700&family=Josefin+Sans:wght@400;500&display=swap');

:root {
  --color-bg: #F4F0E8;
  --color-ink: #3A3733;
  --color-indigo: #2E4756;
  --color-mustard: #D4A84B;
  --color-line: #E6D9B8;
  --color-placeholder: #EEEEEE;

  --font-jp: 'Zen Kaku Gothic Antique', 'Hiragino Sans', sans-serif;
  --font-en: 'Josefin Sans', sans-serif;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-xxl: 8rem;

  --max-width: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-jp);
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 var(--space-sm);
}

p { margin: 0 0 var(--space-sm); }

a {
  color: var(--color-ink);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
a:hover { opacity: 0.7; }

img, svg { max-width: 100%; height: auto; display: block; }

.en {
  font-family: var(--font-en);
  letter-spacing: 0.08em;
}