/* チャンネル一覧ページ */
.channel-archive-desc {
  margin: 0;
  padding: 0 72px;
  font-size: 1em;
  line-height: 1.75;
  color: rgb(255, 255, 255, 0.9);
}

.channel-list {
  display: flex;
  flex-direction: column;
  row-gap: 58px;
  margin: 64px auto 0;
  padding: 0 72px;
}

.channel-list .channel-block h3 {
  position: relative;
  padding-left: 27px;
  color: #fff;
  font-size: 1.5em;
  font-weight: 600;
}

.channel-list .channel-block h3::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: #8cc640;
  content: "";
}

.channel-list .channel-block ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 17px;
  margin: 0;
  padding: 0;
}

.channel-list .channel-block h3 + ul {
  margin: 30px 0 0;
}

.channel-list .channel-block ul li {
  display: flex;
  justify-content: space-between;
  width: calc(100% / 3 - 12px);
}

.channel-list .channel-block ul li a {
  display: flex;
  align-items: center;
  column-gap: 20px;
  color: #333;
  background-color: #fff;
  width: 100%;
  padding: 10px 16px 17px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.channel-list .channel-block ul li a:hover {
  color: #fff;
  background-color: #8cc640;
}

.channel-list .channel-block ul li a figure {
  width: 50px;
  aspect-ratio: 1/1;
  border: 1px solid #eaeaea;
  border-radius: 50%;
  background-color: #fff;
  overflow: hidden;
}

.channel-list .channel-block ul li a figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.channel-list .channel-block ul li a .channel-list-info {
  display: flex;
  flex-direction: column;
  row-gap: 3px;
  flex: 1;
}

.channel-list .channel-block ul li a .channel-list-info .channel-list-number {
  margin: 0;
  font-size: 0.8125em;
  line-height: 1.5;
}

.channel-list .channel-block ul li a .channel-list-info .channel-list-name {
  margin: 0;
  font-size: 0.9375em;
  font-weight: 600;
  line-height: 1.5;
}

@media screen and (max-width: 1400px) {
  .channel-list .channel-block ul li {
    width: calc(100% / 2 - 9px);
  }
}
@media screen and (max-width: 768px) {
  .channel-archive-desc {
    padding: 0 20px;
    font-size: 0.9375em;
  }

  .channel-archive-filter ul {
    display: flex;
    align-items: center;
    column-gap: 8px;
    margin: 24px 0 0;
    padding: 0 20px;
    overflow-x: auto;
    white-space: nowrap;
  }

  .channel-archive-filter ul li a {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.8125em;
    font-weight: 600;
    line-height: 1.25;
    color: #333;
    background-color: #fff;
    text-decoration: none;
  }

  .channel-archive-filter ul li.is-current a {
    background-color: rgb(255, 255, 255, 0.1);
    color: #fff;
  }

  .channel-list {
    row-gap: 28px;
    margin: 40px auto 0;
    padding: 0 20px;
  }

  .channel-list .channel-block h3 {
    padding-left: 14px;
    font-size: 1.0625em;
  }

  .channel-list .channel-block h3::before {
    width: 2px;
  }

  .channel-list .channel-block ul {
    gap: 12px;
  }

  .channel-list .channel-block h3 + ul {
    margin: 16px 0 0;
  }

  .channel-list .channel-block ul li {
    width: 100%;
  }

  .channel-list .channel-block ul li a {
    column-gap: 12px;
    padding: 12px 15px 18px;
  }

  .channel-list .channel-block ul li a .channel-list-info .channel-list-number {
    font-size: 0.8125em;
  }

  .channel-list .channel-block ul li a .channel-list-info .channel-list-name {
    font-size: 0.875em;
  }
}

/* チャンネル詳細ページ */
.channel-guide-link {
  margin: 30px 0 0;
}

.channel-guide-link a {
  display: block;
  width: fit-content;
  position: relative;
  padding: 9px 60px 11px 68px;
  font-size: 1em;
  font-weight: 500;
  border-radius: 8px;
  color: #fff;
  background-color: #8cc63f;
  text-decoration: none;
  transition: all 0.3s ease;
}

.channel-guide-link a:hover {
  background-color: #7bad37;
}

.channel-guide-link a::before,
.channel-guide-link a::after {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  content: "";
}

.channel-guide-link a::before {
  left: 34px;
  background: url(/assets/images/icon_schedule.svg) center center / cover no-repeat;
}

.channel-guide-link a::after {
  right: 32px;
  background: url(/assets/images/icon_outer.svg) center center / cover no-repeat;
}

@media screen and (max-width: 768px) {
  .channel-guide-link {
    margin: 28px 0 0;
  }

  .channel-guide-link a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    padding: 5px 20px;
    font-size: 0.875em;
  }

  .channel-guide-link a::before,
  .channel-guide-link a::after {
    width: 18px;
    height: 18px;
  }

  .channel-guide-link a::before {
    left: calc(50% - 50px);
  }

  .channel-guide-link a::after {
    right: calc(50% - 42px);
  }
}