:root {
    --fontFamily: "ヒラギノ角ゴ-Pro", sans-serif;
    --fontWeight: 500;
}

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    font-size: 14px;
}
body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 14px;
}
/* * {
    outline: #00ff00 1px solid;
} */
select, input, button {
    outline: none;
}
input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
} 
input[type="number"] { 
    -moz-appearance:textfield; 
} 
#map {
    width: 100%;
    height: 100%;
}
#map.background_nerv {
    background: #1d1d1d;
}
#map.background_wni {
    background: linear-gradient(180deg, rgba(113,163,198,1) 0%, rgba(43,70,119,1) 100%);
}
#map.background_quarog {
    background: #78A0C8;
}
.leaflet-popup {
    margin-bottom: 0;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0px 3px 7px 2px rgba(0, 0, 0, 0.4);
    border-radius: 0!important;
    font-family: var(--fontFamily);
    font-weight: var(--fontWeight);
    user-select: none;
}
.leaflet-popup-content {
    color: black !important;
    font-size: 1.4rem;
    margin: 10px 8px 8px 8px;
}
.leaflet-popup-tip {
    display: none;
}
.leaflet-fade-anim .leaflet-popup {
    transition: 0s;
}
#title {
    position: absolute;
    top: 30px;
    left: -10px;
    z-index: 10000;
    font-family: var(--fontFamily);
    font-weight: 600;
    user-select: none;
}
#title_text {
    padding: 10px;
    padding-left: 20px;
    font-size: 1.6rem;
    border: #1f57be 4px solid;
    background: #ffffff;
    color: #1f57be;
    vertical-align: bottom;
}
#title_time {
    padding: 10px;
    padding-left: 25px;
    font-size: 1.4rem;
    background: #00000088;
    color: white;
}
#title_time .small {
    font-size: 80%;
    letter-spacing: 2px;
}
#info {
    position: absolute;
    top: calc(30px + 40px + 1.6rem + 1.4rem + 30px);
    left: 15px;
    z-index: 10000;
    padding: 10px;
    font-size: 1.4rem;
    background: #00000088;
    color: white;
    font-family: var(--fontFamily);
    font-weight: var(--fontWeight);
    line-height: 1.8rem;
    min-width: 13em;
}
#info .maxint {
    font-size: 2rem;
    text-align: center;
    line-height: 2.2rem;
}
#info .maxint img, .shindo_ichiran_kakutitle img {
    height: 1em;
    transform: translateY(8%);
    margin-left: 5px;
}
.shindo_ichiran_kakutitle .kasho_small, #shindo_ichiran .small {
    font-size: 80%;
}
.btns {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 10000;
    user-select: none;
}
.setsumei, #quakelist, #reload, #map_ichi, #test, #btn_shindo_ichiran, #autoreload, #display_onoff_point_check, #view_info {
    display: inline-block;
    background: #00000088;
    border: white 2.5px solid;
    border-radius: 5px;
    color: white;
    padding: 5px;
    font-family: var(--fontFamily);
    font-weight: var(--fontWeight);
    font-size: 0.9rem;
    cursor: pointer;
}
#reload, #autoreload {
    background: #00000000;
    padding: 5px;
    border: none;
}
#reload_num, #autoreload_num {
    background: #00000000;
    border: 0;
    width: 2rem;
    font-family: var(--fontFamily);
    font-weight: var(--fontWeight);
    font-size: 0.9rem;
    color: white;
    border-bottom: #ffffff 1px solid;
}
.setsumei {
    cursor: default;
}
.autoreload_setsumei.on {
    background: #ffffff;
    color: black;
}
.autoreload_setsumei.on button, .autoreload_setsumei.on input {
    color: black!important;
}
.autoreload_setsumei.on input {
    border-bottom: #000000 1px solid!important;
}
#shindo_ichiran {
    width: 30rem;
    height: 80%;
    position: absolute;
    right: 30px;
    top: 3%;
    font-family: var(--fontFamily);
    font-weight: var(--fontWeight);
    font-size: 1.5rem;
    padding: 1% 0 1% calc(1% + 6px);
    color: #000000;
    background: #ffffff;
    border: #1f57be 3px solid;
    border-radius: 5px;
    z-index: 10000;
    overflow: hidden;
    display: none;
}
#shindo_ichiran.display {
    display: initial;
    animation: shindo_ichiran_display 0.5s ease-in-out 0s;
}
#shindo_ichiran.display_none {
    animation-fill-mode: forwards;
    animation: shindo_ichiran_display_back 0.5s ease-in-out 0s;
}

#shindo_ichiran ruby {
    white-space: nowrap;
}
#shindo_ichiran rt {
    font-size: 0.7em;
}
#shindo_ichiran .display {
    display: none;
}
#shindo_ichiran_title_parent {
    user-select: none;
    margin-right: 2%;
    cursor: grab;
}
.shindo_ichiran_title {
    position: relative;
    text-align: center;
    font-size: 2rem;
    color: #1f57be;
}
#shindoichiran_title_num {
    text-align: center;
    margin: 0.25em 0;
    font-size: 1.5rem;
    color: #1f57be;
}
.shindo_ichiran_title::before,
.shindo_ichiran_title::after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: calc(50% - 3em);
    height: 3px;
    border-top: 3px solid #1f57be;
}
.shindo_ichiran_title::before {left:0;}
.shindo_ichiran_title::after {right: 0;}
#shindo__article, #shindo7_article, #shindo65_article, #shindo60_article, #shindo55_article, #shindo50_article, #shindo4_article, #shindo3_article, #shindo2_article, #shindo1_article, #shindoN_article {
    margin-top: 0.3em;
    margin-bottom: 0.7em;
    font-size: 0.8em;
    margin-left: 0.5em;
}
#shindo_ichiran hr {
    border-bottom: #1f57be 2px solid;
    margin: 0.5em 0;
}
#shindo_ichiran_scroll::-webkit-scrollbar {
    width: 12px;
}
#shindo_ichiran_scroll::-webkit-scrollbar-track {
    background: #e4e4e4;
}
#shindo_ichiran_scroll::-webkit-scrollbar-thumb {
    background: #787878;
    border: transparent 3px solid;
    border-radius: 16px;
    background-clip: content-box;
}
#shindo_ichiran_drag {
    width: 10px;
    height: 100%;
    background-color: #cccccc;
    cursor: ew-resize;
    position: absolute;
    left: 0;
    top: 0;
}
#shindo_ichiran_drag::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 30px;
    background-color: #717171;
    border-radius: 6px;
}
#shindo_ichiran_scroll {
    overflow-y: auto;
    height: calc(100% - 5.5rem);
    padding-right: 2%;
    pointer-events: auto;
}
#theme_set input[type=radio], #icon_theme_set input[type=radio], #display_onoff input[type=checkbox] {
    display: none;
}
#theme_set label, #icon_theme_set label, #display_onoff label {
    display: inline-block;
    background: #00000000;
    border: white 2.5px solid;
    border-radius: 5px;
    color: white;
    padding: 3px 5px;
    font-family: var(--fontFamily);
    font-weight: var(--fontWeight);
    font-size: 0.9rem;
    cursor: pointer;
}
#theme_set label:first-of-type, #icon_theme_set label:first-of-type, #display_onoff label:first-of-type {
    margin-left: 3px;
}
#theme_set input[type=radio]:checked+label, #icon_theme_set input[type=radio]:checked+label, #display_onoff input[type=checkbox]:checked+label {
    background: #ffffff;
    color: black;
}
.shindoichiran input[type=checkbox], #shindoiconbig_check {
    display: none;
}
.shindoichiran label, #shindoiconbig_check+label {
    display: inline-block;
    background: #00000088;
    border: white 2.5px solid;
    border-radius: 5px;
    color: white;
    padding: 5px;
    font-family: var(--fontFamily);
    font-weight: var(--fontWeight);
    font-size: 0.9rem;
    cursor: pointer;
}
.shindoichiran input[type=checkbox]:checked+label, #shindoiconbig_check:checked+label {
    background: #ffffff;
    color: black;
}

@keyframes shindo_ichiran_display {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes shindo_ichiran_display_back {
    0% { opacity: 1; }
    100% { opacity: 0; 
    }
}
#appinfo {
    display: none;
    position: absolute;
    width: 70vw;
    height: 80vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #116637;
    border-radius: 10px;
    box-shadow: 0px 0px 15px 5px #5c5c5c;
    padding: 5vh 10vw;
    font-family: var(--fontFamily);
    font-weight: var(--fontWeight);
    font-size: 1.5rem;
    color: #ffffff;
    overflow-y: scroll;
    z-index: 20000000;
}
#appinfo.display {
    display: block;
}
#info_closebtn {
    position: absolute;
    font-size: 35px;
    right: 2rem;
    top: 2rem;
    cursor: pointer;
    user-select: none;
    transition: transform 0.25s ease-in-out 0s;
}
#info_closebtn:hover {
    background-color: #80808080;
    border-radius: 5px;
    transform: rotate(-90deg);
}
.inyomoto td {
    padding: 0 5px;
}
.leaflet-tooltip {
    background-color: #ffffffd9;
    box-shadow: 0px 3px 7px 2px rgba(0, 0, 0, 0.4);
    border-radius: 0!important;
    font-family: var(--fontFamily);
    font-weight: var(--fontWeight);
    font-size: 1.3rem;
    padding: 5px;
    border: #ffffff 2px solid;
}
.leaflet-tooltip:before, .leaflet-tooltip:after {
    content: "";
}
.leaflet-tooltip.PolygonLayer_Style_test_tsunami_1 {background-color: #dd00dddd;color: #ffffff;}
.leaflet-tooltip.PolygonLayer_Style_test_tsunami_2 {background-color: #ff1400dd;color: #ffffff;}
.leaflet-tooltip.PolygonLayer_Style_test_tsunami_2_kaijo {background-color: #ff1400dd;color: #ffffff;}
.leaflet-tooltip.PolygonLayer_Style_test_tsunami_3 {background-color: #faf500dd;color: #000000;}
.leaflet-tooltip.PolygonLayer_Style_test_tsunami_3_kaijo {background-color: #faf500dd;color: #000000;}
.leaflet-tooltip.PolygonLayer_Style_test_tsunami_4 {background-color: #00ccffdd;color: #000000;}

.tsunami_text_1 {background-color: #dd00dddd;color: #ffffff;padding: 3px;}
.tsunami_text_2 {background-color: #ff1400dd;color: #ffffff;padding: 3px;}
.tsunami_text_3 {background-color: #faf500dd;color: #000000;padding: 3px;}
.tsunami_text_4 {background-color: #00ccffdd;color: #000000;padding: 3px;}
.tsunami_text_warning {background-color: #ffffffdd;color: #000000;padding: 3px;}

.tsunami_infobox {
    display: none;
    border-radius: 0;
    font-family: var(--fontFamily);
    font-weight: var(--fontWeight);
    font-size: 1.2rem;
    padding: 10px!important;
    border: #ffffff 3px solid;
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 20000000;
    cursor: grab;
}
.tsunami_infobox.display {display: block;}
.tsunami_infobox_close {
    font-size: 1.3rem;
    position: absolute;
    top: 3px;
    right: 5px;
}

.moveable-control-box {display: none!important;}

#topleftConsole {
    background: #1d1d1d;
    border: 2px #dddddd solid;
    padding: 5px;
    color: #ffffff;
    position: absolute;
    left: 0;
    top: 0;
    height: 1rem;
    font-family: monospace;
}
.topRightError, .topRightInfo {
    border: 2px #dddddd solid;
    padding: 7px 10px;
    color: #ffffff;
    position: absolute;
    right: 50px;
    top: 10px;
    z-index: 20000000;
    font-size: 1.15rem;
    border-radius: 5px;
    font-family: var(--fontFamily);
    font-weight: var(--fontWeight);

    display: inline-flex;
    align-items: center;
    gap: 8px;

    opacity: 0;
    transform: scale(0);
    box-shadow: 0px 0px 15px 5px #5c5c5c00;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}
.topRightError {background: #b91919;}
.topRightInfo {background: #0760d4;}
.topRightError.display, .topRightInfo.display {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0px 0px 15px 5px #5c5c5c;
}

.acc_content_switch {
    display: none;
}
.acc_content_switch_label {
    position: relative;
    display: inline-block;
    margin-right: 0px;
    cursor: pointer;
}
.acc_content_switch_back {
    width: 50px;
    height: 22px;
    background: #202020;
    border-radius: 25px;
    border: 3px #d2d2d2 solid;
    transition: 0.3s;
}
.acc_content_switch_front {
    position: absolute;
    width: 18px;
    height: 18px;
    top: 4.5px;
    left: 5px;
    border-radius: 18px;
    background: #d2d2d2;
    transition: 0.3s;
}
.acc_content_switch:checked ~ .acc_content_switch_back {
    background: #0080ff;
    border: 3px #ffffff solid;
}
.acc_content_switch:checked ~ .acc_content_switch_front {
    background: #ffffff;
    left: 32px;
}

/* Googleマテリアルアイコン */
@font-face {
    font-family: 'Material Symbols Rounded';
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v162/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDB_Qb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2) format('woff2');
}
.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    transform: scale(1.6) translateY(5%);
    font-weight: 400!important;
    padding: 0 1px;
}