@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&family=Rajdhani:wght@500;600&display=swap&family=Quantico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@300&display=swap');
@font-face {
    font-family: "roboto400";
    src: url("Roboto-Regular.ttf");
}
:root{
    --r0: #0000;
    --r0a: #a1bdc499;
    --r0-5: #a5f7f7cc;
    --r2: #00ffff;
    --r5: #00d6ce;
    --r10: #00bd18;
    --r20: #4ad621;
    --r30: #a5e700;
    --r40: #ffde00;
    --r50: #ffad00;
    --r70: #ff6300;
    --r100: #ce3100;
    --r140: #990066;
    --r200: #dd01b6;
    --r300: #ff15d6;
    --r400: #ff5de2;
    --r500: #ff91ec;
    --r600: #ffe6ff;

    --frameLv0: #787878;
    --frameLv1: #0300d1;
    --frameLv2: #eb6b00;
    --frameLv3: #bf0000;
    --frameLv4: #6600bf;
    --frameSmallLv0: #33343a;
    --frameSmallLv1: #149a4c;
    --frameSmallLv2: #c89b00;
    --frameSmallLv3: #ff1400;
    --bgLv0: #33343a;
    --bgLv1: #33343a;
    --bgLv2: #4f4337;
    --bgLv3: #503438;
    --bgLv4: #3c3450;
    --textLv0: #b5b7b9;
    --textLv1: #FFF;
    --textLv2: #FFF;
    --textLv3: #FFF;
    --textLv4: #FFF;
    --textNotTargeted: #BBB;
    --lv0: #525558;
    --lv1: #145acb;
    --lv2: #ffe05c;
    --lv3: #e70000;
    --lv4: #5b0190;
    --lv5: #0d0d0d;
    --lv6: #37393b;
    --lv51: #feaa13;
    --lv52: #ef6f12;
    --lv61: #e60000;
    --lv62: #9f0201;
    --lv7: #5b0190;
    --lv0text: #FFF;
    --lv1text: #FFF;
    --lv2text: #000;
    --lv3text: #FFF;
    --lv4text: #FFF;
    --lv5text: #FFF;
    --lv6text: #FFF;
    --lv51text: #000;
    --lv52text: #000;
    --lv61text: #FFF;
    --lv62text: #FFF;
    --lv7text: #FFF;
}

.r0{ background: var(--r0); }
.r0a{ background: var(--r0a); }
.r0-5{ background: var(--r0-5); }
.r2{ background: var(--r2); }
.r5{ background: var(--r5); }
.r10{ background: var(--r10); }
.r20{ background: var(--r20); }
.r30{ background: var(--r30); }
.r40{ background: var(--r40); }
.r50{ background: var(--r50); }
.r70{ background: var(--r70); }
.r100{ background: var(--r100); }
.r140{ background: var(--r140); }
.r200{ background: var(--r200); }
.r300{ background: var(--r300); }
.r400{ background: var(--r400); }
.r500{ background: var(--r500); }
.r600{ background: var(--r600); }

.lv0{ fill: var(--lv0); }
.lv1{ fill: var(--lv1); }
.lv2{ fill: var(--lv2); }
.lv3{ fill: var(--lv3); }
.lv4{ fill: var(--lv4); }
.lv5{ fill: var(--lv5); }
.lv6{ fill: var(--lv6); }

body{
    background-color: #0d0d0d;
    font-family: 'Noto Sans JP', sans-serif;
    text-align: center;
}
label{
    color: #FFF;
    display: inline-block;
    width: 115px;
    text-align: right;
}
input:not([type = "button"]) {
    display: inline-block;
    width: 190px;
}



.map{
    margin: 1rem auto;
    display: flex;
    width: 500px;
    height: 500px;
    overflow: hidden;
    transform: scale(.96);
}
.map path{
    stroke-linejoin: round;
}
.map .ch{
    stroke-width: .5px;
}
.map.mini-zoom .ch{
    stroke-width: .325px;
}
.map.zoom .ch{
    stroke-width: .25px;
}
.map.mini-zoom :is(.bg, .rainfall-map, .border){
    transform: scale(1.76);
}
.map.zoom :is(.bg, .rainfall-map, .border){
    transform: scale(3.695) translate(-4px, -8px);
}
.map :is(.bg, .rainfall-map, .border, .erw){
    display: flex;
    justify-content: center;
    position: absolute;
    width: 500px;
    height: 500px;
}
.bg .district-line{
    fill: none;
}
.border{
    pointer-events: none;
}
.map.mini-zoom :is(.bg, .border) .district{
    stroke-width: .275px;
}
.map.mini-zoom :is(.bg, .border) .district-line{
    stroke-width: .475px;
}
.map.zoom :is(.bg, .border) .district{
    stroke-width: .2px;
}
.map.zoom :is(.bg, .border) .district-line{
    stroke-width: .375px;
}
.border .district{
    fill: none;
    stroke: #dcdcdc;
    stroke-width: .4px;
}
.border .district-line{
    fill: none;
    stroke: #dcdcdc;
    stroke-width: .55px;
}
.rainfall-map .container {
    margin: 0;
    padding: 0;
   /*  display: grid;
    grid-template-columns: repeat(121, 1fr); */
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    opacity: .80;
}
.rainfall-map .container.dim {
    opacity: .3;
}
  
.item {
    display: block;
    flex: 0 0 auto;
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    width: 4.1320px;
    height: 4.1320px;
    font-size: 0;
    line-height: 0;
}


.erw{
    pointer-events: none;
}
.erw .frame{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 240px;
    height: 100px;
    background: var(--frameLv2);
    border-radius: 5px;
}
.erw .title{
    position: absolute;
    top: -1px;
    left: 4px;
    font-weight: 500;
    color: var(--textLv2);
}
.erw .title.long{
    position: absolute;
    top: 1px;
    left: 4px;
    font-weight: 500;
    font-size: .8rem;
    color: var(--textLv2);
}
.erw .report{
    position: absolute;
    font-size: .85rem;
    top: 1px;
    right: 5px;
    color: var(--textLv2);
}
.erw .label{
    position: absolute;
    font-size: 0.65rem;
    width: 68px;
    left: 2.5px;
    top: 22.5px;
    height: .9rem;
    line-height: 1.15;
    text-align: center;
    letter-spacing: .5px;
    background: #363237;
    color: var(--textLv2);
}
.erw .lv{
    font-family: "roboto400";
    position: absolute;
    font-size: 4.1rem;
    width: 68px;
    left: 2.5px;
    bottom: 2.5px;
    height: 62px;
    line-height: 0.95;
    text-align: center;
    letter-spacing: .5px;
    background: #363237;
    color: var(--lv2text);
    border-radius: 0 0 0 3px;
    background: var(--lv2);
}
.erw .lv.unknown #erw_lv{
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2.3rem;
    width: 91px;
    display: inline-block;
    transform: scaleX(0.8);
    position: absolute;
    top: 10px;
    left: -12px;
}
.erw .erw-no{
    color: var(--textLv2);
    font-size: .85rem;
    position: absolute;
    top: 3px;
    left: 143px;
    width: 16px;
    height: 16px;
    line-height: 1;
    text-align: center;
    background-color: #7a787a;

}
.erw .erw-all{
    color: var(--textLv2);
    font-size: .85rem;
    position: absolute;
    top: 0px;
    left: 160px;
}
.erw .container{
    position: absolute;
    bottom: 2.5px;
    right: 2.5px;
    width: 167.5px;
    background: var(--bgLv2);
    color: var(--textLv2);
    border-radius: 0 0 3px 0;
    height: 75px;
    font-size: 0.75rem;
}
.erw .container .arrival{
    position: absolute;
    top: 0px;
    left: 3px;
}
.erw .container .end{
    position: absolute;
    top: 16px;
    left: 3px;
}
.erw .container .hk-area-1{
    position: absolute;
    top: 31.5px;
    left: 3px;
}
.erw .container .hk-area-2{
    position: absolute;
    top: 44px;
    left: 3px;
}
.erw .container .report-time{
    font-weight: 300;
    font-size: 0.6rem;
    position: absolute;
    top: 60px;
    left: 3px;
}

.erw .container .info-arrival{
    font-family: "Azeret Mono", 'Noto Sans JP', monospace;
    position: absolute;
    text-align: left;
    width: 185px;
    top: -2px;
    left: 87px;
    font-size: 0.9rem;
}
.erw .container .info-end{
    font-family: "Azeret Mono", 'Noto Sans JP', monospace;
    position: absolute;
    text-align: left;
    width: 185px;
    top: 17px;
    left: 87px;
    font-size: 0.9rem;
    line-height: 1;
}
.erw .container .info-arrival:is(.assume, .long-rain){
    top: 0px;
}
.erw .container .info-end:is(.assume, .long-rain){
    top: 19px;
}
.erw .container :is(.info-end, .info-arrival):is(.assume, .long-rain, .unknown){
    color: #999;
}
.erw .container :is(.info-end, .info-arrival).assume{
    transform: scaleX(0.49);
    left: 38px;
    font-size: .8rem;
    font-weight: 500;
}
.erw .container :is(.info-end, .info-arrival).long-rain{
    transform: scaleX(0.68);
    width: 185px;
    left: 57px;
    font-size: .8rem;
    font-weight: 500;
}
.erw .container :is(.info-end, .info-arrival).unknown{
    font-family: 'Noto Sans JP', sans-serif;
}
.erw .container .info-hk-area{
    font-family: "Azeret Mono", 'Noto Sans JP', monospace;
    position: absolute; 
    top: 39px;
    left: 87px;
    font-size: 1rem;
    line-height: 1;
}
.erw .container .colon{
    font-family: 'Noto Sans JP', sans-serif;
}
.erw .container .colon::after{
    content: ":";
}
.erw .container .space{
    font-family: 'Noto Sans JP', sans-serif;
}
.erw .container .space::after{
    content: " ";
}
.erw :is(.stayTuned, .testing){
    position: absolute;
    top: 383px;
    left: 110px;
    font-size: 1.2rem;
    padding: 10px 14px 12px 14px;
    border-radius: 10px;
    background: #111a;
    color: #eee;
    line-height: 1;
    font-weight: 500;
    border: solid 2px #eee;
}
.erw .testing{
    left: 263px;
    top: 439px;
    /* color: #ff0;
    border-color: #ff0; */
}

.erw .container-region{
    position: absolute;
    display: flex;
    bottom: 2.5px;
    right: 2.5px;
    width: 235px;
    background: #333539;
    color: #fff;
    border-radius: 0 0 3px 3px;
    height: 75px;
    font-size: 0.75rem;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-between;
}
.erw .container-region .item{
    height: 15px;
    width: 110px;
    line-height: 1.3;
    font-size: 0.6rem;
    text-align: left;
    padding-left: 3px;
}