@media all and (max-width: 767px) {
  .keyvisual_title {
    text-align: center;
  }
  .keyvisual_title h1 {
    font-size: 18px;
  }
  .keyvisual_title h2 {
    font-size: 24px;
    font-weight: 400;
  }
  .keyvisual_logo {
    width: 300px;
  }
  .colorsystem_wrap,
  .logosystem_wrap {
    flex-direction: column;
  }
  .systems_title {
    margin-bottom: 20px;
  }
  .systems_title h3 {
    font-size: 22px;
  }
  .colorsystem_contents_wrap {
    grid-template-rows: 170px 70px;
  }
  .colorsystem_content h4 {
    font-size: 14px;
  }
  .colorsystem_content_text {
    font-size: 11px;
  }
  .firstword_bg {
    background: url(../../img/brand/identity/brand-identity-mo-img-02.jpg)
      no-repeat top/contain;
  }
  .firstword_wrap {
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .firstword_title {
    margin-top: 200px;
  }
  .firstword_title h4 {
    font-size: 18px;
    font-weight: 400;
  }
  .blackspace_logo {
    width: 300px;
  }
  .blackspace_bg3 .blackspace_logo {
    width: 300px;
  }
  /* rects */
  .rects {
    flex-direction: column;
  }
  .rects_wrap {
    width: 100%;
  }
  .rects_text h5 {
    font-size: 18px;
  }
  .rects_bg2 {
    order: 1;
  }
  .rects_wrap2 {
    order: 0;
  }
  /* identity */
  .corporate_wrap,
  .brand_wrap {
    flex-direction: column;
    border-top: none;
  }
  .corporate_title,
  .brand_title {
    margin-bottom: 20px;
  }
  .corporate_title h5,
  .brand_title h5 {
    font-size: 22px;
  }
  .corporate_contents {
    border: 1px solid rgb(228, 228, 228);
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    row-gap: 50px;
    padding: 30px 0;
  }
  .brand_contents {
    border: 1px solid rgb(228, 228, 228);
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    padding: 30px 0;
  }
  .corporatelist img,
  .brandlist img {
    width: 80%;
  }
}