:root {
  --cal-month-list-fc: rgba(var(--color-8),1); /* 月別表示の文字色 */
  --cal-month-list-border: rgba(var(--color-4),1); /* 月別表示の線の色 */
  --cal-month-list-bg: #fff; /* 月別表示の背景 */
  --cal-month-list-hover-bg: rgba(var(--color-1),1); /* 月別表示の背景（hover時） */
  --cal-month-list-hover-fc: rgba(var(--color-8),1); /* 月別表示の文字色（hover時） */
  --cal-month-list-hover-border: rgba(var(--color-4),1); /* 月別表示の線の色（hover時） */
  --cal-month-list-active-bg: rgba(var(--color-5),1); /* 月別表示の背景（アクティブ時） */
  --cal-month-list-active-fc: #fff; /* 月別表示の文字色（アクティブ時） */
  --cal-month-list-active-border: rgba(var(--color-5),1); /* 月別表示の線の色（アクティブ時） */
  
  --cal-month: rgba(var(--color-8),1); /* 年月の文字色 */
  --cal-border: var(--border-color); /* テーブルの線の色 */
  --cal-dlog-border-color: var(--border-color); /* 備考ダイアログ（線） */
  --cal-dlog-border-width: 2px; /* 備考ダイアログ（線の太さ） */
  --cal-closeBtn-bg: rgba(var(--color-5),1); /* 閉じるボタンの背景色（×の色は白） */
  
  --cal-sched-border: rgba(var(--color-5),0.4); /* スケジュール色説明の線の色 */
}

/*----------------------------------------------------------------------------------------------------

  月別表示
  
----------------------------------------------------------------------------------------------------*/
.month-nav--list {
  width: 100%;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 1.5em;
}
.month-nav--list li {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-item-align: center;
  align-self: center;
  line-height: 1.4;
  text-align: center;
  position: relative;
}
.month-nav--list li a {
  display: block;
  height: 100%;
  padding: 0.75em;
  border-style: solid;
  border-width: 1px 0 1px 1px;
  border-color: var(--cal-month-list-border) transparent var(--cal-month-list-border) var(--cal-month-list-border);
  background-color: var(--cal-month-list-bg);
}
.month-nav--list li:first-child a {
  border-left-color: var(--cal-month-list-border);
  border-radius: 3px 0 0 3px;
}
.month-nav--list li:last-child a {
  border-right: 1px solid var(--cal-month-list-border);
  border-radius: 0 3px 3px 0;
}
.ua-pc .month-nav--list a {
  transition: color 0.15s ease-out, border 0.15s ease-out, background 0.15s ease-out;
}
.month-nav--list a, .month-nav--list a:visited, .month-nav--list a:hover {
  color: var(--cal-month-list-fc);
  text-decoration: none;
}
.ua-pc .month-nav--list li a:hover {
  background-color: var(--cal-month-list-hover-bg);
  border-color: var(--cal-month-list-hover-border);
  color: var(--cal-month-list-hover-fc);
  text-decoration: none;
}
.ua-pc .month-nav--list li:hover + li a {
  border-left-color: var(--cal-month-list-active-border);
}
.month-nav--list li.is-active a, .month-nav--list li.is-active:hover a {
  background-color: var(--cal-month-list-active-bg);
  border-color: var(--cal-month-list-active-border);
  color: var(--cal-month-list-active-fc);
}
.month-nav--list li.is-active + li a {
  border-left-color: var(--cal-month-list-active-border) !important;
}
.month-nav--list li:before {
  --width: 6px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: var(--width) var(--width) 0 var(--width);
  border-color: transparent;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  transition: border 0.15s ease-out, bottom 0.15s ease-out;
}
.month-nav--list li.is-active:before {
  border-color: var(--cal-month-list-active-bg) transparent transparent transparent;
  bottom: -webkit-calc(-1 * var(--width));
  bottom: calc(-1 * var(--width));
}

/*----------------------------------------------------------------------------------------------------

  月別表示（矢印移動）
  
----------------------------------------------------------------------------------------------------*/
.month-nav--arrow {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.month-nav--arrow .arrows {
  margin-left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.month-nav--arrow .arrow-prev,
.month-nav--arrow .arrow-next {
  margin-bottom: 0.5em;
}
.month-nav--arrow .arrow-next {
  margin-left: 0.5em;
}

/*----------------------------------------------------------------------------------------------------

  カレンダー
  
----------------------------------------------------------------------------------------------------*/
.calender-wrap.c-list[class*="-cols"] {
  width: 100%;
  grid-template-columns: 1fr 1fr;
}
@media (max-width:760px) {
  .calender-wrap.c-list[class*="-cols"] {
    grid-template-columns: auto;
  }
}

.cal * {
  overflow: visible;
}
/* 月 */
.cal-month {
  text-align: center;
  font-size: var(--fs-m);
  font-weight: 600;
  padding-bottom: 0.5em;
  color: var(--cal-month);
}
.cal-month__m {
  font-size: var(--fs-m);
  font-weight: 700;
  display: inline-block;
  margin-left: 0.25em;
}
.cal-tbl {
  width: 100%;
  border-collapse: collapse;
}
.cal-tbl td {
  width: 14%;
  vertical-align: top;
  line-height: 1.4;
  border: 1px solid var(--cal-border);
}
.cal-tbl thead td {
  text-align: center;
  font-weight: 500;
  padding: 0.5em;
}
.cal-tbl tbody td {
  background-color: #fff;
  text-align: left;
  padding: 0.25em 0.1em;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}
.cal-tbl tbody tr:first-child td {
  border-top: 1px solid var(--cal-border);
}
.cal-tbl tbody tr td:first-child {
  border-left: 1px solid var(--cal-border);
}
/* 日付 */
.cal-tbl .day {
  display: block;
  font-size: var(--fs-2s);
  padding-left: 0.25em;
}
.cal-tbl .nowday {
  display: inline-block;
  padding: 0.05rem 0.25rem;
  color: #fff;
  background-color: var(--color-quinary);
}
/* 祝日 */
.cal-tbl .holiday {
  display: block;
  padding-top: 0.25em;
  font-size: var(--fs-3s);
  line-height: 1.2;
}
/* スケジュール */
.cal-tbl .sched {
  border-radius: 2px;
  margin-top: 0.5em;
  padding: 0.25em 0;
  text-align: center;
  font-size: var(--fs-3s);
}

/*----------------------------------------------------------------------------------------------------

  スケジュール色説明
  
----------------------------------------------------------------------------------------------------*/
.cal-sched {
  text-align: left;
  padding-top: 1em;
  line-height: 1.4;
  font-size: var(--fs-s);
}
.cal-sched dt, .cal-sched dd {
  padding-top: 0.25em;
}
.cal-sched dt {
  width: 1.5em;
  float: left;
  clear: both;
  margin-right: -1.5em;
}
.cal-sched dt .sched-color {
  width: 0.8em;
  height: 0.8em;
  display: inline-block;
  border: 1px solid var(--cal-border);
  box-sizing: content-box;
  vertical-align: middle;
  margin-top: -0.25em;
}
.cal-sched dd {
  padding-left: 1.5em;
}

/*----------------------------------------------------------------------------------------------------

  備考一覧
  
----------------------------------------------------------------------------------------------------*/
.cal-bikouList {
  text-align: left;
  padding-top: 1em;
  line-height: 1.4;
  font-size: var(--fs-s);
}
.cal-bikouList:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
.cal-bikouList dt {
  width: 5.5em;
  display: inline-block;
  float: left;
  clear: both;
  margin-right: -6em;
  padding-top: 0.5em;
  text-align: right;
}
.cal-bikouList dd {
  display: block;
  padding-left: 6em;
  padding-top: 0.5em;
}

/*----------------------------------------------------------------------------------------------------

  備考ダイアログ
  
----------------------------------------------------------------------------------------------------*/
.cal-tbl td {
  position: relative;
}
.cal-tbl .js__cal-dlog {
  cursor: pointer;
}
.dlog-wrap {
  cursor: default;
  display: none;
  width: 300%;
  z-index: 90;
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: -1px;
  transform: translateX(-50%);
  box-sizing: border-box;
  border: var(--cal-dlog-border-width) solid var(--cal-dlog-border-color);
  background-color: #fff;
  border-radius: 3px;
  text-align: left;
}
.dlog-wrap.active{
  display: block;
}
.dlog-wrap[data-posi="L"] {
  left: 0;
  transform: translateX(0);
}
.dlog-wrap[data-posi="R"] {
  left: inherit;
  right: 1em;
  transform: translateX(0);
}
.dlog-wrap[data-posi="L2"] {
  left: 75%;
}
.dlog-wrap[data-posi="R2"] {
  left: inherit;
  right: -225%;
}
.dlog {
  position: relative;
  box-sizing: border-box;
  padding: 1em;
  color: var(--fc);
}
.dlog:before, .dlog:after {
  content: "";
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: transparent;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
}
.dlog-wrap[data-posi="L"] .dlog:before, .dlog-wrap[data-posi="L"] .dlog:after {
  left: 16.5%;
}
.dlog-wrap[data-posi="L2"] .dlog:before, .dlog-wrap[data-posi="L2"] .dlog:after {
  left: 42%;
}
.dlog-wrap[data-posi="R"] .dlog:before, .dlog-wrap[data-posi="R"] .dlog:after {
  left: inherit;
  right: 3%;
}
.dlog-wrap[data-posi="R2"] .dlog:before, .dlog-wrap[data-posi="R2"] .dlog:after {
  left: inherit;
  right: 34.5%;
}
.dlog:before {
  border-top-color: var(--cal-dlog-border-color);
}
.dlog:after {
  border-top-color: #fff;
  margin: -webkit-calc(-1.5 * var(--cal-dlog-border-width)) 0 0 0;
  margin: calc(-1.5 * var(--cal-dlog-border-width)) 0 0 0;
}
.dlog_hd {
  padding-bottom: 0.5em;
  position: relative;
}
.dlog_hd b {
  font-weight: 400;
}
.dlog_hd .week,
.dlog_ct {
  font-size: var(--fs-2s);
}
.ua-pc .dlog_hd .closeBtn {
  display: none;
}
.dlog_hd .closeBtn-wrap {
  /*display: inline-block;*/
  display: none;
  position: absolute;
  width: 1.8em;
  height: 1.8em;
  right: -1.8em;
  top: -1.8em;
  cursor: pointer;
}
.dlog_hd .closeBtn {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 100%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.dlog_hd .closeBtn span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cal-closeBtn-bg);
  border-radius: 100%;  
}
.dlog_hd .closeBtn span:before,
.dlog_hd .closeBtn span:after {
  content: "";
  display: inline-block;
  --width: 50%;
  --height: 2px;
  width: var(--width);
  height: var(--height);
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -webkit-calc(-1 * var(--height) / 2);
  margin-top: calc(-1 * var(--height) / 2);
  margin-left: -webkit-calc(-1 * var(--width) / 2);
  margin-left: calc(-1 * var(--width) / 2);
}
.dlog_hd .closeBtn span:before {
  transform: rotate(-45deg);
}
.dlog_hd .closeBtn span:after {
  transform: rotate(45deg);
}
@media screen and (max-width:640px) {
  .dlog-wrap {
    width: 400%;
  }
  .dlog-wrap[data-posi="L2"] {
    left: 100%;
  }
  .dlog-wrap[data-posi="R2"] {
    right: -275%;
  }
  .dlog-wrap[data-posi="L2"] .dlog:before, .dlog-wrap[data-posi="L2"] .dlog:after {
    left: 37.5%;
  }
  .dlog-wrap[data-posi="R"] .dlog:before, .dlog-wrap[data-posi="R"] .dlog:after {
    right: 1%;
  }
  .dlog-wrap[data-posi="R2"] .dlog:before, .dlog-wrap[data-posi="R2"] .dlog:after {
    right: 25%;
  }
}