@charset "UTF-8";
@media screen and (min-width: 1001px)
{
  .visible_p,
  .visible_pt{
    display: block !important;
  }
  .visible_t,
  .visible_m,
  .visible_tm{
    display: none !important;
  }
}

/* 共通 */
html {
  font-family: 'Axis Std', 'Arial', sans-serif;
}
body{
  background-color: #0052b5;
  color: #333;
}
.base-width{
  margin: 0px auto;
  max-width: 1200px;
}
.base-width:has(.bio-index){
  margin: 0px auto;
  max-width: 1500px;
}
button{
  cursor: pointer;
  font-size: 16px;
}
input, textarea, select{
  border: 1px solid #c7c7c7;
  padding: 3px;
  background-color: #fff;
}
textarea{
  resize: none;
  display:block;
}
li{
  list-style:none;
}
img{
  max-width: 100%;
}
#enq img{
  max-width: none !important;
}
a{
  transition: 0.3s;
}
a:hover{
  opacity: 0.7;
  transition: 0.3s;
}

h1{
  align-items: center;
}
h1 img{
  width: 100%;
}
h1 span{
  display: block;
}
h1 span.top{
  font-weight: bold;
  color: #fff;
}
h1 span.bottom{
  color: #69b9ff;
}
p.error{
  color: #f24c3B;
  line-height: inherit;
}
#login p.error{
  color: #f24c3B;
  margin-bottom: 10px;
  text-align: center;
}


/* login */
#login{
  padding: 3em 0;
}
#login .login-box{
  margin: 0 auto;
  padding: 2em;
  max-width: 500px;
  border-radius: 30px;
}
#login .logo-area{
  margin-bottom: 50px;
  justify-items: center;
}
#login .logo-area h1{
  display: grid;
  grid-template-columns: 20% auto;
  /* display: flex; */
  justify-content: center;
  gap: 20px;
}
#login .logo-area h1 .logo{
  max-width: 100px;
}
#login .logo-area h1 span{
  font-size: clamp(20px, 3vw, 30px);
  line-height: normal;
}
#login .input-area{
  margin-bottom: 50px;
}
#login .input-area li{
  display: grid;
  align-items: center;
  grid-template-columns: 120px auto;
  margin-bottom: 10px;
}
#login .input-area li:last-child{
  margin-bottom: 0;
}
#login .input-area li .name{
  background-color: #2F8FE3;
  color: #fff;
  min-height: 100%;
  align-content: center;
  text-align: center;
  border-radius: 10px 0 0 10px;
}
#login .input-area li input{
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 0 10px 10px 0;
}
#login .login-btn{
  justify-items: center;
  text-align: center;
}
#login .login-btn button{
  background-color: #55b1af;
  color: #fff;
  display: grid;
  grid-template-columns: 20px auto;
  gap: 20px;
  padding: 20px 30px;
  align-items: center;
  border-radius: 10px;
  border: 3px solid #fff;
}
#login .login-btn button span{
  font-weight: bold;
  font-size: 18px;
}
#login .login-btn a{
  display: inline-block;
}

.contents{
  margin: 20px auto;
  padding: 10px 10px 30px;
}

/* header */
header.admin-header{
  background-color: #002a5d;
  display: grid;
  /* grid-template-columns: 300px auto; */
  grid-template-columns: 1fr auto;
  /* align-items: center; */
  height: 70px;
  margin-bottom: 20px;
}
header.admin-header .logo-area{
  align-content: start;
  padding: 10px;
}
header.admin-header .logo-area h1{
  display: grid;
  grid-template-columns: 50px auto;
  gap: 10px;
}
header.admin-header .tab-area{
  align-content: center;
  justify-items: end;
  margin-right: 30px;
}
header.admin-header .tab-area ul.tab-menu{
  display: flex;
  justify-content: end;
  gap: 10px;
}
header.admin-header .tab-area ul.tab-menu li a{
  width: 170px;
  font-weight: normal;
  color: #fff;
  background-color: #00408D;
  padding: 15px;
  border-radius: 10px;
  display: block;
  text-align: center;
}
header.admin-header .tab-area ul li.active a{
  color: #333;
  background-color: #F5F5F5;
}
header.admin-header .drawer-hamburger-icon,
header.admin-header .drawer-hamburger-icon:after,
header.admin-header .drawer-hamburger-icon:before {
  background-color: #fff;
}
.drawer-open header.admin-header .drawer-hamburger-icon {
  background-color: transparent !important;
}
.drawer--right header.admin-header .drawer-hamburger,
.drawer--right.drawer-open header.admin-header .drawer-navbar .drawer-hamburger {
  margin: 5px;
}

/* main */
.main-header{
  background-color: #F5F5F5;
  border-radius: 20px 20px 0 0;
  padding: 20px;
}
.main-header:has(.alert) .head-area{
  margin-bottom: 10px;
}
.main-header .head-area{
  align-items: center;
}
.main-header .head-area .btn a{
  display: inline-block;
  background-color: #7173C2;
  color: #fff;
  padding: 5px 20px;
  border-radius: 100px;
  font-size: 14px;
}
.main-header .head-area .date{
  font-weight: bold;
  font-size: 24px;
}
.main-header .head-area>div{
  align-items: center;
}
.main-header .head-area.type01{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  /* min-height: 80px; */
}
.main-header .alert .alert-box{
  display: grid;
  grid-template-columns: 20px auto;
  align-items: center;
  gap: 5px;
  background-color: #FFF4AB;
  padding: 5px;
  justify-content: center;
}
.main-header .alert .alert-box span{
  color: #ff0000;
}
.main-header .head-area .date-area{
  display: flex;
  gap: 10px;
  justify-content: end;
}
.main-header .head-area.type02{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* height: 60px; */
  gap: 10px;
}
.main-header .head-area.type02 .left{
  display: flex;
  gap: 20px;
  padding: 10px 0;
}
.main-header .head-area.type02 .user-info{
  display: grid;
  grid-template-columns: auto 90px;
  align-items: center;
  text-align: center;
  height: 100%;
}
.main-header .head-area.type02 .user-info>div{
  height: 100%;
  align-content: center;
  padding: 10px 0;
}
.main-header .head-area.type02 .user-info .name{
  background-color: #fff;
  font-weight: bold;
  font-size: 18px;
}
.main-header .head-area.type02 .user-info .age{
  background-color: #D4E7FF;
}
/* .main-header .head-area.type02 .user-info.female .age{
  background-color: #ffd2e4;
} */
.main-header .head-area.type02 .user-info.male .gender{
  background-color: #0052B5;
  color: #fff;
}
.main-header .head-area.type02 .user-info.female .gender{
  background-color: #ef606f;
  color: #fff;
}
.main-header .form-area{
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.main-header .form-area .left{
  display: flex;
  gap: 10px;
  justify-content: left;
}
.main-header .form-area .right button{
  padding: 10px;
  color: #fff;
}
.main-header .form-area .right button.csv{
  background-color: #2D8250;
}
.main-header .form-area .right button.dropbox{
  background-color: #007ADF;
}
.main-header .item-area{
  margin-top: 20px;
}
.main-header .item-area ul.status{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  gap: 10px;
}
.main-header .item-area ul li a{
  background-color: #C8F6DF;
  display: block;
  height: 50px;
  align-content: center;
}
.main-header .item-area ul li.active a{
  background-color: #fff;
}
.main-header .item-area ul li a .item{
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-header .item-area ul li a .item .name{
  font-size: 14px;
}
.main-header .item-area ul li.active a{ background-color: #fff !important; }
.main-header .item-area ul li.status01 a{ background-color: #C8F6DF; }
.main-header .item-area ul li.status02 a{ background-color: #FFE5B1; }
.main-header .item-area ul li.status03 a{ background-color: #FFC8C8; }
.main-header .item-area ul li.disabled a{
  background-color: #ccc;
  color: #888;
  pointer-events: none;
}

.main-header .item-area ul li a .name
{
  display: flex;
  align-items: center;
}
.main-header .item-area ul li a .name:after
{
  font-size: 13px;
  border-radius: 50%;
  margin-left: 10px;
  align-content: center;
  width: 40px;
  height: 40px;
  text-align: center;
}
.main-header .item-area ul li.status01 a .name:after{
  content: "正常";
  background-color: #fff;
}
.main-header .item-area ul li.active.status01 a .name:after{ background-color: #C8F6DF; }
.main-header .item-area ul li.status02 a .name:after{
  content: "注意";
  background-color: #FFCE6D;
}
.main-header .item-area ul li.status03 a .name:after{
  content: "異常";
  background-color: #FF9494;
}
.main-header .item-area ul li.disabled a .name:after{
  display: none;
}
.main-header .item-area ul li a .display span{
  white-space: nowrap;
}

.main-body{
  background-color: #fff;
  border-radius: 0 0 20px 20px;
  margin-bottom: 50px;
}
.main-body .body-area{
  padding: 20px;
}
.main-body .body-area .data-frame .box{
  padding: 20px;
}
.main-body .panel{
  border: #fff 2px solid;
  background-color: #F6F6F6;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}

.bio-index .main-body .body-area .search-area{
  /* display: grid;
  grid-template-columns: repeat(2, 1fr); */
  /* background-color: #edf1f9;
  border-radius: 10px;*/
  display: flex;
  justify-content: end;
  gap: 30px;
  padding: 10px;
  margin-bottom: 20px;
}
.bio-index .main-body .body-area .search-area li{
  display: flex;
  gap: 10px;
  align-items: center;
}
.bio-index .main-body .body-area .search-area li select{
  border-radius: 5px;
}
.bio-index .main-body .body-area .search-area li input[type="checkbox"] {
  block-size: 1.5em;
  inline-size: 1.5em;
  vertical-align: middle;
}

.main-body .body-area ul.data-list{
  display: grid;
  align-content: center;
  gap: 10px;
  /* grid-template-columns: repeat(3, 1fr); */
}
.bio-index .main-body .body-area.c-1 ul.data-list{ grid-template-columns: 1fr; }
.bio-index .main-body .body-area.c-2 ul.data-list{ grid-template-columns: repeat(2, 1fr); }
.bio-index .main-body .body-area.c-3 ul.data-list{ grid-template-columns: repeat(3, 1fr); }
.bio-index .main-body .body-area.c-4 ul.data-list{ grid-template-columns: repeat(4, 1fr); }
.bio-index .main-body .body-area.c-5 ul.data-list{ grid-template-columns: repeat(5, 1fr); }
.bio-index .main-body .body-area.graph-hidden ul.data-list .graph-area{ display: none; }
.bio-index .main-body .body-area.graph-hidden ul.data-list .data-frame .data-body ul.data-detail{ grid-template-columns: 1fr; }

.main-body .body-area ul.data-list .data-frame{
  border-radius: 20px;
}
.main-body .body-area ul.data-list .data-frame .box{
  padding: 10px 20px;
}
.main-body .body-area ul.data-list .data-frame .data-header{
  text-align: center;
}
.main-body .body-area ul.data-list .data-frame .data-header .name{
  justify-self: left;
}
.main-body .body-area ul.data-list .data-frame .data-header i{
  justify-self: end;
}
.main-body .body-area ul.data-list .data-frame .data-body{
  padding: 10px;
}
.main-body .body-area ul.data-list .data-frame .data-body ul.data-detail{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: center;
  gap: 5px;
  border-radius: 0 0 10px 10px;
}
.main-body .body-area ul.data-list .data-frame .data-body ul.data-detail li{
  padding: 10px;
  background-color: #fff;
}
.main-body .body-area ul.data-list .data-frame .data-body ul.data-detail .ico-area {
  display: flex;
  gap: 5px;
  align-items: center;
}
.main-body .body-area ul.data-list .data-frame .data-body ul.data-detail .ico-area .icon img{
  /* min-width: 18px; */
  max-width: 30px;
}
.main-body .body-area ul.data-list .data-frame .data-body ul.data-detail .ico-area .value span.bold{
  font-size:clamp(10px, 3vw, 20px);
  font-weight: bold;
  margin: 0 3px;
}
.main-body .body-area ul.data-list .data-frame .data-body ul.data-detail .ico-area .value{
  font-size:clamp(8px, 3vw, 14px);
}
.bio-index .main-body .body-area ul.data-list.c-1{ grid-template-columns: 1fr; }
.bio-index .main-body .body-area ul.data-list.c-2{ grid-template-columns: repeat(2, 1fr); }
.bio-index .main-body .body-area ul.data-list.c-3{ grid-template-columns: repeat(3, 1fr); }
.bio-index .main-body .body-area ul.data-list.c-4{ grid-template-columns: repeat(4, 1fr); }
.bio-index .main-body .body-area ul.data-list.c-5{ grid-template-columns: repeat(5, 1fr); }
.main-body .body-area ul.data-list .data-frame .data-body ul.data-detail .graph-area canvas{
  max-width: 100%;
}


.main-body .body-area .data-frame .data-header{
  border-radius: 20px 20px 0 0;
}
.bio-detail .main-body .body-area .data-frame .data-header{
  margin-bottom: 10px;
}
.bio-detail .value span.bold{
  font-weight: bold;
  font-size:clamp(16px, 3vw, 28px);
  margin: 0 3px;
}
.main-body .body-area .data-frame .data-header .box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main-body .body-area .data-frame .data-header .item-name{
  display: grid;
  grid-template-columns: 40px auto;
  align-items: center;
  gap: 10px;
}
.main-body .body-area .data-frame .data-header .item-name .name{
  color: #F58A8A;
  font-size: 18px;
  font-weight: bold;
}
.main-body .body-area .data-frame .data-header .info{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.main-body .body-area .data-frame .data-header .info .value{
  background-color: #fff;
  padding: 10px;
  text-align: center;
}
.main-body .body-area .data-frame .data-header .info .value .bold{
  font-size: clamp(22px, 3vw, 30px);
  font-weight: bold;
  margin: 0 5px;
}

.bio-detail .main-body .data-frame .data-body{
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.15);
  border-radius: 0 0 20px 20px;
}
.main-body .data-frame .data-body .body-area{
  background-color: #fff;
  padding: 20px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.data-none{
  padding: 80px;
  text-align: center;
}

.btn-primary {
    display: inline-block;
    padding: 0.3rem 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background-color: #0d6efd;
    border: none;
    border-radius: 0.375rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-primary:hover {
    background-color: #0b5ed7;
}

.time-setting {
    margin-left: 50px;
    margin-bottom: 25px;
}

/* top */