@charset "UTF-8";
body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: whitesmoke;
}

body .container {
  background-color: #fff;
  padding-bottom: 10px;
}

form {
  display: inline-block;
}

#instafetch article {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 33.333333%;
          flex: 0 0 33.333333%;
  max-width: 33.333333%;
  padding: 0 15px;
}

.counseling h3 {
  border-bottom: solid 3px black;
  max-width: 300px;
}

.counseling dl {
  margin: 0;
  width: 100%;
}

.counseling dl dt {
  width: 100%;
}

.counseling dl dd {
  margin-left: 20px;
  width: 100%;
}

dl {
  width: 400px;
  margin: 0 auto;
}

dl dt {
  background: #5f9be3;
  color: #fff;
  font-weight: bold;
  margin: 5px 10px;
  padding: 5px;
  width: 150px;
  display: inline-block;
}

dl dd {
  width: 200px;
  margin: 5px 0;
  padding: 5px 0;
  display: inline-block;
}

.pagination_area {
  margin: 0 20px;
}

.container-fluid {
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 992px) {
  .container {
    max-width: 992px;
  }
}

.pagination, .pagination_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.25rem;
}

section.d-flex, section.pagination_box {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 0;
}

section.d-flex form, section.pagination_box form {
  width: 340px;
}

.flex-wrap, .pagination_box {
  -ms-flex-wrap: wrap !important;
      flex-wrap: wrap !important;
}

.card {
  width: 100%;
  max-width: 600px;
}

.box {
  border: 2px solid #0094D6;
  margin: 10px 0;
}

.box h3 {
  background: #0094D6;
  color: #FFF;
  text-align: center;
  font-size: larger;
  margin: 0;
}

.box .inner {
  padding: .5em;
}

.detail_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  height: 99%;
}

.detail_area .icon {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: #999;
  font-size: 20px;
}

.detail_left {
  width: 58%;
  overflow-y: scroll;
  background-color: #FFF;
  height: 80vh;
  padding: 5px;
  border-radius: 10px;
}

.detail_left #all_show_result {
  overflow-y: scroll;
  height: 75%;
  display: block;
}

.detail_left .discount, .detail_left .reduction {
  color: #d81d1d;
}

.detail_right_content {
  width: 38%;
  margin-left: 2%;
  height: 84vh;
  background-color: #FFF;
}

.detail_right_content .detail_right {
  overflow-y: scroll;
}

.detail_right_content .btn-group {
  text-align: center;
  display: block;
}

.detail_right_content .category {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: 20px;
  padding: 5px 10px;
  border: solid 1px #19a8e0;
  color: #19a8e0;
  margin: 0;
}

.calc_box {
  height: 84vh;
  width: 55%;
}

.calc_box .deposit {
  font-size: 30px;
}

.calc_box .charge {
  width: 50%;
  margin-top: 0px;
  display: inline-block;
}

.calc_box .btn-charge {
  width: 30%;
  background-color: #0094D6;
  color: white;
  margin-top: 0;
  margin-bottom: 5px;
  height: 38px;
}

.calc_box .btn-charge:hover {
  background-color: deepskyblue;
  color: white;
}

.calc_box .calc_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.calc_box .calc_area .calc {
  background-color: white;
  font-size: 40px;
  text-align: center;
  height: 68px;
  width: 33%;
  padding-top: 2px;
  border: solid 1px #CCC;
  margin: 2px;
}

.deposit_area {
  height: 84vh;
  width: 35%;
  margin: 0 20px;
}

.deposit_area button {
  width: 60%;
  margin-left: 50px;
}

#modal-content {
  max-width: 300px;
  margin: 1.5em auto 0;
  padding: 10px 20px;
  border: 2px solid #aaa;
  background: #fff;
  z-index: 2;
  position: fixed;
  display: none;
}

#modal-overlay {
  z-index: 1;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.75);
}

.modal-p {
  margin-top: 1em;
}

.modal-p:first-child {
  margin-top: 0;
}

.button-link {
  color: #00f;
  text-decoration: underline;
}

.button-link:hover {
  cursor: pointer;
  color: #f00;
}

.today {
  background: orange;
}

.noday {
  background: #c7c7c7;
}

.btn-w100 {
  width: 100%;
  background-color: #0094D6;
  color: white;
  margin: 2% 0;
  height: 50px;
  font-size: larger;
  padding-top: 10px;
}

.btn-w100:hover {
  background-color: deepskyblue;
  color: white;
}

form {
  width: 100%;
}

td.cal_all {
  padding: 15px 0 20px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  /* 必要であればリンク要素の重なりのベース順序指定 */
}

td.cal_all a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  /* 必要であればリンク要素の重なりのベース順序指定 */
}

td.cal_all .badge {
  font-size: 65%;
  font-weight: 500;
  margin: 0 1000px 0 5px;
  text-align: left;
}

td.cal_all .rank {
  width: 20px;
}

.info img {
  width: 100%;
}

.info.container {
  padding-top: 30px;
}

.info table {
  max-width: 960px;
  margin: auto;
  width: 90%;
}

.info table tr {
  border: solid 1px #999;
  margin-bottom: 10px;
}

.info table tr th {
  width: 30%;
  padding: 15px 5px;
  font-weight: normal;
  background-color: #eee;
}

.info table tr td {
  width: 70%;
  padding: 15px 5px;
}

.reserve .btn {
  width: 49%;
}

.reserve table {
  max-width: 960px;
  margin: auto;
  width: 90%;
}

.reserve table th,
.reserve table td {
  padding: 5px;
  width: 6%;
}

.navbar {
  max-width: 960px;
  margin: auto;
}

.navbar-light .navbar-toggler {
  border: none;
}

.navbar-light .navbar-nav .nav-link {
  color: #000;
}

table.calender {
  table-layout: fixed;
  width: 98%;
  margin: auto;
  background-color: #fff;
  height: 70vh;
}

table.calender th {
  background-color: #eee;
  color: #aaa;
}

table.calender tr td {
  width: 14%;
  height: 80px;
}

.badge-darkslateblue {
  background-color: #483D8B;
  color: #fff;
}

.badge-maroon {
  background-color: #800000;
  color: #fff;
}

.badge-lightblue {
  background-color: #ADD8E6;
}

.badge-pink {
  background-color: #FFC0CB;
}

.badge-orange {
  background-color: #FFA500;
}

.monthly {
  text-align: center;
  width: 100%;
}

.monthly a {
  color: #aaa;
  padding: 10px;
}

.staff_table {
  text-align: center;
}

.staff_table thead th {
  background-color: #eee;
  color: #000;
}

.staff_table form {
  width: auto;
  margin: 0px;
}

@media screen and (max-width: 1000px) {
  .staff_table thead {
    display: none;
  }
  .staff_table th {
    display: block;
    width: 100%;
  }
  .staff_table td {
    display: block;
    width: 100%;
  }
}

.operation form {
  float: left;
  width: auto;
  margin-right: 5px;
}