@charset "UTF-8";

@import url("./reset.css");

@import url("./base.css");

@import url("./component.css");

:root {
    --color-base: #ffffff;
    --color-text: #000000;
    --color-border-blue: #c6f2ff;
    --color-blue: #008df2;
    --color-blue-20: hsla(205, 100%, 47%, 0.2);
    --color-blue-40: hsla(205, 100%, 47%, 0.4);
    --color-green: #bffcd5;
    --color-green-10: #ace3c0;
    --color-beige: #c9bba2;
    --color-white: #ffffff;
    --color-orange: #ffd1b0;
    --color-gray: #616161;
    --color-black-5: rgba(0, 0, 0, 0.05);
    --color-black-10: rgba(0, 0, 0, 0.1);
    --color-black-20: rgba(0, 0, 0, 0.2);
    --color-black-40: rgba(0, 0, 0, 0.4);
    --color-black-60: rgba(0, 0, 0, 0.6);
    --color-black: rgba(0, 0, 0, 1);
    --color-white-5: rgba(255, 255, 255, 0.05);
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-40: rgba(255, 255, 255, 0.4);
    --color-white-60: rgba(255, 255, 255, 0.6);
    --color-white: rgba(255, 255, 255, 1);
    --ease-in: 0.2s;
    --ease-out: 0.2s;
}

:root {
    --grid-divisions: 32;
    --grid-size: calc(100vw / var(--grid-divisions));
}

:root {
    --ww: 1440;
    --size-4: calc(4 / var(--ww) * 100vw);
    --size-5: calc(5 / var(--ww) * 100vw);
    --size-6: calc(6 / var(--ww) * 100vw);
    --size-8: calc(8 / var(--ww) * 100vw);
    --size-10: calc(10 / var(--ww) * 100vw);
    --size-12: calc(12 / var(--ww) * 100vw);
    --size-16: calc(16 / var(--ww) * 100vw);
    --size-18: calc(18 / var(--ww) * 100vw);
    --size-20: calc(20 / var(--ww) * 100vw);
    --size-24: calc(24 / var(--ww) * 100vw);
    --size-30: calc(30 / var(--ww) * 100vw);
    --size-32: calc(32 / var(--ww) * 100vw);
    --size-36: calc(36 / var(--ww) * 100vw);
    --size-40: calc(40 / var(--ww) * 100vw);
    --size-42: calc(42 / var(--ww) * 100vw);
    --size-44: calc(44 / var(--ww) * 100vw);
    --size-45: calc(45 / var(--ww) * 100vw);
    --size-50: calc(50 / var(--ww) * 100vw);
    --size-60: calc(60 / var(--ww) * 100vw);
    --size-65: calc(65 / var(--ww) * 100vw);
    --size-80: calc(80 / var(--ww) * 100vw);
    --size-90: calc(90 / var(--ww) * 100vw);
}

:root {
    --ff-jp: "Noto Sans JP", sans-serif;
    --ff-en: "Termina", sans-serif;
    --fz-9: 0.5625rem;
    --fz-11: 0.6875rem;
    --fz-12: 0.75rem;
    --fz-13: 0.8125rem;
    --fz-14: 0.875rem;
    --fz-15: 0.9375rem;
    --fz-16: 1rem;
    --fz-17: 1.0625rem;
    --fz-18: 1.125rem;
    --fz-20: 1.25rem;
    --fz-21: 1.3125rem;
    --fz-22: 1.375rem;
    --fz-23: 1.4375rem;
    --fz-30: 1.875rem;
    --fz-32: 2rem;
    --fz-36: 2.25rem;
    --fz-54: 3.375rem;
    --fz-55: 3.4375rem;
    --fz-133: 8.3125rem;
}

@media screen and (max-width: 767.98px) {
    :root {
        --ww: 375;
        --grid-divisions: 9;
    }
}