@charset 'utf-8';

/* Reset */
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

/* Global */
html {
  margin: 0;
  height: 100%;
}
body {
  margin: 0;
  height: 100%;
  font-size: 12px;
  font-family: 'Arial', 'Meiryo', 'Yu Gothic', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
  color: #000000;
  background-color: #f9f9f9;
}
input[type='text'], input[type='password'] {
  padding: 0 8px;
  width: 100%;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  border-radius: .25em;
  border: 1px solid #a0a0a0;
  outline: none;
}
input[type='text']:focus, input[type='password']:focus {
  border: 1px solid #065fd4; 
  outline: none; 
  -moz-box-shadow: 0 0 10px rgba(6, 95, 212, .8);
  -webkit-box-shadow: 0 0 10px rgba(6, 95, 212, .8);
  box-shadow: 0 0 10px rgba(6, 95, 212, .8);
}
textarea {
  padding: 0 8px;
  width: 100%;
  font-size: 14px;
  border-radius: .25em;
  border: 1px solid #a0a0a0;
  outline: none;
  resize: none;
}
a, button[type='button'] {
  transition: all .3s;
}
a:hover, button[type='button']:hover {
  opacity: .8;
}
button[type='button'] {
  color: #ffffff;
  height: 40px;
  line-height: 40px;
  border-radius: .2em;
  background-color: #065fd4;
  text-align: center;
  border: none;
  cursor: pointer;
  display: block;
}
button[type='button']:disabled {
  background-color: #c0c0c0;
  cursor: none;
  pointer-events: none;
}

/* Header */
header {
  margin: 0;
  padding: 10px;
  height: 60px;
  color: #606060;
  background-color: #ffffff;
  position: relative;
}
header.sp-header {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 60px;
  color: #606060;
  background-color: #ffffff;
  position: relative;
}
div.header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
div.sp-header-box {
  margin: 0;
  padding: 10px;
  width: 100%;
  height: 60px;
  line-height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #ffffff;
}
div.sp-user-header-box {
  margin: 0;
  padding: 0;
  height: 30px;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ececec;
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
div.user-box {
  margin-right: 10px;
  height: 40px;
  line-height: 40px;
}
div.logout-box a {
  width: 120px;
  height: 40px;
  line-height: 40px;
  border-radius: .2em;
  border: 1px solid #065fd4;
  color: #065fd4;
  text-align: center;
  text-decoration: none;
  display: block;
}
div.logout-box a .material-icons {
  font-size: 20px;
  vertical-align: middle;
}
div.change-admin-box {
  padding-right: 10px:
}
div.change-admin-box a {
  width: 180px;
  height: 40px;
  line-height: 40px;
  border-radius: .2em;
  background-color: #008000;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  display: block;
}
div.change-admin-box a .material-icons {
  font-size: 20px;
  vertical-align: middle;
}
@media (min-width: 630px) {
  div.header-box {
    justify-content: initial;
  }
  div.user-box {
    margin-left: auto;
  }
}

/* Admin Header */
div#admin-header {
  margin: 0;
  padding: 5px 10px;
  height: 50px;
  color: #ffffff;
  background-color: #606060;
  position: relative;
}
div.admin-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
div.admin-box h2 {
  margin-right: 10px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
}
div.admin-box h2 .material-icons {
  font-size: 20px;
  vertical-align: middle;
}
p#admin-support-box {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: #00ff00;
  background-color: #000000;
  text-align: center;
}
ul#admin-nav {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  font-size: 12px;
  position: relative;
}
ul#admin-nav li {
  margin: 0;
  padding: 0;
  display: inline-block;
}
ul#admin-nav li a {
  margin: 0;
  padding: 0 15px;
  height: 40px;
  line-height: 40px;
  display: block;
  color: #ffffff;
  background-color: #303030;
  text-decoration: none;
  border-radius: .25em;
}
ul#admin-nav li a .material-icons {
  font-size: 20px;
  vertical-align: middle;
}
ul#admin-nav li a svg {
  margin-right: 10px;
  width: 18px;
  height: 18px;
  fill: #ffffff;
  vertical-align: middle;
}
ul#admin-nav li a.admin-menu-active {
  background-color: #065fd4;
}
ul#admin-nav li a:hover {
  background-color: #065fd4;
}

/* Admin Page Header */
div#admin-page-header {
  margin: 10px auto;
  padding: 5px 10px;
  max-width: 1000px;
  height: 58px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
a.admin-page-menu {
  width: 250px;
  height: 48px;
  line-height: 48px;
  border-radius: .2em;
  background-color: #065fd4;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: .3s;
}
a.admin-page-menu .material-icons {
  font-size: 20px;
  vertical-align: middle;
}
a.admin-page-menu::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 2px solid #065fd4;
  border-radius: .2em;
  box-sizing: border-box;
  z-index: -1;
  transform: scale(.8);
  opacity: 0;
  transition: transform ease .3s, opacity .3s;
}
a.admin-page-menu:hover {
  color: #065fd4;
  background: transparent;
}
a.admin-page-menu:hover::before {
  transform: scale(1);
  opacity: 1;
}
a.admin-invalid-menu {
  width: 340px;
  height: 40px;
  line-height: 40px;
  border-radius: .2em;
  border: 1px solid #303030;
  background-color: #606060;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  display: block;
}
a.admin-invalid-menu .material-icons {
  font-size: 20px;
  vertical-align: middle;
  color: #fc0100;
}
a.admin-switch-menu {
  margin-left: 10px;
  width: 150px;
  height: 48px;
  line-height: 48px;
  border-radius: .2em;
  border: 1px solid #065fd4;
  color: #065fd4;
  text-align: center;
  text-decoration: none;
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: .3s;
}
a.admin-switch-menu .material-icons {
  font-size: 20px;
  vertical-align: middle;
}
a.admin-switch-menu::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 2px solid #065fd4;
  border-radius: .2em;
  box-sizing: border-box;
  z-index: -1;
  transform: scale(.8);
  opacity: 0;
  transition: transform ease .3s, opacity .3s;
}
a.admin-switch-menu:hover {
  color: #065fd4;
  border: none;
  background: transparent;
}
a.admin-switch-menu:hover::before {
  transform: scale(1);
  opacity: 1;
}
a.switch-active {
  color: #ffffff;
  background-color: #065fd4;
}
a.admin-export-menu {
  margin-left: 10px;
  width: 250px;
  height: 48px;
  line-height: 48px;
  border-radius: .2em;
  border: 1px solid #ff4500;
  background-color: #ff4500;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: .3s;
}
a.admin-export-menu .material-icons {
  font-size: 20px;
  vertical-align: middle;
}
a.admin-export-menu::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 2px solid #ff4500;
  border-radius: .2em;
  box-sizing: border-box;
  z-index: -1;
  transform: scale(.8);
  opacity: 0;
  transition: transform ease .3s, opacity .3s;
}
a.admin-export-menu:hover {
  color: #ff4500;
  border: none;
  background: transparent;
}
a.admin-export-menu:hover::before {
  transform: scale(1);
  opacity: 1;
}
a.admin-page-back {
  margin-right: auto;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: block;
  color: #606060;
}
a.admin-page-back .material-icons {
  font-size: 30px;
  vertical-align: middle;
}
a.admin-help-item {
  margin-right: auto;
  width: 250px;
  height: 48px;
  line-height: 48px;
  border-radius: .2em;
  background-color: #ff3232;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: .3s;
}
a.admin-help-item .material-icons {
  font-size: 20px;
  vertical-align: middle;
}
a.admin-help-item::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 2px solid #ff3232;
  border-radius: .2em;
  box-sizing: border-box;
  z-index: -1;
  transform: scale(.8);
  opacity: 0;
  transition: transform ease .3s, opacity .3s;
}
a.admin-help-item:hover {
  color: #ff3232;
  background: transparent;
}
a.admin-help-item:hover::before {
  transform: scale(1);
  opacity: 1;
}

/* Admin Page Header */
div.su-query-box {
  margin: 0;
  padding: 10px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  align-items: center;
  justify-content: flex-end;
  background-color: rgba(0, 0, 0, .8);
}
div.su-query-group {
  margin: 0 auto;
  padding: 5px;
  width: 420px;
  border: 1px solid #a0a0a0;
  border-radius: .25em;
}
div.su-query-group > select {
  padding: 0 8px;
  height: 36px;
  line-height: 36px;
  position: relative;
  background-color: transparent;
  font-size: 14px;
  width: 100%;
  border: none;
  border-radius: none;
  color: #ffffff;
}
div.su-query-group > select option {
  color: #000000;
}
div.su-query-group > select:focus {
  border: none;
  outline: none; 
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
div.admin-query-header {
  margin: 0 auto 10px auto;
  padding: 0 10px;
  max-width: 1000px;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
a.admin-query-menu {
  width: 140px;
  height: 40px;
  line-height: 40px;
  background-color: #303030;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  display: block;
}
div.ch-query-header {
  margin: 10px auto 30px auto;
  padding: 0 10px;
  max-width: 1000px;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
a.ch-query-menu {
  width: 60px;
  height: 40px;
  line-height: 40px;
  background-color: #303030;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  display: block;
}
a.ch-query-menu .material-icons {
  font-size: 20px;
  vertical-align: middle;
}
a.toggle-l {
  border-radius: .5em 0 0 .5em;
}
a.toggle-m {
  border-radius: 0 0 0 0;
}
a.toggle-r {
  border-radius: 0 .5em .5em 0;
}
a.toggle-active {
  background-color: #065fd4;
}
div.query-group {
  margin: 0;
  padding: 5px;
  width: 420px;
  border: 1px solid #a0a0a0;
  border-radius: .25em;
}
label.query-title {
  padding: 8px;
  font-size: 12px;
  color: #a0a0a0;
}
div.query-group > select {
  padding: 0 8px;
  height: 36px;
  line-height: 36px;
  position: relative;
  background-color: transparent;
  font-size: 14px;
  width: 100%;
  border: none;
  border-radius: none;
}
div.query-group > select:focus {
  border: none;
  outline: none; 
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* (Admin) Admin Page Title */
h4.admin-page-title {
  margin-bottom: 5px;
  padding-left: 15px;
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  font-weight: normal;
  color: #494949;
  background-color: #ececec;
  border-bottom: 3px solid #6099cb;
}
h4.admin-page-title span {
  margin-right: 10px;
  color: #000000;
  font-weight: bold;
}
h4.admin-page-title .material-icons {
  font-size: 20px;
  vertical-align: middle;
}
div.admin-meta-data {
  margin: 0;
  width: 100%;
  text-align: right;
}
div.admin-meta-data span {
  margin-right: 8px;
  margin-left: 8px;
  padding: 0 8px;
  border-radius: .25em;
  background-color: #065fd4;
  display: inline-block;
  color: #ffffff;
}

/* Wrapper */
div.wrapper {
  margin: 0 auto;
  padding: 10px;
  max-width: 1000px;
}

/* Log Bar */
div.log-box-wrapper {
  margin: 3px auto;
  padding: 0;
  width: 100%;
  height: 22px;
  position: relative;
  border: 1px solid #aaaaaa;
}
div.log-scale-box {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 20px;
  background-color: #ffffff;
  overflow: hidden;
  font-size: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
div.bar-bg {
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 10%;
  height: 20px;
}
div.bar-bg:not(:first-child) {
  border-left: 1px solid #aaaaaa;
}
div.log-chart-box {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 14px;
  overflow: hidden;
  font-size: 0;
  position: absolute;
  top: 3px;
  left: 0;
  z-index: 1;
  background-color: transparent;
}
div.log-chart-box > span {
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 1%;
  height: 14px;
  cursor: pointer;
  opacity: .9;
}
div.log-chart-box > span.bar-fill {
  background-color: #f39800;
}
div.log-chart-title {
  width: 80px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background-color: #dbe5fc;
  color: #000000;
  font-size: 10px;
  font-weight: bold;
}
div.log-chart-percent {
  margin-left: auto;
  width: 80px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background-color: #dbe5fc;
  color: #000000;
  font-size: 10px;
  font-weight: bold;
}
div.log-chart-report-percent {
  margin-left: auto;
  width: 160px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background-color: #dbe5fc;
  color: #000000;
  font-size: 10px;
  font-weight: bold;
}

/* Modal Window */
div.layer {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, .6);
  display: none;
}
div.modal-window {
  margin: 5% auto;
  padding: 0;
  width: 100%;
  height: 80%;
  max-width: 1000px;
  background-color: #ffffff;
  border-radius: .25em;
  box-shadow: 0 0 8px #333333;
  display: none;
  position: relative;
}
div.mini-modal-window {
  margin: 15% auto;
  padding: 0;
  width: 100%;
  height: 50%;
  max-width: 640px;
  background-color: #ffffff;
  border-radius: .25em;
  box-shadow: 0 0 8px #333333;
  display: none;
  position: relative;
}
div.modal-header {
  padding: 0 20px;
  height: 70px;
  border-bottom: 1px solid #c0c0c0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
div.modal-header h3 {
  height: 70px;
  line-height: 70px;
  font-weight: normal;
  font-size: 18px;
}
a.window-close-button {
  margin-left: auto;
  display: block;
}
a.window-close-button .material-icons {
  font-size: 20px;
  vertical-align: middle;
  color: #606060;
}
div.modal-wrapper1 {
  margin: 0;
  padding: 0 0 50px 0;
  width: 100%;
  height: calc(100% - 70px);
  max-height: calc(100% - 70px);
  overflow-y: scroll;
}
div.modal-wrapper2 {
  margin: 0;
  padding: 0 0 50px 0;
  width: 100%;
  height: calc(100% - 140px);
  max-height: calc(100% - 140px);
  overflow-y: scroll;
}
div.modal-footer {
  padding: 0 20px;
  height: 70px;
  border-top: 1px solid #c0c0c0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Modal Dialog */
div.dialog-layer {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, .6);
}
div#dialog {
  margin: 0 auto;
  padding: 10px;
  width: 400px;
  background-color: rgba(0, 0, 0, .9);
  color: #ffffff;
  text-align: center;
  border-radius: .25em;
}
p#dialog-title {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #c0c0c0;
  font-size: 14px;
}
p#dialog-msg {
  font-size: 14px;
}
p#dialog-msg b {
  color: #ff3232;
  font-weight: normal;
}
a#dialog-ok {
  margin: 30px auto 20px auto;
  width: 120px;
  height: 40px;
  line-height: 40px;
  border-radius: .2em;
  border: 1px solid #065fd4;
  color: #065fd4;
  text-align: center;
  text-decoration: none;
  display: block;
}
a#dialog-ok .material-icons {
  margin-right: 5px;
  font-size: 18px;
  vertical-align: middle;
}
a#dialog-ok:hover {
  color: #ffffff;
  background-color: #065fd4;
}
a#dialog-cancel {
  margin: 30px auto 20px auto;
  width: 120px;
  height: 40px;
  line-height: 40px;
  border-radius: .2em;
  border: 1px solid #065fd4;
  color: #065fd4;
  text-align: center;
  text-decoration: none;
  display: block;
}
a#dialog-cancel .material-icons {
  margin-right: 5px;
  font-size: 18px;
  vertical-align: middle;
}
a#dialog-cancel:hover {
  color: #ffffff;
  background-color: #065fd4;
}


/* Modal Message */
div.msg-layer {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: space-between;
}
div#process-box {
  margin: 0 auto;
  padding: 10px;
  width: 400px;
  background-color: rgba(0, 0, 0, .9);
  color: #ffffff;
  text-align: center;
  border-radius: .25em;
}
p#process-title {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #c0c0c0;
  font-size: 14px;
}
p#process-msg {
  font-size: 12px;
}

/* Processing Window */
div#processing-layer {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, .6);
  align-items: center;
  justify-content: space-between;
  display: none;
}
div.processing {
  margin: 20px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}
div.processing > div {
  background-color: #4169e1;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
div.processing .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
div.processing .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
div.processing .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
div.processing .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

/* Radio & Checkbox */
input[type='radio'], input[type='checkbox'] {
  display: none;
}
label.radio, label.checkbox {
  box-sizing: border-box;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  margin: 0 20px 8px 0;
  padding: 12px 12px 12px 42px;
  width: 170px;
  border-radius: 8px;
  background-color: #f6f7f8;
  vertical-align: middle;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
label.mini-checkbox {
  margin: 0;
  padding: 12px;
  width: 46px;
}
label.radio:hover, label.checkbox:hover {
  background-color: #e2edd7;
}
label.radio:hover:after, label.checkbox:hover:after {
  border-color: #53b300;
}
label.radio:after, label.checkbox:after {
  -webkit-transition: border-color 0.2s linear;
  transition: border-color 0.2s linear;
  position: absolute;
  top: 50%;
  left: 15px;
  display: block;
  margin-top: -10px;
  width: 16px;
  height: 16px;
  border: 2px solid #bbb;
  border-radius: 6px;
  content: '';
}
label.radio:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 20px;
  display: block;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #53b300;
  content: '';
  opacity: 0;
}
input[type='radio']:checked + label.radio:before {
  opacity: 1;
}
label.checkbox:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 21px;
  display: block;
  margin-top: -7px;
  width: 5px;
  height: 9px;
  border-right: 3px solid #53b300;
  border-bottom: 3px solid #53b300;
  content: '';
  opacity: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
input[type='checkbox']:checked + label.checkbox:before {
  opacity: 1;
}