/* ========================================
   営業日カレンダー（プラグイン用）
   フロントエンド専用スタイル
======================================== */

/* Font Awesomeアイコンのサイズ統一 */
.components-popover .fas {
  font-size: 16px;
  width: 24px;
  height: 24px;
  line-height: 16px;
  display: inline-block;
  align-items: center;
  align-content: center;
}

/* より具体的にターゲットする場合 */
.components-toolbar .components-button svg,
.components-toolbar .components-button i {
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
}

/* 営業日カレンダー */
.business-calendar {
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

.business-calendar caption {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 10px;
  letter-spacing: .1em;
  position: relative;
}

.business-calendar caption span {
  line-height: 1;
  font-size: 25px;
  vertical-align: -1px;
}

.business-calendar-past a,
.business-calendar-future a {
  display: inline-block;
  cursor: pointer;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  width: 25px;
  height: 25px;
}

.business-calendar-past a::before,
.business-calendar-future a::before {
  display: inline-block;
  content: "";
  border-style: solid;
  border-width: 7px 6px 7px 0;
  border-color: transparent #333 transparent transparent;
  position: absolute;
  top: 10px;
  left: 10px;
}

.business-calendar-future a::before {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.business-calendar-past,
.business-calendar-future {
  position: absolute;
  top: 0;
  font-family: var(--font_jp);
  color: var(--wp--preset--color--secondary);
}

.business-calendar-past {
  left: 0;
}

.business-calendar-future {
  right: 0;
}

.business-calendar th {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary-text);
  border: 1px solid #dfdfdf;
  text-align: center;
  font-weight: 600;
  width: 14%;
}

.business-calendar td {
  background: #FFFFFF;
  border: 1px solid #dfdfdf;
  position: relative;
  z-index: 0;
}

.business-calendar td::before {
  content: "";
  background: #ccc;
  border-radius: 50px;
  width: 25px;
  height: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0;
}

.business-calendar th,
.business-calendar td {
  padding: 10px;
  font-size: 15px;
}

.business-calendar-box-wrap.col2 {
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
}

.business-calendar-box-wrap.col2 .business-calendar-box {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 3%;
}

.business-calendar .today {
  text-decoration: underline;
}

.business-calendar .attr0,
.business-calendar .attr1,
.business-calendar .attr2 {
  color: #fff;
}

.business-calendar .attr0::before,
.business-calendar .attr1::before,
.business-calendar .attr2::before,
.business-calendar .attr3::before {
  opacity: 1;
}

.business-calendar .attr0::before {
  background: var(--wp--preset--color--event-01);
}

.business-calendar .attr1::before {
  background: var(--wp--preset--color--event-02);
}

.business-calendar .attr2::before {
  background: var(--wp--preset--color--event-03);
}

.business-calendar .attr3::before {
  background: var(--wp--preset--color--event-04);
}


@media (max-width: 800px) {
  .business-calendar-box-wrap.col2 .business-calendar-box {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    grid-gap: 30px;
  }
}

.list-event {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 20px;
}

.list-event li {
  font-size: 15px;
  line-height: 1;
}

.list-event mark {
  margin: 0 5px 0 0;
}

.list-event .event01 {
  color: var(--wp--preset--color--event-01);
}

.list-event .event02 {
  color: var(--wp--preset--color--event-02);
}

.list-event .event03 {
  color: var(--wp--preset--color--event-03);
}

.list-event .event04 {
  color: var(--wp--preset--color--event-04);
}