@charset "UTF-8";
@font-face {
  font-family: 'Noto Sans JP';
  src: url("../font/Noto_Sans_JP/NotoSansJP-Thin.woff2") format("woff2"), url("../font/Noto_Sans_JP/NotoSansJP-Thin.woff") format("woff"), url("../font/Noto_Sans_JP/NotoSansJP-Thin.ttf") format("truetype");
  font-weight: 100;
  font-display: swap; }
.works_section_area {
  padding: 30px 10px; }
  @media screen and (min-width: 576px) {
    .works_section_area {
      padding: 30px 10px; } }
  @media screen and (min-width: 768px) {
    .works_section_area {
      padding: 30px 10%; } }
  @media screen and (min-width: 1200px) {
    .works_section_area {
      padding: 30px 15%; } }

.works_section_titleArea {
  margin: 20px 0; }

.works_section_h1title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 800;
  font-size: 21px;
  text-align: justify;
  color: #333;
  margin: 1em 0;
  line-height: 2em; }

.works_section_area_body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 18px;
  text-align: justify;
  line-height: 2em;
  color: #333;
  margin: 1em 0; }

.works_all_area {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px; }

.works_achievement {
  min-width: 300px;
  max-width: 1fr;
  /* 1fr に設定することで、スペースを適切に使用します */ }

.works_achievement_img {
  width: 100%;
  border: solid 0.5px #333; }

.works_achievement_title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 800;
  font-size: 18px;
  text-align: center;
  color: #333;
  margin: 1em 0; }