@font-face {
    font-family: 'PixelMplus10-Bold';
    src: url('/static/main/fonts/PixelMplus10-Bold.ttf') format('truetype');
    font-weight: 700;
}
@font-face {
    font-family: 'PixelMplus10-Regular';
    src: url('/static/main/fonts/PixelMplus10-Regular.ttf') format('truetype');
    font-weight: 400;
}

body{
    margin: 0;
    padding: 0;
    position: relative;
    overscroll-behavior-y: none;
}
.tv-wrapper{
    position: fixed;
    display: flex;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    pointer-events: none;
}
picture{
    width: 100vw;
    height: 100vh;
}
picture > img{
    width: 100%;
    height: 100%;
}
.tv-footer{
    position: absolute;
    z-index: 100;
    top: calc((910 / 1024) * 100vh);
    width: 100vw;
    height: calc((114 / 1024) * 100vh);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
    background-color: #DBDAE1;
}
.navigation-list{
    display: flex;
    flex-direction: row;
    gap: calc((24 / 1440) * 100vw);
    margin-left: calc((40 / 1440) * 100vw);
}
.navigation-item{
    border-radius: calc((70 / 1440) * 100vw);
    box-shadow: 8px 8px 0px 0px rgba(24, 24, 24, 0.82), inset -2px -2px 4px 0px #555, inset 3px 3px 2px 0px rgba(255, 255, 255, 0.65);
    width: calc((75 / 1440) * 100vw);
    height: calc((75 / 1440) * 100vw);
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-sizing: border-box;
}
.navigation-item:nth-child(1){
    background-color: #E81212;
}
.navigation-item:nth-child(2){
    background-color: #F8E000;
}
.navigation-item:nth-child(3){
    background-color: #193AAD;
}
.navigation-item:nth-child(4){
    background-color: #42961B;
}
.button-clicked{
    position: relative;
    top: calc((9.68 / 1024) * 100vh);
    box-shadow: none;
}
/* .button-selected{
    background-color: #FF0000;
    border-color: #FF0000;
} */
.tv-view-title{
    color: #243800;
    background-color: #BDCE44;
    box-shadow: inset 2px 2px 3px 0px rgba(0, 0, 0, 0.25), inset 2px 2px 4px 0px rgba(255, 255, 255, 0.95), inset 8px 10px 10px 0px #555;
    border: #555 calc((1 / 1440) * 100vw) solid;
    border-radius: calc((10 / 1440) * 100vw);
    font-family: PixelMplus10-Regular;
    font-size: calc((45 / 1440) * 100vw);
    line-height: 1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: calc((297 / 1440) * 100vw);
    height: calc((80 / 1440) * 100vw);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}    
.sns-list{
    display: flex;
    flex-direction: row;
    gap: calc((24 / 1440) * 100vw);
    margin-right: calc((40 / 1440) * 100vw);
    align-items: center;
}
.sns-item{
    width: calc((40 / 1440) * 100vw);
}
.sns-item > img{
    width: 100%;
}
#ufo-icon{
    width: calc((87.717 / 1440) * 100vw);
    height: calc((45.718 / 1440) * 100vw);
}
#avatar-icon{
    width: calc((71.429 / 1440) * 100vw);
    height: calc((71.429 / 1440) * 100vw);
}
#face-icon{
    width: calc((81.429 / 1440) * 100vw);
    height: calc((81.429 / 1440) * 100vw);
}
#island-icon{
    width: calc((71.429 / 1440) * 100vw);
    height: calc((71.429 / 1440) * 100vw);
}


@media screen and (max-width: 480px) {
    .tv-wrapper{
        height: 100dvh;
    }
    picture{
        height: 100dvh;
    }
    .tv-footer{
        top: calc((603 / 667) * 100dvh);
        height: calc((64 / 667) * 100dvh);
    }
    .navigation-list{
        width: 100%;
        gap: 0;
        justify-content: center;
        margin: 0;
    }
    .navigation-item{
        width: calc((40 / 375) * 100vw);
        height: calc((40 / 375) * 100vw);
        border-radius: calc((70 / 375) * 100vw);
        border: calc((1 / 375) * 100vw) solid #898C8C;
    }
    /* .button-selected{
        background-color: #FF0000;
        border-color: #FF0000;
    } */
    .navigation-item_sp-1{
        margin-right: calc((16 / 375) * 100vw);
    }
    .navigation-item_sp-2{
        margin-right: calc((143 / 375) * 100vw);
    }
    .button-clicked{
        top: calc((3.73 / 667) * 100vh);
    }
    .tv-view-title{
        border: #140000 calc((1 / 375) * 100vw) solid;
        border-radius: calc((4 / 375) * 100vw);
        font-size: calc((19 / 375) * 100vw);
        width: calc((100 / 375) * 100vw);
        height: calc((30 / 375) * 100vw);
    }
    .sns-list{
        display: none;
    }
    #ufo-icon{
        width: calc((46.782 / 375) * 100vw);
        height: calc((24.383 / 375) * 100vw);
    }
    #avatar-icon{
        width: calc((30.476 / 375) * 100vw);
        height: calc((30.476 / 375) * 100vw);
    }
    #face-icon{
        width: calc((43.429 / 375) * 100vw);
        height: calc((43.429 / 375) * 100vw);
    }
    #island-icon{
        width: calc((38.095 / 375) * 100vw);
        height: calc((38.095 / 375) * 100vw);
    }
}