@font-face {
    font-family: 'NotoSans-Bold';
    src: url(../font/NotoSans-Bold.ttf);
    font-display: block;
}

@font-face {
    font-family: 'NotoSansJP-Bold';
    src: url(../font/NotoSansJP-Bold.ttf);
    font-display: block;
}

@font-face {
    font-family: 'NotoSans-Regular';
    src: url(../font/NotoSans-Regular.ttf);
    font-display: block;
}

body {
    margin: 0px auto;
    padding: 0px;
    overflow-y: hidden;
    background: linear-gradient(to bottom, #83a8b7 50%, #8da09c 50%);
    height: 100vh;
    /* 画面全体に適用 */
    touch-action: none;
}

#chara {
    position: absolute;
    left: 71%;
    top: 38%;
}
#chara_img {
    width: 100px;
    height: 150px;
}

@media (max-width: 500px) {
    #chara {
        transform: translate(-40%, 1%);
    }
    #chara_img {
        width: 50px;
        height: 75px;
    }
}