@charset "UTF-8";

@font-face {
  font-family: 'GenJyuuGothic';
  src: url('../font/GenJyuuGothic-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'GenJyuuGothic';
  src: url('../font/GenJyuuGothic-Bold.ttf') format('truetype');
  font-weight: bold;
}

@media only screen and (min-width: 740px)
{
  .visible_m{display: none;}
}

html
{
  height:100%;
}
p a{
  font-weight: bold;
  color: #01325C;
}
select{
  cursor: pointer;
}
.scroll-x {
  overflow-y: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #DBF2F1 #e0e0e0;
}

.checkbox-area {
  display: flex;
  align-items: center;
}
.checkbox-area input[type="checkbox"] {
  display: none;
}
.checkbox-area .checkmark{
  cursor: pointer;
}
.checkbox-area .checkmark i {
  margin-right: 5px;
  height: 26px;
  width: 26px;
  line-height: 26px;
  border-radius: 3px;
  border: 1px solid #01325C;
  text-align: center;
  font-size: 18px;
  color: transparent;
  background-color: transparent;
  flex: 0 0 auto;
}
.checkbox-area input:checked ~ .checkmark i {
  color: #fff;
  background-color: #01325C;
}


/* header */
header{
  color: #fff;
  background-color: #01325C;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 20px;
  /* 固定 */
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
}
header h1{
	font-weight: bold;
  font-family: "GenJyuuGothic";
}
header h1 i{
  margin-right: 5px;
  font-size: 1.4em;
}
header h1 a{
  color: #fff;
  display: flex;
  align-items: center;
}
header h1 span{
  font-size: 1.4em;
}
header a.back{
	color: #fff;
}
header .right-menu{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
header .drawer-hamburger{
  z-index: 1;
  background-color: #eee;
  color: #01325C;
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
  transition: 0.3s;
  display: block;
  width: auto;
  position: inherit;
}
header .drawer-hamburger:hover{
  background-color: #eee !important;
}
header .drawer-menu-item {
  font-size: 20px;
  display: block;
  padding: 20px;
  width: 200px;
  border-bottom: #aaa 1px solid;
  transition: 0.3s;
}
header .drawer-menu-item:hover {
  text-decoration: none;
  background-color: #c3cad1;
  transition: 0.3s;
}
header .drawer-nav {
  color: #000;
  background-color: transparent;
  display: flex;
  align-items: start;
  width: auto;
}
header .drawer-nav .drawer-toggle{
  background: transparent;
  left: -30px;
  z-index: 4;
}
header .drawer-nav .drawer-toggle i{
  color: #fff;
  font-size: 50px;
}
header .drawer-menu{
  background-color: #DADFE3;
  height: 100vh;
}
header .drawer-menu-item.logout{
  border-radius: 0;
  background-color: transparent;
  font-size: 14px;
  text-align: right;
  color: #555;
  border-bottom: none;
  padding: 10px;
}

/* footer */
.footerfixed {
  min-height: 100vh;
  position: relative;
  padding-bottom: 60px;
  box-sizing: border-box;
}
footer{
	position:sticky;
	top: 100vh;
  width: 100%;
  /* bottom: 0; */
}
footer .fotter-bg {
  background-color: #29567e;
  color: #fff;
  padding: 1em;
  text-align: center;
  font-size: 14px;
}
.login_footer footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  top: 120vh;
}
footer.save-footer{
  left: 0;
  bottom: 0;
  top: 0;
  width: 100%;
}
footer.save-footer .fotter-bg{
  padding: 10px;
}


/* form */
input,select{
  background-color: #ececec;
  border-radius: 10px;
  padding: 10px;
}
button{
  color: #fff;
  background-color: #01325C;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  transition: 0.3s;
}
button:hover{
  opacity: 0.7;
  transition: 0.3s;
}
button a{
  color: #fff;
}
.hosoku{
  font-size: 13px;
  text-align: center;
}

/* main */
/* login */
main.login {
  padding: 5em 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
main.login section.login-area {
  margin: 0 auto;
  width: 700px;
}
main.login .login-box {
  background: #fff;
  padding: 2em;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.15);
}
main.login p{
  line-height: 32px;
}
main.login p.error{
  color: #b10000;
  padding: 10px 0;
  text-align: center;
  margin: 0;
}
main.login p.text{
  padding: 20px 0;
  text-align: center;
}
main.login.register{
  position: inherit;
  padding: 0;
  height: auto;
}
main.login.register .bg-area {
  max-width: 750px;
  margin: 40px auto;
  padding: 40px;
}
main.login.register .input-area {
  margin-bottom: 2em;
}
main.login .item{
  text-align: left;
}
main.login span.req,
.area-admin .bg-area ul.user-info span.req{
  margin-left: 5px;
  font-size: 13px;
  color: #fff;
  background-color: #01325C;
  border-radius: 3px;
  padding: 5px;
  vertical-align: bottom;
}
main.login span.small{
  font-size: 14px;
  vertical-align: bottom;
}
main.login h2{
  text-align: center;
  font-weight: bold;
  font-size: 1.6em;
}
main.login .forget{
  margin-bottom: 2em;
}
main.login .input-area{
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;
}
main.login ul.input-area li:not(:last-child){
  margin-bottom: 40px;
}
main.login ul.input-area li{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 3px;
  align-items: center;
  gap: 5px;
}
main.login ul.input-area li.error,
.area-admin .bg-area ul.user-info li.error
{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  text-align: left;
  color: #b10000;
  margin-bottom: 5px !important;
  font-size: 14px;
}
main.login ul.input-area li.name,
.area-admin .bg-area ul.user-info li.name{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 5px;
  margin-bottom: 5px !important;
}
.area-admin .bg-area ul.user-info li:not(.name),
.area-admin .bg-area ul.user-info li.name.title
{
  display: block !important;
}
.area-admin .bg-area ul.user-info li .title{
  margin-bottom: 3px;
}
main.login ul.input-area li.name.kana,
.area-admin .bg-area ul.user-info li.name.kana{
  margin-bottom: 40px !important;
}
main.login ul.input-area li span{
  text-align: left;
}
main.login.register h3 {
  width: 100%;
  padding: 10px;
  font-size: 24px;
}
main.login.register table.confirm-area {
  width: 100%;
  margin-bottom: 40px;
}
main.login.register table.confirm-area th,
main.login.register table.confirm-area td{
  border: #ccc 1px solid;
  padding: 10px;
}
main.login.register table.confirm-area th{
  background-color: #eee;
}
main.login.register .login-btn button{
  padding: 20px 30px;
  font-size: 26px;
}
main.login.register .back {
  margin-top: 30px;
}
main.login.register .back a {
  color: #fff;
  background-color: #777777;
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
  transition: 0.3s;
}

main.login ul.progress{
  margin: 1em 0 2em;
  display: flex;
  justify-content: center;
  gap: 50px;
}
main.login ul.progress .num{
  text-align: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #aaa;
  color: #fff;
  font-weight: bold;
  margin-bottom: 10px;
  align-content: center;
}
main.login ul.progress .done .num{
  background-color: #01325C;
}
main.login ul.progress .now .name{
  font-weight: bold;
  color: #01325C;
}
main.login ul.progress .name{
  text-align: center;
  font-size: 13px;
}

ul li .password{
  display: flex;
  align-items: center;
  background-color: #ececec;
  border-radius: 10px;
  justify-content: space-between;
  min-width: 0;
}
ul li .password input{
  padding: 10px;
  flex-grow: 1;
  min-width: 0;
}
ul li .password span{
  margin-right: 10px;
}
main.login p.forget{
  text-align: right;
}
main.login .login-btn{
  text-align: center;
}
main.login p.sign-up{
  margin-top: 1em;
}
main.login p.forget{
  text-align: center;
}
main.login p a{
  padding-bottom: 3px;
  border-bottom: 1px solid #01325C;
}
main.login .login-btn button{
  color: #fff;
}
.sign-up .login-btn{
  margin-top: 1.5em;
}
.time-btn{
  text-align: center;
}
.time-btn button{
  font-size: 24px;
  padding: 1em 2em;
}
.time-btn button.break-save{
  font-size: 20px;
  padding: 10px 40px;
}
main.top{
  margin: 100px 2em 40px;
}
.bg-area{
  background: #fff;
  padding: 2em;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.15);
  margin: 0 auto 2em;
  max-width: 700px;
}
.bg-none-area{
  padding: 2em;
  margin: 0 auto 2em;
  max-width: 700px;
  text-align: center;
}
.bg-none-area.leave{
  padding: 0;
}
.bg-none-area.leave p{
  font-size: 24px;
  font-weight: bold;
}
.bg-none-area.leave .time-btn button{
  background-color: #C10000;
  font-size: 32px;
  padding: 20px 50px;
}
.bg-none-area.leave .time-btn button span{
  font-size: 22px;
}
.bg-area h3{
  font-weight: bold;
  font-size: 30px;
  text-align: center;
}
.info-area{
  background: #fff;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.15);
  margin: 0 auto 2em;
  max-width: 700px;
}
.info-area h3{
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  padding-top: 40px;
}
.record-area{
  background-color: #DADFE3;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.15);
  margin: 0 auto 2em;
  max-width: 700px;
}
.info-status{
  background-color: #DADFE3;
  padding: 20px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
}
.info-status .status{
  color: #01325C;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}
.info-status button{
  font-size: 40px;
  font-weight: bold;
  width: 100%;
  height: 90px;
  padding: 0;
}
.info-status:not(.status_9) button{
  padding-top: 10px;
}
.info-status button span{
  font-size: 50%;
  display: block;
}
.record-box{
  margin-bottom: 5em;
}
.record-area .record-header{
  display: grid;
  grid-template-columns: 140px auto 140px;
  align-items: center;
}
.record-area h3{
  text-align: center;
  background-color: #fff;
  color: #01325C;
  font-size: 24px;
  font-weight: bold;
  padding: 20px;
}
.record-area .total{
  color: #01325C;
  font-size: 24px;
  font-weight: bold;
  padding: 0 20px;
  display: flex;
  justify-content: left;
  align-items: center;
}
.record-area .detail_btn{
  background-color: #fff;
  color: #01325C;
  font-size: 18px;
  padding: 5px 10px;
  cursor: pointer;
  margin: 0 20px;
  text-align: center;
}
.record-area .record-contents{
  background-color: #fff;
  color: #01325C;
  font-size: 18px;
  padding: 30px 20px;
}
.nav{
  display: none;
}
.nav-open::before{
	content: "▼";
  margin-right: 10px;
}
.nav-open.active::before{
	content: "▲";
  margin-right: 10px;
}
.record-area .record-contents select{
  background-color: #fff;
  color: #000;
  border: #000 solid 1px;
  border-radius: 0;
  font-size: 16px;
  padding: 5px 20px;
}
body.user .record-area .record-contents select
{
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  padding: 2px 30px;
}
.record-area .record-contents .time-btn button{
  font-size: 22px;
  padding: 10px 30px;
}
.record-contents ul{
  text-align: center;
  margin-bottom: 2em;
}
.record-contents ul li span{
  margin: 0 10px;
}
.record-contents ul li span:nth-of-type(2n){
  margin: 0 20px;
}
.record-contents ul li:not(:last-child){
  margin-bottom: 20px;
}
.record-contents ul input {
  padding: 10px 10px;
  text-align: center;
}

/* user */
.time-area{
  text-align: center;
  padding-bottom: 20px;
}
.time-area #RealTimeClock{
  font-size: 150px;
  font-weight: bold;
  line-height: 200px;
}

/* admin */
.area-admin .bg-area{
  max-width: 750px;
  margin: 100px auto 40px;
}
.area-admin .bg-area h3{
  margin-bottom: 1em;
}
/* admin-user_info */
p[class^="log-"]{
  text-align: center;
  padding: 5px 10px;
  border-radius: 5px;
  text-align: center;
  /* margin: 0 auto 1em; */
  /* max-width: 600px; */
}
p.log-success{
  background-color: #c4f5bf;
  border: 1px solid #7abd73;
  color:  #24531f;
}
.log-error{
  background-color: #ffd3d3;
  border: 1px solid #d68080;
  color:  #881a1a;
}
.log-logout{
  background-color: #c9e6ff;
  border: 1px solid #538bbb;
  color:  #145893;
}
.top p.log-alert{
  text-align: center;
  background-color: #fff1d3;
  border: 1px solid #cc7a00;
  color:  #cc7a00;
  padding: 0 10px;
  border-radius: 5px;
  margin: 0 auto 1em;
  max-width: 600px;
}
.area-admin .bg-area ul.user-info{
  margin-bottom: 3em;
}
.area-admin .bg-area ul.user-info .value{
  padding-right: 10px;
}
.area-admin .bg-area ul.user-info li{
  display: grid;
  /* grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr;
  grid-column-gap: 3px;
  align-items: center; */
}
.area-admin .bg-area ul.user-info li.line2{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 3px;
  align-items: center;
  gap: 5px;
}
.area-admin .bg-area ul.user-info li:not(:last-child){
  margin-bottom: 2em;
}
.area-admin .bg-area ul.user-info li .value input,
.area-admin .bg-area ul.user-info li .value select{
  background-color: transparent;
  width: 100%;
}
.area-admin .bg-area ul.user-info li .value{
  background-color: #ececec;
  border-radius: 10px;
}
.area-admin .bg-area .edit-pass{
  text-align: center;
  margin-bottom: 2em;
}
.area-admin .bg-area .edit-pass a{
  border-bottom: #01325C 1px solid;
}
.btn-area{
  text-align: center;
  margin-bottom: 1em;
}
.btn-area .save{
  margin-bottom: 2em;
}
.btn-area .login-btn{
  margin-bottom: 2em;
}
.btn-area .back a{
  color: #fff;
  background-color: #777777;
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
  transition: 0.3s;
}
.area-admin .bg-area .delete-area{
  text-align: center;
  margin-top: 5em;
}
.area-admin .bg-area .delete-area button{
  color: #881a1a;
  background-color:transparent;
  border-bottom: #881a1a 1px solid;
  border-radius: 0;
  padding: 5px 10px;
}
.area-admin .bg-area .delete-area button:hover{
  opacity: 1;
}
.edit-pass .area-admin .bg-area ul.user-info{
  margin-bottom: 2em;
}
.edit-pass .area-admin .bg-area p{
  text-align: center;
}
.edit-pass .area-admin .bg-area ul.user-info li:first-child{
  margin-bottom: 2em;
}
.area-admin .bg-area ul.user-info li.password .value{
  display: flex;
  align-items: center;
}
.area-admin .bg-area ul.user-info li.password .value span{
  padding: 0 15px;
  cursor: pointer;
}

/* member */
#member .area-admin .bg-area .btn-area-month{
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  align-items: center;
  margin-bottom: 1em;
}
#member .area-admin .bg-area .btn-area-month .select-area{
  display: flex;
  padding-right: 10px;
  text-align: left;
  gap: 5px;
}
#member .area-admin .bg-area .btn-area-month .select-area span{
  display: grid;
  align-items: center;
}
#member .area-admin .bg-area .select-area{
  text-align: left;
}
#member .area-admin .bg-area .select-area select{
  width: 100%;
}
#member .area-admin .bg-area .sort-area{
  width: 100%;
  margin-bottom: 1em;
}

#member .area-admin .bg-area .setting-area ul.setting{
  margin-bottom: 1em;
}
#member .area-admin .bg-area .setting-area ul.setting li{
  text-align: center;
  padding-bottom: 1em;
}
#member .area-admin .bg-area .setting-area ul.setting input{
  display: none;
}
#member .area-admin .bg-area .setting-area ul.setting .checkmark{
  display: block;
  width: 100%;
}
#member .area-admin .bg-area .setting-area ul.setting i{
  margin-right: 5px;
  height: 26px;
  width: 26px;
  line-height: 26px;
  border-radius: 3px;
  color: #fff;
  background-color: #fff;
  border: #01325C 1px solid;
  text-align: center;
  font-size: 18px;
}
#member .area-admin .bg-area .setting-area input:checked ~ .checkmark i {
  color: #fff;
  background-color: #01325C;
}
#member .area-admin .bg-area .setting-area .btn{
  text-align: center;
}
#member .area-admin .bg-area .checkbox-area .row{
  margin-bottom: 10px;
  line-height: 2em;
}
#member .area-admin .bg-area .checkbox-area .name{
  display: inline-block;
}
#member .area-admin .bg-area .checkbox-area span.admin{
  color: #fff;
  background-color: #01325C;
  border-radius: 3px;
  padding: 3px 5px;
  margin-right: 5px;
}
#member .area-admin .bg-area .checkbox-area span.editable{
  color: #01325C;
  border: #01325C 1px solid;
  background-color: #fff;
  border-radius: 3px;
  padding: 3px 5px;
  margin-right: 5px;
}
/* #member .area-admin .bg-area .checkbox-area span.editable i{
  margin-right: 5px;
  height: 26px;
  width: 26px;
  line-height: 26px;
  border-radius: 3px;
  background-color: #01325C;
  text-align: center;
  font-size: 19px;
  color: #fff;
  flex: 0 0 auto;
} */
#member .area-admin .bg-area .checkbox-area .checkmark{
  display: flex;
  align-items: center;
}
#member .area-admin .bg-area .checkbox-area .checkmark i{
  margin-right: 10px;
}
#member .area-admin .bg-area ul.member-list .checkbox-area{
  justify-content: space-between;
}
#member .area-admin .bg-area #bulk{
  background-color: #01325C;
  color: #fff;
}
#member .area-admin .bg-area #bulk .checkbox-area .checkmark{
  width: 100%;
  padding: 15px;
}
#member .area-admin .bg-area #bulk .checkbox-area .checkmark i {
  border: 1px solid #fff;
}
#bulk .checkbox-area input:checked ~ .checkmark i {
  color: #01325C;
  background-color: #fff;
}
#member .area-admin .bg-area ul.member-list{
  margin-bottom: 1em;
  border: #01325C 1px solid;
}
#member .area-admin .bg-area ul.member-list li:nth-child(2n-1){
  background-color: #eee;
}
#member .area-admin .bg-area ul.member-list .checkbox-area{
  display: block;
  padding: 1em;
}
#member .area-admin .bg-area ul.member-list .checkbox-area .checkmark{
  display: flex;
  align-items: center;
  flex-grow: 1;
  padding: 15px;
  padding-bottom: 0;
}
#member .area-admin .bg-area ul.member-list li a{
  color: #0074d7;
  transition: 0.3s;
}
#member .area-admin .bg-area ul.member-list li a:hover{
  color: #34c5ff;
  transition: 0.3s;
}
#member .area-admin .bg-area ul.member-list li a:not(:last-child){
  margin-right: 10px;
}
#member .area-admin .bg-area ul.member-list .kana{
  display: inline-block;
}

.time-detail .bg-area {
  max-width: 900px;
  margin: 100px auto 40px;
  padding: 40px;
}
.time-detail .bg-area .calendar-area #calendar table td.save button{
  padding: 0 5px;
  background-color: transparent;
  color: #01325C;
}
.time-detail .scroll-area{
  width: 820px;
}
.time-detail .save-area{
  background-color: rgb(255, 255, 255, 0.9);
  width: 100%;
  text-align: center;
  padding: 20px;
  position: sticky;
  bottom: 0;
}

.bg-area .h3-area-frex{
  margin-bottom: 2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  text-align: left;
}
.bg-area .h3-area-frex h3{
  margin-bottom: 0;
}
.bg-area .h3-area-frex h3 button{
  flex-shrink: 0;
}

.time-detail .bg-area .calendar-area #month-area{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1em;
}
.time-detail .bg-area .calendar-area #month-area #now
{
  background-color: #eee;
  padding: 10px 30px;
}
.time-detail .bg-area .calendar-area #month-area #prev,
.time-detail .bg-area .calendar-area #month-area #next
{
  color: #fff;
  background-color: #01325C;
  cursor: pointer;
}
.time-detail .bg-area .calendar-area #month-area #prev
{
  border-radius: 10px 0 0 10px;
}
.time-detail .bg-area .calendar-area #month-area #next
{
  border-radius: 0 10px 10px 0;
}
.time-detail .bg-area .calendar-area #calendar table
{
  width: 100%;
  background-color: #fff;
}
.time-detail .bg-area .calendar-area #calendar table select
{
  padding: 6px 10px;
}
body.user .time-detail .bg-area .calendar-area #calendar table select
{
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  padding: 0;
}
.time-detail .bg-area .calendar-area #calendar table span
{
  margin-left: 2px;
}
.time-detail .bg-area .calendar-area #calendar table th
{
  padding: 5px;
  text-align: center;
}
.time-detail .bg-area .calendar-area #calendar table td
{
  padding: 5px;
  border: #000 1px solid;
  text-align: center;
}
.time-detail .bg-area .calendar-area #calendar table td.syukkin
{
  border-right: none;
}
.time-detail .bg-area .calendar-area #calendar table td.taikin
{
  border-left: none;
}
.time-detail .bg-area .calendar-area #calendar table td.dash
{
  border-right: none;
  border-left: none;
  padding: 5px 0;
}
.time-detail .bg-area .calendar-area #calendar table td.date
{
  text-align: right;
  width: 100px;
  background-color: #eee;
}
.time-detail .bg-area .calendar-area #calendar table td.date.sat
{
  background-color: #bcdcf7;
}
.time-detail .bg-area .calendar-area #calendar table td.date.sun
{
  background-color: #ffc3c3;
}
.time-detail .bg-area .calendar-area #calendar table td input
{
  width: 56px;
  padding: 5px;
  text-align: center;
}
.time-detail .bg-area .calendar-area #calendar .save-btn
{
  margin-top: 30px;
  text-align: center;
}
body.user .time-detail .bg-area .calendar-area #calendar table td input
{
  pointer-events: none;
}