/* 説明文を折り返したく無い箇所を画像にしています。
　 その際の画像の大きさのスタイルです。
   .explain-image1 = section1（siimでできること）のベン図
   .explain-image3 = section3（機能特色）の説明文
*/
.explain-image1 {
  width: 80%;
}
@media all and (max-width: 480px) {
  .explain-image1 {
    width: 86%;
  }
  .explain-image3 {
    width: 80%;
  }
}
@media all and (min-width: 481px) and (max-width: 767px) {
  .explain-image1 {
    width: 86%;
  }
  .explain-image3 {
    width: 70%;
  }
}
@media all and (min-width: 768px) and (max-width: 1199px) {
  .explain-image3 {
    width: 55%;
  }
}
@media all and (min-width: 1200px) {
  .explain-image3 {
    width: 50%;
  }
}

/* ------------------------------
セクションタイトル */

.add_customizer_wrapper .content .title,
.add_customizer_wrapper .contaner .title {
  width: 100%;
  text-align: left;
  position: relative;
  margin-bottom: 5em;
}
@media screen and (max-width: 767px) {
  .add_customizer_wrapper .content .title,
  .add_customizer_wrapper .contaner .title {
    margin-bottom: 2em;
  }
}
.add_customizer_wrapper .content .title > .section_title {
  font-weight: 400;
}
/* 丸（飾り） */
.add_customizer_wrapper .content .title > .section_title::before {
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: #8ebfa9;
  box-shadow: 0px 0px 0px 5px #8ebfa9;
  border: dashed 1px;
  border-radius: 50%;
  overflow: hidden;

  content: ">>>";
  font-size: 1em;
  font-family: "Chicle", serif;
  font-weight: 400;
  font-style: normal;
  color: #fff;
  vertical-align: middle;
  text-align: center;
  align-content: center;
  margin-right: 20px;
}
/* .no_line（緑背景） */
.add_customizer_wrapper .content .title > .section_title.no_line::before {
  background-color: #fff;
  box-shadow: 0px 0px 0px 5px #fff;
  color: #8ebfa9;
}
/* ボーダー */
.add_customizer_wrapper .content .title > .section_title::after {
  content: "";
  display: inline-block;
  width: calc(100% - 62px);
  height: 1px;
  margin: 0 0 35px 62px;
  background-color: #8ebfa9;
}
/* .no_line（緑背景） */
.add_customizer_wrapper .content .title > .section_title.no_line::after {
  background-color: #fff;
}

/* ------------------------------
セクション境界線（SVG） */

@media screen and (min-width: 768px) {
  .svg-wave {
    margin-top: -6em;
  }

  .u-pc {
    display: block;
  }

  .u-sp {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .svg-wave {
    margin-top: -2em;
  }

  .u-pc {
    display: none;
  }

  .u-sp {
    display: block;
  }
}