@charset "utf-8";
.list_materials{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
  justify-content: center; 
}
.list_materials a.cmn_border{
  padding: 24px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.list_materials > li .box_img{
  position: relative;
  order: 0;
  width: 200px;
  max-width: 100%;
  margin: 0 auto;  
}
.list_materials > li .box_img > .thumb{
  padding-top: 138.5%;
  border: solid 1px var(--color-border);
}
.list_materials > li .box_text{
  order: 1;
  margin-top: 20px;
}
.list_materials > li .box_text .cmn_cate{
  margin-bottom: 5px;
}
.list_materials > li .box_text .ttl_sub{
  display: block;
  color: var(--font-black);  
  font-size: 1.7rem;
  font-weight: 500;
}
.list_materials > li .cmn_btn{
  order: 2;
  margin-top: 17px;
}
.list_materials > li .cmn_btn>p{
  width: 100%;
  min-height: 48px;
  background-position: right 8px center;
}
.list_materials > li .txt_news{
  margin-top: 12px;
  line-height: 1.75;
}
@media (max-width :1024px) {
  .list_materials{
    grid-template-columns: repeat(3, 1fr);
  }  
}
@media screen and (max-width :834px) {
  .list_materials{
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    gap: 16px 8px;
  }
  .list_materials a.cmn_border{
    padding: 12px;
  }
  .list_materials > li .box_img{
    width: 120px;
  }
  .list_materials > li .box_text{
    margin-top: 10px;
  }
  .list_materials > li .box_text .cmn_cate{
    margin-bottom: 3px;
  }
  .list_materials > li .box_text .cmn_cate > span{
    font-size: 1.1rem;
    padding: 3px 8px 4px;
  }
  .list_materials > li .box_text .ttl_sub{
    font-size: 1.5rem;
  }
  .list_materials > li .cmn_btn{
    margin-top: 15px;
  }
  .list_materials > li .cmn_btn>p{
    min-height: 44px;
    background-size: 28px auto;
    padding: 5px 36px 5px 5px;
    justify-content: center;
  }

  .list_materials > li .txt_news{
    margin-top: 8px;
    font-size: 1.3rem;
    line-height: 1.692;
  }  
}