:root {
  --black: #1a1a1a;
  --gray: #6b7280;
  /* 後方互換：旧参照用。新規記述は --accent を使用 */
  --jhbtke: #e8919f;
  --white: #ffffff;
  --bg-light: #fafafa;
  --border: #e5e7eb;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  /* 白背景上で 4.5:1 を満たす濃度にする（#9ca3af は 2.5:1 で本文に使えない）。
     この値を使うのは pink / legacy のみ。他テーマは各テーマCSSで上書き済み。 */
  --text-muted: #6b7280;
  --accent: #e8919f;
  /* フォーカスリング等で参照（--accent と同系色） */
  --color-primary: var(--accent);
  /* 白背景上の電話番号等に使う濃いアクセント。#d4707f は 3.1:1 で本文に届かない。
     この値を使うのは legacy のみ（他テーマは各テーマCSSで上書き済み）。 */
  --accent-deep: #9d2b4e;
  --accent-soft: rgba(232, 145, 159, 0.18);
  --accent-bg: rgba(232, 145, 159, 0.09);
  --shadow-accent: 0 4px 18px rgba(232, 145, 159, 0.22);
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);

  --font-size-l: 16px;
  --font-size-m: 14px;
  --font-size-s: 12px;
  --font-size-xl: 18px;
  --font-size-xs: 10px;
  --font-size-xxl: 20px;
  --font-size-xxxl: 36px;

  --font-family-inter: "Inter", Helvetica;
  --font-family-noto_sans_jp: "Noto Sans JP", Helvetica;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 6px 18px rgba(17, 24, 39, 0.09);
  --shadow-lg: 0 14px 40px rgba(17, 24, 39, 0.11);

  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.text-style-name {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.02em;
}

.notosansjp-normal-black-14px {
  color: var(--text-primary);
  font-family: var(--font-family-noto_sans_jp);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.notosansjp-normal-black-10px {
  color: var(--text-primary);
  font-family: var(--font-family-noto_sans_jp);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 400;
}

.notosansjp-normal-sundown-16px {
  color: var(--accent);
  font-family: var(--font-family-noto_sans_jp);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}

.notosansjp-medium-black-20px {
  color: var(--text-primary);
  font-family: var(--font-family-noto_sans_jp);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 500;
}

.notosansjp-normal-white-10px {
  color: var(--white);
  font-family: var(--font-family-noto_sans_jp);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 400;
}

.notosansjp-medium-white-12px {
  color: var(--white);
  font-family: var(--font-family-noto_sans_jp);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 500;
}

.notosansjp-medium-black-16px {
  color: var(--text-primary);
  font-family: var(--font-family-noto_sans_jp);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
}

.notosansjp-normal-black-16px {
  color: var(--text-primary);
  font-family: var(--font-family-noto_sans_jp);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}

.notosansjp-normal-white-14px {
  color: var(--white);
  font-family: var(--font-family-noto_sans_jp);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.inter-normal-black-18px {
  color: var(--text-primary);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
}

.inter-medium-white-48px {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: 48px;
  font-style: normal;
  font-weight: 500;
}

.notosansjp-medium-white-28px {
  color: var(--white);
  font-family: var(--font-family-noto_sans_jp);
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
}

.notosansjp-normal-gray-12px {
  color: var(--gray);
  font-family: var(--font-family-noto_sans_jp);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.inter-normal-white-14px {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.notosansjp-bold-white-30px {
  color: var(--white);
  font-family: var(--font-family-noto_sans_jp);
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
}

.notosansjp-bold-sundown-30px {
  color: var(--accent);
  font-family: var(--font-family-noto_sans_jp);
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
}

.notosansjp-normal-black-24px {
  color: var(--text-primary);
  font-family: var(--font-family-noto_sans_jp);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
}