@charset "UTF-8";

#contents {
  background-color: #fff;
  max-width: 90%;
  margin: 0 auto;
}





.info_page_title{
    width: 900px;
    margin: 100px auto 30px auto;
}
.info_page_block{
    width: 900px;
    margin: auto;
img{max-width:100%; height:auto !important;}

}
















/* section_header */
.section_header {
  display: flex;
  flex-direction: column;
  color: #000;
  text-align: left;

  .section_header_title_bg {
    line-height: 1.1;
    font-size: 120px;
    color: #fafafa;
  }

  .section_header_title {
    line-height: 1;
    font-size: 36px;
    font-weight: bold;
  }

  .section_header_desc {
    padding: 30px 0 25px;
    font-size: 16px;
    font-weight: bold;
  }

  .select_tag {
    ul {
      list-style: none;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 24px 8px;

      li {
        a {
          display: block;
          padding: 11px 35px 9px;
          line-height: 1.1;
          text-align: center;
          font-weight: bold;
          font-size: 16px;
          color: #000;
          white-space: nowrap;
          border-radius: 50px;
          border: 1px solid #000;
          cursor: pointer;
        }
      }
    }
  }
}

/* works_list */
.works_list {
  margin-top: 45px;

  .works_list_inner {
	display: flex;
	justify-content: start;
	flex-wrap: wrap;
	gap: 90px 2%;
	margin: 60px 0 100px;
  }

  .works_list_item {
    text-align: left;
    width: 31%;

    .works_list_link {
      display: flex;
      flex-direction: column;
      height: 100%;
      box-sizing: border-box;
      color: #000;

      .works_list_img {
        img {
                    width: 100%;
                    height: 16em;
                    object-fit: cover;
        }
      }

      .works_list_title {
        font-size: 16px;
        font-weight: bold;
        margin: 20px 0 10px;
      }

      .works_list_desc {
        font-size: 12px;
        flex-grow: 1;
      }

      .works_list_staff {
        display: flex;
        justify-content: left;
        gap: 10px 6%;
        padding-top: 10px;
        white-space: nowrap;
        flex-wrap: wrap;

        .staff {
          display: flex;
          justify-content: left;
          gap: 15px;
          align-items: center;

          img {
            width: 47px;
            height: 47px;
            border-radius: 50%;
          }

          .staff-role {
            font-size: 16px;
          }

          span {
            font-size: 10px;
            font-weight: bold;
            color: var(--primary-color);
          }
        }
      }

      .works_list_tag {
        margin-top: 20px;

        ul {
          display: flex;

          li {
            display: inline-block;
            margin-right: 10px;
            list-style: none;
            font-size: 12px;
            color: var(--primary-color);
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {


.info_page_title{
    width: 100%;
    margin: 100px auto 30px auto;
}
.info_page_block{
    width: 100%;
    margin: auto;
img{max-width:100%; height:auto !important;}

}


  /* section_header */
  .section_header {
    margin-bottom: 20px;
    gap: 0;

    .section_header_title_bg {
font-size: clamp(24px, 12vw, 49px);
    }

    .section_header_title {
      font-size: clamp(28px, 7.3vw, 42px);
    }

    .section_header_desc {
      padding: 20px 0;
      font-size: clamp(12px, 3vw, 14px);
    }

    .select_tag {
      ul {
        gap: 10px 7px;

        li {
          a {
            padding: 7px 15px 5px;
            font-size: clamp(9px, 3vw, 12px);
          }
        }
      }
    }
  }

  /* works_list */
  .works_list {
    margin-top: 15px;

    .works_list_inner {
      gap: 50px 0;
      margin: 50px 0 80px;
    }

    .works_list_item {
      width: 100%;

      .works_list_link {
        .works_list_title {
          margin: 14px 0 10px;
          font-size: clamp(12px, 3.5vw, 14px);
        }

        .works_list_desc {
          font-size: clamp(10px, 2.8vw, 12px);
        }

        .works_list_staff {
          padding-top: 0;

          .staff {
            img {
              width: 37px;
              height: 37px;
            }

            .staff-role {
              font-size: clamp(12px, 3.5vw, 14px);
            }

            span {
              font-size: clamp(10px, 2.8vw, 12px);
            }
          }
        }

        .works_list_tag {
          margin-top: 10px;

          ul {
            display: block;

            li {
              font-size: clamp(10px, 3vw, 13px);
            }
          }
        }
      }
    }
  }
}