:root {
  --viewport-width: min(100vw, 1600px);
  --b: calc(var(--viewport-width) / 160);
}

/*
Theme Name: Twenty Twenty-one Child
Version: 1.6
Template: twentytwentyone
*/
#archive .h2title {
  padding-top: max(10rem, 100px);
}
#archive .category-filter {
  background-color: rgba(105, 222, 123, 0.15);
  color: #3A9447;
  padding: max(0.5rem, 5px);
  display: flex;
  gap: max(0.5rem, 5px);
  flex-wrap: wrap;
  justify-content: space-between;
  border-radius: max(0.5rem, 5px);
  max-width: 888px;
  margin: max(12rem, 100px) auto 0;
}
#archive .category-filter a {
  width: calc(100% / 4 - max(0.5rem, 5px));
  padding: max(1.5rem, 10px);
  text-align: center;
  border-radius: max(0.5rem, 5px);
}
@media screen and (max-width: 768px) {
  #archive .category-filter a {
    width: calc(100% / 2 - max(0.5rem, 5px));
  }
}
#archive .category-filter a:hover {
  background-color: rgba(58, 148, 71, 0.25);
}
#archive .category-filter a.is-active {
  box-shadow: 1px 1px 2px rgba(58, 148, 71, 0.55);
  background-color: #3A9447;
  color: #fff;
}
#archive .news__mainbox {
  display: flex;
  gap: max(3.9rem, 20px);
}
@media screen and (max-width: 1000px) {
  #archive .news__mainbox {
    flex-wrap: wrap;
  }
}
#archive .news-list {
  display: flex;
  flex-wrap: wrap;
  gap: max(11rem, 50px) 3%;
  margin: max(9.4rem, 50px) 0 max(15rem, 100px);
}
#archive .news__main {
  width: calc((100% - 6%)/3);
  margin-bottom: max(1rem, 10px);
  transition: 0.2s;
}
#archive .news__main:hover {
  opacity: 0.5;
}
@media screen and (max-width: 1000px) {
  #archive .news__main {
    width: calc((100% - 3%)/2);
  }
}
@media screen and (max-width: 768px) {
  #archive .news__main {
    width: 100%;
  }
}
#archive .news__main .title {
  color: #363636;
  display: block;
}
@media screen and (max-width: 550px) {
  #archive .news__main .title {
    display: none;
  }
}
#archive .news__main .title.sp {
  display: none;
}
@media screen and (max-width: 550px) {
  #archive .news__main .title.sp {
    display: block;
  }
}
#archive .news__flex {
  align-items: center;
  gap: max(2.6rem, 22px);
}
#archive .news__flex:last-of-type {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  #archive .news__flex {
    align-items: start;
  }
}
#archive .news__flex--img {
  width: 100%;
  aspect-ratio: 403/226;
}
#archive .news__flex--img img {
  border-radius: max(1rem, 10px);
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
#archive .news__flex--text {
  flex: 1;
  margin-top: max(2.4rem, 10px);
}
#archive .news__flex--text .texttop {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 1000px) {
  #archive .news__flex--text .texttop {
    justify-content: flex-start;
    gap: max(2rem, 20px);
  }
}
#archive .news__flex--text .texttop .date {
  color: #36363666;
  font-family: "Questrial", sans-serif;
}
#archive .news__flex--text .texttop .category {
  text-align: end;
  flex: 1;
}
#archive .news__flex--text .texttop .category .category-item {
  background-color: #3A9447;
  padding: max(0.1rem, 1px) max(1rem, 10px);
  border-radius: max(0.3rem, 3px);
  font-size: max(1.2rem, 12px);
  color: #fff;
  margin-left: 2%;
  display: inline-block;
}
#archive .nav-links {
  display: flex;
  justify-content: center;
  gap: max(5rem, 30px);
  margin-bottom: max(17rem, 100px);
}
#archive .nav-links a, #archive .nav-links span {
  font-size: max(1.6rem, 14px);
  font-family: "Questrial", sans-serif;
  color: #3A9447;
}
#archive .nav-links .current {
  position: relative;
}
#archive .nav-links .current::after {
  content: "";
  background-image: url(../../images/current-bg.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -51%);
  width: 550%;
  aspect-ratio: 33/62;
}