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

/*
blue : #033356
green : #00a79b
gray : #cacaca
d-gray : #808080
th :#2f4f4f
*/

* {
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

html {
height: 100%;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
}

body {
height: 100%;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
font-size: 16px;
line-height: 1.6;
letter-spacing: 0.1em;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
color: #333333;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
}
a{
text-decoration: none;
}
.__grad{
background-image: linear-gradient(135deg, rgba(2, 52, 87, 1) 0%, rgba(1, 89, 127, 1) 24%, rgba(123, 186, 201, 1) 100%);
}
.__b_text{
color: #333333;
}
.__wh_text{
color: #ffffff;
}
.__gray{
background-color: #cacaca;
color: #333333;
}
.sub_title{
font-size: 1.2rem;
font-weight: 700px;
}
button:hover{
background-color: #cacaca;
}
#home{
width: 100%;
height: 100%;
background-image: url("../images/home_bg.png");
background-position: center;
background-repeat: no-repeat;
background-size:cover;
}

#loginbox{
width: 380px;
height: auto;
padding: 30px;
color: #252525;
text-align: center;
border-radius: 30px;
box-shadow: 2px 2px 6px #000;
position: relative;
}
#loginbox h1{
font-size: 1.9rem;
font-weight: 900;
letter-spacing: 1.0;
color: #ffffff;
margin-bottom: 2rem;
}
#loginbox input{
margin-bottom: 1rem;
}
#loginbox .btn{
display: inline-block;
color: #ffffff;
padding: 0.5rem 3rem;
margin: 0 auto;
border: solid 1px;
background-color: rgba(255,255,255,0.10);
border-radius: 30px;
}
header{
color: #ffffff;
display: flex;
justify-content: space-between;
padding: 10px 10px 5px 10px;
}
header #con_name{
display: inline-block;
display: flex;
white-space: nowrap;
align-items: baseline;
}
header #con_name h2{
display: inline;
font-size: 1.0rem;
padding:10px 5px;
margin-right: 5%;
border-top: solid 0.9px #ffffff;
border-bottom: solid 0.9px #ffffff;
}
header #con_name #title{
display: inline;
font-size:1.2rem;
}
header #title img{
width:auto;
height: 40px;
margin:0 5%;
}
#menu{
display: flex;
align-items:center;
margin-right: 3%;
}
#menu_title{
font-size: 0.8rem;
font-weight: 700;
margin-right: 5px;
}
#navber{
margin: 10px;
}
.drawer-hidden{
display: none;
}
.drawer-open{
display: flex;
height: 30px;
width: 40px;
justify-content: center;
align-items: center;
position: relative;
z-index: 100;
cursor: pointer;
}
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
content: '';
display: block;
height: 3px;
width: 30px;
background: #ffffff;
transition: 0.5s;
position: absolute;
}
.drawer-open span:before {
bottom: 10px;
}
.drawer-open span:after {
top: 10px;
}
#drawer-check:checked ~ .drawer-open span {
background: rgba(255, 255, 255, 0);
}
#drawer-check:checked ~ .drawer-open span::before {
bottom: 0;
transform: rotate(45deg);
}
#drawer-check:checked ~ .drawer-open span::after {
top: 0;
transform: rotate(-45deg);
}
.drawer-content {
width: 30%;
height: 100%;
position: fixed;
top: 0;
left: 100%;
z-index: 99;
background: rgba(3,51,86,0.90);
transition: .5s;
}
#drawer-check:checked ~ .drawer-content {
left: 70%;
}
.drawer-list{
list-style: none;
width: 70%;
height: auto;
}
.drawer-item{
background-color: #00a79b;
border-radius: 30px;
padding: 10px 30px;
margin-bottom: 3rem;
text-align: center;
}
.drawer-item img{
width: 20px;
height: auto;
margin-right: 10px;
}
.drawer-item a{
text-decoration: none;
color: #ffffff;
font-size: 1.4rem;
font-weight: 500;
}
ul.bt_item{
bottom:10%;
padding: 0;
margin: 0;
text-align: center;
list-style: none;
}
ul.bt_item li{
margin-bottom: 10px;
}
ul.bt_item li a{
color:#ffffff;
}
#wrapper{
width: 100%;
height: auto;
padding: 10px 5%;
}
#sub_menu{
width: 100%;
height: auto;
margin-bottom: 10px;
font-size: 0.8rem;
display: flex;
align-items:center;
justify-content: space-between;
}
#sub_menu label{
white-space: nowrap;
}
#sub_menu div{
display: flex;
align-items:center;
margin: 0;
padding: 0;
}
#sub_menu .input_s{
width: auto;
display: inline;
margin: 0 0.5rem;
padding-top: 3px;
}
#sub_menu .btn_s{
display: inline;
border: solid 1px #808080;
background-color: #cacaca;
padding: 3px 10px;
margin: 0 0.5rem;
text-align: center;
}
#sub_menu .page-link{
border: solid 1px #808080;
background-color: #cacaca;
padding: 3px 10px;
margin: 0 0.5rem;
color: #333333;
display: inline;
}
#sub_menu .page-link a{
display: inline-block;
color: #333333;
}
#sub_menu .btn{
display: inline-block;
color: #ffffff;
font-weight: 700;
padding: 0.5rem 2rem;
margin: 0 0.5rem 0 0;
border: solid 1px;
background-color: #00a79b;
border-radius: 30px;
}
#sub_menu .btn a{
color: #ffffff;
font-size: 900;
}
#sub_menu #layoutimg{
display: inline;
}
#sub_menu #layoutimg img{
width: auto;
max-height: 60px;
border: solid 1px #808080;
margin-left: 0.5rem;
}
.modal-content{
width: 100%;
height: 100%;
margin: 0 auto;
}
.modal-body img{
width: 100%;
height: auto;
}
.modal-header .close{
position: absolute;
right:-10%;
top:10px;
z-index: 1000;
font-size: 2rem;
border: 0;
background-color: none;
}
#sub_menu #customrange{
width: 120px;
}
.table_box{
width: 100%;
height: 85vh;
overflow: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.table_box::-webkit-scrollbar {
display: none;
}
table.t1{
width: 100%;
height: 100%;
font-size: 0.8rem;
border-collapse: collapse;
border-spacing: 0;
cursor: grab;
margin-bottom: 20px;
}
table.t1:active{
cursor: grabbing;
}
table.t1 th{
background-color: #2f4f4f;
color: #ffffff;
text-align: center;
white-space: nowrap;
padding: 5px;
border: solid 1px #808080;
}
table.t1 tr{
height: 1.8rem;
}
table.t1 .stic_top{
position:sticky;
top: 0;
left: 0;
z-index: 1;
}
table.t1 tr.stic{
position: sticky;
top: 0;
left: 0;
z-index: 1;
}
table.t1 tr.stic2{
position: sticky;
top: 1.85rem;
left: 0;
}
table.t1 tr.stic3{
position: sticky;
top: 3.7rem;
left: 0;
}
table.t1 .stic_y{
position: sticky;
top: 1.8rem;
top:0;
left: 0;
}
table.t1 td{
padding: 5px;
white-space: nowrap;
border: solid 1px #808080;
}
table.t1 tr:hover{
background: #ffb1c5;
}
table.t1 tr:nth-child(2n+1){
background: #cacaca;
border: solid 1px #808080;
}
table.t1 tr:nth-child(2n+1):hover{
background: #ffb1c5;
border: solid 1px #808080;
}
.graph_item{
width: 100%;
height: 120px;
overflow: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
display: flex;
margin: 0 0 10px 0;
padding: 0;
}
.graph_item::-webkit-scrollbar {
display: none;
}

.graph_item label{
width: 150px;
height: 100%;
background-color: #2f4f4f;
position:sticky;
top: 0;
left: 0;
}
.graph_item label span{
display: inline-block;
white-space: nowrap;
width: 100%;
height: auto;
color: #ffffff;
font-size: 0.8rem;
font-weight: 700;
padding: 10px;
}
.graph_box{
width: 100%;
/*background-color: #cacaca;*/
cursor: grab;
padding-left: 20px;
}
.graph_box active{
cursor: grabbing;
}
.graph_box img{
width: auto;
height: 100%;
}
.mailalert{
margin-bottom: 2rem;
display: flex;
}
.mailalert h3.sub_title{
display: inline;
margin-right: 1rem;
}
textarea.mailadd{
display: inline-block;
width: 40%;
height: 120px;
margin-right: 30px;
}
.alert_update_btn{
display: inline;
width: auto;
height: auto;
color: #ffffff;
font-weight: 700;
padding: 0.5rem 2rem;
margin: 0 auto 10px auto;
background-color: #00a79b;
border: solid 1px #ffffff;
border-radius: 30px;
}
.alert_update_btn a{
color: #ffffff;
font-size: 900;
}
.alert_cancel_btn{
display: inline;
width: auto;
height: auto;
color: #ffffff;
font-weight: 700;
padding: 0.5rem 2rem;
margin: 0 auto 10px auto;
background-color: #808080;
border: solid 1px #ffffff;
border-radius: 30px;
}
.alert_cancel_btn a{
color: #ffffff;
font-size: 900;
}
@media screen and (max-width: 885px){ 
#loginbox{
width: 50%;
}
.drawer-content {
width: 80%;
height: 100%;
position: fixed;
top: 0;
left: 100%;
z-index: 99;
background: rgba(3,51,86,0.90);
transition: .5s;
}
#drawer-check:checked ~ .drawer-content {
left: 20%;
}
.drawer-list{
list-style: none;
width: 80%;
height: auto;
}
.drawer-item{
background-color: #00a79b;
border-radius: 30px;
padding: 5px 10px;
margin-bottom: 3rem;
text-align: center;
}
.drawer-item img{
width: 20px;
height: auto;
margin-right: 10px;
}
.drawer-item a{
text-decoration: none;
color: #ffffff;
font-size: 1.4rem;
font-weight: 500;
}
#sub_menu{
width: 100%;
height: auto;
margin-bottom: 10px;
font-size: 0.8rem;
display:block;
align-items:center;
justify-content: space-between;
flex-flow: column;
}
#sub_menu div{
display:flex;
align-items:center;
margin: 0 0 10px 0;
padding: 0;
}
#sub_menu .btn{
display: inline-block;
color: #ffffff;
font-weight: 700;
padding: 3px 20px;
margin: 0 0.5rem 0 0;
border: solid 1px;
background-color: #00a79b;
border-radius: 10px;
}
#sub_menu .btn a{
color: #ffffff;
font-size: 900;
}
#sub_menu #layoutimg{
display:inline;
}
#sub_menu #layoutimg img{
width: 100px;
height: auto;
border: solid 1px #808080;
margin-left: 0.5rem;
}
}