@charset "utf-8";
/* CSS Document */

/*-------------------------------------------------------------
 *
 *					style_message.css
 *
 *-------------------------------------------------------------*/

.message .main-content .text-message     { border-width: 16px; max-width: 880px; box-sizing: border-box; padding: 50px; background-color: #fff; margin: -129px 0 0 auto; z-index: 1; position: relative; }
.message .main-content .text-message h4  { font-size: 300%; line-height: 1.4; margin-bottom: 54px; }
.message .main-content .text-message > p { font-size: 125%; letter-spacing:0.05em; line-height:2; }
.message .main-content .text-message > p + p { margin-top: 25px; }

.message .main-content .text-message .bottom-message     { display: flex; flex-direction: row-reverse; justify-content: space-between; margin-top: 120px; align-items: center; }
.message .main-content .text-message .bottom-message .pName { text-align: right; }
.message .main-content .text-message .bottom-message .pName span { font-size: 200%; }

@media screen and ( max-width:1400px ) {
    .message .main-content .text-message h4     { font-size: 240%; }
}
@media screen and ( max-width:900px ) {
    body                                { overflow-x: hidden; }
    .photo-message img                  { width: 110%; height: auto; margin-left: -50px;  }
}


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

    .message .main-content .text-message { margin: 40px 14px 0 14px; padding: 30px 20px; border-width: 10px; }
    .message .main-content .text-message h4              { font-size: 158%; margin-bottom: 29px; }
    .message .main-content .text-message > p             { font-size: 106%; }

    .message .main-content .text-message .bottom-message { display: block; margin-top: 30px; }
    .message .main-content .text-message .bottom-message .pName      { width: 250px; margin: 0 0 140px auto; }
    .message .main-content .text-message .bottom-message .pName span { font-size: 170%; }
    .message .main-content .text-message .bottom-message p:last-child img{ width: 165px; height: auto; }

}

@media screen and ( max-width:400px ) {
    .message .main-content .text-message .bottom-message .pName      { width: 100% }

}