@charset "UTF-8";
/* ==========================================================================
   P05 セミナー・研究会
   前半：P05 系ページ（P05-0／P05-1／P05-3）で共有する部品
   後半：P05-0 セミナー・研究会（ワイヤー：P05-0 セミナー・研究会.dc.html）
   見た目は design/P00・P01 に揃える（次回開催カード＝P00「次回研究会」）
   ========================================================================== */

/* --------------------------------------------------------------------------
   共有：ページタイトル（P01-1 タイトル型：kicker＋H1＋リード）
   -------------------------------------------------------------------------- */
.lab-seminar-title {
  padding: 96px 0;

  /* タブレットは P01 ほか各ページのタイトルと同じ 64px */
  @media (max-width: 1023px) {
    padding: 64px 0;
  }

  @media (max-width: 767px) {
    padding: 48px 0 32px;
  }

  & .lab-seminar-title__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;

    @media (max-width: 767px) {
      gap: 16px;
    }
  }

  & .lab-seminar-title__lead {
    max-width: 40em;
    color: var(--lab-ink-3);
  }
}

/* --------------------------------------------------------------------------
   共有：開催概要カード（日時／形式／テーマ／講師 ＋ 右列）
   P00「次回研究会」と同じ白カード・.lab-dl・線ボタン
   -------------------------------------------------------------------------- */
.lab-seminar-session {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  column-gap: 64px;
  align-items: end;
  padding: 48px;
  border-radius: var(--lab-radius-md);
  background: var(--lab-white);

  @media (max-width: 1023px) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
    padding: 40px;
  }

  @media (max-width: 767px) {
    row-gap: 24px;
    padding: 24px;
  }

  /* 白い面の上に置くとき */
  &.lab-seminar-session--bordered {
    border: 1px solid var(--lab-line);
  }

  & .lab-seminar-session__side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;

    /* タブレットはボタンと明示文の幅をそろえて左寄せ */
    @media (max-width: 1023px) {
      width: max-content;
      max-width: 100%;
    }

    @media (max-width: 767px) {
      width: auto;
    }
  }
}

/* 共有：次回未定の空状態（P00 と同じ：線 #6F6F6F の枠＋「次回開催は準備中」） */
.lab-seminar-empty {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding: 48px;
  border: 1px solid var(--lab-ink-3);

  @media (max-width: 767px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
  }

  & .lab-seminar-empty__text {
    font-size: var(--lab-fs-title);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .04em;

    @media (max-width: 767px) {
      font-size: var(--lab-fs-lead);
    }
  }
}

/* --------------------------------------------------------------------------
   共有：明示文「この登録はフェロー登録を兼ねます」（bg-2＋紺 700）
   -------------------------------------------------------------------------- */
.lab-seminar-fellow-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--lab-radius-md);
  background: var(--lab-bg-2);
  font-size: var(--lab-fs-small);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--lab-navy);
}

/* 「!」の丸アイコン（.lab-notice の i と同じ組み） */
.lab-seminar-alert {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: var(--lab-fs-label);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;

  &.lab-seminar-alert--lg {
    width: 32px;
    height: 32px;
    font-size: var(--lab-fs-body);

    @media (max-width: 767px) {
      width: 24px;
      height: 24px;
      font-size: var(--lab-fs-small);
    }
  }
}

/* --------------------------------------------------------------------------
   共有：フェロー限定ラベル（bg-2＋紺 12px 700）と鍵アイコン
   -------------------------------------------------------------------------- */
.lab-seminar-fellow-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--lab-radius-sm);
  background: var(--lab-bg-2);
  font-size: var(--lab-fs-label);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--lab-navy);
  white-space: nowrap;
}

.lab-seminar-lock {
  flex: none;
  width: 12px;
  height: 12px;
}

/* --------------------------------------------------------------------------
   共有：過去回カード（回・日付／テーマ／概要／資料リンク・アーカイブ動画ボタン。セミナーはサムネイル付き）
   -------------------------------------------------------------------------- */
.lab-seminar-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lab-gutter);
  align-items: stretch;

  @media (max-width: 1023px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (max-width: 767px) {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  /* サムネイル付き（セミナー）：2列 */
  &.lab-seminar-archive-grid--media {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    @media (max-width: 767px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

.lab-seminar-archive-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 32px;
  border: 1px solid var(--lab-line);
  border-radius: var(--lab-radius-md);
  background: var(--lab-white);

  @media (max-width: 1023px) {
    padding: 24px;
  }

  & .lab-seminar-archive-card__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 28px;
  }

  & .lab-seminar-archive-card__date {
    font-size: var(--lab-fs-label);
    line-height: 1.4;
    letter-spacing: .08em;
    color: var(--lab-ink-3);
  }

  & .lab-seminar-archive-card__no {
    margin-right: 12px;
    font-weight: 700;
    color: var(--lab-ink-2);
  }

  & .lab-seminar-archive-card__title {
    font-size: var(--lab-fs-title);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .04em;
    overflow-wrap: anywhere;

    @media (max-width: 1023px) {
      font-size: var(--lab-fs-lead);
    }
  }

  & .lab-seminar-archive-card__text {
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
    color: var(--lab-ink-3);
  }

  & .lab-seminar-archive-card__password {
    padding: 8px 12px;
    border-radius: var(--lab-radius-sm);
    background: var(--lab-bg-1);
    font-size: var(--lab-fs-small);
    line-height: 1.6;
    letter-spacing: .04em;
    color: var(--lab-ink-2);

    /* I（アイ）と l（エル）などを見分けやすい等幅で */
    & span {
      font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      font-weight: 700;
      overflow-wrap: anywhere;
      user-select: all;
    }
  }

  & .lab-seminar-archive-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 16px;
    margin-top: auto;
  }

  & .lab-seminar-archive-card__gate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;

    @media (max-width: 767px) {
      flex: 1 1 100%;
    }
  }

  & .lab-seminar-archive-card__need {
    font-size: var(--lab-fs-label);
    line-height: 1.6;
    letter-spacing: .04em;
    color: var(--lab-ink-3);
  }

  /* サムネイル付き（セミナー）：サムネを上に大きく、その下にタイトル（中央）・概要・ボタン（中央） */
  &.lab-seminar-archive-card--media {
    padding: 24px;

    & .lab-seminar-archive-card__thumb {
      display: block;
      aspect-ratio: 1440 / 756;
      margin-bottom: 8px;
      overflow: hidden;
      border: 1px solid var(--lab-line);
      border-radius: var(--lab-radius-sm);
      background: var(--lab-bg-1);

      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    & .lab-seminar-archive-card__title {
      text-align: center;
    }

    & .lab-seminar-archive-card__actions {
      justify-content: center;
      padding-top: 12px;
    }

    /* 未登録の「フェロー登録が必要」はボタンの下に */
    & .lab-seminar-archive-card__gate {
      flex-direction: column;
    }
  }
}

/* 共有：アーカイブ準備中（グリッドの代わり） */
.lab-seminar-archive-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  border: 1px solid var(--lab-ink-3);

  @media (max-width: 767px) {
    padding: 32px 24px;
  }

  & .lab-seminar-archive-empty__text {
    font-size: var(--lab-fs-title);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .04em;

    @media (max-width: 767px) {
      font-size: var(--lab-fs-lead);
    }
  }
}

/* ==========================================================================
   P05-0 セミナー・研究会
   ========================================================================== */

/* --------------------------------------------------------------------------
   P05-0-2 次回開催（大カード）
   白の面。上のタイトル帯の下余白を区切りにし、下の「研究会について」（bg-1）と分ける
   -------------------------------------------------------------------------- */
.lab-seminar-next {
  padding: 0 0 128px;

  @media (max-width: 1023px) {
    padding-bottom: 96px;
  }

  @media (max-width: 767px) {
    padding-bottom: 64px;
  }

  & .lab-seminar-next__card {
    margin-top: 48px;

    @media (max-width: 767px) {
      margin-top: 32px;
    }
  }
}

/* --------------------------------------------------------------------------
   P05-0-4 研究会について（活動内容・参加メリット＋数値）
   -------------------------------------------------------------------------- */
.lab-seminar-about {
  padding: 128px 0;
  background: var(--lab-bg-1);

  @media (max-width: 1023px) {
    padding: 96px 0;
  }

  @media (max-width: 767px) {
    padding: 64px 0;
  }

  & .lab-seminar-about__more {
    margin-top: 16px;
  }

  & .lab-seminar-about__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lab-gutter);
    margin-top: 48px;

    @media (max-width: 767px) {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
      margin-top: 32px;
    }
  }

  & .lab-seminar-about__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 48px;
    border-radius: var(--lab-radius-md);
    background: var(--lab-white);

    @media (max-width: 1023px) {
      padding: 32px;
    }

    @media (max-width: 767px) {
      gap: 12px;
      padding: 24px;
    }
  }

  & .lab-seminar-about__card-title {
    font-size: var(--lab-fs-h4);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .04em;
    color: var(--lab-navy);

    @media (max-width: 767px) {
      font-size: var(--lab-fs-title);
    }
  }

  & .lab-seminar-about__card-text {
    display: flex;
    flex-direction: column;
    max-width: 40em;
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
    color: var(--lab-ink-3);
  }
}

/* --------------------------------------------------------------------------
   P05-0-5 アーカイブ（セミナー／研究会 × 過去回カード3枚）
   -------------------------------------------------------------------------- */
.lab-seminar-archive {
  padding: 128px 0;

  @media (max-width: 1023px) {
    padding: 96px 0;
  }

  @media (max-width: 767px) {
    padding: 64px 0;
  }

  /* セミナー／研究会のグループ（見出し＋カード3枚） */
  & .lab-seminar-archive-group {
    margin-top: 48px;

    @media (max-width: 767px) {
      margin-top: 32px;
    }

    & + .lab-seminar-archive-group {
      margin-top: 64px;

      @media (max-width: 767px) {
        margin-top: 48px;
      }
    }
  }

  & .lab-seminar-archive-group__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--lab-line);
  }

  & .lab-seminar-archive-group__title {
    font-size: var(--lab-fs-h4);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;

    @media (max-width: 767px) {
      font-size: var(--lab-fs-title);
    }
  }

  & .lab-seminar-archive-group__grid {
    margin-top: 24px;
  }

  & .lab-seminar-archive__more {
    margin-top: 16px;
  }
}

/* 次回開催の「形式」など、値が複数行のとき */
.lab-seminar-dd-list {
  margin-top: 4px;

  & li {
    position: relative;
    padding-left: 1em;

    &::before {
      content: '・';
      position: absolute;
      left: 0;
    }
  }
}