@charset "utf-8";

/* ↓↓↓ message ↓↓↓ */
.message {
  padding: 12rem 2rem;

  .block {
    max-width: 104rem;
    margin: 0 auto;

    +.block {
      margin-top: 10rem;
    }
  }

  .representative_box {
    display: flex;
    gap: 4rem;

    .text_group {
      max-width: 48.8rem;

      .text {
        font-size: max(10px, 1.5rem);
        color: #222;
        margin-top: 3.2rem;
      }
    }

    .image {
      border-radius: 2rem;
      overflow: hidden;
    }

    +.representative_box {
      margin-top: 8rem;
    }
  }

  .message_list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8rem 6.4rem;
    margin-top: 8rem;
    padding-top: 8rem;
    border-top: 1px solid #F0F0F0;

    .item {
      width: calc((100% - 6.4rem) / 2);
    }

    .image {
      border-radius: 2rem;
      overflow: hidden;
      margin-top: 2.4rem;
    }

    .text {
      font-size: max(10px, 1.5rem);
      color: #222;
      margin-top: 1.6rem;
    }
  }
}

@media screen and (max-width: 768px) {
  .message {
    padding: 6.4rem 2rem 8rem;

    .representative_box {
      flex-direction: column;
      gap: 1.6rem;

      .text_group {
        max-width: initial;

        .text {
          margin-top: 2.4rem;
        }
      }

      .image {
        aspect-ratio: 335/236;

        img {
          object-fit: cover;
          height: 100%;
        }
      }
    }

    .message_list {
      flex-direction: column;
      gap: 6.4rem;
      margin-top: 8rem;
      padding-top: 6.4rem;

      .item {
        width: 100%;
      }


      .image {
        aspect-ratio: 335/178;

        img {
          object-fit: cover;
          height: 100%;
        }
      }
    }
  }
}

/* ↑↑↑ message ↑↑↑ */