@charset "UTF-8";

/*---------------------------------------------------------------
　　　common
---------------------------------------------------------------*/
/* =====================================================================
*   message
* =================================================================== */
/*-------------  sub_mv  -----------------------------*/
#message .sub_mv h1 {
  color: #c586d8;
}

.lead{
  max-width: 920px;
  margin: 10rem auto 0;
}
.lead h3.dotted {
  /* width: calc(500 / 750 * 100%); */
  background: url(../images/message/bg_h3.png) no-repeat top 0.5em center/contain;
}
.lead_textbox{
  position: relative;
  background: #fbf2fe;
  padding: 10rem 4rem;
  border-radius: 15px;
  margin-bottom: 60rem;
  margin-top: 40rem;
}
.heading{
  position: absolute;
  top:-30rem;
  left:50%;
  transform: translateX(-50%);
  z-index: 10;
}
.heading h4{
  position: absolute;
  top:-20rem;
  left:50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 20;
}

.heading img{
  width: calc(690 / 690 * 100%);
  margin: 3rem auto;
}

.balloon {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  color: #c586d8;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #c586d8;
  box-sizing: border-box;
  border-radius: 6px;
}

.balloon:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

.balloon:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #c586d8;
  z-index: 1;
}

.balloon p {
  margin: 0;
  padding: 0;
}
.last{
  margin-bottom: 30rem;
}
@media screen and (max-width: 768px) {
  .heading h4 {
    top: -16rem;
}
}
@media screen and (min-width: 769px) {
  .heading h4 {
    top: -10rem;
}
}


@media screen and (min-width: 768px) {
  #message .sub_mv h2.on_ttl {
    color: #fff;
    left: 50%;
    margin: calc(120 / 730 * 100%) 0 0 calc(-567 / 1856 * 100%);
  }
  .lead_textbox{
    padding: 20rem 4rem;
  }
  .heading {
    top: -20rem;
}
  .heading h4 {
    width: 50%;
}
  .heading img{
    width: calc(400 / 690 * 100%);
  }

}
@media screen and (min-width: 1100px) {
  #message .sub_mv h2.on_ttl {
    left: 50%;
    margin: calc(320 / 1856 * 100%) 0 0 calc(-567 / 1856 * 100%);
  }
}
@media screen and (min-width: 1600px) {
  #message .sub_mv h2.on_ttl {
    left: 50%;
      margin: calc(390 / 1856 * 100%) 0 0 calc(-567 / 1856 * 100%);
    }
}
@media screen and (min-width: 768px) {
  /* .lead h3.dotted {
    width: calc(400 / 1400 * 100%);
  } */
}

.lead h4 {
  font-size: 105%;
  color: #c586d8;
  font-weight: bold;
  text-align: center;
}


@media screen and (min-width: 768px) {
  .lead p {
    text-align: left;
  }
}

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