:root {
  --kc-color-white: #fff;
  --kc-color-text: #414141;
  --kc-color-tag: #C9C9C9;
  --kc-color-date-bg: #9A9A9A;
  --kc-opacity-hover: 0.7;
  --kc-color-overlay: rgba(0, 0, 0, 0.4);
}

/* ----- 共通 ----- */

[v-cloak] {
  display: none;
}

.kc-spinner {
  margin: 32px auto 64px;
  text-align: center;
}

.kc-image.--finished::before {
  display: flex;
  justify-content: center;
  align-items: center;
  content: "このイベントは\A終了しました";
  white-space: pre;
  text-align: center;
  position: absolute;
  font-size: 20px;
  line-height: 1.8;
  z-index: 10;
  color: var(--kc-color-white);
  width: 100%;
  height: 100%;
  background-color: var(--kc-color-overlay);
}

.kc-none {
  text-align: center;
  padding: 2em 0;
}

/* ----- トップページ ----- */

.kc-content {
  overflow: hidden;
  padding-top: 20px;
}


.kc-cards {
  height: auto !important;
  list-style: none;
}

.kc-card {
  position: relative;
  height: auto !important;
  background-color: var(--kc-color-white);
}

.kc-link {
  display: flex;
  justify-content: space-between;
  color: var(--kc-color-text);
  padding: 2em 1em 1em;
}

.kc-image {
  aspect-ratio: 4 / 3;
  width: 37%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  flex-shrink: 0;
  overflow: hidden;
}

.kc-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}


.kc-info {
  width: 60%;
}

/* タグ（イベントタイプ & 開催形式） */

.kc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kc-type,
.kc-format {
  padding: .5em;
  line-height: 1;
  font-size: 12px;
}

.kc-type {
  color: var(--kc-color-white);
  background-color: var(--kc-color-tag);
  border: 1px solid var(--kc-color-tag);
}

.kc-format {
  color: var(--kc-color-tag);
  background-color: transparent;
  border: 1px solid var(--kc-color-tag);
}


/* イベント名 */

.kc-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: .6em 0;
  line-height: 1.6;
  font-size: 15px;
}

/* 開催日 & 場所 */

.kc-date,
.kc-address {
  line-height: 1.4;
  font-size: 14px;
}

.kc-date {
  position: absolute;
  top: -10px;
  left: 0;
  z-index: 10;
  line-height: 1;
  background-color: var(--kc-color-date-bg);
  color: var(--kc-color-white);
  padding: 0.6em;
}

.kc-date br {
  display: none;
}


@media screen and (max-width: 800px) {
  .kc-cards {
    flex-direction: column;
    gap: 30px;
  }

  .kc-card {
    width: 100% !important;
  }

  .kc-link {
    padding: 1.4em .6em .6em;
  }

  .kc-image {
    width: 43%;
  }

  .kc-info {
    width: 53%;
  }

  .kc-type,
  .kc-format {
    font-size: 10px;
  }

  .kc-name {
    font-size: 13px;
  }

  .kc-date,
  .kc-address {
    font-size: 12px;
  }

}





/* ----- イベント一覧 ----- */

.kc-cards.-all {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 30px;
}

.kc-card.-all {
  background-color: transparent;
}

.kc-link.-all {
  flex-direction: column;
  padding: 0;
}

.kc-image.-all {
  width: 100%;
}

.kc-info.-all {
  width: 100%;
  margin-top: 1em;
}

@media screen and (max-width: 800px) {
  .kc-cards.-all {
    grid-template-columns: repeat(1, 1fr);
    gap: 60px;
  }
}