@charset "utf-8";

:root {
  /* イベントバー表示の開始位置。日付マスの一番上からのスペース*/
  --event-area-start-offset: 40; 
  /* イベントバー1つ分の高さ */
  --event-bar-fixed-height: 40;  
  /* イベントバー間の縦の隙間 */
  --event-bar-gap: 8; 
  /* 日付セルの最低高さ */
  --min-height:150; 
}

.home .cont_01 ul li:nth-child(-n+4) {
    margin-bottom: 0px !important;
}

.calendar {
  width: 100%;
  border-collapse: collapse;
}

.calendar th, .calendar td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}

.table-calendar td{
  padding: 8px 0 !important;
  position: relative;
  vertical-align: top;
  box-sizing: border-box;
  overflow-y: hidden;
  overflow-x: hidden;
  height: calc(var(--min-height) * 1px);
}

.table-calendar.v_calendar {
  width: 100%;
  margin-top: -15px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px;
}

.table-calendar.v_calendar td {
  height: 40px;
  font-size: 110%;
  background-color: #fff;
  color: #595959;
  font-weight: 700;
  vertical-align: middle;
}
.v_calendar span {
  color: #000000;
}


@media screen and (max-width: 992px) {
  .eventCell{
    padding: 0 0 8px;
  }
}

.v_calendar td.eventCell {
  width: 84%;
  text-align: left;
  padding-left: 10px;
}

.table-calendar.v_calendar td.eventCell {
  font-weight: 500 !important;
  border-left: dotted 1px #ccc;
}

.dateCellSaturday {
  background: #f0eef4;
}

.dateCellSaturday td{  
  background: #f0eef4 !important;
}

.dateCellSunday {
  background: #fbe6e0;
}

.dateCellSunday td{  
  background: #fbe6e0 !important;
}

.td-template{
  height: 140px;
}

.event-bar-pc {
  display: block;
  position: absolute;
  width: 100%;
  padding: 1px !important; 
  box-sizing: border-box;
  white-space: normal;
  font-size: 14px !important;
  text-align: left;
  z-index: 5;
    
  height: calc(var(--event-bar-fixed-height) * 1px);

  /* top位置の計算式: 開始位置 + (レーン番号 * (バーの高さ + 隙間)) */
  top: calc(
    var(--event-area-start-offset) * 1px + 
    var(--lane, 0) * (var(--event-bar-fixed-height) * 1px + var(--event-bar-gap) * 1px)
  );
  font-weight: normal !important;
}

.event-bar-sp {
  font-weight: normal !important;
  font-size: 12px !important;
}

/* リンクになっているイベントバーのみ適用 */
[class^="event-bar"][href]:hover {
  opacity: 0.7;
}

#calendar-container-1{
  margin-bottom: 60px;
}

.v_calendar-container {
  margin-bottom: 50px;
}

.d-none {
  display: none !important;
}
.d-block {
  display: block !important;
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-block {
    display: block !important;
  }
}

.table_wrap {
  margin-top: 42px;
}


@media screen and (max-width:768px) {

  /* displayプロパティをテーブル本来の表示形式に戻す */
  .calendar table tbody {
    display: table-row-group;
  }

  .calendar table tr {
    display: table-row;
  }

  .calendar table th,
  .calendar table td {
    display: table-cell;
  }

  .calendar table tbody,
  .calendar table tr,
  .calendar table th,
  .calendar table td {
    width: auto;
  }

  .calendar table tr td span {
    font-size: 14px;
    padding:0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position:static;
    top:0;
    bottom:0;
    height:100%;
    left:0;
    width:auto;
    border-right:dotted 1px #ccc;
  }

  .calendar table {
    display: table;
    width: auto;
    font-size: 12px;
  }

}