@charset "UTF-8";
/* ▼▼▼ 一覧ページ
====================================================== */
.feature {
  padding: 32px 0 0;
}
@media screen and (min-width: 769px) {
  .feature {
    padding: 64px 0 0;
  }
}

.top_img {
  margin-bottom: 40px;
}
@media screen and (min-width: 769px) {
  .top_img {
    max-width: 600px;
    margin: 0 auto 50px;
  }
}

.lead {
  color: #505050;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}
@media screen and (min-width: 769px) {
  .lead {
    max-width: 600px;
    margin: 0 auto 100px;
  }
}

.tab_area {
  --tab-gap:8px;
  --tab-col:2;
  --tab_width:calc((100% - (var(--tab-gap) * (var(--tab-col) - 1)))/var(--tab-col));
}
@media screen and (min-width: 769px) {
  .tab_area {
    --tab-gap:18px;
    --tab-col:4;
  }
}
.tab_area ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--tab-gap);
  margin-bottom: 55px;
}
@media screen and (min-width: 769px) {
  .tab_area ul {
    margin-bottom: 85px;
  }
}
.tab_area ul li {
  display: block;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  width: var(--tab_width);
  max-width: var(--tab_width);
}
@media screen and (min-width: 769px) {
  .tab_area ul li {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
  }
}
.tab_area ul li a {
  border: 1px solid #C1C1C1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  text-align: center;
  height: 100%;
  padding: 12px;
  font-size: 12px;
  line-height: 1.42;
}
@media screen and (min-width: 769px) {
  .tab_area ul li a {
    font-size: 15px;
    padding: 22px 12px;
  }
}
.tab_area ul li.active a {
  background-color: #716F6F;
  color: #fff;
  border-color: #716F6F;
}

.article_list .article_thumb {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.article_list .article_desc .ttl {
  color: #707070;
}
@media screen and (min-width: 769px) {
  .article_list {
    gap: 70px 30px;
  }
}