@import url("global.css");
#bodyarea .intro {
  display: flex;
  align-items: center;
  margin-top: -30px;
}
#bodyarea .intro .textarea {
  flex-grow: 1;
  text-align: center;
  margin-top: -40px;
}
#bodyarea .intro .textarea .sub {
  position: relative;
  display: inline-block;
  font-weight: bold;
  font-size: 21px;
  padding: 0 30px;
}
#bodyarea .intro .textarea .sub::before, #bodyarea .intro .textarea .sub::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 17px;
  height: 27px;
}
#bodyarea .intro .textarea .sub::before {
  background: url("../img/deco_left.svg") no-repeat center center;
  background-size: contain;
  left: 0;
}
#bodyarea .intro .textarea .sub::after {
  background: url("../img/deco_right.svg") no-repeat center center;
  background-size: contain;
  right: 0;
}
#bodyarea .intro .textarea .catch {
  max-width: 500px;
  margin: 25px auto 40px;
}
#bodyarea .intro .textarea .text {
  font-weight: bold;
  text-align: left;
}
#bodyarea .intro .img {
  flex-shrink: .2;
  margin-left: 5%;
  width: 52%;
}
#bodyarea #contactarea {
  margin-top: -30px;
  padding-top: 1px;
}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 (1600px)
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 (1370px)
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #bodyarea .intro {
    display: block;
  }
  #bodyarea .intro .textarea .sub {
    font-size: 19px;
  }
  #bodyarea .intro .textarea .catch {
    max-width: 420px;
    margin: 20px auto 35px;
  }
  #bodyarea .intro .textarea .text {
    text-align: center;
  }
  #bodyarea .intro .img {
    margin: 20px auto 0;
    width: 600px;
  }
  #bodyarea #contactarea {
    margin-top: 30px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #bodyarea .intro {
    margin-top: 0;
  }
  #bodyarea .intro .textarea {
    margin-top: 0;
  }
  #bodyarea .intro .textarea .sub {
    font-size: 14px;
    padding: 0 20px;
  }
  #bodyarea .intro .textarea .sub::before, #bodyarea .intro .textarea .sub::after {
    top: 3px;
    width: 12px;
    height: 19px;
  }
  #bodyarea .intro .textarea .catch {
    max-width: 285px;
    margin: 13px auto 30px;
  }
  #bodyarea .intro .textarea .text {
    text-align: left;
    font-weight: inherit;
  }
  #bodyarea .intro .img {
    width: auto;
  }
  #bodyarea #formbox {
    margin-top: 25px;
  }
}