.contentsIn {
  max-width: 960px;
  width: 90%;
}

.contentsHead {
  margin-bottom: 40px;
}

.contentsRead {
  font-size: var(--fsize18);
}

.col {
  margin-top: 0;
}

.checkList {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  gap: 20px 40px;
  padding: 40px 80px;
  border-radius: var(--radius3);
  border: 2px solid #f0f0f0;
}
.checkList > li {
  font-size: var(--fsize18);
  line-height: 1.4;
  font-weight: 500;
  position: relative;
  padding-left: 26px;
  text-align: left;
}
.checkList > li:before {
  content: "";
  width: 22px;
  height: 22px;
  position: absolute;
  left: 0;
  top: 0.18em;
  background: url(/denkigas/cmn/img/ico_check.png) no-repeat center;
  background-size: contain;
}

.area {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  gap: 20px 40px;
}
.area > li {
  width: 460px;
  border: 2px solid #f0f0f0;
  border-radius: var(--radius3);
  padding: 30px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column wrap;
      flex-flow: column wrap;
  -ms-flex-align: center;
      align-items: center;
}

.area_head {
  font-size: var(--fsize20);
  font-weight: 400;
  text-align: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  gap: 10px;
}
.area_head.-denki:before {
  content: "";
  width: 17px;
  height: 30px;
  background: url(/denkigas/cmn/img/ico_denki_img.svg) no-repeat center;
  background-size: contain;
}
.area_head.-gas:before {
  content: "";
  width: 15px;
  height: 30px;
  background: url(/denkigas/cmn/img/ico_gas_img.svg) no-repeat center;
  background-size: contain;
}

.area_txt {
  margin-top: 20px;
}

.area_notes {
  width: 100%;
  margin: 10px auto 20px;
}
.area_notes > li {
  font-size: var(--fsize12);
}

.area_btn {
  box-shadow: none !important;
  background: #f5f5f5 !important;
  margin-top: auto;
  text-align: center;
}
.area_btn:before {
  background-image: url(/denkigas/cmn/img/ico_blank_g.svg) !important;
  right: 15px !important;
}

.plan:not(:first-of-type) {
  margin-top: 60px;
}

.plan_outer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
      justify-content: flex-end;
  -ms-flex-align: center;
      align-items: center;
  gap: 20px;
}
.plan_outer:first-of-type {
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 30px;
}

.plan_outer_head {
  font-size: var(--fsize24);
  line-height: 1.5;
}

.plan_list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  gap: 20px;
  margin-top: 35px;
}
.plan_list > li {
  width: 300px;
  background: #fff;
  border-radius: var(--radius2);
  text-align: center;
  padding: 20px;
  border: 2px solid #f0f0f0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column wrap;
      flex-flow: column wrap;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  height: auto;
}
.plan_list.-gas {
  gap: 30px;
}
.plan_list.-gas > li {
  width: 360px;
}
.plan_list.-gas .plan_panel_btn {
  background: var(--color-gas-key);
}

.panel_head {
  font-size: var(--fsize32);
  text-align: left;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
}

.plan_img1 {
  width: 60.32786%;
  max-width: 184px;
  margin: 0 auto;
}

.plan_img2 {
  width: 36.39344%;
  max-width: 111px;
  margin: 0 auto;
}

.plan_img3 {
  width: 66.2295%;
  max-width: 202px;
  margin: 0 auto;
}

.plan_panel_img4 {
  width: 46.55737%;
  max-width: 142px;
  margin: 0 auto;
}

.plan_panel_img5 {
  width: 43.60655%;
  max-width: 133px;
  margin: 0 auto;
}

.plan_img6 {
  width: 89.18032%;
  max-width: 272px;
  margin: 0 auto;
}

.plan_img7 {
  width: 100%;
  max-width: 305px;
  margin: 0 auto;
}

.plan_target {
  font-size: var(--fsize12);
  line-height: 1.2;
  border: 1px solid #000;
  display: flex inline;
  min-height: 50px;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  padding: 0 20px;
  border-radius: 40px;
  margin: 20px auto 0;
}

.plan_name {
  font-size: var(--fsize28);
  line-height: 1.4;
  margin-top: 15px;
}
.plan_name .s {
  font-size: var(--fsize14);
}

.plan_txt {
  margin-top: 10px;
}

.plan_notes {
  margin-top: 10px;
  display: flex inline;
}
.plan_notes > li {
  text-align: left;
  font-size: var(--fsize12);
}

.plan_panel_btn {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  width: 210px;
  height: 50px;
  background: var(--color-denki-key);
  color: #000;
  border-radius: var(--radius1);
  margin: 20px auto 0;
  position: relative;
}
.plan_panel_btn:before {
  content: "";
  width: 14px;
  height: 14px;
  background: url(/denkigas/cmn/img/ico_blank_bl.svg) no-repeat left top;
  background-size: cover;
  position: absolute;
  right: 10px;
  top: calc(50% - 7px);
}
.plan_panel_btn:hover {
  text-decoration: none;
}

.contract_head {
  font-size: var(--fsize28);
  text-align: center;
  font-weight: 400;
  line-height: 1.4;
  border: 2px solid #666;
  display: table;
  margin: 0 auto;
  padding: 6px 40px;
  border-radius: 80px;
  position: relative;
}
.contract_head.-denki {
  padding-left: 57px;
}
.contract_head.-denki:before {
  content: "";
  width: 17px;
  height: 30px;
  background: url(/denkigas/cmn/img/ico_denki_img.svg) no-repeat center;
  background-size: contain;
  position: absolute;
  left: 30px;
  top: calc(50% - 15px);
}
.contract_head.-gas {
  padding-left: 55px;
}
.contract_head.-gas:before {
  content: "";
  width: 15px;
  height: 30px;
  background: url(/denkigas/cmn/img/ico_gas_img.svg) no-repeat center;
  background-size: contain;
  position: absolute;
  left: 30px;
  top: calc(50% - 15px);
}

.entry {
  background: var(--color-conv);
  border-radius: 30px;
  vertical-align: top;
  box-sizing: border-box;
  padding: 60px 40px;
  width: 100%;
  position: relative;
  margin-top: 100px;
}
.entry * {
  position: relative;
}
.entry .contentsHead {
  padding-top: 0;
}
.entry:before {
  content: "";
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  position: absolute;
  left: 4px;
  top: 4px;
  background: #fff;
  border-radius: 27px;
}

.entry_btn {
  font-size: var(--fsize20);
  font-weight: 500;
}
.entry_btn > .ico {
  width: 45px;
  height: 38px;
  background: url(/denkigas/cmn/img/ico_denkigas_img.svg) no-repeat center;
  background-size: contain;
  margin-right: 10px;
}

.entry_link {
  text-align: center;
  margin-top: 30px;
}
.entry_link:not(:first-of-type) {
  margin-top: 5px;
}

.set_txt {
  width: 800px;
  margin: 40px auto 0;
  font-size: var(--fsize18);
}

.set_notes {
  display: table;
  margin: 20px auto 0;
}
.set_notes > li {
  font-size: var(--fsize12);
}

.step_outer {
  margin-top: 80px;
}

.steps {
  margin-top: 60px;
}

.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.-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 + .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_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_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_list {
  margin-top: 20px;
}
.step_list > li {
  text-indent: -1em;
  padding-left: 1em;
  font-weight: 500;
  line-height: 1.4;
}
.step_list > li + li {
  margin-top: 10px;
}

.contract_btns {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  gap: 30px;
  width: 870px;
  margin: 0 auto;
}
.contract_btns > .btn {
  --btn-width: 420px;
  max-width: var(--btn-width);
  background-color: var(--color-base) !important;
  font-size: var(--fsize20);
  font-weight: 500;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  .area {
    gap: 20px 4%;
  }
  .area > li {
    width: 48%;
    padding: 30px;
  }
  .plan_list {
    gap: 20px 2%;
    margin-top: 35px;
  }
  .plan_list > li {
    width: 32%;
  }
  .plan_name {
    font-size: var(--fsize24);
  }
  .plan_name .s {
    font-size: var(--fsize12);
  }
  .plan_outer {
    -ms-flex-flow: column wrap;
        flex-flow: column wrap;
  }
  .plan_outer .plan_list {
    gap: 30px;
    margin-top: 0;
  }
  .plan_outer .plan_list > li {
    width: 360px;
  }
  .plan_outer_head {
    margin-top: 40px;
  }
  .plan_outer_head > br {
    display: none;
  }
  .contract_btns {
    gap: 4%;
    width: 100%;
  }
  .contract_btns > .btn {
    --btn-width: 48%;
  }
}
@media screen and (max-width: 1024px) {
  .contentsRead {
    font-size: var(--fsize28);
  }
  #wrap:before {
    height: 600px;
  }
  .checkList {
    gap: 15px 40px;
    padding: 30px 40px;
    margin-top: 20px;
  }
  .checkList > li {
    font-size: var(--fsize28);
    letter-spacing: 0;
    font-weight: 500;
    position: relative;
    padding-left: 34px;
  }
  .checkList > li:before {
    width: 28px;
    height: 28px;
    top: 0.2em;
  }
  .area {
    -ms-flex-flow: column wrap;
        flex-flow: column wrap;
    gap: 30px;
  }
  .area > li {
    width: 100%;
    padding: 30px;
  }
  .area_head {
    font-size: var(--fsize32);
    gap: 10px;
  }
  .area_head.-denki:before {
    width: 23px;
    height: 40px;
  }
  .area_head.-gas:before {
    width: 20px;
    height: 40px;
  }
  .area_txt {
    margin-top: 20px;
    font-size: var(--fsize28);
  }
  .area_notes {
    width: 100%;
    margin: 10px auto 20px;
  }
  .area_notes > li {
    font-size: var(--fsize20);
  }
  .area_btn {
    font-size: var(--fsize28);
    margin-top: 20px;
  }
  .area_btn:before {
    right: 15px !important;
  }
  .plan:not(:first-of-type) {
    margin-top: 60px;
  }
  .plan_outer_head {
    margin-top: 20px;
  }
  .plan_outer:first-of-type {
    padding-bottom: 30px;
  }
  .plan_outer .plan_list {
    width: 100%;
    gap: 15px 2%;
    margin-top: 0;
  }
  .plan_outer .plan_list > li {
    width: 49%;
  }
  .plan_list {
    gap: 15px 2%;
    margin-top: 35px;
  }
  .plan_list > li {
    width: 49%;
    padding: 20px;
  }
  .panel_head {
    font-size: var(--fsize30);
  }
  .plan_target {
    font-size: var(--fsize20);
    padding: 0 20px;
    min-height: 80px;
    margin: 20px auto 0;
  }
  .plan_name {
    font-size: var(--fsize28);
    letter-spacing: 0;
  }
  .plan_name .s {
    font-size: var(--fsize20);
  }
  .plan_txt {
    margin-top: 10px;
  }
  .plan_notes {
    margin-top: 10px;
    display: block;
  }
  .plan_notes > li {
    font-size: var(--fsize20);
  }
  .plan_panel_btn {
    width: 244px;
    height: 70px;
    font-size: var(--fsize22);
    border-radius: var(--radius2);
    margin: 30px auto 0;
  }
  .contract_head {
    font-size: var(--fsize32);
    padding: 6px 40px;
    position: relative;
  }
  .contract_head.-denki {
    padding-left: 62px;
  }
  .contract_head.-denki:before {
    width: 23px;
    height: 40px;
    left: 35px;
    top: calc(50% - 20px);
  }
  .contract_head.-gas {
    padding-left: 60px;
  }
  .contract_head.-gas:before {
    width: 20px;
    height: 40px;
    left: 35px;
    top: calc(50% - 20px);
  }
  .entry {
    border-radius: 30px;
    padding: 60px 40px;
    margin-top: 80px;
  }
  .entry_btn {
    font-size: var(--fsize32);
    padding-right: 40px;
    text-align: left;
  }
  .entry_btn > .ico {
    width: 80px;
    height: 66px;
    margin-right: 10px;
  }
  .entry_link {
    font-size: var(--fsize28);
    text-align: left;
    line-height: 1.5;
    margin-top: 30px;
  }
  .entry_link:not(:first-of-type) {
    margin-top: 10px;
  }
  .set_txt {
    width: 100%;
    margin: 40px auto 0;
    font-size: var(--fsize28);
  }
  .set_notes {
    margin: 20px auto 0;
  }
  .set_notes > li {
    font-size: var(--fsize20);
  }
  .step_outer {
    margin-top: 80px;
  }
  .steps {
    margin-top: 60px;
  }
  .step_col {
    -ms-flex-flow: column wrap;
        flex-flow: column wrap;
    gap: 40px;
    padding: 40px 0 0 0;
  }
  .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_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;
  }
  .contract_btns {
    -ms-flex-flow: column wrap;
        flex-flow: column wrap;
    gap: 40px;
    width: 100%;
  }
  .contract_btns > .btn {
    --btn-width: 580px;
    font-size: var(--fsize32);
  }
}
@media screen and (max-width: 767px) {
  .contentsHead {
    margin-bottom: 5.22vw;
  }
  .contentsRead {
    font-size: 3.65vw;
  }
  .contentsRead .small {
    font-size: 2.61vw;
  }
  #wrap:before {
    height: 65.19vw;
  }
  .contents {
    padding: 0 3.91vw 5.22vw;
  }
  .contentsIn {
    width: 100%;
  }
  .checkList {
    gap: 1.96vw 5.22vw;
    padding: 3.91vw 5.22vw;
    margin-top: 2.61vw;
  }
  .checkList > li {
    font-size: 3.65vw;
    padding-left: 4.43vw;
  }
  .checkList > li:before {
    width: 3.65vw;
    height: 3.65vw;
  }
  .area {
    gap: 3.91vw;
  }
  .area > li {
    width: 100%;
    padding: 3.91vw;
  }
  .area_head {
    font-size: 4.17vw;
    gap: 1.3vw;
  }
  .area_head.-denki:before {
    width: 3vw;
    height: 5.22vw;
  }
  .area_head.-gas:before {
    width: 2.61vw;
    height: 5.22vw;
  }
  .area_txt {
    margin-top: 2.61vw;
    font-size: 3.65vw;
  }
  .area_notes {
    margin: 1.3vw auto 2.61vw;
  }
  .area_notes > li {
    font-size: 2.61vw;
  }
  .area_btn {
    font-size: 3.65vw;
    margin-top: 2.61vw;
  }
  .area_btn:before {
    right: 1.96vw !important;
  }
  .plan:not(:first-of-type) {
    margin-top: 7.82vw;
  }
  .plan_outer_head {
    font-size: 3.65vw;
    margin-top: 2.61vw;
  }
  .plan_outer {
    gap: 2.61vw;
  }
  .plan_outer:first-of-type {
    padding-bottom: 3.91vw;
  }
  .plan_outer .plan_list {
    gap: 1.96vw 2%;
  }
  .plan_list {
    gap: 1.96vw 2%;
    margin-top: 4.56vw;
  }
  .plan_list > li {
    padding: 2.61vw;
  }
  .panel_head {
    font-size: 3.91vw;
  }
  .plan_target {
    font-size: 2.61vw;
    padding: 0 2.61vw;
    min-height: 10.43vw;
    margin: 2.61vw auto 0;
    letter-spacing: 0;
  }
  .plan_name {
    font-size: 3.65vw;
  }
  .plan_name .s {
    font-size: 2.61vw;
  }
  .plan_txt {
    margin-top: 1.3vw;
  }
  .plan_notes {
    margin-top: 1.3vw;
  }
  .plan_notes > li {
    font-size: 2.61vw;
  }
  .plan_panel_btn {
    width: 31.81vw;
    height: 9.13vw;
    font-size: 2.87vw;
    margin: 3.91vw auto 0;
  }
  .plan_panel_btn:before {
    width: 2.61vw;
    height: 2.61vw;
    right: 1.3vw;
    top: calc(50% - 1.3vw);
  }
  .contract_head {
    font-size: 4.17vw;
    padding: 0.78vw 5.22vw;
  }
  .contract_head.-denki {
    padding-left: 8.08vw;
  }
  .contract_head.-denki:before {
    width: 3vw;
    height: 5.22vw;
    left: 4.56vw;
    top: calc(50% - 2.61vw);
  }
  .contract_head.-gas {
    padding-left: 7.82vw;
  }
  .contract_head.-gas:before {
    width: 2.61vw;
    height: 5.22vw;
    left: 4.56vw;
    top: calc(50% - 2.61vw);
  }
  .entry {
    border-radius: 3.91vw;
    padding: 7.82vw 5.22vw;
    margin-top: 10.43vw;
  }
  .entry:before {
    border-radius: 3.65vw;
  }
  .entry_btn {
    font-size: 4.17vw;
    padding-right: 5.22vw;
  }
  .entry_btn > .ico {
    width: 10.43vw;
    height: 8.6vw;
    margin-right: 1.3vw;
  }
  .entry_link {
    font-size: 3.65vw;
    margin-top: 3.91vw;
  }
  .entry_link:not(:first-of-type) {
    margin-top: 1.3vw;
  }
  .set_txt {
    margin: 5.22vw auto 0;
    font-size: 3.65vw;
  }
  .set_notes {
    margin: 2.61vw auto 0;
  }
  .set_notes > li {
    font-size: 2.61vw;
  }
  .step_outer {
    margin-top: 10.43vw;
  }
  .steps {
    margin-top: 7.82vw;
  }
  .step_col {
    gap: 5.22vw;
    padding: 5.22vw 0 0 0;
  }
  .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_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;
  }
  .contract_btns {
    gap: 5.22vw;
  }
  .contract_btns > .btn {
    --btn-width: setting.px-to-vw(580px, 767px);
    font-size: 4.17vw;
  }
}