.mainimg figure {
  position: relative;
}
.mainimg figure::before {
  content: "";
  position: absolute;
  left: calc(25% - 200px);
  top: max(4%, 50px);
  width: 970px;
  height: 820px;
  display: block;
  background: url("../img/product/aesg/maintext@2x.png") no-repeat center top / contain;
}
@media only screen and (max-width: 782px) {
  .mainimg figure::before {
    height: 100%;
    width: 90vw;
    top: 0;
    left: 5%;
    background-position: center 50%;
  }
}

.basic h3 {text-align: center;margin-top: 100px;font-size: 52px;letter-spacing: -1px; line-height: 1.4; }
.lightblue { color: #00c3de; }
h4.h401 {text-align: center; font-size: 32px; margin-top: 30px;line-height: 1.5;}
.pink { color: #e462c1;}
h5.h501 { text-align: center; font-size: 22px;margin-top: 30px;}
p.desc { text-align: center;}
@media only screen and (max-width: 782px) {

  .basic h3 {margin-top: 15px;font-size: 26px;}
  h4.h401 { font-size: 16px; margin-top: 15px;}
  h5.h501 { font-size: 12px;margin-top: 15px;}
}

.flow {
  margin: 50px 0 0 0;
  text-align: center;
}

.pinkbox {
  margin-top: 150px; 
  border: #e462c1 5px solid;
  border-radius: 20px;
  position: relative;
  background: #fff;
  padding: 0 130px 70px;
}
.pinkbox > * { position: relative; z-index: 2;}
.pinkbox::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 15px;
  width: 100%;
  height: 600px;
  z-index: 1;
  background: rgb(255,255,255);
  background: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,241,251,1) 100%);
  background: -o-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,241,251,1) 100%);
  background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,241,251,1) 100%);
}
.pinkbox h3 { font-size: 55px; text-align: center; color: #e462c1; margin-top: 60px; line-height: 1.4;}
.pinkbox h4 { font-size: 20px; text-align: center; margin: 20px 0 50px; line-height: 1.5;}
.pinkbox h4 strong {
  display: inline-block;
  padding: 5px 40px;
  border-radius: 50px;
  background: #e462c1;
  color: #fff;
}

@media only screen and (max-width: 782px) {
  .pinkbox {
    margin-top: 70px; 
    border: #e462c1 3px solid;
    border-radius: 10px;
    padding: 0 5vw 5vw;
  }
  .pinkbox::before {
    border-radius: 8px;
    height: 400px;
  }
  .pinkbox h3 { font-size: 26px; margin-top: 30px; line-height: 1.4;}
  .pinkbox h4 { font-size: 18px; margin-top: 20px; line-height: 1.5;}
  .pinkbox h4 strong {
    padding: 3px 25px;
  }
}

.figs {
  display: flex;
  justify-content: space-between;
}
.figs figure{
  margin-top: 70px;
  width: calc(100% - 35px);
}
@media only screen and (max-width: 782px) {
  .figs { display: block;}
  .figs figure{ margin-top: 30px;width:  auto; text-align: center;}
  .figs figure img { width: 260px;}
}



h3.line {
  margin: 7rem 0 0 0;
  position: relative;
  text-align: center;
  font-size: 40px;
  color: #45bdcf;
}
h3.line::before,
h3.line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 17rem);
  height: 1px;
  background: #45bdcf;
}
h3.line::after { right: 0;}
h3.line::before { left: 0;}

.flow dl {
  width: 1000px;
  max-width: 100%;
  margin: 30px auto 0;
  position: relative;
  background: rgba(255,245,84,0.2);
  padding: 20px 20px 30px;
}
.flow dl:not(:last-child)::after {
  content: "";
  width: 30px;
  height: 30px;
  border: transparent 5px solid;
  border-bottom: #e462c1 5px solid;
  border-left: #e462c1 5px solid;
  transform: rotate(-45deg);
  position: absolute;
  left: calc(50% - 15px);
  bottom: -5px;
  box-sizing: border-box;
}
.flow dt {
  font-family: 'Shippori Mincho B1', serif;
  color: #e462c1;
  font-size: 25px;
  margin: 0 0 10px;
}
.flow dd .bg_blue {
  display: inline-block;
  background: #07b2cf;
  color: #fff;
  padding: 8px 20px;
  border-radius: 30px;
  margin-bottom: 15px;
}
.flow dd ul {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.flow dd li {
  margin: 0 10px;
  position: relative;
  width: calc(25% - 20px);
}
.flow dd li.arrow::before {
  position: absolute;
  z-index: 2;
  content: "";
  left: -30px;
  top: 55px;
  width: 34px;
  height: 40px;
  background: url("../img/product/aesg/flow_arrow@2x.png") no-repeat left top / 34px 40px;
}
.flow dd li figure {
  position: relative;
  z-index: 1;
  width: 100%;
}
.flow dd li figure img {
   width: 100%;
}
.flow dd li figcaption {
  text-align: left;
  font-size: 86%;
  margin-top: 5px;
}
@media only screen and (max-width: 782px) {
  h3.line {
    font-size: 22px;
  }
  h3.line::before,
  h3.line::after {
    width: calc(50% - 10rem);
  }
  .flow dl {
    width: auto;
    margin: 20px auto 0;
    padding: 15px 2.5vw 20px;
  }
  .flow dl:not(:last-child)::after {
    width: 20px;
    height: 20px;
    border: transparent 3px solid;
    border-bottom: #e462c1 3px solid;
    border-left: #e462c1 3px solid;
    transform: rotate(-45deg);
    left: calc(50% - 10px);
    bottom: -5px;
  }
  .flow dt {
    font-size: 15px;
  }
}
@media only screen and (max-width: 782px) {
  .flow dd ul {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
  .flow dd li {
    margin: 0 1vw;
    position: relative;
    width: calc(25% - 2vw);
  }
  .flow dd li.arrow::before {
    position: absolute;
    z-index: 2;
    content: "";
    left: -2.5vw;
    top: 5vw;
    width: 3vw;
    height: 3vw;
    background: url("../img/product/aesg/flow_arrow@2x.png") no-repeat center top / contain;
  }
  .flow dd li figcaption { font-size: 10px; line-height: 1.4;}
}
@media only screen and (max-width: 550px) {
  .flow dd ul {
    display: block;
  }
  .flow dd li {
    margin: 1vw 0 4vw;
    width: auto;
    text-align: center;
  }
  .flow dd li.arrow::before {
    left: calc(50% - 1.5vw);
    top: -3.5vw;
    width: 3vw;
    height: 3vw;
    background: url("../img/product/aesg/flow_arrow@2x.png") no-repeat center top / contain;
    transform: rotate(90deg);
  }
  .flow dd li figcaption { text-align: center;}
  .flow dd li figure img {
    width: 205px;
  }
}

.basic .gaiyo {
  margin-top: 80px;
}
.basic .gaiyo h3 {
  text-align: center;
  font-size: 100%;
}
.gaiyo h3 strong {
  background: #07b2cf;
  color: #fff;
  padding: 10px 70px;
  border-radius: 60px;
  font-size: 26px;
  font-weight: normal;
  letter-spacing: 0.1rem;
  display: inline-block;
}
.flex02 {
  display: flex;
  justify-content: space-between;
}
.flex02 > figure {
  margin-top: -40px;
  width: 270px;
}
.flex02 > .text {
  margin-top: 75px;
  width: calc(100% - 325px);
}
.flex02 > .text h4 {
  font-size: 150%;
  color: #07b2cf;
  font-weight: bold;
  margin: 40px 0 0 0;
}
.flex02 > .text ul {
  margin-top: 40px;
}
.flex02 > .text ul li {
  padding-left: 25px;
  position: relative;
  margin: 3px 0;
}
.flex02 > .text ul li::before {
  content: "■";
  color: #07b2cf;
  position: absolute;
  left: 0;
  top: 0;
}
.flex02 > .text h4 { display: flex; margin-top: 40px; font-size: 114%;}

@media only screen and (max-width: 782px) {
  .gaiyo h3 strong {
    padding: 5px 40px;
    font-size: 18px;
  }
  .flex02 {
    display: block;
  }
  .flex02 > figure {
    margin-top: 40px;
    width: auto;
  }
  .flex02  figure { text-align: center;}
  .flex02 > figure img { width: 180px;}
  .flex02 > .text {
    margin-top: 35px;
    width: auto;
  }
  .flex02 > .text ul {
    margin-top: 40px;
  }
  .flex02 > .text ul li {
    padding-left: 20px;
  }

  .flex02 > .text h4 { display: flex; margin-top: 30px; font-size: 114%;}

}
.tbtitle {
  font-size: 114%;
  font-weight: bold;
  margin-top: 80px;
}
.kome { font-size: 90%;}
.gaiyo table {
  margin-top: 30px;
  border-collapse: collapse;
  width: 100%;
}
.gaiyo table th,
.gaiyo table td { font-size: 90%; text-align: left; padding: 8px 15px; border-bottom: #e3e3e3 1px solid;}
@media only screen and (max-width: 782px) {
  .tbtitle {margin-top: 40px;}
  .gaiyo table {margin-top: 20px;}
  .gaiyo table th { padding: 8px 0px; width: 6rem; letter-spacing: 0;}
  .gaiyo table td { padding: 8px 0 8px 5px;}

}
.cation { font-size: 90%;}
h4.cation { margin-top: 50px;}
ul.cation li {
  padding-left: 25px;
  position: relative;
  margin: 3px 0;
}
ul.cation li::before {
  content: "●";
  color: #07b2cf;
  position: absolute;
  left: 0;
  top: 0;
}