@charset "UTF-8";
/* style.css */
body {
  height: auto;
}
#page-header {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}
#container {
  width: 100%;
  max-width: 750px;
  margin: 0 auto 12%;
}
.styles-content {
  color: #373737;
  margin: 0 auto;
  position: relative;
}
.styles-content img {
  display: block;
  width: 100%;
  height: auto;
}
.kv-box {
  background: #fff;
}
.otoku-box {
  background: #0055a2;
  padding: 6.27% 0 4.54%;
}
.otoku--txt1 {
  width: 94.67%;
  margin: 0 auto 2.14%;
}
.otoku--txt2 {
  width: 80.81%;
  margin: 0 auto 3.2%;
}
.otoku--note1 {
  width: 86.67%;
  color: #fff;
  font-size: 18px;
  line-height: 1.3;
  text-indent: -1em;
  margin: 0 auto 3.2%;
  padding: 0 0 0 1em;
}
.otoku-content {
  width: 93.34%;
  background: #fff;
  border-radius: 1.34vw;
  margin: 0 auto;
  padding: 3.74% 0 2.67%;
}
.otoku--graph {
  width: 93.58%;
  margin: 0 auto 3%;
}
.otoku--case1 {
  width: 93.58%;
  margin: 0 0 0.86% 3.72%;
}
.otoku--case2 {
  width: 90.58%;
  margin: 0 0 4.29% 3.72%;
}
.otoku--note2 {
  width: 93.58%;
  font-size: 18px;
  line-height: 1.3;
  position: relative;
  margin: 0 0 1em 3.72%;
  padding: 0 0 0 2em;
  box-sizing: border-box;
}
.otoku--note2 span {
  position: absolute;
  left: 0;
}
.otoku--note3 {
  width: 93.58%;
  font-size: 18px;
  line-height: 1.3;
  position: relative;
  text-indent: -0.5em;
  margin: 0 0 1em 3.72%;
  padding: 0 0 0 2em;
  box-sizing: border-box;
}
.otoku--note3 span {
  position: absolute;
  left: 1em;
}
.otoku--detail {
  width: 93.58%;
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 0 3.72%;
}
.otoku--detail a {
  text-decoration: underline;
}
.otoku--detail img {
  display: inline-block;
  width: 14px;
  vertical-align: middle;
  position: relative;
  bottom: 0.27vw;
  margin-left: 2px;
}
.service-inner {
  padding: 5.87% 0 8%;
}
.service--note {
  width: 87.34%;
  font-size: 18px;
  line-height: 1.3;
  position: relative;
  margin: 0 auto;
  padding: 0 0 0 1.5em;
  box-sizing: border-box;
}
.service--note span {
  position: absolute;
  left: 0;
}
.service--detail {
  width: 87.34%;
  font-size: 18px;
  line-height: 1.3;
  text-align: right;
}
.service--detail a {
  text-decoration: underline;
}
.service--detail img {
  display: inline-block;
  width: 14px;
  vertical-align: middle;
  position: relative;
  bottom: 0.27vw;
  margin-left: 2px;
}
.service1--txt {
  width: 90.14%;
  margin: 0 0 2.94% 6.4%;
}
.service1--icon {
  width: 87.34%;
  margin: 0 0 3.2% 6.4%;
}
.service2--txt {
  width: 55.21%;
  margin: 0 0 3.6% 6.4%;
}
.service2--icon {
  width: 87.34%;
  margin: 0 0 4% 6.4%;
}
.service3--txt {
  width: 85.47%;
  margin: 0 0 7.34% 6.4%;
}
.service3--flow {
  width: 87.34%;
  margin: 0 0 5.34% 6.4%;
}
.service3-target--head {
  width: 87.34%;
  margin: 6.94% 0 2.94% 6.4%;
}
.service3-target--img {
  width: 86.27%;
  margin: 0 0 5.07% 7.2%;
}
.service3-content .service--detail {
  margin: 0 auto 3.2%;
}
.service4--txt1 {
  width: 85.47%;
  margin: 0 0 10.27% 6.4%;
}
.service4-offer {
  width: 87.34%;
  border: 0.54vw solid #0055a2;
  margin: 0 0 2.67% 6.4%;
  padding: 1px 0 2.67% 0;
}
.service4--txt2 {
  width: 75.58%;
  margin: -5.64% auto 20px;
}
.service4-checks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20px;
}
.service4-check {
  width: 48%;
  margin: 0 0 20px;
}
.service4-check--img {
  margin: 0 0 6px 0;
}
.service4-check--txt {
  font-size: 18px;
  line-height: 1.42;
  font-feature-settings: "palt";
}
.service4-content .service--detail {
  width: 96.49%;
}
.faq-box {
  background: #006ebc;
  padding: 6.4% 0 2.14%;
}
.faq--ttl {
  width: 47.2%;
  margin: 0 auto 4%;
}
.faq-content {
  width: 93.34%;
  margin: 0 auto 4%;
}
.faq--q {
  background: #ecf4fc;
  color: #006ebc;
  font-size: 24px;
  line-height: 1.27;
  font-weight: bold;
  border-radius: 1.34vw 1.34vw 0 0;
  padding: 20px 20px 20px 50px;
  position: relative;
}
.faq--q b {
  font-size: 36px;
  font-family: 'Helvetica';
  line-height: 1;
  position: absolute;
  left: 12px;
  top: 12px;
}
.faq--a {
  background: #fff;
  font-size: 18px;
  line-height: 1.72;
  font-weight: bold;
  border-radius: 0 0 1.34vw 1.34vw;
  padding: 20px 20px 20px 50px;
  position: relative;
}
.faq--a b {
  color: #e61959;
  font-size: 36px;
  font-family: 'Helvetica';
  line-height: 1;
  position: absolute;
  left: 12px;
  top: 16px;
}
.faq--a sup {
  font-size: 60%;
  font-weight: normal;
  position: relative;
  left: -0.5em;
}
.faq--note {
  display: block;
  font-size: 16px;
  line-height: 1.46;
  font-weight: normal;
  margin: 0.4em 0 0 0;
  padding: 0 0 0 1em;
  position: relative;
}
.faq--note span {
  position: absolute;
  left: 0;
}
.faq-content1 .faq--q img {
  width: 93%;
}
.faq-content1 .faq--a img {
  width: 91.86%;
}
.faq-content2 .faq--q img {
  width: 68.43%;
}
.faq-content2 .faq--a img {
  width: 93.15%;
}
.faq-content3 .faq--q img {
  width: 89.43%;
}
.faq-content3 .faq--a img {
  width: 93%;
}
.faq-content4 .faq--q img {
  width: 91%;
}
.faq-content4 .faq--a img {
  width: 94.29%;
}
.simulation-box {
  padding: 5.87% 0 0;
}
.simulation--head {
  width: 72.8%;
  margin: 0 auto 4%;
}
.simulation--btn {
  width: 75.07%;
  margin: 0 auto 5.6%;
}
.present {
  width: 89.34%;
  margin: 0 auto 4%;
}
.apply-box {
  background: #e7f6ff;
  padding: 6.14% 0 5.34%;
}
.apply--ttl {
  width: 91.34%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.apply-content {
  width: 89.34%;
  background: #fff;
  margin: -7.86% auto 0;
  padding: 10.67% 0 4.8%;
  position: relative;
  z-index: 0;
}
.apply--btn1 {
  width: 91.8%;
  margin: 0 auto 3.89%;
}
.apply--txt1 {
  color: #005b9b;
  font-size: 24px;
  line-height: 1.56;
  font-weight: bold;
  font-feature-settings: "palt";
  text-align: center;
  margin: 0 5.38% 4.48% 5.38%;
}
.apply--txt2 {
  color: #3b3b3b;
  font-size: 18px;
  line-height: 1.46;
  font-weight: bold;
  font-feature-settings: "palt";
  text-align: center;
  margin: 0 5.38% 4.48% 5.38%;
}
.apply--txt2 b {
  font-size: 20px;
  line-height: 1.8;
}
.apply--txt2 a {
  text-decoration: underline;
}
.apply-tel--head {
  width: 97.47%;
  margin: 0 auto 2.39%;
}
.apply-tel--number {
  width: 89.41%;
  margin: 0 auto 2.69%;
}
.apply-tel--txt1 {
  width: 91.5%;
  margin: 0 auto 2.69%;
}
.apply-tel--txt2 {
  color: #3b3b3b;
  font-size: 18px;
  line-height: 1.12;
  font-weight: bold;
  font-feature-settings: "palt";
  margin: 0 4.48% 5px;
}
.apply-tel--txt3 {
  margin: 0 4.48% 3.29% 4.48%;
}
.apply-tel--txt3 a {
  font-size: 15px;
  line-height: 1.32;
  font-weight: bold;
  text-decoration: underline;
}
.apply-tel--txt3 a img {
  display: inline-block;
  width: 1.25%;
  vertical-align: middle;
  position: relative;
  bottom: 0.27vw;
  margin-right: 0.5%;
}
.apply--note {
  color: #006ebc;
  font-size: 18px;
  line-height: 1.28;
  font-feature-settings: "palt";
  margin: 0 3% 4.48% 5.38%;
}
.apply--btn2 {
  width: 92.39%;
  margin: 0 auto;
}
.styles--bnr {
  width: 100%;
  max-width: 750px;
  position: fixed;
  bottom: 0;
  z-index: 100;
  transform: translateY(100%);
  transition: all 200ms linear;
}
.styles--bnr-isfixed {
  transform: translateY(0%);
}
footer {
  padding: 0 0 0 0;
}
#footer_wrap {
  padding: 20px 3% 0;
}
#footer_wrap #pagetop {
  width: 85%;
  margin: 0 auto;
}
#footer_wrap #pagetop a {
  border-radius: 8px;
  padding: 10px 0;
  display: block;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
  background: #0d86d1;
}
#footer_wrap #pagetop a span {
  padding-right: 22px;
  background: url("/sp/electricity/lp/style_s/img/btn_icon_pagetop.png") right center no-repeat;
  background-size: 13px 10px;
}

/* 2022.09 追記 */
.otoku--note_2209_1 {
  width: 93.58%;
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 1em 3.72%;
  border: 1px solid #f00;
  padding: 10px;
  box-sizing: border-box;
}
.service--note.note-mgn {
  padding: 0 0 0 2.5em;
}
.otoku--note1-box{
  color: #fff;
  width: 87%;
  margin: 0 auto 3.2vw;
  border: 1px solid #fff;
  padding: 10px;
  box-sizing: border-box;
  font-size: 22px;
}
.margin-t10 {
  margin-top: 10px;
}
/* 2025/07 */
.otoku-box-in{
  position: relative;
}
.otoku-box-in--img,.cta_area--img,.float_cta_area--img{
  width: 100%;
}
.otoku-box-link-2{
  position: absolute;
  bottom: 10%;
  left: 10%;
}
.otoku-box-link--txt{
  padding-left: 0.5em;
  text-indent: -1em;
  font-size: 13px;
}
.cta_area{
  position: relative;
}
.cta_link1{
  position: absolute;
  display: block;
  width: 45%;
  height: 52%;
  top: 36%;
  left: 4%;
}
.cta_link2{
  position: absolute;
  display: block;
  width: 45%;
  height: 52%;
  top: 36%;
  left: 51%;
}
.pack_anchor{
  margin: 0.5% 0;
  display: block;
}
.pack_anchor:first-of-type{
  margin-top: 0;
}
.pack_anchor-box{
  margin-bottom: 2.5%;
}
.float_cta_area{
  position: relative;
}
.float_cta_link1{
  position: absolute;
  display: block;
  width: 47.5%;
  height: 60%;
  top: 36%;
  left: 2%;
}
.float_cta_link2{
  position: absolute;
  display: block;
  width: 47.5%;
  height: 60%;
  top: 36%;
  left: 51%;
}
.service5-content{
  background-color: #0055A2;
}
.service5-content-in{
  position: relative;
  background-color: #fff;
}
.service5-content-link-1{
  position: absolute;
  bottom: 41%;
  left: 0;
  right: 0;
  margin: auto;
  width: 75%;
}
.service5-content-link-2 {
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0;
  margin: auto;
  width: 75%;
}
.service5-content-link--txt{
  padding-left: 1em;
  text-indent: -1em;
  font-size: 18px;
}
.style_s_modal_link{
  text-decoration: underline;
  cursor: pointer;
}
.style_s_modal{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 55000;
  visibility: hidden;
  transition: all .3s;
  opacity: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.style_s_modal.-active{
  opacity: 1;
  visibility: visible;
}
.style_s_modal_bg{
  width: 100%;
  height: 100%;
  background: rgba(70, 68, 68, 0.5);
  position: absolute;
  cursor: pointer;
}
.style_s_modal_area_layer{
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 100;
  width: calc((343 / 375) * 100%);
  height: fit-content;
  max-width: 700px;
  max-height: 100%;
  overflow-y: scroll;
  overscroll-behavior-y: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.style_s_modal_area_layer::-webkit-scrollbar{
  display: none;
}
.style_s_modal_inner{
  padding-top: 24px;
  padding-bottom: 24px;
  padding-left: 17px;
  padding-right: 17px;
  background: #FFFFFF;
}
.style_s_modal_inner img{
  width: 100%;
}
.style_s_modal_sub_title{
  font-family: Hiragino Kaku Gothic Pro;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  color: #34383B;
}
.style_s_modal_sub_title_attention{
  display: inline-block;
  font-family: Hiragino Kaku Gothic Pro;
  font-size: 8px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: -0.16em;
  vertical-align: top;
  color: #34383B;
}
.style_s_modal_title{
  font-family: Hiragino Kaku Gothic Pro;
  font-size: 24px;
  font-weight: 600;
  line-height: 40px;
  text-align: center;
  color: #1271B3;
}
.style_s_modal_title .-emphasis{
  font-size: 32px;
}
.style_s_modal_title_attention{
  font-family: Hiragino Kaku Gothic Pro;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.09em;
  vertical-align: top;
  color: #1271B3;
}
.style_s_modal_electricity_title{
  font-family: Hiragino Kaku Gothic Pro;
  font-size: 32px;
  font-weight: 600;
  line-height: 48px;
  text-align: center;
  color: #1271B3;
}.style_s_modal_electricity_title_emphasis{
  font-size: 40px;
}
.style_s_modal_text_wrap{
  display: flex;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 3%;
}
.style_s_modal_text_wrap:first-of-type {
  margin-top: 0;
}
.style_s_modal_text{
  width: calc((257 / 279) * 100%);
  font-family: Hiragino Kaku Gothic Pro;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  text-align: left;  
}
.style_s_modal_text.-right{
  padding-left: 20px;
  width: 100%;
}
.style_s_modal_text.-attention{
  margin-right: 5px;
  width: calc((15 / 279)* 100%);
  text-align: center;
}
.style_s_modal_inner .style_s_modal_link{
  color: #5CB4F4;
  text-decoration: underline;
}
.style_s_modal_close_button{
  margin-left: auto;
  margin-right: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  width: 208px;
  border-radius: 8px;
  background-color: #5CB4F4;
  cursor: pointer;
  margin-top: 16px;
}
.style_s_modal_close_text{
  display: inline-block;
  margin-left: 68px;
  position: relative;
  font-family: Hiragino Kaku Gothic Pro;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  color: #FFFFFF;
  text-align: center;
}
.style_s_modal_close_text::after{
  content: url(/sp/electricity/lp/style_s/img/modal_close.svg);
  margin-left: 2px;
  position: absolute;
  -webkit-transform: translate(0%, -50%);
  -moz-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  -o-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  top: 50%;
  width: 24px;
  height: 24px;
}
img.service5-content-in--img{
  width: 90%;
  margin: auto;
}
.pc_dis_ib {
  display: inline-block;
}
.sp_dis_ib {
  display: none;
}
.pc_point_no_ev {
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .otoku--note1-box{
    font-size: 11px;
  }
  .otoku--note1 {
    font-size: 10px;
  }
  .otoku--note_2209_1 {
    font-size: 11px;
  }
  .otoku--note2 {
    font-size: 10px;
  }
  .otoku--note3 {
    font-size: 10px;
  }
  .otoku--detail {
    font-size: 10px;
  }
  .otoku--detail img {
    width: 10px;
  }
  .service--note {
    font-size: 10px;
  }
  .service--detail {
    font-size: 12px;
  }
  .service--detail img {
    width: 10px;
  }
  .service4-checks {
    padding: 0 10px;
  }
  .service4-check--txt {
    font-size: 11px;
  }
  .faq--q {
    font-size: 18px;
    padding: 15px 15px 15px 36px;
  }
  .faq--q b {
    font-size: 24px;
    left: 8px;
    top: 10px;
  }
  .faq--a {
    font-size: 12px;
    padding: 15px 15px 15px 36px;
  }
  .faq--a b {
    font-size: 24px;
    left: 8px;
    top: 13px;
  }
  .faq--note {
    font-size: 11px;
  }
  .apply--txt1 {
    font-size: 13px;
  }
  .apply--txt2 b {
    font-size: 13px;
  }
  .apply--txt2 {
    font-size: 11px;
  }
  .apply--note {
    font-size: 10px;
  }
  .apply-tel--txt2 {
    font-size: 12px;
  }
  .apply-tel--txt3 a {
    font-size: 11px;
  }
  .otoku-box-link--txt {
    font-size: 1.8vw;
  }
  .style_s_modal_text {
    font-size: 2.2vw;
  }
  .service5-content-link--txt {
    font-size: 2.2vw;
  }
  .pc_dis_ib {
    display: none;
  }
  .sp_dis_ib {
    display: inline-block;
  }
  .pc_point_no_ev {
    pointer-events: inherit;
  }
}