@charset "utf-8";

.pagemain-image{
  background: url("../img/pagemain_image.jpg") no-repeat center center;
}
.dg-image01{
  background: url("../img/bgimage01.jpg") no-repeat right center;
  background-size: cover;
}
.dg-image02{
  background: url("../img/bgimage02.jpg") no-repeat left center;
  background-size: cover;
}
.dg-image03{
  background: url("../img/bgimage03.jpg") no-repeat right center;
  background-size: cover;
}

.dgmain{
  margin-top: -100px;
}
.dgmain_content01,.dgmain_content02{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
.dgmain_content01 .dg_boxwap,.dgmain_content02 .dg_boxwap {
  max-width: 400px;
  width: 32%;
  margin: 0;
}
.dgmain_content01 .dg_boxwap:nth-child(1){
  order: 2;
}
.dgmain .dg_boxwap .dg_box.heightauto{
  height: auto;
}
.dgmain_content01 .dg_box{
  height: 100%;
}
.dgmain_content01:nth-child(1),.dgmain_content01:nth-child(2){
  justify-content:space-between;
}
.dgmain_content01:nth-child(2){
  margin-top: 20px;
}
.dgmain_content01:nth-child(2)::after{
  content: "";
  display: block;
  max-width: 400px;
  width: 32%;
  order: 2;
}
.dgmain_content01:nth-child(2) .dg_boxwap:nth-child(1){
  order: 0;
}
.point{
  align-items: center;
  border: 1px solid #426FA7;
  border-radius: 10px;
  display: flex;
  padding: 15px;
  margin-bottom: 20px;
  width: 100%;
}
.point span{
  color: #416EA6;
  display: block;
  width: 90px;
  font-size: 18px;
  margin-right: 15px;
  text-align: center;
}
.point p{
  margin-bottom: 0;
}

.stepwap{
  width: 100%;
  margin: 20px auto;
}
.stepwap h3{
  font-size: 18px;
  text-align: center;
  width: 100%;
  padding: 50px 20px 20px;
}
.step {
  width: calc(100% / 3);
}
.step.step01 .steplabel .labelin span{
  background: url("../../common/img/stepbg-right01.png") no-repeat right center #65A4D1;
}
.step.step02 .steplabel .labelin span,.step.step04 .steplabel .labelin span{
  background: url("../../common/img/stepbg-right02.png") no-repeat right center #0070B2;
}
.step.step03 .steplabel .labelin span,.step.step05 .steplabel .labelin span{
  background: #65A4D1;
}
.step p.note{
  font-size: 14px;
  margin-top: 10px;
}

.dgmain_content02{
  display: flex;
  justify-content: space-between;
}
.dgmain_content02 .dg_boxwap .dg_box{
  background: rgba(255,255,255,0.9);
  padding: 50px 30px 30px;
  display: inline-block;
  margin-bottom: 20px;
}
.dgmain_content02 .dg_box{
  height: auto;
}

#designing-03 .dgmain{
  margin-top: 5px;
}

@media screen and (max-width: 768px){
  .pagemain-image{
    background: url("../img/pagemain_image_sp.jpg") no-repeat center center;
  }
  .dgmain {
    margin-top: -40px;
  }
  #designing-01.dgcontents{
    padding-bottom: 80px;
  }
  #designing-01 .dgttl{
    top: 1%;
    z-index: 1100;
  }
  .dgmain_content01 .dg_boxwap,.dgmain_content02 .dg_boxwap {
    max-width: 768px;
    width: 94%;
    margin: 0 auto;
  }
  .dgmain_content01 .dg_boxwap:nth-child(1){
    order: 2;
  }
  .dgmain .dg_boxwap .dg_box.heightauto{
    height: auto;
  }
  .dgmain_content01 .dg_box{
    height: 100%;
  }
  .dgmain_content01:nth-child(1),.dgmain_content01:nth-child(2){
    justify-content:space-between;
  }
  .dgmain_content01:nth-child(2){
    margin-top: 20px;
  }
  .dgmain_content01:nth-child(2)::after{
    content: "";
    display: block;
    max-width: 400px;
    width: 32%;
    order: 2;
  }
  .dgmain_content01:nth-child(2) .dg_boxwap:nth-child(1){
    order: 0;
    margin-top: 20px;
  }
  .pointarea{
    display: flex;
    justify-content: space-between;
  }
  .point{
    align-items: center;
    border: 1px solid #426FA7;
    border-radius: 10px;
    display: block;
    padding: 10px;
    margin-bottom: 20px;
    width: 32%;
    text-align: center;
  }
  .point span{
    color: #416EA6;
    display: block;
    width: auto;
    font-size: 16px;
    margin-right: 0;
    text-align: center;
  }
  .point p{
    font-size: 12px;
    margin-bottom: 0;
  }

  .stepwap{
    width: 100%;
    margin: 20px auto;
  }
  .stepwap h3{
    font-size: 16px;
    text-align: center;
    width: 100%;
    padding: 30px 10px 10px;
  }
  .step {
    width:100%;
  }
  .step.step01 .steplabel .labelin span,.step.step03 .steplabel .labelin span{
    background: url("../../common/img/stepbg-right01_sp.png") no-repeat bottom center #65A4D1;
  }
  .step.step02 .steplabel .labelin span,.step.step04 .steplabel .labelin span{
    background: url("../../common/img/stepbg-right02_sp.png") no-repeat bottom center #0070B2;
  }
  .step.step05 .steplabel .labelin span{
    background: #65A4D1;
  }
  .step p.note{
    font-size: 14px;
    margin-top: 10px;
  }

  .dgmain_content02{
    display: block;
    justify-content: space-between;
  }
  .dgmain_content02 .dg_boxwap .dg_box{
    background: rgba(255,255,255,0.9);
    padding: 30px 15px;
    display: inline-block;
    margin-bottom: 20px;
  }
  .dgmain_content02 .dg_box{
    height: auto;
  }
  .boxh01,.boxh02{
    height: auto !important;
  }
  #designing-03 .number{
    margin-top: -30px;
  }
  #designing-02 .section_ttl {
    font-weight: bold;
    line-height: 150%;
    margin-top: 0px;
  }
}