@charset "utf-8";

/*
  File Name   : message.css
  Description : コンテンツエリア関係 他
*/

/* lay-main
============================================================ */
#lay-main {
  background-color: #f5f6f9;
  padding: 0 0 0;
  box-sizing: border-box;
}

/* section
============================================================ */
.com-section-inner {
  max-width: calc(1200px + 80px);
  padding: 0 40px;
}

/* sp
------------------------------------------------------------ */
@media screen and (max-width: 1301px) {
  .com-section-inner {
    width: 100%;
    padding: 0 20px;
  }
}

/* message-section-base-kv
============================================================ */
.message-section-base-kv {
  /* height: calc(100vh - 80px); */
  height: 1000px;
  background: url(../img/message/kv-img-1.png) center no-repeat;
  background-size: cover;
  position: relative;
}
.message-section-base-kv .title-img {
  width: 560px;
  position: absolute;
  top: 260px;
  /* top: 24.2vh; */
  /* left: 310px; */
  left: 16.146vw;
}

/* sp
------------------------------------------------------------ */
@media screen and (max-width: 1301px) {
  .message-section-base-kv {
    height: auto;
    background: none;
  }
  .message-section-base-kv .title-img {
    width: 100%;
    position: static;
  }
}

/* -main-text
============================================================ */
.-main-text {
  padding-top: 250px;
  padding-bottom: 250px;
}
.-main-text .title,
.-other-style .title,
.-side-img-text .title {
  font-size: 30px;
  font-weight: bold;
  line-height: 1.8;
}
.-main-text .en-text-style,
.-other-style .en-text-style,
.-side-img-text .en-text-style {
  margin: 20px 0 40px;
  position: relative;
}
.-main-text .en-text-style::after,
.-other-style .en-text-style::after,
.-side-img-text .en-text-style::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 550px;
  height: 1px;
  background-color: #ccd5dd;
  z-index: 1;
}
.-other-style .en-text-style::after,
.-side-img-text .en-text-style::after {
  width: 100%;
}
.-main-text .en-text-style .text,
.-other-style .en-text-style .text,
.-side-img-text .en-text-style .text {
  font-size: 14px;
  font-weight: bold;
  font-family: 'Barlow', sans-serif;
  line-height: 1;
  letter-spacing: 2px;
  color: #ea7567;
  padding: 0 40px 0 0;
  background-color: #f5f6f9;
  display: inline-block;
  position: relative;
  z-index: 2;
}
.-other-style .en-text-style .text {
  background-color: #fff;
}
.-main-text .en-text-style span,
.-other-style .en-text-style span,
.-side-img-text .en-text-style span {
  font-size: 14px;
  font-weight: 300;
}

/* sp
------------------------------------------------------------ */
@media screen and (max-width: 1301px) {
  .-main-text {
    padding-top: 93px;
    padding-bottom: 90px;
  }
  .-main-text .title,
  .-other-style .title,
  .-side-img-text .title {
    font-size: 18px;
    text-align: center;
  }
  .-main-text .en-text-style,
  .-other-style .en-text-style,
  .-side-img-text .en-text-style {
    text-align: center;
    margin: 20px auto 40px;
  }
  .-main-text .en-text-style::after,
  .-other-style .en-text-style::after,
  .-side-img-text .en-text-style::after {
    display: none;
  }
  .-main-text .en-text-style .text,
  .-other-style .en-text-style .text,
  .-side-img-text .en-text-style .text {
    font-size: 11px;
    padding: 0 0 0;
  }
  .-main-text .en-text-style span,
  .-other-style .en-text-style span,
  .-side-img-text .en-text-style span {
    font-size: 11px;
  }
  .-other-style .en-text-style .text {
    background-color: #f5f6f9;
  }
}

/* -side-img-text
============================================================ */
.-side-img-text {
  position: relative;
  padding-bottom: 250px;
}
.-side-img-text .img-wrap {
  width: calc(50% - 50px);
  height: 500px;
  background: url(../img/message/img-1.png) center no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: calc(50% - 0);
}
.-side-img-text .flex-wrap {
}
.-side-img-text .flex-wrap .desc-wrap-outer {
  width: calc(50% - 100px + 50px);
  float: right;
}

/* sp
------------------------------------------------------------ */
@media screen and (max-width: 1301px) {
  .-side-img-text {
    padding-bottom: 90px;
  }
  .-side-img-text .img-wrap {
    width: 100%;
    height: auto;
    background: none;
    position: static;
    margin-bottom: 90px;
  }
  .-side-img-text .flex-wrap .desc-wrap-outer {
    width: 100%;
    float: none;
  }
}

/* -other-style
============================================================ */
.-other-style {
  position: relative;
  margin-bottom: -300px;
}
.-other-style .right-img-wrap {
  width: 50%;
  height: 500px;
  background: url(../img/message/img-4.png) center no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
}
.-other-style .desc-wrap-outer {
  width: 50%;
  background-color: #fff;
  position: relative;
  top: -300px;
  padding: 100px 100px 100px 0;
  box-sizing: border-box;
}
.-other-style .desc-wrap-outer::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1000px;
  width: 1000px;
  height: 100%;
  background-color: #fff;
  z-index: 1;
}
.-other-style .desc-wrap-outer .img-wrap {
  width: 100%;
  margin-bottom: 70px;
}

/* sp
------------------------------------------------------------ */
@media screen and (max-width: 1301px) {
  .-other-style {
    position: relative;
    margin-bottom: 0;
  }
  .-other-style .right-img-wrap {
    width: 100%;
    height: auto;
    background: none;
    position: static;
  }
  .-other-style .desc-wrap-outer {
    width: 100%;
    padding: 0 0 0 0;
    top: 0;
    background: none;
    margin-bottom: 90px;
  }
  .-other-style .desc-wrap-outer::before {
    display: none;
  }
  .-other-style .desc-wrap-outer .img-wrap {
    margin: 0 -20px 90px;
  }
}

/* full-img-wrap
============================================================ */
.full-img-wrap img {
  max-width: auto;
  width: 100%;
}

/* sp
------------------------------------------------------------ */
@media screen and (max-width: 1301px) {
  .full-img-wrap {
  }
}