@charset "UTF-8";
/* ▼▼▼ 一覧ページ
====================================================== */
.page_ttl .ttl_head:before {
  content: "FEATURE";
}

.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: 700px;
    margin: 0 auto 50px;
  }
}

.lead {
  color: #505050;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}
@media screen and (min-width: 769px) {
  .lead {
    max-width: 700px;
    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: flex;
  justify-content: center;
  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;
  flex: 0 0 50%;
  width: var(--tab_width);
  max-width: var(--tab_width);
}
@media screen and (min-width: 769px) {
  .tab_area ul li {
    flex: 0 0 25%;
  }
}
.tab_area ul li a {
  border: 1px solid #C1C1C1;
  display: flex;
  justify-content: center;
  align-items: 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;
  }
}
.tab_area ul li.active a {
  background-color: #716F6F;
  color: #fff;
  border-color: #716F6F;
}

.article_list {
  gap: 32px 13px;
}
.article_list li .article_thumb {
  box-shadow: none;
  padding-top: 100%;
}
.article_list li .date_new_icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 17px;
  background-color: #D41265;
  color: #fff;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  position: absolute;
  left: 0;
  bottom: -8px;
}
.article_list li .article_desc .shop {
  color: #707070;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 5px;
}
@media screen and (min-width: 769px) {
  .article_list {
    gap: 70px 30px;
  }
  .article_list li .date_new_icon {
    width: 45px;
    height: 25px;
    font-size: 14px;
    bottom: -10px;
  }
  .article_list li .article_desc .shop {
    font-size: 14px;
    margin-top: 8px;
    line-height: 1.5;
  }
}