body {
    padding: 0!important;
}
.lp .lpmv-sp {
    display: none;
    position: relative;
}
.lp .lpmv-pc {
    display: block;
    width: 100vw;
    height: 45vw;
    position: relative;
    padding-left: min(calc((100/1040)*100vw), 100px);
    max-height: 640px;
    background: #4569a9 url(../img/mvpc.jpg) center center no-repeat;
    background-size: contain;
}
.lp .lpmv-pc .inner {
    margin: 0 auto;
    width: min(calc((1000/1040)*100vw), 1000px);
    width: 60%;
    max-width: 780px;
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.lp .lpmv-pc .btn {
    margin: min(calc((50/1040)*100vw), 50px) auto 0;
    max-width: 420px;
}
.lp .inner {
    margin: 0 auto;
    padding: 0;
    width: min(calc((1000/1040)*100vw), 1000px);
}
.lp .button {
    text-align: center;
    margin-top: min(calc((80/1040)*100vw), 80px);
}
.lp .button img {
    width: 80%;
    max-width: 420px;
}
@media screen and (max-width: 1440px) {
    .lp .lpmv-pc {
        height: 48vw;
        background-size: cover;
        padding-left: 0;
    }
    .lp .lpmv-pc .inner {
        max-width: 640px;
    }
    .lp .lpmv-pc .btn {
        margin: min(calc((50/1040)*100vw), 50px) auto 0;
        max-width: 360px;
    }
    .lp .lpmv-pc .inner {
        width: 100vw;
    }
}
@media screen and (max-width: 768px) {
    .lp .inner {
        width: calc((690/750)*100vw);
    }
    .lp .lpmv-sp {
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: center;
        align-content: center;
        flex-wrap: wrap;
        width: 100%;
        height: 170vw;
        background: url(../img/mvsp.jpg) center center no-repeat;
        background-size: cover;
        position: relative;
        text-align: center;
        padding: calc((80/750)*100vw) 15% 0;
    }
    .lp .lpmv-sp .inner {
        margin: 0 auto;
        width: 100%;
        max-width: 780px;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .lp .lpmv-sp .btn {
        margin: calc((80/750)*100vw) auto 0;
        width: 100%;
        max-width: 400px;
    }
    .lp .lpmv-pc {
        display: none;
        position: relative;
    }
}

/*styling*/
.nospacing {
    letter-spacing: 2px;
}
.green {
    color: #1AC8A4;
}
.orange {
    color: #F86B27;
}
.large {
    font-size: min(calc((56/1040)*100vw), 56px);
    margin: 0;
    padding: 0;
}
.big {
    font-size: min(calc((30/1040)*100vw), 30px);
    margin: 0;
    padding: 0;
    line-height: 180%;
}
.smaller {
    font-size: min(calc((22/1040)*100vw), 22px);
    margin: 0;
    padding: 0;
    line-height: 180%;
}
.bold {
    font-weight: 600;
}
@media screen and (max-width: 768px) {
    .large {
        font-size: calc((56/750)*100vw);
    }
    .big {
        font-size: calc((36/750)*100vw);
    }
    .smaller {
        font-size: calc((30/750)*100vw);
    }
}

/*accordion*/
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}
.electricity_retail .sec02-qaList li dl dt {
    margin: 10px 0;
}
.electricity_retail .sec02-qaList li dl dd {
    margin: 0;
    padding: 0;
}
.electricity_retail .sec02-qaList li dl dd.panel {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
.electricity_retail .sec02-qaList li dl dd.panel p {
    padding-bottom: 20px;
}

/*why*/
#problem {
    margin: 0 auto;
    padding: min(calc((80/1040)*100vw), 80px) 0 min(calc((100/1040)*100vw), 100px) ;
    text-align: center;
}
#service {
    margin: 0 auto;
    padding: min(calc((90/1040)*100vw), 90px) 0 min(calc((40/1040)*100vw), 40px);
    text-align: center;
}
#why {
    margin: 0 auto;
    padding: min(calc((90/1040)*100vw), 90px) 0 min(calc((100/1040)*100vw), 100px);
    text-align: center;
}
#why,
.electricity_retail .sec02 {
    background: #F5F5F5!important;
}
.electricity_retail .sec03 {
    padding: min(calc((100/1040)*100vw), 100px) 0;
}
.electricity_retail .sec02 {
    padding: min(calc((90/1040)*100vw), 90px) 0;
}
#why dl {
    width: 100%;
    margin: min(calc((50/1040)*100vw), 50px) 0 -15px;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    align-self: stretch;
    align-content: center;
    background: #fff;
}
#why dl dt {
    margin: 0;
    padding: 3% 4% 4%;
    width: 45%;
    background: url(../img/bg.png) left center no-repeat;
    background-size: 100% 100%;
    text-align: left;
    color: #fff;
    line-height: 240%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-self: stretch;
    align-content: stretch;
}
#why dl dt .large {
    font-size: min(calc((32/1040)*100vw), 32px);
}
#why dl dt .smaller {
    font-size: min(calc((17/1040)*100vw), 17px);
}
#why dl dt .smaller2 {
    font-size: min(calc((24/1040)*100vw), 24px);
}
#why dl dt img {
    max-width: min(calc((70/1040)*100vw), 70px);
    margin-bottom: min(calc((10/1040)*100vw), 10px);
}
#why dl dd {
    margin: 0;
    padding: 4% 5%;
    width: 55%;
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-self: stretch;
    align-content: stretch;
    flex-wrap: wrap;
}
#why dl dd p {
    font-size: min(calc((18/1040)*100vw), 18px);
    line-height: 200%;
    width: 100%;
}
#why dl dd p.note {
    font-size: min(calc((13/1040)*100vw), 13px);
    margin-top: min(calc((20/1040)*100vw), 20px);
    width: 100%;
}
@media screen and (max-width: 768px) {
    #problem{
        padding: calc((85/750)*100vw) 0 calc((100/750)*100vw) ;
    }
    #service {
        padding: calc((100/750)*100vw) 0 calc((40/750)*100vw);
    }
    #why {
        padding: calc((100/750)*100vw) 0;
    }
    #why dl {
        margin: calc((20/750)*100vw) 0 calc((40/750)*100vw);
        flex-wrap: wrap;
    }
    #why dl dt {
        margin: 0;
        padding: 4% 3% 8%;
        width: 100%;
        background: url(../img/bgsp.png) left center no-repeat;
        background-size: 100% 100%;
        text-align: center;
    }
    #why dl dt div {
        width: 100%;
    }
    #why dl dt .large {
        font-size: calc((40/750)*100vw);
    }
    #why dl dt .smaller {
        font-size: calc((30/750)*100vw);
    }
    #why dl dt .smaller2 {
        font-size: calc((24/750)*100vw);
    }
    #why dl dt img {
        max-width: calc((130/750)*100vw);
        margin-bottom: calc((15/750)*100vw);
    }
    #why dl dd {
        margin: 0;
        padding: 6% 5%;
        width: 100%;
    }
    #why dl dd p {
        font-size: calc((26/750)*100vw);
        line-height: 200%;
        width: 100%;
    }
    #why dl dd p.note {
        font-size: calc((18/750)*100vw);
        margin-top: calc((20/750)*100vw);
        width: 100%;
    }
}
.smalltext {
    font-size: 90%;
}
.smalltext2 {
    font-size: 75%;
    margin: 10px 0 40px;
}

/* service */
#service .c-headingArea {
    text-align: center;
}
#service .c-headingArea img {
    width: 100%;
    max-width: 560px;
    margin-bottom: 0;
}
#service  .inner {
    margin: 0 auto;
    padding: 0;
    width: min(calc((1040/1040)*100vw), 1040px);
}
#service .c-headingArea::after {
    content: "";
    display: none;
    width: 0;
    height: 0;
    background-color: transparent;
  }
#service .dtl2 {
    background-color: #EFF8F3;
    border: solid 2px #fff;
    box-shadow: 0 0 min(calc((27/1040)*100vw), 27px) rgba(0, 0, 0, 0.05);
    width: 100%;
    padding: 0 min(calc((35/1040)*100vw), 35px) min(calc((30/1040)*100vw), 30px);
    margin-top: min(calc((60/1040)*100vw), 60px);
    margin-bottom: min(calc((80/1040)*100vw), 80px);
    text-align: center;
    position: relative;
}
#service .dtl2 h6.title {
    font-weight: 600;
    font-size: min(calc((24/1040)*100vw), 24px);
    color: #fff;
    background: url(../img/midashi.png) center center no-repeat;
    background-size: 60% 100%;
    padding: 10px;
    margin: -28px 0 min(calc((40/1040)*100vw), 40px);
}
#service .dtl2 h5.green-title {
    font-weight: 600;
    font-size: min(calc((21/1040)*100vw), 21px);
    color: #006647;
    text-align: left;
    padding: 0;
    margin: min(calc((30/1040)*100vw), 30px) 0 min(calc((20/1040)*100vw), 20px);
}
#service .dtl2 ul.list {
    margin: 0 0 20px;
    padding: 0;
}
#service .dtl2 ul.list li {
    margin: min(calc((10/1040)*100vw), 10px) 0 0;
    padding: 0 0 0 min(calc((30/1040)*100vw), 30px);
    position: relative;
    text-align: left;
    font-weight: 500;
    font-size: 90%;
}
#service .dtl2 ul.list li:before {
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: min(calc((10/1040)*100vw), 10px);
    background: url(../img/checkbox2.png) left top no-repeat;
    background-size: contain;
}
#service .dtl2 ul.list2 {
    margin: 0 auto 20px;
    padding: 0;
}
#service .dtl2 ul.list2 li {
    display: flex;
    align-items: center;
    align-self: center;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-weight: 500;
    margin: 10px auto;
    font-size: 90%;
    width: 80%;
}
#service .dtl2 ul.list2 li img {
    width: 50px;
    margin-right: 20px;
}
#service .dtl2 ul.list2 li p {
    width: calc(100% - 70px);
    text-align: left;
}
#service .dtl2 ul.list2 li p span {
    font-size: 75%;
}
@media screen and (max-width: 768px) {
    #service  .inner {
        width: 96%;
    }
    #service .dtl2 {
        box-shadow: 0 0 calc((20/750)*100vw) rgba(0, 0, 0, 0.05);
        width: 100%;
        padding: 0 calc((40/750)*100vw) calc((50/750)*100vw);
        margin-top: calc((70/750)*100vw);
        margin-bottom: calc((80/750)*100vw);
    }
    #service .dtl2 h6.title {
        font-weight: 600;
        font-size: calc((28/750)*100vw);
        color: #fff;
        background: url(../img/midashi.png) center center no-repeat;
        background-size: 80% 100%;
        padding: 6px 8px 8px;
        margin: -4% 0 calc((40/750)*100vw);
    }
    #service .dtl2 h5.green-title {
        font-weight: 600;
        font-size: calc((28/750)*100vw);
        color: #006647;
        text-align: left;
        padding: 0;
        margin: calc((50/750)*100vw) 0 calc((20/750)*100vw);
    }
    #service .dtl2 ul.list {
        margin: 0 0 20px;
        padding: 0;
    }
    #service .dtl2 ul.list li {
        margin: calc((10/750)*100vw) 0 0;
        padding: 0 0 0 calc((40/750)*100vw);
        position: relative;
        text-align: left;
        font-weight: 500;
        font-size: calc((26/750)*100vw);
    }
    #service .dtl2 ul.list li:before {
        width: 18px;
        height: 18px;
        position: absolute;
        left: 0;
        top: calc((12/750)*100vw);
    }
    #service .dtl2 ul.list2 {
        margin: 0 auto calc((40/750)*100vw);
        padding: calc((2/750)*100vw) 0 0;
    }
    #service .dtl2 ul.list2 li {
        margin: calc((10/750)*100vw) auto calc((40/750)*100vw) ;
        font-size: calc((26/750)*100vw);
        width: 100%;
        align-items: flex-start;
        align-self: flex-start;
        align-content: flex-start;
    }
    #service .dtl2 ul.list2 li img {
        width: calc((100/750)*100vw);
        margin-right: calc((20/750)*100vw);
    }
    #service .dtl2 ul.list2 li p {
        width: calc(100% - calc((120/750)*100vw));
        text-align: left;
        line-height: 180%;
    }
    #service .dtl2 ul.list2 li p span {
        font-size: calc((21/750)*100vw);
        line-height: 180%;
    }
}

/*problem*/
#problem {
    background: url(../img/bg.jpg) top center no-repeat;
    background-size: 100% 200%;
}
#problem .head {
    padding: 0 0 min(calc((30/1040)*100vw), 30px);
    margin: 0 auto;
    font-weight: 600;
    background: url(../img/line.png) center bottom no-repeat;
    background-size: 100%;
    width: 100%;
    max-width: min(calc((700/1040)*100vw), 700px);
}
#problem .head .text {
    margin-bottom: min(calc((30/1040)*100vw), 30px);
    text-align: center;
}
#problem .head .big {
    margin-top: min(calc((20/1040)*100vw), 20px);
}
#problem ul {
    margin: min(calc((40/1040)*100vw), 40px) auto min(calc((60/1040)*100vw), 60px) ;
    padding: 0;
    max-width: min(calc((850/1040)*100vw), 850px);
}
#problem li {
    margin: min(calc((15/1040)*100vw), 15px) 0 0;
    padding: 0 0 0 min(calc((35/1040)*100vw), 35px);
    position: relative;
    text-align: left;
    font-weight: 500;
    font-size: min(calc((24/1040)*100vw), 24px);
}
#problem li:before {
    content: '';
    width: 26px;
    height: 26px;
    position: absolute;
    left: 0;
    top: min(calc((10/1040)*100vw), 10px);
    background: url(../img/checkbox.png) left top no-repeat;
    background-size: contain;
}
@media screen and (max-width: 768px) {
    #problem .head {
        padding: 0 0 calc((40/750)*100vw);
        flex-wrap: wrap;
        max-width: 100%;
    }
    #problem .head .text {
        width: 100%;
        padding: 0;
        text-align: center;
    }
    #problem .head .image {
        width: 100%;
        padding: calc((20/750)*100vw) calc((100/750)*100vw) 0;
    }
    #problem .head .big {
        margin-top: min(calc((20/1040)*100vw), 20px);
    }
    #problem ul {
        width: 100%;
        margin: calc((50/750)*100vw) auto calc((60/750)*100vw) ;
        padding: 0;
        max-width: min(calc((850/1040)*100vw), 850px);
    }
    #problem li {
        margin: calc((15/750)*100vw)  0 0;
        padding: 0 0 0 calc((35/750)*100vw);
        position: relative;
        text-align: left;
        font-weight: 500;
        font-size: calc((28/750)*100vw);
    }
    #problem li:before {
        content: '';
        width: 20px;
        height: 20px;
        position: absolute;
        left: -10px;
        top: calc((10/750)*100vw);
        background: url(../img/checkbox.png) left top no-repeat;
        background-size: contain;
    }
    .smalltext {
        font-size: calc((26/750)*100vw);
        line-height: 200%;
    }
    .smalltext2 {
        font-size: calc((21/750)*100vw);
        margin: calc((15/750)*100vw) 0 calc((40/750)*100vw);
    }
}
#area a:hover,
#button a:hover {
    opacity: .6;
}

.contact .contact-ttl {
    font-weight: 500;
    text-align: center;
    line-height: 1.73333;
    font-size: calc((36/750)*100vw)
}

@media screen and (min-width: 768px),
print {
    .contact .contact-ttl {
        letter-spacing: 0.1em;
        font-size: min(calc((18/1040)*100vw), 18px)
    }
}

.contact .contact-ttl::after {
    content: "";
    display: block;
    margin: auto;
    background: linear-gradient(to right, #18c8a5, #91f44f);
    margin: calc((20/750)*100vw) auto calc((40/750)*100vw);
    width: calc((60/750)*100vw);
    height: calc((7/750)*100vw)
}

@media screen and (min-width: 768px),
print {
    .contact .contact-ttl::after {
        margin: min(calc((25/1040)*100vw), 25px) auto 0;
        width: min(calc((42/1040)*100vw), 42px);
        height: min(calc((4/1040)*100vw), 4px)
    }
}

.contact .sec01-txt {
    font-size: min(calc((24/750)*100vw), 24px);
    width: calc((690/750)*100vw);
    margin-top: calc((40/750)*100vw);
    text-align: center;
}

@media screen and (min-width: 768px),
print {
    .contact .sec01-txt {
        text-align: center;
        font-size: min(calc((18/1040)*100vw), 18px);
        width: min(calc((940/1040)*100vw), 940px);
        margin-top: min(calc((47/1040)*100vw), 47px);
    }
}

.contact .sec02 .content-inner {
    padding-top: 0;
}

.contact .contact-grid {
    display: block;
}

@media screen and (min-width: 768px),
print {
    .contact .contact-grid {
        display: flex;
        justify-content: space-between;
    }
}

.contact .contact-info {
    width: calc((690/750)*100vw);
    padding-bottom: min(calc((30/750)*100vw), 30px);
}

@media screen and (min-width: 768px),
print {
    .contact .contact-info {
        width: min(calc((590/1040)*100vw), 590px);
        padding-bottom: 0;
    }
}

.contact .contact-info figure {
    padding-bottom: min(calc((26/390)*100vw), 26px);
}

@media screen and (min-width: 768px),
print {
    .contact .contact-info figure {
        padding-bottom: min(calc((30/1040)*100vw), 30px);
    }
}

.contact .contact-info .docu-info_ttl {
    font-weight: bold;
    line-height: 1.3;
    font-size: calc((28/750)*100vw);
    letter-spacing: 0.1em;
    border-bottom: 2px solid;
    border-image: linear-gradient(to left, #4BD1AB, #93F157) 1;
    padding-bottom: min(calc((15/750)*100vw), 15px);
}

@media screen and (min-width: 768px),
print {
    .contact .contact-info .docu-info_ttl {
        line-height: 1.53846;
        letter-spacing: 0.06em;
        font-size: min(calc((20/1040)*100vw), 20px);
        padding-bottom: min(calc((15/1040)*100vw), 15px);
        margin-bottom: min(calc((10/1040)*100vw), 10px)
    }
}

.contact .docu-info_list li {
    font-weight: bold;
    display: flex;
    align-items: center;
    padding: min(calc((10/750)*100vw), 10px) 0;
    letter-spacing: 0.1em
}

@media screen and (max-width: 767px),
print {
    .contact .docu-info_list li {
        line-height: 1.78571
    }
}

@media screen and (min-width: 768px),
print {
    .contact .docu-info_list li {
        letter-spacing: 0.05em;
        font-size: min(calc((14/1040)*100vw), 14px);
        padding: min(calc((10/1040)*100vw), 10px) 0;
    }
}

.contact .docu-info_list li::before {
    content: "";
    display: block;
    background: url(../img/task_ic_check.svg) no-repeat left center;
    background-size: contain;
    width: min(calc((40/750)*100vw), 40px);
    height: min(calc((30/750)*100vw), 30px);
    margin-right: calc((20/750)*100vw)
}

@media screen and (min-width: 768px),
print {
    .contact .docu-info_list li::before {
        width: min(calc((20/1040)*100vw), 20px);
        height: min(calc((16/1040)*100vw), 16px);
        margin-right: min(calc((16/1040)*100vw), 16px)
    }
}
/*追加*/
.contact .docu-info_text {
    padding: min(calc((20/390)*100vw), 20px) 0;
}

@media screen and (min-width: 768px),
print {
    .contact .docu-info_text {
        font-size: min(calc((15/1040)*100vw), 15px);
        padding: min(calc((20/1040)*100vw), 20px) 0;
    }
}

.contact .contact-info .docu-info {
    padding-bottom: min(calc((40/390)*100vw), 40px);
}

@media screen and (min-width: 768px),
print {
    .contact .contact-info .docu-info {
        padding-bottom: min(calc((40/1040)*100vw), 40px);
    }
}