@charset "UTF-8";
/*========== キーイメージ ===========*/
.wrap_keyimage {
  background: #14BCED;
}

.plan_name span {
  display: block;
}
.plan_name span:nth-child(1) {
  width: 199px;
  margin-bottom: 6px;
}
.plan_name span:nth-child(2) {
  width: 236px;
}

/*========== 電気代を安くする方法 ===========*/
.cheap .ttl_h2_iikoto::before {
  background-image: url(/iikoto-iroiro/images/gvp/icon_iikoto01.svg);
}

.wrap_gvp_head_contents {
  padding: 32px min(5%, 10px);
  background: #fff;
  border-radius: 8px;
  margin: 24px 0;
}

.gvp_head_contents {
  margin-bottom: 40px;
}
.gvp_head_contents:last-child {
  margin-bottom: 0;
}

.ttl_cheap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ttl_cheap .c_blue {
  font-weight: bold;
  font-size: 14px;
  font-size: 1.4rem;
  margin-left: 2px;
}
.ttl_cheap .c_blue span {
  font-size: 20px;
  font-size: 2rem;
}
.ttl_cheap img {
  width: 70%;
}

.txt_cheap {
  text-align: center;
}
.txt_cheap span {
  color: #ED1414;
  font-weight: bold;
  font-size: 18px;
  font-size: 1.8rem;
}

.wrap_total {
  background: #F8F8F8;
  padding: 14px 0;
  margin-top: 16px;
  position: relative;
}
.wrap_total::before {
  content: "";
  display: inline-block;
  background: url(/iikoto-iroiro/images/arrow_under.svg) no-repeat;
  background-size: contain;
  width: 26px;
  height: 27px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -70%);
}
.wrap_total p:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1;
}
.wrap_total p:first-child .year {
  border: 2px solid #000;
  border-radius: 8px;
  min-width: 46px;
  max-width: 46px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  font-size: 1.5rem;
  margin-right: 5px;
}
.wrap_total p:first-child .yen {
  display: flex;
  align-items: baseline;
}
.wrap_total p:first-child .yen span {
  font-size: 40px;
  font-size: 4rem;
  color: #ED1414;
  background: linear-gradient(to bottom, transparent 80%, rgba(20, 188, 237, 0.3) 80%);
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
.wrap_total p:first-child .logo_benefit {
  display: flex;
  align-items: baseline;
}
.wrap_total p:first-child .logo_benefit img {
  width: 50px;
}
.wrap_total p:nth-child(2) {
  font-size: 12px;
  font-size: 1.2rem;
  text-align: center;
  margin-top: 14px;
}
.wrap_total p:nth-child(2) .arrow_right::after {
  content: "";
  display: inline-block;
  background: url(/iikoto-iroiro/images/gvp/arrow_right_black.svg) no-repeat;
  background-size: contain;
  width: 16px;
  height: 13px;
  margin: 0 2px -2px 2px;
}
.wrap_total p:nth-child(2) .font_b {
  font-size: 14px;
  font-size: 1.4rem;
}

.img_cheap {
  margin-top: 16px;
}

.ul_note {
  font-size: 12px;
  font-size: 1.2rem;
  margin-bottom: 24px;
}
.ul_note li {
  display: flex;
}

/*========== 電気代がやすくなることだけ? ===========*/
.merit .ttl_h2_iikoto::before {
  background-image: url(/iikoto-iroiro/images/gvp/icon_iikoto02.svg);
}

.wrap_merit_contents {
  background: #fff;
  padding: 24px min(8%, 24px);
  margin: 24px 0;
  border-radius: 8px;
}

.txt_merit1 {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
}
.txt_merit1 .c_blue {
  font-size: 22px;
  font-size: 2.2rem;
}

.wrap_btn_contents p:not(:last-child) {
  margin-bottom: 24px;
}

/*========== これって別会社との契約が必要なの? ===========*/
.need .ttl_h2_iikoto::before {
  background-image: url(/iikoto-iroiro/images/gvp/icon_iikoto03.svg);
}
.need .wrap_btn_contents {
  margin-top: 24px;
}

/*========== 従来の電器契約（従量電灯）との主な違いは何ですか？===========*/
.add202503 .ttl_h2_iikoto {
  text-align: center;
}
.add202503 .ttl_h2_iikoto::before {
  display: none;
}
.add202503 .ttl_h2_iikoto img {
  width: auto;
  margin: auto;
  max-width: 100%;
}
.add202503 .wrap_gvp_head_contents {
  background: inherit;
}
.add202503 .wrap_gvp_head_contents .ul_note {
  width: 100%;
  padding: 2%;
}
@media all and (max-width: 1000px) {
  .add202503 .wrap_gvp_head_contents .ul_note {
    padding: 2% 0;
  }
}
.add202503 .wrap_gvp_head_contents .image {
  width: 600px;
}
@media all and (min-width: 600px) {
  .add202503 .wrap_gvp_head_contents .image {
    width: auto;
  }
}

/*========== 申し込み手続きって難しいんじゃない? ===========*/
.flow .ttl_h2_iikoto::before {
  background-image: url(/iikoto-iroiro/images/gvp/icon_iikoto03.svg);
}
.flow .note {
  margin-bottom: 24px;
  font-size: 12px;
  font-size: 1.2rem;
}

.wrap_flow_contents {
  margin: 24px 0;
}

.flow_contents {
  background: #fff;
  padding: 16px 0;
  text-align: center;
  position: relative;
}
.flow_contents::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 13.5px 0 13.5px;
  border-color: #ffffff transparent transparent transparent;
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translate(-50%, 100%);
  z-index: 1;
}
.flow_contents:first-child {
  border-radius: 8px 8px 0 0;
}
.flow_contents:nth-child(even) {
  background: #14BCED;
}
.flow_contents:nth-child(even)::after {
  border-color: #14BCED transparent transparent transparent;
}
.flow_contents:nth-child(even) .inner_flow_contents {
  color: #fff;
}
.flow_contents:nth-child(even) .inner_flow_contents .step {
  background: #fff;
  color: #14BCED;
}
.flow_contents:last-child::after {
  content: none;
}

.inner_flow_contents {
  display: inline-block;
  font-weight: bold;
  position: relative;
  font-size: 16px;
  font-size: 1.6rem;
  min-width: 144px;
}
.inner_flow_contents .step {
  background: #14BCED;
  color: #fff;
  border-radius: 40px;
  width: 104px;
  height: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 8px;
  font-size: 16px;
  font-size: 1.6rem;
}
.inner_flow_contents .step span {
  font-size: 14px;
  font-size: 1.4rem;
  margin-right: 5px;
}

.icon_flow {
  width: 50px;
  position: absolute;
  top: 50%;
  left: -12px;
  transform: translate(-100%, -50%);
}

/*========== お申し込み方法 ===========*/
.contact_way_head_text {
  font-weight: bold;
  font-size: 18px;
  font-size: 1.8rem;
  margin-bottom: 24px;
}

/* インターネット */
.wrap_contact_way_contents01 {
  background: #E9F5FE;
  border-radius: 8px;
  padding-bottom: 48px;
}
.wrap_contact_way_contents01 .recommended {
  background: #72BA44;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  font-size: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 101px;
  height: 33px;
  border-radius: 8px 0 8px 0;
  margin-bottom: 16px;
}
.wrap_contact_way_contents01 .note {
  width: 92%;
  margin: 16px auto 0;
  font-size: 12px;
  font-size: 1.2rem;
}
.wrap_contact_way_contents01 .note a {
  color: #006BC5;
}

.ttl_h3_contact_way {
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  font-size: 2.4rem;
  color: #12BCED;
  margin-bottom: 16px;
}

.recommended_text {
  font-weight: bold;
  font-size: 16px;
  font-size: 1.6rem;
  margin-bottom: 32px;
  text-align: center;
}

/* お電話でのお申込み */
/* ラインテキスト */
.line_text {
  margin-bottom: 20px;
  text-align: center;
}
.line_text > span {
  display: inline-block;
  color: #72BA44;
  border-bottom: 2px solid #72BA44;
  font-weight: bold;
  text-align: center;
  padding-bottom: 2px;
  position: relative;
}
.line_text > span::before, .line_text > span::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 100%);
}
.line_text > span::before {
  bottom: -2px;
  border-width: 10px 7px 0 7px;
  border-color: #71ba44 transparent transparent transparent;
}
.line_text > span::after {
  bottom: 1px;
  border-width: 10px 7px 0 7px;
  border-color: #fff transparent transparent transparent;
}

.wrap_contact_way_contents02 {
  border: 2px solid #006BC5;
  border-radius: 8px;
  padding: 32px 0 40px;
  margin-top: 16px;
}
.wrap_contact_way_contents02 .ttl_h3_contact_way {
  color: #000;
}

.free_dial {
  margin-bottom: 24px;
}
.free_dial a {
  color: #14BCED;
  font-weight: bold;
  font-size: 30px;
  font-size: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.free_dial a::before {
  content: "";
  display: inline-block;
  background: url(/iikoto-iroiro/images/gvp/icon_free_dial.svg) no-repeat;
  background-size: contain;
  width: 51px;
  height: 33px;
  margin-right: 5px;
}

.tel_info {
  text-align: center;
}
.tel_info p {
  margin-bottom: 16px;
}
.tel_info p:first-child {
  font-weight: bold;
  font-size: 16px;
  font-size: 1.6rem;
}
.tel_info p:last-child {
  margin-bottom: 0;
}

@media (min-width: 769px) {
  /*========== キーイメージ ===========*/
  .plan_name {
    max-width: none;
    display: flex;
    align-items: center;
  }
  .plan_name span {
    position: relative;
  }
  .plan_name span:nth-child(1) {
    width: 256px;
    margin-right: 27px;
    margin-bottom: 0;
  }
  .plan_name span:nth-child(1)::after {
    content: "";
    display: block;
    width: 1px;
    height: 28px;
    background: #D1D1D1;
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
  }
  .plan_name span:nth-child(2) {
    width: 304px;
  }
  .keyimage {
    width: min(44.24%, 553px);
  }
  /*========== 電気代を安くする方法 ===========*/
  .cheap .ttl_h2_iikoto img {
    max-width: 717px;
  }
  .wrap_gvp_head_contents {
    padding: 40px min(5%, 10px);
    margin: 24px 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .gvp_head_contents {
    margin-bottom: 0;
    width: calc(50% - 12px);
    margin-right: 24px;
  }
  .gvp_head_contents:nth-child(2) {
    margin-right: 0;
  }
  .ttl_cheap .c_blue {
    font-size: 16px;
    font-size: 1.6rem;
    margin-left: 4px;
  }
  .ttl_cheap .c_blue span {
    font-size: 32px;
    font-size: 3.2rem;
  }
  .txt_cheap span {
    font-size: 24px;
    font-size: 2.4rem;
    padding-top: 5px;
  }
  .wrap_total {
    padding: 16px 0;
    margin-top: 24px;
  }
  .wrap_total::before {
    width: 39px;
    height: 40px;
  }
  .wrap_total p:first-child {
    font-size: 28px;
    font-size: 2.8rem;
    flex-wrap: wrap;
  }
  .wrap_total p:first-child .year {
    min-width: 77px;
    max-width: 77px;
    height: 50px;
    font-size: 24px;
    font-size: 2.4rem;
    margin-right: 14px;
  }
  .wrap_total p:first-child .yen {
    display: flex;
    align-items: baseline;
  }
  .wrap_total p:first-child .yen span {
    font-size: 50px;
    font-size: 5rem;
  }
  .wrap_total p:first-child .logo_benefit img {
    width: 75px;
    margin-top: -7px;
  }
  .wrap_total p:nth-child(2) {
    font-size: 16px;
    font-size: 1.6rem;
    margin-top: 7px;
  }
  .wrap_total p:nth-child(2) .arrow_right::after {
    width: 28px;
    height: 23px;
    margin: 0 2px -5px 2px;
  }
  .wrap_total p:nth-child(2) .font_b {
    font-size: 24px;
    font-size: 2.4rem;
  }
  .img_cheap {
    margin-top: 32px;
  }
  .ul_note {
    margin-bottom: 40px;
  }
  /*========== 電気代がやすくなることだけ? ===========*/
  .merit .ttl_h2_iikoto img {
    max-width: 778px;
  }
  .wrap_merit_contents {
    padding: 32px min(8%, 24px);
    margin: 24px 0 40px;
  }
  .wrap_merit_contents p {
    max-width: 741px;
    margin: 0 auto;
  }
  .txt_merit1 {
    font-size: 27px;
    font-size: 2.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .txt_merit1 .c_blue {
    font-size: 40px;
    font-size: 4rem;
  }
  .txt_merit2 {
    text-align: center;
  }
  .wrap_btn_contents {
    width: 100%;
  }
  .wrap_btn_contents p {
    margin: 0;
  }
  .wrap_btn_contents p:not(:last-child) {
    margin-bottom: 0;
  }
  /*========== これって別会社との契約が必要なの? ===========*/
  .need .ttl_h2_iikoto img {
    max-width: 840px;
  }
  .need .wrap_btn_contents {
    margin-top: 40px;
  }
  /*========== 申し込み手続きって難しいんじゃない? ===========*/
  .flow .ttl_h2_iikoto img {
    max-width: 798px;
  }
  .flow .note {
    margin-bottom: 40px;
  }
  .wrap_flow_contents {
    display: flex;
  }
  .flow_contents {
    width: 20%;
    padding: 16px 0 12px;
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.2;
    background: #fff;
  }
  .flow_contents::after {
    border-width: 13.5px 0 13.5px 19px;
    border-color: transparent transparent transparent #fff;
    top: 20px;
    left: auto;
    right: -16px;
    transform: translate(0, 0);
  }
  .flow_contents:first-child {
    border-radius: 8px 0 0 8px;
  }
  .flow_contents:nth-child(even)::after {
    border-color: transparent transparent transparent #14BCED;
  }
  .inner_flow_contents {
    display: block;
  }
  .inner_flow_contents .step {
    width: min(100%, 104px);
    height: 33px;
    margin: 0 auto 11px;
    font-size: 20px;
    font-size: 2rem;
  }
  .inner_flow_contents .step span {
    font-size: 16px;
    font-size: 1.6rem;
    margin-right: 6px;
  }
  .icon_flow {
    width: 50px;
    position: static;
    transform: translate(0, 0);
    margin: 0 auto 8px;
  }
  /* ラインテキスト */
  .line_text {
    font-size: 16px;
    font-size: 1.6rem;
  }
  /*========== お申し込み方法 ===========*/
  .contact_way_head_text {
    text-align: center;
    font-size: 24px;
    font-size: 2.4rem;
  }
  /* インターネット */
  .wrap_contact_way_contents01 {
    padding-bottom: 32px;
    border-radius: 16px;
  }
  .wrap_contact_way_contents01 .recommended {
    font-size: 20px;
    font-size: 2rem;
    width: 126px;
    height: 44px;
    border-radius: 16px 0 16px 0;
    margin-bottom: 0;
  }
  .wrap_contact_way_contents01 .note {
    width: min(98%, 972px);
  }
  .wrap_contact_way_contents01 .wrap_btn_contents {
    width: min(98%, 972px);
  }
  .wrap_contact_way_contents01 .wrap_btn_contents .btn_contents {
    width: min(49%, 470px);
  }
  .ttl_h3_contact_way {
    font-size: 32px;
    font-size: 3.2rem;
    margin-bottom: 8px;
  }
  .recommended_text {
    font-size: 20px;
    font-size: 2rem;
  }
  /* お電話でのお申込み */
  .wrap_contact_way_contents02 {
    padding: 32px 0;
  }
  .free_dial {
    margin-bottom: 24px;
  }
  .free_dial a {
    font-size: 48px;
    font-size: 4.8rem;
    line-height: 1;
    pointer-events: none;
  }
  .free_dial a::before {
    width: 70px;
    height: 46px;
    margin-right: 8px;
  }
  .tel_info {
    text-align: center;
  }
  .tel_info p {
    margin-bottom: 0;
    font-size: 16px;
    font-size: 1.6rem;
  }
  .tel_info p:first-child {
    font-size: 20px;
    font-size: 2rem;
    margin-bottom: 8px;
  }
}
@media (min-width: 769px) {
  .inner_keyimage {
    justify-content: center;
    gap: 5%;
  }
}
@media (min-width: 769px) {
  .keyimage {
    width: min(37.24%, 506px);
  }
}

.plan_name {
  justify-content: center;
  display: flex;
}

@media (min-width: 769px) {
  .plan_name span:nth-child(1) {
    margin-right: 0;
  }
}
.plan_name span:nth-child(1)::after {
  content: none;
}

.wrap_keyimage .inner_keytext p {
  padding: 0 40px;
}
@media (min-width: 769px) {
  .wrap_keyimage .inner_keytext p {
    padding: 0 10px;
  }
}

@media (min-width: 769px) {
  .wrap_keyimage_service .ttl_h1 {
    width: min(95%, 608px);
  }
}
.wrap_keyimage_service .ttl_h1 img {
  width: 31.4666666667vw;
}
@media (min-width: 769px) {
  .wrap_keyimage_service .ttl_h1 img {
    width: min(17.5694444444vw, 253px);
  }
}

.btn_link_orange02 a {
  color: #fff;
  background-color: #ff9b00;
  border-color: rgb(255, 155, 0);
  box-shadow: 0 5px 0 rgb(200, 112, 0);
}
.btn_link_orange02 a::after {
  background-image: url(/iikoto-iroiro/images/exterbak_link_white.svg);
}

.wrap_flow_contents {
  justify-content: center;
}

.inner_flow_contents {
  color: #fff;
}
.inner_flow_contents .step {
  background: #fff;
  color: #14bced;
}

@media (min-width: 769px) {
  .icon_flow {
    width: auto;
  }
  .icon_flow img {
    width: auto;
    height: 59px;
  }
}

.flow_contents {
  background: #14bced;
}
@media (min-width: 769px) {
  .flow_contents {
    width: 25%;
  }
}
.flow_contents::after {
  border-color: #14bced transparent transparent transparent;
}
@media (min-width: 769px) {
  .flow_contents::after {
    border-color: transparent transparent transparent #14bced;
  }
}
.flow_contents:nth-child(even) {
  background: #ffffff;
}
.flow_contents:nth-child(even)::after {
  border-color: #ffffff transparent transparent transparent;
}
@media (min-width: 769px) {
  .flow_contents:nth-child(even)::after {
    border-color: transparent transparent transparent #ffffff;
  }
}
.flow_contents:nth-child(even) .inner_flow_contents {
  color: #14bced;
}
.flow_contents:nth-child(even) .inner_flow_contents .step {
  background: #14bced;
  color: #fff;
}
.flow_contents:nth-child(4) {
  padding-top: 20px;
}
@media (min-width: 769px) {
  .flow_contents:nth-child(4) {
    padding-top: 28px;
  }
}
@media (min-width: 769px) {
  .flow_contents:nth-child(4) .icon_flow {
    margin-bottom: 18px;
  }
  .flow_contents:nth-child(4) .icon_flow img {
    height: 90px;
  }
}

.dl_faq .num {
  font-size: 1rem;
  position: relative;
  top: -5px;
}
.dl_faq .note {
  font-size: 1.2rem;
}
/*# sourceMappingURL=style_gvp.css.map */