@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');
@font-face {
    font-family: "roboto400";
    src: url("Roboto-Regular.ttf");
}

:root{
    --frameLv0: #333536;
    --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: #383b3a;
    --lv1: #1955b6;
    --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;
}

/*
text-shadow: #fff 2px 0px, #fff -2px 0px, #fff 0px -2px, #fff 0px 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px;
text-align: left;
line-height: 1.8;
*/

*{
    font-family: 'Noto Sans JP', sans-serif;
}
html{
    user-select: none;
    -webkit-user-select: none; /*Safari*/
    -moz-user-select: none; /*Firefox*/
    padding: 2rem 0;
    text-align: center;
    background-color: #151515;
    color: #FFF;
}
.disable{
    display: none;
}

table tr:first-child{
    background-color: var(--frameLv1);
    color: #FFF;
}
table{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    border-collapse: collapse;
    border-left: solid 3px var(--frameLv1);
    border-right: solid 3px var(--frameLv1);
    border-bottom: solid 3px var(--frameLv1);
}

.rpt-count, .rpt-no, .title{
    line-height: .5;
    padding-top: 10px;
    padding-bottom: 10px;
}
.title{
    padding-left: 3px;
    font-weight: 500;
    font-size: 18px;
    width: 140px;
    text-align: left;
}
.rpt-count, .rpt-no{
    padding-right: 3px;
    text-align: right;
}
.rpt-no{
    font-weight: 500;
    font-size: 18px;
}
.text-pdlv{
    font-size: 12px;
    width: 75px;
    height: 15px;
    line-height: .5;
    text-align: center;
    background-color: #29393b;
    color: var(--textLv1);
}
.lv{
    font-family: 'Rajdhani', sans-serif;
}
.value{
    font-family: 'Quantico', monospace;
}
.lv{
    text-align: center;
    font-size: 65px;
    background-color: var(--lv1);
    color: var(--lv1bg);
    padding-top: 10px;
    line-height: .5;
}
.lv-exp{
    font-size: 11px;
    padding-bottom: 4px;
    font-weight: 500;
    text-align: center;
    border-top: none;
    background-color: var(--lv1);
    color: var(--lv1bg);
}
.info{
    background-color: var(--bgLv1);
    color: var(--textLv1);
}
.value{
    text-align: left;
    width: 125px;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 1px;
}
.hk-lv{
    font-size: 20px;
}
.issue-time{
    vertical-align: top;
    text-align: left;
    font-weight: 300;
    font-size: 10px;
}
.text{
    text-align: left;
    padding-left: 5px;
    font-size: 14px;
}
.first{
    padding-top: 5px;
}

label{
    color: #FFF;
    display: inline-block;
    width: 115px;
    text-align: right;
}
input:not([type = "button"]){
    display: inline-block;
    width: 190px;
}

.main{
    margin-top: 40vh;
    display: flex;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 480px;
    height: auto;
}

/* MAP INFO */
svg{
    display: flex;
    height: auto;
    width: 100%;
    cursor: default;
}
svg path:is(.ch, .di){
    stroke: #c8c8c8;
    stroke-width: 1px;
    stroke-linejoin: round;
    transform: translate(0, 100px);
    -ms-transform: translate(0, 100px);
    -webkit-transform: translate(0, 100px);
    cursor: default;
}
svg path.di{
    fill: none;
    stroke-width: 4.5px;
}
svg path.ch{
    fill: #3b3f4a;
    stroke-width: 0px;
}

.lv0, .lv1, .lv2, .lv3, .lv4, .lv5{
    stroke-width: 3px;
    stroke-linejoin: round;
    transform: translate(0, 100px);
    -ms-transform: translate(0, 100px);
    -webkit-transform: translate(0, 100px);
    cursor: default;
    stroke: #c1c1c1;
}
.lv0{
    fill: #3b3f4a;
}
.lv1{
    fill: var(--lv1);
}
.lv2{
    fill: var(--lv2);
}
.lv3{
    fill: var(--lv3);
}
.lv4{
    fill: var(--lv4);
}
.lv5{
    fill: var(--lv5);
}

.grid *{
    fill: rgba(0, 0, 0, 0);
    stroke-width: 3px;
    transform: translateY(60px);
    -webkit-transform: translateY(60px);
}
.grid .rain0{
    stroke: none;
}
.grid .rain1{
    stroke: #21b327;
    fill: rgba(33, 179, 39, .125);
}
.grid .rain2{
    stroke: #bcbd31;
    fill: rgba(188, 189, 49, .125);
}
.grid .rain3{
    stroke: #c2281c;
    fill: rgba(210, 40, 29, .125);
}



sup{
    position: relative;
    display: block;
    line-height: 1.5;
    font-size: 273.3333px;
}
#rew{
    display: flex;
    position: absolute;
    top: -36px;
    left: -98px;
    transform: scale(.55) translate(44px, 31px);
    -webkit-transform: scale(.55) translate(44px, 31px);
    justify-content: flex-start;
}
#rew .frame-info{
    fill: #52343c;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#rew .frame-multi{
    display: inline;
    fill: #6c666d;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#rew .frame-local-lv{
    display: inline;
    fill: #5a0191;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#rew .frame-local-lv-text{
    display: inline;
    fill: #363237;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#rew .frame-title{
    fill:#c20001;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#rew .frame-pre-rain{
    fill:#333539;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#rew .frame-main{
    display: inline;
    fill: none;
    stroke: #c20001;
    stroke-width: 18px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: none;
}
#rew .title{
    font-size: 86.6667px;
    letter-spacing: 2.31px;
    fill: #FFF;
}
#rew .multi{
    font-size: 80px;
    fill: #FFF;
}
#rew .no{
    font-size: 80px;
    text-align: end;
    text-anchor: end;
    fill: #FFF;
}
#rew .local-lv-text{
    font-size: 56.8889px;
    text-align: center;
    text-anchor: middle;
    fill: #FFF;
}

#rew sup{
    line-height: .1;
    position: relative;
    top: 1.125rem;
}
#rew .local-lv{
    font-family: "roboto400";
    font-size: 333.3333px;
    text-align: center;
    text-anchor: middle;
    fill: #FFF;
}
#rew :is(.arr-time-text, .end-time-text, .full-lv-text1, .full-lv-text2){
    font-size: 60.6667px;
    fill: #FFF;
}
#rew .time-text{
    font-weight: lighter;
    font-size: 50px;
    fill: #FFF;
}
#rew :is(.arr-time, .end-time, .full-lv){
    font-family: 'Quantico', monospace;
}
#rew :is(.arr-time, .end-time){
    font-size: 90px;
    fill: #FFF;
}
#rew .full-lv{
    font-size: 110px;
    fill: #FFF;
}
#rew .loc-list{
    font-size: 65px;
    fill: #FFF;
}

.stayTuned, .testing{
    display: none;
    position: absolute;
    font-size: 20px;
    line-height: 1;
    margin: 20px 0 0 0;
    border-radius: 10px;
    border: solid 1px #EEE;
    padding: 10px;
    background-color: rgba(0, 0, 0, .5);
    color: #FFF;
    cursor: default;
}
.stayTuned{
    top: 65%;
    left: 19%;
}
.testing{
    top: 84%;
    left: 52%;
}

p{
    margin: 5px 0;
    text-align: center;
}