@layer tokens {
  :root {
    --color-white: #fff;
    --color-basic-gray: #979594;
    --color-basic-black: #222;
    --color-contrast-gray: #6f6d6d;
    --color-light-gray: #efedea;
    --color-light-yellow: #f8f7f3;
    --color-basic-offwhite: #f4f1ed;
    --color-basic-brown: #585451;
    --color-basic-breadcrumb: var(--color-contrast-gray);
    --color-basic-breadcrumb-hover: #979594;
    --color-basic-attention: #80684f;
    --color-basic-light-gray: #efedea;
    --color-basic-dark-gray: #333;
    --color-input-placeholder: #777675;
    --color-input-required: #d32f2f;
    --color-bg-error: #fde7ea;
    --color-box-step-label-active: #bcbcbc;
    --color-bg-step-label: #f6f6f6;
    --color-border-step-label: #999;
    --color-border-line-gray: #ccc;
    --color-text-link-inquiry: #52a6b6;
    --color-text-link-faq: #207695;
    --color-bg-pale-gray: #f2f2f7;
    --color-border-light-gray: #d9d9d9;
    --color-border-warm-gray: #ddd9d6;
    --color-border-light-gray-2: #d5d2ce;
  }
}

@layer tokens {
  :root {
    --font-family-base: "Noto Sans JP", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
    --font-family-noto-serif: "Noto Serif JP", serif;
    --font-family-instrument-serif: "Instrument Serif", serif;
    --font-family-inter: "Inter", serif;
    --font-family-shippori-mincho: "Shippori Mincho", serif;
    --font-family-source-serif-4: "Source Serif 4", serif;
    --font-family-roboto: "Roboto", sans-serif;
    --font-size-base: 1rem;
  }
}

@layer tokens {
  :root {
    --opacity-hover: 0.7;
  }
}

@layer tokens {
  :root {
    --z-index-sticky-button: 8;
    --z-index-header-logo-sp: 14;
    --z-index-header: 14;
    --z-index-modal: 15;
  }
}