/* Import common styles from index.css */
@import url('../index.css');


.about-message {

  /* 共通スタイルを上書き */
  .common-container {

    padding: 5vw 6vw;


    .content-message {
      display: flex;
      column-gap: 5vw;
    }

    .message-content-text {
      display: grid;
      row-gap: 2vw;
    }

    .message-content-image {
      width: 55vw;
      
      img {
        box-shadow: 0px 3px 6px #00000029;
      }
    }

    .message-content-image-dean-name {
      text-align: center;
      font-weight: 500;
      margin-top: 0.5vw;
    }
  }

  @media screen and (max-width: 820px) {
      .common-container {
        .message-content-image {
          width: 100%;
        }

        .message-content-image-dean-name {
          letter-spacing: 0;
        }
      }
  }

  /* スマホのみのスタイル */
  @media screen and (max-width: 819px) {

    .common-container {

      .content-message {
        flex-direction: column-reverse;
      }

      .message-content-text {
        row-gap: 8vw;
      }

      .message-content-image {
        margin-inline: auto;
        margin-bottom: 5vw;
        width: 40vw;
      }

    }
  }
}

/* 固有のスタイルを記載 */