/* CSS */

  .event-date-header {
      text-align: center;
      position: relative;
      margin-top: 20px;
      margin-bottom: 0px;
      background-color: transparent;
      color: #340e12;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
  }

  .google-calendar-events-list ul {
    display: flex;
    flex-direction: column;
    align-items: center; /* 子要素（li）を中央に配置 */
    padding: 0;
    margin: 0;
  }

  .google-calendar-events-list li {
      list-style: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 70%;
      max-width: 250px;
      padding: 3px;
      margin: 0px;
      border-radius: 5px;
      font-family: inherit;
      font-size: 16px;
      line-height: 1.5;
      cursor: pointer;
      transition: all 0.3s;
      word-break: break-word;
      text-align: center;
  }

  .google-calendar-events-list li.calendar-1 { background:#dd8094; color:#fff; }
  .google-calendar-events-list li.calendar-2 { background:#f1b500; color:#fff; }
  .google-calendar-events-list li.calendar-3 { background:#8db3a0; color:#fff; }
  .google-calendar-events-list li.calendar-4 { background:#66b8d5; color:#fff; }
  .google-calendar-events-list li.calendar-5 { background:#ae7ac6; color:#fff; }
  .google-calendar-events-list li.calendar-6 { background:#0f2b46; color:#fff; }
  .google-calendar-events-list li.calendar-7 { background:#fff; color:#333; }

  .modal {
      display: none;
      position: fixed;
      z-index: 9999;
      left: 0; top: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.6);
      display: flex;
      align-items: center;
      justify-content: center;
  }

  /* モーダル本体 */
  #scheduleModal .modal-content {
    background: #EBE5DC;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    border-radius: 10px;
    box-sizing: border-box;
    max-height: 90%;
    overflow-y: auto;
    font-family: inherit;
  }

  /* モーダルのオーバーレイ */
  #scheduleModal {
    display: none; /* 初期は非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 99999; /* SWELLより前面に */
    align-items: center;
    justify-content: center;
  }

  /* イベント名 */
  #modalEventTitle {
    font-size: 20px; /* お好みで調整 */
    font-weight: bold;
  }

  /* イベント日付 */
  #modalEventDate {
    margin-top: 30px;
    font-size: 18px; /* お好みで調整 */
  }
  
  /* リンク文字 */
  #modalLink {
    font-size: 18px; /* お好みで調整 */
    display: inline-block;
    color: #1176d4;
  }

  @media screen and (max-width:600px){
      .google-calendar-events-list .event-date-header,
      .google-calendar-events-list li { width:95%; }
  }