@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : topics.css
Description : トピックスページ
===================================================================== */
/* =====================================================================
    topics
======================================================================*/
.circle_anime_2 {
  top: 165rem;
}

.circle_anime_3 {
  top: 223rem;
}

.topics {
  padding-bottom: 12rem;
}

.topics_article {
  padding: 8rem calc(55 / 680 * 100%);
  background-color: #fff;
  border-radius: 4rem;
}

.topics_article:not(:last-child) {
  margin-bottom: 6.4rem;
}

@media screen and (max-width: 767px) {
  .topics_article {
    margin-left: calc(-35 / 680 * 100%);
    width: calc(750 / 680 * 100%);
  }
}

.topics_article > *:not(:last-child) {
  margin-bottom: 2em;
}

.topics_article header {
  padding-bottom: 1.2em;
  border-bottom: 1px solid #ffe600;
}

.topics_article header time {
  display: block;
  margin-bottom: 0.5em;
  font-family: "Spinnaker", sans-serif;
  font-size: 2.2rem;
}

.topics_article header time.new::after {
  content: 'NEW';
  display: inline-block;
  margin-left: 1em;
  font-family: "Spinnaker", sans-serif;
  font-size: 2.2rem;
  color: #ff72a3;
}

.topics_article header h3 {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.357;
}

.topics_article p {
  line-height: 1.833;
}

.topics_article figure img {
  border-radius: 3.2rem;
  overflow: hidden;
}

.topics_article h4,
.topics_article h5 {
  position: relative;
  padding-left: 1.2em;
  font-weight: 700;
  line-height: 1.833;
}

.topics_article h4::before,
.topics_article h5::before {
  content: '●';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  color: #ff72a3;
}

.topics_article h4 + p,
.topics_article h5 + p {
  margin-top: -1em;
  padding-left: 1.2em;
}

.topics_article h5::before {
  content: '・';
}

@media screen and (min-width: 768px) {
  .circle_anime_2 {
    top: 60rem;
  }
  .circle_anime_3 {
    top: 44rem;
  }
  .topics_article {
    padding: 8rem calc(112 / 1024 * 100%);
  }
  .topics_article > *:not(:last-child) {
    margin-bottom: 3em;
  }
  .topics_article header time {
    font-size: 1.6rem;
  }
  .topics_article header time.new::after {
    font-size: 1.4rem;
  }
  .topics_article header h3 {
    font-size: 1.8rem;
    line-height: 1.555;
  }
  .topics_article p {
    line-height: 1.625;
  }
  .topics_article figure {
    margin-left: auto;
    margin-right: auto;
    width: 55rem;
  }
  .topics_article h4,
  .topics_article h5 {
    line-height: 1.625;
  }
}
/*# sourceMappingURL=topics.css.map */