@charset "utf-8";

/* ==========================================================================
   CEREMO Site Foundation
   1. Typography Tokens
   ========================================================================== */

:root {
  /*
   * サイト全体の文字サイズ調整
   */
  --text-size-adjust: 0rem;

  /* 補助文字 */
  --fs-xs: calc(0.8125rem + var(--text-size-adjust));   /* 約13px */
  --fs-sm: calc(0.875rem + var(--text-size-adjust));    /* 約14px */
  --fs-note: calc(0.9375rem + var(--text-size-adjust)); /* 約15px */

  /*
   * 本文
   */
  --fs-body:
    calc(
      clamp(1rem, 0.965rem + 0.17vw, 1.125rem)
      + var(--text-size-adjust)
    );

  /* リード文 */
  --fs-body-lg:
    calc(
      clamp(1.0625rem, 1.02rem + 0.2vw, 1.25rem)
      + var(--text-size-adjust)
    );

  /* 見出し */
  --fs-h6:
    calc(
      clamp(1rem, 0.96rem + 0.2vw, 1.125rem)
      + var(--text-size-adjust)
    );

  --fs-h5:
    calc(
      clamp(1.0625rem, 1rem + 0.3vw, 1.25rem)
      + var(--text-size-adjust)
    );

  --fs-h4:
    calc(
      clamp(1.125rem, 1.04rem + 0.4vw, 1.375rem)
      + var(--text-size-adjust)
    );

  --fs-h3:
    calc(
      clamp(1.25rem, 1.12rem + 0.55vw, 1.625rem)
      + var(--text-size-adjust)
    );

  --fs-h2:
    calc(
      clamp(1.5rem, 1.28rem + 0.85vw, 2rem)
      + var(--text-size-adjust)
    );

  --fs-h1:
    calc(
      clamp(1.75rem, 1.42rem + 1.15vw, 2.5rem)
      + var(--text-size-adjust)
    );

  /* 行間 */
  --lh-tight: 1.4;
  --lh-heading: 1.55;
  --lh-body: 1.9;
  --lh-relaxed: 2;

  /* 文字間 */
  --ls-normal: 0;
  --ls-body: 0.02em;
  --ls-heading: 0.06em;
  --ls-wide: 0.12em;
}


/* ==========================================================================
   2. Optional Text Size Modes
   ========================================================================== */

html[data-text-size="large"] {
  --text-size-adjust: 0.125rem;
}

html[data-text-size="x-large"] {
  --text-size-adjust: 0.25rem;
}


/* ==========================================================================
   3. Global Typography Baseline
   ========================================================================== */

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}


/* ==========================================================================
   4. Heading Baseline
   ========================================================================== */

:where(h1, h2, h3, h4, h5, h6) {
  line-height: var(--lh-heading);
  overflow-wrap: anywhere;
}

:where(h1) {
  font-size: var(--fs-h1);
}

:where(h2) {
  font-size: var(--fs-h2);
}

:where(h3) {
  font-size: var(--fs-h3);
}

:where(h4) {
  font-size: var(--fs-h4);
}

:where(h5) {
  font-size: var(--fs-h5);
}

:where(h6) {
  font-size: var(--fs-h6);
}


/* ==========================================================================
   5. Body Text
   ========================================================================== */

:where(p, li, dt, dd, th, td, address, figcaption) {
  overflow-wrap: anywhere;
}

:where(p, li, dt, dd) {
  line-height: var(--lh-body);
}

:where(small, .text-small, .txt-small) {
  font-size: var(--fs-sm);
  line-height: 1.7;
}

:where(.text-note, .txt-note, .note) {
  font-size: var(--fs-note);
  line-height: 1.75;
}

:where(.text-lead, .lead) {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
}


/* ==========================================================================
   6. Form Controls
   ========================================================================== */

:where(button, input, select, textarea) {
  font: inherit;
}

:where(input, select, textarea) {
  font-size: max(1rem, var(--fs-body));
  line-height: 1.6;
}


/* ==========================================================================
   7. Utility Classes
   ========================================================================== */

.text-xs {
  font-size: var(--fs-xs);
}

.text-sm {
  font-size: var(--fs-sm);
}

.text-note {
  font-size: var(--fs-note);
}

.text-body {
  font-size: var(--fs-body);
}

.text-body-lg {
  font-size: var(--fs-body-lg);
}

.text-h6 {
  font-size: var(--fs-h6);
}

.text-h5 {
  font-size: var(--fs-h5);
}

.text-h4 {
  font-size: var(--fs-h4);
}

.text-h3 {
  font-size: var(--fs-h3);
}

.text-h2 {
  font-size: var(--fs-h2);
}

.text-h1 {
  font-size: var(--fs-h1);
}


/* ==========================================================================
   8. Smartphone
   ========================================================================== */

@media screen and (max-width: 768px) {
  body {
    line-height: 1.85;
  }
}


/* ==========================================================================
   9. Print
   ========================================================================== */

@media print {
  :root {
    --text-size-adjust: 0rem;
  }

  body {
    font-size: 11pt;
    line-height: 1.6;
  }
}