@charset "utf-8";

.flex{ display: flex; justify-content: space-between; flex-wrap: wrap;}



.message{ padding-top: 100px; background: #f5f5f5; padding-bottom: 200px;}

h2{ font-size: 5rem; font-weight: bold; max-width: 1200px; width: calc(100% - 50px); line-height: 1.5; margin:0 auto 30px;}
h2 span{ display: block; font-size: clamp(1.6rem,1.5vw,1.8rem); }

h3{ font-size: 3rem; line-height: 1.5; margin-top: -0.75rem;}
h4{ font-size: 2rem; line-height: 1.5; margin: 3em 0 1em;}

.message{ margin: 0 auto;}
.photo{ width: 44%; order: 1;}
.txtBox{ width: 50%; order: 2;}
.txtBox p{ margin-top: 20px; line-height: 1.8;}
.txtBox .position{ line-height: 1.5; margin-top: clamp(40px,3.64vw,7rem);}
.txtBox .name{ font-size: 3rem;}

@media (max-width: 1400px){
    .message{ padding:100px 0 100px;}
   h2{ font-size: 4.5rem; margin-bottom: 30px;}
  }

@media (max-width: 768px){

    .message{ padding:70px 0 50px;}
    h2{ font-size: clamp( 2rem , 6.5vw, 5rem); margin-bottom: 20px;}
    h3{ font-size: 5vw;}
    h4{ font-size: 4vw;}
    
    .photo{ width: 100%; text-align: center;}
    .txtBox{ width: 100%; margin-top: 30px;}
    .txtBox p{ margin-top: 15px;}

}