@charset "UTF-8";

ol,
ul,
dl {
  margin-bottom: 0;
}

ol,
ul {
  padding-left: 0;
}

.reservation__note {
  font-size: 13px;
  line-height: 2;
  margin-bottom: 25px;
}

.reservation__note li {
  position: relative;
  padding-left:10px ;
}

.reservation__note li::before {
  content: '・';
  position: absolute;
  left: 0;
  top: 0;
}

.reservation__note .bold {
  font-weight: bold;
}

/* ページ送りボタン */
.reservation__paging {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.reservation__paging-btn {
  display: inline-block;
  width: 112px;
  height: 30px;
  line-height: 30px;
  font-size: 10px;
  border: 1px solid #BEB9B1;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 1px 1px #00000029;
}

.reservation__paging-btn.prev {
  text-align: right;
  /* padding-right: 16px; */
  opacity: 0.3;
  position: relative;
}

.reservation__paging-btn.prev a {
  padding-right: 16px;
}

.reservation__paging-btn.prev::before {
  content: '';
  width: 8px;
  height: 8px;
  border-top: solid 2px #666666;
  border-right: solid 2px #666666;
  position: absolute;
  left: 10px;
  top: 10px;
  transform: rotate(-135deg);
}

.reservation__paging-btn.next {
  text-align: left;
  /* padding-left: 16px; */
  opacity: 0.3;
  position: relative;
}

.reservation__paging-btn.next a {
  padding-left: 16px;
}

.reservation__paging-btn.next::before {
  content: '';
  width: 8px;
  height: 8px;
  border-top: solid 2px #666666;
  border-right: solid 2px #666666;
  position: absolute;
  right: 10px;
  top: 10px;
  transform: rotate(45deg);
}

.reservation__paging-btn.prev.is_active,
.reservation__paging-btn.next.is_active {
  opacity: 1;
}

.reservation__paging-btn a {
  color: #666666;
  cursor: pointer;
}

.reservation__calendar {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  text-align: center;
  margin-bottom: 20px;
}

.reservation__calendar__table table,
.reservation__calendar__table td {
  /* border: 1px solid #595959;
	border-collapse: collapse; */
  width: 100%;
  padding: 0;
}

.reservation__calendar__table th {
  width: 42px;
  padding: 0;
}

table,
td,
th {
  text-align: center;
}

.reservation__calendar__table {
  border: solid #CECECE;
  border-spacing: 0;
  border-width: 1px 0 1px 0;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  background-color: #fff;
}

.dayCellContainer {
  position: sticky;
  top: -1px;
  background-color: #fff;
  z-index: 100;
  background-color: #f7f7f7;
}
.dayTtl,
.timeCell {
  color: #3B4043;
}

.openCell,
.closeCell {
  /* width: 48px; */
  height: 32px;
  width: calc((100% - 42px)/7);
  line-height: 32px;
}

.dayCell {
  height: 48px;
  width: calc((100% - 42px)/7);
}

.dayTtl,
.timeCell {
  /* width: calc(100% - 48px*7); */
  height: 32px;
  width: 42px;
  line-height: 32px;
}

/* SP版では７日分を表示する（８日目以降は非表示） */
.dayCell:nth-of-type(n+9),
.innerCol:nth-of-type(n+9) {
  display: none;
}

/* sp版ではページ内リンクを設置する */
.linkCellContainer {
  height: 42px;
}

.linkCellContainer .space {
  border-right: 1px solid #AAAAAA;
}

.linkCellContainer .linkArea a {
  padding: 0 23px 0 23px;
  font-size: 11px;
  text-decoration: underline;
  color: #4C4C7C;
  position: relative;
  font-weight: normal;
}

.linkCellContainer .linkArea a::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 6px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6.9px 4px 0 4px;
  border-color: #958989 transparent transparent transparent;
}



.innerTimeCol {
  background-color: #F0F0F0;
  border-right: 1px solid #aaaaaa;
}

.dayTtl {
  /* background-color: #F0F0F0; */
  font-size: 9px;
  font-weight: 400;
  border: solid #CECECE;
  border-width: 1px 0 0 0;
  border-right: 1px solid #AAAAAA;
  position: relative;
}

.dayTtl::after {
  content: '';
  width: 100%;
  height: 2px;
  background-color: #CECECE;
  position: absolute;
  left: 0;
  bottom: -1px;
}

.dayTtl:last-child {
  /* border-left: 1px solid #AAAAAA; */
}

.dayCell {
  border: solid #CECECE;
  border-width: 1px 0 0 0;
  font-size: 9px;
  position: relative;
}

.dayCell::after {
  content: '';
  width: 100%;
  height: 2px;
  background-color: #CECECE;
  position: absolute;
  left: 0;
  bottom: -1px;
}

.dayCell::before {
  content: '';
  width: 1px;
  height: 100%;
  background-color: #CECECE;
  position: absolute;
  right: 0;
  top: 0;
}

.dayCell.sat {
  background-color: rgba(0, 75, 177, 0.09);
}

.dayCell.sun {
  background-color: rgba(255, 39, 0, 0.09);
}

.dayCell .today {
  color: #004BB1;
}

.moreInnerTable tr:first-child>td {
  /* border: none; */
  border-top: 2px solid #cecece;
}

td.timeCell {
  font-size: 9px;
  font-weight: 400;
  text-align: right;
  padding-right: 8px;
  border-top: 1px solid #cecece;
  background-color: #ECEAE5;
  font-size: 12px;
}

tr:nth-of-type(4n+5) .timeCell,
tr:nth-of-type(4n+5) .Cell  {
  border-top: 2px solid #cecece;
}

tr:nth-of-type(4n+5) .timeCell {
  font-size: 13px;
  font-weight: bold;
}

.moreInnerTable tr:first-child>.timeCell {
  font-size: 13px;
  font-weight: bold;
}

.openCell,
.closeCell {
  border-top: 1px solid #cecece;
}

.openCell {
  color: #CC1212;
  font-size: 16px;
}

.openCell a {
  color: #CC1212;
  font-size: 16px;
  width: 100%;
  height: 100%;
  display: inline-block;
}



.openCell label, .closeCell label {
  display: block;
  width: 100%;
  height: 32px;
  line-height: 32px;
}

.openCell input {
  display: none;
}
.openCell label:hover {
  cursor: pointer;
}

.closeCell {
  color: #3B4043;
  background-color: #EEEEEE;
  font-weight: 300;
  font-size: 11px;
}

.closeCell input {
  display: none;
}

.closeCell label:hover {
  cursor: not-allowed;
}

.innerCol {
  border-left: 1px solid #cecece;
}

.innerCol:first-child {
  border-left: 1px solid #AAAAAA;
}

.dayCell .week {
  font-size: 9px;
}

.dayCell .day {
  font-size: 13px;
}

/* sp版では右の時間は非表示 */
.dayTtl.pc,
.innerTimeCol.pc {
  display: none;
}

input[type=radio]:checked+label {
  background-color: #62839D;
  color: #fff;
  border-color: #62839D;
}

/* カテゴリ選択 */
.reservation__category select {
  width: 100%;
  height: 48px;
  border: 1px solid #DDDDDD;
  background: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 0 30px 0 15px;
  box-sizing: border-box;
  border-radius: 0;
  outline: none;
  margin-bottom: 20px;
}

.reservation__category .ec-select {
  position: relative;
}

.reservation__category .ec-select::before {
  content: '';
  width: 10px;
  height: 10px;
  border-top: solid 2px #666666;
  border-right: solid 2px #666666;
  position: absolute;
  right: 30px;
  top: 18px;
  transform: rotate(135deg);
}

.ec-select select {
  width: 100%;
  background-color: #fff;
  border-radius: 0;
  appearance: none;
}






@media (min-width:768px) {

  .reservation__note {
    margin-bottom: 30px;
    font-size: 16px;
  }

  /* ページ送りボタン */
  .reservation__paging-btn {
    width: 156px;
    height: 35px;
    line-height: 35px;
    font-size: 13px;
  }

  .reservation__paging-btn.prev a{
    padding-right: 42px;
  }

  .reservation__paging-btn.next a{
    padding-left: 42px;
  }

  .reservation__paging-btn.prev::before {
    width: 10px;
    height: 10px;
    top: 12px;
    left: 16px;
  }

  .reservation__paging-btn.next::before {
    width: 10px;
    height: 10px;
    top: 12px;
    right: 16px;
  }

  /* pc版では右の時間は表示 */
  .dayTtl.pc,
  .innerTimeCol.pc {
    display: table-cell;
  }

  .timeTableRight .timeCell {
    border-left: 1px solid #AAAAAA;
  }

  /* PC版では１１日分を表示する（８日目以降も表示） */
  .dayCell:nth-child(n+9),
  .innerCol:nth-child(n+9) {
    display: table-cell;
  }

  .dayCell:nth-of-type(n+12),
  .innerCol:nth-of-type(n+12) {
    display: none;
  }

  /* pc版ではページ内リンクを非表示にする */
  .linkCellContainer {
    display: none;
  }

  .reservation__calendar {
    width: 100%;
    margin: 0 auto 90px;
  }

  .reservation__calendar__table {
    border-width: 1px;
  }

  .dayTtl {
    /* border-bottom: 4px solid #CDD6DD; */
    height: 64px;
    font-size: 17px;
    font-weight: 700;
  }

  .dayTtl::after {
    height: 4px;
    background-color: #CDD6DD;
  }

  .dayCell {
    /* border-bottom: 4px solid #CDD6DD; */
    height: 64px;
  }

  .dayCell::after {
    height: 4px;
    background-color: #CDD6DD;
  }

  .dayCell .day{
    font-size: 13px;
  }

  .timeCell,
  .openCell,
  .closeCell {
    height: 46px;
    line-height: 46px;
  }

  .openCell label, .closeCell label {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 46px;
  }

  .dayTtl,
  .timeCell {
    width: 61px;
  }

  td.timeCell {
    font-size: 17px;
    color: #3B4043;
    padding-right: 10px;
  }

  .timeTableRight td.timeCell {
    text-align-last: left;
    padding-left: 10px;
  }

  .dayCell {
    color: #3B4043;
    font-size: 14px;
    height: 68px;
  }

  .dayCell:nth-child(11):before,
  .dayCell:nth-child(21):before{
    background-color: #AAAAAA;
    right: -1px;
  }

  .dayCell .week {
    font-size: 13px;
  }

  .dayCell .day{
    font-size: 18px;
  }

  .dayCell .today {
    font-size: 13px;
  }

  .openCell{
    font-size: 18px;
  }

  .openCell a {
  font-size: 18px;
  }

  .openCell a:hover {
    background-color: #FCDBE3;
  }

  .moreInnerTable tr:first-child>td {
    border-top: none;
  }

  tr:nth-of-type(4n+5) .timeCell {
    font-size: 18px;
  }

  .moreInnerTable tr:first-child>.timeCell {
    font-size: 18px;
  }

  tr:nth-of-type(4n+5) .timeCell, tr:nth-of-type(4n+5) .Cell {
    border-top: 3px solid #C1C1C1;
  }

  .closeCell {
    font-size: 14px;
  }

  /* カテゴリ選択 */
  .reservation__category {
    width: 380px;
  }

  .reservation__category select {
    margin-bottom: 12px;
  }

  .reservation__paging.sp {
    display: none;
  }


}