@charset "UTF-8";
/* CSS Document */

:root{
    /* 色関連 */
    --primary-color: #387c3b;
    --primary-btn-color: #5fb663;
    --primary-btn-disabled-color: #acacac;
    --secondary-btn-color: #387c3b;
    --home-background-color: #eeeeee;
    --cast-color: #ffffff;

    /* サイズ関連 */
    --home-btn-size: 16rem;
    --home-btn-logo-height: 9rem;

    --safe-color: #5fb663;
    --warning-color: #ffa623;
    --danger-color: #ee514e;
}

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  -webkit-font-smoothing: antialiased;
}

html{
    background-color: var(--home-background-color);
}

input, button, select {
  font: inherit;
}

h1 {
  font-size: 2.4rem !important;
  margin-top: 0.4rem;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

img {
    display: block;
    max-width: 100%;
}



h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

body.container {
    all: unset;

    display: flex;
    height: 100%; 
}

p {
  text-wrap: pretty;
}

p {
    all: unset;
}

a{
    text-decoration: none;
}

.debug{
  padding: 4px;
  border: solid 1px lightgray;
  margin: 8px;
  color: darkgrey;
}

.scroll-to-top {
  z-index: 10000;
}

.none{
  display: none;
}
.hide{
  opacity: 0;
  pointer-events: none;
}


.error_message{
  color: red;
}

.disabled{
  opacity:0.65;
  pointer-events:none;
}

.site_image .img_box{
  min-height: 48px;
  min-width: 68px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.site_image img{
  max-width: 65px;
  max-height: 45px;
}



#dtable thead th {
  font-size: 0.8rem;
  text-align: center;
  vertical-align: center;
}

#dtable tfoot th {
  font-size: 0.8rem;
  text-align: center;
  vertical-align: center;
}

#dtable tbody td.left {
  font-size: 0.9rem;
  text-align: left;
  vertical-align: center;
}

#dtable tbody td.right {
  font-size: 0.9rem;
  text-align: right;
  vertical-align: center;
}

#dtable tbody td.center {
  font-size: 0.9rem;
  text-align: center;
  vertical-align: center;
}

#dtable tbody tr:nth-child(even):hover td{
  color: black;
  background-color: #ebf1ff !important;
  /*background-color: rgba(0, 0, 255, 0.2) !important;*/
}

#dtable tbody tr:nth-child(odd):hover td {
  color: black;
  background-color: #ebf1ff !important;
  /*background-color: rgba(0, 0, 255, 0.2) !important;*/
}

#dtable tbody tr {
  cursor:pointer;
}


.graph-card{
  min-width: 460px;
}

.graph-image{
  position: relative;
  padding: 0;
  max-width: 280px;
}
.graph-canvas{
  position: absolute;
  top:0;
  left:0;
}

.graph-point-value{
  position: absolute;
  top:0;
  left:0;
  z-index: 1;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  min-width:100px;
  padding: 0 8px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.7);
  border: solid 2px white;
  color: white;
  transition: all 150ms 0s ease;
}


.graph-bar{
  position: absolute;
  background-color: rgba(0, 0, 196, 0.5);
  top:0;
  left:0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  cursor: pointer;
}
.graph-bar:hover {
  background-color: rgba(0, 0, 196, 0.3);
  transform: scale(1, 1.05);
}

.graph-bar.isolation_layer{
  position: absolute;
  background-color: rgba(72, 156, 235, 0.2);
  top:0;
  left:0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  cursor: pointer;
}
.graph-bar.isolation_layer:hover {
  background-color: rgba(72, 156, 235, 0.2);
  transform: scale(1, 1.05);
}


.graph-point{
  position: absolute;
  background-color: rgba(0, 0, 109, 0.6);
  height: 20px;
  width: 20px;
  border-radius: 50%;
  top:0;
  left:0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  transform: translate(-10px, -10px);
  cursor: pointer;
}
.graph-point:hover {
  background-color: rgb(34, 34, 121);
  transform: translate(-10px, -10px) scale(1.2, 1.2);
}

.bootbox.modal.show .modal-dialog {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: calc(100% - (1.75rem * 2));
}


.bg-warning2 {
  background-color: #FEEF0B !important;
}

a.bg-warning2:hover, a.bg-warning2:focus,
button.bg-warning2:hover,
button.bg-warning2:focus {
  background-color: #f4b30d !important;
}



.notify-badge {
    position: absolute;
    background: rgba(255,0,0,1);
    height:1rem;
    top:0.5rem;
    right:1.0rem;
    width:2rem;
    text-align: center;
    line-height: 1rem;;
    font-size: 1rem;
    border-radius: 50%;
    color:white;
    border:0px solid blue;
}

thead th.rightline-2 {
    border-right: solid 2px;
}

thead th.rightline-1 {
    border-right: solid 1px;
}

tbody td.rightline-2 {
    border-right: solid 2px;
}

tbody td.rightline-1 {
    border-right: solid 1px;
}

.home{
    padding: 0.8rem;
    width: 100%;
    background-color: var(--home-background-color);
}

.home > .title{
    color: var(--primary-color);
    margin-top: 0.4rem;
}

.list-container > .title{
    color: var(--primary-color);
    margin-top: 0.5rem;
}

.link-group{
    display: flex;
    align-items: center;
    gap: 2rem;

    padding-left: 1rem;
    padding-top: 2rem;
}

.home-nav-group{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: var(--primary-btn-color);
    color: white;
    height: var(--home-btn-size);
    width: var(--home-btn-size);
    border-radius: 4px;
    box-shadow: 7px 10px var(--cast-color),
                -7px 10px var(--cast-color);

    cursor: pointer;

    gap: 5px;
}

.home-nav-group > img{
    filter: brightness(0) invert(1);
    height: var(--home-btn-logo-height);
    width: auto;
}

.home-nav-group:hover{
    text-decoration: none;
    color:white;
}

.home-nav-group > p{
    font-size: larger;
}

div#wrapper{
    display: flex;
    width: 100%;
    height: 100%;
    background-color: var(--home-background-color);
}

#wrapper #content-wrapper {
  width: 100%;
  overflow-x: hidden;
}

.summary-container{
    height: 100%;
    width: 100svw;
    padding: 0.8rem;
    overflow: hidden;
}

.list-container{
    padding: 0.8rem 0.8rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.content{
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 1rem;
    max-width: 1280px;
    margin-inline: auto;
}

.title > h1 {
    color: var(--primary-color);
    font-size: x-large;
    font-weight: normal;
    padding-left: 10px;
}

.flex-row-container{
    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 1rem;
}
.gap-12p{
    gap: 12px;
}

.building-img {
    max-width: 65%;
    max-height: 65%;
    object-fit: contain;
    flex-shrink: 0;
    /*
    flex-shrink: 0;
    margin-right: 1rem !important; /* gap の代わりにマージンを使用 */
    */
}

.building-info{
    /*max-width: 550px;*/
    max-width: 100% !important;
    width: 100%;
    height: 220px;
    padding: 8px;
}

.plan-img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.top-image{
    max-width: 100%;
    height: 180px;
    padding: 1rem;
    object-fit: contain;
}

.right-side{
    margin-left: auto;
    margin-right: 2px;
    padding: 12px 6px 6px 0;
}

.info-group{
    background-color: white;
    margin-top: 20px;
    padding-top: 20px;
    min-width: 0px;
    max-width: 100%;
    box-shadow: 0 5px 5px rgb(179, 179, 179);
}

.info-group > .group-label{
    position: absolute;
    padding: 5px 15px;
    margin-left: 10px;
    margin-top: -35px;
    border-radius: 5px;

    font-size: 1.4rem;
    text-wrap: nowrap;
    color: white;
    background-color: var(--primary-btn-color);
    box-shadow: 0 2px 3px rgb(179, 179, 179);
}

.info-group-large{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    width: 32%;
    background-color: white;
    box-shadow: 0 5px 5px rgb(179, 179, 179);
}

.info-group-large > .group-label{
    text-align: center;

    margin-top: -1rem;
    font-size: 3.5rem;
    font-weight: lighter;
    padding: 1rem;
    width: 85%;

    text-wrap: nowrap;

    border-radius: 5px;
    background-color: #5fb663;
    color: white;
    box-shadow: 0 2px 3px rgb(179, 179, 179);
}

.info-group-large > p{
    font-size: 1.5rem;
}


.info-group-search{
    background-color: white;
    margin-top: 20px;
    padding-top: 20px;
    min-width: 0px;
    max-width: 100%;
    box-shadow: 0 5px 5px rgb(179, 179, 179);
    margin-inline: 1.2rem;
    /*padding-inline: 1.3rem;*/
    padding-inline: 0.5rem;
}

.info-group-search > .group-label{
    position: absolute;
    padding: 5px 15px;
    margin-left: 10px;
    margin-top: -35px;
    border-radius: 5px;

    font-size: 1.4rem;
    text-wrap: nowrap;
    color: white;
    background-color: var(--primary-btn-color);
    box-shadow: 0 2px 3px rgb(179, 179, 179);
}

.info-group-search-large{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    width: 32%;
    background-color: white;
    box-shadow: 0 5px 5px rgb(179, 179, 179);
}

.info-group-search-large > .group-label{
    text-align: center;

    margin-top: -1rem;
    font-size: 3.5rem;
    font-weight: lighter;
    padding: 1rem;
    width: 85%;

    text-wrap: nowrap;

    border-radius: 5px;
    background-color: #5fb663;
    color: white;
    box-shadow: 0 2px 3px rgb(179, 179, 179);
}

.info-group-search-large > p{
    font-size: 1.5rem;
}

.window-size{
    width: 100%;
    max-width: 1300px;
    margin-inline: auto;
}

canvas.graph{
    width: 150px !important;
}

canvas.graph-small {
    width: 100px !important;
}

canvas.graph-small-left {
    width: 120px !important;
}

canvas.graph-small-right {
    width: 120px !important;
}

canvas.graph-1d-eq{
    width: 150px !important;
}

.graph-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 400px;
    max-width: 100%;
    width: 100%;
}

.canvas-group{
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.canvas-group > div{
    width: auto;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.primary-text{
    color: var(--primary-color);
    font-size: 1.5rem;
}

.primary-text.is-noise {
    color: var(--primary-color);
    font-size: 1.2rem;
}

.btn-container{

}

.primary-btn{
    display: flex;
    align-items: center;
    justify-content: center;
}

.primary-btn > img{
    height: 46px;
    width: auto;
    background-color: var(--secondary-btn-color);
    border-radius: 5px 0 0 5px;
    padding: 7px;
}

.primary-btn:hover{
    cursor: pointer;
    text-decoration: none;
    color: white;
}

.primary-btn > span{
    width: 125px;
    background-color: var(--primary-btn-color);
    color: white;
    font-size: 1.4rem;
    border-radius: 0 5px 5px 0;
    text-wrap: nowrap;
    padding: 7px;
    text-align: center;
}

.primary-btn-search{
    display: flex;
    align-items: center;
    justify-content: center;
}

.primary-btn-search > img{
    height: 42px;
    width: auto;
    background-color: var(--secondary-btn-color);
    border-radius: 5px 0 0 5px;
    padding: 7px;
}

.primary-btn-search:hover{
    cursor: pointer;
    text-decoration: none;
    color: white;
}

.primary-btn-search > span{
    width: 90px;
    background-color: var(--primary-btn-color);
    color: white;
    font-size: 1.2rem;
    border-radius: 0 5px 5px 0;
    text-wrap: nowrap;
    padding: 7px;
    text-align: center;
}

.noisebadge {
    display: inline-block;
    background-color: #ff8c00; /* オレンジ色 */
    color: white; /* 文字色 */
    font-size: 14px;
    font-weight: bold;
    padding: 4px 10px; /* バッジのサイズを調整 */
    border-radius: 15px; /* 角を丸くする */
    text-align: center;
}

.noisebadgelist {
    display: inline-block;
    background-color: #ff8c00 !important; /* オレンジ色 */
    color: white !important; /* 文字色 */
    font-size: 9px;
    font-weight: bold;
    padding: 4px 10px; /* バッジのサイズを調整 */
    border-radius: 15px; /* 角を丸くする */
    text-align: center;
}

.right-faced-btn > span{
    border-radius: 5px 0 0 5px;
}

.right-faced-btn > img{
    border-radius: 0 5px 5px 0;
}

.secondary-btn{
    background-color: var(--secondary-btn-color);
    color: white;
    font-size: 1.4rem;
    border-radius: 5px;
    padding: 7px;
    text-wrap: nowrap;
    width: 94px;
    text-align: center;
}

.secondary-btn > span{
    width: 94px;
    font-size: 1.4rem;
    border-radius: 0 5px 5px 0;
    text-wrap: nowrap;
    padding: 7px;
    text-align: center;
}

.secondary-btn:hover{
    cursor: pointer;
    text-decoration: none;
    color: white;
}

.secondary-btn.disabled{
    filter: grayscale(1);
    border-radius: 5px;
    pointer-events:none;
    opacity: 0.8;
}

.primary-btn.disabled{
    filter: grayscale(1);
    border-radius: 5px;
    pointer-events:none;
    opacity: 0.8;
}

.flex-column-container{
    display: flex;
    gap: 5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex-column-container-no-gap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.canvas-label-container{
    display: flex;
    gap: 5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 400px;
}

.card-body {
  flex: 1 1 auto;
  padding: 1.25rem;
}

mark{
    background: none;
    color: blue
}

div.building-info-text {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}

div.building-info-text > p {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;

    width: 100% !important;
    padding: 0;
    margin: 0;
    font-size: 1.1rem;
}

.building-info-text p .label-title {
    flex-shrink: 0;
    width: 115px;
}

.building-info-text p .data-value {
    flex-grow: 1; 
    min-width: 0; 
    word-break: break-all;
    white-space: normal;
}

.flex-row-container.building-info {
    gap: 0 !important;
}

.justify {
    justify-content: center;
}

.align{
    align-items: stretch;
}

.spaced{
    justify-content: space-between;
}

.graph-description {
    border: black solid 3px;
    padding-inline: 1rem;
    font-weight: bold;
}

.legend{
    background-color: white;
    position: relative;
    top: -20px;
    left: 140px;
    height: auto;
    margin-bottom: -30px;
}

.info-top{
    width: 50%;
}

#mapcontainer{
    width: 100%;
    height: 400px;
}

.KA-container{
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: baseline;
}

.justify-evenly{
    justify-content: space-evenly !important;
}

hr{
    margin-block-start: 0;
    margin-block-end: 0;

}

.separator-long{
    width: 90%;
    margin-inline: 5%;
    height: 1px;
    border-top: 2px solid #2238da;
    padding-block: 0;
    margin-top: -5px;
    margin-bottom: 5px;
}

.separator-vert-long{
    height: 100%;
    width: 1px;
    border-inline: 1px solid #2238da;
    padding-block: 0;
    padding-top: 1rem;
    
}

@media print {
    @page {
        size: A3;
        margin: 0mm;
    }

    * {
        print-color-adjust: exact !important;
        color-adjust: exact !important; 
        -webkit-print-color-adjust: exact !important;
    }

    .no-print {
        display: none
    }
    .sidebar.no-print {
        display: none
    }

    .content-area-to-print {
        /* この要素内での改ページを絶対に禁止 */
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        
        /* 念のため、要素の前後の改ページも禁止 */
        page-break-before: avoid !important;
        page-break-after: avoid !important;
    }

    #mapcontainer {
        height: 300px;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .info-group .card-body {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .summary-container {
        transform: scale(1.00) !important; 
        transform-origin: top left;
        width: 111.11% !important; 
        height: 111.11% !important;
    }

    .KA-container {
        /*height: auto !important;*/
        height: 40px !important;
        min-height: 1px !important;
        margin: 0 !important;
        padding: 0 0 5px 0 !important;
        page-break-after: avoid !important;
    }
    
    .separator-long {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

.search-spinner{
  position:absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

#early_warning {
    font-size: 1.4rem;
}

.label-title {
    display: inline-block;
    min-width: 110px; /* タイトルに固定幅を持たせる */
    font-weight: bold;
    color: blue;
    padding-right: 5px; /* タイトルと値の間に隙間を空ける */
    text-align: right; /* タイトルを右寄せにする */
}

.point-colmun {
    width: 30px;
}

.datetime-colmun {
    width: 80px;
}

/* 震度階級IDごとの背景色 */
.bg-shindo-9 { background-color: #b40068 !important; } /* 震度7 */
.bg-shindo-8 { background-color: #a50021 !important; } /* 震度6強 */
.bg-shindo-7 { background-color: #ff2800 !important; } /* 震度6弱 */
.bg-shindo-6 { background-color: #ff9900 !important; } /* 震度5強 */
.bg-shindo-5 { background-color: #ffe600 !important; } /* 震度5弱 */
.bg-shindo-4 { background-color: #fae696 !important; } /* 震度4 */
.bg-shindo-3 { background-color: #0041ff !important; } /* 震度3 */
.bg-shindo-2 { background-color: #00aaff !important; } /* 震度2 */
.bg-shindo-1 { background-color: #f2f2ff !important; } /* 震度1 */
.bg-shindo-0 { background-color: #ffffff !important; } /* 震度0 */

/* 震度階級IDごとのテキスト色 */
.text-shindo-9 { color: #ffffff !important; } /* 震度7 */
.text-shindo-8 { color: #ffffff !important; } /* 震度6強 */
.text-shindo-7 { color: #ffffff !important; } /* 震度6弱 */
.text-shindo-6 { color: #ffffff !important; } /* 震度5強 */
.text-shindo-5 { color: #000000 !important; } /* 震度5弱 */
.text-shindo-4 { color: #000000 !important; } /* 震度4 */
.text-shindo-3 { color: #ffffff !important; } /* 震度3 */
.text-shindo-2 { color: #ffffff !important; } /* 震度2 */
.text-shindo-1 { color: #000000 !important; } /* 震度1 */
.text-shindo-0 { color: #000000 !important; } /* 震度0 */

.home_btn_txt {
    font-size: 2.4rem !important;
}