/* @font-face {
    font-weight: 400;
    font-family: 'Noto Sans JP';
    src: url('../fonts/NotoSansJP-VariableFont_wght.ttf') format('truetype');
} */


/* @font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
} */

body {
    --color-black: #000000;
    --color-red: #CC0000;
    --color-yellow: #FFC122;
    --color-yellow1: #FFC100;
    --color-yellow2: #EFAC00;
    --color-yellow3: #FFF100;
    --color-green: #06C755;
    --color-green1: #18C55A;
    --color-blue: #014099;
    --color-red1: #EB4851;
    --color-yellow-skin: #fff9b1;
    --color-pink: #fffdf1;
    --color-white: #ffffff;
    --color-gray: #7F7F7F;
    font-family: 'Noto Sans JP' !important;
    color: #000000 !important;
    -webkit-font-smoothing: antialiased;
}

.fs-10 {
    font-size: 2.564102564rem;
}

.flex-1 {
    flex: 1;
}

.fadeInUp {
    animation: fadeInUp 1s ease-out both;
}

.bounceIn {
    animation: bounceIn 0.5s ease-out both;
}


@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shineAnimation {
    0% {
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }

    50% {
        transform: scale3d(.95, .95, .95);
        opacity: 0;
    }

    100% {
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        scale: 0.6;
        transform: translateY(20px);
    }

    60% {
        opacity: 1;
        scale: 1.1;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        scale: none;
        transform: translateY(0);
    }
}