.pc_only {
  display:block;
}
.sp_only {
  display: none;
}
@media screen and (max-width: 876px) {
  .pc_only {
    display: none;
  }
  .sp_only {
    display: block;
  }
}

 /* ヒーロースライダー　*/
.kv_inner {
  width: 100%;
  height: calc(100vh - 35.7142%);
  margin: 0;
  padding: 0;
  text-align: center;
  /* padding-bottom: 35.7142%; */
}
.bx-wrapper {
  border: none!important;
}
@media screen and (max-width: 876px) {
    .kv_inner {
    width: 100%;
    height: calc(100vh - 62.5%);
    /* padding-bottom: 62.5%; */
  }
}


/* ---------------------------------------------------------
  // Googleマップの色を変更する
  // --------------------------------------------------------- */
  .googlemap iframe {
    -webkit-filter: grayscale(1);
            filter: grayscale(1); /* Googleマップをグレースケールにする */
  }

  /* 色を変えるためのオーバーレイ要素の設定 */
  .googlemap.wp-block-group {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }

  .googlemap > div {
    position: relative;
  }

  .googlemap > div::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: overlay;
    background: #000; /* 好きな色コードに変更 */
  }

/* ---------------------------------------------------------
// カレンダーカスタマイズ
// --------------------------------------------------------- */

.ui-widget.ui-widget-content {
    border: none;
}
.ui-widget-content {
    border: 1px solid #dddddd;
    background: #ffffff;
    color: #333333;
    width: 80% !important;
    margin: 20px auto;
}
 .hasDatepicker {
  margin: 20px auto;
 }

  .ui-datepicker-multi-2 .ui-datepicker-group {
      width: 49%!important;
      margin: .5%;
  }
  .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: none;
    background: #f6f6f6;
    font-weight: normal;
    color: #454545;
}
.ui-widget-header {
    border: none;
    border-bottom: 1px dotted #dddddd;
    background: #fff;
    color: #333333;
    font-weight: normal; 
}

.ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: normal;
    border: 0;
}
@media screen and (max-width: 876px) {
  .ui-widget-content {

    width: 90% !important;
    margin: 20px auto;
}
  .ui-datepicker .ui-datepicker-prev span, 
  .ui-datepicker-prev .ui-corner-all, 
  .ui-icon .ui-icon-circle-triangle-w {
    display: none!important;
  }
  .ui-datepicker-multi-2 .ui-datepicker-group {
    width: 99% !important;
    margin: .5%;
  }
  .ui-datepicker-group-first {
    width: 99%!important;
  }
  .ui-datepicker-group-last {
    display: none;
  }
}



/* */

:root {
  --calen : #F8F8F8;
  --default: #fce3e8;
  --holiday: #E9E9E9;
  --o-lunch: #f3f3c0;
  --o-dinner: #d7cbfc;
  --teashop: #cef1c9;
}


table.ui-datepicker-calendar tbody tr:nth-child(even) {
	background: transparent;

}

table.ui-datepicker-calendar tbody {
	background: var(--calen);

}
.ui-state-default {
	background: var(--default) !important;

}

.ui-datepicker-inline {
	margin: 1rem auto;
}

.pc-mode .ui-datepicker-prev,
.pc-mode .ui-datepicker-next {
	display: none;
}
.ui-state-active {
	border: 1px solid #c5c5c5 !important;
    font-weight: normal !important;
    color: #454545 !important;

}

.ui-datepicker-unselectable.ui-state-disabled .ui-state-default {
	background: #f6f6f6 !important;

}
.ui-state-highlight {
	border: 1px solid #c5c5c5 !important;

    font-weight: normal !important;
    color: #454545 !important;
}
.ui-widget-content a {
    cursor: default !important;
}




.ic-open {
	display: inline-block;
	background: var(--default);
	border: 1px solid #C5C5C5;
	width: 1rem;
	height: 1rem;
	margin-right: 0.5em;
}
.ic-close {
	display: inline-block;
	background: var(--holiday);
	border: 1px solid #C5C5C5;
	width: 1rem;
	height: 1rem;
	margin-right: 0.5em;
}
.ic-lunch {
	display: inline-block;
	background: var(--o-lunch);
	border: 1px solid #C5C5C5;
	width: 1rem;
	height: 1rem;
	margin-right: 0.5em;
}
.ic-dinner {
	display: inline-block;
	background: var(--o-dinner);
	border: 1px solid #C5C5C5;
	width: 1rem;
	height: 1rem;
	margin-right: 0.5em;
}
.ic-resrv,
.ic-teashop {
	display: inline-block;
	background: var(--teashop);
	border: 1px solid #C5C5C5;
	width: 1rem;
	height: 1rem;
	margin-right: 0.5em;
}
.disable {
  background: #fbfbfb;
  color: #ddd;
}
.open {
  background: var(--default);
}
.ui-datepicker td.teashop > a.ui-state-default {
  background: var(--teashop)!important;
}

.ui-datepicker td.dinner > a.ui-state-default {
  background: var(--o-dinner)!important;
}

.ui-datepicker td.lunch > a.ui-state-default {
  background: var(--o-lunch)!important;
}

.ui-datepicker td.dinner.lunch > a.ui-state-default,
.ui-datepicker td.boutique > a.ui-state-default {
  background: var(--holiday)!important;
}