/* ===== Tokens — site/DESIGN.md 参照（teien / osaji / hida） ===== */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --tint: #f6f8f7;          /* 白に近い冷たい面（セクション交互・注記） */
  --surface-warm: #f6f8f7;
  --surface-mint: #f0f7f5;
  --mint-soft: #e6f1ee;      /* CTA帯・強調面 */
  --chip: #edf2f0;
  --ink: #1b281d;
  --text: #1b281d;
  --muted: #59615b;
  --green: #00695b;
  --mint: #7fbaaa;
  --sand: #e3ebe8;
  --attn: #b25300;
  --line: #e1e7e4;
  --ink-hover: #33473a;
  --z-pharmacist: #00695b;   /* 薬剤師エリア（青緑） */
  --z-pharmacy: #1d3f6e;     /* 薬局エリア（ネイビー） */
  --line-strong: #707070;

  --font-serif: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-latin: "Josefin Sans", "Zen Kaku Gothic New", sans-serif;

  --r-btn: 5px;
  --r-tag: 3px;
  --r-pill: 50px;
  --arch: 50% 50% 0 0 / 40% 40% 0 0;
  --shadow-float: 0 0 12px rgba(0, 0, 0, .1);

  --wrap: 1248px;
  --header-h: 76px;
  --ease: cubic-bezier(.23, 1, .32, 1);
}

/* ===== ゾーン別カラー（pharmacy は変数を上書きするだけ。個別コンポーネントは変更不要） ===== */
body[data-zone="pharmacy"], .zone-pharmacy {
  --green: #1d3f6e;
  --mint: #9db9d6;
  --mint-soft: #e8eff7;
  --surface-mint: #f1f5fa;
  --ink: #14243c;
  --text: #14243c;
  --ink-hover: #2b4468;
}
body[data-zone="pharmacist"], .zone-pharmacist {
  --green: #00695b;
  --ink: #1b281d;
  --ink-hover: #33473a;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .07em;
  font-feature-settings: normal;
  line-break: strict;
  overflow-wrap: anywhere;
  color: var(--text);
  background: var(--bg);
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-serif); font-weight: 500; color: var(--ink); line-height: 1.5; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 16px; z-index: 200; }
.skip:focus { left: 8px; }
.latin { font-family: var(--font-latin); letter-spacing: .05em; }
.long { line-height: 1.9; }

/* ===== Reveal ===== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 767px) { .wrap { width: min(100% - 40px, var(--wrap)); } }