/* =============================================================
    Page
============================================================= */
/* topics
------------------------------------------------------------- */
.p-page-topics {
  padding-top: 4rem;
  font-weight: 500;
}

.p-topic-page{}

.p-topic-page--head{
  margin-bottom: 2rem;
}

.p-topic-page--body{
  font-size: 1.5rem;
  line-height: 1.6;
  font-weight: 500;
  text-align: left;
}

.p-topic-page--article{}
.p-topic-page--article__head{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem 1rem;
  padding: 0 0 2rem;
  border-bottom: 1px solid #707070;
  margin-bottom: 3rem;
}

.p-topic-page--article__head--time{
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 1.285714285714286;
  color: #484848;
}

.p-topic-page--article__head--icon{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 2.1rem;
  padding: 0 1rem;
  border: 1px solid #484848;
  border-radius: 1.4rem;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: #484848;
  line-height: 1;
}

.p-topic-page--article__head--icon.important{
  border-color: #E60012;
  color: #E60012;
}

.p-topic-page--article__head--title{
  display: block;
  width: 100%;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .p-page-topics {
    padding-top: 1rem;
    font-weight: 500;
  }
  
  .p-topic-page--head{ margin-bottom: 3rem; }
  .p-topic-page{padding: 0 1.6rem;}
  .p-topic-page--article__head--title{font-size: 1.8rem;}
}

.mainimg{
  display: block;
  width: 100%;
}

.mainimg:not(:last-child){margin-bottom: 2rem;}
.mainimg:not(:first-child){margin-top: 2rem;}