@charset "utf-8";

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  text-align:center;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', YuGothic, 'Yu Gothic Medium', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  scroll-behavior: smooth;
}

body{
  position: relative;
  box-sizing: border-box;
}

#container{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
input{
-webkit-appearance:none;
border:none;
background:none;
}
input[type=text],
input[type=password]{
  border: 1px solid #707070;
  border-radius: 4px;
  background: #fff;
  padding:5px;
}
input[type=text]:focus,
input[type=password]:focus{
  outline: 1px solid #A4C3DE;
}

ul,li,dl,dt,dd{
list-style:none;
margin:0;
padding:0;
}

a{
text-decoration:none;
}

table{
border-collapse:collapse;
margin:0 auto;
}
/*
Clearfix
*/

.cf::after {
  content: "";
  display: block;
  clear: both;
}

.footer{
  font-size: 10px;
  padding: 5px;
  background-color: #E4F4F2;
  margin-top: auto;
}

/**********************************
  ボタン設定 
  *********************************/

button{
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  transition: .3s;
  -webkit-transition: .3s;
}
button:hover,
a:hover{
  opacity: 0.7;
}
a{
  transition: .3s;
  -webkit-transition: .3s;
}
input[type=submit]:active,
button:active{
  background: #516275;
}
::placeholder{
  color:#9b9b9b;
}
.textleft{
  text-align: left;
}
select{
  border:1px solid #707070;
  border-radius: 4px;
  padding: 5px;
}

.tab-on,
.btn-new,
.btn_show,
.btn_csv,
.btn-save,
.btn-back,
.btn-login{
  background: #00859D;
  color: #fff;
  width: 150px;
  padding: 8px 10px;
  border-radius: 6px;
  font-weight: 500;
}
.btn_show{
  width: 100px;
}
.btn_csv{
  width: 100px;
}
.btn-back{
  width: 100px;
}
.btn-login{
  width: 190px;
}
.btn-new{
  margin:20px auto 0;
}
.tab-on{
  width: 200px;
}
.tab-link a{
  background: #EBEBEB;
  color: #363636;
  width: 200px;
  padding: 8px 10px;
  border-radius: 6px;
  font-weight: 500;
  display: block;
}

.btn-back{
  color:#fff;
  background: #B5B5B5;
}
.btn-back{
  margin-left: 20px;
}

.btn_csv{
  margin-left: 20px;
}

/* トップ画面 */
.topheader{
  background: #fff;
  width: 100%;
  text-align: center;
}
.topheader img{
  width: 250px;
  margin: 100px 0;
}
.topheader h1{
  margin:0;
}

.main-container{
  text-align: center;
  padding: 50px 0;
}
.main-container input{
  padding:10px;
}

/*
共通ヘッダ
*/

.mainheader{
  width: 100%;
  padding-bottom: 3px;
  border-bottom: 20px solid #E4F4F2;
}
.h-box{
  background: #fff;
  width: 100%;
  padding: 5px 0;
  border-bottom: 3px solid #E4F4F2;
}
.h-container{
  width: 90%;
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.logo{
  margin: 0;
  font-weight: bold;
  font-size: 32px;
}
.logo img{
  width: 36px;
  margin-right: 5px;
  vertical-align: -5px;
}
.logo a{
  color: #00859D;
}
.h-menu{
  width: 600px;
}
.h-menu ul{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.h-menu a{
  color: #363636;
}

.h-menu img{
  height:20px;
  margin-right: 8px;
  vertical-align: -4px;
}
.on{
  border-bottom:1px dotted #363636;
  padding-bottom: 3px;
}


/*コンテナ*/
.containerbox{
  position: relative;
  
}

.maincon-box{
  width: 90%;
  max-width: 984px;
  margin:20px auto;
}

/* 矢印 */

.ar{
	position: relative;
	display: inline-block;
	padding: 0 0 0 16px;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;
}
.ar::before,
.ar::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}

/*見出し*/
.title-box h1{
  color: #00859D;
margin:0;
font-size: 20px;
font-weight: 600;
text-align: left;
display: flex;
line-height: 24px;
}
.title-box h1:before{
  display: block;
  width: 24px;
  height: 24px;
  content: "";
  background-color: #00859D;
  border-radius: 12px;
  margin-right: 5px;
}
.title-box{
border-bottom: 1px solid #00859D;
padding-bottom: 10px;
margin-bottom: 20px;
width: 100%;
display: flex;
}


/*テーブル設定*/
.box-tbl{
  background: #E4F4F2;
  border-radius: 10px;
  padding: 10px 50px;
}
.box-kanri{
  background: #E4F4F2;
  border-radius: 10px;
  padding: 20px 50px;
  width: 70%;
  margin:20px auto;
}
.box-user{
  background: #E4F4F2;
  border-radius: 10px;
  padding: 20px 50px;
  width: 40%;
  margin:50px auto 0;
}
.table1,
.tbl-device{
width:100%;
margin:0 auto;
background: #fff;
}

.table1 th,
.tbl-device th{
background:#E4F4F2;
color: #222;
font-weight:normal;
font-size:0.9em;
padding:6px 0;
}

.table1 td{
  padding:5px;
}
.tbl-device td{
font-size:0.9em;
padding:8px;
}
.tbl-device td:last-child{
  display: flex;
  align-items: center;
  justify-content: center;
}
.tbl-device td:last-child fieldset{
  padding: 0!important;
}
.tbl-device .btn-mail{
  background-color: #00859D;
  color: #fff;
  border-radius: 6px;
  text-align: center;
  width: 60px;
  padding: 5px 0 4px;
  margin-left: 20px;
}

.table1 tr:nth-child(even) {
	background: #fff;
}

.table1 tr:nth-child(odd) {
  background: #E4EDEC;
}

.tbl-device td{
  border-right: 1px solid #E4F4F2;
  border-bottom: 1px solid #E4F4F2;
}

.tbl-device .oya{
  background-color: #fff!important;
}

.stripe td{
  background-color: #E4EDEC;
}

.datepicker{
  background-image: url(../img/i-cal.svg)!important;
  background-repeat: no-repeat!important;
  background-position:bottom 5px right 5px !important;
  background-size: 12%!important;
  width: 140px;
}

.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
  background: #ccc;
}
.control input:checked ~ .control__indicator {
  background: #5477A4!important;
}
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
  background: #5477A4;
}
.control input:disabled ~ .control__indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}
.control__indicator:after {
  content: '';
  position: absolute;
  display: none;
}
.control input:checked ~ .control__indicator:after {
  display: block;
}
.control--checkbox .control__indicator:after {
  left: 8px;
  top: 4px;
  width: 7px;
  height: 11px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.control--checkbox input:disabled ~ .control__indicator:after {
  border-color: #7b7b7b;
}
.chebox{
  height: 24px;
  text-align: center;
  position: relative;
}
.chebox label{
  display: flex;
  cursor: pointer;
}

.chebox .control__indicator{
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border:1px solid #c8c9ca;
  background:#fff;
  margin-right: 5px;

}
.chebox .control:hover input ~ .control__indicator, .control input:focus ~ .control__indicator{
  background:#fff;
}
.chebox .control-group{
  display: flex;
  align-items: center;
}

/*ラジオボタン*/
.radio-002 {
  display: flex;
  flex-wrap: wrap;
  gap: .3em 2em;
  border: none;
}

.radio-002 label {
  display: flex;
  align-items: center;
  gap: 0 .5em;
  position: relative;
  cursor: pointer;
}

.radio-002 label::before,
.radio-002 label::after {
  border-radius: 50%;
  content: '';
}

.radio-002 label::before {
  width: 18px;
  height: 18px;
  border: 1px solid #707070;
  box-sizing: border-box;
  background: #fff;
}

.radio-002 label::after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background-color: #dee5eb;
}

.radio-002 label:has(:checked)::after {
  background-color: #00859d;
}

.radio-002 input {
  display: none;
}

/*セレクト*/
.formselect {
  overflow: hidden;
  margin: 0 auto;
  text-align: center;
}
.formselect select {
  width: 100%;
  padding-right: 1em;
  cursor: pointer;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.formselect select::-ms-expand {
  display: none;
}
.formselect.select1 {
  position: relative;
  background: #5477A4;
  border-radius: 5px;
}
.formselect.select1::before {
  position: absolute;
  right: 15px;
  top: 15px;
  padding: 0;
  content: '';
  width: 5px;
  height: 5px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  pointer-events: none;
  transform: translateY(-50%) rotate(
-135deg);
  pointer-events: none;
}
.formselect.select1 select {
  padding: 8px 36px 8px 32px;
  color: #fff;
}
/************************************
  login
 ***********************************/
 .title-intro{
  color: #00859D;
  margin:0;
  text-align: center;
}
.title-intro h1{
  font-size: 20px;
  font-weight: 600;
  margin: 100px auto 20px;
}
.box-intro{
  background: #E4F4F2;
  border-radius: 10px;
  padding:30px 10px 50px;
  width: 40%;
  margin:0 auto;
}
.login-input{
  margin-bottom: 20px;
}
.link-reset{
  color:#00859D;
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 1px dotted #00859D;
  font-size: 13px;
  margin-top: 20px;
}
/************************************
  map
 ***********************************/
 #box-map{
  display: flex;
  justify-content: space-between;
  width: 100%;
 }
 .map-content{
  width: calc(100% - 470px);
  min-width: 391px;
 }
 .tab-map{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
 }
 .tab-map > div{
  width:47%;
 }
 .tab-map img{
  vertical-align: middle;
  margin-right: 5px;
 }
 .tab-map-on{
  background: #00859D;
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  font-weight: 500;
  height: 25px;
  line-height: 25px;
}

.tab-map-link a{
  background: #EBEBEB;
  color: #363636;
  padding: 8px 10px;
  border-radius: 6px;
  font-weight: 500;
  display: block;
  height: 25px;
  line-height: 25px;
}
 .map{
  background-color: #EBEBEB;
  border-radius: 10px;
  height: 600px;
  padding-top: 20px;
  position: relative;
  min-width: 391px;
 }
 .mapping{
  position: relative;
  width: 381px;
  height: 580px;
  margin: 0 auto;
 }
 #map-ondo,
 #map-situdo{
  position: relative;
 }
 .i-point{
  position: absolute;
 }
 .i-point a{
  color: #fff;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  line-height: 20px;
  font-weight: 500;
 }
 .map-point-on{
  border-color: #000;
  border-width: 2px;
  border-style: solid;
  border-radius: 12px!important;
 }
 .point1{
  top:3px;
  left:337px;
 }
 .point2{
  top:117px;
  left:240px;
 }
 .point3{
  top:190px;
  left:217px;
 }
 .point4{
  top:235px;
  left:55px;
 }
 .point5{
  top:346px;
  left:241px;
 }
 .point6{
  top:480px;
  left:98px;
 }
 .point7{
  top:475px;
  left:337px;
 }
 .point8{
  top:507px;
  left:182px;
 }
 .point9{
  top:528px;
  left:66px;
 }

 .map img{
  height: 580px;
 }
 .map-list{
  width: 450px;
 }
.kosin{
  display: flex;
  align-items: center;
  justify-content: end;
  height: 41px;
  line-height: 41px;
}
.kosin button{
  margin-left: 10px;
}
.kosin img{
  vertical-align: middle;
}
.time{
  margin:0;
}
.map-list-box{
  background: #E4F4F2;
  border-radius: 10px;
  padding: 20px;
  margin-top:10px;
  height: 580px;
  width: calc(100% - 40px);
}
.map-list-box ul{
  height: 100%;
  overflow-y: scroll;
}
.map-list-box li{
  text-align: left;
  border-bottom:1px dotted #00859D;
  padding: 10px;
}
.map-list-box li:first-child{
  border-top:1px dotted #00859D;
}
.point-list-on{
  background-color: #ffe7f0;
}
.point-name{
  background-color: #00859D;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  padding: 5px 10px;
  margin:0;
}
.point-value{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.point-ondo,
.point-situdo{
  font-size: 40px;
  font-weight: 500;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: right;
}
.point-ondo{
  width: 160px;
}
.point-situdo{
  width: 135px;
}
.point-ondo img,
.point-situdo img{
  margin-right: 10px;
}
.point-ondo img{
  height: 40px;
  vertical-align: -5px;
}
.point-situdo img{
  height: 30px;
  vertical-align: -1px;
}
.point-link{
  text-align: center;
  font-size: 10px;
}
.point-link img{
  width: 36px;
}

.box-graph-ondo,
.box-graph-situdo{
  background: #E4F4F2;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-graph-ondo{
  margin-bottom: 20px;
}
/************************************
  alarm
 ***********************************/
 .box-set{
  display: flex;
  align-items: center;
  margin:20px 0;
 }
 .box-set > div{
  margin-right: 20px;
 }
 .box-set select,
 .box-set input{
  margin-left: 10px;
 }
 #date_box1{
  margin-right: 10px;
 }

 .paging {
  display: flex;
  justify-content: center;
  margin: 10px 0 0;
 }
 .paging a{
  text-align: center;
  display: block;
  margin: 5px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  background-color: #00859D;
  border: 1px solid #00859D;
  border-radius: 6px;
 }
 .paging span{
  display: block;
  margin: 5px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color:#00859D;
  border: 1px solid #00859D;
  background-color: #fff;
  border-radius: 6px;
 }

 /************************************
  device
 ***********************************/
 .ondo,
 .ondo-num,
 .ondo-color,
 .situdo,
 .situdo-num,
 .situdo-color{
  display: flex;
  align-items: center;
 }
 .ondo-i,
 .situdo-i{
  padding-top:5px;
 }
 .ondo img{
  margin:0 15px 0 30px;
 }
 .situdo img{
  margin:0 15px 0 10px;
 }
 .ondo-num,
 .situdo-num{
  justify-content: space-between;
  font-size: 12px;
 }
 .ondo-color,
 .situdo-color{
  margin: 0 15px;
 }
 .ondo-color li,
 .situdo-color li{
  height: 15px;
  width: 38px;
 }
 .ondo1,
 .situdo5{
  background-color: #1E247F;
 }
 .ondo2,
 .situdo4{
  background-color: #00A0E9;
 }
 .ondo3,
 .situdo3{
  background-color: #8FC31F;
 }
 .ondo4,
 .situdo2{
  background-color: #F39800;
 }
 .ondo5,
 .situdo1{
  background-color: #E60012;
 }

  /************************************
  user
 ***********************************/
 .tab-kanri{
  display: flex;
  justify-content: center;
 }
 .tab-kanri > div{
  margin:0 10px;
 }
 .btn-edit,
 .btn-trash{
  width: 25px;
  height: 25px;
 }
 .btn-edit img,
 .btn-trash img{
  height: 100%;
 }
 .tbl-user th,
 .tbl-user td{
  padding:10px;
 }
 .tbl-user th{
  text-align: left;
  font-weight: 500;
 }
 .btn-box{
  margin-top:20px;
 }