/* ===============================
  TYPOGRAPHY SYSTEM
=============================== */

:root {
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 18px;
  --font-xl: 24px;
  --font-2xl: 28px;
  --font-3xl: 32px;

  --line-tight: 1.4;
  --line-normal: 1.75;
  --line-loose: 1.9;
}

/* ===============================
  BASE
=============================== */

body {
  font-family: "Noto Sans JP", sans-serif;
  line-height: var(--line-normal);
  letter-spacing: 0.02em;
}

/* ===============================
  見出し
=============================== */

.hero__title {
  font-size: var(--font-xl);
  line-height: var(--line-tight);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.section-title {
  font-size: var(--font-lg);
  line-height: var(--line-normal);
  letter-spacing: 0.03em;
}

.panel__title,
.merit-card__title,
.feature-card__title {
  font-size: var(--font-lg);
  line-height: var(--line-normal);
}

/* ===============================
  本文
=============================== */

.hero__text,
.panel__text,
.section-copy,
.feature-card__text,
.merit-card__text {
  font-size: var(--font-sm);
  line-height: var(--line-normal);
}

/* ===============================
  小テキスト
=============================== */

.eyebrow {
  font-size: var(--font-xs);
  letter-spacing: 0.08em;
  font-weight: 600;
}

.case-card__text {
  font-size: var(--font-sm);
  line-height: var(--line-loose);
}

.section-caption {
  font-size: var(--font-xs);
}

/* ===============================
  強調
=============================== */

.section-title__accent {
  font-size: var(--font-xl);
  font-weight: 700;
}

/* ===============================
  PC拡張
=============================== */

@media (min-width: 768px) {

/* ===============================
  見出し
=============================== */

  .hero__title {
    font-size: var(--font-3xl);
    font-weight: bold;
  }

  .panel__title--purple,
  .section-title {
    font-size: var(--font-2xl);
  }

  .panel__title,
  .merit-card__title,
  .merit-list__title,
  .functions-card__title,
  .feature-card__title {
    font-size: var(--font-xl);
  }

/* ===============================
  本文
=============================== */

  .hero__text,
  .panel__text,
  .section-copy,
  .functions-card__tag,
  .feature-card__text,
  .merit-card__text {
    font-size: var(--font-md);
    line-height: var(--line-normal);
  }

  .case-card__amount {
    font-size: var(--font-2xl);
  }

  .section-title__accent {
    font-size: var(--font-3xl);
    font-weight: bold;
  }

/* ===============================
  小テキスト
=============================== */

  .eyebrow {
    font-size: var(--font-sm);
    letter-spacing: 0.08em;
    font-weight: 600;
  }

  .case-card__text {
    font-size: var(--font-sm);
    line-height: var(--line-loose);
  }

  .section-caption {
    font-size: var(--font-sm);
  }
}