:root {
  /* color: corporate */
  --color-corp: #dc000c;

  /* color: basic */
  --color-base: #fff;
  --color-text: #1a1a1a;
  --color-primary: var(--color-corp);
  --color-primary-darken: #9c0e16;
  --color-primary-hover: var(--color-text);
  --color-secondary: #e04b53;
  --color-tertiary: #149c9c;
  --color-tertiary-darken: #0e7b7b;
  --color-bg-fill: #f9f4eb;
  --color-bg-fill-darken: #cbbda2;
  --color-bg-fill-smoke: #696457;
  --color-placeholder: #e9eff5;
  --color-stroke-lighten: #e7ebf2;

  --grad-ribbon-bg: linear-gradient(119deg, #2db7b7 0%, #149c9c 100.53%);

  /* font family */
  --font-family-sans-serif: "Noto Sans JP", "SF Pro JP", "SF Pro Text",
    "Hiragino Kaku Gothic Pro", sans-serif;
  --font-family-sans-serif-en: "Inter", "SF Pro Text", "SF Pro Icons",
    "Helvetica Neue", "Helvetica", sans-serif;
  --font-family-sans-serif-mix: "Inter", "Noto Sans JP", "SF Pro Text",
    "SF Pro Icons", "Helvetica Neue", "Helvetica", sans-serif;
  --font-family-base: var(--font-family-sans-serif);

  /* font size config */
  --font-base: 16;
  --rem: calc(1rem / var(--font-base));
  --font-tracking: 0;

  /* root font size */
  --root-font-size: max(12px, calc((var(--font-base) / 375) * 100vw));

  @media (min-width: 48em) {
    --root-font-size: max(
      16px,
      min(calc((var(--font-base) / 1280) * 100vw), 32px)
    );
  }

  /* px to rem font sizes (ex: 24px / 16 = 1.5rem) */
  --font-size-8: 0.5rem;
  --font-size-10: 0.625rem;
  --font-size-12: 0.75rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-22: 1.375rem;
  --font-size-24: 1.5rem;
  --font-size-26: 1.625rem;
  --font-size-28: 1.75rem;
  --font-size-30: 1.875rem;
  --font-size-32: 2rem;
  --font-size-34: 2.125rem;
  --font-size-36: 2.25rem;
  --font-size-38: 2.375rem;
  --font-size-40: 2.5rem;
  --font-size-42: 2.625rem;
  --font-size-44: 2.75rem;
  --font-size-48: 3rem;
  --font-size-50: 3.125rem;
  --font-size-56: 3.5rem;
  --font-size-64: 4rem;
  --font-size-80: 5rem;
  --font-size-100: 6.25rem;
  --p: var(--font-size-16);

  /* heading font sizes */
  --h1: var(--font-size-42);
  --h2: var(--font-size-32);
  --h3: var(--font-size-24);
  --h4: var(--font-size-20);
  --h5: var(--font-size-18);
  --h6: var(--font-size-16);

  @media (min-width: 48em) {
    --h1: var(--font-size-64);
    --h2: var(--font-size-56);
    --h3: var(--font-size-40);
    --h4: var(--font-size-32);
    --h5: var(--font-size-24);
    --h6: var(--font-size-20);
    --p: var(--font-size-18);
  }

  /* line hight */
  --leading-none: 1;
  --leading-xxs: 1.125;
  --leading-xs: 1.25;
  --leading-sm: 1.275;
  --leading-md: 1.5;
  --leading-lg: 1.8;
  --leading-xl: 2;
  --leading-xxl: 2.5;
  --leading-xxxl: 2.875;
  --leading-base: var(--leading-lg);
  --leading-hd: var(--leading-md);
  --leading-trim: calc((1em - 1lh) / 2);

  /* letter-spacing */
  --letter-spacing-base: 0.06em;
  --letter-spacing-hd-en: 0.06em;
  --letter-spacing-hd-en-sm: 0.06em;
  --letter-spacing-hd: 0.06em;
  --letter-spacing-block: 0.06em;

  /* spacer */
  --spacer-xs: 0.25rem; /* 4 */
  --spacer-sm: 0.5rem; /* 8 */
  --spacer: 1rem; /* 16 */
  --spacer-md: 1.5rem; /* 24 */
  --spacer-lg: 2.5rem; /* 40 */
  --spacer-xl: 4rem; /* 64 */
  --spacer-xxl: 6.5rem; /* 104 */
  --spacer-xxxl: 10.5rem; /* 168 */
  --gutter: clamp(1.25rem, 4%, 2.5rem);

  /* preset max container width */
  --container-max-width-sm: calc(540 * var(--rem));
  --container-max-width-md: calc(720 * var(--rem));
  --container-max-width-lg: calc(960 * var(--rem));
  --container-max-width-xl: calc(1140 * var(--rem));
  --container-max-width-xxl: calc(1400 * var(--rem));
  --container-max-width-xxxl: calc(1600 * var(--rem));
  --container-max-width-fluid: calc(1980 * var(--rem));
  --container-max-width-view: 2560px;
  --container-max-width: auto;

  @media (min-width: 36em) {
    --container-max-width: calc(540 * var(--rem));
  }

  @media (min-width: 48em) {
    --container-max-width: calc(720 * var(--rem));
  }

  @media (min-width: 62em) {
    --container-max-width: calc(960 * var(--rem));
  }

  @media (min-width: 75em) {
    --container-max-width: calc(1140 * var(--rem));
  }

  /* header size */
  --header-height: calc(60 * var(--rem));

  @media (width >= 48em) {
    --header-height: calc(85 * var(--rem));
  }

  /* box shadow */
  --shadow-sm: 0px calc(3 * var(--rem)) calc(30 * var(--rem)) 0
    rgb(26 26 26 / 0.1);
  --shadow-normal: 0 0 calc(50 * var(--rem)) 0 rgb(26 26 26 / 0.1);
  --shadow-lg: 0 0 calc(100 * var(--rem)) 0 rgb(26 26 26 / 0.16);

  /* z-index */
  --z-cta-sticky: 400;
  --z-header: 300;
  --z-screen: 999;

  /* ease: circ */
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);

  /* ease: sine */
  --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);

  /* math: Infinity */
  --infinity: calc(1px / 0);

  /* math: Golden ratio */
  --golden-ratio: 1.618;

  /* safe area */
  --safe-top: env(safe-area-inset-top, 0);
  --safe-right: env(safe-area-inset-right, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);
  --safe-left: env(safe-area-inset-left, 0);

  /* images */
  --ico-arrow-right: url("../img/ico-arrow-right.svg");
  --ico-arrow-top: url("../img/ico-arrow-top.svg");
  --ico-circle-arrow-right: url("../img/ico-circle-arrow-right.svg");
  --mask-ico-minus: url("../img/ico-minus.svg");
  --mask-ico-plus: url("../img/ico-plus.svg");
  --mask-ico-external: url("../img/ico-external.svg");
  --mask-ico-pdf: url("../img/ico-pdf.svg");
}

:lang(en) {
  --leading-trim: calc((1cap - 1lh) / 2);
}