/**
 * ワークショップフロントページのスタイル
 */

/** 文字列太字 */
.seminar_el_span__fontWeightBold {
  font-weight: bold;
}

/** 「重要」文字列の色付け */
.seminar_el_span__colorScarlet {
  color: var(--col_scarlet);
}

/** リストスタイル */
.seminar_el_ul__liststyleDisc {
  list-style-type: disc;
  padding-left: 2rem;
}

/** h1 */
.seminar_el_lv1Heading {
  margin: 6.5rem auto 3.05rem;
}

/** h3 */
.seminar_el_lv3Heading {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

/** ワークショップ見出し **/
.seminar_bl_workshopHeader {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 1.6rem;
  text-align: left;
}

/* ワークショップ見出しがない場合は、タグ自体表示させない */
.seminar_bl_workshopHeader:empty {
  display: none;
}

/** プログラム日程 */
.seminar_bl_scheduleContainer > div {
  border: thin solid var(--col_mainCol);
  border-bottom: none;
}

.seminar_bl_scheduleContainer > div:nth-last-of-type(1) {
  border: thin solid var(--col_mainCol);
}

.seminar_bl_scheduleBox {
  display: grid;
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
}

.seminar_bl_scheduleBox > div {
  padding: 2rem 1.6rem;
}

/** タイムテーブル **/
.seminar_bl_scheduleBox > div:nth-of-type(2n+1):not(:nth-of-type(1)) {
  background-color: #fff;
}

.seminar_bl_scheduleBox:nth-last-of-type(1) {
  border: thin solid var(--col_mainCol);
}

/** プログラム日程　回 */
.seminar_bl_scheduleCount {
  font-size: 1.6rem;
}

/** 振込先 */
.seminar_bl_furikomisaki {
  background-color: #fff;
  border: thin solid var(--col_gray70);
  font-size: 1.8rem;
  padding: 2rem;
}

/* 絞り込み検索フォーム */
.seminar_bl_searchForm {
  align-items: center;
  background-color: var(--col_white);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  margin-bottom: .5rem;
  margin-top: 8rem;
  width: 100%;
}

/* 絞り込み検索フォーム　見出し */
.seminar_el_lv2Heading_searchForm {
  align-items: center;
  background-color: var(--col_seminarSearch);
  border-radius: 8px 8px 0 0;
  color: var(--col_white);
  display: flex;
  font-size: 2.8rem;
  font-weight: bold;
  gap: 20px;
  justify-content: center;
  line-height: 1;
  padding: 1.5rem;
  text-align: center;
  width: 100%;
}

.seminar_el_lv2Heading_searchForm::before {
  aspect-ratio: 1 / 1;
  background-image: url('/common-img/icon_search_pc.svg');
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  height: 3.3rem;
  width: 3.3rem;
}

.seminar_bl_searchForm > form {
  display: flex;
  flex-direction: column;
  padding: 30px 15px;
  width: 100%;
}

.seminar_bl_taxonomy_condition {
  margin-bottom: 30px;
}

.seminar_bl_taxonomy_condition:last-of-type {
  margin-bottom: 40px;
}

/* 絞り込み検索フォーム 分類・タグ */
.seminar_bl_taxonomy_condition .seminar_bl_taxonomyUnit {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 9px 10px;
  justify-content: flex-start;
}

.seminar_bl_taxonomy_label {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 15px;
  text-align: left;
  width: 100%;
}

.seminar_el_all_button {
  background-color: gray;
  border: none;
  color: #fff;
  flex: 0 0 auto;
  font-size: 1.4rem;
  margin-right: 16px;
  width: 60px;
}

.seminar_bl_taxonomy_condition input {
  display: none;
}

.seminar_bl_taxonomy_condition label {
  border-radius: 1.9rem;
  cursor: pointer;
  padding: .7rem 1rem;
}

.seminar_bl_taxonomy_condition input:checked + label {
  font-weight: bold;
}

.seminar_el_workshop-category {
  background-color: var(--col_grayE3);
}

.seminar_bl_taxonomy_condition input:checked + .seminar_el_workshop-category {
  background-color: var(--col_grayB9);
}

.seminar_el_workshop-tag {
  background-color: var(--col_tag);
}

.seminar_bl_taxonomy_condition input:checked + .seminar_el_workshop-tag {
  background-color: var(--col_tag_selected);
}

/* 絞り込み検索フォーム　ボタン */
.seminar_el_search_submit {
  align-items: center;
  background-color: var(--col_seminarSearch);
  border-radius: 4rem;
  color: var(--col_white);
  cursor: pointer;
  display: flex;
  font-size: 2rem;
  font-weight: bold;
  justify-content: center;
  margin: 0 auto;
  padding: 2rem 1rem;
  transition: .4s ease-in-out;
  width: 58rem;
}

.seminar_el_search_submit:hover {
  background-color: var(--col_seminarSearch_hover);
}

/* ワークショップ一覧カード　詳細 */
.seminar_bl_cardWS_inner {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 20px;
  justify-content: flex-start;
  width: 100%;
}

/* ワークショップ一覧カード　サムネイル */
.seminar_bl_cardWS_thumbnail {
  height: 11rem;
  width: 16rem;
}

.seminar_bl_cardWS_thumbnail source,
.seminar_bl_cardWS_thumbnail img {
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

/* 分類・タグ */
.seminar_bl_tagWrapper {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 9px 10px;
  justify-content: flex-start;
}

/* ワークショップ一覧カード　説明文・分類・タグ・リンク */
.seminar_bl_cardWS_contents {
  align-content: space-between;
  display: flex;
  flex-direction: column;
  gap: 17px;
  justify-content: space-between;
  min-height: 11rem;
  width: calc(100% - 16rem);
}

/* ワークショップ一覧カード　説明文・分類・タグ */
.seminar_bl_cardWS_detail {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: flex-start;
}

/* ワークショップ一覧カード　リンク */
.seminar_el_cardReadMore {
  font-size: 1.6rem;
}

/* 検索結果一覧 */
.seminar_bl_searchedUnit {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-weight: bold;
  gap: 15px 10px;
  justify-content: flex-start;
  margin: 3.05rem auto 0;
  width: fit-content;
}

.seminar_el_tag_searched,
.seminar_el_workshop-tag_searched {
  font-size: 1.6rem;
}

.seminar_el_workshop-tag_searched:hover {
  background-color: var(--col_tag_selected);
}

.seminar_el_txt_searched {
  font-size: 2rem;
}

/*
* ワークショップ詳細
*/
/* ワークショップアイキャッチ・タイトル */
.seminar_bl_fv {
  margin: 0 auto;
  position: relative;
  width: 100%;
}

/* サムネイル画像 */
.workshop_bl_thumbnail_fv {
  aspect-ratio: 39 / 20;
  height: auto;
  width: 100%;
}

.workshop_bl_thumbnail_fv source,
.workshop_bl_thumbnail_fv img {
  aspect-ratio: 39 / 20;
  object-fit: cover;
  width: 100%;
}

/* タイトル囲み */
.seminar_bl_WS_ttlWrapper {
  align-items: flex-start;
  background-color: var(--col_lightGold);
  bottom: 0;
  display: flex;
  flex-direction: column;
  /* ワークショップ見出し文言がない場合を想定してgapを0にし、余白はマージンで設定 */
  gap: 0;
  justify-content: flex-start;
  left: 0;
  opacity: .9;
  padding: 15px 30px;
  position: absolute;
  width: 100%;
}

/* h1見出し・背景色 */
.seminar_el_lv1Heading_workshop {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  font-size: 2.4rem;
  font-weight: bold;
  gap: 15px;
  justify-content: flex-start;
  line-height: 1;
  margin-bottom: 16px;
  text-align: left;
}

.seminar_el_lv1Heading_workshop:after {
  background-color: var(--col_mainCol);
  content: '';
  height: 1px;
  width: 10rem;
}

/* 分類・タグ */
.seminar_bl_tagWrapper_workshop {
  gap: 10px;
}

.seminar_el_tag_workshop {
  font-size: 1.3rem;
}

/* 満席表示 */
.seminar_el_badge_full {
  background-color: var(--col_scarlet);
  border-radius: 19px;
  color: var(--col_white);
  font-size: 1.4rem;
  line-height: 1;
  margin-right: 7px;
  padding: 3px 7px;
}

/* 開催スケジュールタイムテーブル */
.seminar_bl_scheduleTimes {
  display: flex;
  column-gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.seminar_bl_scheduleTimes:not(:last-of-type) {
  border-bottom: thin solid lightgray;
  padding-bottom: 2rem;
}

/*===============================================
●スマホ用（896px未満）
===============================================*/
@media screen and (max-width:896px) {
  /** h1 */
  .seminar_el_lv1Heading {
    margin: 6.5rem auto .05rem;
  }

  /** ワークショップ見出し **/
  .seminar_bl_workshopHeader {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 15px;
  }

  /** プログラム日程 */
  .seminar_bl_scheduleContainer > div {
    border-bottom: solid thin var(--col_mainCol);
    margin-bottom: 1px;
  }

  .seminar_bl_scheduleBox {
    border-width: 2px;
    grid-template: repeat(3, auto) / 56px 1fr;
  }

  /** プログラム日程　回 */
  .seminar_bl_scheduleBox > div.seminar_bl_scheduleCount {
    padding-right: 0;
  }

  .seminar_bl_scheduleThemaBox {
    border-top: thin solid var(--col_mainCol);
    grid-column-end: 3;
    grid-column-start: 1;
    grid-row-start: 2;
  }

  .seminar_bl_scheduleInCharge {
    border-top: thin solid var(--col_mainCol);
    grid-column-end: 3;
    grid-column-start: 1;
    grid-row-start: 3;
  }

  /* 絞り込み検索フォーム */
  .seminar_bl_searchForm {
    margin-top: 10rem;
  }

  .seminar_bl_taxonomy_condition:last-of-type {
    margin-bottom: 30px;
  }

  /* 絞り込み検索フォーム　見出し */
  .seminar_el_lv2Heading_searchForm {
    font-size: 2rem;
    gap: 6px;
  }

  .seminar_el_lv2Heading_searchForm::before {
    background-image: url('/common-img/icon_search_sp.svg');
    height: 2rem;
    width: 2rem;
  }

  /* 絞り込み検索フォーム 分類・タグ */
  .seminar_bl_taxonomy_condition .seminar_bl_taxonomyUnit {
    gap: 15px 8px;
  }

  .seminar_bl_taxonomy_label {
    font-size: 1.6rem;
  }

  .seminar_el_workshop-tag {
    margin-right: 4px;
  }

  .seminar_el_workshop-tag:last-of-type {
    margin-right: 0;
  }

  /* 絞り込み検索フォーム　ボタン */
  .seminar_el_search_submit {
    width: min(100%, 58rem);
  }

  /* ワークショップ一覧カード　詳細 */
  .seminar_bl_cardWS_inner {
    align-items: center;
    flex-direction: column;
    gap: 15px;
  }

  /* ワークショップ一覧カード　サムネイル */
  .seminar_bl_cardWS_thumbnail {
    height: auto;
    width: min(100%, 40rem);
  }

  .seminar_bl_cardWS_thumbnail source,
  .seminar_bl_cardWS_thumbnail img {
    aspect-ratio: 61 / 42;
    width: 100%;
  }

  /* ワークショップ一覧カード　説明文・分類・タグ・リンク */
  .seminar_bl_cardWS_contents {
    align-content: center;
    height: auto;
    justify-content: space-between;
    width: 100%;
  }

  /* ワークショップ一覧カード　説明文・分類・タグ */
  .seminar_bl_cardWS_detail {
    gap: 15px;
  }

  /*
* ワークショップ詳細
*/
  /* ワークショップアイキャッチ・タイトル */
  /* サムネイル画像 */
  .workshop_bl_thumbnail_fv {
    aspect-ratio: 335 / 172;
    width: 100%;
  }

  .workshop_bl_thumbnail_fv source,
  .workshop_bl_thumbnail_fv img {
    aspect-ratio: 335 / 172;
  }

  /* タイトル囲み */
  .seminar_bl_WS_ttlWrapper {
    bottom: unset;
    left: unset;
    opacity: 1;
    padding: 15px;
    position: relative;
  }

  /* h1見出し・背景色 */
  .seminar_el_lv1Heading_workshop {
    font-size: 1.6rem;
    line-height: 1.5;
    margin-bottom: 15px;
  }

  /* 分類・タグ */
  .seminar_bl_tagWrapper_workshop {
    gap: 14px;
  }

  .seminar_bl_tagWrapper_workshop .seminar_el_tag_cloud_workshop:first-of-type {
    margin-left: 2px;
  }

  /* 満席表示 */
  .seminar_el_badge_full {
    font-size: 1.2rem;
    margin-right: 5px;
  }
}

/*===============================================
●PC・タブレット用（897px以上）
===============================================*/
@media screen and (min-width:897px) {
  /** プログラム日程 */
  .seminar_bl_scheduleBox {
    column-gap: 4rem;
    grid-template: 1fr / 8rem 1fr 2fr 184px;
  }

  /** タイムテーブル **/
  .seminar_bl_scheduleBox > :nth-of-type(1) {
    background-color: #fff;
  }

  /** プログラム日程　回 */
  .seminar_bl_scheduleCount {
    font-size: 2rem;
  }
}