.contentsIn {
  padding-top: 100px;
}

.nopoint {
  border: 2px solid #f0f0f0;
  border-radius: var(--radius3);
  padding: 30px;
  text-align: center;
}

.nopoint_read {
  text-align: center;
  font-size: var(--fsize18);
  line-height: 1.6;
  padding: 30px 0;
}

.nopoint_check {
  border: none;
  padding: 0;
  display: flex inline;
  -ms-flex-flow: column wrap;
      flex-flow: column wrap;
  -ms-flex-align: start;
      align-items: flex-start;
  margin: 0 auto;
  text-align: center;
}

.steps {
  margin-top: 30px;
  text-align: left;
}

.step_col {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  gap: 50px;
  border: 2px solid #f0f0f0;
  border-radius: var(--radius3);
  position: relative;
  padding-left: 50px;
}
.step_col.-reverse {
  padding-left: 0;
  padding-right: 50px;
}
.step_col.-reverse .step_img {
  border-radius: 27px 0 0 27px;
}
.step_col.-noimage {
  padding: 40px 50px;
}
.step_col.-noimage .step_head {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: start;
      align-items: flex-start;
  gap: 40px;
}
.step_col.-block {
  display: block;
  padding: 40px 50px;
}
.step_col + .step_col {
  margin-top: 40px;
}
.step_col + .step_col:before {
  content: "";
  width: 40px;
  height: 16px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: #f0f0f0;
  position: absolute;
  left: calc(50% - 20px);
  top: -28px;
}

.step_ttl {
  font-size: var(--fsize20);
  line-height: 1.6;
  font-weight: 500;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-align: start;
      align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  margin-bottom: 20px;
}
.step_ttl .ico {
  background: var(--color-key);
  font-size: var(--fsize16);
  display: table;
  line-height: 1;
  padding: 8px 30px;
  border-radius: 40px;
}
.step_ttl.-alert {
  padding-left: 30px;
}
.step_ttl.-alert:before {
  content: "";
  width: 21px;
  height: 19px;
  display: block;
  background: url(/denkigas/cmn/img/ico_alert_r.svg) no-repeat center/contain;
  position: absolute;
  left: 0;
  top: 0.3em;
}

.step_head {
  -ms-flex: 1;
      flex: 1;
  font-size: var(--fsize18);
}
.step_head .ico {
  background: var(--color-key);
  font-size: var(--fsize16);
  display: table;
  line-height: 1;
  padding: 8px 30px;
  border-radius: 40px;
  margin-bottom: 10px;
}
.step_head.-gray .ico {
  background: #f0f0f0;
}

.step_col_in {
  -ms-flex: 1;
      flex: 1;
}

.step_img {
  width: 340px;
  background: #eaeff6;
  text-align: center;
  border-radius: 0 27px 27px 0;
  overflow: hidden;
}
.step_img > img {
  max-width: 230px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.step_img.-s > img {
  max-width: 203px;
}

.step_list {
  margin-top: 20px;
}
.step_list > li {
  text-indent: -1em;
  padding-left: 1em;
  font-weight: 400;
  line-height: 1.4;
  font-size: var(--fsize16);
}
.step_list > li + li {
  margin-top: 10px;
}

.step_notes {
  margin-top: 20px;
}
.step_notes > li {
  font-size: var(--fsize12);
}

.flowBox {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  gap: 30px;
  background: #f0f0f0;
  border-radius: var(--radius3);
  padding: 20px;
  text-align: center;
  margin: 30px 0;
}

.flow1,
.flow2 {
  width: 256px;
}

.flowAr {
  width: 118px;
}

.flow1Ico {
  background: url(/denkigas/cmn/img/ico_denki_img.svg) no-repeat #fff center/43px 74px;
  width: 100%;
  height: 100px;
  border-radius: var(--radius2);
}

.flowArIco {
  background: url(/denkigas/cmn/img/ico_next_long.svg) no-repeat center/contain;
  width: 100%;
  height: 100px;
  border-radius: var(--radius2);
}

.flow2Ico {
  background: url(/denkigas/cmn/img/ico_mail.svg) no-repeat #fff center/74px 53px;
  width: 100%;
  height: 100px;
  border-radius: var(--radius2);
}

.flowTxt {
  line-height: 1.4;
  margin-top: 10px;
}
.flowTxt.-ar {
  margin-top: -20px;
}

.flowNotes {
  margin-top: 10px;
}
.flowNotes > li {
  font-size: var(--fsize10);
}

.img_full {
  border: 2px solid #f0f0f0;
  border-radius: var(--radius2);
  overflow: hidden;
  margin-bottom: 10px;
}

.alertHead {
  font-size: var(--fsize16);
  font-weight: 500;
  line-height: 1.6;
  position: relative;
  display: table;
  text-align: left;
  margin: 0 auto;
  padding-left: 30px;
}
.alertHead:before {
  content: "";
  width: 21px;
  height: 19px;
  display: block;
  background: url(/denkigas/cmn/img/ico_alert_r.svg) no-repeat center/contain;
  position: absolute;
  left: 0;
  top: 0.2em;
}

.vpoint_toggleBtn {
  font-size: var(--fsize16);
  color: #000;
  background: #f0f0f0;
  padding: 8px 80px;
  border-radius: var(--radius1);
  margin: 20px auto 0;
}
.vpoint_toggleBtn:before {
  width: 16px;
  height: 16px;
  right: 10px;
  top: calc(50% - 8px);
}

.vpoint_row {
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
}

.vpoint_btn {
  --btn-width: 420px;
  font-size: var(--fsize20);
  font-weight: 500;
  background: var(--color-base) !important;
  text-align: center;
}

.vpoint_table {
  margin-top: 30px;
}

@media screen and (max-width: 1024px) {
  #wrap:before {
    height: 480px;
  }
  .contentsIn {
    padding-top: 40px;
  }
  .nopoint {
    padding: 30px;
  }
  .nopoint_read {
    font-size: var(--fsize28);
    padding: 20px 0;
  }
  .steps {
    margin-top: 30px;
  }
  .step_col {
    -ms-flex-flow: column wrap;
        flex-flow: column wrap;
    gap: 40px;
    padding: 40px 0 0 0;
  }
  .step_col.-reverse {
    padding: 0;
  }
  .step_col.-reverse .step_img {
    border-radius: 27px 27px 0 0;
  }
  .step_col.-reverse .step_col_in {
    padding: 0 20px 40px;
  }
  .step_col.-block {
    padding: 40px 20px;
  }
  .step_col.-noimage {
    padding: 40px 0;
  }
  .step_col.-noimage .step_head {
    -ms-flex-flow: column wrap;
        flex-flow: column wrap;
    gap: 10px;
  }
  .step_col + .step_col {
    margin-top: 60px;
  }
  .step_col + .step_col:before {
    width: 60px;
    height: 24px;
    left: calc(50% - 30px);
    top: -42px;
  }
  .step_ttl {
    font-size: var(--fsize28);
    padding-bottom: 10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-align: start;
        align-items: flex-start;
    gap: 20px;
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
  }
  .step_ttl .ico {
    font-size: var(--fsize20);
    padding: 8px 20px;
    margin-top: 5px;
  }
  .step_ttl.-alert {
    padding-left: 60px;
  }
  .step_ttl.-alert:before {
    content: "";
    width: 42px;
    height: 38px;
    top: 0.1em;
  }
  .step_head {
    font-size: var(--fsize28);
    width: 100%;
    padding: 0 20px;
  }
  .step_head .ico {
    font-size: var(--fsize20);
    padding: 8px 20px;
    margin-bottom: 10px;
  }
  .step_col_in {
    width: 100%;
  }
  .step_img {
    width: 100%;
    border-radius: 0 0 27px 27px;
  }
  .step_list {
    margin-top: 20px;
    padding: 0 20px;
  }
  .step_list > li {
    font-size: var(--fsize28);
  }
  .step_list > li + li {
    margin-top: 10px;
  }
  .step_notes {
    margin-top: 20px;
  }
  .step_notes > li {
    font-size: var(--fsize20);
  }
  .vpoint_txtLink {
    margin-top: 20px;
  }
  .flowBox {
    -ms-flex-flow: column wrap;
        flex-flow: column wrap;
    gap: 20px;
    padding: 20px;
    margin: 30px 0;
  }
  .flow1,
  .flow2 {
    width: 100%;
  }
  .flowAr {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
  }
  .flow1Ico {
    background-size: 86px 148px;
    width: 100%;
    height: 200px;
  }
  .flowArIco {
    transform: rotate(90deg);
    width: 80px;
    height: 80px;
  }
  .flow2Ico {
    background-size: 148px 106px;
    width: 100%;
    height: 200px;
  }
  .flowTxt {
    font-size: var(--fsize28);
    line-height: 1.4;
    margin-top: 10px;
  }
  .flowTxt.-ar {
    margin-top: 0;
  }
  .flowNotes {
    margin-top: 10px;
  }
  .flowNotes > li {
    font-size: var(--fsize20);
  }
  .img_full {
    margin-bottom: 20px;
  }
  .alertHead {
    font-size: var(--fsize28);
    padding-left: 60px;
  }
  .alertHead:before {
    width: 42px;
    height: 38px;
    top: 0.2em;
  }
  .vpoint_toggleBtn {
    font-size: var(--fsize28);
    padding: 16px 100px;
    border-radius: var(--radius1);
    margin: 30px auto 0;
  }
  .vpoint_toggleBtn:before {
    width: 32px;
    height: 32px;
    right: 20px;
    top: calc(50% - 16px);
  }
  .vpoint_row {
    -ms-flex-flow: column wrap;
        flex-flow: column wrap;
    gap: 40px;
  }
  .vpoint_btn {
    --btn-width: 580px;
    font-size: var(--fsize28);
  }
  .vpoint_table {
    margin-top: 30px;
  }
}
@media screen and (max-width: 767px) {
  /*
    .contentsHead{
      margin-bottom: setting.px-to-vw(40px, 767px);
    }
  */
  /*
    .contentsRead{
      font-size: setting.px-to-vw(28px, 767px);
      .small{
        font-size: setting.px-to-vw(20px, 767px);
      }
    }
  */
  #wrap:before {
    height: 62.58vw;
  }
  .contents {
    padding: 0 3.91vw 5.22vw;
  }
  .contentsIn {
    width: 100%;
  }
  .nopoint {
    padding: 3.91vw;
  }
  .nopoint_read {
    font-size: 3.65vw;
    padding: 2.61vw 0;
  }
  .steps {
    margin-top: 3.91vw;
  }
  .step_col {
    gap: 5.22vw;
    padding: 5.22vw 0 0 0;
  }
  .step_col.-reverse {
    padding: 0;
  }
  .step_col.-reverse .step_img {
    border-radius: 3.52vw 3.52vw 0 0;
  }
  .step_col.-reverse .step_col_in {
    padding: 0 2.61vw 5.22vw;
  }
  .step_col.-block {
    padding: 5.22vw 2.61vw;
  }
  .step_col.-noimage {
    padding: 5.22vw 0;
  }
  .step_col.-noimage .step_head {
    gap: 1.3vw;
  }
  .step_col + .step_col {
    margin-top: 7.82vw;
  }
  .step_col + .step_col:before {
    width: 7.82vw;
    height: 3.13vw;
    left: calc(50% - 3.91vw);
    top: -5.48vw;
  }
  .step_ttl {
    font-size: 3.65vw;
    padding-bottom: 1.3vw;
    gap: 2.61vw;
    margin-bottom: 2.61vw;
  }
  .step_ttl .ico {
    font-size: 2.61vw;
    padding: 1.04vw 2.61vw;
    margin-top: 0.65vw;
  }
  .step_ttl.-alert {
    padding-left: 7.82vw;
  }
  .step_ttl.-alert:before {
    content: "";
    width: 5.48vw;
    height: 4.95vw;
    top: 0.1em;
  }
  .step_head {
    font-size: 3.65vw;
    padding: 0 2.61vw;
  }
  .step_head .ico {
    font-size: 2.61vw;
    padding: 1.04vw 2.61vw;
    margin-bottom: 1.3vw;
  }
  .step_img {
    border-radius: 0 0 3.52vw 3.52vw;
  }
  .step_list {
    margin-top: 2.61vw;
    padding: 0 2.61vw;
  }
  .step_list > li {
    font-size: 3.65vw;
  }
  .step_list > li + li {
    margin-top: 1.3vw;
  }
  .step_notes {
    margin-top: 2.61vw;
  }
  .step_notes > li {
    font-size: 2.61vw;
  }
  .vpoint_txtLink {
    margin-top: 2.61vw;
  }
  .flowBox {
    gap: 2.61vw;
    padding: 2.61vw;
    margin: 3.91vw 0;
  }
  .flow1Ico {
    background-size: 11.21vw 19.3vw;
    height: 26.08vw;
  }
  .flowArIco {
    width: 10.43vw;
    height: 10.43vw;
  }
  .flow2Ico {
    background-size: 19.3vw 13.82vw;
    height: 26.08vw;
  }
  .flowTxt {
    font-size: 3.65vw;
    margin-top: 1.3vw;
  }
  .flowNotes {
    margin-top: 1.3vw;
  }
  .flowNotes > li {
    font-size: 2.61vw;
  }
  .img_full {
    margin-bottom: 2.61vw;
  }
  .alertHead {
    font-size: 3.65vw;
    padding-left: 7.82vw;
  }
  .alertHead:before {
    width: 5.48vw;
    height: 4.95vw;
    top: 0.2em;
  }
  .vpoint_toggleBtn {
    font-size: 3.65vw;
    padding: 2.09vw 15.65vw;
    margin: 3.91vw auto 0;
  }
  .vpoint_toggleBtn:before {
    width: 4.17vw;
    height: 4.17vw;
    right: 2.61vw;
    top: calc(50% - 2.09vw);
  }
  .vpoint_row {
    gap: 5.22vw;
  }
  .vpoint_btn {
    font-size: 3.65vw;
  }
  .vpoint_table {
    margin-top: 3.91vw;
  }
}