.mes1 {
  margin-top: 200px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.mes1 .tp {
  place-content: center;
  text-align: center;
  background: url("../images/mes1-bg1.jpg") center center/cover;
}
.mes1 .btm {
  place-content: center;
  text-align: center;
  color: white;
  background: url("../images/mes1-bg2.jpg") center center/cover;
}
.mes1 .in {
  display: inline-block;
  max-width: 570px;
  margin: 0 auto;
  padding: 110px 0;
  box-sizing: border-box;
}
.mes1 h2 {
  font-size: clamp(20px, calc(0.7843137255vw + 16.9411764706px), 32px);
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: left;
}
.mes1 .txt {
  margin-top: 30px;
  text-align: left;
}
.mes1 .right {
  margin-top: 80px;
  background: url("../images/mes1-bg3.jpg") top center/cover;
}
@media all and (max-width: 1280px) {
  .mes1 {
    margin-top: 80px;
  }
  .mes1 .in {
    padding: 110px 50px;
  }
}
@media all and (max-width: 1000px) {
  .mes1 {
    grid-template-columns: repeat(1, 1fr);
    margin-top: 10px;
  }
  .mes1 .right {
    order: 1;
    height: 500px;
    background: url("../images/mes1-bg3-tb.jpg") top center/cover;
  }
  .mes1 .left {
    order: 2;
  }
  .mes1 .in {
    padding: 50px;
    max-width: none;
  }
}
@media all and (max-width: 767px) {
  .mes1 .right {
    margin-top: 30px;
    height: 350px;
  }
}

.mes2 {
  height: 700px;
  text-align: center;
  place-content: center;
  position: relative;
}
.mes2 .txt {
  display: inline-block;
  position: relative;
  z-index: 2;
}
.mes2 .eg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  place-content: center;
}
.mes2 .eg img {
  display: inline-block;
  width: 90%;
  max-width: 900px;
}
.mes2 .lg1 {
  width: 54px;
  margin: 0 auto;
}
.mes2 .tx {
  margin: 50px 0 30px 0;
  font-size: clamp(16px, calc(0.522875817vw + 13.9607843137px), 24px);
}
.mes2 .tx i {
  font-size: clamp(16px, calc(0.7843137255vw + 12.9411764706px), 28px);
  line-height: 1;
}
.mes2 .txx {
  width: 90%;
  margin: 0 auto;
}
@media all and (max-width: 767px) {
  .mes2 {
    height: 100vh;
  }
  .mes2 .txx {
    text-align: left;
    font-size: 14px;
  }
}

.mes3 .inner {
  padding: 0;
  margin: 0 auto 0 auto;
  width: 90%;
  max-width: 900px;
}
.mes3 h2 {
  display: block;
  text-align: center;
  line-height: 1;
  font-size: clamp(20px, calc(0.7843137255vw + 16.9411764706px), 32px);
  padding: 40px 100px;
  box-sizing: border-box;
  font-weight: 400;
  letter-spacing: 0.05em;
  background: white;
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: -8.5% auto 0 auto;
}
.mes3 h2 i {
  margin-bottom: 20px;
  display: block;
  color: #707070;
  font-size: clamp(16px, calc(0.522875817vw + 13.9607843137px), 24px);
}
.mes3 .txt {
  line-height: 2.5;
  margin-top: 70px;
}
@media all and (max-width: 767px) {
  .mes3 h2 {
    padding: 30px 20px;
  }
  .mes3 h2 i {
    margin-bottom: 10px;
  }
  .mes3 .txt {
    line-height: 2;
    margin-top: 30px;
  }
}

.mes4 {
  height: 100vh;
  place-content: center;
  text-align: center;
}
.mes4 .inner {
  display: inline-block;
}
.mes4 h2 {
  font-size: clamp(20px, calc(0.9803921569vw + 16.1764705882px), 35px);
  line-height: 1.6;
  text-align: left;
}
.mes4 .txt {
  line-height: 3;
  margin-top: 30px;
  text-align: left;
}
@media all and (max-width: 767px) {
  .mes4 h2 {
    font-size: clamp(24px, calc(0.7189542484vw + 21.1960784314px), 35px);
    line-height: 1.6;
    text-align: left;
  }
  .mes4 .txt {
    line-height: 2;
    font-size: 12px;
    margin-top: 20px;
    text-align: left;
  }
}

/*# sourceMappingURL=message.css.map */