/* common */
body {
    font-family: 'noto4';
    color: #000;
    background: #fff;
}

a,
button,
label {
    font: inherit;
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

/* utilities */
.screen_out {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* animations */
@keyframes comm-pointerBounceDiagonal {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-10px, -10px);
    }
}

@keyframes comm-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes comm-floating {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

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

@keyframes comm-bounceIn {

    0%,
    20%,
    40%,
    60%,
    80%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

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

    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes comm-scaleIn {
    0% {
        transform: scale(0);
        opacity: 1;
    }

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

@keyframes comm-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes comm-blink-v2 {

    5%,
    45% {
        opacity: 0;
    }

    55%,
    95% {
        opacity: 1;
    }
}