/* ==================================

  calendar.css

================================== */

/* ==================================

  calendar -  予約状況

================================== */

h1 {
  text-align: center;
  font-weight: bold;
  font-size: 1.9rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  padding: 128px 0 8px 0;
}

h2, h3 {
  text-align: center;
  font-weight: bold;
  font-size: 1.5rem;
}

#wrapper {
  width: 100%;
  padding: 0 8px;
}

.now {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 64px;
}

p.prev a,
p.next a {
    color: #221816;
}

.reserve-area {
  width: 550px;
  margin: 0 auto;
}

.reserve-area p.prev a::before {
    content: "\0ab";
    font-size: 2.0rem;
    padding-right: 4px;
}

.reserve-area p.next a::after {
    content: '\0bb';
    font-size: 2.0rem;
    padding-left: 4px;
}

@media screen and (max-width: 768px) {
  .reserve-area {
    width: 95%;
  }
}

.reserve-area ul li.day {
    width: 50%;
    text-align: center;
    font-weight: bold;
    background-color: rgba(143,126,79,0.3);
    padding: 8px 0;
    margin: 0 8px 2px 0;
}

.reserve-area ul li.status {
    width: 50%;
    text-align: center;
    background-color: rgba(230,230,230,0.3);
    padding: 8px 0;
    margin: 0 8px 2px 0;
}

.reserve-area ul li.status li.time-text {
    /*height: 100%;
    line-height: 100%;*/
    vertical-align: middle;
}

.prev-button, .next-button {
  width: 200px;
  margin-bottom: 24px;
  height: 50px;
  line-height: 47px;
}

.prev-next-box {
    width: 700px;
    margin: 64px auto;
}

@media screen and (max-width: 980px) {
    .prev-next-box {
        width: 95%;
    }
    .prev-button, .next-button {
        width: 40%;
        font-size: 1.1rem;
    }
}

.prev-button a, .next-button a {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid #534741;
  background-color: #534741;
  color: #FFF;
  font-size: 1.4rem;
  transition: all 0.5s ease-out;
  text-align: center;
  position: relative;
}

@media screen and (max-width: 980px) {
  .button {
    width: 60%;
  }

  .button a {
    font-size: 1.4rem;
  }
}

.button a:hover {
  background: #FFF;
  color: #534741;
  margin-left: 0px;
  margin-top: 0px;
  border: 2px solid #534741;
}

@media screen and (max-width: 640px) {
  /* スマホの場合 */
  .button a:active {
    background: #FFF;
    color: #534741;
    margin-left: 0px;
    margin-top: 0px;
    border: 2px solid #534741;
  }
}