/* .mapHolder{
    height: 100px;
    width: 100px;
    overflow: visible;
}.map{
    background-color: #515990;
}
.prefecture{
    fill: #989898;
    stroke-width: 3px;
    stroke: #6a696e;
}
.highlight{
    fill: #fef04c;
} */

@font-face {
    font-family: "title";
    src: url("Hiragino Kaku Gothic StdN W8.otf");
}
@font-face {
    font-family: "epiccenter";
    src: url("KosugiMaru-Regular.ttf");
}
@font-face {
    font-family: "warnarea";
    src: url("FOT-NewCezanne Pro B.otf");
}
@font-face {
    font-family: "time";
    src: url("NHK-Clock_TTF.ttf");
}
@font-face {
    font-family: "display";
    font-weight: 300;
    src: url("AM-JP-UDShinGoNTPr6N-Light.otf");
}
@font-face {
    font-family: "display";
    font-weight: 400;
    src: url("AM-JP-UDShinGoNTPr6N-Reg.otf");
}
@font-face {
    font-family: "display";
    font-weight: 500;
    src: url("AM-JP-UDShinGoNTPr6N-DeBold.otf");
}

body{
    margin: 0;
    background: #353535;
}
.hide{
    display: none!important;
}
.bg-frame{
    display: block;
    position: absolute;
    width: 1920px;
    height: 1080px;
    background-image: url("nhkBg.png");
    z-index: 1;
}
img{
    position: absolute;
    z-index: 20;
    opacity: 0;
}
.time-now{
    font-family: "time";
    position: absolute;
    top: 98px;
    width: 269px;
    height: 86px;
    left: 78px;
    z-index: 3;
    font-size: 78px;
    text-align: right;
    color: #fff;
    text-shadow: 0.000px 2.000px #333,
                 0.765px 1.848px #333,
                 1.414px 1.414px #333,
                 1.848px 0.765px #333,
                 2.000px 0.000px #333,
                 1.848px -0.765px #333,
                 1.414px -1.414px #333,
                 0.765px -1.848px #333,
                 0.000px -2.000px #333,
                 -0.765px -1.848px #333,
                 -1.414px -1.414px #333,
                 -1.848px -0.765px #333,
                 -2.000px -0.000px #333,
                 -1.848px 0.765px #333,
                 -1.414px 1.414px #333,
                 -0.765px 1.848px #333,
                 0 0 7px #000;
}

.top-info{
    font-family: "display";
    font-weight: 400;
    font-size: 60px;
    position: absolute;
    top: 72px;
    width: 1335px;
    left: 402px;
    z-index: 18;
    display: flex;
    flex-direction: column;

    .line{
        line-height: 1.25;
        color: #fff;
        text-shadow: 0.000px 8.500px #000,
        1.658px 8.337px #000,
        3.253px 7.853px #000,
        4.722px 7.067px #000,
        6.010px 6.010px #000,
        7.067px 4.722px #000,
        7.853px 3.253px #000,
        8.337px 1.658px #000,
        8.500px 0.000px #000,
        8.337px -1.658px #000,
        7.853px -3.253px #000,
        7.067px -4.722px #000,
        6.010px -6.010px #000,
        4.722px -7.067px #000,
        3.253px -7.853px #000,
        1.658px -8.337px #000,
        0.000px -8.500px #000,
        -1.658px -8.337px #000,
        -3.253px -7.853px #000,
        -4.722px -7.067px #000,
        -6.010px -6.010px #000,
        -7.067px -4.722px #000,
        -7.853px -3.253px #000,
        -8.337px -1.658px #000,
        -8.500px -0.000px #000,
        -8.337px 1.658px #000,
        -7.853px 3.253px #000,
        -7.067px 4.722px #000,
        -6.010px 6.010px #000,
        -4.722px 7.067px #000,
        -3.253px 7.853px #000,
        -1.658px 8.337px #000;

        .shindo, .tnm, .forecast{
            letter-spacing: 1px;
            position: relative;
            text-shadow: 0.000px 7.000px #000,
            1.812px 6.761px #000,
            3.500px 6.062px #000,
            4.950px 4.950px #000,
            6.062px 3.500px #000,
            6.761px 1.812px #000,
            7.000px 0.000px #000,
            6.761px -1.812px #000,
            6.062px -3.500px #000,
            4.950px -4.950px #000,
            3.500px -6.062px #000,
            1.812px -6.761px #000,
            0.000px -7.000px #000,
            -1.812px -6.761px #000,
            -3.500px -6.062px #000,
            -4.950px -4.950px #000,
            -6.062px -3.500px #000,
            -6.761px -1.812px #000,
            -7.000px -0.000px #000,
            -6.761px 1.812px #000,
            -6.062px 3.500px #000,
            -4.950px 4.950px #000,
            -3.500px 6.062px #000,
            -1.812px 6.761px #000;
        }
        .tnm, .forecast{
            letter-spacing: 1px;
            position: relative;
            text-shadow: 0.000px 7.000px #000,
            1.812px 6.761px #000,
            3.500px 6.062px #000,
            4.950px 4.950px #000,
            6.062px 3.500px #000,
            6.761px 1.812px #000,
            7.000px 0.000px #000,
            6.761px -1.812px #000,
            6.062px -3.500px #000,
            4.950px -4.950px #000,
            3.500px -6.062px #000,
            1.812px -6.761px #000,
            0.000px -7.000px #000,
            -1.812px -6.761px #000,
            -3.500px -6.062px #000,
            -4.950px -4.950px #000,
            -6.062px -3.500px #000,
            -6.761px -1.812px #000,
            -7.000px -0.000px #000,
            -6.761px 1.812px #000,
            -6.062px 3.500px #000,
            -4.950px 4.950px #000,
            -3.500px 6.062px #000,
            -1.812px 6.761px #000;
        }
        .shindo::before{
            content: "";
            display: inline-block;
            border: solid 3px #000;
            position: absolute;
            width: calc(100% + 41px);
            left: -23px;
            height: 17px;
            top: 68px;
            background: #00ae00;
            z-index: -1;
        }
        .tnm::before{
            content: "";
            display: inline-block;
            border: solid 5px #000;
            position: absolute;
            width: calc(100% + 40px);
            left: -24px;
            z-index: -1;
        }
        .tnm:is(.lv1, .lv2)::before{
            height: 16px;
            top: 66px;
        }
        .tnm:is(.lv3, .lv4)::before{
            height: 78px;
            top: 5px;
        }
        .tnm.lv1::before{
            background: #15cafc;
        }
        .tnm.lv2::before{
            background: #f7fc15;
        }
        .tnm.lv3::before{
            background: #fe0105;
        }
        .tnm.lv4::before{
            background: #ff01f4;
        }

        .forecast{
            position: relative;
        }
        .forecast::before{
            content: "";
            display: inline-block;
            background: #0000;
            border: solid 3px #fff;
            position: absolute;
            width: calc(100% + 9px);
            height: 65px;
            z-index: -1;
            top: 14px;
            left: -8px;
            box-shadow: 0.000px 2.000px #000,
                0.765px 1.848px #000,
                1.414px 1.414px #000,
                1.848px 0.765px #000,
                2.000px 0.000px #000,
                1.848px -0.765px #000,
                1.414px -1.414px #000,
                0.765px -1.848px #000,
                0.000px -2.000px #000,
                -0.765px -1.848px #000,
                -1.414px -1.414px #000,
                -1.848px -0.765px #000,
                -2.000px -0.000px #000,
                -1.848px 0.765px #000,
                -1.414px 1.414px #000,
                -0.765px 1.848px #000,
                inset 0.000px 2.000px #000,
                inset 0.765px 1.848px #000,
                inset 1.414px 1.414px #000,
                inset 1.848px 0.765px #000,
                inset 2.000px 0.000px #000,
                inset 1.848px -0.765px #000,
                inset 1.414px -1.414px #000,
                inset 0.765px -1.848px #000,
                inset 0.000px -2.000px #000,
                inset -0.765px -1.848px #000,
                inset -1.414px -1.414px #000,
                inset -1.848px -0.765px #000,
                inset -2.000px -0.000px #000,
                inset -1.848px 0.765px #000,
                inset -1.414px 1.414px #000,
                inset -0.765px 1.848px #000;
        }
    }
}

.eew{
    border: solid 2px #000;
    position: absolute;
    top: 557px;
    width: 1205px;
    height: 406px;
    left: 348px;
    z-index: 19;
    border-radius: 13px;
    background: #fff;

    .title{
        display: flex;
        font-size: 56px;
        font-family: "title";
        position: absolute;
        top: 10px;
        width: 860px;
        height: 77px;
        left: 334px;
        background-image: linear-gradient(#f76580, #bc4c61);
        color: #fff;
        align-items: center;
        justify-content: center;

        .text{
            text-shadow: 0px 3px #726e6d,
                         1.1480502970952693px 2.77163859753386px #726e6d,
                         2.1213203435596424px 2.121320343559643px #726e6d,
                         2.77163859753386px 1.1480502970952695px #726e6d,
                         3px 0px #726e6d,
                         2.77163859753386px -1.1480502970952693px #726e6d,
                         2.121320343559643px -2.1213203435596424px #726e6d,
                         1.1480502970952697px -2.77163859753386px #726e6d,
                         0px -3px #726e6d,
                         -1.1480502970952677px -2.771638597533861px #726e6d,
                         -2.1213203435596424px -2.121320343559643px #726e6d,
                         -2.7716385975338604px -1.1480502970952684px #726e6d,
                         -3px 0px #726e6d,
                         -2.77163859753386px 1.14805029709527px #726e6d,
                         -2.121320343559643px 2.121320343559642px #726e6d,
                         -1.1480502970952686px 2.7716385975338604px #726e6d;
            transform: scaleX(1.175) translateY(-2px);

            .symbol{
                display: inline-block;
                transform: translateY(-3px);
            }
        }
    }
    .promt{
        display: flex;
        flex-direction: column;
        font-family: "title";
        position: absolute;
        top: 87px;
        width: 850px;
        height: 298px;
        left: 334px;
        background: #2d67b5;
        box-shadow: inset 0 0 30px #4e5e99;
        color: #fff;
        padding: 5px;

        .loc{
            color: #f4fd73;
            font-family: "epiccenter";
            font-size: 57px;

            span{
                overflow-x: visible;
                white-space: nowrap;
                display: inline-block;
                transform-origin: left;
                transform: scaleX(.7);
            }
        }
        .warnarea{
            color: #fff;
            font-family: "warnarea";
            font-size: 67px;
            padding: 22px 0 0 8px;

            span{
                display: inline-block;
                transform-origin: left;
                transform: scaleX(.8);
                width: 1050px;
                line-height: 1.4;
            }
        }
    }
    .map, .map-bg{
        position: absolute;
        top: 10px;
        width: 316px;
        height: 385px;
        left: 10px;
    }
    .map-bg{
        background: #515990;
        box-shadow: inset 0 0 15px #575981;
    }
    .map-bg{
        overflow: hidden;
    }
}


.screen{
    background: #444;
    display: block;
    position: relative;
    width: 1920px;
    height: 1080px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: .65s linear;
    z-index: 2;

    .bg-loc{
        position: absolute;
        top: 217px;
        right: 101px;
        font-family: "display";
        line-height: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        font-weight: 500;
        color: #fff;
        text-shadow: 0px 3px #000,
        1.1480502970952693px 2.77163859753386px #000,
        2.1213203435596424px 2.121320343559643px #000,
        2.77163859753386px 1.1480502970952695px #000,
        3px 0px #000,
        2.77163859753386px -1.1480502970952693px #000,
        2.121320343559643px -2.1213203435596424px #000,
        1.1480502970952697px -2.77163859753386px #000,
        0px -3px #000,
        -1.1480502970952677px -2.771638597533861px #000,
        -2.1213203435596424px -2.121320343559643px #000,
        -2.7716385975338604px -1.1480502970952684px #000,
        -3px 0px #000,
        -2.77163859753386px 1.14805029709527px #000,
        -2.121320343559643px 2.121320343559642px #000,
        -1.1480502970952686px 2.7716385975338604px #000;

        .loc-detail{
            position: relative;
            font-size: 75px;
            letter-spacing: 1px;
        }
        .loc-detail::before{
            content: "";
            display: inline-block;
            position: absolute;
            width: calc(100% + 15px);
            left: -11px;
            height: 12px;
            top: 75px;
            background: #0317ac;
            z-index: -1;
            box-shadow: 1px 0 1px #00073d,
            0 1px 1px #00073d,
            -1px 0 1px #00073d,
            0 -1px 1px #00073d;
        }
        .loc-time{
            font-size: 49px;
            padding: 22px 6px;
        }
    }

    .headline{
        position: relative;
        top: 51px;
        width: 440px;
        height: 152px;
        left: 1396px;
        font-family: "display";
        line-height: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        font-weight: 500;
        background: #fff;
        color: #000;

        &::before{
            content: "";
            display: inline-block;
            position: absolute;
            width: 12px;
            left: 445px;
            height: 152px;
            top: 0px;
            background: #0b16a6;
        }
    }

    .tnm{
        position: absolute;
        top: 233px;
        left: 101px;
        font-family: "display";
        line-height: 1;
        display: flex;
        flex-direction: column;
        color: #fff;
        flex-wrap: wrap;
        width: 1300px;

        .status{
            position: absolute;
            font-size: 26px;

            .page{
                position: absolute;
                right: -1478px;
                bottom: -831px;
            }

            .update-time{
                position: absolute;
                right: -1715px;
                bottom: -831px;
                letter-spacing: 2px;
            }
        }

        .table{
            &.prefecture{
                .title{
                    width: 1115px;
                    font-size: 64px;
                    background: #000;
                    border: solid 3px #fff;
                    height: 76px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    span{
                        transform: scaleX(1.08);
                    }
                }
                .tag{
                    width: 398px;
                    height: 69px;
                    margin-top: 15px;
                    font-size: 66px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    letter-spacing: 4px;
                    padding-bottom: 4px;
                    text-shadow: 0.000px 5.000px #000,
                    1.913px 4.619px #000,
                    3.536px 3.536px #000,
                    4.619px 1.913px #000,
                    5.000px 0.000px #000,
                    4.619px -1.913px #000,
                    3.536px -3.536px #000,
                    1.913px -4.619px #000,
                    0.000px -5.000px #000,
                    -1.913px -4.619px #000,
                    -3.536px -3.536px #000,
                    -4.619px -1.913px #000,
                    -5.000px -0.000px #000,
                    -4.619px 1.913px #000,
                    -3.536px 3.536px #000,
                    -1.913px 4.619px #000;

                    &.lv4{
                        width: 419px;
                        height: 80px;
                        margin-top: 4px;
                        letter-spacing: 4px;
                        font-size: 76px;
                    }
                }
                .local{
                    width: 1123px;
                    height: 86px;
                    align-items: center;
                    background: #0008;
                    display: flex;
                    margin-bottom: 3px;

                    .loc{
                        width: 479px;
                        padding: 0 22px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 63px;

                        &.wide-word{
                            word-spacing: 15px;
                        }
                    }

                    .time{
                        width: 345px;
                        height: 64px;
                        display: flex;
                        position: relative;
                        border: solid 3px #fff;
                        border-radius: 10px;
                        margin-right: 16px;

                        .log{
                            width: 100%;
                            height: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 48px;
                            line-height: .75;
                        }
                        .date{
                            width: 173px;
                            height: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: flex-end;
                            font-size: 35px;
                            line-height: .8;
                        }
                        .arrivial{
                            width: 158px;
                            height: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: flex-end;
                            font-size: 50px;
                            line-height: .8;
                            padding-right: 14px;
                        }
                    }
                    
                    .height{
                        width: 230px;
                        height: 78px;
                        font-size: 74px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        line-height: .7;

                        .unit{
                            font-size: 45px;
                            font-weight: 400;
                            margin: 21px 0 0 5px;
                        }
                    }
                }
                .tag.lv4, .height.lv4{
                    background: #c700ed;
                }
                .tag.lv3, .height.lv3{
                    background: #a71111;
                }
                .tag.lv2{
                    background: #e5e50c;
                }
                .tag.lv1{
                    background: #25baff;
                }
            }

            &.record{
                .title{
                    width: 1123px;
                    font-size: 64px;
                    background: #f09a27;
                    color: #000;
                    border: solid 5px #000;
                    height: 69px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 31px 0 14px 0;

                    span{
                        transform: scaleX(1.235);
                    }
                }
                .local{
                    width: 1130px;
                    height: 78px;
                    align-items: center;
                    background: #0008;
                    display: flex;
                    margin-bottom: 7px;
                    margin-top: 0px;

                    .loc{
                        width: 353px;
                        padding: 0px 15px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 48px;

                        &.wide-word{
                            word-spacing: 15px;
                        }
                    }

                    .time{
                        width: 342px;
                        height: 61px;
                        display: flex;
                        position: relative;
                        border: solid 3px #fff;
                        border-radius: 10px;
                        margin-right: 16px;

                        .date{
                            width: 180px;
                            height: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: flex-end;
                            font-size: 35px;
                            line-height: .8;
                        }
                        .arrivial{
                            width: 142px;
                            height: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: flex-end;
                            font-size: 42px;
                            line-height: .8;
                        }
                    }
                    
                    .height{
                        width: 285px;
                        height: 78px;
                        font-size: 59px;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        line-height: .7;
                        color: #f7e91c;

                        .unit{
                            font-size: 45px;
                            font-weight: 400;
                            margin: 14px 15px 0 5px;
                            
                            &.cm{
                                transform-origin: right;
                                transform: scaleX(0.9);
                                margin: 14px 0px 0 -6px;
                            }
                        }
                    }
                }
            }
        }
    }
}

.screen.emer{
    transform-origin: center;
    transform: scale(.79) translate(0, 137px);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 0 calc(100% - 16px));
}
.eew.prep{
    opacity: 0;
    display: block;
}
.top-info.prep{
    opacity: 0;
    display: block;
}

.btn{
    color: #fff;
    font-size: 30px;
    border: solid 2px #fff;
    padding: 5px;
    border-radius: 10px;
}