@charset "utf-8";
/*------------------------------------------------*/
/*★ スケジュールページフェア共通スタイル設定 ★*/
/*------------------------------------------------*/
#schedule {
  .base-title.is-block-title {
    --title-gap-bottom: var(--default-gap-16);
  }
  .is-size-pc & {
    --schedule-table-col-name-size: calc((336 / var(--default-width-pc-val)) * 100%); /*336px*/
    --schedule-table-col-detail-size: 1fr;
    #schedule-kaigai {
      --schedule-table-title-bg: var(--default-color-kaigai);
    }
    #schedule-kokunai {
      --schedule-table-title-bg: var(--default-color-kokunai);
    }
    .schedule-table-title {
      display: grid;
      grid-template-columns: var(--schedule-table-col-name-size) var(--schedule-table-col-detail-size);
      background: var(--schedule-table-title-bg);
      border: var(--default-border-black);
      border-bottom: none;
      .schedule-table-title__item {
        padding: var(--default-gap-16) var(--default-gap-32);
        color: #fff;
        font-size: var(--default-font-size-20);
        font-weight: bold;
        text-align: center;
        &.is-name {
          border-right: 1px solid;
        }
      }
    }
  }
  /*schedule-table-label-description*/
  .schedule-table-label-description {
    display: flex;
    gap: var(--default-gap-12);
    font-size: var(--default-font-size-12);
    margin-bottom: var(--default-gap-8);
    justify-content: space-between;
    @media (width >= 650px) {
      justify-content: end;
      .schedule-table-label-description__item--text {
        font-size: var(--default-font-size-14);
        &::before {
          content: '…';
        }
      }
    }
    .schedule-table-label-description__item {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--default-gap-4);
    }
    .schedule-table-label-description__item--icon {
      width: fit-content;
      padding: var(--default-gap-4);
      background: var(--schedule-table-channel-item-bg);
      color: #fff;
      .is-online & {
        --schedule-table-channel-item-bg: var(--default-color-online);
      }
      .is-tel & {
        --schedule-table-channel-item-bg: var(--default-color-tel);
      }
      .is-shop & {
        --schedule-table-channel-item-bg: var(--default-color-shop);
      }
    }
  }

  /*.schedule-table*/
  .schedule-table.is-table {
    background: #fff;
    border: var(--default-border-black);
    .schedule-table__item {
      display: grid;
      gap: var(--default-gap-8) 0;
      &:not(:last-child) {
        border-bottom: var(--default-border-black);
      }
      .is-size-sp & {
        padding: var(--default-gap-16);
      }
      .is-size-pc & {
        grid-template-columns: var(--schedule-table-col-name-size) var(--schedule-table-col-detail-size);
        align-items: center;
        padding: var(--default-gap-16) 0;
        .schedule-table__item--name {
          padding: 0 var(--default-gap-16);
        }
        .schedule-table__item--detail {
          border-left: 1px dashed;
          padding: 0 var(--default-gap-24);
        }
      }
      .schedule-table__item--name {
        text-align: center;
        font-weight: bold;
        font-size: var(--default-font-size-18);
      }
      .schedule-table__item--detail--item {
        display: grid;
        gap: var(--default-gap-8) var(--default-gap-24);
        --notes-item-font-size: var(--default-font-size-14);
        &:not(:first-child) {
          margin-top: var(--default-gap-8);
          &:has(.schedule-table__item--detail--item--name) {
            margin-top: var(--default-gap-16);
          }
        }
        .is-size-sp & {
          justify-items: center;
          text-align: center;
          --schedule-table-channel-item-font-size: var(--default-font-size-12);
          .schedule-table__item--detail--item--time {
            font-size: var(--default-font-size-16);
          }
          .schedule-table__item--detail--item--name {
            font-size: var(--default-font-size-14);
          }
          .schedule-table__item--detail--item--channel {
            justify-items: center;
          }
        }
        .is-size-pc & {
          font-size: var(--default-font-size-18);
          grid-template-columns: auto 1fr;
          align-items: center;
          --schedule-table-channel-item-font-size: var(--default-font-size-16);
          .schedule-table__item--detail--item--name {
            grid-column: span 2;
          }
          .schedule-table__item--detail--item--time {
            width: max-content;
            min-width: 200px;
          }
        }
      }
      .schedule-table__item--detail--item--name {
        background: #fff8bf;
        padding: var(--default-gap-4);
        width: fit-content;
      }
      .schedule-table__item--detail--item--channel {
        display: grid;
        gap: var(--default-gap-8);
      }
      .schedule-table__item--detail--item--channel--lineup {
        display: flex;
        gap: var(--default-gap-8);
        font-size: var(--schedule-table-channel-item-font-size);
        .schedule-table__item--detail--item--channel--lineup--item {
          padding: var(--default-gap-4);
          background: var(--schedule-table-channel-item-bg);
          color: #fff;
          &.is-online {
            --schedule-table-channel-item-bg: var(--default-color-online);
          }
          &.is-tel {
            --schedule-table-channel-item-bg: var(--default-color-tel);
          }
          &.is-shop {
            --schedule-table-channel-item-bg: var(--default-color-shop);
          }
        }
      }
    }
  }
  .schedule-table-notes {
    display: grid;
    justify-content: end;
    --schedule-table-notes-gap-top: var(--default-gap-8);
    margin-top: var(--schedule-table-notes-gap-top);
    .is-size-pc & {
      margin-top: calc(var(--schedule-table-notes-gap-top) * 2);
    }
  }
}