@charset "utf-8";

.article-list .inner {
  padding: 109px 0 140px;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.article-list .cate-list,
.article-list .cate-list .webgene-blog {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 30px;
}

.article-list .cate-list {
  position: relative;
}

.article-list .cate-list::before {
  content: "CATEGORY";
  font-family: var(--zenkaku);
  font-weight: 500;
  font-size: clamp(1.75rem, 0.42rem + 2.78vw, 3.75rem);
  color: #d9d3c7;
  position: absolute;
  bottom: calc(100% + 22px);
  left: 0;
}

.article-list .cate-list > a {
  font-weight: 500;
  font-size: clamp(1rem, 0.834rem + 0.35vw, 1.25rem);
  color: #603215;
  text-align: center;
  transition: 0.4s ease;
  border-radius: 50px;
  border: 1px solid #603215;
  padding: 14px 58px;
}

.article-list .cate-list .webgene-item {
  font-weight: 500;
  font-size: clamp(1rem, 0.834rem + 0.35vw, 1.25rem);
  color: #603215;
  text-align: center;
  transition: 0.4s ease;
  border-radius: 50px;
  border: 1px solid #603215;
}

.article-list .cate-list .webgene-item a {
  display: block;
  padding: 14px 58px;
  border-radius: 50px;transition: var(--default);
}

.article-list .cate-list a:hover {
  background: #fff;
}

.article-main .webgene-blog {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: flex-start;
}

.article-main .webgene-item {
  padding-bottom: 24px;
  background-image: linear-gradient(to right, #603215 3px, transparent 3px);
  background-size: 7px 1.5px;
  background-repeat: repeat-x;
  background-position: left bottom;
  width: 100%;
}

.article-main .webgeneLink {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.article-main .webgeneLink .date,
.article-detail .column .date {
  font-weight: 400;
  font-size: clamp(0.875rem, 0.709rem + 0.35vw, 1.125rem);
  color: #603215;
}

.article-main .webgeneLink .cate,
.article-detail .column .cate {
  font-weight: 400;
  font-size: clamp(0.875rem, 0.709rem + 0.35vw, 1.125rem);
  color: #603215;
  padding: 3px 23px;
  background-color: #fff;
  border-radius: 50px;
}

.article-main .webgeneLink .ItemTit,
.article-detail .inTit01 {
  font-weight: 500;
  font-size: clamp(1rem, 0.667rem + 0.69vw, 1.5rem);
  line-height: calc(28 / 16);
  color: #603215;
}
.article-main .webgeneLink .ItemTit {
  width: 100%;
}

.webgene-pagination {
  width: 100%;
}

.webgene-pagination ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.webgene-pagination ul .number a {
  width: 58px;
  height: 58px;
  font-weight: 500;
  font-size: clamp(1.125rem, 0.876rem + 0.52vw, 1.5rem);
  color: #603215;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--default);
  border: 1px solid #603215;
}

.webgene-pagination ul .number a:hover {
  color: #fff;
  background-color: #603215;
}

.article-detail .inner {
  padding: 0 0 140px;
  width: min(60%, 980px);
}

.article-detail .blogItemText {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}

.article-detail .column {
  display: flex;
  align-items: center;
  gap: 15px;
}

.article-detail .blogDetailImg {
  margin: 0 auto 40px;
  border-radius: 20px;
}

.article-detail .blogDetailImg img {
  border-radius: 20px;
}

.article-detail .txt01 {
  font-weight: 500;
  font-size: 16px;
  line-height: calc(28 / 16);
  color: #603215;
}

.article-detail .txt01 h2 {
  padding: 1rem 0.5rem 1rem 1.5rem;
  border-left: 6px solid #583f2f;
  background-color: #fff;
  font-size: clamp(1rem, 0.667rem + 0.69vw, 1.5rem);
  line-height: 1.4;
}

.article-detail .morebtn {
  margin: 120px auto 0;
  max-width: 361px;
  width: 100%;
  display: block;
}

@media (max-width: 767px) {
  .p-fv .inner {
    padding-bottom: 102px;
  }
  .article-list .inner {
    padding: 20px 0 40px;
    gap: 80px;
    width: 80%;
  }

  .article-list .cate-list > a,
  .article-list .cate-list .webgene-item a {
    padding: 5px 23px;
  }

  .article-list .cate-list,
  .article-list .cate-list .webgene-blog {
    gap: 10px;
  }

  .article-main .webgene-blog {
    gap: 40px;
  }

  .webgene-pagination {
    margin-top: 50px;
  }

  .webgene-pagination ul .number a {
    width: 44px;
    height: 44px;
  }

  .article-detail .inner {
    padding: 0 0 80px;
    width: 80%;
  }

  .article-detail .morebtn {
    max-width: 279px;
  }

  .article-detail .txt01 h2 {
    padding: 1rem 0.5rem 1rem 1rem;
  }
}