@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap);

@font-face {
    font-family: 'Noto Sans JP';
    src: url('/noto-sans-jp.otf') format('opentype');
    font-display: swap;
}

:root {
    --clr-white: #ffffff;

    --clr-neutral-50: #fcfcfc;
    --clr-neutral-100: #f9f9f9;
    --clr-neutral-125: #f5f5f5;
    --clr-neutral-150: #e6e6e6;
    --clr-neutral-175: #f2f2f2;
    --clr-neutral-200: #dddddd;
    --clr-neutral-250: #e6e7e8;
    --clr-neutral-300: #d9d9d9;
    --clr-neutral-350: #d3d3d3;
    --clr-neutral-400: #bcbec0;
    --clr-neutral-450: #a7a9ac;

    --clr-gray-200: #d1d3d4;
    --clr-gray-300: #9d9fa2;
    --clr-gray-400: #939598;
    --clr-gray-450: #58595b;
    --clr-gray-500: #4d4d4f;
    --clr-gray-550: #4d4d4d;
    --clr-gray-600: #373940;
    --clr-gray-650: #414042;
    --clr-gray-900: #222222;

    --clr-red-50: #fde8e9;
    --clr-red-200: #f5c4c6;
    --clr-red-600: #ff3c23;
    --clr-red-700: #d71920;
    --clr-red-750: #cc0000;
    --clr-red-800: #aa0000;

    --transition-colors: color, background-color, border-color, text-decoration-color, fill, stroke;
    /* Transitions timing function */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Border radius */
    --rounded: 0.25rem;
    --rounded-6: 0.375rem;
    --rounded-8: 0.5rem;
    --rounded-20: 1.25rem;
    --rounded-full: 9999px;

}

html,
body {
    font-size: 16px !important;
}

html[lang="en-US"] body {
  font-family: 'Open Sans', sans-serif !important;
}
html[lang="ja-JP"] body {
    font-family: 'Noto Sans JP', sans-serif !important;
}

a {
    text-decoration: none;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-normal {
    justify-content: normal;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

.justify-stretch {
    justify-content: stretch;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}