@charset "utf-8";

/* =========================================================
   base.css — 共通変数・リセット・共通パーツ
   ========================================================= */

:root {
  /* color */
  --c-ink: #33394e;
  --c-navy: #333f73;
  --c-indigo: #6063ae;
  --c-indigo-light: #6f74cd;
  --c-lilac: #a3b6f6;
  --c-gray: #7e8394;
  --c-pale: #ebf0ff;
  --c-pale-2: #ebedff;
  --c-line: #d0d3ff;
  --c-line-pc: #d2d2d2;
  --c-white: #fff;
  --c-bg: #f5f6fb;

  /* typography */
  --ff-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-en: Figtree, "Noto Sans JP", sans-serif;
  --fz-xs: 10.5px;
  --fz-s: 12px;
  --fz-m: 13px;
  --fz-base: 14px;
  --fz-l: 16px;
  --fz-xl: 18px;
  --fz-2xl: 20px;
  --fz-3xl: 36px;

  /* layout */
  --w-content: 800px;
  --w-page: 1200px;
  --gap-xs: 4px;
  --gap-s: 8px;
  --gap-m: 16px;
  --gap-l: 24px;
  --gap-xl: 32px;
  --r-s: 5px;
  --r-m: 12px;
  --r-l: 20px;
  --shadow-card: 0 4px 5px var(--c-pale-2);
}

/* ---------- リセット（ページ配下に限定） ---------- */
.voice,
.voice *,
.voice *::before,
.voice *::after { box-sizing: border-box; }

/* リセットは :where() で詳細度0にし、ページ側の指定を常に優先させる */
:where(.voice) :where(p, h1, h2, h3) { margin: 0; }

:where(.voice) :where(ul, ol) { list-style: none; margin: 0; padding: 0; }

:where(.voice) :where(img) { display: block; max-width: 100%; }

:where(.voice) :where(a) { color: inherit; text-decoration: none; }
:where(.voice) :where(a:hover) { color: var(--c-indigo); }

/* ---------- 共通ボタン ---------- */
.btn {
  align-items: center;
  border-radius: var(--gap-s);
  display: inline-flex;
  font-size: var(--fz-base);
  font-weight: 700;
  justify-content: center;
  letter-spacing: .07em;
  line-height: 1;
  min-height: 48px;
  padding: 0 var(--gap-l);
  transition: opacity .2s ease;
  white-space: nowrap;
}
.btn:hover { opacity: .85; }

a.btn--primary,
a.btn--primary:hover { background: var(--c-navy); color: var(--c-white); }

a.btn--invert,
a.btn--invert:hover { background: var(--c-white); color: var(--c-navy); }