.message {
    background-image: url(./image/about-bg.jpg);
    padding-bottom: 316px;
}

.message__inner {
    display: grid;
    grid-template-columns: 1.5fr 2fr 1.5fr;
    grid-template-rows: repeat(2, minmax(248px, auto));
    max-width: 1440px;
    margin: auto;
}

.message__text {
    grid-column: 2;
    grid-row: 1;
}

.message__textbox {
    margin-top: 80px;
    width: fit-content;
    margin-inline: auto;
}

.message__textbox p {
    line-height: 2.35;
}

.message__textbox p:nth-child(n+2) {
    margin-top: 45px;
}

.image__top {
    width: clamp(122px, calc(19.24vw + 49.81px), 327px);
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}


.image__bottom {
    width: clamp(109px, calc(10.42vw + 69.91px), 220px);
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: end;
}

.image__left {
    width: clamp(122px, calc(19.24vw + 49.81px), 327px);
    grid-column: 1;
    grid-row: 1;
    align-self: end;
}

@media screen and (max-width: 1040px) {
    .message__inner .sp-wrapper-m {
        width: 89%;
        margin-left: auto;
        margin-right: auto;
    }

    .message {
        padding-bottom: 326px;
    }

    .message__inner {
        display: flex;
        align-items: center;
        position: relative;
    }

    .message__text {
        display: flex;
        flex-direction: column;
        margin: auto;
        padding-bottom: clamp(151px, 30vw, 315px);
    }

    .message__title {
        align-self: flex-start;
        margin-top: 88px;
    }

    .message__textbox {
        margin: 61px 0 81px;
        width: fit-content;
        margin-inline: auto;
    }

    .message__image {
        position: absolute;
    }

    .image__top {
        top: 0;
        right: 0;
        margin-right: calc(50% - 50vw);
    }

    .image__left {
        bottom: 0;
        left: 0;
        margin-left: calc(50% - 50vw);
    }

    .image__bottom {
        bottom: -3%;
        left: 40%;
        transform: translateX(-40%);
    }
}

@media screen and (max-width:768px) {
    .message {
        padding-bottom: 186px;
    }
}

@media screen and (max-width:510px) {
    .image__bottom {
        left: 60%;
        transform: translateX(-60%);
    }
}

@media screen and (max-width:420px) {
    .message__br {
        display: none;
    }
}