@charset "UTF-8";
/* ～739px */
@media only screen and (max-width: 739px)
{

.visible_p{display: none;}
body,div,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ul,li,pre,form,fieldset,input,textarea,blockquote,
th,td {
	font-size:18px;
}
p
{
	font-size:18px;
}

/* header */
header{
  padding: 10px;
}
header h1{
  font-size: 1em;
}
header .drawer-hamburger {
  padding: 10px;
}
header .right-menu{
  justify-content: end;
}
header .right-menu{
  gap: 5px;
  flex-wrap: wrap;
}
header .right-menu div[class^="btn"]:not(.btn-logout) a{
  font-size: 16px;
  padding: 5px 10px;
}
header .right-menu .btn-logout button{
  padding: 5px;
}

/* footer */
/* footer {
  top: auto;
} */

/* login */
main.login {
  display: block;
  padding: 2em 0;
  position: static;
  height: auto;
}
main.login ul.progress {
  gap: 20px;
}
main.login .item {
  margin-bottom: 5px;
}
main.login section.login-area {
  margin: 0 5%;
  width: 90%;
}
main.login ul.input-area li {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 0;
  align-items: center;
}
main.login ul.input-area li span{
  margin-bottom: 5px;
}
main.login ul.input-area li.name input::placeholder {
  font-size: 15px;
}
main.login .login-box {
  padding: 2em;
}
main.top {
  margin: 1em;
}
main.login.register .bg-area{
  margin: 40px 10px;
  padding: 20px;
}
main.login.register table.confirm-area th,
main.login.register table.confirm-area td {
  display: block;
  border-bottom: none;
}
main.login.register table.confirm-area th,
main.login.register table.confirm-area td {
  border-bottom: none;
}
main.login.register table.confirm-area tr:last-child td{
  border-bottom: #ccc 1px solid;
}

/* user */
.bg-area {
  padding: 1em 0.5em;
}
.time-area #RealTimeClock{
  font-size: 96px;
  line-height: 150px;
}
.info-area h3 {
  font-size: 30px;
  padding-top: 20px;
}
.info-status .status {
  font-size: 34px;
}
.info-status button {
  font-size: 34px;
  line-height: 34px;
}
.record-area h3 {
  font-size: 20px;
  padding: 10px;
}
.record-area .record-header {
  display: grid;
  grid-template-columns: 120px auto 100px;
  align-items: center;
}
.record-area .detail_btn {
  font-size: 16px;
  padding: 5px;
  margin: 0 5px;
}
#break-detail input {
  padding: 8px;
}
#break-detail li span {
  margin: 0;
}
#break-detail li span:nth-of-type(2n) {
  margin: 0 2px;
}
.record-header .total{
  font-size: 20px;
}
.record-header .total input{
  margin: 0 8px;
}

/* admin */
.area-admin .bg-area {
  margin: 2em 5%;
  width: 90%;
}
#member .area-admin .bg-area .btn-area{
  grid-template-columns: 1.6fr 1.4fr;
}
#member .area-admin .bg-area ul.member-list .checkbox-area{
  padding: 15px;
}
/* #member .area-admin .bg-area ul.member-list .checkbox-area .checkmark {
  padding: 15px;
  padding-bottom: 0;
} */

/* time-detail */
.time-detail .bg-area {
  margin: 10px auto;
  padding: 20px;
}
.time-detail .bg-area .calendar-area #month-area #now {
  padding: 10px;
}
.time-detail .bg-area .calendar-area #month-area #prev span,
.time-detail .bg-area .calendar-area #month-area #next span
{
  display: none;
}

}

/* ==================== */
/*      ～600px         */
/* ==================== */
@media only screen and (max-width: 600px)
{
body{min-width: 320px;}
header h1,
header h1 span {
  font-size: 1em;
}
main.login .login-box {
  padding: 1em;
}
.bg-area {
  padding: 2em 1em;
}
.bg-area h3 {
  font-size: 24px;
}
.bg-area .h3-area-frex {
  margin-bottom: 2em;
  display: block;
  text-align: center;
}
.bg-area .h3-area-frex h3{
  margin-bottom: 15px;
}

/* user */
main.top {
  margin: 100px 10px 40px;
}
.info-status.status_9 {
  grid-template-columns: auto 200px auto;
}
.info-status:not(.status_9) {
  padding: 10px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 2fr 3fr;
  align-items: center;
}
.info-status:not(.status_9) .left { grid-area: 1 / 1 / 2 / 3; }
.info-status:not(.status_9) .center { grid-area: 2 / 1 / 3 / 2; }
.info-status:not(.status_9) .right { grid-area: 2 / 2 / 3 / 3; }

.record-area .record-header {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  align-items: center;
}
.record-area h3 { grid-area: 1 / 1 / 2 / 2; }
.record-header .total { grid-area: 1 / 2 / 2 / 4; }
.record-area .detail_btn { grid-area: 2 / 1 / 3 / 4; }
.record-area .total{
  padding: 0 10px;
}
.record-area .record-contents {
  padding: 20px 5px;
}
.record-area .record-contents select {
  font-size: 16px;
  padding: 5px;
}
.record-area input {
  padding: 5px;
  width: 52px;
  font-size: 16px;
}
.record-contents ul li span {
  margin: 0;
}
.record-contents ul li span:nth-of-type(2n) {
  margin: 0 10px;
}
.record-area .record-header h3 {
  background-color: transparent;
}
.record-area .record-header .total input {
  padding: 5px;
  width: 52px;
  font-size: 16px;
}

/* admin */
#member .area-admin .bg-area{
  margin: 100px 10px 40px;
  width: auto;
}
#member .area-admin .bg-area .btn-area{
  display: block;
}
#member .area-admin .bg-area .btn-area .select-area,
#member .area-admin .bg-area .btn-area .output{
  margin-bottom: 1em;
}
#member .area-admin .bg-area .btn-area-month {
  display: block;
  text-align: center;
  margin-bottom: 2em;
}
#member .area-admin .bg-area .btn-area-month .select-area{
  margin-bottom: 1em;
}
#member .area-admin .bg-area .checkbox-area .row span.role{
  margin-bottom: 15px;
  padding: 0 10px;
  display: inline-block;
}
#member .area-admin .bg-area .checkbox-area .name{
  display: block;
}

/* time-detail */
.time-detail .bg-area{
  margin: 100px 10px 40px;
  width: auto;
}

}