/*全体*/
#calendar-area {
    /*width: min(100%, 200px);*/
    width: min(100%, 280px);
    margin: 0 auto;
    color: #666;
  }
  
  @media screen and (max-width: 768px) {
    #calendar-area {
      width: min(90%, 500px);
      margin: 2rem auto auto;
    }
  }
  @media screen and (max-width: 768px) {
    #c-header {
      font-size: 1.4rem;
    }
  }
  .calendar_txt {
    font-size: 1.35rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
    line-height: 1.2;
  }
  
  @media screen and (max-width: 768px) {
    .calendar_txt {
      font-size: 1.6rem;
      margin-bottom: 1rem;
      color: #2d2d2d;
    }
  }
  .calendar_txt span {
    font-size: 12px;
    font-weight: normal;
    display: block;
  }
  
  @media screen and (max-width: 768px) {
    .business-day {
      width: 70%;
      margin: auto;
      display: block;
    }
  }
  /*カレンダー*/
  #calendar {
    text-align: center;
    width: 100%;
  }
  #calendar table {
    border: 1px solid #ddd;
    border-collapse: collapse;
    width: 100%;
  }
  #calendar th {
    color: #000;
    background: #e9f2ff;
  }
  #calendar td {
    background: #fff;
  }
  #calendar th,
  #calendar td {
    border: 0.5px solid #ddd;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    font-weight: bold;
    max-width: calc(100% / 7);
  }
  #calendar td:first-child,
  #calendar td:nth-of-type(4),
  #calendar td.holiday,
  #calendar td:last-child.holiday {
    background-color: #F7C8C8;
    /* color: #fff; */
  }
  #calendar td.disabled {
    background: transparent;
    color: transparent;
  }
  
  /*ボタン*/
  #next-prev-button {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  #next-prev-button button {
    cursor: pointer;
    background: #2d2d2d;
    color: #fff;
    border: 1px solid #2d2d2d;
    border-radius: 4px;
    font-size: 1rem;
    padding: 0 1rem;
    margin: 1rem 0;
    transition: ease 0.3s;
  }
  
  @media screen and (min-width: 769px) {
    #next-prev-button button:hover {
      background-color: #fff;
      border-color: #2d2d2d;
      color: #2d2d2d;
      transition: ease 0.3s;
    }
  }
  /*! 毎月更新 */
  /* 前月 btn */
  .month6 #next-prev-button #prev {
    pointer-events: none;
  }
  
  /* 次月 btn */
  .month8 #next-prev-button #next {
    pointer-events: none;
  }
  
  /* 研修 */
  .month11 #calendar table tr:nth-of-type(4) td:nth-of-type(5){
    background-color: #F7C8C8;
  }

  /* 祝日 */
  .holiday
  {
    background-color: #F7C8C8;
  }
  
  /* 年末年始 */
  .month12 #calendar table tr:nth-of-type(5) td:nth-of-type(7),
  .month12 #calendar table tr:nth-of-type(6) td:nth-of-type(2),
  .month12 #calendar table tr:nth-of-type(6) td:nth-of-type(3)
  {
    background-color: #F7C8C8;
  }
  
  .month1 #calendar table tr:nth-of-type(2) td:nth-of-type(5),
  .month1 #calendar table tr:nth-of-type(2) td:nth-of-type(6),
  .month1 #calendar table tr:nth-of-type(2) td:nth-of-type(7)
  {
    background-color: #F7C8C8;
  }

  /* GW */
  .month5 #calendar table tr:nth-of-type(2) td:nth-of-type(7),
  .month7 #calendar table tr:nth-of-type(5) td:nth-of-type(2),
  .month8 #calendar table tr:nth-of-type(4) td:nth-of-type(2) 
  {
    background-color: #F7C8C8;
  } 

  
  /*! ショールーム休日 ※UNITENは共通レイアウトのスタイルシートで＃FFFに設定すること */
  .month12 #calendar table tr:nth-of-type(5) td:nth-of-type(6),
  .month4 #calendar table tr:nth-of-type(5) td:nth-of-type(7),
  .month4 #calendar table tr:nth-of-type(6) td:nth-of-type(2),
  .month4 #calendar table tr:nth-of-type(6) td:nth-of-type(3),
  .month5 #calendar table tr:nth-of-type(2) td:nth-of-type(5), 
  .month5 #calendar table tr:nth-of-type(2) td:nth-of-type(6), 
  .month5 #calendar table tr:nth-of-type(3) td:nth-of-type(2),
  .month5 #calendar table tr:nth-of-type(3) td:nth-of-type(3),
  .month5 #calendar table tr:nth-of-type(5) td:nth-of-type(5),
  .month6 #calendar table tr:nth-of-type(5) td:nth-of-type(5) 
 {
    background-color: #F6FFC1;
  }