@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    line-height: 1.15;
    height: 100%;
}

body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
    background-image: url(../images/common/main/bingo_bg.png);
    background-repeat: repeat;
    margin: initial !important;
    line-height:1.5;
}

header {
    width: 100%;
    height: auto;
}

.logo-image {
    margin-top: 2%;
}

main {
    width: 100%;
    height: auto;
    margin-bottom: 9.259vw;
    flex: 1;
}

.footer-text {
    background: linear-gradient(310deg, #E83828 0%, #E83828 12.2%, #ffffff 12.3%, #ffffff 88.2%, #036EB8 88.3%, #036EB8 100%);
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 2%;
    font-size: 1.481vw;
}
/* bootstrap対策 */
.footer-text p {
    margin-bottom: auto;
}
footer{
    position: fixed;
    bottom: 0; 
    width: 100%;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

button {
    -webkit-appearance: none;
    border: none;
    box-shadow: none;
    background: none;
}

button .default {
    display: block;
    width: 90%;
    margin: 0 auto;
}

button .active {
    display: none;
}

button:active .default {
    display: none;
}

button:active .active {
    display: block;
    width: 90%;
    margin: 0 auto;
}


button[disabled]:active .default {
    display: block;
    margin: 0 auto;
}

button[disabled]:active .active {
    display: none;
}

.sizuku {
    animation: sizuku 0.5s linear 0s;
    border-radius: 50%;
    border: 4px solid #f88441; 
    position: absolute;
    z-index: 1000;
}

@keyframes sizuku {
    0% {
        height: 0; 
        opacity: 1;
        transform: translate(0, 0);
        width: 0;
    }
    
    100% {
        height: 100px; /*円の高さ幅の最大値*/
        opacity: 0;
        transform: translate(-50px, -50px); /*高さの半分の値にする*/
        width: 100px; /*基本高さと合わせる*/
    }
}

/* ja */
@font-face {
    font-family: "rounded-x-mplus-2p";
    src: url("../fonts/rounded-x-mplus-2p-medium.ttf") format("truetype");
}

/* en */
@font-face {
    font-family: "FOT-RodinNTLGPro-DB";
    src: url("../fonts/FOT-RodinNTLGPro-DB.otf") format("truetype");
}

/* th */
@font-face {
    font-family: "IBM_Plex_Sans_Thai_Looped";
    src: url("../fonts/IBM_Plex_Sans_Thai_Looped_SemiBold.otf") format("truetype");
}

/* zh-TW */
@font-face {
    font-family: "XiaolaiMonoSC-Regular";
    src: url("../fonts/XiaolaiMonoSC-Regular.ttf") format("truetype");
}

/* id */
@font-face {
    font-family: "FOT-RodinNTLGPro-DB";
    src: url("../fonts/FOT-RodinNTLGPro-DB.otf") format("truetype");
}

/* vi */
@font-face {
    font-family: "Fira_Sans_Condensed_Medium";
    src: url("../fonts/Fira_Sans_Condensed_Medium.ttf") format("truetype");
}