.header {
  position: relative;
  padding: 20px 20px 0 20px;
}

.hamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hamburger__line {
  position: absolute;
  left: 11px;
  width: 26px;
  height: 2px;
  background-color: #333;
  transition: all .4s;
}

.hamburger__line:nth-of-type(1) {
  top: 14px;
}
.hamburger__line:nth-of-type(2) {
  top: 23px;
}
.hamburger__line:nth-of-type(3) {
  top: 32px;
}

/* メニューオープン時 */
.hamburger.active .hamburger__line:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg);
}
.hamburger.active .hamburger__line:nth-of-type(2) {
  opacity: 0;
}
.hamburger.active .hamburger__line:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg);
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
  background-color: #fff;
  box-shadow: 2px 0 4px rgba(0,0,0,.1);
  transform: translateX(-100%);
  transition: transform .4s;
  z-index: 90;
}

.nav.active {
  transform: translateX(0);
}

.nav__list {
  margin: 0;
  padding: 100px 0 0;
  list-style: none;
}

.nav__item {
  padding: 0 20px;
}

.nav__link {
  display: block;
  padding: 15px 0;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}

.customer, .operationRecord {
  width:100%;
}

.customer th, .operationRecord th {
  background-color: #cccccc;
}

.calendarClick {
  text-decoration:none;
}
.calendarMark {
  width:100%;
  text-align:center;
  font-size:2em;
}

@media screen and (min-width: 600px) {
  /* PC表示時。どう表示を最適化するかは要検討 */
  .calender-label-blue {
    background:#aaaaff;
    border-radius:5px;
    padding-left:  2px;
    padding-right: 2px;
    font-size: 1.2em;
  }

  .calender-label-red {
    background:#ffaaaa;
    border-radius:5px;
    padding-left:  2px;
    padding-right: 2px;
    font-size: 1.2em;
  }

  .calender-label-green {
    background:#aaffaa;
    border-radius:5px;
    padding-left:  2px;
    padding-right: 2px;
    font-size: 1.2em;
  }

  .calender-label {
    border-radius:5px;
  }

  #mini-calendar table {
    width: 100%;
    border: 1px solid #000000;
  }

  #mini-calendar th {
    background: #f2e6cd;
    border: 1px solid #000000;
    width: 14%;
    vertical-align: top;
  }
  #mini-calendar td {
    border: 1px solid #000000;
    width: 14%;
    vertical-align: top;
  }
  #mini-calendar th.calendar-sun {
    background: #f8c7c7;
    width: 14%;
    vertical-align: top;
  }
  #mini-calendar th.calendar-sat {
    background: #c8ebfe;
    width: 14%;
    vertical-align: top;
  }
  #mini-calendar th.calendar-mon {
    width: 14%;
    vertical-align: top;
  }
  #mini-calendar th.calendar-tue {
    width: 14%;
    vertical-align: top;
  }
  #mini-calendar th.calendar-wed {
    width: 14%;
    vertical-align: top;
  }
  #mini-calendar th.calendar-thu {
    width: 14%;
    vertical-align: top;
  }
  #mini-calendar th.calendar-fri {
    width: 14%;
    vertical-align: top;
  }

  .report {
    width: 100%;
  }
  .report th {
    background-color: #cccccc;
  }
  .report td {
  }

  .paperSubmitBtn {
    width: 33%;
    display: block;
    padding: 3px 0;
    margin: 5px 0;
    font-size: 1.2em;
  }

  .payment {
    width: 100%;
  }
  .payment th {
    background-color: #cccccc;
  }
  .payment td {
  }
}

@media screen and (max-width: 600px) {
/* スマートフォン表示時 */

/* ログイン関連 */
  .login {
    width: 100%;
    margin-left:  0px;
    margin-right: 0px;
  }

  .login th {
    display: block;
    width: 100%;
    border-bottom: none;
    text-align:center;
  }

  .login td {
    display: block;
    width: 100%;
    border-bottom: none;
    text-align:center;
  }

  .login .btn,
  .form-control {
    display: block;
    width: 90%;
    font-size: 1.2em;
    margin: 0 auto;
    padding:5px;
  }
/* 報告書関連 */
  .report {
    width:100%;
  }
  .report th {
    width: 100%;
    background-color: #cccccc;
    display: block;
    border: none;
  }
  .report tr {
    border:1px solid #000000; 
  }
  .report td {
    width: 100%;
    display: block;
    border: none;
  }

  .paperSubmitBtn {
    width: 100%;
    display: block;
    padding: 5px 0;
    margin: 10px 0;
    font-size: 1.5em;
  }

/* 立替金関連 */
  .payment {
    width:100%;
  }
  .payment th {
    width: 100%;
    background-color: #cccccc;
    display: block;
    border: none;
  }
  .payment tr {
    border:1px solid #000000; 
  }
  .payment td {
    width: 100%;
    display: block;
    border: none;
  }

/* カレンダー関連 */
  .calender-label-blue {
    background:#aaaaff;
    border-radius:5px;
    margin: 1px;
  }

  .calender-label-red {
    background:#ffaaaa;
    border-radius:5px;
    margin: 1px;
  }

  .calender-label-green {
    background:#aaffaa;
    border-radius:5px;
    margin: 1px;
  }

  .calender-label {
    border-radius:5px;
    margin: 1px;
  }

  #mini-calendar thead {
    display: none;
  }
  #mini-calendar th,
  #mini-calendar td {
    display: block;
    width: 100%;
    padding: 0;
  }
  #mini-calendar td {
    height: auto;
    display: -webkit-flex;
    display: flex;
  }
  #mini-calendar .calendar-none {
    display: none
  }
 
  #mini-calendar .calendar-labels {
    padding: 5px;
  }
  #mini-calendar [class*=calender-label] {
    display: inline-block;
    padding: 5px;
    margin-top: 0;
    margin-right: 5px;
    /* 予定の文字サイズを変えたい場合はここを変更 */
    font-size: 1.5em;
  }

  .calendar-year-month {
    font-size: 1.5em;
    width: 100%;
    border-bottom: 1px solid #000000;
  }

  /* 日付 */
  #mini-calendar td .calendar-day-number {
    font-weight: normal;
    padding: 7px;
    font-size: 18px;
    display: block;
    background: #f2e6cd;
    margin-bottom: 0;
    width: 75px;
    height: auto;
    border: 1px solid #000000;
  }
  #mini-calendar td.calendar-holiday .calendar-day-number,
  #mini-calendar td.calendar-sun .calendar-day-number {
    background: #f8c7c7;
  }
  #mini-calendar td.calendar-sat .calendar-day-number {
    background: #c8ebfe;
  }
  /* モバイル用曜日を追加 */
  #mini-calendar td i:after {
    font-size: 12px;
    position: relative;
    left: -5px;
  }
  #mini-calendar td:nth-child(1) i:after {
    content: "（日）";
  }
  #mini-calendar td:nth-child(2) i:after {
    content: "（月）";
  }
  #mini-calendar td:nth-child(3) i:after {
    content: "（火）";
  }
  #mini-calendar td:nth-child(4) i:after {
    content: "（水）";
  }
  #mini-calendar td:nth-child(5) i:after {
    content: "（木）";
  }
  #mini-calendar td:nth-child(6) i:after {
    content: "（金）";
  }
  #mini-calendar td:nth-child(7) i:after {
    content: "（土）";
  }
}

/* *********************************************************************************** */

h1 {
  font-size: 24px;
}